/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved. */ /* Proprietary and confidential. See LICENSE in the project root. */ /* ========================================================================== * Reference (/reference) — pixelová rekonstrukce `_refs/galerie-01.png`. * * Čísla v tomhle souboru jsou ODMĚŘENÁ, ne odhadnutá: * `python tools/images/measure-galerie.py` je vypíše ze souboru návrhu, * `node tools/render/v42-reference.js` je pak ověří proti živému DOM. * Návrh je 1625 px široký, takže „design px" níž = CSS px při šířce okna * 1625. Co je v návrhu vázané na šířku stránky (kontejner, mřížka karet, * fotka v hero), je proto psané ve `vw` s `clamp()`; typografie a poloměry * jsou pevné, aby se drobné popisky (v návrhu 10–14 px) nescvrkly na * užším okně do nečitelna. * * Odměřený rastr: * kontejner x 55 … 1570 (obsah 1515, boční okraj 55) * hero panel y 88 … 383 (horní rohy r = 26) * karty velikostí y 384 … 680 (3 sloupce, mezera 16, r = 24) * detailní skupiny y 733 … 827 (dlaždice 193 × 95, mezera 17, r = 14) * spodní pás y 849 … 946 (pilulka, r = 48) * * Barvy nejsou pevné hexy. Celá zóna visí na dvou odstínech odvozených * z akcentu (`--kp-ref-h` pro zlatou, `--kp-ref-veil-h` pro olivovou clonu * karet), světlost a sytost jsou odměřené z návrhu. Ve výchozím stavu z toho * vyjde přesně zlatá z předlohy, a posuvník odstínu v panelu Vzhled přebarví * stránku celou — včetně noci. Sklo bere `--kp-glass-*`, pohyb `[data-motion]`, * rozostření `[data-effects]`; pravidlo „Každá sekce musí ctít motiv" * (CLAUDE.md §6) je tím splněné i pro tuhle 1:1 zónu. * ========================================================================== */ /* Tokeny drží OBA selektory. Hlavička je sourozenec `
`, tedy stojí mimo `.kp-ref` — a `var(--kp-ref-h)`, které tam nedosáhne, není „černá", ale NEPLATNÁ hodnota: prohlížeč celou deklaraci zahodí a zlatá pilulka zůstane bez pozadí. (Chyceno kontrolou „CTA pilulka je zlatá".) */ .kp-ref, .kp-site--ref { /* -- odstín ---------------------------------------------------------- Celá zóna visí na JEDNOM odstínu, a ten jde z panelu Vzhled. Zlatá z návrhu má změřeně H 73–83 (`#C2924F` → 73,9; `#E1B870` → 80,6) a značková žloutková na webu běží na `calc(var(--accent-h) − 61)`, tedy při výchozím zeleném akcentu na 80. Sedí to na sebe, takže se stránka nemusí rozhodovat mezi „1:1 s návrhem" a „reaguje na tweaks" — posuvník odstínu ji přebarví celou, a ve výchozím stavu je zlatá přesně taková, jaká je v předloze. Světlost i sytost jsou odměřené. */ --kp-ref-h: calc(var(--accent-h, 141) - 61); /* Olivová clona na kartách je jiný odstín než zlatá — změřeně H ≈ 113 (#363B1D), tedy blíž značkové zelené. Odvozuje se proto od akcentu vlastním posunem, aby s ním putovala taky. */ --kp-ref-veil-h: calc(var(--accent-h, 141) - 28); /* -- plochy ---------------------------------------------------------- */ --kp-ref-page: oklch(0.993 0.003 var(--kp-ref-h)); --kp-ref-cream: oklch(0.949 0.014 var(--kp-ref-h)); --kp-ref-cream-2: oklch(0.932 0.017 var(--kp-ref-h)); --kp-ref-cream-3: oklch(0.902 0.021 var(--kp-ref-h)); --kp-ref-panel: oklch(0.962 0.012 var(--kp-ref-h)); /* -- text ------------------------------------------------------------ */ --kp-ref-ink: oklch(0.228 0.017 var(--kp-ref-h)); --kp-ref-ink-soft: oklch(0.512 0.014 var(--kp-ref-h)); --kp-ref-ink-faint: oklch(0.610 0.013 var(--kp-ref-h)); /* -- zlatá ----------------------------------------------------------- */ --kp-ref-gold: oklch(0.692 0.103 var(--kp-ref-h)); --kp-ref-gold-2: oklch(0.727 0.092 var(--kp-ref-h)); --kp-ref-gold-fill: oklch(0.804 0.102 var(--kp-ref-h)); --kp-ref-gold-line: oklch(0.727 0.092 var(--kp-ref-h) / 0.42); --kp-ref-gold-line-soft: oklch(0.727 0.092 var(--kp-ref-h) / 0.22); /* Obrys štítku na kartě — v návrhu sotva znatelný, proto vlastní token. */ --kp-ref-gold-hairline: oklch(0.828 0.085 var(--kp-ref-h) / 0.34); /* -- sklo ------------------------------------------------------------ Z Forge tokenů, ne z pevných čísel: posuvník „Sklo" v panelu Vzhled tak řídí i patičku karet a rozostření pod textem. Zápornou hodnotu `--kp-glass-*` na webu nikdo nenastaví, ale `clamp` drží rozostření v rozumném rozsahu i při krajních polohách posuvníku. */ --kp-ref-frost: clamp(4px, calc(var(--kp-glass-blur, 24px) * 0.42), 16px); --kp-ref-glass-fill: rgba(255, 250, 238, calc(0.06 + 0.09 * var(--kp-glass-strength, 0.6))); --kp-ref-glass-edge: rgba(255, 250, 238, calc(0.10 + 0.14 * var(--kp-glass-strength, 0.6))); /* -- tmavé sklo karet ------------------------------------------------ */ --kp-ref-glass-ink: #FFFCF4; --kp-ref-glass-ink-soft: rgba(255, 252, 244, 0.78); /* -- rastr ----------------------------------------------------------- */ --kp-ref-pad: clamp(1.25rem, 3.385vw, 3.4375rem); /* 55 px @ 1625 */ --kp-ref-max: 1625px; --kp-ref-gap: clamp(0.7rem, 0.985vw, 1rem); /* 16 px @ 1625 */ } /* Vlastní kontext vrstvení pro celou zónu — pořadí níž na něm stojí. `overflow: hidden` sem patří místo na hero: pírka i fotka přesahují přes hranice sekcí a bez oříznutí ZDE by stránka dostala vodorovný posuvník. Na `.kp-site--ref` nic z toho nesmí — obalilo by to i hlavičku. */ .kp-ref { position: relative; z-index: 0; overflow: hidden; /* Základ je krémová plocha stránky; SVĚTLEJŠÍ vrchol dodává `::before` jako jeden dlouhý přechod přes celý horní díl stránky. Dřív měla `.kp-ref` světlý tón (0.993) a sekce pod ní vlastní plochu (0.932). Rozdíl 6 % světlosti na ostré vodorovné hraně je přesně to, co bylo hlášeno jako „moc silný přechod, není to pozvolné". Sekce teď vlastní plochu nemají a šev nemá kde vzniknout. */ background: var(--kp-ref-cream-2); color: var(--kp-ref-ink); } /* Světlý vrchol stránky. Výška je v pixelech, ne v procentech: přechod má doznít někde pod kartami velikostí, a to je vzdálenost od HORNÍ hrany — procenta by se s délkou stránky protahovala a při každém přidání realizace by přechod skončil jinde. */ .kp-ref::before { content: ""; position: absolute; inset: 0 0 auto; height: 1180px; z-index: 0; pointer-events: none; background: linear-gradient(180deg in oklab, var(--kp-ref-page) 0%, color-mix(in oklab, var(--kp-ref-page) 72%, var(--kp-ref-cream-2)) 34%, color-mix(in oklab, var(--kp-ref-page) 30%, var(--kp-ref-cream-2)) 68%, transparent 100%); } /* -------------------------------------------------------------------------- * Pořadí vrstev v zóně * --------------------------------------------------------------------- * Fotka musí ležet NAD krémovými podklady sekcí (aby prosvítala vedle * karet a pod nimi doznívala) a zároveň POD jejich obsahem. Řeší to * malovací pořadí CSS, ne trik: * * −1 `.kp-ref-hero::before` krémový panel hero pásu * 0 pírka; podklady sekcí (nepozicované → malují se před kladnými z) * 1 `.kp-ref__photo` fotka s dolním rozplynutím * 2 `.kp-ref-hero::after` krémový závoj přes levou část fotky * 2 `.kp-ref-shell` karty, pás skupin, pilulka * 3 `.kp-ref-hero__inner` text hero * * Sekce samotné proto NESMĚJÍ dostat `z-index` — vytvořily by vlastní * kontext a jejich obsah by se pod fotku už nedostal ven. * -------------------------------------------------------------------------- */ /* Fotka sedí PŘESNĚ tam, kde je na domovské stránce: přes celou šířku, od horní hrany, se stejnou výškou i výřezem. Návštěvník, který přijde z domů, pak vidí tentýž snímek na tomtéž místě a stránka se pod ním jen vymění — dřív byla vpravo na 62 % a obraz při přechodu uskočil. Sdílené jméno pro View Transitions je níž. */ .kp-ref__photo { position: absolute; top: 0; right: 0; z-index: 1; width: 100%; /* PŘESNĚ táž rovnice jako `--hero-h` na domovské stránce. Jakákoli jiná hodnota znamená, že se výřez liší a obraz při přechodu uskočí — a o to tu jde. Rozplynutí dolů je pak v PIXELECH (níž), takže si stránka drží své místo, kde se fotka rozpouští, nezávisle na výšce okna. */ height: max(620px, 100dvh); pointer-events: none; /* Maska ve DVOU osách, protně se (`intersect`): • svisle — dolní dozvuk za kartami, tím se ruší vodorovný řez; • vodorovně — měkká levá hrana. Ta musí být na masce, ne jen na závoji `.kp-ref-hero::after`: závoj začíná až pod hlavičkou (y = 88) a nad ním by fotka končila svislým řezem uprostřed lišty. Závoj přesto zůstává — maska jen ubírá krytí, takže světlá obloha zůstane světlá a popisek čtvrtého odznaku by na ní zmizel. Maska řeší TVAR, závoj ČITELNOST. */ /* Zastávky jsou v PIXELECH, ale zastropované procenty výšky prvku. Prvek je vysoký `max(620px, 100dvh)`, takže na okně nižším než 745 px maska nestihla dojít na nulu a fotka se uřízla vlastní spodní hranou — při krytí kolem 9 % je to slabá, ale přes celou šířku vedená čára. `min()` znamená: na vysokém okně platí pixely (doznění na stále stejném místě, jak bylo zamýšleno), na nízkém se stlačí tak, aby skončilo přesně na okraji prvku. Na 745 px se obě hodnoty potkávají, takže tam nevzniká zlom. /* DVĚ masky, které se protnou: • svisle — fotka doznívá dolů a pod kartami už je čistá plocha; • vodorovně — VLEVO přechází do plochy stránky. Vodorovná maska tu chvíli nebyla a byl to přesně ten „škaredý pruh": fotka končila u levého okraje naplno, takže vedle krémového hero svítil kus louky. Přechod je dlouhý (0 → 46 %), aby vlevo byla táž plocha jako v sekci nad kartami a oko nenašlo hranu. Geometrie prvku se tím nemění — maska ubírá jen krytí — takže fotka pořád leží tam, kde na domovské stránce, a přechod mezi stránkami nikam neskáče. */ -webkit-mask-image: linear-gradient(180deg, #000 0px, #000 min(400px, 54%), rgba(0, 0, 0, 0.55) min(560px, 75%), rgba(0, 0, 0, 0.16) min(665px, 89%), transparent min(745px, 100%)), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.22) 14%, rgba(0, 0, 0, 0.72) 32%, #000 46%); mask-image: linear-gradient(180deg, #000 0px, #000 min(400px, 54%), rgba(0, 0, 0, 0.55) min(560px, 75%), rgba(0, 0, 0, 0.16) min(665px, 89%), transparent min(745px, 100%)), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.22) 14%, rgba(0, 0, 0, 0.72) 32%, #000 46%); -webkit-mask-composite: source-in; mask-composite: intersect; } /* ŽÁDNÉ `view-transition-name` NA FOTCE — a stojí za to vědět proč. * * Fotka tu dřív nesla `kp-heroshot` jako sdílený prvek s domovskou stránkou. * Domovský protějšek ale jméno ztratil ve chvíli, kdy se přechod mezi * stránkami změnil z prolnutí na odhalení maskou (kp-view-transitions.css, * „SDÍLENÉ PRVKY TU UŽ NEJSOU"). Zůstala tedy polovina páru — a osamocené * jméno se nemá s čím spárovat, takže z něj prohlížeč udělá vrstvu, která * má jen `new`. * * A ta vrstva se maluje NAD kořenem: uvnitř přechodu neplatí `z-index` ze * stránky, skupiny jdou v pořadí zachycení. Fotka proto po celou dobu * přechodu ležela přes karty velikostí — na záznamu klienta jsou karty * průsvitné a prosvítá jimi kurník ze zóny nad nimi — a v okamžiku, kdy * přechod skončil a vrstva zmizela, karty naskočily. * * Naměřeno (`/cenik → /reference`, rozdíl proti předchozímu snímku v pásu * karet): v klidu 0–2, na posledním snímku 38. V liště nabídky totéž, jen * slabší, protože ta je průsvitná a fotka pod ní poskočila taky. Přesně to * klient popisuje jako „karty probliknou" a „pozadí menu problikne". * * Že fotka při navigaci nepřeskočí, drží něco lepšího než sdílené jméno: * `.kp-ref__photo` a `.kp-hero__media` nesou TÝŽ soubor ve stejném výřezu * i geometrii, takže je na obou stranách masky pixel po pixelu totéž. * Sdílený prvek by neměl co přenášet. */ .kp-ref__photo picture, .kp-ref__photo img { display: block; width: 100%; height: 100%; object-fit: cover; /* Týž výřez jako na domovské stránce (`.kp-hero__media img`), aby se obraz při přechodu mezi stránkami nepohnul. */ object-position: 70% 100%; } /* Táž fotka jako na domovské stránce musí být i STEJNĚ VELKÁ a stejně barevná. Rámeček a `object-position` seděly už dřív, jenže domovská `` nese navíc `scale` (základ Ken Burns) — naměřeno na 1440 × 900: domů 1527 × 955 na (−44, −55), reference 1440 × 900 na (0, 0), tedy 6 % rozdílu ve výřezu. Dosycení bylo slabší (1,04 / 1,02 proti 1,12 / 1,05), takže se lišila i barva. Ken Burns se sem NEPŘIDÁVÁ. Přiblížení domovské fotky se v čase mění mezi `--kp-hero-zoom-base` a `--hero-zoom-max` a fáze animace je u každého načtení stránky jiná, takže „stejná animace" by shodu nezaručila o nic líp než pevné číslo — jen by rozhýbala pozadí, které tady drží pod sebou text i karty. */ .kp-ref__photo img { scale: var(--kp-hero-zoom-base, 1.06); /* Od SPODNÍ hrany, stejně jako na domovské stránce (`kp-hero.css`, tam kvůli rezervě pod hejnem). Se středem zůstane výřez svisle posunutý o polovinu přesahu — naměřeno 27 px z 900, tedy fotka o kus výš než na domů. Rozdíl je vidět hlavně při prokliku, protože přechod obě fotky sdílí jako jeden prvek. */ transform-origin: 50% 100%; filter: saturate(1.12) contrast(1.05); } /* Vnitřní obal sekcí — jeden rastr pro karty, pás skupin i spodní pilulku. `z-index: 2` ho zvedá nad fotku zóny; podklad sekce kolem něj zůstává pod ní, takže fotka mezi kartami a vedle nich prosvítá jako v návrhu. */ /* Táž rovnice jako `.kp-section` v kp-site.css. Vlastní `--kp-ref-max` (1625 px) a `--kp-ref-pad` tu byly z návrhu galerie a znamenaly, že obsah referencí stál na jiné svislici než zbytek webu i než hlavička nad ním. */ .kp-ref-shell { position: relative; z-index: 2; max-width: calc(var(--kp-page-max, 1560px) + 2 * var(--kp-gutter, 24px)); margin-inline: auto; padding-inline: var(--kp-gutter, 24px); } /* Šipka „dovnitř" ikony: v návrhu je delší a tenčí než výchozí Lucide tvar. */ .kp-refico { display: block; } /* ========================================================================== * Hlavička na téhle stránce * --------------------------------------------------------------------- * ŽÁDNÝ vlastní skin. Do v95 tu byla celá druhá hlavička: jiná šířka * (1625 px proti rovnici zbytku webu), jiné odsazení, patková značka, * zlaté odkazy i zlatá pilulka místo zelené. Vzniklo to, když měl návrh * galerie vlastní krémové hero — jenže od v86 nese patkovou značku celý * web a od v94 je pod hlavičkou tatáž hero fotka jako na domovské * stránce. Druhá hlavička už tedy nic neřešila, jen se rozcházela. * * Zůstává jediné: horní pruh se posouvá pod hlavičku (`padding-top: 0`), * protože fotka zóny začíná u horní hrany dokumentu. * ========================================================================== */ .kp-site--ref .kp-main { padding-top: 0; } /* Náznak pod hlavičkou — TÝŽ prvek, jaký má hero na domovské stránce (`rgba(20,16,10,.12)` do 11 %), jen o něco silnější: fotka je tu u horní hrany světlejší (obloha), takže bílé popisky měly kontrast 3,6 proti 5,1 na domovské. Není to skin hlavičky — hlavička je všude stejná; tohle je podklad ZÓNY, přesně jako u hero. */ .kp-ref__photo::after { content: ""; position: absolute; inset: 0 0 auto; height: 26%; pointer-events: none; background: linear-gradient(180deg, rgba(20, 16, 10, 0.34) 0%, rgba(20, 16, 10, 0.14) 42%, rgba(20, 16, 10, 0) 100%); } /* ========================================================================== * Hero * ========================================================================== */ /* Hero NEMÁ `isolation` ani `overflow` — obojí by uzavřelo vrstvení dovnitř sekce a fotka zóny by se pod ni nedostala. Kontext i oříznutí drží `.kp-ref`. */ .kp-ref-hero { position: relative; padding-top: 8rem; /* hlavička 88 + 40 → horní dotaz eyebrow na y=128 */ padding-bottom: 2.75rem; /* spodek hero panelu na y=383, karty začínají na 384 */ } /* Krémový panel začíná AŽ POD hlavičkou (y = 88) a má zaoblené horní rohy — nad ním je stránka bílá, což je v návrhu jediný pruh, kde bílá je. */ .kp-ref-hero::before { content: ""; position: absolute; /* Odshora BEZ odsazení a bez zaoblení. Dřív tu bylo `inset: 88px 0 0` se zaoblenými horními rohy, tedy panel začínající pod hlavičkou — a mezi spodkem lišty (y = 74) a začátkem panelu (y = 88) zůstal pruh o jiném tónu. Naměřeno: o 12 jednotek jasu světlejší než plocha nad ním i pod ním, skok 11,9 na hraně. Vlevo, kde je klidná plocha, to čte jako vodorovná čára přes celou šířku stránky. Dolů panel PŘESAHUJE pod hero a mizí maskou. Dřív končil přesně tam, kde končí hero (y = 383), takže se na téže souřadnici potkaly dva různé krémy — skok 8,7 ve světlém a 22,6 v tmavém motivu. Přesah 220 px s dozvukem přes posledních 300 px znamená, že plocha nemá kde skončit: než maska dojde na nulu, je pod ní přesně týž tón. */ inset: 0 0 -220px; z-index: -1; mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 300px), transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 300px), transparent 100%); /* Přechod končí PŘESNĚ na `--kp-ref-cream-2`, protože tutéž barvu má plocha pod ním. Když tu dřív dobíhal na `cream-3` a sekce s kartami začínala `cream-2`, vznikl přes celou šířku vodorovný zlom — v návrhu je pozadí jedno, čisté, bez skoku. */ background: radial-gradient(90% 120% at 8% 0%, oklch(0.972 0.009 var(--kp-ref-h)) 0%, oklch(0.972 0.009 var(--kp-ref-h) / 0) 58%), linear-gradient(150deg, var(--kp-ref-cream) 0%, var(--kp-ref-cream-2) 62%, var(--kp-ref-cream-2) 100%); } /* Krémový závoj PŘES fotku, ne jen měkčí maska pod ní. Samotná maska nestačí: fotka pak prosvítá pod čtvrtým odznakem („Děláno s láskou") a popisek na ní zmizí. V návrhu levá polovina fotky do krému doslova zapadne — proto se přes ni přetáhne táž barva, jakou má panel, a teprve za textovým sloupcem se otevře. Sahá jen po spodní hranu hero pásu: níž už fotka doznívá vlastní maskou a vedle karet má zůstat vidět. */ .kp-ref-hero::after { content: ""; position: absolute; /* Táž geometrie jako panel výš, a ze stejných důvodů. Navíc: závoj začínající na 88 nechával nad sebou kus fotky u levého okraje, který se pod poloprůhlednou lištou četl jako tmavý teplý pruh. Od nuly se fotka noří do krému plynule celou výškou. */ inset: 0 0 -220px; z-index: 2; pointer-events: none; mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 300px), transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 300px), transparent 100%); background: /* Teplý opar tam, kde se fotka noří do krému. V návrhu je ten pruh znatelně zlatější než okolní panel (#EFE2D2 proti #F5EDE3) — bez něj působí přechod studeně, i když se krémy shodují. */ linear-gradient(90deg, transparent 20%, rgba(232, 204, 158, 0.3) 42%, rgba(236, 212, 170, 0.16) 58%, transparent 72%), linear-gradient(90deg, var(--kp-ref-cream) 0%, var(--kp-ref-cream) 26%, color-mix(in oklab, var(--kp-ref-cream) 88%, transparent) 36%, color-mix(in oklab, var(--kp-ref-cream) 62%, transparent) 46%, color-mix(in oklab, var(--kp-ref-cream) 26%, transparent) 56%, transparent 66%); } /* Pírka v hero — dekorace, ne obsah: leží pod textem a mají tak nízké krytí, že nesnižují kontrast popisků nad nimi. Vrstva 0: nad krémovým panelem (−1), pod fotkou (1) — obojí jsou vlevo, kde fotka stejně není. */ .kp-ref-hero__quill { position: absolute; z-index: 0; color: oklch(0.730 0.075 var(--kp-ref-h)); pointer-events: none; } .kp-ref-hero__quill svg { width: 100%; height: 100%; } .kp-ref-hero__quill--edge { left: -1.6rem; top: 7rem; width: 5.5rem; height: 15rem; opacity: 0.16; transform: rotate(-12deg); } .kp-ref-hero__quill--behind { left: 38%; top: 4.5rem; width: 8rem; height: 20rem; opacity: 0.1; transform: rotate(14deg); } /* Text má vlastní, VĚTŠÍ odsazení než kontejner karet (v návrhu 80 px proti 55 px) — panel je full-bleed a jeho obsah drží vlastní okraj. */ .kp-ref-hero__inner { position: relative; z-index: 3; max-width: var(--kp-ref-max); margin-inline: auto; padding-inline: calc(var(--kp-ref-pad) + 1.5625rem); } .kp-ref-eyebrow { margin: 0 0 0.5rem; font-family: var(--kp-font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kp-ref-gold-2); } /* Playfair Display — patkový nadpis se na webu natahuje jednou (App.razor) a používá se jen tady. Selektor je schválně `.kp-ref-hero h1.…`, ne holá třída: `.kp-site h1` v kp-site.css má specificitu (0,1,1), o jednu vyšší než holá třída, a v tmavém motivu barvou přebilo nadpis. Ověřeno měřením computed stylu na živé stránce. */ .kp-ref-hero h1.kp-ref-hero__title { margin: 0 0 0.55rem; font-family: var(--kp-font-head); font-weight: 400; font-size: clamp(2.75rem, 4.68vw, 4.75rem); /* 76 px @ 1625 */ line-height: 1.0; /* Prostrkání je dopočítané, ne zvolené: verzálková výška nadpisu je v návrhu 54 px (→ 76 px Playfairu), ale celý řádek „Galerie realizací" měří jen 516 px, kdežto Playfair při 76 px vysází 550. Předloha je tedy o něco užší Didone; nejbližší, co máme staženo, je Playfair, a rozdíl dorovná záporný tracking — výška i délka řádku pak sedí obojí. */ letter-spacing: -0.028em; color: var(--kp-ref-ink); } .kp-ref-hero__lead { max-width: 25rem; margin: 0 0 1.85rem; font-family: var(--kp-font-body); font-size: 0.9375rem; line-height: 1.42; color: var(--kp-ref-ink-soft); } /* ---- odznaky důvěry ------------------------------------------------------ * * PROČ MAJÍ VLASTNÍ DESKU. Do 2026-08-28 ležela ta čtveřice přímo na hero * fotce a spoléhala na to, že se fotka vlevo rozpustí do krému dřív, než * k ní text dojde. Nerozpustila. Odměřeno z pixelů (`tools/render/`): * * tmavý motiv, 1440 px 1. odznak 4,4:1 2. 3,3:1 3. 1,5:1 4. 1,3:1 * světlý motiv, 1440 px všechny čtyři 2,4–2,8:1 * * Norma pro drobný text je 4,5:1. Čtvrtý popisek tedy nebyl „hůř čitelný", * byl NEČITELNÝ — a ve světlém motivu byly pod normou všechny, jen to při * krémovém pozadí nikoho netrklo. * * Deska ten problém neřeší barvou textu, ale tím, že POD textem přestane * být fotka: matné sklo si vezme, co je pod ním, rozostří to a stáhne * k barvě motivu, takže je pozadí předvídatelné bez ohledu na to, kde * zrovna fotka svítí. Zároveň z rozsypané čtveřice udělá JEDEN předmět, * což je ta prémiovost, o kterou šlo. * * Šířka `max-width` zůstává: řada se nesmí roztáhnout přes celou stránku, * jinak se z ní stane lišta a přestane se číst jako součást hero textu. * ------------------------------------------------------------------------ */ .kp-ref-badges { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; /* 47rem bylo odměřeno pro drobnější písmo a pro řadu BEZ desky. Po zvětšení podtitulků na čitelnou velikost se do té šířky čtyři odznaky nevešly a řada se lámala na dva řádky. Deska navíc dovoluje být širší: dřív se musela vejít do krémové části, aby text neskončil na fotce — teď má vlastní podklad, takže na fotce ležet SMÍ. */ max-width: min(100%, 54rem); margin: 0; padding: 0.55rem 0.35rem; list-style: none; border-radius: 16px; border: 1px solid var(--kp-ref-gold-line); background: color-mix(in oklab, var(--kp-ref-cream-2) 78%, transparent); backdrop-filter: blur(var(--kp-ref-frost, 10px)) saturate(1.08); -webkit-backdrop-filter: blur(var(--kp-ref-frost, 10px)) saturate(1.08); box-shadow: 0 1px 0 color-mix(in oklab, #FFFFFF 30%, transparent) inset, 0 10px 30px rgba(46, 34, 12, 0.14); } [data-theme="dark"] .kp-ref-badges { background: color-mix(in oklab, var(--kp-ref-cream-2) 82%, transparent); box-shadow: 0 1px 0 rgba(255, 250, 238, 0.07) inset, 0 12px 34px rgba(0, 0, 0, 0.38); } .kp-ref-badge { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.95rem; border-left: 1px solid var(--kp-ref-gold-line-soft); } .kp-ref-badge:first-child { border-left: 0; } .kp-ref-badge__ico { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 1px solid var(--kp-ref-gold-line); background: color-mix(in oklab, var(--kp-ref-gold) 9%, transparent); color: var(--kp-ref-gold); } /* Spodní pás má ikonu holou, bez kroužku — jediný rozdíl proti hero. */ .kp-ref-badge--bare .kp-ref-badge__ico { width: auto; height: auto; border: 0; border-radius: 0; background: none; } .kp-ref-badge__text { min-width: 0; } .kp-ref-badge__text b { display: block; font-family: var(--kp-font-body); font-weight: 700; font-size: 0.78rem; line-height: 1.25; white-space: nowrap; color: var(--kp-ref-ink); } /* Barva se ODVOZUJE od inkoustu, nebere se hotový „tlumený" token. `--kp-ref-ink-faint` (původní) dával na desce 2,4:1, `--kp-ref-ink-soft` 3,2:1 — obojí pod normou 4,5:1 pro drobný text, jen to na krémovém pozadí nikoho netrklo. Osmaosmdesátiprocentní příměs inkoustu drží podtitul zřetelně tišší než tučný nadpis a přitom čitelný; a protože se míchá s plochou panelu, funguje ve světlém i tmavém motivu jedním zápisem. */ .kp-ref-badge__text > span { display: block; font-size: 0.72rem; line-height: 1.35; margin-top: 0.1rem; white-space: nowrap; color: color-mix(in oklab, var(--kp-ref-ink) 88%, var(--kp-ref-cream-2)); } /* Na úzkém displeji se čtveřice láme na dva řádky. Svislý oddělovač by pak visel uprostřed prázdna u prvního odznaku druhého řádku, takže se u sudých položkách ruší a přibude vodorovný. */ @media (max-width: 46rem) { .kp-ref-badges { padding: 0.45rem 0.25rem; } .kp-ref-badge { padding: 0.42rem 0.7rem; flex: 1 1 45%; } .kp-ref-badge:nth-child(odd) { border-left: 0; } .kp-ref-badge:nth-child(n + 3) { border-top: 1px solid var(--kp-ref-gold-line-soft); } } /* Spodní pás důvěry stojí na vlastní krémové pilulce, takže vlastní desku nechce — jinak by vznikla deska v desce. */ .kp-ref-trust__items { padding: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* ========================================================================== * Tři karty velikostí * ========================================================================== */ /* Bez vlastní plochy: pozadí drží `.kp-ref` jako JEDEN přechod přes celý horní díl stránky (viz komentář tam). Každá plocha navíc by na svém okraji udělala šev. */ .kp-ref-sizes-section { background: transparent; padding-block: 0; } .kp-ref-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kp-ref-gap); } .kp-ref-size { position: relative; display: block; /* Je to