/* 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; } /* ===================================================== 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; } /* ===================================================== Base transitions ===================================================== */ html, body{ transition: background-color 0.3s ease, color 0.3s ease; } /* ===================================================== 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); }