/* ═══════════════════════════════════════════════════════════════════════════ tk_theme.css — v2.2 surface layer Loaded AFTER layout_header.php's inline tokens and theme_accent.css, so it has the last word on background, surface and border colour. THREE PROBLEMS THIS FIXES ───────────────────────── 1. CUSTOM COLOURS DID NOT TINT THE PAGE. --bg-body / --bg-card were hard-coded per accent, e.g. :root[data-theme="dark"][data-accent="maroon"] { --bg-body:#590e30; } A custom hex sets data-accent="custom", which matches none of those rules — so the page kept the default background and only the buttons and icons picked up the new colour. That is exactly the #ea580c case. Backgrounds are now DERIVED from --accent-solid via color-mix, so any colour works, including one typed into the hex box. 2. THE PRESETS WERE OVERWHELMING. Those hard-coded values sat at roughly 40-60% saturation across the whole viewport, which is why maroon read as "bloody". The accent is now mixed in at 9-14% over a near-black (or near-white) base — present enough to tint the page, quiet enough to read against for hours. 3. FLAT, BORDERLESS SURFACES. Cards sat on the body with almost no separation. There is now a layered radial wash on (the glassy look from the sign-in page) plus a genuinely visible border token used by every card class. `!important` is required on the custom properties here: the per-accent rules above carry two attribute selectors and would otherwise win on specificity. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Single source of truth. Falls back to blue if nothing set it yet. */ --tk-a: var(--accent-solid, #1b6bf5); } /* ── DARK ────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --bg-body: color-mix(in srgb, var(--tk-a) 13%, #05070e) !important; --bg-card: color-mix(in srgb, var(--tk-a) 9%, #090d17) !important; --bg-lift: color-mix(in srgb, var(--tk-a) 14%, #0d1220) !important; --text-main: #eef2fb !important; --text-muted: #a9b6cd !important; /* Was near-invisible at ~6% opacity; now clearly delineates every card. */ --border-color: color-mix(in srgb, var(--tk-a) 30%, rgba(255,255,255,.22)) !important; --tk-border-strong: color-mix(in srgb, var(--tk-a) 46%, rgba(255,255,255,.34)); --tk-glass: color-mix(in srgb, var(--tk-a) 11%, rgba(10,14,24,.72)); } /* ── LIGHT ───────────────────────────────────────────────────────────────── */ :root[data-theme="light"] { /* LIGHT MODE: the accent barely showed and cards were pure white. Two changes: - the accent is mixed far harder (22% on the body) because a tint that reads clearly on a near-black base is almost invisible on a near-white one — the same 9% simply disappeared; - the base is a soft grey (#e9eef6 / #fafbfd), never #ffffff, so cards separate from the page instead of merging into one white sheet. */ --bg-body: color-mix(in srgb, var(--tk-a) 22%, #e9eef6) !important; --bg-card: color-mix(in srgb, var(--tk-a) 7%, #fafbfd) !important; --bg-lift: color-mix(in srgb, var(--tk-a) 13%, #f4f7fb) !important; /* LIGHT-MODE READABILITY. Several accents (amber, gold, orange, sunflower) previously left light mode with pale text on a pale tint. Text is now a near-black that is only faintly accent-tinted, so it stays legible against every accent. */ --text-main: color-mix(in srgb, var(--tk-a) 12%, #0d1526) !important; --text-muted: color-mix(in srgb, var(--tk-a) 10%, #46536b) !important; --border-color: color-mix(in srgb, var(--tk-a) 34%, rgba(15,23,42,.22)) !important; --tk-border-strong: color-mix(in srgb, var(--tk-a) 50%, rgba(15,23,42,.34)); --tk-glass: color-mix(in srgb, var(--tk-a) 6%, rgba(255,255,255,.78)); } /* Browsers without color-mix keep the original flat tokens rather than collapsing to an unreadable default. */ @supports not (color: color-mix(in srgb, red 50%, blue)) { :root[data-theme="dark"] { --bg-body:#05070e !important; --bg-card:#090d17 !important; --border-color:rgba(255,255,255,.24) !important; } :root[data-theme="light"] { --bg-body:#e9eef6 !important; --bg-card:#fafbfd !important; --text-main:#0d1526 !important; --border-color:rgba(15,23,42,.24) !important; } } /* ── GLASSY BODY WASH ──────────────────────────────────────────────────────── The layered radial tints from the sign-in page, applied site-wide. fixed attachment keeps them anchored while content scrolls, so the page reads as one continuous surface rather than a flat block. */ body { background-color: var(--bg-body) !important; background-image: radial-gradient(70% 55% at 12% 0%, color-mix(in srgb, var(--tk-a) 26%, transparent) 0%, transparent 60%), radial-gradient(60% 50% at 100% 8%, color-mix(in srgb, var(--tk-a) 18%, transparent) 0%, transparent 58%), radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--tk-a) 12%, transparent) 0%, transparent 62%) !important; background-attachment: fixed !important; background-repeat: no-repeat !important; } @supports not (color: color-mix(in srgb, red 50%, blue)) { body { background-image: none !important; } } /* The radial wash needs more weight on a light base for the same reason the flat tint did — light surfaces swallow low-opacity colour. */ :root[data-theme="light"] body { background-image: radial-gradient(70% 55% at 12% 0%, color-mix(in srgb, var(--tk-a) 42%, transparent) 0%, transparent 62%), radial-gradient(60% 50% at 100% 8%, color-mix(in srgb, var(--tk-a) 32%, transparent) 0%, transparent 60%), radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--tk-a) 22%, transparent) 0%, transparent 64%) !important; } /* Pure white is never used as a surface anywhere, per the same reasoning. */ :root[data-theme="light"] .bg-white, :root[data-theme="light"] .bg-slate-50, :root[data-theme="light"] .bg-gray-50, :root[data-theme="light"] .bg-slate-100 { background-color: var(--bg-card) !important; } /* ── VISIBLE BORDERS + GLASS ON EVERY CARD SURFACE ─────────────────────────── One rule covering the card classes used across the app, so borders are consistently visible instead of varying page by page. */ .card, .neu-card, .glass-card, .stat-card, .panel, .modal-content, .sp-panel, .sp-grade-card, .sp-mat-card, .sp-stat-card, .sp-tbl-shell, .sp-access-card, .sp-highlight-card, .dash-card, .widget, .box, .content-card, .data-card, .section-card { border: 1px solid var(--border-color) !important; background-color: var(--tk-glass, var(--bg-card)) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -14px rgba(0,0,0,.45); } .card:hover, .neu-card:hover, .stat-card:hover, .dash-card:hover, .sp-grade-card:hover, .sp-mat-card:hover { border-color: var(--tk-border-strong, var(--border-color)) !important; } /* Tables: rules were often invisible against the tinted surface. */ table th, table td, .sp-tbl th, .sp-tbl td, .table th, .table td { border-color: var(--border-color) !important; } thead th, .sp-tbl thead th { border-bottom: 2px solid var(--tk-border-strong, var(--border-color)) !important; } /* Inputs, selects and textareas get the same treatment so fields read as fields rather than dissolving into the page. */ input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea, .inp, .neu-input, .sp-input-container, .q-input, .q-select, .q-textarea { border: 1.5px solid var(--border-color) !important; } input:focus, select:focus, textarea:focus, .inp:focus, .neu-input:focus, .sp-input-container:focus-within { border-color: var(--tk-a) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tk-a) 20%, transparent) !important; } /* Sidebar / header separation against the new washed body. */ aside, .sidebar, header, .topbar, .app-header { border-color: var(--border-color) !important; } /* ── LIGHT-MODE TEXT SAFETY NET ────────────────────────────────────────────── Utility classes with baked-in light greys (Tailwind's slate-300/400/500 and similar) were unreadable once the light surface became accent-tinted. These are re-pointed at the theme's own muted tone, which is contrast-checked against every accent. */ :root[data-theme="light"] .text-slate-300, :root[data-theme="light"] .text-slate-400, :root[data-theme="light"] .text-slate-500, :root[data-theme="light"] .text-gray-300, :root[data-theme="light"] .text-gray-400, :root[data-theme="light"] .text-white\/60, :root[data-theme="light"] .text-white\/70 { color: var(--text-muted) !important; } :root[data-theme="light"] .text-white, :root[data-theme="light"] .text-slate-100, :root[data-theme="light"] .text-slate-200 { color: var(--text-main) !important; } /* Keep white text white where it sits on a filled accent button. */ :root[data-theme="light"] .btn-primary, :root[data-theme="light"] .btn-primary *, :root[data-theme="light"] .btn-accent, :root[data-theme="light"] .btn-accent *, :root[data-theme="light"] .cta, :root[data-theme="light"] .cta *, :root[data-theme="light"] .tk-cta, :root[data-theme="light"] .tk-cta *, :root[data-theme="light"] .sp-continue-btn, :root[data-theme="light"] .sp-continue-btn * { color: #fff !important; } /* The sign-in and portal hero panels stay dark in both modes by design — white text on them must not be flipped by the rules above. */ .tk-brand, .tk-brand *, .sp-hero-section, .sp-hero-section * { --text-main: #ffffff; } :root[data-theme="light"] .tk-brand .tk-headline, :root[data-theme="light"] .tk-brand .tk-blurb, :root[data-theme="light"] .tk-brand .tk-brand-tag, :root[data-theme="light"] .sp-hero-section .sp-hero-main-title, :root[data-theme="light"] .sp-hero-section .sp-hero-subtitle { color: #fff !important; } @media print { body { background-image: none !important; background-color: #fff !important; } .card, .neu-card, .panel { backdrop-filter: none !important; box-shadow: none !important; } } /* ═══ PORTAL LIGHT-MODE SAFETY NET ══════════════════════════════════════════ portal.php sets its --sp-* palette inline and is now light-aware, but a few rules in that file hard-code #fff on elements that sit on a CARD rather than on the dark hero. In light mode those were white-on-white. They are re-bound to the palette token, which is dark in light mode and near-white in dark mode — so this is correct in both, not a light-mode-only patch. */ :root[data-theme="light"] .sp-panel, :root[data-theme="light"] .sp-panel-head, :root[data-theme="light"] .sp-access-card, :root[data-theme="light"] .sp-access-title, :root[data-theme="light"] .sp-access-subtitle, :root[data-theme="light"] .sp-field-label, :root[data-theme="light"] .sp-hl-title, :root[data-theme="light"] .sp-hl-desc, :root[data-theme="light"] .sp-stat-label, :root[data-theme="light"] .sp-stat-val, :root[data-theme="light"] .sp-tbl, :root[data-theme="light"] .sp-tbl thead th, :root[data-theme="light"] .sp-tbl tbody td, :root[data-theme="light"] .sp-grade-card, :root[data-theme="light"] .sp-mat-card, :root[data-theme="light"] .sp-res-tab, :root[data-theme="light"] .sp-tab-btn, :root[data-theme="light"] .sp-empty-text, :root[data-theme="light"] .sp-input, :root[data-theme="light"] .sp-select { color: var(--sp-text) !important; } :root[data-theme="light"] .sp-access-subtitle, :root[data-theme="light"] .sp-hl-desc, :root[data-theme="light"] .sp-field-label, :root[data-theme="light"] .sp-stat-label, :root[data-theme="light"] .sp-empty-text { color: var(--sp-label) !important; } /* Filled buttons keep white text on their accent fill. */ :root[data-theme="light"] .sp-continue-btn, :root[data-theme="light"] .sp-continue-btn *, :root[data-theme="light"] .sp-tab-btn.is-active, :root[data-theme="light"] .sp-tab-btn.is-active *, :root[data-theme="light"] .sp-res-tab.is-active, :root[data-theme="light"] .sp-res-tab.is-active * { color: #fff !important; } /* The hero stays dark in both modes, so its text stays white. */ :root[data-theme="light"] .sp-hero-section, :root[data-theme="light"] .sp-hero-section * { color: #fff !important; } :root[data-theme="light"] .sp-hero-section .accent-b { color: color-mix(in srgb, var(--tk-a) 45%, #fff) !important; }