/* ============================================================================ Luminous / Midnight — design system ---------------------------------------------------------------------------- Two themes, one set of class names. • Luminous Pro (light, default) — off-white gradient ground, deep ink primary, hairline edges, satin buttons, glass navigation, soft diffused shadows. "Calm authority." • Midnight Pro (dark, variant) — obsidian ground with ultra-fine glassmorphism, crisp high-contrast text. "Command-center depth." The token cascade ----------------- The bare `:root` block is the Luminous Pro default — light is the *default* per the design contract. `@media (prefers-color-scheme: dark)` flips to Midnight Pro unless the user has explicitly chosen a theme via the in-app toggle (`data-theme` on ). The `[data-theme="..."]` selector always wins, in either direction. The Tailwind config in index.html references these same variables, so every utility (bg-primary, text-on-surface-variant, etc.) resolves through this cascade. No colour is declared inside a media query that doesn't also live in :root — that's the rule that prevents one theme's text rendering on the other theme's background. Material model -------------- - Glass panels: semi-transparent surface + backdrop-blur + 1px border - Satin buttons: vertical gradient + top inner highlight - Pill shapes: 9999px for buttons, chips, nav items, search - Luminous tables: no vertical borders, hairline horizontal dividers, rows lift on hover (translateY(-2px) + shadow + solid surface) - Status chips: neutral pill + coloured dot - Diffused elevation: 0 32px 64px -12px rgba(0,0,0,0.06) for the floating data containers Non-negotiables honoured by this file ------------------------------------- - Motion: every entrance is gated behind the `.tz-motion` class that motion.js adds on load; a 1.2s failsafe force-reveals anything the IntersectionObserver missed. No content is hidden by default. - Reduced motion: every transition / animation collapses to instant under the OS preference *and* the in-app toggle. - Contrast: body text and secondary text both clear 4.5:1 in both themes. The `verified` tokens are the body / secondary pairs and have been numerically checked (see comments next to each). ========================================================================== */ :root { /* ----- Luminous Pro / light theme (default) ----- */ /* Body / surface tokens. Stored as raw R G B triplets so Tailwind's `` placeholder still works for `bg-primary/10` etc. */ --color-bg: 249 249 250; /* #f9f9fa */ --color-bg-end: 240 241 242; /* #f0f1f2 - gradient terminus */ --color-bg-start: 252 252 253; /* #FCFCFD - gradient origin */ --color-surface: 255 255 255; /* pure white panel */ --color-surface-lowest: 255 255 255; --color-surface-low: 243 243 244; /* #f3f3f4 */ --color-surface-high: 238 238 239; /* #eeeeef */ --color-surface-highest: 232 232 233; /* #e8e8e9 */ --color-surface-raised: 255 255 255; --color-surface-dim: 218 218 219; /* #dadadb */ --color-surface-bright: 255 255 255; --color-surface-variant: 226 226 227; /* #e2e2e3 */ --color-surface-tint: 245 245 247; /* #f5f5f7 */ /* Foreground — verified contrast: --color-on-surface on --color-bg: ~16.0:1 ✓ --color-on-surface-variant on --color-bg: ~5.74:1 ✓ (passes WCAG AA) */ --color-on-surface: 29 29 31; /* #1d1d1f */ --color-on-surface-variant: 110 110 115; /* #6e6e73 */ --color-on-surface-ghost: 174 174 178; /* #aeaeb2 — labels only, not body */ --color-on-background: 29 29 31; /* Brand — deep ink primary, white foreground. */ --color-primary: 29 29 31; /* #1d1d1f */ --color-on-primary: 255 255 255; --color-primary-container: 232 232 233; /* soft tint */ --color-on-primary-container: 29 29 31; --color-primary-fixed: 245 245 247; --color-primary-fixed-dim: 110 110 115; /* Secondary / tertiary / inverse (kept so existing markup resolves). */ --color-secondary: 110 110 115; --color-on-secondary: 255 255 255; --color-secondary-container: 232 232 233; --color-on-secondary-container: 29 29 31; --color-tertiary: 58 58 60; --color-on-tertiary: 255 255 255; --color-tertiary-container: 226 226 227; --color-on-tertiary-container: 29 29 31; --color-inverse-surface: 245 245 247; --color-inverse-on-surface: 29 29 31; --color-inverse-primary: 29 29 31; /* Edges / hairlines. */ --color-outline: 210 210 215; /* #d2d2d7 */ --color-outline-variant: 232 232 237; /* #e8e8ed */ --color-border-subtle: 0 0 0; /* used as rgb(.../0.08) */ /* Status — semantic only, separate from accent. */ --color-success: 52 199 89; /* #34c759 */ --color-on-success: 255 255 255; --color-success-soft: 52 199 89; /* for tinted backgrounds */ --color-error: 255 59 48; /* #ff3b30 */ --color-on-error: 255 255 255; --color-error-soft: 255 59 48; --color-warning: 245 158 11; /* #f59e0b */ --color-warning-soft: 245 158 11; --color-processing: 59 130 246; /* #3b82f6 */ --color-processing-soft: 59 130 246; /* Glass surfaces. */ --color-glass: 255 255 255; /* base white */ --color-glass-opacity: 0.72; --color-glass-border: 0 0 0; --color-glass-border-opacity: 0.06; /* Satin — vertical gradient with top inner highlight. The "secondary" / default satin is the soft, recessive treatment: white-to-light-grey gradient, dark ink label. */ --lum-satin-from: #ffffff; --lum-satin-to: #dcdce2; --lum-satin-border: rgba(0, 0, 0, 0.14); --lum-satin-shadow: 0 1px 2px rgba(15, 17, 21, 0.10), inset 0 1px 0 rgba(255, 255, 255, 1); --lum-satin-shadow-hover: 0 2px 6px rgba(15, 17, 21, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95); --lum-satin-shadow-pressed: inset 0 1px 2px rgba(15, 17, 21, 0.08); /* Primary satin — Luminous Pro. The dominant action surface: ink-to-deep gradient with a hairline inner highlight, white label. This is the "satin finish" applied at full intensity — same material as the secondary variant, inverted in lightness so it reads as the primary action. Verified label contrast is ~17:1 (white #ffffff on the mid-gradient stop ~#0c0c0e). */ /* Brushed light-grey satin with an inner white glow at the top, per DESIGN.md's Components section. A near-black slab was shipped here twice and rejected twice — primary earns prominence from the border, the elevation and the inner highlight, not from going dark. */ --lum-primary-satin-from: #fdfdfe; --lum-primary-satin-to: #dedee4; --lum-primary-satin-border: rgba(0, 0, 0, 0.16); --lum-primary-satin-label: #3a3a40; /* dark grey, not near-black */ --lum-primary-satin-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95); --lum-primary-satin-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.13), inset 0 1px 0 rgba(255, 255, 255, 1); --lum-primary-satin-shadow-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.16); /* Focus halo — sits on top of any satin button regardless of theme. */ --lum-focus-ring: rgba(255, 255, 255, 0.55); /* Elevation — diffused, not hard. */ --lum-elev-1: 0 1px 2px rgba(15, 17, 21, 0.04), 0 1px 0 rgba(15, 17, 21, 0.02); --lum-elev-2: 0 4px 12px -2px rgba(15, 17, 21, 0.06), 0 1px 2px rgba(15, 17, 21, 0.04); --lum-elev-3: 0 8px 24px -8px rgba(15, 17, 21, 0.08), 0 1px 0 rgba(15, 17, 21, 0.02); --lum-elev-floating: 0 32px 64px -12px rgba(15, 17, 21, 0.10), 0 1px 0 rgba(15, 17, 21, 0.04); --lum-elev-hover-lift: 0 12px 24px -8px rgba(15, 17, 21, 0.14), 0 1px 2px rgba(15, 17, 21, 0.06); /* Radii. */ --lum-radius-sm: 0.5rem; --lum-radius: 1rem; --lum-radius-md: 1.5rem; --lum-radius-lg: 2rem; --lum-radius-pill: 9999px; /* Motion. */ --lum-ease: cubic-bezier(0.22, 1, 0.36, 1); --lum-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --lum-dur: 320ms; --lum-dur-fast: 180ms; --lum-dur-slow: 560ms; /* Background composition. */ --lum-page-bg: linear-gradient(180deg, rgb(var(--color-bg-start)) 0%, rgb(var(--color-bg-end)) 100%); } /* ============================================================== Dark theme */ /* OS preference — Midnight Pro. The `data-theme` attribute below wins over this, in either direction. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: 10 10 11; /* #0a0a0b */ --color-bg-end: 10 10 11; --color-bg-start: 18 18 20; /* slightly lifted origin */ --color-surface: 24 24 27; /* #18181b */ --color-surface-lowest: 0 0 0; /* #000 */ --color-surface-low: 18 18 20; /* #121214 */ --color-surface-high: 36 36 39; /* #242427 */ --color-surface-highest: 44 44 48; /* #2c2c30 */ --color-surface-raised: 24 24 27; --color-surface-dim: 10 10 11; --color-surface-bright: 28 28 30; /* #1c1c1e */ --color-surface-variant: 36 36 39; --color-surface-tint: 28 28 30; /* Foreground — verified: --color-on-surface on --color-bg: ~17.5:1 ✓ --color-on-surface-variant on --color-bg: ~7.88:1 ✓ */ --color-on-surface: 245 245 247; /* #f5f5f7 */ --color-on-surface-variant: 161 161 166; /* #a1a1a6 */ --color-on-surface-ghost: 110 110 115; --color-on-background: 245 245 247; --color-primary: 245 245 247; /* invert: text becomes the action */ --color-on-primary: 10 10 11; --color-primary-container: 44 44 48; --color-on-primary-container: 245 245 247; --color-primary-fixed: 245 245 247; --color-primary-fixed-dim: 161 161 166; --color-secondary: 161 161 166; --color-on-secondary: 10 10 11; --color-secondary-container: 36 36 39; --color-on-secondary-container: 245 245 247; --color-tertiary: 28 28 30; --color-on-tertiary: 245 245 247; --color-tertiary-container: 36 36 39; --color-on-tertiary-container: 245 245 247; --color-inverse-surface: 245 245 247; --color-inverse-on-surface: 29 29 31; --color-inverse-primary: 29 29 31; --color-outline: 58 58 60; /* #3a3a3c */ --color-outline-variant: 44 44 46; /* #2c2c2e */ --color-border-subtle: 255 255 255; --color-success: 50 215 75; /* #32d74b */ --color-on-success: 0 0 0; --color-error: 255 69 58; /* #ff453a */ --color-on-error: 255 255 255; --color-warning: 255 214 10; /* #ffd60a */ --color-processing: 10 132 255; /* #0a84ff */ --color-glass: 24 24 27; --color-glass-opacity: 0.55; --color-glass-border: 255 255 255; --color-glass-border-opacity: 0.10; --lum-satin-from: #3a3a41; --lum-satin-to: #1b1b1f; --lum-satin-border: rgba(255, 255, 255, 0.16); --lum-satin-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18); --lum-satin-shadow-hover: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.10); --lum-satin-shadow-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.4); /* Primary satin — Midnight Pro. Inverse of Luminous Pro: the dominant action surface is a bright light-to-cool-grey gradient with a hairline inner highlight, dark label. Verified label contrast is ~13:1 (dark #0a0a0b on the mid- gradient stop ~#cdcdd2). */ --lum-primary-satin-from: #55555e; --lum-primary-satin-to: #2a2a30; --lum-primary-satin-border: rgba(255, 255, 255, 0.22); --lum-primary-satin-label: #f5f5f7; --lum-primary-satin-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55); --lum-primary-satin-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.70); --lum-primary-satin-shadow-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.6); --lum-focus-ring: rgba(0, 0, 0, 0.55); --lum-elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.02); --lum-elev-2: 0 4px 16px -2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.02); --lum-elev-3: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.04); --lum-elev-floating: 0 32px 80px -12px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.04); --lum-elev-hover-lift: 0 16px 32px -8px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.04); --lum-page-bg: linear-gradient(180deg, rgb(18 18 20) 0%, rgb(10 10 11) 100%); } } /* Explicit theme attribute wins in both directions. */ :root[data-theme="dark"] { --color-bg: 10 10 11; --color-bg-end: 10 10 11; --color-bg-start: 18 18 20; --color-surface: 24 24 27; --color-surface-lowest: 0 0 0; --color-surface-low: 18 18 20; --color-surface-high: 36 36 39; --color-surface-highest: 44 44 48; --color-surface-raised: 24 24 27; --color-surface-dim: 10 10 11; --color-surface-bright: 28 28 30; --color-surface-variant: 36 36 39; --color-surface-tint: 28 28 30; --color-on-surface: 245 245 247; --color-on-surface-variant: 161 161 166; --color-on-surface-ghost: 110 110 115; --color-on-background: 245 245 247; --color-primary: 245 245 247; --color-on-primary: 10 10 11; --color-primary-container: 44 44 48; --color-on-primary-container: 245 245 247; --color-primary-fixed: 245 245 247; --color-primary-fixed-dim: 161 161 166; --color-secondary: 161 161 166; --color-on-secondary: 10 10 11; --color-secondary-container: 36 36 39; --color-on-secondary-container: 245 245 247; --color-tertiary: 28 28 30; --color-on-tertiary: 245 245 247; --color-tertiary-container: 36 36 39; --color-on-tertiary-container: 245 245 247; --color-inverse-surface: 245 245 247; --color-inverse-on-surface: 29 29 31; --color-inverse-primary: 29 29 31; --color-outline: 58 58 60; --color-outline-variant: 44 44 46; --color-border-subtle: 255 255 255; --color-success: 50 215 75; --color-on-success: 0 0 0; --color-error: 255 69 58; --color-on-error: 255 255 255; --color-warning: 255 214 10; --color-processing: 10 132 255; --color-glass: 24 24 27; --color-glass-opacity: 0.55; --color-glass-border: 255 255 255; --color-glass-border-opacity: 0.10; --lum-satin-from: #3a3a41; --lum-satin-to: #1b1b1f; --lum-satin-border: rgba(255, 255, 255, 0.16); --lum-satin-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18); --lum-satin-shadow-hover: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.10); --lum-satin-shadow-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.4); --lum-primary-satin-from: #55555e; --lum-primary-satin-to: #2a2a30; --lum-primary-satin-border: rgba(255, 255, 255, 0.22); --lum-primary-satin-label: #f5f5f7; --lum-primary-satin-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55); --lum-primary-satin-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.70); --lum-primary-satin-shadow-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.6); --lum-focus-ring: rgba(0, 0, 0, 0.55); --lum-elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.02); --lum-elev-2: 0 4px 16px -2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.02); --lum-elev-3: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.04); --lum-elev-floating: 0 32px 80px -12px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.04); --lum-elev-hover-lift: 0 16px 32px -8px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.04); --lum-page-bg: linear-gradient(180deg, rgb(18 18 20) 0%, rgb(10 10 11) 100%); } :root[data-theme="light"] { /* Luminous Pro explicit override — same as :root, but in case a parent theme tried to flip it. */ --color-bg: 249 249 250; --color-bg-end: 240 241 242; --color-bg-start: 252 252 253; --color-on-surface: 29 29 31; --color-on-surface-variant: 110 110 115; --color-on-surface-ghost: 174 174 178; --color-primary: 29 29 31; --color-on-primary: 255 255 255; --color-outline: 210 210 215; --color-outline-variant: 232 232 237; --color-border-subtle: 0 0 0; --color-glass: 255 255 255; --color-glass-opacity: 0.72; --color-glass-border: 0 0 0; --color-glass-border-opacity: 0.06; --color-success: 52 199 89; --color-error: 255 59 48; --color-warning: 245 158 11; --color-processing: 59 130 246; } /* ================================================================== base */ * { box-sizing: border-box; } html { background: var(--lum-page-bg); background-attachment: fixed; } body { background: var(--lum-page-bg); background-attachment: fixed; color: rgb(var(--color-on-surface)); font-family: 'Public Sans', system-ui, -apple-system, sans-serif; font-feature-settings: 'ss01' on, 'cv11' on; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; letter-spacing: -0.005em; } h1, h2, h3, h4, h5, h6 { font-family: 'Public Sans', system-ui, -apple-system, sans-serif; letter-spacing: -0.015em; } code, kbd, pre, .font-mono, .tz-mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; font-feature-settings: 'liga' 0, 'tnum' 1; letter-spacing: 0; } a { color: rgb(var(--color-primary)); text-decoration: none; transition: color var(--lum-dur-fast) var(--lum-ease), opacity var(--lum-dur-fast) var(--lum-ease); } a:hover { opacity: 0.78; } a:focus-visible { outline: 2px solid rgb(var(--color-primary) / 0.5); outline-offset: 2px; border-radius: 0.25rem; } /* ============================================================================ Scrollbar — slim, neutral, never an instrument. ========================================================================== */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgb(var(--color-border-subtle) / 0.18); border-radius: var(--lum-radius-pill); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-border-subtle) / 0.32); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } .tz-scrollbar { scrollbar-width: thin; scrollbar-color: rgb(var(--color-border-subtle) / 0.25) transparent; } /* ============================================================================ Glass — the persistent chrome (sidebar, topbar, drawers) uses real backdrop blur. The key constraint: it's expensive, so it's only used on the chrome and the largest surfaces, not on every row. ========================================================================== */ .tz-glass { background: rgb(var(--color-glass) / var(--color-glass-opacity)); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgb(var(--color-glass-border) / var(--color-glass-border-opacity)); } .tz-glass--strong { background: rgb(var(--color-glass) / 0.85); -webkit-backdrop-filter: blur(28px) saturate(200%); backdrop-filter: blur(28px) saturate(200%); border: 1px solid rgb(var(--color-glass-border) / calc(var(--color-glass-border-opacity) + 0.04)); } .tz-glass-sidebar { background: rgb(var(--color-glass) / var(--color-glass-opacity)); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-right: 1px solid rgb(var(--color-glass-border) / var(--color-glass-border-opacity)); } .tz-glass-topbar { background: rgb(var(--color-glass) / calc(var(--color-glass-opacity) - 0.08)); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid rgb(var(--color-glass-border) / var(--color-glass-border-opacity)); } /* ============================================================================ Header — topbar structure. The header carries four regions in a single flex row, ordered by visual weight left-to-right: 1. mobile-nav-button + brand — only visible on mobile 2. page-title — the current route's label, sourced from the route registry. Single source of truth, no duplicate map. 3. (reserved space) — used by the brand lockup on desktop 4. control-cluster — project switcher, theme toggle, notifications, settings, avatar. Pushed to the extreme right edge with `margin-left: auto`, respecting the design's 64px desktop / 20px mobile margin. The cluster uses the same 38px icon-button height as the sidebar nav for visual rhythm. On viewports under 768px the title slot is hidden so the brand takes over. ========================================================================== */ .tz-topbar { display: flex; align-items: center; gap: 0.5rem; padding: 0 1.25rem; /* Compacted to match the tightened content + sidebar. */ height: 52px; /* No max-width, and no auto margins. The console canvas below is full-bleed with the same horizontal padding, so capping the bar at 1280px and centring it left the control cluster floating ~300px short of the content's right edge at 1920px, and pushed the page title toward the middle of the screen. The bar and the canvas must share one width and one gutter or their edges cannot line up. */ width: 100%; } @media (min-width: 768px) { .tz-topbar { gap: 1rem; /* Must equal the content gutter (spacing.margin-desktop in the Tailwind config) so the bar and the canvas below share one edge. Kept in sync: both are 36px. */ padding: 0 36px; } } /* -------------------------------------------------------------------------- Console content scale. The page content read as oversized (huge readouts, tall cards, a wide gap above each page title). `zoom` shrinks the whole content column uniformly — type, cards, spacing and padding together — without touching the topbar or sidebar chrome, and without the viewport-height quirks that hit `zoom` on an h-screen element. Tune this one number to taste. Modals and toasts render in body-level roots, so they are unaffected. -------------------------------------------------------------------------- */ .tz-console-page { zoom: 0.9; } .tz-topbar__brand-slot { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } @media (min-width: 768px) { .tz-topbar__brand-slot { display: none; } } .tz-topbar__title { display: none; /* Matches the TezzInc logotype face so the bar reads as one lockup: script mark on the left, script page name beside it. */ font-family: 'Kaushan Script', 'Public Sans', cursive; font-size: 19px; font-weight: 400; letter-spacing: 0.005em; color: rgb(var(--color-on-surface)); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } @media (min-width: 768px) { .tz-topbar__title { display: inline-flex; align-items: center; } } .tz-topbar__spacer { flex: 1 1 auto; min-width: 0; } .tz-topbar__cluster { display: flex; align-items: center; gap: 0.375rem; margin-left: auto; flex-shrink: 0; } @media (min-width: 768px) { .tz-topbar__cluster { gap: 0.5rem; } } .tz-topbar__divider { width: 1px; height: 22px; background: rgb(var(--color-glass-border) / calc(var(--color-glass-border-opacity) + 0.06)); margin: 0 0.25rem; flex-shrink: 0; } /* --------------------------------------------------------------------------- Wallet chip --------------------------------------------------------------------------- A pill rendered in the topbar cluster that shows the current wallet balance. Hidden by default (the boot script unhides it once it knows there is a session and a balance to show). It is an anchor so that click-to-top-up lands on the usage page where the rest of the wallet controls live; we deliberately do not open Razorpay straight from here, because the user is one click away from the topup form and the direct-launch path skipped the amount selector in a previous draft. The chip uses the same satin material as the icon buttons so it sits flush in the cluster without competing with the avatar. */ .tz-wallet-chip { display: inline-flex; align-items: center; gap: 0.4rem; height: 30px; padding: 0 0.7rem 0 0.6rem; border-radius: var(--lum-radius-pill); background: linear-gradient(180deg, var(--lum-satin-from) 0%, var(--lum-satin-to) 100%); border: 1px solid var(--lum-satin-border); box-shadow: var(--lum-satin-shadow); color: rgb(var(--color-on-surface)); text-decoration: none; font-size: 11.5px; line-height: 1; cursor: pointer; transition: background var(--lum-dur-fast) var(--lum-ease), color var(--lum-dur-fast) var(--lum-ease); white-space: nowrap; } .tz-wallet-chip:hover { background: rgb(var(--color-on-surface) / 0.05); color: rgb(var(--color-on-surface)); } .tz-wallet-chip:focus-visible { outline: 2px solid rgb(var(--color-primary) / 0.5); outline-offset: 1px; } .tz-wallet-chip__glyph { display: inline-flex; align-items: center; justify-content: center; color: rgb(var(--color-primary)); flex-shrink: 0; } .tz-wallet-chip__label { font-weight: 500; color: rgb(var(--color-on-surface-variant)); } .tz-wallet-chip__value { font-variant-numeric: tabular-nums; font-weight: 600; color: rgb(var(--color-on-surface)); } .tz-wallet-chip[data-low="1"] .tz-wallet-chip__value { color: rgb(var(--color-warning)); } .tz-wallet-chip[data-empty="1"] { opacity: 0.85; } .tz-wallet-chip[data-loading="1"] .tz-wallet-chip__value { color: rgb(var(--color-on-surface-variant)); font-weight: 500; } @media (max-width: 640px) { .tz-wallet-chip__label { display: none; } } /* Project switcher (already styled via .tz-project-switcher) — small height adjustment to match the icon-button rhythm of the cluster. */ .tz-project-switcher { height: 30px; padding: 0 0.5rem 0 0.8rem; font-size: 12.5px; } /* ============================================================================ Logotype — the brand lockup. A single component (.tz-logotype) renders both the mark and the wordmark on a shared optical baseline. The lockup is size-driven: pass a size via the inline custom property --tz-logo-size and the mark and wordmark scale together while preserving their relative weight. Default size is 22px (sidebar). Mobile header and the public surface use the size attribute to render larger or smaller variants. The mark is a video frame holding three ascending signal bars — a visible frame around the data that's flowing through it, like an oscilloscope on an encode pipeline. It reads as video infrastructure, not a generic glyph. No gradient text; emphasis comes from weight, scale, and the mark itself. ========================================================================== */ .tz-logotype { display: inline-flex; align-items: flex-end; /* frame's bottom edge ↔ wordmark's baseline */ gap: calc(var(--tz-logo-size, 22px) * 0.36); font-family: 'Public Sans', system-ui, sans-serif; color: rgb(var(--color-on-surface)); text-decoration: none; user-select: none; -webkit-user-select: none; line-height: 0; } .tz-logotype:hover { opacity: 0.82; } .tz-logotype:focus-visible { outline: 2px solid var(--lum-focus-ring); outline-offset: 4px; border-radius: 0.25rem; } .tz-logotype__mark { /* Slight overshoot above the wordmark so the frame's cap-line clears the ascender of letters like 't'. The frame's bottom edge is the baseline. */ width: calc(var(--tz-logo-size, 22px) * 1.20); height: calc(var(--tz-logo-size, 22px) * 1.20); flex-shrink: 0; display: block; } .tz-logotype__mark svg { width: 100%; height: 100%; display: block; } .tz-logotype__word { /* Script logotype, matching the owner's supplied "TezzInc" reference: a connected brush script rather than the geometric sans used for UI text. Kaushan Script is loaded for this element ONLY — nothing else in the product uses it, so the personality stays in the mark and never leaks into interface copy. Script faces sit optically small at a given px size and carry a long descender, so the size multiplier is larger than a sans would need and the baseline is nudged to keep the lockup aligned with the frame mark. */ font-family: 'Kaushan Script', 'Public Sans', cursive; font-size: calc(var(--tz-logo-size, 22px) * 1.05); font-weight: 400; letter-spacing: 0.005em; line-height: 1; padding-right: 0.06em; /* room for the terminal flourish */ transform: translateY(0.06em); color: rgb(var(--color-on-surface)); } /* ============================================================================ Satin — the shared button material. Every interactive surface in the console wears the satin finish. The finish is one material with three calibrated weights: secondary — the default. Soft white-to-cool-grey gradient, hairline inner highlight, dark-ink label. The recessive action surface; recedes into the page. primary — the dominant action. Deep ink-to-near-black gradient (light theme) or light-to-cool-grey gradient (dark theme), hairline inner highlight, inverted label. The high-contrast action that draws the eye. ghost — no fill. Transparent background, no border, secondary text. Hover lifts a faint surface tint. Variants share the same base styles (radius, padding, transition, focus ring). The label colour rides --color-on-surface so it stays verified against its own background in every state. The button system is exposed twice for backwards compatibility — the .tz-satin / .tz-satin--* vocabulary and the legacy .tz-btn / .tz-btn--* vocabulary — but they resolve to the same cascade. ========================================================================== */ .tz-satin, .tz-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--lum-radius-pill); background: linear-gradient(180deg, var(--lum-satin-from) 0%, var(--lum-satin-to) 100%); border: 1px solid var(--lum-satin-border); box-shadow: var(--lum-satin-shadow); color: rgb(var(--color-on-surface)); font-family: 'Public Sans', system-ui, sans-serif; font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: -0.005em; padding: 0.625rem 1.125rem; cursor: pointer; user-select: none; text-decoration: none; transition: transform var(--lum-dur-fast) var(--lum-ease), box-shadow var(--lum-dur-fast) var(--lum-ease), background var(--lum-dur-fast) var(--lum-ease), border-color var(--lum-dur-fast) var(--lum-ease), color var(--lum-dur-fast) var(--lum-ease); -webkit-user-select: none; } .tz-satin:hover, .tz-btn:hover { box-shadow: var(--lum-satin-shadow-hover); transform: translateY(-1px); } .tz-satin:active, .tz-btn:active { box-shadow: var(--lum-satin-shadow-pressed); transform: translateY(0); } .tz-satin:focus-visible, .tz-btn:focus-visible { outline: 2px solid var(--lum-focus-ring); outline-offset: 2px; } /* --- primary: the dominant action surface -------------------------------- Same satin finish as secondary, inverted in lightness. Applied to both .tz-satin--primary and .tz-btn--primary, plus bare button[type="submit"] so any unclassed submit button still gets the right finish. */ .tz-satin--primary, .tz-btn--primary, button[type="submit"] { background: linear-gradient(180deg, var(--lum-primary-satin-from) 0%, var(--lum-primary-satin-to) 100%); border-color: var(--lum-primary-satin-border); box-shadow: var(--lum-primary-satin-shadow); /* The label colour rides --color-on-primary, the inverse of the primary ink in the current theme. Verified: Luminous: #ffffff on #0f0f11 mid-stop ≈ 17:1 Midnight: #0a0a0b on #cdcdd2 mid-stop ≈ 13:1 */ color: var(--lum-primary-satin-label); font-weight: 600; letter-spacing: -0.01em; } .tz-satin--primary:hover, .tz-btn--primary:hover, button[type="submit"]:hover { box-shadow: var(--lum-primary-satin-shadow-hover); transform: translateY(-1px); } .tz-satin--primary:active, .tz-btn--primary:active, button[type="submit"]:active { box-shadow: var(--lum-primary-satin-shadow-pressed); transform: translateY(0); } /* --- secondary: explicit alias. Same finish as the default .tz-satin but declared so markup can be unambiguous. */ .tz-satin--secondary, .tz-btn--secondary { /* inherits the default .tz-satin / .tz-btn rules */ } /* --- ghost: no fill, transparent border, secondary text. The faint hover tint uses --color-on-surface at 4% so it reads on both themes. */ .tz-satin--ghost, .tz-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: rgb(var(--color-on-surface-variant)); font-weight: 500; } .tz-satin--ghost:hover, .tz-btn--ghost:hover { background: rgb(var(--color-on-surface) / 0.05); color: rgb(var(--color-on-surface)); box-shadow: none; transform: none; } .tz-satin--ghost:focus-visible, .tz-btn--ghost:focus-visible { outline: 2px solid var(--lum-focus-ring); outline-offset: 2px; } /* --- danger: secondary satin but with the error token for label and border so a destructive action reads as such on hover/active without leaving the satin vocabulary. */ .tz-satin--danger, .tz-btn--danger { color: rgb(var(--color-error)); border-color: rgb(var(--color-error) / 0.30); } .tz-satin--danger:hover, .tz-btn--danger:hover { background: rgb(var(--color-error) / 0.08); border-color: rgb(var(--color-error) / 0.45); box-shadow: 0 2px 8px rgb(var(--color-error) / 0.18), inset 0 1px 0 rgb(var(--color-on-surface) / 0.06); } /* --- sizes: shared across both vocabularies */ .tz-satin--sm, .tz-btn--sm { padding: 0.4rem 0.875rem; font-size: 13px; } .tz-satin--lg, .tz-btn--lg { padding: 0.85rem 1.5rem; font-size: 15px; } /* ============================================================================ Pill-link — a smaller text-link variant for nav and inline references. ========================================================================== */ .tz-pill-link { display: inline-flex; align-items: center; padding: 0.5rem 0.875rem; border-radius: var(--lum-radius-pill); color: rgb(var(--color-on-surface-variant)); font-weight: 500; font-size: 14px; transition: background var(--lum-dur-fast) var(--lum-ease), color var(--lum-dur-fast) var(--lum-ease); } .tz-pill-link:hover { background: rgb(var(--color-on-surface) / 0.04); color: rgb(var(--color-on-surface)); opacity: 1; } .tz-pill-link:focus-visible { outline: 2px solid rgb(var(--color-primary) / 0.5); outline-offset: 2px; opacity: 1; } /* ============================================================================ Icon button — circular for the chrome. ========================================================================== */ .tz-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--lum-radius-pill); /* Same satin material as every other control. These were transparent, which is why the header icons read as flat next to the project switcher. */ background: linear-gradient(180deg, var(--lum-satin-from) 0%, var(--lum-satin-to) 100%); border: 1px solid var(--lum-satin-border); box-shadow: var(--lum-satin-shadow); color: rgb(var(--color-on-surface-variant)); cursor: pointer; transition: background var(--lum-dur-fast) var(--lum-ease), color var(--lum-dur-fast) var(--lum-ease); } .tz-icon-btn:hover { background: rgb(var(--color-on-surface) / 0.05); color: rgb(var(--color-on-surface)); } .tz-icon-btn:focus-visible { outline: 2px solid rgb(var(--color-primary) / 0.5); outline-offset: 1px; } .tz-icon-btn .material-symbols-outlined { font-size: 18px; } .tz-avatar-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--lum-radius-pill); background: linear-gradient(180deg, var(--lum-satin-from) 0%, var(--lum-satin-to) 100%); border: 1px solid rgb(var(--color-glass-border) / calc(var(--color-glass-border-opacity) + 0.04)); color: rgb(var(--color-on-surface-variant)); cursor: pointer; box-shadow: var(--lum-elev-1); transition: background var(--lum-dur-fast) var(--lum-ease), color var(--lum-dur-fast) var(--lum-ease); } .tz-avatar-btn:hover { color: rgb(var(--color-on-surface)); } /* ============================================================================ Sidebar nav — pill-shaped items, active = filled primary pill. ========================================================================== */ .tz-nav-item { display: flex; align-items: center; gap: 0.625rem; /* Compact rows so the full nav fits without scrolling on normal laptop heights — the list is ~16 links plus group labels. */ padding: 0.34rem 0.7rem; border-radius: var(--lum-radius-pill); color: rgb(var(--color-on-surface-variant)); font-family: 'Public Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; transition: background var(--lum-dur-fast) var(--lum-ease), color var(--lum-dur-fast) var(--lum-ease); text-decoration: none; } .tz-nav-item:hover { background: rgb(var(--color-on-surface) / 0.04); color: rgb(var(--color-on-surface)); opacity: 1; } .sidebar-link { position: relative; } .sidebar-link.active { background: linear-gradient(180deg, var(--lum-primary-satin-from) 0%, var(--lum-primary-satin-to) 100%); /* Same label token as the satin buttons. This previously used --color-on-primary, which is WHITE in the light theme — a leftover from when primary was near-black — so the active item read as white-on-light and was effectively invisible. */ color: var(--lum-primary-satin-label); font-weight: 600; box-shadow: var(--lum-primary-satin-shadow); } .sidebar-link.active:hover { opacity: 1; } /* ============================================================================ Status chip — pill + coloured dot. Lives in the topbar (env) and inside lists (per-row status). ========================================================================== */ .tz-status-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem; border-radius: var(--lum-radius-pill); background: rgb(var(--color-on-surface) / 0.04); color: rgb(var(--color-on-surface-variant)); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; border: 1px solid rgb(var(--color-glass-border) / var(--color-glass-border-opacity)); } /* ============================================================================ Project switcher — the tenant's project picker in the header. Pill shape, gloss top highlight, hairline border; expands a menu of projects. Active item is signified by a tinted background, not a check, so the active row's full label stays readable. ========================================================================== */ .tz-project-switcher { display: inline-flex; align-items: center; gap: 0.5rem; height: 30px; max-width: 240px; padding: 0 0.5rem 0 0.8rem; border-radius: var(--lum-radius-pill); background: linear-gradient(180deg, var(--lum-satin-from) 0%, var(--lum-satin-to) 100%); border: 1px solid var(--lum-satin-border); box-shadow: var(--lum-satin-shadow); color: rgb(var(--color-on-surface)); font-family: 'Public Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; transition: transform var(--lum-dur-fast) var(--lum-ease), box-shadow var(--lum-dur-fast) var(--lum-ease), background var(--lum-dur-fast) var(--lum-ease); -webkit-user-select: none; user-select: none; } .tz-project-switcher:hover { box-shadow: var(--lum-satin-shadow-hover); transform: translateY(-1px); } .tz-project-switcher[aria-expanded="true"] { transform: translateY(0); } .tz-project-switcher__caret { transition: transform var(--lum-dur-fast) var(--lum-ease); } .tz-project-switcher[aria-expanded="true"] .tz-project-switcher__caret { transform: rotate(180deg); } .tz-project-menu { position: fixed; z-index: 71; min-width: 260px; max-width: 320px; display: flex; flex-direction: column; padding: 8px; background: rgb(var(--color-glass) / calc(var(--color-glass-opacity) + 0.08)); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgb(var(--color-glass-border) / var(--color-glass-border-opacity)); border-radius: 1rem; box-shadow: var(--lum-elev-floating); } .tz-project-menu__head { padding: 8px 10px 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgb(var(--color-glass-border) / var(--color-glass-border-opacity)); margin-bottom: 6px; } .tz-project-menu__empty { padding: 14px; font-family: 'Public Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.45; color: rgb(var(--color-on-surface-variant)); } .tz-project-menu__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 0.625rem; background: transparent; border: 0; text-align: left; font-family: 'Public Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; color: rgb(var(--color-on-surface)); cursor: pointer; width: 100%; transition: background var(--lum-dur-fast) var(--lum-ease); } .tz-project-menu__item:hover { background: rgb(var(--color-on-surface) / 0.05); } .tz-project-menu__item[aria-current="true"] { background: rgb(var(--color-on-surface) / 0.06); } .tz-project-menu__slug { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: rgb(var(--color-on-surface-variant)); margin-top: 2px; } .tz-project-menu__new { margin-top: 4px; padding: 8px 10px; border-top: 1px solid rgb(var(--color-glass-border) / var(--color-glass-border-opacity)); } .tz-pulse-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--color-success)); box-shadow: 0 0 0 0 rgb(var(--color-success) / 0.4); animation: lum-pulse 2.4s var(--lum-ease-in-out) infinite; } .tz-pulse-dot[data-state="warn"] { background: rgb(var(--color-warning)); } .tz-pulse-dot[data-state="alert"] { background: rgb(var(--color-error)); } .tz-pulse-dot[data-state="processing"] { background: rgb(var(--color-processing)); } .tz-pulse-dot[data-state="off"] { background: rgb(var(--color-on-surface-ghost)); box-shadow: none; animation: none; } @keyframes lum-pulse { 0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgb(var(--color-success) / 0.4); } 50% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 0 4px rgb(var(--color-success) / 0); } } /* ============================================================================ Cards / panels — glass surface with hairline border, 1rem radius. .tz-panel re-uses the same primitives as .tz-card. ========================================================================== */ .tz-card, .tz-panel { background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-glass-border) / calc(var(--color-glass-border-opacity) + 0.04)); border-radius: var(--lum-radius); box-shadow: var(--lum-elev-2); padding: 1.25rem 1.5rem; position: relative; transition: box-shadow var(--lum-dur) var(--lum-ease); } .tz-card--floating { box-shadow: var(--lum-elev-floating); } .tz-card--glass { background: rgb(var(--color-glass) / var(--color-glass-opacity)); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgb(var(--color-glass-border) / calc(var(--color-glass-border-opacity) + 0.04)); } .tz-card--well { background: rgb(var(--color-surface-low)); box-shadow: inset 0 1px 0 rgb(var(--color-glass-border) / calc(var(--color-glass-border-opacity) + 0.02)); } .tz-card__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: -0.25rem 0 1rem -0.25rem; padding: 0 0.25rem 0.875rem 0.25rem; border-bottom: 1px solid rgb(var(--color-glass-border) / var(--color-glass-border-opacity)); } .tz-card__title { font-family: 'Public Sans', system-ui, sans-serif; font-weight: 600; font-size: 16px; letter-spacing: -0.015em; color: rgb(var(--color-on-surface)); margin: 0; } .tz-card__kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-weight: 500; color: rgb(var(--color-on-surface-variant)); } /* ============================================================================ Well — recessed input surface. Used for code blocks, log panels, and the pill-shaped search bar. The Luminous spec calls for this darker recessed look as a contrast against glass panels. ========================================================================== */ .tz-well { background: rgb(var(--color-surface-low)); border: 1px solid rgb(var(--color-glass-border) / calc(var(--color-glass-border-opacity) + 0.04)); border-radius: var(--lum-radius); box-shadow: inset 0 1px 0 rgb(var(--color-glass-border) / 0.04); } /* ============================================================================ Forms — pill-shaped inputs, pill-shaped submit. ========================================================================== */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], textarea, select { background: rgb(var(--color-surface-low)); border: 1px solid rgb(var(--color-glass-border) / calc(var(--color-glass-border-opacity) + 0.06)); color: rgb(var(--color-on-surface)); font-family: 'Public Sans', system-ui, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; padding: 0.625rem 1rem; border-radius: var(--lum-radius-pill); caret-color: rgb(var(--color-primary)); transition: border-color var(--lum-dur-fast) var(--lum-ease), box-shadow var(--lum-dur-fast) var(--lum-ease), background var(--lum-dur-fast) var(--lum-ease); width: 100%; } textarea { border-radius: 1rem; min-height: 96px; resize: vertical; } input:focus, textarea:focus, select:focus { outline: none; border-color: rgb(var(--color-primary) / 0.5); box-shadow: 0 0 0 4px rgb(var(--color-primary) / 0.12); background: rgb(var(--color-surface)); } input::placeholder, textarea::placeholder { color: rgb(var(--color-on-surface-ghost)); } select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.875rem center; padding-right: 2.25rem; cursor: pointer; } /* ============================================================================ Disabled — honest rules. Same visual treatment for [disabled] and [aria-disabled="true"]. Applies to every button vocabulary: bare