/** * Slide-in nav overlay ("mega menu") + the shared "Category Tabs" walker * output. Global (every page). * * Full-width by explicit request: the literal source constrains this to * `width:min(100% - 48px, 1440px)` (centered, matching content width), * but a true edge-to-edge full-width layout is what was asked for here * instead — "properly as normally mega menus are" — a deliberate * deviation from the source, not a bug. Internal content still respects * the global side-spacing (--gutter-desktop) so text doesn't touch the * viewport edge. * * The source toggles visibility via plain display:none → .open{ * display:flex} with NO transition on the panel itself. A subtle fade-in * is added here anyway since a "smooth open/close animation" was * explicitly requested — kept minimal (opacity only). * * The walker's description span is `.cs` (matching the homepage tab * bar's class) — selectors below target `.cs` to match what the walker * (inc/class-malasiya-category-tabs-walker.php) actually outputs. */ .nav-menu { position: fixed; inset: 0; width: 100%; z-index: var(--z-nav-overlay); background: var(--color-bar); color: var(--color-white); display: none; flex-direction: column; /* Reduced from 40/46px per explicit feedback that the panel was taller than the viewport, forcing an internal scrollbar. max-height is a hard safety net on top of the reduced padding below. */ max-height: 100vh; padding: 28px var(--gutter-desktop) 32px; overflow: hidden auto; opacity: 0; transition: opacity 0.2s ease; } /** * Permanent ambient glow, top-right corner — confirmed directly from * source (`.nav-menu::after`), a decoration that's ALWAYS visible, not a * hover effect. Missed entirely in earlier rounds; this is the "yellow * shadow" that was expected to be permanent. */ .nav-menu::after { content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 9, 0.28), transparent 68%); pointer-events: none; } .nav-menu.open { display: flex; opacity: 1; } .nm-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } /** * Full wordmark, plain white — per explicit correction: no per-letter * brand colors here (unlike the header/footer usage of the same markup), * every span just inherits this element's white color. */ /** * Larger, wrapping to 2 lines ("The Smart" / "Investor.") — per explicit * correction, matching the Style Guide's confirmed "H1 / Page title" * spec (Playfair Display 900, 40px+, line-height 1, -1px tracking), not * the smaller single-line size used before. max-width forces the wrap * at a natural word boundary instead of relying on the panel's own width. */ .nm-logo { font-family: var(--font-secondary); font-weight: 900; font-size: 44px; line-height: 1.05; letter-spacing: -1px; color: var(--color-white); max-width: 260px; } .nm-logo .wm-g, .nm-logo .wm-y, .nm-logo .dot { color: inherit; } /** * No border, no background at rest, no per-button shadow either — the * "permanent yellow glow" that was wanted turned out to be the ambient * `.nav-menu::after` corner decoration above, not a button-specific * effect, so this stays simple: just a color change on hover. (The * literal source actually has a translucent white background pill here * at rest — explicitly overridden per direct instruction to have none.) */ .nm-close { display: flex; align-items: center; gap: 6px; font-family: var(--font-primary); font-size: 13px; font-weight: 600; letter-spacing: 0.5px; color: var(--color-white); background: transparent; border: 0; box-shadow: none; padding: 10px 12px; cursor: pointer; transition: color 0.15s; } .nm-close:hover, .nm-close:focus-visible { color: var(--color-accent); } .nm-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; padding: 24px 0; } .nm-h { font-family: var(--font-primary); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-accent); margin-bottom: 18px; } /** * Category tabs walker output (.ui-cat / .cat-row / .cs / .ub) reused * here — corrected per explicit feedback (3rd round): * - Title + description side-by-side, space-between (confirmed correct). * - Hover: NO text-decoration underline (still correct not to have * this), but the `.ub` growing left-to-right bar IS wanted — an * earlier round removed it entirely, which was wrong; it's a * smooth animated transition, not a plain instant underline, so it * was never really "an underline" in the first place. * - Color: accent yellow (matches the literal source * `.nm-sections a:hover{color:var(--y)}`, confirmed correct after * going back and forth — a previous round wrongly used green). * - The static grey divider (border-bottom) stays, unrelated to hover. */ .nm-sections { display: flex; flex-direction: column; } .nm-sections .cat-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .nm-sections .ui-cat { display: block; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); transition: color 0.15s; } /* No divider after the last item — same rule on both desktop and mobile (no breakpoint override needed, :last-child applies everywhere). */ .nm-sections .ui-cat:last-child { border-bottom: 0; } .nm-sections .ui-cat .cn { font-family: var(--font-secondary); font-weight: 700; font-size: 32px; letter-spacing: -0.5px; color: var(--color-white); transition: color 0.15s; } .nm-sections .ui-cat:hover .cn, .nm-sections .ui-cat:focus-visible .cn { color: var(--color-accent); } .nm-sections .ui-cat .cs { flex: none; font-family: var(--font-primary); font-size: 12px; font-weight: 500; letter-spacing: 0.5px; color: #9fb4a6; white-space: nowrap; } .nm-sections .ui-cat .ub { display: block; height: 2px; background: var(--color-accent); width: 0; transition: width 0.2s ease; margin-top: 6px; } .nm-sections .ui-cat:hover .ub, .nm-sections .ui-cat:focus-visible .ub { width: 48px; } /* Company pages — default wp_nav_menu()