/* Ananta landing — varianta A (redesign-lyvin), 30. 7. 2026. Skelet podle lyvinproperties.co. Informacni web: fakta prvni, nadpisy jsou cedule. POZOR: tohle je JEDINY stylesheet, ktery index.html na teto branchi nacita. site.css se nedotykame, protoze ji tahaji i /villas/, /apartments/, 404 a /privacy/. */ /* Pismo: General Sans, ne Hanken Grotesk. Spec necha volbu na implementaci; rozhodnuto pro General Sans, protoze ma sirsi a geometrictejsi kresbu, tedy bliz Lyvinovi, a je v repu ve ctyrech pevnych rezech (300-600), z nichz staci tri. Fraunces se nenacita vubec — varianta A je bezserifova. Zadny novy font se nekupuje. */ @font-face{font-family:'General Sans';src:url('/fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'General Sans';src:url('/fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'General Sans';src:url('/fonts/general-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} :root{ --bg:#ffffff; --bg-2:#f5f4f2; /* lomena bila, pasy sekci — Lyvin ma stejny princip */ --ink:#111111; --soft:#6b6b6b; --line:#e4e2de; --dark:#1b1b1b; /* tmave bloky: formular, footer */ --sans:'General Sans',system-ui,-apple-system,sans-serif; --pad:clamp(20px,5vw,72px); --maxw:1560px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} img,video,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} h1,h2,h3{margin:0;font-weight:600;line-height:1.1;letter-spacing:-.01em} p{margin:0 0 1em} p:last-child{margin-bottom:0} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,1px);white-space:nowrap;border:0} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} .section{padding:clamp(64px,8vw,132px) 0} .section--grey{background:var(--bg-2)} .section--dark{background:var(--dark);color:#fff} /* Cedule sekce. Tohle je oprava hlavni priciny z kapitoly 2 specu: na dnesnim landingu neni ani jeden nadpis, ktery by rekl, kde jsi. */ .seclabel{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 clamp(28px,4vw,56px)} .btn{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:14px 26px;border:1px solid var(--ink);transition:background .25s var(--ease),color .25s var(--ease)} .btn:hover{background:var(--ink);color:#fff} .btn--dark{background:var(--ink);color:#fff} .btn--dark:hover{background:#000} .btn--light{border-color:#fff;color:#fff} .btn--light:hover{background:#fff;color:var(--ink)} /* ---------- NAV ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--pad);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .nav__brand img{height:24px;width:auto} .nav__links{display:flex;gap:clamp(18px,2.4vw,38px);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase} .nav__links a{position:relative;padding:4px 0} .nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .3s var(--ease)} .nav__links a:hover::after{right:0} .nav__right{display:flex;align-items:center;gap:16px} .nav__cta{padding:11px 20px} .nav__burger{display:none;width:34px;height:22px;position:relative} /* transition:transform tu drive stala bez jedineho stavu, ktery by transform menil (burger se nikdy neanimuje na X) — mrtva deklarace, Task 22/A1. redesign.js drzi IIFE mobilni navigace uzavrene mimo focus trap (Task 22/C1), takze animovat burger by znamenalo pridat JS logiku mimo povolenou vyjimku; misto toho smazana mrtva CSS. */ .nav__burger span{position:absolute;left:0;right:0;height:1.5px;background:var(--ink)} .nav__burger span:nth-child(1){top:2px} .nav__burger span:nth-child(2){top:10px} .nav__burger span:nth-child(3){top:18px} .navmenu{position:fixed;inset:0;z-index:95;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:20px;padding:0 var(--pad);font-size:26px;font-weight:600;letter-spacing:-.01em;transform:translateY(-100%);transition:transform .45s var(--ease);visibility:hidden} .navmenu.open{transform:none;visibility:visible} .navmenu__close{position:absolute;top:22px;right:var(--pad);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase} .navmenu__cta{margin-top:14px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ink);padding:14px 26px;align-self:flex-start} @media(max-width:900px){ .nav__links{display:none} .nav__cta{display:none} .nav__burger{display:block} } /* Kotvy pod fixni navigaci. Bez tohohle klik na odkaz v menu odscrolluje sekci tak, ze se jeji nadpis schova pod listou, protoze .nav je position:fixed a je vysoka ~61 px. scroll-padding-top na resi vsechny kotvy naraz, vcetne skoku pres klavesnici. */ html{scroll-padding-top:88px} /* ---------- HERO ---------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--media-bg)} .hero__media{position:absolute;inset:0} /* cover, ne contain. Tohle je dekorativni smycka bez controls, divak ji do fullscreenu nedostane, takze ramecek zustava ten nas. Contain tady vyrobil cerny pruh pod videem (klip je 16:9, ramecek vysoky jako viewport). Zakaz coveru plati na video S controls, viz Globalni omezeni. */ .hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s var(--ease);background:var(--media-bg)} .hero__media video.is-active{opacity:1} .hero__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.05) 100%)} .hero__inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(48px,7vh,96px);color:#fff} .hero__head{font-size:clamp(30px,4.4vw,62px);font-weight:600;line-height:1.08;letter-spacing:-.02em;max-width:20ch} .hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,38px)} .hero__ghost{background:rgba(255,255,255,.08)} @media(max-width:640px){ .hero__head{max-width:none} .hero__head br{display:none} } /* Podklad pod medii (letterbox u videa, prazdne misto pod fotkou). Zamerne tmavsi nez --dark, ktera je barva tmavych sekci. Definovano tady, pouzivaji Tasky 3, 4, 7, 8. */ :root{--media-bg:#0d0d0d} /* ---------- CAROUSEL ---------- */ .carousel{padding:clamp(40px,5vw,72px) 0 clamp(32px,4vw,56px);overflow:hidden} .carousel__track{display:flex;gap:clamp(12px,1.6vw,24px);padding:0 var(--pad);scroll-snap-type:x mandatory;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .carousel__track::-webkit-scrollbar{display:none} .carousel__card{position:relative;flex:0 0 min(86%,1080px);scroll-snap-align:center;overflow:hidden;background:var(--media-bg)} .carousel__card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .8s var(--ease)} .carousel__card:hover img{transform:scale(1.02)} .carousel__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.4vw,34px);color:#fff;background:linear-gradient(to top,rgba(0,0,0,.72),transparent)} .carousel__name{display:block;font-size:clamp(17px,1.5vw,22px);font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin-bottom:6px} .carousel__body p{font-size:14px;max-width:52ch;color:rgba(255,255,255,.86)} .carousel__dots{display:flex;justify-content:center;gap:9px;margin-top:clamp(20px,2.4vw,32px)} .carousel__dot{width:8px;height:8px;border-radius:50%;background:rgba(17,17,17,.22);transition:background .25s var(--ease)} .carousel__dot[aria-current="true"]{background:var(--ink)} /* ---------- PROOF ---------- */ .proof__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)} .proof__item{background:var(--bg);padding:clamp(22px,2.6vw,38px);display:flex;flex-direction:column;gap:8px} .proof__role{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)} .proof__name{font-size:clamp(18px,1.6vw,24px);font-weight:600;letter-spacing:-.01em;line-height:1.2} .proof__name a{border-bottom:1px solid transparent;transition:border-color .25s var(--ease)} .proof__name a:hover{border-bottom-color:currentColor} .proof__note{font-size:14px;color:var(--soft)} @media(max-width:1000px){.proof__grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.proof__grid{grid-template-columns:1fr}} /* ---------- PHILOSOPHY ---------- */ .philo__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:start} .philo__media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover} .philo__body{padding-top:4px} .philo__lede{font-size:clamp(18px,1.7vw,23px);line-height:1.45;font-weight:500} .philo__body p{max-width:60ch;color:var(--ink)} .philo__body p+p{color:var(--soft)} @media(max-width:900px){ .philo__grid{grid-template-columns:1fr} .philo__media img{aspect-ratio:16/10} } /* ---------- PROJECTS ---------- */ .projects__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,40px)} .pcard{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)} .pcard__media{position:relative;overflow:hidden;background:var(--media-bg)} .pcard__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease)} .pcard:hover .pcard__media img{transform:scale(1.03)} .pcard__badges{position:absolute;top:14px;left:14px;right:14px;display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0} .pcard__badges li{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);padding:6px 11px;border-radius:100px} .pcard__name{font-size:clamp(20px,1.9vw,28px);font-weight:600;letter-spacing:-.01em;text-transform:uppercase} .pcard__desc{font-size:15px;color:var(--soft);margin:6px 0 0} .pcard__cta{display:inline-block;margin-top:12px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px} @media(max-width:820px){.projects__grid{grid-template-columns:1fr}} /* ---------- UPDATES ---------- */ .updates__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,40px);align-items:start} .uitem__player{position:relative;display:block;width:100%;overflow:hidden;background:var(--media-bg)} .uitem__poster{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .8s var(--ease),opacity .3s} .uitem__player:hover .uitem__poster{transform:scale(1.02);opacity:.9} .uitem__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center} .uitem__play svg{width:24px;height:24px;margin-left:3px} .uitem__meta{margin-top:16px} .uitem__date{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)} .uitem__title{font-size:clamp(18px,1.6vw,24px);font-weight:600;margin:8px 0 6px} .uitem__text{font-size:15px;color:var(--soft);max-width:56ch} /* Video az po kliknuti. NIKDY object-fit:cover — ve fullscreenu neni ramecek nutne 16:9 a cover by orizl kraje (mizelo by logo ANANTA vpravo dole). Chyba z 29. 7. 2026. */ .news__video{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000} .news__video:fullscreen{aspect-ratio:auto;height:100%;object-fit:contain} .updates__cta{margin-top:clamp(28px,3.4vw,48px)} @media(max-width:820px){.updates__grid{grid-template-columns:1fr}} /* .updates__grid--single — stejna vada jako u .projects__grid--single (Task 22/A7): .updates__grid je na desktopu repeat(2,1fr), jeden
tedy skonci na pul sirky (629px na 1440, zmereno) s prazdnym druhym sloupcem. Stejny princip (strop sirky, ne stretch na celou radku). Nejdriv zkouseno 640px — na 1440px jen 11px pod polovinou rastru, presne ta past, kterou uz reisl Task 18 (620px tam bylo o 9px mensi a vypadalo "k nerozeznani" od chybejici druhe karty). 480px, stejna hodnota jako .projects__grid--single, na screenshotu citelne cte jako zamerny mensi blok a text (nadpis + odstavec do 56ch) se nezalamuje krecovite — overeno vizualne na 1440px. */ .updates__grid--single{grid-template-columns:min(480px,100%)} /* ---------- INVESTMENT ---------- */ .kpis{list-style:none;margin:0 0 clamp(40px,5vw,72px);padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)} .kpi{background:var(--bg);padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:10px} .kpi__num{font-size:clamp(34px,4.4vw,64px);font-weight:600;line-height:1;letter-spacing:-.03em} .kpi__num small{font-size:.44em;font-weight:500;margin-left:2px} .kpi__cap{font-size:13px;letter-spacing:.04em;color:var(--soft)} .faq{border-top:1px solid var(--line);max-width:960px} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-size:clamp(16px,1.3vw,19px);font-weight:500} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:400;color:var(--soft)} .faq details[open] summary::after{content:"\2212"} .faq details p{padding:0 40px 22px 0;margin:0;color:var(--soft);max-width:78ch} @media(max-width:820px){.kpis{grid-template-columns:1fr}} /* ---------- LEAD ---------- */ /* .seclabel je definovana v Tasku 1 s color:var(--ink), tady je na tmavem pozadi. */ .seclabel--onDark{color:rgba(255,255,255,.5)} .lead__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.4vw,80px);align-items:start} .lead__head{font-size:clamp(26px,3vw,44px);font-weight:600;line-height:1.12;letter-spacing:-.02em;max-width:22ch} .lead__sub{margin-top:18px;color:rgba(255,255,255,.72);max-width:52ch} .lead__lines{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin-top:clamp(24px,3vw,40px);font-size:15px} .lead__lines span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);padding-top:4px} /* overflow-wrap:anywhere — bez toho je e-mail (jeden neprerusitelny retezec) min-content sloupce "1fr", ktery ho na 320px nuti sirsi nez dostupne misto a strhne s sebou cely radek i .lead__intro (grid item bez explicitniho min-width se nesmrsti pod min-content sveho obsahu). Zjisteno merenim v Tasku 13, ne jen vizualne: pred touto opravou document.documentElement.scrollWidth byl 366 na innerWidth 320. */ .lead__lines a{border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:2px;overflow-wrap:anywhere;transition:border-color .25s var(--ease)} .lead__lines a:hover{border-bottom-color:#fff} /* overflow-x:auto — Cloudflare Turnstile (lead-capture.js:43, render bez size:"flexible") vklada widget o pevne sirce, ktery na 320px nema kam se vejit (leadbox po vlastnim paddingu ma jen ~236px). .leadbox je grid item .lead__grid; bez teto deklarace jeho automaticka min-sirka pocita s min-content potomku (tedy s pevnou sirkou widgetu) a roztahne cely radek. overflow-x jinou nez visible tohle podle specu CSS Grid vynuluje a zaroven nechava uzivateli moznost si sirsi widget na uzkem mobilu doscrollovat misto aby se neviditelne oriznul. lead-capture.js se needituje, tohle je jediny povoleny zasah.*/ .leadbox{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);padding:clamp(22px,2.6vw,40px);overflow-x:auto} .leadform{display:flex;flex-direction:column} .leadform label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:7px} .leadform input[type="text"],.leadform input[type="email"]{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;font:inherit;padding:13px 15px;margin-bottom:18px;transition:border-color .25s var(--ease)} .leadform input[type="text"]:focus,.leadform input[type="email"]:focus{outline:none;border-color:rgba(255,255,255,.6)} /* !important smazano (Task 22/A5) — site.css se na strankach s redesign.css vubec nenacita, takze tu nebylo proti cemu bojovat; petkrat opakovane !important byl jen sum. Specificita jedne tridy je dost, zadne jine pravidlo v tomto souboru .hp-field nepretezuje. */ .hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .leadform .leadform__check{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.5;letter-spacing:0;text-transform:none;font-weight:400;color:rgba(255,255,255,.7);margin-bottom:14px} .leadform .leadform__check input{margin-top:3px;flex:0 0 auto} .leadform .leadform__check a{border-bottom:1px solid currentColor} /* .45 tady puvodne nesedelo WCAG AA pro maly text — stejny nalez jako u .foot__legal p v Tasku 12 (tam zmereno 4.47:1 na #1b1b1b, opraveno na .55). Tady na efektivnim pozadi .leadboxu (rgba(255,255,255,.05) nad #1b1b1b) vyslo pri mereni v Tasku 13 jeste hur, 4.24:1 — .45 v Tasku 10 review jen potvrdilo, ze se vykresluje jak je napsano v CSS, ne ze je to citelne. Stejna oprava na .55, znovu zmereno, viz report Tasku 13. */ .leadform .leadform__check em{font-style:normal;color:rgba(255,255,255,.55)} .leadform__error{color:#ff9d8a;font-size:13.5px;margin:4px 0 12px} .leadform__send{margin-top:8px;background:#fff;color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:16px 24px;transition:opacity .25s var(--ease)} .leadform__send:hover{opacity:.86} .leadform__send:disabled{opacity:.5;cursor:default} .leadbox__tick{font-size:32px;margin:0 0 10px} .leadbox__done h3{font-size:clamp(19px,1.7vw,25px);margin-bottom:10px} .leadbox__done p{color:rgba(255,255,255,.72)} .leadbox__pack{display:block;margin-top:12px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:5px} @media(max-width:900px){.lead__grid{grid-template-columns:1fr}} /* ---------- PARTNER ---------- */ .partner__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px);align-items:center} .partner__head{font-size:clamp(24px,2.6vw,38px);font-weight:600;line-height:1.14;letter-spacing:-.02em;margin-bottom:16px;max-width:20ch} .partner__body p{color:var(--soft);max-width:56ch;margin-bottom:28px} .partner__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} @media(max-width:900px){ .partner__grid{grid-template-columns:1fr} .partner__media{order:-1} } /* ---------- FOOTER ---------- */ .foot{background:var(--dark);color:#fff;padding:clamp(48px,6vw,88px) 0 0} .foot__grid{display:grid;grid-template-columns:1.1fr .9fr 1.3fr;gap:clamp(28px,4vw,72px);padding-bottom:clamp(40px,5vw,72px)} .foot__col{display:flex;flex-direction:column;gap:12px;align-items:flex-start} .foot__brand{height:26px;width:auto;margin-bottom:6px} .foot__addr{font-size:14px;color:rgba(255,255,255,.6);line-height:1.6} .foot__ig{margin-top:6px;color:rgba(255,255,255,.7);transition:color .25s var(--ease)} .foot__ig:hover{color:#fff} .foot__label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 4px} /* :not(.foot__ig) — bez toho by ikona Instagramu dostala podtrzeni jako textovy odkaz. */ .foot__col a:not(.foot__ig){font-size:14.5px;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px;transition:border-color .25s var(--ease)} .foot__col a:not(.foot__ig):hover{border-bottom-color:#fff} .foot__legal p{font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.55);max-width:62ch} /* Endorsement. Padding kolem TPRC drzi ochrannou zonu z logomanualu (vyska verzalek jednoho radku, tj. pri sirce 200 px cca 20 px, s rezervou 32 px). */ .endorse{border-top:1px solid rgba(255,255,255,.13);padding:clamp(32px,4vw,56px) 0 clamp(36px,4.4vw,60px)} .endorse__label{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:26px} .endorse__tprc{width:200px;height:auto;margin-bottom:32px} .endorse__row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px;padding-top:28px;border-top:1px solid rgba(255,255,255,.09)} .endorse__row .endorse__label{flex:0 0 100%;margin-bottom:0} .endorse__row img{height:18px;width:auto;opacity:.72} @media(max-width:900px){ .foot__grid{grid-template-columns:1fr} .endorse__tprc{width:170px} } @media(max-width:400px){ /* Logomanual: pod 150 px se logo nepouziva vubec, "nezmensovat na silu". */ .endorse__tprc{width:150px} } /* ---------- PROJECT PAGES ---------- */ /* Spolecny zaklad pro /villas/ a /apartments/. Sekce se doplnuji v Tascich 16-21. Podstranky sdileji cely design systém s landingem, protoze o to v zadani jde. */ .proj{padding-top:0} /* HERO — .hero, .hero__media, .hero__scrim, .hero__inner, .hero__head, .hero__actions jsou beze zmeny z Tasku 2/landingu (viz komentar tam, proc je na tomhle videu object-fit:cover spravne). Tady jen badge pilulky, prevzate 1:1 z .pcard__badges (Task 9), a lokalita pod nadpisem. */ .proj__badges{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0} .proj__badges li{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);padding:7px 13px;border-radius:100px} .proj__sub{margin-top:14px;font-size:clamp(15px,1.3vw,18px);color:rgba(255,255,255,.8)} /* Vyska hlavni navigace jako tokeny, ne magicke cislo na trech mistech. Driv byly 82px/61px/150px zapsane samostatne (.proj__anchors top, jeho @media(max-width:900px) varianta, .proj .section scroll-margin-top), provazane jen komentarem — a uz to jednou rozjelo (komentar u html{scroll-padding-top:88px} v Tasku 1 tvrdil, ze .nav je "~61px" vzdy, coz plati jen pod 900px). Hodnoty jsou zmerene (getBoundingClientRect), ne odhadnute: .nav je 82px vysoka nad 900px (.nav__links + .btn.nav__cta zvysi radek paddingem) a 61px pod 900px (oboji zmizi, stejny zlom jako u .nav v Tasku 1). .proj__anchors je 51px na obou sirkach. --nav-h se pro top pretezuje jen lokalne na .proj__anchors pod 900px (ne na :root), schvalne: .proj .section scroll-margin-top pocita s --nav-h z :root (vzdy 82, desktopovy/horsi pripad), presne jako pred timhle refaktorem, kdy byla napevno 150px na obou sirkach (na mobilu jen vetsi rezerva, nikdy prekryti). Kdyby --nav-h padalo na 61 globalne pres :root media query, scroll-margin by na mobilu spadla na 129px — porusilo by to “stejne efektivni hodnoty jako pred zmenou”, ktere tenhle refaktor slibuje. */ :root{--nav-h:82px;--anchors-h:51px} /* KOTEVNI NAVIGACE — Lyvinuv tah, druha lista pod herem, ktera se pri scrollu drzi hned pod hlavni navigaci a orientuje po dlouhe projektove strance. top:var(--nav-h) drzi listu presne pod .nav pri obou sirkach. Vodorovne scrollovatelna, protoze sest polozek se na 390px nevejde vedle sebe. */ .proj__anchors{position:sticky;top:var(--nav-h);z-index:80;display:flex;gap:clamp(18px,2.2vw,34px);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:15px var(--pad);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} .proj__anchors::-webkit-scrollbar{display:none} .proj__anchors a{flex:0 0 auto;color:var(--soft);transition:color .25s var(--ease)} .proj__anchors a:hover{color:var(--ink)} @media(max-width:900px){ .proj__anchors{--nav-h:61px} } /* Dve listy nad obsahem: hlavni .nav (fixed) plus tahle .proj__anchors (sticky, hned pod ni). html{scroll-padding-top:88px} z Tasku 1 pocita jen s jednou listou — na podstrance by kotva skoncila schovana pod .proj__anchors. Reseno scroll-margin-top primo na sekcich podstranky (.proj .section), NE zvysenim globalniho scroll-padding-top, protoze to by zmenilo chovani kotev na landingu, ktery druhou listu nema a je hotovy/odrecenzovany. calc(--nav-h + --anchors-h + 17): 82+51+17=150, konstantne na obou sirkach (--nav-h tady vzdy cte hodnotu z :root, viz komentar vyse), presne jako pred refaktorem. */ .proj .section{scroll-margin-top:calc(var(--nav-h) + var(--anchors-h) + 17px)} /* ---------- OVERVIEW ---------- */ /* Sest faktu ve vlasove mrizce, stejny princip jako .proof__grid (Task 5): gap:1px nad barevnym pozadim (--line) dela jednolitou hranici mezi bunkami. */ .proj__facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)} .proj__facts li{background:var(--bg);padding:clamp(22px,2.6vw,38px);display:flex;flex-direction:column;gap:8px} .proj__fact-k{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)} .proj__fact-v{font-size:clamp(18px,1.6vw,23px);font-weight:600;letter-spacing:-.01em;line-height:1.2} @media(max-width:1000px){.proj__facts{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.proj__facts{grid-template-columns:1fr}} /* ---------- DESIGN & LOCATION ---------- */ /* Obe sekce znovupouzivaji .philo__grid/.philo__lede z Tasku 5 beze zmeny — presne to same dvousloupcove rozlozeni jako "The Ananta philosophy" na landingu, zadny novy layout primitiv. Design ma dva podnadpisy (dve puvodni .panel sekce spojene pod jednu cedule DESIGN), Location jeden. .philo__body p+p{color:var(--soft)} (Task 5) pocitala jen s JEDNIM .philo__lede na sekci — druhy .philo__lede v Design by jinak taky zesedl na --soft, protoze taky nasleduje po

(tomu selektoru je jedno na tride, jen na poradi sourozencu). Specificejsi selektor tady drzi VSECHNY .philo__lede na --ink bez ohledu na poradi, na landingu je to no-op (tam uz --ink je, tenhle pripad tam nenastava). */ .philo__body .philo__lede{color:var(--ink)} /* ---------- INVEST (VILLAS) ---------- */ /* Stejna jmena jako ve stare site.css (.invest__head/.invest__lead) a taky stejna jako pořad pouzivany stary markup na /apartments/ (Task 15 tam prepnul jen stylesheet, HTML v sekci Investment zustalo stare — viz apartments/index.html:121-122). Bez scope by tahle pravidla tise doteklala i /apartments/, presne ten druh chyby, kvuli kteremu je site.css chraneny jako nedotknutelny. Scopovano na .proj__invest, ktera existuje jen na /villas/ (fix review nalezu Tasku 18, kolo 1). Podnadpis + odstavec mezi cedulí INVESTMENT a .kpis, hodnoty prevzate z .partner__head (h3+lead pred obsahem v plne sekci, uz existujici vzor v tomhle souboru). */ .proj__invest .invest__head{font-size:clamp(24px,2.6vw,38px);font-weight:600;line-height:1.14;letter-spacing:-.02em;max-width:28ch} .proj__invest .invest__lead{margin:16px 0 clamp(32px,4vw,56px);color:var(--soft);max-width:60ch} /* ---------- GALLERY ---------- */ /* .gallery__grid ze stareho site.css uz neexistuje (jina stranka, jiny system), tohle je cerstva definice pro redesign.css. Obrazky jsou 1200x700 (pomer 12:7), aspect-ratio odpovida presne originalu, cover tedy nic neorizne. */ .gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)} /* height:100% vedle aspect-ratio je redundantni (Task 22/A4, nalez review Tasku 17): rodic negeneruje definovanou vysku, takze se procentualni vyska nema od ceho odvodit a aspect-ratio uz samo pocita vysku z sirky. */ .gallery__grid img{width:100%;aspect-ratio:12/7;object-fit:cover} @media(max-width:1000px){.gallery__grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.gallery__grid{grid-template-columns:1fr}} /* ---------- PROJECTS GRID — SINGLE CARD ---------- */ /* Fix review nalezu Tasku 18, kolo 1: .projects__grid je repeat(2,1fr), takze jedina karta ("The other project" na /villas/) skoncila na pul sirky dvousloupcoveho rastru s prazdnym mistem vpravo — na 1440px to cte jako chybejici druha karta, ne jako zamerny whitespace. Misto stretche na plnou sirku (to by udelalo obrazek 4:3 obrovsky, presne to brief puvodne varoval) stropujeme sirku gridu na jeden rozumny sloupec a necháváme zarovnani vlevo — stejny princip jako .faq{max-width:960px} o par radku vys v tomhle souboru, ktery taky jen omezuje sirku bloku a nechava zbytek radku prazdny. Puvodni navrh 620px (odpovida ~sirce jedne karty v beznem dvousloupcovem .projects__grid) jsem overil v prohlizeci na 1440px a nechal screenshotem porovnat s defaultnim chovanim (629px, karta na pul sirky beze zmeny) — vizualne prakticky k nerozeznani (rozdil 9px), takze by fix nic nezmenil na tom, co recenze oznacila jako problem. Ctenar oko rozpozna "tohle je pulka dvousloupceho rastru, neco chybi" presne proto, ze karta ma stejnou sirku, jakou by mela v paru. Zvolil jsem misto toho 480px — citelne odlisne od "pulky rastru", cte se jako zamerne mensi samostatny teaser blok, ne jako osirely dvojnik. Overeno v prohlizeci na 1440/1024/820/390/320px (`getBoundingClientRect`, scrollWidth===innerWidth) — na uzsich sirkach uz min(480px,100%) prirozene zmensuje kartu na dostupnou sirku stejne jako predtim, zadna regrese pod 820px, viz report Tasku 18 pro namerene hodnoty. */ .projects__grid--single{grid-template-columns:min(480px,100%)} /* ---------- OVERVIEW — DEVET FAKTU (CANGGU) ---------- */ /* .proj__facts je sdileny s /villas/ (6 faktu, cistych na vsech treti breakpointech: 3/2/1 sloupce, 6 je delitelne vsemi). Canggu ma po Tasku 23 devet faktu — liche cislo, delitelne jen 1 a 3. Puvodni tabletovy mezikrok (repeat(2,1fr) do 1000px, viz OVERVIEW blok vyse) by u devate polozky nechal posledni radku s jednou bunkou a druhou prazdnou — presne ta dira, ktere se ma predejit (viz apartments/index.html komentar a task-23-report.md). Modifikator je scopovany jen na `.proj__facts--nine` (pouzity jen v apartments/index.html), aby .proj__facts default beze zmeny na /villas/ zustalo nedotcene. Drzi 3 sloupce az do 560px (9/3=3 cistych radek), pak spadne na 1 (existujici pravidlo pro .proj__facts uz 1fr na <=560px pokryva — tady prepsano jen pro jistotu, kdyby specificita/poradi selektoru zavisela na budoucim presunu tohohle bloku). */ .proj__facts--nine{grid-template-columns:repeat(3,1fr)} @media(max-width:1000px){.proj__facts--nine{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.proj__facts--nine{grid-template-columns:1fr}} /* ---------- INVESTMENT — POZNAMKA K PROJEKCI (CANGGU) ---------- */ /* Male, --soft, pod .kpis — patri k cislum, ne vedle nich (brief). Zneni doslova z Honzova HTML souboru i PDF, viz task-23-report.md. */ .invest__note{font-size:13px;line-height:1.55;color:var(--soft);max-width:64ch;margin:0 0 clamp(40px,5vw,72px)} /* ---------- INVESTMENT — VRSTVA DUKAZU "WHY THE NUMBERS HOLD" (CANGGU) ---------- */ /* Stejny princip jako .faq (hairline mezi polozkami, border-top nad prvni). Zdroj pod tvrzenim recykluje typografii .proj__fact-k/.kpi__cap (11px, 600, .14em letter-spacing, uppercase, --soft) — zadna nova velikost ani vaha pisma. */ .invest__subhead{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 clamp(20px,2.4vw,32px)} .evidence{list-style:none;margin:0 0 clamp(32px,4vw,56px);padding:0;border-top:1px solid var(--line);max-width:960px} .evidence li{border-bottom:1px solid var(--line);padding:20px 0} .evidence__claim{margin:0;font-size:clamp(16px,1.3vw,18px);line-height:1.5;max-width:78ch} .evidence__claim strong{font-weight:600} .evidence__src{display:block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)} /* ---------- INVESTMENT — DATA SOURCES A ROI ONE-PAGER (CANGGU) ---------- */ /* Poctivy seznam zdroju dat, zadna loga medii ani "featured in" (LOGIKA_prezentace_dat.md). Odkaz na PDF ma stejnou vahu jako .evidence__claim odkazy jinde v systemu — podtrzeny text v --ink, zadna nova barva. */ .invest__sources{margin:0 0 16px;font-size:13px;color:var(--soft)} .invest__sources-label{display:inline-block;margin-right:10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)} .invest__pack{margin:0 0 clamp(40px,5vw,72px);font-size:15px;color:var(--soft)} .invest__pack a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px} /* ---------- SERVICE PAGES — NAV & FOOTER (PRIVACY & 404, TASK 24) ---------- */ /* /privacy/ a 404.html nejsou soucast prodejniho funnelu (Task 24 brief), takze nedostavaji plnou .nav/.navmenu (kotvy na landing sekce + "Get pricing" CTA by na strance bez #enquire byly mrtve odkazy) ani plny .foot (investicni pravni dolozka o leasingu/ROI nepatri pod GDPR dokument ani pod chybovou stranku). Misto toho lehky svcnav/svcfoot — stejne tokeny a typografie, jen bez obsahu, ktery na servisni strance nedava smysl. .nav samotna (fixed lista, blur, border) se znovupouziva beze zmeny, jen s jinym obsahem nez .nav__links/.nav__cta. */ .svcnav__back{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);transition:color .25s var(--ease)} .svcnav__back:hover{color:var(--ink)} .svcfoot{background:var(--dark);color:#fff;padding:clamp(40px,5vw,64px) 0} .svcfoot__inner{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px} .svcfoot__brand{height:22px;width:auto} .svcfoot__line{font-size:13px;color:rgba(255,255,255,.6)} .svcfoot__line a{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;transition:border-color .25s var(--ease)} .svcfoot__line a:hover{border-bottom-color:#fff} /* ---------- 404 ---------- */ /* Puvodni site.css mela .btn svg{width:15px;height:15px} — bez ekvivalentu tady by nestylovane v .btn (jen viewBox, zadna width/height) spadlo na UA default 300x150 a rozbilo layout i vodorovny scroll. redesign.css do ted zadnou svg ikonu v .btn nemel (ostatni stranky pouzivaji textovou sipku → v aria-hidden spanu, Task 22/A3) — tohle je jediny vyskyt, proto pravidlo tady, ne u .btn nahore. */ .btn svg{width:15px;height:15px} /* Cloudflare Pages servíruje tenhle soubor se statusem 404 na jakoukoli cestu, ktera neexistuje (konvence: 404.html v rootu). Bez nej vracelo Pages homepage se statusem 200, takze slo zaindexovat nekonecne vymyslenych URL. Puvodne komentar primo ve