/* ══════════════════════════════════════════════════════════════════════════ Zenturi - Textová podstránka (Figma „Section / Longform / Left" 795:38953) Načítava sa LEN na stránkach so šablónou `template-textova-podstranka.php` (podmienený enqueue v inc/enqueue.php, rovnaká prax ako `case-studies.css`). Odôvodnenie „core bloky namiesto bloku zenturi/longform" je v hlavičke šablóny. REUSE CHECK (povinný pred písaním nového CSS): téma má `.zn-prose` (components.css, používa ho single.php pre články). NEPOUŽITÝ zámerne - jeho hodnoty sa od tohto Figma nodu líšia takmer vo všetkom: 18/1.75 vs 16/1.5, `--color-text-muted` vs #000000, h2 = 32 vs 40, rytmus v `em` vs pevných 24. Naskladať to na `.zn-prose` by znamenalo prepísať skoro každý riadok, čo je horšie než vlastný scope. Čo sa PREBERÁ, je konvencia zápisu: rovnaké odrážky/číslovanie, rovnaké `padding-inline-start: 1.5em`, rovnaký štýl odkazov (primary + podčiarknutie s `text-underline-offset: 3px`), nech dokument a článok nevyzerajú ako dva rôzne weby. ⚠️ FARBA TEXTU JE #000000 (Figma „Color Scheme 1/Text"), NIE #023047 („Scheme A/Text"). Sú to dve rôzne čierne, over pred zmenou (CLAUDE.md). MOBIL: Figma frame pre túto podstránku NEDODANÝ - vypýtaný od Jána. Hodnoty v @media sú konvencia ostatných blokov, zdroj je pri každom pravidle. ══════════════════════════════════════════════════════════════════════════ */ /* Typografia dokumentu sedí na `.zn-doc` a DEDÍ SA - zámerne, nie cez `.zn-doc > *`. Potomkovský selektor s `:not()` má špecificitu (0,2,0) a prebil by `.zn-doc h2` (0,1,1), takže by nadpisy zostali 16px (stalo sa pri prvom pokuse). Dedenie špecificitu nemá, takže elementové pravidlá nižšie vyhrávajú. Hero to neovplyvní - `.zn-htx__heading` si font aj farbu nastavuje sám. */ .zn-doc { background: var(--color-bg); /* Scheme A/Background Light #ffffff */ padding-block-end: var(--space-24); /* Section Padding/section-large 112 */ font-family: var(--font-display); font-size: var(--text-base); /* Size/Regular 16 */ line-height: 1.5; color: var(--color-black); /* Color Scheme 1/Text #000000 */ } /* Textový stĺpec = KAŽDÝ top-level CORE blok; `zenturi/*` bloky sú SEKCIE cez celú šírku. Figma: kontajner „Max Width/max-width-large" 768 vo vnútri sekcie s px = 140 („Section Padding/section-huge"). Pri 1440 je 768 užšie než 1440 − 2×140, takže šírku určuje 768; pod 1048px začne rozhodovať tých 140 z každej strany. Zápis cez `min()` drží oboje naraz bez media query. Výnimka je zapísaná ako `[class*="wp-block-zenturi-"]`, teda na CELÚ rodinu, nie na konkrétny blok: pôvodné `.wp-block-zenturi-hero-text` platilo, kým šablónu používali len právne podstránky. Integrácie (39) majú hero `zenturi/hero-simple` a ten by sa stĺpcom zúžil na 768 - vlastné pozadie, vlnka aj `padding-inline` sekcie by sa rozpadli. Špecificita ostáva rovnaká ako predtým: `[class*=…]` aj `.trieda` sú (0,1,0), takže pravidlá pre `.zn-doc h2` a spol. nižšie sa nemenia (pozn. o dedení vyššie stále platí). Právne podstránky (118/119/120) obsahujú z rodiny `zenturi/*` len `hero-text`, takže sa pre ne nič nemení - overené pixel diffom pri tejto zmene. */ .zn-doc > :not([class*="wp-block-zenturi-"]) { width: min(768px, 100% - 280px); /* 280 = 2 × 140, token pre 140 v téme nie je */ margin-inline: auto; } /* Zenturi sekcie ostávajú cez celú šírku - majú vlastné pozadie aj `padding-inline`. */ .zn-doc > [class*="wp-block-zenturi-"] { width: auto; margin-inline: 0; } /* Horný odstup prvého textového bloku = 40 = súčet dvoch Figma hodnôt, ktoré sa v jej box modeli NEZLIEVAJÚ: `pt` sekcie 16 („Div Padding/div-padding-xsmall") + `py` obalu titulku 24 (795:38957). V CSS by sa ako dva susedné marginy zliali na 24, preto je to jedno číslo. Nedáva sa ako `padding-block-start` na `.zn-doc`, lebo ten by odsunul aj hero a nad jeho gradientom by vznikol biely pruh. Druhý selektor pokrýva stránku bez hera (napr. neskôr 126 „Vzor dokumentu"). Špecificita (0,2,0) zámerne prebíja `margin-block` na `.zn-doc h2` nižšie. */ .zn-doc > [class*="wp-block-zenturi-"] + * { margin-block-start: 40px; } .zn-doc > :first-child:not([class*="wp-block-zenturi-"]) { margin-block-start: 40px; } /* ══ VARIANT „– karta" (šablóna template-textova-podstranka-karta.php) ══════ Figma „Rich Text" 767:37573 (Integrácie): node má VLASTNÉ `bg: white`, `p: div-padding-small 24` a `radius: Radius/base 16`, a leží na sekcii `bg-medium` #ecf2f4. Text v ňom má preto 720 = 768 − 2×24. Právne podstránky používajú ten istý komponent v skomponovanej podobe (795:38956) - 768 bez paddingu na bielej - preto variant, nie prepis. Kartu tvorí `core/group` v obsahu, NIE dopočítané pozadia jednotlivých blokov: Figma je to jeden kontajner a group je jeho presný náprotivok. Navyše sa tým padding 24 rieši raz, a nie ako „prvý blok má pt, posledný pb" - a hlavne sa marginy vnútorných blokov o padding NEZLIEVAJÚ, takže rytmus vychádza sám: nad h2 je 24 (jeho margin) + 24 (padding karty) = 48 ako vo Figme, pod posledným obrázkom 48 + 24 = 72. */ .zn-doc--card { background: var(--color-bg-medium); } /* Scheme A/Background Medium #ecf2f4 */ .zn-doc--card > .wp-block-group { box-sizing: border-box; padding: var(--space-6); /* Div Padding/div-padding-small 24 */ background: var(--color-white); /* Scheme A/Foreground #ffffff */ border-radius: var(--radius-base); /* Radius/base 16 */ } /* Odsadenia sekcie okolo karty. Zdroj je SKOMPONOVANÝ frame stránky `708:30663 „Integrácie-detail"`, nie samostatný node 767:37573: sekcia „Section / Longform / Left" 767:37570 y 627,7146 výška 1698,3043 Container 767:37571 y 48 výška 1538,3043 ⇒ nad kartou 48 („Section Padding/section-small") ⇒ pod kartou 1698,3043 − (48 + 1538,3043) = 112 („Section Padding/padding-section-large") Vlnka `1201:107577` má y = 2326,019 = presne koniec sekcie, takže tých 112 patrí NAD vlnku - preto `margin` na karte a nie `padding-block-end` na `.zn-doc` (to by pruh dalo POD vlnku, medzi ňu a pätičku). Farba medzery = pozadie `.zn-doc--card`, teda `bg-medium` - rovnaké ako jamky vlnky (`--navy-on-medium`) aj ako sekcia nad kartou. Špecificita (0,3,0) je zámerná: `.zn-doc > [class*="wp-block-zenturi-"] + *` je (0,2,0) a dávala by karte 40. Pri zhodnej špecificite by rozhodovalo poradie pravidiel v súbore, čo je presne to, čomu sa tu vyhýbame. */ .zn-doc.zn-doc--card > .wp-block-group { margin-block: 48px 112px; } /* Vnútro karty nesmie zdediť stĺpec - `.zn-doc > :not(…)` je detský selektor, takže sa na vnorené bloky nevzťahuje; toto je len poistka proti core `is-layout-constrained`, ktorý by deti zúžil na `contentSize` a vycentroval. */ .zn-doc--card > .wp-block-group > * { width: auto; margin-inline: 0; max-width: none; } /* Prvý blok v karte si MUSÍ vypýtať svoj horný margin späť: block-library má pravidlo `:where(.wp-block-group) > :first-child { margin-block-start: 0 }`, ktoré ho vynuluje. Figma chce nad nadpisom 48 = `p: 24` karty + `pt: 24` obalu titulku (767:37574), takže bez tohto riadku chýba práve tých 24. Namerané, v návrhu to je sotva vidno. */ .zn-doc--card > .wp-block-group > :first-child { margin-block-start: var(--space-6); } /* ══ VARIANT „– manuál" (šablóna views/single-zenturi_manual.php) ══════════ Figma „Rich Text" 747:27049 v sekcii 747:27046: biela karta `radius: base 16` a `p: div-padding-small 24`, ale NIE stránkový stĺpec - leží v pravom stĺpci dvojstĺpca (640 z kontajnera 1024, vedľa sidebaru 360). Preto sa tu neprepisuje typografia (celý `.zn-doc` platí 1:1 - je to ten istý longform, aký majú textové podstránky a `/api/`), ale len tie tri veci, ktoré sú STRÁNKOVÉ, a v dvojstĺpci by boli nesprávne: 1. stĺpec `min(768px, 100% - 280px)` na priamych deťoch → karta má vlastnú šírku, deti majú ísť cez celú, 2. `padding-block-end: 112` na `.zn-doc` → spodok sekcie nesie `.zn-msec`, karta má mať svojich 24, 3. horný margin prvého dieťaťa 40 → Figma chce nad nadpisom 24 (`py` obalu 747:27050), spolu s paddingom karty 48. Špecificita je zámerne (0,2,0) resp. (0,3,0), teda VŽDY vyššia než pravidlá, ktoré ruší - nie rovnaká, kde by rozhodovalo poradie v súbore. ⚠️ Existujúcich stránok sa nedotkne: triedu `zn-doc--manual` nemá ani jedna (nesie ju len šablóna detailu manuálu). */ .zn-doc.zn-doc--manual { box-sizing: border-box; flex: 1 1 0; /* Figma `flex-[1_0_0]` v riadku 747:27048 */ min-width: 0; /* bez toho by dlhé slovo roztiahlo stĺpec */ padding: var(--space-6); /* Div Padding/div-padding-small 24 */ border-radius: var(--radius-base); /* Radius/base 16 */ } /* ⚠️ ŠPECIFICITA JE TU PODSTATA VECI, nie kozmetika. `> *` by malo (0,2,0) - presne toľko, koľko má stĺpcové pravidlo `.zn-doc > :not([class*=…])`, aj jeho MOBILNÁ verzia na konci súboru. Pri zhode rozhoduje poradie v súbore, takže na desktope by moje pravidlo vyhralo (je nižšie), ale v mobilnej media query by prehralo - a obsah karty by bol o 32 px užší než karta. Namerané: obrázok 281 namiesto 313 pri 393 px. `:not([class*=…])` dvíha selektor na (0,3,0), takže vyhráva v oboch prípadoch a nezávisí od poradia. */ .zn-doc.zn-doc--manual > :not([class*="wp-block-zenturi-"]) { width: auto; margin-inline: 0; } .zn-doc.zn-doc--manual > :first-child { margin-block-start: var(--space-6); } /* 24 + p 24 = 48 */ /* Obrázok má NAD sebou 64, nie 16 ako na `/api/` a Integráciách. Nie je to nekonzistencia, ale iný node: obal obrázka 747:27056 má `py: 48` (obojstranne), kým 767:37578 mal len `pb: 48`. Namerané z Figma súradníc: text odstavca končí na y 308, obrázok začína na 372 → 64 = `pb 16` obalu odstavca + `pt 48` obalu obrázka. V CSS sa tie dva marginy ZLEJÚ, takže sa nesčítavajú - preto je tu rovno 64 a nie 48 (16 z pravidla pre odstavec pred obrázkom sa doň zlialo). Spodok ostáva 48 zo základného pravidla, tam sa hodnoty zhodujú. Špecificita (0,3,0), nie (0,2,0): `.zn-doc .wp-block-image` má tiež (0,2,0) a je v súbore NIŽŠIE, takže by pri zhode vyhralo poradím - namerané, prvý pokus s `.zn-doc--manual .wp-block-image` sa vôbec neprejavil. */ .zn-doc.zn-doc--manual .wp-block-image { margin-block-start: 64px; } /* Vlnka na konci dokumentu: `.zn-doc` má `padding-block-end: 112`, čo by pod navy vlnku vložilo 112px pruhu bg-medium a vzniklo by falošné „druhé dno" nad tmavou pätičkou. Rovnako by prekážal `margin-block-end: 16` z pravidla pre posledné dieťa nižšie. Oboje sa ruší LEN keď je vlnka naozaj posledná. */ .zn-doc:has(> [class*="wp-block-zenturi-wave-sep"]:last-child) { padding-block-end: 0; } /* ── Typografia dokumentu ───────────────────────────────────────────────── Zdroje: h2 a p sú 1:1 z Figmy (795:38957 „Introduction" a 795:38959 telo). Pre h4-h6, odkazy a `strong` Figma PODKLAD NEMÁ - odvodené z tých istých tokenov témy, žiadne nové veľkosti sa nezavádzajú. Po dodaní podkladu overiť. ⚠️ KAŽDÉ elementové pravidlo nižšie nesie strážcu `:where(:not([class*="wp-block-zenturi-"] *))`, teda „len ak to NIE JE vnútri zenturi sekcie". Bez neho sa dokumentová typografia prelieva do blokov: elementový selektor `.zn-doc p` má špecificitu (0,1,1) a prebije blokové `.zn-hsm__text` (0,1,0), takže hero na Integráciách dostal `margin-bottom: 24` (stĺpec narástol o 24px) a farbu #000000 namiesto #023047 - dve rôzne čierne, presne tá zámena, pred ktorou varuje CLAUDE.md. Nájdené meraním, vizuálne to bolo takmer neviditeľné. Strážca je zabalený v `:where()` ZÁMERNE - to má nulovú špecificitu, takže pravidlá zostávajú na (0,1,1) presne ako predtým a zvyšok kaskády sa nemení (napr. `.zn-doc > [class*="wp-block-zenturi-"] + *` (0,2,0) ďalej prebíja `margin-block` na h2). S holým `:not(...)` by stúpli na (0,2,1) a prvý nadpis by stratil odsadenie 40. Prečo nie override typu `.zn-doc [class*="wp-block-zenturi-"] p { color: inherit }`: `inherit` by zdedil čiernu z `.zn-doc`, a `revert` by spadol na štýl prehliadača - ani jedno nevráti slovo blokovému CSS. Jediné, čo funguje, je NEMATCHOVAŤ. ── */ /* Dokumentový titulok. Figma: „Heading/H3" 40/1.1 w400, obal má `py: 24`. `h1` je v zozname kvôli detailu manuálu (747:27051): dokument tam začína názvom otvorenej sekcie, a keďže je to nadpis STRÁNKY, musí to byť H1 - vo Figme má ale presne tú istú „Heading/H3" škálu ako h2 tu. Preto sa pridáva do selektora, nie ako druhé pravidlo s opísanými hodnotami. ⚠️ Doteraz schválené stránky sa tým nemenia: `h1` sa v `post_content` NEVYSKYTUJE ani raz (overené dotazom nad všetkými publikovanými stránkami), H1 tam dodáva hero blok, ktorý strážca `:where(:not(...))` vynecháva. */ .zn-doc h1:where(:not([class*="wp-block-zenturi-"] *)), .zn-doc h2:where(:not([class*="wp-block-zenturi-"] *)) { margin-block: var(--space-6); /* py 24 z obalu 795:38957 */ font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-5xl); /* Size/H3 40 */ line-height: 1.1; color: var(--color-black); } /* h4-h6: bez Figma podkladu - ďalšie stupne existujúcej škály témy (40 → 32 → 24 → 20), line-height 1.1 ako h2, rytmus odvodený z jeho `py: 24`. */ .zn-doc h3:where(:not([class*="wp-block-zenturi-"] *)), .zn-doc h4:where(:not([class*="wp-block-zenturi-"] *)), .zn-doc h5:where(:not([class*="wp-block-zenturi-"] *)), .zn-doc h6:where(:not([class*="wp-block-zenturi-"] *)) { margin-block: var(--space-6) var(--space-3); font-family: var(--font-display); font-weight: var(--weight-regular); line-height: 1.1; color: var(--color-black); } .zn-doc h4:where(:not([class*="wp-block-zenturi-"] *)) { font-size: var(--text-3xl); } /* H5 24 */ .zn-doc h5:where(:not([class*="wp-block-zenturi-"] *)), .zn-doc h6:where(:not([class*="wp-block-zenturi-"] *)) { font-size: var(--text-2xl); } /* H6 20 */ /* h3 = Figma „Heading/H6-A" (768:22503 v „Rich Text" 767:37573): Mix Medium Italic, Size/H6 20, weight 580, lh 1.4. Do teraz bolo h3 odvodenina (32/1.1 regular), lebo node 795:38953 pre h3-h6 podklad NEMAL - poznámka vyššie na to čakala. Rich Text ho dodáva, takže sa h3 prepisuje naň; h4-h6 ostávajú odvodené. 580 = Figma literál medzi medium 550 a semibold 650, rovnaká konvencia ako `zn-icc__title`, `zn-b2__card-name`, `zn-tl__title`. Rytmus: Figma obal 768:22502 má `pb: 16` a vnútorný `gap: 8` medzi nadpisom a odstavcom pod ním. Právne podstránky (118/119/120) používajú len h2, takže sa im nič nemení - overené pixel diffom. */ .zn-doc h3:where(:not([class*="wp-block-zenturi-"] *)) { margin-block: var(--space-4) var(--space-2); /* 16 nad / 8 pod (Figma 768:22502) */ font-size: var(--text-2xl); /* Size/H6 20 */ font-style: italic; font-weight: 580; line-height: 1.4; } /* Odstavec. Figma má telo ako JEDEN textový node s `mb: 0`, kde odstavce oddeľujú prázdne riadky - jeden prázdny riadok pri 16/1,5 = 24px. V core blokoch to zodpovedá `margin-block-end: 24`, vizuálne identické. */ /* Farba sa MUSÍ uviesť explicitne, hoci `.zn-doc` ju dedí: `style.css:167` má `p { color: var(--color-text-muted) }` a elementové pravidlo prebije dedenie (dedenie špecificitu nemá). Bez tohto riadku by odstavce boli #75878f. */ .zn-doc p:where(:not([class*="wp-block-zenturi-"] *)) { margin-block: 0 var(--space-6); color: var(--color-black); line-height: 1.5; } /* Figma má pod telom textu ešte `pb: 16` obalu 795:38959; zvyšok (112) drží `.zn-doc`. Spolu 128 pod poslednou vetou, presne ako v dizajne. Obrázok je z pravidla vyňatý ZÁMERNE a explicitne: jeho vlastný obal má `pb: 48` (767:37578 / 768:22505), takže dokument končený obrázkom má pod ním 48 + 112. Bez toho `:not()` by o výsledku rozhodovalo poradie dvoch rovnako špecifických pravidiel (0,2,0) v súbore - fungovalo by to, ale náhodou. */ .zn-doc > :last-child:not(.wp-block-image):not([class*="wp-block-zenturi-"]) { margin-block-end: var(--space-4); } /* Zoznamy: veľkosť ako odstavec, zápis (odrážky, `padding-inline-start`) prebratý z `.zn-prose`. Spodný rytmus 16 je z Figmy - obal zoznamu 767:37576 má `pb: 16` (nie 24 ako odstavec; ten vzniká z prázdneho riadka v jednom textovom node). Právne podstránky žiadny zoznam nemajú, takže sa im tým nič nemení. */ .zn-doc ul:where(:not([class*="wp-block-zenturi-"] *)), .zn-doc ol:where(:not([class*="wp-block-zenturi-"] *)) { margin-block: 0 var(--space-4); padding-inline-start: 1.5em; } .zn-doc ul:where(:not([class*="wp-block-zenturi-"] *)) { list-style: disc; } .zn-doc ol:where(:not([class*="wp-block-zenturi-"] *)) { list-style: decimal; } /* Bez medzery medzi položkami: Figma 767:37577 je JEDEN textový node s piatimi riadkami pri 16/1,5, teda výška 120 = 5 × 24 a `mb: 0` na každej položke. Doteraz tu bolo 8 z konvencie `.zn-prose` (bez podkladu); Rich Text podklad dodáva. */ .zn-doc li:where(:not([class*="wp-block-zenturi-"] *)) { margin-block-end: 0; } /* Obrázky v dokumente. Figma „Rich Text" 767:37573, obaly 767:37578 a 768:22505: rám 1px `Scheme A/Border` rgba(3,3,3,0.15), radius `Radius/medium` 12, `pb: 48` pod obrázkom a `pb: 16` na obale odstavca NAD ním. Rám je `border` + `box-sizing: border-box`, nie holý `border`: Figma stroke je INSIDE, kým CSS border box rozširuje (CLAUDE.md) - bez toho by bol obrázok o 2px širší než stĺpec. `width: 100%` je nutné, aby `border-box` mal čo zmenšovať; výšku dopočíta `height: auto` z core štýlov. `:has()` na odstavci pred obrázkom rieši zliatie marginov: odstavec má `mb: 24` (rytmus z právneho node) a obrázok `mt: 16`, zlialo by sa to na 24, kým Figma tu chce 16. Pravidlo platí LEN pre odstavec, po ktorom hneď nasleduje obrázok, takže sa právnych podstránok (bez obrázkov) nedotkne. */ .zn-doc .wp-block-image { margin-block: var(--space-4) var(--space-12); /* 16 nad / 48 pod */ } .zn-doc .wp-block-image img { display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--color-border); /* Scheme A/Border rgba(3,3,3,.15) */ border-radius: var(--radius-md); /* Radius/medium 12 */ } .zn-doc p:where(:not([class*="wp-block-zenturi-"] *)):has(+ .wp-block-image) { margin-block-end: var(--space-4); } /* Popisok obrázka - Figma „Caption Figure" 767:29168 / 767:29203 (API 38), mobil 1202:115133 / 1202:115144. Prvá podstránka s popiskami; Integrácie (767:37573) majú ten istý komponent BEZ nich - obal obrázka tam ide rovno `pb: 48`. Preto sa pravidlo drží scope-u variantov, v ktorých je doložené Figmou; právne podstránky (118/119/120) obrázok nemajú vôbec, takže sa ich to nedotkne ani nepriamo. ⚠️ Od detailu manuálu platí aj pre `--manual`: „Caption Figure" 747:27058 je ten istý komponent s tými istými hodnotami (lišta 2 × self-stretch 747:27059, text „Size/Small" 14/1,5 747:27060, gap 8 - text začína na x 10 = lišta 2 + gap 8, a 16 nad popiskou: obrázok končí na y 369,74, popiska začína na 385,74). Bez rozšírenia scope-u zdedí popiska len `block-library` (13 px, centrovaná, bez lišty) - namerané pri prvom audite detailu. ⚠️ ŠTRUKTÚRA popisku je reálna, TEXT je Relume placeholder. Vo Figme je v oboch obrázkoch (desktop aj mobil) doslovné „Image caption goes here". Že to nie je len zabudnutý zvyšok komponentu, ukazujú práve Integrácie: tam bola Caption Figure z komponentu ODSTRÁNENÁ, tu ostala 2×. Štýl je teda pripravený a čaká na reálne znenie popiskov od klienta - dovtedy sa pole „Popis" pri obrázku necháva prázdne (prázdny popisok WordPress nevyrenderuje, žiadna osamotená lišta nevznikne). Hodnoty (zhodné desktop/mobil - `get_variable_defs` na mobilnom 1202:115126 vracia Size/Small = 14 aj v mobilnom móde, takže sa veľkosť v @media neprepisuje): - 16 nad popiskom = `gap` OBALU 767:29166, nie margin popisku, - `gap` 8 medzi lištou a textom, `items-start`, - lišta 2 × `self-stretch`, „Color Scheme 1/Border" #000000, - text Size/Small 14 / 1.5, „Color Scheme 1/Text" #000000 (nie #023047). Lišta je `::before`, nie element v markupe: popisok zadáva admin do poľa „Popis" pri obrázku v Gutenbergu a to prijme len text. `flex: none` je povinné - vo flex riadku by sa 2px lišta scvrkla na 0 (CLAUDE.md). Prepisujú sa VŠETKY štyri hodnoty z block-library (`font-size: 13px`, `text-align: center`, `margin-top: .5em`, `margin-bottom: 1em`); vynechanie ktorejkoľvek je viditeľné. Špecificita (0,2,1) prebíja core (0,1,1). */ .zn-doc--card .wp-block-image figcaption, .zn-doc--manual .wp-block-image figcaption { display: flex; align-items: flex-start; gap: var(--space-2); /* Figma 8 */ margin-block: var(--space-4) 0; /* 16 nad; 48 pod drží margin figure */ font-size: var(--text-sm); /* Size/Small 14 */ line-height: 1.5; text-align: left; color: var(--color-black); /* Color Scheme 1/Text #000000 */ } .zn-doc--card .wp-block-image figcaption::before, .zn-doc--manual .wp-block-image figcaption::before { content: ''; flex: none; /* inak sa 2px lišta vo flexe scvrkne */ align-self: stretch; /* Figma „self-stretch" - výška textu */ width: 2px; background: var(--color-black); /* Color Scheme 1/Border #000000 */ } /* Odkazy. Do teraz to bola odvodenina (`--color-primary-dark` + offset 3) prevzatá z konvencie `.zn-prose`, lebo Figma pre odkazy v dokumente PODKLAD NEMALA. API (38) ho dodáva - rovnaká situácia ako pri h3 vyššie, takže rovnaké riešenie: podklad vyhráva nad odvodeninou. Figma „Rich Text" 767:29172 a 767:29200: odkaz NEMÁ vlastnú farbu, dedí „Color Scheme 1/Text" #000000 z odstavca, a je len podčiarknutý (`text-underline-position: from-font`, `decoration-from-font`). Overené MERANÍM na renderi node 767:29127, nie len z JSX: jadrá glyfov všetkých odkazov („Fakturácia", „Tovary a služby", riadok s docs.flowiiapi.apiary.io) majú R = G = B (priemer 52-55, minimum 0,0,0), teda čistá čierna - žiadny farebný kanál. ⚠️ ŽIADNA UŽ SCHVÁLENÁ STRÁNKA SA TÝM NEMENÍ - overené: Integrácie (39) ani právne podstránky (118/119/120) neobsahujú v `post_content` ani jeden ``, takže toto pravidlo doteraz nikde nič nevykreslilo. API je prvá stránka s odkazmi v dokumente. Zároveň `#fb8500` na bielej má kontrast ~2,3:1, čo pre 16px text nespĺňa AA (CLAUDE.md žiada kontrast overiť) - dizajn to rieši práve čiernou. Zápis podčiarknutia je prevzatý z `.zn-hsm__crumb a` (hero-simple), kde už tá istá dvojica `from-font` v téme je - žiadna nová konvencia. Hover: Figma stav nedefinuje, ostáva doterajší `--color-secondary-dark` (teal), ktorý na hover kontrast spĺňa. */ .zn-doc a:where(:not([class*="wp-block-zenturi-"] *)) { color: inherit; /* Color Scheme 1/Text #000000 */ text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; } .zn-doc a:where(:not([class*="wp-block-zenturi-"] *)):hover { color: var(--color-secondary-dark); } /* `strong` bez Figma podkladu - semibold token témy (Figma „Sans SemiBold" 650). */ .zn-doc strong:where(:not([class*="wp-block-zenturi-"] *)), .zn-doc b:where(:not([class*="wp-block-zenturi-"] *)) { font-weight: var(--weight-semibold); } /* ══ Tablet (≤1199.98px) - Figma preň nemá spec ══ */ @media (max-width: 1199.98px) { .zn-doc > :not([class*="wp-block-zenturi-"]) { width: min(768px, 100% - 2 * var(--space-16, 64px)); } } /* ══ Mobil (≤767.98px) - Figma frame NEDODANÝ ═════════════════════════════ - bočné odsadenie 16 = „Page Padding/padding-global" v mobilnom móde, zhodne so všetkými doteraz overenými mobilnými frame-ami, - spodný padding 64 = „Section Padding/section-large" v mobilnom móde (overené na `section-base-2` 1181:70867, v1.15.2), - nadpis h2 sa NEPREPISUJE: `--text-5xl` je fluidný token (clamp 30 → 40), pri 393px sám vyjde na 30. Vlastnú mobilnú hodnotu by mal dodať frame, dovtedy necháme pracovať škálu témy - je to menej vymýšľania než pevné číslo. PO DODANÍ FRAME-U OVERIŤ. `.zn-doc` nie je `.zn-block`, takže pravidlo `--zn-pt-m`/`--zn-pb-m` sa naň nevzťahuje (components.css polovičí len `.zn-block`); hero-text si svoje mobilné `-m` premenné rieši sám vo vlastnom style.css. ══ */ @media (max-width: 767.98px) { .zn-doc { padding-block-end: 64px; } .zn-doc > :not([class*="wp-block-zenturi-"]) { width: min(768px, 100% - 2 * var(--space-4, 16px)); } /* Variant „– karta" MÁ mobilný frame: `1202:120989 „Integrácie-detail-m"`. Sekcia 1202:120992 y 774,5917 výška 1231,8918, Container 1202:120993 y 32 výška 1087,8918 ⇒ nad kartou **32** („Section Padding/section-small" v mobilnom móde), pod kartou 1231,8918 − (32 + 1087,8918) = **112** - rovnakých 112 ako na desktope, je to ten istý token „padding-section-large". Padding karty je na mobile **16**, nie 24: `get_variable_defs` na mobilnom node vracia „Div Padding/div-padding-small" = 16, kým fallback 24 v design contexte je DESKTOPOVÝ mód (klasická pasca s Variable módmi, viď CLAUDE.md). Sedí to s obsahom 329 = 361 − 2×16. `.zn-doc { padding-block-end: 64 }` vyššie sa tu neuplatní - keď je vlnka posledná, nuluje ho `:has()` pravidlo, aby pod vlnkou nevznikol pruh nad pätičkou. */ /* Variant „– manuál" mobilný frame NEMÁ (Figma dodala len desktop 747:27046). Padding karty preto berie tú istú hodnotu ako karta vyššie - „Div Padding/ div-padding-small" v MOBILNOM móde je 16, nie 24. Je to ten istý komponent „Rich Text" a ten istý token, takže je to prevzatie, nie odhad; keď frame príde, overiť. Odsadenia sekcie okolo karty nesie `.zn-msec` (manual.css). */ .zn-doc.zn-doc--manual { padding: var(--space-4); } .zn-doc.zn-doc--card > .wp-block-group { margin-block: 32px 112px; padding: var(--space-4); /* Div Padding/div-padding-small (mobil) 16 */ } /* Nadpis na mobile 32 - platí LEN pre variant „– karta", ktorý ako jediný má mobilný frame (`1202:120989 „Integrácie-detail-m"`). Poznámka v hlavičke tejto media query („h2 sa NEPREPISUJE, PO DODANÍ FRAME-U OVERIŤ") tým ostáva v platnosti pre `.zn-doc` BEZ karty - tam frame stále chýba a `--text-5xl` si ďalej clampuje 30. Prečo 32 a nie 38: nadpis longformu je Heading/**H3**, nie H2 - desktop `--text-5xl` je `clamp(30, …, 40)` a 40 = „Size/H3" v desktopovom móde (H2 je tam 48). Na mobilnom node `get_variable_defs` vracia „Size/H3" = **32** (Size/H2 = 38, to je iný nadpis). Overené cez get_variable_defs na mobilnom frame-e, nie odhadnuté - klasická pasca s Variable módmi (CLAUDE.md). Token sa nedá použiť: `--text-5xl` pri 393 px vyjde 30, Figma chce 32. Špecificita (0,2,1) - `.zn-doc.zn-doc--card`, nie `.zn-doc--card`: základné pravidlo `.zn-doc h2:where(…)` má tiež (0,1,1) a `:where()` neprispieva, takže s jednou triedou by rozhodovalo poradie v súbore, nie zámer. ⚠️ Právne podstránky 118/119/120 majú `.zn-doc` BEZ `--card` (overené v DOM), takže sa ich toto pravidlo nedotkne - zostávajú bit-identické. */ .zn-doc.zn-doc--card h2:where(:not([class*="wp-block-zenturi-"] *)) { font-size: 2rem; /* Size/H3 (mobil) 32 */ } }