/* RustLords Website 1.0 — global lord-lore theme */ /* Keep topbar visually continuous across multi-page navigations (Chromium). Soft-nav already keeps #rl-topbar-actions permanent — full-page view transitions morph widths and look like a sideways expand/contract. */ @view-transition { navigation: none; } /* Paint Account chrome before JS hydrates the profile menu. */ html.rl-steam-known .topbar-actions .btn-steam:not(.is-steam-connected) .btn-steam__label { font-size: 0; line-height: 0; } html.rl-steam-known .topbar-actions .btn-steam:not(.is-steam-connected) .btn-steam__label::after { content: "Account"; font-size: 0.78rem; line-height: 1.25; font-weight: 600; } /* Soft-nav to wallet/wheel: never flash guest Login CTAs when session is already known. */ html.rl-steam-known #wallet-guest-gate, html.rl-steam-known #scrap-wheel-guest-gate, html.rl-steam-known #store-guest-gate { display: none !important; } /* Story nav is off by default (Site Settings). Hide until explicitly enabled — stops flash. */ html.rl-story-known-off body.v1-site .nav-links a[href*="story.html"], html:not(.rl-story-known-on) body.v1-site:not(.story-page-enabled) .nav-links a[href*="story.html"], body.v1-site.story-page-disabled .nav-links a[href*="story.html"], body.v1-sanctuary-pure .nav-links a[href*="story.html"] { display: none !important; } /* * Sanctuary FOUC guard (must stay in blocking v1-theme.css). * Homepage defers v1-pages.css; without these rules both Pure + Vanilla Plus * sections paint until deferred CSS/JS catch up — layout looks "loose" then snaps. * html.rl-sanctuary-* is set in by v1-chrome-boot.js before first paint. */ html:not(.rl-sanctuary-vanilla-plus):not(.rl-sanctuary-pure):not(.rl-sanctuary-unset) #v1-home-after-pick, html:not(.rl-sanctuary-vanilla-plus):not(.rl-sanctuary-pure):not(.rl-sanctuary-unset) [data-sanctuary-scope="chooser"] { visibility: hidden !important; } html.rl-sanctuary-unset #v1-home-after-pick, body.v1-sanctuary-unset #v1-home-after-pick { display: none !important; } html.rl-sanctuary-vanilla-plus [data-sanctuary-scope="chooser"], html.rl-sanctuary-pure [data-sanctuary-scope="chooser"], body.v1-sanctuary-vanilla-plus [data-sanctuary-scope="chooser"], body.v1-sanctuary-pure [data-sanctuary-scope="chooser"] { display: none !important; } /* Must beat .v1-hero.hero.panel { display: grid !important } and panel flex/grid. */ html.rl-sanctuary-vanilla-plus .v1-hero.hero.panel[data-sanctuary-scope="pure"], html.rl-sanctuary-pure .v1-hero.hero.panel[data-sanctuary-scope="vanilla-plus"], html.rl-sanctuary-vanilla-plus [data-sanctuary-scope="pure"], html.rl-sanctuary-pure [data-sanctuary-scope="vanilla-plus"], body.v1-sanctuary-vanilla-plus .v1-hero.hero.panel[data-sanctuary-scope="pure"], body.v1-sanctuary-pure .v1-hero.hero.panel[data-sanctuary-scope="vanilla-plus"], body.v1-sanctuary-vanilla-plus [data-sanctuary-scope="pure"], body.v1-sanctuary-pure [data-sanctuary-scope="vanilla-plus"] { display: none !important; } body.v1-site .nav-links a.is-sanctuary-hidden, body.v1-site .nav-links a.is-story-hidden, body.v1-site [data-sanctuary-scope].is-sanctuary-hidden, body.v1-site [hidden].is-sanctuary-hidden, body.v1-site .v1-hero[data-sanctuary-scope].is-sanctuary-hidden, body.v1-site .v1-hero.hero.panel.is-sanctuary-hidden, body.v1-site .v1-hero.hero.panel[hidden] { display: none !important; } body.v1-sanctuary-gated main.container > :not(#v1-sanctuary-gate) { display: none !important; } /* Soft-nav progress (Turbo Drive) */ .turbo-progress-bar { position: fixed; top: 0; left: 0; height: 2px; z-index: 2147483647; background: linear-gradient(90deg, #8a7028, #e8c547); box-shadow: 0 0 12px rgba(232, 197, 71, 0.45); } /* Keep topbar actions visually stable while soft-nav swaps the page body */ body.v1-site #rl-topbar-actions { contain: layout style; min-height: 2.55rem; flex-wrap: nowrap; } /* Reserve search + lang slots so Soft-nav never collapses the action cluster */ body.v1-site .site-search { min-width: 10.5rem; flex-shrink: 0; } body.v1-site .site-search-field { display: inline-flex; align-items: center; gap: 0.45rem; width: 100%; min-width: 10.5rem; max-width: 14rem; min-height: 2.15rem; margin: 0; padding: 0.28rem 0.7rem 0.28rem 0.65rem; border-radius: 999px; border: 1px solid rgba(180, 180, 180, 0.35); background: linear-gradient(145deg, rgba(24, 24, 24, 0.96), rgba(12, 12, 12, 0.98)); color: rgba(220, 220, 220, 0.92); box-sizing: border-box; cursor: text; } body.v1-site .site-search-field:focus-within { border-color: rgba(201, 162, 39, 0.55); box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.18); } body.v1-site .site-search-field > i { flex: 0 0 0.9rem; width: 0.9rem; height: 0.9rem; display: inline-grid; place-items: center; font-size: 0.78rem; line-height: 1; color: rgba(200, 200, 200, 0.8); } body.v1-site .site-search-field input, body.v1-site .site-search-field input[type="search"], body.v1-site .site-search-field input[type="text"] { flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; padding: 0; border: 0; outline: none; background: none !important; background-color: transparent !important; background-image: none !important; border-radius: 999px; color: inherit; font: inherit; font-size: 0.82rem; line-height: 1.2; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; color-scheme: inherit; } body.v1-site .site-search-field input::placeholder { color: rgba(170, 170, 170, 0.75); } body.v1-site .site-search-field input[type="search"]::-webkit-search-decoration, body.v1-site .site-search-field input[type="search"]::-webkit-search-cancel-button, body.v1-site .site-search-field input[type="search"]::-webkit-search-results-button, body.v1-site .site-search-field input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none !important; appearance: none !important; display: none; } /* Kill Chromium/Edge autofill / internal field wash that looks like a square */ body.v1-site .site-search-field input:-webkit-autofill, body.v1-site .site-search-field input:-webkit-autofill:hover, body.v1-site .site-search-field input:-webkit-autofill:focus { -webkit-text-fill-color: inherit; caret-color: inherit; transition: background-color 99999s ease-out; -webkit-box-shadow: 0 0 0 1000px transparent inset !important; box-shadow: 0 0 0 1000px transparent inset !important; } body.v1-site .lang-switcher { min-width: 3.4rem; flex-shrink: 0; } /* Mid desktop — shrink search/lang only; keep normal nav tab gaps */ @media (max-width: 1180px) and (min-width: 901px) { body.v1-site .site-search { min-width: 7.5rem; } body.v1-site .site-search-field { min-width: 7.5rem; max-width: 9.5rem; padding-left: 0.5rem; padding-right: 0.55rem; } body.v1-site .site-search-field input { font-size: 0.78rem; } body.v1-site .lang-switcher { min-width: 2.75rem; } } body.v1-site .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.05rem; } body.v1-site .nav-links a { padding: 0.28rem 0.5rem; } body.v1-site .topbar-actions .btn-steam { flex-shrink: 0; } /* Skip rendering offscreen page chunks (smoother scroll / paint) */ body.v1-site main.container > section.panel, body.v1-site main.container > .panel, body.v1-site main.container > .home-band, body.v1-site main.container > [class*="home-band"] { content-visibility: auto; contain-intrinsic-size: auto 280px; } body.v1-site main.container > section.panel:first-child, body.v1-site main.container > .panel:first-child, body.v1-site .v1-sanctuary-chooser, body.v1-site .v1-hero { content-visibility: visible; contain-intrinsic-size: auto; } :root { --v1-hero-home: url("./assets/heroes/home-community-1280.webp?v=perf-3"); --v1-hero-rules: url("./assets/heroes/rules-covenant.webp?v=perf-3"); --v1-hero-guide: url("./assets/heroes/getting-started-realm-1280.webp?v=perf-3"); --v1-bg-atmosphere: url("./assets/story/chapter-07.jpg"); --v1-bg-deep: #020201; --v1-surface: #080604; --v1-surface-raised: #0f0c09; --v1-gold: #c9a227; --v1-gold-bright: #e8c547; --v1-gold-dim: #8a7028; --v1-text: #e8dcc4; --v1-text-muted: #9a8b72; --v1-border: rgba(201, 162, 39, 0.18); --v1-border-strong: rgba(201, 162, 39, 0.38); --v1-radius: 12px; --v1-shadow: 0 24px 70px rgba(0, 0, 0, 0.65); /* Economy UI (tabs, labels, compact headers) */ --v1-ui-text: #a89a82; --v1-ui-muted: #8f8470; --v1-ui-hover: #e8dcc4; --v1-ui-active: #f5e6b8; --v1-ui-accent: var(--v1-gold); --v1-tab-radius: 8px; --v1-economy-chrome: rgba(4, 3, 2, 0.55); --v1-economy-chrome-border: rgba(201, 162, 39, 0.16); --v1-focus-ring: 2px solid var(--v1-gold-bright); --v1-focus-offset: 2px; /* Raidbase tier accents */ --v1-tier-t1: #4caf7a; --v1-tier-t2: #c9a227; --v1-tier-t3: #d45c3c; --v1-tier-t4: #9b4dca; /* Content links (mirrored pages) */ --v1-link: #d4a84a; --v1-link-hover: var(--v1-gold-bright); } /* ── Preview ribbon ── */ .v1-preview-ribbon { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; margin: 0; padding: 0.35rem 1rem; text-align: center; font-size: 0.75rem; font-weight: 400; letter-spacing: normal; color: #b8aa92; background: #0a0906; border-bottom: 1px solid rgba(201, 162, 39, 0.18); } body.v1-site.has-v1-ribbon { padding-top: 2rem; } body.v1-site.has-v1-design-ribbon { padding-top: 3.35rem; } body.v1-site.has-v1-ribbon.has-v1-design-ribbon { padding-top: 3.35rem; } .v1-design-ribbon { position: fixed; top: 2rem; left: 0; right: 0; z-index: 9999; margin: 0; padding: 0.35rem 1rem; text-align: center; font-size: 0.75rem; font-weight: 400; letter-spacing: normal; color: #b8aa92; background: #0a0906; border-bottom: 1px solid rgba(201, 162, 39, 0.18); } .v1-design-ribbon a { color: #c9a227; text-decoration: underline; text-underline-offset: 2px; } .v1-design-ribbon a:hover { color: #e8dcc4; } /* ── Global canvas & atmosphere ── */ body.v1-site { --bg: var(--v1-bg-deep); --surface: var(--v1-surface); --surface-soft: var(--v1-surface-raised); --text: var(--v1-text); --text-muted: var(--v1-text-muted); --crimson: var(--v1-gold-dim); --gold: var(--v1-gold); --line: rgba(42, 36, 28, 0.95); --page-canvas-base: var(--v1-bg-deep); } /* Subtle fixed realm photo behind entire site — very dark so panels stay readable */ html:has(body.v1-site) { background-color: var(--v1-bg-deep); background-image: linear-gradient(180deg, rgba(2, 2, 1, 0.94) 0%, rgba(4, 3, 2, 0.9) 45%, rgba(2, 2, 1, 0.96) 100%), radial-gradient(ellipse 90% 70% at 50% 20%, rgba(201, 162, 39, 0.04), transparent 55%), var(--v1-bg-atmosphere); background-size: cover, cover, cover; background-position: center, center, center 38%; background-attachment: scroll, scroll, fixed; } body.v1-site html, html:has(body.v1-site) { background-color: var(--v1-bg-deep); } body.v1-site .backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 90% 55% at 50% -8%, rgba(201, 162, 39, 0.06), transparent 58%), radial-gradient(ellipse 55% 40% at 95% 12%, rgba(201, 162, 39, 0.04), transparent 50%), radial-gradient(ellipse 45% 35% at 2% 88%, rgba(201, 162, 39, 0.03), transparent 48%); opacity: 1; } body.v1-site h1, body.v1-site h2, body.v1-site h3, body.v1-site h4, body.v1-site .content-hero h2 { font-family: "Cinzel", serif; letter-spacing: 0.03em; } /* ── Topbar ── */ body.v1-site .topbar { position: sticky; top: 0; z-index: 900; margin-bottom: 0.5rem; padding-top: 0.65rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--v1-border); background: linear-gradient(180deg, rgba(4, 3, 2, 0.94), rgba(4, 3, 2, 0.82)); backdrop-filter: blur(16px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } body.v1-site .topbar::after { content: ""; position: absolute; left: 5%; right: 5%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 175, 88, 0.45), transparent); pointer-events: none; } body.v1-site .crest h1 { background: linear-gradient(180deg, #fff0c8, #d4af37); -webkit-background-clip: text; background-clip: text; color: transparent; } body.v1-site .nav-links a { border-radius: 8px; transition: color 0.2s, background 0.2s, box-shadow 0.2s; } body.v1-site .nav-links a:hover { background: rgba(212, 175, 88, 0.08); box-shadow: 0 0 16px rgba(212, 175, 88, 0.1); } body.v1-site .nav-links a[aria-current="page"], body.v1-site .nav-links a.nav-active { background: linear-gradient(135deg, rgba(201, 162, 39, 0.14), rgba(8, 6, 4, 0.92)); border: 1px solid rgba(201, 162, 39, 0.32); box-shadow: 0 0 22px rgba(201, 162, 39, 0.12); } /* Economy hub: full site nav; Steam auth uses topbar button like other v1 pages */ /* ── Panels & cards ── */ body.v1-site .panel { border-radius: var(--v1-radius); border-color: var(--v1-border); background: linear-gradient(168deg, rgba(10, 8, 6, 0.94), rgba(4, 3, 2, 0.96)); box-shadow: var(--v1-shadow), 0 0 0 1px rgba(201, 162, 39, 0.04) inset; backdrop-filter: blur(8px); } /* Home heroes use a photo — never glass-wash the full banner */ body.v1-site .v1-hero.panel, body.v1-site .v1-hero.hero.panel.hero-panel { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.v1-site .panel::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 175, 88, 0.35), transparent); pointer-events: none; opacity: 0.6; } body.v1-site .panel { position: relative; overflow: hidden; } body.v1-site .site-search-panel.panel { position: fixed !important; overflow: auto; top: -9999px; } /* ── Buttons ── */ body.v1-site .btn-primary { background: linear-gradient(180deg, #3d3218 0%, #2a2212 45%, #1a150c 100%); border-color: rgba(201, 162, 39, 0.45); color: #f5e6b8; box-shadow: 0 4px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(232, 197, 71, 0.15); transition: transform 0.2s, box-shadow 0.25s, filter 0.2s; } body.v1-site .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 28px rgba(201, 162, 39, 0.18); filter: brightness(1.1); } body.v1-site .btn-ghost { border-color: var(--v1-border); transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s; } body.v1-site .btn-ghost:hover { border-color: var(--v1-border-strong); background: rgba(212, 175, 88, 0.06); transform: translateY(-1px); box-shadow: 0 0 18px rgba(212, 175, 88, 0.1); } body.v1-site .topbar-actions .btn-steam { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 12.5rem; padding: 0.3rem 0.7rem 0.3rem 0.3rem; border-radius: 999px; border: 1px solid rgba(201, 162, 39, 0.38); background: linear-gradient(145deg, rgba(10, 8, 6, 0.96), rgba(4, 3, 2, 0.98)); color: #f0e4c8; font-size: 0.78rem; font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s; } body.v1-site .topbar-actions .btn-steam i.fa-steam { font-size: 0.95rem; color: #e8c547; } body.v1-site .topbar-actions .btn-steam:hover { border-color: rgba(201, 162, 39, 0.55); background: linear-gradient(145deg, rgba(14, 11, 8, 0.98), rgba(6, 5, 4, 0.99)); color: #f5e6b8; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 18px rgba(201, 162, 39, 0.08); } body.v1-site .topbar-actions .btn-steam.is-steam-connected { padding: 0.3rem 0.75rem; } body.v1-site .btn-steam__avatar { flex-shrink: 0; width: 1.55rem; height: 1.55rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg, #1a1510, #0a0906); border: 1px solid rgba(201, 162, 39, 0.42); font-size: 0.72rem; font-weight: 700; color: #f0e4c8; } body.v1-site .btn-steam__avatar img { width: 100%; height: 100%; object-fit: cover; } body.v1-site .btn-steam__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Topbar profile menu (avatar + name + dropdown) */ body.v1-site .rl-profile-menu { position: relative; flex-shrink: 0; z-index: 950; } body.v1-site .rl-profile-menu__trigger { display: inline-flex; align-items: center; gap: 0.45rem; max-width: 13.5rem; margin: 0; padding: 0.28rem 0.65rem 0.28rem 0.28rem; border-radius: 999px; border: 1px solid rgba(201, 162, 39, 0.38); background: linear-gradient(145deg, rgba(10, 8, 6, 0.96), rgba(4, 3, 2, 0.98)); color: #f0e4c8; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s; } body.v1-site .rl-profile-menu__trigger:hover, body.v1-site .rl-profile-menu.is-open .rl-profile-menu__trigger { border-color: rgba(201, 162, 39, 0.55); background: linear-gradient(145deg, rgba(14, 11, 8, 0.98), rgba(6, 5, 4, 0.99)); color: #f5e6b8; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 18px rgba(201, 162, 39, 0.08); } body.v1-site .rl-profile-menu__trigger:focus-visible { outline: var(--v1-focus-ring); outline-offset: var(--v1-focus-offset); } body.v1-site .rl-profile-menu__avatar { flex-shrink: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg, #1a1510, #0a0906); border: 1px solid rgba(201, 162, 39, 0.42); font-size: 0.72rem; font-weight: 700; color: #f0e4c8; } body.v1-site .rl-profile-menu__avatar img { width: 100%; height: 100%; object-fit: cover; } body.v1-site .rl-profile-menu__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.v1-site .rl-profile-menu__chevron { flex-shrink: 0; font-size: 0.65rem; opacity: 0.75; transition: transform 0.2s; } body.v1-site .rl-profile-menu.is-open .rl-profile-menu__chevron { transform: rotate(180deg); } body.v1-site .rl-profile-menu__dropdown { position: absolute; top: calc(100% + 0.4rem); right: 0; min-width: 13.5rem; padding: 0.35rem; border-radius: 12px; border: 1px solid rgba(201, 162, 39, 0.28); background: linear-gradient(180deg, rgba(14, 12, 10, 0.98), rgba(8, 6, 5, 0.99)); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); display: grid; gap: 0.15rem; z-index: 960; } body.v1-site .rl-profile-menu__dropdown[hidden] { display: none !important; } body.v1-site .rl-profile-menu:not(.is-open) .rl-profile-menu__dropdown { display: none !important; } body.v1-site .rl-profile-menu__item { display: flex; align-items: center; gap: 0.55rem; width: 100%; margin: 0; padding: 0.55rem 0.65rem; border: 0; border-radius: 8px; background: transparent; color: #e8dcc4; font: inherit; font-size: 0.84rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s; } body.v1-site .rl-profile-menu__item i { width: 1rem; text-align: center; color: var(--v1-gold-bright, #e8c547); opacity: 0.9; } body.v1-site .rl-profile-menu__item:hover, body.v1-site .rl-profile-menu__item:focus-visible { background: rgba(212, 175, 88, 0.1); color: #f5e6b8; outline: none; } body.v1-site .rl-profile-menu__item--danger { margin-top: 0.15rem; border-top: 1px solid rgba(201, 162, 39, 0.14); border-radius: 0 0 8px 8px; color: #d8b8a0; } body.v1-site .rl-profile-menu__item--danger i { color: #d45c3c; } body.v1-site .rl-profile-menu__item--danger:hover, body.v1-site .rl-profile-menu__item--danger:focus-visible { background: rgba(212, 92, 60, 0.12); color: #f0c8b8; } body.v1-economy-hub .v1-economy-hud__guest { display: none !important; } .v1-logout-modal-backdrop { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 1rem; background: rgba(2, 2, 1, 0.72); backdrop-filter: blur(6px); } .v1-logout-modal { width: min(28rem, 96vw); padding: 1rem 1.05rem !important; border-color: rgba(201, 162, 39, 0.34) !important; box-shadow: 0 20px 58px rgba(0, 0, 0, 0.66), 0 0 30px rgba(201, 162, 39, 0.08); } .v1-logout-modal h3 { margin: 0 0 0.5rem; font-family: "Cinzel", serif; color: #e8c547; } .v1-logout-modal .lead-sm { margin: 0 0 0.35rem; } .v1-logout-modal .cta-row { margin-top: 0.8rem; justify-content: flex-end; } /* ── Chips & tags ── */ body.v1-site .chip { border-color: rgba(212, 175, 88, 0.28); background: rgba(12, 10, 8, 0.75); } body.v1-site .tag { color: var(--v1-gold-bright); letter-spacing: 0.08em; } /* ── Scroll reveal (all v1 pages) ── */ .v1-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .v1-reveal.is-visible { opacity: 1; transform: translateY(0); } .v1-reveal--delay-1 { transition-delay: 0.1s; } .v1-reveal--delay-2 { transition-delay: 0.2s; } .v1-reveal--delay-3 { transition-delay: 0.3s; } .v1-reveal--delay-4 { transition-delay: 0.4s; } .v1-stat-pop { animation: v1StatPop 0.55s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes v1StatPop { 0% { transform: scale(1); } 40% { transform: scale(1.12); color: #ffe9a8; } 100% { transform: scale(1); } } /* ── Hero backgrounds ── */ body.v1-site .hero.panel.hero-panel::before, body.v1-site .v1-hero.panel.hero-panel::before { background: linear-gradient( 90deg, rgba(2, 2, 1, 0.97) 0%, rgba(4, 3, 2, 0.82) 24%, rgba(4, 3, 2, 0.1) 50%, rgba(4, 3, 2, 0.2) 62%, rgba(4, 3, 2, 0.78) 84%, rgba(2, 2, 1, 0.97) 100% ), linear-gradient(195deg, rgba(2, 2, 1, 0.72) 0%, transparent 50%), var(--v1-hero-home) center 42% / cover no-repeat; transform-origin: center center; } body.v1-site .rules-hero::before { background: linear-gradient(90deg, rgba(3, 2, 2, 0.94) 0%, rgba(10, 8, 7, 0.55) 50%, rgba(10, 8, 7, 0.35) 100%), var(--v1-hero-rules) center 48% / cover no-repeat; } @media (max-width: 900px) { body.v1-site .rules-hero::before { background: linear-gradient(180deg, rgba(3, 2, 2, 0.9) 0%, rgba(10, 8, 7, 0.5) 50%, rgba(3, 2, 2, 0.9) 100%), var(--v1-hero-rules) center 55% / cover no-repeat; } } body.v1-site .content-hero { position: relative; overflow: hidden; min-height: 200px; } body.v1-site .content-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(3, 2, 2, 0.94) 0%, rgba(10, 8, 7, 0.45) 55%, rgba(10, 8, 7, 0.8) 100%), var(--v1-hero-guide) center 40% / cover no-repeat; pointer-events: none; } body.v1-site .content-hero > * { position: relative; z-index: 1; } /* Season page inherits richer borders */ body.v1-site .story-hero { border-color: var(--v1-border-strong) !important; } body.v1-site .story-hero__shade { background: linear-gradient(105deg, rgba(2, 2, 1, 0.95) 0%, rgba(4, 3, 2, 0.62) 42%, rgba(4, 3, 2, 0.5) 58%, rgba(2, 2, 1, 0.9) 100%), radial-gradient(ellipse 80% 60% at 70% 40%, rgba(201, 162, 39, 0.08), transparent 68%), linear-gradient(0deg, rgba(2, 2, 1, 0.8), transparent 38%) !important; } /* Accessibility — skip link + focus rings */ .v1-skip-link { position: fixed; top: 0.35rem; left: 0.5rem; z-index: 10001; padding: 0.45rem 0.75rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; color: #0a0906; background: var(--v1-gold-bright); border: 1px solid rgba(0, 0, 0, 0.35); transform: translateY(-140%); transition: transform 0.2s ease; } .v1-skip-link:focus { transform: translateY(0); outline: none; } body.v1-site :focus-visible { outline: var(--v1-focus-ring); outline-offset: var(--v1-focus-offset); } body.v1-site .btn:focus-visible, body.v1-site .v1-economy-tab:focus-visible, body.v1-site a.btn:focus-visible { outline: var(--v1-focus-ring); outline-offset: var(--v1-focus-offset); } @media (max-width: 900px) { html:has(body.v1-site) { background-attachment: scroll, scroll, scroll; overflow-x: hidden; max-width: 100%; scrollbar-gutter: auto; } body.v1-site { overflow-x: hidden; max-width: 100%; } body.v1-site .topbar.container, body.v1-site main.container { padding-left: max(var(--layout-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--layout-gutter), env(safe-area-inset-right, 0px)); } body.v1-site .topbar { flex-direction: column; align-items: stretch; gap: 0.55rem; padding-top: max(0.65rem, env(safe-area-inset-top, 0px)); } body.v1-site #rl-topbar-actions { flex-wrap: wrap; align-items: center; width: 100%; justify-content: flex-end; gap: 0.45rem 0.5rem; } body.v1-site #v1-sanctuary-switch { flex: 1 1 auto; order: 0; margin-right: 0; min-width: 0; max-width: calc(100% - 3.2rem); display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0.35rem; } /* Never show three sanctuary chips in one row on phones */ body.v1-site #v1-sanctuary-switch .v1-sanctuary-switch__current, body.v1-sanctuary-vanilla-plus .v1-sanctuary-switch__current, body.v1-sanctuary-pure .v1-sanctuary-switch__current { display: none !important; } body.v1-site #v1-sanctuary-switch .v1-sanctuary-switch__btn--ghost { display: none !important; } body.v1-site #v1-sanctuary-switch .v1-sanctuary-switch__btn-label--long { display: none !important; } body.v1-site #v1-sanctuary-switch .v1-sanctuary-switch__btn-label--short { display: inline !important; } body.v1-site #v1-sanctuary-switch .v1-sanctuary-switch__btn { flex: 0 0 auto; padding: 0.28rem 0.55rem; font-size: 0.72rem; } body.v1-site #mobile-nav-toggle { display: inline-flex; flex-shrink: 0; order: 1; margin-left: auto; } body.v1-site #site-primary-nav.nav-links, body.v1-site .topbar-actions > .nav-links { display: none; flex-direction: column; align-items: stretch; gap: 0.35rem; width: 100%; order: 20; overflow: visible; white-space: normal; padding: 0.5rem 0 0; border-top: 1px solid rgba(201, 162, 39, 0.2); margin-top: 0.15rem; } body.v1-site.mobile-nav-open #site-primary-nav.nav-links, body.v1-site.mobile-nav-open .topbar-actions > .nav-links { display: flex; } body.v1-site .nav-links a { font-size: 0.92rem; padding: 0.35rem 0; } body.v1-site .site-search { min-width: 0; flex: 1 1 100%; max-width: 100%; order: 2; } body.v1-site .site-search-field { min-width: 0; max-width: none; width: 100%; } body.v1-site .lang-switcher { order: 3; } body.v1-site .topbar-actions .btn-steam { order: 4; } body.v1-site .rl-profile-menu { order: 4; } body.v1-site .topbar .crest { flex-direction: row; align-items: center; gap: 0.5rem; width: 100%; } body.v1-site .topbar .crest .small { font-size: 0.65rem; line-height: 1.25; } /* Hero stats: do not keep three equal columns on a phone */ body.v1-site .v1-hero .hero-trust-strip.v1-hero__trust { display: flex !important; flex-direction: column; align-items: stretch; gap: 0.4rem; } body.v1-site .v1-hero__trust > li { flex: 1 1 auto; width: 100%; } body.v1-site .v1-hero__trust .hero-trust-item { width: 100%; justify-content: flex-start; } } @media (prefers-reduced-motion: reduce) { .v1-reveal { opacity: 1; transform: none; transition: none; } .v1-stat-pop { animation: none; } }