/* ══════════════════════════════════════════════════════════════════════════ Zenturi - Detail sekcie manuálu Figma „Section / Longform / Left" 747:27046 (desktop 1440) Načítava sa LEN na `is_singular('zenturi_manual')` (podmienený enqueue v inc/cpt-manual.php, rovnaká prax ako `case-studies.css` či `tools.css`). ČO TU NIE JE, A ZÁMERNE: - typografia dokumentu (pravý stĺpec) - je v `longform.css` ako `.zn-doc` a variant `.zn-doc--manual`; tu sa nepíše ani jeden font-size, - vzhľad tlačidiel navigácie - sú to DS `.btn--link` / `.btn--outline` z `components.css`, tu sa mení len VÝŠKA a rám ikony (viď nižšie), - ikona sekcie - knižničná `ico-*` cez `zenturi_the_icon()`, rovnaká ako v mriežke archívu. ⚠️ Kaskáda: `components.css` sa načítava PO tomto súbore, takže override `.btn` hodnôt musí mať 2-triednu špecificitu (CLAUDE.md) - preto všade `.zn-msec__back.btn`, nie `.zn-msec__back`. MOBIL: Figma frame NEDODANÝ - hodnoty v @media sú konvencia, zdroj je pri každom pravidle. ══════════════════════════════════════════════════════════════════════════ */ /* Sekcia: 1440 × 1266,739, kontajner 1024 na (208, 48), spodok sekcie 1266,739 − (48 + 1106,739) = 112. px 64 „Page Padding/padding-global" pt 48 „Section Padding/section-small" pb 112 „Section Padding/padding-section-large" Tokeny `--space-16/12/24` sú pri 1440 presne 64/48/112 (clampy sa tam trafia do maxima - overené meraním, nie predpokladom). */ .zn-msec { background: var(--color-bg-medium); /* Scheme A/Background Medium #ecf2f4 */ padding-inline: var(--space-16); /* 64 */ padding-block: var(--space-12) var(--space-24); /* 48 / 112 */ } .zn-msec__container { display: flex; flex-direction: column; gap: var(--space-4); /* nav → obsah 16 (namerané: y 56 → 72) */ /* „Max Width/max-width-xlarge" 1024 - LITERÁL, nie token: téma má `--container-max` = 1280 („container-large"), čo je iná šírka. Nový token sa nezavádza kvôli jednému výskytu; keď pribudne druhý, patrí do style.css. */ max-width: 1024px; margin-inline: auto; } /* ── Navigácia (747:27330 hore / 747:27609 dole) ──────────────────────────── 1024 × 56 = tlačidlo 40 + `pb` 16, pod tým 1px rám. Obe navigácie sú identické, preto jeden partial vložený dvakrát. */ /* ⚠️ Linka je `box-shadow: inset`, NIE `border-bottom`. Figma stroke je INSIDE: frame má 56 = tlačidlo 40 + `pb` 16 a linka sedí v poslednom pixeli toho paddingu. CSS `border` box ROZŠIRUJE (CLAUDE.md), takže nameraných 57 ≠ 56 - presne ten kontrolný signál „výška = Figma + 1". Inset tieň kreslí to isté, ale do výšky sa nepočíta. */ .zn-msec__nav { display: flex; align-items: center; justify-content: space-between; padding-block-end: var(--space-4); /* 16 */ box-shadow: inset 0 -1px 0 var(--color-border); /* Scheme A/Border rgba(3,3,3,.15) */ } /* Výška 40 - jediná odchýlka od DS `.btn` (48). Nie je to odhad: token `Button` má v tomto frame hodnotu 40 (`get_variable_defs` na 747:27046 vracia "Button": "40"). Rovnaká situácia ako pri `.zn-tool-card__cta`. */ .zn-msec__back.btn, .zn-msec__next.btn { height: 40px; } /* Rám ikony 24 namiesto default 32: Figma `Arrow_alt_left_alt` je 24 a glyph v ňom má 12 × 8. `.btn--arrow` kreslí glyph ako 50 % rámu, teda 12 široký - a pri pomere assetu 29:19 vyjde 7,86 ≈ 8 vysoký. Sedí bez zásahu do masky. */ .zn-msec__next.btn { --btn-arrow-frame: 24px; } /* Ľavá šípka = TÁ ISTÁ maska zrkadlená, presne ako vo Figme (pravá šípka je `Arrow_alt_left_alt` s `-scale-x-100`). Druhý asset sa preto nesťahuje. `::before`, lebo ikona je PRED textom; `.btn--arrow` obsluhuje ::after. `flex-shrink: 0` je povinné - v natesnanom mobilnom riadku by sa scvrkla na 0 (CLAUDE.md). */ .zn-msec__back.btn::before { content: ''; flex-shrink: 0; width: 24px; aspect-ratio: 1; background-color: currentColor; transform: scaleX(-1); -webkit-mask: url('../../assets/img/icons/btn-arrow-right.svg') center / 50% no-repeat; mask: url('../../assets/img/icons/btn-arrow-right.svg') center / 50% no-repeat; } /* ── Dva stĺpce (747:27048) ───────────────────────────────────────────────── Vľavo 360, vpravo 640 na x 384 → gap 24 („Div Padding/div-padding-small"). `align-items: flex-start` je vo Figme `items-start`: sidebar sa NESMIE natiahnuť na výšku dokumentu. */ .zn-msec__content { display: flex; align-items: flex-start; gap: var(--space-6); /* 24 */ } /* Gap 24, NIE 48. Vo Figme sú tu dva vnorené framy: vonkajší 747:27096 má gap 48, ale JEDINÉ dieťa, takže sa jeho gap nikdy nevykreslí; skutočný odstup hlavička → zoznam nesie vnútorný „Column" 747:27097 a je 24 (namerané: hlavička končí na y 90, zoznam začína na 114). Prvé meranie tu ukázalo 48 - flatten dvoch framov do jedného elementu si vypýtal gap toho vnútorného. */ .zn-msec__side { display: flex; flex: 0 0 360px; flex-direction: column; gap: var(--space-6); /* „Column" 747:27097 gap 24 */ width: 360px; } /* Hlavička sidebaru (747:27155): ikona 52, gap 4, názov sekcie. Ikona 52 = ten istý rozmer, aký má v karte mriežky (`.zn-tool-card--icon`). */ .zn-msec__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); /* 4 */ } .zn-msec__icon { flex-shrink: 0; width: 52px; height: 52px; } /* Heading/H5-A: Mix Medium Italic, weight 580, Size/H5 24, lh 1.4. Je to `

`, nie nadpis - H1 stránky je názov otvoreného postu v dokumente (viď komentár v šablóne), takže tu ide o menovku zoznamu. Preto sa aj farba aj rodina uvádzajú explicitne: `style.css` má `p { color: text-muted }` a elementové pravidlo prebije dedenie. */ .zn-msec__title { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 580; /* Mix Medium Italic */ font-size: var(--text-3xl); /* Size/H5 24 */ line-height: 1.4; color: var(--color-text); /* Scheme A/Text #023047 */ } /* ── Zoznam podsekcií (747:27099) ─────────────────────────────────────────── Položka 360 × 48 = text 16/1,5 (24) + py 12; px 16. Bez medzier medzi položkami - oddeľuje ich 1px rám. Text/Regular/Semi Bold: „Font Family/Heading", weight 650, 16/1.5, #023047. 🔴 DNES SA NEVYKRESLÍ NIČ - žiadna sekcia nemá deti. Pravidlá sú tu pre stav, keď obsah manuálu príde od klienta; nič sa nedopĺňa naslepo (CLAUDE.md). */ .zn-msec__list { display: flex; flex-direction: column; } /* Oddeľovač je `box-shadow: inset` z rovnakého dôvodu ako pri navigácii vyššie: Figma frame má 48 (12 + 24 + 12) a stroke INSIDE, kým `border-bottom` by pridal 49. Pri 11 položkách je to 11 px navyše - zoznam by prestal sedieť na Figma výšku 528. */ .zn-msec__item { padding: var(--space-3) var(--space-4); /* py 12 / px 16 */ box-shadow: inset 0 -1px 0 var(--color-border); font-family: var(--font-display); /* Font Family/Heading */ font-size: var(--text-base); /* Size/Regular 16 */ font-weight: var(--weight-semibold); /* Sans SemiBold 650 */ line-height: 1.5; color: var(--color-text); /* Scheme A/Text #023047 */ text-decoration: none; } /* Hover Figma nedefinuje - podčiarknutie je najmenší možný doplnok a je to tá istá afordancia, akú má odkaz v dokumente (`.zn-doc a`). Žiadne vymyslené pozadie ani posun. */ .zn-msec__item:hover { text-decoration: underline; } /* Aktívna položka (747:27104): biela, radius 8 („Radius/Small"), tieň `small-s` = `0 2px 4px -2px #135B6C0D, 0 4px 8px -2px #135B6C26`, čo je presne token `--shadow-sm` (overené hodnota po hodnote), a BEZ spodného rámu. */ .zn-msec__item--active { border-radius: var(--radius-sm); /* 8 */ background: var(--color-white); /* Scheme A/Foreground */ box-shadow: var(--shadow-sm); /* Figma efekt „small-s" - zároveň prepíše inset oddeľovač */ } /* Oddeľovač nemá ani položka TESNE PRED aktívnou - vo Figme je „Uvod" nad aktívnym „Sumáre" jediná ďalšia položka bez linky. Nahrádza ho tieň karty. `:has()` drží pravidlo v CSS, aby o ňom nemusela vedieť šablóna. */ .zn-msec__item:has(+ .zn-msec__item--active) { box-shadow: none; } /* ══ Tablet a užšie (≤1199.98px) - Figma preň nemá spec ════════════════════ Dvojstĺpec sa rozpadá na stĺpce pod seba: 360 + 24 + dokument potrebuje aspoň 1024 + 2 × padding, inak by sa dokument stláčal. Rovnaký breakpoint, pri akom prepínajú mriežky `.zn-mgrid` a `.zn-tools`. */ @media (max-width: 1199.98px) { .zn-msec { padding-inline: var(--space-8); } /* 32, ako `.zn-mgrid` */ /* `align-items: stretch` je pri stĺpcovom smere POVINNÉ, nie kozmetika: desktopové `flex-start` je vo zvislom rade priečna os, takže karta by sa zúžila na šírku svojho OBSAHU. Pri dnešnom stave (sekcie bez textu) to bolo namerané - karta 171 px namiesto 328 pri 360 px. `flex: 1 1 0` z longformu to nezachráni; v stĺpci sa `flex-basis` týka výšky. */ .zn-msec__content { flex-direction: column; align-items: stretch; } .zn-msec__side { flex: 0 0 auto; width: 100%; } } /* ══ Mobil (≤767.98px) - Figma frame NEDODANÝ ══════════════════════════════ - bočné odsadenie 16 = „Page Padding/padding-global" v mobilnom móde, - pt 32 = „Section Padding/section-small" v mobilnom móde, pb ostáva 112 („padding-section-large" je rovnakých 112 aj na mobile) - oboje prevzaté z JEDINÉHO mobilného frame-u toho istého komponentu, aký v téme máme: „Integrácie-detail-m" 1202:120989 (viď longform.css, variant `--card`), - ⚠️ pb je LITERÁL 112px, nie `--space-24`: ten je clamp(56, 7,8vw, 112), takže pri 393 px vyjde 56 - polovica. Na desktope sa clamp trafí do maxima (7,8 × 14,4 = 112,3 → 112), preto tam token ostáva. Rovnaký dôvod, prečo má literál aj `.zn-doc--card` v longform.css, - navigácia sa smie zalomiť: pri 360 px je „Späť na manuál" + najdlhší názov sekcie širší než riadok a `.btn` má `white-space: nowrap`, takže by inak vytiekla zo sekcie. `margin-inline-start: auto` drží tlačidlo vpravo aj keď spadne na druhý riadok (samotné dieťa v riadku by inak sadlo doľava). */ @media (max-width: 767.98px) { .zn-msec { padding-inline: var(--space-4); /* 16 */ padding-block: var(--space-8) 112px; /* 32 / 112 (literál - viď hore) */ } .zn-msec__nav { flex-wrap: wrap; row-gap: var(--space-3); /* 12 */ } .zn-msec__next.btn { margin-inline-start: auto; } }