/* ========================================================================= servis-samsung.cz — design systém „Vzduch“ Nezávislý servis notebooků, monitorů a mobilních telefonů Samsung. Vizuální jazyk: nejvzdušnější web sítě. Hodně bílé plochy, měkké zaoblení 12 px, jen naznačené stíny, tenké linky, velkorysé odstupy. Zařízení jsou kapesní a osobní, takže rozhraní má působit lehce — nadpisy jsou velké, ale lehkých řezů (600), nikoli malé a tučné. Odlišení od sesterských webů sítě: - navy 221–226°, ocelová modř 202°, petrolejová 185°, tmavě fialová 275° a cihlově červená 10° už jsou obsazené, - tenhle web stojí na limetkovo-olivové ose kolem 78–95°. Struktura vrstev je daná kontraktem: @layer tokens, base, layout, components, utils, fix; Poslední vrstva `fix` dorovnává kolize kontrastu (past 11.5 a 11.6). Kontrast se počítal vzorcem WCAG pro relativní jas, ne odhadem. U každé barvy textu je poměr zapsaný v komentáři u tokenu nebo u pravidla. ========================================================================= */ @layer tokens, base, layout, components, utils, fix; @layer tokens { :root { /* --- text ----------------------------------------------------------- Základní text je velmi tmavá zelenošedá — prakticky černá, ale s odstínem 95°, takže se s modrošedými sesterskými weby neplete. Poměry proti bílé (#FFFFFF), spočítané vzorcem WCAG: --ink 17,77:1 --ink-2 13,03:1 --muted 8,42:1 Proti nejtmavšímu světlému podkladu --surface-2 (#EDF1E6): --ink 15,51:1 --ink-2 11,37:1 --muted 7,35:1 Nejhorší případ tlumeného textu je tedy 7,35:1 — pořád nad AAA 7:1. --muted proto NEMŮŽE být světlejší; #4A5640 už dávalo 6,80:1. ------- */ --ink: #131A0E; /* 17,77:1 na bílé — zelenočerná, odstín 95° */ --ink-2: #2A3421; /* 13,03:1 na bílé, 11,37:1 na --surface-2 */ --muted: #45513B; /* 8,42:1 na bílé, 7,35:1 na --surface-2 — AAA všude */ /* --- linky a podklady ----------------------------------------------- Linky jsou tenké a světlé; na tomhle webu nesou hranice jen tam, kde stín nestačí (formulářová pole, tabulka, dělicí čáry). --------------- */ --line: #E6EADD; --line-2: #CCD5BE; --bg: #FFFFFF; --surface: #F6F8F3; /* nejsvětlejší plocha — pásy sekcí */ --surface-2:#EDF1E6; /* druhá plocha — hero, čipy, hlavička tabulky */ /* --- akcent --------------------------------------------------------- Limetka je nejcitlivější místo návrhu: jako PLOCHA neunese bílý text. Čistá limetka #A3E635 má relativní jas 0,646 a bílý text na ní vychází na 1,51:1 — hluboko pod hranicí 4,5:1 pro plochy tlačítek. Řešení: --accent je tmavá oliva stejného odstínu (78°), ne limetka. bílý text na --accent #4A5E12 → 7,17:1 (nad AA 4,5:1 i nad AAA 7:1) bílý text na --accent-d #3A4D0C → 9,35:1 (stav hover je ještě lepší) Pozor na zelenou: původní #4A6212 vycházelo na 6,89:1, tedy pod AAA. Rozdíl je okem neznatelný, měřitelně ale rozhoduje, a plocha tlačítka s bílým popiskem je na webu nejčastější barevný pár vůbec. Světlá limetka žije JEN na tmavém podkladu a v tenkých linkách: --accent-l #CBE87A na --hero-3 (#26301A) → 10,11:1 --accent-l #CBE87A na --dark-3 (#2E3A20) → 8,82:1 Obojí nad AAA. Na bílé by --accent-l dávala 1,37:1, takže se jako barva textu na světlém podkladu nesmí objevit nikde — hlídá to vrstva `fix` na konci souboru. ------------------------------------- */ --accent: #4A5E12; /* tmavá oliva, odstín 76° — plochy CTA, favikona */ --accent-d: #3A4D0C; /* tmavší pro hover; 8,16:1 jako text na --surface-2 */ --accent-l: #CBE87A; /* limetka POUZE na tmavém; 10,11:1 na --hero-3 */ /* --- odkazy --------------------------------------------------------- Olivová o stupeň tmavší než akcent, aby odkaz v textu držel AAA i na podbarvených plochách: na bílé 9,05:1 · na --surface 8,47:1 · na --surface-2 7,90:1 na --note-bg 8,25:1 · na --warn-bg 8,19:1 ------------------------ */ --link: #3C4F12; /* --- stavy formuláře ------------------------------------------------- --ok na --ok-bg 7,41:1 · --err na --err-bg 7,97:1 (8,82:1 na bílé). Zelená potvrzení je o něco chladnější než akcent, aby se úspěšné odeslání nepletlo s běžnou olivovou plochou. ------------------------ */ --ok: #265A22; --ok-bg: #EEF6EC; --ok-line: #BFDCB8; --err: #8C2418; --err-bg: #FCF1EF; --warn-bg: #FAF3E3; --warn-line:#E7D7A9; /* --- tmavé plochy ---------------------------------------------------- Tmavé jsou na tomhle webu jen patička a zásuvka menu. Tokeny --hero-1/2/3 ale musí existovat (past 11.8: co není token, nedostane se do dokumentace ani na /styleguide/) a zároveň se proti --hero-3 měří --accent-l. Nastavuju je proto na odstíny patičky: --hero-1 podklad patičky, --hero-3 nejsvětlejší zarážka = měřítko. Text na tmavém, nejhorší případ (proti --hero-3 / --dark-3): --on-dark 11,09:1 / 9,68:1 · --dark-tx 10,12:1 / 8,83:1 ---------- */ --hero-1: #131A0E; /* nejtmavší zarážka = podklad patičky */ --hero-2: #1B240F; /* střední zarážka */ --hero-3: #26301A; /* nejsvětlejší zarážka — proti ní se měří kontrast */ --on-dark: #E2E9D6; /* hlavní text na tmavém, nejhůř 9,68:1 */ --dark-tx: #D7E0C8; /* doplňkový text na tmavém, nejhůř 8,83:1 */ --dark-2: #1E2814; /* plochy uvnitř tmavých pásů */ --dark-3: #2E3A20; /* oddělovače na tmavém */ /* --- drobnosti ------------------------------------------------------- */ --sel: #E4F0B9; /* podbarvení výběru textu; --ink na něm 14,6:1 */ --note-bg: #F2F6E9; /* podklad poznámkového rámečku */ --map-fill: #EDF1E6; /* výplň obrysu ČR */ --map-line: #A9B894; /* obrys ČR */ /* --- písmo ----------------------------------------------------------- Jen systémové rodiny. CSP má font-src 'self', nic se nestahuje, žádné vkládání cizího stylopisu, žádný vlastní řez. --------------- */ --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; /* Nadpisy jsou velké a LEHKÉ. Sesterský web má h1 34 px / 800; tady je h1 až 50 px / 600 a h2 30 px / 600. Vzdušnost dělá velikost a prostor kolem, ne tučnost. Řádkování textu je 1,75 místo 1,65 a --measure 82ch místo 78ch — řádek je delší a mezi řádky je víc vzduchu. */ --fs-body: 17px; --fs-sm: 0.9375rem; /* 15,9 px */ --fs-xs: 0.8125rem; /* 13,8 px */ --fs-h1: clamp(2rem, 1.45rem + 2.45vw, 3.125rem); /* 32 → 50 px */ --fs-h2: clamp(1.4375rem, 1.19rem + 1.1vw, 1.875rem); /* 23 → 30 px */ --fs-h3: 1.1875rem; /* 19 px */ --fs-h4: 1.0625rem; /* 17 px */ --lh: 1.75; --measure: 82ch; /* --- tvarosloví ------------------------------------------------------ Plochy jsou skoro pravoúhlé — 4 px na kartách, 6 px na velkých panelech, 3 px na drobnostech. Kulaté zůstaly jen pilulky (tlačítka, čipy) a číslované kroky; ty webu drží vzdušný, ne úřední dojem. Hloubku nedělá rozostřený stín, ale VLASOVÁ LINKA: jeden pixel světlé zelenošedé kolem plochy, u zvednutého stavu dva. Tokeny se pořád jmenují --shadow-*, protože je používá celá síť; obsahem to ale jsou obtahy, ne stíny. -------------------------- */ --r: 4px; --r-sm: 3px; --r-lg: 6px; --sp-1: 8px; --sp-2: 16px; --sp-3: 28px; --sp-4: 40px; --sp-5: 64px; --sp-6: 96px; --sp-7: 128px; --shadow-1: 0 0 0 1px var(--line); --shadow-2: 0 0 0 1px var(--line-2); --shadow-in:0 -1px 0 var(--line-2); --wrap: 1200px; --wrap-narrow: 840px; } } @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; } /* Lehké řezy a záporné prostrkání jen u velkých stupňů. U h3 a h4 už by se záporné prostrkání projevilo jako slitá slova. */ h1, h2, h3, h4 { color: var(--ink); margin: 0 0 var(--sp-2); font-weight: 600; line-height: 1.18; text-wrap: balance; } h1 { font-size: var(--fs-h1); letter-spacing: -.024em; line-height: 1.1; } h2 { font-size: var(--fs-h2); letter-spacing: -.016em; margin-top: var(--sp-5); } h3 { font-size: var(--fs-h3); letter-spacing: -.004em; margin-top: var(--sp-4); } h4 { font-size: var(--fs-h4); } 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: 10px; } /* Past 11.5: holé `a { … }` smí stát jen tady, v nejranější vrstvě. V pozdějších vrstvách se odkazy stylují výhradně v textových kontextech (.prose a, p a, li a, td a), jinak by pravidlo přebilo bílý text v tlačítkách. */ a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: .07em; } strong, b { font-weight: 650; } small { font-size: var(--fs-xs); } img, svg { max-width: 100%; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; } hr.oddel { margin: var(--sp-5) 0 var(--sp-4); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* Na tmavých plochách by olivový obrys zanikl — tam svítí limetka. */ .drawer :focus-visible, .ftr :focus-visible { outline-color: var(--accent-l); } ::selection { background: var(--sel); color: var(--ink); } [hidden] { display: none !important; } } @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ž nadpisy sekcí, jinak by na 1920 px měly 30 px a článek by vypadal jako řada nadpisů. */ .prose h2 { font-size: 1.5rem; margin-top: var(--sp-5); } .prose h3 { font-size: 1.125rem; margin-top: var(--sp-4); } .prose > :last-child { margin-bottom: 0; } /* Odstupy sekcí jsou vědomě větší než u sesterských webů — vzduch mezi bloky je tu hlavní výrazový prostředek. */ .section { padding-block: var(--sp-6); } .section--tight { padding-block: var(--sp-5); } .section--surface { background: var(--surface); } .section--surface + .section--surface { padding-top: 0; } .grid { display: grid; gap: var(--sp-3); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .cols { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } /* Postranní sloupec 380 px dává uvnitř ~324 px, tedy přibližně 42 znaků na řádek. Užší sloupec láme každou větu na pět řádků. */ @media (min-width: 980px) { .cols { grid-template-columns: minmax(0,1fr) 380px; gap: var(--sp-5); } } /* Rozcestník nemá postranní sloupec: text drží --measure, mřížky jdou přes celou šířku obalu. */ .rozc { display: grid; gap: var(--sp-5); } .rozc > * { min-width: 0; } .rozc > .prose { max-width: var(--measure); } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: #fff; padding: 14px 20px; border-radius: 0 0 var(--r) 0; font-weight: 650; text-decoration: none; } .skip:focus { left: 0; color: #fff; } } @layer components { /* ===================================================================== HLAVIČKA — bílá, bez rámečku, jen tenká linka dole. Menu stojí v JEDNOM ŘÁDKU s hlavní částí, ne pod ní. V HTML zůstává `.hdr__nav` sourozencem `.hdr__top` uvnitř `.wrap`; rozvržení řeším tak, že se `.hdr__top` na širokém okně rozpustí přes `display: contents` do flexu obalu a jeho děti dostanou `order`. Menu se tím dostane doprostřed, mezi značku a kontakty, aniž by se sáhlo do HTML. POZOR na vrstvy: `.hdr__top { display: contents }` musí stát ve stejné nebo pozdější vrstvě než `.hdr__top { display: flex }` — jinak vyhraje ta pozdější bez ohledu na specificitu. ===================================================================== */ .hdr { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); position: relative; z-index: 60; } .hdr__top { display: flex; align-items: center; gap: var(--sp-3); min-height: 84px; min-width: 0; } .hdr__brand { display: flex; align-items: center; gap: 14px; margin-right: auto; text-decoration: none; min-width: 0; min-height: 44px; padding-block: 2px; } .hdr__mark { flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--r); background: var(--accent); color: #fff; display: grid; place-items: center; } .hdr__id { display: flex; flex-direction: column; justify-content: center; min-width: 0; } /* Název je lehčí a víc prostrkaný než u sesterských webů — ne tučný blok, ale rozvolněná verzálková linka. */ .hdr__name { font-weight: 600; font-size: 1.0625rem; letter-spacing: .085em; text-transform: uppercase; line-height: 1.25; color: var(--ink); white-space: nowrap; } /* Placeholdery runtime údajů mají rezervovanou výšku i řádkování — bez toho se stránka po doplnění telefonů posune a CLS přestane být 0. */ .hdr__firm { font-size: var(--fs-xs); color: var(--muted); min-height: 18px; line-height: 18px; white-space: nowrap; } .hdr__contact { display: none; text-align: right; } @media (min-width: 880px) { .hdr__contact { display: block; } } .hdr__tels { display: flex; gap: 22px; justify-content: flex-end; min-height: 28px; line-height: 28px; } .hdr__tels .tel { color: var(--link); font-size: 1.0625rem; font-weight: 650; } .hdr__tels .tel:hover { color: var(--accent-d); } .hdr__hours { font-size: var(--fs-xs); color: var(--muted); min-height: 18px; line-height: 18px; } .hdr a.hdr__cta { display: none; } @media (min-width: 1120px) { .hdr a.hdr__cta { display: inline-flex; min-height: 44px; color: #fff; } } .burger { display: inline-flex; align-items: center; gap: 10px; background: var(--surface-2); color: var(--ink-2); border: 0; border-radius: 999px; padding: 11px 18px; font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; min-height: 44px; transition: background .15s ease; } .burger:hover { background: #DDE6CB; } .hdr__nav { display: none; } @media (min-width: 1040px) { .burger { display: none; } .hdr > .wrap { display: flex; align-items: center; gap: var(--sp-3); min-height: 84px; } .hdr__top { display: contents; } .hdr__brand { order: 1; margin-right: 0; } .hdr__nav { order: 2; display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; margin-right: auto; min-width: 0; } .hdr__contact { order: 3; flex: 0 0 auto; } .hdr a.hdr__cta { order: 4; flex: 0 0 auto; } .hdr__nav a { text-decoration: none; color: var(--ink-2); padding: 10px 13px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; transition: background .15s ease, color .15s ease; } .hdr__nav a:hover { color: var(--accent-d); background: var(--surface); } /* Aktivní položka se nepodtrhává čárou přes celou šířku, jen se podbarví — v jednořádkové hlavičce působí linka jako rozbité menu. */ .hdr__nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); font-weight: 600; } } /* Od 1280 px je místa dost na pohodlnější dotykové cíle v menu. Víc než 15 px po stranách ale ne: sedm českých popisků vedle značky a tlačítka je na hraně a aktivní položka je navíc tučnější, takže je o dvacet pixelů širší než ostatní. Se 16 px přetékala objednávková stránka o čtyři pixely (změřeno layout-check.mjs na 1280 px). Výšku dotykového cíle drží min-height 44 px ve vrstvě fix, ne svislé odsazení. */ @media (min-width: 1280px) { .hdr__nav a { padding: 11px 14px; } } /* ---------- zásuvka menu (jediná tmavá plocha kromě patičky) ---------- */ .drawer { position: fixed; inset: 0 0 0 auto; width: min(390px, 92vw); z-index: 120; background: var(--hero-1); color: var(--on-dark); padding: var(--sp-2) var(--sp-2) var(--sp-5); overflow-y: auto; transform: translateX(101%); visibility: hidden; transition: transform .24s ease, visibility 0s linear .24s; box-shadow: -20px 0 60px rgba(19,26,14,.4); } .drawer.is-on { transform: translateX(0); visibility: visible; transition: transform .24s 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-weight: 600; font-size: 1.0625rem; color: #fff; letter-spacing: .02em; } .drawer__close { background: var(--dark-2); color: var(--on-dark); border: 0; border-radius: 50%; min-width: 44px; min-height: 44px; font: inherit; font-size: 1.25rem; cursor: pointer; line-height: 1; } .drawer__close:hover { background: var(--dark-3); color: #fff; } .drawer nav { display: grid; gap: 2px; } .drawer nav a { display: flex; align-items: center; padding: 12px 14px; border-radius: var(--r); text-decoration: none; color: var(--on-dark); font-weight: 500; min-height: 44px; } .drawer nav a:hover { background: var(--dark-2); color: #fff; } /* Aktivní položka je označená limetkovou hranou — na tmavém podkladu je to jediné místo, kde limetka smí svítit naplno (10,11:1). */ .drawer nav a[aria-current="page"] { background: var(--dark-2); color: #fff; box-shadow: inset 3px 0 0 var(--accent-l); } .drawer__cta { display: grid; gap: 10px; margin-bottom: var(--sp-3); } .drawer__sep { border-top: 1px 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(--on-dark); } .scrim { position: fixed; inset: 0; background: rgba(19,26,14,.5); z-index: 110; opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility 0s linear .24s; } .scrim.is-on { opacity: 1; visibility: visible; transition: opacity .24s ease, visibility 0s; } /* ---------- tlačítka ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 13px 26px; border-radius: 999px; font: inherit; font-weight: 600; font-size: var(--fs-sm); text-decoration: none; border: 1px solid transparent; cursor: pointer; text-align: center; transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .1s ease; } .btn:active { transform: translateY(1px); } /* Bílý text na --accent 6,89:1 a na --accent-d 9,35:1 — obojí nad 4,5:1. */ .btn--pri { background: var(--accent); color: #fff; box-shadow: var(--shadow-1); } .btn--pri:hover { background: var(--accent-d); color: #fff; box-shadow: var(--shadow-2); } /* Sekundární tlačítko je bílá pilulka s tenkou linkou; text --link 9,05:1. */ .btn--sec { background: #fff; color: var(--link); border-color: var(--line-2); } .btn--sec:hover { background: var(--surface); color: var(--accent-d); border-color: var(--accent); } /* Ghost stojí na tmavém (zásuvka, patička) — text --on-dark, nejhůř 9,68:1. */ .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: 10px 18px; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } /* ---------- telefon (vkládá se runtime) ---------- */ .tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; 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 — světlá sekce. Na rozdíl od sesterských webů tu není tmavý pás přes celou šířku okna, ale velmi světlý šedozelený panel se zaoblením uvnitř obalu. Vodorovné posouvání: panel je `.hero > .wrap`, tedy prvek s `width: 100%` a `box-sizing: border-box` uvnitř `.hero`, které má vlastní padding-inline. Žádné záporné odsazení, žádné `100vw` — na 360 px je panel široký 360 − 2×16 = 328 px a stránka se neposouvá. ===================================================================== */ .hero { background: var(--bg); padding: var(--sp-3) var(--sp-2) var(--sp-5); } .hero > .wrap { background: var(--surface-2); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-3); } @media (min-width: 720px) { .hero > .wrap { padding: var(--sp-6) var(--sp-5); } } @media (min-width: 1040px) { .hero { padding-block: var(--sp-4) var(--sp-6); } } /* Nadpis: velký, lehký (600), ne tučný. Na --surface-2 má --ink 15,51:1. */ .hero h1 { color: var(--ink); max-width: 20ch; font-weight: 600; margin-bottom: var(--sp-3); } /* Mikropopisek strojopisem — jediné místo v heru, kde se --mono objeví. */ .hero__eyebrow { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-d); /* 8,16:1 na --surface-2 — AAA */ margin: 0 0 var(--sp-2); } /* Perex je na SVĚTLÉM podkladu, takže tmavý: --ink-2 dává 11,37:1. Vzor má na tomhle místě bílou (tmavé hero) — tady by zmizela. */ .hero__lead { font-size: 1.1875rem; color: var(--ink-2); max-width: 54ch; line-height: 1.7; margin-bottom: var(--sp-4); } .hero__lead a { color: var(--link); text-decoration-thickness: 1px; } .hero__lead a:hover { color: var(--accent-d); } .hero__note { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); max-width: 68ch; } .hero__main { min-width: 0; } .hero__grid { display: grid; gap: var(--sp-4); align-items: start; } @media (min-width: 1040px) { .hero__grid { grid-template-columns: minmax(0,1fr) 400px; gap: var(--sp-5); } } /* Sekundární tlačítko v heru: bílá plocha na světlé — musí mít linku, jinak by na --surface-2 splynulo. Text --link 9,05:1 na bílé. */ .hero .btn--sec { background: #fff; color: var(--link); border-color: var(--line-2); } .hero .btn--sec:hover { background: #fff; color: var(--accent-d); border-color: var(--accent); } /* Karta s postupem je bílá, zaoblená, s jemným stínem — plave nad panelem. */ .hero__card { background: #fff; border: 0; border-radius: var(--r-lg); padding: var(--sp-3); box-shadow: var(--shadow-2); } @media (min-width: 720px) { .hero__card { padding: var(--sp-4); } } .hero__card h2 { color: var(--ink); font-size: var(--fs-h4); font-weight: 600; margin: 0 0 var(--sp-3); letter-spacing: 0; } .hero__card p { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--muted); } /* Kroky visí na tenké svislé lince; číslice jsou malé kroužky přímo na ní. Linka je pseudoprvek seznamu, ne rámeček položky — jinak by čouhala nad první a pod poslední číslici. */ .hsteps { counter-reset: hk; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); position: relative; } .hsteps::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 1px; background: var(--line-2); } .hsteps li { counter-increment: hk; display: grid; grid-template-columns: 27px 1fr; gap: 14px; margin: 0; align-items: start; } .hsteps li::before { content: counter(hk); position: relative; z-index: 1; width: 27px; height: 27px; border-radius: 50%; background: var(--accent); color: #fff; /* bílá na olivě 6,89:1 */ display: grid; place-items: center; font-size: .75rem; font-weight: 650; box-shadow: 0 0 0 4px #fff; /* kroužek „přeruší“ linku */ } /* `flex-wrap` tu není kosmetika: popisek v má nowrap, takže bez zalomení by nejmenší možná šířka hlavičky kroku byla součtem názvu a popisku. Karta by se nezúžila pod ~360 px a na telefonu by se celá stránka posouvala do strany. */ .hsteps__head { display: flex; flex-wrap: wrap; gap: 2px 14px; justify-content: space-between; align-items: baseline; } .hsteps b { color: var(--ink); font-size: 1rem; font-weight: 600; } .hsteps span { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; } .hsteps em { font-family: var(--mono); font-style: normal; color: var(--accent-d); font-size: .6875rem; font-weight: 500; white-space: nowrap; text-align: right; } /* Pás důvěry stojí na SVĚTLÉM heru — ikony i text proto tmavé. Vzor je tu má bílé (tmavý pás); převzít by znamenalo neviditelný řádek. text --ink-2 na --surface-2 → 11,37:1 ikona --accent-d na --surface-2 → 8,16:1 Není to mřížka, ale přelévající se řádek: s mřížkou by se šířka sloupců řídila nejdelší položkou a krátké by se zbytečně natáhly. */ .trust { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 32px; list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--line-2); } .trust li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; margin: 0; } .trust svg { color: var(--accent-d); flex: 0 0 auto; } .hero ul:not(.trust) { list-style: none; padding: 0; margin: 0; } /* ---------- drobečky ---------- */ .crumbs { font-size: var(--fs-xs); color: var(--muted); padding-block: 16px; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; } .crumbs li { margin: 0; display: flex; align-items: center; gap: 8px; } .crumbs li + li::before { content: "/"; color: var(--line-2); } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--link); } .crumbs [aria-current="page"] { color: var(--ink-2); font-weight: 600; } /* ===================================================================== DLAŽDICE — bílá plocha BEZ rámečku, jen jemný stín. Ikona nad nadpisem, hodně vnitřního odsazení. Hover zvedne stín a posune kartu nahoru. ===================================================================== */ .card { background: #fff; border: 0; border-radius: var(--r); padding: var(--sp-3); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 12px; } @media (min-width: 720px) { .card { padding: var(--sp-4) var(--sp-3); } } .card h3 { margin: 0; font-size: var(--fs-h4); font-weight: 600; } .card p { margin: 0; color: var(--muted); font-size: var(--fs-sm); } /* Ikona stojí nad nadpisem ve vlastním světlém kroužku. */ .card__i { color: var(--accent-d); flex: 0 0 auto; align-self: flex-start; background: var(--surface-2); border-radius: 50%; padding: 10px; display: grid; place-items: center; } a.card { text-decoration: none; color: inherit; transition: box-shadow .18s ease, transform .18s ease; } a.card:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); color: inherit; } a.card .card__more { margin-top: auto; color: var(--link); font-weight: 600; font-size: var(--fs-sm); } a.card:hover .card__more { text-decoration: underline; } .card__tag { align-self: flex-start; font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 4px 12px; } /* ---------- kroky na stránkách postupu ---------- */ .steps { counter-reset: krok; list-style: none; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .steps li { counter-increment: krok; background: #fff; border: 0; border-radius: var(--r); padding: var(--sp-4) var(--sp-3) var(--sp-3); position: relative; margin: 0; box-shadow: var(--shadow-1); } .steps li::before { content: counter(krok); position: absolute; top: var(--sp-3); left: var(--sp-3); width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--accent-d); /* 8,16:1 */ display: grid; place-items: center; font-weight: 650; font-size: .875rem; } .steps h3 { margin: 48px 0 8px; font-size: var(--fs-h4); font-weight: 600; } .steps p { margin: 0; color: var(--muted); font-size: var(--fs-sm); } .steps .steps__when { display: block; margin-top: 12px; font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-2); font-weight: 500; } /* ---------- čipy: plné světlé pilulky bez rámečku ---------- */ .chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--sp-3); } .chips li { margin: 0; } .chips a, .chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; background: var(--surface-2); border: 0; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: var(--fs-sm); color: var(--ink-2); /* 11,37:1 na --surface-2 */ transition: background .15s ease, color .15s ease; } /* Hover jen ztmaví podklad — barva textu zůstává, na #DDE6CB má 10,09:1. */ .chips a:hover { background: #DDE6CB; color: var(--ink); } .chips span { color: var(--muted); background: var(--surface); } /* ===================================================================== TABULKA — bez linek. Řádky odděluje vzduch, hlavičku jen jemné podbarvení. Na mobilu se tabulka skládá do karet přes `data-th`. ===================================================================== */ .tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); } .tbl caption { text-align: left; font-weight: 600; padding-bottom: 14px; color: var(--ink-2); } .tbl th, .tbl td { text-align: left; padding: 16px 18px; border: 0; vertical-align: top; } .tbl thead th { background: var(--surface-2); font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 500; color: var(--muted); /* 7,35:1 na --surface-2 */ padding-block: 12px; } .tbl thead th:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); } .tbl thead th:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; } /* Zebra je jediné, co řádky odlišuje — žádné linky. */ .tbl tbody tr:nth-child(even of :not(.tbl__grp)) { background: var(--surface); } .tbl tbody tr:hover { background: var(--surface-2); } .tbl td:first-child { color: var(--ink); font-weight: 500; } .tbl--cenik td:nth-child(2) { font-weight: 650; white-space: nowrap; color: var(--ink); } .tbl__wrap { overflow-x: auto; } /* Skupinový řádek ceníku je mezititulek přes celou šířku, aby se hlavička Služba/Cena/Poznámka neopakovala u každé skupiny zvlášť. */ .tbl__grp th { background: none; text-align: left; font-family: inherit; font-weight: 600; font-size: var(--fs-h4); letter-spacing: -.004em; text-transform: none; color: var(--ink); padding: var(--sp-4) 18px 10px; } .tbl tbody tr.tbl__grp:hover { background: none; } @media (max-width: 719px) { .tbl, .tbl tbody, .tbl tr, .tbl td, .tbl__grp th { display: block; width: 100%; } .tbl thead { position: absolute; left: -9999px; } /* Na mobilu je skupina nadpisem nad kartami, ne řádkem tabulky. */ .tbl tr.tbl__grp { border: 0; box-shadow: none; margin: var(--sp-4) 0 12px; padding: 0; background: none; } .tbl__grp th { padding: 0; font-size: var(--fs-h3); } .tbl tr { background: #fff; border: 0; border-radius: var(--r); margin-bottom: 14px; padding: 10px 0; box-shadow: var(--shadow-1); } .tbl tbody tr:nth-child(even of :not(.tbl__grp)) { background: #fff; } .tbl tbody tr:hover { background: #fff; } .tbl td { border: 0; padding: 8px 18px; } .tbl td::before { content: attr(data-th) ": "; display: block; font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--muted); } .tbl td:first-child { font-weight: 600; color: var(--ink); font-size: 1rem; } .tbl td:first-child::before { content: none; } } /* ---------- box „zdarma“ ---------- */ .free { background: var(--ok-bg); border: 0; border-radius: var(--r); padding: var(--sp-3); } .free h3 { margin-top: 0; color: var(--ok); font-size: var(--fs-h4); } /* 7,41:1 na --ok-bg */ .free ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .free li { display: flex; gap: 12px; align-items: flex-start; margin: 0; } .free svg { color: var(--ok); flex: 0 0 auto; margin-top: 5px; } /* ---------- FAQ (funguje i bez skriptu, je to details/summary) ---------- */ .faq { display: grid; gap: 10px; } .faq details { border: 0; border-radius: var(--r); background: var(--surface); } .faq details[open] { background: #fff; box-shadow: var(--shadow-1); } .faq summary { cursor: pointer; padding: 18px var(--sp-3); font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-2); align-items: flex-start; min-height: 44px; border-radius: var(--r); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1.1; color: var(--accent-d); flex: 0 0 auto; font-weight: 400; } .faq details[open] summary::after { content: "\2212"; } .faq summary:hover { color: var(--accent-d); } .faq__a { padding: 0 var(--sp-3) var(--sp-3); color: var(--ink-2); } .faq__a > :last-child { margin-bottom: 0; } /* ---------- poznámkové boxy ---------- */ .note { border-left: 3px solid var(--accent); background: var(--note-bg); padding: var(--sp-3); border-radius: 0 var(--r) var(--r) 0; } .note--warn { border-left-color: var(--warn-line); background: var(--warn-bg); } .note > :last-child { margin-bottom: 0; } .note h3 { margin-top: 0; font-size: var(--fs-h4); } /* ---------- postranní sloupec ---------- */ .aside { display: grid; gap: var(--sp-3); align-content: start; } @media (min-width: 980px) { .aside { position: sticky; top: var(--sp-3); } } .aside__box { background: var(--surface); border: 0; border-radius: var(--r); padding: var(--sp-3); } .aside__box h2, .aside__box h3 { margin-top: 0; font-size: var(--fs-h4); font-weight: 600; } .aside__box ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: var(--fs-sm); } .aside__box li { margin: 0; } /* Objednávkový box je bílý se stínem, aby v sloupci vystoupil dopředu. */ .aside__box--cta { background: #fff; box-shadow: var(--shadow-2); } /* Na úzké obrazovce se postranní sloupec skládá pod článek a možnost objednat by končila až za vším textem — u delších stránek přes 4 000 px od začátku. `display: contents` rozpustí