/* ============================================================================ KOVALOV.CZ — jediný zdroj pravdy pro celý web ---------------------------------------------------------------------------- Nahrazuje dvojici daytime.css + dark.css. Ty se rozešly: stejná jména znamenala jiné hodnoty (--r-s bylo 12 i 10, --wrap 1120 i 1080, --ink jednou skoro černá a podruhé skoro bílá), takže „systém“ existoval dvakrát a nikdo je nedržel v páru. Rozdělení, ze kterého to plyne: STAVBA je neměnná. Písmo, škála kegle, rozestupy, mřížka, rádiusy, pohyb a vrstvení platí na každé stránce stejně. Jsou v :root a nikde se nepřepisují. BARVA je registr. Mění se jediná věc — plocha, na které stránka stojí. Světlý registr je výchozí. Tmavý se zapíná třídou .register-dark na , ne dalším souborem. Etalon stavby je hlavní stránka; /redesign z ní vychází a nikde se neliší. Specifikace: DESIGN-SYSTEM.md. Kontrola: tools/check-design.py. ============================================================================ */ :root{ /* ========================================================================== PÍSMO Tři řezy, každý má jednu práci. Čtvrtý se nepřidává. ========================================================================== */ --fd:'Unbounded',system-ui,sans-serif; /* nadpisy, čísla */ --fb:'Onest',system-ui,sans-serif; /* běžný text */ --fm:'JetBrains Mono',ui-monospace,Menlo,monospace; /* data, kód, popisky */ /* ========================================================================== TYPOGRAFICKÁ ŠKÁLA — 14 stupňů Nový stupeň se nepřidává. Když hodnota nesedí, komponenta se přiblíží k nejbližšímu stupni. Horní stupně jsou plynulé (clamp), spodní pevné: drobný text se nemá zmenšovat, už je na hranici čitelnosti. ========================================================================== */ --t-display:clamp(76px,14vw,150px); /* jedno obří číslo nebo slovo na sekci */ /* Podpis v pozadí hera. Do čtecí škály nepatří a proto má vlastní krok: není to text ke čtení, je to grafika, která musí být vždycky širší než obrazovka. --t-display se u 150 px zastaví, takže na širokém monitoru by se podpis smrskl a přestal přetékat. Tenhle krok se nesmí použít nikde jinde. */ --t-wordmark:13.6vw; /* Nadpis finále. Dvě pevné řádky (širší je „Let's work": 6,65 em šířky na 1 px kegle, změřeno přes canvas) musí projít každou šířkou okna bez zlomu. 12,8vw je 90vw obsahu děleno tou šířkou s rezervou; strop 176 je táž úvaha pro rám 1200. Krok patří jen finále. */ --t-finale:clamp(40px,12.8vw,176px); --t-bignum:clamp(3rem,9vw,6rem); /* velké číslo v případové studii */ --t-hero:clamp(2.4rem,6.4vw,5rem); /* h1 */ --t-h2:clamp(1.7rem,3.8vw,3rem); /* nadpis sekce */ --t-num:clamp(26px,3.6vw,44px); /* datové číslo v kartě */ --t-h3:clamp(20px,2.4vw,28px); /* podsekce, název karty */ --t-h4:clamp(17px,2.1vw,22px); /* nadpis uvnitř karty */ --t-lead:clamp(16px,1.9vw,19px); /* úvodní odstavec */ --t-body:clamp(15px,1.75vw,17px); /* běžný text */ --t-ui:15px; /* tlačítka, vstupy */ --t-sm:14px; /* druhotný text */ --t-xs:13px; /* poznámky, zdroje */ --t-meta:12px; /* mono metadata */ --t-micro:11px; /* mono popisky verzálkami */ /* ========================================================================== ROZESTUPY Čtyři kroky uvnitř komponent, dva pro rám sekce. Mezihodnoty se nevymýšlí. ========================================================================== */ --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(72px,10vw,132px); /* svislý dech sekce */ --pad-inline:clamp(22px,5vw,64px); /* boční pole rámu */ /* ========================================================================== MŘÍŽKA A RÁM Dvanáct sloupců na každé sekci, která něco skládá. Šířka prvku se zadává jediným číslem --col (kolik z dvanácti), ne vlastním grid-column: dvanáct dělí 2, 3, 4 i 6, takže poměry vycházejí z jedné soustavy. Dva rámy, ne jeden: --wrap je míra pro čtení, --wrap-wide je výkladní skříň. Široký rám má uvnitř 1200 px obsahu (1328 minus dvě boční pole). ========================================================================== */ --cols:12; --gutter:clamp(12px,1.4vw,18px); /* mezera mezi sloupci mřížky */ --wrap:1120px; /* text, právní stránky, /redesign */ --wrap-wide:1328px; /* hlavní stránka a případové studie */ /* ========================================================================== RÁDIUSY Šest hodnot. Poloměr roste s plochou: čím větší prvek, tím měkčí roh. ========================================================================== */ --r-xs:6px; /* štítek, obtah fokusu */ --r-s:12px; /* vstup, drobná karta */ --r-m:16px; /* karta */ --r-l:20px; /* velká karta, obrázek */ --r-xl:clamp(22px,2.6vw,32px); /* plocha přes celou sekci */ --r-pill:999px; /* tlačítko, čip */ /* ========================================================================== POHYB Jedna křivka na celý web. Tři délky podle toho, co se hýbe. ========================================================================== */ --ease:cubic-bezier(.22,1,.36,1); --d-fast:.18s; /* hover, fokus — odpověď na dotek */ --d-base:.32s; /* rozbalení, přesun prvku */ --d-slow:.7s; /* nástup obsahu */ --d-xslow:.9s; /* kreslení linek, dlouhé sekvence */ /* Přebarvení celé plochy při výměně registru. Vlastní krok, protože je to největší pohyb na stránce: mění se pole pod vším ostatním, a co je větší, musí jít pomaleji, jinak to není přechod, ale bliknutí. --d-slow tu stál dřív, jenže ten samý token nese i nástup obsahu — zpomalit ho by znamenalo zpomalit každý odstavec na webu. */ --d-band:.7s; /* výměna registru pruhu */ /* Pozor na čtení téhle hodnoty: s linear se vnímaná délka rovná skutečné. Na ease-outu byl přechod pro oko hotový za třetinu vteřiny a zbytek nikdo neviděl, takže stejné číslo působilo kratší. 1,2 s v lineárním průběhu už byla vleklá. */ /* Jediná výjimka z pravidla „jedna křivka na celý web" — a je měřená. --ease je silný ease-out: při něm plocha ušla 44 % cesty ze světlé do tmavé za prvních 141 ms z 1200. Divák viděl lupnutí a pak dlouhý ocas, který už nebyl vidět. U POHYBU je to správně: věc má vyrazit a doplout. Barva se ale nepohybuje, jen se mění, a rovnoměrná změna je jediná, která se čte jako přechod. Platí výhradně pro plochu pruhu. */ --ease-plane:linear; /* ========================================================================== VRSTVENÍ Osm pojmenovaných pater. Číslo se nikdy nepíše ručně. ========================================================================== */ --z-base:1; --z-sticky:50; /* lepivé prvky uvnitř obsahu */ --z-grain:60; /* zrno přes plochu */ --z-nav:100; /* horní lišta */ --z-overlay:110; /* mobilní menu, celoobrazovkové vrstvy */ --z-dropdown:120; /* nabídky nad lištou */ --z-cursor:130; /* vlastní kurzor */ --z-debug:140; /* ladicí mřížka */ /* ========================================================================== BARVA — SVĚTLÝ REGISTR (výchozí) Šedá je odměřená na jedné podložce a mimo ni neplatí; proto tu nejsou „univerzální“ šedé, ale role: plocha, inkoust, linka. ========================================================================== */ /* plochy */ --paper:#ffffff; /* základ */ --cloud:#f6f6f7; /* odsazená sekce */ --cloud2:#efeff1; /* vnořená plocha */ --fill:#e4e4e9; /* výplň prvku */ /* inkoust */ --ink:#0e0e10; /* text, plné tvrzení */ --ink-dim:#5c5c62; /* druhý plán, doprovod */ --ink-faint:#6c6c75; /* popisky, metadata */ --ink-quiet:#999d9e; /* druhá řádka nadpisu sekce */ --ink-ghost:#d3d3d3; /* ozdobné číslo — nikdy nositel informace */ /* linky */ --line:#dcdce2; /* dělítko */ --rule:#c9c9d0; /* kresba, diagram */ /* akcent — jediná barva, která je v obou registrech stejná */ --lime:#d7fb44; --lime-ink:#0c0e02; /* text na limetce */ --lime-deep:#5f7414; /* limetka jako text na světlé ploše */ --lime-wash:#fafdeb; --lime-tint:#eaf7d5; /* tmavé plochy uvnitř světlé stránky */ --surf-dark:#1b1b1f; --surf-dark2:#26262b; --on-dark:#c9c9cf; --on-dark-dim:#8a8a92; --line-on-dark:rgba(255,255,255,.2); --veil-on-dark:rgba(255,255,255,.09); /* stav */ --red:#d0453b; --green:#2b8a4e; --red-soft:#ff9d95; --warn-bg:#fff6f5; --warn-line:#f3d6d3; --warn-ink:#7d2a23; --ph-bg:#fff4d6; --ph-line:#d9a520; --ph-ink:#7a5a06; /* zvýraznění kódu a výběru */ --tok-str:#a8c7fa; --tok-str-deep:#2450b5; --select-blue:#009cff; --shade:#000; /* plochy v tmavém registru — ve světlém drží platnou hodnotu, aby se komponenta psaná pro jeden registr nerozpadla v druhém */ --bg:var(--paper); --bg-soft:var(--cloud); --bg-off:var(--cloud); --bg-deep:var(--cloud2); --card:var(--paper); --ink-max:var(--ink); /* ========================================================================== STÍNY A OBTAHY — SVĚTLÝ REGISTR Stín říká výšku, ne důležitost. Čtyři hodnoty, nic mezi nimi. ========================================================================== */ --sh-s:0 1px 2px rgba(14,14,16,.04),0 10px 26px rgba(14,14,16,.035); --sh-m:0 24px 60px -34px rgba(20,22,30,.24),0 6px 16px -10px rgba(20,22,30,.16); --sh-l:0 30px 60px -12px rgba(14,14,16,.22),0 0 0 1px rgba(14,14,16,.05); --sh-dark:0 10px 24px -8px rgba(14,14,16,.5); --sh-glass:0 1px 2px rgba(14,14,16,.04),0 10px 26px rgba(14,14,16,.035); --shadow:var(--sh-m); --hairline:0 0 0 1px var(--line); --ring:0 0 0 6px rgba(215,251,68,.32); /* akcentní prstenec */ --ring-ink:0 0 0 6px rgba(14,14,16,.10); /* neutrální prstenec */ /* stíny tmavého registru — ve světlém se nepoužívají, ale musí existovat */ --sh-media:var(--sh-m); --sh-media-hi:var(--sh-l); --glow-xs:none; --glow-s:none; --glow-sm:none; --glow-m:none; /* prvky odvozené od registru */ --focus:var(--ink); /* barva obtahu fokusu */ --btn-bg:var(--paper); /* výchozí plocha tlačítka */ /* jednorázová hodnota komponenty — patří k demu v bentu, ne ke škále */ --r-half-ds:34px; /* ========================================================================== POLE HERA Není to třetí registr, je to jedna plocha s vlastní hodnotou. Důvod je v portrétu: je vystřižený, takže na bílé by z obleku zůstal černý obrys bez těla, a na --ink by oblek zmizel úplně a zbyla hlava. Šedá je jediná plocha, na které je vidět a oblek, a obličej. Text je bílý — tak je hero navržený. Čísla, ať jsou zapsaná: bílá na #989d9e dává 2,74:1, ztlumený odstavec 2,32:1. Norma je 4,5:1 pro text a 3:1 pro velký. Hero tedy stojí mimo AA vědomě, ne omylem. Kdyby to mělo projít beze změny sazby, stačí ztmavit plochu: na #6f7476 vyjde bílá na 4,7:1 a --ash-dim se pak zruší na plnou bílou. Je to jediná hodnota, kterou je k tomu potřeba přepsat. ========================================================================== */ --ash:#989d9e; /* plocha hera */ --ash-fg:#ffffff; /* nadpis */ --ash-fg2:#dadada; /* druhý řádek nadpisu */ --ash-dim:#f0f0f2; /* odstavec a štítek */ --ash-line:rgba(255,255,255,.2); /* obtah štítku */ /* Podpis sdílí tón s druhou řádkou nadpisu, a je to pravidlo, ne shoda: na obrazovce smí být jediná čistá bílá — první řádka nadpisu. Když měl podpis taky #fff, měl největší objekt scény touž jasnost jako ten nejdůležitější (2,74:1 oba), a při shodné jasnosti vyhrává velikost: oko četlo jméno dřív než tvrzení. Na 1,96:1 podpis pořád drží tvar i překryv portrétem, ale do popředí už neleze. */ --ash-mark:var(--ash-fg2); /* podpis v pozadí */ } /* ============================================================================ BARVA — TMAVÝ REGISTR Zapíná se třídou na . Mění se výhradně barvy; škála, rozestupy, mřížka, rádiusy a pohyb zůstávají tytéž hodnoty jako výše. ============================================================================ */ .register-dark{ /* plochy */ --bg:#0a0a0b; --bg-soft:#101012; --bg-off:#0d0d0f; --bg-deep:#16181d; --card:#141416; --paper:var(--bg); --cloud:var(--bg-soft); --cloud2:var(--bg-off); --fill:var(--card); /* inkoust */ --ink:#f2f0ea; --ink-dim:rgba(242,240,234,.64); --ink-faint:rgba(242,240,234,.52); --ink-ghost:rgba(242,240,234,.22); --ink-max:#ffffff; /* linky */ --line:rgba(242,240,234,.1); --rule:rgba(242,240,234,.28); /* akcent zůstává. Limetka jako text potřebuje na tmavé ploše plnou sytost, ne ztmavenou variantu — proto se --lime-deep vrací na --lime. */ --lime-deep:var(--lime); --lime-wash:rgba(215,251,68,.06); --lime-tint:rgba(215,251,68,.14); /* tmavé plochy uvnitř tmavé stránky splývají se základem */ --surf-dark:var(--card); --surf-dark2:var(--bg-deep); --on-dark:var(--ink-dim); --on-dark-dim:var(--ink-faint); --line-on-dark:var(--line); /* stav — na tmavé ploše potřebují světlejší tón, jinak nejsou vidět */ --red:#ff7a5c; --green:#4fbd87; /* stíny: na tmavé ploše stín nefunguje, výšku dělá záře */ --sh-s:none; --sh-m:0 22px 55px -12px rgba(0,0,0,.55); --sh-l:0 34px 70px -14px rgba(0,0,0,.65); --sh-media:0 22px 55px -12px rgba(20,24,40,.38),0 6px 18px -6px rgba(20,24,40,.3); --sh-media-hi:0 34px 70px -14px rgba(20,24,40,.46),0 8px 22px -6px rgba(20,24,40,.36); --glow-xs:0 0 10px rgba(215,251,68,.6); --glow-s:0 0 20px rgba(215,251,68,.4); --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); --focus:var(--lime); --btn-bg:transparent; } /* Breakpointy (proměnnou v @media zadat nelze — držet právě tyto tři): 560px telefon 860px skládání do sloupce 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.62; -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(--focus);outline-offset:3px;border-radius:var(--r-xs)} /* ============================================================================ TYPOGRAFIE Zarovnání: VŠE VLEVO. Na střed jen sekce s třídou .center, a ta je vyhrazena pro hero a závěrečné CTA. ============================================================================ */ h1,h2,h3,h4{text-wrap:balance;letter-spacing:-.02em;font-family:var(--fd);font-weight:700} p{text-wrap:pretty} h1,.t-hero{font-size:var(--t-hero);font-weight:800;line-height:1.01;letter-spacing:-.02em} h2,.t-h2 {font-size:var(--t-h2);line-height:1.08} h3,.t-h3 {font-size:var(--t-h3);line-height:1.15;letter-spacing:-.015em} h4,.t-h4 {font-size:var(--t-h4);line-height:1.2;letter-spacing:-.01em} /* Limetkový pruh pod slovem v nadpisu. Není výchozí — zapíná se třídou .hl. Na stránku nejvýše dva. h1 ho má vždy, je jen jeden. white-space:nowrap je tu kvůli pruhu: ten se nesmí lámat přes dva řádky. Kde se pruh vypíná, musí se vypnout i zákaz zalomení. */ h1 em,h2 em,h3 em{font-style:normal} h1 em,h2.hl em,h3.hl em{position:relative;white-space:nowrap;z-index:0} h1 em::after,h2.hl em::after,h3.hl em::after{ content:"";position:absolute;left:-.04em;right:-.04em;bottom:.08em; height:.30em;background:var(--lime);z-index:-1; } .lead{color:var(--ink-dim);font-size:var(--t-lead);line-height:1.55;max-width:60ch;margin-top:18px} .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)} .note{font-size:var(--t-sm);line-height:1.6;color:var(--ink-faint);max-width:76ch} /* Míra řádku — próza nikdy přes celou šířku. Povolené hodnoty: 44ch (úzká), 60ch (lead), 76ch (poznámka). */ .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)} /* Rám se volí jednou na stránku, ne u každého bloku: třída na přepne token, primitivum zůstane nedotčené. Přepisovat .wrap uvnitř stránky se nesmí — tím by se systém rozjel podruhé, přesně jak se to stalo dřív. */ .frame-wide{--wrap:var(--wrap-wide)} section{position:relative} .block{padding-block:var(--pad-block)} /* залitá plocha sama o sobě odděluje sekci — vlasová linka je navíc */ .tint{background:var(--cloud)} .center{text-align:center} .center .lead{margin-inline:auto} /* Mřížka. Prvek uvnitř dostane jen --col: kolik z dvanácti sloupců zabírá. Rozpad na užších šířkách je pak jediná změna toho čísla, ne nový layout. */ .grid12{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gutter)} .grid12>*{grid-column:span var(--col,3);min-width:0} @media (max-width:860px){ .grid12>*{grid-column:span var(--col-m,6)} } @media (max-width:560px){ .grid12>*{grid-column:span var(--col-s,12)} } /* ============================================================================ ŠAPKA A PATIČKA — společné pro celý web ---------------------------------------------------------------------------- Do sjednocení jich bylo pět a čtyři. Jmenovaly se stejně (.topbar, .foot), ale každá stránka si je stylovala po svém: plovoucí pilulka na hlavní a /redesign, druhá pilulka na případových studiích, plochá lišta na právních stránkách přes doc.css, vlastní verze na design systému a na archivu. Tady je jedna. Stránka dodává jen OBSAH — položky navigace, jazyk, akci. Sloty v pilulce zleva doprava: .brand značka, vždy .nlink odkazy sekcí — nebo .nav-ctx kontextový popisek .lang jazyk, volitelně .nav-cta jedna akce .burger na telefonu, když jsou odkazy .nav-cta je ve výchozím stavu VIDĚT. Zasouvá se jen tam, kde si o to stránka řekne třídou .tuck na .topbar — na hlavní, kde první obrazovka vlastní tlačítko už nese a druhé by bylo zbytečné. ============================================================================ */ .topbar{position:fixed;top:clamp(10px,1.5vw,18px);left:0;right:0;z-index:var(--z-nav); padding-inline:var(--pad-inline);pointer-events:none} .nav-pill{pointer-events:auto;width:min(100%,760px);margin:0 auto; display:flex;align-items:center;gap:clamp(4px,.7vw,8px); background:rgba(246,246,247,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-radius:var(--r-pill);padding:10px 10px 10px clamp(18px,2vw,24px);box-shadow:var(--sh-s)} .brand{display:flex;align-items:center;flex:none;margin-right:auto;min-height:24px} .logo{font-family:var(--fd);font-weight:800;font-size:var(--t-ui);color:transparent; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%272%200%20150%20100%27%3E%3Cg%20fill%3D%27%230E0E10%27%20stroke%3D%27%230E0E10%27%20stroke-width%3D%2712%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M36%206H50L22%2094H8Z%27/%3E%3Cpath%20d%3D%27M30%2066H50V76H30Z%27/%3E%3Cpath%20d%3D%27M66%206H84V94H66Z%27/%3E%3Cpath%20d%3D%27M102%2024L120%206H146L102%2050Z%27/%3E%3Cpath%20d%3D%27M102%2066L140%2094H102Z%27/%3E%3C/g%3E%3C/svg%3E") left center/contain no-repeat; width:34px;height:23px;display:grid;place-items:center} .nlink{font-size:var(--t-sm);font-weight:500;color:var(--ink-dim); padding:9px 12px;border-radius:var(--r-pill);white-space:nowrap; transition:color var(--d-fast) var(--ease),background var(--d-fast) var(--ease)} .nlink:hover{color:var(--ink);background:var(--cloud2)} .lang{display:flex;align-items:center;flex:none;margin-left:clamp(6px,1vw,12px); background:var(--cloud2);border-radius:var(--r-pill);padding:3px} .lng{font-family:var(--fm);font-weight:500;font-size:var(--t-micro);letter-spacing:.06em; padding:6px 9px;border-radius:var(--r-pill);color:var(--ink-dim);white-space:nowrap; transition:color var(--d-fast) var(--ease)} .lng.is-on{color:var(--ink);background:var(--paper);box-shadow:var(--sh-s)} /* unavailability is carried by the cursor, not by illegibility */ .lng[aria-disabled=true]{cursor:not-allowed} @media (max-width:560px){.lang{display:none}} /* Tři jazyky už pilulka neunese: tři kódy vedle sebe se čtou jako menu navigace, ne jako přepínač. Hlavní stránka proto nosí rozbalovací přepínač; dvoujazyčné stránky (/redesign, případovky) zůstávají u pilulky .lang — tam je rozbalování na dvě položky zbytečný klik. Položky odpovídají na hover stejně jako odkazy lišty (.nlink) — tichou výplní, ne inverzí: panel je součást lišty, ne řada tlačítek. */ .lang-dd{position:relative;flex:none;margin-left:clamp(6px,1vw,12px)} .lang-dd-btn{display:flex;align-items:center;gap:6px;border:none;cursor:pointer; font-family:var(--fm);font-weight:500;font-size:var(--t-micro);letter-spacing:.06em; color:var(--ink);background:var(--cloud2); padding:9px 12px;border-radius:var(--r-pill);white-space:nowrap; transition:background var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease)} .lang-dd-btn:hover{background:var(--paper);box-shadow:var(--sh-s)} .lang-dd-btn svg{width:9px;height:9px;flex:none; transition:transform var(--d-fast) var(--ease)} .lang-dd.open .lang-dd-btn svg{transform:rotate(180deg)} /* Panel: viditelnost přes visibility se zpožděním, aby odchod uměl dohrát opacity a panel přitom nechytal kurzor, když je zavřený. */ .lang-dd-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:168px; display:block;background:var(--paper);border:1px solid var(--line); border-radius:var(--r-m);box-shadow:var(--sh-m);padding:6px; z-index:var(--z-dropdown); opacity:0;transform:translateY(-6px);visibility:hidden; transition:opacity var(--d-fast) var(--ease),transform var(--d-fast) var(--ease), visibility 0s linear var(--d-fast)} .lang-dd.open .lang-dd-menu{opacity:1;transform:none;visibility:visible; transition-delay:0s} .lang-dd-menu a{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:10px 12px;border-radius:var(--r-s); font-family:var(--fb);font-weight:600;font-size:var(--t-sm);color:var(--ink); transition:background var(--d-fast) var(--ease),color var(--d-fast) var(--ease)} .lang-dd-menu a small{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.06em; color:var(--ink-faint);transition:color var(--d-fast) var(--ease)} /* Panel mluví jazykem lišty, ne jazykem CTA: plná inkoustová výplň se v rozbaleném seznamu četla jako tlačítko a na tmavé liště bila do očí. Stejný hover jako .nlink — tichá výplň, kód ztmavne. */ .lang-dd-menu a:hover{background:var(--cloud2)} .lang-dd-menu a:hover small{color:var(--ink)} @media (max-width:560px){.lang-dd{display:none}} /* Výchozí stav je VIDĚT. Zasouvá se jen tam, kde si o to stránka řekne třídou .tuck — na hlavní, kde první obrazovka vlastní tlačítko už nese. */ .nav-cta{overflow:hidden;white-space:nowrap;flex:none} /* Přechod musí sedět na .topbar .nav-cta, ne na samotné .nav-cta. V jednom souboru stojí .btn až za ním a má stejnou specificitu, takže mu vlastnost transition přebilo celou: tlačítko pak nevyjelo, ale skočilo. Vyšší specificita to řeší bez ohledu na pořadí. Vlastní přechody .btn se musí vypsat znovu, jinak by zmizela odezva na najetí. */ .topbar .nav-cta{ transition:max-width var(--d-slow) var(--ease),opacity var(--d-base) var(--ease), padding var(--d-slow) var(--ease),margin var(--d-slow) var(--ease), 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)} .topbar.tuck .nav-cta{max-width:0;opacity:0;padding-inline:0;margin-left:0} .topbar.tuck.past .nav-cta{max-width:14rem;opacity:1;padding-inline:22px;margin-left:4px} @media (prefers-reduced-motion:reduce){.nav-cta{transition:none}} .burger{display:none;width:42px;height:42px;border:none;background:var(--cloud2); border-radius:50%;cursor:pointer;position:relative;flex:none} .burger span{position:absolute;left:12px;width:18px;height:1.6px;background:var(--ink); transition:transform var(--d-base) var(--ease),top var(--d-base) var(--ease)} .burger span:nth-child(1){top:17px} .burger span:nth-child(2){top:23px} /* Otevřené menu je celoobrazovkové a leží nad lištou, takže by zakrylo i tlačítko, kterým se zavírá: křížek se vykreslil, ale prst trefil překryv. Na klávesnici to zachránil Escape, na telefonu nic. Lišta proto po dobu otevření vystoupá nad překryv. */ .menu-open .topbar{z-index:var(--z-dropdown)} .menu-open .burger span:nth-child(1){top:20px;transform:rotate(45deg)} .menu-open .burger span:nth-child(2){top:20px;transform:rotate(-45deg)} @media (max-width:860px){ .nlink{display:none} /* Jeden odkaz smí zůstat. Na hlavní odkazy přebírá burger, ale stránka bez burgeru — případová studie, právní dokument — by přišla o cestu zpátky úplně: zbyl by jen tlačítko prohlížeče a odkaz až na konci stránky. */ /* Odkaz smí zůstat, ale nesmí lištu roztlačit: na 320 px se dlouhý popisek „← Redesign webu“ nevešel a vytlačil tlačítko ze stránky. Proto se krátí třemi tečkami místo toho, aby tlačil. */ .nlink.keep{display:inline-flex;padding-inline:10px; min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .burger{display:block} /* Osmnáct je šířka boků tlačítka na telefonu — ne výjimka hlavní stránky. Řádek pod tímhle ji měl odjakživa, ale platil jen na zasouvací liště. Případovky se nezasouvají, takže jim zbývalo 26 a odkaz zpátky se kvůli těm šestnácti pixelům krátil třemi tečkami už na 375: „Усі роботи“ potřebuje 92 px a mělo 76. Krácení zůstává jako pojistka pro užší displeje, jen se přestalo spouštět tam, kde se text vejde. */ .topbar .nav-cta{padding-inline:18px} .topbar.tuck.past .nav-cta{max-width:11rem;padding-inline:18px} } /* ============================================================ TOPBAR IN THE DARK REGISTER The bar is glass, so it should take the colour of what is behind it rather than sit on the page as a bright slab. The band tells the document when it has gone dark and the bar follows, on the same easing and the same duration, so the two read as one move instead of two. ============================================================ */ .nav-pill,.nlink,.lang,.lng,.logo,.burger,.burger span{ transition:background-color var(--d-slow) var(--ease),color var(--d-slow) var(--ease), box-shadow var(--d-slow) var(--ease)} .nav-dark .nav-pill{background:rgba(20,20,23,.58)} .nav-dark .nlink{color:var(--on-dark-dim)} .nav-dark .nlink:hover{color:var(--paper);background:rgba(255,255,255,.09)} .nav-dark .lang,.nav-dark .lang-dd-btn{background:rgba(255,255,255,.09)} .nav-dark .lang-dd-btn{color:var(--paper)} .nav-dark .lang-dd-btn:hover{background:rgba(255,255,255,.16);box-shadow:none} .nav-dark .lng{color:var(--on-dark-dim)} .nav-dark .lng.is-on{color:var(--paper);background:rgba(255,255,255,.16);box-shadow:none} .nav-dark .logo{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%272%200%20150%20100%27%3E%3Cg%20fill%3D%27%23FFFFFF%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%2712%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M36%206H50L22%2094H8Z%27/%3E%3Cpath%20d%3D%27M30%2066H50V76H30Z%27/%3E%3Cpath%20d%3D%27M66%206H84V94H66Z%27/%3E%3Cpath%20d%3D%27M102%2024L120%206H146L102%2050Z%27/%3E%3Cpath%20d%3D%27M102%2066L140%2094H102Z%27/%3E%3C/g%3E%3C/svg%3E") left center/contain no-repeat} .nav-dark .burger{background:rgba(255,255,255,.09)} .nav-dark .burger span{background:var(--paper)} /* mobile menu */ .mobile-menu{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(255,255,255,.97); backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center; padding:0 8vw;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s} .menu-open .mobile-menu{opacity:1;visibility:visible} body.menu-open{overflow:hidden} .mobile-menu a{font-family:var(--fd);font-weight:700;font-size:var(--t-num); padding:12px 0;border-bottom:1px solid var(--line); display:flex;justify-content:space-between;align-items:center} .mobile-menu a small{font-family:var(--fm);font-size:var(--t-xs);color:var(--ink-faint);font-weight:400} .mobile-lang{display:flex;gap:8px;margin-top:44px} /* V řádku jazyků jsou dvě značky: aktivní jazyk je , ostatní . Pilulku ale dostával jen — odkazy si braly styl velkých položek menu (.mobile-menu a), takže „UA“ a „CZ“ stály v seznamu jako další dva body navigace, s vlastní linkou pod sebou, a aktivní „EN“ vedle nich vypadalo jako drobná pecka. S třetím jazykem to přestalo jít přehlédnout. Pilulku proto nosí obojí; display:block ruší flexové rozprostření zděděné z položky menu. */ .mobile-lang span,.mobile-lang a{display:block; font-family:var(--fm);font-weight:500;font-size:var(--t-sm);letter-spacing:.06em; color:var(--ink-dim);background:var(--cloud);border:1px solid var(--line); border-radius:var(--r-pill);padding:11px 20px} .mobile-lang a:hover{color:var(--ink);background:var(--cloud2)} /* Pilulka na tmavé stránce. .nav-dark je běhový stav hlavní stránky (lišta zrovna stojí nad černým pruhem); .register-dark je celá stránka v tmavém registru. Obojí chce totéž, proto sdílejí pravidla. */ .register-dark .nav-pill{background:rgba(20,20,23,.58)} .register-dark .nlink{color:var(--on-dark-dim)} .register-dark .nlink:hover{color:var(--paper);background:rgba(255,255,255,.09)} .register-dark .lang,.register-dark .lang-dd-btn,.register-dark .burger{background:rgba(255,255,255,.09)} .register-dark .lang-dd-btn:hover{background:rgba(255,255,255,.16);box-shadow:none} .register-dark .lng{color:var(--on-dark-dim)} .register-dark .lng.is-on{color:var(--paper);background:rgba(255,255,255,.16);box-shadow:none} .register-dark .burger span{background:var(--paper)} .register-dark .nav-ctx{color:var(--on-dark-dim)} .register-dark .logo{background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%272%200%20150%20100%27%3E%3Cg%20fill%3D%27%23FFFFFF%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%2712%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M36%206H50L22%2094H8Z%27/%3E%3Cpath%20d%3D%27M30%2066H50V76H30Z%27/%3E%3Cpath%20d%3D%27M66%206H84V94H66Z%27/%3E%3Cpath%20d%3D%27M102%2024L120%206H146L102%2050Z%27/%3E%3Cpath%20d%3D%27M102%2066L140%2094H102Z%27/%3E%3C/g%3E%3C/svg%3E") left center/contain no-repeat} /* Kontextový popisek místo navigace: případová studie, právní dokument. Odsazení doprava přebírá on, jinak by ho automatický okraj značky odstrčil od ní pryč a popisek by se octl uprostřed lišty místo vedle znaku. */ .brand:has(+ .nav-ctx){margin-right:10px} .nav-ctx{margin-right:auto; font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.08em; text-transform:uppercase;color:var(--ink-faint);white-space:nowrap; overflow:hidden;text-overflow:ellipsis;min-width:0} .nav-dark .nav-ctx{color:var(--on-dark-dim)} @media (max-width:560px){ .nav-ctx{display:none} } /* ---------------------------------------------------------------- patička */ .foot{background:var(--ink);color:var(--on-dark-dim);padding-block:38px; font-family:var(--fm);font-size:var(--t-meta);letter-spacing:.03em} .foot .wrap{display:flex;justify-content:space-between;align-items:center; gap:var(--g-m);flex-wrap:wrap} .foot-brand{display:flex;align-items:center;gap:12px;opacity:.8} /* .logo je v denním registru černá a na černém pozadí by zmizela */ .foot-brand .logo{width:34px;height:23px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%272%200%20150%20100%27%3E%3Cg%20fill%3D%27%23FFFFFF%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%2712%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M36%206H50L22%2094H8Z%27/%3E%3Cpath%20d%3D%27M30%2066H50V76H30Z%27/%3E%3Cpath%20d%3D%27M66%206H84V94H66Z%27/%3E%3Cpath%20d%3D%27M102%2024L120%206H146L102%2050Z%27/%3E%3Cpath%20d%3D%27M102%2066L140%2094H102Z%27/%3E%3C/g%3E%3C/svg%3E") left center/contain no-repeat} .foot-wm{font-family:var(--fd);font-weight:700;font-size:var(--t-body); letter-spacing:-.01em;color:var(--paper)} .foot-meta{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap} /* Odkazy v patičce mají vlastní výšku 19 px, což je pod minimem 24 px pro cíl dotyku (WCAG 2.2). Palec to netrefí. Výplň jde jen svisle, aby se řádek nerozjel do šířky, a je záporně kompenzovaná v padding-blocku patičky. */ .foot a{color:var(--on-dark-dim);text-decoration:none; display:inline-flex;align-items:center;min-height:24px; transition:color var(--d-fast) var(--ease)} @media (hover:hover) and (pointer:fine){ .foot a:hover{color:var(--paper)} } .foot a:focus-visible{color:var(--paper)} /* Na telefonu se patička skládá do čtyř řádků a v tmavém finále pak váží víc než výzva nad ní — přesně naopak, než má. Obsah zůstává (odkazy na české a ukrajinské klienty jsou jediná cesta na /redesign), stahuje se rytmus: pole 38→22, mezera mezi řádky 14→6. Blok tím spadl z 220 na 164. Dva jazykové odkazy na jeden řádek nejdou: měří 326 px do kontejneru 295 px. Zkracovat je kvůli tomu by ubralo smysl („pro klienty", ne „jazyk"), takže zůstávají pod sebou. min-height odkazů se nesnižuje: 24 px je minimum cíle dotyku. */ @media (max-width:560px){ .foot{padding-block:22px} .foot .wrap{gap:12px} .foot-meta{gap:6px 16px} } /* ============================================================================ PŘÍPADOVÁ STUDIE — kanonický vzor ---------------------------------------------------------------------------- Čtyři studie sdílejí jeden tvar, proto je popsaný tady a ne čtyřikrát v každé stránce. Stránka pak nese jen obsah. Pořadí je dané tím, jak čte návrhový lead: co to je → jaká byla moje role → proč to bylo těžké → jaká rozhodnutí jsem udělal a co za ně stálo → důkaz → změřené číslo. Prodejní tón sem nepatří, tyhle stránky jsou doklad řemesla. ============================================================================ */ /* první obrazovka */ .cs-hero{padding-top:clamp(120px,16vw,190px);padding-bottom:var(--g-l)} .cs-hero h1{margin-top:var(--g-xs)} .cs-hero .lead{max-width:44ch} /* Limetkový pruh pod druhým řádkem nadpisu s sebou nese white-space:nowrap — pruh se nesmí lámat. Na 320 px se řádek při dolní hranici --t-hero nevejde, a protože zalomit nemůže, vyleze z rámu. Nadpis proto na telefonu sestupuje o stupeň; pruh zůstává. */ @media (max-width:560px){ .cs-hero h1{font-size:var(--t-h2)} } .cs-meta{display:flex;flex-wrap:wrap;gap:var(--g-xs);margin-top:var(--g-m)} .cs-meta span{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.06em; text-transform:uppercase;color:var(--ink-faint); border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 13px} /* hlavní snímek — jediný obrázek přes celý rám */ .cs-shot{margin-top:var(--g-l);border-radius:var(--r-xl);overflow:hidden; background:var(--cloud);box-shadow:var(--sh-m)} .cs-shot img{width:100%;height:auto} /* pás faktů — role, rozsah, nástroje; skenuje se za pět vteřin */ .cs-facts{list-style:none;border-top:1px solid var(--line)} .cs-facts div{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:var(--g-s);padding-block:16px;border-bottom:1px solid var(--line)} .cs-facts dt{font-family:var(--fm);font-size:var(--t-micro);letter-spacing:.08em; text-transform:uppercase;color:var(--ink-faint);padding-top:3px} .cs-facts dd{color:var(--ink)} @media (max-width:560px){ .cs-facts div{grid-template-columns:1fr;gap:4px} } /* hlavička sekce — obočí, tvrzení, upřesnění */ .cs-head{max-width:60ch} .cs-head .eyebrow{display:block;font-family:var(--fm);font-weight:500; font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase; color:var(--ink-faint);margin-bottom:var(--g-xs)} .cs-head h2 em{font-style:normal;color:var(--ink-faint)} .cs-head h2 em::after{display:none} .cs-head h2 em{white-space:normal} /* rozhodnutí — jádro stránky. Číslo, tvrzení, důvod, cena rozhodnutí. */ .cs-dec{list-style:none;margin-top:var(--g-l);border-top:1px solid var(--line)} .cs-dec>li{display:grid;grid-template-columns:minmax(0,4rem) minmax(0,1fr); gap:var(--g-s);padding-block:var(--g-m);border-bottom:1px solid var(--line)} /* Číslo rozhodnutí je --ink-faint, ne --ink-ghost. Duch je 1,49:1 a specifikace na něm zakazuje informaci; pořadí rozhodnutí informace je. */ .cs-dec .num{font-family:var(--fm);font-size:var(--t-meta);color:var(--ink-faint)} .cs-dec h3{max-width:26ch} .cs-dec p{margin-top:10px;color:var(--ink-dim);max-width:60ch} .cs-dec .cost{display:block;margin-top:14px;padding-left:14px; border-left:2px solid var(--lime);color:var(--ink-faint);font-size:var(--t-sm); max-width:60ch} @media (max-width:560px){ .cs-dec>li{grid-template-columns:1fr;gap:6px} } /* důkaz — snímek s podpisem, který říká, na co se dívat */ .cs-figs{display:grid;gap:var(--g-m);margin-top:var(--g-l)} .cs-fig{margin:0} .cs-fig img,.cs-fig video{width:100%;height:auto;border-radius:var(--r-l); background:var(--cloud);border:1px solid var(--line)} .cs-fig figcaption{margin-top:12px;color:var(--ink-faint);font-size:var(--t-sm); max-width:60ch} /* změřená čísla — na tmavém pruhu, aby se nedala přehlédnout */ .cs-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--g-m);margin-top:var(--g-l)} .cs-metrics div b{display:block;font-family:var(--fd);font-weight:800; font-size:var(--t-num);line-height:1} .cs-metrics div span{display:block;margin-top:8px;font-family:var(--fm); font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase} .cs-note{margin-top:var(--g-m);font-size:var(--t-sm);max-width:76ch} /* konec — jeden krok dál, jeden krok zpět */ .cs-next{display:flex;flex-wrap:wrap;gap:var(--g-s);margin-top:var(--g-m); align-items:center} /* boční kolejnice případovky — obsah stránky po levé straně, aktivní sekce se zvýrazňuje při čtení. Značku staví assets/case-rail.js z obočí sekcí, takže seznam je vždy pravdivý a lokalizovaný zadarmo; stránka sama nenese nic. Skript zapíná třídu .crail na — bez něj kolejnice neexistuje a obsah zůstává vycentrovaný. Pod 1080 se kolejnice nevejde vedle sazby, proto tam není vůbec: ztrácí se jen orientace, ne obsah. */ .cs-rail{position:fixed;left:clamp(22px,3.4vw,58px);top:50%; transform:translateY(-50%);z-index:var(--z-sticky);display:none} .cs-rail a{display:flex;align-items:center;gap:10px;padding-block:8px; font-family:var(--fm);font-weight:500;font-size:var(--t-micro); letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint); transition:color var(--d-fast) var(--ease)} .cs-rail a::before{content:"";flex:none;width:26px;height:1px; background:var(--rule); transition:width var(--d-base) var(--ease),background var(--d-base) var(--ease)} .cs-rail a:hover{color:var(--ink)} .cs-rail a.is-on{color:var(--ink)} .cs-rail a.is-on::before{width:48px;background:var(--ink)} /* mezizarážka — krátká čárka mezi položkami, čistě rytmus, viz předloha */ .cs-rail .cs-rail-tick{width:14px;height:1px;background:var(--line); margin-block:3px} @media (min-width:1080px){ html.crail .cs-rail{display:flex;flex-direction:column;align-items:flex-start} /* obsah uhne doprava; primitivum .wrap se nemění, mění ho kontext systému */ html.crail main .wrap{margin-inline:clamp(230px,19vw,300px) auto} html.crail main section{scroll-margin-top:96px} } @media (prefers-reduced-motion:reduce){ .cs-rail a,.cs-rail a::before{transition:none} } /* ============================================================================ TLAČÍTKA — jedna základna, čtyři varianty. Nic dalšího. ============================================================================ */ .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:var(--btn-bg);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), color var(--d-fast) var(--ease); } .btn:hover{transform:translateY(-2px)} /* Stisk musí být cítit. Samotné translateY(0) jen ruší nadzvednutí z hoveru — na dotyku, kde hover není, by tlačítko nepotvrdilo vůbec nic. */ .btn:active{transform:scale(.97)} .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} .register-dark .btn.primary:hover{box-shadow:var(--glow-m)} /* Bez stínu. Stín zvedá prvek z podkladu, který ho sám neoddělí — proto ho nosí knoflík na fotce v /redesign. Tady je výplň --ink na světlé ploše, oddělení je úplné (19:1) a stín pak není hloubka, ale šmouha. Navíc stojí v řadě vedle plochých koleček .ab-social a jako jediný by se rozmazával. */ .btn.dark{background:var(--ink);border-color:var(--ink);color:var(--paper)} .btn.ghost{background:none} /* Ghost je jediná varianta bez výplně, takže na hover neměla čím odpovědět — zvedla se o dva pixely a tím to skončilo. V řadě pod About stojí hned vedle kolečkových odkazů, které se na hover obracejí (.ab-social), a rozdíl bil do očí: tři prvky vedle sebe, dva reagují, jeden ne. Obrácení je psané tokeny --ink/--paper, ne barvami: v tmavém registru se obě hodnoty prohodí, takže tlačítko zůstane obrácené proti své ploše, ať stojí kdekoli. Totéž dělá .btn.dark — ghost je teď jeho hoverem. */ .btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)} .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} /* ---------------------------------------------------------------------------- MAGNET — prvek se nakloní k ukazateli dřív, než na něj najedeš. Zapíná se atributem data-magnetic. Buď přímo na prvku (tlačítko v liště), nebo na řadě — pak jsou magnetické její přímé odkazy a tlačítka (řada pod About). Posun počítá assets/magnetic.js a zapisuje ho výhradně do --mx/--my. Skládání do transform je tady, protože jinak by si skript a stávající chování přepisovaly jednu vlastnost: tlačítko má na hoveru zdvih a na stisk zmenšení, a to musí zůstat. :is(.btn,a,button) je tu kvůli váze, ne kvůli kráse — :is() bere váhu svého nejsilnějšího argumentu, takže selektor drží 0-2-0 a s :hover 0-3-0. Přebije tím .btn:hover i .ab-social:hover, které by jinak transform přepsaly zpátky. Přechod tu vědomě NENÍ. Vlastnost transition se nedá doplnit, jen přepsat celou — a .topbar .nav-cta si v ní veze zasouvání na max-width a padding. Kdyby ji magnet přepsal, tlačítko v liště by přestalo vyjíždět a začalo skákat. Každá komponenta si proto svůj přechod drží sama; magnet jen potřebuje, aby v něm byl transform. */ [data-magnetic]:is(.btn,a,button), [data-magnetic]>:is(.btn,a,button){ --mx:0px; --my:0px; --lift:0px; transform:translate3d(var(--mx),calc(var(--my) + var(--lift)),0)} [data-magnetic]:is(.btn,a,button):hover, [data-magnetic]>:is(.btn,a,button):hover{--lift:-2px} [data-magnetic]:is(.btn,a,button):active, [data-magnetic]>:is(.btn,a,button):active{ transform:translate3d(var(--mx),calc(var(--my) + var(--lift)),0) scale(.97)} @media (prefers-reduced-motion:reduce){ [data-magnetic]:is(.btn,a,button), [data-magnetic]>:is(.btn,a,button){transform:none} } /* Portrét uvnitř tlačítka. Není to pátá varianta — je to slot pro obsah, který se dá pověsit na kteroukoli z těch čtyř. Jediné místo v systému, kde tlačítko mění výšku: 56 px místo 47, protože miniatura pod 40 px přestane být obličej a stane se skvrnou. Svislou míru proto drží obrázek a padding-block jde na nulu. Pravidlo bylo opsané na čtyřech stránkách (index, ua, redesign, redesign-ua) a začínalo se rozcházet — proto stojí tady. */ /* Tvar miniatury je obdélník s rádiem --r-s, ne kruh: kolečko z tváře ubírá ramena a v pilulce se čte jako avatar z chatu, ne jako portrét. Vůle je 7 px se všech stran: vnitřek tlačítka měří 54 px na výšku (56 − 2× obrys), miniatura 40, tedy (54−40)/2 = 7 nahoře i dole — a padding-right proto taky 7, ne 8. Roh se s obloukem pilulky nepere: vlastní rádius 12 uhýbá dovnitř rychleji, než se oblouk zatáčí, takže nejmenší vůle kolem rohu vychází ~6 px. */ .btn.avatar-btn{height:56px;padding-block:0;padding-right:7px} .btn-ava{width:54px;height:40px;flex:none;margin-left:4px; border-radius:var(--r-s);object-fit:cover;object-position:center 22%} /* ============================================================================ NÁSTUP OBSAHU PŘI SCROLLU Obsah nikdy nesmí být podmíněn JS — proto html.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} } /* ============================================================================ REEL — pás prací přes celou šířku, bez nadpisu a bez popisků. Nic netvrdí: žádné jméno klienta, žádné číslo. Proto se pod ním taky nic nevysvětluje — vysvětlivka by odpovídala na otázku, kterou nikdo nepoložil. Karty mají PEVNOU VÝŠKU a šířku podle vlastního poměru. Sjednotit je na jeden formát by znamenalo ořezat telefony, kterých je většina; takhle se nic neořízne a pás dostane rytmus místo pásového dopravníku. Posun je nativní scroll, ne transform: bez skriptu zůstane pás normálně rolovatelný, trackpad a dotyk fungují samy a klávesnice taky. Skript nad tím jen přidává tažení, setrvačnost a nekonečnou smyčku. ============================================================================ */ /* Pás nese třídu .band-shift, takže se přepíná spolu se sousedy. Vlastní barvu tu proto nemá: kdyby ji měl, zůstal by světlým pruhem mezi černým Workem a černými Services — a přesně to je vidět jako díra. Sousední pruhy se v přepínači drží za ruce, takže stačí do řetězu vstoupit. */ /* Šev mezi světlou a tmavou plochou nevede po hraně sekce, ale UVNITŘ ní: karty ho protínají a drží obě roviny pohromadě místo toho, aby seděly pod ním jako pod stropem. Kreslí se to přesvětlením horního pruhu, ne posunem obsahu — karty se nehnou o pixel. Pod tím pruhem barva pásu dál přepíná jako předtím, takže choreografie registru zůstává celá; světlá je natvrdo --cloud, protože tutéž hodnotu má i .tint nad pásem a step na styku nevznikne. V klidovém stavu je pás sám --cloud, takže pruh není vidět vůbec — objeví se až ve chvíli, kdy plocha zčerná. */ .reel-band{padding-block:clamp(40px,5vw,72px);position:relative; --reel-seam:32%; background-image:linear-gradient(to bottom, var(--cloud) 0 var(--reel-seam), transparent var(--reel-seam))} .reel{ /* Strop drží materiál, ne vkus: karta na retině potřebuje dvojnásobek své CSS výšky. Podklady jsou teď 1400 px vysoké, takže 700 sedí přesně 1:1 a nic se nenatahuje — kromě klipu Samurai, jehož zdrojové video se ztratilo a jede z 1120 px, tedy s 25% natažením. U pohybu je to nepostřehnutelné, u statického kadru by to nešlo. Nejnižší z obrázkových podkladů je jobs (2100 px originál), takže i on projde 1400 s rezervou. */ --reel-h:clamp(340px,48vw,700px); overflow-x:auto;overflow-y:hidden;scroll-behavior:auto; scrollbar-width:none;-ms-overflow-style:none; overscroll-behavior-x:contain; /* táhnout se dá jen tam, kde na to skript reaguje */ cursor:grab} .reel::-webkit-scrollbar{display:none} .reel.is-drag{cursor:grabbing} .reel-track{display:flex;gap:var(--g-s);width:max-content; padding-inline:var(--pad-inline)} /* Podklad karty jde přes --band-inset, ne přes pevnou barvu: než se obrázek načte, nesmí na černém pruhu svítit světlý obdélník. */ .reel-card{margin:0;flex:none;height:var(--reel-h); border-radius:var(--r-l);overflow:hidden;background:var(--band-inset); box-shadow:var(--sh-media)} .reel-card :is(img,video){display:block;height:100%;width:auto;object-fit:cover; /* snímek nesmí jít chytit a odtáhnout — přebilo by to tažení pásu */ -webkit-user-drag:none;user-select:none;pointer-events:none} /* Kurzor pásu — limetkový kroužek s výzvou, tentýž nápad jako u karet prací. Tvar je tu zopakovaný, a ne sdílený: .ccard-puck žije ve stylu STRÁNKY, takže kdyby si ho systém tahal odtamtud, závisel by systém na stránce — a to je horší vada než deset řádků navíc. Až se karty prací budou příště otevírat, patří obojí sloučit do jedné komponenty. Kroužek stojí VEDLE posuvníku, ne uvnitř: uvnitř by odjížděl s obsahem. */ .reel-cursor{position:absolute;z-index:var(--z-base);left:0;top:0; pointer-events:none;transform:translate3d(var(--cx,0),var(--cy,0),0)} .reel-puck{display:grid;place-items:center; width:clamp(104px,12vw,158px);aspect-ratio:1;border-radius:50%; background:var(--lime);color:var(--lime-ink); font-family:var(--fb);font-weight:600;font-size:var(--t-sm); translate:-50% -50%; /* ze scale(0) by kroužek vyskočil z bodu; zbytková velikost dá dojem, že tam byl a jen se přiblížil — stejně jako u karet */ scale:.9;opacity:0; transition:scale var(--d-base) var(--ease),opacity var(--d-base) var(--ease)} @media (hover:hover) and (pointer:fine){ .reel-band.is-peek .reel{cursor:none} .reel-band.is-peek .reel-puck{scale:1;opacity:1} } @media (max-width:560px){ .reel-track{gap:var(--g-xs)} .reel-cursor{display:none} } @media (prefers-reduced-motion:reduce){ .reel{scroll-behavior:auto} .reel-puck{transition: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}