/* Design tokens and element defaults. Dark by default - this is a tool used at night, next to a game client. Light theme is opt-in via [data-theme="light"] on . */ :root { /* Surfaces, darkest to lightest */ --bg: #0f1115; --surface: #161920; --surface-2: #1d212b; --surface-3: #262b38; --border: #2c313d; --border-strong: #3a4152; /* Text */ --text: #e6e9ef; --text-dim: #9aa3b2; --text-faint:#6b7482; /* Brand / accents */ --accent: #5b8def; --accent-hover: #7aa3f5; --accent-dim: #2a3f6b; /* Status */ --ok: #3fb950; --warn: #d29922; --danger: #f05e5e; --info: #58a6ff; /* Role categories - used for slot chips and role pills */ --role-tank: #d98b4a; --role-healer: #4ec98b; --role-dps: #e05c6e; --role-support: #9b7ce0; --role-utility: #7a8494; /* Spacing scale */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --radius: 6px; --radius-lg: 10px; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "Cascadia Code", "JetBrains Mono", Consolas, monospace; --shadow: 0 4px 16px rgba(0, 0, 0, 0.35); --header-h: 52px; } :root[data-theme="light"] { --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f0f2f5; --surface-3: #e4e7ec; --border: #d8dce3; --border-strong: #b9c0cc; --text: #1a1d23; --text-dim: #5a6472; --text-faint:#8b95a3; --accent-dim:#cddcfb; --shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; } /* Guild watermark. A pseudo-element rather than a background on : it can then be pinned to the viewport, kept behind every layer, and made non-interactive, so it never intercepts a click on the officer screens. `mix-blend-mode: screen` is what makes it work at all. The art is a white snake on a near-black field, so plain opacity does two wrong things at once: the black rectangle sits *darker* than the page and shows its edges, while the snake stays invisible until the opacity is high enough to wash out the text. Screen maps black to "no change" - the rectangle disappears entirely - and lifts only the light pixels, so opacity now controls exactly one thing: how present the snake is. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("/img/TC.png"); background-repeat: no-repeat; background-position: center center; /* cover, not a fixed width: a sized box leaves the art floating in the middle of the page with its edges showing. The source is roughly 3:1 and viewports are nearer 16:9, so cover scales to the height and crops the sides - which keeps the head centred, where it belongs. */ background-size: cover; mix-blend-mode: screen; opacity: 0.40; } /* Light theme has no dark field for screen to work against - it would blow out to white - so multiply, and lighter still, since dark-on-light reads much more strongly than the reverse. */ :root[data-theme="light"] body::before { mix-blend-mode: multiply; opacity: 0.07; } /* The login card is small and centred, with nothing else competing, so the mark carries the page rather than hiding under it. */ body.branded::before { opacity: 0.85; } :root[data-theme="light"] body.branded::before { opacity: 0.14; } /* The card sits directly over the snake's head, so give it a backdrop of its own - without this the heading fights the artwork behind it. */ body.branded .card { background: rgba(22, 25, 32, 0.82); backdrop-filter: blur(3px); border-color: var(--border-strong); box-shadow: var(--shadow); } h1, h2, h3, h4 { margin: 0 0 var(--s3); font-weight: 600; line-height: 1.25; } h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15px; } p { margin: 0 0 var(--s3); } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } code, pre, .mono { font-family: var(--mono); font-size: 12.5px; } /* Focus: always visible. Officers drive these screens from the keyboard. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } ::selection { background: var(--accent-dim); } /* Scrollbars that do not fight the dark theme */ * { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid var(--bg); } *::-webkit-scrollbar-track { background: transparent; } /* Utilities */ .hidden { display: none !important; } .dim { color: var(--text-dim); } .faint { color: var(--text-faint); } .small { font-size: 12.5px; } .right { text-align: right; } .center { text-align: center; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stack { display: flex; flex-direction: column; gap: var(--s3); } .row { display: flex; align-items: center; gap: var(--s2); } .row-wrap { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } .spacer { flex: 1; } .mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; } /* Screen-reader-only, for icon-only controls */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }