/* ============================================================ Aggregator Sites — shared stylesheet Editorial / WSJ-FT inspired. Used by all four sites (FIRE / Security / AI-ML / Golf). Per-site palette is selected by [data-theme] on ; dark/light by `.dark` on . ============================================================ */ /* ----- Per-site light palettes -----------------------------*/ [data-theme="fire"] { --paper: #fbf9f4; --bg: var(--paper); --bg-elevated: #ffffff; --bg-muted: #f3efe7; --border: #e5dfd1; --border-strong: #cfc7b3; --rule: #1a1a1a; --text: #1a1a1a; --text-muted: #4a4a4a; --text-subtle: #7a7568; --accent: #15803d; --accent-soft: rgba(21,128,61,0.08); } [data-theme="security"] { --paper: #fafaf8; --bg: var(--paper); --bg-elevated: #ffffff; --bg-muted: #f0eeea; --border: #e0dcd2; --border-strong: #c2bdaf; --rule: #1a1a1a; --text: #16110f; --text-muted: #4a3f3b; --text-subtle: #756a64; --accent: #a51c30; --accent-soft: rgba(165,28,48,0.08); } [data-theme="ai"] { --paper: #f7f8fb; --bg: var(--paper); --bg-elevated: #ffffff; --bg-muted: #ecedf2; --border: #dadbe2; --border-strong: #b9bac5; --rule: #1a1a1a; --text: #14141c; --text-muted: #3f4051; --text-subtle: #6b6c7e; --accent: #4338ca; --accent-soft: rgba(67,56,202,0.08); } [data-theme="golf"] { --paper: #f7f6ee; --bg: var(--paper); --bg-elevated: #ffffff; --bg-muted: #efece0; --border: #ddd9c7; --border-strong: #c5bfa6; --rule: #1a1a1a; --text: #131611; --text-muted: #3e4537; --text-subtle: #6b7160; --accent: #166534; --accent-soft: rgba(22,101,52,0.08); } /* ----- Per-site dark palettes ------------------------------*/ .dark [data-theme="fire"] { --paper: #0d100e; --bg: var(--paper); --bg-elevated: #161a17; --bg-muted: #131715; --border: #232826; --border-strong: #313633; --rule: #d2d2d2; --text: #e9e7e0; --text-muted: #a8a59a; --text-subtle: #7a7569; --accent: #22c55e; --accent-soft: rgba(34,197,94,0.1); } .dark [data-theme="security"] { --paper: #0e0a0a; --bg: var(--paper); --bg-elevated: #181111; --bg-muted: #150f0f; --border: #2a1f1f; --border-strong: #3a2c2c; --rule: #d2c8c8; --text: #f0e6e4; --text-muted: #b3a39d; --text-subtle: #847672; --accent: #f43f5e; --accent-soft: rgba(244,63,94,0.1); } .dark [data-theme="ai"] { --paper: #0a0b14; --bg: var(--paper); --bg-elevated: #12141d; --bg-muted: #0f111a; --border: #1f2230; --border-strong: #2c3045; --rule: #c8cae0; --text: #e6e7f0; --text-muted: #a0a3b8; --text-subtle: #707388; --accent: #818cf8; --accent-soft: rgba(129,140,248,0.12); } .dark [data-theme="golf"] { --paper: #0a0e0b; --bg: var(--paper); --bg-elevated: #131814; --bg-muted: #0f1410; --border: #1e2620; --border-strong: #2a3429; --rule: #cbd2c8; --text: #e6ebe2; --text-muted: #9eaa97; --text-subtle: #6e7a68; --accent: #4ade80; --accent-soft: rgba(74,222,128,0.1); } /* ----- Base ------------------------------------------------ */ html, body { background: var(--bg); color: var(--text); font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-feature-settings: "ss01", "cv11"; } body { transition: background-color .15s ease, color .15s ease; } a { color: inherit; } /* ----- Local utility fallback ------------------------------ The generated pages use a small Tailwind-shaped utility vocabulary. Keep those classes working locally even when the Tailwind browser runtime is slow, blocked, or opened from file:// during review. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } .mx-auto { margin-left: auto; margin-right: auto; } .max-w-7xl { max-width: 80rem; } .max-w-3xl { max-width: 48rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-2 { padding-top: .5rem; padding-bottom: .5rem; } .py-3 { padding-top: .75rem; padding-bottom: .75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .pb-8 { padding-bottom: 2rem; } .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-12 { margin-top: 3rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .ml-auto { margin-left: auto; } .flex { display: flex; } .inline-block { display: inline-block; } .block { display: block; } .hidden { display: none; } .grid { display: grid; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .self-center { align-self: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .flex-wrap { flex-wrap: wrap; } .shrink-0 { flex-shrink: 0; } .overflow-x-auto { overflow-x: auto; } .gap-2 { gap: .5rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-8 { gap: 2rem; } .gap-x-5 { column-gap: 1.25rem; } .gap-y-1 { row-gap: .25rem; } .w-px { width: 1px; } .h-5 { height: 1.25rem; } .h-9 { height: 2.25rem; } .h-10 { height: 2.5rem; } .w-\[260px\] { width: 260px; } .border-b { border-bottom: 1px solid var(--border); } .border-t { border-top: 1px solid var(--border); } .border-l { border-left: 1px solid var(--border); } .border-b.rule-thick { border-top: 0; border-bottom-width: 2px; } .text-center { text-align: center; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .tracking-tight { letter-spacing: 0; } .leading-none { line-height: 1; } .leading-tight { line-height: 1.18; } .leading-7 { line-height: 1.75rem; } .text-\[13px\] { font-size: 13px; } .text-\[13\.5px\] { font-size: 13.5px; } .text-\[15px\] { font-size: 15px; } .text-\[28px\] { font-size: 28px; } .text-\[34px\] { font-size: 34px; } .text-\[36px\] { font-size: 36px; } #navbar > div, main, .news-ticker > div, header > div, body > .border-b > div { width: 100%; } #navbar > div { min-height: 56px; flex-wrap: nowrap; } #navbar .section-link { white-space: nowrap; scroll-snap-align: start; } #navbar .search-wrap { min-width: 300px; } .nav-scroll { position: relative; scroll-snap-type: x proximity; scroll-padding-left: 0; padding-left: 16px; padding-right: 16px; } .nav-scroll::-webkit-scrollbar { display: none; } .nav-scroll { scrollbar-width: none; } /* Edge fades — only when there is more content in that direction. */ .nav-scroll[data-overflow="start"] { -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%); } .nav-scroll[data-overflow="middle"] { -webkit-mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%); } .nav-scroll[data-overflow="end"] { -webkit-mask-image: linear-gradient(to right, transparent 0, black 32px); mask-image: linear-gradient(to right, transparent 0, black 32px); } /* Chevron buttons — appear when there is more content in their direction and scroll the nav when clicked (essential on desktop where there is no swipe). */ .nav-scroll-wrap { position: relative; display: flex; flex: 1 1 auto; min-width: 0; } .nav-chevron, .nav-chevron-back { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; font-size: 18px; font-weight: 600; line-height: 1; color: var(--text-muted); background: transparent; border: 0; border-radius: 999px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .15s ease, background .15s ease, color .15s ease; z-index: 1; } .nav-chevron { right: 0; } .nav-chevron-back { left: 0; } .nav-chevron:hover, .nav-chevron-back:hover { background: var(--bg-muted); color: var(--text); } .nav-scroll-wrap[data-overflow="start"] .nav-chevron, .nav-scroll-wrap[data-overflow="middle"] .nav-chevron { opacity: 1; pointer-events: auto; } .nav-scroll-wrap[data-overflow="middle"] .nav-chevron-back, .nav-scroll-wrap[data-overflow="end"] .nav-chevron-back { opacity: 1; pointer-events: auto; } .btn.btn-icon { padding: 6px 8px; font-size: 16px; line-height: 1; } @media (min-width: 640px) { .sm\:flex { display: flex; } .sm\:inline-block { display: inline-block; } .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .sm\:py-4 { padding-top: 1rem; padding-bottom: 1rem; } .sm\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .sm\:text-\[13\.5px\] { font-size: 13.5px; } .sm\:text-\[34px\] { font-size: 34px; } .sm\:text-\[36px\] { font-size: 36px; } } @media (min-width: 768px) { .md\:flex { display: flex; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; } .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .lg\:col-span-5 { grid-column: span 5 / span 5; } .lg\:col-span-7 { grid-column: span 7 / span 7; } .lg\:gap-10 { gap: 2.5rem; } .lg\:pl-8 { padding-left: 2rem; } .lg\:border-l { border-left: 1px solid var(--border); } } @media (min-width: 1280px) { .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-feature-settings: "tnum"; } .smallcaps { font-family: "JetBrains Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; color: var(--text-subtle); } .headline { letter-spacing: 0; } .display { letter-spacing: 0; } .rule-thick { border-top: 2px solid var(--rule); } .rule-thin { border-top: 1px solid var(--border); } .rule-accent{ border-top: 3px solid var(--accent); } .v-rule { border-left: 1px solid var(--border); } /* ----- Components ----------------------------------------- */ .card { background: var(--bg-elevated); border: 1px solid var(--border); transition: border-color .15s ease; } .card:hover { border-color: var(--border-strong); } .row { display: block; position: relative; padding: 10px 0; border-top: 1px solid var(--border); transition: color .12s ease; } .row:first-child { border-top: 0; } .row.is-collapsed { display: none; } .row a { color: var(--text); text-decoration: none; } .row:hover a { color: var(--accent); } .row .meta { display: block; font-size: 11.5px; color: var(--text-subtle); margin-top: 2px; font-family: "JetBrains Mono", ui-monospace, monospace; } .row-title { font-size: 14px; line-height: 1.4; } /* Density modes */ body[data-density="compact"] .row { padding: 6px 0; } body[data-density="compact"] .row-title { font-size: 13px; line-height: 1.35; } body[data-density="compact"] .row .meta { display: none; } body[data-density="compact"] .card-head { padding: 12px 16px 10px; } body[data-density="compact"] .card-body { padding: 4px 16px 8px; } body[data-density="compact"] .card-foot { padding: 8px 16px 12px; } body[data-density="comfortable"] .row { padding: 11px 0; } body[data-density="comfortable"] .row-title { font-size: 14.5px; line-height: 1.45; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 13px; font-weight: 500; border-radius: 6px; transition: background .15s ease, color .15s ease, border-color .15s ease; cursor: pointer; border: 0; background: transparent; } .btn-primary { background: var(--accent); color: white; } .btn-primary:hover { filter: brightness(1.05); } .btn-ghost { color: var(--text-muted); } .btn-ghost:hover { background: var(--bg-muted); color: var(--text); } .btn-outline { border: 1px solid var(--border); color: var(--text); background: transparent; } .btn-outline:hover { border-color: var(--border-strong); background: var(--bg-elevated); } .seg-btn { padding: 5px 10px; font-size: 12px; color: var(--text-muted); border-radius: 4px; font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.04em; background: transparent; border: 0; cursor: pointer; } .seg-btn:hover { color: var(--text); } .seg-btn.is-active { background: var(--text); color: var(--bg); } .dot { width: 4px; height: 4px; border-radius: 999px; background: var(--text-subtle); display: inline-block; } /* Section nav (sub-masthead) */ .section-link { padding: 12px 0; margin-right: 22px; font-size: 13.5px; font-weight: 500; color: var(--text); border-bottom: 2px solid transparent; text-decoration: none; } .section-link.is-active { border-bottom-color: var(--accent); color: var(--text); } .section-link:hover { color: var(--accent); } /* "What's New" numbered list */ .news-num { counter-reset: news; } .news-num li { counter-increment: news; display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); list-style: none; } .news-num li:first-child { border-top: 0; padding-top: 0; } .news-num li::before { content: counter(news); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--accent); padding-top: 1px; } .news-num h4 { font-size: 13.75px; line-height: 1.25; font-weight: 600; color: var(--text); margin: 0; } .news-num h4 a { color: inherit; text-decoration: none; } .news-num h4 a:hover { color: var(--accent); } .news-num .src { font-size: 11px; color: var(--text-subtle); margin-top: 2px; font-family: "JetBrains Mono", ui-monospace, monospace; } /* Topic tags */ .topic { display: inline-flex; align-items: center; padding: 5px 10px; font-size: 11.5px; font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.04em; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; background: transparent; cursor: pointer; transition: all .12s ease; } .topic:hover { color: var(--accent); border-color: var(--accent); } /* Card head/foot scaffolding */ .card-head { padding: 16px 20px 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); } .card-body { padding: 4px 20px 8px; } .card-foot { padding: 10px 20px 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); } .card-avatar { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; font-size: 12.5px; background: var(--accent-soft); color: var(--accent); } .card-source { font-weight: 600; font-size: 14.5px; color: var(--text); display: block; text-decoration: none; } .card-meta { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--text-subtle); margin-top: 2px; } /* Hidden by search filter */ .card.is-hidden { display: none; } .no-results { display: none; text-align: center; margin-top: 3rem; color: var(--text-muted); font-size: 14px; } body.is-empty .no-results { display: block; } /* Ticker */ .ticker { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent); mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent); flex: 1 1 auto; min-width: 0; } .ticker-track { display: inline-flex; gap: 2.5rem; padding-right: 2.5rem; white-space: nowrap; will-change: transform; animation: ticker 90s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker-item { display: inline-flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 13px; line-height: 1; text-decoration: none; } .ticker-item:hover { color: var(--accent); } .ticker-item .src { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-subtle); text-transform: uppercase; } .ticker-dot { width: 3px; height: 3px; border-radius: 999px; background: var(--text-subtle); display: inline-block; } .top-shelf { align-items: start; gap: 1.25rem 2rem; padding-bottom: 1.25rem !important; } .source-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; } .source-title { margin: 0; font-size: 34px; line-height: 1; font-weight: 700; } .source-subtitle { margin: .75rem 0 0; color: var(--text-muted); font-size: 15px; } .source-controls { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; justify-content: flex-end; } .source-divider { width: 1px; height: 24px; background: var(--border); margin: 0 .35rem; } @media (max-width: 900px) { .source-heading { display: block; } .source-controls { justify-content: flex-start; margin-top: 1rem; } } /* Sticky section nav */ .sticky-nav { position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--bg), transparent 8%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } /* Header search & Gigafeed input */ .search-wrap { align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: var(--bg-muted); border: 1px solid var(--border); } .search-wrap input { background: transparent; outline: none; border: 0; width: 100%; font-size: 13px; color: var(--text); font-family: inherit; } .search-wrap input::placeholder { color: var(--text-subtle); } .search-wrap kbd { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; padding: 2px 6px; border-radius: 3px; background: var(--bg); border: 1px solid var(--border); color: var(--text-subtle); flex-shrink: 0; } /* Gigafeed (one big scrollable list) */ #gigaFeed { background: var(--bg-elevated); border: 1px solid var(--border); margin-bottom: 1.25rem; padding: 10px 16px; } #gigaFeed h3 { font-size: 16px; font-weight: 600; margin: 8px 0 12px; } #gigaFeed .gigarow { display: block; padding: 9px 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--text); } #gigaFeed .gigarow:first-child { border-top: 0; } #gigaFeed .gigarow:hover { color: var(--accent); } #gigaFeed .gigarow .src { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-subtle); text-transform: uppercase; margin-top: 2px; } /* Subtle scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; } ::-webkit-scrollbar-track { background: transparent; } /* Hidden until JS hydrates */ [hidden] { display: none !important; } /* Hover previews for linked entries */ .tooltip { display: block; position: absolute; left: 0; right: 0; top: calc(100% - 2px); z-index: 20; max-width: min(34rem, calc(100vw - 2rem)); padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); color: var(--text-muted); font-size: 12.5px; line-height: 1.45; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease; } .row:hover .tooltip, .row:focus .tooltip { opacity: 1; transform: translateY(0); }