/* ====================================================================== VERDAVITAL SKIN QUIZ — v8 STRUCTURE: Q1(scene) → Q2(age) → Q3(severity) → Q4(duration) → Q5(tried, multi) → Q6(root cause + insight) → Q7(dream) → Email gate → Processing → Results KEY CHANGES: Q7 = emotional peak — quiz ends at max commitment before the email ask. Age at Q2 frames all subsequent answers. Email gate is post-Q7: value exchange at the right moment, not a barrier to entry. JS: vvbGoToEmail (Q7→gate), vvbEmailBack (gate→Q7), vvbSubmitEmail (gate→processing). computeProfile: Q1 scene + Q3 severity. computeBarrierScore: Q3+Q4. PROFILES mirrors: Q4 duration, Q7 dream. renderResult failed list: S.q5. S init: q5:[]. GA4 + Klaviyo: all 9 original events preserved exactly. ====================================================================== */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { overscroll-behavior: none; } body { font-family: 'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overscroll-behavior-x: none; } /* === DESIGN TOKENS === */ :root { --amber: #B8924A; --amber-mid: #9B7A3D; --amber-lt: #F0DFC0; --amber-pale: #FBF4E8; --honey: #C8973A; --dark: #0D2B18; --near-dark: #1B4D2E; --ink-black: #071a0e; --text: #3D2E1E; --muted: #6B5C50; --border: #E8D9C8; --bg: #F2EDE5; --white: #FFFFFF; --lavender: #9B8EC4; --lav-lt: #EDE9F8; --lav-pale: #F7F5FD; --red: #BF2727; --red-bright: #D44040; --green-ok: #2E6B3E; --sh-xs: 0 1px 3px rgba(13,43,24,.06),0 1px 2px rgba(13,43,24,.04); --sh-sm: 0 2px 8px rgba(13,43,24,.08),0 4px 20px rgba(13,43,24,.05); --sh-md: 0 4px 16px rgba(13,43,24,.10),0 8px 40px rgba(13,43,24,.08); --sh-lg: 0 8px 32px rgba(13,43,24,.14),0 20px 64px rgba(13,43,24,.10); --sh-gold:0 4px 24px rgba(184,146,74,.50),0 1px 4px rgba(184,146,74,.3); --sh-red: 0 4px 24px rgba(191,39,39,.50),0 1px 4px rgba(191,39,39,.3); --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 99px; --serif: 'Cormorant Garamond',Georgia,serif; } /* === SCREEN SYSTEM === */ .vvb-screen { display: none; } .vvb-screen.active { display: block; animation: vvbIn 0.44s cubic-bezier(0.22,1,0.36,1) both; } @keyframes vvbIn { from { opacity:0; transform:perspective(900px) rotateX(4deg) translateY(18px) scale(.99); } to { opacity:1; transform:perspective(900px) rotateX(0) translateY(0) scale(1); } } @media (prefers-reduced-motion:reduce) { .vvb-screen.active { animation:vvbFadeOnly .18s ease both; } @keyframes vvbFadeOnly { from{opacity:0} to{opacity:1} } } /* === TOP BAR === */ .vvb-topbar { background: var(--dark); padding: 14px 20px 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 20px rgba(0,0,0,.4); text-align: center; } .vvb-logo-img { height: 36px; width: auto; display: block; } .vvb-secure { font-size: .7rem; color: rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; letter-spacing: .2px; } /* === PROGRESS BAR === */ .vvb-progress { background: var(--dark); padding: 12px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.06); } .vvb-hook-line { font-family: 'Cormorant Garamond',Georgia,serif; font-size: clamp(1.05rem,3.5vw,1.22rem); font-style: italic; color: rgba(255,255,255,.88); letter-spacing: .01em; line-height: 1.35; text-align: center; margin-bottom: 4px; } .vvb-hook-line span { color:var(--amber); font-style:normal; font-weight:700; } .vvb-hook-sub { font-family: 'DM Sans',sans-serif; font-size: .76rem; color: rgba(255,255,255,.38); text-align: center; margin-bottom: 12px; letter-spacing: .2px; } .vvb-prog-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .vvb-prog-label { font-size: .75rem; font-weight: 600; letter-spacing: .9px; text-transform: uppercase; color: rgba(255,255,255,.4); } .vvb-prog-pct { font-size:.75rem; font-weight:700; color:var(--amber); } .vvb-bar-bg { background: rgba(255,255,255,.1); border-radius: var(--r-pill); height: 4px; overflow: hidden; } .vvb-bar-fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg,var(--amber),var(--honey),var(--amber)); background-size: 200% 100%; transition: width .6s cubic-bezier(.22,1,.36,1); animation: shimmer 2.5s linear infinite; } @keyframes shimmer { to { background-position:-200% 0; } } @media (prefers-reduced-motion:reduce) { .vvb-bar-fill { animation:none; } } /* === QUESTION SCREENS === */ .vvb-q-wrap { max-width: 620px; margin: 0 auto; padding: 28px 20px; padding-bottom: max(80px, calc(env(safe-area-inset-bottom,0px) + 80px)); } .vvb-q-num { font-size: .75rem; font-weight: 700; color: var(--amber-mid); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; } .vvb-q-text { font-family: 'Cormorant Garamond',Georgia,serif; font-size: clamp(1.45rem,5vw,1.9rem); font-weight: 700; color: var(--dark); line-height: 1.25; margin-bottom: 6px; text-wrap: balance; letter-spacing: -.015em; } .vvb-q-sub { font-size: .88rem; color: var(--muted); margin-bottom: 22px; line-height: 1.6; text-wrap: pretty; } .vvb-multi-hint { font-size:.8rem; color:var(--muted); margin-bottom:12px; font-style:italic; } .vvb-insight { background: var(--lav-pale); border: 1px solid var(--lav-lt); border-left: 4px solid var(--lavender); border-radius: var(--r-md); padding: 14px 16px; margin-top: 20px; font-size: .88rem; color: var(--text); line-height: 1.65; } .vvb-insight strong { color: var(--lavender); } .vvb-back { background: var(--white); border: 1.5px solid var(--border); color: var(--muted); font-size: .875rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; font-family: 'DM Sans',sans-serif; padding: 9px 16px; min-height: 44px; border-radius: var(--r-sm); transition: border-color .15s, color .15s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .vvb-back:active { background:var(--amber-pale); border-color:var(--amber); } /* === OPTION CARDS === */ .vvb-options { display: flex; flex-direction: column; gap: 10px; } .vvb-opt { background: var(--white); border: 1.5px solid rgba(232,217,200,.85); border-radius: var(--r-lg); padding: 16px 18px; cursor: pointer; display: flex; align-items: flex-start; gap: 14px; text-align: left; box-shadow: 0 1px 3px rgba(13,43,24,.05),0 2px 8px rgba(13,43,24,.04); min-height: 58px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: border-color .16s ease, background .16s ease, transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease; } .vvb-opt:active { transform:scale(.975) translateY(1px); } .vvb-opt.selected { border-color: var(--amber); background: rgba(251,244,232,.97); box-shadow: 0 6px 24px rgba(184,146,74,.22),0 2px 8px rgba(184,146,74,.14); transform: translateY(-2px) scale(1.01); } @media (hover:hover) { .vvb-opt:hover { border-color:var(--amber-mid); background:rgba(251,244,232,.6); transform:translateX(4px); } .vvb-opt:hover .vvb-opt-letter { background:var(--amber-mid); color:var(--white); } } .vvb-opt-letter { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; background: #F0E4D0; color: var(--amber-mid); font-size: .85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background .16s, color .16s; flex-shrink: 0; margin-top: 1px; } .vvb-opt.selected .vvb-opt-letter { background:var(--amber-mid); color:var(--white); } .vvb-opt-title { font-size:.97rem; font-weight:600; color:var(--dark); line-height:1.3; margin-bottom:3px; } .vvb-opt-sub { font-size:.82rem; color:var(--muted); line-height:1.5; text-wrap:pretty; } .vvb-options .vvb-opt { animation:optIn .35s cubic-bezier(.22,1,.36,1) both; } .vvb-options .vvb-opt:nth-child(1) { animation-delay:.04s; } .vvb-options .vvb-opt:nth-child(2) { animation-delay:.09s; } .vvb-options .vvb-opt:nth-child(3) { animation-delay:.14s; } .vvb-options .vvb-opt:nth-child(4) { animation-delay:.19s; } .vvb-options .vvb-opt:nth-child(5) { animation-delay:.24s; } @keyframes optIn { from{opacity:0;transform:translateY(12px) scale(.97);} to{opacity:1;transform:translateY(0) scale(1);} } @media (prefers-reduced-motion:reduce) { .vvb-options .vvb-opt { animation:none; } } /* Next button */ .vvb-btn-next { margin-top: 22px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg,var(--dark) 0%,var(--near-dark) 100%); color: var(--white); border: none; border-radius: var(--r-lg); font-family: 'DM Sans',sans-serif; font-size: 1rem; font-weight: 600; padding: 17px 28px; cursor: pointer; box-shadow: var(--sh-md); transition: transform .15s cubic-bezier(.22,1,.36,1),box-shadow .15s,opacity .15s; min-height: 56px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; letter-spacing: .15px; } .vvb-btn-next:disabled { opacity:.3; cursor:not-allowed; } .vvb-btn-next:not(:disabled):active { transform:scale(.97); } @media (hover:hover) { .vvb-btn-next:not(:disabled):hover { transform:translateY(-2px); box-shadow:var(--sh-lg); } } /* Primary button (email gate) */ .vvb-btn-primary { display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(135deg,var(--dark) 0%,var(--near-dark) 100%); border: 1.5px solid rgba(184,146,74,.45); color: var(--white); border-radius: var(--r-lg); font-family: 'DM Sans',sans-serif; font-size: 1.05rem; font-weight: 600; padding: 17px 36px; cursor: pointer; letter-spacing: .25px; box-shadow: 0 4px 24px rgba(0,0,0,.2),var(--sh-gold); transition: transform .15s cubic-bezier(.22,1,.36,1),box-shadow .15s; min-height: 56px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .vvb-btn-primary:active { transform:scale(.97); } @media (hover:hover) { .vvb-btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 40px rgba(0,0,0,.25),var(--sh-gold); } } /* === EMAIL GATE === */ .vvb-email-wrap { max-width:560px; margin:0 auto; padding:40px 24px 72px; text-align:center; } .vvb-email-icon { font-size:3rem; margin-bottom:14px; } .vvb-email-h { font-family: 'Cormorant Garamond',Georgia,serif; font-size: clamp(1.55rem,5vw,2.1rem); font-weight: 700; color: var(--dark); margin-bottom: 10px; line-height: 1.25; text-wrap: balance; } .vvb-email-sub { font-size: .92rem; color: var(--muted); margin-bottom: 24px; line-height: 1.68; max-width: 400px; margin-left: auto; margin-right: auto; text-wrap: pretty; } .vvb-profile-teaser { background: linear-gradient(140deg,var(--amber-pale),#FFF7EE); border: 1px solid rgba(184,146,74,.22); border-radius: var(--r-xl); padding: 18px 20px; margin-bottom: 24px; text-align: left; position: relative; overflow: hidden; box-shadow: var(--sh-sm); } .vvb-teaser-label { font-size:.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--amber-mid); margin-bottom:10px; } .vvb-teaser-profiles { display:flex; flex-direction:column; gap:7px; } .vvb-teaser-pill { background:var(--white); border:1px solid var(--border); border-radius:var(--r-sm); padding:11px 14px; font-size:.85rem; font-weight:600; color:var(--dark); filter:blur(3.5px); user-select:none; -webkit-user-select:none; } .vvb-teaser-overlay { position:absolute; bottom:0; left:0; right:0; height:55%; background:linear-gradient(to bottom,transparent,var(--amber-pale)); pointer-events:none; } .vvb-teaser-unlock { font-size:.82rem; color:var(--amber-mid); font-weight:700; margin-top:12px; } .vvb-email-form { max-width:400px; margin:0 auto; } .vvb-input-wrap { margin-bottom:10px; } .vvb-input-wrap input { width: 100%; border: 2px solid var(--border); border-radius: var(--r-md); font-family: 'DM Sans',sans-serif; font-size: 16px; padding: 14px 16px; color: var(--dark); background: var(--white); outline: none; transition: border-color .18s,box-shadow .18s; min-height: 54px; -webkit-appearance: none; } .vvb-input-wrap input:focus { border-color:var(--amber); box-shadow:0 0 0 3px rgba(184,146,74,.18); } .vvb-privacy { font-size:.77rem; color:var(--muted); margin-top:10px; display:flex; align-items:center; justify-content:center; gap:5px; } /* === PROCESSING === */ .vvb-processing-wrap { max-width:440px; margin:0 auto; padding:80px 24px 64px; text-align:center; } .vvb-proc-icon { font-size: 4.5rem; margin-bottom: 24px; display: block; animation: procFloat 2.4s ease-in-out infinite; contain: layout; } @keyframes procFloat { 0%,100%{transform:translateY(0) rotate(-1.5deg);} 50%{transform:translateY(-12px) rotate(1.5deg);} } @media (prefers-reduced-motion:reduce) { .vvb-proc-icon { animation:none; } } .vvb-proc-h { font-family: 'Cormorant Garamond',Georgia,serif; font-size: clamp(1.45rem,5vw,1.85rem); font-weight: 700; color: var(--dark); margin-bottom: 32px; line-height: 1.26; text-wrap: balance; } .vvb-proc-bar-wrap { background:var(--border); border-radius:var(--r-pill); height:5px; overflow:hidden; max-width:280px; margin:0 auto 16px; } .vvb-proc-bar-fill { height: 100%; border-radius: var(--r-pill); width: 0%; background: linear-gradient(90deg,var(--amber),var(--honey),var(--amber)); background-size: 200% 100%; transition: width .5s cubic-bezier(.22,1,.36,1); animation: shimmer 2s linear infinite; } .vvb-proc-step { font-size:.88rem; color:var(--muted); font-style:italic; min-height:24px; transition:opacity .3s; } .vvb-proc-dots { display:flex; justify-content:center; gap:9px; margin:22px 0 8px; } .vvb-proc-dot { width:10px; height:10px; border-radius:50%; background:var(--amber); } .vvb-proc-dot:nth-child(1) { animation:dotBounce 1.2s 0s ease-in-out infinite; } .vvb-proc-dot:nth-child(2) { animation:dotBounce 1.2s .2s ease-in-out infinite; } .vvb-proc-dot:nth-child(3) { animation:dotBounce 1.2s .4s ease-in-out infinite; } @keyframes dotBounce { 0%,80%,100%{transform:scale(.45);opacity:.28;} 40%{transform:scale(1.1);opacity:1;} } @media (prefers-reduced-motion:reduce) { .vvb-proc-dot { animation:none; opacity:1; } } /* === RESULTS === */ .vvb-result-wrap { max-width:720px; margin:0 auto; padding-bottom:120px; } .vvb-result-hero { background: linear-gradient(152deg,var(--dark) 0%,var(--ink-black) 58%,#0a1f0e 100%); color: var(--white); padding: 46px 28px 42px; text-align: center; position: relative; overflow: hidden; } .vvb-result-hero::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 68% 28%,rgba(184,146,74,.1) 0%,transparent 62%); } .vvb-result-badge { position:relative; display:inline-block; background:rgba(184,146,74,.16); border:1px solid rgba(184,146,74,.42); border-radius:var(--r-pill); font-size:.78rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:5px 16px; margin-bottom:16px; color:var(--amber); } .vvb-result-h { position:relative; font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(1.55rem,5.5vw,2.3rem); font-weight:700; line-height:1.2; margin-bottom:18px; max-width:560px; margin-left:auto; margin-right:auto; text-wrap:balance; } .vvb-result-mirror { position:relative; border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md); padding:15px 19px; font-size:.92rem; line-height:1.72; color:rgba(255,255,255,.8); max-width:500px; margin:0 auto 24px; text-align:left; background:rgba(255,255,255,.08); } @supports (backdrop-filter:blur(8px)) { .vvb-result-mirror { backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } } .vvb-score-wrap { position:relative; display:flex; align-items:center; justify-content:center; gap:16px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md); padding:16px 24px; max-width:340px; margin:0 auto 28px; } .vvb-score-num { font-family:'Cormorant Garamond',Georgia,serif; font-size:3.2rem; font-weight:700; color:var(--amber); line-height:1; } .vvb-score-title { font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.42); margin-bottom:3px; } .vvb-score-label { font-size:.88rem; color:rgba(255,255,255,.88); font-weight:600; } .vvb-hero-cta-wrap { position:relative; margin-top:8px; } .vvb-btn-hero-cta { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; background:linear-gradient(135deg,var(--amber) 0%,var(--honey) 100%); color:var(--dark); border:none; border-radius:var(--r-lg); font-family:'DM Sans',sans-serif; font-size:1.08rem; font-weight:700; padding:18px 38px; cursor:pointer; width:100%; max-width:400px; box-shadow:var(--sh-gold); text-decoration:none; transition:transform .15s cubic-bezier(.22,1,.36,1),box-shadow .15s; min-height:56px; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } .vvb-btn-hero-cta:active { transform:scale(.96); } @media (hover:hover) { .vvb-btn-hero-cta:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(184,146,74,.65); } } .vvb-hero-guarantee { font-size:.78rem; color:rgba(255,255,255,.35); margin-top:10px; display:flex; align-items:center; justify-content:center; gap:5px; } .vvb-scarcity-note { font-size:.82rem; color:rgba(255,200,80,.88); margin-top:8px; font-weight:600; } .vvb-result-body { padding:0 22px; } .vvb-result-sec { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:26px; margin-top:18px; box-shadow:var(--sh-sm); } .vvb-sec-label { font-size:.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--amber-mid); margin-bottom:10px; } .vvb-result-sec h3 { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.28rem; font-weight:700; color:var(--dark); margin-bottom:10px; line-height:1.28; text-wrap:balance; } .vvb-result-sec p { font-size:.92rem; color:var(--text); line-height:1.78; text-wrap:pretty; } .vvb-result-sec p+p { margin-top:10px; } .vvb-mech-box { background:var(--lav-pale); border:1px solid var(--lav-lt); border-left:4px solid var(--lavender); border-radius:var(--r-md); padding:16px; margin-top:14px; font-size:.9rem; line-height:1.72; color:var(--text); } .vvb-mech-box strong { color:var(--lavender); } .vvb-failed-list { margin-top:14px; display:flex; flex-direction:column; gap:9px; } .vvb-failed-item { background:#FEF7F5; border:1px solid #F0C4BB; border-radius:var(--r-sm); padding:13px 15px; font-size:.9rem; color:var(--text); line-height:1.65; } .vvb-failed-item strong { color:var(--red); } .vvb-prod-rec { background:linear-gradient(148deg,#F8F3EC 0%,#F2EBF8 100%); border:1.5px solid rgba(184,146,74,.22); border-radius:var(--r-xl); padding:26px; margin-top:18px; box-shadow:var(--sh-sm); } .vvb-prod-label { font-size:.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--amber-mid); margin-bottom:10px; } .vvb-prod-h { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.38rem; font-weight:700; color:var(--dark); margin-bottom:12px; text-wrap:balance; } .vvb-prod-rec p { font-size:.92rem; color:var(--text); line-height:1.75; } .vvb-bullets { margin-top:16px; display:flex; flex-direction:column; gap:8px; } .vvb-bullet { display:flex; align-items:flex-start; gap:10px; font-size:.92rem; color:var(--text); } .vvb-bullet-check { width:20px; height:20px; min-width:20px; background:var(--green-ok); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.65rem; margin-top:2px; flex-shrink:0; } .vvb-prod-img { width:100%; max-width:260px; border-radius:var(--r-xl); display:block; margin:0 auto 20px; box-shadow:var(--sh-md); } .vvb-prod-img-wrap { text-align:center; margin-top:22px; } .vvb-variant-tag { display:inline-block; background:var(--amber-pale); color:var(--amber-mid); border:1px solid rgba(184,146,74,.3); border-radius:var(--r-pill); font-size:.8rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase; padding:5px 14px; margin-bottom:16px; } .vvb-testi { background:var(--white); border:1px solid var(--border); border-radius:var(--r-xl); padding:24px 26px; margin-top:18px; box-shadow:var(--sh-sm); } .vvb-testi blockquote { font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:1.12rem; color:var(--dark); line-height:1.68; margin-bottom:16px; text-wrap:pretty; } .vvb-testi-person { display:flex; align-items:center; gap:12px; } .vvb-testi-avatar { width:42px; height:42px; min-width:42px; border-radius:50%; background:var(--amber-lt); display:flex; align-items:center; justify-content:center; font-size:1.1rem; } .vvb-testi-stars { color:var(--amber); font-size:.85rem; margin-bottom:2px; letter-spacing:1px; } .vvb-testi-name { font-size:.9rem; font-weight:700; color:var(--dark); } .vvb-testi-label { font-size:.78rem; color:var(--muted); } .vvb-trust { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:20px 22px; margin-top:18px; } .vvb-trust-pill { background:var(--white); border:1px solid var(--border); border-radius:var(--r-pill); padding:7px 15px; font-size:.82rem; font-weight:600; color:var(--amber-mid); display:flex; align-items:center; gap:5px; box-shadow:var(--sh-xs); } .vvb-cta-block { background:linear-gradient(148deg,var(--dark) 0%,var(--ink-black) 100%); border-radius:var(--r-xl); padding:38px 28px; margin:20px 22px 0; text-align:center; color:var(--white); box-shadow:var(--sh-lg); position:relative; overflow:hidden; } .vvb-cta-block::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 30% 80%,rgba(191,39,39,.07) 0%,transparent 70%); } .vvb-cta-label { position:relative; font-size:.78rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:12px; } .vvb-cta-h { position:relative; font-family:'Cormorant Garamond',Georgia,serif; font-size:clamp(1.4rem,4.5vw,1.75rem); font-weight:700; margin-bottom:12px; line-height:1.25; text-wrap:balance; } .vvb-cta-block p { position:relative; font-size:.92rem; color:rgba(255,255,255,.62); margin-bottom:26px; line-height:1.72; } .vvb-btn-cta { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; background:linear-gradient(135deg,var(--red) 0%,var(--red-bright) 100%); color:#FFFFFF; border:none; border-radius:var(--r-lg); font-family:'DM Sans',sans-serif; font-size:1.1rem; font-weight:700; padding:18px 38px; cursor:pointer; width:100%; max-width:440px; box-shadow:var(--sh-red); transition:transform .15s cubic-bezier(.22,1,.36,1),box-shadow .15s; text-decoration:none; min-height:56px; -webkit-tap-highlight-color:transparent; touch-action:manipulation; letter-spacing:.25px; } .vvb-btn-cta:active { transform:scale(.96); } @media (hover:hover) { .vvb-btn-cta:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(191,39,39,.62),0 4px 14px rgba(191,39,39,.3); } } .vvb-guarantee { position:relative; margin-top:14px; font-size:.8rem; color:rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; gap:5px; } .vvb-cta-scarcity { position:relative; font-size:.82rem; color:rgba(255,200,80,.9); margin-top:8px; font-weight:600; } /* === STICKY MOBILE CTA === */ .vvb-sticky-cta { display:none; position:fixed; bottom:0; left:0; right:0; background:rgba(7,26,14,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:10px 16px; padding-bottom:max(14px,env(safe-area-inset-bottom,14px)); z-index:200; border-top:1px solid rgba(255,255,255,.08); box-shadow:0 -4px 32px rgba(0,0,0,.45); } .vvb-sticky-inner { max-width:480px; margin:0 auto; } .vvb-sticky-btn { display:flex; align-items:center; justify-content:center; gap:9px; background:linear-gradient(135deg,var(--red) 0%,var(--red-bright) 100%); color:#FFFFFF; text-decoration:none; border-radius:var(--r-lg); font-family:'DM Sans',sans-serif; font-size:1.02rem; font-weight:700; padding:15px 24px; min-height:54px; box-shadow:var(--sh-red); -webkit-tap-highlight-color:transparent; touch-action:manipulation; letter-spacing:.2px; } /* === EXIT INTENT MODAL === */ .vvb-exit-modal { display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.75); align-items:center; justify-content:center; padding:20px; } .vvb-exit-modal.open { display:flex; } .vvb-exit-inner { background:var(--white); border-radius:var(--r-xl); padding:36px 28px; max-width:380px; width:100%; text-align:center; box-shadow:var(--sh-lg); } .vvb-exit-emoji { font-size:2.6rem; margin-bottom:12px; } .vvb-exit-h { font-family:'Cormorant Garamond',Georgia,serif; font-size:1.55rem; font-weight:700; color:var(--dark); margin-bottom:10px; line-height:1.25; text-wrap:balance; } .vvb-exit-sub { font-size:.88rem; color:var(--muted); margin-bottom:24px; line-height:1.65; } .vvb-exit-continue { width:100%; background:linear-gradient(135deg,var(--dark),var(--near-dark)); color:white; border:none; border-radius:var(--r-md); font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:600; padding:15px 24px; cursor:pointer; margin-bottom:10px; min-height:52px; touch-action:manipulation; } .vvb-exit-dismiss { background:none; border:none; color:var(--muted); font-size:.8rem; cursor:pointer; font-family:'DM Sans',sans-serif; touch-action:manipulation; } /* ══════════════════════════════════════════════ LANDING SCREEN STYLES (#vvb-landing) Chapter Gates DNA — dark → cream → dark → final CTA "Apothecary ledger meets clinical truth-telling" ══════════════════════════════════════════════ */ /* Landing screen overrides display:none default — uses its own layout */ #vvb-landing { display: block; /* Always visible — it IS the landing page */ animation: none; /* No intro animation on page load */ background: #0D2015; } /* When quiz is started, landing screen hides like any other screen */ #vvb-landing.hide { display: none; } /* Chapter sections inside landing */ .lp-chapter { width: 100%; } /* ─ HERO chapter ─ */ .lp-hero-chapter { background: #0D2015; position: relative; overflow: hidden; padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem); } .lp-hero-chapter::before { content: ''; position: absolute; bottom: -20%; left: -10%; width: 70%; height: 120%; background: radial-gradient(ellipse at center, rgba(184,146,74,.07) 0%, transparent 65%); pointer-events: none; } .lp-hero-chapter::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; opacity: 0.35; } .lp-inner { max-width: 1100px; margin: 0 auto; } .lp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'DM Sans', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); margin-bottom: clamp(1rem, 3vw, 1.75rem); } .lp-eyebrow::before { content: ''; display: block; width: 24px; height: 1.5px; background: var(--amber); flex-shrink: 0; } .lp-hero-h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.2rem, 6.5vw, 4.8rem); font-weight: 600; line-height: 1.05; letter-spacing: -.025em; color: #FBF7F0; margin-bottom: clamp(1rem, 2.5vw, 1.5rem); max-width: 800px; text-wrap: balance; } .lp-hero-h1 em { font-style: italic; color: #D4A843; } .lp-hero-deck { font-family: 'DM Sans', sans-serif; font-size: clamp(.92rem, 2vw, 1.08rem); line-height: 1.72; color: rgba(251,247,240,.62); max-width: 540px; margin-bottom: clamp(1.75rem, 4.5vw, 2.75rem); font-weight: 300; } .lp-hero-deck strong { color: rgba(251,247,240,.9); font-weight: 500; } /* THE CTA button — gold, premium, not the quiz dark button */ .lp-cta-btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--amber) 0%, #D4A843 100%); color: #0D2015; font-family: 'DM Sans', sans-serif; font-size: clamp(.95rem, 2vw, 1.08rem); font-weight: 700; padding: clamp(15px, 2.5vw, 18px) clamp(28px, 4vw, 42px); border-radius: 6px; border: none; cursor: pointer; letter-spacing: .01em; box-shadow: 0 4px 24px rgba(184,146,74,.45), 0 1px 4px rgba(184,146,74,.2); transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s; min-height: 58px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; text-decoration: none; } .lp-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 40px rgba(184,146,74,.5), 0 2px 8px rgba(184,146,74,.3); } .lp-cta-btn:active { transform: scale(.97); } .lp-cta-arrow { width: 22px; height: 22px; background: rgba(13,32,21,.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; flex-shrink: 0; } .lp-sub-cue { margin-top: 12px; font-size: .75rem; color: rgba(251,247,240,.3); display: flex; align-items: center; gap: 7px; letter-spacing: .04em; } .lp-sub-cue::before { content: '✓'; color: var(--amber); } /* Proof bar at bottom of hero */ .lp-proof-bar { margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-top: clamp(1.25rem, 3vw, 1.75rem); border-top: 1px solid rgba(184,146,74,.15); display: flex; align-items: center; gap: clamp(.75rem, 2.5vw, 2rem); flex-wrap: wrap; } .lp-proof-item { display: flex; align-items: center; gap: 9px; } .lp-proof-num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 700; color: #D4A843; letter-spacing: -.02em; line-height: 1; } .lp-proof-desc { font-size: .72rem; color: rgba(251,247,240,.38); font-weight: 500; line-height: 1.4; max-width: 80px; } .lp-proof-divider { width: 1px; height: 32px; background: rgba(184,146,74,.18); flex-shrink: 0; } /* ─ PROBLEM chapter (cream) ─ */ .lp-problem-chapter { background: #FBF7F0; padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3rem); } .lp-section-label { font-size: .67rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--amber-mid); display: flex; align-items: center; gap: 10px; margin-bottom: clamp(1rem, 2.5vw, 1.5rem); } .lp-section-label::before { content: ''; display: block; width: 22px; height: 1.5px; background: var(--amber); flex-shrink: 0; } .lp-h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.75rem, 4.5vw, 3.2rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: #0D2015; text-wrap: balance; margin-bottom: clamp(1rem, 2.5vw, 1.5rem); } .lp-h2 em { font-style: italic; color: #1B4D2E; } .lp-body { font-size: clamp(.9rem, 1.8vw, 1rem); line-height: 1.75; color: #6B5C4C; max-width: 580px; margin-bottom: clamp(.75rem, 2vw, 1rem); } .lp-pull-quote { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.2rem, 3vw, 1.75rem); font-style: italic; font-weight: 400; color: #0D2015; line-height: 1.42; letter-spacing: -.01em; border-left: 3px solid var(--amber); padding-left: clamp(1rem, 2.5vw, 1.75rem); margin: clamp(2rem, 5vw, 3.5rem) 0; max-width: 660px; } /* Symptom ledger — NOT icon cards */ .lp-symptom-ledger { border: 1px solid rgba(184,146,74,.2); border-radius: 12px; overflow: hidden; margin-top: clamp(1.5rem, 4vw, 2.5rem); } .lp-symptom-row { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid rgba(184,146,74,.15); } .lp-symptom-row:last-child { border-bottom: none; } .lp-symptom-cell { background: #FFFFFF; padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.25rem, 3vw, 1.75rem); border-bottom: 1px solid rgba(184,146,74,.1); } .lp-symptom-cell:last-child { border-bottom: none; } .lp-sym-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.05rem; font-weight: 600; color: #0D2015; margin-bottom: 4px; } .lp-sym-body { font-size: .84rem; color: #6B5C4C; line-height: 1.6; } @media (min-width: 580px) { .lp-symptom-row { grid-template-columns: 1fr 1fr; } .lp-symptom-cell { border-right: 1px solid rgba(184,146,74,.1); border-bottom: none; } .lp-symptom-cell:last-child { border-right: none; } } @media (min-width: 860px) { .lp-symptom-row { grid-template-columns: 1fr 1fr 1fr; } } /* ─ MECHANISM chapter (dark) ─ */ .lp-mechanism-chapter { background: #0D2015; padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3rem); position: relative; overflow: hidden; } .lp-mechanism-chapter::before { content: ''; position: absolute; top: -30%; right: -15%; width: 60%; height: 120%; background: radial-gradient(ellipse, rgba(184,146,74,.05) 0%, transparent 65%); pointer-events: none; } .lp-mech-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; position: relative; z-index: 1; } @media (min-width: 860px) { .lp-mech-grid { grid-template-columns: 1fr 1fr; } } .lp-mech-body { font-size: clamp(.88rem, 1.8vw, 1rem); line-height: 1.75; color: rgba(251,247,240,.65); margin-bottom: clamp(.75rem, 2vw, 1rem); } .lp-mech-body strong { color: rgba(251,247,240,.92); font-weight: 500; } /* Ingredient table — ledger style */ .lp-ing-table { border: 1px solid rgba(184,146,74,.2); border-radius: 12px; overflow: hidden; margin-top: clamp(1.25rem, 3vw, 2rem); } .lp-ing-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(184,146,74,.12); background: rgba(255,255,255,.03); transition: background .18s; } .lp-ing-row:last-child { border-bottom: none; } .lp-ing-row:hover { background: rgba(255,255,255,.06); } .lp-ing-name { padding: clamp(.85rem, 2vw, 1.1rem) clamp(1rem, 2.5vw, 1.4rem); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1rem; font-weight: 600; color: #D4A843; border-right: 1px solid rgba(184,146,74,.12); display: flex; align-items: center; } .lp-ing-desc { padding: clamp(.85rem, 2vw, 1.1rem) clamp(1rem, 2.5vw, 1.4rem); font-size: .82rem; color: rgba(251,247,240,.52); line-height: 1.55; display: flex; align-items: center; } /* Stat block */ .lp-stat-block { background: rgba(255,255,255,.04); border: 1px solid rgba(184,146,74,.22); border-radius: 14px; padding: clamp(1.5rem, 3.5vw, 2.25rem); display: flex; flex-direction: column; gap: clamp(1.1rem, 2.5vw, 1.75rem); } .lp-stat-row { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; } .lp-stat-num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 700; color: #D4A843; line-height: 1; letter-spacing: -.03em; } .lp-stat-text { font-size: .84rem; color: rgba(251,247,240,.55); line-height: 1.6; padding-top: 3px; } .lp-stat-divider { height: 1px; background: rgba(184,146,74,.15); } /* ─ PROOF chapter (parchment) ─ */ .lp-proof-chapter { background: #F2EDE5; padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3rem); } .lp-count-bar { display: flex; gap: clamp(1.25rem, 3.5vw, 3rem); flex-wrap: wrap; align-items: center; padding: clamp(1.25rem, 3vw, 1.75rem) 0; border-top: 1px solid rgba(184,146,74,.2); border-bottom: 1px solid rgba(184,146,74,.2); margin: clamp(1.5rem, 4vw, 2.5rem) 0; } .lp-count-item { display: flex; flex-direction: column; gap: 3px; } .lp-count-num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; color: #0D2015; line-height: 1; letter-spacing: -.03em; } .lp-count-label { font-size: .68rem; color: #6B5C4C; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } /* Testimonial grid */ .lp-testi-grid { display: grid; grid-template-columns: 1fr; gap: clamp(.9rem, 2vw, 1.25rem); margin-top: clamp(1.5rem, 4vw, 2.5rem); } @media (min-width: 860px) { .lp-testi-grid { grid-template-columns: 1fr 1fr 1fr; } .lp-testi-featured { grid-column: 1 / 2; grid-row: 1 / 3; } } .lp-testi-card { background: #FFFFFF; border: 1px solid rgba(184,146,74,.18); border-radius: 14px; padding: clamp(1.25rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 2px 12px rgba(13,32,21,.05); transition: box-shadow .25s, transform .25s; } @media (hover: hover) { .lp-testi-card:hover { box-shadow: 0 8px 28px rgba(13,32,21,.1); transform: translateY(-2px); } } .lp-testi-featured { background: #0D2015; border-color: rgba(184,146,74,.28); } .lp-testi-stars { color: var(--amber); font-size: .85rem; letter-spacing: 2px; line-height: 1; } .lp-testi-quote { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(.98rem, 2vw, 1.15rem); font-style: italic; line-height: 1.62; color: #0D2015; flex: 1; } .lp-testi-featured .lp-testi-quote { color: rgba(251,247,240,.9); } .lp-testi-person { display: flex; align-items: center; gap: 11px; border-top: 1px solid rgba(184,146,74,.15); padding-top: 12px; } .lp-testi-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #F0DFC0, var(--amber)); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .lp-testi-name { font-size: .85rem; font-weight: 700; color: #0D2015; line-height: 1.2; } .lp-testi-featured .lp-testi-name { color: #D4A843; } .lp-testi-detail { font-size: .72rem; color: #6B5C4C; line-height: 1.3; } .lp-testi-featured .lp-testi-detail { color: rgba(251,247,240,.38); } /* ─ STEPS chapter (forest green) ─ */ .lp-steps-chapter { background: #1B4D2E; padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3rem); position: relative; overflow: hidden; } .lp-steps-chapter::after { content: ''; position: absolute; bottom: 0; right: 0; width: 40%; height: 50%; background: radial-gradient(ellipse at 80% 80%, rgba(184,146,74,.08) 0%, transparent 65%); pointer-events: none; } .lp-steps { display: flex; flex-direction: column; gap: 0; position: relative; z-index: 1; margin-top: clamp(1.5rem, 4vw, 2.5rem); } .lp-step { display: grid; grid-template-columns: 52px 1fr; gap: clamp(.9rem, 2vw, 1.4rem); padding: clamp(1.1rem, 2.5vw, 1.6rem) 0; border-bottom: 1px solid rgba(184,146,74,.14); align-items: start; } .lp-step:last-child { border-bottom: none; } .lp-step-num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: rgba(184,146,74,.28); line-height: 1; letter-spacing: -.04em; padding-top: 2px; } .lp-step-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.05rem, 2.5vw, 1.38rem); font-weight: 600; color: #FBF7F0; line-height: 1.2; margin-bottom: 6px; } .lp-step-body { font-size: .87rem; color: rgba(251,247,240,.52); line-height: 1.68; } /* ─ FINAL CTA chapter (darkest) ─ */ .lp-final-cta-chapter { background: #071a0e; padding: clamp(4.5rem, 10vw, 8rem) clamp(1.25rem, 5vw, 3rem); position: relative; overflow: hidden; text-align: center; } .lp-final-cta-chapter::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(27,77,46,.3) 0%, transparent 70%); pointer-events: none; } .lp-final-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; } .lp-final-h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.9rem, 5vw, 3.8rem); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; color: #FBF7F0; margin-bottom: clamp(.75rem, 2vw, 1.1rem); text-wrap: balance; } .lp-final-h2 em { font-style: italic; color: #D4A843; } .lp-final-sub { font-size: clamp(.9rem, 1.8vw, 1.05rem); color: rgba(251,247,240,.48); line-height: 1.72; font-weight: 300; margin-bottom: clamp(1.75rem, 4.5vw, 3rem); max-width: 520px; margin-left: auto; margin-right: auto; } .lp-final-cues { display: flex; align-items: center; justify-content: center; gap: clamp(.9rem, 2.5vw, 1.75rem); flex-wrap: wrap; margin-top: clamp(1.1rem, 2.5vw, 1.75rem); } .lp-final-cue { font-size: .73rem; color: rgba(251,247,240,.28); display: flex; align-items: center; gap: 5px; font-weight: 500; letter-spacing: .03em; } .lp-final-cue::before { content: '✓'; color: var(--amber); font-size: .75rem; } /* ── TRUST BAR ──────────────────────────────────────────────────────────── */ /* Replaces the old proof bar — no prices, no ratings, no purchase signals */ .lp-trust-bar { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin-top: clamp(2rem, 5vw, 3rem); padding-top: clamp(1.25rem, 3vw, 1.75rem); border-top: 1px solid rgba(184,146,74,.18); } .lp-trust-item { display: flex; align-items: center; gap: 10px; padding: clamp(.6rem, 1.5vw, .75rem) 0; flex: 1 1 140px; min-width: 0; } .lp-trust-divider { width: 1px; height: 38px; background: rgba(184,146,74,.18); flex-shrink: 0; margin: 0 clamp(.75rem, 2.5vw, 1.5rem); } .lp-trust-icon { width: 22px; height: 22px; color: var(--amber); flex-shrink: 0; opacity: .9; } .lp-trust-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .lp-trust-big { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1rem, 2.5vw, 1.2rem); font-weight: 700; color: #D4A843; line-height: 1; letter-spacing: -.01em; white-space: nowrap; } .lp-trust-label { font-size: .68rem; color: rgba(251,247,240,.42); font-weight: 500; letter-spacing: .03em; line-height: 1.3; } /* Mobile: 2×2 grid for trust bar */ @media (max-width: 560px) { .lp-trust-bar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 3vw, 1.25rem); padding-top: clamp(1rem, 3vw, 1.5rem); } .lp-trust-divider { display: none; } .lp-trust-item { flex: unset; padding: 0; } } /* Very small: single column */ @media (max-width: 320px) { .lp-trust-bar { grid-template-columns: 1fr; } } /* CTA button: full width on mobile */ @media (max-width: 600px) { .lp-cta-btn { width: 100%; justify-content: center; } } /* Topbar padding on very small screens */ @media (max-width: 380px) { .vvb-topbar { padding: 12px 14px 10px; } } /* Hero heading on very small screens */ @media (max-width: 420px) { .lp-hero-h1 { font-size: 2rem; letter-spacing: -.02em; } } /* Tap feedback */ .lp-cta-btn:active { transform: scale(.97); } /* Deck paragraph: breathe around the br on mobile */ .lp-hero-deck br { display: block; margin-bottom: .35em; } /* 9. Sticky CTA bar for landing page on mobile — shows after hero scrolls away */ .lp-sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(13,32,21,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 10px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)); z-index: 150; border-top: 1px solid rgba(184,146,74,.2); box-shadow: 0 -4px 24px rgba(0,0,0,.4); } @media (max-width: 640px) { .lp-sticky-bar { display: block; } /* Add bottom space so sticky bar doesn't cover final CTA content */ .lp-final-cta-chapter { padding-bottom: calc(clamp(4.5rem,10vw,8rem) + 70px); } } .lp-sticky-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, var(--amber) 0%, #D4A843 100%); color: #0D2015; font-family: 'DM Sans', sans-serif; font-size: .97rem; font-weight: 700; padding: 14px 24px; border-radius: 6px; border: none; cursor: pointer; width: 100%; min-height: 52px; letter-spacing: .01em; box-shadow: 0 4px 20px rgba(184,146,74,.45); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* Accessibility */ @media (forced-colors: active) { .lp-cta-btn, .lp-sticky-btn { border: 2px solid ButtonText; } } /* === SCROLL REVEAL === */ .sr { opacity: 0; transform: translateY(22px); transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1); will-change: opacity, transform; } .sr.sr--visible { opacity: 1; transform: none; } .sr--delay-1 { transition-delay: 0.08s; } .sr--delay-2 { transition-delay: 0.16s; } .sr--delay-3 { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .sr { opacity: 1; transform: none; transition: none; } } /* ===================================================== MOBILE-FIRST OPTIMIZATIONS Target: iOS Safari + Android Chrome, 375–430px viewport Principles applied: - 48px minimum touch targets (Fitts' Law) - Thumb zone: primary CTAs anchored to bottom - No hover transforms on touch devices - Larger body text for one-handed, bright-sun reading - Reduced animation cost for low-end Android - Safe area respect for notch/home indicator ===================================================== */ /* Fix unguarded hover on landing CTA — fires on touch, causes jarring transform */ @media (hover: none) { .lp-cta-btn:hover { transform: none; box-shadow: var(--sh-gold); } .lp-ing-row:hover { background: transparent; } } /* Stick Next button to bottom of viewport on mobile — keeps it in thumb zone */ @media (max-width: 540px) { .vvb-q-wrap { padding-bottom: max(84px, calc(env(safe-area-inset-bottom, 0px) + 84px)); } .vvb-btn-next { position: fixed; bottom: max(16px, env(safe-area-inset-bottom, 16px)); left: 16px; right: 16px; width: calc(100% - 32px); max-width: none; z-index: 50; border-radius: var(--r-lg); } /* Larger option card tap targets on small screens */ .vvb-opt { padding: 14px 16px; min-height: 64px; } .vvb-opt-sub { font-size: .875rem; } /* Question text slightly tighter on 375px */ .vvb-q-text { font-size: clamp(1.35rem, 5.5vw, 1.9rem); } /* Back button — bigger tap target */ .vvb-back { min-height: 44px; min-width: 44px; padding: 10px 4px; display: inline-flex; align-items: center; } /* Email gate — more breathing room on small screens */ .vvb-email-wrap { padding: 28px 20px 80px; } .vvb-email-h { font-size: 1.45rem; } /* Results page — full-width on mobile */ .vvb-result-body { padding: 0 12px; } .vvb-cta-block { margin: 16px 12px 0; padding: 28px 20px; } .vvb-result-sec { padding: 20px 18px; } .vvb-prod-rec { padding: 20px 18px; } .vvb-testi { padding: 18px 18px; } /* Exit dismiss — bigger tap zone */ .vvb-exit-dismiss { display: block; min-height: 44px; line-height: 44px; padding: 0 16px; } /* Processing screen — less vertical crowding */ .vvb-processing-wrap { padding: 60px 24px 48px; } /* Trust pills — full width rows on smallest screens */ .vvb-trust { gap: 8px; padding: 16px 12px; } } /* Extra-small phones (SE, 320px) */ @media (max-width: 360px) { .vvb-q-text { font-size: 1.3rem; } .vvb-opt-title { font-size: .9rem; } .vvb-opt-sub { font-size: .82rem; } } /* Reduce backdrop-filter on Android (expensive, causes jank on low-end) */ @supports not (backdrop-filter: blur(1px)) { .vvb-sticky-cta { background: rgba(7,26,14,0.98); } } /* Ensure score/hero section doesn't overflow on narrow screens */ @media (max-width: 400px) { .vvb-score-wrap { flex-direction: column; align-items: center; text-align: center; gap: 10px; } .vvb-score-num { font-size: 2.4rem; } .vvb-result-hero { padding: 28px 16px 22px; } }
VerdaVital
🔒 Private & Secure
Free Skin Assessment

You've tried everything.
Your skin is still broken.

Not bad luck. Not bad products. Something deeper is wrong — and 7 questions will tell you exactly what it is.
60 seconds. Free. No email to start.

No email to start · Takes 60 seconds · Free
10,000+ women have taken this
60 sec start to finish
Private answers stay with you
100% free no card, no catch
Question 1 of 7

When does your skin feel worst?

Pick the one that hits closest. This shapes your whole profile.

A
All day. There's no good time.
Itching, red patches, cracking. I've tried everything. Nothing holds.
B
The second I touch a product.
Things that work for others cause me redness or stinging.
C
By 2pm — the moisturizer is already gone.
Tight, flaky, rough. I reapply constantly. It never actually holds.
D
At night — I wake up scratching.
My skin is worst after dark. Every product feels like a gamble.
E
Since my body changed — pregnancy, hormones, or stress.
My skin was fine. Then something shifted and nothing has been the same since.
Question 2 of 7

How old are you?

Skin works differently at each stage of life. Your age helps us read the rest of your answers correctly.

A
Under 25
Your skin bounces back fast when it gets what it actually needs. That works in your favor.
B
25 to 34
The most common age we see barrier damage. Stress, hormones, and environment all hit at once during these years.
C
35 to 44
Your skin produces less oil than it used to. The barrier needs more support to stay intact.
D
45 or older
Repair takes longer at this stage — but it absolutely happens. The right ingredients matter more here than at any other age.
Question 3 of 7

How much does it actually affect your day?

Be honest. This is how we measure how deep the damage goes right now.

A
It's annoying, but I get through the day.
Bad days happen. Not constant. I can mostly push through it.
B
I think about it all day. I cover up.
It affects my confidence. I avoid things because of it.
C
It runs my life. I cancel plans.
I wake up scratching. It's exhausting. It's always on my mind.
D
I've stopped fighting it. I just accept it now.
That's not something I'm okay with saying out loud — but it's true.
Question 4 of 7

How long has your skin been like this?

Duration changes what your skin actually needs to repair. Pick the closest.

A
Less than 6 months.
Something changed recently — a pregnancy, hormones, stress, or a new product. Still figuring out what triggered it.
B
6 months to 2 years.
It started small. It's getting harder to control.
C
2 to 5 years.
I've tried a lot. Some things help a little. Nothing has fixed it.
D
More than 5 years.
I barely remember what normal skin felt like.
Question 5 of 7

What have you already tried?

Pick everything. Your results will show exactly why each one couldn't work.

Select all that apply.
A
Steroid creams
Helped at first. Then my skin needed more — or came back worse when I stopped.
B
Store creams — CeraVe, Aveeno, Eucerin
Had to reapply every 2 hours. They never actually fixed anything.
C
Natural oils or balms
Coconut oil, shea butter, other natural options. Some helped briefly. Then didn't.
D
Serums, vitamin C, or retinol
Made things worse. Too strong for skin that's already damaged.
E
I haven't tried much yet
Just starting to look for answers. Your results still give you a full profile.
Question 6 of 7

What do you think is actually wrong?

No wrong answer. Your best guess helps us narrow your profile down.

Something most people don't know: Most creams only touch the top of your skin. When the barrier is broken, the problem is underneath — and the fix has to reach there too.
A
My skin's outer wall is cracked.
Water leaks out, irritants get in. Nothing I put on the surface helps for long.
B
My skin is stuck in reaction mode.
Always red or inflamed. Even gentle things set it off.
C
My skin can't hold moisture on its own.
Lotion helps for an hour. Then it's gone. My skin can't seem to stay balanced.
D
Honestly, I have no idea.
I just know nothing has worked. That's why I'm here.
Question 7 of 7 — Last one

If your skin actually healed — what would that change for you?

This becomes the goal your results are built around. There's no wrong answer.

A
Sleep through the night.
Just one full night without waking up to scratch. I can't remember the last time that happened.
B
Stop hiding what I wear.
Short sleeves. No cover-up. No dread. Just being there without planning around my skin.
C
Look in the mirror and not cringe.
Not perfect. Just calm. Not something I have to prepare myself to see.
D
Stop thinking about my skin every single day.
It's the first thing I think about in the morning. I want that to stop.
🌿

Where should we send your skin profile?

We'll email it to you so you have it even if you close this page.

What your results will show:
🔥 Chronic Flarer — Broken Barrier
⚡ Reactive Sensitive — Stripped Barrier
💧 Barrier Breakdown — Moisture Loss
Your profile is ready — just tell us where to send it
🔒 No spam. No selling your data. Unsubscribe anytime.
🔬

Building your skin barrier profile...

Identifying your skin barrier type...
YOUR SKIN BARRIER PROFILE

Loading your results...

-
Barrier Damage Score
Calculating...
🍯 Get My Match — Start My Repair
🛡️ 60-Day No-Questions-Asked Money-Back Guarantee
🔬 What Your Profile Means

❌ Why Nothing You've Tried Has Worked

⭐ Your Personalized Match

💬 From Someone With Your Exact Profile
★★★★★
Loading...

VerdaVital Honey Tallow Balm
🐄 100% Grass-Fed Tallow
🍯 Raw Honey
🚫 No Parabens
🌿 No Synthetic Fragrance
🇺🇸 Handcrafted in USA
🛡️ 60-Day Guarantee
🍯 Your Next Step

🍯 Start My Skin Repair
🛡️ 60-Day No-Questions-Asked Money-Back Guarantee