/* ============================================================ ALWIN — Fitness & Longevity Coaching Bright, warm, editorial. Colours coded to Alwin's Bazi (Yang Fire + favourable Earth & Metal) and pulled from his hexagon logo. ------------------------------------------------------------ Non-devs: retheme from the variables in :root below. ============================================================ */ :root { /* ---- Bazi-coded palette ---- */ --canvas: #FBF6EE; /* warm ivory — the bright canvas */ --canvas-alt: #F7EEE0; /* soft sand tint for alternating bands */ --ink: #14233B; /* deep navy from the logo — the anchor */ --ink-soft: #24344D; /* body text */ --amber: #E9A63C; /* Fire — radiant, for CTA FILLS & decoration only */ --amber-deep: #E29A2E; --gold-text: #B8730F; /* Fire — AA-safe gold for LARGE amber text on ivory */ --rose-gold: #D9A47F; /* Metal — hairlines & frames */ --copper: #C89078; /* Metal — decorative strokes only */ --terracotta: #9A5528; /* readable warm accent for labels & body emphasis */ --sand: #C7BBA9; /* Earth — decorative only */ --line: #E4D6C4; /* hairline rules */ --line-soft: #EFE4D5; /* gradients — three stops read like real light, not a synthetic blob */ --gradient-hero: radial-gradient(120% 92% at 60% 76%, #FFF6E4 0%, #F3C98A 55%, #E4B57C 100%); --gradient-warm: linear-gradient(180deg, #FBF6EE 0%, #F7EEE0 60%, #F4EBDD 100%); /* ---- type ---- */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ---- tokens ---- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(20,35,59,.04); --shadow-card: 0 10px 30px -18px rgba(20,35,59,.20); --shadow-portrait: 0 30px 70px -34px rgba(20,35,59,.30); --maxw: 1120px; --maxw-prose: 660px; --gutter: clamp(20px, 5vw, 64px); --section-y: clamp(88px, 10vw, 132px); --ease: cubic-bezier(.22,.61,.36,1); } /* ============ RESET / BASE ============ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-body); color: var(--ink-soft); background: var(--canvas); line-height: 1.58; font-size: clamp(16px, 1.05vw + 13px, 18px); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.08; font-weight: 560; letter-spacing: -0.015em; margin: 0; font-optical-sizing: auto; } em { font-style: italic; } p { margin: 0 0 1.1em; } a { color: inherit; } img, svg { display: block; max-width: 100%; } /* strategic emphasis — firmer than the roman, in ink */ strong, b { font-weight: 640; color: var(--ink); } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } [hidden] { display: none !important; } /* a measured column, left-aligned by default (the editorial spine) */ .narrow { max-width: var(--maxw-prose); margin-inline: 0; } .center { text-align: center; } .center.narrow { margin-inline: auto; } .section { padding-block: var(--section-y); position: relative; } .section--sand { background: var(--canvas-alt); } /* clearer separation between sections: a full-width rose-gold hairline at each section's top */ .section, .trust { border-top: 1px solid var(--rose-gold); } .cta { border-top: 1px solid var(--rose-gold); } #story { padding-block: calc(var(--section-y) * 1.12); } .section__head { margin-bottom: clamp(34px, 5vw, 54px); max-width: 62ch; } .section__head.center { text-align: center; margin-inline: auto; } .section__title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 560; line-height: 1.06; letter-spacing: -0.012em; margin-bottom: .5em; } .section__title em { color: var(--gold-text); font-weight: 500; } .eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; font-size: .74rem; font-weight: 650; color: var(--terracotta); margin: 0 0 1.1em; display: flex; align-items: center; gap: .7em; } .eyebrow::before { content: ""; width: 24px; height: 1.5px; background: var(--terracotta); } .center .eyebrow, .eyebrow--onDark { justify-content: center; } .eyebrow--onDark { color: var(--amber); } .lede { font-size: clamp(1.05rem, 1.4vw, 1.24rem); color: var(--ink-soft); max-width: 46ch; } .center .lede { margin-inline: auto; } .lede--accent { color: var(--ink); font-family: var(--font-display); font-size: clamp(1.3rem,2.4vw,1.85rem); line-height: 1.3; margin-top: .5em; } .note { color: var(--terracotta); font-size: .9rem; font-style: italic; } .prose { max-width: 60ch; color: var(--ink-soft); } /* ============ BUTTONS / LINKS ============ */ .btn { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-body); font-weight: 650; font-size: .98rem; letter-spacing: .005em; text-decoration: none; cursor: pointer; border: 0; border-radius: 8px; padding: .82em 1.4em; transition: transform .18s var(--ease), box-shadow .22s var(--ease), background-color .18s var(--ease); } .btn--wa { background: var(--amber); color: var(--ink); box-shadow: var(--shadow-sm); } @media (hover: hover) { .btn--wa:hover { transform: translateY(-1px); background: var(--amber-deep); box-shadow: 0 6px 18px -8px rgba(20,35,59,.32), inset 0 0 0 1px rgba(20,35,59,.18); } } .btn--wa:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .btn--lg { padding: 1em 1.9em; font-size: 1.05rem; } .wa-icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; } .link-soft { text-decoration: none; color: var(--terracotta); font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color .2s, color .2s; } @media (hover: hover) { .link-soft:hover { color: var(--ink); border-color: var(--terracotta); } } .link-soft:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 2px; } /* ============ NAV ============ */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(251,246,238,.85); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; } .nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px -20px rgba(20,35,59,.4); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; } .brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; letter-spacing: .005em; } .brand__word { line-height: 1; } .brandmark { display: block; height: 40px; width: auto; } .brandmark--footer { height: 32px; } .story__logo { display: block; height: 60px; width: auto; } .nav__links { display: flex; gap: clamp(1rem, 2.5vw, 2.2rem); } .nav__links a { text-decoration: none; color: var(--ink-soft); font-weight: 550; font-size: .95rem; position: relative; padding: .3em 0; } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--terracotta); transition: width .25s var(--ease); } .nav__links a:focus-visible::after { width: 100%; } @media (hover: hover) { .nav__links a:hover::after { width: 100%; } } .nav__links a:focus-visible { outline: none; } @media (max-width: 720px) { .nav__links { display: none; } .nav__cta .wa-icon { margin: 0; } .nav__cta span { display: none; } .nav__cta { padding: .7em; } } /* ============ LANGUAGE TOGGLE ============ */ .nav__right { display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, .9rem); } .langtoggle { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; background: var(--canvas); } .langtoggle button { border: 0; background: transparent; cursor: pointer; font-family: var(--font-body); font-size: .8rem; font-weight: 600; line-height: 1; color: var(--ink-soft); padding: .34em .6em; border-radius: var(--r-pill); transition: background .2s var(--ease), color .2s var(--ease); } @media (hover: hover) { .langtoggle button:hover { color: var(--ink); } } .langtoggle button[aria-pressed="true"] { background: var(--ink); color: var(--canvas); } .langtoggle button:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; } @media (max-width: 420px) { .langtoggle button { padding: .3em .48em; font-size: .76rem; } } /* Chinese: fall back to system CJK fonts (Fraunces/Inter carry no CJK glyphs) */ html[lang^="zh"] { font-family: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; } html[lang^="zh"] .hero__title, html[lang^="zh"] .section__title, html[lang^="zh"] .cta__title, html[lang^="zh"] .brand, html[lang^="zh"] .footer__word, html[lang^="zh"] .wyg__name { font-family: 'Fraunces', 'Songti SC', 'Noto Serif CJK SC', 'STSong', serif; } /* ============ HERO ============ */ .hero { position: relative; padding-top: clamp(44px, 6vw, 80px); padding-bottom: clamp(56px, 8vw, 104px); overflow: hidden; } .hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 76px); align-items: end; } .hero__title { font-size: clamp(2.2rem, 4.7vw, 3.7rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.04; margin-bottom: .55em; text-wrap: balance; } .hero__title em { color: var(--gold-text); font-weight: 500; white-space: nowrap; } .hero__subhead { font-size: clamp(1.05rem, 1.5vw, 1.24rem); color: var(--ink-soft); max-width: 48ch; margin-bottom: 1.7em; } .hero__actions { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.8rem); flex-wrap: wrap; } .hero__trust { margin-top: 1.6em; font-size: .92rem; color: var(--terracotta); max-width: 42ch; } /* portrait + single static studio glow */ .portrait-stage { position: relative; width: min(100%, 440px); margin-inline: auto; } .portrait-plate { position: relative; margin: 0; z-index: 2; aspect-ratio: 100/120; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-portrait), inset 0 0 0 1px var(--rose-gold); } .portrait-plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } .portrait-cap { margin-top: 1.1rem; display: grid; gap: .12rem; position: relative; z-index: 2; } .portrait-cap .cap-name { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 650; color: var(--ink); } .portrait-cap .cap-role { font-size: .82rem; color: var(--terracotta); } .glow { position: absolute; z-index: 1; left: 54%; top: 64%; transform: translate(-50%,-50%); width: 112%; aspect-ratio: 1; border-radius: 50%; background: var(--gradient-hero); filter: blur(56px); opacity: .30; } /* hero responsive: stack to one column, portrait greets first */ @media (max-width: 880px) { .hero { padding-top: clamp(28px, 6vw, 60px); } .hero__inner { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 40px); align-items: start; } .hero__portrait { order: -1; } .portrait-stage { width: min(76%, 330px); margin-inline: 0; } .portrait-cap { text-align: left; } .hero__title { font-size: clamp(2.1rem, 8vw, 3.1rem); } .hero__subhead { max-width: none; } } @media (max-width: 560px) { .hero__actions { flex-direction: column; align-items: stretch; gap: 1rem; } .hero__actions .btn { justify-content: center; } .link-soft { align-self: flex-start; } } /* ============ TRUST STRIP ============ */ .trust { border-block: 1px solid var(--line); background: var(--canvas); } .trust__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(.7rem, 2vw, 1.6rem); padding-block: 1.1rem; } .trust__item { font-size: .92rem; color: var(--ink-soft); } .trust__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--rose-gold); flex: none; } @media (max-width: 720px) { .trust__dot { display: none; } .trust__inner { gap: .5rem 1.2rem; } } /* ============ STORY ============ */ .story__inner { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; } .story__mark { position: sticky; top: 96px; margin-left: -10px; } .story__body { max-width: 62ch; } .pullquote { margin: 1.7em 0 0; padding: .2em 0 .2em 1.4rem; border-left: 3px solid var(--terracotta); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 1.68rem); line-height: 1.32; color: var(--ink); } @media (max-width: 680px) { .story__inner { grid-template-columns: 1fr; } .story__mark { position: static; margin-left: 0; } } /* ============ DIFFERENTIATOR — editorial numbered list, not cards ============ */ .feature-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; } .feature { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 1.8rem); align-items: baseline; padding: clamp(1.3rem, 2.4vw, 1.7rem) 0; border-top: 1px solid var(--line); } .feature:first-child { border-top: 0; } .feature__num { font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 560; color: var(--terracotta); line-height: 1; font-variant-numeric: lining-nums tabular-nums; } .feature p { margin: 0; color: var(--ink-soft); font-size: clamp(1rem, 1.3vw, 1.12rem); max-width: 52ch; } /* ============ METHOD ============ */ .phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); } .phase { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; } .phase--final { border-top: 2px solid var(--terracotta); background: linear-gradient(180deg, #F5ECDE, #F0E3CE); } .phase__head { margin-bottom: 1.2rem; } .phase__label { display: inline-block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 650; color: var(--terracotta); margin-bottom: .7rem; } .phase__name { font-size: 1.4rem; margin-bottom: .35rem; } .phase__tag { margin: 0; color: var(--terracotta); font-size: .95rem; } .phase__tracks { margin: 0; display: grid; gap: 1rem; } .phase__tracks div { display: grid; gap: .1rem; } .phase__tracks dt { font-family: var(--font-body); font-weight: 650; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .phase__tracks dd { margin: 0; font-size: .95rem; color: var(--ink-soft); } @media (max-width: 860px) { .phases { grid-template-columns: 1fr; } } /* ============ METRICS — bare figures, hairline-separated ============ */ .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .metric { text-align: center; padding: clamp(12px, 2vw, 20px) clamp(16px,2.5vw,32px); } .metric + .metric { border-left: 1px solid var(--line); } .metric__figure { display: flex; flex-direction: column; align-items: center; } .metric__figure::after { content: ""; display: block; width: 26px; height: 2px; background: var(--terracotta); margin: .7rem auto 0; } .metric__num { font-family: var(--font-display); font-weight: 560; font-size: clamp(3rem, 6vw, 4.2rem); color: var(--gold-text); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; } .metric__name { font-size: 1.1rem; margin: 1rem 0 .55rem; } .metric p { margin: 0; font-size: .93rem; color: var(--ink-soft); } @media (max-width: 760px) { .metrics { grid-template-columns: 1fr; } .metric { padding-block: clamp(22px,5vw,30px); } .metric + .metric { border-left: 0; border-top: 1px solid var(--line); } } /* ============ GRADUATION ============ */ .promise { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 2.6vw, 1.8rem); line-height: 1.35; color: var(--ink); max-width: 36ch; margin: 1.4em auto 0; padding-top: 1.4em; border-top: 1px solid var(--line); } /* ============ FIT LISTS (inside the FAQ answers) ============ */ .fitlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; } .fitlist li { position: relative; padding-left: 1.7rem; color: var(--ink-soft); font-size: .98rem; } .fitlist li::before { position: absolute; left: 0; top: .05em; font-weight: 700; } .fitlist--for li::before { content: "✓"; color: var(--gold-text); } .fitlist--not li::before { content: "–"; color: var(--rose-gold); } /* ============ TESTIMONIALS ============ */ .testi-stack { display: grid; gap: clamp(38px, 5vw, 58px); } .vquote { margin: 0; } .vquote__frame { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-md); overflow: hidden; background: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-card); } .vquote__player { width: 100%; height: 100%; object-fit: cover; display: block; } .vquote__player::cue { background: rgba(20, 35, 59, .82); color: #FDF7EC; font-family: var(--font-body); line-height: 1.3; } .vquote__badge { position: absolute; top: 10px; left: 10px; pointer-events: none; background: rgba(20,35,59,.72); color: #FDF7EC; font-size: .72rem; font-weight: 600; letter-spacing: .03em; padding: .3em .62em; border-radius: var(--r-pill); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .vquote__cap { margin-top: .9rem; display: grid; gap: .12rem; } /* Janet — video testimonial, centered and standing on its own */ .vtesti { max-width: 330px; margin: 0 auto; } .vtesti .vquote__cap { text-align: center; justify-items: center; margin-top: 1rem; } .vtesti__kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 650; color: var(--terracotta); } .vtesti .quote__result { max-width: 34ch; } .testi-label { text-align: center; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 650; color: var(--terracotta); margin: 0; } /* Ann — photo testimonial */ .ptesti { display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; max-width: 780px; margin: 0 auto; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: clamp(20px, 2.6vw, 32px); } .ptesti__photo { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 5; background: var(--ink); } .ptesti__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .ptesti__body blockquote { margin: 0 0 1.2rem; font-size: 1.05rem; color: var(--ink); line-height: 1.55; } .ptesti__body figcaption { display: grid; gap: .15rem; } @media (max-width: 760px) { .ptesti { grid-template-columns: 1fr; } .ptesti__photo { max-width: 260px; margin-inline: auto; } .vquote__frame { max-width: 300px; margin-inline: auto; } .vquote__cap { text-align: center; } } /* Colin — before / after testimonial */ .batesti { max-width: 680px; margin: 0 auto; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: clamp(16px, 2.2vw, 26px); } .ba { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.4vw, 14px); margin-bottom: clamp(18px, 2.4vw, 28px); } .ba__item { position: relative; margin: 0; } .ba__item img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); background: var(--ink); } .ba__tag { position: absolute; left: 10px; bottom: 10px; font-size: .74rem; font-weight: 650; letter-spacing: .02em; color: #FDF7EC; background: rgba(20, 35, 59, .74); padding: .32em .62em; border-radius: var(--r-pill); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .ba__tag--after { background: rgba(184, 115, 15, .86); } .quote--solo { max-width: 620px; margin-inline: auto; } /* ============ TESTIMONIAL GRID (2 x 2) ============ */ .testi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 26px); max-width: 940px; margin: 0 auto; } .tcard { margin: 0; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: clamp(18px, 2vw, 24px); display: flex; flex-direction: column; justify-content: center; } .tcard__photo { max-width: 256px; width: 100%; margin-inline: auto; } /* two-frame proof strip (Ann) — two shots read bigger than three did */ .tcard__strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(6px, 1vw, 10px); width: 100%; } .tcard__strip img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); background: var(--ink); } /* Janet's video is portrait, so at full card width it towers over Ann's card beside it. Capping it balances the two and closes the empty gap in Ann's. */ .tcard--video .vquote__frame { width: 100%; max-width: 300px; margin-inline: auto; } .tcard__photo { border-radius: var(--r-sm); overflow: hidden; background: var(--ink); } .tcard__photo img { width: 100%; height: auto; display: block; } .tcard blockquote { margin: clamp(13px, 1.8vw, 18px) 0 0; font-size: .97rem; color: var(--ink); line-height: 1.55; } .tcard--text blockquote { margin-top: 0; font-size: 1.05rem; } .tcard .vtesti__kicker { margin-bottom: .12rem; } .tcard__cap { display: grid; gap: .16rem; padding-top: .9rem; } @media (max-width: 720px) { .testi-grid { grid-template-columns: 1fr; } .tcard__photo { max-width: 300px; } .tcard--video .vquote__frame { max-width: 340px; } } .quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.2vw, 26px); max-width: 780px; margin: 0 auto; } .quote { margin: 0; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(24px, 2.8vw, 34px); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .quote blockquote { margin: 0 0 1.4rem; font-size: 1.02rem; color: var(--ink); line-height: 1.55; position: relative; } .quote blockquote::before { content: "\201C"; font-family: var(--font-display); font-size: 2.4rem; color: var(--rose-gold); line-height: 0; position: absolute; top: .55em; left: -.05em; opacity: .25; } .quote figcaption { margin-top: auto; display: grid; gap: .15rem; } .quote__name { font-weight: 640; color: var(--ink); font-size: .98rem; } .quote__eg { font-weight: 400; color: var(--terracotta); font-size: .82em; font-style: italic; } .quote__role { font-size: .88rem; color: var(--ink-soft); } .quote__result { font-size: .82rem; color: var(--terracotta); font-weight: 600; margin-top: .35rem; } @media (max-width: 880px) { .quotes { grid-template-columns: 1fr; } } /* proof — "more client wins" row below the real testimonials */ .proofmore { margin-top: clamp(40px, 5vw, 60px); } .proofmore__label { text-align: center; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 650; color: var(--terracotta); margin: 0 0 1.2rem; } /* fit + faq — one accordion; who-for lists are the first two items */ .fit-faq { max-width: 760px; } /* ============ FAQ ============ */ .faq { border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; color: var(--ink); font-size: clamp(1rem, 1.6vw, 1.15rem); padding: 1.3rem 3rem 1.3rem 0; position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq__q:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: var(--r-sm); } .faq__icon { position: relative; width: 16px; height: 16px; flex: none; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--terracotta); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s; } .faq__icon::before { top: 7px; left: 0; width: 16px; height: 2px; } .faq__icon::after { top: 0; left: 7px; width: 2px; height: 16px; } .faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(90deg); opacity: 0; } .faq__q[aria-expanded="true"] { color: var(--terracotta); } .faq__a { overflow: hidden; height: 0; transition: height .34s var(--ease); } .faq__a p { margin: 0; padding: 0 3rem 1.5rem 0; color: var(--ink-soft); max-width: 64ch; } .faq__a .fitlist { padding: .2rem 3rem 1.6rem 0; max-width: 64ch; } /* ============ FINAL CTA (the single dark moment) ============ */ .cta { position: relative; background: var(--ink); color: #EDE6DB; padding-block: clamp(84px, 11vw, 148px); overflow: hidden; } .cta__glow { position: absolute; z-index: 0; left: 38%; bottom: -30%; width: 80%; max-width: 820px; aspect-ratio: 2/1; background: radial-gradient(closest-side, rgba(233,166,60,.42), rgba(233,166,60,0)); filter: blur(44px); opacity: .40; } .cta__inner { position: relative; z-index: 1; } .cta__portrait { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; margin: 0 auto clamp(1.2rem, 2vw, 1.6rem); border: 2px solid var(--rose-gold); box-shadow: 0 10px 26px -10px rgba(0,0,0,.55); } .cta__title { color: #FDF7EC; font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 600; margin-bottom: .55em; } .cta__body { color: #CBC2B4; max-width: 52ch; margin: 0 auto 2em; font-size: clamp(1.02rem,1.4vw,1.18rem); } .cta__body strong { color: #FDF7EC; } @media (hover: hover) { .cta .btn--wa:hover { background: var(--amber-deep); box-shadow: 0 8px 22px -10px rgba(0,0,0,.5); } } .cta .btn--wa:focus-visible { outline-color: #FDF7EC; } .cta__reassure { margin-top: 1.4em; font-size: .9rem; color: var(--sand); } .cta__reassure strong { color: #E7DECF; } /* ============ FOOTER ============ */ .footer { background: var(--ink); color: #A9A395; padding-block: 2.4rem; border-top: 1px solid rgba(255,255,255,.08); } .footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; } .footer__brand { display: flex; align-items: center; gap: .6rem; } .footer__word { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: #FDF7EC; } .footer__tag { font-size: .82rem; color: var(--sand); border-left: 1px solid rgba(255,255,255,.14); padding-left: .7rem; } .footer__links { display: flex; gap: 1.4rem; } .footer__links a { color: #C7C0B2; text-decoration: none; font-size: .9rem; } @media (hover: hover) { .footer__links a:hover { color: var(--amber); } } .footer__links a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 3px; } .footer__fine { width: 100%; margin: 0; font-size: .82rem; color: #948E80; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.07); } @media (max-width: 600px) { .footer__tag { display: none; } } /* ============ HERO — VSL (centered) variant ============ */ .hero--vsl .hero__inner { display: block; max-width: 880px; margin-inline: auto; text-align: center; position: relative; z-index: 2; } .hero--vsl .eyebrow { justify-content: center; } .hero--vsl .hero__title { letter-spacing: -0.018em; } .hero--vsl .hero__subhead { margin: 0 auto; max-width: 58ch; } .hero--vsl .hero__actions { justify-content: center; margin-top: clamp(22px, 4vw, 34px); } .hero--vsl .hero__trust { margin: 1.4em auto 0; } .hero--vsl .glow { left: 50%; top: 30%; width: min(820px, 92%); opacity: .26; } /* the VSL video (placeholder until filmed, then swap in a