/* ══════════════════════════════════════════════════════════════════════════ Zenturi - Panel s obrázkom a CTA (Figma 821:27739) panel 821:27741 1280 × 470 vlnka 821:27787 1280, súčasť kontajnera (NIE samostatný `wave-sep` blok) ⚠️ Figma layer sa (už zase) volá „VypocetCeny-R" a s cenami nesúvisí - odôvodnenie slugu aj audit reuse sú v hlavičke template.php. FARBY SÚ OPROTI `hero-simple` PREHODENÉ: sekcia je BIELA a panel bg-medium (tam je to naopak). Overené meraním na Figma rendere 821:27739: štyri rohy sekcie (255,255,255), vnútro panelu (236,242,244), pod vlnkou zase biela. Sedí to aj s poradím na stránke - `timeline` nad tým končí bielou. VLNKA = kópia `hero-simple/wave.svg` prefarbená na farbu PANELU (#ecf2f4). Zvyšok súboru je bit-to-bit rovnaký (overené porovnaním po odstránení `fill` atribútov). Farba vlnky sa vždy riadi farbou panelu. MOBIL: Figma frame NEDODANÝ - hodnoty pri @media nižšie sú konvencia. ══════════════════════════════════════════════════════════════════════════ */ .zn-mc { position: relative; background: var(--color-bg); /* biela sekcia */ padding-inline: var(--space-16); /* Page Padding/padding-global 64 */ } /* Sekcia 821:27739 je 612,71 vysoká, Container v nej na y = 16 a obsah 516,71 → pt 16, pb 80. Nie je to preklep: hore je len 16, dole 80. */ .zn-mc.zn-block { --zn-pt: var(--space-4); --zn-pb: var(--space-20); } .zn-mc__container { position: relative; max-width: var(--container-max); /* Container 1280 */ margin-inline: auto; } .zn-mc__panel { position: relative; z-index: 2; background: var(--color-bg-medium); /* Scheme A/Background Medium #ecf2f4 */ /* pt 80 (div-padding-xlarge) / px 80 / pb 48 (div-padding-large). POZOR: dole je 48, NIE 80 - potvrdené geometriou (470 = 80 + 342 + 48). */ padding: var(--space-20) var(--space-20) var(--space-12); border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Radius/XLarge 40, len hore */ } /* Figma „div.row": flex, gap 48, items-start. Ľavý stĺpec je 480, obrázok 553 - dokopy 1081 v riadku širokom 1120, takže vpravo ostáva 39px voľných. Je to tak vo Figme (riadok je `flex-1`, deti `shrink-0`), preto sa obrázok NEROZŤAHUJE na zvyšok - `flex-grow` ostáva 0. ⚠️ `flex-shrink` ale musí byť 1: šírky sú fixné len pri containeri 1280, teda od 1408px vyššie (1280 + 2× page-padding 64). V pásme 1200-1330 sa container zmršťuje, kým tabletové pravidlo naskočí až na 1199.98 - s `flex: none` tam riadok 1081 pretekal von z panelu. Breakpoint sa NEPOSÚVA, len sa stĺpcom dovolí zmrštiť sa (`min-width: 0` kvôli default `min-width: auto` vo flexe). Pri 1440 sa nič nemení: voľných 39px > 0, takže shrink faktor sa neuplatní. */ .zn-mc__row { display: flex; align-items: flex-start; gap: var(--space-12); /* Div Padding/div-padding-large 48 */ } .zn-mc__column { flex: 0 1 480px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); /* 32 (text blok ↔ CTA) */ /* Figma: pt 16, pb 6. Šestka je Figma literál, nie token - drží výšku riadku na 342 (16 + 240 + 32 + 48 + 6). */ padding-top: var(--space-4); padding-bottom: 6px; } .zn-mc__lede { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); /* 8 (nadpis ↔ text) */ width: 100%; } /* Heading/H1: Sans Regular 56/1.1. Vo Figme je to H1 token, ale SEMANTICKY je to h2 - sekcia je v strede stránky, h1 patrí heru. */ .zn-mc__heading { margin: 0; width: 100%; 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); /* Scheme A/Text #023047 */ } /* Akcent „nášho ekosystému." tečie INLINE za nadpisom, Mix Regular Italic v rovnakej veľkosti, farba `Scheme A/Accent/Secondary Dark`. ⚠️ Ten istý token má v `cta-list` hodnotu #219ebc - TU je #1b8098 (overené per-node cez `get_variable_defs` aj v design contexte). Preto literál, nie `--color-secondary`. */ .zn-mc__heading-accent { font-style: italic; font-weight: var(--weight-tagline); color: #1b8098; /* Scheme A/Accent/Secondary Dark */ } .zn-mc__text { margin: 0; width: 100%; font-family: var(--font-display); font-size: var(--text-lg); /* Size/Medium 18 */ line-height: 1.5; color: var(--color-text); } /* CTA = globálna `.btn.btn--primary` bez odchýlky (#ffb703, 48, radius 12, text 16 w650 čierny). Figma tu ikonu nemá; šírka 168 vyjde z obsahu. */ .zn-mc__actions { display: flex; } /* Obrázok: FIXNÝ slot 553 × 312 s `object-fit: contain`. Fit je ZMERANÝ, nie prevzatý z exportu - zdroj má pomer 1,567, slot 1,772, takže sa nedal odhadnúť: zdroj 1880 × 1200, viditeľný ink (prah 12 nad bg-medium) = (42, 44, 1731, 1083) CONTAIN predikuje v slote x 43,0…493,1 · y 11,4…293,0 (w 450,1 · h 281,6) NAMERANÉ vo Figma rendere x 43…494 · y 11…293 (w 451 · h 282) COVER by dal x 12,4…521,8 (w 509,5) - o 59px širšie, teda vylúčené. `contain` je aj jediný správny fit obsahovo: ilustrácia má logá až pri okrajoch a čokoľvek orezané by useklo niektoré z nich. */ .zn-mc__visual { flex: 0 1 553px; /* shrink: viď poznámka pri `.zn-mc__row` */ min-width: 0; height: 312px; } .zn-mc__visual-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } /* ══════════════════════════════════════════════════════════════════════════ TMAVÝ VARIANT `mc_dark` (Figma 767:28777, stránka „Podporované banky") Tá istá kostra, len navy panel na bg-medium sekcii. Zhodné bez zmeny: padding panelu 80/80/48, radius-xl hore, gap riadku 48, gap stĺpca 32, nadpis 56/1.1, `.btn--primary`, technika vlnky. Preto je to modifier, nie nový blok. ⚠️ Modifier nesie AJ geometriu tejto inštancie (šírka stĺpca 558 namiesto 480, slot 514 × 342,67 namiesto 553 × 312, zarovnanie riadku, veľkosť textu) - Figma ich mení spolu s farbou. Keby raz vznikol tmavý panel s inou geometriou, treba to rozdeliť na dva nezávislé prepínače. Farby (design context 767:28777 + zmerané z renderu): sekcia Scheme A/Background Medium #ecf2f4 (svetlý variant má bielu) panel #023047 (svetlý má #ecf2f4) vlnka #023047 - `wave-dark.svg`, kópia `cta-list/wave.svg`; po odstránení `fill` atribútov bit-to-bit rovnaká ako `wave.svg` (overené md5). Farba vlnky sa VŽDY riadi farbou panelu. Section padding: pt 16 (div-padding-xsmall), pb 112 (section-padding/section-large). Kontrola geometriou: 16 + 470,67 (panel) + 46,71 (vlnka) + 112 = 645,38 = výška node ✓ Mobilné `-m` hodnoty sa NEPREPISUJÚ - platia spoločné zo svetlého variantu (8 / 48); mobilný frame pre tmavú inštanciu dodaný NEBOL. ══════════════════════════════════════════════════════════════════════════ */ .zn-mc--dark { background: var(--color-bg-medium); } .zn-mc--dark.zn-block { --zn-pt: var(--space-4); --zn-pb: var(--space-24); } /* 16 / 112 */ .zn-mc--dark .zn-mc__panel { background: var(--color-text); } /* #023047 */ /* Figma „div.row" 767:28780 má `items-center` (svetlý variant `items-start`): stĺpec je 322 vysoký v riadku 342,67, teda 10,33 zhora aj zdola. */ .zn-mc--dark .zn-mc__row { align-items: center; } /* Stĺpec 558 (svetlý 480) a py 6 hore aj dole (svetlý pt 16 / pb 6). Odvodenie z 767:28781: Frame 15977 na y = 6, Button končí na 316, výška 322. */ .zn-mc--dark .zn-mc__column { flex: 0 1 558px; padding-top: 6px; } /* Vo Figme je štítok + nadpis vlastná skupina (767:28817, gap 8) a medzi ňou a textom je 32 - opačne než na svetlom variante, kde je nadpis↔text 8. Preto sa gapy prehadzujú medzi `__lede` a `__headline`. */ .zn-mc__headline { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .zn-mc--dark .zn-mc__lede { gap: var(--space-8); } /* skupina ↔ text 32 */ .zn-mc--dark .zn-mc__headline { gap: var(--space-2); } /* štítok ↔ nadpis 8 */ .zn-mc--dark .zn-mc__heading, .zn-mc--dark .zn-mc__text { color: var(--color-white); } /* Text je tu „Text/Regular/Normal" 16, nie 18 ako na svetlom variante. Kontrola: 4 riadky × 24 = 96 = nameraná výška textového nodu 767:28783. */ .zn-mc--dark .zn-mc__text { font-size: var(--text-base); } /* Štítok (Figma „Tag" 767:28808, 95 × 32): px 10 / py 4, gap 4, radius 8, 1px orámovanie #fbd26a (= --color-primary-light; design context ho volá „Accent/Primary Dark", ale hodnota sedí na light), pozadie = farba panelu. Rám cez `box-shadow: inset`, NIE `border`: Figma stroke je INSIDE, kým `border` by pri šírke danej obsahom pridal 2px (95 → 97; CLAUDE.md, nález bento-tabs v1.21.7). Výšku 32 by border-box udržal, šírku nie. Ikona 18 × 18 s `flex-shrink: 0` - v natesnanom mobilnom riadku by sa inak scvrkla na 0 (CLAUDE.md). Prefarbenie na `primary` robí `zenturi_the_icon()` v šablóne; ikona `ico-prijmy-a-vydavky` premenné `--zn-ico-*` obsahuje (overené v súbore, nie predpokladané). */ .zn-mc__tag { display: inline-flex; align-items: center; gap: var(--space-1); /* 4 */ height: 32px; margin: 0; padding-inline: 10px; /* Figma literál, nie token */ border-radius: var(--radius-sm); /* Radius/Small 8 */ background: var(--color-text); /* Scheme A/Foreground #023047 */ box-shadow: inset 0 0 0 1px var(--color-primary-light); /* #fbd26a */ color: var(--color-white); } .zn-mc__tag-icon { flex-shrink: 0; width: 18px; height: 18px; display: block; } /* Text/Small/Semi Bold: 14 / 1.5, weight 650. */ .zn-mc__tag-text { font-family: var(--font-display); font-size: var(--text-sm); /* Size/Small 14 */ font-weight: var(--weight-semibold); /* 650 */ line-height: 1.5; white-space: nowrap; } /* Obrázok: slot 514 × 342,67 (svetlý 553 × 312), radius 16 na VŠETKÝCH rohoch, `cover` + navy fade zdola. Fit aj fade sú ZMERANÉ, nie prevzaté z exportu: VÝREZ - zdroj 592 × 480 (pomer 1,2333) v slote s pomerom 1,5 sa škáluje podľa šírky na 514 × 416,76, teda zvislý presah 74,09. Sweep posunu po 1px, MAE proti hornej tretine panelu z Figma renderu (bez overlaya, výrez na (766, 96)): 20 px 20,41 · 23 px 11,91 · 25 px 4,03 · **26 px 2,78** · 27 px 7,70 · 30 px 17,55 Minimum 26 px = 26 / 74,09 = 35,1 % presahu → `object-position: center 35%`. (Figma export udával 25,56 px, čo sedí - tu to ale sedí aj po meraní.) FADE - rekonštrukcia panelu bez overlaya, alfa = (lum(B) − lum(A)) / (lum(B) − lum(navy)) len tam, kde je obsah výrazne svetlejší než navy. Profil po 5 % pásoch: 0-40 % alfa 0,000 (plochá) · 42,5 % 0,053 · 62,5 % 0,387 · 82,5 % 0,716 · 97,5 % 0,961 To je PRESNE lineárny nábeh od 39 % do 100 % (predikcia 0,057 / 0,385 / 0,713 / 0,959). Vodorovná zložka je plochá (0,590 / 0,586 / 0,588 v ľavom/strednom/pravom páse), takže gradient je naozaj zvislý - tu sa výnimočne export trafil, ale overené je to meraním (CLAUDE.md: uhol z design contextu je na neštvorcových paneloch nespoľahlivý). */ .zn-mc--dark .zn-mc__visual { position: relative; flex: 0 1 514px; height: 342.67px; border-radius: var(--radius-base); /* Radius/base 16, všetky rohy */ overflow: hidden; } .zn-mc--dark .zn-mc__visual-img { object-fit: cover; object-position: center 35%; } .zn-mc--dark .zn-mc__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 48, 71, 0) 39.042%, #023047 100%); pointer-events: none; } /* Vlnka - prekryv 3.415 % je vlastnosť assetu, nie kontajnera (výpočet a dôvod v CLAUDE.md, sekcia Figma-first). Figma tu má opäť 39 j namiesto 43,558. */ .zn-mc__wave { position: relative; z-index: 1; display: flex; width: 100%; margin-top: -1px; } .zn-mc__wave-piece { display: block; flex: 1 1 0%; min-width: 0; width: 100%; height: auto; aspect-ratio: 480 / 34; } .zn-mc__wave-piece:first-child { margin-right: -3.415%; } /* ══ Tablet (≤1199.98px) - Figma preň nemá spec ══ Fixné 480 + 553 sa do užšieho panelu nezmestia, preto oba stĺpce prejdú na pružné a obrázok si drží pomer slotu (553/312), nech `contain` funguje ďalej. */ @media (max-width: 1199.98px) { .zn-mc { padding-inline: var(--space-8); } .zn-mc__panel { padding: var(--space-12) var(--space-12) var(--space-8); } .zn-mc__row { gap: var(--space-8); } .zn-mc__column { flex: 1 1 0%; width: auto; min-width: 0; } .zn-mc__visual { flex: 1 1 0%; width: auto; min-width: 0; height: auto; aspect-ratio: 553 / 312; } /* Tmavý variant musí zmäknúť rovnako. Pravidlá vyššie sú JEDNOtriedne, kým `.zn-mc--dark .zn-mc__visual` má dve triedy - bez tohto bloku by fixných 514 × 342,67 prežilo aj na tablete a panel by pretiekol. */ .zn-mc--dark .zn-mc__column { flex: 1 1 0%; padding-top: 6px; } .zn-mc--dark .zn-mc__visual { flex: 1 1 0%; height: auto; aspect-ratio: 514 / 342.67; } } /* ══ Mobil (≤767.98px) - Figma frame 1202:124513 (393 × 626,18) ═══════════ Frame dodaný 2026-08-07; dovtedy tu bola konvencia z príbuzných blokov. Odvodenie hodnôt priamo z geometrie nodov: section Container 1202:124514 na y = 8, h 570,18 vo frame 626,18 → pt 8, pb 48 panel div.row 1202:124516 na (16, 16), h 515,62 v Component 555,62 → 16/16/24 stĺpec div 1202:124517 h 306; Frame 15977 na y 16 h 216; Button na y 252 h 48 → pt 16, gap 20 (252 − 232), pb 6 (306 − 300) texty nadpis h 88 = 2 riadky 40/1.1; text h 120 = 5 riadkov 16/1.5 (pri 18/1.5 by 120 nevyšlo na celé riadky) → Size/Medium mobil 16 obrázok Rectangle 5918 329 × 185,62 = pomer 1,77244 = presne slot 553/312 vlnka kúsky 205,5 pri kontajneri 361 → prekryv 50; presná hodnota k = 1 nižšie Prekryv vlnky sa NEPREBERÁ z Figmy - je to hodnota assetu (výpočet nižšie). Section padding cez `-m` premenné, nie holé `--zn-pt` (CLAUDE.md). Nadpis je LITERÁL: `--text-7xl` je clamp a pri 393px vracia spodnú hranicu (38), nie mobilnú hodnotu z dizajnu. ══ */ @media (max-width: 767.98px) { .zn-mc { padding-inline: var(--space-4); } /* Page Padding 16 */ .zn-mc.zn-block { --zn-pt-m: 8px; --zn-pb-m: 48px; } /* Container na y = 8 */ /* Padding panelu: pt/px 16 („Div Padding/div-padding-small" v MOBILNOM móde), pb 24 („div-padding-large" v mobilnom móde). Zmerané na dodanom mobilnom frame 1202:124515: `div.row` sedí na (16, 16) so šírkou 329 v paneli 361 a zospodu ostáva 555,62 − 16 − 515,62 = 24. ⚠️ Design context tu hlási `pt/px 24` a `pb 48` - to sú DESKTOPOVÉ fallbacky tých istých tokenov, rovnaká pasca ako `text-[56px]` pri nadpise (mobilný mód má Size/H1 = 40). Riadiť sa geometriou a `get_variable_defs` na mobilnom node, nie číslami v JSX. Do 2026-08-07 tu bolo 24 dokola (konvencia z čias, keď mobilný frame nebol) - kvôli tomu ostávalo na obsah 313 px a nadpis sa lámal na tri riadky. */ .zn-mc__panel { padding: var(--space-4) var(--space-4) var(--space-6); /* 16 / 16 / 24 */ border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* Radius/Large 24 (desktop 40) */ } .zn-mc__row { flex-direction: column; align-items: stretch; gap: var(--space-6); /* 24 */ } /* Stĺpec drží pt 16 / pb 6 aj na mobile (rovnako ako desktop) a gap 20 - obe hodnoty sú zmerané z frame-u 1202:124513, nie prevzaté z desktopu. */ .zn-mc__column { flex: none; width: 100%; padding-top: var(--space-4); padding-bottom: 6px; gap: 20px; } .zn-mc__heading { font-size: 2.5rem; } /* Size/H1 (mobil) 40 */ .zn-mc__text { font-size: var(--text-base); } /* Size/Medium (mobil) 16 */ /* Slot si drží pomer aj na mobile - Rectangle 5918 (329 × 185,62) je presne 553/312. `flex: none` je tu EXPLICITNE: bez neho by tabletové pravidlo vyššie (`flex: 1 1 0`) v stĺpcovom flexe riadilo výšku cez flex-basis. Fit ostáva `contain` zo základného pravidla - ilustrácia má logá až pri okrajoch, orezanie by niektoré useklo. */ .zn-mc__visual { flex: none; width: 100%; height: auto; aspect-ratio: 553 / 312; } /* Tmavý variant: rovnaké stackovanie, len vlastný pomer slotu a stĺpec bez fixnej šírky. Mobilný frame pre tmavú inštanciu dodaný NEBOL - hodnoty sú prevzaté zo svetlého variantu, mení sa len to, čo je vo Figme iné aj na desktope (pomer slotu 514/342,67, py stĺpca 6, gapy `__lede`/`__headline`). */ .zn-mc--dark .zn-mc__column { flex: none; width: 100%; padding-top: 6px; } .zn-mc--dark .zn-mc__visual { flex: none; width: 100%; height: auto; aspect-ratio: 514 / 342.67; } /* Prekryv vlnky je na mobile INÝ než na desktope - a je to zámer dizajnu: Figma dáva kúsky 205,5 pri kontajneri 361, teda prekryv 50 = 13,85 %, čo je 6,605 % (minimum assetu) + presne JEDNA PERIÓDA vlny (18,679 %). Mobil teda chce o jednu vlnu menej. Geometricky presná hodnota pre k = 1: overlap/w = 0,06605 + 0,18679 = 0,25284 margin-right = 0,25284 / (2 − 0,25284) = 14,472 % Figma 13,85 % je od nej ~1 px vedľa, preto berieme presnú (rovnako ako `hero-simple`). NEPOUŽIŤ -3.415 % - to je k = 0, teda o vlnu viac. */ .zn-mc__wave-piece:first-child { margin-right: -14.472%; } }