/* ============================================================ ANTIVIRAL — tokens.css Třívrstvá architektura: primitive → semantic → component. Nikde v base.css ani sections.css nesmí být syrový hex. ============================================================ */ :root{ /* ------------------------------------------------------------ 1 · PRIMITIVE — syrové hodnoty, nikdy nepoužívat přímo ------------------------------------------------------------ */ /* Neutrální řada — ani teplá, ani studená. Milk a bone drží nádech mléčné bílé lahvičky, zbytek je čistý neutrál (rozptyl RGB ≤ 5), aby web nesklouzl do kávova. */ --c-milk: #FAF8F5; /* rozptyl 5 */ --c-bone: #F1EEE8; /* rozptyl 9 */ --c-putty: #E3E2DE; /* rozptyl 5 */ --c-clay: #C9C8C4; /* rozptyl 5 */ --c-graphite: #1F1F1E; /* rozptyl 1 — prakticky čistá neutrální čerň */ --c-graphite-2: #575654; /* rozptyl 3 */ --c-graphite-3: #5E5D5A; /* rozptyl 4 */ /* Červená — dvě, protože značková neprojde jako drobný text. Odebráno pipetou přímo z logo/Logo-ANTIVIRAL-1536x1536.png. */ --c-red: #E2241B; /* ZNAČKOVÁ — plochy: glyf, štítkový pás, CTA výplň. Bílá na ní 4,66:1 ✓. Jako drobný text NE (4,03 na bone). */ --c-red-ink: #C51D14; /* červený TEXT na světlém poli — 5,56:1 na milk ✓ */ --c-red-deep: #A81710; /* hover */ --c-red-wash: #FBEDEB; /* jemný podklad */ --c-white: #FFFFFF; /* Hairline — clay se sníženou kryvostí, aby seděl na všech polích */ --c-line: rgba(33, 30, 27, .12); --c-line-strong: rgba(33, 30, 27, .22); --c-line-inv: rgba(250, 248, 245, .16); /* Písma */ --f-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; /* Velikostní stupnice */ --s-display: clamp(72px, 9vw, 140px); --s-h1: clamp(44px, 6.2vw, 92px); --s-h2: clamp(34px, 4.5vw, 62px); --s-h3: clamp(22px, 2.2vw, 30px); --s-h4: 19px; --s-lead: clamp(17px, 1.35vw, 20px); --s-body: 17px; --s-small: 15px; --s-mono: 12px; --s-mono-sm: 11px; /* Prostor — 4px základ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10:128px; /* Rádiusy */ --r-sm: 8px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px; /* Pohyb — jedna rodina pro celý web */ --ease: cubic-bezier(.16, 1, .3, 1); --dur-fast: 180ms; --dur-mid: 420ms; --dur-slow: 700ms; /* Stíny — jen ambientní, žádné barevné */ --sh-soft: 0 20px 50px -28px rgba(33, 30, 27, .22); --sh-lift: 0 10px 28px -12px rgba(33, 30, 27, .28); /* Vržený stín „ruky prolamující rám" — tvrdší, směrový */ --sh-cast: 24px 34px 48px -30px rgba(33, 30, 27, .45); /* ------------------------------------------------------------ 2 · SEMANTIC — účel, ne barva. Tohle používá base.css. ------------------------------------------------------------ */ /* Pole (section grounds) — rytmus webu stojí na těchto čtyřech */ --field-light: var(--c-milk); --field-base: var(--c-bone); --field-warm: var(--c-putty); --field-dark: var(--c-graphite); --surface-raised: var(--c-white); --surface-sunken: var(--c-putty); --text-primary: var(--c-graphite); --text-secondary: var(--c-graphite-2); --text-tertiary: var(--c-graphite-3); --text-on-dark: var(--c-milk); --text-on-dark-muted: rgba(250, 248, 245, .62); --text-accent: var(--c-red-ink); /* text = hlubší varianta, kvůli čitelnosti */ --accent: var(--c-red); /* plochy = značková červená */ --accent-hover: var(--c-red-deep); --accent-wash: var(--c-red-wash); --border: var(--c-line); --border-strong: var(--c-line-strong); --border-on-dark: var(--c-line-inv); --focus-ring: var(--c-red); /* Šířky a rytmus stránky */ --page-max: 1320px; --page-pad: clamp(20px, 4vw, 56px); --section-y: clamp(96px, 11vw, 168px); --measure: 62ch; /* Vzdálenost od okraje viewportu k obsahové ose stránky. .wrap je max --page-max vycentrovaný + --page-pad, takže obsah začíná tady. Cokoli, co má vytéct za okraj stránky, si tímhle odečte přesně tolik, kolik .wrap přidal. max() drží nulu pod --page-max, kde už žádná vnější marže není. */ --gutter-out: calc(var(--page-pad) + max(0px, (100vw - var(--page-max)) / 2)); /* ------------------------------------------------------------ 3 · COMPONENT — konkrétní komponenty ------------------------------------------------------------ */ /* Tlačítka */ --btn-radius: var(--r-pill); --btn-pad-y: 14px; --btn-pad-x: 26px; --btn-primary-bg: var(--accent); --btn-primary-fg: var(--c-white); --btn-primary-bg-hover: var(--accent-hover); --btn-ghost-fg: var(--text-primary); --btn-ghost-border: var(--border-strong); --btn-ghost-border-hover: var(--text-primary); /* Karty */ --card-bg: var(--surface-raised); --card-radius: var(--r-lg); --card-pad: clamp(24px, 3vw, 40px); --card-border: var(--border); /* Navigace */ --nav-h: 68px; --nav-bg-scrolled: rgba(250, 248, 245, .86); /* Mono „prescription label" pás */ --label-fg: var(--text-tertiary); --label-track: .12em; --label-size: var(--s-mono); /* Červený štítkový pás z etikety */ --band-bg: var(--accent); --band-fg: var(--c-white); /* Placeholder obrázku — plnohodnotný nosič layoutu */ --ph-bg: var(--c-putty); --ph-bg-alt: var(--c-clay); --ph-fg: var(--text-tertiary); --ph-radius: var(--r-md); /* Matné sklo — jediný výskyt na webu (sekce Rychlost). Rozostření musí zůstat POD velikostí kapek na AS-04 (~25–40 px). Bylo tu 28 px, tedy víc než kapka: sklo pak nerozmazávalo pozadí, ono ho maza- lo, a z panelu zbyla šedá deska. Sedm pixelů strukturu nechá projít. */ --glass-bg: rgba(250, 248, 245, .34); --glass-blur: 7px; --glass-border: rgba(250, 248, 245, .55); --glass-radius: var(--r-xl); /* Formulář */ --field-bg: var(--surface-raised); --field-border: var(--border-strong); --field-radius: var(--r-md); } /* ------------------------------------------------------------ Pravidla kontrastu (ověřeno výpočtem, viz DESIGN.md) ------------------------------------------------------------ text-primary na všech světlých polích = 12,7–15,6:1 ✓ text-secondary na všech světlých polích = 5,7– 6,9:1 ✓ text-tertiary na field-warm = 5,08:1 ✓ text-tertiary na clay = 3,93:1 → jen ≥24px text-accent na field-light = 5,56:1 ✓ text-accent na field-warm = 4,55:1 ✓ bílá na accent (značková) = 4,66:1 ✓ (CTA, štítkový pás) text-on-dark na field-dark = 16,5:1 ✓ ------------------------------------------------------------ */