/* ========================================================================= base.css: tokeny, reset, typografie, tlačítka, formulář, utility, animace Web Ing. Petr Škola, redesign 2026 Načítá se jako první. Vše, co je tady, smí přebít layout.css → sections.css → variants.css (v tomto pořadí). PRAVIDLO: v tomto souboru je jediné místo, kde smí být barva zapsaná natvrdo: blok :root níže. Všude jinde jen var() nebo color-mix(). Obsah: 1. Tokeny 2. Reset 3. Základní plocha 4. Typografie 5. Odkazy a drobná text-utility 6. Tlačítka 7. Formulářové prvky 8. Utility 9. Animace (reveal, lines) 10. Omezení pohybu 11. Tisk ========================================================================= */ /* ========================================================================= 1. TOKENY Design studio je za běhu přepisuje jako inline style na . Inline style vždy přebije i pravidla v @media níže, to je záměr. ========================================================================= */ :root { /* --- 1.1 Barvy: vlastní modré schéma ---------------------------------- */ /* Vyexportováno z Design studia (seed: bg #EFF6FF, band #000000, text #171A20, on-band #E8ECF2, accent #124F97, accent-band #95BCE8). */ --bg: #EFF6FF; /* hlavní světlá plocha */ --bg-2: #E3E9F2; /* střídavý světlý pás */ --surface: #FBFCFF; /* karty, formulář */ --band: #000000; /* tmavý pás sekce, hlavička */ --band-2: #000000; /* druhý tmavý pás */ --footer-bg: #000000; /* Barva, kterou si prohlížeč bere pro svoje vlastní lišty (adresní řádek na iOSu, záložka na macOS). Drží se plochy stránky, aby se rám okna nikdy neodlišil od obsahu. Kdo ji čte a proč, vysvětluje oddíl 3.1. */ --chrome: var(--bg); --text: #171A20; /* text na světlém */ --text-mute: #63676F; --on-band: #E8ECF2; /* text na tmavém */ --on-band-mute: #7C7F82; --accent: #124F97; /* výplň tlačítek, akcenty na světlém */ --accent-hover: #003F86; --accent-soft: #CFE9FF; /* jemné plochy, pozadí štítků */ --accent-band: #95BCE8; /* akcent na tmavém pásu */ --on-accent: #FFFFFF; /* text na --accent */ --line: rgba(23, 26, 32, .12); /* linka na světlém */ --line-strong: rgba(23, 26, 32, .22); --line-band: rgba(232, 236, 242, .13); /* linka na tmavém */ --line-band-2: rgba(232, 236, 242, .24); --err: #B4342F; /* chyba na světlém */ --err-band: #F0A5A0; /* chyba na tmavém */ --ok: #2C7A4B; --brand-blue: #003DA5; /* RE/MAX: jen drobné prvky */ --brand-red: #DC1C2E; /* --- 1.2 Písmo -------------------------------------------------------- */ --font-display: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; /* Poppins je geometrické a na 600 drží; těsné prostrkání mu slepí nadpis do jednoho bloku, což je záměr tohoto schématu. */ --display-weight: 600; --display-track: -.042em; /* prostrkání nadpisů, h2/h3 z něj počítají podíl */ --display-case: none; /* none | uppercase */ --display-lh: 1.06; --body-size: 17.5px; --body-lh: 1.7; /* --- 1.3 Tvarosloví --------------------------------------------------- */ /* Oblé tvarosloví: 28px. Odvozeniny vyjdou 10 / 17 / 45 px. */ --radius: 28px; --r-xs: calc(var(--radius) * .35); --r-sm: calc(var(--radius) * .62); --r-lg: calc(var(--radius) * 1.6); --r-pill: 999px; /* jen štítek nad fotkou nemovitosti */ --border-w: 1px; /* síla rámečků; styl „brutal“ ji zvýší */ /* --- 1.4 Prostor ------------------------------------------------------ */ --density: 0.75; /* násobič vertikálního prostoru, 0.75–1.35 */ --section-y: calc(clamp(56px, 7.2vw, 112px) * var(--density)); --wrap: 1280px; --wrap-slim: 720px; --pad: clamp(20px, 4vw, 40px); --gap: clamp(16px, 2vw, 28px); --header-h: 76px; /* skutečnou výšku dopočítá app.js */ /* Šířka vysunutého mobilního menu. Na telefonu vychází z 86 % okna: za panelem zůstane proužek ztmavené stránky, takže je znát, že se menu jen překrývá, ale položky uvnitř mají dost místa na velké písmo. Na tabletu by 86 % byl pruh přes půl metru, proto strop. */ --menu-w: min(86%, 400px); /* Odsazení plovoucího burgeru od horní hrany okna. Je to token, protože stejnou hodnotu potřebuje i horní řádek v panelu menu (.menu__top), aby popiska seděla přesně v ose křížku. Varianta nav="plovouci" ji zvyšuje, viz variants.css. */ --burger-top: 8px; /* --- 1.5 Stíny -------------------------------------------------------- */ /* Karta v klidu stín NEMÁ, jen rámeček. Stín se objeví až při hoveru. */ --shadow-alpha: .13; /* 0 = úplně bez stínů */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, calc(var(--shadow-alpha) * .5)), 0 4px 12px rgba(0, 0, 0, calc(var(--shadow-alpha) * .6)); --shadow-md: 0 2px 6px rgba(0, 0, 0, calc(var(--shadow-alpha) * .5)), 0 14px 34px rgba(0, 0, 0, var(--shadow-alpha)); --shadow-lg: 0 10px 28px rgba(0, 0, 0, var(--shadow-alpha)), 0 40px 80px rgba(0, 0, 0, calc(var(--shadow-alpha) * 1.2)); /* --- 1.6 Pohyb -------------------------------------------------------- */ --motion: 1; /* 1 = zapnuto, 0 = vypnuto (studio i reduced-motion) */ --e-out: cubic-bezier(.22, 1, .36, 1); --e-soft: cubic-bezier(.4, 0, .2, 1); --e-panel: cubic-bezier(.35, .19, .45, .91); /* vysouvání menu */ --t-fast: .18s; --t: .42s; --t-slow: .66s; /* Odvozené délky, které už mají --motion započítané. Doplněno nad rámec §2.3 kontraktu, viz poznámka v odpovědi agenta. */ --t-hover: calc(.22s * var(--motion)); /* hover stavy */ --t-reveal: calc(.5s * var(--motion)); /* odkrývání při scrollu */ --t-image: calc(.5s * var(--motion)); /* scale obrázku při hoveru */ --reveal-y: 16px; /* posun při odkrývání */ /* --- 1.7 Zrnitost ----------------------------------------------------- */ /* Jen na tmavých pásech. Textura je vygenerovaná inline SVG šumem, takže nepotřebuje žádný externí soubor ani obrázek. */ --grain: .12; --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); /* --- 1.8 Drobné ikony jako data URI ----------------------------------- Doplněno nad rámec §2.3 kontraktu, aby CSS nepotřebovalo externí soubor. `--ico-arrow` a `--ico-check` se používají jako maska, takže na barvě v jejich kresbě nezáleží, barvu dává `background: currentColor`. `--ico-chevron*` jde do je pod ní šipka jako background-image a zkratka by ji i s jejím umístěním a nastavením „neopakovat“ smazala (viz oddíl 7 níž). */ background-color: var(--surface); border: var(--border-w) solid var(--line-strong); border-radius: var(--r-sm); transition: border-color var(--t-hover) var(--e-soft), background-color var(--t-hover) var(--e-soft); } textarea { min-height: 148px; resize: vertical; } ::placeholder { color: var(--text-mute); } /* Vlastní šipka u výběru, nativní by ignorovala barevné schéma. */ select { appearance: none; padding-right: 44px; background-image: var(--ico-chevron); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px 16px; cursor: pointer; } /* --- 7.1 Stavy ---------------------------------------------------------- */ .field input:not([type="checkbox"]):hover, .field select:hover, .field textarea:hover { border-color: var(--text-mute); } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 0; /* žádné rozmazané glow */ } [aria-invalid="true"], .field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--err); } .field input[disabled], .field select[disabled], .field textarea[disabled] { opacity: .55; cursor: not-allowed; background-color: color-mix(in oklab, var(--text) 4%, var(--surface)); } /* --- 7.2 Hláška u pole --------------------------------------------------- */ .field__err { display: none; margin: 0; max-width: none; font-size: .8rem; line-height: 1.45; color: var(--err); } .field.is-invalid .field__err { display: block; } /* Vysvětlivka pod polem: proč se na tohle web ptá. Na rozdíl od hlášky je vidět pořád, ale jen tam, kde by jinak vznikla otázka — u nepovinného pole ve formuláři, který se jinak ptá na minimum. Když pole zčervená, vysvětlivka ustoupí: dvě řádky pod sebou by se pral o pozornost s tím, co je potřeba opravit. */ .field__hint { display: block; margin-top: 5px; font-size: .8rem; line-height: 1.45; color: var(--text-mute); } .field.is-invalid .field__hint { display: none; } /* --- 7.3 Zaškrtávátko ---------------------------------------------------- */ /* Vlastní čtvereček místo nativního, a to všude: nativnímu se nedá dát velikost. Prohlížeč si ho nakreslí ve své a rámeček roztáhne přes zadaných dvacet pixelů — na iOS z toho vypadne pokřivený obrys, který se srovná až po prvním klepnutí. Tady je čtvereček obyčejná plocha s rámečkem, takže se chová stejně na telefonu i na stole. Selektor je schválně bez třídy: zaškrtávátko má na webu jeden tvar, ať stojí u souhlasu, ve výběru vybavení, nebo kdekoli jinde. */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 20px; height: 20px; min-height: 0; padding: 0; border: var(--border-w) solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface); cursor: pointer; transition: border-color var(--t-hover) var(--e-soft), background-color var(--t-hover) var(--e-soft); } input[type="checkbox"]:hover { border-color: var(--text-mute); } /* Fajfka je maska, ne obrázek; barvu si bere z `color`, takže sedí i v paletách, kde je --on-accent tmavé. */ input[type="checkbox"]::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: var(--ico-check) center / 13px 13px no-repeat; mask: var(--ico-check) center / 13px 13px no-repeat; opacity: 0; transform: scale(.7); transition: opacity var(--t-hover) var(--e-soft), transform var(--t-hover) var(--e-soft); } input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* Nezaškrtnutý povinný souhlas. Obecné pravidlo pro [aria-invalid] výš je slabší než tvar čtverečku, musí se zopakovat i sem. */ input[type="checkbox"][aria-invalid="true"] { border-color: var(--err); } input[type="checkbox"]:checked::before { opacity: 1; transform: none; } /* Ve vysokém kontrastu si systém kreslí ovládací prvky sám a maska by z čtverečku udělala prázdný rámeček. Vrátíme mu tam nativní tvar. */ @media (forced-colors: active) { input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; } input[type="checkbox"]::before { content: none; } } .field--check { flex-direction: row; align-items: flex-start; gap: 12px; } .field--check input[type="checkbox"] { margin-top: 2px; } .field--check > label { font-size: .88rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.55; color: var(--text-mute); cursor: pointer; } /* --- 7.4 Past na roboty --------------------------------------------------- */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* --- 7.5 Stavová hláška formuláře ---------------------------------------- */ .form__status { margin: 0; max-width: none; font-size: .9rem; line-height: 1.6; color: var(--text-mute); } .form__status:empty { display: none; } .form__status.is-ok { color: var(--ok); } .form__status.is-err { color: var(--err); } /* ========================================================================= 8. UTILITY ========================================================================= */ /* --- 8.1 Šířka obsahu ---------------------------------------------------- */ .wrap { width: 100%; max-width: calc(var(--wrap) + var(--pad) * 2); margin-inline: auto; padding-inline: var(--pad); } .wrap--slim { max-width: calc(var(--wrap-slim) + var(--pad) * 2); } /* --- 8.2 Přeskočení na obsah --------------------------------------------- */ .skip { position: fixed; top: 12px; left: 12px; z-index: 999; padding: 12px 20px; font-size: .9rem; font-weight: 500; color: var(--on-accent); background: var(--accent); border-radius: var(--r-sm); transform: translateY(-160%); transition: transform var(--t-hover) var(--e-out); } .skip:focus-visible { transform: none; } /* --- 8.3 Skryté jen pro oči ---------------------------------------------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- 8.4 Štítek (hero badges) -------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: .8rem; line-height: 1.35; color: var(--text-mute); border: var(--border-w) solid var(--line); border-radius: var(--r-xs); } .badge svg { width: 16px; height: 16px; color: var(--text); } /* --- 8.5 Vertikální rytmus ----------------------------------------------- */ .stack > * + * { margin-top: var(--stack-gap, 1rem); } /* --- 8.6 Zrnitost -------------------------------------------------------- Nasazuje se jen na tmavé pásy. Na světlé ploše a v hero nic. */ .grain { position: relative; isolation: isolate; } .grain::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--grain); background-image: var(--grain-img); background-size: 160px 160px; mix-blend-mode: overlay; } /* --- 8.7 Drobnosti -------------------------------------------------------- */ .no-wrap { white-space: nowrap; } .center { text-align: center; } /* ========================================================================= 9. ANIMACE Prvky jsou VIDITELNÉ by default. Skrývá je až třída `js` na , kterou nastaví app.js. Když JS spadne, nic nezmizí. ========================================================================= */ .js .reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--t-reveal) var(--e-out), transform var(--t-reveal) var(--e-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js .reveal.is-in { opacity: 1; transform: none; will-change: auto; } .js .reveal--scale { transform: scale(.97); } .js .reveal--right { transform: translateX(24px); } .js .reveal--left { transform: translateX(-24px); } .js .reveal--scale.is-in, .js .reveal--right.is-in, .js .reveal--left.is-in { transform: none; } /* --- 9.1 Nadpis po řádcích ------------------------------------------------ */ .js .lines .line { display: block; overflow: hidden; /* aby se dolní dotažnice „y“ a „j“ neořízly */ padding-bottom: .14em; margin-bottom: -.14em; } .js .lines .line > span { display: block; transform: translateY(105%); transition: transform calc(var(--t-slow) * var(--motion)) var(--e-out); transition-delay: var(--line-delay, 0ms); } .js .lines.is-in .line > span { transform: none; } /* ========================================================================= 10. OMEZENÍ POHYBU „prefers-reduced-motion“ nebo data-motion="zadny" → statická stránka. Nic se nesmí ztratit, jen se nic nehýbe. ========================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --motion: 0; --reveal-y: 0px; } html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js .reveal, .js .lines .line > span { opacity: 1 !important; transform: none !important; } } [data-motion="zadny"] { scroll-behavior: auto; } [data-motion="zadny"] *, [data-motion="zadny"] *::before, [data-motion="zadny"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-motion="zadny"] .reveal, [data-motion="zadny"] .lines .line > span { opacity: 1 !important; transform: none !important; } /* ========================================================================= 11. TISK Na papír patří obsah, ne nástroje. ========================================================================= */ @media print { /* Barvy se nepřepisují na jednotlivých prvcích, ale rovnou v tokenech, jinak by zůstal světlý text na netištěném tmavém pozadí. `!important` je tu nutné: studio si tokeny drží jako inline style na . */ :root { --bg: #FFFFFF !important; --bg-2: #FFFFFF !important; --surface: #FFFFFF !important; --band: #FFFFFF !important; --band-2: #FFFFFF !important; --footer-bg: #FFFFFF !important; --text: #000000 !important; --text-mute: #3A3A3A !important; --on-band: #000000 !important; --on-band-mute: #3A3A3A !important; --accent: #000000 !important; --accent-hover: #000000 !important; --accent-band: #000000 !important; --accent-soft: #FFFFFF !important; --on-accent: #FFFFFF !important; --line: #B4B4B4 !important; --line-strong: #6E6E6E !important; --line-band: #B4B4B4 !important; --line-band-2: #6E6E6E !important; --shadow-alpha: 0 !important; --grain: 0 !important; --motion: 0 !important; --section-y: 24px !important; --header-h: 0px !important; } body { background: var(--bg); color: var(--text); font-size: 11pt; line-height: 1.45; } /* Nástroje, dekorace a plovoucí prvky pryč. */ .st-fab, .st-panel, #studio, #studio-fab, .mobar, .rail, .menu, .burger, .totop, .hero__glow, .hero__scroll, .hero__bg, .skip, .grain::after { display: none !important; } .hd { position: static !important; box-shadow: none !important; } .reveal, .lines .line > span { opacity: 1 !important; transform: none !important; } /* Odkaz bez cíle je na papíře k ničemu. */ .prose a[href^="http"]::after, p a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; } section, .card, figure, blockquote { break-inside: avoid; } h1, h2, h3 { break-after: avoid; } }