diff --git a/index.html b/index.html index 9cec7a6..5d4589e 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + diff --git a/package.json b/package.json index 99da05d..be3db68 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "amerc-site", - "version": "0.71.0-titles", + "version": "0.72.0-skiplink", "private": true, "type": "module", "scripts": { diff --git a/src/Scene2D.jsx b/src/Scene2D.jsx index 9d74c58..3754f64 100644 --- a/src/Scene2D.jsx +++ b/src/Scene2D.jsx @@ -7,7 +7,7 @@ import Account from './Account.jsx'; import TavernGame from './TavernGame.jsx'; import { api } from './api.js'; -const RELEASE = '0.71.0-titles'; +const RELEASE = '0.72.0-skiplink'; const NAV = [ { id: 'home', label: 'Tavern' }, @@ -457,8 +457,14 @@ export default function Scene2DApp() { const auth = useAuth(); const isHome = route === 'home'; useEffect(() => { document.title = ROUTE_TITLES[route] || 'amerc'; }, [route]); + const skipToContent = (e) => { + e.preventDefault(); + const target = document.querySelector('.route-enter') || document.querySelector('.route-host'); + if (target) { target.setAttribute('tabindex', '-1'); target.focus(); } + }; return (
+ Skip to content

amerc agent mercenary tavern

{/* Home stays mounted (hidden off-route) so returning to the tavern is instant — diff --git a/src/styles.css b/src/styles.css index 0508605..1d6dbb1 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1468,3 +1468,9 @@ button { .ap-gate-rich h2 { font-family: Georgia, "Times New Roman", serif; font-size: 24px; color: #fff; margin: 0 0 10px; } .ap-gate-rich p { color: #b6a7d4; font-size: 14px; line-height: 1.65; margin: 0 0 22px; } .ap-gate-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } + +/* skip-to-content link — visible only on keyboard focus (a11y, 0.72) */ +.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; background: var(--cyan); color: #06222f; + font-family: Georgia, "Times New Roman", serif; font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 9px; + box-shadow: 0 6px 18px rgba(0,0,0,0.4); text-decoration: none; transform: translateY(-160%); transition: transform .16s ease-out; } +.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 2px solid #fff; outline-offset: 2px; }