/* 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); } /* ════════════════════════════════════════════════════════════════════════════ FileScout brand — warm paper + sage green (Bono's recipient-page design). Mirrors .brand-trackscout: native --fs-* tokens, then re-point the legacy var()-driven tokens so every component auto-themes. Applied on filescout.io (and ?brand=filescout for previews) by brand-init.js. ════════════════════════════════════════════════════════════════════════════ */ /* Brand-copy spans — hide the variants that aren't FileScout. */ .brand-filescout [data-brand-only="trackscout"] { display: none; } .brand-filescout [data-brand-only="earshots"] { display: none; } .brand-filescout { --fs-paper: #ebe3d2; /* cream — page background (unified with TrackScout) */ --fs-paper-light: #f6f1e7; /* lighter cream — cards / surfaces */ --fs-paper-edge: #c9bea5; --fs-ink: #3c3733; /* warm charcoal — text */ --fs-ink-2: #5a534d; --fs-ink-3: #8b8787; /* muted grey (from Bono's palette) */ --fs-sage: #556346; /* primary / Download buttons / badge — unified with TrackScout */ --fs-sage-hover: #6b7850; } /* Re-point legacy tokens — LIGHT MODE (FileScout's default look). In dark mode the tokens fall back to style.css :root so the UI reads dark, while keeping the FileScout wordmark + type (mirrors the TrackScout approach). */ .brand-filescout.light-mode { --primary: var(--fs-sage); --accent: var(--fs-ink-3); /* muted ink for accents (matches TrackScout); sage rides on --primary */ --background: var(--fs-paper); --surface: var(--fs-paper-light); --text: var(--fs-ink); --muted: var(--fs-ink-3); --logo-colour: var(--fs-ink); --separator: rgba(60, 55, 51, 0.10); --waveform-bg: var(--fs-paper-edge); --waveform-bg-mid: #d8ccb4; --waveform-active-bg: #cdc1a8; --waveform-active-bg-mid: #ddd0b6; --wave-colour: var(--fs-sage); --progress-colour: var(--fs-sage); --marker-colour: var(--fs-ink-3); --supervisor-accent: var(--fs-sage); } /* Type — reuse Hanken Grotesk (imported above) for ScoutCo family consistency. */ .brand-filescout body, .brand-filescout button, .brand-filescout input { font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* Logo — Bono's FileScout script wordmark (filescout-wordmark.svg, viewBox cropped to the mark). Single-colour, so used as an alpha mask like the other brands and recoloured by background-color per theme. html-scoped so it wins over the theme-specific .logo background-color overrides in style.css. */ html.brand-filescout .logo, html.brand-filescout .hero-logo { -webkit-mask-image: url('filescout-wordmark.svg'); mask-image: url('filescout-wordmark.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; background-image: none; aspect-ratio: 642 / 218.5; /* cropped to the glyph so it fills its box like TrackScout (matched overall size) */ } html.brand-filescout.light-mode .logo { background-color: var(--fs-ink); } html.brand-filescout:not(.light-mode) .logo { background-color: var(--fs-paper-light); } /* Per-page body backgrounds — match the TrackScout pattern so the high-specificity dark page backgrounds in style.css don't override the warm paper. */ html.brand-filescout.light-mode body.page-dashboard, html.brand-filescout.light-mode body.page-uploader, html.brand-filescout.light-mode body.page-project, html.brand-filescout.light-mode body.page-player, html.brand-filescout.light-mode body.page-help, html.brand-filescout.light-mode body.page-settings, html.brand-filescout.light-mode body.page-login, html.brand-filescout.light-mode body.page-fileshare, html.brand-filescout.light-mode body.page-fileshare-download { --background: var(--fs-paper); --surface: var(--fs-paper-light); } /* The recipient download card + media viewer hardcode a dark/white glass in style.css (rgba(20,22,30,…)). Re-skin to warm-paper glass for FileScout. */ html.brand-filescout body.page-fileshare-download .fileshare-download-card, html.brand-filescout .fileshare-viewer-panel { background: rgba(243, 236, 230, 0.92); border: 1px solid rgba(60, 55, 51, 0.14); box-shadow: 0 10px 32px rgba(60, 55, 51, 0.12); } /* The global `h1,h2 { color: var(--primary) }` rule would tint these headings sage; Bono's title is dark ink. Restore ink on the recipient-facing screens (download card + password prompt) so they read consistently. */ html.brand-filescout #fileShareDownloadTitle, html.brand-filescout .fileshare-download-card h2, html.brand-filescout #passwordPrompt h2 { color: var(--fs-ink); } /* ── Recipient waveform bars (Bono page 3) — each audio file is a full-width accent bar with its waveform painted across it. Markup is emitted by renderFileShareDownload() only under the FileScout brand. ── */ .brand-filescout .fileshare-files-label { font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fs-ink-3); margin: 0.4rem 0 0.75rem; } .brand-filescout .fileshare-wave-row { position: relative; display: flex; align-items: center; gap: 0.6rem; min-height: 50px; padding: 0 0.9rem; margin-bottom: 0.55rem; border: none; border-radius: 9px; overflow: hidden; color: #fff; } .brand-filescout .fileshare-wave-row:last-of-type { margin-bottom: 0; } .brand-filescout .fileshare-wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.6; /* dimmed so the filename reads clearly over the waveform */ } .brand-filescout .fileshare-wave-row > *:not(.fileshare-wave-canvas) { position: relative; z-index: 1; } .brand-filescout .fileshare-wave-row .fileshare-file-name { flex: 1; min-width: 0; color: #fff; font-size: 0.82rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-filescout .fileshare-wave-row .fileshare-view-btn, .brand-filescout .fileshare-wave-row .fileshare-download-btn { flex-shrink: 0; border: none; border-radius: 6px; padding: 0.3rem 0.85rem; font-size: 0.78rem; font-weight: 600; white-space: nowrap; cursor: pointer; line-height: 1.2; margin: 0; } .brand-filescout .fileshare-wave-row .fileshare-view-btn { background: rgba(0, 0, 0, 0.34); /* dark + opaque so the white label reads on any bar colour */ color: #fff; } .brand-filescout .fileshare-wave-row .fileshare-view-btn:hover { background: rgba(0, 0, 0, 0.46); } .brand-filescout .fileshare-wave-row .fileshare-download-btn { background: rgba(255, 255, 255, 0.95); color: var(--fs-ink); } .brand-filescout .fileshare-wave-row .fileshare-download-btn:hover { background: #fff; opacity: 1; } /* Accent colours cycle through the ScoutCo palette (Bono page 3). */ .brand-filescout .fileshare-wave-accent-0 { background: #c9a96a; } /* gold */ .brand-filescout .fileshare-wave-accent-1 { background: #5a8aa8; } /* steel */ .brand-filescout .fileshare-wave-accent-2 { background: #5a6b5f; } /* sage */ .brand-filescout .fileshare-wave-accent-3 { background: #c47a52; } /* rust */ /* Video preview popup border tinted to the file's row colour (Bono page 4). */ .brand-filescout .fileshare-viewer-panel[data-accent="0"] { border-color: #c9a96a; } .brand-filescout .fileshare-viewer-panel[data-accent="1"] { border-color: #5a8aa8; } .brand-filescout .fileshare-viewer-panel[data-accent="2"] { border-color: #5a6b5f; } .brand-filescout .fileshare-viewer-panel[data-accent="3"] { border-color: #c47a52; } /* Audio preview popup — custom waveform player (Bono page 5). Dark panel so the waveform reads; the accent border (above) still tints to the row colour. */ .brand-filescout .fileshare-viewer-panel[data-kind="audio"] { background: #39463e; color: #fff; } .fs-audio-player { display: flex; align-items: center; gap: 0.85rem; width: 100%; } .fs-audio-player audio { display: none; } .fs-audio-play, .fs-audio-mute { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; color: #fff; padding: 0; } .fs-audio-play { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); } .fs-audio-play:hover { background: rgba(255, 255, 255, 0.3); } .fs-audio-mute { width: 32px; height: 32px; background: transparent; opacity: 0.85; } .fs-audio-mute:hover { opacity: 1; } .fs-audio-mute.is-muted { opacity: 0.4; } .fs-audio-wave { position: relative; flex: 1; min-width: 0; height: 56px; cursor: pointer; } .fs-audio-wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .fs-audio-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #fff; opacity: 0.9; pointer-events: none; } .fs-audio-time { flex-shrink: 0; min-width: 86px; text-align: right; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.85); } /* ════════════════════════════════════════════════════════════════════════════ MixScout brand — warm paper + sage, with gold / clay / steel accents (Bono's Wood Paper Scissors player). Mirrors .brand-filescout / .brand-trackscout. Applied on mixscout.io (and ?brand=mixscout) by brand-init.js. ════════════════════════════════════════════════════════════════════════════ */ .brand-mixscout [data-brand-only="trackscout"] { display: none; } .brand-mixscout [data-brand-only="earshots"] { display: none; } .brand-mixscout { --mx-paper: #ebe3d2; /* cream — page background (unified with TrackScout) */ --mx-paper-light: #f6f1e7; /* lighter cream — cards / surfaces */ --mx-paper-edge: #c9bea5; --mx-ink: #3c3733; /* warm charcoal — text */ --mx-ink-2: #5a534d; --mx-ink-3: #8c8888; /* muted grey */ --mx-sage: #556346; /* primary — unified with TrackScout's olive sage */ --mx-sage-hover: #6b7850; --mx-gold: #ddb36d; /* track accent */ --mx-clay: #d18c60; /* track accent */ --mx-steel: #4e88a8; /* waveform / track accent */ } .brand-mixscout.light-mode { --primary: var(--mx-sage); --accent: var(--mx-ink-3); --background: var(--mx-paper); --surface: var(--mx-paper-light); --text: var(--mx-ink); --muted: var(--mx-ink-3); --logo-colour: var(--mx-ink); --separator: rgba(60, 55, 51, 0.10); --waveform-bg: var(--mx-paper-edge); --waveform-bg-mid: #d8ccb4; --waveform-active-bg: #cdc1a8; --waveform-active-bg-mid: #ddd0b6; --wave-colour: var(--mx-steel); --progress-colour: var(--mx-sage); --marker-colour: var(--mx-ink-3); --supervisor-accent: var(--mx-steel); } .brand-mixscout body, .brand-mixscout button, .brand-mixscout input { font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } html.brand-mixscout .logo, html.brand-mixscout .hero-logo { -webkit-mask-image: url('mixscout-wordmark.svg'); mask-image: url('mixscout-wordmark.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; background-image: none; aspect-ratio: 631.2 / 209.5; /* cropped to the glyph so it fills its box like TrackScout (matched overall size) */ } html.brand-mixscout.light-mode .logo { background-color: var(--mx-ink); } html.brand-mixscout:not(.light-mode) .logo { background-color: var(--mx-paper-light); } html.brand-mixscout.light-mode body.page-dashboard, html.brand-mixscout.light-mode body.page-uploader, html.brand-mixscout.light-mode body.page-project, html.brand-mixscout.light-mode body.page-player, html.brand-mixscout.light-mode body.page-help, html.brand-mixscout.light-mode body.page-settings, html.brand-mixscout.light-mode body.page-login { --background: var(--mx-paper); --surface: var(--mx-paper-light); } /* ── Landing page — mirror the TrackScout treatment with MixScout's warm-paper tokens. Previously absent, so the hero wordmark, nav glass, email field, sections and footer were all falling back to un-themed defaults (dark logo on the dark hero, grey nav, see-through input). Touches only .brand-mixscout rules — no effect on TrackScout. ── */ /* Nav logo (dark ink on paper, light mode) + hero logo (paper-light over the dark video in both modes). The mask URL was already swapped above. */ .brand-mixscout.light-mode .landing-nav .logo { background-color: var(--mx-ink); height: 32px; } .brand-mixscout:not(.light-mode) .landing-nav .logo { height: 32px; } .brand-mixscout .hero-logo { background-color: var(--mx-paper-light); height: 96px; } /* Nav — warm-paper glass in light mode. */ .brand-mixscout.light-mode .landing-nav { background: rgba(235, 227, 210, 0.92); border-bottom: 1px solid rgba(60, 55, 51, 0.12); } .brand-mixscout.light-mode .landing-nav-buttons button.secondary { background: transparent; color: var(--mx-ink); border: 1px solid rgba(60, 55, 51, 0.25); } .brand-mixscout.light-mode .landing-nav-buttons button.secondary:hover { background: rgba(60, 55, 51, 0.06); } /* Hero — warm the gradient over the video. */ .brand-mixscout .hero-overlay { background: linear-gradient( 180deg, rgba(60, 55, 51, 0.45) 0%, rgba(60, 55, 51, 0.25) 40%, rgba(60, 55, 51, 0.55) 100% ); } .brand-mixscout .hero-tagline { letter-spacing: -0.015em; } /* CTAs — sage primary; warm-paper email field. */ .brand-mixscout .early-access-btn, .brand-mixscout .pricing-btn, .brand-mixscout .hero-cta { background: var(--mx-sage); color: var(--mx-paper-light); border: none; font-weight: 600; } .brand-mixscout .early-access-btn:hover, .brand-mixscout .pricing-btn:hover, .brand-mixscout .hero-cta:hover { background: var(--mx-sage-hover); } .brand-mixscout .early-access-input { background: rgba(246, 241, 231, 0.95); color: var(--mx-ink); border: 1px solid rgba(60, 55, 51, 0.15); } .brand-mixscout .hero-signin-link { color: rgba(246, 241, 231, 0.85); } .brand-mixscout .hero-signin-link:hover { color: var(--mx-paper-light); } /* Product / security / pricing sections — warm paper in light mode. */ .brand-mixscout.light-mode .product-section, .brand-mixscout.light-mode .security-section { background: var(--mx-paper); color: var(--mx-ink); } .brand-mixscout.light-mode .product-section-alt { background: var(--mx-paper-light); } .brand-mixscout.light-mode .pricing-section { background: var(--mx-paper-light); color: var(--mx-ink); } .brand-mixscout.light-mode .section-title, .brand-mixscout.light-mode .product-section h2, .brand-mixscout.light-mode .product-section h3, .brand-mixscout.light-mode .security-section h2, .brand-mixscout.light-mode .security-section h3, .brand-mixscout.light-mode .pricing-section h2, .brand-mixscout.light-mode .pricing-section h3 { color: var(--mx-ink); } .brand-mixscout.light-mode .product-description, .brand-mixscout.light-mode .product-bullets li, .brand-mixscout.light-mode .security-subtitle, .brand-mixscout.light-mode .security-item p, .brand-mixscout.light-mode .pricing-subtitle, .brand-mixscout.light-mode .pricing-features li { color: var(--mx-ink-2); } .brand-mixscout.light-mode .pricing-card { background: var(--mx-paper); border: 1px solid var(--mx-paper-edge); } .brand-mixscout .pricing-card-popular { border-color: var(--mx-sage); } .brand-mixscout .pricing-badge { background: var(--mx-sage); color: var(--mx-paper-light); } .brand-mixscout .feature-highlight { color: var(--mx-sage); } /* Footer — warm-paper surface in light mode. */ .brand-mixscout.light-mode .site-footer { background: var(--mx-paper-light); color: var(--mx-ink-2); border-top: 1px solid var(--mx-paper-edge); } .brand-mixscout.light-mode .site-footer a { color: var(--mx-ink-2); } .brand-mixscout.light-mode .site-footer a:hover { color: var(--mx-clay); } /* ════════════════════════════════════════════════════════════════════════════ MixScout player — Bono's redesign: rounded coloured track "enclosures". Each track (.waveform-item) carries --track-color inline (set by getTrackColor). Inactive = light pill with an EVEN track-colour outline + track-colour waveform; active = solid track-colour fill, lightened waveform + white label. The outline is even all round — no heavy left slab (the AI tell flagged in the comp). ════════════════════════════════════════════════════════════════════════════ */ .brand-mixscout .waveform-item { border-radius: 11px; border: 1.5px solid color-mix(in srgb, var(--track-color, var(--mx-ink-3)) 58%, transparent); background: color-mix(in srgb, var(--track-color, transparent) 9%, var(--mx-paper-light)); overflow: hidden; } .brand-mixscout .waveform-item.inactive { height: 54px; opacity: 1; } .brand-mixscout .waveform-item.inactive:hover { opacity: 1; background: color-mix(in srgb, var(--track-color, transparent) 15%, var(--mx-paper-light)); } .brand-mixscout .waveform-item.active { height: 132px; background: var(--track-color); border-color: var(--track-color); } /* Label — track-tinted ink on the pill, white on the active fill; no dark chip. */ .brand-mixscout .waveform-label { top: 50%; transform: translateY(-50%); left: 14px; background: transparent; padding: 0; text-shadow: none; color: color-mix(in srgb, var(--track-color, var(--mx-ink)) 72%, #2b2622); font-weight: 700; font-size: 0.84rem; } .brand-mixscout .waveform-item.active .waveform-label { top: 12px; transform: none; background: transparent; color: #fff; font-size: 0.9rem; } .brand-mixscout .waveform-label.editing, .brand-mixscout .waveform-item.active .waveform-label.editing { background: var(--mx-paper-light); color: var(--mx-ink); outline-color: var(--track-color); } /* Fade the waveform under the inactive label so the name reads cleanly (still faintly visible). */ .brand-mixscout .waveform-item.inactive .waveform-track { -webkit-mask: linear-gradient(to right, rgba(0,0,0,0.16) 0, rgba(0,0,0,0.16) 8%, #000 22%); mask: linear-gradient(to right, rgba(0,0,0,0.16) 0, rgba(0,0,0,0.16) 8%, #000 22%); } /* Active waveform: screen-blend so the track-colour waveform reads lighter on the solid fill. */ .brand-mixscout .waveform-item.active canvas { mix-blend-mode: screen; opacity: 0.92; } /* Played region + playhead read as a light wash / line on the solid fill (style.css hardcodes blue). */ .brand-mixscout .waveform-item.active .waveform-played { background: rgba(255, 255, 255, 0.16); } .brand-mixscout .waveform-item.active .waveform-playhead { background: rgba(255, 255, 255, 0.92); box-shadow: none; } /* Controls — readable on each surface: dark-ish on the light pill, white on the active fill. */ .brand-mixscout .waveform-item .waveform-delete, .brand-mixscout .waveform-item .waveform-scissors-btn, .brand-mixscout .waveform-item .waveform-download-btn { background: transparent; color: var(--mx-ink-3); } .brand-mixscout .waveform-item.active .waveform-delete, .brand-mixscout .waveform-item.active .waveform-scissors-btn, .brand-mixscout .waveform-item.active .waveform-download-btn { color: rgba(255, 255, 255, 0.85); } .brand-mixscout .waveform-item .waveform-delete:hover, .brand-mixscout .waveform-item .waveform-scissors-btn:hover, .brand-mixscout .waveform-item .waveform-download-btn:hover { background: rgba(0, 0, 0, 0.12); color: var(--mx-ink); } .brand-mixscout .waveform-item.active .waveform-delete:hover, .brand-mixscout .waveform-item.active .waveform-scissors-btn:hover, .brand-mixscout .waveform-item.active .waveform-download-btn:hover { background: rgba(255, 255, 255, 0.22); color: #fff; } /* Offset (+X.Xs) — bottom-right on the active fill, no dark chip. */ .brand-mixscout .waveform-item.active .offset-indicator { top: auto; bottom: 8px; right: 14px; background: transparent; color: rgba(255, 255, 255, 0.8); } /* ── MixScout transport row — the controls hardcode old greys (rgba(107,114,128) + the grey --accent), so they stayed boxy and unbranded on the cream page. Reskin: circular olive play, cream rounded controls, olive crossfade. ── */ .brand-mixscout #playPause { background: var(--mx-sage); color: #fff; border: none; border-radius: 50%; } .brand-mixscout #playPause:hover { background: var(--mx-sage-hover); color: #fff; } .brand-mixscout #transportLeft button, .brand-mixscout #transportRight button, .brand-mixscout #timeDisplay { background: var(--mx-paper-light); color: var(--mx-ink-2); border: 1px solid var(--mx-paper-edge); border-radius: 9px; } .brand-mixscout #transportLeft button:hover, .brand-mixscout #transportRight button:hover { background: var(--mx-paper); color: var(--mx-ink); } /* The native "enable crossfader" checkbox is hidden. Instead the crossfader shows greyed when OFF (checkbox unchecked) and a click toggles it on/off (mixscout-crossfader.js wires the click + hover hint). The :not(:checked) ~ sibling selector drives the greyed visual with no JS; the hidden checkbox still holds the state and drives the show_crossfader setting. */ .brand-mixscout #crossfaderToggle { display: none; } .brand-mixscout #crossfaderRow { cursor: pointer; } .brand-mixscout #crossfaderToggle:not(:checked) ~ #crossfader { filter: grayscale(1); opacity: 0.45; pointer-events: none; } .brand-mixscout #crossfaderToggle:not(:checked) ~ .crossfader-label { opacity: 0.5; } .brand-mixscout .crossfader-label { color: var(--mx-ink-3); } .brand-mixscout #crossfader { background: linear-gradient(to right, var(--mx-sage) 0%, var(--mx-paper-edge) 100%); } .brand-mixscout #crossfader::-webkit-slider-thumb { border-top-color: var(--mx-ink); border-right-color: var(--mx-ink); } .brand-mixscout #crossfader::-moz-range-thumb { border-top-color: var(--mx-ink); border-right-color: var(--mx-ink); } /* Lay the transport out as one clean row instead of the absolute-positioned scatter: controls grouped on the left (play first), crossfade pushed to the far right so it stops crowding the comment button. */ .brand-mixscout #transportRow { justify-content: center; gap: 8px; flex-wrap: nowrap; /* Don't tie the transport width to the (possibly small) video — it needs room for the controls + crossfade on one line. Overrides the video-size rule. */ max-width: none !important; } .brand-mixscout #transportLeft, .brand-mixscout #transportRight { position: static; inset: auto; gap: 8px; } .brand-mixscout #playPause { order: -1; } .brand-mixscout #crossfaderRow { position: static; inset: auto; margin-left: 22px; max-width: none; } /* Hint cards: drop the heavy 3px sage left-accent (the AI-tell edge) for a clean, even outline — matching the track enclosures. */ .brand-mixscout .hint-card { border: 1px solid color-mix(in srgb, var(--mx-sage) 26%, transparent); border-radius: 9px; } /* Rounds tabs — pill style (Bono comp): active = filled olive pill, inactive = muted text, instead of the underline-tab look. */ .brand-mixscout .rounds-tab-bar { border-bottom: none; gap: 4px; } .brand-mixscout .rounds-tab-btn { border-bottom: none; border-radius: 8px; color: var(--mx-ink-3); padding: 0.4rem 0.95rem; } .brand-mixscout .rounds-tab-btn:hover { color: var(--mx-ink); background: color-mix(in srgb, var(--mx-sage) 12%, transparent); } .brand-mixscout .rounds-tab-btn.active { color: #fff; background: var(--mx-sage); border-bottom-color: transparent; /* Folder-tab: rounded top, flat bottom so the active tab sits ON the ruler (rather than floating as a pill). The flush positioning lands with the ruler. */ border-radius: 8px 8px 0 0; } /* Comment-count badge: sage on inactive tabs, light on the olive active pill. */ .brand-mixscout .rounds-tab-count { background: var(--mx-sage); color: var(--mx-paper-light); } .brand-mixscout .rounds-tab-btn.active .rounds-tab-count { background: rgba(255, 255, 255, 0.28); color: #fff; opacity: 1; } /* Add-round "+" — sage. */ .brand-mixscout .rounds-add-btn { color: var(--mx-sage); } .brand-mixscout .rounds-add-btn:hover { color: var(--mx-sage-hover); } /* ── Timeline ruler (Bono comp) ────────────────────────────────────────── A tick + comment-dot strip spanning the track stack; the flat-bottomed rounds tabs sit on its top edge (folder-on-shelf). Built + driven by mixscout-ruler.js. */ .brand-mixscout .mixscout-ruler { position: relative; height: 34px; margin: 0 0 2px; border-top: 1.5px solid var(--mx-paper-edge); background: linear-gradient(to bottom, color-mix(in srgb, var(--mx-paper-edge) 28%, transparent), transparent 72%); cursor: pointer; user-select: none; -webkit-user-select: none; } .brand-mixscout .mixscout-ruler[hidden] { display: none; } /* Rounds tabs sit flush on the ruler's top edge. */ .brand-mixscout .rounds-tab-bar { align-items: flex-end; margin-bottom: 0; } .brand-mixscout .rounds-tab-btn.active { position: relative; z-index: 1; margin-bottom: -1.5px; /* overlap the shelf border so the tab merges into it */ } /* Interior time tick — a short hairline from the shelf + a small label. */ .brand-mixscout .mxr-tick { position: absolute; top: 0; height: 8px; border-left: 1px solid color-mix(in srgb, var(--mx-paper-edge) 70%, var(--mx-ink-3)); pointer-events: none; } .brand-mixscout .mxr-tick-label { position: absolute; bottom: 2px; left: 0; transform: translateX(-50%); font-size: 0.62rem; letter-spacing: 0.02em; color: var(--mx-ink-3); white-space: nowrap; } /* Comment dot — sage marker; steel for reviewer (foreign) comments. Click to seek. */ .brand-mixscout .mxr-dot { position: absolute; top: 6px; width: 11px; height: 11px; transform: translateX(-50%); border-radius: 50%; background: var(--mx-sage); border: 1.5px solid var(--mx-paper-light); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); cursor: pointer; transition: transform 0.12s ease, background 0.12s ease; z-index: 3; } .brand-mixscout .mxr-dot:hover { transform: translateX(-50%) scale(1.25); background: var(--mx-sage-hover); } .brand-mixscout .mxr-dot-foreign { background: var(--mx-steel); } .brand-mixscout .mxr-dot-foreign:hover { background: var(--mx-steel); } /* Playhead — thin sage line + cap, tracking playback. */ .brand-mixscout .mxr-playhead { position: absolute; top: 0; height: 34px; /* mixscout-ruler.js stretches this to span the track stack */ left: 0; width: 2px; margin-left: -1px; background: var(--mx-sage); pointer-events: none; z-index: 30; /* ride above the track rows the line overlays */ } .brand-mixscout .mxr-playhead::before { content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--mx-sage); } /* The spanning ruler playhead is the single position line — retire the per-track white playheads so the active row doesn't show a second one. */ .brand-mixscout #waveformContainer .waveform-playhead { display: none; } /* Beta badge keeps the sage identity in both modes, tightened so its edges hug the text (footer tweak). */ .brand-filescout .site-footer .beta-badge { background: var(--fs-sage); color: var(--fs-paper-light); font-size: 0.58rem; padding: 0.1rem 0.5rem; line-height: 1; } .brand-mixscout .site-footer .beta-badge { background: var(--mx-sage); color: var(--mx-paper-light); font-size: 0.58rem; padding: 0.1rem 0.5rem; line-height: 1; } /* Footer attribution — "[Product] from [ScoutCo wordmark]", clickable through to scoutco.io. Shown on the ScoutCo product brands (which hide their plain copyright line); the styling itself is brand-agnostic. */ .footer-from-scoutco { display: none; /* shown per ScoutCo product brand below */ align-items: center; gap: 0.1rem; color: var(--muted); text-decoration: none; transition: color 0.15s; } .footer-from-scoutco:hover { color: var(--text); } .footer-scoutco-logo { display: inline-block; height: 2.1rem; /* prominent ScoutCo footer mark (~2× the Beta badge) */ aspect-ratio: 534 / 236; background-color: currentColor; -webkit-mask: url('scoutco-wordmark.svg') no-repeat left center / contain; mask: url('scoutco-wordmark.svg') no-repeat left center / contain; } .brand-filescout .footer-from-scoutco, .brand-mixscout .footer-from-scoutco, .brand-podlook .footer-from-scoutco { display: inline-flex; } .brand-filescout .footer-copy-default, .brand-mixscout .footer-copy-default, .brand-podlook .footer-copy-default { display: none; } /* ════════════════════════════════════════════════════════════════════════════ PodLook brand — cream paper + podcast plum. The review/approval layer for podcast production agencies (demo build; wordmark is a placeholder until a designed mark lands). Mirrors .brand-mixscout / .brand-filescout. Applied on podlook.io (and ?brand=podlook) by brand-init.js. ════════════════════════════════════════════════════════════════════════════ */ .brand-podlook [data-brand-only="trackscout"] { display: none; } .brand-podlook [data-brand-only="earshots"] { display: none; } .brand-podlook { --pl-paper: #ebe3d2; /* cream — page background (unified with the family) */ --pl-paper-light: #f6f1e7; /* lighter cream — cards / surfaces */ --pl-paper-edge: #c9bea5; --pl-ink: #3c3733; /* warm charcoal — text */ --pl-ink-2: #5a534d; --pl-ink-3: #8c8888; /* muted grey */ --pl-plum: #5c4a78; /* primary — podcast plum */ --pl-plum-hover: #6f5b90; --pl-clay: #d18c60; /* clip / accent (shared family token) */ --pl-steel: #4e88a8; /* waveform accent (shared family token) */ } .brand-podlook.light-mode { --primary: var(--pl-plum); --accent: var(--pl-ink-3); --background: var(--pl-paper); --surface: var(--pl-paper-light); --text: var(--pl-ink); --muted: var(--pl-ink-3); --logo-colour: var(--pl-ink); --separator: rgba(60, 55, 51, 0.10); --waveform-bg: var(--pl-paper-edge); --waveform-bg-mid: #d8ccb4; --waveform-active-bg: #cdc1a8; --waveform-active-bg-mid: #ddd0b6; --wave-colour: var(--pl-steel); --progress-colour: var(--pl-plum); --marker-colour: var(--pl-ink-3); --supervisor-accent: var(--pl-steel); } .brand-podlook body, .brand-podlook button, .brand-podlook input { font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } html.brand-podlook .logo, html.brand-podlook .hero-logo { -webkit-mask-image: url('podlook-wordmark.svg'); mask-image: url('podlook-wordmark.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; background-image: none; aspect-ratio: 980 / 370; } html.brand-podlook.light-mode .logo { background-color: var(--pl-ink); } html.brand-podlook:not(.light-mode) .logo { background-color: var(--pl-paper-light); } html.brand-podlook.light-mode body.page-dashboard, html.brand-podlook.light-mode body.page-uploader, html.brand-podlook.light-mode body.page-project, html.brand-podlook.light-mode body.page-player, html.brand-podlook.light-mode body.page-help, html.brand-podlook.light-mode body.page-settings, html.brand-podlook.light-mode body.page-login { --background: var(--pl-paper); --surface: var(--pl-paper-light); } /* ── Landing page — mirror the MixScout treatment with plum CTAs. ── */ .brand-podlook.light-mode .landing-nav .logo { background-color: var(--pl-ink); height: 32px; } .brand-podlook:not(.light-mode) .landing-nav .logo { height: 32px; } .brand-podlook .hero-logo { background-color: var(--pl-paper-light); height: 96px; } .brand-podlook.light-mode .landing-nav { background: rgba(235, 227, 210, 0.92); border-bottom: 1px solid rgba(60, 55, 51, 0.12); } .brand-podlook.light-mode .landing-nav-buttons button.secondary { background: transparent; color: var(--pl-ink); border: 1px solid rgba(60, 55, 51, 0.25); } .brand-podlook.light-mode .landing-nav-buttons button.secondary:hover { background: rgba(60, 55, 51, 0.06); } .brand-podlook .hero-overlay { background: linear-gradient( 180deg, rgba(60, 55, 51, 0.45) 0%, rgba(60, 55, 51, 0.25) 40%, rgba(60, 55, 51, 0.55) 100% ); } .brand-podlook .early-access-btn, .brand-podlook .pricing-btn, .brand-podlook .hero-cta { background: var(--pl-plum); color: var(--pl-paper-light); border: none; font-weight: 600; } .brand-podlook .early-access-btn:hover, .brand-podlook .pricing-btn:hover, .brand-podlook .hero-cta:hover { background: var(--pl-plum-hover); } .brand-podlook .early-access-input { background: rgba(246, 241, 231, 0.95); color: var(--pl-ink); border: 1px solid rgba(60, 55, 51, 0.15); } .brand-podlook .hero-signin-link { color: rgba(246, 241, 231, 0.85); } .brand-podlook .hero-signin-link:hover { color: var(--pl-paper-light); } .brand-podlook.light-mode .product-section, .brand-podlook.light-mode .security-section { background: var(--pl-paper); color: var(--pl-ink); } .brand-podlook.light-mode .product-section-alt { background: var(--pl-paper-light); } .brand-podlook.light-mode .pricing-section { background: var(--pl-paper-light); color: var(--pl-ink); } /* ── Brand-scoped copy: spans marked data-brand-only="podlook" render only under PodLook; elements marked data-brand-hide="podlook" disappear under PodLook. Lets static HTML carry podcast vocabulary (and hide music-only modes) with no JS. ── */ [data-brand-only="podlook"] { display: none; } .brand-podlook [data-brand-only="podlook"] { display: inline; } .brand-podlook [data-brand-hide="podlook"] { display: none !important; } /* ── Clips (cut-sharing) — portrait-aware surfaces. play.js tags 9:16 clip thumbnails with .portrait; only PodLook restyles them, so other brands' cut lists are untouched. ── */ .brand-podlook .cut-thumbnail.portrait { width: 40px; height: 70px; } .brand-podlook .cut-item.active .cut-thumbnail.portrait { width: 56px; height: 100px; } /* ── Episode view: sections hidden by applyPodlookEpisodeView() (uploader- playback.js). Dedicated class so the imperative .hidden toggles elsewhere can't resurrect them. ── */ .podlook-episode-hidden { display: none !important; } /* ── Transcription: sentence-per-line with timestamps (transcript.js renders these only under PodLook). Timestamps are clickable — same seek delegation as words. Lines are the unit the transcript search filters. ── */ .brand-podlook .transcript-line { display: block; margin-bottom: 0.3em; } .brand-podlook .transcript-line.search-miss { display: none; } .brand-podlook .transcript-timestamp { color: var(--muted); font-size: 0.78em; font-variant-numeric: tabular-nums; margin-right: 0.5em; cursor: pointer; user-select: none; } .brand-podlook .transcript-timestamp:hover { color: var(--pl-plum); } .brand-podlook #transcriptContent { line-height: 1.7; } /* Transcript search — a PodLook feature; the input exists in the markup for every brand but only PodLook shows it. */ #transcriptSearch { display: none; } .brand-podlook #transcriptSearch { display: inline-block; background: var(--surface); border: 1px solid var(--separator); color: var(--text); border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.85rem; min-width: 220px; } /* Downloads — PodLook features; markup exists for every brand but only PodLook shows the buttons. */ #transcriptDownloadBtn, #episodeDownloadBtn { display: none; } .brand-podlook #transcriptDownloadBtn, .brand-podlook #episodeDownloadBtn { display: inline-block; } /* ── Episode | Clips tabs (podlook-clips.js). "Add Clips" appears only on the Episode view (body.podlook-episode is set by applyPodlookEpisodeView). .podlook-tab-hidden is the tab switcher's own hide class, kept separate from .hidden so imperative toggles elsewhere never fight it. ── */ #addClipsBtn { display: none; } .podlook-episode #addClipsBtn { display: inline-block; } .podlook-tab-hidden { display: none !important; } .podlook-tabs { display: flex; gap: 0.25rem; margin: 0.5rem 0 1rem; border-bottom: 1px solid var(--separator); } .podlook-tabs.hidden { display: none; } .podlook-tabs button { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.5rem 1.1rem; color: var(--muted); font-weight: 600; font-size: 0.95rem; cursor: pointer; } .podlook-tabs button.active { color: var(--text); border-bottom-color: var(--pl-plum); } .clips-dropzone { border: 2px dashed var(--separator); border-radius: 10px; padding: 2rem; text-align: center; color: var(--muted); cursor: pointer; margin-bottom: 1rem; } .clips-dropzone.drop-hover { border-color: var(--pl-plum); color: var(--text); } /* Blue-box layout: the featured clip with its thumbnails to the right sit on top; the transcription runs full-width underneath (Rich's call — mirrors the Episode tab's video-then-transcription flow). */ .clips-top { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1rem; } .clips-top.hidden { display: none; } .clips-left { display: flex; gap: 0.9rem; align-items: flex-start; } #clipPlayer { height: 52vh; min-height: 300px; aspect-ratio: 9 / 16; border-radius: 10px; background: #000; display: block; } .clip-transcript-pane { width: 100%; max-height: 48vh; overflow-y: auto; } .clip-transcript-pane #transcriptSection { margin-top: 0; } .clips-strip { display: grid; grid-template-columns: repeat(3, 92px); gap: 0.75rem; align-content: start; } .clip-cell { cursor: pointer; min-width: 0; } .clip-cell-frame { width: 100%; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: #000; border: 2px solid transparent; } .clip-cell.active .clip-cell-frame { border-color: var(--pl-plum); } .clip-cell-frame video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .clip-cell-name { font-size: 0.78rem; margin-top: 0.35rem; color: var(--text); word-break: break-word; } .clip-cell-status { font-size: 0.72rem; color: var(--muted); } .clip-add-tile { width: 100%; aspect-ratio: 9 / 16; border: 2px dashed var(--separator); border-radius: 8px; background: none; color: var(--muted); font-size: 2rem; cursor: pointer; } .clip-add-tile:hover { border-color: var(--pl-plum); color: var(--pl-plum); } /* ── Transcription progress (estimate) — inline bar in the status line. ── */ .transcribe-bar { display: inline-block; vertical-align: middle; width: 140px; height: 6px; border-radius: 3px; background: var(--separator, rgba(60, 55, 51, 0.15)); overflow: hidden; margin: 0 0.4rem; } .transcribe-bar-fill { display: block; height: 100%; background: var(--pl-plum, #5c4a78); border-radius: 3px; transition: width 0.5s ease; } .transcribe-bar.indeterminate .transcribe-bar-fill { width: 40%; animation: transcribe-pulse 1.4s ease-in-out infinite; } @keyframes transcribe-pulse { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } .transcribe-bar-label { color: var(--muted); font-size: 0.8em; } /* ── Comments: scoped per episode/clip. Transcript words covered by a ranged comment get a plum wash; the floating selection button follows a word-range selection. ── */ .brand-podlook .transcript-word.has-comment { background: rgba(92, 74, 120, 0.16); border-radius: 3px; cursor: pointer; } #transcriptSelectionBtn { position: fixed; z-index: 10000; transform: translateX(-50%); background: var(--pl-plum, #5c4a78); color: #f6f1e7; border: none; border-radius: 8px; padding: 0.4rem 0.8rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } #transcriptSelectionBtn.hidden { display: none; } #clipCommentBtn { margin-top: 0.5rem; width: 100%; } .clip-cell-comments { font-size: 0.72rem; color: var(--pl-plum); margin-top: 0.15rem; min-height: 1em; } /* Only primaries initiate transcription: viewers (play page) never see the Transcribe button under PodLook — they receive transcripts, not bills. */ html.brand-podlook body.page-player #transcribeBtn { display: none !important; } /* Translation is not part of the PodLook surface for now. */ .brand-podlook #toggleTranslateBtn, .brand-podlook #translateLangSelect, .brand-podlook #translateStatus { display: none !important; }