/* ========================================================= Energetické riešenia — style.css ========================================================= */ /* ---------- 0. Písmo (self-hosted, žiadna externá závislosť) ---------- Inter je variabilný font – jeden súbor pokryje všetky rezy 100–900. Cesty sú relatívne voči tomuto CSS súboru, takže fungujú aj v podpriečinku na serveri. --------------------------------------------------------------------- */ @font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("../assets/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329, U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("../assets/fonts/inter-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329, U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ---------- 1. Tokeny ---------- */ :root{ /* značka – prevzaté z loga */ --green-800:#2E4F13; --green-700:#3B6518; --green-600:#508521; --green-500:#63A32B; --green-400:#7CBE40; --green-050:#EFF6E8; --amber-500:#E8A22B; --amber-050:#FDF4E4; --ink-900:#111710; --ink-800:#1C2618; --ink-700:#2E3A28; --ink-500:#5A6753; /* 5,08:1 na bielej – používa sa na 11–14 px popisky, tie musia prejsť AA */ --ink-400:#66725F; --bg:#FFFFFF; --bg-soft:#F6F9F2; --line:#E3EADA; --line-strong:#CBD8BE; --radius-sm:10px; --radius:16px; --radius-lg:24px; --shadow-sm:0 1px 2px rgba(17,23,16,.06), 0 2px 8px rgba(17,23,16,.04); --shadow-md:0 4px 12px rgba(17,23,16,.06), 0 12px 32px rgba(17,23,16,.07); --shadow-lg:0 8px 24px rgba(17,23,16,.08), 0 24px 64px rgba(17,23,16,.10); --shell:1200px; --pad:clamp(1.25rem, 4vw, 2.5rem); --section-y:clamp(4rem, 8vw, 7rem); --font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- 2. Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul,fieldset,legend{margin:0;padding:0} ul,ol{list-style:none} img,svg{display:block;max-width:100%;height:auto} button,input,select,textarea{font:inherit;color:inherit} fieldset{border:0} a{color:inherit} html{scroll-behavior:smooth;scroll-padding-top:96px} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } body{ font-family:var(--font); font-size:clamp(1rem,.97rem + .15vw,1.0625rem); line-height:1.65; color:var(--ink-700); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* overflow-x:hidden robí z rolovací kontajner, čo na mobiloch vie rozhádzať lepiacu lištu aj plynulé posúvanie. „clip“ orezáva rovnako, ale kontajner nevytvára. Staršie prehliadače ho ignorujú a použijú pravidlo vyššie. */ @supports (overflow:clip){ body{overflow-x:clip} } /* ---------- 3. Typografia ---------- */ h1,h2,h3{color:var(--ink-900);line-height:1.15;letter-spacing:-.02em;font-weight:700;text-wrap:balance} h1{font-size:clamp(1.85rem,1.3rem + 2.1vw,2.6rem);font-weight:800;letter-spacing:-.03em} h1 em{font-style:normal;color:var(--green-600)} h2{font-size:clamp(1.75rem,1.35rem + 1.8vw,2.6rem)} h3{font-size:1.15rem;line-height:1.3} p,li,dd,figcaption{text-wrap:pretty} /* popisky v sa lámu rovnako ako odsek, tak nech aj oni nenechávajú posledné slovo samé na riadku */ .facts span,.offer-points span,.contact-card span,.video-caption span{text-wrap:pretty} .kicker{ font-size:.8125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--green-700);margin-bottom:.85rem; } .kicker-light{color:var(--green-400)} /* ---------- 4. Layout ---------- */ .shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)} .shell-narrow{max-width:820px} .section{padding-block:var(--section-y)} .section-soft{background:var(--bg-soft);border-block:1px solid var(--line)} .section-head{max-width:680px;margin-bottom:clamp(2.5rem,5vw,3.5rem)} .section-sub{margin-top:1rem;font-size:1.0625rem;color:var(--ink-500)} .skip-link{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--green-700);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--radius-sm) 0; } .skip-link:focus{left:0} :focus-visible{outline:3px solid var(--green-500);outline-offset:2px;border-radius:4px} /* ---------- 5. Tlačidlá ---------- */ .btn{ position:relative;overflow:hidden;isolation:isolate; display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.8rem 1.4rem;border:1px solid transparent;border-radius:999px; font-weight:600;font-size:.9375rem;line-height:1;text-decoration:none;cursor:pointer; transition:transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); white-space:nowrap; } /* svetelný prejazd cez tlačidlo pri prejdení myšou */ .btn::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%); transform:translateX(-120%); } .btn:hover::before{transform:translateX(120%);transition:transform .7s var(--ease)} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-sm{padding:.6rem 1.1rem;font-size:.875rem} .btn-lg{padding:1rem 1.9rem;font-size:1rem} .btn-block{width:100%} .btn-label-short{display:none} .btn-primary{background:var(--green-700);color:#fff;box-shadow:0 4px 14px rgba(59,101,24,.28)} .btn-primary:hover{background:var(--green-800);box-shadow:0 8px 22px rgba(46,79,19,.34)} .btn-ghost{background:transparent;color:var(--ink-900);border-color:var(--line-strong)} .btn-ghost:hover{background:#fff;border-color:var(--green-500);color:var(--green-700)} .btn-light{background:#fff;color:var(--green-700)} .btn-light:hover{background:var(--green-050)} /* ---------- 6. Hlavička ---------- */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(255,255,255,.88); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .site-header.is-scrolled{border-bottom-color:var(--line);box-shadow:0 1px 20px rgba(17,23,16,.05)} .header-inner{display:flex;align-items:center;gap:1.5rem;min-height:76px} /* Vodorovný lockup – značka aj názov sú v jednom SVG, takže logo je zase jediný obrázok. Používame variantu -nav, ktorá má orezané prázdne okraje (pomer 1707:322 namiesto 1742:376), takže pri menšej výške vyzerá v lište rovnako veľká a nenecháva nad sebou a pod sebou mŕtvy priestor. 48 px z nej robí 204 px na šírku. Výška je zvolená tak, aby nápis „zdarma.sk“ mal 18 px – logo je s rýchlostnými čiarami vyššie, takže pri rovnakej výške by inak vyšiel nápis menší. */ .logo{flex:none;display:block} .logo img{width:auto;height:48px} .nav{display:flex;gap:.35rem;margin-left:auto} .nav a{ position:relative; padding:.5rem .8rem;border-radius:8px;text-decoration:none; font-size:.9375rem;font-weight:500;color:var(--ink-700); transition:color .18s var(--ease); /* položka sa nikdy nesmie zalomiť na dva riadky – „Pre domácnosti“ by inak pri užšom okne rozbilo výšku celej lišty */ white-space:nowrap; } /* podčiarknutie vybiehajúce zo stredu */ .nav a::after{ content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:2px;border-radius:2px; background:var(--green-500);transform:scaleX(0);transform-origin:center; transition:transform .28s var(--ease); } .nav a:hover{color:var(--green-700)} .nav a:hover::after, .nav a.is-active::after{transform:scaleX(1)} .nav a.is-active{color:var(--green-700);font-weight:600} .header-actions{display:flex;align-items:center;gap:.75rem;margin-left:auto} .nav + .header-actions{margin-left:0} .tel-link{ display:inline-flex;align-items:center;gap:.45rem;text-decoration:none; font-weight:600;font-size:.9375rem;color:var(--ink-900); /* 44 px je odporúčané minimum pre dotyk prstom */ min-height:44px;padding:.5rem .45rem;transition:color .15s var(--ease); } .tel-link:hover{color:var(--green-700)} .tel-link svg{width:18px;height:18px;fill:var(--green-600);flex:none} .burger{ display:none;width:44px;height:44px;background:transparent;border:1px solid var(--line-strong); border-radius:10px;padding:0;cursor:pointer; flex-direction:column;align-items:center;justify-content:center;gap:5px; } .burger span{display:block;width:19px;height:2px;background:var(--ink-900);border-radius:2px;transition:transform .25s var(--ease),opacity .2s var(--ease)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- 6b. Ukazovateľ prescrollovania ---------- */ .scroll-progress{ position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:transparent; } .scroll-progress span{ display:block;height:100%;width:100%; /* scaleX namiesto width – šírka by pri každom ráme vyvolala prepočet layoutu */ transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--green-600),var(--green-400)); box-shadow:0 0 12px rgba(124,190,64,.6); transition:transform .1s linear; } /* ---------- 7. Hero ---------- */ .hero{position:relative;padding-block:clamp(1rem,2vw,1.5rem) clamp(1rem,2vw,1.5rem);overflow:hidden;isolation:isolate} /* pomaly plávajúce farebné škvrny */ .aurora{position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;filter:blur(70px);opacity:.7} .blob{position:absolute;border-radius:50%;will-change:transform} .blob-1{width:46vw;height:46vw;max-width:620px;max-height:620px;top:-8%;right:-4%; background:radial-gradient(circle,rgba(124,190,64,.55),rgba(124,190,64,0) 70%); animation:drift-1 26s var(--ease) infinite alternate} .blob-2{width:38vw;height:38vw;max-width:520px;max-height:520px;top:22%;right:26%; background:radial-gradient(circle,rgba(232,162,43,.34),rgba(232,162,43,0) 70%); animation:drift-2 32s var(--ease) infinite alternate} .blob-3{width:34vw;height:34vw;max-width:460px;max-height:460px;bottom:-14%;left:-6%; background:radial-gradient(circle,rgba(99,163,43,.34),rgba(99,163,43,0) 70%); animation:drift-3 29s var(--ease) infinite alternate} @keyframes drift-1{to{transform:translate3d(-9%,7%,0) scale(1.12)}} @keyframes drift-2{to{transform:translate3d(11%,-9%,0) scale(.88)}} @keyframes drift-3{to{transform:translate3d(8%,-6%,0) scale(1.15)}} /* Postupné odhalenie nadpisu po slovách. POZOR: trieda sa NESMIE volať .split – tá je obsadená dvojstĺpcovým layoutom sekcií a nadpis by sa stal gridom. */ .words .w{display:inline-block;overflow:hidden;vertical-align:top} .words .w > span{ display:inline-block; animation:word-up .85s var(--ease) both; /* 45 ms na slovo – nadpis má 16 slov, pri väčšom odstupe by sa posledné objavilo takmer sekundu po prvom a odhalenie by pôsobilo zdĺhavo */ animation-delay:calc(var(--i,0) * 45ms + 120ms); } @keyframes word-up{from{transform:translateY(105%) rotate(3deg);opacity:0}to{transform:none;opacity:1}} .words em{display:inline} .hero-grid{ position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.5rem,3vw,3rem);align-items:center; } .eyebrow{ display:inline-flex;align-items:center;gap:.55rem; padding:.4rem .9rem .4rem .6rem;border-radius:999px; background:var(--green-050);border:1px solid #D7E8C6; font-size:.8125rem;font-weight:600;color:var(--green-700);margin-bottom:.85rem; } .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green-500);flex:none; box-shadow:0 0 0 0 rgba(99,163,43,.6);animation:pulse 2.4s infinite} @keyframes pulse{70%{box-shadow:0 0 0 8px rgba(99,163,43,0)}100%{box-shadow:0 0 0 0 rgba(99,163,43,0)}} .hero .lead{margin-top:.7rem;font-size:clamp(1rem,.95rem + .25vw,1.125rem);color:var(--ink-500);max-width:33em} .hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem} .hero-assurances{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:.9rem; font-size:.875rem;font-weight:500;color:var(--ink-500)} .hero-assurances li{display:flex;align-items:center;gap:.45rem} .hero-assurances svg{width:16px;height:16px;fill:var(--green-600);flex:none} /* karta s videom */ .video-card{ display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);overflow:hidden; transition:box-shadow .25s var(--ease); } /* natívne HTML5 video – prehráva sa priamo na stránke, bez služieb tretích strán */ .video-frame{position:relative;display:block} .video-native{width:100%;aspect-ratio:16/9;display:block;background:#0d1a12;object-fit:cover} .video-caption{display:block;padding:1rem clamp(1.1rem,2.2vw,1.5rem)} .video-caption strong{display:block;font-size:.9375rem;font-weight:700;color:var(--ink-900);margin-bottom:.3rem} .video-caption span{font-size:.8125rem;color:var(--ink-400)} /* Video vnútri tmavého panela s ponukou (bytové domy). Zámerne to NIE je biela .video-card pod panelom: v svetlej sekcii by druhá veľká karta pretiahla pozornosť na seba a ponuka by sa rozpadla na dva nesúvisiace bloky. Takto je video treťou položkou mriežky – prekrýva oba stĺpce, ale zaberá len časť ich šírky, takže ponuku dopĺňa a nekonkuruje jej. Oddeľuje ho len medzera mriežky; linka navyše by sa bila s rámčekom, ktorým končí zoznam výhod vedľa. */ .offer-video{ grid-column:1/-1; width:100%;max-width:520px;margin-inline:auto; } .offer-video video{ border-radius:14px; border:1px solid rgba(255,255,255,.16); box-shadow:0 12px 32px rgba(0,0,0,.28); } .offer-video figcaption{ margin-top:.7rem;text-align:center;text-wrap:pretty; font-size:.8125rem;line-height:1.5;color:rgba(255,255,255,.55); } /* ---------- 8. Čísla ---------- */ /* Svetlý pás so značkami, pod ktorými sme obsluhovali zákazníkov. Logá sú vo firemných farbách (vrátane čierneho SPP), preto je pozadie svetlé – na tmavom by sa museli prefarbovať a stratili by detaily. */ .brands{ background:var(--bg-soft);border-block:1px solid var(--line); padding-block:clamp(1.15rem,2.2vw,1.6rem); } /* POZOR: margin nesmie byť "margin:0" – prepísalo by margin-inline:auto zo .shell a celý pás by sa prilepil na ľavý okraj namiesto do stredu. Odsadenie po stranách rieši .shell, netreba ho tu opakovať. */ .brands-row{ display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem 1rem;align-items:center; list-style:none;margin-block:0; } .brand{display:flex;align-items:center;justify-content:center;padding-inline:.5rem;position:relative;min-height:44px} .brand + .brand::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:var(--line-strong)} /* Logá majú veľmi rozdielne proporcie, preto sa nedajú posadiť na jednu výšku – vyzerali by opticky rôzne veľké. Výšku ladíme podľa tvaru: široké nižšie, dvojriadkové vyššie. SSE má pod značkou ešte názov, takže má najvyšší box. Aby kvôli tomu nevyčnievalo z pásu, posunieme ho o rozdiel výšok nadol – všetky značky tak začínajú na rovnakej hornej hrane a názov visí pod nimi ako popisok. Posun sa počíta z premenných, takže drží v každej šírke okna. */ .brands-row{--logo-h:clamp(28px,3.4vw,42px);--logo-h-tall:clamp(34px,4.2vw,52px)} .brand-logo{ display:block;width:auto;height:var(--logo-h); max-width:100%;object-fit:contain; } .brand-logo-wide{height:clamp(22px,2.6vw,32px)} /* ZSE – veľmi široké */ .brand-logo-tall{ /* SSE – značka + názov pod ňou */ height:var(--logo-h-tall); transform:translateY(calc((var(--logo-h-tall) - var(--logo-h)) / 2)); } /* ---------- 9. Karty služieb ---------- */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.25rem,2.5vw,1.75rem)} .card{ position:relative;isolation:isolate; display:flex;flex-direction:column; background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(1.6rem,3vw,2rem); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } /* svetelná stopa sledujúca kurzor – súradnice dopĺňa JS */ .card::before{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(124,190,64,.13), transparent 70%); opacity:0;transition:opacity .35s var(--ease); } .card:hover::before{opacity:1} .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#CFE4B8} .card-icon{ position:relative; width:60px;height:60px;border-radius:18px;background:var(--green-050); display:grid;place-items:center;margin-bottom:1.4rem; transition:transform .35s var(--ease), background-color .3s var(--ease); } .card:hover .card-icon{transform:translateY(-2px) rotate(-4deg);background:#E4F1D4} /* pulzujúci prstenec okolo ikony */ .card-icon::after{ content:"";position:absolute;inset:0;border-radius:inherit; border:1px solid var(--green-500);opacity:0; } .card:hover .card-icon::after{animation:ring 1.6s var(--ease) infinite} @keyframes ring{ 0%{opacity:.6;transform:scale(1)} 100%{opacity:0;transform:scale(1.35)} } .card-icon svg{width:30px;height:30px;stroke:var(--green-600);fill:var(--green-600)} .card-icon svg [fill="none"]{fill:none} .card h3{margin-bottom:.7rem;font-size:1.3rem} .card > p{color:var(--ink-500);font-size:.9375rem} .card-list{margin-top:1.25rem;display:grid;gap:.55rem} .card-list li{position:relative;padding-left:1.6rem;font-size:.875rem;color:var(--ink-700)} .card-list li::before{ content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;border-radius:50%; background:var(--green-050); box-shadow:inset 0 0 0 1px #CFE4B8; } .card-list li::after{ content:"";position:absolute;left:4px;top:.72em;width:6px;height:3px; border-left:2px solid var(--green-600);border-bottom:2px solid var(--green-600); transform:rotate(-45deg); } .card-link{ margin-top:auto;padding-top:1.5rem; display:inline-flex;align-items:center;gap:.4rem;text-decoration:none; font-weight:600;font-size:.875rem;color:var(--green-700); } .card-link svg{width:17px;height:17px;fill:currentColor;transition:transform .2s var(--ease)} .card-link:hover svg{transform:translateX(3px)} /* ---------- 10. Ponuka pre firmy ---------- */ /* Tmavý panel odlíši ponuku pre firmy od zvyšku stránky, ktorý je svetlý. Vľavo je jedno tvrdenie, ktoré má oko chytiť ako prvé, vpravo očíslované body – nie štyri rovnako vážne stĺpce, v ktorých sa nedá nájsť začiatok. */ .offer{ position:relative;overflow:hidden; display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.75rem,4vw,3.5rem);align-items:center; /* jemné presvetlenie zľava hore dodá hĺbku, ale nikde nevytvorí škvrnu, ktorá by sa tlačila pod text */ background:linear-gradient(150deg,var(--ink-800),var(--ink-900) 58%); color:rgba(255,255,255,.7); border-radius:var(--radius-lg); padding:clamp(1.75rem,4vw,3.25rem); } /* zelený prúžok po hornej hrane – akcent, ktorý nezasahuje do textu */ .offer::before{ content:"";position:absolute;inset:0 0 auto;height:3px;pointer-events:none; background:linear-gradient(90deg,var(--green-600),var(--green-400) 45%,transparent); } .offer > *{position:relative} /* Fotka na pozadí ponuky pre firmy. Rozmazanie, odfarbenie, zosvetlenie tieňov aj zrolovanie svetiel sú zapečené už priamo v súbore (assets/img/pozadie-hala.jpg) – prehliadač tak nemusí pri každom prekreslení počítať CSS filter a rozmazaná fotka sa navyše komprimuje na zlomok pôvodnej veľkosti. Tmavý prekryv drží rovnaký smer (150deg) ako základný .offer, aby karta vyzerala rovnako aj tam, kde sa fotka nenačíta. Je znížený oproti čistej výplni len natoľko, aby hala pod ním fungovala ako nenápadná textúra, nie ako obrázok, ktorý súperí s textom. Prečo sú svetlá vo fotke zrolované: kontrast textu určuje najsvetlejší bod karty, a tým bol odlesk zapadajúceho slnka v ľavom hornom rohu – presne tam, kde sedí nadpis. Stačilo stlačiť tento jeden odlesk a prekryv sa dal zosvetliť o osem bodov bez toho, aby čokoľvek stratilo čitateľnosť. */ .offer-firmy{ background: linear-gradient(150deg,rgba(28,38,24,.62),rgba(17,23,16,.76) 58%), url("../assets/img/pozadie-hala.jpg?v=3") center/cover no-repeat; } /* Fotka bytovky s panelmi zatiaľ od klienta nedorazila. Pravidlo je zámerne vypnuté – s odkazom na neexistujúci súbor si prehliadač pri každom načítaní stránky vyžiada obrázok, ktorý dostane ako 404. ZAPNUTIE: nahrať fotku do assets/img/ pod uvedeným názvom (a prehnať ju rovnakou úpravou ako halu – rozmazať, odfarbiť, stmaviť) a odkomentovať. .offer-bytovky{ background: linear-gradient(150deg,rgba(28,38,24,.62),rgba(17,23,16,.76) 58%), url("../assets/img/pozadie-bytovka.jpg") center/cover no-repeat; } */ .offer-claim{ font-size:clamp(1.5rem,1.15rem + 1.7vw,2.25rem);font-weight:800; line-height:1.15;letter-spacing:-.03em;color:#fff;text-wrap:balance; } .offer-claim strong{color:var(--green-400)} .offer-copy > p:not(.offer-claim){margin-top:1rem;font-size:1rem;line-height:1.7} .offer-copy .btn{margin-top:1.75rem} .offer-points{display:grid} .offer-points li{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem 1rem; padding:1rem 0;border-top:1px solid rgba(255,255,255,.13); } .offer-points li:last-child{border-bottom:1px solid rgba(255,255,255,.13)} .offer-icon{ grid-row:1/3;align-self:start; width:38px;height:38px;border-radius:12px; display:grid;place-items:center; background:rgba(124,190,64,.14);color:var(--green-400); transition:background-color .25s var(--ease), transform .25s var(--ease); } .offer-icon svg{ width:20px;height:20px;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } .offer-points li:hover .offer-icon{background:rgba(124,190,64,.24);transform:translateY(-2px)} .offer-points strong{font-size:.9375rem;color:#fff} /* .58 by na karte pre firmy dalo 3,8:1 – fotka na pozadí dvíha najsvetlejší bod na rgb(80,85,75). .70 vracia odstavce na 4,7:1, teda nad hranicu AA. */ .offer-points li > span:not(.offer-icon){font-size:.875rem;line-height:1.5;color:rgba(255,255,255,.70)} /* ---------- 11. Split sekcie ---------- */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center} .split-copy > p{margin-top:1.1rem;color:var(--ink-500)} .split-copy .btn{margin-top:2rem} .check-list{margin-top:1.75rem;display:grid;gap:.7rem} .check-list li{position:relative;padding-left:2rem;font-size:.9375rem;font-weight:500;color:var(--ink-700)} .check-list li::before{ content:"✓";position:absolute;left:0;top:-.05em; width:22px;height:22px;border-radius:50%;background:var(--green-600);color:#fff; display:grid;place-items:center;font-size:.75rem;font-weight:700; } /* poukážky – dve pod sebou v jednom stĺpci */ .vouchers{display:grid;gap:clamp(.85rem,1.6vw,1.15rem)} /* poukážka */ .voucher{ background:linear-gradient(160deg,#fff,#FAFDF6); border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow-md);overflow:hidden; } .voucher-head{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.5rem 1.1rem;background:var(--green-700);color:#fff; } .voucher-tag{font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85} .voucher-brand{font-weight:700;font-size:.8125rem} /* Telo poukážky je na šírku, nie na výšku: suma vľavo, vysvetlenie vpravo. Pri troch poukážkach pod sebou to je jediný spôsob, ako sa zmestia vedľa textu sekcie bez toho, aby ju natiahli. */ .voucher-body{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 .9rem;align-items:center; padding:.8rem 1.1rem;border-bottom:2px dashed var(--line-strong); } .voucher-label{grid-column:2;align-self:end;font-size:.75rem;color:var(--ink-400)} .voucher-amount{ grid-column:1;grid-row:1/3;margin:0; font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem);font-weight:800;letter-spacing:-.04em; color:var(--ink-900);line-height:1.05; } .voucher-amount strong{color:var(--green-600)} .voucher-sub{grid-column:2;align-self:start;margin:0; font-size:.8125rem;color:var(--ink-500);line-height:1.4} .voucher-foot{padding:.5rem 1.1rem;font-size:.6875rem;color:var(--ink-400)} /* Zelená solidarita – tmavší odtieň odlíši vyššiu mieru podpory, ale drží sa rovnakej farebnej rodiny ako prvá poukážka. */ .voucher-solidarita .voucher-head{background:var(--green-700)} .voucher-solidarita .voucher-amount strong{color:var(--green-700)} /* Zelená podnikom – tretia poukážka mieri na firmy, preto najtmavší odtieň radu. Farebná rodina zostáva rovnaká. */ .voucher-podnikom .voucher-head{background:var(--ink-900)} .voucher-podnikom .voucher-amount strong{color:var(--ink-900)} /* ---------- 12. Tmavá sekcia ---------- */ .section-dark{background:var(--ink-900);color:rgba(255,255,255,.78)} .section-dark h2{color:#fff} .section-dark .split-copy > p{color:rgba(255,255,255,.72)} /* V sekcii o autorovi je hlavnou informaciou meno, nie nadpis pod nim, tak si vymenili vahy: kicker je z .8125rem na 1.25rem a nadpis spadol z 2.6rem na 1.6rem. Plati len tu (#o-nas) - ostatne sekcie si drzia vychodzi pomer, kde nadpis vedie a kicker je len navesti. */ /* Portret autora - kruh, ako to mal v plane povodny TODO v index.html. */ .portret{margin:0;max-width:380px;margin-inline:auto} .portret img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover; border-radius:50%;border:1px solid rgba(255,255,255,.14)} #o-nas .kicker{ font-size:1.25rem;letter-spacing:.04em;margin-bottom:.5rem; /* na telefone sa meno lame na dva riadky a zdedene riadkovanie 1.65 ich od seba roztrhne na dva samostatne napisy */ line-height:1.25;text-wrap:balance; } #o-nas h2{ /* letter-spacing z h1,h2,h3 je stiahnute na -.02em kvoli velkym nadpisom; pri 1.6rem uz text stlacuje, tak ho tu vraciame na nulu */ font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem); font-weight:600;letter-spacing:0;color:rgba(255,255,255,.8); } /* Fakty o zazemi presli zo sekcie o autorovi do kontaktu, kde robia oporu formularu. Pozadie je tam svetle, nie tmave, tak nesu farby .contact-card nad sebou - biela karta, tenka linka, zelena ikona. */ .facts{display:grid;gap:.75rem;margin-top:.75rem} .facts li{ display:flex;gap:.9rem;align-items:flex-start; background:#fff;border:1px solid var(--line); border-radius:var(--radius);padding:1rem 1.15rem; transition:border-color .2s var(--ease),box-shadow .2s var(--ease); } .facts li:hover{border-color:var(--green-500);box-shadow:var(--shadow-sm)} .facts svg{width:20px;height:20px;fill:var(--green-600);flex:none;margin-top:2px} .facts strong{display:block;color:var(--ink-900);font-size:.9375rem;margin-bottom:.1rem} .facts span{display:block;font-size:.8125rem;color:var(--ink-500);line-height:1.5} /* ---------- 14. CTA + formulár ---------- */ .cta-section{background:var(--bg-soft);border-top:1px solid var(--line)} .cta-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,5vw,4rem);align-items:start} .cta-copy > p{margin-top:1.1rem;color:var(--ink-500)} .contact-cards{display:grid;gap:.75rem;margin-top:2rem} .contact-card{ display:flex;align-items:center;gap:.9rem;text-decoration:none; background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.15rem; transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease); } .contact-card:hover{border-color:var(--green-500);transform:translateY(-2px);box-shadow:var(--shadow-sm)} .contact-card svg{width:20px;height:20px;fill:var(--green-600);flex:none} .contact-card span{display:block;font-size:.75rem;color:var(--ink-400)} .contact-card strong{display:block;font-size:1rem;color:var(--ink-900)} .responsible{margin-top:1.5rem;font-size:.875rem;color:var(--ink-500)} .responsible strong{color:var(--ink-900)} .lead-form{ background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(1.5rem,3.5vw,2.25rem);box-shadow:var(--shadow-md); } .form-title{font-weight:700;font-size:1.15rem;color:var(--ink-900);margin-bottom:1.5rem} .field{display:block;margin-bottom:1.1rem} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .field label,.field legend{ display:block;font-size:.8125rem;font-weight:600;color:var(--ink-700);margin-bottom:.4rem; } .field label span,.field legend span{color:var(--green-700)} .field input[type=text],.field input[type=tel],.field input[type=email], .field select,.field textarea{ width:100%;padding:.75rem .9rem; background:#FCFDFB;border:1px solid var(--line-strong);border-radius:var(--radius-sm); /* 16px je minimum – pri menšom písme iOS pri kliknutí do poľa priblíži celú stránku */ font-size:1rem;color:var(--ink-900); transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background-color .16s var(--ease); } .field textarea{resize:vertical;min-height:88px} .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235A6753'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .6rem center;background-size:20px;padding-right:2.25rem} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;background:#fff;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(99,163,43,.16); } .field input[aria-invalid="true"],.field select[aria-invalid="true"]{ border-color:#C2412E;box-shadow:0 0 0 3px rgba(194,65,46,.12); } /* skryté polia formulára – .choice má display:flex!important, takže atribút hidden by sám o sebe nestačil */ .lead-form [hidden]{display:none!important} .choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem} /* prepínač domácnosť / firma – vždy dve rovnaké polovice vedľa seba */ .choices-2{grid-template-columns:1fr 1fr} .choices-3{grid-template-columns:1fr 1fr 1fr} /* hlavná ponuka pre firmy dostane celý riadok, inak sa jej dlhý názov láme do troch riadkov a rozťahuje ostatné možnosti vedľa nej */ .choice-wide{grid-column:1/-1} .choice{ display:flex!important;align-items:center;gap:.55rem;margin:0!important; padding:.65rem .85rem;border:1px solid var(--line-strong);border-radius:var(--radius-sm); font-size:.875rem;font-weight:500!important;cursor:pointer;background:#FCFDFB; transition:border-color .16s var(--ease),background-color .16s var(--ease); } .choice:hover{border-color:var(--green-500)} .choice:has(input:checked){border-color:var(--green-600);background:var(--green-050)} .choice input{accent-color:var(--green-600);width:16px;height:16px;flex:none;margin:0} .consent{display:flex;gap:.65rem;align-items:flex-start;font-size:.8125rem;color:var(--ink-500);margin-top:1.25rem;cursor:pointer} .consent input{accent-color:var(--green-600);width:17px;height:17px;flex:none;margin-top:1px} .consent a{color:var(--green-700);text-underline-offset:2px} .err{font-size:.75rem;color:#C2412E;margin-top:.3rem;min-height:0} .err:empty{display:none} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .lead-form .btn-block{margin-top:1.5rem} .form-note{margin-top:.85rem;font-size:.75rem;color:var(--ink-400);text-align:center} .form-status{margin-top:1rem;font-size:.875rem;font-weight:500;text-align:center;border-radius:var(--radius-sm)} .form-status:not(:empty){padding:.85rem 1rem} .form-status.ok{background:var(--green-050);color:var(--green-700)} .form-status.bad{background:#FCEDEA;color:#9E3323} /* ---------- 15. Pätička ---------- */ .site-footer{background:var(--ink-900);color:rgba(255,255,255,.62);padding-top:clamp(3rem,6vw,4.5rem)} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:2.5rem 2rem} /* Rovnaký lockup ako v hlavičke, len vo svetlej variante pre tmavý podklad – preto aj rovnaká výška, nech značka nepôsobí na dvoch miestach rôzne. */ .footer-logo{display:block;height:48px;width:auto;margin-bottom:1.2rem} .footer-brand p{font-size:.875rem;line-height:1.65;max-width:34ch} /* Identifikačné údaje patria k adrese, nie do spodnej lišty – tá potom nie je jeden dlhý reťazec oddelený bodkami. */ .footer-ids{margin-top:.7rem;font-size:.8125rem;line-height:1.7;color:rgba(255,255,255,.38);max-width:30ch} /* Meno kontaktnej osoby stálo v zozname medzi telefónom a e-mailom, hoci nie je odkaz – dostane vlastný riadok s popiskom. */ .footer-person{margin-top:1.1rem;font-size:.9375rem;color:rgba(255,255,255,.75)} .footer-person span{ display:block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase; color:rgba(255,255,255,.38);margin-bottom:.2rem; } .footer-col h3{color:#fff;font-size:.8125rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin-bottom:1rem} .footer-col ul{display:grid;gap:.55rem} .footer-col a{text-decoration:none;font-size:.9375rem;transition:color .15s var(--ease)} .footer-col a:hover{color:var(--green-400)} .footer-contact li{font-size:.9375rem} .site-footer address{margin-top:1.1rem;font-style:normal;font-size:.875rem;line-height:1.6;color:rgba(255,255,255,.48)} .footer-bottom{ margin-top:clamp(2.5rem,5vw,3.5rem);padding-block:1.5rem 1.1rem; border-top:1px solid rgba(255,255,255,.1); display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between; font-size:.8125rem;color:rgba(255,255,255,.52); } .footer-legal{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center} .footer-legal a{text-decoration:none;transition:color .15s var(--ease)} .footer-legal a:hover{color:var(--green-400)} .footer-legal-btn{ background:transparent;border:0;padding:0;color:inherit;font:inherit;cursor:pointer; text-decoration:none;transition:color .15s var(--ease); } .footer-legal-btn:hover{color:var(--green-400)} /* Kredit nemá vlastnú deliacu čiaru – dve tenké linky pod sebou pôsobili ako dve samostatné lišty. Patrí k spodnej lište ako tichý dovetok. */ .footer-credit{ padding-block:0 1.5rem; font-size:.8125rem;color:rgba(255,255,255,.34);text-align:center; } .footer-credit a{ color:rgba(255,255,255,.62);text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2); transition:color .15s var(--ease),border-color .15s var(--ease); } .footer-credit a:hover{color:var(--green-400);border-color:var(--green-400)} /* ---------- 16b. Právne stránky (Ochrana osobných údajov, Cookies) ---------- */ .legal-content h1{margin-bottom:.4rem} .legal-content .updated{color:var(--ink-400);font-size:.875rem;margin-bottom:2.25rem} .legal-content h2{margin-top:2.5rem;margin-bottom:.85rem;font-size:1.35rem} .legal-content > .shell > p{margin-bottom:1.1rem;color:var(--ink-700)} .legal-content ul{margin:0 0 1.1rem;display:grid;gap:.55rem} .legal-content li{position:relative;padding-left:1.4rem;color:var(--ink-700)} .legal-content li::before{ content:"";position:absolute;left:0;top:.6em;width:6px;height:6px; border-radius:50%;background:var(--green-500); } .legal-content a{color:var(--green-700);text-underline-offset:2px} .legal-content code{ background:var(--bg-soft);border:1px solid var(--line);border-radius:5px; padding:.1rem .4rem;font-size:.85em; } /* Tabuľky sú širšie než displej telefónu a posúvajú sa vodorovne vo vlastnom rámčeku. Bez náznaku to ale nie je poznať – tabuľka pôsobí len odrezane. Tieto štyri vrstvy sú overený CSS trik: dve biele „clony" sú pripnuté k obsahu (local), dva tiene k rámčeku (scroll). Kým je čo posúvať, tieň spod clony vykúka; po odrolovaní na doraz ho clona prekryje a zmizne. */ .table-scroll{ overflow-x:auto;margin:1.5rem 0; border:1px solid var(--line);border-radius:var(--radius-sm); background: linear-gradient(to right,var(--bg) 40%,rgba(255,255,255,0)) 0 0/34px 100% no-repeat local, linear-gradient(to left,var(--bg) 40%,rgba(255,255,255,0)) 100% 0/34px 100% no-repeat local, radial-gradient(farthest-side at 0 50%,rgba(17,23,16,.3),rgba(17,23,16,0)) 0 0/20px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%,rgba(17,23,16,.3),rgba(17,23,16,0)) 100% 0/20px 100% no-repeat scroll; } /* hlavička má vlastnú výplň a tieň by pod ňou zanikol – nech presvitá */ .legal-content thead th{background-color:rgba(246,249,242,.85)} .legal-content table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px} .legal-content th,.legal-content td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--line);vertical-align:top} .legal-content tbody tr:last-child td{border-bottom:0} .legal-content th{color:var(--ink-900);font-weight:700;background:var(--bg-soft)} /* ---------- 16c. Cookie súhlas ---------- */ .cookie-banner{ position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:70; max-width:640px;margin-inline:auto; background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); opacity:0;transform:translateY(16px);pointer-events:none; transition:opacity .3s var(--ease),transform .3s var(--ease); } .cookie-banner.is-visible{opacity:1;transform:none;pointer-events:auto} .cookie-banner-inner{padding:clamp(1.15rem,3vw,1.6rem)} .cookie-text p{margin-bottom:.55rem;font-size:.875rem;color:var(--ink-700);line-height:1.55} .cookie-text p:last-child{margin-bottom:0;color:var(--ink-500)} .cookie-text a{color:var(--green-700);text-underline-offset:2px} .cookie-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem} .cookie-settings{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line);display:grid;gap:.85rem} .cookie-settings[hidden]{display:none} /* Nevyhnutné cookies sa vypnúť nedajú, takže tu nie je čo prepínať. Bývalo tu zaškrtávacie políčko so `disabled`, ktoré len vyzeralo pokazene – ponúkalo klik, čo nič neurobil. Teraz je to jasne označený stav, nie ovládač. */ .cookie-item{font-size:.8125rem;color:var(--ink-500);line-height:1.5} .cookie-item-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem} .cookie-item-head strong{color:var(--ink-900);font-size:.875rem} .cookie-always{ font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--green-700);background:var(--green-050); border-radius:999px;padding:.2rem .55rem;white-space:nowrap; } /* ---------- 16d. Späť hore ---------- */ .to-top{ position:fixed;right:clamp(1rem,2.5vw,1.75rem);bottom:clamp(1rem,2.5vw,1.75rem);z-index:65; width:46px;height:46px;padding:0;cursor:pointer; display:grid;place-items:center; background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid var(--line);border-radius:50%;box-shadow:var(--shadow-md); opacity:0;transform:translateY(10px) scale(.92);pointer-events:none; transition:opacity .25s var(--ease),transform .25s var(--ease), background-color .2s var(--ease),border-color .2s var(--ease); } .to-top.is-visible{opacity:1;transform:none;pointer-events:auto} .to-top:hover{background:#fff;border-color:var(--green-500)} .to-top svg{width:22px;height:22px;fill:var(--green-700)} /* kým svieti oznámenie o cookies, tlačidlo by mu na mobile sedelo na texte */ .cookie-banner.is-visible ~ .to-top{opacity:0;pointer-events:none} /* ---------- 17. Reveal on scroll ---------- */ .reveal{opacity:0;transform:translateY(24px) scale(.985);filter:blur(6px)} .reveal.is-visible{ opacity:1;transform:none;filter:blur(0); transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); } /* ---------- 17b. Doplnkové efekty ---------- */ /* Prechod farby na zvýraznenej časti H1. Gradient musí sedieť na tom istom elemente ako text – keby bol na , vnorené spany zdedia priehľadnú výplň, ale pozadie k nim nedosiahne a slová sa vykreslia naprázdno. */ .words em .w > span{ background-image:linear-gradient(100deg,var(--green-700),var(--green-500) 55%,var(--green-400)); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } @supports not ((background-clip:text) or (-webkit-background-clip:text)){ .words em .w > span{-webkit-text-fill-color:currentColor;background-image:none} } /* nadvihnutie riadkov v tmavej sekcii */ .facts li{transition:background-color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)} .facts li:hover{transform:translateX(4px)} /* poukážka sa mierne nakloní */ .voucher{transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .voucher:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:var(--shadow-lg)} @media (prefers-reduced-motion:reduce){ .blob,.card:hover .card-icon::after{animation:none} .words .w > span{animation:none} .reveal{opacity:1;transform:none;filter:none} .btn::before{display:none} } /* ---------- 18. Responzívnosť ---------- */ @media (max-width:1080px){ /* Značka sa roztiahne na celú šírku a tri zoznamy si rozdelia riadok pod ňou. Pri dvoch stĺpcoch ostával Kontakt sám v poslednom riadku a vedľa neho zívala prázdna polovica. */ .footer-grid{grid-template-columns:repeat(3,1fr)} .footer-brand{grid-column:1/-1} } @media (max-width:960px){ /* minmax(0,1fr), nie 1fr: pri obyčajnom 1fr je spodná hranica stĺpca min-content, takže jediné nezalomiteľné tlačidlo (.btn má white-space: nowrap) roztiahne stĺpec nad šírku obalu a text sa oreže o overflow: hidden na .offer. S minmax(0,…) stĺpec nikdy nepresiahne obal. */ .hero-grid,.split,.cta-grid,.offer{grid-template-columns:minmax(0,1fr)} .hero-visual{max-width:520px;width:100%} .split-visual{order:-1;max-width:520px} .section-dark .split-visual{order:0;max-width:none} .brands-row{grid-template-columns:repeat(2,1fr);gap:2rem 1rem} .brand:nth-child(3)::before{display:none} } /* Pod 1200 px sa CTA skráti na „Prepočet zdarma“. Uvoľní to v lište asi 60 px, ktoré potrebuje navigácia, aby sa jej položky nezalomili. Spolu s užšími medzerami je to práve to, čo drží pásmo 1101–1200 px pohodlne v šírke – tesne nad hranicou, kde sa zapína burger. */ @media (max-width:1200px){ .btn-label-full{display:none} .btn-label-short{display:inline} .header-inner{gap:1rem} .nav a{padding-inline:.6rem} } /* Burger sa zapína pri 1100 px, nie až pri 860. S položkami „Pre domácnosti“ a „Pre firmy“ sa vodorovné menu pod túto šírku už nezmestí. 1100, nie 1000: lišta si vo vodorovnom stave pýta 1091 px (logo 144 + menu 514 + telefón s CTA a medzerami 353 + 2× odsadenie 40). Pri 1000 sa teda pásmo 1001–1090 px – iPad na šírku – ocitlo bez burgeru aj bez miesta a lišta pretiekla von zo stránky. Hranica musí sedieť s tou v js/main.js (min-width: 1101px). */ @media (max-width:1100px){ .nav{ position:fixed;inset:76px 0 auto;flex-direction:column;gap:0; background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md); padding:.5rem var(--pad) 1.25rem; transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none; transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s; } .nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto} .nav a{padding:.85rem .25rem;border-radius:0;border-bottom:1px solid var(--line);font-size:1rem} .nav a:hover{background:transparent} .header-inner{gap:.85rem} /* Tu v HTML podstrčí skladanú variantu – značka nad nápisom. Vodorovný lockup by pri 360 px z lišty pretiekol o 24 px, skladaná má pri 40 px výšky len 85 px na šírku a názov značky ostane čitateľný. */ .logo img{height:40px} /* Tlačidlo sa nezalamovalo preto, že by miesto chýbalo – zalamovalo sa preto, že smelo. S white-space:normal si ho flexbox pokojne stlačí na dva riadky aj vtedy, keď by sa na jeden zmestilo. Odmerané: pri 360 px si lišta so skladaným logom pýta menej, než má k dispozícii. */ .header-inner .btn-primary{white-space:nowrap} /* CTA zostáva v sprievodnej lište, hneď vedľa burger tlačidla vpravo. Selektor musí mať rovnakú špecificitu ako .nav + .header-actions vyššie, inak ho to pravidlo prebije (dve triedy proti jednej): margin-left ostane 0 a tlačidlá visia hneď za logom – pri 1000 px až 463 px od pravého okraja lišty. */ .nav + .header-actions{margin-left:auto} .header-actions{gap:.4rem} .header-inner{gap:.6rem} .header-inner .btn-primary{padding:.55rem .7rem;font-size:.8125rem;text-align:center;line-height:1.2} .btn-label-full{display:none} .btn-label-short{display:inline} .burger{display:flex} .nav a::after{display:none} /* Lišta je na telefóne zaplnená presne na doraz, takže flexbox začne položky stláčať – telefón aj burger padli na 36 px, hoci v CSS majú 44. Sú to dve najdôležitejšie tlačidlá v lište (zavolať a otvoriť menu), tak im zakážeme zmenšovať sa; miesto na to uvoľní užšie CTA vyššie. */ .tel-link,.burger{flex:none} } @media (max-width:640px){ /* rozmazané škvrny nechávame, ale statické – prekresľovať blur(70px) pri každom ráme je na slabšom telefóne to najdrahšie na celej stránke */ .blob{animation:none} /* z telefónu ostane len ikona – číslo sa aj tak zopakuje v úvode aj v kontakte, ale plocha musí zostať aspoň 44 px na dotyk prstom */ .tel-link span{display:none} .tel-link{padding:.5rem;min-width:44px;justify-content:center} .tel-link svg{width:20px;height:20px} /* tri rovnaké stĺpce sa na úzkom telefóne stláčajú, "Bytový dom" sa láme */ .choices-3{grid-template-columns:minmax(0,1fr)} /* Odkazy v spodnej lište sú len o výšku riadku, teda ~21 px – na prst primálo. Zvislé odsadenie zväčší dotykovú plochu bez zmeny vzhľadu. */ .footer-legal a,.footer-legal-btn{display:inline-block;padding-block:.6rem} .footer-legal{gap:0 1.25rem} } @media (max-width:560px){ .field-row{grid-template-columns:minmax(0,1fr);gap:0} .hero-cta .btn{width:100%} .footer-grid{grid-template-columns:minmax(0,1fr)} .footer-bottom{flex-direction:column;align-items:flex-start} /* dva stĺpce necháme aj na najmenších displejoch – štyri logá pod sebou by zbytočne natiahli stránku */ .brands-row{gap:1.75rem 1rem} .cookie-banner{left:.6rem;right:.6rem;bottom:.6rem} .cookie-actions{flex-direction:column} /* toto sú na tejto obrazovke jediné dve tlačidlá, nech sa dajú trafiť */ .cookie-actions .btn{width:100%;min-height:44px} } /* Displeje pod 400 px: iPhone SE, staršie Androidy a hlavne telefóny so zapnutým zväčšením zobrazenia – to zúži CSS šírku aj bežnému 360 px telefónu. Do lišty sa štyri prvky vtesnajú len na doraz, tak jej tu uberieme z medzier a dlhým tlačidlám dovolíme zalomiť sa. */ @media (max-width:400px){ .header-inner{gap:.4rem} .header-actions{gap:.3rem} /* .btn má white-space:nowrap, aby sa krátke popisky nikdy netrhali. Pri najdlhších („Chcem ponuku pre firmu“) je to tu na škodu – tlačidlo by presiahlo obal a orezalo sa. */ .btn-lg{white-space:normal;text-align:center;line-height:1.3;padding-inline:1.2rem} } /* Pod 340 px sa logo (118 px, menšie ho manuál značky nedovoľuje), telefón, CTA a burger do lišty nezmestia ani pri nulových medzerách – lišta pretiekla a s ňou vodorovne aj celá stránka. Prednosť dostávajú telefón a burger (rovnaká úvaha ako pri flex:none vyššie); CTA je hneď pod lištou v úvode. */ @media (max-width:340px){ .header-inner .btn-primary{display:none} } @media print{ .site-header,.form-wrap{display:none} body{color:#000} }