/* ============================================================================ * apliteni-ui — design tokens * Single source of truth for the Apliteni deck theme. * * Colour semantics are identical to viz/ (deck index.html, account.mjs): * purple accent · near-black surfaces · green = live · cyan = link/flag. * Two themes: dark (default) and light. Toggle with `data-theme` on . * * Everything downstream references the SEMANTIC tokens (--bg, --surface, * --accent, --text…), never the raw ramp. Swap a ramp value once, and every * component follows. * ========================================================================== */ :root { /* -- Brand ramp (theme-invariant hues) ---------------------------------- */ --purple-900: #4c1f94; --purple-700: #6a2dcc; --purple-500: #9b5dff; --purple-400: #b479ff; --cyan-500: #20dcf5; --green-500: #98ff8f; /* -- Radius scale ------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 9px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 18px; --radius-2xl: 24px; --radius-pill: 999px; /* -- Spacing scale (4px base) ------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* -- Typography --------------------------------------------------------- */ --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --text-xs: 11px; --text-sm: 13px; --text-base: 14.5px; --text-md: 15.5px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 30px; --text-3xl: 40px; --text-4xl: 56px; --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.62; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.14em; /* -- Motion ------------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.15s; --dur-med: 0.25s; --dur-slow: 0.4s; /* -- Elevation (z) ------------------------------------------------------ */ --z-base: 1; --z-sticky: 10; --z-dropdown: 30; --z-overlay: 100; --z-toast: 200; } /* ============================================================================ * DARK THEME (default) — deck palette from viz/index.html * ========================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; --purple: #6a2dcc; --purple-light: #9b5dff; --purple-mid: #b479ff; --cyan: #20dcf5; --green: #98ff8f; --pink: #e35b8f; --amber: #ffcf6a; --bg: #16151f; --bg-elevated: #1c1a28; --surface: #221f2e; --surface-2: #1b1927; --surface-3: #2a2739; --seg-active-bg: #34314a; /* raised pill — clearly above the inset track in dark */ --border: #332f45; --border-strong: #453f5c; --text: #e9e7f0; --strong: #ffffff; --dim: #c6c2d6; --muted: #948fa8; --accent: #9b5dff; --accent-strong: #7c3aed; /* button bg — white text clears WCAG AA (~6.5:1) */ --accent-contrast: #ffffff; --ink: #e9e7f0; --glow-green: rgba(152, 255, 143, 0.16); --glow-purple: rgba(155, 93, 255, 0.18); --glow-cyan: rgba(32, 220, 245, 0.14); --glow-pink: rgba(227, 91, 143, 0.16); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5); /* Tight elevation for the active segmented pill — stays contained in its track. */ --shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3); --ring: 0 0 0 3px rgba(155, 93, 255, 0.35); /* Accent gradient stops (hero headline, marketing) — overridden per sub-theme. */ --grad-from: var(--purple-light); --grad-to: var(--cyan); } /* ============================================================================ * LIGHT THEME — deck light palette from viz/account.mjs * ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --purple: #6a2dcc; --purple-light: #6a2dcc; --purple-mid: #7a3be0; --cyan: #0c8fa8; --green: #1c8a2c; --pink: #d63c72; --amber: #b5730a; --bg: #f6f6f8; --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #f0f1f5; --surface-3: #e7e9f0; --seg-active-bg: #ffffff; /* white pill raised above the grey track in light */ --border: #d7dae2; --border-strong: #c3c7d4; --text: #1e232b; --strong: #0f0f13; --dim: #3d434e; --muted: #565c68; --accent: #6a2dcc; --accent-strong: #6a2dcc; /* already dark enough for white text */ --accent-contrast: #ffffff; --ink: #1e232b; --glow-green: rgba(30, 150, 50, 0.1); --glow-purple: rgba(106, 45, 204, 0.09); --glow-cyan: rgba(12, 143, 168, 0.1); --glow-pink: rgba(214, 60, 114, 0.1); --shadow-sm: 0 1px 3px rgba(30, 30, 50, 0.08); --shadow-md: 0 8px 24px rgba(30, 30, 50, 0.1); --shadow-lg: 0 18px 50px rgba(30, 30, 50, 0.16); /* Tight elevation for the active segmented pill — stays contained in its track. */ --shadow-seg: 0 1px 2px rgba(30, 30, 50, 0.12), 0 2px 4px rgba(30, 30, 50, 0.1); --ring: 0 0 0 3px rgba(106, 45, 204, 0.25); --grad-from: var(--purple-light); --grad-to: var(--cyan); } /* ============================================================================ * Accent sub-themes — an orthogonal `data-accent` dimension on top of * `data-theme` (dark/light). Set both on : * * * * Each sub-theme only re-points the accent family (--accent, --purple*, * --glow-purple, --ring, --grad-*). Surfaces, text and signal colours (green = * live, pink = danger) stay put, so every accent works in light AND dark and * every component follows with zero component-level changes. * * Selectors carry two attributes + :root, so they always out-specify the * single-attribute theme blocks in tokens.css regardless of import order. * ========================================================================== */ /* ---- Phoenix — ember / rising fire (the strategy's namesake) ------------- */ :root[data-theme="dark"][data-accent="phoenix"] { --purple: #e0531f; --purple-light: #ff8a5c; --purple-mid: #ffa273; --accent: #ff6a3d; --accent-strong: var(--accent); --accent-contrast: #241006; --glow-purple: rgba(255, 106, 61, 0.18); --ring: 0 0 0 3px rgba(255, 106, 61, 0.38); --grad-from: #ff7a45; --grad-to: #ffcf6a; } :root[data-theme="light"][data-accent="phoenix"] { --purple: #c2400f; --purple-light: #d64a12; --purple-mid: #b8420f; --accent: #d64a12; --accent-strong: var(--accent); --accent-contrast: #ffffff; --glow-purple: rgba(214, 74, 18, 0.10); --ring: 0 0 0 3px rgba(214, 74, 18, 0.28); --grad-from: #d64a12; --grad-to: #e8992a; } /* ---- Ocean — azure ------------------------------------------------------- */ :root[data-theme="dark"][data-accent="ocean"] { --purple: #1f7fe0; --purple-light: #5ab0ff; --purple-mid: #7cc0ff; --accent: #3b9dff; --accent-strong: var(--accent); --accent-contrast: #04121f; --glow-purple: rgba(59, 157, 255, 0.18); --ring: 0 0 0 3px rgba(59, 157, 255, 0.38); --grad-from: #3b9dff; --grad-to: #20dcf5; } :root[data-theme="light"][data-accent="ocean"] { --purple: #1156b8; --purple-light: #1568d6; --purple-mid: #1560c8; --accent: #1568d6; --accent-strong: var(--accent); --accent-contrast: #ffffff; --glow-purple: rgba(21, 104, 214, 0.10); --ring: 0 0 0 3px rgba(21, 104, 214, 0.28); --grad-from: #1568d6; --grad-to: #17a2c0; } /* ---- Emerald — jade ------------------------------------------------------ */ :root[data-theme="dark"][data-accent="emerald"] { --purple: #0fa876; --purple-light: #3ad9a0; --purple-mid: #5fe3b4; --accent: #16c98a; --accent-strong: var(--accent); --accent-contrast: #04180f; --glow-purple: rgba(22, 201, 138, 0.18); --ring: 0 0 0 3px rgba(22, 201, 138, 0.38); --grad-from: #16c98a; --grad-to: #20dcf5; } :root[data-theme="light"][data-accent="emerald"] { --purple: #0a865a; --purple-light: #0b9c68; --purple-mid: #0a9060; --accent: #0b9c68; --accent-strong: var(--accent); --accent-contrast: #ffffff; --glow-purple: rgba(11, 156, 104, 0.10); --ring: 0 0 0 3px rgba(11, 156, 104, 0.28); --grad-from: #0b9c68; --grad-to: #12b0a0; } /* ============================================================================ * base — reset, document defaults, ambient glow, typography primitives * ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-weight: var(--weight-normal); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--strong); } a { color: var(--accent); text-decoration: none; } /* Ambient blurred glow — the deck's signature background depth. Place absolutely inside a positioned parent. Two colour variants ship; scale/position with inline styles. */ .ui-glow { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.5; pointer-events: none; z-index: 0; width: 420px; height: 420px; } .ui-glow--purple { background: radial-gradient(circle, var(--purple-light), transparent 70%); } .ui-glow--green { background: radial-gradient(circle, var(--green), transparent 70%); opacity: 0.28; } .ui-glow--cyan { background: radial-gradient(circle, var(--cyan), transparent 70%); opacity: 0.3; } /* Layout helpers used by the example apps */ .ui-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(14px, 2.4vw, 26px); } .ui-stack > * + * { margin-top: var(--space-4); } /* Section eyebrow — uppercase caption used across cards and headers */ .ui-eyebrow { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); font-weight: var(--weight-semibold); } /* Sensible default size for inline icons that a parent rule doesn't size. Component rules (.ui-btn svg, .ui-card__icon svg…) come later and win the tie, so they always override this — it only catches bare icon() calls. */ svg:not([width]):not([height]) { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.15em; } /* Focus-visible ring, shared by all interactive controls */ .ui-focusable:focus-visible, .ui-btn:focus-visible, .ui-input:focus-visible, .ui-seg button:focus-visible, .ui-switch:focus-visible { outline: none; box-shadow: var(--ring); } /* ============================================================================ * Button — .ui-btn (variants: primary / secondary / ghost / danger) * (sizes: sm / md / lg · [icon] · [disabled] · [aria-busy]) * ========================================================================== */ .ui-btn { --btn-pad-y: 9px; --btn-pad-x: 17px; --btn-font: var(--text-sm); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: var(--btn-font); font-weight: var(--weight-medium); line-height: 1; border-radius: var(--radius-sm); padding: var(--btn-pad-y) var(--btn-pad-x); cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); white-space: nowrap; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); } .ui-btn:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); color: var(--strong); } .ui-btn:active { transform: translateY(1px); } .ui-btn svg { width: 16px; height: 16px; flex: none; } /* -- Variants ----------------------------------------------------------- */ .ui-btn--primary { background: var(--accent-strong); color: var(--accent-contrast); border-color: var(--accent-strong); font-weight: var(--weight-semibold); } .ui-btn--primary:hover { filter: brightness(1.1); color: var(--accent-contrast); background: var(--accent-strong); border-color: var(--accent-strong); } .ui-btn--ghost { background: transparent; border-color: transparent; color: var(--dim); } .ui-btn--ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--strong); } .ui-btn--danger { color: var(--muted); } .ui-btn--danger:hover { color: var(--pink); border-color: var(--pink); background: color-mix(in srgb, var(--pink) 10%, transparent); } /* -- Sizes -------------------------------------------------------------- */ .ui-btn--sm { --btn-pad-y: 6px; --btn-pad-x: 12px; --btn-font: 12.5px; } .ui-btn--lg { --btn-pad-y: 13px; --btn-pad-x: 24px; --btn-font: var(--text-md); border-radius: var(--radius-md); } /* Icon-only */ .ui-btn--icon { padding: 9px; border-radius: var(--radius-sm); } .ui-btn--icon.ui-btn--sm { padding: 6px; } .ui-btn--block { width: 100%; } /* -- States ------------------------------------------------------------- */ .ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* Busy: keep the label, run a gradient-bar loader along the base, and the button is disabled (not clickable). Pass busy + the .ui-btn__bars markup. */ .ui-btn[aria-busy="true"] { pointer-events: none; position: relative; overflow: hidden; } .ui-btn__bars { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, currentColor 20%, transparent); overflow: hidden; } .ui-btn__bars i { position: absolute; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--purple-light), var(--cyan)); } .ui-btn__bars i:nth-child(1) { width: 35%; animation: ui-bars1 2s cubic-bezier(0.65, 0.05, 0.35, 1) infinite; } .ui-btn__bars i:nth-child(2) { width: 20%; animation: ui-bars2 2s cubic-bezier(0.65, 0.05, 0.35, 1) 0.8s infinite; } @keyframes ui-bars1 { 0% { left: -40%; } 100% { left: 110%; } } @keyframes ui-bars2 { 0% { left: -25%; } 100% { left: 120%; } } @media (prefers-reduced-motion: reduce) { .ui-btn__bars i { animation: none; } .ui-btn__bars i:nth-child(1) { left: 0; } } @keyframes ui-spin { to { transform: rotate(360deg); } } /* ============================================================================ * Card — .ui-card (filled surface, no borders — the deck groups with * surface + radius, never outlines) * Rows: .ui-card__row · headers: .ui-card__title / .ui-card__sub * ========================================================================== */ .ui-card { background: var(--surface); border-radius: var(--radius-xl); padding: var(--space-6) 26px; position: relative; } /* Vertical stacks space cards with the container's gap — see .ui-card-stack. (No `.ui-card + .ui-card` margin: it leaks into grid/flex rows and misaligns.) */ .ui-card-stack { display: flex; flex-direction: column; gap: var(--space-5); } .ui-card--pad-sm { padding: var(--space-5); } .ui-card--pad-lg { padding: var(--space-8) var(--space-10); } /* An accent-tinted card, e.g. a highlighted plan / success surface */ .ui-card--accent { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); } .ui-card--live { background: color-mix(in srgb, var(--green) 10%, var(--surface)); } /* Interactive card (link / button semantics) */ .ui-card--interactive { cursor: pointer; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease); } .ui-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .ui-card__title { color: var(--strong); font-size: var(--text-lg); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: 10px; margin: 0 0 5px; } .ui-card__sub { color: var(--dim); font-size: var(--text-base); line-height: var(--leading-snug); margin-bottom: var(--space-5); } /* Setting rows: label + control, divided by a hairline */ .ui-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) 2px; } .ui-card__row + .ui-card__row { border-top: 1px solid var(--border); } .ui-card__row .lab { color: var(--strong); font-size: var(--text-md); font-weight: var(--weight-medium); } .ui-card__row .hint { color: var(--dim); font-size: 13.5px; margin-top: 3px; } /* Icon chip that leads a card header */ .ui-card__icon { width: 38px; height: 38px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--glow-purple); color: var(--accent); flex: none; } .ui-card__icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; } /* ============================================================================ * Badge / Pill / Tag * .ui-badge — uppercase status chip (live / soon / archive / neutral) * .ui-tag — soft solid label * .ui-dot — leading status dot (pulses when .is-live) * ========================================================================== */ .ui-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--weight-bold); padding: 3px 9px; border-radius: var(--radius-pill); color: var(--muted); background: var(--surface-2); white-space: nowrap; } .ui-badge--live { color: var(--green); background: var(--glow-green); } .ui-badge--soon { color: var(--purple-mid); background: var(--glow-purple); } .ui-badge--info { color: var(--cyan); background: var(--glow-cyan); } .ui-badge--warn { color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); } .ui-badge--danger { color: var(--pink); background: var(--glow-pink); } .ui-badge--archive { color: var(--muted); background: var(--surface); } /* Pill: same shape, sentence case, a touch larger — a metadata chip */ .ui-pill { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-radius: var(--radius-pill); padding: 4px 11px; font-weight: var(--weight-semibold); } .ui-pill--live { color: var(--green); background: var(--glow-green); } .ui-pill--soon { color: var(--purple-mid); background: var(--glow-purple); } /* Status dot */ .ui-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; display: inline-block; } .ui-dot.is-live { background: var(--green); box-shadow: 0 0 0 0 var(--glow-green); animation: ui-pulse 2s var(--ease) infinite; } @keyframes ui-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* ============================================================================ * Segmented control — .ui-seg (the deck's pill switch: theme, Deck/Text, plan) * The selected button rides on a raised surface with a soft shadow. * ========================================================================== */ .ui-seg { display: inline-flex; background: var(--surface-2); border-radius: var(--radius-2xl); padding: 3px; gap: 2px; } .ui-seg button { font-family: var(--font-sans); font-size: 13.5px; font-weight: var(--weight-semibold); letter-spacing: 0.02em; color: var(--dim); background: none; border: 0; padding: 7px 18px; border-radius: var(--radius-2xl); cursor: pointer; transition: color var(--dur-med) var(--ease), background var(--dur-med) var(--ease); } .ui-seg button:hover { color: var(--text); } .ui-seg button.is-active, .ui-seg button[aria-selected="true"] { color: var(--strong); background: var(--seg-active-bg); box-shadow: var(--shadow-seg); } .ui-seg--sm button { padding: 5px 13px; font-size: 12px; } .ui-seg--block { display: flex; } .ui-seg--block button { flex: 1; } /* Accent picker — round colour swatches, active gets a ring */ .ui-accent-picker { display: inline-flex; gap: 10px; align-items: center; } .ui-accent-picker button { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--swatch, var(--accent)); box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px var(--surface); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .ui-accent-picker button:hover { transform: scale(1.08); } .ui-accent-picker button.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--swatch, var(--accent)); } .ui-accent-picker button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--swatch, var(--accent)); } /* ============================================================================ * Form controls — input, textarea, select, field, checkbox/radio, switch * ========================================================================== */ .ui-field { display: block; } .ui-field__label { display: block; color: var(--strong); font-size: var(--text-base); font-weight: var(--weight-medium); margin-bottom: 8px; } .ui-field__hint { color: var(--muted); font-size: var(--text-sm); margin-top: 7px; line-height: 1.5; } .ui-field__error { color: var(--pink); font-size: var(--text-sm); margin-top: 7px; display: flex; align-items: center; gap: 6px; } .ui-input, .ui-textarea, .ui-select { font-family: var(--font-sans); font-size: var(--text-base); color: var(--strong); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 15px; width: 100%; transition: border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); } .ui-textarea { resize: vertical; min-height: 96px; line-height: 1.55; } .ui-input:hover, .ui-textarea:hover, .ui-select:hover { border-color: var(--border-strong); } .ui-input:focus, .ui-textarea:focus, .ui-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .ui-input::placeholder, .ui-textarea::placeholder { color: var(--muted); opacity: 0.9; } .ui-input:disabled, .ui-textarea:disabled { opacity: 0.5; cursor: not-allowed; } .ui-input.is-invalid, .ui-textarea.is-invalid { border-color: var(--pink); } .ui-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--glow-pink); } /* Input with a leading icon / adornment */ .ui-input-group { position: relative; display: flex; align-items: center; } .ui-input-group .ui-input { padding-left: 42px; } .ui-input-group__icon { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--muted); pointer-events: none; } .ui-input-group__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; } .ui-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23948fa8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; cursor: pointer; } /* Checkbox / radio — custom, token-driven */ .ui-check { display: inline-flex; align-items: flex-start; gap: 11px; cursor: pointer; font-size: var(--text-base); color: var(--text); line-height: 1.5; } .ui-check input { appearance: none; width: 19px; height: 19px; flex: none; margin-top: 1px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--surface-2); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); position: relative; } .ui-check input[type="radio"] { border-radius: 50%; } .ui-check input:hover { border-color: var(--accent); } .ui-check input:checked { background: var(--accent); border-color: var(--accent); } .ui-check input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px; border: solid var(--accent-contrast); border-width: 0 2px 2px 0; transform: rotate(45deg); } .ui-check input[type="radio"]:checked::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent-contrast); } .ui-check input:focus-visible { outline: none; box-shadow: var(--ring); } /* Toggle switch */ .ui-switch { --sw-w: 44px; --sw-h: 26px; position: relative; display: inline-block; width: var(--sw-w); height: var(--sw-h); flex: none; } .ui-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .ui-switch__track { position: absolute; inset: 0; background: var(--surface-3); border-radius: var(--radius-pill); cursor: pointer; transition: background var(--dur-med) var(--ease); } .ui-switch__track::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(var(--sw-h) - 6px); height: calc(var(--sw-h) - 6px); background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform var(--dur-med) var(--ease); } .ui-switch input:checked + .ui-switch__track { background: var(--accent); } .ui-switch input:checked + .ui-switch__track::before { transform: translateX(calc(var(--sw-w) - var(--sw-h))); } .ui-switch input:focus-visible + .ui-switch__track { box-shadow: var(--ring); } .ui-switch input:disabled + .ui-switch__track { opacity: 0.5; cursor: not-allowed; } /* ============================================================================ * Table — .ui-table (borderless-body, hairline rows, uppercase head) * Row modifiers: .is-dead (revoked/struck), right-aligned .ui-table__act * ========================================================================== */ .ui-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); } .ui-table th { text-align: left; font-size: var(--text-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: var(--weight-semibold); padding: 0 16px 11px 0; border-bottom: 1px solid var(--border); } .ui-table td { padding: 15px 16px 15px 0; border-bottom: 1px solid var(--border); color: var(--dim); vertical-align: middle; white-space: nowrap; } .ui-table tr:last-child td { border-bottom: 0; } .ui-table td.ui-table__title { color: var(--strong); font-weight: var(--weight-medium); width: 99%; white-space: normal; } .ui-table th:last-child, .ui-table td.ui-table__act { padding-right: 0; text-align: right; } .ui-table tr.is-dead td { color: var(--muted); } .ui-table tr.is-dead td.ui-table__title { text-decoration: line-through; } .ui-table tbody tr { transition: background var(--dur-fast) var(--ease); } .ui-table--hover tbody tr:hover { background: var(--surface-2); } /* Empty state inside a table area */ .ui-empty { text-align: center; padding: 48px 24px; color: var(--muted); } .ui-empty__icon { width: 44px; height: 44px; margin: 0 auto 14px; color: var(--muted); opacity: 0.6; } .ui-empty__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; } .ui-empty__title { color: var(--text); font-size: var(--text-md); font-weight: var(--weight-medium); margin-bottom: 5px; } .ui-empty__sub { font-size: var(--text-sm); max-width: 320px; margin: 0 auto; line-height: 1.55; } /* ============================================================================ * Callout / Note / Toast — inline messages & transient notifications * ========================================================================== */ .ui-callout { display: flex; gap: 12px; padding: 15px 17px; border-radius: var(--radius-md); background: var(--surface-2); font-size: 13.5px; line-height: 1.55; color: var(--dim); } .ui-callout__icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--muted); } .ui-callout__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; } .ui-callout b { color: var(--text); font-weight: var(--weight-semibold); } .ui-callout code { font-family: var(--font-mono); font-size: 0.92em; color: var(--text); } .ui-callout--info { background: var(--glow-cyan); } .ui-callout--info .ui-callout__icon { color: var(--cyan); } .ui-callout--success { background: var(--glow-green); } .ui-callout--success .ui-callout__icon { color: var(--green); } .ui-callout--warn { background: color-mix(in srgb, var(--amber) 13%, transparent); } .ui-callout--warn .ui-callout__icon { color: var(--amber); } .ui-callout--danger { background: var(--glow-pink); } .ui-callout--danger .ui-callout__icon { color: var(--pink); } /* Toast — a floating, dismissible notification */ .ui-toast { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--radius-md); background: var(--bg-elevated); box-shadow: var(--shadow-lg); color: var(--text); font-size: var(--text-base); max-width: 380px; } .ui-toast__icon { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; } .ui-toast__icon svg { width: 13px; height: 13px; } .ui-toast--success .ui-toast__icon { background: var(--green); color: #0c0c0c; } .ui-toast--danger .ui-toast__icon { background: var(--pink); color: #fff; } .ui-toast__body { flex: 1; } .ui-toast__title { font-weight: var(--weight-medium); color: var(--strong); } .ui-toast__close { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; } .ui-toast__close:hover { color: var(--text); } /* Success panel — centered confirmation, used after form submit */ .ui-success { border-radius: var(--radius-lg); padding: 30px; text-align: center; background: var(--glow-green); } .ui-success__check { width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: #0c0c0c; display: grid; place-items: center; margin: 0 auto 14px; } .ui-success__check svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.4; } .ui-success__title { color: var(--strong); font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: 5px; } .ui-success__sub { color: var(--dim); font-size: var(--text-base); } /* ============================================================================ * Code snippet — .ui-snippet (header bar + copyable body + shell highlighting) * Reveal variant (.ui-snippet--reveal) tints green for a live token/secret. * ========================================================================== */ .ui-snippet { background: var(--surface-2); border-radius: var(--radius-md); overflow: hidden; } .ui-snippet__bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; } .ui-snippet__bar span { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: var(--weight-semibold); } .ui-snippet pre { margin: 0; padding: 0 15px 14px; overflow-x: auto; font-size: var(--text-sm); line-height: 1.55; color: var(--text); white-space: pre; font-family: var(--font-mono); } .ui-snippet__copy { background: none; border: 0; color: var(--muted); cursor: pointer; font-family: var(--font-sans); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; transition: color var(--dur-fast) var(--ease); } .ui-snippet__copy:hover { color: var(--accent); } .ui-snippet__copy svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; } /* Shell token highlighting (matches viz/account.mjs classes) */ .ui-snippet pre .k { color: var(--purple-mid); font-weight: var(--weight-medium); } .ui-snippet pre .f { color: var(--cyan); } .ui-snippet pre .s { color: var(--green); } .ui-snippet pre .u { color: var(--cyan); } .ui-snippet pre .c { color: var(--muted); } /* Reveal: a live secret/token, tinted green */ .ui-snippet--reveal { background: color-mix(in srgb, var(--green) 10%, var(--surface)); } .ui-snippet--reveal .ui-snippet__bar span { color: var(--green); } .ui-snippet--reveal pre { color: var(--green); word-break: break-all; white-space: pre-wrap; } /* Inline code */ .ui-code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); padding: 2px 6px; border-radius: var(--radius-xs); color: var(--text); } /* ============================================================================ * Topbar — canonical strategy topbar, extracted verbatim (class names kept so * viz/ adopts it with no markup change): brand · Deck/Text switch · theme * toggle · version switcher · account menu. * Source of truth previously inlined in viz/topbar.mjs. * ========================================================================== */ .topbar { height: 52px; display: flex; align-items: center; background: var(--bg); border-bottom: 1px solid var(--border); } .topbar__in { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(14px, 2.4vw, 26px); display: flex; align-items: center; gap: 14px; } .topbar .brand { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--strong); text-decoration: none; } .topbar .brand svg { display: block; flex: none; } .topbar .spacer { flex: 1; } /* Deck / Text (segmented, pill) */ .dtsw { display: none; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 24px; padding: 3px; } .dtsw.on { display: inline-flex; } .dtsw a { text-decoration: none; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); padding: 4px 13px; border-radius: 24px; transition: color 0.2s ease, background 0.2s ease; } .dtsw a:hover { color: var(--text); } .dtsw a.cur { color: var(--strong); background: var(--surface); box-shadow: var(--shadow-sm); } /* Theme toggle */ .toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 24px; padding: 7px 12px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; transition: transform 0.15s ease, background 0.35s ease, border-color 0.35s ease; } .toggle:hover { transform: translateY(-1px); } .toggle .ic { width: 15px; height: 15px; display: inline-block; color: var(--accent); } .toggle .ic svg { display: block; width: 100%; height: 100%; } /* Version switcher */ .vsw { position: relative; } .vsw__btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 7px 11px 7px 13px; transition: border-color 0.2s ease, background 0.2s ease; } .vsw__btn:hover { border-color: var(--accent); } .vsw__btn .lbl { color: var(--muted); } .vsw__btn .cur { color: var(--strong); font-weight: 600; letter-spacing: 0.01em; } .vsw__btn .car { width: 8px; height: 8px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg) translateY(-1px); transition: transform 0.2s ease; } .vsw.open .vsw__btn .car { transform: rotate(-135deg) translateY(2px); } .vsw__menu { position: absolute; top: calc(100% + 9px); left: 0; min-width: 266px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 6px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: 0.18s ease; z-index: var(--z-dropdown); } .vsw.open .vsw__menu { opacity: 1; visibility: visible; transform: translateY(0); } .vopt { display: flex; gap: 11px; align-items: flex-start; padding: 10px 13px; border-radius: 10px; cursor: pointer; transition: background 0.15s ease; } .vopt:hover { background: var(--surface); } .vopt .vname { font-family: var(--font-sans); font-size: 12.5px; color: var(--strong); font-weight: 600; letter-spacing: 0.01em; } .vopt .vmeta { font-size: 11px; color: var(--muted); margin-top: 2px; } .vopt .vbadge { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-left: auto; flex: none; margin-top: 1px; } .vbadge.live { color: var(--green); background: var(--glow-green); } .vbadge.arch { color: var(--muted); background: var(--surface); } @media (max-width: 600px) { .vsw__btn .lbl { display: none; } } /* Account — avatar + dropdown. Gated: hidden until the app confirms a session and adds `.on` (mirrors the portal's /auth/me reveal). */ .acct { position: relative; display: none; } .acct.on { display: inline-flex; } .avatar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: linear-gradient(145deg, #2b6b4b, #1d4a5e); color: #fff; font-weight: 600; font-size: 12.5px; display: grid; place-items: center; cursor: pointer; letter-spacing: 0.02em; transition: border-color 0.2s ease; } .acct .avatar:hover { border-color: var(--accent); } .amenu { position: absolute; right: 0; top: 44px; width: 252px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: 0.16s ease; z-index: var(--z-dropdown); } .acct.open .amenu { opacity: 1; visibility: visible; transform: translateY(0); } .amenu .ahead { padding: 13px 15px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 11px; } .amenu .ahead .avatar { cursor: default; } .amenu .ahead .aw { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; } .amenu .ahead .anm { color: var(--strong); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .amenu .ahead .aem { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .amenu a { display: flex; align-items: center; gap: 11px; padding: 10px 15px; color: var(--text); text-decoration: none; font-family: var(--font-sans); font-size: 13px; cursor: pointer; } .amenu a:hover { background: var(--surface); } .amenu a.cur { color: var(--accent); } .amenu a svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; opacity: 0.72; } .amenu .asep { height: 1px; background: var(--border); margin: 5px 0; } .amenu a.aout { color: var(--muted); } .amenu a.aout:hover { color: var(--accent); } /* ============================================================================ * Layout primitives — account sidebar, page shell, auth card, landing hero. * These compose the example apps; each stays token-driven and themeable. * ========================================================================== */ /* -- Account sidebar (from viz/account.mjs .side) ------------------------ */ .ui-side { position: sticky; top: 80px; align-self: start; } .ui-side .cap { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding: 0 12px 11px; } .ui-side a { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 14.5px; } .ui-side a:hover { background: var(--surface-2); } .ui-side a.on { background: var(--surface); color: var(--strong); font-weight: 500; } .ui-side a svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; opacity: 0.7; } .ui-side a.on svg { opacity: 1; stroke: var(--accent); } .ui-side .ssep { height: 1px; background: var(--border); margin: 8px 12px; } .ui-side a.out { color: var(--muted); } .ui-side a.out:hover { color: var(--accent); } /* -- Account shell grid -------------------------------------------------- */ .ui-shell { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 40px 26px 96px; display: grid; grid-template-columns: 200px 1fr; gap: 44px; } .ui-shell__page { min-width: 0; } .ui-shell__crumbs { font-size: 13px; color: var(--dim); margin-bottom: 8px; } .ui-shell__crumbs b { color: var(--text); font-weight: 500; } .ui-shell__page h1 { color: var(--strong); font-weight: 600; font-size: 30px; letter-spacing: -0.01em; margin-bottom: 7px; } .ui-shell__page .sub { color: var(--dim); font-size: 15.5px; margin-bottom: 30px; } @media (max-width: 720px) { .ui-shell { grid-template-columns: 1fr; gap: 20px; } .ui-side { position: static; } } /* -- Auth card (sign-in / consent) — centered, glowing --------------------- */ .ui-auth { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; position: relative; overflow: hidden; } .ui-auth__card { position: relative; z-index: 1; width: 100%; max-width: 420px; background: var(--surface); border-radius: 22px; padding: 38px 36px 32px; box-shadow: var(--shadow-lg); } .ui-auth__brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; } .ui-auth__brand span { font-size: 15px; font-weight: 600; color: var(--strong); } .ui-auth__title { color: var(--strong); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 7px; } .ui-auth__sub { color: var(--dim); font-size: 14.5px; line-height: 1.55; margin-bottom: 26px; } .ui-auth__foot { margin-top: 24px; text-align: center; font-size: 13px; color: var(--muted); } .ui-auth__foot a { color: var(--accent); } .ui-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted); font-size: 12px; } .ui-divider::before, .ui-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* App scope grant list (OAuth consent) */ .ui-scopes { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; } .ui-scope { display: flex; gap: 13px; padding: 13px 4px; } .ui-scope + .ui-scope { border-top: 1px solid var(--border); } .ui-scope__icon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--glow-purple); color: var(--accent); } .ui-scope__icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; } .ui-scope__t { color: var(--strong); font-size: 14px; font-weight: 500; } .ui-scope__d { color: var(--dim); font-size: 13px; margin-top: 2px; line-height: 1.5; } /* -- Landing hero -------------------------------------------------------- */ .ui-hero { position: relative; overflow: hidden; padding: clamp(60px, 12vh, 130px) 0 clamp(50px, 9vh, 100px); text-align: center; } .ui-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.06em; color: var(--purple-mid); background: var(--glow-purple); border-radius: 999px; padding: 6px 14px; margin-bottom: 26px; white-space: nowrap; } .ui-hero__title { font-size: clamp(38px, 6.4vw, 66px); line-height: 1.04; letter-spacing: -0.025em; font-weight: 700; color: var(--strong); max-width: 14ch; margin: 0 auto 22px; } .ui-hero__title .grad { background: linear-gradient(120deg, var(--grad-from), var(--grad-to)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ui-hero__sub { font-size: clamp(16px, 2.1vw, 20px); color: var(--dim); max-width: 52ch; margin: 0 auto 34px; line-height: 1.6; } .ui-hero__cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* Feature grid */ .ui-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 1080px; margin: 0 auto; padding: 0 26px; } .ui-feature__icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--glow-purple); color: var(--accent); margin-bottom: 16px; } .ui-feature__icon svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 1.8; } .ui-feature h3 { color: var(--strong); font-size: 17px; font-weight: 600; margin-bottom: 7px; } .ui-feature p { color: var(--dim); font-size: 14.5px; line-height: 1.6; } .ui-section-head { text-align: center; max-width: 620px; margin: 0 auto clamp(40px, 6vh, 64px); } .ui-section-head h2 { color: var(--strong); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; } .ui-section-head p { color: var(--dim); font-size: 17px; line-height: 1.6; }