/* ===================================================================== * Mitochondriak DE - storefront stylesheet (W9A) * --------------------------------------------------------------------- * Mobile-first. Every breakpoint is min-width. No framework, no build * step, no source CSS copied from mitochondriak.com - only the brand * decisions (palette, Roboto, dark chrome, red conversion accent, * portrait product imagery) were carried across. * * Sections * 1 tokens + resets * 2 layout helpers * 3 announcement bar * 4 header + navigation * 5 mobile navigation overlay * 6 hero + homepage sections * 7 product cards / grids * 8 category archive * 9 product detail * 10 cart / checkout / account * 11 footer * 12 editorial (blog, pages) * 13 utilities + print * 14 category / PDP content blocks (W9A.1) * 15 W9B - PDP content bands, section nav, carousel, footer layer 2 * 16 W9C - header fixes, language switcher, video hero, trust track, * card second-image hover, footer v3 * 17 W9N.1 - contact form and showroom sections * 18 W9N.1 - Versand und Zahlung * 19 W9N.1 - owner-set heading sizes, pinned * 20 W72-B - bank transfer instruction + GiroCode * ===================================================================== */ /* --------------------------------------------------------------------- * 1. tokens + resets * ------------------------------------------------------------------ */ :root { /* * W9N.2 - THE WIDTH OF THIS SITE. ONE VALUE. * * Every page uses it: shop, category, product, home, blog archive, blog * article, contact, and every legal page. Section 20 has the reasoning * and the measurements of the four widths this replaced. * * To make the site narrower or wider, change THIS LINE. There is no * second width to keep in sync and no page that decides its own. */ --mitode-shell: 1320px; /* * Reading-measure tokens. NOTHING APPLIES THEM TODAY - they are kept * because they are measured facts about this typeface and are what a * narrow-column layout would use if the owner ever wants one back. * * Not expressed in `ch`: the theme's Roboto is a variable font whose "0" * advance resolves to 7.54px at 17px here, so the 72ch the theme used * until W9L actually produced 543px. * * --mitode-measure 38rem = 608px, ~78 characters * --mitode-measure-long 42rem = 672px, ~86 characters * --mitode-content 960px, the editorial column W9N.1 set and * W9N.2 replaced with the one site width */ --mitode-measure: 38rem; --mitode-measure-long: 42rem; --mitode-content: 960px; --mitode-gut: clamp(1rem, 4vw, 2.5rem); /* * W48 - THE RATING COLOUR. ONE TOKEN, AND IT IS NOT THE BRAND RED. * * Until W48 a filled star was `--wp--preset--color--accent`, the * Mitochondriak red, in five different stylesheets. Red on this shop * means "act or pay attention": the call to action, the price, the * sale badge and the brand mark itself. A five-star row painted in it * competes with the buy button on every card in the grid, and a * shopper scanning a category page reads a row of red as a row of * alerts. * * A rating is not an alert. Gold is what a rating is in every shop a * customer has ever used, including the source storefront, and it is * the one colour on the page that carries no other meaning. * * #f5a623 measures 2.1:1 against the empty star (#dcdfe5) and 1.94:1 * against white. That is deliberate and it is not a text contrast * failure: the star row is `aria-hidden` decoration, and the claim it * illustrates is printed beside it as text AND given to assistive * technology as the component's `aria-label` ("4,9 von 5 Sternen, 37 * Bewertungen aus Mitochondriak® Shops"). No information exists only * in the colour. * * `--mitode-rating-empty` is here for the same reason: the two are a * pair, and separating them is how a half star ends up drawn in one * scheme against a track from another. */ --mitode-rating-color: #f5a623; --mitode-rating-color-strong: #e08c05; --mitode-rating-empty: var(--wp--preset--color--border, #dcdfe5); /* W9F - height of the sticky header, for anything that has to sit below it (the sticky product gallery, anchor scroll-margins) */ --mitode-header-h: 8rem; /* * W9E - one radius family for the whole storefront, taken from the * source shop: fields and image corners 8, every card and panel 20, * every button and chip a full pill. */ --mitode-radius: 8px; --mitode-radius-lg: 20px; --mitode-radius-pill: 999px; /* W9E - three shadows, nothing floats (source caps blur at 12px) */ --mitode-shadow-btn: 0 3px 6px rgba(15, 15, 15, .12); --mitode-shadow-card: 0 6px 12px rgba(15, 15, 15, .08); --mitode-shadow-pop: 0 10px 28px rgba(15, 15, 15, .12); /* * W9E - the vertical rhythm. Three band sizes replace the fifteen * one-off padding recipes of W9A-W9D; a band never carries a margin, * so two bands always touch and no unpainted strip can appear. */ --mitode-band: clamp(3rem, 5.6vw, 4.5rem); --mitode-band-sm: clamp(2rem, 3.6vw, 3rem); --mitode-band-lg: clamp(3.75rem, 7vw, 6rem); /* W9E - one type scale for every section heading on the storefront */ /* * W9N.2 - THE HEADING SCALE, CORRECTED FROM MEASUREMENT. * * W9N.1 implemented the owner's 18/15/14 px literally, and H9N1 section * 9.1 reported the consequence: body copy is the `medium` preset, which * was fluid 15-17 px, so

came out the same size as a paragraph and *

came out SMALLER than one. The owner confirmed that was not the * intent. * * The replacement is not another guess. tools/w9n2/browser/typography.mjs * read getComputedStyle on the rendered pages of every Mitochondriak shop * (2026-08-31, 1440 px / 390 px): * * shop body h1 h2 h3 * mitochondriak.sk 16/14 24 20 22 * mitochondriak.pl 16/14 24 20 20 * mitochondriak.com 16/14 24 20 20 * DE Lab (before) 17/15 18 15 14 <- the reported defect * * The sibling shops sit at 24/20 over a 16 px body; their H3 is authored * per page and is not a scale at all (on .sk it is LARGER than H2). So DE * takes their proportion and gives it the consistency they lack: * * BODY 16 · H1 26 · H2 22 · H3 18 · H4 16 bold * * Fixed rem values on purpose. clamp() was what produced a 15 px H2 next * to a 17 px paragraph at one viewport and a different relationship at * the next, and no reader ever sees two viewports at once - what they see * is a heading that is smaller than the text under it. One explicit step * at 600 px keeps the phone from carrying a 26 px H1 across a 375 px line; * it is a media query, so it is readable and predictable. * * The hard rule, enforced by tools/w9n2/browser/typography.mjs and not by * eye: H1 > H2 > H3 > BODY, at every tested width. * * Component headlines that are typography in their own right - the hero * slide title, the footer brand statement, the product card title, the * page-head display heading - keep their own sizes. Marketing type is not * editorial type and the owner's rule is about the editorial scale. */ --mitode-fs-h1: 1.625rem; --mitode-fs-h2: 1.375rem; --mitode-fs-h2-long: 1.375rem; --mitode-fs-h3: 1.125rem; --mitode-fs-lede: 1.0625rem; --mitode-fs-eyebrow: .75rem; --mitode-ease: cubic-bezier(.2, .7, .3, 1); } @media (min-width: 782px) { :root { --mitode-header-h: 72px; } } /* * W9N.2 - the single small-screen step of the editorial scale. * * Not a clamp: a clamp interpolates continuously and its value at any one * viewport is something nobody wrote down. Two states, both written down. */ @media (max-width: 600px) { :root { --mitode-fs-h1: 1.5rem; /* 24 px */ --mitode-fs-h2: 1.25rem; /* 20 px */ --mitode-fs-h2-long: 1.25rem; --mitode-fs-h3: 1.0625rem; /* 17 px, still above the 16 px body */ } } /* * The element scale itself. theme.json carries the same numbers for the * editor; these make the front end agree with it even where a block adds * its own class, and they are the ones the media query above moves. */ /* * The element scale itself lives in section 19 at the end of this file, * where it is pinned with a selector that beats WordPress's global styles. * The media query above moves the tokens; section 19 reads them. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; } img { max-width: 100%; height: auto; } /* * WordPress sets box-sizing per block class, not globally. The theme's own * chrome is plain markup inside core/html blocks, so it needs the reset * explicitly - without it `max-width` plus `padding-inline` overflows the * viewport at widths just below the shell maximum. */ [class^="mitode-"], [class*=" mitode-"], [class^="mitode-"]::before, [class^="mitode-"]::after { box-sizing: border-box; } :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--wp--preset--color--info); outline-offset: 2px; border-radius: 2px; } .mitode-skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); padding: .75rem 1.25rem; font-weight: 700; } .mitode-skip-link:focus { left: 0; } /* --------------------------------------------------------------------- * 2. layout helpers * ------------------------------------------------------------------ */ /* * The shell is the storefront's own container. The second selector exists * only to outrank WordPress' global `.is-layout-constrained > *` rule, * which is printed after the theme stylesheet and would otherwise clamp * every section to theme.json's 760px content size. */ .mitode-shell, :is(.is-layout-constrained, .is-layout-flow, .wp-block-group) > .mitode-shell { width: 100%; max-width: var(--mitode-shell); margin-inline: auto; padding-inline: var(--mitode-gut); } /* * W9E - the white strips. * * WordPress prints two global-styles rules for `blockGap`: * :where(.wp-site-blocks) > * { margin-block-start: 1.5rem } * :root :where(.is-layout-flow) > * { margin-block-start: 1.5rem } * Every homepage section is a painted full-bleed band that already owns * its vertical padding, so that margin renders as a 24 px unpainted strip * between two painted bands - most visibly above and below the hero. * Bands are not flow items: the margin is reset at the three seams where * bands actually stack, and only there. * * W27.9 - THE RESET NOW WINS ON SPECIFICITY, NOT ON PRINT ORDER. * * It used to be `:where(.wp-site-blocks) > *` (0,0,0) and `.mitode-main > *` * (0,1,0) - a TIE with core's two rules, decided by whichever stylesheet * WordPress happened to print last. That held for as long as nothing * changed the queue, and then it did not: adding a second theme stylesheet * that depends on `mitode-main` moved `mitode-main` ahead of * `global-styles`, and the strips came back. Measured, front page: * * /kontakt/ mitode-main 25, global-styles 18 -> reset wins * / mitode-main 15, global-styles 20 -> core wins, 24px gaps * * The owner reported it as "biely zbytočný priestor" above and below the * hero carousel, and it was exactly that - header, carousel and the * competitive-advantages strip each pushed 24 px apart. * * A `:root` prefix costs nothing, changes no cascade the theme relies on, * and takes the reset to (0,2,0) - above both core rules whatever the * print order is. This must not be reverted to a bare selector. */ :root .wp-site-blocks > *, :root .mitode-main > *, :root .mitode-main > .entry-content > * { margin-block-start: 0; } /* * Blocks an editor adds to the homepage content are ordinary flow items * again - only the theme's own bands opt out. One class more specific than * the reset above it, for the same reason. */ :root .mitode-main > .entry-content > *:not([class*="mitode-"]) { margin-block-start: var(--wp--style--block-gap, 1.5rem); } /* A band owns the rhythm inside its own shell (every child sets its own). */ :is(.mitode-light, .mitode-about, .mitode-featured, .mitode-education) > .mitode-shell > * { margin-block-start: 0; } /* Full-bleed bands must never inherit that clamp either. */ :is(.is-layout-constrained, .is-layout-flow, .wp-block-group) > :is(.mitode-hero, .mitode-trust, .mitode-rednir, .mitode-light, .mitode-about, .mitode-hotspots, .mitode-announce, .mitode-header, .mitode-footer, .mitode-archive-head, .mitode-page-head, .mitode-section, .mitode-longdesc, .mitode-band) { max-width: none; } .mitode-section { padding-block: var(--mitode-band); } .mitode-section--tight { padding-block: var(--mitode-band-sm); } /* W9E - the two homepage list bands: one section, one surface each */ .mitode-education { background: var(--wp--preset--color--surface); } .mitode-featured .mitode-section__head, .mitode-education .mitode-section__head { margin-block-end: clamp(1.75rem, 3.2vw, 2.5rem); } .mitode-eyebrow { display: block; font-size: var(--mitode-fs-eyebrow); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin-block-end: .75rem; } /* W9E - one size for every section heading, on light and on dark bands */ .mitode-section__head h2, .mitode-light .mitode-light__title, .mitode-hotspots__title, .mitode-faq__title { font-size: var(--mitode-fs-h2); line-height: 1.15; letter-spacing: -.015em; } .mitode-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-block-end: clamp(1.5rem, 3vw, 2.25rem); } .mitode-section__head > * { margin: 0; } /* * W51 - the head of a section whose call to action now sits UNDER the * rail. `justify-content: space-between` with a single child is harmless, * but `align-items: flex-end` was there to seat a button on the heading's * baseline; with no button it just makes the block depend on a rule it no * longer uses. Stated, so the next person does not read the flex row and * look for the missing second child. */ .mitode-section__head--titleonly { align-items: flex-start; } /* * The moved call to action. Centred under the rail rather than pinned to * a corner: at the bottom of a horizontally scrolling list there is no * corner a reader's eye is already at. */ .mitode-section__more { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; text-align: center; } /* * And the same rule again at (0,3,0), because a band zeroes the top * margin of every direct child of its shell 40 lines above this one * (`:is(.mitode-light, …, .mitode-featured, …) > .mitode-shell > *`, at * (0,2,0)). The first version of this button measured 0px below the rail * for exactly that reason. The reset is right - a band's children each * set their own rhythm - so this is a child setting its own, not an * exception to the reset. */ .mitode-featured > .mitode-shell > .mitode-section__more { margin-block-start: clamp(1.5rem, 3vw, 2.25rem); } /* --------------------------------------------------------------------- * 3. announcement bar * ------------------------------------------------------------------ */ .mitode-announce { background: var(--wp--preset--color--dark-deep); color: #e6e7ec; font-size: .8125rem; line-height: 1.4; } .mitode-announce__inner { max-width: var(--mitode-shell); margin-inline: auto; padding: .5rem var(--mitode-gut); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem 1.5rem; text-align: center; } .mitode-announce a { color: inherit; text-decoration: none; } .mitode-announce a:hover { color: #fff; text-decoration: underline; } .mitode-announce strong { color: #fff; } .mitode-announce__util { display: none; } @media (min-width: 900px) { .mitode-announce__inner { justify-content: space-between; text-align: left; } .mitode-announce__util { display: flex; gap: 1.25rem; align-items: center; } } /* --------------------------------------------------------------------- * 4. header + navigation * ------------------------------------------------------------------ */ /* * Two rows, as on the source storefront: brand + product search + cart, then * the navigation as its own bar. On narrow viewports the two rows are * re-laid-out into burger | brand | actions with the search underneath, so * the search stays reachable without a second tap. Both row wrappers become * `display: contents` there, which lets children from either row sit in the * same grid. */ .mitode-header { position: sticky; top: 0; z-index: 90; background: var(--wp--preset--color--dark); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .09); } .mitode-header__shell { max-width: var(--mitode-shell); margin-inline: auto; padding-inline: var(--mitode-gut); } .mitode-header__row--top { display: flex; align-items: center; gap: clamp(.75rem, 2.5vw, 2.5rem); min-height: var(--mitode-header-h); } .mitode-header__row--nav { border-top: 1px solid rgba(255, 255, 255, .09); } .mitode-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex: 0 0 auto; min-width: 0; } /* * W48 - SCOPED UNDER `.mitode-header`, AND THAT IS THE WHOLE POINT. * * `.mitode-brand img` is (0,1,1). So is WooCommerce's * `.woocommerce img, .woocommerce-page img { height: auto; max-width: 100% }` * in woocommerce-layout.css, and the product page carries the * `woocommerce` body class. A tie is decided by print order, so this rule * was winning only because main.css happened to be printed after * WooCommerce's - which stopped being true the moment a block render * callback pulled main.css forward (see inc/reviews-render.php). The * header then rendered with a 1000x188 wordmark. * * `.mitode-header .mitode-brand img` is (0,2,1) and wins whatever the * order. The print order is ALSO fixed, at the cause; this is the half * that survives the next plugin update. */ /* * W53 - the drawn height, not the box height. * * The image is now the tight crop (978x174, zero transparent margin), so * every pixel of `height` below is glyph. Before this stage a 26px box * drew 24.06px of wordmark and a 32px box drew 29.62px; the numbers here * are therefore an increase twice over - once because the box grew, once * because the box stopped containing air. * * `object-fit: contain` is the anti-deformation guarantee: if `max-width` * ever binds, the artwork letterboxes inside the box instead of being * squashed, so no rule below can produce a stretched wordmark. */ .mitode-header .mitode-brand img { display: block; height: 30px; width: auto; max-width: min(58vw, 300px); object-fit: contain; } @media (min-width: 782px) { /* Desktop grows 32 -> 34. The header bar keeps `min-height: var(--mitode-header-h)` = 72px and 34 < 72, so the BAR HEIGHT DOES NOT MOVE - which is the explicit constraint in the brief (1C). */ .mitode-header .mitode-brand img { height: 34px; } } .mitode-brand__fallback { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; } /* product search - the dominant element of the first row */ .mitode-search { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; max-width: 34rem; background: #fff; border-radius: var(--mitode-radius); /* * W9K: this was `overflow: hidden`, which existed only to round the * corners of the input and the submit button - and which clipped the * autocomplete panel out of existence. The rounding now sits on the * children that actually have corners, so the panel can escape. */ } .mitode-search__icon { position: absolute; left: .8rem; width: 18px; height: 18px; fill: none; stroke: var(--wp--preset--color--contrast-3); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; } .mitode-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: .7rem .75rem .7rem 2.4rem; font-size: .9375rem; color: var(--wp--preset--color--contrast); } .mitode-search__input::placeholder { color: var(--wp--preset--color--contrast-3); } .mitode-search__input:focus { outline: 0; } .mitode-search:focus-within { box-shadow: 0 0 0 2px var(--wp--preset--color--info); } .mitode-search__submit { flex: 0 0 auto; border: 0; cursor: pointer; padding: .7rem 1.1rem; background: var(--wp--preset--color--accent); color: #fff; font-size: .9375rem; font-weight: 700; transition: background .16s var(--mitode-ease); } .mitode-search__submit { border-start-end-radius: var(--mitode-radius); border-end-end-radius: var(--mitode-radius); } .mitode-search__input { border-start-start-radius: var(--mitode-radius); border-end-start-radius: var(--mitode-radius); } .mitode-search__submit:hover { background: var(--wp--preset--color--accent-dark); } /* desktop navigation - core/navigation block */ .mitode-header .wp-block-navigation { min-width: 0; font-size: .9375rem; } .mitode-header .wp-block-navigation .wp-block-navigation__container { gap: clamp(.7rem, 1.8vw, 1.9rem); align-items: center; } .mitode-header .wp-block-navigation .wp-block-navigation-item__content { color: rgba(255, 255, 255, .88); font-weight: 500; text-decoration: none; white-space: nowrap; padding-block: .85rem; border-bottom: 2px solid transparent; transition: color .18s var(--mitode-ease), border-color .18s var(--mitode-ease); } .mitode-header .wp-block-navigation .wp-block-navigation-item__content:hover, .mitode-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible, .mitode-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content, /* * W27.6 - AN ANCESTOR IS ALSO "WHERE YOU ARE". * * `.current-menu-ancestor` was added to this list after measuring the first * version of the current-state work: on a PRODUCT page nothing at all was * marked, because a product is never itself a menu entry - only its section * is, and that section is an ancestor. Chrome reported the top-level entry * on /produkt/mitochondriak-maxi/ as rgba(255,255,255,.88) on rgb(26,26,26) * with `border-bottom: rgba(0,0,0,0) 2px` - pixel-identical to every other * entry. All 18 product pages, every blog article and every glossary term * showed no current state on desktop. */ .mitode-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content { color: #fff; border-bottom-color: var(--wp--preset--color--accent); } .mitode-header .wp-block-navigation .wp-block-navigation__submenu-icon { margin-left: .25rem; } .mitode-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container { background: #fff; border: 0; border-radius: 0 0 var(--mitode-radius) var(--mitode-radius); box-shadow: var(--mitode-shadow-pop); padding-block: .5rem; min-width: 17rem; left: -1rem; } /* core re-applies min-width:200px in its :hover / :focus-within open states (five-class selectors); restate the width there so entries do not wrap */ .mitode-header .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container, .mitode-header .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container { min-width: 17rem; } .mitode-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem 1.25rem; color: var(--wp--preset--color--contrast); border-bottom: 0; white-space: normal; } .mitode-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .mitode-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus, .mitode-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible, .mitode-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active { color: var(--wp--preset--color--accent); background: var(--wp--preset--color--surface); } /* * W27.6 - THE CURRENT DROPDOWN ROW IS NOT A HOVER. * * `.current-menu-item` used to sit in the hover/focus/active group above. * That was harmless while the class never arrived; now that it does, it * made a PERSISTENT state out of a colour pair that was only ever meant to * flash under a pointer. Measured with Chrome's own computed styles * (tools/w27-6/browser/nav-contrast.mjs): accent #f80120 on surface * #f5f6f8 is a contrast ratio of **3.87** - below the 4.5 that 15px bold * text needs, and a state a customer reads for as long as the page is open * rather than for as long as the mouse is on it. * * So the current row states itself the way a current row should: the * ordinary dark text (19:1), the weight of a heading, and an accent marker * down its leading edge. It also stops depending on colour ALONE, which is * what tells a colour-blind reader anything at all. */ .mitode-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content, .mitode-header .wp-block-navigation .wp-block-navigation__submenu-container .current-menu-ancestor > .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--surface); font-weight: 700; box-shadow: inset 3px 0 0 0 var(--wp--preset--color--accent); } .mitode-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { outline: 3px solid var(--wp--preset--color--info); outline-offset: -3px; } /* * W9C root cause of the black-on-black dropdown: core/navigation carried * overlayBackgroundColor/overlayTextColor presets, which core also stamps on * the desktop submenu container (`has-dark-background-color`, !important). * The attributes are gone from patterns/header.php; this rule is the * belt-and-braces guard so a preset can never repaint the dropdown again. */ .mitode-header .wp-block-navigation .wp-block-navigation__submenu-container.has-background { background-color: #fff !important; color: var(--wp--preset--color--contrast) !important; } /* header action icons */ .mitode-actions { display: flex; align-items: center; gap: .15rem; flex: 0 0 auto; margin-inline-start: auto; } .mitode-iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 42px; height: 42px; padding: 0 .5rem; border: 0; border-radius: var(--mitode-radius-pill); background: transparent; color: rgba(255, 255, 255, .9); text-decoration: none; cursor: pointer; transition: background .16s var(--mitode-ease), color .16s var(--mitode-ease); } .mitode-iconbtn:hover, .mitode-iconbtn:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; } .mitode-iconbtn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .mitode-iconbtn__label { display: none; font-size: .875rem; font-weight: 500; } @media (min-width: 782px) { .mitode-iconbtn--cart { background: rgba(255, 255, 255, .1); padding-inline: .85rem; } .mitode-iconbtn--cart .mitode-iconbtn__label { display: inline; } } .mitode-burger { display: inline-flex; } @media (min-width: 1080px) { .mitode-burger { display: none; } } /* Woo mini-cart block sits inside .mitode-actions */ .mitode-actions .wp-block-woocommerce-mini-cart { display: flex; } .mitode-actions .wc-block-mini-cart__button { color: rgba(255, 255, 255, .9); padding: 0 .6rem; height: 42px; border-radius: var(--mitode-radius-pill); background: rgba(255, 255, 255, .1); } .mitode-actions .wc-block-mini-cart__button:hover { background: rgba(255, 255, 255, .18); color: #fff; } .mitode-actions .wc-block-mini-cart__badge { background: var(--wp--preset--color--accent); color: #fff; border-color: var(--wp--preset--color--accent); font-weight: 700; } .mitode-actions .wc-block-mini-cart__amount { font-weight: 700; } /* * Narrow header. Below the navigation breakpoint the two rows are flattened * into one grid: wordmark on the left, the action cluster and the burger on * the right (W9C - the source storefront's mobile header order), with the * search on a full-width row of its own. */ @media (max-width: 1079px) { .mitode-header__shell { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand actions nav" "search search search"; align-items: center; column-gap: .35rem; row-gap: .55rem; padding-block: .55rem; } .mitode-header__row--top, .mitode-header__row--nav { display: contents; } .mitode-brand { grid-area: brand; justify-self: start; min-width: 0; max-width: 100%; } /* * W53 - THE WORDMARK IS SIZED FROM THE ROW'S REAL BUDGET. * * The previous rule was `height:auto; max-height:26px; max-width:100%`, * and `max-width:100%` is what made the brief's complaint true: at * 320px the measured wordmark was 97.88x18.39 - the LOGO absorbed the * whole shortfall while four 38-42px icons kept their size. That is * the degradation order in 1D exactly inverted. * * Measured budget (tools/w53/browser/header-budget.mjs, before state): * everything that is not the wordmark - the flag, the account link, * the mini-cart, the burger and two column gaps - costs a FIXED * ~190px, so the space left for the wordmark is roughly `100vw - 190 * - 2 x gutter`. With the gutter at 16px on a phone that is * `100vw - 222`; the 196 below is that figure with the icon * tightening further down already paid in (measured after: the action * cluster costs 114.78px and the burger 36px at 320), leaving ~7px of * slack so a longer cart amount cannot start clipping. * * Dividing by the tight artwork's own aspect ratio (978/174 = 5.62) * turns "space available" into "height it may be", continuously, so * there is no breakpoint between 320 and 600 where the wordmark * suddenly jumps or suddenly collides. * * 21px floor: below that the wordmark stops being legible, and at * that point it is the ICONS' turn to give way (rules below). * 30px ceiling: the row's icons are 38-42px, and a wordmark taller * than that would drive the header's own height up - which 1A rules * out. */ .mitode-header .mitode-brand img { width: auto; height: clamp(21px, calc((100vw - 196px) / 5.62), 30px); max-height: none; max-width: 100%; } .mitode-actions { grid-area: actions; margin-inline-start: 0; } .mitode-search { grid-area: search; max-width: none; } .mitode-header .wp-block-navigation { grid-area: nav; justify-self: end; } .mitode-header__row--nav { border-top: 0; } } @media (max-width: 480px) { .mitode-search__submit { padding-inline: .8rem; } /* phone: icon-only cart so the wordmark keeps its width */ .mitode-actions .wc-block-mini-cart__amount { display: none; } .mitode-actions .wc-block-mini-cart__button { padding-inline: .45rem; } } /* * W53 - THE DEGRADATION LADDER, IN THE ORDER THE BRIEF SETS (1D). * * 1. the gaps between the controls close, * 2. the controls themselves get smaller, down to a 36px floor, * 3. and only what is left over limits the wordmark - which is the * clamp() above, so this ladder is what FEEDS it. * * Nothing here is allowed to remove a control: wordmark, search, market * flag, account, cart and burger are all still in the row at 320, and the * search sits on its own full-width row underneath at every one of these * widths. * * 36px is the floor for a tap target here. It is under the 44px ideal and * that is a deliberate trade at 320px only: the alternative the previous * code chose was an 18px wordmark, and a brand nobody can read costs more * than 8px of thumb. */ @media (max-width: 480px) { /* step 1 - the gaps */ .mitode-header__shell { column-gap: .3rem; } .mitode-actions { gap: .1rem; } /* step 2 - the controls */ .mitode-actions > a.mitode-iconbtn { /* `.mitode-iconbtn` sets `height: 42px`, so a min-height here would change nothing - the property that has to move is the same one. (0,2,1) beats the base rule's (0,1,0) whatever the print order.) */ height: 40px; min-width: 40px; padding: 0 .35rem; } /* * THREE classes, measured the hard way. The first draft of this block * used `.mitode-header .wp-block-navigation__responsive-container-open` * - (0,2,0), the same as the base rule ~60 lines BELOW it, which sets * min-width/min-height 42px and padding .5rem. The tie went to the * later rule and the burger measured 42px at 320 while every other * control had already shrunk: the ladder was documented and not * happening. Third time this family has bitten this theme. */ .mitode-header .wp-block-navigation .wp-block-navigation__responsive-container-open { min-width: 40px; min-height: 40px; padding: .35rem; } .mitode-header .wp-block-navigation .wp-block-navigation__responsive-container-open svg { width: 24px; height: 24px; } } @media (max-width: 400px) { .mitode-header__shell { column-gap: .25rem; } .mitode-actions > a.mitode-iconbtn { height: 38px; min-width: 38px; padding: 0 .3rem; } .mitode-header .wp-block-navigation .wp-block-navigation__responsive-container-open { min-width: 38px; min-height: 38px; padding: .3rem; } .mitode-header .wp-block-navigation .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; } .mitode-actions .wc-block-mini-cart__button { padding-inline: .3rem; } /* The market selector is the widest control in the cluster (51.78px measured at 390): the chevron goes, the flag stays, because the brief keeps the country control and only the affordance is negotiable. */ .mitode-actions .mitode-lang__caret { display: none; } } @media (max-width: 360px) { .mitode-header__shell { column-gap: .2rem; } .mitode-actions > a.mitode-iconbtn { height: 36px; min-width: 36px; padding: 0 .25rem; } .mitode-header .wp-block-navigation .wp-block-navigation__responsive-container-open { min-width: 36px; min-height: 36px; padding: .25rem; } /* * THREE class selectors on purpose. `.mitode-lang--header * .mitode-lang__toggle` (0,2,0) already sets `padding-inline: .35rem` * ~3000 lines BELOW this block, so a (0,2,0) restatement here would * tie and lose on print order - the exact failure W51 spent an hour * on twice. See [[lab-blockgap-specificity-trap]]. */ .mitode-actions .mitode-lang--header .mitode-lang__toggle { padding-inline: .25rem; } } /* --------------------------------------------------------------------- * 5. mobile navigation overlay (core/navigation, overlayMenu = mobile) * ------------------------------------------------------------------ */ /* * core/navigation switches to its overlay at 600px. The Mitochondriak menu * has six top-level entries, so the horizontal bar only fits from 1080px. * These two rules move core's own breakpoint up without forking its markup. */ @media (min-width: 600px) and (max-width: 1079px) { .mitode-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; } .mitode-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .mitode-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: block; } } @media (min-width: 1080px) { .mitode-header .wp-block-navigation__responsive-container-open { display: none; } } .mitode-header .wp-block-navigation__responsive-container-open { color: rgba(255, 255, 255, .92); padding: .5rem; min-width: 42px; min-height: 42px; align-items: center; justify-content: center; border-radius: var(--mitode-radius-pill); } .mitode-header .wp-block-navigation__responsive-container-open:hover { background: rgba(255, 255, 255, .12); color: #fff; } .mitode-header .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; } .wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem var(--mitode-gut) 3rem; background-color: var(--wp--preset--color--dark) !important; color: #fff !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; padding: .5rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 1.5rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0; align-items: stretch; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { border-bottom: 1px solid rgba(255, 255, 255, .1); } /* * W55: the accordion TOGGLE is listed here too, and that is the point. * * The toggle replaces a top-level link visually, so it has to be the same * type. It was not: eyes-on QA caught the two parent rows rendering at * 15px/400 (inherited from the
  • ) next to childless rows at 17px/500 - * a difference the DOM assertions could not see, because every ARIA * attribute and every hit test was already correct. One declaration for * "a top-level row in the overlay" means the two cannot drift again. * * `display` and `padding` are deliberately re-set on .mitode-navacc below * (it is a flex row with its own 52px floor); only the TYPE is shared. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .mitode-navacc { display: block; width: 100%; padding: .9rem 0; font-size: 1.0625rem; font-weight: 500; color: #fff; text-decoration: none; border-bottom: 0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent); } /* * W27.6 - the mobile overlay needs its own "you are here". * * The desktop bar has styled `.current-menu-item` since W9C (a red underline * on the entry, an accent row in the dropdown) - the class simply never * arrived until inc/nav.php started emitting it. The overlay was never * styled for it at all, so the same fix would have produced a visible state * on desktop and nothing on a phone. * * A border on the LEFT rather than an underline: the overlay is a vertical * stack of full-width rows, where an underline is indistinguishable from the * hairline that already separates them. */ /* * WHITE, NOT ACCENT, AND THE BACKGROUND IS RESET ON PURPOSE. * * The overlay markup lives INSIDE `.mitode-header`, so the desktop dropdown * rule reaches it: a submenu row marked current arrived here carrying * `background: surface` - a near-white band inside a dark overlay. * * THE SELECTOR CARRIES `.mitode-header .wp-block-navigation` FOR ONE REASON * AND IT IS NOT TIDINESS. The first version of this rule was * `.wp-block-navigation__responsive-container.is-menu-open .current-menu-item * > ...` - four classes, (0,4,0) - against the dropdown rule's five, * (0,5,0). It LOST, so `background: none` never applied, and the comment * that used to stand here claimed the two were "equally specific" and that * the band was gone. It was not: the adversarial review read Chrome's own * matched-rule list out of docs/qa/w27-6/after/w276nav2-nav-contrast.json, * where BOTH rules are listed for the overlay node and the computed result * is `color: rgb(15,15,15)` on `rgb(245,246,248)` - the white band, still * there, inside a `rgb(26,26,26)` overlay. * * It was legible (17.7:1), but it was not what the code said, and it made * the overlay speak two languages: the current TOP-LEVEL row was white on * dark (that one the four-class rule did win, because the dropdown rule * needs `.wp-block-navigation__submenu-container`) while the current * SUBMENU row was dark on white. One state, two appearances, one nesting * level apart. * * Six classes settle it without `!important` and without depending on which * rule happens to come later in the file. */ .mitode-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content, .mitode-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content { color: #fff; background: none; font-weight: 700; } /* * Two strengths of the same marker, so the two states are told apart * without a second colour: a SOLID accent edge on the page you are reading, * a dimmed one on the section it belongs to. Weight alone was not enough - * the overlay's rows are already white at weight 500, and 500 -> 700 on a * 17px row is a difference you have to look for. */ .mitode-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { box-shadow: inset 3px 0 0 0 var(--wp--preset--color--accent); padding-left: .7rem; } /* Same six-class scope as the pair above, for the same reason: the desktop dropdown rule sets the SOLID accent bar on ancestors too, and at four classes this dimmed one would lose to it for any ancestor that happens to sit inside a submenu container - so the two strengths would collapse into one for exactly the rows where telling them apart matters. */ .mitode-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content { box-shadow: inset 3px 0 0 0 rgba(248, 1, 32, .45); padding-left: .7rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent !important; border: 0 !important; box-shadow: none; padding-left: .9rem; padding-bottom: .5rem; width: 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border-bottom: 0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .5rem 0; font-size: .9375rem; font-weight: 400; color: rgba(255, 255, 255, .78); } /* --------------------------------------------------------------------- * 5b. W53 - the overlay is an accordion * ------------------------------------------------------------------ */ /* * THE ONE RULE THAT CHANGES THE BEHAVIOUR. * * core prints, at (0,3,0), `.wp-block-navigation__responsive-container * .is-menu-open .wp-block-navigation__container { display: flex }` and * makes every submenu `position: static; visibility: visible`, so inside * the overlay all of them paint. Nothing in core's stylesheet sets * `display` on the submenu itself, which is why the branch could not be * closed by any of the attributes core was already toggling. * * Seven classes here, and not one of them decoration: this has to beat * core's (0,3,0) AND the theme's own six-class overlay rules above, * whatever order the sheets print in. Betting on print order is what cost * W48 119 elements and W51 two silent no-ops. * * `:not(.is-mitode-open)` is the whole state model - assets/js/nav-mobile.js * owns that class and the button's aria-expanded, and nothing else does. * With the script off, no element ever carries the class, so no submenu is * ever hidden and the menu is exactly what it is today. */ .mitode-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.mitode-has-acc:not(.is-mitode-open) > ul.wp-block-navigation__submenu-container { display: none; } /* * THE ROWS ARE FULL WIDTH. Measured in the overlay before this stage: the * `ul.wp-block-navigation__container` computes to `align-items: flex-start` * and 192px inside a 358px dialog, so every row was only as wide as its own * label - which is why the hairline under "Innenbeleuchtung" stops halfway * across the screen in the owner's screenshot. A chevron pinned to the end * of a 169px row lands in the middle of the phone, and a 44px tap target in * the middle of a menu is worse than none. */ .mitode-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch; width: 100%; } /* * W55 - THE PARENT ROW IS THE TOGGLE, NOT A LINK. * * W53 laid a 44x52 chevron over the right end of the parent's own and * left the rest of the row navigating. The owner found what that means on * a phone: tapping "Rotlichttherapie" leaves the menu, and the branch only * opens if the thumb lands on the chevron. The row is now the button and * the whole of it - label, empty space, chevron - opens and closes. * * The parent's is hidden INSIDE THE OVERLAY ONLY. It is the same * element the desktop bar renders, so it is never removed and never * rewritten; assets/js/nav-mobile.js re-publishes its address as the first * row of the branch ("Übersicht: …"), which is where the landing page * lives now. Hidden rather than left in place because a second focusable * copy of the same destination is exactly the "double navigation" the * brief forbids. * * Seven classes and two elements (0,7,2): core prints `display: block` on * `.wp-block-navigation-item__content` from inside its own overlay rules * and this has to win regardless of which sheet prints last - the ladder * that cost W48 119 elements and W51 two silent no-ops. */ .mitode-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item.mitode-has-acc > a.wp-block-navigation-item__content { display: none; } .mitode-header .wp-block-navigation__responsive-container.is-menu-open li.mitode-has-acc { position: relative; } /* * display:none by default is what keeps the DESKTOP information * architecture untouched: the same markup renders in the desktop bar, and * a chevron button there would be a second control next to a hover * dropdown that already works. The injected overview row is hidden for the * same reason - on the desktop the parent is still its own link. */ .mitode-navacc { display: none; } .mitode-navover { display: none; } .mitode-header .wp-block-navigation__responsive-container.is-menu-open .mitode-navover { display: block; } .mitode-header .wp-block-navigation__responsive-container.is-menu-open .mitode-navacc { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; /* * 52px, not 44: 44 is the floor the brief names and the rest of the * overlay's rows already stand at 52, so a parent row shorter than its * own children would be the odd one out. Measured hit area is the full * row width, which on the narrowest supported phone (320) is 288px. */ min-height: 52px; padding: 0; border: 0; background: transparent; /* Size, weight and colour come from the shared top-level-row rule above. FAMILY and LINE-HEIGHT have to be asked for explicitly: a