/* ══ PalTracker ══════════════════════════════════════════════════════════ Every rule below uses only the semantic tokens declared per theme, so all three themes work from one stylesheet. Set data-theme on . */ :root { /* Geometry. --r/-sm/-lg are the historical names; --r-card/-chip/-pill are what the mockup speaks. They're the same three values either way. */ --r-card: 14px; --r-chip: 9px; --r-pill: 999px; --r-lg: 18px; --r: var(--r-card); --r-sm: var(--r-chip); --pad: 1.15rem; /* Type. No webfont is fetched — the app makes a point of never touching the network — so each stack names the mockup's face first and falls through to what Windows/macOS/Linux already have. See MISMATCHES.md. */ --f-dis: "Space Grotesk", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --f-body: Manrope, "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif; --num: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --dis-w: 700; --dis-ls: -.03em; /* Shell metrics. --label flips the rail between icon+text and icons only. */ --side: 220px; --label: inline; --foot: block; --shell: 1.5rem; --mast-h: 360px; --field-h: 128px; --gmin: 174px; --gap: .65rem; --ad-w: 728px; --ad-h: 90px; /* Element colours are constant across themes — always dark ink on top. */ --el-neutral: #cbd5e1; --el-fire: #ff7a45; --el-water: #4aa8ff; --el-grass: #5ecb64; --el-electric: #f5cf3a; --el-ice: #6fd8ea; --el-ground: #cf9a5c; --el-dark: #a077ee; --el-dragon: #f0714f; --on-el: #1a1206; /* Older rules were written against --text-dim/--text-faint/--shadow; the themes below declare --dim/--faint/--sh. Alias rather than rename 200 call sites. */ --text-dim: var(--dim); --text-faint: var(--faint); --shadow: var(--sh); --page-tint: none; } /* ── Daylight — warm paper, savanna noon (default) ───────────────────── */ [data-theme="daylight"] { --page: #f4f1ea; --surface: #fffdf8; --surface-2: #efeade; --surface-3: #e4ddcd; --line: #ddd5c4; --line-soft: #e9e2d4; --text: #1b1814; --dim: #5c564c; --faint: #8d8676; --accent: #e2620d; --accent-ink: #fffdf8; --accent-2: #1f6f66; --accent-soft: rgba(226,98,13,.12); --good: #2f7d4f; --warn: #a2650a; --bad: #c23a26; --male: #2f5fd4; --female: #c2437f; --art: #efeade; --scrim: rgba(27,24,20,.42); --sh: 0 14px 34px rgba(27,24,20,.14); --shadow-sm: 0 2px 8px rgba(27,24,20,.08); --card-bg: var(--surface); --card-bd: 1px solid var(--line); --card-sh: none; /* masthead scene */ --sky-a: #f6d9a4; --sky-b: #f2efe0; --hill-1: #c9c9a0; --hill-2: #a2a678; --hill-3: #767c52; --orb: #f7bc45; --orb-glow: rgba(247,188,69,.4); --orb-x: 11%; --orb-y: 16%; --stars: 0; --gsh: .3; --band-fg: #241d12; --band-dim: #6f6450; --band-line: rgba(36,29,18,.22); } /* ── Nightfall — moonlit blue hour, pal-orange accents ───────────────── */ [data-theme="nightfall"] { --page: #0e131c; --surface: #151c28; --surface-2: #1b2433; --surface-3: #242f42; --line: #2b3649; --line-soft: #212b3b; --text: #e9eff8; --dim: #9ca9bf; --faint: #6d7a92; --accent: #ff9a3c; --accent-ink: #251404; --accent-2: #56c3d2; --accent-soft: rgba(255,154,60,.14); --good: #58c381; --warn: #e6b34c; --bad: #e87461; --male: #6d95f0; --female: #ef77ab; --art: #1c2534; --scrim: rgba(5,8,14,.74); --sh: 0 14px 34px rgba(0,0,0,.42); --shadow-sm: 0 3px 10px rgba(0,0,0,.3); --card-bg: var(--surface); --card-bd: 1px solid var(--line); --card-sh: none; --sky-a: #20364f; --sky-b: #0a101d; --hill-1: #1b2c44; --hill-2: #12203a; --hill-3: #0a1426; --orb: #e8eef8; --orb-glow: rgba(232,238,248,.28); --orb-x: 13%; --orb-y: 14%; --stars: .9; --gsh: .55; --band-fg: #f0f4fb; --band-dim: #93a1b8; --band-line: rgba(240,244,251,.18); } /* ── Ember — campfire dusk, warm charcoal ────────────────────────────── */ [data-theme="ember"] { --page: #161009; --surface: #1e1610; --surface-2: #261c13; --surface-3: #332617; --line: #3d2e1c; --line-soft: #2e2213; --text: #f6ebd9; --dim: #b5a289; --faint: #82735d; --accent: #ff7d2e; --accent-ink: #250f02; --accent-2: #57b7a4; --accent-soft: rgba(255,125,46,.14); --good: #71bf80; --warn: #e2a94a; --bad: #e0705c; --male: #6f96e0; --female: #e57aa4; --art: #251a10; --scrim: rgba(10,6,3,.74); --sh: 0 14px 34px rgba(0,0,0,.46); --shadow-sm: 0 3px 10px rgba(0,0,0,.34); --card-bg: var(--surface); --card-bd: 1px solid var(--line); --card-sh: none; --sky-a: #59280e; --sky-b: #170d06; --hill-1: #331b0a; --hill-2: #22120a; --hill-3: #140a05; --orb: #ffab5e; --orb-glow: rgba(255,150,66,.4); --orb-x: 20%; --orb-y: 38%; --stars: .35; --gsh: .55; --band-fg: #f8eee0; --band-dim: #b29c80; --band-line: rgba(248,238,224,.18); } * { box-sizing: border-box; } /* Any class that sets `display` outranks the UA rule for [hidden], which silently breaks every hidden-attribute toggle. Settle it once. */ [hidden] { display: none !important; } html, body { margin: 0; min-height: 100%; background: var(--page); background-image: var(--page-tint); background-attachment: fixed; color: var(--text); font: 15px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; } body { padding-bottom: 0; } h1, h2, h3 { margin: 0; font-family: var(--f-dis); font-weight: var(--dis-w); letter-spacing: var(--dis-ls); } .num, .lvl-badge, .iv-row, .statbar .val, .stat b { font-family: var(--num); font-variant-numeric: tabular-nums; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--accent); } /* ══ shell: left rail + masthead column ══════════════════════════════════ */ .shell { display: flex; align-items: stretch; min-height: 100vh; } .col { flex: 1; min-width: 0; } .rail { position: sticky; top: 0; align-self: flex-start; flex: 0 0 var(--side); width: var(--side); height: 100vh; display: flex; flex-direction: column; gap: 2px; padding: .85rem .5rem; border-right: 1px solid var(--line); background: var(--page); z-index: 20; } .rail button[data-tab] { display: flex; align-items: center; gap: .62rem; border: 0; background: none; border-radius: var(--r-chip); padding: .55rem .6rem; color: var(--dim); font-weight: 600; font-size: .93rem; text-align: left; cursor: pointer; transition: background .13s, color .13s; } .rail button[data-tab]:hover { background: var(--surface-2); color: var(--text); } .rail button[data-tab].active { background: var(--accent-soft); color: var(--text); } .rail .glyph { width: 18px; flex-shrink: 0; text-align: center; color: var(--faint); } .rail button[data-tab].active .glyph { color: var(--accent); } .rail .rlabel { display: var(--label); white-space: nowrap; overflow: hidden; } .rail-foot { margin-top: auto; display: var(--foot); } .rail-card { padding: .62rem; border-radius: var(--r-chip); background: var(--surface-2); border: 1px solid var(--line-soft); } .rail-card + .rail-card { margin-top: .5rem; } .rail-title { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); font-weight: 700; } .rail-note, .save-state { font-size: .69rem; color: var(--dim); line-height: 1.5; margin-top: .18rem; } .save-state.ok { color: var(--good); } .save-state.warn { color: var(--warn); } /* Overlapping portraits — the six highest-level pals in the box. */ .lineup { display: flex; align-items: center; padding: .45rem 2px 0; } .lineup .portrait { border: 2px solid var(--surface-2); margin-left: -9px; } .lineup .portrait:first-child { margin-left: 0; } .lineup .more { margin-left: .55rem; font-size: .68rem; color: var(--dim); font-family: var(--num); } /* ══ masthead ════════════════════════════════════════════════════════════ */ .masthead { position: relative; min-height: var(--mast-h); display: flex; flex-direction: column; background: linear-gradient(180deg, var(--sky-b), var(--sky-a)); color: var(--band-fg); overflow: hidden; } .scene { position: absolute; inset: 0; pointer-events: none; } .scene .stars { position: absolute; inset: 0; opacity: var(--stars); background-image: radial-gradient(1.6px 1.6px at 8% 18%, rgba(255,255,255,.95), transparent 55%), radial-gradient(1.2px 1.2px at 17% 42%, rgba(255,255,255,.80), transparent 55%), radial-gradient(1.8px 1.8px at 26% 12%, rgba(255,255,255,.90), transparent 55%), radial-gradient(1.1px 1.1px at 37% 30%, rgba(255,255,255,.70), transparent 55%), radial-gradient(1.5px 1.5px at 47% 8%, rgba(255,255,255,.85), transparent 55%), radial-gradient(1.2px 1.2px at 58% 24%, rgba(255,255,255,.75), transparent 55%), radial-gradient(1.7px 1.7px at 67% 14%, rgba(255,255,255,.90), transparent 55%), radial-gradient(1.1px 1.1px at 76% 34%, rgba(255,255,255,.65), transparent 55%), radial-gradient(1.5px 1.5px at 86% 10%, rgba(255,255,255,.85), transparent 55%), radial-gradient(1.2px 1.2px at 93% 28%, rgba(255,255,255,.70), transparent 55%); } .scene .orb { position: absolute; right: var(--orb-x); top: var(--orb-y); width: 58px; height: 58px; border-radius: 50%; background: var(--orb); box-shadow: 0 0 64px 26px var(--orb-glow); } .scene .hill { position: absolute; border-radius: 50%; } .scene .h1 { left: -45%; bottom: -44%; width: 190%; height: 64%; background: var(--hill-1); } .scene .h2 { left: -25%; bottom: -50%; width: 190%; height: 66%; background: var(--hill-2); } .scene .h3 { left: -60%; bottom: -57%; width: 220%; height: 70%; background: var(--hill-3); } .scene-pals { position: absolute; right: 4%; bottom: 4%; display: flex; align-items: flex-end; gap: 5px; } .scene-pal { position: relative; display: block; aspect-ratio: 1 / 1; } .scene-pal img { position: relative; width: 100%; height: 100%; object-fit: contain; } .scene-pal .gsh { position: absolute; left: 12%; right: 12%; bottom: -3%; height: 9%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,var(--gsh)), transparent 72%); } .util { position: relative; z-index: 3; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .55rem var(--shell); border-bottom: 1px solid var(--band-line); font-size: .8rem; } .util-save { font-family: var(--num); color: var(--band-dim); } .util-link { border: 1px solid var(--band-line); background: transparent; color: var(--band-dim); border-radius: var(--r-pill); padding: .08rem .62rem; font-size: .78rem; cursor: pointer; line-height: 1.4; } .util-link:hover { color: var(--band-fg); border-color: var(--band-fg); } .util-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .util-btn { border: 0; background: transparent; color: var(--band-dim); font-weight: 600; font-size: .8rem; padding: 0; cursor: pointer; } .util-btn:hover { color: var(--band-fg); } .util-sync { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--band-fg); background: var(--band-fg); color: var(--page); border-radius: var(--r-pill); padding: .28rem .95rem; font-weight: 700; font-size: .8rem; white-space: nowrap; cursor: pointer; transition: background .13s, color .13s; } .util-sync:hover { background: transparent; color: var(--band-fg); } .util-sync[disabled] { opacity: .7; cursor: default; } .mast-body { position: relative; z-index: 2; padding: 1.75rem var(--shell) 0; max-width: 620px; } .mast-body h1 { font-size: clamp(42px, 6.4vw, 80px); line-height: .92; letter-spacing: -.045em; } .mast-line { margin: .7rem 0 0; font-size: .97rem; font-weight: 600; } .mast-sub { margin: .22rem 0 0; font-size: .8rem; color: var(--band-dim); } .mast-stats { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.25rem 0 2rem; } .mstat .mnum { display: block; font-family: var(--num); font-size: 1.9rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .mstat .of { font-style: normal; font-size: 1rem; color: var(--band-dim); } .mstat .mcap { display: block; margin-top: .28rem; font-size: .65rem; text-transform: uppercase; letter-spacing: .14em; color: var(--band-dim); font-weight: 700; } .mstat .bar { display: block; height: 3px; margin-top: .35rem; background: var(--band-line); border-radius: 2px; overflow: hidden; } .mstat .bar i { display: block; height: 100%; width: 0; background: var(--band-fg); opacity: .6; transition: width .35s ease; } .drop-zone { position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--page) 82%, transparent); backdrop-filter: blur(4px); display: grid; place-items: center; } .drop-card { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 3rem 4rem; border: 2px dashed var(--accent); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); text-align: center; } .drop-card b { font-size: 1.2rem; } .drop-card span { color: var(--text-dim); font-size: .88rem; } .drop-icon { font-size: 2.2rem; color: var(--accent); line-height: 1; } /* ══ buttons ═════════════════════════════════════════════════════════════ */ .btn { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .4rem .85rem; font-weight: 600; cursor: pointer; transition: background .13s, border-color .13s, transform .08s; } .btn:hover { background: var(--surface-3); border-color: var(--text-faint); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; } .btn.primary:hover { filter: brightness(1.08); background: var(--accent); } .btn.teal { background: var(--accent-2); color: var(--accent-ink); border-color: transparent; font-weight: 700; } .btn.teal:hover { filter: brightness(1.08); background: var(--accent-2); } .btn.danger { background: transparent; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); } .btn.danger:hover { background: color-mix(in srgb, var(--bad) 15%, transparent); border-color: var(--bad); } .btn.sm { padding: .2rem .55rem; font-size: .78rem; } /* ══ tab panels ══════════════════════════════════════════════════════════ */ main { padding: var(--shell); max-width: 1680px; margin: 0 auto; } .tab { display: none; } .tab.active { display: block; animation: fade .2s ease; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } } @keyframes rise { from { opacity: 0; transform: translateY(6px); } } /* ══ controls ════════════════════════════════════════════════════════════ */ .filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.4rem; } /* Two selects that mean one thing (work skill + minimum rank) read better welded together than as two loose dropdowns. */ .ctl-group { display: inline-flex; } .ctl-group > select:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; } .ctl-group > select:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: .5rem; padding-right: .4rem; color: var(--text-dim); background: var(--surface-2); } .ctl-group > select:focus { position: relative; z-index: 1; } input[type=search], input[type=text], input[type=number], select, textarea { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .42rem .7rem; outline: none; font-weight: 500; } input::placeholder { color: var(--text-faint); } input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .filters input[type=search] { min-width: 230px; } .field { display: flex; flex-direction: column; gap: .22rem; font-size: .66rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .field input { min-width: 260px; } .inline-check { display: flex; align-items: center; gap: .42rem; font-size: .85rem; color: var(--text-dim); cursor: pointer; } input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .result-count { margin-left: auto; color: var(--text-faint); font-size: .82rem; } /* ══ custom dropdowns — work skill + target pal ═════════════════════════ Native — used by the filter bars on My Pals and Breed to…, so a boolean filter reads the same everywhere instead of a native tickbox on one screen and a pill on another. The map's version is a