/* base.css - společný základ všech šablon osobního webu DJe. Obsahuje reset, typografii a sekce, které vypadají ve všech šablonách podobně. Barevnost a rozvržení si řeší CSS jednotlivých šablon. Akcent přichází jako --accent z registru šablon (SiteRenderer::head). */ *, *::before, *::after { box-sizing: border-box; } body.site { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 17px; line-height: 1.6; -webkit-text-size-adjust: 100%; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* Sekce. Šířka jde přes proměnnou, aby ji šablona mohla přepsat jedním řádkem. */ .site { --w: 68rem; --pad: 1.25rem; } .s-sec { max-width: var(--w); margin: 0 auto; padding: 3.5rem var(--pad); } .s-sec__title { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; } .s-sec__lead { margin: 1rem 0 0; opacity: .75; font-size: .95rem; } .s-prose p { margin: 0 0 1rem; } .s-prose :last-child { margin-bottom: 0; } /* Tlačítka */ .s-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0 1.3rem; border: 1px solid currentColor; border-radius: 999px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .12s ease, opacity .12s ease; } .s-btn:hover { transform: translateY(-1px); } .s-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; } .s-btn--lg { min-height: 3.3rem; padding: 0 1.8rem; font-size: 1.05rem; } .s-badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .8rem; font-weight: 600; } /* Štítky zaměření */ .s-tags { margin-bottom: 1.5rem; } .s-tags__label { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .6; } .s-tags__list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; } .s-tag { padding: .35rem .8rem; border-radius: 999px; font-size: .9rem; } /* Galerie - mřížka, která se sama přizpůsobí počtu fotek. */ .s-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; } .s-gal__item { margin: 0; overflow: hidden; border-radius: 14px; } .s-gal__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* Videa - poměr 16:9 bez JS. */ .s-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; } .s-video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; } .s-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Volné termíny */ .s-dates { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.25rem 0 0; padding: 0; } .s-date { display: inline-flex; align-items: baseline; gap: .45rem; padding: .5rem .95rem; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem; } .s-date__price { font-weight: 500; opacity: .8; font-size: .85rem; } /* Ceník */ /* `align-items: start` - bez něj mřížka roztáhne každou kartu na výšku té nejvyšší v řadě, takže typ akce s pevnou cenou má pod obsahem tolik prázdné plochy, kolik má vedlejší typ balíčků (změřeno 95 px). Karta ceníku nemá důvod být vysoká podle sousedky. */ .s-price { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; align-items: start; } .s-price__item { padding: 1.25rem; border-radius: 16px; } .s-price__name { margin: 0 0 .35rem; font-size: 1.05rem; } .s-price__amount { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--accent); } .s-price__note { margin: .35rem 0 0; font-size: .85rem; opacity: .7; } .s-price__pkgs { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; font-size: .9rem; } .s-price__pkgs li { display: flex; justify-content: space-between; gap: 1rem; } .s-price__incl { margin-top: 1.5rem; font-size: .95rem; } .s-price__incl ul { margin: .5rem 0 0; padding-left: 1.2rem; } /* Tři důvody */ .s-usp { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; } .s-usp__item { padding: 1.5rem; border-radius: 16px; } .s-usp__num { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; margin-bottom: .75rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; } .s-usp__title { margin: 0 0 .35rem; font-size: 1.15rem; line-height: 1.3; } .s-usp__text { margin: 0; opacity: .8; line-height: 1.55; } /* Čísla */ .s-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; margin: 0; } .s-numbers__item { text-align: center; } .s-numbers__value { margin: 0; font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; line-height: 1; color: var(--accent); } .s-numbers__label { margin: .35rem 0 0; font-size: .85rem; opacity: .7; } /* Kontakt */ .s-contact { display: grid; gap: 1.5rem; } .s-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .s-contact__list li { display: flex; gap: .75rem; flex-wrap: wrap; } .s-contact__list span { min-width: 7rem; opacity: .6; font-size: .9rem; } /* Poznámka k DPH pod fakturačními údaji. Je to podmínka k cenám v ceníku, ne další kontaktní řádek - proto menší a tlumená. */ .s-contact__vat { margin: 0; font-size: .9rem; opacity: .7; } .s-social { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; } .s-social a { text-decoration: none; padding: .35rem .8rem; border: 1px solid currentColor; border-radius: 999px; font-size: .9rem; } /* Patička */ .site-foot { padding: 2.5rem var(--pad); font-size: .85rem; } .site-foot__inner { max-width: var(--w); margin: 0 auto; display: grid; gap: .3rem; } .site-foot__name { margin: 0; font-weight: 700; } .site-foot__legal, .site-foot__by { margin: 0; opacity: .65; } /* Verze šablony. Vlastní třída, ne jen text v odstavci - je to technický údaj vedle jména webu, takže smí být menší a ještě tlumenější; a při zúžení se zalomí na vlastní řádek místo do půlky věty. */ .site-foot__ver { display: inline-block; font-size: .92em; opacity: .8; white-space: nowrap; } /* ── Hero (kreslí ho jen Vizitka) ───────────────────────────────────────────── Rozvržení a rozměry jsou tady, barvy a závoj ve `vizitka.css`. Kompozice stojí na JEDNÉ hraně obsahu: portrét je samostatný sloupec mřížky a odznak, jméno, claim, fakta i tlačítka leží pod sebou ve druhém sloupci. Dřív byl řádek tlačítek sourozencem portrétu, takže na okně 1280 začínal na 156 px, kdežto text vedle až na 292 px - hlavička měla dvě svislé hrany a v půlce se lámala. */ .s-hero { /* ŽÁDNÉ `overflow: hidden`. Fotka na pozadí drží `inset: 0`, takže z hera nemá jak přetéct a ořez nepotřebuje - zato vyskakovací kalendář kalkulačky ustřihával v půlce. Scéna to má ze stejného důvodu stejně (viz komentář u `.sc-hero` v scena.css). */ position: relative; /* Velikost portrétu jako proměnná: mění se na jednom místě a monogram si podle ní sám přepočítá písmo, takže mu na telefonu nevyleze ven. Spodní mez 12,5 rem (200 px) drží velikost na širokém okně, horní vazba na šířku okna ji krátí dřív, než portrét začne ukrajovat z textového sloupce - při 200 px a okně 768 px by textu zbylo pod 500 px a jméno by se lámalo na tři řádky. */ --s-hero-portret: clamp(8rem, 16vw, 12.5rem); } .s-hero__bg { position: absolute; inset: 0; background-size: cover; } .s-hero__inner { position: relative; max-width: var(--w); margin: 0 auto; padding: 4.5rem var(--pad) 3rem; } /* `minmax(0, 1fr)` je nutné: se samotným `1fr` se sloupec neumí zmenšit pod svůj obsah a dlouhé jméno by vytlačilo portrét z okna. `align-items: start` sráží horní hranu portrétu s horní hranou obsahu - svislé vystředění by portrét u bohatšího profilu nechalo plavat uprostřed sloupce. */ .s-hero__lead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: clamp(1.25rem, 3vw, 2rem); } /* Portrét. Kolečko jako v katalogu (`.dj__avatar`, `.detail__avatar`) - jeden tvarový slovník napříč projektem. */ .s-hero__avatar { width: var(--s-hero-portret); height: var(--s-hero-portret); border-radius: 50%; object-fit: cover; } .s-hero__avatar--mono { display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--s-hero-portret) / 2.9); font-weight: 800; letter-spacing: .01em; } /* Obsahový sloupec. Odstupy berou škálu Vizitky (--v-s*), ale s náhradní hodnotou - base.css nesmí spadnout na tom, že šablona proměnnou nemá. */ .s-hero__eyebrow { margin: 0 0 var(--v-s2, .6rem); } /* `.s-badge` je v base.css `inline-block`; s fajfkou uvnitř potřebuje flex. Rozšíření je schválně zúžené na `.s-hero__eyebrow`, aby se sdílená třída nezměnila jinde. */ .s-hero__eyebrow .s-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; } .s-badge__ico { width: .95rem; height: .95rem; flex: 0 0 auto; } .s-hero__name { margin: 0; font-size: clamp(2rem, 5.4vw, 3.1rem); line-height: 1.05; letter-spacing: -.03em; /* Přezdívky bývají jedno dlouhé slovo bez mezery; bez tohohle přeteče na 375 px z okna ven. */ overflow-wrap: anywhere; } /* Nadpis, jehož obsahem je logo. `line-height: 0` sundá z řádku volné místo, které si nese text nadpisu - jinak by pod logem zbyla mezera po řádku, který tam žádný není, a odstup ke claimu by seděl jinak než u jména. */ .s-hero__name--logo { line-height: 0; } /* Výška se řídí jen tudy. `max-width` je pojistka pro široká podlouhlá loga: u nahrazeného prvku se při jejím uplatnění dopočítá výška, takže se logo zmenší v poměru a nezploští se. */ .s-hero__logo { display: block; height: clamp(2.4rem, 5vw, 3.4rem); width: auto; max-width: min(100%, 22rem); } .s-hero__claim { margin: var(--v-s2, .6rem) 0 0; max-width: 46ch; font-size: 1.1rem; line-height: 1.45; } /* Pás faktů. Vlasová linka nad ním kreslí levou hranu sloupce, takže je i bez měření vidět, že jméno, fakta i tlačítka patří k sobě. Barvu linky dodává šablona - v base zůstává průhledná. Flex, ne mřížka: mřížka by se dvěma údaji roztáhla sloupce přes celou šířku a mezi „Praha" a „od 12 000 Kč" by zela díra. */ /* Odstupy jsou těsnější, než by odpovídalo škále: hero nese navíc kalkulačku, takže každý ušetřený krok se sčítá. Pás faktů je jen řádek údajů, ne blok. */ .s-hero__facts { display: flex; flex-wrap: wrap; gap: .6rem 2.25rem; margin: var(--v-s3, 1rem) 0 0; padding-top: var(--v-s2, .6rem); border-top: 1px solid transparent; } .s-hero__fact { min-width: 0; } .s-hero__fact-label { margin: 0; font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; } /* `dd` má od prohlížeče odsazení 40 px, které by hranu sloupce rozbilo. */ .s-hero__fact-value { margin: .1rem 0 0; font-size: 1.08rem; font-weight: 700; line-height: 1.3; } .s-hero__fact-note { display: block; font-size: .82rem; font-weight: 500; } /* Výzva k akci. Leží uvnitř textového sloupce, ne pod portrétem. Výška 56 px je stejná jako u vyhledávání v katalogu. */ /* Sloupec s portrétem: kolečko a pod ním výzva k akci. Tlačítka dřív stála v textovém sloupci pod fakty, takže pod portrétem zbývalo 223 px prázdna (změřeno na okně 1650 px) a hlavička byla o 72 px vyšší, než musela. ŠÍŘKU URČUJE PORTRÉT, ne tlačítka. Sloupec je v mřížce `auto`, takže by si ho dvě pilulky vedle sebe roztáhly na svoji šířku (~430 px) a ukrojily by ji textu; `max-width` je proto uvázaná na portrét a tlačítka se pod sebe složí sama. Spodní hranici drží `min-width`, aby se u malého portrétu na užším okně telefonní číslo nelámalo. */ .s-hero__side { display: flex; flex-direction: column; align-items: stretch; max-width: max(var(--s-hero-portret), 13rem); } /* Pilulky pod sebe, ne vedle sebe - vedle sebe by si sloupec roztáhly. */ .s-hero__side .s-hero__cta { flex-direction: column; } /* Užší vnitřní okraj NEŽ v běžné pilulce. S výchozími 1,5rem měřilo tlačítko 214 px proti sloupci 200 px, takže vyčuhovalo do mezery mezi sloupci; s 1rem se vejde a přitom zůstane dost velké na palec (výška 3rem se nemění). */ .s-hero__side .s-hero__cta .s-btn { padding: 0 1rem; } .s-hero__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: var(--v-s4, 1.5rem) 0 0; } .s-hero__cta .s-btn { gap: .5rem; min-height: 3rem; padding: 0 1.5rem; } .s-hero__cta .s-btn svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; } /* Na úzkém displeji jde portrét NAD obsah, ale zůstává na stejné levé hraně - sloupec se jen složí pod sebe, kompozice se nemění. */ @media (max-width: 34rem) { .s-hero { --s-hero-portret: 5.5rem; } .s-hero__lead { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; } /* Strop šířky platí jen pro DVOUSLOUPCOVOU hlavičku. Když se sloupce složí pod sebe, tlačítka mají jít přes celou šířku - s 13rem by uprostřed telefonu zůstal poloprázdný řádek. */ .s-hero__side { max-width: none; } .s-hero__side .s-hero__cta .s-btn { padding: 0 1.5rem; } /* Fakta do dvou sloupců. Čtyři pod sebou by z hlavičky udělaly seznam a tlačítka by spadla pod ohyb. */ .s-hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; } /* Tlačítka přes celou šířku - dvě různě široké pilulky vedle sebe dělají na 375 px roztřepený pravý okraj a palcem se míří hůř než myší. */ .s-hero__cta .s-btn { flex: 1 1 100%; } } /* ── Společná mřížka fotek a videí ──────────────────────────────────────────── Všechny dlaždice STEJNĚ VELKÉ. Dřív dostávala videa a fotky na šířku dvojnásobný zábor a `grid-auto-flow: dense` měl díry doplnit - jenže doplnit je může jen úzkou položkou, a když jsou skoro všechny široké, není čím. Naměřeno: v pěti sloupcích měly řádky 5, 4, 4 a 4 sloupce, takže mřížka končila zubatě a u pravého okraje zbývalo prázdno. Poměr stran místo pevné výšky řádku: dlaždice se tak zvětšuje s okem a mřížka drží stejné rozestupy na jakékoliv šířce. */ .s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .6rem; } .s-grid__item { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; background: none; /* Fotka je