/* Animated Gothenburg map backdrop for the home page. Layering: the canvas is `position: fixed`, so it is deliberately NOT a grid item of . That keeps the page's single centring rule (`place-content: center`) operating on the content column alone, exactly as before this layer existed. */ .slam-map { position: fixed; inset: 0; z-index: -1; overflow: hidden; /* Until the geometry has been fetched and the first frame drawn, this is indistinguishable from the plain black page it replaces. */ background-color: #000000; opacity: 0; transition: opacity 1.2s ease-out; } .slam-map[data-ready] { opacity: 1; } .slam-map canvas { display: block; width: 100%; height: 100%; } /* The dark well the logo and tagline sit in. A CSS gradient rather than a canvas operation: cheaper, and it rescales for free. The radii are absolute rather than percentages of the viewport, because the thing being protected is the content column -- which is a fixed physical size -- not a fixed fraction of the screen. Sizing it in `%` made the well swallow the entire map on a narrow phone while barely covering the text on a wide desktop. Centred slightly above the middle to track the column, which `padding-block-end: 10vh` on lifts off true centre. */ .slam-map::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse min(96vw, 54rem) min(52vh, 21rem) at 50% 44%, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0.30) 78%, rgba(0, 0, 0, 0.05) 100% ); } /* ODbL requires a notice on the page that uses the data. Quiet, but present and selectable -- an HTML comment would not satisfy the licence. */ .attribution { position: fixed; inset-inline: 0; bottom: 0; z-index: 1; padding: 0.75rem 1rem; font-size: 0.7rem; line-height: 1.2; letter-spacing: 0.02em; color: #555555; text-align: center; pointer-events: none; } .attribution a { color: inherit; text-decoration: underline; text-decoration-color: #333333; text-underline-offset: 0.25em; pointer-events: auto; transition: color 0.15s ease, text-decoration-color 0.15s ease; } .attribution a:hover, .attribution a:focus { color: #888888; text-decoration-color: #888888; } .attribution a:focus-visible { outline: 2px solid #f9a83f; outline-offset: 4px; } /* Portrait needs a different shape, not just a smaller one. The text column runs nearly edge to edge on a phone, so any ellipse wide enough to sit behind it is also wide enough to black out the whole map. What a tall screen has instead is vertical room: darken a band across the middle and leave the top and bottom of the map fully visible. */ @media (max-width: 40rem) { .slam-map::after { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.26) 17%, rgba(0, 0, 0, 0.84) 31%, rgba(0, 0, 0, 0.86) 60%, rgba(0, 0, 0, 0.30) 76%, rgba(0, 0, 0, 0.06) 100% ); } } /* On short viewports the credit would crowd the nav links; drop it to a near-whisper rather than moving it, so the layout never shifts. */ @media (max-height: 34rem) { .attribution { padding-block: 0.4rem; font-size: 0.62rem; } }