/* * site.css — shared stylesheet for every RuneBR site page: site/index.html, site/hiscores/index.html, * the generated site/status.html (server/tools/status-page.ts) and the server-rendered account page * (server/src/web/account-web.ts). Each of those four pages copies the same top-bar markup (the * `.site-bar` / `.site-nav` block) right after — see any of them for the exact HTML. The * three static pages also link `site/site.js`, which fills the Account link with the default * character's face and name; the account page draws that chip server-side instead. */ :root { --bg: #1b1b1b; --panel: #242424; --edge: #3a3a3a; --text: #e6e6e6; --muted: #9a9a9a; --link: #8ab4f8; --primary: #2f6fd6; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; } a { color: var(--link); } h1 { font-size: 2rem; margin: 0; } .tagline { color: var(--muted); margin: 4px 0 0; } section { border-top: 1px solid var(--edge); padding: 16px 0; } h2 { margin: 0 0 8px; font-size: 1.1rem; } footer { color: var(--muted); font-size: 0.85rem; margin-top: 30px; border-top: 1px solid var(--edge); padding-top: 14px; } footer a { color: var(--muted); } .btn { display: inline-block; padding: 10px 18px; border: 1px solid var(--edge); border-radius: 4px; color: var(--text); text-decoration: none; } .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn:hover { filter: brightness(1.1); } .page { max-width: 920px; margin: 0 auto; padding: 40px 20px 60px; } /* Top bar — one identical `.site-bar` div, copied into the four pages above. It is a div, not a

, and every class is prefixed `site-`, because each page already has its own `header {}` rules of its own. */ .site-bar { background: var(--panel); border-bottom: 1px solid var(--edge); } .site-nav { max-width: 920px; margin: 0 auto; padding: 0 20px; min-height: 64px; display: flex; align-items: center; gap: 4px; box-sizing: border-box; } .site-brand { color: var(--text); text-decoration: none; font-size: 20px; font-weight: 700; margin-right: 18px; } .site-links { display: flex; } .site-links a { display: flex; align-items: center; height: 44px; padding: 0 12px; font-size: 15px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; box-sizing: border-box; } .site-links a:hover { color: var(--text); } .site-links a[aria-current="page"] { color: var(--text); border-bottom-color: var(--primary); } .site-play { margin-left: auto; display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; background: var(--primary); border: 1px solid var(--primary); border-radius: 4px; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; box-sizing: border-box; } .site-account { margin-left: 8px; display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; border: 1px solid var(--edge); border-radius: 4px; color: var(--text); font-size: 15px; text-decoration: none; box-sizing: border-box; } .site-account[aria-current="page"] { border-color: var(--primary); } .site-face { height: 36px; width: auto; margin: 0 8px 0 -8px; } .site-face-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Moving between these same-origin pages cross-fades instead of flashing, so the identical top bar appears to stay put. CSS only, so it also covers the no-script account page. Browsers without cross-document view transitions, and viewers who ask for reduced motion, load pages as before. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } @media (max-width: 760px) { .page { padding: 24px 16px 40px; } .site-nav { flex-wrap: wrap; padding: 8px 16px 0; min-height: 0; } .site-brand { font-size: 19px; } .site-play { padding: 0 16px; } .site-links { order: 1; flex-basis: 100%; margin-top: 8px; border-top: 1px solid #2e2e2e; overflow-x: auto; } .site-links a { padding: 0 10px; flex: none; } }