/* ══════════════════════════════════════════════════════════════════════════ Zenturi - Section / Tabs Left (Figma 629:23128 desktop / 1201:62784 mobil, "CRM systém" - "Čo všetko s CRM systémom od Zenturi získate?") DOM = 9× opakovaný pár (tab button + tabpanel) v `.zn-tl__pair` (role= presentation, aby role=tablist na `.zn-tl__list` malo za priame prístupné deti len samotné role=tab tlačidlá - ARIA nevyžaduje, aby tabpanel bol súrodenec/potomok tablistu, väzba ide cez aria-controls/aria-labelledby). Prečo interleaved DOM (tab1,panel1,tab2,panel2,...), nie dva oddelené zoznamy: na mobile (Figma 1201:62784) je layout JEDEN stĺpec, kde obsah AKTÍVNEHO tabu je priamo POD svojím tabom (accordion), nie pod celým zoznamom - rovnaký vzor ako existujúci FAQ accordion (`faq-2`). Desktop layout (dva stĺpce) sa z toho istého DOM poskladá cez CSS Grid nižšie (`.zn-tl__pair{display:contents}` + explicitné umiestnenie panelov) - žiadna JS manipulácia DOM, obsah je od začiatku v HTML (SEO požiadavka). ══════════════════════════════════════════════════════════════════════════ */ .zn-tl { position: relative; background: var(--color-bg-medium); /* Scheme A/Background Medium */ padding-inline: var(--space-16); /* Page Padding/padding-global 64 */ border-radius: 0 0 var(--radius-xl) var(--radius-xl); /* Radius/XLarge 40, len dole */ } .zn-tl.zn-block { --zn-pt: var(--space-12); --zn-pb: var(--space-24); } /* section-small 48 / section-large 112 */ .zn-tl__container { max-width: var(--container-max); /* container-large 1280 */ margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-20); /* section-medium 80 (clampuje na 48 pri mobile šírke - žiadny override netreba) */ } /* ── Hlavička ── */ .zn-tl__head { display: flex; flex-direction: column; align-items: center; } .zn-tl__heading { margin: 0; max-width: 768px; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-7xl); /* Size/H1 56 */ line-height: 1.1; color: var(--color-text); text-align: center; } .zn-tl__heading-accent { display: block; /* Figma: akcent na vlastnom riadku */ font-style: italic; font-weight: var(--weight-tagline); color: var(--color-secondary-dark); /* #1B8098 */ } /* Opt-in (`tl_accent_inline`) — akcent tečie v riadku za nadpisom. Figma to má OBOMA spôsobmi a rozdiel NIE JE odvoditeľný z obsahu poľa, preto pole, nie heuristika: vlastný riadok /erp-system/ (830:25618) + /crm-system/ (629:23128), v riadku /fakturacia/ (838:38465), /projektovy-manazment/ (838:37218), /prijmy-a-vydavky/ (839:40188), /ulohy/ (842:41588). Dve triedy zámerne — jednotriedne pravidlo by neprebilo `display: block` vyššie. Rovnaký vzor ako `.zn-b3--accent-inline` v bento-3. */ .zn-tl--accent-inline .zn-tl__heading-accent { display: inline; } /* ── Zoznam (tab menu vľavo + jedna content karta vpravo, desktop) ── */ .zn-tl__list { display: grid; grid-template-columns: 400px 1fr; /* 9 explicitných riadkov - toľko, koľko má Figma tabov. Pri pridaní ďalšieho panelu (nad 9) treba toto číslo zvýšiť, inak by extra tab nedostal vlastný riadok v mriežke (repeat(9,...) je vedomá hranica, nie skrytá pasca - `grid-row:1/-1` na paneloch by bez explicitného počtu riadkov spoliehalo na implicitnú mriežku, ktorá sa pri "-1" nespráva spoľahlivo). `minmax(82px, 1fr)` namiesto `auto` (2026-08-27): panel spanuje `1/-1` cez všetkých 9 riadkov, takže keď je VYŠŠÍ než 9x82=738, grid ten presah rozdelí medzi riadky - riadok narastie, ale tab má pevnú `height: 82px`, takže sedí pri VRCHU riadku a pod ním vznikne medzera. Namerané pred opravou: riadky 89,8px / medzery 7,8px medzi tabmi a POSLEDNÝ tab končil 7,8px NAD spodkom kontajnera - preto jeho žltá plocha nekopírovala zaoblený roh karty (Marošov nález A). `1fr` drží riadky rovnaké a `82px` je Figma podlaha (Tabs Menu 738 = 9x82, overené na I629:23128;23:3666); tab sa do riadku roztiahne (viď `height: auto` v desktop bloku nižšie). */ grid-template-rows: repeat(9, minmax(82px, 1fr)); align-items: stretch; background: var(--color-white); border-radius: var(--radius-base); /* Radius/Base 16 */ overflow: hidden; /* Žiadny border tu - vo Figme je bez orámovania (bg+radius+overflow-clip len), samotný border 1px má PANEL (viď .zn-tl__panel nižšie), nie tento spoločný wrapper. Audit 2026-08-26 proti 629:23128. */ } .zn-tl__pair { display: contents; } /* ── Tab tlačidlo (menu vľavo) ── */ .zn-tl__tab { grid-column: 1; /* auto-flow do riadkov 1..9 (stĺpec 2 obsadený panelmi) */ display: flex; align-items: center; gap: var(--space-2); /* 8 */ width: 100%; height: 82px; /* Figma explicitný h-[82px] (desktop AJ mobil) - auto výška z padding+line-height merala 92px, nie 82px (audit 2026-08-26). */ padding: var(--space-6) var(--space-8); /* py 24 / px 32 (div-small / div-medium) */ border: 0; background: transparent; font-family: var(--font-display); font-weight: var(--weight-medium); /* 550, Heading/H5 */ font-size: var(--text-2xl); /* Size/H5 24 (--text-2xl je 20 - viď override nižšie } */ line-height: 1.4; color: var(--color-text-secondary); /* #75878f, neaktívny */ text-align: left; cursor: pointer; transition: background var(--transition-base), color var(--transition-base); } /* Deliaca čiara MEDZI položkami (n-1 čiar pre n tabov), nie pod každou - overené na 629:23128 (desktop) aj 1201:62784 (mobil accordion) priamo screenshotom: posledná položka ("Chat") nemá pod sebou žiadnu čiaru, len zaoblený spodný roh karty. Bez `:not(:last-child)` mala predtým KAŽDÁ položka vlastný `border-bottom`, teda aj posledná - navyše čiara, ktorú Figma nemá. Scoped na `.zn-tl__pair` (nie priamo na `.zn-tl__tab`): DOM je interleaved pár tab+panel (`.zn-tl__pair{display:contents}`), takže `.zn-tl__tab:last-child` by bolo VŽDY pravda (tab je prvé dieťa SVOJHO pair wrapperu, nie posledný tab v zozname) - `:last-child` musí ísť na `.zn-tl__pair`, ktorý je skutočný priamy potomok `.zn-tl__list`. */ .zn-tl__pair:not(:last-child) .zn-tl__tab { border-bottom: 1px solid var(--color-border); } /* Aktívna položka nesmie mať sivý oddeľovač NAD sebou - vo Figme (629:23128, napr. inštancia I629:23128;23:3874 "História zákazníka") je aktívna karta zhora čistá (žiadny `border-top`, žiadny cudzí okraj tesne nad ňou), len jej vlastný žltý blok + tieň. Keďže deliaca čiara PRED aktívnym tabom fyzicky patrí PREDCHÁDZAJÚCEMU (neaktívnemu) páru - jeho `border-bottom` - treba ju skryť práve na ňom, nie na aktívnom prvku. Rovnaký overený vzor ako `:has(+ .zn-msec__item--active)` v manual.css. Špecificita 5 (`.zn-tl__pair`+`:has(...)` s vnútornou 3 + `.zn-tl__tab`) spoľahlivo prebije pravidlo vyššie (špecificita 3) bez ohľadu na poradie. */ .zn-tl__pair:has(+ .zn-tl__pair .zn-tl__tab.is-active) .zn-tl__tab { border-bottom: 0; } /* Aktívna položka má VLASTNÚ (oranžovú) spodnú čiaru nezávisle od deliacej čiary vyššie - musí fungovať aj keď je aktívna PRÁVE POSLEDNÁ položka (tá by inak z pravidla vyššie nedostala border-bottom vôbec). Plný `border-bottom` (nie len `-color`) + selektor s rovnakou špecificitou ako pravidlo vyššie (`.zn-tl__pair .zn-tl__tab.is-active`, 3 triedy) - v cascade rozhoduje poradie v súbore (toto pravidlo je NIŽŠIE). */ .zn-tl__pair .zn-tl__tab.is-active { color: var(--color-text); background: rgba(253, 233, 180, .2); /* Scheme A/Icon/Opacity-20 (primary-lighter @20%) */ border-bottom: 1px solid var(--color-primary); /* #FFB703 */ box-shadow: 0 12px 16px 0 rgba(178, 95, 0, .15), 0 4px 6px 0 rgba(178, 95, 0, .05); position: relative; z-index: 1; /* tieň prekreslí susedné okraje */ } .zn-tl__tab:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: -2px; } .zn-tl__tab-icon { flex-shrink: 0; width: 32px; height: 32px; } .zn-tl__tab-label { flex: 1 1 0%; } /* Figma Size/H5 = 24px/550/1.4 - --text-2xl v téme je 20 (H6/Large), preto vlastná hodnota. */ .zn-tl__tab { font-size: 1.5rem; } /* ── Content panel (karta vpravo, desktop) ── */ .zn-tl__panel { grid-column: 2; grid-row: 1 / -1; /* všetky zdieľajú tú istú bunku, viditeľný je len .is-active */ display: flex; flex-direction: column; height: 100%; background: var(--color-white); border: 1px solid var(--color-border); /* Figma: panel má VLASTNÝ border, nie zdieľaný so zoznamom tabov */ border-radius: var(--radius-base); /* Radius/Base 16 */ overflow: hidden; } .zn-tl__panel[hidden] { display: none; } /* vyššia špecificita než default [hidden] - istota nad natívnym atribútom */ /* ══════════════════════════════════════════════════════════════════════════ DESKTOP (>=1200px) - dvojstĺpec: FIXNÁ VÝŠKA BOXU + zaoblené rohy aktívnej prvej/poslednej položky. PROBLÉM (Maroš 2026-08-27): pri prepínaní tabov skákala výška celej sekcie podľa dĺžky textu panelu - namerané 809 / 833 / 853px, teda skok až 44px. RIEŠENIE = grid-stacking, NIE pevná px výška (tá by sa rozbila pri inom texte, inom jazyku aj na inej šírke): všetky panely UŽ sedia v tej istej bunke (`grid-column: 2; grid-row: 1/-1` vyššie), len ich `[hidden]` doteraz vyhadzoval z toku cez `display: none`, takže riadok sa sizoval podľa PRÁVE AKTÍVNEHO panelu. Tu sa `display` vracia späť do toku a skrytie rieši `visibility: hidden` - prvok si drží miesto, takže bunka sa nasizuje podľa NAJVYŠŠIEHO panelu a pri prepínaní sa už nehne. Výška boxu = max(9x82 tabov, najvyšší panel); kratšie panely majú prázdne miesto pod obsahom (zámer). 🔴 PRÍSTUPNOSŤ + SEO: obsah VŠETKÝCH panelov zostáva v HTML (Jánova požiadavka - žiadny AJAX), `visibility: hidden` ho ale korektne skrýva aj pred čítačkami a vyradí ho z tab poradia, takže tabovať sa dá len do aktívneho panelu. `hidden` atribút v DOM ostáva (JS ho ďalej prepína), len jeho `display: none` je tu prebité - preto to musí byť `visibility: hidden`, inak by skryté panely ostali čitateľné pre AT. MOBIL/TABLET (<=1199.98px) sa NEMENÍ - accordion tam potrebuje panely v toku pod svojím tabom, takže `display: none` zo základného pravidla vyššie tam platí ďalej (media query sú disjunktné). ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1200px) { /* Tab vyplní celý (rovnomerný) riadok mriežky namiesto sedenia pri jeho vrchu - tým zmiznú medzery medzi tabmi a POSLEDNÝ tab dosadne presne na spodok karty, takže `overflow: hidden` + `border-radius` kontajnera mu oreže spodné rohy. `min-height` drží Figma hodnotu 82px ako podlahu (rovnaká hodnota je aj v `minmax()` riadkov vyššie). */ .zn-tl__tab { height: auto; min-height: 82px; } /* Neaktívne panely ostávajú v toku (drží výšku bunky), len sú neviditeľné. */ .zn-tl__panel[hidden] { display: flex; visibility: hidden; } /* 🔴 AKTÍVNA POLOŽKA NEMÁ ŽIADNY VLASTNÝ `border-radius` - a je to zámer. Zaoblenie jej vonkajších (ľavých) rohov robí VÝHRADNE `overflow: hidden` + `border-radius` KARTY (`.zn-tl__list`), takže: - vľavo hore (1. položka) / vľavo dole (posledná) sa žltá plocha oreže do oblúka karty - bez toho, aby ho musel kresliť sám tab, - na strane k PANELU žiadny roh nevzniká (žltá pokračuje rovno a mizne pod bielym panelom - viď prekryv nižšie), - oranžová spodná linka NEKOPÍRUJE oblúk: je to rovná `border-bottom` hrana, ktorú clip na rohu jednoducho odstrihne, takže ide rovno až po okraj (presne ako Figma). Predošlá verzia mala `border-radius` na `.zn-tl__pair:first/:last-child .zn-tl__tab.is-active` - to zaobľovalo OBE strany a oranžová linka sa okolo rohu zatáčala (Marošov nález 2026-08-27). Odstránené. */ /* PREKRYV PANELU (Figma 629:23128, overené geometriou + pixel scanom, nie odhadom): Tabs Menu je `x=0 w=400`, jednotlivé tab items tiež `x=0 w=400` - teda aktívna položka NIE JE širšia než stĺpec. Prekryv robí PANEL: "Element / Card / Complex" má `x=384 w=896`, takže zasahuje 16px DO stĺpca tabov a je vykreslený NAD ním (400 + 896 = 1296 > 1280 šírky karty). Pixel scan Figma renderu to potvrdil: v strede aktívnej položky končí žltá (255,251,240) presne na paneli, nie na hrane stĺpca; a zvislý sken 2px vpravo od hrany panelu ukazuje na prvých ~3 riadkoch ešte žltú - to je výrez pod zaobleným ROHOM PANELU, cez ktorý presvitá tab za ním. Preto `margin-left: -16px` (border box 384..1280 = Figma 896) + `z-index` nad aktívnym tabom, ktorý má `z-index: 1` kvôli tieňu. Bez toho z-indexu by aktívny tab prekryl panel, nie naopak. */ .zn-tl__panel { margin-left: -16px; position: relative; z-index: 2; } } .zn-tl__panel-body { display: flex; flex-direction: column; gap: var(--space-8); /* div-medium 32, medzi textovým blokom a Actions */ padding: var(--space-12); /* div-large / section-small 48 */ } .zn-tl__panel-title { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: 2.5rem; /* 40 - Figma literál, nezodpovedá H1 tokenu */ line-height: 1.1; color: var(--color-text); } .zn-tl__panel-title-accent { font-style: italic; font-weight: var(--weight-tagline); /* žiadny vlastný font-size - dedí 40 z .zn-tl__panel-title (rovnaká JSX-literál pasca ako inde, interné poznámky 2026-08-26; tu OBE spany v Figma JSX zdieľajú jeden

bez per-span veľkosti, takže dedenie je isté). */ } .zn-tl__panel-text { margin: 0; font-family: var(--font-display); font-size: var(--text-base); /* Text/Regular/Normal 16 */ line-height: 1.5; color: var(--color-text); } .zn-tl__actions { display: flex; align-items: center; gap: var(--space-6); } /* 24 */ .zn-tl__actions .btn--link { --btn-arrow-frame: 32px; } .zn-tl__panel-media { position: relative; width: 100%; aspect-ratio: 624 / 360; margin-top: auto; overflow: hidden; } .zn-tl__panel-media::after { /* Figma gradient overlay (teal fade dole), farba rgb(27,128,152) = --color-secondary-dark */ content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(27, 128, 152, 0) 18.511%, rgba(27, 128, 152, .4) 100%); pointer-events: none; } /* Figma NEPOUŽÍVA object-fit:cover (symetrický crop) - obrázok je manuálne umiestnený asymetricky, presahuje dole cez overflow:hidden kontajnera (bleed), naľavo/napravo NEsiaha po okraj. Presné % z get_design_context (629:23128 desktop, 1201:62784 mobil - mobil má iný left/top posun, width/height % rovnaké). Audit 2026-08-26. */ .zn-tl__panel-img { display: block; position: absolute; top: 0; left: 5.57%; width: 85.84%; height: 101.83%; max-width: none; object-fit: cover; /* poistka pre orezanie vlastného pomeru strán assetu */ } /* ══ Tablet/mobil (≤1199.98px) - stack, Figma presné hodnoty len pri 767.98 ══ */ @media (max-width: 1199.98px) { .zn-tl__list { display: flex; flex-direction: column; grid-template-columns: none; grid-template-rows: none; } .zn-tl__tab { grid-column: auto; } .zn-tl__panel { grid-column: auto; grid-row: auto; height: auto; /* Accordion: panel sedí PRIAMO pod svojím (aktívnym) tabom - Figma mobil node (1201:62784) má na paneli border-left/right/bottom BEZ top a radius len na spodných rohoch, nie na všetkých 4 (hore nadväzuje na tab bez medzery). */ border-top: 0; border-radius: 0 0 var(--radius-base) var(--radius-base); } } /* ══ Mobil (≤767.98px) - hodnoty z Figma mobil frame 1201:62784 ══ */ @media (max-width: 767.98px) { .zn-tl { padding-inline: var(--space-4); /* Page Padding mobil 16 */ border-radius: 0 0 24px 24px; /* Radius/Large mobil 24 (desktop Radius/XLarge 40) - cez get_variable_defs na 1201:62784, nie JSX odhad. */ } .zn-tl.zn-block { --zn-pt-m: var(--space-8); --zn-pb-m: var(--space-4); } /* section-small mobil 32 / div-small mobil 16 */ .zn-tl__heading { font-size: 2.5rem; } /* Size/H1 mobil 40 */ /* akcent dedí (žiadny override) - rovnaký princíp ako .zn-tl__panel-title-accent vyššie */ .zn-tl__tab { padding: var(--space-4) var(--space-5); /* py 16 / px 20 (div-small / div-medium mobil) */ font-size: 1.25rem; /* Size/H5 mobil 20 (desktop 24) */ } .zn-tl__panel-body { padding: var(--space-6); } /* div-large mobil 24 (desktop 48) */ .zn-tl__panel-title { font-size: 2rem; } /* 32 - Figma mobil literál (desktop 40) */ /* akcent DEDÍ 32 (žiadny override) - predošlá hodnota 2.5rem/40 bola nesprávna. Zmerané ink-width proti Figma 1201:62784 @393 (nie od oka, nie z JSX literálu): „so zákazníkmi" má vo Figme 195 px; náš render @40px = 243 px, @32px = 195 px. Kalibrácia tým istým meraním na base riadkoch sedí (158/171 vs Figma 159/171), takže rozdiel je skutočný, nie meracia chyba. Rovnaká JSX-literál pasca ako inde - interné poznámky 2026-08-26. */ .zn-tl__panel-text { font-size: var(--text-sm); } /* Size/Regular mobil 14 (desktop 16) */ .zn-tl__panel-img { left: 7.2%; top: 1.3%; } /* mobil (1201:62784) má iný posun než desktop (5.57%/0%), width/height % ostávajú rovnaké (85.84%/101.83%). */ }