/* 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 { /* Rich's chosen palette (baked from a Brand Studio export): orchid primary on a cool porcelain paper with a teal accent. */ --pl-paper: #eef1f2; /* porcelain — page background */ --pl-paper-light: #f8fafa; /* lighter porcelain — cards / surfaces */ --pl-paper-edge: #ccd4d6; --pl-ink: #1d2a2e; /* cool charcoal — text */ --pl-ink-2: #48585d; --pl-ink-3: #84929a; /* muted grey */ --pl-plum: #a473bf; /* primary — orchid */ --pl-plum-hover: #9e53c1; --pl-clay: #b3541e; /* clip / accent */ --pl-steel: #0f6d6a; /* waveform / teal accent */ --pl-card: #10181c; /* dark player card (video + transport) */ } .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); } /* Figtree per the approved text-first mockups. The face is loaded by brand-init.js under this brand only, so other brands' pages don't pay for the extra font download. (Selects too — the playback-rate control sat in the system face without it.) */ .brand-podlook body, .brand-podlook button, .brand-podlook input, .brand-podlook select { font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* Drawn as an IMAGE, not a CSS mask. Masks are rasterised more crudely than images — the wordmark's curves showed visible aliasing in the header (Rich). Rendering the same file through the image pipeline is smooth at any size and DPI; dark mode inverts the single-colour mark. */ html.brand-podlook .logo, html.brand-podlook .hero-logo { -webkit-mask-image: none; mask-image: none; background-image: none; background-color: transparent !important; content: url('podlook-wordmark.svg'); object-fit: contain; object-position: left center; aspect-ratio: 1145.494 / 244.872; /* logo 2.5 wordmark, BIG export */ } html.brand-podlook:not(.light-mode) .logo { filter: invert(1); } html.brand-podlook .hero-logo { filter: invert(1); } /* always on the dark hero */ html.brand-podlook.light-mode .logo { filter: none; } /* Header/nav wordmark: 30px per the mockup spec (base .logo is 52px, sized for the wider Earshots mark). Scoped to .logo so the big hero-logo on the landing page is untouched. */ html.brand-podlook #headerBar .logo, html.brand-podlook .landing-nav .logo { height: 30px; } 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 { height: 96px; /* The wordmark's intrinsic width at 96px is ~449px — wider than a phone. Capping width lets aspect-ratio shrink the height on narrow screens; desktop is untouched. Without this, mobile browsers zoom the whole landing out to fit (shrink-to-fit), rendering everything ~15% small. */ max-width: 86vw; } /* Glass nav tinted from the palette (not a hardcoded cream) so it tracks the Brand Studio palette instead of stranding on a colour change. */ .brand-podlook.light-mode .landing-nav { background: color-mix(in srgb, var(--pl-paper) 92%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--pl-ink) 12%, transparent); } .brand-podlook.light-mode .landing-nav-buttons button.secondary { background: transparent; color: var(--pl-ink); border: 1px solid color-mix(in srgb, var(--pl-ink) 25%, transparent); } .brand-podlook.light-mode .landing-nav-buttons button.secondary:hover { background: color-mix(in srgb, var(--pl-ink) 6%, transparent); } .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: color-mix(in srgb, var(--pl-paper-light) 96%, transparent); color: var(--pl-ink); border: 1px solid color-mix(in srgb, var(--pl-ink) 18%, transparent); } /* The base placeholder is faint white (for the dark glass input this override replaces) — unreadable on the light field. */ .brand-podlook .early-access-input::placeholder { color: var(--pl-ink-3, #84929a); } .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; } /* The rule above is written for inline copy spans. Elements that are whole blocks (e.g. the "Episode + Clips" card in the New Project modal) must keep their own display or they collapse to inline. */ .brand-podlook .new-project-option[data-brand-only="podlook"] { display: grid; } .brand-podlook .account-menu-dropdown a[data-brand-only="podlook"] { display: block; } /* ── Podlook landing page ───────────────────────────────────────────────── Photo hero (in place of the Earshots video) plus Podlook-only "how it works" + features bands. The whole block is id-gated so specificity wins over source order without !important. ── */ .brand-podlook .hero-video { display: none; } .brand-podlook .hero { background: #241d2e url("podlook-hero.jpg?v=2") center 45% / cover no-repeat; } #podlookLanding { display: none; } .brand-podlook #podlookLanding { display: block; } .brand-podlook .pl-steps-section, .brand-podlook .pl-features-section { padding: 4.5rem 2rem; text-align: center; background: var(--pl-paper); color: var(--pl-ink); } .brand-podlook .pl-features-section { background: var(--pl-paper-light); } .brand-podlook .pl-steps, .brand-podlook .pl-features { max-width: 1080px; margin: 2.6rem auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; text-align: left; } .brand-podlook .pl-step-num { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--pl-plum); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 0.85rem; } .brand-podlook .pl-step h3 { margin: 0 0 0.4rem; font-size: 1.15rem; color: var(--pl-ink); } .brand-podlook .pl-step p { margin: 0; color: var(--pl-ink-2); line-height: 1.55; } .brand-podlook .pl-feature { background: #fffdf8; border: 1px solid var(--pl-paper-edge); border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 12px rgba(60, 55, 51, 0.05); } .brand-podlook .pl-feature-ic { display: inline-flex; align-items: center; justify-content: center; width: 2.7rem; height: 2.7rem; border-radius: 10px; background: rgba(92, 74, 120, 0.1); font-size: 1.35rem; margin-bottom: 0.85rem; } .brand-podlook .pl-feature h3 { margin: 0 0 0.35rem; font-size: 1.05rem; color: var(--pl-ink); } .brand-podlook .pl-feature p { margin: 0; color: var(--pl-ink-2); font-size: 0.95rem; line-height: 1.5; } .brand-podlook .pl-mid-cta { margin-top: 3rem; } @media (max-width: 760px) { .brand-podlook .pl-steps, .brand-podlook .pl-features { grid-template-columns: 1fr; } } /* ── 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(--pl-plum); font-weight: 700; font-size: 0.78em; font-variant-numeric: tabular-nums; margin-right: 0.7em; cursor: pointer; user-select: none; } .brand-podlook .transcript-timestamp:hover { color: var(--pl-plum-hover); } .brand-podlook #transcriptContent { line-height: 1.65; } .brand-podlook #transcriptContent .transcript-line { padding: 5px 0; } /* ── Podlook player: one video card = video + dark transport bar ────────── Mirrors the .pr-video-card / .pr-transport spec: the video, progress and transport read as a single dark rounded card so the transcript can align to its bottom edge. */ .brand-podlook #videoContainer { border-radius: 14px 14px 0 0; overflow: hidden; margin: 0; } .brand-podlook #controls, .brand-podlook #transportRow { background: var(--pl-card); margin: 0; /* One flowing row of controls. ScoutCo pins the left and right groups absolutely either side of a centred play button, which means anything added to the transport lands UNDER one of those groups — the speed control overlapped fullscreen, then the comment button. Letting the whole cluster flow (as the narrow layout already did) makes the order honest: restart, back, play, speed, comment, time, fullscreen. */ display: flex; align-items: center; justify-content: center; gap: 0.45rem; flex-wrap: wrap; position: relative; } .brand-podlook #transportRow > #transportLeft, .brand-podlook #transportRow > #transportRight { position: static; left: auto; right: auto; gap: 0.45rem; } /* Progress spans the full card width so it lines up with the video edges and the transport bar (no horizontal inset). */ .brand-podlook #controls { padding: 12px 0 6px; } .brand-podlook #player > #controls > #progressContainer { width: 100%; } .brand-podlook #transportRow { padding: 4px 14px 12px; border-radius: 0 0 14px 14px; min-height: 0; } /* Podlook uses a fixed-size card + a fullscreen button (moved into the transport) — drop the size menu and the whole "Video options" overflow, which also carries the alternate video-version picker. */ .brand-podlook #videoSizeSelect { display: none; } .brand-podlook #videoControls > .overflow-btn, .brand-podlook #videoControls > .overflow-dropdown { display: none !important; } /* Export progress (Download audio). Two phases: an indeterminate sweep while the Lambda extracts (it reports no percentage), then a real percentage as the finished file streams down. */ .pl-export-progress { width: 100%; display: flex; align-items: center; gap: 0.6rem; margin-top: 0.45rem; } .pl-export-progress.hidden { display: none; } .pl-export-track { flex: 1 1 auto; height: 6px; border-radius: 3px; background: rgba(92, 74, 120, 0.15); overflow: hidden; } .pl-export-fill { height: 100%; width: 0%; background: var(--pl-plum); border-radius: 3px; transition: width 0.25s ease; } .pl-export-fill.indeterminate { width: 35%; transition: none; animation: pl-export-sweep 1.3s ease-in-out infinite; } @keyframes pl-export-sweep { 0% { margin-left: -35%; } 100% { margin-left: 100%; } } .pl-export-label { font-size: 0.75rem; color: var(--pl-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; } /* Progress: plum played-fill. The track pseudo-elements are transparent so the input's own background — painted as a plum→track gradient by podlook-progress.js as the media plays — shows through. */ .brand-podlook #progress { height: 6px; border-radius: 3px; background: rgba(246, 241, 231, 0.22); } .brand-podlook #progress::-webkit-slider-runnable-track, .brand-podlook #progress::-moz-range-track { background: transparent; } /* Transport controls sit on the dark bar: light icons, plum play. */ .brand-podlook #transportRow button { background: transparent; border: 1px solid rgba(246, 241, 231, 0.22); color: #f6f1e7; width: 38px; height: 38px; border-radius: 9px; } .brand-podlook #transportRow button:hover { background: rgba(246, 241, 231, 0.12); color: #fff; } .brand-podlook #transportRow #playPause { background: var(--pl-plum); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; } .brand-podlook #transportRow #playPause:hover { background: var(--pl-plum-hover); color: #fff; } /* Fullscreen moves into the transport (replacing the old overflow menu). */ .brand-podlook #transportRow #videoFullscreenBtn { margin-left: 0.35rem; } .brand-podlook #transportRow #videoFullscreenBtn .ts-icon { width: 18px; height: 18px; } .brand-podlook #timeDisplay { color: #cfc7bb; font-variant-numeric: tabular-nums; background: transparent; border: none; padding-left: 0.4rem; } /* The playhead chevron centres on its position (translate -50%), so at 0:00 half of it poked out past the card's left edge. Nudge it right so it starts inside the card. */ .brand-podlook #progressPlayhead { margin-left: 5px; } /* ── Transcript + AI summary editing (owner's pencil) ───────────────────── Transcript: the pencil lives in the selection bar — select words, edit them in place, tick saves. Only the selected (contenteditable) words get the outline. Summary: the pencil sits in the icon cluster beside copy/download and toggles every text block. */ .brand-podlook .transcript-editing .transcript-word[contenteditable='true'], .brand-podlook .summary-editing [data-sumpath] { outline: 1px dashed rgba(164, 115, 191, 0.5); outline-offset: 1px; border-radius: 3px; cursor: text; } .brand-podlook .transcript-editing .transcript-word[contenteditable='true']:focus, .brand-podlook .summary-editing [data-sumpath]:focus { outline: 2px solid var(--pl-plum, #a473bf); background: rgba(164, 115, 191, 0.08); } .brand-podlook #transcriptSelectionBar button[data-act='edit'].pl-editing-active, .brand-podlook #summaryEditBtn.pl-editing-active { background: var(--pl-plum, #a473bf); border-color: var(--pl-plum, #a473bf); color: #fff; } /* While an edit is open, the bar is its save/cancel UI: comment, suggest, and the duration counter step aside. */ .brand-podlook #transcriptSelectionBar.editing button[data-act='comment'], .brand-podlook #transcriptSelectionBar.editing button[data-act='suggest'], .brand-podlook #transcriptSelectionBar.editing .ts-sel-duration { display: none; } /* ── Audio-only episodes ────────────────────────────────────────────────── There are no clips in audio-only — hide every mention. No video either, so Download video and the ScoutCo multi-track header (with its click-to-select instruction line) go too. */ .brand-podlook #player.audio-only-mode #addClipsBtn, .brand-podlook #player.audio-only-mode #podlookTabs, .brand-podlook #player.audio-only-mode #plViewerTabs, .brand-podlook #player.audio-only-mode #episodeDownloadBtn, .brand-podlook #player.audio-only-mode > #waveformHeader { display: none !important; } /* One episode, one waveform: no track-name label chip (the filename already named the project), and no per-track download/remove chrome. */ .brand-podlook #player.audio-only-mode #waveformContainer .waveform-label, .brand-podlook #player.audio-only-mode #waveformContainer .waveform-download-btn, .brand-podlook #player.audio-only-mode #waveformContainer .waveform-delete { display: none !important; } /* Karaoke captions: the current sentence rides above the waveform, the spoken word lit in plum (colour only — a weight change made the line twitch). The box is a FIXED height so the waveform below never moves; long sentences step the type size down (k-fit classes) until they fit. */ .brand-podlook #player.audio-only-mode .pl-karaoke { height: 9.4rem; padding: 6px 18px; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; font-weight: 500; color: var(--pl-ink-3); } .brand-podlook .pl-karaoke .pl-k-text { font-size: 1.5rem; line-height: 1.45; } .brand-podlook .pl-karaoke.k-fit-1 .pl-k-text { font-size: 1.26rem; } .brand-podlook .pl-karaoke.k-fit-2 .pl-k-text { font-size: 1.06rem; } .brand-podlook .pl-karaoke.k-fit-3 .pl-k-text { font-size: 0.9rem; } /* Glow decay: a word lights up instantly, then fades back over ~1s once the next word takes over — a comet tail through the sentence rather than an on/off flash. */ .brand-podlook .pl-karaoke .pl-k-word { cursor: pointer; transition: color 0.9s ease; } .brand-podlook .pl-karaoke .pl-k-word:hover { color: var(--pl-ink-2); transition-duration: 0.12s; } .brand-podlook .pl-karaoke .pl-k-word.active { color: var(--pl-plum, #a473bf); transition-duration: 0.05s; } /* Same treatment for the transcript panel's follow-along highlight: plum tint that decays, and no weight change (bolding made the line twitch). */ .brand-podlook .transcript-word { transition: background-color 0.9s ease; border-radius: 3px; } .brand-podlook .transcript-word-active { background: rgba(164, 115, 191, 0.3); font-weight: inherit; transition-duration: 0.05s; } /* The waveform is decoration, not an instrument: consistent speech makes it near-uniform, so it slims to a strip exactly as wide as the scrubber below (no side padding), loses its own playhead, and keeps tight vertical margins. The single scrubber underneath does the seeking. */ .brand-podlook #player.audio-only-mode #waveformContainer .waveform-item { height: 56px !important; margin: 4px 0 0 !important; border-radius: 0; } .brand-podlook #player.audio-only-mode #waveformContainer .waveform-playhead, .brand-podlook #player.audio-only-mode #waveformContainer .waveform-played { display: none !important; } /* ── Podlook text-first episode layout (pl2-*) ──────────────────────────── Ported from the approved mockups on rich/mockups (mockup-textfirst.html, mockup-textfirst-summary.html). The transcript/summary document is the primary surface on the LEFT (Descript weight); the video is the reference window on the RIGHT at ~2/3 its old size, sticky, with the chapter timeline and transport under it. Comments are Google-Docs margin cards. podlook-textfirst.js builds the containers; everything here hangs off body.pl2-on / #player.pl2 so the other project modes are untouched. */ /* Full-bleed header bar; its CONTENTS live in the same 1360px container as the page, so they share the page's vertical axes at every window width. */ .brand-podlook #headerBar.pl2-head { display: block; padding: 10px 0; height: auto; } .brand-podlook .pl2-hwrap { max-width: 1360px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* the drawn glyph sits 8px inside the icon's box; align ink, not boxes */ .brand-podlook .pl2-hwrap #authButtons { margin-right: -8px; } .brand-podlook body.pl2-on .tagline { display: none; } .brand-podlook body.pl2-on #pageLabel { display: none; } /* Page container on the same 1360px grid as the header contents. */ .brand-podlook body.pl2-on #playerMain { max-width: 1360px; margin: 0 auto; padding: 0 24px 48px; width: 100%; box-sizing: border-box; } /* #playerMain clips its overflow (a flex guard) — but a clipping ancestor disables position:sticky for EVERYTHING inside it, and the text-first layout leans on sticky (video column, tab bands). min-width:0 already prevents the flex overflow it was guarding against. */ .brand-podlook body.pl2-on #playerMain { overflow: visible; } /* style.css gives bare
a top margin, padding and a card look — the pl2 page IS the surface, so strip the wrapper's own chrome. */ .brand-podlook body.pl2-on #player { margin: 0; padding: 0; background: transparent; border: none; box-shadow: none; max-width: none; } /* The old sliding comments panel is replaced by margin cards + the Comments sub-tab; its floating pull-tab goes with it. */ .brand-podlook body.pl2-on #comments { display: none !important; } /* ── The two columns ─────────────────────────────────────────────────────── */ @media (min-width: 980px) { .brand-podlook #player.pl2 { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 0 28px; align-items: start; } .brand-podlook #player.pl2 > #playerHeader { grid-column: 1 / -1; grid-row: 1; } .brand-podlook #player.pl2 > .pl2-doccol { grid-column: 1; grid-row: 2; min-width: 0; } /* The video column is sticky as one unit: card + filebar scroll with you while the document runs long. */ .brand-podlook #player.pl2 > .pl2-side { grid-column: 2; grid-row: 2; position: sticky; top: 18px; align-self: start; min-width: 0; } /* Suggested views are adopted into the video column (podlook-textfirst.js) so their cards sit under the player like the clips filmstrip — they are no longer children of the grid. */ .brand-podlook #player.pl2 > #bufferGate { grid-column: 1 / -1; } } /* Clips tab: the layout mirrors Episode — transcript document on the left, fused with the tab band; the clip player + thumbnail strip take the video column. The episode card, filebar and Episode-tab filmstrip stand down. */ .brand-podlook #player.pl2[data-pl-tab="clips"] .pl2-video, .brand-podlook #player.pl2[data-pl-tab="clips"] .pl2-filebar, .brand-podlook #player.pl2[data-pl-tab="clips"] .pl2-side > #plEpisodeClips { display: none; } /* The clip views' old transcript pane sits empty under this layout. */ .brand-podlook .pl2-side .clip-transcript-pane { display: none; } .brand-podlook .pl2-side #clipsView .clips-top, .brand-podlook .pl2-side #plViewerClips .clips-top { display: flex; flex-direction: column; gap: 14px; margin: 0; } .brand-podlook .pl2-side #clipsView .clips-top.hidden { display: none; } .brand-podlook .pl2-side .clips-left { width: 100%; } /* Featured clip, its actions and the thumbnail row all share the column's left edge. */ .brand-podlook .pl2-side .clip-player-pane { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .brand-podlook .pl2-side #clipPlayer, .brand-podlook .pl2-side #plViewerClipPlayer { max-width: 100%; } .brand-podlook .pl2-side .pl-clip-actions { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; } .brand-podlook .pl2-side .pl-approve-all { margin: 1rem 0 0; } /* Clips-tab thumbnails run side by side, wrapping across the column — pinned to a wrapping flex row so no inherited grid sizing can stack them. NOT the suggested strip, which shares the .clips-strip class but is a grid of much larger cards: this rule was making it a flex row of 92px cells, which is why it sat four across and ignored every attempt to set its columns. */ .brand-podlook .pl2-side .clips-strip:not(.pl-suggested-strip) { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; justify-content: flex-start; } .brand-podlook .pl2-side .clips-strip:not(.pl-suggested-strip) .clip-cell, .brand-podlook .pl2-side .clips-strip:not(.pl-suggested-strip) .clip-add-tile { width: 92px; flex: 0 0 92px; } .brand-podlook .pl2-side .clips-dropzone { margin: 0; padding: 1rem; font-size: 0.85rem; } /* ── Title bar ───────────────────────────────────────────────────────────── */ .brand-podlook #player.pl2 > #playerHeader { padding: 18px 0 10px; margin: 0; border: none; background: transparent; } .brand-podlook .pl2 #plFolderBreadcrumb { font-size: 0.78rem; color: var(--pl-ink-3); letter-spacing: 0.02em; } .brand-podlook .pl2 #plFolderBreadcrumb a { color: var(--pl-ink-2); font-weight: 500; } .brand-podlook .pl2 #playerTitle { font-size: 1.35rem; font-weight: 700; color: var(--pl-ink); margin: 2px 0 0; } /* ── Section tabs on their own darker band ──────────────────────────────── The active tab shares the panel's background and the panel has no top border, so the two meet with no seam and no shoulder. */ .brand-podlook .pl2-doccol > .podlook-tabs { display: flex; gap: 4px; /* Pinned while the document scrolls; the sub-tab row pins just beneath. */ position: sticky; top: 0; z-index: 6; background: color-mix(in srgb, var(--pl-paper), var(--pl-ink) 10%); border-radius: 14px 14px 0 0; border-bottom: none; padding: 8px 12px 0; margin: 0; } .brand-podlook .pl2-doccol > .podlook-tabs.hidden { display: none; } .brand-podlook .pl2-doccol > .podlook-tabs button { font: inherit; font-size: 0.98rem; font-weight: 600; color: var(--pl-ink-2); padding: 10px 16px 11px; cursor: pointer; border: none; border-radius: 9px 9px 0 0; background: transparent; } .brand-podlook .pl2-doccol > .podlook-tabs button:hover:not(.active) { color: var(--pl-ink); } .brand-podlook .pl2-doccol > .podlook-tabs button.active { background: var(--pl-paper-light); color: var(--pl-ink); font-weight: 700; border-bottom: none; } .brand-podlook .pl2-doccol > .podlook-tabs .pl-tab-count { font-weight: 500; font-size: 0.74rem; background: rgba(29, 42, 46, 0.07); border-radius: 9px; padding: 1px 7px; margin-left: 6px; color: var(--pl-ink-2); } /* ── The document panel ──────────────────────────────────────────────────── */ .brand-podlook .pl2-doccol > #transcriptSection { margin: 0; padding: 0; background: var(--pl-paper-light); border: 1px solid rgba(29, 42, 46, 0.08); border-radius: 14px; min-height: 640px; box-shadow: none; overflow: visible; } /* Tabs visible → the panel fuses into the band above it. */ .brand-podlook .pl2-doccol > .podlook-tabs:not(.hidden) ~ #transcriptSection { border-top: none; border-radius: 0 0 14px 14px; } /* The old collapsible "Transcription" header row: the sub-tab row is the panel's header now. */ .brand-podlook .pl2-doccol > #transcriptSection > #transcriptHeader { display: none; } .brand-podlook .pl2-doccol > #transcriptSection > #transcriptBody { padding: 0; display: block; } /* Sub-tab row: Transcript · AI Summary · Comments · triangle · search · download · re-transcribe, all on one line. Active state is bold only. */ .brand-podlook .pl2-doccol #tsTabs { display: flex; align-items: center; /* Four tabs plus three tools stopped fitting when Expletive check joined the row, and the search box was squeezed to a stub. Wrapping puts the tools on a second line instead of crushing them (Rich, 2 Sep). */ flex-wrap: wrap; row-gap: 6px; gap: 4px; padding: 12px 22px 8px 16px; margin: 0; border: none; /* Pinned beneath the section-tab band (or the viewport top when the band is hidden), so Transcript/Summary/Comments + search stay reachable however deep into a 90-minute transcript you are. */ position: sticky; top: 0; z-index: 5; background: var(--pl-paper-light); border-radius: 0 0 10px 10px; } .brand-podlook .pl2-doccol:has(> .podlook-tabs:not(.hidden)) #tsTabs { top: 47px; } .brand-podlook .pl2-doccol #tsTabs .ts-tab { border: none; background: none; font: inherit; font-size: 0.83rem; font-weight: 600; color: var(--pl-ink-3); padding: 6px 12px; border-radius: 8px; cursor: pointer; } .brand-podlook .pl2-doccol #tsTabs .ts-tab.active { background: none; color: var(--pl-ink); font-weight: 700; } .brand-podlook .pl2-doccol #tsTabs .ts-tab .n { font-size: 0.72rem; margin-left: 5px; color: var(--pl-plum); font-weight: 700; } .brand-podlook .pl2-doccol #tsTabs .ts-tab .n:empty { display: none; } /* Disclosure triangle beside the Comments tab: down = cards shown, right = hidden. */ .brand-podlook .pl2-doccol #tsTabs .pl2-eye { width: 18px; height: 22px; margin-left: -14px; padding: 0; border: none; background: none; color: var(--pl-ink-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; } .brand-podlook .pl2-doccol #tsTabs .pl2-eye svg { width: 10px; height: 10px; transition: transform 0.15s ease; } .brand-podlook .pl2-doccol #tsTabs .pl2-eye:hover { color: var(--pl-ink); } .brand-podlook .pl2-doccol #tsTabs .pl2-eye.on svg { transform: rotate(-90deg); } .brand-podlook .pl2-doccol #tsTabs #transcriptSearch { margin-left: auto; font-size: 0.8rem; color: var(--pl-ink); border: 1px solid rgba(29, 42, 46, 0.12); border-radius: 8px; padding: 5px 12px; background: #fff; width: 150px; /* A floor rather than 0: without one the search shrank to an unusable stub instead of wrapping to the second line. */ min-width: 130px; flex: 0 1 150px; height: auto; } .brand-podlook .pl2-doccol #tsTabs #transcriptSearch::placeholder { color: var(--pl-ink-3); } .brand-podlook .pl2-doccol #tsTabs #transcriptDownloadBtn, .brand-podlook .pl2-doccol #tsTabs #retranscribeBtn { border: 1px solid rgba(29, 42, 46, 0.12); background: #fff; color: var(--pl-ink-2); width: 30px; height: 30px; padding: 0; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; } .brand-podlook .pl2-doccol #tsTabs #transcriptDownloadBtn .ts-icon, .brand-podlook .pl2-doccol #tsTabs #retranscribeBtn .ts-icon { width: 15px; height: 15px; } /* Icon-only download — the button's text label is for its old home in the controls row and overflows the 30px square here. */ .brand-podlook .pl2-doccol #tsTabs #transcriptDownloadBtn .ts-btn-label { display: none; } /* Remaining controls (Transcribe button, progress status, selection bar) live in a row under the tabs that only exists when something in it is showing — idle, it collapses to nothing. */ .brand-podlook .pl2-doccol #transcriptControls { padding: 0 22px 0 28px; margin: 0; } .brand-podlook .pl2-doccol #transcriptControls:has(#transcriptSelectionBar.armed), .brand-podlook .pl2-doccol #transcriptControls:has(#transcribeBtn:not(.hidden):not(.ts-tab-hidden)), .brand-podlook .pl2-doccol #transcriptControls:has(#transcribeStatus:not(.hidden):not(.ts-tab-hidden)) { padding-top: 8px; padding-bottom: 2px; } /* The selection bar is a docked row of disarmed grey buttons the rest of the time — under the text-first layout it appears only once a passage is actually selected (the mockup shows no idle tool row). */ .brand-podlook .pl2-doccol #transcriptSelectionBar:not(.armed) { display: none; } .brand-podlook .pl2-doccol #transcriptSelectionBar { margin-left: 0; } /* ── Reading surface + margin gutter (the Google Docs arrangement) ───────── */ .brand-podlook .pl2-body { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 0 18px; padding: 18px 20px 30px 28px; position: relative; } .brand-podlook #transcriptSection.nocards .pl2-body { grid-template-columns: minmax(0, 1fr) 0; gap: 0; } .brand-podlook #transcriptSection.nocards .pl2-margin, .brand-podlook #transcriptSection.nocards .pl2-links { display: none; } /* The 232px gutter exists to hold margin cards level with the passages they belong to. The Comments and Expletive check panes are flat lists with no margin cards at all, so on those the gutter is dead space — and on a laptop it was eating three quarters of the column, wrapping the text one word per line (Rich, 2 Sep). Give it back while a list pane is showing. */ .brand-podlook .pl2-body:has(> .pl2-textwrap > .pl2-comments-pane:not(.ts-tab-hidden)), .brand-podlook .pl2-body:has(> .pl2-textwrap > .pl2-exp-pane:not(.ts-tab-hidden)) { grid-template-columns: minmax(0, 1fr) 0; gap: 0; } .brand-podlook .pl2-body:has(> .pl2-textwrap > .pl2-comments-pane:not(.ts-tab-hidden)) .pl2-margin, .brand-podlook .pl2-body:has(> .pl2-textwrap > .pl2-exp-pane:not(.ts-tab-hidden)) .pl2-margin, .brand-podlook .pl2-body:has(> .pl2-textwrap > .pl2-comments-pane:not(.ts-tab-hidden)) .pl2-links, .brand-podlook .pl2-body:has(> .pl2-textwrap > .pl2-exp-pane:not(.ts-tab-hidden)) .pl2-links { display: none; } .brand-podlook .pl2-textwrap { min-width: 0; } .brand-podlook .pl2-textwrap #transcriptContent { font-size: 1.05rem; line-height: 1.75; color: var(--pl-ink); padding: 0 34px 0 0; position: relative; max-height: none; border: none; background: none; border-radius: 0; overflow: visible; } /* Sentences flow inline inside their paragraph; the per-sentence timestamps give way to the paragraph gutter. */ /* The gutter holds a timestamp AND a name now. 40px was right for "0:00" and shattered "Romesh Ranganathan" into four pieces (Rich, 2 Sep). */ .brand-podlook .pl2-para { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; margin: 0 0 6px; } .brand-podlook .pl2-para .pl2-meta { font-size: 0.72rem; line-height: 1.5; color: var(--pl-ink-3); /* Sit the timestamp level with the FIRST LINE of its own paragraph. The old 24px pushed it a line and a half down, so it read as belonging to the text above it. Body is 1.05rem/1.75 against this 0.72rem/1.5, and the difference in half-leading is what is being cancelled here — matching the baselines instead leaves the label visibly low, which is the complaint. */ padding-top: 2px; } .brand-podlook .pl2-para .pl2-meta .transcript-timestamp { color: inherit; font-weight: 500; font-size: inherit; margin: 0; cursor: pointer; } .brand-podlook .pl2-para .pl2-meta .transcript-timestamp:hover { color: var(--pl-plum); } /* Who is talking, under the timestamp in the gutter. An unnamed speaker reads as "Speaker 1" and sits back; a named one is the stronger of the two, because once the names are in they are what you scan the column for. */ .brand-podlook .pl2-para .pl2-meta .pl2-speaker { display: block; margin-top: 2px; padding: 0; border: none; background: none; font: inherit; font-size: 0.72rem; line-height: 1.4; color: var(--pl-ink-3); text-align: left; max-width: 100%; /* Wrap between words, never inside one. break-word is what turned Romesh Ranganathan into "Romes / h / Rangan / athan"; a long single name can overflow its column rather than be shredded. */ overflow-wrap: normal; word-break: normal; hyphens: none; } .brand-podlook .pl2-para .pl2-meta .pl2-speaker.named { color: var(--pl-ink-2); font-weight: 600; } /* Only a producer gets a button here; a reviewer gets a span. */ .brand-podlook .pl2-para .pl2-meta button.pl2-speaker { cursor: pointer; } .brand-podlook .pl2-para .pl2-meta button.pl2-speaker:hover { color: var(--pl-plum); } .brand-podlook .pl2-para .pl2-meta .pl2-speaker-edit { display: block; margin-top: 2px; width: 100%; max-width: 140px; font: inherit; font-size: 0.72rem; padding: 2px 5px; color: var(--pl-ink); background: #fff; border: 1px solid var(--pl-plum); border-radius: 5px; } .brand-podlook .pl2-para .pl2-meta .pl2-speaker-edit:focus { outline: none; } /* Suggested names, above the transcript. Offered, not applied. */ .brand-podlook .pl2-spk-offer { display: flex; flex-wrap: wrap; align-items: center; /* Tight enough that two suggestions sit on one line at the usual column width, rather than each taking a row of its own (Rich, 2 Sep). */ gap: 6px; margin: 0 0 16px; padding: 9px 11px; background: rgba(164, 115, 191, 0.07); border: 1px solid rgba(164, 115, 191, 0.22); border-radius: 9px; } /* Sits in the body grid, spanning the text column and the card gutter. */ .brand-podlook .pl2-spk-offer.pl2-spk-wide { grid-column: 1 / -1; margin-bottom: 18px; } /* Its own line. Sharing one with the suggestions cost about 20px and pushed the second onto a row of its own, which is the thing being fixed. */ .brand-podlook .pl2-spk-lead { flex: 1 0 100%; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pl-ink-3); font-weight: 700; margin-bottom: 2px; } /* Borderless now: the row around it draws the pill. */ .brand-podlook .pl2-spk-suggest { font: inherit; font-size: 0.76rem; padding: 4px 4px 4px 11px; border: none; border-radius: 20px 0 0 20px; background: none; color: var(--pl-ink-2); cursor: pointer; white-space: nowrap; } /* The ROW is the pill, so the edit control sits inside the outline with the name rather than floating off its right edge. */ .brand-podlook .pl2-spk-row { display: inline-flex; align-items: center; gap: 1px; border: 1px solid rgba(164, 115, 191, 0.4); background: #fff; border-radius: 20px; padding-right: 3px; } .brand-podlook .pl2-spk-row:hover { border-color: var(--pl-plum); } .brand-podlook .pl2-spk-fix { display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--pl-ink-3); cursor: pointer; padding: 3px 5px; border-radius: 50%; flex: none; } .brand-podlook .pl2-spk-fix svg, .brand-podlook .pl2-spk-fix .ts-icon { width: 12px; height: 12px; display: block; } .brand-podlook .pl2-spk-fix:hover { color: var(--pl-plum); background: rgba(164, 115, 191, 0.14); } .brand-podlook .pl2-spk-fix[hidden] { display: none; } .brand-podlook .pl2-spk-input { font: inherit; font-size: 0.78rem; padding: 4px 9px; max-width: 190px; color: var(--pl-ink); background: #fff; border: 1px solid var(--pl-plum); border-radius: 20px; } .brand-podlook .pl2-spk-input:focus { outline: none; } .brand-podlook .pl2-spk-suggest em { font-style: normal; color: var(--pl-ink-3); } .brand-podlook .pl2-spk-suggest strong { color: var(--pl-ink); } .brand-podlook .pl2-spk-suggest:hover { border-color: var(--pl-plum); background: rgba(164, 115, 191, 0.08); } .brand-podlook .pl2-spk-dismiss { font: inherit; font-size: 0.76rem; border: none; background: none; color: var(--pl-ink-3); cursor: pointer; padding: 4px 6px; } .brand-podlook .pl2-spk-dismiss:hover { color: var(--pl-ink-2); } .brand-podlook .pl2-para-text { margin: 0; } .brand-podlook .pl2-para-text .transcript-line { display: inline; margin: 0; padding: 0; } .brand-podlook .pl2-para-text .transcript-line.search-miss { display: none; } .brand-podlook .pl2-para-text .transcript-timestamp { display: none; } /* A search that empties a paragraph hides its gutter too. */ .brand-podlook .pl2-para:not(:has(.transcript-line:not(.search-miss))) { display: none; } .brand-podlook .pl2-chapter { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; margin: 18px 0 10px; align-items: center; } .brand-podlook .pl2-chapter .t { font-size: 0.72rem; color: var(--pl-plum); font-weight: 700; margin: 0; cursor: pointer; } .brand-podlook .pl2-chapter .l { font-size: 0.8rem; font-weight: 700; color: var(--pl-ink-2); letter-spacing: 0.03em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; } .brand-podlook .pl2-chapter .l::after { content: ''; flex: 1; height: 1px; background: rgba(29, 42, 46, 0.12); } /* Commented passages: plum wash + underline (the mockup's .pl2-hl). The transcript is one span per word, so consecutive highlighted words pull left over the inter-word space to read as ONE continuous highlight. */ .brand-podlook .pl2 .transcript-word.has-comment { background: rgba(164, 115, 191, 0.16); border-bottom: 2px solid var(--pl-plum); border-radius: 3px 3px 0 0; padding: 0 1px; cursor: pointer; } .brand-podlook .pl2 .transcript-word.has-comment + .transcript-word.has-comment { margin-left: -0.34em; padding-left: 0.34em; border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Karaoke current word: colour only — a weight change makes the line twitch (long-standing rule), so the mockup's .pl2-now is applied as colour. */ .brand-podlook .pl2 .transcript-word { transition: background-color 0.9s ease, color 0.9s ease; } .brand-podlook .pl2 .transcript-word-active { background: transparent; color: var(--pl-plum-hover); transition-duration: 0.05s; } /* ── AI Summary pane, restyled to the mockup's document weight ───────────── */ .brand-podlook .pl2-textwrap #summaryContent { font-size: 1.05rem; line-height: 1.7; color: var(--pl-ink); padding-right: 34px; max-height: none; } .brand-podlook .pl2-textwrap .summary-overview { font-size: 1.08rem; line-height: 1.7; color: var(--pl-ink-2); margin: 2px 0 22px; } .brand-podlook .pl2-textwrap .summary-chapter { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; margin: 0 0 20px; padding: 0; border: none; border-radius: 10px; } .brand-podlook .pl2-textwrap .summary-chapter .summary-ts { font-size: 0.72rem; color: var(--pl-ink-3); font-weight: 700; padding-top: 4px; margin: 0; } .brand-podlook .pl2-textwrap .summary-chapter-title { font-size: 1.02rem; font-weight: 700; color: var(--pl-ink); } .brand-podlook .pl2-textwrap .summary-chapter-desc { font-size: 0.94rem; line-height: 1.6; color: var(--pl-ink-2); } .brand-podlook .pl2-textwrap .summary-quote { font-size: 0.94rem; line-height: 1.55; color: var(--pl-ink-3); font-style: italic; margin-top: 6px; } .brand-podlook .pl2-textwrap .summary-quote::before { content: '\201C'; color: var(--pl-plum); font-weight: 700; margin-right: 2px; } .brand-podlook .pl2-textwrap .summary-quote::after { content: '\201D'; color: var(--pl-plum); font-weight: 700; margin-left: 2px; } /* ── Margin cards ────────────────────────────────────────────────────────── */ .brand-podlook .pl2-margin { position: relative; } .brand-podlook .pl2-card { position: absolute; left: 0; right: 0; background: #fff; border: 1px solid rgba(29, 42, 46, 0.12); border-radius: 10px; padding: 10px 30px 10px 12px; box-shadow: 0 2px 10px rgba(29, 42, 46, 0.06); font-size: 0.8rem; line-height: 1.45; color: var(--pl-ink); } /* Personal "I've dealt with this" tick. Owner-only bookkeeping: checking it does not resolve or notify, it just tracks their own pass. */ .brand-podlook .pl2-check { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border: 1.5px solid rgba(29, 42, 46, 0.3); border-radius: 5px; cursor: pointer; background: #fff; } .brand-podlook .pl2-card.done .pl2-check { background: var(--pl-plum); border-color: var(--pl-plum); } .brand-podlook .pl2-card.done .pl2-check::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .brand-podlook .pl2-card.done { opacity: 0.62; } .brand-podlook .pl2-card .who { font-weight: 700; color: var(--pl-ink); font-size: 0.78rem; } .brand-podlook .pl2-card .when { color: var(--pl-ink-3); font-size: 0.7rem; margin-left: 6px; font-weight: 500; } .brand-podlook .pl2-card .msg { color: var(--pl-ink-2); margin-top: 3px; } .brand-podlook .pl2-card .reply { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(29, 42, 46, 0.08); } .brand-podlook .pl2-card .act { margin-top: 8px; font-size: 0.74rem; font-weight: 600; color: var(--pl-plum); } .brand-podlook .pl2-card .act span { cursor: pointer; } .brand-podlook .pl2-card .act span + span { margin-left: 12px; } .brand-podlook .pl2-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .brand-podlook .pl2-links path { fill: none; stroke: rgba(164, 115, 191, 0.5); stroke-width: 1.5; } /* The Comments sub-tab: the same cards as a flat, in-flow list. */ .brand-podlook .pl2-comments-pane { padding-right: 34px; } .brand-podlook .pl2-comments-pane .pl2-listcard { position: relative; margin: 0 0 12px; } .brand-podlook .pl2-comments-pane .pl2-quote { font-size: 0.76rem; color: var(--pl-ink-3); font-style: italic; margin: 2px 0 3px; } .brand-podlook .pl2-comments-pane .pl2-empty { color: var(--pl-ink-3); font-size: 0.9rem; } /* ── Expletive Check ─────────────────────────────────────────────────────── The tab and its switch travel together, so the checkbox reads as belonging to that tab and not to the search box after it. */ .brand-podlook .pl2-doccol #tsTabs .pl2-expctl { display: inline-flex; align-items: center; gap: 2px; flex: none; } .brand-podlook .pl2-doccol #tsTabs .pl2-expctl.pl2-exp-hidden { display: none; } .brand-podlook .pl2-doccol #tsTabs .pl2-exptab { padding-right: 5px; } /* The share switch is secondary to the tab it sits beside, so it stays quiet until it is either wanted or on. Full strength on hover and focus keeps it findable; the hit area is padded out past the 12px box so it is still easy to hit with a mouse. */ .brand-podlook .pl2-doccol #tsTabs .pl2-expbox { width: 12px; height: 12px; margin: 0 4px 0 0; accent-color: var(--pl-ink-3); opacity: 0.45; cursor: pointer; flex: none; transition: opacity 0.15s ease; } .brand-podlook .pl2-doccol #tsTabs .pl2-expbox:hover, .brand-podlook .pl2-doccol #tsTabs .pl2-expbox:focus-visible { opacity: 1; } .brand-podlook .pl2-doccol #tsTabs .pl2-expbox:checked { opacity: 1; accent-color: var(--pl-plum); } .brand-podlook .pl2-exp-pane { padding-right: 34px; } .brand-podlook .pl2-exp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--pl-paper-edge); margin-bottom: 14px; } .brand-podlook .pl2-exp-head strong { font-size: 0.95rem; color: var(--pl-ink); } .brand-podlook .pl2-exp-head > span { font-size: 0.82rem; color: var(--pl-ink-2); } .brand-podlook .pl2-exp-note { flex: 1 0 100%; margin: 2px 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--pl-ink-3); } /* Rating filters. Each reader picks their own; the counts are of the whole transcript, so turning a level on shows what it will cost you. */ .brand-podlook .pl2-exp-filters { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; } .brand-podlook .pl2-exp-filters-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pl-ink-3); } .brand-podlook .pl2-exp-filter { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--pl-ink-2); text-transform: capitalize; cursor: pointer; user-select: none; } .brand-podlook .pl2-exp-filter input { width: 13px; height: 13px; margin: 0; cursor: pointer; accent-color: var(--pl-ink-3); } .brand-podlook .pl2-exp-filter.strong input:checked { accent-color: #8f3f13; } .brand-podlook .pl2-exp-filter.moderate input:checked { accent-color: var(--pl-steel); } .brand-podlook .pl2-exp-filter.mild input:checked { accent-color: var(--pl-ink-3); } .brand-podlook .pl2-exp-filter:has(input:checked) { color: var(--pl-ink); font-weight: 600; } /* Says what the quiet checkbox beside the tab does. */ .brand-podlook .pl2-exp-share { flex: 1 0 100%; margin: 4px 0 0; font-size: 0.76rem; line-height: 1.5; color: var(--pl-ink-2); } .brand-podlook .pl2-exp-row { display: flex; gap: 12px; padding: 10px 0 12px; border-bottom: 1px solid rgba(204, 212, 214, 0.55); } .brand-podlook .pl2-exp-row:last-child { border-bottom: none; } .brand-podlook .pl2-exp-time { flex: none; border: none; background: none; padding: 1px 0 0; font: inherit; font-size: 0.78rem; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--pl-plum); cursor: pointer; min-width: 44px; text-align: left; } .brand-podlook .pl2-exp-time:hover { text-decoration: underline; } .brand-podlook .pl2-exp-body { min-width: 0; } .brand-podlook .pl2-exp-tags { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .brand-podlook .pl2-exp-level { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; } .brand-podlook .pl2-exp-level.strong { background: rgba(179, 84, 30, 0.14); color: #8f3f13; } .brand-podlook .pl2-exp-level.moderate { background: rgba(15, 109, 106, 0.13); color: #0b5250; } .brand-podlook .pl2-exp-level.mild { background: rgba(29, 42, 46, 0.08); color: var(--pl-ink-2); } .brand-podlook .pl2-exp-word { font-size: 0.8rem; font-weight: 600; color: var(--pl-ink-2); } .brand-podlook .pl2-exp-sentence { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--pl-ink); } .brand-podlook .pl2-exp-mark { background: rgba(179, 84, 30, 0.18); color: inherit; border-radius: 2px; padding: 0 1px; font-weight: 600; } .brand-podlook .pl2-exp-hint { margin: 4px 0 0; font-size: 0.76rem; color: var(--pl-ink-3); font-style: italic; } .brand-podlook .pl2-del { position: absolute; bottom: 8px; right: 10px; border: none; background: none; color: var(--pl-ink-3); font-size: 0.95rem; cursor: pointer; padding: 0 3px; } .brand-podlook .pl2-del:hover { color: var(--danger, #c0392b); } /* Narrow screens: a tapped highlight floats its card over the text. */ .brand-podlook .pl2-float { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; box-shadow: 0 8px 30px rgba(16, 24, 28, 0.25); } /* ── Video column ────────────────────────────────────────────────────────── */ .brand-podlook .pl2-video { background: var(--pl-card); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 24px rgba(16, 24, 28, 0.18); } .brand-podlook .pl2-video #videoContainer { border-radius: 0; margin: 0; width: 100%; } .brand-podlook .pl2-video #videoContainer > #video, .brand-podlook .pl2-video #videoContainer video { width: 100% !important; max-width: 100% !important; height: auto; display: block; } /* Timeline: chapter gaps as on YouTube, diamonds for comments, white playhead. The #progress input stays on top as the (invisible) seek surface — podlook-textfirst.js paints the segment fills. */ .brand-podlook .pl2-video #controls { background: var(--pl-card); margin: 0; padding: 15px 14px 0; display: block; width: 100%; max-width: none !important; } .brand-podlook .pl2-video #progressContainer { position: relative; display: block; /* the base layout flexes it, collapsing the segs strip */ width: 100%; height: 5px; margin: 0; } .brand-podlook .pl2-segs { display: flex; gap: 3px; width: 100%; height: 5px; align-items: stretch; pointer-events: none; } .brand-podlook .pl2-seg { position: relative; background: rgba(248, 250, 250, 0.22); border-radius: 3px; overflow: hidden; flex-grow: 1; } .brand-podlook .pl2-seg .fill { position: absolute; inset: 0; right: auto; background: var(--pl-plum); } .brand-podlook .pl2-video #progress { position: absolute; inset: -6px 0; width: 100%; height: 17px; margin: 0; opacity: 0; cursor: pointer; z-index: 3; } .brand-podlook .pl2-video #progressPlayhead { position: absolute; top: -14px; width: 2.5px; height: 13px; margin-left: 0; background: #fff; border-radius: 2px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); pointer-events: none; z-index: 2; /* the base playhead is a chevron drawn via mask-image — this one is a plain white bar */ -webkit-mask-image: none; mask-image: none; transform: translateX(-50%); } /* Comment markers become the mockup's clay diamonds above the bar. */ .brand-podlook .pl2-video #commentMarkers { position: absolute; inset: 0; pointer-events: none; } .brand-podlook .pl2-video #commentMarkers .comment-marker, .brand-podlook .pl2-video #commentMarkers .comment-marker-foreign { position: absolute; top: -7px; width: 7px; height: 7px; background: var(--pl-clay); transform: rotate(45deg) translateX(-50%); border-radius: 1px; border: none; cursor: pointer; pointer-events: auto; z-index: 4; } /* The chapter dot markers are replaced by the segment gaps. */ .brand-podlook .pl2-video #chapterMarkers { display: none; } .brand-podlook .pl2-video #progressBuffer { display: none; } /* Transport inside the dark card: borderless icons, 50px plum play. */ .brand-podlook .pl2-video #transportRow { background: var(--pl-card); display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 11px 12px 13px; margin: 0; width: 100%; max-width: none !important; min-height: 0; border-radius: 0 0 14px 14px; color: #e8ecec; flex-wrap: nowrap; } .brand-podlook .pl2-video #transportRow button { background: none; border: none; color: #cfd6d6; cursor: pointer; width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; } .brand-podlook .pl2-video #transportRow button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .brand-podlook .pl2-video #transportRow #playPause, .brand-podlook .pl2-video #transportRow #playPause:hover { background: var(--pl-plum); border: none; color: #fff; width: 50px; height: 50px; border-radius: 50%; } .brand-podlook .pl2-video #transportRow #playPause:hover { background: var(--pl-plum-hover); } .brand-podlook .pl2-video #transportRow #transportLeft, .brand-podlook .pl2-video #transportRow #transportRight { position: static; display: inline-flex; align-items: center; gap: 6px; left: auto; right: auto; } .brand-podlook .pl2-video #transportRow #transportRight { flex: 1 1 auto; min-width: 0; } .brand-podlook .pl2-video #transportRow #timeDisplay { margin-left: auto; font-size: 0.85rem; color: #b9c2c2; font-variant-numeric: tabular-nums; background: transparent; border: none; padding: 0; white-space: nowrap; } .brand-podlook .pl2-video #transportRow .playback-rate { margin: 0; background: none; color: #cfd6d6; border: none; border-radius: 10px; font-size: 0.9rem; font-weight: 700; padding: 0 9px; height: 42px; cursor: pointer; appearance: none; -webkit-appearance: none; text-align: center; width: auto; } .brand-podlook .pl2-video #transportRow .playback-rate:hover { background: rgba(255, 255, 255, 0.08); } .brand-podlook .pl2-video #transportRow #videoFullscreenBtn { margin-left: 0; } .brand-podlook .pl2-video #transportRow #videoFullscreenBtn .ts-icon { width: 18px; height: 18px; } /* ── Audio-only: the waveform takes the video's slot ───────────────────── The rest of the page is porcelain, and a black video card around a waveform jarred (Rich: 'blue on black looks horrible') — the whole card goes paper when the episode is audio-only. */ .brand-podlook #player.pl2.audio-only-mode .pl2-video { background: var(--pl-paper-light); border: 1px solid var(--pl-paper-edge); box-shadow: none; } .brand-podlook #player.pl2.audio-only-mode .pl2-video #waveformContainer { margin: 0; padding: 0; background: transparent; border: none; } .brand-podlook #player.pl2.audio-only-mode .pl2-video #waveformContainer .waveform-item { background: transparent !important; box-shadow: none; } .brand-podlook #player.pl2.audio-only-mode .pl2-video #controls, .brand-podlook #player.pl2.audio-only-mode .pl2-video #transportRow { background: var(--pl-paper-light); } .brand-podlook #player.pl2.audio-only-mode .pl2-video #transportRow button { background: none; color: var(--pl-ink-2); } .brand-podlook #player.pl2.audio-only-mode .pl2-video #transportRow button:hover { background: rgba(29, 42, 46, 0.08); color: var(--pl-ink); } .brand-podlook #player.pl2.audio-only-mode .pl2-video #transportRow #playPause, .brand-podlook #player.pl2.audio-only-mode .pl2-video #transportRow #playPause:hover { background: var(--pl-plum); color: #fff; } .brand-podlook #player.pl2.audio-only-mode .pl2-video #transportRow #timeDisplay { color: var(--pl-ink-2); } .brand-podlook #player.pl2.audio-only-mode .pl2-video #transportRow .playback-rate { color: var(--pl-ink-2); } .brand-podlook #player.pl2.audio-only-mode .pl2-seg { background: rgba(29, 42, 46, 0.12); } .brand-podlook #player.pl2.audio-only-mode .pl2-video #progressPlayhead { background: var(--pl-ink); box-shadow: none; } /* The karaoke card scales down inside the 440px column. */ .brand-podlook #player.pl2.audio-only-mode .pl-karaoke { height: 7rem; } .brand-podlook #player.pl2.audio-only-mode .pl-karaoke .pl-k-text { font-size: 1.1rem; } .brand-podlook #player.pl2.audio-only-mode .pl-karaoke.k-fit-1 .pl-k-text { font-size: 0.98rem; } .brand-podlook #player.pl2.audio-only-mode .pl-karaoke.k-fit-2 .pl-k-text { font-size: 0.88rem; } .brand-podlook #player.pl2.audio-only-mode .pl-karaoke.k-fit-3 .pl-k-text { font-size: 0.8rem; } /* A video episode never shows the waveform inside the card. */ .brand-podlook #player.pl2:not(.audio-only-mode) .pl2-video #waveformContainer { display: none; } /* ── Clips filmstrip inside the video column (viewer page) ─────────────── Stacked under the player, above the action buttons. The strip's wide-page sizing (4 × 175px, capped 760px) gives way to four slim tiles that share the 440px column. */ .brand-podlook .pl2-side > #plEpisodeClips { margin-top: 14px; } .brand-podlook .pl2-side .pl-episode-clips-head { margin: 0 2px 8px; } .brand-podlook .pl2-side .pl-episode-clips-head h3 { font-size: 0.92rem; } .brand-podlook .pl2-side .pl-episode-clips-head .muted { font-size: 0.76rem; } .brand-podlook .pl2-side .pl-episode-clips-strip { grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: none; } .brand-podlook .pl2-side .pl-ep-clip-name { padding: 6px 8px 8px; font-size: 0.74rem; } .brand-podlook .pl2-side .pl-ep-clip-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Filebar under the card ──────────────────────────────────────────────── */ .brand-podlook .pl2-filebar { padding: 12px 4px 0; } .brand-podlook .pl2-filebar .pl-videobar, .brand-podlook .pl2-filebar #plViewerEpisodeActions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0; margin: 0; } .brand-podlook .pl2-filebar #videoFilename, .brand-podlook .pl2-filebar .pl-videobar #videoFilename { flex: 1 1 100%; font-size: 0.74rem; color: var(--pl-ink-3); padding: 0 10px 8px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .brand-podlook .pl2-filebar .pl-videobar-btns { margin-left: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .brand-podlook .pl2-filebar .pl-videobar-btns button, .brand-podlook .pl2-filebar #plViewerEpisodeActions button { font: inherit; font-size: 0.8rem; font-weight: 600; border-radius: 9px; padding: 8px 12px; cursor: pointer; border: 1px solid rgba(29, 42, 46, 0.16); background: var(--pl-paper-light); color: var(--pl-ink-2); display: inline-flex; align-items: center; gap: 6px; } /* Approve is the primary action, so it gets its own full-width row rather than being squeezed to third-of-a-column and wrapping its label. */ .brand-podlook .pl2-filebar #plViewerEpisodeActions { flex-wrap: wrap; } .brand-podlook .pl2-filebar #plViewerEpisodeActions button.secondary { flex: 1 1 0; justify-content: center; } .brand-podlook .pl2-filebar #plViewerEpisodeActions button.approve-btn { flex: 1 0 100%; white-space: nowrap; justify-content: center; background: var(--pl-plum); border-color: var(--pl-plum); color: #fff; } /* The owner's share bar drops its card chrome and lines up under the filebar. */ .brand-podlook .pl2-filebar #share { background: transparent; border: none; box-shadow: none; padding: 10px 4px 0; margin: 0; } /* ── Sub-980: single column, video docks above the document ─────────────── */ @media (max-width: 979.98px) { .brand-podlook #player.pl2 { display: flex; flex-direction: column; } .brand-podlook body.pl2-on { overflow-x: hidden; } /* The 440px-column transport doesn't fit a phone card — let it wrap. */ .brand-podlook .pl2-video #transportRow { flex-wrap: wrap; row-gap: 2px; } .brand-podlook .pl2-video #transportRow #timeDisplay { font-size: 0.78rem; } /* Section tabs scroll sideways rather than clipping. */ .brand-podlook .pl2-doccol > .podlook-tabs { overflow-x: auto; scrollbar-width: none; } .brand-podlook .pl2-doccol > .podlook-tabs button { white-space: nowrap; } .brand-podlook .pl2-doccol #tsTabs { flex-wrap: wrap; row-gap: 6px; } .brand-podlook .pl2-doccol #tsTabs .ts-tab { white-space: nowrap; } .brand-podlook #player.pl2 > * { order: 5; min-width: 0; } .brand-podlook #player.pl2 > #playerHeader { order: 1; } .brand-podlook #player.pl2 > .pl2-side { order: 2; position: static; width: 100%; } .brand-podlook #player.pl2 > .pl2-doccol { order: 3; margin-top: 1rem; width: 100%; } /* Margin cards collapse to tap targets (the highlights themselves); podlook-textfirst.js floats the card on tap. */ .brand-podlook #player.pl2 .pl2-body { grid-template-columns: minmax(0, 1fr) 0; gap: 0; } .brand-podlook #player.pl2 .pl2-margin, .brand-podlook #player.pl2 .pl2-links { display: none; } .brand-podlook #player.pl2 .pl2-textwrap #transcriptContent { padding-right: 0; } .brand-podlook .pl2-doccol > #transcriptSection { min-height: 0; } /* A 112px name column is a quarter of a phone. Narrow it and let the name take the room it needs across two lines. */ .brand-podlook .pl2-para { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; } } /* ── Scroll affordance on the transcript and summary panes ─────────────── macOS hides scrollbars until you scroll, so a full panel reads as if the text simply ends. Two honest signals, no JS: a soft fade at the bottom edge that vanishes when you reach the end (the gradient scrolls WITH the content via background-attachment: local, so it only shows while there is more below), and a slim always-visible scrollbar. */ .brand-podlook #transcriptContent, .brand-podlook #summaryContent { background-image: linear-gradient(to top, var(--pl-paper-light) 12%, rgba(248, 250, 250, 0)), linear-gradient(to top, rgba(29, 42, 46, 0.13), rgba(29, 42, 46, 0)); background-position: bottom center, bottom center; background-repeat: no-repeat; background-size: 100% 46px, 100% 14px; background-attachment: local, scroll; scrollbar-width: thin; scrollbar-color: rgba(29, 42, 46, 0.28) transparent; } .brand-podlook #transcriptContent::-webkit-scrollbar, .brand-podlook #summaryContent::-webkit-scrollbar { width: 9px; } .brand-podlook #transcriptContent::-webkit-scrollbar-thumb, .brand-podlook #summaryContent::-webkit-scrollbar-thumb { background: rgba(29, 42, 46, 0.26); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; } .brand-podlook #transcriptContent::-webkit-scrollbar-thumb:hover, .brand-podlook #summaryContent::-webkit-scrollbar-thumb:hover { background: rgba(29, 42, 46, 0.42); background-clip: padding-box; } /* One-click sign-off for a whole clip set. */ .brand-podlook .pl-approve-all { display: block; margin: 1rem auto 0; padding: 0.55rem 1.4rem; font-size: 0.9rem; } /* ── Downloads: one menu, not three buttons ────────────────────────────── The trigger carries .overflow-btn because that's what the global menu handler binds to, but that class is styled for the dark "⋯" chip on the transport — here it has to read as an ordinary labelled button beside Upload Clips. */ .brand-podlook .pl-videobar-btns .pl-download-menu { position: relative; } /* Upload / Download / Create link are one row of equals: same height, same radius, same type. Only the colour separates the primary action. */ .brand-podlook .pl-videobar-btns > button, .brand-podlook .pl-videobar-btns .pl-download-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: normal; line-height: 1.2; min-height: 34px; padding: 8px 12px; border-radius: 9px; } .brand-podlook .pl-videobar-btns .ts-icon { width: 14px; height: 14px; flex: none; } /* #addClipsBtn's visibility is set by id (.podlook-episode #addClipsBtn), which outranks the rule above — so it needs the display restating, or the icon and label sit unaligned in an inline-block box. */ .brand-podlook .podlook-episode .pl-videobar-btns #addClipsBtn { display: inline-flex; } /* Create link is the primary action and keeps its plum. The filebar rule dresses everything in this cluster as secondary — which was right when the cluster held only secondary buttons, and wrong the moment the CTA moved in beside them. */ .brand-podlook .pl2-filebar .pl-videobar-btns #shareBtn { background: var(--pl-plum); border: 1px solid var(--pl-plum); color: #fff; } .brand-podlook .pl2-filebar .pl-videobar-btns #shareBtn:hover { background: var(--pl-plum-hover); border-color: var(--pl-plum-hover); color: #fff; } .brand-podlook .pl-download-trigger { border: 1px solid rgba(29, 42, 46, 0.16); background: var(--pl-paper-light); color: var(--pl-ink-2); padding-right: 6px; /* the caret block carries its own */ } .brand-podlook .pl-download-trigger:hover { background: rgba(29, 42, 46, 0.06); border-color: rgba(29, 42, 46, 0.28); color: var(--pl-ink); } /* A divider before the chevron: the split-button shape is the clearest way to say "this reveals options" — a bare caret is easy to miss, and an ellipsis would wrongly imply a dialog. */ .brand-podlook .pl-download-trigger .pl-caret { display: inline-flex; align-items: center; align-self: stretch; margin-left: 2px; padding: 0 5px 0 7px; border-left: 1px solid rgba(29, 42, 46, 0.16); } .brand-podlook .pl-download-trigger .pl-caret-icon { width: 12px; height: 12px; transition: transform 0.15s ease; } /* and it turns over while the menu is open, so the button reflects state */ .brand-podlook .pl-download-trigger[aria-expanded="true"] .pl-caret-icon { transform: rotate(180deg); } .brand-podlook .pl-download-trigger[aria-expanded="true"] { background: rgba(29, 42, 46, 0.06); border-color: rgba(29, 42, 46, 0.28); color: var(--pl-ink); } .brand-podlook .pl-download-menu .overflow-dropdown { right: auto; left: 0; min-width: 190px; } /* Ids listed because .brand-podlook #episodeDownloadBtn sets display: inline-block, and an id beats the class selector a menu item would otherwise be styled by. (Audio-only still hides the video item — .podlook-episode-hidden carries its own !important.) */ .brand-podlook .pl-download-menu .overflow-dropdown button, .brand-podlook .pl-download-menu .overflow-dropdown #episodeDownloadBtn, .brand-podlook .pl-download-menu .overflow-dropdown #episodeAudioBtn { display: flex; align-items: center; gap: 8px; width: 100%; /* These carry .secondary, whose brand styling would otherwise keep the pill border and make the menu look like three stacked buttons. */ background: none; border: none; border-radius: 0; box-shadow: none; text-align: left; justify-content: flex-start; padding: 0.5rem 0.75rem; color: var(--pl-ink); } .brand-podlook .pl-download-menu .overflow-dropdown button:hover { background: rgba(29, 42, 46, 0.07); } .brand-podlook .pl-download-menu .overflow-dropdown .ts-icon { width: 14px; height: 14px; flex: none; } /* ── Clip scout (AI clip suggestions, primary only) ────────────────────── The length is picked before the button, because each press is a paid call over the whole transcript. */ .brand-podlook .pl-scout-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; } .brand-podlook .pl-scout-bar.hidden { display: none; } .brand-podlook .pl-scout-len { display: inline-flex; border: 1px solid var(--pl-paper-edge); border-radius: 9px; overflow: hidden; } .brand-podlook .pl-scout-preset { font: inherit; font-size: 0.78rem; font-weight: 600; border: none; background: var(--pl-paper-light); color: var(--pl-ink-2); padding: 6px 12px; cursor: pointer; } .brand-podlook .pl-scout-preset + .pl-scout-preset { border-left: 1px solid var(--pl-paper-edge); } .brand-podlook .pl-scout-preset:hover { background: rgba(29, 42, 46, 0.06); } .brand-podlook .pl-scout-preset.active { background: var(--pl-plum); color: #fff; } /* Sits in the gap beside the length buttons and takes what's left of the row, so the message replaces itself in place instead of pushing the cards down as it changes. */ .brand-podlook .pl-scout-status { flex: 1 1 0; min-width: 0; font-size: 0.78rem; color: var(--pl-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-podlook .pl-scout-status.is-error { color: var(--danger, #c0392b); white-space: normal; /* an error is worth the extra lines */ } /* Same for a "none usable — " line: the reason is the message. */ .brand-podlook .pl-scout-status.pl-scout-status-wrap { white-space: normal; flex: 1 1 100%; margin-top: 2px; } /* The scout bar rides in the video column now that the cards do. */ .brand-podlook .pl2-side .pl-scout-bar { gap: 8px; margin: 14px 0 10px; } .brand-podlook .pl2-side #clipScoutBtn { flex: none; font-size: 0.8rem; padding: 6px 12px; } .brand-podlook .pl2-side .pl-scout-preset { padding: 6px 9px; font-size: 0.74rem; } /* Two up in the video column. The base .clips-strip packs 92px columns, which fits four across and squeezes the text to one word a line. Targeted by id so nothing in the cascade can outrank it — a class-level rule here was losing to the 92px packing. */ .brand-podlook .pl2-side #suggestedList, .brand-podlook .pl2-side #plViewerSuggestedStrip { display: grid !important; /* the clips-tab rule above had made it flex */ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; max-height: none; margin-top: 0; } .brand-podlook .pl2-side #suggestedList .clip-cell, .brand-podlook .pl2-side #plViewerSuggestedStrip .clip-cell { width: auto; } /* At this width the three icon buttons share a row and Keep takes its own, full width — the primary action shouldn't be the one that gets cut off. */ .brand-podlook .pl2-side .pl-suggested-card-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .brand-podlook .pl2-side .pl-suggested-card-actions .pl-icon-btn { flex: 0 0 auto; } .brand-podlook .pl2-side .pl-scout-keep { flex: 1 0 100%; order: 2; text-align: center; justify-content: center; padding: 5px 8px; } .brand-podlook .pl2-side .pl-suggested-cell .clip-cell-name { font-size: 0.74rem; line-height: 1.3; } /* Duration is the first thing you judge a proposal by. */ .brand-podlook .pl-suggested-dur { font-size: 0.72rem; color: var(--pl-ink-3); font-variant-numeric: tabular-nums; margin-top: 2px; } /* A proposal is visibly the machine's until the primary keeps it. */ .brand-podlook .pl-ai-badge { position: absolute; top: 6px; left: 6px; z-index: 2; background: var(--pl-plum); color: #fff; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 5px; } .brand-podlook .pl-suggested-cell.pl-ai-proposed .clip-cell-frame { /* the base frame is unpositioned, so the badge needs an anchor */ position: relative; outline: 2px dashed rgba(164, 115, 191, 0.55); outline-offset: -2px; } .brand-podlook .pl-scout-keep { font-size: 0.74rem; font-weight: 600; padding: 4px 10px; border-radius: 7px; background: var(--pl-plum); border-color: var(--pl-plum); color: #fff; } .brand-podlook .pl-scout-keep:hover { background: var(--pl-plum-hover); } /* Whole chapter rows are jump targets, not just their timecodes. */ .brand-podlook .summary-seekable { cursor: pointer; border-radius: 8px; } .brand-podlook .summary-seekable:hover { background: rgba(164, 115, 191, 0.09); } .brand-podlook .summary-editing .summary-seekable { cursor: text; } .brand-podlook .summary-editing .summary-seekable:hover { background: transparent; } /* Playback speed: a quiet control in the transport. Producers review hours of talk, so speed is a primary tool, not a hidden preference. */ /* Sits at the end of the transport's right cluster, after fullscreen. An absolutely-positioned version overlapped that cluster (which is itself absolutely placed around the centre), so it simply flows last instead. */ .brand-podlook #transportRow .playback-rate { margin-left: 0.4rem; background: rgba(255, 255, 255, 0.08); color: #cfc7bb; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 7px; font-size: 0.78rem; padding: 3px 6px; margin-right: 0.35rem; cursor: pointer; } .brand-podlook #player.audio-only-mode #transportRow .playback-rate { background: rgba(29, 42, 46, 0.06); color: var(--pl-ink); border-color: var(--pl-paper-edge); } .brand-podlook .playback-rate.hidden { display: none; } /* ── Transcription waiting room ─────────────────────────────────────────── The empty transcript area during a transcription: the real speed and estimate up top, then feature tips cycling every few seconds. */ .brand-podlook .pl-tips { margin: 0.9rem 0 0; padding: 16px 18px 18px; border: 1px solid var(--pl-paper-edge); border-radius: 12px; background: var(--pl-paper-light); } .brand-podlook .pl-tips.hidden { display: none; } .brand-podlook .pl-tips-eta { font-size: 0.92rem; line-height: 1.5; color: var(--pl-ink); font-weight: 600; } .brand-podlook .pl-tips-label { margin-top: 1rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--pl-ink-3); } .brand-podlook .pl-tips-text { margin-top: 0.35rem; min-height: 3.6rem; font-size: 0.95rem; line-height: 1.55; color: var(--pl-ink-2); } /* Blinking cursor while the tip types on. */ .brand-podlook .pl-tips-text.pl-tips-typing::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.16em; background: var(--pl-plum, #a473bf); animation: plTipCaret 0.9s steps(1) infinite; } @keyframes plTipCaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* ── Video layout reservation ───────────────────────────────────────────── While the video loads, the container holds the file's exact final box (stored dimensions, 16:9 fallback) with the episode thumbnail as poster, so the transport and everything below never move. A single gentle sweep covers the wait; it starts after 200ms so cached loads never flash it. */ .brand-podlook #videoContainer.pl-video-pending, .brand-podlook #videoContainer.pl-video-ready { position: relative; aspect-ratio: var(--pl-video-ar, 16 / 9); background: #000; overflow: hidden; } .brand-podlook #videoContainer.pl-video-pending video, .brand-podlook #videoContainer.pl-video-ready video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; } .brand-podlook #videoContainer.pl-video-pending::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, 0.08) 50%, transparent 68%); background-size: 240% 100%; background-position: 120% 0; opacity: 0; animation: plGhostSweep 1.5s ease-in-out 0.2s infinite; } @keyframes plGhostSweep { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -120% 0; } } /* Suggested-clip cards: the first sentence or two of the quote sits under the card name from the moment of creation, and the small Approve button rides in the card's action row. */ .brand-podlook .pl-suggested-snippet { font-size: 0.78rem; line-height: 1.45; color: var(--pl-ink-2); padding: 0 12px 10px; } .brand-podlook .pl-suggested-card-actions .approve-btn { font-size: 0.76rem; padding: 0.3rem 0.6rem; white-space: nowrap; } /* Folder card wearing a borrowed episode thumbnail: a small folder glyph in the corner keeps its identity readable. */ .brand-podlook .project-thumb { position: relative; } .brand-podlook .pl-folder-thumb-badge { position: absolute; bottom: 6px; left: 6px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(16, 24, 28, 0.72); color: #fff; z-index: 2; } .brand-podlook .pl-folder-thumb-badge svg { width: 15px; height: 15px; } /* Strip cells are 16:9 (episode frames, not portrait clips). Three sit exactly across the player's width; a fourth wraps onto a new row. */ /* Two classes so this beats .clips-strip's auto-fill/92px, which is defined later in the file. */ .clips-strip.pl-suggested-strip { grid-column: 1; grid-template-columns: repeat(3, 1fr); margin-top: 0.8rem; } /* Each suggestion is a self-contained card: thumbnail, name, own controls. */ .brand-podlook .pl-suggested-cell { background: var(--pl-paper-light); border: 1px solid var(--pl-paper-edge); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; } .brand-podlook .pl-suggested-cell.active { border-color: var(--pl-plum); box-shadow: 0 0 0 1px var(--pl-plum); } .pl-suggested-cell .clip-cell-frame { aspect-ratio: 16 / 9; border: none; border-radius: 8px; } .pl-suggested-cell .clip-cell-name { margin-top: 0.4rem; font-size: 0.75rem; flex: 1 1 auto; } .pl-suggested-card-actions { display: flex; gap: 0.3rem; margin-top: 0.5rem; } .brand-podlook .pl-icon-btn { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .brand-podlook .pl-icon-btn .ts-icon { width: 17px; height: 17px; } /* Per-card controls sit below the main transport in the hierarchy, so they're deliberately smaller than it. */ .brand-podlook .pl-icon-btn-sm { width: 28px; height: 28px; border-radius: 7px; } .brand-podlook .pl-icon-btn-sm .ts-icon { width: 13px; height: 13px; } .brand-podlook .pl-icon-btn.is-playing { background: var(--pl-plum); border-color: var(--pl-plum); color: #fff; } /* The selected suggestion, highlighted in place in the transcription panel. */ .brand-podlook #transcriptContent .transcript-line.ts-range-hit { background: rgba(92, 74, 120, 0.16); box-shadow: 0 0 0 3px rgba(92, 74, 120, 0.16); border-radius: 3px; } /* Podlook clips filmstrip beneath the episode (mirrors .pr-clips spec). */ .brand-podlook .pl-episode-clips-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .brand-podlook .pl-episode-clips-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--pl-ink); } .brand-podlook .pl-episode-clips-head .muted { color: var(--pl-ink-3); font-size: 0.88rem; } .brand-podlook .pl-episode-clips-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 760px; } .brand-podlook .pl-ep-clip { background: var(--pl-paper-light); border: 1px solid var(--pl-paper-edge); border-radius: 12px; overflow: hidden; cursor: pointer; } .brand-podlook .pl-ep-clip-frame { aspect-ratio: 9 / 16; overflow: hidden; position: relative; background: #000; } .brand-podlook .pl-ep-clip-frame video { width: 100%; height: 100%; object-fit: cover; } .brand-podlook .pl-ep-clip.suggested .pl-ep-clip-frame { display: flex; align-items: center; justify-content: center; background: rgba(92, 74, 120, 0.12); } .brand-podlook .pl-ep-clip-badge { position: absolute; top: 8px; left: 8px; background: var(--pl-clay); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; } .brand-podlook .pl-ep-suggest-txt { color: var(--pl-plum); font-weight: 700; font-size: 0.85rem; text-align: center; padding: 0 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; } .brand-podlook .pl-ep-clip-name { padding: 9px 12px 11px; font-size: 0.88rem; font-weight: 600; color: var(--pl-ink); } /* Transcript panel header — matches the .pr-tr-head spec (title + a divider). */ .brand-podlook #transcriptHeader { padding: 13px 16px; border-bottom: 1px solid var(--pl-paper-edge); } .brand-podlook #transcriptHeader h3 { font-size: 1.05rem; font-weight: 700; } .brand-podlook #transcriptBody { padding: 6px 6px 8px; } /* 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, #episodeAudioBtn { display: none; } .brand-podlook #transcriptDownloadBtn, .brand-podlook #episodeDownloadBtn, .brand-podlook #episodeAudioBtn { display: inline-block; } /* Economical transcript controls: one compact row of icon buttons (search + download + comment + suggest), labels replaced by hover tooltips so the panel gives most of its height to the transcript itself. */ .brand-podlook #transcriptControls { flex-wrap: nowrap; align-items: center; gap: 6px; margin-bottom: 0.55rem; } .brand-podlook #transcriptSearch { flex: 1 1 auto; min-width: 60px; /* was 220px — let it share the row */ height: 34px; box-sizing: border-box; } .brand-podlook #transcriptControls .ts-btn-label { display: none; } /* Uniform 34px icon controls so the row reads as one even set. */ .brand-podlook #transcriptDownloadBtn { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .brand-podlook #transcriptDownloadBtn .ts-icon { width: 18px; height: 18px; } .brand-podlook #transcriptSelectionBar { height: 34px; margin-left: 0; padding: 0 4px; gap: 2px; } .brand-podlook #transcriptSelectionBar button { padding: 0; min-width: 30px; height: 30px; justify-content: center; } .brand-podlook #transcriptSelectionBar button[data-act="cancel"] { min-width: 26px; } /* ── 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 tab mirrors Episode: clip player (left) + transcript (right), with the thumbnails strip beneath. */ .clips-top { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; row-gap: 1.25rem; align-items: start; margin-bottom: 1rem; } .clips-top.hidden { display: none; } .clips-left { grid-column: 1; grid-row: 1; } #clipPlayer, #plViewerClipPlayer { height: 52vh; min-height: 300px; aspect-ratio: 9 / 16; border-radius: 10px; background: #000; display: block; } .clip-transcript-pane { grid-column: 2; grid-row: 1; width: 100%; max-height: 52vh; overflow-y: auto; } /* Clips tab: the transcript pane is exactly as tall as the clip player (both 52vh), with the transcript scrolling inside rather than the pane shrinking to its content. The suggested panes keep their own auto height (16:9 player). */ #clipTranscriptPane, #plViewerClipTranscript { height: 52vh; min-height: 300px; max-height: none; overflow: hidden; } .brand-podlook #clipTranscriptPane > #transcriptSection, .brand-podlook #plViewerClipTranscript > #transcriptSection { height: 100%; margin: 0; display: flex; flex-direction: column; } .brand-podlook #clipTranscriptPane #transcriptBody, .brand-podlook #plViewerClipTranscript #transcriptBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .brand-podlook #clipTranscriptPane #transcriptContent, .brand-podlook #plViewerClipTranscript #transcriptContent { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; } .clip-transcript-pane #transcriptSection { margin-top: 0; } .brand-podlook .clip-transcript-pane #transcriptSection { background: var(--pl-paper-light); border: 1px solid var(--pl-paper-edge); border-radius: 14px; overflow: hidden; } .clips-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, 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; } #transcriptSelectionBar { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--separator, rgba(60, 55, 51, 0.12)); border-radius: 8px; padding: 0.2rem 0.35rem; vertical-align: middle; margin-left: 0.5rem; transition: background 0.2s ease; } #transcriptSelectionBar.armed { background: var(--pl-plum, #5c4a78); } #transcriptSelectionBar button { background: none; border: none; color: var(--muted); font-size: 0.82rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 6px; cursor: default; display: inline-flex; align-items: center; gap: 0.3rem; opacity: 0.55; } #transcriptSelectionBar.armed button { color: #f6f1e7; cursor: pointer; opacity: 1; } #transcriptSelectionBar.armed button:hover { background: rgba(255, 255, 255, 0.12); } #transcriptSelectionBar button.pl-success { color: #8fd694; } #transcriptSelectionBar button.hidden { display: none; } #transcriptSelectionBar .ts-icon { width: 14px; height: 14px; } #transcriptSelectionBar .ts-sel-duration { color: rgba(246, 241, 231, 0.75); font-size: 0.75rem; font-variant-numeric: tabular-nums; padding: 0 0.3rem; } #transcriptSelectionBar button[data-act="cancel"] { font-size: 1rem; padding: 0.15rem 0.45rem; } /* Suggested clips tab — reviewer-proposed sections of the episode, with the episode itself as a mini 16:9 player above the list. */ #videoContainer.pl-suggested-mini { height: auto !important; margin-bottom: 1rem; } #videoContainer.pl-suggested-mini video { width: 380px !important; max-width: 100%; height: auto; border-radius: 8px; } .suggested-toolbar { margin-bottom: 0.9rem; } .suggested-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; max-height: 55vh; overflow-y: auto; } .suggested-card { background: var(--surface); border: 1px solid var(--separator); border-radius: 10px; padding: 0.75rem; } .suggested-frame { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; cursor: pointer; margin-bottom: 0.6rem; border: 2px solid transparent; } .suggested-frame:hover { border-color: var(--pl-plum); } .suggested-frame video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .pl-tab-count { display: inline-block; background: var(--pl-ink-3, #8c8888); color: #fff; border-radius: 999px; font-size: 0.7rem; padding: 0.05rem 0.5rem; margin-left: 0.35rem; vertical-align: middle; } /* The rule above overrides the [hidden] UA default, so guard it explicitly — otherwise an empty, hidden count chip renders as a stray plum dot. */ .pl-tab-count[hidden] { display: none; } .suggested-quote { font-style: italic; color: var(--text); margin-bottom: 0.5rem; } .suggested-meta { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 0.6rem; } .suggested-actions { display: flex; gap: 0.5rem; } .suggested-from-reviewer { display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--pl-plum, #5c4a78); background: rgba(92, 74, 120, 0.12); border-radius: 999px; padding: 0.1rem 0.55rem; margin-bottom: 0.4rem; } .suggested-note { font-size: 0.85rem; color: var(--text); margin-bottom: 0.4rem; } #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; } /* ── Drill-down folders (dashboard) ── */ .pl-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem; margin: 0 0 1rem; font-size: 0.95rem; } .pl-breadcrumb.hidden { display: none; } .pl-breadcrumb .pl-crumb { background: none; border: none; color: var(--pl-plum, #5c4a78); cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 5px; font-size: 0.95rem; font-weight: 600; } .pl-breadcrumb button.pl-crumb:hover { background: rgba(92, 74, 120, 0.1); } .pl-breadcrumb .pl-crumb-current { color: var(--text); font-weight: 600; cursor: default; } .pl-breadcrumb .pl-crumb-sep { color: var(--muted); } .brand-podlook .project-card.pl-folder-card { cursor: pointer; } /* Dragging a project onto a crumb moves it there — "All projects" takes it back out of folders entirely. */ .pl-breadcrumb .pl-crumb.crumb-drop-target { outline: 1px dashed var(--pl-plum, #5c4a78); outline-offset: 1px; } .pl-breadcrumb .pl-crumb.crumb-drop-hover { background: var(--pl-plum, #5c4a78); color: #fff; outline-style: solid; } /* Folder breadcrumb above the episode title — smaller/tighter than the dashboard's, and its crumbs are links. */ #plFolderBreadcrumb { width: 100%; margin: 0 0 0.3rem; font-size: 0.8rem; } #plFolderBreadcrumb .pl-crumb { font-size: 0.8rem; text-decoration: none; padding: 0.1rem 0.3rem; } #plFolderBreadcrumb a.pl-crumb:hover { background: rgba(92, 74, 120, 0.12); } .brand-podlook .project-card.pl-folder-card:hover { border-color: color-mix(in srgb, var(--pl-plum, #5c4a78) 40%, transparent); } .pl-empty-folder { color: var(--muted); padding: 2rem 1rem; text-align: center; } /* 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; } /* Podlook doesn't offer rounds — hide the rounds tab bar on the viewer. */ html.brand-podlook body.page-player #roundsTabBar { display: none !important; } /* Podlook viewer tabs: episode panes hidden when Clips/Suggested is active. */ .pl-viewer-hidden { display: none !important; } .pl-clip-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; } /* Equal thirds: width comes from the container, not the label — so the Approve button doesn't jump when its text changes to "✓ Approved". */ .pl-clip-actions button { flex: 1 1 0; white-space: nowrap; } /* Translation is not part of the Podlook surface for now. */ .brand-podlook #toggleTranslateBtn, .brand-podlook #translateLangSelect, .brand-podlook #translateStatus { display: none !important; } /* ── Brand Studio (brand-studio.html) — Podlook palette editor ───────────── White-label groundwork: the palette lives in --pl-* vars; this page edits them. Overrides are applied site-wide by brand-init.js. */ #brandStudio { max-width: 1060px; margin: 1.5rem auto; padding: 0 1rem; } #brandStudio h2 { margin: 0 0 0.4rem; } .bs-intro { color: var(--pl-ink-2); max-width: 60ch; } .bs-intro-note { color: var(--pl-ink-3); font-size: 0.85rem; } .bs-columns { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; } @media (max-width: 900px) { .bs-columns { grid-template-columns: 1fr; } } #brandStudio h3 { margin: 1.6rem 0 0.7rem; font-size: 1.02rem; } .bs-swatches { display: flex; flex-direction: column; gap: 6px; } .bs-swatch { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.65rem; background: var(--pl-paper-light); border: 1px solid var(--pl-paper-edge); border-radius: 10px; cursor: pointer; } .bs-swatch input[type="color"] { width: 40px; height: 40px; padding: 0; border: 1px solid var(--pl-paper-edge); border-radius: 8px; background: none; cursor: pointer; flex: 0 0 auto; } .bs-swatch-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .bs-swatch-label { font-weight: 600; color: var(--pl-ink); } .bs-swatch-usage { font-size: 0.78rem; color: var(--pl-ink-3); } .bs-swatch-code { font-size: 0.78rem; color: var(--pl-ink-2); flex: 0 0 auto; /* the engine styles as a dark pill — unreadable here */ background: transparent; padding: 0; border: none; } .bs-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; } .bs-status { color: var(--pl-plum); font-size: 0.85rem; } .bs-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; } .bs-preset { display: inline-flex; align-items: center; gap: 0.5rem; } .bs-preset-dots { display: inline-flex; gap: 3px; } .bs-preset-dots span { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); } .bs-hint { color: var(--pl-ink-3); font-size: 0.82rem; margin: 0 0 0.5rem; } .bs-io textarea { width: 100%; box-sizing: border-box; font: 0.78rem/1.5 ui-monospace, monospace; background: var(--pl-paper-light); color: var(--pl-ink); border: 1px solid var(--pl-paper-edge); border-radius: 8px; padding: 0.6rem; } .bs-io-btns { display: flex; gap: 0.5rem; margin-top: 0.4rem; } /* Preview column — a miniature of the real player page. */ .bs-preview { position: sticky; top: 1rem; background: var(--pl-paper); border: 1px solid var(--pl-paper-edge); border-radius: 14px; padding: 1rem; } .bs-preview-tabs { margin-bottom: 0.8rem; } .bs-card { border-radius: 12px; overflow: hidden; } .bs-card-video { background: var(--pl-card); color: rgba(246,241,231,0.5); display: flex; align-items: center; justify-content: center; height: 120px; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; } .bs-card-progress { background: var(--pl-card); padding: 8px 0 4px; } .bs-card-progress span { display: block; height: 6px; width: 42%; border-radius: 3px; background: var(--pl-plum); } .bs-card-transport { background: var(--pl-card); display: flex; gap: 8px; justify-content: center; padding: 8px 0 12px; } .bs-t-btn { background: transparent; border: 1px solid rgba(246,241,231,0.22); color: #f6f1e7; width: 34px; height: 34px; border-radius: 9px; } .bs-t-play { background: var(--pl-plum); border: none; color: #fff; width: 38px; height: 38px; border-radius: 50%; } .bs-panel { margin-top: 0.8rem; background: var(--pl-paper-light); border: 1px solid var(--pl-paper-edge); border-radius: 12px; padding: 0.8rem 0.95rem; color: var(--pl-ink); } .bs-panel p { margin: 0.45rem 0 0; font-size: 0.88rem; } .bs-ts { color: var(--pl-plum); font-weight: 600; margin-right: 0.35rem; } .bs-hit { background: color-mix(in srgb, var(--pl-plum) 16%, transparent); border-radius: 4px; } .bs-buttons { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; } /* ── Transcription panel: Transcript | Summary tabs (Podlook) ─────────────── */ .ts-tabs { display: flex; gap: 1rem; margin-bottom: 0.55rem; border-bottom: 1px solid var(--pl-paper-edge); } .ts-tab { background: none; border: none; padding: 0.15rem 0.1rem 0.45rem; font-size: 0.85rem; font-weight: 600; color: var(--pl-ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .ts-tab.active { color: var(--pl-ink); border-bottom-color: var(--pl-plum); } .ts-tab-hidden { display: none !important; } /* The summary fills the panel exactly as the transcript does. */ .brand-podlook #player > #transcriptSection #summaryContent { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .summary-content { font-size: 0.88rem; color: var(--pl-ink); line-height: 1.55; } .summary-content h4 { margin: 1rem 0 0.45rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pl-ink-2); } .summary-status { color: var(--pl-ink-2); } .summary-overview { margin: 0 0 0.6rem; } .summary-topics { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; } .summary-topic { background: color-mix(in srgb, var(--pl-plum) 12%, transparent); color: var(--pl-plum); font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; } .summary-chapter, .summary-takeaway { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.4rem 0; border-bottom: 1px solid color-mix(in srgb, var(--pl-paper-edge) 55%, transparent); } .summary-ts { flex: 0 0 auto; cursor: pointer; } .summary-chapter-body { min-width: 0; } .summary-chapter-title { font-weight: 600; } .summary-chapter-desc { color: var(--pl-ink-2); } .summary-quote { color: var(--pl-ink-3); font-style: italic; font-size: 0.82rem; margin-top: 0.15rem; } .summary-mentions { margin: 0.1rem 0; color: var(--pl-ink-2); font-size: 0.82rem; } /* Summary actions (copy / download) — top-right of the summary pane. */ .summary-actions { display: flex; gap: 0.4rem; justify-content: flex-end; margin-bottom: 0.5rem; } /* Dashboard card folder path — small muted line above the project name. */ .brand-podlook .card-crumbs { display: flex; align-items: center; gap: 4px; margin: 0 0 2px; font-size: 0.68rem; color: var(--pl-ink-3, #999); } .brand-podlook .card-crumbs .ts-icon { width: 12px; height: 12px; } /* New-project dropzone instructions (podlook) — the data-brand-only rule shows matches as inline; these lines are whole blocks. */ .brand-podlook #dropzone small.pl-dz-line[data-brand-only="podlook"] { display: block; margin-top: 0.35rem; color: var(--pl-ink-2, #bbb); } /* Empty new-project dropzone — fill the video card (the legacy 50% width matched the old resizable player; Podlook's card is full-width, so the dropzone should be exactly the size the video will be). */ .brand-podlook #videoContainer.pl-empty-reserved { position: relative; aspect-ratio: 16 / 9; } /* The dropzone occupies the exact box the video will fill, so nothing moves when the file lands (Rich: 'it should be identical to where the actual video will appear'). */ .brand-podlook #videoContainer.pl-empty-reserved .empty-state-video-prompt { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border-radius: 14px 14px 0 0; padding: 1.2rem; } .brand-podlook .empty-state-prompt-sub { font-size: 0.8rem; line-height: 1.5; color: var(--pl-ink-2, #bbb); max-width: 36rem; } /* AI Summary credit — on-screen only (never in copy/download text). */ .summary-credit { margin-top: 1.1rem; font-size: 0.68rem; font-style: italic; color: var(--pl-ink-3, #999); text-align: center; user-select: none; } /* AI-summary chapter markers on the timeline — a plum diamond per chapter above the scrubber; tooltip = chapter title + timecode; click seeks. Sits above #commentMarkers (comment dots stay centred on the bar). */ #chapterMarkers { position: absolute; left: 0; right: 0; top: 0; height: 0; overflow: visible; pointer-events: none; z-index: 6; } .pl-chapter-marker { position: absolute; top: -5px; width: 9px; height: 9px; transform: translateX(-50%); pointer-events: auto; cursor: pointer; } /* The diamond itself (kept on a pseudo so the tooltip isn't rotated). */ .pl-chapter-marker::before { content: ''; position: absolute; inset: 0; border-radius: 2px; transform: rotate(45deg); background: var(--pl-plum, #5c4a78); border: 1.5px solid var(--pl-paper-light, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 0.12s ease; } .pl-chapter-marker:hover::before { transform: rotate(45deg) scale(1.4); } /* Instant tooltip — native title tooltips sit on a ~1s OS hover delay. */ .pl-chapter-marker::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); background: #2a2433; color: #fff; font-size: 0.7rem; line-height: 1.3; padding: 4px 9px; border-radius: 6px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.08s ease; z-index: 30; } .pl-chapter-marker:hover::after { opacity: 1; } /* Viewer approvals on the owner's page — episode chip on the videobar, tick on approved clip thumbnails. Hover detail via the same instant data-tip tooltip as the chapter markers. */ .brand-podlook .pl-approved-chip { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: #22c55e; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.45); cursor: default; white-space: nowrap; } .brand-podlook.light-mode .pl-approved-chip, .light-mode .brand-podlook .pl-approved-chip { color: #15803d; } .brand-podlook .clip-cell { position: relative; } .brand-podlook .clip-approved-badge { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: #fff; background: #22c55e; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); z-index: 2; } .brand-podlook .pl-approved-chip::after, .brand-podlook .clip-approved-badge::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: #2a2433; color: #fff; font-size: 0.7rem; font-weight: 400; line-height: 1.3; padding: 4px 9px; border-radius: 6px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.08s ease; z-index: 30; } .brand-podlook .clip-approved-badge::after { left: auto; right: 0; transform: none; } .brand-podlook .pl-approved-chip:hover::after, .brand-podlook .clip-approved-badge:hover::after { opacity: 1; } /* Viewer episode sign-off — under the video card on the Episode tab. */ @media (min-width: 980px) { .brand-podlook #player > #plViewerEpisodeActions { grid-column: 1; grid-row: 7; } } #plViewerEpisodeActions { display: flex; justify-content: center; margin-top: 0.8rem; } #plViewerEpisodeActions.pl-viewer-hidden { display: none; } /* ── Podlook landing v2 (strategy-doc copy) ────────────────────────────── */ .brand-podlook .pl-h1-kicker { display: block; margin-top: 0.55rem; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; } .brand-podlook .pl-hero-trustline[data-brand-only="podlook"] { display: block; margin-top: 0.9rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); } /* The demo link gets its own line (the brand-gating rule shows matches as inline, which ran the hero links together). */ .brand-podlook a.hero-signin-link[data-brand-only="podlook"] { display: block; margin-top: 0.7rem; font-weight: 600; } #podlookLanding section { padding: 3.2rem 1.5rem; } #podlookLanding .section-title { text-align: center; } /* Problem */ .pl-problem-section { max-width: 46rem; margin: 0 auto; } .pl-problem-quote { margin: 1.4rem auto; padding: 1.1rem 1.4rem; max-width: 40rem; background: var(--pl-paper-light, #faf7f0); border: 1px solid var(--pl-paper-edge, #e4ddd0); border-radius: 10px; font-style: italic; color: var(--text); } .pl-problem-punch { text-align: center; font-weight: 700; margin: 1rem 0 0.6rem; } .pl-problem-body { text-align: center; max-width: 40rem; margin: 0 auto; color: var(--muted); } /* Client view */ .pl-client-section { max-width: 62rem; margin: 0 auto; } .pl-client-intro { text-align: center; max-width: 44rem; margin: 0.8rem auto 2rem; color: var(--muted); } .pl-mock { max-width: 46rem; margin: 0 auto 2rem; background: var(--pl-card, #fff); border: 1px solid var(--pl-paper-edge, #e4ddd0); border-radius: 16px; padding: 1rem 1.2rem 1.2rem; box-shadow: 0 14px 40px rgba(40, 30, 60, 0.12); } .pl-mock-tabs { display: flex; gap: 1.1rem; font-size: 0.8rem; padding-bottom: 0.7rem; color: var(--muted); } .pl-mock-tabs .active { color: var(--pl-plum, #5c4a78); font-weight: 700; border-bottom: 2px solid var(--pl-plum, #5c4a78); } .pl-mock-tabs b { background: var(--pl-plum, #5c4a78); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 0.7rem; } .pl-mock-main { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0.9rem; } .pl-mock-screen { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: #241d2e; color: #fff; font-size: 1.6rem; border-radius: 10px 10px 0 0; } .pl-mock-scrub { position: relative; height: 8px; background: #3a3145; border-radius: 0 0 10px 10px; } .pl-mock-scrub i { position: absolute; top: -4px; width: 7px; height: 7px; border-radius: 2px; background: var(--pl-plum, #5c4a78); border: 1px solid #fff; transform: rotate(45deg); } .pl-mock-panel { background: var(--pl-paper-light, #faf7f0); border: 1px solid var(--pl-paper-edge, #e4ddd0); border-radius: 10px; padding: 0.7rem 0.85rem; font-size: 0.72rem; } .pl-mock-panel strong { display: block; margin-bottom: 0.4rem; } .pl-mock-panel p { margin: 0.25rem 0; color: var(--text); } .pl-mock-panel p span { color: var(--pl-plum, #5c4a78); font-weight: 600; margin-right: 4px; } .pl-mock-panel .hit { background: rgba(92, 74, 120, 0.14); border-radius: 4px; padding: 1px 4px; } .pl-mock-panel em { display: block; margin-top: 0.5rem; color: var(--muted); font-size: 0.68rem; } .pl-mock-clips { display: flex; gap: 0.7rem; margin-top: 0.9rem; } .pl-mock-clip { flex: 1; aspect-ratio: 16 / 6; border-radius: 8px; background: #2f2739; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; } .pl-mock-clip i { font-style: normal; font-size: 0.66rem; color: #9be29b; } .pl-mock-clip.pending i { color: #e8c983; } .pl-client-points { max-width: 44rem; margin: 0 auto; padding-left: 1.1rem; } .pl-client-points li { margin: 0.7rem 0; color: var(--muted); } .pl-client-points li strong { color: var(--text); } /* Who it's for */ .pl-who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; max-width: 62rem; margin: 1.6rem auto 0; } .pl-who { background: var(--pl-paper-light, #faf7f0); border: 1px solid var(--pl-paper-edge, #e4ddd0); border-radius: 14px; padding: 1.3rem 1.4rem; } .pl-who h3 { margin: 0 0 0.5rem; color: var(--pl-plum, #5c4a78); } .pl-who p { margin: 0; color: var(--muted); font-size: 0.9rem; } @media (max-width: 860px) { .pl-who-grid { grid-template-columns: 1fr; } } /* Why purpose-built */ .pl-why-section { max-width: 46rem; margin: 0 auto; } .pl-why-body { max-width: 44rem; margin: 0.9rem auto; text-align: center; color: var(--muted); } .pl-why-body strong { color: var(--text); } /* Founder */ .pl-founder-card { max-width: 42rem; margin: 1.4rem auto 0; padding: 1.4rem 1.6rem; /* NB --pl-card is the DARK player-card colour — this card is paper. */ background: var(--pl-paper-light, #faf7f0); border: 1px solid var(--pl-paper-edge, #e4ddd0); border-radius: 14px; box-shadow: 0 8px 28px rgba(40, 30, 60, 0.08); } .pl-founder-card p { color: var(--text); } .pl-founder-card p:last-child { margin-bottom: 0; } /* Pricing */ .pl-pricing-founders { text-align: center; color: var(--muted); margin: 0.4rem 0 1.6rem; } .pl-pricing-scroll { overflow-x: auto; max-width: 62rem; margin: 0 auto; } .pl-pricing-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.9rem; } .pl-pricing-table th, .pl-pricing-table td { padding: 0.65rem 0.9rem; text-align: center; border-bottom: 1px solid var(--pl-paper-edge, #e4ddd0); } .pl-pricing-table td:first-child { text-align: left; color: var(--muted); } .pl-pricing-table th { font-size: 1rem; color: var(--text); } .pl-pricing-table th.pl-tier-popular, .pl-pricing-table td.pl-tier-popular { background: rgba(92, 74, 120, 0.08); } .pl-price-row td { font-weight: 700; font-size: 1.02rem; color: var(--text); } .pl-reviewers-row td[colspan] { font-weight: 600; color: var(--pl-plum, #5c4a78); background: rgba(92, 74, 120, 0.06); } .pl-pricing-enterprise { text-align: center; margin-top: 1.3rem; color: var(--muted); } .pl-pricing-enterprise a { color: var(--pl-plum, #5c4a78); font-weight: 600; } /* FAQ */ .pl-faq { max-width: 44rem; margin: 1.4rem auto 0; } .pl-faq details { border: 1px solid var(--pl-paper-edge, #e4ddd0); border-radius: 10px; background: var(--pl-paper-light, #faf7f0); margin: 0.6rem 0; padding: 0.75rem 1rem; } .pl-faq summary { cursor: pointer; font-weight: 600; color: var(--text); } .pl-faq details p { margin: 0.6rem 0 0.1rem; color: var(--muted); } /* Final CTA */ .pl-final-cta { text-align: center; } .pl-final-btns { display: flex; gap: 0.8rem; justify-content: center; margin: 1.4rem 0 1.8rem; flex-wrap: wrap; } .pl-scoutco-credit { font-size: 0.78rem; color: var(--muted); } .pl-scoutco-credit a { color: inherit; text-decoration: underline; } @media (max-width: 700px) { .pl-mock-main { grid-template-columns: 1fr; } } /* Real product screenshot in the "what your client sees" section (replaces the old CSS mockup). Framed like a browser card. */ .pl-shot { max-width: 52rem; margin: 0 auto 2rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--pl-paper-edge, #e4ddd0); box-shadow: 0 18px 50px rgba(40, 30, 60, 0.16); background: var(--pl-paper-light, #faf7f0); } .pl-shot img { display: block; width: 100%; height: auto; } /* ── Landing tweaks (Rich's pass) ─────────────────────────────────────────── */ /* Nav: hold the logo + Sign In inside the same centred content band as the rest of the page, instead of flush to the browser edges. */ .brand-podlook .landing-nav { padding-left: max(1.5rem, calc((100% - 1120px) / 2)); padding-right: max(1.5rem, calc((100% - 1120px) / 2)); } /* Hero subtitle: higher contrast + a shadow so it reads cleanly over the photo, and a sane measure. */ .brand-podlook .hero-subtitle { color: rgba(255, 255, 255, 0.94); font-weight: 500; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); max-width: 40rem; margin-left: auto; margin-right: auto; line-height: 1.5; } /* How it works: number + CAPS label inline, three across (no descriptions). */ .brand-podlook .pl-steps.pl-steps-compact { display: flex; grid-template-columns: none; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2.6rem; max-width: 960px; } .brand-podlook .pl-steps-compact .pl-step { display: flex; align-items: center; gap: 0.7rem; } .brand-podlook .pl-steps-compact .pl-step-num { margin: 0; flex: 0 0 auto; } .brand-podlook .pl-step-label { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; font-size: 0.98rem; color: var(--pl-ink); white-space: nowrap; } @media (max-width: 620px) { .brand-podlook .pl-steps.pl-steps-compact { flex-direction: column; align-items: flex-start; gap: 0.9rem; } .brand-podlook .pl-hero-trustline[data-brand-only="podlook"] { font-size: 0.85rem; } } /* Screenshot legal caption. */ .pl-shot-note { text-align: center; font-size: 0.72rem; font-style: italic; color: var(--pl-ink-3); margin: 0.55rem auto 0; } /* Buffer above the "why not a shared drive" section. */ .brand-podlook .pl-why-section { margin-top: 1.6rem; padding-top: 4rem; } /* Centre the pricing early-access button. */ .brand-podlook .pl-mid-cta { text-align: center; } /* Stored JPEG thumbnails (#170) — instant frames in clip strips and on dashboard cards, replacing the load-the-video-to-paint-a-frame probes. */ .clip-cell-frame img.clip-thumb-img, .pl-ep-clip-frame img.clip-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } .project-thumb img.project-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Comment composer: Podlook contrast ────────────────────────────────── The composer's status line carries real information — "Listening…", and the microphone-blocked and nothing-heard messages. On Podlook the shared --muted resolves to --pl-ink-3 (#84929a), which on the modal's paper-light surface measures 3.1:1 — under the 4.5:1 a message like that needs. --pl-ink-2 measures 7.1:1 on the same surface. */ .brand-podlook .comment-composer-status { color: var(--pl-ink-2); } /* ── Editing a comment: Podlook surfaces ───────────────────────────────── The margin card's pencil sits beside its × at the foot of the card — the top-right corner is the "mark as addressed" tick's. The "edited" note has to clear the 4.5:1 bar because it changes how a reader weighs a comment. */ .brand-podlook .pl2-card .pl2-edit { position: absolute; /* Beside the × at the BOTTOM of the card, not the top. The card's top-right corner belongs to the "mark as addressed" tick, and a pencil sitting next to that reads as part of it. */ bottom: 6px; right: 30px; width: 20px; height: 20px; padding: 0; border: none; border-radius: 5px; background: none; color: var(--pl-ink-3); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.12s; } .brand-podlook .pl2-card:hover .pl2-edit, .brand-podlook .pl2-edit:focus-visible { opacity: 1; } .brand-podlook .pl2-edit:hover { color: var(--pl-plum); } @media (hover: none) { .brand-podlook .pl2-card .pl2-edit { opacity: 1; } } .brand-podlook .comment-edited { color: var(--pl-ink-2); } /* No "mark as addressed" tick on the secondary's cards, so the 30px gutter it reserved at the top right goes back to the text. */ .brand-podlook body.pl2-noticks .pl2-card { padding-right: 12px; } /* A card whose foot carries the pencil and the × needs its last line to clear them. The × has always floated over the text down there; with two controls the zone is wide enough to actually catch a line. */ .brand-podlook .pl2-card.pl2-hasactions { padding-bottom: 28px; } /* ── Demo mode (podlook-demo.js) ───────────────────────────────────────── A prospect trying the reviewer's page. Saying so matters: someone who writes real feedback and watches it vanish without being told has been misled, however good the demo was. */ .pl-demo-notice { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 90; display: flex; align-items: baseline; gap: 10px; max-width: min(560px, calc(100vw - 24px)); padding: 9px 15px; border-radius: 999px; background: var(--pl-ink); color: #fff; font-size: 0.78rem; line-height: 1.4; box-shadow: 0 6px 22px rgba(29, 42, 46, 0.3); } .pl-demo-notice strong { flex-shrink: 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--pl-violet, #8b74e8); } /* The phone's thumb bar owns the bottom of the screen, so sit above it. */ body.plm-on .pl-demo-notice { bottom: calc(89px + 12px); } .pl-demo-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; z-index: 95; max-width: min(460px, calc(100vw - 24px)); padding: 12px 18px; border-radius: 12px; background: var(--pl-violet, #8b74e8); color: #fff; font-size: 0.85rem; font-weight: 600; line-height: 1.45; text-align: center; box-shadow: 0 8px 26px rgba(29, 42, 46, 0.3); transition: opacity 0.5s ease; } .pl-demo-toast.go { opacity: 0; } @media (prefers-reduced-motion: reduce) { .pl-demo-toast { transition: none; } }