/* --------------------------------------------------- 0. SELF-HOSTED FONTS Served from /assets/fonts so the site makes no third-party request at runtime. Cormorant Garamond for display, Inter for everything else. ------------------------------------------------------------------- */ @font-face{font-family:'Cormorant';src:url('../fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2'); font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Cormorant';src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Cormorant';src:url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Cormorant';src:url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/inter-latin-700-normal.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap} /* ===================================================================== ASCEND COACH - stylesheet Plain CSS. No preprocessor, no framework, no build step. Structure: 1 tokens · 2 base · 3 type · 4 buttons · 5 nav · 6 hero 7 sections · 8 principles · 9 path · 10 fit · 11 offer 12 call band · 13 story · 14 books · 15 faq · 16 forms 17 popup · 18 footer · 19 animation · 20 responsive ===================================================================== */ /* ----------------------------------------------------------- 1. TOKENS */ :root{ --ivory:#fbf8f3; --ivory-2:#f5efe4; --ivory-3:#efe7d9; --white:#ffffff; --ink:#1c1a16; --body:#4b463d; --muted:#8a8377; --muted-2:#a9a396; --line:rgba(28,26,22,.10); --line-strong:rgba(28,26,22,.18); --line-gold:rgba(184,134,43,.28); --gold:#b8862b; --gold-light:#d9a94a; --gold-pale:#e9d6a8; --gold-deep:#8a6215; --sky:#7e9cb8; --grad-gold:linear-gradient(100deg,#8a6215 0%,#b8862b 26%,#e9cd85 50%,#b8862b 74%,#8a6215 100%); --grad-text:linear-gradient(96deg,#8a6215 0%,#b8862b 35%,#d9a94a 60%,#8a6215 100%); --f-display:'Cormorant','Cormorant Garamond',Georgia,'Times New Roman',serif; --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --maxw:1200px; --gut:clamp(20px,5vw,48px); --sect:clamp(76px,10vw,140px); --ease:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --r-sm:10px; --r:16px; --r-lg:26px; --shadow-sm:0 4px 18px -8px rgba(60,46,20,.20); --shadow:0 26px 60px -34px rgba(60,46,20,.45); --shadow-lg:0 40px 90px -46px rgba(60,46,20,.55); --glow:0 0 70px -14px rgba(217,169,74,.5); } /* ------------------------------------------------------------- 2. BASE */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--ivory);color:var(--body); font-family:var(--f-body);font-size:17px;line-height:1.75; font-weight:400;letter-spacing:-.004em; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } /* Guard against sideways scroll without making a scroll container, which would break every position:sticky on the page. */ html{overflow-x:clip} body.is-locked{overflow:hidden} img{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--gold-pale);color:#2a2007} /* a warm breath of light behind everything */ body::before{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(900px 620px at 78% -8%, rgba(233,205,133,.30), transparent 62%), radial-gradient(760px 520px at 8% 22%, rgba(126,156,184,.10), transparent 64%), radial-gradient(1100px 700px at 50% 108%, rgba(233,205,133,.20), transparent 62%); } .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} .wrap-wide{max-width:1420px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ------------------------------------------------------------- 3. TYPE */ h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:400; color:var(--ink);letter-spacing:-.012em;line-height:1.03} p{margin:0 0 1.15em} p:last-child{margin-bottom:0} .h-xl{font-size:clamp(3.2rem,7.4vw,6.4rem);font-weight:300;line-height:.98;letter-spacing:-.022em} .h-lg{font-size:clamp(2.35rem,4.9vw,4.05rem);font-weight:300;line-height:1.03;letter-spacing:-.018em} .h-md{font-size:clamp(1.75rem,3vw,2.7rem);font-weight:400;line-height:1.08} .h-sm{font-size:clamp(1.2rem,1.9vw,1.55rem);font-weight:500;line-height:1.2} .eyebrow{ display:inline-flex;align-items:center;gap:.7em; font-family:var(--f-body);font-size:.7rem;font-weight:600; letter-spacing:.22em;text-transform:uppercase;color:var(--gold); margin-bottom:1.4rem; } .eyebrow::before{content:'';width:30px;height:1px;background:var(--gold);opacity:.55} .eyebrow.center::after{content:'';width:30px;height:1px;background:var(--gold);opacity:.55} /* ------------------------------------------------- GRADIENT TEXT background-clip:text paints the gradient only inside the element's PADDING BOX. Cormorant has deep descenders and these headings run a line-height under 1.1, so the box stops above the tail of a g, y or p and the descender simply never gets painted. It reads as a chopped-off letter, and only on the gold text, which is what made it confusing. The fix is to grow the paint box downward and take the space straight back. On an inline .gold the negative margin does nothing and the padding does not move a thing, it just gives the gradient somewhere to land. On a block one the two cancel out. Layout is identical either way, and every descender paints. Any new gradient-text rule must carry .grad-text too, or it will lose its descenders the same way. */ .grad-text,.gold,.step__n,.price b{padding-bottom:.18em;margin-bottom:-.18em} .gold{background:var(--grad-text);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--gold)} .serif-it{font-style:italic} .lead{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.68;color:#57524a;max-width:60ch} .small{font-size:.86rem;color:var(--muted)} .muted{color:var(--muted)} strong{color:var(--ink);font-weight:600} em{font-style:italic;color:#3d3931} .rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);border:0;margin:0} /* scripture block */ .scripture{ position:relative;margin:2.6rem 0 0;padding:1.7rem 0 .2rem 1.7rem; border-left:2px solid var(--line-gold);max-width:56ch; } .scripture q{ display:block;font-family:var(--f-display);font-size:clamp(1.28rem,2.1vw,1.7rem); font-style:italic;font-weight:300;line-height:1.42;color:var(--ink);quotes:none; } .scripture cite{ display:block;margin-top:.95rem;font-family:var(--f-body);font-style:normal; font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold); } /* ---------------------------------------------------------- 4. BUTTONS */ .btn{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em; padding:1.06em 2.05em;border-radius:100px;font-size:.9rem;font-weight:600; letter-spacing:.04em;text-transform:uppercase;line-height:1;overflow:hidden; transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s,color .3s,border-color .3s; will-change:transform;text-align:center;white-space:nowrap; } .btn:hover{transform:translateY(-3px)} .btn:active{transform:translateY(-1px)} .btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .btn-gold{background:var(--grad-gold);background-size:220% 100%;color:#fffdf7; box-shadow:0 14px 32px -14px rgba(138,98,21,.75)} .btn-gold:hover{background-position:100% 0;box-shadow:0 22px 46px -14px rgba(138,98,21,.85)} .btn-gold::after{ content:'';position:absolute;inset:0;transform:translateX(-120%); background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%); } .btn-gold:hover::after{transform:translateX(120%);transition:transform .85s var(--ease)} .btn-ghost{border:1px solid var(--line-strong);color:var(--ink);background:rgba(255,255,255,.55); backdrop-filter:blur(6px)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold-deep);background:rgba(255,255,255,.9)} .btn-lg{padding:1.2em 2.4em;font-size:.95rem} .btn-sm{padding:.82em 1.4em;font-size:.76rem} .btn-block{display:flex;width:100%} .btn-arrow svg{transition:transform .35s var(--ease)} .btn-arrow:hover svg{transform:translateX(4px)} .btn[disabled]{opacity:.55;pointer-events:none} .cta-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center} .cta-note{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:.45em} .cta-note svg{color:var(--gold)} /* -------------------------------------------------------------- 5. NAV */ .nav{ position:fixed;top:0;left:0;right:0;z-index:900; transition:background .35s,box-shadow .35s,border-color .35s,padding .35s; border-bottom:1px solid transparent;padding:.5rem 0; } .nav.solid{background:rgba(251,248,243,.86);backdrop-filter:blur(16px) saturate(1.2); border-bottom-color:var(--line);box-shadow:0 10px 30px -26px rgba(60,46,20,.6)} .nav.up{transform:translateY(-101%);transition:transform .4s var(--ease),background .35s} .nav__in{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;min-height:66px} .brand{display:inline-flex;align-items:center;gap:.62rem} .brand__mark{width:32px;height:32px;flex:none} .brand__t{font-family:var(--f-display);font-size:1.42rem;font-weight:500;color:var(--ink); letter-spacing:-.01em;line-height:1;white-space:nowrap} .brand__t b{font-weight:500} .brand__t i{font-style:normal;color:var(--gold)} .nav__links{display:flex;gap:1.85rem} .nav__links a{font-size:.83rem;font-weight:500;color:#5c5750;letter-spacing:.01em; position:relative;padding:.3rem 0;transition:color .25s} .nav__links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px; background:var(--gold);transition:right .35s var(--ease)} .nav__links a:hover{color:var(--ink)} .nav__links a:hover::after{right:0} .nav__cta{display:flex;align-items:center;gap:.6rem} .burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong); flex-direction:column;align-items:center;justify-content:center;gap:4px} .burger i{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s} .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .burger[aria-expanded="true"] i:nth-child(2){opacity:0} .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} .mobile-menu{ position:fixed;inset:0;z-index:880;background:var(--ivory); display:flex;flex-direction:column;justify-content:center;gap:.4rem; padding:6rem var(--gut) 3rem;opacity:0;visibility:hidden;transform:translateY(-12px); transition:opacity .35s,visibility .35s,transform .45s var(--ease); } .mobile-menu.on{opacity:1;visibility:visible;transform:none} .mobile-menu a{font-family:var(--f-display);font-size:2rem;font-weight:300;color:var(--ink); padding:.42rem 0;border-bottom:1px solid var(--line)} .mobile-menu .btn{margin-top:1.6rem;font-family:var(--f-body);font-size:.9rem;border-bottom:0} /* ------------------------------------------------------------- 6. HERO */ .hero{position:relative;min-height:100svh;display:flex;align-items:center; padding:9rem 0 5rem;overflow:hidden;isolation:isolate} .hero__bg{position:absolute;inset:0;z-index:-2} .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%} .hero__bg::after{ content:'';position:absolute;inset:0; background: linear-gradient(90deg,rgba(251,248,243,.97) 0%,rgba(251,248,243,.93) 34%,rgba(251,248,243,.62) 56%,rgba(251,248,243,.12) 78%,rgba(251,248,243,0) 100%), linear-gradient(180deg,rgba(251,248,243,.75) 0%,rgba(251,248,243,0) 26%,rgba(251,248,243,0) 62%,rgba(251,248,243,.9) 100%); } #dust{position:absolute;inset:0;z-index:-1;pointer-events:none} .hero__in{position:relative;max-width:940px} /* flow-root contains the reveal-line negative margins so they shorten the heading instead of collapsing out and swallowing the gap below it. Any other heading built from .reveal-line spans needs this too. */ .hero h1{margin-bottom:1.5rem;display:flow-root} .hero h1 .l-b{display:block} .hero__sub{font-size:clamp(1.1rem,1.65vw,1.34rem);line-height:1.66;color:#544f46; max-width:56ch;margin-bottom:2.4rem} .hero__note{margin-top:1.2rem} .scroll-hint{position:absolute;left:50%;bottom:2rem;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:.6rem;z-index:2} .scroll-hint span{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)} .scroll-hint i{display:block;width:1px;height:44px; background:linear-gradient(180deg,var(--gold),transparent);animation:drop 2.4s var(--ease-in-out) infinite} @keyframes drop{0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom}} /* --------------------------------------------------------- 7. SECTIONS */ .sect{position:relative;padding:var(--sect) 0} .sect--panel{background:linear-gradient(180deg,var(--ivory-2),#f8f3ea); border-block:1px solid var(--line)} .sect--tight{padding-block:calc(var(--sect) * .62)} /* one grid for every section: fixed label rail left, body right */ .sect__grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:0 clamp(24px,4vw,64px);align-items:start} .sect__label{position:sticky;top:110px} .sect__label .eyebrow{margin-bottom:0} .sect__body{min-width:0} .sect__body > .lead{margin-top:1.5rem} .block{margin-top:clamp(2.4rem,4vw,3.6rem)} .split__media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.7)} .split__media img{width:100%} /* outcome list */ .outcomes{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r)} .outcome{display:flex;gap:1.1rem;align-items:flex-start;background:var(--white); padding:1.5rem 1.7rem;transition:background .3s} .outcome:first-child{border-radius:var(--r) var(--r) 0 0} .outcome:last-child{border-radius:0 0 var(--r) var(--r)} .outcome:hover{background:#fffdf8} .outcome__k{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(150deg,#fdf6e5,#f3e3bd);color:var(--gold-deep); box-shadow:inset 0 0 0 1px rgba(184,134,43,.2)} .outcome p{margin:0;font-size:1rem;color:#4a453d;padding-top:.3rem} /* ------------------------------------------------------- 8. PRINCIPLES */ .principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .principle{position:relative;background:var(--white);border:1px solid var(--line); border-radius:var(--r);padding:2rem 1.7rem 1.9rem;box-shadow:var(--shadow-sm); transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s} .principle:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--line-gold)} .principle__n{font-family:var(--f-body);font-size:.7rem;font-weight:700;letter-spacing:.2em; color:var(--gold);display:block;margin-bottom:1.5rem} .principle__k{display:block;font-family:var(--f-display);font-size:1.72rem;font-weight:400; color:var(--ink);margin-bottom:.5rem;line-height:1.1} .principle__d{margin:0;font-size:.96rem;color:#5b564d;line-height:1.65} .align__close{margin-top:clamp(2.4rem,4vw,3.4rem);padding:clamp(2rem,3.4vw,2.9rem); border-radius:var(--r-lg);border:1px solid var(--line-gold); background:linear-gradient(140deg,#fffdf8,#faf1dd);box-shadow:var(--shadow-sm)} .align__close h3{font-size:clamp(1.6rem,2.7vw,2.3rem);font-weight:400;margin-bottom:.5em} .align__close p{margin:0;color:#57524a;max-width:58ch} /* --------------------------------------------------- 9. THE ASCEND PATH */ .path{margin-top:clamp(2.4rem,4vw,3.6rem);display:grid;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .step{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 1.6rem; background:var(--white);padding:2.1rem clamp(1.3rem,2.6vw,2.3rem); transition:background .4s var(--ease)} .step:hover{background:linear-gradient(100deg,#fffdf8,#fdf9f0)} .step__n{font-family:var(--f-display);font-size:2.9rem;font-weight:300;line-height:1; background:var(--grad-text);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;padding-top:.06em} .step__k{font-family:var(--f-body);font-size:.68rem;font-weight:700;letter-spacing:.24em; text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.7rem} .step h3{font-size:clamp(1.35rem,2.2vw,1.85rem);font-weight:400;margin-bottom:.55rem} .step p{margin:0;font-size:.99rem;color:#5b564d;max-width:60ch} /* ---------------------------------------------------------- 10. THE FIT */ .fit{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:clamp(2.2rem,4vw,3.2rem)} .fitcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(1.7rem,2.8vw,2.3rem);box-shadow:var(--shadow-sm)} .fitcard--yes{border-color:var(--line-gold);background:linear-gradient(160deg,#fffdf8,#fdf7ea)} .fitcard h3{font-size:1.42rem;font-weight:500;margin-bottom:1.35rem;display:flex;align-items:center;gap:.6rem} .fitcard h3 svg{color:var(--gold)} .fitcard--no h3 svg{color:var(--muted-2)} .fitcard ul{list-style:none;margin:0;padding:0;display:grid;gap:.95rem} .fitcard li{position:relative;padding-left:1.7rem;font-size:.97rem;color:#5b564d;line-height:1.62} .fitcard li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%; background:var(--gold);opacity:.75} .fitcard--no li::before{background:var(--muted-2);opacity:.5} /* ---------------------------------------------------------- 11. THE OFFER */ .offer{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; margin-top:clamp(2.2rem,4vw,3.2rem)} .inc{background:var(--white);padding:1.9rem 1.8rem;transition:background .35s} .inc:hover{background:#fffdf8} .inc__ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:1.1rem; background:linear-gradient(150deg,#fdf6e5,#f3e3bd);color:var(--gold-deep); box-shadow:inset 0 0 0 1px rgba(184,134,43,.2)} .inc h3{font-size:1.2rem;font-weight:500;margin-bottom:.45rem} .inc p{margin:0;font-size:.93rem;color:#5f594f;line-height:1.6} .offer__foot{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center} .offer__note{font-size:.88rem;color:var(--muted);max-width:44ch;margin:0} /* ------------------------------------------------------- 12. CALL BAND */ .band{position:relative;padding:clamp(84px,11vw,150px) 0;overflow:hidden;isolation:isolate; border-block:1px solid var(--line)} .band__bg{position:absolute;inset:0;z-index:-2} .band__bg img{width:100%;height:100%;object-fit:cover} .band__bg::after{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(251,248,243,.92),rgba(251,248,243,.76) 45%,rgba(251,248,243,.94))} .band__in{max-width:760px} .band h2{margin-bottom:.5em} .band__pts{list-style:none;margin:2rem 0 2.4rem;padding:0;display:grid;gap:.85rem;max-width:52ch} .band__pts li{position:relative;padding-left:2rem;font-size:1rem;color:#4f4a41} .band__pts li svg{position:absolute;left:0;top:.3em;color:var(--gold)} .band__meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.6rem; font-size:.8rem;letter-spacing:.06em;color:var(--muted)} .band__meta span{display:inline-flex;align-items:center;gap:.5em} .band__meta svg{color:var(--gold)} /* the price line under the session heading */ .price{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:0 0 1.4rem} .price b{font-family:var(--f-display);font-size:clamp(2.2rem,4vw,3.1rem);font-weight:400;line-height:1; background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .price span{font-size:.94rem;color:var(--muted);letter-spacing:.01em} /* why the first session is paid */ .why{margin-top:2.6rem;padding:clamp(1.5rem,2.6vw,2.1rem);border-radius:var(--r-lg); border:1px solid var(--line-gold);background:linear-gradient(150deg,#fffdf8,#faf2e0); box-shadow:var(--shadow-sm);max-width:60ch} .why h3{font-size:1.36rem;font-weight:500;margin-bottom:.55rem} .why p{margin:0;font-size:.97rem;color:#5b564d;line-height:1.68} .why__g{margin-top:1rem!important;display:flex;align-items:flex-start;gap:.5em; font-size:.88rem;color:var(--gold-deep)} .why__g svg{flex:none;margin-top:.25em} /* scripture rail */ .rail{overflow:hidden;border-block:1px solid var(--line);background:rgba(255,255,255,.5); padding:1.05rem 0;position:relative} .rail__track{display:flex;gap:3.4rem;width:max-content;animation:railmove 46s linear infinite} .rail__track span{font-family:var(--f-display);font-style:italic;font-size:1.12rem;font-weight:400; color:var(--gold-deep);opacity:.78;white-space:nowrap;display:flex;align-items:center;gap:3.4rem} .rail__track span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.5} @keyframes railmove{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.rail__track{animation:none}} /* --------------------------------------------------- 13. FOUNDER STORY */ .story{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--white); border:1px solid var(--line);box-shadow:var(--shadow)} .story__stage{position:relative} .story__slide{display:none;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:stretch} .story__slide.on{display:grid;animation:fadeUp .6s var(--ease) both} .story__media{position:relative;min-height:340px;background:var(--ivory-3)} .story__media img,.story__media picture{width:100%;height:100%;object-fit:cover;display:block} .story__media::after{content:'';position:absolute;inset:0; background:linear-gradient(100deg,transparent 55%,rgba(255,255,255,.55))} .story__slide.is-portrait .story__media img{object-position:center 22%} .story__text{padding:clamp(2rem,3.4vw,3.1rem);display:flex;flex-direction:column;justify-content:center} .story__k{font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--gold);margin-bottom:1.1rem} .story__text h3{font-size:clamp(1.5rem,2.5vw,2.15rem);font-weight:400;margin-bottom:1rem;line-height:1.14} .story__text p{font-size:.99rem;color:#5b564d;line-height:1.72} .story__steps{margin:1.5rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem} .story__steps li{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; padding:.5em 1em;border-radius:100px;color:var(--gold-deep); background:linear-gradient(150deg,#fdf6e5,#f5e7c4);border:1px solid rgba(184,134,43,.22)} .story__slide.is-final .story__text h3{font-family:var(--f-display);font-style:italic} .story__nav{display:flex;align-items:center;gap:.7rem;padding:1rem 1.4rem; border-top:1px solid var(--line);background:#fdfbf6} .story__btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong); display:grid;place-items:center;color:var(--ink);transition:all .3s} .story__btn:hover{border-color:var(--gold);color:var(--gold-deep);background:#fffdf7} .story__btn[disabled]{opacity:.3;pointer-events:none} .story__dots{display:flex;gap:6px;margin-inline:auto} .story__dot{width:7px;height:7px;border-radius:50%;background:var(--line-strong);transition:all .3s} .story__dot.on{background:var(--gold);width:22px;border-radius:100px} .story__count{font-size:.76rem;letter-spacing:.14em;color:var(--muted)} .story__count b{color:var(--gold-deep);font-weight:600} /* ----------------------------------------------------------- 14. BOOKS */ .books{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.4rem)} .book__c{display:block;border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow); transition:transform .5s var(--ease),box-shadow .5s var(--ease);background:var(--ivory-3)} .book__c:hover{transform:translateY(-7px) rotate(-.6deg);box-shadow:var(--shadow-lg)} .book__y{margin:1.2rem 0 .3rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)} .book h3{font-size:1.3rem;font-weight:500;margin-bottom:.45rem} .book p{font-size:.93rem;color:#5f594f} .book__buy{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center} .book__free{font-size:.8rem;font-weight:600;color:var(--gold-deep);display:inline-flex;align-items:center;gap:.4em} .book__free:hover{text-decoration:underline} /* ------------------------------------------------------------- 15. FAQ */ .faq{margin-top:clamp(2rem,3.6vw,3rem);border-top:1px solid var(--line)} .faq__i{border-bottom:1px solid var(--line)} .faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.4rem; padding:1.5rem 0;text-align:left;font-family:var(--f-display);font-size:clamp(1.2rem,1.9vw,1.5rem); font-weight:400;color:var(--ink);transition:color .25s} .faq__q:hover{color:var(--gold-deep)} .faq__ic{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong); display:grid;place-items:center;transition:all .35s var(--ease)} .faq__i.on .faq__ic{transform:rotate(180deg);border-color:var(--gold);color:var(--gold-deep);background:#fffdf7} .faq__a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)} .faq__a p{margin:0 0 1.6rem;font-size:1rem;color:#5b564d;max-width:64ch} /* ----------------------------------------------------------- 16. FORMS */ .formcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(1.7rem,3.2vw,2.9rem);box-shadow:var(--shadow);position:relative} .form{display:grid;gap:1.25rem} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem} .field{display:flex;flex-direction:column;gap:.5rem;min-width:0} .field label{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6c665c} .field label b{color:var(--gold);font-weight:600} .field input,.field select,.field textarea{ width:100%;padding:.95em 1.05em;border-radius:var(--r-sm);border:1px solid var(--line-strong); background:#fdfcf9;color:var(--ink);font-family:inherit;font-size:.97rem; transition:border-color .25s,box-shadow .25s,background .25s; } .field textarea{min-height:132px;resize:vertical;line-height:1.6} .field input::placeholder,.field textarea::placeholder{color:#b1aa9d} .field input:focus,.field select:focus,.field textarea:focus{ outline:0;border-color:var(--gold);background:#fff;box-shadow:0 0 0 4px rgba(184,134,43,.12)} .field.err input,.field.err select,.field.err textarea{border-color:#c0553f;background:#fdf5f3} .msg{font-size:.8rem;color:#c0553f;min-height:0} .field.err .msg{min-height:1.2em} .radios{display:flex;flex-wrap:wrap;gap:.7rem} .radio{display:inline-flex;align-items:center;gap:.55em;padding:.75em 1.2em;border-radius:100px; border:1px solid var(--line-strong);cursor:pointer;font-size:.9rem;transition:all .25s;background:#fdfcf9} .radio:has(input:checked){border-color:var(--gold);background:#fffaee;color:var(--gold-deep)} .radio input{accent-color:var(--gold)} .check{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;font-size:.88rem;color:#5f594f} .check input{position:absolute;opacity:0;width:0;height:0} .check i{flex:none;width:20px;height:20px;border-radius:5px;border:1px solid var(--line-strong); background:#fdfcf9;margin-top:.15em;position:relative;transition:all .25s} .check input:checked + i{background:var(--gold);border-color:var(--gold)} .check input:checked + i::after{content:'';position:absolute;left:6.5px;top:2.5px;width:5px;height:10px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .check input:focus-visible + i{box-shadow:0 0 0 4px rgba(184,134,43,.18)} .form__foot{display:grid;gap:1.2rem;margin-top:.4rem} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .done{display:none;text-align:center;padding:2.4rem 0 1rem} .done.on{display:block;animation:fadeUp .5s var(--ease) both} .done__ic{width:74px;height:74px;border-radius:50%;margin:0 auto 1.5rem;display:grid;place-items:center; background:linear-gradient(150deg,#fdf6e5,#f0dfb3);color:var(--gold-deep); box-shadow:inset 0 0 0 1px rgba(184,134,43,.25),var(--glow)} .done h3{font-size:1.8rem;font-weight:400;margin-bottom:.5rem} .done p{color:var(--muted);margin:0} .form.gone{display:none} .formnote{margin-top:1.3rem;font-size:.82rem;color:var(--muted);display:flex;align-items:flex-start;gap:.5em} .formnote svg{color:var(--gold);flex:none;margin-top:.2em} /* ----------------------------------------------------------- 17. POPUP */ .pop{ position:fixed;left:var(--gut);bottom:var(--gut);z-index:940;width:min(370px,calc(100vw - var(--gut)*2)); background:var(--white);border:1px solid var(--line-gold);border-radius:var(--r-lg); padding:1.8rem 1.7rem 1.6rem;box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;transform:translateY(20px) scale(.97); transition:opacity .5s var(--ease),transform .55s var(--ease),visibility .5s; } .pop.on{opacity:1;visibility:visible;transform:none} .pop__x{position:absolute;top:.9rem;right:.9rem;width:30px;height:30px;border-radius:50%; display:grid;place-items:center;color:var(--muted);transition:all .25s} .pop__x:hover{background:var(--ivory-2);color:var(--ink)} .pop__ey{font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase; color:var(--gold);margin-bottom:.75rem} .pop h3{font-family:var(--f-display);font-size:1.5rem;font-weight:400;margin-bottom:.5rem;line-height:1.18} .pop p{font-size:.92rem;color:#5f594f;margin-bottom:1.3rem} .pop .btn{width:100%} .pop__no{display:block;width:100%;margin-top:.8rem;font-size:.8rem;color:var(--muted); text-align:center;transition:color .25s} .pop__no:hover{color:var(--ink)} /* ---------------------------------------------------------- 18. FOOTER */ .final{position:relative;padding:clamp(96px,13vw,180px) 0;text-align:center;overflow:hidden;isolation:isolate} .final__bg{position:absolute;inset:0;z-index:-2} .final__bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%} /* The dawn plate is bright and busy, so the text needs a real scrim under it, not a wash. Radial first to lift the centre, gradient to seal top and bottom. */ .final__bg::after{content:'';position:absolute;inset:0; background: radial-gradient(72% 62% at 50% 46%, rgba(251,248,243,.93), rgba(251,248,243,.62) 62%, rgba(251,248,243,.34) 100%), linear-gradient(180deg,rgba(251,248,243,.97),rgba(251,248,243,.72) 38%,rgba(251,248,243,.78) 62%,rgba(251,248,243,.98))} .final h2{margin-bottom:1.1rem} .final h2 .l-b{display:block} .final > .wrap > p{max-width:56ch;margin-inline:auto;margin-bottom:2.3rem;color:#544f46;font-size:1.08rem} .final .cta-row{justify-content:center} .final .scripture{margin:3.2rem auto 0;text-align:left;max-width:44ch} .foot{background:linear-gradient(180deg,#f5efe4,#efe7d8);border-top:1px solid var(--line); padding:clamp(3.4rem,6vw,5rem) 0 2rem} .foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.6rem} .foot__grid > div > p{font-size:.92rem;color:#5f594f;max-width:34ch;margin-top:1.1rem; font-family:var(--f-display);font-size:1.15rem;font-style:italic} .foot h4{font-family:var(--f-body);font-size:.7rem;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem} .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem} .foot li a{font-size:.92rem;color:#5f594f;transition:color .25s} .foot li a:hover{color:var(--gold-deep)} .foot__bot{margin-top:3.2rem;padding-top:1.6rem;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between; font-size:.82rem;color:var(--muted)} .foot__bot a:hover{color:var(--gold-deep)} .foot__soc{display:flex;gap:.5rem} .foot__soc a{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong); display:grid;place-items:center;color:#5f594f;transition:all .3s} .foot__soc a:hover{border-color:var(--gold);color:var(--gold-deep);background:#fffdf7;transform:translateY(-2px)} /* -------------------------------------------------------- 19. ANIMATION */ .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease)} .rv.in{opacity:1;transform:none} .rv-s{opacity:0;transform:translateY(30px) scale(.985); transition:opacity .9s var(--ease),transform 1s var(--ease)} .rv-s.in{opacity:1;transform:none} .rv[data-d="1"],.rv-s[data-d="1"]{transition-delay:.09s} .rv[data-d="2"],.rv-s[data-d="2"]{transition-delay:.18s} .rv[data-d="3"],.rv-s[data-d="3"]{transition-delay:.27s} .rv[data-d="4"],.rv-s[data-d="4"]{transition-delay:.36s} .rv[data-d="5"],.rv-s[data-d="5"]{transition-delay:.45s} .rv[data-d="6"],.rv-s[data-d="6"]{transition-delay:.54s} /* The hero's line-by-line reveal slides each line up out of a window with overflow:hidden. That window used to be exactly one line box tall, which at line-height .98 sits ABOVE the bottom of a descender, so the g in "Through" was sliced flat. The window now runs deeper than the text and gives the space back with a negative margin, and the hidden state slides further down to match so nothing peeks out before it animates in. Three numbers that move together: translateY has to exceed 100% plus the padding expressed as a share of the line box. At .22em padding on a .98 line-height that is about 122%, so 135% leaves room to spare. The parent needs display:flow-root (see .hero h1 below) or the last line's negative margin collapses out through the heading and eats the gap under it instead of doing its job. */ .reveal-line{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em} .reveal-line > span{display:block;transform:translateY(135%); transition:transform 1.05s var(--ease)} .reveal-line.in > span{transform:none} .reveal-line.l2 > span{transition-delay:.13s} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .rv,.rv-s,.reveal-line > span{opacity:1!important;transform:none!important;transition:none!important} } /* ------------------------------------------------------- 20. RESPONSIVE */ @media (max-width:1080px){ .nav__links{display:none} .burger{display:flex} .nav__cta .btn-ghost{display:none} .sect__grid{grid-template-columns:1fr;gap:1.5rem} .sect__label{position:static} .principles{grid-template-columns:1fr} .books{grid-template-columns:1fr 1fr} .story__slide.on{grid-template-columns:1fr} .story__media{min-height:260px;max-height:340px} .foot__grid{grid-template-columns:1fr 1fr} } @media (max-width:760px){ body{font-size:16px} /* Buttons never wrap, so they shrink instead. A two-line pill in the header looked broken and pushed the burger off the edge. */ .h-xl{font-size:clamp(2.6rem,11.4vw,6.4rem)} .h-lg{font-size:clamp(2rem,8.4vw,4.05rem)} .btn-lg{padding:1.15em 1.5em;font-size:.82rem;letter-spacing:.03em} .btn-sm{padding:.8em 1.05em;font-size:.68rem} .nav__in{gap:.6rem;min-height:60px} .brand__t{font-size:1.24rem} .hero{min-height:auto;padding:7.5rem 0 4.5rem} .hero__bg::after{background:linear-gradient(180deg,rgba(251,248,243,.9) 0%,rgba(251,248,243,.72) 34%,rgba(251,248,243,.9) 74%,rgba(251,248,243,.99) 100%)} .scroll-hint{display:none} .fit,.offer,.f-row{grid-template-columns:1fr} .books{grid-template-columns:1fr;max-width:340px} .step{grid-template-columns:1fr;gap:.6rem} .step__n{font-size:2.1rem} .foot__grid{grid-template-columns:1fr} .foot__bot{justify-content:flex-start} .pop{left:12px;right:12px;bottom:12px;width:auto;padding:1.3rem 1.25rem 1.2rem} .pop h3{font-size:1.2rem} .pop p{font-size:.86rem;margin-bottom:1rem} .pop__ey{margin-bottom:.5rem} .cta-row .btn{width:100%} } @media (max-width:400px){ /* Below this the header CTA pushes the burger off the edge. The menu's own Book button and the hero CTA are both one tap away, so it goes. */ .nav__cta .btn-gold{display:none} .brand__t{font-size:1.16rem} } /* The invitation never sits on top of the open mobile menu. */ body.is-locked .pop{opacity:0;visibility:hidden;pointer-events:none} /* ------------------------------------------ 21. ROOM FOR THE ASSISTANT The chat launcher is fixed bottom-right. `has-chat` is added by main.js only once the widget is actually on the page, so nothing shifts on a visitor whose browser blocked it. */ @media (min-width:761px){ body.has-chat .pop{bottom:calc(var(--gut) + 8px)} /* stays left, clears nothing */ } @media (max-width:760px){ /* On a phone they share the same strip, so the invitation sits above the launcher rather than under it. */ body.has-chat .pop{bottom:84px} }