/* Overlay depth treatment — per-overlay, element-aware (design: * docs/superpowers/specs/2026-05-20-overlay-depth-treatment-design.md, refined). * * Goal: overlays read as layered, physical glass instead of flat rectangles — * RAISED panels, RECESSED gauges, gently RAISED tiles. Depth is all INNER * (inset highlights/recesses) + coloured glows — NO outer drop shadows, so * overlays sit flush over the game with no halo. Never overrides an existing * background or boxes a transparent section. Scoped to .gf-ov. Reversible = * delete this file + the two lines + the csproj entry. Iterated in * GoFastOverlays.PreviewHost. */ /* ── 1. Panel material — background-bearing panels read as raised glass ─────── * Top edge-light + faint hairline only. NO outer drop shadow — overlays sit * flush over the game with no halo. No background touched. */ .gf-ov .st-flip, .gf-ov .fuel-status, .gf-ov .fuel-panel-v2, .gf-ov .forecast-panel, .gf-ov .delta-top, .gf-ov .delta-bottom, .gf-ov .weather-panel, .gf-ov .ei-panel, .gf-ov .corner-body, .gf-ov .corner-section-header, .gf-ov .damage-body, .gf-ov .tyre-section-header, .gf-ov .tyre-section-body, .gf-ov .rl-map-header, .gf-ov .rl-map-body, .gf-ov .tgt-chip, .gf-ov .tgt-panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.17), /* crisp top edge-light */ inset 0 7px 12px -8px rgba(255, 255, 255, 0.07), /* soft top sheen (white ⇒ safe on small chips) */ inset 0 0 0 1px rgba(255, 255, 255, 0.09), /* hairline frame */ inset 0 -1px 0 rgba(0, 0, 0, 0.34), /* dark bottom edge = bevel */ inset 0 -6px 10px -6px rgba(0, 0, 0, 0.32); /* soft bottom recede */ } /* ── 2. List rows (Standings / Relatives / Delta sectors) — a cohesive stack of * subtly raised tiles, NOT detached pills. Player rows keep their inline tint. */ .gf-ov .st-row, .gf-ov .rel-row, .gf-ov .delta-row { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.22); } /* ── 3. Fuel — recessed gauge bars + a raised VE card; roomier status header ─ */ .gf-ov .fuel-res-bar { box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(0, 0, 0, 0.38); } .gf-ov .fuel-ve { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } .gf-ov .fuel-status { padding-top: 9px; padding-bottom: 9px; } /* ── 4. Tyres — rubber capsule carcass (2026-06-10 redesign). A dark rim * with an edge-light reads as the tyre's carcass holding the heat surface; * top/bottom recess seats it. The curvature shading (shoulders + crown) * is the ::before overlay in overlays.css. Heatmap stays inline. */ .gf-ov .tyre-shape { box-shadow: inset 0 0 0 3px rgba(8, 9, 11, 0.88), /* carcass rim */ inset 0 0 0 4px rgba(255, 255, 255, 0.08), /* rim edge-light */ inset 0 4px 7px rgba(0, 0, 0, 0.45), /* recessed top */ inset 0 -4px 7px rgba(0, 0, 0, 0.40); /* recessed bottom */ } /* ── 5. Inputs (Essential Inputs + Pedals) — the "insane" treatment ────────── * Pedal bars become recessed slots holding glowing liquid tubes; the input * trace sits on a recessed dark screen; the panel is raised glass (above). * .ei-* = Essential Inputs, .inp-* = Pedals — same effect on both. */ /* Track: a deep carved slot so the glowing fill pops out of it. */ .gf-ov .ei-bar, .gf-ov .inp-pedal-bar { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(0, 0, 0, 0.45); } /* Fills: glossy inset highlight = liquid-tube look. The outer coloured bloom (0 0 18px / 0 0 5px) was removed for perf — these bars resize every pedal tick and a BLURRED OUTER shadow can't be cached when the box resizes, so it re-rastered an 18px Gaussian every frame during braking/throttle modulation (a GPU-heavy moment). The inset gloss is cheap (no blur over the background). */ .gf-ov .ei-fill.t, .gf-ov .inp-throttle-fill { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.14); } .gf-ov .ei-fill.b, .gf-ov .inp-brake-fill { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.14); } .gf-ov .ei-fill.c, .gf-ov .inp-clutch-fill { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.14); } /* Trace: a recessed dark screen the input trail is drawn onto. */ .gf-ov .ei-trace, .gf-ov .inp-trace-wrap { background: rgba(0, 0, 0, 0.22); border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 2px 8px rgba(0, 0, 0, 0.55); } /* ── 6. Comparison graphs, gauge tracks, damage ────────────────────────────── * Input/Speed Comparison = recessed screens the trace is drawn onto (canvas is * transparent, so the inset shows through). Line Comparison + Delta Bar tracks * = carved channels their glowing marker/fill rides in. Delta Bar pill = raised * chip. Damage segs = carved slots — lit segs keep their own colour glow. */ /* Input Comparison + Speed Comparison: a recessed dark screen the trace is * drawn onto (canvas is transparent, so the inset shows through). */ .gf-ov .trace-wrap, .gf-ov .speed-trace-wrap { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 3px 10px rgba(0, 0, 0, 0.55); } /* Line Comparison + Delta Bar tracks: deep carved channels (same slot as the * pedal bars) so the glowing marker / fill rides inside them. */ .gf-ov .pos-track, .gf-ov .delta-bar-track { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.42); } /* Delta Bar pill: a glossy top highlight so the time number reads as a chip. */ .gf-ov .delta-bar-pill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } /* Damage gauge bar (header strip): carved slots for unlit segments; a thin top * edge-light + bottom bevel on lit ones so they read as filled chips (flat — no glow). */ .gf-ov .dmg-bar .seg { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.3); } .gf-ov .dmg-bar .seg.on { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.3); }