/* ============================================================ DigitBot design system. Rebuilt on HeroUI's design language: semantic colour roles (background / surface / foreground / accent / field / separator), an 8px radius base, flat surfaces separated by hairline borders rather than gradients, and soft neutral shadows. Three modes: light, dark, and system. `data-theme` on decides — "light" or "dark" force it, anything else (or nothing) follows the OS. layout.php sets it before first paint. The older --de-* / --brand-* names are kept as aliases at the end of the token block so the two module stylesheets keep working and pick up both themes for free. ============================================================ */ /* ============================================================ 1. TOKENS — light ============================================================ */ :root { color-scheme: light; /* Canvas */ --background: #f5f5f5; --background-secondary: #efeff0; --background-tertiary: #eaeaeb; /* Containers that sit on the canvas */ --surface: #ffffff; --surface-secondary: #efeff0; --surface-tertiary: #eaeaeb; /* Content */ --foreground: #18181b; --muted: #52525b; --subtle: #71717a; --disabled: #a1a1aa; /* Lines */ --border: #dedee0; --separator: #e4e4e7; /* Brand / intent. Each role carries a solid, a foreground for text on that solid, and a soft wash for tinted surfaces. */ --accent: #4f5fd6; --accent-foreground: #ffffff; --accent-soft: color-mix(in oklab, var(--accent) 11%, transparent); --accent-soft-foreground:#3a49c4; /* text on a soft fill */ --accent-edge: color-mix(in oklab, var(--accent) 40%, transparent); --accent-hover: color-mix(in oklab, var(--accent) 88%, #000); --default: #ebebec; --default-foreground: #18181b; --success: #17c964; --success-foreground: #052e16; --success-soft: color-mix(in oklab, var(--success) 15%, transparent); --warning: #f5a524; --warning-foreground: #422006; --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent); --danger: #ff383c; --danger-foreground: #fcfcfc; --danger-soft: color-mix(in oklab, var(--danger) 12%, transparent); /* Form fields get their own role so inputs never inherit button colour */ --field: #ffffff; --field-foreground: #18181b; --field-placeholder: #a1a1aa; --field-border: #d4d4d8; --overlay: #ffffff; /* menus, popovers */ --backdrop: rgba(0,0,0,0.45); /* Shadows: neutral and soft. Dark UIs can lean on contrast; a light UI needs real elevation or every panel reads as flat paper. */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.08), 0 2px 6px -2px rgba(0,0,0,0.06); --shadow-lg: 0 18px 40px -12px rgba(0,0,0,0.18), 0 4px 12px -4px rgba(0,0,0,0.08); /* Neutral hover wash — flips polarity per theme so one rule serves both */ --hover-wash: rgba(0,0,0,0.045); --active-wash: rgba(0,0,0,0.075); } /* ============================================================ 2. TOKENS — dark Written twice on purpose: once for the OS preference when the user has not chosen, once for an explicit choice. CSS has no way to share a declaration block across two unrelated selectors. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --background: #16171f; --background-secondary: #1b1c25; --background-tertiary: #21222c; --surface: #1d1e28; --surface-secondary: #252633; --surface-tertiary: #2b2c3a; --foreground: #f4f5fa; --muted: #c9cbd8; --subtle: #8f93a8; --disabled: #4d5064; --border: #2d2f3e; --separator: #272936; --accent: #6d7de6; --accent-foreground: #ffffff; --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent); --accent-soft-foreground:#9aa8f5; --accent-edge: color-mix(in oklab, var(--accent) 50%, transparent); --accent-hover: color-mix(in oklab, var(--accent) 85%, #fff); --default: #27272a; --default-foreground: #fcfcfc; --success-foreground: #052e16; --warning: #f7b750; --warning-foreground: #422006; --danger: #db3b3e; --field: #1a1b24; --field-foreground: #f4f5fa; --field-placeholder: #6b6f84; --field-border: #383a4c; --overlay: #1f2029; --backdrop: rgba(0,0,0,0.6); --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.55), 0 2px 6px -2px rgba(0,0,0,0.4); --shadow-lg: 0 18px 40px -12px rgba(0,0,0,0.7), 0 4px 12px -4px rgba(0,0,0,0.5); --hover-wash: rgba(255,255,255,0.06); --active-wash: rgba(255,255,255,0.10); } } [data-theme="dark"] { color-scheme: dark; --background: #16171f; --background-secondary: #1b1c25; --background-tertiary: #21222c; --surface: #1d1e28; --surface-secondary: #252633; --surface-tertiary: #2b2c3a; --foreground: #f4f5fa; --muted: #c9cbd8; --subtle: #8f93a8; --disabled: #4d5064; --border: #2d2f3e; --separator: #272936; --accent: #6d7de6; --accent-foreground: #ffffff; --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent); --accent-soft-foreground:#9aa8f5; --accent-edge: color-mix(in oklab, var(--accent) 50%, transparent); --accent-hover: color-mix(in oklab, var(--accent) 85%, #fff); --default: #27272a; --default-foreground: #fcfcfc; --success-foreground: #052e16; --warning: #f7b750; --warning-foreground: #422006; --danger: #db3b3e; --field: #1a1b24; --field-foreground: #f4f5fa; --field-placeholder: #6b6f84; --field-border: #383a4c; --overlay: #1f2029; --backdrop: rgba(0,0,0,0.6); --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.55), 0 2px 6px -2px rgba(0,0,0,0.4); --shadow-lg: 0 18px 40px -12px rgba(0,0,0,0.7), 0 4px 12px -4px rgba(0,0,0,0.5); --hover-wash: rgba(255,255,255,0.06); --active-wash: rgba(255,255,255,0.10); } /* ============================================================ 3. TOKENS — mode-independent ============================================================ */ :root { --de-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --de-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* HeroUI's scale: one base, four multiples. */ --radius: 0.5rem; --radius-sm: calc(var(--radius) * 0.5); --radius-md: calc(var(--radius) * 0.75); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.5); --radius-2xl: calc(var(--radius) * 2); --radius-pill: 9999px; --fs-h1: clamp(28px, 3vw, 40px); --fs-h2: 24px; --fs-h3: 20px; --fs-h4: 16px; --fs-body: 15px; --fs-control: 14px; --fs-small: 13px; --fs-xs: 12px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent); --ring-danger: 0 0 0 3px color-mix(in oklab, var(--danger) 35%, transparent); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 120ms; --dur-base: 200ms; /* ---------- Back-compat aliases ---------- The DigitBot and Stream Tools stylesheets were written against the old palette. Aliasing rather than find-replacing means they retheme with everything else and there is one place to change. */ --brand-navy: var(--foreground); --brand-blue: var(--accent); --brand-red: var(--danger); --blue-500: var(--accent); --blue-400: var(--accent); --blue-300: var(--accent); --red-500: var(--danger); --red-400: var(--danger); --amber-500: var(--warning); --green-400: var(--success); --de-bg: var(--background); --de-bg-elev-1: var(--surface); --de-bg-elev-2: var(--surface-secondary); --de-bg-inset: var(--surface-secondary); --de-fg: var(--foreground); --de-fg-muted: var(--muted); --de-fg-subtle: var(--subtle); --de-fg-disabled: var(--disabled); --de-border: var(--border); --de-border-strong: var(--field-border); --de-success: var(--success); --de-warning: var(--warning); --de-danger: var(--danger); --de-info: var(--accent); --de-success-wash: var(--success-soft); --de-warning-wash: var(--warning-soft); --de-danger-wash: var(--danger-soft); --de-info-wash: var(--accent-soft); --de-success-edge: color-mix(in oklab, var(--success) 40%, transparent); --de-warning-edge: color-mix(in oklab, var(--warning) 40%, transparent); --de-danger-edge: color-mix(in oklab, var(--danger) 40%, transparent); --de-info-edge: color-mix(in oklab, var(--accent) 40%, transparent); --de-accent-wash: var(--accent-soft); --de-accent-edge: var(--accent-edge); --de-radius-xs: var(--radius-sm); --de-radius-sm: var(--radius-sm); --de-radius-md: var(--radius-md); --de-radius-lg: var(--radius-lg); --de-radius-xl: var(--radius-xl); --de-radius-pill: var(--radius-pill); --de-shadow-sm: var(--shadow-sm); --de-shadow-md: var(--shadow-md); --de-shadow-lg: var(--shadow-lg); --de-glow-blue: var(--ring); --de-sheen: none; --de-ease-out: var(--ease-out); --de-ease-racing: var(--ease-out); --de-dur-fast: var(--dur-fast); --de-dur-base: var(--dur-base); --de-fs-h1: var(--fs-h1); --de-fs-h4: var(--fs-h4); --de-fs-body: var(--fs-body); --de-fs-control: var(--fs-control); --de-fs-small: var(--fs-small); --de-fs-xs: var(--fs-xs); --de-fs-micro: 11px; --de-sp-1:var(--sp-1); --de-sp-2:var(--sp-2); --de-sp-3:var(--sp-3); --de-sp-4:var(--sp-4); --de-sp-5:var(--sp-5); --de-sp-6:var(--sp-6); --de-sp-8:var(--sp-8); --de-sp-10:var(--sp-10); --de-sp-12:var(--sp-12); } /* ============================================================ 4. RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } img, svg, video { max-width: 100%; } /* A flat canvas. No gradient, no grid overlay — HeroUI separates things with surface colour and hairline borders instead. */ body.de-studio { background: var(--background); color: var(--foreground); font-family: var(--de-font-sans); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.de-studio::before { content: none; } body.de-studio main, body.de-studio .de-shell { position: relative; } .de-shell { max-width: 1280px; margin: 0 auto; padding: var(--sp-8); } /* A page that opens with chrome above it does not need the full top pad. */ .de-breadcrumb + main.de-shell, .mb-tabs + main.de-shell { padding-top: var(--sp-5); } @media (max-width: 640px) { .de-shell { padding: var(--sp-5) var(--sp-4) var(--sp-10); } } body.de-studio :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-md); } ::selection { background: color-mix(in oklab, var(--accent) 25%, transparent); } /* ============================================================ 5. APP CHROME ============================================================ */ .cd-header { position: sticky; top: 0; z-index: 1000; width: 100%; background: color-mix(in oklab, var(--surface) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--separator); } .cd-inner { max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-4); } .cd-h-row { display: flex; height: 60px; align-items: center; justify-content: space-between; gap: var(--sp-3); } .cd-wordmark { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--foreground); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } .cd-wordmark .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .cd-actions { display: flex; align-items: center; gap: var(--sp-2); } .cd-user-btn { background: none; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; border-radius: var(--radius-md); color: var(--subtle); transition: color var(--dur-fast), background var(--dur-fast); } .cd-user-btn:hover { color: var(--foreground); background: var(--hover-wash); } #cd-user-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 220px; background: var(--overlay); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--sp-1); z-index: 200; } #cd-user-dropdown.open { display: block; } .cd-dd-header { padding: 8px 10px 10px; border-bottom: 1px solid var(--separator); margin-bottom: 4px; } .cd-dd-header p { margin: 0; } .cd-dd-name { font-size: var(--fs-small); font-weight: 600; color: var(--foreground); } .cd-dd-email { font-size: var(--fs-xs); color: var(--subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cd-dd-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); font-size: var(--fs-control); color: var(--muted); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); } .cd-dd-link:hover { background: var(--hover-wash); color: var(--foreground); } .cd-dd-link.red { color: var(--danger); } .cd-dd-link.red:hover { background: var(--danger-soft); } .cd-ms { font-family: 'Material Symbols Outlined'; font-size: 18px; font-style: normal; font-weight: 400; line-height: 1; display: inline-block; } /* Theme switch — light / dark / system */ .de-theme { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--background-secondary); border: 1px solid var(--border); border-radius: var(--radius-pill); } .de-theme button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: none; border: 0; border-radius: var(--radius-pill); color: var(--subtle); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); } .de-theme button:hover { color: var(--foreground); } .de-theme button[aria-pressed="true"] { background: var(--surface); color: var(--foreground); box-shadow: var(--shadow-sm); } .de-theme .cd-ms { font-size: 17px; } /* ── Selected state ────────────────────────────────────────────────── Soft accent fill, a 1px accent border, and the soft-foreground colour for text. Sidebar links, tabs, filter chips and chosen cards all use this, so "this is the current one" reads the same across the app. */ .is-selected, .de-side-link.active, .mb-tab.active, .de-tab.active, .de-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-soft-foreground); box-shadow: inset 0 0 0 1px var(--accent-edge); } /* ── Sidebar shell ────────────────────────────────────────────────── Fixed, so page templates keep emitting
and only need room made for it via padding on the body. Below 900px it becomes an ordinary top bar and the padding goes away. */ .de-side { position: fixed; top: 0; left: 0; bottom: 0; width: 248px; z-index: 900; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--separator); padding: var(--sp-4) var(--sp-3); } body.de-studio { padding-left: 248px; } .de-side-brand { display: flex; align-items: center; gap: 9px; padding: 6px 10px var(--sp-5); text-decoration: none; color: var(--foreground); font-weight: 700; font-size: 16px; letter-spacing: -0.015em; } .de-side-brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .de-side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; } .de-side-group { margin: var(--sp-4) 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); } .de-side-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-md); color: var(--muted); text-decoration: none; font-size: var(--fs-control); font-weight: 500; transition: background var(--dur-fast), color var(--dur-fast); } .de-side-link:hover { background: var(--hover-wash); color: var(--foreground); } .de-side-link.active { font-weight: 600; } .de-side-link .cd-ms { font-size: 19px; } .de-side-foot { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--separator); } .de-side-user { position: relative; } .de-side-user-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--foreground); font-family: inherit; font-size: var(--fs-control); font-weight: 500; cursor: pointer; text-align: left; transition: background var(--dur-fast); } .de-side-user-btn:hover { background: var(--hover-wash); } .de-side-user-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .de-side-user-more { color: var(--subtle); font-size: 18px; } /* The menu opens upward here — there is no room below it. */ .de-side-user #cd-user-dropdown { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; width: 100%; } @media (max-width: 900px) { /* Two rows: brand and account controls on top, the section links underneath on a row of their own that scrolls sideways if it must. Eight destinations never fit one phone-width row. */ .de-side { position: static; width: auto; bottom: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-2); border-right: 0; border-bottom: 1px solid var(--separator); padding: var(--sp-2) var(--sp-3); } body.de-studio { padding-left: 0; } .de-side-brand { order: 1; padding: 0 var(--sp-2) 0 6px; } .de-side-foot { order: 2; margin-left: auto; flex-direction: row; padding-top: 0; border-top: 0; align-items: center; } .de-side-nav { order: 3; flex: 1 0 100%; min-width: 0; flex-direction: row; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .de-side-nav::-webkit-scrollbar { display: none; } .de-side-link { white-space: nowrap; padding: 7px 11px; font-size: var(--fs-small); } .de-side-group { display: none; } .de-side-user-name, .de-side-user-more { display: none; } .de-side-user #cd-user-dropdown { left: auto; right: 0; width: 220px; } } @media (max-width: 520px) { .de-side-label { display: none; } .de-side-link { padding: 8px 10px; } } /* Breadcrumb */ .de-breadcrumb { border-bottom: 1px solid var(--separator); background: var(--background); } .de-breadcrumb-inner { padding-top: 8px; padding-bottom: 8px; min-height: 36px; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .de-breadcrumb a { color: var(--subtle); text-decoration: none; font-size: var(--fs-xs); font-weight: 500; transition: color var(--dur-fast); } .de-breadcrumb a:hover { color: var(--foreground); } .de-breadcrumb .current { color: var(--foreground); font-weight: 600; font-size: var(--fs-xs); } .de-breadcrumb .sep { color: var(--disabled); font-size: 15px; line-height: 1; } /* Module tab strip */ .mb-tabs { background: var(--background); border-bottom: 1px solid var(--separator); } /* A little air above the tabs, so they never sit hard against the top edge. */ .mb-tabs { padding-top: var(--sp-1); } .mb-tabs-inner { display: flex; align-items: center; gap: 2px; min-height: 44px; padding-top: 0; padding-bottom: 0; overflow-x: auto; scrollbar-width: none; } .mb-tabs-inner::-webkit-scrollbar { display: none; } .mb-tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; margin: 4px 0; background: transparent; border: 0; border-radius: var(--radius-md); color: var(--subtle); font-family: inherit; font-size: var(--fs-small); font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); } .mb-tab:hover { color: var(--foreground); background: var(--hover-wash); } .mb-tab.active { font-weight: 600; } .mb-tab-icon { font-family: 'Material Symbols Outlined'; font-size: 17px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .mb-tab.active .mb-tab-icon { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; } /* ============================================================ 6. TYPOGRAPHY ============================================================ */ .de-eyebrow { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); } .de-h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: var(--foreground); margin: 0; } .de-h1 .accent { color: var(--accent); font-style: normal; } .de-h2 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em; color: var(--foreground); margin: 0; } .de-lede { color: var(--muted); font-size: var(--fs-body); line-height: 1.6; max-width: 680px; margin: var(--sp-2) 0 0; } .de-section-label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--subtle); } .de-section-label::before { content: none; } .de-muted { color: var(--muted); } .de-subtle { color: var(--subtle); } .de-mono { font-family: var(--de-font-mono); font-variant-numeric: tabular-nums; } code.de-code, .de-studio code { font-family: var(--de-font-mono); font-size: 0.9em; background: var(--background-tertiary); color: var(--foreground); padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--separator); } .de-link { color: var(--accent); text-decoration: none; } .de-link:hover { text-decoration: underline; } /* ============================================================ 7. SURFACES ============================================================ */ .de-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--sp-6); box-shadow: var(--shadow-sm); } .de-panel-flush { padding: 0; overflow: hidden; } .de-panel-inset { background: var(--background-secondary); box-shadow: none; } .de-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--separator); } .de-panel-title { font-size: var(--fs-h4); font-weight: 600; margin: 0; color: var(--foreground); } .de-panel-body { padding: var(--sp-6); } .de-panel-heading { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); margin: 0 0 4px; } .de-panel-sub { font-size: var(--fs-control); color: var(--subtle); line-height: 1.55; margin: 0 0 var(--sp-4); } .de-card { position: relative; display: flex; flex-direction: column; padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); color: inherit; text-decoration: none; min-height: 250px; box-shadow: var(--shadow-sm); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .de-card::before { content: none; } .de-card:hover, .de-card:focus-visible { border-color: var(--accent-edge); box-shadow: var(--shadow-md); transform: translateY(-2px); } .de-card-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); border: 0; border-radius: var(--radius-lg); margin-bottom: var(--sp-5); color: var(--accent); } .de-card-icon svg { width: 22px; height: 22px; } .de-card-title { font-size: var(--fs-h3); font-weight: 600; color: var(--foreground); margin: 0 0 var(--sp-2); letter-spacing: -0.015em; } .de-card-desc { font-size: var(--fs-control); color: var(--muted); line-height: 1.6; margin: 0 0 var(--sp-5); flex: 1; } .de-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-4); } .de-card-chip { padding: 3px 10px; background: var(--default); border: 0; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 500; color: var(--muted); letter-spacing: 0; text-transform: none; } .de-card-action { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: var(--fs-control); font-weight: 600; letter-spacing: 0; text-transform: none; } .de-card-action svg { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease-out); } .de-card:hover .de-card-action svg { transform: translateX(3px); } .de-card[aria-disabled="true"] { opacity: 0.55; pointer-events: none; } .de-card[aria-disabled="true"] .de-card-action::after { content: '· coming soon'; margin-left: 6px; color: var(--subtle); font-weight: 400; } .de-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); } /* ============================================================ 8. CONTROLS ============================================================ */ .de-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; height: 40px; font-family: var(--de-font-sans); font-size: var(--fs-control); font-weight: 500; letter-spacing: 0; text-transform: none; background: var(--default); color: var(--default-foreground); border: 0; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; max-width: 100%; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .de-btn:hover { background: color-mix(in oklab, var(--default) 88%, var(--foreground)); color: var(--default-foreground); } .de-btn:active { transform: scale(0.98); } .de-btn-primary { background: var(--accent); color: var(--accent-foreground); font-weight: 600; } .de-btn-primary:hover { background: var(--accent-hover); color: var(--accent-foreground); } .de-btn-danger { background: var(--danger-soft); color: var(--danger); } .de-btn-danger:hover { background: color-mix(in oklab, var(--danger) 22%, transparent); color: var(--danger); } .de-btn-danger:focus-visible { box-shadow: var(--ring-danger); } .de-btn-ghost { background: transparent; color: var(--muted); } .de-btn-ghost:hover { background: var(--hover-wash); color: var(--foreground); } /* Bordered — the quiet default for secondary toolbar actions */ .de-btn-outline { background: transparent; color: var(--foreground); box-shadow: inset 0 0 0 1px var(--field-border); } .de-btn-outline:hover { background: var(--hover-wash); color: var(--foreground); } .de-btn-sm { height: 32px; padding: 0 12px; font-size: var(--fs-small); border-radius: var(--radius-sm); } .de-btn-lg { height: 46px; padding: 0 22px; font-size: var(--fs-body); } .de-btn-block { display: flex; width: 100%; } .de-btn:disabled, .de-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .de-input, .de-select, .de-textarea { width: 100%; height: 40px; background: var(--field); border: 1px solid var(--field-border); border-radius: var(--radius-md); color: var(--field-foreground); font-family: var(--de-font-sans); font-size: var(--fs-control); font-weight: 400; padding: 0 12px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); } .de-textarea { height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; line-height: 1.6; } .de-input::placeholder, .de-textarea::placeholder { color: var(--field-placeholder); } .de-input:hover, .de-select:hover, .de-textarea:hover { border-color: color-mix(in oklab, var(--field-border) 60%, var(--foreground)); } .de-input:focus, .de-select:focus, .de-textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .de-input:disabled, .de-select:disabled, .de-textarea:disabled { opacity: 0.55; cursor: not-allowed; } .de-input[aria-invalid="true"], .de-textarea[aria-invalid="true"] { border-color: var(--danger); } .de-input[aria-invalid="true"]:focus, .de-textarea[aria-invalid="true"]:focus { box-shadow: var(--ring-danger); } .de-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 34px; } .de-label { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--foreground); letter-spacing: 0; text-transform: none; margin-bottom: 6px; } .de-field { display: block; margin-bottom: var(--sp-5); } .de-field:last-child { margin-bottom: 0; } .de-field-desc { margin: 6px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--subtle); } .de-field-error { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; font-size: var(--fs-small); font-weight: 500; color: var(--danger); } .de-fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-6); } .de-fieldset > legend { padding: 0; margin-bottom: var(--sp-3); font-size: var(--fs-control); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--foreground); } .de-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); } .de-inline-form { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; } .de-inline-form .de-field { flex: 1 1 220px; margin-bottom: 0; } .de-check { display: inline-flex; align-items: flex-start; gap: 9px; font-size: var(--fs-control); color: var(--muted); cursor: pointer; } .de-check input { width: 16px; height: 16px; accent-color: var(--accent); margin-top: 2px; flex: none; } .de-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; } .de-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .de-switch-track { position: relative; flex: none; width: 40px; height: 24px; background: var(--default); border: 0; border-radius: var(--radius-pill); transition: background var(--dur-fast); } .de-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out); } .de-switch input:checked + .de-switch-track { background: var(--accent); } .de-switch input:checked + .de-switch-track::after { transform: translateX(16px); } .de-switch input:focus-visible + .de-switch-track { box-shadow: var(--ring); } .de-switch-label { font-size: var(--fs-control); color: var(--muted); } .de-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .de-toolbar-spacer { flex: 1 1 auto; } /* ============================================================ 9. FEEDBACK ============================================================ */ .de-alert { display: block; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-secondary); color: var(--muted); font-size: var(--fs-control); font-weight: 400; line-height: 1.6; } .de-alert-success { color: color-mix(in oklab, var(--success) 75%, var(--foreground)); background: var(--success-soft); border-color: var(--de-success-edge); } .de-alert-error { color: color-mix(in oklab, var(--danger) 75%, var(--foreground)); background: var(--danger-soft); border-color: var(--de-danger-edge); } .de-alert-warning { color: color-mix(in oklab, var(--warning) 70%, var(--foreground)); background: var(--warning-soft); border-color: var(--de-warning-edge); } .de-alert-info { color: color-mix(in oklab, var(--accent) 75%, var(--foreground)); background: var(--accent-soft); border-color: var(--de-info-edge); } .de-alert-title { display: block; font-weight: 600; margin-bottom: 2px; } .de-alert-icon { font-size: 18px; line-height: 1; vertical-align: -3px; margin-right: 6px; } .de-alert code { background: color-mix(in oklab, var(--foreground) 8%, transparent); color: inherit; border-color: transparent; } .de-status { font-size: var(--fs-small); font-weight: 500; padding: 3px 9px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 5px; } .de-status-success, .de-status-ok { color: var(--success); background: var(--success-soft); } .de-status-error { color: var(--danger); background: var(--danger-soft); } .de-status-warning { color: var(--warning); background: var(--warning-soft); } .de-status-info { color: var(--accent); background: var(--accent-soft); } .de-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); border: 0; background: var(--default); color: var(--muted); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; } .de-badge-success { color: var(--success); background: var(--success-soft); } .de-badge-danger { color: var(--danger); background: var(--danger-soft); } .de-badge-warning { color: var(--warning); background: var(--warning-soft); } .de-badge-info { color: var(--accent); background: var(--accent-soft); } .de-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--disabled); } .de-dot-live { background: var(--success); animation: de-pulse 2s var(--ease-out) infinite; } @keyframes de-pulse { 0%,100% { box-shadow: 0 0 0 0 var(--success-soft); } 50% { box-shadow: 0 0 0 5px transparent; } } .de-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-12) var(--sp-6); color: var(--subtle); } .de-empty-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: var(--default); color: var(--muted); margin-bottom: var(--sp-4); } .de-empty-title { font-size: var(--fs-h4); font-weight: 600; color: var(--foreground); margin: 0 0 6px; } .de-empty-desc { font-size: var(--fs-control); line-height: 1.6; margin: 0 0 var(--sp-5); max-width: 420px; } .de-skeleton { background: linear-gradient(90deg, var(--surface-secondary) 25%, var(--surface-tertiary) 50%, var(--surface-secondary) 75%); background-size: 200% 100%; border-radius: var(--radius-sm); animation: de-shimmer 1.4s linear infinite; color: transparent !important; } @keyframes de-shimmer { to { background-position: -200% 0; } } /* ============================================================ 10. DATA ============================================================ */ .de-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); -webkit-overflow-scrolling: touch; } .de-table { width: 100%; border-collapse: collapse; font-size: var(--fs-control); min-width: 560px; } .de-table th { text-align: left; padding: 10px var(--sp-4); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--subtle); background: var(--background-secondary); border-bottom: 1px solid var(--separator); white-space: nowrap; } .de-table td { padding: 12px var(--sp-4); border-bottom: 1px solid var(--separator); color: var(--muted); vertical-align: middle; } .de-table tbody tr:last-child td { border-bottom: 0; } .de-table tbody tr { transition: background var(--dur-fast); } .de-table tbody tr:hover { background: var(--hover-wash); } .de-table .de-num { text-align: right; font-variant-numeric: tabular-nums; } .de-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); } .de-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--sp-5); box-shadow: var(--shadow-sm); } .de-stat-label { font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--subtle); margin-bottom: 10px; } .de-stat-value { font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--foreground); font-variant-numeric: tabular-nums; } .de-stat-note { margin-top: 8px; font-size: var(--fs-small); color: var(--subtle); line-height: 1.5; } .de-defs { display: grid; grid-template-columns: 130px 1fr; gap: var(--sp-3) var(--sp-5); font-size: var(--fs-control); align-items: center; margin: 0; } .de-defs dt { color: var(--subtle); font-weight: 400; margin: 0; } .de-defs dd { color: var(--foreground); font-weight: 500; margin: 0; } @media (max-width: 520px) { .de-defs { grid-template-columns: 1fr; gap: 2px var(--sp-3); } .de-defs dd { margin-bottom: var(--sp-3); } } /* ============================================================ 11. TABS ============================================================ */ .de-tabs { display: flex; gap: 2px; margin: 0 0 var(--sp-5); padding: 3px; background: var(--background-secondary); border-radius: var(--radius-lg); flex-wrap: wrap; border-bottom: 0; } .de-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: transparent; border: 0; border-radius: var(--radius-md); color: var(--subtle); font-family: var(--de-font-sans); font-size: var(--fs-control); font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); } .de-tab:hover { color: var(--foreground); } .de-tab.active, .de-tab[aria-selected="true"] { font-weight: 600; } /* ============================================================ 12. AUTH SCREENS ============================================================ */ .de-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--sp-6); background: var(--background); } .de-auth-box { width: 100%; max-width: 400px; } .de-auth-head { text-align: center; margin-bottom: var(--sp-6); } .de-auth-head .de-eyebrow { margin: 0; color: var(--subtle); } .de-auth-title { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; color: var(--foreground); margin: 0 0 4px; } .de-auth-title .accent { color: var(--accent); font-style: normal; } .de-auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: var(--sp-6); box-shadow: var(--shadow-lg); } .de-auth-form { display: flex; flex-direction: column; gap: var(--sp-4); } .de-auth-note { margin: 12px 0 0; font-size: var(--fs-small); color: var(--subtle); text-align: center; } .de-auth-foot { margin-top: var(--sp-5); display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0; text-transform: none; } .de-auth-foot-center { justify-content: center; } .de-auth-foot a { color: var(--subtle); text-decoration: none; transition: color var(--dur-fast); } .de-auth-foot a:hover { color: var(--accent); } .de-auth-theme { display: flex; justify-content: center; margin-top: var(--sp-5); } .de-result { text-align: center; padding: var(--sp-2) 0; } .de-result-icon { font-size: 44px; line-height: 1; display: block; margin-bottom: var(--sp-3); } .de-result-icon-info { color: var(--accent); } .de-result-icon-warn { color: var(--warning); } .de-result-icon-ok { color: var(--success); } .de-result-title { color: var(--foreground); font-weight: 600; font-size: var(--fs-h4); margin: 0 0 6px; } .de-result-desc { color: var(--muted); font-size: var(--fs-control); line-height: 1.6; margin: 0 0 var(--sp-5); } .de-result-desc:last-child { margin-bottom: 0; } /* ============================================================ 12b. DASHBOARD ============================================================ */ .dash-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); } .dash-head .de-h1 { font-size: clamp(26px, 2.6vw, 34px); } .dash-head .de-lede { margin-top: 4px; font-size: var(--fs-control); } .dash-state { padding: 7px 14px; font-size: var(--fs-control); font-weight: 500; } .dash-state.is-live { color: var(--success); background: var(--success-soft); } .dash-state.is-live .de-dot { background: var(--success); } .dash-state.is-error { color: var(--danger); background: var(--danger-soft); } .dash-state.is-error .de-dot { background: var(--danger); } .dash-state.is-idle { color: var(--warning); background: var(--warning-soft); } .dash-state.is-idle .de-dot { background: var(--warning); } /* Metrics and chart in one container, divided by hairlines. */ .dash-overview { margin-bottom: var(--sp-4); } .dash-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--separator); } .dash-metric { padding: var(--sp-5) var(--sp-6); border-right: 1px solid var(--separator); } .dash-metric:last-child { border-right: 0; } .dash-metric-label { font-size: var(--fs-control); color: var(--muted); margin-bottom: 6px; } .dash-metric-row { display: flex; align-items: baseline; gap: 10px; } .dash-metric-value { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: var(--foreground); font-variant-numeric: tabular-nums; line-height: 1; } .dash-metric-side { display: flex; flex-direction: column; gap: 1px; } .dash-metric-today { font-size: var(--fs-control); color: var(--muted); line-height: 1.2; } .dash-metric-delta { font-size: var(--fs-xs); color: var(--subtle); line-height: 1.2; } .dash-metric-delta.is-up { color: var(--success); } .dash-metric-delta.is-down { color: var(--warning); } .dash-chart-area { padding: var(--sp-4) var(--sp-4) var(--sp-3); min-height: 300px; } .dash-chart-area > .de-empty { min-height: 260px; justify-content: center; } .dash-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-4); padding: 0 var(--sp-2) var(--sp-2); font-size: var(--fs-small); color: var(--subtle); } .dash-legend span { display: inline-flex; align-items: center; gap: 6px; } .dash-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } .dash-svg { width: 100%; height: 320px; display: block; } .dash-grid { stroke: var(--separator); stroke-width: 1; vector-effect: non-scaling-stroke; } .dash-grid-v { opacity: 0.6; } .dash-axis { fill: var(--subtle); font-size: 12px; font-family: var(--de-font-sans); } /* Leaderboards */ .dash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--sp-4); } .dash-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--separator); } .dash-list-title { margin: 0; font-size: var(--fs-h4); font-weight: 600; color: var(--foreground); } .dash-list-col { font-size: var(--fs-small); color: var(--subtle); } .dash-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 14px var(--sp-5); border-bottom: 1px solid var(--separator); font-size: var(--fs-control); } .dash-row:last-child { border-bottom: 0; } .dash-row-main { color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-row-val { color: var(--foreground); font-variant-numeric: tabular-nums; white-space: nowrap; } .dash-row-muted { color: var(--subtle); } @media (max-width: 720px) { .dash-metrics { grid-template-columns: 1fr; } .dash-metric { border-right: 0; border-bottom: 1px solid var(--separator); } .dash-metric:last-child { border-bottom: 0; } .dash-svg { height: 240px; } } /* ============================================================ 13. FOOTER, NATIVE CONTROLS, MOTION ============================================================ */ body.de-studio footer.de-footer { margin-top: var(--sp-12); padding: var(--sp-6) var(--sp-8); border-top: 1px solid var(--separator); color: var(--subtle); font-size: var(--fs-small); letter-spacing: 0; text-transform: none; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); } body.de-studio ::-webkit-scrollbar { width: 10px; height: 10px; } body.de-studio ::-webkit-scrollbar-track { background: transparent; } body.de-studio ::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--foreground) 20%, transparent); border-radius: var(--radius-pill); border: 2px solid var(--background); } body.de-studio ::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--foreground) 32%, transparent); } @media (prefers-reduced-motion: reduce) { body.de-studio *, body.de-studio *::before, body.de-studio *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .de-card:hover { transform: none; } }