/* * Produkt — rytmus medzi sekciami stránky. * * Stránka Produkt je dlhá a jej sekcie sú rôzne veci: `core/group` so vzorom * (Integrácie, kontaktná výzva) aj holý `core/heading`, ktorý uvádza to, čo * nasleduje. Spoločné majú jedno — **veľký odstup od toho, čo je nad nimi**. * Ten odstup nesie trieda `egrant-section-start` a toto je jediné miesto, * kde je zapísaný. * * Štýl visí na `core/group` **aj na `core/heading`** * (`functions/BlockStyles.php`): tú triedu nesú obidva typy blokov a dva * z tých štyroch nadpisov v žiadnej grupe nie sú. Tým sa dostane na frontend * aj do editora — stylesheet témy editor nenačítava. * * ── Prečo to nie je v obsahu ─────────────────────────────────────────────── * * Do 2026-09-15 bolo tých 128 napísaných **štyrikrát inline** priamo * v `content/pages/produkt.php` (`style.spacing.margin.top`, commit `d643275`, * bez vysvetlenia). Dve veci na tom nesedeli: * * 1. Je to konštanta z dizajnu, nie rozhodnutie redaktora — patrí do * stylesheetu, nie do obsahu. * 2. **Inline zápis nemá breakpoint.** Rám `375 Produkt` chce nad sekciou 80, * nie 128, a proti inline `style` sa to z CSS nedá prebiť inak než * `!important`. Nebola to hypotéza: presne taký `!important` v repe stál — * `.egrant-card-grid--mobile-collapse + * { margin-top: 80px !important }` * v `card-grid/style.scss`, s komentárom, že inak sa inline zápis prepísať * nedá. Odchodom inline hodnoty stratil dôvod a je zmazaný; jeho miesto * (pod zbalenou mriežkou ikon) je jedno zo štyroch, ktoré rieši tento súbor. * * `theme.json` to riešiť nevie: adresuje typ bloku, nie jednu konkrétnu grupu * či nadpis, a tu ide o štyri vybrané inštancie na jednej stránke. * * ── Prečo majú selektory dve triedy ──────────────────────────────────────── * * Globálne štýly stoja v `` **za** štýlmi blokov, takže pri rovnakej * špecificite vyhrajú ony. Rytmus 32 vypisuje `global-styles-inline-css` ako * `:root :where(.is-layout-constrained) > * { margin-block-start: 32px }`, * čo je (0,1,0) — presne toľko, koľko má samotná `.egrant-section-start`. * * **Odmerané, nie tušené** (2026-09-15, Playwright na `egrant.wip`): s jednou * triedou v selektore zostalo na 1280 na všetkých štyroch miestach **32** * namiesto 128 a na 375 padla na 32 aj kontaktná výzva. Preto * `.wp-block-group.…` a `.wp-block-heading.…`, teda (0,2,0). * * ── Odmerané hodnoty ─────────────────────────────────────────────────────── * * Desktop je 128 a nehýbe sa — sedí na všetkých štyroch miestach rámu * `1280 Produkt`. * * Mobil je z rámu `375 Produkt`, odstupy odmerané vnútri jednej snímky (teda * bez chyby zarovnania medzi snímkami): * * pilulka mriežky → H2 „Integrácie" **80,0** (ink) * pilulka Integrácií → H2 „Súhrn funkcionalít" **79,7** (ink) * pilulka súhrnu → H2 „Funkcionality…" **79,7** (ink) * pilulka funkcionalít → biely CTA box **80,0** (hrana) * * Konštanta je teda jedna — **80** — a líšia sa len tým, od čoho sa meria. */ .wp-block-group.egrant-section-start, .wp-block-heading.egrant-section-start { margin-top: 128px; } /* * Zlom 900, nie 640: je to `settings.viewport.mobile` témy a hranica, ktorú * používa väčšina stylesheetov blokov. 640 je v repe len tam, kde sa zbaľuje * mriežka (`pattern-feature-tiles.css`) — to je otázka šírky dlaždice, kým * tu ide o zvislý rytmus stránky, ktorý sa rozchádza s dizajnom hneď, ako * okno prestane byť desktopové. (Zmazané pravidlo z `card-grid/style.scss` * malo 640; na 900 je preto, aby všetky štyri miesta lámali rovnako.) */ @media (max-width: 900px) { .wp-block-group.egrant-section-start, .wp-block-heading.egrant-section-start { margin-top: 80px; } /* * 🔴 **Kde sekcia začína nadpisom, je to 75 — a je to zámer, nie preklep.** * * Čísla z rámu sú pri nadpisoch **ink-to-ink** (od pilulky po verzálku), * kým pri bielom CTA boxe je to hrana na hranu. Verzálka pritom nesadá na * hornú hranu boxu: pri `x-large` na 375 (36/36) leží presne **5 px** pod * ňou — odmerané v prehliadači cez `actualBoundingBoxAscent`, nie * odhadnuté, a overené aj na pôvodnom stave (margin 128 → ink 133). * * S rovných 80 by teda verzálka sadla na 85 a bola by o 5 nižšie než * v ráme. 80 − 5 = 75 → ink 80,0 proti 79,7 resp. 80,0 z rámu. * * `:has()` a nie menovite `.egrant-integrations`: pravidlo je „sekcia, * ktorá sa otvára nadpisom", nie „táto jedna sekcia". Grupa nemá padding * a nadpis v nej je prvé dieťa s vynulovaným `margin-block-start`, takže * horná hrana grupy a horná hrana nadpisu sú tá istá čiara. * * Na desktope sa tá istá korekcia **nerobí**: tam je 128 overená ako * hodnota boxu na všetkých štyroch miestach a posun nadpisov o 17 (cap * offset pri 64/64) by bol regresia proti odmeranému stavu. */ .wp-block-heading.egrant-section-start, .wp-block-group.egrant-section-start:has(> .wp-block-heading:first-child) { margin-top: 75px; } } /* * ── H1 → panel náhľadu systému ───────────────────────────────────────────── * * Tá istá vec ako vyššie, len na inom mieste: konštanta z dizajnu, ktorá má * na mobile **inú hodnotu**, takže inline `style.spacing.margin` na bloku ju * uniesť nevie. Do 2026-09-15 tam bola (`var:preset|spacing|100`, potom `|110`) * a mobil tým dostal desktopovú hodnotu. * * ⚠️ **Selektor musí byť `h1 +`, nie samotná trieda.** `.egrant-system-preview` * je aj na Úvode (`content/pages/uvod.php`), kde je to celá sekcia s vlastným * H2 vnútri a odstup nad ňou je rytmus sekcie (54), nie táto medzera. Dnes by * ju holá trieda nerozbila, lebo Úvod má margin stále inline a inline vyhrá — * ale presne to je tá pasca, ktorú tento súbor inde odstraňuje. `h1 +` je * navyše doslovný zápis toho, čo sa meria: na Produkte panel nasleduje hneď * za H1 stránky, na Úvode za oddeľovačom. * * Špecificita (0,2,1) prebíja `:root :where(.is-layout-constrained) > *` * z globálnych štýlov (0,1,0) — rovnaký dôvod ako pri `.egrant-section-start`. * * ── Čo sa meria ──────────────────────────────────────────────────────────── * * **Od inku H1 po prvú viditeľnú hranu panelu**, teda tak, ako to je vidieť. * Tá hrana nie je na oboch šírkach ten istý prvok: na desktope je to gradient * (panel má pozadie), na mobile **prepínač**, lebo tam gradient na paneli nie * je — je až na paneloch tabu a nad ním svieti pozadie stránky * (`pattern-system-preview.css`, `@media (max-width: 900px)`). Box panelu je * na mobile o `padding-top: 22` vyššie než tá hrana. * * Rám aj render odmerané tou istou analýzou pixelov: * * rám `1280 Produkt` (13-27-07, mierka 1,5234) ink → gradient **61,0** * rám `375 Produkt` (09-04 10-26-37, m. 3,0987) ink → prepínač **49,4** * * Tých 49,4 je nezávisle potvrdených: to isté číslo z toho istého dizajnu má * zapísané `pattern-system-preview.css` pri svojom `padding-top: 22px` * („dizajn má od inku nadpisu 49,4“). Oba rámy `375 Produkt` (zbalený aj * rozbalený) dávajú 153 px snímky na desatinu rovnako. * * ── Prečo 64 a 28,4 ──────────────────────────────────────────────────────── * * Margin je box na box, rám meria od inku, takže sa líšia o **presah * descenderu** pod spodnou hranou riadkového boxu H1. Ten sa nehádal, počíta * sa z metrík písma: presah = `actualBoundingBoxDescent` − (lh − A + D) / 2. * * 1280 fs 64, lh 64, A 65, D 19, ink descent 12 → presah **3** * 375 fs 36, lh 38, A 36, D 10, ink descent 7 → presah **1** * * Desktop: 61,0 + 3 = 64 — vyjde rovno na preset `|110`, preto `var()`. * Mobil: 49,4 + 1 − 22 (padding panelu) = **28,4**. * * Preset sa na mobile nepoužil, lebo najbližší (`|70` = 32) by dal ink 53,0, * teda 3,6 navyše; `|60` = 24 by dal 45,0. Literál je teda jediná možnosť * a nie je zaokrúhlený — 28,4 trafí rámových 49,4 presne. * * 🔴 **Mobilná hodnota visí na riadkovaní H1.** Tých 38 (`calc(38 / 36)` * v `theme.json`) drží presah na 1. Keby sa riadkovanie vrátilo na 36, presah * je 2 a hodnota tu je 29,4. Pri zmene riadkovania veľkých nadpisov na mobile * sa toto číslo prepočítava, inak sa medzera rozíde s rámom. */ /* Blok Ukážky (od 2026-09-28) aj starý pás, kým nie je všade zmigrovaný. */ h1 + .wp-block-egrant-screenshots, h1 + .wp-block-group.egrant-system-preview { margin-top: var(--wp--preset--spacing--110); /* 64 */ } @media (max-width: 900px) { h1 + .wp-block-egrant-screenshots, h1 + .wp-block-group.egrant-system-preview { margin-top: 28.4px; } }