/* Rhode Island Golf Fitness — design tokens * * The palette and typefaces carry over from the current app: the warm charcoal * and the lime are sampled from Dan's printed card, and they are the brand. * What changes here is everything around them — a real spacing scale, softer * borders, more surface levels, and a type ramp with actual hierarchy. * * The old stylesheet reads as cramped for three specific reasons, all fixed * below: spacing was ad-hoc (inline `margin-top:14px` throughout), every group * of anything got a visible bordered card, and the type sizes sat within about * four points of each other. */ :root { --line-soft: #121B16; /* was var(--bg-2); unchanged in value */ /* ---- Palette ------------------------------------------------------- Swappable. Everything below the palette block is shared, so a new scheme is a block of color variables and nothing else. `data-palette` on picks one; the default is the printed card. */ /* Fairway — chosen. Deep green rather than the card's brown, with a brighter lime. Signature is kept below as a palette you can switch to. */ --bg: #0D1410; --mark-hole: #0D1410; --bg-2: #121B16; --surface: #17221B; --surface-2: #1E2C23; --surface-3: #27382C; --text: #EEF4EE; --text-2: #9DAFA2; --text-3: #90A096; /* was #6B7C71, which failed AA on ALL FOUR of this palette's grounds — 4.22 / 3.71 / 3.30 / 2.81 — while carrying every form label, hint, placeholder and meta line in the app. Now 6.81 / 5.98 / 5.32 / 4.53. It sits closer to --text-2 than it did, which costs a little of the three-tier hierarchy; legibility is the floor and hierarchy is the nicety. */ --lime: #B6E356; --lime-bright: #C8ED77; --lime-dim: #75993A; --lime-wash: rgba(182, 227, 86, 0.14); --ink: #0D1410; --line: rgba(255, 255, 255, 0.07); --line-strong: rgba(255, 255, 255, 0.14); --green: #6FD08C; --green-wash: rgba(111, 208, 140, 0.14); --amber: #F0C24B; --amber-wash: rgba(240, 194, 75, 0.14); --red: #F0776A; --red-wash: rgba(240, 119, 106, 0.14); /* ---- Spacing -------------------------------------------------------- One scale, used everywhere. Most of what reads as "cramped" is the gap between --s3 and --s5 being filled in by hand at every call site. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* ---- Radii ---------------------------------------------------------- */ --r-pill: 999px; --r-sm: 10px; --r: 14px; --r-lg: 20px; /* ---- Type ----------------------------------------------------------- A real ramp. Display sizes are for screen titles and numbers; body sits at 15–16 with room to breathe. */ --f-display: 'Bricolage Grotesque', system-ui, sans-serif; --f-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; --t-display: 700 clamp(30px, 4vw, 40px)/1.05 var(--f-display); --t-title: 700 22px/1.2 var(--f-display); --t-heading: 600 17px/1.3 var(--f-body); --t-body: 400 15.5px/1.6 var(--f-body); --t-small: 400 13.5px/1.5 var(--f-body); --t-label: 600 12px/1.2 var(--f-body); /* uppercase, tracked */ /* The public page's ladder: r = 1.2 from 17px, the big steps fluid between 390px and 1440px. The app speaks in it too, so somebody who reads the page and then signs in hears one voice. Body stays 16px here — that is the size at which iOS stops zooming a focused input. */ --fs-0: 12px; --fs-1: 14px; --fs-2: 16px; --fs-3: 20px; --fs-4: clamp(20px, 16.66px + 0.86vw, 29px); --fs-5: clamp(24px, 19.91px + 1.05vw, 35px); --fs-6: clamp(29px, 24.17px + 1.24vw, 42px); --fs-7: clamp(32px, 26px + 1.5vw, 44px); /* One label register. Every small uppercase label — eyebrows, form labels, chips, the tab bar — is this, and nothing else is tracked. */ --track-label: 0.1em; /* ---- Elevation ------------------------------------------------------ */ --shadow: 0 2px 8px rgba(0, 0, 0, 0.28); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.44); /* ---- Motion --------------------------------------------------------- One duration and one curve. Enough for a pill that slides and a sheet that arrives; not enough to be a personality. */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --fast: 140ms; --med: 240ms; /* Layout */ --rail-w: 232px; /* coach navigation on desktop */ --reading: 66ch; /* prose measure */ --phone-max: 560px; /* the client column */ } @media (prefers-reduced-motion: reduce) { :root { --fast: 0ms; --med: 0ms; } } /* =========================== Palettes =========================== Each block redefines only color. Nothing else in the system moves, which is the point — switching schemes is a decision, not a rebuild. */ /* Signature — the printed business card: warm charcoal, wood-brown, lime. The original scheme, kept switchable. */ [data-palette="signature"] { --line-soft: #1D1917; /* was var(--bg-2); unchanged in value */ --bg: #171412; --bg-2: #1D1917; --surface: #232020; --surface-2: #2B2725; --surface-3: #35302D; --text: #F4F2EE; --text-2: #A9A19A; --text-3: #756D67; --lime: #A9CD60; --lime-bright: #BEDD7C; --lime-dim: #6B8A3C; --lime-wash: rgba(169, 205, 96, 0.13); --ink: #14170F; --mark-hole: #171412; --line: rgba(255, 255, 255, 0.07); --line-strong: rgba(255, 255, 255, 0.13); --green: #7FC97F; --green-wash: rgba(127, 201, 127, 0.13); --amber: #E3B341; --amber-wash: rgba(227, 179, 65, 0.13); --red: #E0705C; --red-wash: rgba(224, 112, 92, 0.13); } /* Graphite — cool neutral with a warm brass accent. Reads premium and deliberately unlike a gym app. */ [data-palette="graphite"] { --line-soft: #16181B; /* was var(--bg-2); unchanged in value */ --bg: #111315; --mark-hole: #111315; --bg-2: #16181B; --surface: #1C1F23; --surface-2: #24282D; --surface-3: #2F343A; --text: #F2F4F6; --text-2: #A2A9B2; --text-3: #6E757E; --lime: #E0A93F; /* brass */ --lime-bright: #EFBE5C; --lime-dim: #96702A; --lime-wash: rgba(224, 169, 63, 0.13); --ink: #17140C; --line: rgba(255, 255, 255, 0.07); --line-strong: rgba(255, 255, 255, 0.14); --green: #5FBF8A; --green-wash: rgba(95, 191, 138, 0.14); --amber: #E0A93F; --amber-wash: rgba(224, 169, 63, 0.14); --red: #E2695F; --red-wash: rgba(226, 105, 95, 0.14); } /* Signal — near-black with an electric teal. The sharpest and most technical of the four; least like a golf brand. */ [data-palette="signal"] { --line-soft: #101216; /* was var(--bg-2); unchanged in value */ --bg: #0A0B0D; --mark-hole: #0A0B0D; --bg-2: #101216; --surface: #15181D; --surface-2: #1D2128; --surface-3: #272C35; --text: #F5F7FA; --text-2: #9BA5B4; --text-3: #667082; --lime: #3DDC97; --lime-bright: #5FE8AC; --lime-dim: #218F61; --lime-wash: rgba(61, 220, 151, 0.13); --ink: #04120C; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.15); --green: #3DDC97; --green-wash: rgba(61, 220, 151, 0.14); --amber: #FFC64D; --amber-wash: rgba(255, 198, 77, 0.14); --red: #FF6B6B; --red-wash: rgba(255, 107, 107, 0.14); } /* Daylight — light mode. A genuinely different answer: coaches do desk work in daylight, and "sharp and modern" often means white. */ /* Daylight — the public page's scheme, carried inside. A client who reads rigolffitness.tee-snipe.com and then signs in should not feel they have gone somewhere else, so this is the marketing page's own palette: warm paper, forest ink, one green. Every ratio below is computed, and the six AA failures the previous version of this block shipped are fixed. The worst was --text-3 at 2.95:1 on --surface-3 while carrying every form label, hint, placeholder and meta line in the app; tests/browser/contrast.py never sampled one, so it passed. */ [data-palette="daylight"] { --bg: #F6F3EC; /* the page's --paper */ --mark-hole: #F6F3EC; /* a knockout, so exactly --bg or the ball's dimples stop reading as holes */ --bg-2: #E4E3DC; /* the coach rail. --text-2 on it: 8.86:1 */ --surface: #FFFFFF; /* cards. --text 14.26:1, --text-3 4.66:1 */ --surface-2: #EDEBE4; /* the busiest ground. --text-3 5.02:1 */ --surface-3: #DFE0D8; /* --text-3 4.66:1, the tightest pair here */ --text: #14301F; /* the page's --forest. 14.26:1 on a card */ --text-2: #2B3D32; /* 11.56:1 / 10.43:1 */ --text-3: #58645C; /* 4.66:1 at its worst, against 2.95:1 before */ /* One green, three jobs. --lime carries small text AND button grounds, so it is darker than the page's own --accent-ink: the app composites green text on --lime-wash over --surface-2, which the page never does. */ --lime: #3E641E; /* 6.22:1 as text, 6.89:1 under white */ --lime-bright: #35561A; /* the press state. 8.41:1 under white */ --lime-dim: #57892C; /* the brand value, graphics and large type */ --lime-wash: rgba(68, 109, 34, 0.10); --ink: #FFFFFF; /* text on the accent, never a ground */ /* Three weights, and each one is visible. The old --line was 1.23:1 — a hairline the same value as the ground behind it. */ --line: rgba(20, 48, 31, 0.30); /* cards, chips: decorative */ --line-strong: rgba(20, 48, 31, 0.55); /* 3.48:1 — WCAG 1.4.11 for a control whose border is its only shape */ --line-soft: rgba(20, 48, 31, 0.14); /* the interior hairline */ /* Status, and the hard part of a green-accented palette: a green "done" state can stop reading as a signal. The status green moves to a teal so it separates from the accent by hue as well as value. All three clear AA as text on their own wash, which is where they are hardest. */ --green: #086753; --green-wash: rgba(8, 103, 83, 0.12); /* 4.77:1 */ --amber: #7A5308; --amber-wash: rgba(122, 83, 8, 0.12); /* 4.83:1 */ --red: #A03426; --red-wash: rgba(160, 52, 38, 0.12); /* 4.84:1 */ /* Forest-tinted rather than black, or every card gets a dirty edge. */ --shadow: 0 1px 2px rgba(20, 48, 31, 0.06), 0 8px 20px rgba(20, 48, 31, 0.06); --shadow-lg: 0 1px 2px rgba(20, 48, 31, 0.06), 0 18px 44px rgba(20, 48, 31, 0.10); }