/* ---- Theme tokens (light default; dark overrides) ---- Palette tuned to feel like gaitherresearch.org (academic, sober) rather than gaitherstephens.com (warmer entertainment). Surfaces are off-white with a hint of warm gray in light; deep midnight blue-gray in dark. Cyan stays as the brand accent on the wordmark, but navy is the structural accent (links, hovers, active states for non-brand affordances). */ :root { --bg: #fafaf7; --bg-alt: #f3f1ec; --fg: #1a1a1a; --muted: #4a4a4a; --subtle: rgba(26,26,26,0.05); --line: #e5e2db; --line-strong: #c9c5bc; --card-bg: #ffffff; --card-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 4px 12px rgba(26,26,26,0.04); /* Brand cyan stays (logo / "News" wordmark) */ --cyan: #0099cc; --cyan-soft: rgba(0,153,204,0.08); /* Academic accent — deep navy, used for non-brand interactive states */ --accent: #1e3a5e; --accent-hover: #2c5587; --accent-faint: #eef2f7; /* Left/right framing colors. Dem-blue / Rep-red convention so the site reads partisan-coded at a glance. Both desaturated a touch so they don't shout against the warm-paper background. */ --left: #2f6fbb; --left-soft: rgba(47,111,187,0.07); --right: #c23b5e; --right-soft: rgba(194,59,94,0.07); --magenta: #c11577; --purple: #6b00c2; --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } /* Colorblind palette: deuteranopia/protanopia-friendly. Avoid red/green pairings, lean on blue + amber (Okabe-Ito style). Surfaces stay close to light to maximize contrast. */ [data-theme="colorblind"] { --bg: #ffffff; --bg-alt: #f0f0f0; --fg: #111111; --muted: #555555; --subtle: rgba(0,0,0,0.05); --line: #cccccc; --line-strong: #999999; --card-bg: #ffffff; --card-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.06); --cyan: #0072B2; /* Okabe-Ito blue */ --cyan-soft: rgba(0,114,178,0.12); --accent: #D55E00; /* Okabe-Ito vermillion (deuter-safe) */ --accent-hover: #E69F00; --accent-faint: rgba(213,94,0,0.10); --left: #0072B2; --left-soft: rgba(0,114,178,0.08); --right: #D55E00; --right-soft: rgba(213,94,0,0.10); --magenta: #CC79A7; /* Okabe-Ito reddish purple */ --purple: #5E3C99; } /* Retro palette: warm beige magazine vibe, deep brown text, mustard/rust accents. Inspired by 70s editorial / GaitherDyn retro. */ [data-theme="retro"] { --bg: #f4ecd8; --bg-alt: #e8dcc0; --fg: #2a1a0a; --muted: #6b4f2a; --subtle: rgba(42,26,10,0.06); --line: #c7b78f; --line-strong: #a08850; --card-bg: #faf3df; --card-shadow: 0 1px 2px rgba(80,50,10,0.08), 0 4px 12px rgba(80,50,10,0.10); --cyan: #b8651e; /* rust replaces cyan for accent */ --cyan-soft: rgba(184,101,30,0.12); --accent: #7c4a1e; --accent-hover: #a36430; --accent-faint: rgba(124,74,30,0.10); --left: #2b5d8a; --left-soft: rgba(43,93,138,0.10); --right: #a83820; --right-soft: rgba(168,56,32,0.10); --magenta: #8b3a62; --purple: #5a3e8f; } /* 80s Retro / Neon palette: VHS-grade hot magenta + cyan on near-black, yellow accents. Reads as an intentional aesthetic, not just "dark with extra saturation." Per Gaither 2026-05-14. */ [data-theme="retro80s"] { --bg: #0a0418; --bg-alt: #140a2c; --fg: #f1e8ff; --muted: #a896c8; --subtle: rgba(241,232,255,0.06); --line: #2a1b48; --line-strong: #4a2f7a; --card-bg: #160930; --card-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 0 14px rgba(255,42,180,0.10), 0 4px 18px rgba(0,0,0,0.40); --cyan: #00f0ff; /* hot neon cyan */ --cyan-soft: rgba(0,240,255,0.14); --accent: #ff2bd6; /* hot pink */ --accent-hover: #ff6be5; --accent-faint: rgba(255,43,214,0.14); --left: #5eb9ff; --left-soft: rgba(94,185,255,0.14); --right: #ffb84d; /* sodium-vapor amber */ --right-soft: rgba(255,184,77,0.14); --magenta: #ff2bd6; --purple: #b347ff; } [data-theme="dark"] { /* Deep midnight rather than flat gray. Pulled directly from gaitherresearch.org's dark palette so the two sites feel like siblings instead of strangers. */ --bg: #0f1419; --bg-alt: #161c23; --fg: #e8e6df; --muted: #a8a59c; --subtle: rgba(232,230,223,0.05); --line: #2a3138; --line-strong: #3d454e; --card-bg: #1a2129; --card-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2); --cyan: #01ccff; --cyan-soft: rgba(1,204,255,0.10); --accent: #7eaad5; --accent-hover: #a3c4e3; --accent-faint: #1d2937; --left: #6da4d8; --left-soft: rgba(109,164,216,0.10); --right: #e26b87; --right-soft: rgba(226,107,135,0.10); --magenta: #ee2b8b; --purple: #a560ee; } * { box-sizing: border-box; } html { color-scheme: light dark; background-color: var(--bg); } html, body { margin: 0; background-color: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } /* overflow-x: clip on , not . Setting it on creates a scroll container at the html level, which kills position:sticky on the header — Gaither flagged that the mobile header was disappearing entirely on scroll. Putting it on body prevents horizontal scrollbars (the original intent) without touching the html element's scroll context. overscroll-behavior-x: contain + width:100% on html stops the "page drifts around after pinch-zoom" problem on mobile per Gaither 2026-05-14. The pinch-zoom itself is still allowed (a11y), but the browser no longer treats horizontal pans past the viewport edge as scroll-chain that drags the whole layout. */ html { width: 100%; max-width: 100%; /* overflow-x: clip (NOT hidden) stops the whole page sliding/drifting horizontally like a misbehaving web page (Gaither 2026-06-23: make it more like an app, no weird horizontal slide). Unlike hidden, clip does NOT create a scroll container, so position:sticky on the header still works. */ overflow-x: clip; overscroll-behavior: none; /* Prevent double-tap zoom on tap targets — best current practice for "app-like" mobile UX. touch-action: manipulation removes the 300ms delay AND blocks the double-tap-zoom gesture. */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; } body { overflow-x: clip; max-width: 100vw; overscroll-behavior: none; touch-action: manipulation; } a { color: var(--cyan); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- Header ---- Sticky at top. Scroll-collapses aggressively when scrolled past 40px: padding shrinks dramatically, brand wordmark shrinks, and the background goes semi-transparent with a backdrop blur so the page content underneath shows through. JS toggles header.scrolled. */ header { padding: 24px 32px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; position: sticky; top: 0; z-index: 50; background: var(--bg); transition: padding .2s ease, background .2s ease, backdrop-filter .2s ease, box-shadow .2s ease, border-color .2s ease; } /* Defensive: re-assert sticky on mobile. Some past CSS regressions have broken it; explicit re-declaration here keeps it locked in. Also pin a minimum height so the header never collapses to a sliver that visually reads as missing — Gaither flagged the mobile header as "cut off" repeatedly. */ @media (max-width: 720px) { header { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; z-index: 50; min-height: 56px; background: var(--bg); } /* Defensive opaque bg when scrolled too — translucent + blur can fail to repaint above iOS URL bar transitions on some devices. */ header.scrolled { background: var(--bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* Inline weather widget — sits inside the header strip. Compact pill: location + current temp + 5-day forecast. Forecast hides on scroll-collapse and on narrow viewports. */ .weather-bar { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: transparent; font-family: var(--sans); font-size: 12px; color: var(--fg); flex-wrap: nowrap; /* Mobile/tablet baseline: no auto margins, natural flex flow. Desktop adds flex:1 below so weather-bar absorbs all leftover flex space and centers its content while icon-row pins to the far-right edge. Per Gaither 2026-05-17 (eighth iteration on icon alignment): icons must be HARD right at all desktop widths. */ margin-left: 0; margin-right: 0; transition: max-width .2s ease; } /* Desktop ≥1180: switch header from flex to CSS Grid with 4 explicit columns: col 1 = brand (auto width) col 2 = News/Research tabs (auto width) col 3 = weather-bar (1fr — takes leftover, content centered) col 4 = icon-row (auto width, justify-self end) This gives true 3-region layout (brand-left | weather-center | icons-right) which auto-margins on a flat flexbox can't deliver cleanly. Grid keeps icons hard-right at every width AND avoids the "huge empty void in middle" problem flex:1 + justify-content: center had on the scrolled state. Per Gaither 2026-05-17 (10th iteration on this header): "header is even worse... look at old code and test better". */ /* Macbook-size desktop (1180-1919): TWO-ROW grid layout per Gaither 2026-05-17. Row 1 holds brand+tabs+weather. Row 2 holds icon-row pinned to the right. This frees vertical space at expanded state so weather can spread without colliding with icons. */ @media (min-width: 1180px) and (max-width: 1919px) { header { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: 20px; row-gap: 6px; align-items: center; padding-top: 10px; padding-bottom: 14px; } header > .brand { grid-column: 1; grid-row: 1; } header > .kind-tabs--header { grid-column: 2; grid-row: 1; } header > .weather-bar { grid-column: 3; grid-row: 1; justify-self: center; margin: 0; } header > .header-icon-row { grid-column: 1 / -1; grid-row: 2; justify-self: center; align-self: center; } header > .hamburger, header > .mobile-icon-drawer-toggle { display: none; } header > .header-controls { display: contents; } /* Updated inline on row 2 alongside icons, pinned right. No more absolute top-right. Per Gaither 2026-05-31. */ header .updated { position: static; top: auto; right: auto; grid-column: 1 / -1; grid-row: 2; justify-self: end; align-self: center; max-width: 240px; } } /* Icon-label span sits next to the SVG inside each header icon button. Hidden by default; only shown at wide desktop (>=1920) where there's room. Real instead of ::after because the ::after pseudo is reserved by the global [data-tooltip]::after tooltip rule. Per Gaither 2026-05-17 "on big expanded version of desktop's that are wide, use more text for lower row icons". */ .icon-label { display: none; } /* Macbook retina + wide desktop (>=1180): show text labels next to icon-row icons. Buttons go pill-shaped. Per Gaither 2026-05-17 "on macbook retina screen view expanded header add more text to icons". Labels hidden again at scrolled state so the compact strip stays thin. */ @media (min-width: 1180px) { .header-icon-row #viewModeBtn, .header-icon-row #sortModeBtn, .header-icon-row #themeToggle, .header-icon-row #fontSizeToggle, .header-icon-row #helpBtn { width: auto; min-width: 0; padding: 0 10px 0 8px; gap: 5px; border-radius: 999px; } .header-icon-row .icon-label { display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 500; color: inherit; letter-spacing: 0.01em; white-space: nowrap; flex-shrink: 0; } .header-icon-row .bmc-header-label[hidden] { display: inline-block !important; } .header-icon-row .bmc-header-label::before { content: "Support"; } .header-icon-row .bmc-header { padding: 5px 12px 5px 9px; gap: 5px; } /* Scrolled state: drop the labels so the compact strip stays thin. */ header.scrolled .header-icon-row .icon-label, header.scrolled .header-icon-row .bmc-header-label { display: none !important; } header.scrolled .header-icon-row #viewModeBtn, header.scrolled .header-icon-row #sortModeBtn, header.scrolled .header-icon-row #themeToggle, header.scrolled .header-icon-row #fontSizeToggle, header.scrolled .header-icon-row #helpBtn { width: 36px; padding: 0; border-radius: 50%; } header.scrolled .header-icon-row .bmc-header { padding: 6px 10px; } } /* Wide desktop (>=1920): slightly smaller labels per Gaither 2026-05-17 "On full desktop mode make icon text a little smaller on expanded view". Was 11.5px before this consolidation; now 10.5px so the labels are clearly secondary to the icons. */ @media (min-width: 1920px) { .header-icon-row .icon-label { font-size: 10.5px; } .header-icon-row .bmc-header-label, .header-icon-row .bmc-header-label::before { font-size: 10.5px; } } /* Wide desktop (>=1920): single-row 4-column grid (room for everything). */ @media (min-width: 1920px) { header { display: grid; grid-template-columns: auto auto 1fr auto auto; column-gap: 20px; align-items: center; } header > .brand { grid-column: 1; } header > .kind-tabs--header { grid-column: 2; } header > .weather-bar { grid-column: 3; justify-self: center; margin: 0; } header > .header-icon-row { grid-column: 4; justify-self: end; } header > .hamburger, header > .mobile-icon-drawer-toggle { display: none; } header > .header-controls { display: contents; } /* Wide desktop fits everything on one row: Updated gets its own col 5 right of the icon strip. Per Gaither 2026-05-31. */ header .updated { position: static; top: auto; right: auto; grid-column: 5; justify-self: end; align-self: center; max-width: 240px; margin: 0; } } /* At SCROLLED state, collapse back to single row even at macbook widths so the header strip stays thin. Icon-row jumps to col 4 of a 4-column grid alongside brand+tabs+weather. */ @media (min-width: 1180px) { header.scrolled { grid-template-columns: auto auto 1fr auto auto; grid-template-rows: auto; row-gap: 0; } header.scrolled > .header-icon-row { grid-column: 4; grid-row: 1; } header.scrolled .updated { grid-column: 5; grid-row: 1; justify-self: end; align-self: center; margin-left: 12px; } } /* When scrolled, the header tightens to 4px padding and the weather strip needs to keep all 5 day tiles visible. Shrink the day-tile padding so the row stays inside the available header width without clipping. */ body.scrolled-page .weather-day { padding: 0 3px; min-width: 36px; } body.scrolled-page .weather-day .wd-icon svg { width: 15px; height: 15px; } .weather-loc { /* Compact pill. Per Gaither 2026-05-17 "make the weather location picker smaller": 4px gap, 2/7 padding, 11px font (was 5/9/12). */ display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: transparent; color: var(--fg); border: 1px solid var(--line); cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 500; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; flex-shrink: 0; } .weather-loc:hover { border-color: var(--cyan); color: var(--cyan); } .weather-loc svg { width: 11px; height: 11px; } /* Default (no zip saved) state — cyan to call attention to the click target. Cleared by JS once the user picks a location and the value is persisted to gn:weatherLoc. */ .weather-loc[data-default="true"] { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-soft); } .weather-loc[data-default="true"]:hover { background: var(--cyan); color: #fff; } .weather-now { display: inline-flex; flex-direction: column; align-items: center; gap: 0; flex-shrink: 0; line-height: 1.05; padding: 0 4px; } .weather-now-label { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .weather-now-row { display: inline-flex; align-items: center; gap: 4px; } .weather-icon { display: inline-flex; align-items: center; color: var(--cyan); line-height: 1; } .weather-icon svg { width: 20px; height: 20px; } .weather-temp { font-weight: 700; font-size: 15px; color: var(--fg); } /* Today's high / low under the current temp. Smaller font so it reads as supplemental info to the headline number. */ .weather-now-hilo { font-size: 10px; color: var(--fg); font-weight: 600; line-height: 1.1; margin-top: 1px; } .weather-now-hilo small { color: var(--muted); font-weight: 500; font-size: 0.9em; } .weather-now-hilo:empty { display: none; } /* When scrolled: KEEP hi/lo under the current temp (was hidden in an earlier pass). Just tighten the line-height so the compact header doesn't grow vertically. Gaither 2026-05-13. */ body.scrolled-page .weather-now-hilo { font-size: 9px; margin-top: 0; line-height: 1; } /* Sunset chip lives under the Today + temp pillar instead of buried in the metrics column. Smaller text so the temp stays the focal point. Empty by default; refresh() fills it. */ .weather-sunset { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--muted); line-height: 1.1; margin-top: 1px; } .weather-sunset svg { width: 10px; height: 10px; } .weather-sunset:empty { display: none; } body.scrolled-page .weather-sunset { display: none; } .weather-forecast { display: inline-flex; align-items: center; gap: 6px; /* overflow: visible so the per-day tooltip ::after popovers escape the forecast container instead of getting clipped. The previous overflow: hidden was suppressing every weather-day tooltip silently. Per Gaither 2026-05-16: "no tooltips over weather days". If the forecast row ever needs horizontal-scroll behavior, switch to overflow-x: auto + overflow-y: visible so the tooltip stays free vertically. */ overflow: visible; } /* Metrics — 2-column grid so the 5 items pack into a tight 2x3 block instead of a tall vertical column that pushed the day tiles off screen. Each cell is an icon + tiny number, lined up cleanly. */ .weather-meta { display: grid; grid-template-columns: auto auto; gap: 0 8px; column-gap: 8px; row-gap: 1px; align-items: center; font-size: 10px; color: var(--muted); padding-right: 8px; border-right: 1px solid var(--line); flex-shrink: 0; line-height: 1.25; } .weather-meta > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; } /* Wrapper slot for the metrics. Lives between .weather-now and .weather-forecast inside .weather-bar so the six metric chips visually separate Today's chip from the multi-day forecast. The actual .weather-meta grid is injected by JS; empty slot is display:none so the bar collapses cleanly while loading. */ .weather-meta-slot { display: inline-flex; align-items: center; flex-shrink: 0; } .weather-meta-slot:empty { display: none; } /* Cyan wire icons in the header weather meta strip per Gaither 2026-05-17: "use cyan wire icons instead of grey ones for those six categories". Matches the per-day tile icon color (which is also cyan) so the row reads as a unified weather block. */ .weather-meta svg { width: 11px; height: 11px; color: var(--cyan); flex-shrink: 0; } /* Day tiles — vertical stack: weekday on top, icon, then hi/lo. Much cleaner read than the horizontal pill we had before. */ .weather-day { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 0 6px; border-left: 1px solid var(--line); min-width: 42px; flex-shrink: 0; font-size: 11px; line-height: 1.15; color: var(--muted); white-space: nowrap; } .weather-day .wd-name { font-weight: 600; color: var(--fg); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; } .weather-day .wd-icon { color: var(--cyan); display: inline-flex; } .weather-day .wd-icon svg { width: 18px; height: 18px; } .weather-day .wd-hilo { color: var(--fg); font-weight: 600; font-size: 10.5px; } .weather-day .wd-hilo small { color: var(--muted); font-weight: 500; font-size: 0.9em; } .weather-bar[data-loading="true"] .weather-forecast { opacity: 0.3; } /* Scrolled-desktop: drop the 5-day forecast, the metrics chips, AND the city-name label so the scrolled strip stays compact. Today's temp + a city pin icon are what readers need in the persistent header strip; full forecast is one scroll-to-top away. Per Gaither 2026-05-17: "header on my macbook is overloaded on shrink". Earlier "keep 5 days even when scrolled" request superseded by this one — overload trumps completeness. */ body.scrolled-page .weather-meta { display: none; } body.scrolled-page .weather-meta-slot { display: none; } body.scrolled-page .weather-now-label { display: none; } @media (min-width: 1180px) { /* Show ALL 5 forecast days at scrolled state on every desktop width (macbook + wide). Per Gaither 2026-05-17 follow-up: "make 5 day weather (today plus 5 days) on macbook screen size view". Earlier rule hid the 4th/5th tiles on macbook widths; removed so today + 5 days are always visible at desktop scrolled. */ /* Collapse the city picker pill to just the pin icon at scrolled state — the label text is repetitive once the user is reading and saves ~120px on the strip. */ body.scrolled-page header.scrolled .weather-loc .weather-loc-label { display: none; } body.scrolled-page header.scrolled .weather-loc { padding: 3px 6px; } } /* (Macbook 3-day rule and the wide-desktop 5-day override removed 2026-05-17 — all desktop widths now show today + 5 days at scrolled.) */ /* Mobile: drop forecast and label to icon-only by default. Tap the degree-circle toggle (top right of the weather bar) to expand to the full 5-day forecast + location label. State persisted in localStorage gn:weatherExpanded so it sticks across reloads. */ @media (max-width: 720px) { .weather-bar { position: relative; padding-right: 30px; } .weather-bar:not([data-expanded="true"]) .weather-forecast { display: none; } .weather-bar:not([data-expanded="true"]) .weather-loc-label { display: none; } .weather-bar:not([data-expanded="true"]) .weather-loc { padding: 3px 6px; } /* Per Gaither 2026-05-18: tighter side padding on mobile expanded weather. Was padding 6px 30px 6px 8px which left a lot of empty space on the right; now symmetrical 6px 4px so the inner content has room to breathe edge-to-edge. */ .weather-bar[data-expanded="true"] { flex-wrap: wrap; gap: 6px; width: 100%; padding: 6px 4px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); /* Per Gaither 2026-06-01: center all rows of the wrapped bar. Need BOTH justify-content (centers each row's flex items) AND margin-left/right auto on the .weather-now block (otherwise the current-temp + location share a row that pushes left because weather-loc claims the gap on the left edge). */ justify-content: center; align-items: center; text-align: center; } .weather-bar[data-expanded="true"] .weather-now { margin-left: auto; margin-right: auto; } /* Location pill on expanded view: a centered, content-width pill, NOT a full-width bar (Gaither 2026-06-23: "weather location is full width when weather is expanded"). flex-basis:auto + margin auto centers it; the forecast/metrics rows below still take their own 100% rows. */ .weather-bar[data-expanded="true"] .weather-loc { flex: 0 1 auto; width: auto; max-width: 100%; margin: 0 auto; justify-content: center; } /* Per Gaither 2026-05-18: center the 5-day forecast strip on mobile expanded view. Without this it flows left-aligned with the rest of the weather-bar flex content. */ .weather-bar[data-expanded="true"] .weather-forecast { display: flex !important; justify-content: center; width: 100%; flex-wrap: wrap; } .weather-bar[data-expanded="true"] .weather-loc-label { display: inline !important; } .weather-bar[data-expanded="true"] .weather-day { padding: 4px 6px; min-width: 42px; } /* CENTER the 6 metric chips (humidity, feels, wind, rain%, sunrise, sunset) in a 2x3 grid on the mobile expanded view. Per Gaither 2026-05-17 "on mobile expanded, weather stack humidity and those other 5 weather things like it in 2 rows, 3 columns, centered". The .weather-meta-slot wraps a single .weather-meta child; both need the grid + centering or the outer flex-bar would left-align the inner grid block. */ /* Metrics (humidity/wind/feels/rain%/sunrise/sunset) show ONLY on the EXPANDED mobile view; hidden when COLLAPSED so the collapsed weather is just "Today" + today's temp and fits the header top row next to the logo (Gaither 2026-06-23, corrected: I had this backwards). */ .weather-bar:not([data-expanded="true"]) .weather-meta-slot { display: none !important; } .weather-bar[data-expanded="true"] .weather-meta-slot { display: flex !important; justify-content: center; width: 100%; padding: 2px 0; margin: 2px auto 4px; border-right: 0; } .weather-bar[data-expanded="true"] .weather-meta { display: grid !important; grid-template-columns: repeat(3, max-content); grid-auto-rows: auto; gap: 4px 14px; justify-content: center; justify-items: center; align-items: center; width: auto; padding: 0; margin: 0; border-right: 0; } .weather-bar[data-expanded="true"] .weather-meta > span { font-size: 11px; white-space: nowrap; } .weather-bar[data-expanded="true"] .weather-meta-slot:empty { display: none !important; } } /* Smaller wordmark on mobile + weather pinned top-right next to it (Gaither 2026-06-23: "weather should go up to top right and GaitherNews logo could be smaller"). margin-left:auto pushes the COLLAPSED weather to the right of the brand on the first header row; expanded weather is width:100% so it still drops to a full-width panel below. */ @media (max-width: 720px) { .brand-wordmark { font-size: 18px; } .brand-tagline { font-size: 8.5px; letter-spacing: 0.02em; } header > .weather-bar { margin-left: auto; } header > .weather-bar:not([data-expanded="true"]) { align-self: flex-start; } } /* Degree-circle expand toggle. Mobile-only. Lives top-right of the weather bar; visually echoes a degree marker (small circle with ° inside). Tap to toggle. */ .weather-expand-toggle { display: none; position: absolute; top: 2px; right: 4px; width: 22px; height: 22px; padding: 0; background: transparent; border: 0; color: var(--fg); cursor: pointer; line-height: 1; font-family: var(--sans); font-size: 22px; font-weight: 900; transition: color .15s, transform .15s; } .weather-expand-toggle:hover, .weather-expand-toggle:focus-visible { color: var(--cyan); outline: none; } .weather-expand-toggle .weather-expand-deg { display: inline-block; transform: translateY(-2px); } .weather-bar[data-expanded="true"] .weather-expand-toggle { color: var(--cyan); transform: rotate(180deg); } @media (max-width: 720px) { .weather-expand-toggle { display: inline-flex; align-items: center; justify-content: center; } } /* Tablet + narrow-laptop (721-1499px): show Today + next 2 forecast days (3 total) + drop the metrics row. Range extended from ≤1180 to ≤1499 on 2026-05-15 — Gaither's MBP 16" (2019) viewport fell in the tablet/desktop in-between zone where the full 5-day weather was crowding the header. True desktop (≥1500px) keeps the full 5-day strip + metrics row. Other 1180-breakpoint rules (cats button, etc.) untouched per "leave desktop like it is". */ /* Tablet (721-1024): hide weather-meta chips and days 4-5. Above 1024 (macbook + wide desktop) shows the full 5-day forecast. Was 721-1499 which clipped MacBook 16 retina at default scaling (1496px logical) to 3 days. Per Gaither 2026-05-17 "still only 3 days of weather on my macbook screen". */ @media (min-width: 721px) and (max-width: 1024px) { .weather-meta { display: none; } .weather-day:nth-of-type(n+4) { display: none; } } /* Aggressive collapse: 24/16 -> 4/4 padding, no border, translucent bg + 14px blur so the cards behind show through faintly. */ /* Header-scrolled copy/version moved to the sticky footer per Gaither 2026-05-14: belongs at the bottom of the page, not the top. See .sticky-stats below for the new home. */ /* Footer corner row: copyright bottom-left, build-version bottom-right. Visible on every screen; tablet+ shows both, narrow mobile drops the version (keeps just the copyright). Sits below the main footer content. */ .footer-corner { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 11px; color: var(--muted); opacity: 0.85; letter-spacing: 0.04em; } .footer-corner-copy { white-space: nowrap; } .footer-corner-version { white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 480px) { .footer-corner-version { display: none; } } header.scrolled { padding: 4px 32px; background: var(--header-translucent-light, rgba(250,250,247,0.72)); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom-color: transparent; box-shadow: 0 2px 16px rgba(0,0,0,0.06); } [data-theme="dark"] header.scrolled { background: rgba(15,20,25,0.62); box-shadow: 0 2px 16px rgba(0,0,0,0.50); } /* Theme-aware scrolled header. The default rule above uses a light cream translucent bg which leaves retro and retro80s text invisible (retro80s renders white text on near-black, so a cream overlay swallows it). Per Gaither 2026-05-15. */ [data-theme="retro"] header.scrolled { background: rgba(244,236,216,0.78); box-shadow: 0 2px 16px rgba(80,50,10,0.18); } [data-theme="retro80s"] header.scrolled { background: rgba(10,4,24,0.72); box-shadow: 0 2px 16px rgba(0,0,0,0.55); } /* Brand stacks the wordmark and tagline vertically. .brand-tagline ("Escape the Algorithm") sits in muted serif italic under the wordmark at rest, and collapses out when the header scrolls so the compact header stays single-line. */ .brand { font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; color: var(--fg); text-decoration: none; display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.05; transition: font-size .2s ease; } .brand-wordmark { font-size: 26px; transition: font-size .2s ease; } /* line-height 1.35 + padding-bottom 2px ensures descenders (the 'g' in 'Algorithm') don't clip when the tagline is visible. max-height bumped to 24px to match the actual rendered box. overflow:hidden was tight against the descender ink in the 12px serif italic. */ .brand-tagline { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 12px; line-height: 1.35; letter-spacing: 0.02em; color: var(--muted); margin-top: 2px; padding-bottom: 2px; transition: opacity .2s ease, max-height .2s ease, margin-top .2s ease, padding-bottom .2s ease; opacity: 1; max-height: 24px; overflow: hidden; } header.scrolled .brand-wordmark { font-size: 16px; } header.scrolled .brand-tagline { opacity: 0; max-height: 0; margin-top: 0; padding-bottom: 0; } /* Three-line Updated stack per the screenshots Gaither attached 2026-05-15: Line 1: 'Updated' (small, muted) Line 2: 'May 14, 12:03 PM' (slightly larger, fg color) Line 3: 'Next refresh in 3h 5m' (small, muted) ← countdown Scrolled state hides line 3 and tightens the font, keeping 'Updated' + date visible. */ .brand:hover { text-decoration: none; } .brand .cyan { color: var(--cyan); font-style: italic; } /* Restored to the format that lived longest (commit 4fbadcb~1 era) per Gaither 2026-05-15: all 3 rows use the .updated 13px base, with next-refresh dropping to 11px+muted. gap 2px, line-height 1.2 — old proportions. */ .updated { font-size: 11px; color: var(--muted); margin-left: auto; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.15; /* Pin to the top of the header. Without this it default-aligns to "stretch" and could drop to the second wrap row at certain widths. Higher flex order + explicit alignment keeps it pinned at the top-right at every desktop width including MBP 16 2019 retina (~1792px). Per Gaither 2026-05-16. Font sizes dropped 13->11 / 11->10 per Gaither 2026-05-17 "Make Updated area text smaller". */ align-self: flex-start; flex-shrink: 0; order: 100; } .updated .updated-label { font-size: 11px; color: var(--muted); } .updated .updated-date { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .next-refresh { font-size: 10px; color: var(--muted); opacity: 0.75; } .next-refresh:empty { display: none; } .stale-note { max-width: 720px; margin: 10px auto 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 13px; text-align: center; } header.scrolled .updated { font-size: 10px; } header.scrolled .updated .updated-label, header.scrolled .updated .updated-date { font-size: 10px; } header.scrolled .updated .next-refresh { display: none; } .hamburger { display: none; background: transparent; border: 1px solid var(--line); color: var(--fg); width: 36px; height: 36px; border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; padding: 0; margin-left: auto; } .hamburger:hover { border-color: var(--cyan); background: var(--cyan-soft); } .hamburger svg { width: 18px; height: 18px; } .header-controls { display: contents; } /* Keep font-size + help + theme bound together so they always wrap as a unit (or stay on the same row when there's room). On tablet before this rule, each icon was a flex child of header and could wrap independently — leaving font-size dangling on its own row while help + theme sat further down. */ .header-icon-row { display: inline-flex; align-items: center; gap: 8px; } /* ====================================================================== CANONICAL HEADER ICON ORDER (Gaither 2026-05-16, re-confirmed 2026-05-17 "Ensure consistency of icon order across different views"): 1. Categories filter (mobile/tablet entry; hidden on desktop) 2. Hide read (newspaper pill — collapses to icon-only at scroll) 3. Sort mode (category / sources / random / saved) 4. View mode (default / horizontal / grid + short variants) 5. Theme (palette) 6. Font size (AA) 7. Keyboard shortcuts (hidden on mobile) 8. Support (Buy Me a Coffee pill — collapses to icon at scroll) Implementation: flex-order on each child. DOM stays in render order so screen readers + Tab key follow visual order. The order numbers use a gap of 10 (rather than 1) so we can insert a new icon at any point without renumbering everything else. IMPORTANT: never re-order these inside an @media block. Hide/show individual icons is fine; reordering breaks user muscle memory. ====== */ .header-icon-row { flex-direction: row; } .header-icon-row > #catsHeaderBtn { order: 10; } .header-icon-row > #hideViewedToggle { order: 20; } .header-icon-row > #sortModeBtn { order: 30; } .header-icon-row > #viewModeBtn { order: 40; } .header-icon-row > #themeToggle { order: 50; } .header-icon-row > #fontSizeToggle { order: 60; } .header-icon-row > #helpBtn { order: 70; } .header-icon-row > .bmc-header { order: 80; } /* Any unenumerated icon falls back to order:0 which puts it FIRST. This catches accidental insertions during development — they'll visually pop to the leftmost position so the mistake is obvious. */ /* viewModeBtn must be present on every breakpoint (mobile + tablet + desktop). Per Gaither 2026-05-16: "missing change view button on mobile and tablet". The flex-order rule above only handles order, not visibility; this guard ensures no @media-scoped display:none can hide it. */ #viewModeBtn { display: inline-flex !important; } /* Tablet (721-1179px): icon row sits naturally to the right of the weather widget. Earlier version centered it with margin-left/right auto, but the weather-bar above ALSO uses auto margins to center itself — two elements both demanding the visual center fought for space and produced the "weird" header layout the user flagged 2026-05-15. With this rule removed, the layout matches desktop: brand left, weather centered, icons natural-flow to the right. */ @media (min-width: 721px) and (max-width: 1179px) { header > .header-icon-row { margin-left: 0; margin-right: 0; justify-content: flex-end; } } /* Narrow desktop (1180px+): icon row anchored to right, Updated follows AFTER icons at the far right edge. Per Gaither 2026-05-15: push Updated info to far right of icon group, similar to tablet. We do this with CSS order so the DOM stays unchanged: icons get a low order and absorb left space via margin-left:auto; updated block gets a higher order so it lands after icons in the flex sequence. */ /* (Removed 2026-05-31: the desktop-wide "header padding-right: 190px reserve + Updated absolute top-right" rules. Updated now lives inline on row 2 next to icons via the @media (min-width: 1180px) and (max-width: 1919px) and @media (min-width: 1920px) grid placements. Keeping a no-op block for the scrolled top:8 override is unnecessary — position: static via the grid placement applies in both states.) */ /* Mobile icon-drawer chevron toggle: ONLY ever visible at mobile viewport + scrolled state (see @media (max-width: 720px) below for the override). Default to display:none everywhere else so the chevron button never leaks into desktop/tablet header layout. Per Gaither 2026-05-17 ("header is ALL jacked up" — the toggle was showing on desktop because every rule scoping it was inside the mobile media block). */ .mobile-icon-drawer-toggle { display: none; } /* Header categories button — primary entry point on mobile/tablet. Hidden on desktop where the left rail is always visible. Selector specificity raised to .header-icon-row .cats-header-btn (0,2,0) so it beats .icon-btn { display: inline-flex } which sits later in the stylesheet. Without this the apps-grid icon leaked onto the desktop header — Gaither flagged 2026-05-13. */ .header-icon-row .cats-header-btn { display: inline-flex; } /* "Show categories" / "Hide categories" inline label. Matches the visual weight of the adjacent "Hide read" + "Support" inline labels (same font-size 11.5px, normal weight, no uppercase) so the trio reads as a consistent row instead of "Show categories" dominating. */ .cats-header-label { display: none; } @media (min-width: 721px) and (max-width: 1180px) { .header-icon-row .cats-header-btn { width: auto; padding: 0 10px; gap: 6px; border-radius: 999px; } .cats-header-label { display: inline-block; font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: inherit; } } /* On scroll, the header tightens — drop the label so the icon stays compact and other elements have room. */ header.scrolled .cats-header-label { display: none; } /* (Reverted 2026-05-17: the tablet-only absolute-positioned Updated block + padding-right:200 was causing visible overlap with the icon row at narrow tablet widths and breaking the expanded layout. Tablet falls back to natural flex-flow Updated like the pre-fix state. If the top-right pin is desired again, revisit after sorting out width math at 721/900/1024.) */ @media (min-width: 1180px) { .header-icon-row .cats-header-btn { display: none; } } .kind-tabs--header { margin: 0; } /* Dark theme: lift the icon-button border off the dark card surface. Default --line at #2a3138 was barely visible on tablet against the midnight background; --line-strong sits a bit brighter (#3d454e). */ [data-theme="dark"] .icon-btn, [data-theme="dark"] .theme-toggle { border-color: var(--line-strong); } [data-theme="dark"] .icon-btn:hover, [data-theme="dark"] .theme-toggle:hover { border-color: var(--cyan); } /* Tablet (721-1024) EXPANDED: TWO ROWS ONLY. Row 1: brand | tabs | weather-bar (centered) Row 2: icon-row (centered) + Updated (right edge), SAME ROW Per Gaither 2026-05-31 "move Updated to the exact same row as the icons on the lower row. only two rows". Updated leaves its old absolute top-right slot and sits inline alongside the icons. */ @media (min-width: 721px) and (max-width: 1024px) { header { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 6px; align-items: center; padding-top: 10px; padding-bottom: 14px; } header > .brand { grid-column: 1; grid-row: 1; } header > .kind-tabs--header { grid-column: 2; grid-row: 1; } header > .weather-bar { grid-column: 3; grid-row: 1; justify-self: center; margin: 0; } /* header-controls wraps Updated; display:contents lets its child become a direct grid item so we can place Updated in row 2. */ header > .header-controls { display: contents; } /* Both icon-row AND updated occupy row 2, spanning the full width. Icon-row centers itself; Updated pins to the right edge. They share the same row-track so the header is exactly two rows. */ header > .header-icon-row { grid-column: 1 / -1; grid-row: 2; justify-self: center; align-self: center; margin: 0; } header .updated { position: static; /* override the legacy absolute */ top: auto; right: auto; grid-column: 1 / -1; grid-row: 2; justify-self: end; align-self: center; max-width: 150px; margin: 0; font-size: 10px; line-height: 1.15; text-align: right; z-index: auto; pointer-events: auto; } header .updated .updated-label, header .updated .updated-date { font-size: 10px; } header .updated .next-refresh { display: block; font-size: 9.5px; } header > .hamburger, header > .mobile-icon-drawer-toggle { display: none; } } /* Tablet scroll-collapsed header: tighter vertical padding so the compressed row reads as a thin strip rather than a chunky band. */ @media (min-width: 721px) and (max-width: 1024px) { /* Move scrolled-state left items DOWN a hair via increased top padding. Updated stays at top:4 (absolute) so it doesn't move. Per Gaither 2026-05-17 "on shrunk tablet header, move top left stuff down a little, except 'Updated' area, it's fine". Was 2px top. */ header.scrolled { padding: 10px 24px 4px; gap: 12px; } header.scrolled .icon-btn, header.scrolled .theme-toggle { width: 32px; height: 32px; } header.scrolled .icon-btn svg, header.scrolled .theme-toggle svg { width: 16px; height: 16px; } header.scrolled .kind-tab { padding: 4px 12px; } /* Center the icons in scrolled state. Per Gaither 2026-05-17 "center lower icons on tablet in shrunk mode". */ header.scrolled > .header-icon-row { margin-left: auto; margin-right: auto; justify-content: center; } /* Tablet scrolled: weather sits CENTER-RIGHT (toward the right end of the header). Grid col 3 is 1fr, so justify-self: end pushes it to the right edge of that cell, which visually reads as "center-right" with brand+tabs on the left. Per Gaither 2026-05-31 "center more towards right". */ header.scrolled > .weather-bar { margin-left: auto; margin-right: 12px; justify-self: end; } /* Scrolled-state tablet: keep the SAME two-row grid (Updated inline on row 2 with icons), just tightened. Per Gaither 2026-05-31 "only two rows". */ header.scrolled .updated { position: static; top: auto; right: auto; grid-column: 1 / -1; grid-row: 2; justify-self: end; align-self: center; max-width: 140px; margin: 0; font-size: 9.5px; line-height: 1.15; text-align: right; } header.scrolled .updated .updated-label, header.scrolled .updated .updated-date { font-size: 9.5px; } header.scrolled .updated .next-refresh { display: none; } } @media (max-width: 720px) { /* 2026-05-17 mobile header layout: Expanded (top of page): Row 1: brand (left) + weather-bar (top-right, pinned) Row 2: News/Research kind tabs (centered) + icon-row (centered) Scrolled: Row 1: brand (left) + weather-bar (top-right) + chevron drawer toggle (replaces icon row). Icon row hides; tap chevron to reveal it as an overlay drawer below the header. Subtle shadow under the header so it feels lifted above the content when sticky. */ header { padding: 16px 18px; gap: 8px; flex-wrap: wrap; box-shadow: 0 2px 6px rgba(0,0,0,0.10); /* Force a solid bg layer so the iOS URL bar collapse/expand doesn't briefly paint a dark gap behind the header. Was visible when tapping between News and Research. */ background: var(--bg) !important; } .hamburger { display: none; } .header-controls { display: none; } #helpBtn { display: none; } /* Weather-bar pinned to top-right of the header at all mobile widths and scroll states. margin-left:auto pushes it to the right of the brand on the first wrap-row. Per Gaither 2026-05-17. */ header > .weather-bar { margin-left: auto; margin-right: 0; order: 2; align-self: flex-start; } header.scrolled > .weather-bar { margin-left: auto; margin-right: 0; } /* Row 2 at expanded state: News/Research tabs centered, icon row centered (matches prior layout). */ .kind-tabs--header, header > .header-icon-row { order: 3; margin-top: 4px; } .kind-tabs--header { align-self: center; margin: 0 auto; justify-content: center; } header > .header-icon-row { display: inline-flex; gap: 6px; margin: 0 auto; /* Wrap so the labeled pills in the expanded header flow onto extra centered rows instead of overflowing off-screen (Gaither 2026-06-23). */ flex-wrap: wrap; align-self: center; justify-content: center; } /* Slightly larger icons on mobile so they're comfortable tap targets. Per Gaither 2026-05-17 "make lower icon row icons slightly larger on mobile". Was 32 (forced down to fit 3 in one row); bumped to 36 since we're already wrapping the row onto row 2 anyway. */ header > .header-icon-row .icon-btn, header > .header-icon-row .theme-toggle { width: 36px; height: 36px; } header > .header-icon-row .icon-btn svg, header > .header-icon-row .theme-toggle svg { width: 18px; height: 18px; } header > .header-icon-row .bmc-header { padding: 6px 12px; font-size: 12.5px; } /* Expanded header (and the open scrolled-state drawer): label every icon-row button so the controls are self-explanatory (Gaither 2026-06-23: "on mobile expanded header view, put text on the buttons so people know what they do"). Buttons become labeled pills and wrap across the centered row. Collapsed (scrolled, drawer closed) stays icon-only behind the chevron. */ header:not(.scrolled) > .header-icon-row .icon-btn, header:not(.scrolled) > .header-icon-row .theme-toggle, body[data-icons-open="true"] header.scrolled > .header-icon-row .icon-btn, body[data-icons-open="true"] header.scrolled > .header-icon-row .theme-toggle { width: auto; min-width: 36px; border-radius: 999px; padding: 0 13px; gap: 6px; } header:not(.scrolled) > .header-icon-row .icon-label, header:not(.scrolled) > .header-icon-row .cats-header-label, header:not(.scrolled) > .header-icon-row .hide-viewed-label, body[data-icons-open="true"] header.scrolled > .header-icon-row .icon-label, body[data-icons-open="true"] header.scrolled > .header-icon-row .cats-header-label, body[data-icons-open="true"] header.scrolled > .header-icon-row .hide-viewed-label { display: inline-block !important; font-size: 11.5px; font-weight: 500; white-space: nowrap; } /* Hide-read button: widen from the forced 32px circle back to a labeled pill in the expanded / open-drawer state. */ header:not(.scrolled) > .header-icon-row .hide-viewed-pill, body[data-icons-open="true"] header.scrolled > .header-icon-row .hide-viewed-pill { width: auto !important; max-width: none; border-radius: 999px !important; padding: 0 13px 0 9px !important; } /* --- Mobile icon-drawer (Task A, Gaither 2026-05-17) --- When the header collapses (scrolled state) on mobile, the icon row tucks behind a chevron drawer toggle. Tap the chevron to reveal the icons as an overlay below the header; tap again or scroll to top to collapse. */ .mobile-icon-drawer-toggle { display: none; } header.scrolled > .header-icon-row { display: none; } header.scrolled > .mobile-icon-drawer-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--fg); cursor: pointer; order: 4; margin-left: auto; margin-right: 0; transition: border-color .15s, transform .2s ease; } [data-theme="dark"] header.scrolled > .mobile-icon-drawer-toggle { border-color: var(--line-strong); } header.scrolled > .mobile-icon-drawer-toggle:hover { border-color: var(--cyan); color: var(--cyan); } header.scrolled > .mobile-icon-drawer-toggle svg { width: 18px; height: 18px; transition: transform .2s ease; } /* When the drawer is open: rotate the chevron 180deg and re-render the icon row as an overlay drawer below the header. position: absolute relative to the (position: sticky) header so the drawer hangs underneath without forcing a header reflow. */ body[data-icons-open="true"] header.scrolled > .mobile-icon-drawer-toggle svg { transform: rotate(180deg); } body[data-icons-open="true"] header.scrolled > .mobile-icon-drawer-toggle { border-color: var(--cyan); color: var(--cyan); } body[data-icons-open="true"] header.scrolled > .header-icon-row { display: inline-flex; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 10px 16px; gap: 8px; background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 4px 10px rgba(0,0,0,0.12); justify-content: center; flex-wrap: wrap; z-index: 49; } } /* Tablet (721-1024): same subtle shadow under sticky header. */ @media (min-width: 721px) and (max-width: 1024px) { header { box-shadow: 0 2px 6px rgba(0,0,0,0.08); } /* Location chooser collapses to just the pin icon on tablet (Gaither 2026-06-23: "remove location name ... make it just the location icon"). The icon still opens the zip-code prompt. */ .weather-loc .weather-loc-label { display: none; } .weather-loc { padding: 3px 6px; } } /* Header Hide-viewed toggle pill. Lives where the search input used to be. Compact pill button with the same iOS-style switch graphic as the left-rail toggles, but inline-friendly. */ .header-toggle { display: inline-flex; align-items: center; gap: 10px; background: var(--subtle); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px 4px 8px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--fg); transition: background .15s, border-color .15s, color .15s; } .header-toggle:hover { border-color: var(--cyan); } .header-toggle-switch { width: 28px; height: 16px; border-radius: 999px; background: rgba(0,0,0,0.22); box-shadow: inset 0 1px 2px rgba(0,0,0,0.12); position: relative; flex-shrink: 0; transition: background .22s cubic-bezier(.32,.72,.45,1.16); } .header-toggle-switch::after { content: ""; position: absolute; left: 2px; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.18); transform: translateY(-50%); transition: left .22s cubic-bezier(.32,.72,.45,1.16); } .header-toggle[data-active="true"] .header-toggle-switch { background: var(--cyan); } .header-toggle[data-active="true"] .header-toggle-switch::after { left: 14px; } .header-toggle[data-active="true"] { color: var(--cyan); border-color: var(--cyan); } [data-theme="dark"] .header-toggle-switch { background: rgba(255,255,255,0.16); } [data-theme="dark"] .header-toggle[data-active="true"] .header-toggle-switch { background: var(--cyan); } .icon-btn { background: transparent; border: 1px solid var(--line); color: var(--fg); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: border-color .15s, background .15s; } .icon-btn:hover { border-color: var(--cyan); background: var(--cyan-soft); } .icon-btn svg { width: 18px; height: 18px; } /* Hide-read newspaper icon: open newspaper when OFF (showing all), newspaper with strikethrough when ON (hiding read articles). */ .hide-viewed-icon .icon-news-closed { display: none; } .hide-viewed-icon[data-active="true"] .icon-news-open { display: none; } .hide-viewed-icon[data-active="true"] .icon-news-closed { display: inline-block; } .hide-viewed-icon[data-active="true"] { color: var(--cyan); border-color: var(--cyan); background: var(--cyan-soft); } /* Pill mode: shows newspaper icon + 'Hide read' label initially. On scroll the label collapses to icon-only via body.scrolled-page. */ .hide-viewed-pill { width: auto !important; padding: 0 12px 0 9px; gap: 8px; border-radius: 999px !important; font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; /* Bumped from 110px so 'Hide read articles' / 'Show all articles' fit alongside the icon without clipping. Per Gaither 2026-05-14. */ max-width: 180px; } .hide-viewed-pill .hide-viewed-label { display: inline; white-space: nowrap; } body.scrolled-page .hide-viewed-pill { width: 36px !important; padding: 0; border-radius: 50% !important; max-width: 36px; } body.scrolled-page .hide-viewed-pill .hide-viewed-label { display: none; } /* On mobile the icon row gets narrower; drop the label proactively. */ @media (max-width: 720px) { .hide-viewed-pill { width: 32px !important; padding: 0; border-radius: 50% !important; } .hide-viewed-pill .hide-viewed-label { display: none; } } /* Bottom-fixed categories drawer toggle (mobile/tablet only). Pill with apps-grid icon + label + chevron. Larger + cyan-tinted so it's clearly visible against any card image behind it. */ .cats-drawer-toggle { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--cyan); color: #fff; border: 0; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; box-shadow: 0 4px 16px rgba(0,0,0,0.32); cursor: pointer; z-index: 80; transition: padding .2s ease, background .2s ease, gap .2s ease; } .cats-drawer-toggle:hover { background: var(--cyan); filter: brightness(1.05); } .cats-drawer-toggle svg { width: 18px; height: 18px; flex-shrink: 0; } .cats-drawer-toggle .cats-drawer-chev { width: 16px; height: 16px; transition: transform .15s ease; } .cats-drawer-toggle[data-active="true"] .cats-drawer-chev { transform: rotate(180deg); } /* Bottom-fixed drawer chevron is now redundant — the apps-grid icon in the header opens/closes the drawer, and an in-drawer close chevron lives at the bottom of the drawer itself. Gaither 2026-05-13 — kept the markup so old handlers still bind, but suppressed visually everywhere. */ .cats-drawer-toggle { display: none !important; } /* ---- Back to top ---- button.back-to-top (specificity 0,1,1) beats [data-tooltip] { position: relative } — without this tag the button collapses into the document flow and disappears from view. */ button.back-to-top { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--card-bg); color: var(--cyan); border: 2px solid var(--cyan); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.12); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .15s ease; z-index: 60; padding: 0; } button.back-to-top.is-visible { opacity: 1; pointer-events: auto; } button.back-to-top:hover { transform: translateY(-2px); } button.back-to-top svg { width: 20px; height: 20px; } /* ---- Load more ---- */ .load-more-row { display: flex; justify-content: center; margin-top: 32px; } .load-more { background: transparent; border: 1px solid var(--line); color: var(--fg); padding: 12px 28px; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .load-more:hover { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-soft); } .load-more[disabled] { opacity: 0.5; cursor: default; } /* Kind-tabs pill height-matched to .icon-btn (36px). Same outer dimension means the tabs row visually aligns with the icon row instead of one sitting slightly higher or lower. */ .kind-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--subtle); border-radius: 999px; height: 36px; align-items: center; box-sizing: border-box; } .kind-tab { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; transition: background .15s, color .15s; display: inline-flex; align-items: center; gap: 6px; line-height: 1; } .kind-tab:hover { color: var(--fg); text-decoration: none; } .kind-tab[data-active="true"] { background: var(--cyan-soft); color: var(--cyan); box-shadow: 0 1px 2px rgba(26,26,26,0.06); font-weight: 600; } [data-theme="dark"] .kind-tab[data-active="true"] { box-shadow: 0 1px 2px rgba(0,0,0,0.4); } /* Icons always visible alongside the text label on every width. Per Gaither 2026-05-12 — icons next to "News" / "Research" on desktop AND tablet at all times; mobile and tablet then drop the label on scroll-collapse so the icon-only pill reclaims room while reading. */ .kind-tab-icon { display: inline-flex; align-items: center; } .kind-tab-icon svg { width: 16px; height: 16px; display: block; } .kind-tab-label { display: inline; } /* Scroll-collapse: drop the kind-tab text label at all widths when the header is scrolled. Per Gaither 2026-05-16: "macbook 16 retina 2019 screen hide the text from the News / Research button and make sure icons move up to header on scroll / shrink." Icons stay visible at every breakpoint so the active tab indicator (cyan-soft pill) keeps reading correctly. */ /* Tablet (721-1024): SLIGHTLY smaller kind-tabs to claim less header width per Gaither 2026-05-17 "News Research toggle a little smaller on tablet". Affects expanded + scrolled. */ @media (min-width: 721px) and (max-width: 1024px) { .kind-tabs { height: 30px; padding: 2px; gap: 2px; } .kind-tab { padding: 4px 10px; font-size: 12px; gap: 4px; } .kind-tab .kind-tab-icon svg { width: 14px; height: 14px; } /* KEEP the News/Research labels even when scrolled — per Gaither 2026-05-31 "expand News/Research text" on collapsed header. */ header.scrolled .kind-tab { padding: 4px 10px; } header.scrolled .kind-tab-label { display: inline; font-size: 12px; } } /* Mobile (<=720): KEEP the News/Research text label at scrolled. Per Gaither 2026-05-17: "on mobile header shrunk add News / Research text to toggle". Small viewport readers want clear labels for the section switcher, not just bare icons. */ @media (max-width: 720px) { header.scrolled .kind-tab { padding: 4px 10px; } header.scrolled .kind-tab-label { display: inline; font-size: 12px; } } /* Desktop / MBP 16 retina (>1024px): drop the label on scroll so the compressed header strip has room for the icon row + Updated + weather without wrapping. */ @media (min-width: 1025px) { /* Keep News/Research labels even on scroll, per Gaither 2026-05-31. */ header.scrolled .kind-tab { padding: 5px 12px; } header.scrolled .kind-tab-label { display: inline; font-size: 12px; } } /* Earlier rule hid .kind-tab-label permanently on widths ≤1920px. Per Gaither 2026-05-16 follow-up: "News / Research can have text on Expanded header, before scroll and shrink." Labels return at the expanded (pre-scroll) state on every desktop width; the scrolled-state hide above still kicks in once the header shrinks. */ .theme-toggle { background: transparent; border: 1px solid var(--line); color: var(--fg); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: border-color .15s, background .15s; } .theme-toggle:hover { border-color: var(--cyan); background: var(--cyan-soft); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-pref { display: none; } html[data-theme-pref="light"] .theme-toggle .icon-pref-light { display: inline; } html[data-theme-pref="dark"] .theme-toggle .icon-pref-dark { display: inline; } html[data-theme-pref="auto"] .theme-toggle .icon-pref-auto { display: inline; } html[data-theme-pref="colorblind"] .theme-toggle .icon-pref-colorblind { display: inline; } html[data-theme-pref="retro"] .theme-toggle .icon-pref-retro { display: inline; } html[data-theme-pref="retro80s"] .theme-toggle .icon-pref-retro80s { display: inline; } /* Sort-mode cycle button. Only the icon matching data-mode shows. */ .sort-btn .sort-icon { display: none; } .sort-btn[data-mode="category"] .sort-icon-category { display: inline; } .sort-btn[data-mode="sources"] .sort-icon-sources { display: inline; } .sort-btn[data-mode="random"] .sort-icon-random { display: inline; } .sort-btn[data-mode="saved"] .sort-icon-saved { display: inline; color: #e94e7b; } .sort-btn[data-mode="saved"] { border-color: #e94e7b; } /* Cards filtered out by the sort-btn (saved mode) hide entirely. */ .grid > .card[data-sort-hidden="true"] { display: none; } .rail-list > .rail-item[data-sort-hidden="true"] { display: none; } /* Font-size cycle. data-font-size on drives explicit overrides on the reader-visible text (headlines, summaries, L/R panels, source pills). Setting html { font-size } alone wouldn't do anything because the cards use px values throughout — Gaither correctly flagged that the button "did nothing" before. Three steps to stay simple: normal / large / xlarge. */ html[data-font-size="large"] .card .headline { font-size: 27px; } html[data-font-size="large"] .card .expanded { font-size: 16.5px; } html[data-font-size="large"] .card .meta { font-size: 13px; } html[data-font-size="large"] .lr-col p, html[data-font-size="large"] .lr-col .lr-body, html[data-font-size="large"] .prior-coverage-inline, html[data-font-size="large"] .read-more-box { font-size: 16px; } html[data-font-size="large"] .rail-headline { font-size: 14.5px; } html[data-font-size="xlarge"] .card .headline { font-size: 30px; } html[data-font-size="xlarge"] .card .expanded { font-size: 18px; } html[data-font-size="xlarge"] .card .meta { font-size: 14px; } html[data-font-size="xlarge"] .lr-col p, html[data-font-size="xlarge"] .lr-col .lr-body, html[data-font-size="xlarge"] .prior-coverage-inline, html[data-font-size="xlarge"] .read-more-box { font-size: 17.5px; } html[data-font-size="xlarge"] .rail-headline { font-size: 15.5px; } /* Font-size icon constrained to the 36px button so it doesn't visually balloon past the circle border the way other header icons (theme, random, keyboard) stay inside. Per Gaither feedback 2026-05-12 — icons should look aligned in size + frame. */ .font-size-toggle svg { width: 22px; height: 22px; overflow: hidden; } /* Three A glyphs at different sizes; CSS picks which one shows based on the current html[data-font-size] state. Default (no attribute) shows the smallest A. */ .font-size-toggle .fs-a-normal { display: inline; } .font-size-toggle .fs-a-large, .font-size-toggle .fs-a-xlarge { display: none; } html[data-font-size="large"] .font-size-toggle .fs-a-normal { display: none; } html[data-font-size="large"] .font-size-toggle .fs-a-large { display: inline; } html[data-font-size="xlarge"] .font-size-toggle .fs-a-normal { display: none; } html[data-font-size="xlarge"] .font-size-toggle .fs-a-xlarge { display: inline; } /* No active-state glow on the font sizer — it looked like a button that was stuck in a "pressed" state next to the plain help/theme icons. The font itself growing on the page is the only feedback the user needs that the cycle worked. */ /* ---- Desktop side rails ---- [filters rail | main | opposite-kind rail] grid on wide viewports. - Left rail (.rail-filters) holds the category chips, sticky so they're always reachable while scrolling the main feed. - Right rail (.rail-opposite) shows the OPPOSITE-kind recent items (news on research page, research on news page), also sticky. - Mobile (<1180px) gets the original horizontal filter strip at the top of the page and no side rails. */ .layout { display: block; } .rail { display: none; } /* Floating chevron rail-toggle is desktop-only. The mobile layout has no left rail to toggle. Without this base rule the button defaulted to