/* ============================================================
chorefriend web onboarding — styles
Mirrored from Flutter: themeobjects.dart
============================================================ */
/* --- Design Tokens ---
chorefriend brand palette — locked 2026-06-13 (mirrors Flutter
lib/shared/theme_objects.dart::ChorefriendColors). cream bg · clay primary ·
butter accent · sage secondary-accent · cocoa text. */
:root {
/* brand palette (raw) */
--cf-cream: #F7F1E5;
--cf-cream-light: #FBF5EA;
--cf-clay: #D9846A;
--cf-clay-soft: #E8A892;
--cf-butter: #F5C76E;
--cf-butter-soft: #FAE0A8;
--cf-sage: #A6B391;
--cf-sage-deep: #8A9D78;
--cf-cocoa: #3A2E26;
/* semantic tokens (same names the funnel CSS already consumes) */
--color-primary: var(--cf-clay);
--color-secondary: var(--cf-cocoa);
--color-background: var(--cf-cream);
--color-primary-container: #F3E3DB; /* light clay wash */
--color-surface: var(--cf-cream-light);
--color-on-primary: var(--cf-cream-light);
--color-on-secondary: var(--cf-cream-light);
--color-on-surface: var(--cf-cocoa);
--color-on-background: var(--cf-cocoa);
--color-error: var(--cf-clay);
--color-on-error: var(--cf-cream-light);
--color-disabled: #C9BFB4;
--color-body: rgba(58, 46, 38, 0.70); /* cocoa70 */
--color-body-medium: rgba(58, 46, 38, 0.65);
--color-label-medium: var(--cf-sage-deep);
--color-subheading: rgba(58, 46, 38, 0.55);
--color-border: rgba(58, 46, 38, 0.08); /* cocoa08 */
/* type — Fraunces (warm serif) for display/headings/buttons, Inter for body.
Loaded via Google Fonts in index.html. */
--font-body: 'Inter', sans-serif;
--font-heading: 'Fraunces', serif;
--font-headline: 'Fraunces', serif;
--font-mono: 'PT Mono', monospace;
--radius-card: 12px;
--radius-button: 100px;
--radius-large: 18px;
--radius-toggle: 20px;
--safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* --- Font Faces ---
Inter + Fraunces come from Google Fonts (see index.html ). Only the
mono face is self-hosted now (the legacy Satoshi/Nunito/SpaceGrotesk woff2
files are left in /fonts but no longer referenced). */
@font-face {
font-family: 'PT Mono';
src: url('/fonts/PTMono-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
/* --- Reset & Base --- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-body);
background: var(--color-background);
color: var(--color-on-surface);
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}
/* --- App Shell --- */
#app {
position: relative;
width: 100%;
height: 100%;
max-width: 480px;
margin: 0 auto;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* --- Brand bar (persistent across every screen) --- */
#brand-bar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
/* Owns the safe-area top inset, since it's the topmost element in #app. */
padding: calc(env(safe-area-inset-top, 0px) + 24px) 20px 6px 20px;
flex-shrink: 0;
z-index: 11;
pointer-events: none;
}
#brand-bar.hidden {
display: none;
}
#brand-mark {
display: inline-flex;
opacity: 1; /* full-colour mascot — was 0.5 for neurolist's monochrome mark */
}
#brand-mark img {
width: auto; /* preserve the portrait mitt aspect (was forced 32x32 square) */
height: 30px;
margin: 0;
display: block;
}
#brand-wordmark {
font-family: var(--font-heading); /* Fraunces — chorefriend display serif */
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-secondary);
line-height: 1;
opacity: 0.9;
}
/* --- Progress Bar Area --- */
#progress-area {
position: relative;
/* Safe-area top inset now belongs to #brand-bar; keep a small gap below it. */
padding: 6px 20px 0 20px;
flex-shrink: 0;
z-index: 10;
}
#progress-row {
display: flex;
align-items: center;
gap: 20px;
}
#back-button {
width: 32px;
height: 32px;
border: none;
background: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
#back-button.visible {
opacity: 1;
pointer-events: auto;
}
#back-button svg {
width: 24px;
height: 24px;
stroke: var(--color-on-surface);
stroke-width: 2;
fill: none;
}
#progress-track {
flex: 1;
height: 6px;
background: rgba(0, 0, 0, 0.1);
border-radius: var(--radius-toggle);
overflow: hidden;
}
#progress-fill {
height: 100%;
background: var(--color-primary);
border-radius: var(--radius-toggle);
transition: width 0.4s ease;
width: 0%;
}
/* Spacer to match the back button width */
#progress-spacer {
width: 32px;
height: 10px;
flex-shrink: 0;
}
/* Post-loading non-quiz screens: keep the back button visible but hide the
quiz-progress track, since these screens don't represent quiz progress. */
#progress-area.no-progress-fill #progress-track {
visibility: hidden;
}
/* --- Screen Container --- */
#screen-container {
flex: 1;
overflow: hidden;
position: relative;
}
.screen {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
opacity: 0;
transition: opacity 0.3s ease;
}
.screen.active {
opacity: 1;
}
.screen-content {
flex: 1;
padding: 20px 20px 180px 20px;
}
/* --- Footer (fixed bottom button) --- */
#screen-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0 20px calc(10px + var(--safe-bottom)) 20px;
z-index: 20;
pointer-events: none;
background: linear-gradient(to top, var(--color-background) 60%, transparent);
padding-top: 40px;
}
#screen-footer:empty {
background: none;
padding: 0;
}
#screen-footer > * {
pointer-events: auto;
}
/* --- Typography --- */
.text-heading {
font-family: var(--font-heading);
font-weight: 600;
font-size: 24px;
color: var(--color-on-surface);
line-height: 1.2;
}
.text-heading-large {
font-family: var(--font-heading);
font-weight: 600;
font-size: 28px;
color: var(--color-on-surface);
line-height: 1.2;
}
.text-heading-results {
font-family: var(--font-heading);
font-weight: 600;
font-size: 25px;
color: var(--color-on-surface);
line-height: 1.2;
}
.text-subtext {
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
color: var(--color-primary);
line-height: 1.4;
}
.text-body {
font-family: var(--font-body);
font-weight: 500;
font-size: 15px;
color: var(--color-body);
line-height: 1.4;
}
.text-body-large {
font-family: var(--font-body);
font-weight: 500;
font-size: 17px;
color: rgba(0, 0, 0, 0.9);
line-height: 1.4;
}
/* --- Buttons --- */
.btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 52px;
border: none;
border-radius: var(--radius-button);
cursor: pointer;
font-family: var(--font-heading);
font-weight: 600; /* chorefriend buttons are soft, not heavy */
font-size: 18px;
color: var(--color-on-primary);
background: var(--cf-cocoa); /* primary CTA = cocoa, not clay */
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 12px rgba(58, 46, 38, 0.28);
will-change: transform;
transform: translateZ(0);
}
.btn:active {
transform: scale(0.96);
}
.btn.disabled {
background: var(--color-disabled);
box-shadow: none;
cursor: default;
}
.btn.disabled:active {
transform: none;
}
.btn-error {
background: var(--color-error);
box-shadow: 0 4px 12px rgba(176, 0, 32, 0.3);
}
/* Identity Yes/No — colour-coded: green = "I relate", red = "I don't".
Higher specificity (.btn.btn-*) so they win over the cocoa .btn default. */
.btn.btn-yes {
background: #84A063; /* warm sage green */
box-shadow: 0 4px 12px rgba(132, 160, 99, 0.30);
}
.btn.btn-no {
background: #C2604A; /* terracotta red — distinct from clay/orange */
box-shadow: 0 4px 12px rgba(194, 96, 74, 0.30);
}
/* Identity screen dual buttons */
.identity-buttons {
display: flex;
gap: 16px;
}
.identity-buttons .btn {
flex: 1;
}
/* --- Option Cards (Quiz) --- */
.option-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
margin-bottom: 10px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.option-card:active {
transform: scale(0.98);
will-change: transform;
}
.option-card.selected {
background: var(--color-primary);
}
.option-card .option-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.option-card .option-icon-slot {
width: 24px;
height: 24px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.option-card .option-icon circle {
transition: all 0.2s ease;
}
.option-card .option-text {
font-family: var(--font-body);
font-weight: 500;
font-size: 15px;
color: var(--color-on-surface);
line-height: 1.3;
}
.option-card.selected .option-text {
color: var(--color-on-primary);
}
/* --- Identity Statement Card --- */
.statement-card {
padding: 6px;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-surface);
}
.statement-card-inner {
padding: 24px;
}
.statement-text {
font-family: var(--font-body);
font-weight: 500;
font-size: 25px;
color: rgba(0, 0, 0, 0.8);
line-height: 1.3;
}
/* --- "Does this feel doable?" task → first-step card --- */
.doable-wrap {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.doable-card {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-surface);
}
.doable-card--task {
opacity: 0.85;
}
.doable-card--step {
border-color: rgba(0, 0, 0, 0.18);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
}
.doable-emoji {
font-size: 28px;
line-height: 1;
flex-shrink: 0;
}
.doable-text {
font-family: var(--font-body);
font-weight: 700;
font-size: 18px;
color: rgba(0, 0, 0, 0.85);
line-height: 1.3;
flex: 1;
}
.doable-time {
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
color: rgba(0, 0, 0, 0.5);
flex-shrink: 0;
}
.doable-arrow {
text-align: center;
font-size: 24px;
color: rgba(0, 0, 0, 0.35);
line-height: 1;
}
.doable-loader {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 40px 0;
}
.doable-loader .loader-pulse {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.15);
animation: doable-pulse 1.2s ease-in-out infinite;
}
@keyframes doable-pulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.4); opacity: 1; }
}
/* --- Scale Picker (Likert / Never-Always) ----------------------------------
Horizontal row of 5 outlined circles, larger at the extremes, smaller in the
middle. Left cells carry a red/coral tint (Strongly disagree / Never side);
right cells carry a green tint (Strongly agree / Always side). Default state
is an OUTLINED circle. Selected = filled circle in the matching tint with
a white checkmark inside. Anchor labels float below the ends only. No outer
pill background, no dividers between cells. */
.scale-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 4px;
position: relative;
background: transparent;
}
.scale-cell {
flex: 1 1 0;
border: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
padding: 0;
margin: 0;
}
.scale-cell:active { transform: scale(0.94); transition: transform 0.12s ease; }
/* Outlined circle. Border + checkmark color come from variant-specific
custom properties so the colour gradient is defined in one place per cell. */
.scale-circle {
--scale-color: rgba(120, 130, 140, 0.55);
--scale-size: 44px;
width: var(--scale-size);
height: var(--scale-size);
border-radius: 50%;
border: 2px solid var(--scale-color);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
box-sizing: border-box;
}
/* Checkmark — hidden by default, revealed when the cell is selected. */
.scale-check {
width: 60%;
height: 60%;
color: #FFFFFF;
opacity: 0;
transform: scale(0.6);
transition: opacity 0.18s ease, transform 0.18s ease;
}
/* Variant colors — soft red/coral on the disagree side, brand green on the
agree side, gray in the middle. End cells use slightly more saturated
tints so the scale's extremes read strongest. */
.scale-cell--strong-neg .scale-circle { --scale-color: #E25A5A; }
.scale-cell--neg .scale-circle { --scale-color: #E89999; }
.scale-cell--neutral .scale-circle { --scale-color: #B5B9BE; }
.scale-cell--pos .scale-circle { --scale-color: #80C9A0; }
.scale-cell--strong-pos .scale-circle { --scale-color: #35A562; }
/* Size gradient — biggest at the extremes, smallest in the middle. */
.scale-cell--strong-neg .scale-circle { --scale-size: 52px; }
.scale-cell--neg .scale-circle { --scale-size: 42px; }
.scale-cell--neutral .scale-circle { --scale-size: 34px; }
.scale-cell--pos .scale-circle { --scale-size: 42px; }
.scale-cell--strong-pos .scale-circle { --scale-size: 52px; }
/* Selected state — fill with the variant color, show the checkmark. */
.scale-cell.selected .scale-circle {
background: var(--scale-color);
border-color: var(--scale-color);
transform: scale(1.08);
}
.scale-cell.selected .scale-check {
opacity: 1;
transform: scale(1);
}
/* Anchor labels under the row — only the two ends carry text. */
.scale-anchors {
display: flex;
justify-content: space-between;
margin-top: 6px;
padding: 0 6px;
}
.scale-anchor {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
}
.scale-anchor--start { color: #E25A5A; }
.scale-anchor--end { color: #35A562; }
/* --- Welcome / Interactive Text --- */
.welcome-screen {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
cursor: pointer;
background: var(--color-background);
}
.welcome-texts {
flex: 1;
display: flex;
flex-direction: column;
padding: 110px 40px 120px 40px;
gap: 15px;
}
.welcome-text-item {
opacity: 0;
transition: opacity 500ms ease;
font-family: var(--font-heading);
font-weight: 600;
font-size: clamp(24px, 6vw, 42px);
color: var(--color-secondary);
line-height: 1.15;
white-space: pre-line;
}
.welcome-text-item.visible {
opacity: 1;
}
.welcome-text-item.dimmed {
opacity: 0.3;
}
.welcome-tap-hint {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding-bottom: calc(30px + var(--safe-bottom));
font-family: var(--font-heading);
font-weight: 500;
font-size: 21px;
color: rgba(217, 132, 106, 0.7);
pointer-events: none;
}
.welcome-glow {
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 70px;
border-radius: 100px 100px 0 0;
box-shadow: 0 0 60px 10px rgba(217, 132, 106, 0.2);
pointer-events: none;
}
/* --- Results Screens --- */
.results-illustration {
width: 100%;
height: 320px;
border-radius: var(--radius-card);
display: flex;
overflow: hidden;
}
.results-illustration-bad {
background: var(--color-primary);
gap: 5px;
}
.results-illustration-bad .illust-half {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-card);
font-size: 64px;
}
.results-illustration-bad .illust-half:first-child {
background: rgb(101, 101, 101);
}
.results-illustration-bad .illust-half:last-child {
background: rgba(217, 132, 106, 0.7);
}
.results-illustration-bad .illust-arrow {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--color-on-surface);
}
.results-illustration-bad .illust-img {
width: 95%;
max-width: 210px;
height: auto;
display: block;
}
.results-illustration-positive {
height: 300px;
border-radius: var(--radius-large);
background: var(--color-primary-container);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.illust-problem-solving {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: block;
}
.results-list-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
margin-bottom: 12px;
background: var(--color-surface);
border-radius: var(--radius-card);
}
.results-list-item .item-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.results-list-item .item-text {
font-family: var(--font-body);
font-weight: 500;
font-size: 17px;
color: rgba(0, 0, 0, 0.9);
line-height: 1.3;
}
/* --- Profile Screen (Batch 9) --- */
.profile-content {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Full-bleed cohort portrait with a double-vision overlay.
The base image is sharp; a duplicate sits on top with a slight blur and
x-offset, evoking the "foggy brain / two-takes-to-focus" feel. Heading +
label pills now sit ON the photo (reference-style). */
.profile-illustration {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
max-height: 58svh;
border-radius: 18px;
overflow: hidden;
isolation: isolate;
background: var(--color-primary-container);
}
.profile-illust-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.profile-illust-img--blur {
filter: blur(11px) saturate(1.05);
transform: translateX(12px);
opacity: 0.6;
mix-blend-mode: multiply;
pointer-events: none;
}
/* Top-down dark gradient so the heading + label pills stay legible across all
12 portraits regardless of where the subject's hand or skin tones land. */
.profile-overlay-scrim {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.25) 38%,
rgba(0, 0, 0, 0) 60%
);
pointer-events: none;
z-index: 1;
}
.profile-overlay-top {
position: absolute;
top: 14px;
left: 14px;
right: 14px;
display: flex;
flex-wrap: wrap;
gap: 6px;
z-index: 2;
}
.profile-overlay-pill {
display: inline-block;
padding: 5px 12px;
border-radius: var(--radius-button);
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.02em;
color: #ffffff;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.profile-overlay-pill--severity {
font-family: var(--font-heading);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-on-primary);
background: var(--color-primary);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.profile-overlay-pill--low { background: var(--color-primary); }
.profile-overlay-pill--normal { background: var(--color-secondary); }
.profile-overlay-pill--medium { background: #E0A030; }
.profile-overlay-pill--high { background: var(--color-error); }
.profile-heading--overlay {
position: absolute;
top: 64px;
left: 18px;
right: 18px;
margin: 0;
z-index: 2;
font-family: var(--font-heading);
font-weight: 600;
font-size: 32px;
line-height: 1.08;
letter-spacing: -0.01em;
color: #ffffff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45);
}
.severity-slider {
width: 100%;
margin: 4px 0 4px 0;
}
/* "Your level" tooltip floats above the dot. Track height matches the tooltip
so the layout doesn't jump when JS sets the dot position. */
.severity-tooltip-track {
position: relative;
height: 30px;
margin-bottom: 6px;
}
.severity-tooltip {
position: absolute;
bottom: 0;
transform: translateX(-50%);
padding: 4px 12px;
background: #ffffff;
border-radius: 999px;
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
color: var(--color-on-surface);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
white-space: nowrap;
}
.severity-tooltip::after {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #ffffff;
}
.severity-track {
position: relative;
height: 10px;
background: linear-gradient(
to right,
#2BA678 0%,
#6FB870 28%,
#E0A030 62%,
#C24A2A 84%,
#B00020 100%
);
border-radius: var(--radius-toggle);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.severity-dot {
position: absolute;
top: 50%;
width: 22px;
height: 22px;
background: #ffffff;
border: 3px solid var(--color-on-surface);
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.severity-labels {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
color: var(--color-subheading);
}
.severity-labels .is-active {
color: var(--color-on-surface);
font-weight: 600;
}
.profile-stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.profile-stat-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
background: var(--color-surface);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
}
.profile-stat-item .stat-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
color: var(--color-subheading);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.profile-stat-item .stat-value {
font-family: var(--font-heading);
font-weight: 600;
font-size: 16px;
color: var(--color-on-surface);
line-height: 1.2;
}
/* Diagnostic callout — single descriptive paragraph with a leading info icon.
Background + icon color tint by severity bucket so the callout reinforces
the slider's reading. */
.profile-body-copy {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-radius: var(--radius-card);
margin-top: 4px;
background: #DDF1E2;
}
.profile-body-copy--low { background: #DDF1E2; }
.profile-body-copy--medium { background: #FBE7B5; }
.profile-body-copy--high { background: #F8DBDC; }
.profile-body-icon {
flex: 0 0 auto;
width: 22px;
height: 22px;
display: block;
margin-top: 1px;
}
.profile-body-icon svg {
width: 100%;
height: 100%;
display: block;
}
.profile-body-icon-bg { fill: #15703F; }
.profile-body-copy--low .profile-body-icon-bg { fill: #15703F; }
.profile-body-copy--medium .profile-body-icon-bg { fill: #C08A1B; }
.profile-body-copy--high .profile-body-icon-bg { fill: #B0202C; }
.profile-body-text {
flex: 1 1 auto;
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: 15px;
line-height: 1.5;
color: var(--color-on-surface);
}
/* --- Task card (artifact-driven screen after results-bad) ---
Full red wash. Mustard CONTINUE button (—alarm modifier) replaces the
teal so the CTA fits the palette. Tightened sizes so everything fits
in a 750px viewport without scrolling. */
body.task-card-active #progress-area {
background: #9C0019;
}
body.task-card-active #back-button svg {
stroke: #ffffff;
}
body.task-card-active #progress-track,
body.task-card-active #progress-fill {
display: none;
}
/* Footer fade matches the red wash so the CONTINUE button sits cleanly. */
body.task-card-active #screen-footer {
background: linear-gradient(to top, #9C0019 60%, transparent);
}
.task-card-screen .task-card-content {
padding: 4px 20px 140px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.task-card-illustration {
width: 100%;
max-width: 230px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.task-card-illustration img {
width: 100%;
height: auto;
display: block;
}
.task-card-heading {
font-family: var(--font-heading);
font-weight: 600;
font-size: 24px;
line-height: 1.18;
letter-spacing: -0.01em;
text-align: center;
margin: 6px 0 0 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.task-card-heading-line {
color: #ffffff;
}
.task-card-heading-time {
color: #FFB800;
}
.task-card-subtitle {
font-family: var(--font-heading);
font-weight: 500;
font-size: 11px;
line-height: 1.3;
color: #FFB800;
text-align: center;
margin: 8px 0 12px 0;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.task-card {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 22px 18px 20px 18px;
background: #ffffff;
border: none;
border-radius: var(--radius-card);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
width: 100%;
margin-top: 26px;
}
.task-card-emoji {
align-self: center;
font-size: 30px;
line-height: 1;
}
.task-card-title {
font-family: var(--font-heading);
font-weight: 600;
font-size: 17px;
line-height: 1.2;
color: var(--color-on-surface);
text-align: center;
}
.task-card-category {
align-self: center;
display: inline-block;
padding: 3px 10px;
border-radius: var(--radius-button);
font-family: var(--font-body);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ffffff;
background: #9C0019;
}
.task-card-load-label {
font-family: var(--font-body);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #9C0019;
margin-top: 6px;
text-align: left;
}
.task-card-slider .severity-labels .is-active {
color: #9C0019;
}
/* White alarm-CTA — replaces the teal primary so the button fits the red
wash. Pure white with deep-red text reads as the clean "way out". */
.btn--alarm {
background: #ffffff;
color: #9C0019;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
/* --- Time Contrast Screen ---
Visceral side-by-side of psychological time vs objective time. Reuses the
warm-cream wash from task-card for emotional continuity (we're still in the
heavy moment — the next screen pivots to the reframe). The long bar grows
slowly to *feel* like accumulation; the short bar snaps in to feel
incidental. Bar widths are not literally proportional — the ratio is too
large to render legibly — so the labels carry the numbers and the bars
carry the feeling. */
body.time-contrast-active {
background: #FBEEE0;
}
.time-contrast-content {
text-align: left;
}
.time-contrast-heading {
text-align: left;
color: var(--color-on-surface);
font-family: var(--font-heading);
font-weight: 600;
font-size: 25px;
line-height: 1.2;
margin: 0 0 80px 0;
opacity: 0;
animation: time-contrast-fade-in 500ms ease-out 200ms forwards;
}
.time-contrast-graph {
display: flex;
flex-direction: column;
gap: 32px;
width: 100%;
}
.time-contrast-row {
display: flex;
flex-direction: column;
gap: 8px;
}
.time-contrast-bar-track {
width: 100%;
height: 26px;
background: rgba(0, 0, 0, 0.04);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.time-contrast-bar {
height: 100%;
border-radius: 999px;
width: 0;
}
/* Long bar — heavy red. Slow ease so the bar *accumulates* rather than
merely loads; the pacing is what makes it feel like dread piling up.
Starts together with the top heading + caption (200ms) but takes 1500ms
to fill, so text lands first and the weight piles up underneath. */
.time-contrast-bar--carried {
background: linear-gradient(90deg, #B00020 0%, #8A0019 100%);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(176, 0, 32, 0.22);
animation:
time-contrast-grow-long 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) 800ms forwards,
time-contrast-breathe 3.2s ease-in-out 2400ms infinite;
}
.time-contrast-bar--doing {
background: linear-gradient(90deg, #1B8A4F 0%, #15703F 100%);
box-shadow: 0 2px 8px rgba(27, 138, 79, 0.22);
animation: time-contrast-grow-short 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 2500ms forwards;
}
.time-contrast-row-label {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.3;
text-align: left;
padding-left: 4px;
opacity: 0;
}
.time-contrast-row-label--carried {
color: var(--color-error);
animation: time-contrast-fade-in 500ms ease-out 2100ms forwards;
}
.time-contrast-row-label--doing {
color: #15703F;
animation: time-contrast-fade-in 500ms ease-out 2700ms forwards;
}
.time-contrast-row-amount {
font-weight: 600;
}
@keyframes time-contrast-grow-long {
from { width: 0; }
to { width: 96%; }
}
@keyframes time-contrast-grow-short {
from { width: 0; }
to { width: 6%; }
}
@keyframes time-contrast-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Subtle breathing on the long bar — feels alive/heavy. Stays under 6%
variance so it never reads as "loading". */
@keyframes time-contrast-breathe {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.08); }
}
/* --- Action Plan Screen ---
Editorial pivot from problem (time-contrast) to solution. The decomposed
plan steps are the focal point — first 3 visible, the rest blurred to seed
curiosity. Strict brand teal/mint palette: the visual reset from cream wash
to mint background is itself the pivot signal. */
.action-plan-content {
display: flex;
flex-direction: column;
gap: 18px;
text-align: left;
padding-bottom: 140px;
}
/* Document header — sits above the paper card, sets the "this is a real
compiled plan" tone with a small stamp, the descriptor heading, and a
PT-Mono metadata line (date · plan ID · draft version). */
.action-plan-doc-header {
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: 14px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.14);
opacity: 0;
animation: action-plan-fade-up 500ms ease-out 0ms forwards;
}
.action-plan-doc-stamp {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-primary);
}
.action-plan-doc-stamp-mark {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-primary);
box-shadow: 0 0 0 3px rgba(217, 132, 106, 0.18);
}
.action-plan-doc-stamp-id {
color: var(--color-primary);
margin-left: 2px;
}
.action-plan-doc-title {
font-family: var(--font-heading);
font-weight: 500;
font-size: 20px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-secondary);
margin: 2px 0 0 0;
}
.action-plan-doc-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-body);
margin-top: 4px;
}
.action-plan-doc-meta-label {
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-subheading);
margin-right: 2px;
}
.action-plan-doc-meta-sep {
color: rgba(0, 0, 0, 0.25);
}
/* Paper card — wraps the body of the plan so the screen reads as a single
compiled document. Subtle elevation + a teal left rule for the "official"
feel without going full skeuomorph. */
.action-plan-doc {
position: relative;
display: flex;
flex-direction: column;
gap: 22px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 22px 18px 20px 18px;
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.04),
0 8px 24px -16px rgba(0, 0, 0, 0.18);
opacity: 0;
animation: action-plan-fade-up 500ms ease-out 150ms forwards;
}
/* Section number prefix in eyebrows — small monospace tag that gives each
section a "01 / 02 / 03" rhythm like a real plan's table of contents. */
.action-plan-section-num {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.08em;
color: var(--color-primary);
background: var(--color-primary-container);
border-radius: 3px;
padding: 2px 5px;
margin-right: 8px;
vertical-align: 1px;
}
/* Document footer — dashed rule + a quiet typed signature. Closes the
document so the unlock CTA below feels like the next step on the page. */
.action-plan-doc-footer {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
opacity: 0;
animation: action-plan-fade-up 500ms ease-out forwards;
animation-delay: 2800ms;
}
.action-plan-doc-footer-rule {
display: block;
height: 1px;
background: repeating-linear-gradient(
to right,
rgba(0, 0, 0, 0.18) 0,
rgba(0, 0, 0, 0.18) 4px,
transparent 4px,
transparent 8px
);
}
.action-plan-doc-footer-signature {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 400;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--color-subheading);
}
.action-plan-headline {
font-family: var(--font-heading);
font-weight: 600;
font-size: 24px;
line-height: 1.2;
color: var(--color-on-surface);
margin: 0;
opacity: 0;
animation: action-plan-fade-up 500ms ease-out 350ms forwards;
}
.action-plan-eyebrow {
display: block;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-label-medium);
margin-bottom: 10px;
}
/* Section 2 — task summary card. Plain white card, eyebrow above the title.
Reads like a clean document header. */
.action-plan-summary {
display: flex;
flex-direction: column;
gap: 4px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 18px 20px;
opacity: 0;
animation: action-plan-fade-up 500ms ease-out 200ms forwards;
}
.action-plan-summary-eyebrow {
display: block;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--color-subheading);
margin-bottom: 6px;
}
.action-plan-summary-title {
font-family: var(--font-heading);
font-weight: 500;
font-size: 22px;
color: var(--color-on-surface);
line-height: 1.2;
word-break: break-word;
}
.action-plan-summary-meta {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--color-subheading);
margin-top: 4px;
}
/* Section 3 — reframe. Editorial two-sentence statement. No colored block —
the type, the italic teal emphasis, and the upward arrow above carry the
weight. The arrow visually points to the task card above (your task → its
real shape). */
.action-plan-reframe {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
opacity: 0;
animation: action-plan-fade-up 500ms ease-out 500ms forwards;
}
.action-plan-reframe-arrow {
font-family: var(--font-body);
font-size: 24px;
font-weight: 700;
color: var(--color-primary);
line-height: 1;
}
.action-plan-reframe-text {
margin: 0;
font-family: var(--font-heading);
font-weight: 600;
font-size: 26px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-on-surface);
}
.action-plan-reframe-em {
font-style: italic;
color: var(--color-primary);
font-weight: 600;
}
/* Section 4 — stages of action. Horizontal stepper, active stage in primary
teal with a soft halo and a chevron above. */
.action-plan-stages {
opacity: 0;
animation: action-plan-fade-up 500ms ease-out 1100ms forwards;
}
.action-plan-stages-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 4px;
position: relative;
padding-top: 18px;
}
.action-plan-stages-row::before {
content: "";
position: absolute;
left: 10%;
right: 10%;
top: 24px;
height: 1px;
background: rgba(0, 0, 0, 0.10);
z-index: 0;
}
.action-plan-stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex: 1;
position: relative;
z-index: 1;
}
.action-plan-stage-chevron {
position: absolute;
top: -14px;
font-size: 14px;
color: var(--color-primary);
line-height: 1;
}
.action-plan-stage-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-background);
border: 1.5px solid var(--color-body);
box-sizing: border-box;
}
.action-plan-stage.is-active .action-plan-stage-dot {
width: 14px;
height: 14px;
border: none;
background: var(--color-primary);
box-shadow: 0 0 0 4px rgba(217, 132, 106, 0.15);
animation: action-plan-dot-grow 350ms cubic-bezier(0.34, 1.56, 0.64, 1) 1500ms backwards;
}
.action-plan-stage-label {
font-family: var(--font-body);
font-size: 10.5px;
font-weight: 500;
color: var(--color-body);
text-align: center;
line-height: 1.2;
}
.action-plan-stage.is-active .action-plan-stage-label {
color: var(--color-primary);
font-weight: 500;
}
/* Section 5 — breakdown. First 3 steps clear; steps 4+ have content blurred
while the number badge stays visible (so the user sees there are more). */
.action-plan-breakdown .action-plan-eyebrow {
opacity: 0;
animation: action-plan-fade-up 400ms ease-out 1700ms forwards;
}
.action-plan-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.action-plan-step {
display: grid;
grid-template-columns: auto auto 1fr auto auto;
align-items: center;
gap: 10px;
background: var(--color-surface);
border: 1px solid var(--color-primary-container);
border-radius: 8px;
padding: 12px 14px;
opacity: 0;
animation: action-plan-fade-up 400ms ease-out forwards;
}
.action-plan-step-num {
font-family: var(--font-heading);
font-weight: 600;
font-size: 13px;
color: var(--color-secondary);
background: var(--color-primary-container);
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
}
.action-plan-step-emoji {
font-size: 18px;
line-height: 1;
flex: none;
}
.action-plan-step-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 15px;
color: var(--color-secondary);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.action-plan-step-time {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
color: var(--color-label-medium);
background: var(--color-background);
padding: 4px 8px;
border-radius: 100px;
white-space: nowrap;
flex: none;
}
.action-plan-step .action-plan-step-emoji,
.action-plan-step .action-plan-step-title,
.action-plan-step .action-plan-step-time {
filter: blur(6px);
user-select: none;
pointer-events: none;
}
.action-plan-step-lock {
font-size: 11px;
color: var(--color-body);
flex: none;
}
.action-plan-step:not(.is-locked) .action-plan-step-lock {
display: none;
}
/* Total-time row — quiet sum-up at the foot of the breakdown. Subtle teal
tint, not a banner. */
.action-plan-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 18px 0 18px;
margin-top: 4px;
border-top: 1px solid var(--color-border);
opacity: 0;
animation: action-plan-fade-up 400ms ease-out forwards;
}
.action-plan-total-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-subheading);
}
.action-plan-total-value {
font-family: var(--font-heading);
font-weight: 500;
font-size: 16px;
letter-spacing: -0.01em;
color: var(--color-secondary);
}
/* Section 6 — why pull-quote. Italic Space Grotesk on a primary-container
block with a 4px teal left rule. The one clear personalization moment. */
.action-plan-why {
background: #E3EEEC;
border-left: 4px solid var(--color-primary);
border-radius: 8px;
padding: 16px 18px;
opacity: 0;
animation: action-plan-fade-up 500ms ease-out forwards;
}
.action-plan-why-body {
font-family: var(--font-body);
font-style: italic;
font-size: 16px;
font-weight: 600;
color: var(--color-secondary);
line-height: 1.5;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
filter: blur(6px);
user-select: none;
pointer-events: none;
}
/* Section 7 — three locked cards. Heading clear, content blurred, padlock
indicator in the corner. Order: start → stall → recover. */
.action-plan-locked {
display: flex;
flex-direction: column;
gap: 10px;
opacity: 0;
animation: action-plan-fade-up 500ms ease-out forwards;
}
.action-plan-locked .action-plan-eyebrow {
margin-bottom: 4px;
}
.action-plan-locked-card {
position: relative;
background: var(--color-surface);
border: 1px solid var(--color-primary-container);
border-radius: 8px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
opacity: 0;
animation: action-plan-fade-up 400ms ease-out forwards;
}
.action-plan-locked-heading {
font-family: var(--font-heading);
font-weight: 500;
font-size: 15px;
color: var(--color-secondary);
line-height: 1.2;
}
.action-plan-locked-body {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--color-body);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.action-plan-locked-preview {
display: inline;
}
.action-plan-locked-rest {
display: inline;
filter: blur(7px);
user-select: none;
pointer-events: none;
}
.action-plan-locked-icon {
position: absolute;
top: 12px;
right: 14px;
font-size: 12px;
opacity: 0.6;
}
/* Dev reveal — `?reveal=1` lifts every blur so you can see what the LLM
actually generated. Affects only the action-plan screen. */
.action-plan-screen.is-revealed .action-plan-step .action-plan-step-emoji,
.action-plan-screen.is-revealed .action-plan-step .action-plan-step-title,
.action-plan-screen.is-revealed .action-plan-step .action-plan-step-time,
.action-plan-screen.is-revealed .action-plan-locked-rest,
.action-plan-screen.is-revealed .action-plan-why-body {
filter: none !important;
user-select: auto;
pointer-events: auto;
}
.action-plan-screen.is-revealed .action-plan-step-lock,
.action-plan-screen.is-revealed .action-plan-locked-icon {
display: none;
}
/* Reveal mode also lifts the line-clamps so full text is readable. */
.action-plan-screen.is-revealed .action-plan-step-title,
.action-plan-screen.is-revealed .action-plan-locked-body,
.action-plan-screen.is-revealed .action-plan-why-body {
display: block;
-webkit-line-clamp: unset;
overflow: visible;
}
/* --- Action Plan keyframes --- */
@keyframes action-plan-fade-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes action-plan-scale-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
@keyframes action-plan-num-pop {
from { opacity: 0; transform: scale(0.7); }
60% { opacity: 1; transform: scale(1.1); }
to { opacity: 1; transform: scale(1); }
}
@keyframes action-plan-dot-grow {
from { transform: scale(0.6); }
60% { transform: scale(1.4); }
to { transform: scale(1); }
}
/* ============================================================
Plan Framing — narrative beat between task-card and time-contrast
============================================================ */
.plan-framing-screen .plan-framing-content {
padding: 60px 24px 140px 24px;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
min-height: 70vh;
}
.plan-framing-heading {
font-family: var(--font-heading);
font-weight: 600;
font-size: 28px;
line-height: 1.18;
letter-spacing: -0.01em;
color: var(--color-secondary);
margin: 0 0 28px 0;
opacity: 0;
animation: plan-framing-fade-up 600ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms forwards;
}
.plan-framing-heading em {
font-style: italic;
color: var(--color-primary);
}
.plan-framing-tease {
font-family: var(--font-body);
font-weight: 700;
font-size: 24px;
line-height: 1.3;
color: var(--color-body);
margin: 0;
opacity: 0;
animation: plan-framing-fade-up 600ms cubic-bezier(0.22, 0.61, 0.36, 1) 800ms forwards;
}
@keyframes plan-framing-fade-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
Plan Intro — two-card transformation framing between
task-card and the loading screen. TODAY (left) on a soft red
wash; absolute future date (right) on a soft sage wash. The
illustrations were generated in complementary palettes (cool
slate-blue figure on red, warm terracotta figure on sage) so
the figure dominates the wash rather than fighting it.
============================================================ */
.plan-intro-screen .plan-intro-content {
padding: 32px 16px 140px 16px;
display: flex;
flex-direction: column;
align-items: stretch;
}
.plan-intro-heading {
font-family: var(--font-heading);
font-weight: 600;
font-size: 24px;
line-height: 1.22;
letter-spacing: -0.01em;
color: var(--color-secondary);
text-align: center;
margin: 0 0 22px 0;
}
.plan-intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 18px;
}
.plan-intro-card {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 36px 14px 16px 14px;
border-radius: 14px;
min-height: 320px;
overflow: hidden;
}
/* Soft mood washes — kept low-saturation so the figures pop and
the cards don't feel like a child's storybook. The pills carry
the saturated colour signal instead. */
.plan-intro-card--today { background: #FBE4E4; }
.plan-intro-card--future { background: #DFEFDA; }
.plan-intro-pill {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 100px;
white-space: nowrap;
color: #ffffff;
}
.plan-intro-pill--today { background: var(--color-error); }
.plan-intro-pill--future { background: var(--color-primary); }
.plan-intro-illust {
width: 100%;
max-width: 130px;
height: auto;
margin: 6px auto 10px auto;
display: block;
}
.plan-intro-task {
font-family: var(--font-heading);
font-weight: 500;
font-size: 14px;
line-height: 1.25;
text-align: left;
margin: 0 0 8px 0;
color: var(--color-secondary);
word-break: break-word;
}
.plan-intro-task--today { color: #8C1E20; }
.plan-intro-task--future { color: #1F5A2A; }
.plan-intro-bullets {
list-style: disc outside;
padding: 0 0 0 18px;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.plan-intro-bullets li {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.32;
font-weight: 600;
color: var(--color-secondary);
text-align: left;
}
.plan-intro-bullets--today li::marker { color: #8C1E20; font-size: 1.05em; }
.plan-intro-bullets--future li::marker { color: #1F5A2A; font-size: 1.05em; }
/* Italic feeling row — sits at the bottom of each card, no bullet marker.
margin-top: auto pushes it to the floor so cards stay vertically
balanced. Slightly smaller than bullets so it reads as a tag, not as a
third equal-weight bullet. */
.plan-intro-feeling {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.32;
font-weight: 600;
font-style: italic;
text-align: left;
margin-top: auto;
padding-top: 10px;
opacity: 0.92;
}
.plan-intro-feeling--today { color: #8C1E20; }
.plan-intro-feeling--future { color: #1F5A2A; }
.plan-intro-subtext {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.45;
color: var(--color-body);
text-align: center;
margin: 0 8px;
}
.plan-intro-subtext strong {
color: var(--color-secondary);
font-weight: 500;
}
@media (max-width: 360px) {
.plan-intro-heading { font-size: 22px; }
.plan-intro-card { min-height: 300px; padding: 32px 8px 14px 8px; }
.plan-intro-illust { max-width: 110px; }
.plan-intro-task { font-size: 13px; }
.plan-intro-bullets li { font-size: 13px; }
.plan-intro-feeling { font-size: 12px; }
}
/* ============================================================
Plan Included — two-card billboard after action-plan
============================================================ */
.plan-included-screen .plan-included-content {
padding: 16px 20px 140px 20px;
display: flex;
flex-direction: column;
align-items: stretch;
}
.plan-included-eyebrow {
text-align: center;
margin-bottom: 8px;
}
.plan-included-heading {
font-family: var(--font-heading);
font-weight: 600;
font-size: 28px;
line-height: 1.15;
letter-spacing: -0.01em;
text-align: center;
color: var(--color-secondary);
margin: 0 0 24px 0;
}
.plan-included-card {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: 22px 22px 20px 22px;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 2px 6px rgba(58, 46, 38, 0.06);
margin-bottom: 12px;
}
.plan-included-card-header {
display: flex;
align-items: center;
gap: 14px;
}
.plan-included-card-heading-block {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.plan-included-card-bullets {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.plan-included-card-bullets li {
position: relative;
padding-left: 18px;
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
line-height: 1.35;
color: var(--color-body);
}
.plan-included-card-bullets li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-body);
}
.plan-included-card-icon {
flex: 0 0 auto;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border-radius: 0;
}
.plan-included-card-icon--emoji {
font-size: 36px;
line-height: 1;
}
.plan-included-card-icon--mark img {
width: 56px;
height: 56px;
object-fit: contain;
display: block;
}
.plan-included-card-eyebrow {
font-family: var(--font-heading);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-label-medium);
}
.plan-included-card-title {
font-family: var(--font-heading);
font-weight: 500;
font-size: 18px;
line-height: 1.25;
color: var(--color-secondary);
word-break: break-word;
overflow-wrap: anywhere;
}
.plan-included-card-meta {
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
line-height: 1.35;
color: var(--color-body);
margin-top: 2px;
}
.plan-included-card-check {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-primary);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.plan-included-check-svg {
width: 18px;
height: 18px;
display: block;
}
.plan-included-plus {
font-family: var(--font-heading);
font-weight: 600;
font-size: 36px;
line-height: 1;
color: var(--color-primary);
text-align: center;
margin: 4px 0 6px 0;
}
/* ============================================================
Breakdown Carousel — proves system generalizes
============================================================ */
.breakdown-carousel-screen .breakdown-carousel-content {
padding: 16px 0 140px 0;
display: flex;
flex-direction: column;
align-items: stretch;
}
.breakdown-carousel-heading {
font-family: var(--font-heading);
font-weight: 600;
font-size: 24px;
line-height: 1.18;
letter-spacing: -0.01em;
text-align: center;
color: var(--color-secondary);
margin: 0 20px 18px 20px;
}
.breakdown-carousel-divider {
height: 1px;
background: rgba(0, 0, 0, 0.1);
margin: 0 20px 16px 20px;
}
.breakdown-carousel-viewport {
width: 100%;
overflow: hidden;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
cursor: grab;
}
.breakdown-carousel-viewport:active {
cursor: grabbing;
}
.breakdown-carousel-track {
display: flex;
flex-wrap: nowrap;
width: 100%;
will-change: transform;
}
.breakdown-carousel-slide {
flex: 0 0 100%;
min-width: 0;
padding: 0 20px;
box-sizing: border-box;
}
.breakdown-slide-card {
background: transparent;
padding: 0;
}
.breakdown-slide-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 16px;
line-height: 1.25;
letter-spacing: -0.005em;
color: #000000;
text-align: center;
margin-bottom: 4px;
}
.breakdown-slide-chevron {
display: flex;
justify-content: center;
align-items: center;
color: var(--color-primary);
margin-bottom: 8px;
animation: breakdown-chevron-bounce 1400ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms 2;
}
.breakdown-slide-chevron svg {
width: 28px;
height: 28px;
display: block;
}
@keyframes breakdown-chevron-bounce {
0% { opacity: 0; transform: translateY(-6px); }
20% { opacity: 1; transform: translateY(0); }
50% { transform: translateY(6px); }
80% { transform: translateY(0); }
100% { opacity: 1; transform: translateY(0); }
}
.breakdown-slide-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Mirrors the Flutter StepCard visual (lib/shared/step_card.dart):
white surface, 5px radius, very slight gray border, tight padding. */
.breakdown-step {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px 12px 10px;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 5px;
opacity: 0;
animation: action-plan-fade-up 380ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.breakdown-step-emoji {
flex: 0 0 auto;
font-size: 20px;
line-height: 1;
}
.breakdown-step-title {
flex: 1 1 auto;
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
line-height: 1.3;
color: #000000;
}
.breakdown-step-time {
flex: 0 0 auto;
font-family: var(--font-mono);
font-weight: 400;
font-size: 12px;
color: #727272;
}
.breakdown-carousel-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 16px;
}
.breakdown-carousel-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(58, 46, 38, 0.2);
cursor: pointer;
transition: background 200ms, transform 200ms;
}
.breakdown-carousel-dot.is-active {
background: var(--color-primary);
transform: scale(1.2);
}
/* ============================================================
Focus Timer — uses .benefit-mockup pattern, no new layout needed.
Local tweaks only.
============================================================ */
.focus-timer-screen .focus-timer-content {
/* Inherit benefit-content layout — keeps visual parity with the
existing benefit screens later in the funnel. */
}
/* ============================================================
Print mode — server-side PDF rendering of the action-plan artifact.
Activated by 79-print-mode.js when the URL has ?print&uid&t. Strips
chrome (progress bar, footer/CTA), kills reveal animations so the
PDF snapshot doesn't catch mid-fade frames, and forces full opacity.
============================================================ */
body.print-mode #progress-area,
body.print-mode #screen-footer {
display: none !important;
}
/* Iubenda's cookie-preferences floating button uses a 3-class selector with
!important, so bump our specificity past it. */
html.print-mode body.print-mode [class*="iubenda"] {
display: none !important;
}
/* The funnel locks html/body/#screen-container/.action-plan-screen to the
viewport with overflow:hidden + internal scroll on the screen itself. For a
PDF we want a single flowing document so Browserless / browser-print can
paginate naturally. */
html.print-mode,
body.print-mode,
body.print-mode #screen-container {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
body.print-mode .action-plan-screen {
position: static !important;
height: auto !important;
overflow: visible !important;
}
body.print-mode .action-plan-screen,
body.print-mode .action-plan-screen *,
body.print-mode .action-plan-doc-header,
body.print-mode .action-plan-doc-header *,
body.print-mode .action-plan-content,
body.print-mode .action-plan-content * {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
/* Liability disclaimer — only in print mode (PDF email). Sits at the very
bottom so the PDF carries an explicit "AI guidance, not advice" notice. */
body.print-mode .action-plan-content::after {
content: "chorefriend plans are AI-generated output, not professional, medical, legal, or financial advice. chorefriend does not assume any responsibility for AI outputs. Use your own judgment when applying them.";
display: block;
margin: 28px 24px 0;
padding: 14px 16px 0;
border-top: 1px solid var(--color-border);
font-family: var(--font-body);
font-size: 10.5px;
line-height: 1.5;
color: var(--color-subheading);
text-align: center;
}
/* --- Loading Screen --- */
.loading-screen {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
background-size: 400% 400%;
animation: gradient-shift 6s ease infinite alternate;
}
@keyframes gradient-shift {
0% { background-position: 0% 0%; }
25% { background-position: 100% 0%; }
50% { background-position: 100% 100%; }
75% { background-position: 0% 100%; }
100% { background-position: 0% 0%; }
}
.loading-progress-track {
width: 100%;
height: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: var(--radius-button);
overflow: hidden;
}
.loading-progress-fill {
height: 100%;
background: var(--color-on-primary);
border-radius: var(--radius-button);
width: 0%;
transition: width 12s linear;
}
.loading-title {
margin-top: 15px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 21px;
color: rgba(255, 255, 255, 0.6);
text-align: center;
}
.loading-fact-container {
margin-top: 30px;
width: 100%;
height: 400px;
border-radius: var(--radius-card);
background: rgba(58, 46, 38, 0.2);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
position: relative;
}
.loading-fact {
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(28px, 8vw, 48px);
color: var(--color-on-secondary);
text-align: center;
line-height: 1.2;
position: absolute;
padding: 20px;
transition: opacity 0.5s ease;
}
.loading-fact.hidden {
opacity: 0;
}
/* --- Loading Screen v2 (multi-bar + cycling testimonials + mid-load modals) ---
Replaces the old single-bar/rotating-fact loader. Sits between plan-intro
and plan-ready in the new funnel order. */
.loading-screen.loading-v2 {
justify-content: flex-start;
padding: 56px 24px 32px 24px;
}
/* Light variant — used by the short pre-email "analyzing your answers"
loader. App background, dark text, primary-green bar fills. */
.loading-screen.loading-v2--light {
background: var(--color-background) !important;
animation: none;
}
/* Match the regular screen's content width (#app max 480px minus 20px
side padding = 440px effective) so the bars don't sprawl on desktop. */
.loading-v2--light .loading-v2-title,
.loading-v2--light .loading-v2-bars {
width: 100%;
max-width: 440px;
margin-left: auto;
margin-right: auto;
}
.loading-v2--light .loading-v2-title { color: var(--color-secondary); }
.loading-v2--light .loading-v2-bar-label { color: var(--color-subheading); }
.loading-v2--light .loading-v2-bar-row.is-active .loading-v2-bar-label,
.loading-v2--light .loading-v2-bar-row.is-complete .loading-v2-bar-label { color: var(--color-secondary); }
.loading-v2--light .loading-v2-bar-track { background: rgba(58, 46, 38, 0.10); }
.loading-v2--light .loading-v2-bar-fill { background: var(--color-primary); }
.loading-v2--light .loading-v2-bar-check { color: var(--color-primary); }
.loading-v2-title {
margin-top: 0;
margin-bottom: 28px;
color: rgba(255, 255, 255, 0.95);
font-size: 22px;
font-weight: 500;
line-height: 1.2;
}
.loading-v2-bars {
width: 100%;
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 32px;
}
.loading-v2-bar-row {
width: 100%;
}
.loading-v2-bar-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
color: rgba(255, 255, 255, 0.78);
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
}
.loading-v2-bar-row.is-active .loading-v2-bar-label,
.loading-v2-bar-row.is-complete .loading-v2-bar-label {
color: rgba(255, 255, 255, 0.98);
}
.loading-v2-bar-check {
opacity: 0;
transform: scale(0.5);
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
font-size: 22px;
line-height: 1;
font-weight: 600;
color: #ffffff;
}
.loading-v2-bar-row.is-complete .loading-v2-bar-check {
opacity: 1;
transform: scale(1);
}
.loading-v2-bar-track {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.18);
border-radius: var(--radius-button);
overflow: hidden;
}
.loading-v2-bar-fill {
height: 100%;
width: 0%;
background: var(--color-on-primary);
border-radius: var(--radius-button);
}
/* Cycling testimonials block — pinned in the lower third with subtle
container so it reads as commentary, not a primary action surface. */
.loading-v2-testimonial {
margin-top: auto;
width: 100%;
background: rgba(58, 46, 38, 0.32);
border-radius: var(--radius-card);
padding: 18px 20px;
text-align: center;
color: rgba(255, 255, 255, 0.92);
}
.loading-v2-testimonial-stars {
font-size: 14px;
letter-spacing: 0.18em;
color: #FFD66B;
margin-bottom: 8px;
}
.loading-v2-testimonial-text {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.45;
font-style: italic;
margin-bottom: 6px;
transition: opacity 350ms ease;
}
.loading-v2-testimonial-author {
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
opacity: 0.85;
}
/* Mid-load modal — overlays the screen, blocks bar progression until
answered. Mirrors Liven / Impulse "to move forward, please specify"
shape so the user reads it as a step the system needs from them. */
.loading-v2-modal-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 24px;
background: rgba(58, 46, 38, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 10;
animation: loading-v2-modal-fade 220ms ease-out forwards;
}
@keyframes loading-v2-modal-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.loading-v2-modal {
width: 100%;
max-width: 360px;
background: #ffffff;
border-radius: 16px;
padding: 20px 22px 22px 22px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
gap: 14px;
}
.loading-v2-modal-prompt {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-subheading);
text-align: center;
}
.loading-v2-modal-question {
font-family: var(--font-heading);
font-weight: 500;
font-size: 18px;
line-height: 1.28;
color: var(--color-secondary);
text-align: center;
}
.loading-v2-modal-buttons {
display: flex;
gap: 10px;
margin-top: 4px;
}
.loading-v2-modal-btn {
flex: 1;
padding: 12px 8px;
border-radius: var(--radius-button);
border: 1.5px solid #000000;
background: #ffffff;
color: #000000;
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.loading-v2-modal-btn:hover,
.loading-v2-modal-btn:focus-visible {
background: #000000;
color: #ffffff;
outline: none;
}
/* --- View Transitions --- */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.25s;
}
/* --- Utility --- */
.hidden {
display: none !important;
}
/* --- Start Screen --- */
.btn-secondary {
background: var(--color-secondary);
box-shadow: 0 4px 12px rgba(58, 46, 38, 0.3);
}
/* --- Control variant: dishwasher demo --- */
.start-divider {
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
.start-demo {
text-align: center;
}
.start-task-name {
font-family: var(--font-body);
font-weight: 600;
font-size: 20px;
color: rgba(0, 0, 0, 0.6);
min-height: 30px;
padding: 8px 0;
}
.start-arrow {
font-size: 40px;
color: var(--color-on-surface);
animation: bounce 1.5s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(8px); }
}
.start-steps {
text-align: left;
}
.start-step {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
opacity: 0;
animation: fadeInUp 0.5s ease forwards;
}
.start-step-emoji {
font-size: 20px;
flex-shrink: 0;
}
.start-step-text {
flex: 1;
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
color: rgba(0, 0, 0, 0.85);
}
.start-step-time {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
color: var(--color-body-medium);
flex-shrink: 0;
}
/* --- V2 variant: cold-paid quiz entry --- */
.start-cta {
height: 72px;
font-size: 22px;
letter-spacing: 0.08em;
}
.start-content {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding-top: 22px;
}
.start-brand {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 36px;
}
.start-brand img {
width: 56px;
height: 56px;
display: block;
margin: -10px -6px -10px -6px;
}
.start-brand span {
font-family: var(--font-body);
font-weight: 700;
font-size: 20px;
color: var(--color-secondary);
letter-spacing: -0.01em;
line-height: 1;
}
.start-eyebrow-wrap {
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.start-eyebrow-pill {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 999px;
background: rgba(217, 132, 106, 0.12);
font-family: var(--font-body);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-primary);
}
.start-headline {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(26px, 7.2vw, 38px);
line-height: 1.15;
letter-spacing: -0.02em;
text-align: center;
margin: 0 0 14px;
text-wrap: pretty;
}
.start-headline .lead { color: var(--color-secondary); }
.start-headline .promise { color: var(--color-primary); }
.start-subhead {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
color: var(--color-body);
text-align: center;
margin: 0 auto 28px;
max-width: 38ch;
}
/* v1 meta row — clock + divider + proof avatars. Used only by the
`v1_10x` landing arm where there is no subhead. Restored from the
pre-2026-05-07 design so the A/B test renders the prior layout. */
.start-meta {
display: grid;
grid-template-columns: 1fr 1px 1fr;
align-items: center;
column-gap: 16px;
margin-top: 8px;
margin-bottom: 28px;
width: 100%;
}
.start-meta-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
font-family: var(--font-body);
font-size: 12px;
color: var(--color-subheading);
line-height: 1.3;
}
.start-meta-col svg {
width: 14px;
height: 14px;
}
.start-meta-divider {
width: 1px;
height: 36px;
background: rgba(58, 46, 38, 0.15);
justify-self: center;
}
.start-proof-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 16px;
font-family: var(--font-body);
font-size: 12px;
color: var(--color-subheading);
}
.start-avatars {
display: flex;
}
.start-avatars span {
width: 16px;
height: 16px;
border-radius: 999px;
border: 1.5px solid var(--color-background);
margin-left: -5px;
display: block;
}
.start-avatars span:first-child {
margin-left: 0;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.start-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
}
.start-legal {
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
color: rgba(0, 0, 0, 0.6);
text-align: center;
line-height: 1.4;
}
.start-legal a {
color: var(--color-on-surface);
text-decoration: none;
}
/* --- Gender-select cards (start screen) --- */
.gender-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: 92%;
max-width: 420px;
margin: 0 auto;
}
.gender-card {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 14px;
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
overflow: hidden;
box-shadow: 0 1px 2px rgba(58, 46, 38, 0.04), 0 8px 20px -12px rgba(58, 46, 38, 0.18);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.gender-card:active {
transform: scale(0.98);
}
.gender-card:hover {
border-color: var(--color-primary);
box-shadow: 0 2px 4px rgba(58, 46, 38, 0.06), 0 12px 28px -12px rgba(58, 46, 38, 0.25);
}
.gender-card:hover .gender-card-arrow {
transform: translateX(2px);
}
.gender-card.selected {
border-color: var(--color-primary);
}
.gender-card-img {
width: 100%;
aspect-ratio: 1 / 1;
background: var(--color-background);
display: flex;
align-items: center;
justify-content: center;
}
.gender-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.gender-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 14px;
}
.gender-card-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 17px;
color: var(--color-secondary);
letter-spacing: 0.01em;
text-transform: lowercase;
}
.gender-card-arrow {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.18s ease;
}
.gender-card-arrow svg {
width: 19px;
height: 19px;
display: block;
}
/* --- Non-binary / prefer not to say --- */
.start-nb-button {
display: block;
width: 100%;
background: none;
border: none;
padding: 14px 8px;
margin-top: 4px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--color-secondary);
text-decoration: underline;
text-decoration-color: rgba(58, 46, 38, 0.3);
text-underline-offset: 4px;
text-decoration-thickness: 1px;
cursor: pointer;
text-align: center;
-webkit-tap-highlight-color: transparent;
transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.start-nb-button:hover {
color: var(--color-primary);
text-decoration-color: var(--color-primary);
}
/* --- Age-first A/B: quiz-intro screen + inline legal under age question --- */
/* Inline legal footer on the age question — variant B has no landing page,
so the ToS/Privacy line sits below the option cards instead of the
start-screen footer. */
.start-legal--inline {
margin-top: 18px;
text-align: center;
}
/* Intro screen between age and gender — welcoming illustration card,
left-aligned heading + body with a brand-color highlight on the
"10× harder" phrase, meta row, button. Mirrors the quiz-edu --large
illustration pattern (cream backplate, 1:1 aspect) so it reads
continuous with the rest of the funnel's interlude screens. */
.quiz-intro-content {
display: flex;
flex-direction: column;
align-items: stretch;
text-align: left;
padding-top: 8px;
}
.quiz-intro-illustration {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.quiz-intro-illustration img {
width: min(72vw, 300px);
max-width: min(72vw, 300px);
height: auto;
object-fit: contain;
aspect-ratio: 1 / 1;
}
.quiz-intro-heading {
font-family: var(--font-heading);
font-weight: 500;
font-size: 26px;
line-height: 1.2;
color: var(--color-on-surface);
margin: 0 0 14px;
letter-spacing: -0.01em;
}
.quiz-intro-body {
font-family: var(--font-heading);
font-weight: 500;
font-size: 17px;
line-height: 1.45;
color: rgba(0, 0, 0, 0.72);
margin: 0 0 22px;
}
.quiz-intro-highlight {
font-weight: 500;
color: var(--color-secondary);
}
.quiz-intro-meta {
width: 100%;
margin-top: 4px;
}
/* --- Age-First Splash (3s brand splash, age_first arm only) --- */
.age-first-splash-content {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: 32px 20px calc(32px + var(--safe-bottom, 0px)) 20px;
gap: 12px;
}
.age-first-splash-illustration {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 28px;
}
.age-first-splash-illustration img {
width: 100%;
max-width: 370px;
max-height: 42vh;
height: auto;
object-fit: contain;
display: block;
margin: 0 auto;
}
.age-first-splash-heading {
font-family: var(--font-heading);
font-weight: 500;
font-size: 22px;
line-height: 1.3;
color: var(--color-secondary);
text-align: center;
margin: 0;
}
.age-first-splash-bar-wrap {
width: 100%;
max-width: 360px;
margin: 16px auto 0 auto;
}
.age-first-splash-bar-label-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
}
.age-first-splash-bar-label,
.age-first-splash-bar-pct {
font-family: var(--font-body);
font-weight: 300;
font-size: 13px;
color: #000000;
line-height: 1;
}
.age-first-splash-bar-pct {
font-variant-numeric: tabular-nums;
}
.age-first-splash-bar-track {
width: 100%;
height: 6px;
background: rgba(58, 46, 38, 0.10);
border-radius: var(--radius-button);
overflow: hidden;
}
.age-first-splash-bar-fill {
height: 100%;
width: 0%;
background: var(--color-primary);
border-radius: var(--radius-button);
}
/* --- Splash A/B variant: four_step_v4 (task-breakdown animation) ---
In-place swap of the static illustration for a 4-step micro-step reveal.
Heading, progress bar, and 3500ms auto-advance are unchanged. Scoped via
the --v4 modifier so the control arm keeps the bare ![]()
. */
.age-first-splash-illustration--v4 img { display: none; }
.age-first-splash-v4-stage {
width: 100%;
max-width: 305px;
background: radial-gradient(120% 80% at 50% 0%, #f5fbfa 0%, #ffffff 60%);
border: 1px solid #e0eae8;
border-radius: 24px;
padding: 26px 22px 30px;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
overflow: hidden;
font-family: var(--font-heading), system-ui, sans-serif;
}
.age-first-splash-v4-stage .v-source {
display: flex; align-items: center; gap: 12px;
padding: 12px 12px 13px;
background: #fff;
border: 1px dashed rgba(58, 46, 38, 0.28);
border-radius: 8px;
box-shadow: 0 1px 0 rgba(58, 46, 38, 0.04);
will-change: transform, opacity;
backface-visibility: hidden;
opacity: 0; transform: translateY(8px);
animation: nl-v4-fade-up 320ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}
.age-first-splash-v4-stage .v-source-emoji { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.age-first-splash-v4-stage .v-source-title { flex: 1 1 auto; font-weight: 500; font-size: 15px; color: #000; line-height: 1.2; }
.age-first-splash-v4-stage .v-source-time {
font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;
font-weight: 500; font-size: 12px; color: #9aa9a8; letter-spacing: .02em; flex: 0 0 auto;
}
.age-first-splash-v4-stage .v-chevron {
display: flex; justify-content: center; align-items: center;
color: var(--color-primary);
height: 18px;
will-change: opacity;
opacity: 0;
animation: nl-v4-fade-in 280ms cubic-bezier(0.16, 1, 0.3, 1) 480ms forwards;
}
.age-first-splash-v4-stage .v-chevron svg { width: 22px; height: 22px; display: block; }
.age-first-splash-v4-stage .v-steps { display: flex; flex-direction: column; gap: 7px; }
.age-first-splash-v4-stage .v-step {
display: flex; align-items: center; gap: 10px;
padding: 10px 10px 11px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
will-change: transform, opacity;
backface-visibility: hidden;
opacity: 0; transform: translateY(6px);
}
.age-first-splash-v4-stage .v-step .e { flex: 0 0 auto; font-size: 18px; line-height: 1; }
.age-first-splash-v4-stage .v-step .t { flex: 1 1 auto; font-weight: 500; font-size: 13px; line-height: 1.3; color: #000; }
.age-first-splash-v4-stage .v-step .m {
flex: 0 0 auto;
font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;
font-weight: 400; font-size: 11px; color: #727272;
}
.age-first-splash-v4-stage .v-step.s1 { animation: nl-v4-fade-up 300ms cubic-bezier(0.16, 1, 0.3, 1) 760ms forwards; }
.age-first-splash-v4-stage .v-step.s2 { animation: nl-v4-fade-up 300ms cubic-bezier(0.16, 1, 0.3, 1) 886ms forwards; }
.age-first-splash-v4-stage .v-step.s3 { animation: nl-v4-fade-up 300ms cubic-bezier(0.16, 1, 0.3, 1) 1012ms forwards; }
.age-first-splash-v4-stage .v-step.s4 { animation: nl-v4-fade-up 300ms cubic-bezier(0.16, 1, 0.3, 1) 1138ms forwards; }
@keyframes nl-v4-fade-up {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes nl-v4-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.age-first-splash-v4-stage .v-source,
.age-first-splash-v4-stage .v-chevron,
.age-first-splash-v4-stage .v-step { animation: none; opacity: 1; transform: none; }
}
/* --- Sign-In Screen --- */
.signin-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding-top: 80px !important;
}
.signin-icon {
font-size: 48px;
margin-bottom: 20px;
}
.signin-buttons {
width: 100%;
display: flex;
flex-direction: column;
gap: 14px;
}
.signin-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
height: 56px;
border: none;
border-radius: var(--radius-button);
cursor: pointer;
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.2s ease;
will-change: transform;
transform: translateZ(0);
}
.signin-btn:active {
transform: scale(0.96);
}
.signin-btn:disabled {
opacity: 0.6;
cursor: default;
}
.signin-btn:disabled:active {
transform: none;
}
.signin-btn-logo {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.signin-btn-google {
background: #FFFFFF;
color: #3c4043;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.signin-btn-apple {
background: #000000;
color: #FFFFFF;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.signin-skip {
display: block;
width: 100%;
border: none;
background: none;
cursor: pointer;
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
color: var(--color-body-medium);
text-decoration: underline;
text-underline-offset: 3px;
padding: 16px;
text-align: center;
}
.signin-skip:active {
opacity: 0.6;
}
/* --- Paywall Screen (iframe) --- */
.paywall-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
z-index: 1000;
background: transparent;
display: flex;
align-items: stretch;
justify-content: center;
overflow: hidden;
}
.paywall-iframe {
width: 100%;
height: 100%;
border: none;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/* --- Utility --- */
.gap-10 { margin-top: 10px; }
.gap-16 { margin-top: 16px; }
.gap-20 { margin-top: 20px; }
.gap-25 { margin-top: 25px; }
.gap-30 { margin-top: 30px; }
.gap-56 { margin-top: 56px; }
/* ============================================================
Education / Conversion Screens (web-only additions)
============================================================ */
.education-content {
padding-top: 20px;
padding-bottom: 180px;
}
/* Quiz-interleaved edu interludes. Layout: short illustration "header strip"
pinned at the top, then a single message block below it. One font size, one
weight (with bold inline emphasis allowed). Everything fits above the fixed
CONTINUE button — no scrolling. */
.quiz-edu-content {
padding-top: 16px;
padding-bottom: 180px;
}
/* Illustration card sits at the top, full width, but height-capped so it reads
as a header rather than a centerpiece. Image keeps aspect ratio; the height
cap drives both dimensions. */
.quiz-edu-content .education-illustration {
margin-top: 0;
margin-bottom: 28px;
padding: 10px;
}
.quiz-edu-content .education-illustration svg,
.quiz-edu-content .education-illustration img {
max-width: 200px;
max-height: 110px;
width: auto;
height: auto;
}
.quiz-edu-content--visual {
padding-top: 8px;
}
.quiz-edu-content .education-illustration--large {
min-height: clamp(190px, 29vh, 260px);
margin-bottom: 26px;
padding: 12px;
background: #FCF6ED;
}
.quiz-edu-content .education-illustration--large img {
width: min(58vw, 240px);
max-width: min(58vw, 240px);
max-height: none;
height: auto;
object-fit: contain;
aspect-ratio: 1 / 1;
}
/* toolkit_phones and trusted_400k are background-stripped (rembg) PNGs/WebP,
so the artwork sits directly on the funnel's mint page background — no
card backplate, no padding frame. splash_cleaning sits the same way: the
asset carries its own framing, so we drop the cream wrap to avoid the
double-box look. */
.quiz-edu-content .education-illustration--large:has(img[src*="toolkit_phones"]),
.quiz-edu-content .education-illustration--large:has(img[src*="trusted_400k"]),
.quiz-edu-content .education-illustration--large:has(img[src*="splash_cleaning"]),
.quiz-edu-content .education-illustration--large:has(img[src*="cleaning_overwhelm"]) {
background: transparent;
padding: 0;
border: none;
border-radius: 0;
}
/* cleaning_overwhelm: white-background asset — clip the img itself so the
white corners round off cleanly against the mint page bg. */
.quiz-edu-content .education-illustration--large img[src*="cleaning_overwhelm"] {
border-radius: 20px;
}
/* toolkit_phones is a horizontal three-phone composition — the shared 1:1
cap shrinks it too much. Drop the min-height so the container hugs the
image, and visually upscale via transform so the artwork reads larger
without reserving extra vertical space (lets the message text sit higher). */
.quiz-edu-content .education-illustration--large:has(img[src*="toolkit_phones"]) {
min-height: 0;
margin-bottom: 32px;
overflow: visible;
}
.quiz-edu-content .education-illustration--large img[src*="toolkit_phones"] {
width: min(70vw, 280px);
max-width: min(70vw, 280px);
aspect-ratio: auto;
transform: scale(1.35);
transform-origin: center top;
}
/* The single message — replaces the eyebrow + heading + body cascade. */
.edu-message {
font-family: var(--font-body);
font-weight: 500;
font-size: 22px;
line-height: 1.4;
color: rgba(0, 0, 0, 0.92);
white-space: pre-line;
margin: 0;
}
.edu-message strong {
font-weight: 500;
color: var(--color-secondary);
}
.edu-message--satoshi {
font-family: var(--font-heading);
}
/* Compact variant (no illustration) — text-only, more top padding so the
message sits centered-ish in the viewport. */
.quiz-edu-compact {
padding-top: 48px;
}
.quiz-edu-compact .edu-message {
font-size: 24px;
}
/* Credibility-badge variant (intro_not_alone) — Calm-style social-proof beat.
Headline reads tighter and centered; 2x2 stat-card grid sits below. */
.quiz-edu-content--badges {
padding-top: 32px;
text-align: center;
}
.edu-message--headline {
font-family: var(--font-heading);
font-weight: 700;
font-size: 24px;
line-height: 1.3;
color: var(--color-secondary);
margin: 0 0 32px;
text-align: center;
}
.credibility-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
max-width: 360px;
margin: 0 auto;
}
.credibility-badge {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-large);
padding: 22px 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 110px;
}
.credibility-badge__headline {
font-family: var(--font-heading);
font-weight: 700;
font-size: 28px;
line-height: 1.1;
color: #000;
letter-spacing: -0.01em;
display: flex;
align-items: center;
justify-content: center;
min-height: 32px;
}
.credibility-badge__headline--icon svg {
width: 32px;
height: 32px;
color: #000;
display: block;
}
.credibility-badge__subline {
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
line-height: 1.25;
color: var(--color-body);
text-align: center;
}
/* Action-gate artifact used on early quiz interludes. A wide vague task
rebounds at the left post while a small concrete step passes through. */
.quiz-edu-content .education-illustration:has(.action-line-artifact) {
margin-bottom: 22px;
padding: 0;
background: transparent;
min-height: 0;
}
.action-line-artifact {
position: relative;
width: 100%;
max-width: 320px;
height: 100px;
margin: 30px auto 22px;
font-family: var(--font-body);
}
/* The gradient bar — slightly rounded, three-stop gradient. Red on the
left (stuck), green on the right (moving). Stops are slightly shifted
from pure 0/50/100 so the yellow zone feels like a meaningful middle
band rather than a thin transition. */
.action-line-bar {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 22px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: linear-gradient(
to right,
#D14545 0%,
#E8B53A 44%,
#C8D14A 62%,
#4FB97A 100%
);
}
/* End-cap labels sit below the bar at each end. They're descriptive copy
now, not single-word tags, so they need wrapping width and a heavier
line-height. Each cap takes up to ~44% of the bar so the two ends
never collide visually. */
.action-line-cap {
position: absolute;
bottom: 0;
width: 44%;
font-size: 11px;
font-weight: 600;
line-height: 1.3;
pointer-events: none;
}
.action-line-cap--start {
left: 0;
text-align: left;
color: #B33636;
}
.action-line-cap--end {
right: 0;
text-align: right;
color: #2E8B57;
}
/* Marker — stem straddles the bar, tag floats just above. `left` is set
inline per the `level` arg. The marker itself is a zero-size anchor at
the bar's vertical center; stem and tag are absolutely positioned
children so they line up cleanly regardless of bar/stem heights.
Transition is in place so future mid-quiz update screens animate the
slide when the level changes. */
.action-line-marker {
position: absolute;
top: 50%;
width: 0;
height: 0;
pointer-events: none;
transition: left 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
.action-line-marker-stem {
position: absolute;
top: -22px;
left: -2px;
width: 4px;
height: 44px;
border-radius: 2px;
background: var(--color-secondary);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
}
.action-line-marker-tag {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
padding: 3px 9px;
background: var(--color-secondary);
color: var(--color-on-secondary);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 4px;
white-space: nowrap;
}
.action-line-marker-tag::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid var(--color-secondary);
}
/* --- End-of-funnel action-gate education ---
Brand-light palette: scoped via body.action-gate-active so end-of-funnel
screens match the rest of the funnel (light mint bg, dark teal text,
brand teal accents). Tokens are kept under their original names so the
downstream selectors don't need a rename — but their semantics are now
mapped onto the light-theme brand. */
body.action-gate-active {
--gate-bg-top: #FFFFFF;
--gate-bg-mid: #FFFFFF;
--gate-bg-bot: #F7F1E5;
--gate-cream: #3A2E26; /* primary text on light bg */
--gate-cream-soft: #F3E3DB; /* mint container */
--gate-mint-deep: #8A9D78;
--gate-accent: #D9846A; /* brand primary teal */
--gate-block: #E65D4C;
--gate-surface: #FFFFFF;
--gate-surface-soft: #F7F1E5;
--gate-border: rgba(58, 46, 38, 0.12);
--gate-border-strong: rgba(58, 46, 38, 0.18);
--gate-text-muted: rgba(58, 46, 38, 0.62);
--gate-text-soft: rgba(58, 46, 38, 0.45);
--gate-shadow: rgba(58, 46, 38, 0.10);
}
.action-gate-active #screen-footer {
display: flex;
justify-content: center;
padding: 0 20px calc(18px + var(--safe-bottom)) 20px;
background: linear-gradient(to top, var(--color-background) 64%, rgba(247, 241, 229, 0));
}
.action-gate-screen {
background: var(--color-background);
color: var(--gate-cream);
}
/* Gate-education has 5 stacked 100vh panels and uses programmatic scrollTo
to advance the reveal — manual scrolling would jump past the animation
beats. Block touch panning here only; the simpler single-viewport
action-gate screens stay scrollable so taller-than-viewport content
(illustration + bullets on small phones) is still reachable. */
.action-gate-education-screen {
touch-action: none;
overscroll-behavior: contain;
}
/* Toolkit-reveal: same panel-and-beat scroll mechanics as gate-education. */
.toolkit-reveal-screen {
touch-action: none;
overscroll-behavior: contain;
}
/* Toolkit-reveal panels — anchor content to the top so the headline sits
close to the progress bar; the demo / screenshot grows downward below it.
Double-class selector raises specificity above the base `.gate-panel`
rule, which is concatenated AFTER this file in the build and would
otherwise win at equal specificity. */
.gate-panel.gate-panel--toolkit {
justify-content: flex-start;
gap: 24px;
padding: 12px 0 122px 0;
}
.gate-panel.gate-panel--toolkit-text {
text-align: left;
}
.gate-statement--toolkit {
font-size: 24px;
line-height: 1.28;
}
/* S4/S5 are text-only beats — give the headline more presence by scaling
it up vs the screenshot beats. */
.gate-statement--toolkit-hero {
font-size: 36px;
line-height: 1.12;
}
/* S2/S3: phone-mockup screenshot. Capped by height (not width) so the
image + 5-line headline + footer all fit on one viewport — width follows
the 900×1600 aspect ratio naturally. */
.toolkit-screenshot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.toolkit-screenshot img {
display: block;
width: auto;
height: auto;
max-height: 42vh;
max-width: 100%;
object-fit: contain;
/* Visually scale up the phone mockup without growing its layout box, so
the headline below stays in place. */
transform: scale(1.15);
transform-origin: center;
}
/* S5 final beat — brain + lightbulb + gear illustration sits under the
"let's personalize" headline. Bounded by viewport height so the CONTINUE
button below stays in view. */
.toolkit-illustration {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 8px;
}
.toolkit-illustration img {
display: block;
width: auto;
height: auto;
max-height: 36vh;
max-width: 80%;
object-fit: contain;
}
/* Final-beat footer: CTA mode swaps the round arrow + 5/5 pill for a
standard full-width CONTINUE button. The double-class selectors raise
specificity above the base `.gate-footer-controls` rule (which sets
width: 240px + display: grid for the round-arrow layout) — that rule is
concatenated later in the bundle and would otherwise win at equal
specificity. */
.gate-footer-controls .gate-final-cta {
display: none;
}
.gate-footer-controls.gate-footer-controls--cta {
display: flex;
width: 100%;
max-width: 480px;
}
.gate-footer-controls.gate-footer-controls--cta .gate-progress-pill,
.gate-footer-controls.gate-footer-controls--cta .gate-arrow-button {
display: none;
}
.gate-footer-controls.gate-footer-controls--cta .gate-final-cta {
display: block;
width: 100%;
}
/* S1: typewriter-driven task name + bouncing arrow + staggered breakdown
step list. Markup classes (.start-task-name / .start-arrow / .start-steps
/ .start-step) match the original dishwasher demo so the existing styles
in 70-start-screen-variants.css supply font + bounce + fadeInUp. The
wrapper here just sizes and positions the demo inside the gate panel. */
.toolkit-demo {
width: 100%;
max-width: 360px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
/* Reserve space for the fully-revealed state from mount onwards so the
headline above doesn't jump up when the arrow + step cards unhide. Sized
to fit: task-name + arrow + 5 step cards + their gaps. */
min-height: 500px;
justify-content: flex-start;
}
.toolkit-demo .start-task-name {
color: var(--gate-cream);
min-height: 32px;
font-size: 22px;
}
.toolkit-demo .start-arrow {
color: var(--gate-accent);
}
.toolkit-demo .start-steps {
display: flex;
flex-direction: column;
gap: 4px;
}
.toolkit-demo .start-step {
background: var(--gate-surface);
border: 1px solid var(--gate-border);
border-radius: var(--radius-card);
}
.toolkit-demo .start-step-text {
color: var(--gate-cream);
}
.toolkit-demo .start-step-time {
color: var(--gate-text-muted);
}
.action-gate-screen::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(58, 46, 38, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(58, 46, 38, 0.035) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 72%);
}
.action-gate-content {
position: relative;
padding: 0 20px 160px 20px;
}
.gate-panel {
min-height: calc(100vh - 8px);
min-height: calc(100dvh - 8px);
display: flex;
flex-direction: column;
justify-content: center;
gap: 26px;
position: relative;
padding: 42px 0 122px 0;
}
.gate-kicker {
align-self: flex-start;
padding: 7px 10px;
border: 1px solid rgba(217, 132, 106, 0.35);
border-radius: 999px;
color: var(--gate-accent);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0;
text-transform: uppercase;
background: rgba(217, 132, 106, 0.08);
}
.gate-statement {
opacity: 0;
transform: translateY(18px);
filter: blur(12px);
transition:
opacity 520ms ease,
transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
filter 620ms ease;
}
.gate-statement.is-visible {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
.gate-statement--hero {
margin: 0;
font-family: var(--font-heading);
font-weight: 600;
font-size: 36px;
line-height: 1.08;
color: var(--gate-cream);
}
.gate-statement--gate {
display: grid;
grid-template-columns: 72px 1fr;
align-items: center;
gap: 16px;
padding-top: 8px;
}
.gate-statement--gate p,
.gate-statement--body {
margin: 0;
font-family: var(--font-heading);
font-weight: 600;
font-size: 29px;
line-height: 1.16;
color: var(--gate-cream);
}
.gate-statement strong {
color: var(--gate-accent);
}
.gate-symbol {
position: relative;
width: 70px;
height: 84px;
}
.gate-symbol__left,
.gate-symbol__right {
position: absolute;
top: 4px;
width: 14px;
height: 76px;
border-radius: 999px;
background: linear-gradient(180deg, #A8B2AF, #7E8987);
box-shadow: 0 12px 28px var(--gate-shadow);
}
.gate-symbol__left { left: 10px; }
.gate-symbol__right { right: 10px; }
.gate-symbol__glow {
position: absolute;
left: 50%;
top: 13px;
width: 26px;
height: 58px;
transform: translateX(-50%);
border-radius: 999px;
background: linear-gradient(180deg, rgba(217, 132, 106, 0.55), rgba(217, 132, 106, 0.10));
box-shadow: 0 0 34px rgba(217, 132, 106, 0.30);
}
/* Panels 2–5 anchor content to the top instead of vertically centring, so
the small fixed-height visuals (illustration / compare-track / refusal
diagram) don't get pushed far down by the centring split. Double-class
to outrank the concatenation-order specificity of the base .gate-panel.
Panel 0 (--opener) keeps its centring — its hero text fills the space. */
.gate-panel.gate-panel--fit,
.gate-panel.gate-panel--wide,
.gate-panel.gate-panel--narrow,
.gate-panel.gate-panel--final {
justify-content: flex-start;
}
.gate-fit-illustration {
position: relative;
height: 176px;
border: 1px solid var(--gate-border);
border-radius: 8px;
background: var(--gate-surface);
overflow: hidden;
}
.gate-fit-frame {
position: absolute;
top: 56px;
left: 78%;
width: 132px;
height: 78px;
transform: translateX(-50%);
z-index: 4;
}
.gate-portal::before,
.gate-refusal__door::before {
content: none;
}
.gate-fit-frame::before,
.gate-fit-frame::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 11px;
border-radius: 999px;
background: linear-gradient(180deg, #A8B2AF, #7E8987);
box-shadow: 0 10px 24px var(--gate-shadow);
}
.gate-fit-frame::before {
top: 0;
}
.gate-fit-frame::after {
bottom: 0;
}
.gate-fit-pill {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 14px;
border-radius: 999px;
font-family: var(--font-body);
font-weight: 500;
font-size: 12px;
line-height: 1.1;
white-space: nowrap;
z-index: 3;
}
.gate-fit-pill--large {
top: 59px;
left: -200px;
width: 180px;
min-height: 62px;
color: #FFFFFF;
background: var(--gate-block);
box-shadow: 0 6px 16px rgba(230, 93, 76, 0.28);
animation: gate-fit-block 6.5s ease-in-out infinite;
}
.gate-fit-pill--large::after,
.gate-task--blocked::after {
content: "";
position: absolute;
right: -11px;
top: 50%;
width: 18px;
height: 18px;
border: 2px solid rgba(217, 132, 106, 0.85);
border-radius: 999px;
transform: translateY(-50%) scale(0.7);
opacity: 0;
pointer-events: none;
}
.gate-fit-pill--large::after {
animation: gate-impact-pulse 6.5s ease-in-out infinite;
}
.gate-fit-pill--small {
top: 76px;
left: -136px;
width: 116px;
min-height: 30px;
color: var(--gate-cream);
background: #FFFFFF;
border: 1.5px solid var(--gate-mint-deep);
box-shadow: 0 4px 12px rgba(58, 46, 38, 0.10);
animation: gate-fit-pass 6.5s ease-in-out infinite;
}
@keyframes gate-fit-block {
0%, 8% { left: -200px; opacity: 0; }
18% { opacity: 1; }
45% { left: calc(78% - 236px); opacity: 1; }
52% { left: calc(78% - 266px); }
62% { left: calc(78% - 236px); }
72%, 100% { left: -200px; opacity: 0; }
}
@keyframes gate-fit-pass {
0%, 56% { left: -136px; opacity: 0; }
62% { opacity: 1; }
70% { left: calc(78% - 164px); opacity: 1; }
84% { left: calc(78% + 78px); opacity: 1; }
100% { left: calc(100% + 20px); opacity: 0; }
}
@keyframes gate-impact-pulse {
0%, 42% { opacity: 0; transform: translateY(-50%) scale(0.7); }
49% { opacity: 1; transform: translateY(-50%) scale(1); }
66%, 100% { opacity: 0; transform: translateY(-50%) scale(1.65); }
}
.gate-statement--compare {
font-size: 26px;
line-height: 1.24;
}
.gate-statement--narrow-lead {
font-size: 26px;
line-height: 1.24;
}
.gate-example {
display: block;
margin: 9px 0 12px 0;
color: var(--gate-accent);
}
.gate-example--inline {
display: inline;
margin: 0;
white-space: nowrap;
}
.gate-compare-visual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.gate-compare-visual--single {
grid-template-columns: 1fr;
}
.gate-case {
min-height: 218px;
padding: 12px 9px 10px 9px;
border: 1px solid var(--gate-border);
border-radius: 8px;
background: var(--gate-surface);
overflow: hidden;
}
.gate-compare-visual--single .gate-case {
min-height: 226px;
}
.gate-compare-visual--single .gate-track {
height: 180px;
}
.gate-case-label {
display: inline-flex;
padding: 5px 8px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--gate-cream);
background: var(--gate-cream-soft);
}
.gate-track {
position: relative;
height: 174px;
margin-top: 8px;
}
.gate-portal {
position: absolute;
left: 64%;
transform: translateX(-50%);
z-index: 4;
}
.gate-case--wide .gate-portal {
width: 128px;
height: 110px;
top: 44px;
}
.gate-case--narrow .gate-portal {
left: 66%;
width: 86px;
height: 64px;
top: 60px;
}
.gate-portal i,
.gate-refusal__door i {
position: absolute;
left: 0;
width: 100%;
height: 8px;
border-radius: 999px;
background: linear-gradient(180deg, #A8B2AF, #7E8987);
}
.gate-portal i:first-child,
.gate-refusal__door i:first-child { top: 0; }
.gate-portal i:last-child,
.gate-refusal__door i:last-child { bottom: 0; }
.gate-task {
position: absolute;
left: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
width: 104px;
max-width: none;
padding: 6px 9px;
border-radius: 999px;
font-family: var(--font-body);
font-weight: 500;
font-size: 10px;
line-height: 1.12;
text-align: center;
color: #FFFFFF;
background: var(--gate-accent);
box-shadow: 0 6px 14px var(--gate-shadow);
z-index: 3;
}
.gate-task--wide-main {
top: 82px;
left: -142px;
width: 122px;
min-height: 34px;
color: var(--gate-cream);
background: #FFFFFF;
border: 1.5px solid var(--gate-mint-deep);
box-shadow: 0 4px 12px rgba(58, 46, 38, 0.10);
animation: gate-wide-pass 7s ease-in-out infinite;
}
.gate-task--blocked {
top: 54px;
left: -148px;
width: 128px;
min-height: 70px;
color: #FFFFFF;
background: var(--gate-block);
animation: gate-block 7.5s ease-in-out infinite;
}
.gate-task--small {
left: -160px;
width: 140px;
min-height: 32px;
padding: 4px 8px;
font-size: 9px;
line-height: 1.15;
color: var(--gate-cream);
background: #FFFFFF;
border: 1.5px solid var(--gate-mint-deep);
box-shadow: 0 4px 12px rgba(58, 46, 38, 0.10);
}
.gate-task--small-1 {
top: 78px;
animation: gate-narrow-pass 7.5s ease-in-out infinite;
}
.gate-task--small-2 {
top: 78px;
animation: gate-narrow-pass 7.5s ease-in-out 2.6s infinite;
}
.gate-task--blocked::after {
animation: gate-impact-pulse 7.5s ease-in-out infinite;
}
@keyframes gate-wide-pass {
0%, 6% { left: -142px; opacity: 0; }
14% { opacity: 1; }
44% { left: calc(64% - 200px); opacity: 1; }
56% { left: calc(64% - 61px); opacity: 1; }
66% { left: calc(64% - 61px); opacity: 1; }
84% { left: calc(64% + 80px); opacity: 1; }
96%, 100% { left: calc(100% + 20px); opacity: 0; }
}
@keyframes gate-block {
0%, 10% { left: -148px; opacity: 0; }
22% { opacity: 1; }
46% { left: calc(66% - 171px); opacity: 1; }
56% { left: calc(66% - 199px); }
68% { left: calc(66% - 171px); }
78%, 100% { left: -148px; opacity: 0; }
}
@keyframes gate-narrow-pass {
0%, 50% { left: -160px; opacity: 0; }
58% { opacity: 1; }
68% { left: calc(66% - 150px); opacity: 1; }
78% { left: calc(66% - 70px); opacity: 1; }
82% { left: calc(66% - 70px); opacity: 1; }
92% { left: calc(66% + 20px); opacity: 1; }
100% { left: calc(100% + 20px); opacity: 0; }
}
.gate-refusal {
position: relative;
height: 190px;
border: 1px solid var(--gate-border);
border-radius: 8px;
background:
linear-gradient(90deg, rgba(230, 93, 76, 0.10), rgba(217, 132, 106, 0.04)),
var(--gate-surface);
overflow: hidden;
}
.gate-refusal__task {
position: absolute;
top: 67px;
left: -238px;
display: inline-flex;
align-items: center;
height: 76px;
width: 218px;
justify-content: center;
padding: 0 14px;
border-radius: 999px;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
color: #FFFFFF;
background: var(--gate-block);
animation: gate-final-block 6.5s ease-in-out infinite;
}
.gate-refusal__door {
position: absolute;
top: 78px;
left: 84%;
width: 88px;
height: 54px;
transform: translateX(-50%);
z-index: 4;
}
.gate-refusal__spark {
position: absolute;
top: 96px;
left: calc(84% - 56px);
width: 18px;
height: 18px;
border: 2px solid var(--gate-block);
transform: rotate(45deg);
opacity: 0;
animation: gate-spark 6.5s ease-in-out infinite;
}
@keyframes gate-final-block {
0%, 16% { left: -238px; opacity: 0; }
30% { opacity: 1; }
58% { left: calc(84% - 262px); opacity: 1; }
66% { left: calc(84% - 292px); }
76% { left: calc(84% - 262px); }
90%, 100% { left: -238px; opacity: 0; }
}
@keyframes gate-spark {
0%, 54% { transform: scale(0.7) rotate(45deg); opacity: 0; }
60% { transform: scale(1) rotate(45deg); opacity: 1; }
74%, 100% { transform: scale(1.45) rotate(45deg); opacity: 0; }
}
.gate-statement--final {
font-size: 26px;
}
.gate-footer-controls {
width: 100%;
max-width: 240px;
display: grid;
grid-template-columns: 56px 1fr 56px;
align-items: center;
justify-items: center;
}
.gate-progress-pill {
justify-self: start;
padding: 7px 9px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--gate-text-muted);
background: var(--gate-cream-soft);
}
.gate-arrow-button {
grid-column: 2;
width: 64px;
height: 64px;
border: none;
border-radius: 50%;
background: var(--gate-accent);
color: #FFFFFF;
cursor: pointer;
box-shadow: 0 12px 28px rgba(217, 132, 106, 0.30), 0 0 0 6px rgba(217, 132, 106, 0.08);
transition: transform 180ms ease, background 220ms ease, color 220ms ease;
}
.gate-arrow-button:active {
transform: scale(0.94);
}
.gate-arrow-button svg {
width: 25px;
height: 25px;
fill: none;
stroke: currentColor;
stroke-width: 2.25;
stroke-linecap: round;
stroke-linejoin: round;
}
.gate-arrow-button--final svg {
transform: rotate(-90deg);
}
/* --- Personalized task-gate calibration sequence --- */
.task-gate-sequence-screen {
background:
radial-gradient(circle at 84% 8%, rgba(217, 132, 106, 0.08), rgba(217, 132, 106, 0) 32%),
var(--color-background);
}
.task-gate-content {
padding-bottom: 148px;
}
.task-gate-panel {
min-height: calc(100vh - 8px);
min-height: calc(100dvh - 8px);
display: flex;
flex-direction: column;
justify-content: center;
gap: 22px;
padding: 34px 0 112px 0;
}
.task-gate-heading {
margin: 0;
font-family: var(--font-heading);
font-weight: 600;
font-size: 31px;
line-height: 1.1;
color: var(--gate-cream);
letter-spacing: 0;
}
.task-gate-heading strong,
.task-gate-highlight,
.task-gate-final-copy strong {
color: var(--gate-accent);
}
.task-gate-heading--diagnosis {
font-size: 28px;
line-height: 1.15;
}
.task-gate-heading--duration {
font-size: 30px;
line-height: 1.12;
}
.task-gate-heading--contrast {
font-size: 28px;
line-height: 1.15;
}
.task-gate-heading--explanation {
font-size: 30px;
line-height: 1.12;
}
.task-gate-heading--question {
font-size: 28px;
}
.task-gate-heading--offer {
font-size: 26px;
line-height: 1.15;
}
.task-gate-highlight {
word-break: break-word;
}
.task-gate-visual,
.task-gate-threshold-visual,
.task-gate-shrink-card,
.task-gate-time-card,
.task-gate-phone-visual {
border: 1px solid var(--gate-border);
border-radius: 8px;
background: var(--gate-surface);
}
.task-gate-visual {
height: 186px;
overflow: hidden;
}
.task-gate-track {
position: relative;
height: 100%;
}
.task-gate-door,
.task-gate-threshold-door {
position: absolute;
z-index: 4;
}
.task-gate-door {
top: 66px;
left: 74%;
width: 86px;
height: 54px;
transform: translateX(-50%);
}
.task-gate-door i,
.task-gate-threshold-door i {
position: absolute;
left: 0;
width: 100%;
height: 8px;
border-radius: 999px;
background: linear-gradient(180deg, #A8B2AF, #7E8987);
box-shadow: 0 8px 18px var(--gate-shadow);
}
.task-gate-door i:first-child,
.task-gate-threshold-door i:first-child {
top: 0;
}
.task-gate-door i:last-child,
.task-gate-threshold-door i:last-child {
bottom: 0;
}
.task-gate-pill {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 11px;
border-radius: 999px;
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
line-height: 1.12;
text-align: center;
z-index: 3;
}
.task-gate-pill--blocked {
top: 55px;
left: -176px;
width: 156px;
min-height: 70px;
color: #FFFFFF;
background: var(--gate-block);
box-shadow: 0 6px 16px rgba(230, 93, 76, 0.28);
animation: task-gate-block 5.6s ease-in-out infinite;
}
.task-gate-pill--blocked::after {
content: "";
position: absolute;
right: -11px;
top: 50%;
width: 18px;
height: 18px;
border: 2px solid rgba(217, 132, 106, 0.85);
border-radius: 999px;
transform: translateY(-50%) scale(0.7);
opacity: 0;
animation: gate-impact-pulse 5.6s ease-in-out infinite;
}
.task-gate-pill--fit {
top: 78px;
left: -128px;
width: 108px;
min-height: 30px;
color: var(--gate-cream);
background: #FFFFFF;
border: 1.5px solid var(--gate-mint-deep);
box-shadow: 0 4px 12px rgba(58, 46, 38, 0.10);
animation: task-gate-pass 5.6s ease-in-out infinite;
}
@keyframes task-gate-block {
0%, 10% { left: -176px; opacity: 0; }
22% { opacity: 1; }
48% { left: calc(74% - 198px); opacity: 1; }
56% { left: calc(74% - 226px); }
66% { left: calc(74% - 198px); }
74%, 100% { left: -176px; opacity: 0; }
}
@keyframes task-gate-pass {
0%, 58% { left: -128px; opacity: 0; }
66% { opacity: 1; }
76% { left: calc(74% - 130px); opacity: 1; }
90% { left: calc(74% + 56px); opacity: 1; }
100% { left: calc(100% + 20px); opacity: 0; }
}
.task-gate-meaning,
.task-gate-copy-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
.task-gate-list-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--gate-text-muted);
text-transform: uppercase;
letter-spacing: 0;
}
.task-gate-bullets {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.task-gate-bullets li {
position: relative;
padding-left: 22px;
font-family: var(--font-body);
font-weight: 700;
font-size: 16px;
line-height: 1.35;
color: var(--gate-cream);
}
.task-gate-bullets li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gate-accent);
box-shadow: 0 0 0 4px rgba(217, 132, 106, 0.12);
}
/* Narrow-action-gate intro screen — recolor the "narrow action gate" strong
and the bullet dots to the same alarm red used on the next (duration)
screen, so the diagnosis reads consistently across the sequence. Bullet
text stays cream. Scoped to --intro so other gate panels keep their teal
accent. */
.task-gate-panel--intro .task-gate-heading strong {
color: #C84431;
}
.task-gate-panel--intro .task-gate-bullets li::before {
background: #C84431;
box-shadow: 0 0 0 4px rgba(230, 93, 76, 0.14);
}
.task-gate-time-card {
padding: 18px 18px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.task-gate-time-label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0;
text-transform: uppercase;
color: var(--gate-text-muted);
}
.task-gate-time-value {
font-family: var(--font-heading);
font-weight: 600;
font-size: 40px;
line-height: 1;
color: var(--gate-accent);
}
.task-gate-copy-stack p {
margin: 0;
font-family: var(--font-body);
font-weight: 700;
font-size: 16px;
line-height: 1.42;
color: var(--gate-cream);
}
.task-gate-copy-stack strong {
color: var(--gate-accent);
}
.task-gate-copy-muted {
color: var(--gate-text-muted) !important;
font-weight: 600 !important;
}
.task-gate-calibration-line {
color: var(--gate-accent) !important;
}
/* --- Screen 1 of 3: duration ---
Red-tinted variant of the task-gate sequence. Light cream/blush wash;
the kicker and duration phrase pick up the alarm-red. Single emotional
beat — no card, no copy. */
.task-gate-duration-screen {
background:
radial-gradient(circle at 84% 8%, rgba(230, 93, 76, 0.12), rgba(230, 93, 76, 0) 32%),
linear-gradient(180deg, rgba(230, 93, 76, 0.06) 0%, rgba(247, 241, 229, 1) 60%),
var(--color-background);
}
.task-gate-duration-screen .gate-kicker--alarm {
border-color: rgba(230, 93, 76, 0.42);
color: #C84431;
background: rgba(230, 93, 76, 0.10);
}
.task-gate-heading--duration .task-gate-highlight--alarm {
color: #C84431;
}
.task-gate-duration-emph {
color: #C84431;
}
/* --- Screen 2 of 3: contrast bars ---
Long red bar (carried/dread) over short green bar (actual time). Widths
are not proportional — real ratio is ~1000× — so labels carry the numbers
and bars carry the disproportion as feeling. Animations stagger so the
weight "accumulates" before the small green bar lands. */
.task-gate-bars {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 8px;
}
.task-gate-bar-row {
display: flex;
flex-direction: column;
gap: 8px;
}
.task-gate-bar-track {
width: 100%;
height: 24px;
background: var(--gate-cream-soft);
border: 1px solid var(--gate-border);
border-radius: 999px;
overflow: hidden;
}
.task-gate-bar {
height: 100%;
border-radius: 999px;
width: 0;
}
.task-gate-bar--carried {
background: linear-gradient(90deg, var(--gate-block) 0%, #B73C2C 100%);
box-shadow: 0 4px 14px rgba(230, 93, 76, 0.28);
animation:
task-gate-bar-grow-long 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) 600ms forwards,
task-gate-bar-breathe 3.2s ease-in-out 2200ms infinite;
}
.task-gate-bar--doing {
background: linear-gradient(90deg, var(--gate-accent) 0%, var(--gate-mint-deep) 100%);
box-shadow: 0 2px 8px rgba(217, 132, 106, 0.30);
animation: task-gate-bar-grow-short 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 2300ms forwards;
}
.task-gate-bar-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
line-height: 1.3;
padding-left: 4px;
opacity: 0;
}
.task-gate-bar-label--carried {
color: #C84431;
animation: task-gate-bar-fade-in 500ms ease-out 1900ms forwards;
}
.task-gate-bar-label--doing {
color: var(--gate-mint-deep);
animation: task-gate-bar-fade-in 500ms ease-out 2500ms forwards;
}
@keyframes task-gate-bar-grow-long {
from { width: 0; }
to { width: 96%; }
}
@keyframes task-gate-bar-grow-short {
from { width: 0; }
to { width: 6%; }
}
@keyframes task-gate-bar-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes task-gate-bar-breathe {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.08); }
}
.task-gate-breakdown-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.task-gate-breakdown-topline .gate-kicker {
margin: 0;
}
.task-gate-level-note {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--gate-text-muted);
text-transform: uppercase;
}
.task-gate-shrink-card {
padding: 14px 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.task-gate-shrink-label {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--gate-text-muted);
text-transform: uppercase;
}
.task-gate-shrink-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 8px;
}
.task-gate-pill-static {
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 10px;
border-radius: 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
line-height: 1.18;
text-align: center;
overflow-wrap: anywhere;
}
.task-gate-pill-static--task {
color: #FFFFFF;
background: var(--gate-block);
}
.task-gate-doable-task {
display: flex;
justify-content: flex-start;
margin-bottom: 14px;
}
.task-gate-doable-task .task-gate-pill-static--task {
display: inline-flex;
min-height: 0;
width: auto;
max-width: 100%;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
line-height: 1.2;
}
.task-gate-pill-static--step {
color: rgb(114, 114, 114);
background: var(--gate-surface);
border: 1px solid var(--gate-border-strong);
border-radius: 5px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 8px 10px 10px;
text-align: left;
min-height: 56px;
}
.task-gate-doable-step-emoji {
font-size: 22px;
line-height: 1;
}
.task-gate-doable-step-name {
font-family: var(--font-body);
font-weight: 500;
font-size: 18px;
line-height: 1.2;
color: #000000;
text-align: left;
overflow-wrap: anywhere;
}
.task-gate-doable-step-time {
font-family: var(--font-mono);
font-weight: 700;
font-size: 14px;
color: rgb(122, 122, 122);
white-space: nowrap;
}
.task-gate-shrink-arrow {
font-family: var(--font-heading);
font-weight: 600;
color: var(--gate-text-muted);
}
.task-gate-step-list,
.task-gate-threshold-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.task-gate-step {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
padding: 10px 12px;
border: 1px solid var(--gate-border);
border-radius: 8px;
background: var(--gate-surface);
}
.task-gate-step-num {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--gate-accent);
}
.task-gate-step-emoji {
font-size: 17px;
line-height: 1;
}
.task-gate-step-title {
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
line-height: 1.25;
color: var(--gate-cream);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.task-gate-step-time {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--gate-text-muted);
white-space: nowrap;
}
.task-gate-step--more {
display: block;
text-align: center;
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
color: var(--gate-accent);
}
.task-gate-breakdown-meta {
display: flex;
justify-content: space-between;
gap: 12px;
font-family: var(--font-mono);
font-size: 10.5px;
text-transform: uppercase;
color: var(--gate-text-muted);
}
.task-gate-loader {
color: var(--gate-cream);
}
.task-gate-loader .loader-pulse {
background: var(--gate-accent);
}
.task-gate-loader-text {
margin: 0;
font-family: var(--font-body);
font-weight: 700;
color: var(--gate-text-muted);
}
/* --- "Adapting..." interstitial between breakdown-doable calibration steps.
Shows for 2s after the user picks No/Maybe to suggest live personalization
before the next granularity level appears. */
.task-gate-adapting {
min-height: calc(100vh - 8px);
min-height: calc(100dvh - 8px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
padding: 42px 0 122px 0;
}
.task-gate-adapting-shimmer {
width: 260px;
max-width: 70vw;
display: flex;
flex-direction: column;
gap: 12px;
}
.task-gate-adapting-shimmer span {
display: block;
height: 14px;
border-radius: 8px;
background: linear-gradient(
90deg,
rgba(58, 46, 38, 0.08) 0%,
rgba(58, 46, 38, 0.18) 50%,
rgba(58, 46, 38, 0.08) 100%
);
background-size: 200% 100%;
animation: task-gate-adapting-shimmer 1.4s ease-in-out infinite;
}
.task-gate-adapting-shimmer span:nth-child(1) { width: 100%; }
.task-gate-adapting-shimmer span:nth-child(2) { width: 78%; animation-delay: 0.15s; }
.task-gate-adapting-shimmer span:nth-child(3) { width: 54%; animation-delay: 0.3s; }
@keyframes task-gate-adapting-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.task-gate-adapting-text {
margin: 0;
font-family: var(--font-heading);
font-weight: 500;
font-size: 18px;
letter-spacing: 0.02em;
color: var(--gate-text-muted);
}
.task-gate-adapting-dots span {
opacity: 0;
animation: task-gate-adapting-dot 1.2s infinite;
}
.task-gate-adapting-dots span:nth-child(1) { animation-delay: 0s; }
.task-gate-adapting-dots span:nth-child(2) { animation-delay: 0.2s; }
.task-gate-adapting-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes task-gate-adapting-dot {
0%, 80%, 100% { opacity: 0; }
40% { opacity: 1; }
}
.task-gate-answer-row {
width: 100%;
max-width: 356px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.task-gate-answer {
min-height: 54px;
border-radius: 999px;
border: 1px solid rgba(58, 46, 38, 0.15);
font-family: var(--font-heading);
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: transform 160ms ease, filter 160ms ease;
}
.task-gate-answer:active {
transform: scale(0.96);
}
.task-gate-answer--yes {
color: #FFFFFF;
background: #84A063; /* sage green — matches identity "Yes" */
border-color: transparent;
box-shadow: 0 4px 12px rgba(132, 160, 99, 0.30);
}
.task-gate-answer--no {
color: #FFFFFF;
background: #C2604A; /* terracotta red — matches identity "No" */
border-color: transparent;
box-shadow: 0 4px 12px rgba(194, 96, 74, 0.28);
}
.task-gate-answer--maybe {
color: #3A2E26; /* cocoa text on a neutral cream fill */
background: #FBF5EA;
}
.task-gate-threshold-visual {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 14px;
padding: 18px;
overflow: hidden;
}
.task-gate-original-task {
display: flex;
flex-direction: column;
gap: 4px;
padding: 13px 14px;
border-radius: 8px;
color: #FFFFFF;
background: var(--gate-block);
}
.task-gate-original-task span {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
}
.task-gate-original-task strong {
font-family: var(--font-heading);
font-weight: 600;
font-size: 17px;
line-height: 1.18;
overflow-wrap: anywhere;
}
.task-gate-threshold-door {
position: relative;
width: 94px;
height: 58px;
margin: -2px auto -2px;
}
.task-gate-threshold-door span {
position: absolute;
left: 50%;
top: 9px;
width: 24px;
height: 40px;
transform: translateX(-50%);
border-radius: 999px;
background: linear-gradient(180deg, rgba(217, 132, 106, 0.55), rgba(217, 132, 106, 0.10));
box-shadow: 0 0 28px rgba(217, 132, 106, 0.28);
}
.task-gate-threshold-step {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
padding: 11px 12px;
border-radius: 8px;
border: 1px solid var(--gate-border);
background: var(--gate-surface);
}
.task-gate-threshold-step span {
font-family: var(--font-mono);
font-size: 10px;
color: var(--gate-accent);
}
.task-gate-threshold-step b {
font-size: 18px;
line-height: 1;
}
.task-gate-threshold-step em {
font-family: var(--font-body);
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 1.25;
color: var(--gate-cream);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.task-gate-threshold-step small {
font-family: var(--font-mono);
font-size: 10px;
color: var(--gate-text-muted);
}
.task-gate-threshold-step--first {
border-color: rgba(217, 132, 106, 0.48);
background: rgba(217, 132, 106, 0.10);
}
.task-gate-threshold-step--locked em,
.task-gate-threshold-step--locked b {
filter: blur(6px);
user-select: none;
}
.task-gate-final-copy {
margin: 0;
font-family: var(--font-heading);
font-weight: 600;
font-size: 23px;
line-height: 1.2;
color: var(--gate-cream);
}
.task-gate-phone-visual {
padding: 12px;
display: flex;
justify-content: center;
}
.task-gate-phone-visual img {
width: 100%;
max-width: 300px;
max-height: 238px;
object-fit: contain;
display: block;
}
.task-gate-bullets--offer {
margin-top: 2px;
}
/* Tighter vertical rhythm on the gate-product-offer screen: the base
.task-gate-panel uses gap: 22px between every child, which made the
heading ↔ stat tile ↔ testimonials spacing feel airy. 12px keeps the
structure breathing without the gulf. */
.task-gate-panel--offer {
gap: 12px;
}
/* Gate-calibrated payoff screen: a single big checkmark icon over a one-line
confirmation. Centred vertically by the base .task-gate-panel flex layout. */
.task-gate-calibrated-icon {
display: flex;
justify-content: center;
}
.task-gate-calibrated-check {
width: 96px;
height: 96px;
fill: var(--gate-accent);
}
.task-gate-toolkit-illustration {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 6px;
overflow: visible;
}
.task-gate-toolkit-illustration img {
width: min(60vw, 250px);
max-width: min(60vw, 250px);
height: auto;
object-fit: contain;
display: block;
transform: scale(1.15);
transform-origin: center top;
}
.task-gate-comparison {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
gap: 10px;
padding: 0;
border: 0;
background: transparent;
}
.task-gate-comparison-side {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
flex: 1 1 0;
}
/* Label at the top, card pinned to the bottom — so the small card's bottom
edge sits flush with the bottom of the big-task card next to it. */
.task-gate-comparison-side--small {
justify-content: space-between;
}
.task-gate-comparison-label {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
color: var(--gate-text-muted);
letter-spacing: 0.04em;
}
.task-gate-comparison-big-task {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px 12px;
border-radius: 8px;
background: var(--gate-block);
color: #FFFFFF;
min-height: 140px;
flex: 1 1 auto;
}
.task-gate-comparison-big-task strong {
font-family: var(--font-heading);
font-weight: 600;
font-size: 18px;
line-height: 1.12;
overflow-wrap: anywhere;
}
.task-gate-comparison-arrow {
align-self: center;
flex: 0 0 auto;
width: 18px;
height: 14px;
background: var(--gate-accent);
clip-path: polygon(0 38%, 60% 38%, 60% 14%, 100% 50%, 60% 86%, 60% 62%, 0 62%);
opacity: 0.85;
margin: 0 2px;
}
.task-gate-comparison-tiny-task {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
text-align: left;
gap: 6px;
padding: 6px 8px;
border-radius: 5px;
background: var(--gate-surface);
border: 1px solid var(--gate-border-strong);
color: #000000;
min-height: 0;
flex: 0 0 auto;
}
.task-gate-comparison-tiny-task b {
font-size: 16px;
line-height: 1;
font-weight: 400;
flex: 0 0 auto;
}
.task-gate-comparison-tiny-task em {
font-family: var(--font-body);
font-style: normal;
font-size: 10px;
line-height: 1.15;
font-weight: 700;
color: #000000;
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.task-gate-primary-button {
grid-column: auto;
width: min(100%, 286px);
height: 62px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 22px;
font-family: var(--font-heading);
font-weight: 600;
font-size: 15px;
letter-spacing: 0;
}
.task-gate-primary-button svg {
width: 21px;
height: 21px;
flex: 0 0 auto;
}
@media (max-height: 700px) {
.gate-panel {
gap: 18px;
padding-top: 26px;
padding-bottom: 104px;
}
.gate-statement--hero {
font-size: 31px;
}
.gate-statement--gate p,
.gate-statement--body {
font-size: 25px;
}
.gate-statement--compare {
font-size: 22px;
}
.gate-compare-visual {
gap: 8px;
}
.gate-case {
min-height: 188px;
}
.gate-track {
height: 146px;
}
.gate-compare-visual--single .gate-case {
min-height: 198px;
}
.gate-compare-visual--single .gate-track {
height: 152px;
}
.gate-case--wide .gate-portal {
height: 96px;
top: 38px;
}
.gate-case--narrow .gate-portal {
height: 56px;
top: 54px;
}
.gate-task--wide-main {
top: 69px;
}
.gate-task--small-1,
.gate-task--small-2 {
top: 68px;
}
}
/* Legacy education-content rules below still apply to the post-loading
transformation/testimonials screens, which keep eyebrow + heading + body. */
.education-content .text-heading-large {
font-size: 26px;
}
.education-content .education-illustration {
margin-top: 18px !important;
}
.education-content .education-body {
margin-top: 18px !important;
}
.eyebrow {
font-family: var(--font-body);
font-weight: 500;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 12px;
}
/* Shared education body text (mechanism, transformation intro, etc.) */
.education-body {
font-family: var(--font-body);
font-weight: 500;
font-size: 18px;
color: rgba(0, 0, 0, 0.85);
line-height: 1.55;
white-space: pre-line;
}
.education-body strong {
color: var(--color-secondary);
font-weight: 500;
}
.education-illustration {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #F6F4EC;
border: 1.5px solid rgba(217, 132, 106, 0.3);
border-radius: var(--radius-large);
padding: 12px;
}
.education-illustration svg,
.education-illustration img {
width: 100%;
max-width: 200px;
height: auto;
display: block;
}
/* Preserve text line-breaks in large headings (both mechanism + transformation) */
.education-content .text-heading-large {
white-space: pre-line;
}
/* --- Diagnosis mechanism (on results-bad) --- */
.diagnosis-mechanism {
padding: 16px 18px;
border-left: 3px solid var(--color-primary);
background: var(--color-primary-container);
border-radius: var(--radius-card);
}
.diagnosis-mechanism-label {
font-family: var(--font-body);
font-weight: 500;
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 6px;
}
.diagnosis-mechanism-body {
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
color: rgba(0, 0, 0, 0.78);
line-height: 1.5;
}
/* --- Transformation (before/after) --- */
.transform-block {
padding: 14px 16px;
border-radius: var(--radius-large);
background: var(--color-surface);
}
.transform-before {
border: 1.5px solid rgba(176, 0, 32, 0.15);
}
.transform-after {
border: 1.5px solid rgba(217, 132, 106, 0.3);
background: var(--color-primary-container);
}
.transform-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.transform-emoji {
font-size: 22px;
line-height: 1;
}
.transform-label {
font-family: var(--font-body);
font-weight: 500;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color-body-medium);
}
.transform-after .transform-label {
color: var(--color-primary);
}
.transform-list {
list-style: none;
padding: 0;
margin: 0;
}
.transform-list li {
position: relative;
padding-left: 20px;
padding-top: 3px;
padding-bottom: 3px;
font-family: var(--font-body);
font-weight: 500;
font-size: 13.5px;
color: rgba(0, 0, 0, 0.82);
line-height: 1.4;
}
.transform-before .transform-list li::before {
content: "×";
position: absolute;
left: 4px;
top: 1px;
color: #B00020;
font-weight: 600;
font-size: 18px;
}
.transform-after .transform-list li::before {
content: "✓";
position: absolute;
left: 2px;
top: 2px;
color: var(--color-primary);
font-weight: 600;
font-size: 15px;
}
/* --- Live AI Demo --- */
.demo-content {
padding-top: 20px;
padding-bottom: 180px;
}
.demo-heading {
font-size: 24px !important;
}
.demo-input-view {
display: flex;
flex-direction: column;
gap: 12px;
}
.demo-input {
width: 100%;
padding: 16px 18px;
border: 2px solid var(--color-border);
border-radius: var(--radius-card);
background: var(--color-surface);
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
color: var(--color-on-surface);
outline: none;
transition: border-color 0.2s ease;
-webkit-user-select: text;
user-select: text;
}
.demo-input:focus {
border-color: var(--color-primary);
}
.demo-input::placeholder {
color: var(--color-body-medium);
font-weight: 400;
}
.demo-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.demo-chip {
padding: 8px 14px;
border: 1px solid var(--color-primary);
background: transparent;
color: var(--color-primary);
border-radius: var(--radius-button);
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.demo-chip:active {
background: var(--color-primary);
color: var(--color-on-primary);
}
/* Small text "skip" link under the primary button (not a full-width btn) */
.demo-skip-link {
display: block;
width: 100%;
border: none;
background: none;
cursor: pointer;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
color: var(--color-body-medium);
text-decoration: underline;
text-underline-offset: 3px;
padding: 10px 0 4px 0;
text-align: center;
}
.demo-skip-link:active {
opacity: 0.6;
}
.demo-thinking {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 80px 0;
}
.demo-thinking-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-primary);
animation: demo-pulse 1.2s ease-in-out infinite;
}
.demo-thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.demo-thinking-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes demo-pulse {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
40% { transform: scale(1); opacity: 1; }
}
/* Results view: clean pill + dense step list, no card wrapper noise */
.demo-results-view {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 24px;
}
.demo-task-label {
align-self: flex-start;
padding: 6px 12px;
background: var(--color-primary-container);
border-radius: var(--radius-button);
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
color: var(--color-primary);
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.demo-results-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.demo-results-step {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
opacity: 0;
animation: fadeInUp 0.35s ease forwards;
}
.demo-step-emoji {
font-size: 18px;
flex-shrink: 0;
width: 22px;
text-align: center;
}
.demo-step-text {
flex: 1;
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
color: rgba(0, 0, 0, 0.88);
line-height: 1.3;
}
.demo-step-time {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
color: var(--color-body-medium);
flex-shrink: 0;
}
.demo-results-more {
font-family: var(--font-body);
font-weight: 600;
font-size: 12px;
color: var(--color-body-medium);
text-align: center;
padding: 4px 0;
}
/* --- Pre-paywall "generating" screen ---------------------------------- */
.prepay-content {
padding-top: 24px;
gap: 0;
}
.prepay-panel {
display: flex;
flex-direction: column;
gap: 20px;
padding: 24px 20px 28px;
}
.prepay-locked-reveal {
opacity: 0;
transform: translateY(12px);
transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.prepay-locked-reveal.is-revealed {
opacity: 1;
transform: translateY(0);
}
.prepay-locked-more {
margin-top: 10px;
text-align: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gate-text-muted);
}
.btn--prepay-reveal {
opacity: 0;
transform: translateY(8px);
transition: opacity 380ms ease, transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn--prepay-reveal.is-revealed {
opacity: 1;
transform: translateY(0);
}
.prepay-bullet-list {
list-style: none;
margin: 0;
padding: 4px 2px 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.prepay-bullet {
display: flex;
align-items: flex-start;
gap: 10px;
opacity: 0;
transform: translateY(4px);
transition: opacity 280ms ease, transform 280ms ease;
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
line-height: 1.3;
color: #000000;
}
.prepay-bullet.is-visible {
opacity: 1;
transform: translateY(0);
}
.prepay-bullet-check {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 1px;
fill: #000000;
opacity: 0;
transform: scale(0.6);
transition: opacity 200ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.prepay-bullet.is-done .prepay-bullet-check {
opacity: 1;
transform: scale(1);
}
/* Shimmering text while bullet is loading. Uses background-clip:text so the
sheen moves across the actual glyphs rather than a pill. */
.prepay-bullet-text {
display: inline-block;
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.prepay-bullet.is-loading .prepay-bullet-text {
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.30) 0%,
rgba(0, 0, 0, 0.95) 50%,
rgba(0, 0, 0, 0.30) 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: prepay-shimmer 1.2s linear infinite;
}
@keyframes prepay-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.prepay-bullet-dots span {
opacity: 0;
animation: prepay-dot 1.2s infinite;
}
.prepay-bullet-dots span:nth-child(2) { animation-delay: 0.2s; }
.prepay-bullet-dots span:nth-child(3) { animation-delay: 0.4s; }
.prepay-bullet.is-done .prepay-bullet-dots {
display: none;
}
@keyframes prepay-dot {
0%, 60%, 100% { opacity: 0; }
30% { opacity: 1; }
}
/* --- Cleaning Personality Profile (cleaning variant, screen 42b) ---
Clinical-style report card. Lives in the action-gate visual world (light
mint background, dark-teal text, brand teal accents). Layout is
header → archetype hero → 3-dim table → severity meter → optional risk
callout, stacked in a single white card. */
.cleaning-profile-screen {
background: var(--color-background);
}
/* Suppress the action-gate grid overlay on this screen — the overlay is a
fixed teal-tinted grid that tints every "neutral" card on top of it,
which fights the clinical/report-card aesthetic and makes neutral grays
read as warm/teal. */
.cleaning-profile-screen.action-gate-screen::before {
display: none;
}
.cleaning-profile-content {
padding-bottom: 148px;
}
.cleaning-profile-panel {
gap: 18px;
padding: 8px 0 112px 0;
justify-content: flex-start;
text-align: center;
}
.cleaning-profile-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 0 4px;
}
.cleaning-profile-eyebrow {
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gate-accent);
margin: 0;
}
.cleaning-profile-title {
margin: 0;
font-family: var(--font-heading);
font-weight: 600;
font-size: 28px;
line-height: 1.1;
color: var(--gate-cream);
letter-spacing: -0.01em;
}
.cleaning-profile-headline {
margin: 0;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.42;
color: var(--gate-text-muted);
max-width: 30ch;
}
.cleaning-profile-card {
background: var(--gate-surface);
border: 1px solid var(--gate-border);
border-radius: var(--radius-large);
box-shadow: 0 10px 30px rgba(58, 46, 38, 0.08);
padding: 22px 18px 20px;
display: flex;
flex-direction: column;
gap: 22px;
text-align: left;
}
.cleaning-profile-archetype {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 14px;
background: #F7F7F8;
border-radius: var(--radius-large);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.cleaning-profile-archetype-icon {
width: 52px;
height: 52px;
flex: 0 0 52px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
border-radius: 16px;
background: #EDEDF0;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.cleaning-profile-archetype-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.cleaning-profile-archetype-label {
font-family: var(--font-heading);
font-weight: 600;
font-size: 19px;
line-height: 1.15;
color: var(--gate-cream);
letter-spacing: -0.01em;
}
.cleaning-profile-archetype-tagline {
font-family: var(--font-body);
font-size: 13.5px;
line-height: 1.35;
color: var(--gate-text-muted);
}
.cleaning-profile-dims {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.cleaning-profile-dim {
display: flex;
align-items: center;
gap: 14px;
}
.cleaning-profile-dim-icon {
width: 40px;
height: 40px;
flex: 0 0 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
border-radius: 12px;
background: var(--gate-surface-soft);
border: 1px solid var(--gate-border);
}
.cleaning-profile-dim-text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.cleaning-profile-dim-label {
font-family: var(--font-body);
font-size: 13px;
color: var(--gate-text-muted);
letter-spacing: 0;
}
.cleaning-profile-dim-value {
font-family: var(--font-heading);
font-weight: 600;
font-size: 17px;
color: var(--gate-cream);
display: inline-flex;
align-items: center;
gap: 4px;
letter-spacing: -0.01em;
}
.cleaning-profile-dim-chevron {
width: 16px;
height: 16px;
color: var(--gate-accent);
flex-shrink: 0;
}
.cleaning-profile-dim-value.is-low {
color: var(--gate-mint-deep);
}
.cleaning-profile-dim-value.is-low .cleaning-profile-dim-chevron {
color: var(--gate-mint-deep);
transform: rotate(180deg);
}
.cleaning-profile-dim-value.is-mid {
color: #C77A1F;
}
.cleaning-profile-dim-value.is-mid .cleaning-profile-dim-chevron {
color: #C77A1F;
}
.cleaning-profile-dim-value.is-high {
color: #D44A30;
}
.cleaning-profile-dim-value.is-high .cleaning-profile-dim-chevron {
color: #D44A30;
}
.cleaning-profile-dim-value.is-very-high {
color: var(--gate-block);
}
.cleaning-profile-dim-value.is-very-high .cleaning-profile-dim-chevron {
color: var(--gate-block);
}
.cleaning-profile-dim-value--type {
color: var(--color-secondary);
}
.cleaning-profile-meter {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 6px;
}
.cleaning-profile-meter-track {
position: relative;
height: 12px;
border-radius: 999px;
margin: 22px 0 4px;
}
.cleaning-profile-meter-bar {
position: absolute;
inset: 0;
border-radius: 999px;
background: linear-gradient(
to right,
#6FC9C0 0%,
#C7E0A6 30%,
#F4D27A 58%,
#F19A6B 82%,
#E65D4C 100%
);
opacity: 0.85;
}
.cleaning-profile-meter-dot {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
}
.cleaning-profile-meter-bubble {
font-family: var(--font-heading);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.02em;
color: #FFFFFF;
background: var(--color-secondary);
padding: 5px 9px;
border-radius: 6px;
white-space: nowrap;
position: absolute;
bottom: 18px;
box-shadow: 0 2px 8px rgba(58, 46, 38, 0.25);
}
.cleaning-profile-meter-bubble::after {
content: "";
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: var(--color-secondary);
}
.cleaning-profile-meter-pin {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-surface);
border: 3px solid var(--color-secondary);
box-shadow: 0 2px 6px rgba(58, 46, 38, 0.25);
}
.cleaning-profile-meter-labels {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
color: var(--gate-text-muted);
}
.cleaning-profile-meter-labels li {
text-align: center;
}
.cleaning-profile-meter-labels li:first-child { text-align: left; }
.cleaning-profile-meter-labels li:last-child { text-align: right; }
.cleaning-profile-risk {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border-radius: var(--radius-large);
background: rgba(230, 93, 76, 0.10);
color: #8C2A1E;
font-family: var(--font-body);
font-size: 13.5px;
line-height: 1.4;
}
.cleaning-profile-risk-icon {
width: 20px;
height: 20px;
flex: 0 0 20px;
color: var(--gate-block);
margin-top: 1px;
}
/* Personalize-intro "card + measuring tape" art (no mascot) — clip the painted
square into a rounded card with a soft shadow so its paper background reads
as an intentional card instead of a hard edge against the page cream. */
.toolkit-illustration.personalize-art {
width: min(74%, 300px);
margin: 6px auto 0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 2px 16px rgba(58, 46, 38, 0.10);
}
.toolkit-illustration.personalize-art img {
width: 100%;
max-width: 100%;
max-height: none;
height: auto;
display: block;
}
/* --- Comparison Table --- */
.comparison-table {
border-radius: var(--radius-large);
overflow: hidden;
border: 1px solid var(--color-border);
background: var(--color-surface);
}
.comparison-row {
display: grid;
grid-template-columns: 1.6fr 0.9fr 0.9fr 0.9fr 0.9fr;
align-items: stretch;
border-bottom: 1px solid var(--color-border);
}
.comparison-row:last-child {
border-bottom: none;
}
.comparison-header {
background: var(--color-primary-container);
}
.comparison-feature {
padding: 12px 10px;
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
color: var(--color-on-surface);
line-height: 1.3;
display: flex;
align-items: center;
}
.comparison-header .comparison-feature {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-primary);
}
.comparison-col {
padding: 12px 6px;
font-family: var(--font-heading);
font-weight: 500;
font-size: 11px;
color: var(--color-body-medium);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.comparison-header .comparison-col {
font-size: 11px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.comparison-col.highlight {
background: rgba(217, 132, 106, 0.06);
color: var(--color-primary);
}
.comparison-header .comparison-col.highlight {
background: var(--color-primary);
color: var(--color-on-primary);
}
.comparison-icon {
width: 20px;
height: 20px;
}
.comparison-footer {
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
color: rgba(0, 0, 0, 0.72);
line-height: 1.5;
font-style: italic;
padding: 0 4px;
}
/* --- Benefit / product-proof screens --- */
.benefit-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 16px;
padding-bottom: 110px;
height: 100%;
}
.benefit-heading {
white-space: pre-line;
text-align: center;
font-size: 22px !important;
line-height: 1.2;
}
.benefit-sub {
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
color: var(--color-body);
line-height: 1.4;
text-align: center;
margin-top: 8px;
}
.benefit-mockup {
width: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin-top: 12px;
min-height: 0;
overflow: hidden;
}
.benefit-mockup img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: block;
object-fit: contain;
}
/* --- Testimonials --- */
.testimonials-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.testimonial-card {
padding: 18px;
background: var(--color-surface);
border-radius: var(--radius-large);
border: 1px solid var(--color-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.testimonial-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 600;
font-size: 16px;
color: var(--color-on-primary);
flex-shrink: 0;
}
.testimonial-name-block {
flex: 1;
min-width: 0;
}
.testimonial-name {
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
color: var(--color-on-surface);
line-height: 1.2;
}
.testimonial-context {
font-family: var(--font-body);
font-weight: 500;
font-size: 12px;
color: var(--color-body-medium);
margin-top: 2px;
line-height: 1.3;
}
.testimonial-stars {
display: flex;
gap: 1px;
flex-shrink: 0;
}
.star-icon {
width: 12px;
height: 12px;
}
.testimonial-quote {
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
line-height: 1.55;
font-style: italic;
}
.testimonial-stat {
text-align: center;
padding: 20px 16px;
background: var(--color-primary-container);
border-radius: var(--radius-large);
}
.testimonial-stat-number {
font-family: var(--font-heading);
font-weight: 600;
font-size: 32px;
color: var(--color-secondary);
line-height: 1;
}
.testimonial-stat-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
color: var(--color-primary);
margin-top: 6px;
}
/* --- Text-input Quiz Screen (avoided_task) --- */
/* Input is the primary answer surface — taller and with a stronger border so
it reads as an input field, not a button. Chips below are helper-style
"tap to fill" suggestions: rounded pills, light teal outline, transparent
fill, teal text. They never become a "selected" state — tapping just
populates the input. */
.task-input {
width: 100%;
height: 60px;
padding: 0 16px;
border: 1.5px solid rgba(0, 0, 0, 0.18);
border-radius: var(--radius-card);
font-family: var(--font-body);
font-weight: 600;
font-size: 17px;
background: var(--color-surface);
color: var(--color-on-surface);
outline: none;
transition: border-color 0.2s ease;
}
.task-input:focus {
border-color: var(--color-primary);
}
.text-bullets {
list-style: none;
padding: 0;
margin: 28px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.text-bullet {
display: flex;
align-items: flex-start;
gap: 10px;
}
.text-bullet-icon {
flex-shrink: 0;
display: inline-flex;
margin-top: 1px;
}
.text-bullet-icon .item-icon {
width: 20px;
height: 20px;
display: block;
}
.text-bullet-text {
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
line-height: 1.4;
color: rgba(0, 0, 0, 0.75);
}
.task-chips-label {
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
color: rgba(0, 0, 0, 0.55);
margin-top: 28px;
margin-bottom: 12px;
}
.task-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.task-chip {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 1.5px solid var(--color-primary-container);
border-radius: 999px;
padding: 8px 14px;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
color: var(--color-on-surface);
text-align: left;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.task-chip:hover {
border-color: var(--color-primary);
}
.task-chip:active {
background: var(--color-primary-container);
transform: scale(0.98);
}
/* --- Email Capture & Marketing Consent --- */
.email-capture-screen .screen-content {
text-align: center;
align-items: center;
padding-top: 0;
}
.email-illustration {
display: block;
width: 100%;
max-width: 180px;
aspect-ratio: 1 / 1;
margin: 0 auto 4px;
object-fit: contain;
}
.email-heading {
text-align: center;
}
.email-sub {
font-family: var(--font-body);
font-weight: 600;
font-size: 16px;
color: rgba(0, 0, 0, 0.7);
text-align: center;
margin-top: 6px;
margin-bottom: 4px;
line-height: 1.4;
}
.email-input {
width: 100%;
height: 52px;
padding: 0 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
font-family: var(--font-body);
font-weight: 600;
font-size: 16px;
background: var(--color-surface);
color: var(--color-on-surface);
outline: none;
text-align: center;
}
.email-input:focus {
border-color: var(--color-primary);
}
.email-trust {
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
color: rgba(0, 0, 0, 0.6);
text-align: center;
line-height: 1.4;
}
.consent-buttons {
display: flex;
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.text-link-secondary {
background: none;
border: none;
padding: 12px;
margin: 0 auto;
display: block;
font-family: var(--font-body);
font-weight: 700;
font-size: 14px;
color: rgba(0, 0, 0, 0.55);
text-decoration: underline;
cursor: pointer;
}
.text-link-secondary:hover {
color: rgba(0, 0, 0, 0.8);
}