/* ============================================================================ Cinematic timeline — themeable. Every colour is a CSS variable (see :root). A dataset picks a theme with `theme: ""` in data.js; the engine sets and the matching block in the THEMES section at the bottom overrides the palette. ============================================================================ */ :root { /* ===== THEME PALETTE (default = "midnight") ============================== */ --bg-0: #05070d; /* outer background / vignette edge */ --bg-1: #0b1020; /* mid background */ --bg-haze: #11192f; /* soft glow at the centre of the backdrop */ --line: #2b3a5c; /* axis base */ --line-glow: #4f7cff; /* axis / connector highlight */ --glow-rgb: 79, 124, 255; /* rgb of the axis/connector glow (used in shadows) */ --accent: #5b9bff; /* focus glow, primary buttons, active scrubber dot */ --accent-rgb: 91, 155, 255; /* rgb of --accent (used in soft fills/glows) */ --accent-deep: #2f5fd0; /* bottom stop of the primary-button gradient */ --accent-soft: #7db4ff; /* eyebrow text, links, arrows */ --on-accent: #ffffff; /* text colour that reads on the accent fill */ --text: #e8eefc; /* body text */ --text-dim: #8b9bc4; /* secondary text, minor/tick/band labels */ --ink: #ffffff; /* strong headings (card + panel titles) */ --card-bg: rgba(16, 23, 43, 0.92); --card-border: rgba(90, 130, 220, 0.35); --ctrl-bg: rgba(20, 30, 58, 0.8); /* buttons / chips / scrubber bg */ --ctrl-bg-hover: rgba(40, 60, 110, 0.9); --soft-fill: rgba(255, 255, 255, 0.08); /* faint inset fills (kbd, code, ✕) */ --soft-fill-2: rgba(255, 255, 255, 0.12); --hairline: rgba(255, 255, 255, 0.10); /* faint dashed band edges */ --panel-top: #0e1630; /* top of the details-panel gradient */ --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; /* Base text size of the "More info" details panel (NOT themed). Everything inside it (headings, lists, code…) scales from this. */ --detail-font: 36px; --detail-title: 34px; /* the panel's heading (the event title) */ } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg-0); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; } /* ---- Camera viewport -------------------------------------------------- */ #stage { position: fixed; inset: 0; overflow: hidden; cursor: grab; /* the whole surface is pannable */ background: radial-gradient(1200px 800px at 50% 40%, var(--bg-haze) 0%, var(--bg-1) 45%, var(--bg-0) 100%); } /* faint starfield vignette so empty space doesn't look flat */ #stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 75% 60%, rgba(255,255,255,.35), transparent), radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.3), transparent), radial-gradient(1px 1px at 90% 20%, rgba(255,255,255,.4), transparent), radial-gradient(1px 1px at 60% 15%, rgba(255,255,255,.25), transparent); opacity: .6; } /* ---- World (the layer the camera moves) ------------------------------- */ #world { position: absolute; top: 0; left: 0; transform-origin: 0 0; /* NOTE: deliberately no `will-change: transform` here. It promotes the layer to a cached bitmap that gets scaled like an image (blurry text on zoom). Without it the browser re-rasterises vector text crisply at the new scale. */ } /* ---- Axis ------------------------------------------------------------- */ #axis { position: absolute; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent 0%, var(--line) 6%, var(--line-glow) 50%, var(--line) 94%, transparent 100%); box-shadow: 0 0 12px rgba(var(--glow-rgb), 0.55), 0 0 40px rgba(var(--glow-rgb), 0.25); } /* ---- Markers (minor events only) -------------------------------------- */ /* Major events leave NO resting dot on the axis — their connector + card mark the spot and the focus ping does the glowing. The only dots that stay on the line are the labelled ticks and these small minor markers, which need a dot because they have no card. */ .marker.minor { position: absolute; width: 7px; height: 7px; margin-left: -3.5px; margin-top: -3.5px; border-radius: 50%; background: var(--accent); opacity: .6; } /* Minor events have no card, so their dot carries a small label just above the axis (tick labels sit below it, so the two never collide). */ .marker .minor-label { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: .03em; color: var(--text-dim); white-space: nowrap; } /* ---- Ticks (custom time dots, defined in data.js `ticks[]`) ----------- */ /* A short vertical mark on the axis carrying the only time text. */ .tick { position: absolute; z-index: 0; /* below everything else on the axis */ width: 2px; height: 16px; margin-left: -1px; margin-top: -8px; border-radius: 2px; background: linear-gradient(var(--line-glow), rgba(var(--glow-rgb), 0.1)); opacity: .55; } .tick-label { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } /* ---- Events (connector + card) ---------------------------------------- */ /* The node is a ZERO-WIDTH anchor sitting exactly at the event's x. The card is centred on it (left: -140 in JS) and the connector/ping ride x directly, so the card, its stem, and any tick at the same `at` all line up. */ .event { position: absolute; width: 0; transition: opacity .45s ease; } /* Stacking order: connectors (1) run BEHIND cards (4) so a higher lane's stem passes behind the cards it crosses and appears to emerge from behind them. Markers (3) sit above connectors but below cards. */ .marker { z-index: 3; } .event .connector { position: absolute; z-index: 1; left: 0; width: 2px; margin-left: -1px; background: linear-gradient(var(--line-glow), rgba(var(--glow-rgb), .15)); box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.5); } .event .card { position: absolute; z-index: 4; left: 0; width: 280px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; /* clip the media banner to the rounded corners */ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255,255,255,0.02); /* no backdrop-filter: it forces the card to rasterise and blurs when zoomed */ } /* Optional category accent: JS sets --cat on the card; a stripe rides the top. */ .event .card.has-cat { border-top: 3px solid var(--cat, var(--accent)); } .event .card .card-body { padding: 14px 16px; } /* Media banner (image), edge-to-edge above the body. */ .event .card .card-media { position: relative; /* anchors the caption overlay */ height: 130px; background: var(--bg-1) center/cover no-repeat; border-bottom: 1px solid var(--card-border); } /* Optional caption over the bottom of the image. */ .event .card .card-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 10px 5px; font-size: 10px; letter-spacing: .03em; color: rgba(255, 255, 255, 0.85); background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); } .event .card .card-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .event .card h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); letter-spacing: .01em; } .event .card h3 .card-icon { margin-right: 6px; } .event .card .date { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-soft); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Category pill in the eyebrow line. */ .event .card .cat-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10px; letter-spacing: .08em; /* ink auto-chosen by JS (readableInk) so the label stays legible on any category colour — dark text on light fills, white on dark. */ color: var(--cat-ink, #fff); background: var(--cat, var(--accent)); } .event .card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); } /* Row holding the optional actions (More info button + outbound link). */ .event .card .card-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; } /* Optional outbound action (data: `link` / `linkText`). */ .event .card .card-link { font-size: 12px; letter-spacing: .04em; color: var(--accent-soft); text-decoration: none; } .event .card .card-link:hover { text-decoration: underline; } /* "More info" button — opens the details panel (data: `details`). */ .event .card .card-more { font-family: var(--font); font-size: 12px; letter-spacing: .03em; color: var(--text); background: rgba(var(--accent-rgb), 0.14); border: 1px solid var(--card-border); border-radius: 999px; padding: 5px 13px; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .event .card .card-more:hover { background: rgba(var(--accent-rgb), 0.28); border-color: var(--accent-soft); } /* up = card sits above the axis; down = below. JS sets connector/card offsets. */ .event.dimmed { opacity: 0.18; } .event.focused .card { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 28px rgba(var(--accent-rgb), 0.5), 0 10px 40px rgba(0,0,0,.6); } .event.focused .marker-ping { position: absolute; left: 0; width: 26px; height: 26px; margin-left: -13px; margin-top: -13px; border-radius: 50%; border: 2px solid var(--accent-soft); animation: ping 1.6s ease-out infinite; } @keyframes ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } } /* ---- HUD / controls --------------------------------------------------- */ #hud { position: fixed; top: 22px; left: 0; right: 0; text-align: center; pointer-events: none; z-index: 10; transition: opacity .4s ease; } /* While focused on an event, the whole top bar (title, subtitle, legend) fades away for an immersive, chrome-free journey. */ #hud.gone { opacity: 0; } #hud.gone #legend { pointer-events: none; } #title { font-size: 26px; font-weight: 700; letter-spacing: .03em; text-shadow: 0 2px 18px rgba(0,0,0,.7); } #era { font-size: 13px; letter-spacing: .35em; text-transform: uppercase; color: var(--accent-soft); margin-top: 4px; } /* ---- Scrubber: clickable dot-rail + position counter ------------------ */ /* Sits bottom-centre; only shown while focused (where Start has stepped aside). */ #scrubber { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 12px; max-width: min(72vw, 760px); padding: 8px 16px; background: var(--ctrl-bg); border: 1px solid var(--card-border); border-radius: 999px; backdrop-filter: blur(4px); } #scrubDots { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; } .scrub-dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: var(--text-dim); opacity: .5; cursor: pointer; transition: transform .15s ease, opacity .2s ease, background .2s ease; } .scrub-dot:hover { opacity: 1; transform: scale(1.3); } .scrub-dot.on { background: var(--accent); opacity: 1; transform: scale(1.35); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.7); } #progress { font-size: 12px; letter-spacing: .1em; color: var(--text-dim); white-space: nowrap; } .ctrl { position: fixed; z-index: 20; font-family: var(--font); font-size: 14px; color: var(--text); background: var(--ctrl-bg); border: 1px solid var(--card-border); border-radius: 999px; padding: 11px 22px; cursor: pointer; backdrop-filter: blur(4px); transition: transform .15s ease, background .2s ease, box-shadow .2s ease; } .ctrl:hover { background: var(--ctrl-bg-hover); transform: translateY(-1px); } .ctrl.primary { left: 50%; bottom: 36px; transform: translateX(-50%); color: var(--on-accent); background: linear-gradient(180deg, var(--accent), var(--accent-deep)); border-color: var(--accent-soft); box-shadow: 0 0 22px rgba(var(--accent-rgb), .5); font-weight: 600; } .ctrl.primary:hover { transform: translateX(-50%) translateY(-1px); } #resetBtn { top: 66px; left: 24px; } /* sits below the ⌂ Charts link */ #exportPdf { top: 64px; right: 24px; } /* sits below the ▶ Play button */ /* ---- Prev / Next ------------------------------------------------------ */ .nav { position: fixed; bottom: 32px; z-index: 20; display: flex; align-items: center; gap: 8px; font-family: var(--font); font-size: 15px; color: var(--text); background: var(--ctrl-bg); border: 1px solid var(--card-border); border-radius: 999px; padding: 12px 20px; cursor: pointer; backdrop-filter: blur(4px); transition: transform .15s ease, background .2s ease, opacity .2s ease; } .nav:hover { background: var(--ctrl-bg-hover); } .nav-prev { left: 28px; } .nav-next { right: 28px; } .nav-prev:hover { transform: translateX(-3px); } .nav-next:hover { transform: translateX(3px); } .nav-arrow { font-size: 22px; line-height: 1; color: var(--accent-soft); } .nav:disabled { opacity: .3; cursor: default; transform: none; } #hint { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); font-size: 12px; color: var(--text-dim); letter-spacing: .04em; z-index: 10; pointer-events: none; transition: opacity .4s ease; } #hint kbd { background: var(--soft-fill); border: 1px solid var(--card-border); border-radius: 5px; padding: 1px 6px; font-family: var(--font); } [hidden] { display: none !important; } /* ---- Era / period bands (data.js `bands[]`) --------------------------- */ /* A translucent vertical column behind the timeline marking a span of `at`. */ .band { position: absolute; z-index: -1; /* behind the axis, ticks, and cards */ background: var(--band, rgba(var(--accent-rgb), 0.06)); border-left: 1px dashed var(--hairline); border-right: 1px dashed var(--hairline); pointer-events: none; } .band .band-label { position: absolute; top: 8px; left: 12px; right: 12px; /* bound to the band width so the text can wrap */ font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); white-space: normal; /* wrap instead of overflowing a narrow band */ overflow-wrap: break-word; line-height: 1.25; } /* ---- Category legend / filter chips (data.js `categories`) ------------ */ #legend { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; pointer-events: auto; /* HUD is pointer-events:none; re-enable here */ } .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 12px; color: var(--text); background: var(--ctrl-bg); border: 1px solid var(--card-border); border-radius: 999px; padding: 4px 12px; cursor: pointer; transition: opacity .2s ease, transform .1s ease; } .chip:hover { transform: translateY(-1px); } .chip .chip-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cat, var(--accent)); } .chip.off { opacity: .4; } .chip.off .chip-dot { background: var(--text-dim); } /* Line-category chip (map journey legs): a short bar instead of a dot. */ .chip-line .chip-line-ico { width: 16px; height: 3px; border-radius: 2px; background: var(--cat, var(--accent)); } .chip.off .chip-line-ico { background: var(--text-dim); } /* Events filtered out by the legend fade back and stop catching clicks. */ .event.filtered, .marker.filtered { opacity: .06; pointer-events: none; } /* ---- Play / tour button ----------------------------------------------- */ #playBtn { top: 22px; right: 24px; } #playBtn.playing { color: var(--on-accent); background: linear-gradient(180deg, var(--accent), var(--accent-deep)); border-color: var(--accent-soft); } /* When dragging, show a grabbing cursor over the whole stage. */ #stage.grabbing { cursor: grabbing; } /* ---- Details panel (data: `details`, markdown) ------------------------ */ #detail { position: fixed; inset: 0; z-index: 100; /* above all controls and the camera */ display: flex; align-items: center; justify-content: center; padding: 12px; /* tighter so the panel can grow taller */ } #detailBackdrop { position: absolute; inset: 0; background: rgba(2, 5, 12, 0.72); backdrop-filter: blur(2px); animation: fadeIn .25s ease; } #detailPanel { position: relative; display: flex; flex-direction: column; /* title | body (flex) | page-nav */ width: min(96vw, 1440px); /* 50% wider than the previous 960px cap */ max-height: 96vh; /* taller box -> more fits per page */ overflow: hidden; /* the body scrolls/paginates, not the panel */ background: linear-gradient(180deg, var(--panel-top), var(--bg-1)); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 20px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255,255,255,0.03); padding: 18px 38px 16px; /* slimmer top/bottom chrome */ animation: panelIn .26s cubic-bezier(.2,.7,.3,1); } #detailClose { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text-dim); background: var(--soft-fill); border: 1px solid var(--card-border); border-radius: 50%; cursor: pointer; transition: color .2s ease, background .2s ease; } #detailClose:hover { color: var(--text); background: var(--soft-fill-2); } #detailTitle { flex: 0 0 auto; /* padding-right (not margin) clears the ✕ button so the divider below still spans the full width — mirroring the Prev/Next bar's top border. */ margin: 0 0 12px; padding: 0 44px 9px 0; border-bottom: 1px solid var(--card-border); font-size: var(--detail-title); line-height: 1.2; letter-spacing: .01em; color: var(--ink); } /* Rendered markdown body — flexes to fill the panel; one page shows at a time. Everything below sizes in `em`, so it all scales from --detail-font. */ #detailBody { flex: 1 1 auto; min-height: 0; /* allow it to shrink inside the flex column */ overflow-y: auto; /* fallback scroll if a single block is huge */ font-size: var(--detail-font); line-height: 1.65; color: var(--text); } #detailBody h1, #detailBody h2, #detailBody h3, #detailBody h4, #detailBody h5, #detailBody h6 { margin: 1.2em 0 .5em; line-height: 1.3; color: var(--ink); } #detailBody h1 { font-size: 1.45em; } #detailBody h2 { font-size: 1.25em; } #detailBody h3 { font-size: 1.1em; } #detailBody p { margin: 0 0 .85em; } #detailBody ul, #detailBody ol { margin: 0 0 .85em; padding-left: 1.4em; } #detailBody li { margin: .25em 0; } #detailBody a { color: var(--accent-soft); } #detailBody strong { color: var(--ink); } #detailBody code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .9em; padding: 1px 5px; border-radius: 5px; background: var(--soft-fill); } #detailBody pre { margin: 0 0 .85em; padding: 12px 14px; border-radius: 10px; background: rgba(0,0,0,0.35); border: 1px solid var(--card-border); overflow-x: auto; } #detailBody pre code { padding: 0; background: none; } #detailBody blockquote { margin: 0 0 .85em; padding: 2px 14px; border-left: 3px solid var(--accent); color: var(--text-dim); } #detailBody hr { border: none; border-top: 1px solid var(--card-border); margin: 1.2em 0; } /* Page navigation (only shown when the content spans more than one page) */ #detailNav { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; /* shorter footer */ padding-top: 9px; border-top: 1px solid var(--card-border); } #detailNav button { font-family: var(--font); font-size: 14px; color: var(--text); background: rgba(var(--accent-rgb), 0.14); border: 1px solid var(--card-border); border-radius: 999px; padding: 6px 18px; cursor: pointer; transition: background .2s ease, border-color .2s ease; } #detailNav button:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.28); border-color: var(--accent-soft); } #detailNav button:disabled { opacity: .3; cursor: default; } #detailPage { font-size: 14px; letter-spacing: .12em; color: var(--text-dim); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes panelIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; } } /* ============================================================================ MAP ENGINE (map.js) — shown in body.map-mode. Uses the same CSS-variable palette as the timeline, so every theme recolours it for free. The Leaflet tile imagery itself can't be themed, but `mapFilter` in the chart data can wash it (e.g. sepia) to match. ============================================================================ */ #mapRoot { position: fixed; inset: 0; } /* The Leaflet surface fills the screen and owns its own stacking context (z-index:0 on a positioned element) so its internal panes/controls stay beneath the fixed UI layer (HUD, controls, panel) which sit at z-index >= 10. */ #map { position: absolute; inset: 0; z-index: 0; background: var(--bg-1); } .leaflet-container { background: var(--bg-1); font-family: var(--font); outline: none; } /* Attribution + any Leaflet controls, themed to blend in. */ .leaflet-control-attribution { background: var(--ctrl-bg) !important; color: var(--text-dim) !important; border-radius: 8px 0 0 0; padding: 2px 8px; font-size: 10px; } .leaflet-control-attribution a { color: var(--accent-soft) !important; } /* ---- Location pins (CSS divIcons — no image assets) ------------------- */ .map-pin { background: none; border: none; } .map-pin-dot { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--pin, var(--accent)); border: 2px solid var(--bg-1); box-shadow: 0 0 0 1px var(--pin, var(--accent)), 0 2px 6px rgba(0, 0, 0, .5); transition: transform .15s ease; } .map-pin:hover .map-pin-dot { transform: scale(1.25); } .map-pin-glyph { font-size: 11px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); } /* Pulsing ring over the currently-focused place. */ .map-highlight { background: none; border: none; } .map-highlight-ring { display: block; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--accent-soft); box-shadow: 0 0 16px rgba(var(--accent-rgb), .6); animation: mapPing 1.7s ease-out infinite; } @keyframes mapPing { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.05); opacity: 0; } } /* Journey route lines + the moving "traveler" dot at the growing tip. */ /* Route lines render on a canvas (see preferCanvas) for performance — no per-path CSS filter, which the SVG renderer recomputed every animation frame and lagged. */ /* Permanent / hover place labels. */ .leaflet-tooltip.map-tip { background: var(--ctrl-bg); color: var(--text); border: 1px solid var(--card-border); border-radius: 7px; padding: 3px 9px; font-size: 12px; letter-spacing: .02em; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); white-space: nowrap; } .leaflet-tooltip.map-tip::before { display: none; } /* drop the little arrow */ /* ---- Map HUD (title / subtitle / legend) ------------------------------ */ #mapHud { position: fixed; top: 22px; left: 0; right: 0; text-align: center; pointer-events: none; z-index: 10; } #mapTitle { font-size: 26px; font-weight: 700; letter-spacing: .03em; color: var(--ink); /* follows the theme */ /* Halo uses the theme's base background, so the title stays legible over the tiles in BOTH light and dark themes (light halo on light, dark on dark). */ text-shadow: 0 1px 4px var(--bg-0), 0 0 14px var(--bg-0); } #mapSubtitle { font-size: 13px; letter-spacing: .35em; text-transform: uppercase; color: var(--accent-soft); margin-top: 4px; text-shadow: 0 1px 8px var(--bg-0); } #mapLegend { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; pointer-events: auto; } /* ---- Side panel: the per-step "side view" ----------------------------- */ /* Height FITS the content (capped), and the top is set by JS to sit just below the HUD/legend so the panel never covers the toggle chips. The values here are fallbacks for before JS runs / if measurement is unavailable. */ #mapPanel { position: fixed; z-index: 30; top: 96px; max-height: calc(100dvh - 188px); /* leave room for the HUD above + nav below */ width: min(380px, 86vw); display: flex; flex-direction: column; overflow: hidden; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); } #mapPanel[data-side="right"] { right: 24px; } #mapPanel[data-side="left"] { left: 24px; } #mapPanelClose { position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-dim); background: var(--soft-fill); border: 1px solid var(--card-border); border-radius: 50%; cursor: pointer; transition: color .2s ease, background .2s ease; } #mapPanelClose:hover { color: var(--text); background: var(--soft-fill-2); } #mapPanelMedia { flex: 0 0 auto; height: 150px; background: var(--bg-1); } #mapPanelMedia img { display: block; width: 100%; height: 100%; object-fit: cover; } #mapPanelBody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px 20px; } #mapPanelEyebrow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } /* The scripture reference / verse above the title — deliberately prominent. */ #mapPanelEyebrow .map-ref { font-size: 17px; font-weight: 600; letter-spacing: .02em; color: var(--accent-soft); } #mapPanelEyebrow .map-step-count { font-size: 11px; letter-spacing: .1em; color: var(--text-dim); background: var(--soft-fill); border-radius: 999px; padding: 3px 10px; } #mapPanelTitle { margin: 0 0 12px; font-size: 22px; line-height: 1.25; color: var(--ink); } #mapPanelTitle .map-panel-icon { margin-right: 8px; } /* Summary + the inline detail share one readable text style. */ #mapPanelSummary, #mapPanelDetail { font-size: 14px; line-height: 1.6; color: var(--text-dim); } #mapPanelSummary p, #mapPanelDetail p { margin: 0 0 .8em; } #mapPanelSummary a, #mapPanelDetail a { color: var(--accent-soft); } #mapPanelSummary strong, #mapPanelDetail strong { color: var(--ink); } /* The inline detail sits a little apart from the summary, with its own headings. */ #mapPanelDetail { margin-top: 4px; } #mapPanelDetail h1, #mapPanelDetail h2, #mapPanelDetail h3 { margin: 1em 0 .4em; font-size: 15px; color: var(--ink); } #mapPanelDetail ul, #mapPanelDetail ol { margin: 0 0 .8em; padding-left: 1.3em; } #mapPanelDetail li { margin: .25em 0; } #mapPanelDetail blockquote { margin: 0 0 .8em; padding: 2px 12px; border-left: 3px solid var(--accent); color: var(--text-dim); } #mapPanelDetail hr { border: none; border-top: 1px solid var(--card-border); margin: 1em 0; } #mapPanelActions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; } .map-more { font-family: var(--font); font-size: 13px; letter-spacing: .03em; color: var(--text); background: rgba(var(--accent-rgb), 0.14); border: 1px solid var(--card-border); border-radius: 999px; padding: 6px 15px; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .map-more:hover { background: rgba(var(--accent-rgb), 0.28); border-color: var(--accent-soft); } .map-link { font-size: 13px; letter-spacing: .04em; color: var(--accent-soft); text-decoration: none; } .map-link:hover { text-decoration: underline; } /* ---- Bottom-left key: explains the circled map symbols (MAP.iconLegend) ---- */ #mapKey { position: fixed; z-index: 20; left: 24px; bottom: 92px; /* clears the Leaflet attribution + Prev button */ max-width: 240px; padding: 12px 14px; background: var(--ctrl-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(4px); pointer-events: none; /* a reference, not a control */ } .map-key-title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim); margin-bottom: 9px; } .map-key-list { display: grid; gap: 8px; } .map-key-row { display: flex; align-items: center; gap: 10px; } .map-key-dot { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 11px; line-height: 1; border-radius: 50%; background: var(--pin, var(--accent)); border: 2px solid var(--bg-1); box-shadow: 0 0 0 1px var(--pin, var(--accent)); } .map-key-label { font-size: 13px; line-height: 1.3; color: var(--text); } /* On small screens the key would crowd the controls — hide it there. */ @media (max-width: 640px) { #mapKey { display: none; } } /* ---- Map control positions (reuse .ctrl / .nav from the timeline) ----- */ #mapResetBtn { top: 66px; left: 24px; } /* below the ⌂ Library link */ #mapPlayBtn { top: 22px; right: 78px; } /* shifted left to make room for ⚙ */ #mapPlayBtn.playing { color: var(--on-accent); background: linear-gradient(180deg, var(--accent), var(--accent-deep)); border-color: var(--accent-soft); } /* ⚙ settings button (top-right) + the style menu it opens. */ #mapSettingsBtn { top: 22px; right: 24px; padding: 11px 14px; font-size: 16px; line-height: 1; } #mapSettingsBtn.on { background: var(--ctrl-bg-hover); border-color: var(--accent-soft); } #mapSettings { position: fixed; z-index: 30; top: 64px; right: 24px; width: 210px; padding: 12px; background: var(--ctrl-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .5); backdrop-filter: blur(4px); } .map-settings-title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim); margin-bottom: 10px; } .map-style-list { display: grid; gap: 6px; } .map-style-opt { text-align: left; font-family: var(--font); font-size: 13px; color: var(--text); background: var(--soft-fill); border: 1px solid var(--card-border); border-radius: 9px; padding: 8px 12px; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .map-style-opt:hover { background: var(--soft-fill-2); } .map-style-opt.on { color: var(--ink); background: rgba(var(--accent-rgb), .18); border-color: var(--accent-soft); } #mapHint { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); font-size: 12px; color: var(--text-dim); letter-spacing: .04em; z-index: 10; pointer-events: none; transition: opacity .4s ease; } #mapHint kbd { background: var(--soft-fill); border: 1px solid var(--card-border); border-radius: 5px; padding: 1px 6px; font-family: var(--font); } /* Back link + credit, matching the timeline's. */ #mapBackToGallery { position: fixed; z-index: 20; top: 22px; left: 24px; font-family: var(--font); font-size: 14px; text-decoration: none; color: var(--text); background: var(--ctrl-bg); border: 1px solid var(--card-border); border-radius: 999px; padding: 9px 18px; transition: transform .15s ease, background .2s ease; } #mapBackToGallery:hover { background: var(--ctrl-bg-hover); transform: translateY(-1px); } #mapCredit { position: fixed; z-index: 1; left: 0; right: 0; bottom: 10px; opacity: 0.7; pointer-events: none; } /* On narrow screens the side panel becomes a bottom sheet. */ @media (max-width: 640px) { #mapPanel { top: auto; left: 12px; right: 12px; bottom: 86px; width: auto; max-height: 46vh; } #mapPanel[data-side="left"], #mapPanel[data-side="right"] { left: 12px; right: 12px; } } /* ============================================================================ THEMES — selected by `theme: ""` in data.js. "midnight" is the default above; the ten names are: midnight · ember · forest · royal · crimson · ocean · slate · sunset · parchment(light) · arctic(light) Each block only redefines palette variables; nothing else changes. ============================================================================ */ /* 2) EMBER — warm charcoal, amber glow */ [data-theme="ember"] { --bg-0: #0c0805; --bg-1: #171008; --bg-haze: #2a1c0c; --line: #5c4327; --line-glow: #ff9f1c; --glow-rgb: 255, 159, 28; --accent: #ff8c42; --accent-rgb: 255, 140, 66; --accent-deep: #c2410c; --accent-soft: #ffb27a; --on-accent: #2a1404; --text: #f6ece0; --text-dim: #c2a98f; --ink: #fff7ee; --card-bg: rgba(34, 22, 12, 0.92); --card-border: rgba(220, 150, 80, 0.32); --ctrl-bg: rgba(46, 30, 16, 0.82); --ctrl-bg-hover: rgba(82, 52, 24, 0.9); --panel-top: #1b1207; } /* 3) FOREST — deep green, emerald */ [data-theme="forest"] { --bg-0: #040a07; --bg-1: #08140d; --bg-haze: #0f2418; --line: #2c5c41; --line-glow: #3ddc84; --glow-rgb: 61, 220, 132; --accent: #10b981; --accent-rgb: 16, 185, 129; --accent-deep: #0a7a55; --accent-soft: #5eead4; --on-accent: #04140d; --text: #e6f5ec; --text-dim: #93b8a4; --ink: #f1fff8; --card-bg: rgba(12, 30, 21, 0.92); --card-border: rgba(80, 200, 140, 0.3); --ctrl-bg: rgba(16, 38, 27, 0.82); --ctrl-bg-hover: rgba(28, 64, 46, 0.9); --panel-top: #0a1b12; } /* 4) ROYAL — indigo + violet axis, gold buttons */ [data-theme="royal"] { --bg-0: #0a0612; --bg-1: #150d24; --bg-haze: #241640; --line: #473a6b; --line-glow: #a78bfa; --glow-rgb: 167, 139, 250; --accent: #f4c95d; --accent-rgb: 244, 201, 93; --accent-deep: #b8860b; --accent-soft: #ffe6a8; --on-accent: #2a1c08; --text: #efe9fb; --text-dim: #a99bc9; --ink: #ffffff; --card-bg: rgba(28, 18, 46, 0.92); --card-border: rgba(167, 139, 250, 0.32); --ctrl-bg: rgba(34, 22, 56, 0.82); --ctrl-bg-hover: rgba(58, 40, 92, 0.9); --panel-top: #171029; } /* 5) CRIMSON — dark maroon, rose-red */ [data-theme="crimson"] { --bg-0: #0d0405; --bg-1: #1a080b; --bg-haze: #2e0f14; --line: #5c2730; --line-glow: #ff5c7a; --glow-rgb: 255, 92, 122; --accent: #ff4d6d; --accent-rgb: 255, 77, 109; --accent-deep: #a11d33; --accent-soft: #ff8fa3; --on-accent: #2a0509; --text: #f7e6e9; --text-dim: #c79aa2; --ink: #fff2f4; --card-bg: rgba(40, 14, 18, 0.92); --card-border: rgba(220, 90, 110, 0.32); --ctrl-bg: rgba(52, 18, 24, 0.82); --ctrl-bg-hover: rgba(92, 32, 42, 0.9); --panel-top: #1d0a0d; } /* 6) OCEAN — teal/cyan deep water */ [data-theme="ocean"] { --bg-0: #03090d; --bg-1: #06141c; --bg-haze: #0c2630; --line: #235c66; --line-glow: #22d3ee; --glow-rgb: 34, 211, 238; --accent: #14b8a6; --accent-rgb: 20, 184, 166; --accent-deep: #0e7490; --accent-soft: #5eead4; --on-accent: #03161a; --text: #e2f4f7; --text-dim: #8fb4bd; --ink: #f1fdff; --card-bg: rgba(10, 30, 38, 0.92); --card-border: rgba(70, 190, 200, 0.3); --ctrl-bg: rgba(14, 38, 48, 0.82); --ctrl-bg-hover: rgba(24, 64, 78, 0.9); --panel-top: #081a22; } /* 7) SLATE — neutral monochrome */ [data-theme="slate"] { --bg-0: #0a0c10; --bg-1: #12151c; --bg-haze: #1d222c; --line: #3a4250; --line-glow: #8aa0c0; --glow-rgb: 138, 160, 192; --accent: #64748b; --accent-rgb: 100, 116, 139; --accent-deep: #334155; --accent-soft: #cbd5e1; --on-accent: #ffffff; --text: #e8ecf2; --text-dim: #9aa6b8; --ink: #ffffff; --card-bg: rgba(22, 26, 34, 0.92); --card-border: rgba(148, 163, 184, 0.3); --ctrl-bg: rgba(28, 33, 42, 0.82); --ctrl-bg-hover: rgba(48, 56, 70, 0.9); --panel-top: #161a22; } /* 8) SUNSET — plum sky, coral & pink */ [data-theme="sunset"] { --bg-0: #0d0710; --bg-1: #1a0c1a; --bg-haze: #301630; --line: #5c2f52; --line-glow: #ff7eb3; --glow-rgb: 255, 126, 179; --accent: #ff8e72; --accent-rgb: 255, 142, 114; --accent-deep: #d6336c; --accent-soft: #ffc1ad; --on-accent: #2a0c10; --text: #f9e8f0; --text-dim: #cfa3bd; --ink: #fff1f7; --card-bg: rgba(38, 16, 36, 0.92); --card-border: rgba(255, 140, 160, 0.3); --ctrl-bg: rgba(48, 22, 46, 0.82); --ctrl-bg-hover: rgba(82, 38, 76, 0.9); --panel-top: #1c0e1c; } /* 9) PARCHMENT — LIGHT warm cream + sepia */ [data-theme="parchment"] { --bg-0: #e7dcc6; --bg-1: #f3ead8; --bg-haze: #fbf6ea; --line: #c9b896; --line-glow: #b07d3c; --glow-rgb: 176, 125, 60; --accent: #a4671f; --accent-rgb: 164, 103, 31; --accent-deep: #7c4a12; --accent-soft: #8a5a1c; --on-accent: #fff7ea; --text: #3a2f23; --text-dim: #6f6151; --ink: #241c12; --card-bg: rgba(255, 251, 243, 0.96); --card-border: rgba(150, 120, 80, 0.4); --ctrl-bg: rgba(255, 250, 240, 0.88); --ctrl-bg-hover: rgba(235, 224, 203, 0.96); --soft-fill: rgba(0, 0, 0, 0.06); --soft-fill-2: rgba(0, 0, 0, 0.1); --hairline: rgba(0, 0, 0, 0.12); --panel-top: #fbf6ea; } /* 10) ARCTIC — LIGHT cool ice + blue */ [data-theme="arctic"] { --bg-0: #dbe6f0; --bg-1: #eaf1f8; --bg-haze: #f6fafe; --line: #a8c0d8; --line-glow: #2f6fb0; --glow-rgb: 47, 111, 176; --accent: #2f7fd0; --accent-rgb: 47, 127, 208; --accent-deep: #1e5a99; --accent-soft: #1f6098; --on-accent: #ffffff; --text: #1c2a38; --text-dim: #566576; --ink: #0f1c29; --card-bg: rgba(255, 255, 255, 0.96); --card-border: rgba(90, 130, 180, 0.4); --ctrl-bg: rgba(255, 255, 255, 0.88); --ctrl-bg-hover: rgba(224, 234, 247, 0.96); --soft-fill: rgba(0, 0, 0, 0.05); --soft-fill-2: rgba(0, 0, 0, 0.09); --hairline: rgba(0, 0, 0, 0.1); --panel-top: #f6fafe; } /* ============================================================================ LANDING / GALLERY Shown when there is no ?chart= in the URL. app.js toggles body.chart-mode to swap between this and the timeline. Uses the default (midnight) palette. ============================================================================ */ /* The landing page scrolls; the timeline / map do not. */ body:not(.chart-mode):not(.map-mode) { overflow-y: auto; } #timelineRoot { display: none; } body.chart-mode #timelineRoot { display: block; } body.chart-mode #landing { display: none; } /* Map mode: reveal #mapRoot, hide the gallery (mirrors chart-mode). */ #mapRoot { display: none; } body.map-mode #mapRoot { display: block; } body.map-mode #landing { display: none; } #landing { min-height: 100%; background: radial-gradient(1200px 800px at 50% -10%, var(--bg-haze) 0%, var(--bg-1) 45%, var(--bg-0) 100%); } .landing-inner { max-width: 880px; margin: 0 auto; padding: clamp(48px, 9vh, 120px) 24px 28px; min-height: 100vh; display: flex; flex-direction: column; } .landing-head { text-align: center; margin-bottom: 36px; } .landing-title { margin: 0; font-size: clamp(34px, 6vw, 58px); font-weight: 700; letter-spacing: -0.5px; color: var(--ink); text-shadow: 0 0 40px rgba(var(--accent-rgb), 0.35); } .landing-verse { margin: 16px auto 0; max-width: 560px; font-size: clamp(15px, 2.4vw, 20px); font-style: italic; line-height: 1.55; color: var(--accent-soft); } .landing-verse cite { display: block; margin-top: 8px; font-style: normal; font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .landing-tagline { margin: 18px auto 0; max-width: 560px; font-size: clamp(15px, 2.2vw, 19px); line-height: 1.6; color: var(--text-dim); } .landing-notice { margin: 18px auto 0; max-width: 560px; padding: 12px 16px; border-radius: 12px; background: rgba(var(--accent-rgb), 0.12); border: 1px solid var(--card-border); color: var(--text); font-size: 15px; } /* ---- Search box ------------------------------------------------------- */ .search-wrap { position: relative; max-width: 560px; margin: 0 auto 34px; } .search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 16px; opacity: 0.7; pointer-events: none; } .search-input { width: 100%; padding: 15px 18px 15px 48px; font-family: var(--font); font-size: 17px; color: var(--text); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 999px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .search-input::placeholder { color: var(--text-dim); } .search-input:focus { border-color: var(--accent-soft); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18); } /* ---- Chart list ------------------------------------------------------- */ .chart-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .chart-card { display: flex; flex-direction: column; height: 100%; padding: 22px 22px 20px; text-decoration: none; color: inherit; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease; } .chart-card:hover { transform: translateY(-3px); border-color: var(--accent-soft); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 22px rgba(var(--accent-rgb), 0.25); } .chart-card-title { margin: 0 0 8px; font-size: 20px; line-height: 1.3; color: var(--ink); } .chart-card-blurb { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-dim); flex: 1; } .chart-tags { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .chart-tag { font-size: 12px; line-height: 1; text-transform: capitalize; color: var(--text-dim); background: var(--soft-fill); border: 1px solid var(--hairline); border-radius: 999px; padding: 5px 10px; } .chart-card-cue { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--accent-soft); } /* Small badge marking a card as a Map or Timeline (set from the manifest). */ .chart-type-badge { align-self: flex-start; margin-bottom: 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-soft); background: rgba(var(--accent-rgb), 0.12); border: 1px solid var(--card-border); border-radius: 999px; padding: 3px 10px; } .chart-empty { margin: 40px 0 0; text-align: center; color: var(--text-dim); font-size: 16px; } /* ---- Back-to-gallery link (chart mode only, top-left) ----------------- */ #backToGallery { position: fixed; z-index: 20; top: 22px; left: 24px; font-family: var(--font); font-size: 14px; text-decoration: none; color: var(--text); background: var(--ctrl-bg); border: 1px solid var(--card-border); border-radius: 999px; padding: 9px 18px; backdrop-filter: blur(4px); transition: transform .15s ease, background .2s ease; } #backToGallery:hover { background: var(--ctrl-bg-hover); transform: translateY(-1px); } /* ---- Attribution credit (shared by both modes) ----------------------- */ .credit { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); text-align: center; } /* Landing: in flow, pinned to the bottom of the page. */ #landingCredit { margin-top: auto; padding-top: 48px; } /* Timeline: fixed at the very bottom, beneath every other UI layer, and never intercepting pointer events so it can't interfere with panning. */ #timelineCredit { position: fixed; z-index: 1; left: 0; right: 0; bottom: 10px; opacity: 0.7; pointer-events: none; }