:root { --pink: #E81F76; --pink-deep: #C21763; --pink-pale: #FDE3EE; --peach: #FFB27E; --ink: #1A1A1E; --gray-700: #5C5F66; --gray-100: #F1EFEF; --white: #FFFFFF; /* Rainbow accent set — decorative only, single reveal moment. Never general UI. */ --logo-orange: #F2552E; --logo-navy: #1E2A55; --logo-purple: #8B5CF6; --logo-teal: #22B8B0; /* Weight-status colors (reveal/bridge score buckets). Chosen to stay harmonious with the warm pink/peach palette — a fresh green, a warm amber, a deep warm red — deliberately NOT generic traffic-light hues. Mirrored in BUCKETS in app.js. */ --status-good: #26B673; /* healthy — fresh green */ --status-good-tint: #E4F6ED; --status-good-text: #1B8F5B; --status-warn: #F0A13A; /* slightly over/under — warm amber */ --status-warn-tint: #FDEFDC; --status-warn-text: #B9761A; --status-bad: #E14B2E; /* over/underweight — deep warm red */ --status-bad-tint: #FBE4DD; --status-bad-text: #BF3A20; /* --gray-700 only hits ~3.6:1 against the peach half of the gradient wash (fails WCAG AA 4.5:1 for normal text). Text sitting directly on the wash (not on a white card) uses this darker shade instead of the global token. */ --gray-on-wash: #43464C; } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } img, svg { display: block; max-width: 100%; } button, input { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } button:disabled { cursor: default; } a { color: inherit; text-decoration: none; } /* Every interactive element gets the same visible keyboard-focus ring. */ button:focus-visible, a:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; } /* Base typography */ body { font-family: 'Poppins', sans-serif; font-weight: 400; color: var(--ink); background: #FEF4F8; /* very pale tint of --pink-pale, page backdrop behind the phone frame */ } h1, h2, h3, h4 { font-family: 'Baloo 2', sans-serif; font-weight: 700; color: var(--ink); } p { color: var(--gray-700); line-height: 1.5; } /* Phone-frame container */ body { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 24px 16px; } #app { width: 100%; max-width: 430px; min-height: 640px; background: var(--white); border-radius: 28px; box-shadow: 0 20px 48px rgba(26, 26, 30, 0.12); overflow: hidden; position: relative; display: flex; flex-direction: column; } /* Screen transition system */ .screen { flex: 1; display: flex; flex-direction: column; padding: 32px 24px; } .screen-exit-active { --slide: -12px; animation: screen-out 180ms ease-in forwards; } .screen-enter-active { --slide: 16px; animation: screen-in 180ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes screen-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(var(--slide, 0)); } } @keyframes screen-in { from { opacity: 0; transform: translateY(var(--slide, 0)); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .screen-exit-active, .screen-enter-active { --slide: 0px; animation-duration: 120ms; animation-timing-function: linear; } } /* Kinetic Comic tap feedback: spiky burst badge that pops near a tapped choice card / chip / pill / CTA button, then fades. Fixed-positioned and appended to so it isn't clipped by #app's overflow:hidden. Skipped entirely (never created) under prefers-reduced-motion. */ .burst-badge { position: fixed; width: 46px; height: 46px; pointer-events: none; z-index: 999; transform: translate(-50%, -50%); animation: burst-pop 550ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .burst-badge svg { width: 100%; height: 100%; display: block; } @keyframes burst-pop { 0% { transform: translate(-50%, -50%) scale(0.2) rotate(-8deg); opacity: 0; } 45% { transform: translate(-50%, -50%) scale(1.15) rotate(4deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1) rotate(4deg); opacity: 0; } } /* Landing screen */ .headline { font-size: 28px; line-height: 1.25; margin-bottom: 12px; } .headline .accent { color: var(--pink); } /* Kinetic Comic: every headline pops in word by word with a bouncy overshoot. */ .headline .word { display: inline-block; opacity: 0; animation: word-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes word-pop { from { opacity: 0; transform: scale(0.4) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes word-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .headline .word { animation: word-fade 150ms ease forwards !important; animation-delay: 0ms !important; } } .subhead { font-size: 15px; margin-bottom: 32px; } .choice-list { display: flex; flex-direction: column; gap: 16px; } .choice-card { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px; border-radius: 20px; border: 2.5px solid var(--ink); background: var(--white); text-align: left; transition: background-color 150ms ease, opacity 150ms ease, transform 150ms ease; } .choice-card:active { transform: scale(0.98); } .choice-card.is-selected { background: var(--pink-pale); } .choice-card.is-dimmed { opacity: 0.5; } .choice-icon { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--pink-pale); color: var(--pink); } .choice-icon svg { width: 22px; height: 22px; } .choice-label { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; color: var(--ink); } /* Quiz progress bar */ .progress-bar { margin: -32px -24px 24px; height: 4px; background: var(--gray-100); flex: 0 0 auto; } .progress-bar-fill { height: 100%; background: var(--pink); border-radius: 0 4px 4px 0; transition: width 240ms ease-out; } /* Form fields */ .field-label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 8px; } .text-input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--gray-100); background: var(--white); font-size: 15px; margin-bottom: 20px; transition: border-color 150ms ease; } .text-input:focus { outline: none; border-color: var(--pink); } .text-input:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; } .input-row { position: relative; margin-bottom: 24px; } .input-row .text-input { margin-bottom: 0; padding-right: 48px; } .input-suffix { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--gray-700); font-weight: 600; font-size: 14px; } /* Breed search list — capped at 6 results by matchBreeds(), so max-height is sized to fit 6 rows without scrolling; overflow-y is just a safety net. */ .breed-list { max-height: 290px; overflow-y: auto; border: 2px solid var(--gray-100); border-radius: 14px; margin-bottom: 24px; } .breed-list:empty { border: none; margin-bottom: 0; } .breed-option { display: block; width: 100%; padding: 12px 16px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--gray-100); } .breed-option:last-child { border-bottom: none; } .breed-option.is-selected { background: var(--pink-pale); color: var(--pink-deep); font-weight: 600; } /* Body-check chip options (rib / waist / tuck) */ .chip-list { display: flex; flex-direction: column; gap: 14px; } .chip-option { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 16px; border-radius: 18px; border: 2.5px solid var(--ink); background: var(--white); text-align: left; transition: background-color 150ms ease, opacity 150ms ease, transform 150ms ease; } .chip-option:active { transform: scale(0.98); } .chip-option.is-selected { background: var(--pink-pale); } .chip-option.is-dimmed { opacity: 0.5; } /* Each chip shows one licensed reference photo (cropped from assets/bcs/, see README for provenance) matched to what that question actually asks — side view for rib/tuck, top-down for waist — rather than a repeated category icon. */ .chip-illustration { flex: 0 0 auto; display: flex; align-items: flex-end; } .chip-illustration img { height: auto; display: block; border-radius: 6px; flex: 0 0 auto; } .chip-view-side { width: 64px; } .chip-view-top { width: 42px; } .chip-text { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; } .chip-label { font-weight: 600; font-size: 15px; color: var(--ink); } .chip-desc { font-size: 13px; color: var(--gray-700); } /* Pill options (age / neuter) */ .pill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pill-option { border-radius: 999px; padding: 14px 16px; border: 2.5px solid var(--ink); background: var(--gray-100); color: var(--ink); font-weight: 600; font-size: 15px; text-align: center; transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease, transform 150ms ease; } .pill-option:active { transform: scale(0.97); } .pill-option.is-selected { background: var(--pink); color: var(--white); } .pill-option.is-dimmed { opacity: 0.5; } .pill-hint { display: block; font-size: 11px; font-weight: 500; opacity: 0.75; margin-top: 2px; } /* Primary CTA button */ .btn { display: block; width: 100%; border-radius: 999px; padding: 16px 24px; border: 2.5px solid var(--ink); font-weight: 600; font-size: 16px; text-align: center; margin-top: auto; transition: transform 150ms ease, background-color 150ms ease, color 150ms ease; } .btn-primary { background: var(--pink); color: var(--white); } .btn-primary:disabled { background: var(--gray-100); color: var(--gray-700); } .btn-primary:not(:disabled):active { transform: scale(0.98); } /* --- Reveal / bridge / payoff share the "result" gradient wash --- */ .screen.gradient-wash { background: linear-gradient(165deg, var(--pink-pale) 0%, var(--peach) 100%); align-items: center; text-align: center; } .gradient-wash .btn { margin-top: 22px; } .reveal-illustration { position: relative; width: 100%; max-width: 300px; margin: 6px auto 0; } .dog-svg { width: 100%; height: auto; display: block; transform-origin: center center; overflow: visible; } /* Small companion illustration, secondary to the main side-view hero above. */ .reveal-topdown { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 4px; } .reveal-topdown svg { width: 30px; height: auto; display: block; } .reveal-topdown-label { font-size: 12px; font-weight: 600; color: var(--gray-on-wash); } .score-badge { position: absolute; top: -6px; right: 0; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 54px; line-height: 1; color: var(--pink); /* --pink is mandated for this numeral, but it only tests ~3.6:1 against the peach half of the gradient (borderline for even large text). A soft white halo boosts real-world legibility without changing the brand color. */ text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 2px 0 rgba(255, 255, 255, 0.7); } .score-badge .score-max { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 600; color: var(--gray-on-wash); margin-left: 1px; } /* Confetti — the one place the four --logo- rainbow colors appear. */ .confetti-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; } .confetti-dot { position: absolute; top: 40%; left: 50%; width: 9px; height: 9px; border-radius: 50%; } .confetti-dot.square { border-radius: 2px; } /* Reference strip — 9 mini torsos, the dog's spot on the scale */ .ref-strip { display: flex; justify-content: center; align-items: flex-end; gap: 5px; width: 100%; margin: 18px 0 2px; } .ref-item { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1 1 0; max-width: 34px; opacity: 0.85; } .ref-item.is-current { opacity: 1; transform: translateY(-2px); } .ref-item svg { width: 100%; height: auto; display: block; } .ref-num { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; color: var(--gray-700); } /* Status pill + context */ .status-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 9px 18px; margin: 16px 0 10px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 18px; } .status-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; } .reveal-context { font-size: 14px; line-height: 1.55; color: var(--gray-on-wash); max-width: 322px; margin: 0 auto; } /* --- Bridge screen --- */ .stat-row { display: flex; align-items: center; gap: 10px; width: 100%; margin: 20px 0 4px; } .stat-card { flex: 1; background: var(--white); border-radius: 18px; padding: 18px 12px; text-align: center; box-shadow: 0 6px 16px rgba(26, 26, 30, 0.06); } .stat-label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-700); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .stat-value { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 28px; color: var(--ink); } .stat-unit { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-left: 2px; } .stat-connector { flex: 0 0 22px; height: 0; border-top: 2px dashed var(--gray-700); opacity: 0.35; } .locked-card { position: relative; width: 100%; border-radius: 20px; overflow: hidden; margin: 20px 0 4px; padding: 20px 20px 76px; text-align: left; background: linear-gradient(165deg, var(--pink-pale) 0%, var(--peach) 100%); } /* One real, specific number shown sharp (the hook) — then genuine plan copy that's blurred rather than abstract placeholder bars, so it reads as "real content, just locked" instead of empty skeleton loading. */ .locked-teaser { display: flex; flex-direction: column; gap: 14px; } .locked-row-label { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: 3px; } .locked-row-text { font-size: 13px; line-height: 1.4; color: var(--gray-on-wash); filter: blur(3px); opacity: 0.8; max-height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .locked-row-reveal { display: flex; align-items: baseline; gap: 8px; } .locked-row-reveal .locked-row-label { margin-bottom: 0; } .locked-row-value { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; color: var(--pink-deep); } .locked-row-unit { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: var(--gray-on-wash); margin-left: 2px; } .locked-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(to bottom, rgba(255, 178, 126, 0) 0%, var(--peach) 60%); } .locked-icon { flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--white); color: var(--pink); } .locked-icon svg { width: 15px; height: 15px; } .locked-label { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); } /* --- Email screen --- */ .helper-text { font-size: 12px; color: var(--gray-700); text-align: center; margin-top: 10px; } /* --- Loading screen --- */ .loading-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; } .loading-dog { width: 130px; } .loading-dog svg { animation: loading-bounce 900ms ease-in-out infinite; } @keyframes loading-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .loading-dog svg { animation: none; } } .loading-status { font-weight: 600; color: var(--ink); font-size: 15px; min-height: 20px; } /* --- Payoff screen --- */ .payoff-check { width: 64px; height: 64px; border-radius: 50%; background: var(--pink); color: var(--white); display: flex; align-items: center; justify-content: center; margin: 4px auto 18px; } .payoff-check svg { width: 30px; height: 30px; } .plan-list { display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 8px 0 6px; text-align: left; } .plan-card { display: flex; gap: 14px; background: var(--white); border-radius: 18px; padding: 16px; box-shadow: 0 6px 16px rgba(26, 26, 30, 0.06); } .plan-badge { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--pink-pale); color: var(--pink-deep); font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; } .plan-body { display: flex; flex-direction: column; gap: 4px; } .plan-title { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); } .plan-desc { font-size: 13px; line-height: 1.5; color: var(--gray-700); } .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 4px; font-size: 14px; font-weight: 600; color: var(--ink); text-align: left; } .toggle-track { flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px; background: var(--gray-100); position: relative; transition: background-color 150ms ease; } .toggle-track.is-on { background: var(--pink); } .toggle-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(26, 26, 30, 0.25); transition: transform 150ms ease; display: block; } .toggle-track.is-on .toggle-thumb { transform: translateX(18px); } /* CLAUDE.md explicitly allows one ghost/text-style link: retake, end of flow. */ .retake-link { display: block; text-align: center; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--gray-on-wash); text-decoration: underline; text-underline-offset: 2px; } /* --- Either/or divider between the email and WhatsApp fields --- */ .field-divider { display: flex; align-items: center; gap: 12px; margin: 2px 0 20px; color: var(--gray-700); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } .field-divider::before, .field-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-100); } /* --- WhatsApp number field (email/"send the plan" screen, either/or) --- */ .whatsapp-field { position: relative; margin-bottom: 20px; } .whatsapp-field .text-input { padding-left: 46px; margin-bottom: 0; } .whatsapp-prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 600; color: var(--gray-700); pointer-events: none; } /* Inline validation feedback — invisible/zero-height until populated, so it doesn't add a permanent gap when there's nothing to say. */ .field-error { font-size: 12px; font-weight: 600; color: var(--status-bad-text); margin-top: -12px; } .field-error:not(:empty) { margin-bottom: 16px; } /* --- App download CTA (payoff screen) — deliberately quieter than the plan cards above: smaller text, tighter padding, hairline divider to separate it from the primary "here's your plan" content. --- */ .app-cta-section { width: 100%; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(26, 26, 30, 0.1); text-align: center; } .app-cta-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-on-wash); margin-bottom: 4px; } .app-cta-line { font-size: 13px; color: var(--gray-on-wash); margin-bottom: 12px; } .app-cta-buttons { display: flex; gap: 8px; } .app-cta-btn { flex: 1; display: block; padding: 10px 8px; border-radius: 999px; border: 1.5px solid var(--ink); font-size: 12px; font-weight: 600; text-align: center; } .app-cta-btn-primary { background: var(--pink); color: var(--white); } .app-cta-btn-secondary { background: var(--gray-100); color: var(--ink); } /* --- Mascot review-only test screen (temporary, not part of the funnel) --- */ .mascot-test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .mascot-test-cell { display: flex; flex-direction: column; align-items: center; background: var(--gray-100); border-radius: 16px; padding: 12px; } .mascot-test-illustration { width: 100%; } .mascot-test-illustration svg { width: 100%; height: auto; display: block; } .mascot-test-label { margin-top: 8px; font-size: 12px; font-weight: 600; text-align: center; color: var(--ink); line-height: 1.4; } .mascot-test-label span { font-weight: 400; color: var(--gray-700); }