/* produkce.css - JEDINÁ VÍCESTRÁNKOVÁ šablona osobního webu. Čtyři samostatné adresy (Úvod, Informace, Typy akcí, Kontakt - klíče nese `SiteTemplates::all()['produkce']['pages']`), každá s vlastním titulkem, popisem i kanonickou adresou. Které stránky se objeví v navigaci, rozhoduje `SiteRenderer::navPages()` podle toho, co má profil vyplněné - položka menu vedoucí na prázdnou stránku je viditelná vada, kdežto chybějící položka je korektní stav. PŮVOD SLOVNÍKU TŘÍD. Soubor vznikl z `vizitka.css` a je to záměr: obě šablony jedou na týchž sdílených partialech (`templates/site/_partials/`) a na týchž hácích `data-sc-*` ze `scena.js`, takže mají shodný slovník tříd. Vlastní je tu barevnost, rytmus a KULISA (`.pr-nav`, `.pr-pagehead`, `.pr-foot`), kterou jednostránkové šablony nepotřebují. Rozvržení a rozměry si drží `base.css`, tady je barevnost a rytmus. */ .site--produkce { --w: 62rem; /* Škála odstupů. Každý margin a gap v téhle šabloně vychází z ní, jinak se rozestupy uvnitř sekcí rozejdou s rozestupy mezi nimi. */ --p-s1: .35rem; --p-s2: .6rem; --p-s3: 1rem; --p-s4: 1.5rem; --p-s5: 2rem; /* Svislý vnitřek sekce: 64 px na širokém okně, 40 px na telefonu. */ /* JEDEN RYTMUS PRO CELOU STRÁNKU. Vlastník: „rozestupy dílčích sekcí musí být sjednocené, nesmí být v žádném rozlišení větší prázdná mezera." Naměřeno předtím (mezera mezi obsahem sousedních pruhů, okno 1400 px): hlavička -> dvousloupec 60 px dvousloupec -> fotopás 100 px fotopás -> hodnocení 60 px hodnocení -> patička 149 px (89 zdola + 60 shora) a na 814 px 60 / 60 / 0 / 1. Čtyři různá čísla na jedné stránce a jinak na každé šířce - z toho plyne i ta „velká prázdná mezera", kterou vlastník viděl pod hodnocením. Čísla nejsou vymyšlená: 60 px je rozestup předlohy na širokém okně a 36 px měl dosud telefon. `clamp` mezi ně jen plynule interpoluje, takže mezi 818 px (kde 4,4vw dosáhne 36 px) a 1364 px (kde dosáhne 60 px) roste rozestup s oknem a nikde neskočí. KDO PŘIDÁ NOVÝ PRUH, SÁHNE PO TÉHLE PROMĚNNÉ. Vlastní číslo v novém pravidle je přesně to, z čeho ten patchwork vznikl. */ --p-sec-y: clamp(2.25rem, 4.4vw, 3.75rem); /* Paleta z předlohy. Poměry jsou spočítané, ne odhadnuté: #006e90 na bílé 5,78:1, #0a5a75 na bílé 7,69:1, #2f7d32 na bílé 5,12:1, bílá na #006e90 5,78:1, #475569 na #e7f2fd 6,68:1. (První a poslední hodnota tu dřív byly 5,66 a 7,41 - přepočítáno podle WCAG 2.x. Obě pořád procházejí, jen to číslo nesedělo.) */ /* INKOUST PŘEDLOHY. `--p-text` je hodnota katalogu (#111827), `--p-ink` hodnota předlohy (#111) - soubor je používal oba, jen ten druhý natvrdo na třinácti místech. Tmavý režim musí přepsat OBA, jinak zůstane půlka textu černá na černé. */ --p-ink: #111; --p-text: #111827; --p-tlum: #475569; --p-plocha: #fff; --p-podklad: #f4f8fd; --p-line: #dbe6f2; /* ZÁKLADNÍ HODNOTA MOTIVU. Role z ní vycházejí, ale nepřepisují ji: kdyby motiv nastavoval rovnou `--p-akcent`, přepsal by ho v tmavém režimu i pro VÝPLŇ (`--p-akcent-fill` je na něj alias) a tyrkysový panel by se vybarvil světle modrou s bílým textem, tedy 2,04:1. Naměřeno, než tenhle token vznikl. */ --p-akcent-zaklad: #006e90; --p-akcent: var(--p-akcent-zaklad); --p-akcent-tmavy: #0a5a75; /* TÓNOVANÁ PLOCHA MÁ DVĚ HODNOTY A KAŽDÁ PATŘÍ JINÉMU BLOKU. Motiv smí nastavit jen tu SVĚTLOU (`-svetla`), tmavý režim jen tu tmavou - jinak si sáhnou na týž token a rozhodne POŘADÍ V SOUBORU, ne úmysl. Přesně tak vznikla vada, kterou nahlásil vlastník: motiv i tmavý režim nastavovaly `--p-akcent-plocha`, oba selektory mají specificitu (0,2,1) a motivy stály v souboru níž, takže v tmavém režimu zůstala plocha SVĚTLÁ a inkoust na ní tmavý režim přepnul na skoro bílý. Naměřeno v sekci hodnocení: #f2f4f7 na #fff1e7 = 1,00:1, tedy text neviditelný. Nešlo o jedno místo - týmž způsobem zmizel ceník („V ceně", příplatky, Doprava), pilulky žánrů i perex sekce, a to u VŠECH sedmi motivů. Dnes to nedrží pořadí, ale SPECIFICITA: odvození bydlí na `.site--produkce` (0,1,0), kdežto tmavý režim na `body…[data-pr-rezim]` (0,2,1), takže vyhrává vždycky a přeházení bloků na tom nic nezmění. */ --p-akcent-plocha-svetla: #e7f2fd; --p-akcent-obrys-svetly: #c5dcef; --p-akcent-plocha: var(--p-akcent-plocha-svetla); --p-akcent-obrys: var(--p-akcent-obrys-svetly); /* TÝŽ ROZCHOD ROLÍ, JEN O STUPEŇ TMAVŠÍ. `--p-akcent-tmavy` má v souboru DVĚ role: VÝPLŇ pod bílým textem (hover tlačítek) a TEXT na tónované ploše (popisky rekapitulace a součtu). Dokud to byl jeden token, ztmavení plochy v tmavém režimu ty popisky pohřbilo - naměřeno 1,09 až 2,07:1 podle motivu, tedy nečitelné u všech sedmi. Textová role má proto vlastní jméno a odvozuje se TADY, na (0,1,0); tmavý režim ji přepíše na (0,2,1) a vyhraje bez ohledu na pořadí bloků. Ve světlém režimu je to táž hodnota jako dosud (6,61 až 16,87:1), takže se nemění nic. */ --p-akcent-silny: var(--p-akcent-tmavy); /* DRUHÝ KONEC PŘELIVU MÁ JMÉNO PODLE ROLE, ne podle odstínu. Dřív se mu říkalo `--p-sedomodra` a byl napsaný natvrdo uvnitř `--p-grad`, takže přebarvit šablonu znamenalo sáhnout na tři místa. Barevný motiv dnes přepisuje TYHLE tokeny a nic jiného. */ --p-akcent-2: #434d51; /* AKCENT MÁ DVĚ ROLE A V TMAVÉM REŽIMU SE ROZCHÁZEJÍ. Jako VÝPLŇ nese bílý text (tlačítka, panel, aktivní den v kalendáři), takže musí zůstat tmavý; jako TEXT sedí na ploše, takže na tmavé ploše musí naopak zesvětlat. Ve světlém režimu jsou obě role tatáž hodnota, takže se nic nemění. */ --p-akcent-fill: var(--p-akcent-zaklad); --p-akcent-svetly: #4fc3e8; /* Zelená je v předloze barva HLAVNÍ VÝZVY („Poptat termín"), ne akcentu. #4caf50 má na bílé jen 2,78:1, takže se na text ani obrys použít nedá; na výplň tlačítka s bílým textem je to 2,4:1, tedy taky pod prahem. Tmavší odstín drží obojí. */ --p-cta: #2f7d32; /* Firemní gradient předlohy. JEDINÉ místo, kde se skládá, a skládá se z tokenů - s natvrdo psanými hodnotami by po přepnutí motivu zůstal tyrkysový, zatímco zbytek šablony by se přebarvil. */ --p-grad: linear-gradient(100deg, var(--p-akcent-fill), var(--p-akcent-2)); /* Výška lepivé navigace. Odsazení kotev i vnitřek hlavičky z ní vychází, aby se nerozešly. */ --p-navh: 4.25rem; background: var(--p-podklad); color: var(--p-text); } /* ── Sekce ──────────────────────────────────────────────────────────────────── Vlasová linka mezi sekcemi místo střídání odstínů - Vizitka je jednostránka a dvě různé plochy by z ní udělaly patchwork. */ .site--produkce .s-sec { padding-block: var(--p-sec-y); border-top: 1px solid var(--p-line); } /* Hlavička tu není fixed jako v ostatních šablonách; stačí, aby kotva nedosedla na samou hranu okna. */ .site--produkce .s-sec[id] { scroll-margin-top: var(--p-s3); } /* Nadpis a perex si vlastní odstup nenesou - drží ho blok rytmu na konci souboru, aby byl rytmus sekce na jednom místě a v jednom směru. PEREX SE NETLUMÍ PRŮHLEDNOSTÍ. `base.css` mu dává `opacity: .75` a 0,95rem, tedy 15,2px text v odstínu, který se na každém podkladu složí jinak. Na stránce Informace stojí hned pod ceníkem (sekce Volné termíny), takže by vedle sjednocené sazby trčel stejně jako popisky Doprava a Záloha. Do `base.css` se sáhnout nesmí - je v otisku kódu všech čtyř šablon. */ .site--produkce .s-sec__title { margin: 0; } .site--produkce .s-sec__lead { margin: 0; opacity: 1; font-size: 1.125rem; color: var(--p-tlum-ink); } .site--produkce .s-date__price { opacity: 1; font-size: 1rem; color: var(--p-tlum-ink); } /* ── Tlačítka ───────────────────────────────────────────────────────────────── `.s-btn` v base.css nemá vlastní barvu textu ani výplň - bere je dědičností. V hero sekci je text bílý, takže bílé tlačítko z dřívějšího pravidla mělo bílé písmo na bílé ploše: naměřený kontrast 1:1, tedy nebylo vidět vůbec. A protože `.site--produkce .s-btn` je dvojice tříd proti jedné, přebíjelo i výplň hlavní výzvy - z „Nezávazně poptat termín" zbyl prázdný obrys. Barvy se proto určují tady a pro každou variantu zvlášť. */ .site--produkce .s-btn { background: var(--p-plocha); border-color: var(--p-akcent-obrys); color: var(--p-text); /* 16,1:1 na bílé */ } .site--produkce .s-btn:hover { border-color: var(--p-akcent); color: var(--p-akcent); } .site--produkce .s-btn--primary { background: var(--p-akcent-fill); border-color: var(--p-akcent); color: #fff; /* 8,6:1 na akcentu */ } .site--produkce .s-btn--primary:hover { background: var(--p-akcent-tmavy); border-color: var(--p-akcent-tmavy); color: #fff; } .site--produkce .s-btn:focus-visible { outline: 2px solid var(--p-akcent); outline-offset: 2px; } /* ── Karty a štítky ────────────────────────────────────────────────────────── */ .site--produkce .s-tag { background: var(--p-akcent-plocha); color: var(--p-akcent); } /* `.s-price__item` z výčtu odešel spolu se sdíleným partialem výš. */ .site--produkce .s-usp__item { background: var(--p-plocha); border: 1px solid var(--p-line); box-shadow: 0 1px 3px rgba(2, 6, 23, .08); } .site--produkce .s-date { border-color: var(--p-akcent-obrys); color: var(--p-akcent); background: var(--p-plocha); } .site--produkce .s-date--pref { background: var(--p-akcent-plocha); } /* Pilulky sítí měly obrys `currentColor`, tedy skoro černý - vypadaly těžší než skutečná tlačítka na stránce. */ .site--produkce .s-social a { border-color: var(--p-akcent-obrys); color: var(--p-akcent); } .site--produkce .s-social a:hover { border-color: var(--p-akcent); background: var(--p-akcent-plocha); } /* ── Patička ────────────────────────────────────────────────────────────────── `max-width` se u sekce počítá z boxu VČETNĚ odsazení (obsah 952 px), kdežto u patičky z boxu uvnitř odsazení (992 px). Bez přepočtu proto text patičky začínal o 20 px vlevo od textu všech sekcí nad ním a byl o 40 px širší - levá hrana stránky se na posledních třech řádcích ulomila. */ .site--produkce .site-foot { padding-block: var(--p-sec-y); background: var(--p-plocha); border-top: 1px solid var(--p-line); } .site--produkce .site-foot__inner { max-width: calc(var(--w) - var(--pad) * 2); gap: var(--p-s1); } /* `a { color: inherit }` z base.css nechá odkaz vypadat jako obyčejný text - v patičce tlumené na 65 % ho od okolí neodliší vůbec nic. */ .site--produkce .site-foot__by a { color: var(--p-akcent); text-decoration: underline; } @media (min-width: 48rem) { .site--produkce .s-contact { grid-template-columns: 1.2fr 1fr; align-items: start; } /* Poznámka o DPH patří pod fakturační údaje v pravém sloupci. Automatické umístění ji dávalo do levého pod tlačítko, tedy k úplně jiné informaci, a v pravém sloupci nechávalo prázdnou buňku. */ .site--produkce .s-contact__vat { grid-column: 2; } .site--produkce .s-social { grid-column: 1 / -1; } } /* ── Kalkulačka a poptávkový formulář ───────────────────────────────────────── Obsluhuje je `scena.js`, zapsaný v registru oběma šablonám. Značkování i názvy tříd se proto přebírají ze Scény DOSLOVA - skript si na ně sahá bez kontroly na null a `.sc-calc__field--date` dokonce testuje přes `closest`. Vlastní pojmenování je tím vyloučené; tady se řeší jen vzhled. ČTYŘI VĚCI TU NEJSOU KOSMETIKA, ALE FUNKCE: 1. `[hidden] { display: none }` u bloků, kterým autorské pravidlo nastavuje `display` - autorský původ přebíjí `[hidden]` z prohlížeče bez ohledu na specificitu, takže by ve formuláři trvale svítily prázdné bloky. 2. Skrytí `.sc-form__trap` - past na roboty. Bez něj je z ní plnohodnotné prázdné pole uprostřed formuláře. Selektor nese i `input`, protože pravidlo pro pole má vyšší specificitu. 3. `.sc-grad` - skript ji sází na součtovou částku. Bez definice by třída nedělala nic, s převzatou definicí ze Scény by částka byla průhledná. 4. `position: relative` na `.sc-calc__field--date` - kotva pro kalendář. */ .site--produkce .sc-calc { display: grid; gap: var(--p-s2); margin: var(--p-s3) 0 0; padding: var(--p-s3); background: var(--p-plocha); border: 1px solid var(--p-line); border-radius: 16px; box-shadow: 0 1px 3px rgba(2, 6, 23, .08); color: var(--p-text); text-align: left; } /* DVĚ ŘADY, ne tři. Se stopou 11 rem se na kartu vešla jen tři pole a „Délka" padala na vlastní řádek pod ně - kalkulačka pak měla řádky tři a hero o 60 px narostlo. Nad 40 rem se proto sázejí čtyři pevné stopy; níž se mřížka sbalí sama, tam už jsou dvě řady stejně nedosažitelné. */ .site--produkce .sc-calc__row { display: grid; gap: var(--p-s2) var(--p-s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); } @media (min-width: 40rem) { .site--produkce .sc-calc__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .site--produkce .sc-calc__field { display: grid; gap: var(--p-s1); min-width: 0; } .site--produkce .sc-calc__field--date { position: relative; } .site--produkce .sc-calc__datewrap { position: relative; display: block; } .site--produkce .sc-calc__label, .site--produkce .sc-form__label, .site--produkce .sc-form__recaptitle, .site--produkce .sc-form__totallabel { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--p-tlum); } .site--produkce .sc-calc input, .site--produkce .sc-calc select, .site--produkce .sc-form input, .site--produkce .sc-form select, .site--produkce .sc-form textarea { width: 100%; min-width: 0; min-height: 2.9rem; padding: .55rem .8rem; border: 1px solid #7e8ea3; border-radius: 10px; background: var(--p-podklad); color: var(--p-text); font: inherit; font-size: .95rem; } .site--produkce .sc-form textarea { min-height: 6rem; resize: vertical; } .site--produkce .sc-calc input:focus, .site--produkce .sc-calc select:focus, .site--produkce .sc-form input:focus, .site--produkce .sc-form select:focus, .site--produkce .sc-form textarea:focus { background: var(--p-plocha); border-color: var(--p-akcent); outline: 0; box-shadow: 0 0 0 3px rgba(38, 62, 214, .14); } .site--produkce .sc-calc__datebtn { cursor: pointer; padding-right: 2.4rem; } .site--produkce .sc-calc__dateico { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--p-akcent); pointer-events: none; } .site--produkce .sc-calc__btn { grid-column: 1 / -1; min-height: 2.9rem; border: 0; border-radius: 999px; background: var(--p-akcent-fill); color: #fff; font: inherit; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; } .site--produkce .sc-calc__btn:hover:not(:disabled) { background: var(--p-akcent-tmavy); } .site--produkce .sc-calc__btn:disabled { opacity: .7; cursor: progress; } /* Kalendář. Třídy buněk vytváří skript, Vizitka je jen obarvuje. */ .site--produkce .sc-pop { position: absolute; z-index: 30; top: calc(100% + .4rem); left: 0; width: min(20rem, 84vw); max-width: calc(100vw - var(--pad) * 2); padding: var(--p-s3); background: var(--p-plocha); border: 1px solid var(--p-line); border-radius: 14px; box-shadow: 0 18px 40px rgba(2, 6, 23, .22); } .site--produkce .sc-pop[hidden] { display: none; } .site--produkce .sc-pop__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--p-s2); } .site--produkce .sc-pop__month { font-weight: 700; text-transform: capitalize; } .site--produkce .sc-pop__arr { width: 2rem; height: 2rem; border: 1px solid var(--p-line); border-radius: 9px; background: var(--p-plocha); color: var(--p-text); font: inherit; cursor: pointer; } .site--produkce .sc-pop__arr:hover { border-color: var(--p-akcent); color: var(--p-akcent); } .site--produkce .sc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; } .site--produkce .sc-cal__wd { padding: .25rem 0; font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--p-tlum); } .site--produkce .sc-cal__day { display: grid; place-items: center; aspect-ratio: 1; border: 0; border-radius: 9px; background: none; color: var(--p-text); font: inherit; font-size: .85rem; cursor: pointer; } .site--produkce .sc-cal__day:hover { background: var(--p-akcent-plocha); } .site--produkce .sc-cal__day--busy { background: #fee2e2; color: #7f1d1d; } .site--produkce .sc-cal__day--tentative { background: #fef3c7; color: #78350f; } .site--produkce span.sc-cal__day--past { color: #94a3b8; cursor: default; } .site--produkce .sc-cal__day.is-active { background: var(--p-akcent-fill); color: #fff; font-weight: 700; } .site--produkce .sc-pop__legend { display: flex; flex-wrap: wrap; gap: var(--p-s2); justify-content: center; margin: var(--p-s2) 0 0; font-size: .72rem; color: var(--p-tlum); } .site--produkce .sc-pop__key { display: inline-flex; align-items: center; gap: .3rem; } .site--produkce .sc-pop__key::before { content: ''; width: .55rem; height: .55rem; border-radius: 3px; } .site--produkce .sc-pop__key--free::before { background: var(--p-plocha); border: 1px solid var(--p-line); } .site--produkce .sc-pop__key--tentative::before { background: #fef3c7; } .site--produkce .sc-pop__key--busy::before { background: #fee2e2; } /* Výsledek výpočtu. Řádky staví skript. */ .site--produkce .sc-calc__out { display: block; padding-top: var(--p-s3); border-top: 1px dashed var(--p-line); } .site--produkce .sc-calc__out[hidden] { display: none; } .site--produkce .sc-calc__state { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: var(--p-s2); padding: .25rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700; text-transform: uppercase; } .site--produkce .sc-calc__state::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; } .site--produkce .sc-calc__state.is-free { background: #dcfce7; color: #14532d; } .site--produkce .sc-calc__state.is-busy { background: #fee2e2; color: #7f1d1d; } .site--produkce .sc-calc__state.is-tentative { background: #fef3c7; color: #78350f; } .site--produkce .sc-calc__state.is-unknown { background: #e2e8f0; color: #334155; } .site--produkce .sc-calc__lines { display: grid; gap: var(--p-s2); } .site--produkce .sc-calc__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--p-s3); font-size: .92rem; color: var(--p-tlum); } .site--produkce .sc-calc__line strong { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--p-text); } .site--produkce .sc-calc__line.is-total { margin-top: var(--p-s2); padding: .7rem .85rem; background: var(--p-podklad); border-radius: 12px; font-weight: 700; color: var(--p-text); } /* Popisek nahoru, hodnota dolů. Součet je jednou částka („14 000 Kč"), jindy slovo („na dotaz") - a při 1,35 rem proti popisku 0,92 rem to slovo řvalo, přestože nenese žádné číslo. Rozdíl 1,15 proti 1 rem stačí na to, aby částka byla pořád tou hlavní informací řádku, a slovní hodnota už nepřebíjí. */ .site--produkce .sc-calc__line.is-total { font-size: 1rem; } .site--produkce .sc-calc__line.is-total strong { font-size: 1rem; } .site--produkce .sc-grad { background: none; color: var(--p-akcent); } .site--produkce .sc-calc__note { margin: var(--p-s2) 0 0; font-size: .8rem; color: var(--p-tlum); line-height: 1.5; } /* Odkaz na poptávku je po výpočtu DALŠÍ KROK, ne poznámka - dostane proto tvar tlačítka. Obrysové, ne plné: plná modrá plocha by si přímo pod modrým „Spočítat cenu" konkurovala a nebylo by poznat, které z nich je to čerstvé. Šipka je pseudoprvek, aby ve značkování nepřibývala ikona - to značkování vytváří scena.js a nesmí se rozejít se Scénou. */ .site--produkce .sc-calc__next { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; min-height: 2.9rem; margin-top: var(--p-s3); padding: 0 var(--p-s4); border: 1px solid var(--p-akcent); border-radius: 999px; background: var(--p-plocha); color: var(--p-akcent); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; transition: background .15s, color .15s; } .site--produkce .sc-calc__next::after { content: '\2192'; font-size: 1.1em; line-height: 1; } .site--produkce .sc-calc__next:hover { background: var(--p-akcent-fill); color: #fff; text-decoration: none; } .site--produkce .sc-calc__next:focus-visible { outline: 2px solid var(--p-akcent); outline-offset: 2px; } /* Poptávkový formulář */ .site--produkce .sc-form { padding: var(--p-s4); background: var(--p-plocha); border: 1px solid var(--p-line); border-radius: 16px; box-shadow: 0 1px 3px rgba(2, 6, 23, .08); } .site--produkce .sc-form__h { margin: 0 0 var(--p-s3); font-size: 1.25rem; } /* Rekapitulace je ODPOVĚĎ kalkulačky, ne další pole - má proto akcentní plochu, ne šedou. Šedá ji stavěla na roveň podkladu formuláře a splývala s ním. */ .site--produkce .sc-form__recap { margin-bottom: var(--p-s4); padding: var(--p-s3) var(--p-s4); background: var(--p-akcent-plocha); border: 1px solid var(--p-akcent-obrys); border-radius: 14px; } .site--produkce .sc-form__recap[hidden] { display: none; } .site--produkce .sc-form__recaphead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--p-s3); margin-bottom: var(--p-s2); } .site--produkce .sc-form__recaptitle { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--p-akcent-silny); } .site--produkce .sc-form__change { font-size: .875rem; color: var(--p-akcent-silny); } .site--produkce .sc-form__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--p-s1) var(--p-s3); margin: 0; font-size: .9375rem; } /* Popisek a hodnota se rozlišují VAHOU, ne velikostí ani odstínem - táž úvaha jako u dvojice „Doprava / 10 Kč za km" v ceníku o kus výš. */ .site--produkce .sc-form__facts dt { color: var(--p-tlum-ink); } .site--produkce .sc-form__facts dd { margin: 0; min-width: 0; font-weight: 600; overflow-wrap: anywhere; } /* DVA SLOUPCE, NE `auto-fit`. Pružný počet stop dal na okně 1400 px ČTYŘI sloupce po 198 px, takže „Jméno" a „E-mail" stály vedle sebe s dvěma prázdnými buňkami a telefon si musel vynutit celý řádek zvlášť. Dva pevné sloupce drží formulář čitelný na každé šířce a řádky se páruje po smyslu (jméno + e-mail, začátek + rozpočet). */ .site--produkce .sc-form__grid { display: grid; gap: var(--p-s3) var(--p-s4); /* ZAROVNÁNÍ NAHORU JE OPRAVA, ne úhlednost. Výchozí `stretch` natáhne položku na výšku nejvyšší buňky řádku a `.sc-form__field` je sám mřížka, takže se protáhlo i pole uvnitř: vedle „Rozpočtu" s dvouřádkovou nápovědou měřilo pole „Místo konání" 85 px proti 46 px u všech ostatních (naměřeno). Vypadalo to jako textarea, ne jako řádek. */ align-items: start; margin-bottom: var(--p-s4); } @media (min-width: 40rem) { .site--produkce .sc-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .site--produkce .sc-form__field { display: grid; gap: .3rem; min-width: 0; } .site--produkce .sc-form__field--wide { grid-column: 1 / -1; } /* NADPIS SKUPINY POLÍ. Formulář byl jeden nedělený sloupec deseti polí; po odebrání duplicit zbyly dvě skupiny, které odpovídají na jiné otázky („co za akci" proti „kdo jste"), a bez pojmenování to z nich není poznat. Vlásková linka za textem je jediná dekorace v celém formuláři - dělí, aniž by přidávala další plochu nebo rámeček. */ .site--produkce .pr-form__legend { display: flex; align-items: center; gap: var(--p-s3); margin: 0 0 var(--p-s3); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--p-akcent); } .site--produkce .pr-form__legend::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--p-line); } /* Druhá a další skupina potřebuje nad sebou vzduch - první stojí hned pod kalkulačkou, kde ho má z jejího odstupu. */ .site--produkce .sc-form__grid + .pr-form__legend, .site--produkce .sc-form__total + .pr-form__legend, .site--produkce .sc-form__extras + .pr-form__legend { margin-top: var(--p-s5); } .site--produkce .sc-form__extras { display: grid; gap: var(--p-s2); margin-bottom: var(--p-s3); } .site--produkce .sc-form__extras[hidden] { display: none; } .site--produkce .sc-form__extraslist { display: grid; gap: var(--p-s2); } .site--produkce .sc-extra { display: flex; align-items: center; gap: var(--p-s2); padding: var(--p-s2) var(--p-s3); border: 1px solid var(--p-line); border-radius: 10px; font-size: .92rem; cursor: pointer; } .site--produkce .sc-extra:hover { border-color: var(--p-akcent); } /* VIDITELNÝ FOKUS. Pole měla jen výchozí obrys prohlížeče, který se na modrém podkladu ztrácí; u formuláře, který se vyplňuje tabulátorem, je to jediná zpětná vazba, kde člověk je. */ .site--produkce .sc-form input:focus-visible, .site--produkce .sc-form select:focus-visible, .site--produkce .sc-form textarea:focus-visible, .site--produkce .sc-calc input:focus-visible, .site--produkce .sc-calc select:focus-visible { outline: 2px solid var(--p-akcent); outline-offset: 2px; border-color: var(--p-akcent); } .site--produkce .sc-extra input { flex: none; width: auto; min-height: 0; padding: 0; accent-color: var(--p-akcent); } .site--produkce .sc-extra__name { flex: 1 1 auto; min-width: 0; display: grid; gap: .1rem; overflow-wrap: break-word; } .site--produkce .sc-extra__desc { font-size: .875rem; color: var(--p-tlum-ink); line-height: 1.5; } .site--produkce .sc-extra__price { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Orientační cena je VÝSLEDEK, ne poznámka - dostane proto akcentní plochu a částku o dva stupně nad okolím. Šedá plocha ji stavěla na roveň rekapitulace nad ní. */ .site--produkce .sc-form__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--p-s1) var(--p-s3); margin-bottom: var(--p-s4); padding: var(--p-s3) var(--p-s4); background: var(--p-akcent-plocha); border: 1px solid var(--p-akcent-obrys); border-radius: 14px; } .site--produkce .sc-form__total[hidden] { display: none; } .site--produkce .sc-form__totallabel { flex: 1 1 auto; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--p-akcent-silny); } .site--produkce .sc-form__totalval { font-size: 1.75rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .site--produkce .sc-form__totalnote { flex: 1 0 100%; font-size: .875rem; color: var(--p-tlum-ink); } .site--produkce .sc-form__totalnote[hidden] { display: none; } .site--produkce .sc-form__btn { width: 100%; min-height: 3rem; border: 0; border-radius: 999px; background: var(--p-akcent-fill); color: #fff; font: inherit; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; } .site--produkce .sc-form__btn:hover:not(:disabled) { background: var(--p-akcent-tmavy); } .site--produkce .sc-form__btn:disabled { opacity: .7; cursor: progress; } /* DROBNÝ TEXT FORMULÁŘE MÁ JEDNU VELIKOST A JEDEN ODSTÍN. Bylo jich pět: nápověda 16 px, poznámka pod tlačítkem 12,8, popis příplatku 12,5, poznámka u ceny 12,5 a fakta rekapitulace 14,4 - a ke třem z nich ještě `--p-tlum` místo `--p-tlum-ink`, tedy jiná šeď než ve zbytku šablony. Je to táž vada, kterou vlastník vytkl v ceníku, jen o obrazovku vedle. */ .site--produkce .sc-form__note { margin: var(--p-s4) 0 0; font-size: .875rem; line-height: 1.6; color: var(--p-tlum-ink); text-align: center; } .site--produkce .sc-form__hint { font-size: .875rem; } .site--produkce .sc-calc__note { font-size: .875rem; color: var(--p-tlum-ink); } .site--produkce .sc-form__msg { margin: var(--p-s3) 0 0; padding: .7rem .85rem; border-radius: 10px; font-weight: 500; } .site--produkce .sc-form__msg.is-ok { background: #dcfce7; color: #14532d; } .site--produkce .sc-form__msg.is-err { background: #fee2e2; color: #7f1d1d; } .site--produkce .sc-form__msg[hidden] { display: none; } .site--produkce .sc-form input.sc-form__trap { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Telefon s předvolbou. Táž past jako u Scény: obal `.phone-field` z `View::phoneField()` má sazbu jen v `assets/css/app.css`, který se na osobní web nenačítá. Bez tohohle bloku stojí předvolba a číslo pod sebou. Selektory nesou element (`select`, `input`) schválně. Pravidlo pro pole výš je `.site--produkce .sc-form select`, tedy (0,2,1); holá třída `.site--produkce .phone-field__cc` má jen (0,2,0) a prohraje bez ohledu na pořadí řádků. Blok tady proto stál a nedělal nic: předvolba dostala `width: 100 %`, `flex: 0 0 auto` jí nedovolilo se zmenšit a na číslo zbylo 27,4 px, které navíc PŘETÉKALO 37 px za pravou hranu obalu. Vypadá to jako ořízlé pole, ne jako chybějící styl, takže se to hlásí hůř než původní vada. S elementem je selektor (0,3,1) a vyhraje. `width: auto` u čísla je nutné z téhož důvodu: bez něj mu `width: 100 %` z pravidla výš dá základní šířku celého obalu a `flex-basis: auto` z ní počítá, takže číslo znovu přeteče. `min-width: 0` na OBALU je nutné právě kvůli tomu `width: auto`. Obal je položka mřížky `.sc-form__field` a ta má `min-width: auto`, tedy minimum = min-content. Dokud mělo číslo šířku v procentech, byla min-content obalu jen předvolba (procenta se do vnitřní velikosti nepočítají); s `width: auto` se přičte i vlastní šířka pole a obal přeteče z buňky ven. Přesun přetečení z pole na obal se špatně hledá - kontrola „číslo se vejde do obalu" projde, protože obal přetekl s ním. */ .site--produkce .phone-field { display: flex; gap: var(--p-s2); align-items: stretch; min-width: 0; } .site--produkce .phone-field > select.phone-field__cc { flex: 0 0 auto; width: 10.5rem; } .site--produkce .phone-field > input.phone-field__num { flex: 1 1 auto; width: auto; min-width: 0; } @media (max-width: 480px) { .site--produkce .phone-field > select.phone-field__cc { width: 7.5rem; } } /* Telefon zabírá celý řádek mřížky. Není to kosmetika: formulář Vizitky sedí v užším ze dvou sloupců kontaktu, takže poloviční buňka měří 213 px i na širokém okně. Předvolba z ní bere 168 a na číslo zbylo 35,6 px - do pole se nevešlo ani „777 123 456". Samotné srovnání specificity výš tedy přetečení odstranilo, ale použitelné pole z toho nevzniklo. TOTÉŽ PRAVIDLO MÁ I SCÉNA. Tvrzení „Scéna to nepotřebuje" tu stálo a bylo nepravdivé: nad 900 px se i její kontakt přepne na dva sloupce a číslo přeteče znovu. Ověřeno měřením v pásmu 901-1200 px, do kterého se obvyklé měřené šířky netrefí. Roztažení nic nepřesouvá: telefon je třetí ze čtyř polí té mřížky (formulář jich má celkem deset ve dvou mřížkách), takže na svém řádku stál sám tak jako tak a pravá polovina zůstávala prázdná. Vazba přes `:has()`, ne přes třídu `--wide` v šabloně - `templates/site/` patří jiné větvi a zásah do něj by zvedl otisk všech šablon. */ .site--produkce .sc-form__grid > .sc-form__field:has(.phone-field) { grid-column: 1 / -1; } /* Kontakt ve dvou sloupcích: údaje vlevo, formulář vpravo. */ .site--produkce .sc-contact { display: grid; gap: var(--p-s5); align-items: start; } @media (min-width: 52rem) { .site--produkce .sc-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } } /* ── Kontaktní údaje ────────────────────────────────────────────────────────── Tenhle blok chyběl a bylo to vidět na první pohled: značkování kontaktu se přebíralo ze Scény, ale třídy `.sc-info*` tu neměly jediné pravidlo. Vložené SVG bez rozměru se roztáhne na velikost rodiče, takže ikonka u jména a e-mailu měřila přes 300 px a vytlačila text pod sebe. Ponaučení pro příště: převzít značkování znamená převzít VŠECHNY jeho třídy, ne jen ty, které nesou funkci. */ .site--produkce .sc-contact__info { min-width: 0; } .site--produkce .sc-info { display: grid; gap: var(--p-s4); margin: 0; padding: 0; list-style: none; } .site--produkce .sc-info__item { display: flex; align-items: flex-start; gap: var(--p-s3); } /* `flex: 0 0 auto` je nutné - destička je flexová položka a vedle dlouhé adresy by se smrskla na proužek. */ .site--produkce .sc-info__ico { display: inline-grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: var(--p-akcent-plocha); color: var(--p-akcent); } .site--produkce .sc-info__ico svg { width: 19px; height: 19px; } .site--produkce .sc-info__body { display: grid; gap: .1rem; min-width: 0; } .site--produkce .sc-info__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--p-tlum); } .site--produkce .sc-info__val { color: var(--p-text); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; } .site--produkce a.sc-info__val:hover { color: var(--p-akcent); text-decoration: underline; } /* Poznámka k DPH pod fakturačními údaji - podmínka k cenám v ceníku, ne další kontaktní řádek. */ .site--produkce .sc-info__note { margin: var(--p-s3) 0 0; font-size: .875rem; color: var(--p-tlum); } .site--produkce .sc-soc { display: flex; flex-wrap: wrap; gap: var(--p-s2); margin: var(--p-s4) 0 0; padding: 0; list-style: none; } .site--produkce .sc-soc a { display: inline-block; padding: var(--p-s1) var(--p-s3); border: 1px solid var(--p-akcent-obrys); border-radius: 999px; color: var(--p-akcent); text-decoration: none; font-size: .875rem; } .site--produkce .sc-soc a:hover { border-color: var(--p-akcent); background: var(--p-akcent-plocha); } /* ── Svislý rytmus ──────────────────────────────────────────────────────────── MUSÍ ZŮSTAT POSLEDNÍ. Odstupy jdou jen shora a jen na přímých dětech sekce; pravidlo se stejnou specificitou výš by je přebilo. Dřív si každý blok nesl vlastní margin (0,35 až 1,5 rem podle toho, kdo ho psal), takže mezi nadpisem a obsahem byla v každé sekci jiná mezera. */ .site--produkce .s-sec > * + * { margin-block-start: var(--p-s5); } /* Bloky si spodní odstup nenesou - jinak by poslední z nich přidal k odsazení sekce a mezera pod obsahem by byla jiná než nad ním. */ .site--produkce .s-sec > * { margin-block-end: 0; } /* Perex patří k nadpisu, ne k obsahu pod ním. */ .site--produkce .s-sec__title + .s-sec__lead { margin-block-start: var(--p-s2); } /* Skupiny štítků v sekci „Co hraju" jsou si rovnocenné - stejný krok jako mezi nadpisem a obsahem by je od sebe utrhl. */ .site--produkce .s-sec > .s-tags + .s-tags { margin-block-start: var(--p-s4); } /* Perex v kontaktu leží uvnitř `.s-contact__main`, takže NENÍ přímé dítě sekce a blok rytmu výš na něj nedosáhne. S `.s-sec__lead { margin: 0 }` mu zbyl nulový odstup a věta „Odpovím obvykle do 24 hodin." se lepila na tlačítko. */ .site--produkce .s-contact__main > * + * { margin-block-start: var(--p-s3); } /* CENÍK SI PRODUKCE KRESLÍ SAMA (`templates/site/produkce/pricing.php`), takže pravidla pro třídy sdíleného partialu (`.s-price__facts`, `.s-price__fact`, `.s-price__incl`) tady od té doby nemají na co sednout a jsou pryč. Právě `.s-price__incl li { justify-content: space-between }` byla vada, kterou vlastník nahlásil: seznam je přímé dítě sekce, tedy 1 320 px široký, a cena příplatku skončila 1 241 px od názvu. Vzhled ceníku je dnes v bloku „Informace: ceník a služby" na konci souboru. */ /* ══════════════════════════════════════════════════════════════════════════ KULISA VÍCESTRÁNKOVÉ ŠABLONY Navigace, hlavička podstránky a patička s kontaktem NEJSOU sekce. Kreslí je kostra (`templates/site/produkce.php`) mimo smyčku sekcí, a je to nosné pravidlo celé vrstvy: `dj_sites.sections_json` je plochý seznam, takže táž sekce na dvou stránkách by v něm neunesla „zapnuto na A, vypnuto na B", `SiteLayout::problem()` by ji odmítl kódem `duplicate` a `previewMap()` by u nejednoznačného selektoru TIŠE vypnula psaní v náhledu. ══════════════════════════════════════════════════════════════════════════ */ /* ── Navigace ─────────────────────────────────────────────────────────────── */ /* POZOR: DESET SELEKTORŮ `.pr-nav*` JE V SOUBORU DVAKRÁT a druhá sada je o 500 řádků níž (hledej „Naměřeno: 500 16px/16px"). Specificity jsou shodné, takže u KOLIDUJÍCÍ deklarace vyhrává vždycky ta pozdější - tahle sada se z barev neprosadí ani jednou. SMAZAT JI ALE NEJDE a je to změřené, ne opatrnost: přispívá deseti vlastnostmi, které druhá sada vůbec nenastavuje (`max-width`, `margin-inline` a `padding-inline` u `__inner`, `gap`, `font-weight` a `font-size` u `__brand`, `flex-wrap` u `__menu`, `letter-spacing` u `__cta`, `font-family` a `white-space` u `__brandtext`). Odstranění by tedy rozbilo rozvržení lišty. Barvy se proto opravují na OBOU místech zároveň - jinak se sem vada vrátí tou kopií, která zrovna nevyhrává. */ .site--produkce .pr-nav { position: sticky; top: 0; z-index: 20; background: var(--p-plocha); border-bottom: 1px solid var(--p-line); } .site--produkce .pr-nav__inner { max-width: var(--w); margin-inline: auto; min-height: var(--p-navh); padding-inline: var(--p-s4); display: flex; align-items: center; gap: var(--p-s4); /* Na úzkém okně se menu zalomí pod značku, nikdy nevyjede z obrazovky. */ flex-wrap: wrap; } .site--produkce .pr-nav__brand { display: inline-flex; align-items: center; gap: var(--p-s2); font-weight: 700; font-size: 1.05rem; color: var(--p-text); text-decoration: none; margin-right: auto; } .site--produkce .pr-nav__brand:hover { color: var(--p-akcent); } /* DVĚ MAXIMA A `auto` U OBOU ROZMĚRŮ, ne pevná výška se `width: auto`. `base.css` má `img { max-width: 100% }` a to procento se uvnitř pružného pruhu vyhodnocuje proti krabici, kterou určuje sám obrázek - vznikne kruh a prohlížeč ho rozsekne tak, že logo srazí. Klub na to doplatil (202x40 px se vykreslilo jako 41x35) a stálo to vydání nové verze. */ .site--produkce .pr-nav__logo { max-height: 2.25rem; max-width: 11rem; width: auto; height: auto; } .site--produkce .pr-nav__menu { display: flex; align-items: center; gap: var(--p-s1); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .site--produkce .pr-nav__link { display: inline-block; padding: .45rem .8rem; border-radius: 999px; font-size: .9rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--p-tlum); /* 7,58:1 na bílé */ text-decoration: none; } .site--produkce .pr-nav__link:hover { background: var(--p-akcent-plocha); color: var(--p-akcent-silny); } /* AKTUÁLNÍ STRÁNKA SE NEPOZNÁVÁ JEN BARVOU. Nese `aria-current="page"`, takže ji ohlásí i odečítač; barva je doplněk, ne jediný nosič informace. */ .site--produkce .pr-nav__link[aria-current="page"] { background: var(--p-akcent-fill); color: #fff; /* 5,02 až 15,13:1 podle motivu */ } .site--produkce .pr-nav__cta { display: inline-block; padding: .5rem 1.1rem; border-radius: 999px; background: var(--p-cta); color: #fff; /* 5,12:1 */ font-size: .9rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; } .site--produkce .pr-nav__cta:hover { background: var(--p-sedomodra); } /* ── Hlavička podstránky ──────────────────────────────────────────────────── */ /* Úvodní stránka má velké hero; podstránka jen pruh s nadpisem a drobečky. Bez něj by podstránka začínala rovnou obsahem a nešlo by poznat, kde je. */ .site--produkce .pr-pagehead { background: var(--p-grad); color: #fff; padding-block: clamp(2rem, 5vw, 3.25rem); } .site--produkce .pr-pagehead__inner { max-width: var(--w); margin-inline: auto; padding-inline: var(--p-s4); } .site--produkce .pr-pagehead__crumbs { margin: 0 0 var(--p-s2); font-size: .85rem; /* Bílá s 88% krytím dává na výplni motivu 4,27 až 12,01:1 (nejhůř zelená); drobečky jsou doplňková navigace, ne hlavní text, ale pod práh 4,5:1 se jít nesmí - a při 80 %, které tu byly napsané, by zelená vyšla na 3,81:1. Komentář popisoval jinou hodnotu, než jakou má kód. */ color: rgba(255, 255, 255, .88); } .site--produkce .pr-pagehead__crumbs a { color: inherit; } .site--produkce .pr-pagehead__title { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: -.01em; } .site--produkce .pr-pagehead__sub { margin: var(--p-s2) 0 0; max-width: 44rem; color: rgba(255, 255, 255, .92); } /* NADPIS PRVNÍ SEKCE NA PODSTRÁNCE SE VIZUÁLNĚ SKRÝVÁ. Převzala ho H1 v pruhu nad ním (viz `templates/site/produkce.php`), takže by tu stálo totéž slovo dvakrát pod sebou. NEMAŽE se ze značkování: ukazuje na něj `aria-labelledby` a bez přístupného názvu přestane být `
` landmarkem - to měří `test_seo.php` a odečítač by přišel o orientaci. Týž zápis jako u pasti na roboty v `sc-form__trap` níž. */ .site--produkce .pr-sub > .s-sec:first-child > .s-sec__title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* A protože nadpis zmizel, nesmí po něm zbýt mezera - rytmus sekce ho jinak drží přes `margin` na následujícím sourozenci. */ .site--produkce .pr-sub > .s-sec:first-child { padding-top: var(--p-s5); } /* ── Patička s kontaktem ──────────────────────────────────────────────────── */ /* Je na KAŽDÉ stránce, a proto je to kulisa, ne sekce `contact`. Ta má vlastní stránku s poptávkovým formulářem. VZHLED CELÝ BYDLÍ V BLOKU „VZHLED PODLE PŘEDLOHY" NÍŽ. Tady po ní zůstávala sada pravidel z doby, kdy byla patička odvozená z Vizitky (světle modrý pruh se jménem vlevo) - všechna je přebíjela pozdější definice a `.pr-foot__name` už ve značkování ani není. Mrtvé pravidlo je horší než žádné: při příští úpravě se opraví to, které se nikde neprojeví. */ /* ══════════════════════════════════════════════════════════════════════════ VZHLED PODLE PŘEDLOHY VŠECHNY HODNOTY JSOU ZMĚŘENÉ, NE ODHADNUTÉ. Předloha se otevřela v prohlížeči na okně 1440 px (obsah 1425 px) a čísla se vytáhla přes `getComputedStyle`. Kde je v komentáři konkrétní hodnota, je to naměřený stav předlohy. Pravidla stojí ZA blokem odvozeným z Vizitky a se stejnou specificitou ho přebíjejí, takže pořadí je závazné a nesmí se přeházet. ══════════════════════════════════════════════════════════════════════════ */ /* PSANÉ PÍSMO ZNAČKY. Beau Rivage (SIL OFL 1.1), podmnožina latin + latin-ext, 235 952 B TTF -> 59 028 B woff2. Leží v `assets/site/fonts/` a do archivu ho `SiteExporter::assetFiles()` přibalí JEN u téhle šablony - hledá `url(fonts/…)` ve stylu té šablony, takže se do ZIPu Vizitky ani Klubu nedostane. */ @font-face { font-family: "Beau Rivage"; src: url(fonts/beaurivage-latin.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* SELEKTOR JE `body.site--produkce`, ne holá třída, a je to nutné: `base.css` sází základ na `body.site` (specificita 0,1,1), takže holá třída (0,1,0) na `font-family`, `font-size` ani `color` nedosáhne. Poznalo se to až měřením - šablona se celou dobu kreslila systémovým písmem, přestože si o Roboto říkala. */ body.site--produkce { /* NÁZVY Z PŘEDLOHY JSOU DNES ALIASY, ne druhé hodnoty. Soubor měl tutéž barvu pod dvěma jmény (`--p-akcent` 31x, `--p-modra` 15x) a druhý přeliv se skládal znovu - přebarvení šablony by se tím rozpadlo na polovic. Jména zůstávají, protože je používá 15 pravidel a přejmenovat je by byl zásah bez užitku; hodnota je ale jedna. */ --p-modra: var(--p-akcent); /* u-custom-color-5 */ /* TLUMENÝ TEXT JE PLNÁ BARVA, NE PRŮHLEDNÁ ČERNÁ. `rgba(17,17,17,.7)` se na bílé kartě složí na #585858 a na světle modré (#e7f2fd) na #515558 - jedna role, dvě barvy, a rozdíl se v kódu nepozná. #454545 je navíc hodnota, kterou už soubor má (linka pod cenou sazby), takže se paleta nerozšiřuje. Kontrast: 9,59:1 na bílé, 8,45:1 na kartě. */ --p-tlum-ink: #454545; --p-sedomodra: var(--p-akcent-2); /* u-custom-color-4 */ --p-svetle: var(--p-akcent-plocha); /* u-palette-1-light-3 */ --p-navh: 95px; /* naměřená výška hlavičky */ /* ZÁKLAD SAZBY JE PŘEDLOHY, ne katalogu. `base.css` má 17px/1.6 a barvu #111827, předloha 16px/25.6px a #111111 - rozdíl jednoho pixelu se propíše do KAŽDÉHO textu, který nemá vlastní velikost, a s ním do všech zalomení řádků. Naměřeno na `body` předlohy. */ font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; color: var(--p-ink); /* Nativní prvky (posuvníky, zaškrtávátka, výchozí barva ``) se řídí tímhle, ne našimi tokeny. Tmavý režim ho přepíná na `dark`. */ color-scheme: light; } /* ══ TMAVÝ REŽIM ═════════════════════════════════════════════════════════════ Druhá produktová vlastnost prémiové šablony. Přepisuje POUZE tokeny plochy, inkoustu a linky - rozvržení, rytmus ani sazba se nemění, takže se tmavá podoba nemůže rozejít se světlou. POZOR NA ROZDÍL PROTI KATALOGU. `CLAUDE.md` má napsané „žádné tmavé téma" - to je pravidlo pro ROZHRANÍ KATALOGU, ne pro prodávanou šablonu. Tohle je web DJe, jeho vizitka, a tmavá varianta je vlastnost, kterou si kupuje. AKCENT SE ROZDĚLÍ NA DVĚ ROLE. Výplň zůstává tmavá (nese bílý text), text na ploše se přepne na světlou variantu motivu - `#006e90` má na tmavé kartě 3,08:1, tedy pod prahem 4,5:1, kdežto `#4fc3e8` má 8,74:1. Bez toho rozdělení by tmavý režim znamenal nečitelné odkazy a nadpisy. NAMĚŘENO na kartě `#15181c` a stránce `#0e1114`: inkoust 16,16:1 a 17,19:1, tlumený text 11,55:1, světlý akcent 7,40 až 12,05 podle motivu (nejnižší je modrá), bílá na výplni akcentu 5,02 až 15,13 jako ve světlém režimu. ZELENÁ VÝZVA ZŮSTÁVÁ ZELENÁ. „Poptat termín" je v předloze barva akce, ne akcentu, a na tmavé ploše se neztratí - jen se zesvětlí. Odstín se ale volí podle BÍLÉHO TEXTU na něm, ne podle toho, jak vypadá na stránce; viz token níž. */ body.site--produkce[data-pr-rezim="tmavy"] { --p-plocha: #15181c; --p-podklad: #0e1114; --p-ink: #f2f4f7; --p-text: #f2f4f7; --p-tlum: #b6c0cc; --p-tlum-ink: #c9d1da; --p-line: #2a2f36; /* TÓNOVANÁ PLOCHA SE MÍCHÁ Z MOTIVU, ne pevná modrošedá. Pevná hodnota by znamenala, že tmavý web vypadá u všech sedmi motivů stejně - barva se přitom prodává jako vlastnost šablony. Namíchaná plocha si hue nechá a přitom ztmavne vždycky, protože druhá složka je plocha stránky. 20 % je změřený kompromis: inkoust `#f2f4f7` na ní drží 13,31 až 15,70:1 (nejhůř zelená) a světlý akcent 6,44 až 11,70:1 (nejhůř modrá). Při 25 % je barva sytější, ale inkoust klesá pod 12,6 a u tmavších motivů začíná plocha splývat s výplní akcentu. ZÁLOHU PRO PROHLÍŽEČ BEZ `color-mix()` NESE `@supports` O KUS NÍŽ, ne druhá deklarace nad touhle. Dvojice deklarací zachrání BĚŽNOU vlastnost, u custom property ne: ta bere skoro libovolný sled tokenů jako platný, takže by literál prohrál už při parsování a neplatnost by se projevila až při dosazení do `var()` - a tam padá celá hodnota na neplatnou, ne zpátky na literál. Změřeno v prohlížeči: plocha vyšla `rgba(0, 0, 0, 0)`, tedy PRŮHLEDNÁ, a `border: 1px solid var(…)` skončil na `border-width: 0`. */ --p-akcent-plocha: color-mix(in srgb, var(--p-akcent-zaklad) 20%, #15181c); /* Obrys se míchá ze SVĚTLÉ varianty motivu, ne ze základu: na tmavé ploše je vidět jedině to, co je světlejší než ona. Naměřeno 3,45 až 5,55:1 proti dnešním 1,54:1, tedy z linky, kterou nebylo vidět, je obrys nad prahem 3:1, který WCAG žádá pro ohraničení prvku. */ --p-akcent-obrys: color-mix(in srgb, var(--p-akcent-svetly) 60%, #2a2f36); /* Text v akcentu se přepne na světlou variantu motivu, výplň zůstává. */ --p-akcent: var(--p-akcent-svetly); /* TÝŽ ROZCHOD ROLÍ O STUPEŇ VÝŠ. `--p-akcent-tmavy` je VÝPLŇ pod bílým textem (hover tlačítek), takže musí zůstat tmavý; popisky rekapitulace a součtu ale sedí jako TEXT na tónované ploše, kterou tmavý režim ztmavil - naměřeno 1,09 až 2,07:1, tedy nečitelné u všech sedmi motivů. Textová role má proto vlastní token a tady se přepíná; se světlou variantou drží 6,44 až 11,70:1 (nejhůř modrá). */ --p-akcent-silny: var(--p-akcent-svetly); /* NATIVNÍ PRVKY MUSÍ VĚDĚT, ŽE JE TMA. Bez `color-scheme` kreslí prohlížeč posuvníky, zaškrtávátka i výchozí barvu `` ve světlé podobě - modál dostal `CanvasText`, tedy ČERNÝ nadpis na tmavé kartě (1,18:1). */ color-scheme: dark; /* ZELENÁ VÝZVA. Dosavadní `#3f9e43` mělo s bílým textem 3,40:1, tedy POD prahem - komentář u bloku přitom tvrdil opak („zesvětlí, aby na ní bílý text držel práh"). `#35853a` má 4,60:1 a proti kartě 3,87:1 (proti stránce 4,12:1), takže tlačítko drží čitelnost i viditelnost. */ --p-cta: #35853a; } /* POSUVNÍK JE MIMO ``, takže na něj `color-scheme` z těla nedosáhne. Je to jediná vlastnost, kterou musí nést KOŘEN dokumentu - a ten šablona ve značkování neoznačuje (`` bez třídy), takže se na něj sahá přes `:has()`. Bez toho zůstal na tmavé stránce světlý posuvník. Prohlížeč bez `:has()` pravidlo zahodí a chová se jako dosud. */ :root:has(body.site--produkce[data-pr-rezim="tmavy"]) { color-scheme: dark; } /* ── Co tmavý režim nevyřeší tokenem ────────────────────────────────────── Tři prvky mění v tmavém režimu VZTAH K PODKLADU, ne barvu, takže je token nezachrání: výplň, která byla tmavá na bílé, je najednou tmavá na tmavé. Přebarvit je nejde (bílý znak i bílý popisek na nich musí zůstat), takže dostanou OBRYS - to je i odpověď, kterou WCAG na netextový prvek dává. */ /* Aktivní položka menu. Výplň je `--p-akcent-fill`, tedy schválně tmavá kvůli bílému popisku; proti liště `#15181c` z ní ale vyšlo 1,18 až 3,55:1 podle motivu, tedy pod prahem 3:1 u VŠECH sedmi, a pilulka ztratila tvar. Obrys z `--p-akcent-obrys` dá 3,96 až 5,72:1. */ body.site--produkce[data-pr-rezim="tmavy"] .pr-nav__link[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--p-akcent-obrys); } /* Kruhy sociálních sítí. Barva kruhu je barva ZNAČKY, takže se měnit nesmí - a proti tmavé patičce má TikTok 1,06:1, Facebook 2,60:1 a Deník nevěsty 3,03:1. Obrys je společný pro všechny, aby se nemuselo rozhodovat u každé sítě zvlášť; z `--p-tlum` napůl s plochou vyjde 3,36:1 proti patičce a 3,56:1 proti nejtmavšímu kruhu. Bez `color-mix()` se stín nevykreslí, tedy dnešní stav - je to viditelnost navíc, ne nosič informace. */ body.site--produkce[data-pr-rezim="tmavy"] .pr-foot__soclink { border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-tlum) 50%, var(--p-plocha)); } /* Destička pod logem. Rozhoduje o ní PODKLAD, ne jen světlost loga: v tmavém režimu je lišta podstránky i patička tmavá, takže je to obráceně než ve světlém - tmavé logo potřebuje světlou destičku a světlé nepotřebuje žádnou. Bez toho zmizelo tmavé logo v liště i v patičce úplně. */ body.site--produkce[data-pr-rezim="tmavy"] .pr-nav:not(.pr-nav--over) .pr-nav__logobox.is-light, body.site--produkce[data-pr-rezim="tmavy"] .pr-foot__logobox.is-light { background: none; } body.site--produkce[data-pr-rezim="tmavy"] .pr-nav:not(.pr-nav--over) .pr-nav__logobox.is-dark, body.site--produkce[data-pr-rezim="tmavy"] .pr-foot__logobox.is-dark { background: rgba(255, 255, 255, .92); } /* ZÁLOHA PRO PROHLÍŽEČ BEZ `color-mix()` (Chrome do 110, Safari do 16.1, Firefox do 112). Musí být ZA blokem výš, protože ho přebíjí, a musí být v `@supports not`, protože u custom property druhá deklarace zálohu neudělá - viz komentář tamtéž. Hodnoty jsou dnešní modrošedá, tedy to, co ta dvojice deklarací zamýšlela. */ @supports not (color: color-mix(in srgb, #000 20%, #fff)) { body.site--produkce[data-pr-rezim="tmavy"] { --p-akcent-plocha: #1a2733; --p-akcent-obrys: #2f4657; } } /* PRŮHLEDNÝ AKCENT SE MÍCHÁ Z TOKENU, NE NATVRDO. Tři místa v souboru držela `rgba(0, 110, 144, …)` - odznak původu hodnocení, linka mezi příplatky a tečkovaná spojka v ceníku - takže by po přepnutí motivu zůstala tyrkysová uprostřed oranžové stránky. Sedm dalších hodnot u každého motivu by ten problém vyřešilo taky, jen by se u osmé barvy na jednu z nich zapomnělo. Původní zápis zůstává o řádek výš jako záloha pro prohlížeč, který `color-mix()` neumí; ten uvidí dnešní tyrkysovou, ne prázdno. */ /* ══ BAREVNÉ MOTIVY ══════════════════════════════════════════════════════════ PartyDJ je prémiová šablona a barva je u ní produktová vlastnost, ne pevná hodnota z předlohy. Motiv přepisuje ŠEST tokenů a nic jiného; všechno ostatní (rozvržení, rytmus, sazba, zelená výzva „Poptat termín") zůstává. MOTIV NESAHÁ NA ŽÁDNÝ TOKEN, KTERÝ NASTAVUJE TMAVÝ REŽIM. Proto se tónovaná plocha a obrys jmenují `-svetla` a `-svetly`: role, kterou kreslí stránka, se z nich odvozuje o patro výš (`.site--produkce`), takže tmavý režim může tutéž roli přepsat vlastní, tmavou hodnotou. Dokud si oba bloky sahaly na `--p-akcent-plocha`, rozhodovalo pořadí v souboru a tmavý web zůstal se světlými pruhy a skoro bílým textem na nich. PROČ TO JDE TAK LEVNĚ: soubor už barvu vedl přes tokeny, jen ji měl pod dvěma jmény (`--p-akcent` a `--p-modra`) a přeliv si ji skládal natvrdo podruhé. Sjednoceno výš - dnes je hodnota na jednom místě a motiv je jen její přepis. KONTRAST SE U KAŽDÉHO MOTIVU POČÍTÁ, NEHÁDÁ. Bílý text sedí na akcentu (tlačítka, panel, hlavička), takže každý motiv musí projít prahem 4,5:1 - a taky opačně, protože akcent nese odkazy a nadpisy na bílé. Naměřené trojice jsou u každého motivu: bílá na akcentu / akcent na bílé / tmavý akcent na bílé. Nejnižší hodnota z celé sady je 5,02, tedy s rezervou nad prahem. VÝCHOZÍ MOTIV JE TYRKYSOVÝ a je napsaný i jako vlastní motiv, i když se rovná základu. Bez toho by se z výběru nedalo vrátit zpátky - „žádná hodnota" a „vlastník chce tyrkysovou" by se nedaly odlišit. Selektor nese ATRIBUT NA `body`, ne třídu: přepínač v prodejním náhledu ho přepisuje zvenčí (rám je na téže doméně), takže se motiv mění bez načtení stránky a bez druhé sady tříd v HTML. */ /* Tyrkysová (výchozí) - bílá na akcentu / akcent na bílé / tmavý na bílé = 5,78 / 5,78 / 7,69 */ body.site--produkce[data-pr-motiv="tyrkysova"] { --p-akcent-zaklad: #006e90; --p-akcent-tmavy: #0a5a75; --p-akcent-plocha-svetla: #e7f2fd; --p-akcent-obrys-svetly: #c5dcef; --p-akcent-2: #434d51; --p-akcent-svetly: #4fc3e8; } /* Oranžová - bílá na akcentu / akcent na bílé / tmavý na bílé = 5,18 / 5,18 / 7,31 */ body.site--produkce[data-pr-motiv="oranzova"] { --p-akcent-zaklad: #c2410c; --p-akcent-tmavy: #9a3412; --p-akcent-plocha-svetla: #fff1e7; --p-akcent-obrys-svetly: #f3cdb4; --p-akcent-2: #4a3b33; --p-akcent-svetly: #ff9d5c; } /* Fialová - bílá na akcentu / akcent na bílé / tmavý na bílé = 7,10 / 7,10 / 8,98 */ body.site--produkce[data-pr-motiv="fialova"] { --p-akcent-zaklad: #6d28d9; --p-akcent-tmavy: #5b21b6; --p-akcent-plocha-svetla: #f3efff; --p-akcent-obrys-svetly: #d6c9f7; --p-akcent-2: #3f3a54; --p-akcent-svetly: #b79bff; } /* Modrá - bílá na akcentu / akcent na bílé / tmavý na bílé = 6,70 / 6,70 / 8,72 */ body.site--produkce[data-pr-motiv="modra"] { --p-akcent-zaklad: #1d4ed8; --p-akcent-tmavy: #1e40af; --p-akcent-plocha-svetla: #eaefff; --p-akcent-obrys-svetly: #c3d0f7; --p-akcent-2: #38405c; --p-akcent-svetly: #7fa5ff; } /* Zelená - bílá na akcentu / akcent na bílé / tmavý na bílé = 5,02 / 5,02 / 9,11 */ body.site--produkce[data-pr-motiv="zelena"] { --p-akcent-zaklad: #15803d; --p-akcent-tmavy: #14532d; --p-akcent-plocha-svetla: #eaf6ee; --p-akcent-obrys-svetly: #bfe0cb; --p-akcent-2: #33463a; --p-akcent-svetly: #5fd08a; } /* Vínová - bílá na akcentu / akcent na bílé / tmavý na bílé = 6,47 / 6,47 / 8,31 */ body.site--produkce[data-pr-motiv="vinova"] { --p-akcent-zaklad: #b91c1c; --p-akcent-tmavy: #991b1b; --p-akcent-plocha-svetla: #fdecec; --p-akcent-obrys-svetly: #f3c3c3; --p-akcent-2: #4a3335; --p-akcent-svetly: #ff8f8f; } /* Černá - bílá na akcentu / akcent na bílé / tmavý na bílé = 15,13 / 15,13 / 18,88 */ body.site--produkce[data-pr-motiv="cerna"] { --p-akcent-zaklad: #262626; --p-akcent-tmavy: #111111; --p-akcent-plocha-svetla: #f2f2f2; --p-akcent-obrys-svetly: #d4d4d4; --p-akcent-2: #4b5563; --p-akcent-svetly: #d4d4d8; } /* Zlatá (exkluzivita) - bílá na akcentu / akcent na bílé / tmavý na bílé = 4,65 / 4,65 / 6,67 PŘÁNÍ VLASTNÍKA BYLO `#C0AC77` a je v téhle sadě - jako `--p-akcent-svetly`. Jako ZÁKLAD projít nemohlo: ten token je výplň pod bílým textem a bílá na `#C0AC77` má 2,23:1. Základ je proto nejsvětlejší zlatá téhož odstínu (44°) a sytosti, která bílý text unese. SVĚTLÁ ZLATÁ PATŘÍ NA TMAVÝ PODKLAD. V tmavém režimu se `--p-akcent` přepíná právě na `--p-akcent-svetly`, takže `#C0AC77` nese odkazy, ceny a pilulky žánrů - 6,44:1 na tónované ploše `#2c2a22`. To je ta zlatá, která je na tmavém webu vidět; pod bílým popiskem by naopak zmizela. */ body.site--produkce[data-pr-motiv="zlata"] { --p-akcent-zaklad: #88723a; --p-akcent-tmavy: #6d5a2d; --p-akcent-plocha-svetla: #faf3e4; --p-akcent-obrys-svetly: #e6d8b6; --p-akcent-2: #4a4133; --p-akcent-svetly: #C0AC77; } /* ── Obsahový pruh ────────────────────────────────────────────────────────── */ /* Naměřeno: šířka 1320 px při obsahu 1425 px, tedy 52,5 px po stranách. */ /* ── Roboto ───────────────────────────────────────────────────────────────── */ /* PÍSMO PŘEDLOHY. Nicepage ho tahá z Google Fonts, což tady nejde: CSP osobního webu posílá `font-src 'self'`, takže se soubor musí hostovat u nás - stejně jako Outfit u Klubu a Beau Rivage o kus výš. JE TO JEDEN SOUBOR NA PODMNOŽINU, ne dva na řez: Roboto v51 je proměnné písmo, takže Google servíruje pro 400 i 700 TÝŽ soubor a váhu z něj prohlížeč vytáhne sám (`font-weight: 100 900`). Dva řezy zvlášť by znamenaly dvakrát stáhnout totéž. Podmnožiny a jejich `unicode-range` jsou převzaté z odpovědi Google Fonts, ne vymyšlené: `latin-ext` nese českou diakritiku (ě, š, č, ř, ž, ů), takže se bez něj stáhne latin a zbytek se dokreslí náhradním písmem - a to je vidět na první pohled. Licence Apache-2.0 (Google Fonts), soubory 43 kB + 29 kB. Balí se JEN k Produkci: `SiteExporter::assetFiles()` vybírá fonty podle toho, který soubor je v CSS té které šablony opravdu odkazuje. */ @font-face { font-family: Roboto; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/roboto-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Roboto; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/roboto-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } .site--produkce .pr-sheet { width: min(1320px, calc(100% - 105px)); margin-inline: auto; position: relative; } /* ── Tlačítka ─────────────────────────────────────────────────────────────── */ /* Naměřeno: 700 20px/28px, `letter-spacing: 1px`, verzálky, poloměr 50 px, vnitřek 10px 30px. */ .site--produkce .pr-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 30px; border: 2px solid transparent; border-radius: 50px; font-size: 1.25rem; line-height: 28px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; } /* ZELENÁ VÝZVA BERE TOKEN, NE LITERÁL PŘEDLOHY. `#4caf50` má s bílým textem 2,78:1, tedy hluboko pod prahem - a `--p-cta` v základu souboru přesně to má napsané („#4caf50 má na bílé jen 2,78:1"), jen ho tyhle dvě tlačítka obcházela vlastní hodnotou. Dnes 5,12:1 ve světlém a 4,60:1 v tmavém. */ .site--produkce .pr-btn--go { background: var(--p-cta); color: #fff; } .site--produkce .pr-btn--go:hover { background: var(--p-sedomodra); color: #fff; } .site--produkce .pr-btn--ghost { border-color: #fff; color: #fff; background: none; } .site--produkce .pr-btn--ghost:hover { background: var(--p-sedomodra); border-color: var(--p-sedomodra); } /* Obrysové tlačítko v BÍLÉ sekci - naměřeno: 1,82px obrys #404040, poloměr 30 px, vnitřek 14px 75px 15px 74px, bez verzálek. */ /* VERZÁLKY JSOU V PŘEDLOZE NAPSANÉ RUČNĚ („VÍCE INFORMACÍ" je v HTML velkými), `text-transform` má proto `none`. U nás je text v šabloně psaný normálně, takže se verzálky dělají stylem - výsledek na obrazovce je týž a popisek zůstane čitelný i tam, kde se styl nenačte. */ .site--produkce .pr-btn--line { /* `--p-tlum-ink` místo natvrdo psaného `#404040`: je to táž role (tlumený inkoust) a odstín se liší o pět jednotek, tedy neviditelně (9,59:1 proti 9,7:1 na bílé). Natvrdo psaná hodnota znamenala v tmavém režimu obrys i popisek 1,72:1, tedy tlačítko, které nebylo vidět ani přečíst. */ border: 1.82px solid var(--p-tlum-ink); border-radius: 30px; padding: 14px 75px 15px 74px; color: var(--p-tlum-ink); text-transform: uppercase; letter-spacing: normal; } /* Po najetí se barvy PROHODÍ, nezůstane bílá natvrdo: v tmavém režimu je tlumený inkoust světlý, takže by na něm bílý text zmizel. `--p-plocha` je bílá ve světlém a `#15181c` v tmavém, tedy vždycky opak výplně (11,55:1). */ .site--produkce .pr-btn--line:hover { background: var(--p-tlum-ink); color: var(--p-plocha); } .site--produkce .pr-btn:focus-visible { outline: 3px solid var(--p-modra); outline-offset: 3px; } /* ── Lišta ────────────────────────────────────────────────────────────────── */ .site--produkce .pr-nav { position: sticky; top: 0; z-index: 20; background: var(--p-plocha); /* LINKA Z TOKENU, ne natvrdo psaná světlá šeď. `#e9edf3` má na tmavé liště `#15181c` kontrast 15,16:1, tedy jedenáctinásobek všech ostatních oddělovačů na stránce - pod lištou svítil bílý pruh. `--p-line` dá 1,17:1 ve světlém (jak má být) a 1,32:1 v tmavém. */ border-bottom: 1px solid var(--p-line); } /* Nad hlavičkou lišta PLAVE a je průhledná - fotka je vidět až k hornímu okraji okna. Naměřeno: výška 95 px, bez podkladu, bílý text. */ .site--produkce .pr-nav--over { position: absolute; inset: 0 0 auto; background: transparent; border-bottom: 0; } .site--produkce .pr-nav__inner { min-height: var(--p-navh); display: flex; align-items: center; gap: 0; flex-wrap: wrap; } .site--produkce .pr-nav__brand { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; color: var(--p-ink); } .site--produkce .pr-nav--over .pr-nav__brand { color: #fff; } /* Naměřeno: Beau Rivage 30px/48px, `letter-spacing: 2px`, tučně. */ .site--produkce .pr-nav__brandtext { font-family: "Beau Rivage", "Segoe Script", cursive; font-size: 1.875rem; line-height: 48px; letter-spacing: 2px; font-weight: 700; white-space: nowrap; } /* DVĚ MAXIMA A `auto` U OBOU ROZMĚRŮ, ne pevná výška se `width: auto`. `base.css` má `img { max-width: 100% }` a to procento se uvnitř pružného pruhu vyhodnocuje proti krabici, kterou určuje sám obrázek - vznikne kruh a prohlížeč logo srazí. Klub na to doplatil (202x40 px se vykreslilo jako 41x35) a stálo to vydání nové verze. */ .site--produkce .pr-nav__logo { max-height: 48px; max-width: 260px; width: auto; height: auto; } /* ── Podklad pod logem ────────────────────────────────────────────────────── */ /* PODKLAD SE ŘÍDÍ SVĚTLOSTÍ LOGA A PODKLADEM POD NÍM - obojí musí platit zároveň, jinak se deska objeví tam, kde není potřeba. Rozhoduje `logo_light` z modelu (`Upload::isLight()`), tedy TÁŽ hodnota, jakou používá Klub, Scéna i Vizitka; Produkce byla jediná, která se jí neptala. Vlastník to nahlásil větou „logo na světlém pozadí téměř zaniká". ZMĚŘENO nad všemi čtyřmi logy v katalogu (podíl kresby světlejší než luminance 200 / tmavší než 60): profil rozměr světlé tmavé `isLight()` #8 202x40 84,2 % 0,3 % světlé -> mizí na bílé liště #67 1222x252 34,0 % 37,9 % světlé #78 384x404 4,0 % 79,3 % tmavé -> mizí nad tmavou fotkou #4618 200x106 63,7 % 0,0 % světlé -> mizí na bílé liště Jsou to tedy OBĚ strany, ne jedna: tři loga ze čtyř zmizí na bílém podkladu a jedno na tmavém. Kdo opraví jen tu první, rozbije druhou a nikde to nespadne. TÓN DESKY SE POČÍTÁ, NEHÁDÁ. Bílé písmo (#fff) na `#434d51` má kontrast 8,68:1, tedy hluboko nad prahem 4,5:1 - a je to TÁŽ barva, jakou má karta s průměrem hodnocení a druhý konec přelivu značky (`--p-grad`), takže do šablony nepřibývá pátý odstín. Tmavé logo dostává bílou s krytím 92 %, stejně jako v Klubu. ODSAZENÍ JE MALÉ SCHVÁLNĚ (.25rem svisle, .5rem vodorovně). Deska má být čitelnostní podklad, ne nálepka; předloha logo na desce nemá vůbec, takže čím míň je jí vidět, tím blíž je výsledek předloze. */ /* ODSAZENÍ JE STÁLÉ, MĚNÍ SE JEN PODKLAD. Když ho měla jen ta varianta s deskou, mělo logo na úvodu odsazení 0 px a na podstránce 8 px, takže při prokliku Úvod -> Informace SKOČILO o 8 px do strany (naměřeno x 684 proti 692). Lišta je přitom lepivá a při přepnutí stránky zůstane na obrazovce, takže je ten skok vidět. Geometrie proto zůstává stejná vždycky a přepíná se výhradně `background`. */ .site--produkce .pr-nav__logobox, .site--produkce .pr-foot__logobox { display: inline-flex; align-items: center; flex: 0 0 auto; padding: .25rem .5rem; border-radius: 10px; } /* Bílá lišta na podstránce: podklad potřebuje SVĚTLÉ logo. */ .site--produkce .pr-nav:not(.pr-nav--over) .pr-nav__logobox.is-light, .site--produkce .pr-foot__logobox.is-light { background: var(--p-sedomodra); } /* Průhledná lišta nad fotkou: tam je to obráceně, podklad potřebuje TMAVÉ. */ .site--produkce .pr-nav--over .pr-nav__logobox.is-dark { background: rgba(255, 255, 255, .92); } .site--produkce .pr-nav__menu { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; } /* Naměřeno: 500 16px/16px, verzálky, vnitřek 10px 20px, BEZ prostrkání a s OSTRÝMI rohy - zaoblený je v předloze jedině zelené tlačítko vpravo. Prostrkání `.02em` (zděděné z vizitkového základu o kus výš) rozšiřovalo každou položku o dva až tři pixely, takže se menu proti předloze posouvalo. */ .site--produkce .pr-nav__link { display: block; padding: 10px 20px; border-radius: 0; font-size: 1rem; line-height: 16px; font-weight: 500; letter-spacing: normal; text-transform: uppercase; text-decoration: none; color: var(--p-ink); } .site--produkce .pr-nav--over .pr-nav__link { color: #fff; } .site--produkce .pr-nav__link:hover { background: var(--p-sedomodra); color: #fff; } /* AKTUÁLNÍ STRÁNKA SE NEPOZNÁVÁ JEN BARVOU - nese `aria-current="page"`, takže ji ohlásí i odečítač. Naměřeno: podklad #006e90. */ /* VÝPLŇ, NE TEXT. `--p-modra` je alias na `--p-akcent`, a ten se v tmavém režimu přepíná na SVĚTLOU variantu motivu (je to barva textu na ploše). Pod bílým popiskem z toho vyšlo 1,93 až 2,41:1 podle motivu - aktivní položka menu byla v tmavém režimu nečitelná u všech sedmi. Výplň má vlastní token, který tmavý režim schválně nepřepisuje. */ .site--produkce .pr-nav__link[aria-current="page"] { background: var(--p-akcent-fill); color: #fff; } /* Naměřeno: podklad #4caf50, poloměr 50 px, tučně, vnitřek 10px 20px. */ .site--produkce .pr-nav__cta { display: block; margin-left: 8px; padding: 10px 20px; border-radius: 50px; background: var(--p-cta); color: #fff; font-size: 1rem; line-height: 16px; font-weight: 700; text-transform: uppercase; text-decoration: none; } .site--produkce .pr-nav__cta:hover { background: var(--p-sedomodra); } /* ── Hlavička ─────────────────────────────────────────────────────────────── */ /* Naměřeno: min-height 850 px, pod videem černý podklad. */ .site--produkce .pr-hero { position: relative; isolation: isolate; min-height: 850px; /* KOLAPS OKRAJŮ. Deska nad jménem má `margin-top: 157px` a ten by se bez vlastního odsazení protlačil ven a posunul CELOU hlavičku o 157 px dolů (naměřeno). Předloha to řeší úplně stejně - její `
` má `padding: 0.1px 0 0`. */ padding-top: .1px; background: #000; color: #fff; /* POSTAVA PŘESAHUJE HLAVIČKU VE DVOU SMĚRECH a každý se řeší jinak. DO STRAN se ořezává: pruh přesahuje o 40 px schválně (tak je to v předloze), jenže na tabletu se do okna nevejde ani zbytek její šířky a stránka přetékala vodorovně o 47 px (změřeno na 768 px). DOLŮ přesahovat MUSÍ: v předloze visí 61 px pod hlavičkou a překrývá horní hranu dvousloupce - je to podstatná část toho, jak hlavička vypadá. `overflow: hidden` ji uřízlo, protože „hidden" v jedné ose dopočítá druhou na `auto`. Proto `overflow-x: clip`, který se s `overflow-y: visible` kombinovat SMÍ. Prohlížeč, který `clip` nezná (Safari do 16), deklaraci zahodí a zůstane mu `visible` - tedy stav před touhle opravou, ne rozbitá stránka. */ overflow-x: clip; overflow-y: visible; /* A aby ten přesah bylo VIDĚT, musí hlavička ležet nad sekcemi pod sebou: `.pr-duo` je v pořadí dokumentu za ní, takže by svým bílým podkladem postavu přebil. Lišta má `z-index: 20`, zůstává tedy nad vším. */ z-index: 2; } .site--produkce .pr-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .site--produkce .pr-hero__bg { width: 100%; height: 100%; object-fit: cover; display: block; } /* Naměřeno: rám videa 178 % šířky i výšky, posunutý o -39 % - YouTube drží 16/9 bez ohledu na velikost prvku, takže se přes okraje škáluje, aby nebyly černé pruhy. */ .site--produkce .pr-hero__video { position: absolute; width: 178%; height: 178%; left: -39%; top: -39%; } .site--produkce .pr-hero__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* `u-video-shading` z předlohy: rovnoměrné ztmavení kvůli čitelnosti textu. 35 %, NE PŘEDLOHOVÝCH 18 %, a je to změřené číslo. Hlavička nese bílé jméno (150 px) a zaměření (48 px) PŘES FOTKU OBÁLKY, kterou si vybírá DJ - předloha měla jednu tmavou fotku, katalog jich má 75 různých. Naměřeno nad všemi (výřez `object-fit: cover` do poměru hlavičky 1,676 s ohniskem profilu, vzorkuje se jen pruh, kde text opravdu leží: y 0,273 až 0,565, x 0,037 až 0,940; hodnotí se p10 kontrastu, tedy nejhorší desetina plochy pod textem): závoj nejhorší drží 3:1 drží 4,5:1 18 % 1,53:1 41 / 75 24 / 75 30 % 2,11:1 58 / 75 36 / 75 35 % 2,44:1 67 / 75 43 / 75 45 % 3,35:1 75 / 75 61 / 75 PLOCHÝ ZÁVOJ TU PORÁŽÍ PŘELIV, a to je proti očekávání. Přeliv dává černi tam, kde text leží, a jinde ji ubere - jenže text tu sedí ve STŘEDU hlavičky (jméno začíná na 27 % výšky), takže světlý horní konec padne přesně na něj. Naměřeno: `.18 -> .45` dá 1,90:1 a 58/75, tedy horší než plochých 30 %; `.28 -> .48` dá 2,38:1 a 68/75, tedy zhruba jako plochých 35 %, ale s tmavším spodkem. Přeliv má smysl tam, kde text sedí u hrany - proto ho má hlavička podstránky (`.pr-pagehead__shade`). 45 % BY PRÁH DRŽELO U VŠECH, ale je to viditelně tmavá fotka, ne filtr - a vlastník žádal JEMNÝ. Zbylých osm profilů z 75 stejně nespraví žádná hodnota: jejich obálka není fotka, ale skoro bílý reklamní banner s vlastním textem (5 obálek má pod textem plochu světlejší než 0,60, tři z nich přes 0,90). To je volba obrázku, ne vada závoje. */ .site--produkce .pr-hero__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); } .site--produkce .pr-hero__sheet { min-height: 850px; /* 157 px je ODSAZENÍ PRUHU, ne okraj desky. Jako `margin-top` na desce se protlačil ven (pruh sám nemá odsazení ani rámeček) a posunul celý pruh - postava ukotvená absolutně proti němu pak seděla o 157 px níž. */ padding-top: 157px; display: flex; flex-direction: column; } /* DESKA NAD JMÉNEM (`pr-hero__plate`) JE PRYČ. V předloze na tom místě prvek je, ale je to prázdná buňka rozvržení od Nicepage (`u-layout-cell-1`, 1320x44 px, poloměr 20 px) s PRŮHLEDNÝM podkladem - změřeno v prohlížeči: `background-color: rgba(0, 0, 0, 0)`, `opacity: 1`. Nedělá tedy nic než 44 px místa nad jménem. U nás měla `background: rgba(0,0,0,.2)`, tedy tmavý pruh přes celou šířku hlavičky, který v předloze NENÍ. Těch 44 px dnes drží horní okraj jména (31 -> 75 px), takže jméno začíná na téže hodnotě jako v předloze (232 px od horní hrany hlavičky) a ve značkování nezůstal prázdný `
`, jehož jediným úkolem byla mezera. */ /* JMÉNO. Naměřeno: Roboto 700 150px/165px, BÍLÉ, `margin: 31px 171px 0 0`. ZLATÝ PŘELIV NENÍ GRADIENT, ale `mix-blend-mode: overlay` nad teplým videem - barvu dává to, co je pod textem. Kdo to nahradí skutečným gradientem, dostane na tmavém místě fotky úplně jinou barvu. `clamp` je jediná odchylka od předlohy a je nutná: jméno DJe má proměnnou délku (od „DJ Ondra" po „Hudební duo Pavel a Katka"), takže pevných 150 px by u delšího přeteklo z okna. Horní mez je přesně předlohových 150 px. */ .site--produkce .pr-hero__name { /* 75 = 31 px z předlohy + 44 px po zrušené prázdné desce nad jménem. */ margin: 75px 171px 0 0; font-size: clamp(3rem, 10.4vw, 150px); line-height: 1.1; font-weight: 700; color: #fff; mix-blend-mode: overlay; } /* Naměřeno: Roboto 700 48px/52.8px, bílé, `margin: 31px auto 0 0`, taky overlay. */ .site--produkce .pr-hero__claim { margin: 31px auto 0 0; font-size: clamp(1.25rem, 3.4vw, 48px); line-height: 1.1; font-weight: 700; color: #fff; mix-blend-mode: overlay; } /* POSTAVA JE ABSOLUTNÍ, ne posunutá zápornými okraji. Naměřeno v předloze: 881x564 px, levý horní roh na y=347 při hlavičce vysoké 850 px, pravý okraj -40 px za obsahovým pruhem. Spodní hrana jí tedy vychází na 911 px, tedy 61 px POD hlavičkou - postava schválně přesahuje do sekce pod ní a hlavička ji proto NESMÍ ořezávat (`overflow` má jen `.pr-hero__media`). Předloha to dělá zápornými okraji (`margin: -134px -40px 0 auto` a k tomu `-381px` na tlačítku), což je jen jiný zápis téhož - jenže ta čísla jsou spočítaná na jedno konkrétní jméno a jednu délku textu. Tady je jméno proměnné, takže by se tlačítka u delšího jména rozjela. `pointer-events: none`, aby postava nepřekryla tlačítka pod sebou. */ /* 881x564 NEBYL RÁMEČEK, BYLA TO VELIKOST FOTKY PŘEDLOHY - a právě z téhle záměny vznikla vada, kterou vlastník nahlásil („postava je neúměrně velká, při různých fotografiích dochází k nepřirozenému zvětšení"). Předloha má `images/0647-removebg.png` o rozměrech 1920x1280, tedy poměr 1,500; rám 881x564 má poměr 1,562. Ty dvě čísla se skoro rovnají, takže `object-fit: cover` u NÍ nezvětšoval ani neořezával prakticky nic (měřítko 0,459 a uříznuté 23 px dole). U jiného poměru stran ale cover zvětšuje, aby rám vyplnil - a to je přesně ten případ: postava poměr měřítko s `cover` co je vidět 1920x1280 1,500 0,459 skoro celá 532x635 (Ondra) 0,838 1,656 horních 54 % Změřeno na profilu vlastníka: obrázek 532x635 se vykreslil jako 881x1051 a oříznul na horních 564 px, takže z postavy zbyla obří hlava přes půl hlavičky. Přes zaměření pod jménem přitom ležela 492 px široká neprůhledná plocha. V katalogu má dnes postavu vyplněnou jeden profil ze 373 a poměry stran jsou 0,838 a 1,500 - tedy obě krajní polohy hned u prvních dvou. DNEŠNÍ PRAVIDLO: rám je REZERVOVANÁ PLOCHA, ne velikost obrázku. O velikost se stará `object-fit: scale-down`, tedy „menší z `contain` a `none`". Z toho plynou tři vlastnosti, které cover nemá ani jednu: - NIKDY NEZVĚTŠUJE nad původní velikost (malá fotka zůstane malá), - NIKDY NEOŘEZÁVÁ (postava je vidět celá, od hlavy k patě), - NIKDY NEDEFORMUJE (poměr stran drží obrázek sám). Změřeno po opravě přes pět poměrů stran (0,84 / 1,50 / 1,50 malá / 0,67 / 3,00): měřítko 0,676 / 0,327 / 1,000 / 0,350 / 0,261 - žádné nad jedničkou a všechny postavy stejně vysoké na téže účaří. UKOTVENÍ JE VPRAVO DOLE (`object-position: 100% 100%`), ne nahoře. Rám je od téhle chvíle větší než obrázek, takže na poloze uvnitř něj záleží: postava musí „stát" na spodní hraně, jinak by u úzké fotky visela ve vzduchu. PŘESAH 61 px POD HLAVIČKU ZŮSTÁVÁ (`bottom: -61px`). Je to rytmus předlohy - postava schválně zasahuje do sekce pod sebou. Kotví se ale ke SPODNÍ hraně, ne `top`em v pixelech: výška hlavičky se s délkou jména mění a s `top: 347px` by se přesah měnil s ní. ŠÍŘKA RÁMU JE PODÍL PRUHU, ne 881 px. `min(64%, 845px)` je přesně to, co v předloze zabírá její vlastní fotka (846 z 1320 px pruhu = 64,1 %), takže se na širokém okně nic nezměnilo - jen se to přestalo počítat z jednoho konkrétního obrázku. POSTAVA STOJÍ NAD STŘEDEM TYRKYSOVÉHO PANELU, ne u pravé hrany pruhu. Vlastník: „aktuálně je zarovnaná příliš doprava a kompozice působí nevyváženě; měla by být přibližně do středu modré sekce." ZMĚŘENO PŘED OPRAVOU (okno 1440 px, ukázková postava 1024x1536): rám měl 845 px, ale `object-position: 100% 100%` v něm obrázek kreslil U PRAVÉ HRANY, takže vykreslený pás měřil jen 374 px a ležel na 1039-1413. Střed panelu je přitom na 1053 - postava tedy stála o 173 px vedle. A HLAVNĚ SE TA ODCHYLKA MĚNILA S KAŽDOU FOTKOU. Při ukotvení vpravo je střed vykresleného obrázku `(šířka rámu - šířka obrázku) + šířka/2`, tedy funkce POMĚRU STRAN - úzká postava stojí jinde než široká: poměr vykreslí se střed proti pravé hraně rámu 0,667 374 px -187 px 1,500 841 px -421 px 3,000 845 px -423 px Rozdíl 236 px mezi první a poslední. Přesně to je ta „nekonzistence při použití různých fotografií", na kterou se vlastník ptal. ŘEŠÍ TO `object-position: 50% 100%`, a je to jediná hodnota, která to řeší. Vodorovný odstup obrázku uvnitř rámu je `(rám - obrázek) * X`, takže jeho střed vyjde `(rám - obrázek) * X + obrázek/2`. Pro X = 0,5 se člen s šířkou obrázku vykrátí a zbude `rám/2` - **střed obrázku se rovná středu rámu při JAKÉMKOLIV poměru stran**. U kterékoliv jiné hodnoty na poměru stran záleží. Svislých 100 % zůstává: postava musí stát na spodní hraně, jinak úzká fotka visí ve vzduchu. RÁM JE PŮDORYS PANELU, ne odhad polohy. `.pr-duo` má `grid-template-columns: 51.667% 48.333%` a TÝŽ pruh jako hlavička (`min(1320px, calc(100% - 105px))`, `.pr-sheet`), takže levá hrana panelu leží na 51,667 % a jeho šířka je 48,333 %. Ta dvě čísla se sem neopisují jako poloha postavy - jsou to souřadnice panelu, nad kterým má stát. Plyne z toho i to, že rám nemůže vyjet z pruhu: končí přesně tam, kde pruh. `right: auto` je nutné - jinak by spolu s `left` a `width` vznikl předeterminovaný zápis a prohlížeč by jednu z hodnot zahodil. */ .site--produkce .pr-hero__figure { position: absolute; top: auto; bottom: -61px; left: 51.667%; right: auto; width: 48.333%; height: min(564px, 66%); object-fit: scale-down; object-position: 50% 100%; pointer-events: none; z-index: 1; } /* Naměřeno: tlačítka začínají 49 px pod zaměřením. */ .site--produkce .pr-hero__cta { display: flex; flex-wrap: wrap; gap: 26px; margin: 49px 0 60px; position: relative; z-index: 2; } @media (max-width: 1199px) { /* Naměřeno v předloze: min-height 650 px, jméno 6rem, postava výš. */ .site--produkce .pr-hero, .site--produkce .pr-hero__sheet { min-height: 650px; } .site--produkce .pr-hero__name { margin-right: 0; } /* ZMĚŘENO NAD PŘEDLOHOU NA 1100 px: postava si drží 881x564 px, jen se posune nahoru (147 px pod horní hranou hlavičky) a víc doprava (159 px za pravý okraj pruhu). Přesah pod hlavičku zůstává 61 px jako na širokém okně - právě ten přesah je na hlavičce vidět. `width: 70%; height: auto` tu stálo dřív a s odkrytým přesahem se ukázalo jako vada: postava vyrostla na 686x1029 px a překryla celý dvousloupec pod sebou (naměřeno 619 px přesahu). Užší okno ji zmenší samo přes `img { max-width: 100% }` ze `base.css`, stejně jako v předloze. Ukotvení ke spodní hraně (`bottom: -61px`) platí i tady a je to TÁŽ hodnota jako na širokém okně: hlavička má 650 px, takže postava o výšce 564 px začíná 147 px pod horní hranou a končí 61 px pod ní - předlohové `top: 147px` tedy vychází na pixel stejně, jen se nepřepočítá pokaždé, když je jméno o řádek delší. */ /* POSUN DOPRAVA (`right: -159px`) TU UŽ NENÍ. Byl to krok předlohy, která postavu kotví k pravé hraně; od chvíle, kdy stojí nad středem panelu, by ji z něj odsunul. Dvousloupec je na téhle šířce pořád dvousloupec, takže platí totéž ukotvení jako na širokém okně. */ } /* POSTAVA MÁ V PŘEDLOZE PĚT KROKŮ, NE DVA - a chyběly právě ty, ve kterých se ZMENŠUJE. Vypsáno z `partyub_cz/index.css` (`.u-section-1 .u-image-1`): základ 881x564, margin -134px -40px 0 auto <= 1199 px margin-top -234, margin-right -159 <= 991 px 720x461, margin-top -99, margin-right -86 <= 767 px 540x346, margin-top -71, margin-right -50 <= 575 px `u-hidden-xs` ji schová úplně My jsme měli jen první dva a pod 768 px ji rovnou schovávali, takže mezi 768 a 991 px zůstávala v plné velikosti: naměřeno 881 px široká postava v okně 992 px, tedy 91 px za pravým okrajem, a spodní hrana přesně na hraně tyrkysového panelu pod hlavičkou. Právě tenhle stav vlastník nahlásil. PŘESAH DOLŮ SE OD 991 px KOTVÍ KE SPODNÍ HRANĚ (`bottom: 0`), ne k horní. V předloze je na těch šířkách nulový (naměřeno 0 px na 850 px a -2 px na 700 px), kdežto `top` v pixelech by ho měnil s každou změnou výšky hlavičky - a ta se s délkou jména mění. */ /* KROKY PŘEDLOHY ZŮSTÁVAJÍ JAKO STROP, ale POD 1200 px NEROZHODUJÍ ONY, nýbrž procento - a je to tak správně. Hlavička má `min-height` 850 px v základu, 650 px od 1200 px níž a 0 od 768 px níž, takže: okno 66 % výšky hlavičky krok předlohy platí 1440 561 564 561 1025 429 461 429 820 429 461 429 700 215 346 215 Pixelové číslo se uplatní teprve tehdy, když hlavička vyroste nad svoje minimum (dlouhé jméno zalomené na víc řádků) - je to strop, ne rozměr. Postava je tím na každé šířce stejným dílem hlavičky, což je přesně to, co po ní vlastník chtěl; parita s předlohou na pixel platí jen na širokém okně, kde jsou obě čísla 3 px od sebe. */ @media (max-width: 991px) { /* Dvousloupec se tady skládá na jeden sloupec, takže tyrkysový panel zabírá CELÝ pruh - a rám postavy s ním. Střed panelu je tím střed pruhu; `object-position: 50%` ho drží dál. */ .site--produkce .pr-hero__figure { left: 0; right: auto; width: 100%; height: min(461px, 66%); bottom: 0; } } @media (max-width: 767px) { .site--produkce .pr-hero__figure { height: min(346px, 66%); } } @media (max-width: 575px) { /* Tady ji schovává i předloha (`u-hidden-xs`) - na 375px displeji by sebrala půlku šířky a jméno by se lámalo po slabikách. */ .site--produkce .pr-hero__figure { display: none; } } /* ── Dvousloupec „medailonek + panel s body" ──────────────────────────────── */ /* Naměřeno: levá buňka 51,667 %, pravá 48,333 %, obě min-height 611 px, celá řada odshora 60 px. */ .site--produkce .pr-duo { display: grid; grid-template-columns: 51.667% 48.333%; align-items: stretch; width: min(1320px, calc(100% - 105px)); /* 100 px POD DVOUSLOUPCEM UŽ TU NENÍ, i když je to rytmus předlohy (její sekce má `min-height: 771px` proti obsahu 671 px, takže pod panelem zbude sto pixelů bílé). Byla to největší mezera na stránce a zároveň jediná, která se od ostatních lišila - vlastník ji vytkl jmenovitě. Rozestup se od téhle chvíle bere ze `--p-sec-y` jako všude jinde. */ margin: var(--p-sec-y) auto; } @media (max-width: 991px) { .site--produkce .pr-duo { grid-template-columns: 1fr; } /* PRVEK MŘÍŽKY SE VE VÝCHOZÍM STAVU NEZMENŠÍ POD SVŮJ OBSAH (`min-width: auto`), takže sloupec vyšel 363 px v obalu širokém 270 a stránka na telefonu přetékala vodorovně o 41 px (změřeno na 375 px). Nespadlo při tom nic - jen šlo rolovat do strany. Táž past jako u karet v portálu. */ .site--produkce .pr-duo > .s-sec { min-width: 0; } } /* Vnitřní odsazení 60 px je změřené nad předlohou a na širokém okně platí; na telefonu by z 270px obalu nechalo textu 150 px. */ @media (max-width: 767px) { .site--produkce .pr-duo .s-sec { padding-inline: 1.5rem; } } /* Levá půlka: bílá, text na střed, odstavec do bloku. Naměřeno: vnitřek 30px 60px, nadpis 700 36px/39.6px s odstupem 60 px, text 400 18px/28.8px. */ .site--produkce .pr-about { background: var(--p-plocha); padding: 30px 60px; min-height: 611px; display: flex; flex-direction: column; max-width: none; margin: 0; border: 0; } .site--produkce .pr-about__title { margin: 60px 0 0; font-size: 2.25rem; line-height: 1.1; font-weight: 700; text-align: center; color: var(--p-ink); } .site--produkce .pr-about__text { margin: 31px 0 0; font-size: 1.125rem; line-height: 1.6; text-align: justify; color: var(--p-ink); } .site--produkce .pr-about .pr-btn--line { margin: 60px auto; } /* Pravá půlka: tyrkysový přeliv s body. Naměřeno: přeliv 100deg #006e90 -> #434d51, stín `0 0 8px 1px rgba(128,128,128,.2)`, vnitřek 15 px, seznam široký 540 px na střed, mezera mezi body 10 px. */ .site--produkce .pr-usp { background-image: var(--p-grad); box-shadow: 0 0 8px 1px rgba(128, 128, 128, .2); padding: 15px; min-height: 611px; display: flex; align-items: center; max-width: none; margin: 0; border: 0; color: #fff; } /* Nadpis sekce předloha nemá - panel začne rovnou prvním bodem. Ze značkování se nemaže, protože na něj ukazuje `aria-labelledby` a bez přístupného názvu přestane být `
` landmarkem. */ .site--produkce .pr-usp__title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Seznam je 540x560 px a body si výšku dělí rovným dílem (naměřeno 3x180 px s mezerou 10). Bez pevné výšky by se panel s kratšími texty scvrkl a přestal sedět s bílou půlkou vedle sebe. */ .site--produkce .pr-usp__list { width: min(540px, 100%); min-height: 560px; margin: 0 auto; padding: 0; list-style: none; display: grid; grid-auto-rows: 1fr; gap: 10px; } .site--produkce .pr-usp__item { padding: 10px; } /* Naměřeno: číslo Roboto 400 60px/72px, nadpis 700 20px/24px s odsazením `-48px 0 0 90px` (tedy vedle čísla), text 24 px pod ním. */ .site--produkce .pr-usp__num { display: block; font-size: 3.75rem; line-height: 72px; font-weight: 400; color: #fff; } .site--produkce .pr-usp__itemtitle { margin: -48px 0 0 90px; font-size: 1.25rem; line-height: 24px; font-weight: 700; color: #fff; } /* 18px/28.8px do bloku - PŘEDLOHA (`.u-section-2 .u-text-5`), ne odhad. S 16px se text v panelu láme o řádek dřív a sloupec vedle sebe pak nesedí na účaří. */ .site--produkce .pr-usp__itemtext { margin: 24px 0 0; font-size: 1.125rem; line-height: 1.6; text-align: justify; color: #fff; } /* ── Ostatní sekce ────────────────────────────────────────────────────────── */ /* Plochy jdou od kraje ke kraji a střídají bílou se světle modrou - `base.css` dává sekci `max-width` a `margin: 0 auto`, takže by podklad končil tam, kde končí text. */ .site--produkce .s-sec { border-top: 0; background: var(--p-plocha); max-width: none; margin-inline: 0; padding-block: 60px; padding-inline: max(1.25rem, calc((100% - 1320px) / 2)); } /* TYRKYSOVÝ PANEL MÁ VLASTNÍ VNITŘEK (15 px, viz `.pr-usp` výš) a tohle pravidlo je specifičtější, takže mu ho bez výjimky přepsalo na 60 px - seznam se tím zúžil z 540 na 518 px a čísla se posunula o 11 px doprava. Rozdíl je malý a pozná se jedině měřením vedle předlohy. */ .site--produkce .pr-duo .s-sec:not(.pr-usp) { padding-inline: 60px; padding-block: 0; } /* SEKCE V DVOUSLOUPCI SE STŘÍDÁNÍ NEÚČASTNÍ. Zkratka `background` je ZKRATKA, takže resetuje i `background-image` - a přeliv tyrkysového panelu tím mlčky zmizel: zbyla světle modrá plocha s bílým textem, tedy nečitelná. Pravidlo stojí ZA `.pr-usp`, takže ho přebíjí i při shodné specificitě. */ .site--produkce .s-sec:nth-of-type(even):not(.pr-about):not(.pr-usp) { background: var(--p-svetle); } .site--produkce .pr-sub > .s-sec:first-child { background: var(--p-plocha); } .site--produkce .s-sec__title { font-size: 2.25rem; line-height: 1.1; font-weight: 700; } /* Nadpis první sekce na podstránce převzala H1 v pruhu nad ním. */ .site--produkce .pr-sub > .s-sec:first-child > .s-sec__title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── Hlavička podstránky ──────────────────────────────────────────────────── */ /* Předloha má na podstránce vlastní FOTOHLAVIČKU s bílým nadpisem 72 px (změřeno nad `informace.html`: sekce 776 px, závoj 30 % černé). Bez obálky zůstává tyrkysový přeliv - prázdný tmavý pruh vypadá jako nenačtená fotka. */ .site--produkce .pr-pagehead { position: relative; background-image: var(--p-grad); color: #fff; padding-block: clamp(2rem, 5vw, 3.5rem); } .site--produkce .pr-pagehead--foto { display: flex; align-items: flex-end; min-height: 420px; padding-block: clamp(2.5rem, 6vw, 4rem); } .site--produkce .pr-pagehead__media { position: absolute; inset: 0; overflow: hidden; } .site--produkce .pr-pagehead__bg { display: block; width: 100%; height: 100%; object-fit: cover; } .site--produkce .pr-pagehead__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 45%, rgba(0, 0, 0, .6) 100%); } /* Text musí ležet NAD závojem - bez vlastního kontextu ho pruh překryje a nadpis zmizí, aniž by cokoliv spadlo. */ .site--produkce .pr-pagehead__inner { position: relative; z-index: 1; } .site--produkce .pr-pagehead__crumbs { margin: 0 0 .6rem; font-size: .95rem; color: rgba(255, 255, 255, .9); } .site--produkce .pr-pagehead__crumbs a { color: inherit; } .site--produkce .pr-pagehead__title { margin: 0; /* 72 px je změřená velikost nadpisu podstránky v předloze. */ font-size: clamp(2rem, 5.5vw, 72px); line-height: 1.1; font-weight: 700; } /* ── Patička s kontaktem ──────────────────────────────────────────────────── */ /* ZMĚŘENO nad předlohou (`#footer`, okno 1440 px, pruh 1320 px): plocha bílá, výška 398 px značka 210x136 px, horní hrana 60 px pod okrajem telefon, mail 24px/35px, 700, ikona 24 px před textem sítě tři kruhy 49 px, mezera 16 px, na pravé hraně pruhu svisle všechno na střed značky (128,5 px od horní hrany) linka 1px #d9d9d9 přes celý pruh, 257 px od horní hrany pod linkou vystředěný řádek 18 px, 21 px pod ní ŘADA JE FLEXOVÁ, ne Nicepage sled záporných okrajů. Předloha sází telefon na 377 px a e-mail na 710 px zleva, jenže obojí je u každého DJe jinak dlouhé - první delší číslo by se s druhým překrylo. Výsledek na obrazovce je týž: značka vlevo, kontakt uprostřed, sítě na pravé hraně. */ .site--produkce .pr-foot { background: var(--p-plocha); /* Půlka rytmu shora, druhou půlku přidá sekce nad patičkou - dohromady `--p-sec-y` jako každá jiná hranice pruhů. */ padding-block: calc(var(--p-sec-y) / 2) 0; } /* TŘI SLOUPCE, NE PRUŽNÁ ŘADA. Ve flexu stál kontakt hned za značkou, tedy nalevo od středu (naměřeno: telefon začínal na 277 px v pruhu širokém 1320). Předloha ho má uprostřed a vlastník to vytkl. S `1fr auto 1fr` je prostřední sloupec vystředěný v pruhu bez ohledu na to, jak je široká značka a kolik je v řadě sítí - a zůstane vystředěný i u profilu, který jednu z krajních položek nemá (v katalogu jich je bez jediné sítě 51 z 373). */ .site--produkce .pr-foot__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px clamp(1rem, 3vw, 3rem); /* PÁS ZNAČKY TU REZERVOVANOU VÝŠKU NEMÁ, i když ji předloha má (`.u-footer .u-image-1`: 210x136 px, z toho její rytmus 60 / 136 / 61). Zkusil jsem to a JE TO ŠPATNĚ - měření to ukázalo ze dvou stran: 1. Opravovalo by to rozptyl, který v datech není. Nad všemi 374 veřejnými profily má logo 5 profilů a odkazů má 0 až 5, takže se řada sítí vejde vždycky na jeden řádek 49 px. Skutečný rozptyl výšky patičky napříč katalogem je jednotky pixelů, ne desítky; číslo 74 px vzniklo simulací osmi sítí, kterou nemá ani jeden profil. 2. Stálo by to 87 px prázdné bílé plochy na KAŽDÉ stránce KAŽDÉHO webu - obsah pásu měří 49 px. To je přesně to, co vlastník zakázal větou „nesmí být v žádném rozlišení větší prázdná mezera". Předloze těch 136 px vychází z toho, že její značka je skoro čtvercová (313x203 px). Naše bývá široký nápis (202x40), takže se stejné číslo nedá převzít - je to rozměr JEJICH loga, ne rytmus patičky. Táž záměna, kvůli které se v hlavičce zvětšovala vyřezaná postava. `grid-template-columns` musí zůstat v tomhle bloku - sekce 10 kontrolní tabulky hlídá regulárem, že kontakt drží střed pruhu. */ } .site--produkce .pr-foot__brand { justify-self: start; } .site--produkce .pr-foot__contact { justify-self: center; justify-content: center; } .site--produkce .pr-foot__brand { display: inline-flex; color: inherit; text-decoration: none; } /* DVĚ MAXIMA A `auto` U OBOU ROZMĚRŮ, ne pevná výška se `width: auto` - týž důvod jako u loga v liště: `base.css` má `img { max-width: 100% }` a to procento se uvnitř pružného pruhu vyhodnocuje proti krabici, kterou určuje sám obrázek, takže logo spadne do kruhu a prohlížeč mu srazí poměr stran. */ .site--produkce .pr-foot__logo { max-width: 210px; max-height: 136px; width: auto; height: auto; } /* Bez loga zůstává jméno psaným písmem značky - patička nesmí začínat prázdnem. */ .site--produkce .pr-foot__brandtext { font-family: "Beau Rivage", "Segoe Script", cursive; font-size: 2.25rem; line-height: 1.2; font-weight: 700; letter-spacing: 2px; } .site--produkce .pr-foot__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(1.5rem, 3vw, 3rem); } .site--produkce .pr-foot__link { display: inline-flex; align-items: center; gap: .5rem; /* INKOUST Z TOKENU, ne `#111` natvrdo. V tmavém režimu zůstal telefon i e-mail v patičce černý na `#15181c`, tedy 1,06:1 - a s ním ikona, která má `fill="currentColor"`. Naměřeno na všech osmi kombinacích s tmavým režimem. Ve světlém režimu je hodnota táž jako dosud. */ color: var(--p-ink); font-size: 1.5rem; line-height: 1.45; font-weight: 700; text-decoration: none; /* `break-word`, NE `anywhere`. `anywhere` se počítá do minimální šířky obsahu, takže pružná položka smí zhubnout na jeden znak - a e-mail se na telefonu zalomil uprostřed slova („kontakt@example.co / m"), přestože se na řádek vešel celý (naměřeno 270 px v 335px pruhu). `break-word` zalomí až tehdy, když se opravdu nevejde. */ overflow-wrap: break-word; } .site--produkce .pr-foot__link:hover { color: var(--p-modra); } /* `flex: 0 0 auto` je nutné: vložené SVG bez rozměru se vedle dlouhé adresy srazí na proužek - táž past jako u destičky ikony v kontaktu. */ .site--produkce .pr-foot__ico { flex: 0 0 auto; width: 24px; height: 24px; } /* Obálka má poměr 24x16, takže by ji čtvercová krabice svisle roztáhla. */ .site--produkce .pr-foot__ico--mail { height: 16px; } /* Sítě jdou na PRAVOU HRANU pruhu, a `margin-left: auto` to drží i u profilu, který telefon ani e-mail nevyplnil (v katalogu je takových většina). */ /* ŘADA SÍTÍ SE NA ŠIROKÉM OKNĚ NEZALAMUJE. `1fr auto 1fr` dá prostřední stopě její max-content šířku a krajní `1fr` se smrskne až na min-content - a tou je u zalomitelné řady JEDEN kruh. Naměřeno na okně 1000 px: stopa sítí 54 px a tři kruhy pod sebou, takže pás patičky vyskočil ze 49 na 179 px a patička vypadala rozvalená. Pásmo 992-1180 px jsou běžné šířky notebooků, tedy přesně tam, kde to vlastník viděl. S `nowrap` je min-content celá řada, takže se místo ní zúží prostřední stopa a zalomí se KONTAKT - dvouřádkový telefon s e-mailem se čte, svislý sloupec ikon vedle vodorovné značky ne. Pod 992 px se patička skládá pod sebe a zalomení se tam zase povolí, jinak by pět kruhů přeteklo z telefonu. */ .site--produkce .pr-foot__soc { display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end; gap: 16px; margin: 0; padding: 0; list-style: none; justify-self: end; } .site--produkce .pr-foot__soclink { display: block; width: 49px; height: 49px; } .site--produkce .pr-foot__soclink svg { display: block; width: 100%; height: 100%; } /* Barvy kruhů jsou z předlohy; znak uvnitř je bílý, kruh bere `currentColor`, takže je tvar jeden a barva se řídí sítí. */ .site--produkce .pr-foot__soclink--facebook { color: #3b5998; } .site--produkce .pr-foot__soclink--instagram { color: #c536a4; } .site--produkce .pr-foot__soclink--soundcloud { color: #f75219; } /* YouTube a TikTok předloha nemá - jejich odstíny jsou firemní barvy sítí. */ .site--produkce .pr-foot__soclink--youtube { color: #f00; } .site--produkce .pr-foot__soclink--tiktok { color: #111; } /* barva značky, ne inkoust */ /* SPOTIFY MÁ ZTMAVENOU ZELENOU, ne firemní #1db954: bílý znak na ní má 2,59:1, tedy pod prahem 3:1, který WCAG žádá pro netextový obsah. #15803d dá 5,02:1 a odstín zůstane rozpoznatelně „spotifyovský" - kruh je tu podklad pod znakem, ne logo. */ .site--produkce .pr-foot__soclink--spotify { color: #15803d; } /* Deník nevěsty firemní barvu, kterou by šlo změřit, v projektu nemá (cache drží jen text, ne HTML) - růžová z rodiny svatebních webů, 5,87:1. */ .site--produkce .pr-foot__soclink--deniknevesty { color: #c2185b; } /* Vlastní web není značka, takže se barva nevymýšlí - je to akcent šablony. */ /* VÝPLŇ KRUHU, NE BARVA TEXTU. Kruh bere `currentColor` a znak v něm je bílý, takže tenhle `color` je PODKLAD pod bílým znakem - a `--p-modra` je alias na `--p-akcent`, tedy na roli TEXT, kterou tmavý režim schválně přepíná na světlou variantu motivu. Bílý znak na ní měl 1,48 až 2,41:1. Výplňová role se nepřepisuje a drží 5,02 až 15,13:1 v obou režimech. */ .site--produkce .pr-foot__soclink--website { color: var(--p-akcent-fill); } .site--produkce .pr-foot__soclink:hover { opacity: .85; } .site--produkce .pr-foot__soclink:focus-visible { outline: 3px solid var(--p-modra); outline-offset: 3px; } /* Název sítě jen pro odečítač: kruh s obrázkem sám o sobě neřekne, kam vede. */ .site--produkce .pr-foot__socname { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Linka odděluje kontakt DJe od patičky katalogu. Je uvnitř pruhu, takže má TÁŽ krajní body jako obsah nad ní (naměřeno v předloze 1320 px). */ .site--produkce .pr-foot__line { margin-top: var(--p-sec-y); border-top: 1px solid var(--p-line); } /* Na telefonu je pruh 335 px, takže 24px kontakt zabere dva až tři řádky a značka nad ním další. Písmo o stupeň níž udrží patičku na jedné obrazovce; ikona zůstává stejná, jinak by se rozešla s textem. */ @media (max-width: 767px) { .site--produkce .pr-foot__inner { gap: 20px clamp(1rem, 4vw, 2rem); } .site--produkce .pr-foot__link { font-size: 1.25rem; } .site--produkce .pr-foot__brandtext { font-size: 1.875rem; } } /* PATIČKA SE SKLÁDÁ POD SEBE UŽ POD 992 px, ne až pod 768. Tři sloupce drží kontakt PŘESNĚ ve středu jen dokud se značka i řada sítí vejdou do svého podílu volného místa: `1fr` je `minmax(auto, 1fr)`, takže se krajní stopa nesmrskne pod svůj obsah a širší z nich odtlačí střed. Naměřeno v pruhu 742 px: stopa značky 98 px proti 58 px na druhé straně, tedy střed kontaktu o 19 px vpravo. Nad 992 px je pruh dost široký na to, aby k tomu nedošlo (podíl 175 px proti 98 px značky), pod ním je stejně kontakt na dva až tři řádky a sloupec je čitelnější než squeeze. Sítě se na svém řádku vystředí - `margin-left: auto` by je odtlačilo k pravému okraji, tedy jinam než všechno ostatní. */ @media (max-width: 991px) { .site--produkce .pr-foot__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; } .site--produkce .pr-foot__brand, .site--produkce .pr-foot__soc { justify-self: center; } .site--produkce .pr-foot__soc { justify-content: center; flex-wrap: wrap; } .site--produkce .pr-foot__contact { flex-direction: column; align-items: center; } } /* Patička katalogu NAVAZUJE na tu linku, takže nesmí mít vlastní obrys ani jinou plochu - v předloze je pod linkou jediný vystředěný řádek. Odsazení po stranách se počítá STEJNĚ jako u sekcí, jinak by se levá hrana textu ulomila o pár pixelů vedle. */ .site--produkce .site-foot { background: var(--p-plocha); border-top: 0; padding-block: 21px var(--p-sec-y); padding-inline: max(1.25rem, calc((100% - 1320px) / 2)); text-align: center; } .site--produkce .site-foot__inner { max-width: none; } /* ── Pilulky štítků a drobná typografie ───────────────────────────────────── */ .site--produkce .s-tag { border-radius: 50px; padding: .45rem 1rem; font-weight: 600; background: var(--p-svetle); color: var(--p-modra); } /* PROSTRKANÉ VERZÁLKY PATŘÍ POPISKU POLE, NE CELÉMU `