...
// cartographic card frame
...
// map-style legend chip
... // NE compass rose accent
Safe to load on every page — zero runtime cost.
All colour tokens come from :root in style.css.
═══════════════════════════════════════════════════════════════ */
/* ── 1. Contour line background ────────────────────────────────── */
/* A 600×600 SVG pattern with ~10 concentric closed contours that tile
seamlessly. Encoded as data URI so no extra HTTP request. */
body.topo {
background-image:
/* Top layer: fine topographic lines (blood red, 4% opacity) */
url("data:image/svg+xml;utf8,
"),
/* Background base */
var(--bg);
background-size: 600px 600px, auto;
background-repeat: repeat, no-repeat;
background-attachment: fixed, scroll;
}
body.topo.topo-dense {
/* Denser version — for map-centric pages */
background-image:
url("data:image/svg+xml;utf8,
"),
var(--bg);
background-size: 400px 400px, auto;
background-repeat: repeat, no-repeat;
background-attachment: fixed, scroll;
}
/* ── 2. Cartographic card frame ────────────────────────────────── */
.map-frame {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px;
padding: 24px 28px;
backdrop-filter: blur(14px);
}
/* Corner tick marks — cartographer's bezel */
.map-frame::before,
.map-frame::after,
.map-frame > .mf-tr,
.map-frame > .mf-br {
content: '';
position: absolute;
width: 18px;
height: 18px;
pointer-events: none;
border-color: var(--color-royal-gold);
opacity: 0.55;
}
.map-frame::before { top: 6px; left: 6px; border-style: solid; border-width: 1px 0 0 1px; }
.map-frame::after { bottom: 6px; right: 6px; border-style: solid; border-width: 0 1px 1px 0; }
.map-frame > .mf-tr { top: 6px; right: 6px; border-style: solid; border-width: 1px 1px 0 0; }
.map-frame > .mf-br { bottom: 6px; left: 6px; border-style: solid; border-width: 0 0 1px 1px; }
/* Map-frame heading: serif, with coordinate-style sub-label */
.map-frame > h2, .map-frame > h3 {
font-family: 'Cinzel', 'Crimson Text', Georgia, serif;
color: var(--text-light);
margin: 0 0 12px;
}
.map-frame .coord {
display: inline-block;
margin-left: 8px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.12em;
color: var(--color-royal-gold);
opacity: 0.75;
vertical-align: middle;
}
/* ── 3. Survey-tick horizontal divider ─────────────────────────── */
.survey-rule {
height: 14px;
margin: 20px 0;
border: 0;
background-image:
linear-gradient(to right,
transparent 0, transparent calc(25% - 0.5px),
rgba(201, 168, 76, 0.35) calc(25% - 0.5px), rgba(201, 168, 76, 0.35) calc(25% + 0.5px),
transparent calc(25% + 0.5px), transparent calc(50% - 0.5px),
rgba(201, 168, 76, 0.55) calc(50% - 0.5px), rgba(201, 168, 76, 0.55) calc(50% + 0.5px),
transparent calc(50% + 0.5px), transparent calc(75% - 0.5px),
rgba(201, 168, 76, 0.35) calc(75% - 0.5px), rgba(201, 168, 76, 0.35) calc(75% + 0.5px),
transparent calc(75% + 0.5px), transparent 100%),
linear-gradient(to right, transparent 0%, rgba(201, 168, 76, 0.20) 15%, rgba(201, 168, 76, 0.20) 85%, transparent 100%);
background-repeat: no-repeat, no-repeat;
background-size: 100% 8px, 100% 1px;
background-position: center 0, center 8px;
}
/* ── 4. Map legend chip ────────────────────────────────────────── */
.map-legend {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: rgba(8, 14, 26, 0.70);
border: 1px solid rgba(201, 168, 76, 0.25);
border-radius: 3px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-royal-cream);
backdrop-filter: blur(8px);
}
.map-legend .ml-key {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 2px;
background: currentColor;
opacity: 0.8;
}
.map-legend.ml-critical { color: var(--color-critical); }
.map-legend.ml-warn { color: var(--color-warning); }
.map-legend.ml-info { color: var(--color-info); }
.map-legend.ml-gold { color: var(--color-royal-gold); }
.map-legend.ml-ok { color: var(--color-green); }
/* ── 5. Compass rose accent ────────────────────────────────────── */
.compass {
width: 56px;
height: 56px;
opacity: 0.55;
filter: drop-shadow(0 0 2px rgba(201, 168, 76, 0.25));
pointer-events: none;
user-select: none;
}
.compass.lg { width: 96px; height: 96px; }
/* ── 6. Elevation badge (corruption depth indicator) ──────────── */
.elev-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: 2px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.58rem;
letter-spacing: 0.12em;
text-transform: uppercase;
background: rgba(185, 28, 28, 0.08);
border: 1px solid rgba(185, 28, 28, 0.30);
color: var(--accent-bright);
}
.elev-badge::before {
content: '▲';
font-size: 0.55rem;
opacity: 0.8;
}
.elev-badge.e-peak { background: rgba(185, 28, 28, 0.18); border-color: var(--accent); }
.elev-badge.e-high { background: rgba(208, 135, 112, 0.12); border-color: rgba(208, 135, 112, 0.30); color: var(--color-warning); }
.elev-badge.e-mid { background: rgba(184, 134, 11, 0.12); border-color: rgba(184, 134, 11, 0.30); color: var(--color-gold); }
.elev-badge.e-base { background: rgba(107, 142, 90, 0.10); border-color: rgba(107, 142, 90, 0.25); color: var(--color-green); }
/* ── 7. Pressure-ridge hero accent ─────────────────────────────── */
/* Horizontal layered-strata visual for hero sections */
.pressure-ridge {
position: relative;
height: 48px;
margin: 28px 0;
background:
linear-gradient(180deg,
transparent 0, transparent 8px,
rgba(185, 28, 28, 0.25) 8px, rgba(185, 28, 28, 0.25) 9px,
transparent 9px, transparent 16px,
rgba(201, 168, 76, 0.20) 16px, rgba(201, 168, 76, 0.20) 17px,
transparent 17px, transparent 26px,
rgba(201, 168, 76, 0.35) 26px, rgba(201, 168, 76, 0.35) 27px,
transparent 27px, transparent 38px,
rgba(185, 28, 28, 0.15) 38px, rgba(185, 28, 28, 0.15) 39px,
transparent 39px);
overflow: hidden;
}
.pressure-ridge::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%, rgba(8, 14, 26, 0.75) 100%);
}
/* ── 8. Map-grid overlay (for containers) ──────────────────────── */
/* Lightweight 20px grid with 100px majors — opt in via .map-grid class */
.map-grid {
background-image:
linear-gradient(rgba(201, 168, 76, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(201, 168, 76, 0.035) 1px, transparent 1px),
linear-gradient(rgba(201, 168, 76, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(201, 168, 76, 0.08) 1px, transparent 1px);
background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
}
/* ── 9. Node bubble — used on corruption-map page ──────────────── */
/* Stand-alone CSS for a force-directed graph node styled as a topographic peak */
.peak-node {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%,
rgba(220, 38, 38, 0.85) 0%,
rgba(185, 28, 28, 0.70) 35%,
rgba(120, 20, 20, 0.85) 100%);
border: 1px solid rgba(201, 168, 76, 0.55);
box-shadow:
inset 0 0 10px rgba(0,0,0,0.5),
0 0 18px rgba(185, 28, 28, 0.15);
font-family: 'IBM Plex Mono', monospace;
font-size: 0.6rem;
color: var(--color-royal-cream);
text-shadow: 0 1px 2px rgba(0,0,0,0.75);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.peak-node:hover { transform: scale(1.08); box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 32px rgba(220, 38, 38, 0.35); }
.peak-node.p-gov { background: radial-gradient(circle at 35% 30%, rgba(220,38,38,0.9), rgba(120,20,20,0.9)); }
.peak-node.p-corp { background: radial-gradient(circle at 35% 30%, rgba(184,134,11,0.85), rgba(120,85,10,0.85)); }
.peak-node.p-mp { background: radial-gradient(circle at 35% 30%, rgba(129,161,192,0.80), rgba(66,102,144,0.85)); }
.peak-node.p-foreign { background: radial-gradient(circle at 35% 30%, rgba(168,85,247,0.80), rgba(90,30,160,0.85)); }
.peak-node.p-media { background: radial-gradient(circle at 35% 30%, rgba(107,142,90,0.80), rgba(60,85,48,0.85)); }
/* ═══════════════════════════════════════════════════════════════
TENET5 — Topography v2.0 — Corruption Terrain Mapping
New motifs: trail paths, terrain sections, isobars,
investigation depth contours, entity heatmap rings,
cartographic headers, and map-inset panels.
═══════════════════════════════════════════════════════════════ */
/* ── 10. Trail path — SVG-styled connection lines ──────────────── */
/* Use between corruption entities to show the money/influence flow */
.trail-path {
position: relative;
height: 3px;
margin: 8px 0;
background:
repeating-linear-gradient(90deg,
rgba(185, 28, 28, 0.50) 0, rgba(185, 28, 28, 0.50) 8px,
transparent 8px, transparent 14px);
border-radius: 1px;
}
.trail-path::before {
content: '';
position: absolute;
left: 0; top: -3px; bottom: -3px; right: 0;
background:
repeating-linear-gradient(90deg,
transparent 0, transparent 48px,
rgba(201, 168, 76, 0.25) 48px, rgba(201, 168, 76, 0.25) 50px);
}
.trail-path.tp-gold {
background:
repeating-linear-gradient(90deg,
rgba(201, 168, 76, 0.55) 0, rgba(201, 168, 76, 0.55) 8px,
transparent 8px, transparent 14px);
}
.trail-path.tp-vertical {
width: 3px;
height: auto;
min-height: 40px;
background:
repeating-linear-gradient(180deg,
rgba(185, 28, 28, 0.50) 0, rgba(185, 28, 28, 0.50) 8px,
transparent 8px, transparent 14px);
}
/* ── 11. Terrain section — full-width contour backdrop panels ──── */
/* Wraps a content section with layered topographic elevation feel */
.terrain-section {
position: relative;
padding: 3rem 0;
overflow: hidden;
}
.terrain-section::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
background:
url("data:image/svg+xml;utf8,
") repeat-x bottom / 800px 200px;
}
.terrain-section.ts-peak::before {
background:
url("data:image/svg+xml;utf8,
") repeat-x bottom / 800px 200px;
}
/* ── 12. Isobar — horizontal contour lines between content ─────── */
/* Wider version of pressure-ridge for section separators */
.isobar {
position: relative;
height: 32px;
margin: 2rem 0;
background:
url("data:image/svg+xml;utf8,
") repeat-x center / 600px 32px;
opacity: 0.85;
}
.isobar.isobar-thick {
height: 48px;
background:
url("data:image/svg+xml;utf8,
") repeat-x center / 600px 48px;
}
/* ── 13. Investigation depth contour — stacked rings ───────────── */
/* Concentric rings radiating from a high-corruption entity */
.depth-contour {
position: relative;
width: 160px;
height: 160px;
border-radius: 50%;
background:
radial-gradient(circle,
rgba(185, 28, 28, 0.25) 0%, rgba(185, 28, 28, 0.25) 18%,
transparent 18%, transparent 28%,
rgba(185, 28, 28, 0.18) 28%, rgba(185, 28, 28, 0.18) 32%,
transparent 32%, transparent 42%,
rgba(185, 28, 28, 0.12) 42%, rgba(185, 28, 28, 0.12) 46%,
transparent 46%, transparent 58%,
rgba(201, 168, 76, 0.08) 58%, rgba(201, 168, 76, 0.08) 61%,
transparent 61%, transparent 74%,
rgba(201, 168, 76, 0.05) 74%, rgba(201, 168, 76, 0.05) 77%,
transparent 77%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.depth-contour .dc-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-light);
text-align: center;
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
z-index: 1;
}
.depth-contour.dc-sm { width: 100px; height: 100px; }
.depth-contour.dc-lg { width: 220px; height: 220px; }
.depth-contour.dc-xl { width: 300px; height: 300px; }
/* ── 14. Heatmap ring — glowing entity importance indicator ────── */
.heatmap-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(185, 28, 28, 0.30);
background: radial-gradient(circle, rgba(185, 28, 28, 0.12) 0%, transparent 70%);
pointer-events: none;
animation: heatPulse 4s ease-in-out infinite alternate;
}
@keyframes heatPulse {
0% { opacity: 0.4; transform: scale(1); }
100% { opacity: 0.8; transform: scale(1.05); }
}
/* ── 15. Cartographic header — map title bar with scale ────────── */
.carto-header {
display: flex;
align-items: baseline;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border);
margin-bottom: 1.5rem;
}
.carto-header h2, .carto-header h3 {
font-family: 'Cinzel', 'Crimson Text', Georgia, serif;
color: var(--text-light);
margin: 0;
font-weight: 600;
letter-spacing: 0.03em;
}
.carto-header .ch-scale {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.55rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-royal-gold);
opacity: 0.7;
white-space: nowrap;
}
.carto-header .ch-datum {
margin-left: auto;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.55rem;
letter-spacing: 0.10em;
color: var(--text-tertiary);
}
/* ── 16. Map inset panel — small reference map in corner ───────── */
.map-inset {
position: relative;
width: 180px;
height: 120px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
flex-shrink: 0;
}
.map-inset::before {
content: '';
position: absolute;
inset: 0;
background:
url("data:image/svg+xml;utf8,
") no-repeat center / cover;
pointer-events: none;
}
.map-inset .mi-label {
position: absolute;
bottom: 4px;
right: 6px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.45rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-royal-gold);
opacity: 0.65;
}
.map-inset .mi-dot {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-bright);
box-shadow: 0 0 6px rgba(220, 38, 38, 0.6);
}
/* ── 17. Corruption terrain card — entity card with topo layers ── */
.terrain-card {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
overflow: hidden;
backdrop-filter: blur(12px);
transition: border-color 0.25s ease, transform 0.25s ease;
}
.terrain-card::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.5;
background:
url("data:image/svg+xml;utf8,
") no-repeat bottom / 100% auto;
}
.terrain-card > * { position: relative; z-index: 1; }
.terrain-card:hover {
border-color: rgba(185, 28, 28, 0.35);
transform: translateY(-2px);
}
.terrain-card .tc-elev {
position: absolute;
top: 8px;
right: 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.5rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-bright);
opacity: 0.7;
z-index: 1;
}
.terrain-card .tc-title {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-light);
margin: 0 0 0.5rem;
}
.terrain-card .tc-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.65rem;
color: var(--text-tertiary);
letter-spacing: 0.05em;
}
/* ── 18. Connection line (CSS-only graph edges) ────────────────── */
.conn-line {
position: absolute;
height: 1px;
background: linear-gradient(90deg, rgba(185, 28, 28, 0.4), rgba(201, 168, 76, 0.2), transparent);
transform-origin: 0 0;
pointer-events: none;
z-index: 0;
}
.conn-line.cl-strong {
height: 2px;
background: linear-gradient(90deg, rgba(185, 28, 28, 0.7), rgba(185, 28, 28, 0.3), transparent);
}
.conn-line.cl-dashed {
background: none;
border-top: 1px dashed rgba(201, 168, 76, 0.3);
}
/* ── 19. Terrain grid — corruption topology layout ─────────────── */
.terrain-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
}
.terrain-grid.tg-dense {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
}
/* ── 20. Ridge label — inline corruption category tag ──────────── */
.ridge-label {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px;
border-radius: 3px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.55rem;
letter-spacing: 0.10em;
text-transform: uppercase;
border: 1px solid;
}
.ridge-label.rl-lobbying { color: var(--color-royal-gold); border-color: rgba(201,168,76,0.35); background: rgba(201,168,76,0.08); }
.ridge-label.rl-treason { color: var(--accent-bright); border-color: rgba(220,38,38,0.35); background: rgba(220,38,38,0.08); }
.ridge-label.rl-foreign { color: var(--color-purple); border-color: rgba(168,85,247,0.35); background: rgba(168,85,247,0.08); }
.ridge-label.rl-financial { color: var(--hud-amber); border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.08); }
.ridge-label.rl-osint { color: var(--hud-cyan); border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.08); }
.ridge-label.rl-media { color: var(--color-green); border-color: rgba(107,142,90,0.35); background: rgba(107,142,90,0.08); }
/* ── 21. Topographic scale bar ─────────────────────────────────── */
.topo-scale {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 0;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.5rem;
letter-spacing: 0.12em;
color: var(--text-quaternary);
text-transform: uppercase;
}
.topo-scale .ts-bar {
display: flex;
height: 4px;
border-radius: 1px;
overflow: hidden;
}
.topo-scale .ts-bar span {
display: block;
height: 100%;
}
.topo-scale .ts-bar .ts-fill { background: var(--accent); }
.topo-scale .ts-bar .ts-empty { background: rgba(255,255,255,0.06); }
/* ── 22. Corruption altitude meter ─────────────────────────────── */
.alt-meter {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
width: 28px;
}
.alt-meter .am-bar {
width: 100%;
height: 3px;
border-radius: 1px;
background: rgba(255,255,255,0.06);
overflow: hidden;
}
.alt-meter .am-bar .am-fill {
height: 100%;
border-radius: 1px;
transition: width 0.6s ease;
}
.alt-meter .am-fill.am-critical { background: var(--accent-bright); }
.alt-meter .am-fill.am-high { background: var(--color-warning); }
.alt-meter .am-fill.am-mid { background: var(--color-gold); }
.alt-meter .am-fill.am-low { background: var(--color-green); }
.alt-meter .am-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.4rem;
letter-spacing: 0.08em;
color: var(--text-quaternary);
text-transform: uppercase;
}
/* ── 23. Topographic reduced motion ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
body.topo { background-attachment: scroll, scroll; }
.peak-node { transition: none; }
.heatmap-ring { animation: none; opacity: 0.6; }
.terrain-card { transition: none; }
}
/* ── 24. Responsive adjustments ────────────────────────────────── */
@media (max-width: 768px) {
.terrain-grid { grid-template-columns: 1fr; }
.terrain-grid.tg-dense { grid-template-columns: 1fr; }
.depth-contour { width: 120px; height: 120px; }
.depth-contour.dc-lg { width: 160px; height: 160px; }
.depth-contour.dc-xl { width: 200px; height: 200px; }
.map-inset { width: 140px; height: 93px; }
.carto-header { flex-wrap: wrap; gap: 0.5rem; }
}