/* ============================================================================ * UO Tavern — shared design tokens (single source of truth: DESIGN.md) * ---------------------------------------------------------------------------- * Keep this file BYTE-IDENTICAL across all three sites: * uohub/uo-design.css uowiki/src/styles/uo-design.css uotavern/src/app/uo-design.css * Each stack consumes it differently (see DESIGN.md "Per-stack wiring"), but the * token values and the .uo-globalbar component below must match everywhere. * ==========================================================================*/ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap'); :root { /* ── Color: LIGHT (default) — warm parchment page, dark ink, deep gold ──── */ --uo-bg: #f7f3e7; /* base background (parchment page) */ --uo-bg-elev: #efe8d6; /* elevated background band */ --uo-panel: #fdfbf4; /* card / panel surface (bright) */ --uo-panel-translucent: rgba(253, 251, 244, 0.82); --uo-line: rgba(150, 110, 40, 0.30); /* gold hairline border */ --uo-line-soft: rgba(150, 110, 40, 0.15); --uo-line-strong: rgba(150, 110, 40, 0.55); --uo-gold: #9c7414; /* primary gold (links, accents) — deep for contrast */ --uo-gold-bright: #7c5a0e; /* hover / active gold (deeper) */ --uo-gold-dim: #b8954a; --uo-ink: #2c2618; /* primary text (dark ink) */ --uo-ink-dim: #6b6149; /* muted text */ --uo-parch: #4a3f26; /* strong highlight text */ --uo-white: #1b1608; /* strongest text / headings */ --uo-shadow-color: rgba(60, 45, 15, 0.18); /* ── Type ─────────────────────────────────────────────────────────────── */ --uo-font-display: 'Cinzel', 'EB Garamond', Georgia, 'Times New Roman', serif; --uo-font-body: 'EB Garamond', Georgia, 'Times New Roman', serif; --uo-font-rune: 'Britannian', 'EB Garamond', serif; /* @font-face is per-site */ --uo-font-mono: ui-monospace, 'SF Mono', 'Menlo', monospace; --uo-fs-h1: clamp(2rem, 5vw, 3.4rem); --uo-fs-h2: clamp(1.6rem, 3.6vw, 2.4rem); --uo-fs-h3: 1.3rem; --uo-lh: 1.65; /* ── Geometry ─────────────────────────────────────────────────────────── */ --uo-radius: 12px; --uo-radius-sm: 7px; --uo-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); --uo-maxw: 1140px; --uo-gutter: 24px; --uo-navh: 56px; /* global bar height */ --uo-bp-sm: 640px; /* mobile breakpoint */ } /* ── Color: DARK (opt-in via data-theme="dark") — ink-on-parchment with gold ── */ :root[data-theme='dark'] { --uo-bg: #0b0a12; --uo-bg-elev: #131120; --uo-panel: #16131f; --uo-panel-translucent: rgba(22, 19, 34, 0.72); --uo-line: rgba(217, 179, 92, 0.22); --uo-line-soft: rgba(217, 179, 92, 0.12); --uo-line-strong: rgba(217, 179, 92, 0.40); --uo-gold: #d9b35c; --uo-gold-bright: #f0cd7a; --uo-gold-dim: #c7a46b; --uo-ink: #ece3cf; --uo-ink-dim: #b9ad92; --uo-parch: #efe3c4; --uo-white: #f6efdc; --uo-shadow-color: rgba(0, 0, 0, 0.4); } /* Smooth the flip between themes. */ :root { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } /* ============================================================================ * Shared cross-site navigation bar (.uo-globalbar) * One markup contract on every site so it reads as a single product. Each stack * renders the same structure; this file styles it. See DESIGN.md. * *
*
* * UO Tavern Britannia * * *
*
* ==========================================================================*/ .uo-globalbar { background: var(--uo-bg); border-bottom: 1px solid var(--uo-line); } .uo-globalbar__inner { max-width: var(--uo-maxw); margin: 0 auto; padding: 0 16px; height: var(--uo-navh); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .uo-globalbar__brand { display: inline-flex; align-items: baseline; gap: 10px; color: var(--uo-gold-bright); font-family: var(--uo-font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.03em; text-decoration: none; white-space: nowrap; flex-shrink: 0; } .uo-globalbar__rune { font-family: var(--uo-font-rune); font-size: 1.25rem; color: var(--uo-gold); opacity: 0.8; } .uo-globalbar__nav { display: flex; align-items: center; gap: 4px; min-width: 0; } .uo-globalbar__nav a { padding: 6px 14px; border-radius: var(--uo-radius-sm); font-family: var(--uo-font-body); font-size: 0.95rem; letter-spacing: 0.02em; color: var(--uo-ink-dim); text-decoration: none; white-space: nowrap; transition: color 0.12s, background 0.12s; } .uo-globalbar__nav a:hover { color: var(--uo-gold-bright); background: var(--uo-line-soft); } .uo-globalbar__nav a.is-active { color: var(--uo-bg); /* contrasts against the gold fill in BOTH themes */ font-weight: 600; background: linear-gradient(180deg, var(--uo-gold-bright), var(--uo-gold)); } /* Theme toggle button (sun/moon) — lives at the end of the nav. */ .uo-theme-toggle { margin-inline-start: 6px; width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--uo-line); border-radius: var(--uo-radius-sm); background: transparent; color: var(--uo-gold); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; transition: color 0.12s, background 0.12s, border-color 0.12s; } .uo-theme-toggle:hover { color: var(--uo-gold-bright); background: var(--uo-line-soft); border-color: var(--uo-line-strong); } .uo-theme-toggle__sun { display: none; } .uo-theme-toggle__moon { display: inline; } :root[data-theme='dark'] .uo-theme-toggle__sun { display: inline; } :root[data-theme='dark'] .uo-theme-toggle__moon { display: none; } /* Mobile: drop the decorative rune, tighten everything so the bar never overflows. The nav must stay whole (flex-shrink:0); the brand may shrink/truncate instead. */ @media (max-width: 640px) { .uo-globalbar__rune { display: none; } .uo-globalbar__inner { padding: 0 10px; gap: 6px; } .uo-globalbar__brand { font-size: 0.95rem; letter-spacing: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .uo-globalbar__nav { gap: 2px; flex-shrink: 0; } .uo-globalbar__nav a { padding: 6px 9px; font-size: 0.82rem; letter-spacing: 0; } }