/* ========================================================================== WILLROI — design system Brand guidelines v0.2 (locked 2026-07-12). Accent: Deep Green #1F3D35 (jediný digitální akcent). Bronz jen fyzicky. Typo: display serif (Playfair Display) = logo + nadpisy; grotesk (Inter) = data/UI. Nadpisy title-case. Verzálky jen logo WILLROI a eyebrow labely. Referenční tón: jamesedition.com — editorial, vzdušné, tiše prémiové. ========================================================================== */ :root{ --charcoal:#0D0F10; --ink:#14181a; --off:#F7F6F3; --stone:#D7D5CF; --stone-mid:#9a9a92; --green:#1F3D35; /* primary accent, works on light */ --green-br:#3E7A64; /* lifted green for accents on dark */ --line:#e4e2db; --line-dark:#23292d; --serif:"Playfair Display","Didot","Bodoni MT",Georgia,"Times New Roman",serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --header-h:76px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--off);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body.nav-open{overflow:hidden} h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:.01em;line-height:1.08;margin:0} h1{font-size:clamp(2.6rem,6vw,5rem)} h2{font-size:clamp(2rem,4vw,3.1rem)} h3{font-size:1.5rem} p{margin:0 0 1rem} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:1240px;margin:0 auto;padding:0 40px} .eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--green);font-weight:600} .muted{color:var(--stone-mid)} .accent-line{width:56px;height:2px;background:var(--green);border:0;margin:22px 0} .en{font-style:italic;color:var(--stone-mid)} .center{text-align:center} /* anchor scroll-offset under sticky header */ section[id],[data-anchor]{scroll-margin-top:calc(var(--header-h) + 16px)} /* ---------- language visibility ---------- */ /* CS default. Scope to body so the state attribute is never hit by display rules. */ body [data-lang]{display:none} html[data-lang="cs"] body [data-lang="cs"], html[data-lang="en"] body [data-lang="en"]{display:revert} /* ========================================================================== HEADER / NAV ========================================================================== */ header.site{position:sticky;top:0;z-index:100;background:rgba(247,246,243,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} header.site nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)} /* WILLROI wordmark jako CSS mask — přebarví se dle currentColor (světlé/tmavé dle kontextu) */ .logo{display:inline-block;width:130px;height:24px;color:var(--ink);vertical-align:middle; background-color:currentColor;font-size:0; -webkit-mask:url(../img/logo-willroi.svg) no-repeat left center/contain; mask:url(../img/logo-willroi.svg) no-repeat left center/contain} footer.site .logo{width:116px;height:21px} .navlinks{display:flex;gap:32px;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#3a3f41} .navlinks a{position:relative;padding:4px 0;transition:color .2s} .navlinks a:hover,.navlinks a.active{color:var(--green)} .navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--green)} .nav-right{display:flex;align-items:center;gap:22px} .lang{display:inline-flex;gap:6px;font-size:.78rem;letter-spacing:.1em;color:var(--stone-mid);font-family:var(--sans)} .lang button{background:none;border:0;padding:2px 3px;font:inherit;letter-spacing:inherit;color:var(--stone-mid);cursor:pointer} .lang button.active{color:var(--ink);font-weight:600} .lang span{opacity:.5} /* hamburger */ .hamburger{display:none;width:34px;height:34px;border:0;background:none;cursor:pointer;position:relative;z-index:120} .hamburger span{position:absolute;left:6px;right:6px;height:1.5px;background:var(--ink);transition:transform .25s,opacity .2s} .hamburger span:nth-child(1){top:11px} .hamburger span:nth-child(2){top:16px} .hamburger span:nth-child(3){top:21px} body.nav-open .hamburger span:nth-child(1){transform:translateY(5px) rotate(45deg)} body.nav-open .hamburger span:nth-child(2){opacity:0} body.nav-open .hamburger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)} @media(max-width:900px){ .hamburger{display:block} .navlinks{position:fixed;inset:var(--header-h) 0 0 0;flex-direction:column;justify-content:flex-start;gap:0; background:var(--off);padding:24px 40px;transform:translateX(100%);transition:transform .3s ease; font-size:1.15rem;text-transform:none;letter-spacing:.02em;overflow-y:auto} body.nav-open .navlinks{transform:translateX(0)} .navlinks a{padding:18px 0;border-bottom:1px solid var(--line);width:100%} } /* ========================================================================== BUTTONS ========================================================================== */ .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;border:1px solid var(--ink);transition:.2s;cursor:pointer;font-family:var(--sans)} .btn.solid{background:var(--ink);color:var(--off)} .btn.solid:hover{background:var(--green);border-color:var(--green)} .btn.ghost{border-color:#cfcdc5;background:none;color:var(--ink)} .btn.ghost:hover{border-color:var(--green);color:var(--green)} .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px} /* ========================================================================== SECTIONS / GENERIC ========================================================================== */ section{padding:88px 0} .sec-head{max-width:58ch;margin-bottom:48px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .grid3>div{background:var(--off);padding:30px} .stat{font-family:var(--serif);font-size:2.7rem;line-height:1;color:var(--green)} .stat-lbl{font-size:.8rem;color:var(--stone-mid);margin-top:8px} @media(max-width:760px){.grid3{grid-template-columns:1fr}} /* dark block */ .dark{background:var(--charcoal);color:var(--off)} .dark .eyebrow{color:var(--green-br)} .dark .stat{color:var(--green-br)} .dark .muted{color:#8f938f} .dark .accent-line{background:var(--green-br)} .dark .grid3{background:#20262a;border-color:#20262a} .dark .grid3>div{background:var(--ink)} /* pillars */ .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:34px} .pillars h3{font-size:1.15rem;margin-bottom:6px} @media(max-width:760px){.pillars{grid-template-columns:1fr 1fr;gap:26px}} /* media placeholder (until real renders land) */ .media-ph{position:relative;overflow:hidden; background:linear-gradient(180deg,rgba(13,15,16,.05),rgba(13,15,16,.35)),radial-gradient(120% 90% at 70% 20%,#8a9a86 0%,#5f6f5c 40%,#33413a 100%)} .media-ph.alt{background:linear-gradient(180deg,rgba(13,15,16,.08),rgba(13,15,16,.42)),radial-gradient(120% 90% at 30% 25%,#9aa7ad 0%,#5c6a72 45%,#2c363c 100%)} .media-ph .ph-note{position:absolute;left:16px;bottom:14px;color:rgba(247,246,243,.8);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase} /* note / [DOPLNIT] flag */ .note{background:#fbf7ea;border:1px solid #e8dcbd;color:#6b5a2e;font-size:.8rem;padding:4px 9px;border-radius:2px;display:inline-block} /* ========================================================================== FOOTER ========================================================================== */ footer.site{background:var(--charcoal);color:#8f938f;font-size:.8rem;padding:56px 0 40px} footer.site .foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:34px} footer.site .logo{color:var(--off)} footer.site a:hover{color:var(--off)} footer.site .col-h{text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;margin-bottom:10px;color:var(--stone)} footer.site .fine{border-top:1px solid var(--line-dark);padding-top:22px;line-height:1.6} /* ========================================================================== CTA band ========================================================================== */ .cta{background:var(--green);color:var(--off);text-align:center} .cta h2{max-width:22ch;margin:0 auto 8px} .cta .btn.solid{background:var(--off);color:var(--charcoal);border-color:var(--off)} .cta .btn.solid:hover{background:transparent;color:var(--off)} /* ========================================================================== HOMEPAGE ========================================================================== */ .hero-home{position:relative;overflow:hidden;background:var(--charcoal);color:var(--off)} .hero-home .hero-inner{position:relative;z-index:2;padding:calc(var(--header-h) + 20px) 0 40px;max-width:760px} .hero-home .eyebrow{color:var(--green-br)} .hero-home h1{font-size:clamp(2.4rem,5vw,4.3rem)} .hero-home .accent-line{margin:16px 0} .hero-home .hero-sub{max-width:52ch;color:#cfd2cf;margin-bottom:.7rem} .hero-home .hero-bg{position:absolute;inset:0;z-index:1;opacity:.5; background:radial-gradient(90% 120% at 85% 15%,#2c4a40 0%,#16211d 45%,#0d0f10 100%)} .hero-home .btn.solid{background:var(--off);color:var(--charcoal);border-color:var(--off)} .hero-home .btn.solid:hover{background:var(--green-br);border-color:var(--green-br);color:var(--off)} .hero-home .btn.ghost{border-color:#4a534e;color:var(--off)} .hero-home .btn.ghost:hover{border-color:var(--green-br);color:var(--green-br)} .hero-stats{display:flex;gap:44px;margin-top:38px;flex-wrap:wrap} .hero-stats .s{font-family:var(--serif);font-size:2.1rem;color:var(--off)} .hero-stats .l{font-size:.78rem;color:#8f938f;letter-spacing:.04em} .strip{padding:56px 0;border-bottom:1px solid var(--line)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .steps>div{background:var(--off);padding:30px 26px} .steps .n{font-family:var(--serif);color:var(--green-br);font-size:1.2rem;margin-bottom:8px} @media(max-width:760px){.steps{grid-template-columns:1fr}} .curated{display:grid;grid-template-columns:repeat(2,1fr);gap:28px} @media(max-width:820px){.curated{grid-template-columns:1fr}} .card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;transition:.2s} .card:hover{box-shadow:0 26px 60px -34px rgba(13,15,16,.5);transform:translateY(-3px)} .card.flagship{grid-column:1 / -1;flex-direction:row} @media(max-width:820px){.card.flagship{flex-direction:column}} .card .card-media{min-height:220px;flex:1;position:relative} .card.flagship .card-media{min-height:340px;flex:1.1} .card .status{position:absolute;top:16px;left:16px;background:var(--green);color:var(--off);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;font-weight:600;z-index:2} .card .status.prep{background:rgba(13,15,16,.7)} .card-body{padding:28px 30px;flex:1;display:flex;flex-direction:column} .card .loc{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-mid)} .card h3{margin:8px 0 4px} .card .dev{font-size:.86rem;color:var(--stone-mid);margin-bottom:14px} .card .metrics{display:flex;gap:26px;margin:auto 0 16px;flex-wrap:wrap} .card .metrics .m{font-family:var(--serif);font-size:1.5rem;color:var(--green)} .card .metrics .ml{font-size:.72rem;color:var(--stone-mid);display:block} .card .go{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green);font-weight:600} .card.prep{opacity:.72} .card.prep .card-media{background:linear-gradient(180deg,#e9e8e2,#d7d5cf)} .markets{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#20262a;border:1px solid #20262a} .markets>div{background:var(--ink);padding:28px 24px} .markets .mk{font-family:var(--serif);font-size:1.5rem} .markets .st{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin-top:10px;color:var(--green-br)} .markets .st.prep{color:var(--stone-mid)} @media(max-width:760px){.markets{grid-template-columns:1fr 1fr}} .nowr{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} @media(max-width:820px){.nowr{grid-template-columns:1fr}} .quote{border-left:3px solid var(--green);padding:6px 0 6px 24px;font-family:var(--serif);font-size:1.5rem;line-height:1.35} .acc{display:grid;grid-template-columns:1.2fr 1fr;gap:50px} @media(max-width:820px){.acc{grid-template-columns:1fr}} .acc .contact{background:#fff;border:1px solid var(--line);padding:32px} .acc .contact .role{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-mid)} .acc .contact .nm{font-family:var(--serif);font-size:1.6rem;margin:6px 0 2px} /* ========================================================================== PROJECT DETAIL ========================================================================== */ .hero-proj{position:relative;padding:70px 0 90px} .hero-proj .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center} .hero-proj .hero-media{min-height:520px;border-radius:2px} .hero-proj h1 span{color:var(--green)} .hero-proj .sub{max-width:36ch} @media(max-width:900px){.hero-proj .hero-grid{grid-template-columns:1fr}.hero-proj .hero-media{min-height:340px}} .datacard{position:absolute;right:-18px;bottom:44px;width:300px;background:var(--off);border:1px solid var(--line);box-shadow:0 24px 60px -28px rgba(13,15,16,.5);padding:22px 24px;z-index:3} .datacard .lbl{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-mid)} .datacard .big{font-family:var(--serif);font-size:2.6rem;line-height:1;margin:8px 0 2px} .spark{display:flex;align-items:flex-end;gap:6px;height:56px;margin:14px 0 6px} .spark span{flex:1;background:var(--green);opacity:.85;border-radius:1px} .src{font-size:.62rem;color:var(--stone-mid)} @media(max-width:900px){.datacard{position:static;width:auto;margin-top:20px}} table{width:100%;border-collapse:collapse;font-size:.95rem} th,td{text-align:left;padding:16px 14px;border-bottom:1px solid var(--line)} th{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone-mid);font-weight:600} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} tr:hover td{background:#efeee8} .table-scroll{overflow-x:auto} .returns{background:#fff;border:1px solid var(--line)} .returns-top{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--line)} .scenario{padding:28px 26px;border-right:1px solid var(--line)} .scenario:last-child{border-right:0} .scenario.mid{background:#f4f6f4} .scenario .name{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-mid)} .scenario .roi{font-family:var(--serif);font-size:2.9rem;color:var(--green);line-height:1;margin:10px 0 4px} .breakdown{padding:26px} .breakdown .row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed #e7e5de;font-size:.92rem} .breakdown .row.total{border-bottom:0;border-top:2px solid var(--ink);margin-top:6px;padding-top:14px;font-weight:600} .disclaimer{background:var(--charcoal);color:var(--stone);padding:20px 26px;font-size:.82rem;line-height:1.5} .disclaimer b{color:var(--off)} @media(max-width:760px){.returns-top{grid-template-columns:1fr}.scenario{border-right:0;border-bottom:1px solid var(--line)}} .feat{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .feat>div{background:var(--off);padding:26px 28px} .feat .n{font-family:var(--serif);color:var(--green-br);font-size:1.1rem} @media(max-width:760px){.feat{grid-template-columns:1fr}} /* ========================================================================== ROI CALCULATOR ========================================================================== */ .calc{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;border:1px solid var(--line);background:#fff} @media(max-width:820px){.calc{grid-template-columns:1fr}} .calc-controls{padding:34px 32px;background:#efeee8;border-right:1px solid var(--line)} @media(max-width:820px){.calc-controls{border-right:0;border-bottom:1px solid var(--line)}} .calc-out{padding:34px 32px} .field{margin-bottom:24px} .field label{display:flex;justify-content:space-between;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone-mid);margin-bottom:10px} .field label b{color:var(--green);font-family:var(--serif);font-size:1.05rem;text-transform:none;letter-spacing:0} input[type=range]{width:100%;accent-color:var(--green);cursor:pointer} .seg{display:flex;gap:0;border:1px solid var(--line)} .seg button{flex:1;background:#fff;border:0;padding:11px 8px;font:inherit;font-size:.82rem;cursor:pointer;color:var(--stone-mid);border-right:1px solid var(--line)} .seg button:last-child{border-right:0} .seg button.active{background:var(--green);color:var(--off)} .calc-hero .k{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-mid)} .calc-hero .v{font-family:var(--serif);font-size:3rem;color:var(--green);line-height:1;margin:6px 0 2px} .calc-rows .row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed #e7e5de;font-size:.93rem} .calc-rows .row.total{border-bottom:0;border-top:2px solid var(--ink);margin-top:4px;padding-top:13px;font-weight:600} /* ========================================================================== FORMS (qualification + lead capture) ========================================================================== */ .form-card{background:#fff;border:1px solid var(--line);padding:36px 34px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:640px){.form-grid{grid-template-columns:1fr}} .form-full{grid-column:1 / -1} .form-field label{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone-mid);margin-bottom:8px} .form-field input,.form-field select,.form-field textarea{width:100%;padding:13px 14px;border:1px solid var(--line);background:var(--off);font:inherit;font-size:.95rem;color:var(--ink);border-radius:2px} .form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:0;border-color:var(--green)} .form-note{font-size:.82rem;color:var(--stone-mid);margin-top:4px} .form-success{display:none;background:#eef3f0;border:1px solid var(--green-br);color:var(--green);padding:22px 24px;font-size:.95rem} .form-success.show{display:block} .qual-intro{background:#eef3f0;border-left:3px solid var(--green);padding:14px 18px;font-size:.9rem;margin-bottom:26px;color:#2c4a40} /* ========================================================================== IMAGERY — hero fill, card media, gallery ========================================================================== */ .hero-media img.fill,.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero-media{position:relative} .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .gallery .g{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--stone)} .gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .gallery .g:hover img{transform:scale(1.05)} @media(max-width:760px){.gallery{grid-template-columns:1fr 1fr}} /* ========================================================================== CONTRAST FIX — text na tmavých (charcoal) sekcích byl málo čitelný ========================================================================== */ .dark{color:#eceeec} .dark .muted{color:#bfc2be} .dark .stat-lbl{color:#b0b3af} .dark .stat-lbl span[style*="opacity"]{opacity:1 !important;color:#8f938f} .dark .src{color:#9aa09b} .disclaimer{color:#cfd2ce} /* ========================================================================== HERO SLIDER (homepage) — fotky projektů na pozadí, statický text ========================================================================== */ .hero-home{position:relative;overflow:hidden;background:var(--charcoal);color:var(--off);display:flex;align-items:center;min-height:100vh;min-height:100svh} .hero-slider{position:absolute;inset:0;z-index:0} .hero-slider .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease;will-change:opacity} .hero-slider .slide.is-active{opacity:1} .hero-scrim{position:absolute;inset:0;z-index:1; background: linear-gradient(90deg,rgba(13,15,16,.94) 0%,rgba(13,15,16,.86) 34%,rgba(13,15,16,.5) 72%,rgba(13,15,16,.34) 100%), linear-gradient(0deg,rgba(13,15,16,.6) 0%,rgba(13,15,16,.15) 45%)} .hero-home > .wrap{position:relative;z-index:2;width:100%} .hero-caption{position:absolute;right:40px;bottom:32px;z-index:3;display:block;text-align:right;color:var(--off);text-shadow:0 1px 16px rgba(13,15,16,.65),0 1px 3px rgba(13,15,16,.5)} .hero-caption .hc-eyebrow{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green-br);margin-bottom:6px} .hero-caption .hc-name{display:block;font-family:var(--serif);font-size:1.35rem;line-height:1.12;transition:color .2s} .hero-caption .hc-loc{display:block;font-size:.78rem;color:#c9ccc8;letter-spacing:.04em;margin-top:2px} .hero-caption:hover .hc-name{color:var(--green-br)} .hc-dots{display:inline-flex;gap:7px;margin-top:12px} .hc-dots i{width:6px;height:6px;border-radius:50%;background:rgba(247,246,243,.35);transition:background .3s,transform .3s;cursor:pointer} .hc-dots i.on{background:var(--off);transform:scale(1.15)} @media(max-width:640px){ .hero-home .hero-inner{padding-bottom:130px} .hero-caption{right:auto;left:40px;bottom:26px;text-align:left} } /* ========================================================================== LEAD MAGNET — investiční analýza ke stažení (PDF) ========================================================================== */ .leadmagnet{display:grid;grid-template-columns:1.1fr 1fr;gap:52px;align-items:center} @media(max-width:860px){.leadmagnet{grid-template-columns:1fr;gap:34px}} .doc-badge{display:inline-flex;align-items:center;gap:12px;margin-bottom:22px} .doc-badge .ico{width:46px;height:58px;border:1px solid var(--green-br);border-radius:3px;position:relative;flex:none;background:rgba(62,122,100,.08)} .doc-badge .ico::before{content:"PDF";position:absolute;left:0;right:0;bottom:9px;text-align:center;font-size:.56rem;letter-spacing:.12em;color:var(--green-br);font-weight:600} .doc-badge .ico::after{content:"";position:absolute;top:8px;left:9px;right:9px;height:1px;background:var(--green-br);box-shadow:0 5px 0 var(--green-br),0 10px 0 var(--green-br);opacity:.5} .dark .doc-badge .ico{border-color:var(--green-br)} .leadmagnet .form-card{align-self:start} .lm-list{list-style:none;padding:0;margin:14px 0 0} .lm-list li{position:relative;padding:5px 0 5px 22px;font-size:.94rem} .lm-list li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:9px;border:1.5px solid var(--green);border-top:0;border-right:0;transform:rotate(-45deg)} .dark .lm-list li::before{border-color:var(--green-br)} /* ========================================================================== HOMEPAGE — průhledná hlavička nad sliderem, bílá až po scrollu (á la JamesEdition) ========================================================================== */ body.home header.site{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom-color:transparent;backdrop-filter:none;transition:background .3s ease,border-color .3s ease} body.home header.site .logo, body.home header.site .navlinks a, body.home header.site .lang button.active{color:var(--off)} body.home header.site .navlinks{color:rgba(247,246,243,.88)} body.home header.site .lang button{color:rgba(247,246,243,.7)} body.home header.site .lang span{color:rgba(247,246,243,.45)} body.home header.site .hamburger span{background:var(--off)} body.home header.site .navlinks a:hover, body.home header.site .navlinks a.active{color:#fff} body.home header.site .navlinks a.active::after{background:var(--off)} /* scrolled → solid světlá hlavička s tmavým textem */ body.home header.site.scrolled{background:rgba(247,246,243,.92);backdrop-filter:blur(10px);border-bottom-color:var(--line)} body.home header.site.scrolled .logo, body.home header.site.scrolled .navlinks a.active, body.home header.site.scrolled .lang button.active{color:var(--ink)} body.home header.site.scrolled .navlinks{color:#3a3f41} body.home header.site.scrolled .lang button{color:var(--stone-mid)} body.home header.site.scrolled .lang span{color:var(--stone-mid)} body.home header.site.scrolled .hamburger span{background:var(--ink)} body.home header.site.scrolled .navlinks a:hover, body.home header.site.scrolled .navlinks a.active{color:var(--green)} /* mobilní rozbalené menu = vždy tmavý text na světlém panelu */ @media(max-width:900px){ body.home header.site .navlinks a{color:var(--ink)} } /* ========================================================================== PREP-MORE — pruh „Další projekty vybíráme" (ostatní projekty/trhy schované) ========================================================================== */ .prep-more{grid-column:1 / -1;border:1px dashed var(--stone);padding:32px 36px;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap} .prep-more h3{font-size:1.5rem;margin:8px 0 6px} .prep-more .go{color:var(--green);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;white-space:nowrap} .prep-more .go:hover{color:var(--green-br)} @media(max-width:600px){.prep-more{flex-direction:column;align-items:flex-start;gap:16px}}