/* BullShift 2nd Generation Edition Page Styles Covers the card/column layout added in the 2026 redesign. Loaded by index.html and all past_editions/*.html pages. Do not merge into bullshift.css (that file is a protected archive). */ /* ============================================================ THEME TOKENS — edit only this section to restyle the page. Apply themes via data-theme attribute on : data-theme="light" → light background variant data-theme="high-contrast" → high-contrast dark variant Omit the attribute for the default dark theme. ============================================================ */ :root { /* --- Backgrounds (depth layers) --- */ --bs-bg-base: #111; /* body, footer */ --bs-bg-bar: #1a1a1a; /* edition bar, image placeholders */ --bs-bg-card: #1c1c1c; /* standard cards */ --bs-bg-elevated: #1e1e1e; /* menus, popups */ --bs-bg-inset: #161616; /* editor's note, editorial panel */ --bs-bg-pill: #222; /* generic pill / badge bg */ /* --- Category card tinted backgrounds --- */ --bs-tits-bg: #1a0a00; --bs-highlight-bg: #0a160a; /* --- Borders --- */ --bs-border-faint: #222; --bs-border-default: #2a2a2a; --bs-border-strong: #333; --bs-switch-border: #3a3a3a; /* --- Text hierarchy (light → dim, for use on dark backgrounds) --- */ --bs-text-white: #fff; --bs-text-heading: #e0e0e0; --bs-text-base: #ccc; --bs-text-soft: #bbb; --bs-text-faded: #aaa; --bs-text-secondary: #888; --bs-text-dim: #777; --bs-text-muted: #666; --bs-text-subtle: #555; --bs-text-faint: #444; --bs-text-ghost: #333; /* --- Cover text (always on dark image overlay — never inverted by themes) --- */ --bs-cover-text: #fff; --bs-cover-sub: #aaa; --bs-cover-date: #ddd; /* --- Brand accent — Blue --- */ --bs-accent: #477EF4; --bs-accent-rgb: 71, 126, 244; --bs-accent-hover: #7aaaf8; --bs-accent-visited: #6b4fa0; /* --- Editorial / fallacy accent — Orange --- */ --bs-orange: #fb923c; --bs-orange-rgb: 251, 146, 60; --bs-orange-hover: #fdba74; /* --- Category accent — Green (highlight cards, merch price) --- */ --bs-green: #22c55e; --bs-green-rgb: 34, 197, 94; --bs-green-light: #86efac; /* --- Category accent — Orange-red (TITS cards) --- */ --bs-tits: #ff6600; --bs-tits-rgb: 255, 102, 0; --bs-tits-light: #ff8c42; /* --- Content-type badges --- */ --bs-badge-bg: #282828; --bs-badge-text: #666; --bs-badge-video-bg: #1a1028; --bs-badge-video: #9b6aff; --bs-badge-social-bg: #0a1a2a; --bs-badge-social: #38bdf8; --bs-badge-gov-bg: #1a150a; --bs-badge-gov: #d97706; --bs-badge-pdf-bg: #1a0a0a; --bs-badge-pdf: #f87171; /* --- Ad card --- */ --bs-ad-bg: #181820; --bs-ad-border: #2a2a3a; --bs-ad-accent: #5555aa; --bs-ad-text: #8888cc; --bs-ad-hover: #aaaaee; /* --- Scrollbars --- */ --bs-scroll-thumb: #3a3a4a; --bs-scroll-thumb-hover: #5a5a7a; --bs-scroll-track: #1a1a1a; /* --- Merchandise CTA --- */ --bs-merch-border: #2a3a6a; --bs-merch-hover: #1a2a4a; /* --- Video link title --- */ --bs-video-title: #c8cfe8; /* --- Fallacy popup links --- */ --bs-fp-url: #5588cc; --bs-fp-url-hover: #7aaae0; /* --- Unavailable badge / popup --- */ --bs-unavail: #94a3b8; --bs-unavail-rgb: 148, 163, 184; --bs-unavail-hover: #cbd5e1; --bs-unavail-bg: #1a1f2e; --bs-unavail-border: #2e3a4e; --bs-unavail-text: #8899aa; --bs-unavail-url: #4a5a6a; /* --- Podcast section --- */ --bs-podcast-bg: #0d1a0d; --bs-podcast-border: #1a3a1a; --bs-podcast-accent: #66cc88; --bs-podcast-sub: #444488; --bs-podcast-play-bg: #0a2010; --bs-podcast-play-border: #336633; --bs-podcast-play-hover: #142814; --bs-podcast-playing: #aaddaa; --bs-podcast-time: #555566; --bs-podcast-track: #1a2a1a; /* --- Card scroll cap --- */ --bs-card-max-h: 640px; } /* ---- Light Theme ---- */ [data-theme="light"] { --bs-bg-base: #f5f5f5; --bs-bg-bar: #ebebeb; --bs-bg-card: #ffffff; --bs-bg-elevated: #f0f0f0; --bs-bg-inset: #e8e8e8; --bs-bg-pill: #e0e0e0; --bs-tits-bg: #fff3ee; --bs-highlight-bg: #f0fff4; --bs-border-faint: #e0e0e0; --bs-border-default: #d0d0d0; --bs-border-strong: #bbb; --bs-switch-border: #ccc; --bs-text-heading: #111; --bs-text-base: #333; --bs-text-soft: #444; --bs-text-faded: #555; --bs-text-secondary: #666; --bs-text-dim: #777; --bs-text-muted: #888; --bs-text-subtle: #999; --bs-text-faint: #aaa; --bs-text-ghost: #bbb; --bs-accent: #1d4ed8; --bs-accent-rgb: 29, 78, 216; --bs-accent-hover: #1e40af; --bs-accent-visited: #6b21a8; --bs-orange: #c2410c; --bs-orange-rgb: 194, 65, 12; --bs-orange-hover: #9a3412; --bs-green: #16a34a; --bs-green-rgb: 22, 163, 74; --bs-green-light: #15803d; --bs-tits: #c2400c; --bs-tits-rgb: 194, 64, 12; --bs-tits-light: #9a3412; --bs-badge-bg: #e8e8e8; --bs-badge-text: #555; --bs-badge-video-bg: #ede9fe; --bs-badge-video: #5b21b6; --bs-badge-social-bg: #e0f2fe; --bs-badge-social: #0369a1; --bs-badge-gov-bg: #fef3c7; --bs-badge-gov: #92400e; --bs-badge-pdf-bg: #fee2e2; --bs-badge-pdf: #991b1b; --bs-ad-bg: #f0f0f8; --bs-ad-border: #d0d0e8; --bs-ad-accent: #4444aa; --bs-ad-text: #5555bb; --bs-ad-hover: #2233aa; --bs-scroll-thumb: #c0c0c0; --bs-scroll-thumb-hover: #999; --bs-scroll-track: #e8e8e8; --bs-merch-border: #93c5fd; --bs-merch-hover: #dbeafe; --bs-video-title: #1e3a5f; --bs-fp-url: #1d4ed8; --bs-fp-url-hover: #1e40af; --bs-unavail: #475569; --bs-unavail-rgb: 71, 85, 105; --bs-unavail-hover: #1e293b; --bs-unavail-bg: #f0f4f8; --bs-unavail-border: #94a3b8; --bs-unavail-text: #475569; --bs-unavail-url: #64748b; --bs-podcast-bg: #f0faf4; --bs-podcast-border: #86efac; --bs-podcast-accent: #16a34a; --bs-podcast-sub: #22c55e; --bs-podcast-play-bg: #dcfce7; --bs-podcast-play-border: #16a34a; --bs-podcast-play-hover: #bbf7d0; --bs-podcast-playing: #15803d; --bs-podcast-time: #4ade80; --bs-podcast-track: #bbf7d0; } /* ---- High Contrast Dark Theme ---- */ [data-theme="high-contrast"] { --bs-bg-base: #000; --bs-bg-bar: #0a0a0a; --bs-bg-card: #0d0d0d; --bs-bg-elevated: #111; --bs-bg-inset: #080808; --bs-bg-pill: #1a1a1a; --bs-tits-bg: #120400; --bs-highlight-bg: #001200; --bs-border-faint: #333; --bs-border-default: #555; --bs-border-strong: #777; --bs-switch-border: #666; --bs-text-heading: #fff; --bs-text-base: #f0f0f0; --bs-text-soft: #e0e0e0; --bs-text-faded: #d0d0d0; --bs-text-secondary: #bbb; --bs-text-dim: #aaa; --bs-text-muted: #999; --bs-text-subtle: #888; --bs-text-faint: #777; --bs-text-ghost: #666; --bs-accent: #60a5fa; --bs-accent-rgb: 96, 165, 250; --bs-accent-hover: #93c5fd; --bs-accent-visited: #a78bfa; --bs-orange: #fb923c; --bs-orange-rgb: 251, 146, 60; --bs-orange-hover: #fed7aa; --bs-green: #4ade80; --bs-green-rgb: 74, 222, 128; --bs-green-light: #86efac; --bs-tits: #ff6600; --bs-tits-rgb: 255, 102, 0; --bs-tits-light: #ff9944; --bs-badge-bg: #1a1a1a; --bs-badge-text: #aaa; --bs-badge-video-bg: #1a0a2a; --bs-badge-video: #c084fc; --bs-badge-social-bg: #0a1a2a; --bs-badge-social: #7dd3fc; --bs-badge-gov-bg: #1a1000; --bs-badge-gov: #fbbf24; --bs-badge-pdf-bg: #1a0000; --bs-badge-pdf: #fca5a5; --bs-ad-bg: #0d0d1a; --bs-ad-border: #333355; --bs-ad-accent: #7777cc; --bs-ad-text: #aaaaee; --bs-ad-hover: #ccccff; --bs-scroll-thumb: #555; --bs-scroll-thumb-hover: #888; --bs-scroll-track: #111; --bs-merch-border: #3b82f6; --bs-merch-hover: #1e3a5f; --bs-video-title: #e0e8ff; --bs-fp-url: #60a5fa; --bs-fp-url-hover: #93c5fd; --bs-unavail: #94a3b8; --bs-unavail-rgb: 148, 163, 184; --bs-unavail-hover: #e2e8f0; --bs-unavail-bg: #0a1020; --bs-unavail-border: #475569; --bs-unavail-text: #94a3b8; --bs-unavail-url: #64748b; --bs-podcast-bg: #001a00; --bs-podcast-border: #1a5a1a; --bs-podcast-accent: #4ade80; --bs-podcast-sub: #22c55e; --bs-podcast-play-bg: #002a00; --bs-podcast-play-border: #4ade80; --bs-podcast-play-hover: #003a00; --bs-podcast-playing: #86efac; --bs-podcast-time: #22c55e; --bs-podcast-track: #0a2a0a; } /* ============================================================ PAGE STYLES — use var(--bs-*) tokens; do not hardcode colors ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bs-bg-base); color: var(--bs-text-base); font-family: Helvetica, Arial, sans-serif; } /* ---- Cover ---- */ .bs-cover { position: relative; width: 100%; height: 420px; overflow: hidden; background: #000; } .bs-cover-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0.55; display: block; } .bs-cover-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.85) 100% ); display: flex; flex-direction: column; justify-content: flex-end; padding: 32px 48px; } .bs-masthead { display: flex; align-items: baseline; gap: 20px; margin-bottom: 10px; } .bs-masthead-title { font-size: 3.2rem; font-weight: 900; letter-spacing: -0.02em; color: var(--bs-cover-text); text-shadow: 0 2px 16px rgba(0,0,0,0.8); line-height: 1; } .bs-masthead-title span { color: var(--bs-accent); } .bs-masthead-tagline { font-size: 0.85rem; color: var(--bs-cover-sub); letter-spacing: 0.08em; text-transform: uppercase; } .bs-cover-date { font-size: 1.05rem; color: var(--bs-cover-date); font-weight: 500; letter-spacing: 0.04em; } /* ---- Edition dropdown ---- */ .bs-edition-dropdown { position: relative; display: inline-flex; } .bs-edition-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; letter-spacing: 0.04em; background: rgba(var(--bs-accent-rgb), 0.15); color: var(--bs-accent); white-space: nowrap; border: none; cursor: pointer; font-family: inherit; line-height: inherit; transition: background 0.15s; } .bs-edition-pill:hover { background: rgba(var(--bs-accent-rgb), 0.27); } .bs-edition-arrow { margin-left: 5px; font-size: 0.6em; opacity: 0.65; display: inline-block; transition: transform 0.15s ease; } .bs-edition-dropdown.open .bs-edition-arrow { transform: rotate(180deg); } .bs-edition-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; max-height: 420px; overflow-y: auto; background: var(--bs-bg-elevated); border: 1px solid var(--bs-border-strong); border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.55); z-index: 500; scrollbar-width: thin; scrollbar-color: var(--bs-border-strong) transparent; } .bs-edition-menu::-webkit-scrollbar { width: 4px; } .bs-edition-menu::-webkit-scrollbar-thumb { background: var(--bs-border-strong); border-radius: 2px; } .bs-edition-dropdown.open .bs-edition-menu { display: block; } .bs-edition-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; color: var(--bs-text-faded); text-decoration: none; font-size: 0.75rem; white-space: nowrap; transition: background 0.1s, color 0.1s; cursor: pointer; } a.bs-edition-menu-item:hover { background: rgba(var(--bs-accent-rgb), 0.12); color: var(--bs-accent); } .bs-edition-menu-latest { color: var(--bs-accent); border-bottom: 1px solid var(--bs-border-default); } .bs-edition-menu-current { color: var(--bs-text-subtle); cursor: default; } .bs-edition-menu-check { color: var(--bs-accent); font-size: 0.8em; flex-shrink: 0; } .bs-edition-menu-badge { font-size: 0.65em; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(var(--bs-accent-rgb), 0.2); color: var(--bs-accent); padding: 1px 5px; border-radius: 3px; flex-shrink: 0; } .bs-edition-menu-divider { height: 1px; background: var(--bs-border-default); margin: 2px 0; } .bs-edition-menu-prevyear { color: var(--bs-text-subtle); font-size: 0.72rem; } a.bs-edition-menu-prevyear:hover { color: var(--bs-text-dim); } /* ---- Edition bar ---- */ .bs-edition-bar { background: var(--bs-bg-bar); border-bottom: 1px solid var(--bs-border-default); padding: 10px 48px; display: flex; align-items: center; gap: 24px; font-size: 0.78rem; color: var(--bs-text-muted); } .bs-edition-bar .pill { padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; letter-spacing: 0.04em; background: var(--bs-bg-pill); color: var(--bs-text-secondary); } .bs-edition-bar .pill.blue { background: rgba(var(--bs-accent-rgb), 0.15); color: var(--bs-accent); white-space: normal; } .bs-edition-bar-sep { color: rgba(var(--bs-accent-rgb), 0.5); margin: 0 2px; } .bs-edition-date { display: inline-block; white-space: nowrap; } .bs-edition-bar-spacer { flex: 1; } /* ---- View preference toggle switch ---- */ .bs-view-pref { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; color: var(--bs-text-subtle); white-space: nowrap; } .bs-view-pref-label { letter-spacing: 0.03em; } .bs-switch { position: relative; display: inline-block; width: 44px; height: 22px; flex-shrink: 0; } .bs-switch input { opacity: 0; width: 0; height: 0; } .bs-switch-track { position: absolute; inset: 0; background: var(--bs-border-default); border: 1px solid var(--bs-switch-border); border-radius: 11px; transition: background 0.2s, border-color 0.2s; cursor: pointer; } .bs-switch-track::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--bs-text-subtle); border-radius: 50%; transition: transform 0.2s, background 0.2s; } .bs-switch input:checked + .bs-switch-track { background: rgba(var(--bs-accent-rgb), 0.25); border-color: rgba(var(--bs-accent-rgb), 0.5); } .bs-switch input:checked + .bs-switch-track::before { transform: translateX(22px); background: var(--bs-accent); } .bs-switch input:focus-visible + .bs-switch-track { outline: 2px solid var(--bs-accent); outline-offset: 2px; } .bs-view-pref-opt { transition: color 0.2s; } .bs-view-pref-opt.active { color: var(--bs-text-base); } .bs-view-pref-compact { display: none; font-size: 0.85rem; font-weight: 700; color: var(--bs-text-subtle); line-height: 1; } @media (max-width: 660px) { .bs-edition-bar-counts { display: none; } .bs-view-pref-label { display: none; } .bs-edition-bar-sep { display: none; } .bs-edition-bar-wordmark { display: none; } .bs-view-pref-opt { display: none; } .bs-view-pref-compact { display: inline; } } /* ---- Editor's note ---- */ .bs-editors-note { border-left: 4px solid var(--bs-accent); margin: 24px 32px; padding: 18px 24px; background: var(--bs-bg-inset); border-radius: 0 4px 4px 0; } .bs-editors-note-label { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bs-accent); font-weight: 700; margin-bottom: 8px; } .bs-editors-note p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--bs-text-soft); font-style: italic; } /* ---- Section divider ---- */ .bs-section-divider { display: flex; align-items: center; gap: 16px; padding: 0 32px 16px; color: var(--bs-text-faint); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; } .bs-section-divider::before, .bs-section-divider::after { content: ""; flex: 1; height: 1px; background: var(--bs-border-default); } /* ---- News columns ---- */ .bs-columns-wrap { padding: 0 24px 48px; } .newsgrouping { column-count: 3; column-gap: 24px; padding: 0; margin: 0; list-style: none; } /* ---- Group card ---- */ .bs-card { break-inside: avoid; page-break-inside: avoid; background: var(--bs-bg-card); border-radius: 6px; margin-bottom: 18px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } .bs-card.card-TITS { background: var(--bs-tits-bg); box-shadow: 0 0 0 2px var(--bs-tits), 0 4px 16px rgba(var(--bs-tits-rgb), 0.2); } .bs-card.card-highlight { background: var(--bs-highlight-bg); box-shadow: 0 0 0 2px var(--bs-green), 0 4px 16px rgba(var(--bs-green-rgb), 0.15); } /* ---- Card header ---- */ .bs-card-header { padding: 10px 14px 6px; border-bottom: 1px solid var(--bs-border-default); cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .card-TITS .bs-card-header { border-bottom-color: rgba(var(--bs-tits-rgb), 0.3); } .card-highlight .bs-card-header { border-bottom-color: rgba(var(--bs-green-rgb), 0.2); } .bs-card-label { font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 4px; } .card-breaking .bs-card-label { color: var(--bs-text-subtle); } .card-TITS .bs-card-label { color: var(--bs-tits); } .card-highlight .bs-card-label { color: var(--bs-green); } .bs-card-heading { font-size: 0.88rem; font-weight: 700; color: var(--bs-text-heading); line-height: 1.35; } .card-TITS .bs-card-heading { color: var(--bs-tits-light); font-size: 1rem; } .card-highlight .bs-card-heading { color: var(--bs-green-light); } /* ---- Embedded media (YouTube iframe + title/summary) ---- */ .bs-card-video-block { border-bottom: 1px solid var(--bs-bg-elevated); } .bs-card-video-block:last-of-type { border-bottom: none; } .bs-video-link-title { padding: 8px 14px 4px; font-size: 0.82rem; font-weight: 600; line-height: 1.35; } .bs-video-link-title a { color: var(--bs-video-title); text-decoration: none; } .bs-video-link-title a:hover { color: var(--bs-accent); text-decoration: underline; } .bs-card-media { width: 100%; background: #000; overflow: hidden; display: block; } .bs-card-media iframe { width: 100%; height: 315px; border: 0; display: block; } .bs-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.8; transition: opacity 0.2s; } .bs-card-media img:hover { opacity: 1; } .bs-video-summary { padding: 6px 14px 10px; font-size: 0.78rem; color: var(--bs-text-secondary); line-height: 1.45; border-top: 1px solid var(--bs-bg-bar); } /* ---- Card body ---- */ .bs-card-body { padding: 8px 14px 12px; } /* Scroll cap — expanded cards only. Collapsed state unaffected. Tune --bs-card-max-h to adjust how many links show before scrolling. 640px ≈ 5 fully-enriched links (intro + summary each). */ .bs-card:not(.bs-collapsed) .bs-card-body { max-height: var(--bs-card-max-h); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bs-scroll-thumb) var(--bs-scroll-track); } .bs-card:not(.bs-collapsed) .bs-card-body::-webkit-scrollbar { width: 5px; } .bs-card:not(.bs-collapsed) .bs-card-body::-webkit-scrollbar-track { background: var(--bs-scroll-track); } .bs-card:not(.bs-collapsed) .bs-card-body::-webkit-scrollbar-thumb { background: var(--bs-scroll-thumb); border-radius: 3px; } .bs-card:not(.bs-collapsed) .bs-card-body::-webkit-scrollbar-thumb:hover { background: var(--bs-scroll-thumb-hover); } /* ---- Merchandise ad card ---- */ .bs-merch-ad { display: block; } .bs-merch-ad-link { display: flex; gap: 16px; align-items: flex-start; text-decoration: none; color: inherit; padding: 4px 0 8px; } .bs-merch-ad-img { width: 100px; height: 100px; object-fit: cover; border-radius: 4px; flex-shrink: 0; border: 1px solid var(--bs-border-default); background: var(--bs-bg-bar); } .bs-merch-ad-body { flex: 1; min-width: 0; } .bs-merch-ad-label { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bs-accent); font-weight: 700; margin-bottom: 5px; } .bs-merch-ad-name { font-size: 0.92rem; font-weight: 700; color: var(--bs-text-heading); line-height: 1.3; margin-bottom: 3px; } .bs-merch-ad-type { font-size: 0.72rem; color: var(--bs-text-muted); margin-bottom: 4px; } .bs-merch-ad-price { font-size: 0.82rem; font-weight: 700; color: var(--bs-green); margin-bottom: 8px; } .bs-merch-ad-cta { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--bs-accent); text-transform: uppercase; border: 1px solid var(--bs-merch-border); border-radius: 3px; padding: 3px 10px; } .bs-merch-ad-link:hover .bs-merch-ad-cta { background: var(--bs-merch-hover); border-color: var(--bs-accent); } @media (max-width: 480px) { .bs-merch-ad-img { width: 76px; height: 76px; } } /* ---- Link rows ---- */ .bs-link-row { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--bs-border-default); } .bs-link-row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } /* Emoji + fallacy badge + link title all on one line */ .bs-link-title-line { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; } .bs-link-row a { font-size: 0.8rem; line-height: 1.4; text-decoration: none; color: var(--bs-accent); font-weight: 500; transition: color 0.15s; word-break: break-word; } .bs-link-row a:visited { color: var(--bs-accent-visited); } .bs-link-row a:hover { color: var(--bs-accent-hover); text-decoration: underline; } .bs-link-meta { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; margin-bottom: 2px; } .bs-domain { font-size: 0.6rem; color: var(--bs-text-subtle); letter-spacing: 0.04em; font-weight: 600; flex-shrink: 0; } .bs-ct-badge { font-size: 0.58rem; padding: 1px 5px; border-radius: 3px; background: var(--bs-badge-bg); color: var(--bs-badge-text); letter-spacing: 0.05em; font-weight: 600; text-transform: uppercase; flex-shrink: 0; } .bs-ct-badge.badge-video { background: var(--bs-badge-video-bg); color: var(--bs-badge-video); } .bs-ct-badge.badge-social { background: var(--bs-badge-social-bg); color: var(--bs-badge-social); } .bs-ct-badge.badge-gov { background: var(--bs-badge-gov-bg); color: var(--bs-badge-gov); } .bs-ct-badge.badge-pdf { background: var(--bs-badge-pdf-bg); color: var(--bs-badge-pdf); } .bs-intro { font-size: 0.72rem; color: var(--bs-text-dim); line-height: 1.45; margin-top: 3px; } .bs-quick-summary { font-size: 0.70rem; color: var(--bs-text-subtle); line-height: 1.4; margin-top: 4px; font-style: italic; } /* ---- Editorial toggle + panel ---- */ .bs-editorial-toggle { display: inline; background: rgba(var(--bs-orange-rgb), 0.1); border: 1px solid rgba(var(--bs-orange-rgb), 0.35); border-radius: 3px; color: var(--bs-orange); font-size: 0.58rem; line-height: 1; padding: 1px 4px; cursor: pointer; vertical-align: middle; margin-left: 5px; font-weight: 700; font-style: normal; transition: color 0.15s, border-color 0.15s, background 0.15s; user-select: none; } .bs-editorial-toggle:hover { background: rgba(var(--bs-orange-rgb), 0.22); border-color: var(--bs-orange); color: var(--bs-orange-hover); } .bs-editorial-toggle[aria-expanded="true"] { background: rgba(var(--bs-accent-rgb), 0.12); color: var(--bs-accent); border-color: rgba(var(--bs-accent-rgb), 0.5); } .bs-editorial-toggle[aria-expanded="true"]:hover { background: rgba(var(--bs-accent-rgb), 0.22); border-color: var(--bs-accent); } .bs-editorial { font-size: 0.72rem; color: var(--bs-text-muted); line-height: 1.5; margin-top: 5px; padding: 6px 10px; background: var(--bs-bg-inset); border-left: 2px solid var(--bs-border-default); border-radius: 0 3px 3px 0; } /* Hide editorial panel when card is collapsed — but not if user explicitly expanded it */ .bs-collapsed .bs-editorial { display: none; } .bs-collapsed .bs-editorial:not([hidden]) { display: block; } /* ---- Ad card ---- */ .bs-card.card-ad { background: var(--bs-ad-bg); box-shadow: 0 0 0 1px var(--bs-ad-border); opacity: 0.9; } .card-ad .bs-card-label { color: var(--bs-ad-accent); letter-spacing: 0.18em; } .card-ad .bs-card-heading { color: var(--bs-ad-text); font-size: 0.82rem; } .card-ad .bs-link-row a { color: var(--bs-ad-text); font-size: 0.78rem; } .card-ad .bs-link-row a:hover { color: var(--bs-ad-hover); } .card-ad .bs-intro { color: var(--bs-text-muted); font-size: 0.7rem; } /* ---- Link emoji ---- */ .bs-link-emoji { flex-shrink: 0; font-style: normal; line-height: 1.4; } /* ---- Fallacy badge ---- */ .bs-fallacy-logo { width: 12px; height: 12px; object-fit: contain; vertical-align: middle; filter: sepia(70%) saturate(300%) hue-rotate(330deg) brightness(115%); } .bs-fp-header .bs-fallacy-logo { width: 16px; height: 16px; } .bs-fallacy-badge { display: inline-flex; align-items: center; gap: 3px; background: rgba(var(--bs-orange-rgb), 0.15); color: var(--bs-orange); border: 1px solid rgba(var(--bs-orange-rgb), 0.3); border-radius: 3px; padding: 1px 5px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; vertical-align: middle; margin-left: 5px; white-space: nowrap; user-select: none; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; } .bs-fallacy-badge:hover { background: rgba(var(--bs-orange-rgb), 0.32); border-color: var(--bs-orange); color: var(--bs-orange-hover); box-shadow: 0 0 0 2px rgba(var(--bs-orange-rgb), 0.18); } /* ---- Fallacy popup (position:fixed, hoisted to by JS) ---- */ .bs-fallacy-popup { display: none; position: fixed; z-index: 9999; /* width + max-height set by JS after layout so measurements are accurate */ overflow-x: hidden; overflow-y: auto; overflow-wrap: break-word; word-break: break-word; white-space: normal; background: var(--bs-bg-elevated); border: 1px solid var(--bs-scroll-thumb); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.7); padding: 16px 18px; box-sizing: border-box; } .bs-fp-header { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bs-orange); font-weight: 700; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--bs-border-default); } .bs-fp-article { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--bs-border-default); } .bs-fp-article-title { font-size: 0.82rem; font-weight: 600; color: var(--bs-text-heading); line-height: 1.4; margin-bottom: 4px; overflow-wrap: break-word; word-break: break-word; } .bs-fp-article-url { font-size: 0.65rem; color: var(--bs-text-subtle); overflow-wrap: break-word; word-break: break-all; } .bs-fp-article-url a { color: var(--bs-fp-url); text-decoration: none; } .bs-fp-article-url a:hover { text-decoration: underline; color: var(--bs-fp-url-hover); } .bs-fp-item { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--bs-border-default); } .bs-fp-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .bs-fp-name { font-size: 0.88rem; font-weight: 700; color: var(--bs-text-heading); margin-bottom: 4px; } .bs-fp-desc { font-size: 0.78rem; color: var(--bs-text-secondary); line-height: 1.5; margin-bottom: 8px; font-style: italic; } .bs-fp-quote { margin: 0 0 6px 0; padding: 7px 10px; background: var(--bs-bg-inset); border-left: 3px solid var(--bs-orange); font-size: 0.78rem; color: var(--bs-text-base); line-height: 1.5; font-style: italic; border-radius: 0 3px 3px 0; } .bs-fp-loc { font-size: 0.65rem; color: var(--bs-text-muted); letter-spacing: 0.04em; } /* ---- Unavailable link badge ---- */ .bs-unavail-badge { display: inline-flex; align-items: center; gap: 3px; background: rgba(var(--bs-unavail-rgb), 0.12); color: var(--bs-unavail); border: 1px solid rgba(var(--bs-unavail-rgb), 0.25); border-radius: 3px; padding: 1px 5px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; cursor: help; vertical-align: middle; margin-left: 5px; white-space: nowrap; user-select: none; } .bs-unavail-badge:hover { background: rgba(var(--bs-unavail-rgb), 0.22); border-color: var(--bs-unavail); color: var(--bs-unavail-hover); } /* ---- Unavailable popup (position:fixed, placed by JS) ---- */ .bs-unavail-popup { display: none; position: fixed; z-index: 9999; /* width set by JS after layout */ overflow-x: hidden; overflow-y: auto; overflow-wrap: break-word; word-break: break-word; white-space: normal; background: var(--bs-unavail-bg); border: 1px solid var(--bs-unavail-border); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.7); padding: 14px 16px; box-sizing: border-box; } .bs-up-header { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bs-unavail); font-weight: 700; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--bs-unavail-border); } .bs-up-body { font-size: 0.78rem; color: var(--bs-unavail-text); line-height: 1.55; } .bs-up-url { margin-top: 8px; font-size: 0.67rem; color: var(--bs-unavail-url); word-break: break-all; font-family: monospace; } /* ---- Collapse / expand ---- */ .bs-card-header-text { flex: 1; min-width: 0; } .bs-card-toggle { flex-shrink: 0; display: flex; align-items: center; gap: 4px; color: rgba(var(--bs-orange-rgb), 0.55); margin-top: 4px; transition: color 0.15s; } .bs-card-header:hover .bs-card-toggle { color: var(--bs-orange); } .bs-toggle-text { display: none; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .bs-toggle-icon { display: inline-block; font-size: 0.6rem; transition: transform 0.2s ease; } /* Collapsed: show "expand" label, rotate arrow to point right */ .bs-collapsed .bs-toggle-text { display: inline; } .bs-collapsed .bs-toggle-icon { transform: rotate(-90deg); } /* In collapsed state: hide overflow links, all intro text, and media */ .bs-collapsed .bs-link-overflow { display: none; } .bs-collapsed .bs-intro { display: none; } .bs-collapsed .bs-quick-summary { display: none; } .bs-collapsed .bs-card-media { display: none; } .bs-collapsed .bs-video-link-title { display: none; } .bs-collapsed .bs-video-summary { display: none; } /* ...but show the intro and summary for the very first link */ .bs-collapsed .bs-link-first-preview .bs-intro { display: block; } .bs-collapsed .bs-link-first-preview .bs-quick-summary { display: block; } /* Expand counter (+N) shown only in collapsed state */ .bs-toggle-count { display: none; font-size: 0.6rem; font-weight: 600; color: rgba(var(--bs-orange-rgb), 0.55); letter-spacing: 0.02em; } .bs-card-header:hover .bs-toggle-count { color: var(--bs-orange); } .bs-collapsed .bs-toggle-count { display: inline; } /* Remove separator and bottom padding after the last visible preview link */ .bs-collapsed .bs-link-last-preview { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .bs-collapsed .bs-card-body { padding-bottom: 8px; } /* ---- Footer ---- */ .bs-footer { background: var(--bs-bg-base); border-top: 1px solid var(--bs-border-faint); padding: 40px 48px 32px; margin-top: 24px; } .bs-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 48px; flex-wrap: wrap; } .bs-footer-col { flex: 1; min-width: 180px; } .bs-footer-heading { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bs-text-subtle); font-weight: 700; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--bs-border-faint); } .bs-footer-link { display: block; font-size: 0.75rem; color: var(--bs-accent); text-decoration: none; padding: 3px 0; transition: color 0.15s; } .bs-footer-link:hover { color: var(--bs-accent-hover); text-decoration: underline; } .bs-footer-link.legacy { color: var(--bs-text-faded); font-weight: 600; } .bs-footer-link.legacy:hover { color: var(--bs-text-white); } .bs-footer-archive { columns: 2; column-gap: 16px; } .bs-footer-bottom { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--bs-bg-elevated); font-size: 0.65rem; color: var(--bs-text-ghost); text-align: center; letter-spacing: 0.04em; } /* ---- Responsive ---- */ @media (max-width: 1100px) { .newsgrouping { column-count: 2; } .bs-cover { height: 320px; } .bs-cover-overlay { padding: 24px 28px; } .bs-masthead-title { font-size: 2.4rem; } } @media (max-width: 680px) { .newsgrouping { column-count: 1; } .bs-cover { height: 260px; } .bs-masthead-title { font-size: 1.8rem; } .bs-columns-wrap { padding: 0 12px 32px; } .bs-footer { padding: 28px 16px 20px; } .bs-footer-inner { gap: 28px; } .bs-footer-archive { columns: 1; } } /* ---- Podcast player ---- */ .bs-podcast-bar { display: flex; align-items: center; gap: 12px; background: var(--bs-podcast-bg); border-top: 1px solid var(--bs-podcast-border); border-bottom: 1px solid var(--bs-podcast-border); padding: 10px 18px; flex-wrap: wrap; } .bs-podcast-icon { font-size: 1.4rem; flex-shrink: 0; } .bs-podcast-label { flex-shrink: 0; min-width: 160px; } .bs-podcast-title { font-size: 0.75rem; font-weight: 700; color: var(--bs-podcast-accent); letter-spacing: 0.04em; } .bs-podcast-sub { font-size: 0.62rem; color: var(--bs-podcast-sub); margin-top: 1px; } .bs-podcast-controls { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; } .bs-podcast-play { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--bs-podcast-play-border); background: var(--bs-podcast-play-bg); color: var(--bs-podcast-accent); font-size: 0.85rem; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; padding: 0; } .bs-podcast-play:hover { background: var(--bs-podcast-play-hover); border-color: var(--bs-podcast-accent); } .bs-podcast-play.playing { color: var(--bs-podcast-playing); } .bs-podcast-progress-wrap { display: flex; align-items: center; gap: 7px; flex: 1; } .bs-podcast-time { font-size: 0.62rem; color: var(--bs-podcast-time); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 30px; } .bs-podcast-seek { flex: 1; height: 3px; -webkit-appearance: none; appearance: none; background: var(--bs-podcast-track); border-radius: 2px; outline: none; cursor: pointer; } .bs-podcast-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--bs-podcast-accent); cursor: pointer; } .bs-podcast-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--bs-podcast-accent); border: none; cursor: pointer; } @media (max-width: 500px) { .bs-podcast-label { display: none; } } /* ---- Theme switcher ---- */ .bs-theme-toggle { display: flex; align-items: center; gap: 2px; margin-left: 8px; flex-shrink: 0; } .bs-theme-btn { width: 26px; height: 26px; padding: 5px; border-radius: 4px; border: 1px solid var(--bs-text-subtle); background: transparent; color: var(--bs-text-subtle); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; } .bs-theme-btn:hover { border-color: var(--bs-accent-hover); } .bs-theme-btn.active { background: rgba(var(--bs-accent-rgb), 0.15); border-color: var(--bs-accent-hover); color: var(--bs-accent-hover); }