/* ══════════════════════════════════════════════════════════════ bb-theme.css — Branike Blocks semantic design tokens Mapuje Blocksy palette CSS vars na bb-* tokeny. Blocksy automaticky prepína hodnoty palette vars pri dark mode (.dark-mode trieda na ) — takže tieto tokeny zdedia prepínanie zadarmo bez extra CSS. Použitie v blokoch: background: var(--bb-surface); color: var(--bb-text); border: 1px solid var(--bb-border); Palette mapping (Blocksy default): color-1 = primary accent (modrá / teal v dark) color-2 = primary hover (tmavšia / teal-2 v dark) color-3 = muted text (sivá) color-4 = base text (čierna / biela v dark) color-5 = light border (svetlá sivá / tmavá v dark) color-6 = subtle surface (takmer biela / tmavá v dark) color-7 = surface-2 (biela / tmavo-sivá v dark) color-8 = surface (biela / najtemnejšia v dark) ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 🔴🔴 DOPLNENÉ 2026-08-02 — DRUHÝ ČLÁNOK REŤAZE: WordPress paleta NÁLEZ (branike.com po prechode na FSE tému): v tmavom režime zostávali sekcie svetlé a text nečitateľný. Príčina je priamo v komentári vyššie: celá tokenová vrstva visí na `--theme-palette-color-N`, čo sú premenné **Blocksy**. Na akejkoľvek inej téme tie premenné NEEXISTUJÚ, takže každý token prepadne na svoj zamrznutý hex — a ten sa v noci nemá ako zmeniť. Reťaz je teraz trojčlenná: Blocksy paleta → WordPress paleta (theme.json) → hex · Blocksy web: nič sa nemení, prvý článok vyhrá ako doteraz · FSE / theme.json: vyhrá `--wp--preset--color--*`, ktorý sa v noci premapuje a mení sa aj s farebnou variáciou · ani jedno: hex, presne ako doteraz 🔴 `--bb-text-on-dark` je ZÁMERNE VYNECHANÝ. Je to text položený na tmavú plochu, teda vždy svetlý. Keby sa naviazal na `base`, v tmavom režime by `base` stmavlo a vznikol by tmavý text na tmavom — presne tá chyba, ktorú tu opravujeme, len otočená. To isté platí pre `--bb-border`: `rgba()` funguje na svetlom aj tmavom a nepotrebuje paletu. ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ MOST: PRESET PREMENNÉ AJ NA TÉME, KTORÁ ICH NEMÁ (1.64.0, 2026-08-29) ══════════════════════════════════════════════════════════════════════════ 🔴🔴 PREČO TO NESTAČILO OPRAVIŤ V HÁRKOCH Brani na it5 (Blocksy): „farby ikon a tlačidiel majú byť podľa témy — a sú fialová." Hárky sa opraviť dali, ale kruhy krokov ostali fialové. Dôvod: `steps` je STATICKÝ blok a jeho `save()` píše farbu INLINE na wrapper: style="--bb-st-accent: var(--wp--preset--color--accent, #7C3AED)" Inline hodnota je nastavená, takže fallback v hárku (`var(--bb-st-accent, var(--bb-primary, …))`) sa NIKDY nepoužije. A ten inline štýl je v OBSAHU KLIENTA — meniť ho cez `save()` znamená rozbiť platnosť už uloženého obsahu („Blok obsahuje neočakávaný obsah"), čo sa 29. 8. naozaj stalo. Preto sa nemení markup, ale DOPĹŇA sa chýbajúca premenná. Blocksy (ani iná ne-FSE téma) `--wp--preset--color--*` nedefinuje, takže ju vnútri našich blokov dodáme z palety: 🔴 Pôvodná hodnota sa najprv odloží na `:root` (`--bb-preset-*`), a až potom sa preset prepisuje — a to LEN v rozsahu našich blokov. Bez toho odloženia by vznikol kruh, a bez zúženia na `[class*="wp-block-branike-"]` by sme prepisovali premennú celej stránke vrátane cudzích blokov. Odmerané v prehliadači (inline markup z it5, tri palety): Blocksy fialová #7C3AED → #076951 ✅ oprava FSE #7C3AED → #7C3AED ✅ bez zmeny FSE, iná paleta #FF0000 → #FF0000 ✅ klientova farba drží ⚪ Sémantické (`warning`/`success`/`info`/`error`) tu zámerne NIE SÚ: na téme bez tých slugov je zamrznutý hex správna odpoveď — je to význam, nie odtieň. ══════════════════════════════════════════════════════════════ */ :root { --bb-preset-accent: var(--wp--preset--color--accent); --bb-preset-accent-strong: var(--wp--preset--color--accent-strong); --bb-preset-accent-light: var(--wp--preset--color--accent-light); --bb-preset-surface: var(--wp--preset--color--surface); } [class*="wp-block-branike-"] { --wp--preset--color--accent: var(--theme-palette-color-1, var(--bb-preset-accent, #7C3AED)); --wp--preset--color--accent-strong: var(--theme-palette-color-1, var(--bb-preset-accent-strong, #5B21B6)); --wp--preset--color--accent-light: var(--theme-palette-color-5, var(--bb-preset-accent-light, #EDE9FE)); --wp--preset--color--surface: var(--theme-palette-color-7, var(--bb-preset-surface, #f8f9fa)); } :root { /* ── Farby povrchov ─────────────────────────────────────── */ --bb-surface: var(--theme-palette-color-8, var(--wp--preset--color--base, #ffffff)); --bb-surface-2: var(--theme-palette-color-7, var(--wp--preset--color--surface, #f8f9fa)); --bb-surface-subtle: var(--theme-palette-color-6, var(--wp--preset--color--base-two, #f0f2f4)); /* ── Text ───────────────────────────────────────────────── */ --bb-text: var(--theme-palette-color-4, var(--wp--preset--color--contrast, #1a1a1a)); --bb-text-muted: var(--theme-palette-color-3, var(--wp--preset--color--contrast-three, #6b7280)); /* 🔴 BEZ palety — text na tmavej ploche musí zostať svetlý aj v noci. */ --bb-text-on-dark: var(--theme-palette-color-8, #ffffff); /* ── Primary / accent ───────────────────────────────────── */ --bb-primary: var(--theme-palette-color-1, var(--wp--preset--color--accent, var(--wp--preset--color--accent, #7C3AED))); --bb-primary-hover: var(--theme-palette-color-2, var(--wp--preset--color--accent-hover, #0284C7)); /* * 🔴 `--bb-primary-strong` je TMAVŠÍ akcent — nesie ho TEXT na svetlom * podklade, takže rozhoduje kontrast, nie odtieň. * * Preto na Blocksy mieri na `--theme-palette-color-1` (hlavná farba), NIE * na `color-2`. Poradie palety v Blocksy nie je zmluva: na it5 je * `color-1 #076951` tmavá a `color-2 #16876b` SVETLEJŠIA — mapovanie na * „druhú" by teda kontrast zhoršilo presne tam, kde ho najviac treba. * * 🔴 `--bb-primary-light` je naopak plocha POD textom (chipy, jemné * pozadia), tam je `color-5` správne: na it5 `#E7F4F1`, teda svetlý tón * tej istej rodiny ako zvyšok webu. */ --bb-primary-strong: var(--theme-palette-color-1, var(--wp--preset--color--accent-strong, #5B21B6)); --bb-primary-light: var(--theme-palette-color-5, var(--wp--preset--color--accent-light, #EDE9FE)); /* ── Borders ────────────────────────────────────────────── */ --bb-border: var(--theme-palette-color-5, rgba(0,0,0,.10)); --bb-border-strong: color-mix(in srgb, var(--bb-text) 20%, transparent); /* ── Tiene ──────────────────────────────────────────────── */ --bb-shadow-sm: 0 1px 3px color-mix(in srgb, var(--bb-text) 8%, transparent), 0 1px 2px color-mix(in srgb, var(--bb-text) 5%, transparent); --bb-shadow-md: 0 4px 6px color-mix(in srgb, var(--bb-text) 7%, transparent), 0 2px 4px color-mix(in srgb, var(--bb-text) 5%, transparent); --bb-shadow-lg: 0 10px 15px color-mix(in srgb, var(--bb-text) 8%, transparent), 0 4px 6px color-mix(in srgb, var(--bb-text) 5%, transparent); /* ── Overlay (modály, lightbox pozadie) ─────────────────── */ --bb-overlay: color-mix(in srgb, var(--bb-text) 60%, transparent); } /* ══════════════════════════════════════════════════════════════════════════ PREFERS-REDUCED-MOTION — spoločná poistka pre VŠETKY bloky ══════════════════════════════════════════════════════════════════════════ 🔴 PREČO TU (1.61.0, 2026-08-16) Guard mal každý blok riešiť sám a sedem z nich ho nemalo VÔBEC: card, countdown, pricing-box, number-box, team, blockquote, timeline. Ďalšie štyri mali len útržok. Je to WCAG 2.3.3 a beží to na klientskych weboch. Tento súbor je jediný, ktorý sa v plugine načíta VŽDY (`enqueue_block_assets` v BB_Loader, bez podmienky), takže jedno pravidlo tu zastúpi jedenásť. 🔴 `opacity: 1` a `transform: none` tu NIE SÚ kozmetika. Bloky štartujú v stave `-anim-ready` (opacity: 0) a viditeľnými ich robí až JS. Keby sme len vypli prechod, používateľ s vypnutým pohybom by obsah NEVIDEL VôBEC — to je horšie než animácia, pred ktorou sa chránil. ⚪ Pohyb poháňaný JavaScriptom (countUp, strokeDashoffset, scroll listener) toto pravidlo NEZASTAVÍ — tie majú vlastný guard vo svojom `frontend.js`. Zoznam je v `harness-bb-reduced-motion.mjs`. */ @media (prefers-reduced-motion: reduce) { /* Počiatočný stav pred animáciou — obsah musí byť vidieť hneď. */ [class*="-anim-ready"], [class*="-anim-in"], [class*="-anim-visible"] { opacity: 1 !important; transform: none !important; filter: none !important; } /* Samotný pohyb. Blokové triedy plugin prefixuje `bb-`, takže sa nedotýkame ničoho cudzieho na stránke. */ [class*="bb-"], [class*="wp-block-branike-"] { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }