/** * Branike theme — minimal runtime CSS. * Per-visitor dark mode: toggling .is-dark-mode on re-maps the color * presets to the dark palette (Design Manual §10). Everything uses * var(--wp--preset--color--*), so the whole site re-skins with zero layout shift. * Persistence + no-FOUC inline head script = HUB module (ADR-003 §5, Fáza 4). */ :root { color-scheme: light; } /* * Horizontal-overflow guard. Off-screen fixed/absolute widgets — e.g. the closed * WooCommerce mini-cart drawer, parked just past the right edge — can widen the * mobile layout viewport and let the whole page pan sideways. That sideways pan * drags the fixed navigation drawer (and its × button) off-screen. Clipping the * x-axis at the root pins everything to the visible viewport. `clip` (not * `hidden`) leaves the y-axis untouched, so the sticky header keeps working. */ html { overflow-x: clip; } /* * WooCommerce mini-cart hardening. The CLOSED drawer stays in the DOM as a fixed, * off-screen box (~480px past the right edge). Because it is `position:fixed`, the * root `overflow-x: clip` above cannot always contain it, so on mobile it widens * the layout viewport and lets the whole page pan sideways / zoom out. In its * closed state (`--is-hidden`) the overlay is already fully transparent and * non-interactive, so we drop it out of layout entirely. Opening the cart removes * `--is-hidden`, so the drawer still slides in and works normally. */ .wc-block-components-drawer__screen-overlay--is-hidden { display: none !important; } /* * ── NOČNÁ PALETA SA UŽ NEPÍŠE TU ──────────────────────────────────────────── * 🔴 Tu bola tabuľka pevných hexov (`--wp--preset--color--accent: #A78BFA` …). * Pre fialovú Branike bola správna — je z kapitoly 10 dizajn manuálu — ale * v momente, keď si klient vybral inú paletu, sa deň a noc rozišli: deň zelený, * noc stále fialová. Presne to Brani 07-27 videl. * * Nočnú paletu teraz počíta `BT_Palette` z tej DENNEJ, ktorá je práve aktívna. * Ten istý rebrík svetlostí, len odtieň sa vezme z palety klienta. Pribudne * dvadsať paliet → nepribudne ani jedna nočná tabuľka. */ html.is-dark-mode { background-color: var( --wp--preset--color--base ); /* 🔴 Pozadie a text v páre aj na koreni — `body` ho aj tak prebije, ale pravidlo, ktoré maľuje plochu, má vždy povedať aj čím sa na nej píše. */ color: var( --wp--preset--color--contrast ); } /* Smooth, GPU-friendly theme switch (color only — no layout, no CLS). */ html.is-dark-mode, html.is-dark-mode body { transition: background-color 0.2s ease, color 0.2s ease; } /* Dark-toggle button: small, subtle, square-ish (rendered via a core/html button). */ .branike-color-toggle { min-width: 2.5rem; padding: 0.45rem 0.6rem; font-size: 1rem; line-height: 1; text-align: center; cursor: pointer; color: var( --wp--preset--color--contrast-two ); background-color: transparent; border: 1px solid var( --wp--preset--color--accent-light ); border-radius: 8px; transition: background-color 0.15s ease, color 0.15s ease; } .branike-color-toggle:hover, .branike-color-toggle:focus-visible { background-color: var( --wp--preset--color--accent-light ); color: var( --wp--preset--color--accent-strong ); } /* * ── Sticky header ──────────────────────────────────────────────────────────── * WordPress' position support puts `.is-position-sticky` on the header GROUP, but * that group's only parent is the `

` wrapper, * which is exactly as tall as the group itself (measured on dev: both 79px). A sticky * box can only travel inside its parent's box, so with zero spare height it scrolls * straight out of view — `position: sticky` was applied and did nothing at all. * * Fix: promote the WRAPPER, whose parent is `.wp-site-blocks` (the whole page, so * there is room to travel), and drop the inner group back to `static` so exactly one * sticky box remains. `:has()` keeps this opt-in per header pattern — presets without * the sticky attribute are untouched. Browsers without `:has()` get a normal * non-sticky header (graceful, nothing breaks, no layout shift either way). * * `top` mirrors core's own admin-bar logic (block-library/style.css): offset by the * admin bar height, and 0 below 600px where the bar is no longer fixed. For visitors * the variable is undefined, so the fallback 0px applies. */ @supports selector( :has( * ) ) { header.wp-block-template-part:has( > .is-position-sticky ) { position: sticky; top: var( --wp-admin--admin-bar--height, 0px ); z-index: 10; } header.wp-block-template-part:has( > .is-position-sticky ) > .is-position-sticky { position: static; } @media screen and ( max-width: 600px ) { header.wp-block-template-part:has( > .is-position-sticky ) { top: 0; } } } /* * ── Sticky header that hides on scroll down ────────────────────────────────── * Opt-in from the settings page; `header-autohide.js` toggles the class. * * 🔴 THE RESTING STATE DECLARES NO `transform` ON PURPOSE. Any transform other * than `none` — including `translateY(0)` — makes this element the containing * block for `position: fixed` descendants, which would re-anchor the mobile * navigation drawer to the header instead of the viewport. The transform exists * only while the header is hidden. Going from `none` to `translateY(-100%)` * still animates, because `none` is interpolated as the identity matrix. * * Hiding is `transform` only — never height/display/position — so the document * flow is untouched and CLS stays 0. */ /* * ══ Prázdne pásy medzi hlavičkou, obsahom a pätičkou ══════════════════════════ * * NÁLEZ (branike.com, 2026-08-02, odmerané v prehliadači): pod hlavičkou a nad * pätičkou bol na každej stránke pás cudzej farby — v dni biely, v noci čierny. * Nešlo o farbu, ale o skutočne prázdne miesto. * * Príčina: jadro vypisuje z `spacing.blockGap` pravidlo * :where( .wp-site-blocks ) > * { margin-block-start: 24px } * ktoré platí aj pre TOP-LEVEL časti stránky. `main` tak dostal 24 px nad sebou * (pás pod hlavičkou) a `footer` 24 px nad sebou (pás nad pätičkou). Keďže * hlavička aj pätička majú vlastné pozadie a medzera nie, presvitalo ceznu telo * dokumentu — teda presne ten pruh, ktorý bolo vidno. * * 🔴 Blokový odstup vnútri obsahu sa NEMENÍ. Mení sa len vzťah troch najvyšších * súrodencov, ktoré na seba majú nadväzovať bez škáry. Selektor je zámerne * `.wp-site-blocks > tag` (0,1,1), aby spoľahlivo prebil `:where()` z jadra, * ktoré má špecificitu 0 — pravidlo musí VYHRAŤ, nie len existovať. * [[feedback_css_rule_must_win_not_exist]] */ .wp-site-blocks > header.wp-block-template-part, .wp-site-blocks > main, .wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; } body.bt-header-autohide header.wp-block-template-part { transition: transform 0.25s ease; } body.bt-header-autohide header.wp-block-template-part.bt-header--hidden { transform: translateY( -100% ); } /* Motion is a preference, not a decoration: honour it, but still hide/show. */ @media ( prefers-reduced-motion: reduce ) { body.bt-header-autohide header.wp-block-template-part { transition: none; } } /* * 🔴🔴 HEADER RESPONSIVENESS MOVED OUT — DO NOT PUT IT BACK HERE (2026-08-06) * * Two rules used to live here behind a hard-coded `@media (max-width: 781px)`: * header rows may wrap, and the mobile logo/hamburger placement. The menu, * however, collapses at `BT_Header_Actions::collapse_breakpoint()` — a computed * value. Two numbers that did not know about each other. * * MEASURED on branike.com: between 720 and 781 px the menu was already inline * while the bar still had to wrap → header 222 px tall, menu on three rows. * That was Brani's "the header keeps jumping". * * Both rules now come from `BT_Header_Actions::build_below_collapse_css()`, * which is generated from the SAME breakpoint. A literal breakpoint written * back into this file will fail `harness-bt-viewport-band.php`. * [[feedback_one_breakpoint_many_rules]] */ /* * 🔴🔴 Screen-reader label must never widen the document (2026-08-06). * * MEASURED on /prirucka/: `document.scrollWidth` was 818 at a 540 px viewport * (and 1790 at 940) — the whole page slid left/right, showing a bare strip of * background next to the content. The culprit was a single absolutely * positioned element: `label.wp-block-search__label.screen-reader-text`, * computed `width: 540px`. * * WHY IT DIFFERED PER PAGE: `.screen-reader-text{width:1px}` and core's * `.wp-block-search__label{width:100%}` have the SAME specificity, so source * order decides. Core prints the search block's inline style at a position that * depends on which blocks the request rendered — on `/` it landed before * `wc-blocks.css`, on `/prirucka/` after it. Same markup, opposite outcome. * * The fix is specificity, not order: two classes beat one, on every page. * Proven in the browser — scrollWidth went 818 → 540, 1790 → 940. */ .wp-block-search__label.screen-reader-text { width: 1px; height: 1px; overflow: hidden; } .wp-block-search__label.screen-reader-text:focus { width: auto; height: auto; overflow: visible; } /* * ── Vyskakovacie hľadanie ───────────────────────────────────────────────────── * Predloha: branike.sk (viď `_reference/PRESETY-PREDLOHY.md`). Celoplošný tmavý * overlay, veľký vstup len so spodnou linkou, okrúhle brandové tlačidlo s lupou, * výsledky v dvoch stĺpcoch (náhľad + titulok), „Zobraziť viac" vycentrované. * * `hidden` na koreni robí celú prácu skrývania — JS len prepína atribút, takže * zatvorený modál je úplne von z layoutu (0 CLS, žiadny dopad na LCP). */ .bt-search-modal[hidden] { display: none; } .bt-search-modal { position: fixed; inset: 0; z-index: 999; display: flex; align-items: flex-start; justify-content: center; /* * Horný odstup musí byť VÄČŠÍ než hlavička, inak vstup s lupou sedí presne * na riadku hlavičky a opticky sa s ňou bije (Brani, 07-26: „lupa nie je pre * modál zarovnaná"). ~18 vh posadí vstup pod hlavičku aj pri 2-radových * variantách; `clamp` drží rozumný odstup aj na nízkych oknách. */ padding: clamp( 4rem, 18vh, 11rem ) clamp( 1rem, 5vw, 3rem ) clamp( 2rem, 8vh, 5rem ); overflow-y: auto; background-color: rgba( 17, 24, 39, 0.97 ); /* dark-mode-exception: modál vyhľadávania je uzavretý tmavý prekryv nad stránkou. */ color: #fff; } /* Kým je modál otvorený, stránka pod ním sa nesmie scrollovať. */ html.bt-search-open { overflow: hidden; } .bt-search-modal__inner { width: 100%; max-width: 60rem; } .bt-search-modal__row { display: flex; align-items: center; gap: 1rem; border-bottom: 2px solid rgba( 255, 255, 255, 0.35 ); padding-bottom: 0.75rem; } .bt-search-modal__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: inherit; font-size: clamp( 1.5rem, 4vw, 2.5rem ); line-height: 1.2; padding: 0.25rem 0; } .bt-search-modal__input::placeholder { color: rgba( 255, 255, 255, 0.5 ); } .bt-search-modal__input:focus { outline: none; /* fokus je zreteľný cez linku pod celým riadkom (nižšie) */ } .bt-search-modal__row:focus-within { border-bottom-color: var( --wp--preset--color--accent, #7c3aed ); } /* Okrúhle tlačidlo s lupou — ikona je nakreslená CSS-om, žiadny extra request. */ .bt-search-modal__submit { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border: 0; border-radius: 50%; cursor: pointer; background-color: var( --wp--preset--color--accent, #7c3aed ); position: relative; } /* dark-mode-exception: modál vyhľadávania je uzavretý tmavý prekryv nad stránkou. */ .bt-search-modal__submit::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0.95rem; height: 0.95rem; margin: -0.6rem 0 0 -0.6rem; border: 2px solid #fff; border-radius: 50%; } /* dark-mode-exception: modál vyhľadávania je uzavretý tmavý prekryv nad stránkou. */ .bt-search-modal__submit::after { content: ""; position: absolute; top: 58%; left: 57%; width: 0.6rem; height: 2px; background-color: #fff; transform: rotate( 45deg ); transform-origin: left center; } /* Krížik — kruh s dvoma prekríženými čiarkami, vždy v pravom hornom rohu. */ .bt-search-modal__close { position: absolute; top: clamp( 0.75rem, 3vh, 2rem ); right: clamp( 0.75rem, 3vw, 2rem ); width: 2.75rem; height: 2.75rem; border: 1px solid rgba( 255, 255, 255, 0.4 ); border-radius: 50%; background: transparent; cursor: pointer; } /* dark-mode-exception: modál vyhľadávania je uzavretý tmavý prekryv nad stránkou. */ .bt-search-modal__close::before, .bt-search-modal__close::after { content: ""; position: absolute; top: 50%; left: 25%; width: 50%; height: 2px; background-color: #fff; } .bt-search-modal__close::before { transform: rotate( 45deg ); } .bt-search-modal__close::after { transform: rotate( -45deg ); } .bt-search-modal__status { margin: 1rem 0 0; font-size: 0.875rem; color: rgba( 255, 255, 255, 0.65 ); } .bt-search-modal__results { display: grid; grid-template-columns: 1fr; gap: 0.5rem 2.5rem; margin-top: 1.5rem; } /* * 🔴 BOLO `48em`, ZMENENÉ NA `768px` (19. 8. 2026) * * `48em` je pri predvolenom písme 768 px, takže to vyzeralo ako sused ostatných * zlomov. Lenže `em` v media query sa počíta z veľkosti písma PREHLIADAČA, nie * z našej. Návštevník, ktorý si ju zväčšil — bežné pri slabšom zraku — dostal * zlom napríklad pri 960 px a výsledky hľadania sa mu prepli inde než všetko * ostatné na webe. Bola to jediná jednotka mimo px zo 61 zlomov v repe, takže * to nevyzeralo ako rozhodnutie, ale ako preklep. * * ⚠️ Nie je to „em je zlé". Pre TYPOGRAFIU je relatívna jednotka správna. Ale * hranica ROZLOŽENIA sa musí zhodovať so zvyškom systému, inak sa web zalomí * na dvoch rôznych miestach naraz. */ @media ( min-width: 768px ) { .bt-search-modal__results { grid-template-columns: 1fr 1fr; } } .bt-search-modal__item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color 0.15s ease; } .bt-search-modal__item:hover, .bt-search-modal__item.is-active, .bt-search-modal__item:focus-visible { background-color: rgba( 255, 255, 255, 0.1 ); } .bt-search-modal__thumb { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background-color: rgba( 255, 255, 255, 0.12 ); } .bt-search-modal__title { font-weight: 600; line-height: 1.35; } .bt-search-modal__more { display: block; margin: 2rem auto 0; width: -moz-fit-content; width: fit-content; color: inherit; font-weight: 600; } /* * 🔴 `display: block` vyššie PREBÍJA atribút `hidden` — ten skrýva len cez UA * stylesheet, takže autorské pravidlo vyhrá. Bez tohto riadku svieti „Zobraziť * viac" aj pri prázdnom vstupe (nahlásené naživo 07-26). Rovnaká pasca ako * `.bt-search-modal[hidden]` vyššie — každý prvok, ktorý JS skrýva cez `hidden` * a CSS mu nastavuje `display`, potrebuje tento pár. */ .bt-search-modal__more[hidden] { display: none; } /* * ── Mobile menu button: TRI čiarky, nie dve ─────────────────────────────────── * WordPress core kreslí hamburger presne DVOMA pathmi (`M4 7.5h16v1.5H4z` + * `M4 15h16v1.5H4z` — odmerané na deve 07-26). Dve čiarky čítajú ľudia ako * nedorobené; tri sú zaužívaná konvencia. * * Skryjeme coreové SVG (je `aria-hidden`, takže prístupný názov tlačidla * „Open menu" ostáva nedotknutý) a tri čiarky nakreslíme JEDNÝM pseudo-elementom * cez background-image: žiadny extra DOM, žiadny JS, `currentColor` → funguje na * svetlej aj tmavej hlavičke. Box má rovnakú stopu 24×24 ako coreové SVG, takže * sa nič neposunie (CLS 0). */ .wp-block-navigation__responsive-container-open svg { display: none; } .wp-block-navigation__responsive-container-open::before { content: ""; display: block; width: 24px; height: 24px; background-image: linear-gradient( currentColor, currentColor ), linear-gradient( currentColor, currentColor ), linear-gradient( currentColor, currentColor ); background-size: 100% 2px; background-position: 0 5px, 0 11px, 0 17px; background-repeat: no-repeat; } /* * ── Mobile navigation overlay (full-screen, clean, generously padded) ───────── * Our headers use justifyContent:center/right on desktop, which must not leak * into the overlay. Force a single left-aligned column with real breathing room * so labels never stagger or glue to the screen edge. */ .wp-block-navigation__responsive-container.is-menu-open { padding: clamp( 1.5rem, 7vw, 3.25rem ) !important; } /* * Drawer, not full-bleed: the panel takes ~90% from the right so a sliver of the * page peeks behind it. MOVED to `BT_Header_Actions::build_below_collapse_css()` * — the drawer look belongs to "header is collapsed", which is one computed * breakpoint, not a literal. See the note near the top of this file. */ /* Close (×): always clearly visible — round tappable target, own contrast. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex !important; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 999px; color: var( --wp--preset--color--white, #fff ); background-color: rgba( 255, 255, 255, 0.12 ); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible { background-color: rgba( 255, 255, 255, 0.22 ); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 1.5rem; height: 1.5rem; fill: currentColor; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { width: 100%; padding-top: var( --wp--preset--spacing--50, 1.5rem ); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container { flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; text-align: left; gap: clamp( 0.75rem, 2.5vh, 1.35rem ); width: 100%; } /* Full-width, comfortable tap targets. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 0.35rem 0; font-size: clamp( 1.15rem, 4.5vw, 1.5rem ); } /* Close (×) button — sits inside the padded edge, not jammed in the corner. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: clamp( 1.25rem, 5vw, 2rem ); right: clamp( 1.25rem, 5vw, 2rem ); } /* * Utility "hide on mobile": MOVED to `BT_Header_Actions::build_below_collapse_css()`. * "Mobile" ends where the header collapses — one breakpoint, not a literal. */ /* * Per-page container width (BT_Page_Settings, v2 kameň 1). * Overrides WP constrained-layout custom properties on — pure CSS, * no JS, no layout shift (0 CLS). Applies only when a per-page value is set. */ /* * 🔴🔴 ŠÍRKA SA NASTAVUJE NA `main`, NIE NA ``. * * NAMERANÉ na it2 (Brani, 29. 7.): „keď dám podujatia na celú šírku, tak to * aj menu roztiahne." Presne tak — premenná na `` sa dedí do CELÉHO * dokumentu vrátane hlavičky a pätičky, takže sa s obsahom roztiahlo aj menu. * * Nastavenie sa volá „šírka OBSAHU" a presne to má robiť. Hlavička a pätička * majú vlastný vzhľad, ktorý si klient nastavuje inde — nesmú sa hýbať podľa * toho, akú šírku má práve otvorený článok. * * `main` je na to správne miesto: každá šablóna témy má práve jeden * (overené 12/12) a hlavička s pätičkou sú jeho SÚRODENCI, nie potomkovia. * Stráži to `harness-bt-page-settings.php`. */ body.bt-container-narrow main { --wp--style--global--content-size: 34rem; } body.bt-container-wide main { --wp--style--global--content-size: var( --wp--style--global--wide-size, 1200px ); } body.bt-container-full main { --wp--style--global--content-size: 100%; --wp--style--global--wide-size: 100%; } /* * ── Obsah + bočný panel ────────────────────────────────────────────────────── * Server-rendered obal okolo obsahu (BT_Page_Settings) — rozloženie drží trieda * od prvého vykreslenia, takže CLS = 0. * * 🔴🔴 O jednom či dvoch stĺpcoch rozhoduje šírka KONTAJNERA, nie okna. * * NAMERANÉ na it2 28. 7. (Brani zapol panel na podujatí): * úzke rozloženie 680 px + panel → na obsah ostalo 344 px * a na detail podujatia v ňom 248 px. * Panel bol pevných 18 rem a zapínal sa cez `@media ( min-width: 782px )`, * teda podľa OKNA. Okno bolo 1352, tak sa zapol — hoci stĺpec, v ktorom * naozaj leží, mal 680. To je ten istý omyl, ktorý sme v ten deň opravovali * už dvakrát inde. * * 🔴 RIEŠENÍM NIE JE ANI `@media`, ANI `@container`, ale štandardný „sidebar" * primitív (flex + wrap). `@container` by tu nepomohol: dotaz štýluje POTOMKOV * kontajnera, takže by sme na obal potrebovali ešte jeden obal. Flex to zvládne * sám a bez jediného zlomu v pixeloch: * * · panel má základ 18 rem a berie si ho, kým je miesto * · `flex-grow: 999` na obsahu zožerie všetok voľný priestor, takže sa panel * nenaťahuje, kým sú vedľa seba * · `min-inline-size: 60%` je PRAH: keď by obsah klesol pod 60 % kontajnera, * riadok sa zalomí a panel ide pod obsah cez celú šírku * * Vychádza z toho prah ~800 px šírky KONTAJNERA (18 rem + medzera musí byť * najviac 40 %). Nikde ho nemusíme písať ani udržiavať — vyplynie zo vzťahu. * * 🔴 Pri ľavom paneli ostáva obsah v DOM PRVÝ a presúva sa len vizuálne * (`order`). Odčítačka aj klávesnica tak dostanú hlavný obsah skôr než * doplnkový panel (WCAG 2.1 — 1.3.2 a 2.4.3). */ .bt-with-sidebar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var( --wp--preset--spacing--60, 2rem ); } .bt-with-sidebar > .bt-main { /* 🔴 `999` nie je preklep — obsah musí zožrať voľné miesto, inak by sa panel roztiahol na polovicu. `min-inline-size` je prah zalomenia. */ flex: 999 1 0; min-inline-size: 60%; } .bt-with-sidebar > .bt-sidebar { flex: 1 1 18rem; min-inline-size: 0; } /* * 🔴🔴 `wrap-reverse` NIE JE KOZMETIKA — bez neho skončí ľavý panel na telefóne * NAD článkom. * * `order: 1` platí aj po zalomení, takže panel, ktorý má na širokej obrazovke * stáť vľavo, sa na úzkej postaví PRED obsah. Návštevník tak vidí najprv * widgety a text až pod nimi. Odmerané v Chromiu (kontajner 1100, okno 430): * * panel vpravo obsah y = 80 panel y = 188 ← správne * panel vľavo obsah y = 146 panel y = 8 ← 🔴 panel hore * * Ironicky to išlo proti tomu, čo je o pár riadkov vyššie napísané ako výhoda: * v DOM obsah naozaj prvý JE (čítačka aj klávesnica sú v poriadku), ale oči ho * dostali ako druhý — teda nesúlad vizuálneho a fokusového poradia (WCAG 2.4.3). * * `wrap-reverse` obracia krížnu os: prvý riadok ide DOLE. Panel s `order: 1` * tak pri zalomení pristane pod obsahom sám, bez media query a bez napísaného * prahu — teda rovnakou cestou, akou vzniká aj samotné zalomenie. * Stráži to `_devtest/harness/harness-bt-sidebar-layout.mjs`. */ /* * 🔴🔴 `flex-end` PRI OBRÁTENEJ OSI ZNAMENÁ HORE — a bez tohto riadku visel * ľavý panel pri SPODKU riadku. * * Odmerané na branike.com 29. 8. (stránka 7215, okno 1352, kontajner 1256): * * obsah y = 248 panel y = 560 → panel o 312 px NIŽŠIE * * `.bt-with-sidebar` má `align-items: flex-start`, čo je správne — lenže * `wrap-reverse` o riadok vyššie obracia priečnu os, takže „start" je zrazu * DOLE. Pravý panel `wrap-reverse` nemá, a preto tú istú chybu nikdy nemal. * * Mutácie priamo na živej stránke (Δ panela voči vrchu obsahu): * dnes 312 px · `align-items: flex-end` 0 · `flex-wrap: wrap` 0 * Posledná možnosť je pritom past: bez `wrap-reverse` skončí panel na telefóne * NAD článkom — presne nález z 21. 8., ktorý `wrap-reverse` opravil. Preto sa * obracia zarovnanie, nie zalamovanie. * * 🔴 Zmeriavaj to v SEKVENCII s prahom zalomenia, nie oddelene: „stoja vedľa * seba" je zelené aj vtedy, keď je panel odsunutý o 312 px — boxy sa stále * prekrývajú. [[feedback_hover_and_click_must_be_measured_in_sequence]] */ .bt-sidebar-left { flex-wrap: wrap-reverse; align-items: flex-end; } .bt-sidebar-left > .bt-main { order: 2; } .bt-sidebar-left > .bt-sidebar { order: 1; } /* * Search button — jemné, malé, on-brand (prepíše prípadné cudzie/červené štýly * z pluginov). Ikonové tlačidlo v hlavičke = mäkký fialový akcent, nie krikľavý blok. */ .wp-block-search__button { background-color: var( --wp--preset--color--accent-light ); color: var( --wp--preset--color--accent-strong ); border: none; border-radius: 8px; padding: 0.45rem 0.6rem; transition: background-color 0.15s ease, color 0.15s ease; } /* * 🔴 `base`, NIE `#fff`. V noci je akcent SVETLÝ, takže biely text na ňom * padá — na it2 to na tlačidle „Pridať do košíka" dalo 2,41. Rovnaký pár * ako `elements.button` v `theme.json`, a rovnaký dôvod. */ .wp-block-search__button:hover, .wp-block-search__button:focus-visible { background-color: var( --wp--preset--color--accent ); color: var( --wp--preset--color--base, #fff ); } .wp-block-search__button svg { fill: currentColor; } /* * WooCommerce ikony v hlavičke — účet a mini-košík. * * 🔴 PREČO TO TREBA (odmerané na it2.branike.sk 07-26): * .wp-block-woocommerce-customer-account → display:block, šírka 680 px (celý rad!) * .wp-block-woocommerce-mini-cart → inline-block, 40×40 * Keď ich klient položí do skupiny s rozložením „constrained" (čo je bežné — napr. * rad s menu), účet sa roztiahne cez celú šírku a košík spadne pod neho. Preto * vyzerali „kade-tade": nešlo o chybu patternu, ale o to, že tie bloky sú blokové * a plnošírkové, nech ich dáte kamkoľvek. * * Riešime to tu, nie v patterne, aby to platilo VŠADE — aj keď si ich klient * pretiahne inam v Site Editore. */ .wp-block-woocommerce-customer-account, .wp-block-woocommerce-mini-cart { display: inline-flex; align-items: center; width: auto; max-width: none; vertical-align: middle; } .wp-block-woocommerce-customer-account .wc-block-customer-account__link, .wc-block-mini-cart__button { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; width: auto; min-width: 40px; min-height: 40px; padding: 0 0.5rem; border: 0; border-radius: 8px; background-color: transparent; color: inherit; transition: background-color 0.15s ease, color 0.15s ease; } .wp-block-woocommerce-customer-account .wc-block-customer-account__link:hover, .wc-block-mini-cart__button:hover { background-color: var( --wp--preset--color--accent-light ); color: var( --wp--preset--color--accent-strong ); } /* Focus musí ostať jasne viditeľný — WCAG 2.1, ovládanie klávesnicou. */ .wp-block-woocommerce-customer-account .wc-block-customer-account__link:focus-visible, .wc-block-mini-cart__button:focus-visible { outline: 2px solid var( --wp--preset--color--accent-strong ); outline-offset: 2px; } /* Rovnaká optická veľkosť oboch ikon. */ .wp-block-woocommerce-customer-account svg, .wc-block-mini-cart__button svg { width: 22px; height: 22px; } /* * Ikonové položky v e-shop hlavičkách (telefón, otváracie hodiny, adresa…). * Ikony sú inline Tabler SVG s pevným width/height priamo v markupe — tu sa rieši * len rozloženie, nie veľkosť, aby CSS nemohlo spôsobiť posun (CLS). */ .bt-ico-item .bt-ico { flex: 0 0 auto; color: var( --wp--preset--color--accent-strong ); } /* Odstavce vnútri musia byť tesné — sú to dva riadky jedného údaja, nie text stránky. */ .bt-ico-text > p { margin: 0; line-height: 1.25; } .bt-ico-label { font-weight: 600; } .bt-ico-sub { font-size: 0.78em; opacity: 0.75; } /* V tmavom pruhu (topbar) musí ikona zdediť farbu textu, inak zmizne. */ .has-dark-three-background-color .bt-ico-item .bt-ico { color: currentColor; } /* * ── Widget oblasti (blok `branike/widget-area`) ───────────────────────────── * * 🔴 ODMERANÉ NA it2 (0.66.0): nadpis widgetu v tmavej pätičke bol tmavý na * tmavom — prakticky neviditeľný. Príčina nie je v našom kóde: `theme.json` * generuje pravidlo `h1, h2, h3, h4, h5, h6 { color: var(--…--contrast) }` * a to prebije farbu zdedenú z pruhu pätičky (odstavec bol biely, nadpis * `rgb(31,41,55)` — presne to je ten rozdiel). * * Riešime to zámerne ÚZKO — len vnútri widget oblasti, kde obsah dodáva klient * a nemá ako vedieť, na akom pozadí skončí. Globálne `color: inherit` na * nadpisy by rozbilo typografiu celého webu. * * Špecificita: `.bt-widget-area h3` = (0,1,1) prebije `h3` = (0,0,1) bez * `!important`. Žiadny rozmerový zásah → 0 CLS. */ /* * 🔴 Selektor musí pokrývať OBA obaly widget obsahu: * · `.bt-widget-area` — jedna oblasť (blok `branike/widget-area`) * · `.bt-widget-columns` — rad stĺpcov v pätičke (blok `branike/widget-columns`) * Keď pribudol druhý blok (0.68.0), pravidlo mierilo len na prvý a nadpisy * v pätičke boli zase tmavé na tmavom. Odmerané v prehliadači, nie odhadnuté. */ :is( .bt-widget-area, .bt-widget-columns ) :is( h1, h2, h3, h4, h5, h6 ), :is( .bt-widget-area, .bt-widget-columns ) .bt-widget__title { color: inherit; } /* Odkazy vo widgete rovnako — kontrast musí platiť aj pre ne (WCAG 2.1, 1.4.3). */ :is( .bt-widget-area, .bt-widget-columns ) a:where( :not( .wp-element-button ) ) { color: inherit; } /* Posledný widget v oblasti nesmie tlačiť medzeru do spodku stĺpca. */ :is( .bt-widget-area, .bt-widget-columns__col ) > .bt-widget:last-child > *:last-child { margin-bottom: 0; } /* * ── branike/social: zoznam bez odrážok ─────────────────────────────────────── * 🔴🔴 ODMERANÉ NA ŽIVOM it2 07-27. Reset MUSÍ byť tu, v hárku, nie v inline * štýle bloku: WordPress prepúšťa inline štýly cez allowlist `safe_style_css` * (`safecss_filter_attr`) a `list-style` v ňom nie je. Namerané: `margin` * a `padding` z inline štýlu prešli (odsadenie 40 px → 0), ale * `list-style-type` ostalo `disc`, `

` mali `display:list-item` * a `::marker` sa vykreslil. Prejav: bodka pred prvou sociálnou ikonou * v hlavičke aj v pätičke — vo všetkých presetoch naraz. */ .bt-social, .bt-social > li { list-style: none; } /* * ── branike/social: RESET OKRAJA ZOZNAMU ──────────────────────────────────── * 🔴🔴 PREČO SA `margin` PRESŤAHOVAL Z INLINE ŠTÝLU SEM (2026-08-04) * * `render.php` písal do `style` bloku `margin:0` natvrdo. Inline štýl prebije * hárok VŽDY, takže pravidlo `footer .bt-social { margin-block-start: … }` * o dvadsať riadkov nižšie NEPLATILO. Odmerané na živom branike.com: * `margin-top: 0px`, medzera od nadpisu „Sledujte nás" **0 px** — presne stav, * ktorý to pravidlo malo odstrániť. Komentár pri ňom pritom predpokladal, že * inline `margin` môže prísť len z nastavenia člena; v skutočnosti ho tam dával * náš vlastný render. [[feedback_css_rule_must_win_not_exist]] * * 🔴 Reset tu ZOSTÁVA — bez neho by sa vrátil predvolený `margin` prehliadača * pre `

` (aby sa naň dalo kliknúť) a šípka je * samostatné `