/* ================================================================ KORT OG GODT — Warm Light Theme Shared overrides for all Tailwind-based app pages. Link this AFTER Tailwind CDN in each app. ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&display=swap'); /* Embedded mode: when an app runs inside the landing Frame, hide its standalone back-to-landing chrome. */ html.embedded .app-nav-back, html.embedded .embedded-hide { display: none !important; } :root { --bg: #FAF9F7; --surface: #FFFFFF; --surface2: #F5F3EF; --coral: #EBBF60; --coral-light: #FDF6E3; --coral-mid: #F0D898; --coral-dark: #C9960A; --text: #1C1917; --text-muted: #78716C; --text-faint: #A8A29E; --border: #E8E2DB; --border-strong: #CBC5BC; --red: #E05C5C; --red-light: #FDF0F0; --green: #4CAF7D; --green-light: #EDF7F2; --on-accent: #1C1917; /* text that sits on a coral fill */ --glass: rgba(250, 249, 247, 0.92); --thumb: #FFFFFF; /* range-slider knob */ --shadow: 0 1px 3px rgba(28, 25, 23, 0.06); --shadow-lg: 0 4px 16px rgba(28, 25, 23, 0.08); --shadow-2xl: 0 8px 32px rgba(28, 25, 23, 0.10); --focus-ring: 0 0 0 3px rgba(235, 191, 96, 0.12); } /* ── Dark appearance ─────────────────────────────────────────────── The `trailhead` palette — the landing page's forest world, brought indoors. Driven by , set by lib/prefs.js from the user's saved preference. This is the site-wide light/dark axis; it is NOT the Map App widget's `theme:` (a per-app visual identity, applied as inline custom properties, which deliberately wins over these tokens — see CONTEXT.md). */ :root[data-appearance="dark"] { color-scheme: dark; --bg: #18220F; --surface: #243218; --surface2: #121A0A; --coral: #F0D898; --coral-light: rgba(240, 216, 152, 0.12); --coral-mid: #EBBF60; --coral-dark: #F4E4B4; --text: #F1EDE3; --text-muted: #A8B69F; --text-faint: #76876C; --border: rgba(241, 237, 227, 0.13); --border-strong: rgba(241, 237, 227, 0.26); --red: #E8836F; --red-light: rgba(232, 131, 111, 0.16); --green: #6FCB9F; --green-light: rgba(111, 203, 159, 0.14); --on-accent: #1B2616; --glass: rgba(20, 28, 13, 0.86); --thumb: #243218; --shadow: 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.36); --shadow-2xl: 0 12px 40px rgba(0, 0, 0, 0.44); --focus-ring: 0 0 0 3px rgba(240, 216, 152, 0.24); } /* ── Base ──────────────────────────────────────────────────────── */ html, body { background-color: var(--bg) !important; color: var(--text) !important; font-family: 'DM Sans', sans-serif !important; font-weight: 400 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .font-sans { font-family: 'DM Sans', sans-serif !important; } .font-serif { font-family: 'Instrument Serif', serif !important; } h1, h2, h3, h4, h5, h6 { font-family: 'Instrument Serif', serif !important; font-weight: 400 !important; letter-spacing: -0.01em !important; color: var(--text) !important; } /* ── App nav shell (sticky, blurred) ───────────────────────────── */ .app-nav { display: flex; justify-content: space-between; align-items: center; padding: 0 24px; height: 56px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1000; } .app-nav-back { display: flex; align-items: center; gap: 6px; font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-muted); text-decoration: none; border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px; transition: color 0.15s, background 0.15s, border-color 0.15s; } .app-nav-back:hover { color: var(--text); background: var(--surface2); border-color: var(--border-strong); } .app-nav-logo { font-family: 'Instrument Serif', serif; font-size: 18px; color: var(--text); letter-spacing: -0.01em; } .app-nav-logo span { color: var(--coral); font-style: italic; } .app-nav-title { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-muted); text-align: right; min-width: 80px; } @media (max-width: 640px) { .app-nav { padding: 0 16px; } .app-nav-logo { display: none; } } /* ── Backgrounds ───────────────────────────────────────────────── */ .bg-white { background-color: var(--surface) !important; } .bg-slate-50 { background-color: var(--surface2) !important; } .bg-slate-100 { background-color: var(--bg) !important; } /* ── Text ──────────────────────────────────────────────────────── */ .text-slate-900, .text-slate-800, .text-slate-700 { color: var(--text) !important; } .text-slate-600, .text-slate-500 { color: var(--text-muted) !important; } .text-slate-400 { color: var(--text-faint) !important; } /* ── Borders ───────────────────────────────────────────────────── */ .border-slate-200, .border-slate-100, .border-slate-300 { border-color: var(--border) !important; } hr { border-color: var(--border) !important; } /* ── Shadows (subtle on light, deeper on dark) ─────────────────── */ .shadow { box-shadow: var(--shadow) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; } .shadow-2xl { box-shadow: var(--shadow-2xl) !important; } /* ── Border radius (rounded per design) ────────────────────────── */ .rounded-lg { border-radius: 9px !important; } .rounded-xl { border-radius: 12px !important; } .rounded-2xl { border-radius: 16px !important; } .rounded-full { border-radius: 100px !important; } /* ── Inputs ────────────────────────────────────────────────────── */ input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea { background-color: var(--surface2) !important; border-color: var(--border) !important; color: var(--text) !important; font-family: 'DM Sans', sans-serif !important; font-weight: 400 !important; border-radius: 9px !important; } input::placeholder, textarea::placeholder { color: var(--text-faint) !important; } input:focus, select:focus, textarea:focus { border-color: var(--coral) !important; box-shadow: var(--focus-ring) !important; outline: none !important; } input[type="range"] { background: var(--border) !important; border-radius: 3px !important; } input[type="range"]::-webkit-slider-thumb { background: var(--thumb) !important; border: 2px solid var(--coral) !important; box-shadow: var(--shadow) !important; } input[type="range"]::-moz-range-thumb { background: var(--thumb) !important; border: 2px solid var(--coral) !important; box-shadow: var(--shadow) !important; } input[type="radio"], input[type="checkbox"] { accent-color: var(--coral) !important; } /* ── Hover overrides ───────────────────────────────────────────── */ .hover\:bg-slate-50:hover { background-color: var(--surface2) !important; } .hover\:bg-slate-100:hover { background-color: var(--surface2) !important; } /* ── Section labels ────────────────────────────────────────────── */ .uppercase.tracking-wide { color: var(--text-faint) !important; letter-spacing: 0.08em !important; font-weight: 600 !important; } /* ── App-specific palette: whist (also used by 500) ────────────── */ /* Tailwind's whist-brown / whist-green / whist-dark / whist-cream are remapped to the warm light palette via app-level config. We re-assert the dark text colour on coral CTAs here so that .text-white on top of the coral background still reads. */ /* The cream is a page-level surface, not an accent fill, so it follows the appearance. */ .bg-whist-cream { background-color: var(--bg) !important; } .bg-whist-brown, .bg-whist-green, .bg-whist-dark { color: var(--on-accent) !important; } .bg-whist-brown.text-white, .bg-whist-green.text-white, .bg-whist-dark.text-white { color: var(--on-accent) !important; } .text-whist-brown { color: var(--coral-dark) !important; } /* ── Tab navigation ────────────────────────────────────────────── */ .dashboard-tab { background-color: transparent !important; color: var(--text-muted) !important; font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; border-radius: 8px !important; } .dashboard-tab.bg-whist-brown { background-color: var(--coral) !important; color: var(--on-accent) !important; } .dashboard-tab:hover:not(.bg-whist-brown) { background-color: var(--surface2) !important; color: var(--text) !important; } /* ── Toggle buttons (level, trump, vip, special) ───────────────── */ .level-btn, .trump-btn, .vip-btn, .special-btn { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text-muted) !important; font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; border-radius: 9px !important; transition: all 0.15s ease; } .level-btn:hover, .trump-btn:hover, .vip-btn:hover, .special-btn:hover { border-color: var(--border-strong) !important; color: var(--text) !important; background: var(--surface2) !important; } .level-btn.ring-2, .trump-btn.ring-2, .vip-btn.ring-2, .special-btn.ring-2 { background-color: var(--coral) !important; border-color: var(--coral) !important; color: var(--on-accent) !important; box-shadow: 0 0 0 3px rgba(235,191,96,0.18) !important; outline: none !important; } /* ── Player chips (500) ────────────────────────────────────────── */ .player-chip { background-color: var(--surface) !important; border-color: var(--border) !important; color: var(--text-muted) !important; border-radius: 9px !important; font-family: 'DM Sans', sans-serif !important; } .player-chip.selected { background-color: var(--coral) !important; border-color: var(--coral) !important; color: var(--on-accent) !important; } /* ── Danger / "End game" ───────────────────────────────────────── */ .border-red-300 { border-color: #F5C0C0 !important; } .text-red-600 { color: var(--red) !important; } .hover\:bg-red-50:hover { background-color: var(--red-light) !important; } /* ── Special-bid (amber/purple) buttons stay close to Tailwind defaults — they already work nicely on a light surface, just tighten the radius and family. ────────────────────────────── */ .special-btn[data-special="sol"], .special-btn[data-special="ren-sol"], .special-btn[data-special="bordlaegger"], .special-btn[data-special="super-bordlaegger"] { border-color: var(--coral-mid) !important; color: var(--coral-dark) !important; } .special-btn[data-special="sol"]:hover, .special-btn[data-special="ren-sol"]:hover, .special-btn[data-special="bordlaegger"]:hover, .special-btn[data-special="super-bordlaegger"]:hover { background-color: var(--coral-light) !important; } /* ── Points preview panel ──────────────────────────────────────── */ #points-preview { background-color: var(--surface2) !important; border: 1px solid var(--border); border-radius: 9px !important; }