/** * Brand override — Interstellar Cyberdefence (blog_id 3) only. * * The palette (theme.json / tailwind.config.js) is one shared file on disk * for every site in the multisite network, so it can't be edited directly * without repainting the other two sites too. This file re-points just the * colours (and the one logo size) this site wants different; functions.php * only enqueues it when the current blog is Cyberdefence. * * #AA4FEF (primary-50, the theme's purple) → #5080E9 (already this * theme's secondary-50) * #221D28 (primary-300, the page's base dark * surface — footer, header pills, panel * backgrounds, etc.) → #0E1425 (already * secondary-400) * #210039 (raw hex on the keynote/approach-cards * card backgrounds, not a palette slug) → #0E1425 * * Everything below sits inside Tailwind's own "utilities" layer, not * unlayered. Tailwind v4 wraps its whole build in * `@layer theme, base, components, utilities;`, and per the cascade-layers * spec, !important priority between layers is the REVERSE of normal * priority: a named layer's !important rule beats an unlayered !important * rule no matter its specificity or how much later it's loaded. Every * "!-important" utility this theme uses (.\!text-primary-50, .\!bg-[#…]) * compiles into that utilities layer, so an unlayered override here would * always lose to it. Declaring the same layer name here appends these rules * to the end of that same layer instead, where they win on ordinary * specificity/source-order like any other same-layer rule. */ @layer utilities { /* Covers every var(--color-primary-50, ...) / var(--color-primary-300, ...) usage across the theme in one shot — text/bg/border-primary-50, the hero gradient, category pills, the footer, header glass pills, panel backgrounds, etc. — since they all resolve back to these. */ :root { --wp--preset--color--primary-50: #5080E9 !important; --wp--preset--color--primary-300: #0E1425 !important; } /** * ====================================================================== * Header — 32px pills, and the room they need * ====================================================================== * * The shared header renders the logo at "h-auto w-[160px] lg:w-[200px]" * (header.php). .site-logo img (0,1,1) outranks both of those utilities * (0,1,0) — the lg: one too, since a media query adds no specificity — * so none of this needs !important. * * The bar stays inside `.container` (max-width 1280, custom.css), so its * width budget is fixed: the same 1280 ceiling at 1440px, 1920px or * 2560px. A wider logo doesn't get more room, it just eats the gap — and * when the contents overran that ceiling, flexbox shrank the nav to its * minimum and wrapped the two longest labels ("SOC Diensten", "Kennis & * Actueel") onto a second line, which is what silently doubled the nav * pill's height and pushed Contact off the right edge. * * That is why rule 1 exists. The nav's items carried px-5 (20px) either * side, far more than they need to read as separate; at px-3 they free * 80px across the five top-level items, and the bar now has real slack: * * logo pill (319 + px-4) 351 * nav with px-3 items 709 * gap + Contact button 142 * ----- * needed 1202 ≤ 1280 available (78px gap) * * So the four rules below are one fix: free the width (1), stop the * labels wrapping if it ever runs short again (2), put all three pills * on the same 32px height (3), and size the logo to match (4). */ /* 1. Where the 80px comes from. Only the top-level items (nav > div > a, mb_render_desktop_menu_item) — the dropdown panels' own links sit deeper and keep their own spacing. */ nav[aria-label="Hoofdmenu"] > div > a { padding-left: 0.75rem; padding-right: 0.75rem; } /* 2. Top-level nav labels stay on one line. Only the top-level items (nav > div > a, mb_render_desktop_menu_item) — the dropdown panels' own links sit deeper and are meant to wrap. This makes the pill height stable regardless of how tight the bar gets: a future menu item can now overflow, but it can no longer silently double the height of the whole bar. */ nav[aria-label="Hoofdmenu"] > div > a { white-space: nowrap; } /** * 2b. The 1024–1106px band keeps the hamburger instead of the desktop bar. * * Rule 1's arithmetic assumes the bar gets the full 1280, and it doesn't * at the low end: `.container` is capped at 1280 but is otherwise the * viewport, and picks up px-4 at 1086px and below (custom.css). With the * logo on its 200px step there (rule 4) the contents still need 1083 — * a 232px logo pill plus the 851px nav/Contact block — so anything * narrower overruns. At 1024 the bar overran the container by 91px and * pushed the Contact button 75px off-screen, which is the nav looking * cut off at the right. * * Nothing sensible can be trimmed to recover 91px: the nav block alone is * 851 of the 992 available at 1024 (86% of the bar) with six items, a * search icon and the Contact pill, so even if it fitted it would be * wall-to-wall. This band gets the theme's own answer for a bar with no * room — the mobile panel, which carries exactly the same menu plus the * Contact link. * * The desktop bar returns at 1107px, the first width where 1083 of * contents leaves at least 24px between the logo pill and the nav. The * arithmetic — not a round number — sets that edge; 1087 would * technically fit and look like a mistake, with the two pills 4px apart. * * The theme switches at the lg breakpoint (1024px) via `hidden lg:flex` * on the nav and Contact and `lg:hidden` on the toggle. Each override * below is one class more specific than the utility it beats, so no * !important is needed. * * The Contact selector walks the child path (bar > right-hand block > a) * rather than matching on classes alone: the mobile panel's own Contact * link carries the same rounded-full/bg-primary-50/font-black classes, * and hiding that one in this band would empty the very panel this rule * is switching to. The nav needs no such care — the panel's