/* ─────────────────────────────────────────────
golf.css — The Boys Golf Dashboard
Generated from Golf Dashboard.html
Usage with Claude Code:
Fonts needed (add to ):
Token quick-reference:
--green-deep / --green-mid / --green-light / --green-pale
--yellow / --yellow-dark / --yellow-pale
--purple / --purple-light / --purple-pale
--cream / --cream-dark
--ink / --ink-mid / --ink-light
--red / --red-pale
Score colors: --birdie-bg / --eagle-bg / --bogey-bg / --double-bg
Key classes:
.site-header — sticky top nav
.btn .btn-primary — purple CTA button
.btn .btn-secondary — yellow button
.leaderboard-card — white card with .leaderboard-row children
.score-chip — to-par chip (.under / .even / .over)
.scorecard-card — full scorecard wrapper
.sc-table — scorecard
.score-cell — individual score box
.score-eagle / .score-birdie / .score-par / .score-bogey / .score-double
.hole-pip — hole progress dot (.done / .current / .upcoming)
───────────────────────────────────────────── */
/* ─── TOKENS ─── */
:root {
--green-deep: #1e5631;
--green-mid: #2e7d46;
--green-light: #4a9e62;
--green-pale: #c8f0d0;
--green-pale2: #8acca4;
--yellow: #f0c820;
--yellow-dark: #c8a200;
--yellow-pale: #fdf3b0;
--purple: #6b3fa0;
--purple-light: #9b6fd0;
--purple-pale: #ede0ff;
--cream: #f7f2e8;
--cream-dark: #ede6d6;
--ink: #1a1a18;
--ink-mid: #444440;
--ink-light: #888880;
--white: #fffef8;
--red: #c03030;
--red-pale: #fde0d8;
--birdie-bg: #d0f0d8;
--eagle-bg: #f0e060;
--bogey-bg: #fde0c8;
--double-bg: #fdc8c0;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-pill: 999px;
--shadow-card: 0 4px 0 rgba(0,0,0,.18);
--shadow-btn: 0 4px 0 rgba(0,0,0,.25);
--font-display: 'Permanent Marker', cursive;
--font-body: 'Nunito', sans-serif;
}
/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
font-family: var(--font-body);
background: var(--green-deep);
color: var(--ink);
min-height: 100vh;
padding: 0 0 48px;
}
/* ─── HEADER ─── */
.site-header {
background: var(--green-deep);
border-bottom: 4px solid var(--yellow);
padding: 14px 24px;
display: flex;
align-items: center;
gap: 14px;
position: sticky;
top: 0;
z-index: 100;
}
.site-logo {
width: 44px; height: 44px;
background: var(--yellow);
border-radius: var(--radius-md);
border: 2.5px solid var(--ink);
display: flex; align-items: center; justify-content: center;
font-size: 24px;
box-shadow: var(--shadow-card);
flex-shrink: 0;
}
.site-title {
font-family: var(--font-display);
font-size: 26px;
color: var(--yellow);
line-height: 1;
}
.site-subtitle {
font-size: 11px;
color: var(--green-light);
margin-top: 2px;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
}
.header-spacer { flex: 1; }
.live-badge {
background: var(--red);
color: var(--white);
font-family: var(--font-display);
font-size: 12px;
padding: 4px 12px;
border-radius: var(--radius-pill);
border: 2px solid var(--ink);
box-shadow: var(--shadow-btn);
display: flex; align-items: center; gap: 5px;
}
.live-dot {
width: 7px; height: 7px;
background: var(--yellow);
border-radius: 50%;
animation: pulse 1.2s infinite;
}
@keyframes pulse {
0%,100% { opacity: 1; }
50% { opacity: .3; }
}
/* ─── LAYOUT ─── */
.page-content {
max-width: 900px;
margin: 0 auto;
padding: 28px 20px 0;
display: flex;
flex-direction: column;
gap: 24px;
}
/* ─── SECTION LABELS ─── */
.section-label {
font-family: var(--font-display);
font-size: 15px;
color: var(--yellow);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
/* ─── HOLE PROGRESS ─── */
.hole-progress-wrap {
background: var(--green-mid);
border: 2.5px solid rgba(255,255,255,.15);
border-radius: var(--radius-lg);
padding: 14px 18px;
}
.hole-track {
display: flex;
gap: 4px;
justify-content: center;
flex-wrap: wrap;
}
.hole-pip {
width: 36px; height: 36px;
border-radius: var(--radius-sm);
border: 2px solid rgba(0,0,0,.35);
display: flex; align-items: center; justify-content: center;
flex-direction: column;
font-weight: 900;
font-size: 11px;
position: relative;
transition: transform .1s;
cursor: default;
}
.hole-pip.done { background: var(--purple); color: var(--white); }
.hole-pip.current { background: var(--yellow); color: var(--ink); box-shadow: 0 0 0 3px var(--white); }
.hole-pip.upcoming { background: rgba(255,255,255,.12); color: rgba(255,255,255,.4); }
.hole-pip-par { font-size: 8px; font-weight: 600; opacity: .7; }
.hole-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.hole-meta-text { font-size: 11px; color: var(--green-pale); font-weight: 600; }
/* ─── LEADERBOARD ─── */
.leaderboard-card {
background: var(--white);
border: 2.5px solid var(--ink);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.leaderboard-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-bottom: 1.5px dashed var(--cream-dark);
transition: background .1s;
}
.leaderboard-row:last-child { border-bottom: none; }
.leaderboard-row.leader { background: var(--yellow-pale); }
.leaderboard-row:hover { background: var(--cream); }
.rank-badge {
width: 30px; height: 30px;
border-radius: var(--radius-sm);
border: 2px solid var(--ink);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 14px;
flex-shrink: 0;
}
.rank-1 { background: var(--yellow); }
.rank-2 { background: #d8d8d8; }
.rank-3 { background: #e8c090; }
.rank-other { background: var(--cream-dark); color: var(--ink-light); }
.player-info { flex: 1; min-width: 0; }
.player-name {
font-weight: 900;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.player-status {
font-size: 10px;
color: var(--ink-light);
font-weight: 600;
margin-top: 1px;
}
.score-trend {
flex: 1;
max-width: 120px;
}
.trend-bar-bg {
height: 5px;
background: var(--cream-dark);
border-radius: var(--radius-pill);
overflow: hidden;
}
.trend-bar-fill {
height: 100%;
border-radius: var(--radius-pill);
background: var(--purple);
}
.score-chip {
width: 52px; height: 38px;
border-radius: var(--radius-md);
border: 2.5px solid var(--ink);
display: flex; align-items: center; justify-content: center;
flex-direction: column;
box-shadow: var(--shadow-card);
flex-shrink: 0;
}
.score-chip.under { background: var(--green-mid); }
.score-chip.even { background: var(--ink-mid); }
.score-chip.over { background: var(--red); }
.score-chip-num {
color: var(--white);
font-weight: 900;
font-size: 17px;
line-height: 1;
}
.score-chip-label {
color: rgba(255,255,255,.6);
font-size: 8px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .3px;
}
/* ─── ACTION BUTTONS ─── */
.actions {
display: flex;
gap: 10px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
font-family: var(--font-display);
font-size: 14px;
padding: 11px 22px;
border-radius: var(--radius-pill);
border: 2.5px solid var(--ink);
cursor: pointer;
text-decoration: none;
box-shadow: var(--shadow-btn);
transition: transform .1s, box-shadow .1s;
white-space: nowrap;
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn-primary { background: var(--purple); color: var(--white); box-shadow: 0 4px 0 #3a1060; }
.btn-primary:active { box-shadow: 0 2px 0 #3a1060; }
.btn-secondary { background: var(--yellow); color: var(--ink); box-shadow: 0 4px 0 var(--yellow-dark); }
.btn-secondary:active { box-shadow: 0 2px 0 var(--yellow-dark); }
.btn-ghost { background: rgba(255,255,255,.12); color: var(--white); border-color: rgba(255,255,255,.3); box-shadow: none; }
/* ─── SCORECARD ─── */
.scorecard-card {
background: var(--white);
border: 2.5px solid var(--ink);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.scorecard-header {
background: var(--green-deep);
padding: 12px 16px;
display: flex;
align-items: center;
gap: 10px;
}
.scorecard-title {
font-family: var(--font-display);
color: var(--yellow);
font-size: 18px;
}
.scorecard-meta { color: var(--green-pale); font-size: 11px; font-weight: 600; }
.tab-row {
display: flex;
background: var(--cream);
border-bottom: 2px solid var(--cream-dark);
}
.tab {
flex: 1;
padding: 9px;
text-align: center;
font-weight: 700;
font-size: 12px;
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
color: var(--ink-light);
transition: color .15s;
letter-spacing: .3px;
text-transform: uppercase;
}
.tab.active {
color: var(--purple);
border-bottom-color: var(--purple);
}
/* TABLE */
.sc-table-wrap { overflow-x: auto; }
.sc-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
min-width: 580px;
}
.sc-table th, .sc-table td {
padding: 0;
text-align: center;
}
.sc-thead th {
background: var(--cream);
padding: 8px 4px 6px;
font-weight: 900;
font-size: 10px;
color: var(--ink-mid);
text-transform: uppercase;
letter-spacing: .4px;
border-bottom: 2px solid var(--cream-dark);
}
.sc-thead th.player-col { text-align: left; padding-left: 16px; min-width: 110px; }
.sc-thead th.total-col { background: var(--purple-pale); color: var(--purple); }
.sc-thead th.net-col { background: var(--yellow-pale); color: var(--yellow-dark); }
.hole-th {
width: 38px;
}
.hole-num {
width: 32px; height: 28px;
border-radius: var(--radius-sm);
background: var(--green-deep);
color: var(--yellow);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 2px;
font-weight: 900;
font-size: 11px;
}
.hole-par-label { font-size: 9px; color: var(--ink-light); }
.sc-par-row td {
padding: 4px 4px 6px;
font-size: 10px;
color: var(--ink-light);
font-weight: 700;
border-bottom: 2px solid var(--cream-dark);
}
.sc-par-row td.player-col { text-align: left; padding-left: 16px; }
.sc-player-row {
border-bottom: 1.5px dashed var(--cream-dark);
}
.sc-player-row:last-child { border-bottom: none; }
.sc-player-row:hover { background: var(--cream); }
.sc-player-row td { padding: 5px 3px; }
.sc-player-row td.player-col {
text-align: left;
padding-left: 16px;
font-weight: 900;
font-size: 13px;
white-space: nowrap;
}
.score-cell {
width: 30px; height: 30px;
border-radius: 5px;
border: 2px solid transparent;
display: flex; align-items: center; justify-content: center;
margin: 0 auto;
font-weight: 900;
font-size: 12px;
cursor: default;
}
.score-eagle { background: var(--eagle-bg); border-radius: 50%; border-color: var(--yellow-dark); }
.score-birdie { background: var(--birdie-bg); border-radius: 50%; border-color: #5a9e6a; }
.score-par { background: transparent; border-color: transparent; color: var(--ink-mid); }
.score-bogey { background: var(--bogey-bg); border-color: #e09060; }
.score-double { background: var(--double-bg); border-color: var(--red); }
.score-empty { color: var(--ink-light); opacity: .4; }
.total-cell {
width: 42px; height: 30px;
border-radius: var(--radius-sm);
background: var(--purple);
color: var(--white);
display: flex; align-items: center; justify-content: center;
margin: 0 auto;
font-weight: 900;
font-size: 14px;
}
.net-cell {
width: 42px; height: 30px;
border-radius: var(--radius-sm);
background: var(--yellow);
color: var(--ink);
display: flex; align-items: center; justify-content: center;
margin: 0 auto;
font-weight: 900;
font-size: 13px;
border: 2px solid var(--yellow-dark);
}
.net-cell.under { background: var(--green-mid); color: #fff; border-color: var(--green-deep); }
.net-cell.over { background: var(--red); color: #fff; border-color: #801010; }
/* Legend */
.sc-legend {
display: flex;
gap: 16px;
flex-wrap: wrap;
padding: 10px 16px 12px;
background: var(--cream);
border-top: 1.5px solid var(--cream-dark);
}
.legend-item {
display: flex; align-items: center; gap: 5px;
font-size: 10px; color: var(--ink-mid); font-weight: 700;
}
.legend-swatch {
width: 14px; height: 14px;
border-radius: 3px;
border: 1.5px solid rgba(0,0,0,.2);
}
/* ─── TWEAKS PANEL ─── */
.tweaks-panel {
position: fixed;
bottom: 24px; right: 24px;
background: var(--white);
border: 2.5px solid var(--ink);
border-radius: var(--radius-lg);
padding: 16px 18px;
width: 220px;
box-shadow: 0 8px 24px rgba(0,0,0,.3);
z-index: 200;
display: none;
flex-direction: column;
gap: 14px;
}
.tweaks-panel.open { display: flex; }
.tweaks-title {
font-family: var(--font-display);
font-size: 15px;
color: var(--purple);
border-bottom: 1.5px dashed var(--cream-dark);
padding-bottom: 8px;
}
.tweak-row { display: flex; flex-direction: column; gap: 4px; }
.tweak-label { font-size: 11px; font-weight: 700; color: var(--ink-mid); }
.tweak-options { display: flex; gap: 6px; flex-wrap: wrap; }
.tweak-chip {
padding: 4px 10px;
border-radius: var(--radius-pill);
border: 2px solid var(--ink);
font-size: 11px; font-weight: 700;
cursor: pointer;
background: var(--cream);
transition: background .1s;
}
.tweak-chip.active { background: var(--purple); color: #fff; border-color: var(--purple); }
.tweak-toggle {
display: flex;
align-items: center;
justify-content: space-between;
}
.toggle-switch {
width: 36px; height: 20px;
background: var(--cream-dark);
border-radius: var(--radius-pill);
border: 2px solid var(--ink);
position: relative;
cursor: pointer;
transition: background .2s;
}
.toggle-switch.on { background: var(--purple); }
.toggle-knob {
width: 14px; height: 14px;
background: #fff;
border-radius: 50%;
position: absolute;
top: 1px; left: 1px;
transition: left .2s;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.toggle-switch.on .toggle-knob { left: 17px; }
/* ─── RESPONSIVE ─── */
@media (max-width: 600px) {
.site-title { font-size: 20px; }
.hole-pip { width: 28px; height: 28px; font-size: 9px; }
.page-content { padding: 16px 12px 0; }
}