/* =============================================================================
LINEAGE UNIVERSE REBORN — SITE STYLESHEET
-----------------------------------------------------------------------------
Single stylesheet, organised into cascade layers. Read in this order:
tokens design tokens — colour, type, space, motion. Change here first.
base resets, document defaults, typography primitives
ornament the fantasy identity: rules, filigree, frames, atmosphere
components reusable pieces — buttons, cards, nav, media
sections page-level composition blocks
utilities small single-purpose helpers (last, so they win)
Palette is derived from the realm artwork so page and art read as one image:
obsidian ground, antique gold structure, and the aqua/violet elemental light
that appears in the Celestial Destiny key art. Elemental colour is only ever
used as *light* — hairlines, glows, gradients — never as a flat fill.
============================================================================= */
@layer tokens, base, ornament, components, sections, utilities;
/* =============================================================================
TOKENS
============================================================================= */
@layer tokens {
:root {
/* --- ground ------------------------------------------------------------ */
--obsidian: #06080c;
--abyss: #080b11;
--slate-900: #0b0f16;
--slate-800: #10151e;
--slate-700: #161d29;
--slate-600: #1e2734;
--steel: #2b3745;
/* --- ink --------------------------------------------------------------- */
--parchment: #e9e4d7;
--parchment-dim: #bcb8ae;
--muted: #8c939d;
--muted-deep: #6b727b;
/* --- antique gold (matte, never a rainbow gradient) -------------------- */
--gold: #c2a26a;
--gold-light: #dfc998;
--gold-deep: #8b7141;
--gold-shadow: #6d5730;
/* --- elemental light (from the key art) -------------------------------- */
--aqua: #6fc9d4;
--violet: #9d84d8;
--ember: #c98a4a;
/* --- lines & surfaces -------------------------------------------------- */
--line: rgba(194, 162, 106, .16);
--line-strong: rgba(194, 162, 106, .34);
--line-cool: rgba(150, 175, 200, .10);
--surface: linear-gradient(160deg, #141b26 0%, #0b1018 66%);
--surface-flat: #0d121b;
/* crafted-plate edge: a hairline of light along the top of a panel */
--plate-edge: inset 0 1px 0 rgba(214, 228, 245, .07);
/* --- depth ------------------------------------------------------------- */
--shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
--shadow-md: 0 18px 44px rgba(0, 0, 0, .42);
--shadow-lg: 0 34px 90px rgba(0, 0, 0, .55);
--glow-gold: 0 0 34px rgba(194, 162, 106, .16);
/* --- type -------------------------------------------------------------- */
--display: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
--body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
--fs-display: clamp(2.9rem, 1.30rem + 5.10vw, 5.60rem);
--fs-h1: clamp(2.4rem, 1.32rem + 3.45vw, 4.20rem);
--fs-h2: clamp(1.9rem, 1.28rem + 1.98vw, 3.00rem);
--fs-h3: clamp(1.15rem, 1.04rem + 0.35vw, 1.35rem);
--fs-lead: clamp(1.02rem, 0.96rem + 0.20vw, 1.16rem);
--fs-body: 1rem;
--fs-sm: .905rem;
--fs-xs: .80rem;
--fs-label: .705rem;
--tracking-label: .215em;
--tracking-wide: .34em;
/* --- space (4px base) --------------------------------------------------- */
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
--s-5: 1.5rem; --s-6: 2rem; --s-7: 2.75rem; --s-8: 3.5rem;
--s-9: 5rem; --s-10: 7rem;
--section-y: clamp(4.5rem, 3.0rem + 6.2vw, 8.5rem);
--gutter: clamp(1.25rem, .55rem + 2.2vw, 2.5rem);
--measure: 66ch;
/* --- motion ------------------------------------------------------------- */
--ease: cubic-bezier(.22, .61, .36, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--dur-fast: .18s;
--dur: .32s;
--dur-slow: .7s;
--header-h: 84px;
--header-h-compact: 64px;
color-scheme: dark;
}
@media (max-width: 900px) {
:root { --header-h: 62px; --header-h-compact: 62px; }
}
}
/* =============================================================================
BASE
============================================================================= */
@layer base {
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h-compact) + 1.5rem);
}
body {
margin: 0;
background: var(--obsidian);
color: var(--parchment);
font-family: var(--body);
font-size: var(--fs-body);
line-height: 1.68;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3, h4 {
margin: 0 0 var(--s-4);
font-family: var(--display);
font-weight: 400;
line-height: 1.12;
letter-spacing: .015em;
text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: .04em; }
p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration-color: rgba(194, 162, 106, .45); text-underline-offset: .22em; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 600; }
::selection { background: rgba(194, 162, 106, .28); color: #fff; }
:focus-visible {
outline: 2px solid var(--gold-light);
outline-offset: 3px;
border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }
.skip-link {
position: fixed;
top: -6rem; left: var(--s-4);
z-index: 200;
padding: var(--s-3) var(--s-5);
background: var(--gold-light);
color: #0a0a0a;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
text-decoration: none;
transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); }
}
/* =============================================================================
ORNAMENT — the fantasy identity layer
============================================================================= */
@layer ornament {
/* --- elemental accent rule ----------------------------------------------
A short aqua-to-violet hairline above a section's eyebrow. It is the one
place the chronicle's own two colours appear as themselves, and it gives
every section head a consistent, recognisable opening mark. */
.section-head > div > .eyebrow::after,
.intro-copy > .eyebrow::after,
.chronicle-copy > .eyebrow::after,
.race-head > div > .eyebrow::after {
content: "";
position: absolute;
left: 0; top: -.95rem;
width: 54px; height: 2px;
background: linear-gradient(90deg, var(--aqua), var(--violet));
opacity: .8;
}
.section-head > div > .eyebrow,
.intro-copy > .eyebrow,
.chronicle-copy > .eyebrow,
.race-head > div > .eyebrow { position: relative; margin-top: .95rem; }
/* --- eyebrow: small-caps label with a lozenge marker -------------------- */
.eyebrow {
display: flex;
align-items: center;
gap: .7em;
margin: 0 0 var(--s-4);
max-width: none;
color: var(--gold);
font-family: var(--body);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.eyebrow::before {
content: "";
flex: none;
width: 5px; height: 5px;
background: currentColor;
transform: rotate(45deg);
opacity: .85;
}
.eyebrow--center { justify-content: center; }
/* --- filigree divider: hairline + lozenge, drawn in pure CSS ------------ */
.ornament {
--orn-w: 300px;
display: flex;
align-items: center;
justify-content: center;
gap: var(--s-4);
width: min(var(--orn-w), 100%);
margin-inline: auto;
color: var(--gold);
}
.ornament::before, .ornament::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, transparent, currentColor);
opacity: .42;
}
.ornament::after { background: linear-gradient(270deg, transparent, currentColor); }
.ornament > span {
flex: none;
position: relative;
width: 7px; height: 7px;
border: 1px solid currentColor;
transform: rotate(45deg);
opacity: .8;
}
.ornament > span::before {
content: "";
position: absolute;
inset: 2px;
background: currentColor;
}
.ornament--left { margin-inline: 0; margin-bottom: var(--s-4); justify-content: flex-start; }
/* An ornament immediately above an eyebrow would stack two lozenges; the
rule carries the mark, so the eyebrow drops its own. */
.ornament + .eyebrow::before { display: none; }
.ornament + .eyebrow { gap: 0; }
.ornament--left::before { display: none; }
/* --- frame: understated corner brackets --------------------------------- */
.frame { position: relative; }
.frame::before, .frame::after {
content: "";
position: absolute;
width: 22px; height: 22px;
border: 1px solid var(--line-strong);
pointer-events: none;
}
.frame::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.frame::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
/* --- hairline rules ------------------------------------------------------ */
.rule {
height: 1px;
border: 0;
background: linear-gradient(90deg, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
}
/* --- atmosphere: slow elemental light, hero only ------------------------ */
.aura {
position: absolute;
inset: -20%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(46% 40% at 16% 42%, rgba(111, 201, 212, .16), transparent 68%),
radial-gradient(42% 38% at 86% 38%, rgba(157, 132, 216, .16), transparent 68%);
filter: blur(28px);
opacity: .85;
animation: aura-drift 34s var(--ease) infinite alternate;
will-change: transform;
}
@keyframes aura-drift {
from { transform: translate3d(-1.4%, 0.8%, 0) scale(1); }
to { transform: translate3d( 1.4%, -1.0%, 0) scale(1.06); }
}
/* --- film grain, very fine, hero only ----------------------------------- */
.grain {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
opacity: .16;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
/* --- scrim helpers ------------------------------------------------------- */
.scrim-bottom {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(to top, var(--obsidian) 0, rgba(6, 8, 12, .62) 26%, transparent 62%);
}
.scrim-vignette {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: radial-gradient(78% 70% at 50% 44%, transparent 30%, rgba(6, 8, 12, .58) 82%, rgba(6, 8, 12, .88) 100%);
}
}
/* =============================================================================
COMPONENTS
============================================================================= */
@layer components {
/* --- layout primitives ---------------------------------------------------- */
.container {
width: min(1220px, 100% - (var(--gutter) * 2));
margin-inline: auto;
}
.container--narrow { width: min(880px, 100% - (var(--gutter) * 2)); }
/* Grid and flex children default to `min-width: auto`, which lets a wide
min-content item (a nowrap button, a long digest) push its track — and so
the whole page — wider than the viewport. Opt every layout child out. */
.intro-grid > *,
.feature-split > *,
.news-editorial > *,
.download-shell > *,
.download-band-inner > *,
.chronicle-facts > *,
.realm-grid > *,
.card-grid > *,
.path > *,
.class-roster > *,
.footer-grid > * { min-width: 0; }
.lead {
max-width: 60ch;
color: var(--parchment-dim);
font-size: var(--fs-lead);
line-height: 1.62;
}
.prose { color: var(--muted); }
.prose p { max-width: 58ch; }
/* --- buttons: matte antique metal, no rainbow gradient ------------------- */
.btn {
--btn-bg: linear-gradient(178deg, #d3b477 0%, #c2a26a 46%, #a98a53 100%);
--btn-fg: #100d07;
--btn-bd: var(--gold-light);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6em;
min-height: 50px;
padding: 0 1.7rem;
border: 1px solid var(--btn-bd);
background: var(--btn-bg);
color: var(--btn-fg);
font-family: var(--body);
font-size: var(--fs-label);
font-weight: 700;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), var(--shadow-sm);
transition: transform var(--dur) var(--ease-out),
box-shadow var(--dur) var(--ease-out),
filter var(--dur) var(--ease-out),
border-color var(--dur) var(--ease-out),
background-color var(--dur) var(--ease-out),
color var(--dur) var(--ease-out);
}
/* inner hairline — reads as an inlaid metal edge */
.btn::before {
content: "";
position: absolute;
inset: 3px;
border: 1px solid rgba(20, 15, 5, .22);
pointer-events: none;
}
.btn:hover {
transform: translateY(-2px);
filter: brightness(1.07);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 14px 32px rgba(194, 162, 106, .2);
}
.btn:active { transform: translateY(0); filter: brightness(.97); }
.btn--ghost {
--btn-bg: rgba(10, 14, 20, .5);
--btn-fg: var(--parchment);
--btn-bd: rgba(233, 228, 215, .3);
box-shadow: none;
backdrop-filter: blur(10px);
}
.btn--ghost::before { border-color: rgba(233, 228, 215, .1); }
.btn--ghost:hover {
--btn-bd: var(--gold-light);
background-color: rgba(194, 162, 106, .1);
color: var(--gold-light);
filter: none;
box-shadow: 0 14px 32px rgba(0, 0, 0, .4);
}
.btn--lg { min-height: 58px; padding: 0 2.2rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
/* --- text link with a sliding underline ---------------------------------- */
.link {
position: relative;
display: inline-flex;
align-items: center;
gap: .55em;
color: var(--gold-light);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
padding-block: .3em;
}
.link > svg { flex: none; transition: transform var(--dur) var(--ease-out); }
.link:hover > svg { transform: translateX(4px); }
.link::after {
content: "";
position: absolute;
left: 0; right: 100%; bottom: 0;
height: 1px;
background: currentColor;
opacity: .6;
transition: right var(--dur) var(--ease-out);
}
.link:hover::after { right: 0; }
/* --- header --------------------------------------------------------------- */
.site-header {
position: fixed;
inset: 0 0 auto;
z-index: 100;
height: var(--header-h);
border-bottom: 1px solid transparent;
background: linear-gradient(to bottom, rgba(4, 6, 9, .82), rgba(4, 6, 9, .28) 62%, transparent);
transition: height var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Without JavaScript the scroll listener never runs, so the header would stay
transparent over scrolled content. Pin it to its solid state instead. */
html:not(.js) .site-header {
height: var(--header-h-compact);
background: rgba(6, 8, 12, .94);
border-bottom-color: var(--line);
}
.site-header.is-compact {
height: var(--header-h-compact);
background: rgba(6, 8, 12, .9);
border-bottom-color: var(--line);
backdrop-filter: blur(18px) saturate(1.1);
box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
}
.nav-shell {
height: 100%;
display: flex;
align-items: center;
gap: var(--s-6);
}
/* --- brand lockup --------------------------------------------------------- */
.brand {
display: inline-flex;
align-items: center;
gap: .75rem;
text-decoration: none;
white-space: nowrap;
}
.brand svg, .brand img { flex: none; width: 34px; height: 34px; }
.brand-copy { display: grid; gap: .12rem; }
.brand-name {
font-family: var(--display);
font-size: .885rem;
font-weight: 600;
letter-spacing: .155em;
line-height: 1;
color: var(--parchment);
}
.brand-sub {
font-size: .565rem;
font-weight: 600;
letter-spacing: var(--tracking-wide);
line-height: 1;
text-transform: uppercase;
color: var(--gold);
}
/* --- primary navigation ---------------------------------------------------- */
.site-nav {
display: flex;
align-items: center;
gap: clamp(1rem, 1.9vw, 2.1rem);
margin-left: auto;
}
.site-nav a:not(.btn),
.site-nav .nav-group-toggle {
position: relative;
padding-block: .4rem;
color: var(--parchment-dim);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: .155em;
text-transform: uppercase;
text-decoration: none;
transition: color var(--dur) var(--ease);
}
.site-nav a:not(.btn)::after,
.site-nav .nav-group-toggle::after {
content: "";
position: absolute;
left: 0; right: 100%; bottom: -.1rem;
height: 1px;
background: var(--gold);
transition: right var(--dur) var(--ease-out);
}
.site-nav a:not(.btn):hover,
.site-nav .nav-group-toggle:hover { color: var(--parchment); }
.site-nav a:not(.btn):hover::after,
.site-nav .nav-group-toggle:hover::after,
.site-nav .nav-group-toggle[aria-expanded="true"]::after,
.site-nav a:not(.btn)[aria-current="page"]::after { right: 0; }
.site-nav a:not(.btn)[aria-current="page"] { color: var(--gold-light); }
.nav-actions { display: flex; align-items: center; gap: var(--s-3); }
.nav-cta { min-height: 42px; padding: 0 1.25rem; font-size: .66rem; }
/* CTA that only appears inside the mobile drawer */
.nav-drawer-cta { display: none; }
/* --- mobile menu button ---------------------------------------------------- */
.menu-toggle {
display: none;
place-items: center;
width: 46px; height: 46px;
margin-left: auto;
padding: 0;
border: 1px solid var(--line);
background: rgba(10, 14, 20, .7);
color: var(--parchment);
cursor: pointer;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.menu-toggle:hover { border-color: var(--line-strong); }
.menu-toggle .bars { display: grid; gap: 5px; width: 20px; }
.menu-toggle .bars i {
display: block; height: 1px; background: currentColor;
transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
transform-origin: center;
}
.menu-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* --- media frame ------------------------------------------------------------ */
.media {
position: relative;
overflow: hidden;
background: var(--slate-900);
border: 1px solid var(--line);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--tall { aspect-ratio: 3 / 4; }
.media--wide { aspect-ratio: 16 / 10; }
/* --- status pill ------------------------------------------------------------ */
.status {
display: inline-flex;
align-items: center;
gap: .55rem;
font-family: var(--display);
font-size: .9rem;
color: var(--gold-light);
}
.status::before {
content: "";
flex: none;
width: 7px; height: 7px;
border: 1px solid currentColor;
background: rgba(223, 201, 152, .3);
transform: rotate(45deg);
}
.status[data-state="online"] { color: #86c98d; }
.status[data-state="offline"] { color: #c98686; }
.status[data-state="checking"],
.status[data-state="maintenance"],
.status[data-state="degraded"] { color: var(--gold-light); }
/* --- reveal-on-scroll --------------------------------------------------------
Scoped to `.js`, which an inline script in sets. Without JavaScript
the rule never applies, so every section is visible instead of the page
rendering as an empty void below the hero. */
.js .reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
}
/* =============================================================================
SECTIONS
============================================================================= */
@layer sections {
.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
/* Two sections on the same ground would otherwise stack their full padding
and leave a dead band between them. Collapse the join. */
.section + .section--tight,
.section--tight + .section--tight { padding-top: 0; }
.section--soft {
background:
radial-gradient(58% 70% at 8% 0%, rgba(111, 201, 212, .055), transparent 70%),
radial-gradient(58% 70% at 92% 100%, rgba(157, 132, 216, .055), transparent 70%),
linear-gradient(180deg, var(--obsidian), var(--slate-900) 42%, var(--obsidian));
}
.section--soft::before,
.section--soft::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
}
.section--soft::before { top: 0; }
.section--soft::after { bottom: 0; }
.section-head {
display: grid;
gap: var(--s-5);
margin-bottom: var(--s-8);
}
.section-head h2 { margin-bottom: 0; max-width: 18ch; }
.section-head .lead { max-width: 52ch; }
@media (min-width: 900px) {
.section-head--split {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: end;
gap: var(--s-7);
}
.section-head--split .section-head-aside {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s-4);
padding-bottom: .3rem;
}
}
/* ---------------------------------------------------------------------------
HERO
--------------------------------------------------------------------------- */
.hero {
position: relative;
min-height: min(100svh, 980px);
display: grid;
align-items: center;
isolation: isolate;
overflow: hidden;
background: var(--abyss);
}
.hero-media {
position: absolute;
inset: -6% 0 0;
z-index: 0;
will-change: transform;
}
.hero-media img {
width: 100%; height: 106%;
object-fit: cover;
object-position: center 42%;
}
.hero-content {
position: relative;
z-index: 4;
width: min(880px, 100% - (var(--gutter) * 2));
margin-inline: auto;
padding-block: calc(var(--header-h) + var(--s-8)) var(--s-10);
text-align: center;
}
.hero .ornament { --orn-w: 260px; margin-bottom: var(--s-5); }
.hero .eyebrow { justify-content: center; color: var(--parchment-dim); }
.hero .eyebrow::before { color: var(--gold); }
.hero-title {
margin-bottom: var(--s-5);
font-size: var(--fs-display);
font-weight: 600;
line-height: .98;
letter-spacing: .045em;
text-shadow: 0 4px 42px rgba(0, 0, 0, .8), 0 1px 2px rgba(0, 0, 0, .6);
}
.hero-title .reborn {
display: block;
margin-top: .28em;
font-size: .30em;
font-weight: 400;
letter-spacing: var(--tracking-wide);
color: var(--gold-light);
text-indent: var(--tracking-wide);
}
/* chronicle band — rule / name / rule */
.chronicle-band {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s-5);
margin-bottom: var(--s-6);
}
.chronicle-band::before, .chronicle-band::after {
content: "";
flex: 1 1 0;
max-width: 120px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold));
opacity: .55;
}
.chronicle-band::after { background: linear-gradient(270deg, transparent, var(--gold)); }
.chronicle-band span {
flex: none;
font-family: var(--display);
font-size: clamp(.82rem, .68rem + .45vw, 1.05rem);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--parchment);
text-indent: var(--tracking-wide);
text-shadow: 0 2px 20px rgba(0, 0, 0, .8);
}
.hero-copy {
max-width: 54ch;
margin: 0 auto var(--s-7);
color: #d3d0c8;
font-size: var(--fs-lead);
text-shadow: 0 2px 18px rgba(0, 0, 0, .7);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--s-4);
}
.hero-note {
margin: var(--s-5) auto 0;
color: var(--muted);
font-size: var(--fs-xs);
letter-spacing: .04em;
text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}
.hero-note--link { margin-top: var(--s-3); }
.hero-scroll {
position: absolute;
z-index: 4;
bottom: var(--s-5); left: 50%;
transform: translateX(-50%);
display: grid;
justify-items: center;
gap: .6rem;
color: var(--parchment-dim);
font-size: .6rem;
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}
.hero-scroll::after {
content: "";
width: 1px; height: 42px;
background: linear-gradient(var(--gold), transparent);
}
/* ---------------------------------------------------------------------------
REALM BAR
--------------------------------------------------------------------------- */
.realm-bar {
position: relative;
z-index: 5;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, var(--slate-900), var(--obsidian));
}
.realm-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.realm-stat {
display: grid;
align-content: center;
gap: .3rem;
min-height: 104px;
padding: var(--s-4) var(--s-5);
border-left: 1px solid var(--line);
}
.realm-stat:last-child { border-right: 1px solid var(--line); }
.realm-stat dt {
color: var(--muted-deep);
font-size: .62rem;
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.realm-stat dd {
margin: 0;
color: var(--parchment);
font-family: var(--display);
font-size: .95rem;
line-height: 1.35;
}
/* ---------------------------------------------------------------------------
INTRO — what this realm is
--------------------------------------------------------------------------- */
.intro-grid {
display: grid;
gap: var(--s-8);
}
@media (min-width: 940px) {
.intro-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s-9); align-items: start; }
}
.intro-copy h2 { margin-bottom: var(--s-5); }
.intro-copy .lead { margin-bottom: var(--s-5); }
/* pillar list — hairline rows, not cards */
.pillars { display: grid; }
.pillars li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--s-4) var(--s-5);
padding: var(--s-5) 0;
border-top: 1px solid var(--line);
}
.pillars li:last-child { border-bottom: 1px solid var(--line); }
.pillars .pillar-mark {
color: var(--gold);
font-family: var(--display);
font-size: .78rem;
letter-spacing: .1em;
padding-top: .35rem;
}
.pillars h3 { margin-bottom: .35rem; }
.pillars p { margin: 0; color: var(--muted); font-size: var(--fs-sm); max-width: 46ch; }
/* ---------------------------------------------------------------------------
CHRONICLE SHOWCASE — Celestial Destiny
--------------------------------------------------------------------------- */
.chronicle {
position: relative;
isolation: isolate;
overflow: hidden;
border-block: 1px solid var(--line);
background: var(--abyss);
}
.chronicle-media { position: absolute; inset: 0; z-index: 0; }
.chronicle-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 46%; }
.chronicle-media::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(100deg, rgba(6, 8, 12, .96) 0 30%, rgba(6, 8, 12, .74) 52%, rgba(6, 8, 12, .34) 100%),
linear-gradient(to top, rgba(6, 8, 12, .9), transparent 46%);
}
.chronicle-inner {
position: relative;
z-index: 2;
padding-block: clamp(4.5rem, 3rem + 7vw, 9rem);
}
.chronicle-copy { max-width: 46rem; }
.chronicle-copy h2 { margin-bottom: var(--s-5); }
.chronicle-copy .lead { margin-bottom: var(--s-6); }
.chronicle-facts {
display: grid;
gap: 1px;
margin-top: var(--s-7);
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 720px) { .chronicle-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chronicle-facts div {
display: grid;
gap: .35rem;
padding: var(--s-5);
background: rgba(8, 11, 17, .82);
backdrop-filter: blur(6px);
}
.chronicle-facts dt {
color: var(--muted-deep);
font-size: .62rem;
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.chronicle-facts dd {
margin: 0;
color: var(--parchment);
font-family: var(--display);
font-size: 1.02rem;
}
/* ---------------------------------------------------------------------------
FEATURE ROWS — asymmetric, art + hairline list
--------------------------------------------------------------------------- */
.feature-split { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 940px) {
.feature-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-9); }
.feature-split--flip .feature-art { order: 2; }
}
.feature-art { position: relative; }
.feature-art .media { aspect-ratio: 4 / 5; }
.feature-art .media img { transition: transform 1.2s var(--ease-out); }
.feature-art:hover .media img { transform: scale(1.03); }
.feature-art::after {
content: "";
position: absolute;
inset: -10px;
border: 1px solid var(--line);
pointer-events: none;
}
.feature-rows { display: grid; }
.feature-rows li {
display: grid;
grid-template-columns: 3.4rem minmax(0, 1fr);
gap: var(--s-4);
padding: var(--s-5) 0;
border-bottom: 1px solid var(--line);
transition: border-color var(--dur) var(--ease);
}
.feature-rows li:first-child { border-top: 1px solid var(--line); }
.feature-rows li:hover { border-bottom-color: var(--line-strong); }
.feature-rows .idx {
color: var(--gold);
font-family: var(--display);
font-size: .8rem;
letter-spacing: .12em;
padding-top: .4rem;
}
.feature-rows h3 { margin-bottom: .4rem; }
.feature-rows p { margin: 0; color: var(--muted); font-size: var(--fs-sm); max-width: 48ch; }
/* ---------------------------------------------------------------------------
CLASS ROSTER — heraldic sigils
--------------------------------------------------------------------------- */
.class-roster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1px;
border: 1px solid var(--line);
background: var(--line);
}
.class-card {
position: relative;
display: grid;
align-content: end;
gap: .3rem;
min-height: 260px;
padding: var(--s-5);
background: var(--surface);
overflow: hidden;
transition: background var(--dur) var(--ease);
box-shadow: var(--plate-edge);
}
.class-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(70% 52% at 50% 22%, var(--tone, rgba(111, 201, 212, .22)), transparent 72%);
opacity: .55;
transition: opacity var(--dur) var(--ease);
}
.class-card:hover::before { opacity: 1; }
.class-sigil {
position: absolute;
top: var(--s-6); left: 50%;
transform: translateX(-50%);
width: 62px; height: 62px;
color: var(--gold-light);
opacity: .78;
transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease);
}
.class-card:hover .class-sigil { transform: translateX(-50%) translateY(-4px); opacity: 1; }
.class-card h3 { position: relative; margin: 0; color: var(--parchment); font-size: 1.05rem; letter-spacing: .09em; }
.class-card p { position: relative; margin: 0; color: var(--muted); font-size: var(--fs-xs); letter-spacing: .04em; }
/* ---------------------------------------------------------------------------
NEWS — editorial lead + list
--------------------------------------------------------------------------- */
.news-editorial { display: grid; gap: var(--s-7); }
@media (min-width: 940px) {
.news-editorial { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-8); align-items: start; }
}
.news-lead { display: grid; text-decoration: none; }
.news-lead .media { aspect-ratio: 16 / 9; margin-bottom: var(--s-5); }
.news-lead .media img { transition: transform 1.1s var(--ease-out), filter var(--dur) var(--ease); filter: saturate(.86); }
.news-lead:hover .media img { transform: scale(1.035); filter: saturate(1); }
.news-lead:hover .media { border-color: var(--line-strong); }
.news-lead h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); margin-bottom: var(--s-3); transition: color var(--dur) var(--ease); }
.news-lead:hover h3 { color: var(--gold-light); }
.news-lead p { color: var(--muted); margin-bottom: var(--s-4); }
.news-meta {
display: flex;
align-items: center;
gap: .8rem;
margin-bottom: var(--s-3);
font-size: .655rem;
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.news-meta .cat { color: var(--gold); }
.news-meta time { color: var(--muted-deep); }
.news-meta .sep { width: 14px; height: 1px; background: var(--line-strong); }
.news-list { display: grid; }
.news-item {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: var(--s-4);
padding: var(--s-5) 0;
border-top: 1px solid var(--line);
text-decoration: none;
transition: background var(--dur) var(--ease);
}
.news-item:last-child { border-bottom: 1px solid var(--line); }
.news-item:hover { background: rgba(194, 162, 106, .045); }
.news-item .media { aspect-ratio: 1; border-color: var(--line); }
.news-item .media img { filter: saturate(.8); transition: filter var(--dur) var(--ease); }
.news-item:hover .media img { filter: saturate(1); }
.news-item h3 { margin: 0 0 .3rem; font-size: 1.02rem; line-height: 1.28; transition: color var(--dur) var(--ease); }
.news-item:hover h3 { color: var(--gold-light); }
.news-item p { margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.news-item .news-meta { margin-bottom: .35rem; }
.news-list-more { margin: 0; padding-top: var(--s-5); }
/* full news index list */
.article-list { display: grid; border-top: 1px solid var(--line); }
.article {
display: grid;
gap: var(--s-3) var(--s-7);
padding: var(--s-7) 0;
border-bottom: 1px solid var(--line);
scroll-margin-top: calc(var(--header-h-compact) + 2rem);
}
@media (min-width: 780px) { .article { grid-template-columns: 190px minmax(0, 1fr); } }
.article .article-when { display: grid; gap: .3rem; align-content: start; padding-top: .3rem; }
.article time { color: var(--gold); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; }
.article .cat { color: var(--muted-deep); font-size: .62rem; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.article h2, .article h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); margin-bottom: var(--s-3); }
.article p { color: var(--muted); }
/* ---------------------------------------------------------------------------
GETTING STARTED — a path, not four cards
--------------------------------------------------------------------------- */
.path { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 780px) { .path { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.path-step {
position: relative;
display: grid;
align-content: start;
gap: var(--s-3);
padding: var(--s-6) var(--s-5) var(--s-7);
background: var(--surface);
box-shadow: var(--plate-edge);
}
.path-step .step-no {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
margin-bottom: var(--s-4);
border: 1px solid var(--line-strong);
color: var(--gold-light);
font-family: var(--display);
font-size: .82rem;
transform: rotate(45deg);
}
.path-step .step-no span { transform: rotate(-45deg); }
.path-step h3 { margin: 0; }
.path-step p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
/* ---------------------------------------------------------------------------
DOWNLOAD
--------------------------------------------------------------------------- */
.download-band {
position: relative;
isolation: isolate;
overflow: hidden;
border: 1px solid var(--line-strong);
background: var(--surface-flat);
box-shadow: var(--shadow-md);
}
.download-band .band-art { position: absolute; inset: 0; z-index: 0; }
.download-band .band-art img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 34%; }
.download-band .band-art::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(96deg, rgba(7, 10, 15, .96) 0 34%, rgba(7, 10, 15, .78) 56%, rgba(7, 10, 15, .42) 100%),
linear-gradient(to top, rgba(7, 10, 15, .7), transparent 55%);
}
.download-band-inner {
position: relative;
z-index: 2;
display: grid;
gap: var(--s-7);
padding: clamp(2rem, 1.2rem + 3.4vw, 4rem);
}
@media (min-width: 900px) {
.download-band-inner { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: center; gap: var(--s-9); }
}
.download-band h2 { margin-bottom: var(--s-4); }
.download-facts { display: grid; gap: .55rem; margin-top: var(--s-5); }
.download-facts li {
display: flex; align-items: baseline; gap: var(--s-4);
color: var(--parchment-dim); font-size: var(--fs-sm);
}
.download-facts .k {
flex: none; min-width: 6.5rem;
color: var(--muted-deep); font-size: .62rem; font-weight: 600;
letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.download-shell { display: grid; gap: var(--s-6); align-items: stretch; }
@media (min-width: 940px) { .download-shell { grid-template-columns: minmax(0, 1.4fr) minmax(300px, .7fr); gap: var(--s-7); } }
.download-card {
padding: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
border: 1px solid var(--line-strong);
background: var(--surface);
box-shadow: var(--plate-edge), var(--shadow-md);
}
.download-card h2 { margin-bottom: var(--s-4); }
.download-card .lead { margin-bottom: var(--s-6); }
.download-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.download-hint { color: var(--muted); font-size: var(--fs-xs); }
.trust-list { display: grid; }
.trust-list li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--s-4);
padding: var(--s-4) 0;
border-top: 1px solid var(--line);
color: var(--parchment-dim);
font-size: var(--fs-sm);
}
.trust-list li::before {
content: "";
width: 6px; height: 6px;
margin-top: .62em;
border: 1px solid var(--gold);
background: rgba(194, 162, 106, .35);
transform: rotate(45deg);
}
.detail-panel {
display: flex;
flex-direction: column;
padding: var(--s-6);
border: 1px solid var(--line);
background: var(--surface-flat);
box-shadow: var(--plate-edge);
}
.detail-panel > .eyebrow { margin-bottom: var(--s-5); }
/* Push the verification disclosure to the foot of the panel so the panel
fills the row rather than leaving a void beside a taller card. */
.detail-panel > .verify { margin-top: auto; }
.detail-list { display: grid; }
.detail-list div {
display: grid; gap: .25rem;
padding: var(--s-4) 0;
border-top: 1px solid var(--line);
}
.detail-list div:first-child { border-top: 0; padding-top: 0; }
.detail-list dt {
color: var(--muted-deep); font-size: .62rem; font-weight: 600;
letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.detail-list dd { margin: 0; color: var(--parchment-dim); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.verify {
margin-top: var(--s-5);
border-top: 1px solid var(--line);
padding-top: var(--s-4);
}
.verify > summary {
cursor: pointer;
color: var(--gold-light);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
list-style: none;
display: flex; align-items: center; gap: .55rem;
}
.verify > summary::-webkit-details-marker { display: none; }
.verify > summary::before {
content: "";
width: 6px; height: 6px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(-45deg);
transition: transform var(--dur) var(--ease);
}
.verify[open] > summary::before { transform: rotate(45deg); }
.verify-body { padding-top: var(--s-4); }
.verify-body p { color: var(--muted); font-size: var(--fs-xs); }
.hash {
display: block;
max-width: 100%;
margin-top: .5rem;
padding: .7rem .85rem;
border: 1px solid var(--line);
background: rgba(4, 6, 9, .7);
color: var(--parchment-dim);
font-family: var(--mono);
font-size: .72rem;
line-height: 1.55;
/* A 64-character digest has no break opportunities of its own, so it must
be told it may break anywhere or it will push the layout wider than the
viewport on a 360px phone. */
overflow-wrap: anywhere;
word-break: break-all;
}
/* ---------------------------------------------------------------------------
PAGE HERO (interior pages)
--------------------------------------------------------------------------- */
.page-hero {
position: relative;
display: grid;
align-items: end;
min-height: clamp(380px, 46vh, 560px);
isolation: isolate;
overflow: hidden;
border-bottom: 1px solid var(--line);
background: var(--abyss);
}
.page-hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.page-hero-media::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(to top, var(--obsidian) 0, rgba(6, 8, 12, .58) 46%, rgba(6, 8, 12, .5)),
linear-gradient(100deg, rgba(6, 8, 12, .88), rgba(6, 8, 12, .2) 72%);
}
.page-hero .container {
position: relative;
z-index: 2;
padding-block: calc(var(--header-h) + var(--s-8)) var(--s-8);
}
.page-hero h1 { max-width: 20ch; margin-bottom: var(--s-4); }
.page-hero .lead { color: #cfccc4; }
/* ---------------------------------------------------------------------------
SUPPORT / CARD GRID
--------------------------------------------------------------------------- */
/* Capped at three columns on purpose: `auto-fit` would make four at 1440px,
which leaves a six-card section with two empty cells showing through. */
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
border: 1px solid var(--line);
background: var(--line);
}
@media (min-width: 620px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
display: grid;
align-content: start;
gap: var(--s-3);
padding: var(--s-6);
background: var(--surface);
box-shadow: var(--plate-edge);
}
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.card .link { margin-top: var(--s-3); }
/* ---------------------------------------------------------------------------
COMMUNITY BAND
--------------------------------------------------------------------------- */
.community-band {
position: relative;
isolation: isolate;
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--shadow-md);
}
.community-band .band-art { position: absolute; inset: 0; z-index: 0; }
.community-band .band-art img { width: 100%; height: 100%; object-fit: cover; object-position: 76% 34%; }
.community-band .band-art::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(96deg, rgba(7, 10, 15, .97) 0 40%, rgba(7, 10, 15, .72) 62%, rgba(7, 10, 15, .28));
}
.community-inner {
position: relative;
z-index: 2;
max-width: 44rem;
padding: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
}
.community-inner h2 { margin-bottom: var(--s-4); }
.community-inner .lead { margin-bottom: var(--s-6); }
/* ---------------------------------------------------------------------------
TAG LIST — dense, scannable content inventory
--------------------------------------------------------------------------- */
.tag-list {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: var(--s-6);
}
.tag-list li {
padding: .5rem .9rem;
border: 1px solid var(--line);
background: rgba(10, 14, 20, .74);
backdrop-filter: blur(4px);
color: var(--parchment-dim);
font-size: var(--fs-xs);
letter-spacing: .03em;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tag-list li:hover { border-color: var(--line-strong); color: var(--parchment); }
/* ---------------------------------------------------------------------------
RACE TILES — compact roster preview
--------------------------------------------------------------------------- */
/*
* Capped at four columns.
*
* `auto-fit` alone produced six columns at 1440px, which left the eight-race
* roster as a row of six and a row of two — a wide empty gap under the tail.
* Four columns divides the roster evenly and keeps each tile wide enough for
* its tagline to sit on one or two lines.
*/
.race-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 1px;
border: 1px solid var(--line);
background: var(--line);
}
@media (min-width: 60rem) {
.race-tiles { grid-template-columns: repeat(4, 1fr); }
}
.race-tile {
display: grid;
align-content: start;
gap: .3rem;
padding: var(--s-5);
background: var(--surface);
text-decoration: none;
transition: background var(--dur) var(--ease);
box-shadow: var(--plate-edge);
}
.race-tile:hover { background: linear-gradient(160deg, #161d29, #0c111a 62%); }
.race-tile-name {
font-family: var(--display);
font-size: 1.12rem;
letter-spacing: .06em;
color: var(--parchment);
}
.race-tile-count {
color: var(--gold);
font-size: .62rem;
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.race-tile-tagline { margin-top: .35rem; color: var(--muted); font-size: var(--fs-xs); }
/* ---------------------------------------------------------------------------
CLASS ROSTER — race sections with full progressions
--------------------------------------------------------------------------- */
.race-nav {
display: grid;
gap: var(--s-4);
margin-bottom: var(--s-9);
padding-bottom: var(--s-5);
border-bottom: 1px solid var(--line);
}
.race-nav-label {
color: var(--muted-deep);
font-size: .62rem;
font-weight: 600;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.race-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.race-link {
display: inline-flex;
align-items: baseline;
gap: .5rem;
padding: .55rem 1rem;
border: 1px solid var(--line);
color: var(--parchment-dim);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.race-link b { color: var(--gold); font-size: .68rem; }
.race-link:hover {
border-color: var(--line-strong);
background: rgba(194, 162, 106, .06);
color: var(--parchment);
}
.race {
padding-block: var(--s-8);
border-top: 1px solid var(--line);
scroll-margin-top: calc(var(--header-h-compact) + 2rem);
}
.race:first-of-type { border-top: 0; padding-top: 0; }
.race-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
@media (min-width: 900px) {
.race-head { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: end; gap: var(--s-7); }
}
.race-head h2 { margin: 0; }
.race-head .lead { margin: 0; }
.class-entries {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
gap: 1px;
border: 1px solid var(--line);
background: var(--line);
}
.class-entry {
display: grid;
align-content: start;
padding: var(--s-5);
background: var(--surface);
transition: background var(--dur) var(--ease);
box-shadow: var(--plate-edge);
}
.class-entry:hover { background: linear-gradient(160deg, #161d29, #0c111a 62%); }
.class-entry header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-4);
margin-bottom: var(--s-4);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--line);
}
.class-entry h3 {
margin: 0;
font-size: 1.12rem;
letter-spacing: .045em;
color: var(--parchment);
}
.class-entry .discipline {
flex: none;
color: var(--muted-deep);
font-size: .58rem;
font-weight: 700;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.class-entry[data-discipline="mystic"] .discipline { color: var(--violet); }
.class-entry[data-discipline="summoner"] .discipline { color: var(--aqua); }
.class-entry[data-discipline="fighter"] .discipline { color: var(--ember); }
/* the progression chain */
.progression { display: grid; gap: .1rem; }
.progression li {
position: relative;
padding: .22rem 0 .22rem 1.15rem;
color: var(--muted);
font-size: .82rem;
line-height: 1.45;
}
.progression li::before {
content: "";
position: absolute;
left: 2px; top: .78em;
width: 5px; height: 5px;
border: 1px solid var(--muted-deep);
transform: rotate(45deg);
}
/* connecting spine between tiers */
.progression li:not(:last-child)::after {
content: "";
position: absolute;
left: 4px; top: calc(.78em + 6px);
width: 1px; height: calc(100% - 6px);
background: var(--line);
}
.progression li.is-final { color: var(--gold-light); font-weight: 600; }
.progression li.is-final::before {
border-color: var(--gold-light);
background: rgba(223, 201, 152, .35);
}
/* ---------------------------------------------------------------------------
HUNTING GROUNDS
--------------------------------------------------------------------------- */
.area-list { display: grid; border-top: 1px solid var(--line); }
.area {
display: grid;
grid-template-columns: 5.5rem minmax(0, 1fr);
gap: var(--s-5);
padding: var(--s-6) 0;
border-bottom: 1px solid var(--line);
scroll-margin-top: calc(var(--header-h-compact) + 2rem);
}
.area-level {
display: grid;
place-items: center;
align-self: start;
width: 5.5rem; height: 3.4rem;
border: 1px solid var(--line-strong);
background: rgba(194, 162, 106, .05);
}
.area-level span {
font-family: var(--display);
font-size: 1.05rem;
letter-spacing: .04em;
color: var(--gold-light);
}
.area-body h3 { margin: 0 0 .5rem; font-size: 1.28rem; }
.area-body > p { margin: 0 0 var(--s-4); color: var(--muted); font-size: var(--fs-sm); max-width: 60ch; }
.area-facts { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin: 0; }
.area-facts div { display: grid; gap: .1rem; }
.area-facts dt {
color: var(--muted-deep);
font-size: .58rem; font-weight: 600;
letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.area-facts dd { margin: 0; color: var(--parchment-dim); font-size: var(--fs-xs); }
.area-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s-6); }
.area-chip {
display: inline-flex; align-items: baseline; gap: .6rem;
padding: .5rem .9rem;
border: 1px solid var(--line);
background: rgba(10, 14, 20, .74);
backdrop-filter: blur(4px);
color: var(--parchment-dim);
font-size: var(--fs-xs);
text-decoration: none;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.area-chip-level { color: var(--gold); font-size: .62rem; font-weight: 700; letter-spacing: .08em; }
.area-chip:hover { border-color: var(--line-strong); color: var(--parchment); }
.area-chip--more { border-color: var(--line-strong); color: var(--gold-light); }
@media (max-width: 560px) {
.area { grid-template-columns: 1fr; gap: var(--s-4); }
.area-level { width: 4.6rem; height: 2.6rem; }
}
/* ---------------------------------------------------------------------------
NOTICE
--------------------------------------------------------------------------- */
.notice {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--s-4);
padding: var(--s-5);
border: 1px solid var(--line);
border-left: 2px solid var(--gold);
background: rgba(194, 162, 106, .05);
color: var(--parchment-dim);
font-size: var(--fs-sm);
}
.notice::before {
content: "";
width: 7px; height: 7px;
margin-top: .55em;
border: 1px solid var(--gold);
transform: rotate(45deg);
}
.notice p { margin: 0; max-width: 62ch; }
/* ---------------------------------------------------------------------------
FOOTER
--------------------------------------------------------------------------- */
.site-footer {
position: relative;
border-top: 1px solid var(--line);
background: linear-gradient(180deg, var(--abyss), #04060a);
padding-block: var(--s-9) var(--s-6);
}
.footer-grid { display: grid; gap: var(--s-7); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .footer-grid { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: var(--s-8); } }
.footer-about p { max-width: 38ch; margin: var(--s-5) 0 0; color: var(--muted-deep); font-size: var(--fs-xs); line-height: 1.7; }
.footer-col h2 {
margin-bottom: var(--s-4);
color: var(--gold);
font-family: var(--body);
font-size: .655rem;
font-weight: 700;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}
.footer-col a {
display: block;
padding: .38rem 0;
color: var(--muted);
font-size: var(--fs-sm);
text-decoration: none;
transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--parchment); }
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
margin-top: var(--s-8);
padding-top: var(--s-5);
border-top: 1px solid var(--line);
color: var(--muted-deep);
font-size: var(--fs-xs);
}
.footer-bottom p { margin: 0; max-width: none; }
}
/* =============================================================================
UTILITIES
============================================================================= */
@layer utilities {
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.stack > * + * { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.center { text-align: center; }
.center .lead, .center p { margin-inline: auto; }
.center .ornament { margin-inline: auto; }
}
/* =============================================================================
RESPONSIVE — navigation drawer and layout stepdowns
============================================================================= */
@media (max-width: 900px) {
.nav-actions .nav-cta { display: none; }
.menu-toggle { display: grid; }
.site-header,
.site-header.is-compact {
background: rgba(6, 8, 12, .93);
border-bottom-color: var(--line);
backdrop-filter: blur(18px);
}
.site-nav {
position: fixed;
inset: var(--header-h) 0 auto;
z-index: 90;
display: grid;
align-content: start;
gap: 0;
max-height: calc(100svh - var(--header-h));
overflow-y: auto;
padding: var(--s-4) var(--gutter) var(--s-6);
margin: 0;
border-bottom: 1px solid var(--line);
/* Fully opaque: a translucent drawer lets hero type ghost through the
navigation labels and reads as unfinished. */
background: var(--obsidian);
box-shadow: var(--shadow-lg);
transform: translateY(-101%);
opacity: 0;
visibility: hidden;
transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease), visibility var(--dur);
}
.site-nav.is-open { transform: none; opacity: 1; visibility: visible; }
.site-nav a:not(.btn),
.site-nav .nav-group-toggle {
padding: 1.05rem 0;
border-bottom: 1px solid rgba(255, 255, 255, .055);
font-size: .78rem;
letter-spacing: .18em;
}
.site-nav a:not(.btn)::after,
.site-nav .nav-group-toggle::after { display: none; }
.site-nav a:not(.btn)[aria-current="page"]::before {
content: "";
display: inline-block;
width: 5px; height: 5px;
margin-right: .7rem;
background: var(--gold);
transform: rotate(45deg);
vertical-align: middle;
}
.site-nav .nav-drawer-cta { display: block; margin-top: var(--s-5); }
.site-nav .nav-drawer-cta .btn { width: 100%; }
/* Dim the page behind an open drawer so focus sits on the menu. */
body.nav-open::after {
content: "";
position: fixed;
inset: 0;
z-index: 80;
background: rgba(4, 6, 9, .74);
animation: scrim-in var(--dur) var(--ease) both;
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
.realm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.realm-stat:nth-child(-n+2) { border-top: 0; }
.realm-stat:nth-child(2n) { border-right: 1px solid var(--line); }
.realm-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
.news-editorial { gap: var(--s-7); }
}
@media (max-width: 680px) {
.hero { min-height: 660px; }
.hero-content { padding-block: calc(var(--header-h) + var(--s-7)) calc(var(--s-9) + var(--s-6)); }
/* Portrait: the horizontal scrim leaves art behind the copy. Go vertical. */
.chronicle-media::after {
background: linear-gradient(to top, rgba(6, 8, 12, .96) 0 18%, rgba(6, 8, 12, .84) 62%, rgba(6, 8, 12, .74) 100%);
}
.community-band .band-art::after {
background: linear-gradient(to top, rgba(7, 10, 15, .95) 0 14%, rgba(7, 10, 15, .82) 66%, rgba(7, 10, 15, .7) 100%);
}
.download-band .band-art::after {
background: linear-gradient(to top, rgba(7, 10, 15, .95) 0 14%, rgba(7, 10, 15, .84) 66%, rgba(7, 10, 15, .72) 100%);
}
.hero-actions { display: grid; width: 100%; }
.hero-actions .btn { width: 100%; }
.chronicle-band::before, .chronicle-band::after { max-width: 40px; }
.realm-grid { grid-template-columns: 1fr; }
.realm-stat { min-height: 0; padding: var(--s-4) var(--s-5); border-right: 1px solid var(--line); }
.realm-stat:first-child { border-top: 0; }
.realm-stat:not(:first-child) { border-top: 1px solid var(--line); }
.news-item { grid-template-columns: 74px minmax(0, 1fr); gap: var(--s-4); }
.feature-rows li { grid-template-columns: 2.6rem minmax(0, 1fr); }
.class-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.class-card { min-height: 210px; }
.class-sigil { width: 48px; height: 48px; top: var(--s-5); }
.download-cta-row .btn { width: 100%; }
.download-facts li { display: grid; gap: .1rem; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* Narrowest supported phone (360px). An uppercase, letterspaced CTA label is
wide; at this width it is allowed to soften and, if it still must, to wrap
onto a second line rather than push the page sideways. */
@media (max-width: 400px) {
.btn {
white-space: normal;
height: auto;
padding: .95rem 1.1rem;
font-size: .665rem;
letter-spacing: .15em;
line-height: 1.3;
text-align: center;
}
.btn--lg { padding: 1.05rem 1.25rem; font-size: .715rem; }
.download-cta-row { display: grid; }
}
@media (max-width: 380px) {
.class-roster { grid-template-columns: 1fr; }
}
/* =============================================================================
PORTRAIT VIEWPORTS — phones and tablets held upright
-----------------------------------------------------------------------------
Keyed to aspect ratio, not width: a 768px tablet in portrait has the same
framing problem as a phone, and a 900px-wide window in landscape does not.
============================================================================= */
@media (max-aspect-ratio: 1/1) {
/* Cap the hero so a tall viewport does not leave a dead band under the CTAs. */
.hero { min-height: min(100svh, 820px); }
/* A portrait crop of wide landscape key art lands on the empty centre of the
composition and loses both figures; bias toward the right-hand archmage. */
.hero-media img { object-position: 73% 44%; }
/* That part of the art is bright, so deepen the vignette to keep type legible. */
.scrim-vignette {
background: radial-gradient(96% 58% at 50% 40%, rgba(6, 8, 12, .42) 12%, rgba(6, 8, 12, .74) 66%, rgba(6, 8, 12, .92) 100%);
}
}
/* =============================================================================
REDUCED MOTION — stable, static experience
============================================================================= */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.js .reveal { opacity: 1 !important; transform: none !important; }
.aura { animation: none; }
.hero-media { transform: none !important; }
.hero-scroll { display: none; }
}
/* =============================================================================
PRINT
============================================================================= */
@media print {
.site-header, .hero-scroll, .aura, .grain, .menu-toggle { display: none !important; }
body { background: #fff; color: #000; }
}
/* Inline download link inside the hero note — deliberately quiet, so the page
leads with the game rather than the installer. */
.hero-note-link { font-size: inherit; letter-spacing: .06em; text-transform: none; }
/* In-development paths: deliberately set apart from the playable roster. */
.in-development { padding-top: var(--s-8); border-top: 1px solid var(--line); margin-top: var(--s-8); }
.class-entry--dev { background: linear-gradient(160deg, #12161d, #0a0d13 66%); }
.class-entry--dev .discipline { color: var(--muted-deep); }
.class-entry--dev h3 { color: var(--parchment-dim); }
.class-entry--dev .dev-summary { margin: 0 0 var(--s-3); color: var(--muted); font-size: var(--fs-sm); }
.class-entry--dev .dev-note { margin: 0; color: var(--muted-deep); font-size: var(--fs-xs); }
.class-note { margin: var(--s-4) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--line); color: var(--gold); font-size: var(--fs-xs); line-height: 1.5; }
/* Hero: the chronicle is the headline, the brand sits above it. */
.chronicle-band--over { margin-bottom: var(--s-5); }
.chronicle-band--over span { font-size: clamp(.7rem, .6rem + .35vw, .86rem); color: var(--gold-light); }
.hero-title-line { display: block; }
/* Optional race portrait. Renders only when `image` is set on a race in
content/classes.json — the layout is identical without one. */
.race-portrait { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--slate-900); }
.race-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: saturate(.92); }
.race-portrait::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(6,8,12,.72), transparent 46%);
}
@media (min-width: 900px) {
.race--illustrated .race-head { grid-template-columns: 200px minmax(0,.9fr) minmax(0,1.1fr); align-items: end; }
.race-portrait { aspect-ratio: 3/4; align-self: stretch; }
}
@media (max-width: 899px) {
.race-portrait { aspect-ratio: 16/9; margin-bottom: var(--s-4); }
}
/* =========================================================================
Legal / policy long-form
-------------------------------------------------------------------------
Terms and Privacy are the only pages on the site that are mostly running
prose with nested headings and lists. They get a dedicated block rather
than being forced through .prose, which is a one-line colour helper.
Measure is capped so lines stay readable at desktop widths.
========================================================================= */
@layer sections {
.legal { color: var(--muted); }
.legal > * + * { margin-top: var(--s-4); }
.legal h2 {
margin-top: var(--s-7);
padding-top: var(--s-5);
border-top: 1px solid var(--line);
color: var(--fg);
font-size: clamp(1.15rem, 1.6vw, 1.4rem);
letter-spacing: .01em;
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 {
margin-top: var(--s-5);
color: var(--fg);
font-size: 1.02rem;
}
.legal p,
.legal li { max-width: 68ch; line-height: 1.75; }
.legal ul,
.legal ol { padding-left: 1.25rem; display: grid; gap: .55rem; }
.legal li { padding-left: .15rem; }
.legal ul li { list-style: none; position: relative; }
.legal ul li::before {
content: "";
position: absolute;
left: -.95rem;
top: .62em;
width: 5px;
height: 5px;
transform: rotate(45deg);
background: var(--gold-light);
opacity: .65;
}
.legal ol li { list-style: decimal; }
.legal a { color: var(--fg); text-decoration: underline; text-underline-offset: .18em; }
.legal a:hover { color: var(--gold-light); }
.legal-meta {
display: flex;
flex-wrap: wrap;
gap: var(--s-3) var(--s-6);
padding-bottom: var(--s-5);
margin-bottom: var(--s-6);
border-bottom: 1px solid var(--line);
font-size: .82rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
}
.legal-meta b { color: var(--fg); font-weight: 600; }
}
/* Header sign-in link, beside the Download button. Hidden on narrow widths,
where the same link lives in the drawer instead. */
@layer components {
.nav-signin {
margin-right: var(--s-4);
font-size: .82rem;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 63.99rem) {
.nav-signin { display: none; }
}
.nav-drawer-cta .btn--ghost { margin-bottom: var(--s-3); }
}
/* =========================================================================
Account & admin forms
-------------------------------------------------------------------------
The account pages shipped with no form styling at all, so labels and inputs
fell back to browser defaults and sat inline next to each other. These rules
give them the same plate-and-gold treatment as the rest of the site.
Notes that matter:
* Inputs are 16px on mobile. Anything smaller makes iOS Safari zoom the page
on focus, which is what made the sign-in form jump around.
* Focus is a visible gold ring, never `outline: none`. Keyboard users have to
be able to see where they are.
========================================================================= */
@layer components {
.form {
display: grid;
gap: var(--s-5);
max-width: 27rem;
margin-top: var(--s-6);
}
.form-row { display: grid; gap: .45rem; }
.form-row label {
font-family: var(--body);
font-size: var(--fs-label);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold);
}
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="number"],
.form select,
.form textarea {
width: 100%;
padding: .78rem .9rem;
font-family: var(--body);
font-size: 1rem; /* 16px — stops iOS zooming on focus */
line-height: 1.4;
color: var(--parchment);
background: var(--surface-flat);
border: 1px solid var(--line);
border-radius: 2px;
box-shadow: var(--plate-edge);
transition: border-color .16s ease, box-shadow .16s ease;
appearance: none;
}
.form input::placeholder { color: var(--muted-deep); }
.form input:hover,
.form select:hover,
.form textarea:hover { border-color: var(--line-strong); }
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
outline: none;
border-color: var(--gold);
box-shadow: var(--plate-edge), 0 0 0 3px rgba(194, 162, 106, .18);
}
.form input:autofill,
.form input:-webkit-autofill {
-webkit-text-fill-color: var(--parchment);
-webkit-box-shadow: 0 0 0 1000px var(--slate-800) inset;
}
.form-hint {
font-size: var(--fs-xs);
line-height: 1.55;
color: var(--muted);
}
.form-actions { margin-top: var(--s-2); }
.form-actions .btn { width: 100%; }
@media (min-width: 30rem) {
.form-actions .btn { width: auto; min-width: 12rem; }
}
/* Links that follow a form: sign in / register / forgot password. */
.form + p,
.form ~ p { margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--muted); }
/* --- notices -----------------------------------------------------------
The base .notice is a two-column grid expecting an icon plus text. These
pages pass a single paragraph, so it is collapsed to one column here and
given state colours. */
.notice--info,
.notice--error {
grid-template-columns: minmax(0, 1fr);
margin-bottom: var(--s-6);
}
.notice--error {
border-left-color: var(--ember);
background: rgba(201, 138, 74, .07);
color: var(--parchment);
}
.notice--info {
border-left-color: var(--aqua);
background: rgba(111, 201, 212, .06);
}
/* --- admin ------------------------------------------------------------- */
.admin-nav {
display: flex;
flex-wrap: wrap;
gap: var(--s-3) var(--s-5);
padding-bottom: var(--s-5);
margin-bottom: var(--s-6);
border-bottom: 1px solid var(--line);
font-size: var(--fs-sm);
}
}
@layer sections {
/* A hero with no artwork behind it should not reserve space for artwork.
This must sit in the `sections` layer: `.page-hero` is defined there, and
a `components`-layer override would lose to it regardless of specificity. */
.page-hero--plain {
min-height: 0;
padding-block: clamp(2.75rem, 8vw, 4.5rem);
background: linear-gradient(180deg, var(--slate-900) 0%, var(--abyss) 100%);
}
/* The hero container carries ~118px of top padding to clear the artwork
behind it. With no artwork that is just dead space above the heading. */
.page-hero--plain .container { padding-top: 0; padding-bottom: 0; }
}
/* =========================================================================
Header + hero alignment corrections
========================================================================= */
@layer components {
/* "The Server" and "Hunting Grounds" were wrapping onto two lines, making
those two items 51px tall against 32px for everything else. That pushed
the whole bar out of alignment and added dead height on desktop. */
.site-nav a[data-nav] { white-space: nowrap; }
}
@layer sections {
/* The chronicle band is a flex container, but as a flex ITEM inside
.hero-content it was sized to its own content and aligned to the start —
so "LINEAGE UNIVERSE REBORN" sat left of the eyebrow and the title, which
stretch to full width. Making it full width lets its own
`justify-content: center` do the centring, and the rule-name-rule
decoration spans properly. */
.chronicle-band {
width: 100%;
/* The band is a , so it inherits a measure cap (~60ch) meant for body
copy. That cap is what left it narrower than the eyebrow and title and
therefore visually off-centre. */
max-width: none;
}
}
/* =========================================================================
Hero ambience — "bringing the artwork to life"
-------------------------------------------------------------------------
This is an OVERLAY on the still image, not video. It adds three things:
1. a very slow drift of the sky, so the storm reads as moving
2. a pulsing glow at each mage's staff — aqua on the left, violet on the
right, matching the artwork
3. a soft breathing glow along the lightning arc between them
Deliberate restraint, for two reasons:
* **Photosensitivity.** Real lightning flicker means rapid luminance
flashes, which is a genuine seizure risk and fails WCAG 2.3.1. The storm
here BREATHES over several seconds; it never strobes.
* **Performance.** Only `opacity` and `transform` are animated — both
composited on the GPU. No animated blurs or boxshadows over large areas,
which is what makes this kind of effect stutter on phones.
Everything here is off under `prefers-reduced-motion`, and the staff glows
only render on wide viewports, where `object-fit: cover` still shows the
part of the painting they sit on.
========================================================================= */
@layer sections {
.hero-magic {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.hero-magic-staff,
.hero-magic-storm {
position: absolute;
display: block;
border-radius: 50%;
opacity: 0;
will-change: opacity, transform;
}
/* Left mage: the trident head, roughly 18% across and 24% down. */
.hero-magic-staff--light {
left: 18.2%;
top: 23.5%;
width: 190px;
height: 190px;
margin: -95px 0 0 -95px;
background: radial-gradient(circle,
rgba(203, 247, 255, .55) 0%,
rgba(111, 201, 212, .30) 26%,
rgba(111, 201, 212, .10) 48%,
transparent 70%);
}
/* Right mage: the staff orb, close to the right edge. */
.hero-magic-staff--dark {
left: 98.4%;
top: 21%;
width: 210px;
height: 210px;
margin: -105px 0 0 -105px;
background: radial-gradient(circle,
rgba(226, 205, 255, .48) 0%,
rgba(157, 132, 216, .30) 26%,
rgba(157, 132, 216, .10) 50%,
transparent 72%);
}
/* The arc of lightning across the upper middle. */
.hero-magic-storm {
left: 50%;
top: 12%;
width: 62%;
height: 34%;
margin-left: -31%;
border-radius: 50%;
background: radial-gradient(ellipse at center,
rgba(233, 228, 215, .17) 0%,
rgba(157, 132, 216, .09) 38%,
transparent 68%);
}
@media (prefers-reduced-motion: no-preference) {
/* The sky drifts. Tiny amplitude over a long cycle: felt, not watched. */
.hero-media img {
animation: hero-sky-drift 54s ease-in-out infinite alternate;
transform-origin: 52% 40%;
}
.hero-magic-staff--light { animation: hero-pulse-light 7.5s ease-in-out infinite; }
.hero-magic-staff--dark { animation: hero-pulse-dark 9s ease-in-out infinite; }
.hero-magic-storm { animation: hero-storm-breathe 11s ease-in-out infinite; }
}
@keyframes hero-sky-drift {
from { transform: scale(1.015) translate3d(-.5%, 0, 0); }
to { transform: scale(1.045) translate3d(.5%, -1%, 0); }
}
/* Offset phases so the two staffs never pulse in lockstep — synchronised
glows read as a UI effect; staggered ones read as two separate casters. */
@keyframes hero-pulse-light {
0%, 100% { opacity: .30; transform: scale(.94); }
46% { opacity: .85; transform: scale(1.07); }
}
@keyframes hero-pulse-dark {
0%, 100% { opacity: .26; transform: scale(.96); }
38% { opacity: .78; transform: scale(1.09); }
}
@keyframes hero-storm-breathe {
0%, 100% { opacity: .20; transform: scale(1); }
30% { opacity: .62; transform: scale(1.05); }
62% { opacity: .34; transform: scale(1.02); }
}
/* Below this width `object-fit: cover` crops the sides away, so the glows
would float over empty sky rather than over the staffs. */
@media (max-width: 63.99rem) {
.hero-magic-staff { display: none; }
.hero-magic-storm { opacity: .22; animation-duration: 14s; }
}
}
/* Motion off entirely when the visitor has asked for that. */
@media (prefers-reduced-motion: reduce) {
.hero-media img { animation: none !important; transform: none !important; }
.hero-magic-staff,
.hero-magic-storm { animation: none !important; }
.hero-magic-staff--light { opacity: .40; }
.hero-magic-staff--dark { opacity: .34; }
.hero-magic-storm { opacity: .26; }
}
/* =========================================================================
My Page — Account / Security / Payment
-------------------------------------------------------------------------
Grouped list rows in the shape of a modern account console.
The three row states are a deliberate honesty device:
.is-off a real feature that is currently off — muted
.is-soon not built yet — dimmer, italic, inert
A row that is not clickable is a
, not an
, so it cannot be tabbed
to or clicked and then do nothing.
========================================================================= */
@layer sections {
.mypage-tabs {
display: flex;
gap: var(--s-6);
margin-bottom: var(--s-7);
border-bottom: 1px solid var(--line);
}
.mypage-tab {
position: relative;
padding: 0 0 var(--s-4);
font-size: var(--fs-sm);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
white-space: nowrap;
}
.mypage-tab:hover { color: var(--parchment-dim); }
.mypage-tab.is-active { color: var(--parchment); }
.mypage-tab.is-active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--gold);
}
.mypage-identity {
display: flex;
align-items: center;
gap: var(--s-5);
padding: var(--s-5);
margin-bottom: var(--s-7);
border: 1px solid var(--line);
background: var(--surface);
box-shadow: var(--plate-edge);
}
.mypage-avatar {
display: grid;
place-items: center;
width: 58px; height: 58px;
flex: 0 0 58px;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: var(--slate-800);
font-family: var(--display);
font-size: 1.4rem;
color: var(--gold-light);
}
.mypage-name { margin: 0; font-family: var(--display); font-size: 1.15rem; color: var(--parchment); }
.mypage-sub { margin: .2rem 0 0; font-size: var(--fs-xs); color: var(--muted); }
/* ---- character card ---------------------------------------------------
*
* The same INFORMATION design the launcher renders, in this site's visual
* language rather than the launcher's:
*
* Calickro row 1 name identity, alone so it is scannable
* No clan row 2 clan allegiance; italic + dim when absent
* Crow | Lv 1 row 3 server and level - both "where you are",
* one in the world, one in progression
*
* A player should recognise the same identity in both places. Matching the
* fields, their order and the empty state is what does that; matching the
* launcher's colours would not, and would look wrong here.
*/
.char-card {
display: grid;
gap: .15rem;
padding: var(--s-4) var(--s-5);
border: 1px solid var(--line);
background: var(--surface);
box-shadow: var(--plate-edge);
}
.char-name {
font-family: var(--display);
font-size: 1.05rem;
color: var(--parchment);
line-height: 1.25;
}
.char-clan { font-size: var(--fs-sm); color: var(--muted); line-height: 1.3; }
/* Italic and dimmer so it reads as a STATE, not as a clan called "None".
The API sends null; this is where that null becomes words. */
.char-clan.is-empty { color: var(--muted-deep); font-style: italic; }
.char-foot {
display: flex;
align-items: baseline;
gap: .5rem;
font-size: var(--fs-sm);
color: var(--muted);
margin-top: .1rem;
}
.char-foot .char-pipe { color: var(--line-strong); }
.char-lv { color: var(--gold-light); font-weight: 600; font-variant-numeric: tabular-nums; }
.char-lv i {
font-style: normal;
font-size: .62em;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gold);
margin-right: .3em;
}
.char-empty { font-size: var(--fs-sm); color: var(--muted-deep); font-style: italic; }
.mypage-group-title {
margin: var(--s-7) 0 var(--s-4);
font-family: var(--body);
font-size: var(--fs-label);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold);
}
.mypage-group {
border: 1px solid var(--line);
background: var(--surface-flat);
box-shadow: var(--plate-edge);
}
.mypage-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--s-3) var(--s-5);
padding: var(--s-5);
border-bottom: 1px solid var(--line);
color: var(--parchment-dim);
text-decoration: none;
transition: background-color .14s ease;
}
.mypage-group > .mypage-row:last-child { border-bottom: 0; }
a.mypage-row:hover { background: rgba(194, 162, 106, .05); }
a.mypage-row::after {
content: "›";
grid-column: 3;
color: var(--muted-deep);
font-size: 1.2rem;
line-height: 1;
}
a.mypage-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.mypage-row-label { font-size: var(--fs-body); color: var(--parchment); }
.mypage-row-value { font-size: var(--fs-sm); color: var(--muted); text-align: right; }
.mypage-row-value.is-off { color: var(--ember); }
.mypage-row-value.is-soon { color: var(--muted-deep); font-style: italic; }
.mypage-row-note {
grid-column: 1 / -1;
margin-top: .2rem;
font-size: var(--fs-xs);
line-height: 1.5;
color: var(--muted-deep);
}
.notice--soon {
grid-template-columns: minmax(0, 1fr);
border-left-color: var(--muted-deep);
background: rgba(140, 147, 157, .06);
margin-bottom: var(--s-6);
}
@media (max-width: 32rem) {
.mypage-tabs { gap: var(--s-5); }
.mypage-row { padding: var(--s-4); }
.mypage-row-label { font-size: var(--fs-sm); }
}
}
/* =========================================================================
My Page shell — sidebar rail + main column
========================================================================= */
@layer sections {
/* The site header is fixed, so content must clear its height or the first
heading sits underneath it. The static pages do this via
`.page-hero .container`; My Page needs the same allowance. */
.mypage { padding-block: calc(var(--header-h) + var(--s-7)) var(--s-9); }
.mypage-shell { display: grid; gap: var(--s-7); }
@media (min-width: 60rem) {
.mypage-shell { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-9); }
}
.mypage-nav { display: flex; flex-direction: column; gap: .1rem; }
@media (max-width: 59.99rem) {
/* On narrow screens the rail becomes a scrollable strip rather than a tall
stack that pushes the content off-screen. */
.mypage-nav {
flex-direction: row;
gap: var(--s-5);
overflow-x: auto;
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--line);
-webkit-overflow-scrolling: touch;
}
.mypage-nav-children { display: none; }
}
.mypage-nav-top {
padding: .5rem 0;
font-family: var(--body);
font-size: var(--fs-sm);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
white-space: nowrap;
}
.mypage-nav-top:hover { color: var(--parchment-dim); }
.mypage-nav-top.is-active { color: var(--parchment); }
.mypage-nav-children {
display: grid;
gap: .1rem;
margin: .2rem 0 var(--s-5);
padding-left: var(--s-4);
border-left: 1px solid var(--line);
}
.mypage-nav-sub {
padding: .3rem 0;
font-size: var(--fs-xs);
color: var(--muted-deep);
text-decoration: none;
}
.mypage-nav-sub:hover { color: var(--gold-light); }
.mypage-heading {
margin: 0 0 var(--s-6);
font-family: var(--display);
font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem);
font-weight: 400;
color: var(--parchment);
}
.mypage-main > .mypage-group-title:first-of-type { margin-top: 0; }
}
@layer sections {
/* Staff-only entry in the account rail. Marked so it reads as a different
kind of destination, not another personal setting. */
.mypage-nav-admin {
margin-top: var(--s-5);
padding-top: var(--s-4);
border-top: 1px solid var(--line);
color: var(--gold);
}
.mypage-nav-admin:hover { color: var(--gold-light); }
}
@layer sections {
/* Inline access-level setter on the admin character rows. */
.inline-set { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-3); }
.inline-set input[type="number"] {
width: 6rem; padding: .45rem .6rem; font-size: .95rem;
color: var(--parchment); background: var(--surface-flat);
border: 1px solid var(--line); border-radius: 2px;
}
.inline-set input[type="number"]:focus-visible {
outline: none; border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(194, 162, 106, .18);
}
.inline-set .btn { padding: .45rem 1rem; font-size: .8rem; }
}
@layer sections {
/* --- support tickets ---------------------------------------------------- */
.ticket-list { display: grid; gap: .5rem; margin-top: 1rem; }
.ticket-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .85rem 1.1rem;
background: var(--surface-flat);
border: 1px solid var(--line);
border-radius: 3px;
text-decoration: none;
color: var(--parchment);
}
.ticket-row:hover { border-color: var(--line-strong); }
.ticket-row-main { display: grid; gap: .15rem; min-width: 0; }
.ticket-row-subject { font-weight: 600; }
.ticket-row-meta { font-size: .85rem; color: var(--muted); }
.ticket-state {
font-size: .72rem;
letter-spacing: .1em;
text-transform: uppercase;
padding: .2rem .55rem;
border-radius: 2px;
white-space: nowrap;
flex: none;
}
.ticket-state--info { color: #7fa6cf; background: rgba(127, 166, 207, .13); }
.ticket-state--warn { color: #d9a441; background: rgba(217, 164, 65, .13); }
.ticket-state--ok { color: #6fb98a; background: rgba(111, 185, 138, .13); }
.ticket-state--off { color: var(--muted); background: rgba(255, 255, 255, .05); }
.ticket-message {
background: var(--surface-flat);
border: 1px solid var(--line);
border-left: 3px solid var(--line-strong);
border-radius: 3px;
padding: .9rem 1.1rem;
margin-top: .75rem;
}
/* Staff replies carry the accent so a conversation is readable at a glance. */
.ticket-message.is-staff { border-left-color: var(--gold); }
.ticket-message-who {
margin: 0 0 .35rem;
font-size: .8rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gold);
}
.ticket-message-who span { color: var(--muted); letter-spacing: 0; text-transform: none; }
.ticket-message-body { margin: 0; white-space: pre-wrap; }
.form textarea {
width: 100%;
font: inherit;
line-height: 1.55;
color: var(--parchment);
background: var(--surface-flat);
border: 1px solid var(--line);
border-radius: 2px;
padding: .6rem .75rem;
resize: vertical;
}
.form textarea:focus-visible {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(194, 162, 106, .18);
}
.form select {
font: inherit;
color: var(--parchment);
background: var(--surface-flat);
border: 1px solid var(--line);
border-radius: 2px;
padding: .6rem .75rem;
}
}
@layer sections {
/* Which class you actually pick at character creation — different from where
the line ends, and the distinction the old roster page lost. */
.class-origin {
margin: .6rem 0 0;
font-size: .86rem;
color: var(--muted);
}
.class-origin b {
color: var(--gold);
font-weight: 600;
}
}
@layer sections {
/* --- creatable class cards ---------------------------------------------- */
/* The roster lists what you PICK at creation, not every awakened class. A
root that branches shows where it leads rather than pretending each branch
was a separate choice. */
.class-line-name {
margin: -.35rem 0 .75rem;
font-size: .82rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--gold);
}
.class-branches {
margin: 0 0 .6rem;
font-size: .86rem;
color: var(--muted);
}
.branch-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: .45rem;
}
.branch-list li {
display: grid;
gap: .1rem;
padding-left: .8rem;
border-left: 2px solid var(--line);
}
.branch-list b {
font-weight: 600;
color: var(--parchment);
}
.branch-list span {
font-size: .82rem;
color: var(--muted);
}
}
@layer sections {
/* A playable line that is not on the creation screen. Saying so stops a new
player hunting for a button that is not there. */
.class-entry-route {
margin: -.35rem 0 .8rem;
font-size: .78rem;
line-height: 1.4;
color: var(--muted-deep);
border-left: 2px solid var(--line);
padding-left: .6rem;
}
}
@layer sections {
/* =====================================================================
CLASS ROSTER
Twenty cards of prose over ten screens, with nothing to look at and a
nav that scrolled away at the top. Three fixes: real card surfaces, the
client's own sigils, and a nav that stays.
===================================================================== */
/* Per-race accent. Not decoration — it is what makes eight sections
distinguishable while scrolling past them. */
.race[data-race="kamael"] { --race: #b98fd6; }
.race[data-race="human"] { --race: #c2a26a; }
.race[data-race="high-elf"] { --race: #d9c98a; }
.race[data-race="elf"] { --race: #7fc6a8; }
.race[data-race="dark-elf"] { --race: #a97fc6; }
.race[data-race="orc"] { --race: #cf8560; }
.race[data-race="dwarf"] { --race: #cfa85f; }
.race[data-race="sylph"] { --race: #7fa6cf; }
.race { --race: var(--gold); }
/* --- sticky nav ------------------------------------------------------- */
.race-nav {
position: sticky;
top: 0;
z-index: 20;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem 1.25rem;
padding: .7rem 0;
margin-bottom: 2rem;
background: color-mix(in srgb, var(--surface-flat) 92%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.race-nav-label {
display: flex;
gap: 1rem;
font-size: .78rem;
letter-spacing: .04em;
color: var(--muted);
}
/* Two different quantities sat adjacent with nothing between them. */
.stat-pair b { color: var(--parchment); font-weight: 600; }
.stat-pair + .stat-pair {
padding-left: 1rem;
border-left: 1px solid var(--line);
}
.race-links { display: flex; flex-wrap: wrap; gap: .35rem; }
.race-link {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .3rem .6rem;
border: 1px solid var(--line);
border-radius: 999px;
text-decoration: none;
color: var(--parchment-dim);
font-size: .82rem;
white-space: nowrap;
}
.race-link img { width: 20px; height: 20px; opacity: .75; }
.race-link b { color: var(--muted-deep); font-weight: 500; font-size: .74rem; }
.race-link:hover,
.race-link:focus-visible {
color: var(--parchment);
border-color: var(--line-strong);
background: rgba(255, 255, 255, .03);
}
.race-link:hover img { opacity: 1; }
/* --- the cards -------------------------------------------------------- */
.class-entries {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.class-entry {
background: #10141c;
border: 1px solid rgba(194, 162, 106, .14);
border-top: 2px solid var(--race);
border-radius: 4px;
padding: 1.25rem 1.35rem 1.35rem;
}
.class-entry.is-creatable { border-color: rgba(194, 162, 106, .28); }
.class-entry-head {
display: flex;
align-items: center;
gap: .8rem;
margin-bottom: .5rem;
}
.class-entry-head h3 { margin: 0; font-size: 1.05rem; line-height: 1.2; }
.class-entry-head .discipline {
font-size: .74rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted-deep);
}
.class-icon {
width: 42px;
height: 42px;
flex: none;
object-fit: contain;
filter: drop-shadow(0 0 6px rgba(0, 0, 0, .6));
}
.class-entry-route {
margin: 0 0 .9rem;
font-size: .74rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted-deep);
}
.class-entry-route.is-creatable { color: var(--race); }
/* --- progression, one grammar ---------------------------------------- */
.progression { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.progression li {
display: grid;
grid-template-columns: 1.6rem 1fr;
align-items: baseline;
gap: .5rem;
font-size: .9rem;
color: var(--parchment-dim);
}
.progression .stage-n {
font-size: .68rem;
letter-spacing: .08em;
color: var(--muted-deep);
text-align: right;
}
.progression li.is-final { color: var(--parchment); font-weight: 600; }
.progression li.is-final .stage-n { color: var(--race); }
.branch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.branch-list li {
display: grid;
grid-template-columns: 30px 1fr;
grid-template-areas: "icon name" "icon path";
align-items: center;
gap: 0 .6rem;
}
.branch-list .class-icon { grid-area: icon; width: 30px; height: 30px; }
.branch-name { grid-area: name; font-weight: 600; font-size: .92rem; }
.branch-path { grid-area: path; font-size: .76rem; color: var(--muted-deep); }
/* --- race heading ----------------------------------------------------- */
.race { scroll-margin-top: 4.5rem; }
.race + .race { margin-top: 3rem; }
.race-head { border-left: 3px solid var(--race); padding-left: 1rem; }
}
@layer sections {
/* The roster is a reference page: 22 cards carrying 46 progressions is
simply a lot of information, and the sticky nav is what makes it findable
rather than making it short. These are the reductions available without
hiding anything. */
.race + .race { margin-top: 2rem; }
.race-head { margin-bottom: 1.1rem; }
.race-head .lead { margin-bottom: 0; font-size: .95rem; }
.class-entries { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.class-entry { padding: 1.1rem 1.15rem 1.2rem; }
.class-entry-route { margin-bottom: .7rem; }
}
@layer sections {
/* --- lines open to more than one race --------------------------------- */
/* Death Knight was three identical cards and Assassin was two. One card
each now, carrying which races may take it — because the sigils being
byte-identical does not make them the same class, and the restriction
differs by race. */
.race--shared { --race: var(--gold); }
.avail-label {
margin: 1rem 0 .4rem;
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted-deep);
}
.avail-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: .35rem;
}
.avail-pill {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .22rem .5rem;
border: 1px solid var(--line);
border-radius: 999px;
font-size: .8rem;
color: var(--parchment-dim);
}
.avail-pill img { width: 18px; height: 18px; opacity: .8; }
.avail-pill b {
font-weight: 500;
font-size: .7rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--gold);
}
}
@layer sections {
/* The hero headline is the chronicle wordmark rather than set type.
It stays an with the name in `alt`, so the heading outline and the
section's aria-labelledby are unchanged — a screen reader still hears the
chronicle name, and the file is named by role so a rebrand is a swap. */
.hero-title--wordmark {
margin-bottom: var(--s-5);
line-height: 1;
/* The gold art carries its own highlights; the type shadow would muddy it. */
text-shadow: none;
}
.hero-title--wordmark img {
display: block;
/* `.hero-content` is text-align:center, which centres INLINE content. A
block element with an explicit width ignores that and sits flush left —
440px off centre at 1440px wide. It looked fine on mobile only because
88vw leaves barely any slack to be off by. */
margin-inline: auto;
width: min(38rem, 60vw);
height: auto;
max-width: 100%;
filter: drop-shadow(0 6px 34px rgba(0, 0, 0, .7));
}
@media (max-width: 40rem) {
.hero-title--wordmark img { width: 88vw; }
}
}
/* ============================================================ SERVERS ======
The Servers dropdown and the opening countdown for realms that have not
launched. Gated behind `features.servers` - when that flag is off none of
this markup is built, and these rules simply match nothing.
========================================================================== */
@layer components {
/* --- nav dropdown ------------------------------------------------------ */
.nav-group { position: relative; display: inline-flex; }
/*
* Button reset ONLY. Every typographic property - size, weight, letter-spacing,
* uppercase, colour, the underline - comes from the shared `.site-nav a:not(.btn),
* .site-nav .nav-group-toggle` rule above, so this control cannot drift away from
* the links beside it.
*
* It did exactly that when shipped: `font: inherit` on a inherits from its
* PARENT, not from its sibling anchors, so the nav read HOME CLASSES NEWS and then
* `Servers` - wrong case, wrong size, wrong weight, wrong tracking, wrong colour.
* Five properties. I had verified the menu opened and linked correctly and never
* compared it against the items next to it.
*/
.nav-group-toggle {
display: inline-flex; align-items: center; gap: .4em;
background: none; border: 0; margin: 0;
font-family: inherit; cursor: pointer;
}
.nav-group-toggle:hover { color: var(--gold-light); }
.nav-group-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.nav-caret {
width: .42em; height: .42em; margin-top: -.18em;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform .18s ease;
}
.nav-group.is-open .nav-caret { transform: rotate(-135deg); margin-top: .1em; }
/*
Closed by DEFAULT here, opened by .is-open - NOT by the [hidden] attribute.
A previous menu used [hidden] and never hid: any class-based display rule
outranks the user-agent [hidden] rule, so the menu won its own race and
stayed on screen. Owning both states in the stylesheet removes the race
rather than adding !important to it.
*/
.nav-group-menu {
display: none;
position: absolute; top: calc(100% + .85rem); left: 50%;
transform: translateX(-50%);
min-width: 15.5rem; padding: .55rem;
background: var(--surface-flat);
border: 1px solid var(--line-strong);
box-shadow: var(--shadow-md), var(--plate-edge);
z-index: 60;
}
.nav-group.is-open .nav-group-menu { display: block; }
.nav-group-heading {
margin: .5rem .75rem .3rem;
font-family: var(--display);
font-size: var(--fs-label);
letter-spacing: .18em; text-transform: uppercase;
color: var(--gold-deep);
}
.nav-group-heading + .realm-link { margin-top: 0; }
.realm-link {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem; padding: .5rem .75rem;
text-decoration: none; color: var(--parchment);
border-left: 2px solid transparent;
}
.realm-link:hover,
.realm-link:focus-visible {
background: rgba(194, 162, 106, .07);
border-left-color: var(--gold);
color: var(--gold-light);
}
.realm-name { font-family: var(--display); letter-spacing: .04em; }
.realm-state {
font-size: var(--fs-xs); color: var(--muted-deep);
letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
}
.realm-state--open { color: var(--aqua); }
/* In the mobile drawer the nav is a vertical stack, so an absolutely
positioned overlay would sit on top of the links beneath it. Inline there. */
@media (max-width: 60rem) {
.nav-group { display: block; width: 100%; }
.nav-group-menu {
position: static; transform: none; min-width: 0;
border: 0; border-left: 1px solid var(--line);
box-shadow: none; background: none;
margin: .3rem 0 .6rem .35rem;
}
}
}
@layer sections {
/* --- opening countdown ------------------------------------------------- */
.realm-card {
max-width: 46rem; margin: 0 auto; padding: clamp(1.6rem, 4vw, 2.8rem);
text-align: center;
background: var(--surface);
border: 1px solid var(--line-strong);
box-shadow: var(--shadow-md), var(--plate-edge);
}
.realm-card-label {
margin: 0 0 .55rem;
font-family: var(--display); font-size: var(--fs-label);
letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep);
}
.realm-opens {
margin: 0 0 1.9rem;
font-family: var(--display);
font-size: clamp(1.25rem, .95rem + 1.1vw, 1.85rem);
color: var(--gold-light);
}
.realm-opens time { border-bottom: 1px solid var(--line-strong); padding-bottom: .18em; }
.countdown {
display: flex; align-items: flex-start; justify-content: center;
gap: clamp(.35rem, 2vw, 1.1rem);
}
.countdown-unit { min-width: 4.2rem; }
.countdown-value {
display: block;
font-family: var(--display);
/* Tabular figures: without them the width of every digit differs, so the
seconds column jitters sideways once per second for as long as the page
is open. */
font-variant-numeric: tabular-nums;
font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem);
line-height: 1; color: var(--parchment);
text-shadow: 0 0 26px rgba(194, 162, 106, .18);
}
.countdown-label {
display: block; margin-top: .5rem;
font-size: var(--fs-label); letter-spacing: .2em;
text-transform: uppercase; color: var(--muted-deep);
}
.countdown-sep {
width: 1px; align-self: stretch; margin-top: .35rem; max-height: 2.6rem;
background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
}
.countdown-local {
margin: 1.7rem 0 0; font-size: var(--fs-sm); color: var(--muted);
}
.countdown-open {
margin: 1.4rem 0 0;
font-family: var(--display); font-size: var(--fs-h3); color: var(--aqua);
}
.realm-notes { max-width: 44rem; margin: clamp(2.6rem, 6vw, 4.4rem) auto 0; }
.realm-notes h2 { font-size: var(--fs-h3); letter-spacing: .04em; }
.realm-notes p { color: var(--parchment-dim); }
.realm-notes-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
@media (max-width: 34rem) {
/* Four units plus separators will not fit; drop the separators and let the
units wrap into two rows rather than shrinking the numerals to unreadable. */
.countdown { flex-wrap: wrap; gap: .9rem 1.6rem; }
.countdown-sep { display: none; }
.countdown-unit { min-width: 5.5rem; }
/* The date wraps to two lines at this width, and an underline drawn on the
inline breaks with it - two stubby rules, one under each line,
each stopping mid-sentence. Underlining a wrapped inline element is
always going to look like that, so drop the rule rather than fight it. */
.realm-opens time { border-bottom: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
.nav-caret { transition: none; }
}
}