/* RustyRoam — dark industrial + blue theme (re-themed from the original rust/orange look; CSS vars below are still named --gold/--orange/--rust for minimal churn across every file that references them — only their hex values changed) */ /* Google Fonts are linked from each page's (with preconnect), not @import'ed here -- an @import only starts after this whole file loads. */ :root { --bg: #0a0d13; --bg-panel: #131826; --bg-panel-2: #1a2033; --bg-panel-3: #1f2740; --deposit-card-bg: #232b42; /* deposit/withdraw cards -- a step above bg-panel-3 so cards separate from the page, dark like the rest of the site (was #41475d, restyled 2026-09-29) */ --border: #2c3450; --border-soft: #212942; --gold: #2f7dfd; --orange: #1b56c9; --rust: #123a7a; /* Shared elevation/accent tokens. Before these, every panel/card/tile hand-rolled its own shadow + hover glow, which is why surfaces read flat and slightly inconsistent from page to page -- one source of truth now, so a depth tweak lands everywhere at once. */ --accent-wash: rgba(47,125,253,0.09); --accent-glow: rgba(47,125,253,0.22); --edge-hi: rgba(255,255,255,0.07); /* 1px top highlight -- fakes a lit top edge */ --elev-1: 0 2px 6px rgba(0,0,0,0.35), 0 10px 28px rgba(0,0,0,0.30); --elev-2: 0 4px 10px rgba(0,0,0,0.40), 0 18px 44px rgba(0,0,0,0.38); --ring: 0 0 0 2px rgba(47,125,253,0.55), 0 0 0 5px rgba(47,125,253,0.14); --text: #eceff5; --text-dim: #8a91a6; /* Rarity colors: trash brown, common grey, uncommon light green, rare light blue, epic purple, legendary orange, mythic gold -- per spec. rare/epic/mythic reuse the previous uncommon/rare/epic hexes (already proven to read well on this dark background), just shuffled to the ranks whose requested color they actually match. */ --trash: #8b5e34; --common: #9e9e9e; --uncommon: #6ee86e; --rare: #4fc3f7; --epic: #b452f0; --legendary: #ff9d3d; --mythic: #f5c518; --good: #35d07f; --bad: #ff5c5c; --display-font: 'Oswald', 'Segoe UI', Arial, sans-serif; --body-font: 'Inter', 'Segoe UI', Arial, sans-serif; } * { box-sizing: border-box; } html { scrollbar-color: var(--rust) var(--bg); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: #1a2f52; border-radius: 8px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--rust); } body { margin: 0; font-family: var(--body-font); /* Layers, back to front: base vertical gradient, a cool glow under the navbar, a warmer counter-glow low-left so the lower half of long pages isn't dead flat black, and a fine dot grid instead of the old 2px diagonal stripes (the stripes read as moire/noise once a page had any real content on it; a 3px dot on a 22px pitch gives the same "industrial surface" hint without competing with the UI). */ background: radial-gradient(rgba(255,255,255,0.028) 1px, transparent 1px) 0 0 / 22px 22px, radial-gradient(ellipse 700px 520px at 8% 88%, rgba(47,125,253,0.05) 0%, transparent 65%), radial-gradient(ellipse 900px 600px at 50% -10%, rgba(47,125,253,0.12) 0%, transparent 60%), linear-gradient(180deg, #131826 0%, #0b0e14 45%, #050609 100%); background-attachment: fixed; color: var(--text); min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Homepage only: the same diamond plate as .game-tabs-bar behind the whole page, dimmed under a dark wash so the games panel's brighter plate still reads as the raised centrepiece on top of it. */ body.home { background: radial-gradient(ellipse 700px 520px at 8% 88%, rgba(47,125,253,0.05) 0%, transparent 65%), radial-gradient(ellipse 900px 600px at 50% -10%, rgba(47,125,253,0.12) 0%, transparent 60%), linear-gradient(180deg, rgba(10,13,20,.5) 0%, rgba(7,9,14,.68) 45%, rgba(4,5,8,.82) 100%), url('/img/textures/diamond-plate.png?v=1') 0 0 / 128px 128px repeat, #0b0e14; background-attachment: fixed; } a { color: var(--gold); text-decoration: none; } h1, h2, h3 { font-family: var(--display-font); font-weight: 700; /* Oswald is already a condensed face; the old +0.4px tracking on top of that made every heading on the site read slightly loose and washed out. Tightened, with the size-proportional bump kept only where caps genuinely need the air (see .section-title / .hero-home h1). */ letter-spacing: 0.2px; margin: 0 0 8px; } /* One keyboard-focus treatment for the whole site. There was none before -- tabbing through a page gave you the browser default outline on some controls and nothing at all on the div-based ones. :focus-visible (not :focus) so mouse clicks don't light buttons up. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; /* box-shadow only -- a ring drawn this way already follows whatever border-radius the element has (pills, the round odds button), so no radius is forced here. */ box-shadow: var(--ring); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } .navbar { display: flex; align-items: center; padding: 14px 28px; /* Was a flat 2px --gold rule across the whole width, which read as a hard divider bar. Now a 1px hairline that's brightest under the logo and fades toward both ends, drawn as a ::after so it can be a gradient. The navbar also gets a slight blur behind it since it's sticky and content scrolls under. */ /* Stays fully opaque, and deliberately has NO backdrop-filter. .brand-logo below relies on mix-blend-mode:screen to make its source PNG's solid black background disappear into the bar -- that blend resolves against whatever is actually behind the logo, so the moment this bar goes translucent (or backdrop-filter gives it its own stacking context) the black square stops cancelling out and shows as a grey box around the logo. Confirmed live. Frosted glass here costs the logo. */ background: linear-gradient(180deg, #171d2e 0%, #0d1119 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 6px 22px rgba(0,0,0,0.55); flex-wrap: wrap; gap: 10px; position: sticky; top: 0; z-index: 100; } .navbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(47,125,253,0.25) 12%, var(--gold) 50%, rgba(47,125,253,0.25) 88%, transparent 100%); box-shadow: 0 0 14px rgba(47,125,253,0.4); pointer-events: none; } .brand { display: flex; align-items: center; justify-content: center; } .brand-logo { height: 80px; /* 2x (owner request, 2026-09-15; was 40px) */ width: auto; display: block; /* the source PNG has a solid black background (no alpha) — screen blend makes pure black vanish into the navbar's near-black gradient so only the logo mark/text show, instead of a visible dark rectangle */ mix-blend-mode: screen; } /* Wraps nav-links + nav-right so they share the navbar's remaining width as their own row, independent of .brand's own width -- see the @media block below, where .brand becomes a fixed-width column and this needs to keep filling whatever's left of it rather than being squeezed by a 3-way space-between across the whole bar. */ .navbar-body { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 10px; flex-wrap: wrap; min-width: 0; } .nav-links { display: flex; gap: 22px; flex-wrap: wrap; } .nav-links a { font-family: var(--display-font); color: var(--text-dim); font-weight: 600; font-size: 14px; letter-spacing: 0.3px; text-transform: uppercase; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .12s ease, border-color .12s ease; } .nav-links a:hover, .nav-links a.active { color: var(--gold); border-color: var(--gold); } /* Games dropdown. Eighteen games can't each have a top-level nav link, and before this the nav's answer to "where are the games" was Crates and nothing else -- every other game was reachable only from the homepage grid or by typing the URL, so once you were inside a game there was no way to reach another one without going back Home first (owner request, 2026-09-19). Laid out as a 3-column grid so all eighteen fit in a panel that's still shorter than the viewport. */ .nav-games-wrap { position: relative; } .nav-games-toggle { font-family: var(--display-font); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; color: var(--text-dim); font-weight: 600; font-size: 14px; letter-spacing: 0.3px; text-transform: uppercase; padding: 6px 2px; transition: color .12s ease, border-color .12s ease; } .nav-games-toggle::after { content: '\25BE'; margin-left: 5px; font-size: 10px; vertical-align: 1px; } .nav-games-toggle:hover { color: var(--gold); border-bottom-color: var(--gold); } .nav-games-menu { position: absolute; top: calc(100% + 8px); left: 0; display: grid; grid-template-columns: repeat(3, minmax(112px, 1fr)); gap: 2px; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 200; } /* Overrides .nav-links a above -- these are menu rows, not nav tabs, so they drop the uppercase display face and the underline-on-hover. */ .nav-games-menu a { font-family: var(--body-font); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: var(--text); padding: 8px 10px; border-bottom: none; border-radius: 6px; white-space: nowrap; } .nav-games-menu a:hover { background: var(--bg-panel-3); color: var(--gold); border-color: transparent; } @media (max-width: 640px) { .nav-games-menu { grid-template-columns: repeat(2, minmax(104px, 1fr)); } } .nav-right { display: flex; align-items: center; gap: 14px; } /* Desktop + a chat sidebar actually below it (js/nav.js sets this class off the same signed-in check chat.js uses to decide whether to render at all) -- the logo moves into the navbar's own strip directly above the sidebar (pulled out of the normal flex row so it lands in the 280px column #nav-root's negative margin opens up below, rather than after .navbar's padding-left like nav-links/nav-right) instead of living inside .chat-sidebar itself (see .chat-sidebar-brand below, hidden here so it isn't shown twice). .navbar is position:sticky, which -- same as relative/absolute/fixed -- still counts as "positioned" and establishes the containing block left/top/bottom below measure against, so left:0 lands at .navbar's own left edge. Narrower screens / signed-out visitors keep the navbar's logo exactly as before (normal in-flow flex item), since there the sidebar is either collapsed by default (mobile) or never rendered at all (signed out) and wouldn't have a strip to line up with. Scoped to :not(.chat-collapsed) same as the #nav-root/.navbar rules below -- with the sidebar collapsed, .navbar isn't pushed/widened either (confirmed live: without this scoping the 280px-wide absolute .brand sat on top of "HOME/CRATES/REWARDS" once .navbar's own padding-left shrank back to normal), so .brand falls back to its plain in-flow style same as the no-sidebar case, and the sidebar's own logo (offscreen anyway while collapsed) is left alone rather than force-hidden. */ @media (min-width: 1300px) { body.nav-has-sidebar:not(.chat-collapsed) .navbar .brand { position: absolute; left: 0; top: 0; bottom: 0; width: 280px; } body.nav-has-sidebar:not(.chat-collapsed) .chat-sidebar-brand { display: none; } /* .navbar is sticky, not fixed -- it's a normal body child, so body's own padding-left:280px reserved for the fixed sidebar (below) shoves the WHOLE navbar box (its background/border/shadow included) 280px to the right along with it, same as any other body content. The fixed sidebar doesn't cover that gap either -- it only starts below the navbar's own height (js/chat.js's positionChatBelowNavbar()) -- so the result was a blank rectangle at the very top-left, above the sidebar's logo, with neither the navbar's background nor the sidebar painted into it (confirmed live via a user screenshot). #nav-root breaks back out to full viewport width (negative margin cancels the inherited padding, width compensates for what that margin ate off the right edge) so the navbar's own background/border spans edge-to-edge like before, while .navbar's own padding-left keeps its actual content (nav-links etc, .brand is hidden above anyway) indented past where the sidebar sits, lining up with the page content to its right. Scoped to :not(.chat-collapsed) same as the body padding rule itself -- with the sidebar collapsed there's no padding to cancel out in the first place. */ body.nav-has-sidebar:not(.chat-collapsed) #nav-root { margin-left: -280px; width: calc(100% + 280px); } body.nav-has-sidebar:not(.chat-collapsed) .navbar { padding-left: 308px; /* 280px sidebar width + the navbar's own normal 28px */ } } /* Wallet dropdown (js/nav.js) -- replaces the old plain "Deposit/Withdraw" button. Anchored to its own wrapper (position:relative) so the menu floats under just the Wallet button, not the whole navbar. */ .wallet-menu-wrap { position: relative; } .wallet-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 200; } /* Deposit/Withdraw are plain nav-style links now (own pages, /deposit and /withdraw -- see js/nav.js), not buttons that open a modal -- Free Frags is still a real button (opens the Free Frags modal in place), so both need to look identical in this dropdown despite being different elements. */ .wallet-menu button, .wallet-menu a { display: block; background: transparent; border: none; color: var(--text); text-align: left; padding: 9px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; font-family: inherit; text-decoration: none; } .wallet-menu button:hover, .wallet-menu a:hover { background: var(--bg-panel-3); color: var(--gold); } /* Free Frags modal (js/nav.js) -- the list Wallet -> Free Frags opens into. */ .free-frags-list { display: flex; flex-direction: column; gap: 8px; } .free-frags-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); cursor: pointer; text-align: left; font-family: inherit; font-size: 14px; } .free-frags-item:hover:not(.free-frags-item-disabled) { border-color: var(--gold); } .free-frags-item-disabled { opacity: 0.5; cursor: default; } .free-frags-item-icon { font-size: 22px; flex-shrink: 0; } /* Faucet view within the Free Frags modal -- swapped into #free-frags-body same as renderPromoCodeEntry() below it, not a separate page anymore (used to be testgame/faucet.html/.js, still there for direct links but the nav entry point now opens this instead). Text-centered layout matches what that standalone page looked like, just without its own