/* ========================================================================= hp-01 — design systém webu Servis HP (www.servis-hp.eu) Nezávislý servis notebooků, počítačů, monitorů a tiskáren HP. Vizuální jazyk: „Pruh“. Web pokrývá čtyři druhy zařízení, takže potřebuje silnou orientační kostru — každá sekce se hlásí vodorovným jantarovým pruhem. Uhlová čerň a grafit na text a tmavé plochy, pískový podklad, jantarová (odstín 38–40°) jako jediný akcent. Žádné měkké stíny: místo nich plné barevné odsazení a 2px hrany. Zaoblení jen 3 px, aby plochy působily dílensky, ne aplikačně. Mechanika (přístupnost, zaměření, chování v úzkém okně, CLS) se drží kontraktu. POZOR (past 11.8): tokeny se definují právě jednou, v @layer tokens. Dokumentace i favikona čtou poslední výskyt tokenu, takže přepis téhož tokenu v pozdější vrstvě by do styleguide poslal jinou barvu, než jakou návštěvník vidí. ========================================================================= */ @layer tokens, base, layout, components, utils, fix; @layer tokens { :root { /* --- barvy: uhel, grafit, písek, jantar ------------------------------- Všechny poměry níž jsou spočítané podle WCAG (relativní jas 0,2126R + 0,7152G + 0,0722B na linearizovaných složkách), ne odhadnuté. Běžný text drží nejméně 7:1 (AAA), text na ploše tlačítka nejméně 4,5:1 podle sekce 2.3 kontraktu. -------------------------------- */ --ink: #17130D; /* uhlová čerň; 16,72:1 na --bg, 15,30:1 na --surface, 13,59:1 na --surface-2 — AAA na všech světlých plochách */ --ink-2: #2B241A; /* grafit; 13,86:1 na --bg, 11,26:1 na --surface-2 */ --muted: #4E4436; /* doplňkový text; 8,62:1 na --bg, 7,88:1 na --surface, 7,00:1 na --surface-2 — nejhorší případ přesně na AAA */ --line: #D9CFBA; /* běžná linka na písku */ --line-2: #B6A88B; /* silnější linka a rámečky vstupů */ --bg: #F8F3E9; /* světle pískový podklad stránky */ --surface: #F0E9DA; /* první odstín plochy (zebra v tabulce, .aside__box) */ --surface-2:#E6DCC7; /* druhý odstín (hlavičky tabulek, .section--surface) */ /* Jantar: dvě hodnoty, protože jedna to neumí obojí. --accent je tmavý jantar (odstín 38°) a nese BÍLÝ text v poměru 8,56:1 — tím splňuje požadavek kontraktu „musí unést bílý text“ a zároveň z něj vzniká favikona. Plný, svítivý jantar --amber bílý text neunese (byly by to 2,0:1), proto na něm stojí jen plochy s TMAVÝM textem --on-amber (8,40:1). Rozhodnutí: hlavní tlačítko = jantarová plocha + tmavý text. Viz .btn--pri. */ --accent: #6B4400; /* tmavý jantar; bílý text 8,56:1 — hrany, ikony, favikona */ --accent-d: #4E3100; /* hover tmavého jantaru; bílý text 11,91:1 */ --accent-l: #F2BE55; /* světlý jantar na tmavé plochy; 8,08:1 na --hero-3, 7,29:1 na --dark-3, 9,35:1 na --dark-2 */ --amber: #E9A31C; /* signální jantar: pruhy, hrany, plocha hlavního tlačítka */ --amber-d: #C9880C; /* hover jantarové plochy; tmavý text 6,06:1 */ --on-amber: #1A150E; /* text NA jantarové ploše; 8,40:1 na --amber, 6,06:1 na --amber-d */ --link: #5C3B00; /* odkaz v textu; 9,13:1 na --bg, 8,35:1 na --surface, 7,41:1 na --surface-2 — AAA i na nejtmavší ploše */ /* --- stavy formuláře ---------------------------------------------- */ --ok: #1F5A33; /* 7,13:1 na --ok-bg, 7,39:1 na --bg */ --ok-bg: #E9F2E6; --ok-line: #A9C9A8; --err: #8E2216; /* 7,81:1 na --err-bg, 7,94:1 na --bg */ --err-bg: #FBEFEC; --warn-bg: #FBF0D8; /* --ink 16,34:1, --muted 8,42:1 */ --warn-line:#E0BE6A; /* --- tmavý pás ------------------------------------------------------ Pás je jednolitý (žádný přechod), ale všechny tři zarážky musí podle sekce 3 kontraktu existovat. --hero-3 je nejsvětlejší, proti ní se měří text na tmavém (past 11.6). ------------------------------- */ --hero-1: #1A1813; /* horní zarážka = skutečná barva pásu */ --hero-2: #262117; /* střední */ --hero-3: #322C22; /* dolní, nejsvětlejší — referenční pro kontrast */ --on-dark: #E7DFD0; /* text na tmavém; 13,40:1 na --hero-1, 10,44:1 na --hero-3 */ --dark-tx: #D8CFBE; /* sekundární text na tmavém; 8,95:1 na --hero-3, 8,07:1 na --dark-3 — nejhorší případ, pořád AAA */ --dark-2: #262117; /* plochy uvnitř tmavých pásů (.hero__card, .drawer__close) */ --dark-3: #3A3328; /* oddělovače a rámečky na tmavém */ --sel: #F6D68A; /* podbarvení výběru textu; --ink 13,13:1 */ --note-bg: #F1EDE2; /* podklad poznámkového rámečku; --ink 15,81:1 */ --map-fill: #E6DCC7; /* výplň obrysu ČR */ --map-line: #A2937A; /* obrys ČR */ /* --- písmo ---------------------------------------------------------- Jen systémové rodiny: CSP má font-src 'self' a nic se nestahuje. Škála je záměrně vyšší než u sesterských webů — nadpis stránky má na telefonu 38 px a od 1280 px 60 px. Web nabízí čtyři zařízení a nadpis je první orientační bod. ------------------------------ */ --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace; --fs-body: 17px; --fs-sm: 0.9375rem; /* 15 px */ --fs-xs: 0.8125rem; /* 13 px */ --fs-h1: clamp(2.375rem, 1.55rem + 3.4vw, 3.75rem); /* 38 → 60 px */ --fs-h2: clamp(1.625rem, 1.35rem + 1.15vw, 2.125rem); /* 26 → 34 px */ --fs-h3: 1.1875rem; /* 19 px */ --fs-h4: 1rem; /* 16 px */ --lh: 1.62; --measure: 72ch; --wrap: 1160px; --wrap-narrow: 780px; /* --- tvarosloví ----------------------------------------------------- Malé zaoblení, silné linky, nulové stíny. „Stín“ je plné odsazení v barvě — plocha vypadá jako vysazený plech, ne jako karta v mlze. */ --r: 3px; --r-sm: 2px; --bw: 2px; /* základní tloušťka linky */ --bw-2: 6px; /* tloušťka orientačního pruhu */ --shadow-1: none; --shadow-2: none; --offset: 6px 6px 0 var(--amber); --offset-d: 6px 6px 0 var(--ink); --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 36px; --sp-5: 56px; --sp-6: 84px; --sp-7: 112px; } } @layer base { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh); font-synthesis-weight: none; text-rendering: optimizeLegibility; overflow-wrap: break-word; } /* Nadpisy jsou tučné a sražené. Záporné prostrkání roste s velikostí, protože při 60 px vypadá normální mezera mezi písmeny jako díra. */ h1, h2, h3, h4 { color: var(--ink); margin: 0 0 var(--sp-2); font-weight: 800; line-height: 1.12; text-wrap: balance; } h1 { font-size: var(--fs-h1); letter-spacing: -.03em; } h2 { font-size: var(--fs-h2); margin-top: var(--sp-5); letter-spacing: -.02em; line-height: 1.16; } h3 { font-size: var(--fs-h3); margin-top: var(--sp-4); font-weight: 800; letter-spacing: -.012em; line-height: 1.25; } h4 { font-size: var(--fs-h4); font-weight: 800; letter-spacing: -.008em; } h2:first-child, h3:first-child, h4:first-child { margin-top: 0; } p, ul, ol, table, dl { margin: 0 0 var(--sp-3); } li { margin-bottom: var(--sp-1); } strong, b { font-weight: 800; } small { font-size: var(--fs-xs); } img, svg { max-width: 100%; } hr { border: 0; border-top: var(--bw) solid var(--line); margin: var(--sp-5) 0; } /* Předěl mezi formulářem a vysvětlujícím textem pod ním. */ hr.oddel { border-top-width: var(--bw-2); border-top-color: var(--amber); margin: var(--sp-5) 0 var(--sp-4); } /* Past 11.5: holé `a { … }` v pozdější vrstvě by přebilo barvu textu v tlačítkách. Barva odkazu se proto nastavuje jen v textových kontextech; tady zůstává čistě podtržení, které tlačítkům nevadí, protože .btn si text-decoration ruší samo. */ a { text-underline-offset: .16em; text-decoration-thickness: .09em; } .prose a, p a, li a, td a, dd a { color: var(--link); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: .12em; } .prose a:hover, p a:hover, li a:hover, td a:hover, dd a:hover { color: var(--ink); background: var(--sel); text-decoration-color: var(--ink); } /* Zaměření je hranaté a tlusté — patří k tvarosloví, ne jen k přístupnosti. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 0; } .hdr :focus-visible, .drawer :focus-visible, .hero :focus-visible, .ftr :focus-visible, .sticky :focus-visible { outline-color: var(--accent-l); } ::selection { background: var(--sel); color: var(--ink); } [hidden] { display: none !important; } /* Značky, které generátor vypisuje bez třídy. */ table { border-collapse: collapse; width: 100%; } label { font-weight: 700; } fieldset { border: 0; padding: 0; margin: 0; } legend { padding: 0; } input, select, textarea, button { font-family: inherit; } details { border: var(--bw) solid var(--line-2); border-radius: var(--r); background: var(--bg); } summary { cursor: pointer; font-weight: 800; } } @layer layout { .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-2); } @media (min-width: 720px) { .wrap { padding-inline: var(--sp-3); } } .prose { max-width: var(--measure); } /* Mezititulky uvnitř článku jsou o stupeň menší než nadpis sekce a mají vlevo svislý jantarový pruh — hlavní motiv webu. Pruh vede po celé výšce nadpisu, takže dvouřádkový mezititulek dostane vyšší pruh. */ .prose h2 { font-size: clamp(1.4375rem, 1.25rem + .8vw, 1.75rem); border-left: var(--bw-2) solid var(--amber); padding-left: var(--sp-2); } .prose h3 { font-size: 1.125rem; border-left: var(--bw) solid var(--line-2); padding-left: var(--sp-2); } .prose > :where(h2, h3) { margin-left: 0; } .section { padding-block: var(--sp-6); } .section--tight { padding-block: var(--sp-4); } /* Pruh, kterým se sekce hlásí: tenká jantarová linka na horní hraně. */ .section--surface { background: var(--surface); border-top: var(--bw) solid var(--amber); } .section--surface + .section--surface { border-top: 0; padding-top: 0; } .grid { display: grid; gap: var(--sp-3); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .cols { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } /* Postranní sloupec 360 px dává uvnitř ~310 px, tedy ~40 znaků na řádek. Užší sloupec láme každou větu do pěti řádků. */ @media (min-width: 980px) { .cols { grid-template-columns: minmax(0,1fr) 360px; gap: var(--sp-5); } } /* Rozcestník nemá postranní sloupec: mřížky jdou přes celý obal, text si drží --measure. */ .rozc { display: grid; gap: var(--sp-4); } .rozc > * { min-width: 0; } .rozc > .prose { max-width: var(--measure); } /* Objednávkový pruh na stránkách bez postranního sloupce. Grafitová plocha s jantarovou hranou vlevo — stejný motiv jako karty, jen v tmavé variantě, aby se pruh nepřehlédl. */ .ctapas { display: grid; gap: var(--sp-3); align-items: center; background: var(--hero-1); color: var(--on-dark); border-left: var(--bw-2) solid var(--amber); border-radius: 0 var(--r) var(--r) 0; padding: var(--sp-4); } @media (min-width: 860px) { .ctapas { grid-template-columns: minmax(0,1fr) auto; gap: var(--sp-4); } } .ctapas h2 { margin: 0 0 6px; font-size: var(--fs-h3); color: #fff; border: 0; padding: 0; } .ctapas__txt { min-width: 0; } .ctapas p { margin: 0; color: var(--dark-tx); font-size: var(--fs-sm); max-width: 62ch; } .ctapas__akce { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: #fff; padding: 12px 18px; font-weight: 800; text-decoration: none; border-bottom: var(--bw) solid var(--amber); } .skip:focus { left: 0; color: #fff; } } @layer components { /* ---------- hlavička ---------------------------------------------------- Dvouřádková a světlá, nahoře uhlový pruh. Sedm českých popisků v menu měří přes 800 px; s logem, dvěma telefony a objednávkovým tlačítkem se do jednoho řádku nevejdou. Vlastní řádek pro menu ten tlak ruší. */ .hdr { background: var(--bg); color: var(--ink); border-top: var(--bw-2) solid var(--ink); border-bottom: var(--bw) solid var(--line-2); position: relative; z-index: 60; } .hdr__top { display: flex; align-items: center; gap: var(--sp-3); min-height: 76px; min-width: 0; } .hdr__brand { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; min-width: 0; min-height: 44px; padding-block: 2px; } /* Značka je hranatý uhlový čtverec s jantarovou spodní hranou — zmenšenina celého motivu webu. */ .hdr__mark { flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--ink); color: var(--accent-l); border-bottom: 4px solid var(--amber); display: grid; place-items: center; } .hdr__id { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .hdr__name { font-weight: 800; font-size: 1.125rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; color: var(--ink); white-space: nowrap; } /* Placeholdery pro údaje doplňované až v prohlížeči mají rezervovanou výšku — bez ní se stránka po doplnění posune a CLS přestane být nula. */ .hdr__firm { font-family: var(--mono); font-size: .75rem; color: var(--muted); min-height: 16px; line-height: 16px; white-space: nowrap; } .hdr__contact { display: none; text-align: right; } @media (min-width: 860px) { .hdr__contact { display: block; } } .hdr__tels { display: flex; gap: 20px; justify-content: flex-end; min-height: 27px; } .hdr__tels .tel { color: var(--link); font-size: 1.0625rem; font-weight: 800; } .hdr__tels .tel:hover { color: var(--ink); } .hdr__hours { font-family: var(--mono); font-size: .75rem; color: var(--muted); min-height: 16px; line-height: 16px; } .hdr a.hdr__cta { display: none; } @media (min-width: 1060px) { .hdr a.hdr__cta { display: inline-flex; min-height: 44px; } } .burger { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 10px 14px; font: inherit; font-size: .9375rem; font-weight: 800; cursor: pointer; min-height: 44px; } .burger:hover { background: var(--amber); color: var(--on-amber); border-color: var(--on-amber); } /* Druhý řádek: menu má celou šířku samo pro sebe. Aktivní položka nese tlustý jantarový pruh dole — tentýž motiv jako sekce. */ .hdr__nav { display: none; } @media (min-width: 900px) { .burger { display: none; } .hdr__nav { display: flex; gap: 0; align-items: center; flex-wrap: nowrap; border-top: var(--bw) solid var(--line); min-width: 0; } .hdr__nav a { text-decoration: none; color: var(--ink-2); padding: 13px 13px; font-size: .9375rem; font-weight: 700; white-space: nowrap; border-bottom: 4px solid transparent; margin-bottom: -2px; } .hdr__nav a:hover { color: var(--ink); background: var(--surface); border-bottom-color: var(--line-2); } .hdr__nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--amber); } } /* ---------- vysouvací panel ---------- */ .drawer { position: fixed; inset: 0 0 0 auto; width: min(380px, 92vw); z-index: 120; background: var(--hero-1); color: var(--on-dark); border-left: var(--bw-2) solid var(--amber); padding: var(--sp-2) var(--sp-2) var(--sp-5); overflow-y: auto; transform: translateX(101%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; } .drawer.is-on { transform: translateX(0); visibility: visible; transition: transform .22s ease, visibility 0s; } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); } .drawer__title { font-family: var(--mono); font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-l); } .drawer__close { background: var(--dark-2); color: var(--on-dark); border: var(--bw) solid var(--dark-3); border-radius: var(--r); min-width: 44px; min-height: 44px; font: inherit; font-size: 1.25rem; cursor: pointer; line-height: 1; } .drawer__close:hover { border-color: var(--accent-l); color: #fff; } .drawer nav { display: grid; gap: 2px; } .drawer nav a { display: block; padding: 13px 12px; text-decoration: none; color: var(--on-dark); font-weight: 700; min-height: 44px; border-left: 3px solid transparent; } .drawer nav a:hover { background: var(--dark-2); border-left-color: var(--dark-3); color: #fff; } .drawer nav a[aria-current="page"] { background: var(--dark-2); border-left-color: var(--amber); color: #fff; } .drawer__cta { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-3); } .drawer__sep { border-top: var(--bw) solid var(--dark-3); margin: var(--sp-3) 0 var(--sp-2); padding-top: var(--sp-2); font-size: var(--fs-xs); color: var(--dark-tx); } .drawer__sep a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; color: var(--accent-l); } .scrim { position: fixed; inset: 0; background: rgba(23,19,13,.62); z-index: 110; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s linear .22s; } .scrim.is-on { opacity: 1; visibility: visible; transition: opacity .22s ease, visibility 0s; } /* ---------- tlačítka ---------------------------------------------------- ROZHODNUTÍ o jantarovém tlačítku. Signální jantar --amber (#E9A31C) unese bílý text jen v poměru 2,0:1, takže bílý text je vyloučený. Místo ztmavení jantaru do měděné (to by srazilo odstín pod 30° a web by splynul se sesterským) stojí hlavní tlačítko na jantarové ploše s TMAVÝM textem --on-amber: 8,40:1, skoro dvojnásobek požadovaných 4,5:1; v hoveru na --amber-d pořád 6,06:1. Token --accent zůstává tmavý jantar #6B4400, který bílý text unese (8,56:1) — z něj se kreslí favikona a stavy zaměření. Stín žádný: 2px uhlová hrana a v hoveru posun o 2 px na plné odsazení v barvě uhlu. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 13px 22px; border-radius: var(--r); font: inherit; font-weight: 800; font-size: .9375rem; letter-spacing: .01em; text-decoration: none; border: var(--bw) solid transparent; cursor: pointer; text-align: center; transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .08s ease; } .btn:active { transform: translate(1px, 1px); } .btn--pri { background: var(--amber); color: var(--on-amber); border-color: var(--on-amber); } .btn--pri:hover { background: var(--amber-d); color: var(--on-amber); box-shadow: 3px 3px 0 var(--ink); } .btn--sec { background: var(--bg); color: var(--ink); border-color: var(--ink); } .btn--sec:hover { background: var(--surface-2); color: var(--ink); box-shadow: 3px 3px 0 var(--amber); } .btn--ghost { background: transparent; color: var(--on-dark); border-color: var(--dark-3); } .btn--ghost:hover { background: var(--dark-2); color: #fff; border-color: var(--accent-l); } .btn--sm { min-height: 44px; padding: 9px 15px; font-size: var(--fs-sm); } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); } /* ---------- telefon (vkládá se až v prohlížeči) ---------- */ .tel { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; text-decoration: none; white-space: nowrap; } .tel__i { flex: 0 0 auto; } .tel:hover { text-decoration: underline; } .ftr .tel--light, .drawer .tel--light { color: #fff; } /* ---------- hero -------------------------------------------------------- Jednolitý grafitový pás, pod ním silný jantarový pruh. Rozvržení je ZÁMĚRNĚ asymetrické: nadpis a perex drží levé dvě třetiny, karta s postupem stojí vpravo, posunutá dolů, a přesahuje přes spodní hranu pásu do světlé sekce pod ním. */ .hero { background: var(--hero-1); color: var(--on-dark); border-bottom: 10px solid var(--amber); padding-block: var(--sp-6) var(--sp-5); position: relative; } .hero h1 { color: #fff; max-width: 17ch; } .hero__main { min-width: 0; } .hero__eyebrow { font-family: var(--mono); font-size: .8125rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-l); margin: 0 0 var(--sp-2); } .hero__lead { font-size: 1.1875rem; color: var(--on-dark); max-width: 54ch; margin-bottom: var(--sp-4); } /* Odkaz v perexu stojí na tmavé ploše; --link by tu měl kontrast pod 2:1. */ .hero__lead a { color: var(--accent-l); text-decoration-color: var(--accent-l); } .hero__lead a:hover { color: #fff; background: transparent; text-decoration-color: #fff; } .hero__note { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--dark-tx); max-width: 70ch; } .hero .btn--sec { background: transparent; color: #fff; border-color: var(--on-dark); } .hero .btn--sec:hover { background: var(--dark-2); color: #fff; box-shadow: 3px 3px 0 var(--amber); } .hero__grid { display: grid; gap: var(--sp-4); align-items: start; position: relative; z-index: 2; } .hero__card { background: var(--dark-2); border: var(--bw) solid var(--dark-3); border-top: var(--bw-2) solid var(--amber); border-radius: 0 0 var(--r) var(--r); padding: var(--sp-3); } .hero__card h2 { color: var(--accent-l); font-family: var(--mono); font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin: 0 0 var(--sp-3); border: 0; padding: 0; } .hero__card p { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--dark-tx); } /* Překryv se zapíná až tam, kde je vpravo místo. Posouvá se transformem, ne marginem: transform nemění tok, takže pás nezmění výšku a karta se nedostane za pravý okraj obalu. Sousední sekci se o stejnou hodnotu zvedne horní odsazení, aby karta nepřekryla její text. */ @media (min-width: 1080px) { .hero { padding-bottom: var(--sp-4); } .hero__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-5); } .hero__card { transform: translateY(var(--sp-5)); box-shadow: var(--offset-d); } .hero + .section, .hero + .section--surface { padding-top: var(--sp-7); } } /* ---------- postup: velké jantarové číslice bez kolečka i rámečku, sedící na účaří nadpisu kroku — proto baseline, ne start ----------- */ .hsteps { counter-reset: hk; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); } .hsteps li { counter-increment: hk; display: grid; grid-template-columns: 1.7em 1fr; gap: 0 12px; margin: 0; align-items: baseline; } .hsteps li::before { content: counter(hk); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--accent-l); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } /* Zalomení není kosmetika: popisek v má nowrap, takže bez něj je nejmenší šířka hlavičky kroku součtem názvu a popisku — karta se pak nezúží a na 360 px se stránka posouvá do strany. */ .hsteps__head { display: flex; flex-wrap: wrap; gap: 2px 12px; justify-content: space-between; align-items: baseline; } .hsteps b { color: #fff; font-size: 1rem; } .hsteps span { display: block; color: var(--dark-tx); font-size: var(--fs-xs); line-height: 1.5; } .hsteps em { font-family: var(--mono); font-style: normal; color: var(--accent-l); font-size: .6875rem; font-weight: 700; white-space: nowrap; text-align: right; } /* ---------- pás důvěry: řádek, který se přelévá, ne mřížka (v mřížce se šířka sloupce řídí nejdelší položkou a kratší se natahují) ------- */ .trust { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 28px; list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-3) 0 0; border-top: var(--bw) solid var(--dark-3); } .trust li { display: flex; align-items: center; gap: 8px; color: var(--on-dark); font-size: var(--fs-sm); font-weight: 700; margin: 0; } .trust svg { color: var(--accent-l); flex: 0 0 auto; } /* .trust je samo