/* ========================================================================== Lekárne v Senici — styl.css Vlastná identita: atramentová modrá (informačná tabuľa) + koralová pre pohotovosť. Bez webfontov, bez frameworku. Téma: = ručný prepínač (localStorage "tema"); bez atribútu platí systémové prefers-color-scheme. ========================================================================== */ /* ---------------------------------------------------------------- 1. tokeny */ :root { color-scheme: light; --modra: #2f3bb3; --modra-tm: #242c8d; --modra-text: #262f96; --modra-sv: #edeefb; --modra-linka: #c8cdf2; --na-modrej: #ffffff; --koral: #c9432b; --koral-tm: #a5341f; --koral-text: #9c3320; --koral-sv: #fdeee9; --koral-linka: #f4cabc; --ok: #10704f; --ok-sv: #e4f2ec; --zle: #a83a2d; --zle-sv: #fbecea; --ticho: #5b6377; --ticho-sv: #eceef3; --text: #151827; --text-2: #4e5568; --text-3: #757c90; --plocha: #ffffff; --plocha-2: #f4f4f2; --pozadie: #f6f5f2; --linka: #e2e1dc; --linka-silna: #cdccc6; --hlava-bg: rgba(246, 245, 242, .88); --pata-bg: #171a2a; --pata-text: #c4c7d6; --pata-text-2: #8d93a8; --pata-linka: rgba(255, 255, 255, .1); --tien: 0 1px 2px rgba(21, 24, 39, .05); --tien-2: 0 10px 30px -18px rgba(21, 24, 39, .35); --r-s: 8px; --r: 14px; --r-l: 20px; --sirka: 1080px; --prechod: .16s ease; } @media (prefers-color-scheme: dark) { :root:not([data-tema="svetla"]) { color-scheme: dark; --modra: #949cff; --modra-tm: #b0b6ff; --modra-text: #aab0ff; --modra-sv: #1c2044; --modra-linka: #333a75; --na-modrej: #0d1030; --koral: #ff8f6d; --koral-tm: #ffab90; --koral-text: #ffa88b; --koral-sv: #33201a; --koral-linka: #55302579; --ok: #4fc79b; --ok-sv: #122c22; --zle: #f2867a; --zle-sv: #331d1a; --ticho: #9aa1b5; --ticho-sv: #232633; --text: #e9eaf2; --text-2: #a9aec2; --text-3: #848a9e; --plocha: #191c28; --plocha-2: #202432; --pozadie: #111320; --linka: #272b39; --linka-silna: #363b4d; --hlava-bg: rgba(17, 19, 32, .86); --pata-bg: #0b0d17; --pata-text: #a9aec2; --pata-text-2: #767c92; --pata-linka: rgba(255, 255, 255, .08); --tien: 0 1px 2px rgba(0, 0, 0, .4); --tien-2: 0 10px 30px -18px rgba(0, 0, 0, .8); } } :root[data-tema="tmava"] { color-scheme: dark; --modra: #949cff; --modra-tm: #b0b6ff; --modra-text: #aab0ff; --modra-sv: #1c2044; --modra-linka: #333a75; --na-modrej: #0d1030; --koral: #ff8f6d; --koral-tm: #ffab90; --koral-text: #ffa88b; --koral-sv: #33201a; --koral-linka: #553025; --ok: #4fc79b; --ok-sv: #122c22; --zle: #f2867a; --zle-sv: #331d1a; --ticho: #9aa1b5; --ticho-sv: #232633; --text: #e9eaf2; --text-2: #a9aec2; --text-3: #848a9e; --plocha: #191c28; --plocha-2: #202432; --pozadie: #111320; --linka: #272b39; --linka-silna: #363b4d; --hlava-bg: rgba(17, 19, 32, .86); --pata-bg: #0b0d17; --pata-text: #a9aec2; --pata-text-2: #767c92; --pata-linka: rgba(255, 255, 255, .08); --tien: 0 1px 2px rgba(0, 0, 0, .4); --tien-2: 0 10px 30px -18px rgba(0, 0, 0, .8); } /* ---------------------------------------------------------------- 2. základ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16.5px; line-height: 1.6; color: var(--text); background: var(--pozadie); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } a { color: var(--modra-text); text-underline-offset: .18em; } a:hover { color: var(--modra-tm); } h1, h2, h3 { line-height: 1.18; letter-spacing: -.022em; margin: 0 0 .5em; font-weight: 800; } h1 { font-size: clamp(1.85rem, 1.25rem + 2.4vw, 2.85rem); } h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); } h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.012em; } p { margin: 0 0 1em; } :focus-visible { outline: 3px solid var(--modra); outline-offset: 2px; border-radius: 4px; } .obal { width: 100%; max-width: var(--sirka); margin: 0 auto; padding: 0 18px; } .preskoc { position: absolute; left: -9999px; top: 0; background: var(--modra); color: var(--na-modrej); padding: 10px 16px; border-radius: 0 0 var(--r-s) 0; z-index: 60; font-weight: 600; } .preskoc:focus { left: 0; } .ikonka { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em; } .stitok, .znak { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .stitok { background: var(--modra-sv); color: var(--modra-text); border-color: var(--modra-linka); } .stitok.koral { background: var(--koral-sv); color: var(--koral-text); border-color: var(--koral-linka); } .stitok.info { background: var(--ticho-sv); color: var(--text-2); border-color: var(--linka); } /* ---------------------------------------------------------------- 3. hlavička */ .hlava { position: sticky; top: 0; z-index: 50; background: var(--hlava-bg); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--linka); } .hlava-in { display: flex; align-items: center; gap: 14px; min-height: 62px; } .znacka { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); flex: none; } .znacka .mark { width: 36px; height: 36px; flex: none; } .znacka b { display: block; font-size: 1.06rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } .znacka span { display: block; font-size: .72rem; color: var(--text-3); letter-spacing: .01em; } .navig { margin-left: auto; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; } .navig::-webkit-scrollbar { display: none; } .navig a { white-space: nowrap; text-decoration: none; color: var(--text-2); font-weight: 600; font-size: .93rem; padding: 7px 11px; border-radius: var(--r-s); transition: var(--prechod); } .navig a:hover { background: var(--plocha-2); color: var(--text); } .navig a[aria-current="page"] { color: var(--modra-text); background: var(--modra-sv); } .prepinac { flex: none; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; background: var(--plocha); color: var(--text-2); border: 1px solid var(--linka); border-radius: 999px; } .prepinac:hover { color: var(--text); border-color: var(--linka-silna); } .prepinac svg { width: 18px; height: 18px; } :root[data-tema="tmava"] .prepinac .i-mesiac, .prepinac .i-slnko { display: none; } :root[data-tema="tmava"] .prepinac .i-slnko { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-tema="svetla"]) .prepinac .i-mesiac { display: none; } :root:not([data-tema="svetla"]) .prepinac .i-slnko { display: block; } :root[data-tema="svetla"] .prepinac .i-slnko { display: none; } :root[data-tema="svetla"] .prepinac .i-mesiac { display: block; } } @media (max-width: 640px) { .znacka span { display: none; } .navig a { padding: 6px 8px; font-size: .88rem; } .navig .len-desktop { display: none; } .hlava-in { gap: 8px; } } /* ---------------------------------------------------------------- 4. hero */ .hero { padding: 30px 0 8px; } .hero h1 { margin-bottom: .35em; } .hero .uvod { font-size: 1.08rem; color: var(--text-2); max-width: 62ch; } .drobky { font-size: .84rem; color: var(--text-3); margin: 0 0 12px; } .drobky a { color: var(--text-2); text-decoration: none; } .drobky a:hover { text-decoration: underline; } /* pás „práve teraz“ — podpisový prvok webu */ .teraz { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--plocha); border: 1px solid var(--linka); border-left: 4px solid var(--modra); border-radius: var(--r); padding: 12px 16px; margin: 18px 0; box-shadow: var(--tien); } .teraz .cas { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; } .teraz .cas small { display: block; font-weight: 600; font-size: .76rem; color: var(--text-3); letter-spacing: 0; } .teraz .pocet { color: var(--text-2); font-size: .95rem; } .teraz .pocet b { color: var(--text); } .teraz .zoznamik { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .teraz .zoznamik a { text-decoration: none; font-size: .82rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--ok-sv); color: var(--ok); border: 1px solid transparent; } .teraz .zoznamik a:hover { border-color: var(--ok); } /* ---------------------------------------------------------------- 5. sekcie */ main section { padding: 34px 0; } main section + section { border-top: 1px solid var(--linka); } .sek-hlava { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .sek-hlava h2 { margin: 0; } .sek-hlava .viac { margin-left: auto; font-weight: 600; font-size: .92rem; text-decoration: none; } .sek-hlava .viac:hover { text-decoration: underline; } .sek-pod { color: var(--text-2); max-width: 72ch; margin-bottom: 18px; } .mensie { font-size: .88rem; color: var(--text-3); } /* ---------------------------------------------------------------- 6. pohotovosť */ .pohbox { background: var(--koral-sv); border: 1px solid var(--koral-linka); border-radius: var(--r-l); padding: 20px; margin: 20px 0 6px; } .pohbox .hlavicka { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .pohbox h2, .pohbox h3 { margin: 0; color: var(--koral-text); font-size: 1.2rem; } .pohbox .datum { font-size: .88rem; color: var(--koral-text); opacity: .8; font-weight: 600; } .pohbox .poh-veta { color: var(--text); margin: 6px 0 14px; } .pohbox .poh-veta b { color: var(--koral-text); } .poh-lek { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .plk { background: var(--plocha); border: 1px solid var(--koral-linka); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .plk b { font-size: 1rem; letter-spacing: -.01em; } .plk b a { color: inherit; text-decoration: none; } .plk b a:hover { text-decoration: underline; } .plk .kde { font-size: .87rem; color: var(--text-2); } .plk .akcie { display: flex; gap: 8px; flex-wrap: wrap; } .poh-alt { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--koral-linka); font-size: .95rem; } .poh-alt ul { margin: 8px 0 0; padding-left: 20px; } .poh-alt li { margin-bottom: 6px; } .poh-zdroj { margin: 12px 0 0; font-size: .82rem; color: var(--text-2); } .banner { display: none; background: var(--modra-sv); border: 1px solid var(--modra-linka); color: var(--modra-text); border-radius: var(--r); padding: 11px 15px; margin: 16px 0; font-size: .95rem; } .banner.on { display: block; } /* ---------------------------------------------------------------- 7. karty lekární */ .filtre { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; } .filtre button { font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; background: var(--plocha); color: var(--text-2); border: 1px solid var(--linka); padding: 7px 14px; border-radius: 999px; transition: var(--prechod); } .filtre button:hover { border-color: var(--linka-silna); color: var(--text); } .filtre button.on { background: var(--modra); border-color: var(--modra); color: var(--na-modrej); } .zoznam { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .lek { position: relative; background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r); padding: 16px 18px 14px; box-shadow: var(--tien); display: flex; flex-direction: column; gap: 10px; transition: var(--prechod); } .lek::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--linka-silna); transition: var(--prechod); } .lek[data-otvorene="1"]::before { background: var(--ok); } .lek[data-otvorene="0"]::before { background: var(--zle); } .lek:hover { border-color: var(--linka-silna); box-shadow: var(--tien-2); } .lek.skryta { display: none; } .lek h3 { margin: 0; } .lek h3 a { color: inherit; text-decoration: none; } .lek h3 a:hover { color: var(--modra-text); } .lek h3 .roz { display: block; font-size: .84rem; font-weight: 600; color: var(--text-3); letter-spacing: 0; } .lek .adresa { margin: 0; font-size: .92rem; color: var(--text-2); } /* štítky sa nesmú naťahovať na výšku riadka — bez align-items ich flex roztiahne a z pilulky (radius 999px) je koleso */ .stitky { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 4px; } .lek .akcie { margin-top: auto; padding-top: 2px; } .stav { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: .96rem; } .stav .bod { width: 9px; height: 9px; border-radius: 50%; background: var(--ticho); flex: none; } .stav small { font-weight: 500; color: var(--text-2); } .stav.otv { color: var(--ok); } .stav.otv .bod { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-sv); } .stav.zatv { color: var(--zle); } .stav.zatv .bod { background: var(--zle); box-shadow: 0 0 0 3px var(--zle-sv); } .stav.pozor { color: var(--koral-text); } .stav.pozor .bod { background: var(--koral); box-shadow: 0 0 0 3px var(--koral-sv); } table.hodiny { width: 100%; border-collapse: collapse; font-size: .92rem; } table.hodiny td { padding: 3px 0; vertical-align: top; color: var(--text-2); } table.hodiny td:first-child { width: 5.6em; color: var(--text-3); font-weight: 600; } table.hodiny tr.dnes td { color: var(--text); font-weight: 700; } table.hodiny tr.dnes td:first-child::after { content: " ·"; color: var(--modra); } .akcie { display: flex; gap: 8px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; cursor: pointer; font: inherit; font-size: .93rem; font-weight: 650; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linka); background: var(--plocha); color: var(--text); transition: var(--prechod); } .btn:hover { border-color: var(--linka-silna); color: var(--text); } .btn .ikonka { width: 16px; height: 16px; } .btn-hl { background: var(--modra); border-color: var(--modra); color: var(--na-modrej); } .btn-hl:hover { background: var(--modra-tm); border-color: var(--modra-tm); color: var(--na-modrej); } .btn-poh { background: var(--koral); border-color: var(--koral); color: #fff; } :root[data-tema="tmava"] .btn-poh { color: #2a1108; } @media (prefers-color-scheme: dark) { :root:not([data-tema="svetla"]) .btn-poh { color: #2a1108; } } .btn-poh:hover { background: var(--koral-tm); border-color: var(--koral-tm); } .btn-mini { padding: 5px 11px; font-size: .87rem; } .btn-blok { width: 100%; justify-content: center; } /* ---------------------------------------------------------------- 8. mapa */ #mapa { height: 420px; border-radius: var(--r); border: 1px solid var(--linka); overflow: hidden; background: var(--plocha-2); } #mapa.mala { height: 280px; } .leaflet-container { font: inherit; background: var(--plocha-2); } :root[data-tema="tmava"] .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.94) contrast(.92); } @media (prefers-color-scheme: dark) { :root:not([data-tema="svetla"]) .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.94) contrast(.92); } } .lek-marker { width: 28px; height: 28px; border-radius: 50%; background: var(--modra); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; line-height: 1; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); } .lek-marker.poh { background: var(--koral); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--plocha); color: var(--text); } .leaflet-popup-content { font-size: .92rem; } .mapa-pozn { margin: 8px 0 0; font-size: .8rem; color: var(--text-3); } /* ---------------------------------------------------------------- 9. boxy, FAQ, rozpis */ .box { background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r); padding: 18px 20px; margin: 0 0 16px; } .box h3 { margin-top: 0; } .box p:last-child { margin-bottom: 0; } .box.modry { background: var(--modra-sv); border-color: var(--modra-linka); } .box.modry h3 { color: var(--modra-text); } .mriezka { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } details.skladacka { background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r); margin-bottom: 10px; } details.skladacka > summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; } details.skladacka > summary::-webkit-details-marker { display: none; } details.skladacka > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg) translateY(-2px); transition: var(--prechod); } details.skladacka[open] > summary::after { transform: rotate(-135deg) translateY(-2px); } details.skladacka[open] > summary { border-bottom: 1px solid var(--linka); } .det-telo { padding: 14px 18px 4px; } .det-telo > p:last-child { margin-bottom: 14px; } .rz-obal { overflow-x: auto; } table.rz { width: 100%; border-collapse: collapse; font-size: .93rem; } table.rz th { text-align: left; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 6px 10px; border-bottom: 1px solid var(--linka); font-weight: 700; } table.rz td { padding: 7px 10px; border-bottom: 1px solid var(--linka); color: var(--text-2); } table.rz td:first-child { white-space: nowrap; color: var(--text); font-weight: 600; width: 8.5em; } table.rz td:last-child { white-space: nowrap; text-align: right; } table.rz tr.vikend td:first-child { color: var(--koral-text); } table.rz tr.dnes td { background: var(--modra-sv); color: var(--text); font-weight: 700; } table.rz tr.dnes td:first-child { position: relative; } /* ---------------------------------------------------------------- 10. formulár */ .formular { display: grid; gap: 12px; } .formular label { display: grid; gap: 5px; font-size: .9rem; font-weight: 650; color: var(--text-2); } .formular input[type="text"], .formular input[type="email"], .formular select, .formular textarea { font: inherit; font-size: .97rem; color: var(--text); background: var(--pozadie); border: 1px solid var(--linka-silna); border-radius: var(--r-s); padding: 9px 12px; width: 100%; } .formular textarea { min-height: 110px; resize: vertical; } .formular .suhlas { display: flex; align-items: flex-start; gap: 9px; font-weight: 500; font-size: .88rem; } .formular .suhlas input { margin-top: 3px; flex: none; } .formular .med { position: absolute; left: -9999px; } .odkaz-stav { border-radius: var(--r-s); padding: 10px 14px; font-size: .93rem; font-weight: 600; } .odkaz-stav.ok { background: var(--ok-sv); color: var(--ok); } .odkaz-stav.chyba { background: var(--zle-sv); color: var(--zle); } /* ---------------------------------------------------------------- 11. detail lekárne */ .detail-hlava { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } @media (max-width: 780px) { .detail-hlava { grid-template-columns: 1fr; } } .detail-hlava .karta-info { background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r-l); padding: 20px; box-shadow: var(--tien); } .udaje { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .udaje li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: .96rem; } .udaje .ikonka { width: 18px; height: 18px; color: var(--text-3); margin-top: 4px; } .udaje .popis { display: block; font-size: .78rem; color: var(--text-3); letter-spacing: .02em; text-transform: uppercase; font-weight: 700; } .tyzden { width: 100%; border-collapse: collapse; } .tyzden td { padding: 8px 4px; border-bottom: 1px solid var(--linka); font-size: .96rem; } .tyzden td:first-child { color: var(--text-3); font-weight: 650; width: 7em; } .tyzden td:last-child { text-align: right; color: var(--text); } .tyzden tr:last-child td { border-bottom: 0; } .tyzden tr.dnes td { color: var(--modra-text); font-weight: 750; } .susedia { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .sused { display: block; text-decoration: none; color: inherit; background: var(--plocha); border: 1px solid var(--linka); border-radius: var(--r); padding: 12px 14px; transition: var(--prechod); } .sused:hover { border-color: var(--modra); } .sused b { display: block; font-size: .97rem; } .sused span { font-size: .85rem; color: var(--text-2); } /* ---------------------------------------------------------------- 12. pätička */ .pata { background: var(--pata-bg); color: var(--pata-text); margin-top: 40px; padding: 34px 0 26px; font-size: .9rem; } .pata a { color: #fff; } .pata-mriezka { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-bottom: 22px; } .pata h4 { margin: 0 0 8px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pata-text-2); } .pata ul { list-style: none; margin: 0; padding: 0; } .pata li { margin-bottom: 5px; } .pata li a { text-decoration: none; } .pata li a:hover { text-decoration: underline; } .pata .drobne { border-top: 1px solid var(--pata-linka); padding-top: 16px; color: var(--pata-text-2); font-size: .84rem; } .pata .drobne p { margin: 0 0 8px; } .hore { display: inline-block; color: var(--pata-text-2); text-decoration: none; font-size: .85rem; margin-bottom: 14px; } .hore:hover { color: #fff; } /* ---------------------------------------------------------------- 13. tlač */ @media print { .hlava, .navig, .prepinac, .filtre, .akcie, #mapa, .pata .pata-mriezka, .hore, .teraz .zoznamik { display: none !important; } body { background: #fff; font-size: 11pt; } .lek, .box, .pohbox { break-inside: avoid; border-color: #bbb; box-shadow: none; } main section { border-top: 0; padding: 10px 0; } }