/* * Theme overrides — applied on . * Matrix is the default (baked into compiled style.sass). The rules below * override the Matrix defaults only when a non-matrix theme class is set. * * Each theme defines CSS variables AND concrete element overrides so that * inline styles written with hex values still get reskinned. !important is * used deliberately to win over the compiled stylesheet without touching it. */ /* ── Theme variables ─────────────────────────────────────────────────── */ body.theme-matrix { --t-bg: #060a08; --t-bg-soft: #0a1009; --t-surface: #0d1410; --t-surface2: #121b16; --t-border: #1b2a20; --t-border-hot: #2a4a32; --t-text: #cfe0d1; --t-text2: #7e9285; --t-muted: #3e5143; --t-accent: #4af26a; --t-accent-bright: #6aff7d; --t-accent-dim: #1d3a24; --t-accent-rgb: 74, 242, 106; --t-link: #6aff7d; --t-danger: #d85454; --t-danger-rgb: 216, 84, 84; --t-accent-fg: #06140a; } body.theme-white { --t-bg: #ffffff; --t-bg-soft: #f6f7f8; --t-surface: #ffffff; --t-surface2: #eef1f3; --t-border: #d9dde2; --t-border-hot: #a8b0bb; --t-text: #1a1d22; --t-text2: #4a5260; --t-muted: #8a94a3; --t-accent: #0b66d0; --t-accent-bright: #0a5bb8; --t-accent-dim: #cfe2f7; --t-accent-rgb: 11, 102, 208; --t-link: #0b66d0; --t-danger: #c0392b; --t-danger-rgb: 192, 57, 43; --t-accent-fg: #ffffff; } body.theme-gray { --t-bg: #b8bcc2; --t-bg-soft: #abafb6; --t-surface: #c6cad0; --t-surface2: #aeb3bb; --t-border: #8d939c; --t-border-hot: #5f6670; --t-text: #1a1c20; --t-text2: #3c4048; --t-muted: #6b7078; --t-accent: #0b4ea0; --t-accent-bright: #0a4894; --t-accent-dim: #c4d2e6; --t-accent-rgb: 11, 78, 160; --t-link: #0b4ea0; --t-danger: #b93c2a; --t-danger-rgb: 185, 60, 42; --t-accent-fg: #ffffff; } body.theme-dark-gray { --t-bg: #2a2d31; --t-bg-soft: #25282c; --t-surface: #33373c; --t-surface2: #3a3f45; --t-border: #4a4f56; --t-border-hot: #636a73; --t-text: #e6e7ea; --t-text2: #b4b8bf; --t-muted: #7a8089; --t-accent: #6ab6ff; --t-accent-bright: #8ac6ff; --t-accent-dim: #1f3550; --t-accent-rgb: 106, 182, 255; --t-link: #8ac6ff; --t-danger: #ff7b6e; --t-danger-rgb: 255, 123, 110; --t-accent-fg: #0a1a30; } body.theme-black { --t-bg: #000000; --t-bg-soft: #060606; --t-surface: #0b0b0b; --t-surface2: #141414; --t-border: #2a2a2a; --t-border-hot: #444444; --t-text: #eaeaea; --t-text2: #aeaeae; --t-muted: #5a5a5a; --t-accent: #ffffff; --t-accent-bright: #ffffff; --t-accent-dim: #1a1a1a; --t-accent-rgb: 255, 255, 255; --t-link: #d4d4d4; --t-danger: #ff6c6c; --t-danger-rgb: 255, 108, 108; --t-accent-fg: #000000; } body.theme-pink { --t-bg: #ffe4ec; --t-bg-soft: #ffd2df; --t-surface: #fff0f5; --t-surface2: #ffd9e4; --t-border: #f5a8c2; --t-border-hot: #e91e63; --t-text: #4a1530; --t-text2: #7a2e4d; --t-muted: #b66a86; --t-accent: #e91e63; --t-accent-bright: #ff4b86; --t-accent-dim: #fbd0e0; --t-accent-rgb: 233, 30, 99; --t-link: #c2185b; --t-danger: #b71c1c; --t-danger-rgb: 183, 28, 28; --t-accent-fg: #ffffff; } /* ── Wasteland v2: Interstellar / Greenland 2 / Death Stranding. * Vast cosmic vacuum, warm dust amber accent (Cooper's jacket), * chiral cyan signal links (DS HUD), semi-transparent surfaces so the * background photo bleeds through. Bone-warm text on deep night. ─── */ body.theme-wasteland { --t-bg: #0d1014; /* deep night-vacuum */ --t-bg-soft: #14181e; --t-surface: rgba(20, 24, 30, 0.55); /* semi-transparent — photo shows */ --t-surface2: rgba(28, 32, 38, 0.70); --t-border: rgba(180, 170, 150, 0.15); /* dust-line */ --t-border-hot: rgba(220, 200, 160, 0.35); --t-text: #e8e2d5; /* warm bone */ --t-text2: #b4ac9d; --t-muted: #6e6a5f; --t-accent: #d4a574; /* warm dust amber — Cooper's jacket */ --t-accent-bright: #f4d4a0; --t-accent-dim: rgba(212, 165, 116, 0.20); --t-accent-rgb: 212, 165, 116; --t-link: #87ccd6; /* chiral cyan — DS signal */ --t-danger: #c44848; --t-danger-rgb: 196, 72, 72; --t-accent-fg: #0d1014; } /* ── Liminal Melancholy: dark, sad, ambient. Empty room at night, distant * streetlight through the curtain. Slate-blue depth with a single warm * amber link — the only thing still on. Calm. No motion. ─────────── */ body.theme-liminal { --t-bg: #14181f; /* dark slate, blue undertone */ --t-bg-soft: #1c2129; --t-surface: rgba(28, 33, 41, 0.65); --t-surface2: rgba(38, 44, 54, 0.78); --t-border: rgba(140, 156, 175, 0.14); --t-border-hot: rgba(140, 156, 175, 0.30); --t-text: #c5cdd5; /* soft cool bone */ --t-text2: #8a96a4; --t-muted: #5a6573; --t-accent: #8aa9c2; /* pale dusty blue */ --t-accent-bright: #a4c0d4; --t-accent-dim: rgba(138, 169, 194, 0.16); --t-accent-rgb: 138, 169, 194; --t-link: #b89878; /* faded amber — distant streetlight */ --t-danger: #b87878; --t-danger-rgb: 184, 120, 120; --t-accent-fg: #14181f; } body.theme-akira { --t-bg: #08000a; --t-bg-soft: #0d000f; --t-surface: rgba(20,6,24,0.96); --t-surface2: rgba(36,12,42,0.96); --t-border: rgba(255,0,60,0.18); --t-border-hot: rgba(255,0,60,0.45); --t-text: #f1d4dc; --t-text2: #b08894; --t-muted: #5a3a44; --t-accent: #ff003c; --t-accent-bright: #ff406a; --t-accent-dim: rgba(255,0,60,0.18); --t-accent-rgb: 255, 0, 60; --t-link: #00d4ff; --t-danger: #ff5050; --t-danger-rgb: 255, 80, 80; --t-accent-fg: #ffffff; } body.theme-naruto { --t-bg: #160a02; --t-bg-soft: #1f1206; --t-surface: rgba(38,22,10,0.96); --t-surface2: rgba(54,32,14,0.96); --t-border: rgba(255,140,42,0.22); --t-border-hot: rgba(255,140,42,0.50); --t-text: #f4e6cf; --t-text2: #c8a87a; --t-muted: #7a5a3a; --t-accent: #ff8c2a; --t-accent-bright: #ffb066; --t-accent-dim: rgba(255,140,42,0.20); --t-accent-rgb: 255, 140, 42; --t-link: #5fb86b; --t-danger: #c44848; --t-danger-rgb: 196, 72, 72; --t-accent-fg: #ffffff; } body.theme-sakura { --t-bg: #fff5f8; --t-bg-soft: #ffe8f0; --t-surface: rgba(255,240,246,0.96); --t-surface2: rgba(255,222,234,0.96); --t-border: rgba(214,51,132,0.20); --t-border-hot: rgba(214,51,132,0.45); --t-text: #3a1a2a; --t-text2: #6b3a52; --t-muted: #a37286; --t-accent: #d63384; --t-accent-bright: #ee5fa3; --t-accent-dim: rgba(214,51,132,0.14); --t-accent-rgb: 214, 51, 132; --t-link: #b54076; --t-danger: #c0392b; --t-danger-rgb: 192, 57, 43; --t-accent-fg: #ffffff; } body.theme-fbi { --t-bg: #0a1929; --t-bg-soft: #0f2238; --t-surface: rgba(18,38,64,0.96); --t-surface2: rgba(28,52,84,0.96); --t-border: rgba(212,175,55,0.20); --t-border-hot: rgba(212,175,55,0.50); --t-text: #e8ecf2; --t-text2: #a4b3c4; --t-muted: #5e6f82; --t-accent: #d4af37; --t-accent-bright: #f0cb5b; --t-accent-dim: rgba(212,175,55,0.16); --t-accent-rgb: 212, 175, 55; --t-link: #c9b87a; --t-danger: #c44848; --t-danger-rgb: 196, 72, 72; --t-accent-fg: #0a1929; } body.theme-cia { --t-bg: #0a0d12; --t-bg-soft: #11161e; --t-surface: rgba(22,28,38,0.96); --t-surface2: rgba(34,42,56,0.96); --t-border: rgba(184,184,184,0.14); --t-border-hot: rgba(184,184,184,0.34); --t-text: #d8dde4; --t-text2: #94a0b0; --t-muted: #5c6776; --t-accent: #b8b8b8; --t-accent-bright: #e0e0e0; --t-accent-dim: rgba(184,184,184,0.12); --t-accent-rgb: 184, 184, 184; --t-link: #6e89a8; --t-danger: #c44848; --t-danger-rgb: 196, 72, 72; --t-accent-fg: #0a0d12; } body.theme-soviet { --t-bg: #1a0606; --t-bg-soft: #260a0a; --t-surface: rgba(58,14,14,0.96); --t-surface2: rgba(82,22,22,0.96); --t-border: rgba(232,197,71,0.20); --t-border-hot: rgba(232,197,71,0.50); --t-text: #f4e8d4; --t-text2: #c8a878; --t-muted: #8a6648; --t-accent: #cc1f1f; --t-accent-bright: #ee3a3a; --t-accent-dim: rgba(204,31,31,0.20); --t-accent-rgb: 204, 31, 31; --t-link: #e8c547; --t-danger: #ff5a5a; --t-danger-rgb: 255, 90, 90; --t-accent-fg: #ffffff; } body.theme-urban { --t-bg: #181a1d; --t-bg-soft: #20232a; --t-surface: rgba(36,40,48,0.96); --t-surface2: rgba(52,58,68,0.96); --t-border: rgba(214,177,50,0.18); --t-border-hot: rgba(214,177,50,0.42); --t-text: #dadee4; --t-text2: #9ca5b1; --t-muted: #5a6470; --t-accent: #d6b132; --t-accent-bright: #f1cf52; --t-accent-dim: rgba(214,177,50,0.16); --t-accent-rgb: 214, 177, 50; --t-link: #5e9bb5; --t-danger: #d85454; --t-danger-rgb: 216, 84, 84; --t-accent-fg: #181a1d; } body.theme-cyberpunk { --t-bg: #060010; --t-bg-soft: #0c0418; --t-surface: rgba(20,6,32,0.96); --t-surface2: rgba(36,12,52,0.96); --t-border: rgba(252,238,12,0.18); --t-border-hot: rgba(252,238,12,0.50); --t-text: #f0e8d0; --t-text2: #b8a890; --t-muted: #6a5a7a; --t-accent: #fcee0c; --t-accent-bright: #ffff5e; --t-accent-dim: rgba(252,238,12,0.18); --t-accent-rgb: 252, 238, 12; --t-link: #ff2e9a; --t-danger: #00ffd1; --t-danger-rgb: 0, 255, 209; --t-accent-fg: #060010; } body.theme-nier { --t-bg: #20201a; --t-bg-soft: #2a2820; --t-surface: rgba(46,44,36,0.96); --t-surface2: rgba(62,58,46,0.96); --t-border: rgba(201,184,122,0.18); --t-border-hot: rgba(201,184,122,0.42); --t-text: #e6dcc4; --t-text2: #b8ac90; --t-muted: #6e6856; --t-accent: #c9b87a; --t-accent-bright: #e8d89a; --t-accent-dim: rgba(201,184,122,0.16); --t-accent-rgb: 201, 184, 122; --t-link: #d6c89a; --t-danger: #b85a4a; --t-danger-rgb: 184, 90, 74; --t-accent-fg: #20201a; } /* Solarized Dark — classic Ethan Schoonover palette, blue accent on warm dark base. */ body.theme-solarized { --t-bg: #002b36; --t-bg-soft: #073642; --t-surface: #073642; --t-surface2: #0a4250; --t-border: #1d4f5e; --t-border-hot: #2d6779; --t-text: #eee8d5; --t-text2: #93a1a1; --t-muted: #586e75; --t-accent: #268bd2; --t-accent-bright: #4aa8e0; --t-accent-dim: rgba(38,139,210,0.18); --t-accent-rgb: 38, 139, 210; --t-link: #2aa198; --t-danger: #dc322f; --t-danger-rgb: 220, 50, 47; --t-accent-fg: #002b36; } /* Crimson — deep wine + bold red. Premium / dramatic. */ body.theme-crimson { --t-bg: #1a0612; --t-bg-soft: #220a18; --t-surface: #2a0e1f; --t-surface2: #381427; --t-border: rgba(220,20,60,0.18); --t-border-hot: rgba(220,20,60,0.45); --t-text: #f0d8e0; --t-text2: #c8a0b0; --t-muted: #806070; --t-accent: #dc143c; --t-accent-bright: #ff3a5e; --t-accent-dim: rgba(220,20,60,0.18); --t-accent-rgb: 220, 20, 60; --t-link: #ff6b8a; --t-danger: #ffb000; --t-danger-rgb: 255, 176, 0; --t-accent-fg: #1a0612; } /* Mint — pastel light theme, fresh green accent. */ body.theme-mint { --t-bg: #e8f5ed; --t-bg-soft: #d8eddf; --t-surface: #ffffff; --t-surface2: #f1f8f3; --t-border: #c3d9c8; --t-border-hot: #94c0a0; --t-text: #0e3a26; --t-text2: #3a6b4f; --t-muted: #7a8f80; --t-accent: #0f9d58; --t-accent-bright: #1bb96d; --t-accent-dim: rgba(15,157,88,0.16); --t-accent-rgb: 15, 157, 88; --t-link: #0b7c46; --t-danger: #c0392b; --t-danger-rgb: 192, 57, 43; --t-accent-fg: #ffffff; } /* ── Everything below scoped to non-matrix themes so Matrix keeps the ── * ── existing compiled look pixel-for-pixel. ──────────────────────────── */ body:not(.theme-matrix){ background: var(--t-bg) !important; color: var(--t-text) !important; } /* Hide matrix crt overlays + background gif on non-matrix themes */ body:not(.theme-matrix) .crt-scanlines, body:not(.theme-matrix) .crt-grid, body:not(.theme-matrix) .background-overlay{ display: none !important; } body:not(.theme-matrix) .background-darkness{ background: var(--t-bg) !important; } /* Navigation sidebar */ body:not(.theme-matrix) #navigation{ background: var(--t-surface) !important; border-right: 1px solid var(--t-border) !important; color: var(--t-text) !important; } body:not(.theme-matrix) #navigation .nav-link{ color: var(--t-text) !important; } body:not(.theme-matrix) #navigation .nav-link:hover{ background: var(--t-surface2) !important; color: var(--t-accent) !important; } body:not(.theme-matrix) #navigation ul ul{ background: var(--t-surface2) !important; border: 1px solid var(--t-border) !important; } body:not(.theme-matrix) #navigation .nav-brand{ color: var(--t-text2) !important; border-bottom: 1px solid var(--t-border) !important; } body:not(.theme-matrix) #navigation hr{ border-color: var(--t-border) !important; opacity: 1 !important; } /* Mobile: force opaque #navigation in themes whose --t-surface is translucent. * Wasteland and Liminal use rgba surfaces so the page background bleeds through — * fine on desktop where the side rail is fixed against the page edge, unreadable * on small screens where the nav slides over content. Lock these two to bg-soft * (which IS opaque in both palettes) and disable any backdrop-filter inherited * from style.sass so text contrast is preserved. */ @media (max-width: 768px) { body.theme-wasteland #navigation, body.theme-liminal #navigation { background: var(--t-bg-soft) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.theme-wasteland #navigation ul ul, body.theme-liminal #navigation ul ul { background: var(--t-bg-soft) !important; } } /* Main container, cards, typography */ body:not(.theme-matrix) .main{ background: transparent !important; color: var(--t-text) !important; } body:not(.theme-matrix) h1, body:not(.theme-matrix) h2, body:not(.theme-matrix) h3, body:not(.theme-matrix) h4, body:not(.theme-matrix) h5, body:not(.theme-matrix) h6{ color: var(--t-text) !important; } body:not(.theme-matrix) a{ color: var(--t-link) !important; } body:not(.theme-matrix) hr{ border-color: var(--t-border) !important; } body:not(.theme-matrix) .text-muted{ color: var(--t-text2) !important; } /* Bootstrap form controls */ body:not(.theme-matrix) .form-control, body:not(.theme-matrix) .form-select{ background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; color: var(--t-text) !important; } body:not(.theme-matrix) .form-control:focus, body:not(.theme-matrix) .form-select:focus{ background: var(--t-surface) !important; border-color: var(--t-border-hot) !important; color: var(--t-text) !important; box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--t-accent) 35%, transparent) !important; } body:not(.theme-matrix) .form-label{ color: var(--t-text2) !important; } /* Tables */ body:not(.theme-matrix) .table, body:not(.theme-matrix) .table-dark{ --bs-table-bg: var(--t-surface) !important; --bs-table-color: var(--t-text) !important; --bs-table-border-color: var(--t-border) !important; --bs-table-striped-bg: var(--t-surface2) !important; --bs-table-striped-color: var(--t-text) !important; color: var(--t-text) !important; background: var(--t-surface) !important; } body:not(.theme-matrix) .table th{ background: var(--t-surface2) !important; color: var(--t-text) !important; border-color: var(--t-border) !important; } body:not(.theme-matrix) .table td{ border-color: var(--t-border) !important; } /* Buttons */ body:not(.theme-matrix) .btn-primary, body:not(.theme-matrix) .btn-primary.active, body:not(.theme-matrix) .btn-primary:active{ background: var(--t-accent) !important; border-color: var(--t-accent) !important; color: var(--t-accent-fg, #ffffff) !important; } body:not(.theme-matrix) .btn-secondary{ background: var(--t-surface2) !important; border-color: var(--t-border) !important; color: var(--t-text) !important; } body:not(.theme-matrix) .btn-outline-secondary{ background: transparent !important; border-color: var(--t-border-hot) !important; color: var(--t-text2) !important; } body:not(.theme-matrix) .btn-outline-primary{ background: transparent !important; border-color: var(--t-accent) !important; color: var(--t-accent) !important; } body:not(.theme-matrix) .btn-outline-danger{ background: transparent !important; border-color: var(--t-danger) !important; color: var(--t-danger) !important; } body:not(.theme-matrix) .btn-outline-warning{ background: transparent !important; border-color: #d59f00 !important; color: #d59f00 !important; } body:not(.theme-matrix) .btn-success, body:not(.theme-matrix) .btn-success.active, body:not(.theme-matrix) .btn-success:active{ background: var(--t-accent) !important; border-color: var(--t-accent) !important; color: var(--t-accent-fg, #ffffff) !important; } /* Generic .active state on any button (e.g. tab pills, nav buttons). */ body:not(.theme-matrix) .btn.active, body:not(.theme-matrix) .btn:active, body:not(.theme-matrix) button.active:not(.theme-submenu-item):not(.lang-btn) { background: var(--t-accent) !important; border-color: var(--t-accent) !important; color: var(--t-accent-fg, #ffffff) !important; } /* Dashboard panel filter pills (.pg-filter, used on /projects/, /clients/, * /playground/, /hq/, etc.). dash_panel.sass loads AFTER themes.css and * has higher source-order, so we use a higher-specificity selector * (.pg-filter.active is 2 classes) plus !important. */ body:not(.theme-matrix) .pg-filter.active, body:not(.theme-matrix) .pg-filter:active { background: var(--t-accent) !important; border-color: var(--t-accent) !important; color: var(--t-accent-fg, #ffffff) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--t-accent) 35%, transparent) !important; } /* Lang switcher active button (already styled, but make sure text reads). */ body:not(.theme-matrix) .lang-switcher .lang-btn.active, body:not(.theme-matrix) .mobile-iconset-switcher .lang-btn.active { background: var(--t-accent-dim) !important; border-color: var(--t-accent) !important; color: var(--t-accent) !important; } /* Force re-skin of inline hex styles used in CRM/taskboard templates. These use attribute selectors against the style attribute — they match elements where the inline style contains a specific Matrix-palette color and replace the hex with a theme variable. */ body:not(.theme-matrix) [style*="#121212"]{ background: var(--t-surface) !important; } body:not(.theme-matrix) [style*="#141414"]{ background: var(--t-surface) !important; } body:not(.theme-matrix) [style*="#181818"]{ background: var(--t-surface2) !important; } body:not(.theme-matrix) [style*="#0c0c0c"]{ background: var(--t-bg) !important; } /* Text/border hex colors used inline */ body:not(.theme-matrix) [style*="#bbb"], body:not(.theme-matrix) [style*="#ddd"], body:not(.theme-matrix) [style*="#ccc"]{ color: var(--t-text) !important; } body:not(.theme-matrix) [style*="#888"], body:not(.theme-matrix) [style*="#666"], body:not(.theme-matrix) [style*="#555"], body:not(.theme-matrix) [style*="#444"]{ color: var(--t-text2) !important; } /* Inline border hex */ body:not(.theme-matrix) [style*="#1e1e1e"], body:not(.theme-matrix) [style*="#262626"], body:not(.theme-matrix) [style*="#2a2a2a"]{ border-color: var(--t-border) !important; } /* Login card (anonymous view) */ body:not(.theme-matrix) [style*="#141414"][style*="border:1px solid #1e1e1e"]{ background: var(--t-surface) !important; border-color: var(--t-border) !important; color: var(--t-text) !important; } /* Theme-switcher widget in navigation */ .theme-switcher { padding: 8px 6px; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; border-top: 1px solid var(--t-border, #1b2a20); } .theme-switcher form { margin: 0; padding: 0; display: inline-block; } .theme-switcher button { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); } .theme-switcher button.active { border-color: var(--t-accent, #4af26a); } .theme-switcher .sw-matrix { background: #060a08; } .theme-switcher .sw-white { background: #ffffff; } .theme-switcher .sw-gray { background: #b8bcc2; } .theme-switcher .sw-dark-gray { background: #33373c; } .theme-switcher .sw-black { background: #000000; } .theme-switcher .sw-pink { background: #ffd2df; } .theme-switcher .sw-wasteland { background: radial-gradient(circle at 30% 30%, #d4a574 0%, #d4a574 32%, transparent 33%), linear-gradient(135deg, #14181e 0%, #0d1014 100%); } .theme-switcher .sw-liminal { background: radial-gradient(circle at 30% 30%, #c08594 0%, #c08594 32%, transparent 33%), linear-gradient(135deg, #f4ecdf 0%, #ebe1d0 100%); } .theme-switcher .sw-subliminal { background: radial-gradient(circle at 30% 30%, #b890c6 0%, #b890c6 32%, transparent 33%), linear-gradient(135deg, #1d1922 0%, #15131a 100%); } .theme-switcher .sw-akira { background: radial-gradient(circle at 30% 30%, #ff003c 0%, #ff003c 32%, transparent 33%), linear-gradient(135deg, #1a0010 0%, #08000a 100%); } .theme-switcher .sw-naruto { background: radial-gradient(circle at 30% 30%, #ff8c2a 0%, #ff8c2a 32%, transparent 33%), linear-gradient(135deg, #2a1808 0%, #160a02 100%); } .theme-switcher .sw-sakura { background: radial-gradient(circle at 30% 30%, #d63384 0%, #d63384 32%, transparent 33%), linear-gradient(135deg, #ffe8f0 0%, #fff5f8 100%); } .theme-switcher .sw-fbi { background: radial-gradient(circle at 30% 30%, #d4af37 0%, #d4af37 32%, transparent 33%), linear-gradient(135deg, #0f2238 0%, #0a1929 100%); } .theme-switcher .sw-cia { background: radial-gradient(circle at 30% 30%, #b8b8b8 0%, #b8b8b8 32%, transparent 33%), linear-gradient(135deg, #11161e 0%, #0a0d12 100%); } .theme-switcher .sw-soviet { background: radial-gradient(circle at 30% 30%, #cc1f1f 0%, #cc1f1f 32%, transparent 33%), linear-gradient(135deg, #260a0a 0%, #1a0606 100%); } .theme-switcher .sw-urban { background: radial-gradient(circle at 30% 30%, #d6b132 0%, #d6b132 32%, transparent 33%), linear-gradient(135deg, #20232a 0%, #181a1d 100%); } .theme-switcher .sw-cyberpunk { background: radial-gradient(circle at 30% 30%, #fcee0c 0%, #fcee0c 28%, transparent 29%), radial-gradient(circle at 70% 70%, #ff2e9a 0%, #ff2e9a 22%, transparent 23%), linear-gradient(135deg, #0c0418 0%, #060010 100%); } .theme-switcher .sw-nier { background: radial-gradient(circle at 30% 30%, #c9b87a 0%, #c9b87a 32%, transparent 33%), linear-gradient(135deg, #2a2820 0%, #20201a 100%); } .theme-switcher .sw-solarized { background: radial-gradient(circle at 30% 30%, #268bd2 0%, #268bd2 32%, transparent 33%), linear-gradient(135deg, #073642 0%, #002b36 100%); } .theme-switcher .sw-crimson { background: radial-gradient(circle at 30% 30%, #dc143c 0%, #dc143c 32%, transparent 33%), linear-gradient(135deg, #2a0e1f 0%, #1a0612 100%); } .theme-switcher .sw-mint { background: radial-gradient(circle at 30% 30%, #0f9d58 0%, #0f9d58 32%, transparent 33%), linear-gradient(135deg, #ffffff 0%, #e8f5ed 100%); } /* ── Theme submenu (single nav button → list of [round dot] [name]) ── */ .theme-submenu-form { margin: 0; padding: 0; display: block; } .theme-submenu-item { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: none; color: inherit; font: inherit; text-align: left; padding: 4px 8px; cursor: pointer; line-height: 1.4; border-radius: 4px; } .theme-submenu-item:hover { background: var(--t-surface2, rgba(255,255,255,0.04)); color: var(--t-accent, inherit); } .theme-submenu-item.active { color: var(--t-accent, inherit); } .theme-submenu-item.active::before { content: '›'; margin-right: 4px; color: var(--t-accent); } .theme-submenu-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); border: 1px solid var(--t-border-hot, #2a2a2a); } .theme-submenu-name { font-size: 12px; } ul.theme-submenu { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } ul.theme-submenu::-webkit-scrollbar { width: 6px; } ul.theme-submenu::-webkit-scrollbar-thumb { background: var(--t-border-hot, #2a4a32); border-radius: 3px; } /* ── Hero photo + decoration layers (image-tint architecture) ──────── * .theme-hero-img holds the photo via `--theme-hero-url` and applies * `filter: var(--image-filter)` for the per-user image-tint slider. * .theme-deco holds the gradient overlays via `--theme-deco-bg` so they * paint OVER the photo and stay unaffected by the image filter. */ .theme-hero-img { position: fixed; inset: 0; pointer-events: none; z-index: -3; background-image: var(--theme-hero-url, none); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; filter: var(--image-filter, none); transition: filter 0.18s ease; } .theme-deco { position: fixed; inset: 0; pointer-events: none; z-index: -2; background-image: var(--theme-deco-bg, none); } .theme-bg-tint { display: none; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: transparent; transition: background 0.18s ease; } /* ── Mobile drawer Appearance section ──────────────────────────────── */ .mobile-appearance { padding: 4px 0 8px; } .mobile-appearance-label { font-size: 10px; color: var(--t-muted, #666); letter-spacing: 2px; text-transform: uppercase; padding: 4px 0 6px; } .mobile-theme-switcher { border-top: none !important; justify-content: flex-start !important; padding: 2px 0 !important; gap: 6px !important; } .mobile-theme-switcher button { width: 22px; height: 22px; } .mobile-iconset-switcher { display: inline-flex; gap: 4px; margin: 0; padding: 0; flex-wrap: wrap; } .mobile-iconset-switcher .lang-btn { min-width: 36px; } /* Language switcher ─────────────────────── */ .lang-switcher { padding: 6px 6px 10px; display: flex; gap: 4px; justify-content: center; border-top: 1px solid var(--t-border, #1b2a20); } .lang-switcher form { margin: 0; display: inline-flex; gap: 4px; } .lang-switcher .lang-btn { min-width: 28px; height: 22px; padding: 0 6px; font-size: 10px; font-weight: 600; letter-spacing: 1px; border-radius: 3px; border: 1px solid var(--t-border, #2a2a2a); background: transparent; color: var(--t-text2, #888); cursor: pointer; transition: all .12s; } .lang-switcher .lang-btn:hover { color: var(--t-text, #cfe0d1); border-color: var(--t-accent, #4af26a); } .lang-switcher .lang-btn.active { color: var(--t-accent, #4af26a); border-color: var(--t-accent, #4af26a); background: rgba(74,242,106,0.08); } /* ── Floating chat + Head Unit buttons/panels ─────────────────────── */ body:not(.theme-matrix) #chatToggle, body:not(.theme-matrix) #huToggle{ background: var(--t-surface) !important; border-color: var(--t-border-hot) !important; color: var(--t-text2) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.35) !important; } body:not(.theme-matrix) #chatToggle:hover, body:not(.theme-matrix) #huToggle:hover{ color: var(--t-accent) !important; border-color: var(--t-accent) !important; box-shadow: 0 0 18px color-mix(in srgb, var(--t-accent) 35%, transparent) !important; } body:not(.theme-matrix) #chatPanel, body:not(.theme-matrix) #huPanel{ background: var(--t-surface) !important; border-left-color: var(--t-border-hot) !important; } body:not(.theme-matrix) #huHeader{ background: var(--t-surface) !important; border-bottom-color: var(--t-border) !important; color: var(--t-text) !important; } body:not(.theme-matrix) #huLog{ background: var(--t-bg-soft) !important; color: var(--t-text) !important; } body:not(.theme-matrix) #huInputRow{ background: var(--t-surface) !important; border-top-color: var(--t-border) !important; } body:not(.theme-matrix) #huInput{ background: var(--t-bg-soft) !important; border-color: var(--t-border-hot) !important; color: var(--t-text) !important; } body:not(.theme-matrix) #huInput:focus{ border-color: var(--t-accent) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--t-accent) 30%, transparent) !important; } body:not(.theme-matrix) #huMicBtn, body:not(.theme-matrix) #huStartBtn{ background: var(--t-surface2) !important; border-color: var(--t-border-hot) !important; color: var(--t-accent) !important; } body:not(.theme-matrix) .hu-btn-send{ background: var(--t-accent) !important; border-color: var(--t-accent) !important; color: #ffffff !important; } /* ── Nav icons: recolor inline SVG fills ──────────────────────────── */ body:not(.theme-matrix) #navigation svg{ fill: var(--t-text2) !important; color: var(--t-text2) !important; } body:not(.theme-matrix) #navigation svg path{ fill: currentColor !important; } body:not(.theme-matrix) #navigation .nav-link:hover svg{ fill: var(--t-accent) !important; color: var(--t-accent) !important; } /* ── Kill Matrix-green bleed-through in pages that define local --mx-* palettes (dashboard/index, projects legacy, etc.). Map the mx-* vars to the theme vars when a non-matrix theme is active. ─── */ body:not(.theme-matrix){ --mx-bg: var(--t-bg); --mx-surface: var(--t-surface); --mx-surface2: var(--t-surface2); --mx-border: var(--t-border); --mx-border-hot: var(--t-border-hot); --mx-text: var(--t-text); --mx-text2: var(--t-text2); --mx-muted: var(--t-muted); --mx-accent: var(--t-accent); --mx-accent-bright: var(--t-accent-bright); --mx-accent-dim: var(--t-surface2); --mx-accent-glow: color-mix(in srgb, var(--t-accent) 35%, transparent); --mx-danger: var(--t-danger); --mx-warn: #d59f00; --mx-info: var(--t-accent); } /* ── Focus outline + input focus ring use theme accent ────────────── */ body:not(.theme-matrix) *:focus-visible{ outline-color: var(--t-accent) !important; } /* ── Alerts / chips / small common widgets ────────────────────────── */ body:not(.theme-matrix) .alert-warning{ background: var(--t-surface2) !important; border-color: var(--t-border-hot) !important; color: var(--t-text) !important; } body:not(.theme-matrix) .chip{ background: var(--t-surface2) !important; border-color: var(--t-border) !important; color: var(--t-text) !important; } /* ── Inline hex colors in HU panel that use #060a08 and #0d1410 ───── */ body:not(.theme-matrix) [style*="#060a08"], body:not(.theme-matrix) [style*="#0d1410"]{ background: var(--t-surface) !important; } body:not(.theme-matrix) [style*="#cfe0d1"], body:not(.theme-matrix) [style*="#4af26a"], body:not(.theme-matrix) [style*="#7e9285"]{ color: var(--t-text) !important; } body:not(.theme-matrix) [style*="#2a4a32"], body:not(.theme-matrix) [style*="#1b2a20"]{ border-color: var(--t-border-hot) !important; } /* ── Dashboard stat-box / section keep the --mx-* vars, now remapped. But rule elements that hardcoded the green in :before/:after via text-shadow or fill won't see overrides — kill them with blanket rule */ body:not(.theme-matrix) .stat-num, body:not(.theme-matrix) .pj-stat-num{ text-shadow: none !important; } /* ── Notes popup (#111/#1e1e1e baked into style.sass) — overrides for non-matrix themes ─── */ body:not(.theme-matrix) #notespopupinner{ background: var(--t-surface) !important; border-color: var(--t-border) !important; color: var(--t-text) !important; } body:not(.theme-matrix) #notespopupbg{ background: rgba(0,0,0,0.4) !important; } /* ── Ensure table-dark in light themes is not jet-black rows ──────── */ body:not(.theme-matrix) .table-dark > :not(caption) > * > *{ background: var(--t-surface) !important; color: var(--t-text) !important; } /* ════════════════════════════════════════════════════════════════════ * PER-THEME TYPOGRAPHY (Phase 3) — vendored woff2 only, swap fallback. * Matrix keeps its current monospace baseline; the 5 plain themes get * a font stack that matches their mood. Wasteland and Liminal define * their own typography in their own decoration blocks below. * ════════════════════════════════════════════════════════════════════ */ /* WHITE — Clean modern professional: Inter body, Inter display, JetBrains Mono */ body.theme-white { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; letter-spacing: -0.005em; } body.theme-white h1, body.theme-white h2, body.theme-white h3, body.theme-white h4, body.theme-white h5, body.theme-white h6 { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: -0.018em !important; } body.theme-white code, body.theme-white pre, body.theme-white kbd, body.theme-white samp, body.theme-white tt, body.theme-white .mono, body.theme-white .code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important; } /* GRAY — Neutral utilitarian: IBM Plex Sans + IBM Plex Mono */ body.theme-gray { font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important; } body.theme-gray h1, body.theme-gray h2, body.theme-gray h3, body.theme-gray h4, body.theme-gray h5, body.theme-gray h6 { font-family: 'IBM Plex Sans', system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: -0.012em !important; } body.theme-gray code, body.theme-gray pre, body.theme-gray kbd, body.theme-gray samp, body.theme-gray tt, body.theme-gray .mono, body.theme-gray .code { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important; } /* DARK-GRAY — Same family as gray, dark surface variant */ body.theme-dark-gray { font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important; } body.theme-dark-gray h1, body.theme-dark-gray h2, body.theme-dark-gray h3, body.theme-dark-gray h4, body.theme-dark-gray h5, body.theme-dark-gray h6 { font-family: 'IBM Plex Sans', system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: -0.012em !important; } body.theme-dark-gray code, body.theme-dark-gray pre, body.theme-dark-gray kbd, body.theme-dark-gray samp, body.theme-dark-gray tt, body.theme-dark-gray .mono, body.theme-dark-gray .code { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important; } /* BLACK — High contrast editorial: Manrope ExtraBold display + Inter body */ body.theme-black { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; letter-spacing: 0.005em; } body.theme-black h1, body.theme-black h2, body.theme-black h3, body.theme-black h4, body.theme-black h5, body.theme-black h6 { font-family: 'Manrope', 'Inter', system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: -0.022em !important; } body.theme-black code, body.theme-black pre, body.theme-black kbd, body.theme-black samp, body.theme-black tt, body.theme-black .mono, body.theme-black .code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important; } /* PINK — Soft rounded playful: Quicksand display + Nunito body */ body.theme-pink { font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif !important; font-weight: 400 !important; } body.theme-pink h1, body.theme-pink h2, body.theme-pink h3, body.theme-pink h4, body.theme-pink h5, body.theme-pink h6 { font-family: 'Quicksand', 'Nunito', system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: 0.005em !important; } body.theme-pink code, body.theme-pink pre, body.theme-pink kbd, body.theme-pink samp, body.theme-pink tt, body.theme-pink .mono, body.theme-pink .code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important; } /* ════════════════════════════════════════════════════════════════════ * THEME DECORATIONS — atmospheric, decorative-only overrides. * * These rules add the *design* (typography, photo background, grain, * scanlines, breathing/flicker animation, brackets, soft chromatic * aberration) on top of the variable-driven palette above. Every * decoration is opt-in by theme: matrix/white/gray/dark-gray/black/pink * stay clean — only wasteland and liminal load this surface design. * * Card-class set used across the app: * .hq-card .hqp-card .hqs-card .cr-card * .ceo-card .cto-card .cro-card .coo-card .cfo-card .ads-card * ════════════════════════════════════════════════════════════════════ */ /* ── Shared (wasteland + liminal): kill matrix glow + airy spacing ── */ body.theme-wasteland *, body.theme-liminal *{ text-shadow: none !important; } body:not(.theme-matrix) .background-darkness, body:not(.theme-matrix) .background-overlay, body:not(.theme-matrix) .crt-scanlines, body:not(.theme-matrix) .crt-grid { display: none !important; } body.theme-wasteland .table th, body.theme-liminal .table th, body.theme-wasteland .table td, body.theme-liminal .table td{ padding: 14px 18px !important; border-color: var(--t-border) !important; font-weight: 400 !important; } /* ════════════════════════════════════════════════════════════════════ * WASTELAND v2 — Interstellar / Greenland 2 / Death Stranding. * Vast cosmic vacuum. Photo background, warm dust amber, chiral cyan. * ════════════════════════════════════════════════════════════════════ */ /* Photo background — full-bleed, fixed, with heavy night-vacuum gradient */ body.theme-wasteland { --theme-hero-url: url('/static/themes/wasteland/hero.jpg'); background: linear-gradient(180deg, rgba(13, 16, 20, 0.55) 0%, rgba(13, 16, 20, 0.78) 55%, rgba(13, 16, 20, 0.93) 100%), url('/static/themes/wasteland/hero.jpg') center 35% / cover fixed no-repeat, #0d1014 !important; font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; line-height: 1.85 !important; font-weight: 400 !important; letter-spacing: 0.005em; } /* Dust grain overlay (SVG noise) — ~6% opacity, fixed, multiply blend */ /* Body must create a stacking context so the dust/scanline overlays * (z-index: -1) stay above body bg but BELOW page content. */ body.theme-wasteland { isolation: isolate; } body.theme-wasteland::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.07; mix-blend-mode: overlay; } /* Faint horizontal scanlines — sit behind content (z-index: -1) */ body.theme-wasteland::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: linear-gradient( to bottom, rgba(255, 230, 200, 0.025) 0px, rgba(255, 230, 200, 0.025) 1px, transparent 1px, transparent 3px); opacity: 0.6; } /* (z-index workaround removed — body.isolation:isolate + overlay z-index:-1 * keeps the dust/scanline layers behind content without forcing * `position: relative` on floating elements, which broke #chatToggle * and #huToggle by pulling them into document flow.) */ /* Sidebar — translucent so photo bleeds through */ body.theme-wasteland #navigation { background: rgba(13, 16, 20, 0.78) !important; backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05); border-right: 1px solid rgba(180, 170, 150, 0.12) !important; } /* Breathing animation: very slow, very gentle background-position drift. * Keeps the still photo feeling alive without animating positions of pixels. */ @keyframes wasteland-breathe { 0%, 100% { background-position: center 33%, center 35%, 0 0; } 50% { background-position: center 33%, center 38%, 0 0; } } @media (prefers-reduced-motion: no-preference) { body.theme-wasteland { animation: wasteland-breathe 24s ease-in-out infinite; } } /* ── Wasteland typography — serif display + monospace HUD labels ── */ body.theme-wasteland h1 { font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important; font-weight: 300 !important; font-size: clamp(2rem, 5vw, 4.5rem) !important; letter-spacing: -0.015em !important; line-height: 1.05 !important; margin: 0.6em 0 0.8em !important; color: var(--t-text) !important; } body.theme-wasteland h2 { /* Brutalist HUD label: small caps mono, wide-tracked */ font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important; font-weight: 400 !important; font-size: 0.85rem !important; letter-spacing: 0.32em !important; text-transform: uppercase !important; color: var(--t-text2) !important; margin: 1.6em 0 1em !important; } body.theme-wasteland h3, body.theme-wasteland h4 { font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important; font-weight: 400 !important; letter-spacing: 0 !important; } body.theme-wasteland h3 { font-size: 1.85rem !important; } body.theme-wasteland h4 { font-size: 1.45rem !important; } body.theme-wasteland h5, body.theme-wasteland h6 { font-family: 'JetBrains Mono', monospace !important; font-weight: 400 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; font-size: 0.78rem !important; color: var(--t-text2) !important; } body.theme-wasteland .hq-title, body.theme-wasteland .hqp-title, body.theme-wasteland .hqs-title, body.theme-wasteland .cr-title, body.theme-wasteland .ceo-title, body.theme-wasteland .cto-title, body.theme-wasteland .cro-title, body.theme-wasteland .coo-title, body.theme-wasteland .cfo-title, body.theme-wasteland .ads-title { font-family: 'JetBrains Mono', monospace !important; font-weight: 500 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--t-accent) !important; } /* Vast whitespace */ body.theme-wasteland .main { padding: 64px 72px !important; } @media (max-width: 768px) { body.theme-wasteland .main { padding: 36px 22px !important; } } /* Cards — translucent surface, brutalist 2px corner, HUD bracket frame */ body.theme-wasteland .card, body.theme-wasteland .hq-card, body.theme-wasteland .hqp-card, body.theme-wasteland .hqs-card, body.theme-wasteland .cr-card, body.theme-wasteland .ceo-card, body.theme-wasteland .cto-card, body.theme-wasteland .cro-card, body.theme-wasteland .coo-card, body.theme-wasteland .cfo-card, body.theme-wasteland .ads-card { position: relative; padding: 28px !important; background: rgba(20, 24, 30, 0.55) !important; border: 1px solid rgba(180, 170, 150, 0.15) !important; border-radius: 2px !important; box-shadow: none !important; backdrop-filter: blur(8px) saturate(1.05); -webkit-backdrop-filter: blur(8px) saturate(1.05); transition: border-color .25s ease, background-color .25s ease; } body.theme-wasteland .card:hover, body.theme-wasteland .hq-card:hover, body.theme-wasteland .hqp-card:hover, body.theme-wasteland .hqs-card:hover, body.theme-wasteland .cr-card:hover, body.theme-wasteland .ceo-card:hover, body.theme-wasteland .cto-card:hover, body.theme-wasteland .cro-card:hover, body.theme-wasteland .coo-card:hover, body.theme-wasteland .cfo-card:hover, body.theme-wasteland .ads-card:hover { border-color: rgba(220, 200, 160, 0.32) !important; background: rgba(28, 32, 38, 0.62) !important; } /* HUD corner brackets — thin 1px ticks at the four corners. * Drawn with two pseudo-element borders on top-left / bottom-right. */ body.theme-wasteland .hq-card::before, body.theme-wasteland .hqp-card::before, body.theme-wasteland .hqs-card::before, body.theme-wasteland .cr-card::before, body.theme-wasteland .ceo-card::before, body.theme-wasteland .cto-card::before, body.theme-wasteland .cro-card::before, body.theme-wasteland .coo-card::before, body.theme-wasteland .cfo-card::before, body.theme-wasteland .ads-card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px; border-top: 1px solid rgba(212, 165, 116, 0.55); border-left: 1px solid rgba(212, 165, 116, 0.55); pointer-events: none; } body.theme-wasteland .hq-card::after, body.theme-wasteland .hqp-card::after, body.theme-wasteland .hqs-card::after, body.theme-wasteland .cr-card::after, body.theme-wasteland .ceo-card::after, body.theme-wasteland .cto-card::after, body.theme-wasteland .cro-card::after, body.theme-wasteland .coo-card::after, body.theme-wasteland .cfo-card::after, body.theme-wasteland .ads-card::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 14px; height: 14px; border-bottom: 1px solid rgba(212, 165, 116, 0.55); border-right: 1px solid rgba(212, 165, 116, 0.55); pointer-events: none; } /* Buttons — ghost style, thin border, dust amber on hover */ body.theme-wasteland .btn, body.theme-wasteland button.btn-outline-primary, body.theme-wasteland button.btn-outline-secondary { font-family: 'JetBrains Mono', monospace !important; font-weight: 400 !important; font-size: 0.78rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; padding: 10px 22px !important; border-radius: 2px !important; box-shadow: none !important; transition: all .25s ease; } body.theme-wasteland .btn-primary, body.theme-wasteland .btn-success { background: transparent !important; border: 1px solid var(--t-accent) !important; color: var(--t-accent) !important; } body.theme-wasteland .btn-primary:hover, body.theme-wasteland .btn-success:hover { background: rgba(212, 165, 116, 0.12) !important; border-color: var(--t-accent-bright) !important; color: var(--t-accent-bright) !important; box-shadow: 0 0 14px rgba(212, 165, 116, 0.20) !important; } /* Inputs — airy, thin amber border on focus */ body.theme-wasteland .form-control, body.theme-wasteland .form-select, body.theme-wasteland input[type="text"], body.theme-wasteland input[type="password"], body.theme-wasteland input[type="email"], body.theme-wasteland textarea { padding: 12px 16px !important; border-radius: 2px !important; border-width: 1px !important; box-shadow: none !important; background: rgba(20, 24, 30, 0.65) !important; } body.theme-wasteland .form-control:focus, body.theme-wasteland .form-select:focus { border-color: var(--t-accent) !important; box-shadow: 0 0 0 1px rgba(212, 165, 116, 0.25) !important; } /* Sidebar nav: muted, breathing */ body.theme-wasteland #navigation .nav-link { padding: 12px 14px !important; letter-spacing: 0.10em !important; font-weight: 400 !important; font-family: 'JetBrains Mono', monospace !important; font-size: 0.82rem !important; text-transform: uppercase; } /* Links: chiral cyan with subtle underline-on-hover */ body.theme-wasteland a { color: var(--t-link) !important; text-decoration: none; transition: color .15s ease, text-shadow .25s ease; } body.theme-wasteland a:hover { color: #b6e6ee !important; text-shadow: 0 0 8px rgba(135, 204, 214, 0.35) !important; } /* ════════════════════════════════════════════════════════════════════ * LIMINAL MELANCHOLY — dark, sad, ambient. * Photo: empty subway entrance at night, fluorescent glow on dark tile. * Heavy slate-blue overlay desaturates + tints the photo so it reads as * a quiet atmospheric backdrop, not a full-bleed picture. No motion. * ════════════════════════════════════════════════════════════════════ */ body.theme-liminal { --theme-hero-url: url('/static/themes/liminal/hero.jpg'); background: linear-gradient(180deg, rgba(20, 24, 31, 0.74) 0%, rgba(20, 24, 31, 0.86) 60%, rgba(20, 24, 31, 0.95) 100%), url('/static/themes/liminal/hero.jpg') center 40% / cover fixed no-repeat, #14181f !important; background-blend-mode: normal, multiply, normal; font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important; line-height: 1.75 !important; font-weight: 400 !important; letter-spacing: 0.005em; isolation: isolate; } /* Layer 1 (::before): heavy corner vignette — pushes the photo to the * edges of perception, keeps reading focus on content. */ body.theme-liminal::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.30) 80%, rgba(0, 0, 0, 0.55) 100%); } /* Layer 2 (::after): very faint horizontal scanlines — sells "room lit * by an old monitor", static (no animation), 4% opacity max. Calm. */ body.theme-liminal::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: repeating-linear-gradient( to bottom, rgba(140, 156, 175, 0.04) 0px, rgba(140, 156, 175, 0.04) 1px, transparent 1px, transparent 3px); opacity: 0.5; mix-blend-mode: screen; } body.theme-liminal #navigation{ background: var(--t-surface) !important; backdrop-filter: blur(12px) saturate(0.95); -webkit-backdrop-filter: blur(12px) saturate(0.95); border-right: 1px solid var(--t-border) !important; } /* ── Liminal typography — DM Sans, lowercase, italic accents ── */ body.theme-liminal h1, body.theme-liminal h2, body.theme-liminal h3, body.theme-liminal h4, body.theme-liminal h5, body.theme-liminal h6{ font-family: 'DM Sans', system-ui, sans-serif !important; text-transform: lowercase !important; } body.theme-liminal h1{ font-weight: 400 !important; font-size: clamp(1.9rem, 4vw, 3.5rem) !important; letter-spacing: -0.012em !important; line-height: 1.1 !important; color: var(--t-text) !important; margin: 0.6em 0 0.8em !important; transition: filter .22s ease; } body.theme-liminal h2{ font-weight: 400 !important; font-style: italic !important; font-size: 1.4rem !important; color: var(--t-accent) !important; letter-spacing: 0.01em !important; margin: 1.4em 0 0.8em !important; } body.theme-liminal h3{ font-weight: 500 !important; font-size: 1.2rem !important; } body.theme-liminal h4{ font-weight: 500 !important; font-size: 1.05rem !important; } body.theme-liminal h5, body.theme-liminal h6{ font-weight: 500 !important; font-size: 0.85rem !important; letter-spacing: 0.06em !important; color: var(--t-text2) !important; } /* Hover: simple soft glow, no chromatic aberration. */ body.theme-liminal a:hover{ color: var(--t-accent-bright) !important; text-shadow: 0 0 6px rgba(var(--t-accent-rgb), 0.30); } /* Liminal main: cozier than wasteland, container max 720px */ body.theme-liminal .main{ padding: 56px 48px !important; } @media (max-width: 768px) { body.theme-liminal .main{ padding: 32px 20px !important; } } /* Cards — soft 18px round, soft shadow, blur + saturate */ body.theme-liminal .card, body.theme-liminal .hq-card, body.theme-liminal .hqp-card, body.theme-liminal .hqs-card, body.theme-liminal .cr-card, body.theme-liminal .ceo-card, body.theme-liminal .cto-card, body.theme-liminal .cro-card, body.theme-liminal .coo-card, body.theme-liminal .cfo-card, body.theme-liminal .ads-card{ position: relative; padding: 26px !important; background: var(--t-surface) !important; border: 1px solid var(--t-border) !important; border-radius: 14px !important; box-shadow: 0 2px 22px rgba(0, 0, 0, 0.30) !important; backdrop-filter: blur(14px) saturate(0.95); -webkit-backdrop-filter: blur(14px) saturate(0.95); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } body.theme-liminal .card:hover, body.theme-liminal .hq-card:hover, body.theme-liminal .hqp-card:hover, body.theme-liminal .hqs-card:hover, body.theme-liminal .cr-card:hover, body.theme-liminal .ceo-card:hover, body.theme-liminal .cto-card:hover, body.theme-liminal .cro-card:hover, body.theme-liminal .coo-card:hover, body.theme-liminal .cfo-card:hover, body.theme-liminal .ads-card:hover{ border-color: var(--t-border-hot) !important; box-shadow: 0 4px 28px rgba(0, 0, 0, 0.42) !important; transform: translateY(-1px); } /* Buttons — soft pill, dusty rose */ body.theme-liminal .btn{ font-family: 'DM Sans', sans-serif !important; font-weight: 500 !important; font-size: 0.88rem !important; letter-spacing: 0.005em !important; text-transform: lowercase !important; padding: 9px 22px !important; border-radius: 999px !important; box-shadow: none !important; transition: all .2s ease; } body.theme-liminal .btn-primary, body.theme-liminal .btn-success{ background: var(--t-accent) !important; border: 1px solid var(--t-accent) !important; color: var(--t-bg) !important; } body.theme-liminal .btn-primary:hover, body.theme-liminal .btn-success:hover{ background: var(--t-accent-bright) !important; border-color: var(--t-accent-bright) !important; box-shadow: 0 4px 18px rgba(var(--t-accent-rgb), 0.22) !important; } /* Inputs — translucent dark surface, faded amber focus ring */ body.theme-liminal .form-control, body.theme-liminal .form-select, body.theme-liminal input[type="text"], body.theme-liminal input[type="password"], body.theme-liminal input[type="email"], body.theme-liminal textarea{ padding: 11px 16px !important; border-radius: 12px !important; border-width: 1px !important; border-color: var(--t-border) !important; box-shadow: none !important; background: rgba(28, 33, 41, 0.65) !important; color: var(--t-text) !important; } body.theme-liminal .form-control:focus, body.theme-liminal .form-select:focus{ border-color: var(--t-link) !important; box-shadow: 0 0 0 3px rgba(184, 152, 120, 0.18) !important; } /* Sidebar nav: lowercase soft */ body.theme-liminal #navigation .nav-link{ padding: 11px 14px !important; letter-spacing: 0.005em !important; font-weight: 500 !important; text-transform: lowercase; } /* Links: faded teal */ body.theme-liminal a{ color: var(--t-link) !important; transition: color .15s ease; } body.theme-liminal a:hover{ color: #4f8089 !important; } /* ════════════════════════════════════════════════════════════════════ * SUBLIMINAL MELANCHOLY — hypnagogia / Disintegration Loops / VHS * dead-channel / Boards of Canada. Below conscious perception. * Velvet midnight violet, moonlit lavender, faded ghost-cyan. * * Subliminal-specific rules sit AFTER the shared liminal+subliminal * decorations above so they win the cascade by source order on /* Sidebar: translucent, lavender ghost border */ /* ── Subliminal typography — Italiana ultra-thin H1, EB Garamond italic * H2, Space Mono small-caps H3 (retrofuturistic HUD label). ── */ /* HQ panel titles get the Space Mono lavender treatment */ /* ── Subliminal main: 10rem section padding, 760px max — closer to * memory than wasteland's vastness, larger than liminal's 720px. ── */ @media (max-width: 768px) { } /* ── Cards: hesitant 8px geometry (between wasteland 2px brutalism and * liminal 18px softness), translucent surface, subtle inner glow. ── */ /* ── Buttons: thin lavender border, faded ghost-cyan on primary, * soft phosphor halo on hover (CRT afterglow). ── */ /* Inputs — translucent, lavender focus ring */ /* Sidebar nav: Space Mono small-caps */ /* Links: faded ghost-cyan with phosphor glow on hover */ /* ── Subliminal overlay: a single very subtle vignette. No grain, no * scanlines, no animations — just a calm dark room feel. ── */ /* Subliminal extras (clock / hiss / dividers) removed — defensively * hide any stale DOM nodes from older renders or the back/forward cache. */ #sublim-clock, #sublim-hiss, .sublim-divider { display: none !important; } /* ════════════════════════════════════════════════════════════════════ * Per-theme bg + decorations using --theme-hero-url + --theme-deco-bg * architecture, so the image-tint slider can apply `filter: brightness()` * to the .theme-hero-img layer alone. * ════════════════════════════════════════════════════════════════════ */ body.theme-akira { --theme-hero-url: url('/static/themes/akira/hero.jpg'); --theme-deco-bg: radial-gradient(ellipse at center, rgba(8,0,10,0.30) 0%, rgba(8,0,10,0.75) 65%, rgba(8,0,10,0.95) 100%), radial-gradient(ellipse at 80% 0%, rgba(0,212,255,0.22) 0%, transparent 55%), radial-gradient(ellipse at 10% 100%, rgba(255,0,60,0.30) 0%, transparent 60%); background: #08000a !important; isolation: isolate; } body.theme-akira::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: linear-gradient(to bottom, rgba(255,0,60,0.05) 0px, rgba(255,0,60,0.05) 1px, transparent 1px, transparent 3px); opacity: 0.85; } body.theme-akira::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: url('/static/themes/akira/logo.svg') right 5vw bottom 6vh / min(40vmin, 380px) no-repeat; opacity: 0.55; filter: drop-shadow(0 0 18px rgba(255,0,60,0.45)); } body.theme-akira #navigation { background: rgba(8,0,10,0.85) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-right: 1px solid rgba(255,0,60,0.20) !important; } body.theme-naruto { --theme-hero-url: url('/static/themes/naruto/hero.jpg'); --theme-deco-bg: radial-gradient(ellipse at center, rgba(22,10,2,0.25) 0%, rgba(22,10,2,0.70) 60%, rgba(22,10,2,0.94) 100%), radial-gradient(ellipse at 75% 25%, rgba(255,140,42,0.25) 0%, transparent 55%); background: #160a02 !important; isolation: isolate; } body.theme-naruto::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: url('/static/themes/naruto/symbol.svg') right 6vw center / min(48vmin, 460px) no-repeat; opacity: 0.32; filter: drop-shadow(0 0 20px rgba(255,140,42,0.35)); } body.theme-naruto #navigation { background: rgba(22,10,2,0.88) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-right: 1px solid rgba(255,140,42,0.22) !important; } body.theme-sakura { --theme-hero-url: url('/static/themes/sakura/hero.jpg'); --theme-deco-bg: radial-gradient(ellipse at center, rgba(255,245,248,0.20) 0%, rgba(255,240,246,0.55) 60%, rgba(255,232,240,0.82) 100%); background: #fff5f8 !important; isolation: isolate; } body.theme-sakura::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: url("data:image/svg+xml;utf8,"); background-size: 180px 180px; opacity: 0.7; } body.theme-sakura #navigation { background: rgba(255,240,246,0.90) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-right: 1px solid rgba(214,51,132,0.20) !important; color: var(--t-text) !important; } body.theme-sakura #navigation .nav-link { color: var(--t-text) !important; } body.theme-fbi { --theme-hero-url: url('/static/themes/fbi/hero.jpg'); --theme-deco-bg: radial-gradient(ellipse at center, rgba(10,25,41,0.30) 0%, rgba(10,25,41,0.72) 60%, rgba(10,25,41,0.94) 100%), radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.18) 0%, transparent 65%); background: #0a1929 !important; isolation: isolate; } body.theme-fbi::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: repeating-linear-gradient(45deg, rgba(212,175,55,0.05) 0px, rgba(212,175,55,0.05) 1px, transparent 1px, transparent 8px); opacity: 0.85; } body.theme-fbi::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: url('/static/themes/fbi/hero.svg') right 5vw bottom 6vh / min(36vmin, 320px) no-repeat; opacity: 0.55; filter: drop-shadow(0 0 16px rgba(212,175,55,0.40)); } body.theme-fbi #navigation { background: rgba(15,34,56,0.92) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-right: 1px solid rgba(212,175,55,0.25) !important; } body.theme-cia { --theme-hero-url: url('/static/themes/cia/hero.jpg'); --theme-deco-bg: radial-gradient(ellipse at center, rgba(10,13,18,0.55) 0%, rgba(10,13,18,0.82) 65%, rgba(10,13,18,0.95) 100%), radial-gradient(ellipse at 30% 50%, rgba(110,137,168,0.16) 0%, transparent 60%); background: #0a0d12 !important; isolation: isolate; } body.theme-cia::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: linear-gradient(rgba(184,184,184,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(184,184,184,0.04) 1px, transparent 1px); background-size: 40px 40px, 40px 40px; opacity: 0.7; } body.theme-cia::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: url('/static/themes/cia/hero.svg') right 5vw bottom 6vh / min(34vmin, 300px) no-repeat; opacity: 0.45; filter: drop-shadow(0 0 12px rgba(184,184,184,0.30)); } body.theme-cia #navigation { background: rgba(10,13,18,0.92) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-right: 1px solid rgba(184,184,184,0.18) !important; } body.theme-soviet { --theme-hero-url: url('/static/themes/soviet/hero.jpg'); --theme-deco-bg: radial-gradient(ellipse at center, rgba(26,6,6,0.30) 0%, rgba(26,6,6,0.70) 60%, rgba(26,6,6,0.95) 100%), radial-gradient(ellipse at 80% 20%, rgba(232,197,71,0.20) 0%, transparent 55%); background: #1a0606 !important; isolation: isolate; } body.theme-soviet::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: url('/static/themes/soviet/emblem.svg') right 5vw bottom 6vh / min(38vmin, 360px) no-repeat; opacity: 0.55; filter: drop-shadow(0 0 16px rgba(232,197,71,0.45)); } body.theme-soviet::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: repeating-linear-gradient(-25deg, rgba(204,31,31,0.07) 0px, rgba(204,31,31,0.07) 8px, transparent 8px, transparent 32px); opacity: 0.75; } body.theme-soviet #navigation { background: rgba(38,10,10,0.92) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-right: 1px solid rgba(232,197,71,0.25) !important; } body.theme-urban { --theme-hero-url: url('/static/themes/urban/hero.jpg'); --theme-deco-bg: radial-gradient(ellipse at center, rgba(24,26,29,0.30) 0%, rgba(24,26,29,0.70) 60%, rgba(24,26,29,0.92) 100%), radial-gradient(ellipse at 50% 100%, rgba(214,177,50,0.15) 0%, transparent 55%); background: #181a1d !important; isolation: isolate; } body.theme-urban::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.10; mix-blend-mode: overlay; } body.theme-urban::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: repeating-linear-gradient(45deg, rgba(214,177,50,0.05) 0px, rgba(214,177,50,0.05) 16px, transparent 16px, transparent 64px); opacity: 0.65; } body.theme-urban #navigation { background: rgba(32,35,42,0.88) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-right: 1px solid rgba(214,177,50,0.20) !important; } body.theme-cyberpunk { --theme-hero-url: url('/static/themes/cyberpunk/hero.jpg'); --theme-deco-bg: radial-gradient(ellipse at center, rgba(6,0,16,0.25) 0%, rgba(6,0,16,0.65) 60%, rgba(6,0,16,0.92) 100%), radial-gradient(ellipse at 20% 10%, rgba(252,238,12,0.18) 0%, transparent 50%), radial-gradient(ellipse at 85% 90%, rgba(255,46,154,0.22) 0%, transparent 55%); background: #060010 !important; isolation: isolate; } body.theme-cyberpunk::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(to bottom, rgba(252,238,12,0.05) 0px, rgba(252,238,12,0.05) 1px, transparent 1px, transparent 3px); opacity: 0.85; } body.theme-cyberpunk::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: url('/static/themes/cyberpunk/logo.svg') right 5vw bottom 6vh / min(38vmin, 420px) no-repeat; opacity: 0.78; filter: drop-shadow(0 0 18px rgba(252,238,12,0.55)); } body.theme-cyberpunk #navigation { background: rgba(6,0,16,0.86) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-right: 1px solid rgba(252,238,12,0.22) !important; } body.theme-nier { --theme-hero-url: url('/static/themes/nier/hero.jpg'); --theme-deco-bg: radial-gradient(ellipse at center, rgba(32,32,26,0.30) 0%, rgba(32,32,26,0.68) 60%, rgba(32,32,26,0.92) 100%), radial-gradient(ellipse at 50% 10%, rgba(201,184,122,0.15) 0%, transparent 60%); background: #20201a !important; isolation: isolate; } body.theme-nier::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.06; mix-blend-mode: overlay; } body.theme-nier::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: url('/static/themes/nier/logo.svg') right 6vw bottom 6vh / min(40vmin, 420px) no-repeat; opacity: 0.55; filter: drop-shadow(0 0 14px rgba(201,184,122,0.35)); } body.theme-nier #navigation { background: rgba(32,32,26,0.90) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-right: 1px solid rgba(201,184,122,0.22) !important; } /* ════════════════════════════════════════════════════════════════════ * BROAD CLEAN-UP for non-matrix themes: * 1. Catch more hardcoded matrix-palette colors in inline styles. * 2. Force opaque surfaces on common card/panel patterns so the * background photo doesn't bleed through buttons & panels. * Scoped to body:not(.theme-matrix) so Matrix is unaffected. * ════════════════════════════════════════════════════════════════════ */ /* Matrix palette hex aliases — anywhere they appear inline as text * color, force the active theme's text color. */ body:not(.theme-matrix) [style*="#4af26a"]:not([style*="background"]), body:not(.theme-matrix) [style*="#cfe0d1"]:not([style*="background"]), body:not(.theme-matrix) [style*="#d4e8d6"]:not([style*="background"]), body:not(.theme-matrix) [style*="#7e9285"]:not([style*="background"]), body:not(.theme-matrix) [style*="#52525b"]:not([style*="background"]), body:not(.theme-matrix) [style*="#3e5143"]:not([style*="background"]) { color: var(--t-text) !important; } /* Matrix-palette hex aliases as backgrounds → use theme surface. */ body:not(.theme-matrix) [style*="background:#0d1410"], body:not(.theme-matrix) [style*="background:#060a08"], body:not(.theme-matrix) [style*="background:#080d0a"], body:not(.theme-matrix) [style*="background: #0d1410"], body:not(.theme-matrix) [style*="background: #060a08"], body:not(.theme-matrix) [style*="background: #080d0a"], body:not(.theme-matrix) [style*="background-color:#0d1410"], body:not(.theme-matrix) [style*="background-color:#060a08"], body:not(.theme-matrix) [style*="background-color:#080d0a"] { background-color: var(--t-surface) !important; } /* Generic opaque backdrops for common card-like classes used across * apps (projects, clients, playground, dashboard, CRM, taskboard, etc.). * These typically have transparent or rgba backgrounds that let the * theme photo bleed through. */ body:not(.theme-matrix) .card, body:not(.theme-matrix) .panel, body:not(.theme-matrix) .pj-card, body:not(.theme-matrix) .pj-panel, body:not(.theme-matrix) .ad-card, body:not(.theme-matrix) .cl-card, body:not(.theme-matrix) .cl-panel, body:not(.theme-matrix) .pg-card, body:not(.theme-matrix) .pg-panel, body:not(.theme-matrix) .tb-card, body:not(.theme-matrix) .tb-panel, body:not(.theme-matrix) .crm-card, body:not(.theme-matrix) .session-card, body:not(.theme-matrix) .ds-card, body:not(.theme-matrix) .ds-panel { background-color: var(--t-surface) !important; border-color: var(--t-border) !important; } /* Generic buttons that lack a class — give them a readable opaque bg. */ body:not(.theme-matrix) button:not(.btn):not(.theme-submenu-item):not([class*="reset"]):not([class*="ghost"]):not(.swal2-styled):not(.lang-btn):not(.theme-switcher *) { background-color: var(--t-surface2) !important; color: var(--t-text) !important; border-color: var(--t-border-hot) !important; } body:not(.theme-matrix) button:not(.btn):not(.theme-submenu-item):not([class*="reset"]):not([class*="ghost"]):not(.swal2-styled):not(.lang-btn):not(.theme-switcher *):hover { background-color: color-mix(in srgb, var(--t-accent) 15%, var(--t-surface2)) !important; border-color: var(--t-accent) !important; color: var(--t-accent) !important; } /* Inputs — many templates style inputs inline, which on photo themes * looks see-through. Force opaque surface. */ body:not(.theme-matrix) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), body:not(.theme-matrix) textarea, body:not(.theme-matrix) select { background-color: var(--t-surface) !important; color: var(--t-text) !important; border-color: var(--t-border) !important; } /* Section nav (used on dashboard) */ body:not(.theme-matrix) .section-nav a { background-color: var(--t-surface) !important; border-color: var(--t-border-hot) !important; color: var(--t-text2) !important; } body:not(.theme-matrix) .section-nav a.active, body:not(.theme-matrix) .section-nav a:hover { background-color: var(--t-accent-dim) !important; border-color: var(--t-accent) !important; color: var(--t-accent) !important; } /* ════════════════════════════════════════════════════════════════════ * HEAD UNIT (admin floating panel) — title + close button visibility * across non-matrix themes. base.html hardcodes matrix-palette colors * (#cfe0d1 text, #1a1a1a bg, #3a2a2a border, #1d3a24 etc.) which read * fine on Matrix but blend out on themed backgrounds. Override here. * ════════════════════════════════════════════════════════════════════ */ /* Header title text + status pill */ body:not(.theme-matrix) #huHeader, body:not(.theme-matrix) #huHeader .hu-title-text, body:not(.theme-matrix) #huHeader .hu-header-title, body:not(.theme-matrix) #huHeader .hu-header-title > span { color: var(--t-text) !important; } body:not(.theme-matrix) #huStatus { color: var(--t-text2) !important; } /* Start button — was matrix-accent-dim bg + matrix-accent text */ body:not(.theme-matrix) #huStartBtn { background: var(--t-accent-dim) !important; border-color: var(--t-accent) !important; color: var(--t-accent) !important; } body:not(.theme-matrix) #huStartBtn:hover { background: var(--t-accent) !important; color: var(--t-accent-fg, #ffffff) !important; } /* Close button — was bg #1a1a1a, color #cfe0d1, border #3a2a2a */ body:not(.theme-matrix) #huCloseBtn, body:not(.theme-matrix) #chatPanelHeader button[onclick*="chatPanel"] { background: var(--t-surface2) !important; border-color: var(--t-border-hot) !important; color: var(--t-text) !important; } body:not(.theme-matrix) #huCloseBtn:hover, body:not(.theme-matrix) #huCloseBtn:focus, body:not(.theme-matrix) #huCloseBtn:active, body:not(.theme-matrix) #chatPanelHeader button[onclick*="chatPanel"]:hover { background: var(--t-danger) !important; border-color: var(--t-danger) !important; color: #ffffff !important; } /* Catch the remaining matrix-palette hex values used as inline styles * across the Head Unit and chat panel (bg accent-dim, dark border). */ body:not(.theme-matrix) [style*="#1d3a24"]:not([style*="background:none"]) { background: var(--t-accent-dim) !important; } body:not(.theme-matrix) [style*="#3a2a2a"] { border-color: var(--t-border-hot) !important; } body:not(.theme-matrix) [style*="#1a1a1a"]:not([style*="background:none"]) { background: var(--t-surface2) !important; }