/* ============================================================ Daily Digest — stylesheet Theming via CSS variables. Dark is default; [data-theme="light"] on swaps the palette. All component colors reference vars. ============================================================ */ :root, :root[data-theme="dark"] { --bg: #111318; --bg-deep: #0d0f13; --panel: #181b22; --panel-alt: #1e222b; --border: #2a2f3a; --text: #e8eaef; --text-dim: #b0b6c3; --text-mute: #7a8194; --text-faint: #555e70; --link: #5ba8e5; --link-hover: #7ec4ff; --accent: #e74c5a; /* masthead / deep dive / finance */ --gold: #e2b84a; --green: #34d399; --blue: #5b9cf5; --cyan: #38bdf8; --purple: #a78bfa; --amazon: #f5a623; --poly: #00d4aa; --poly-bg: #0a1412; --poly-card-bg: #0d1a18; --poly-border: #1a2e2a; --up: #34d399; --down: #e74c5a; --ctrl-bg: #1e222b; --ctrl-border: #2a2f3a; --ctrl-hover: #2a2f3a; --shadow: 0 1px 0 rgba(0,0,0,0.4); } :root[data-theme="light"] { --bg: #eef0f4; --bg-deep: #ffffff; --panel: #ffffff; --panel-alt: #f1f3f7; --border: #d8dce4; --text: #1a1d24; --text-dim: #3d434f; --text-mute: #6b7280; --text-faint: #9aa1ad; --link: #1f6fc4; --link-hover: #134a8c; --accent: #d23644; --gold: #b8860b; --green: #0a9466; --blue: #2563c9; --cyan: #0284c7; --purple: #7c4ddb; --amazon: #c97a08; --poly: #008a72; --poly-bg: #e8f7f3; --poly-card-bg: #f2fbf8; --poly-border: #bfe6dc; --up: #0a9466; --down: #d23644; --ctrl-bg: #ffffff; --ctrl-border: #d8dce4; --ctrl-hover: #eef0f4; --shadow: 0 1px 2px rgba(20,30,50,0.08); } * { margin: 0; padding: 0; box-sizing: border-box; } html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Helvetica, Arial, sans-serif; font-size: 13.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background 0.2s ease, color 0.2s ease; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; color: var(--link-hover); } .page { max-width: 1100px; margin: 0 auto; padding: 16px 20px; } .page2 { max-width: 1100px; margin: 0 auto; padding: 16px 20px 20px; } /* ============================================================ CONTROL BAR (theme / share / date navigation) ============================================================ */ .toolbar { position: sticky; top: 0; z-index: 50; background: var(--bg-deep); border-bottom: 1px solid var(--border); padding: 8px 20px; } .toolbar-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .toolbar .brand { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); margin-right: auto; } .toolbar .brand span { color: var(--accent); } .tb-group { display: flex; align-items: center; gap: 6px; } .tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; min-width: 30px; padding: 0 9px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); background: var(--ctrl-bg); border: 1px solid var(--ctrl-border); border-radius: 6px; cursor: pointer; user-select: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .tb-btn:hover:not(:disabled) { background: var(--ctrl-hover); color: var(--text); } .tb-btn:disabled { opacity: 0.35; cursor: not-allowed; } .tb-btn svg { width: 15px; height: 15px; display: block; } .tb-date { height: 30px; padding: 0 8px; font-size: 0.68rem; font-weight: 600; color: var(--text); background: var(--ctrl-bg); border: 1px solid var(--ctrl-border); border-radius: 6px; font-family: inherit; cursor: pointer; } .tb-date::-webkit-calendar-picker-indicator { filter: var(--cal-filter, invert(0.6)); cursor: pointer; } :root[data-theme="light"] { --cal-filter: invert(0.3); } .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 9px 16px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 100; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ MASTHEAD ============================================================ */ .masthead { background: var(--bg-deep); border-bottom: 3px solid var(--accent); padding: 18px 20px 14px; text-align: center; } .masthead h1 { font-size: 2.8rem; font-weight: 800; letter-spacing: 0.14em; color: var(--text); text-transform: uppercase; } .masthead-sub { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 9px; font-size: 0.66rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.08em; flex-wrap: wrap; } .masthead-date { color: var(--gold); font-weight: 700; } .masthead-tag { background: var(--panel-alt); border: 1px solid var(--border); padding: 2px 8px; border-radius: 3px; font-size: 0.58rem; } /* SUBTITLE BAR */ .subtitle-bar { background: var(--panel); border-bottom: 1px solid var(--border); padding: 7px 20px; text-align: center; font-size: 0.66rem; color: var(--text-dim); letter-spacing: 0.03em; } .subtitle-bar .edition { color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; } /* ============================================================ MARKET SNAPSHOT (moved to top — at-a-glance) ============================================================ */ .market-bar { background: var(--bg-deep); border: 1px solid var(--border); border-top: 2px solid var(--accent); border-radius: 4px; margin-top: 14px; padding: 9px 14px; } .market-bar-title { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); margin-bottom: 8px; } .market-grid { display: flex; gap: 0; flex-wrap: wrap; } .market-item { flex: 1; min-width: 100px; padding: 4px 10px; border-right: 1px solid var(--border); text-align: center; } .market-item:last-child { border-right: none; } .market-item .m-label { font-size: 0.57rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.05em; } .market-item .m-val { font-size: 0.92rem; font-weight: 800; } .market-item .m-chg { font-size: 0.6rem; font-weight: 600; } .up { color: var(--up); } .down { color: var(--down); } .neutral { color: var(--text-mute); } .gold { color: var(--gold); } /* ============================================================ MAIN THREE-COLUMN GRID ============================================================ */ .grid-3col { display: grid; grid-template-columns: 1fr 0.82fr 0.56fr; gap: 14px; margin-top: 14px; } /* DEEP DIVE */ .deep-dive { background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 4px; padding: 15px; } .section-label { font-size: 0.57rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; color: var(--accent); margin-bottom: 8px; } .deep-dive h2 { font-size: 1.3rem; font-weight: 800; line-height: 1.25; margin-bottom: 8px; color: var(--text); } .deep-dive h2 a { color: var(--text); } .deep-dive h2 a:hover { color: var(--link); } .deep-dive .dek { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 10px; line-height: 1.55; font-weight: 500; } .deep-dive p { font-size: 0.75rem; color: var(--text-dim); line-height: 1.6; margin-bottom: 8px; } .deep-dive strong { color: var(--text); } .deep-dive .source-links { font-size: 0.6rem; color: var(--text-faint); margin-top: 10px; line-height: 1.7; } .stat-box { background: var(--bg-deep); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 3px; padding: 10px 12px; margin: 10px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .stat-item .stat-val { font-weight: 800; font-size: 1.05rem; display: block; line-height: 1.1; } .stat-item .stat-label { color: var(--text-mute); font-size: 0.6rem; } /* ARTICLE CARDS */ .article-cards { display: flex; flex-direction: column; gap: 12px; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 12px 13px; } .card-label { font-size: 0.57rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; } .card h3 { font-size: 0.9rem; font-weight: 700; line-height: 1.3; margin-bottom: 6px; } .card h3 a { color: var(--text); } .card h3 a:hover { color: var(--link); } .card p { font-size: 0.72rem; color: var(--text-dim); line-height: 1.55; margin-bottom: 6px; } .card .source-links { font-size: 0.6rem; color: var(--text-faint); } .card-av { border-top: 2px solid var(--purple); } .card-av .card-label { color: var(--purple); } .card-ai { border-top: 2px solid var(--cyan); } .card-ai .card-label { color: var(--cyan); } .card-amazon{ border-top: 2px solid var(--amazon); } .card-amazon .card-label { color: var(--amazon); } /* IN BRIEF SIDEBAR */ .sidebar { background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: 4px; padding: 12px; } .sidebar-title { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .brief-item { padding: 6px 0; border-bottom: 1px solid var(--border); } .brief-item:last-child { border-bottom: none; padding-bottom: 0; } .brief-item a.headline { font-size: 0.72rem; font-weight: 600; color: var(--text); line-height: 1.3; display: block; margin-bottom: 3px; } .brief-item a.headline:hover { color: var(--link); } .brief-item .brief-src { font-size: 0.57rem; color: var(--text-faint); } /* ============================================================ POLYMARKET BAR ============================================================ */ .poly-bar { background: var(--poly-bg); border: 1px solid var(--poly-border); border-top: 2px solid var(--poly); border-radius: 4px; margin-top: 14px; padding: 10px 14px; } .poly-bar-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .poly-logo { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--poly); } .poly-sub { font-size: 0.58rem; color: var(--text-mute); } .poly-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .poly-card { background: var(--poly-card-bg); border: 1px solid var(--poly-border); border-top: 2px solid var(--poly); border-radius: 3px; padding: 9px 10px; } .poly-card .poly-odds { font-size: 1.5rem; font-weight: 800; color: var(--poly); line-height: 1; } .poly-card .poly-q { font-size: 0.68rem; font-weight: 700; color: var(--text); margin: 4px 0 3px; line-height: 1.3; } .poly-card .poly-detail { font-size: 0.63rem; color: var(--text-mute); line-height: 1.45; } .poly-card .poly-link { font-size: 0.58rem; color: var(--poly); display: block; margin-top: 5px; } .poly-card .poly-link:hover { text-decoration: underline; } /* PAGE DIVIDER */ .page-divider { background: var(--bg-deep); border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); padding: 5px 20px; text-align: center; font-size: 0.57rem; color: var(--text-faint); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 16px; } /* PAGE 2 */ .compact-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 9px; border-bottom: 1px solid var(--border); margin-bottom: 14px; } .compact-header .ch-title { font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text); } .compact-header .ch-date { font-size: 0.62rem; color: var(--gold); font-weight: 700; } .grid-2col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; } /* POLITICS */ .politics { background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--blue); border-radius: 4px; padding: 14px; } .politics h2 { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--blue); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .region-block { margin-bottom: 12px; } .region-block:last-child { margin-bottom: 0; } .region-label { font-size: 0.57rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-mute); background: var(--panel-alt); display: inline-block; padding: 2px 8px; margin-bottom: 7px; border-radius: 2px; } .pol-item { margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--border); } .pol-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .pol-item a.pol-headline { font-size: 0.75rem; font-weight: 700; color: var(--text); display: block; margin-bottom: 3px; line-height: 1.3; } .pol-item a.pol-headline:hover { color: var(--link); } .pol-item p { font-size: 0.68rem; color: var(--text-dim); line-height: 1.5; } .pol-item .pol-src { font-size: 0.57rem; color: var(--text-faint); margin-top: 3px; } /* RIGHT COLUMN */ .right-col { display: flex; flex-direction: column; gap: 12px; } /* REAL ESTATE */ .real-estate { background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--green); border-radius: 4px; padding: 14px; } .re-title { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--green); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .re-section-label { font-size: 0.57rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); background: var(--panel-alt); display: inline-block; padding: 2px 8px; border-radius: 2px; margin-bottom: 7px; } .re-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; } .re-city { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 3px; padding: 8px; } .re-city-name { font-size: 0.64rem; font-weight: 700; color: var(--green); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.05em; } .re-city-price { font-size: 0.9rem; font-weight: 800; color: var(--text); line-height: 1.1; } .re-city-detail { font-size: 0.6rem; color: var(--text-mute); margin-top: 1px; } .re-note { font-size: 0.66rem; color: var(--text-dim); line-height: 1.5; margin-top: 4px; } .re-link { font-size: 0.6rem; color: var(--green); display: block; margin-top: 5px; } .re-link:hover { text-decoration: underline; } /* NOTEWORTHY */ .noteworthy { background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--cyan); border-radius: 4px; padding: 14px; } .note-title { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cyan); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .note-item { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .note-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .note-item a.note-headline { font-size: 0.75rem; font-weight: 700; color: var(--text); display: block; margin-bottom: 3px; line-height: 1.3; } .note-item a.note-headline:hover { color: var(--link); } .note-item p { font-size: 0.68rem; color: var(--text-dim); line-height: 1.5; } .note-item .note-src { font-size: 0.57rem; color: var(--text-faint); margin-top: 3px; } /* FOOTER */ .footer { background: var(--bg-deep); border-top: 1px solid var(--border); margin-top: 20px; padding: 11px 20px; text-align: center; font-size: 0.6rem; color: var(--text-faint); line-height: 1.6; } .footer strong { color: var(--text-mute); } /* LOADING / EMPTY STATES */ .state-msg { max-width: 1100px; margin: 60px auto; text-align: center; color: var(--text-mute); font-size: 0.85rem; padding: 0 20px; } .state-msg .spinner { width: 26px; height: 26px; margin: 0 auto 14px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .grid-3col { grid-template-columns: 1fr; } .grid-2col { grid-template-columns: 1fr; } .poly-grid { grid-template-columns: repeat(2, 1fr); } .masthead h1 { font-size: 2.1rem; } } @media (max-width: 560px) { .poly-grid { grid-template-columns: 1fr; } .market-item { min-width: 50%; border-right: none; } .toolbar .brand { width: 100%; margin-bottom: 4px; } .masthead h1 { font-size: 1.7rem; } } @media print { .toolbar { display: none; } body { background: #fff; color: #000; } }