/* Native homepage component; adapt placement to the existing hero grid. */ #stormrecord-weather-explorer { --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --tornado-art: url('../images/weather-explorer/tornado-reference.webp'); --winter-art: url('../images/weather-explorer/winter-reference.webp'); position: relative; inset: auto; min-width: 0; grid-column: 2; grid-row: 2; font-family: var(--sans); box-sizing: border-box; } #stormrecord-weather-explorer * { box-sizing: border-box; } #stormrecord-weather-explorer [hidden] { display: none !important; } #stormrecord-weather-explorer .example-select { color-scheme: dark; } #stormrecord-weather-explorer {pointer-events:auto;z-index:4;aspect-ratio:auto;height:434px;max-width:none;} #stormrecord-weather-explorer .weather-exhibit {position:relative;inset:auto;height:100%;display:grid;grid-template-rows:50px minmax(110px,1fr) 76px 102px 29px;overflow:hidden;background:#102331;color:#f6f4ed;border:1px solid #142d3d;border-radius:5px;isolation:isolate;box-shadow:0 16px 36px -25px #0e27334d;} #stormrecord-weather-explorer .weather-exhibit button {font-family:var(--sans);cursor:pointer;} #stormrecord-weather-explorer .weather-exhibit button:focus-visible,#stormrecord-weather-explorer .weather-exhibit a:focus-visible,#stormrecord-weather-explorer .weather-exhibit select:focus-visible,#stormrecord-weather-explorer .weather-exhibit input:focus-visible {outline:2px solid #f0c57a;outline-offset:2px;} #stormrecord-weather-explorer .exhibit-top {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 16px;background:#102331;} #stormrecord-weather-explorer .example-picker {display:block;min-width:0;} #stormrecord-weather-explorer .example-picker>span {display:block;font:11px/1.4 var(--mono);letter-spacing:.1em;color:#b4c9d4;} #stormrecord-weather-explorer .example-select {display:block;appearance:auto;background:#102331;color:#f6f4ed;border:0;border-radius:0;padding:1px 4px 1px 0;font:500 15px/1.4 var(--sans);max-width:100%;cursor:pointer;} #stormrecord-weather-explorer .example-date {font:11px/1.4 var(--mono);color:#c6d5dd;white-space:nowrap;} #stormrecord-weather-explorer .weather-scene {position:relative;isolation:isolate;overflow:hidden;} #stormrecord-weather-explorer .scene-art {position:absolute;inset:0 0 0 24%;background:var(--tornado-art) center 76%/cover no-repeat;transition:transform .45s ease;z-index:-2;mask-image:linear-gradient(90deg,transparent,#000 16%);} #stormrecord-weather-explorer [data-example="boston"] .scene-art {inset:0;background-image:var(--winter-art);background-position:center 64%;mask-image:none;} #stormrecord-weather-explorer .weather-exhibit[data-detail-open="event"] .scene-art {transform:scale(1.09);} #stormrecord-weather-explorer .scene-wash {position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0b1c2fcc 0%,#10213122 52%,#10213111 100%),linear-gradient(0deg,#0b1c2f80,transparent 35%);} #stormrecord-weather-explorer .scene-heading {position:absolute;left:16px;top:14px;pointer-events:none;max-width:42%;} #stormrecord-weather-explorer .scene-category {display:block;font:500 22px/1.1 var(--sans);letter-spacing:-.02em;color:#fff;} #stormrecord-weather-explorer .scene-invitation {display:block;max-width:180px;font:12px/1.4 var(--sans);color:#e0e9ed;margin-top:5px;} #stormrecord-weather-explorer .scene-hotspot {position:absolute;left:56%;top:39%;transform:translate(-25%,-20%);display:flex;align-items:center;gap:7px;border:0;background:transparent;color:#fff;padding:5px;min-height:44px;text-align:left;} #stormrecord-weather-explorer .hotspot-cross {display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:50%;border:1px solid #f1f4ede6;background:#112536b3;box-shadow:0 0 0 5px #ffffff1c;font:400 24px/1 var(--sans);} #stormrecord-weather-explorer .hotspot-label {max-width:112px;border-radius:3px;background:#102331dc;padding:6px 8px;font:500 12px/1.3 var(--sans);} #stormrecord-weather-explorer .scene-hotspot:hover .hotspot-cross {background:#f3eee0;color:#102331;} #stormrecord-weather-explorer .scene-caption {position:absolute;bottom:7px;left:16px;font:11px/1.35 var(--sans);color:#e0e8ec;} #stormrecord-weather-explorer .photo-credit {position:absolute;bottom:3px;right:12px;padding:4px;border:0;border-radius:2px;background:#102331aa;color:#e0e8ec;font:11px/1.3 var(--sans);} #stormrecord-weather-explorer .photo-links {display:flex;gap:16px;margin:6px 0 0;font:11px/1.4 var(--sans);} #stormrecord-weather-explorer .photo-links a {color:#254f77;text-decoration:underline;} #stormrecord-weather-explorer .weather-readings {display:grid;grid-template-columns:1fr 1fr 1.7fr;padding:0 16px;background:#132c3c;border-top:1px solid #c6d5dd22;} #stormrecord-weather-explorer .weather-reading {display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:6px 9px 6px 0;gap:2px;min-width:0;border:0;background:transparent;color:#e8f0f3;text-align:left;} #stormrecord-weather-explorer .weather-reading+.weather-reading {padding-left:14px;border-left:1px solid #d4e4ed22;} #stormrecord-weather-explorer .weather-reading>span {font:11px/1.3 var(--sans);color:#bcd0db;} #stormrecord-weather-explorer .weather-reading>span:first-child {color:#d6e5ed;} #stormrecord-weather-explorer .weather-reading strong {font:500 23px/1.15 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;} #stormrecord-weather-explorer .weather-reading small {font:12px/1.2 var(--sans);letter-spacing:0;} #stormrecord-weather-explorer .weather-reading .warning-value {font:500 14px/1.2 var(--sans);letter-spacing:0;} #stormrecord-weather-explorer .weather-reading:hover {background:#d6e5ed09;} #stormrecord-weather-explorer [data-alert="warning"] .warning-value {color:#ffdaad;} #stormrecord-weather-explorer .weather-timeline {padding:6px 16px 0;} #stormrecord-weather-explorer .timeline-heading {display:flex;justify-content:space-between;align-items:center;gap:8px;height:21px;} #stormrecord-weather-explorer .timeline-heading label {font:12px/1.4 var(--sans);color:#dae4e9;} #stormrecord-weather-explorer .selected-time {font:500 15px/1.3 var(--sans);color:#fff;font-variant-numeric:tabular-nums;} #stormrecord-weather-explorer .selected-time span {font:11px/1.3 var(--mono);color:#b7cbd7;} #stormrecord-weather-explorer #weather-minute {display:block;appearance:none;-webkit-appearance:none;cursor:ew-resize;touch-action:pan-y;height:20px;width:100%;margin:0;background:transparent;accent-color:#e9bc7d;border:0;padding:0;} #stormrecord-weather-explorer #weather-minute::-webkit-slider-runnable-track {height:3px;background:linear-gradient(to right,#e9bc7d 0 var(--progress,79%),#4a6170 var(--progress,79%) 100%);border-radius:1px;} #stormrecord-weather-explorer #weather-minute::-webkit-slider-thumb {-webkit-appearance:none;appearance:none;width:13px;height:13px;margin-top:-5px;background:#f3d8b1;border-radius:50%;box-shadow:0 0 0 4px #edc58b14;} #stormrecord-weather-explorer #weather-minute::-moz-range-track {height:3px;background:#4a6170;border:0;} #stormrecord-weather-explorer #weather-minute::-moz-range-progress {height:3px;background:#e9bc7d;} #stormrecord-weather-explorer #weather-minute::-moz-range-thumb {width:13px;height:13px;background:#f3d8b1;border:0;border-radius:50%;} #stormrecord-weather-explorer .timeline-ticks {display:flex;justify-content:space-between;font:11px/1.2 var(--sans);color:#b0c4d0;height:16px;} #stormrecord-weather-explorer .event-jumps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;border-top:1px solid #b6cddb22;margin-top:2px;} #stormrecord-weather-explorer .event-jump {display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap;align-content:center;border:0;border-bottom:2px solid transparent;background:transparent;color:#d6e4ec;padding:5px 0 4px;font:11px/1.2 var(--sans);min-width:0;min-height:32px;} #stormrecord-weather-explorer .event-time {color:#b4c9d6;font-variant-numeric:tabular-nums;} #stormrecord-weather-explorer .event-jump[aria-pressed="true"] {border-bottom-color:#e7c192;color:#ffe2b9;} #stormrecord-weather-explorer .event-jump:hover {background:#ffffff09;} #stormrecord-weather-explorer .exhibit-footer {display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 16px;font:11px/1.3 var(--sans);border-top:1px solid #b6cddb22;color:#b8ccd7;} #stormrecord-weather-explorer .exhibit-footer a {color:#f4ddbb;text-decoration:none;} #stormrecord-weather-explorer .source-sheet {position:absolute;left:12px;right:12px;top:57px;bottom:31px;z-index:6;background:#fbfaf6;color:#102331;border-radius:4px;padding:13px 16px;box-shadow:0 5px 25px #00111d66;} #stormrecord-weather-explorer .source-sheet-top {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;} #stormrecord-weather-explorer .source-kicker {font:11px/1.3 var(--mono);letter-spacing:.1em;color:#456273;} #stormrecord-weather-explorer .source-close {display:flex;align-items:center;gap:8px;color:#102331;background:transparent;border:0;padding:2px 4px;font:12px/1.2 var(--sans);min-height:28px;} #stormrecord-weather-explorer .source-close span {font-size:21px;} #stormrecord-weather-explorer .source-heading {font:500 19px/1.2 var(--sans);letter-spacing:-.02em;margin:0 0 8px;} #stormrecord-weather-explorer .source-description {font:13px/1.45 var(--sans);margin:0 0 9px;color:#183747;} #stormrecord-weather-explorer .source-attribution {font:11px/1.4 var(--sans);margin:0 0 6px;color:#456273;} #stormrecord-weather-explorer .source-scope {font:11px/1.4 var(--sans);margin:0;color:#456273;} #stormrecord-weather-explorer .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} @media(min-width:960px) { /* Fixed map height prevents the wide MacBook layout from stretching the scene. */ #stormrecord-weather-explorer {height:434px;margin-right:16px;width:calc(100% - 16px);} } @media(min-width:960px) and (max-width:1130px) { #stormrecord-weather-explorer .weather-readings {grid-template-columns:1fr 1fr 1.5fr;padding:0 12px;} #stormrecord-weather-explorer .weather-reading+.weather-reading {padding-left:9px;} #stormrecord-weather-explorer .weather-reading .warning-value {font-size:12px;} #stormrecord-weather-explorer .exhibit-footer>span {max-width:126px;} #stormrecord-weather-explorer .source-description {font-size:12px;} } @media(max-width:959px) { #stormrecord-weather-explorer {position:relative;inset:auto;display:block;width:100%;height:422px;max-width:720px;margin:12px auto 20px;order:4;} } @media(max-width:560px) { #stormrecord-weather-explorer {height:464px;} #stormrecord-weather-explorer .weather-exhibit {grid-template-rows:60px minmax(140px,1fr) 86px 118px 41px;} #stormrecord-weather-explorer .exhibit-top {padding:7px 10px;gap:5px;} #stormrecord-weather-explorer .example-select {font-size:14px;} #stormrecord-weather-explorer .example-date {max-width:72px;white-space:normal;text-align:right;} #stormrecord-weather-explorer .scene-heading {left:12px;top:12px;max-width:48%;} #stormrecord-weather-explorer .scene-category {font-size:19px;} #stormrecord-weather-explorer .scene-invitation {font-size:11px;max-width:130px;} #stormrecord-weather-explorer .scene-hotspot {left:58%;top:46%;transform:translate(-20%,0);gap:5px;padding:3px;} #stormrecord-weather-explorer .hotspot-label {max-width:86px;font-size:11px;padding:5px;} #stormrecord-weather-explorer .hotspot-cross {width:28px;height:28px;} #stormrecord-weather-explorer .scene-caption {left:12px;font-size:11px;} #stormrecord-weather-explorer .weather-readings {padding:0 10px;grid-template-columns:1fr 1fr 1.35fr;} #stormrecord-weather-explorer .weather-reading {padding-right:5px;} #stormrecord-weather-explorer .weather-reading+.weather-reading {padding-left:7px;} #stormrecord-weather-explorer .weather-reading strong {font-size:21px;} #stormrecord-weather-explorer .weather-reading .warning-value {font-size:12px;} #stormrecord-weather-explorer .weather-timeline {padding:8px 10px 0;} #stormrecord-weather-explorer .timeline-heading label {font-size:11px;} #stormrecord-weather-explorer .selected-time {font-size:14px;} #stormrecord-weather-explorer .event-jump {flex-direction:column;gap:3px;min-height:44px;} #stormrecord-weather-explorer .exhibit-footer {padding:5px 10px;gap:8px;} #stormrecord-weather-explorer .exhibit-footer>span {max-width:115px;} #stormrecord-weather-explorer .exhibit-footer a {max-width:170px;text-align:right;} #stormrecord-weather-explorer .source-sheet {top:66px;bottom:43px;left:6px;right:6px;padding:9px 11px;} #stormrecord-weather-explorer .source-sheet-top {margin-bottom:5px;} #stormrecord-weather-explorer .source-heading {font-size:17px;margin-bottom:6px;} #stormrecord-weather-explorer .source-description {font-size:12px;line-height:1.4;margin-bottom:6px;} #stormrecord-weather-explorer .source-close {min-height:32px;} } @media(prefers-reduced-motion:reduce) {#stormrecord-weather-explorer .scene-art {transition:none;}} /* Requested refinement: space below the headline and clear interactive controls. */ @media(min-width:960px) { #stormrecord-weather-explorer { margin-top:calc(-1.35 * var(--hero-heading-size, clamp(52px, 4.4vw, 68px)) + 4px); margin-left:16px; margin-right:40px; width:calc(100% - 56px); } } #stormrecord-weather-explorer .weather-exhibit {grid-template-rows:70px minmax(110px,1fr) 72px 112px 29px;} #stormrecord-weather-explorer .exhibit-top {padding:7px 16px;} #stormrecord-weather-explorer .example-picker {width:280px;max-width:calc(100% - 120px);} #stormrecord-weather-explorer .example-picker>.picker-label {display:flex;align-items:center;gap:7px;color:#f6dfbb;font:500 12px/1.3 var(--sans);letter-spacing:0;margin-bottom:4px;} #stormrecord-weather-explorer .control-step {display:inline-flex;justify-content:center;align-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:#ead0a7;color:#193446;font:500 11px/1 var(--sans);} #stormrecord-weather-explorer .example-select {width:100%;max-width:100%;min-height:32px;padding:4px 10px;border:1px solid #829ba9;border-radius:5px;background:#234356;color:#fff;font:500 14px/1.45 var(--sans);box-shadow:0 1px 2px #05192333;} #stormrecord-weather-explorer .example-select:hover {background-color:#2b4e63;border-color:#e2ccaa;} #stormrecord-weather-explorer .example-select:focus-visible {outline-offset:2px;} #stormrecord-weather-explorer .weather-timeline {background:#19394b;padding:8px 16px 0;} #stormrecord-weather-explorer .timeline-heading {height:24px;} #stormrecord-weather-explorer .timeline-heading label {display:flex;align-items:center;gap:7px;color:#f6dfbb;font:500 13px/1.35 var(--sans);cursor:ew-resize;} #stormrecord-weather-explorer #weather-minute {height:26px;} #stormrecord-weather-explorer #weather-minute::-webkit-slider-runnable-track {height:4px;} #stormrecord-weather-explorer #weather-minute::-webkit-slider-thumb {width:30px;height:22px;margin-top:-9px;border-radius:5px;background-color:#f3d8b1;background-image:linear-gradient(90deg,transparent 37%,#75644d 37% 43%,transparent 43% 57%,#75644d 57% 63%,transparent 63%);background-size:100% 9px;background-repeat:no-repeat;background-position:center;box-shadow:0 0 0 3px #e9c28c20,0 2px 4px #07192533;} #stormrecord-weather-explorer #weather-minute::-moz-range-track {height:4px;} #stormrecord-weather-explorer #weather-minute::-moz-range-progress {height:4px;} #stormrecord-weather-explorer #weather-minute::-moz-range-thumb {width:30px;height:22px;border-radius:5px;background-color:#f3d8b1;background-image:linear-gradient(90deg,transparent 37%,#75644d 37% 43%,transparent 43% 57%,#75644d 57% 63%,transparent 63%);background-size:100% 9px;background-repeat:no-repeat;background-position:center;box-shadow:0 0 0 3px #e9c28c20;} #stormrecord-weather-explorer .source-sheet {top:77px;} @media(max-width:959px) { #stormrecord-weather-explorer {height:442px;} } @media(max-width:560px) { #stormrecord-weather-explorer {height:500px;} #stormrecord-weather-explorer .weather-exhibit {grid-template-rows:86px minmax(140px,1fr) 86px 126px 41px;} #stormrecord-weather-explorer .exhibit-top {display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:20px 40px;column-gap:8px;row-gap:6px;padding:9px 10px;} #stormrecord-weather-explorer .example-picker {display:contents;} #stormrecord-weather-explorer .example-picker>.picker-label {grid-column:1;grid-row:1;margin:0;font-size:11px;} #stormrecord-weather-explorer .example-date {grid-column:2;grid-row:1;max-width:none;white-space:nowrap;font-size:11px;} #stormrecord-weather-explorer .example-select {grid-column:1/-1;grid-row:2;min-height:40px;font-size:16px;padding:6px 10px;} #stormrecord-weather-explorer .weather-timeline {padding:8px 10px 0;} #stormrecord-weather-explorer .timeline-heading label {font-size:11px;gap:5px;} #stormrecord-weather-explorer .source-sheet {top:92px;} } @media(pointer:coarse) { #stormrecord-weather-explorer .example-select {min-height:44px;} #stormrecord-weather-explorer #weather-minute {height:30px;} } /* Keep the surrounding homepage order and provide an honest static fallback. */ #stormrecord-weather-explorer .example-select { /* Retain the native select popup while sizing the control consistently in WebKit. */ appearance:none; -webkit-appearance:none; padding-right:32px; background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%); background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%; background-size:5px 5px; background-repeat:no-repeat; } #stormrecord-weather-explorer:not([data-ready]) { height:auto; } #stormrecord-weather-explorer:not([data-ready]) .weather-exhibit { grid-template-rows:70px 150px 86px 126px auto auto; } #stormrecord-weather-explorer button:disabled, #stormrecord-weather-explorer input:disabled, #stormrecord-weather-explorer select:disabled { cursor:default; } #stormrecord-weather-explorer .explorer-fallback { margin:0; padding:12px 16px; color:#d6e5ed; font:12px/1.5 var(--sans); } #stormrecord-weather-explorer .explorer-fallback a { color:#f4ddbb; text-decoration:underline; } @media(max-width:560px) { #stormrecord-weather-explorer:not([data-ready]) .weather-exhibit { grid-template-rows:86px 150px 86px 126px auto auto; } #stormrecord-weather-explorer .scene-caption { max-width:calc(100% - 100px); } #stormrecord-weather-explorer .photo-credit { min-height:28px; } } @media(max-width:359px) { /* Preserve complete timestamps when labels and units wrap on narrow phones. */ #stormrecord-weather-explorer { height:530px; } #stormrecord-weather-explorer .weather-exhibit { grid-template-rows:86px minmax(140px,1fr) 116px 126px 41px; } #stormrecord-weather-explorer:not([data-ready]) .weather-exhibit { grid-template-rows:86px 150px 116px 126px auto auto; } }