/* ============================================================================= Yards Golf Book — base.css (v2 / Pebble Beach + Collins + Fraunces) Site-wide design tokens, typography, header, footer. Strategy: keep old token names (--green-deep, --bg, etc.) so any page or JS that already reads them continues to work — but point them at new values. Pages can keep their inline :root blocks; this stylesheet, linked LAST in , wins via source order and re-skins everything. Re-skinned 2026-05-18. v1 backed up at backups/base.v1_20260518T010000Z.css. ============================================================================= */ /* ── Font import ─────────────────────────────────────────────────────────── */ /* Fraunces (display, italic), Space Grotesk (body), DM Mono (technical). Critical pages also for this URL so the fetch is parallel with the HTML parse. See index.html head. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;0,800;1,400;1,600&family=Space+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap'); /* ── Metric-matched fallbacks to eliminate font-swap CLS ────────────────── Synthetic Georgia (display) and Helvetica (body) tuned with size-adjust + ascent/descent overrides so they occupy the same vertical space as Fraunces and Space Grotesk respectively. First paint uses the fallback; when the real fonts arrive the swap is invisible because the metrics already match. Generated from https://screenspan.net/fallback. */ @font-face { font-family: 'Fraunces fallback'; src: local('Georgia'), local('Times New Roman'); size-adjust: 106%; ascent-override: 92%; descent-override: 25%; line-gap-override: 0%; } @font-face { font-family: 'Space Grotesk fallback'; src: local('Helvetica Neue'), local('Helvetica'), local('Arial'); size-adjust: 101%; ascent-override: 96%; descent-override: 26%; line-gap-override: 0%; } /* ── Components (hex blobs, marquee, collins-hero, etc.) ───────────────── */ @import url('/css/components.css'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ── Pebble Beach palette ─────────────────────────────────────────────── */ --bg: #ecebe3; /* driftwood — primary background */ --bg-warm: #f5f3eb; /* sand — secondary background */ --cream: #f5f3eb; /* sand alias */ --white: #ffffff; --ink: #1c2530; /* slate — primary text */ --ink-mid: rgba(28, 37, 48, 0.7); /* --ink-muted darkened from 0.5 → 0.65 for WCAG AA 4.5:1 on body copy (audit pri #3). Used on ~300 small-text surfaces (meta dates, labels, footer links, captions). Verified contrast on the three backgrounds: driftwood 4.74:1, cream 4.89:1, white 4.88:1. */ --ink-muted: rgba(28, 37, 48, 0.65); --ink-dim: rgba(28, 37, 48, 0.3); /* Brand greens collapse to "kelp". Old token names preserved for JS. */ --green-deep: #2c5046; /* kelp — primary brand */ --green-mid: #234038; /* kelp darker (hover) */ --green-accent: #e8965f; /* Pacific sun — now the accent (was green) */ --green-pale: #f5f3eb; /* sand (fallback for old --green-pale fills) */ /* Accent / punch */ --punch: #e8965f; /* Pacific sun — orange */ --punch-mid: #d97f47; /* darker Pacific sun (hover) */ --gold: #e8965f; /* old --gold collapses to Pacific sun */ /* Rules / dividers */ --rule: rgba(28, 37, 48, 0.1); --rule-mid: rgba(28, 37, 48, 0.18); /* Functional */ --red: #c84e4e; /* error / destructive */ --error: #c84e4e; /* Layout */ --header-h: 52px; --tab-h: 44px; /* Typography */ --display-font: 'Fraunces', 'Fraunces fallback', Georgia, serif; --body-font: 'Space Grotesk', 'Space Grotesk fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono-font: 'DM Mono', 'SF Mono', Menlo, monospace; } html { scroll-behavior: smooth; } body { background: var(--bg); font-family: var(--body-font); font-weight: 400; color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Typography defaults ──────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--display-font); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.05; } h1 { font-size: clamp(36px, 5vw, 64px); margin-bottom: 24px; } h2 { font-size: clamp(28px, 3.5vw, 44px); margin: 32px 0 12px; } h3 { font-size: clamp(20px, 2vw, 28px); margin: 24px 0 8px; } h4 { font-size: 18px; margin: 16px 0 4px; } /* Italic-display alternate (use class="display-italic" for hero phrases) */ .display-italic, em.display, h1 em, h2 em, h3 em { font-family: var(--display-font); font-style: italic; font-weight: 400; } p, li { font-size: 16px; line-height: 1.55; margin-bottom: 12px; color: var(--ink-mid); } ul, ol { padding-left: 20px; margin-bottom: 16px; } a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--punch); } strong, b { font-weight: 600; color: var(--ink); } /* Mono helper */ .mono { font-family: var(--mono-font); letter-spacing: 0; } /* ── Buttons (.btn family) ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; font-family: var(--body-font); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; border-radius: 999px; cursor: pointer; border: 1.5px solid transparent; transition: background .15s, border-color .15s, color .15s, transform .1s; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--ink); color: var(--cream); } .btn-primary:hover { background: var(--green-deep); color: var(--cream); } .btn-punch { background: var(--punch); color: var(--cream); } .btn-punch:hover { background: var(--punch-mid); color: var(--cream); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--cream); } .btn-pill { /* compact, navlike */ padding: 8px 16px; font-size: 13px; } /* ── Form fields ──────────────────────────────────────────────────────────── */ input, select, textarea { font-family: var(--body-font); font-size: 15px; color: var(--ink); background: var(--white); border: 1.5px solid var(--rule-mid); border-radius: 10px; padding: 12px 14px; outline: none; transition: border-color .15s; } input:focus, select:focus, textarea:focus { border-color: var(--green-deep); } input::placeholder, textarea::placeholder { color: var(--ink-dim); } label { font-family: var(--mono-font); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); } /* ── SVG click-target utilities (audit #19 Phase E.3) ────────────────────── For SVG elements that need to receive pointer events (which are off by default for non-fill SVG geometry). Replaces inline setAttribute('style', 'cursor:X;pointer-events:all') — that path is subject to CSP `style-src-attr`, so the class form is the CSP-clean way. */ .svg-click-crosshair { cursor: crosshair; pointer-events: all; } .svg-click-pointer { cursor: pointer; pointer-events: all; } /* Hex background SVG positioning (CSP Phase E.3: replaces svg.style.cssText in js/hex-bg.js). */ #hex-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; overflow: hidden; } /* Homepage hex-grid SVG (CSP Phase E.3: replaces svg.style.cssText in js/pages/index.js). Height is set per-instance via JS DOM API for dynamic pageH sizing. */ .hex-grid-svg { width: 100%; display: block; } /* ── Strokes-gained color (audit #19 Phase E.2) ────────────────────────── Positive SG renders green-accent, negative renders red. Used wherever per-shot or per-round SG is displayed. Replaces inline style="color:${sg >= 0 ? 'var(--green-accent)' : '#cc3333'}". */ .sg-pos { color: var(--green-accent); } .sg-neg { color: #cc3333; } /* Large SG figure (my-shots tee summary); static size on top of sg-pos/neg. */ .sg-tee-figure { font-size: 36px; font-weight: 600; } /* ── Tee color palette (audit #19 Phase E.2) ────────────────────────────── The 14-entry tee palette + 'default' fallback as CSS classes, so swatches render via class names instead of inline style="background:${hex}". Apply in combination with sizing classes like .tee-swatch or .tee-swatch-lg. Source of truth for hex values: teeColor() in js/course-state.js — keep in sync. */ .tee-color-black { background: #1a1a1a; } .tee-color-blue { background: #2255aa; } .tee-color-white { background: #eeeeee; } .tee-color-gold { background: #c8a828; } .tee-color-red { background: #cc2222; } .tee-color-green { background: #2a8a3a; } .tee-color-silver { background: #aaaaaa; } .tee-color-purple { background: #7744aa; } .tee-color-orange { background: #d47a1a; } .tee-color-yellow { background: #ccb820; } .tee-color-bronze { background: #8a6832; } .tee-color-copper { background: #a86830; } .tee-color-maroon { background: #6a2233; } .tee-color-teal { background: #2a8a7a; } .tee-color-default { background: #666666; } /* ── Keyboard focus rings (audit #20) ────────────────────────────────────── `:focus-visible` fires only for keyboard navigation, so mouse users see no change. Orange outline is high-contrast on both the cream and ink backgrounds used across the site. */ :focus-visible { outline: 2px solid var(--punch); outline-offset: 2px; border-radius: 4px; } a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--punch); outline-offset: 3px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--punch); outline-offset: 2px; } /* ── Sticky header (#header used by most app pages) ───────────────────────── */ #header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: rgba(236, 235, 227, 0.92); /* driftwood, translucent */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; z-index: 100; } .header-brand { font-family: var(--display-font); font-style: italic; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; } .header-right { display: flex; gap: 20px; align-items: center; } .header-right a { font-family: var(--body-font); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-mid); text-decoration: none; text-transform: none; } .header-right a:hover { color: var(--ink); } /* ── Content article layout (privacy/terms/etc.) ──────────────────────────── */ .content { max-width: 720px; margin: 0 auto; padding: calc(var(--header-h) + 64px) 24px 80px; } .content h1 { font-family: var(--display-font); font-style: italic; font-weight: 400; font-size: clamp(48px, 6vw, 88px); letter-spacing: -0.02em; line-height: 1; } .content h2 { font-family: var(--display-font); font-weight: 600; font-size: 24px; margin: 40px 0 12px; } /* ── Footer ───────────────────────────────────────────────────────────────── */ .site-footer { background: var(--ink); color: var(--cream); padding: 56px 24px 32px; text-align: center; } .site-footer .footer-brand { font-family: var(--display-font); font-style: italic; font-weight: 800; font-size: 32px; letter-spacing: -0.02em; color: var(--cream); margin-bottom: 16px; } .footer-links { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; } .footer-links a { font-family: var(--body-font); font-size: 13px; font-weight: 500; letter-spacing: 0; color: rgba(245, 243, 235, 0.7); text-decoration: none; text-transform: none; transition: color 0.2s; } .footer-links a:hover { color: var(--punch); } .footer-copy, .footer-attr { font-family: var(--mono-font); font-size: 11px; color: rgba(245, 243, 235, 0.5); margin-bottom: 6px; } .footer-attr a { color: rgba(245, 243, 235, 0.5); text-decoration: none; } .footer-attr a:hover { text-decoration: underline; color: var(--cream); } .footer-email a { font-family: var(--mono-font); font-size: 11px; color: var(--punch); text-decoration: none; } .footer-email a:hover { text-decoration: underline; } /* Footer social-link hover (Bluesky/Twitter/Instagram). Was inline JS `onmouseover="this.style.color='#0085ff'"` — moved here so we can drop 'unsafe-inline' from script-src-attr. */ .footer-social a { color: var(--ink-muted); text-decoration: none; font-family: var(--mono-font); font-size: 11px; transition: color .2s; } .footer-social a:hover { color: #0085ff; } /* Share buttons (course.html share panel). Replaces a stack of inline onmouseover/onmouseout handlers that swapped background+color+border. */ .share-btn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--rule-mid); border-radius: 6px; background: var(--white); color: var(--ink); cursor: pointer; font-family: var(--body-font); font-size: 11px; transition: all .15s; } .share-btn--twitter:hover { background: #1da1f2; color: #fff; border-color: #1da1f2; } .share-btn--bluesky:hover { background: #0085ff; color: #fff; border-color: #0085ff; } .share-btn--instagram:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; border-color: #dc2743; } .share-btn--accent:hover { background: var(--green-pale); border-color: var(--green-accent); } /* Trust signals: positioned just above the footer-links row */ .footer-trust { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; font-family: var(--mono-font); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 243, 235, 0.45); margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid rgba(245, 243, 235, 0.08); } .footer-trust span { display: inline-flex; align-items: center; gap: 8px; } .footer-trust span::before { content: ''; width: 6px; height: 6px; background: var(--punch); display: inline-block; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: 0.7; } /* ── Utility classes — extracted from repeated inline styles (audit #19) ── Each class swaps out an inline-style pattern that appeared ≥ 6 times across the main-app HTML. Migrating these out of `style="…"` is the first phase toward eventually closing `style-src 'unsafe-inline'` in the CSP. Page-specific one-offs stay inline (yet to be tackled). */ .is-hidden { display: none; } .cursor-pointer { cursor: pointer; } .overflow-hidden { overflow: hidden; } .img-fill { width: 100%; height: auto; display: block; } .img-rounded { width: 100%; height: auto; border-radius: 8px; } .txt-gold { color: var(--gold); } .txt-meta-sm { color: var(--ink-muted); font-size: 12px; } .txt-body-mid { font-size: 15px; color: var(--ink-mid); line-height: 1.55; } .italic-regular { font-style: italic; font-weight: 400; } /* Phase B (audit #19): top JS-template-string patterns. */ .txt-accent { color: var(--green-accent); } .txt-muted { color: var(--ink-muted); } .txt-center-muted { text-align: center; color: var(--ink-muted); } .pe-none { pointer-events: none; } /* Phase E.4 wave 1: next batch of high-frequency static patterns. */ .link-deep { color: var(--green-deep); text-decoration: none; } .flex-1 { flex: 1; } .img-cover { width: 100%; height: 100%; object-fit: cover; display: block; } .txt-green-mid { color: var(--green-mid); } /* Phase E.5: distinctive multi-property patterns (≥4×) across HTML + JS. Migrated by scripts/migrate_inline_styles_e5.py (exact whole-style match). */ .kicker-16 { font-family: var(--mono-font); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--punch); margin-bottom: 16px; } .kicker-12 { font-family: var(--mono-font); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--punch); margin-bottom: 12px; } .kicker-8 { font-family: var(--mono-font); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--punch); margin-bottom: 8px; } .display-24 { font-family: var(--display-font); font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 12px; } .display-22 { font-family: var(--display-font); font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 8px; } .display-italic{ font-family: var(--display-font); font-style: italic; font-weight: 400; } .label-deep { font-family: var(--body-font); font-size: 13px; font-weight: 600; color: var(--green-deep); margin-bottom: 4px; } .fineprint { font-family: var(--body-font); font-size: 11px; color: var(--ink-muted); line-height: 1.5; } .card-cream { background: var(--cream); border: 1.5px solid var(--rule); border-radius: 20px; overflow: hidden; } .card-white { background: #fff; border: 1px solid rgba(26,51,32,0.1); border-radius: 10px; overflow: hidden; } .img-rounded-4 { width: 100%; height: auto; border-radius: 4px; margin-bottom: 12px; } .cursor-click { cursor: pointer; pointer-events: all; } /* Recent-courses list rows (used on community.html + index.html promo strip). Values reflect what actually shipped via inline overrides — the community.html