/* ── Gamesight Arcade top bar ──────────────────────────────────────────────── The bar is global: host pages get it via styles.css, and every game has it injected at build time (scripts/build-all.mjs). It therefore has to be safe to drop onto a page whose CSS we do not control, so: - no rules on html / body / * — nothing here can reflow a game; - the palette is scoped to #arcade-nav rather than :root, so a game using the same variable names is unaffected; - the bar is fixed, not in flow, because every game in this repo lays out against 100vh and would not make room for it. */ /* The one variable meant for games to read, so it goes on :root — scoped to #arcade-nav it would not be inherited by the game's own elements, which are siblings of the bar rather than descendants. */ :root { /* The bar's own height, and the total including an open game drawer. Two variables because the bar reserves the first (so it can't grow when a drawer opens) while games clear the second. */ --arcade-bar-h: 4.6rem; --arcade-nav-h: 4.6rem; } /* nav.js fills this in, and it is empty until then. Without a reserved height the bar pops in on every navigation and shoves the page down — the flicker. */ #arcade-nav { display: block; min-height: var(--arcade-bar-h); } #arcade-nav { --nav-bg: #0b0b1e; --nav-border: #2e2e5e; --nav-card: #15152e; --nav-text: #f5f7ff; --nav-dim: #9a9ad6; --nav-blurple: #5555f2; --nav-blurple-lt: #8a8aff; --nav-indigo: #3737c3; --nav-yellow: #f5cf22; --nav-red: #f55b53; font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--nav-text); } /* ── global clearance on a game page ────────────────────────────────────────── The bar floats over a game (games lay out against 100vh, so a bar in normal flow would push them past the bottom). That leaves the top strip of the viewport covered, so reserve it here, once, for every game: page flow starts under the bar and its drawer, and a game's own top row needs no padding of its own. Anything a game takes out of flow (a fixed HUD, a full-screen overlay) is unaffected by this and still clears the bar itself with --arcade-nav-h. Set on by nav.js, so it is absent when a game runs in its own dev server and the game keeps its full viewport. */ html.arcade-over-game body { box-sizing: border-box; padding-top: var(--arcade-nav-h, 4.6rem); } /* ── top bar (nav.js renders into #arcade-nav on every page) ───────────────── */ /* z-index 500: the bar is global, so it has to win against a game's own layers. Sightlines' full-screen lootbox sits at 50 and used to cover it. Games should keep their own stacking below 500; anything that genuinely belongs over the bar (transient particle effects) goes above it deliberately. */ .nav { position: sticky; top: 0; z-index: 500; background: color-mix(in srgb, #0b0b1e 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--nav-border); } /* A game that asked for navBar: "collapsed". The bar is parked off-screen and a small handle is all that overlaps the game; clicking the handle slides it in. Collapsed, --arcade-nav-h shrinks to the handle so a game clearing the bar only has to clear that. nav.js sets it: games read the variable from :root, and a custom property set on this element can't propagate up to it. */ #arcade-nav.nav-collapsible { min-height: 0; } .nav-collapsible .nav-inner { transform: translateY(-100%); transition: transform 0.22s ease; } .nav-collapsible.is-open .nav-inner { transform: translateY(0); } /* The bar is only a wall across the top while it's actually showing. */ .nav-collapsible { background: none; backdrop-filter: none; border-bottom: 0; pointer-events: none; } .nav-collapsible.is-open { background: color-mix(in srgb, #0b0b1e 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--nav-border); pointer-events: auto; } .nav-collapsible .nav-inner { pointer-events: auto; } .nav-handle { position: absolute; top: 0; left: 1.5rem; display: inline-flex; align-items: center; gap: 0.3rem; height: 1.75rem; padding: 0 0.6rem; border: 1px solid var(--nav-border); border-top: 0; border-radius: 0 0 9px 9px; background: color-mix(in srgb, #0b0b1e 92%, transparent); backdrop-filter: blur(10px); color: var(--nav-dim); cursor: pointer; pointer-events: auto; transition: transform 0.22s ease, color 0.12s ease; } .nav-handle:hover { color: var(--nav-text); } .nav-handle img { display: block; } .nav-handle-caret { font-size: 0.62rem; line-height: 1; transition: transform 0.22s ease; } /* Once open, the handle rides down with the bar and its caret flips to "hide". */ .nav-collapsible.is-open .nav-handle { transform: translateY(var(--arcade-bar-h)); } .nav-collapsible.is-open .nav-handle-caret { transform: rotate(180deg); } /* Over a game: taken out of flow so the game keeps the whole viewport. It covers the top strip of the game rather than shrinking it, which is the only option that works without every game opting in. */ .nav-float { position: fixed; top: 0; left: 0; right: 0; } .nav-inner { position: relative; /* anchor for .nav-drawer */ width: min(2320px, 100% - 6rem); margin: 0 auto; height: 4.6rem; display: flex; align-items: center; gap: 1.5rem; } .nav-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--nav-text); flex-shrink: 0; } /* Sized from the brand artboard. The two files have different amounts of built-in padding — the monogram's ink fills 99% of its box, the wordmark's only 82% — so matching the artboard means matching *ink* heights, not box heights: monogram ink sits 1.55x the wordmark's, with a gap 0.35x of that. Both files centre their ink vertically, so align-items:center is correct. */ .nav-brand-mark, .nav-brand-word { display: block; width: auto; } .nav-brand-mark { height: 2rem; } .nav-brand-word { height: 1.55rem; } .nav-links { display: flex; align-items: center; gap: 0.4rem; margin: 0 auto; } .nav-link { position: relative; padding: 0.5rem 0.95rem; border-radius: 8px; color: var(--nav-dim); text-decoration: none; font-size: 0.98rem; transition: color 0.12s ease, background 0.12s ease; } .nav-link:hover { color: var(--nav-text); background: #ffffff0a; } .nav-link.is-active { color: var(--nav-text); font-weight: 500; } /* Underline only the active tab, inset so it reads as a tab marker. */ .nav-link.is-active::after { content: ""; position: absolute; left: 0.95rem; right: 0.95rem; bottom: -0.35rem; height: 2px; border-radius: 2px; background: var(--nav-blurple-lt); } /* min-height holds the row steady while the account area swaps from the sign-in button to the signed-in menu, which is the second half of the flicker. */ .nav-account { display: flex; align-items: center; justify-content: flex-end; gap: 0.8rem; flex-shrink: 0; min-height: 2.75rem; } /* Optional per-game drawer (Arcade.nav). Pulled down from the bar's bottom edge and only as wide as its contents — full width would read as a second nav bar rather than as part of this one. */ .nav-drawer { position: absolute; top: 100%; left: 0; display: flex; align-items: center; gap: 0.85rem; max-width: 100%; padding: 0.4rem 0.95rem 0.45rem; background: color-mix(in srgb, var(--nav-bg) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--nav-border); border-top: 0; border-radius: 0 0 13px 13px; box-shadow: 0 10px 22px #0006; } .nav-drawer[hidden] { display: none; } .nav-drawer-game { display: inline-flex; align-items: center; gap: 0.45rem; padding-right: 0.85rem; border-right: 1px solid var(--nav-border); font-family: "Poppins", system-ui, sans-serif; font-weight: 600; font-size: 0.92rem; white-space: nowrap; } .nav-drawer-game img { height: 1.15rem; width: auto; display: block; } .nav-drawer-game .nav-drawer-emblem { font-size: 1.05rem; line-height: 1; } /* Nothing but stats: the divider would be a rule with nothing to its left. */ .nav-drawer-game:empty { display: none; } /* ── the actions drawer (right, under the account menu) ───────────────────── A game's own controls live here rather than in the identity drawer on the left: Back, Save, Cancel, and buttons that drop a menu or a small panel of their own so an action like inviting a player costs no page. */ .nav-drawer-tools { left: auto; right: 0; gap: 0.45rem; } .nav-tool { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; font: inherit; font-size: 0.85rem; color: var(--nav-dim); background: var(--nav-card); border: 1px solid var(--nav-border); border-radius: 999px; padding: 0.28rem 0.75rem; cursor: pointer; white-space: nowrap; transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease; } .nav-tool:hover:not(:disabled) { color: var(--nav-text); border-color: var(--nav-blurple); } .nav-tool:disabled { opacity: 0.45; cursor: default; } .nav-tool.is-primary { color: #fff; background: var(--nav-blurple); border-color: var(--nav-blurple); font-weight: 600; } .nav-tool.is-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--nav-blurple) 85%, #fff); } .nav-tool img { width: 1em; height: 1em; display: block; } .nav-tool-caret { font-size: 0.7em; opacity: 0.8; } .nav-tool[aria-expanded="true"] { color: var(--nav-text); border-color: var(--nav-blurple); } /* The dropdown. Anchored to the drawer's right edge so a wide panel grows inward instead of off the side of the window. */ .nav-tool-pop { position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 5; min-width: 12rem; max-width: min(22rem, 90vw); padding: 0.4rem; background: var(--nav-card); border: 1px solid var(--nav-border); border-radius: 12px; box-shadow: 0 16px 40px #000a; text-align: left; white-space: normal; } .nav-tool-menu { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.3rem; } .nav-tool-item { display: flex; align-items: center; gap: 0.45rem; font: inherit; font-size: 0.86rem; text-align: left; color: var(--nav-text); background: none; border: 0; border-radius: 8px; padding: 0.45rem 0.6rem; cursor: pointer; } .nav-tool-item:hover:not(:disabled) { background: color-mix(in srgb, var(--nav-blurple) 22%, transparent); } .nav-tool-item:disabled { opacity: 0.45; cursor: default; } .nav-tool-item img { width: 1em; height: 1em; display: block; } /* Panel content a game supplies. The arcade styles the furniture so a dozen games can't produce a dozen different-looking dropdowns. */ .nav-tool-pop input[type="text"], .nav-tool-pop input[type="search"] { width: 100%; font: inherit; font-size: 0.86rem; color: var(--nav-text); background: var(--nav-bg); border: 1px solid var(--nav-border); border-radius: 8px; padding: 0.4rem 0.6rem; } .nav-tool-pop input:focus-visible { outline: 2px solid var(--nav-blurple); outline-offset: 1px; } .nav-tool-pop p { margin: 0.45rem 0 0; color: var(--nav-dim); font-size: 0.8rem; } .nav-tool-pop p a { color: var(--nav-blurple-lt); } /* A list of choices inside a panel — search hits, players, saves. */ .nav-tool-pop .np-results:not(:empty) { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.4rem; } .nav-tool-pop .np-item { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; font: inherit; font-size: 0.86rem; text-align: left; color: var(--nav-text); background: none; border: 0; border-radius: 8px; padding: 0.4rem 0.55rem; cursor: pointer; } .nav-tool-pop .np-item:hover { background: color-mix(in srgb, var(--nav-blurple) 22%, transparent); } .nav-tool-pop .np-item small { color: var(--nav-dim); font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; } .nav-game { display: flex; align-items: center; gap: 0.5rem; min-width: 0; overflow-x: auto; } .nav-stat { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border: 1px solid var(--nav-border); background: var(--nav-card); border-radius: 999px; font-size: 0.88rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--nav-text); } .nav-stat-icon { font-size: 1em; line-height: 1; } /* The label is the accessible name, not visible text. .arc-sr only exists inside the SDK's injected toast styles, which a page may never load, so the bar defines its own copy. */ .nav-drawer .arc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .nav-stat-icon img { width: 1.15em; height: 1.15em; display: block; } .nav-stat b { font-weight: 700; } @media (max-width: 900px) { /* The bar wraps to two rows here, so anchoring to its bottom still works. */ .nav-drawer { border-radius: 0 0 11px 11px; padding: 0.35rem 0.7rem; } } .nav-signin { font: inherit; font-weight: 600; font-size: 0.95rem; color: #fff; background: var(--nav-blurple); border: 0; border-radius: 10px; padding: 0.6rem 1.35rem; cursor: pointer; transition: background 0.12s ease, transform 0.12s ease; } .nav-signin:hover { background: var(--nav-blurple-lt); transform: translateY(-1px); } /* Name over score, to the right of the avatar in the account trigger. The score is gold, per the design; it exists only for a signed-in player. */ .aa-who { display: flex; flex-direction: column; align-items: flex-start; gap: 0.08rem; line-height: 1.15; /* A floor, so a short name ("dev" on localhost) doesn't collapse the trigger to a stub. The name still ellipsises at its own max-width above this. */ min-width: 7rem; } .aa-who-name { font-weight: 600; font-size: 0.92rem; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aa-gs { display: inline-flex; align-items: center; gap: 0.28rem; /* Rendered empty until the score arrives, so reserve the line and the top bar never jumps when it does. */ min-height: 1.05em; color: var(--nav-yellow); font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .aa-gs b { font-weight: 700; } .aa-gs span { font-size: 0.9em; opacity: 0.85; } .aa-gs .gs-badge { width: 1.15em; height: 1.15em; flex: 0 0 auto; } @media (max-width: 760px) { /* Both drawers hang off the same edge, one left, one right. Once they would collide, the actions drop below the identity strip. --arcade-drawer-h is the identity drawer's measured height, published by the SDK. */ .nav-drawer-tools { top: calc(100% + var(--arcade-drawer-h, 0px) + 2px); } } @media (max-width: 900px) { .nav-inner { flex-wrap: wrap; height: auto; padding: 0.8rem 0; gap: 0.8rem; } .nav-links { order: 3; width: 100%; margin: 0; overflow-x: auto; } .nav-account { margin-left: auto; } .aa-who { min-width: 5.5rem; } .aa-who-name { max-width: 7rem; } } /* ── account menu (inside the top bar) ─────────────────────────────────────── */ .aa-wrap { position: relative; } .aa-trigger { display: flex; align-items: center; gap: 0.35rem; font: inherit; color: var(--nav-text); background: none; border: 1px solid var(--nav-border); border-radius: 999px; padding: 0.28rem 0.7rem 0.28rem 0.3rem; cursor: pointer; transition: border-color 0.12s ease; } .aa-trigger:hover { border-color: var(--nav-blurple); } .aa-avatar { width: 2.05rem; height: 2.05rem; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: radial-gradient(circle at 38% 32%, var(--nav-blurple-lt), var(--nav-indigo) 85%); color: #fff; font-weight: 800; font-size: 0.82rem; border: 1px solid color-mix(in srgb, var(--nav-blurple-lt) 60%, transparent); } .aa-caret { color: var(--nav-dim); font-size: 0.72rem; } .aa-menu { position: absolute; top: calc(100% + 0.6rem); right: 0; min-width: 14rem; background: var(--nav-card); border: 1px solid var(--nav-border); border-radius: 12px; padding: 0.4rem; box-shadow: 0 16px 40px #000a; display: flex; flex-direction: column; gap: 0.15rem; z-index: 50; } .aa-menu[hidden] { display: none; } .aa-id { padding: 0.5rem 0.6rem 0.6rem; border-bottom: 1px solid var(--nav-border); margin-bottom: 0.25rem; } .aa-name { font-weight: 700; font-size: 0.95rem; } .aa-email { color: var(--nav-dim); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aa-item { font: inherit; text-align: left; color: var(--nav-text); background: none; border: 0; border-radius: 8px; padding: 0.5rem 0.6rem; cursor: pointer; text-decoration: none; display: block; width: 100%; } .aa-item:hover { background: color-mix(in srgb, var(--nav-blurple) 22%, transparent); } .aa-signout { color: var(--nav-red); } .aa-signin { font: inherit; font-weight: 600; color: #fff; background: var(--nav-blurple); border: 0; border-radius: 10px; padding: 0.6rem 1.3rem; cursor: pointer; } .aa-signin:hover { background: var(--nav-blurple-lt); } .gs-badge { width: 1em; height: 1em; flex: 0 0 auto; overflow: visible; }