/* ========================================================================== AIOWeather / Discovery Weather Web V1 Design system ported from the approved AIOWeather brand tokens. Fonts: Hanken Grotesk + IBM Plex Mono. Do not redesign the brand. Fonts are loaded via in (see build.mjs), not @import here, so the font request runs in parallel with this stylesheet instead of chaining behind it (better FCP/LCP). ========================================================================== */ :root{ --ink:#0F2438; --ink-soft:#3E5366; --muted:#6B7E90; --line:#E5EBF1; --bg:#F5F8FB; --card:#FFFFFF; --sky:#0EA5E9; --sky-deep:#0369A1; --sky-wash:#EAF5FC; --amber:#F59E0B; --amber-wash:#FEF4E2; --storm:#DC2626; --storm-wash:#FDECEC; --good:#0E9F6E; --good-wash:#E7F6EF; --night:#091523; --night-2:#0E2233; --night-3:#0B1F33; --panel-line:rgba(255,255,255,.10); --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; --shadow:0 1px 2px rgba(13,32,50,.05),0 10px 30px rgba(13,32,50,.06); --shadow-lg:0 24px 60px rgba(13,32,50,.13); --radius:14px; --radius-lg:18px; --maxw:1140px; /* condition tones */ --calm:#0E9F6E; --calm-wash:#E7F6EF; --watch:#0EA5E9; --watch-wash:#EAF5FC; --advisory:#F59E0B; --advisory-wash:#FEF4E2; --warning:#DC2626; --warning-wash:#FDECEC; } *{box-sizing:border-box} /* icon containers are spans; blockify so their fixed width/height apply */ .cond-ico,.fc-ico,.watch-ico,.ec-ico,.efc-ico,.pt-ico,.decision-badge .db-dot{display:inline-block} .cond-ico>svg,.fc-ico>svg,.watch-ico>svg,.ec-ico>svg,.efc-ico>svg,.pt-ico>svg{display:block;width:100%;height:100%} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans); font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink);line-height:1.14;letter-spacing:-.022em;font-weight:800} h1{font-size:clamp(1.9rem,4.2vw,2.9rem)} h2{font-size:clamp(1.5rem,3vw,2.1rem)} h3{font-size:1.22rem} p{margin:0 0 1rem} a{color:var(--sky-deep)} img,svg{max-width:100%} .container{max-width:var(--maxw);margin:0 auto;padding:0 22px} .section{padding:64px 0} .lead{font-size:1.15rem;color:var(--ink-soft)} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.72rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--sky-deep);margin-bottom:12px} .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber)} .mono{font-family:var(--mono)} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0} .skip-link{position:absolute;left:8px;top:-48px;z-index:200;background:var(--night);color:#fff;padding:10px 16px; border-radius:10px;transition:top .15s;text-decoration:none} .skip-link:focus{top:8px} :focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:6px} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700; border-radius:12px;padding:12px 20px;cursor:pointer;border:1.5px solid transparent;text-decoration:none; transition:transform .12s,box-shadow .12s,background .12s,border-color .12s} .btn:active{transform:translateY(1px)} .btn--primary{background:linear-gradient(180deg,#16ade6,#0b8fcc);color:#fff;box-shadow:0 8px 20px rgba(14,165,233,.30)} .btn--primary:hover{background:linear-gradient(180deg,#1ab0e8,#0a82bd)} .btn--amber{background:linear-gradient(180deg,#f9ad22,#ef9606);color:#3a2606;box-shadow:0 8px 20px rgba(245,158,11,.32)} .btn--amber:hover{background:linear-gradient(180deg,#fbb52f,#e58e05)} .btn--ghost-light{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)} .btn--ghost-light:hover{border-color:var(--sky)} .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)} .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)} .btn--full{width:100%} .btn--sm{padding:8px 14px;font-size:.9rem;border-radius:10px} /* ---- header / nav ---- */ .site-header{position:sticky;top:0;z-index:100;background:rgba(245,248,251,.86);backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)} .header-inner{max-width:var(--maxw);margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:18px} .site-logo{display:inline-flex;align-items:center;gap:9px} .site-logo img{height:34px;width:auto} .beta-chip{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.12em;color:var(--sky-deep); background:var(--sky-wash);border:1px solid #cfe8f8;border-radius:6px;padding:2px 6px;text-transform:uppercase} .primary-nav{display:flex;gap:4px;margin-left:6px} .nav-link{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:10px;color:var(--ink-soft); text-decoration:none;font-weight:600;font-size:.95rem} .nav-link svg{width:17px;height:17px;color:var(--sky)} .nav-link:hover,.nav-link[aria-current="page"]{background:#fff;color:var(--ink);box-shadow:var(--shadow)} .header-cta{margin-left:auto;display:flex;align-items:center;gap:10px} .menu-toggle{display:none;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--line);border-radius:10px; width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer} .menu-toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px} .mobile-nav{display:none;flex-direction:column;gap:6px;padding:14px 22px 20px;background:#fff;border-bottom:1px solid var(--line)} .mobile-nav.open{display:flex} .mobile-nav a{padding:11px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600} .mobile-nav a:hover{background:var(--sky-wash)} .mobile-cta{margin-top:8px} /* ---- utility / conditions bar ---- */ .utility-bar{background:var(--night-3);color:#CFE3F2;font-family:var(--mono);font-size:.76rem;letter-spacing:.01em} .utility-inner{max-width:var(--maxw);margin:0 auto;padding:9px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px} .utility-inner .u-sep{color:#3a5670} .utility-inner .u-cond{margin-left:auto;display:inline-flex;align-items:center;gap:7px;color:#EAF2F8;font-weight:600} .u-dot{width:9px;height:9px;border-radius:50%;background:var(--calm);flex:none} .u-dot--watch{background:var(--watch)} .u-dot--advisory{background:var(--advisory)} .u-dot--warning{background:var(--warning)} .u-region-btn{font:inherit;color:#CFE3F2;background:transparent;border:1px solid rgba(255,255,255,.16); border-radius:7px;padding:2px 9px;cursor:pointer} .u-region-btn[aria-pressed="true"]{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)} .utility-bar.is-stale{background:#4a3205} .utility-bar.is-stale .u-dot{background:var(--amber)} /* ---- hero (today) ---- */ .hero{background:radial-gradient(120% 120% at 80% -10%,#10314e 0%,#0B1F33 45%,#091523 100%);color:#fff; padding:52px 0 60px;position:relative;overflow:hidden} .hero .eyebrow{color:#86D6F6} .hero .eyebrow::before{background:#FBBF24} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center} .hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.1rem)} .hero .sub{font-size:1.12rem;color:#CFE3F2;max-width:52ch;margin:.4rem 0 1.4rem} .cond-head{display:flex;align-items:center;gap:18px;margin-bottom:14px} .cond-ico{width:78px;height:78px;flex:none;color:#86D6F6} .cond-ico svg{width:100%;height:100%} .cond-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.74rem;font-weight:600; padding:5px 11px;border-radius:999px;border:1px solid var(--panel-line);background:rgba(255,255,255,.05);color:#CFE3F2} .pill b{color:#fff} .pill--impact-High{color:#FCA5A5;border-color:rgba(220,38,38,.4);background:rgba(220,38,38,.14)} .pill--impact-Moderate{color:#FBBF24;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.12)} .pill--impact-Low{color:#6EE7B7;border-color:rgba(14,159,110,.4);background:rgba(14,159,110,.12)} /* decision card (hero right) */ .decision-card{background:rgba(255,255,255,.04);border:1px solid var(--panel-line);border-radius:var(--radius-lg); padding:26px;backdrop-filter:blur(4px)} .decision-card .dc-q{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8FB6D2;margin:0 0 10px} .decision-badge{display:inline-flex;align-items:center;gap:10px;font-size:1.5rem;font-weight:800;color:#fff;margin-bottom:12px} .decision-badge .db-dot{width:14px;height:14px;border-radius:50%;flex:none} .decision-card .dc-title{color:#fff;font-size:1.05rem;font-weight:800;margin:0 0 8px} .decision-card p{color:#CFE3F2;font-size:.98rem;margin:0} .decision--noaction .db-dot{background:var(--calm)} .decision--noaction .decision-badge{color:#6EE7B7} .decision--watch .db-dot{background:var(--watch)} .decision--watch .decision-badge{color:#86D6F6} .decision--prepare .db-dot{background:var(--advisory)} .decision--prepare .decision-badge{color:#FBBF24} .decision--act .db-dot{background:var(--warning)} .decision--act .decision-badge{color:#FCA5A5} .decision--review .db-dot{background:var(--watch)} .decision--review .decision-badge{color:#86D6F6} /* connected summary */ .summary-band{background:var(--card);border-bottom:1px solid var(--line)} .summary-band .container{padding-top:34px;padding-bottom:34px} .summary-band p{font-size:1.16rem;color:var(--ink);max-width:74ch;margin:0} /* ---- generic cards / panels ---- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow)} .section-head{margin-bottom:26px} .section-head p{font-size:1.08rem;color:var(--ink-soft);margin-top:0;max-width:70ch} .panel-title{display:flex;align-items:center;gap:10px;font-size:1.28rem;font-weight:800;margin:0 0 4px} .panel-title .pt-ico{width:26px;height:26px;color:var(--sky)} /* ---- five-day forecast strip ---- */ .forecast-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .fc-day{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px;text-align:left; cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s;font:inherit;color:inherit;width:100%} .fc-day:hover,.fc-day[aria-expanded="true"]{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#d4e3ee} .fc-day .fc-dow{font-weight:800;font-size:.98rem;display:inline} .fc-day .fc-date{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);margin-bottom:12px;display:inline-block;margin-left:6px} .fc-day .fc-label,.fc-day .fc-prob{display:block} .fc-day .fc-ico{width:42px;height:42px;margin:2px 0 10px} .fc-day .fc-ico svg{width:100%;height:100%} .fc-label{font-weight:700;font-size:.92rem;margin-bottom:8px;min-height:2.4em} .fc-prob{font-family:var(--mono);font-size:.8rem;color:var(--sky-deep);font-weight:600} .fc-impact{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;margin-top:6px} .impact-dot{width:8px;height:8px;border-radius:50%;flex:none} .impact-Low .impact-dot{background:var(--calm)} .impact-Low{color:#0b7a54} .impact-Moderate .impact-dot{background:var(--advisory)} .impact-Moderate{color:#8a5600} .impact-High .impact-dot{background:var(--warning)} .impact-High{color:#c01d1d} /* signal / confidence label (canonical Rule 5) */ .signal{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.04em; text-transform:uppercase;padding:3px 8px;border-radius:6px;border:1px solid transparent} .signal--confirmed{background:var(--good-wash);color:#0b7a54;border-color:#bfe6d4} .signal--observed{background:var(--sky-wash);color:var(--sky-deep);border-color:#cfe8f8} .signal--reasonable{background:var(--amber-wash);color:#8a5600;border-color:#F4D89C} .signal--early{background:#eef0f4;color:#4a5568;border-color:#d7dde5} .signal--speculation{background:var(--storm-wash);color:#b01818;border-color:#f3c6c6} .fd-meta .signal{margin-top:0;align-self:center} .signal-legend{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;font-size:.82rem;color:var(--ink-soft)} .signal-legend .signal{margin-top:0} /* tone accents on forecast tiles */ .tone-calm{border-top:3px solid var(--calm)} .tone-watch{border-top:3px solid var(--watch)} .tone-advisory{border-top:3px solid var(--advisory)} .tone-warning{border-top:3px solid var(--warning)} /* day detail panel */ .fc-detail{grid-column:1/-1;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px; box-shadow:var(--shadow);margin-top:2px} .fc-detail h4{font-size:1.2rem;margin:0 0 4px} .fc-detail .fd-meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px} /* pills sit on a light panel here, so override the dark-hero pill colors */ .fd-meta .pill{background:var(--sky-wash);border-color:#d6ebf8;color:var(--sky-deep)} .fd-meta .pill b{color:var(--ink)} .fd-meta .pill--impact-High{background:var(--storm-wash);border-color:#f3c6c6;color:var(--storm)} .fd-meta .pill--impact-Moderate{background:var(--amber-wash);border-color:#F4D89C;color:#95610a} .fd-meta .pill--impact-Low{background:var(--good-wash);border-color:#bfe6d4;color:#0b7a54} .fc-detail dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0} .fc-detail dt{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding-top:2px} .fc-detail dd{margin:0;color:var(--ink-soft)} .evidence-list{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:7px} .evidence-list li{display:flex;gap:9px;align-items:flex-start;font-size:.94rem;color:var(--ink-soft)} .ev-class{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:6px;flex:none;margin-top:2px} .ev-confirmed{background:var(--good-wash);color:#0b7a54} .ev-scheduled{background:var(--sky-wash);color:var(--sky-deep)} .ev-observed{background:var(--amber-wash);color:#95610a} .ev-modeled{background:#eef0f4;color:#556} /* ---- watches & warnings ---- */ .watch-list{display:flex;flex-direction:column;gap:12px} .watch-item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line); border-left:4px solid var(--watch);border-radius:var(--radius);padding:16px 18px} .watch-item.tone-warning{border-left-color:var(--warning)} .watch-item.tone-advisory{border-left-color:var(--advisory)} .watch-item.tone-calm{border-left-color:var(--calm)} .watch-ico{width:38px;height:38px;color:var(--sky)} .watch-body .wb-top{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline} .watch-body .wb-platform{font-weight:800} .watch-body .wb-cond{color:var(--ink-soft)} .watch-body .wb-facts{font-family:var(--mono);font-size:.76rem;color:var(--muted);margin-top:4px;display:flex;flex-wrap:wrap;gap:12px} .watch-decision{font-weight:800;font-size:.9rem;white-space:nowrap;text-align:right} .empty-state{background:var(--good-wash);border:1px solid #bfe6d4;border-radius:var(--radius);padding:22px 24px; color:#0b6a49;display:flex;gap:12px;align-items:center;font-weight:600} .empty-state svg{width:26px;height:26px;flex:none;color:var(--good)} /* ---- what changed ---- */ .changes-list{display:flex;flex-direction:column;gap:0} .change-row{display:grid;grid-template-columns:150px 1fr auto;gap:16px;padding:16px 4px;border-bottom:1px solid var(--line);align-items:baseline} .change-row:last-child{border-bottom:0} .change-cat{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--sky-deep);font-weight:600} .change-move{font-weight:600} .change-move .cm-prev{color:#566575;text-decoration:line-through;margin-right:6px} .change-move .cm-arrow{color:var(--sky);margin:0 6px} .change-why{color:var(--ink-soft);font-size:.94rem;margin-top:3px} .change-src{font-family:var(--mono);font-size:.72rem;color:#566575;text-align:right;white-space:nowrap} .change-delta{font-family:var(--mono);font-size:.78rem;font-weight:600;background:var(--sky-wash);color:var(--sky-deep);padding:3px 9px;border-radius:999px} /* ---- climate board ---- */ .climate-block{margin-bottom:44px} .climate-block .cb-def{color:var(--ink-soft);max-width:72ch} .share-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:.95rem} .share-table th,.share-table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)} .share-table th{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600} .share-table td.num{font-family:var(--mono);text-align:right} .trend{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.82rem} .trend--warming{color:var(--storm)} .trend--cooling{color:var(--sky-deep)} .trend--stable{color:var(--muted)} .trend svg{width:15px;height:15px} .delta-pos{color:var(--storm)} .delta-neg{color:var(--sky-deep)} .delta-flat{color:var(--muted)} .ai-note{background:var(--sky-wash);border:1px solid #cfe8f8;border-radius:var(--radius);padding:16px 18px;color:var(--sky-deep); font-size:.96rem;margin:14px 0} .platform-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:16px} .platform-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px} .platform-card .pc-top{display:flex;align-items:center;gap:9px;font-weight:800} .status-dot{width:10px;height:10px;border-radius:50%;background:var(--good);flex:none} .status-dot--degraded{background:var(--advisory)} .status-dot--incident{background:var(--warning)} .platform-card p{font-size:.9rem;color:var(--ink-soft);margin:8px 0 0} .local-hidden{background:#eef2f6;border:1px dashed #c7d3de;border-radius:var(--radius);padding:20px 22px;color:var(--muted)} /* ---- charts ---- */ .chart-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 10px;overflow-x:auto} .chart-title{font-weight:700;font-size:.95rem;margin-bottom:2px} .chart-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .line-chart .axis{stroke:var(--line);stroke-width:1} .line-chart .grid{stroke:#eef2f6;stroke-width:1} .line-chart .series{fill:none;stroke:var(--sky);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round} .line-chart .dot{fill:var(--sky-deep)} .line-chart .lbl{font-family:var(--mono);font-size:9px;fill:var(--muted)} .bar-chart .bar{fill:var(--sky)} .bar-chart .bar-lbl{font-family:var(--sans);font-size:12px;fill:var(--ink);font-weight:600} .bar-chart .bar-val{font-family:var(--mono);font-size:11px;fill:var(--ink-soft)} .bar-chart .track{fill:#eef2f6} /* ---- marketer impact ---- */ .impact-panel{background:radial-gradient(120% 120% at 85% -20%,#10314e,#0B1F33 55%,#091523);color:#fff; border-radius:var(--radius-lg);padding:34px} .impact-panel .eyebrow{color:#86D6F6} .impact-panel h2{color:#fff} .impact-panel .ip-interp{color:#CFE3F2;font-size:1.1rem;max-width:74ch} .impact-panel .ip-decision{display:inline-flex;align-items:center;gap:12px;margin-top:14px;background:rgba(255,255,255,.06); border:1px solid var(--panel-line);border-radius:12px;padding:14px 20px} .impact-panel .ip-decision .ipd-k{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#8FB6D2} .impact-panel .ip-decision .ipd-v{font-size:1.15rem;font-weight:800;color:#FBBF24} /* ---- accuracy ---- */ .acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px} .acc-stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px} .acc-stat .n{font-family:var(--mono);font-size:1.9rem;font-weight:600;color:var(--ink)} .acc-stat .n.pending{color:var(--muted);font-size:1.1rem} .acc-stat .k{font-size:.82rem;color:var(--muted);margin-top:2px} .grade{font-family:var(--mono);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:6px;white-space:nowrap} .grade--correct{background:var(--good-wash);color:#0b7a54} .grade--directional{background:var(--sky-wash);color:var(--sky-deep)} .grade--too-early{background:var(--amber-wash);color:#95610a} .grade--overstated{background:var(--amber-wash);color:#95610a} .grade--missed{background:var(--storm-wash);color:var(--storm)} .grade--pending{background:#eef0f4;color:#556} .grade--inconclusive{background:#eef0f4;color:#556} .record-table{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:8px} .record-table th,.record-table td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top} .record-table th{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)} .filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .filter-bar button{font:inherit;font-size:.85rem;font-weight:600;padding:7px 13px;border-radius:999px;border:1px solid var(--line); background:#fff;color:var(--ink-soft);cursor:pointer} .filter-bar button[aria-pressed="true"]{background:var(--night);color:#fff;border-color:var(--night)} /* ---- sources / methodology ---- */ .def-list{display:flex;flex-direction:column;gap:2px} .def-item{padding:18px 0;border-bottom:1px solid var(--line)} .def-item h3{margin:0 0 6px;font-size:1.08rem} .def-item p{margin:0;color:var(--ink-soft)} .source-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:14px} .source-card .sc-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px} .source-card h3{margin:0;font-size:1.1rem} .badge{font-family:var(--mono);font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:6px} .badge--official{background:var(--good-wash);color:#0b7a54} .badge--third{background:var(--sky-wash);color:var(--sky-deep)} .badge--fresh{background:var(--good-wash);color:#0b7a54} .badge--inactive{background:#eef0f4;color:#556} .source-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0} .source-card dt{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)} .source-card dd{margin:0;color:var(--ink-soft);font-size:.94rem} /* ---- forms / subscribe ---- */ .form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow);max-width:560px} .field{margin-bottom:16px} .field label{display:block;font-weight:600;margin-bottom:6px;font-size:.95rem} .field input[type=email],.field select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font:inherit;color:var(--ink);background:#fff} .field input:focus,.field select:focus{border-color:var(--sky);outline:none;box-shadow:0 0 0 3px rgba(14,165,233,.15)} .consent{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--ink-soft)} .consent input{margin-top:3px;width:18px;height:18px;flex:none} .form-status{margin-top:14px;padding:12px 15px;border-radius:10px;font-weight:600;display:none} .form-status.show{display:block} .form-status.ok{background:var(--good-wash);color:#0b6a49;border:1px solid #bfe6d4} .form-status.err{background:var(--storm-wash);color:var(--storm);border:1px solid #f3c6c6} .beta-status{background:var(--amber-wash);border:1px solid #F4D89C;border-radius:10px;padding:12px 15px;color:#7a4d05;font-size:.9rem;font-weight:600;margin-bottom:18px} /* ---- email preview ---- */ .email-preview{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)} .email-subject{background:var(--night-3);color:#fff;padding:16px 22px;font-weight:700} .email-subject .es-from{font-family:var(--mono);font-size:.7rem;color:#8FB6D2;display:block;margin-bottom:4px;letter-spacing:.08em;text-transform:uppercase} .email-body{padding:24px 22px} .email-body h4{margin:0 0 4px} .email-body .eb-sec{padding:14px 0;border-bottom:1px solid var(--line)} .email-body .eb-sec:last-child{border-bottom:0} /* ---- states / errors ---- */ .notice{border-radius:var(--radius);padding:16px 18px;display:flex;gap:12px;align-items:flex-start;font-size:.96rem;margin:0 0 20px} .notice svg{width:22px;height:22px;flex:none;margin-top:1px} .notice--stale{background:var(--amber-wash);border:1px solid #F4D89C;color:#7a4d05} .notice--info{background:var(--sky-wash);border:1px solid #cfe8f8;color:var(--sky-deep)} .notice--error{background:var(--storm-wash);border:1px solid #f3c6c6;color:var(--storm)} .offline-banner{position:fixed;left:0;right:0;bottom:0;background:#4a3205;color:#fff;font-family:var(--mono);font-size:.8rem; padding:10px 16px;text-align:center;z-index:150;display:none} .offline-banner.show{display:block} .load-skeleton{background:linear-gradient(90deg,#eef2f6 25%,#f6f9fb 50%,#eef2f6 75%);background-size:200% 100%; border-radius:8px;animation:sk 1.3s infinite} @keyframes sk{to{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){.load-skeleton{animation:none}} /* ---- footer ---- */ .site-footer{background:var(--night);color:#CFE3F2;padding:48px 0 0;margin-top:56px} .site-footer .container{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px} .footer-brand img{height:32px;margin-bottom:14px} .footer-brand p{color:#90B4CC;font-size:.92rem;max-width:36ch} .footer-social{display:flex;gap:10px;margin:14px 0} .footer-social a{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center; background:rgba(255,255,255,.06);color:#CFE3F2} .footer-social a:hover{background:rgba(255,255,255,.12)} .footer-social svg{width:17px;height:17px} .footer-col h2{color:#fff;font-size:.95rem;font-weight:800;margin:0 0 12px} .footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px} .footer-col a{color:#90B4CC;text-decoration:none;font-size:.92rem}.footer-col a:hover{color:#fff} .footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:34px} .footer-bottom .container{display:flex;justify-content:space-between;grid-template-columns:none;padding-top:18px;padding-bottom:18px} .footer-bottom p{color:#7E96AB;font-size:.84rem;margin:0} .footer-bottom a,.footer-disclosure a{color:#86D6F6} .footer-disclosure{background:#060f19;padding:14px 0} .footer-disclosure p{color:#6B849A;font-size:.8rem;margin:0;text-align:center} /* ---- embed (minimal chrome) ---- */ .embed-body{background:transparent;padding:0} .embed-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow);max-width:520px;margin:0 auto} .embed-head{display:flex;align-items:center;gap:10px;margin-bottom:12px} .embed-head img{height:24px} .embed-head .beta-chip{margin-left:2px} .embed-cond{display:flex;align-items:center;gap:14px;margin-bottom:12px} .embed-cond .ec-ico{width:48px;height:48px;color:var(--sky)} .embed-fc{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 0} .embed-fc .efc{text-align:center;font-size:.72rem;padding:8px 4px;border:1px solid var(--line);border-radius:9px} .embed-fc .efc-ico{width:26px;height:26px;margin:0 auto 4px;color:var(--sky)} .embed-decision{background:var(--sky-wash);border:1px solid #cfe8f8;border-radius:10px;padding:12px 14px;font-size:.92rem} .embed-attrib{font-family:var(--mono);font-size:.68rem;color:var(--muted);text-align:center;margin-top:12px} /* ---- responsive ---- */ @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:24px} .site-footer .container{grid-template-columns:1fr 1fr} .primary-nav{display:none} .menu-toggle{display:flex} .change-row{grid-template-columns:1fr;gap:4px} .change-src{text-align:left} .watch-item{grid-template-columns:auto 1fr;gap:12px} .watch-decision{grid-column:2;text-align:left} } @media (max-width:640px){ .forecast-strip{grid-template-columns:repeat(2,1fr)} .embed-fc{grid-template-columns:repeat(5,1fr)} .site-footer .container{grid-template-columns:1fr} .footer-bottom .container{flex-direction:column;gap:6px} .section{padding:44px 0} .acc-grid{grid-template-columns:repeat(2,1fr)} } @media (prefers-contrast:more){ :root{--line:#b9c6d2;--ink-soft:#26384a} .btn{border-width:2px} }