/* ========================================================================= Chameleon Partner Portal — visual demo Rebuilt from the WordPress/Bricks export as a static Cloudflare Pages site. Brand: navy #192857 + green #61a60e (from the Chameleon logo). Contrast ratios noted inline as "x.xx:1" on new/changed color pairs. ========================================================================= */ /* ---- Design tokens ---------------------------------------------------- */ :root { color-scheme: light; /* brand */ --navy: #192857; --navy-700: #131f43; --navy-800: #0e1730; --green: #61a60e; /* reserved: focus rings (rgba), status dots, glows — never text/CTA fill */ --green-600: #538f0c; --green-700: #457708; /* accessible CTA / active-nav / avatar green — 5.39:1 on white */ --green-800: #3a6607; /* primary button hover/active, legend text — 6.81:1 on white */ --green-soft: #cceec6; --green-ink: var(--green-700); /* green TEXT (links, up-delta) — 5.39:1 on white */ /* neutrals (light theme) */ --bg: #f4f6fa; --surface: #ffffff; --surface-2: #f8fafc; --border: #e5e9f2; --text: #1b2333; --muted: #5b6478; /* 5.48:1 on --bg, 5.67:1 on --surface-2 */ --muted-2: #98a1b3; --chrome-hover: #e9edf5; /* topbar/menu hover fill — --surface-2 is invisible on the 85-90% glass */ /* status */ --danger: #b42318; /* 6.57:1 on white — .down text + form invalid border */ --danger-ring: rgba(180,35,24,.16); /* stage colors */ --stage-set-bg: #e7effe; --stage-set-fg: #2563c9; /* 4.90:1 */ --stage-follow-bg: #fff2d9; --stage-follow-fg: #8a5a12; /* 5.34:1 */ --stage-agree-bg: #ede7fb; --stage-agree-fg: #6d45c8; /* 5.22:1 */ --stage-won-bg: #cceec6; --stage-won-fg: #2f6b12; /* 5.14:1 */ --stage-lost-bg: #fde8e6; --stage-lost-fg: #b42318; /* 5.02:1 */ /* product hues — visually distinct from the four stage hues (decorative dots beside text) */ --product-time: #0ea5e9; --product-parts: #0d9488; --product-labor: #db2777; /* type scale (rem, base = 16px) */ --text-xs: .6875rem; /* 11px */ --text-sm: .8125rem; /* 13px (absorbs 12.5/13/13.5) */ --text-ms: .875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.625rem; /* 26px */ --text-2xl: 1.875rem; /* 30px */ /* spacing scale (4px grid) */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; /* shape */ --radius-l: 16px; --radius-m: 12px; --radius-s: 8px; --radius-full: 999px; --shadow-card: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -6px rgba(16,24,40,.10); --shadow-pop: rgba(16,24,40,.14) 0 12px 40px -8px; /* motion — the only two easings in the shell; no spring/overshoot */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-sheet: cubic-bezier(.32, .72, 0, 1); --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms; --dur-4: 320ms; --dur-5: 460ms; /* elevation scale (shell chrome) */ --elev-1: 0 10px 30px -20px rgba(14,23,48,.6); /* topbar scrolled */ --elev-2: var(--shadow-pop); /* menus */ --elev-3: rgba(16,24,40,.28) 0 24px 64px -16px; /* drawer */ --sidebar-w: 262px; --topbar-h: 66px; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; accent-color: var(--green); } [data-theme="dark"] { color-scheme: dark; --bg: #0e1424; --surface: #161d31; --surface-2: #212c49; /* clearer step above --surface (was #1b2338, only 1.07:1) — table headers, hovers, field/note fills now read */ --border: #3a4767; /* visible edge on the dark surfaces (was #26304a, ~1.28:1) — defines inputs, dividers, ghost buttons, pills */ --text: #e7ebf3; --muted: #9aa4bb; --muted-2: #6c768f; --chrome-hover: #212c49; /* = --surface-2; dark hover pixels unchanged */ --green-ink: #61a60e; /* 5.56:1 on --surface — green text on dark */ --danger: #ff6b6b; /* 6.03:1 on --surface — .down text + invalid border */ --danger-ring: rgba(255,107,107,.20); /* dim, desaturated fills with lightened foregrounds so dark mode isn't bright pastels */ --stage-set-bg: #16233d; --stage-set-fg: #8fbdf5; /* 8.02:1 */ --stage-follow-bg: #2a2110; --stage-follow-fg: #e6c67e; /* 9.63:1 */ --stage-agree-bg: #241b3d; --stage-agree-fg: #c3a8f5; /* 7.88:1 */ --stage-won-bg: #16290f; --stage-won-fg: #9fd980; /* 9.36:1 */ --stage-lost-bg: #351713; --stage-lost-fg: #f2b8b1; /* 8.9:1 */ /* brighter product hues for the dark surface (decorative dots) */ --product-time: #38bdf8; /* 7.82:1 on --surface */ --product-parts: #2dd4bf; /* 8.99:1 on --surface */ --product-labor: #f472b6; /* 6.32:1 on --surface */ --shadow-card: rgba(0,0,0,.30) 0 6px 24px 0; /* dark card/table edges come from an explicit --border, not a ring */ /* pop = deep drop shadow + faint light ring so elevated surfaces (modal, menu, drawer, toast) read as lifted off the dark page instead of blending in */ --shadow-pop: rgba(0,0,0,.55) 0 16px 48px -12px, rgba(255,255,255,.06) 0 0 0 1px; --elev-1: 0 14px 34px -20px rgba(0,0,0,.85); --elev-3: var(--shadow-pop); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: var(--text-base); /* 16px — stops iOS focus auto-zoom */ line-height: 1.5; } a { color: inherit; text-decoration: none; } h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; } img, svg { display: block; } /* ---- A11y utilities --------------------------------------------------- */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-m); background: var(--navy); color: #fff; font-weight: 600; font-size: var(--text-sm); box-shadow: var(--shadow-pop); transition: top var(--dur-2) var(--ease-out); } .skip-link:focus { top: 8px; } /* ---- App shell -------------------------------------------------------- */ .app { display: flex; min-height: 100vh; min-height: 100dvh; } /* The sidebar/topbar are injected by JS after parse. Hold the app hidden until mountShell marks it .is-ready, so the page reveals fully composed instead of reflowing (content jumps left+down) as the chrome injects. On a normal load this resolves before first paint and is invisible; only a first, identity- fetching load waits on it. Gated on .js-mounting (set synchronously by app.js) so a no-JS page — which never mounts a shell — still shows its content. */ /* visibility (not just opacity) so pending, not-yet-composed controls are also non-focusable and out of the a11y tree during the brief mount window. */ .js-mounting .app:not(.is-ready) { opacity: 0; visibility: hidden; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); /* leadform-band grammar extended to the shell: green + blue glows over a navy ramp */ background: radial-gradient(140% 34% at 100% 0%, rgba(97,166,14,.16), rgba(97,166,14,0) 60%), radial-gradient(120% 30% at 0% 0%, rgba(120,150,220,.20), rgba(120,150,220,0) 55%), linear-gradient(180deg, #1d2e63 0%, var(--navy) 38%, var(--navy-800) 100%); box-shadow: inset -1px 0 0 rgba(255,255,255,.06); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; /* footer stays reachable on short/landscape viewports */ padding: 22px 16px; z-index: 30; view-transition-name: sidebar; } .sidebar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 50%, transparent); } [data-theme="dark"] .sidebar { background: radial-gradient(140% 34% at 100% 0%, rgba(97,166,14,.12), rgba(97,166,14,0) 60%), radial-gradient(120% 30% at 0% 0%, rgba(120,150,220,.10), rgba(120,150,220,0) 55%), linear-gradient(180deg, #1d2e63 0%, var(--navy) 38%, var(--navy-800) 100%); } .sidebar__logo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px 26px; } /* 12px registers the wordmark to the nav-icon column */ .sidebar__logo img { width: 168px; height: auto; } .sidebar__close { display: none; /* mobile-only, shown in the responsive block */ align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; margin: -6px -4px -6px 0; background: none; border: 0; border-radius: var(--radius-full); cursor: pointer; color: rgba(255,255,255,.72); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); } .sidebar__close:hover { color: #fff; background: rgba(255,255,255,.08); } .sidebar__close svg { width: 20px; height: 20px; } /* Backdrop behind the mobile drawer (inert on desktop) */ .nav-scrim { display: none; position: fixed; inset: 0; z-index: 25; background: rgba(15,23,42,.5); backdrop-filter: blur(1px); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; } .nav { display: flex; flex-direction: column; gap: 4px; } .nav__item { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius-m); color: rgba(255,255,255,.78); font-weight: 500; cursor: pointer; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); } .nav__item.is-active { background: linear-gradient(180deg, var(--green-700), var(--green-800)); /* #fff = 5.39:1 / 6.81:1 */ color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px -8px rgba(97,166,14,.55); } .nav__item.is-active::before { /* luminous rail — a half-round tab emerging from the sidebar edge */ content: ""; position: absolute; left: -16px; top: 50%; translate: 0 -50%; width: 3px; height: 22px; border-radius: 0 var(--radius-full) var(--radius-full) 0; background: linear-gradient(180deg, #8fd23f, var(--green)); box-shadow: 0 0 10px 1px rgba(97,166,14,.75); } .nav__item svg { width: 19px; height: 19px; flex: 0 0 19px; } .nav__chev { margin-left: auto; width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease-out); opacity: .8; } .nav__group.is-open > .nav__item .nav__chev { transform: rotate(90deg); } .nav__sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-3) var(--ease-out), visibility var(--dur-3); } .nav__group.is-open .nav__sub { grid-template-rows: 1fr; visibility: visible; } .nav__sub-inner { overflow: hidden; } .nav__subitem { display: block; padding: 9px 12px 9px 44px; margin-top: 2px; border-radius: var(--radius-s); color: rgba(255,255,255,.62); /* 6.34:1 on navy */ font-size: var(--text-ms); font-weight: 500; } .nav__subitem.is-active { color: #fff; background: rgba(97,166,14,.22); } /* keyboard focus ring for the shell's interactive controls */ .nav__item:focus-visible, .nav__subitem:focus-visible, .sidebar__close:focus-visible, .topbar__burger:focus-visible, .icon-btn:focus-visible, .btn:focus-visible, .pill:focus-visible, .acct:focus-visible, .modal__close:focus-visible, .pw-toggle:focus-visible, .th-sort:focus-visible, .menu__item:focus-visible, .skip-link:focus-visible, .table-wrap:focus-visible, .topbar__cta:focus-visible, .sidebar__user:focus-visible, .menu__mark:focus-visible, .sidebar__logout:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* green-on-green / green-on-navy rings are invisible — flip to white in the sidebar, and to --text on the dark bright-green CTA */ .sidebar .nav__item:focus-visible, .sidebar .nav__subitem:focus-visible, .sidebar__user:focus-visible, .sidebar__close:focus-visible, .sidebar__logout:focus-visible { outline-color: #fff; } [data-theme="dark"] .topbar__cta:focus-visible { outline-color: var(--text); } @media (hover: hover) and (pointer: fine) { .nav__item:hover { background: rgba(255,255,255,.07); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .nav__subitem:hover { background: rgba(255,255,255,.06); color: #fff; } .sidebar__logout:hover { background: rgba(255,255,255,.07); color: #fff; } .sidebar__user:hover { border-color: rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); } } .sidebar__foot { position: relative; margin-top: auto; padding-top: 16px; } .sidebar__foot::before { /* fading divider, echoes the leadform band hairline */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.20) 50%, transparent); /* .20 matches the top hairline's weight on the darker band */ } .sidebar__user { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-m); background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 20px -14px rgba(0,0,0,.6); transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); } .sidebar__avatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; background: linear-gradient(160deg, var(--green-700), var(--green-800)); color: #fff; /* both stops ≥5.39:1 w/ #fff */ font-weight: 700; font-size: var(--text-sm); display: flex; align-items: center; justify-content: center; } /* ring + lift only in the shell chrome — the class is also a plain monogram on light card surfaces (accounts table, edit-profile), where the halo would leak */ .sidebar .sidebar__avatar, .acct .sidebar__avatar, .menu__head .sidebar__avatar { box-shadow: 0 0 0 2px rgba(97,166,14,.28), 0 2px 6px rgba(0,0,0,.35); } .sidebar__user-meta { min-width: 0; } .sidebar__user-name { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar__user-role { font-size: var(--text-xs); margin-top: 1px; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ≈6.3:1 on navy; 13/11 stack mirrors the account-menu head */ /* Identity placeholders — shown between the shell mounting and /api/me hydrating it on a cold load (js: html.identity-pending, span.ident-skel). Each reserves its text box so the fill causes no layout shift. The general skeletons (.skel*) are tuned for light cards, so the navy chrome gets its own translucent tint; the topbar account name sits on the theme-colored bar and takes its hover tint. */ .ident-skel { display: inline-block; height: .72em; border-radius: var(--radius-full); vertical-align: middle; background: rgba(255,255,255,.16); } .topbar .ident-skel { background: var(--chrome-hover); } /* Pending avatars are neutral discs, not the branded green monogram. Tinted for their surface: translucent white on the always-navy sidebar, the theme chrome tint on the topbar (where translucent white would vanish on the light bar). */ .identity-pending .sidebar__avatar[data-ident-avatar] { background: rgba(255,255,255,.14); box-shadow: none; } .identity-pending .topbar .sidebar__avatar[data-ident-avatar] { background: var(--chrome-hover); } /* Footer utility link — a shrink-wrapped quiet pill, not a nav slab */ .sidebar__foot-links { margin-top: 8px; } .sidebar__logout { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-s); color: rgba(255,255,255,.62); /* ≈6.3:1 on navy */ font-size: var(--text-ms); font-weight: 500; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); } .sidebar__logout svg { width: 16px; height: 16px; flex: 0 0 16px; stroke-width: 1.75; } /* ---- Main ------------------------------------------------------------- */ .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: var(--topbar-h); flex: 0 0 var(--topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 24px; background: color-mix(in srgb, var(--surface) 85%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); position: sticky; top: 0; z-index: 20; view-transition-name: topbar; transition: box-shadow var(--dur-4) var(--ease-out); } /* Quiet chrome: the bottom edge is a gradient hairline that only appears once the page scrolls — at rest the bar dissolves into the page. */ .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(25,40,87,.04), rgba(25,40,87,.22) 30% 70%, rgba(25,40,87,.04)); opacity: 0; transition: opacity var(--dur-4) var(--ease-out); } .topbar.is-scrolled::after { opacity: 1; } .topbar.is-scrolled { box-shadow: var(--elev-1); } [data-theme="dark"] .topbar { box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } /* Dark Premium edge-light */ [data-theme="dark"] .topbar.is-scrolled { box-shadow: inset 0 1px 0 rgba(255,255,255,.04), var(--elev-1); } [data-theme="dark"] .topbar::after { background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.16) 30% 70%, rgba(255,255,255,.05)); } /* Glass fallback lives after the .menu rules — see the @supports block there. */ .topbar__burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px; flex: 0 0 auto; background: none; border: 0; border-radius: var(--radius-full); cursor: pointer; color: var(--text); transition: background-color var(--dur-2) var(--ease-out); } /* Animated hamburger -> X (keys off body.nav-open) */ .burger, .burger::before, .burger::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-2) var(--ease-out); } .burger { position: relative; } .burger::before, .burger::after { content: ""; position: absolute; left: 0; } .burger::before { top: -7px; } .burger::after { top: 7px; } body.nav-open .burger { background: transparent; } body.nav-open .burger::before { transform: translateY(7px) rotate(45deg); } body.nav-open .burger::after { transform: translateY(-7px) rotate(-45deg); } .topbar__title { font-size: var(--text-md); font-weight: 600; letter-spacing: -.012em; color: var(--text); } /* one weight below page h1 — wayfinding, not heading */ .topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; } .topbar__sep { width: 1px; height: 22px; margin: 0 10px 0 6px; flex: 0 0 1px; background: linear-gradient(180deg, transparent, var(--border) 30%, var(--border) 70%, transparent); } /* Primary task, one tap from anywhere — the leadform CTA's actual material. */ .topbar__cta { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px 0 12px; margin-right: 16px; border-radius: 9px; background: linear-gradient(180deg, var(--green) 0%, var(--green-700) 58%, var(--green-800) 100%); color: #fff; /* label centers on the green-700 band = 5.39:1 */ font: 700 var(--text-sm)/1 var(--font); white-space: nowrap; border: 1px solid var(--green-800); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 6px rgba(58,102,7,.30), 0 10px 20px -8px rgba(58,102,7,.5); transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out); } .topbar__cta svg { width: 16px; height: 16px; stroke-width: 2.25; } /* ~1.5px at 16px — matches the 700-weight label */ [data-theme="dark"] .topbar__cta { /* Dark Premium flip — matches the dark leadform CTA */ color: #0c1206; /* 6.4:1 on #61a60e, 9.3:1 on #7ec81a */ background: linear-gradient(180deg, #7ec81a, var(--green)); border-color: rgba(126,200,26,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px -8px rgba(97,166,14,.55); } /* Ghost icon buttons — no boxes; a soft round fill on hover/active. */ .icon-btn { width: 40px; height: 40px; border-radius: var(--radius-full); border: 0; background: transparent; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), scale var(--dur-1) var(--ease-out); } .icon-btn svg { width: 19px; height: 19px; } .icon-btn:active, .acct:active { scale: .95; } /* Icon stroke pass — one optical weight across the shell chrome (.topbar__cta svg carries its own heavier stroke to match its bold label) */ .nav__item svg, .icon-btn svg, .sidebar__close svg, .acct__chev svg { stroke-width: 1.75; } .menu__item svg { stroke-width: 1.9; } /* Account control — avatar-forward, quiet at rest, chevron flips when open. */ .acct { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; border-radius: var(--radius-full); border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur-2) var(--ease-out), scale var(--dur-1) var(--ease-out); } .acct .sidebar__avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size: var(--text-xs); } /* min-width reserves the identity slot so the cold-load skeleton and the hydrated name occupy the same width — the right-anchored topbar actions don't reflow. */ .acct__name { min-width: 66px; max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct__chev { display: inline-flex; color: var(--muted-2); transition: transform var(--dur-2) var(--ease-out); } .acct__chev svg { width: 16px; height: 16px; } .acct[aria-expanded="true"] .acct__chev { transform: rotate(180deg); } @media (hover: hover) and (pointer: fine) { .topbar__burger:hover { background: var(--chrome-hover); } .icon-btn:hover { color: var(--text); background: var(--chrome-hover); } .acct:hover { background: var(--chrome-hover); } .topbar__cta:hover { filter: brightness(1.04); transform: translateY(-1px); } [data-theme="dark"] .topbar__cta:hover { filter: brightness(1.05); background: linear-gradient(180deg, #7ec81a, var(--green)); } } /* after the hover rule so the press-down wins during a hovered press */ .topbar__cta:active { transform: translateY(0); } .icon-btn[aria-expanded="true"], .acct[aria-expanded="true"] { background: var(--chrome-hover); color: var(--text); } /* ---- Topbar menus (user menu + notifications) ------------------------- */ .notif, .usermenu { position: relative; display: inline-flex; align-items: center; } .notif__dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); pointer-events: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 90%, transparent); /* ring matches the glass, not a solid slab */ } .notif__badge { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-full); background: var(--danger); color: #fff; /* 6.57:1 light; dark ink-flips below */ font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 90%, transparent); animation: badge-pop var(--dur-3) var(--ease-out) .3s backwards; } /* dark --danger is a light coral (#ff6b6b) — white text fails there, flip the ink */ [data-theme="dark"] .notif__badge { color: var(--bg); } /* #0e1424 on #ff6b6b = 6.61:1 */ @keyframes badge-pop { from { scale: 0; } } .menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: max-content; min-width: 220px; max-width: 320px; padding: 6px; /* Solid fill: a dropdown holds content (account, links, sign out), so it must stay legible even where backdrop-filter is unsupported, weak, or nested under the topbar's own glass (mobile) — a translucent popover reads as broken. */ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,255,255,.55); transform-origin: top right; display: none; opacity: 0; translate: 0 -4px; scale: .98; transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out), scale var(--dur-2) var(--ease-out), display var(--dur-2) allow-discrete; } .menu.is-open { display: block; opacity: 1; translate: 0 0; scale: 1; } @starting-style { .menu.is-open { opacity: 0; translate: 0 -4px; scale: .98; } } @media (max-width: 640px) { .menu { width: auto; } /* shrink-to-fit can overflow tiny viewports */ } [data-theme="dark"] .menu { box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,255,255,.07); } /* Browsers missing backdrop-filter or color-mix() get the solid surface. Must sit AFTER the .topbar/.menu base rules — @supports adds no specificity, so source order decides which background wins. (A same-rule fallback pair wouldn't work: color-mix(var(--surface)…) parses as valid and only fails at computed-value time, dropping background to transparent, not the fallback.) */ @supports (not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))) or (not (background: color-mix(in srgb, red 50%, blue))) { .topbar, .menu { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } } .menu__titlebar { display: flex; align-items: baseline; justify-content: space-between; padding-right: 6px; } .menu__title { padding: 8px 12px 6px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .menu__mark { background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: var(--radius-s); font: 600 var(--text-xs)/1 var(--font); color: var(--green-ink); /* 5.39:1 light / 5.56:1 dark */ } .menu--acct { min-width: 236px; } .menu__head { display: flex; align-items: center; gap: 11px; padding: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .menu__head .sidebar__avatar { width: 38px; height: 38px; flex: 0 0 38px; } .menu__head-meta { min-width: 0; } .menu__head-name { font-size: var(--text-sm); font-weight: 700; color: var(--text); } .menu__head-mail { font-size: var(--text-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu__head-role { margin-top: 3px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em; color: var(--muted); } .menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: var(--radius-s); background: none; border: 0; cursor: pointer; text-align: left; color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 500; } .menu__item svg { width: 16px; height: 16px; color: var(--muted); flex: 0 0 16px; } .menu__item small { display: block; color: var(--muted); font-weight: 400; font-size: var(--text-xs); } .menu__item.is-unread { font-weight: 600; } /* notification rows: one shared 27px rail so read rows, wrapped lines, and timestamps all align; the unread dot sits absolutely on the rail */ .menu__notif { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; position: relative; padding-left: 27px; } .menu__notif-when { color: var(--muted); font-weight: 400; font-size: var(--text-xs); font-variant-numeric: tabular-nums; } /* unread is weight + dot, never color alone; --green-ink is theme-adaptive (#457708 = 5.35:1 on the light glass, #61a60e = 5.56:1 on the dark surface) */ .menu__notif.is-unread .menu__notif-text::before { content: ""; position: absolute; left: 12px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--green-ink); box-shadow: 0 0 0 3px rgba(97,166,14,.18); } .menu__empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; gap: 6px; color: var(--muted); } .menu__empty-state svg { width: 28px; height: 28px; color: var(--muted-2); } .menu__empty-state b { color: var(--text); font-size: var(--text-sm); } .menu__empty-state span { color: var(--muted); font-size: var(--text-sm); } /* 5.6:1 on surface */ /* destructive action sits apart via a real separator, so its hover stays a normal rounded slab instead of a flat-topped rectangle */ .menu__sep { height: 1px; margin: 6px 0; background: var(--border); } @media (hover: hover) and (pointer: fine) { .menu__item:hover { background: var(--chrome-hover); } .menu__mark:hover { text-decoration: underline; } } .content { padding: 30px; flex: 1; container-type: inline-size; } .page-head { margin-bottom: 24px; } .page-head h1 { font-size: var(--text-xl); } .page-head p { margin: 6px 0 0; color: var(--muted); } .eyebrow { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } /* ---- Cards & KPI ------------------------------------------------------ */ .card { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-card); padding: 22px; position: relative; } /* Dark mode: --surface barely clears --bg (1.10:1) and the drop shadow is invisible on the near-black page, so give elevated panels a real edge. */ [data-theme="dark"] .card, [data-theme="dark"] .table-wrap { border: 1px solid var(--border); } /* --border is a divider tone (1.82:1); interactive controls need a 3:1 edge (WCAG 1.4.11) or empty inputs vanish. --muted-2 clears it: 3.0:1 on the surface-2 field fill, 3.7:1 on the card — and it's already the hover tone. */ [data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea, [data-theme="dark"] .search, [data-theme="dark"] .pill, [data-theme="dark"] .btn--ghost { border-color: var(--muted-2); } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 24px; } .stat { display: flex; flex-direction: column; gap: 8px; } .stat__top { display: flex; align-items: center; justify-content: space-between; } .stat__icon { width: 40px; height: 40px; border-radius: var(--radius-m); display: flex; align-items: center; justify-content: center; } .stat__icon svg { width: 20px; height: 20px; } .stat__val { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.02em; line-height: 1; } .stat__label { color: var(--muted); font-size: var(--text-sm); font-weight: 500; } .stat__delta { font-size: var(--text-xs); font-weight: 600; color: var(--muted); } .tint-green { background: var(--green-soft); color: var(--green-700); } .tint-blue { background: var(--stage-set-bg); color: var(--stage-set-fg); } .tint-amber { background: var(--stage-follow-bg); color: var(--stage-follow-fg); } .tint-violet { background: var(--stage-agree-bg); color: var(--stage-agree-fg); } [data-theme="dark"] .tint-green { background: #16290f; color: #9fd980; } /* 9.36:1 */ .up { color: var(--green-ink); } .down { color: var(--danger); } /* ---- Toolbar / filters ------------------------------------------------ */ /* Search + product-filter rail for My Leads. Matches the New Lead form's "Layered Navy Depth" language: inset-lit surfaces, a green focus glow, and filter chips that saturate to each product's hue when active (reusing the --product-* dots so the filter color-matches the table). Reflow follows the .content container width, so it adapts whether the sidebar is docked or drawered. */ .toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } /* --- Search field --- */ .search { position: relative; display: flex; align-items: center; gap: 10px; flex: 1 1 280px; min-width: 200px; max-width: 460px; padding: 10px 16px; min-height: 44px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--border); border-radius: var(--radius-full); box-shadow: 0 1px 2px rgba(19,31,67,.05), 0 1px 0 rgba(255,255,255,.9) inset; transition: border-color .16s, box-shadow .16s, background .16s; } .search:focus-within { border-color: var(--green-700); background: var(--surface); box-shadow: 0 0 0 3px rgba(69,119,8,.16), 0 1px 2px rgba(19,31,67,.05), 0 1px 0 rgba(255,255,255,.9) inset; } .search__icon { flex: 0 0 auto; display: inline-flex; color: var(--muted-2); transition: color .16s; } .search__icon svg { width: 17px; height: 17px; } .search:focus-within .search__icon { color: var(--green-700); } /* icon tracks the green ring */ .search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; } .search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* custom clear below */ /* clear (×) — shown only when the field has text */ .search__clear { flex: 0 0 auto; display: none; align-items: center; justify-content: center; width: 26px; height: 26px; margin: -4px -6px -4px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted-2); cursor: pointer; transition: color .15s, background .15s; } .search__clear svg { width: 15px; height: 15px; } .search.is-filled .search__clear { display: inline-flex; } .search__clear:hover { color: var(--text); background: color-mix(in srgb, var(--muted) 16%, transparent); } .search__clear:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* "/" hint — desktop pointer only, hidden once typing starts (clear takes its slot) */ .search__kbd { flex: 0 0 auto; display: none; font: 600 var(--text-xs)/1 var(--font); color: var(--muted); /* 5.48:1 on the field */ padding: 3px 7px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); box-shadow: 0 1px 0 rgba(19,31,67,.04); } @media (hover: hover) and (pointer: fine) { .search:not(.is-filled) .search__kbd { display: inline-flex; } } /* --- Filter pills --- */ /* min-height reserves the row so injecting the JS-rendered pills after /api/leads resolves causes no layout shift (the table below never jumps). */ .pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 40px; } .pill { --phue: var(--navy); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 9px 14px; border-radius: var(--radius-full); border: 1px solid var(--border); color: var(--muted); /* 5.48:1 rest label */ font-size: var(--text-sm); font-weight: 600; cursor: pointer; background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: 0 1px 2px rgba(19,31,67,.05), 0 1px 0 rgba(255,255,255,.8) inset; transition: color .15s, border-color .15s, background .15s, box-shadow .15s, transform .12s; } .pill .product-dot { flex: 0 0 8px; transition: box-shadow .15s; } .pill .product-dot.all { /* "All Products" → a blend of the three product hues */ background: conic-gradient(from 210deg, var(--product-time), var(--product-parts), var(--product-labor), var(--product-time)); } .pill__count { display: inline-flex; align-items: center; justify-content: center; font: 700 var(--text-xs)/1 var(--font); font-variant-numeric: tabular-nums; min-width: 18px; padding: 3px 6px; border-radius: var(--radius-full); color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); } /* the count pulses when its value changes (JS toggles .is-bump), signalling the chips are a live readout of the current search. Neutralised under reduced motion both by the JS guard and the global transition/animation reset. */ @keyframes pill-count-bump { 0% { transform: scale(1); } 42% { transform: scale(1.22); } 100% { transform: scale(1); } } .pill__count.is-bump { animation: pill-count-bump .26s var(--ease-out); } /* zero matches for the current search → mute the dot + count (never hide: stays legible and clickable). Active pill keeps its selected styling even at zero. */ .pill--empty:not([aria-pressed="true"]) { color: var(--muted); } .pill--empty:not([aria-pressed="true"]) .product-dot, .pill--empty:not([aria-pressed="true"]) .product-dot.all { background: var(--muted-2); box-shadow: none; } .pill--empty:not([aria-pressed="true"]) .pill__count { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); } /* active product pills saturate to their hue (label stays theme-ink → always AA); the "All" master filter has no hue, so it gets a strong solid-navy treatment. */ .pill[aria-pressed="true"] { color: var(--text); font-weight: 700; border-color: color-mix(in srgb, var(--phue) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--phue) 13%, var(--surface)), color-mix(in srgb, var(--phue) 22%, var(--surface))); box-shadow: 0 0 0 1px color-mix(in srgb, var(--phue) 30%, transparent), 0 6px 15px -8px color-mix(in srgb, var(--phue) 55%, transparent), 0 1px 0 rgba(255,255,255,.7) inset; } .pill[aria-pressed="true"] .product-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--phue) 16%, transparent), 0 0 8px color-mix(in srgb, var(--phue) 55%, transparent); } .pill[aria-pressed="true"] .pill__count { color: var(--text); background: color-mix(in srgb, var(--phue) 22%, transparent); } .pill--time { --phue: var(--product-time); } .pill--parts { --phue: var(--product-parts); } .pill--labor { --phue: var(--product-labor); } .pill--all[aria-pressed="true"] { color: #fff; border-color: var(--navy); /* #fff on navy = 14.6:1 */ background: linear-gradient(180deg, #22336e, var(--navy) 58%, var(--navy-800)); box-shadow: 0 6px 16px -7px rgba(19,31,67,.55), 0 1px 0 rgba(255,255,255,.14) inset; } .pill--all[aria-pressed="true"] .product-dot.all { box-shadow: 0 0 0 2px rgba(255,255,255,.28); } .pill--all[aria-pressed="true"] .pill__count { color: #fff; background: rgba(255,255,255,.18); } .pill:active { transform: translateY(0) scale(.985); } .result-count { color: var(--muted); font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; } /* --- Mobile sort picker --- */ /* Column-header sorting is unreachable once the thead is hidden (<=640px), so the same sortKey/sortDir state is surfaced as a compact native select in the toolbar. Native picker = accessible + OS wheel, no custom focus trap. Hidden on desktop, where the headers do the sorting (see the <=640 block). */ .sortpick { display: none; position: relative; align-items: center; gap: 7px; padding: 0 12px; min-height: 40px; border: 1px solid var(--border); border-radius: var(--radius-full); background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: 0 1px 2px rgba(19,31,67,.05), 0 1px 0 rgba(255,255,255,.8) inset; transition: border-color .16s, box-shadow .16s; } .sortpick__icon { flex: 0 0 auto; display: inline-flex; color: var(--muted-2); transition: color .16s; } .sortpick__icon svg { width: 16px; height: 16px; } .sortpick__label { font-size: var(--text-sm); font-weight: 600; color: var(--muted); white-space: nowrap; } .sortpick__chev { flex: 0 0 auto; display: inline-flex; color: var(--muted-2); margin-left: -2px; } .sortpick__chev svg { width: 15px; height: 15px; } /* the accessible control is a transparent native