/* ========================================================================== Mouldshop — IDENTITY LAYER for the ported Mouldshop mega-menu M4 / TASK-0020, operator revision 2026-08-29. Loads LAST, after mouldshop-navbar.css and mouldshop-navbar-shim.css. SCOPE CHANGED IN THIS REVISION, AND IT SHRANK. The first build skinned the whole Mouldshop bar — utility strip, 100px action tiles, expand/collapse search — and the operator rejected it: the BAR is Mouldshop's, exactly as TASK-0015 shipped it, and it is styled by mouldshop.css, not here. What is left for this file is the MEGA-MENU, the mobile slide panels and the drawer, because those are Mouldshop's markup and there is nothing else to style them. THE RULE THIS FILE OBEYS: mouldshop-navbar.css is never edited to change a colour. Everything below is either a TOKEN REDEFINITION — the bundle consumes exactly 20 custom properties, so redefining them reskins it without touching a selector — or a scoped override for a token that carries two opposite roles. THE PANEL IS WHITE NOW (operator), and that inverts the whole scheme. Mouldshop's dropdown is its darkest navy with light ink; Mouldshop's is white with navy ink. Every ramp therefore flips direction, and the two tokens that were already doing double duty now do it the other way round: token Mouldshop Mouldshop (white panel) ------------------------ ------------------------- ----------------------- --color-nicknavyblue-100 panel SURFACE (darkest) panel surface -> WHITE and ink on light ...so its few ink uses need overriding --color-nicknavyblue-20 light ink ON the panel navy ink on white --color-nickyellow-100 accent ink on dark navy: active + hover --color-white ink on the dark panel still white where it is AND the drawer surface a surface, navy where it is ink -> 4 overrides PALETTE SOURCE: mouldshop.css section 0 (Mouldshop BDG, DESIGN_SPEC.md 0). This file defines no colour of its own — every value is an --ms-* token or a tint derived from one. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKEN REMAP — the whole reskin, in one block. -------------------------------------------------------------------------- */ :root { /* White stays white: it is the drawer panel and the mobile search surface. Its four INK uses are overridden in section 4. */ --color-white: var(--ms-white); /* The panel surface and its sub-panels, white to light. */ --color-nicknavyblue-100: var(--ms-white); /* the dropdown itself */ --color-nicknavyblue-80: var(--ms-grey-5); /* column + rail surfaces */ --color-nicknavyblue-60: var(--ms-blue); /* dots and hairlines */ --color-nicknavyblue-40: var(--ms-navy-40); --color-nicknavyblue-20: var(--ms-navy-80); /* resting ink on white */ /* Accent. On a white panel the accent has to be the strong colour, not the light one — navy carries active and hover, and the bundle's 10% colour-mix of this token becomes a pale navy wash instead of a pale yellow one. Blue stays as the dot and hairline colour. */ --color-nickyellow-100: var(--ms-navy); --color-nickyellow-80: var(--ms-navy); --color-nickyellow-60: var(--ms-blue); /* Muted headings inside the panel. */ --color-nickgrey-100: #6b7280; --color-nickgrey-5: var(--ms-grey-5); /* Hairlines. The bundle derives this from navyblue-60, which is now blue — too loud for a rule on white. Redefined rather than overriding consumers. */ --mouldshop-mega-border: var(--ms-grey-20); } /* -------------------------------------------------------------------------- 2. TYPOGRAPHY — Montserrat (nav) + Roboto (body) in place of Titillium Web, by redefining the bundle's font tokens rather than restyling anything. Scoped to #header-group, so nothing leaks and Titillium is never requested. Both families are already @imported at the top of mouldshop.css. -------------------------------------------------------------------------- */ #header-group { --default-font-family: var(--ms-font-head); --font-paragraph--family: var(--ms-font-body); --font-h3--family: var(--ms-font-head); --font-h4--family: var(--ms-font-head); } #megaMenu .subcategory-btn, #megaMenu .item-link, #megaMenu .mega-menu__items-title, #megaMenu .mega-menu__mobile-button, #megaMenu .mega-menu__mobile-link, .mouldshop-universal-drawer__menu a { font-family: var(--ms-font-head); } /* -------------------------------------------------------------------------- 3. The panel needs an edge now that it is white. Mouldshop's dropdown separates from its yellow bar by contrast alone. Against Mouldshop's navy bar the top edge is fine, but the other three sides meet the page, so the panel carries a shadow and a hairline instead. -------------------------------------------------------------------------- */ #megaMenu .mega-menu-dropdown { border-bottom: 1px solid var(--ms-grey-20); box-shadow: 0 18px 32px -18px rgba(0, 26, 82, .35); } /* -------------------------------------------------------------------------- 3b. FULL-WIDTH PANEL (operator, 2026-08-29). The bundle clamps the panel's inner container to 1800px and centres it (mouldshop-navbar.css:744). On Mouldshop's own store that is invisible — the theme never renders wider than the clamp. On a wide monitor here it left the mega-menu floating with dead space either side of a dropdown that is itself full-bleed. Overridden, not edited: same selector as the bundle's, same specificity (1,1,0), and this file loads after it, so order settles it. `margin: 0 auto` is left alone deliberately — it is a no-op once there is no max-width, and restating it would only invite someone to "clean up" the wrong one later. The ≤989px rule at mouldshop-navbar.css:1143 also targets this selector, but it only sets `height`, so the mobile panel is untouched. -------------------------------------------------------------------------- */ #megaMenu .mega-menu__container { max-width: none; } /* -------------------------------------------------------------------------- 4. The four places --color-white is INK, not a surface. On Mouldshop's navy panel these are white text; on a white panel they vanish. The token itself must stay white because it is also the drawer's background. -------------------------------------------------------------------------- */ #megaMenu .subcategory-btn:hover, #megaMenu .mega-menu__items-title, #megaMenu .mega-menu__mobile-header, #megaMenu .mega-menu__mobile-button:hover { color: var(--ms-navy); } /* Same inversion for the drawer's own menu links: the bundle colours them with navyblue-100, which this skin has just turned white — white on white. */ .mouldshop-universal-drawer__menu a { color: var(--ms-navy); } /* -------------------------------------------------------------------------- 5. LOGO. The bundle's base shim sizes Mouldshop's inline SVG logo via `svg { display: block }`. Mouldshop's marks are files, so they arrive as inside .ms-logo and are sized by mouldshop.css (40px tall, width auto). All this does is keep the shim's re-asserted `max-width: 100%` off them. -------------------------------------------------------------------------- */ .ms-logo-desktop, .ms-logo-signet { max-width: none; } /* -------------------------------------------------------------------------- 6. The per-group icon prefix (TASK-0015a, carried through the port and injected by mouldshop-navbar-icons.js). currentColor throughout, so it inherits every state the row already has and needs no state rules of its own. -------------------------------------------------------------------------- */ .ms-mm-ico { flex: 0 0 auto; width: 18px; height: 18px; margin-right: 8px; color: currentColor; opacity: .8; vertical-align: middle; } /* GROUP ICON FILES in the rows (operator, 2026-09-24: "old icons - from nowhere - update this to icon from navigation"). mouldshop-navbar-icons.js now inlines the group's own icon file (the category grid's two-tone .svg, cropped to its glyph) and falls back to the sprite. Both tones follow currentColor, so the row's hover and active states carry through exactly as they did for the line icons: the shape at full ink, the light-blue "shadow" layer as a quarter-strength tint of it. The files' own #0a2979 / #c4e0f2 never apply. */ .ms-mm-ico--file .bon-svg-darkblue { fill: currentColor; } .ms-mm-ico--file .bon-svg-lightblue { fill: currentColor; opacity: .25; } /* Adding a third flex child changes what `justify-content: space-between` means. Mouldshop's branch rows are `display:flex; justify-content:space-between` with exactly TWO children — label, then chevron — so the label sits left and the chevron right. Inserting the icon makes three, and space-between then spreads them evenly: icon left, label CENTRED, chevron right. Every category label in the column drifts to the middle. `margin-right: auto` on the label absorbs the free space instead, which puts the label immediately after its icon and leaves the chevron flush right — the export's layout, with an icon in front of it. Scoped to rows that actually got an icon, so an un-keyed row is untouched. */ #megaMenu .ms-mm-ico + .subcategory-label, #megaMenu .ms-mm-ico + .mega-menu__mobile-label { margin-right: auto; }