/* ============================================================================ SEND-GOLF theme system ---------------------------------------------------------------------------- Two themes: "dark" (default) and "light", selected via html[data-theme="dark"] | html[data-theme="light"] The early-paint snippet in each page's picks the right one before the body renders (prevents a flash of wrong theme). Palette: neutral greys + sky blue (primary) + orange (secondary). Brand red kept for the SEND logo. Pragmatic note: Tailwind is loaded via CDN and has no build step, so this file overrides specific Tailwind utility classes with `!important`. When we later switch to a Tailwind build, we can fold these into theme colors and drop the !important. ============================================================================ */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg: #171717; /* page background */ --bg-alt: #1f1f1f; /* sticky nav, overlays */ --bg-section: #262626; /* alt sections */ --bg-card: #2a2a2a; /* cards, form fields */ --bg-on-accent: #0a0a0a; /* text color on accent fill */ /* Text */ --fg: #fafafa; --fg-soft: #d4d4d4; --fg-muted: #a3a3a3; --fg-subtle: #737373; /* Borders */ --border: rgba(250, 250, 250, 0.10); --border-soft: rgba(250, 250, 250, 0.05); --border-strong: rgba(250, 250, 250, 0.20); /* Accents */ --accent: #38bdf8; /* sky-400 */ --accent-strong: #0ea5e9; /* sky-500 */ --accent-5: rgba(56, 189, 248, 0.05); --accent-10: rgba(56, 189, 248, 0.10); --accent-20: rgba(56, 189, 248, 0.20); --accent-30: rgba(56, 189, 248, 0.30); --accent-50: rgba(56, 189, 248, 0.50); --orange: #fb923c; /* orange-400 */ --orange-strong: #f97316; --orange-30: rgba(251, 146, 60, 0.30); --danger: #f87171; --brand-red: #dc2626; } :root[data-theme="light"] { color-scheme: light; --bg: #f5f5f5; --bg-alt: #ffffff; --bg-section: #e5e5e5; --bg-card: #ffffff; --bg-on-accent: #ffffff; --fg: #171717; --fg-soft: #262626; --fg-muted: #525252; --fg-subtle: #737373; --border: rgba(23, 23, 23, 0.12); --border-soft: rgba(23, 23, 23, 0.06); --border-strong: rgba(23, 23, 23, 0.25); --accent: #0284c7; /* sky-600 */ --accent-strong: #0369a1; --accent-5: rgba(2, 132, 199, 0.05); --accent-10: rgba(2, 132, 199, 0.10); --accent-20: rgba(2, 132, 199, 0.15); --accent-30: rgba(2, 132, 199, 0.30); --accent-50: rgba(2, 132, 199, 0.50); --orange: #c2410c; /* orange-700 for contrast on light */ --orange-strong: #9a3412; --orange-30: rgba(194, 65, 12, 0.30); --danger: #dc2626; --brand-red: #b91c1c; } /* Smooth color transitions when switching themes */ html { transition: background-color .25s ease, color .25s ease; } html, body { background-color: var(--bg) !important; color: var(--fg); } /* ============================================================================ Tailwind utility overrides The same class name yields the theme-correct color in both modes. ============================================================================ */ /* -- Surfaces ---------------------------------------------------------------- */ .bg-black, .bg-zinc-950 { background-color: var(--bg) !important; } .bg-zinc-900 { background-color: var(--bg-alt) !important; } .bg-zinc-800 { background-color: var(--bg-card) !important; } .bg-black\/95 { background-color: color-mix(in srgb, var(--bg) 95%, transparent) !important; } .bg-black\/80 { background-color: color-mix(in srgb, var(--bg) 80%, transparent) !important; } .bg-black\/70 { background-color: color-mix(in srgb, var(--bg) 70%, transparent) !important; } .bg-black\/30 { background-color: color-mix(in srgb, var(--bg) 30%, transparent) !important; } /* Zinc surfaces with alpha modifiers (translucent cards, price rows, etc.) */ .bg-zinc-950\/50 { background-color: color-mix(in srgb, var(--bg) 50%, transparent) !important; } .bg-zinc-900\/80 { background-color: color-mix(in srgb, var(--bg-alt) 80%, transparent) !important; } .bg-zinc-900\/70 { background-color: color-mix(in srgb, var(--bg-alt) 70%, transparent) !important; } .bg-zinc-900\/50 { background-color: color-mix(in srgb, var(--bg-alt) 50%, transparent) !important; } .bg-zinc-900\/40 { background-color: color-mix(in srgb, var(--bg-alt) 40%, transparent) !important; } .bg-zinc-900\/30 { background-color: color-mix(in srgb, var(--bg-alt) 30%, transparent) !important; } .bg-zinc-800\/50 { background-color: color-mix(in srgb, var(--bg-card) 50%, transparent) !important; } .bg-zinc-800\/30 { background-color: color-mix(in srgb, var(--bg-card) 30%, transparent) !important; } /* Arbitrary dark hex used in mastery-teaser + similar spots */ .bg-\[\#09090b\], .bg-\[\#0a0a0a\] { background-color: var(--bg-section) !important; } /* bg-white in this design is used for buttons/logo cards — swap to bg-alt so it stays readable in light mode (true white would disappear on light page) */ .bg-white { background-color: var(--bg-alt) !important; } /* -- Text -------------------------------------------------------------------- */ .text-white { color: var(--fg) !important; } .text-zinc-100 { color: var(--fg) !important; } .text-zinc-200 { color: var(--fg-soft) !important; } .text-zinc-300 { color: var(--fg-soft) !important; } .text-zinc-400 { color: var(--fg-muted) !important; } .text-zinc-500 { color: var(--fg-subtle) !important; } .text-zinc-600 { color: var(--fg-subtle) !important; } /* text-black used on accent-colored buttons (sky blue background). Keep it dark-on-accent in both modes (sky blue is dark enough for white text in dark mode, but light mode's sky-600 still pairs well with white) */ .text-black { color: var(--bg-on-accent) !important; } /* -- Preserve real white text on SATURATED colored backgrounds --------------- When `.text-white` sits on a saturated brand color (blue badge, red badge, emerald pill, green dot, etc.) we want ACTUAL white, not the theme fg. Without this rule, a blue "Advanced" badge in light mode gets dark text. */ .bg-blue-500.text-white, .bg-blue-500 .text-white, .bg-blue-600.text-white, .bg-blue-600 .text-white, .bg-blue-700.text-white, .bg-blue-700 .text-white, .bg-red-500.text-white, .bg-red-500 .text-white, .bg-red-600.text-white, .bg-red-600 .text-white, .bg-red-700.text-white, .bg-red-700 .text-white, .bg-emerald-500.text-white,.bg-emerald-500 .text-white, .bg-emerald-600.text-white,.bg-emerald-600 .text-white, .bg-green-500.text-white, .bg-green-500 .text-white, .bg-green-600.text-white, .bg-green-600 .text-white, .bg-orange-500.text-white, .bg-orange-500 .text-white, .bg-orange-600.text-white, .bg-orange-600 .text-white, .bg-\[\#bef264\].text-white, .bg-\[\#bef264\] .text-white { color: #ffffff !important; } /* -- Borders ----------------------------------------------------------------- */ .border-white\/5 { border-color: var(--border-soft) !important; } .border-white\/10 { border-color: var(--border) !important; } .border-white\/20 { border-color: var(--border-strong) !important; } /* -- Primary accent (lime #bef264 → sky blue) -------------------------------- */ .bg-\[\#bef264\] { background-color: var(--accent) !important; } .text-\[\#bef264\] { color: var(--accent) !important; } .border-\[\#bef264\] { border-color: var(--accent) !important; } .bg-\[\#bef264\]\/5 { background-color: var(--accent-5) !important; } .bg-\[\#bef264\]\/10 { background-color: var(--accent-10) !important; } .bg-\[\#bef264\]\/20 { background-color: var(--accent-20) !important; } .border-\[\#bef264\]\/30 { border-color: var(--accent-30) !important; } .border-\[\#bef264\]\/50 { border-color: var(--accent-50) !important; } .hover\:bg-\[\#bef264\]:hover { background-color: var(--accent) !important; } .hover\:text-\[\#bef264\]:hover { color: var(--accent) !important; } .hover\:border-\[\#bef264\]:hover { border-color: var(--accent) !important; } /* -- Secondary accent (orange) ---------------------------------------------- */ .text-\[\#fb923c\] { color: var(--orange) !important; } .bg-\[\#fb923c\] { background-color: var(--orange) !important; } .border-\[\#fb923c\] { border-color: var(--orange) !important; } .hover\:text-\[\#fb923c\]:hover { color: var(--orange) !important; } /* -- Brand red / danger ----------------------------------------------------- */ .text-red-600 { color: var(--brand-red) !important; } .text-red-400 { color: var(--danger) !important; } /* -- Hero gradient overlay (used at top of header) -------------------------- */ /* The combo used in index.html is bg-gradient-to-b from-black/70 via-black/30 to-black. Swap the whole background-image so it fades to the current theme bg. */ .bg-gradient-to-b.from-black\/70.via-black\/30.to-black { background-image: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 70%, transparent), color-mix(in srgb, var(--bg) 30%, transparent), var(--bg)) !important; } /* -- Mobile menu burger ----------------------------------------------------- */ #burger-top, #burger-mid, #burger-bot { background-color: var(--fg) !important; } /* -- Form fields: keep readable in both themes ------------------------------ */ input, textarea, select { background-color: var(--bg-card) !important; color: var(--fg); border-color: var(--border); } input::placeholder, textarea::placeholder { color: var(--fg-subtle); } input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; outline: none; } /* Stop browser autofill from repainting the background */ input:-webkit-autofill, textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset; -webkit-text-fill-color: var(--fg); caret-color: var(--fg); } /* Light-theme form success/error boxes on the contact form */ :root[data-theme="light"] #cf-success { background-color: var(--accent-10) !important; color: var(--accent-strong) !important; border-color: var(--accent-30) !important; } :root[data-theme="light"] #cf-error { background-color: rgba(220, 38, 38, 0.08) !important; color: #991b1b !important; border-color: rgba(220, 38, 38, 0.30) !important; } /* In light mode the video in the hero looks washed out; dim it a little */ :root[data-theme="light"] header video { opacity: 0.15 !important; filter: grayscale(1) contrast(0.9) !important; } /* ============================================================================ Hero decorative outline text ("The Swing.", "Instruction.") Inline [-webkit-text-stroke:1px_rgba(255,255,255,0.4)] doesn't theme, so the hero wrapper uses .hero-outline below. Contrast is tuned so the stroke is clearly visible in light mode (user reported it was too faint). ============================================================================ */ .hero-outline { -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 60%, transparent); color: transparent; transition: -webkit-text-stroke-color .4s ease; } .hero-outline:hover { -webkit-text-stroke-color: var(--accent); } /* Bump the sitewide .text-outline rule (used for "Instruction.") for visibility */ .text-outline { -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 50%, transparent) !important; } /* ============================================================================ LIGHT-MODE PRICING SECTION User feedback: prices were too dark and rows too murky in light mode. Treatment: rows become a deep slate surface so bright-sky price text pops. Contrast: sky-300 (#7dd3fc) on slate-800 (#1e293b) = 9.2:1 (AAA) white (#fafafa) on slate-800 = 14.8:1 (AAA) ============================================================================ */ :root[data-theme="light"] #pricing .bg-zinc-900\/50 { background-color: #1e293b !important; /* slate-800 */ border-color: transparent !important; color: #fafafa !important; } :root[data-theme="light"] #pricing .bg-zinc-900\/50 span { color: #fafafa !important; } :root[data-theme="light"] #pricing .bg-zinc-900\/50 .text-\[\#bef264\] { color: #7dd3fc !important; /* sky-300 — the "very light blue" prices */ } /* Sitewide CTA fix: `.bg-white.text-black` is the standard "primary pill" pattern (BOOK SESSION, Save as PDF, admin Google sign-in, pricing emphasis, etc.). With the default theme overrides those elements collapse to low contrast in BOTH modes (white-on-white in light; grey-on-grey in dark). Paint them as sky-blue accent pills — `.text-black` already maps to `--bg-on-accent`, which is dark text in dark mode and white text in light mode (optimal contrast on sky-blue in each theme). */ .bg-white.text-black { background-color: var(--accent) !important; } .bg-white.text-black:hover { background-color: var(--accent-strong) !important; } /* ============================================================================ MASTERY TEASER ("ROADMAP FROM FIRST SWING TO ELITE") User: the dark grey card needs to be way lighter in light mode. Swap the arbitrary hex background for a soft surface with a clear border. ============================================================================ */ :root[data-theme="light"] .bg-\[\#09090b\] { background-color: #ffffff !important; border-color: var(--border-strong) !important; box-shadow: 0 10px 30px -15px rgba(23, 23, 23, 0.15); } /* ============================================================================ Theme toggle button ============================================================================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; border: 1px solid var(--border); color: var(--fg-muted); background: transparent; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease; flex-shrink: 0; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle svg { width: 18px; height: 18px; } /* Show the icon for "what you'd switch to" — sun while in dark mode, moon while in light */ :root[data-theme="dark"] .icon-sun { display: inline-block; } :root[data-theme="dark"] .icon-moon { display: none; } :root[data-theme="light"] .icon-sun { display: none; } :root[data-theme="light"] .icon-moon { display: inline-block; } /* ============================================================================ Print: always export with the LIGHT palette, regardless of on-screen theme. Resumes print on white paper; PDFs copied/emailed read cleanest on white. Individual pages may add @media print rules for layout — this only handles color. ============================================================================ */ @media print { :root, :root[data-theme="light"], :root[data-theme="dark"] { color-scheme: light; --bg: #ffffff; --bg-alt: #ffffff; --bg-section: #f5f5f5; --bg-card: #ffffff; --bg-on-accent: #ffffff; --fg: #171717; --fg-soft: #262626; --fg-muted: #404040; --fg-subtle: #525252; --border: rgba(23, 23, 23, 0.20); --border-soft: rgba(23, 23, 23, 0.10); --border-strong: rgba(23, 23, 23, 0.35); --accent: #0284c7; --accent-strong: #0369a1; --accent-5: rgba(2, 132, 199, 0.05); --accent-10: rgba(2, 132, 199, 0.10); --accent-20: rgba(2, 132, 199, 0.15); --accent-30: rgba(2, 132, 199, 0.30); --accent-50: rgba(2, 132, 199, 0.50); --orange: #c2410c; --brand-red: #b91c1c; } /* In print, force the body to render on white paper and hide the toggle */ html, body { background: #ffffff !important; color: #171717 !important; } .theme-toggle, .theme-toggle-row { display: none !important; } } /* ============================================================================ TPI white logo — asset is a solid-white mark, invisible on a light page. Invert in light mode so it renders as dark on light. ============================================================================ */ :root[data-theme="light"] .tpi-mark { filter: invert(1) brightness(0.85); } /* ============================================================================ Hex-hero grid: in light mode the dark opaque fills overwhelm the content. Fade the entire grid and glows to barely visible so text stays readable. ============================================================================ */ :root[data-theme="light"] .hex-grid-bg { opacity: 0.07 !important; } :root[data-theme="light"] .hex-glow { opacity: 0.04 !important; } /* ============================================================================ Roadmap phase cards — in light mode the phase labels (emerald/blue/red) sit on a light card background and read as washy. Force the text to the theme foreground (near-black) while leaving the colored status dots (`bg-*` classes) untouched — dots stay brand-colored, text reads cleanly. ============================================================================ */ :root[data-theme="light"] .hex-card .text-emerald-400, :root[data-theme="light"] .hex-card .text-blue-400, :root[data-theme="light"] .hex-card .text-red-500, :root[data-theme="light"] .hex-card .text-zinc-500 { color: var(--fg) !important; } /* Mobile menu variant (full-width row) */ .theme-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--border); color: var(--fg); font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; }