/* ========================================================================== variants.css: rozvržení a varianty vzhledu Web Ing. Petr Škola, redesign 2026 Načítá se jako poslední, takže smí přebíjet base.css, layout.css i sections.css. Přesto tu nikde není !important, všude stačí specificita, kterou dává atribut na (např. [data-layout="swiss"]). Pravidla, která soubor dodržuje: • žádná barva natvrdo, jen tokeny z base.css a color-mix() (jediná výjimka: text ležící na fotografii pod tmavým gradientem, rozvržení „cinema“, kontrakt §2) • prvek, který varianta nepoužije, se skrývá přes display: none, nikdy nulovou průhledností • každá varianta musí projít na 360 px bez vodorovného posunu TRIK, KTERÝ SE TU OPAKUJE: „prosvětlení tmavého pásu“ Rozvržení „cinema“ a „klid“ tmavé pásy nechtějí. Místo přepisování několika desítek pravidel z layout.css a sections.css jim jen v místní platnosti přemapuju tokeny (--band, --on-band, --line-band…) na světlé protějšky. Všechna existující pravidla pak vyjdou správně sama. OBSAH 00 Sdílené pomůcky variant 10 Rozvržení: editorial (výchozí) 20 Rozvržení: cinema 30 Rozvržení: swiss 40 Rozvržení: magazin 50 Rozvržení: klid 60 Rozvržení: panel 70 Tvarosloví (data-shape) 80 Provedení karet (data-cards) 90 Styl hlavičky (data-nav) 100 Intenzita pohybu (data-motion) 110 Tmavý režim: kosmetika (data-mood) ========================================================================== */ /* ========================================================================== 00 SDÍLENÉ POMŮCKY VARIANT ========================================================================== */ /* --- 00.1 Číslování sekcí ------------------------------------------------- Prázdný je v každé hlavičce sekce. Rozvržení „swiss“ a „magazin“ do něj přes ::before doplní pořadové číslo. Span má aria-hidden, takže se do čtečky nic navíc nedostane. */ [data-layout="swiss"] main, [data-layout="magazin"] main { counter-reset: sekce; } [data-layout="swiss"] .sec-head, [data-layout="magazin"] .sec-head { counter-increment: sekce; } [data-layout="swiss"] .sec-head__num::before, [data-layout="magazin"] .sec-head__num::before { content: counter(sekce, decimal-leading-zero); } /* --- 00.2 Karta v hero patří jen „editorial“ ------------------------------ Výchozí hero staví text do světlé karty s přelivem, kterou vpravo přerůstá portrét. Ostatní rozvržení skládají hero po svém (fotka na pozadí, plný pruh, klidná typografie) a karta by jim do toho vstupovala. Tady se proto rozpustí zpět do plochy; co si které rozvržení chce nastavit jinak, přebije to ve svém vlastním oddílu níž. */ :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .hero__grid { gap: clamp(28px, 4vw, 44px); margin-block: 0; padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 6vw, 72px); border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text); } /* Přeliv karty a panel za portrétem: obojí kreslí pseudoprvek, takže stačí je zhasnout. */ :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .hero__grid::before, :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .hero__media::before { display: none; } /* Portrét se vrací do toku vedle textu, mimo tok ho staví jen „editorial“. */ :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .hero__media { position: relative; inset: auto; display: block; width: auto; margin: 0; } :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .hero__photo { height: max(300px, 44vw); max-height: 560px; border-radius: var(--radius); } /* Text vlevo, portrét vpravo; dokud si rozvržení níž neřekne jinak (cinema a klid staví jeden sloupec, swiss a magazin mají vlastní poměr). */ @media (min-width: 1024px) { :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; } } /* Barvy textu ani tlačítek se tu už přenastavovat nemusí: od chvíle, kdy je výchozí karta světlá, je sections.css staví rovnou na světlou plochu. */ /* --- 00.3 Karta v „O mně“ patří taky jen „editorial“ ---------------------- Osobní blok je stavěný ze stejných dílů jako hero: papírová karta s přelivem a posunutý panel za portrétem. Kde se rozpouští hero, musí se rozpustit i on, jinak by uprostřed jinak stavěné stránky zůstala trčet jediná karta z výchozího rozvržení. Odznak přes roh fotky a fajfky u faktů zůstávají: to není dekorace rozvržení, ale obsah. */ :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .about { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .about::before, :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .about__frame::before { display: none; } /* Bez panelu za fotkou nemá odznak proč viset o jeho přesah ven. */ :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .about__badge { margin-block-end: 16px; margin-inline-start: 16px; } /* --- 00.4 Karta v kontaktu patří taky jen „editorial“ --------------------- Formulář a údaje vedle něj leží ve výchozím rozvržení v téže papírové kartě jako hero a „O mně“. Kde se rozpouští ty, musí i tahle, jinak by na jinak stavěné stránce zůstala trčet jediná karta z editorialu. Bledě modrá výplň polí jde pryč s ní: bez karty leží formulář rovnou na pásu a bílé pole je na něm vidět samo. */ :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .contact { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .contact::before { display: none; } :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .field input:not([type="checkbox"]), :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .field select, :where([data-layout="cinema"], [data-layout="swiss"], [data-layout="magazin"], [data-layout="klid"], [data-layout="panel"]) .field textarea { background-color: var(--surface); } /* ========================================================================== 10 ROZVRŽENÍ: EDITORIAL (výchozí) Výchozí podoba webu je celá v sections.css: split hero, karty s vlasovým rámečkem, střídání světlých a tmavých pásů. Tady je jen doladění, které se nehodí do sections.css, protože platí opravdu jen pro tuto variantu. ========================================================================== */ /* Číslo sekce plní obsahem jen „swiss“ a „magazin“ (oddíl 00.1). Ve zbylých rozvrženích je to prázdný span, který by jen udělal mezeru navíc, proto pryč. Span má aria-hidden, takže čtečka o nic nepřijde. */ [data-layout="editorial"] .sec-head__num, [data-layout="cinema"] .sec-head__num, [data-layout="klid"] .sec-head__num, [data-layout="panel"] .sec-head__num { display: none; } /* ========================================================================== 20 ROZVRŽENÍ: CINEMA Hero přes celou výšku okna s fotkou na pozadí a tmavým scrimem, text vlevo dole. Portrét se nepoužívá. Hlavička leží na fotce a ztmavne až při scrollu. Zbytek stránky je klidná světlá plocha bez pásů, sekce odděluje jen prostor. Nabídky jsou velké obrazové dlaždice. ========================================================================== */ /* --- 20.1 Prostor místo pásů --------------------------------------------- */ [data-layout="cinema"] { --section-y: calc(clamp(72px, 9vw, 148px) * var(--density)); } /* Světlá plocha všude, pásy se prosvětlí přemapováním tokenů (viz hlavička souboru). Sekce pak drží pohromadě jen prostorem. */ [data-layout="cinema"] .section--alt, [data-layout="cinema"] .section--band, [data-layout="cinema"] .section--band2 { --band: var(--bg); --band-2: var(--bg); --on-band: var(--text); --on-band-mute: var(--text-mute); --line-band: var(--line); --line-band-2: var(--line-strong); --accent-band: var(--accent); --err-band: var(--err); --grain: 0; background: var(--bg); color: var(--text); } /* Rozbalovací pole má na tmavém pásu světlou šipku (layout.css). Na prosvětleném pásu by zmizela, proto zpátky tmavou. */ [data-layout="cinema"] .section--band .field select, [data-layout="klid"] .section--band .field select { background-image: var(--ico-chevron); } /* --- 20.2 Hlavička na fotce ---------------------------------------------- Bez JS se třída .hd--scrolled nikdy nepřidá, proto má průhledná hlavička vlastní tmavý přechod, světlý text na něm zůstane čitelný i nad světlou sekcí. */ [data-layout="cinema"] .hd { position: fixed; inset-inline: 0; top: 0; /* Zápis rozepsaný na dvě vlastnosti kvůli iOS Safari 26 (base.css, oddíl 3.1). Průhledná hlavička se nesmí vzorkovat, proto tady výslovně transparent: prvek s průhledným pozadím prohlížeč přeskočí a vezme barvu . */ background-color: transparent; background-image: linear-gradient( to bottom, color-mix(in oklab, var(--band) 82%, transparent), color-mix(in oklab, var(--band) 24%, transparent) 72%, transparent ); } [data-layout="cinema"] .hd--scrolled { background-color: var(--chrome); background-image: linear-gradient(var(--band), var(--band)); } /* Na mobilu ani cinema hlavičku nahoře nedrží, pravidlo z layout.css (oddíl 5.0b) by tady prohrálo na specificitě, proto se opakuje. */ @media (max-width: 1080px) { [data-layout="cinema"] .hd { position: static; } } /* --- 20.3 Hero ------------------------------------------------------------ */ [data-layout="cinema"] .hero { display: flex; align-items: flex-end; min-height: 100svh; background: var(--band); } [data-layout="cinema"] .hero > .wrap { width: 100%; } /* Fotka pozadí: v ostatních rozvrženích je vypnutá přes display: none. */ [data-layout="cinema"] .hero__bg { display: block; } /* Scrim: zleva dolů tmavý, aby text držel kontrast nad jakoukoli fotkou. */ [data-layout="cinema"] .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .18) 62%, rgba(0, 0, 0, .34)), linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 62%); } /* Na úzkém displeji je textu víc a sahá výš, až do místa, kde je přechod nejsvětlejší. Tam by světle šedý odstavec nad světlou fotkou nedodržel kontrast 4.5:1, proto scrim plošně přitmavíme. */ @media (max-width: 1023px) { [data-layout="cinema"] .hero__bg::after { background: linear-gradient(to top, rgba(0, 0, 0, .86), rgba(0, 0, 0, .52) 70%, rgba(0, 0, 0, .56)), linear-gradient(to right, rgba(0, 0, 0, .45), rgba(0, 0, 0, .2) 62%); } } /* Záře je jediné rozvržení, kde smí být vidět. */ [data-layout="cinema"] .hero__glow { opacity: .45; } /* Portrét se v cinemě nepoužívá. */ [data-layout="cinema"] .hero__media { display: none; } [data-layout="cinema"] .hero__grid { grid-template-columns: minmax(0, 1fr); align-items: end; min-height: 0; padding-block: calc(var(--header-h) + 48px) clamp(72px, 12vh, 150px); } [data-layout="cinema"] .hero__text { max-width: 44rem; } /* Texty leží přímo na fotografii pod tmavým gradientem, jediné místo v celém souboru, kde je barva zapsaná natvrdo (kontrakt §2). */ [data-layout="cinema"] .hero__title, [data-layout="cinema"] .hero__tel-num { color: #FFFFFF; } [data-layout="cinema"] .hero__lead, [data-layout="cinema"] .hero__micro, [data-layout="cinema"] .hero__tel-lbl, [data-layout="cinema"] .hero__badges .badge, [data-layout="cinema"] .hero__scroll { color: rgba(255, 255, 255, .74); } [data-layout="cinema"] .hero__badges .badge svg { color: rgba(255, 255, 255, .92); } [data-layout="cinema"] .hero .kicker { color: var(--accent-band); } [data-layout="cinema"] .hero .kicker::before { background: var(--accent-band); } [data-layout="cinema"] .hero__badges { border-top-color: rgba(255, 255, 255, .22); } [data-layout="cinema"] .hero .btn--ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, .38); } [data-layout="cinema"] .hero .btn--ghost:hover { border-color: #FFFFFF; } [data-layout="cinema"] .hero__scroll i { background: rgba(255, 255, 255, .3); } /* Kotva pod fixní hlavičkou. */ [data-layout="cinema"] .hero__scroll { inset-block-end: 26px; } /* --- 20.4 Nabídky jako obrazové dlaždice --------------------------------- Text leží přes fotku pod tmavým přechodem, opět povolená výjimka. */ [data-layout="cinema"] .props { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(12px, 1.6vw, 20px); } [data-layout="cinema"] .prop { background: none; border: 0; border-radius: var(--r-sm); box-shadow: none; } [data-layout="cinema"] .prop__link { position: relative; display: block; } [data-layout="cinema"] .prop__media { aspect-ratio: 4 / 5; border-radius: var(--r-sm); } /* Zůstává sloupcovým flexem, lokalita se nad název dostává vlastností order, kterou by blokové vykreslení zahodilo. */ [data-layout="cinema"] .prop__body { position: absolute; inset-inline: 0; inset-block-end: 0; flex: none; padding: clamp(80px, 18%, 140px) 22px 22px; background: linear-gradient(to top, rgba(0, 0, 0, .86), rgba(0, 0, 0, .1) 72%, transparent); border-end-start-radius: var(--r-sm); border-end-end-radius: var(--r-sm); } [data-layout="cinema"] .prop__loc { color: rgba(255, 255, 255, .72); } [data-layout="cinema"] .prop__title { color: #FFFFFF; } [data-layout="cinema"] .prop__specs { margin: 0; border-block-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .78); } [data-layout="cinema"] .prop__specs svg { color: rgba(255, 255, 255, .9); } [data-layout="cinema"] .prop__price { color: #FFFFFF; } [data-layout="cinema"] .prop__price small { color: rgba(255, 255, 255, .68); } /* Na úzkém displeji je dlaždice na výšku zbytečně vysoká. */ @media (max-width: 560px) { [data-layout="cinema"] .prop__media { aspect-ratio: 3 / 2; } [data-layout="cinema"] .prop__body { padding-top: 90px; } } /* --- 20.5 Klidnější karty ------------------------------------------------- */ [data-layout="cinema"] .why__item, [data-layout="cinema"] .service { background: none; border-color: var(--line); } /* Bez plochy karty nemá modrý přeliv co podbarvovat. */ [data-layout="cinema"] .service::before { display: none; } /* ========================================================================== 30 ROZVRŽENÍ: SWISS Nula zaoblení, nula stínů, nula dekorace. Vlasové linky místo karet, obří nadpisy vlevo, číslované sekce a viditelná dvanáctisloupcová mřížka. Portrét je úzký sloupec vpravo. ========================================================================== */ [data-layout="swiss"] { --radius: 0; --r-pill: 0; --shadow-alpha: 0; --grain: 0; --display-track: -.03em; } /* --- 30.1 Hlavička sekce -------------------------------------------------- */ [data-layout="swiss"] .sec-head { max-width: 26ch; } [data-layout="swiss"] .sec-head h2, [data-layout="swiss"] .sec-head .display { font-size: clamp(2.1rem, 5vw, 3.9rem); line-height: 1.04; max-width: none; } /* Ve švýcarské sazbě se nic necentruje. */ [data-layout="swiss"] .sec-head--center { max-width: 26ch; margin-inline: 0; text-align: start; } [data-layout="swiss"] .sec-head--center .kicker { justify-content: flex-start; } [data-layout="swiss"] .sec-head--center .sec-head__sub { margin-inline: 0; } [data-layout="swiss"] .sec-head__num { margin-bottom: 14px; font-size: .95rem; font-weight: 500; letter-spacing: .2em; color: var(--accent); } [data-layout="swiss"] :where(.section--band, .section--band2) .sec-head__num { color: var(--accent-band); } /* --- 30.2 Viditelná mřížka ------------------------------------------------ Dvanáct vlasových linek na pozadí obsahu. Pseudoprvek ::after je u tmavých sekcí obsazený zrnitostí, proto kreslím do ::before wrapu. Wrap má z-indexem 2 vlastní vrstvící kontext, takže z-index −1 pošle linky za text, ale nad pozadí sekce. */ @media (min-width: 1024px) { [data-layout="swiss"] .section > .wrap::before { content: ""; position: absolute; inset: 0 var(--pad); z-index: -1; pointer-events: none; background: repeating-linear-gradient( to right, var(--line) 0 var(--border-w), transparent var(--border-w) calc(100% / 12) ); } [data-layout="swiss"] :where(.section--band, .section--band2) > .wrap::before { background: repeating-linear-gradient( to right, var(--line-band) 0 var(--border-w), transparent var(--border-w) calc(100% / 12) ); } } /* --- 30.3 Hero ------------------------------------------------------------ */ [data-layout="swiss"] .hero__title { font-size: clamp(2.6rem, 7.4vw, 5.6rem); line-height: 1; max-width: none; } [data-layout="swiss"] .hero__title .accent { font-style: normal; } @media (min-width: 1024px) { [data-layout="swiss"] .hero__grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: end; gap: clamp(32px, 4vw, 56px); } /* Portrét je úzký sloupec, ne obraz do okraje okna. */ [data-layout="swiss"] .hero__media { margin-inline-end: 0; align-self: end; } [data-layout="swiss"] .hero__photo { min-height: 0; height: 420px; } } /* --- 30.4 Karty jsou jen řádky mezi linkami ------------------------------- */ [data-layout="swiss"] .why, [data-layout="swiss"] .services { gap: 0 clamp(24px, 3vw, 48px); } [data-layout="swiss"] .why__item, [data-layout="swiss"] .service { padding: 26px 0 40px; background: none; border: 0; border-block-start: var(--border-w) solid var(--line); border-radius: 0; } [data-layout="swiss"] .why__item:hover, [data-layout="swiss"] .service:hover { transform: none; box-shadow: none; } /* Z karty zbyl řádek mezi linkami, přeliv by tu visel ve vzduchu. */ [data-layout="swiss"] .service::before { display: none; } [data-layout="swiss"] .why__item h3 { padding-top: 0; border-top: 0; } [data-layout="swiss"] .prop { background: none; border: 0; border-block-start: var(--border-w) solid var(--line); border-radius: 0; } [data-layout="swiss"] .prop:hover { box-shadow: none; } [data-layout="swiss"] .prop__body { padding: 20px 0 28px; } [data-layout="swiss"] .prop__media { border-radius: 0; } /* --- 30.5 Bez dekorace ---------------------------------------------------- Linka nad nadpisem „O mně“, kterou tenhle oddíl zhasínal, už neexistuje ani ve výchozím rozvržení. */ [data-layout="swiss"] .about__photo, [data-layout="swiss"] .hero__photo { border-radius: 0; } /* ========================================================================== 40 ROZVRŽENÍ: MAGAZIN Dvousloupcová sazba: úzký sloupec s hlavičkou sekce vlevo (lepivý), široký pás obsahu vpravo. Nadpisy verzálkami, obří pořadové číslo v pozadí, iniciála u prvního odstavce „O mně“, recenze v rámu. ========================================================================== */ [data-layout="magazin"] { --wrap: 1320px; } /* --- 40.1 Hlavička sekce verzálkami ---------------------------------------- */ [data-layout="magazin"] .sec-head { position: relative; max-width: 34ch; } [data-layout="magazin"] .sec-head h2, [data-layout="magazin"] .sec-head .display { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; max-width: none; } /* Obří pořadové číslo v pozadí hlavičky sekce. */ [data-layout="magazin"] .sec-head__num { position: absolute; inset-block-start: -.28em; inset-inline-start: -.06em; z-index: -1; margin: 0; font-family: var(--font-display); font-size: clamp(6rem, 13vw, 12rem); font-weight: var(--display-weight); line-height: .8; letter-spacing: -.05em; color: color-mix(in oklab, var(--text) 9%, transparent); pointer-events: none; } [data-layout="magazin"] :where(.section--band, .section--band2) .sec-head__num { color: color-mix(in oklab, var(--on-band) 12%, transparent); } /* --- 40.2 Úzký sloupec hlavičky + široký pás obsahu ----------------------- Platí jen pro sekce, které mají hlavičku přímo ve wrapu. Sekce s vlastní vnitřní mřížkou (proces, o mně, kontakt) a užší FAQ si drží své. */ @media (min-width: 1100px) { [data-layout="magazin"] .section > .wrap:not(.wrap--slim):has(> .sec-head) { display: grid; grid-template-columns: minmax(0, 30ch) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; } [data-layout="magazin"] .section > .wrap:not(.wrap--slim):has(> .sec-head) > .sec-head { position: sticky; top: calc(var(--header-h) + 40px); grid-column: 1; margin-bottom: 0; text-align: start; } [data-layout="magazin"] .section > .wrap:not(.wrap--slim):has(> .sec-head) > :not(.sec-head) { grid-column: 2; } /* Doplňkový odkaz i poznámka patří k obsahu, ne k hlavičce. */ [data-layout="magazin"] .section > .wrap:not(.wrap--slim):has(> .sec-head) > .link-more { justify-self: start; margin-bottom: 24px; } [data-layout="magazin"] .section > .wrap:not(.wrap--slim):has(> .sec-head) > .note { margin-top: 26px; } /* Ve dvousloupcové sazbě se necentruje. */ [data-layout="magazin"] .sec-head--center { margin-inline: 0; } [data-layout="magazin"] .sec-head--center .kicker { justify-content: flex-start; } [data-layout="magazin"] .sec-head--center .sec-head__sub { margin-inline: 0; } } /* --- 40.3 Hero: úzký text, široká fotka ----------------------------------- */ @media (min-width: 1024px) { [data-layout="magazin"] .hero__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } } [data-layout="magazin"] .hero__lead { max-width: 40ch; } /* --- 40.4 O mně: iniciála -------------------------------------------------- */ [data-layout="magazin"] .about__body > p:first-child::first-letter { float: inline-start; margin-inline-end: .08em; padding-block-start: .04em; font-family: var(--font-display); font-size: 3.6em; font-weight: var(--display-weight); line-height: .82; color: var(--accent); } /* --- 40.5 Recenze jako citace v rámu -------------------------------------- */ [data-layout="magazin"] .rev { padding: clamp(24px, 3vw, 36px); border: var(--border-w) solid var(--line-band-2); border-radius: var(--r-sm); } [data-layout="magazin"] .rev blockquote { font-size: 1.15rem; } /* --- 40.6 Sazba textu ------------------------------------------------------ */ [data-layout="magazin"] .about__body p, [data-layout="magazin"] .step__body p, [data-layout="magazin"] .faq__a p { max-width: 62ch; } /* ========================================================================== 50 ROZVRŽENÍ: KLID Jediný centrovaný sloupec, velkorysý prostor, drobnější typografie, žádné tmavé pásy. Sekundární akce jsou podtržené odkazy, obrázky jdou přes celou šířku sloupce mezi bloky textu. ========================================================================== */ [data-layout="klid"] { --wrap: 760px; --density: 1.25; --body-size: clamp(15px, .95vw, 16px); --grain: 0; --shadow-alpha: .04; } /* --- 50.1 Prosvětlení všech tmavých ploch -------------------------------- Přemapování tokenů (viz hlavička souboru). Pásy, hlavička, mobilní menu, spodní lišta i patička se tím překlopí do světlé role naráz. */ [data-layout="klid"] .section--band, [data-layout="klid"] .section--band2, [data-layout="klid"] .hd, [data-layout="klid"] .menu, [data-layout="klid"] .burger, [data-layout="klid"] .mobar, [data-layout="klid"] .ft { --band: var(--bg); --band-2: var(--bg); --footer-bg: var(--bg-2); --on-band: var(--text); --on-band-mute: var(--text-mute); --line-band: var(--line); --line-band-2: var(--line-strong); --accent-band: var(--accent); --err-band: var(--err); } [data-layout="klid"] .section--band { background: var(--bg); color: var(--text); } [data-layout="klid"] .section--band2 { background: var(--bg-2); color: var(--text); } /* Světlá hlavička potřebuje vlasovou linku, jinak splyne s hero. Pozadí se tu nepřepisuje: blok tokenů výš už nastavil --band na --bg, takže gradient z layout.css kreslí světlou plochu sám. Zkratkou `background:` by se navíc rozbilo opatření proti přebarvování lišt iOS Safari (base.css, oddíl 3.1). */ [data-layout="klid"] .hd { color: var(--text); box-shadow: 0 1px 0 var(--line); } /* Klid má nejužší sloupec ze všech rozvržení (760 px). Hlavička v něm zůstává klidná, telefon ustoupí, aby se navigace nepřekryla s tlačítkem, a pruh si drží jen tolik místa, kolik potřebuje. */ [data-layout="klid"] .hd__in { max-width: calc(max(var(--wrap), 980px) + var(--pad) * 2); } [data-layout="klid"] .hd__tel { display: none; } [data-layout="klid"] .menu { color: var(--text); } /* Světlý burger by na světlé stránce zmizel, potřebuje vlastní rám. */ [data-layout="klid"] .burger { background-color: var(--bg); border-color: var(--line-strong); } /* Otevřený burger leží na panelu menu a splývá s ním i tady, jinak by světlá dlaždice na světlém panelu vykreslila zbytečný obdélník. */ [data-layout="klid"] .burger[aria-expanded="true"] { background-color: color-mix(in oklab, var(--on-band) 8%, transparent); border-color: transparent; } [data-layout="klid"] .ft { background: var(--bg-2); color: var(--text); } /* --- 50.2 Jediný sloupec --------------------------------------------------- */ [data-layout="klid"] .hero__grid, [data-layout="klid"] .about, [data-layout="klid"] .contact, [data-layout="klid"] .process { grid-template-columns: minmax(0, 1fr); } [data-layout="klid"] .process__aside { position: static; } [data-layout="klid"] .revs, [data-layout="klid"] .why, [data-layout="klid"] .services, [data-layout="klid"] .props { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } /* --- 50.3 Centrovaná hlavička sekce --------------------------------------- */ [data-layout="klid"] .sec-head { max-width: 46ch; margin-inline: auto; text-align: center; } [data-layout="klid"] .sec-head .kicker { justify-content: center; } [data-layout="klid"] .sec-head__sub { margin-inline: auto; } [data-layout="klid"] .sec-head h2, [data-layout="klid"] .sec-head .display { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-inline: auto; } /* --- 50.4 Hero jako klidný úvod ------------------------------------------- */ [data-layout="klid"] .hero__text { max-width: none; text-align: center; } [data-layout="klid"] .hero__title { font-size: clamp(2.1rem, 4.4vw, 3.1rem); max-width: none; } [data-layout="klid"] .hero .kicker, [data-layout="klid"] .hero__act, [data-layout="klid"] .hero__tel, [data-layout="klid"] .hero__badges { justify-content: center; } [data-layout="klid"] .hero__lead { margin-inline: auto; } [data-layout="klid"] .hero__scroll { display: none; } /* Obrázky přes celou šířku sloupce mezi bloky. */ [data-layout="klid"] .hero__media { order: -1; margin-inline-end: 0; } [data-layout="klid"] .hero__photo { height: clamp(280px, 46vh, 460px); min-height: 0; border-radius: var(--r-sm); } /* Poměr stran sedí na rámu, ne na : obrázek je uvnitř absolutní a rozměr si bere od něj. */ [data-layout="klid"] .about__photo { aspect-ratio: 3 / 2; } [data-layout="klid"] .about__media img { object-position: 50% 24%; } /* --- 50.5 Sekundární akce jako podtržený odkaz ---------------------------- */ [data-layout="klid"] .btn--ghost { min-height: 0; padding: 6px 2px; color: var(--text); background: none; border: 0; border-radius: 0; text-decoration: underline; text-underline-offset: .32em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); } [data-layout="klid"] .btn--ghost:hover { color: var(--accent); text-decoration-color: currentColor; } @media (max-width: 480px) { /* Na mobilu roztahuje base.css tlačítka na celou šířku, odkaz ne. */ [data-layout="klid"] .btn--ghost { width: auto; } } /* --- 50.6 Drobnosti -------------------------------------------------------- */ [data-layout="klid"] .why__item:hover, [data-layout="klid"] .service:hover { transform: none; } /* ========================================================================== 60 ROZVRŽENÍ: PANEL Nad 1100 px svislá navigace vlevo (240 px), hlavička skrytá, obsah odsazený. Hlavička každé sekce je lepivý štítek. Karty v hustší mřížce. Pod 1100 px se vrací obyčejná hlavička a rozvržení je editorial. ========================================================================== */ @media (min-width: 1100px) { /* --- 60.1 Svislá navigace --------------------------------------------- .rail má v markupu atribut hidden. Reset v base.css je zapsaný jako `[hidden]:not(.rail)`, takže stačí prostá změna display. */ [data-layout="panel"] .rail { display: flex; } [data-layout="panel"] .hd { display: none; } [data-layout="panel"] body { padding-inline-start: 240px; } /* Fotka v hero už nemá kam přetékat, počítala s celou šířkou okna. */ [data-layout="panel"] .hero__media { margin-inline-end: 0; } [data-layout="panel"] .hero__grid { min-height: 100svh; } /* --- 60.2 Lepivé štítky sekcí ----------------------------------------- Hlavička sekce zůstává nahoře, dokud sekce běží. Musí mít vlastní pozadí, jinak by pod ní prosvítal text. */ [data-layout="panel"] .section > .wrap > .sec-head { position: sticky; top: 0; z-index: 3; max-width: none; margin-bottom: 40px; padding-block: 22px 18px; background: var(--bg); border-block-end: var(--border-w) solid var(--line); } [data-layout="panel"] .section--alt > .wrap > .sec-head { background: var(--bg-2); } [data-layout="panel"] .section--band > .wrap > .sec-head { background: var(--band); border-block-end-color: var(--line-band); } [data-layout="panel"] .section--band2 > .wrap > .sec-head { background: var(--band-2); border-block-end-color: var(--line-band); } /* Aby štítek nezabral půl obrazovky, je nadpis v panelu drobnější a hlavička se roztáhne do řádku. */ [data-layout="panel"] .section > .wrap > .sec-head h2, [data-layout="panel"] .section > .wrap > .sec-head .display { font-size: clamp(1.5rem, 2.2vw, 2rem); max-width: 30ch; } [data-layout="panel"] .section > .wrap > .sec-head .sec-head__sub { margin-top: 10px; font-size: .95rem; max-width: 60ch; } [data-layout="panel"] .sec-head--center { margin-inline: 0; text-align: start; } [data-layout="panel"] .sec-head--center .kicker { justify-content: flex-start; } [data-layout="panel"] .sec-head--center .sec-head__sub { margin-inline: 0; } /* --- 60.3 Hustší mřížka karet ----------------------------------------- */ [data-layout="panel"] .why, [data-layout="panel"] .services { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; } [data-layout="panel"] .why__item, [data-layout="panel"] .service { padding: 26px 22px 28px; } [data-layout="panel"] .props { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; } [data-layout="panel"] .prop__body { padding: 18px; } } /* ========================================================================== 70 TVAROSLOVÍ (data-shape) Kombinovatelné s libovolným rozvržením. ========================================================================== */ /* --- 70.1 Měkký (výchozí) ------------------------------------------------- */ [data-shape="mekky"] { --radius: 8px; --r-pill: 999px; --border-w: 1px; --shadow-alpha: .06; } /* --- 70.2 Ostrý ------------------------------------------------------------ */ [data-shape="ostry"] { --radius: 0; --r-pill: 0; --border-w: 1px; --shadow-alpha: .04; } /* --- 70.3 Pilulkový -------------------------------------------------------- */ [data-shape="pill"] { --radius: 20px; --r-pill: 999px; } [data-shape="pill"] .btn, [data-shape="pill"] .hd__link--cta, [data-shape="pill"] .rail__link--cta, [data-shape="pill"] .rail__cta, [data-shape="pill"] .menu__link--cta, [data-shape="pill"] .badge, [data-shape="pill"] .field input:not([type="checkbox"]), [data-shape="pill"] .field select { border-radius: var(--r-pill); } /* Víceřádkové pole s pilulkovým tvarem vypadá rozbitě. */ [data-shape="pill"] .field textarea { border-radius: var(--radius); } /* --- 70.4 Brutal ---------------------------------------------------------- Tlusté rámy, nulové zaoblení a tvrdé stíny bez rozostření. Stíny se dělají přepsáním tokenů, takže je převezme každé místo, které je používá. */ [data-shape="brutal"] { --radius: 0; --r-pill: 0; --border-w: 2px; --shadow-sm: 4px 4px 0 var(--line-strong); --shadow-md: 7px 7px 0 var(--line-strong); --shadow-lg: 11px 11px 0 var(--line-strong); } [data-shape="brutal"] .why__item, [data-shape="brutal"] .service, [data-shape="brutal"] .prop { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } [data-shape="brutal"] .why__item:hover, [data-shape="brutal"] .service:hover, [data-shape="brutal"] .prop:hover { box-shadow: var(--shadow-md); } [data-shape="brutal"] .field input:not([type="checkbox"]), [data-shape="brutal"] .field select, [data-shape="brutal"] .field textarea { border-color: var(--line-strong); } [data-shape="brutal"] .btn { border-color: var(--text); } /* Na tmavém pásu musí být rám i stín ze světlé škály. */ [data-shape="brutal"] :where(.section--band, .section--band2) { --shadow-sm: 4px 4px 0 var(--line-band-2); --shadow-md: 7px 7px 0 var(--line-band-2); } /* ========================================================================== 80 PROVEDENÍ KARET (data-cards) ========================================================================== */ /* --- 80.1 Karty (výchozí): řeší sections.css ------------------------------ */ /* --- 80.2 Linky: karta je řádek s dělící linkou ---------------------------- */ [data-cards="linky"] .why, [data-cards="linky"] .services, [data-cards="linky"] .props { grid-template-columns: minmax(0, 1fr); gap: 0; } [data-cards="linky"] .why__item, [data-cards="linky"] .service, [data-cards="linky"] .prop { padding-inline: 0; background: none; border: 0; border-block-end: var(--border-w) solid var(--line); border-radius: 0; box-shadow: none; } [data-cards="linky"] .why__item:hover, [data-cards="linky"] .service:hover, [data-cards="linky"] .prop:hover { transform: none; box-shadow: none; } [data-cards="linky"] .service::before { display: none; } [data-cards="linky"] .why__item h3 { padding-top: 0; border-top: 0; } [data-cards="linky"] .prop__body { padding-inline: 0; } [data-cards="linky"] :where(.section--band, .section--band2) .why__item, [data-cards="linky"] :where(.section--band, .section--band2) .service { border-block-end-color: var(--line-band); } /* Od 560 px se řádek rozdělí na sloupec s ikonou a sloupec s textem. */ @media (min-width: 560px) { [data-cards="linky"] .why__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 28px; padding-block: 26px 30px; } [data-cards="linky"] .why__item::before { grid-area: 1 / 1; margin-bottom: 0; } [data-cards="linky"] .why__item .card__ico { grid-area: 2 / 1; margin-bottom: 0; } [data-cards="linky"] .why__item h3 { grid-area: 1 / 2; margin-bottom: 10px; } [data-cards="linky"] .why__item p { grid-area: 2 / 2; } [data-cards="linky"] .service { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 28px; padding-block: 26px 30px; } [data-cards="linky"] .service .card__ico { grid-area: 1 / 1; margin-bottom: 0; } [data-cards="linky"] .service h3 { grid-area: 1 / 2; margin-bottom: 10px; } [data-cards="linky"] .service p { grid-area: 2 / 2; } /* Nabídka: malá fotka vlevo, údaje vpravo. */ [data-cards="linky"] .prop__link { flex-direction: row; align-items: center; gap: clamp(18px, 3vw, 32px); padding-block: 18px; } [data-cards="linky"] .prop__media { flex: none; width: clamp(140px, 24vw, 240px); aspect-ratio: 4 / 3; } [data-cards="linky"] .prop__body { padding-block: 0; } [data-cards="linky"] .prop__specs { margin-top: 14px; } } /* --- 80.3 Mřížka: hustá síť oddělená vlasovými linkami -------------------- Linku kreslí každá karta sama (rámečkem přes box-shadow), ne obal. Kdyby pozadí a rámeček nesl obal, zůstala by po neúplné poslední řadě velká prázdná šedá plocha, šest služeb se do pěti sloupců nerozdělí. Mezera je široká přesně jako rámeček, takže se linky sousedních karet překryjí a nezdvojí. */ [data-cards="mrizka"] .why, [data-cards="mrizka"] .services { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--border-w); } [data-cards="mrizka"] .why__item, [data-cards="mrizka"] .service { padding: 26px 22px 28px; border: 0; border-radius: 0; box-shadow: 0 0 0 var(--border-w) var(--line); } /* Karta tu rámeček nemá, takže přeliv nemá přes co přetéct: kdyby zůstal posunutý o šířku rámečku ven, podbarvil by sdílenou linku sousedům. */ [data-cards="mrizka"] .service::before { inset: 0; } [data-cards="mrizka"] .why__item:hover, [data-cards="mrizka"] .service:hover { transform: none; background: color-mix(in oklab, var(--accent) 5%, var(--surface)); box-shadow: 0 0 0 var(--border-w) var(--line); } [data-cards="mrizka"] :where(.section--band, .section--band2) .why__item, [data-cards="mrizka"] :where(.section--band, .section--band2) .service { box-shadow: 0 0 0 var(--border-w) var(--line-band); } [data-cards="mrizka"] .props { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; } [data-cards="mrizka"] .prop__body { padding: 18px; } [data-cards="mrizka"] .prop__title { font-size: 1.05rem; margin-bottom: 14px; } /* ========================================================================== 90 STYL HLAVIČKY (data-nav) ========================================================================== */ /* --- 90.1 Klasická (výchozí): řeší layout.css ----------------------------- */ /* --- 90.2 Plovoucí: pilulka odsazená od okraje ---------------------------- Hlavička zůstává lepivá (drží si místo v toku, takže nic nepřekrývá), ale sama je průhledná, plave v ní jen pilulka s obsahem. Průhledná plocha nesmí brát kliknutí obsahu za sebou. */ [data-nav="plovouci"] .hd { /* Rozepsané kvůli iOS Safari 26 (base.css, oddíl 3.1). Průhledný pruh se nevzorkuje, barvu lišt tedy určí ; pilulka .hd__in uvnitř je obyčejný prvek v toku, na tu prohlížeč nesahá. */ background-color: transparent; background-image: none; padding-block: 12px; padding-inline: var(--pad); pointer-events: none; } [data-nav="plovouci"] .hd--scrolled { box-shadow: none; } [data-nav="plovouci"] .hd__in { pointer-events: auto; max-width: var(--wrap); /* Pilulka si výšku určuje sama. Nesmí viset na --header-h, ten token dopočítává JS z výšky hlavičky, takže by se hodnota s každým měřením zvětšila o padding .hd a vznikla by nekonečná smyčka ResizeObserveru. */ min-height: 52px; padding-inline: clamp(16px, 2vw, 26px); background: var(--band); border-radius: var(--r-pill); transition: box-shadow var(--t-hover) var(--e-soft); } [data-nav="plovouci"] .hd--scrolled .hd__in { box-shadow: var(--shadow-sm); } /* Odsazená pilulka posouvá i plovoucí burger, jinak by visel nad ní. Přes token, ne přes `top`: stejnou hodnotu si bere i horní řádek v panelu menu, aby popiska „Menu“ zůstala v ose křížku (layout.css oddíl 6). */ [data-nav="plovouci"] { --burger-top: 18px; } /* --- 90.3 Rail: svislá navigace i bez rozvržení „panel“ -------------------- */ @media (min-width: 1100px) { [data-nav="rail"] .rail { display: flex; } [data-nav="rail"] .hd { display: none; } [data-nav="rail"] body { padding-inline-start: 240px; } [data-nav="rail"] .hero__media { margin-inline-end: 0; } } /* ========================================================================== 100 INTENZITA POHYBU (data-motion) Délky a posuny škáluje token --motion už v base.css. Tady zbývá jen to, co je zapsané konkrétní hodnotou (posuny při hoveru, zvětšení fotky). ========================================================================== */ /* --- 100.1 Jemný ----------------------------------------------------------- */ [data-motion="jemny"] .why__item:hover, [data-motion="jemny"] .service:hover { transform: translateY(-2px); } [data-motion="jemny"] .prop__link:hover .prop__media img, [data-motion="jemny"] .prop__link:focus-visible .prop__media img { transform: scale(1.015); } [data-motion="jemny"] .step--on .step__num, [data-motion="jemny"] .step.is-active .step__num { transform: none; } /* --- 100.2 Žádný ----------------------------------------------------------- Nic se nehýbe. Informace, které nese změna barvy nebo linky, zůstávají, jen se objeví okamžitě (délky přechodů vynuluje base.css). */ [data-motion="zadny"] .why__item:hover, [data-motion="zadny"] .service:hover, [data-motion="zadny"] .prop__link:hover .prop__media img, [data-motion="zadny"] .prop__link:focus-visible .prop__media img, [data-motion="zadny"] .step--on .step__num, [data-motion="zadny"] .step.is-active .step__num { transform: none; } [data-motion="zadny"] .hero__scroll i::after { animation: none; transform: none; } /* ========================================================================== 110 TMAVÝ REŽIM: KOSMETIKA (data-mood="tmavy") Prohození barevných rolí dělá studio v JS (přepíše tokeny). CSS smí podle kontraktu §3 doladit jen detaily: na tmavé ploše je zrnitost výraznější a stín musí být hlubší, aby ho bylo vůbec vidět. ========================================================================== */ [data-mood="tmavy"] { --grain: .08; --shadow-alpha: .4; } /* Světlá plocha karty na tmavém podkladu potřebuje zřetelnější rámeček. */ [data-mood="tmavy"] .why__item, [data-mood="tmavy"] .service, [data-mood="tmavy"] .prop, [data-mood="tmavy"] .dt-card { border-color: var(--line-strong); } /* Rozvržení, která tmavé pásy nepoužívají, si zrnitost vynulovala sama (viz oddíly 30 a 50), tady se proto nic dalšího přenastavovat nemusí. */