/* ═══════════════════════════════════════════════════════════════════════════ HAPPY TRAILS — one stylesheet for the whole site version 3.1 Every page loads this file and nothing else. Which page is which is decided by a class on : body.page-map the main map (index.html) body.page-trail a single trail's page (beltline.html) body.page-text a reading page (Trails / About / Contact) The two map pages share their whole interface — the navigation bar, the corner title, the left rail, the panel, the layer switches, the legend, the round buttons. Those are written once here, with both pages' selectors listed together, so a change lands on both. Where the two genuinely want different values, the variable is declared once below and overridden in the page block that wants something else. HOW IT IS LAID OUT ① the variables, all of them, in one block ② the three page blocks, each overriding only what it must ③ the shared interface, then what belongs to one page or the other ④ the reading pages ⑤ the responsive rules, last, so they win ═══════════════════════════════════════════════════════════════════════════ */ /* ═══ ① THE VARIABLES ══════════════════════════════════════════════════════ Change a value here and it changes everywhere it is used. The twelve at the bottom of this block are the ones the two map pages disagree about; their value here is the default and section ② overrides it. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* THE NAVIGATION BAR */ --bar-height: 40px; --bar-pad: clamp(14px, 3vw, 30px); --bar-bg: #ffffff; --bar-line: rgba(0,0,0,.10); --bar-text: #3d3d3d; --bar-brand: #6cc24a; --bar-here: #e8503a; --bar-brand-size: 17px; --bar-link-size: 11.5px; --bar-link-gap: clamp(11px, 2.2vw, 22px); /* SPACING */ --edge-gap: clamp(14px, 3vw, 34px); --gutter: 18px; /* THE TOP BAND — the corner title and its link buttons */ --title-height: 44px; --title-links: 35px; --band-top: calc(var(--title-height) + var(--title-links) + var(--title-pad) * 2); --trail-link-size: 9.5px; --trail-link-gap: 7px; --trail-link-top: 11px; /* THE LEFT RAIL AND ITS PANEL */ --rail-top: 8px; --rail-gap: 10px; --compass-size: 52px; --compass-arrow: 22px; --compass-drop: 8px; --panel-width-wide: min(438px, 88vw); --panel-gap: 12px; --panel-radius: 16px; --panel-slide: .34s; --panel-ease: cubic-bezier(.22, 1, .36, 1); /* THE ROUND BUTTONS AND CONTROLS */ --control-size: 46px; --control-gap: 10px; --button-shadow: 0 4px 16px rgba(0,0,0,.28); --button-fade: .2s; /* THE LEGEND AND THE LAYER SWITCHES */ --swatch-width: 44px; --swatch-height: 20px; --switch-columns: 2; /* THE MAIN MAP'S layer panel only. A trail page's switches are one per row at every size — it has two or three of them, and in two columns they were a pair of narrow boxes with their names broken across lines for a panel that was no shorter for it. */ --switch-off: rgba(255,255,255,.20); --switch-slide: .22s; --switch-gap: 7px; /* COLOURS */ --accent-soft: #e0a323; /* ── THE TRAIL COLOURS ──────────────────────────────────────────────── The line you walk along, and the line on the elevation graph, are drawn in the same green the trails are drawn in on the main map — so a route means the same colour wherever you meet it. A WISHFUL trail — one that does not exist yet — is purple instead, all the way through: its route, its elevation line, its readouts and its kicker. That is switched on by one class, body.trail-wishful, near the bottom of this file; a page opts in with SETTINGS.trailKind = "wishful". Nothing else has to change. */ --route-line: #4ecf4e; /* built trails, on the map and the graph */ --route-line-wish: #e84fff; /* trails that are only proposed */ --route-glow: rgba(78,207,78,.55); --route-glow-wish: rgba(232,79,255,.55); --text: #f4f2ee; --text-quiet: #a9a49c; --text-faint: rgba(255,255,255,.45); --panel: rgba(18,20,23,.78); --panel-edge: rgba(255,255,255,.13); --shadow: 0 18px 50px rgba(0,0,0,.45); --map-backdrop: #1e1e1e; --backdrop: #efe8d8; --pin-green: #6cc24a; --pin-purple: #c78bf0; --pin-text: #14310c; --pin-text-purple: #2b0f3d; --wishful: #8e5bd0; --wishful-edge: rgba(158,110,222,.62); --wishful-panel: rgba(31,22,44,.66); /* the same two, lighter, for a note that sits INSIDE a dark card — see .tm-judgement. A dark panel on a dark card reads as a hole. */ --wishful-panel-soft:rgba(255,255,255,.055); --wishful-edge-soft: rgba(158,110,222,.34); --wishful-kicker: #c39bf0; /* on the dark panel, where pale reads */ /* THE SAME PURPLE THE WISHFUL TRAILS THEMSELVES ARE DRAWN IN. The pale lavender above is right on a dark panel and wrong over the map, where the background is the artwork's own light paper and a pale tint of anything simply disappears. The type-and-length line over the map takes this one instead: it is the trail's own colour, so the line naming the trail and the line drawn on the map now agree. */ --wishful-kicker-ink:#e84fff; /* TYPE */ --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Iowan Old Style", Georgia, "Times New Roman", serif; --note-size: 11.5px; /* EVERYTHING ELSE — the trail page's cards, media, blur and elevation graph, and the map pin sizes. Named as they were. */ --arrow-bg: rgba(8,10,12,.55); --arrow-bg-hover: var(--accent); --arrow-size: 32px; --band-bottom: calc(var(--readout-row) + var(--readout-gap) + var(--profile-height) + var(--readout-drop)); --caption-fade: .22s; /* the waypoint stepper, bottom left */ --stepper-size: 34px; --stepper-gap: 8px; --stepper-drop: 10px; /* how far above the readouts it sits */ --stepper-bg: rgba(255,255,255,.10); --stepper-bg-hover: rgba(255,255,255,.22); --stepper-edge: rgba(255,255,255,.16); --stepper-ink: rgba(255,255,255,.78); --stepper-off: .28; /* opacity when there is nowhere to go */ /* the button where one trail meets another */ --cross-bg: rgba(38,86,140,.86); --cross-bg-hover: rgba(52,112,178,.96); --cross-edge: rgba(150,196,240,.45); --shot-height: 132px; /* the picture at the top of a trail card */ /* Buy me a coffee. Their own yellow, warmed slightly to sit with the site's amber rather than shout over it. */ --over-veil-ink: #f2f0ea; /* title text over the top veil */ --over-veil-kicker: #e0a323; --coffee-nav: #e8503a; /* in the white bar — the site's orange */ --coffee-nav-hover: #c0392b; --coffee-ink: #ffdd55; /* on the dark panel — their own yellow */ --coffee-ink-hover: #ffe680; --coffee-bg: rgba(255,221,85,.07); --coffee-edge: rgba(255,221,85,.24); /* the picture behind the opening panel, and the veil that keeps its text readable. Subtle on purpose: enough to see what the trail looks like, not so much that the words fight it. */ --opening-veil: .66; --opening-veil-top: .46; /* how much clear picture there is above the kicker and below the hint. The panel's own padding surrounds the WORDS; this is picture with nothing on it at all, and it is the difference between a photograph you can see and a dark background you assume is one. */ --opening-picture: clamp(22px, 4.5vh, 54px); /* the "scroll for more" line at the foot of a card, on a phone */ /* the "turn your phone" screen */ --turn-veil: rgba(8,10,12,.92); --caption-size: 11px; --card-blur: 10px; --card-body: 14px; /* the paragraphs inside a card. Every tenth of a millimetre off this is another line of text in the same card, which is the whole reason it is a variable. */ /* Everything in a card that is NOT the picture, added up: the padding, the heading, the text window, the pager, the facts. The picture takes what is left of the column, so this number is how the card is kept inside it. ANYTHING ADDED TO A CARD HAS TO BE ADDED HERE TOO, or the card grows past the bottom of its column and starts overhanging the screen. */ --card-chrome: 300px; --card-lean: .1; --card-lift: 50%; --card-line: 1.65; --card-media: 4/3; --card-media-min: 130px; --card-panel: rgba(18,20,23,.66); --card-radius: 18px; --card-sit: 50%; --card-text-lines: 10; /* the most lines a card will show at once. The engine shows fewer on a short window — see cardFitsWindow — so this is a ceiling, not a promise. It was 7, which on a tall screen left the card ending well above the readouts with the text still in pages. */ --card-title: 24px; --card-width: min(540px, 44vw); --close-fade: .15s; /* the room a card has: everything between where its column starts and the readouts at the foot of the screen */ --column-height: calc(100vh - var(--bar-height) - var(--card-top) - var(--band-bottom)); /* how much is kept clear above the card. On a narrow screen the card is full width and this has to clear the corner title; on a wide one it does not, and the responsive block near the end of this file cuts it right down. */ --card-top: var(--band-top); --dot-off: rgba(255,255,255,.42); --dot-on: #fff; --dot-size: 6px; --handle-colour: #fff; --handle-grip: 30px; --handle-hit: 44px; --handle-line: 2px; --hint-bob-speed: 1.9s; --knob-colour: #fff; /* the buffering spinner on a video */ --spinner-size: 34px; --spinner-weight: 3px; --spinner-track: rgba(255,255,255,.22); --spinner-lit: #fff; --spinner-speed: .8s; --knob-size: 7px; --maplink-size: 9.5px; --media-ease: cubic-bezier(.4, 0, .2, 1); --media-slide: .45s; --pin-lift: 1.08; --pin-radius: 999px; --pin-size: 13px; --profile-height: 58px; --profile-line: rgba(255,255,255,.78); --reader-fade: .18s; --readout-drop: 26px; --readout-gap: 10px; --readout-row: 42px; --readout-size: clamp(17px, 2.3vw, 24px); --screen-veil-centre: .34; --screen-veil-edge: .70; /* how far down the opening screen its darkening has faded to nothing. The panel travels up and off, and without this its bottom edge would sweep up the map as a hard horizontal line. Below this point there is no veil, so there is no edge to see. */ --screen-veil-corner: .30; /* at the very top, where the title is */ --screen-veil-ends: 86%; --scroll-length: 900vh; --shade-bottom: .55; --shade-edges: .20; /* A short, light version of the bottom band, so the corner title has something to sit on. Deliberately much weaker than the bottom — that one carries readouts over a busy map, this one only has to lift a heading. */ --shade-top: .30; --shade-top-depth: 13%; --text-turn: .3s; --trail-ahead: rgba(60,45,25,.55); --trail-outline: rgba(255,255,255,.55); --trail-walked: var(--route-line); --walker-ring: 76px; --walker-size: 16px; --walker-speed: 2.4s; --wpdot-colour: rgba(255,255,255,.9); --wpdot-ring: rgba(0,0,0,.45); --wpdot-size: 5px; /* THE READING PAGES — Trails, About, Contact */ --read-width: min(940px, 100%); --read-top: 46px; /* below the navigation bar */ --read-gap: 46px; /* between one section and the next */ --card-min: 260px; /* a trail card stops shrinking here and the grid drops to one column */ /* ── THE TWELVE THE TWO MAP PAGES DISAGREE ABOUT ────────────────────────── These are the defaults; section ② below changes them per page. They are kept together rather than scattered so it is obvious which values are page-dependent and which are the whole site's. */ /* ╔══════════════════════════════════════════════════════════════════════╗ ║ THE ACCENT COLOUR — CHANGE IT HERE AND NOWHERE ELSE ║ ║ ║ ║ This red is the site's one accent: the walking point, the active ║ ║ navigation link, the route buttons on the main map, every hover. ║ ║ Everything that uses it says var(--accent), so this line and the ║ ║ map-page override 20-odd lines below are the only two places a red ║ ║ is written down. Change both and the whole site changes. ║ ║ ║ ║ NOT the trail line — that is --route-line, below, and it is green. ║ ╚══════════════════════════════════════════════════════════════════════╝ */ --accent: #c0392b; /* map page: #e8503a — see body.page-map */ --map-edge-shadow: none; /* map page: 0 0 90px rgba(0,0,0,.55) */ --over-map-ink: #2c2418; /* map page: #f4f2ee */ --over-map-kicker: #94661a; /* map page: #e0a323 */ --over-map-quiet: #7b6a4c; /* map page: #b9b2a4 */ --panel-bg: rgba(20,22,26,.90); /* map page: rgba(20,22,26,.94) */ --panel-bg-blur: 20px; /* map page: 0px */ --panel-blur: 16px; /* map page: 10px */ --panel-width: min(310px, 76vw); /* map page: min(320px, 82vw) */ --switch-height: 20px; /* map page: 18px */ --switch-width: 34px; /* map page: 30px */ --title-pad: 22px; /* map page: 20px */ } /* ═══ ② THE THREE KINDS OF PAGE ════════════════════════════════════════════ Each block overrides only what it must. body.page-map and body.page-trail both get the map interface; body.page-text gets none of it. ═══════════════════════════════════════════════════════════════════════════ */ /* the main map — light interface over a dark drawing */ body.page-map{ --accent: #e8503a; --map-edge-shadow: 0 0 90px rgba(0,0,0,.55); --over-map-ink: #f4f2ee; --over-map-kicker: #e0a323; --over-map-quiet: #b9b2a4; --panel-bg: rgba(20,22,26,.94); --panel-bg-blur: 0px; --panel-blur: 10px; --panel-width: min(320px, 82vw); --switch-height: 18px; --switch-width: 30px; --title-pad: 20px; } /* a single trail's page — dark interface over pale paper. The variables in ① are already this page's values, so there is nothing to restate; its layout rules are with the rules further down. */ /* ═══ ③ THE INTERFACE ══════════════════════════════════════════════════════ Shared rules list both pages' selectors together; the rest belongs to one page or the other and is prefixed ht- (the main map) or tm- (a trail). ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ SCROLLING TRAIL MAP — stylesheet version 5.3 Everything you are likely to want to change lives in the :root block below. Change a value there and it changes everywhere it is used. Below that block is plain layout, grouped and labelled, which you can ignore unless you want to rearrange things. The first group in :root is SCREEN REGIONS. Nothing on this page carries its own private offset any more — every element is placed against one of a few named regions, so moving an edge moves everything that leans on it. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ LAYOUT — from here down it is plumbing ═══════════════════════════════════════════════════════════════════════════ */*, *{ box-sizing:border-box; } /* ── ─────────────────────────────────────────────────────────────── What every page shares is here; what only one kind of page wants is in the three blocks below it. That split matters more than it looks: the main map fills the window and must NOT scroll, while a trail page IS a long scroll — scrolling is the whole mechanism, it is what walks you along the route. When the two stylesheets were merged into one file both pages had a plain `body` rule, the map's `overflow:hidden` won, and the trail page could not be scrolled at all. Hence the scoping. */ /* ── THE SCROLLBAR KEEPS ITS SEAT ──────────────────────────────────────── On a reading page whose length changes — filter the Wishful thinking list and it can go from twelve cards to one — the scrollbar appears and vanishes with it, and on Windows and Linux, where the scrollbar takes real width, the whole page jumps sideways by fifteen pixels every time. It is a small jump and it is the most distracting thing on the page, because everything moves at once and none of it moved for a reason. `scrollbar-gutter: stable` reserves the space whether or not there is anything to scroll, so the page's width stops depending on its height. It costs nothing where scrollbars are overlaid (macOS, phones) — there is no width to reserve. The fallback for browsers that do not know the property is the older trick of always showing the track, which is uglier and does the same job. Only on the reading pages. The map pages do not scroll at all, so there is nothing to reserve and a permanent gutter beside a full-bleed map would be a stripe of nothing down the edge of the artwork. */ html:has(body.page-text){ scrollbar-gutter:stable; } @supports not (scrollbar-gutter: stable){ html:has(body.page-text){ overflow-y:scroll; } } body{ margin:0; color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overscroll-behavior:none; } /* a trail page: it scrolls, and the ground around the artwork is its own paper colour so panning past the edge is not a jolt */ body.page-trail{ background:var(--backdrop); overscroll-behavior-y:none; } /* ── the map ───────────────────────────────────────────────────────────── #tm-stage is a fixed window; #tm-world is the artwork, moved by one transform. The blur at the start and finish is applied to the stage rather than the artwork, so it is measured in screen pixels and does not grow and shrink with the zoom. The engine sets --map-blur; the stylesheet only says where it goes and how strong it may get. */ /* ── the site's navigation bar ──────────────────────────────────────────── Shared with the other pages on the site, so it is deliberately plain: an opaque strip that owns the top --bar-height of the window. Everything else on the page starts below it, which is why nothing else has to know it is there. Change --bar-height and the map, the title and the cards all follow. Its z-index is above every other layer so a card can never ride over it. */#tm-bar, #ht-bar{ position:fixed; top:0; left:0; right:0; height:var(--bar-height); z-index:40; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 var(--bar-pad); background:var(--bar-bg); border-bottom:1px solid var(--bar-line); } #tm-barBrand{ font:700 var(--bar-brand-size)/1 var(--font-body); letter-spacing:.01em; color:var(--bar-brand); text-decoration:none; white-space:nowrap; } #tm-barNav{ display:flex; gap:var(--bar-link-gap); } #tm-barNav a{ font:500 var(--bar-link-size)/1 var(--font-body); letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; color:var(--bar-text); text-decoration:none; transition:color var(--button-fade); } #tm-barNav a:hover{ color:var(--bar-here); } #tm-barNav a.tm-here{ color:var(--bar-here); text-decoration:underline; text-underline-offset:4px; } /* ── the map ───────────────────────────────────────────────────────────── Everything below sits under the bar rather than behind it. The engine reads the stage's own size when it works out what to centre, so the walker lands in the middle of the map area and not the middle of the window. */ #tm-stage{ position:fixed; top:var(--bar-height); left:0; right:0; bottom:0; z-index:0; overflow:hidden; --map-blur:0px; /* set frame by frame from the engine */ } /* the filter is only switched on while there is actually something to blur — an always-on filter would cost a rendering pass during the whole walk */ #tm-stage.tm-blurred{ filter:blur(var(--map-blur)); }#tm-world, #ht-world{ position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; box-shadow:var(--map-edge-shadow); } #tm-world > svg, #tm-world > img{ display:block; } #tm-trail{ position:absolute; top:0; left:0; overflow:visible; pointer-events:none; } #tm-labels{ position:absolute; top:0; left:0; /* --tag-fade is written by the engine on every frame of the pull-back. The names hold their size on screen, so once the whole map is in view a dozen of them at full size cover the map they are naming; they fade out and leave the route, the rings and the picture. See draw(). */ --tag-fade:1; } /* ── waypoint labels and the moving point ────────────────────────────── */ .tm-label{ position:absolute; transform-origin:50% 50%; } /* a chip you can click to bring its waypoint card back */ .tm-label.tm-clickable{ cursor:pointer; } .tm-label.tm-clickable .tm-tag{ transition:background var(--button-fade), color var(--button-fade); } .tm-label.tm-clickable:hover .tm-tag{ background:var(--accent); color:#fff; border-color:transparent; } /* the moving point is decoration — never let it eat a click */ #tm-walker{ pointer-events:none; } .tm-label .tm-dot{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:11px; height:11px; border-radius:50%; background:var(--backdrop); border:2.5px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.6); } /* ── the ring the page draws on the route at each waypoint ──────────────── Sizes come from SETTINGS.waypointSize / waypointRing, which the engine writes onto :root — the numbers stay in the HTML with the rest of the settings, and the shape stays here. The whole chip is counter-scaled as the map zooms, so this holds the size given whatever the zoom, and it sits over the satellite view because the page draws it rather than the artwork. */ .tm-label .tm-pin{ position:absolute; left:0; top:50%; width:var(--marker-size, 15px); height:var(--marker-size, 15px); margin-left:calc(var(--marker-size, 15px) / -2); transform:translateY(-50%); border-radius:50%; box-sizing:border-box; background:#fff; /* THE PIN IS PART OF THE ROUTE, so it is the route's colour — green on a built trail, purple on a wishful one, both of which fall out of --route-line without this rule knowing which it is. It was the site's red accent, left over from when the route was red too. Once the route went green the pin stayed behind, and since the artwork draws its own ring underneath at the route colour, every waypoint on every trail was a red ring sitting on top of a green one. */ border:var(--marker-ring, 4px) solid var(--route-line); box-shadow:0 1px 5px rgba(0,0,0,.45); } .tm-label.tm-wishful .tm-pin{ border-width:var(--marker-ring-wish, 3px); border-color:var(--wishful); } .tm-label.tm-clickable .tm-pin{ transition:transform var(--button-fade); } .tm-label.tm-clickable:hover .tm-pin{ transform:translateY(-50%) scale(1.18); } .tm-label .tm-tag{ opacity:var(--tag-fade, 1); /* clear of the ring, whatever size the ring is */ position:absolute; left:calc(var(--marker-size, 15px) / 2 + 7px); top:50%; transform:translateY(-50%); white-space:nowrap; padding:3px 9px; border-radius:999px; background:var(--panel); border:1px solid var(--panel-edge); backdrop-filter:blur(6px); font:600 10.5px/1.6 var(--font-body); letter-spacing:.05em; text-transform:uppercase; } #tm-walker .tm-dot{ width:var(--walker-size); height:var(--walker-size); background:var(--accent); border:3px solid #fff; } #tm-walker .tm-ring{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:var(--walker-size); height:var(--walker-size); border-radius:50%; border:2px solid var(--accent); animation:pulse var(--walker-speed) ease-out infinite; } @keyframes pulse{ from{ opacity:.9; width:var(--walker-size); height:var(--walker-size); } to { opacity:0; width:var(--walker-ring); height:var(--walker-ring); } } /* ── the shade over the map ──────────────────────────────────────────── */ #tm-shade{ position:fixed; top:var(--bar-height); left:0; right:0; bottom:0; z-index:1; pointer-events:none; background: radial-gradient(125% 95% at 50% 45%, rgba(0,0,0,0) 42%, rgba(0,0,0,var(--shade-edges)) 100%), linear-gradient(to bottom, rgba(0,0,0,var(--shade-top)), rgba(0,0,0,0) var(--shade-top-depth), rgba(0,0,0,0) 60%, rgba(0,0,0,var(--shade-bottom))); } /* ── interface layer ─────────────────────────────────────────────────── */ /* The interface layer starts below the bar too, so every region measured inside it — --band-top and the rest — counts from the top of the map, not the top of the window. */ #tm-ui{ position:fixed; top:var(--bar-height); left:0; right:0; bottom:0; z-index:3; pointer-events:none; } /* the top band. Its height is --band-top, which is also what the card column measures down from — so a taller title, or another link button wrapping onto a second row, pushes the cards down by itself. */ #tm-topbar{ position:absolute; top:0; left:0; right:0; min-height:var(--band-top); display:flex; gap:16px; align-items:flex-start; justify-content:space-between; padding:var(--title-pad) var(--edge-gap); } #tm-brand{ max-width:46ch; } #tm-brand .tm-kicker{ font:600 10.5px/1 var(--font-body); letter-spacing:.22em; text-transform:uppercase; color:var(--over-map-kicker); margin-bottom:8px; } #tm-brand h1{ margin:0; font:700 clamp(15px,2.1vw,21px)/1.25 var(--font-body); letter-spacing:-.01em; color:var(--over-map-ink); } /* ── the link buttons under the corner title ────────────────────────────── Small pills for the things a walker might want off the page: the map file itself, the Wikipedia entry, the route on Google Maps. Each one is written in WORDS.trailLinks; a link with an empty href is left off the page altogether, and if none of them has an href the whole row disappears — so there is nothing to comment out when a trail has no links. */#tm-links, #ht-links{ display:flex; flex-wrap:wrap; gap:var(--trail-link-gap); margin-top:var(--trail-link-top); }#tm-links:empty, #ht-links:empty{ display:none; } #tm-links a{ pointer-events:auto; cursor:pointer; font:600 var(--trail-link-size)/1 var(--font-body); display:inline-flex; align-items:center; gap:5px; letter-spacing:.11em; text-transform:uppercase; text-decoration:none; color:var(--over-map-ink); background:rgba(255,255,255,.62); border:1px solid rgba(60,45,25,.28); padding:6px 10px; border-radius:999px; backdrop-filter:blur(6px); transition:color var(--button-fade), background var(--button-fade), border-color var(--button-fade); }#tm-links a:hover, #ht-links a:hover{ color:#fff; background:var(--accent); border-color:transparent; }#tm-links a:focus-visible, #ht-links a:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; } #tm-topright{ display:flex; align-items:center; gap:12px; } #tm-version{ font:500 10px/1 var(--font-body); letter-spacing:.14em; color:var(--over-map-quiet); } .tm-button{ pointer-events:auto; cursor:pointer; font:600 11px/1 var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:var(--text-quiet); background:var(--panel); border:1px solid var(--panel-edge); padding:9px 12px; border-radius:999px; backdrop-filter:blur(10px); transition:color var(--button-fade), background var(--button-fade); } .tm-button:hover{ color:var(--text); } /* ── the compass ────────────────────────────────────────────────────────── It lives in the page rather than in the artwork, so it stays in the corner however far the map is panned or zoomed. The map is drawn north-up, so the needle never has to turn. */ /* THE LEFT RAIL — the compass and the two panel buttons, in one fixed column. Left-hand side because the waypoint cards live on the right. It hangs off the bottom of the top band, so restyling the corner title carries it along. Nothing in here ever moves: that is what keeps the buttons attached to the panel they open. */ #tm-rail{ position:absolute; z-index:5; left:var(--edge-gap); /* --rail-drop is written by the page, and only on a phone, to lower the rail until no waypoint card can cut a button in half. See placeRail(). It is 0 everywhere else, so this reads exactly as it did before. */ top:calc(var(--band-top) + var(--compass-drop) + var(--rail-drop, 0px)); display:flex; flex-direction:column; gap:var(--rail-gap); } #tm-compass{ width:var(--compass-size); height:var(--compass-size); border-radius:50%; display:grid; place-items:center; background:var(--panel); border:1px solid var(--panel-edge); backdrop-filter:blur(10px); box-shadow:0 4px 16px rgba(0,0,0,.28); }#tm-compass[hidden], #ht-compass[hidden]{ display:none; }#tm-compass svg, #ht-compass svg{ width:var(--compass-arrow); height:var(--compass-arrow); fill:var(--accent); margin-bottom:-3px; }#tm-compass span, #ht-compass span{ font:700 10px/1 var(--font-body); letter-spacing:.1em; color:var(--text); } /* the two round buttons under the compass */ .tm-railBtn{ pointer-events:auto; cursor:pointer; padding:0; width:var(--compass-size); height:var(--compass-size); border-radius:50%; display:grid; place-items:center; background:var(--panel); border:1px solid var(--panel-edge); color:var(--text-quiet); backdrop-filter:blur(10px); box-shadow:0 4px 16px rgba(0,0,0,.28); transition:color var(--button-fade), background var(--button-fade), border-color var(--button-fade); }.tm-railBtn[hidden], .ht-railBtn[hidden]{ display:none; }.tm-railBtn svg, .ht-railBtn svg{ width:20px; height:20px; }.tm-railBtn:hover, .ht-railBtn:hover{ color:var(--text); }.tm-railBtn.is-on, .ht-railBtn.is-on{ background:var(--accent); border-color:transparent; color:#fff; }.tm-railBtn:focus-visible, .ht-railBtn:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:3px; } /* the label is for screen readers; the icon and the tooltip carry it on screen */.tm-railName, .ht-railName{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* ── the one panel both buttons open ────────────────────────────────────── It is anchored to the rail, not to the window edge, and slides out from behind it. Only one exists and its contents are swapped, so there is never a second panel to get out of step with. */ #tm-panel{ position:absolute; z-index:5; left:calc(var(--edge-gap) + var(--compass-size) + var(--panel-gap)); top:calc(var(--band-top) + var(--compass-drop)); width:var(--panel-width); max-height:calc(100% - var(--band-top) - var(--compass-drop) - var(--gutter)); display:flex; flex-direction:column; background:var(--panel-bg); border:1px solid var(--panel-edge); border-radius:var(--panel-radius); box-shadow:var(--shadow); backdrop-filter:blur(var(--panel-bg-blur)) saturate(1.2); overflow:hidden; transform-origin:0 0; /* THE CLOSED STATE. All three of these matter: opacity makes it fade rather than vanish visibility takes it out of the accessibility tree, and — with the 0s delay below — waits until the fade has finished pointer-events stops it catching clicks while it is invisible That last one was a bug up to 5.2: a panel at opacity 0 is still a solid pane as far as the pointer is concerned, so a closed panel sat over the map swallowing clicks meant for waypoints beneath it. The `hidden` attribute alone does NOT fix it — an element with a display of its own overrides what [hidden] would do — hence the rule below as well. */ opacity:0; transform:translateX(-10px) scale(.98); visibility:hidden; pointer-events:none; transition:opacity var(--panel-slide) var(--panel-ease), transform var(--panel-slide) var(--panel-ease), visibility 0s linear var(--panel-slide); } #tm-panel.is-open{ opacity:1; transform:none; visibility:visible; pointer-events:auto; transition:opacity var(--panel-slide) var(--panel-ease), transform var(--panel-slide) var(--panel-ease), visibility 0s; } /* and the belt to that pair of braces: [hidden] means gone, whatever display the rule above asked for. The engine sets this once the fade has played. */#tm-panel[hidden], #ht-panel[hidden]{ display:none; }#tm-panelTop, #ht-panelTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 12px 12px 16px; }#tm-panelTop h2, #ht-panelTop h2{ margin:0; font:700 10.5px/1 var(--font-body); letter-spacing:.18em; text-transform:uppercase; color:var(--accent-soft); } #tm-panelTop .tm-close{ position:static; width:24px; height:24px; font-size:16px; }#tm-panelNote, #ht-panelNote{ margin:0 16px 12px; font:400 12px/1.55 var(--font-body); color:var(--text-quiet); }#tm-panelNote[hidden], #ht-panelNote[hidden]{ display:none; } #tm-panelBody{ overflow:auto; padding:0 16px 16px; } /* ── the legend list ────────────────────────────────────────────────────── */.tm-legend, .ht-legend{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }.tm-legend li, .ht-legend li{ display:flex; align-items:center; gap:12px; }.tm-legend span, .ht-legend span{ font:400 12.5px/1.35 var(--font-body); color:var(--text); } /* Each row's drawing is a file in the legend/ folder — legend/trails.svg and so on — named after the row's `swatch` in WORDS.legend. They come straight out of the Happy Trails Illustrator file, so they arrive at wildly different proportions: a bike-lane line is 11:1, the golf square is 1:1, the stairs are taller than wide. Each is fitted inside one box of this size, which is what keeps every label on the same left margin however different the drawings are. The Happy Trails map uses the same box. */.tm-sw, .ht-sw{ flex:0 0 var(--swatch-width); width:var(--swatch-width); height:var(--swatch-height); display:block; object-fit:contain; } /* ── the layer switches ─────────────────────────────────────────────────── */ /* ONE PER ROW, ALWAYS, ON A TRAIL PAGE. The main map's panel holds a dozen switches and genuinely needs two columns or the list runs off the bottom of a phone. A trail page has two or three. In two columns those became a pair of narrow boxes with their names broken across lines, side by side, for no reason — the panel was as tall either way. Full width also means the switch and its note read as one line of English rather than as a cell in a table. This is why the count is a variable rather than a number written in each rule: the two panels want different answers and the difference is stated once, here. */ .tm-switches{ display:grid; gap:var(--switch-gap); grid-template-columns:1fr; } /* On the MAIN MAP, a group holding a single switch gives it the whole width rather than half of it with an empty hole beside it. `1 / -1` means "first grid line to last", so it holds whatever --switch-columns is set to and needs no change if the column count ever does. Swap :only-child for :last-child:nth-child(odd) if you would also like the last switch of an odd-numbered group to stretch across. */ .ht-switches > .ht-switch:only-child{ grid-column: 1 / -1; } .tm-switch{ display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; padding:11px 12px; border-radius:12px; cursor:pointer; background:rgba(255,255,255,.045); border:1px solid var(--panel-edge); transition:background var(--button-fade), border-color var(--button-fade); }.tm-switch:hover, .ht-switch:hover{ background:rgba(255,255,255,.09); }.tm-switch:focus-visible, .ht-switch:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; }.tm-switch .tm-track, .ht-switch .ht-track{ flex:0 0 auto; width:var(--switch-width); height:var(--switch-height); margin-top:1px; border-radius:999px; position:relative; background:var(--switch-off); transition:background var(--switch-slide); }.tm-switch .tm-knobby, .ht-switch .ht-knobby{ position:absolute; top:2px; left:2px; width:calc(var(--switch-height) - 4px); height:calc(var(--switch-height) - 4px); border-radius:50%; background:#fff; transition:transform var(--switch-slide) var(--panel-ease); }.tm-switch.is-on .tm-track, .ht-switch.is-on .ht-track{ background:var(--accent); }.tm-switch.is-on .tm-knobby, .ht-switch.is-on .ht-knobby{ transform:translateX(calc(var(--switch-width) - var(--switch-height))); } /* A SWITCH THAT IS NOT A CONTROL. On a wishful trail the Wishful thinking switch has nothing to hide — the whole route is proposed — so the engine renders it locked on. It keeps its place in the panel, because a panel that gains and loses rows between trails is harder to read than one that always looks the same, but it is plainly not pressable: dimmed, the ordinary pointer rather than the hand, and no hover. The dimming is on the row rather than on each part of it, so the track, the knob and both lines of text fade together and the row still reads as one thing. `disabled` on the button is what actually prevents the press; this is only what says so. */ .tm-switch.is-locked{ opacity:.45; cursor:default; } .tm-switch.is-locked:hover{ background:rgba(255,255,255,.045); } .tm-switchText b{ display:block; font:600 12.5px/1.25 var(--font-body); color:var(--text); } .tm-switchText small{ display:block; margin-top:3px; font:400 11px/1.4 var(--font-body); color:var(--text-quiet); } /* ── waypoint cards ──────────────────────────────────────────────────── */ /* The card column: everything left over between the two bands, held against the right-hand edge. Never centred on the window — a tall card centred on the window runs underneath the numbers along the bottom. The engine measures this column and gives the card's text however many lines actually fit. left and right are both set and the width is capped, so the column is as wide as --card-width allows and no wider; margin-left:auto spends whatever is left over on the left, holding it against the right edge. Lift the cap (--card-width:none, which is what a phone does) and the column simply fills the width between the two margins. */ /* THE COLUMN THE CARD LIVES IN. It starts below the top band because on a narrow screen the card is full width and would otherwise cover the corner title. On a WIDE screen it would not: the title ends around x=330 and the card starts past the middle of the window, so the two cannot touch, and reserving the title's height for the card there costs it 80 pixels of height for nothing. --card-top is that reservation, and the responsive block at the foot of this file is where it is set: the full band on narrow screens, a much smaller clearance on wide ones. Every pixel it saves goes to the text. */ #tm-cards{ position:absolute; top:var(--card-top, var(--band-top)); bottom:var(--band-bottom); left:var(--edge-gap); right:var(--edge-gap); width:auto; max-width:var(--card-width); margin-left:auto; } /* Where the card sits in that column, and the small rise as it fades in, are both here rather than in the engine — the engine only reports how far through the fade it is, as --card-nudge (a plain number of pixels). */ .tm-card{ position:absolute; right:0; width:100%; bottom:var(--card-sit); transform: translateY(calc(var(--card-lift) + var(--card-nudge, 0) * var(--card-lean) * 1%)) translateY(calc(var(--card-nudge, 0) * 1px)); background:var(--card-panel); border:1px solid var(--panel-edge); border-radius:var(--card-radius); box-shadow:var(--shadow); backdrop-filter:blur(var(--card-blur)) saturate(1.2); overflow:hidden; opacity:0; will-change:opacity, transform; } /* ── a wishful-thinking card ────────────────────────────────────────────── Everything about it is the ordinary card; only the colour changes. The border is deliberately thin — it should read as a marked variant, not as a different component. */ .tm-card.tm-wishful{ background:var(--wishful-panel); border-color:var(--wishful-edge); } .tm-card.tm-wishful .tm-count{ color:var(--wishful-kicker); } .tm-card.tm-wishful .tm-facts{ border-top-color:var(--wishful-edge); } /* its name chip on the map, and the arrows on its picture, follow the card */ .tm-label.tm-wishful .tm-tag{ border-color:var(--wishful-edge); color:var(--wishful-kicker); } .tm-label.tm-clickable.tm-wishful:hover .tm-tag{ background:var(--wishful); color:#fff; border-color:transparent; } /* and so does its dot on the elevation graph */ #tm-profile .tm-wpdot.tm-wishful{ background:var(--wishful-kicker); border-color:rgba(0,0,0,.5); } /* the × that closes a card. It sits over the photo, top right. */ .tm-close{ position:absolute; top:10px; right:10px; z-index:2; width:28px; height:28px; padding:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; /* The × is drawn with a lot of empty space under it in most fonts, so a glyph centred by the grid still sits low. line-height:0 takes the font's own vertical metrics out of the sum and lets place-items centre the ink itself. */ font:400 18px/0 var(--font-body); color:var(--text); background:rgba(8,10,12,.55); border:1px solid var(--panel-edge); backdrop-filter:blur(6px); transition:background var(--close-fade), color var(--close-fade), transform var(--close-fade); }.tm-close:hover, .ht-close:hover{ background:var(--accent); border-color:transparent; transform:scale(1.08); } .tm-close:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; } /* ── the picture area ───────────────────────────────────────────────────── A fixed-shape window (--card-media) holding one or more slides. Every picture and video inside is object-fit:cover, so anything you drop in is scaled and centre-cropped to fill the window exactly — a portrait photo, a square one and a 16:9 one all sit correctly without being squashed. */ .tm-media{ position:relative; margin:0; overflow:hidden; /* width:100% is not decoration — without it the cap below makes the browser narrow the picture to keep the 4:3 ratio, instead of keeping it full width and cropping the top and bottom, which is what we want. */ width:100%; aspect-ratio:var(--card-media); background:#1b1e22; /* the cap that keeps the whole card inside its column on a short window */ max-height:max(var(--card-media-min), calc(var(--column-height) - var(--card-chrome))); } .tm-track{ display:flex; width:100%; height:100%; transition:transform var(--media-slide) var(--media-ease); } .tm-slide{ flex:0 0 100%; position:relative; height:100%; } /* ── the buffering spinner ──────────────────────────────────────────────── Shown while a video is fetching enough of itself to play, and again if it runs dry part-way through. Without it the picture area simply sits there, which reads as a broken card rather than a loading one — and the first play of a video that has so far fetched only its metadata is exactly when that happens. It is a ring with one brighter quarter, turned by a CSS animation, so it keeps moving even while the main thread is busy decoding video. */ .tm-spinner{ position:absolute; left:50%; top:50%; width:var(--spinner-size); height:var(--spinner-size); margin:calc(var(--spinner-size) / -2) 0 0 calc(var(--spinner-size) / -2); border-radius:50%; border:var(--spinner-weight) solid var(--spinner-track); border-top-color:var(--spinner-lit); animation:tm-spin var(--spinner-speed) linear infinite; opacity:0; pointer-events:none; z-index:1; transition:opacity .18s ease; } /* the engine puts this on the slide while its video is waiting */ .tm-slide.is-buffering .tm-spinner{ opacity:1; } @keyframes tm-spin{ to{ transform:rotate(360deg); } } .tm-slide img, .tm-slide video{ display:block; width:100%; height:100%; object-fit:cover; /* fill the window, crop whatever hangs over */ object-position:center; } .tm-caption{ position:absolute; left:10px; bottom:9px; font:500 9.5px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); text-shadow:0 1px 6px rgba(0,0,0,.8); } /* ── the before/after slide ─────────────────────────────────────────────── Two pictures stacked in the same box. The top one is clipped to the left of the handle, so dragging the handle wipes between them. Both are cover- cropped, exactly like every other picture, so the two line up. --split is the handle position as a percentage; the engine sets it. */ .tm-compare{ position:relative; width:100%; height:100%; --split:50%; } .tm-compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } .tm-compare .tm-before{ /* inset(top right bottom left) — keep only what is left of the handle, so "before" fills the left of the picture and "after" shows through on the right, which is the way round people expect to read it */ clip-path:inset(0 calc(100% - var(--split)) 0 0); } .tm-compare-label{ position:absolute; bottom:12px; z-index:2; padding:4px 9px; border-radius:var(--radius-pill); background:rgba(8,10,12,.6); color:#fff; backdrop-filter:blur(6px); font:600 9.5px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; pointer-events:none; transition:opacity var(--button-fade); } .tm-compare-label.is-before{ left:12px; } .tm-compare-label.is-after{ right:12px; } .tm-compare-handle{ position:absolute; top:0; bottom:0; left:var(--split); z-index:3; width:var(--handle-hit); margin-left:calc(var(--handle-hit) / -2); cursor:ew-resize; touch-action:none; /* only the handle grabs a touch, so dragging the card still scrolls */ display:grid; place-items:center; } .tm-compare-handle::before{ /* the line down the join */ content:""; position:absolute; top:0; bottom:0; left:50%; width:var(--handle-line); margin-left:calc(var(--handle-line) / -2); background:var(--handle-colour); box-shadow:0 0 10px rgba(0,0,0,.5); } .tm-compare-handle span{ /* the grab circle */ position:relative; display:grid; place-items:center; width:var(--handle-grip); height:var(--handle-grip); border-radius:50%; background:var(--handle-colour); color:#14181c; font:400 13px/1 var(--font-body); letter-spacing:-1px; box-shadow:0 2px 10px rgba(0,0,0,.5); transition:transform var(--button-fade); } .tm-compare-handle:hover span, .tm-compare-handle:focus-visible span{ transform:scale(1.12); } .tm-compare-handle:focus-visible{ outline:none; } .tm-compare-handle:focus-visible span{ outline:2px solid var(--accent-soft); outline-offset:3px; } /* ── carousel arrows and dots ─────────────────────────────────────────── */ .tm-media-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:var(--arrow-size); height:var(--arrow-size); border-radius:50%; display:grid; place-items:center; cursor:pointer; border:1px solid var(--panel-edge); background:var(--arrow-bg); color:#fff; font:400 17px/1 var(--font-body); backdrop-filter:blur(6px); transition:background var(--button-fade), color var(--button-fade); } .tm-media-arrow:hover:not([disabled]){ background:var(--arrow-bg-hover); color:#12161a; } .tm-media-arrow.is-prev{ left:9px; } .tm-media-arrow.is-next{ right:9px; } .tm-media-arrow[disabled]{ opacity:.3; cursor:default; } .tm-dots{ position:absolute; left:0; right:0; bottom:9px; display:flex; gap:6px; justify-content:center; } .tm-dot{ width:var(--dot-size); height:var(--dot-size); padding:0; border:0; border-radius:50%; background:var(--dot-off); cursor:pointer; transition:background var(--button-fade), transform var(--button-fade); } .tm-dot.is-on{ background:var(--dot-on); transform:scale(1.25); } .tm-card .tm-inner{ padding:14px 20px 15px; } /* The waypoint number on the left, the current picture's caption on the right. baseline alignment keeps the two lines of type sitting on the same line even though they are different sizes; the caption is allowed to wrap under itself rather than push the number about. */ /* ── THE STAMP ON THE PICTURE ───────────────────────────────────────────── The waypoint number and the current picture's caption, over the top-left of the photograph. They were a row between the picture and the title, which cost 21 pixels and put two small grey things in the way of a heading. Here they cost nothing and the title starts where the picture stops. Over a photograph nothing can be relied on for contrast, so both carry a shadow and the whole corner is darkened a little underneath them — enough to read against a bright sky, not enough to look like a box. */ .tm-stamp{ position:absolute; left:0; top:0; right:0; padding:9px 12px 22px; display:flex; flex-direction:column; gap:4px; pointer-events:none; background:linear-gradient(to bottom, rgba(8,10,12,.55), rgba(8,10,12,0)); } .tm-card .tm-count{ flex:0 0 auto; font:700 10px/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:#f0c246; text-shadow:0 1px 5px rgba(0,0,0,.9); } /* the caption for whichever picture is showing. It is emptied and refilled by the engine; .tm-fading is on while the words are being changed, which is what turns the swap into a fade rather than a jump. Empty means no caption for that picture, and it simply takes no room. */ .tm-card .tm-slideCaption{ max-width:min(62%, 260px); font:400 var(--caption-size)/1.35 var(--font-body); color:rgba(255,255,255,.82); font-style:italic; text-shadow:0 1px 5px rgba(0,0,0,.85); transition:opacity var(--caption-fade) ease; } .tm-card .tm-slideCaption.tm-fading{ opacity:0; } .tm-card.tm-wishful .tm-count{ color:#f2a8ff; } .tm-card .tm-count span{ color:rgba(255,255,255,.7); letter-spacing:.1em; font-weight:500; } /* ── A LINK INSIDE A CARD'S TEXT ───────────────────────────────────────── The only running text on the site that can carry links, so this is the only place they need a look. Underlined rather than coloured alone: over a photograph the card's background is not reliably dark, and an underline survives that where a colour does not. It thickens under the pointer instead of changing colour, which is a steadier cue and one that does not depend on being able to tell the two colours apart. A link leaving the site gets a small outward arrow after it, drawn in the text rather than added as an image — so it prints, it scales with the type, and it costs no request. Anything pointing at another page of this site is left plain, which is what the rule below keys on. */ .tm-textpages a{ color:var(--accent-soft); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; transition:color var(--button-fade), text-decoration-thickness var(--button-fade); } .tm-textpages a:hover{ color:var(--text); text-decoration-thickness:2px; } .tm-textpages a:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; border-radius:2px; } .tm-textpages a[target="_blank"]::after{ content:"\2197"; /* ↗ */ font-size:.82em; margin-left:.15em; text-decoration:none; display:inline-block; vertical-align:.05em; } .tm-card h2{ margin:0 0 6px; font:600 var(--card-title)/1.2 var(--font-display); letter-spacing:-.01em; } /* ── the body text, in pages ────────────────────────────────────────────── The window is a whole number of lines tall and hides everything past it; the block inside slides up one page at a time. No scrollbar, so nothing in the card can ever swallow a scroll meant for the map. */ .tm-textwindow{ position:relative; overflow:hidden; } .tm-textpages{ transition:transform var(--text-turn) var(--media-ease); } .tm-card p{ margin:0; font:400 var(--card-body)/var(--card-line) var(--font-body); color:var(--text-quiet); } /* The gap between paragraphs is exactly one line, which keeps every line of the card on the same grid — so a page break always lands between lines and never slices one in half. */ .tm-card p + p{ margin-top:calc(var(--card-body) * var(--card-line)); } .tm-pager{ display:none; align-items:center; gap:10px; margin-top:8px; } .tm-pager.is-on{ display:flex; } .tm-pager button{ width:26px; height:26px; border-radius:50%; cursor:pointer; display:grid; place-items:center; border:1px solid var(--panel-edge); background:transparent; color:var(--text); font:400 15px/1 var(--font-body); transition:background var(--button-fade), color var(--button-fade); } .tm-pager button:hover:not([disabled]){ background:var(--accent); color:#12161a; border-color:transparent; } .tm-pager button[disabled]{ opacity:.28; cursor:default; } .tm-pager .tm-pagecount{ font:600 10px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); font-variant-numeric:tabular-nums; } /* ══ WHAT IT WOULD COST, AND HOW BADLY IT IS WANTED ═══════════════════════ Two facts that only a wishful stop has, sitting between its title and its text — above the words rather than below them, because they are the first thing anyone comparing one proposal with another wants to know, and because the card's text scrolls in pages while this does not. Each is a picture and a word: a Canadian coin for the cost and a dial for the priority, with the value spelled out beside it. The picture is what you read at a glance across twelve cards; the word is what makes it certain, and is all a screen reader has. Neither is left to colour alone — the coins differ in size and in edge, and the dial's needle differs in ANGLE. */ /* WHAT IT WOULD COST, AND HOW BADLY IT IS WANTED — in the row of figures. They had a panel of their own beside the title, which made them the loudest thing on the card. They belong here: this is the row of things that are true about this stop, and they are the third and fourth of them, after Elevation and From start. No panel, no border — the row already has a rule above it, and a box inside a box is one box too many. */ .tm-judgement{ display:flex; gap:14px; flex-wrap:wrap; flex:0 0 auto; margin:0; padding:0; border:0; background:none; } .tm-judge{ display:flex; align-items:center; gap:7px; } .tm-judge img{ width:21px; height:21px; display:block; flex:0 0 auto; /* the dial and the coins both carry a soft shadow so they sit ON the panel rather than looking pasted onto it */ filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); transition:transform var(--button-fade); } .tm-judge:hover img{ transform:scale(1.12) rotate(-4deg); } .tm-judgeText{ display:flex; flex-direction:column; gap:2px; } .tm-judgeText small{ font:600 7.5px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--text-quiet); } .tm-judgeText b{ font:600 10.5px/1 var(--font-body); color:var(--text); } .tm-card .tm-facts{ margin-top:11px; padding-top:10px; border-top:1px solid var(--panel-edge); /* flex-end so the link button sits on the same baseline as the numbers beside it rather than stretching to the full height of the row */ display:flex; gap:20px; align-items:flex-end; } /* the link button at the end of the facts row. It reads as a button rather than a fact, but it is the same size and sits on the same line, so the row still scans as one thing. margin-left:auto pushes it to the far end. */ .tm-card .tm-mapLink{ margin-left:auto; flex:0 0 auto; align-self:center; font:600 var(--maplink-size)/1 var(--font-body); letter-spacing:.11em; text-transform:uppercase; text-decoration:none; white-space:nowrap; color:var(--text); background:rgba(255,255,255,.10); border:1px solid var(--panel-edge); padding:7px 11px; border-radius:999px; transition:color var(--button-fade), background var(--button-fade), border-color var(--button-fade); } .tm-card .tm-mapLink:hover{ color:#fff; background:var(--accent); border-color:transparent; } .tm-card.tm-wishful .tm-mapLink:hover{ background:var(--wishful); } .tm-card .tm-mapLink:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:2px; } .tm-card .tm-facts div{ font:600 12px/1.2 var(--font-body); } .tm-card .tm-facts small{ display:block; font:500 9.5px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:5px; } /* ── readouts and elevation profile along the bottom ───────────────────── This is the bottom band. Its three parts — the row of numbers, the gap, the graph — plus the drop below it are the same values --band-bottom is built from at the top of the file, so the card column always stops exactly where this begins. Restyle the graph and the cards move up out of its way. */ #tm-readouts{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:var(--readout-gap); padding:0 var(--edge-gap) var(--readout-drop); } #tm-numbers{ display:flex; gap:clamp(16px,3vw,34px); align-items:flex-end; min-height:var(--readout-row); } #tm-numbers .tm-gap{ flex:1; } .tm-readout small{ display:block; font:500 9.5px/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; } .tm-readout b{ font:700 var(--readout-size)/1 var(--font-body); letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .tm-readout b i{ font:500 11px/1 var(--font-body); font-style:normal; color:var(--text-quiet); margin-left:2px; } #tm-profile{ position:relative; height:var(--profile-height); } #tm-profile svg{ width:100%; height:100%; display:block; overflow:visible; } #tm-profile .tm-under{ fill:rgba(255,255,255,.10); } #tm-profile .tm-whole{ fill:none; stroke:var(--profile-line); stroke-width:1.5; vector-effect:non-scaling-stroke; } /* The walked part of the elevation graph is the same colour as the trail on the map — the two are the same fact drawn twice, so they should not be two different colours. --route-glow is the halo under it, kept as its own variable because a drop-shadow cannot take a bare colour variable and an alpha in one go. */ #tm-profile .tm-walked{ fill:none; stroke:var(--route-line); stroke-width:2.5; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 5px var(--route-glow)); } #tm-profile .tm-cursor{ stroke:rgba(255,255,255,.5); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:2 3; } /* The dot marking where you are on the graph. It is a plain element rather than a circle inside the SVG on purpose. The graph is drawn in a square 1000×100 box and then stretched to whatever width and height it is given — roughly 1372×58 on a desktop — so a circle drawn inside it comes out as a wide, flat oval. Sitting outside the SVG and positioned in percentages, this stays perfectly round at any size. */ /* A dot for each waypoint, so you can see at a glance where the stops fall against the climb. Placed from the same waypoint list as everything else — see the profile block in the HTML. Round for the same reason the knob is. */ #tm-profile .tm-wpdot{ position:absolute; width:var(--wpdot-size); height:var(--wpdot-size); border-radius:50%; background:var(--wpdot-colour); border:1px solid var(--wpdot-ring); transform:translate(-50%, -50%); pointer-events:none; } #tm-profile .tm-knob{ position:absolute; width:var(--knob-size); height:var(--knob-size); border-radius:50%; background:var(--knob-colour); transform:translate(-50%, -50%); pointer-events:none; box-shadow:0 0 5px rgba(0,0,0,.9); } /* ── opening and closing screens ─────────────────────────────────────── */ /* The darkening behind the opening and closing text. It is gentle: the text sits in its own box now, which is what carries the contrast, so this only has to settle the map down a little around it. There is no blur behind either screen any more — see blurAtStart / blurAtEnd in the page. */ #tm-opening, #tm-closing{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:6vw; /* above the left-hand rail (z-index 5), so on a narrow screen the box is never sliced through by the legend and layers buttons */ z-index:6; background:radial-gradient(60% 60% at 50% 50%, rgba(6,8,10,var(--screen-veil-centre)), rgba(6,8,10,var(--screen-veil-edge))); } /* The opening screen is the one that MOVES, so it needs a bottom that is already nothing by the time you can see it. Two gradients, not a mask: the radial does the darkening as before, the linear underneath it thins that darkening away to clear before the element's own edge. A mask would do the same job and cost a compositing pass on a layer that is being moved every frame; this costs nothing. */ #tm-opening{ /* the engine moves this up and off the top as you scroll, so it is given its own compositing layer — and the engine hands the layer back (will-change: auto) the moment it has gone, so a full-screen layer is not held for the rest of the visit. The closing screen never moves and never needs one. */ will-change:transform, opacity; background: /* Lighter at the very top than in the middle. The corner title sits up there in dark ink chosen for pale paper, and a veil at full strength under it left the trail's name barely readable — the panel's own darkening was fighting the page's own heading. */ linear-gradient(to bottom, rgba(6,8,10,var(--screen-veil-corner)) 0%, rgba(6,8,10,var(--screen-veil-edge)) 34%, rgba(6,8,10,var(--screen-veil-edge)) 55%, rgba(6,8,10,0) var(--screen-veil-ends)), radial-gradient(70% 55% at 50% 42%, rgba(6,8,10,0) 0%, rgba(6,8,10,0) 100%); } #tm-closing{ opacity:0; } #tm-opening .tm-kicker{ font:600 11px/1 var(--font-body); letter-spacing:.28em; text-transform:uppercase; color:var(--accent-soft); } #tm-opening h2{ /* it is inside a box now, not floating on the whole screen, so it wants to be a size that sits in that box rather than one that fills the window */ margin:16px 0 14px; font:600 clamp(26px,4.6vw,48px)/1.08 var(--font-display); letter-spacing:-.02em; text-wrap:balance; } #tm-opening p, #tm-closing p{ margin:0 auto; max-width:50ch; font:400 clamp(14px,1.5vw,16.5px)/1.65 var(--font-body); color:var(--text-quiet); } #tm-hint{ margin-top:34px; font:600 10.5px/1 var(--font-body); letter-spacing:.22em; text-transform:uppercase; color:var(--text-quiet); display:flex; flex-direction:column; align-items:center; gap:12px; } #tm-hint svg{ animation:bob var(--hint-bob-speed) ease-in-out infinite; } @keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(7px); opacity:1 } } /* The panel both ends of the page sit in. It was the closing screen's; the opening screen now uses the same one, which is why the two ends read as the same object rather than two unrelated title cards. */ #tm-opening .tm-box, #tm-closing .tm-box{ background:var(--panel); border:1px solid var(--panel-edge); border-radius:22px; padding:clamp(24px,4vw,40px); box-shadow:var(--shadow); backdrop-filter:blur(var(--panel-blur)); max-width:540px; } /* The opening box holds a heading rather than a line of totals, so it needs more room across and a little less air inside than the closing one did. */ /* A trail's own picture behind its opening panel. The veil is a gradient rather than a flat wash — lighter at the top where the kicker sits, heavier lower down where the paragraph is — so the picture is most visible exactly where there is least text over it. */ #tm-opening .tm-box.tm-hasImage{ background-image: linear-gradient(to bottom, rgba(10,12,14,var(--opening-veil-top)), rgba(10,12,14,var(--opening-veil))), var(--opening-image); background-size:cover, cover; background-position:center, center; } /* THE PICTURE NEEDS ROOM OF ITS OWN. The trail's photograph is this panel's background, so every part of it that is not behind a word is the only part you actually look at. The panel is therefore wider than the words need and padded top and bottom by more than they need, which buys a clear band of picture above the kicker and below the scroll hint. The text block itself stays the same width it was — it is capped at 50ch — so widening the panel widens the picture, not the line length, which would have made it harder to read rather than easier. */ #tm-opening .tm-box{ max-width:680px; padding:calc(clamp(26px,4.4vw,44px) + var(--opening-picture)) clamp(24px,4vw,46px) calc(clamp(26px,4.4vw,44px) + var(--opening-picture)); } #tm-closing h2{ margin:0 0 10px; font:600 clamp(22px,3.4vw,34px)/1.15 var(--font-display); } #tm-closing .tm-row{ display:flex; gap:28px; justify-content:center; margin-top:22px; } /* the little glyph on a corner link — what the button DOES, not where it goes */ .tm-linkIcon{ width:1.15em; height:1.15em; flex:none; opacity:.75; } /* ── the corner title, over the new top veil ────────────────────────────── The veil at the top of a trail page sits UNDER the interface (shade is z-index 1, the interface 3) — that part was always right. What was wrong is that the title and kicker are dark ink, chosen back when there was nothing but pale paper behind them. Dark ink on a darkened band reads as the veil being ON TOP of the text, which is what it looked like. So over a veil they go light. The map page has no veil there and keeps its dark ink. NO DROP SHADOW. These carried one for a while — a tight dark halo, the trick every map uses on a label it cannot choose the background for. It did make the words hold up over pale artwork, and it looked like a compromise: soft edges on type this size read as a smudge rather than as depth. They are set in flat colour now. If a particular trail's artwork ever swallows the title, the fix is to darken the veil under it (--screen-veil-corner) rather than to put the shadow back — the background is the thing that is wrong in that case, not the letters. */ body.page-trail #tm-brand h1{ color:var(--over-veil-ink); } body.page-trail #tm-brand .tm-kicker{ color:var(--over-veil-kicker); } body.page-trail #tm-links a{ color:var(--over-veil-ink); background:rgba(20,24,28,.42); border-color:rgba(255,255,255,.22); } body.page-trail #tm-links a:hover{ background:rgba(20,24,28,.62); } body.page-trail.trail-wishful #tm-brand .tm-kicker{ color:var(--wishful-kicker-ink); } /* ══ BUY ME A COFFEE ══════════════════════════════════════════════════════ WHY THIS IS A LINK AND NOT THEIR WIDGET. Buy Me a Coffee offer a drop-in script that floats a button over the page. It is not used here, deliberately: · it is a third-party script on all sixteen pages, and this site currently loads NO external code at all — that is why it holds 55fps on a phone · it floats a fixed button over the bottom-left corner, which on a trail page is exactly where the readouts, the elevation graph and the new waypoint arrows already are · it loads their fonts and images, and sets cookies, on every visit from everyone, whether or not anybody ever clicks it A plain link costs nothing, cannot slow anything down, needs no cookie notice, and lands on the same page their button would have opened. If the widget is ever wanted instead, it is one