/* ══════════════════════════════════════════════════════════════════════════ Zenturi - Navy CTA so zoznamom (Figma „VypocetCeny-R" 768:43155, kontajner 768:43156, desktop 1280) Audit voči `compare-cta` / `media-cta --dark` / `feature-dark` je v hlavičke template.php. Zdieľané ostáva: tokeny, `.btn`, knižnica ikon a navy vlnka (`assets/img/media-cta/wave-dark.svg` - ten istý súbor, nie kópia). Sekcia: Figma 768:43155 je 1440 × 773,71, kontajner na (80, 16) vysoký 677,71 → pt 16, pb 80. Kontajner = panel (631) + vlnka (46,71), presne. MOBIL: Figma frame NEDODANÝ - hodnoty pri @media sú konvencia témy. ══════════════════════════════════════════════════════════════════════════ */ .zn-chk { background: var(--color-bg-medium); /* Scheme A/Background Medium #ecf2f4 */ padding-inline: var(--space-16); /* Page Padding/padding-global 64 */ } .zn-chk.zn-block { --zn-pt: var(--space-4); /* div-padding-xsmall 16 */ --zn-pb: var(--space-20); /* section-medium 80 */ } .zn-chk__container { position: relative; max-width: var(--container-max); /* Container/container-large 1280 */ margin-inline: auto; } /* Panel: Figma „Component" 768:43157 = 1280 × 631, pt 80 / pr 0 / pb 48 / pl 80. `pr: 0` je zámer - obrázok sa dotýka pravej hrany panelu (row 1200 na x 80 končí presne na 1280). Horné rohy 40, spodné 0 (nadväzuje vlnka). */ .zn-chk__panel { position: relative; z-index: 2; background: var(--color-text); /* Scheme A/Text #023047 */ padding: var(--space-20) 0 var(--space-12) var(--space-20); /* 80 / 0 / 48 / 80 */ border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Radius/XLarge 40 */ overflow: hidden; } /* „div.row" 768:43158 = 1200 × 503, gap 48, items-center. */ .zn-chk__row { display: flex; align-items: center; gap: var(--space-12); /* div-padding-large 48 */ } /* Ľavý stĺpec „div" 768:43159 = 558 × 503, py 6, gap 32. Kontrola skladby: 6 + 164 (skupina) + 32 + 215 (zoznam) + 32 + 48 (tlačidlo) + 6 = 503. ✓ */ .zn-chk__column { flex: 0 1 558px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); /* div-padding-medium 32 */ padding-block: 6px; /* Figma literál, nie token */ } /* „Frame 15977" 768:43160 - štítok + nadpis, gap 8. */ .zn-chk__headline { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); /* 8 */ width: 100%; } /* ── Štítok (Figma „Tag" 768:43161, 108 × 32) ─────────────────────────────── px 10 / py 4, gap 4, radius 8, ikona 18, text 14 / 650. ⚠️ FARBY SÚ ZMERANÉ Z RENDERU, nie z design contextu - ten hlási komponent v jeho svetlom defaulte (biele pozadie, rám `#fb8500`, text `#023047`), lebo inštancia sedí na navy paneli. Namerané v ploche štítku: pozadie `rgb(2,48,71)` = #023047, rám `rgb(251,210,106)` = #fbd26a, text `rgb(255,255,255)`. Rám cez `box-shadow: inset`, NIE `border`: Figma stroke je INSIDE, kým `border` by pri šírke danej obsahom pridal 2px (CLAUDE.md, bento-tabs v1.21.7). Ikona s `flex-shrink: 0` - v natesnanom riadku by sa inak scvrkla na 0. */ .zn-chk__tag { display: inline-flex; align-items: center; gap: var(--space-1); /* 4 */ height: 32px; margin: 0; padding-inline: 10px; /* Figma literál */ border-radius: var(--radius-sm); /* Radius/Small 8 */ background: var(--color-text); /* #023047 */ box-shadow: inset 0 0 0 1px var(--color-primary-light); /* #fbd26a */ color: var(--color-white); } .zn-chk__tag-icon { flex-shrink: 0; width: 18px; height: 18px; display: block; } /* Text/Small/Semi Bold: 14 / 1.5, weight 650. */ .zn-chk__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; } /* Nadpis: Heading/H1 56 / 1.1, biely. Akcent „fakturáciu zadarmo" je Mix Regular Italic - LEN iný rez, NIE iná farba (zmerané: oba riadky nadpisu sú `rgb(255,255,255)`). Preto sa farba akcentu nenastavuje a pole sa volá „Nadpis - italic časť" (CLAUDE.md). */ .zn-chk__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-white); } .zn-chk__heading-accent { font-style: italic; font-weight: var(--weight-tagline); /* Mix Regular Italic 420 */ color: inherit; } /* ── Zoznam (Figma „List" 768:43190 = 558 × 215) ──────────────────────────── 5 položiek po 43 bez medzier medzi nimi (5 × 43 = 215 ✓), každá py 8, gap ikona↔text 12, ikona 24, text 18 / 1.5 weight 650 biely. */ .zn-chk__list { list-style: none; margin: 0; padding: 0; width: 100%; } .zn-chk__item { display: flex; align-items: flex-start; gap: var(--space-3); /* 12 */ padding-block: var(--space-2); /* 8 */ } /* ⚠️ ZELENÁ NIE JE V PALETE TÉMY. Obe hodnoty sú ZMERANÉ z Figma renderu na navy pozadí (design context farby tejto ikony nehlási vôbec): disk (výplň) #2C7F09 - vzorkované na r = 5,7 / 6,0 / 7,1 od stredu, všade rovnaká hodnota, teda plná farba prstenec + fajka #49D20E - najsýtejší bod fajky; tenké ťahy sú inde zmiešané s pozadím (namerané #3EB20C / #38A30B) `ico-check-ring.svg` má výplň disku zviazanú s `--zn-ico-soft-opacity` (default 0,25) - tu sa preto dvíha na 1, inak by disk vyšiel priesvitný. Premenné v tom súbore SÚ (overené v ňom, nie predpokladané) - kedysi mal farby natvrdo a prefarbenie na ňom ticho zlyhávalo (CLAUDE.md). ⏳ Ak Ján zelenú potvrdí, patrí do theme.json ako token, nie sem. */ .zn-chk__item-icon { flex-shrink: 0; /* ikona vo flex riadku (CLAUDE.md) */ width: 24px; height: 24px; display: block; --zn-ico-main: #49D20E; --zn-ico-soft: #2C7F09; --zn-ico-soft-opacity: 1; } /* Text/Medium/Semi Bold: 18 / 1.5, weight 650. */ .zn-chk__item-text { font-family: var(--font-display); font-size: var(--text-lg); /* Size/Medium 18 */ font-weight: var(--weight-semibold); /* 650 */ line-height: 1.5; color: var(--color-white); } /* Tlačidlo = globálna `.btn.btn--primary` bez odchýlky (h 48, px 16 / py 10, radius 12, bg + border #ffb703, 16 / 650 čierne). Žiadna ikona - Figma tu šípku nemá, takže ani `.btn--arrow`. */ .zn-chk__actions { display: flex; align-items: center; } /* ── Obrázok (Figma „Image-aspect-ratio" 768:43165 = 594 × 475,2) ─────────── Radius 16 LEN vľavo (tl + bl) - vpravo lícuje s hranou panelu. ⚠️ NAVY FADE JE V ASSETE, NIE V CSS - a je to vedomá výnimka. Node je kompozit DVOCH rastrov (3456 × 1990 + 432 × 249 s alfou) s ručným cropom, takže sa z nich čistý výrez zrekonštruovať nedá: sweep mierky, posunu a orezu proti hornej tretine panelu (nad začiatkom gradientu) opakovane utekal na okraj mriežky, kým hlásené hodnoty z design contextu (mierka 173,67 %, left −15,74 %) dali MAE 17,8 oproti 8,4 pri najlepšom fite - teda ani tie nesedia. Preto sa nasadil EXPORT NODU v 2× (1188 × 951 = presne 2× slot), ktorý proti výrezu z Figma renderu sedí na MAE 2,17. Gradient v ňom je zapečený (odchýlka od navy klesá po výške na 0), takže sa tu CSS gradient ZÁMERNE NEAPLIKUJE - inak by sa vykreslil dvakrát (CLAUDE.md, precedens hero-demo v1.20.6 a bento-1). ⏳ SPRÁVNE RIEŠENIE je export bez gradient vrstvy od Jána; potom sa fade presunie do CSS a dostane ho aj obrázok nahraný cez Multimédiá. */ .zn-chk__visual { flex: none; width: 594px; aspect-ratio: 594 / 475.2; border-radius: var(--radius-base) 0 0 var(--radius-base); /* 16 vľavo */ overflow: hidden; } .zn-chk__visual-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Vlnka - prekryv 3,415 % je vlastnosť assetu, nie kontajnera (výpočet v CLAUDE.md). Figma tu opäť hlási 39 j namiesto 43,558. */ .zn-chk__wave { position: relative; z-index: 1; display: flex; width: 100%; margin-top: -1px; } .zn-chk__wave-piece { display: block; flex: 1 1 0%; min-width: 0; width: 100%; height: auto; aspect-ratio: 480 / 34; } .zn-chk__wave-piece:first-child { margin-right: -3.415%; } /* ══ Tablet (≤1199.98px) - Figma preň nemá spec ══ Fixné 558 + 594 sa do užšieho panelu nezmestia, preto oba prejdú na pružné a obrázok si drží pomer slotu. */ @media (max-width: 1199.98px) { .zn-chk { padding-inline: var(--space-8); } .zn-chk__panel { padding: var(--space-12) 0 var(--space-8) var(--space-12); } .zn-chk__row { gap: var(--space-8); } .zn-chk__column { flex: 1 1 0%; } .zn-chk__visual { flex: 1 1 0%; width: auto; min-width: 0; } } /* ══ Mobil (≤767.98px) - Figma frame NEDODANÝ ═════════════════════════════ Panel stackuje na stĺpec, obrázok už nebleeduje (padding zo všetkých strán). Hodnoty podľa konvencie témy: page-padding 16, Radius/Large 24, H1 40. Section padding cez `-m`, NIE holé `--zn-pt` (CLAUDE.md). ══ */ @media (max-width: 767.98px) { .zn-chk { padding-inline: var(--space-4); } .zn-chk.zn-block { --zn-pt-m: var(--space-2); --zn-pb-m: var(--space-12); } /* 8 / 48 */ .zn-chk__panel { padding: var(--space-6); /* 24 zo všetkých strán */ border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* Radius/Large 24 */ } .zn-chk__row { flex-direction: column; align-items: stretch; gap: var(--space-6); /* 24 */ } .zn-chk__column { flex: 0 0 auto; padding-block: 0; gap: var(--space-6); } .zn-chk__heading { font-size: 2.5rem; } /* Size/H1 (mobil) 40 */ .zn-chk__item-text { font-size: var(--text-base); } /* Size/Medium (mobil) 16 */ .zn-chk__visual { flex: 0 0 auto; width: 100%; border-radius: var(--radius-base); /* na mobile nebleeduje - radius dokola */ } /* Prekryv vlnky je na mobile o jednu periódu väčší - rovnaká derivácia ako v hero-simple (0,06605 + 0,18679) / (2 − 0,25284) = 14,472 %. */ .zn-chk__wave-piece:first-child { margin-right: -14.472%; } }