/* ============================================================ FLUXATH CRM — Stripe-reskin v2 (BOLD palette + editorial type) Gated entirely under [data-reskin="v2"] — no visible change unless the flag is on. Enable via: localStorage.setItem('fluxath-reskin', 'v2'); location.reload(); OR navigate to any page with ?reskin=v2 (the FOUC pre-paint script in base.html will pin it in localStorage for sticky preview). DESIGN POV: Stripe palette structure (indigo + canvas + navy ink + gradient mesh) BUT with editorial typography — italic serif display headlines (Instrument Serif) over a fresh sans body (Geist), with tabular monospace numerics (Geist Mono). The italic-serif headline is the deliberate FLUXATH twist that lifts this beyond Stripe-clone. Fonts are loaded from Google Fonts via base.html (only when v2 active to avoid the 200ms cold-fetch cost on default render). ============================================================ */ /* ─────────────────────────────────────────────────────────── 1. LIGHT-MODE PALETTE (Stripe canvas + indigo primary) ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] { /* Surfaces */ --bg: #ffffff; /* canvas */ --bg-elev: #f6f9fc; /* canvas-soft (cool off-white feature bands) */ --bg-elev-2: #edf2f7; --bg-hover: #f1f5fb; --bg-active: #e6efff; --card-bg: #ffffff; --topbar-bg: #ffffff; /* Borders (Stripe hairline) */ --border: #e3e8ee; --border-bright: #c8d2dc; /* Ink scale (deep navy — never pure black) */ --ink: #0d253d; /* Stripe ink */ --ink-2: #273951; /* secondary text */ --ink-dim: #64748d; /* mute */ --ink-faint: #94a3b8; /* fine print */ --ink-mute: #b8c2cc; /* Accent + brand — Stripe indigo + cyan kicker */ --brand: #635bff; /* the v2 signature */ --brand-bright: #7a73ff; --brand-soft: rgba(var(--v2-a-rgb), 0.10); --brand-deep: #1c1e54; /* brand-dark-900 */ --accent: #635bff; --accent-bright:#7a73ff; --accent-soft: rgba(var(--v2-a-rgb), 0.10); --accent-line: rgba(var(--v2-a-rgb), 0.24); --accent-hover: #4e46d9; /* v2 gradient pair — drives EVERY gradient (buttons, mesh, bubbles, pucks, focus rings). Picker writes data-accent → blocks below override these two pairs → whole site repaints. */ --v2-a: #635bff; --v2-b: #00d4ff; --v2-a-rgb: 99, 91, 255; --v2-b-rgb: 0, 212, 255; /* Semantic */ --ok: #00875a; /* Stripe green */ --ok-soft: rgba(0, 135, 90, 0.10); --warn: #c1830b; /* warm amber */ --warn-soft: rgba(193, 131, 11, 0.10); --danger: #ea2261; /* Stripe ruby */ --danger-soft: rgba(234, 34, 97, 0.10); --info: #635bff; /* indigo doubles as info */ --info-soft: rgba(var(--v2-a-rgb), 0.10); --pink: #f96bee; /* magenta accent (gradient only) */ --pink-soft: rgba(249, 107, 238, 0.10); /* Sidebar — keep dark on light theme for contrast against indigo CTAs */ --sidebar-bg: #0d253d; --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-brand-sep: rgba(255, 255, 255, 0.10); --sidebar-nav-sep: rgba(255, 255, 255, 0.10); --sidebar-foot-sep: rgba(255, 255, 255, 0.10); --sidebar-label: rgba(255, 255, 255, 0.45); --sidebar-sublabel: rgba(255, 255, 255, 0.30); --sidebar-link: rgba(255, 255, 255, 0.72); --sidebar-link-hover-bg: rgba(255, 255, 255, 0.08); --sidebar-link-active-bg: rgba(var(--v2-a-rgb), 0.20); --sidebar-badge-bg: rgba(255, 255, 255, 0.18); --sidebar-badge-ink: rgba(255, 255, 255, 0.92); --sidebar-user-name: #ffffff; --sidebar-user-org: rgba(255, 255, 255, 0.50); --sidebar-foot-ink: rgba(255, 255, 255, 0.45); --sidebar-foot-who: rgba(255, 255, 255, 0.85); --sidebar-foot-link: rgba(255, 255, 255, 0.48); /* Foreground-on-color */ --ink-on-accent: #ffffff; --ink-on-brand: #ffffff; --toggle-knob-bg: #ffffff; /* v2 gradient utilities (NEW — used by .btn.primary.pill + heroes) */ --gradient-brand: linear-gradient(135deg, var(--v2-a) 0%, var(--v2-b) 100%); --gradient-brand-press: linear-gradient(135deg, #4e46d9 0%, #00b8e0 100%); /* Stripe gradient mesh — for marketing/hero strips (cream → sherbet orange → lavender → indigo → ruby pink) */ --gradient-mesh: radial-gradient(at 8% 28%, #f5e9d4 0px, transparent 50%), radial-gradient(at 30% 12%, #ffd5a3 0px, transparent 45%), radial-gradient(at 55% 22%, #c4b6ff 0px, transparent 45%), radial-gradient(at 78% 12%, var(--v2-a) 0px, transparent 35%), radial-gradient(at 95% 32%, #f96bee 0px, transparent 40%); } /* ─────────────────────────────────────────────────────────── 2. DARK-MODE PALETTE (deep-navy canvas + indigo signal) ─────────────────────────────────────────────────────────── */ [data-reskin="v2"][data-theme="dark"] { --bg: #0a1428; /* deeper than #1c1e54 to set off cards */ --bg-elev: #131e3a; --bg-elev-2: #1c1e54; /* brand-dark-900 — feature bands */ --bg-hover: #182446; --bg-active: #22305a; --card-bg: #131e3a; --topbar-bg: #0a1428; --border: rgba(255, 255, 255, 0.10); --border-bright: rgba(255, 255, 255, 0.20); --ink: #ecf1fb; --ink-2: #c4cdde; --ink-dim: #8b96b3; --ink-faint: #5e6a87; --ink-mute: #3d4866; /* Indigo stays vivid against dark navy */ --brand: #7a73ff; --brand-bright: #9b95ff; --brand-soft: rgba(122, 115, 255, 0.20); --brand-deep: #4434d4; --accent: #7a73ff; --accent-bright:#9b95ff; --accent-soft: rgba(122, 115, 255, 0.20); --accent-line: rgba(122, 115, 255, 0.32); --accent-hover: #635bff; --ok: #4ade80; --ok-soft: rgba(74, 222, 128, 0.14); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.14); --danger: #ff5577; --danger-soft: rgba(255, 85, 119, 0.14); --info: #7a73ff; --info-soft: rgba(122, 115, 255, 0.14); --pink: #f96bee; --pink-soft: rgba(249, 107, 238, 0.14); /* Sidebar stays darkest layer */ --sidebar-bg: #06101f; --sidebar-link-active-bg: rgba(122, 115, 255, 0.24); /* Brighten the v2 gradient on dark backdrops */ --gradient-brand: linear-gradient(135deg, #7a73ff 0%, #2dd4ff 100%); --gradient-brand-press: linear-gradient(135deg, var(--v2-a) 0%, color-mix(in srgb, var(--v2-b) 80%, #000) 100%); } /* ─────────────────────────────────────────────────────────── 3. SIGNATURE TREATMENTS ─────────────────────────────────────────────────────────── */ /* Primary pill CTAs — flip to gradient fill (Stripe-marketing hero feel). Drops the flat .btn.primary background in favor of the indigo→cyan ramp. */ [data-reskin="v2"] .btn.primary.pill, [data-reskin="v2"] .btn.primary { background: var(--gradient-brand); border-color: transparent; color: var(--ink-on-accent); } [data-reskin="v2"] .btn.primary.pill:hover, [data-reskin="v2"] .btn.primary:hover { background: var(--gradient-brand-press); border-color: transparent; color: var(--ink-on-accent); } /* Cards get a subtle indigo top-edge accent on hover (v2 signature lift) */ [data-reskin="v2"] .card:hover, [data-reskin="v2"] .card-feature:hover { border-top: 1px solid transparent; border-image: var(--gradient-brand) 1; border-image-slice: 1; } /* Sidebar active link gets an indigo left-rail accent stripe */ [data-reskin="v2"] .sidebar .nav-link.active { background: var(--sidebar-link-active-bg); border-left: 3px solid var(--accent); padding-left: calc(var(--space-3, 12px) - 3px); } /* Topbar gets a 2px gradient ribbon underneath */ [data-reskin="v2"] .topbar { position: relative; } [data-reskin="v2"] .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gradient-brand); opacity: 0.65; } /* Hero / page-head zones can opt into the Stripe gradient mesh by adding class="hero-mesh" to a wrapper. Per-screen redraws will use this. */ [data-reskin="v2"] .hero-mesh { background: var(--gradient-mesh), var(--bg); background-blend-mode: normal; border-bottom: 1px solid var(--border); } /* Tabular figures by default on every .num cell + table td.num (already applied site-wide via primitives, this just enforces consistency when v2 is active) */ [data-reskin="v2"] .num, [data-reskin="v2"] .tnum, [data-reskin="v2"] .table td.num, [data-reskin="v2"] [data-numeric] { font-feature-settings: "tnum", "ss01"; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tabular, -0.42px); } /* Display headlines lean into Stripe's thin-weight signature in v2 mode */ /* ─────────────────────────────────────────────────────────── 4. EDITORIAL TYPOGRAPHY — the v2 distinguishing voice Pair: Instrument Serif (italic display) + Geist Sans (body) + Geist Mono (numerics). All free via Google Fonts; loaded by base.html with crossorigin preconnect when v2 active. font-feature-settings 'ss01' was already inherited from tokens-stripe.css. Geist + Instrument Serif both render it correctly. ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] { --font-serif: "Instrument Serif", "PP Editorial New", Georgia, serif; --font-sans: "Geist", "Geist Sans", "Söhne", -apple-system, system-ui, sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", monospace; } [data-reskin="v2"] body { font-family: var(--font-sans); } /* Display headlines = italic serif. This is the v2 signature. Page titles, hero headings, modal titles, empty-state H3s — all flip to the italic serif voice. Numerics inside headlines stay sans for legibility (e.g. "12 leads booked today" — "12" stays Geist). */ [data-reskin="v2"] h1, [data-reskin="v2"] .page-head h1, [data-reskin="v2"] .empty-state h3, [data-reskin="v2"] .empty-state .empty-title, [data-reskin="v2"] .modal h2 { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: -0.5px; line-height: 1.05; } [data-reskin="v2"] h1 { font-size: 48px; } [data-reskin="v2"] h2 { font-family: var(--font-sans); font-weight: 300; letter-spacing: var(--tracking-heading-lg, -0.22px); font-size: 24px; } /* Eyebrow labels — all-caps mono with wide tracking */ [data-reskin="v2"] .settings-card h3, [data-reskin="v2"] .nav-label, [data-reskin="v2"] .table th { font-family: var(--font-mono); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; } /* Numerics — every .num / .tnum / td.num / .badge count uses Geist Mono tabular figures. Reps' eyes find counts faster when columns line up. */ [data-reskin="v2"] .num, [data-reskin="v2"] .tnum, [data-reskin="v2"] .table td.num, [data-reskin="v2"] .badge, [data-reskin="v2"] .st-num, [data-reskin="v2"] .count, [data-reskin="v2"] [data-numeric] { font-family: var(--font-mono); font-feature-settings: "tnum", "ss01"; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* Default

,

, , etc. inherit Geist via body. Done. */ /* ─────────────────────────────────────────────────────────── 5. LOGIN PAGE — dramatic asymmetric split Public preview surface (Kevin previews v2 before logging in). 60/40 grid: left = gradient-mesh hero with massive italic-serif wordmark; right = minimal sign-in card. Mobile collapses to stack. ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .login-shell { display: grid; grid-template-columns: 1.4fr 1fr; min-height: 100vh; background: var(--bg); padding: 0; position: relative; overflow: hidden; } /* Left: gradient-mesh hero with massive editorial wordmark. Inject via ::before because login.html doesn't have a hero element. */ [data-reskin="v2"] .login-shell::before { content: "FLUXATH"; display: flex; align-items: center; justify-content: flex-start; padding: 0 64px; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(80px, 14vw, 220px); line-height: 0.92; letter-spacing: -0.04em; color: var(--bg); /* knocked out of the mesh */ background: radial-gradient(at 8% 28%, rgba(245, 233, 212, 0.85) 0px, transparent 50%), radial-gradient(at 30% 12%, rgba(255, 213, 163, 0.75) 0px, transparent 45%), radial-gradient(at 55% 22%, rgba(196, 182, 255, 0.85) 0px, transparent 50%), radial-gradient(at 78% 60%, rgba(var(--v2-a-rgb), 0.95) 0px, transparent 55%), radial-gradient(at 95% 82%, rgba(249, 107, 238, 0.85) 0px, transparent 50%), radial-gradient(at 20% 90%, rgba(var(--v2-b-rgb), 0.55) 0px, transparent 60%), #1c1e54; background-blend-mode: screen, screen, screen, normal, screen, screen, normal; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.10), 0 16px 48px rgba(0, 0, 0, 0.35); mix-blend-mode: normal; } /* Right: form column wrapper — center the existing .login-card inside it. The .login-card itself gets restyled below. */ [data-reskin="v2"] .login-shell .login-card { margin: 0 auto; align-self: center; background: transparent; border: none; box-shadow: none; padding: 56px 64px; max-width: 480px; width: 100%; } /* Form heading wordmark inside the card — replace stacked "FLUXATH" + "Sign in to your workspace" with editorial typography. The literal inline-styled
can't be removed without touching the template, but we CAN re-target it with css-only overrides. */ [data-reskin="v2"] .login-card .brand { font-family: var(--font-serif) !important; font-style: italic; font-weight: 400 !important; font-size: 32px !important; letter-spacing: -0.02em !important; color: var(--ink); margin-bottom: 8px; } [data-reskin="v2"] .login-card .brand span { color: var(--accent) !important; } [data-reskin="v2"] .login-card .sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 36px; } /* Inputs: editorial flat-bottom style (no border-box, just an underline) */ [data-reskin="v2"] .login-card label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); font-weight: 500; } [data-reskin="v2"] .login-card input[type="text"], [data-reskin="v2"] .login-card input[type="password"] { background: transparent; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 12px 0; font-family: var(--font-sans); font-size: 18px; color: var(--ink); transition: border-color 200ms var(--ease-stripe); } [data-reskin="v2"] .login-card input[type="text"]:focus, [data-reskin="v2"] .login-card input[type="password"]:focus { border-color: var(--accent); outline: none; box-shadow: none; } /* Submit: full-width gradient pill with serif italic label */ [data-reskin="v2"] .login-card .btn { margin-top: 28px; padding: 16px 24px !important; font-family: var(--font-serif); font-style: italic; font-size: 18px !important; font-weight: 400 !important; border-radius: var(--rad-pill); background: var(--gradient-brand) !important; color: var(--ink-on-accent) !important; border: none !important; } [data-reskin="v2"] .login-card .footnote { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 40px; color: var(--ink-faint); } /* Mobile: collapse to single column, hide the hero (or shrink it) */ @media (max-width: 900px) { [data-reskin="v2"] .login-shell { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; } [data-reskin="v2"] .login-shell::before { font-size: clamp(60px, 18vw, 120px); padding: 0 32px; } [data-reskin="v2"] .login-shell .login-card { padding: 40px 32px; } } /* ─────────────────────────────────────────────────────────── 6. SIDEBAR v2 — italic-serif wordmark + indigo accent rail The sidebar is the visual anchor of every page. Without v2 sidebar treatment, every screen feels half-finished. ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .sidebar { background: #06101f; /* deeper than --bg, sets off main */ border-right: 1px solid rgba(255, 255, 255, 0.06); position: relative; } /* Indigo→cyan vertical gradient rail down the right edge */ [data-reskin="v2"] .sidebar::before { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 2px; background: linear-gradient(180deg, var(--v2-a) 0%, var(--v2-b) 60%, transparent 100%); opacity: 0.40; pointer-events: none; } /* Brand block — overlay an italic-serif "FLUXATH" inline. The existing markup has .user-avatar + .user-info. Hide the .user-info default text and inject the wordmark above via ::before on the parent. */ [data-reskin="v2"] .sidebar .brand-block { padding: 24px 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: relative; min-height: 88px; } [data-reskin="v2"] .sidebar .brand-block::before { content: "FLUXATH"; display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 32px; letter-spacing: -0.02em; line-height: 1; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; pointer-events: none; } [data-reskin="v2"] .sidebar .brand-block .user-avatar { display: none; /* replaced by the wordmark above */ } [data-reskin="v2"] .sidebar .brand-block .user-info { display: none; /* hide username + org — only FLUXATH wordmark + Claude btn */ } [data-reskin="v2"] .sidebar .brand-block #ai-chat-btn { position: absolute; top: 24px; right: 18px; } /* Section labels — mono caps, more breathing room */ [data-reskin="v2"] .sidebar .nav-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.32); padding: 18px 12px 8px; font-weight: 400; } /* Nav links — accent rail on active, lift on hover */ [data-reskin="v2"] .sidebar .nav-link { position: relative; padding: 8px 12px 8px 16px; margin: 1px 6px; border-radius: var(--rad-sm); color: rgba(255, 255, 255, 0.68); font-size: 13px; transition: color var(--dur-fast) var(--ease-stripe), background var(--dur-fast) var(--ease-stripe); } [data-reskin="v2"] .sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } [data-reskin="v2"] .sidebar .nav-link.active { color: #fff; background: rgba(var(--v2-a-rgb), 0.18); font-weight: 500; } [data-reskin="v2"] .sidebar .nav-link.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--gradient-brand); } [data-reskin="v2"] .sidebar .nav-link .icon { opacity: 0.7; margin-right: 8px; } [data-reskin="v2"] .sidebar .nav-link.active .icon { opacity: 1; } /* Sidebar foot — sign-out as mono link */ [data-reskin="v2"] .sidebar .sidebar-foot { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 14px 18px; } [data-reskin="v2"] .sidebar .sidebar-foot .signout-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.48); background: none; border: none; cursor: pointer; } /* ─────────────────────────────────────────────────────────── 7. PAGE-HEAD HERO-MESH STRIP Every page-head zone gets a hero-mesh atmospheric backdrop behind the h1. Stripe-marketing signature — bare-canvas heroes feel off-brand per the design-md. ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .page-head, [data-reskin="v2"] main > h1:first-child, [data-reskin="v2"] main > h2:first-child, [data-reskin="v2"] .main > h1:first-child, [data-reskin="v2"] .main > h2:first-child { position: relative; padding: 56px 0 36px; margin-bottom: 24px; background: radial-gradient(at 8% 28%, rgba(245, 233, 212, 0.30) 0px, transparent 50%), radial-gradient(at 30% 12%, rgba(255, 213, 163, 0.25) 0px, transparent 45%), radial-gradient(at 55% 22%, rgba(196, 182, 255, 0.30) 0px, transparent 50%), radial-gradient(at 78% 60%, rgba(var(--v2-a-rgb), 0.40) 0px, transparent 55%), radial-gradient(at 95% 82%, rgba(249, 107, 238, 0.25) 0px, transparent 50%), radial-gradient(at 20% 90%, rgba(var(--v2-b-rgb), 0.30) 0px, transparent 60%), transparent; border-bottom: 1px solid var(--border); } [data-reskin="v2"] .page-head h1 { font-size: 64px; margin: 0; padding: 0 24px; position: relative; z-index: 1; } [data-reskin="v2"] .page-head + * { margin-top: 24px; } /* Topbar background goes solid (the page-head mesh handles atmosphere) */ [data-reskin="v2"] .topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--border); } /* ─────────────────────────────────────────────────────────── 8. CARDS v2 — gradient top-edge stripe on hover The cascade-based border-image trick from the scaffold didn't render reliably. Replace with a ::before stripe that animates in. ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .card, [data-reskin="v2"] .card-feature { position: relative; overflow: hidden; border-radius: var(--rad-lg); transition: transform var(--dur-fast) var(--ease-stripe), box-shadow var(--dur-fast) var(--ease-stripe); } [data-reskin="v2"] .card::before, [data-reskin="v2"] .card-feature::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-brand); transform: scaleX(0); transform-origin: left center; transition: transform 350ms var(--ease-stripe); } [data-reskin="v2"] .card:hover::before, [data-reskin="v2"] .card-feature:hover::before { transform: scaleX(1); } [data-reskin="v2"] .card:hover, [data-reskin="v2"] .card-feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft-blue-2); border-color: var(--border-bright); } /* ─────────────────────────────────────────────────────────── 9. STAT TILES — Stripe-Dashboard oversized numerics KPI / stat tiles get HUGE Geist Mono numerals with mono-caps labels below. Reps' eyes find the number first. ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .kpi-card, [data-reskin="v2"] .stat-tile, [data-reskin="v2"] .stat-val { font-family: var(--font-mono); font-feature-settings: "tnum", "ss01"; font-variant-numeric: tabular-nums; } [data-reskin="v2"] .kpi-card .value, [data-reskin="v2"] .kpi-value, [data-reskin="v2"] .stat-num { font-family: var(--font-mono); font-size: 44px; font-weight: 400; letter-spacing: -0.04em; color: var(--ink); line-height: 1; font-feature-settings: "tnum", "ss01"; } [data-reskin="v2"] .kpi-card .label, [data-reskin="v2"] .kpi-label, [data-reskin="v2"] .stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); margin-top: 6px; font-weight: 400; } /* ─────────────────────────────────────────────────────────── 10. TABLES v2 — drop heavy chrome, lean into whitespace ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .table { border: none; } [data-reskin="v2"] .table thead { background: transparent; border-bottom: 1px solid var(--border); } [data-reskin="v2"] .table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 400; color: var(--ink-dim); padding: 14px 12px; } [data-reskin="v2"] .table td { padding: 14px 12px; border-bottom: 1px solid rgba(var(--v2-a-rgb), 0.08); font-family: var(--font-sans); } [data-reskin="v2"] .table td.num, [data-reskin="v2"] .table td .num { font-family: var(--font-mono); font-feature-settings: "tnum", "ss01"; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } [data-reskin="v2"] .table tbody tr:hover { background: rgba(var(--v2-a-rgb), 0.04); } /* ─────────────────────────────────────────────────────────── 11. PIPELINE PANEL (dashboard) — vertical bars get v2 indigo ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .pipeline-panel, [data-reskin="v2"] .funnel-bar, [data-reskin="v2"] .pipe-bar-fill { background: var(--gradient-brand) !important; opacity: 0.85; } /* ─────────────────────────────────────────────────────────── 12. UNIVERSAL h1 HERO MESH Catch every

inside
that wasn't already wrapped in .page-head. Many pages (/ads, /agents, /sequences, /vault, /calendar, /conversations, /scripts, etc.) just have a bare h1. This makes EVERY page-title get the v2 atmospheric treatment. ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] main > h1:first-child, [data-reskin="v2"] .main > h1:first-child, [data-reskin="v2"] main > .ai-page > h1:first-child { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 56px; line-height: 1.0; letter-spacing: -0.025em; padding: 52px 28px 32px; margin: -16px -16px 24px; /* punch through main's padding */ background: radial-gradient(at 8% 28%, rgba(245, 233, 212, 0.22) 0px, transparent 50%), radial-gradient(at 30% 12%, rgba(255, 213, 163, 0.22) 0px, transparent 45%), radial-gradient(at 55% 22%, rgba(196, 182, 255, 0.28) 0px, transparent 50%), radial-gradient(at 78% 60%, rgba(var(--v2-a-rgb), 0.35) 0px, transparent 55%), radial-gradient(at 95% 82%, rgba(249, 107, 238, 0.22) 0px, transparent 50%), radial-gradient(at 20% 90%, rgba(var(--v2-b-rgb), 0.28) 0px, transparent 60%), transparent; border-bottom: 1px solid var(--border); color: var(--ink); } /* ─────────────────────────────────────────────────────────── 13. TOPBAR v2 — editorial search + mono-cap action labels ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--border); height: 60px; padding: 0 20px; } [data-reskin="v2"] .topbar .search input[type="search"], [data-reskin="v2"] .topbar #topbar-search { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--rad-pill); padding: 8px 18px; font-family: var(--font-sans); font-size: 13px; color: var(--ink); transition: border-color var(--dur-fast) var(--ease-stripe); width: 320px; } [data-reskin="v2"] .topbar .search input[type="search"]:focus, [data-reskin="v2"] .topbar #topbar-search:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-line); } [data-reskin="v2"] .topbar .topbar-icon-btn { width: 36px; height: 36px; border-radius: var(--rad-pill); background: transparent; border: 1px solid transparent; color: var(--ink-dim); font-size: 16px; transition: background var(--dur-fast) var(--ease-stripe), color var(--dur-fast) var(--ease-stripe); } [data-reskin="v2"] .topbar .topbar-icon-btn:hover { background: var(--bg-elev); color: var(--ink); } /* Session tracker pills — make numerics big mono, labels mono caps */ [data-reskin="v2"] .session-tracker .st-pill { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--rad-pill); padding: 4px 10px 4px 14px; gap: 6px; } [data-reskin="v2"] .session-tracker .st-num { font-family: var(--font-mono); font-feature-settings: "tnum", "ss01"; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; } [data-reskin="v2"] .session-tracker .st-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); } [data-reskin="v2"] .session-tracker .st-bump { background: var(--gradient-brand); color: var(--ink-on-accent); border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 11px; font-weight: 600; } [data-reskin="v2"] .streak-chip { background: var(--gradient-brand) !important; color: var(--ink-on-accent) !important; border: none !important; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; } /* ─────────────────────────────────────────────────────────── 14. AI CHAT PANEL v2 — italic-serif heading, indigo accent ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] #ai-panel { background: var(--card-bg); border-left: 1px solid var(--border); } [data-reskin="v2"] #ai-panel > div:first-child { background: var(--gradient-brand) !important; } [data-reskin="v2"] .ai-welcome-title { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 24px; letter-spacing: -0.02em; } [data-reskin="v2"] .ai-welcome-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } [data-reskin="v2"] .ai-chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; border-radius: var(--rad-pill); } /* ─────────────────────────────────────────────────────────── 15. MOBILE TAB BAR v2 — bottom rail picks up v2 ─────────────────────────────────────────────────────────── */ /* Mobile tab bar — translucent over manifest-matched color so iOS PWA safe-area zone reads as the same color as the saturated tab bar bg, regardless of whether env(safe-area-inset-bottom) resolves to 34px or the iOS 18 buggy 0px (Kevin hit both states in /debug diagnostics on 2026-05-25). Mirrors the proven v1 pattern at style.css:3411-3429. 88% saturation of #24243a (manifest background_color, dark dark navy) over the v2 dark body (#131e3a) reads slightly purple-tinted at the bottom of the screen — acceptable trade for eliminating both seams (above the tab bar AND below in the safe-area zone). */ [data-reskin="v2"] .mobile-tabbar { background: color-mix(in srgb, #24243a 88%, transparent); border-top: 1px solid var(--border); backdrop-filter: saturate(140%) blur(20px); -webkit-backdrop-filter: saturate(140%) blur(20px); } [data-reskin="v2"] .mtb-tab.active { color: var(--accent); } [data-reskin="v2"] .mtb-tab.active::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--gradient-brand); border-radius: 0 0 2px 2px; } [data-reskin="v2"] .mtb-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase; } /* ─────────────────────────────────────────────────────────── 16. VAULT v2 — split layout w/ italic serif headline /vault has bespoke layout; needs targeted overrides. ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .vault-shell h1, [data-reskin="v2"] .vault-shell h2, [data-reskin="v2"] .vault-list-head, [data-reskin="v2"] .vault-pane-head, [data-reskin="v2"] .vault-item-title-input, [data-reskin="v2"] .vault-title { font-family: var(--font-serif); font-style: italic; font-weight: 400; } [data-reskin="v2"] .vault-pane-head, [data-reskin="v2"] .vault-list-head h2 { font-size: 28px; letter-spacing: -0.02em; } [data-reskin="v2"] .vault-list, [data-reskin="v2"] .vault-sidebar { background: var(--bg-elev); border-right: 1px solid var(--border); } [data-reskin="v2"] .vault-item:hover { background: rgba(var(--v2-a-rgb), 0.05); } [data-reskin="v2"] .vault-item.active { background: rgba(var(--v2-a-rgb), 0.12); border-left: 3px solid var(--accent); } [data-reskin="v2"] .vault-tag-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; } /* ─────────────────────────────────────────────────────────── 17. INBOX (React) — JSX uses class hooks we can target The Phase 12 React inbox renders into #inbox-root w/ classes .lead-row .lead-status-chip .inbox-toolbar etc. Style them. ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .lead-row, [data-reskin="v2"] .lead-card { border-radius: var(--rad-md); border: 1px solid var(--border); transition: background var(--dur-fast) var(--ease-stripe), border-color var(--dur-fast) var(--ease-stripe), transform var(--dur-fast) var(--ease-stripe); } [data-reskin="v2"] .lead-row:hover, [data-reskin="v2"] .lead-card:hover { background: rgba(var(--v2-a-rgb), 0.04); border-color: var(--border-bright); transform: translateY(-1px); } [data-reskin="v2"] .lead-status-chip, [data-reskin="v2"] .inbox-toolbar .chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; } [data-reskin="v2"] .inbox-toolbar { padding: 16px 0; border-bottom: 1px solid var(--border); } /* ─────────────────────────────────────────────────────────── 18. MODALS / DROPDOWNS v2 polish ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .modal h2, [data-reskin="v2"] .modal-title { font-family: var(--font-serif) !important; font-style: italic; font-weight: 400; font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; } [data-reskin="v2"] .modal .sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-dim); } [data-reskin="v2"] .acct-dropdown, [data-reskin="v2"] .notif-panel, [data-reskin="v2"] .recent-leads-panel { border-radius: var(--rad-lg); border: 1px solid var(--border); box-shadow: var(--shadow-soft-blue-3); } [data-reskin="v2"] .acct-header-name { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 18px; letter-spacing: -0.01em; } [data-reskin="v2"] .acct-header-role, [data-reskin="v2"] .acct-item-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; } [data-reskin="v2"] .acct-item-label { font-family: var(--font-sans); font-size: 13px; font-weight: 500; } /* ─────────────────────────────────────────────────────────── 19. STATUS BADGES — pick up v2 indigo signal where natural ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .badge.status-active-client { background: rgba(0, 135, 90, 0.12); color: #00875a; } [data-reskin="v2"] .badge.status-booked-meeting, [data-reskin="v2"] .badge.status-interested { background: var(--accent-soft); color: var(--accent); } [data-reskin="v2"] .badge { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; } /* Sidebar badges — match new mono treatment */ [data-reskin="v2"] .sidebar .badge { font-family: var(--font-mono); font-size: 9px; background: rgba(var(--v2-a-rgb), 0.18); color: rgba(255, 255, 255, 0.85); border-radius: var(--rad-pill); padding: 1px 8px; letter-spacing: 0.08em; } [data-reskin="v2"] .sidebar .badge.red { background: rgba(234, 34, 97, 0.22); color: #ff7da0; } /* ─────────────────────────────────────────────────────────── 20. FORM ELEMENTS — gentler, more editorial ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] input[type="text"], [data-reskin="v2"] input[type="email"], [data-reskin="v2"] input[type="url"], [data-reskin="v2"] input[type="tel"], [data-reskin="v2"] input[type="search"]:not(#topbar-search), [data-reskin="v2"] input[type="password"], [data-reskin="v2"] textarea, [data-reskin="v2"] select { font-family: var(--font-sans); border-radius: var(--rad-md); border: 1px solid var(--border); background: var(--bg); padding: 10px 14px; transition: border-color var(--dur-fast) var(--ease-stripe), box-shadow var(--dur-fast) var(--ease-stripe); } [data-reskin="v2"] input:focus, [data-reskin="v2"] textarea:focus, [data-reskin="v2"] select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-line); } [data-reskin="v2"] label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); font-weight: 500; } /* ─────────────────────────────────────────────────────────── 21. AI AGENTS GALLERY — premium calling-card treatment /agents → templates/agents_list.html ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .ag-wrap { max-width: 1240px; padding-top: 8px; } [data-reskin="v2"] .ag-head { align-items: flex-end; border-bottom: 1px solid var(--border); padding-bottom: 28px; margin-bottom: 36px; gap: 24px; } [data-reskin="v2"] .ag-head h1 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(48px, 5.5vw, 76px); line-height: 0.95; letter-spacing: -0.025em; background: linear-gradient(96deg, #ffffff 0%, color-mix(in srgb, var(--v2-a) 50%, var(--v2-b)) 55%, var(--v2-b) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin: 0; } [data-reskin="v2"] .ag-sub { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: var(--ink-dim); margin-top: 14px; max-width: 60ch; } [data-reskin="v2"] .ag-head .btn.primary.pill { align-self: center; } /* Industry templates slab */ [data-reskin="v2"] .ag-wrap > .card[style*="margin-bottom"] { background: linear-gradient(180deg, rgba(var(--v2-a-rgb), 0.05) 0%, transparent 60%), var(--surf-1); border: 1px solid var(--border); border-radius: var(--rad-lg); padding: 28px 32px 32px; position: relative; overflow: hidden; } [data-reskin="v2"] .ag-wrap > .card[style*="margin-bottom"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--v2-a-rgb), 0.55) 30%, rgba(var(--v2-b-rgb), 0.55) 70%, transparent); } [data-reskin="v2"] .ag-wrap > .card h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 24px !important; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 4px !important; } [data-reskin="v2"] .ag-wrap > .card h2 + p { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 22px !important; } [data-reskin="v2"] .ag-wrap > .card .card-feature { background: var(--surf-2); border: 1px solid var(--border); border-radius: var(--rad-md); padding: 18px; transition: border-color var(--dur-fast) var(--ease-stripe), transform var(--dur-fast) var(--ease-stripe), box-shadow var(--dur-fast) var(--ease-stripe); } [data-reskin="v2"] .ag-wrap > .card .card-feature:hover { border-color: rgba(var(--v2-a-rgb), 0.5); transform: translateY(-2px); box-shadow: 0 8px 24px -12px rgba(var(--v2-a-rgb), 0.4); } [data-reskin="v2"] .ag-wrap > .card .card-feature strong { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 18px !important; letter-spacing: -0.01em; color: var(--ink); } [data-reskin="v2"] .ag-wrap > .card .card-feature > div { font-family: var(--font-sans); font-size: 12.5px !important; color: var(--ink-dim) !important; line-height: 1.5; } [data-reskin="v2"] .ag-wrap > .card .card-feature .btn.primary.small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 14px; border-radius: var(--rad-pill); } /* Agents grid */ [data-reskin="v2"] .ag-wrap > .grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; gap: 22px !important; } [data-reskin="v2"] .ag-wrap .card-wrap { position: relative; isolation: isolate; } /* Gradient initial puck — REMOVED (data-initial attr stripped from template) */ /* Accent-tinted left border breathe on active cards */ @keyframes v2-border-breathe { 0%, 100% { box-shadow: inset 3px 0 0 rgba(var(--v2-a-rgb), 0.55); } 50% { box-shadow: inset 3px 0 0 rgba(var(--v2-a-rgb), 0.95); } } [data-reskin="v2"] .ag-wrap .card-wrap[data-agent-status="active"] > a.card.card-feature { animation: v2-border-breathe 2.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { [data-reskin="v2"] .ag-wrap .card-wrap[data-agent-status="active"] > a.card.card-feature { animation: none; box-shadow: inset 3px 0 0 rgba(var(--v2-a-rgb), 0.7); } } /* Card */ [data-reskin="v2"] .ag-wrap .card-wrap > a.card.card-feature { background: radial-gradient(circle at 100% 0%, rgba(var(--v2-a-rgb), 0.07), transparent 50%), linear-gradient(180deg, var(--surf-1) 0%, var(--surf-2) 100%); border: 1px solid var(--border); border-radius: var(--rad-lg); padding: 22px 22px 18px; gap: 14px !important; min-height: 200px; position: relative; overflow: hidden; transition: border-color var(--dur-fast) var(--ease-stripe), transform var(--dur-fast) var(--ease-stripe), box-shadow var(--dur-fast) var(--ease-stripe); } [data-reskin="v2"] .ag-wrap .card-wrap > a.card.card-feature::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--v2-a-rgb), 0.4) 40%, rgba(var(--v2-b-rgb), 0.4) 60%, transparent); opacity: 0; transition: opacity var(--dur-fast) var(--ease-stripe); } [data-reskin="v2"] .ag-wrap .card-wrap:hover > a.card.card-feature { transform: translateY(-4px); border-color: rgba(var(--v2-a-rgb), 0.6); box-shadow: 0 22px 56px -16px rgba(var(--v2-a-rgb), 0.55), 0 4px 12px -4px rgba(0, 0, 0, 0.45), inset 3px 0 0 rgba(var(--v2-a-rgb), 0.9); background: radial-gradient(circle at 100% 0%, rgba(var(--v2-a-rgb), 0.12), transparent 50%), linear-gradient(180deg, var(--surf-1) 0%, var(--surf-2) 100%); } [data-reskin="v2"] .ag-wrap .card-wrap:hover > a.card.card-feature::before { opacity: 1; } [data-reskin="v2"] .ag-wrap .card-wrap .ag-card-head { align-items: center !important; } [data-reskin="v2"] .ag-wrap .card-wrap .name { font-family: var(--font-display) !important; font-style: italic; font-weight: 400; font-size: 24px !important; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); flex: 1; word-break: break-word; } [data-reskin="v2"] .ag-wrap .card-wrap:hover .name { background: linear-gradient(96deg, #ffffff 0%, color-mix(in srgb, var(--v2-a) 50%, var(--v2-b)) 55%, var(--v2-b) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } [data-reskin="v2"] .ag-wrap .card-wrap .ag-card-head .chip { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--rad-pill); border: 1px solid var(--border); align-self: flex-start; flex-shrink: 0; } /* Active chip — Slack-style pulsing presence dot */ @keyframes v2-chip-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.75); } } [data-reskin="v2"] .ag-wrap .card-wrap .ag-card-head .chip.on.ok { background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(var(--v2-b-rgb), 0.18)); color: #6fffb0; border-color: rgba(34, 197, 94, 0.4); box-shadow: 0 0 12px -2px rgba(34, 197, 94, 0.35); display: inline-flex; align-items: center; gap: 6px; } [data-reskin="v2"] .ag-wrap .card-wrap .ag-card-head .chip.on.ok::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6fffb0; flex-shrink: 0; animation: v2-chip-pulse 2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { [data-reskin="v2"] .ag-wrap .card-wrap .ag-card-head .chip.on.ok::before { animation: none; } } [data-reskin="v2"] .ag-wrap .card-wrap .ag-card-head .chip.warn { background: rgba(234, 34, 97, 0.16); color: #ff95b3; border-color: rgba(234, 34, 97, 0.4); } [data-reskin="v2"] .ag-wrap .card-wrap .ag-spec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: inherit; color: inherit; padding-top: 8px; border-top: 1px solid var(--border); } [data-reskin="v2"] .ag-wrap .card-wrap .ag-spec { display: flex; flex-direction: column; gap: 4px; min-width: 0; } [data-reskin="v2"] .ag-wrap .card-wrap .ag-spec-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; } [data-reskin="v2"] .ag-wrap .card-wrap .ag-spec-value { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-reskin="v2"] .ag-wrap .card-wrap .ag-spec-phone .ag-spec-value { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; letter-spacing: 0; } [data-reskin="v2"] .ag-wrap .card-wrap .ag-calls-row { display: flex; align-items: baseline; gap: 8px; font-size: inherit; color: inherit; padding-top: 4px; margin-top: auto; } [data-reskin="v2"] .ag-wrap .card-wrap .ag-call-num { font-family: var(--font-mono); font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--ink); line-height: 1; } [data-reskin="v2"] .ag-wrap .card-wrap .ag-call-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); } [data-reskin="v2"] .ag-wrap .card-wrap .ag-call-sep { color: var(--ink-faint); font-size: 12px; } [data-reskin="v2"] .ag-wrap .card-wrap .ag-call-last { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-faint); font-variant-numeric: tabular-nums; } [data-reskin="v2"] .ag-wrap .card-wrap .del-btn { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--rad-pill); background: rgba(20, 20, 28, 0.72); backdrop-filter: blur(8px); border: 1px solid var(--border); color: var(--ink-faint); top: 14px; right: 14px; z-index: 3; } [data-reskin="v2"] .ag-wrap .card-wrap .del-btn:hover { background: rgba(234, 34, 97, 0.18); border-color: rgba(234, 34, 97, 0.5); color: #ff95b3; } [data-reskin="v2"] .ag-wrap .card-wrap > div:has(.phone-assign-btn), [data-reskin="v2"] .ag-wrap .card-wrap > div:has(form) { padding: 12px 0 0 !important; } [data-reskin="v2"] .ag-wrap .card-wrap form button.btn.primary.pill { width: 100%; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; padding: 11px 18px; border-radius: var(--rad-pill); background: linear-gradient(135deg, var(--v2-a) 0%, var(--v2-b) 100%); border: none; color: #ffffff; font-weight: 600; box-shadow: 0 8px 20px -8px rgba(var(--v2-a-rgb), 0.55); cursor: pointer; transition: transform var(--dur-fast) var(--ease-stripe), box-shadow var(--dur-fast) var(--ease-stripe); } [data-reskin="v2"] .ag-wrap .card-wrap form button.btn.primary.pill:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(var(--v2-a-rgb), 0.7); } [data-reskin="v2"] .ag-wrap .card-wrap .phone-assign-btn.active-line { display: flex; align-items: center; justify-content: center; width: 100%; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; padding: 11px 18px; border-radius: var(--rad-pill); background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(var(--v2-b-rgb), 0.22)); border: 1px solid rgba(34, 197, 94, 0.5); color: #6fffb0; font-weight: 600; cursor: default; position: relative; overflow: hidden; } [data-reskin="v2"] .ag-wrap .card-wrap .phone-assign-btn.active-line::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); animation: ag-shimmer 3.5s infinite; } @keyframes ag-shimmer { 0% { left: -100%; } 50%, 100% { left: 100%; } } @media (prefers-reduced-motion: reduce) { [data-reskin="v2"] .ag-wrap .card-wrap .phone-assign-btn.active-line::after { animation: none; } } [data-reskin="v2"] .ag-wrap .warn-banner { background: linear-gradient(180deg, rgba(255, 181, 90, 0.08), rgba(255, 181, 90, 0.02)); border: 1px solid rgba(255, 181, 90, 0.32); border-left: 3px solid #ffb55a; border-radius: var(--rad-md); padding: 16px 20px; font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--ink); margin-bottom: 28px; } [data-reskin="v2"] .ag-wrap .warn-banner strong { font-weight: 600; } [data-reskin="v2"] .ag-wrap .warn-banner code { font-family: var(--font-mono); background: rgba(0, 0, 0, 0.4); padding: 2px 8px; border-radius: var(--rad-sm); font-size: 12px; color: #ffd394; } [data-reskin="v2"] .ag-wrap .empty-state { padding: 80px 32px; text-align: center; background: var(--surf-1); border: 1px dashed var(--border); border-radius: var(--rad-lg); } [data-reskin="v2"] .ag-wrap .empty-state-icon { font-size: 56px; margin-bottom: 16px; opacity: 0.85; } [data-reskin="v2"] .ag-wrap .empty-state p { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 28px; letter-spacing: -0.015em; color: var(--ink-dim); margin: 0 0 24px; } /* ─────────────────────────────────────────────────────────── 21B. PER-ACCENT GRADIENT PAIRS — picker overrides --v2-a / --v2-b drive every gradient on the site. Defaults (no data-accent) keep the Stripe indigo+cyan. ─────────────────────────────────────────────────────────── */ [data-reskin="v2"][data-accent="default"] { --v2-a: #635bff; --v2-b: #00d4ff; --v2-a-rgb: 99, 91, 255; --v2-b-rgb: 0, 212, 255; } [data-reskin="v2"][data-accent="violet"] { --v2-a: #7c3aed; --v2-b: #c084fc; --v2-a-rgb: 124, 58, 237; --v2-b-rgb: 192, 132, 252; } [data-reskin="v2"][data-accent="indigo"] { --v2-a: #4f46e5; --v2-b: #818cf8; --v2-a-rgb: 79, 70, 229; --v2-b-rgb: 129, 140, 248; } [data-reskin="v2"][data-accent="emerald"] { --v2-a: #10b981; --v2-b: #6ee7b7; --v2-a-rgb: 16, 185, 129; --v2-b-rgb: 110, 231, 183; } [data-reskin="v2"][data-accent="teal"] { --v2-a: #14b8a6; --v2-b: #5eead4; --v2-a-rgb: 20, 184, 166; --v2-b-rgb: 94, 234, 212; } [data-reskin="v2"][data-accent="cyan"] { --v2-a: #06b6d4; --v2-b: #67e8f9; --v2-a-rgb: 6, 182, 212; --v2-b-rgb: 103, 232, 249; } [data-reskin="v2"][data-accent="amber"] { --v2-a: #f59e0b; --v2-b: #fcd34d; --v2-a-rgb: 245, 158, 11; --v2-b-rgb: 252, 211, 77; } [data-reskin="v2"][data-accent="orange"] { --v2-a: #f97316; --v2-b: #fdba74; --v2-a-rgb: 249, 115, 22; --v2-b-rgb: 253, 186, 116; } [data-reskin="v2"][data-accent="rose"] { --v2-a: #f43f5e; --v2-b: #fda4af; --v2-a-rgb: 244, 63, 94; --v2-b-rgb: 253, 164, 175; } [data-reskin="v2"][data-accent="crimson"] { --v2-a: #ef4444; --v2-b: #fca5a5; --v2-a-rgb: 239, 68, 68; --v2-b-rgb: 252, 165, 165; } [data-reskin="v2"][data-accent="fuchsia"] { --v2-a: #d946ef; --v2-b: #f0abfc; --v2-a-rgb: 217, 70, 239; --v2-b-rgb: 240, 171, 252; } [data-reskin="v2"][data-accent="lime"] { --v2-a: #84cc16; --v2-b: #bef264; --v2-a-rgb: 132, 204, 22; --v2-b-rgb: 190, 242, 100; } [data-reskin="v2"][data-accent="slate"] { --v2-a: #64748b; --v2-b: #94a3b8; --v2-a-rgb: 100, 116, 139; --v2-b-rgb: 148, 163, 184; } /* CRITICAL: bind --brand / --accent / --info tokens to --v2-a so inline styles that reference var(--brand) repaint with accent picks too. Higher source order beats the base block at equal specificity. */ [data-reskin="v2"] { --brand: var(--v2-a); --brand-bright: var(--v2-b); --brand-soft: rgba(var(--v2-a-rgb), 0.10); --accent: var(--v2-a); --accent-bright: var(--v2-b); --accent-soft: rgba(var(--v2-a-rgb), 0.10); --accent-line: rgba(var(--v2-a-rgb), 0.24); --accent-hover: color-mix(in srgb, var(--v2-a) 82%, #000); --info: var(--v2-a); --info-soft: rgba(var(--v2-a-rgb), 0.10); --gradient-brand: linear-gradient(135deg, var(--v2-a) 0%, var(--v2-b) 100%); --gradient-brand-press: linear-gradient(135deg, color-mix(in srgb, var(--v2-a) 82%, #000) 0%, color-mix(in srgb, var(--v2-b) 80%, #000) 100%); } [data-reskin="v2"][data-theme="dark"] { --brand: var(--v2-a); --brand-bright: var(--v2-b); --brand-soft: rgba(var(--v2-a-rgb), 0.18); --accent: var(--v2-a); --accent-bright: var(--v2-b); --accent-soft: rgba(var(--v2-a-rgb), 0.18); --accent-line: rgba(var(--v2-a-rgb), 0.30); --accent-hover: color-mix(in srgb, var(--v2-a) 88%, #fff); --info: var(--v2-a); --info-soft: rgba(var(--v2-a-rgb), 0.14); /* Dark-mode gradient brightener — still uses accent pair, just lightened ~12% so the gradient pops on the deep navy canvas. */ --gradient-brand: linear-gradient(135deg, color-mix(in srgb, var(--v2-a) 92%, #fff) 0%, color-mix(in srgb, var(--v2-b) 92%, #fff) 100%); --gradient-brand-press: linear-gradient(135deg, var(--v2-a) 0%, var(--v2-b) 100%); } /* Status pills that semantically read as "info"/"in-progress" should also follow accent — but danger/warn/ok stay semantic (red/amber/green). */ [data-reskin="v2"] .status.status-new, [data-reskin="v2"] .status.status-contacted, [data-reskin="v2"] .status.status-proposal-sent, [data-reskin="v2"] .status.status-built-website { background: rgba(var(--v2-a-rgb), 0.16); color: var(--v2-a); border: 1px solid rgba(var(--v2-a-rgb), 0.32); } /* ─────────────────────────────────────────────────────────── 22. /TODAY — editorial dashboard rhythm ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .section { margin-bottom: 36px; } [data-reskin="v2"] .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } [data-reskin="v2"] .section-head h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 32px; letter-spacing: -0.015em; color: var(--ink); margin: 0; } [data-reskin="v2"] .section-head h2[style*="danger"] { color: #ff95b3 !important; background: linear-gradient(96deg, #ff95b3 0%, #ea2261 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-reskin="v2"] .section-head .link { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; } [data-reskin="v2"] .section .panel { background: var(--surf-1); border: 1px solid var(--border); border-radius: var(--rad-lg); padding: 8px; overflow: hidden; } [data-reskin="v2"] .mini-list { display: flex; flex-direction: column; } [data-reskin="v2"] .mini-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: var(--rad-md); border: 1px solid transparent; transition: background var(--dur-fast) var(--ease-stripe), border-color var(--dur-fast) var(--ease-stripe), transform var(--dur-fast) var(--ease-stripe); position: relative; } [data-reskin="v2"] .mini-row:hover { background: linear-gradient(90deg, rgba(var(--v2-a-rgb), 0.06), rgba(var(--v2-b-rgb), 0.04)); border-color: rgba(var(--v2-a-rgb), 0.22); transform: translateX(2px); } [data-reskin="v2"] .mini-row + .mini-row { margin-top: 4px; } [data-reskin="v2"] .mini-row .name { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; text-decoration: none; display: inline-block; margin-bottom: 4px; } [data-reskin="v2"] .mini-row .meta { font-family: var(--font-sans); font-size: 12px; color: var(--ink-dim); line-height: 1.45; } [data-reskin="v2"] .mini-row .next-step-chip { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: var(--rad-pill); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(var(--v2-a-rgb), 0.12); border: 1px solid rgba(var(--v2-a-rgb), 0.3); color: #b9b6ff; } [data-reskin="v2"] .mini-row .right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } [data-reskin="v2"] .mini-row .due { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: var(--rad-pill); } [data-reskin="v2"] .mini-row .due.overdue { background: linear-gradient(135deg, rgba(234, 34, 97, 0.22), rgba(234, 34, 97, 0.08)); color: #ff95b3; border: 1px solid rgba(234, 34, 97, 0.45); } [data-reskin="v2"] .mini-row .due.today { background: linear-gradient(135deg, rgba(255, 181, 90, 0.22), rgba(255, 181, 90, 0.08)); color: #ffd394; border: 1px solid rgba(255, 181, 90, 0.45); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; } /* status pills inside .meta */ [data-reskin="v2"] .mini-row .status { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--rad-pill); display: inline-block; } /* score pills (fresh leads) */ [data-reskin="v2"] .mini-row .score { font-family: var(--font-mono); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: var(--rad-pill); display: inline-block; } [data-reskin="v2"] .mini-row .score-high { background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(var(--v2-b-rgb), 0.16)); color: #6fffb0; border: 1px solid rgba(34, 197, 94, 0.4); } [data-reskin="v2"] .mini-row .score-mid { background: rgba(var(--v2-b-rgb), 0.16); color: #7ee0ff; border: 1px solid rgba(var(--v2-b-rgb), 0.4); } [data-reskin="v2"] .mini-row .score-low { background: rgba(234, 34, 97, 0.16); color: #ff95b3; border: 1px solid rgba(234, 34, 97, 0.4); } [data-reskin="v2"] .mini-row .no-site { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--rad-pill); background: rgba(234, 34, 97, 0.16); color: #ff95b3; border: 1px solid rgba(234, 34, 97, 0.32); } /* mini-row buttons */ [data-reskin="v2"] .mini-row .btn.sm, [data-reskin="v2"] .mini-row a.btn.sm, [data-reskin="v2"] .section .mini-row .btn.sm, [data-reskin="v2"] .section .mini-row a.btn.sm { font-family: var(--font-mono) !important; font-size: 10px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 600 !important; padding: 7px 14px !important; border-radius: var(--rad-pill) !important; background: linear-gradient(135deg, var(--v2-a) 0%, var(--v2-b) 100%) !important; background-image: linear-gradient(135deg, var(--v2-a) 0%, var(--v2-b) 100%) !important; color: #ffffff !important; border: none !important; text-decoration: none !important; transition: transform var(--dur-fast) var(--ease-stripe), box-shadow var(--dur-fast) var(--ease-stripe); box-shadow: 0 4px 12px -4px rgba(var(--v2-a-rgb), 0.45); } [data-reskin="v2"] .mini-row .btn.sm:hover, [data-reskin="v2"] .mini-row a.btn.sm:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -4px rgba(var(--v2-a-rgb), 0.6) !important; } /* AI briefing card refinement */ [data-reskin="v2"] .ai-briefing-card { border: 1px solid rgba(var(--v2-a-rgb), 0.38) !important; border-left-width: 3px !important; border-left-color: rgba(var(--v2-a-rgb), 0.85) !important; background: linear-gradient(180deg, rgba(var(--v2-a-rgb), 0.08) 0%, rgba(15, 18, 38, 0.6) 100%) !important; border-radius: var(--rad-lg) !important; position: relative; overflow: hidden; } [data-reskin="v2"] .ai-briefing-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--v2-a-rgb), 0.55) 30%, rgba(var(--v2-b-rgb), 0.55) 70%, transparent); } [data-reskin="v2"] .ai-briefing-card .ai-briefing-glyph { background: linear-gradient(135deg, var(--v2-a) 0%, var(--v2-b) 100%) !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 12px -4px rgba(var(--v2-a-rgb), 0.5); } [data-reskin="v2"] .ai-briefing-card strong { font-family: var(--font-mono) !important; font-size: 10.5px !important; letter-spacing: 0.18em !important; } /* Next best action panel */ [data-reskin="v2"] .section .panel[style*="border-left:3px solid var(--brand)"] { border-radius: var(--rad-lg) !important; position: relative; overflow: hidden; } /* ─────────────────────────────────────────────────────────── 23. /LEADS table refinement ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .leads-table tbody tr { transition: background var(--dur-fast) var(--ease-stripe); } [data-reskin="v2"] .leads-table tbody tr:hover { background: linear-gradient(90deg, rgba(var(--v2-a-rgb), 0.06), rgba(var(--v2-b-rgb), 0.04)) !important; } [data-reskin="v2"] .leads-table .score { font-family: var(--font-mono); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 3px 10px; border-radius: var(--rad-pill); letter-spacing: 0.02em; } [data-reskin="v2"] .leads-table .score-high, [data-reskin="v2"] .score.score-high { background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(var(--v2-b-rgb), 0.16)) !important; color: #6fffb0 !important; border: 1px solid rgba(34, 197, 94, 0.4) !important; } [data-reskin="v2"] .leads-table .score-mid, [data-reskin="v2"] .score.score-mid { background: rgba(var(--v2-b-rgb), 0.14) !important; color: #7ee0ff !important; border: 1px solid rgba(var(--v2-b-rgb), 0.4) !important; } [data-reskin="v2"] .leads-table .score-low, [data-reskin="v2"] .score.score-low { background: rgba(234, 34, 97, 0.16) !important; color: #ff95b3 !important; border: 1px solid rgba(234, 34, 97, 0.4) !important; } /* ─────────────────────────────────────────────────────────── 24. /CONVERSATIONS + /MESSAGES chat ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .conv-list, [data-reskin="v2"] .conv-thread { background: var(--surf-1) !important; border: 1px solid var(--border) !important; border-radius: var(--rad-lg) !important; } [data-reskin="v2"] .conv-list-head, [data-reskin="v2"] .conv-thread-head { border-bottom: 1px solid var(--border) !important; padding: 16px 18px !important; } [data-reskin="v2"] .conv-list-head strong, [data-reskin="v2"] .conv-thread-head strong, [data-reskin="v2"] .conv-thread-head .name { font-family: var(--font-display) !important; font-style: italic !important; font-weight: 400 !important; font-size: 22px !important; letter-spacing: -0.015em !important; color: var(--ink) !important; } [data-reskin="v2"] .conv-item { border-radius: var(--rad-md) !important; transition: background var(--dur-fast) var(--ease-stripe), transform var(--dur-fast) var(--ease-stripe); margin: 2px 6px; padding: 12px 14px !important; border-left: 3px solid transparent !important; } [data-reskin="v2"] .conv-item:hover { background: linear-gradient(90deg, rgba(var(--v2-a-rgb), 0.07), transparent) !important; } [data-reskin="v2"] .conv-item.active { background: linear-gradient(90deg, rgba(var(--v2-a-rgb), 0.22), rgba(var(--v2-a-rgb), 0.05)) !important; border-left-color: var(--accent) !important; } [data-reskin="v2"] .conv-item .name, [data-reskin="v2"] .conv-item strong { font-family: var(--font-sans) !important; font-weight: 600 !important; font-size: 14px !important; color: var(--ink) !important; } [data-reskin="v2"] .conv-item .preview, [data-reskin="v2"] .conv-item .muted { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-dim); } [data-reskin="v2"] .conv-item .time { font-family: var(--font-mono) !important; font-size: 10.5px !important; letter-spacing: 0.04em !important; font-variant-numeric: tabular-nums !important; color: var(--ink-faint) !important; } /* msg bubbles */ [data-reskin="v2"] .msg-row { margin: 8px 0; } [data-reskin="v2"] .msg-bubble { border-radius: 18px !important; padding: 10px 14px !important; font-family: var(--font-sans) !important; font-size: 14px !important; line-height: 1.45 !important; max-width: 70% !important; display: inline-block; word-wrap: break-word; position: relative; } [data-reskin="v2"] .msg-row.out .msg-bubble { background: linear-gradient(135deg, var(--v2-a) 0%, var(--v2-b) 100%) !important; color: #ffffff !important; box-shadow: 0 4px 16px -6px rgba(var(--v2-a-rgb), 0.55) !important; border-bottom-right-radius: 6px !important; } [data-reskin="v2"] .msg-row.in .msg-bubble, [data-reskin="v2"] .msg-row:not(.out) .msg-bubble { background: var(--surf-2) !important; border: 1px solid var(--border) !important; color: var(--ink) !important; border-bottom-left-radius: 6px !important; } [data-reskin="v2"] .msg-row .channel-tag, [data-reskin="v2"] .msg-row .meta, [data-reskin="v2"] .msg-row .ts, [data-reskin="v2"] .msg-row .timestamp { font-family: var(--font-mono) !important; font-size: 9.5px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--ink-faint) !important; } /* /messages empty pane */ [data-reskin="v2"] .empty-pane, [data-reskin="v2"] .messages-pane > .empty, [data-reskin="v2"] .conv-thread .empty { text-align: center; padding: 64px 32px; } [data-reskin="v2"] .empty-pane h2, [data-reskin="v2"] .conv-thread .empty h2 { font-family: var(--font-display) !important; font-style: italic; font-weight: 400; font-size: 28px; letter-spacing: -0.015em; color: var(--ink); margin: 16px 0 8px; } /* topbar Call / View lead buttons in thread head */ [data-reskin="v2"] .conv-thread-head a.btn, [data-reskin="v2"] .conv-thread-head button.btn { font-family: var(--font-mono) !important; font-size: 10.5px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; padding: 8px 14px !important; border-radius: var(--rad-pill) !important; } /* ─────────────────────────────────────────────────────────── 25. /FORUM post cards ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .post-card, [data-reskin="v2"] .forum-post, [data-reskin="v2"] [data-forum-post] { background: var(--surf-1); border: 1px solid var(--border); border-radius: var(--rad-lg); padding: 20px 24px; margin-bottom: 12px; transition: border-color var(--dur-fast) var(--ease-stripe), transform var(--dur-fast) var(--ease-stripe), box-shadow var(--dur-fast) var(--ease-stripe); position: relative; overflow: hidden; } [data-reskin="v2"] .post-card:hover, [data-reskin="v2"] .forum-post:hover { border-color: rgba(var(--v2-a-rgb), 0.45); transform: translateY(-2px); box-shadow: 0 12px 32px -16px rgba(var(--v2-a-rgb), 0.4); } [data-reskin="v2"] .post-card::before, [data-reskin="v2"] .forum-post::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--v2-a), var(--v2-b)); opacity: 0; transition: opacity var(--dur-fast) var(--ease-stripe); } [data-reskin="v2"] .post-card:hover::before, [data-reskin="v2"] .forum-post:hover::before { opacity: 1; } /* forum filter chips */ [data-reskin="v2"] .forum-filter, [data-reskin="v2"] [data-forum-filter] { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 14px; border-radius: var(--rad-pill); border: 1px solid var(--border); background: var(--surf-1); color: var(--ink-dim); transition: all var(--dur-fast) var(--ease-stripe); } [data-reskin="v2"] .forum-filter.active, [data-reskin="v2"] .forum-filter[data-active="true"] { background: linear-gradient(135deg, rgba(var(--v2-a-rgb), 0.25), rgba(var(--v2-b-rgb), 0.18)); border-color: rgba(var(--v2-a-rgb), 0.55); color: #ffffff; } /* ─────────────────────────────────────────────────────────── 26. /SCRIPTS section headings ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .scripts-page h2, [data-reskin="v2"] .script-section h2, [data-reskin="v2"] main > h2:not(.section-head h2) { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 36px; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 10px; } /* ─────────────────────────────────────────────────────────── 27. UNIVERSAL inbox-zero, page-head meta polish ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .page-head .meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-top: 10px; } [data-reskin="v2"] .page-head .actions .btn { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 9px 16px; border-radius: var(--rad-pill); } /* slashed-zero in mono numerics */ [data-reskin="v2"] .ag-call-num, [data-reskin="v2"] .stat-num, [data-reskin="v2"] .leads-table .score { font-feature-settings: "zero" 1, "tnum" 1; } /* ─────────────────────────────────────────────────────────── 28. PRODUCTION POLISH — subtle grain + body atmosphere ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.025; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; } @media (prefers-reduced-motion: reduce) { [data-reskin="v2"] body::after { display: none; } } /* ─────────────────────────────────────────────────────────── 29. /WORKFLOWS row polish ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .workflow-row, [data-reskin="v2"] tr.workflow { transition: background var(--dur-fast) var(--ease-stripe); } [data-reskin="v2"] .workflow-row:hover, [data-reskin="v2"] tr.workflow:hover { background: linear-gradient(90deg, rgba(var(--v2-a-rgb), 0.06), transparent); } [data-reskin="v2"] .workflow-name, [data-reskin="v2"] td.workflow-name { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--ink); } [data-reskin="v2"] .starter-template { background: var(--surf-1); border: 1px solid var(--border); border-radius: var(--rad-md); padding: 14px 18px; transition: border-color var(--dur-fast) var(--ease-stripe), transform var(--dur-fast) var(--ease-stripe); } [data-reskin="v2"] .starter-template:hover { border-color: rgba(var(--v2-a-rgb), 0.45); transform: translateY(-2px); } [data-reskin="v2"] .starter-template h3, [data-reskin="v2"] .starter-template strong { font-family: var(--font-display) !important; font-style: italic !important; font-weight: 400 !important; font-size: 18px !important; color: var(--ink) !important; } /* ─────────────────────────────────────────────────────────── 30. /FORUM post titles italic ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .post-card .title, [data-reskin="v2"] .post-card h3, [data-reskin="v2"] .post-card h2, [data-reskin="v2"] [data-forum-post] h3, [data-reskin="v2"] [data-forum-post] .title { font-family: var(--font-display) !important; font-style: italic !important; font-weight: 400 !important; font-size: 22px !important; letter-spacing: -0.012em !important; text-transform: none !important; color: var(--ink) !important; margin: 8px 0 6px !important; } /* Force forum post titles even on inline-styled rows */ [data-reskin="v2"] .forum-post a[style*="font-weight:700"], [data-reskin="v2"] .forum-post a[style*="font-weight: 700"] { font-family: var(--font-display) !important; font-style: italic !important; font-weight: 400 !important; font-size: 22px !important; letter-spacing: -0.012em !important; text-transform: none !important; } /* ─────────────────────────────────────────────────────────── 31. CSP nonced refinements — login form, settings tabs ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] .admin-subnav a, [data-reskin="v2"] .settings-tab, [data-reskin="v2"] .sub-nav a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } /* ─────────────────────────────────────────────────────────── 32. FINAL — page bg gradient atmosphere ─────────────────────────────────────────────────────────── */ [data-reskin="v2"] body { background: radial-gradient(ellipse 1200px 800px at 20% 0%, rgba(var(--v2-a-rgb), 0.08), transparent 50%), radial-gradient(ellipse 1000px 700px at 90% 110%, rgba(var(--v2-b-rgb), 0.05), transparent 50%), var(--bg) !important; background-attachment: fixed !important; } /* ─────────────────────────────────────────────────────────── 33. ICONS — iPhone-style phone handset ─────────────────────────────────────────────────────────── */ /* Global icon-phone is defined in style.css so it works in both Classic and v2. The rule below is a specificity reinforcement for v2 contexts only — no-op if style.css already wins, but harmless and ensures no override gap. */ [data-reskin="v2"] .icon-phone { display: inline-block; width: 1em; height: 1em; vertical-align: -2px; flex-shrink: 0; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M20.487 17.14l-4.065-3.696a1 1 0 0 0-1.391.043l-2.393 2.461c-.576-.11-1.734-.471-2.926-1.66-1.192-1.193-1.553-2.354-1.661-2.926l2.459-2.394a1 1 0 0 0 .043-1.391L6.86 3.513a1 1 0 0 0-1.391-.087l-2.17 1.861a1 1 0 0 0-.29.649c-.015.25-.301 6.172 4.291 10.766C11.305 20.707 16.323 21 17.705 21c.202 0 .326-.006.359-.008a.992.992 0 0 0 .648-.291l1.86-2.171a1 1 0 0 0-.085-1.39z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M20.487 17.14l-4.065-3.696a1 1 0 0 0-1.391.043l-2.393 2.461c-.576-.11-1.734-.471-2.926-1.66-1.192-1.193-1.553-2.354-1.661-2.926l2.459-2.394a1 1 0 0 0 .043-1.391L6.86 3.513a1 1 0 0 0-1.391-.087l-2.17 1.861a1 1 0 0 0-.29.649c-.015.25-.301 6.172 4.291 10.766C11.305 20.707 16.323 21 17.705 21c.202 0 .326-.006.359-.008a.992.992 0 0 0 .648-.291l1.86-2.171a1 1 0 0 0-.085-1.39z'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-size: contain; mask-position: center; } /* ─────────────────────────────────────────────────────────── 34. MOBILE FIXES — iPhone viewport (≤700px) BUG 1 — Blank space above content (600–850 px void): reskin-v2.css sets `.sidebar { position: relative }` which overrides the base style.css mobile rule that makes the sidebar `position: fixed` (removing it from document flow). With `position: relative` the 100vh sidebar stays IN flow as a full-height grid row, pushing topbar + main down by ~852px before any content appears. Fix: on mobile, restore `position: fixed` so the sidebar leaves the grid flow. BUG 2 — Hero h1 padding too large on a 393px screen: The desktop hero uses `padding: 52–56px` top and a 56–64px font — together they eat ~180px just for the title band. Scale these down for mobile. BUG 3 — "More" tab does nothing: The click handler (`toggleMobileNav`) was always correct. It was broken only because the sidebar was `position: relative` in v2, so `.open` → `translateX(0)` just moved an in-flow element sideways — the sidebar was already off the visible viewport and not a fixed overlay. Fixing Bug 1 (position: fixed) also fixes Bug 3: now `toggleMobileNav` slides a proper fixed overlay in from the left. ─────────────────────────────────────────────────────────── */ @media (max-width: 700px) { /* ── Bug 1 fix: remove sidebar from document flow on mobile ── */ /* Restore position:fixed so the sidebar is NOT a grid row. The base style.css already sets the full slide-in/out animation (translateX(-100%) → translateX(0) on .open). We only need to re-declare position:fixed here to beat the non-media-queried `position: relative` above. */ [data-reskin="v2"] .sidebar { position: fixed !important; } /* ── Bug 2 fix: reduce hero padding + font-size on mobile ── */ /* .page-head wrapper (Today, and other pages that use .page-head) */ [data-reskin="v2"] .page-head, [data-reskin="v2"] main > h1:first-child, [data-reskin="v2"] main > h2:first-child, [data-reskin="v2"] .main > h1:first-child, [data-reskin="v2"] .main > h2:first-child { padding-top: 24px; padding-bottom: 20px; margin-bottom: 16px; } /* Large editorial h1 inside .page-head */ [data-reskin="v2"] .page-head h1 { font-size: 36px; padding: 0 16px; } /* Universal h1 hero (pages without .page-head wrapper) */ [data-reskin="v2"] main > h1:first-child, [data-reskin="v2"] .main > h1:first-child, [data-reskin="v2"] main > .ai-page > h1:first-child { font-size: 34px; padding: 24px 16px 20px; margin: -16px -16px 16px; } /* Position-anchor safety + safe-area belt-and-braces. The real visual handling (translucent bg, backdrop-blur, manifest-matched color) is in the non-media-queried v2 rule near line 937. Earlier attempts here to force opaque bg + padding-bottom:0 fell over when iOS 18 PWA returned env(safe-area-inset-bottom)=0. padding-bottom uses max() of (a) the runtime env() value and (b) a CSS custom property `--sab-fallback` that base.html FOUC script pins to 34px for iPhone X+ in standalone PWA mode. This survives the iOS 18+ PWA env()-flips-to-0 bug (well-documented across Next.js #81264, Ionic #29621, and Apple's own iOS 26.1 regression): the tab bar is guaranteed to extend its painted bg through the home-indicator safe-area zone regardless of whichever env() value iOS reports at any moment. */ [data-reskin="v2"] .mobile-tabbar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding-bottom: calc(4px + max( env(safe-area-inset-bottom, 0px), var(--sab-fallback, 0px) )) !important; margin-bottom: 0 !important; z-index: 200 !important; } /* Same fallback chain for any other rule that previously assumed env() would return 34px reliably. Body + FAB + bulk-bar all reserve safe-area space; pin those to the max(env, fallback) chain too so they stay in sync with the tab bar's extended height. */ [data-reskin="v2"] body { padding-bottom: calc(60px + max( env(safe-area-inset-bottom, 0px), var(--sab-fallback, 0px) )) !important; } /* Main content scroll runway — clear the fixed tab bar + safe area. Uses the same max(env, var) chain as the tab bar above so content reserves the same vertical space the tab bar paints, even when iOS reports env(safe-area-inset-bottom)=0. */ [data-reskin="v2"] .main, [data-reskin="v2"] .main-wide { padding-bottom: calc(64px + max( env(safe-area-inset-bottom, 0px), var(--sab-fallback, 0px) )) !important; } /* background-attachment:fixed on body is a known iOS Safari bug that breaks position:fixed on child elements — the tab bar appears to float above the screen bottom. Disable it on mobile; gradient still renders, just scrolls with the page (visually fine on small screens). */ [data-reskin="v2"] body { background-attachment: scroll !important; } }