/* =================================================================== funnel.css — tiny shared shell on top of the Reference reference kit. Each step page links its archetype CSS (interstitial.css, quiz-question.css, etc.) AND this file. This file adds only the small layer of glue the funnel needs that doesn't belong in the design-kit CSS: the "I don't have a U.S. zipcode"-style escape link recolored for the funnel, the Next button enabling rule, and a tiny dev breadcrumb at the bottom of every step that prints "Step X of 44 · jump to map" so the demo is easy to navigate. =================================================================== */ /* The reference quiz-question Next button hides when disabled by default; for text-input questions the disabled state should be visible but muted, so the user knows the button is waiting on them. Mirrors the Reference production look. */ .wag-cta[disabled] { opacity: 0.35; cursor: not-allowed; } /* The interstitial recipes' continue button (`data-cy="continue"`) doesn't carry a `.wag-cta` width override, so on very long headlines (e.g. the "no legal requirement to register…" belief questions repurposed as interstitials) the button can wrap. Force it to a comfortable single-line min width. */ .wag-card .wag-cta { min-width: 200px; } /* ------------------------------------------------------------ Font-family overrides — ALL viewports The generated wag-tokens.css names "Source Serif 4" / "Inter" but doesn't actually load them, so previously every page silently fell back to Georgia + system sans. Switch the family chain to Newsreader (closest free analogue to Reference's Untitled Serif) and ensure Inter is the body sans. The actual @font-face files are loaded via from Google Fonts in each page . ------------------------------------------------------------ */ :root { --wag-typography-display-lg-font-family: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif; --wag-typography-display-md-font-family: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif; --wag-typography-body-md-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --wag-typography-body-lg-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --wag-typography-body-sm-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --wag-typography-label-md-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --wag-typography-label-lg-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --wag-typography-eyebrow-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --wag-typography-caption-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Newsreader runs slightly bolder optically than Untitled Serif at weight 400; nudge it back to a true regular and let optical sizing handle the rest. */ .recipe-a-cream__exterior-headline, .recipe-a-cream__interior-headline, .recipe-b .floating-headline, .reveal-headline, .wag-card h1, .wag-card h2, .wag-page h1, .wag-page h2 { font-family: var(--wag-typography-display-md-font-family); font-optical-sizing: auto; font-variation-settings: "opsz" 28; } /* ------------------------------------------------------------ Mobile token overrides (≤480px) — funnel pages Mirrors the same block in reference/interstitial.css. Funnel step pages load tokens → interstitial.css → funnel.css, so this final override always wins for live funnel steps regardless of which archetype CSS was loaded earlier. Spec verified against the reference site/survey/moreWeightLoss on iPhone 12 Pro (390×844, DPR 3): - body p: 18px / 26px (was clamp 14→16 / 1.5) - bullet p: 16px / 24px (was 14px / 1.45) - h1 / h2: 28px / 36px (was clamp 22→28 / clamp 28→34) - card pad: 16px (was 32px) - gutter: 16px (was 24px) ------------------------------------------------------------ */ @media (max-width: 480px) { :root { --wag-spacing-gutter: 16px; --wag-component-card-dark-tab-padding: 16px; --wag-component-card-cream-tab-padding: 16px; --wag-component-callout-cream-padding: 16px; --wag-component-card-mint-padding: 16px; --wag-typography-display-md-font-size: 28px; --wag-typography-display-md-line-height: 36px; --wag-typography-body-lg-font-size: 18px; --wag-typography-body-lg-line-height: 26px; --wag-typography-body-md-font-size: 18px; --wag-typography-body-md-line-height: 26px; --wag-typography-body-sm-font-size: 16px; --wag-typography-body-sm-line-height: 24px; --wag-typography-label-lg-font-size: 18px; --wag-typography-label-lg-line-height: 26px; } .wag-card--dark-tab { padding-top: var(--wag-spacing-lg); } /* Cream-tab card body type — scoped DOWN from the global 18px/26px body-md mobile override. The 18px size reads correctly for true paragraph copy (quiz prompts, "While medications are…" body blocks), but inside the cream-card bullet stack (steps 3, 4, 8, 10, 15, 16, 44) it feels oversized: bullets are short list-style fragments that read better at a tighter measure, similar to how Reference sizes their cream-tab supporting copy a tier below their hero paragraph copy. Targets every text element rendered inside .wag-card--cream-tab: - lead paragraphs (.reveal-card-lead, > p) - bullet list items (.cream-card-callout__item p, .reveal-bullets p, .quiz-intro-bullets p, .clinical-rows p) - the card's own > p direct-child rule Leaves the headline above the card (.recipe-a-cream__exterior- headline, .reveal-floating-headline) and the .wag-footnote untouched so the type hierarchy still reads: 28px headline → 15px card body → 12px footnote. */ .wag-card--cream-tab, .wag-card--cream-tab > p, .wag-card--cream-tab .reveal-card-lead, .wag-card--cream-tab .cream-card-callout__item p, .wag-card--cream-tab .reveal-bullets p, .wag-card--cream-tab .quiz-intro-bullets p, .wag-card--cream-tab .clinical-rows p, /* Step 12 (Dr Trust testimonial) — long-form pull quote uses body-lg (which the global mobile override pushes to 18/26). Match the cream-card body treatment so the testimonial reads at the same comfortable measure as the other interstitials. Name + title stay at their original label-lg / body-sm sizes so the credential hierarchy is preserved. */ .recipe-c--dr-trust .dr-content-region blockquote p { font-size: 15px; line-height: 22px; } }