/* * Branike Blocks — značka „Ukážka" na slove v texte (formát `branike/edu`). * * 🔴🔴 ZNAČKA NIE JE ROZLÍŠENÁ LEN FARBOU. * Má bodkované podčiarknutie A ikonu. Farba je tretí, nie jediný znak — bez * toho by ju nerozoznal nikto s poruchou farbocitu ani nikto, kto číta výtlačok * v čiernobielom. (WCAG 1.4.1 Use of Color.) * * 🔴 A NEVYZERÁ AKO BEŽNÝ ODKAZ. Bežný odkaz má plné podčiarknutie a odvedie ťa * preč zo stránky; značka má prerušované a otvorí okno na mieste. Rozdiel musí * byť vidieť PRED kliknutím, inak návštevník nevie, čo ho čaká. */ .bb-edu { /* * `text-decoration-*` namiesto `border-bottom`: čiara sleduje tvar písma * a pri zalomení slova na dva riadky ide s ním. Rámček by sa nakreslil * pod celý riadkový box a pri zalomení by sa rozpadol. */ text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; text-underline-offset: 0.22em; color: inherit; cursor: pointer; } /* * Ikona za slovom. `mask` a nie `background-image`, aby prebrala farbu textu — * inak by na tmavom pozadí zmizla a musela by sa riešiť druhá sada obrázkov. */ .bb-edu::after { content: ""; display: inline-block; inline-size: 0.85em; block-size: 0.85em; margin-inline-start: 0.22em; vertical-align: -0.08em; background-color: currentColor; -webkit-mask-image: var(--bb-edu-icon); mask-image: var(--bb-edu-icon); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; /* * 🔴 Ikona je dekorácia toho, čo `aria-label` už povedalo slovami. Keby ju * čítačka ohlásila, návštevník by účel počul dvakrát. */ speak: never; } /* Tabler „photo" — ten istý znak, aký nesie chip bloku aj tlačidlo v lište. */ .bb-edu { --bb-edu-icon: url('data:image/svg+xml;utf8,'); } .bb-edu:hover { text-decoration-style: solid; } /* * ── Variant „len ikona" (`data-bb-edu-icon`) ──────────────────────────────── * * V texte je vidieť IBA ikonu. Označené slovo sa NEMAŽE — ostáva v obsahu ako * prístupný názov odkazu a `bb-lightbox.js` z neho navyše skladá `aria-label`. * * 🔴 Prečo `font-size: 0`, a nie `display: none` na texte: text sa musí dať * skryť OKU, nie čítačke. `display:none` a `visibility:hidden` ho vyhodia * z prístupnostného stromu a zo značky by sa stal odkaz bez názvu. Nulová * veľkosť písma ho z DOM ani zo stromu nevyhodí — len mu vezme šírku. * Text sa pritom nedá obaliť do ``: RichText formát vie do obsahu zapísať * jeden `` s atribútmi, nič vnútri neho. [[feedback_no_literal_text_in_template_part]] * * 🔴 `::after` si veľkosť MUSÍ vrátiť sám. Dedil by `0`, a keďže ikona je * v `em`, zmizla by aj ona — vyšiel by odkaz, ktorý nie je vidieť VÔBEC. */ /* * 🔴 VEĽKOSŤ IKONY MUSÍ BYŤ V `rem`, NIE V `em`. * * Bežná značka má ikonu `0.85em`, takže rastie s textom okolo seba. Tu to * nejde: `font-size` značky je 0, takže `em` by z ikony spravilo NULU. Preto * vlastná premenná v `rem` — a preto je aj nastaviteľná zvonku: 1.05rem sedí * do čipu, ale web s väčším písmom si ju musí vedieť zdvihnúť bez zásahu * do pluginu (spolu s čipom, inak by ikona z rámu vyliezla): * * .bb-edu[data-bb-edu-icon] { * --bb-edu-icon-size: 1.4rem; * --bb-edu-chip-size: 2.2rem; * } * * 🔴 22. 8. 2026 klesla z `1.5rem` na `1.05rem` — dovtedy stála v texte samotná, * teraz sedí v čipe. Nie je to zmenšenie značky: čip je 1.65rem, teda VÄČŠÍ. */ /* * 🔴🔴 PREČO JE Z TOHO ČIP, A NIE LEN INÁ FARBA — ODMERANÉ, NIE ODHADNUTÉ. * * Na branike.com (22. 8. 2026) mala ikona presne farbu okolitého textu: * * ikona rgb(86, 96, 112) * odsek okolo nej rgb(86, 96, 112) → kontrast medzi nimi 1,0 : 1 * * Bežný variant nesie odlíšenie bodkovaným podčiarknutím. Tento ho ale VYPÍNA * (`text-decoration: none` nižšie), lebo podčiarkovať samotnú ikonu nedáva * zmysel — takže mu neostalo NIČ. Čitateľ videl sivý štvorček za bodkou. * * 🔴 Prefarbenie samotné NESTAČÍ a dá sa to spočítať. Akcent našej témy * `#7C3AED` má voči textu `#566070` kontrast 1,12 : 1. Na 3 : 1, ktoré WCAG * žiada tam, kde je farba JEDINÝM rozlišovacím znakom (technika G183), sa pri * týchto dvoch hodnotách nedá dostať ničím, čo ešte vyzerá ako fialová. Znak * preto musí niesť TVAR — rám čipu — a farba je až bonus navrchu. * * 🔴🔴 HRANA A IKONA SÚ Z `currentColor`, AKCENT ŽIJE LEN V PLOCHE. * Pluginy idú členom s vlastnými paletami a ich akcent môže byť svetlá žltá na * bielej. `currentColor` je farba textu odseku, v ktorom značka stojí — na tom * pozadí je čitateľná už z definície, inak by sa nedal čítať samotný článok. * Minimálna viditeľnosť sa teda DEDÍ, nepredpokladá sa. Plocha je z väčšiny aj * tak farba pozadia, takže tú akcent pokaziť nevie. * * Kto vie, že jeho akcent má kontrast, prepíše si hranu jednou premennou: * * .bb-edu[data-bb-edu-icon] { --bb-edu-edge: var(--bb-edu-accent); } * * 🔴 CSS kontrast MERAŤ NEVIE. Toto je pravidlo, nie detekcia — preto je * predvolený stav ten bezpečný a krajší sa zapína vedome. */ .bb-edu[data-bb-edu-icon] { --bb-edu-icon-size: 1.05rem; --bb-edu-chip-size: 1.65rem; /* * 🔴 Posledný člen reťaze je ZÁMERNE `currentColor`, nie hex. Pod neznámou * témou radšej striedmy čip než cudzia farba, ktorá tam nepatrí. */ --bb-edu-accent: var(--wp--preset--color--accent, var(--theme-palette-color-1, currentColor)); --bb-edu-edge: currentColor; display: inline-flex; align-items: center; justify-content: center; /* * 🔴 Rozmer je pevný a rezervovaný UŽ V POKOJI. Hover mení iba farby, takže * sa pri prejdení myšou neposunie ani písmeno (CLS = 0). * 🔴 A v `rem`, nie v `em`: `font-size` značky je 0, takže `em` by z celého * čipu spravilo nulu — tá istá pasca ako pri ikone nižšie. */ inline-size: var(--bb-edu-chip-size); block-size: var(--bb-edu-chip-size); /* * 🔴 `middle`, NIE pevný posun. Prvá verzia mala `-0.42rem` a čip visel pod * riadkom — odmerané na branike.com 22. 8. 2026: stred čipu bol 12,22 px POD * optickým stredom textu. Pevný posun v `rem` sa navyše nevie prispôsobiť: * * text 16 px 20,8 px 26 px * -0.42rem +10,95 +12,22 +13,59 ← s väčším písmom horšie * middle 0,00 0,00 0,00 * * `middle` zarovná stred boxu na účiarie plus polovicu výšky malého písmena, * čo JE optický stred riadku — a berie si ju z RODIČA, takže funguje aj tu, * kde má samotná značka `font-size: 0`. */ vertical-align: middle; border: 1px solid var(--bb-edu-edge); border-radius: 0.4rem; /* * 🔴 Dva zápisy zámerne. Prehliadač bez `color-mix` zoberie prvý a čip má * priehľadnú plochu — hrana aj ikona sú z `currentColor`, takže ostane plne * viditeľný. Degraduje sa vzhľad, nie čitateľnosť. */ background: transparent; background: color-mix(in srgb, var(--bb-edu-accent) 12%, transparent); /* Aby čip nikdy nespadol sám na nový riadok, oddelený od svojej vety. */ white-space: nowrap; font-size: 0; line-height: 0; text-decoration: none; } .bb-edu[data-bb-edu-icon]::after { font-size: 1rem; line-height: 1; inline-size: var(--bb-edu-icon-size); block-size: var(--bb-edu-icon-size); margin-inline-start: 0; vertical-align: 0; } /* * 🔴 Hover a fokus NEINVERTUJÚ farby. Biela ikona na akcente by pri svetlom * akcente zmizla — a to je presne prípad, ktorý má tento návrh vydržať. * Zosilňuje sa iba plocha; hrana aj ikona ostávajú `currentColor`, takže * kontrast je zachovaný konštrukciou, nie odhadom. */ .bb-edu[data-bb-edu-icon]:hover, .bb-edu[data-bb-edu-icon]:focus-visible { background: color-mix(in srgb, var(--bb-edu-accent) 30%, transparent); } /* * ── Štyri varianty ────────────────────────────────────────────────────────── * * 🔴 Konečný zoznam, nie výber farby. Voľná paleta by znamenala inline štýl * v bloku (bije sa s `harness-bb-legacy-inline-style.mjs`) a nikto by nezmeral, * čo si klient vyberie. Takto je každý variant merateľný. * * 🔴 Ikona je viazaná na VÝZNAM, nie na vkus. Preto nesie informáciu aj tam, * kde farbu nikto nevidí — vo výtlačku, pri poruche farbocitu, v čítačke. * * 🔴🔴 ATRIBÚT, NIE TRIEDA — a nie je to kozmetika. * `registerFormatType` má triedu NAPEVNO (`className: 'bb-edu'`) a druhú pridať * nevie; RichText by ju pri ukladaní zahodil. Zapisovať `data-` atribúty ale * vie — presne tak funguje `data-bb-edu-icon` aj `data-bb-edu-pulz`. Prvá * verzia (1.62.5) mala triedy `.bb-edu--*` a z editora sa nedali zapnúť VÔBEC. * Prepísané v 1.62.7; v obsahu ich nikto nemal, lebo sa nedali vyrobiť. */ .bb-edu[data-bb-edu-variant="vysvetlenie"] { --bb-edu-icon: url('data:image/svg+xml;utf8,'); } /* * Jediné miesto s pevnou farbou v celom súbore — a smie tu byť len preto, že * akcent žije IBA v 12 % ploche. Na čitateľnosti sa nepodieľa; keby hex zmizol, * čip je stále ohraničený a ikona stále vidieť. */ .bb-edu[data-bb-edu-variant="upozornenie"] { --bb-edu-accent: var(--wp--preset--color--warning, #b45309); --bb-edu-icon: url('data:image/svg+xml;utf8,'); } /* Pre weby, ktoré nechcú v texte žiadnu farbu navyše. */ .bb-edu[data-bb-edu-variant="bez-farby"] { --bb-edu-accent: transparent; } /* * ── Upútanie pozornosti (`data-bb-edu-pulz`) ──────────────────────────────── * * Ikona trikrát pulzne, keď na ňu čitateľ doroluje, a stíchne. * * 🔴 TRI PULZY, NIE NEKONEČNO. WCAG 2.2.2 (Pause, Stop, Hide) žiada, aby sa * pohyb dlhší než 5 sekúnd dal zastaviť. Konečný počet opakovaní ten problém * nemá vôbec — a nekonečný pulz by si vyžiadal tlačidlo „zastaviť", ktoré by * v texte článku bolo horšie než samotný pulz. * * 🔴 A ŽIADNE BLIKANIE. Meníme mierku a priehľadnosť plynule; ostré striedanie * viditeľné/neviditeľné je záblesk. WCAG 2.3.1 dovoľuje najviac tri záblesky za * sekundu a pri fotosenzitívnej epilepsii to nie je kozmetika. * * 🔴 Animuje sa LEN `transform` a `opacity` — obe beží kompozitor, takže to * nespôsobí prekreslenie rozloženia ani posun obsahu (CLS = 0). * [[feedback_pagespeed_standards]] */ @keyframes bb-edu-pulz { 0%, 100% { transform: scale( 1 ); opacity: 1; } 50% { transform: scale( 1.35 ); opacity: 0.55; } } .bb-edu[data-bb-edu-pulz].is-bb-edu-pulzuje::after { animation: bb-edu-pulz 900ms ease-in-out 3; transform-origin: center; } /* * 🔴 Kto si vyžiadal menej pohybu, nedostane ŽIADNY. Nie pomalší, žiadny. * Značka ostáva plne funkčná — pulz je upozornenie navyše, nie nosič informácie. */ @media ( prefers-reduced-motion: reduce ) { .bb-edu[data-bb-edu-pulz].is-bb-edu-pulzuje::after { animation: none; } } /* * 🔴 Viditeľný obrys pri fokuse sa NESMIE zrušiť — značka je jeden z mála * prvkov uprostred textu, na ktorý sa dá tabulátorom prísť, a bez obrysu * návštevník na klávesnici nevie, kde stojí. (WCAG 2.4.7) */ .bb-edu:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; } /* * V EDITORE. Formát sa vykresľuje priamo v RichTexte, takže tú istú podobu * musí mať aj tam — inak autor uvidí výsledok až na webe. */ .editor-styles-wrapper .bb-edu { cursor: text; }