/* * Weekest — Theme System * themes.css · v1.0 * * Three visual themes × two modes (day/night) = six combinations. * Applied via data attributes on : * * data-wr-theme = "default" | "weather-simple" | "weather-bold" * data-wr-mode = "day" | "night" (set by theme.js from user pref + system) * * Component CSS references only CSS variables — never hard-coded colors. * The weather engine outputs a data-wr-weather attribute on each .week-card: * * data-wr-weather = "clear" | "partly-cloudy" | "overcast" * | "stormy" | "clearing" | "pressure" * * Storm intensity is a separate attribute on stormy cards: * data-wr-storm-level = "1" | "2" | "3" | "4" | "5" * * ───────────────────────────────────────────────────────────────────────────── * TOKEN FAMILIES * ───────────────────────────────────────────────────────────────────────────── * * CHROME — nav, settings, org screens, configure. Always grayscale. * CONTENT — week cards, team rows. Themed. * WEATHER — per-state card header gradients and accent colors. * ICON — per-state icon colors, matched to weather tokens. * TEXT — body, muted, sub. Adjusted per mode. * BRAND — dawn, dusk, accent. Earthy core palette. */ /* ═══════════════════════════════════════════════════════════════════════════ CHROME — always grayscale, same structure for all themes Surfaces that are never themed: nav, settings, org screens, configure. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Chrome surfaces */ --chrome-bg: #f5f5f3; --chrome-bg-2: #ebebea; --chrome-border: #d8d8d6; --chrome-text: #2a2a28; --chrome-text-muted: #6a6a68; --chrome-text-sub: #909090; /* Chrome interactive */ --chrome-btn-bg: #2a2a28; --chrome-btn-text: #f5f5f3; --chrome-btn-border: #2a2a28; /* Shared brand (used in chrome for accents only) */ --brand-dawn: #e8b974; --brand-dusk: #c97b5a; --brand-dusk-text: #985237; --brand-clear: #7fa6a0; --brand-storm: #5a6b6f; } [data-wr-mode="night"] { --chrome-bg: #1a1a1a; --chrome-bg-2: #242424; --chrome-border: #333333; --chrome-text: #f0f0ee; --chrome-text-muted: #909090; --chrome-text-sub: #606060; --chrome-btn-bg: #f0f0ee; --chrome-btn-text: #1a1a1a; --chrome-btn-border: #f0f0ee; } /* ═══════════════════════════════════════════════════════════════════════════ THEME: DEFAULT — earthy atmospheric, journal register ═══════════════════════════════════════════════════════════════════════════ */ [data-wr-theme="default"] { /* Content surfaces */ --content-bg: #f4efe6; --content-bg-2: #ebe3d5; --content-border: #cfc4af; --content-line: rgba(207,196,175,.45); /* Content text */ --content-text: #2b2a26; --content-muted: #625e52; --content-sub: #5b554a; /* Week card base */ --card-bg: #f4efe6; --card-border: #cfc4af; --card-shadow: 0 12px 40px rgba(0,0,0,.14); /* Card header — overridden per weather state below */ --card-hdr-bg: #ebe3d5; --card-hdr-text: #2b2a26; --card-hdr-sub: #625e52; /* Card accent border (left edge) */ --card-accent: #cfc4af; /* Badge */ --badge-bg: #2b2a26; --badge-text: #f4efe6; /* Icon sizes */ --icon-size: 22px; /* Chyron / condition label */ --chyron-show: 0; /* 0 = hidden, 1 = visible — default hides chyron */ --condlabel-show: 1; /* condition badge visible in default */ } [data-wr-theme="default"][data-wr-mode="night"] { --content-bg: #0d0f1a; --content-bg-2: #141728; --content-border: #272b45; --content-line: rgba(39,43,69,.8); --content-text: #e8eaf6; --content-muted: #9096b8; --content-sub: #b0b6d4; --card-bg: #141728; --card-border: #272b45; --card-shadow: 0 12px 40px rgba(0,0,0,.4); --card-hdr-bg: #1a1f38; --card-hdr-text: #e8eaf6; --card-hdr-sub: #9096b8; --card-accent: #272b45; --badge-bg: #e8eaf6; --badge-text: #0d0f1a; } /* ── Default weather state tokens ── */ [data-wr-theme="default"] .week-card[data-wr-weather="clear"] { --card-hdr-bg: linear-gradient(135deg, #f5d070 0%, #e8b040 35%, #f0c860 65%, #fae8a0 100%); --card-hdr-text: #5a3800; --card-hdr-sub: rgba(90,56,0,.6); --card-accent: linear-gradient(180deg, #f0c040, #c88820); --badge-bg: #7a4e08; --badge-text: #fff8e0; --icon-color: #8a5800; --icon-glow: rgba(255,200,40,.55); } [data-wr-theme="default"] .week-card[data-wr-weather="partly-cloudy"] { --card-hdr-bg: linear-gradient(135deg, #deb870 0%, #c89848 40%, #e8c878 70%, #f5dfa8 100%); --card-hdr-text: #4a3010; --card-hdr-sub: rgba(74,48,16,.6); --card-accent: linear-gradient(180deg, #d4a860, #a87830); --badge-bg: #a87830; --badge-text: #fff5e0; --icon-color: #6a4818; --icon-glow: rgba(220,160,60,.5); } [data-wr-theme="default"] .week-card[data-wr-weather="overcast"] { --card-hdr-bg: linear-gradient(135deg, #9ab8c8 0%, #6a8fa8 40%, #88a8be 70%, #c0d4e0 100%); --card-hdr-text: #1e3848; --card-hdr-sub: rgba(30,56,72,.65); --card-accent: linear-gradient(180deg, #8fa8b8, #5a7888); --badge-bg: #2e4e5e; --badge-text: #e8f0f5; --icon-color: #2a4858; --icon-glow: rgba(100,150,190,.45); } [data-wr-theme="default"] .week-card[data-wr-weather="stormy"] { --card-hdr-bg: linear-gradient(135deg, #2e4a68 0%, #1e3454 40%, #304e70 60%, #486888 100%); --card-hdr-text: #e0eef8; --card-hdr-sub: rgba(200,224,245,.65); --card-accent: linear-gradient(180deg, #3a5878, #1e3850); --badge-bg: #1e3454; --badge-text: #c0d8f0; --icon-color: #a8c8e0; --icon-glow: rgba(80,130,190,.5); } [data-wr-theme="default"] .week-card[data-wr-weather="clearing"] { --card-hdr-bg: linear-gradient(135deg, #c89030 0%, #e8b040 30%, #f0c060 55%, #fad878 80%, #e8b848 100%); --card-hdr-text: #3a2400; --card-hdr-sub: rgba(58,36,0,.6); --card-accent: linear-gradient(180deg, #d4a030, #906010); --badge-bg: #906010; --badge-text: #fff5d0; --icon-color: #5a3800; --icon-glow: rgba(240,180,40,.55); } [data-wr-theme="default"] .week-card[data-wr-weather="pressure"] { --card-hdr-bg: linear-gradient(135deg, #b85030 0%, #d07040 30%, #c05840 55%, #902838 80%, #c04840 100%); --card-hdr-text: #f8e8d0; --card-hdr-sub: rgba(248,232,208,.65); --card-accent: linear-gradient(180deg, #c06840, #882840); --badge-bg: #7a2030; --badge-text: #fde8d0; --icon-color: #f8d090; --icon-glow: rgba(240,140,60,.55); } /* Storm intensity — default theme */ [data-wr-theme="default"] .week-card[data-wr-weather="stormy"][data-wr-storm-level="2"] { --card-hdr-bg: linear-gradient(135deg, #263d58 0%, #182c48 40%, #284260 60%, #3a5878 100%); } [data-wr-theme="default"] .week-card[data-wr-weather="stormy"][data-wr-storm-level="3"] { --card-hdr-bg: linear-gradient(135deg, #1e3048 0%, #122438 40%, #203450 60%, #2e4868 100%); --card-hdr-text: #c0d8f0; } [data-wr-theme="default"] .week-card[data-wr-weather="stormy"][data-wr-storm-level="4"] { --card-hdr-bg: linear-gradient(135deg, #162438 0%, #0e1c2c 40%, #182840 60%, #263a52 100%); --card-hdr-text: #c0d8f0; } [data-wr-theme="default"] .week-card[data-wr-weather="stormy"][data-wr-storm-level="5"] { --card-hdr-bg: linear-gradient(135deg, #0e1828 0%, #081420 40%, #101c30 60%, #1e2e42 100%); --card-hdr-text: #b0ccee; } /* Night overrides — default weather states */ [data-wr-theme="default"][data-wr-mode="night"] .week-card[data-wr-weather="clear"] { --card-hdr-bg: linear-gradient(135deg, #3a2800 0%, #5a4000 40%, #402e00 70%, #2e2000 100%); --card-hdr-text: #f5d880; --card-hdr-sub: rgba(245,216,128,.55); --card-accent: linear-gradient(180deg, #8060a0, #5a3880); --badge-bg: #5a4000; --badge-text: #f5d880; --icon-color: #f0c840; --icon-glow: rgba(240,180,40,.35); } [data-wr-theme="default"][data-wr-mode="night"] .week-card[data-wr-weather="partly-cloudy"] { --card-hdr-bg: linear-gradient(135deg, #2a1e08 0%, #402e10 40%, #301e08 70%, #201408 100%); --card-hdr-text: #e8c880; --card-hdr-sub: rgba(232,200,128,.5); --icon-color: #d4a040; } [data-wr-theme="default"][data-wr-mode="night"] .week-card[data-wr-weather="overcast"] { --card-hdr-bg: linear-gradient(135deg, #1e2838 0%, #283448 40%, #202e40 70%, #182030 100%); --card-hdr-text: #b0c8d8; --card-hdr-sub: rgba(176,200,216,.5); --icon-color: #8fa8b8; } [data-wr-theme="default"][data-wr-mode="night"] .week-card[data-wr-weather="stormy"] { --card-hdr-bg: linear-gradient(135deg, #0a1828 0%, #0e2038 40%, #0c1c30 70%, #162840 100%); --card-hdr-text: #b0ccee; --card-hdr-sub: rgba(176,204,238,.55); --icon-color: #80b0e0; } [data-wr-theme="default"][data-wr-mode="night"] .week-card[data-wr-weather="clearing"] { --card-hdr-bg: linear-gradient(135deg, #302000 0%, #503000 40%, #402800 70%, #281800 100%); --card-hdr-text: #f0cc70; --card-hdr-sub: rgba(240,204,112,.55); --icon-color: #e8b840; } [data-wr-theme="default"][data-wr-mode="night"] .week-card[data-wr-weather="pressure"] { --card-hdr-bg: linear-gradient(135deg, #280818 0%, #480c28 40%, #381028 70%, #280818 100%); --card-hdr-text: #f8c890; --card-hdr-sub: rgba(248,200,144,.55); --icon-color: #f0a060; } /* ═══════════════════════════════════════════════════════════════════════════ THEME: WEATHER SIMPLE — atmospheric gradients, restrained typography ═══════════════════════════════════════════════════════════════════════════ */ [data-wr-theme="weather-simple"] { --content-bg: #f4efe6; --content-bg-2: #ebe3d5; --content-border: #cfc4af; --content-line: rgba(255,255,255,.12); --content-text: #2b2a26; --content-muted: #625e52; --content-sub: #5b554a; --card-bg: transparent; --card-border: none; --card-shadow: 0 24px 60px rgba(0,0,0,.4); --card-hdr-bg: linear-gradient(180deg, #1a6fb5, #7ecef5); --card-hdr-text: #fff; --card-hdr-sub: rgba(255,255,255,.7); --card-accent: none; --badge-bg: transparent; --badge-text: transparent; --icon-size: 36px; /* Item panel — semi-transparent over gradient */ --panel-bg: rgba(8,10,20,.82); --panel-text: #e8eaf6; --panel-line: rgba(255,255,255,.08); /* Chyron strip */ --chyron-show: 1; --chyron-bg: rgba(0,0,0,.4); --chyron-text: #e8eaf6; --chyron-height: 28px; --condlabel-show: 0; } [data-wr-theme="weather-simple"][data-wr-mode="night"] { --panel-bg: rgba(4,5,14,.88); --chyron-bg: rgba(0,0,0,.55); } /* Simple weather states — full gradient sky backgrounds */ [data-wr-theme="weather-simple"] .week-card[data-wr-weather="clear"] { --card-hdr-bg: linear-gradient(180deg, #1a6fb5 0%, #3a9dd4 40%, #7ecef5 70%, #b8e4f7 100%); --card-hdr-text:#fff; --chyron-text: #0d2137; --chyron-bg: rgba(255,255,255,.32); --icon-color: #e8a820; } [data-wr-theme="weather-simple"] .week-card[data-wr-weather="partly-cloudy"] { --card-hdr-bg: linear-gradient(180deg, #2a7ab5 0%, #5a9ec8 35%, #9ac4d8 65%, #d0e8f0 100%); --card-hdr-text:#fff; --chyron-bg: rgba(255,255,255,.28); --chyron-text: #1a3848; --icon-color: #c89028; } [data-wr-theme="weather-simple"] .week-card[data-wr-weather="overcast"] { --card-hdr-bg: linear-gradient(180deg, #4a5568 0%, #718096 40%, #a0aec0 100%); --card-hdr-text:#f0f4ff; --icon-color: #c8d4e0; } [data-wr-theme="weather-simple"] .week-card[data-wr-weather="stormy"] { --card-hdr-bg: linear-gradient(180deg, #0d1b2a 0%, #1c2f45 30%, #2a3f56 60%, #1e3a4f 100%); --card-hdr-text:#e0eef8; --icon-color: #9fb6ba; } [data-wr-theme="weather-simple"] .week-card[data-wr-weather="clearing"] { --card-hdr-bg: linear-gradient(160deg, #2d5a8e 0%, #c17f3a 50%, #e8a84a 80%, #f5c96a 100%); --card-hdr-text:#fff; --icon-color: #fff; } [data-wr-theme="weather-simple"] .week-card[data-wr-weather="pressure"] { --card-hdr-bg: linear-gradient(160deg, #2d1b4e 0%, #5a3475 40%, #c0603a 80%, #e07840 100%); --card-hdr-text:#fde8d0; --icon-color: #f8d090; } /* Night — simple */ [data-wr-theme="weather-simple"][data-wr-mode="night"] .week-card[data-wr-weather="clear"] { --card-hdr-bg: linear-gradient(180deg, #080918 0%, #0d1230 35%, #141b48 65%, #1a2258 100%); --card-hdr-text:#c8d8f8; --icon-color: #c8d8f8; } [data-wr-theme="weather-simple"][data-wr-mode="night"] .week-card[data-wr-weather="partly-cloudy"] { --card-hdr-bg: linear-gradient(180deg, #080918 0%, #0e1535 40%, #182050 70%, #101838 100%); --card-hdr-text:#b0c4e8; --icon-color: #b0c4e8; } [data-wr-theme="weather-simple"][data-wr-mode="night"] .week-card[data-wr-weather="overcast"] { --card-hdr-bg: linear-gradient(180deg, #0e1020 0%, #181c30 40%, #202438 100%); --card-hdr-text:#8fa8b8; --icon-color: #8fa8b8; } [data-wr-theme="weather-simple"][data-wr-mode="night"] .week-card[data-wr-weather="stormy"] { --card-hdr-bg: linear-gradient(180deg, #060810 0%, #0a0e1a 30%, #0e1424 60%, #080c16 100%); --card-hdr-text:#80b0e0; --icon-color: #80b0e0; } [data-wr-theme="weather-simple"][data-wr-mode="night"] .week-card[data-wr-weather="clearing"] { --card-hdr-bg: linear-gradient(160deg, #0a0818 0%, #1a1030 40%, #2a1a40 65%, #180c28 100%); --card-hdr-text:#c0cef8; --icon-color: #c0cef8; } [data-wr-theme="weather-simple"][data-wr-mode="night"] .week-card[data-wr-weather="pressure"] { --card-hdr-bg: linear-gradient(160deg, #100818 0%, #200a28 40%, #300820 70%, #180610 100%); --card-hdr-text:#c890d8; --icon-color: #b090d0; } /* ═══════════════════════════════════════════════════════════════════════════ THEME: WEATHER BOLD — full broadcast, Barlow Condensed, dominant icon ═══════════════════════════════════════════════════════════════════════════ */ [data-wr-theme="weather-bold"] { --content-bg: #f4efe6; --content-bg-2: #ebe3d5; --content-border: #cfc4af; --content-line: rgba(255,255,255,.08); --content-text: #2b2a26; --content-muted: #625e52; --content-sub: #5b554a; --card-bg: transparent; --card-border: none; --card-shadow: 0 12px 40px rgba(0,0,0,.14); --icon-size: 80px; /* Panel */ --panel-bg: rgba(6,10,18,.88); --panel-text: #e8eaf6; --panel-line: rgba(255,255,255,.07); /* Chyron */ --chyron-show: 1; --chyron-bg: rgba(0,0,0,.88); --chyron-text: #e8eaf6; --chyron-height: 38px; --chyron-accent: 1; /* colored left border on chyron */ --condlabel-show: 0; /* condition moves to chyron strip, not header */ --condlabel-size: 1.9rem; /* Broadcast header font */ --hdr-font: 'Barlow Condensed', sans-serif; --hdr-font-weight: 800; } [data-wr-theme="weather-bold"][data-wr-mode="night"] { --panel-bg: rgba(3,4,10,.92); } /* Bold weather states */ [data-wr-theme="weather-bold"] .week-card[data-wr-weather="clear"] { --card-hdr-bg: linear-gradient(135deg, #1a6fb5 0%, #3a9dd4 40%, #7ecef5 80%, #b8e4f7 100%); --card-hdr-text: #0d2137; --chyron-accent-color: #3a9dd4; --icon-color: #e8a820; } [data-wr-theme="weather-bold"] .week-card[data-wr-weather="partly-cloudy"] { --card-hdr-bg: linear-gradient(135deg, #1e5a8a 0%, #4a8ab8 40%, #88b8d0 80%, #c0dce8 100%); --card-hdr-text: #0e2838; --chyron-accent-color: #4a8ab8; --icon-color: #d49028; } [data-wr-theme="weather-bold"] .week-card[data-wr-weather="overcast"] { --card-hdr-bg: linear-gradient(135deg, #3a4558 0%, #5a6878 40%, #8090a0 80%, #a8b8c4 100%); --card-hdr-text: #f0f4ff; --chyron-accent-color: #8090a0; --icon-color: #c8d4e0; } [data-wr-theme="weather-bold"] .week-card[data-wr-weather="stormy"] { --card-hdr-bg: linear-gradient(135deg, #0d1b2a 0%, #1a2f48 30%, #253f5c 60%, #1a3050 100%); --card-hdr-text: #e0eef8; --chyron-accent-color: #7098b8; --icon-color: #7098b8; } [data-wr-theme="weather-bold"] .week-card[data-wr-weather="clearing"] { --card-hdr-bg: linear-gradient(135deg, #2d5a8e 0%, #c8803a 40%, #e8a840 70%, #f8d060 100%); --card-hdr-text: #fff; --chyron-accent-color: #e8a840; --icon-color: #fff8e0; } [data-wr-theme="weather-bold"] .week-card[data-wr-weather="pressure"] { --card-hdr-bg: linear-gradient(135deg, #2d1b4e 0%, #6a3880 30%, #c06038 70%, #e07840 100%); --card-hdr-text: #fde8d0; --chyron-accent-color: #e07840; --icon-color: #f8d090; } /* Storm intensity — bold */ [data-wr-theme="weather-bold"] .week-card[data-wr-weather="stormy"][data-wr-storm-level="2"] { --card-hdr-bg: linear-gradient(135deg, #0a1622 0%, #162840 30%, #203850 60%, #182e48 100%); } [data-wr-theme="weather-bold"] .week-card[data-wr-weather="stormy"][data-wr-storm-level="3"] { --card-hdr-bg: linear-gradient(135deg, #081018 0%, #101e30 30%, #182838 60%, #102030 100%); } [data-wr-theme="weather-bold"] .week-card[data-wr-weather="stormy"][data-wr-storm-level="4"] { --card-hdr-bg: linear-gradient(135deg, #060c12 0%, #0c1824 30%, #101e2a 60%, #0c1820 100%); } [data-wr-theme="weather-bold"] .week-card[data-wr-weather="stormy"][data-wr-storm-level="5"] { --card-hdr-bg: linear-gradient(135deg, #040810 0%, #08101c 30%, #0c1620 60%, #080e18 100%); } /* Night — bold */ [data-wr-theme="weather-bold"][data-wr-mode="night"] .week-card[data-wr-weather="clear"] { --card-hdr-bg: linear-gradient(135deg, #06080f 0%, #0c1228 30%, #121a40 60%, #0a1030 100%); --card-hdr-text: #c8d8f8; --chyron-accent-color: #8090d0; --icon-color: #c8d8f8; } [data-wr-theme="weather-bold"][data-wr-mode="night"] .week-card[data-wr-weather="partly-cloudy"] { --card-hdr-bg: linear-gradient(135deg, #080a14 0%, #0e1530 40%, #161e44 70%, #0c1030 100%); --card-hdr-text: #b0c4e8; --icon-color: #b0c4e8; } [data-wr-theme="weather-bold"][data-wr-mode="night"] .week-card[data-wr-weather="overcast"] { --card-hdr-bg: linear-gradient(135deg, #0c0e18 0%, #141828 40%, #1c2030 70%, #10141e 100%); --card-hdr-text: #8fa8b8; --icon-color: #8fa8b8; } [data-wr-theme="weather-bold"][data-wr-mode="night"] .week-card[data-wr-weather="stormy"] { --card-hdr-bg: linear-gradient(135deg, #04060c 0%, #080c16 30%, #0c1020 60%, #060810 100%); --card-hdr-text: #80b0e0; --chyron-accent-color: #5078a8; --icon-color: #80b0e0; } [data-wr-theme="weather-bold"][data-wr-mode="night"] .week-card[data-wr-weather="clearing"] { --card-hdr-bg: linear-gradient(135deg, #08060e 0%, #140a20 40%, #200e30 70%, #0e0818 100%); --card-hdr-text: #c0cef8; --icon-color: #c0cef8; } [data-wr-theme="weather-bold"][data-wr-mode="night"] .week-card[data-wr-weather="pressure"] { --card-hdr-bg: linear-gradient(135deg, #0c0610 0%, #1a0820 40%, #280818 70%, #120610 100%); --card-hdr-text: #d090e0; --chyron-accent-color: #a060c0; --icon-color: #b090d0; } /* ═══════════════════════════════════════════════════════════════════════════ WEEK CARD — structural rules (theme-agnostic) These apply the CSS variables above to actual card elements. ═══════════════════════════════════════════════════════════════════════════ */ .week-card { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); position: relative; } /* Left accent border */ .week-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 5px; border-radius: inherit; border-radius: 14px 0 0 14px; background: var(--card-accent); z-index: 2; } /* Hide accent border on simple/bold — not needed */ [data-wr-theme="weather-simple"] .week-card::before, [data-wr-theme="weather-bold"] .week-card::before { display: none; } .week-card-header { background: var(--card-hdr-bg); color: var(--card-hdr-text); } /* Simple: center icon vertically with week meta */ [data-wr-theme="weather-simple"] .week-card-header { align-items: center; } /* Bold: wrap so condition text breaks to its own row, left-aligned */ [data-wr-theme="weather-bold"] .week-card-header { flex-wrap: wrap; align-items: center; gap: 6px 10px; } [data-wr-theme="weather-bold"] .week-card-condition { flex: 0 0 100%; text-align: left; margin-top: -2px; } .week-card-icon { width: var(--icon-size); height: var(--icon-size); color: var(--icon-color); } /* Default: icon glow wrapper */ [data-wr-theme="default"] .wx-glow { background: radial-gradient(circle, var(--icon-glow) 0%, transparent 70%); } /* Simple: week-meta (num pill + date range) uses --card-hdr-text, not the old --card-fg */ [data-wr-theme="weather-simple"] .week-card__date-range { color: var(--card-hdr-text); } [data-wr-theme="weather-simple"] .week-card__week-num { background: rgba(255,255,255,.25); color: var(--card-hdr-text); } /* Simple: frosted circle backdrop lifts the icon off the sky gradient */ [data-wr-theme="weather-simple"] .wx-glow-wrap { background: rgba(255,255,255,.22); border-radius: 50%; padding: 7px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } [data-wr-theme="weather-simple"][data-wr-mode="night"] .wx-glow-wrap { background: rgba(255,255,255,.12); } /* Chyron — hidden/shown via token */ .week-card-chyron { display: none; background: var(--chyron-bg); color: var(--chyron-text); height: var(--chyron-height, 32px); } [data-wr-theme="weather-simple"] .week-card-chyron, [data-wr-theme="weather-bold"] .week-card-chyron { display: flex; align-items: center; padding: 0 12px; gap: 6px; } /* Chyron accent border — bold only */ [data-wr-theme="weather-bold"] .week-card-chyron { border-left: 3px solid var(--chyron-accent-color, currentColor); } /* Chyron typography — Simple and Bold */ /* Label (condition name): prominent, mono, uppercase */ [data-wr-theme="weather-simple"] .chyron-label, [data-wr-theme="weather-bold"] .chyron-label { font-family: 'Spline Sans Mono', monospace; font-size: .6rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; opacity: 1; flex: 1; } /* Bold overrides label with Barlow Condensed + accent color */ [data-wr-theme="weather-bold"] .chyron-label { font-family: 'Barlow Condensed', sans-serif; font-size: .75rem; font-weight: 800; letter-spacing: .06em; color: var(--chyron-accent-color, currentColor); } /* Meta (active count): right-aligned, smaller, muted */ [data-wr-theme="weather-simple"] .chyron-meta, [data-wr-theme="weather-bold"] .chyron-meta { font-family: 'Spline Sans Mono', monospace; font-size: .52rem; font-weight: 400; opacity: .55; margin-left: auto; white-space: nowrap; } [data-wr-theme="weather-bold"] .chyron-meta { font-family: 'Barlow Condensed', sans-serif; font-size: .68rem; font-weight: 600; } /* Condition label — bold header text */ .week-card-condition { display: none; font-family: var(--hdr-font, inherit); font-weight: var(--hdr-font-weight, 600); font-size: var(--condlabel-size, 1rem); letter-spacing: .08em; text-transform: uppercase; } /* Bold — condition label suppressed everywhere; chyron strip carries the condition instead */ [data-wr-theme="weather-bold"] .week-card-condition { display: none; } /* Bold — team view: scale icon down to fit stacked rows */ [data-wr-theme="weather-bold"] .team-member-row .week-card { --icon-size: 48px; } /* Item panel — simple/bold use scrim panel */ .week-card-panel { background: var(--panel-bg, var(--content-bg)); color: var(--panel-text, var(--content-text)); } .week-card-panel .week-item { border-bottom-color: var(--panel-line, var(--content-line)); } /* Badge — default theme only */ .week-card-badge { display: none; background: var(--badge-bg); color: var(--badge-text); font-family: 'Spline Sans Mono', monospace; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; padding: .28rem .6rem; border-radius: 20px; } [data-wr-theme="default"] .week-card-badge { display: inline-block; } /* ═══════════════════════════════════════════════════════════════════════════ TEAM FORECAST BAR Thin bar above week nav in team view. Color + icon only, no text. ═══════════════════════════════════════════════════════════════════════════ */ .team-forecast-bar { height: 6px; width: 100%; background: var(--chrome-border); position: relative; display: flex; align-items: center; justify-content: center; } .team-forecast-bar-fill { position: absolute; inset: 0; opacity: .7; } .team-forecast-bar[data-wr-weather="clear"] .team-forecast-bar-fill { background: #c88820; } .team-forecast-bar[data-wr-weather="partly-cloudy"] .team-forecast-bar-fill { background: #a87830; } .team-forecast-bar[data-wr-weather="overcast"] .team-forecast-bar-fill { background: #4a7080; } .team-forecast-bar[data-wr-weather="stormy"] .team-forecast-bar-fill { background: #3a5878; } .team-forecast-bar[data-wr-weather="clearing"] .team-forecast-bar-fill { background: #906010; } .team-forecast-bar[data-wr-weather="pressure"] .team-forecast-bar-fill { background: #7a2030; } .team-forecast-bar-icon { position: relative; z-index: 1; width: 20px; height: 20px; margin-top: -7px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.3)); } [data-wr-mode="night"] .team-forecast-bar[data-wr-weather="clear"] .team-forecast-bar-fill { background: #5a4000; } [data-wr-mode="night"] .team-forecast-bar[data-wr-weather="partly-cloudy"] .team-forecast-bar-fill { background: #403000; } [data-wr-mode="night"] .team-forecast-bar[data-wr-weather="overcast"] .team-forecast-bar-fill { background: #283448; } [data-wr-mode="night"] .team-forecast-bar[data-wr-weather="stormy"] .team-forecast-bar-fill { background: #0e2038; } [data-wr-mode="night"] .team-forecast-bar[data-wr-weather="clearing"] .team-forecast-bar-fill { background: #503000; } [data-wr-mode="night"] .team-forecast-bar[data-wr-weather="pressure"] .team-forecast-bar-fill { background: #480c28; } /* ═══════════════════════════════════════════════════════════════════════════ DAY-MODE PANEL OVERRIDES — weather-simple and weather-bold The base panel tokens (rgba dark scrim + light text) are designed for the night sky. In day mode the item panel must be light. ═══════════════════════════════════════════════════════════════════════════ */ [data-wr-theme="weather-simple"][data-wr-mode="day"], [data-wr-theme="weather-bold"][data-wr-mode="day"] { --panel-bg: rgba(248,247,244,.94); --panel-text: #1e1d1a; --panel-line: rgba(0,0,0,.08); }