/*
* Pás D — ukážka systému. Vzor zo core blokov, nie vlastný blok.
*
* Vycentrovaný nadpis, gradientový panel a pod ním popiska. V paneli je
* `core/tabs` (jadro ho má od WP 7.1) a v každom paneli tabu screenshot appky.
* Vlastný blok tu netreba — jadro pokrýva aj tie taby vrátane prepínania.
*
* Súbor visí na `core/group` (`functions/BlockStyles.php`), lebo vzor nemá typ
* bloku, na ktorý by sa štýl dal zavesiť, a stylesheet témy editor nenačítava.
*
* ── Odkiaľ sú hodnoty ──────────────────────────────────────────────────────
*
* Snímka `2026-09-01 13-25-08` (rám `1280 Uvod (dizajn 1024)`), meraná
* pomerovou metódou — rám 1951 displayed px → 1280 design px.
*
* | Vec | Odmerané |
* |---|---|
* | panel | x 128,6–1150,8 → **1024**, teda obsahový stĺpec |
* | panel výška | y 677,7–1272,8 → **595** (viď poznámku k výške nižšie) |
* | rádius | **12** — pri +12 px od hornej hrany je panel už na plnej šírke |
* | pilulka tabov | **24** od horného okraja panelu, výška **41,3**, rádius **8** |
* | pod pilulkou | **50** (odmerané 48,6: pilulka končí 743,3, okno začína 791,9) |
* | okno appky | **768** široké, vycentrované, **114** od horného okraja panelu |
* | šípky | **63 × 38**, 24 od okrajov, stred **310** od hornej hrany panelu |
* | popiska | ~**24** pod panelom |
*
* Gradient je odmeraný zo štyroch rohov panelu, nie prevzatý z prototypu:
* vľavo hore `#E87DD5`, vpravo hore `#9D5DE9`, vpravo v strede `#4066A2`,
* vpravo dole `#1B7245`. To je paleta projektu po diagonále — ružová →
* fialová → modrá → zelená.
*/
/*
* Gradient je token, lebo ho nesú dva rôzne prvky: na desktope panel (pilulka
* tabov je na ňom), na mobile `.wp-block-tab-panels` (pilulka je nad ním).
* Ružová → fialová → modrá → zelená po diagonále; odmerané rohy sedia na
* `pink`, `purple`, medzičlene a `green`.
*/
.egrant-system-preview {
--egrant-system-preview-gradient: linear-gradient(
135deg,
var(--wp--preset--color--pink, #eb5ed4) 0%,
var(--wp--preset--color--purple, #7654ff) 34%,
var(--wp--preset--color--blue, #3242dc) 67%,
var(--wp--preset--color--green, #007a37) 100%
);
}
.egrant-system-preview__panel {
width: 100%;
box-sizing: border-box;
/*
* Šírka okna appky. Je to token, lebo z nej vychádza aj výška plochy —
* `stage()` v `assets/app/system-preview.js` si ju odtiaľ číta, takže
* breakpoint zostáva jediný a je v CSS.
*
* 768 je logická šírka exportov (1536 / 2, 2880 / 3,75), takže sa UI v okne
* vykresľuje v mierke z dizajnu.
*/
--egrant-system-preview-window: 768px;
background: var(--egrant-system-preview-gradient);
border-radius: var(--wp--custom--radius--lg, 12px);
/* Okno appky je v dizajne odstrihnuté spodnou hranou panelu. */
overflow: hidden;
/* 24 po pilulku tabov (odmerané: pilulka 702 pri paneli od 677,7). */
padding-top: 24px;
/*
* Výška panelu nie je nastavená — vyjde z obsahu: 24 (pilulka) + 42 + 50
* + plocha ukážky. Plocha sa berie z najvyššieho assetu (viď nižšie), takže
* celé to závisí od assetov a nie od čísla v tomto súbore.
*
* Dizajn má panel 595, teda plochu 480,9 (791,9–1272,8). Dva zo siedmich
* našich exportov ju majú presne (481,2 a 481,5), ostatných päť má 453 —
* pod tými presvitá 28 px gradientu, kým neprídu vyššie výrezy.
*/
}
/*
* Taby.
*
* Pilulka je svetlá plocha s aktívnym tabom v čiernej — rovnaká logika ako
* pilulka v hlavičke, preto tie isté tokeny (`base`, `radius.pill`).
*/
.egrant-system-preview__panel .wp-block-tab-list {
display: flex;
justify-content: center;
/* 2 medzi tabmi (prototyp, `.dashboard-tabs`). */
gap: 2px;
width: max-content;
margin-inline: auto;
/* 2 okolo tabov (Lukáš aj prototyp). */
padding: 2px;
background: var(--wp--preset--color--base, #f5f3f1);
/* Rádius **10** — viac než tých 8, ktoré má tab v ňom. Prototyp to má
rovnako (`border-radius: 10px`) a odmerané to sedí: hrana prepínača
dosiahne plnú šírku na +10 px, hrana čierneho tabu už na +6. Keď mali
oba 8, prepínač bol menej zaoblený a tab v ňom pôsobil odrezaný. */
border-radius: 10px;
box-shadow: var(--wp--custom--shadow--lift);
/* 50 pod prepínačom (Lukáš; odmerané 48,6). Nesie to margin a nie
`blockGap` tabov, aby sa nebilo s flow layoutom jadra. */
margin-block-end: 50px;
}
.egrant-system-preview__panel .wp-block-tab-list button {
appearance: none;
border: 0;
cursor: pointer;
background: transparent;
color: var(--wp--preset--color--ink, #141414);
/* 14,4/18/600/0,25 (Lukáš z Figmy aj prototyp). */
font-size: var(--wp--preset--font-size--button, 14.4px);
line-height: 18px;
font-weight: 600;
letter-spacing: 0.25px;
/*
* Šírka vyjde z textu a paddingu **10 / 20** (Lukáš 2026-09-17), nie
* z pevných 100 px. Tie tu boli odmerané z Figmy (prepínač 311 na tri
* taby) a prototyp ich tiež má (`width: 100px`), ale pri dlhšom labeli sa
* text do nich nezmestí — prepínač radšej porastie, než by sa mal lámať.
*
* Padding je na tlačidle **bez ohľadu na stav**: nesmie ho pridávať až
* aktívny tab, inak by sa šírky pri prepnutí menili a pilulky by skákali.
* Preto tu a nie v pravidle pre `[aria-selected]`.
*
* Výška zostáva 38 (10 + 18 riadok + 10), teda to isté, čo mala pevná.
*/
padding: 10px 20px;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
box-sizing: border-box;
/* 8 — menej než prepínač okolo, ktorý má 10. */
border-radius: var(--wp--custom--radius--md, 8px);
/*
* 🔴 **Žiadny prechod.** Bol tu `transition` na `background` aj `color`
* (0,2 s) a práve ten spôsoboval, že pri prepnutí tabu **oba labely na
* chvíľu zmizli** — všimol si to Lukáš.
*
* Odmerané po frameoch (Chrome, `Animation.setPlaybackRate`): v polovici
* prechodu má odchádzajúci tab pozadie `rgba(20,20,20,0.43)` a text
* `#757473`, prichádzajúci `rgba(20,20,20,0.57)` a text `#94938F`. Obe
* dvojice sú sivá na sivej — text sa v strede prechodu stratí a znova
* objaví, čo oko číta ako bliknutie.
*
* Nie je to zle nastavené trvanie, je to podstata krížového prelínania:
* pozadie ide z čiernej do priehľadnej a text z bielej do čiernej, takže
* sa v strede nutne stretnú na tej istej svetlosti. Nepomôže ani nechať
* prechod len na jednom z nich — vtedy text v prvej polovici zmizne úplne
* (biely na svetlej pilulke, resp. čierny na čiernej).
*
* Preto prepnutie skokom, v jednom frame. Berie to aj prechod hoveru;
* pri 4 % rozdiele svetlosti (#E4E2DD na #F5F3F1) to nie je vidieť.
* Keby sa mal pás niekedy hýbať, patrí to na **posúvajúci sa indikátor**
* (čierna pilulka ako samostatná vrstva, ktorá sa presunie), nie na
* prelínanie dvoch stavov.
*/
}
/*
* 🔴 Jadro kreslí aktívnemu tabu **2px spodnú linku** ako indikátor:
*
* :where(.wp-block-tab-list button)[aria-selected=true]::before {
* border-bottom: 2px solid currentColor; bottom: 0;
* }
*
* Na čiernej pilulke je to biela linka po celej šírke spodku — vyzerá to ako
* odrezaný spodok a pri prepnutí tabu **bliká**, lebo sa presúva. Všimol si to
* Lukáš. Tu je aktívny tab označený čiernou plochou, indikátor teda netreba.
* Selektor jadra je vo `:where()`, takže má nulovú špecificitu a stačí ho
* prepísať.
*/
.egrant-system-preview__panel .wp-block-tab-list button::before {
content: none;
}
/* Hover len na neaktívnych — `surface-2` je #E4E2DD, tá istá plocha, akú má
hover v spodnej lište a v prepínači jazykov (prototyp to tak menuje). */
.egrant-system-preview__panel .wp-block-tab-list button:not([aria-selected='true']):hover {
background: var(--wp--preset--color--surface-2, #e4e2dd);
}
.egrant-system-preview__panel .wp-block-tab-list button[aria-selected='true'] {
background: var(--wp--preset--color--ink, #141414);
color: var(--wp--preset--color--base, #f5f3f1);
}
/*
* Okno appky.
*
* 768 je logická šírka exportu (1536 / 2), takže sa obrázok vykresľuje
* v mierke 1:1 z dizajnu — preto nie `width: 100%`, ktoré by ho pri inej
* šírke panelu zväčšilo a UI v ňom by prestalo sedieť s dizajnom.
*/
/*
* Medzi pilulkou a oknom nesmie byť medzera — okno na ňu vo Figme priamo
* nasadá (pilulka 702–744, okno 742).
*
* Flow layout jadra dáva druhému dieťaťu `margin-block-start` z globálneho
* `blockGap` (32) pravidlom `.wp-container-… > * + *`, teda (0,2,0). Moje
* pravidlo muselo ísť na (0,3,0), inak by o tom rozhodovalo poradie načítania
* — odmerané: s `gap: 0` na `.wp-block-tabs` zostal obrázok na 98 namiesto 66.
*/
.egrant-system-preview .egrant-system-preview__panel .wp-block-tab-panels {
margin-block-start: 0;
}
.egrant-system-preview__panel .wp-block-tab-panel {
padding: 0;
}
/* Kým skript nepostaví trať, len prvý obrázok na výške plochy (CLS),
rovnako ako v bloku Ukážky. */
.egrant-system-preview__panel .wp-block-tab-panel > .wp-block-image ~ .wp-block-image {
display: none;
}
.egrant-system-preview__panel .wp-block-tab-panel {
min-height: var(--egrant-system-preview-stage, calc(var(--egrant-system-preview-window) * 963 / 1536));
}
.egrant-system-preview__panel .wp-block-image {
margin: 0;
/* 64 od horného okraja panelu nesie `padding-top` panelu, tu už nie. */
margin-top: 0;
display: flex;
justify-content: center;
}
.egrant-system-preview__panel .wp-block-image img {
/* Šírka je token (viď panel) — 768 na desktope, 626 na mobile. Žiadny
`max-width: 100%`: nad breakpointom má panel vždy aspoň 828 (obsahový
stĺpec pri okne 901 px), takže sa 768 doň zmestí, a pod breakpointom má
okno naopak zámerne vytŕčať vpravo. */
width: var(--egrant-system-preview-window);
/* **Žiadny crop.** Obrázok si drží svoju výšku; kde je kratší než plocha,
presvitá pod ním gradient. Rozhodol Lukáš 2026-09-10 — radšej presvitajúce
pozadie než odstrihnutý asset. */
height: auto;
display: block;
}
/*
* Popiska pod panelom.
*
* Vo Figme je **pod panelom** na pozadí stránky, nie v gradiente — ink začína
* 29 pod jeho spodnou hranou. Preto je to samostatný odstavec za panelom
* a nie súčasť panelu tabu.
*
* ⚠️ Je **jedna a statická**. Prototyp má popisku na každý slide („Dashboard",
* „Dotačné a grantové výzvy", „Žiadosti na hodnotenie" …) a mení ju so
* slidom — to patrí k slideru so šípkami, ktorý tu postavený nie je. Dizajn
* ukazuje jednu popisku, tak je tu jedna.
*/
.egrant-system-preview__caption {
text-align: center;
/* 14,4/18/500/0,2 a `muted` (#6B6B6B) — z prototypu (`.dashboard-caption`).
Mal som tu preset „Drobný" (14) a `neutral` (#5E5E5E), oboje zle. */
font-size: var(--wp--preset--font-size--button, 14.4px);
line-height: 18px;
font-weight: 500;
letter-spacing: 0.2px;
color: var(--wp--preset--color--muted, #6b6b6b);
/* 10 hore aj dole (Lukáš), 14 po stranách z prototypu. */
padding: 10px 14px;
/*
* **Jeden riadok, dlhší text skráti CSS cez „…"** (Lukáš 2026-09-17).
*
* Popiska je pod panelom, ale nad bodkami a nad ďalšou sekciou, takže
* druhý riadok posunie všetko pod ňou — a keďže text prepisuje skript pri
* každom slide, posunulo by sa to počas prezerania. Orezanie je preto
* v CSS a nie v PHP: nezávisí od toho, kto text zadal, a v každom jazyku
* sa zmestí presne toľko, koľko sa naozaj zmestí.
*
* Text je vycentrovaný, takže sa odreže na konci — „…" sedí vpravo.
*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/*
* Medzera nad popiskou je **15**, nie 32 z `blockGap` sekcie — ten padding
* sa do medzery započítava a s 32 vyšiel ink až 43 pod panelom.
*
* Odvodenie: dizajn má **ink** textu 28,9 pod panelom, nie hranu boxu.
* Nad inkom je 10 padding a ešte 3,75 medzi content-boxom a horným okrajom
* glyfov (pol vôle riadku a rozdiel medzi ascenderom fontu a výškou
* verzálky) — odmerané z pixelov, nie odvodené z `font-size`. Zostáva
* 28,9 − 10 − 3,75 ≈ 15; ink potom padne na 28,75.
*
* Špecificita musí byť (0,3,0): flow layout jadra dáva `margin-block-start`
* z `blockGap` selektorom `.wp-container-… > * + *`, čo je (0,2,0).
*/
}
.egrant-system-preview .egrant-system-preview__caption {
margin-block-start: 15px;
}
/*
* ── Bodky ──────────────────────────────────────────────────────────────────
*
* Ovládanie slidera na mobile — namiesto šípok. Vkladá ich skript, rovnako
* ako šípky, a počet sa mení s tabom (2 / 3 / 2 slidy).
*
* V prototype **nie sú**: jeho slider má šípky na každej šírke, len sa na
* 960 zmenšia (`styles.css:2494-2503`), a bodková navigácia v ňom neexistuje
* vôbec. Hodnoty sú teda z Figmy a od Lukáša, potvrdené meraním snímky
* `2026-09-04 10-30-41`: aktívna 6,17 v `#141414`, ostatné 4,04 a 4,26
* v `#6B6B6B`, gapy 8,08 a 8,08. Trojica meria 29,8, čo je presne
* 6 + 8 + 4 + 8 + 4.
*/
.egrant-system-preview__dots {
/* Zapína ich mobilný breakpoint nižšie. */
display: none;
justify-content: center;
align-items: center;
/*
* 🔴 Výška riadku je **pevná, 6** — toľko meria najväčšia gulička.
*
* Tlačidlá sú vyššie (nesú plochu na tapnutie) a z riadku prečnievajú
* hore aj dole. Je to zámer: layout drží gulička, nie tap target.
*
* Bez toho riadok počas prepnutia **klesol na 5,14** — obe guličky sú
* v polovici prechodu ~5 — a celý zvyšok stránky poskočil o 0,86 px hore
* a späť. Odmerané po frameoch, presne kvôli tomu to tu je; `gap` sa
* medzitým presunul do paddingu tlačidiel, takže riadok už nemá z čoho
* svoju výšku brať.
*/
height: 6px;
}
.egrant-system-preview .egrant-system-preview__dots {
/*
* 24 pod popiskou. Jej spodný padding 10 sa do medzery počíta, takže
* margin je 14 — odmerané: bodky začínajú 57,9 pod panelom a content-box
* popisky končí 33,4, čo je 24,5.
*
* Špecificita (0,3,0) kvôli flow layoutu jadra, rovnako ako pri popiske.
*/
margin-block-start: 14px;
}
/*
* Tlačidlo je **plocha na tapnutie, nie gulička** — do guličky 4 × 4 sa palcom
* trafiť nedá (Lukáš 2026-09-17). Gulička je preto `::before` a tlačidlo okolo
* nej meria 12 × 26 (aktívne 14 × 26).
*
* Vodorovný padding **4** nahradil `gap: 8` na riadku: medzi guličkami je stále
* 8 (4 + 4 zo susedných tlačidiel), ale tých 8 je teraz citlivých. Rozmery sa
* tým nepohli — odmerané pred aj po: guličky začínajú na 172,5 · 186,5 · 198,5
* a riadok je široký 30 so stredom na 187,5.
*
* Zvislých 10 je len na palec a na layout nemá vplyv, lebo riadok má pevnú
* výšku 6 a tlačidlá z neho prečnievajú.
*/
.egrant-system-preview__dot {
appearance: none;
border: 0;
cursor: pointer;
background: none;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
/*
* `content-box` natvrdo: `width` a `height` sú rozmery **guličky**
* a padding sa k nim má pripočítať. Komponenty témy si prepínajú
* `border-box` po jednom (`_modal.scss`, `_footer.scss`, …) a keby to sem
* niekedy doľahlo zhora, tlačidlo by aj s paddingom vyšlo 4 × 6.
*/
box-sizing: content-box;
width: 4px;
/* Pevná, nie 4 → 6: výška tlačidla sa meniť nesmie. */
height: 6px;
padding: 10px 4px;
/* Šírka ide s guličkou, aby susedné bodky neposkočili skôr, než dorastie. */
transition: width var(--wp--custom--transition--base, 0.2s ease);
}
.egrant-system-preview__dot::before {
content: '';
width: 4px;
height: 4px;
border-radius: var(--wp--custom--radius--pill, 9999px);
background: var(--wp--preset--color--muted, #6b6b6b);
transition: width var(--wp--custom--transition--base, 0.2s ease),
height var(--wp--custom--transition--base, 0.2s ease),
background var(--wp--custom--transition--base, 0.2s ease);
}
.egrant-system-preview__dot[aria-current='true'] {
width: 6px;
}
.egrant-system-preview__dot[aria-current='true']::before {
width: 6px;
height: 6px;
background: var(--wp--preset--color--ink, #141414);
}
/*
* ── Slider a crossfade pozadia ─────────────────────────────────────────────
*
* Šípky a vrstvy gradientu vkladá `assets/app/system-preview.js` — je to
* technika, nie obsah. Bez JS zostane pás statický s prvým slidom a s tým
* gradientom vyššie, ktorý je odmeraný z Figmy.
*/
.egrant-system-preview__panel {
/* Ukotvenie pre vrstvy gradientu a pre šípky. */
position: relative;
}
/*
* Vrstvy gradientu. `background-image` sa animovať nedá, preto sa crossfaduje
* opacita šiestich vrstiev nad sebou — rovnaká technika ako v prototype.
* Interval aj trvanie sú token `transition.crossfade` (4200 ms), bez pauzy,
* takže farba nikdy nestojí.
*/
.egrant-system-preview__bg {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--egrant-system-preview-fade, 4200ms) linear;
pointer-events: none;
z-index: 0;
}
.egrant-system-preview__bg.is-active {
opacity: 1;
}
/* Obsah panelu musí byť nad vrstvami. */
.egrant-system-preview__panel > .wp-block-tabs {
position: relative;
z-index: 1;
}
/*
* Trať slidov. Výrez je jeden slide široký a trať sa posúva po 100 %.
* Prechod je `emphasis` — rovnaká krivka, akou sa hýbe hlavička.
*/
/*
* Plocha ukážky.
*
* Výška **vychádza z assetov**, nie z pevného čísla: skript nájde najvyšší
* screenshot spomedzi všetkých tabov a nastaví `--egrant-system-preview-stage`.
* Tým panel pri prepnutí tabu neposkakuje a kratšie screenshoty nie sú
* odstrihnuté — pod nimi presvitá gradient. Keď príde vyšší výrez, plocha sa
* prispôsobí sama.
*
* Fallback 481 je výška, ktorú má plocha v dizajne (791,9–1272,8) a zhodou
* okolností aj dva zo siedmich našich exportov.
*/
.egrant-system-preview__viewport {
overflow: hidden;
/*
* Presne šírka okna, nie panelu: posun trate je `-index * 100 %`, takže
* jeden krok musí byť jedno okno.
*
* Odsadenie zľava je jedno pravidlo pre obe šírky — idióm z prototypu
* (`styles.css:2938-2953`, `.demo-window`): kým sa okno do panelu zmestí,
* `(100 % − okno) / 2` ho vycentruje (na desktope (1024 − 768) / 2 = 128
* gradientu z každej strany), a keď je panel užší, vyhrá `32px` a okno
* vytŕča vpravo. Žiadny mobilný override netreba.
*/
width: var(--egrant-system-preview-window);
margin-inline-start: max(32px, (100% - var(--egrant-system-preview-window)) / 2);
height: var(--egrant-system-preview-stage, 481px);
}
.egrant-system-preview__track {
display: flex;
transition: transform var(--wp--custom--transition--emphasis, 0.45s cubic-bezier(0.4, 0, 0.2, 1));
}
/* Počas tahania musí obsah ísť s prstom, nie za ním. */
.egrant-system-preview__track.is-dragging {
transition: none;
}
.egrant-system-preview__slide {
flex: 0 0 100%;
min-width: 0;
display: flex;
justify-content: center;
/* Nahoru, nie na stred — okno appky má navrchu rám prehliadača a ten musí
sedieť pod pilulkou; presvitať má gradient pod obrázkom. */
align-items: flex-start;
}
@media (prefers-reduced-motion: reduce) {
.egrant-system-preview__track {
transition: none;
}
}
/*
* Šípky.
*
* Vo Figme sedia **vnútri** gradientového panelu, po stranách okna appky
* a zvisle na jeho strede — nie na strede panelu, ten je vyšší o pilulku
* tabov. Preto `top` počítaný z tých 24 + 42 pilulky a polovice plochy
* obrázka: 66 + 453/2 = 292,5.
*/
.egrant-system-preview__arrow {
position: absolute;
/* 310 od hornej hrany panelu — odmerané (stred 987,4 pri paneli od 677,7).
Nie stred plochy obrázka: dizajn ich má 45 px nad ním. */
top: 310px;
transform: translateY(-50%);
z-index: 2;
/* Rozmer nie je natvrdo — vyjde z ikony a paddingu, ako to dáva dizajn:
ikona 16 × 16 a padding 11 / 24 (Lukáš z Figmy), teda 64 × 38. Odmerané
vo Figme bolo 63 × 38, čo je to isté v zaokrúhlení. */
padding: 11px 24px;
display: flex;
align-items: center;
justify-content: center;
appearance: none;
border: 0;
cursor: pointer;
background: var(--wp--preset--color--base, #f5f3f1);
/* 80 (Lukáš). Pri výške 38 sa to chová ako pilulka, ale zapisujeme jeho
hodnotu, nie jej dôsledok. */
border-radius: 80px;
box-shadow: var(--wp--custom--shadow--lift);
color: var(--wp--preset--color--ink, #141414);
transition: background var(--wp--custom--transition--base, 0.2s ease),
color var(--wp--custom--transition--base, 0.2s ease);
}
/*
* Hover je **čierna s prevrátenou ikonou**, nie biela — tak to má prototyp
* (`styles.css:2352-2360`: `background: #141414` a `filter: invert(1)` na
* ikone). Mal som tu `surface`, čo bola moja domnienka. Farbu ikony nesie
* `currentColor` masky, takže stačí prehodiť `color`.
*/
.egrant-system-preview__arrow:hover {
background: var(--wp--preset--color--ink, #141414);
color: var(--wp--preset--color--base, #f5f3f1);
}
/* Odskok pri stlačení, tiež z prototypu (`styles.css:2362-2366`). */
.egrant-system-preview__arrow:active {
transform: translateY(-50%) scale(0.96);
transition: background var(--wp--custom--transition--base, 0.2s ease), transform 0s;
}
@media (prefers-reduced-motion: reduce) {
.egrant-system-preview__arrow:active {
transform: translateY(-50%);
}
}
/*
* Šípka je export z Figmy (`ic-arrow.svg`, 16 × 16) vložený ako **maska**,
* nie ``: export má `fill="#141414"` natvrdo a takto berie
* `currentColor`, takže sa dá zmeniť pri hoveri jedným pravidlom.
*
* Lukáš stiahol dva exporty tej istej ikony — výplňový ľavý chevron
* a obrysový pravý. Použitý je **výplňový**: plná plocha sa maskuje
* spoľahlivejšie než obrys, ktorý by pri maske stratil časť hrúbky. Pravý
* smer je ten istý tvar otočený o 180°, takže sa nemôžu rozísť.
*/
.egrant-system-preview__arrow::before {
content: '';
width: 16px;
height: 16px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* 24 od okraja panelu — odmerané na oboch stranách (152,9 − 128,6 = 24,3
vľavo, 1150,8 − 1127,1 = 23,7 vpravo).
*
* Tým vychádza medzi šípkou a screenshotom **41** a to je zároveň hodnota,
* ktorú dáva Lukášových „40" (vo Figme odmerané 41,3). Obe naraz presné byť
* nemôžu: okno je 768 vycentrované v paneli 1024, takže začína na 128, a
* 24 + 64 + 40 = 128. Kotvíme na tých 24, tie sú odmerané priamo. */
.egrant-system-preview__arrow--prev {
left: 24px;
}
.egrant-system-preview__arrow--next {
right: 24px;
}
.egrant-system-preview__arrow--next::before {
transform: rotate(180deg);
}
/*
* Popisky slidov v markupe sú **skryté**.
*
* Sú tam preto, aby ich videl WPML a aby text nebol v skripte. Vidieť má byť
* jedna popiska **pod** panelom (`__caption`) — tak to má dizajn aj prototyp;
* v paneli by sedela na gradiente. Skript text aktívnej do nej prepisuje.
*
* `display: none` a nie `hidden`: bez JS by `hidden` nechalo prvú popisku
* v gradiente, kým takto zostane vidieť len tá pod panelom.
*/
.egrant-system-preview__panel .wp-block-tab-panel > p {
display: none;
}
/*
* ⚠️ …ale **v editore vidieť musia**, inak sa popiska slidu nedá upraviť —
* v paneli bloku nie je, je to obyčajný odstavec (Lukáš 2026-09-17).
*
* Tento stylesheet visí na `core/group` cez `wp_enqueue_block_style()`, takže
* sa načíta na frontende **aj v kanvase editora** — a `display: none` odsek
* schoval na oboch. Editor sa pozná podľa `editor-styles-wrapper` na ``
* kanvasu (odmerané v iframe `editor-canvas`: `block-editor-iframe__body
* editor-styles-wrapper post-type-page …`).
*
* Skript v editore nebeží, takže tam odsek zostane pod svojím obrázkom — teda
* presne tam, kam patrí: každý slide má vlastnú popisku a je vidieť, ktorá
* ku ktorému. Na frontende ju skript prepisuje do jednej popisky pod panelom.
*/
.editor-styles-wrapper .egrant-system-preview__panel .wp-block-tab-panel > p {
display: block;
/*
* Vyzerá ako popiska na frontende — vycentrovaná a v tej istej typografii
* (Lukáš 2026-09-17). Redaktor tak vidí, čo edituje, a nie odstavec
* zarovnaný vľavo pod obrázkom.
*
* Farba je jediné, čo sa líšiť musí: na frontende je popiska `muted` na
* svetlom pozadí stránky, kým tu sedí na gradiente, kde by sa sivá
* stratila. Preto `base` — rovnaká svetlá, akú má na gradiente aktívny tab.
*/
text-align: center;
font-size: var(--wp--preset--font-size--button, 14.4px);
line-height: 18px;
font-weight: 500;
letter-spacing: 0.2px;
color: var(--wp--preset--color--base, #f5f3f1);
}
/*
* ── Mobil ──────────────────────────────────────────────────────────────────
*
* Rám `375 Uvod`, snímky `2026-09-04 10-30-30` a `10-30-41`. Pomerová metóda:
* hrany rámu 18–1779, teda 1762 px na 375 → škála 4,6987. Nezávisle to
* potvrdil bočný padding — odmeraných 20,0 z každej strany sedí na
* `clamp(20px, 4vw, 40px)` z `theme.json`.
*
* Mobil **nie je zmenšený desktop**, je to iná skladba:
*
* | Vec | Odmerané |
* |---|---|
* | prepínač | **nad** gradientom, na pozadí stránky, plná šírka obsahu 335 |
* | prepínač | výška 42, padding 2, pilulka 38 — presne ako desktop |
* | pilulky | rovným dielom, (335 − 4 − 4) / 3 = 109 (odmerané 107,5–109,6) |
* | pozadie prepínača | **#ECE8E4**, bez tienu |
* | pod prepínačom | **24** (odmerané 24,05) |
* | okno appky | **626 × 369**, 32 od ľavej a hornej hrany gradientu |
* | popiska | ink **19,15** pod panelom |
* | bodky | 24 pod popiskou |
*
* Okno sa **nezmenšuje na šírku panelu** — drží 626 a vpravo ho gradient
* odstrihne. Tak to má dizajn: z dashboardu je na mobile vidieť výrez, nie
* celá obrazovka. Overené dvojparametrovým fitom assetu proti snímke
* (minimum MSE na 626 × 386) a potvrdené inak: 626 / 1,6954 = 369,2, kde
* 1,6954 je pomer 768 × 453 našich exportov, takže panel 32 + 369 = 401,2
* sedí na odmeraných 400,75 — okno teda nie je odstrihnuté dole, len vpravo.
*
* Prečo je 626 pevné a nie podiel šírky panelu: pri podiele by sa UI v okne
* s rastúcou šírkou zväčšovalo (pri 899 px by bolo okno 1548 a text
* v dashboarde dvojnásobný proti desktopu). Pevná šírka drží mierku UI a výrez
* sa plynulo otvára — pri 900 sa okno do panelu ešte celé zmestí, pri 375 je
* presne podľa dizajnu.
*
* Prototyp je tu **nepoužiteľný**: jeho homepage slider okno na mobile
* naopak zmenšuje s panelom (`.dashboard-inner { width: 75% }`) a prepínač
* nikam nepresúva — pre `.dashboard-tabs` nemá ani jedno `@media` pravidlo.
* Odstrihnutie okna má len na `demo.html`, a odtiaľ je vzatý ten `max()`
* idióm na odsadenie.
*
* Breakpoint 900 je `md` z `_breakpoints.scss` — tam už prepína hero na
* stĺpec aj typografické presety v `theme.json`, takže sa pás láme tam, kde
* sa láme stránka.
*/
@media (max-width: 900px) {
.egrant-system-preview__panel {
--egrant-system-preview-window: 626px;
/*
* Panel už nie je gradient, len obal — gradient, rádius aj klip sú na
* paneloch tabu, lebo pilulka je nad nimi. Musí to byť ten istý prvok:
* keby klipoval panel a rádius mal gradient, okno by v zaoblenom rohu
* vytŕčalo za gradient.
*/
background: none;
border-radius: 0;
overflow: visible;
/*
* Zvyšok medzery nadpis → prepínač. `blockGap` sekcie dá 32 a dizajn má
* od inku nadpisu 49,4; descender H2 presahuje box o 4,75, takže od
* boxu je to 54,1.
*/
padding-top: 22px;
}
.egrant-system-preview__panel .wp-block-tab-list {
/* Plná šírka obsahu, nie `max-content` — pilulky sa delia rovným dielom. */
width: 100%;
margin-inline: 0;
/*
* Na pozadí stránky (#F5F3F1) musí byť prepínač tmavší než na desktope,
* kde sedí na gradiente. #ECE8E4 **nie je v palete** — je to hodnota
* z dizajnu (Lukáš 2026-09-10), potvrdená meraním snímky. Keď sa
* zopakuje inde, patrí do `theme.json` ako preset.
*/
background: #ece8e4;
/* `width: 100%` bez tohto pripočíta padding 2 a prepínač vyjde 339. */
box-sizing: border-box;
/*
* Pilulky rovným dielom. **Nedá sa to dať na ne**: jadro im predpisuje
* `flex-basis: inherit !important` a `flex-grow: inherit !important`
* (`wp-includes/blocks/tab-list/style.css:9-10`), takže hodnoty dedia
* z tohto zoznamu a `!important` sa prebiť nedá. Presne na to to tam
* jadro má — konfiguruje sa zoznam, nie jednotlivé tlačidlá. Zoznam sám
* flex item nie je (`.wp-block-tabs` je blok), takže na jeho layout to
* nemá vplyv. Rieši to aj štvrtý tab, keby pribudol.
*/
flex-grow: 1;
flex-basis: 0;
/*
* Tieň je na desktope preto, aby sa pilulka odlepila od gradientu; na
* pozadí stránky ho dizajn nemá — odmerané, nad ani pod prepínačom nie
* je svetlostný prechod.
*/
box-shadow: none;
margin-block-end: 24px;
}
.egrant-system-preview__panel .wp-block-tab-panels {
/* Ukotvenie pre vrstvy gradientu, ktoré sem skript presúva z panelu. */
position: relative;
background: var(--egrant-system-preview-gradient);
border-radius: var(--wp--custom--radius--lg, 12px);
overflow: hidden;
/* 32 od hornej hrany gradientu po okno appky. */
padding-top: 32px;
}
.egrant-system-preview__panel .wp-block-tab-panel {
/* Nad vrstvami gradientu. */
position: relative;
z-index: 1;
}
.egrant-system-preview__arrow {
/* Na mobile sú bodky. */
display: none;
}
.egrant-system-preview__viewport {
/*
* Vodorovné gesto je naše, svislé necháme stránke — inak by sa po
* okne appky nedalo scrollovať. `pinch-zoom` zostáva, aby si užívateľ
* mohol screenshot priblížiť.
*/
touch-action: pan-y pinch-zoom;
}
.egrant-system-preview__dots {
display: flex;
}
.egrant-system-preview .egrant-system-preview__caption {
/* Ink má byť 19,15 pod panelom: 19,15 − 10 padding − 3,75 vôle ≈ 5. */
margin-block-start: 5px;
}
}