/* ============================================================ Shared Body Theme ---------------------------------------------------------------- Consolidated body, navbar, grid, footer, and upload-style page chrome. Pages with `class="site-body"` on get the same global chrome regardless of which page-specific stylesheet loads after this one. ============================================================ */ /* ── Body font ── Sets Geist on and lets normal inheritance carry it to descendants. This relies on: - Font Awesome's own `.fa-solid`/`.fa-regular`/`.fa-brands` rules setting `font-family` directly on each icon element (so icons keep their FA font; we don't need to :not()-exclude them here). - H1 display-font rules like `.dash-title { font-family: var(--font-display) }` being direct selectors — they win over the inherited body font. Form elements don't inherit `font-family` from UA stylesheets, so they need an explicit override below. The previous incarnation used `.site-body *:not(.fas):not(.far)...` to FORCE Geist on every descendant. That had specificity (0, 8, 0) and silently overrode every normal `var(--font-display)` rule in the site (`.dash-title` span children, page-title spans, etc.). Inheritance avoids that entirely. */ .site-body { font-family: var(--font-sans); } .site-body input, .site-body textarea, .site-body select, .site-body button { font-family: inherit; } /* ── Body surface + sticky-footer flex layout ── The flex column + min-height pattern lets `#main-content` stretch to fill the viewport so the footer sits at the bottom on short pages. Templates that already set the same Tailwind classes (`flex flex-col min-h-screen`) on aren't affected. */ .site-body { background-color: var(--color-bg); isolation: isolate; position: relative; display: flex; flex-direction: column; min-height: 100vh; padding-top: var(--navbar-height, 80px); } /* Disable the default body::before gradient on .site-body pages - keeps the dark surface flat so chrome and content read clean. */ .site-body::before { content: none; } /* Hero title: keep Geist + extra descender padding so the background-clip: text trick doesn't crop the bottom of letters. */ .site-body .hero-title-gradient { font-family: var(--font-sans); font-weight: 700; padding-bottom: 0.1em; } /* ── Navbar chrome: opaque surface, blurred, subtle border ── Link and brand colors for shared public chrome. */ .site-body .site-brand { color: var(--color-text); } .site-body .site-brand:hover { color: #ffffff; } .site-body .nav-link { color: var(--color-text-muted); } .site-body .nav-link:hover { color: var(--color-text); background: transparent; } .site-body .nav-link.active { color: #ffffff; } .site-body .nav-link::after { background-color: var(--color-accent-light); } .site-body .lol-discord { color: var(--color-text-secondary); } .site-body .lol-discord:hover { color: var(--color-icon); } .site-body .user-menu-trigger { background: rgba(15, 15, 17, 0.55); border-color: rgba(255, 255, 255, 0.14); } .site-body .user-menu-trigger:hover, .site-body .user-menu-trigger:focus-visible, .site-body .user-menu-trigger[aria-expanded="true"] { background: rgba(15, 15, 17, 0.85); border-color: rgba(129, 137, 255, 0.45); box-shadow: none; } .site-body .user-dropdown-header { background: transparent; } .site-body .user-dropdown-item i { color: var(--color-icon); } .site-body .user-dropdown-item:hover { background: rgba(255, 255, 255, 0.05); } /* ── Media preview accent border ── */ .site-body .border-blue-400 { border-color: var(--color-border-strong); } /* ── Main content wrapper ── Takes the remaining vertical space so the footer is pinned. */ .site-body #main-content { position: relative; z-index: 1; flex: 1; } /* ── Footer ── */ .site-body footer.site-footer { position: relative; z-index: 1; background: var(--color-bg); background-color: var(--color-bg); border-top: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: none; -webkit-backdrop-filter: none; } .site-body .site-footer-links { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .site-body .site-footer-groups { width: min(100%, 72rem); margin: 0 auto var(--space-5); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6); padding: 0 var(--space-4); text-align: center; } .site-body .site-footer-group { min-width: 0; } .site-body .site-footer-heading { margin: 0 0 0.7rem; color: var(--color-text); font-size: 0.72rem; font-weight: 700; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; } .site-body .site-footer p { color: var(--color-text-muted); } .site-body .site-footer a, .site-body .site-footer-link { color: var(--color-text-muted); font-size: 0.8rem; text-decoration: none; transition: color var(--transition-fast); } .site-body .site-footer a:hover, .site-body .site-footer-link:hover { color: var(--color-text); } .site-body .site-footer-link--icon { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; } .site-body .site-footer-link--icon .brand-icon { width: 0.92rem; height: 0.92rem; color: currentColor; } @media (max-width: 760px) { .site-body .site-footer-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); } } @media (max-width: 560px) { .site-body .site-footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .site-body .site-footer-groups { grid-template-columns: 1fr; text-align: center; } .site-body .site-footer-links { align-items: center; } } /* Primary button focus + disabled The base .btn-primary lives in globals.css; these are focus/disabled tweaks. */ .site-body .btn-primary:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } .site-body .btn-primary:disabled, .site-body .btn-primary[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; } /* Fade-up animation used by upload-style pages Distinct from `.animate-fade-up` (defined earlier in this file with a longer 0.8s duration) — that one is used by hero blocks and pre-sets opacity:0 + translateY(20px) on the element. `.anim-fade-up` is a stand-alone animation class with its own keyframe (`siteFadeUp`) so the two never collide. The keyframe was renamed from `fadeUp` (which would have shadowed the navbar.css-internal `fadeUp` keyframe) to `siteFadeUp`. */ @keyframes siteFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .anim-fade-up { animation: siteFadeUp 0.5s ease both; } .anim-delay-1 { animation-delay: 0.1s; } .anim-delay-2 { animation-delay: 0.2s; } .anim-delay-3 { animation-delay: 0.3s; } /* Canonical navbar surface. Keep the blur on a pseudo-layer so dropdowns can blur the page behind them instead of being trapped inside the navbar's backdrop root. */ .site-navbar { background: transparent; background-color: transparent; border-bottom: 1px solid transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: border-color 0.24s ease; } .site-navbar::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: var(--site-chrome-glass-bg-strong); background-color: var(--site-chrome-glass-bg-strong); backdrop-filter: blur(var(--site-chrome-glass-blur)); -webkit-backdrop-filter: blur(var(--site-chrome-glass-blur)); transition: opacity 0.24s ease, background-color 0.24s ease, backdrop-filter 0.24s ease, -webkit-backdrop-filter 0.24s ease; } .site-navbar .container { position: relative; z-index: 1; } .site-navbar.is-scrolled { background: transparent; background-color: transparent; border-bottom-color: rgba(255, 255, 255, 0.10); backdrop-filter: none; -webkit-backdrop-filter: none; } .site-navbar.is-scrolled::before { opacity: 1; } /* At the top of the page the navbar blends into the page surface; any scroll restores the normal glass chrome + bottom border. */ .site-navbar:not(.is-scrolled) { background: transparent; background-color: transparent; border-bottom-color: transparent; } .site-navbar:not(.is-scrolled)::before { opacity: 0; } @media (max-width: 1199px) { html.mobile-menu-open .site-navbar, body.mobile-menu-open .site-navbar { border-bottom-color: transparent; } html.mobile-menu-open .site-navbar::before, body.mobile-menu-open .site-navbar::before { opacity: 0; transition: none; } }