/* ============================================================ Arena Chrome — shared header (nav) + footer skin ------------------------------------------------------------ The red/black "arena" skin for the site-wide navbar (js/navbar.js → .glass-nav) and the columned footer. Scoped to `body.arena`, so a page opts in by adding class="arena" to and loading this file AFTER css/navbar.css + css/site-footer.css. The body.arena prefix wins over the base gold themes on specificity alone (order-independent). Single source of truth for the chrome on EVERY page, including the homepage. The homepage's v2/css/arena.css owns only the slot-machine / hero body styling now — chrome lives here. Requires the arena display fonts on the page: Barlow Condensed + Chakra Petch (Google Fonts). ============================================================ */ /* Self-contained palette. NOTE: these five values are mirrored in v2/css/arena.css :root (which still uses them for the homepage hero / slot-machine). Keep the two in sync — a one-sided palette tweak would desync the homepage body from the shared chrome. */ body.arena { --red: #e4032e; --red-hot: #ff2b3d; --red-deep: #8f0f1f; --white: #f4f4f5; --muted: #9a9aa3; } /* ---------- Header / navbar ---------- */ body.arena .glass-nav { background: rgba(8, 8, 10, .92); border-bottom: 1px solid #1c1c22; box-shadow: 0 12px 38px rgba(0, 0, 0, .36); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.arena .glass-nav::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: min(420px, 46vw); height: 2px; transform: translateX(-50%) skewX(-28deg); background: linear-gradient(90deg, transparent, var(--red), var(--red-hot), transparent); box-shadow: 0 0 18px rgba(255, 43, 61, .42); } body.arena .glass-nav .nav-brand-mark { border-radius: 2px; background: linear-gradient(180deg, var(--red-hot), var(--red-deep)); color: var(--white); font-family: "Chakra Petch", sans-serif; box-shadow: 0 0 18px rgba(228, 3, 46, .35); } body.arena .glass-nav .nav-brand-text { font-family: "Barlow Condensed", sans-serif; font-size: 1.42rem; font-style: italic; font-weight: 900; letter-spacing: .06em; color: var(--white); background: none; -webkit-text-fill-color: currentColor; text-transform: uppercase; } body.arena .glass-nav .nav-link, body.arena .glass-nav .nav-auth-signin, body.arena .nav-menu-item, body.arena .nav-menu-header h3, body.arena .nav-menu-section-label, body.arena .nav-menu-close, body.arena .auth-profile, body.arena .auth-username, body.arena .auth-dropdown-item, body.arena .nav-menu-auth, body.arena .nav-menu-auth-user, body.arena .nav-menu-dashboard, body.arena .nav-menu-signout, body.arena .auth-modal, body.arena .auth-modal button, body.arena .auth-modal input, body.arena .auth-modal a { font-family: "Barlow Condensed", sans-serif; font-style: italic; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } body.arena .auth-modal input, body.arena .auth-modal-subtitle, body.arena .auth-field label, body.arena .auth-message, body.arena .auth-confirmation p { font-family: "Chakra Petch", sans-serif; font-style: normal; letter-spacing: .02em; text-transform: none; } body.arena .glass-nav .nav-link { color: rgba(244, 244, 245, .82); border-radius: 2px; font-size: 1rem; } /* Barlow Condensed reads narrower than the base Inter, so the arena header sizes up from the base 0.78rem link / 12px sign-in to stay legible. */ body.arena .glass-nav .nav-auth-signin { font-size: .95rem; } body.arena .glass-nav .nav-link::before { content: "/"; position: absolute; left: 3px; top: 50%; color: var(--red); opacity: 0; transform: translateY(-50%) skewX(-14deg); transition: opacity .2s ease; } body.arena .glass-nav .nav-link:hover, body.arena .glass-nav .nav-link.active { color: var(--red-hot); background: rgba(228, 3, 46, .08); } body.arena .glass-nav .nav-link:hover::before, body.arena .glass-nav .nav-link.active::before { opacity: 1; } body.arena .glass-nav .nav-link.active::after { background: linear-gradient(90deg, transparent, var(--red-hot), transparent); } body.arena .nav-hamburger { border-radius: 2px; border-color: rgba(228, 3, 46, .35); background: rgba(228, 3, 46, .08); } body.arena .nav-hamburger:hover { border-color: rgba(255, 43, 61, .75); background: rgba(228, 3, 46, .16); } body.arena .nav-hamburger span { background: var(--red-hot); } body.arena .nav-slide-menu { background: rgba(8, 8, 10, .96); border-left-color: rgba(228, 3, 46, .35); } /* ---------- Footer — columned sitemap + support card ---------- */ body.arena .site-footer { margin-top: 42px; padding: 3rem 2rem 2.25rem; color: var(--muted); background: linear-gradient(180deg, rgba(8, 8, 10, .34), rgba(8, 8, 10, .82)); border-top-color: rgba(255, 43, 61, .22); font-family: "Chakra Petch", sans-serif; text-align: left; } body.arena .site-footer::before { background: linear-gradient(90deg, transparent, rgba(255, 43, 61, .46), transparent); } /* Top region: nav columns + support card, centered as a group */ body.arena .footer-top { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 36px 72px; } /* Grid of stacked, titled link columns (overrides the shared wrapping row) */ body.arena .footer-nav { display: grid; grid-template-columns: repeat(3, minmax(140px, auto)); gap: 30px 60px; margin: 0; font-size: .82rem; } body.arena .footer-col { display: flex; flex-direction: column; gap: 9px; } body.arena .footer-col-title { margin: 0 0 12px; padding-bottom: 8px; font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red-hot); border-bottom: 1px solid rgba(255, 43, 61, .18); } body.arena .footer-nav a { width: -moz-fit-content; width: fit-content; padding: 2px 0; font-size: .82rem; } body.arena .footer-author-link, body.arena .footer-nav a, body.arena .footer-feedback-link { color: rgba(244, 244, 245, .74) !important; } body.arena .footer-author-link:hover, body.arena .footer-nav a:hover, body.arena .footer-feedback-link:hover { color: var(--red-hot) !important; text-shadow: 0 0 10px rgba(255, 43, 61, .45); } body.arena .footer-nav a::after, body.arena .footer-feedback-link::after { background: var(--red-hot) !important; } /* Support / tip card — visible but not desperate */ body.arena .footer-support { flex: 0 1 320px; max-width: 340px; padding: 20px 22px 22px; border: 1px solid rgba(255, 43, 61, .24); border-radius: 12px; background: radial-gradient(130% 150% at 100% 0%, rgba(228, 3, 46, .16), transparent 58%), linear-gradient(180deg, rgba(20, 20, 24, .72), rgba(12, 12, 15, .5)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 32px rgba(0, 0, 0, .38); } body.arena .footer-support-lead { margin: 0 0 8px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.16rem; letter-spacing: .01em; color: var(--white); } body.arena .footer-support-sub { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--muted); } body.arena .footer-tip-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 11px 18px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.02rem; letter-spacing: .05em; text-transform: uppercase; color: #fff; text-decoration: none; border: 1px solid rgba(255, 90, 105, .5); border-radius: 9px; background: linear-gradient(180deg, var(--red-hot), var(--red) 55%, var(--red-deep)); box-shadow: 0 6px 18px rgba(228, 3, 46, .35), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .15s ease, box-shadow .25s ease, filter .2s ease; } body.arena .footer-tip-btn:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 26px rgba(228, 3, 46, .5), inset 0 1px 0 rgba(255, 255, 255, .3); } body.arena .footer-tip-btn:active { transform: translateY(0); } body.arena .footer-tip-ico { font-size: 1.1rem; line-height: 1; } /* Bottom fine-print bar */ body.arena .footer-bottom { max-width: 1080px; margin: 32px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 43, 61, .12); text-align: center; } body.arena .footer-credit { margin: 0 0 6px; font-size: .8rem; color: var(--muted); } body.arena .footer-disclaimer { margin: 0; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: rgba(154, 154, 163, .58); } /* ---------- Responsive ---------- */ @media (max-width: 860px) { body.arena .footer-support { flex-basis: 100%; max-width: 480px; } } @media (max-width: 768px) { body.arena .glass-nav { padding: 0 12px; } body.arena .glass-nav .nav-brand-text { font-size: 1.08rem; } /* Keep the sign-in button compact in the 48px mobile bar (the desktop .95rem override above would otherwise leak down and crowd it). */ body.arena .glass-nav .nav-auth-signin { font-size: .82rem; } body.arena .footer-nav { grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 24px 32px; } body.arena .footer-nav a { padding: 6px 0; min-height: 34px; display: inline-flex; align-items: center; } } @media (max-width: 400px) { body.arena .footer-nav { gap: 20px 18px; } }