/** * LightMega — Frontend styles (desktop) * * G7: desktop layout — full-width panel with a category sidebar (left) and a * product grid (right), replicating the client-approved Oudimmo mockup v4. * Loaded ONLY when a mega menu item is actually rendered (conditional enqueue, * G2); never globally. Mobile (accordion / slide-in) lands in G8; the desktop * panel is simply hidden below the breakpoint here. * * Design tokens are scoped to .lightmega-panel (not :root) so they never leak * into the theme and stay easy to override (basis for Pro theming). * * @package LightMega */ /* ───────────────────────────────────────────────────────────── Design tokens (scoped) + local reset Two families live here. FIXED tokens are internal: the plugin's palette and fonts. Not configurable in v1. CONFIGURABLE tokens map 1:1 onto LightMega_Settings parameters. The value declared here IS the product default, which is what makes the customization layer cost nothing: the panel's inline style attribute only ever carries the values that DIFFER from these, so a merchant who customizes nothing gets no attribute at all. Never move them to :root — scoping them to the element is what keeps them travelling with the panel when the JS portals it into , and what stops them leaking into the theme. ───────────────────────────────────────────────────────────── */ /* `.lightmega-preview` (G11) is the editor's card preview. It is on this list so the preview draws its badges with THESE rules and THESE tokens rather than a copy of them: the badge palette used to live twice, once here and once in the editor's stylesheet, and the two had drifted apart on four colours of five. Since Badge-Color the palette is values in LightMega_Menu_Meta and the editor's presets and swatches sit in this scope too, for the neutral below. The wrapper matches nothing on the front end, and none of the panel's shell rules below select it — only the tokens travel. */ .lightmega-panel, .lightmega-preview { /* ── Fixed ── */ --lm-accent: #c8961e; /* Declared, not yet consumed — NOT a leftover to clean up. Kept in the accent family on purpose: a --lm-gold-* sitting next to --lm-accent reads as a second colour when there is only one. --lm-accent-hover (#a87a10) was declared alongside it in G10a and REMOVED in G10c-2, which is the block that was supposed to consume it. Two findings, both checked rather than assumed. (a) The footer button is the only opaque accent surface with a hover state, and its colour is CONFIGURABLE (footer_button_color): a fixed darker gold would stay gold on a blue button, so the hover is derived with brightness() and follows whatever the merchant set. (b) Nothing else in the panel wanted it — all four hardcoded accent literals (the sidebar tint 8%, the card shadow 18%, the arrow-disc shadow 35%, the mobile row tint 8%) are ALPHA variants of the same accent, and what they will need when accent_color becomes configurable is --lm-accent-rgb, a token of a different shape. See the TODOs on those rules. */ --lm-accent-light: #f0c84a; --lm-dark: #1a1a1a; --lm-white: #ffffff; --lm-off: #f7f5f0; --lm-border: #e0dbd0; --lm-muted: #777; --lm-text: #2c2c2c; /* Reserved column for the sidebar count. Internal, not a setting: it is used TWICE — as the count's floor and as the description's right inset — and a single declaration is what stops the two from drifting apart. */ --lm-sidebar-count-width: 26px; /* The active-row indicator's width. Same reason as the token above, and the same shape: it is used TWICE — it draws the border, and the mobile inset SUBTRACTS it, because a border contributes to where the text starts just as padding does. Measured on a device: the row's total inset is border 3 + padding, so the two numbers have to move together or the accordion drifts out of line with the theme's menu by exactly the difference. */ --lm-cat-indicator-width: 3px; /* The category column's label (Sidebar-Heading). Its own token, and the reason is a MEASUREMENT: the label sits on the sidebar's beige (#f2efe9), where the category heading's --lm-muted (#777) gives 3.90:1 — under the 4.5:1 a 10px text needs. #6b6b6b gives 4.64:1 there, and it is the neutral the badges moved to in Badge-Color. Not a retouch of --lm-muted, which is shared and passes where its consumers sit, on white; not --lm-sidebar-desc-color either, which is a Pro parameter and would drag the label along with the description. G10d's reasoning, one element over. The test recomputes the ratio against the sidebar's own background, so a change to either fails there rather than on a screen. */ --lm-sidebar-heading-color: #6b6b6b; /* ── Configurable (LightMega_Settings) ── */ --lm-panel-bg: #ffffff; --lm-panel-height: 75vh; --lm-panel-max-width: none; --lm-panel-radius: 8px; /* The header's own two colours. They take over --lm-accent's job INSIDE the bar and nowhere else: its other consumers (sidebar hover, both scrollbars, the card hover border, the arrow disc) stay on the shared token, so recolouring the header does not repaint the panel. The gold badge used to be the sixth; since Badge-Color it carries the gold as a value of its own palette, because a colour the merchant picks BY NAME must not move if the accent ever does. */ --lm-header-bg: #1a1a1a; --lm-header-accent: #c8961e; --lm-sidebar-width: 290px; --lm-sidebar-font-size: 13px; --lm-sidebar-desc-font-size: 11px; /* Its own colour, NOT --lm-muted: a sidebar description is navigation, a card subtitle is product copy. Sharing a token would mean one cannot be darkened without moving the other two that use it (count, card subtitle). */ --lm-sidebar-desc-color: #595959; --lm-sidebar-radius: 8px; --lm-card-min-width: 190px; --lm-card-radius: 8px; --lm-card-image-ratio: 4 / 3; /* Footer (G10c-2). --lm-footer-button-radius is fed by an ENUM: the merchant picks a shape (square|rounded|pill), the schema's css_map turns it into the radius below. The stored slug is never the CSS value — see LightMega_Settings::css_value(). */ --lm-footer-bg: #faf8f5; --lm-footer-separator-color: #e8e8e8; --lm-footer-button-radius: 6px; --lm-footer-button-bg: #c8961e; --lm-footer-button-color: #ffffff; /* Badges (G11). ONE property per parameter, which is what lets the generic gate, report() and the import handle them with nothing of their own. --lm-badges-place is and is read TWICE, by place-content and place-items; --lm-badges-display IS the layout (grid = stacked, flex = in a row — see the Badges block for why not one of the two for both). The -mobile set is a second set, not the first re-valued in the media query: the inline style attribute freezes a token for every breakpoint (G10a). */ --lm-badges-place: start end; --lm-badges-display: grid; --lm-badges-place-mobile: start end; --lm-badges-display-mobile: grid; --lm-badges-visibility-mobile: visible; /* A badge's colour (Badge-Color). NOT settings: each badge carries its own in its style attribute, from LightMega_Menu_Meta::BADGE_PALETTE, as a DELTA against these two. So these ARE the palette's neutral — `grey` has no values in PHP, and a grey badge, a white label and a Pro colour behind a closed gate all emit nothing and land here. One copy of each value. Contrast 5.33:1 (#777, the old neutral, gave 4.48:1 — under the 4.5:1 an 8px label needs). tests/badge-color.test.php recomputes it from this block. */ --lm-badge-bg: #6b6b6b; --lm-badge-fg: #fff; /* Fonts are referenced, never bundled (WP.org privacy + performance): if the theme already serves Montserrat/Lato they are used, else a clean system fallback keeps the panel light. */ --lm-font-head: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --lm-font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } .lightmega-panel, .lightmega-panel * { box-sizing: border-box; } /* ───────────────────────────────────────────────────────────── Panel shell + open state ───────────────────────────────────────────────────────────── */ /* The panel is portaled to by JS at init, so position:fixed is relative to the viewport (immune to ancestor transform/filter). It therefore no longer positions against .lightmega-item, and opening is driven by a class the JS toggles on the panel itself — not by :hover on the menu item. */ .lightmega-panel { display: none; position: fixed; left: 0; right: 0; top: 0; /* refined to the menu item's bottom edge by JS */ height: var(--lm-panel-height); z-index: 9999; flex-direction: column; overflow: hidden; background: var(--lm-panel-bg); color: var(--lm-text); font-family: var(--lm-font-body); text-align: left; /* Depth BELOW the panel and nothing above it. The three numbers are one unit, and `0 8px 48px` — the value through G10c-2-fix — is the one that breaks: a 48px blur on a shadow offset only 8px down reaches ~16px ABOVE the panel's top edge (48/2 - 8), and at z-index 9999 it paints that band onto the site header. The whole header read as veiled whenever a panel was open, and it looked like an overlay bug — the overlay is innocent, it starts at the panel's top edge and in mobile mode it does not exist at all. The arithmetic, because it is not guessable: spread resizes the shadow's box BEFORE the blur is applied (negative contracts it on every side), and the blur then extends the shadow about HALF its radius beyond that box. So the topmost painted pixel sits at `offset - spread - blur/2` below the panel's top edge: 24 - (-24) - 24 = +24px, i.e. 24px INSIDE an opaque panel, hidden by it. The constraint to keep when touching ANY of the three: offset >= blur / 2 + spread Lower the offset, widen the blur, or drop the negative spread — each on its own puts the shadow back on the header. Verified on the client's site. Locked by tests/settings-css.test.php. */ box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.25); /* Only the bottom corners, always: a panel that drops from the site header is flush with it, so rounding its top edge would cut a notch out of the bar. One setting, applied to the two corners it can sensibly affect. */ border-radius: 0 0 var(--lm-panel-radius) var(--lm-panel-radius); } /* Boxed layouts: the shell stays full-bleed (it never breaks a theme), while the CONTENT can be constrained and centred. Applied to the panel's children rather than a new wrapper — no extra DOM. `width: 100%` is load-bearing, do not drop it: an auto margin on a flex item's cross axis SUPPRESSES align-items:stretch, so `margin-inline: auto` alone would shrink the children to their content width. With an explicit width there is no free space to absorb while max-width is `none` (the default), so the margins resolve to zero and layout is unchanged; set a max-width and the same margins centre the content. The FOOTER joins the rule in G10c-2: left out, it would have stayed full-width while the other two were centred. Declared consequence, and the same one the header already has today — the constrained box carries the BACKGROUND too, so with panel_max_width set the footer's fill is a centred band rather than a full-bleed strip. Consistency with the header is the argument. */ .lightmega-panel__header, .lightmega-panel__body, .lightmega-panel__footer { max-width: var(--lm-panel-max-width); margin-inline: auto; width: 100%; } /* Open state, toggled by JS on hover / focus / tap (see lightmega-frontend.js). CSS cannot drive this: the panel is detached from its menu item (portaled to ), so a descendant selector on the item would never match it. */ .lightmega-panel.is-open { display: flex; } /* Shared dark overlay (created and toggled by JS, appended to so it is never trapped in the theme header's stacking context). */ .lightmega-overlay { position: fixed; left: 0; right: 0; bottom: 0; top: 0; /* refined to the panel's top edge by JS, so the header stays clear */ z-index: 9990; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.2s ease; } .lightmega-overlay.is-visible { opacity: 1; visibility: visible; } /* ───────────────────────────────────────────────────────────── Header (dark bar: heading · count · close) ───────────────────────────────────────────────────────────── */ .lightmega-panel__header { flex-shrink: 0; display: flex; align-items: center; gap: 16px; height: 58px; padding: 0 28px; background: var(--lm-header-bg); border-bottom: 3px solid var(--lm-header-accent); } .lightmega-panel__titles { margin-right: auto; min-width: 0; } .lightmega-panel__heading { margin: 0; font-family: var(--lm-font-head); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; } /* The count pill follows the HEADER accent, not the global one: it and the bottom line are the only two things inside the bar, and a line that recolours while the pill beside it stays gold reads as a bug rather than a choice. */ .lightmega-panel__count { flex-shrink: 0; background: var(--lm-header-accent); color: #fff; font-family: var(--lm-font-head); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; padding: 3px 12px; border-radius: 20px; white-space: nowrap; } .lightmega-panel__close { /* Pin to a perfect circle, defended against theme