/* projects/jahfeelautomation-deploy/onboarding/funnel.css * * Scoped styles for the onboarding funnel modal. * * 2026-05-07 (JF directive — "60 seconds onboarding, dark theme, doesn't * match new light theme. Fix visual consistency."): * This file used to define a hardcoded dark navy palette that clashed * with the light marketing site that hosts it. The funnel now aliases * the design-system --color-* tokens (css/tokens.css), so it inherits * the same light theme as the rest of jahfeelautomation.com — and will * automatically flip to dark if a future surface sets [data-theme="dark"] * on a parent. * * The --ohq-* variable NAMES are unchanged because funnel.js + every * step file reference them by name (var(--ohq-accent), var(--ohq-fg), * etc.). Only the values changed: each --ohq-* now points to a * design-system --color-* token instead of a baked hex. */ .ohq-funnel { /* Aliases of design-system tokens (defined in /css/tokens.css). The marketing site loads tokens.css FIRST in , then this file — so var(--color-*) is always defined by the time we resolve. */ --ohq-bg-overlay: rgba(15, 23, 42, 0.55); /* dim the page underneath */ --ohq-card-bg: var(--color-card); /* white in light, dark navy in dark */ --ohq-card-border: var(--color-border); --ohq-fg: var(--color-text); --ohq-fg-muted: var(--color-text-muted); --ohq-accent: var(--color-accent); /* teal — matches site */ --ohq-accent-cyan: var(--color-accent-hover); /* slightly brighter teal */ --ohq-success: var(--color-success); --ohq-error: var(--color-danger); --ohq-radius-card: 24px; --ohq-radius-input: 10px; --ohq-motion: 200ms ease-out; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; color: var(--ohq-fg); } .ohq-funnel * { box-sizing: border-box; } .ohq-funnel__overlay { position: fixed; inset: 0; z-index: 9999; background: var(--ohq-bg-overlay); display: flex; align-items: center; justify-content: center; padding: 16px; } .ohq-funnel__card { width: 100%; max-width: 480px; background: var(--ohq-card-bg); border: 1px solid var(--ohq-card-border); border-radius: var(--ohq-radius-card); padding: 24px; /* Replaced the heavy black drop-shadow with the design-system overlay shadow so a white card on a cream page doesn't render as a hard slab. */ box-shadow: var(--shadow-overlay, 0 8px 32px rgba(20, 14, 8, 0.16)); animation: ohq-slide-in var(--ohq-motion) both; } @media (max-width: 640px) { .ohq-funnel__overlay { padding: 0; } .ohq-funnel__card { max-width: none; height: 100dvh; border-radius: 0; } } @keyframes ohq-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .ohq-funnel__progress { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; } .ohq-funnel__progress-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ohq-card-border); cursor: pointer; transition: background var(--ohq-motion); } .ohq-funnel__progress-dot--active { background: var(--ohq-accent); } .ohq-funnel__progress-dot--complete { background: var(--ohq-success); } .ohq-funnel__close, .ohq-funnel__back { background: none; border: 0; color: var(--ohq-fg-muted); font-size: 18px; cursor: pointer; padding: 4px 8px; } .ohq-funnel__close:hover, .ohq-funnel__back:hover { color: var(--ohq-fg); } .ohq-funnel__title { font-size: 20px; font-weight: 600; margin: 12px 0 8px; } .ohq-funnel__subtitle { color: var(--ohq-fg-muted); margin: 0 0 20px; } .ohq-input, .ohq-textarea { width: 100%; padding: 12px 14px; /* On a light card, an opaque off-white surface reads better than a translucent white-on-white that disappears. */ background: var(--color-bg-subtle, rgba(0, 0, 0, 0.03)); border: 1px solid var(--ohq-card-border); border-radius: var(--ohq-radius-input); color: var(--ohq-fg); font: inherit; transition: border-color var(--ohq-motion); } .ohq-textarea { resize: vertical; min-height: 120px; } .ohq-input:focus, .ohq-textarea:focus { outline: none; border-color: var(--ohq-accent); } .ohq-button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--ohq-accent); color: var(--color-text-on-accent, #fff); border: 0; border-radius: var(--ohq-radius-input); font: inherit; font-weight: 600; cursor: pointer; transition: filter var(--ohq-motion), transform var(--ohq-motion); } .ohq-button:hover:not(:disabled) { filter: brightness(1.1); } .ohq-button:active:not(:disabled) { transform: translateY(1px); } .ohq-button:disabled { opacity: 0.5; cursor: not-allowed; } .ohq-button--ghost { background: transparent; color: var(--ohq-fg); border: 1px solid var(--ohq-card-border); } .ohq-card-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 480px) { .ohq-card-grid { grid-template-columns: repeat(2, 1fr); } } .ohq-pick-card { background: var(--color-bg-subtle, rgba(0, 0, 0, 0.03)); border: 1px solid var(--ohq-card-border); border-radius: 14px; padding: 16px; text-align: center; cursor: pointer; transition: all var(--ohq-motion); } .ohq-pick-card:hover { border-color: var(--ohq-accent); transform: translateY(-1px); } /* Selected card uses the accent-faint token so it tints in BOTH themes (was hardcoded purple `rgba(124,58,237,0.12)` previously). */ .ohq-pick-card--selected { border-color: var(--ohq-accent); background: var(--color-accent-faint, rgba(13, 148, 136, 0.08)); } .ohq-pick-card__emoji { font-size: 28px; margin-bottom: 8px; } /* Tap-pulse for over-cap clicks in the goals step */ @keyframes ohq-cap-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); } 50% { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0.4); } } .ohq-pick-card--cap-pulse { animation: ohq-cap-pulse 400ms ease-out; } /* Accessibility */ .ohq-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }