/* Platinumlist Design System — minimal token layer. * Rebuilt from the documented DS token values (poodle / aussie / content / bg / * accent scales) because the org design-system.css asset is not on this machine. * * Tokens are defined per theme with plain custom properties rather than * light-dark(): Chrome does not re-resolve a light-dark() value on an element * that has a CSS transition on that property, so a runtime theme flip left the * view tabs holding the previous theme's colours. Redefining the tokens under * html[data-theme="dark"] invalidates reliably and animates correctly. * carries data-theme="light" | "dark"; OS preference applies only when * the user has not chosen. */ @font-face { font-family: "MD Nichrome"; src: url("/fonts/MDNichrome-Bold.otf") format("opentype"); font-weight: 400 800; /* single weight file mapped across the display range */ font-style: normal; font-display: swap; } :root { /* raw palette — theme-independent */ --poodle-primary: #7E05E8; --poodle-40: #B169F1; --aussie-100: #0F0F15; --aussie-90: #24242E; --aussie-80: #2C2C38; --aussie-20: #ECEDF2; /* status — theme-independent */ --accent-success: #30BB47; --accent-alert: #F93643; --accent-warning: #FF8300; --accent-discount: #E5457E; /* radius / motion */ --radius-xs: 8px; --radius-sm: 6px; --radius-base: 12px; --duration-base: .15s; /* type */ --font: "Inter", "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-accent: "MD Nichrome", "Syne", var(--font); } /* ── LIGHT (default) ───────────────────────────────────────────────────── */ :root { color-scheme: light; --poodle-adaptive: #7E05E8; /* surfaces */ --bg-default: #FFFFFF; /* cards */ --bg-secondary: #ECEDF2; /* page */ --bg-hover: #F5F5F8; /* nested / hover */ --bg-wash: #F0F0F4; /* chip/tag bg */ --bg-border: #ECEDF2; --bg-border-hover: #DCDCE0; /* content — three levels of gray, do NOT collapse */ --content-primary: #0F0F15; --content-secondary: #6E6E81; --content-highlight: #B3B3C3; --link-base: #1A56FF; --shadow-sm: 0 1px 2px rgba(15,15,21,0.06); --shadow-md: 0 4px 16px rgba(15,15,21,0.10); } /* ── DARK ──────────────────────────────────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; --poodle-adaptive: #B169F1; /* #7E05E8 is too dense on a near-black surface */ --bg-default: #0F0F15; --bg-secondary: #24242E; --bg-hover: #2C2C38; --bg-wash: #1B1B22; --bg-border: rgba(255,255,255,0.08); --bg-border-hover: rgba(255,255,255,0.16); --content-primary: #FFFFFF; --content-secondary: #B3B3C3; --content-highlight: #6E6E81; --link-base: #6F9BFF; --shadow-sm: 0 1px 2px rgba(0,0,0,0.45); --shadow-md: 0 8px 24px rgba(0,0,0,0.55); } /* OS preference, only while the user has made no explicit choice */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --poodle-adaptive: #B169F1; --bg-default: #0F0F15; --bg-secondary: #24242E; --bg-hover: #2C2C38; --bg-wash: #1B1B22; --bg-border: rgba(255,255,255,0.08); --bg-border-hover: rgba(255,255,255,0.16); --content-primary: #FFFFFF; --content-secondary: #B3B3C3; --content-highlight: #6E6E81; --link-base: #6F9BFF; --shadow-sm: 0 1px 2px rgba(0,0,0,0.45); --shadow-md: 0 8px 24px rgba(0,0,0,0.55); } } /* html[data-theme="light"] needs no overrides — :root already carries them. */ /* ── "Made with Platinumlist AI" badge ─────────────────────────────────────── Ported from pl-gate-dashboard. It reuses the two logo files every page already loads, so the badge costs no new asset and scales with the text instead of pixelating. The badge is named ONCE, on the pill, as role="img" with an aria-label, and everything inside is aria-hidden. Built the obvious way — alt="Platinumlist" plus a live "AI" span — the accessibility tree reads "Made with Platinumlist" with the AI dropped and BOTH images announced, because the alt of a display:none image is not reliably pruned. There is deliberately NO `.mw-lockup img{ display:block }`. A bare `display` on the element beats the `display:none` that hides the wrong theme's logo and BOTH would render. Sizing lives on its own rule that touches no display, and every display sits on a `.light-only` / `.dark-only` selector at matching specificity. TWO DEPARTURES FROM THE SOURCE, both forced by this project: - The original colours `.mw-ai` with `light-dark(...)`. This dashboard pins `color-scheme: light` on :root — deliberately, so its light-dark() tokens do not fight the [data-theme] rules — which makes light-dark() always resolve to its LIGHT value. The AI mark would have stayed purple on the dark surface, unreadable at 8px. Explicit [data-theme="dark"] instead. - `--aussie-0` does not exist here, so the dark colour is #FFFFFF, which is what that token is. */ .pl-madewith{ display: flex; justify-content: center; padding: 30px 16px 6px; } .pl-madewith .mw-pill{ display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--bg-border); font-family: var(--font); font-size: 13px; line-height: 1; color: var(--content-secondary); /* Not a link and not a control; a stray selection drag should not light it up. */ user-select: none; -webkit-user-select: none; } .pl-madewith .mw-lockup{ display: inline-flex; align-items: flex-start; gap: 1.5px; } .pl-madewith .mw-lockup img{ height: 15px; width: auto; } .pl-madewith .mw-lockup img.light-only{ display: block; } .pl-madewith .mw-lockup img.dark-only{ display: none; } [data-theme="dark"] .pl-madewith .mw-lockup img.light-only{ display: none; } [data-theme="dark"] .pl-madewith .mw-lockup img.dark-only{ display: block; } .pl-madewith .mw-ai{ font-family: var(--font-accent); font-size: 8px; line-height: 1; margin-top: 1px; letter-spacing: 0.02em; color: var(--poodle-primary); } [data-theme="dark"] .pl-madewith .mw-ai{ color: #FFFFFF; } @media print { .pl-madewith{ display: none !important; } }