/* ============================================================================ LEAD-MAGNET QUIZ - generic, tokenized stylesheet (mobile-first, responsive) ---------------------------------------------------------------------------- Niche-neutral component library. NOTHING here is weight-loss-specific; the classes are a generic quiz UI kit (.opt / .btn / .field / .program-card / .story-card / .compare-card / .trust-badges / .nothing-panel / .float-cta ...). To re-skin per client: change ONLY the :root tokens below. Every color, radius, and width flows from these variables. Fonts are loaded in the page (Google Fonts) and named in --font-sans here. Layout: full-bleed on mobile, centered in a capped card on desktop. ============================================================================ */ /* ============================================================================ BRAND TOKENS - swap these per client brand. (Pull from the client's branding.md / brand-extract: primary, accent, headings, body, surfaces.) The example values below are the Batash weight-loss palette + Poppins. ============================================================================ */ :root { /* fonts (loaded in index.html ). Bebas Neue = display headings (the Mecca site face). Inter = body (fallback for Adobe-licensed Tablet Gothic). DM Sans = small labels (fallback for Adobe-licensed Halyard Display). */ --font-sans: 'Inter', Arial, 'Helvetica Neue', Helvetica, sans-serif; --font-display: 'Bebas Neue', 'Inter', Arial, sans-serif; --font-label: 'DM Sans', 'Inter', Arial, sans-serif; /* core brand colors (Mecca monochrome, zero saturation). The whole UI maps onto pure grayscale: black is primary AND the CTA, so the legacy --navy / --orange / --blue tokens all resolve to brand black or the Mecca grays. No invented accent colors. */ --navy: #000000; /* primary / heading color (brand black) */ --blue: #000000; /* secondary accent -> black (links, outlines) */ --orange: #000000; /* primary CTA / accent -> brand black */ --orange-deep: #1a1a1a; /* CTA hover / strong accent (near-black) */ --ink: #000000; /* input text */ --body: #797979; /* body / secondary text (Mecca mid gray) */ --white: #ffffff; /* surfaces / panels (Mecca grays only) */ --bg-light: #f5f5f5; /* card fills, soft panels */ --bg-soft-blue: #f5f5f5; /* legacy soft-panel token -> off-white */ --bg-cream: #f5f5f5; /* legacy badge fill -> off-white */ --border: #d9d9d9; /* hairlines, dividers, borders */ /* validation (kept neutral-dark; no alarm red in the monochrome system) */ --soft-red-brown: #000000; /* shape + layout */ --radius: 14px; --radius-sm: 10px; --maxw: 600px; /* desktop card width (recommend 560-640px) */ --float-h: 84px; /* reserved space for the floating CTA bar */ } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; color: var(--body); background: var(--white); } /* Page background: a soft brand panel, visible only around the card on larger screens. On mobile the card fills the viewport so the panel is hidden. */ body { min-height: 100dvh; background: radial-gradient(circle at 20% 0%, rgba(217,217,217,0.45), transparent 60%), linear-gradient(160deg, #f5f5f5 0%, #e9e9e9 100%); } /* App shell. Mobile-first: full width, full min-height, single column. Desktop: centered card with shadow, capped width. */ .app { width: 100%; min-height: 100dvh; max-width: 100%; margin: 0 auto; background: var(--white); display: flex; flex-direction: column; position: relative; overflow: hidden; } @media (min-width: 680px) { body { padding: 40px 16px; } .app { max-width: var(--maxw); min-height: auto; border-radius: 28px; box-shadow: 0 24px 60px rgba(0,0,0,0.14), 0 4px 14px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); margin: 0 auto; } } /* Logo header. Black bar so the white wordmark reads (the only logo variant available). Logo centered; back button absolutely positioned left, white on the black bar. */ .appbar { display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 10px 16px; background: #000000; border-bottom: 1px solid #000000; position: relative; flex: 0 0 auto; } .appbar .logo { height: 26px; width: auto; display: block; } .appbar .back { position: absolute; left: 14px; display: inline-flex; align-items: center; gap: 4px; color: #ffffff; font-family: var(--font-label); font-size: 14px; font-weight: 500; background: none; border: none; cursor: pointer; padding: 8px 6px; border-radius: 8px; min-height: 44px; } .appbar .back:hover { background: rgba(255,255,255,0.14); } .appbar .back svg { width: 17px; height: 17px; } .appbar .back[hidden] { display: none; } /* Progress */ .progress-wrap { padding: 14px 22px 6px; flex: 0 0 auto; } .progress-wrap[hidden] { display: none; } .progress-track { height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; } .progress-fill { height: 100%; background: var(--orange); border-radius: 99px; width: 0; transition: width .32s cubic-bezier(.4,0,.2,1); } .progress-label { margin-top: 8px; font-size: 12px; color: var(--body); font-weight: 500; } /* Screen body. Flex-grow so footer sits at the bottom on tall viewports. */ .screen { padding: 22px 22px 30px; flex: 1 1 auto; width: 100%; } .screen.intro { padding: 30px 22px 34px; } @media (min-width: 680px) { .screen { padding: 26px 30px 32px; } } /* Typography */ .kicker { font-family: var(--font-label); color: var(--navy); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; } h1.q-headline { font-family: var(--font-display); color: var(--navy); font-size: 40px; font-weight: 400; line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 12px; } .intro h1.q-headline { font-size: 46px; line-height: 1.02; } h2.q-question { color: var(--navy); font-size: 22px; font-weight: 700; line-height: 1.28; letter-spacing: -0.01em; margin-bottom: 8px; } .subhead { color: var(--body); font-size: 15px; line-height: 1.55; } .helper { color: var(--body); font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; font-weight: 400; opacity: .92; } .sub-part-label { color: var(--navy); font-size: 13px; font-weight: 700; margin: 18px 0 8px; } .sub-part-label:first-of-type { margin-top: 14px; } /* Option cards */ .options { display: grid; gap: 10px; margin-top: 16px; } .opt { display: flex; align-items: center; gap: 12px; min-height: 58px; width: 100%; padding: 14px 16px; background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius-sm); color: var(--navy); font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer; transition: box-shadow .18s ease, transform .05s ease, background .15s ease, border-color .15s ease; } .opt:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.10); } .opt:active { transform: scale(0.985); } .opt .ctrl { flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid #d9d9d9; border-radius: 50%; position: relative; transition: border-color .15s ease, background .15s ease; } .opt.check .ctrl { border-radius: 6px; } .opt-label { flex: 1; } /* selected */ .opt.selected { border-color: var(--orange); border-left: 3px solid var(--orange); background: var(--bg-soft-blue); font-weight: 600; } .opt.selected .ctrl { border-color: var(--orange); background: var(--orange); } .opt.selected.check .ctrl::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--white); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } .opt.selected.radio .ctrl::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; background: var(--white); border-radius: 50%; transform: translate(-50%,-50%); } .opt:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; border-radius: 99px; font-family: inherit; font-size: 16px; font-weight: 600; border: none; cursor: pointer; text-decoration: none; transition: transform .05s ease, box-shadow .18s ease, background .18s ease, color .18s ease; } .btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; } .btn-primary { background: var(--orange); color: var(--white); box-shadow: 0 10px 24px rgba(0,0,0,0.22); } .btn-primary:hover { background: var(--orange-deep); } .btn-primary:active { transform: translateY(-1px); } .btn-primary[disabled], .btn-primary.disabled { background: var(--orange); opacity: .42; box-shadow: none; cursor: not-allowed; transform: none; } .btn-secondary { background: var(--white); color: var(--blue); border: 1.5px solid var(--blue); } .btn-secondary:hover { background: #f5f5f5; } .btn-ghost { background: none; color: var(--navy); min-height: 44px; font-weight: 500; font-size: 14px; box-shadow: none; } .btn-ghost:hover { background: var(--bg-light); } .btn-block { margin-top: 18px; } .reassure { text-align: center; color: var(--body); font-size: 13px; margin-top: 12px; font-weight: 500; } .reassure-inline { color: var(--body); font-size: 12.5px; margin-top: 8px; line-height: 1.5; font-style: italic; } /* Forms */ .field { display: grid; gap: 7px; margin-bottom: 14px; } .field label { color: var(--navy); font-size: 13px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; } .field label .optional { color: var(--body); font-weight: 500; font-size: 12px; } .field input, .field select { height: 50px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 14px; font-family: inherit; font-size: 15px; color: var(--ink); background: var(--white); width: 100%; -webkit-appearance: none; appearance: none; } .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .field input:focus, .field select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0,0,0,0.12); } .field.error input, .field.error select { border-color: var(--navy); } .field.error input:focus, .field.error select:focus { box-shadow: 0 0 0 3px rgba(0,0,0,0.18); } .field .err-text { color: var(--soft-red-brown); font-size: 12.5px; font-weight: 500; } .field .err-text[hidden] { display: none; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* pill choices (e.g. the demographic choice field) */ .pills { display: flex; flex-wrap: wrap; gap: 8px; } .pill { border: 1px solid var(--border); border-radius: 99px; padding: 11px 16px; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--navy); background: var(--white); cursor: pointer; min-height: 44px; transition: background .15s ease, border-color .15s ease; } .pill:hover { background: #f5f5f5; } .pill.selected { background: var(--bg-soft-blue); border-color: var(--orange); font-weight: 600; } .pill:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } /* Metric-step composite inputs (numeric -> silent band). A soft brand card holds labelled rows; inputs are large tap targets. */ .hw-card { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: grid; gap: 16px; margin-top: 4px; } .hw-field { margin-bottom: 0; gap: 8px; } .hw-field > label { color: var(--navy); font-size: 13px; font-weight: 600; } .hw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hw-row.single { grid-template-columns: 1fr; max-width: 200px; } .hw-unit { position: relative; } .hw-unit input { height: 54px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 46px 0 16px; font-family: inherit; font-size: 17px; font-weight: 500; color: var(--ink); background: var(--white); width: 100%; -webkit-appearance: none; appearance: none; } .hw-unit input::-webkit-outer-spin-button, .hw-unit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .hw-unit input { -moz-appearance: textfield; } .hw-unit input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0,0,0,0.12); } .hw-unit .suffix { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--body); font-size: 14px; font-weight: 600; pointer-events: none; } .hw-err { display: block; color: var(--soft-red-brown); font-size: 12.5px; font-weight: 500; margin-top: 10px; } .hw-err[hidden] { display: none; } /* Inline "learn more" explainer (native
toggle). */ .explainer { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; } .explainer summary { color: var(--blue); font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; min-height: 32px; } .explainer summary::-webkit-details-marker { display: none; } .explainer summary::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--blue); transition: transform .18s ease; flex: 0 0 auto; } .explainer[open] summary::before { transform: rotate(90deg); } .explainer summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 6px; } .explainer p { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--body); background: var(--bg-light); border-radius: var(--radius-sm); padding: 13px 14px; } /* consent (optional, phone-conditional) */ .consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; cursor: pointer; } .consent[hidden] { display: none; } .consent .box { flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid #d9d9d9; border-radius: 5px; margin-top: 1px; position: relative; transition: background .15s ease, border-color .15s ease; } .consent.checked .box { background: var(--orange); border-color: var(--orange); } .consent.checked .box::after { content:''; position:absolute; left:6px; top:1px; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); } .consent:focus-visible { outline: none; } .consent:focus-visible .box { outline: 2px solid var(--navy); outline-offset: 2px; } .consent p { font-size: 11.5px; line-height: 1.55; color: var(--body); } .privacy-note { font-size: 11.5px; line-height: 1.5; color: var(--body); margin-top: 14px; } .email-framing { background: var(--bg-soft-blue); border-radius: var(--radius-sm); padding: 13px 14px; font-size: 12.5px; line-height: 1.55; color: var(--navy); font-weight: 500; margin-bottom: 16px; } .footer-privacy { padding: 14px 22px 18px; border-top: 1px solid var(--border); text-align: center; font-size: 11.5px; color: var(--body); flex: 0 0 auto; } .footer-privacy[hidden] { display: none; } .footer-privacy svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; } /* Loading interstitial */ .loading-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 30px; min-height: 60dvh; gap: 20px; } /* The only logo variant is white, so the loading-screen logo sits on a black chip so the wordmark reads on the white interstitial. */ .loading-screen .logo { height: 22px; background: #000000; padding: 12px 18px; border-radius: 10px; box-sizing: content-box; } .spinner { width: 46px; height: 46px; border: 4px solid var(--bg-light); border-top-color: var(--navy); border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-screen .loading-line { color: var(--navy); font-size: 15px; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } .progress-fill { transition: none; } .opt { transition: none; } .reveal { animation: none !important; opacity: 1 !important; transform: none !important; } } /* Result screen specifics */ .results { padding-bottom: calc(var(--float-h) + 14px); } /* never let the float bar cover compliance copy */ .result-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-label); background: #000000; color: #ffffff; font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 99px; margin-bottom: 12px; letter-spacing: .04em; text-transform: uppercase; } .result-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #ffffff; } .result-block { margin-top: 18px; } .result-block .label { font-family: var(--font-label); color: var(--navy); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; } .result-block p { color: var(--body); font-size: 14px; line-height: 1.6; } .result-block h3 { color: var(--navy); font-size: 16px; font-weight: 600; margin-bottom: 6px; } .program-card { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-top: 18px; } .program-card .pc-title { color: var(--navy); font-size: 15px; font-weight: 700; margin-bottom: 10px; } .program-list { display: grid; gap: 10px; } .program-list .pl-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--body); line-height: 1.45; } .program-list .pl-item .tick { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); position: relative; margin-top: 1px; } .program-list .pl-item .tick::after { content:''; position:absolute; left:6px; top:3px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); } .complement-note { background: var(--bg-soft-blue); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 12px; font-size: 12.5px; color: var(--navy); line-height: 1.5; font-weight: 500; } /* dual compare layout */ .compare-grid { display: grid; gap: 12px; margin-top: 16px; } .compare-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--white); } .compare-card.primary { border-color: var(--navy); border-left: 4px solid var(--navy); background: #f5f5f5; } .compare-card .cc-tag { display:inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--orange-deep); background: var(--bg-cream); padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; } .compare-card .cc-tag.alt { color: var(--navy); background: var(--bg-light); } .compare-card h3 { color: var(--navy); font-size: 16px; font-weight: 700; margin-bottom: 6px; } .compare-card p { color: var(--body); font-size: 13px; line-height: 1.55; } .roadmap-line { background: var(--white); border: 1px dashed #797979; border-radius: var(--radius-sm); padding: 15px; margin-top: 18px; font-size: 14px; line-height: 1.55; color: var(--navy); } /* Patient/customer story card */ .story-card { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-top: 20px; } .story-card .sc-eyebrow { color: var(--orange); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; } .story-card .sc-quote { color: var(--navy); font-size: 14px; line-height: 1.55; font-weight: 500; font-style: italic; } .story-card .sc-meta { margin-top: 12px; display: flex; align-items: center; gap: 10px; } .story-card .sc-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--orange); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; } .story-card .sc-name { color: var(--navy); font-size: 13px; font-weight: 700; } .story-card .sc-result { color: var(--body); font-size: 12px; } .story-card .sc-vary { color: var(--body); font-size: 11px; margin-top: 12px; } /* credibility proof strip shown on every result (stats + framing line) */ .proof-card { background: var(--bg-soft-blue); border-radius: var(--radius); padding: 18px; margin-top: 20px; } .proof-card .proof-stats { display: flex; align-items: stretch; justify-content: space-between; gap: 6px; background: var(--white); border-radius: var(--radius-sm); padding: 14px 10px; margin-bottom: 14px; } .proof-card .proof-stats .hs-stat { flex: 1 1 0; text-align: center; min-width: 0; } .proof-card .proof-stats .hs-num { color: var(--navy); font-size: 19px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; } .proof-card .proof-stats .hs-lab { color: var(--body); font-size: 11px; line-height: 1.3; margin-top: 5px; } .proof-card .proof-stats .hs-div { width: 1px; background: #d9d9d9; flex: 0 0 1px; align-self: center; height: 38px; } .proof-card .pf-label { color: var(--navy); font-size: 13px; line-height: 1.55; font-weight: 500; } /* "See more results" text link */ .more-results { margin-top: 12px; text-align: center; } .result-ba + .more-results { margin-top: 14px; } .proof-card + .more-results { margin-top: 12px; } .more-results-link { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-size: 13px; font-weight: 600; text-decoration: none; padding: 6px 4px; min-height: 32px; border-radius: 8px; } .more-results-link:hover { text-decoration: underline; } .more-results-link:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } .more-results-link svg { width: 14px; height: 14px; flex: 0 0 auto; } /* trust badges */ .trust-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .trust-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--white); border: 1px solid var(--border); border-radius: 99px; padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--navy); } .trust-badge svg { width: 15px; height: 15px; flex: 0 0 auto; } /* consult / conversion section */ .consult-section { margin-top: 22px; } .consult-section .cs-lead { color: var(--navy); font-size: 14.5px; line-height: 1.6; font-weight: 500; } /* download action */ .download-row { margin-top: 16px; } .download-row .btn svg { width: 18px; height: 18px; } .download-note { color: var(--body); font-size: 12px; margin-top: 8px; line-height: 1.5; text-align: center; } .disclaimer { margin-top: 20px; padding: 14px; background: #f5f5f5; border-radius: var(--radius-sm); font-size: 11px; line-height: 1.55; color: var(--body); } .disclaimer strong { color: var(--navy); font-weight: 600; } .retake { text-align:center; margin-top: 16px; } .divider { height: 1px; background: var(--border); margin: 18px 0; } /* Floating sticky CTA (results screen only). Fixed to the bottom of the viewport; on desktop it pins to the bottom of the centered card column. */ .float-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, rgba(255,255,255,0.99) 70%, rgba(255,255,255,0)); display: flex; justify-content: center; } .float-cta[hidden] { display: none; } .float-cta .btn { max-width: var(--maxw); box-shadow: 0 8px 24px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.12); } @media (min-width: 680px) { .float-cta { left: 50%; transform: translateX(-50%); width: var(--maxw); max-width: var(--maxw); right: auto; border-radius: 0 0 28px 28px; background: linear-gradient(to top, rgba(255,255,255,1) 78%, rgba(255,255,255,0.6)); } } /* Entrance reveal for results blocks (transform + opacity only) */ .reveal { opacity: 0; transform: translateY(8px); animation: reveal-in .5s cubic-bezier(.2,.65,.3,1) forwards; } @keyframes reveal-in { to { opacity: 1; transform: translateY(0); } } /* Portrait ring (generic: a brand-accent ring around a round headshot/logo). Used by the intro portrait. Reusable for any "person" avatar. */ .dr-ring { width: 88px; height: 88px; border-radius: 50%; padding: 4px; background: var(--orange); flex: 0 0 auto; } .dr-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--bg-light); display:block; } /* ========================================================================== Rich intro landing (mobile-first, fills the viewport, CTA above the fold). ========================================================================== */ .screen.intro { padding: 22px 20px 26px; display: block; } .intro-hero { text-align: center; } .intro-portrait { width: 104px; height: 104px; margin: 2px auto 16px; } .intro-portrait img { background: var(--bg-soft-blue); } .intro .intro-hero h1.q-headline { font-size: 28px; line-height: 1.16; margin-bottom: 10px; text-align: center; } .intro-hero .subhead { font-size: 14.5px; line-height: 1.5; max-width: 34ch; margin: 0 auto 18px; } .intro-hero .btn-block { margin-top: 4px; } .intro-hero .reassure { margin-top: 10px; } /* Trust strip: stats in a clean row with thin dividers. */ .intro-stats { display: flex; align-items: stretch; justify-content: space-between; gap: 6px; background: var(--bg-light); border-radius: var(--radius); padding: 16px 10px; margin-top: 22px; } .intro-stats .hs-stat { flex: 1 1 0; text-align: center; min-width: 0; } .intro-stats .hs-num { color: var(--navy); font-size: 19px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; } .intro-stats .hs-lab { color: var(--body); font-size: 11px; line-height: 1.3; margin-top: 5px; } .intro-stats .hs-div { width: 1px; background: #d9d9d9; flex: 0 0 1px; align-self: center; height: 38px; } /* Credential + rating line under the stats. */ .intro-cred { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 12px; } .intro-cred .cred-item { display: inline-flex; align-items: center; gap: 6px; color: var(--navy); font-size: 12px; font-weight: 600; } .intro-cred .cred-item svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--navy); } .intro-cred .cred-item.rating svg { color: var(--orange); } .intro-cred .cred-dot { width: 3px; height: 3px; border-radius: 50%; background: #797979; flex: 0 0 auto; } /* Featured-in press row: small, muted, grayscale logos. */ .intro-press { margin-top: 22px; text-align: center; } .intro-press .press-eyebrow { color: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; opacity: .8; } .intro-press .press-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px 22px; } .intro-press .press-logo { height: 18px; width: auto; display: block; filter: grayscale(1); opacity: .55; } /* What you'll get preview: items with light icons. */ .intro-wyg { margin-top: 24px; background: var(--bg-soft-blue); border-radius: var(--radius); padding: 18px 18px 16px; } .intro-wyg .wyg-head { color: var(--navy); font-size: 14px; font-weight: 700; margin-bottom: 12px; } .intro-wyg .wyg-list { list-style: none; display: grid; gap: 12px; } .intro-wyg .wyg-item { display: flex; align-items: flex-start; gap: 11px; color: var(--navy); font-size: 13.5px; line-height: 1.4; font-weight: 500; } .intro-wyg .wyg-ic { flex: 0 0 auto; width: 30px; height: 30px; background: var(--white); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--orange); } .intro-wyg .wyg-ic svg { width: 18px; height: 18px; } /* Honest social-proof line. */ .intro-social { text-align: center; color: var(--body); font-size: 12.5px; line-height: 1.5; font-weight: 500; margin-top: 18px; } @media (min-width: 680px) { .screen.intro { padding: 30px 30px 34px; } .intro-portrait { width: 112px; height: 112px; } .intro .intro-hero h1.q-headline { font-size: 31px; } } /* ========================================================================== Per-result imagery: "how it works" figure + an optional before/after pair. ========================================================================== */ .result-figure { margin: 18px 0 0; } .result-figure .result-how-img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-light); } .result-figure .result-fig-cap { color: var(--body); font-size: 11.5px; line-height: 1.5; margin-top: 8px; } .result-ba { margin: 16px 0 0; } .result-ba .ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .result-ba .ba-cell { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--bg-light); } .result-ba .ba-cell img { width: 100%; height: auto; display: block; aspect-ratio: 444 / 657; object-fit: cover; } .result-ba .ba-tag { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.86); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 99px; text-transform: uppercase; } .result-ba .ba-cap { color: var(--body); font-size: 11px; line-height: 1.5; margin-top: 8px; text-align: center; } /* ========================================================================== End-CTA "nothing-panel": a strong dark panel with an optional photo + a restated CTA headline. Generic dark conversion band; swap copy/photo via config. (Named .nothing-panel from the Batash "nothing to lose but the weight" section; the component itself is niche-neutral.) ========================================================================== */ .nothing-panel { background: radial-gradient(circle at 88% 12%, rgba(255,255,255,0.10), transparent 55%), #000000; border-radius: var(--radius); padding: 20px 20px 22px; margin-top: 28px; margin-bottom: 18px; display: grid; grid-template-columns: 86px 1fr; gap: 16px; align-items: center; } /* if no photo is supplied, the copy spans the full width */ .nothing-panel:not(:has(.np-photo)) { grid-template-columns: 1fr; } .nothing-panel .np-photo { width: 86px; height: 110px; border-radius: var(--radius-sm); overflow: hidden; background: rgba(255,255,255,0.08); } .nothing-panel .np-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .nothing-panel .np-eyebrow { font-family: var(--font-label); color: rgba(255,255,255,0.72); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 7px; } .nothing-panel .np-headline { font-family: var(--font-display); color: #fff; font-size: 28px; font-weight: 400; line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 9px; } .nothing-panel .np-sub { color: rgba(255,255,255,0.82); font-size: 12.5px; line-height: 1.5; } @media (min-width: 680px) { .nothing-panel { grid-template-columns: 104px 1fr; padding: 24px; } .nothing-panel .np-photo { width: 104px; height: 128px; } .nothing-panel .np-headline { font-size: 31px; } } /* ========================================================================== v2 INTRO EXTRAS (static, in index.html as #introExtras). Shown ONLY on the intro screen via the sibling combinator below, keyed off the .intro class the engine sets on #screen for the intro step only. Two blocks: the prepared-by row (Dr. Rue photo + text) and the featured-in logo strip. ========================================================================== */ .intro-extras { display: none; padding: 0 20px 20px; } /* show the extras only while #screen is the intro screen */ #screen.intro ~ .intro-extras { display: block; } @media (min-width: 680px) { .intro-extras { padding: 0 30px 20px; } } /* Prepared-by block: photo left, text right. */ .prepared-by { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; background: var(--bg-soft-blue); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-top: 22px; } .prepared-by .pb-photo { width: 76px; height: 92px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-light); flex: 0 0 auto; filter: grayscale(100%); border: 1px solid var(--border); } .prepared-by .pb-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .prepared-by .pb-eyebrow { font-family: var(--font-label); color: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; } .prepared-by .pb-name { color: var(--navy); font-size: 13.5px; font-weight: 400; line-height: 1.35; margin-bottom: 7px; } .prepared-by .pb-line { color: var(--body); font-size: 12px; line-height: 1.5; font-weight: 400; } /* Featured-in strip: grayscale press logos, logos only, no quotes. */ .featured-in { margin-top: 18px; text-align: center; } .featured-in .fi-eyebrow { color: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; opacity: .8; } .featured-in .fi-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 22px; } .featured-in .fi-logo { height: 17px; width: auto; display: block; filter: grayscale(1); opacity: .55; } @media (min-width: 380px) { .featured-in .fi-logo { height: 18px; } } /* ========================================================================== v2 RESULT EXTRAS (injected by result-extras.js, no engine edit). .pc-intro = the options-you-can-consider intro line, between the program card title and its items. .location-note = the q_state-driven access line, just before the consult section. Monochrome, matches the result block language. ========================================================================== */ .program-card .pc-intro { color: var(--body); font-size: 13px; line-height: 1.55; margin: -2px 0 12px; font-weight: 400; } .program-card .pc-title:empty { display: none; } .location-note { margin-top: 20px; background: var(--bg-soft-blue); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .location-note .ln-label { font-family: var(--font-label); color: var(--navy); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; } .location-note p { color: var(--navy); font-size: 13.5px; line-height: 1.55; font-weight: 500; } /* utility */ [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .aria-live { position: absolute; left: -9999px; }