/* ============================================================= The Fashion Architect — Pattern Making Foundation Bootcamp Premium editorial system: ivory paper, espresso ink, antique gold. Cormorant (display serif) + Montserrat (body/labels). Spacious rhythm, hairline detailing, restrained motion. ============================================================= */ :root { /* Colour */ --paper: #f5efe3; /* warm ivory */ --paper-2: #ece3d3; /* deeper panel */ --ink: #17130e; /* espresso near-black */ --ink-2: #1f1912; /* dark-section background */ --ink-soft: #574d40; /* muted body text on light */ --gold: #a97f2e; /* antique-gold accent */ --gold-deep: #856022; /* darker gold, text/hover on light */ --gold-bright:#d8bc78; /* gold on dark backgrounds */ --line: #ddd0b8; /* hairline borders */ --line-soft: #e6dcc8; /* Type */ --serif: "Cormorant", Georgia, "Times New Roman", serif; --sans: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* Spacing scale (spacious) */ --space-section: clamp(4.5rem, 10vw, 9rem); --wrap: 1180px; --gutter: clamp(1.25rem, 5vw, 3.5rem); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; font-weight: 400; line-height: 1.75; letter-spacing: .005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3 { margin: 0; line-height: 1.08; font-weight: 500; } ::selection { background: var(--gold); color: #fff; } /* Thin gold hairline across the very top of the page */ body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 100; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep)); } /* ---------- Layout helpers ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .narrow { max-width: 780px; } .center { text-align: center; } .section { padding-block: var(--space-section); } /* ---------- Reveal on scroll (progressive enhancement) ---------- Content is fully visible without JS. The base hidden state applies only when is set, and never under reduced motion. */ .js .reveal { opacity: 0; transform: translateY(20px); } @media (prefers-reduced-motion: no-preference) { .js .reveal { transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); } } .js .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--gold); --btn-fg: #211502; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--sans); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; padding: 1.05em 2em; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } .btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .btn-sm { padding: .8em 1.4em; font-size: .72rem; } .btn-lg { padding: 1.2em 2.4em; font-size: .82rem; } /* Outline button on dark backgrounds */ .btn-ghost { --btn-bg: transparent; --btn-fg: var(--paper); border-color: color-mix(in srgb, var(--gold-bright) 55%, transparent); } .btn-ghost:hover { background: var(--gold); color: #211502; border-color: var(--gold); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 78px; } .brand { text-decoration: none; display: inline-flex; flex-direction: column; line-height: 1; } /* Company name is the small eyebrow; the Bootcamp is the prominent line */ .brand-mark { font-family: var(--sans); font-weight: 600; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); } .brand-sub { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; letter-spacing: .01em; color: var(--ink); margin-top: .16rem; } .nav { display: flex; align-items: center; gap: 2.25rem; } .nav-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; } .nav-links a { position: relative; text-decoration: none; font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); padding-block: .35rem; transition: color .2s ease; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--gold); transition: width .28s ease; } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { width: 100%; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); } .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(23,19,14,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(23,19,14,.04) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse 80% 70% at 28% 12%, #000 28%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 28% 12%, #000 28%, transparent 76%); pointer-events: none; } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(3.5rem, 8vw, 6.5rem); } .eyebrow { display: inline-flex; align-items: center; gap: .8rem; margin: 0 0 1.6rem; font-size: .72rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-deep); } .hero-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.04; letter-spacing: -.005em; } .hero-title em { display: block; margin-top: .5em; font-style: italic; color: var(--gold-deep); } .hero-sub { max-width: 44ch; margin: 1.75rem 0 0; font-size: clamp(1.05rem, 2.2vw, 1.25rem); font-weight: 400; color: var(--ink-soft); line-height: 1.7; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: 2.5rem; } .hero-meta { margin: 0; font-size: .95rem; color: var(--ink-soft); letter-spacing: .01em; } .hero-meta strong { color: var(--ink); font-weight: 600; } .hero-figure { position: relative; overflow: hidden; } .hero-figure .frame { position: relative; overflow: hidden; border-radius: 2px; } .hero-figure img { width: 100%; height: 100%; max-height: 660px; object-fit: cover; border-radius: 2px; box-shadow: 0 50px 90px -55px rgba(23,19,14,.65); transition: transform 1.2s cubic-bezier(.22,.61,.36,1); } .hero-figure:hover img { transform: scale(1.03); } .hero-figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .hero-figure figcaption { position: absolute; left: 1.1rem; bottom: 1.1rem; background: color-mix(in srgb, var(--ink) 84%, transparent); color: var(--paper); padding: .65rem 1.05rem; backdrop-filter: blur(4px); } .cap-role { display: block; font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-bright); } .cap-name { display: block; margin-top: .12rem; font-family: var(--serif); font-size: 1.1rem; font-weight: 500; letter-spacing: .01em; color: var(--paper); } .hero-stats { display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 5vw, 4rem); margin: clamp(3rem, 6vw, 4rem) 0 0; padding: 2rem 0 0; list-style: none; border-top: 1px solid var(--line); } .hero-stats li { display: flex; flex-direction: column; } .stat-num { font-family: var(--serif); font-size: clamp(2.1rem, 4vw, 2.9rem); font-weight: 500; line-height: 1; color: var(--ink); } .stat-num .stat-unit { color: var(--gold-deep); font-style: italic; } .stat-label { margin-top: .55rem; font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); } /* ---------- Section headings ---------- */ .section-kicker { display: inline-flex; align-items: center; gap: .8rem; margin: 0 0 1.1rem; font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); } .section-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -.005em; } .section-title em { font-style: italic; color: var(--gold-deep); } .section-head { max-width: 46ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } /* ---------- Prose ---------- */ .prose p { margin: 0 0 1.3rem; color: var(--ink-soft); font-size: 1.1rem; line-height: 1.8; } .prose em { font-style: italic; color: var(--ink); } .prose-lead { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.6rem !important; color: var(--ink) !important; line-height: 1.4; margin-top: 2rem !important; letter-spacing: -.005em; } /* ---------- Problem ---------- */ .problem { background: var(--paper); border-top: 1px solid var(--line-soft); } .pain-lead { margin: clamp(2rem, 4vw, 2.75rem) 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--ink); } .pain-list { list-style: none; margin: 1.5rem 0 clamp(2rem, 4vw, 2.75rem); padding: 0; } .pain-list li { position: relative; padding: .95rem 0 .95rem 2rem; border-top: 1px solid var(--line); color: var(--ink); font-size: 1.08rem; line-height: 1.55; } .pain-list li:last-child { border-bottom: 1px solid var(--line); } .pain-list li::before { content: "\2715"; position: absolute; left: 0; top: 1.05rem; color: var(--gold-deep); font-size: .9rem; font-weight: 600; } /* ---------- Watch / video ---------- */ .watch { background: var(--paper); border-top: 1px solid var(--line-soft); } .watch-inner { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .watch-video { margin: 0; position: relative; overflow: hidden; border-radius: 2px; } .watch-video video { width: 100%; height: auto; display: block; aspect-ratio: 9 / 16; object-fit: cover; background: var(--ink); border-radius: 2px; box-shadow: 0 50px 90px -55px rgba(23,19,14,.65); } .watch-video::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); border-radius: 2px; } .watch-copy .prose p { font-size: 1.1rem; } .watch-copy .btn { margin-top: 2rem; } /* ---------- Why / demand band ---------- */ .why { background: var(--ink-2); color: var(--paper); } .why .section-kicker { color: var(--gold-bright); } .why .section-title { color: var(--paper); } .why-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .why-item { position: relative; padding-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--gold-bright) 30%, transparent); } .why-num { display: block; font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--gold-bright); margin-bottom: .6rem; } .why-item h3 { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; margin-bottom: .7rem; color: var(--paper); } .why-item p { margin: 0; color: color-mix(in srgb, var(--paper) 74%, transparent); line-height: 1.75; } /* ---------- Curriculum (what you'll learn) ---------- */ .curriculum { background: var(--paper-2); border-block: 1px solid var(--line-soft); } .learn-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .learn-grid li { display: flex; gap: 1rem; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: 1.35rem 1.5rem; font-size: 1rem; color: var(--ink); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .learn-grid li:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 20px 40px -30px rgba(23,19,14,.4); } .learn-grid li::before { content: ""; flex: none; margin-top: .5em; width: .5rem; height: .5rem; border: 1.5px solid var(--gold); border-radius: 50%; } /* Course outline — 18 modules, two flowing columns */ .outline { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(2rem, 5vw, 4.5rem); } .outline li { break-inside: avoid; -webkit-column-break-inside: avoid; display: flex; gap: 1.1rem; align-items: baseline; padding: 1.1rem 0; border-top: 1px solid var(--line); } .outline .m-num { flex: none; min-width: 2.2ch; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--gold-deep); } .outline .m-title { display: block; font-weight: 500; font-size: 1.02rem; color: var(--ink); line-height: 1.4; } .outline .m-sub { display: block; margin-top: .25rem; font-weight: 400; font-size: .88rem; color: var(--ink-soft); line-height: 1.5; } @media (max-width: 680px) { .outline { columns: 1; } } /* ---------- What you get ---------- */ .includes { background: var(--paper); } .feature-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); background: var(--line); border: 1px solid var(--line); } .feature { background: var(--paper); padding: clamp(1.75rem, 3vw, 2.4rem); transition: background .25s ease; } .feature:hover { background: var(--cream-soft, #efe6d6); } .feature-idx { font-family: var(--serif); font-style: italic; font-size: 1.15rem; font-weight: 600; color: var(--gold-deep); } .feature h3 { margin: .7rem 0 .6rem; font-family: var(--serif); font-size: 1.5rem; font-weight: 500; } .feature p { margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.7; } /* ---------- Audience ---------- */ .audience { background: var(--paper-2); border-top: 1px solid var(--line-soft); } .audience-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .audience-card { padding: clamp(1.75rem, 3vw, 2.4rem); background: var(--paper); border: 1px solid var(--line); border-radius: 2px; position: relative; transition: transform .25s ease, box-shadow .25s ease; } .audience-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -34px rgba(23,19,14,.42); } .audience-card::before { content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 2px; background: var(--gold); } .audience-card h3 { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; margin-bottom: .7rem; } .audience-card p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; } .audience-note { max-width: 60ch; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 1.8rem); line-height: 1.4; color: var(--ink); } /* ---------- Testimonials (dark, gold — matches IG) ---------- */ .testimonials { background: var(--ink-2); color: var(--paper); } /* Wider band so the four cards read comfortably on desktop */ .testimonials .wrap { max-width: 1340px; } .testimonials .section-kicker { color: var(--gold-bright); } .testimonials .section-title { color: var(--paper); } /* One row on desktop; horizontal swipe on mobile */ .tst-grid { display: flex; gap: 1.5rem; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: .85rem; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold-bright) 45%, transparent) transparent; } .tst-grid::-webkit-scrollbar { height: 6px; } .tst-grid::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--gold-bright) 45%, transparent); border-radius: 3px; } .tst-grid::-webkit-scrollbar-track { background: transparent; } .tst-card { flex: 1 1 0; min-width: 0; scroll-snap-align: start; border: 1px solid color-mix(in srgb, var(--gold-bright) 20%, transparent); border-radius: 2px; padding: clamp(1.9rem, 2.6vw, 2.5rem); background: color-mix(in srgb, var(--paper) 4%, transparent); display: flex; flex-direction: column; transition: border-color .25s ease, transform .25s ease; } .tst-card:hover { border-color: color-mix(in srgb, var(--gold-bright) 55%, transparent); transform: translateY(-3px); } .tst-mark { display: block; font-family: var(--serif); font-size: 2.6rem; line-height: .6; color: var(--gold-bright); margin-bottom: .5rem; } .tst-quote { margin: 0 0 1.5rem; font-family: var(--serif); font-style: italic; font-size: 1.22rem; line-height: 1.55; color: color-mix(in srgb, var(--paper) 94%, transparent); } .tst-name { margin: auto 0 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-bright); font-weight: 600; font-style: normal; } .tst-foot { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; text-align: center; font-size: .82rem; letter-spacing: .04em; color: color-mix(in srgb, var(--paper) 66%, transparent); } /* Swipe cue — only shown on mobile, where testimonials are a carousel */ .tst-swipe { display: none; margin: 1.35rem 0 0; align-items: center; justify-content: center; gap: .5rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--gold-bright); } .tst-swipe span { display: inline-block; font-size: 1.05rem; } @media (max-width: 900px) { .tst-swipe { display: flex; } } @media (max-width: 900px) and (prefers-reduced-motion: no-preference) { .tst-swipe span { animation: swipeNudge 1.4s ease-in-out infinite; } } @keyframes swipeNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } } /* ---------- About (dark) ---------- */ .about { background: var(--ink); color: var(--paper); } .about .section-title, .about .prose em { color: var(--paper); } .about .prose p { color: color-mix(in srgb, var(--paper) 80%, transparent); } .about .section-kicker { color: var(--gold-bright); } .coach-title { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.6vw, 1.5rem); color: var(--gold-bright); margin: .3rem 0 1.6rem; } .about-inner { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: minmax(240px, 420px) 1fr; align-items: center; } .about-photo { position: relative; overflow: hidden; border-radius: 2px; } .about-photo img { width: 100%; border-radius: 2px; box-shadow: 0 50px 90px -55px rgba(0,0,0,.85); transition: transform 1.2s cubic-bezier(.22,.61,.36,1); } .about-photo:hover img { transform: scale(1.03); } .accolade { display: inline-flex; align-items: center; gap: .7rem; margin-top: 2rem; padding: .85rem 1.25rem; border: 1px solid color-mix(in srgb, var(--gold-bright) 45%, transparent); border-radius: 2px; font-size: .95rem; color: var(--paper); } .accolade svg { width: 18px; height: 18px; flex: none; color: var(--gold-bright); } /* ---------- Pricing ---------- */ .pricing { background: var(--paper-2); } .price-card { max-width: 900px; margin-inline: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; box-shadow: 0 40px 90px -55px rgba(23,19,14,.5); } .price-card-head { padding: clamp(2rem, 4vw, 2.75rem); background: var(--ink); color: var(--paper); } .price-card-head .section-kicker { color: var(--gold-bright); margin-bottom: .6rem; } .price-title { font-family: var(--serif); font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 500; color: var(--paper); } .price-details { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: auto 1fr; align-items: center; padding: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); } .price-figure { text-align: center; } .price-amount { display: block; font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 3.8rem); font-weight: 500; line-height: 1; color: var(--ink); } .price-note { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); } .price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; } .price-list li { position: relative; padding-left: 1.75rem; color: var(--ink-soft); } .price-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: .7rem; height: .7rem; border: 1.5px solid var(--gold); border-radius: 50%; } .price-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding: clamp(1.75rem, 4vw, 2.5rem); } .price-date { margin: 0; font-size: 1.05rem; } .price-date strong { font-weight: 600; } .price-urgency { margin: .5rem 0 0; width: 100%; color: var(--gold-deep); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; } /* ---------- FAQ ---------- */ .faq { background: var(--paper); border-top: 1px solid var(--line-soft); } .faq-list { border-bottom: 1px solid var(--line); } .faq-item { border-top: 1px solid var(--line); } .faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--ink); transition: color .2s ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--gold-deep); } .faq-item summary:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; } .faq-icon { position: relative; flex: none; width: 1.35rem; height: 1.35rem; } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--gold); border-radius: 2px; } .faq-icon::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); } .faq-icon::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); } @media (prefers-reduced-motion: no-preference) { .faq-icon::after { transition: transform .28s ease, opacity .28s ease; } } .faq-item[open] .faq-icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; } .faq-answer { padding: 0 0 1.6rem; max-width: 68ch; } .faq-answer p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.75; } .faq-answer a { color: var(--gold-deep); text-underline-offset: 3px; } /* ---------- Closer ---------- */ .closer { background: var(--paper); border-top: 1px solid var(--line-soft); } .closer-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.14; letter-spacing: -.005em; max-width: 20ch; margin: 0 auto 2.25rem; } .closer-title em { font-style: italic; color: var(--gold-deep); } .closer-meta { margin: 1.5rem 0 0; color: var(--ink-soft); font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; } .closer-lead { max-width: 46ch; margin: 0 auto 2.25rem; color: var(--ink-soft); font-size: 1.15rem; line-height: 1.7; } .closer-assurance { max-width: 54ch; margin: 3rem auto 0; padding: 1.15rem 1.4rem; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 2px; text-align: left; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; } .closer-warning { max-width: 58ch; margin: 2.25rem auto 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; } .closer-warning strong { color: var(--gold-deep); } .closer-ps { max-width: 58ch; margin: 1.5rem auto 0; text-align: left; color: var(--ink-soft); font-size: .98rem; line-height: 1.75; } .closer-ps strong { color: var(--ink); } /* ---------- Legal pages (Terms / Privacy) ---------- */ .legal-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); } .legal-header .header-inner { justify-content: space-between; } .legal-back { text-decoration: none; font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); transition: color .2s ease; } .legal-back:hover { color: var(--gold-deep); } .legal { padding-block: clamp(3rem, 7vw, 6rem); background: var(--paper); } .legal .wrap { max-width: 820px; } .legal .eyebrow { margin-bottom: 1.2rem; } .legal h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.05; letter-spacing: -.01em; margin: 0 0 1rem; } .legal .updated { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 2.5rem; } .legal-note { border: 1px solid var(--line); border-left: 3px solid var(--gold); background: var(--paper-2); padding: 1.1rem 1.35rem; border-radius: 2px; margin: 0 0 2.5rem; font-size: .95rem; color: var(--ink-soft); } .legal h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.2; margin: 2.75rem 0 .9rem; color: var(--ink); } .legal h2 .legal-idx { color: var(--gold-deep); font-style: italic; margin-right: .5rem; } .legal p { margin: 0 0 1.15rem; color: var(--ink-soft); line-height: 1.8; } .legal ul { margin: 0 0 1.15rem; padding-left: 1.3rem; } .legal li { margin-bottom: .5rem; color: var(--ink-soft); line-height: 1.75; } .legal a { color: var(--gold-deep); text-underline-offset: 3px; } .legal .ph { color: var(--gold-deep); font-weight: 500; } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: color-mix(in srgb, var(--paper) 72%, transparent); padding-block: 3.5rem; } .footer-legal { margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center; } .footer-legal a { color: color-mix(in srgb, var(--paper) 72%, transparent); text-decoration: none; font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; transition: color .2s ease; } .footer-legal a:hover { color: var(--gold-bright); } .footer-inner { text-align: center; } .footer-brand { font-family: var(--serif); font-size: 1.5rem; color: var(--paper); margin: 0 0 .5rem; letter-spacing: .01em; } .footer-tag { margin: 0 0 1.1rem; font-size: .95rem; } .footer-handle { margin: 0 0 1.5rem; } .footer-handle a { color: var(--gold-bright); text-decoration: none; letter-spacing: .1em; font-weight: 500; font-size: .82rem; text-transform: uppercase; } .footer-handle a:hover { text-decoration: underline; text-underline-offset: 4px; } .footer-fine { margin: 0; font-size: .78rem; opacity: .65; letter-spacing: .02em; } /* ---------- Cookie consent banner ---------- */ .cookie-consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200; max-width: 660px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem; background: var(--ink); color: var(--paper); border: 1px solid color-mix(in srgb, var(--gold-bright) 35%, transparent); border-radius: 4px; padding: 1.1rem 1.35rem; box-shadow: 0 30px 60px -28px rgba(0,0,0,.6); } .cookie-consent[hidden] { display: none; } .cookie-text { margin: 0; flex: 1 1 260px; font-size: .88rem; line-height: 1.6; color: color-mix(in srgb, var(--paper) 82%, transparent); } .cookie-text a { color: var(--gold-bright); text-underline-offset: 3px; } .cookie-actions { display: flex; gap: .6rem; flex: 0 0 auto; } .cookie-decline { --btn-bg: transparent; --btn-fg: var(--paper); border-color: color-mix(in srgb, var(--paper) 35%, transparent); box-shadow: none; } .cookie-decline:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); color: var(--paper); border-color: var(--paper); transform: none; } .cookie-accept:hover { background: var(--gold-deep); color: #211502; border-color: var(--gold-deep); } @media (max-width: 520px) { .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1; } } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } /* copy (pain + promise) leads on mobile; Lauren's photo sits below it */ .hero-figure { max-width: 480px; } .about-inner { grid-template-columns: 1fr; } .about-photo { max-width: 360px; } .watch-inner { grid-template-columns: 1fr; } .watch-video { max-width: 340px; margin-inline: auto; } .nav-links { display: none; } /* testimonials become a swipeable carousel */ .tst-card { flex: 0 0 82%; } } /* Mobile header + tighter vertical rhythm — most visitors are on phones */ @media (max-width: 600px) { .header-inner { height: 66px; gap: 1rem; } .brand { min-width: 0; } .brand-mark { font-size: .55rem; letter-spacing: .16em; line-height: 1.1; white-space: nowrap; } .brand-sub { font-size: 1.02rem; letter-spacing: .005em; margin-top: .16rem; white-space: nowrap; } .site-header .btn-sm { flex: none; white-space: nowrap; font-size: .56rem; letter-spacing: .04em; padding: .78em .95em; } /* shorter-label CTAs go full-width — the professional mobile pattern */ .watch-copy .btn, .closer .btn { width: 100%; } /* hero CTA: one tidy line, centred under the copy */ .hero-actions { justify-content: center; } .hero-actions .btn { font-size: .62rem; letter-spacing: .07em; padding: .95em 1.5em; white-space: nowrap; } /* tighten the vertical rhythm */ :root { --space-section: clamp(2.75rem, 8vw, 3.75rem); } .section-head { margin-bottom: 1.6rem; } .prose p { font-size: 1.02rem; line-height: 1.62; margin-bottom: 1rem; } .prose-lead { font-size: 1.3rem !important; margin-top: 1.25rem !important; } .hero-inner { padding-block: 1.75rem 2.5rem; } .hero-title { line-height: 1.07; } .hero-sub { font-size: 1.02rem; line-height: 1.6; margin-top: 1.1rem; } .eyebrow { margin-bottom: 1rem; } .hero-actions { margin-top: 1.6rem; } .about-inner, .watch-inner { gap: 1.75rem; } .coach-title { margin-bottom: 1rem; } .accolade { margin-top: 1.25rem; } .hero-stats { margin-top: 1.75rem; padding-top: 1.4rem; gap: 1.75rem; } .pain-lead { font-size: 1.3rem; margin-top: 1.75rem; } .pain-list { margin-bottom: 1.75rem; } .pain-list li { font-size: 1rem; padding: .8rem 0 .8rem 1.8rem; } .pain-list li::before { top: .9rem; } .audience-note { font-size: 1.25rem; margin-top: 1.75rem; } .tst-quote { font-size: 1.12rem; } .closer-title { margin-bottom: 1.4rem; } .closer-lead { margin: 0 auto 1.6rem; font-size: 1.05rem; } .closer-assurance { margin-top: 2rem; } .closer-warning { margin-top: 1.6rem; } .closer-ps { margin-top: 1.4rem; } .price-details { row-gap: 1.5rem; } } @media (max-width: 620px) { .price-details { grid-template-columns: 1fr; text-align: center; } .price-list { justify-items: center; } .price-list li { padding-left: 0; text-align: center; } .price-list li::before { display: none; } .price-cta { flex-direction: column; align-items: stretch; text-align: center; } .price-cta .btn { width: 100%; } }