/* Home page desktop chrome restructure (Arun 2026-09-14): TOP-RIGHT three stacked text links replace the old moon icon - THE RIDER → about.html - THE GAME → opens the game modal (same as clicking the logo) - THE BUILD → case-study.html No full-screen overlay, no marquee. Direct clicks only. BOTTOM-RIGHT the moon and speaker icons live here as a pair: [audio waveform] . . . [speaker] gap [moon (extreme right)] The MORE button that used to open the overlay menu is hidden - the three top-right links replace it. Desktop only (min-width: 768px). Mobile / tablet layout untouched - the existing bottom MORE button + home-menu overlay stays working there per Arun's constraint. Also About / Case Study pages untouched. */ @media (min-width: 768px) { /* Move the night toggle from top-right corner to the extreme right of the bottom chrome row. bottom: 35 px puts the icon's VISIBLE INK on the audio waveform, not just its button box. Measured 2026-09-14: the waveform's centre sits 44.5 px from the viewport bottom (.hero__chrome bottom:40 + .hero__rule margin-bottom:4 + half the 1px rule). The 22 px glyph is centred inside the 38 px button, and the moon's own artwork has ~3 px of transparent inset, so with the box at bottom:44 the ink floated ~10 px above the line. At 35 px the moon's ink bottom lands 1 px above the line (touching it); the speaker's, whose artwork has a bigger inset, lands ~3 px above - the same "resting on the line" feel the logo has. right: 60px matches the chrome's right padding, so the moon icon sits at the exact right edge of the visible chrome. */ html.is-home-page .night-toggle, html.is-game-page .night-toggle { top: auto; left: auto; right: 60px; bottom: 35px; } /* Sound toggle sits just to the left of the moon on the same audio line baseline. Numbers: night is at right:60 with width 38 -> its LEFT edge is 60 + 38 = 98 px from the viewport's right edge. A 12 px accessibility gap between the two icons puts the sound toggle's RIGHT edge at 98 + 12 = 110 px from the viewport's right edge. */ html.is-home-page .sound-toggle, html.is-game-page .sound-toggle { top: auto; left: auto; right: 110px; bottom: 35px; /* same ink-on-the-line offset as the moon (see above) */ } /* Reserve horizontal space in the bottom chrome so the audio waveform stops BEFORE the two toggle icons instead of running underneath them. Chrome's right edge was 60 px (matching the toggle-column outer edge). Now it needs to clear: 60 (night right offset) + 38 (night width) + 12 (gap between the two icons) + 38 (sound width) + 24 (breathing space between the wave and the speaker icon) = 172 px. */ /* Home and the game carry the speaker + moon pair bottom-right, so they reserve 172px. About / Case Study have no footer icons (per Arun 2026-09-14) and keep their own chrome width. */ html.is-home-page .hero__chrome, html.is-game-page .hero__chrome { right: 172px; } /* Hide the MORE button on desktop home page. It was the only way to open the black home-menu overlay - which we no longer want on the home page. About / Case Study still show it (they use the same .site-nav markup but css/home-menu.css scopes the overlay there). */ html.is-home-page .hero__chrome .site-nav, html.is-game-page .hero__chrome .site-nav, html.is-about-page .hero__chrome .site-nav, html.is-case-study-page .hero__chrome .site-nav { display: none !important; } /* --- Top-right corner nav (the three stacked text links) --------- */ .home-corner-nav { position: fixed; top: 40px; /* matches the toggles' old top offset - visually rooted to the same corner */ right: 60px; /* matches the toggles' right offset - lines up with the moon's new right edge */ z-index: 1015; /* same as .night-toggle / .sound-toggle */ display: flex; /* TRIAL 2026-09-14 - horizontal row, on the same top line as the six scene bars (both at top:40 / cap-top y=42). Regular menu row reading right-to-left from the corner. TO REVERT to the stacked column: flex-direction: column; align-items: flex-end; gap: 14px; (and restore ::before left: -40px below) */ flex-direction: row; align-items: center; /* row: centres each link's 2px bar on the text midline */ gap: 28px; /* horizontal spacing between items */ text-align: right; color: #fff; pointer-events: none; /* pass through the container; links re-enable */ /* mix-blend-mode: difference removed 2026-09-14 - plain white reads cleaner in the corner than the inverted blend, matching the same "quieter" call Arun made on the scene indicator. */ } .home-corner-nav__link { /* TRIAL 2026-09-14 - same face + size as the hero chat bubbles (.hero-chat__bubble: Inter 400, 14px). Caps + 1px tracking kept so this is a clean A/B of the typeface alone. TO REVERT to NewBlack: font-family: 'HomeMenuBlack', 'NewBlack Typeface', 'Impact', system-ui, sans-serif; font-weight: 700; font-size: 16px; */ font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: 14px; line-height: 1; letter-spacing: 0; /* TRIAL 2026-09-14 - none, matching the chat bubbles. REVERT: 1px */ /* TRIAL 2026-09-14 - sentence case: text-transform removed, so the labels render straight from the markup (The ride / Game / The rider / Build). REVERT: text-transform: uppercase; */ color: inherit; /* inherit #fff from container */ background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; text-decoration: none; pointer-events: auto; /* re-enable clicks */ /* Flex-inline so the ::after growing bar takes real space next to the text - since the parent .home-corner-nav is align-items: flex-end, adding width via ::after pushes the text LEFT while the link's right edge stays anchored. That's what produces the "line pushes text over" effect Arun asked for. */ display: inline-flex; align-items: center; position: relative; /* anchors the ::before hit pad below */ -webkit-appearance: none; appearance: none; } /* Invisible hit pad (Arun 2026-09-14). The 16 px gap between text and bar is a margin - empty space - and during the spring animation (and in Safari, which is strict about unpainted areas on borderless inline boxes) the cursor sitting in that gap could read as "left the link", dropping hover, sliding the text back under the cursor, re-triggering hover... a flicker loop. This ::before is a real, transparent, absolutely-positioned box that covers a STABLE rectangle around the link, so hover holds wherever the cursor lands - text, gap, bar, or the edges. left: -40px covers the full leftward travel of the text (36 px) plus a little slack, in any animation frame top/bottom: -6px so grazing the top or bottom of the 20 px text doesn't drop hover either right: 0 flush with the right anchor Purely a hit target - nothing visible, no layout impact. */ .home-corner-nav__link::before { content: ''; position: absolute; top: -6px; bottom: -6px; /* TRIAL (row layout): no leftward extension - in a row, a 40px left pad would overlap the neighbouring item and steal its hover. The link's own box already covers the text's leftward travel on hover, so left:0 still paints the gap and kills the flicker. REVERT to -40px with the column layout. */ left: 0; right: 0; pointer-events: auto; } /* Hover: a 2 x 20 px white bar grows outward from where the text ends toward the right anchor. Because the bar is an inline-flex child (via ::after) inside a right-anchored container, its appearance widens the link and pushes the text left by 20 px - no transform on the text itself, just layout doing the work. Motion curve matches the scene indicator's growth spring so both hover effects read as the same family. */ .home-corner-nav__link::after { content: ''; display: block; width: 0; height: 2px; margin-left: 0; /* no gap at idle so the text stays flush right */ background: currentColor; transition: width 360ms cubic-bezier(0.34, 1.56, 0.64, 1), margin-left 360ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* The active / current item (RIDE on home, GAME inside the game) is a quiet "you are here": 50% white with a SHORT 8 px bar and an 8 px gap (the hover state is 20 px bar + 16 px gap). It's static - hovering it does nothing, since it's the page you're already on. `is-active` is set in the markup. Per Arun 2026-09-14. The bar inherits the 50% via the link's opacity, so text and bar dim together. */ .home-corner-nav__link.is-active { opacity: 0.5; } .home-corner-nav__link.is-active::after { width: 8px; margin-left: 8px; } /* Hover / focus bar - only on the NON-active items. */ .home-corner-nav__link:not(.is-active):hover::after, .home-corner-nav__link:not(.is-active):focus-visible::after { width: 20px; margin-left: 16px; /* 16 px breathing room between the text and the bar (Arun 2026-09-14) - total text shift on hover is 20 + 16 = 36 px */ } .home-corner-nav__link:focus-visible { outline: none; } /* Hide the cursor-tip pill (small "Scroll slowly" style pill) while hovering the corner nav links, same treatment as the scene indicator - the triangle cursor stays visible. */ body:has(.home-corner-nav__link:hover) .cursor-tip { opacity: 0; transition: opacity 180ms ease; } /* While the game modal is open, the HOME page's own corner nav hides - the game iframe renders its own identical nav (with GAME active), so the visitor never sees two. Restores on close. */ body.is-game-open .home-corner-nav { opacity: 0; pointer-events: none; transition: opacity 180ms ease; } /* --- Decorative toggles (Arun 2026-09-14) ----------------------- Some pages show an icon purely so the bottom-right reads the same everywhere, with nothing behind it: game: moon (no night mode in the game) about/case-study: speaker (no audio on those pages) 50% white, not clickable, no hover reaction. pointer-events:none also keeps the custom cursor from growing over it. The markup adds aria-hidden + tabindex=-1 so assistive tech skips it. */ .night-toggle.is-decorative, .sound-toggle.is-decorative { opacity: 0.5; pointer-events: none; } } /* Mobile / tablet: nav is not rendered at all. The existing bottom MORE button + full black home-menu overlay stays working there. */ @media (max-width: 767px) { .home-corner-nav { display: none !important; } /* Mobile must be untouched by this feature (Arun). The decorative moon added to the game for desktop would otherwise be picked up by styles.css's pre-existing mobile rule for .night-toggle (the home moon's mobile position) and render as a stray icon. Home is deliberately NOT listed - its mobile moon is the original element and must keep showing. */ html.is-game-page .night-toggle.is-decorative { display: none !important; } }