/* ============================================================================ GLASS v2 — Apple/iOS macOS-inspired refinement layer ---------------------------------------------------------------------------- Loads LAST in the cascade. Sits on top of the base stylesheet + per-page palettes. Opt-in via `` so we can disable per-page. Design philosophy: - ONE primary surface per region. Inner sections become hairline panels, not nested cards. - Monochrome neutral base. Color is reserved for the SINGLE active state (one accent + 4 semantic states: ok / info / warn / error). - Glass continuity: navbar surface flows into sidebar without a seam. - Apple-grade typography: SF Pro stack, fluid clamp scale, tabular numerals on every numeric column. - Density tier (cozy / compact / spacious) controlled by body class. - Motion: GPU-only (transform + opacity), gated by perf-tier + reduced-motion. - Light/dark parity: `[data-bs-theme]` selector ONLY (never `body.light-mode`). - Translation-safe: every typographic claim uses fluid sizes that survive +30% EN→DE/FR expansion without breaking the line. ============================================================================ */ /* ─── 0. Design tokens — single source of truth ──────────────────────────── */ body.glass-v2 { /* Apple-style neutral scale (true OLED black at bottom) */ --g-bg: #06080d; --g-surface: rgba(255, 255, 255, 0.040); --g-surface-2: rgba(255, 255, 255, 0.064); --g-surface-3: rgba(255, 255, 255, 0.085); --g-hover: rgba(255, 255, 255, 0.060); /* Hairlines (Apple uses ~4-8% white) */ --g-border: rgba(255, 255, 255, 0.075); --g-border-em: rgba(255, 255, 255, 0.135); --g-hairline: rgba(255, 255, 255, 0.055); /* Text */ --g-text: #f5f7fa; --g-text-2: #a0a8b3; --g-text-3: #6b727e; /* Single brand accent (CTA only) */ --g-accent: #ff7a1a; --g-accent-h: #ff8e3b; --g-accent-bg: rgba(255, 122, 26, 0.10); --g-accent-br: rgba(255, 122, 26, 0.28); /* 4 semantic states (status pills + banners only) */ --g-ok: #22c55e; --g-info: #3b82f6; --g-warn: #f59e0b; --g-error: #ef4444; /* Type scale (fluid, Apple proportions) */ --g-fs-xs: clamp(11px, 0.72rem + 0.05vw, 12px); --g-fs-sm: clamp(12px, 0.80rem + 0.05vw, 13px); --g-fs-md: clamp(13px, 0.88rem + 0.05vw, 14px); --g-fs-lg: clamp(15px, 1.00rem + 0.10vw, 17px); --g-fs-xl: clamp(18px, 1.15rem + 0.20vw, 22px); --g-fs-2xl: clamp(22px, 1.40rem + 0.40vw, 32px); --g-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter var', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif; --g-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace; /* Spacing scale (8pt grid like macOS) */ --g-sp-1: 4px; --g-sp-2: 8px; --g-sp-3: 12px; --g-sp-4: 16px; --g-sp-5: 20px; --g-sp-6: 24px; --g-sp-8: 32px; --g-sp-10: 40px; /* Radius (Apple uses 8/10/16/22 for cards) */ --g-r-sm: 6px; --g-r-md: 10px; --g-r-lg: 14px; --g-r-xl: 18px; /* Motion */ --g-dur: 180ms; --g-ease: cubic-bezier(0.32, 0.72, 0, 1); /* Apple's "spring" */ } /* Light mode swap — Apple Sequoia paper-tint */ [data-bs-theme="light"] body.glass-v2, body.glass-v2[data-bs-theme="light"] { --g-bg: #f5f5f7; --g-surface: rgba(255, 255, 255, 0.72); --g-surface-2: rgba(255, 255, 255, 0.86); --g-surface-3: rgba(255, 255, 255, 0.96); --g-hover: rgba(15, 23, 42, 0.038); --g-border: rgba(15, 23, 42, 0.075); --g-border-em: rgba(15, 23, 42, 0.135); --g-hairline: rgba(15, 23, 42, 0.060); --g-text: #1d1d1f; --g-text-2: #515156; --g-text-3: #86868b; --g-accent: #d35400; --g-accent-h: #b54600; --g-accent-bg: rgba(211, 84, 0, 0.085); --g-accent-br: rgba(211, 84, 0, 0.28); --g-ok: #16a34a; --g-info: #2563eb; --g-warn: #c2780b; --g-error: #dc2626; } /* Body-level typography + bg */ body.glass-v2 { font-family: var(--g-sans); font-feature-settings: 'cv11', 'ss01', 'ss03'; /* SF Pro alt-letters */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; background: var(--g-bg); color: var(--g-text); } /* ─── 1. Glass continuity — navbar + sidebar flow as one surface ─────────── */ /* Unify navbar + sidebar to the SAME glass base so the join at y=72px reads as a single panel divided by a hairline. Replaces the rgba(15,23,42,0.88) vs --ts-glass-bg mismatch that produced the visible seam. */ body.glass-v2 .ts-header { /* HOTFIX 2026-05-21 — preserve sticky behaviour explicitly. Heavy backdrop-filter + custom z-index can create stacking contexts that break position:sticky when combined with the body's gradient layer. Re-declare sticky with !important so no downstream rule (perf-saver, parallax) can disable it. */ position: sticky !important; top: 0 !important; z-index: 1050 !important; --ts-glass-bg: rgba(10, 13, 20, 0.85); background: var(--ts-glass-bg); border-bottom: 1px solid var(--g-hairline); box-shadow: none; /* Lighter blur — saturate(180%) was creating a render-cost spike on iOS and could fail to composite, exposing the page behind. */ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } body.glass-v2 .ts-sidebar { background: rgba(10, 13, 20, 0.78); border-right: 1px solid var(--g-hairline); backdrop-filter: saturate(180%) blur(28px); -webkit-backdrop-filter: saturate(180%) blur(28px); } [data-bs-theme="light"] body.glass-v2 .ts-header, body.glass-v2[data-bs-theme="light"] .ts-header, [data-bs-theme="light"] body.glass-v2 .ts-sidebar, body.glass-v2[data-bs-theme="light"] .ts-sidebar { --ts-glass-bg: rgba(245, 245, 247, 0.82); background: rgba(245, 245, 247, 0.82); } /* The join itself: a 1px hairline that visually unifies, not a hard border */ body.glass-v2 .ts-header, body.glass-v2 .ts-sidebar { position: relative; } /* ─── 2. Master page background — soft gradient instead of flat color ────── */ body.glass-v2 { /* HOTFIX 2026-05-21 — `background-attachment: fixed` was breaking position:sticky on .ts-header in some Chromium versions because the fixed-bg creates a new stacking context on the body. Use scroll- attachment which still looks similar but doesn't fight sticky. */ background: radial-gradient(1200px 600px at 15% -10%, rgba(255, 122, 26, 0.045), transparent 60%), radial-gradient(900px 500px at 90% 0%, rgba(59, 130, 246, 0.035), transparent 55%), var(--g-bg); background-attachment: scroll; min-height: 100vh; } body.glass-v2[data-perf-tier="saver"], [data-perf-tier="saver"] body.glass-v2 { background: var(--g-bg); /* drop the gradient on saver */ } [data-bs-theme="light"] body.glass-v2, body.glass-v2[data-bs-theme="light"] { background: radial-gradient(1200px 600px at 15% -10%, rgba(255, 122, 26, 0.045), transparent 60%), radial-gradient(900px 500px at 90% 0%, rgba(59, 130, 246, 0.035), transparent 55%), var(--g-bg); background-attachment: fixed; } /* ─── 3. Cards — single Apple surface, hairline dividers replace nesting ─── */ body.glass-v2 .glass-card, body.glass-v2 .ts-card, body.glass-v2 .card { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-r-lg); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 32px -16px rgba(0, 0, 0, 0.32); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); } [data-bs-theme="light"] body.glass-v2 .glass-card, [data-bs-theme="light"] body.glass-v2 .ts-card, [data-bs-theme="light"] body.glass-v2 .card { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.50) inset, 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.10); } /* Inner sections of a card become hairline-divided panels, NOT nested cards. The pattern: outer .glass-card holds .glass-section blocks separated by a 1px dashed hairline. Kills the "Christmas tree" stacked-card-on-card look. */ body.glass-v2 .glass-section { padding: var(--g-sp-5) var(--g-sp-6); border-top: 1px solid var(--g-hairline); background: transparent; } body.glass-v2 .glass-section:first-child { border-top: 0; } body.glass-v2 .glass-section--compact { padding: var(--g-sp-4) var(--g-sp-5); } /* Strip nested-card visual weight: any .card inside a .glass-card becomes flat */ body.glass-v2 .glass-card .glass-card, body.glass-v2 .glass-card .card, body.glass-v2 .ts-card .card { background: transparent; border: 0; border-top: 1px solid var(--g-hairline); border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ─── 4. Typography refinement ────────────────────────────────────────────── */ body.glass-v2 h1, body.glass-v2 .h1 { font-size: var(--g-fs-2xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; } body.glass-v2 h2, body.glass-v2 .h2 { font-size: var(--g-fs-xl); font-weight: 700; letter-spacing: -0.020em; line-height: 1.20; } body.glass-v2 h3, body.glass-v2 .h3 { font-size: var(--g-fs-lg); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; } body.glass-v2 h4, body.glass-v2 .h4 { font-size: var(--g-fs-md); font-weight: 600; letter-spacing: -0.010em; line-height: 1.30; } body.glass-v2 small, body.glass-v2 .small, body.glass-v2 .text-muted { font-size: var(--g-fs-sm); color: var(--g-text-2); } /* Section labels — uppercase mono, Apple System Settings aesthetic */ body.glass-v2 .g-section-label, body.glass-v2 .ts-section-label, body.glass-v2 .sh-section-label { font-family: var(--g-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--g-text-3); margin: 0 0 var(--g-sp-3); display: block; } /* Numbers always tabular — KPIs, money, IDs */ body.glass-v2 .ts-stat__num, body.glass-v2 .num, body.glass-v2 [data-num], body.glass-v2 .credit-pill, body.glass-v2 .billing-amount, body.glass-v2 code, body.glass-v2 kbd, body.glass-v2 samp { font-variant-numeric: tabular-nums; } /* ─── 5. KPI / stat-card row — STRIP the rainbow accent colors ───────────── Was: 5 stat cards, each a different gradient (emerald/amber/violet/orange/ fuchsia). Looks like a children's toy. Now: monochrome surface, single muted icon, big tabular number. The ONE card that's currently "alive" (active filter, alert state) gets the accent — every other card stays neutral. */ body.glass-v2 .stat-card, body.glass-v2 .ts-stat-card, body.glass-v2 [class*="stat-card--"] { background: var(--g-surface); border: 1px solid var(--g-border); border-left-width: 1px; border-left-color: var(--g-border); border-radius: var(--g-r-md); padding: var(--g-sp-4) var(--g-sp-5); color: var(--g-text); box-shadow: none; } body.glass-v2 .stat-card[class*="--emerald"], body.glass-v2 .stat-card[class*="--amber"], body.glass-v2 .stat-card[class*="--violet"], body.glass-v2 .stat-card[class*="--orange"], body.glass-v2 .stat-card[class*="--fuchsia"], body.glass-v2 .stat-card[class*="--cyan"], body.glass-v2 .stat-card[class*="--rose"] { background: var(--g-surface) !important; border-color: var(--g-border) !important; color: var(--g-text) !important; } /* The icon sits at 16-18px, single muted color */ body.glass-v2 .stat-card i, body.glass-v2 .ts-stat-card i, body.glass-v2 [class*="stat-card--"] i { color: var(--g-text-3) !important; font-size: 18px; background: none !important; -webkit-text-fill-color: var(--g-text-3) !important; } /* The number — big, tabular, primary text */ body.glass-v2 .stat-card .ts-stat__num, body.glass-v2 .ts-stat-card .ts-stat__num, body.glass-v2 [class*="stat-card--"] .stat-value, body.glass-v2 [class*="stat-card--"] .ts-stat__num { color: var(--g-text) !important; font-size: var(--g-fs-xl); font-weight: 700; letter-spacing: -0.02em; -webkit-text-fill-color: var(--g-text) !important; background: none !important; } /* Active state — only ONE card gets the accent border */ body.glass-v2 .stat-card.is-active, body.glass-v2 .ts-stat-card.is-active, body.glass-v2 [class*="stat-card--"].is-active { border-left: 3px solid var(--g-accent); background: var(--g-surface-2); } /* ─── 6. Status pills — Apple-style "Liquid" capsule, one color per state ── */ body.glass-v2 .ts-status-pill, body.glass-v2 .status-badge, body.glass-v2 .badge[data-status] { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 100px; font-family: var(--g-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.020em; line-height: 1.5; text-transform: capitalize; background: rgba(255, 255, 255, 0.06); color: var(--g-text-2); border: 1px solid var(--g-border); } [data-bs-theme="light"] body.glass-v2 .ts-status-pill, [data-bs-theme="light"] body.glass-v2 .status-badge, [data-bs-theme="light"] body.glass-v2 .badge[data-status] { background: rgba(15, 23, 42, 0.045); } body.glass-v2 .ts-status-pill[data-status="processing"], body.glass-v2 .badge[data-status="processing"] { background: rgba(59,130,246,0.12); color: var(--g-info); border-color: rgba(59,130,246,0.28); } body.glass-v2 .ts-status-pill[data-status="completed"], body.glass-v2 .ts-status-pill[data-status="paid"], body.glass-v2 .badge[data-status="completed"], body.glass-v2 .badge[data-status="paid"] { background: rgba(34,197,94,0.12); color: var(--g-ok); border-color: rgba(34,197,94,0.28); } body.glass-v2 .ts-status-pill[data-status="pending"], body.glass-v2 .ts-status-pill[data-status="payment_required"], body.glass-v2 .ts-status-pill[data-status="on_hold"], body.glass-v2 .badge[data-status="pending"], body.glass-v2 .badge[data-status="on_hold"] { background: rgba(245,158,11,0.12); color: var(--g-warn); border-color: rgba(245,158,11,0.28); } body.glass-v2 .ts-status-pill[data-status="rejected"], body.glass-v2 .ts-status-pill[data-status="failed"], body.glass-v2 .badge[data-status="rejected"] { background: rgba(239,68,68,0.12); color: var(--g-error); border-color: rgba(239,68,68,0.28); } /* ─── 7. Buttons — Apple Continuity Button (rounded rect + subtle press) ─── */ body.glass-v2 .ts-btn, body.glass-v2 .btn { font-family: var(--g-sans); font-weight: 500; font-size: var(--g-fs-md); letter-spacing: -0.005em; padding: 7px 16px; border-radius: 8px; border: 1px solid var(--g-border-em); background: var(--g-surface-2); color: var(--g-text); transition: background var(--g-dur) var(--g-ease), border-color var(--g-dur) var(--g-ease), transform 80ms var(--g-ease); cursor: pointer; min-height: 32px; } body.glass-v2 .ts-btn:hover, body.glass-v2 .btn:hover { background: var(--g-surface-3); border-color: var(--g-text-3); } body.glass-v2 .ts-btn:active, body.glass-v2 .btn:active { transform: scale(0.985); } body.glass-v2 .ts-btn-primary, body.glass-v2 .btn-primary { background: linear-gradient(180deg, var(--g-accent-h), var(--g-accent)); color: #fff; border-color: rgba(0, 0, 0, 0.18); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 1px 2px rgba(0, 0, 0, 0.18); } body.glass-v2 .ts-btn-primary:hover, body.glass-v2 .btn-primary:hover { background: var(--g-accent); border-color: rgba(0, 0, 0, 0.22); } body.glass-v2 .ts-btn-success, body.glass-v2 .btn-success { background: linear-gradient(180deg, #2bd16d, #1fb45c); color: #fff; border-color: rgba(0, 0, 0, 0.18); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 1px 2px rgba(0, 0, 0, 0.18); } body.glass-v2 .ts-btn-success:hover, body.glass-v2 .btn-success:hover { background: var(--g-ok); } /* Quiet variants — ghost / secondary live alongside primary without competing */ body.glass-v2 .ts-btn-secondary, body.glass-v2 .ts-btn-outline, body.glass-v2 .btn-secondary, body.glass-v2 .btn-outline-secondary { background: transparent; color: var(--g-text); border: 1px solid var(--g-border-em); } body.glass-v2 .ts-btn-secondary:hover, body.glass-v2 .btn-secondary:hover { background: var(--g-hover); } /* Touch targets — iOS HIG mandates 44x44 minimum on phones */ @media (max-width: 991.98px) { body.glass-v2 .ts-btn, body.glass-v2 .btn { min-height: 44px; padding: 10px 18px; } } /* Min 44x44 size requirement applies to icon-only buttons everywhere */ body.glass-v2 .ts-btn-icon, body.glass-v2 .btn-icon, body.glass-v2 button[aria-label]:where(:has(>i):not(:has(>span))) { min-width: 36px; min-height: 36px; } /* ─── 8. Inputs / Forms — Apple Sequoia input style ──────────────────────── */ body.glass-v2 .ts-input, body.glass-v2 .ts-select, body.glass-v2 .ts-textarea, body.glass-v2 .form-control, body.glass-v2 .form-select { background: var(--g-surface); border: 1px solid var(--g-border-em); color: var(--g-text); border-radius: 8px; padding: 8px 12px; font-size: var(--g-fs-md); font-family: var(--g-sans); min-height: 36px; transition: border-color var(--g-dur) var(--g-ease), background var(--g-dur) var(--g-ease), box-shadow var(--g-dur) var(--g-ease); } body.glass-v2 .ts-input:focus, body.glass-v2 .ts-select:focus, body.glass-v2 .ts-textarea:focus, body.glass-v2 .form-control:focus, body.glass-v2 .form-select:focus { border-color: var(--g-accent); box-shadow: 0 0 0 3px var(--g-accent-bg); outline: none; } /* ─── 9. Tables — Apple Numbers minimalism ──────────────────────────────── */ body.glass-v2 .ts-table, body.glass-v2 table.ts-table, body.glass-v2 .table { background: transparent; color: var(--g-text); border-collapse: separate; border-spacing: 0; } body.glass-v2 .ts-table th, body.glass-v2 .table th { background: transparent; color: var(--g-text-3); font-family: var(--g-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; border-bottom: 1px solid var(--g-hairline); padding: 12px 16px; } body.glass-v2 .ts-table td, body.glass-v2 .table td { color: var(--g-text); border-bottom: 1px solid var(--g-hairline); padding: 14px 16px; } body.glass-v2 .ts-table tbody tr:hover td, body.glass-v2 .table tbody tr:hover td { background: var(--g-hover); } body.glass-v2 .ts-table tbody tr:last-child td, body.glass-v2 .table tbody tr:last-child td { border-bottom: 0; } /* ─── 10. Banners / alerts — softer, one accent color ────────────────────── */ body.glass-v2 .ts-info-banner, body.glass-v2 .alert { background: var(--g-surface); border: 1px solid var(--g-border); border-left: 3px solid var(--g-text-3); border-radius: var(--g-r-md); padding: var(--g-sp-4) var(--g-sp-5); color: var(--g-text); } body.glass-v2 .ts-info-banner.is-success, body.glass-v2 .alert-success { border-left-color: var(--g-ok); background: rgba(34,197,94,0.06); } body.glass-v2 .ts-info-banner.is-info, body.glass-v2 .alert-info, body.glass-v2 .alert-primary { border-left-color: var(--g-info); background: rgba(59,130,246,0.06); } body.glass-v2 .ts-info-banner.is-warning, body.glass-v2 .alert-warning { border-left-color: var(--g-warn); background: rgba(245,158,11,0.06); } body.glass-v2 .ts-info-banner.is-error, body.glass-v2 .ts-info-banner.is-danger, body.glass-v2 .alert-danger { border-left-color: var(--g-error); background: rgba(239,68,68,0.06); } /* ─── 11. Hero / page-header — flatten the gradient soup ────────────────── The request-hero, master-dashboard-hero, settings-hero all currently use colored linear-gradients that compete with everything below. Replace with a subtle surface tint + the single accent only on the H1 underline. */ body.glass-v2 .ts-page-hero, body.glass-v2 .request-hero, body.glass-v2 .master-dashboard-hero, body.glass-v2 .settings-hero { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-r-lg); padding: var(--g-sp-6) var(--g-sp-8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px -16px rgba(0, 0, 0, 0.32); } body.glass-v2 .ts-page-hero::before, body.glass-v2 .ts-page-hero::after, body.glass-v2 .request-hero::before, body.glass-v2 .request-hero::after { display: none !important; } /* ─── 12. Workflow stepper — sticky, single capsule with 4 dots ─────────── */ body.glass-v2 .ts-stepper, body.glass-v2 .workflow-stepper { position: sticky; top: calc(var(--ts-header-height, 72px) + 8px); z-index: 5; background: var(--g-surface-2); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); border: 1px solid var(--g-border); border-radius: 100px; padding: 8px 16px; margin-bottom: var(--g-sp-5); } body.glass-v2 .ts-stepper-step, body.glass-v2 .workflow-stepper .step { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 100px; font-size: var(--g-fs-sm); color: var(--g-text-3); } body.glass-v2 .ts-stepper-step.is-current, body.glass-v2 .workflow-stepper .step.active { background: var(--g-accent-bg); color: var(--g-accent); font-weight: 600; } body.glass-v2 .ts-stepper-step.is-done, body.glass-v2 .workflow-stepper .step.completed { color: var(--g-ok); } /* ─── 13. Density tiers (cozy / compact / spacious) ─────────────────────── */ body.glass-v2[data-density="compact"] .glass-section { padding: var(--g-sp-3) var(--g-sp-4); } body.glass-v2[data-density="compact"] .ts-table td, body.glass-v2[data-density="compact"] .table td { padding: 10px 14px; } body.glass-v2[data-density="spacious"] .glass-section { padding: var(--g-sp-6) var(--g-sp-8); } body.glass-v2[data-density="spacious"] .ts-table td, body.glass-v2[data-density="spacious"] .table td { padding: 18px 20px; } /* ─── 14. Motion — gated by perf-tier + reduced-motion ──────────────────── */ body.glass-v2 .ts-card, body.glass-v2 .glass-card, body.glass-v2 .ts-btn, body.glass-v2 .btn, body.glass-v2 .ts-input, body.glass-v2 .ts-status-pill { transition-property: background, border-color, color, transform, box-shadow; transition-duration: var(--g-dur); transition-timing-function: var(--g-ease); } @media (prefers-reduced-motion: reduce) { body.glass-v2 *, body.glass-v2 *::before, body.glass-v2 *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body.glass-v2[data-perf-tier="saver"] .glass-card, body.glass-v2[data-perf-tier="saver"] .ts-card, body.glass-v2[data-perf-tier="saver"] .ts-header, body.glass-v2[data-perf-tier="saver"] .ts-sidebar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--g-bg) !important; } body.glass-v2[data-perf-tier="saver"] .ts-header { background: rgba(10, 13, 20, 0.97) !important; } /* ─── 15. Focus rings (WCAG 2.4.7 + Apple-style ring) ────────────────────── */ body.glass-v2 :focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; border-radius: 6px; } /* ─── 16. Strip aggressive coloured gradients from common hero strips ──── */ body.glass-v2 [style*="linear-gradient"][style*="rgb"] { /* This is a heuristic only; per-element overrides should follow. */ } /* The 5-different-colored stat row that says "Status / Payment / Cost / Priority / Assigned" — neutralize their inline coloured backgrounds when they sit inside a glass-v2 page. */ body.glass-v2 .ts-stat-card[style*="background"], body.glass-v2 .stat-card[style*="background"], body.glass-v2 .ts-stat-row > div[style*="background"] { background: var(--g-surface) !important; border: 1px solid var(--g-border) !important; } /* ─── 17. Sidebar nav items — Apple-style hover (background fill, no border) */ body.glass-v2 .ts-sidebar-nav a, body.glass-v2 .ts-sidebar-nav .nav-link { color: var(--g-text-2); border-radius: 8px; padding: 7px 12px; transition: background var(--g-dur) var(--g-ease), color var(--g-dur) var(--g-ease); } body.glass-v2 .ts-sidebar-nav a:hover, body.glass-v2 .ts-sidebar-nav .nav-link:hover { background: var(--g-hover); color: var(--g-text); } body.glass-v2 .ts-sidebar-nav a.is-active, body.glass-v2 .ts-sidebar-nav .nav-link.active { background: var(--g-accent-bg); color: var(--g-accent); font-weight: 600; } /* ─── 18. Tabs — segmented control (macOS pill style) ────────────────────── */ body.glass-v2 .nav-tabs, body.glass-v2 .ts-tabs { display: inline-flex; background: var(--g-surface-2); border: 1px solid var(--g-border); border-radius: 10px; padding: 3px; gap: 0; } body.glass-v2 .nav-tabs .nav-link, body.glass-v2 .ts-tabs .tab { border: 0; border-radius: 7px; padding: 6px 14px; color: var(--g-text-2); background: transparent; font-weight: 500; font-size: var(--g-fs-sm); } body.glass-v2 .nav-tabs .nav-link.active, body.glass-v2 .ts-tabs .tab.is-active { background: var(--g-surface-3); color: var(--g-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } /* ─── 19. Modals — Apple Sequoia sheet aesthetic ─────────────────────────── */ body.glass-v2 .modal-content { background: var(--g-surface-3); border: 1px solid var(--g-border-em); border-radius: var(--g-r-xl); backdrop-filter: saturate(180%) blur(40px); -webkit-backdrop-filter: saturate(180%) blur(40px); box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.45); } body.glass-v2 .modal-header, body.glass-v2 .modal-footer { border-color: var(--g-hairline); background: transparent; } /* ─── 20. Scrollbar — thin Apple style ───────────────────────────────────── */ body.glass-v2 *::-webkit-scrollbar { width: 8px; height: 8px; } body.glass-v2 *::-webkit-scrollbar-track { background: transparent; } body.glass-v2 *::-webkit-scrollbar-thumb { background: var(--g-border-em); border-radius: 10px; } body.glass-v2 *::-webkit-scrollbar-thumb:hover { background: var(--g-text-3); } /* ─── 21. Safe-area + mobile drawer polish ─────────────────────────────── */ @supports (padding: max(0px)) { body.glass-v2 .ts-header { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); } body.glass-v2 .ts-sidebar { padding-bottom: max(12px, env(safe-area-inset-bottom)); } } /* ─── 22. Hairline divider utility (replaces stacked-card pattern) ──────── */ body.glass-v2 .g-hairline { border: 0; border-top: 1px solid var(--g-hairline); margin: var(--g-sp-5) 0; } /* ─── 23. Tooltip / popover refinement ──────────────────────────────────── */ body.glass-v2 .tooltip-inner, body.glass-v2 .popover-body { background: var(--g-surface-3); color: var(--g-text); border: 1px solid var(--g-border); border-radius: 8px; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); font-size: var(--g-fs-sm); } /* ─── 24. End-of-file safety: a glass-v2 page that's missing a stylesheet should still render visible text. This is the safety floor. */ body.glass-v2 { min-height: 100vh; } /* HOTFIX 2026-05-21 — removed the blanket anchor color override; it was muting legitimate link blue across the whole portal. Per-section rules in the design system already handle anchors that need restyling. */ /* ─── 25b. HOTFIX 2026-05-21 — mobile sidebar glass instead of solid black ── The base CSS (tunersuite.css:3885) forces `.ts-sidebar { background: rgba(12,18,32,0.96) !important; }` on viewports < 768px as the U8 iOS safety net (per CLAUDE.md). When glass-v2 is active that produces a solid almost-black slab on phones that doesn't match the desktop glass. Win against base !important using a more specific selector + !important ourselves, BUT keep enough opacity (0.88) so iOS Safari surviving without backdrop-filter still reads legibly. The @supports fallback bumps further to 0.96 when backdrop-filter is fully unsupported. */ @media (max-width: 767.98px) { body.glass-v2 .ts-sidebar { background: rgba(10, 13, 20, 0.88) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } [data-bs-theme="light"] body.glass-v2 .ts-sidebar, body.glass-v2[data-bs-theme="light"] .ts-sidebar { background: rgba(245, 245, 247, 0.92) !important; } body.glass-v2 .ts-header { background: rgba(10, 13, 20, 0.90) !important; --ts-glass-bg: rgba(10, 13, 20, 0.90) !important; } [data-bs-theme="light"] body.glass-v2 .ts-header, body.glass-v2[data-bs-theme="light"] .ts-header { background: rgba(245, 245, 247, 0.95) !important; --ts-glass-bg: rgba(245, 245, 247, 0.95) !important; } } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { body.glass-v2 .ts-sidebar, body.glass-v2 .ts-header { background: rgba(10, 13, 20, 0.97) !important; } [data-bs-theme="light"] body.glass-v2 .ts-sidebar, [data-bs-theme="light"] body.glass-v2 .ts-header { background: rgba(245, 245, 247, 0.99) !important; } } /* ─── 25. HOTFIX 2026-05-21 — workflow stepper polish + selection guard ─── */ /* The FR-workflow stepper labels were rendering as a single horizontal text run that highlighted as one block on accidental select. Restore selectability on the labels themselves but isolate each step so a click on one label doesn't span-select the rest. */ body.glass-v2 .workflow-stepper, body.glass-v2 .stepper-step, body.glass-v2 .ts-stepper, body.glass-v2 [class*="step-container"] { user-select: none; -webkit-user-select: none; } body.glass-v2 .workflow-stepper .step-label, body.glass-v2 .workflow-stepper .step-name, body.glass-v2 .stepper-step .step-label, body.glass-v2 .ts-stepper .step-label { user-select: text; -webkit-user-select: text; } /* Stepper sticky behaviour off until we ship the redesigned element. The pill-capsule rule in section 12 was overlapping content on narrow viewports; drop it for now. */ body.glass-v2 .ts-stepper, body.glass-v2 .workflow-stepper { position: static !important; } /* end */