/* ============================================================ DARK — společný základ tmavého registru značky Používají: index.html · case-*.html Specifikace a pravidla: DESIGN.md Kontrola souladu: python3 tools/check-design.py ------------------------------------------------------------ Jediný zdroj pravdy pro tokeny a primitiva tmavého registru. Stránka smí definovat jen vlastní komponenty a — u case stránek — klientskou akcentovou barvu, a to na `body`, nikdy v :root. Názvy tokenů jsou SHODNÉ s denním registrem (assets/daytime.css). Liší se hodnoty, ne slovník. Registry se nemíchají. ============================================================ */ :root{ /* ---------- barvy ---------- */ --bg:#0a0a0b; /* pozadí stránky */ --bg-soft:#101012; /* vyvýšené pruhy, pásy sekcí */ --card:#141416; /* karty, chipy, vstupy */ --line:rgba(242,240,234,.1); /* vlasové ohraničení */ --ink:#f2f0ea; /* hlavní text, nadpisy */ --ink-dim:rgba(242,240,234,.64); /* běžný text — 7,3:1 ✓ */ --ink-faint:rgba(242,240,234,.52); /* tiché popisky — 5,1:1 ✓ AA. POD .52 NIKDY. Hodnota .38 padala na 3,2:1. */ --lime:#d7fb44; /* akcent — patří Andrejovi, ne klientovi */ --lime-ink:#0c0e02; /* text na lime */ --red:#ff7a5c; /* chybový stav na tmavém */ --green:#4fbd87; /* kladný stav na tmavém */ --bg-deep:#16181d; /* hlubší plocha uvnitř karet */ --shade:#000; /* překryvy a přechody, nikdy text */ --tok-str:#a8c7fa; /* řetězec ve zvýrazněném kódu — 8,4:1 */ --ink-max:#ffffff; /* čistá bílá — jen ikony a mikro-detaily */ --bg-off:#0d0d0f; /* varianta pozadí o stupeň světlejší */ /* ---------- písmo ---------- */ --fd:'Unbounded',system-ui,sans-serif; --fb:'Onest',system-ui,sans-serif; --fm:'JetBrains Mono',ui-monospace,Menlo,monospace; /* ---------- typografická škála ---------- 13 stupňů. --t-display smí case stránka přepsat na `body`, protože hero každého případu má vlastní motiv. */ --t-display:clamp(2.8rem,11vw,8rem); /* hero motiv case stránky */ --t-bignum:clamp(3rem,9vw,6rem); /* .bignum ve stat bandu case stránky */ --t-hero:clamp(2.4rem,6vw,4.4rem); /* h1 */ --t-h2:clamp(1.8rem,4.6vw,3.4rem); /* nadpis sekce */ --t-num:clamp(1.5rem,4vw,2.7rem); /* velké datové číslo, stat band */ --t-h3:clamp(1.3rem,2.6vw,1.9rem); /* podsekce */ --t-h4:clamp(1.05rem,2vw,1.35rem); /* název karty */ --t-lead:clamp(16px,1.9vw,19px); /* úvodní odstavec */ --t-body:17px; /* běžný text */ --t-ui:15px; /* tlačítka, vstupy */ --t-sm:14px; /* druhotný text */ --t-xs:13px; /* poznámky */ --t-meta:12px; /* mono metadata */ --t-micro:11px; /* mono popisky uppercase */ /* ---------- rozestupy ---------- */ --g-xs:clamp(8px,1.2vw,14px); --g-s:clamp(14px,2.2vw,22px); --g-m:clamp(20px,2.6vw,32px); --g-l:clamp(28px,4vw,56px); --pad-block:clamp(64px,10vw,140px); --pad-inline:clamp(20px,5vw,48px); --wrap:1080px; /* ---------- rádiusy ---------- */ --r-xs:6px; --r-s:10px; /* média, chipy */ --r-m:14px; /* rámovaný screenshot */ --r-l:24px; /* výchozí rádius sekcí */ --r-xl:28px; /* karty */ --r-pill:999px; /* ---------- stíny ---------- Karty jsou ploché (1px --line). Stín nese jen rámovaný screenshot a lime záře. */ --sh-media:0 22px 55px -12px rgba(20,24,40,.38),0 6px 18px -6px rgba(20,24,40,.22),0 0 0 1px rgba(20,24,40,.05); --sh-media-hi:0 34px 70px -14px rgba(20,24,40,.46),0 8px 22px -6px rgba(20,24,40,.26),0 0 0 1px rgba(20,24,40,.06); --glow-s:0 0 20px rgba(215,251,68,.4); --glow-xs:0 0 10px rgba(215,251,68,.6); --glow-sm:0 0 18px rgba(215,251,68,.4); --glow-m:0 8px 40px rgba(215,251,68,.35); --ring:0 0 0 4px rgba(215,251,68,.16); /* ---------- pohyb ---------- */ --ease:cubic-bezier(.22,1,.36,1); --d-fast:.18s; --d-base:.32s; --d-slow:.7s; --d-xslow:.9s; /* ---------- vrstvení ---------- */ --z-grain:60; --z-overlay:90; /* mobilní menu */ --z-nav:100; /* topbar */ --z-dropdown:110; /* výběr jazyka */ --z-cursor:120; } /* Breakpointy — shodné s denním registrem, jen tři: 560px telefon · 860px skládání · 1080px úzký desktop */ /* ============================================================ RESET A ZÁKLAD ============================================================ */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg);color:var(--ink); font-family:var(--fb);font-size:var(--t-body);line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:var(--lime);color:var(--lime-ink)} :focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:var(--r-xs)} /* ============================================================ TYPOGRAFIE Zarovnání vlevo. Na střed jen přes .center — hero a závěrečné CTA. ============================================================ */ h1,h2,h3,h4{font-family:var(--fd);font-weight:700;text-wrap:balance;letter-spacing:-.015em} p{text-wrap:pretty} h1,.t-hero{font-size:var(--t-hero);font-weight:800;line-height:1.02;letter-spacing:-.02em} h2,.t-h2 {font-size:var(--t-h2);line-height:1.06} h3,.t-h3 {font-size:var(--t-h3);line-height:1.18} h4,.t-h4 {font-size:var(--t-h4);line-height:1.25;letter-spacing:-.01em} .lead{color:var(--ink-dim);font-size:var(--t-lead);line-height:1.55;max-width:60ch} .mono{font-family:var(--fm)} .micro{font-family:var(--fm);font-weight:500;font-size:var(--t-micro); letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)} /* Míra řádku — próza nikdy přes celou šířku. */ .measure-s{max-width:44ch} .measure-m{max-width:60ch} .measure-l{max-width:76ch} /* ============================================================ ROZVRŽENÍ ============================================================ */ .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad-inline)} section{position:relative} .block{padding-block:var(--pad-block)} .center{text-align:center} /* ============================================================ TLAČÍTKA ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--fb);font-weight:600;font-size:var(--t-ui);line-height:1; padding:15px 26px;border-radius:var(--r-pill); border:1px solid var(--line);background:transparent;color:var(--ink); cursor:pointer;text-align:center; transition:transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none} .btn.primary{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);font-weight:700} .btn.primary:hover{box-shadow:var(--glow-m)} .btn.ghost{background:transparent} .btn.link{border:none;background:none;color:var(--ink-dim);padding-inline:6px} .btn.link:hover{color:var(--ink);transform:none;text-decoration:underline;text-underline-offset:3px} /* ============================================================ REVEAL PŘI SCROLLU — obsah nikdy nezávisí na JS ============================================================ */ html.js .reveal{opacity:0;transform:translateY(26px)} html.js .reveal.in{opacity:1;transform:none; transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important} html.js .reveal{opacity:1;transform:none} } /* ============================================================ POMOCNÉ ============================================================ */ .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}