/* theme-botanical.css Shared botanical theme. Loads AFTER global.css / styles.css. Uses [data-theme="light"] / [data-theme="dark"] on . */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ===================================================== Variable redefinitions — light Overrides vars from global.css AND styles.css. ===================================================== */ [data-theme="light"]{ /* global.css */ --bg: #F7F1E6; --bg-panel: #FDF8EE; --bg-panel-2: #FFFFFF; --text: #2D5D3A; --text-2: rgba(45,93,58,0.82); --text-3: rgba(45,93,58,0.6); --accent: #E89B7B; --accent-b: #D97F5C; --accent-soft: rgba(232,155,123,0.14); --accent-line: rgba(232,155,123,0.5); --line: rgba(45,93,58,0.22); --line-soft: rgba(45,93,58,0.1); --serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* styles.css */ --surface: transparent; --surface-strong: rgba(45,93,58,0.05); --text-muted: rgba(45,93,58,0.68); --accent-strong: #D97F5C; --border: rgba(45,93,58,0.22); --shadow: 0 16px 48px rgba(45,93,58,0.08); /* custom */ --butter: #F3C85A; --glow: rgba(232,155,123,0.5); --glow-inset: rgba(232,155,123,0.1); --glow-op: 0.45; /* Spiral palette — sampled from the StayIn favicon (lime → orange → magenta → violet → cyan). Used as a gradient border on hero CTAs and the skill-banner wash. */ --rainbow-ring: linear-gradient(135deg, #9bdc23 0%, #ff9a1a 26%, #e040c0 52%, #7d2de6 76%, #3acfff 100%); } /* ===================================================== Variable redefinitions — dark ===================================================== */ [data-theme="dark"]{ --bg: #1E2A22; --bg-panel: #253330; --bg-panel-2: #2C3B36; --text: #E8DFC7; --text-2: rgba(232,223,199,0.82); --text-3: rgba(232,223,199,0.6); --accent: #E89B7B; --accent-b: #D97F5C; --accent-soft: rgba(232,155,123,0.16); --accent-line: rgba(232,155,123,0.5); --line: rgba(232,223,199,0.25); --line-soft: rgba(232,223,199,0.12); --serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --surface: transparent; --surface-strong: rgba(232,223,199,0.05); --text-muted: rgba(232,223,199,0.68); --accent-strong: #D97F5C; --border: rgba(232,223,199,0.25); --shadow: 0 16px 48px rgba(0,0,0,0.4); --butter: #F3C85A; --glow: rgba(232,155,123,0.55); --glow-inset: rgba(232,155,123,0.12); --glow-op: 0.2; /* Spiral palette — same source colors as light theme; dark wash uses slightly higher alpha so the pastel reads on the forest panel. */ --rainbow-ring: linear-gradient(135deg, #9bdc23 0%, #ff9a1a 26%, #e040c0 52%, #7d2de6 76%, #3acfff 100%); } /* ===================================================== Base transitions ===================================================== */ html, body{ transition: background-color 0.3s ease, color 0.3s ease; } /* ===================================================== Scrollbars — palette-matched, thin, unobtrusive. Applies to every scrollable surface: chat .dialogue-box, the end-of-session .end-panel, page body, modals. Default thumb uses --line (subtle green on light, cream on dark). Hover and grab states pull in the coral accent for warm feedback consistent with the rest of the UI. Firefox uses scrollbar-color (track / thumb). ===================================================== */ *{ scrollbar-width: thin; scrollbar-color: var(--line) transparent; } *::-webkit-scrollbar{ width: 8px; height: 8px; } *::-webkit-scrollbar-track{ background: transparent; } *::-webkit-scrollbar-thumb{ background-color: var(--line); border-radius: 999px; transition: background-color 0.18s ease; } *::-webkit-scrollbar-thumb:hover{ background-color: var(--accent-line); } *::-webkit-scrollbar-thumb:active{ background-color: var(--accent-b); } *::-webkit-scrollbar-corner{ background: transparent; } /* ===================================================== Radial butter glow in the corner of main containers ===================================================== */ .page, .page-shell{ position: relative; overflow: hidden; } .page::before, .page-shell::before{ content: ''; position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; background: radial-gradient(circle, var(--butter) 0%, transparent 65%); opacity: var(--glow-op); pointer-events: none; z-index: 0; } .page > *, .page-shell > *{ position: relative; z-index: 1; } /* ===================================================== Headings — Gloock + small coral underline ===================================================== */ .hero h1, .page-title, .onb-question{ position: relative; padding-bottom: 10px; display: inline-block; font-family: var(--serif); font-weight: 400; } .hero h1::after, .page-title::after, .onb-question::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 40%; height: 2px; background: var(--accent); } /* Eyebrow + badge = coral */ .eyebrow, .badge{ color: var(--accent); } .badge{ background: transparent; } /* ===================================================== Topbar ===================================================== */ .topbar{ border-bottom: 1px solid var(--line-soft); } .topbar-title{ font-family: var(--serif); font-weight: 400; } .topbar-btn{ background: transparent; border: 1.5px solid var(--line); color: var(--text); transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; } .topbar-btn:hover{ background: transparent; border-color: var(--accent); box-shadow: 0 0 16px var(--glow); } /* ===================================================== Cards — transparent, asymmetric leaf corners, glow on hover ===================================================== */ .card{ background: transparent; border: 1.5px solid var(--line); border-radius: 30px 30px 30px 6px; box-shadow: none; transition: border-color 0.25s, box-shadow 0.25s; } .card:hover{ border-color: var(--accent); box-shadow: 0 0 24px var(--glow), inset 0 0 14px var(--glow-inset); transform: none; } .card:active{ transform: none; } /* Featured card — pre-lit with coral glow */ .card-accent{ border-color: var(--accent); border-left: 1.5px solid var(--accent); box-shadow: 0 0 22px var(--glow), inset 0 0 12px var(--glow-inset); } /* Card titles in Gloock */ .card-title, .card h3{ font-family: var(--serif); font-weight: 400; } /* ===================================================== Scenario cards — same transparent leaf look ===================================================== */ .scenario-card{ background: transparent; border: 1.5px solid var(--line); border-radius: 30px 30px 30px 6px; transition: border-color 0.25s, box-shadow 0.25s; } .scenario-card:hover{ border-color: var(--accent); box-shadow: 0 0 24px var(--glow), inset 0 0 14px var(--glow-inset); } .scenario-card-title{ font-family: var(--serif); font-weight: 400; } .scenario-card-skill{ color: var(--accent); font-style: normal; font-family: 'Inter', sans-serif; font-size: 12.5px; } /* ===================================================== Buttons ===================================================== */ .btn{ transition: border-color 0.25s, box-shadow 0.25s, opacity 0.25s, background 0.25s; } .btn-primary{ background: var(--text); color: var(--bg); border: 1.5px solid var(--text); } .btn-primary:hover{ background: var(--text); border-color: var(--accent); box-shadow: 0 0 22px var(--glow); transform: none; } .btn-primary:active{ transform: none; } .btn-ghost{ background: transparent; color: var(--text); border: 1.5px solid var(--line); } .btn-ghost:hover{ background: transparent; border-color: var(--accent); box-shadow: 0 0 20px var(--glow); } /* styles.css .button (used on help.html) */ .button{ background: transparent !important; color: var(--text) !important; border: 1.5px solid var(--line); font-weight: 500; border-radius: 30px; padding: 10px 20px; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; } .button:hover{ background: transparent !important; border-color: var(--accent); box-shadow: 0 0 20px var(--glow); transform: none; } /* ===================================================== Onboarding choices — transparent + asymmetric + glow ===================================================== */ .onb-choice{ background: transparent; border: 1.5px solid var(--line); border-radius: 6px 30px 6px 30px; color: var(--text); transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; } .onb-choice:hover{ background: transparent; border-color: var(--accent); box-shadow: 0 0 20px var(--glow), inset 0 0 10px var(--glow-inset); } .onb-choice.selected{ background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 18px var(--glow), inset 0 0 10px var(--glow-inset); } /* ===================================================== Module toggle ===================================================== */ .module-toggle{ background: transparent; border: 1.5px solid var(--line); } .module-toggle button{ color: var(--text); background: transparent; } .module-toggle button.active{ background: var(--text); color: var(--bg); } /* ===================================================== Pullquote (learn.html) ===================================================== */ .pullquote{ background: transparent; border-left: 3px solid var(--accent); color: var(--text); font-family: var(--serif); } /* ===================================================== Help page layout tweaks ===================================================== */ .page-shell{ max-width: 720px; padding: 44px 30px 60px; } .page-title{ font-size: clamp(2rem, 3vw, 2.5rem); } .page-header{ margin-bottom: 36px; } .card-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* ===================================================== Theme toggle component ===================================================== */ .theme-toggle{ display: inline-flex; align-items: center; gap: 2px; background: transparent; border: 1.5px solid var(--line); border-radius: 30px; padding: 3px; font-family: 'Inter', sans-serif; } .theme-toggle button{ background: transparent; border: none; color: var(--text); padding: 7px 14px; font-size: 12px; font-weight: 500; border-radius: 30px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.02em; transition: background 0.2s, color 0.2s; font-family: inherit; } .theme-toggle button.active{ background: var(--accent); color: var(--bg); } .theme-toggle button:not(.active):hover{ color: var(--accent); } /* ===================================================== Inline-style overrides for existing markup ===================================================== */ /* index.html uses var(--text-2) inline — picks up redefined var automatically */ /* "Update your setup" bottom link in home.html */ .page a[style*="text-decoration:underline"]{ transition: color 0.2s; } .page a[style*="text-decoration:underline"]:hover{ color: var(--accent); } /* ===================================================== Scenario pages — the 18 firefighting_* and conditions_* ===================================================== */ /* Hub-only cards keep transparent — scenarios need the panel bg. We scope the transparent card rule to hub containers only. */ .page .card, .page-shell .card{ background: transparent; } /* Scenario titles use Gloock */ .title, .end-title{ font-family: var(--serif); font-weight: 400; } /* TYPOGRAPHY REFACTOR (2026-04-28): Switched the entire product to Inter — modern, neutral, US-friendly. Italic + serif (Playfair / Gloock) was the old "literary" register; Inter upright reads as conversational and clean. Hierarchy now comes from weight (400/500/600), not style. */ .chat-bubble, .principle, .insight-text, .end-summary{ font-family: var(--sans, "Inter", system-ui, -apple-system, sans-serif); } /* Kill italic across every UI surface that used to render serif/italic. Inline scenario CSS still declares font-style: italic on these classes; this override (loaded last) forces upright. */ .chat-bubble, .chat-narration, .chat-prompt, .principle, .insight-text, .scene-hook, .scene-note, .skill-text, .end-summary, .end-takeaway-text, .end-skill-name, .scenario-card-skill, .scenario-subtitle, .hover-note-body, .hero-howto, .hero p, .coach-line, .summary-takeaway, .summary-title, .summary-list li, .section-empty, .onb-question, .gate-text, .gate-text p, .turn-insight, .turn-insight-text, .turn-micro-feedback, .brand-tagline, .brand-tagline em, em, i { font-style: normal !important; } /* Scenario panels pick up var(--bg-panel) automatically. Give them slightly softer borders in the botanical palette. */ .panel{ border-color: var(--line); } /* "Other" chat bubble — cream in light, lighter forest in dark */ [data-theme="light"] .chat-bubble.other{ background: #FFFFFF; color: var(--text); border-color: var(--line); } [data-theme="dark"] .chat-bubble.other{ background: var(--bg-panel-2); color: var(--text); border-color: var(--line); } /* "You" chat bubble — coral accent */ .chat-bubble.you{ background: var(--accent); color: #FFFFFF; border-color: var(--accent); } /* Choice buttons — botanical leaf shape + coral glow hover */ .choice-btn{ background: var(--bg-panel-2); border: 1.5px solid var(--line); border-radius: 6px 30px 6px 30px; color: var(--text); transition: border-color 0.2s, box-shadow 0.25s, background 0.18s, transform 0.15s; } .choice-btn:hover:not(:disabled){ background: var(--bg-panel-2); border-color: var(--accent); box-shadow: 0 0 20px var(--glow), inset 0 0 10px var(--glow-inset); transform: none; } .choice-btn.selected{ background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 18px var(--glow), inset 0 0 10px var(--glow-inset); } .choice-btn.selected .choice-letter{ color: var(--accent); } /* Principle card — keep it calm, swap to botanical tones */ .principle{ background: transparent; border-color: var(--line-soft); border-left-color: var(--accent); } /* State card — transparent with subtle border */ .state-card, .end-state-item{ background: transparent; border-color: var(--line); } /* End panel — inherits from panel via --bg-panel */ .end-panel{ background: var(--bg-panel); border-color: var(--line); } /* Atmosphere tension backgrounds — override hardcoded colors for dark mode. Light mode keeps the existing warm-cream / soft-pink (still readable). */ [data-theme="light"] .right-panel.mid-tension{ background: #F5EBD8; } [data-theme="light"] .right-panel.high-tension{ background: #F1DED2; border-color: rgba(164, 80, 80, 0.15); } [data-theme="dark"] .right-panel.low-tension{ background: var(--bg-panel); } [data-theme="dark"] .right-panel.mid-tension{ background: #2C2F28; border-color: rgba(243, 200, 90, 0.15); } [data-theme="dark"] .right-panel.high-tension{ background: #322826; border-color: rgba(232, 155, 123, 0.25); } /* Feedback pulse shadows adjusted for botanical palette */ .right-panel.feedback-positive{ box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 2px 18px rgba(45, 93, 58, 0.06), inset 0 0 0 2px rgba(140, 163, 117, 0.35); } .right-panel.feedback-negative{ box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 2px 18px rgba(45, 93, 58, 0.06), inset 0 0 0 2px rgba(232, 155, 123, 0.45); } /* State fill colors — keep semantic (red/blue/green) but soften for botanical */ .fill-tension{ background: #C47868; } .fill-openness{ background: #8AA9B8; } .fill-trust{ background: #8CA375; } /* Dark-mode contrast fix: The default track tint is a dark rgba, which disappears on dark bg. The muted trust/openness fills also blend into the forest palette. */ [data-theme="dark"] .state-pip-track{ background: rgba(232, 223, 199, 0.14); } [data-theme="dark"] .fill-tension { background: #E89B7B; } [data-theme="dark"] .fill-openness{ background: #A4C8DC; } [data-theme="dark"] .fill-trust { background: #B5D196; } /* Turn-dot active uses coral */ .turn-dot.active{ background: var(--accent); } /* ===================================================== Skill-banner — spiral palette wash Applies to both guided scenarios and live-chat. Override comes after each file's inline .skill-banner rule (loaded earlier in ), so no per-file edits are needed. Wash is low-alpha so the eyebrow + skill text remain primary. ===================================================== */ .skill-banner { background: linear-gradient(135deg, rgba(155, 220, 35, 0.12) 0%, rgba(255, 154, 26, 0.10) 26%, rgba(224, 64, 192, 0.14) 52%, rgba(125, 45, 230, 0.12) 76%, rgba(58, 207, 255, 0.14) 100%) padding-box, linear-gradient(var(--bg-panel-2), var(--bg-panel-2)) padding-box, var(--rainbow-ring) border-box !important; border: 2px solid transparent !important; border-radius: 12px !important; } [data-theme="dark"] .skill-banner { background: linear-gradient(135deg, rgba(155, 220, 35, 0.16) 0%, rgba(255, 154, 26, 0.14) 26%, rgba(224, 64, 192, 0.18) 52%, rgba(125, 45, 230, 0.16) 76%, rgba(58, 207, 255, 0.18) 100%) padding-box, linear-gradient(var(--bg-panel-2), var(--bg-panel-2)) padding-box, var(--rainbow-ring) border-box !important; } /* ===================================================== VISUAL REFRESH (2026-05-18) — depth, hierarchy, motion --- Conservative visual-only pass. Keeps every existing color, typography family, layout decision, DOM, IDs, handlers, and routing. Touches only: surface fill, resting elevation, hover lift, title weight, eyebrow intensity. --- Goal: less "wellness article", more "real conversations in motion". Fixes the "everything has the same visual weight" problem by giving cards a readable surface + real lift on hover (previous theme explicitly disabled transform on hover with `transform: none`), bumping title weight one step (400→500), and quieting eyebrows so titles dominate. ===================================================== */ /* ---------- Cards (hub + scenarios) ---------- */ /* Subtle warm fill so the card reads as a "thing" against the cream page, soft resting shadow so it has presence at rest, real lift on hover so clickable cards feel clickable. */ .card, .scenario-card{ background: rgba(253, 248, 238, 0.55); box-shadow: 0 1px 2px rgba(45, 93, 58, 0.04), 0 6px 16px -10px rgba(45, 93, 58, 0.12); transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.28s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1); } .card:hover, .scenario-card:hover{ background: rgba(255, 252, 244, 0.85); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(45, 93, 58, 0.06), 0 14px 28px -12px rgba(45, 93, 58, 0.18), 0 0 24px var(--glow), inset 0 0 14px var(--glow-inset); } .card:active, .scenario-card:active{ transform: translateY(-1px) scale(0.997); transition-duration: 0.1s; } /* Dark theme — translucent forest panel + deeper shadow so the card still reads as elevated against the dark background. */ [data-theme="dark"] .card, [data-theme="dark"] .scenario-card{ background: rgba(44, 59, 54, 0.45); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 16px -10px rgba(0, 0, 0, 0.40); } [data-theme="dark"] .card:hover, [data-theme="dark"] .scenario-card:hover{ background: rgba(44, 59, 54, 0.78); } /* Featured card — keep its pre-lit coral state AND give it a resting forward lift so the "this one matters" treatment is readable before any hover. */ .card-accent{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(45, 93, 58, 0.08), 0 14px 28px -10px rgba(217, 127, 92, 0.22), 0 0 22px var(--glow), inset 0 0 12px var(--glow-inset); } /* ---------- Typography hierarchy ---------- */ /* Titles +1 weight step so they own the card instead of competing with body text at the same weight. Inter at 500 reads as clearly stronger than 400 body without becoming heavy. */ .card-title, .card h3, .scenario-card-title{ font-weight: 500; letter-spacing: -0.005em; } /* Eyebrows — quiet them so titles dominate. Was: same color/size as body text, no distinction. Now: smaller, lighter, wider tracking so they read as "label", not "headline". */ .eyebrow, .section-eyebrow, .section-title-eyebrow{ font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); } /* ---------- Buttons ---------- */ /* Primary — was flat with glow-only hover. Now: subtle resting depth, real lift + stronger shadow on hover, scale-press feedback. */ .btn-primary{ box-shadow: 0 1px 2px rgba(45, 93, 58, 0.10), 0 8px 18px -8px rgba(45, 93, 58, 0.28); } .btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 4px 10px rgba(45, 93, 58, 0.14), 0 16px 28px -10px rgba(45, 93, 58, 0.38), 0 0 22px var(--glow); } .btn-primary:active{ transform: translateY(0) scale(0.99); transition-duration: 0.08s; } /* Ghost — quieter version of the same lift logic. */ .btn-ghost{ box-shadow: 0 1px 2px rgba(45, 93, 58, 0.04); } .btn-ghost:hover{ transform: translateY(-1px); box-shadow: 0 4px 10px -6px rgba(45, 93, 58, 0.12), 0 0 20px var(--glow); } /* ---------- Choice buttons (scenario practice) ---------- */ /* The three response options need to feel like three real choices, not three labels. Subtle shadow at rest gives them presence; lift on hover signals "this is what I'm picking right now". Selected state stays anchored (no lift) — it's committed, not pending. */ .choice-btn{ box-shadow: 0 1px 2px rgba(45, 93, 58, 0.04); } .choice-btn:hover:not(:disabled){ transform: translateY(-1px); box-shadow: 0 4px 10px -6px rgba(45, 93, 58, 0.16), 0 0 20px var(--glow), inset 0 0 10px var(--glow-inset); } .choice-btn:active:not(:disabled){ transform: translateY(0) scale(0.99); transition-duration: 0.08s; } .choice-btn.selected{ transform: none; box-shadow: 0 2px 4px rgba(45, 93, 58, 0.06), 0 0 18px var(--glow), inset 0 0 10px var(--glow-inset); } /* ---------- Onboarding choices ---------- */ .onb-choice{ box-shadow: 0 1px 2px rgba(45, 93, 58, 0.04); } .onb-choice:hover{ transform: translateY(-1px); } /* ---------- Reduced motion ---------- Drop every transform; keep transitions short for color/shadow only. Refreshed visual stays readable, just static. */ @media (prefers-reduced-motion: reduce){ .card, .card:hover, .card:active, .scenario-card, .scenario-card:hover, .scenario-card:active, .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-ghost, .btn-ghost:hover, .choice-btn, .choice-btn:hover, .choice-btn:active, .choice-btn.selected, .onb-choice, .onb-choice:hover, .card-accent{ transform: none !important; transition-duration: 0.12s !important; } }