/** * 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-panel { /* ── Fixed ── */ --lm-accent: #c8961e; /* Declared, not yet consumed — NOT leftovers to clean up. --lm-accent-hover is the footer button's hover state (G10c); --lm-accent-light is held for the same palette. 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; --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; /* ── Configurable (LightMega_Settings) ── */ --lm-panel-bg: #ffffff; --lm-panel-height: 75vh; --lm-panel-max-width: none; --lm-panel-radius: 8px; --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; /* 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; box-shadow: 0 8px 48px 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 only two 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 both 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. */ .lightmega-panel__header, .lightmega-panel__body { 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-dark); border-bottom: 3px solid var(--lm-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; } .lightmega-panel__count { flex-shrink: 0; background: var(--lm-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