/* ========================================================================== 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-headline{display:block;font-size:1.35rem;font-weight:700;color:#fff;line-height:1.2} .cond-loading{display:block;font-size:1.05rem;color:#86D6F6;font-weight:600} #hero-live{margin-top:20px} .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)} .status-dot--unknown{background:#9fb0be} .measuring-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:640px){.measuring-grid{grid-template-columns:1fr}} .measuring{background:#eef2f6;border:1px dashed #c7d3de;border-radius:var(--radius);padding:18px 20px} .measuring strong{display:block;margin:8px 0 4px;color:var(--ink)} .measuring p{margin:0;color:var(--muted);font-size:.94rem} .measuring-tag{display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase;padding:3px 8px;border-radius:6px;background:#dfe7ee;color:#556} .evidence-list a{color:var(--sky-deep);text-decoration:underline;text-underline-offset:2px} /* ---- local discovery board ---- */ .local-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px} .local-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--watch);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)} .local-card.tone-calm{border-left-color:var(--calm)} .local-card.tone-advisory{border-left-color:var(--advisory)} .local-card.tone-watch{border-left-color:var(--watch)} .local-card.tone-muted{border-left-color:#9fb0be} .lc-head{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:10px} .lc-city{font-weight:800} .lc-svc{font-size:.86rem;color:var(--muted);text-transform:capitalize} .lc-pick{font-size:1.15rem;font-weight:800;color:var(--ink);line-height:1.2;margin-bottom:10px} .lc-none{color:var(--muted);font-weight:600;font-size:1rem} .lc-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:6px} .lc-streak{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft)} .lc-runners{font-size:.84rem;color:var(--ink-soft);margin-top:4px} .lc-prev{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:4px} .lc-prev::before{content:"↳ "} /* ---- 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} } /* ========================================================================== LINE ART The Digilu house drawing style carried onto this property (see ~/brand-briefs, digilu/styles.css "LINE ART", and src/lineart.mjs for the subjects and why each one was chosen). A hairline of ink drawing a real, recognisable instrument, with the accent spent exactly ONCE per piece, on the stroke that carries the meaning. On AIOWeather the accent is amber, the same colour this site already uses for a decision, so the one amber stroke in a drawing always marks the thing the page is actually claiming. Drawn, never faded in: every stroke carries pathLength="1", so the draw-on is one dashoffset transition and nothing has to be measured in script. ========================================================================== */ .la{display:block;width:100%;height:auto;overflow:visible;fill:none} .la path,.la circle,.la ellipse,.la line,.la polyline,.la use{fill:none;stroke-linecap:round;stroke-linejoin:round; /* The ink weight IS the style, so it stays a hairline at every size rather than thickening on the band and vanishing on the 52px block marks. */ vector-effect:non-scaling-stroke} .la .la-ink{stroke:var(--ink);stroke-width:1.8} .la .la-ghost{stroke:var(--ink);stroke-width:1.8;opacity:.14} .la .la-det{stroke:var(--ink);stroke-width:1.4;opacity:.55} .la .la-acc{stroke:var(--amber);stroke-width:2.2} .la .la-dot{fill:var(--ink);stroke:none} .la .la-lbl{fill:var(--muted);stroke:none;text-anchor:middle;font-family:var(--mono);font-weight:600; font-size:15px;letter-spacing:.13em;text-transform:uppercase} /* On navy the ink inverts, rather than the page going dark around a light drawing. */ .la--dark .la-ink{stroke:rgba(255,255,255,.62)} .la--dark .la-ghost{stroke:rgba(255,255,255,.62);opacity:.12} .la--dark .la-det{stroke:rgba(255,255,255,.42);opacity:1} .la--dark .la-acc{stroke:#FBBF24} .la--dark .la-dot{fill:rgba(255,255,255,.55)} .la--dark .la-lbl{fill:#8FB6D2} /* --- the draw-on: contour, then the detail the contour makes room for, then the one accent stroke last, because it is the point being made. --- */ .la [data-draw]{stroke-dasharray:1;stroke-dashoffset:1} .la.drawn [data-draw]{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.35,.02,.28,1)} .la.drawn .la-det[data-draw]{transition:stroke-dashoffset 1.2s ease-out 1.6s} .la.drawn .la-acc[data-draw]{transition:stroke-dashoffset .9s ease-out 2.05s} .la .la-fade{opacity:0} .la.drawn .la-fade{opacity:1;transition:opacity .55s ease-out 2.1s} /* Motion is decoration here. Reduced motion gets the finished drawing. */ @media (prefers-reduced-motion:reduce){ .la [data-draw]{stroke-dasharray:none;stroke-dashoffset:0;transition:none} .la.drawn [data-draw]{transition:none} .la .la-fade{opacity:1;transition:none} } /* --- placements --- */ .section-head--art{display:grid;grid-template-columns:minmax(0,1fr) 152px;gap:32px;align-items:start} .section-head--art>div{min-width:0} .section-head--art .la{width:152px;margin-top:4px} .blockmark{width:72px;height:72px;margin:0 0 10px} .card-art{width:92px;margin:0 0 14px} .lineart-band{margin:6px 0 2px} .band-note{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0} @media (max-width:760px){ .section-head--art{grid-template-columns:1fr;gap:0} .section-head--art .la{width:104px;margin:0 0 16px} /* The mark reads as the subject of the heading, so on a phone it sits above the eyebrow rather than orphaned under the lead paragraph. */ .section-head--art .la{order:-1} .section-head--art{display:flex;flex-direction:column} } /* The band has six drawn subjects and six labels across it. Squeezed into a phone it is not a smaller drawing, it is an unreadable one, so below this width it keeps its size and scrolls in its own track. The page itself never scrolls sideways. */ @media (max-width:980px){ .lineart-band{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin; mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%); -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%)} .lineart-band .la{min-width:940px} }