/* ============================================================ N8tive Project Manager — design-token theme layer Loaded AFTER style.css and mobile.css on every page. 2026-09-07: Ploy design format (suite-wide pass). This app's accent is BLUE (--ploy-blue). The token NAMES below are the suite's existing system (Portal parity) — only their VALUES move to the Ploy language, so every rule that consumed the old dark-OKLCH tokens now resolves to the Ploy light theme: - Canvas: warm light gray (--ploy-bg), cards white. - Ink near-black text, gray secondary. - Display face: Anton (uppercase, tight leading). Body: Inter. - Radii: 24px blocks, 16px cards, pill buttons. - Primary CTAs are BLACK pills; blue is the accent sweep (active states, chips, focus, the Quick Stats color block). No markup class/id that JS hooks onto is renamed here. ============================================================ */ /* Fonts (Anton + Inter) are linked from index.html with preconnect + display=swap; an @import here chained a second blocking request behind this sheet. */ :root { /* ---- Ploy palette (spec tokens) ---- */ --ploy-bg: #F2F1EE; /* warm light-gray page canvas */ --ploy-ink: #111111; /* near-black text */ --ploy-gray: #6B6B6B; /* secondary text */ --ploy-card: #FFFFFF; /* card surface */ --ploy-dark: #1B1B1B; /* dark blocks + footer */ --ploy-yellow: #F5F542; --ploy-pink: #F09EE4; --ploy-pink-2: #FDCDEF; --ploy-green: #B7E455; --ploy-blue: #AFC8F0; /* THIS APP'S ACCENT */ --radius-block: 24px; --radius-card: 16px; --radius-pill: 999px; /* ---- suite tokens, remapped onto the Ploy palette ---- */ --bg: var(--ploy-bg); --bg-translucent: rgba(242, 241, 238, 0.85); --scrim: rgba(17, 17, 17, 0.45); --surface: var(--ploy-card); --surface-2: #F7F6F3; --surface-glass: rgba(255, 255, 255, 0.72); --text: var(--ploy-ink); --muted: var(--ploy-gray); --faint: #97938B; --border: #E4E2DC; --border-strong: #D3D0C8; /* interactive blue: same hue family as --ploy-blue, darkened for AA contrast as text/fill on white; the pastel itself is used for blocks, tints, and glows */ --accent: #3A66C2; --accent-bright: #2E529F; --accent-deep: #24407E; --accent-fg: #FFFFFF; --accent-soft: rgba(175, 200, 240, 0.32); --accent-soft-2: rgba(175, 200, 240, 0.55); --accent-line: rgba(58, 102, 194, 0.35); --accent-glow: rgba(175, 200, 240, 0.65); --ink-hover: #2E2E2E; /* the Ploy BLACK pill (CTAs, active nav). Inverts to a white pill in dark. */ --ink-fill: var(--ploy-ink); --ink-fill-2: var(--ploy-dark); --ink-fill-hover: var(--ink-hover); --ok: #4E7A15; /* readable kin of --ploy-green */ --ok-soft: rgba(183, 228, 85, 0.28); --ok-line: rgba(122, 168, 44, 0.55); --danger: #D33A2C; --danger-soft: rgba(211, 58, 44, 0.10); --danger-line: rgba(211, 58, 44, 0.45); --warn: #8A6D00; /* readable kin of --ploy-yellow */ --warn-soft: rgba(245, 245, 66, 0.30); --shadow-ink: rgba(17, 17, 17, 0.08); --shadow-md: rgba(17, 17, 17, 0.12); --shadow-lg: rgba(17, 17, 17, 0.16); --shadow-xl: rgba(17, 17, 17, 0.18); --canvas-veil: rgba(242, 241, 238, 0.65); --accent-glow-soft: rgba(175, 200, 240, 0.28); /* --ploy-dark blocks (footer): fixed dark block on the light canvas */ --block-dark: var(--ploy-dark); --block-dark-text: #A3A3A3; --block-dark-muted: #8A8A8A; --block-dark-link: #FFFFFF; /* ---- type tokens ---- */ --font-body: 'Inter', system-ui, sans-serif; --font-display: 'Anton', 'Inter', system-ui, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, monospace; --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; --fs-48: 48px; /* ---- spacing tokens (4px grid) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; /* ---- shape (mapped onto Ploy radii) ---- */ --radius-sm: 8px; --radius-md: var(--radius-card); --radius-lg: var(--radius-block); /* ---- cinematic tokens (2026-09-15) — INERT in light so light-mode output is unchanged; `.dark` below gives them real values. The cube logo reads --accent-lum in both modes (= the Ploy pastel here). ---- */ --accent-lum: var(--ploy-blue); --glow: transparent; --glow-faint: transparent; --ground-grid: transparent; --ground-bloom: transparent; color-scheme: light; } /* ============================================================ Dark mode IS the cinematic mode (2026-09-15 cinematic pass). Light stays Ploy; the theme choice switches between a calm print-like workspace and a HUD in the JARVIS "engineered luminosity" language: deep-space ground (hue 250), glass header, ONE accent glow (--glow, derived from --accent-lum), accent-tinted hairlines, tabular readouts. Toggled by `.dark` on (components/theme.js + the inline pre-paint snippet in index.html ; key localStorage['n8tive-theme'], absent = follow the system). Only token VALUES change here — every rule in this sheet keeps reading the same names. Contrast (WCAG AA, checked per pair): --text/--muted on --bg ≈16:1 / ≈7:1; --faint on --surface-2 ≈4.6:1 (L 0.64 — the addendum's 0.6 fell to ≈3.4:1 on the raised surface); ink --accent-fg on the --accent pastel ≈11:1; on --ok / --danger / --warn fills ≥6:1. ============================================================ */ .dark { color-scheme: dark; --bg: oklch(0.13 0.02 250); /* deep space, not warm gray */ --bg-translucent: oklch(0.13 0.02 250 / 0.85); --scrim: oklch(0.08 0.02 250 / 0.7); --surface: oklch(0.18 0.02 250); /* solid panel (cards, columns, modals) */ --surface-2: oklch(0.22 0.02 250); /* raised */ /* glass: the ONE blurred layer (the sticky header) — solid fallback below via @supports not */ --surface-glass: color-mix(in oklch, oklch(0.18 0.02 250) 78%, transparent); --text: oklch(0.95 0.005 250); --muted: oklch(0.72 0.01 250); --faint: oklch(0.64 0.01 250); /* the app's Ploy accent hue (blue) is unchanged: buttons keep ink on the pastel. --accent-lum is the same hue, hotter, for glow + linework ONLY — never a fill behind text. */ --accent: var(--ploy-blue); --accent-lum: oklch(0.8 0.12 262); --accent-bright: oklch(0.89 0.05 262); --accent-deep: oklch(0.75 0.09 262); --accent-fg: oklch(0.13 0.02 250); /* accent-tinted hairlines */ --border: color-mix(in oklch, var(--accent-lum) 18%, oklch(0.3 0.02 250)); --border-strong: color-mix(in oklch, var(--accent-lum) 24%, oklch(0.38 0.02 250)); /* the one glow: shadows, focus rings, active states */ --glow: color-mix(in oklch, var(--accent-lum) 55%, transparent); --glow-faint: color-mix(in oklch, var(--accent-lum) 22%, transparent); --accent-glow: var(--glow); --accent-glow-soft: var(--glow-faint); --accent-soft: color-mix(in oklch, var(--accent-lum) 14%, transparent); --accent-soft-2: color-mix(in oklch, var(--accent-lum) 26%, transparent); --accent-line: color-mix(in oklch, var(--accent-lum) 40%, transparent); /* ground: one grid + one bloom (CSS gradients on body, no images) */ --ground-grid: color-mix(in oklch, var(--border) 30%, transparent); --ground-bloom: color-mix(in oklch, var(--accent-lum) 6%, transparent); /* black pills become white pills */ --ink-fill: oklch(0.95 0.005 250); --ink-fill-2: oklch(0.90 0.005 250); --ink-fill-hover: oklch(0.86 0.01 250); /* status: L raised so they clear AA on dark surfaces */ --ok: oklch(0.78 0.16 130); --ok-soft: oklch(0.78 0.16 130 / 0.16); --ok-line: oklch(0.78 0.16 130 / 0.45); --danger: oklch(0.72 0.17 27); --danger-soft: oklch(0.72 0.17 27 / 0.18); --danger-line: oklch(0.72 0.17 27 / 0.5); --warn: oklch(0.85 0.15 95); --warn-soft: oklch(0.85 0.15 95 / 0.14); --shadow-ink: oklch(0 0 0 / 0.5); --shadow-md: oklch(0 0 0 / 0.55); --shadow-lg: oklch(0 0 0 / 0.6); --shadow-xl: oklch(0 0 0 / 0.7); --canvas-veil: oklch(0.13 0.02 250 / 0.65); /* --ploy-dark blocks (footer) sit on --surface-2 so they still separate from the canvas */ --block-dark: var(--surface-2); --block-dark-text: var(--muted); --block-dark-muted: var(--faint); --block-dark-link: var(--text); } /* Browsers without color-mix(): the same values, pre-mixed. */ @supports not (color: color-mix(in oklch, red, blue)) { .dark { --surface-glass: oklch(0.18 0.02 250); --border: oklch(0.39 0.04 252); --border-strong: oklch(0.48 0.045 254); --glow: oklch(0.8 0.12 262 / 0.55); --glow-faint: oklch(0.8 0.12 262 / 0.22); --accent-soft: oklch(0.8 0.12 262 / 0.14); --accent-soft-2: oklch(0.8 0.12 262 / 0.26); --accent-line: oklch(0.8 0.12 262 / 0.4); --ground-grid: oklch(0.39 0.04 252 / 0.3); --ground-bloom: oklch(0.8 0.12 262 / 0.06); } } /* ---------- Base canvas (light + legacy dark markup both resolve to the Ploy canvas; the dark-mode JS toggle keeps working, both states land here) */ html, body, body.bg-gray-50, .dark body, body.dark\:bg-gray-900 { background-color: var(--bg) !important; color: var(--text) !important; font-family: var(--font-body); font-size: var(--fs-16); line-height: 1.5; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent-soft-2); color: var(--text); } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* the board's own scroller (style.css paints it purple) joins the system */ .kanban-board-container::-webkit-scrollbar-track, .dark .kanban-board-container::-webkit-scrollbar-track { background: transparent !important; } .kanban-board-container::-webkit-scrollbar-thumb, .dark .kanban-board-container::-webkit-scrollbar-thumb { background: var(--border-strong) !important; border-color: var(--bg) !important; } .kanban-board-container::-webkit-scrollbar-thumb:hover, .dark .kanban-board-container::-webkit-scrollbar-thumb:hover { background: var(--accent) !important; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---------- Typography ---------- The Tailwind CDN reset (injected at runtime, after this sheet) sets h1-h6 { font-size: inherit }, so heading treatments stay class-safe. Ploy display voice: Anton, UPPERCASE, tight leading. Anton ships one weight — pin 400 so utility bold classes don't synthesize faux-bold. */ h1, h2, h3 { font-family: var(--font-display); font-weight: 400 !important; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.1; } h4, h5, h6 { font-family: var(--font-body); } /* mono micro-label (the suite's signature device, shared with the Portal) */ .sui-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-pill); } .sui-eyebrow::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px 2px var(--accent-glow); } /* ---------- Splash screen: warm canvas, pastel-blue veil ---------- */ #splashScreen { background: var(--bg) !important; background-image: radial-gradient(120% 80% at 50% -10%, var(--accent-soft-2), transparent 60%) !important; } .particle { background: radial-gradient(circle, var(--accent-glow), var(--accent-soft)) !important; } /* ---------- Surfaces: every gray/white panel maps to token surfaces ---------- */ /* solid mid-grays (bulk-action buttons, priority dots) -> muted fill; light grays (Cancel) -> raised surface. Both precede bg-white on purpose. */ [class*="bg-gray-500"], [class*="bg-gray-600"] { background-color: var(--muted) !important; } [class*="bg-gray-3"], [class*="bg-gray-4"] { background-color: var(--surface-2) !important; } [class*="bg-white"] { background-color: var(--surface) !important; } [class~="bg-gray-50"], [class~="hover:bg-gray-50"], [class*="bg-gray-50/"], [class*="bg-gray-100"], [class*="bg-gray-200"] { background-color: var(--surface-2) !important; } [class*="bg-gray-7"] { background-color: var(--surface-2) !important; } [class*="bg-gray-8"], [class*="bg-gray-9"] { background-color: var(--surface) !important; } [class*="hover:bg-gray-"]:hover { background-color: var(--surface-2) !important; } /* borders: all grays become the one hairline */ [class*="border-gray-"] { border-color: var(--border) !important; } [class*="divide-gray-"] > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; } /* text: light-mode inks and dark-mode inks both resolve to token text */ [class*="text-gray-9"], [class*="text-gray-8"], [class*="text-gray-7"], [class*="text-gray-2"], [class*="text-gray-3"], [class*="text-gray-1"] { color: var(--text) !important; } [class*="text-gray-6"], [class*="text-gray-4"] { color: var(--muted) !important; } [class*="text-gray-5"] { color: var(--faint) !important; } [class*="hover:text-gray-"]:hover { color: var(--text) !important; } [class~="text-white"] { color: var(--accent-fg) !important; } /* ---------- Accent split (Ploy): purple legacy = BLACK pill CTAs, blue = the app's accent sweep ---------- */ [class*="bg-purple-6"], [class*="bg-purple-7"], [class*="bg-purple-500"], [class*="bg-primary"] { background-color: var(--ink-fill) !important; color: var(--accent-fg) !important; } [class*="hover:bg-purple-"]:hover { background-color: var(--ink-fill-hover) !important; color: var(--accent-fg) !important; } button[class*="bg-purple-6"], button[class*="bg-purple-7"], button[class*="bg-primary"] { border-radius: var(--radius-pill) !important; } [class*="bg-blue-6"], [class*="bg-blue-500"], [class*="bg-blue-7"] { background-color: var(--accent) !important; color: var(--accent-fg) !important; } [class*="hover:bg-blue-"]:hover { background-color: var(--accent-bright) !important; color: var(--accent-fg) !important; } /* soft chips / tinted wells */ [class*="bg-purple-1"], [class*="bg-purple-2"], [class~="bg-purple-50"], [class~="hover:bg-purple-50"], [class*="bg-purple-9"], [class*="bg-blue-1"], [class*="bg-blue-2"], [class~="bg-blue-50"], [class*="bg-blue-9"], [class*="bg-indigo-1"], [class*="bg-indigo-9"] { background-color: var(--accent-soft) !important; color: var(--accent-bright) !important; } [class*="text-purple-"], [class*="text-blue-"], [class*="text-indigo-"], [class*="text-primary"] { color: var(--accent) !important; } [class*="border-purple-"], [class*="border-blue-"], [class*="border-indigo-"] { border-color: var(--accent-line) !important; } [class*="ring-purple-"], [class*="ring-blue-"] { --tw-ring-color: var(--accent) !important; } /* gradients: strong CTA gradients -> flat BLACK pill sweep (Ploy primary); soft-tint gradients -> pastel-blue wash */ [class*="from-purple-6"], [class*="from-purple-7"], [class*="from-purple-500"], [class*="from-blue-6"], [class*="from-blue-500"], [class*="from-red-500"], [class*="from-indigo-6"], [class*="from-gray-9"], [class*="from-gray-8"], [class*="from-gray-4"] { --tw-gradient-from: var(--ink-fill) var(--tw-gradient-from-position) !important; --tw-gradient-to: var(--ink-fill-2) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } [class*="to-purple-6"], [class*="to-purple-7"], [class*="to-blue-6"], [class*="to-blue-500"], [class*="to-blue-7"], [class*="to-indigo-6"], [class*="to-cyan-500"], [class*="to-gray-6"] { --tw-gradient-to: var(--ink-fill-2) var(--tw-gradient-to-position) !important; } button[class*="from-purple-6"], button[class*="from-blue-6"] { border-radius: var(--radius-pill) !important; } [class*="from-purple-1"], [class~="from-purple-50"], [class*="from-purple-9"], [class*="from-blue-1"], [class~="from-blue-50"], [class*="from-blue-9"], [class*="from-indigo-1"] { --tw-gradient-from: var(--accent-soft) var(--tw-gradient-from-position) !important; --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } [class*="via-purple-"] { --tw-gradient-stops: var(--tw-gradient-from), var(--accent-soft), var(--tw-gradient-to) !important; } [class*="to-purple-1"], [class~="to-purple-50"], [class*="to-blue-1"], [class~="to-blue-50"], [class*="to-blue-9"], [class*="to-purple-9"], [class*="to-indigo-9"] { --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; } /* ---------- Status semantics: one token per meaning ---------- */ [class*="bg-green-9"], [class*="bg-green-1"], [class~="bg-green-50"] { background-color: var(--ok-soft) !important; color: var(--ok) !important; } [class*="bg-green-500"], [class*="bg-green-6"] { background-color: var(--ok) !important; color: var(--accent-fg) !important; } [class*="hover:bg-green-"]:hover { background-color: var(--ok) !important; color: var(--accent-fg) !important; } [class*="text-green-"] { color: var(--ok) !important; } [class*="border-green-"] { border-color: var(--ok-line) !important; } [class*="bg-red-9"], [class*="bg-red-1"], [class~="bg-red-50"], [class~="hover:bg-red-50"] { background-color: var(--danger-soft) !important; color: var(--danger) !important; } [class*="bg-red-500"], [class*="bg-red-6"], [class*="bg-red-7"] { background-color: var(--danger) !important; color: var(--accent-fg) !important; } [class*="hover:bg-red-"]:hover { background-color: var(--danger) !important; color: var(--accent-fg) !important; } [class*="text-red-"] { color: var(--danger) !important; } [class*="border-red-"] { border-color: var(--danger-line) !important; } [class*="bg-yellow-9"], [class*="bg-yellow-1"], [class~="bg-yellow-50"], [class*="bg-amber-1"], [class*="bg-amber-9"] { background-color: var(--warn-soft) !important; color: var(--warn) !important; } [class*="text-yellow-"], [class*="text-amber-"] { color: var(--warn) !important; } [class*="bg-yellow-500"], [class*="bg-yellow-6"] { background-color: var(--warn) !important; color: var(--accent-fg) !important; } /* ---------- Glass morphism -> flat white Ploy cards ---------- */ .glass-card, .dark .glass-card, .glass-frosted, .dark .glass-frosted, .glass-panel, .dark .glass-panel, .glass-gradient-bg { background: var(--surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--border) !important; box-shadow: 0 8px 24px var(--shadow-ink) !important; } /* modal scrims stay dark ink over the light canvas */ [class*="bg-black"] { background-color: var(--scrim) !important; } /* ---------- Forms ---------- */ input, select, textarea { background-color: var(--surface) !important; border-color: var(--border-strong) !important; color: var(--text) !important; } input::placeholder, textarea::placeholder { color: var(--faint) !important; } input:hover, select:hover, textarea:hover { border-color: var(--muted) !important; } input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; --tw-ring-color: var(--accent) !important; } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ Chrome refinements (kept from the modernization passes, re-grounded in the Ploy palette) ============================================================ */ /* Splash: the old purple gradient hardware resolves to the one hue. The logo itself is the red tiger image, so it keeps its own red glow (style.css). */ .splash-glow { background: radial-gradient(circle, var(--accent-soft-2), transparent 70%); } .splash-title { font-family: var(--font-display); background: linear-gradient(135deg, var(--text) 55%, var(--accent)); -webkit-background-clip: text; background-clip: text; } .splash-subtitle { color: var(--muted); } .splash-loader { background: var(--accent-soft); } .splash-loader-bar { background: linear-gradient(90deg, var(--accent), var(--ploy-blue)); box-shadow: 0 0 10px var(--accent-glow); } .splash-ring, .splash-ring-2 { border-color: var(--accent-line) !important; } /* Header: Ploy floating white bar — inset from the edges, rounded, hairline + soft shadow, sticks 8px from the top */ #mainContent > header { background: var(--surface) !important; margin: 12px 12px 0; border: 1px solid var(--border); border-radius: var(--radius-block); box-shadow: 0 2px 12px var(--shadow-ink) !important; top: 8px !important; } #mainContent > header h2 { font-size: var(--fs-20); } /* legacy frosted variant (portal parity) folds into the same bar */ header.glass-frosted { background: var(--surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--border) !important; box-shadow: 0 2px 12px var(--shadow-ink) !important; } /* Cards: quiet at rest, lift on interaction */ .glass-card, .dark .glass-card { box-shadow: 0 1px 2px var(--shadow-ink) !important; border-radius: var(--radius-md); } .glass-panel { box-shadow: 0 16px 48px var(--shadow-lg) !important; } /* Kanban columns: white rounded cards on the warm-gray canvas (Ploy) */ .kanban-column > div { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-block) !important; box-shadow: 0 1px 2px var(--shadow-ink) !important; } .kanban-column [data-count] { font-family: var(--font-mono); font-size: var(--fs-12); background: var(--accent-soft) !important; color: var(--accent-bright) !important; border-radius: var(--radius-pill); } /* Task cards: white cards, hairline, the one hover moment on the board. (.task-card is the class the board actually renders — the old [data-task-id] hook never matched, kept only for queued PRs that add it.) */ .task-card, [data-task-id] { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-card) !important; box-shadow: 0 1px 2px var(--shadow-ink) !important; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .task-card:hover, [data-task-id]:hover { transform: translateY(-2px); border-color: var(--accent-line) !important; box-shadow: 0 8px 24px var(--shadow-md) !important; } .task-card.dragging, .task-card[draggable="true"]:active, [data-task-id].dragging, [data-task-id][draggable="true"]:active { border-color: var(--accent) !important; } /* Quick stats: numbers read as data (Anton display) */ #quickStatTotal, #quickStatActive, #quickStatDone, #quickStatRate { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; } /* ---------- Notification center ---------- */ .notif-badge { background: var(--danger); color: var(--accent-fg); box-shadow: 0 0 0 2px var(--surface); } .notif-item { border-bottom: 1px solid var(--border); transition: background 0.15s ease; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--surface-2); } .notif-item i { color: var(--muted); } .notif-unread { background: var(--accent-soft); } .notif-unread i { color: var(--accent); } .notif-read { opacity: 0.75; } /* ============================================================ Sidebar rail — quiet rail sharing the warm canvas, hairline divider, soft blue pill active state ============================================================ */ .sui-sidebar { background: var(--bg) !important; border-right: 1px solid var(--border); box-shadow: none !important; } .sui-wordmark { font-family: var(--font-body); font-size: var(--fs-16); font-weight: 700; letter-spacing: -0.01em; text-transform: lowercase; color: var(--text) !important; } /* Section labels: tiny mono eyebrows, no pill */ .sui-rail-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding: 0 var(--sp-3); margin-bottom: var(--sp-2); } /* Nav + filter items: quiet at rest, surface on hover, blue pill active */ .sui-sidebar .nav-btn, .sui-sidebar .filter-btn { color: var(--muted) !important; background: transparent !important; border: none !important; box-shadow: none !important; font-size: var(--fs-14); border-radius: var(--radius-pill) !important; } .sui-sidebar .nav-btn:hover, .sui-sidebar .filter-btn:hover { background: var(--surface-2) !important; color: var(--text) !important; transform: none !important; backdrop-filter: none !important; } .sui-sidebar .nav-btn.bg-purple-600, .sui-sidebar .filter-btn.bg-purple-600, .sui-sidebar .filter-btn[class*="bg-purple-1"] { background: var(--accent-soft) !important; color: var(--accent-bright) !important; box-shadow: none !important; border: none !important; } .sui-sidebar .nav-btn i, .sui-sidebar .filter-btn i, .sui-sidebar .nav-btn svg, .sui-sidebar .filter-btn svg { width: 16px !important; height: 16px !important; } /* Footer: hairline top, compact stat chips */ .sui-rail-footer { border-top: 1px solid var(--border); } .sui-stat-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); } .sui-stat-num { font-family: var(--font-display); font-size: var(--fs-20); font-weight: 400; line-height: 1.1; color: var(--accent-bright); } .sui-stat-chip-ok .sui-stat-num { color: var(--ok); } .sui-stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); } /* Collapsed rail (64px): stacked header, centered icon buttons */ .sui-sidebar.sidebar-collapsed .sui-rail-header { flex-direction: column; align-items: center; gap: var(--sp-2); padding-left: var(--sp-2); padding-right: var(--sp-2); } .sui-sidebar.sidebar-collapsed .sui-rail-label { display: none; } .sui-sidebar.sidebar-collapsed .nav-btn, .sui-sidebar.sidebar-collapsed .filter-btn { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; } /* Kanban drop target: pastel-blue wash, dashed blue line */ .drag-over { background-color: var(--accent-soft) !important; border: 2px dashed var(--accent-line) !important; } /* Primary action buttons (.glass-button): the Ploy BLACK pill */ .glass-button, .dark .glass-button { background: var(--ink-fill) !important; color: var(--accent-fg) !important; border: none !important; border-radius: var(--radius-pill) !important; box-shadow: none !important; backdrop-filter: none !important; transition: background 0.15s ease !important; transform: none !important; } .glass-button:hover, .dark .glass-button:hover { background: var(--ink-fill-hover) !important; transform: none !important; box-shadow: 0 0 0 4px var(--accent-soft) !important; } /* Empty state card: beat style.css's #id !important light-glass rule (same specificity, later in cascade) */ #emptyStateOverlay { background: var(--canvas-veil) !important; } #emptyStateOverlay > div { background: var(--surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: var(--accent-line) !important; box-shadow: 0 16px 48px var(--shadow-lg) !important; border-radius: var(--radius-block) !important; } /* Legacy shine sweep reads as smears on the flat design — retire it */ .glass-shine::before { display: none !important; } /* The logo web component has no intrinsic size at 24px inside the rail */ #sidebar n8tive-cube-logo { width: 24px; height: 24px; display: block; flex-shrink: 0; } /* Rail/content resize: scoped transitions. transition-all on layout-critical elements restarts EVERY property's animation on any class churn (glass-ui observer, feather icon swaps) — width/margin only, nothing else animates. */ .sui-anim-rail { transition: width 0.25s ease, transform 0.3s ease; } .sui-anim-content { transition: margin-left 0.25s ease; } /* ---------- Remaining hue sweep ---------- */ /* Splash canvas class (replaces the legacy purple gradient utilities) */ .sui-splash-bg { background: var(--bg); } /* Orange (admin impersonation panel) reads as warn; pink joins the accent sweep */ [class*="bg-orange-500"], [class*="bg-orange-6"], [class*="bg-orange-7"], [class*="hover:bg-orange-"]:hover { background-color: var(--warn) !important; color: var(--accent-fg) !important; } [class*="bg-orange-1"], [class~="bg-orange-50"], [class*="bg-orange-9"], [class*="from-orange-"] { background-color: var(--warn-soft) !important; --tw-gradient-from: var(--warn-soft) var(--tw-gradient-from-position) !important; --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } [class~="to-red-50"], [class*="to-red-9"] { --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; } [class*="text-orange-"] { color: var(--warn) !important; } [class*="border-orange-"] { border-color: var(--warn-soft) !important; } [class*="to-pink-"] { --tw-gradient-to: var(--ploy-pink-2) var(--tw-gradient-to-position) !important; } /* ============================================================ Board cards, task detail, milestones, notification center, empty states — token-only; all motion is transform/opacity and inherits the reduced-motion guard above. ============================================================ */ /* ---------- Kanban task cards ---------- */ .task-card { padding: var(--sp-3) !important; } .task-card h4 { font-size: var(--fs-14); font-weight: 500; line-height: 1.25; color: var(--text) !important; } .task-card p { font-size: var(--fs-12); line-height: 1.5; color: var(--muted) !important; } /* Priority reads as a 3px status edge, after the base hairline above */ .task-card[class*="border-l-"] { border-left-width: 3px !important; } .task-card[class*="border-l-green"] { border-left-color: var(--ploy-green) !important; } .task-card[class*="border-l-yellow"] { border-left-color: var(--ploy-yellow) !important; } .task-card[class*="border-l-red"] { border-left-color: var(--danger) !important; } /* Priority chip: mono micro-label, pill */ .task-card span[class*="bg-red-1"], .task-card span[class*="bg-yellow-1"], .task-card span[class*="bg-green-1"] { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-pill); padding: var(--sp-1) var(--sp-2); } /* Card actions (view/edit/delete): quiet until the card is engaged. Hover-capable pointers only — touch keeps them always visible. */ @media (hover: hover) { .task-card .space-x-1 button { opacity: 0; transition: opacity 0.15s ease; } .task-card:hover .space-x-1 button, .task-card:focus-within .space-x-1 button { opacity: 1; } } /* Column headers: Anton title + mono count chip (chip styled above) */ .kanban-column h3 { font-size: var(--fs-14); letter-spacing: 0.04em; } /* ---------- Modals: one shape + entrance across the app ---------- */ #detailModal > div, #editModal > div, #settingsModal > div, #helpModal > div, #createTeamModal > div, #teamDetailModal > div, #inviteMemberModal > div, #createStageModal > div, #createMilestoneModal > div, #milestoneDetailModal > div { border: 1px solid var(--border); border-radius: var(--radius-block); box-shadow: 0 24px 64px var(--shadow-xl); animation: suiModalIn 0.18s ease-out; } @keyframes suiModalIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } /* ---------- Task detail: assignments + attachments first-class ---------- */ /* Metadata labels -> mono eyebrows */ #detailModal h3.uppercase, #milestoneDetailModal h3.uppercase { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 500 !important; letter-spacing: 0.12em; color: var(--faint) !important; margin-bottom: var(--sp-1); } /* Assignee: blue identity chip (the actionable person) */ #detailAssignee { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-bright) !important; font-size: var(--fs-14); font-weight: 500; } #detailAssignee::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); flex-shrink: 0; } /* Owner: neutral chip (provenance, not action) */ #detailOwner { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--muted) !important; font-size: var(--fs-14); } /* Attachment rows: flat list items, blue paperclip, hover reveal */ #detailFiles .glass-card { background: var(--surface-2) !important; box-shadow: none !important; padding: var(--sp-2) var(--sp-3); transition: border-color 0.15s ease; } #detailFiles .glass-card:hover { border-color: var(--accent-line) !important; } #detailFiles svg.feather-paperclip { color: var(--accent) !important; } #detailFiles > p { font-size: var(--fs-14); color: var(--faint) !important; } /* Upload dropzone */ .sui-dropzone { border: 1px dashed var(--border-strong) !important; border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); transition: border-color 0.15s ease, background 0.15s ease; } .sui-dropzone:hover { border-color: var(--accent) !important; background: var(--accent-soft); } .sui-dropzone svg { color: var(--accent); } /* ---------- Milestones ---------- */ #milestonesContainer .border-l-4 { border: 1px solid var(--border) !important; border-left-width: 3px !important; border-radius: var(--radius-md); box-shadow: 0 1px 2px var(--shadow-ink) !important; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } #milestonesContainer .border-l-4:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--shadow-md) !important; } #milestonesContainer .border-l-4.border-green-500 { border-left-color: var(--ploy-green) !important; } #milestonesContainer .border-l-4.border-red-500 { border-left-color: var(--danger) !important; } #milestonesContainer .border-l-4.border-blue-500 { border-left-color: var(--ploy-blue) !important; } /* Milestone empty state: blue icon well */ #milestonesContainer .rounded-full[class*="bg-gray"] { background: var(--accent-soft) !important; } #milestonesContainer .rounded-full svg { color: var(--accent) !important; } /* ---------- Notification center ---------- */ #notificationsPanel { border-radius: var(--radius-block); } #notificationsPanel h3 { font-size: var(--fs-16); } .notif-item { position: relative; padding-right: var(--sp-8); } .notif-unread::after { content: ""; position: absolute; top: var(--sp-4); right: var(--sp-4); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); } /* ---------- Board empty state: flat confidence, no pulsing blur ---------- */ #emptyStateOverlay .animate-pulse { display: none; } #emptyStateOverlay > div { border-style: solid !important; border-width: 1px !important; } /* ---------- Board panels: white Ploy cards, and the Quick Stats panel becomes the app's pastel-blue color block ---------- */ #boardView > .grid > div { border: 1px solid var(--border); border-radius: var(--radius-block); box-shadow: 0 1px 2px var(--shadow-ink) !important; } #boardView > .grid > div.bg-gradient-to-br { background-image: none !important; background-color: var(--ploy-blue) !important; border-color: transparent; } #boardView > .grid > div.bg-gradient-to-br h3, #boardView > .grid > div.bg-gradient-to-br h3 i, #boardView > .grid > div.bg-gradient-to-br h3 svg { color: var(--ploy-ink) !important; } #boardView > .grid > div.bg-gradient-to-br .grid > div { background-color: var(--surface) !important; border-color: var(--border) !important; border-radius: var(--radius-card); } /* ============================================================ 2026-08-05 HUD pass — retained hooks, re-grounded in Ploy. Main's "engineered luminosity" pass introduced markup/JS hooks (.sui-col-head/.sui-col-title, .sui-dragging, [data-count], .sui-halo, #labelManagerModal) that the components now render. The dark-glass atmosphere itself is retired by the Ploy light theme; the hooks keep purposeful styling in Ploy tokens. ============================================================ */ :root { --ease-hud: cubic-bezier(0.22, 0.9, 0.35, 1); } /* ---------- Tabular numerals: anywhere a number is a readout */ .sui-stat-num, [data-count], #quickStatTotal, #quickStatActive, #quickStatDone, #quickStatRate, #remainingCount, #completedCount, .notif-badge, #notificationsBadge, #detailCreated, #detailUpdated, #detailCompleted, #detailDueDate, #metricTotalTasks, #metricCompletionRate, #metricAvgTime, #metricActiveTasks { font-variant-numeric: tabular-nums; } /* ---------- Focus: one ring for every interactive element. (style.css's legacy purple button ring is retired in place; this wins for everything else via the later cascade.) */ :focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; box-shadow: 0 0 0 5px var(--accent-soft) !important; border-radius: var(--radius-sm); } /* ---------- Kanban column headers: mono uppercase instrument titles, hairline base rule with a short blue segment (kanban-board.js renders .sui-col-head / .sui-col-title) */ .sui-col-head { position: relative; margin: -4px -8px 12px; padding: 4px 8px 10px; border-bottom: 1px solid var(--border); } .sui-col-head::after { content: ""; position: absolute; left: 8px; bottom: -1px; width: 36px; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); } .sui-col-title { font-family: var(--font-mono) !important; font-size: var(--fs-12) !important; font-weight: 500 !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text) !important; } .sui-col-head svg.feather, .sui-col-head i { color: var(--accent) !important; width: 14px !important; height: 14px !important; } .kanban-column [data-count] { min-width: 24px; text-align: center; border: 1px solid var(--accent-line); } /* Live drag (kanban-board.js toggles .sui-dragging): the card becomes the brightest object on the board */ .task-card.sui-dragging, [data-task-id].sui-dragging { border-color: var(--accent) !important; box-shadow: 0 12px 32px var(--shadow-lg), 0 0 0 1px var(--accent), 0 0 24px var(--accent-glow) !important; } /* Quick Stats: display-size readouts */ #quickStatTotal, #quickStatActive, #quickStatDone, #quickStatRate { font-size: var(--fs-24); } /* Header stays pinned so the Ploy floating bar's top offset applies */ header.glass-frosted { position: sticky; } /* Collapse button: legacy purple hover -> token wash */ #collapseBtn:hover, .dark #collapseBtn:hover { background: var(--accent-soft) !important; } /* Label manager (labels-manager.js): same Ploy modal shape as the rest */ #labelManagerModal > div:last-child { border: 1px solid var(--border); border-radius: var(--radius-block); box-shadow: 0 24px 64px var(--shadow-xl); animation: suiModalIn 0.18s ease-out; } /* Notification panel: purposeful entrance */ #notificationsPanel:not(.hidden) { animation: suiPanelIn 0.25s var(--ease-hud); } @keyframes suiPanelIn { from { opacity: 0; transform: translateY(-6px) scale(0.99); } to { opacity: 1; transform: none; } } .notif-badge { font-family: var(--font-mono); } /* Detail modal: readout values breathe a little more than body text */ #detailModal #detailStatus, #detailModal #detailPriorityText, #detailModal #detailDueDate, #detailModal #detailDependency { font-weight: 500; } #detailModal #detailId { color: var(--faint); letter-spacing: 0.06em; } /* Empty-state icon halo (index.html renders .sui-halo): slow breathing, transform/opacity only, pastel blue on the light canvas */ #emptyStateOverlay .sui-halo { position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow-soft), transparent 70%); animation: suiBreathe 4.5s ease-in-out infinite; pointer-events: none; } @keyframes suiBreathe { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.12); } } /* Teams grid: same hover lift as the board */ #teamsGrid > div { border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 1px 2px var(--shadow-ink) !important; transition: transform 0.25s var(--ease-hud), border-color 0.25s var(--ease-hud), box-shadow 0.25s var(--ease-hud); } #teamsGrid > div:hover { transform: translateY(-2px); border-color: var(--accent-line); box-shadow: 0 8px 24px var(--shadow-md) !important; } /* The content canvas is not a panel — panels sit on it. Let the warm Ploy canvas read through (the glass flattening rule above painted #mainContent as an opaque bordered surface). */ #mainContent.glass-gradient-bg, #mainContent { background: transparent !important; border: none !important; box-shadow: none !important; } /* ============================================================ 2026-09-15 lift — dark-mode residue, theme controls, board UX. Token-only; every color below is a var(). ============================================================ */ /* ---------- Footer: the Ploy dark block (restored — the 09-10 merge dropped its rules, leaving .ploy-footer unstyled). In dark mode the --block-dark tokens lift it onto --surface-2 with a hairline. */ .ploy-footer { background: var(--block-dark) !important; border: 1px solid transparent !important; border-radius: var(--radius-block); margin: var(--sp-6) 12px 12px; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px) var(--sp-6); color: var(--block-dark-text); } .dark .ploy-footer { border-color: var(--border) !important; } .ploy-footer-logo { font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 5rem); line-height: 0.95; text-transform: lowercase; letter-spacing: 0.02em; user-select: none; } .ploy-footer-logo span:nth-child(4n+1) { color: var(--ploy-blue); } .ploy-footer-logo span:nth-child(4n+2) { color: var(--ploy-pink); } .ploy-footer-logo span:nth-child(4n+3) { color: var(--ploy-green); } .ploy-footer-logo span:nth-child(4n+4) { color: var(--ploy-yellow); } .ploy-footer-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-6); font-size: 13px; } .ploy-footer-meta a { color: var(--block-dark-link); text-decoration: none; font-weight: 500; } .ploy-footer-meta a:hover { text-decoration: underline; } .ploy-footer-tagline { color: var(--block-dark-muted); } /* ---------- style.css legacy `.dark` rules that outrank the token rules by specificity now that .dark is really toggled ---------- */ .dark ::-webkit-scrollbar-thumb { background: var(--border-strong); } .dark ::-webkit-scrollbar-thumb:hover { background: var(--accent); } .kanban-board-container, .dark .kanban-board-container { scrollbar-color: var(--border-strong) transparent; } .glass-input, .dark .glass-input { background: var(--surface) !important; border-color: var(--border-strong) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .glass-input:focus, .dark .glass-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-soft) !important; } .glass-shimmer, .dark .glass-shimmer { background: linear-gradient(90deg, transparent 0%, var(--accent-soft) 50%, transparent 100%); background-size: 1000px 100%; } /* the glass "reflection" sheen reads as a smear on flat Ploy cards */ .glass-reflect::after, .dark .glass-reflect::after { display: none; } /* ---------- Header icon buttons: one shape, 40px hit area ---------- */ .sui-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border-radius: var(--radius-pill) !important; } .sui-icon-btn svg { width: 20px; height: 20px; } /* ---------- Theme segmented control (Settings): System / Light / Dark ---------- */ .sui-segment { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); } .sui-segment-btn { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 0 var(--sp-4); border: none; border-radius: var(--radius-pill); background: transparent; color: var(--muted); font-size: var(--fs-14); font-weight: 500; cursor: pointer; } .sui-segment-btn:hover { color: var(--text); background: var(--surface-2); } .sui-segment-btn[aria-checked="true"] { background: var(--ink-fill); color: var(--accent-fg); } .sui-segment-btn svg { width: 16px; height: 16px; } /* ---------- Board UX ---------- Basecamp Card Table: status-tinted column headers; Buffer board: a quiet "+ Add" per column; Plain: status counts in the sidebar. */ .kanban-column[data-color="green"] .sui-col-head::after { background: linear-gradient(90deg, var(--ok), transparent); } .kanban-column[data-color="yellow"] .sui-col-head::after, .kanban-column[data-color="orange"] .sui-col-head::after { background: linear-gradient(90deg, var(--warn), transparent); } .kanban-column[data-color="red"] .sui-col-head::after { background: linear-gradient(90deg, var(--danger), transparent); } .kanban-column[data-color="purple"] .sui-col-head::after { background: linear-gradient(90deg, var(--accent-deep), transparent); } .kanban-column[data-color="gray"] .sui-col-head::after { background: linear-gradient(90deg, var(--border-strong), transparent); } /* Empty column: a labelled drop target instead of 200px of nothing */ .sui-col-body:empty { position: relative; border: 1px dashed var(--border-strong); border-radius: var(--radius-card); } .sui-col-body:empty::before { content: "No tasks — drop one here"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); text-align: center; font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); } .sui-col-add { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; margin-top: var(--sp-3); min-height: 40px; padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-pill); background: transparent; color: var(--muted); font-size: var(--fs-14); font-weight: 500; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .sui-col-add:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); } .sui-col-add svg { width: 14px !important; height: 14px !important; } /* Sidebar filter counts */ .sui-filter-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; min-width: 20px; text-align: center; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--faint); } .sui-sidebar .filter-btn[class*="bg-purple-1"] .sui-filter-count { background: var(--surface); color: var(--accent-bright); } .sui-sidebar.sidebar-collapsed .sui-filter-count { display: none; } /* Views toolbar: the Clear control only appears once a filter is set, and says how many */ .sui-clear-filters[data-active="0"] { display: none; } .sui-filter-badge { font-family: var(--font-mono); font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--ink-fill); color: var(--accent-fg); } /* Rail under .dark: glass-ui adds .glass-button to the initially-active nav button, and `.dark .glass-button` ties the rail reset on specificity while sitting later in the sheet — so the reset is restated here, last. */ .dark .sui-sidebar .nav-btn, .dark .sui-sidebar .filter-btn { background: transparent !important; color: var(--muted) !important; box-shadow: none !important; } .dark .sui-sidebar .nav-btn:hover, .dark .sui-sidebar .filter-btn:hover { background: var(--surface-2) !important; color: var(--text) !important; } .dark .sui-sidebar .nav-btn.bg-purple-600, .dark .sui-sidebar .filter-btn.bg-purple-600, .dark .sui-sidebar .filter-btn[class*="bg-purple-1"] { background: var(--accent-soft) !important; color: var(--accent-bright) !important; } /* ============================================================ 2026-09-15 cinematic pass — dark mode only; light is untouched. High-fidelity rules: background-only ground (no layout, no images), ONE blurred layer, ONE glow token, hairlines on device pixels, transform/opacity motion behind prefers-reduced-motion (the global guard above). Subtract first: the existing drop shadows come OFF the surfaces that get the glow — never stacked. ============================================================ */ /* Ground: one fine engineering grid + one accent bloom, painted on so it scrolls with the page (no fixed attachment — that repaints on every scroll on mobile). #mainContent is transparent; the rail and the header sit on it as solid / glass surfaces. */ .dark body { background-image: radial-gradient(1200px 600px at 50% -10%, var(--ground-bloom), transparent 60%), linear-gradient(var(--ground-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ground-grid) 1px, transparent 1px); background-size: auto, 32px 32px, 32px 32px; } /* Glass: the sticky header is the one blurred layer. Solid-reading fallback (--surface-glass is 78% opaque) where backdrop-filter is unsupported. */ .dark #mainContent > header, .dark header.glass-frosted { background: var(--surface-glass) !important; box-shadow: none !important; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dark #mainContent > header, .dark header.glass-frosted { backdrop-filter: blur(12px) saturate(120%) !important; -webkit-backdrop-filter: blur(12px) saturate(120%) !important; } } /* Focus: the ring is the glow. */ .dark :focus-visible, .dark button:focus-visible, .dark input:focus-visible, .dark textarea:focus-visible, .dark select:focus-visible, .dark a:focus-visible { outline-color: var(--accent-lum) !important; box-shadow: 0 0 0 4px var(--glow-faint) !important; } .dark .glass-input:focus, .dark input:focus, .dark select:focus, .dark textarea:focus { border-color: var(--accent-lum) !important; } .dark .glass-button:hover { box-shadow: 0 0 0 4px var(--glow-faint) !important; } /* Surfaces at rest lose their drop shadows on the deep ground — the hairline carries the edge; only engaged objects light up. */ .dark .kanban-column > div, .dark .task-card, .dark [data-task-id], .dark #boardView > .grid > div, .dark #teamsGrid > div, .dark #milestonesContainer .border-l-4, .dark .glass-card { box-shadow: none !important; } /* ---------- Signature 1: kanban card lift-and-glow ---------- Hover: the existing 2px lift + one faint glow. Drag (.sui-dragging): the card becomes the brightest object on the board with the one full glow — no ring, no drop shadow underneath. */ .dark .task-card:hover, .dark [data-task-id]:hover { border-color: var(--accent-line) !important; box-shadow: 0 0 20px var(--glow-faint) !important; } .dark .task-card.sui-dragging, .dark [data-task-id].sui-dragging { border-color: var(--accent-lum) !important; box-shadow: 0 0 28px var(--glow) !important; } .dark .drag-over { border-color: var(--accent-lum) !important; } .dark #teamsGrid > div:hover, .dark #milestonesContainer .border-l-4:hover { box-shadow: 0 0 20px var(--glow-faint) !important; } /* ---------- Signature 2: column headers as tinted hairline rails ---------- The 36px status segment becomes a full-width 1px rail (status colour → transparent) on the device-pixel hairline; the Basecamp per-status tints above still supply the gradient colour. Title reads brighter. */ .dark .sui-col-head { border-bottom-color: transparent; } .dark .sui-col-head::after { left: 0; right: 0; width: auto; height: 1px; bottom: -1px; } .dark .kanban-column[data-color="gray"] .sui-col-head::after { background: linear-gradient(90deg, var(--border-strong), transparent); } .dark .sui-col-head svg.feather, .dark .sui-col-head i { color: var(--accent-lum) !important; } .dark .kanban-column [data-count] { border-color: var(--accent-line); } /* Readouts: tabular numerals on every metric tile (the HUD digit rule); Anton stays 400 — nothing below 400 on dark grounds. */ .dark #quickStatTotal, .dark #quickStatActive, .dark #quickStatDone, .dark #quickStatRate, .dark #metricTotalTasks, .dark #metricCompletionRate, .dark #metricAvgTime, .dark #metricActiveTasks, .dark .sui-stat-num, .dark .sui-filter-count, .dark [data-count] { font-variant-numeric: tabular-nums; } /* Eyebrow / assignee / unread dots already carry --accent-glow (= --glow here); the empty-state halo breathes on --glow-faint. Column-count chips, stat chips and the notification panel stay solid --surface / --surface-2 so the header remains the only translucent layer. */ .dark #notificationsPanel, .dark .glass-panel { background: var(--surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }