/* ===================================================================== PNDA — základní vrstva Reset · typografie · mřížka · rozvržení · utility · značka Barvy, prostor a časování se berou VÝHRADNĚ z tokens.css. Komponenty (.btn, .card, .input …) do tohoto souboru nepatří. ===================================================================== */ /* ── Reset ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre { margin: 0; } ul, ol { margin: 0; } /* Seznamy použité jako strukturální obal (navigace, dlaždice) */ [role="list"], ul[class], ol[class] { list-style: none; padding: 0; } img, picture, video, canvas, iframe { display: block; max-width: 100%; } img, video { height: auto; } svg { max-width: 100%; } /* Formulářové prvky dědí písmo i barvu dokumentu */ input, button, textarea, select, optgroup { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; } button { background: none; border: 0; padding: 0; cursor: pointer; } textarea { resize: vertical; } table { border-collapse: collapse; border-spacing: 0; } fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } legend { padding: 0; } /* Kotvy nesmí zmizet pod lepivou horní lištou */ :target { scroll-margin-block-start: calc(var(--topbar-h) + var(--space-6)); } ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--fg); } /* ── Kořen dokumentu ───────────────────────────────────────────────── */ /* POZOR: barvy patří na , protože tam sedí .pnda-p4/.pnda-p5 + data-theme. */ html { min-height: 100dvh; background: var(--surface-1); color: var(--fg); font-family: var(--pnda-font-ui); font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; tab-size: 2; } body { min-height: 100dvh; background: inherit; color: inherit; font-family: inherit; font-size: var(--text-base); font-weight: 500; line-height: inherit; overflow-wrap: break-word; } /* ── Typografie ────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--pnda-font-ui); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; color: var(--fg); } h1, .h1 { font-size: var(--text-h1); font-weight: 800; letter-spacing: -0.025em; } h2, .h2 { font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.02em; } h3, .h3 { font-size: var(--text-h3); font-weight: 700; } h4 { font-size: var(--text-lg); font-weight: 600; } h5 { font-size: var(--text-base); font-weight: 600; } h6 { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg-muted); } /* Display — jediné místo mimo logo, kde se smí použít logotypové písmo */ .display { font-family: var(--pnda-font-logotype); font-weight: 400; font-size: var(--text-display); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; color: var(--fg); } p { text-wrap: pretty; } .lead { max-width: 68ch; font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem); font-weight: 500; line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; } small, .small { font-size: var(--text-sm); line-height: 1.45; } strong, b { font-weight: 700; color: var(--fg); } .muted { color: var(--fg-muted); } a { color: var(--accent); font-weight: 600; text-decoration: none; text-underline-offset: 0.18em; transition: color var(--dur-fast) var(--ease); } a:hover { text-decoration: underline; text-decoration-thickness: 0.08em; } ul, ol { padding-inline-start: var(--space-6); } li + li { margin-block-start: var(--space-1); } blockquote { padding-inline-start: var(--space-5); border-inline-start: 3px solid var(--accent); color: var(--fg-muted); font-style: normal; } hr { height: 1px; margin-block: var(--space-7); border: 0; background: var(--line); } code, kbd, samp, pre, .mono { font-family: var(--pnda-font-mono); font-size: 0.925em; font-weight: 500; } code { padding: 0.12em 0.36em; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--fg); } pre { overflow-x: auto; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-3); line-height: 1.5; } pre code { padding: 0; background: none; border-radius: 0; } /* Čísla, tickery, skóre — vždy monospace s tabulárními číslicemi */ .num { font-family: var(--pnda-font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; text-align: right; } /* Textová část loga — nikdy neobsahuje „.cz“ */ .wordmark { font-family: var(--pnda-font-logotype); font-weight: 400; line-height: 1; letter-spacing: -0.045em; text-transform: uppercase; color: currentColor; } /* ── Rail — centrovaná šířka marketingu ────────────────────────────── */ .rail { width: var(--rail); margin-inline: auto; } /* ── Mřížka ────────────────────────────────────────────────────────── */ /* --cols: 2 (base) → 4 (sm) → 8 (lg) → 12 (xl) */ .grid { --cols: 2; display: grid; gap: var(--space-6); grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } .grid--tiles { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .grid--tight { gap: var(--space-4); } .grid--wide { gap: var(--space-8); } /* Spany: mimo dosah dostupných sloupců se roztáhnou na celou řádku (1 / -1). */ .span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; } .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 { grid-column: 1 / -1; } @media (min-width: 560px) { .grid { --cols: 4; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } } @media (min-width: 1100px) { .grid { --cols: 8; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } } @media (min-width: 1440px) { .grid { --cols: 12; } .span-9 { grid-column: span 9; } .span-10 { grid-column: span 10; } .span-11 { grid-column: span 11; } .span-12 { grid-column: span 12; } } /* ── Stránka ───────────────────────────────────────────────────────── */ .page { width: 100%; max-width: var(--page-max); margin-inline: auto; } /* Stránka s pravým informačním sloupcem — dvousloupcová až od 2xl */ .page--aside { display: grid; gap: var(--space-8); } .page__main { min-width: 0; } .page__aside { min-width: 0; } @media (min-width: 1600px) { .page--aside { grid-template-columns: minmax(0, 1fr) var(--aside-w); } .page__aside { position: sticky; top: calc(var(--topbar-h) + var(--space-6)); align-self: start; } } /* ── Stack a Row ───────────────────────────────────────────────────── */ .stack { --gap: var(--space-4); display: flex; flex-direction: column; gap: var(--gap); min-width: 0; } .row { --gap: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); min-width: 0; } .row--between { justify-content: space-between; } .row--center { justify-content: center; } .row--end { justify-content: flex-end; } .spacer { flex: 1 1 auto; } /* ── Utility ───────────────────────────────────────────────────────── */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } /* Přeskočit na obsah — viditelný až při fokusu */ .skiplink { position: absolute; z-index: var(--z-toast); top: var(--space-2); left: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; transform: translateY(-200%); transition: transform var(--dur) var(--ease); } .skiplink:focus-visible, .skiplink:focus { transform: translateY(0); } .hide { display: none !important; } /* Skryté od md (860px) */ @media (min-width: 860px) { .hide-md { display: none !important; } } /* Viditelné až od md (860px). Schválně max-width: nad breakpointem se nesmí přepsat vlastní display prvku (např. .row.show-md by při `display: revert` přestal být flex). */ @media (max-width: 859.98px) { .show-md { display: none !important; } } .text-center { text-align: center; } .text-right { text-align: right; } .nowrap { white-space: nowrap; } .truncate { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .full { width: 100%; } .mt-2 { margin-block-start: var(--space-2); } .mt-4 { margin-block-start: var(--space-4); } .mt-6 { margin-block-start: var(--space-6); } .mt-8 { margin-block-start: var(--space-8); } .mb-2 { margin-block-end: var(--space-2); } .mb-4 { margin-block-end: var(--space-4); } .mb-6 { margin-block-end: var(--space-6); } .mb-8 { margin-block-end: var(--space-8); } /* ── Ikony ─────────────────────────────────────────────────────────── */ .icon { width: 1.25em; height: 1.25em; flex: none; stroke-width: 1.75; vertical-align: middle; } /* ── Značka ────────────────────────────────────────────────────────── */ /* Inline SVG loga (varianta currentcolor). Žádné stíny, přechody ani rotace. */ .mark { display: inline-block; height: 32px; width: auto; flex: none; vertical-align: middle; overflow: visible; } .mark--sm { height: 24px; } .mark--lg { height: 48px; } .mark--hero { height: clamp(120px, 18vw, 240px); } .mark [data-row] { fill: currentColor; } /* Prostřední (akcentní) řádek přetéká oba krajní — to je celá myšlenka značky */ .mark [data-row="accent"] { fill: var(--accent); } .logo { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--fg); font-weight: 700; text-decoration: none; } .logo:hover { text-decoration: none; } .logo .wordmark { font-size: 1.25rem; } /* ── Fokus ─────────────────────────────────────────────────────────── */ /* Radius si řeší každá komponenta sama — `inherit` by přebilo vlastní zaoblení prvku (např. .skiplink) hodnotou rodiče. */ :focus-visible { outline: none; box-shadow: var(--ring); } /* ── Omezený pohyb ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } } /* ── Tisk ──────────────────────────────────────────────────────────── */ @media print { .no-print { display: none !important; } html, body { background: #fff; color: #000; } a { color: inherit; text-decoration: underline; } pre, blockquote { break-inside: avoid; } }