/* ============================================================ base.css — reset, písma, typografie, česká sazba ============================================================ */ /* ---------- PÍSMA (self-hosted, subsetované) ---------------- */ /* Textové písmo. Instrument Sans, OFL — licence leží vedle souboru ve fonts/instrumentsans-OFL.txt. Variabilní na jedné ose (400–700); šířková osa je instancovaná na 100, protože kondenzovaný řez na webu nikde nepoužíváme a stála by za dvě osy zbytečné bajty. Subset je týž jako u Newsreaderu — 342 znaků, celá česká sazba. */ @font-face { font-family: "Instrument Sans"; src: url("../fonts/instrumentsans-var.woff2") format("woff2-variations"), url("../fonts/instrumentsans-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Sentient"; src: url("../fonts/sentient-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } /* Nadpisové písmo. Newsreader, OFL — licence leží vedle souboru ve fonts/newsreader-OFL.txt. Instancované na jednu tloušťku (400) a jednu optickou velikost (44), protože v nadpisech nic jiného nepoužíváme; proměnná verze by za dvě osy stála pětkrát víc bajtů. Subset je stejný jako u Instrument Sans — 342 znaků, celá česká sazba. */ @font-face { font-family: "Newsreader"; src: url("../fonts/newsreader.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrainsmono.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } /* ---------- RESET ------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; /* Pojistka proti vodorovnému přetečení musí být na , ne na : na by se z něj stal scroll kontejner a rozbil by IntersectionObserver i position: sticky. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Lenis vyhlazuje kolečko myši. Jeho vlastní posun koliduje se `scroll-behavior: smooth`, takže tam, kde Lenis běží, nativní vyhlazení vypínáme. Bez toho nefungují odkazy s kotvou (#objednani a spol.). */ html.lenis, html.lenis body { height: auto; } html.lenis-smooth { scroll-behavior: auto !important; } html.lenis-stopped { overflow: hidden; } body { margin: 0; background: var(--bg); color: var(--ink-2); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; font-synthesis-weight: none; /* MEZERA. Instrument Sans má mezeru 0,200 em — přesně jako Switzer před ním — jenže o 5 % širší písmena (n = 0,599 proti 0,572). Poměr mezery ke kuželce se tím posunul a slova se začala slepovat: „S čím pomáhám“ vypadalo jako dvě slova, „Rezervovat termín“ jako jedno. POZOR NA JEDNOTKU: em se u word-spacing vyhodnotí TADY (proti velikosti písma body) a dál se dědí jako pevná délka — ne jako poměr. Ze 0,028 em je tedy asi 0,54 px pro celý web: u popisků na 12,5 px to dělá 0,043 em, u nadpisu na 80 px jen 0,007. Vychází to naopak dobře — drobná sazba potřebuje mezeru širší, velká užší —, ale kdo bude číslo měnit, musí vědět, že mění pixely. Výrok si ji vypíná sám (viz _l6.css). */ word-spacing: .028em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; } h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, canvas, video { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; } table { border-collapse: collapse; } /* ---------- FOCUS ------------------------------------------- */ :focus { outline: none; } :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; } @supports not selector(:focus-visible) { :focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); } } ::selection { background: var(--tide-soft); color: var(--ink); } /* ---------- TYPOGRAFIE -------------------------------------- */ h1, h2, h3, h4, .h1, .h2, .h3, .h4 { color: var(--ink); font-family: var(--font-display); /* Nadpisové písmo je nařezané na jednu tloušťku. Kdyby prohlížeč dostal 500, dopočítal by si tučnost sám a text by zhoustl — proto natvrdo 400 a synthesis vypnutá. */ font-weight: 400; font-synthesis: none; hyphens: none; text-wrap: balance; } .h1, h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); font-weight: 400; } .h2, h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); } .h3, h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 400; } .h4, h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -.005em; font-weight: 400; } p { text-wrap: pretty; max-width: var(--measure); } .lede { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--ink-2); max-width: var(--measure-lede); letter-spacing: -.005em; } .small { font-size: var(--fs-small); line-height: var(--lh-small); } /* Emoční kurzíva — Katčin hlas. Max 3–5 slov na stránku. */ .em, em { font-family: var(--font-italic); font-style: italic; font-weight: 400; letter-spacing: 0; } /* Kurzíva uvnitř nadpisu je TÁŽ rodina, jen skloněný řez — dvě různá serifová písma vedle sebe v jednom řádku by četl i laik jako chybu. Zvětšení odpadá: dřív dorovnávalo rozdíl mezi kurzívou a groteskem, ze kterých byly nadpisy sázené před přechodem na Newsreader; dnes by jen rozhoupalo účaří. */ h1 .em, h2 .em, h3 .em, h1 em, h2 em, h3 em { font-family: var(--font-display); font-size: 1em; letter-spacing: inherit; } /* Technický popisek — POUZE čísla a měřené hodnoty */ .mono { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; font-weight: 500; color: var(--ink-3); font-feature-settings: "tnum" 1, "zero" 1; } .mono--plain { text-transform: none; letter-spacing: .02em; } /* Číslo v textu (1 500 Kč, 75 min, ≈ 9 cyklů/min) word-spacing stahuje nezlomitelnou mezeru v tisících — v mono písmu je široká jako celá číslice a dělá v čísle díru. */ .num { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -.01em; word-spacing: -.24em; color: var(--ink); } /* ---------- POMOCNÉ ----------------------------------------- */ .vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip { position: absolute; left: var(--edge); top: -100px; z-index: 200; background: var(--tide); color: #fff; padding: var(--s-3) var(--s-5); border-radius: var(--radius); font-weight: 500; text-decoration: none; transition: top var(--dur-micro) var(--ease-out); } .skip:focus { top: var(--s-3); } /* Zalomení nadpisů podle šířky — žádný vdovec */ .br-sm { display: none; } @media (min-width: 640px) { .br-sm { display: inline; } } .br-md { display: none; } @media (min-width: 900px) { .br-md { display: inline; } } .br-lg { display: none; } @media (min-width: 1200px) { .br-lg { display: inline; } } /* ---------- FILMOVÉ ZRNO ----------------------------------- Statické. Nevypíná se při reduced-motion — nehýbe se. */ .grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .028; mix-blend-mode: multiply; background-image: var(--grain-src); background-size: 220px 220px; } @media print { .grain, .breathline { display: none; } }