/* ===================================================================== THE UNFINISHED ATLAS · map overlay type + pin system thegeof.com · design lead pass, Sep 2026 --------------------------------------------------------------------- Drop this AFTER /atlas.css. It only touches the map overlay. Body prose stays Spectral. IBM Plex Mono stays for tiny DOM chrome (.hint, #marksdock, .repbtn) and appears NOWHERE inside the SVG. THE FONT LINK. Replace the existing Google line in index.html with this one (Spectral and Plex are still in it): Weights actually used: Cormorant Garamond 500i, 600i, 500, 600. Cormorant SC 500, 600. ===================================================================== */ :root{ --map-display : 'Cormorant Garamond', 'EB Garamond', Georgia, serif; --map-caps : 'Cormorant SC', 'Cormorant Garamond', Georgia, serif; --ink : #241b10; /* pin ink, territory names */ --ink-soft : #6b5c42; /* verbs, legends, the unmapped */ --ink-ghost : #8a7a5e; /* the faintest lettering */ --sheet : #efe6d2; /* the map sheet, = the halo colour */ --blaze : #c74e24; } /* --------------------------------------------------------------------- 1 · THE INK LAYER Stroke-only pin art multiplies onto the parchment so the paper grain and the walnut stains read THROUGH the lines. Text does not multiply: it carries its own knockout, and multiply can only darken. --------------------------------------------------------------------- */ .pin use, .mp-line, #compass, #cartouche .ct-art{ mix-blend-mode:multiply } /* --------------------------------------------------------------------- 2 · LEGIBILITY. Two devices, pick one per build. data-halo="vellum" (recommended) a soft parchment bloom, no rim data-halo="hairline" a 1.1u knockout stroke, paint-order stroke The old 4u flat stroke is what read as cheap. Both of these are roughly a quarter of its weight. --------------------------------------------------------------------- */ [data-halo="vellum"] .mp-t{ filter:url(#vellum) } [data-halo="vellum"] .mp-t--lg{ filter:url(#vellum-lg) } [data-halo="vellum"] .mp-t--k, [data-halo="vellum"] .pin--rough .mp-t{ filter:url(#vellum-strong) } [data-halo="hairline"] .mp-t, [data-halo="hairline"] .mp-t--k, [data-halo="hairline"] .mp-t--lg{ paint-order:stroke; stroke:var(--sheet); stroke-width:1.1; stroke-opacity:.9; stroke-linejoin:round; } [data-halo="hairline"] .mp-t--k, [data-halo="hairline"] .pin--rough .mp-t{ stroke-width:1.7 } [data-halo="hairline"] .mp-t--lg{ stroke-width:2.2 } /* During the camera scoop the filter would re-rasterise every frame. The developer adds .is-scooping to #map-scene on travel; labels are fading out anyway. */ .is-scooping .mp-t, .is-scooping .mp-t--k, .is-scooping .pin--rough .mp-t, .is-scooping .mp-t--lg{ filter:none !important } /* --------------------------------------------------------------------- 3 · TYPE ROLES (sizes are SVG user units, viewBox 0 0 1000 562) At a 1440px viewport 1u = 1.44px. At 2560px 1u = 2.56px. --------------------------------------------------------------------- */ /* territory name · the engraved italic */ .pin__name{ font-family:var(--map-display); font-style:italic; font-weight:600; font-size:27px; /* = 27 user units */ letter-spacing:.012em; fill:var(--ink); transition:fill .32s cubic-bezier(.6,.05,.25,1); } /* a smaller name, for a neighbouring country */ .pin__name--minor{ font-size:19px; font-weight:500; fill:#5b4c34; opacity:1 } /* the verb, alone at rest, in letterspaced small caps */ .pin__verb{ font-family:var(--map-caps); font-weight:600; font-size:10px; letter-spacing:.38em; fill:#5b4c34; opacity:.9; transition:fill .32s ease, opacity .32s ease; } .pin__verb--minor{ font-size:8.4px; letter-spacing:.26em; opacity:.8 } /* the trade. Absent at rest so the sheet stays quiet; on hover it inks in, left to right, the way a nib lays it down. */ .pin__gloss{ font-family:var(--map-caps); font-weight:600; font-size:8.2px; letter-spacing:.26em; fill:#5b4c34; opacity:0; clip-path:inset(0 100% 0 -6%); transition:opacity .30s ease .06s, clip-path .46s cubic-bezier(.55,.06,.28,1) .06s, fill .32s ease; } .pin__gloss--r{ clip-path:inset(0 -6% 0 100%) } .pin:hover .pin__gloss, .pin:focus-visible .pin__gloss, .pin.is-lit .pin__gloss{ opacity:1; fill:var(--blaze); clip-path:inset(0 -6% 0 -6%); } /* the hairline rule that draws under a name on hover */ .pin__rule{ fill:none; stroke:var(--blaze); stroke-width:.85; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; /* used with pathLength="1" */ opacity:0; transition:stroke-dashoffset .48s cubic-bezier(.6,.05,.25,1), opacity .18s; } /* the one-shot ring at the stake base */ .pin__ring{ fill:none; stroke:var(--blaze); stroke-width:.9; opacity:0; transform-box:fill-box; transform-origin:center; } /* THE UNMAPPED */ .mp-unmapped{ font-family:var(--map-caps); font-weight:600; font-size:11.5px; letter-spacing:.42em; fill:var(--ink-soft); opacity:.88; } .mp-dragons{ font-family:var(--map-display); font-style:italic; font-weight:500; font-size:13.5px; letter-spacing:.01em; fill:var(--ink-soft); opacity:.8; } /* YOU ARE HERE */ .mp-here{ font-family:var(--map-caps); font-weight:600; font-size:9.4px; letter-spacing:.34em; fill:var(--blaze); } /* the trial line under THE DARK WOOD */ .mp-trial{ font-family:var(--map-caps); font-weight:600; font-size:9px; letter-spacing:.32em; fill:var(--blaze); opacity:.9; } /* the plotted-route readout that follows the leader line */ .mp-league{ font-family:var(--map-caps); font-weight:600; font-size:8.8px; letter-spacing:.26em; fill:var(--blaze); } /* compass letter */ .mp-card{ font-family:var(--map-caps); font-weight:600; font-size:9.5px; letter-spacing:.2em; fill:var(--ink-soft); opacity:.8; } /* --------------------------------------------------------------------- 4 · THE CARTOUCHE --------------------------------------------------------------------- */ #cartouche{ pointer-events:none } #cartouche .ct-art{ color:var(--ink); opacity:.88 } .ct-eyebrow{ font-family:var(--map-caps); font-weight:600; font-size:11px; letter-spacing:.46em; fill:var(--ink-soft); opacity:.9; } .ct-title{ font-family:var(--map-display); font-style:italic; font-weight:600; font-size:54px; letter-spacing:-.004em; fill:var(--ink); } .ct-legend{ font-family:var(--map-caps); font-weight:600; font-size:9.2px; letter-spacing:.30em; fill:var(--ink-soft); opacity:.92; } .ct-key{ font-family:var(--map-display); font-style:italic; font-weight:500; font-size:12.5px; fill:var(--ink-soft); opacity:.9; } /* --------------------------------------------------------------------- 5 · PIN INK + THE SWAY --------------------------------------------------------------------- */ @property --sway{ syntax:''; inherits:true; initial-value:0deg } .pin{ cursor:pointer; color:var(--ink); --sway:0deg } .pin use{ transition:color .32s ease } .pin--dark{ color:var(--ink) } .pin--minor{ color:#5b4c34; opacity:.92 } /* hover / focus: the pennant sways once, the verb re-inks, a rule draws under the name, one ring opens at the base. */ .pin:hover .pin__name, .pin:focus-visible .pin__name, .pin.is-lit .pin__name{ fill:var(--blaze) } .pin:hover .pin__verb, .pin:focus-visible .pin__verb, .pin.is-lit .pin__verb{ fill:var(--blaze); opacity:1 } .pin:hover .pin__rule, .pin:focus-visible .pin__rule, .pin.is-lit .pin__rule{ opacity:.85; stroke-dashoffset:0 } .pin:hover use, .pin:focus-visible use, .pin.is-lit use{ animation:pin-sway 1.05s cubic-bezier(.4,.05,.2,1) 1 } .pin:hover .pin__ring, .pin:focus-visible .pin__ring, .pin.is-lit .pin__ring{ animation:ring-once 1.15s cubic-bezier(.2,.72,.28,1) 1 } @keyframes pin-sway{ 0% { --sway:0deg } 26% { --sway:-8deg } 58% { --sway:3.4deg } 82% { --sway:-1.1deg } 100%{ --sway:0deg } } @keyframes ring-once{ 0% { opacity:0; transform:scale(.35) } 22% { opacity:.55 } 100%{ opacity:0; transform:scale(1.9) } } /* the cartographer's cross keeps a slow breath instead of a sway */ #youare .pin__ring{ animation:here-breathe 3.4s ease-in-out infinite; opacity:.4 } @keyframes here-breathe{ 0%,100%{ transform:scale(.94); opacity:.42 } 50% { transform:scale(1.10); opacity:.14 } } /* --------------------------------------------------------------------- 6 · THE LEADER LINE (route plotted from YOU ARE HERE) --------------------------------------------------------------------- */ #leader{ fill:none; stroke:var(--blaze); stroke-width:1.2; stroke-dasharray:4 6; stroke-linecap:round; opacity:0; transition:opacity .3s ease; } #leader.on{ opacity:.85 } .mp-league{ opacity:0; transition:opacity .3s ease } .mp-league.on{ opacity:1 } /* --------------------------------------------------------------------- 7 · REDUCED MOTION --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .pin:hover use,.pin:focus-visible use,.pin.is-lit use, .pin:hover .pin__ring,.pin:focus-visible .pin__ring,.pin.is-lit .pin__ring, #youare .pin__ring{ animation:none } .pin__rule{ transition:none } } /* ===================================================================== 8 · TERRITORY PAGE CHROME (full-viewport scenes) Verbatim tokens for the territory developer. Scoped to . ===================================================================== */ .scene{ --sc-display : 'Cormorant Garamond', Georgia, serif; --sc-caps : 'Cormorant SC', Georgia, serif; --sc-prose : 'Spectral', Georgia, serif; --sc-mono : 'IBM Plex Mono', Consolas, monospace; --sc-cream : #f0e7d4; --sc-cream-2 : #d8cdb6; --sc-night : #0d0a08; --sc-pillow : radial-gradient(115% 150% at 50% 50%, rgba(9,7,5,.76) 0%, rgba(9,7,5,.62) 46%, rgba(9,7,5,.30) 76%, rgba(9,7,5,0) 100%); background:var(--sc-night); color:var(--sc-cream); } /* the plate: full-bleed, idle loop, never a frame or a mount */ .sc-plate{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--sc-night) } .sc-plate img,.sc-plate video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.0); transform-origin:var(--sc-focus,50% 50%); transition:transform 2.4s cubic-bezier(.6,.05,.25,1); } .sc-plate::after{ /* vignette, so cream type always holds */ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(130% 110% at 50% 45%, transparent 42%, rgba(9,7,5,.55) 100%); } /* the pillow: a soft lozenge of night, NOT a card. No border, no radius. */ .sc-pillow{ position:relative; max-width:34rem; padding:2.1rem 2.6rem; background:var(--sc-pillow); -webkit-backdrop-filter:blur(2.5px) saturate(.88); backdrop-filter:blur(2.5px) saturate(.88); } .sc-pillow > *{ text-shadow:0 1px 16px rgba(9,7,5,.75) } .sc-pillow p{ font-family:var(--sc-prose); font-weight:300; font-size:1.06rem; line-height:1.72; color:var(--sc-cream-2); } .sc-pillow p + p{ margin-top:.9em } .sc-pillow strong{ font-weight:600; color:var(--sc-cream) } /* type roles inside a scene */ .sc-h1{ font-family:var(--sc-display); font-style:italic; font-weight:600; font-size:clamp(3rem,7.4vw,6.2rem); line-height:.98; letter-spacing:-.006em; color:var(--sc-cream); text-wrap:balance; } .sc-verb{ font-family:var(--sc-caps); font-weight:600; font-size:.7rem; letter-spacing:.38em; color:var(--terr,#c74e24); } .sc-key{ font-family:var(--sc-caps); font-weight:600; font-size:.62rem; letter-spacing:.32em; color:var(--sc-cream-2); opacity:.72; } .sc-lede{ font-family:var(--sc-display); font-style:italic; font-weight:500; font-size:clamp(1.15rem,2.1vw,1.6rem); line-height:1.5; color:var(--sc-cream); } .sc-chrome{ /* coordinates, file numbers, ONLY */ font-family:var(--sc-mono); font-weight:400; font-size:.58rem; letter-spacing:.22em; color:var(--sc-cream-2); opacity:.5; } /* the top bar over a scene: a scrim, never a solid rail */ .sc-bar{ position:fixed; top:0; left:0; right:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.8rem; pointer-events:none; background:linear-gradient(to bottom, rgba(9,7,5,.62) 0%, rgba(9,7,5,.28) 52%, transparent 100%); } .sc-bar > *{ pointer-events:auto } .sc-bar .wm img{ height:2.1rem; width:auto; display:block; filter:drop-shadow(0 1px 10px rgba(0,0,0,.7)) } .sc-back{ font-family:var(--sc-caps); font-weight:600; font-size:.64rem; letter-spacing:.32em; color:var(--sc-cream); opacity:.74; text-decoration:none; display:inline-flex; align-items:center; gap:.6em; transition:opacity .3s ease, color .3s ease; } .sc-back:hover{ opacity:1; color:var(--terr,#c74e24) } .sc-back .gl{ font-size:.9em; opacity:.8 } /* route stops become in-scene waypoints: a cream flag planted in the plate */ .sc-stop{ position:absolute; z-index:10; left:var(--x,50%); top:var(--y,50%); opacity:0; transform:translateY(14px); transition:opacity .9s cubic-bezier(.6,.05,.25,1), transform .9s cubic-bezier(.6,.05,.25,1); } .sc-stop.reached{ opacity:1; transform:none } .sc-stop .flag{ width:34px; height:34px; color:var(--sc-cream); overflow:visible; display:block } .sc-stop .num{ font-family:var(--sc-caps); font-weight:600; font-size:.6rem; letter-spacing:.3em; color:var(--terr,#c74e24); display:block; margin-bottom:.5rem; } .sc-stop .sc-pillow{ margin-top:.6rem; max-width:26rem } /* the one interaction, bottom centre */ .sc-act{ position:fixed; left:50%; bottom:2.2rem; z-index:30; transform:translateX(-50%); font-family:var(--sc-caps); font-weight:600; font-size:.66rem; letter-spacing:.34em; color:var(--sc-cream); background:rgba(9,7,5,.45); border:1px solid rgba(240,231,212,.28); border-radius:999px; padding:.95em 2.1em; text-decoration:none; cursor:pointer; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:border-color .3s, background .3s, color .3s; } .sc-act:hover{ border-color:var(--terr,#c74e24); background:var(--terr,#c74e24); color:#faf7f0 } /* ===================================================================== 9 · THE CAMERA SCOOP (see SPEC.md §5 for the full timing sheet) ===================================================================== */ .stage{ --scoop-x:50%; --scoop-y:50%; transform-origin:var(--scoop-x) var(--scoop-y); } .is-scooping .stage{ animation:scoop-dive 880ms cubic-bezier(.65,0,.35,1) 120ms both; will-change:transform, filter; } @keyframes scoop-dive{ 0% { transform:scale(1) rotate(0deg); filter:blur(0) } 62% { filter:blur(.5px) } 100%{ transform:scale(3.4) rotate(-.8deg); filter:blur(2.2px) } } .is-scooping .fog{ opacity:.15; transition:opacity 260ms ease } .is-scooping .pin:not(.is-target), .is-scooping #leader, .is-scooping .mp-unmapped, .is-scooping .mp-dragons, .is-scooping #cartouche, .is-scooping #compass, .is-scooping #moth{ opacity:0; transition:opacity 180ms ease-out } .is-scooping .pin.is-target .pin__name, .is-scooping .pin.is-target .pin__verb{ animation:label-let-go 420ms cubic-bezier(.6,.05,.25,1) 340ms both; } @keyframes label-let-go{ to{ opacity:0 } } /* the destination plate, riding on top, still pushing through the cut */ .scoop-plate{ position:fixed; inset:0; z-index:150; opacity:0; pointer-events:none; background:var(--sc-night,#0d0a08); } .scoop-plate img{ width:100%; height:100%; object-fit:cover } .is-scooping .scoop-plate{ animation:scoop-plate 1280ms cubic-bezier(.5,0,.32,1) 620ms both; } @keyframes scoop-plate{ 0% { opacity:0; transform:scale(1.22); filter:blur(3px) } 40% { opacity:1; transform:scale(1.11); filter:blur(1.6px) } 100%{ opacity:1; transform:scale(1.06); filter:blur(1.4px) } } /* the destination page paints this state on first frame, then settles */ .scene.arriving .sc-plate img, .scene.arriving .sc-plate video{ transform:scale(1.06); filter:blur(1.4px) } .scene .sc-plate img,.scene .sc-plate video{ transition:transform 760ms cubic-bezier(.16,.84,.3,1), filter 620ms ease-out; } .scene.arriving .sc-bar, .scene.arriving .sc-pillow, .scene.arriving .sc-act{ opacity:0 } .scene .sc-bar { transition:opacity .5s ease 340ms } .scene .sc-pillow{ transition:opacity .8s ease 300ms } .scene .sc-act { transition:opacity .5s ease 740ms, border-color .3s, background .3s, color .3s } /* coming BACK to the atlas */ .stage.returning{ animation:scoop-return 1100ms cubic-bezier(.22,.61,.24,1) both } @keyframes scoop-return{ 0% { transform:scale(3.4) rotate(-.8deg); filter:blur(2.4px) } 100%{ transform:scale(1) rotate(0deg); filter:blur(0) } } .returning-in .pin, .returning-in #cartouche, .returning-in .mp-unmapped, .returning-in .mp-dragons{ animation:ink-in 620ms cubic-bezier(.6,.05,.25,1) both; animation-delay:calc(560ms + var(--i,0) * 44ms); } @keyframes ink-in{ from{ opacity:0; filter:blur(2.4px) } to{ opacity:1; filter:blur(0) } } @media (prefers-reduced-motion: reduce){ .is-scooping .stage,.stage.returning{ animation:none } .is-scooping .scoop-plate{ animation:scoop-plate-rm 220ms linear 0ms both } @keyframes scoop-plate-rm{ from{opacity:0} to{opacity:1;transform:none;filter:none} } .returning-in .pin,.returning-in #cartouche, .returning-in .mp-unmapped,.returning-in .mp-dragons{ animation:none } .scene.arriving .sc-plate img,.scene.arriving .sc-plate video{ transform:none; filter:none } }