/* ========================================================================= servis-oki.cz — design systém „Deska“ Vizuální jazyk: plošný soutisk. Žádná iluze hloubky — nikde rozostřený stín ani přechod. */ @layer tokens, base, layout, components, utils, fix; /* ========================================================================= TOKENY Všechny poměry kontrastu níž jsou spočítané podle WCAG (relativní jas L = 0,2126R + 0,7152G + 0,0722B na linearizovaných složkách, poměr (L1+0,05)/(L2+0,05)), ne odhadnuté. */ @layer tokens { :root { /* --- text a tmavé plochy ------------------------------------------ Švestka je malinová stažená na 30–35 % sytosti a velmi nízký jas. Proti bílé i proti oběma světlým plochám je hluboko nad AAA. */ --ink: #1B0D14; /* hsl(330 35% 8%) — 18,85:1 na bílé, 17,36:1 na --surface, 15,67:1 na --surface-2 */ --ink-2: #381E2A; /* hsl(332 30% 17%) — 15,14:1 na bílé, 12,59:1 na --surface-2 */ --muted: #5F4550; /* hsl(335 16% 32%) — 8,56:1 na bílé, 7,89:1 na --surface, 7,12:1 na --surface-2 — AAA všude */ /* --- linky a obrysy ----------------------------------------------- Obrysy jsou tady nosný prvek, ne dekorace: kreslí se 2 px, takže --line-2 musí být dost tmavá, aby byla vidět i na --surface. */ --line: #E8D8E0; /* jemný předěl uvnitř ploch */ --line-2: #CDADBB; /* obrys prvků, 2 px */ /* --- podklady ------------------------------------------------------ */ --bg: #FFFFFF; /* list papíru */ --surface: #FAF4F7; /* nejsvětlejší šedorůžová */ --surface-2: #F3E7ED; /* druhá plocha — střídavé pásy sekcí */ /* --- malinový akcent ---------------------------------------------- 334° drží pásmo 325–345°. Akcent je PLOCHA, ne barva textu: bílý text na něm má 6,61:1, s rezervou nad 4,5:1 pro text na tlačítku. Jako barva textu na bílé se místo něj používá --link (8,94:1) nebo --accent-d (10,13:1), aby se i u drobných popisků drželo AAA 7:1. */ --accent: #B60C56; /* hsl(334 88% 38%) — bílý text 6,61:1; z něj se kreslí favikona */ --accent-d: #84063C; /* hsl(334 91% 27%) — hover plochy; jako text na bílé 10,13:1 */ --accent-l: #F5A8CB; /* hsl(333 80% 81%) — světlá malinová na tmavém: 7,61:1 na --hero-3, 10,18:1 na --hero-1 */ --link: #930643; /* hsl(334 92% 30%) — 8,94:1 na bílé, 8,24:1 na --surface, 7,44:1 na --surface-2 — AAA */ /* --- stavy formuláře ---------------------------------------------- Zelená a červená jsou jediné barvy mimo malinovou osu. Jsou tu proto, že potvrzení a chyba se nesmí číst jako akcent. */ --ok: #055C3F; /* 8,05:1 na bílé, 7,36:1 na --ok-bg; bílý text na ploše 8,05:1 */ --ok-bg: #EDF7F4; --ok-line: #9FD1C0; --err: #8E151F; /* 9,22:1 na bílé, 8,17:1 na --err-bg */ --err-bg: #FCEEEF; --warn-bg: #FAF3E5; /* --ink 17,07:1, --muted 7,75:1, --link 8,10:1 */ --warn-line: #DDBE88; /* --- tmavý pás ------------------------------------------------------ Na tomhle webu ho nosí patička a zásuvka menu, ne hero. Tokeny ale musí existovat (past 11.8: co v CSS není, to se do dokumentace a favikony nedostane) a --hero-3 je nejsvětlejší zarážka, proti které se měří všechno světlé. */ --hero-1: #1B0D14; /* nejtmavší — plocha patičky a zásuvky */ --hero-2: #2B1720; /* střední — plochy uvnitř tmavého */ --hero-3: #3D242F; /* nejsvětlejší — proti ní se měří --accent-l (7,61:1) */ --on-dark: #F3E8ED; /* hlavní text na tmavém: 15,77:1 na --hero-1, 11,78:1 na --hero-3 */ --dark-tx: #E0CCD5; /* doplňkový text na tmavém: 12,36:1 na --hero-1, 9,23:1 na --hero-3, 7,28:1 na --dark-3 */ --dark-2: #2B1720; /* plochy uvnitř tmavého */ --dark-3: #523241; /* oddělovače na tmavém */ /* --- drobnosti ------------------------------------------------------ */ --sel: #F5C7DC; /* výběr textu — --ink na něm 12,64:1 */ --note-bg: #F8EDF2; /* poznámkový rámeček — --ink 16,50:1, --muted 7,49:1, --link 7,83:1 */ --map-fill: #F3E7ED; /* výplň obrysu ČR — --ink 15,67:1 pro popisky měst */ --map-line: #B78FA1; /* obrys ČR */ /* --- rozměry -------------------------------------------------------- */ --wrap: 1160px; --measure: 72ch; --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 52px; --sp-6: 76px; /* --- typografie ----------------------------------------------------- Systémový bezpatkový stack. Nic se nestahuje (CSP má font-src 'self'), takže žádný Inter ani nic hostovaného. Nadpisy jsou velmi tučné a kompaktní — plošný jazyk snese těžké písmo, protože ho nic nezastiňuje. */ --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: 1rem; --fs-xs: 0.9375rem; --fs-h1: clamp(2.3rem, 1.35rem + 3.1vw, 3.6rem); /* 37 → 58 px, hero je tu hlavní plocha */ --fs-h2: clamp(1.5rem, 1.25rem + .75vw, 1.85rem); /* 24 → 30 px */ --fs-h3: 1.1rem; --fs-h4: 0.95rem; --lh: 1.6; /* --- tvarosloví ----------------------------------------------------- Střední zaoblení 7 px. Žádný --shadow token: rozostřený stín je na tomhle webu zakázaný. Místo něj --posun a --nalepka, tedy plný barevný posun bez rozmazání. */ --r: 7px; --r-sm: 5px; --posun: 6px; --nalepka: var(--posun) var(--posun) 0 var(--ink); --nalepka-acc: var(--posun) var(--posun) 0 var(--accent); } } /* ========================================================================= ZÁKLAD ========================================================================= */ @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 kompaktní: záporné prostrkání a řádkování 1,08 u H1. U plošného jazyka drží velké písmo stránku pohromadě místo stínu. */ h1, h2, h3, h4 { color: var(--ink); margin: 0 0 var(--sp-2); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; } h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.038em; font-weight: 900; } h2 { font-size: var(--fs-h2); margin-top: var(--sp-5); } h3 { font-size: var(--fs-h3); margin-top: var(--sp-4); font-weight: 800; letter-spacing: -.018em; } h4 { font-size: var(--fs-h4); font-weight: 800; letter-spacing: -.012em; } 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%; } /* Linka je plná a silná, ne vlasová — patří k soutiskovému jazyku. */ hr { border: 0; border-top: 2px solid var(--line-2); margin: var(--sp-5) 0; } hr.oddel { margin: var(--sp-5) 0 var(--sp-4); } /* Zaměření je čtvercový malinový rámeček — kroužek by tu byl cizí prvek. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .drawer :focus-visible, .ftr :focus-visible { outline-color: var(--accent-l); } ::selection { background: var(--sel); color: var(--ink); } [hidden] { display: none !important; } table { border-collapse: collapse; } input, select, textarea, button { font: inherit; } label { display: block; } fieldset { border: 0; padding: 0; margin: 0; } legend { padding: 0; } details summary { cursor: pointer; } } /* ========================================================================= ROZVRŽENÍ ========================================================================= */ @layer layout { /* Odsazení obalu je 16 px i na 360 px. Je to zároveň rezerva, do které se schová barevný posun karet (6 px) i jejich dosednutí při hoveru — proto stránka nikdy nezíská vodorovné posouvání. */ .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); } .prose h2 { font-size: 1.45rem; } .prose h3 { font-size: 1.1rem; } .prose > :last-child { margin-bottom: 0; } /* Sekce se střídají jako pásy: bílá / šedorůžová. Bez stínu je předěl jen změnou plochy, takže musí být dost velkodušný na odsazení. */ .section { padding-block: var(--sp-6); } .section--tight { padding-block: var(--sp-4); } .section--surface { background: var(--surface-2); } .section--surface + .section--surface { padding-top: 0; } /* Tenká malinová linka nad šedorůžovým pásem sváže soutisk dohromady. */ .section--surface { border-top: 2px solid var(--line); } .section--surface + .section--surface { border-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(235px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); } /* Mřížky nesou karty s posunem 6 px. Mezera --sp-3 (24 px) je větší, takže posun jedné karty nikdy nepřekryje sousední. */ .cols { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 980px) { .cols { grid-template-columns: minmax(0,1fr) 360px; gap: var(--sp-5); } } /* Rozcestník: text v čitelné šířce, dlaždice přes celý obal. */ .rozc { display: grid; gap: var(--sp-4); } .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: 12px 18px; border: 2px solid var(--ink); border-radius: 0 0 var(--r) 0; font-weight: 800; text-decoration: none; } .skip:focus { left: 0; color: #fff; } } /* ========================================================================= KOMPONENTY ========================================================================= */ @layer components { /* ---------- hlavička ---------- Bílá, silná malinová linka nahoře a švestková dole. Dva řádky: identita s kontakty, pod tím menu — sedm českých položek se s logem a dvěma telefony do jednoho řádku nevejde ani na 1366 px. */ .hdr { background: var(--bg); color: var(--ink); border-top: 5px solid var(--accent); border-bottom: 2px solid var(--ink); 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; color: var(--ink); min-width: 0; min-height: 44px; padding-block: 2px; } /* Značka je plný malinový čtverec s bílou ikonou — 6,61:1, nad 4,5:1. */ .hdr__mark { flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--accent); color: #fff; display: grid; place-items: center; border: 2px solid var(--ink); } .hdr__id { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .hdr__name { font-weight: 900; font-size: 1.1rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1.15; color: var(--ink); white-space: nowrap; } /* Runtime placeholder — rezervovaná výška kvůli CLS 0. */ .hdr__firm { font-family: var(--mono); font-size: 13px; color: var(--muted); min-height: 16px; line-height: 16px; white-space: nowrap; } .hdr__contact { display: none; text-align: right; } @media (min-width: 880px) { .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(--accent-d); } .hdr__hours { font-family: var(--mono); font-size: 0.8125rem; 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; color: #fff; } } .burger { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-sm); padding: 9px 14px; font-size: .9rem; font-weight: 800; cursor: pointer; min-height: 44px; } .burger:hover { background: var(--accent); color: #fff; border-color: var(--ink); } /* Menu má vlastní řádek. Aktivní položka je podtržená plnou malinovou lištou 4 px — místo stínu nebo podbarvení. */ .hdr__nav { display: none; } @media (min-width: 920px) { .burger { display: none; } .hdr__nav { display: flex; gap: 0; align-items: center; flex-wrap: nowrap; border-top: 2px solid var(--line); min-width: 0; } .hdr__nav a { text-decoration: none; color: var(--ink-2); padding: 12px 13px; font-size: .9rem; font-weight: 700; white-space: nowrap; border-bottom: 4px solid transparent; margin-bottom: -2px; } .hdr__nav a:hover { color: var(--accent-d); border-bottom-color: var(--line-2); } .hdr__nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); } } /* ---------- zásuvka menu ---------- Druhá tmavá plocha. Bez stínu — oddělí ji plný malinový sloupec vlevo. */ .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: 6px solid var(--accent); padding: var(--sp-2) var(--sp-2) var(--sp-5); overflow-y: auto; transform: translateX(101%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; } .drawer.is-on { transform: translateX(0); visibility: visible; transition: transform .2s 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: 800; font-size: 0.8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-l); /* 10,18:1 na --hero-1 */ } .drawer__close { background: var(--dark-2); color: var(--on-dark); border: 2px solid var(--dark-3); border-radius: var(--r-sm); min-width: 44px; min-height: 44px; font-size: 1.25rem; cursor: pointer; line-height: 1; } .drawer__close:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .drawer nav { display: grid; gap: 2px; } .drawer nav a { display: block; padding: 12px 12px; border-radius: var(--r-sm); text-decoration: none; font-weight: 700; min-height: 44px; color: var(--on-dark); border-left: 4px solid transparent; } .drawer nav a:hover { background: var(--dark-2); border-left-color: var(--accent-l); } .drawer nav a[aria-current="page"] { background: var(--dark-2); border-left-color: var(--accent-l); color: #fff; } .drawer__cta { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-3); } .drawer__sep { border-top: 2px 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(27,13,20,.62); z-index: 110; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; } .scrim.is-on { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; } /* ---------- tlačítka ---------- Nálepka: plný obrys 2 px a barevný posun. Při stisku se tlačítko posune o stejnou vzdálenost a posun zmizí — dosedne na papír. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: var(--r-sm); font: inherit; font-weight: 800; font-size: .92rem; letter-spacing: -.01em; text-decoration: none; border: 2px solid var(--ink); cursor: pointer; text-align: center; transition: background .12s linear, color .12s linear, box-shadow .1s linear, transform .1s linear; } .btn--pri { background: var(--accent); color: #fff; box-shadow: var(--nalepka); } /* bílá na malinové 6,61:1 */ .btn--pri:hover { background: var(--accent-d); color: #fff; } .btn--sec { background: var(--bg); color: var(--link); box-shadow: var(--nalepka); } /* --link na bílé 8,94:1 */ .btn--sec:hover { background: var(--surface-2); color: var(--accent-d); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn--ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink); } /* Dosednutí: posun se ruší a prvek se přesune přesně o --posun. 6 px je vždy méně než 16px odsazení obalu, takže ani na 360 px nevznikne vodorovné posouvání stránky. */ .btn--pri:active, .btn--sec:active { box-shadow: 0 0 0 0 var(--ink); transform: translate(var(--posun), var(--posun)); } .btn--ghost:active { transform: translate(2px, 2px); } .btn--sm { min-height: 44px; padding: 8px 15px; font-size: 0.9375rem; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); } /* ---------- telefon (doplňuje se runtime) ---------- */ .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; text-underline-offset: .2em; } .ftr .tel--light, .drawer .tel--light { color: var(--on-dark); } /* ===================================================================== HERO — světlý list Proti vzoru sítě je tenhle pás BÍLÝ. */ .hero { background: var(--bg); color: var(--ink); padding-block: var(--sp-6) var(--sp-5); border-bottom: 2px solid var(--ink); } .hero__grid { display: grid; gap: var(--sp-5); align-items: start; } @media (min-width: 1040px) { .hero__grid { grid-template-columns: minmax(0,1fr) 400px; gap: var(--sp-5); } } /* Svislá linka: 8 px plné maliny, text od ní odsazený. Na mobilu se zúží na 5 px, aby nesnědla řádek nadpisu. */ .hero__main { border-left: 5px solid var(--accent); padding-left: var(--sp-3); min-width: 0; } @media (min-width: 720px) { .hero__main { border-left-width: 8px; padding-left: var(--sp-4); } } /* Nadpříznak je malými verzálkami v malinovém rámečku, ne jen barevný text — rámeček je plošný protějšek „štítku“. */ .hero__eyebrow { display: inline-block; font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--link); /* 8,94:1 na bílé */ border: 2px solid var(--accent); border-radius: var(--r-sm); padding: 4px 10px; margin: 0 0 var(--sp-3); } .hero h1 { color: var(--ink); max-width: 17ch; margin-bottom: var(--sp-3); } /* 18,85:1 na bílé */ .hero__lead { font-size: 1.2rem; color: var(--ink-2); /* 15,14:1 na bílé — ve vzoru bílá, tady švestková */ max-width: 52ch; margin-bottom: var(--sp-4); } .hero__lead a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: .18em; } .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: 66ch; } /* 8,56:1 */ /* Ve vzoru má druhé tlačítko v heru bílý text na tmavém. Tady je hero bílé, takže musí mít švestkový obrys a malinový text. */ .hero .btn--sec { background: var(--bg); color: var(--link); border-color: var(--ink); } .hero .btn--sec:hover { background: var(--surface-2); color: var(--accent-d); } .hero ul:not(.trust) { list-style: none; padding: 0; margin: 0; } /* Karta postupu: bílá nálepka s malinovým obrysem a švestkovým posunem. Je to jediný prvek hera, který má „hmotu“. */ .hero__card { background: var(--bg); border: 2px solid var(--accent); border-radius: var(--r); padding: var(--sp-3); box-shadow: var(--nalepka); min-width: 0; } .hero__card h2 { margin: 0 0 var(--sp-3); font-family: var(--mono); font-size: 0.8125rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--link); /* 8,94:1 na bílé */ } .hero__card p { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--muted); } /* Obrovské obrysové číslice přesahující přes levý okraj karty. Výplň bílá, obrys malinový (text-stroke); kde prohlížeč stroke neumí, zbude plná malinová číslice — na bílé 6,61:1, u písma nad 40 px to stačí. Přesah je 8 px za hranu karty a schová se do 16px odsazení obalu. */ .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: 46px 1fr; gap: 12px; margin: 0; align-items: start; min-width: 0; } .hsteps li::before { content: counter(hk); margin-left: calc(-1 * var(--sp-3) - 8px); font-size: 2.9rem; font-weight: 900; line-height: .85; letter-spacing: -.05em; color: var(--accent); -webkit-text-fill-color: var(--bg); -webkit-text-stroke: 2px var(--accent); align-self: start; } /* Popisek se smí zalomit: bez toho by nejmenší možná šířka karty byla součtem názvu a popisku a hero by na 360 px přetékalo. */ .hsteps__head { display: flex; flex-wrap: wrap; gap: 2px 12px; justify-content: space-between; align-items: baseline; } .hsteps b { color: var(--ink); font-size: 1rem; } /* 18,85:1 */ .hsteps span { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; } /* 8,56:1 */ .hsteps em { font-style: normal; font-family: var(--mono); color: var(--link); /* 8,94:1 */ font-size: 0.8125rem; font-weight: 700; white-space: nowrap; text-align: right; } /* Pás důvěry na SVĚTLÉM heru: vzor má bílý text a světlé ikony, tady musí být obojí tmavé, jinak by na bílé zmizelo. */ .trust { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 26px; list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-3) 0 0; border-top: 2px solid var(--line-2); } .trust li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); /* 15,14:1 na bílé */ font-size: var(--fs-sm); font-weight: 700; margin: 0; } .trust svg { color: var(--accent); flex: 0 0 auto; } /* ikona, ne text: 6,61:1 na bílé */ /* ---------- drobečky ---------- */ .crumbs { font-size: var(--fs-xs); font-family: var(--mono); color: var(--muted); padding-block: 12px; border-bottom: 2px solid var(--line); } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; } .crumbs li { margin: 0; display: flex; align-items: center; gap: 6px; } .crumbs li + li::before { content: "/"; color: var(--line-2); } .crumbs a { color: var(--muted); } .crumbs [aria-current="page"] { color: var(--ink-2); font-weight: 700; } /* ---------- dlaždice ---------- Bílá plocha, obrys 2 px, barevný posun. Hover posun zruší a kartu posune o stejnou vzdálenost — vypadá to, jako by dosedla na papír. */ .card { background: var(--bg); border: 2px solid var(--ink); border-radius: var(--r); padding: var(--sp-3); box-shadow: var(--nalepka); display: flex; flex-direction: column; gap: 10px; min-width: 0; } .card h3 { margin: 0; font-size: 1.05rem; } .card p { margin: 0; color: var(--muted); font-size: var(--fs-sm); } /* 8,56:1 na bílé */ .card__i { color: var(--accent); flex: 0 0 auto; } .card__tag { align-self: flex-start; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--link); border: 2px solid var(--line-2); border-radius: var(--r-sm); padding: 2px 8px; } a.card { text-decoration: none; color: inherit; transition: box-shadow .1s linear, transform .1s linear, border-color .1s linear; } a.card:hover, a.card:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 0 var(--ink); transform: translate(var(--posun), var(--posun)); color: inherit; } a.card .card__more { margin-top: auto; color: var(--link); font-weight: 800; font-size: var(--fs-sm); } a.card:hover .card__more { text-decoration: underline; text-underline-offset: .2em; } /* ---------- kroky ---------- Číslo není kolečko, ale plný malinový čtverec zaražený do rohu karty. */ .steps { counter-reset: krok; list-style: none; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); } .steps li { counter-increment: krok; background: var(--bg); border: 2px solid var(--ink); border-radius: var(--r); padding: var(--sp-4) var(--sp-3) var(--sp-3); position: relative; margin: 0; box-shadow: var(--nalepka); min-width: 0; } .steps li::before { content: counter(krok); position: absolute; top: -2px; left: -2px; width: 40px; height: 40px; border-radius: var(--r) 0 var(--r) 0; background: var(--accent); color: #fff; /* 6,61:1 */ display: grid; place-items: center; font-weight: 900; font-size: 1.05rem; } .steps h3 { margin: 0 0 6px; font-size: 1.05rem; } .steps p { margin: 0; color: var(--muted); font-size: var(--fs-sm); } .steps .steps__when { display: block; margin-top: 10px; font-family: var(--mono); font-size: var(--fs-xs); color: var(--link); font-weight: 700; /* 8,94:1 */ } /* ---------- štítky ---------- Aktivní (odkaz) je plná malinová plocha s bílým textem 6,61:1, tedy nad 4,5:1 pro text na ploše. Neaktivní (span) je jen obrys. */ .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: 8px 15px; border: 2px solid var(--accent); border-radius: var(--r-sm); text-decoration: none; font-weight: 800; font-size: var(--fs-sm); } .chips a { background: var(--accent); color: #fff; } .chips a:hover { background: var(--accent-d); border-color: var(--accent-d); color: #fff; } .chips span { background: var(--bg); color: var(--link); border-color: var(--line-2); } /* 8,94:1 */ /* ---------- ceník ---------- Hlavička má silnou linku nad i pod sebou jako sazba v tiskovině, skupinový řádek je plně podbarvený švestkou s bílým textem. */ .tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .tbl caption { text-align: left; font-weight: 800; padding-bottom: 10px; color: var(--ink); font-size: var(--fs-h3); } .tbl th, .tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } .tbl thead th { background: var(--bg); color: var(--ink); /* 18,85:1 */ font-family: var(--mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding-block: 10px; } .tbl td:nth-child(2) { font-weight: 800; white-space: nowrap; color: var(--ink); } .tbl tbody tr:hover { background: var(--surface); } .tbl__wrap { overflow-x: auto; } .tbl--cenik td:last-child { color: var(--muted); } /* 8,56:1 na bílé, 7,89:1 na --surface */ /* Skupina je mezititulek přes celou šířku tabulky, aby se hlavička neopakovala u každého oddílu. Plná švestková plocha, bílý text. */ .tbl__grp th { background: var(--ink); color: #fff; /* 18,85:1 */ text-align: left; font-weight: 800; font-size: var(--fs-sm); letter-spacing: .02em; border: 0; padding: 10px 14px; } .tbl tbody tr.tbl__grp:hover { background: var(--ink); } /* Na mobilu se tabulka skládá do karet a hlavička se nahradí popiskem z data-th. Skupina se přitom stane nadpisem nad kartami. */ @media (max-width: 719px) { .tbl, .tbl tbody, .tbl tr, .tbl td, .tbl__grp th { display: block; width: 100%; } .tbl thead { position: absolute; left: -9999px; } /* Vodorovné rolování je tu zbytečné (tabulka je složená do karet) a navíc by ořízlo nálepkový posun karet o 6 px vpravo. */ .tbl__wrap { overflow: visible; } .tbl tr { border: 2px solid var(--ink); border-radius: var(--r); margin-bottom: var(--sp-2); padding: 8px 0; box-shadow: var(--nalepka); background: var(--bg); } .tbl tr.tbl__grp { border: 0; box-shadow: none; margin: var(--sp-4) 0 10px; padding: 0; background: none; } .tbl__grp th { background: none; color: var(--ink); border: 0; border-bottom: 3px solid var(--accent); padding: 0 0 6px; font-size: var(--fs-h3); } .tbl td { border: 0; padding: 7px 14px; } .tbl td::before { content: attr(data-th) ": "; display: block; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .tbl td:first-child { font-weight: 800; color: var(--ink); } .tbl td:first-child::before { content: none; } .tbl tbody tr:hover { background: var(--bg); } } /* ---------- box „zdarma“ ---------- */ .free { background: var(--ok-bg); border: 2px solid var(--ok-line); border-radius: var(--r); padding: var(--sp-3); } .free h3 { margin-top: 0; color: var(--ok); } /* 7,36:1 na --ok-bg */ .free ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .free li { display: flex; gap: 10px; align-items: flex-start; margin: 0; } .free svg { color: var(--ok); flex: 0 0 auto; margin-top: 4px; } /* ---------- FAQ ---------- details/summary — musí fungovat i bez skriptu. Znaménko je hranatý rámeček, ne kolečko. */ .faq { display: grid; gap: 10px; } .faq details { border: 2px solid var(--line-2); border-radius: var(--r); background: var(--bg); } .faq details[open] { border-color: var(--ink); box-shadow: var(--nalepka); } .faq summary { cursor: pointer; padding: 15px var(--sp-3); font-weight: 800; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-2); align-items: flex-start; min-height: 44px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: 0 0 auto; color: var(--accent-d); /* 10,13:1 na bílé */ font-size: 1.15rem; line-height: 1.3; font-weight: 800; width: 26px; height: 26px; text-align: center; border: 2px solid var(--accent); border-radius: var(--r-sm); } .faq details[open] summary::after { content: "\2212"; background: var(--accent); color: #fff; } .faq summary:hover { color: var(--accent-d); } .faq__a { padding: 0 var(--sp-3) var(--sp-2); color: var(--ink-2); } /* 15,14:1 */ .faq__a p:last-child { margin-bottom: var(--sp-2); } /* ---------- poznámkové rámečky: plocha a plná lišta na levé hraně ---- */ .note { border: 2px solid var(--line-2); border-left: 8px solid var(--accent); background: var(--note-bg); padding: var(--sp-3); border-radius: var(--r); } .note--warn { border-left-color: var(--warn-line); background: var(--warn-bg); border-color: var(--warn-line); } .note > :last-child { margin-bottom: 0; } .note h3 { margin-top: 0; font-size: 1.05rem; } /* ---------- postranní sloupec ---------- */ .aside { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; } @media (min-width: 980px) { .aside { position: sticky; top: var(--sp-2); } } .aside__box { background: var(--surface); border: 2px solid var(--line-2); border-radius: var(--r); padding: var(--sp-3); } .aside__box h2, .aside__box h3 { margin-top: 0; font-size: 1.05rem; } .aside__box ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: var(--fs-sm); } .aside__box li { margin: 0; } /* Objednávkový box je jediný, který má nálepku — má být vidět první. */ .aside__box--cta { background: var(--bg); border-color: var(--accent); box-shadow: var(--nalepka); } /* Na úzké obrazovce by objednávka skončila až za vším textem. `display: contents` rozpustí