/* ========================================================= EXORTH RSPS — design tokens & global styles ========================================================= */ :root { /* WARM PARCHMENT (default scheme) */ --bg-stone-900: #1a1108; --bg-stone-800: #261a0d; --bg-wood-700: #3a2817; --bg-wood-600: #4a3520; --bg-wood-500: #5d4528; --parchment-100: #f4e4bc; --parchment-200: #e8d29a; --parchment-300: #d4b876; --parchment-400: #b89554; --ink-900: #2a1a0a; --ink-700: #4a3320; --ink-500: #6b4a2a; --ink-400: #8a6a3f; --gold-400: oklch(0.78 0.13 78); --gold-500: oklch(0.70 0.15 75); --gold-600: oklch(0.60 0.16 70); --gold-700: oklch(0.50 0.14 65); --crimson: oklch(0.50 0.18 25); --emerald: oklch(0.55 0.13 150); --azure: oklch(0.55 0.13 240); --shadow-deep: 0 6px 24px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4); --shadow-inset: inset 0 1px 2px rgba(255,255,255,0.12), inset 0 -2px 6px rgba(0,0,0,0.35); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --font-display: "Cinzel", "Trajan Pro", serif; --font-body: "Cardo", "Palatino Linotype", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } /* Alternate schemes (toggled via [data-scheme] on ) */ html[data-scheme="ember"] { --gold-400: oklch(0.72 0.18 35); --gold-500: oklch(0.62 0.20 30); --gold-600: oklch(0.52 0.22 25); --gold-700: oklch(0.42 0.20 20); } html[data-scheme="emerald"] { --gold-400: oklch(0.72 0.14 155); --gold-500: oklch(0.62 0.16 150); --gold-600: oklch(0.52 0.16 148); --gold-700: oklch(0.42 0.14 145); } html[data-scheme="frost"] { --bg-stone-900: #0c1119; --bg-stone-800: #131a26; --bg-wood-700: #1f2a3d; --bg-wood-600: #2a3850; --parchment-100: #e6ecf5; --parchment-200: #ccd6e6; --parchment-300: #a8b6cc; --parchment-400: #7d8ba8; --ink-900: #0a1220; --ink-700: #1c2638; --gold-400: oklch(0.78 0.10 235); --gold-500: oklch(0.68 0.13 235); --gold-600: oklch(0.58 0.15 235); --gold-700: oklch(0.48 0.14 235); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; font-family: var(--font-body); color: var(--parchment-100); background: var(--bg-stone-900); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { /* Layered stone-wall feel: subtle radial vignettes + noise via gradients */ background: radial-gradient(ellipse at top, rgba(184,149,84,0.10), transparent 60%), radial-gradient(ellipse at bottom, rgba(0,0,0,0.6), transparent 70%), repeating-linear-gradient( 45deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 6px ), var(--bg-stone-900); background-attachment: fixed; } a { color: var(--gold-400); text-decoration: none; } a:hover { color: var(--gold-500); text-decoration: underline; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; margin: 0 0 0.6em; text-wrap: balance; } h1 { font-size: clamp(28px, 4.5vw, 44px); } h2 { font-size: clamp(22px, 3vw, 30px); } h3 { font-size: clamp(18px, 2vw, 22px); } p { line-height: 1.65; text-wrap: pretty; margin: 0 0 1em; } /* ========================================================= LAYOUT SHELL ========================================================= */ .shell { max-width: 1280px; margin: 0 auto; padding: 0 16px 64px; } /* HEADER ----------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, var(--bg-wood-700), var(--bg-stone-900) 95%); border-bottom: 2px solid var(--gold-700); box-shadow: 0 4px 20px rgba(0,0,0,0.6); } .site-header__inner { max-width: 1280px; margin: 0 auto; padding: 10px 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand__logo { width: 52px; height: 52px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); } .brand__name { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--parchment-100); letter-spacing: 0.08em; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 12px rgba(184,149,84,0.25); } .brand__sub { font-family: var(--font-mono); font-size: 11px; color: var(--gold-400); letter-spacing: 0.2em; text-transform: uppercase; } /* Player count chip in header */ .player-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: linear-gradient(180deg, var(--bg-wood-600), var(--bg-stone-800)); border: 1px solid var(--gold-700); border-radius: var(--radius-md); box-shadow: var(--shadow-inset); font-family: var(--font-mono); font-size: 12px; color: var(--parchment-100); } .player-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.65 0.18 145); box-shadow: 0 0 8px oklch(0.65 0.18 145), 0 0 2px #fff inset; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } .player-chip__count { color: var(--gold-400); font-weight: 700; font-size: 14px; } .player-chip__split { display: inline-flex; gap: 10px; padding-left: 10px; margin-left: 4px; border-left: 1px solid var(--gold-700); font-size: 11px; color: var(--parchment-300); } .player-chip__split b { color: var(--gold-400); font-weight: 700; } /* NAV --------------------------------------------------- */ .nav { background: linear-gradient(180deg, var(--bg-wood-600), var(--bg-wood-700)); border-top: 1px solid var(--gold-700); border-bottom: 1px solid rgba(0,0,0,0.5); } .nav__list { max-width: 1280px; margin: 0 auto; padding: 0 8px; display: flex; gap: 2px; list-style: none; overflow-x: auto; scrollbar-width: none; } .nav__list::-webkit-scrollbar { display: none; } .nav__link { display: block; padding: 14px 20px; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--parchment-200); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; transition: all 0.15s ease; } .nav__link:hover { color: var(--parchment-100); background: rgba(0,0,0,0.25); text-decoration: none; } .nav__link.is-active { color: var(--gold-400); border-bottom-color: var(--gold-500); background: linear-gradient(180deg, rgba(0,0,0,0.35), transparent); text-shadow: 0 0 10px rgba(184,149,84,0.5); } /* Mobile menu toggle */ .nav__toggle { display: none; } @media (max-width: 720px) { .site-header__inner { grid-template-columns: auto auto; gap: 8px; } .brand__name { font-size: 20px; } .brand__logo { width: 40px; height: 40px; } .player-chip { grid-column: 1 / -1; justify-content: center; font-size: 11px; } .nav__link { padding: 12px 14px; font-size: 12px; } } /* ========================================================= PARCHMENT PANELS ========================================================= */ .parchment { background: radial-gradient(ellipse at top left, rgba(255,235,180,0.18), transparent 50%), radial-gradient(ellipse at bottom right, rgba(140,90,40,0.20), transparent 55%), linear-gradient(180deg, var(--parchment-100), var(--parchment-200)); color: var(--ink-900); border: 1px solid var(--ink-500); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-deep), inset 0 0 60px rgba(140,90,40,0.18), inset 0 1px 0 rgba(255,255,255,0.4); position: relative; } .parchment::before, .parchment::after { content: ''; position: absolute; inset: 4px; pointer-events: none; border: 1px solid rgba(106,74,42,0.25); border-radius: calc(var(--radius-md) - 2px); } .parchment h1, .parchment h2, .parchment h3 { color: var(--ink-900); text-shadow: 0 1px 0 rgba(255,255,255,0.4); } .parchment a { color: oklch(0.45 0.15 35); } .parchment__title { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: var(--ink-900); margin: -4px 0 16px; padding: 8px 0; border-top: 1px solid rgba(106,74,42,0.3); border-bottom: 1px solid rgba(106,74,42,0.3); position: relative; } .parchment__title::before, .parchment__title::after { content: '◆'; font-size: 10px; color: var(--ink-500); margin: 0 12px; vertical-align: middle; } /* Dark wood panel (alt) */ .wood-panel { background: linear-gradient(180deg, var(--bg-wood-700), var(--bg-wood-600)); border: 1px solid rgba(0,0,0,0.5); border-top-color: rgba(255,235,180,0.15); border-radius: var(--radius-md); box-shadow: var(--shadow-deep), var(--shadow-inset); padding: 20px; color: var(--parchment-100); } .wood-panel__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; color: var(--gold-400); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--gold-700); display: flex; align-items: center; justify-content: space-between; } /* ========================================================= BUTTONS ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--gold-700); transition: all 0.15s ease; user-select: none; } .btn--primary { background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); color: var(--ink-900); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 0 var(--gold-700), 0 4px 12px rgba(0,0,0,0.4); text-shadow: 0 1px 0 rgba(255,235,180,0.4); } .btn--primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 0 var(--gold-700), 0 6px 16px rgba(0,0,0,0.5); text-decoration: none; color: var(--ink-900); } .btn--primary:active { transform: translateY(1px); box-shadow: inset 0 1px 4px rgba(0,0,0,0.3); } .btn--ghost { background: linear-gradient(180deg, var(--bg-wood-600), var(--bg-wood-700)); color: var(--parchment-100); border-color: var(--gold-700); box-shadow: var(--shadow-inset), 0 2px 6px rgba(0,0,0,0.4); } .btn--ghost:hover { background: linear-gradient(180deg, var(--bg-wood-500), var(--bg-wood-600)); color: var(--gold-400); text-decoration: none; } .btn--discord { background: linear-gradient(180deg, #5865f2, #4752c4); color: #fff; border-color: #3c45a5; text-shadow: 0 1px 0 rgba(0,0,0,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 0 #2b317a, 0 4px 12px rgba(0,0,0,0.4); } .btn--discord:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 3px 0 #2b317a, 0 6px 16px rgba(0,0,0,0.5); } .btn--lg { padding: 16px 32px; font-size: 16px; } .btn--block { width: 100%; } /* ========================================================= FORMS ========================================================= */ .field { display: block; margin-bottom: 16px; } .field__label { display: block; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-700); margin-bottom: 6px; } .field__input { width: 100%; padding: 12px 14px; font-family: var(--font-body); font-size: 16px; color: var(--ink-900); background: rgba(255,250,235,0.6); border: 1px solid var(--ink-500); border-radius: var(--radius-sm); box-shadow: inset 0 2px 4px rgba(106,74,42,0.2); } .field__input:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; background: rgba(255,250,235,0.85); } .field__hint { font-size: 13px; color: var(--ink-500); margin-top: 4px; } .field__error { font-size: 13px; color: var(--crimson); margin-top: 4px; } /* ========================================================= FOOTER ========================================================= */ .site-footer { margin-top: 48px; padding: 32px 16px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5)); border-top: 1px solid var(--gold-700); text-align: center; color: var(--parchment-300); font-size: 13px; } .site-footer a { color: var(--gold-400); } .site-footer__row { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; } .site-footer__links { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; padding: 0; margin: 0; } /* ========================================================= GENERIC HELPERS ========================================================= */ .grid { display: grid; gap: 20px; } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } @media (min-width: 720px) { .grid--2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 980px) { .grid--3 { grid-template-columns: 2fr 1fr; } } .stack { display: flex; flex-direction: column; gap: 16px; } .row { display: flex; gap: 12px; flex-wrap: wrap; } .row--center { justify-content: center; } .spacer { height: 24px; } .muted { color: var(--parchment-300); } .mono { font-family: var(--font-mono); } .tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(0,0,0,0.3); border: 1px solid var(--gold-700); color: var(--gold-400); } .tag--main { background: oklch(0.40 0.15 25 / 0.3); border-color: oklch(0.55 0.18 25); color: oklch(0.78 0.13 35); } .tag--legacy { background: oklch(0.40 0.10 65 / 0.3); border-color: var(--gold-600); color: var(--gold-400); } .tag--update { background: oklch(0.40 0.10 145 / 0.3); border-color: oklch(0.55 0.13 150); color: oklch(0.75 0.13 150); } .tag--event { background: oklch(0.40 0.12 295 / 0.3); border-color: oklch(0.55 0.15 295); color: oklch(0.78 0.13 295); } /* Badges on parchment: stronger borders + saturated fills for legibility */ .parchment .tag { background: rgba(255,250,235,0.7); border-width: 1.5px; font-weight: 700; text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 1px rgba(0,0,0,0.1); } .parchment .tag--main { background: linear-gradient(180deg, oklch(0.55 0.20 25), oklch(0.42 0.20 25)); border-color: oklch(0.30 0.18 25); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.4); } .parchment .tag--legacy { background: linear-gradient(180deg, oklch(0.62 0.16 60), oklch(0.50 0.16 55)); border-color: oklch(0.32 0.14 50); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.4); } .parchment .tag--update { background: linear-gradient(180deg, oklch(0.50 0.15 148), oklch(0.38 0.15 148)); border-color: oklch(0.25 0.14 148); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.4); } .parchment .tag--event { background: linear-gradient(180deg, oklch(0.50 0.20 295), oklch(0.38 0.20 295)); border-color: oklch(0.25 0.18 295); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.4); } .parchment .tag--patch { background: linear-gradient(180deg, oklch(0.50 0.15 240), oklch(0.38 0.15 240)); border-color: oklch(0.25 0.13 240); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.4); } /* Ornament dividers */ .ornament { display: flex; align-items: center; gap: 12px; color: var(--gold-600); font-size: 11px; letter-spacing: 0.4em; margin: 24px 0; text-align: center; justify-content: center; } .ornament::before, .ornament::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-700), transparent); } /* Scroll-style title banner */ .page-banner { text-align: center; padding: 32px 0 16px; } .page-banner__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.3em; color: var(--gold-400); text-transform: uppercase; margin-bottom: 8px; } .page-banner__title { font-family: var(--font-display); font-size: clamp(32px, 5vw, 56px); color: var(--parchment-100); text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 24px rgba(184,149,84,0.3); margin: 0 0 6px; letter-spacing: 0.06em; } .page-banner__sub { color: var(--parchment-300); font-size: 16px; } /* Sidebar layout */ .layout-with-aside { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 980px) { .layout-with-aside { grid-template-columns: minmax(0, 1fr) 320px; } } /* Skip link */ .skip { position: absolute; left: -9999px; } .skip:focus { left: 8px; top: 8px; z-index: 999; padding: 8px 12px; background: var(--gold-500); color: var(--ink-900); border-radius: 4px; }