/* ============================================================================ kid-theme.css — Phase 40v — CHILD DESKTOP dashboard THEME SYSTEM ---------------------------------------------------------------------------- ONE switchable brand colour drives the whole child desktop dashboard: the left rail + top header (via kid-sidebar.css token indirection) AND every dashboard accent (crewbar banner, section dots, clock, session/work pills, playlist, buttons, notifications) — all pointed at a small set of --kt-* tokens. The floating switcher (js/kid-theme-switcher.js) sets html[data-kidtheme]; a preload stamps it before first paint. DEFAULT (2026-08-16, Caleb) == MIDNIGHT NAVY — the owner console's own rail colour. Every family and every staff page now opens in the same deep navy the admin console wears, so the whole product reads as ONE thing out of the box; Ocean Blue is still there, it is just a choice now instead of the default. LEAVE ALONE (never themed): the 4 subject cards, success-green, alert-red, the gold streak/star, notification severity icons, mascot art — those keep their own hues on purpose. Content overrides are scoped to a REAL child (body.pm-kid-shell:not(.pm-parent-rail)) so a parent/adult view is untouched. Reversible: remove this file's , the switcher, and the kid-sidebar Phase-40v var repoint. ============================================================================ */ /* ── 1) DEFAULT TOKENS (MIDNIGHT NAVY) ────────────────────────────────────── Caleb 2026-08-16: "i want for the client and admin, this will be the default automatic colour all the time." So the root fallback IS Midnight Navy now — a page that never saw the switcher, or one whose saved value is stale, still opens navy instead of dropping back to the old Ocean Blue. Same values as html[data-kidtheme="midnight"] below; keep the two in step. */ html{ --kt-chrome-grad: linear-gradient(0deg,#0e1322 0%,#212b47 46%,#3c4a78 100%); --kt-topbar-grad: linear-gradient(120deg,#0e1322 0%,#212b47 46%,#3c4a78 100%); --kt-chrome-deep:#0e1322; --kt-chrome-bright:#212b47; --kt-chrome-soft:#3c4a78; --kt-star:#d6e4ff; --kt-banner-grad: linear-gradient(135deg,#0e1322 0%,#212b47 48%,#3c4a78 100%); --kt-accent-deep:#2E86E0; --kt-accent-bright:#4A9FF5; --kt-accent-soft-bg:#EAF4FE; --kt-accent-ink:#2E86E0; --kt-dot: linear-gradient(135deg,#4A9FF5,#17BFA0); --kt-primary-grad: linear-gradient(135deg,#212b47 0%,#3c4a78 50%,#4A9FF5 100%); } /* ── 2) PALETTES — html[data-kidtheme="…"] ────────────────────────────────── Every lightest chrome stop is tuned to ≈ the live blue #0a84ff luminance so white rail labels + white header text keep contrast. Banners are free to be vivid (white text on a deep→bright 135deg ramp). */ html[data-kidtheme="blue"]{ --kt-chrome-grad: linear-gradient(0deg,#0b3d6b 0%,#007aff 52%,#0a84ff 100%); --kt-topbar-grad: linear-gradient(120deg,#0b3d6b 0%,#007aff 55%,#0a84ff 100%); --kt-chrome-deep:#0b3d6b; --kt-chrome-bright:#007aff; --kt-chrome-soft:#0a84ff; --kt-star:#d6fff2; --kt-banner-grad: linear-gradient(135deg,#0b3d6b 0%,#2563eb 48%,#0ea5e9 100%); --kt-accent-deep:#1d4ed8; --kt-accent-bright:#3b82f6; --kt-accent-soft-bg:#eff6ff; --kt-accent-ink:#2563eb; --kt-dot: linear-gradient(135deg,#3b82f6,#0ea5e9); --kt-primary-grad: linear-gradient(135deg,#2563eb 0%,#3b82f6 50%,#0ea5e9 100%); } html[data-kidtheme="purple"]{ --kt-chrome-grad: linear-gradient(0deg,#4f3eb8 0%,#6c5ce7 52%,#8b75ff 100%); --kt-topbar-grad: linear-gradient(120deg,#4f3eb8 0%,#6c5ce7 55%,#8b75ff 100%); --kt-chrome-deep:#4c1d95; --kt-chrome-bright:#6c5ce7; --kt-chrome-soft:#8b75ff; --kt-star:#f3e4ff; --kt-banner-grad: linear-gradient(135deg,#7c3aed 0%,#a855f7 48%,#d946ef 100%); --kt-accent-deep:#7c3aed; --kt-accent-bright:#a855f7; --kt-accent-soft-bg:#faf5ff; --kt-accent-ink:#6d28d9; --kt-dot: linear-gradient(135deg,#a855f7,#ec4899); --kt-primary-grad: linear-gradient(135deg,#7c3aed 0%,#a855f7 50%,#ec4899 100%); } html[data-kidtheme="gold"]{ --kt-chrome-grad: linear-gradient(0deg,#6e4a0f 0%,#b57e18 52%,#caa02a 100%); --kt-topbar-grad: linear-gradient(120deg,#6e4a0f 0%,#b57e18 55%,#caa02a 100%); --kt-chrome-deep:#7a4d0a; --kt-chrome-bright:#b57e18; --kt-chrome-soft:#caa02a; --kt-star:#fff3c4; --kt-banner-grad: linear-gradient(135deg,#b45309 0%,#d97706 45%,#f59e0b 100%); --kt-accent-deep:#b45309; --kt-accent-bright:#d97706; --kt-accent-soft-bg:#fffbeb; --kt-accent-ink:#a16207; --kt-dot: linear-gradient(135deg,#f59e0b,#f97316); --kt-primary-grad: linear-gradient(135deg,#b45309 0%,#d97706 50%,#f59e0b 100%); } html[data-kidtheme="emerald"]{ --kt-chrome-grad: linear-gradient(0deg,#064e3b 0%,#047857 52%,#059669 100%); --kt-topbar-grad: linear-gradient(120deg,#064e3b 0%,#047857 55%,#059669 100%); --kt-chrome-deep:#064e3b; --kt-chrome-bright:#047857; --kt-chrome-soft:#059669; --kt-star:#d6fff0; --kt-banner-grad: linear-gradient(135deg,#065f46 0%,#059669 45%,#34d399 100%); --kt-accent-deep:#047857; --kt-accent-bright:#10b981; --kt-accent-soft-bg:#ecfdf5; --kt-accent-ink:#059669; --kt-dot: linear-gradient(135deg,#10b981,#14b8a6); --kt-primary-grad: linear-gradient(135deg,#047857 0%,#059669 50%,#10b981 100%); } html[data-kidtheme="rose"]{ --kt-chrome-grad: linear-gradient(0deg,#831843 0%,#be185d 52%,#e11d48 100%); --kt-topbar-grad: linear-gradient(120deg,#831843 0%,#be185d 55%,#e11d48 100%); --kt-chrome-deep:#831843; --kt-chrome-bright:#be185d; --kt-chrome-soft:#e11d48; --kt-star:#ffe4ee; --kt-banner-grad: linear-gradient(135deg,#9f1239 0%,#e11d48 45%,#fb7185 100%); --kt-accent-deep:#be185d; --kt-accent-bright:#f43f5e; --kt-accent-soft-bg:#fff1f2; --kt-accent-ink:#e11d48; --kt-dot: linear-gradient(135deg,#f43f5e,#fb7185); --kt-primary-grad: linear-gradient(135deg,#be185d 0%,#e11d48 50%,#fb7185 100%); } html[data-kidtheme="teal"]{ --kt-chrome-grad: linear-gradient(0deg,#134e4a 0%,#0f766e 52%,#0d9488 100%); --kt-topbar-grad: linear-gradient(120deg,#134e4a 0%,#0f766e 55%,#0d9488 100%); --kt-chrome-deep:#134e4a; --kt-chrome-bright:#0f766e; --kt-chrome-soft:#0d9488; --kt-star:#d6fff7; --kt-banner-grad: linear-gradient(135deg,#134e4a 0%,#0d9488 45%,#2dd4bf 100%); --kt-accent-deep:#0f766e; --kt-accent-bright:#14b8a6; --kt-accent-soft-bg:#f0fdfa; --kt-accent-ink:#0d9488; --kt-dot: linear-gradient(135deg,#14b8a6,#06b6d4); --kt-primary-grad: linear-gradient(135deg,#0f766e 0%,#0d9488 50%,#2dd4bf 100%); } /* ── 3) DASHBOARD CONTENT OVERRIDES ───────────────────────────────────────── Flat selectors (no CSS-nesting / :where) so specificity is high and every browser applies them. Scoped to a REAL child (body.pm-kid-shell:not(.pm- parent-rail)) so parent/adult dashboards are never touched. Colour/gradient/ border/background only — never layout. */ /* Greeting "Hi Daniel" — gradient text + subtitle */ body.pm-kid-shell:not(.pm-parent-rail) .pmch-greet h2, body.pm-kid-shell:not(.pm-parent-rail) #pmchGreet{ background: var(--kt-banner-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-greet p{ color: var(--kt-accent-deep) !important; } /* "Meet your crew" crewbar banner + its stars */ body.pm-kid-shell:not(.pm-parent-rail) .pmch-crewbar{ background: var(--kt-banner-grad) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-crewbar__star{ fill: var(--kt-star) !important; } /* Section titles + their bullet dots / markers */ body.pm-kid-shell:not(.pm-parent-rail) .pmch-section__title{ color: var(--kt-chrome-deep) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-section__title::before, body.pm-kid-shell:not(.pm-parent-rail) .pmch-playlist__title::before, body.pm-kid-shell:not(.pm-parent-rail) .pmch-today__dot, body.pm-kid-shell:not(.pm-parent-rail) .pmch-today-row__time::before, body.pm-kid-shell:not(.pm-parent-rail) .pmch-hw__pill--pending::before{ background: var(--kt-dot) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-section__link, body.pm-kid-shell:not(.pm-parent-rail) .pmch-pill{ color: var(--kt-accent-deep) !important; } /* Icon row + soft chrome chips (subtle brand hairline) */ body.pm-kid-shell:not(.pm-parent-rail) .pmch-icons, body.pm-kid-shell:not(.pm-parent-rail) .pmch-section__link{ border-color: color-mix(in srgb, var(--kt-accent-bright) 26%, transparent) !important; } /* CLOCK card ("11:21 PM") — light strip + deep-brand time */ body.pm-kid-shell:not(.pm-parent-rail) .ktd-hero{ background: var(--kt-accent-soft-bg) !important; } body.pm-kid-shell:not(.pm-parent-rail) .ktd-hero__time{ color: var(--kt-chrome-deep) !important; } body.pm-kid-shell:not(.pm-parent-rail) .ktd-hero__date, body.pm-kid-shell:not(.pm-parent-rail) .ktd-bodyhead__today, body.pm-kid-shell:not(.pm-parent-rail) .ktd-pill{ color: var(--kt-accent-deep) !important; } body.pm-kid-shell:not(.pm-parent-rail) .ktd-hero__deco, body.pm-kid-shell:not(.pm-parent-rail) .ktd-hero__deco--two{ background: var(--kt-accent-bright) !important; opacity:.5; } body.pm-kid-shell:not(.pm-parent-rail) .ktd-card{ border-color: color-mix(in srgb, var(--kt-accent-deep) 16%, transparent) !important; } /* Today's session card — pills + rows */ body.pm-kid-shell:not(.pm-parent-rail) .pmch-today, body.pm-kid-shell:not(.pm-parent-rail) .ktd-pill, body.pm-kid-shell:not(.pm-parent-rail) .pmch-today-row, body.pm-kid-shell:not(.pm-parent-rail) .pmch-today-row__cta{ background: var(--kt-accent-soft-bg) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-today, body.pm-kid-shell:not(.pm-parent-rail) .pmch-today-row__cta, body.pm-kid-shell:not(.pm-parent-rail) .pmch-today-empty, body.pm-kid-shell:not(.pm-parent-rail) .pmch-today-row__time{ color: var(--kt-accent-deep) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-today-row__meta{ color: var(--kt-accent-ink) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-today, body.pm-kid-shell:not(.pm-parent-rail) .pmch-today-row, body.pm-kid-shell:not(.pm-parent-rail) .pmch-today-row__cta{ border-color: color-mix(in srgb, var(--kt-accent-bright) 30%, transparent) !important; } body.pm-kid-shell:not(.pm-parent-rail) .is-live .pmch-today-row__cta{ background: var(--kt-primary-grad) !important; color:#fff !important; } /* My sessions TABLE */ body.pm-kid-shell:not(.pm-parent-rail) .pmch-sessions__head, body.pm-kid-shell:not(.pm-parent-rail) .pmch-sessions__table th, body.pm-kid-shell:not(.pm-parent-rail) .pmch-sessions__table tr:hover td{ background: var(--kt-accent-soft-bg) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-sessions__table th{ color: var(--kt-accent-deep) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-pill-status--upcoming{ background: var(--kt-accent-soft-bg) !important; color: var(--kt-accent-deep) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-pill-status--next{ background: var(--kt-primary-grad) !important; color:#fff !important; } /* My work cards + status pills + meta */ body.pm-kid-shell:not(.pm-parent-rail) .pmch-hw__meta, body.pm-kid-shell:not(.pm-parent-rail) .pmch-item__sub, body.pm-kid-shell:not(.pm-parent-rail) .pmch-empty{ color: var(--kt-accent-ink) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-hw__pill--pending, body.pm-kid-shell:not(.pm-parent-rail) .pmch-hw__pill--progress, body.pm-kid-shell:not(.pm-parent-rail) .pmch-hw__pill--waiting{ background: var(--kt-accent-soft-bg) !important; color: var(--kt-accent-deep) !important; border-color: color-mix(in srgb, var(--kt-accent-bright) 40%, transparent) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-hw:hover{ border-color: color-mix(in srgb, var(--kt-accent-bright) 55%, transparent) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-hw__feedback{ color: var(--kt-accent-deep) !important; } /* "You have N things to do" toast */ body.pm-kid-shell:not(.pm-parent-rail) .pmch-worktoast__icon, body.pm-kid-shell:not(.pm-parent-rail) .pmch-worktoast__cta{ background: var(--kt-primary-grad) !important; color:#fff !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-worktoast__title b{ color: var(--kt-accent-deep) !important; } /* Video panel + playlist */ body.pm-kid-shell:not(.pm-parent-rail) .pmch-video-wrap, body.pm-kid-shell:not(.pm-parent-rail) .pmch-item__thumb{ background: var(--kt-banner-grad) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-video-card, body.pm-kid-shell:not(.pm-parent-rail) .pmch-playlist{ border-color: color-mix(in srgb, var(--kt-accent-bright) 34%, transparent) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-mark-btn:not(.pmch-mark-btn--done){ background: var(--kt-primary-grad) !important; color:#fff !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-watched{ background: var(--kt-accent-soft-bg) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-playlist__count{ background: var(--kt-primary-grad) !important; color:#fff !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-item.is-active{ background: var(--kt-primary-grad) !important; color:#fff !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-item:hover{ border-color: color-mix(in srgb, var(--kt-accent-bright) 45%, transparent) !important; } /* Shimmer strips flanking the grid */ body.pm-kid-shell:not(.pm-parent-rail) .pmch-grid::before, body.pm-kid-shell:not(.pm-parent-rail) .pmch-grid::after{ background: var(--kt-banner-grad) !important; } /* Notifications */ body.pm-kid-shell:not(.pm-parent-rail) .nx-notif-markall, body.pm-kid-shell:not(.pm-parent-rail) .nx-notif-item__cta, body.pm-kid-shell:not(.pm-parent-rail) .nx-notif-viewall, body.pm-kid-shell:not(.pm-parent-rail) .nxnm__eyebrow, body.pm-kid-shell:not(.pm-parent-rail) .nxnm__sub strong{ color: var(--kt-accent-ink) !important; } body.pm-kid-shell:not(.pm-parent-rail) .nx-notif-item__unread-dot{ background: var(--kt-dot) !important; } body.pm-kid-shell:not(.pm-parent-rail) .nxnm__done{ background: var(--kt-primary-grad) !important; color:#fff !important; } /* Header notification BELL (relocated into the topbar) — make it a glassy-white control like the header's search / Install App pills instead of a loud red pill; keep the red count badge (unread = alert). Theme-agnostic white icon reads on every palette's coloured header. */ body.pm-kid-shell:not(.pm-parent-rail) .nx-topbar .nx-notif-strip--topbar .nx-notif-trigger{ background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.28) !important; } body.pm-kid-shell:not(.pm-parent-rail) .nx-topbar .nx-notif-strip--topbar .nx-notif-trigger:hover{ background: rgba(255,255,255,.26) !important; } body.pm-kid-shell:not(.pm-parent-rail) .nx-topbar .nx-notif-strip--topbar .nx-notif-trigger__icon svg{ color:#fff !important; } /* badge border blends into the coloured header, not the page --bg */ body.pm-kid-shell:not(.pm-parent-rail) .nx-topbar .nx-notif-strip--topbar .nx-notif-trigger__badge{ border-color: rgba(0,0,0,.12) !important; } /* Flyout menus off the rail (purple-tinted by default) */ body.pm-kid-shell:not(.pm-parent-rail) .pmkid-fly__item.is-active{ background: var(--kt-primary-grad) !important; color:#fff !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmkid-fly__item:hover{ background: var(--kt-accent-soft-bg) !important; color: var(--kt-chrome-deep) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmkid-fly__head{ color: var(--kt-chrome-deep) !important; } /* ── 3b) STRAGGLER FIXES (found in render QA) ─────────────────────────────── The remaining hardcoded purples/blues that the first pass missed. */ /* ALL FOUR section-title dots (first pass only did section + playlist) */ body.pm-kid-shell:not(.pm-parent-rail) .pmch-sessions__title::before, body.pm-kid-shell:not(.pm-parent-rail) .pmch-homework__title::before{ background: var(--kt-dot) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--kt-accent-bright) 45%, transparent) !important; } /* The scenery horizon line under the hero (was hardcoded violet rgba(124,58,237)) */ body.pm-kid-shell:not(.pm-parent-rail) .pmch-divider__ground{ background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--kt-accent-bright) 45%, transparent) 12%, color-mix(in srgb, var(--kt-accent-bright) 60%, transparent) 50%, color-mix(in srgb, var(--kt-accent-bright) 45%, transparent) 88%, transparent 100%) !important; } /* "Do this next" work card — its shimmer border, glow + ✦ sparkle were indigo/cyan */ body.pm-kid-shell:not(.pm-parent-rail) .pmch-hw--next{ animation: none !important; box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--kt-accent-deep) 55%, transparent) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-hw--next::before{ background: var(--kt-primary-grad) !important; } body.pm-kid-shell:not(.pm-parent-rail) .pmch-hw--next::after{ color: var(--kt-accent-bright) !important; text-shadow: 0 0 8px color-mix(in srgb, var(--kt-accent-bright) 65%, transparent) !important; } /* Playlist row hover wash + watched head ring (were violet/pink) */ body.pm-kid-shell:not(.pm-parent-rail) .pmch-playlist__list > *:hover{ background: color-mix(in srgb, var(--kt-accent-soft-bg) 85%, transparent) !important; } /* ── 4) THEME CONTROL IN THE HEADER (permanent, child desktop) ────────────── A glassy palette button in .nx-topbar that opens a premium dropdown of the 6 themes — each a gradient TILE with a built-in white SVG icon (no emoji). Built by js/kid-theme-switcher.js. The kid switches their own theme anytime. */ .kt-hdr{ position:relative; display:inline-flex; align-items:center; margin:0 2px; font:inherit; } .kt-hdr *{ box-sizing:border-box; } .kt-hdr__btn{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; cursor:pointer; color:#fff; padding:0; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); transition:background .15s ease, transform .15s ease, box-shadow .15s ease; } .kt-hdr__btn svg{ width:20px; height:20px; } .kt-hdr__btn:hover{ background:rgba(255,255,255,.26); transform:translateY(-1px); } .kt-hdr.is-open .kt-hdr__btn{ background:rgba(255,255,255,.30); box-shadow:0 0 0 3px rgba(255,255,255,.22); } .kt-hdr__panel{ position:absolute; top:calc(100% + 12px); right:0; width:264px; padding:10px; background:rgba(255,255,255,.72); backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%); border:1px solid rgba(255,255,255,.55); border-radius:16px; box-shadow:0 0 0 1px rgba(15,23,42,.04), 0 18px 48px -12px rgba(15,23,42,.34), 0 6px 16px -8px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.85); transform-origin:top right; transform:scale(.92) translateY(-8px); opacity:0; pointer-events:none; transition:transform .2s cubic-bezier(.34,1.56,.64,1), opacity .16s ease; z-index:200; } .kt-hdr.is-open .kt-hdr__panel{ transform:scale(1) translateY(0); opacity:1; pointer-events:auto; } .kt-hdr__head{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#8a94a6; padding:6px 8px 8px; } .kt-hdr__list{ display:flex; flex-direction:column; gap:2px; } .kt-chip{ display:flex; align-items:center; gap:12px; width:100%; padding:8px 10px; margin:0; border:1px solid transparent; border-radius:12px; background:transparent; cursor:pointer; text-align:left; transition:background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease; } .kt-chip:hover{ background:rgba(15,23,42,.055); } .kt-chip:active{ transform:scale(.985); background:rgba(15,23,42,.09); } .kt-chip.is-on{ background:rgba(15,23,42,.06); border-color:rgba(15,23,42,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); } .kt-chip__tile{ width:34px; height:34px; flex:0 0 auto; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.18), 0 3px 8px -2px rgba(15,23,42,.4); } .kt-chip__tile svg{ width:19px; height:19px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); } .kt-chip__name{ font-size:14px; font-weight:700; color:#0f172a; flex:1 1 auto; } .kt-chip__check{ width:20px; height:20px; flex:0 0 auto; color:#0f172a; opacity:0; transform:scale(.6); transition:.16s cubic-bezier(.34,1.56,.64,1); } .kt-chip.is-on .kt-chip__check{ opacity:1; transform:scale(1); } /* Dark variant keys off the APP's own dark mode (data-dash-theme="dark"), NOT the OS. A light app on a dark-OS Mac keeps the light frosted panel (Caleb's case — the modal was going black because it followed prefers-color-scheme). 2026-08-01 */ html[data-dash-theme="dark"] .kt-hdr__panel{ background:rgba(30,32,38,.68); border-color:rgba(255,255,255,.1); box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 20px 52px -12px rgba(0,0,0,.72), 0 6px 16px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); } html[data-dash-theme="dark"] .kt-hdr__head{ color:#98a2b3; } html[data-dash-theme="dark"] .kt-chip:hover{ background:rgba(255,255,255,.07); } html[data-dash-theme="dark"] .kt-chip:active{ background:rgba(255,255,255,.11); } html[data-dash-theme="dark"] .kt-chip.is-on{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); } html[data-dash-theme="dark"] .kt-chip__name{ color:#f1f5f9; } html[data-dash-theme="dark"] .kt-chip__check{ color:#f1f5f9; } /* ── 5) UNIFIED GLASSY HEADER CONTROLS (child desktop) ────────────────────── Make the whole top bar read as one premium piece on ANY palette: search, Install-App pill + the light/dark toggle all go glassy-white to match the bell, theme button + account pod (mirrors the parent's chrome treatment). */ body.pm-kid-shell:not(.pm-parent-rail) .nx-topbar .nx-search input{ background:rgba(255,255,255,.16) !important; border:1px solid rgba(255,255,255,.26) !important; color:#fff !important; } body.pm-kid-shell:not(.pm-parent-rail) .nx-topbar .nx-search input::placeholder{ color:rgba(255,255,255,.72) !important; } body.pm-kid-shell:not(.pm-parent-rail) .nx-topbar .nx-search svg{ color:rgba(255,255,255,.85) !important; } body.pm-kid-shell:not(.pm-parent-rail) .nx-topbar [data-pm-install]{ background:rgba(255,255,255,.18) !important; color:#fff !important; border:1px solid rgba(255,255,255,.3) !important; } body.pm-kid-shell:not(.pm-parent-rail) .nx-topbar .dash-theme-toggle{ color:#fff !important; background:rgba(255,255,255,.16) !important; border:1px solid rgba(255,255,255,.26) !important; } /* ── "Midnight Navy" (2026-08-16) — the OWNER CONSOLE's exact colours, added on Caleb's instruction: "i want clients to have that same colour", and made the DEFAULT for client + admin the same day (it was briefly called "Console Navy"; the id was `console`). The chrome triple is admin-console.css's rail verbatim (--pmar-top/mid/bot: #3c4a78 / #212b47 / #0e1322) and the accents are the console blue family (#4A9FF5 / #2E86E0 / #EAF4FE). A family sees the same deep-navy chrome Caleb's console has — same source values, not a lookalike. Mirrored by the LANDING page's Midnight Navy skin (css/landing-midnight.css). */ html[data-kidtheme="midnight"]{ --kt-chrome-grad: linear-gradient(0deg,#0e1322 0%,#212b47 46%,#3c4a78 100%); --kt-topbar-grad: linear-gradient(120deg,#0e1322 0%,#212b47 46%,#3c4a78 100%); --kt-chrome-deep:#0e1322; --kt-chrome-bright:#212b47; --kt-chrome-soft:#3c4a78; --kt-star:#d6e4ff; --kt-banner-grad: linear-gradient(135deg,#0e1322 0%,#212b47 48%,#3c4a78 100%); --kt-accent-deep:#2E86E0; --kt-accent-bright:#4A9FF5; --kt-accent-soft-bg:#EAF4FE; --kt-accent-ink:#2E86E0; --kt-dot: linear-gradient(135deg,#4A9FF5,#17BFA0); --kt-primary-grad: linear-gradient(135deg,#212b47 0%,#3c4a78 50%,#4A9FF5 100%); }