/* ========================================================================== styl.css – spoločné štýly pre index.html a rezervacia.html (premenné, reset, typografia, hlavička, pätička, tlačidlá, FAB, modály…) Deklarácie @font-face zostávajú inline v – sú kritické. ========================================================================== */ /* ========================================================================== BRAND – prevzaté z loga a výkladu predajne ========================================================================== */ /* ########################################################################### # NASTAVENIA – tu môžeš bezpečne meniť vzhľad bez znalosti kódu. # # Zmeň číslo/farbu, ulož súbor, obnov stránku v prehliadači (Ctrl+R). # ########################################################################### --lh-nadpis riadkovanie nadpisov. Vyššie číslo = väčšia medzera medzi riadkami (dôležité pri mäkčeňoch a dĺžňoch). 1.05 = tesné, 1.35 = vzdušné. Aktuálne 1.18. --lh-text riadkovanie bežného textu. --sekcia vertikálne medzery medzi sekciami stránky. --red hlavná farba značky. Zmena tu prefarbí celý web. */ :root{ --lh-nadpis: 1.18; --lh-text: 1.68; --sekcia: clamp(54px,7.5vw,100px); --red: #E1211F; --red-dk: #B8171B; --red-soft: #FDECEB; /* Červené tlačidlá nie sú plocha, ale gradient – ten istý, aký má pás „Nádrž na dne?". Svetlejšia červená hore, tmavšia dole, k tomu lesk po hornej hrane a tmavý pruh po spodnej. Bez nich je to len farebný obdĺžnik. Tieň je červený, nie hnedý: pod sýtou červenou pôsobí sivý tieň špinavo. */ --cta: linear-gradient(158deg, #EF3B33 0%, #E1211F 42%, #C4191C 100%); --cta-lesk: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.12); --cta-lesk-h:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.14); --cta-tien: 0 10px 20px -12px rgba(140,26,26,.75), 0 2px 6px -3px rgba(140,26,26,.5); --cta-tien-hover: 0 20px 32px -16px rgba(140,26,26,.9), 0 4px 10px -4px rgba(140,26,26,.55); /* Text zjednotený s administráciou (majiteľ 24. 9. 2026): najtmavšia farba je #1c1b1a, nie takmer čierna. */ --ink: #1c1b1a; --ink-2: #4a4644; --ink-soft: #7d7674; --line: #E6E1E0; --bg: #FFFFFF; --bg-soft: #F7F5F4; /* Zaoblenie kariet a plôch je všade 16 px — web aj administrácia (majiteľ 24. 9. 2026). Tlačidlá, polia a pilulky majú vlastné. */ --r: 16px; --r-lg: 16px; /* Veľké plochy, ktoré sa otvárajú cez obsah – prihlásenie, košík, detail produktu, vysúvacie menu. Čistá biela na nich udrie do očí, lebo prídu naraz a cez celú obrazovku. Prechod je zámerne veľmi jemný: hore biela, dole teplý odtieň steny z úvodnej scény. */ --panel: linear-gradient(168deg, #FFFFFF 0%, #FCF9F5 46%, #F5EEE5 100%); /* Sklo pre prvky, ktoré plávajú nad obsahom – bubliny v hlavičke, pilulky v scéne, panely, ktoré sa pri scrollovaní držia na mieste. Nasýtenie v rozostrení je dôležité: bez neho sklo farby pod sebou vybledne a pôsobí ako špinavá fólia namiesto skla. */ --sklo: rgba(255,255,255,.66); /* Rám karty s teplým prechodom (`--panel`) — ten istý ako v administrácii. */ --karta-ram: rgba(255,255,255,.9); --sklo-ram: rgba(255,255,255,.85); --sklo-blur: blur(16px) saturate(150%); /* Spodná lišta je sklovitejšia než ostatné povrchy: leží na obsahu, ktorý sa pod ňou hýbe, a má byť cítiť, že je to vrstva, nie doska. */ --sklo-lista: rgba(255,255,255,.52); --sklo-lista-blur: blur(24px) saturate(180%); /* Plocha líšt na telefóne (horná a spodná) – hustejšie sklo, viď rezervacia.css. Tú istú hodnotu má spodná lišta administrácie; nastroje/dizajn.mjs stráži, že sa nerozídu. */ --lista-plocha: rgba(255,255,255,.82); --sklo-tien: 0 16px 30px -16px rgba(78,58,44,.5), 0 2px 5px -3px rgba(78,58,44,.35); /* Tiene sú tónované do teplej, nie sivé – sivý tieň nad stenou z videa pôsobí špinavo. Dva stupne: `jemny` pre karty, ktoré na ploche ležia, `zdvih` pre tie, ktoré sa pri prejdení myšou nadvihnú. Vždy dve vrstvy: tesná pod prvkom ho prilepí k ploche, mäkká široká mu dá výšku. */ --tien-jemny: 0 1px 2px rgba(78,58,44,.07), 0 10px 22px -14px rgba(78,58,44,.45); --tien-zdvih: 0 2px 5px rgba(78,58,44,.1), 0 20px 36px -16px rgba(78,58,44,.55); --shadow: var(--tien-jemny); --shadow-lg: 0 28px 64px -22px rgba(78,58,44,.42); --max: 1180px; --head: 'Oswald', 'Arial Narrow', system-ui, sans-serif; /* `--text` sa na troch miestach používalo, ale nikde nebolo definované. Neplatná hodnota vo `var()` znamená, že sa deklarácia zahodí a písmo sa zdedí – zhodou okolností práve Inter z `body`, takže to fungovalo. Stačilo by však raz použiť `var(--text)` niekde, kde je zdedené písmo nadpisové, a nikto by netušil, prečo to nefunguje. */ --text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Stena z úvodného videa. Doteraz bola natvrdo v `body` a v admin.css znova – dve kópie tej istej päťzastávkovej hodnoty sa raz musia rozísť. */ /* Upozornenie, ktoré nie je chyba – výzva v účte, mimoriadny oznam v chate. Teplá žltá, nie červená: červená na tomto webe znamená značku a akciu, nie varovanie. Farba bola napísaná natvrdo v `.uc-vyzva` a potrebovala ju aj `chat.css`; druhá kópia tej istej hodnoty sa raz musí rozísť, tak je tu raz. */ /* Zelená dostupnosti a jantárová upozornenia. Obe farby na webe už boli, ale napísané natvrdo na ôsmich miestach (`.av-tu`, `.cmp-naj`, pás pod košíkom…). Návrh mobilu ich potrebuje tiež, tak dostali meno. */ --ok: #1A8F3C; --ok-plocha: #E9F5EC; /* Tmavší odtieň linky. `--line` je na `body` prebitá na #D9D0C5; toto je to isté o stupeň tmavšie, na rámy prvkov, ktoré majú byť vidieť. */ --line-2: #C6B9AA; /* Svetlejšia červená na krížiky vo vnútri červených pilulák – na `--red-soft` by zanikli. */ --red-soft-2:#FBDEDD; /* Biela na červenej ploche. `--bg` sa na to použiť NESMIE: v `:root` je biela, ale `body` si ju prepisuje na #EBE4DB, takže text v červenom odznaku vyšiel béžový. Táto premenná sa neprepisuje nikde. */ --na-cervenom: #FFFFFF; /* Plocha prvku vnútri bieleho okna. `--bg` sa na to použiť nedá: v `:root` je biela, ale `body` si ju prepisuje na béžovú #EBE4DB, takže pilulky v okne vyzerali, akoby cez ne presvitala stránka. */ --v-okne: #FFFFFF; --pozor-plocha: #FFF8E6; /* Text upozornenia. Na webe bol napevno ako #8a5a12 (pás pod košíkom, štítok pri doobjednaní); mobilná lišta ho potrebuje tiež. */ --pozor-text: #8A5A12; --pozor-ram: #F0D68C; /* Koncová farba pásika --bar-poz; prstenec ochrany pred parazitmi, ktorý končí (návrh Ochrana kompakt, 16. 10. 2026) */ --kr-poz: #E0A93B; --stena: linear-gradient(90deg, #E1D7CC 0%, #EFE4DA 25%, #F1E7DC 50%, #F1E7DC 75%, #E2D8CD 100%); /* Stena ako jedna plná farba — priemer prechodu vyššie. Pre miesta, kde prehliadač vezme len plnú farbu (pás pod panelom Safari, theme-color). */ --stena-plna: #EDE2D8; /* Zlatý odznak (hlava plemena pri výbere). Teplé zlato k sklu a stene — majiteľ 24. 9. 2026: ružový krúžok nie, „skôr do zlatej". */ --zlato: linear-gradient(150deg, #FFF6DD 0%, #F2DDA6 38%, #D8AE5E 78%, #B98A3E 100%); --zlato-ink: #6B4712; /* Minca – odznak úrovne Hafo karty (dizajnový systém 20. 10. 2026, minca.js). V Pokladni --tv-mn-*. */ --mn-bronz-a:#FCE6D0; --mn-bronz-b:#E3AC7A; --mn-bronz-c:#B8723D; --mn-bronz-d:#8C5126; --mn-striebro-a:#FFFFFF; --mn-striebro-b:#E3E7EC; --mn-striebro-c:#BCC3CB; --mn-striebro-d:#8F979F; --mn-zlato-a:#FFF6DD; --mn-zlato-b:#F2DDA6; --mn-zlato-c:#D8AE5E; --mn-zlato-d:#B98A3E; --mn-platina-a:#FBFDFF; --mn-platina-b:#DDE6EE; --mn-platina-c:#A9B9C7; --mn-platina-d:#71869A; --mn-diamant-a:#FFFFFF; --mn-diamant-b:#D9F3FF; --mn-diamant-c:#9CD8F5; --mn-diamant-d:#8EC5EE; --mn-diamant-e:#E9DDFF; --mn-tien:#3c0000; --zlato-lesk: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 3px rgba(122,82,24,.28); --zlato-tien: 0 3px 8px -3px rgba(122,82,24,.55), 0 0 0 1px rgba(185,138,62,.35); } *,*::before,*::after{box-sizing:border-box} /* Odsadenie pri skoku na kotvu musí počítať aj s pásom oznamu, inak by sa nadpis sekcie schoval pod prilepenú hlavičku. */ /* Plná farba na `html`, nie len gradient na `body`. Safari na iOS zafarbuje pás pod stavovým riadkom (a pri odskočení stránky aj plochu nad ňou) podľa plochy dokumentu. Gradient mu na to nestačí – nevie z neho určiť jednu farbu a vezme bielu. Na telefóne tak nad hlavičkou svietil biely pás, hoci `theme-color` bola teplá. Táto jedna deklarácia to rieši; gradient z `body` ju prekryje všade, kde je obsah. */ /* Od 19. 9. 2026 je tu farba LIŠTY, nie plochy stránky. Pruh pri hodinách a pruh pod panelom Safari sa tým zladili s hlavičkou a spodnou lištou — dovtedy mali farbu pozadia stránky a hlavička nad nimi pôsobila ako odseknutý biely pás. Je to presne tá farba, do akej sa sklo lišty vykreslí nad béžovou plochou. Viditeľnú plochu stránky to nemení — tú kreslí `body` a ten je cez celú výšku. */ html{background-color:#F7F2ED; scroll-behavior:smooth;scroll-padding-top:calc(86px + var(--oznam-h,0px));-webkit-text-size-adjust:100%} body{ margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; color:var(--ink-2);background:var(--bg);line-height:var(--lh-text);font-size:16.5px; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit} h1,h2,h3,.h{ font-family:var(--head);font-weight:600;text-transform:uppercase; letter-spacing:.015em;line-height:var(--lh-nadpis);color:var(--ink);margin:0 0 .45em; } h1{font-size:clamp(2.3rem,5.9vw,4.4rem);font-weight:700;letter-spacing:.005em;line-height:var(--lh-nadpis)} h2{font-size:clamp(1.85rem,4.1vw,2.9rem);line-height:var(--lh-nadpis)} h3{font-size:1.12rem;letter-spacing:.03em;line-height:1.28} p{margin:0 0 1em} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:20px} section{padding:var(--sekcia) 0} .eyebrow{ display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-size:.85rem; font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:12px; } .eyebrow::before{content:"";width:30px;height:3px;background:var(--red)} .lead{font-size:1.06rem;color:var(--ink-soft);max-width:62ch} .sort-intro{margin-bottom:44px} .sort-intro h2{max-width:700px} .sort-intro .lead{max-width:none;text-wrap:balance} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:15px 28px;border-radius:6px;font-family:var(--head);font-weight:600; font-size:1rem;letter-spacing:.09em;text-transform:uppercase; text-decoration:none;border:2px solid transparent;cursor:pointer; transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease, box-shadow .18s ease,filter .16s ease; white-space:nowrap;line-height:1.2; } .btn:hover{transform:translateY(-2px)} .btn-red{background:var(--cta);color:#fff; box-shadow:var(--cta-lesk), var(--cta-tien)} .btn-red:hover{background:var(--cta);filter:brightness(1.06); box-shadow:var(--cta-lesk-h), var(--cta-tien-hover)} /* Druhé tlačidlo vedľa červeného – sklo ako pilulky v hlavičke. Na jednom mieste pre celý web (rezervácia, stránka rezervácie, odhlásenie z noviniek). */ .btn-sklo{background:rgba(255,255,255,.72);border:1px solid rgba(78,58,44,.22);color:var(--ink);box-shadow:var(--tien-jemny); -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur)} .btn-sklo:hover{background:rgba(255,255,255,.9);color:var(--ink)} .btn-white{background:#fff;color:var(--red)} .btn-white:hover{background:#F3F0EF} /* Hlavné tlačidlo v hero. Pulzuje prstenec okolo neho a samotné tlačidlo raz za cyklus jemne poskočí – oko na pohyb reaguje skôr než na farbu. Prstenec je samostatná vrstva pod tlačidlom, aby nezasahoval do rozloženia, a poskočenie je len o 4 px: väčší pohyb by sťažil trafenie sa doň. Pri nabehnutí myšou a pri `prefers-reduced-motion` sa animácia zastaví. */ .btn-pulz{position:relative;isolation:isolate;animation:poskok 2.6s ease-in-out .6s infinite} .btn-pulz::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1; box-shadow:0 0 0 0 rgba(255,255,255,.85);animation:pulz 2.6s ease-out .6s infinite} @keyframes pulz{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.85)} 55%{box-shadow:0 0 0 18px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} } @keyframes poskok{ 0%,72%,100%{transform:translateY(0)} 80%{transform:translateY(-5px)} 88%{transform:translateY(0)} 93%{transform:translateY(-2px)} 97%{transform:translateY(0)} } .btn-pulz:hover,.btn-pulz:focus-visible{animation:none} .btn-pulz:hover::after,.btn-pulz:focus-visible::after{animation:none} @media (prefers-reduced-motion:reduce){ .btn-pulz,.btn-pulz::after{animation:none} } .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff} .btn-ghost:hover{background:rgba(255,255,255,.14)} .btn-outline{border-color:var(--ink);color:var(--ink);background:transparent} .btn-outline:hover{background:var(--ink);color:#fff} /* ---------- Header ---------- */ /* Plochu, rozostrenie ani linku sem nepíš – `body header` o osemsto riadkov nižšie ich všetky ruší (hlavička nemá vlastnú plochu, prvky v nej plávajú). Kým tu boli, prehliadač si pre ne aj tak vytváral kompozitnú vrstvu. */ /* Odsadenie zhora je výška stavového riadka telefónu — stránka pod neho siaha kvôli `viewport-fit=cover`, aby pruh pri hodinách mal farbu hlavičky a nie pozadia stránky. Na počítači je to nula. */ header{position:sticky;top:0;z-index:60;transition:.25s; padding-top:env(safe-area-inset-top, 0px)} header.scrolled{border-color:var(--line);box-shadow:0 6px 22px -16px rgba(20,16,15,.55)} .nav{display:flex;align-items:center;gap:18px;height:76px} .logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0} .logo img{width:48px;height:auto;flex-shrink:0} .logo-txt i{ display:block;font-style:normal;font-family:var(--head);font-size:.82rem;font-weight:600; color:var(--red);letter-spacing:.135em;text-transform:uppercase;line-height:1;margin-bottom:3px; } .logo-txt b{ display:block;font-family:var(--head);font-weight:700;font-size:1.72rem;line-height:.86; text-transform:uppercase;letter-spacing:.13em;color:var(--red); } .nav-links{display:flex;gap:2px;margin-left:auto;align-items:center} /* Položky menu sa nesmú lámať – „PREČO MY" a „REZERVOVAŤ KRMIVO" sa medzi 940 a 1200 px zlomili na dva riadky a lišta pôsobila rozhádzane. Pod 940 px je menu aj tak vysúvacie, takže tu nowrap nič nepreteká; medzeru a odsadenie v tesnom páse len o kúsok zmenšíme. */ .nav-links a{ text-decoration:none;font-family:var(--head);font-size:.94rem;font-weight:500;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-2);padding:10px 13px;border-radius:6px;transition:.16s; white-space:nowrap; } /* Vodorovná lišta je na hrane šírky (šesť položiek, tlačidlo s číslom a ikonka účtu), preto sú položky kompaktnejšie vždy, nielen v úzkom páse. Vo vysúvacom menu na telefóne sa veľkosť aj tak prepisuje nižšie. */ @media(min-width:1201px){ .nav-links a{padding:10px 7px;font-size:.86rem;letter-spacing:.05em} .nav-cta{margin-left:5px} /* Na vodorovnú lištu sa všetko nezmestí. „Kontakt" ide preč ako prvý: telefónne číslo je hneď vedľa v bubline, adresa je v pätičke a odkaz na kontaktnú sekciu ostáva vo vysúvacom menu na menších obrazovkách. */ .nav-kontakt{display:none} } .nav-links a:hover{color:var(--red);background:var(--red-soft)} .nav-links a.nav-hot{color:var(--red);background:var(--red-soft)} .nav-links a.nav-hot:hover{background:#fadcdc} /* Účet v menu je bublina vedľa telefónneho čísla – ohraničená, nie vyplnená, aby zostala tichšia než hlavné číslo. Prihlásenie je to, čo hľadá vracajúci sa zákazník; registráciu ponúkne až okienko, ako je to bežné inde. */ /* Selektor musí byť aspoň taký silný ako `.nav-links a` vyššie, inak by z neho ostalo hranaté 6px zaoblenie namiesto bubliny. */ .nav-links a.nav-ucet,.nav-links a.nav-cta{color:var(--red)!important;display:inline-flex;align-items:center;gap:6px; border:1.5px solid var(--red);border-radius:999px;padding:8px 12px!important; font-size:.8rem;letter-spacing:.05em;margin-left:6px;background:none} .nav-links a.nav-ucet:hover,.nav-links a.nav-cta:hover{background:var(--red-soft)} .nav-ucet svg,.nav-cta svg{width:18px;height:18px;flex-shrink:0} .nav-ucet [data-ucet-text]{display:inline} /* Odznak s počtom nových kariet Hafa na pilulke účtu – tie isté hodnoty ako odznak košíka `.nav-kosik .kbdg` (ucet.js: hafoOdznak). */ .nav-ucet{position:relative} .nav-ucet .ubdg{ position:absolute;top:-6px;left:24px;min-width:18px;height:18px;padding:0 5px; box-sizing:border-box;border-radius:999px;background:var(--red);color:var(--na-cervenom); font-size:10.5px;font-weight:700;line-height:18px;text-align:center; box-shadow:0 0 0 2px #EFE9E1} .nav-ucet .ubdg[hidden]{display:none} @media(max-width:1200px){ /* Vo vysúvacom menu sú to samostatné riadky ako ostatné položky. */ .nav-links a.nav-ucet,.nav-links a.nav-cta{border:0;border-radius:0;margin-left:0; padding:15px 8px!important;font-size:1.1rem;width:auto} .nav-ucet svg,.nav-cta svg{width:22px;height:22px} .nav-ucet .ubdg{top:8px;left:24px} } .burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer} .burger span{display:block;width:25px;height:2.5px;background:var(--ink);transition:.25s} .burger span+span{margin-top:6px} .burger.open span:nth-child(1){transform:translateY(8.5px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)} @media(max-width:1200px){ .burger{display:block} .nav-links{ position:fixed;inset:76px 0 auto 0;background:var(--panel);flex-direction:column;align-items:stretch; gap:0;padding:12px 20px 26px;border-bottom:3px solid var(--red);box-shadow:var(--shadow); transform:translateY(-160%);transition:transform .3s cubic-bezier(.4,0,.2,1);margin-left:0; } .nav-links.open{transform:translateY(0)} .nav-links a{padding:15px 8px;font-size:1.1rem;border-bottom:1px solid var(--line)} /* Roztiahnutie na celú šírku patrí len tlačidlám vo vysúvacom menu. Nezaobalené `.btn` predtým naťahovalo aj tlačidlá vnútri stránky na všetkých obrazovkách do 1200 px – napríklad „Dať vedieť" v detaile. */ .nav-links .btn{width:100%} } /* ---------- Low-poly art ---------- */ .poly{stroke-linejoin:round;stroke-linecap:round;fill:none} /* ---------- Hero ---------- Kreslené zvieratá po stranách sú preč aj s parallaxom v hlavna.js – hero je od prestavby video. Zvyšok pravidiel tu ostáva, `hero.css` z neho časť prepisuje. */ .hero{position:relative;background:var(--red);color:#fff;overflow:hidden;padding:clamp(40px,5.2vw,66px) 0 clamp(44px,6vw,78px)} .hero::before{ content:"";position:absolute;inset:0; background:radial-gradient(1000px 620px at 88% 10%, rgba(255,255,255,.12), transparent 62%); } .hero .wrap{position:relative;z-index:2;max-width:980px} .hero h1{color:#fff} .hero h1 span{display:block} .hero h1 u{text-decoration:none;-webkit-text-stroke:2px #fff;color:transparent;paint-order:stroke} .hero p{color:rgba(255,255,255,.9);font-size:1.14rem;max-width:54ch} .hero-badges{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px} .pill{ display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:5px; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28); font-family:var(--head);font-size:.82rem;font-weight:500;letter-spacing:.09em; text-transform:uppercase;color:#fff; } .pill.live{background:#fff;color:var(--red);border-color:#fff} .dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .hero-claim{font-size:clamp(1.04rem,1.7vw,1.2rem);line-height:1.6;max-width:48ch; color:rgba(255,255,255,.94);margin:0} @media(max-width:900px){ .hero-actions .btn{width:100%} } /* ---------- Fakty v hero ---------- */ .trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px clamp(14px,2.4vw,34px); margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.28)} .trust div{font-size:.85rem;color:rgba(255,255,255,.72);line-height:1.45} .trust b{display:block;font-family:var(--head);font-weight:600;text-transform:uppercase; letter-spacing:.1em;font-size:.95rem;color:#fff;margin-bottom:1px} @media(max-width:900px){.trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}} /* ---------- Grid / cards ---------- */ .grid{display:grid;gap:16px} .g4{grid-template-columns:repeat(4,1fr)} .g2{grid-template-columns:repeat(2,1fr)} @media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.g4,.g2{grid-template-columns:1fr}} /* Karta = teplý prechod s bielym rámom, rovnaká ako v administrácii (majiteľ 24. 9. 2026 — lepšia než biela s linkou). */ .card{ background:var(--panel);border:1px solid var(--karta-ram);border-radius:var(--r);padding:26px 24px; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative;overflow:hidden; box-shadow:var(--tien-jemny); } .card::after{content:"";position:absolute;left:0;top:0;width:0;height:3px;background:var(--red);transition:width .3s ease} .card:hover{transform:translateY(-4px);box-shadow:var(--tien-zdvih);border-color:var(--karta-ram)} .card:hover::after{width:100%} .card .ico{width:100%;height:132px;margin-bottom:14px;color:var(--red);display:block} .card .ico use{fill:currentColor} .card p{color:var(--ink-soft);font-size:.93rem;margin:0} .card h3{margin-bottom:6px} .soft{background:var(--bg-soft)} /* ---------- Foto predajne ---------- */ .shopshot{padding:clamp(40px,5vw,64px) 0} .shopshot figure{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)} .shopshot img{width:100%;height:auto;display:block} .shopshot figcaption{ position:absolute;left:0;right:0;bottom:0;padding:44px 24px 18px;color:#fff;font-size:.95rem; background:linear-gradient(transparent,rgba(20,16,15,.82)); } .shopshot figcaption b{font-family:var(--head);text-transform:uppercase;letter-spacing:.08em} @media(max-width:600px){.shopshot figcaption{font-size:.85rem;padding:36px 16px 14px}} /* ---------- Recenzie ---------- */ .rev-top{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;margin-bottom:32px} .rev-score{display:flex;align-items:center;gap:18px} .rev-num{font-family:var(--head);font-size:3.4rem;font-weight:700;line-height:1;color:var(--ink)} .stars{display:flex;gap:3px;color:#FBBC04} .rev-score small{display:block;color:var(--ink-soft);font-size:.9rem;margin-top:4px} /* Plocha, rám, polomer aj odsadenie prepisuje `.rev-card` v karuseli o kus nižšie – tu ostáva len tieň, ktorý tam definovaný nie je. Zvyšok som zmazal, lebo dve deklarácie toho istého selektora nad sebou zvádzajú upraviť tú nesprávnu. */ .rev-card{box-shadow:var(--tien-jemny)} .rev-card .stars{margin-bottom:10px} .rev-card p{font-size:.95rem;color:var(--ink-2);margin:0 0 14px} #google-reviews-widget{margin-bottom:28px} .rev-card cite{font-style:normal;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--ink-soft)} /* ---------- vlastné karty Google recenzií ---------- Nahrádzajú cudzí skript Trustindexu. Dáta idú cez náš `/api/rating`, takže prehliadač zákazníka sa nepripája na Google ani na CDN tretej strany – rovnaký dôvod, pre ktorý sú na webe aj fonty lokálne. Preto tu nie sú ani fotky autorov (sú na googleusercontent.com); namiesto nich koliesko s iniciálou. ROZLOŽENIE: jeden vodorovný pás, nie mriežka ani stĺpce. Oba predošlé pokusy skončili na tom istom – päť kariet sa do troch stĺpcov rozdelí 2+2+1 a posledný stĺpec je kratší o celú kartu. V jednom riadku takáto diera vzniknúť nemôže: karty sú rovnako široké, rovnako vysoké a čo sa nezmestí, to sa odsunie do strany. */ .rev-mriezka{position:relative;margin:0 0 26px} .rev-mriezka[hidden]{display:none} /* Posúvanie rieši natívny scroll so `scroll-snap` – na dotyku sa tak dá listovať prstom bez jediného riadka JavaScriptu. Lišta posúvača je skrytá, navigáciu preberajú šípky a bodky pod pásom. */ /* Bez `scroll-snap` a bez `scroll-behavior:smooth` – oboje by sa bilo s plynulým posunom, ktorý po pixeloch dopočítava `spolocne.js`. Posúvanie prstom zostáva natívne, takže na dotyku funguje aj bez JS. */ .rev-pas{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain; padding:6px 2px 16px;scrollbar-width:none;-ms-overflow-style:none} .rev-pas::-webkit-scrollbar{display:none} .rev-pas:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:var(--r-lg)} /* Pevná šírka karty: pri obsahu 1180 px sa zmestia tri a zo štvrtej vykúka okraj – to je jediný spoľahlivý signál, že sa dá posúvať ďalej. */ .rev-card{flex:0 0 320px; position:relative;overflow:hidden;display:flex;flex-direction:column; background:var(--panel);border:1px solid var(--karta-ram);border-radius:var(--r-lg); padding:24px 22px 18px;opacity:0; transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s,border-color .35s} /* Farebný pruh navrchu vyrastie zľava doprava. */ .rev-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%; background:linear-gradient(90deg,var(--red),#ff7a5f); transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.3,1)} /* Úvodzovka je čistá ozdoba – preto pseudo-prvok, nie text v HTML. */ .rev-card::after{content:"\201C";position:absolute;right:12px;top:-16px; font-family:var(--head);font-weight:700;font-size:5.5rem;line-height:1; color:var(--red);opacity:.08;pointer-events:none} .rev-card.je,.rev-card:hover{transform:translateY(-5px); border-color:rgba(225,33,31,.4);box-shadow:0 20px 44px -22px rgba(225,33,31,.55)} .rev-card.je::before,.rev-card:hover::before{transform:scaleX(1)} .rev-hlava{display:flex;align-items:center;gap:12px;margin-bottom:10px} .rev-kruh{flex:none;width:42px;height:42px;border-radius:50%;background:var(--red); color:#fff;display:flex;align-items:center;justify-content:center; font-family:var(--head);font-size:1.2rem;font-weight:600;position:relative} .rev-card.je .rev-kruh::after{content:"";position:absolute;inset:0;border-radius:50%; box-shadow:0 0 0 0 rgba(225,33,31,.55);animation:rev-prstenec 1.8s ease-out infinite} @keyframes rev-prstenec{ 0%{box-shadow:0 0 0 0 rgba(225,33,31,.55)} 70%{box-shadow:0 0 0 12px rgba(225,33,31,0)} 100%{box-shadow:0 0 0 0 rgba(225,33,31,0)} } .rev-kto{display:flex;flex-direction:column;min-width:0} .rev-kto b{font-size:.95rem;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rev-kto small{font-size:.78rem;color:var(--ink-soft)} .rev-card .stars.male{margin-bottom:10px} .rev-card .stars.male svg{width:16px;height:16px} .rev-card .stars.male .prazdna{color:var(--line)} .rev-card.je .stars.male svg{animation:rev-hviezda .55s ease both} .rev-card.je .stars.male svg:nth-child(2){animation-delay:.07s} .rev-card.je .stars.male svg:nth-child(3){animation-delay:.14s} .rev-card.je .stars.male svg:nth-child(4){animation-delay:.21s} .rev-card.je .stars.male svg:nth-child(5){animation-delay:.28s} @keyframes rev-hviezda{ 0%,100%{transform:scale(1)} 45%{transform:scale(1.4) rotate(-8deg)} } /* Pevné orezanie na šesť riadkov drží karty v rade rovnako vysoké. Krátku recenziu vysadíme o kúsok väčšmi, nech dve vety nepôsobia ako nedopatrenie. */ .rev-text{margin:0;color:var(--ink-2);font-size:.93rem;line-height:1.62; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden} .rev-card[data-dlzka="kratka"] .rev-text{font-size:1.08rem;line-height:1.52;color:var(--ink)} .rev-text.rozbaleny{-webkit-line-clamp:unset;overflow:visible} .rev-viac{align-self:flex-start;margin-top:8px;background:none;border:0;padding:0; font:inherit;font-size:.84rem;color:var(--red);cursor:pointer;text-decoration:underline} /* `margin-top:auto` drží odkaz pri spodku – karty sú rovnako vysoké, ale text rôzne dlhý a odkazy by inak skákali v rôznych výškach. */ .rev-zdroj{margin-top:auto;padding-top:14px;font-size:.79rem;color:var(--ink-soft); text-decoration:none} .rev-zdroj:hover{color:var(--red);text-decoration:underline} /* ---- náznak, že sa pás posúva ---- Šípky sú preč, pás beží sám. Aby bolo vidieť, že vľavo a vpravo obsah pokračuje, prekrýva ho po stranách jemný prechod do farby sekcie. `pointer-events:none` je nutnosť – inak by clona chytala myš namiesto kariet pod ňou. */ .rev-mriezka::before,.rev-mriezka::after{content:"";position:absolute;top:0;bottom:0; width:70px;z-index:2;pointer-events:none;transition:opacity .3s} .rev-mriezka::before{left:0;background:linear-gradient(90deg,var(--bg-soft),rgba(247,245,244,0))} .rev-mriezka::after{right:0;background:linear-gradient(270deg,var(--bg-soft),rgba(247,245,244,0))} /* Strana, na ktorej myš zrýchľuje, sa jemne rozsvieti – človek tak vidí, že to nie je náhoda, ale ovládanie. */ .rev-mriezka[data-strana="vlavo"]::before, .rev-mriezka[data-strana="vpravo"]::after{opacity:.45} /* Odkaz pod pásom nahrádza šípky: hovorí, že sa dá listovať aj prstom. */ .rev-tip{margin:0;text-align:center;font-size:.8rem;color:var(--ink-soft)} /* Nábeh pri zarolovaní. `backwards` (nie `both`) je zámer: po dobehnutí sa karta vráti k bežným pravidlám, takže zdvih pri `.je` a `:hover` funguje – pri `both` by ju animácia držala na `transform:none`. */ .rev-mriezka.videne .rev-card{opacity:1; animation:rev-prichod .65s cubic-bezier(.2,.8,.3,1) backwards; animation-delay:var(--o,0s)} @keyframes rev-prichod{ from{opacity:0;transform:translateY(24px) scale(.96)} to{opacity:1;transform:none} } @media (max-width:760px){ /* Karta na skoro celú šírku a kúsok tej ďalšej – aby bolo hneď vidieť, že sa dá listovať prstom. */ .rev-card{flex:0 0 86%;padding:20px 18px 16px} .rev-pas{gap:14px} } @media (prefers-reduced-motion:reduce){ .rev-pas{scroll-behavior:auto} .rev-mriezka.videne .rev-card{animation:none;opacity:1} .rev-card,.rev-card::before{transition:none} .rev-card.je .rev-kruh::after,.rev-card.je .stars.male svg{animation:none} .rev-card.je,.rev-card:hover{transform:none} } /* ---------- Why ---------- */ .why{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} @media(max-width:900px){.why{grid-template-columns:1fr;gap:30px}} .check{list-style:none;padding:0;margin:0;display:grid;gap:16px} .check li{display:flex;gap:14px;align-items:flex-start} .check .n{ flex-shrink:0;width:30px;height:30px;border-radius:5px;background:var(--red);color:#fff; display:grid;place-items:center;font-family:var(--head);font-weight:600;font-size:.95rem; } .check b{display:block;color:var(--ink);font-size:1rem} .check span{color:var(--ink-soft);font-size:.93rem} /* ---------- Hours ---------- */ .hours{background:var(--panel);border:1px solid var(--karta-ram);border-radius:var(--r);overflow:hidden; box-shadow:var(--tien-jemny)} .hours-hd{padding:18px 22px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .hours-hd h3{margin:0;color:#fff} .hours ul{list-style:none;margin:0;padding:8px 10px} .hours li{display:flex;justify-content:space-between;gap:16px;padding:11px 14px;border-radius:6px;font-size:.96rem} .hours li.today{background:var(--red-soft);font-weight:600;color:var(--ink)} .hours li span:last-child{font-variant-numeric:tabular-nums;color:var(--ink-soft)} .hours li.today span:last-child{color:var(--red);font-weight:700} .hours li.off span:last-child{color:var(--ink-soft)} .map{border:0;width:100%;height:100%;min-height:360px} /* ---------- Cookie lišta ---------- */ .cookiebar{position:fixed;left:14px;right:14px;bottom:14px;z-index:9999; background:var(--sklo);-webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur); border:1.5px solid var(--line);border-radius:var(--r);box-shadow:0 18px 50px rgba(0,0,0,.18); padding:20px 22px;max-width:560px;display:none} /* `backwards` tu bolo pascou: kým animácia nezačne – v karte prehliadača na pozadí, pri zastavených animáciách – drží prvok na `from{opacity:0}` a lišta zostane neviditeľná, hoci `display` je `block`. Presne to sa dialo po kliknutí na „Nastavenia cookies": trieda pribudla, lišta nie. Viditeľnosť preto na animácii nestojí, tá už len dobehne odspodu. */ .cookiebar.show{display:block;opacity:1;animation:riseIn .45s cubic-bezier(.22,1,.36,1)} .cookiebar:focus{outline:0} .cookiebar h4{font-family:var(--head);text-transform:uppercase;letter-spacing:.08em; font-size:1.05rem;color:var(--red);margin:0 0 8px} .cookiebar p{font-size:.9rem;color:var(--ink-soft);margin:0 0 16px;line-height:1.55} .cookiebar p a{color:var(--red)} .cookiebar .cb-actions{display:flex;flex-wrap:wrap;gap:10px} .cookiebar .btn{padding:11px 18px;font-size:.86rem} @media(max-width:620px){.cookiebar{left:10px;right:10px;bottom:10px;padding:18px} .cookiebar .cb-actions .btn{flex:1 1 auto}} .cookie-reset{background:none;border:0;padding:0;font:inherit;color:inherit; text-decoration:underline;cursor:pointer} /* Návod pre iPhone pod tlačidlom „Pridať appku na plochu". Safari inštalačnú výzvu nepozná, takže je to jediná cesta, ako to zákazníkovi povedať. */ .pwa-navod{margin:6px 0 0;font-size:.8rem;opacity:.8;max-width:34ch} .pwa-navod b{color:#fff} /* Mapa sa výškou riadi susedným stĺpcom s hodinami. Odkedy nad ním nie je zoznam kontaktov, je stĺpec nižší a mapa sa môže stiahnuť s ním – 360 px ju predtým držalo zbytočne veľkú. */ .map-wrap{border-radius:var(--r);overflow:hidden;border:1.5px solid var(--line);height:100%; min-height:270px;box-shadow:var(--tien-jemny)} .map-consent{ height:100%;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:12px;text-align:center;padding:34px 26px;background:var(--bg);color:var(--ink-soft); } .map-consent svg{color:var(--red)} .map-consent h3{margin:0} .map-consent p{margin:0;font-size:.9rem;max-width:38ch} .map-consent a{font-size:.86rem;color:var(--red);text-decoration:underline;text-underline-offset:3px} /* ---------- Form ---------- */ /* Veľká biela plocha uprostred teplej steny bije do očí. Rovnaký jemný prechod ako vo vyskakovacích oknách; polia zostávajú svetlejšie než karta, aby bolo na prvý pohľad vidieť, kam sa píše. */ .form-card{background:var(--panel);border:1.5px solid var(--line);border-top:4px solid var(--red);border-radius:var(--r);padding:clamp(24px,4vw,38px);box-shadow:var(--shadow)} .field{margin-bottom:16px} .field label{display:block;font-family:var(--head);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:7px} /* Vzhľad poľa je nižšie, v jednom spoločnom recepte pre celý web. Tu ostáva len to, čím sa dopytový formulár naozaj líši — vyššie okno na správu. */ .field textarea{resize:vertical;min-height:112px} .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .dopyt-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start} @media(max-width:900px){.dopyt-grid{grid-template-columns:1fr;gap:32px}} .field label .opt{font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--ink-soft);font-size:.86em} @media(max-width:560px){.row2{grid-template-columns:1fr}} /* `width:100%` nezmení `min-content` prvku: pri `nowrap` je to šírka celého nápisu na jednom riadku, takže obsah pretiekol tlačidlo a `.band` s `overflow:hidden` ho odrezal. Na najužších telefónoch preto zalamujeme. */ @media(max-width:600px){ .btn{white-space:normal;text-align:center} } /* Vzhľad súhlasu je v spoločnom recepte nižšie; tu ostáva len rozostup. */ .consent{margin:8px 0 20px} .form-msg{display:none;padding:14px 16px;border-radius:7px;font-size:.93rem;font-weight:600;margin-top:14px} .form-msg.ok{display:block;background:#E8F5EC;color:#186B36} .form-msg.err{display:block;background:var(--red-soft);color:var(--red-dk)} .hp{position:absolute;left:-9999px} /* ---------- FAQ ---------- */ .faq{max-width:840px;margin-inline:auto} /* Rozbaľovací blok je karta ako všetky ostatné — teplý prechod, biely rám, jemný tieň (majiteľ 24. 9. 2026: okná v účte boli zase biele). */ details{background:var(--panel);border:1px solid var(--karta-ram); border-radius:var(--r);margin-bottom:10px; overflow:hidden;transition:border-color .2s,box-shadow .2s;box-shadow:var(--tien-jemny)} details[open]{box-shadow:var(--tien-zdvih)} details[open]{border-color:var(--red)} summary{padding:18px 22px;cursor:pointer;font-family:var(--head);font-weight:500;font-size:1.05rem;letter-spacing:.03em;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center} summary::-webkit-details-marker{display:none} summary::after{content:"+";font-size:1.6rem;font-weight:300;color:var(--red);transition:transform .2s;line-height:1} details[open] summary::after{transform:rotate(45deg)} details p{padding:0 22px 20px;margin:0;color:var(--ink-soft);font-size:.95rem} /* ---------- CTA band ---------- */ /* Pruh s výzvou je jediná sýta plocha na celej stránke, tak nech aj vystúpi. Prechod v červenej dáva svetlo zhora, vnútorná svetlá hrana napodobňuje odlesk na hornom okraji a tieň pod ním ho zdvihne nad stenu. Tieň je tónovaný do červena, nie sivý – sivý pod sýtou farbou pôsobí špinavo. */ .band{ background:linear-gradient(158deg, #EF3B33 0%, var(--red) 42%, #C4191C 100%); color:#fff;border-radius:var(--r-lg);padding:clamp(36px,5vw,60px); text-align:center;position:relative;overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.12), 0 26px 44px -22px rgba(140,26,26,.75), 0 4px 10px -6px rgba(140,26,26,.5); } .band-art{position:absolute;left:0;bottom:-30px;width:170px;height:280px;opacity:.18;color:#fff;pointer-events:none} .band h2{color:#fff;position:relative} .band p{color:rgba(255,255,255,.88);max-width:54ch;margin-inline:auto;position:relative} .band .hero-actions{justify-content:center;position:relative} /* Biele plochy vnútri pruhu boli jediné čisto biele miesto na stránke. Preberajú teplý odtieň zvyšku webu a vlastný tieň, aby na sýtej červenej ležali na nej a nie v nej. */ .band .btn-white{ background:#FBF6F0;color:var(--red); box-shadow:0 12px 20px -10px rgba(96,16,16,.6), 0 2px 4px -2px rgba(96,16,16,.5); } .band .btn-white:hover{background:#fff} .band .btn-ghost{ background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.62);color:#fff; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); box-shadow:0 12px 20px -12px rgba(96,16,16,.55); } .band .btn-ghost:hover{background:rgba(255,255,255,.24);border-color:#fff;color:#fff} /* ---------- Footer ---------- */ footer{background:var(--ink);color:rgba(255,255,255,.65);padding:56px 0 24px;font-size:.92rem} .f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;margin-bottom:34px} @media(max-width:760px){.f-grid{grid-template-columns:1fr;gap:26px}} footer h4{font-family:var(--head);color:#fff;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px;font-weight:600} footer a{color:rgba(255,255,255,.65);text-decoration:none} footer a:hover{color:#fff} footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px} .socials{display:flex;gap:10px;margin-top:18px} .socials a{width:44px;height:44px;border-radius:8px;background:rgba(255,255,255,.09);display:grid;place-items:center;transition:.2s;color:#fff} .socials a:hover{background:var(--red)} .f-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem} /* ---------- FAB (telefón) ---------- */ /* Plávajúce tlačidlo telefónu bolo najnižšie v rade v pravom dolnom rohu. Zrušené: číslo je v hlavičke vpravo hore a tretie okrúhle tlačidlo nad sebou už len uberalo miesto na obrazovke. Chat si sadol na jeho polohu, prepočítava sa v chat.css cez `--fab-chat`. Preto tu nezostal žiadny štýl pre `.fab` – aj samotný prvok je z oboch stránok preč. */ /* ---------- Animácie ---------- */ @keyframes riseIn{from{opacity:0;transform:translateY(28px)}} @keyframes fadeIn{from{opacity:0}} .js .hero .wrap > *{animation:riseIn .9s cubic-bezier(.22,1,.36,1) backwards} .js .hero-badges{animation-delay:.06s} .js .hero h1{animation-delay:.16s} .js .hero .wrap > p{animation-delay:.30s} .js .hero-actions{animation-delay:.40s} .js .trust{animation-delay:.60s} .js .rv{opacity:0;transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)} .js .rv.in{opacity:1;transform:none} /* ikony sortimentu sa „nakreslia“ zhora nadol */ .js .card .ico{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s cubic-bezier(.22,1,.36,1) .1s} .js .card.in .ico{clip-path:inset(0 0 0 0)} /* číslované body v Prečo my */ .js .check .n{transform:scale(.5);opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s} .js .check li.in .n{transform:none;opacity:1} .nav-links a{position:relative} .nav-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px; background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,1,.36,1)} .nav-links a:hover::after{transform:scaleX(1)} .nav-cta::after{display:none} @media(prefers-reduced-motion:reduce){ .js .rv,.js .hero .wrap > *,.js .card .ico,.js .check .n{ animation:none!important;transition:none!important;opacity:1!important;transform:none!important;clip-path:none!important} } /* ============ AKCIE A NOVINKY ============ */ /* Sekciu odkrýva hlavna.js až vtedy, keď nejaká platná akcia existuje. Bez [hidden] pravidla by ju prehliadač aj tak zobrazil – `display:grid` nižšie by atribút prebilo. */ .akcie-sekcia[hidden]{display:none} .akcie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px} .akcia{background:var(--panel);border:1px solid var(--karta-ram);border-left:4px solid var(--red); box-shadow:var(--tien-jemny); border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column; transition:transform .18s,box-shadow .18s} .akcia:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .akcia h3{font-size:1.12rem;margin:0 0 8px;line-height:1.3} .akcia p{margin:0 0 14px;font-size:.93rem;color:var(--ink-2);line-height:1.6} .akcia .pbrand{font-family:var(--head);font-size:.72rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--red);margin-bottom:6px} .akcia-do{font-size:.78rem;color:var(--ink-soft);margin-top:auto} .akcia-odkaz{align-self:flex-start;margin-top:12px;font-family:var(--head);font-weight:600; text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;color:var(--red);text-decoration:none; border-bottom:2px solid var(--red-soft);padding-bottom:2px} .akcia-odkaz:hover{border-bottom-color:var(--red)} /* ============ NOVINKY E-MAILOM ============ */ .news-box{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center; background:var(--panel);border:1.5px solid var(--line);border-top:4px solid var(--red); border-radius:var(--r);padding:clamp(24px,4vw,42px);box-shadow:var(--shadow)} @media(max-width:860px){.news-box{grid-template-columns:1fr;gap:24px}} .news-text h2{margin:.1em 0 .4em} .news-text .lead{margin:0} .news-form .field{margin-bottom:14px} .news-form .consent{margin:4px 0 16px} .news-form .btn{width:100%;justify-content:center} /* ============================================================================ ZÁKAZNÍCKY ÚČET – registračné okienko a profil Okienko si stavia `ucet.js` sám a je na oboch stránkach, preto sú štýly tu v spoločnom súbore a nie sú závislé na katalógových triedach. ============================================================================ */ /* Podklad nie je len tmavší, ale aj rozostrený – stránka za oknom sa stratí do hmly namiesto toho, aby cez ňu presvitala. Odtieň je teplý, aby sedel so stenou, nie neutrálne sivý. */ .uc-modal{position:fixed;inset:0;z-index:400;background:rgba(46,36,29,.42); -webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%); display:grid;place-items:center;padding:18px;overflow-y:auto; animation:fadeIn .18s ease-out} .uc-modal[hidden]{display:none} /* Svetlá hrana navrchu je to, čo z plochy robí sklo: napodobňuje odlesk na hornom okraji. Bez nej je to len zaoblený obdĺžnik. */ /* Plocha je tá istá teplá stena ako pod celým webom, nie panelový prechod. V okne vysokom cez pol obrazovky bol prechod zhora nadol vidieť ako sveté a tmavé pásmo – na malej karte je nenápadný, tu robil z okna kachličku. */ .uc-box{background:var(--bg);border-radius:22px;max-width:620px;width:100%; max-height:92vh;overflow-y:auto;padding:10px 26px 26px;position:relative; display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.7); box-shadow:0 40px 80px -24px rgba(46,36,29,.55), 0 2px 6px -3px rgba(46,36,29,.4)} /* Zatváracie tlačidlo je sklovité a drží sa navrchu okna; rozostrenie pod ním je to, čo pod ním rolujúci obsah zjemní. */ .uc-x{position:sticky;top:6px;align-self:flex-end;z-index:3; background:var(--sklo);border:1px solid var(--sklo-ram); -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur); width:40px;height:40px;border-radius:50%;font-size:1.6rem;line-height:1;color:var(--ink-2); cursor:pointer;display:grid;place-items:center;box-shadow:var(--sklo-tien); transition:color .18s,border-color .18s} .uc-x:hover{color:var(--red);border-color:var(--red)} .uc-box h2{font-size:1.5rem;margin:0 0 8px} /* Otázka a hlásenie (HafoOkno v spolocne.js) namiesto `confirm`/`alert`. Podklad a plocha sú tie isté ako pri okne účtu vyššie, okno je len menšie a stojí nad ním — otázka „Zmazať zviera?" vzniká práve v ňom. */ .okno{position:fixed;inset:0;z-index:450;background:rgba(46,36,29,.42); -webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%); display:grid;place-items:center;padding:18px;animation:fadeIn .18s ease-out} .okno-box{background:var(--bg);border-radius:22px;max-width:420px;width:100%; padding:24px 26px;border:1px solid rgba(255,255,255,.7); box-shadow:0 40px 80px -24px rgba(46,36,29,.55), 0 2px 6px -3px rgba(46,36,29,.4)} .okno-box h2{font-size:1.25rem;margin:0 0 8px} .okno-text{margin:0;font-size:.92rem;color:var(--ink-2);line-height:1.6} .okno-tlacidla{display:flex;justify-content:center;gap:10px;margin-top:20px} .okno-tlacidla .btn{padding:12px 20px;font-size:.9rem} .okno-tlacidla .btn:disabled{opacity:.45;cursor:default;transform:none} /* Voľba z pilulek v okienku (HafoOkno.vyber) – tie isté pilulky ako deň vyzdvihnutia v košíku. */ .okno-volby{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px} .okno-vol{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 16px;border:1.5px solid #D9D0C5;border-radius:999px; background:var(--v-okne);color:var(--ink-2);font-size:13.6px;font-weight:600} .okno-vol:hover{border-color:var(--red)} .okno-vol[aria-pressed="true"]{border-color:var(--red);color:var(--red-dk);background:var(--red-soft)} .okno-vol:focus-visible{box-shadow:0 0 0 3px rgba(225,33,31,.25)} @media(max-width:560px){ .okno-tlacidla{flex-direction:column-reverse} .okno-tlacidla .btn{width:100%} } .uc-nadpis2{font-family:var(--head);font-size:.78rem;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-soft);margin:22px 0 10px; padding-top:14px;border-top:1px solid var(--line)} .uc-lead{margin:0 0 16px;font-size:.9rem;color:var(--ink-soft);line-height:1.6} /* `minmax(0,1fr)`, nie `1fr`: stĺpec s dlhým názvom krmiva v rozbaľovacom zozname sa inak roztiahol a druhé pole vytlačil z karty (Pripomienky). */ .uc-mriezka{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px} .uc-mriezka > *{min-width:0} @media(max-width:560px){.uc-mriezka{grid-template-columns:1fr}} .uc-pole{display:flex;flex-direction:column;gap:6px;margin-bottom:12px} .uc-pole > span{font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--ink-2)} .uc-pole small{font-size:.74rem;color:var(--ink-soft);line-height:1.45} .uc-pole textarea{resize:vertical;min-height:56px} .uc-akcie{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px} .uc-lnk{background:none;border:0;padding:0;font:inherit;font-size:.86rem;color:var(--red); cursor:pointer;text-decoration:underline;text-underline-offset:3px} /* Zhrnutie účtu je sklovité, nie plná plocha – v okne s prechodom by tmavší obdĺžnik pôsobil ako nalepený. */ .uc-msg{margin:12px 0 0;font-size:.86rem;line-height:1.5;min-height:1.2em} .uc-msg.ok{color:#1a8f3c} .uc-msg.err{color:var(--red)} .uc-vyzva{background:var(--pozor-plocha);border:1.5px solid var(--pozor-ram);border-radius:12px;padding:12px 14px; font-size:.86rem;line-height:1.55;margin:14px 0 0} .uc-zoznam{list-style:none;padding:0;margin:0;display:grid;gap:8px} .uc-zoznam li{display:flex;gap:14px;align-items:flex-start;justify-content:space-between; border:1.5px solid var(--line);border-radius:12px;padding:12px 14px} .uc-zoznam b{display:block;font-size:.96rem} .uc-zoznam span{display:block;font-size:.82rem;color:var(--ink-soft);margin-top:2px} .uc-zoznam small{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:6px;line-height:1.5} /* Formulár na novú pripomienku – vlastný rámik, aby bolo jasné, že sa týka toho, čo je nad ním, a nie celého účtu. */ .uc-prip{margin-top:12px;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px} .uc-prip select{width:100%} /* Rozbaľovanie „Pridať zviera" preberá vzhľad ostatných `summary` na webe (plus vpravo, ktorý sa po otvorení otočí na krížik) – vlastný znak by tam bol druhý raz. Len ho zmenšíme, je to ovládanie vnútri okienka. */ /* Ponuka registrácie nad rezervačným formulárom. Tichá – je to ponuka, nie podmienka; rezervovať sa dá aj bez účtu a tak to má ostať. */ /* rozbaľovacie bloky a úprava zvierat v profile účtu */ .uc-zoznam-akcie{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0} .uc-zoznam li.uprava{display:block} .uc-pole input:disabled,.uc-pole select:disabled,.uc-pole textarea:disabled{ background:var(--bg-soft,#f7f5f4);color:var(--ink-soft);cursor:not-allowed} /* ---------- mimoriadny oznam (sviatok, dovolenka, skrátené hodiny) ---------- Vkladá ho `spolocne.js` z /api/info – teda na každej stránke webu, nielen na hlavnej. Sedí nad hlavičkou, nie v nej, aby sa dali lepiť zvlášť. Tri vrstvy pohybu, každá s inou úlohou: 1. `oznam-prichod` – pás sa raz zosunie zhora. Najväčší diel pozornosti získa moment, keď sa niečo objaví, nie trvalé blikanie. 2. `oznam-tep` – bodky po stranách textu tepú stále. Malá plocha znesie trvalý pohyb, celý pás na šírku obrazovky nie – z toho bolia oči. 3. `oznam-lesk` – svetelný pruh raz za 6 s prebehne pásom. Beží len prvých 35 % cyklu, zvyšok parkuje mimo obrazu, takže je to záblesk, nie nepretržitá animácia. Pri `prefers-reduced-motion` sa všetko zastaví – pás ostane červený a čitateľný, len bez pohybu. Pás je prilepený rovnako ako hlavička a leží nad ňou (z-index 61 vs. 60). Hlavička sa preto nesmie lepiť na 0, ale pod pás – jeho výšku jej podá `spolocne.js` v premennej `--oznam-h`. Napevno zapísaná výška by prestala sedieť hneď, ako sa text na úzkom displeji zalomí do dvoch riadkov. */ .oznam-pas{position:sticky;top:0;z-index:61; padding:12px 46px;color:#fff;text-align:center; font-size:.96rem;font-weight:700;line-height:1.4;letter-spacing:.01em; box-shadow:0 2px 10px -2px rgba(225,33,31,.45); /* Lesk je pozadie pásu, nie vrstva navyše – pseudo-prvky sú obsadené bodkami a krížikom. Parkuje mimo obrazu vľavo a raz za cyklus prebehne. */ background-color:var(--red); background-image:linear-gradient(100deg,transparent 0,rgba(255,255,255,.32) 45%,transparent 90%); background-repeat:no-repeat;background-size:60% 100%;background-position:-70vw 0; animation:oznam-prichod .5s cubic-bezier(.2,.8,.3,1) both, oznam-lesk 6s ease-in-out 1.2s infinite} /* Bodky visia na texte, nie na páse – krížik je posledné dieťa pásu a bodka z `.oznam-pas::after` by skončila až za ním. `inline-flex` robí z bodiek a textu tri samostatné bunky vedľa seba. Kým boli bodky súčasťou toku textu, pri zalomení na mobile ostala ľavá na prvom riadku a pravá klesla na posledný. Takto držia obe pri prvom riadku a text sa medzi nimi centruje ako celý blok, aj keď má tri riadky. */ .oznam-text{display:inline-flex;align-items:flex-start;justify-content:center; gap:10px;text-align:center} .oznam-text::before,.oznam-text::after{content:"";flex:none; width:9px;height:9px;border-radius:50%;background:#fff; /* Na optický stred prvého riadka: (výška riadka − priemer bodky) / 2. V `em`, aby to sedelo aj po zmenšení písma na mobile. */ margin-top:calc((1.4em - 9px) / 2); animation:oznam-tep 1.7s ease-in-out infinite} /* Krížik je mimo toku textu, inak by rozhodil vycentrovanie. Vodorovné odsadenie pásu (46px) mu drží miesto na oboch stranách naraz. */ .oznam-zavri{position:absolute;right:7px;top:50%;transform:translateY(-50%); width:38px;height:38px;display:flex;align-items:center;justify-content:center; padding:0;border:0;border-radius:50%;background:transparent;color:#fff; font:400 1.6rem/1 var(--head);cursor:pointer;opacity:.8; transition:opacity .15s,background .15s} .oznam-zavri:hover,.oznam-zavri:focus-visible{opacity:1;background:rgba(255,255,255,.2)} /* Náhrada krížika na mobile – nenápadný riadok pod oznamom. Vidieť je vždy len jedno z nich (pozri media query nižšie). */ .oznam-tip{display:none;margin:3px auto 0;padding:0;border:0;background:transparent; color:inherit;font:inherit;font-size:.72rem;font-weight:500;letter-spacing:.02em; opacity:.72;cursor:pointer} .oznam-tip:hover,.oznam-tip:focus-visible{opacity:1} .oznam-pas.zavriet{animation:oznam-odchod .25s ease-in forwards} @keyframes oznam-prichod{ from{transform:translateY(-100%);opacity:0} to{transform:none;opacity:1} } @keyframes oznam-odchod{ to{transform:translateY(-100%);opacity:0} } @keyframes oznam-tep{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.62);opacity:.55} } @keyframes oznam-lesk{ 0%{background-position:-70vw 0} 35%,100%{background-position:120vw 0} } @media (prefers-reduced-motion:reduce){ .oznam-pas,.oznam-text::before,.oznam-text::after{animation:none} } /* Na mobile ide krížik preč – z úzkeho pásu ukrajoval miesto na oboch stranách naraz (odsadenie musí byť symetrické, inak sa text rozcentruje). Zavrie sa ťuknutím kamkoľvek, čo obsluhuje `spolocne.js` na rovnakej hranici 640px. Vďaka tomu má text späť plnú šírku. */ @media (max-width:640px){ .oznam-pas{padding:10px 16px;font-size:.87rem;cursor:pointer} .oznam-zavri{display:none} .oznam-tip{display:block} } /* ============================================================================ VÝBERY (select) – rovnaký tvar ako v administrácii Natívny `select` vyzerá v každom prehliadači inak a vedľa vlastných polí pôsobí cudzo. Obal kreslí svetlý rámik a v ňom vysadenú bielu dlaždicu; šípka je nakreslená rámčekom, nie obrázkom, aby si držala farbu textu. ============================================================================ */ .vyber{position:relative;display:inline-flex;align-items:center;padding:3px;max-width:100%; background:var(--bg-soft);border:1.5px solid var(--line);border-radius:13px;box-sizing:border-box} .vyber::after{content:'';position:absolute;right:16px;top:50%;width:7px;height:7px; border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft); transform:translateY(-70%) rotate(45deg);pointer-events:none} .vyber select{flex:1 1 auto;min-width:0;width:100%;appearance:none;-webkit-appearance:none; padding:9px 34px 9px 15px;border:0;border-radius:9px;background:var(--v-okne);color:var(--ink); box-shadow:var(--shadow);font:inherit;font-size:.94rem;font-weight:600;cursor:pointer; text-overflow:ellipsis} .vyber select:focus{outline:0;box-shadow:0 0 0 3px rgba(225,33,31,.16)} .vyber select:disabled{opacity:.55;cursor:default} /* Tam, kde výber vypĺňal celú šírku poľa, ju teraz vypĺňa obal. */ .uc-pole .vyber,.field .vyber,.uc-prip .vyber{display:flex;width:100%} /* ---------- posuvníky ---------- Systémový posuvník je v každom prehliadači inak široký. Tenký prúžok vo farbe rámikov nikde nekričí. */ *{scrollbar-width:thin;scrollbar-color:var(--line) transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px; border:2px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background:var(--ink-soft);background-clip:padding-box} ::-webkit-scrollbar-corner{background:transparent} /* ================= PLOCHA STRÁNKY A HLAVIČKA ================= */ /* Plocha celého webu je stena z úvodného videa, aby na seba scéna a stránky nadväzovali. Karty zostávajú biele a na teplom podklade vystúpia. */ body{ --bg: #EBE4DB; --bg-soft: #E2DACF; --line: #D9D0C5; /* Stena z videa pokračuje po celej stránke. Zastávky sú odmerané z pásu nad psom, ktorý je čistý cez celú šírku: okraje majú 175 jasu, stred 204 – tá vineta je to, čo z plochy robí fotografovanú stenu a nie odtieň. Pre text je rozjasnená (stred na 233) a vineta zmiernená na 62 %, inak by boli okraje stránky pritmavé. Na úvodnej stránke k tomu hero.css pridáva zvislé nadviazanie na spodnú hranu scény. */ /* Prechod je čisto vodorovný, takže `background-attachment: fixed` by na obraze nič nezmenil a na iOS je neisté – preto tu nie je. */ background:var(--stena); } /* Hlavička nemá žiadnu vlastnú plochu – logo, menu, účet aj telefón plávajú priamo nad obsahom. Preto ani stav `scrolled`: akákoľvek lišta, biela či iná, z nej robí cudzí pás. Lepivá byť môže práve preto, že plocha stránky pokračuje v stene z videa; nad bielou by text hlavičky splýval s obsahom, tu drží. */ body header, body header.scrolled{ position:sticky;top:var(--oznam-h,0px); background:none;backdrop-filter:none;border-bottom:0;box-shadow:none; } /* Po odscrollovaní sa za značkou a menu objavia sklovité bubliny – tie isté, aké má tlačidlo „Navigovať k nám" a Registrácia. Text tak drží nad akýmkoľvek obsahom, ktorý pod hlavičkou uteká, a stále to nie je lišta. Triedu `scrolled` prepína hlavna.js pri scrollY > 8. */ body .logo, body .nav-links{ border-radius:999px;border:1.5px solid transparent; transition:background .28s, border-color .28s, box-shadow .28s, padding .28s; } /* Značka má bublinu stále, nielen po odscrollovaní. Na vrchu stránky stojí nad najsvetlejším miestom scény a bez plochy pod sebou pôsobila ako nalepená na video. Menu v strede sa naďalej podfarbí až pri scrollovaní – päť bubliniek vedľa seba hneď na úvod je priveľa a hero má ostať otvorený. */ body .logo{ padding:6px 18px 6px 8px; background:var(--sklo);border-color:var(--sklo-ram); -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur); box-shadow:var(--sklo-tien); } @media(min-width:1001px){ body header.scrolled .nav-links{ padding:5px 16px; background:var(--sklo);border-color:var(--sklo-ram); -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur); box-shadow:var(--sklo-tien); } } /* Nad červeným pruhom s výzvou sa text hlavičky kedysi zosvetľoval na bielo. Odkedy má značka bublinu stále a menu ju dostane pri scrollovaní – a nad pruh sa dá dostať jedine odscrollovaním – sedel by biely text na svetlom skle a nedal by sa prečítať. Prepínač triedy `na-cervenom` je preto v hero.js zrušený a nezostáva po ňom pravidlo. */ /* Tri stĺpce 1fr auto 1fr: menu stojí presne v strede hlavičky bez ohľadu na to, aké široké je logo a skupina vpravo. Pri flexe sa centrovalo len voči zvyšku miesta po logu, takže stálo mimo stredu. */ body .nav{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:20px;height:76px; } /* Hlavička drží rovnaké okraje ako scéna pod ňou, nie 1180 px zvyšku webu. */ body header .wrap{max-width:none;padding-inline:clamp(20px,3.2vw,60px)} /* Značka: rovnaké proporcie ako v návrhu, len o 15 % väčšia. Nadpisové písmo nesie len HAFO; riadok nad ním je Inter a sivý, inak sú dva červené riadky nad sebou a značka stráca hierarchiu. */ body .logo{justify-self:start;gap:12px} /* Značka pôsobila ako nálepka na stene – plochá červená silueta a plochý nápis. `drop-shadow` sleduje tvar loga, nie jeho štvorec, takže pes naozaj visí nad pozadím; `box-shadow` by nakreslil obdĺžnik. Dva tiene: tesný pod obrysom a široký mäkký, inak to vyzerá ako obtiahnutie. */ body .logo img{width:46px; filter:drop-shadow(0 1px 1px rgba(78,58,44,.28)) drop-shadow(0 8px 12px rgba(78,58,44,.32))} body .logo-txt i{ font-family:var(--text);font-weight:600;font-size:.64rem;letter-spacing:.13em; color:var(--ink-soft);margin-bottom:3px; text-shadow:0 1px 0 rgba(255,255,255,.75); } /* Nápis: svetlý pruh zhora a tieň zdola. Písmená tak sedia v ploche, nie na nej – ten istý trik nesie vyrazený text na tabuli. Hodnoty sú zámerne drobné, pri väčších z toho je 3D nápis z deväťdesiatych rokov. */ body .logo-txt b{font-size:1.17rem;letter-spacing:.06em;line-height:1; text-shadow:0 -1px 0 rgba(255,255,255,.55), 0 1px 1px rgba(120,40,32,.45), 0 5px 10px rgba(78,58,44,.28)} /* Menu je vetou, nie verzálkami – tak je to v návrhu. Podčiarknutie zdola nahrádza podfarbenie z styl.css. */ body .nav-links a{ font-family:var(--text);text-transform:none;font-size:.84rem;font-weight:600; letter-spacing:0;color:var(--ink-2);padding:9px 7px;border-radius:999px; background:none;border:1px solid transparent; transition:background .2s, border-color .2s, color .2s; } /* Rovnaké rozjasnenie ako pri Registrácii a telefóne – z položky sa pri prejdení myšou stane sklovitá bublina. Podčiarknutie by k nej bolo navyše, preto sa vypína. */ /* `.nav-hot` musí byť v selektore vymenované. Pravidlo `.nav-links a.nav-hot:hover` vyššie v súbore má dve triedy proti jednej tu, takže by vyhralo aj napriek poradiu – a Rezervovať krmivo by pri prejdení myšou ostalo jediné ružové medzi sklovitými bublinami. */ body .nav-links a:hover, body .nav-links a.nav-hot:hover{ color:var(--ink);background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.95); -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur); } body .nav-links a::after{display:none} /* Mimo úvodnej je stredný stĺpec prázdny (menu je skryté), takže by sa skupina vpravo posunula doňho. Preto pevný tretí stĺpec. */ body .nav-vpravo{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px} /* Účet a telefón sú pilulky. styl.css im nasadzuje červenú cez !important, takže sa tu prebíja rovnakou zbraňou. */ /* Účet a telefón sú mimo