/* ==================================================================
N.D.R. Method - the design system for both landing pages.
The layout, spacing scale, type scale, section rhythm and CTA are taken
directly from the reference funnel: one centred column, alternating black
and white sections, a repeated shimmer pill CTA, and the checkout as the
final section of the page rather than a separate step.
What changed is that the palette is tokenised, so the men's red and the
women's pink are one attribute swap on :
red
pink
Fonts match the reference: Open Sans 800 for headings and the CTA,
Assistant for body copy.
================================================================== */
/* ---------- palette ---------- */
:root,
[data-theme="men"] {
--primary: #E21D2F;
--primary-dark: #981423;
--primary-light: #FF6B78;
--primary-soft: #FFE9EC;
--primary-glow: rgba(226, 29, 47, 0.18);
--primary-shadow: rgba(226, 29, 47, 0.55);
--primary-line: rgba(226, 29, 47, 0.35);
/* The call to action runs brighter than the brand red on purpose: it has to
win against a black section, and the identity red goes muddy at that size. */
--cta-dark: #B31424;
--cta-mid: #FF2437;
--cta-hi: #FF8F99;
--cta-shadow: rgba(255, 36, 55, 0.55);
--hero-glow: rgba(226, 29, 47, 0.30);
}
[data-theme="women"] {
--primary: #EB4775;
--primary-dark: #A51E48;
--primary-light: #FF9BB5;
--primary-soft: #FFF0F5;
--primary-glow: rgba(235, 71, 117, 0.18);
--primary-shadow: rgba(235, 71, 117, 0.55);
--primary-line: rgba(235, 71, 117, 0.35);
--cta-dark: #C42558;
--cta-mid: #FF5183;
--cta-hi: #FFB3C7;
--cta-shadow: rgba(255, 81, 131, 0.55);
--hero-glow: rgba(235, 71, 117, 0.30);
}
:root {
--black: #080808;
--checkout-bg: #05070d;
--ink: #171717;
--off-white: #F7F7F5;
--white: #FFFFFF;
--muted: #A6A6A6;
--muted-dark: #6B6B6B;
--line: #E6E6E6;
--ok: #56ffa0;
--warn: #ffcf5c;
--font-head: "Open Sans", "Assistant", Arial, sans-serif;
--font-body: "Assistant", Arial, sans-serif;
}
/* ---------- reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; scroll-behavior: smooth; background: #000; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
background: var(--white);
color: #111;
line-height: 1.7;
overflow-x: hidden;
}
h1, h2, .quote, .cta, .co-pay {
font-family: var(--font-head);
font-weight: 800;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; }
::selection { background: var(--primary); color: var(--white); }
/* ---------- HERO (black, centred) ---------- */
.hero {
position: relative;
background: #000;
color: #fff;
text-align: center;
padding: 26px 20px 80px;
width: 100%;
overflow: hidden;
}
/* The ambient glow behind the hero. It sits under the content and never
intercepts a tap, so the CTA stays clickable across the whole button. */
.hero::before {
content: "";
position: absolute;
top: -12%;
left: 50%;
width: 130%;
max-width: 1100px;
aspect-ratio: 1 / 1;
transform: translateX(-50%);
background: radial-gradient(circle at 50% 42%, var(--hero-glow) 0%, rgba(0, 0, 0, 0) 62%);
pointer-events: none;
z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
font-size: clamp(31.5px, 6.3vw, 58.8px);
line-height: 1.25;
max-width: 900px;
margin: 0 auto;
}
.hero h1 em { font-style: normal; color: var(--primary); }
.hero .sub {
font-size: clamp(15px, 2.3vw, 20px);
opacity: .85;
margin-top: 24px;
font-style: italic;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.hero .byline {
margin-top: 18px;
font-size: 13px;
letter-spacing: .16em;
text-transform: uppercase;
color: #9a9a9a;
font-weight: 600;
font-style: normal;
}
/* the glass pill above the headline: five stars and the live member count */
.badge {
position: relative;
display: inline-flex;
align-items: center;
gap: 9px;
background: rgba(255, 255, 255, .05);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
color: #fff;
font-weight: 600;
font-size: clamp(13px, 2vw, 16px);
padding: 10px 22px;
border-radius: 50px;
margin-bottom: 26px;
border: 1px solid var(--primary-line);
box-shadow: 0 4px 20px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.badge .stars { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.badge .stars svg { width: 15px; height: 15px; display: block; fill: var(--primary); }
.badge b { font-weight: 800; font-variant-numeric: tabular-nums; }
/* The count nudges when it changes, and a "+1" lifts off the pill beside it. */
@keyframes stuTick { 0% { transform: scale(1); } 35% { transform: scale(1.16); color: #fff; } 100% { transform: scale(1); } }
.stu-tick { display: inline-block; animation: stuTick .55s ease-out; }
.stu-plus {
position: absolute;
inset-inline-end: -8px;
top: -14px;
pointer-events: none;
font-weight: 800;
font-size: clamp(15px, 2.2vw, 19px);
letter-spacing: .2px;
color: var(--cta-mid);
text-shadow: 0 0 16px var(--cta-shadow);
animation: stuPlus 2.2s cubic-bezier(.22, .9, .3, 1) forwards;
}
@keyframes stuPlus {
0% { opacity: 0; transform: translate(0, 8px) scale(.7); }
14% { opacity: 1; transform: translate(0, 0) scale(1.2); }
30% { transform: translate(0, -3px) scale(1); }
70% { opacity: 1; transform: translate(0, -16px) scale(1); }
100% { opacity: 0; transform: translate(0, -34px) scale(.96); }
}
@media (prefers-reduced-motion: reduce) { .stu-plus { animation: stuPlus 2.2s linear forwards; } .stu-tick { animation: none; } }
/* the framed hero image, glowing in the funnel's colour */
.neon-frame {
margin: 46px auto 0;
max-width: 760px;
border: 3px solid var(--primary);
border-radius: 14px;
box-shadow:
0 0 8px var(--primary),
0 0 22px var(--primary-light),
0 0 48px var(--primary),
inset 0 0 18px var(--primary-glow);
overflow: hidden;
background: #05080f;
line-height: 0;
aspect-ratio: 16 / 9;
}
.neon-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
/* Until an image file exists the frame holds its exact place and says so. */
.neon-frame.pending { display: flex; align-items: center; justify-content: center; line-height: 1.7; }
.neon-frame.pending img { display: none; }
.neon-frame.pending::after {
content: "Hero image";
font-family: var(--font-body);
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: #4a4a4a;
}
/* ---------- the shimmer CTA ---------- */
.cta {
display: inline-block;
margin-top: 20px;
font-size: clamp(20px, 3vw, 28px);
color: #fff;
padding: 20px 88px;
border: none;
border-radius: 50px;
cursor: pointer;
text-decoration: none;
max-width: 100%;
background: linear-gradient(110deg,
var(--cta-dark) 25%, var(--cta-mid) 45%, var(--cta-hi) 50%, var(--cta-mid) 55%, var(--cta-dark) 75%);
background-size: 200% 100%;
box-shadow: 0 8px 30px var(--cta-shadow);
animation: shimmer 2.4s linear infinite;
transition: transform .18s ease, box-shadow .18s ease;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.cta:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 44px var(--cta-shadow); }
.cta:active { transform: translateY(0) scale(.99); }
/* the label beats, so the eye keeps coming back to it */
.cta-beat {
display: inline-block;
font-size: .9em;
white-space: nowrap;
transform-origin: center;
animation: ctaBeat 1.9s ease-in-out infinite;
}
@keyframes ctaBeat {
0%, 55%, 100% { transform: scale(1); }
12% { transform: scale(1.065); }
24% { transform: scale(.975); }
36% { transform: scale(1.04); }
}
/* a small, still arrow: it only slides on hover, so it never competes */
.cta-arw {
display: inline-block;
width: .85em;
height: .85em;
vertical-align: -.1em;
margin-inline-start: .4em;
transition: transform .2s ease;
}
.cta:hover .cta-arw, .co-pay:hover .cta-arw { transform: translateX(4px); }
.co-pay .cta-arw { width: 1em; height: 1em; vertical-align: -.15em; margin-inline-start: .35em; }
.cta-sub {
display: block;
font-size: 11px;
font-weight: 600;
opacity: .9;
margin-top: 4px;
font-family: var(--font-body);
letter-spacing: .1px;
white-space: nowrap;
}
.cta-wrap { text-align: center; }
.cta-note { display: block; margin-top: 10px; font-size: 13px; color: #9a9a9a; }
.sec-light .cta-note { color: #777; }
/* ---------- BODY (white) ---------- */
.body {
max-width: 760px;
margin: 0 auto;
padding: 44px 24px 100px;
}
.body h2 {
text-align: center;
font-size: clamp(24px, 4vw, 34px);
margin: 56px 0 22px;
}
.body h2:first-child { margin-top: 0; }
.body p { font-size: 18px; margin: 18px 0; }
.center { text-align: center; }
.italic { font-style: italic; }
.big { font-weight: 800; }
.space-top { margin-top: 52px !important; }
.beat { margin-top: 96px !important; }
.quote {
text-align: center;
font-size: clamp(22px, 4vw, 30px);
font-style: italic;
margin: 84px 0 50px;
}
.quote em { font-style: italic; color: var(--primary); }
/* An in-story photograph. Portrait crops are held narrower than the reading
column so they punctuate the copy rather than interrupt it. */
.photo { max-width: 440px; margin: 36px auto; border-radius: 18px; overflow: hidden; line-height: 0; }
.photo img { width: 100%; height: auto; }
.rule { width: 44px; height: 4px; background: var(--primary); border-radius: 4px; margin: 40px auto; }
/* tick list */
.checks { list-style: none; max-width: 520px; margin: 24px auto; font-size: 19px; }
.checks li { margin: 12px 0; position: relative; padding-inline-start: 32px; line-height: 1.55; }
.checks li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 7px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--primary);
-webkit-mask: url("data:image/svg+xml;utf8,") center / 13px no-repeat,
linear-gradient(#000, #000);
-webkit-mask-composite: xor;
mask: url("data:image/svg+xml;utf8,") center / 13px no-repeat,
linear-gradient(#000, #000);
mask-composite: exclude;
}
/* the five day cards */
.days { max-width: 680px; margin: 30px auto 0; }
.day {
display: flex;
gap: 16px;
align-items: flex-start;
border: 1px solid #e6e9f0;
border-radius: 14px;
padding: 20px 22px;
margin: 12px 0;
background: #fff;
box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
text-align: start;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.day:hover { transform: translateY(-1px); border-color: var(--primary); box-shadow: 0 6px 18px rgba(16, 24, 40, .09); }
.day-n {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--primary);
color: #fff;
font-family: var(--font-head);
font-weight: 800;
font-size: 19px;
display: flex;
align-items: center;
justify-content: center;
}
.day h3 { font-family: var(--font-head); font-weight: 800; font-size: 18px; line-height: 1.35; margin-bottom: 4px; }
.day p { font-size: 16px; color: #555; margin: 0; line-height: 1.6; }
/* what is included */
.incl { max-width: 680px; margin: 30px auto 0; border: 1px solid #e6e9f0; border-radius: 14px; overflow: hidden; text-align: start; }
.incl-row { display: flex; gap: 14px; align-items: flex-start; padding: 20px 22px; border-bottom: 1px solid #e6e9f0; }
.incl-row:last-child { border-bottom: none; }
.incl-row b { display: block; font-size: 17px; font-weight: 800; line-height: 1.35; }
.incl-row span { display: block; font-size: 16px; color: #555; margin-top: 3px; line-height: 1.6; }
.incl-tick {
flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
background: var(--primary); color: #fff;
display: inline-flex; align-items: center; justify-content: center; margin-top: 3px;
}
.incl-tick svg { width: 12px; height: 12px; }
/* the two column contrast block */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 34px auto 0; max-width: 680px; text-align: start; }
.contrast > div { border-radius: 14px; padding: 22px; border: 1px solid rgba(255, 255, 255, .16); }
.contrast h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; font-family: var(--font-body); font-weight: 800; }
.contrast ul { list-style: none; }
.contrast li { font-size: 16px; line-height: 1.5; margin: 11px 0; padding-inline-start: 18px; position: relative; }
.contrast li::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; }
.contrast .now { background: rgba(255, 255, 255, .04); }
.contrast .now h3 { color: #9a9a9a; }
.contrast .now li::before { background: #6b6b6b; }
.contrast .after { background: var(--primary-glow); border-color: var(--primary); }
.contrast .after h3 { color: var(--primary-light); }
.contrast .after li::before { background: var(--primary); }
@media (max-width: 560px) { .contrast { grid-template-columns: 1fr; } }
/* ---------- the dark break section ---------- */
.warn { background: #000; color: #fff; text-align: center; padding: 78px 24px; width: 100%; }
.warn h2 { color: #fff; font-size: clamp(30px, 5.5vw, 46px); margin: 0 auto 34px; }
.warn p { font-size: clamp(17px, 2.4vw, 20px); max-width: 720px; margin: 18px auto; opacity: .92; }
.warn .quote em { color: var(--primary-light); }
/* ---------- FAQ ---------- */
.faq-section { background: #fff; color: #111; padding: 84px 24px 96px; width: 100%; }
.faq-section h2 { text-align: center; font-size: clamp(26px, 4.6vw, 38px); margin: 0 0 14px; }
.faq-section h2.beat { margin-top: 96px !important; }
.faq-section .faq-sub { text-align: center; font-size: 17px; color: #777; margin: 0 auto 30px; max-width: 560px; }
.faq-section p { font-size: 18px; margin: 18px 0; }
.faq { max-width: 680px; margin: 26px auto 0; }
.faq-item { border: 1px solid #000; border-radius: 10px; margin: 14px 0; overflow: hidden; background: #fff; }
.faq-q {
font-family: var(--font-head);
font-weight: 800;
font-size: clamp(17px, 3vw, 21px);
margin: 0;
padding: 18px 20px;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
line-height: 1.4;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: "+"; font-size: 26px; font-weight: 400; line-height: 1; color: var(--primary); flex: 0 0 auto; }
.faq-item[open] .faq-q::after { content: "-"; }
.faq-a { font-size: 17px; color: #333; margin: 0; line-height: 1.75; padding: 0 20px 20px; }
/* ---------- checkout ---------- */
.checkout { background: var(--checkout-bg); color: #fff; padding: 80px 20px 90px; width: 100%; }
.checkout-inner { max-width: 640px; margin: 0 auto; }
.checkout h2 { text-align: center; font-size: clamp(26px, 4.6vw, 38px); margin: 0 0 8px; }
.checkout .co-sub { text-align: center; color: #9a9a9a; font-size: 16px; margin: 0 0 34px; }
.co-card {
background: rgba(255, 255, 255, .045);
border: 1px solid var(--primary-line);
border-radius: 18px;
padding: 28px 24px;
box-shadow: 0 0 40px var(--primary-glow);
}
.co-field { margin-bottom: 14px; }
.co-field label { display: block; font-size: 14px; font-weight: 600; color: #d8d8d8; margin-bottom: 6px; }
.co-field input {
width: 100%;
padding: 14px 16px;
font-size: 16px; /* 16px or iOS zooms the page on focus */
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, .18);
background: rgba(255, 255, 255, .07);
color: #fff;
font-family: inherit;
outline: none;
transition: border-color .15s;
}
.co-field input:focus { border-color: var(--primary); }
.co-field input::placeholder { color: #8a8a8a; }
.co-hint { display: block; font-size: 12px; color: #8a8a8a; margin: 6px 2px 0; }
/* order bump: dashed and inviting when off, solid and settled when on */
.bump {
position: relative;
display: flex;
gap: 12px;
align-items: flex-start;
border: 2px dashed var(--warn);
background: rgba(255, 207, 92, .07);
border-radius: 14px;
padding: 16px 16px 14px;
margin: 16px 0;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.bump:hover { background: rgba(255, 207, 92, .12); }
.bump.checked { border-style: solid; background: rgba(86, 255, 160, .08); border-color: var(--ok); }
.bump input { margin-top: 5px; width: 20px; height: 20px; accent-color: var(--ok); flex: 0 0 auto; cursor: pointer; }
.bump-title { display: block; font-weight: 800; font-size: 16px; line-height: 1.45; }
.bump-rec {
display: inline-block; background: var(--warn); color: #3a2a00;
font-size: 11px; font-weight: 800; border-radius: 6px;
padding: 2px 8px; margin-inline-start: 6px; vertical-align: middle;
}
.bump-blurb { display: block; font-size: 13.5px; color: #b8b8b8; margin-top: 5px; line-height: 1.5; }
.bump-price { display: block; font-size: 14px; color: #ffd98a; font-weight: 700; margin-top: 6px; }
.bump.checked .bump-price { color: #8dffbe; }
.co-summary { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 20px; padding-top: 16px; font-size: 15px; color: #d8d8d8; }
.co-summary .row { display: flex; justify-content: space-between; margin: 6px 0; }
.co-summary .total {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 20px; font-weight: 800; color: #fff;
border-top: 1px solid rgba(255, 255, 255, .14);
margin-top: 10px; padding-top: 12px;
}
/* segmented payment control: both tabs render from first paint and config only
hides one, so the row never reflows after load */
.seg { display: flex; gap: 6px; background: rgba(255, 255, 255, .05); border-radius: 14px; padding: 4px; margin: 20px 0 14px; }
.seg-btn {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
min-height: 44px; /* the Apple touch target minimum */
padding: 0 8px; border: none; border-radius: 11px; background: transparent;
color: #c3c3c3; font-size: 14px; font-weight: 600; cursor: pointer;
transition: background .15s, color .15s;
}
.seg-btn.active { background: #fff; color: #0b1220; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.seg-btn svg { display: block; }
.hf { height: 48px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); overflow: hidden; }
.hf iframe { width: 100%; height: 100%; border: none; }
.hf.loading {
background-image: linear-gradient(90deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .07) 100%);
background-size: 180px 100%;
background-repeat: no-repeat;
animation: hfshine 1.1s linear infinite;
}
@keyframes hfshine { 0% { background-position: -180px 0; } 100% { background-position: 180px 0; } }
.hf-row { display: flex; gap: 10px; }
.hf-row .co-field { flex: 1; margin-bottom: 0; }
.co-pay {
display: block;
width: 100%;
margin-top: 20px;
border: none;
cursor: pointer;
font-size: clamp(19px, 3vw, 24px);
color: #fff;
padding: 19px 20px;
border-radius: 50px;
background: linear-gradient(110deg,
var(--cta-dark) 25%, var(--cta-mid) 45%, var(--cta-hi) 50%, var(--cta-mid) 55%, var(--cta-dark) 75%);
background-size: 200% 100%;
animation: shimmer 2.4s linear infinite;
box-shadow: 0 8px 30px var(--cta-shadow);
transition: transform .18s ease;
}
.co-pay:hover { transform: translateY(-2px); }
.co-pay:disabled { opacity: .55; cursor: wait; transform: none; }
.or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: #8a8a8a; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .12); }
/* Safari renders this natively. No iframe, no image. */
.apple-pay-btn {
display: block; width: 100%; height: 50px; border: none; border-radius: 12px; cursor: pointer;
-webkit-appearance: -apple-pay-button;
appearance: -apple-pay-button;
-apple-pay-button-type: buy;
-apple-pay-button-style: white;
}
.apple-pay-btn:disabled { opacity: .55; cursor: default; }
.wallet-note { font-size: 12.5px; color: #8a8a8a; text-align: center; margin-top: 8px; }
.co-error {
display: none;
background: rgba(255, 80, 80, .12);
border: 1px solid rgba(255, 80, 80, .5);
color: #ffb4b4;
border-radius: 10px;
padding: 12px 14px;
font-size: 14px;
margin-top: 14px;
text-align: center;
line-height: 1.5;
}
.co-error.show { display: block; }
.secure-line { margin-top: 12px; font-size: 12.5px; color: #8a8a8a; text-align: center; display: flex; align-items: center; justify-content: center; gap: 7px; }
.secure-line svg { width: 13px; height: 13px; }
/* ---------- footer ---------- */
.disclaimer { background: #f5f7fb; color: #666; padding: 26px 18px; border-top: 1px solid #e3e8f2; }
.disclaimer .foot-links { text-align: center; font-size: 13px; margin-bottom: 10px; }
.disclaimer .foot-links a { color: #555; text-decoration: none; margin: 0 8px; }
.disclaimer .foot-links a:hover { text-decoration: underline; }
.disclaimer p { text-align: center; font-size: 12px; line-height: 1.7; color: #777; max-width: 680px; margin: 0 auto; }
/* ---------- responsive ---------- */
@media (min-width: 641px) {
.hero .cta { min-width: 460px; }
}
@media (max-width: 640px) {
/* Edge to edge on phones. The fixed 88px side padding made the label wrap,
and simply shrinking it left the button looking timid. */
.cta { display: block; width: 100%; padding-left: 20px; padding-right: 20px; }
.body { padding: 36px 18px 80px; }
.warn { padding: 62px 18px; }
.faq-section { padding: 62px 18px 76px; }
.checkout { padding: 62px 16px 72px; }
.co-card { padding: 20px 16px; }
.beat, .faq-section h2.beat { margin-top: 72px !important; }
.quote { margin: 62px 0 40px; }
.day { padding: 18px 16px; }
.incl-row { padding: 18px 16px; }
}
@media (max-width: 400px) {
.bump { padding: 13px 13px 11px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation: none !important; transition: none !important; }
}