/* * Show Picker Club — design tokens + shared baseline. * Linked by every public HTML page; page-specific styles stay inline. */ :root { /* Surfaces — body is the committed warm taupe; cards inside are near-white */ --body: oklch(0.86 0.025 50); /* warm taupe — the brand's own warmth as the surface */ --surface: oklch(0.985 0.003 50); /* near-white card (landing, modals) */ --surface-2: oklch(0.955 0.014 50); /* subtly recessed panel inside a card */ --border: oklch(0.78 0.020 50); /* visible against both surface and body */ --border-soft: oklch(0.83 0.014 50); /* quiet row separators */ /* Type ramp — verified against --body (taupe) AND --surface (near-white) */ --ink: oklch(0.22 0.025 50); /* ~7:1 on body, ~14:1 on surface */ --ink-muted: oklch(0.40 0.018 50); /* ~4.6:1 on body, ~5.4:1 on surface */ --ink-quiet: oklch(0.48 0.015 50); /* AA-large only, easter eggs / fine print */ --ink-faint: oklch(0.60 0.012 50); /* placeholders, decoration */ /* The one earned accent */ --accent: oklch(0.69 0.15 50); /* same hue as the prior #E67E22 */ --accent-hover: oklch(0.60 0.16 50); --accent-soft: oklch(0.95 0.04 50); /* tinted hover wash, not body */ /* List vocabulary — same chroma family, retuned off Flat UI */ --list-watching: oklch(0.58 0.13 150); /* sage */ --list-waiting: oklch(0.60 0.09 230); /* quiet steel */ --list-recommending: oklch(0.55 0.13 340); /* clay rose */ --list-up-next: var(--accent); /* brand orange */ /* Deeper variants for surfaces where the list color carries white text. The list-* tokens above are tuned for outline pills, hover tints, and decorative accents. These tab-* variants pass AA (≥4.5:1) against white text — used for the active-tab pill in the dark header. */ --tab-watching: oklch(0.42 0.13 150); --tab-waiting: oklch(0.40 0.09 230); --tab-recommending: oklch(0.40 0.13 340); --tab-up-next: oklch(0.45 0.16 50); /* Semantic */ --info: oklch(0.55 0.11 230); --danger: oklch(0.55 0.18 25); --danger-soft: oklch(0.95 0.04 25); --danger-deep: oklch(0.38 0.18 25); --star: oklch(0.83 0.16 90); /* Structural */ --header-bg: oklch(0.22 0.025 50); /* Elevation & focus — extracted from repeated inline use across pages */ --shadow-card: 0 1px 2px oklch(0.18 0.03 50 / 0.06), 0 8px 28px oklch(0.18 0.03 50 / 0.06); --focus-ring: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent); /* Type — system pairing: warm serif for display, system sans for everything else */ --font-display: ui-serif, 'New York', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Type scale — fixed rem, ~1.25 ratio between most steps */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.75rem; /* 28px */ --text-2xl: clamp(2rem, 6.5vw, 2.75rem); /* 32 → 44px */ } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { overflow-x: hidden; } body { font-family: var(--font-sans); background: var(--body); color: var(--ink); min-height: 100vh; -webkit-text-size-adjust: 100%; } /* Shared section heading: serif display face, used on landing + vibe + others */ .section-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.005em; line-height: 1.2; color: var(--ink); margin: 26px 0 10px; text-align: center; text-wrap: balance; } .section-title:first-child { margin-top: 0; } /* Shared admin baseline. The four operator pages (/admin, /members, /url-cleanup, /vibe-admin) opt in by setting and using .admin-nav / .admin-wrap / .admin-title / .admin-sub. Each page can layer its own page-specific styles on top, but the wrapper, title, blurb, nav and surface-card chrome stay consistent. */ body.admin-page { padding: 32px 16px 80px; } .admin-wrap { max-width: 920px; margin: 0 auto; } .admin-nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; font-size: var(--text-sm); } .admin-nav a { color: var(--accent); text-decoration: none; } .admin-nav a:hover { text-decoration: underline; } .admin-nav a.current { color: var(--ink); font-weight: 600; text-decoration: none; cursor: default; } .admin-nav a.back { color: var(--ink-muted); font-size: 18px; line-height: 1; /* Pull flush with the wrap edge so it reads as a back chevron, not a link. */ margin-right: -4px; text-decoration: none; } .admin-nav a.back:hover { color: var(--ink); text-decoration: none; } .admin-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 6px; } .admin-sub { color: var(--ink-muted); font-size: var(--text-sm); margin-bottom: 20px; line-height: 1.5; } .admin-sub a { color: var(--accent); } .admin-card { background: var(--surface); padding: 16px 18px; border-radius: 10px; border: 1px solid var(--border-soft); margin-bottom: 12px; }