/* TurboBatch Race Hero — v3 (Porsche-cluster, slim). * * Title block on the left; on the right, a single horizontal strip * with the three gauges (clock, date, weather) followed by four * compact forecast tiles — all on one line so the card stays slim. * Aesthetic targets: anthracite face, brushed bezel ring, off-white * markings, red accent, glass gloss. * * ┌──────────────────────┬──────────────────────────────────────┐ * │ EYEBROW │ ◯CLK ◯DAT ◯WX │SAT│SUN│MON│TUE│ │ * │ TITLE │ │ * │ Subtitle │ │ * │ ── red accent │ │ * └──────────────────────┴──────────────────────────────────────┘ */ /* ============================================================ Container ============================================================ */ .race-hero-v3{ position:relative; display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:24px; align-items:center; padding:18px 22px !important; overflow:hidden; background: radial-gradient(ellipse 60% 80% at 0% 50%,rgba(225,6,0,.07),transparent 70%), linear-gradient(180deg,#10141b 0%,#0a0d12 100%); border:1px solid rgba(255,255,255,.06) } /* Faint horizontal hairlines across the card — like a brushed-aluminum trim panel inside a sports-car interior. */ .race-hero-v3::before{ content:'';position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(180deg,rgba(255,255,255,0) 0 3px,rgba(255,255,255,.012) 3px 4px); mix-blend-mode:overlay } @media(max-width:900px){ .race-hero-v3{grid-template-columns:1fr;gap:20px;padding:20px !important} } /* ============================================================ Left half: copy ============================================================ */ .rh-copy{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px} .rh-eyebrow{ font-family:Inter,system-ui,sans-serif; font-size:10px;font-weight:800;letter-spacing:.32em;text-transform:uppercase; color:#8a93a0 } .rh-title{ margin:0; font-family:'Anton','Bebas Neue',Inter,system-ui,sans-serif; font-size:clamp(30px,3.4vw,46px); font-weight:900;font-style:italic;line-height:1.02; color:#e8e6df; letter-spacing:.005em; text-transform:uppercase } .rh-subtitle{ margin:4px 0 0; color:#a0b4c8;font-weight:600;line-height:1.45; font-size:13px;max-width:480px } .rh-redline{ width:80px;height:2px;margin-top:10px; background:linear-gradient(90deg,#e10600,#ff6f3b 70%,transparent); border-radius:2px } /* ============================================================ Right half: single horizontal strip — gauges + forecast inline ============================================================ */ .rh-cluster{ position:relative;z-index:1; display:flex;flex-direction:row;align-items:center;gap:14px; min-width:0;flex-wrap:nowrap } /* The gauges stay in a tight cluster; forecast follows on the same line. .rh-cluster-row groups the three gauges so the forecast can sit beside them as one unit. The gap is wide enough that variable-length labels (TIME · 12:34 PM, CONDITIONS · Mostly Cloudy) don't visually collide with the neighboring gauge. */ .rh-cluster-row{display:flex;gap:24px;align-items:center} @media(max-width:780px){ .rh-cluster{flex-wrap:wrap;justify-content:flex-end} } @media(max-width:560px){ .rh-cluster-row{flex-wrap:wrap;justify-content:center} } .rh-gauge{ position:relative; display:flex;flex-direction:column;align-items:center;gap:4px; /* Lock the column to a width that comfortably accommodates the longest expected label (CONDITIONS · Mostly Cloudy ≈ 170px) so labels stay on one line and variable-length text can't push neighboring gauges around. flex-shrink:0 keeps it from squashing in narrow viewports. */ width:160px;flex-shrink:0 } .rh-gauge-svg{ display:block; /* Explicit max-width so even if width/height attrs are missing the SVG can't grow past its intended footprint. */ max-width:100%; filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)) } .rh-gauge-label{ font-family:Inter,system-ui,sans-serif; font-size:12px;font-weight:800;letter-spacing:.16em; color:#8a93a0;text-transform:uppercase;text-align:center; font-variant-numeric:tabular-nums; /* Single line; the column is wide enough to fit common labels and the cluster gap absorbs any rare overflow. */ width:100%;line-height:1.2;white-space:nowrap;min-height:14px } .rh-gauge-label span{color:#e8e6df} /* Hands rotate around the gauge center. transform-box:fill-box makes the wrapping the hand line use its own bounding box; transform-origin 60 60 nails the rotation pivot at the dial center for the 120-viewBox gauges. Transitions are gated behind body.tb-rh-ready so the FIRST positioning call snaps to the correct angle without sweeping from 12 o'clock — weather-clock.js adds that class on the next frame after init. */ .rh-hand{transform-origin:60px 60px} .rh-hand-temp{transform-origin:60px 60px} body.tb-rh-ready .rh-hand{transition:transform .35s cubic-bezier(.2,.8,.2,1)} body.tb-rh-ready .rh-hand-min{transition:transform .12s linear} body.tb-rh-ready .rh-hand-temp{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} /* ============================================================ Forecast strip (4 days) — sits inline next to the gauges ============================================================ */ .rh-forecast{ display:grid;grid-template-columns:repeat(4,72px);gap:6px; align-self:center; /* Reserve the full footprint so the cluster width doesn't snap when tiles populate (4*72 + 3*6 = 306px). */ width:306px;min-height:78px } .rh-fc-day{ display:flex;flex-direction:column;align-items:center;gap:2px; padding:7px 5px;border-radius:8px; background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005)); border:1px solid rgba(255,255,255,.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.04) } .rh-fc-name{font-size:10px;font-weight:800;letter-spacing:.14em;color:#8a93a0;text-transform:uppercase} .rh-fc-icon{display:flex;align-items:center;justify-content:center;height:30px} /* Skeleton tiles have the same dimensions as real ones — placeholders muted so the swap to real data is quiet. */ .rh-fc-skeleton{opacity:.55} .rh-fc-icon .wx-svg{filter:none} .rh-fc-icon .wx-svg .wx-sun{animation:none;transform:none} .rh-fc-icon .wx-svg .wx-rain line{animation:none} .rh-fc-hilo{font-size:12px;font-weight:900;font-variant-numeric:tabular-nums;color:#e8e6df;display:flex;gap:5px} .rh-fc-hilo .muted{color:#8a93a0;font-weight:700} /* ============================================================ Weather icon shared animations (used inside the gauge mount) ============================================================ */ .wx-svg{display:block} .rh-gauge .wx-svg .wx-sun{transform-origin:32px 32px;animation:wxSpin 60s linear infinite} @keyframes wxSpin{to{transform:rotate(360deg)}} .rh-gauge .wx-svg .wx-rain line{animation:wxRain 1.4s ease-in-out infinite} .rh-gauge .wx-svg .wx-rain line:nth-child(2){animation-delay:.25s} .rh-gauge .wx-svg .wx-rain line:nth-child(3){animation-delay:.5s} @keyframes wxRain{0%{transform:translateY(-2px);opacity:.5}50%{opacity:1}100%{transform:translateY(2px);opacity:.5}} .rh-gauge .wx-svg .wx-thunder{animation:wxFlash 3s ease-in-out infinite} @keyframes wxFlash{0%,90%,100%{filter:none}92%,96%{filter:drop-shadow(0 0 8px #fcd34d)}} /* ============================================================ Mobile collapse: stack everything, reduce gauge sizes ============================================================ */ @media(max-width:920px){ .rh-cluster{align-items:flex-start;justify-content:flex-start} .rh-redline{width:64px} } @media(max-width:560px){ .rh-gauge-clock .rh-gauge-svg, .rh-gauge-weather .rh-gauge-svg{width:96px;height:96px} .rh-gauge-date .rh-gauge-svg{width:80px;height:80px} .rh-forecast{grid-template-columns:repeat(4,46px)} } /* ============================================================ Legacy fallback for any page still using .race-hero without v3 ============================================================ */ .race-hero:not(.race-hero-v3):not(.race-hero-v2){ display:grid;grid-template-columns:minmax(260px,1fr) minmax(460px,1.25fr); gap:18px;align-items:stretch }