/* ========================================================================== News Pulse - shared styles for the public feed and the admin panel. Theme: light by default, dark via [data-theme="dark"] on , and dark by default when the OS prefers it and the reader has not chosen. Category colours come in pairs (--cat / --cat-dark) because no single hue clears 4.5:1 against both a white and a near-black background - see scripts/check-contrast.js. ========================================================================== */ :root { --bg: #ffffff; --bg-elev: #f6f7f9; --bg-sunken: #eef0f3; --fg: #16191d; --fg-muted: #5b6672; --fg-faint: #8a95a1; --border: #dfe3e8; --border-strong: #c6ccd4; --accent: #1d4ed8; --accent-fg: #ffffff; --danger: #b91c1c; --ok: #047857; --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06); --radius: 14px; --radius-sm: 9px; --maxw: 620px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: Georgia, "Times New Roman", serif; } html[data-theme="dark"] { --bg: #111418; --bg-elev: #181c22; --bg-sunken: #0d1014; --fg: #e8ecf1; --fg-muted: #a2adba; --fg-faint: #6f7c8a; --border: #262c34; --border-strong: #39424d; --accent: #60a5fa; --accent-fg: #0b0e12; --danger: #f87171; --ok: #34d399; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --bg: #111418; --bg-elev: #181c22; --bg-sunken: #0d1014; --fg: #e8ecf1; --fg-muted: #a2adba; --fg-faint: #6f7c8a; --border: #262c34; --border-strong: #39424d; --accent: #60a5fa; --accent-fg: #0b0e12; --danger: #f87171; --ok: #34d399; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); } } * { box-sizing: border-box; } /* [hidden] only implies `display: none`; any explicit display rule beats it. Keep this so hiding an element by attribute actually hides it. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--fg); font-family: var(--font); line-height: 1.5; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } a { color: var(--accent); } /* ---------------------------------------------------------------- top bar */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top); } .topbar-row { max-width: var(--maxw); margin: 0 auto; padding: 10px 16px 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand { font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; text-decoration: none; color: var(--fg); } .brand span { color: var(--accent); } .theme-toggle { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elev); color: var(--fg-muted); cursor: pointer; } .theme-toggle:hover { color: var(--fg); border-color: var(--border-strong); } /* Filter bar: horizontally scrollable, never wraps, scrollbar hidden. */ .filters { max-width: var(--maxw); margin: 0 auto; padding: 2px 16px 10px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .filters::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; border: 1px solid var(--chip, var(--border-strong)); color: var(--chip, var(--fg-muted)); background: transparent; border-radius: 999px; padding: 5px 13px; font-size: .82rem; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .chip:hover { background: color-mix(in srgb, var(--chip, var(--fg-muted)) 12%, transparent); } .chip[aria-pressed="true"] { background: var(--chip, var(--fg)); color: var(--bg); border-color: var(--chip, var(--fg)); } /* ------------------------------------------------------------------- feed */ /* One card per screen, snapped. 100dvh (not 100vh) so collapsing mobile browser chrome cannot clip a card. */ .feed { height: 100dvh; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; scroll-behavior: smooth; } .feed:focus { outline: none; } .card { min-height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: center; padding: calc(96px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); max-width: var(--maxw); margin: 0 auto; } .card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--bg); background: var(--cat, var(--fg-muted)); } .source { font-size: .78rem; color: var(--fg-faint); } .card h2 { font-size: clamp(1.35rem, 5vw, 1.7rem); line-height: 1.24; letter-spacing: -.02em; margin: 0 0 12px; font-weight: 750; } .card .body { font-family: var(--serif); font-size: clamp(1.02rem, 3.7vw, 1.12rem); line-height: 1.62; color: var(--fg); margin: 0 0 18px; } .readmore { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; text-decoration: none; margin-top: 14px; color: var(--fg-muted); } .readmore:hover { color: var(--accent); } /* ------------------------------------------------------------------- poll */ .poll { border: 1px solid var(--border); background: var(--bg-elev); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); } .poll h3 { margin: 0 0 13px; font-size: 1rem; font-weight: 700; line-height: 1.35; } .options { display: flex; flex-direction: column; gap: 8px; } .opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: .93rem; font-weight: 550; color: var(--fg); background: var(--bg); border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 11px 13px; cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s, transform .08s; } .opt:hover:not(:disabled) { border-color: var(--cat, var(--accent)); } .opt:active:not(:disabled) { transform: scale(.99); } .opt:disabled { cursor: default; } /* The result bar is painted behind the label once results are revealed. */ .opt .fill { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: color-mix(in srgb, var(--cat, var(--accent)) 20%, transparent); transition: width .5s cubic-bezier(.22,.61,.36,1); z-index: 0; } .opt .label, .opt .pct { position: relative; z-index: 1; } .opt .pct { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fg-muted); } .opt.chosen { border-color: var(--cat, var(--accent)); background: color-mix(in srgb, var(--cat, var(--accent)) 8%, var(--bg)); } .opt.chosen .label::after { content: " ✓"; color: var(--cat, var(--accent)); font-weight: 800; } .poll-note { margin: 12px 0 0; font-size: .8rem; color: var(--fg-muted); display: flex; align-items: center; gap: 6px; } .poll-note .lock { opacity: .7; } .poll-note strong { color: var(--fg); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------- states / helpers */ .state { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--fg-muted); text-align: center; padding: 40px 24px; } .state h2 { color: var(--fg); margin: 0; font-size: 1.15rem; } .state p { margin: 0; max-width: 34ch; } .spinner { width: 26px; height: 26px; border: 2.5px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .end { min-height: 45dvh; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--fg-faint); font-size: .88rem; text-align: center; padding: 30px 20px calc(40px + env(safe-area-inset-bottom)); } .toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translate(-50%, 140%); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: .86rem; font-weight: 600; z-index: 60; max-width: min(90vw, 420px); text-align: center; transition: transform .28s cubic-bezier(.22,.61,.36,1); pointer-events: none; } .toast.show { transform: translate(-50%, 0); } .btn { font: inherit; font-weight: 650; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--fg); padding: 9px 15px; cursor: pointer; } .btn:hover { border-color: var(--fg-faint); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .btn-primary:disabled { opacity: .5; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } .feed { scroll-behavior: auto; } }