/* brand.css — brand-aware overrides for trackscout.io vs earshots.io. The inline brand-detect script in sets `class="brand-{name}"` on before paint; this stylesheet does the visual swap. Loaded after style.css and landing.css so brand rules win on the cascade. */ /* ── Show/hide brand-specific copy spans without a paint flash ───────────── */ [data-brand-only="trackscout"] { display: none; } .brand-trackscout [data-brand-only="trackscout"] { display: inline; } .brand-trackscout [data-brand-only="earshots"] { display: none; } /* ── TrackScout fonts (Hanken Grotesk + JetBrains Mono) ──────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ── TrackScout palette (subset — full token set in design bundle) ────────── The first block defines the TrackScout-native tokens. The second block re-points the legacy Earshots tokens (--primary, --surface, etc. used throughout style.css and component files) to the TrackScout palette so every var()-driven component auto-themes without page-by-page edits. ──────────────────────────────────────────────────────────────────────────── */ .brand-trackscout { /* TrackScout-native tokens — defined for both light and dark mode so brand-aware components (logo, hero CTAs, sage accents) keep working when the user toggles dark. */ --ts-cream: #ebe3d2; --ts-cream-light: #f6f1e7; --ts-cream-edge: #c9bea5; --ts-ink: #262520; --ts-ink-2: #3d3b33; --ts-ink-3: #6b685c; --ts-sage: #556346; --ts-sage-hover: #6b7850; --ts-rust: #c47a52; --ts-gold: #c9a96a; --ts-steel: #5a8aa8; } /* Legacy Earshots tokens re-pointed to TrackScout palette — LIGHT MODE ONLY. In dark mode the legacy tokens fall back to style.css :root defaults so the page reads as a dark UI (with the TrackScout wordmark + Hanken type still applied). A bespoke TrackScout dark palette can replace this later. */ .brand-trackscout.light-mode { --primary: var(--ts-sage); --accent: var(--ts-ink-3); --background: var(--ts-cream); --surface: var(--ts-cream-light); --text: var(--ts-ink); --muted: var(--ts-ink-3); --logo-colour: var(--ts-ink); --separator: rgba(38, 37, 32, 0.08); --waveform-bg: var(--ts-cream-edge); --waveform-bg-mid: #d8ccb4; --waveform-active-bg: #cdc1a8; --waveform-active-bg-mid: #ddd0b6; --wave-colour: var(--ts-steel); --progress-colour: var(--ts-sage); --marker-colour: var(--ts-ink-3); --supervisor-accent: var(--ts-steel); } /* Logo mask uses --logo-colour via background-color, but style.css has theme-specific overrides that bypass the token. Mirror the contrast pattern for the trackscout brand: dark ink on cream (light mode), cream on the dark canvas (dark mode). */ html.brand-trackscout.light-mode .logo { background-color: var(--ts-ink); } html.brand-trackscout:not(.light-mode) .logo { background-color: var(--ts-cream-light); } /* Per-page body classes in style.css set hardcoded dark backgrounds at high specificity (e.g. `html:not(.light-mode) body.page-login`). Match the specificity to put cream back when brand-trackscout AND in light mode. */ html.brand-trackscout.light-mode body.page-dashboard, html.brand-trackscout.light-mode body.page-uploader, html.brand-trackscout.light-mode body.page-project, html.brand-trackscout.light-mode body.page-player, html.brand-trackscout.light-mode body.page-canvas, html.brand-trackscout.light-mode body.page-admin, html.brand-trackscout.light-mode body.page-help, html.brand-trackscout.light-mode body.page-settings, html.brand-trackscout.light-mode body.page-login, html.brand-trackscout.light-mode body.page-fileshare, html.brand-trackscout.light-mode body.page-fileshare-download { --background: var(--ts-cream); --surface: var(--ts-cream-light); } /* ── Type — Hanken Grotesk everywhere when trackscout brand ──────────────── */ .brand-trackscout body, .brand-trackscout .landing-body, .brand-trackscout .hero-tagline, .brand-trackscout .hero-subtitle, .brand-trackscout .section-title, .brand-trackscout .product-description, .brand-trackscout .product-bullets li, .brand-trackscout .pricing-tier, .brand-trackscout .pricing-price, .brand-trackscout .pricing-features li, .brand-trackscout button, .brand-trackscout input { font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* ── Logo — swap mask URL and aspect-ratio (wordmark is taller) ──────────── */ .brand-trackscout .logo, .brand-trackscout .hero-logo { -webkit-mask-image: url('trackscout-wordmark.svg'); mask-image: url('trackscout-wordmark.svg'); aspect-ratio: 1160.66 / 360.69; } /* Nav logo: dark ink on cream in light mode; cream on dark in dark mode. The .logo selector at the top of this file already covers dark mode for non-nav uses; the .landing-nav-scoped rule below would override it, so we scope this to light mode only. */ .brand-trackscout.light-mode .landing-nav .logo { background-color: var(--ts-ink); height: 32px; } .brand-trackscout:not(.light-mode) .landing-nav .logo { height: 32px; } /* Hero logo sits over the dark video — cream-on-dark in both modes. */ .brand-trackscout .hero-logo { background-color: var(--ts-cream-light); height: 96px; } /* ── Nav — cream-tinted glass in light mode only ────────────────────────── */ .brand-trackscout.light-mode .landing-nav { background: rgba(235, 227, 210, 0.92); border-bottom: 1px solid rgba(38, 37, 32, 0.12); } .brand-trackscout.light-mode .landing-nav-buttons button.secondary { background: transparent; color: var(--ts-ink); border: 1px solid rgba(38, 37, 32, 0.25); } .brand-trackscout.light-mode .landing-nav-buttons button.secondary:hover { background: rgba(38, 37, 32, 0.06); } /* ── Hero — keep video background, warm the overlay ─────────────────────── */ .brand-trackscout .hero-overlay { background: linear-gradient( 180deg, rgba(38, 37, 32, 0.45) 0%, rgba(38, 37, 32, 0.25) 40%, rgba(38, 37, 32, 0.55) 100% ); } .brand-trackscout .hero-tagline { letter-spacing: -0.015em; } /* CTAs — sage primary instead of Earshots blue */ .brand-trackscout .early-access-btn, .brand-trackscout .pricing-btn, .brand-trackscout .hero-cta { background: var(--ts-sage); color: var(--ts-cream-light); border: none; font-weight: 600; } .brand-trackscout .early-access-btn:hover, .brand-trackscout .pricing-btn:hover, .brand-trackscout .hero-cta:hover { background: var(--ts-sage-hover); } .brand-trackscout .early-access-input { background: rgba(246, 241, 231, 0.95); color: var(--ts-ink); border: 1px solid rgba(38, 37, 32, 0.15); } .brand-trackscout .hero-signin-link { color: rgba(246, 241, 231, 0.85); } .brand-trackscout .hero-signin-link:hover { color: var(--ts-cream-light); } /* ── Product / security / pricing sections — cream surfaces (light mode) ── */ .brand-trackscout.light-mode .product-section, .brand-trackscout.light-mode .security-section { background: var(--ts-cream); color: var(--ts-ink); } .brand-trackscout.light-mode .product-section-alt { background: var(--ts-cream-light); } .brand-trackscout.light-mode .pricing-section { background: var(--ts-cream-light); color: var(--ts-ink); } /* Section headings — dark ink on cream in light mode. Hero tagline/subtitle are excluded; they sit on the dark video and stay white in both modes. */ .brand-trackscout.light-mode .section-title, .brand-trackscout.light-mode .product-section h2, .brand-trackscout.light-mode .product-section h3, .brand-trackscout.light-mode .security-section h2, .brand-trackscout.light-mode .security-section h3, .brand-trackscout.light-mode .pricing-section h2, .brand-trackscout.light-mode .pricing-section h3 { color: var(--ts-ink); } .brand-trackscout.light-mode .product-description, .brand-trackscout.light-mode .product-bullets li, .brand-trackscout.light-mode .security-subtitle, .brand-trackscout.light-mode .security-item p, .brand-trackscout.light-mode .pricing-subtitle, .brand-trackscout.light-mode .pricing-features li { color: var(--ts-ink-2); } .brand-trackscout.light-mode .pricing-card { background: var(--ts-cream); border: 1px solid var(--ts-cream-edge); } .brand-trackscout .pricing-card-popular { border-color: var(--ts-sage); } .brand-trackscout .pricing-badge { background: var(--ts-sage); color: var(--ts-cream-light); } .brand-trackscout .feature-highlight { color: var(--ts-sage); } /* ── Footer ── cream surface in light mode; in dark mode the footer falls back to style.css's default (transparent bg, --muted text) which sits correctly on the dark canvas. */ .brand-trackscout.light-mode .site-footer { background: var(--ts-cream-light); color: var(--ts-ink-2); border-top: 1px solid var(--ts-cream-edge); } .brand-trackscout.light-mode .site-footer a { color: var(--ts-ink-2); } .brand-trackscout.light-mode .site-footer a:hover { color: var(--ts-rust); } /* Beta badge keeps its sage identity in both modes — it's a self-contained pill and reads fine on either surface. */ .brand-trackscout .site-footer .beta-badge { background: var(--ts-sage); color: var(--ts-cream-light); }