/* RE4GEN reskin. The control drives every colour through a token layer, so the reskin is a value swap: the blue "gummies" ramp becomes our violet ramp, "digestive" becomes our orange CTA, and the quiz body font becomes Poppins. No layout, spacing or radius is touched. Loaded after the control's stylesheets, so these declarations win. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/poppins-300.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); } :root, .theme-glpeptide-green { /* --- brand ramp: violet replaces the blue --- */ --gummies-100: #eeedf7; /* tints: option idle icon, card surfaces, disclaimer bar */ --gummies-200: #d5d3ec; /* borders, selected option fill */ --gummies-300: #5756a2; /* THE brand violet — selection, pills, progress */ --gummies-400: #46457f; /* icon foreground on selected, hover */ --gummies-450: #3a3466; --gummies-500: #2f2b5e; /* deepest — progress fill, disclaimer text */ /* --- CTA ramp: our orange --- */ --digestive-100: #fdecd8; --digestive-200: #fbcf9d; --digestive-300: #f6a351; /* CTA */ --digestive-400: #e5882f; /* CTA hover */ --digestive-500: #7a4413; /* --- the highlighted word in summary headlines --- */ --accent-100: #f9c79a; --accent-200: #f4ab6d; --accent-300: #ec9444; --accent-400: #e5882f; /* body-map "selected" marker + fiber accent used on the checkout headline */ --system-error: #e5882f; --fiber-gummies-300: #5756a2; /* text: design-system near-black indigo instead of Bootstrap grey */ --neutral-900: #1c1a2e; --neutral-800: #2a2440; --neutral-700: #5a5670; --neutral-600: #6f6b86; --neutral-300: #e4dfef; --neutral-200: #eeebf5; /* "Verified" ticks — the design system's own success green, not the control's */ --secondary-200: #26805a; --secondary-500: #3fb381; --secondary-600: #2f9e6b; /* the control's own brand ink, used on one summary heading */ --bioma: #1c1a2e; /* the low->high score scale on summary 3 */ --score-poor: #f2a7bb; --score-fair: #f6a351; --score-good: #b7b5ea; --score-optimal: #5756a2; /* dark hero surface behind the landing photo */ --weight-loss-900: #171430; --weight-loss-800: #221d45; /* --- type --- */ --font-lexend: 'Poppins', 'Poppins Fallback', system-ui, sans-serif; --font-inter: 'Poppins', 'Poppins Fallback', system-ui, sans-serif; } /* The font-module classes on set --font-lexend after :root, so re-assert. */ body.inter_f6a510f1-module__-1tPnW__variable, body.lexend_c42bbe1-module__1je9la__variable, body.lora_414287b3-module__eaY5VG__variable { --font-lexend: 'Poppins', 'Poppins Fallback', system-ui, sans-serif; --font-inter: 'Poppins', 'Poppins Fallback', system-ui, sans-serif; } /* Poppins runs a touch wider than Lexend at the same size; the control's headings are set in a geometric face too, so only the tracking needs a nudge to keep the two-line question headings breaking in the same place. */ .theme-glpeptide-green h1, .theme-glpeptide-green h2, .theme-glpeptide-green h3 { letter-spacing: -0.015em; } /* Orange CTA with dark text is the design system's AA-safe pairing. */ .theme-glpeptide-green .bg-quiz-cta p, .theme-glpeptide-green .bg-quiz-cta { color: #2a2440; } .theme-glpeptide-green .bg-quiz-cta .text-neutral-0 { color: #2a2440; } /* the arrow bubble inside the CTA: dark glyph on white, matching the text */ .theme-glpeptide-green .bg-quiz-cta svg path[stroke="#FFF"] { stroke: #2a2440; } /* The tick glyph is reused on the dark landing hero and on light summary cards. Our violet reads on white but not over the hero photo, so on any surface that sets white text (`text-neutral-0`) the tick goes white too — matching the copy beside it. */ .theme-glpeptide-green .text-neutral-0 svg [fill="#5756a2"], .theme-glpeptide-green .text-neutral-0 svg path[fill="#5756a2"] { fill: #ffffff; } /* The control bakes a dark band into its graph image so the two white value pins read. Our graph is light, so the same pins get their own chip instead — no markup change. */ .theme-glpeptide-green .rounded-s > p.absolute { background: #2f2b5e; padding: 0.25rem 0.6rem; border-radius: 999px; white-space: nowrap; width: auto; /* the control sets a fixed width for un-chipped text */ box-shadow: 0 2px 8px rgb(23 20 48 / 18%); }