/* ========================================================================== HF Golf — App Styles Theming: uses CSS variables. Add data-theme="dark" to to switch. ========================================================================== */ /* ---------- Light mode (default) — tuned for outdoor sunny readability ---------- */ :root, [data-theme="light"] { --hf-green: #09472C; --hf-green-dark: #053620; --hf-green-light: #1a6d45; --hf-gold: #c99a33; --bg: #f6f7f4; --bg-accent: radial-gradient(1200px 400px at 50% -160px, rgba(9,71,44,.06), transparent 60%); --surface: #ffffff; --surface-alt: #fafbf7; --surface-muted: #eef1ea; --ink: #0f172a; --ink-soft: #334155; --muted: #64748b; --muted-strong: #475569; --border: #e7ebe1; --border-strong: #cfd6cb; --border-input: #cfd6cb; --focus-ring: rgba(9,71,44,.25); --focus-soft: rgba(9,71,44,.15); --shadow-sm: 0 1px 2px rgba(15,23,42,.05); --shadow: 0 1px 3px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.05); --shadow-lg: 0 10px 30px rgba(9,71,44,.12), 0 4px 8px rgba(15,23,42,.06); --pill-green-bg: #e8f1ec; --pill-green-fg: #09472C; --pill-gold-bg: #fbf2dd; --pill-gold-fg: #7a5a16; --pill-slate-bg: #eef1ea; --pill-slate-fg: #475569; --pill-red-bg: #fee2e2; --pill-red-fg: #991b1b; --scrollbar: #cfd6cb; --scrollbar-hover: #b7c1b3; --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; } /* ---------- Dark mode — tuned for indoor/evening use ---------- */ [data-theme="dark"] { --hf-green: #1a6d45; /* lifted for contrast on dark bg */ --hf-green-dark: #0a4f31; --hf-green-light: #4da875; --hf-gold: #f0c556; --bg: #000000; --bg-accent: none; --surface: #0a0a0a; --surface-alt: #111111; --surface-muted: #181818; --ink: #ffffff; --ink-soft: #e0e0e0; --muted: #a0a0a0; --muted-strong: #c0c0c0; --border: #222222; --border-strong: #333333; --border-input: #333333; --focus-ring: rgba(77,168,117,.45); --focus-soft: rgba(77,168,117,.3); --shadow-sm: 0 1px 2px rgba(0,0,0,.6); --shadow: 0 1px 3px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.6); --shadow-lg: 0 10px 30px rgba(0,0,0,.8), 0 4px 8px rgba(0,0,0,.6); --pill-green-bg: #0d2618; --pill-green-fg: #6fd9a0; --pill-gold-bg: #2a2008; --pill-gold-fg: #f5d478; --pill-slate-bg: #1a1a1a; --pill-slate-fg: #c8c8c8; --pill-red-bg: #2a0a0a; --pill-red-fg: #ff9090; --scrollbar: #222222; --scrollbar-hover: #444444; } /* ---------- Base ---------- */ * { -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { font-family: 'Raleway', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-feature-settings: "ss01","cv11"; letter-spacing: -0.005em; color: var(--ink); background: var(--bg-accent), var(--bg); -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } h1,h2,h3,h4 { font-family:'Raleway',sans-serif; font-weight:700; letter-spacing:-.015em; color: var(--ink); } h1 { font-weight:800; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Theme-aware text helpers that Tailwind slate classes don't adapt */ .text-soft { color: var(--ink-soft); } .text-muted { color: var(--muted); } .bg-surface { background: var(--surface); } .bg-alt { background: var(--surface-alt); } /* Override a few Tailwind slate classes so existing markup reads correctly in dark mode */ [data-theme="dark"] .text-slate-900 { color: var(--ink) !important; } [data-theme="dark"] .text-slate-700, [data-theme="dark"] .text-slate-600 { color: var(--ink-soft) !important; } [data-theme="dark"] .text-slate-500 { color: var(--muted) !important; } [data-theme="dark"] .text-hf-green { color: #4da875 !important; } [data-theme="dark"] .text-hf-green-dark { color: #3a8f63 !important; } [data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-slate-100 { background: var(--surface-muted) !important; } [data-theme="dark"] .bg-white { background: var(--surface) !important; } [data-theme="dark"] .bg-hf-green-50, [data-theme="dark"] .bg-hf-green-100 { background: #0d2618 !important; } [data-theme="dark"] .border-slate-200, [data-theme="dark"] .border-slate-300 { border-color: var(--border) !important; } [data-theme="dark"] .border-hf-green { border-color: #2d6b4a !important; } [data-theme="dark"] .hover\:bg-slate-50:hover { background: var(--surface-alt) !important; } [data-theme="dark"] .border-t { border-color: var(--border) !important; } [data-theme="dark"] .text-red-500 { color: #ff6b6b !important; } [data-theme="dark"] .bg-amber-100 { background: #2a2008 !important; } [data-theme="dark"] .text-amber-800 { color: #f5d478 !important; } /* HF brand surfaces (unchanged across themes — always green) */ .hf-bg { background: linear-gradient(165deg,#0a4f31 0%,#053620 100%); } .hf-bg-solid { background: #09472C; } .hf-hairline { border:1px solid rgba(255,255,255,.08); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn, .btn-primary, .btn-gold, .btn-ghost, .btn-danger { display:inline-flex !important; align-items:center; justify-content:center; gap:.4rem; padding:.6rem 1.25rem !important; border-radius: 9999px !important; font-family:'Raleway',sans-serif; font-weight:600; font-size:.9rem; line-height:1; letter-spacing:.005em; transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease, border-color .15s ease; cursor:pointer; border:1px solid transparent; white-space:nowrap; user-select:none; text-decoration:none !important; } .btn:focus-visible, .btn-primary:focus-visible, .btn-gold:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible { outline:none; box-shadow: 0 0 0 3px var(--focus-ring); } .btn:active, .btn-primary:active, .btn-gold:active, .btn-ghost:active, .btn-danger:active { transform: translateY(1px) scale(.99); } .btn:disabled, .btn-primary:disabled, .btn-gold:disabled, .btn-ghost:disabled, .btn-danger:disabled { opacity:.5; cursor:not-allowed; } .btn-primary { background: var(--hf-green); color:#fff; box-shadow: 0 1px 2px rgba(9,71,44,.2), inset 0 1px 0 rgba(255,255,255,.06); } .btn-primary:hover:not(:disabled) { background: var(--hf-green-light); box-shadow: 0 2px 6px rgba(9,71,44,.25), inset 0 1px 0 rgba(255,255,255,.08); } .btn-gold { background: var(--hf-gold); color:#fff; box-shadow: 0 1px 2px rgba(201,154,51,.25), inset 0 1px 0 rgba(255,255,255,.1); } .btn-gold:hover:not(:disabled) { background:#dbad43; } [data-theme="dark"] .btn-gold { color: #000; } .btn-ghost { background: var(--surface); color: var(--hf-green); border-color: var(--border-strong); box-shadow: 0 1px 1px rgba(15,23,42,.03); } .btn-ghost:hover:not(:disabled) { background: var(--surface-alt); border-color: var(--border-strong); } [data-theme="dark"] .btn-ghost { color: var(--ink); } [data-theme="dark"] .btn-ghost:hover:not(:disabled) { background: var(--surface-muted); } .btn-danger { background:#b91c1c; color:#fff; box-shadow: 0 1px 2px rgba(185,28,28,.2); } .btn-danger:hover:not(:disabled) { background:#dc2626; } .btn-sm { padding:.4rem .75rem; font-size:.8rem; border-radius:8px; } .btn-lg { padding:.8rem 1.35rem; font-size:1rem; border-radius:12px; } /* Theme toggle button (icon) */ .theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; background: rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.12); cursor:pointer; transition: background .15s ease, transform .08s ease; flex-shrink:0; } .theme-toggle:hover { background: rgba(255,255,255,.15); } .theme-toggle:active { transform: scale(.94); } .theme-toggle svg { width:18px; height:18px; } /* -------------------------------------------------------------------------- Inputs -------------------------------------------------------------------------- */ .input { width:100%; padding:.6rem .8rem; border:1px solid var(--border-input); border-radius: var(--radius); font-family:'Raleway',sans-serif; font-size:.95rem; background: var(--surface); color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .input::placeholder { color: var(--muted); opacity:.7; } .input:hover:not(:focus) { border-color: var(--border-strong); } .input:focus { outline:none; border-color: var(--hf-green); box-shadow: 0 0 0 3px var(--focus-soft); } select.input { appearance:none; -webkit-appearance:none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right .75rem center; padding-right:2rem; } [data-theme="dark"] select.input { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238fa095' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); } label.label { display:block; font-size:.78rem; font-weight:600; color: var(--muted-strong); margin-bottom:.3rem; letter-spacing:.02em; text-transform:uppercase; } /* -------------------------------------------------------------------------- Card -------------------------------------------------------------------------- */ .card { background: var(--surface); border-radius: var(--radius-lg); border:1px solid var(--border); box-shadow: var(--shadow-sm), 0 2px 8px rgba(15,23,42,.03); padding:1.1rem; color: var(--ink); } @media (min-width: 768px) { .card { padding:1.5rem; } } .card-tight { padding:.85rem; } .card-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.9rem; padding-bottom:.85rem; border-bottom:1px solid var(--border); } .card-title { font-size:1.05rem; font-weight:700; letter-spacing:-.01em; } .card-sub { font-size:.82rem; color: var(--muted); font-weight:500; } /* -------------------------------------------------------------------------- Pills -------------------------------------------------------------------------- */ .pill { display:inline-flex; align-items:center; gap:.25rem; padding:3px 9px; border-radius:9999px; font-size:.72rem; font-weight:600; letter-spacing:.02em; } .pill-green { background: var(--pill-green-bg); color: var(--pill-green-fg); } .pill-gold { background: var(--pill-gold-bg); color: var(--pill-gold-fg); } .pill-slate { background: var(--pill-slate-bg); color: var(--pill-slate-fg); } .pill-red { background: var(--pill-red-bg); color: var(--pill-red-fg); } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ .hf-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.9rem; color: var(--ink); } .hf-table th { text-align:left; font-weight:600; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color: var(--muted); padding:.6rem .75rem; border-bottom:1px solid var(--border); background: var(--surface-alt); position:sticky; top:0; } .hf-table td { padding:.7rem .75rem; border-bottom:1px solid var(--border); vertical-align:middle; } .hf-table tr:last-child td { border-bottom:none; } .hf-table tr:hover td { background: var(--surface-alt); } .hf-table .num { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Score cell -------------------------------------------------------------------------- */ .score-cell { width:3.5rem; height:3rem; text-align:center; font-family:'Raleway',sans-serif; font-size:1.1rem; font-weight:600; font-variant-numeric: tabular-nums; border:1px solid var(--border-input); border-radius: var(--radius); background: var(--surface); color: var(--ink); transition: border-color .12s ease, box-shadow .12s ease; } .score-cell:focus { outline:none; border-color: var(--hf-gold); box-shadow: 0 0 0 3px rgba(201,154,51,.22); } @media (max-width: 640px) { .score-cell { width:2.85rem; height:2.75rem; font-size:1rem; } } /* -------------------------------------------------------------------------- Nav — always dark green regardless of theme -------------------------------------------------------------------------- */ .nav-shell { background: linear-gradient(180deg,#09472C 0%,#063a24 100%); box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 4px 12px rgba(9,71,44,.12); } .tab-active { background: rgba(255,255,255,.12); color:#fff; box-shadow: inset 0 -2px 0 var(--hf-gold); } .tab-inactive { color:#c9d8ce; } .tab-inactive:hover { background: rgba(255,255,255,.07); color:#fff; } /* -------------------------------------------------------------------------- Links, loader, misc -------------------------------------------------------------------------- */ a { color: inherit; } a.link { color: var(--hf-green); font-weight:600; text-decoration:none; border-bottom:1px dashed transparent; transition: border-color .15s ease, color .15s ease; } a.link:hover { color: var(--hf-green-light); border-bottom-color: currentColor; } details > summary { list-style:none; cursor:pointer; } details > summary::-webkit-details-marker { display:none; } .loader { border:3px solid var(--border); border-top:3px solid var(--hf-green); border-radius:50%; width:26px; height:26px; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } /* Page headers */ .page-title { font-size:1.45rem; font-weight:800; letter-spacing:-.02em; color: var(--ink); } .page-sub { font-size:.88rem; color: var(--muted); font-weight:500; margin-top:.15rem; } .section-title { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color: var(--muted); margin-bottom:.5rem; } /* Scrollbar */ ::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius:8px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); } ::-webkit-scrollbar-track { background:transparent; } /* Animations */ @keyframes hf-fade-in { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform: none; } } .hf-fade { animation: hf-fade-in .2s ease-out; }