/* ═══════════════════════════════════════════════════════════════ gr-hero-map.css — Hero map production styles Mount point:
wrapping the inlined hero map SVG (assets/maps/hero-map.svg). Loaded only on the consuming page; not site-wide. All CSS variables prefixed with --hero-map- to prevent collision with site-global tokens (gr-theme.css) and with the per-theater detail-map vocabulary in gr-theater-map.css. 1:1 migration of the harness CSS in scripts/build-map-preview.js with three transformations applied: 1. variable namespacing (--X → --hero-map-X) 2. mount-point selector re-anchor (#map-frame → #hero-map) 3. removal of harness-only .is-hover button-sim selectors Variable VALUES preserved exactly from the gate-passed palette. Geometry-driving constants (UNSETTLED_HATCH_*, VIGNETTE_BLUR_STDDEV) live in scripts/build-map-svg.js and require an SVG rebuild to tune. ═══════════════════════════════════════════════════════════════ */ :root { /* Map palette — first-pass war-room theme */ --hero-map-bg: #07090d; --hero-map-ocean: #0c1828; --hero-map-basin: #102338; --hero-map-land: #2a3a4d; --hero-map-land-stroke: #0a121c; --hero-map-arctic: #2a3f5c; --hero-map-inert: #1f2730; --hero-map-label: #d6dde6; /* HOVER STATE — brand gold (warm) for land theaters and IO primary members */ --hero-map-hover-fill: #c9a14a; /* HOVER STATE — cool brass for the indian-ocean BASIN polygon only. Two-color hover keeps maritime zone visually distinct from the warm-gold land highlight, so the basin and the IO primary-member countries read as one strategic system without flattening into a single gold mass. */ --hero-map-basin-hover-fill: #6a8aa6; /* UNSETTLED HATCHING — diagonal pattern overlaid on territories carrying data-unsettled="true". Geometry (line spacing, angle) is baked into the SVG in build-map-svg.js and requires a build:map-svg rerun to change. The four vars below drive the visible aesthetic. */ --hero-map-unsettled-hatch-color: #b8b8b8; --hero-map-unsettled-hatch-color-engaged: #c9a14a; --hero-map-unsettled-hatch-stroke-width: 1.0; --hero-map-unsettled-hatch-stroke-opacity: 0.55; /* ASTERISK MARKERS — small footnote glyph at each marked territory's centroid. Asterisk and unsettled territories both receive markers (universal "footnote here, hover for analytical content" vocabulary). The reason / justification text lives on the territory's as a child, where pointer-events default fires native browser tooltip on hover. */ --hero-map-asterisk-color: #cfd6df; --hero-map-asterisk-size: 14px; /* VIGNETTE inner shadow — instrument-bezel darkening along the projection's outer ellipse. Color and opacity are CSS-driven via the .vignette-flood class on the filter's <feFlood> element. Blur radius (penetration depth) is a JS constant in build-map-svg.js (VIGNETTE_BLUR_STDDEV); changing it requires a build:map-svg rerun. */ --hero-map-vignette-color: #050a14; --hero-map-vignette-opacity: 0.6; } /* ─── Static styling ─────────────────────────────────────────── */ #hero-map svg { display: block; width: 100%; height: auto; } /* MAP PALETTE OVERRIDES — drive from CSS vars instead of inline fills. SVG presentation attributes have lower specificity than these rules, so the inline fills set by build-map-svg.js are overridden. */ #hero-map svg #map-bg { fill: var(--hero-map-bg); } #hero-map svg #ocean-base { fill: var(--hero-map-ocean); } #hero-map svg #indian-ocean-basin { fill: var(--hero-map-basin); } #hero-map svg #antarctica { fill: var(--hero-map-inert); } #hero-map svg #arctic-overlay { fill: var(--hero-map-arctic); } /* Continental + indian-ocean country paths share land color. Selectors deliberately omit #theaters so this rule's specificity (1-1-1-3) matches the hover rule below — without that match, the higher-specificity land rule would prevent hover from overriding fill on continental theaters. */ #hero-map svg g[data-theater] > path, #hero-map svg g[data-theater] > g[data-feature-type="countries"] > path { fill: var(--hero-map-land); stroke: var(--hero-map-land-stroke); stroke-width: 0.4; } /* Theater tonal differentiation — subtle. Each theater shifts a few points from --hero-map-land in hue or lightness so the 9-theater partition reads at first glance. Differences are intentionally small; war-room aesthetic, not infographic. */ #hero-map svg g[data-theater="north-america"] > path { fill: #2c3e52; } #hero-map svg g[data-theater="latin-america"] > path { fill: #2f3d4f; } #hero-map svg g[data-theater="europe"] > path { fill: #2d3a4d; } #hero-map svg g[data-theater="middle-east"] > path { fill: #34384a; } #hero-map svg g[data-theater="eurasia"] > path { fill: #2a3a4f; } #hero-map svg g[data-theater="indo-pacific"] > path { fill: #2e3d4d; } #hero-map svg g[data-theater="africa"] > path { fill: #323b4a; } #hero-map svg g[data-theater="indian-ocean"] > g[data-feature-type="countries"] > path { fill: #2c3c50; } /* LABELS — uppercase + tracking applied here so source content stays mixed-case ("Indo-Pacific", "Indian Ocean"). text-transform handles caps; letter-spacing handles tracking-out. pointer-events:none prevents labels from blocking hover on the underlying theater. */ #hero-map svg .map-labels text { fill: var(--hero-map-label); text-transform: uppercase; letter-spacing: 0.14em; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 14px; pointer-events: none; } /* Asterisk marker glyph styling. Position is baked into the SVG (computed centroid → projected XY) and requires a build:map-svg rerun to retune. */ #hero-map svg #asterisk-markers text { fill: var(--hero-map-asterisk-color); font-size: var(--hero-map-asterisk-size); font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; pointer-events: none; } /* Vignette flood — drives the inner-shadow filter's color and opacity from :root vars. Overrides the inline flood-color / flood-opacity attributes set by build-map-svg.js on the <feFlood> element with class="vignette-flood". */ #hero-map svg .vignette-flood { flood-color: var(--hero-map-vignette-color); flood-opacity: var(--hero-map-vignette-opacity); } /* UNSETTLED HATCHING base — line stroke / width / opacity for both patterns (#unsettled-hatch grey, #unsettled-hatch-engaged gold). The three states are documented under "Interactive behavior" below; this section just establishes the resting-state stroke. */ #hero-map svg .unsettled-hatch-line { stroke: var(--hero-map-unsettled-hatch-color); stroke-width: var(--hero-map-unsettled-hatch-stroke-width); stroke-opacity: var(--hero-map-unsettled-hatch-stroke-opacity); } #hero-map svg .unsettled-hatch-line-engaged { stroke: var(--hero-map-unsettled-hatch-color-engaged); stroke-width: var(--hero-map-unsettled-hatch-stroke-width); stroke-opacity: var(--hero-map-unsettled-hatch-stroke-opacity); } /* CURSOR — theater regions are clickable (G4 wires the click handler) */ #hero-map svg g[data-theater] { cursor: pointer; } /* ─── Interactive behavior ───────────────────────────────────── */ /* HOVER + AT-REST STATUS GLOW Status-tier-driven drop-shadow glow. Drop-shadow preserves the base fill while encoding tier via glow color. Status assignments come from /status.json; the inline status updater script sets data-status on each <g data-theater>. Critical theaters also pulse at rest (see @keyframes critical-pulse below). */ #hero-map svg g[data-theater][data-status="crit"]:hover > path, #hero-map svg g[data-theater][data-status="crit"]:hover > g[data-feature-type="countries"] > path { filter: drop-shadow(0 0 14px var(--status-crit-lt)); animation: none; } #hero-map svg g[data-theater][data-status="elevated"]:hover > path, #hero-map svg g[data-theater][data-status="elevated"]:hover > g[data-feature-type="countries"] > path { filter: drop-shadow(0 0 12px var(--status-elev-lt)); } #hero-map svg g[data-theater][data-status="watch"]:hover > path, #hero-map svg g[data-theater][data-status="watch"]:hover > g[data-feature-type="countries"] > path { filter: drop-shadow(0 0 12px var(--status-watch-lt)); } /* CRITICAL AT-REST PULSE Subtle 4-second cycle on crit-status theaters. Hover overrides via animation: none above. */ @keyframes critical-pulse { 0%, 100% { filter: drop-shadow(0 0 4px var(--status-crit-lt)); } 50% { filter: drop-shadow(0 0 12px var(--status-crit-lt)); } } #hero-map svg g[data-theater][data-status="crit"] > path, #hero-map svg g[data-theater][data-status="crit"] > g[data-feature-type="countries"] > path { animation: critical-pulse 4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { #hero-map svg g[data-theater][data-status="crit"] > path, #hero-map svg g[data-theater][data-status="crit"] > g[data-feature-type="countries"] > path { animation: none; } } /* Indian Ocean compound hover. Basin polygon shifts to maritime slate-blue at 0.65 opacity while IO primary-member countries (handled by the rule above) light warm gold. Two-color hover reads as one strategic system without flattening into a single gold mass. */ #hero-map svg g[data-theater="indian-ocean"]:hover #indian-ocean-basin { fill: var(--hero-map-basin-hover-fill) !important; fill-opacity: 0.65; } /* Arctic compound hover. Polar overlay shifts to maritime slate-blue (same --hero-map- basin-hover-fill as Indian Ocean basin — single source of truth for the maritime hover signal). Strategic-land territories with data-arctic-strategic light up warm gold via the :has() rule below. The flat warm-gold overlay treatment from earlier was replaced as part of Phase 3.1.7. */ #hero-map svg g[data-theater="arctic"]:hover #arctic-overlay { fill: var(--hero-map-basin-hover-fill) !important; fill-opacity: 0.65; } /* Arctic-strategic territories (GRL, ISL, SJM, RUS-ARCTIC, CAN-ARCTIC) light warm gold on Arctic theater hover. Multi-membership signal: these territories continue to render in their primary theater group (NA / Europe / Eurasia / NA respectively); this rule activates only when Arctic itself is hovered. Hovering a strategic territory directly fires its primary theater hover, not the Arctic compound. */ #hero-map svg:has(g[data-theater="arctic"]:hover) path[data-arctic-strategic="true"] { fill: var(--hero-map-hover-fill) !important; } /* UNSETTLED HATCHING — bidirectional signal. Three states: 1. Resting → grey hatching (analytical "unsettled" mark) 2. Home-theater hover (Eurasia) → territory fill goes gold, hatching stays grey (overlay independent of base path's hover fill) 3. Engaged-theater hover (Europe) → territory fill stays eurasia-tone (territory not in europe), hatching SHIFTS to gold via fill-swap below Two SVG <pattern> defs are present (#unsettled-hatch grey, #unsettled-hatch-engaged gold). The :root vars above drive the line colors in each pattern; the fill-swap rule below handles the State-3 transition. State 3: when an engaged_by theater is hovered, swap the <use> fill from the grey pattern to the gold pattern. :has() at the SVG root is the cleanest selector — sibling combinators don't work because g[data-theater] is nested inside <g id="theaters">. Add per-theater rules as engaged_by lists grow beyond ['europe']. */ #hero-map svg:has(g[data-theater="europe"]:hover) #unsettled-overlay use[data-engaged-by~="europe"] { fill: url(#unsettled-hatch-engaged); } /* Focus-mode visibility toggle. At rest: overlays visible (default). On any theater hover: overlays hidden BY DEFAULT (focus mode culls the non-relevant analytical mark). Then the per-theater "re-show" rule below restores visibility for overlays whose home theater or engaged_by includes the currently-hovered theater. Net result: eurasia hover → 5 overlays stay visible (home theater) europe hover → 5 overlays stay visible (engaged_by) africa / indo-pacific / middle-east / north-america / latin-america / indian-ocean / arctic hover → all overlays hidden Compact 2-rule formulation rather than 7 per-theater hide rules: same end result, fewer rules, no rule-list update required when a 10th theater is added. To extend re-show: append clauses to the second rule for each new (theater, role) pair. */ /* Hide-all default when any theater is hovered. */ #hero-map svg:has(g[data-theater]:hover) #unsettled-overlay use { visibility: hidden; } /* Re-show overlays for the hovered theater's home territories or engaged_by matches. Source-order places this after the hide rule so equal-specificity matches resolve in favor of "visible". */ #hero-map svg:has(g[data-theater="eurasia"]:hover) #unsettled-overlay use[data-theater="eurasia"], #hero-map svg:has(g[data-theater="europe"]:hover) #unsettled-overlay use[data-engaged-by~="europe"] { visibility: visible; }