* emptied, or is it already used by two different pages? If not, it belongs in * the site's own stylesheet. * * EDITED ON donutsmpstats ONLY, then copied to the other sites. Editing a copy * in place is how two navs that are almost the same get created. * * Load order: tokens.css -> shell.css -> .css * shell-version: 1 * ============================================================ */ @keyframes ndVeil { from { opacity: 0; } to { opacity: 1; } } /* Gentle staggered entrance for the search shell so it eases in on load instead of hard-flashing. Each element rises + fades with a small delay. */ @keyframes shellRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes searchShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } @keyframes feedPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } } @keyframes feedSkel { 0%,100% { opacity: .30; } 50% { opacity: .5; } } @keyframes mcGlint { from { background-position: 160% 0; } to { background-position: -60% 0; } } @keyframes feedNew { 0% { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(3,111,255,0.28), 0 6px 20px rgba(3,111,255,0.30); } 55% { border-color: var(--blue-border); box-shadow: 0 0 0 1px rgba(3,111,255,0.10), 0 4px 14px rgba(0,0,0,0.35); } 100% { border-color: var(--border); box-shadow: 0 4px 14px rgba(0,0,0,0.35); } } @keyframes ah-delta-a { 0%, 69% { opacity: 1; } 72%, 100% { opacity: 0; } } @keyframes ah-delta-b { 0%, 69% { opacity: 0; } 72%, 100% { opacity: 1; } } /* 4s total = 2s a side. */ @keyframes ah-alt-a { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes ah-alt-b { 0%, 45% { opacity: 0; } 50%, 100% { opacity: 1; } } @keyframes set-confirm-in { from { opacity: 0; } to { opacity: 1; } } @keyframes set-confirm-rise { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes ox-nudge { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } @keyframes proTagShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes navProShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes ahGlint { from { background-position: 140% 0; } to { background-position: -140% 0; } } /* A refused click has to say so. Silence reads as a broken control, and "I clicked it and nothing happened" makes people conclude the site is broken rather than that the feature is bought. */ @keyframes setProBump { 0% { transform: translateX(0); } 25% { transform: translateX(-3px); } 55% { transform: translateX(3px); } 100% { transform: translateX(0); } }/* Fonts are loaded in (preconnect + stylesheet link) so they're available on first paint — no @import here, which loads fonts too late. */ * { box-sizing: border-box; } /* ── Custom overlay scrollbar ────────────────────────────────────────────── Native scrollbar is hidden so it never reserves width (no page shift). A floating JS-driven thumb (scrollbar.js) overlays the page and is inset to start below the nav and end above the footer. */ html { scrollbar-width: none; /* Firefox: hide native */ -ms-overflow-style: none; /* old Edge/IE */ } /* Chrome/Safari */ .ov-scroll-track { position: fixed; right: 4px; width: 10px; z-index: 200; border-radius: 100px; opacity: 0; /* `right` animates with the chat panel's own slide so the bar travels with it rather than jumping when it lands. Same curve and duration oxmessaging uses. */ transition: opacity .2s, right .28s cubic-bezier(.4,0,.2,1); background: transparent; } /* With the chat open the scrollbar moves INBOARD of the panel. This is the request I twice said could not be done — and I was wrong about why. The earlier attempts tried to narrow the ROOT so the native scrollbar would land inside, which breaks every fixed element on the page. But the native bar is hidden (above) and what you actually see is this div, which is ours to place. Moving it is one line, and nothing about the page layout changes at all. */ html.oxchat-open .ov-scroll-track { right: calc(var(--oxchat-w, 284px) + 4px); } .ov-scroll-thumb { position: absolute; left: 1px; right: 1px; top: 0; width: 8px; border-radius: 100px; background: rgba(3,111,255,0.28); transition: background .15s; cursor: grab; } .ov-scroll-track:hover .ov-scroll-thumb { background: rgba(3,111,255,0.42); } .ov-scroll-track.dragging .ov-scroll-thumb { background: rgba(3,111,255,0.6); cursor: grabbing; } html, body { margin: 0; padding: 0; background: var(--page-bg); color: var(--text); font-family: var(--font); /* Prevent click-drag text selection site-wide, like donutsmp.bet */ user-select: none; -webkit-user-select: none; } /* Scrollbar only appears when the page actually overflows (auto, not scroll). overflow-x hidden guards against any horizontal bar from transient layout. */ html { overflow-x: hidden; } /* vertical scroll works; native bar hidden above */ /* Full-height flex column so the footer pegs to the bottom of the viewport even when page content is short (matches donutsmp.bet). The element right before .footer flexes to fill the gap. */ body { display: flex; flex-direction: column; min-height: 100vh; } body > .footer { margin-top: auto; } .container, .search-shell { flex: none; } /* ── Global hover tooltip (matches donutsmp.bet .hover-tip) ── */ .hover-tip { position: fixed; z-index: 10002; background: #1e2130; border: 1px solid #2e3247; color: #b9c0d8; font-family: var(--font); font-size: 11px; font-weight: 600; /* pre-line renders the \n in multi-line tips (the sales feed sends item / price / seller on separate lines). textContent preserves them; without this they'd collapse into one run-on line. */ white-space: pre-line; line-height: 1.5; padding: 5px 10px; border-radius: 7px; pointer-events: none; text-align: center; opacity: 0; transform: translateY(4px); transition: opacity 0.14s ease, transform 0.14s ease; box-shadow: 0 6px 20px rgba(0,0,0,0.4); } .hover-tip.is-visible { opacity: 1; transform: translateY(0); } /* ---------- navbar ---------- */ .navbar { display: grid; grid-template-columns: 1fr auto 1fr; /* left | centered links | right */ align-items: center; padding: 8px 32px; border-bottom: 1px solid var(--border-soft); /* Stay pinned to the top while scrolling. */ position: sticky; top: 0; z-index: 150; background: var(--page-bg); backdrop-filter: blur(8px); } .nav-left { display: flex; align-items: center; justify-self: start; } /* Brand: bigger logo than text, text grows on hover (matches donutsmp.bet) */ .brand { display: flex; align-items: center; /* vertically centers text to the logo */ gap: 11px; cursor: pointer; user-select: none; flex-shrink: 0; } .brand img { width: 48px; height: 48px; border-radius: 11px; flex-shrink: 0; display: block; /* logo stays fixed size — only the text scales on hover */ } .brand-text { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; /* Sora's glyphs sit optically high within their line box (lots of unused descender space below, since the wordmark has no descenders). Centering the line box therefore leaves the visible letters looking high. Fix: collapse the line box to the cap height and nudge down a hair so the VISIBLE letters — not the empty box — center against the logo. */ display: inline-block; line-height: 1; transform: translateY(0.04em); transform-origin: left center; transition: transform 0.18s cubic-bezier(0.34, 1.3, 0.64, 1); } .brand:hover .brand-text { transform: translateY(0.04em) scale(1.07); } .brand .white, .mob-topbar-logo .white, .mob-drawer-head .white { color: rgba(255,255,255,0.95); } .brand .blue, .mob-topbar-logo .blue, .mob-drawer-head .blue { color: var(--blue); } .nav-links { display: flex; align-items: center; gap: 22px; font-size: 13px; font-weight: 600; color: var(--text-mid); /* CENTRED ON THE PAGE, not on the leftover space. * * The grid is `1fr auto 1fr`, and a bare 1fr is minmax(AUTO, 1fr) — it will * not shrink below its content. So the moment one side outgrows its track * (a long username, the promo pill changing face, "Sign in" becoming an * account chip) that side pushes its own track wider and slides the middle * one off centre. The links then MOVE as you sign in, or every seven seconds * as the pill morphs. Exactly the bug that put the server-stats tab off * centre, in a different file. * * Taking the links out of the flow removes the dependency entirely: they are * positioned against the navbar itself, so no width on either side can reach * them. The navbar is position:sticky, which is a positioned ancestor, so it * is already the containing block. */ position: absolute; left: 50%; transform: translateX(-50%); } /* Taking .nav-links out of the flow left the grid with THREE columns and only TWO items — so nav-right fell into column 2, the middle, and the sign-in chip and promo pill centred themselves alongside the links. The two remaining items are pinned explicitly rather than left to auto-placement. */ .nav-left { grid-column: 1; justify-self: start; } .nav-right { grid-column: 3; justify-self: end; } /* Dropdown entries are links only so they can leave the origin — they are rows in a menu, not links in prose, and the underline was the browser's default showing through on the one kind of nav item that is a real . */ .nav-dropdown-menu a { text-decoration: none; } .nav-links > a, .nav-links > span[data-href], .nav-links > .nav-dropdown > .nav-dropdown-trigger { color: var(--text-mid); cursor: pointer; transition: color 0.12s; font-family: var(--font); font-size: 13px; font-weight: 600; } .nav-links a:hover, .nav-links a.active, .nav-links span[data-href]:hover, .nav-links span[data-href].active, .nav-links .nav-dropdown:hover .nav-dropdown-trigger, .nav-links .nav-dropdown.open .nav-dropdown-trigger { color: var(--text); } /* ── Dropdown ── */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font); font-size: 13px; font-weight: 600; background: none; border: none; padding: 0; } .nav-dropdown-trigger svg { width: 12px; height: 12px; transition: transform 0.18s; } /* chevron rotation handled by .open rule */ .nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 180px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transition: opacity 0.15s, transform 0.15s, visibility 0.15s; z-index: 50; box-shadow: 0 12px 32px rgba(0,0,0,0.4); } /* Dim the page while the Other menu is open, matching the search + time menus. */ .nav-dropdown-veil { position: fixed; inset: 0; z-index: 140; /* Lighter than the search/time veils on purpose — this menu is a small nav affordance, not a focused task, so it shouldn't wall the page off. */ background: rgba(10,10,14,0.18); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: ndVeil .18s ease both; }@media (prefers-reduced-motion: reduce) { .nav-dropdown-veil { animation: none; } } /* small hover bridge so the menu doesn't vanish when moving the cursor down */ .nav-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; } .nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(6px); } .nav-dropdown.open .nav-dropdown-trigger svg { transform: rotate(180deg); } .nav-dropdown-menu { padding: 0; overflow: hidden; background: #0e121b; /* same step-darker surface as the profile menu */ } /* .nav-soon is included explicitly: the row styling keys off [data-href], and a "coming soon" entry deliberately has none — so it inherited nothing and rendered as bare text. It should be the SAME row, just dimmed. */ .nav-dropdown-menu a, .nav-dropdown-menu .nav-soon, .nav-dropdown-menu span[data-href] { /* Full-bleed like every other dropdown: no inset pill, the menu's own overflow:hidden rounds the first/last rows into its corners. */ display: block; border-radius: 0; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-mid); white-space: nowrap; cursor: pointer; transition: background 0.12s, color 0.12s; } .nav-dropdown-menu a:hover, .nav-dropdown-menu span[data-href]:hover { background: var(--card-bg-hover); color: var(--text); } /* stretch, not end: the track now spans the full width from the centred links to the page edge, so the pill has a space to be centred IN. justify-content keeps the account pinned right regardless. */ .nav-right { justify-self: stretch; display: flex; align-items: center; justify-content: flex-end; gap: 14px; font-size: 13px; } .nav-login { color: var(--text-mid); font-weight: 600; } .nav-login:hover { color: var(--text); } .btn-register { background: var(--blue); color: #042c53; font-weight: 700; padding: 8px 18px; border-radius: 8px; border: none; cursor: pointer; font-family: var(--font); font-size: 13px; } .btn-register:hover { background: var(--blue-bright); } /* Discord sign-in button — matches donutsmp.bet's blurple + icon sizing */ .btn-discord-signin { display: inline-flex; align-items: center; gap: 8px; background: #5865F2; color: #fff; font-family: var(--font); font-weight: 700; font-size: 13px; border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer; transition: background 0.15s ease; } .btn-discord-signin svg { width: 18px; height: 18px; flex-shrink: 0; fill: #fff; } .btn-discord-signin:hover { background: #4752c4; } .nav-user { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; font-size: 13px; } .nav-user svg { width: 15px; height: 15px; flex-shrink: 0; fill: #5865F2; } .btn-signout { background: none; border: 1px solid var(--border-bright); color: var(--text-mid); font-family: var(--font); font-weight: 600; font-size: 12px; border-radius: 8px; padding: 7px 14px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .btn-signout:hover { color: var(--text); border-color: var(--blue-border); } /* ---------- signed-in profile pill + connected expanding dropdown ---------- Closed: a clean, flat pill (circular avatar + name + chevron). Open: the body drops below the head as an ABSOLUTE overlay (so it escapes the header and floats over the page) but is styled to read as ONE connected card — same background/border, joined at the seam, with the max-height expand/shrink animation. Plain flat colors, no color morph. */ /* ── the wallet IS the menu ────────────────────────────────────────────────── One bordered, rounded, clipped shell holding the head and the body; it just gets taller. Same construction as the AH search bar. Two elements pretending to be joined is what produced the corner-timing and alignment bugs there — with one element there's nothing to align and no radius to animate. #nav-auth-slot reserves the collapsed height so growth OVERLAYS the header instead of making the header taller. */ /* Reserves the collapsed wallet's box so the menu OVERLAYS the header instead of resizing it. The height was 42px while every control in the row is 34px, which sat the wallet lower than its neighbours. And because the wallet inside is absolute, it contributed no WIDTH either — the slot measured zero and the wallet, pinned to right:0, extended leftward straight over the promo pill. That is the overlap. auth.js measures the collapsed wallet and sets --nav-wallet-w after it renders; the fallback keeps the row sane until it does. */ #nav-auth-slot { position: relative; display: inline-flex; align-items: center; min-height: var(--nav-btn-h); width: var(--nav-wallet-w, auto); min-width: 120px; z-index: 160; } .nav-wallet { position: absolute; top: 0; right: 0; min-width: 100%; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; /* clips the body into the shell's corners */ transition: border-color .15s; } .nav-wallet.open { border-color: var(--blue-border); } .nav-wallet-head { display: flex; align-items: center; gap: 11px; width: 100%; /* Transparent: the shell owns the border, background and radius. */ background: none; border: 0; border-radius: 0; color: var(--text); font-family: var(--font); font-weight: 600; font-size: 13.5px; padding: 5px 15px 5px 5px; cursor: pointer; text-align: left; position: relative; z-index: 2; /* Same corner timing as the search bar: instant on open, delayed until the body has finished collapsing on close. The old .1s ran against the body's .26s max-height, so the corners un-squared while the menu was still open. */ transition: border-color .15s, border-radius 0s linear .26s; } /* Hover moves to the SHELL — the head has no border of its own any more. */ .nav-wallet:not(.open):hover { border-color: var(--border-bright); } /* Nothing to do on open any more: the head has no border or radius of its own, and the body's own border-top is the divider. This used to flatten the head's corners to fake the join — that's what needed the timing hack. */ .nav-wallet-avatar { width: 32px; height: 32px; border-radius: 50%; image-rendering: pixelated; background: var(--surface-3); flex-shrink: 0; object-fit: cover; /* A background under the image so the slot is never blank while it decodes. The menu re-renders on every session check, and an empty box that fills in a moment later reads as a flash. */ background: var(--card-bg-hover, #18203a); background-image: none; } .nav-wallet-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); letter-spacing: -0.01em; } .nav-wallet-chevron { width: 14px; height: 14px; color: var(--text-dim); flex-shrink: 0; transition: transform .22s cubic-bezier(0.34,1.2,0.64,1); } .nav-wallet.open .nav-wallet-chevron { transform: rotate(180deg); } /* Body drops as an absolute overlay just below the head — escapes the header, overlays the page. Same card surface + border, top seam joined to the head. The max-height morph gives the expand/shrink. */ .nav-wallet-body { /* In normal flow INSIDE the shell — growing it grows the shell. No border, no radius, no shadow of its own: the shell provides all of that, so there are no two edges to meet and nothing to keep in sync. */ position: static; width: 100%; /* #0e121b — a step darker than the head, same as the AH search dropdown. */ background: #0e121b; border: 0; border-top: 1px solid transparent; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; gap: 0; padding: 0; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; z-index: 1; /* One curve, one duration — mismatched easings are what stuttered on the search bar. Padding no longer animates because there isn't any. */ /* Slower on purpose — .26s felt snappy to the point of abrupt on a menu this small. One curve, one duration, as always. */ transition: max-height .42s cubic-bezier(0.4,0,0.2,1), opacity .32s cubic-bezier(0.4,0,0.2,1), border-color .42s cubic-bezier(0.4,0,0.2,1); } .nav-wallet.open .nav-wallet-body { max-height: 260px; opacity: 1; pointer-events: auto; border-top-color: var(--border); /* the divider between head and items */ } .nav-wallet-item { display: flex; align-items: center; gap: 11px; width: 100%; /* Edge-to-edge and square: the shell's overflow:hidden clips the last item's hover into the bottom corners, so the fill is always perfect and there's no "last item" special case. */ background: none; border: none; color: var(--text-mid); font-family: var(--font); font-weight: 600; font-size: 13px; padding: 10px 15px; border-radius: 0; cursor: pointer; text-align: left; transition: background .12s, color .12s; } .nav-wallet-item svg { width: 16px; height: 16px; flex-shrink: 0; } /* The Support entry is an rather than a