/* ========================================================================== TOKENS — jediný zdroj pravdy pro hodnoty z Figma návrhu (frame rb_quest 0:3) V base.css a sections.css nesmí být žádná hardcoded hex/px hodnota. ========================================================================== */ :root { /* --- Fluidní škálování ------------------------------------------------ Návrh je kreslený na 1512 px. Místo desítek nezávislých clamp() používáme jeden proporční faktor: --s je délka odpovídající 1 designovému pixelu. Každý rozměr z Figmy se pak píše jako calc(<číslo z Figmy> * var(--s)). Nad tím je ještě jeden korekční koeficient --scale-down, kterým se dá celý web najednou zjemnit, aniž by se sáhlo na jedinou hodnotu z návrhu. 1280 px viewport -> --s = 0.728 (layout se zamkne, níž se scrolluje) 1512 px viewport -> --s = 0.860 (návrh proporčně zmenšený o 14 %) 1920 px viewport -> --s = 1.092 (návrh proporčně zvětšený) -------------------------------------------------------------------- */ --design-width: 1512; /* Pod 1280 px se přestává škálovat podle šířky (jinak by text zdrobněl pod čitelnou mez) a layout místo toho přeskládá mřížky — viz breakpointy v sections.css. */ --viewport-clamped: clamp(1280px, 100vw, 1920px); /* Celkové zjemnění měřítka — návrh působil na běžném notebooku předimenzovaně. Jedna hodnota zmenší proporčně úplně všechno (typografii, karty i rozestupy). */ --scale-down: 0.86; --s: calc(var(--viewport-clamped) / var(--design-width) * var(--scale-down)); /* --- Barvy ----------------------------------------------------------- */ --color-ink: #1f2427; /* pozadí hero / formuláře / FAQ */ --color-cream: #f6f4f1; /* pozadí stránky a světlých sekcí */ --color-yellow: #f8e416; /* brand akcent — H1, nav, tlačítka */ --color-navy: #1f2e47; /* text uvnitř tlačítek */ --color-heading: #2b2d33; /* nadpisy sekcí, titulky karet */ --color-white: #ffffff; --color-black: #000000; /* body text ve světlých kartách */ --color-hero-subtitle: #eef2f9; --color-card-plum: #3b3647; /* karta „Jsi jeden z 10?“ */ --color-partners-bar: #f6f9ff; /* pilulka Partneři */ --color-placeholder: #515978; /* Figma proměnná --title-secondary */ --color-faq-item: #0f100c; --color-faq-border: #242521; --color-video-placeholder: #d9d9d9; --color-video-scrim: rgba(31, 36, 39, 0.35); /* překryv nad náhledem videa */ --color-overlay: rgba(0, 0, 0, 0.55); --color-submit-frame: rgba(255, 255, 255, 0.22); --color-hairline: rgba(255, 255, 255, 0.1); /* dělicí linka v patičce */ --color-footer-muted: rgba(246, 244, 241, 0.6); /* drobný text patičky */ /* Chybové stavy formuláře. Dvě červené schválně: --color-error má kontrast 3,5:1 na tmavém pozadí sekce i 4,5:1 na bílém poli, takže funguje jako obrys kolem obojího. Na text je ale málo světlá, proto --color-error-text (5,7:1 na --color-ink). */ --color-error: #e03131; --color-error-text: #ff6b6b; /* --- Typografie ------------------------------------------------------- */ /* Amalia nese celý web — návrh ji používá i na běžný UI text (FAQ otázka je Amalia Bold 25 px), ne jen na displejové nadpisy. Soubory jsou lokální, viz @font-face v base.css; Google Fonts se odsud nenačítá nic. Tři tokeny zůstávají oddělené, aby šlo formuláři nebo UI dát jiný řez, aniž se sáhne na nadpisy. */ --font-display: "Amalia", "Segoe UI", system-ui, sans-serif; --font-ui: "Amalia", "Segoe UI", system-ui, sans-serif; --font-form: "Amalia", "Segoe UI", system-ui, sans-serif; /* Velikosti jsou bezrozměrná čísla z Figmy — násobí se přes --s. */ --fs-h1: 98; /* „Nebyla by brigáda…“ (Black) */ --fs-h2-carousel: 64; /* „Budeš jedním z nás?“ */ --fs-h2: 48; /* ostatní nadpisy sekcí */ --fs-card-title-lg: 42; /* titulky velkých karet */ --fs-eyebrow: 41; /* „side Quest“ nad H1 */ --fs-step-number: 32; /* 01/02/03 + „Jana, 19“ */ --fs-faq: 25; /* FAQ otázka */ --fs-card-title-sm: 22; /* titulky karet plánu hry */ --fs-body: 20; /* body text + placeholdery */ --fs-cta: 16; /* nav + hlavní CTA */ --fs-consent: 15; /* labely checkboxů */ --fs-cta-sm: 14; /* malá CTA „Zapoj se“ / „Odeslat“ */ /* Pozor: čísla jsou v měřítku návrhu, násobí se přes --s (0,86 na 1512 px). 16 tedy vykreslí ~13,8 px, ne 16 px. */ --fs-footer: 16; /* odkazy a copyright v patičce */ --fs-legal: 14; /* provozovatel, text cookie lišty */ --fs-cookie-title: 17; /* nadpis cookie lišty */ --fs-error: 15; /* hláška pod polem formuláře */ /* Právní podstránky (zásady, pravidla) — viz styles/legal.css */ --fs-legal-h1: 56; --fs-legal-h2: 30; --fs-legal-h3: 22; --fs-legal-body: 20; /* stejně velký jako body text landingu */ --fw-regular: 400; --fw-bold: 700; --fw-black: 900; --lh-tight: 1; /* H1 — v návrhu leading-none */ --lh-heading: 1.2; --lh-body: normal; /* Prostrkání v polích formuláře. Původní -0,4px kompenzovalo DM Sans, který se už nepoužívá — Amalia sedí bez korekce. */ --ls-form: normal; /* --- Radiusy (designové px) ------------------------------------------- */ --radius-button: 10; --radius-field: 12; --radius-submit-frame: 17; --radius-pill: 20; /* pilulka Partneři, rámeček videa */ --radius-card: 30; --radius-testimonial: 40; --radius-section-top: 92; /* horní rohy krémové sekce */ --radius-checkbox: 6; --radius-checkbox-mark: 3; /* žlutý čtvereček uvnitř checkboxu */ --radius-option: 8; /* položka vlastního dropdownu */ /* --- Stíny ------------------------------------------------------------ */ --shadow-partners: 0 25px 52.2px -22px rgba(41, 141, 229, 0.41); --shadow-dropdown: 0 18px 44px -14px rgba(0, 0, 0, 0.55); --shadow-cookie: 0 18px 44px -14px rgba(0, 0, 0, 0.55); /* --- Rozestupy a šířky (designové px) --------------------------------- */ --container-width: 1288; /* obsahová šířka (okraje 112 při 1512) */ /* Bezpečné zóny (výřez, indikátor domů). Na výšku jsou nulové, na šířku má iPhone 44–59 px po stranách — bez nich by hero v landscape režimu končilo pod výřezem. */ --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Boční okraj na úzkém okně. max() s bezpečnou zónou drží obsah mimo výřez, když je telefon na šířku — pozadí sekcí přes něj přetéká dál (viewport-fit v index.html je cover). */ --gutter: max(clamp(20px, 4vw, 56px), var(--safe-left), var(--safe-right)); --container-width-form: 1272; --container-width-faq: 1056; --gap-field: 16; --checkbox-mark: 16; /* strana žlutého čtverečku */ --dropdown-max-height: 272; /* výška rozbaleného seznamu */ /* Motivační dopis: sbalený má přesně výšku ostatních polí (73), po kliknutí vyroste na --letter-open a dál roste s textem do stropu --letter-max. */ --field-height: 73; --letter-open-height: 220; --letter-max-height: 420; --cookie-max-width: 640; /* šířka lišty s informací o cookies */ --legal-column: 760; /* šířka textového sloupce podstránek */ /* Šířka jednoho sloupce na tabletu na výšku (640–900 px). Mobilní 520 px je tam zbytečně úzkých — po stranách zůstávalo přes 150 px prázdna. */ --column-width-tablet: 660px; /* --- Hero ------------------------------------------------------------- Hero je landing: vždy přes celou šířku i výšku okna. Krémová sekce pod ním do něj vystupuje o --hero-overlap, proto je hero o tolik vyšší než 100svh — tmavá plocha pak zabírá přesně jednu obrazovku. */ --hero-overlap: calc(173 * var(--s)); /* Hero se navíc řídí i výškou okna: obsah (nadpis, podtitul, pruh partnerů) zabírá v návrhu ~880 px, takže na nízkém okně přebírá vedení výškové měřítko a celý landing se vejde na jednu obrazovku bez oříznutí. */ --s-hero: min(var(--s), calc(100svh / 880)); /* --- Hero na malých displejích ---------------------------------------- Pod 900 px se hero přeskládá do sloupce a --s-hero už nestačí: o tom, jestli se landing vejde na obrazovku, tam rozhoduje výška okna, ne šířka. Princip: text si drží čitelnou velikost (clamp se stropem v svh), pevné části pruhu partnerů a CTA mají svoje minimum, a grafika orka pak dostane přesně to, co zbyde — je to jediný prvek, který smí ustoupit. Proto je .hero__visual flexibilní položka a tyhle tokeny jí drží strop, aby na vysokém úzkém okně nevyrostla přes celou obrazovku. svh (small viewport height) schválně místo vh/dvh: je to výška okna s roztaženou adresní lištou, tedy nejmenší stav, který na mobilu nastane. Když se lišta schová, zbyde místo navíc — nikdy naopak. Strop šířky není 100 % kontejneru, ale 1/1.151 z něj: obě šipky přesahují grafiku ven (levá začíná na -6,3 %, pravá končí na 108,8 %), takže celá kompozice je o 15,1 % širší než samotný obrázek. Bez toho dělení se pravá šipka na vysokém úzkém okně ořízne o okraj obrazovky. */ --hero-art-max-width: min(calc((100vw - 2 * var(--gutter)) / 1.151), 420px); --hero-art-max-height: calc(var(--hero-art-max-width) * 552 / 537); /* Spodní mez grafiky. Pod ni už není co zmenšovat — 20px ork je horší než kus scrollování, takže na extrémně nízkém okně (typicky přiblížená stránka) hero radši přeteče a stránka se posune. Reálná zařízení sem nedosáhnou: i na iPhonu SE zbyde na grafiku přes 150 px. */ --hero-art-min-height: 72px; /* --- Pohyb ------------------------------------------------------------ */ --transition-fast: 150ms ease; --transition-accordion: 300ms ease; }