/* ========================================================================= V PRESU – design tokens Hodnoty převzaté 1:1 z Figma variables (soubor V-PRESU-2026) ========================================================================= */ :root { /* ---------- Barvy ---------- Hodnoty jsou 1:1 z Figma variables (V-PRESU-2026); v komentáři je jméno tokenu, ať je poznat, co přepsat, když se ve Figmě změní. Barvy označené „odměřeno“ v návrhu proměnnou nemají – jsou zapsané přímo u tvaru, takže je proti tokenu ověřit nejde. */ --c-black: #1a1a1a; /* palette-neutral-black = text-primary, surface-strong, border-strong, icon-primary, effect-shadow */ --c-white: #ffffff; /* text-inverse = surface-default, icon-inverse, border-inverse */ --c-text-secondary: #666666; /* text-secondary – datum recenze, objem u produktu */ --c-border-control: #888888; /* border-control */ --c-overlay-light: #ffffff80; /* overlay-light-strong – pilulka pod hero sliderem */ --c-yellow: #ffef1d; /* action-accent */ --c-oil-yellow: #fedd04; /* plocha pod fotkou stékajícího oleje */ --c-light-gray: #f2f2f2; /* surface-subtle */ --c-kat-lista: #ededed; /* pruh s kategoriemi pod hlavičkou na telefonu */ --c-gray: #9c9c9c; /* odměřeno – šedé popisky v hlavičce a formulářích */ --c-degustace: #b2b2b2; /* border-default – linka nad recenzí, předěl v produktové kartě */ --c-product-line: #d9d9d9; /* border-subtle = surface-placeholder */ --c-chef-bg: #f5f5f0; /* surface-warm – panel v referenci šéfkuchařů, vypnuté tlačítko „Do košíku“ u sady na míru */ --c-slightly-grayish: #333333;/* palette-neutral-900 */ --c-green: #4dce4a; /* status-success-surface – odznak OVĚŘENO */ --c-in-stock: #006b1f; /* status-success-text – „Skladem“, vybraná volba v pokladně (rámeček i kolečko) */ --c-out-stock: #eb5757; /* „Momentálně vyprodáno“ */ --c-pressed: #b88162; /* odznak „Lisováno: …“ */ --c-hero-blue: #5a8cc9; /* hero detailu produktu – konec gradientu i „duch“ nadpisu */ /* Lišta záložek v hero detailu. Dřív to byla produktová barva ztmavená na 75 %, takže u tmavých olejů (sezam, BIO len) nešlo na ni dát černý text – kontrast padal na 1,3 : 1. Od 14. 10. 2026 má stejnou výplň jako přepínač objemů kousek nad ní: token overlay/dark 3 z návrhu, tedy černá na 40 %. Text na ní je bílý a na 40 % se čte na čtrnácti produktech z patnácti (zelené konopí 4,3 : 1, ostatní od 4,6 výš; na 20 % padala bílá až na 2,5). Výjimka je BIO konopí – jeho škála končí dole bílou, takže tam má bílá jen 2,85 : 1. Bílá pilulka vybrané záložky z průhledné výplně jasně vystupuje na všech. */ --c-tab-bar: rgba(0, 0, 0, .4); --c-table-line: #d9d9d9; /* border-subtle */ --c-story-gray: #808080; /* šedé mezinadpisy a popisky fotek na stránce Náš příběh */ --c-blog-bg: #e5e5e5; /* podklad výpisu blogu */ /* fill hero slidu */ --c-hero-beige: #eedab5; --c-hero-brown: #755b34; /* ---------- Fonty ---------- */ --font-heading: "Kommissar XCond", "Kommissar", "Archivo Narrow", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", sans-serif; --font-body: "GT Pressura", "Helvetica Neue", Helvetica, Arial, sans-serif; /* ---------- Typografie ---------- Hodnoty odpovídají návrhu na šířce 1920 px a plynule klesají níž. 1920 px → 5vw = 96, 3.125vw = 60, 1.4583vw = 28, 1.1458vw = 22 … */ --fs-h1: clamp(40px, 5vw, 96px); /* Komm H1 96 */ --fs-h2: clamp(38px, 5vw, 96px); /* sekční nadpisy */ --fs-h3: clamp(28px, 3.125vw, 60px); /* Komm H3 60 */ --fs-body-lg: clamp(19px, 1.4583vw, 28px); /* GT (BOLD) 28 */ --fs-title: clamp(17px, 1.1458vw, 22px); /* GT BOLD 24 (=22) */ --fs-body: clamp(15px, 0.9375vw, 18px); /* GT Text / BOLD 18 */ --fs-sm: clamp(13px, 0.8333vw, 16px); /* GT Text / BOLD 16 */ --fs-perex: clamp(17px, 1.25vw, 24px); /* perex kategorie – 24 / 1.2 */ --fs-price-old: clamp(12px, 0.7292vw, 14px);/* přeškrtnutá původní cena */ --lh-heading: 0.9; --lh-tight: 1.2; --lh-body: 1.4; --ls-h1: 0.015em; /* 1.5 % */ --ls-h3: 0.02em; /* 2 % */ --ls-bold: 0.02em; /* 2 % */ --ls-text: 0.01em; /* 1 % */ /* ---------- Kontejnery (šířky z Figmy) ---------- */ --page-gutter: clamp(16px, 2.5vw, 48px); --header-h: 105px; /* 18 px odsazení + 86 px logo; hero začíná na 105 px (návrh) */ --header-pripnuta-h: 72px; /* připnutá lišta po zarolování – návrh „menu“ */ /* Složení olejů v sadě – odměřeno z návrhu „detail olejů v sadě“. */ --fs-sada-nazev: 28px; --fs-sada-text: 16px; --c-sada-linka: #888888; /* Pozadí dlaždice ve výpisu – odměřeno ze studiových snímků ve files/produkty/share, aby fotka po stranách navazovala. */ --c-produkt-pozadi: #ececea; /* Panel „Vaše sada" u vlastní sady olejů – o chlup světlejší než dlaždice vedle, aby se od nich odlišil (návrh „sada na míru"). */ --c-sada-panel: #f4f4f2; /* Najetí myší na přepínač – velikost balení v detailu i lišta sekcí. Obojí sedí na overlay/dark a má bílý text, takže se po najetí ztmavuje (dřív zesvětlovalo): druhá vrstva černé na 20 % nad výplní 40 % dá dohromady 52 % a položka pod kurzorem je zřetelně tmavší než zbytek lišty. */ --c-prepinac-hover: rgba(0, 0, 0, .2); /* Hláška „přidáno do košíku“ – stejné náběhy jako panel košíku. */ /* Snackbar „přidáno do košíku“ – časování i křivky z přílohy karty snackbar-css-anim.txt. Odjezd začíná po příjezdu + pauze. */ --c-snackbar-ok: #42ce46; /* color-status-success-surface */ --t-snackbar-in: 360ms; --t-snackbar-out: 240ms; --t-snackbar-pauza: 2600ms; --e-snackbar-in: cubic-bezier(.22, 1, .36, 1); --e-snackbar-out: cubic-bezier(.4, 0, 1, 1); /* Počítadlo košíku – přetočení čísla a poskočení bubliny. Křivka přestřelí přes cíl a vrátí se, odtud „overshoot & settle“. */ /* Vyrolování připnuté lišty zeshora. */ --t-lista: 320ms; --e-lista: cubic-bezier(.22, .61, .36, 1); --t-badge: 420ms; --e-badge: cubic-bezier(.34, 1.56, .64, 1); --w-header: 1792px; /* stejný kontejner jako produkty – okraje 64 px na 1920 */ --w-hero: 1790px; --w-benefits: 1336px; --w-products: 1792px; /* 4 × 424 + 3 × 32 */ --w-box: 1124px; --w-process: 1336px; --w-chef: 1338px; --w-reviews: 1507px; --w-recipes: 1338px; --w-footer: 1802px; --w-listing: 1792px; /* výpis: 4 × 424 + 3 × 32, okraj stránky 64 */ --w-phero: 1400px; /* hero detailu produktu */ --w-gallery: 992px; /* galerie detailu: 3 × 320 + 2 × 16 */ --w-detail: 880px; /* složení a recenze: 2 × 432 + 16 */ --w-detail-benefits: 1240px; /* detail: 4 × 310 na sraz, bez spáry */ /* ---------- Rozestupy ---------- */ --section-gap: clamp(56px, 6.25vw, 120px); /* 120 px mezi sekcemi */ /* Rozestupy z Figmy. --block-gap je tamní layout-section-gap, tedy mezera mezi nadpisem bloku a jeho obsahem uvnitř sekce. */ --space-12: 12px; --space-20: 20px; --block-gap: 48px; /* ---------- Rádiusy ---------- */ --r-sm: 4px; --r-md: 8px; --r-pill: 40px; /* ---------- Stíny ---------- */ --shadow-button: 4px 4px 0 0 var(--c-black); /* Button Shadow */ /* ---------- Ostatní ---------- */ --t-fast: 160ms ease; --t-slide: 500ms cubic-bezier(0.65, 0, 0.35, 1); } @media (max-width: 1023px) { :root { --header-h: 120px; --fs-h1: clamp(38px, 7.4vw, 64px); --fs-h2: clamp(36px, 7vw, 60px); --fs-h3: clamp(26px, 4.6vw, 42px); --fs-body-lg: clamp(17px, 2.2vw, 22px); --fs-body: clamp(15px, 1.9vw, 17px); --fs-title: clamp(16px, 2vw, 20px); } } @media (max-width: 640px) { :root { --fs-h1: clamp(32px, 10vw, 52px); /* Nadpisy sekcí jsou v mobilním návrhu výrazně větší, než sem vycházelo z desktopové škály. Odměřeno z pěti nadpisů na homepage (podklady/mobil.pdf, str. 2) porovnáním šířky textu: NEJOBLÍBENĚJŠÍ 170 px, DEGUSTAČNÍ A DÁRKOVÉ SADY 322, JAK VZNIKAJÍ NAŠE OLEJE 267, RECENZE NA HEUREKA.CZ 264 a SESTAVTE SI VLASTNÍ SADU 291 – všech pět vyšlo na 46,5 až 46,9, takže 12vw (46,8 na 390px okně). Dřív to bylo 9,5vw = 37. */ --fs-h2: clamp(30px, 12vw, 48px); --fs-h3: clamp(23px, 7.2vw, 36px); --fs-body-lg: clamp(16px, 4.4vw, 20px); --fs-body: clamp(14px, 3.9vw, 16px); --fs-sm: 13px; } } /* ========================================================================= POKLADNA – tokeny navíc Checkout je v návrhu pevná dvousloupcová šablona (2 × 448 px + 128 px mezera, dohromady 1024 px na střed). Typografie se proto neškáluje podle vw jako na homepage, ale drží pevné velikosti odečtené z návrhu (1920 × 2985). ========================================================================= */ :root { /* ---------- Barvy formulářové části ---------- */ --c-checkout-bg: #f5f5f0; /* podklad celé stránky – surface-warm, táž barva jako --c-chef-bg */ --c-option-bg: #f2f3ef; /* nevybraná volba dopravy / platby */ /* Pokladna měla vlastní teplé šedé (#1c1917 / #78716c / #a8a29e). V návrhu ale žádné nejsou – text je #1a1a1a a doplňkové popisky #666666, tedy stejné barvy jako na zbytku webu. Tokeny zůstávají kvůli čitelnosti pravidel, jen dostaly hodnoty z návrhu. */ --c-ink: #1a1a1a; /* text ve formuláři = --c-black */ --c-ink-muted: #666666; /* popisky polí = --c-text-secondary */ --c-ink-faint: #666666; /* „NEBO“ */ --c-field-line: #d6d3d1; /* rámeček zaškrtávacího políčka */ --c-option-line: #888888; /* rámeček nevybrané volby a kolečko v ní */ --c-thumb: #d9d9d9; /* placeholder miniatury produktu */ /* ---------- Rozměry ---------- */ --co-col: 448px; /* šířka sloupce */ --co-gap: 128px; /* mezera mezi sloupci (dělicí linka je uprostřed) */ --co-field-h: 56px; --co-pad: 16px; /* vnitřní odsazení voleb a boxů */ /* ---------- Typografie ---------- */ --fs-co-h: 28px; /* Doručení, Způsob dopravy, Platba… */ --fs-co-total: 22px; /* Celkem */ --fs-co-base: 16px; /* hodnoty polí, názvy voleb, ceny */ --fs-co-sm: 14px; /* popisy voleb, objem, poznámky */ --fs-co-label: 12px; /* popisek nad inputem */ --fs-co-micro: 12px; /* EXPRESNÍ POKLADNA, NEBO, patička */ } /* Pod 1200 px se sloupce zúží, aby se vešly i s okraji stránky. */ @media (max-width: 1199px) { :root { --co-col: 400px; --co-gap: 96px; } } @media (max-width: 959px) { :root { --co-col: 100%; --co-gap: 0px; } } @media (max-width: 767px) { /* Hlavička je na telefonu nižší. Do 19. 10. 2026 to bylo 76 – bílý pruh, do kterého se celé vešlo logo se šipkou (podklady/ mobil.pdf, str. 2). Nový mobilní návrh šipku nemá a pod hlavičku přidává šedou lištu kategorií, takže se výška skládá ze dvou pruhů: 63 bílý s nápisem + 43 lišta = 106. Obojí je uvnitř
, takže --header-h dál znamená „kolik nahoře zabere hlavička“ – tělo si o to odsazuje obsah a hero od toho počítá gradient. Okraj stránky je 20 px. Dřív tu bylo 24 odhadnutých z nadpisů, jenže u textu do odsazení mluví i boční vyložení písmen. Rámečky to řeknou přesně: všechna tlačítka přes celou šířku mají v návrhu rámeček na x 20..370 a stejně tak rámeček karty produktu i pole newsletteru. 390 − 2 × 20 = 350, což sedí. */ :root { --header-h: 106px; --page-gutter: 20px; } }