/* * Výpis blogu — štýl bloku `core/query`, variácia `blog-list`. * * Návrh: rámy `1280 blog` (snímka 2026-09-07 10-46-44) a `375 blog` * (10-46-58). Hodnoty sú odmerané z rámov pomerovou metódou (rám 1280 je * na snímke 914 px, teda mierka 0,714). * * Geometria je tu a nie v `theme.json` z toho istého dôvodu ako pri leade: * `theme.json` pre bloky nepozná `aspect-ratio`, `grid-template-columns` * ani stavy paginácie. Typografia naopak ide z presetov, aby sa mobilné * hodnoty (`small` 17,6 → 16,6) prepli samy. * * Mriežka: 3 × 320 + 2 × 32 = 1024, teda presne obsahový stĺpec. */ /* * 64 px od inku nadpisu „Blog" po hornú hranu prvej karty (dizajn: 46 px na * snímke pri mierke 0,714). Meria sa od spodku riadkového boxu nadpisu, * ktorý je pod inkom, preto 60 a nie 64 — odmerané v prehliadači. * * Selektor má **dve triedy zámerne**. Odstup medzi blokmi dáva * `:root :where(.is-layout-constrained) > *`, čo je tiež špecificita 0,1,0, * a globálne štýly WordPress pripája za štýly blokov — takže s jednou * triedou vyhrá tých 32 px. Odmerané: `computedMarginTop` zostal 32. */ .wp-block-query.is-style-blog-list { margin-block-start: 60px; } .is-style-blog-list .wp-block-post-template { column-gap: var(--wp--preset--spacing--70); /* 32px */ row-gap: var(--wp--preset--spacing--110); /* 64px */ } /* * Miniatúra je gradientová plocha, nie fotka — tak to má Figma. Prázdny * `` ju drží klikateľnou; obsah do nej dopĺňa `functions/BlogList.php`. * `aspect-ratio` namiesto výšky preto, že karta sa na mobile rozťahuje na * celú šírku a 16 : 9 musí platiť na oboch šírkach (320 × 180 na desktope). */ .is-style-blog-list .egrant-blog-thumb, .is-style-blog-list .wp-block-post-featured-image img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--wp--custom--radius--lg); /* 12px */ object-fit: cover; } /* * To isté aj na samotný blok, nielen na ``. V editore totiž * gradientová plocha **nie je**: dopĺňa ju PHP filter na `render_block`, * a editor bloky renderuje v JS, takže tam zostane editorový placeholder * `core/post-featured-image`. Odmerané v kanvase — 320 × 200 a bez * zaoblenia, kým frontend má 320 × 180 s radiusom 12. * * Týmto pravidlom má redaktor aspoň správny pomer a zaoblenie; farba * miniatúry sa v editore neukáže a je to známy dôsledok, nie chyba. */ .is-style-blog-list .wp-block-post-featured-image { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--wp--custom--radius--lg); /* 12px */ } /* * 12 px od spodku miniatúry po hornú hranu riadku titulku. V dizajne je od * miniatúry po **ink** prvého riadku 18 px; rozdiel je half-leading * (21 − 17,6) / 2 a rozdiel medzi ascenderom a výškou verzálky Saans — * rovnaký prepočet ako pri popiske pása D. */ .is-style-blog-list .wp-block-post-title { margin-block: var(--wp--preset--spacing--30) 0; /* 12px */ font-size: var(--wp--preset--font-size--small); font-weight: 600; /* * 21 px, nie pomer: dizajn drží rozteč riadkov na 21 aj na mobile, kde * je písmo 16,6 (`theme.json`, mobilné hodnoty presetov). S pomerom by * mobil spadol na 19,8. */ line-height: 21px; letter-spacing: 0.2px; } .is-style-blog-list .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; } .is-style-blog-list .wp-block-post-title a:hover, .is-style-blog-list .wp-block-post-title a:focus-visible { color: var(--wp--preset--color--ink-hover); } /* * Dátum: 11,2 / 14 / 600 / 0,2, `muted` (#6B6B6B) — odčítané z Figmy * (Lukáš, 2026-09-11). * * Ide to cez preset `nano`, nie cez konštantu. Keď sa hodnota zapisovala, * preset pre 11,2 v téme nebol a vyzeralo to na konštantu z dizajnu; medzitým * sa ukázalo, že 11,2 je **najmenší krok typografickej škály** z rámu * `stylovanie` (docs/11), takže patrí do `theme.json` a nie sem. */ .is-style-blog-list .wp-block-post-date { margin-block: var(--wp--preset--spacing--30) 0; /* 12px */ font-size: var(--wp--preset--font-size--nano); line-height: 14px; font-weight: 600; letter-spacing: 0.2px; color: var(--wp--preset--color--muted); } /* ── Paginácia — jedna pre všetky výpisy ──────────────────────────────── * * 🔴 **Selektory nie sú viazané na štýl výpisu.** Do 2026-09-23 boli zdvojené * na `.is-style-blog-list` a `.is-style-webinar-list`, takže každé ďalšie * miesto s `core/query` muselo pribudnúť do ôsmich zoznamov selektorov — a * hľadanie (`search.html`, na ktorom stojí hľadanie v manuáli) tak zostalo * nenaštýlované. Stránkovanie je jeden prvok webu, nie vlastnosť výpisu. * Širšie to nezasiahne: `core-query.css` sa pripája len vtedy, keď sa * `core/query` naozaj vykreslí (`functions/BlockStyles.php`), a iný * stylesheet `.wp-block-query-pagination` nerieši. * * 🔴 **Obal `.wp-block-query` v selektore musí zostať.** Nie je dekoratívny — * drží špecificitu (0,2,0). `gap` a `margin-block-start` dáva stránkovaniu aj * jadro pravidlami s (0,1,0) (`blockGap` a layout kontajner) a tie stoja * v `` za štýlom témy, takže pri remíze vyhrajú ony: bez obalu skočil * blog z odmeraných **54 / 6** na **32 / 32**. Odchytené A/B meraním * 2026-09-23, nie odhadom. * * Výpis webinárov má pagináciu **rovnakú ako blog** vrátane `perPage: 6` * (Lukáš, 2026-09-21). Rám `1280 manual-webinare` ju nekreslí — päť kariet * sa zmestí na jednu stranu — takže je to **prevzatie, nie odmerané * hodnoty**, a preto sa pravidlá zdieľajú, nie kopírujú. * * `‹ 1 2 3 … 6 ›`. Číslo aktívnej strany a obe šípky sú čierne kruhy * s bielym obsahom, nečinné čísla stoja bez podkladu. Kruh má 38 px — * tú istú výšku ako tlačidlá, na to je v návrhu zarovnaný. * * 54 px nad pagináciou je rytmus sekcií, ktorý drží zvyšok webu. */ .wp-block-query .wp-block-query-pagination { margin-block-start: var(--wp--preset--spacing--100); /* 54px, rytmus sekcií */ gap: 6px; align-items: center; } .wp-block-query .wp-block-query-pagination-numbers { display: flex; align-items: center; gap: 6px; } /* * Každá položka je kruh 38 × 38 — aj tá, ktorá podklad nemá. * Nečinné číslo je odkaz a na hover podklad dostáva, takže `border-radius` * musí mať od začiatku; keď ho mala len aktívna strana a šípky, hover * nakreslil na číslach štvorec (nahlásené 2026-09-11). * * `position: relative` je kvôli chevronu, ktorý sa centruje absolútne. */ .wp-block-query .wp-block-query-pagination-numbers .page-numbers, .wp-block-query .wp-block-query-pagination-previous, .wp-block-query .wp-block-query-pagination-next { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; /* 14,4 / 18 / 600 / 0,25 — odčítané z Figmy (Lukáš, 2026-09-11). 14,4 je preset `button`, teda krok škály, nie zvláštna hodnota. */ font-size: var(--wp--preset--font-size--button); line-height: 18px; font-weight: 600; letter-spacing: 0.25px; color: var(--wp--preset--color--ink); text-decoration: none; transition: background var(--wp--custom--transition--fast, 0.18s ease); } /* Aktívna strana a obe šípky sú plné kruhy. */ .wp-block-query .wp-block-query-pagination-numbers .page-numbers.current, .wp-block-query .wp-block-query-pagination-previous, .wp-block-query .wp-block-query-pagination-next { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); } /* * Hover patrí len odkazom. Aktívna strana je ``, výpustka tiež — * na tie sa kurzorom nedá kliknúť a nemajú sa ani prefarbovať. */ .wp-block-query .wp-block-query-pagination-numbers a.page-numbers:hover, .wp-block-query .wp-block-query-pagination-previous:hover, .wp-block-query .wp-block-query-pagination-next:hover { background: var(--wp--preset--color--ink-hover); color: var(--wp--preset--color--surface); } /* * Šípky. Core do nich vypisuje znak (`»` pri `paginationArrow: "chevron"`), * návrh má tenký `‹ ›`, takže sa znak skryje a kreslí sa ikona. * * Tvar je **export z Figmy** (`btn-prev_black.svg` / `btn-next_black.svg`, * Lukáš 2026-09-11). Export potvrdil aj kruh: `rect` 38 × 38 s `rx` 18,5, * teda presne tých 38, čo sme odmerali zo snímky. * * Vložený je ako **maska cez celý viewBox 38 × 38**, nie ako ``: * export má farbu natvrdo, takto berie `currentColor` a prefarbí sa pri * hoveri sám. A keďže maska nesie pôvodnú mriežku, chevron sedí presne * tam, kam ho dal grafik — vrátane optického posunu o 0,35 px od stredu, * ktorý by sa pri ručnom centrovaní stratil. * * Z dvoch exportov je použitý **výplňový ľavý**; pravý je obrysový * (`stroke-width: 2`) a pri maskovaní by časť hrúbky stratil. Je to tá * istá dvojica a to isté rozhodnutie ako pri šípkach pása D * (`pattern-system-preview.css`). */ .wp-block-query .wp-block-query-pagination-previous-arrow, .wp-block-query .wp-block-query-pagination-next-arrow { display: none; } .wp-block-query .wp-block-query-pagination-previous::before, .wp-block-query .wp-block-query-pagination-next::before { content: ""; position: absolute; inset: 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; } /* Pravá šípka je tá istá ikona otočená — nemôžu sa rozísť. */ .wp-block-query .wp-block-query-pagination-next::before { transform: rotate(180deg); } /* * Výpustka nie je odkaz — bez podkladu a bez hoveru. Tri bodky sú **export * z Figmy** (`dots.svg`, 12 × 3, Lukáš 2026-09-11), nie znak „…": znak by * závisel od fontu a jeho bodky sedia na účiari, kým v návrhu sú na strede. * Box zostáva 38 × 38 ako ostatné položky, aby rad držal rytmus. */ .wp-block-query .wp-block-query-pagination-numbers .page-numbers.dots { position: relative; background: none; font-size: 0; } .wp-block-query .wp-block-query-pagination-numbers .page-numbers.dots::before { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 3px; transform: translate(-50%, -50%); background-color: var(--wp--preset--color--ink); -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; } /* * Neaktívna šípka. Na prvej a poslednej strane WordPress šípku nevykreslí * vôbec, ale v návrhu sú obe vždy — dopĺňa ju `functions/BlogList.php` ako * ``, takže sa nedá kliknúť ani zamerať tabulátorom. */ .wp-block-query .wp-block-query-pagination-previous.is-disabled, .wp-block-query .wp-block-query-pagination-next.is-disabled { pointer-events: none; } /* * Mobil: jeden stĺpec. Breakpoint 900 je `md` — tam sa láme aj typografia * a hero, takže výpis sa láme s nimi. */ @media (max-width: 900px) { .is-style-blog-list .wp-block-post-template { grid-template-columns: 1fr; /* Na mobile je medzi kartami 56, nie 64 ako na desktope (odčítané z Figmy, Lukáš 2026-09-11). */ row-gap: 56px; } } /* ── Výpis webinárov ──────────────────────────────────────────────────── * * Štýl bloku `core/query`, variácia `webinar-list` — `/sprievodca/webinare/`. * * Návrh: rámy `1280 manual-webinare` a `375 manual-webinare`, odmerané * v `docs/04-bloky/22-stranka-webinare-odmerane.md`. Čo meranie nedáva * (rez písma, prestrkanie, hover, paginácia), je **prevzaté z výpisu blogu** * vyššie a je to pri každej takej hodnote napísané. * * Mriežka: 2 × 502 + 20 = 1024, teda presne obsahový stĺpec. * * ⚠️ Nie je to kópia blogu: polomer (16 proti 12), dátum (12,8/24 proti * 11,2/14) aj mobilný názov (17,6 proti 16,6) sa líšia. Zdieľa sa iba * paginácia — jej pravidlá sú vyššie v spoločnej sekcii. */ /* * 64 (`spacing--110`) medzi riadkovým boxom H1 a prvou miniatúrou; na ráme * je od **inku** H1 72,7 a rozdiel je half-leading. * * Selektor má dve triedy zámerne: `:root :where(.is-layout-constrained) > *` * má tiež (0,1,0) a globálne štýly idú za štýlmi blokov, takže s jednou * triedou vyhrá `blockGap` 32 (`docs/03-architektura/10`). */ .wp-block-query.is-style-webinar-list { margin-block-start: var(--wp--preset--spacing--110); /* 64px */ } /* * Mriežka: 2 stĺpce po 502 s medzerou 20 (`spacing--50`). * * Medzera riadkov 40 (`spacing--80`) **nie je surové meranie** — surovo je * 47,1 a 47,5 od baseline dátumu a pri riadkovaní dátumu 24 z toho vychádza * 39,7–40,1. Rozhodol Lukáš 2026-09-21; ~~44~~ padlo spolu s riadkovaním 16. */ .is-style-webinar-list .wp-block-post-template { column-gap: var(--wp--preset--spacing--50); /* 20px */ row-gap: var(--wp--preset--spacing--80); /* 40px */ } /* * Miniatúra je gradientová plocha, nie fotka — webinár náhľadový obrázok * nemá nikdy. Plochu dopĺňa `functions/GradientThumbs.php` ako prázdny `` * s triedou `egrant-webinar-thumb`, takže sa štýluje **trieda, nie `img`**; * pravidlo pre `img` je poistka, keby webinár obrázok predsa dostal. * * Polomer 16 (`radius.xl`), nie 12 ako blog: rám meria 16,7 / 17,3 / 17,7 * a Lukáš rozhodol 16 (2026-09-21). `aspect-ratio` namiesto výšky preto, že * 16 : 9 platí na oboch šírkach — 502 × 282 aj 334 × 188. */ .is-style-webinar-list .egrant-webinar-thumb, .is-style-webinar-list .wp-block-post-featured-image img { display: block; inline-size: 100%; aspect-ratio: 16 / 9; border-radius: var(--wp--custom--radius--xl); /* 16px */ object-fit: cover; } /* * To isté na samotný blok kvôli editoru. Plochu dopĺňa PHP filter na * `render_block`, kým editor renderuje bloky v JS — tam teda zostane * placeholder `core/post-featured-image`. Redaktor má takto aspoň správny * pomer a zaoblenie; farba sa v editore neukáže a je to známy dôsledok. * (Prevzaté z blogu, len s polomerom webinára.) */ .is-style-webinar-list .wp-block-post-featured-image { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--wp--custom--radius--xl); /* 16px */ } /* * Názov: 17,6 / 21. 12 (`spacing--30`) od spodku miniatúry po riadkový box * názvu; na ráme je po ink 12,4 a rozdiel je half-leading (21 − 17,6) / 2. * * ⚠️ Rez 600 a prestrkanie 0,2 sú **prevzaté z blogu, nie odmerané** — * šírka inku sedí na 500 + 0,2 aj na 600 + 0,1 v rámci chyby merania. */ .is-style-webinar-list .wp-block-post-title { margin-block: var(--wp--preset--spacing--30) 0; /* 12px */ font-size: var(--wp--preset--font-size--small); /* 17,6px */ /* 21 je literál: riadkovania téma nepresetuje. Rám meria 20,9 / 21,0. */ line-height: 21px; font-weight: 600; letter-spacing: 0.2px; } /* Farba `ink`, hover prevzatý z blogu — rám stav hoveru nekreslí. */ .is-style-webinar-list .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; } .is-style-webinar-list .wp-block-post-title a:hover, .is-style-webinar-list .wp-block-post-title a:focus-visible { color: var(--wp--preset--color--ink-hover); } /* * Dátum: 12,8 (`micro`) / 24 / `muted`, 12 (`spacing--30`) nad ním. Blog má * 11,2 / 14 — je to **iná úroveň drobného textu**, nie tá istá. * * ⚠️ Riadkovanie 24 je literál a **nie je odmerané**: rám dá rozdelenie * rozteče na `line-height` a `margin` dve riešenia, 24 rozhodol Lukáš * 2026-09-21 a tým je daná aj medzera riadkov mriežky 40. * ⚠️ Pasca: pri riadkovaní 24 vychádza z merania `margin-top` **8**, nie 12. * Platí rozhodnutých 12 — baseline dátumu tým sadne 4,2 nižšie než na ráme * (`docs/04-bloky/22`, „Medzera riadkov"). * * Rez 600 a prestrkanie 0,2 sú prevzaté z blogu, nie odmerané. */ .is-style-webinar-list .wp-block-post-date { margin-block: var(--wp--preset--spacing--30) 0; /* 12px */ font-size: var(--wp--preset--font-size--micro); /* 12,8px */ line-height: 24px; font-weight: 600; letter-spacing: 0.2px; color: var(--wp--preset--color--muted); } /* * Karta je **mriežka**, nie stĺpec. * * Pilulka „Prezentácia" je na desktope v **jednom riadku s názvom**, s medzerou * **16** (Lukáš, 2026-09-21). Nie je to zalomenie flexu: pilulka drží hornú * hranu aj pri dvojriadkovom názve — na ráme má karta 2 pilulku na tej istej * súradnici ako karta 1 — takže je to **súrodenec textového stĺpca**, nie prvok * pod ním. * * Markup je plochý (miniatúra, názov, dátum a pilulka sú súrodenci v `li`), * takže by to inak chcelo obal v obsahu. Mriežka to spraví bez neho: názov * a dátum idú pod sebou v prvom stĺpci, pilulka do druhého na riadok názvu. * * Horný odstup 12 má pilulka rovnaký ako názov — inak by v mriežke začínala * o tých 12 vyššie, lebo okraje položiek mriežky sa nezlučujú. */ .is-style-webinar-list .wp-block-post-template > li { display: grid; grid-template-columns: 1fr auto; column-gap: var(--wp--preset--spacing--40); /* 16px */ align-items: start; /* * 🔴 `align-content: start` je nutné, nie kozmetika. * * Karty v mriežke výpisu sa naťahujú na výšku najvyššej v riadku, takže * karta s jednoriadkovým názvom je vyššia než jej obsah. Bez tohto si ten * priestor **rozdelia riadky karty** a dátum odskočí od nadpisu: odmerané * 2026-09-21 — riadok názvu 40 namiesto 33 a riadok dátumu 43 namiesto 36, * teda medzera 19 namiesto 12. Karta s dvojriadkovým názvom bola pritom * presná, lebo tá ten riadok určovala. * * Takto si riadky držia svoju výšku a prebytok zostane pod nimi. */ align-content: start; } .is-style-webinar-list .egrant-webinar-thumb, .is-style-webinar-list .wp-block-post-featured-image { grid-column: 1 / -1; } .is-style-webinar-list .wp-block-post-title, .is-style-webinar-list .wp-block-post-date { grid-column: 1; } /* * 🔴 Pilulka presahuje **oba** textové riadky, nie len riadok názvu. * * Je vyššia (38) než riadkový box názvu (21), takže v jedinom riadku mriežky * naťahovala ten riadok na svoju výšku — a dátum potom nesadol 12 pod nadpis, * ale 12 pod pilulku. Odmerané 2026-09-21. * * `span 2` s `align-self: start` to rieši: výšku riadku názvu určuje názov, * pilulka sa len prekrýva cez oba riadky a drží si hornú hranu. Preto aj * `span`, a nie napríklad `position: absolute` — pri trojriadkovom názve by * absolútna pilulka prestala ovplyvňovať šírku stĺpca a text by pod ňu vliezol. */ .is-style-webinar-list .wp-block-egrant-webinar-presentation { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-block-start: var(--wp--preset--spacing--30); /* 12px, ako názov */ } /* * Mobil: jeden stĺpec, karta na 335. Zlom 900 je `md` ako všade inde. */ @media (max-width: 900px) { /* * Karta sa rozpadá na jeden stĺpec a pilulka ide **pod dátum** na celú * šírku, s medzerou **16** (Lukáš, 2026-09-21). Poradie zostáva ako na * ráme: miniatúra → názov → dátum → pilulka. */ .is-style-webinar-list .wp-block-post-template > li { grid-template-columns: 1fr; } .is-style-webinar-list .wp-block-egrant-webinar-presentation { grid-column: 1; grid-row: auto; margin-block-start: var(--wp--preset--spacing--40); /* 16px */ } /* * 54 (`spacing--100`) pod H1. Rám meria 55,8 od inku, čo vychádza na 50 * po riadkový box — 50 na škále nie je, takže sa zaokrúhľuje na krok * škály (Lukáš, 2026-09-21). Rozdiel je evidovaný v `docs/14`, otvorená otázka 11. */ .wp-block-query.is-style-webinar-list { margin-block-start: var(--wp--preset--spacing--100); /* 54px */ } /* Medzera riadkov 54 (`spacing--100`): rám meria 56,1 a 55,9 hrana na hranu, zaokrúhlené na škálu tým istým rozhodnutím. Rozdiel je celé 2. */ .is-style-webinar-list .wp-block-post-template { grid-template-columns: 1fr; row-gap: var(--wp--preset--spacing--100); /* 54px */ } /* * Názov drží 17,6 aj na mobile a **literál je tu zámer, nie lenivosť**: * `theme.json` prepisuje `--wp--preset--font-size--small` pod 900 na * 16,6, takže na holom presete by názov ticho spadol o 6 %. Rám meria * 17,5 / 17,5 aj na 375 (Lukáš, 2026-09-21). * * Je to **druhý lokálny override v téme** — prvý je `card-grid/style.scss` * a komentár v `theme.json` ho ešte volá „jediný". */ .is-style-webinar-list .wp-block-post-title { font-size: 17.6px; } } /* * Tlačidlo prehrávania na miniatúre webinára. * * Odmerané na ráme `1280 manual-webinare` (docs/04-bloky/22): pilulka * 64 × 38 vo farbe `ink`, plne zaoblená, v strede miniatúry, s bielym * trojuholníkom 11,4 × 15. Na mobile je to ten istý prvok v tej istej * veľkosti — rám ho nezmenšuje. * * Je to pseudoprvok, nie markup: plocha pod ním je dekoratívna (filter jej * dáva `aria-hidden` a `tabindex="-1"`, lebo hneď za ňou ide ten istý odkaz * s titulkom), takže tlačidlo nesmie pribudnúť ako druhý cieľ. Kliknutie * vedie na detail — play tlačidlo video v zozname nepúšťa (Lukáš, 2026-09-21), * takže vlastné chovanie ani nepotrebuje. * * 🔴 Na detaile to neplatí: tam je na mieste plochy buď embed, alebo plocha * bez tlačidla. Preto selektor stojí na `egrant-webinar-thumb`, čo je trieda * výpisu — detail má `egrant-post-cover`. */ .is-style-webinar-list .egrant-webinar-thumb { position: relative; } .is-style-webinar-list .egrant-webinar-thumb::after { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; inline-size: 64px; block-size: 38px; /* Polovica výšky, teda plné zaoblenie — nie token, je to tvar. */ border-radius: var(--wp--custom--radius--pill, 19px); background-color: var(--wp--preset--color--ink); /* Trojuholník 11,4 × 15, biely, na stred. Inline SVG rovnako ako šípka selectu v adresári inštitúcií — jeden súbor navyše to nie je. */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='15' viewBox='0 0 12 15'%3E%3Cpath d='M11.4 7.5 0 15V0z' fill='%23fff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11.4px 15px; }