/* ══════════════════════════════════════════════════════════════════════════ Zenturi - Hero Demo (úvodná sekcia stránky "Kontaktovať obchod") Figma "VypocetCeny-R" (795:37713) - 6. význam tohto recyklovaného Figma layer názvu v projekte (1: pricing-calculator, 2: pricing-compare, 3: compare-cta, 4/5: status-contact) - nesúvisí s cenami, je to demo-CTA hero. Tmavá navy karta (--color-text, rovnaký princíp ako feature-dark), nadpis AJ akcent OBOJE 56px (nie asymetrický split ako hero-status - Figma tu ukazuje rovnakú veľkosť pre obe časti, over pred kopírovaním vzoru). Jedno CTA tlačidlo `.btn--white` (DS "Primary na tmavom"), veľkosť 60px (CLAUDE.md: "len veľkosť/layout, napr. hero 60px" - button vzhľad sa NEdefinuje nanovo). Obrázok vpravo bleeduje k pravému okraju karty (card padding nemá pr, len pt/pl/pb - rovnaký asymetrický vzor ako hero-status/ hero-level2), gradient fade do navy farby karty na spodku obrázka. Sekcia má DVOJVRSTVOVÉ pozadie z Figmy: solid bg-medium + biely gradient fade zhora (nadväzuje plynulo na biely navbar nad touto sekciou). Vlnitý spodný okraj karty = rovnaká wave.svg technika/asset ako hero- level2/hero-status/status-contact (skopírovaný súbor, nie nový export). MOBIL: node 1202:138623 (393px frame) dodaný Marošom 2026-07-24, implementovaný 1:1 (get_design_context + get_variable_defs, viď komentáre pri @media pravidle). TABLET (768-1199px): Figma preň nemá spec, ostáva generický medzikrok. ══════════════════════════════════════════════════════════════════════════ */ .zn-hdm { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 43.222%), var(--color-bg-medium); padding-inline: var(--space-16); /* Page Padding/padding-global 64 */ } .zn-hdm.zn-block { --zn-pt: var(--space-6); --zn-pb: var(--space-6); } /* Div Padding/div-padding-small 24 */ .zn-hdm__container { max-width: var(--container-max); margin-inline: auto; position: relative; } .zn-hdm__card { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-12); /* Div Padding/div-padding-large 48 */ background: var(--color-text); /* #023047 - rovnaký princíp ako feature-dark */ padding: var(--space-12) 0 var(--space-8) var(--space-12); /* pt48/pr0/pb32/pl48 */ border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* Radius/XLarge 40 */ overflow: hidden; } /* ── Textový stĺpec ──────────────────────────────────────────────────────── */ .zn-hdm__column { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); /* Figma Frame 15958 gap 32 */ padding-block: var(--space-6); /* Figma py 24 */ } .zn-hdm__heading { margin: 0; width: 100%; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-7xl); /* Size/H1 56 - OBOJE (regular aj accent) */ line-height: 1.1; color: var(--color-white); } .zn-hdm__heading-accent { display: inline; font-style: italic; font-weight: var(--weight-tagline); color: var(--color-secondary); /* #219ebc - POZOR, INÁ farba než sales-contact accent (secondary-dark) */ } .zn-hdm__text { margin: 0; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-lg); /* Size/Medium 18 */ line-height: 1.5; color: var(--color-white); } /* CTA - reuse .btn/.btn--white, len veľkosť sa mení (CLAUDE.md mandát: button vzhľad sa v bloku NIKDY nedefinuje nanovo). POZOR kaskáda (CLAUDE.md): components.css (.btn { height:48px }) sa načíta PO blokových style.css - jednotriedne `.zn-hdm__cta { height:60px }` by PREHRALO (rovnaká špecificita, components.css je neskôr) - preto 2-triedna špecificita `.zn-hdm__card .zn-hdm__cta` (nález Maroš: "tlačidlo má úplne iné rozmery" - toto bola príčina, tlačidlo mlčky spadlo na sitewide 48px). */ .zn-hdm__card .zn-hdm__cta { height: 60px; font-size: var(--text-lg); /* Button Font Size 18 (desktop, väčšie než sitewide .btn 16) */ margin-top: var(--space-6); /* Figma Frame 15984 pt 24 */ } /* ── Obrázkový panel (bleeduje k pravému okraju karty) ───────────────────── */ .zn-hdm__visual { position: relative; flex: 1 1 0%; min-width: 0; align-self: stretch; border-radius: var(--radius-base) 0 0 var(--radius-base); /* Radius/Base 16, len ľavá strana */ overflow: hidden; } /* Gradient fade do navy LEN pri vlastnom nahranom obrázku (Multimédiá). POZOR - theme default `cover.png` ho NESMIE dostať: je to flattened export node 1026:50878 a ten gradient je súčasťou TOHO NODE (get_design_context: `bg-gradient-to-b from-[39.042%] from-[rgba(2,48,71,0)] to-[Scheme A/Background Light]`), takže je už ZAPEČENÝ v PNG. Aplikovať ho ešte raz cez CSS = dvojité stmavenie, ktoré zožralo klávesnicu notebooku (nález Maroš 2026-07-24; nameraný jas panelu vo výške 75 %: 95 pri samotnom exporte vs 62 s CSS gradientom navyše). Nahraný obrázok zapečený fade nemá, tomu ho teda dorobíme cez túto triedu (pridáva template.php). */ .zn-hdm__visual--custom::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 48, 71, 0) 39.042%, var(--color-text) 100%); pointer-events: none; } /* VYRIEŠENÉ (v1.20.5): `cover.png` je teraz PRIAMY EXPORT node 1026:50878 z Figmy (596×477 = presne bounding box tohto panelu), takže žiadny CSS trik netreba - dočasný `transform: scale()` odstránený. Prečo predchádzajúce pokusy zlyhali: `download_assets` na tomto node vrátil dva `rawImages` - a ten väčší (1500×1125) má **identický md5 s pôvodným cover.png**. Zdrojová bitmapa teda bola po celý čas správna; Figma na ňu vo vnútri frame-u „Image-aspect-ratio" aplikuje vlastný crop/zoom (displej zväčšený, zapustený, orezaný zospodu). Tá transformácia je súčasťou FRAME-u, nie súboru, preto sa nedala replikovať ani `object-fit`-om, ani uniformným `scale()` (meranie vtedy ukázalo 2× rozpor: podľa šírky displeja ~1.99, podľa výšky ~1.06). Riešenie = použiť flattened `export` toho node, kde je crop už zapečený. Export má navy pozadie zapečené (0 % priehľadnosti) - na navy karte splynie, `::after` gradient nad ním funguje bez zmeny. `contain` (nie `cover`): export má pomer 596×477 = 1.249, panel je 1.333 (jeho výšku určuje textový stĺpec, nie fixný ratio). Zmerané proti Figme (bounding box displeja): cieľ š 79 % / v 55 % / horný okraj 8 %; `cover` š 79 % / v 58 % / okraj 5 % (trafí šírku, ale ORÍZNE vrch laptopu); `contain` š 74 % / v 55 % / okraj 8 % (výška aj okraj presne, celá kompozícia zachovaná). Letterbox pruhy po stranách sú neviditeľné - navy obrázka na navy karte. */ .zn-hdm__visual-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } /* ── Vlnitý spodný okraj karty (rovnaká technika ako hero-status/status- contact - viď ich style.css pre plný komentár ku geometrii) ── */ .zn-hdm__wave { position: relative; z-index: 1; display: flex; width: 100%; margin-top: -1px; } .zn-hdm__wave-piece { display: block; flex: 1 1 0%; min-width: 0; width: 100%; height: auto; aspect-ratio: 480 / 34; } .zn-hdm__wave-piece:first-child { margin-right: -3.415%; } /* rovnaký pomer ako ostatné desktop inštancie tohto assetu */ /* ══ Tablet (≤1199.98px) - generický medzikrok, Figma preň nemá spec ══ */ @media (max-width: 1199.98px) { .zn-hdm__card { flex-direction: column; align-items: stretch; padding: var(--space-8); gap: var(--space-8); } .zn-hdm__visual { width: 100%; aspect-ratio: 596 / 477; border-radius: var(--radius-base); } } /* ══ Mobil (node 1202:138623, 393px frame) - Figma dev-mode + get_variable_defs overené 1:1 (Maroš dodal linky 2026-07-24). "Variable módy" pasca potvrdená znova: raw JSX ukazuje `text-[56px]` na nadpise/akcente LITERÁLNE (nie var()), ale get_variable_defs na tomto mobil node vracia "Size/H1":"40" - rovnaký sitewide vzor 40px na mobile ako ostatné heading bloky, potvrdené, nie len odhad ako predtým. Tlačidlo NEmení rozmery oproti desktopu (height 60, font 18, šírka auto/227px "Button:60" aj "Button Font Size:18" vyšli rovnaké ako desktop) - preto tu NIE JE žiadny .zn-hdm__cta override, desktop pravidlo platí aj na mobile bez zmeny. ══ */ @media (max-width: 767.98px) { /* --zn-pt-m/--zn-pb-m (nie holé --zn-pt/--zn-pb) - components.css .zn-block inak PRI ≤767px hodnotu ešte raz prepolví (bug nájdený 2026-07-24 na hero-status/status-list/status-contact, opravené konzistentne aj tu). Page Padding/padding-global aj Div Padding/div-padding-small sa v mobil móde OBIDVE rozlíšia na 16 (--space-4) - zhoda so sitewide fallbackom. */ .zn-hdm { padding-inline: var(--space-4); } .zn-hdm.zn-block { --zn-pt-m: var(--space-4); --zn-pb-m: var(--space-4); } .zn-hdm__card { flex-direction: column; align-items: stretch; gap: 40px; /* Figma "Column" gap 40 - literálna hodnota, nie token */ padding: var(--space-4) var(--space-4) var(--space-5) var(--space-4); /* pt16/px16/pb20 (div-small/div-small/div-medium) */ border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* Radius/Large 24 */ } .zn-hdm__column { gap: var(--space-5); padding-block: 0; } /* Div Padding/div-padding-medium 20 (nie 24 ako desktop) */ .zn-hdm__heading { font-size: 2.5rem; } /* Size/H1 40 - POTVRDENÉ cez get_variable_defs, nie odhad */ .zn-hdm__heading-accent { font-size: 2.5rem; } .zn-hdm__text { font-size: var(--text-base); } /* Size/Medium 16 - potvrdené */ .zn-hdm__visual { width: 100%; aspect-ratio: 596 / 477; /* Figma mobil panel 329×263.2 = rovnaký pomer 1.25 */ border-radius: var(--radius-base) 0 0 var(--radius-base); } .zn-hdm__wave-piece:first-child { margin-right: -14.3%; } /* prepočet z Figma -52px/361px kontajner ≈ -14.4%, zhoda s ostatnými 361px-kartovými blokmi tejto session */ }