/* =========================================================== theme.css: shared light/dark theming for traintomountain.com Dark is the default (defined in each page's :root). This file only supplies the LIGHT overrides + the toggle UI. Applied when . =========================================================== */ html[data-theme="light"] { --bg: #EDF2FA; --surface: #FFFFFF; --surface2: #E2E9F4; --border: #D3DEEE; --blue: #2F5BD0; --blue2: #3F7BD8; --blue-dim: rgba(60,101,209,0.10); --blue-glow: rgba(60,101,209,0.18); --amber: #C77A0A; --amber-dim: rgba(245,158,11,0.14); --green: #0FA571; --green-dim: rgba(16,185,129,0.16); --red: #DC3838; --text: #0F1B2D; --text2: #4A5A70; --text3: #8090A4; /* channel tokens: overlays fade to the light bg, shadows go soft slate */ --bg-rgb: 237,242,250; --text-rgb: 15,27,45; --shadow-rgb: 30,45,70; } html[data-theme="light"] { color-scheme: light; } /* ── Dark "Vivid glass" brand cards stay dark in light mode ────────── These cards (problem/ai/science/for/sim/tool) use hardcoded navy gradients as the brand's signature look. On a light page they read as premium dark accent panels. Re-declare the dark token set on each card so every nested element (text, chips, borders, overlays) renders as it does in dark mode and stays legible on the navy background. */ html[data-theme="light"] .problem-card, html[data-theme="light"] .ai-card, html[data-theme="light"] .science-card, html[data-theme="light"] .for-card, html[data-theme="light"] .sim-preview, html[data-theme="light"] .sim-teaser, html[data-theme="light"] .how-right, html[data-theme="light"] .tool-card, html[data-theme="light"] .stat-item, html[data-theme="light"] .gcard, html[data-theme="light"] .gate-inner, html[data-theme="light"] .loop-center, html[data-theme="light"] .rc-modal, html[data-theme="light"] .beta-modal, /* /training/ landing-page squares: stay dark "vivid glass" in light mode too. feature-row / compare-after / phase-stage / science-callout are training-only; demand-card is scoped to the 4 training pages so the guides that reuse it are left alone. */ html[data-theme="light"] .feature-row, html[data-theme="light"] .compare-after, html[data-theme="light"] .phase-stage, html[data-theme="light"] .science-callout, html[data-theme="light"] body[data-page="alpine"] .demand-card, html[data-theme="light"] body[data-page="climbing-app"] .demand-card, html[data-theme="light"] body[data-page="for-mountaineering"] .demand-card, html[data-theme="light"] body[data-page="mountaineering-plan"] .demand-card { --surface: #0F1520; --surface2: #161D2C; --border: #1E2D45; --text: #F1F5F9; --text2: #94A3B8; --text3: #4B5E78; --bg: #080C12; --bg-rgb: 8,12,18; --text-rgb: 241,245,249; --shadow-rgb: 0,0,0; color: #F1F5F9; } /* ── /training/ landing squares: give them the homepage "vivid glass" 3D pop (layered shadow + inset highlights + subtle blue glow) so they match the rest of the site. Scoped to the training pages via [data-landing]; the navy gradient keeps them dark in BOTH themes, and the light-mode token block above keeps their inner text readable. ─────────────────────────── */ [data-landing="training"] .problem-card, [data-landing="training"] .demand-card, [data-landing="training"] .feature-row, [data-landing="training"] .compare-after, [data-landing="training"] .science-callout { position: relative; background: radial-gradient(95% 72% at 25% -10%, rgba(96,165,250,0.30) 0%, transparent 56%), linear-gradient(160deg, #1a3766 0%, #0e2042 55%, #0a1426 100%); border: 1px solid rgba(120,170,255,0.20); box-shadow: 0 26px 58px -24px rgba(var(--shadow-rgb),0.70), 0 0 0 1px rgba(120,170,255,0.10) inset, 0 1px 0 rgba(255,255,255,0.20) inset, 0 0 54px rgba(60,101,209,0.20); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } [data-landing="training"] .problem-card:hover, [data-landing="training"] .demand-card:hover, [data-landing="training"] .feature-row:hover, [data-landing="training"] .science-callout:hover { transform: translateY(-4px); box-shadow: 0 42px 90px -22px rgba(var(--shadow-rgb),0.82), 0 0 0 1px rgba(120,170,255,0.30) inset, 0 1px 0 rgba(255,255,255,0.22) inset, 0 0 52px rgba(60,101,209,0.30); } /* Training hero sits on a dark photo in BOTH themes (its h1 is hardcoded white), so its outline CTA "Test my mountain readiness" must stay light. In light mode .btn-secondary's color is var(--text) = dark, which is invisible on the photo. */ [data-landing="training"] .page-hero .btn-secondary { color: #F1F5F9; border-color: rgba(255,255,255,0.45); } [data-landing="training"] .page-hero .btn-secondary:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,0.08); } /* ── Comparison tables: their row lines were hardcoded white-on-dark (rgba(255,255,255,.04)), invisible on a light page. Give them a darker bluish faded line so the grid reads on white. ──────────────────── */ html[data-theme="light"] .compare-table th, html[data-theme="light"] .compare-table td, html[data-theme="light"] .comparison-table th, html[data-theme="light"] .comparison-table td { border-bottom-color: rgba(31,60,120,0.14); } html[data-theme="light"] .compare-table tr:hover td, html[data-theme="light"] .comparison-table tr:hover td { background: rgba(31,60,120,0.045); } /* "not available" mark was white@20% (invisible on white) -> muted slate */ html[data-theme="light"] .chk-n { color: rgba(15,27,45,0.28); } /* ── Section gradients that fade from a dark stop to the page bg (e.g. summit-series .form-section #050810 -> bg) become a dark band on a light page. Re-base them on a faint brand tint over the light bg. ──── */ html[data-theme="light"] .form-section { background: radial-gradient(ellipse at center, rgba(60,101,209,0.07), transparent 70%), var(--bg); } /* Light-red error text (e.g. #FCA5A5) is too faint on a light bg when shown. */ html[data-theme="light"] .form-error { color: #B91C1C; } /* Guide hero headline is hardcoded #fff (invisible on the light-washed photo). Its overlay fades to the light bg, so the headline should be dark like the other hero text. The word stays brand-blue. Fixes all guide heroes. */ html[data-theme="light"] .article-h1, html[data-theme="light"] .hub-h1 { color: var(--text); text-shadow: none; } /* ── summit-series: cinematic video hero. Keep it dark-scrimmed with light text even in light mode, so the white headline stays readable on the bright footage. Scoped to .page-summit so the shared .hero/.hero-overlay selectors don't affect other pages' light heroes. ─────────────────── */ html[data-theme="light"] .page-summit .hero-overlay { background: radial-gradient(ellipse 75% 55% at 50% 46%, rgba(8,12,18,0.55), transparent 72%), linear-gradient( to bottom, rgba(8,12,18,0.68) 0%, rgba(8,12,18,0.82) 55%, rgba(8,12,18,0.97) 100% ); } html[data-theme="light"] .page-summit .hero h1 { color: #F1F5F9; } html[data-theme="light"] .page-summit .hero p.lead { color: #C7D2E0; } /* ── Theme toggle button (injected into the nav) ───────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; margin: 0 12px 0 10px; border: 1px solid var(--border); border-radius: 9px; /* Filled like the search box beside it: a transparent toggle had only a faint dark border, so in dark mode the square was almost invisible. */ background: var(--surface2); color: var(--text2); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { color: var(--text); border-color: var(--blue); } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* Show the icon for the theme you'd switch TO (moon in light, sun in dark) */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="light"] .theme-toggle .icon-sun { display: block; } html[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ── Nav dropdown: "Training" (Tools + Training landing pages) ─────────── */ .nav-dd { position: relative; } .nav-dd > .nav-dd-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .nav-dd-caret { font-size: 0.7em; opacity: 0.7; transition: transform 0.18s ease; } .nav-dd:hover .nav-dd-caret, .nav-dd:focus-within .nav-dd-caret { transform: rotate(180deg); } .nav-dd-panel { position: absolute; top: calc(100% + 10px); left: 0; transform: translateY(6px); display: flex; gap: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px; box-shadow: 0 18px 50px rgba(0,0,0,0.28); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; z-index: 1200; white-space: nowrap; } .nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* invisible bridge so the gap between trigger and panel doesn't drop hover */ .nav-dd-panel::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .nav-dd-col { display: flex; flex-direction: column; gap: 2px; } .nav-dd-h { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2); padding: 0 8px 7px; } /* !important so the dropdown link color always overrides each page's inline ".nav-links a" rule (which uses a muted --text-rgb alpha and renders dark-on- dark inside the panel otherwise) */ .nav-links .nav-dd-panel a { display: block; padding: 7px 8px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text) !important; line-height: 1.25; text-decoration: none; transition: background 0.13s ease, color 0.13s ease; } .nav-links .nav-dd-panel a:hover { background: var(--surface2); color: var(--blue2) !important; } /* Mobile: in the hamburger menu the "Training" dropdown is a collapsed accordion. The sub-items stay hidden until the user taps the trigger (theme.js toggles .acc-open on the .nav-dd). This keeps the menu short enough to read on one screen instead of dumping all 9 tool/training links inline. The caret is shown (and flips when open) to signal it expands. It animates open (max-height + opacity + padding transition) rather than snapping, and the expanded items live inside a rounded, slightly-raised card so it's visually obvious they're a grouped sub-section of Training, not a sudden full-screen list. */ .nav-links.open .nav-dd-panel { position: static; transform: none; visibility: visible; pointer-events: auto; display: block; box-shadow: none; white-space: normal; /* collapsed state: zero-height, transparent, clipped */ max-height: 0; opacity: 0; overflow: hidden; margin: 0 auto; padding: 0 16px; max-width: 320px; background: var(--surface2); border: 1px solid transparent; border-radius: 14px; transition: max-height 0.34s ease, opacity 0.24s ease, padding 0.34s ease, margin 0.34s ease, border-color 0.24s ease; } .nav-links.open .nav-dd.acc-open .nav-dd-panel { max-height: 600px; opacity: 1; margin: 8px auto 12px; padding: 12px 16px; border-color: var(--border); } .nav-links.open .nav-dd-panel::before { display: none; } .nav-links.open .nav-dd-caret { display: inline-block; } .nav-links.open .nav-dd.acc-open .nav-dd-caret { transform: rotate(180deg); } .nav-links.open .nav-dd-col { margin-bottom: 8px; } /* ── Guide in-article callout "squares" (.ttm-box scoring blocks, .quick-answer callouts) keep the dark vivid-glass look in light mode too, matching the guide cards and every other square on the site. They were translucent blue/green tints designed for a dark page, so on a light page they washed out to pale boxes. Applied globally (theme.css loads on every page) so all ~29 guides are fixed in one pass, no per-page editing. ─────────────────── */ html[data-theme="light"] .ttm-box, html[data-theme="light"] .quick-answer { --text: #F1F5F9; --text2: #C2CDDC; --text3: #8FA0B6; --text-rgb: 241,245,249; color: #F1F5F9; } html[data-theme="light"] .ttm-box { background: linear-gradient(180deg, rgba(60,101,209,0.20), rgba(60,101,209,0.05)), #243349; } html[data-theme="light"] .quick-answer { background: linear-gradient(180deg, rgba(16,185,129,0.16), rgba(16,185,129,0.05)), #243349; } /* Tighten the nav gap site-wide so the 9-item menu + search + CTA fits on one line at typical desktop widths (some pages used gap:32px and wrapped to two lines while others at 28px fit). ID-scoped to beat each page's inline ".nav-links" gap. Below the fit width it wraps gracefully (no horizontal overflow), then collapses to the hamburger at 960px. */ #main-nav .nav-links { gap: 22px; } /* The "Training" dropdown trigger inherited a permanent blue highlight from the old "Tools" link, which clashed with the blue used for the CURRENT page (you couldn't tell which blue meant "you are here"). Style the trigger like a normal nav link; the caret signals it's a dropdown. It still turns blue when you're actually on a Training/Tools page (via .nav-active, which wins). */ #main-nav .nav-dd-trigger:not(.nav-active) { color: rgba(var(--text-rgb), 0.75); font-weight: 500; } #main-nav .nav-dd-trigger:not(.nav-active):hover { color: var(--text); } /* The desktop toggle/search spacing (added to un-cramp the search bar) is too wide for the tight mobile top bar (logo + toggle + search icon + CTA + hamburger) and caused ~18px horizontal overflow at 390px. Trim those margins below the hamburger breakpoint; desktop spacing is unaffected. */ @media (max-width: 960px) { #main-nav .theme-toggle { margin: 0 4px; } #main-nav .ttms-field { margin-right: 0; } /* The open hamburger menu must scroll if its items run past the screen, so the full list is always reachable (it was getting cut off on shorter viewports). */ #main-nav .nav-links.open { overflow-y: auto; -webkit-overflow-scrolling: touch; } }