/* ============================================================= SHORELINE — site.css Colour tokens keyed off data-scheme / data-phase, which src/lib/phases.js's INLINE_THEME_SCRIPT sets on before first paint. data-scheme picks the reading-column palette (light by day, dark by dusk/night); data-phase picks the accent tint for the current hour band, overridable via the nav drawer's phase control (localStorage key "shoreline:phase"). This file also carries the two canvas-chrome components that overlay the WebGL scene: the hamburger nav drawer and the first-visit welcome modal. A later task wires the templates that consume this stylesheet; the token contract below is depended on by that task's own tests, so the selectors and variable names are load-bearing — do not rename casually. ============================================================= */ :root { --ink: #1b1710; --paper: #f6efe2; --rule: #cbbb9c; --hot: #b4560c; /* Every other --accent below is scoped to a [data-phase], which only exists once INLINE_THEME_SCRIPT has read the reader's clock — i.e. only when JavaScript runs. Without this default the .hero gradient resolves against an undefined custom property, the whole background-image declaration is invalid, and the hero renders as a blank band on exactly the reader the fallback exists for. Noon is the neutral choice: a no-JS reader has no clock for us to read. */ --accent: #3a92b8; } [data-scheme="dark"] { --ink: #f4e7cf; --paper: #0b0810; --rule: #5c4436; --hot: #ffb45c; } [data-phase="dawn"] { --accent: #e8a89a; } [data-phase="noon"] { --accent: #3a92b8; } [data-phase="golden"] { --accent: #ef9f5a; } [data-phase="dusk"] { --accent: #d0565f; } [data-phase="night"] { --accent: #64798e; } /* ------------------------------------------------------------- Canvas chrome tokens. The hamburger drawer and welcome modal float over the WebGL scene, not the reading column, so — like the existing #gear/#ar HUD chips they match — they keep one dark, amber-accented look regardless of data-scheme/data-phase rather than following the reading palette above. ------------------------------------------------------------- */ :root { /* --chrome-bg / --chrome-panel are gone: every panel that used them is now one surface, --glass-tint below, so that the chrome cannot drift into two different translucencies again. */ --chrome-border: #5c4436; --chrome-text: #f4e7cf; /* Quiet text ON the glass. Lightened from #a08a6e when the front page became a full-page scene: measured off the built page, a panel over the noon sea composites to about rgb(46,56,65), and #a08a6e against that is 3.6:1 — under WCAG AA for normal text, i.e. a label that reads at night and fails at noon, which is the exact failure this page is defined against. #cdb597 is 6.1:1 there, and 4.7:1 against a pure WHITE backdrop, a case the beach cannot actually produce. It stays 1.6:1 quieter than --chrome-text, so it still reads as secondary. The drawer and the HUD use this token too and get the same fix. */ --chrome-muted: #cdb597; --chrome-accent: #ffb45c; --chrome-accent-ink: #241105; --chrome-shadow: 0 0 0 2px rgba(0, 0, 0, .55); } /* ------------------------------------------------------------- Quantised liquid glass — the chrome's one surface. Liquid glass and a PlayStation are a contradiction: soft blur and smooth translucency are precisely what that hardware could not do. Rendered literally, a frosted panel reads as a modern OS window pasted onto a 1997 game. So the glass here is REAL — an actual backdrop-filter blur, the scene genuinely bending behind the panel — and then quantised, the way the machine behind it would have had to: --glass-bands four hard-stop steps repeating every 8px. Not a gradient: a gradient with no interpolation, which is what posterising a smooth ramp looks like. The translucency reads as banded rather than continuous. --glass-dither a 1px checkerboard at 2px pitch — the ordered dither the scene's own post-processing already applies to its 9-bit colour (see engine/postfx.js). The chrome dithers because the picture behind it dithers. Everything else stays hard: 2px borders, square corners, the established Courier New / uppercase / letter-spaced idiom, and the amber accent unchanged. CONTRAST NEVER DEPENDS ON THE BLUR. --glass-tint is nearly opaque by default, and only thins to the translucency the design wants inside the @supports below, once the browser has confirmed it will actually blur what is behind. A browser without backdrop-filter — or a reader who has turned it off — gets a solid dark panel, not unreadable text over a bright noon sea. The blur also carries a brightness() step for the same reason: it darkens the backdrop BEFORE the tint composites over it, so a panel that is legible at night is still legible at noon, over the pale sand and the bright water, rather than only over the dusk and night phases it was eyeballed against. ------------------------------------------------------------- */ :root { --glass-tint: rgba(18, 13, 17, .90); --glass-blur: none; --glass-bands: repeating-linear-gradient( 180deg, rgba(255, 255, 255, .055) 0, rgba(255, 255, 255, .055) 2px, rgba(255, 255, 255, .018) 2px, rgba(255, 255, 255, .018) 4px, rgba(0, 0, 0, .045) 4px, rgba(0, 0, 0, .045) 6px, rgba(0, 0, 0, .085) 6px, rgba(0, 0, 0, .085) 8px); --glass-dither: repeating-conic-gradient( rgba(255, 255, 255, .05) 0% 25%, rgba(0, 0, 0, .06) 0% 50%); } @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { :root { --glass-tint: rgba(18, 13, 17, .66); --glass-blur: blur(9px) saturate(1.25) brightness(.72); } /* The wordmark keeps the same surface and re-tunes the ONE number that decides its contrast, rather than declaring a second surface of its own — the bands, the dither, the blur and the shape all still come from the shared rule below. It gets its own value because of where it is. Every other glass element floats over the sea and the sky; the wordmark is pinned to the bottom-left of the frame, which is SAND, and noon sand is the brightest thing this scene can produce — measured off the built page, rgb(255, 255, 182), against which cream text is 1.2:1, i.e. gone. At .66 the plate carried it to 6.9:1 (5.6:1 in the lightest band of the quantisation); at .78 the worst band is 8.5:1 and all five phases sit between 8.5:1 and 11.5:1, so the wordmark does not have a weakest time of day. It is still glass: the beach still moves behind it. Inside the @supports, deliberately. Outside it the tint is .90 with no blur and no brightness() step, which is already stricter than this; overriding it there would make the fallback THINNER, which is the wrong direction for the reader who has no blur at all. */ .wordmark { --glass-tint: rgba(18, 13, 17, .78); } } /* ------------------------------------------------------------- Silkscreen — the wordmark's face, and the only webfont on this site. SELF-HOSTED, NOT A CDN. The URL below is a placeholder that build.js's copyCss() replaces with the real content-hashed path under /assets/ (see FONT_URL_PLACEHOLDER there); the file itself is vendor/silkscreen/Silkscreen-Regular.woff2, committed to this repo with its licence — SIL Open Font License 1.1, vendor/silkscreen/OFL.txt — beside it. It is the Google Fonts latin subset, 3.5KB, which covers every character the wordmark needs and nothing else. Nothing on this site is fetched from another origin, and the CSP says so: font-src is 'self' and there is no third-party source in any directive. font-display: swap, not block. A pixel face that fails to arrive should degrade to the monospace fallback below, visibly, rather than leave the reader looking at a blank corner for three seconds — the wordmark is a link, and an invisible link is the failure mode this site keeps having. ------------------------------------------------------------- */ @font-face { font-family: "Silkscreen"; src: url("/assets/silkscreen.17bb6d80ee.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } .chip, .panel, .nav-drawer, .welcome, .wordmark, #hud, #teaser, #toast { background-color: var(--glass-tint); background-image: var(--glass-bands), var(--glass-dither); background-size: 100% 8px, 2px 2px; background-repeat: repeat, repeat; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-radius: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Shared chip idiom: dark translucent panel, 2px border, hard black outer shadow, uppercase letter-spaced monospace label. Matches the established #gear/#ar/.chip look. */ .chip { font: inherit; font-family: "Courier New", ui-monospace, monospace; cursor: pointer; color: var(--chrome-text); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; border: 2px solid var(--chrome-border); padding: 9px 13px; box-shadow: var(--chrome-shadow); } .chip:hover, .chip:focus-visible { border-color: var(--chrome-accent); } .chip.on { color: var(--chrome-accent); border-color: var(--chrome-accent); } /* ============================================================= The wordmark. The author's name, small, over the scene, linking home. It is a wordmark on the world rather than a page title: no heading element, no uppercase, no .16em chip tracking — the face carries the character instead. WHERE IT SITS, and why it is the only corner left. The chrome already owns three of them: the Display gear top-left on /beach/, the hamburger top-right on every page, AR look bottom-right on /beach/ (and, everywhere else, the focused state of a.hero-travel, which expands into that same corner). Bottom- left is free on every route. It is positioned INSIDE the hero — `.hero { position: relative }` — rather than fixed to the viewport, and that is the difference between a wordmark on the scene and an overlay on somebody's prose: /beach/ .hero--full is `position: fixed; inset: 0`, so an absolutely positioned child lands in the viewport's own bottom-left corner and stays there. #hud opens from the top-left downward (top: 60px, max-height: 66vh) and stops well short of it; #toast and #teaser are centred at 88px and 110px up. vignette /archive/, /about/, /contact/ and every article: the bottom-left of the 46vh scene band, which scrolls away with the picture it belongs to. A fixed wordmark would be cream-on-cream over the reading column the moment the reader scrolled, and sitting on their text besides. /projects/ the exception: .wordmark--fixed, a sibling of the backdrop rather than a child of it. See home.html's comment above the element for the three separate reasons an anchor cannot live inside .hero--backdrop. CONTRAST DOES NOT DEPEND ON THE PALETTE. It takes the same quantised glass surface as the drawer, the HUD and the panels (the shared rule above), which exists precisely so that light text stays legible over a live beach: the tint is near-opaque until the browser confirms it will blur, and the blur darkens the backdrop before the tint composites over it. --chrome-text on that surface measures over 7:1 in all five time-of-day phases — dawn, noon, golden, dusk, night — where the same colour laid straight onto the noon sand is under 2:1. A wordmark that reads at night and vanishes at noon is exactly the failure this site has already had to fix once. CRISPNESS. Silkscreen is drawn on a pixel grid, so it is set at 16px — a whole multiple of the grid, where every stem lands on a device pixel instead of straddling two — with antialiasing and hinting-driven smoothing turned off, kerning and ligatures off, and optimizeSpeed rasterisation. Set it at 15px or 17px and the engine resamples the bitmap into grey mush, which is the usual way a pixel font ends up looking like a blurry small serif. ============================================================= */ .wordmark { position: absolute; z-index: 10; left: calc(12px + env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom)); display: inline-block; padding: 6px 9px 5px; font-family: "Silkscreen", "Courier New", ui-monospace, monospace; font-size: 16px; line-height: 1; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; color: var(--chrome-text); box-shadow: var(--chrome-shadow); -webkit-font-smoothing: none; font-smooth: never; font-kerning: none; font-variant-ligatures: none; text-rendering: optimizeSpeed; } .wordmark:hover, .wordmark:focus-visible { color: var(--chrome-accent); } .wordmark:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; } /* The front page only. z-index 2 rather than 10: it has to clear .home-page's own z-index 1 lift, and nothing else on that page is between them. */ /* The fixed wordmark: TOP RIGHT, staying there through the whole scroll. ONE ROUTE USES THIS, and it is /projects/ — not the front page, which is what it was written for. The front page now opens with a business card whose h1 is the same name at 24px, so a wordmark there was the name twice on one screen and overlapped it outright on a narrow window; build.js passes that template no wordmark token at all. /projects/ has no card, and a full-page fixed backdrop it cannot sit inside, so it keeps the treatment. Two things about the position are load-bearing. IT SITS LEFT OF THE HAMBURGER, NOT UNDER IT. .nav-toggle is fixed at right:12px and is at least 44px wide, so `right: 12px` here would put the wordmark exactly underneath the one control on the page that must never be covered. The offset is written as 12 + 44 + 12 rather than as 68 so that resizing the hamburger does not make someone work backwards from a magic number. Z-INDEX 20 puts it above the panels (1), below the hamburger (30) and below the drawer backdrop (40). A wordmark that outranked the drawer would sit on top of an open menu. There is deliberately NO narrow-screen rule any more. One existed to stop it colliding with the front page's card, and that card is not on this route — a breakpoint guarding against an element that cannot be there is worse than none, because the next person reads it as a description of the page. */ .wordmark--fixed { position: fixed; z-index: 20; left: auto; bottom: auto; top: calc(12px + env(safe-area-inset-top)); right: calc(12px + 44px + 12px + env(safe-area-inset-right)); } /* ============================================================= Hamburger nav drawer ============================================================= */ .nav-toggle { position: fixed; z-index: 30; right: 12px; top: 12px; min-width: 44px; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; } .nav-toggle-icon { font-size: 15px; line-height: 1; } /* Dimmed backdrop over the scene. Closed by default: opacity 0 AND pointer-events none, on top of the `hidden` attribute JS toggles, so it never intercepts a click/tap meant for the canvas — even mid-transition, before `hidden` is reapplied. */ .nav-backdrop { position: fixed; inset: 0; z-index: 40; /* Lighter than it looks it should be, on purpose: the drawer above it is glass, and it blurs whatever this leaves behind. Dim the page as hard as a modal backdrop and the drawer stops reading as glass and starts reading as a solid panel with a gradient on it. */ background: rgba(6, 4, 8, .40); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .nav-backdrop.open { opacity: 1; pointer-events: auto; } /* Slides in from the right edge. Same closed-state guarantee as the backdrop: translated fully off-canvas AND pointer-events none. */ .nav-drawer { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: 280px; max-width: 86vw; display: flex; flex-direction: column; gap: 20px; padding: 56px 20px 20px; border-left: 2px solid var(--chrome-border); box-shadow: -6px 0 0 2px rgba(0, 0, 0, .55); font-family: "Courier New", ui-monospace, monospace; color: var(--chrome-text); transform: translateX(100%); pointer-events: none; transition: transform .3s ease; overflow-y: auto; } .nav-drawer.open { transform: translateX(0); pointer-events: auto; } /* The rule that makes the drawer's own `hidden` attribute mean anything. The UA stylesheet's [hidden] { display: none } is beaten by ANY author display declaration, and .nav-drawer above declares display: flex — so the closed drawer was display: flex the whole time, merely translated off-canvas. It could not be seen or clicked (transform + pointer-events above), but it was still in the tab order: Tab from the hamburger on any page walked a keyboard reader through the close button, all four nav links and all six phase pills of an invisible panel before reaching anything on the page — including, now, the hero's own travel control. The drawer script already sets and clears `hidden` at exactly the right moments (after the closing transition, before the opening reflow); this is only the missing half of that contract. */ .nav-drawer[hidden] { display: none; } .nav-close { position: absolute; top: 14px; right: 16px; background: transparent; border: 1px solid var(--chrome-border); color: var(--chrome-text); font-size: 16px; line-height: 1; width: 30px; height: 30px; border-radius: 0; cursor: pointer; } .nav-close:hover, .nav-close:focus-visible { border-color: var(--chrome-accent); color: var(--chrome-accent); } .nav-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .nav-links a { display: block; padding: 10px 4px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--chrome-text); border-bottom: 1px solid var(--chrome-border); } .nav-links a:hover, .nav-links a:focus-visible { color: var(--chrome-accent); } .nav-phase-label { display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--chrome-muted); } /* Phase option pills — matches the existing HUD .opts idiom. */ .opts { display: flex; gap: 5px; flex-wrap: wrap; } .opts button { font: inherit; font-family: "Courier New", ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: transparent; color: var(--chrome-text); border: 1px solid var(--chrome-border); padding: 5px 7px; border-radius: 0; min-width: 34px; cursor: pointer; } .opts button:hover, .opts button:focus-visible { border-color: var(--chrome-accent); } .opts button.on { background: var(--chrome-accent); border-color: var(--chrome-accent); color: var(--chrome-accent-ink); font-weight: 700; } /* Hover-to-open: the drawer's slide is the existing .nav-drawer transition above, whichever way it was opened. What is new here is the ARMED state — the hamburger brightening while the intent delay runs, so a drawer that opens without being clicked still announces itself first. Scoped twice, and both gates matter. (hover: hover) and (pointer: fine) keeps it off touch and off coarse pointers, where "hover" is really a tap the reader did not mean. [data-hover-nav="on"] keeps it off the walkable homepage, where the reader drags to look around and a drag finishing near the hamburger would otherwise arm it mid-turn; build.js writes that attribute from the page's scene mode. */ @media (hover: hover) and (pointer: fine) { body[data-hover-nav="on"] .nav-toggle.armed { border-color: var(--chrome-accent); color: var(--chrome-accent); box-shadow: var(--chrome-shadow), 0 0 0 4px rgba(255, 180, 92, .20); } } @media (prefers-reduced-motion: reduce) { .nav-backdrop, .nav-drawer { transition: none; } .nav-toggle { transition: none; } } /* ============================================================= Welcome modal — first-visit only, dismissal remembered under localStorage key "shoreline:welcomed". Replaces the old #tip corner overlay. ============================================================= */ .welcome-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(6, 4, 8, .65); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .welcome-backdrop.open { opacity: 1; pointer-events: auto; } .welcome { position: fixed; z-index: 51; left: 50%; top: 50%; width: min(420px, 88vw); max-height: 82vh; overflow-y: auto; transform: translate(-50%, calc(-50% + 10px)); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; border: 2px solid var(--chrome-border); box-shadow: var(--chrome-shadow); padding: 22px 24px 24px; font-family: "Courier New", ui-monospace, monospace; color: var(--chrome-text); } .welcome.open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; } .welcome h2 { margin: 0 0 16px; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--chrome-accent); } .welcome-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 20px; } .welcome-controls h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--chrome-muted); } .welcome-controls ul { margin: 0; padding: 0 0 0 16px; font-size: 12px; line-height: 1.7; } .welcome kbd { font-family: inherit; font-size: 11px; border: 1px solid var(--chrome-border); border-radius: 0; padding: 1px 5px; } .welcome-dismiss { display: block; margin: 4px auto 0; } /* ------------------------------------------------------------- Teaser card. src/engine/markers.js fills these nodes and drops the `hidden` attribute when the reader walks within LAYOUT.TEASER_RADIUS of a set, then adds `.on`. It creates the element itself if the page did not ship one, so these rules have to hold for markup this stylesheet never sees. ------------------------------------------------------------- */ #teaser { position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); bottom: 110px; width: min(340px, 80vw); border: 2px solid var(--chrome-accent); padding: 12px 14px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6); color: var(--chrome-text); opacity: 0; transition: opacity .3s ease; } #teaser[hidden] { display: none; } /* markers.js drops `hidden` and adds `.on` in the same breath (with a forced reflow between the two, see ensureCard/showCard), so this is the rule that actually turns the class into a visible fade rather than an instant, invisible opacity jump on an element still `display: none`. */ #teaser.on { opacity: 1; } #teaser .teaser-title { margin: 0 0 4px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--chrome-accent); } #teaser .teaser-meta { margin: 0 0 8px; font-size: 10px; letter-spacing: .12em; color: var(--chrome-muted); } #teaser .teaser-line { margin: 0 0 10px; font-size: 11px; line-height: 1.6; } #teaser .teaser-link { font-size: 11px; letter-spacing: .14em; color: var(--chrome-accent); text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--chrome-accent); } @media (max-width: 420px) { .welcome-controls { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .welcome-backdrop, .welcome { transition: none; } #teaser { transition: none; } } /* ============================================================= Page chrome — added by Task 11: the reading column, the HUD panel/gear/AR/stick/toast/boot ids ps1_beach.html originally drew at file scope (engine/index.js and input.js still look these ids up by getElementById), and the WebGL hero itself. The HUD/gear/ar/stick/knob/toast/boot block below is kept value-for-value equivalent to ps1_beach.html's original numbers, just re-pointed at the --chrome-* tokens above instead of its own local --panel/--edge/--dim custom properties, so nothing needs to drift to add it here. The one deliberate exception is #boot's `position` — see its own comment below for why it must not be `fixed` on a page that has a document under the hero. ------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--paper); color: var(--ink); font-family: Georgia, "Times New Roman", serif; } button { font: inherit; cursor: pointer; text-transform: uppercase; } button:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 2px; } a { color: var(--hot); } /* ------------------------------------------------------------- The WebGL hero. `.hero` is the fallback that shows through whenever the canvas cannot: no WebGL, JS disabled, or the scene failing to boot for any other reason (engine/index.js's fail() sets [data-scene="unavailable"] on in that case). The gradient reads as the current time of day even with the canvas gone, because it keys off the same --paper/--accent tokens the rest of the page's theming uses. ------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(to bottom, var(--paper), var(--accent)); } /* The canvas starts invisible (not merely covered by #boot) and only fades in once engine/index.js has actually rendered a frame and marked [data-scene="ready"]. A WebGL context created with the default `alpha: false` paints opaque black, not transparent, the instant it is sized — so without this, a cmd-click-opened article (a backgrounded tab, where requestAnimationFrame never runs until it gains focus) shows a bare black band instead of the gradient below, for as long as it stays backgrounded. Hiding the canvas until a real frame exists keeps the gradient visible the entire time instead. */ .hero canvas { display: block; width: 100%; height: 100%; touch-action: none; image-rendering: pixelated; image-rendering: crisp-edges; opacity: 0; transition: opacity .2s ease; } [data-scene="ready"] .hero canvas { opacity: 1; } [data-scene="unavailable"] .hero canvas { display: none; } @media (prefers-reduced-motion: reduce) { .hero canvas { transition: none; } } /* ------------------------------------------------------------- Hero travel. The hero on an article or a vista page is a picture of a real place on the walkable beach, so it is also a way of going there. `.hero-travel` is the control: a real anchor, in the markup, with the destination already in its href — which is what makes this work with JavaScript disabled (it is simply a link), and what makes it reachable and announced for a reader who never uses a mouse. base.html's hero-travel script then widens the target to the whole hero and adds the expand. It sits above #boot (z-index 9) deliberately: while the scene is still loading, or on a reader whose scene will never load, the way out of the hero must not be underneath the LOADING card. ------------------------------------------------------------- */ /* Clipped, not removed. The visible chip is gone from every hero — that was the ask — but a control that only a mouse can reach is a regression, so the anchor stays exactly where it was in the markup and in the tab order, hidden the way a skip link is. It comes back on focus, and that is not a hedge: hiding a focusable control with no focused state is a WCAG 2.4.7 (Focus Visible) failure, and a sighted keyboard reader has to be able to see where focus landed. A control revealed only while focused is not the persistent chip that was removed. `clip` (deprecated but universally honoured) and `clip-path` are both set: between them every browser that can run this scene clips the anchor, and neither takes it out of the accessibility tree the way display: none or visibility: hidden would. Width and height stay at 1px rather than 0 because a zero-sized element is skipped for focus in some engines. .chip supplies the type, the glass and the border; what is below is only the difference between hidden and shown. */ .hero-travel { position: absolute; z-index: 10; right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); width: 1px; height: 1px; padding: 0; border-width: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; text-decoration: none; color: var(--chrome-text); } /* Deliberately :focus and not :focus-visible, in its own rule rather than a selector list: :focus is understood everywhere, and a 1px clipped anchor cannot be reached by a pointer, so every focus it ever gets is a keyboard focus anyway. In a selector list an unsupported :focus-visible would invalidate the whole rule and leave the control invisible while focused — the exact failure this rule exists to prevent. */ .hero-travel:focus { width: auto; height: auto; padding: 9px 13px; border-width: 2px; border-color: var(--chrome-accent); color: var(--chrome-accent); overflow: visible; clip: auto; clip-path: none; outline: 2px solid var(--chrome-accent); outline-offset: 2px; } /* With the chip gone, the cursor is the only thing left telling a mouse reader the hero is a control at all — so it matters more than it did, not less. Scoped to a fine pointer because a touch reader has no cursor to inform, and to the presence of the anchor because the beach's own hero is not a control. */ @media (hover: hover) and (pointer: fine) { .hero:has(> .hero-travel) { cursor: pointer; } } /* The expand. Transforming the hero — rather than resizing it — means no other element on the page moves, so the prose underneath does not jump as the beach opens up over it; and the low-resolution canvas scales up chunky rather than resampling, which is the right look for this scene. The `transform` is written by the script (it depends on where the hero happens to be on screen); the timing and the layer promotion are here. */ .hero--travelling { z-index: 60; transform-origin: top left; will-change: transform; transition: transform .45s cubic-bezier(.2, .7, .2, 1); pointer-events: none; } .is-travelling, .is-travelling body { overflow: hidden; } @media (prefers-reduced-motion: reduce) { /* The script navigates immediately under reduced motion and never adds the class; this is the belt to that braces. */ .hero--travelling { transition: none; } } /* The homepage hero is the whole page: full-bleed, no document scroll, touch drag reserved for looking around rather than pull-to-refresh. An article's vignette hero (`.hero--vignette`) is a normal block in the flow instead — the page under it is prose, and prose has to scroll. Scoped with :has() off the hero itself rather than a body class, because base.html is one shared wrapper for every page and its token contract does not carry a per-page body class — home.html is simply the one template that includes a `.hero--full`. */ body:has(.hero--full) { height: 100%; overflow: hidden; touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; } .hero--full { position: fixed; inset: 0; } .hero--vignette { height: 46vh; min-height: 260px; max-height: 520px; } /* ------------------------------------------------------------- HUD chrome: the Display panel, AR-look toggle, walk stick and toast, plus the #boot loading placeholder. Only present on pages that actually boot an interactive (non-vignette) scene, i.e. home.html. ------------------------------------------------------------- */ #gear { position: fixed; z-index: 6; left: calc(12px + env(safe-area-inset-left)); top: calc(12px + env(safe-area-inset-top)); } #ar { position: fixed; z-index: 6; right: calc(12px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); } #hud { position: fixed; z-index: 6; width: 244px; max-height: 66vh; overflow-y: auto; left: calc(12px + env(safe-area-inset-left)); top: calc(60px + env(safe-area-inset-top)); border: 2px solid var(--chrome-border); padding: 11px 13px 12px; box-shadow: var(--chrome-shadow); font-family: "Courier New", ui-monospace, monospace; color: var(--chrome-text); } #hud[hidden] { display: none; } #hud h1 { font-size: 11px; letter-spacing: .28em; margin: 0 0 9px; font-weight: 700; color: var(--chrome-accent); text-transform: uppercase; } .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; letter-spacing: .08em; padding: 3px 0; line-height: 1.5; } .row span { color: var(--chrome-muted); text-transform: uppercase; } /* left-thumb walk stick: spawns wherever the touch starts */ #stick { position: fixed; z-index: 6; width: 116px; height: 116px; margin: -58px 0 0 -58px; border: 2px solid rgba(244, 231, 207, .30); border-radius: 50%; background: rgba(20, 14, 18, .25); display: none; pointer-events: none; } #stick.live { display: block; } #knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; border: 2px solid var(--chrome-accent); background: rgba(255, 180, 92, .45); } #toast { position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); bottom: calc(88px + env(safe-area-inset-bottom)); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-family: "Courier New", ui-monospace, monospace; color: var(--chrome-text); border: 1px solid var(--chrome-border); padding: 8px 13px; opacity: 0; pointer-events: none; transition: opacity .35s ease; } /* #tip was removed in favour of the welcome modal; deliberately not restored here (see welcome.html's header comment). */ /* #boot is scoped to its own hero, NEVER to the viewport. ps1_beach.html could afford `position: fixed; inset: 0` because that file is nothing but a scene — there was no document underneath to cover. Here every hero sits on a page with prose (or, on the homepage, a