/* =========================================================================== LeadFuel console — theme bridge + nav chrome. The console now runs on the shared --lf-* token contract (leadfuel-design-tokens.css), which already flips light↔dark via data-theme on . This file does two jobs: 1. LEGACY ALIAS BRIDGE. A lot of older console/intake markup (and inline styles in templates) still reads --bg / --brand / --text / etc. Rather than hunt every reference, we re-point those legacy names at the --lf-* tokens. Because --lf-* themselves flip in [data-theme="dark"], the aliases inherit dark mode for free — no per-template edits, no !important hacks, no "the page is always effectively light" caveat. 2. NAV CHROME. The console-specific pieces of the north-star .lf-nav (mobile drawer, account menu, theme-toggle/burger icons) that aren't in the shared kit. theme.js sets data-theme on from localStorage('lf_theme') and wires the nav sun/moon toggle. Business default = light. =========================================================================== */ /* ── 1. Legacy alias bridge ────────────────────────────────────────────── Map the old token vocabulary onto --lf-*. Declared once in :root; since the right-hand --lf-* vars are themselves overridden under [data-theme="dark"], these aliases resolve to the correct value in either theme automatically. */ :root { --bg: var(--lf-bg); --bg-elevated: var(--lf-surface); --bg-subtle: var(--lf-bg-soft); --border: var(--lf-border); --border-strong: var(--lf-border); --brand: var(--lf-accent); --brand-hover: var(--lf-accent-hover); --brand-soft: var(--lf-accent-soft); --text: var(--lf-ink); --text-muted: var(--lf-muted); --text-faint: var(--lf-muted-soft); --muted: var(--lf-muted); --shadow: var(--lf-shadow); --radius: var(--lf-radius-lg); --radius-lg: var(--lf-radius-lg); } [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* Smooth the switch on the big surfaces. */ html, body { transition: background-color .25s ease, color .25s ease; } /* ── 2. Nav chrome (console-specific extensions of the shared .lf-nav) ──── */ /* Theme-toggle button: inherits .lf-nav-toggle from the kit; just size the icon and give it a hover affordance. The icon glyph (sun/moon) is swapped by JS. */ .lf-nav-toggle .ic { display: block; } /* Briefcase / icon action button in the nav actions zone. */ .lf-nav-icon-btn { background: transparent; border: 1px solid var(--lf-border); border-radius: var(--lf-radius-sm); color: var(--lf-muted); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color var(--lf-transition), border-color var(--lf-transition); } .lf-nav-icon-btn:hover { color: var(--lf-ink); border-color: var(--lf-accent); } .lf-nav-icon-btn:focus-visible { outline: none; box-shadow: var(--lf-shadow-focus); } /* Account name pill (opens the desktop account menu). */ .lf-nav-account { font-size: var(--lf-fs-sm); font-weight: var(--lf-fw-semibold); color: var(--lf-ink-soft); display: inline-flex; align-items: center; gap: var(--lf-space-2); cursor: pointer; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: var(--lf-space-1) var(--lf-space-2); border-radius: var(--lf-radius-sm); transition: background var(--lf-transition); } .lf-nav-account:hover { background: var(--lf-bg-soft); } .lf-nav-account:focus-visible { outline: none; box-shadow: var(--lf-shadow-focus); } .lf-nav-admin-chip { padding: 2px 7px; } /* Desktop account dropdown. Hidden via the [hidden] attr until JS opens it; the menu is `position:fixed` so a bare `display:flex` would OVERRIDE [hidden] and leave Settings/Sign out stuck top-right. Gate display on :not([hidden]) — the same fix the drawer uses below. */ .lf-nav-account-menu { position: fixed; top: 56px; right: var(--lf-space-6); z-index: var(--lf-z-overlay); min-width: 180px; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); box-shadow: var(--lf-shadow-lg); padding: var(--lf-space-2); flex-direction: column; gap: 2px; } .lf-nav-account-menu:not([hidden]) { display: flex; } .lf-nav-account-menu a, .lf-nav-account-menu button { display: block; width: 100%; text-align: left; background: transparent; border: 0; font: inherit; font-size: var(--lf-fs-sm); font-weight: var(--lf-fw-semibold); color: var(--lf-ink-soft); text-decoration: none; cursor: pointer; padding: var(--lf-space-2) var(--lf-space-3); border-radius: var(--lf-radius-sm); } .lf-nav-account-menu a:hover, .lf-nav-account-menu button:hover { background: var(--lf-bg-soft); color: var(--lf-ink); } .lf-nav-account-menu form { margin: 0; } /* Burger icon (3-line glyph) — shown only < 860px via the kit's media query. */ .lf-nav-burger-icon, .lf-nav-burger-icon::before, .lf-nav-burger-icon::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--lf-transition), opacity var(--lf-transition); } .lf-nav-burger-icon { position: relative; } .lf-nav-burger-icon::before, .lf-nav-burger-icon::after { content: ""; position: absolute; left: 0; } .lf-nav-burger-icon::before { top: -6px; } .lf-nav-burger-icon::after { top: 6px; } .lf-nav-burger.open .lf-nav-burger-icon { background: transparent; } .lf-nav-burger.open .lf-nav-burger-icon::before { transform: translateY(6px) rotate(45deg); } .lf-nav-burger.open .lf-nav-burger-icon::after { transform: translateY(-6px) rotate(-45deg); } /* Mobile drawer (collapsed section links + admin + sign-out). Hidden by default — the `hidden` attribute is the closed state; the burger JS removes it to open. A bare `display:flex` would override [hidden] and show the drawer on desktop, so gate it on :not([hidden]). The burger itself only appears < 860px (kit media query), so the drawer can't be opened on desktop. */ .lf-nav-drawer { border-top: 1px solid var(--lf-border); background: var(--lf-surface); padding: var(--lf-space-3) var(--lf-space-6) var(--lf-space-5); flex-direction: column; gap: 2px; display: none; } .lf-nav-drawer:not([hidden]) { display: flex; } .lf-nav-drawer a, .lf-nav-drawer button { display: block; width: 100%; text-align: left; background: transparent; border: 0; font: inherit; font-size: var(--lf-fs-md); font-weight: var(--lf-fw-semibold); color: var(--lf-ink-soft); text-decoration: none; cursor: pointer; padding: var(--lf-space-3) 0; border-radius: var(--lf-radius-sm); } .lf-nav-drawer a:hover, .lf-nav-drawer button:hover { color: var(--lf-accent); } .lf-nav-drawer a.active { color: var(--lf-accent); } .lf-nav-drawer-section { font-size: var(--lf-fs-xs); font-weight: var(--lf-fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--lf-muted-soft); padding: var(--lf-space-3) 0 var(--lf-space-1); margin-top: var(--lf-space-2); border-top: 1px solid var(--lf-border-soft); } .lf-nav-drawer-form { margin: 0; } /* Below the burger breakpoint, the desktop account menu would mis-anchor; the drawer carries Settings/Sign-out instead, so hide the desktop dropdown. The briefcase + account name also fold into the drawer to keep the bar uncrowded next to the burger. */ @media (max-width: 860px) { .lf-nav-account-menu { display: none; } .lf-nav-icon-btn, .lf-nav-account { display: none; } } /* Impersonation banner button (on the orange .lf-banner-impersonate bar). */ .lf-banner-impersonate-btn { background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); } .lf-banner-impersonate-btn:hover { background: rgba(255, 255, 255, 0.28); } @media print { .lf-nav, .lf-nav-account-menu { display: none !important; } }