/* Web-only overrides for the shared briefing styles. newtab.css is mirrored verbatim from the extension, where it owns the whole page: it sets to a centered flexbox and puts content in #app. On the website the briefing renders inside base.html's chrome (navbar + footer), so we undo that body takeover and supply the column wrapper here instead. Light/dark theme: newtab.css defines --nt-* tokens (dark defaults). Remap them to the newsprint shell palette when the user picks light mode. */ body { display: block; background: var(--bg, #0f0f0f); } .briefing-page { max-width: 720px; margin: 0 auto; padding: 32px 24px; } /* site.css sets shell headings in serif (--font-serif); briefing card headings stay on the system sans stack to match the extension. The masthead h1 is NOT opted out: newtab.css gives it the Fraunces-first serif stack, which resolves to the real webfont here and to Georgia in the extension. State-message headings use the shell serif — they're shell chrome, not mirrored content. */ .briefing-page h2, .briefing-page h3 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .briefing-message h1 { font-family: var(--font-serif); } /* Public sample page (/sample/): read-only. render.js is byte-mirrored with the extension and always emits per-story "Report an error" links, so they are hidden here rather than in the renderer. */ .sample-page .news-report-link { display: none; } .sample-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding: 14px 18px; border: 1px solid var(--primary, #64b5f6); border-radius: var(--radius, 10px); background: var(--surface-2, rgba(100, 181, 246, 0.08)); color: var(--text, var(--nt-text)); font-size: 0.92rem; line-height: 1.5; } .sample-banner p { margin: 0; flex: 1 1 320px; } .sample-banner .btn { white-space: nowrap; } .sample-footer { text-align: center; margin: 40px 0 16px; color: var(--text-muted, #888); } .sample-footer p { margin-bottom: 12px; } .sample-footer .btn { margin: 4px; } /* Centered state messages: Pro gate, not-ready, failed. */ .briefing-message { text-align: center; margin-top: 48px; color: var(--text-muted, #888); line-height: 1.6; } .briefing-message h1 { font-size: 2rem; color: var(--heading, var(--nt-text-heading)); margin-bottom: 16px; } .briefing-message p { margin-bottom: 12px; } .briefing-message .btn { margin-top: 8px; } /* Server-rendered edition toggle (AM/PM): links styled like newtab's .edition-toggle buttons. .edition-toggle / .edition-btn / .active come from newtab.css; here we just center it and kill the base.html link underline. */ .edition-switch { text-align: center; margin-bottom: 24px; } .edition-switch .edition-btn { text-decoration: none; } .edition-switch .edition-btn:hover { text-decoration: none; color: var(--nt-text-subtle); } .edition-switch .edition-btn.active:hover { color: var(--nt-text-heading); } /* ── Phase 14: mobile pass (≤767.98px) ────────────────────────────────────── newtab.css is desktop-first and mirrored from the extension (do not edit it). These overrides tighten the layout for phones without touching that file. */ @media (max-width: 767.98px) { .briefing-page { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); } /* Give the AM/PM edition toggle a proper 44px touch target. */ .edition-switch .edition-toggle { display: inline-flex; } .edition-switch .edition-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min, 44px); padding: 6px 18px; } /* Tighter section cards + slightly smaller headings on narrow screens. */ .briefing-page .card { padding: 16px; } .briefing-page .card h2 { font-size: 1.05rem; } /* The collapsed "· read" stub must track the h2 size so the mark-as-read toggle keeps the exact same offset in both states. */ .briefing-page .card-dismissed-label { font-size: 1.05rem; } .briefing-page .card h3 { font-size: 0.95rem; } .briefing-message { margin-top: 32px; } .briefing-message h1 { font-size: 1.6rem; } } /* Mark-as-read toggle: styled in the shared newtab.css (.section-toggle) so the web page and the extension can't drift. Nothing web-specific here. */ /* ── Light theme: remap briefing tokens to the newsprint shell palette ─────── */ html[data-theme="light"] .briefing-page { --nt-page-bg: var(--bg); --nt-text: var(--text); --nt-text-heading: var(--heading); --nt-text-muted: var(--text-muted); --nt-text-subtle: var(--text-muted); --nt-text-faint: var(--text-muted); --nt-text-dim: var(--text); --nt-text-body: var(--text); --nt-text-essay: var(--text); --nt-text-disabled: var(--text-muted); --nt-text-hint: var(--text-muted); --nt-text-soft: var(--text-muted); --nt-text-accent: var(--text-muted); --nt-surface: var(--surface); --nt-surface-raised: var(--surface-2); --nt-surface-pressed: var(--surface-2); --nt-surface-hover: var(--border); --nt-surface-code: var(--surface-2); --nt-surface-claim: var(--surface); --nt-surface-week: var(--surface); --nt-surface-week-hover: var(--surface-2); --nt-surface-refresh: var(--surface-2); --nt-surface-refresh-hover: var(--border); --nt-border: var(--border); --nt-border-subtle: var(--border); --nt-border-strong: var(--border); --nt-border-hover: var(--text-muted); --nt-border-divider: var(--border); --nt-border-inner: var(--border); --nt-link: var(--accent); --nt-link-alt: var(--accent); --nt-link-source: var(--accent); --nt-positive: var(--success); --nt-positive-alt: var(--success); --nt-negative: var(--danger); --nt-warning: var(--warning); --nt-warning-alt: var(--warning); --nt-warning-strong: var(--warning); --nt-stale-bg: color-mix(in srgb, var(--warning) 12%, var(--surface)); --nt-stale-border: color-mix(in srgb, var(--warning) 40%, var(--border)); --nt-stale-text: var(--warning); --nt-skeleton-base: var(--surface-2); --nt-skeleton-mid: var(--border); --nt-lesson-bg: var(--surface); --nt-lesson-border: var(--border); --nt-lesson-heading: var(--heading); --nt-accent-green-bg: color-mix(in srgb, var(--success) 10%, var(--surface)); --nt-alert-border: color-mix(in srgb, var(--danger) 30%, var(--border)); --nt-review-notes-border: color-mix(in srgb, var(--warning) 30%, var(--border)); --nt-key-border: color-mix(in srgb, var(--warning) 30%, var(--border)); --nt-key-text: var(--warning); --nt-error-border: color-mix(in srgb, var(--danger) 30%, var(--border)); --nt-meeting-pill-bg: var(--surface-2); --nt-meeting-pill-text: var(--text-muted); --nt-holiday: var(--warning); --nt-holiday-name: var(--heading); } /* White-on-dark rgba dividers in newtab.css need dark-on-light equivalents. */ html[data-theme="light"] .briefing-page .agenda-event { border-top-color: rgba(0, 0, 0, 0.06); } html[data-theme="light"] .briefing-page .week-outlook { border-top-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .briefing-page .week-day { border-color: rgba(0, 0, 0, 0.06); } html[data-theme="light"] .briefing-page .week-day:hover { border-color: rgba(0, 0, 0, 0.12); } html[data-theme="light"] .briefing-page .agenda-divider { background: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .briefing-page .week-notable-item { border-top-color: rgba(0, 0, 0, 0.06); } /* ── Free-tier sponsored card (briefing-page.js buildSponsorTile) ─────────── */ /* Matches the section-card look but is visually set apart by a dashed border and a small-caps eyebrow, so paid placements are unmistakably labeled as such. */ .sponsor-tile .card { border: 1px dashed var(--nt-border-strong, var(--nt-border)); } .sponsor-label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nt-text-faint, var(--text-muted, #8a8a8a)); margin-bottom: 6px; } .sponsor-tile img { max-width: 100%; border-radius: 6px; margin-bottom: 8px; } .sponsor-tile h2 { margin: 0 0 6px; } .sponsor-tile p { margin: 0 0 10px; } .sponsor-cta { font-size: 13px; color: var(--nt-link, var(--text-muted, #8a8a8a)); text-decoration: underline; } /* ── Listen (read aloud): masthead button + bottom player strip ───────────── */ /* Wired by briefing-page.js initSpeech(); engine in briefing-speech.js. Tokens only (--nt-*), so the light-theme remap above covers the strip; the shadow is the one thing that needs its own light value. */ .speech-listen { font: inherit; cursor: pointer; background: transparent; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; } .speech-listen[aria-pressed="true"] { border-color: var(--nt-link); color: var(--nt-text-heading); } .speech-listen:focus-visible { outline: 2px solid var(--nt-link); outline-offset: 2px; } .speech-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; /* under .toast (1000) and the install modal (1200) in site.css */ margin: 0 auto; max-width: 720px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--nt-surface); color: var(--nt-text); border: 1px solid var(--nt-border); border-bottom: none; border-radius: 12px 12px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .speech-player[hidden] { display: none; } /* Keep the last card clear of the strip while it is showing. */ #briefing-container.speech-active { padding-bottom: 110px; } .speech-player-status { flex: 1 1 100%; font-size: 13px; color: var(--nt-text-muted); min-height: 1.2em; } .speech-player-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 6px; } .speech-player-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; } /* Icon buttons follow the .section-toggle conventions in newtab.css. */ .speech-btn { position: relative; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--nt-border-strong); background: transparent; color: var(--nt-text-muted); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .speech-btn::before { content: ""; position: absolute; inset: -4px; } /* 44px hit area */ .speech-btn:hover { color: var(--nt-text-heading); border-color: var(--nt-border-hover); } .speech-btn:focus-visible { outline: 2px solid var(--nt-link); outline-offset: 2px; } .speech-btn:active { transform: scale(0.92); } .speech-btn:disabled { opacity: 0.4; cursor: default; transform: none; } .speech-btn-main { background: var(--nt-link); border-color: var(--nt-link); color: var(--nt-page-bg); } .speech-btn-main:hover { color: var(--nt-page-bg); filter: brightness(1.1); } [data-action="speech-stop"] { margin-left: auto; } .speech-select { display: inline-flex; align-items: center; min-width: 0; } /* The voice picker is the flexible one: it shrinks so Stop stays on the row. */ .speech-select-voice { flex: 1 1 90px; } .speech-select select { font: inherit; font-size: 13px; background: var(--nt-surface-raised); color: var(--nt-text); border: 1px solid var(--nt-border); border-radius: 6px; padding: 6px 8px; max-width: 170px; min-height: 36px; min-width: 0; } .speech-select-voice select { width: 100%; } .speech-select select:focus-visible { outline: 2px solid var(--nt-link); outline-offset: 2px; } /* The card being read. scroll-margin keeps its top clear of the viewport edge. */ .section-tile { scroll-margin-top: 12px; } .section-tile.card-speaking > .card { border-color: var(--nt-link); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nt-link) 30%, transparent); } html[data-theme="light"] .briefing-page .speech-player { box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.10); } @media (max-width: 767.98px) { .speech-player { border-radius: 0; } .speech-btn { width: var(--tap-min, 44px); height: var(--tap-min, 44px); } .speech-btn::before { inset: 0; } .speech-select select { max-width: 120px; min-height: var(--tap-min, 44px); } }