/* Relic Rush — legal pages. Self-contained: these pages must render without the game bundle, so the theme tokens from src/styles/theme.css are repeated here. */ @font-face { font-family: 'Cinzel'; font-weight: 600; font-display: swap; src: url('/assets/fonts/cinzel-600.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-600.woff2') format('woff2'); } :root { --gold: #E8B23A; --cyan: #2ED9E6; --cosmic: #0E1A3A; --violet-deep: #3A1A66; --stone: #8A8F94; --text: #E6ECF7; --muted: #B7C3DA; --display: 'Cinzel', Georgia, 'Times New Roman', serif; --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } * { box-sizing: border-box; } html { background: #06091A; } body { margin: 0; min-height: 100vh; color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.65; /* Transparent: an opaque body background paints ABOVE the z-index:-1 ::before below, and hid the plate. carries the navy floor. */ background: transparent; -webkit-font-smoothing: antialiased; } /* The menu's art plate, fixed behind the document and anchored RIGHT, so the planet and the wizards sit clear of the copy. The COPY lives on the plate's own black left region (see .lg-wrap, which is left-aligned for exactly that reason) — the veil below is therefore only strong enough to guarantee contrast where the text is, and fades away to nothing on the right so the artwork is actually visible rather than greyed out. A fixed pseudo-element rather than `background-attachment: fixed`, which iOS ignores. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 7, 18, 0.88) 0%, rgba(4, 7, 18, 0.82) 42%, rgba(4, 7, 18, 0.45) 68%, rgba(4, 7, 18, 0.12) 100%), url('/assets/menu/main-bg-1.jpg') right center / cover no-repeat; background-color: #06091A; } /* LEFT-ALIGNED, like the menu column — not centred in the viewport. The reading measure is unchanged (the column is still ~780px); it is the column's position that moves, so the eye returns to the same left edge as every other screen. */ .lg-wrap { max-width: 780px; margin: 0; padding: 24px 20px 64px clamp(24px, 5vw, 72px); } /* Past the point where the column plus its gutter stops filling the window there is nothing to gain from hugging the edge, so keep the gutter proportional rather than letting the text drift back toward the middle. */ @media (min-width: 1600px) { .lg-wrap { padding-left: clamp(48px, 6vw, 120px); } } .lg-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 8px 0 20px; margin-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.12); } .lg-brand img { height: 44px; width: auto; display: block; filter: drop-shadow(0 0 12px rgba(46,217,230,0.35)); } .lg-nav { display: flex; gap: 6px; flex-wrap: wrap; } .lg-nav a { color: var(--muted); text-decoration: none; font-size: 14px; padding: 6px 10px; border-radius: 6px; border: 1px solid transparent; } .lg-nav a:hover { color: #fff; border-color: rgba(255,255,255,0.18); } .lg-nav a[aria-current="page"] { color: var(--gold); border-color: rgba(232,178,58,0.45); background: rgba(232,178,58,0.08); } h1 { font-family: var(--display); color: var(--gold); font-size: 2rem; line-height: 1.2; letter-spacing: 0.02em; margin: 0 0 6px; text-shadow: 0 2px 6px rgba(0,0,0,0.5); } .lg-updated { color: var(--stone); font-size: 14px; margin: 0 0 24px; } h2 { font-family: var(--display); color: var(--cyan); font-size: 1.2rem; letter-spacing: 0.02em; margin: 36px 0 10px; } h3 { font-size: 1rem; color: #fff; margin: 20px 0 6px; } p { margin: 0 0 14px; } ul, ol { margin: 0 0 14px; padding-left: 22px; } li { margin-bottom: 6px; } a { color: var(--cyan); overflow-wrap: anywhere; } a:hover { color: #fff; } strong { color: #fff; font-weight: 600; } code { font-family: Consolas, Monaco, monospace; font-size: 0.9em; background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 4px; } .lg-summary { background: rgba(14,26,58,0.7); border: 1px solid rgba(46,217,230,0.35); border-radius: 12px; padding: 18px 20px; margin: 0 0 24px; } .lg-summary h2 { margin-top: 0; font-size: 1.05rem; } .lg-summary ul { margin-bottom: 0; } .lg-table-scroll { overflow-x: auto; margin: 0 0 18px; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.12); vertical-align: top; } th { color: var(--gold); font-weight: 600; white-space: nowrap; } blockquote { margin: 0 0 14px; padding: 10px 16px; border-left: 3px solid var(--gold); background: rgba(232,178,58,0.06); border-radius: 0 8px 8px 0; } blockquote p { margin: 0; } .lg-footer { margin-top: 48px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.12); color: var(--stone); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .lg-footer nav a { color: var(--muted); text-decoration: none; margin-right: 12px; } .lg-footer nav a:hover { color: #fff; } @media (max-width: 600px) { .lg-wrap { padding: 16px 16px 48px; } h1 { font-size: 1.6rem; } }