/* ════════════════════════════════════════ SOMATIC ENERGY – Custom Styles Bootstrap 5 + Adventure V1 + Inter ════════════════════════════════════════ */ /* Adventure V1 (local) */ @font-face { font-family: 'Adventure V1'; src: url('fonts/Adventure-V1-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Adventure V1'; src: url('fonts/Adventure-V1-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Adventure V1'; src: url('fonts/Adventure-V1-SemiBold.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Adventure V1'; src: url('fonts/Adventure-V1-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Adventure V1'; src: url('fonts/Adventure-V1-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ── Design Tokens ── */ :root { --font-heading: 'Adventure V1', sans-serif; --font-body: 'Inter', sans-serif; --color-dark: #1d1d1f; --color-black: #000000; --color-white: #ffffff; --color-off-white: #f5f7f1; --color-gray: #86868b; --color-muted: rgba(0, 0, 0, 0.55); --color-footer: #202020; --color-newsletter: #2e2e2e; --color-scrolling-text: #c8c8c8; --color-faq-text: #1b263b; --color-border-light: rgba(0,0,0,0.08); --radius-sm: 10px; --radius-md: 16px; --shadow-card: 0 4px 24px rgba(0,0,0,0.06); } /* ── Base ── */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x only on body: both html+body `hidden` can break first scroll on WebKit/mobile; `clip` on html reduces horizontal scroll extent from vw children / marquee without the same issue. */ html { max-width: 100%; overflow-x: clip; } body { font-family: var(--font-body); color: var(--color-dark); background-color: #ffffff; overflow-x: hidden; max-width: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Smooth anchor jumps without `scroll-behavior` on (Safari + first-gesture jank) */ @media (prefers-reduced-motion: no-preference) { :where(a[href^='#']):not([href='#']) { scroll-margin-top: 5.5rem; } } /* Scroll-in fade (index.php adds .js to ; no-JS users stay fully visible) */ html.js .se-reveal { opacity: 0.45; transform: translateY(0.625rem); transition: opacity 0.7s ease, transform 0.7s ease; } html.js .se-reveal.se-reveal--visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .se-reveal { opacity: 1; transform: none; transition: none; } } /* Mobile: no scroll-in fade — full opacity immediately (pairs with initSectionReveal skip) */ @media (max-width: 991.98px) { html.js .se-reveal { opacity: 1; transform: none; transition: none; } } /* Desktop: footer always static — no scroll-in dim / fade */ @media (min-width: 992px) { html.js .se-footer.se-reveal { opacity: 1; transform: none; transition: none; } } /* Mobile: 20px horizontal inset sitewide (overrides Bootstrap px-3 where used) */ @media (max-width: 991.98px) { :root { --se-page-gutter: 20px; } .container-xxl.px-3, .se-inner-max.px-3 { padding-left: var(--se-page-gutter) !important; padding-right: var(--se-page-gutter) !important; } #vision .se-vision-inner { padding-left: var(--se-page-gutter) !important; padding-right: var(--se-page-gutter) !important; } } /* ── Typography ── */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; } .se-hero-title { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 4.375rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.08; } .se-heading-xl { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 4.75rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; } /* Vision Behind the Work — desktop: large responsive title */ .se-heading-vision { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4.875rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; } /* Mobile Figma: Adventure V1 Medium 36 / 95.4% / -2px, color/grey/96, centered (beats .text-white on section) */ @media (max-width: 767.98px) { #vision .se-heading-vision { font-size: 36px; font-weight: 500; line-height: 0.954; letter-spacing: -2px; text-align: center; color: #f5f5f7 !important; /* Figma color/grey/96 */ } } .se-heading-lg { font-family: var(--font-heading); font-size: clamp(1.75rem, 3.5vw, 3rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; } .se-heading-md { font-family: var(--font-heading); font-size: clamp(1.2rem, 2.2vw, 1.875rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; } .se-body-lg { font-family: var(--font-body); font-size: clamp(0.9375rem, 1.3vw, 1.125rem); font-weight: 400; line-height: 1.65; } .se-body-md { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; line-height: 1.65; } .se-body-sm { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; line-height: 1.6; } .se-muted { color: var(--color-muted); } .se-gray-text { color: var(--color-gray); } /* ── Section spacing ── */ .se-section { position: relative; z-index: 1; padding-top: clamp(4rem, 7vw, 7rem); padding-bottom: clamp(4rem, 7vw, 7rem); } /* Learn split — Figma: extra whitespace (frame ~665px content + padding) */ #learn.se-section { padding-top: 36px; padding-bottom: 60px; position: relative; } /* Page-level torus (toro1): viewport-left, vertically centered in this section */ #learn.se-section::before { content: ""; position: absolute; z-index: 0; left: 0; top: -300px; bottom: 0; width: min(96vw, 1120px); min-width: 100%; background-image: url('toro1-on-white.png'); background-repeat: no-repeat; background-position: 0% 0%; background-size: min(50%, 740px); pointer-events: none; height: 340%; } #learn.se-section > .container-xxl { position: relative; z-index: 1; } @media (max-width: 767.98px) { #learn.se-section { padding-top: 61px; } } @media (min-width: 992px) { #learn.se-section { min-height: 665px; display: flex; flex-direction: column; justify-content: center; } #intro-video.se-section { padding-bottom: 70px; } } @media (max-width: 991.98px) { #learn.se-section::before { width: 100%; min-width: 100%; background-size: auto min(120%, 1280px); opacity: 0.78; } } /* Experts — desktop: 200px top; no bottom padding */ #experts.se-section { padding-top: 200px; padding-bottom: 0; } @media (max-width: 991.98px) { #john.se-section { padding-bottom: 100px; } #experts.se-section { padding-top: 80px; padding-bottom: 0; } } /* Experts — torus deco right edge (toro7, same as pricing) */ #experts.se-section::after { content: ""; position: absolute; z-index: 0; right: 0px; bottom: 0px; top: 0px; width: 600px; height:1300px; background-image: url('toro7.png'); background-repeat: no-repeat; background-position: right bottom; background-size: contain; pointer-events: none; } #experts.se-section > .container-xxl { position: relative; z-index: 1; } @media (max-width: 991.98px) { #experts.se-section > .container-xxl.px-3 { padding-left: 10px !important; padding-right: 10px !important; } } @media (max-width: 767.98px) { #experts.se-section::after { content: none; width: min(1000px, 100vw); bottom: -1000px; opacity: 0.9; } } /* Experts heading — Adventure V1 Medium 48 / 150% / -1.2px, centered */ #experts .se-experts-heading { font-family: var(--font-heading); font-size: clamp(1.875rem, 4vw, 3rem); /* 48px */ font-weight: 500; line-height: 1.5; letter-spacing: -1.2px; text-align: center; } /* Learn section — Figma typography */ #learn .se-learn-split-text .se-heading-lg { font-family: var(--font-heading); font-size: 48px; line-height: 55px; letter-spacing: -1.2px; font-weight: 500; text-align: left; } #learn .se-learn-split-text .se-body-lg { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 24px; font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; text-align: left; } @media (max-width: 991px) { #learn .se-learn-split-text .se-heading-lg { font-size: clamp(1.75rem, 7vw, 48px); line-height: 1.15; letter-spacing: -0.03em; } #learn .se-learn-split-text .se-body-lg { font-size: clamp(1rem, 4.2vw, 24px); } /* Center first Enroll only; keep headline + lead left-aligned */ #learn .se-learn-split-text { display: flex; flex-direction: column; align-items: flex-start; } #learn .se-learn-split-text > .se-btn-dark { align-self: center; } } /* Learn headline — mobile Figma: Adventure V1 Medium 32 / 120% / -1.2px, #1d1d1f, left */ @media (max-width: 767.98px) { #learn .se-learn-split-text .se-heading-lg { font-size: 32px; line-height: 1.2; letter-spacing: -1.2px; color: #1d1d1f; text-align: left; } /* Lead copy — mobile Figma: SF Pro Display Medium 16 / 145% / -0.5%, black @ 55%, left */ #learn .se-learn-split-text .se-body-lg { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 16px; font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; text-align: left; color: rgba(0, 0, 0, 0.55); } #learn .se-learn-split-text .se-learn-lead { margin-bottom: 20px !important; } } /* ── Buttons ── */ /* Primary CTA shell — first Enroll (#learn .se-btn-dark): padding + Adventure label 18 / 145% / -0.5% */ :root { --se-btn-cta-py: 17px; --se-btn-cta-px: 29.5px; --se-btn-cta-font-size: 1.125rem; --se-btn-cta-line-height: 1.45; --se-btn-cta-letter-spacing: -0.005em; --se-btn-hover-duration: 0.58s; --se-btn-ripple-duration: 0.68s; } .se-btn-dark, .se-btn-white, .se-btn-outline-white { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: var(--se-btn-cta-py) var(--se-btn-cta-px); font-family: var(--font-heading); font-size: var(--se-btn-cta-font-size); font-weight: 500; line-height: var(--se-btn-cta-line-height); letter-spacing: var(--se-btn-cta-letter-spacing); border-radius: 50px; text-decoration: none; border: none; cursor: pointer; white-space: nowrap; } .se-btn-dark { background-color: var(--color-dark); color: var(--color-white); transition: opacity 0.2s ease; } .se-btn-dark:hover { opacity: 0.82; color: #fff; } #learn .se-learn-split-text > .se-btn-dark { background-color: #000; color: #fff; padding: 17px 30px; } #learn .se-learn-split-text > .se-btn-dark:hover { color: #fff; } /* Invert on hover (CodePen btn-6: dark fill + light label → swap for solid CTAs) */ .se-btn-label { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; color: inherit; transition: color var(--se-btn-hover-duration) ease; } /* Explicit label colors on hover (inherit loses to section #learn … :hover { color: #fff }) */ .se-btn-has-ripple.se-btn-dark:hover .se-btn-label { color: var(--color-dark); } .se-btn-has-ripple.se-btn-white:hover .se-btn-label, .se-btn-has-ripple.se-btn-pill-white:hover .se-btn-label { color: var(--color-white); } .se-btn-has-ripple.se-btn-outline-white:hover .se-btn-label, .se-btn-has-ripple.se-btn-outline-dark:hover .se-btn-label { color: var(--color-white); } .se-btn-has-ripple.se-btn-dark { border: 1.5px solid transparent; transition: background-color var(--se-btn-hover-duration) ease, color var(--se-btn-hover-duration) ease, border-color var(--se-btn-hover-duration) ease; } .se-btn-has-ripple.se-btn-dark:hover { opacity: 1; background-color: var(--color-white); color: var(--color-dark); border-color: var(--color-dark); } /* Beat #learn … .se-btn-dark:hover { color: #fff } so inverted label stays dark on white */ #learn .se-learn-split-text > .se-btn-has-ripple.se-btn-dark:hover { background-color: var(--color-white); color: var(--color-dark); border-color: #000; } .se-btn-outline-white { color: var(--color-dark); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(255, 255, 255, 0.9); transition: background 0.35s ease, color 0.35s ease; } .se-btn-outline-white:hover { background-color: #fff; color: var(--color-dark); } .se-btn-has-ripple.se-btn-outline-white { border: 1.5px solid transparent; transition: background var(--se-btn-hover-duration) ease, color var(--se-btn-hover-duration) ease, border-color var(--se-btn-hover-duration) ease, backdrop-filter var(--se-btn-hover-duration) ease; } .se-btn-has-ripple.se-btn-outline-white:hover { background-color: var(--color-dark); color: var(--color-white); border-color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } .se-btn-outline-dark { display: inline-block; background: transparent; color: var(--color-dark); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; padding: 0.65rem 1.5rem; border-radius: 50px; border: 1.5px solid var(--color-dark); text-decoration: none; cursor: pointer; transition: background var(--se-btn-hover-duration) ease, color var(--se-btn-hover-duration) ease, border-color var(--se-btn-hover-duration) ease; } .se-btn-outline-dark:hover { background: var(--color-dark); color: #fff; } .se-btn-has-ripple.se-btn-outline-dark:hover { border-color: #fff; } @media (max-width: 767.98px) { .se-btn-dark, .se-btn-white, .se-btn-outline-white { padding: 8px 16px; } .se-btn-outline-dark { padding: 8px 16px; } /* Watch Now vs Enroll Now label sizes */ .se-btn-outline-white.se-intro-play-btn, .se-btn-outline-white.se-feel-play-btn, .se-btn-outline-white.se-free-lesson-play-btn, .se-btn-outline-white.se-see-work-play-btn { font-size: 14px; } .se-btn-dark.se-btn-enroll, .se-btn-outline-white.se-btn-enroll { font-size: 18px; } } /* Pill button – white solid (navbar Join, Watch Now, Our Vision) */ .se-btn-pill-white { display: inline-block; background: #fff; color: var(--color-dark); font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; padding: 10px 42px; border-radius: 50px; border: none; text-decoration: none; cursor: pointer; transition: opacity 0.2s, background-color 0.35s ease, color 0.35s ease; white-space: nowrap; } .se-btn-pill-white:hover { opacity: 0.9; color: var(--color-dark); } .se-btn-has-ripple.se-btn-pill-white { border: 1.5px solid transparent; transition: opacity 0.2s, background-color var(--se-btn-hover-duration) ease, color var(--se-btn-hover-duration) ease, border-color var(--se-btn-hover-duration) ease; } .se-btn-has-ripple.se-btn-pill-white:hover { opacity: 1; background: var(--color-dark); color: var(--color-white); border-color: #fff; } .se-btn-white { background: var(--color-white); color: var(--color-dark); transition: opacity 0.2s, background-color 0.35s ease, color 0.35s ease; } .se-btn-white:hover { opacity: 0.9; color: var(--color-dark); } .se-btn-has-ripple.se-btn-white { border: 1.5px solid transparent; transition: opacity 0.2s, background-color var(--se-btn-hover-duration) ease, color var(--se-btn-hover-duration) ease, border-color var(--se-btn-hover-duration) ease; } .se-btn-has-ripple.se-btn-white:hover { opacity: 1; background: var(--color-dark); color: var(--color-white); border-color: #fff; } /* Position-aware hover fill (CodePen btn-6 style): circle expands from pointer */ .se-btn-has-ripple { position: relative; overflow: hidden; isolation: isolate; } .se-btn-ripple { position: absolute; left: var(--ripple-x, 50%); top: var(--ripple-y, 50%); width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; transition: width var(--se-btn-ripple-duration) ease, height var(--se-btn-ripple-duration) ease; } .se-btn-has-ripple:hover .se-btn-ripple { width: var(--ripple-d, 0px); height: var(--ripple-d, 0px); } /* Ripple: expanding fill matches hover destination (white disk → white btn, dark disk → dark btn) */ .se-btn-dark .se-btn-ripple, #learn .se-learn-split-text > .se-btn-dark .se-btn-ripple, .se-btn-has-ripple.se-btn-dark:hover .se-btn-ripple, #learn .se-learn-split-text > .se-btn-has-ripple.se-btn-dark:hover .se-btn-ripple { background: #fff; } .se-btn-white .se-btn-ripple, .se-btn-pill-white .se-btn-ripple { background: rgba(0, 0, 0, 0.08); } .se-btn-has-ripple.se-btn-white:hover .se-btn-ripple, .se-btn-has-ripple.se-btn-pill-white:hover .se-btn-ripple { background: var(--color-dark); } .se-btn-outline-white .se-btn-ripple { background: rgba(0, 0, 0, 0.08); } .se-btn-has-ripple.se-btn-outline-white:hover .se-btn-ripple { background: var(--color-dark); } .se-btn-outline-dark .se-btn-ripple { background: rgba(29, 29, 31, 0.12); } .se-btn-outline-dark:hover .se-btn-ripple { background: rgba(255, 255, 255, 0.22); } @media (prefers-reduced-motion: reduce) { .se-btn-has-ripple { overflow: visible; } .se-btn-ripple { display: none; } } /* ── Navbar ── */ /* --seh-doc-client-px: set in header-sehlp.php from documentElement.clientWidth (fixed nav vs layout viewport). */ #mainNav.se-navbar { width: min(100%, var(--seh-doc-client-px, 100%)); max-width: min(100%, var(--seh-doc-client-px, 100%)); overflow-x: clip; } /* Flex min-content can force wider-than-viewport row; allow shrinking */ .se-navbar > .se-navbar-container { min-width: 0; } .se-navbar { background: transparent; transition: background 0.35s ease, box-shadow 0.35s ease; padding-top: 1rem; /* 16px — desktop; mobile override below */ padding-bottom: 1rem; /* Bootstrap 5: .navbar-nav .nav-link uses --bs-navbar-color (beats plain .se-nav-link) */ --bs-navbar-color: rgba(255, 255, 255, 0.92); --bs-navbar-hover-color: #ffffff; --bs-navbar-active-color: #ffffff; --bs-navbar-disabled-color: rgba(255, 255, 255, 0.45); } .se-navbar-scrolled { background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(0,0,0,0.08); --bs-navbar-color: var(--color-dark); --bs-navbar-hover-color: #000000; --bs-navbar-active-color: var(--color-dark); --bs-navbar-disabled-color: rgba(0, 0, 0, 0.35); } /* White wordmark (logo.png): visible on dark hero; darken on light surfaces */ .se-nav-logo { transition: filter 0.35s ease; display: block; height: auto; } /* Desktop (lg+): design width */ @media (min-width: 992px) { .se-navbar-brand .se-nav-logo { width: 178px; max-width: none; } } .se-navbar:not(.se-navbar-scrolled) .navbar-brand .se-nav-logo { filter: none; } .se-navbar-scrolled .navbar-brand .se-nav-logo { filter: brightness(0); } .se-nav-link { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; color: rgba(255,255,255,0.9); text-decoration: none; transition: color 0.2s; } /* Navbar “Sign In” — Adventure V1 Medium 16px / 145% (design spec; desktop only) */ @media (min-width: 992px) { .se-nav-signin { font-family: var(--font-heading); font-size: 1rem; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-align: center; } } .se-nav-link:hover { color: #fff; } .se-navbar-scrolled .se-nav-link { color: var(--color-dark); } .se-navbar-scrolled .se-nav-link:hover { color: #000; } /* Force light/dark nav text: .nav-link uses --bs-nav-link-color from ul.navbar-nav (Bootstrap beats .se-nav-link alone) */ #mainNav.se-navbar:not(.se-navbar-scrolled) .navbar-nav { --bs-nav-link-color: rgba(255, 255, 255, 0.95); --bs-nav-link-hover-color: #ffffff; } #mainNav.se-navbar.se-navbar-scrolled .navbar-nav { --bs-nav-link-color: var(--color-dark); --bs-nav-link-hover-color: #000000; } #mainNav.se-navbar:not(.se-navbar-scrolled) .navbar-nav .nav-link, #mainNav.se-navbar:not(.se-navbar-scrolled) a.se-nav-link { color: rgba(255, 255, 255, 0.95); } #mainNav.se-navbar:not(.se-navbar-scrolled) .navbar-nav .nav-link:hover, #mainNav.se-navbar:not(.se-navbar-scrolled) .navbar-nav .nav-link:focus, #mainNav.se-navbar:not(.se-navbar-scrolled) a.se-nav-link:hover, #mainNav.se-navbar:not(.se-navbar-scrolled) a.se-nav-link:focus { color: #ffffff; } #mainNav.se-navbar.se-navbar-scrolled .navbar-nav .nav-link, #mainNav.se-navbar.se-navbar-scrolled a.se-nav-link { color: var(--color-dark); } #mainNav.se-navbar.se-navbar-scrolled .navbar-nav .nav-link:hover, #mainNav.se-navbar.se-navbar-scrolled .navbar-nav .nav-link:focus, #mainNav.se-navbar.se-navbar-scrolled a.se-nav-link:hover, #mainNav.se-navbar.se-navbar-scrolled a.se-nav-link:focus { color: #000000; } /* Desktop main nav — animated underline (center links only; #desktopNav hidden on mobile) */ /* No horizontal padding on the link: ul has gap-* so underline ::after width matches text only */ #desktopNav .navbar-nav .nav-link.se-nav-link { position: relative; display: inline-block; padding-inline: 0; } #desktopNav .navbar-nav .nav-link.se-nav-link::after { content: ""; position: absolute; left: 0; bottom: 0.5rem; width: 100%; height: 1px; background: currentColor; opacity: 0.85; transform: scaleX(0); transform-origin: left center; transition: transform 0.28s ease; } #desktopNav .navbar-nav .nav-link.se-nav-link:hover::after, #desktopNav .navbar-nav .nav-link.se-nav-link:focus-visible::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { #desktopNav .navbar-nav .nav-link.se-nav-link::after { transition-duration: 0.01ms; } } /* scrolled state – Join pill keeps its white look (already white) */ .se-navbar-scrolled .se-btn-pill-white { background: #fff; color: var(--color-dark); box-shadow: 0 0 0 1px rgba(0,0,0,0.12); } /* Mobile navbar: fit viewport, no hamburger — compact CTAs + link row */ @media (max-width: 991.98px) { .se-navbar { overflow-x: clip; padding-top: 1rem; /* 24px — mobile only */ } .se-navbar > .se-navbar-container { max-width: 100%; min-width: 0; flex-wrap: wrap; row-gap: 0.35rem; } .se-navbar-brand { min-width: 0; margin-right: 0; max-width: calc(100% - 9.5rem); } .se-navbar-brand .se-nav-logo { width: 124px; max-width: 124px; height: auto; object-fit: contain; object-position: left center; } .se-navbar-mobile-cta { margin-left: auto; gap: 15px; } .se-navbar-mobile-links { flex: 1 1 100%; order: 4; padding-top: 0.15rem; } .se-nav-link--mobile-row { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.01em; padding: 0.15rem 0; white-space: nowrap; } .se-nav-link--compact { font-size: 0.8125rem; padding: 0.25rem 0; } .se-btn-pill-white--nav-compact { width: 85px; max-width: 85px; box-sizing: border-box; padding: 9px 0; font-size: 14px; line-height: 20px; text-align: center; } @media (max-width: 389.98px) { .se-nav-link--compact { font-size: 0.75rem; } } } /* ── Hero — video + poster (first frame stills: assets/hero-video-frame-*.jpg) ── */ .se-hero { height: 100svh; min-height: 520px; background-color: #000; position: relative; z-index: 5; overflow: hidden; /* Let vertical scroll pass to the document (hero is full-viewport; avoids “stuck” first swipe) */ touch-action: pan-y; } /* Full-bleed hero video (same sources as WP marketing home hero) */ .se-hero-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .se-hero-video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; pointer-events: none; touch-action: pan-y; } .se-hero-video--mobile { display: none; } @media (max-width: 767.98px) { .se-hero-video--desktop { display: none; } .se-hero-video--mobile { display: block; } } @media (prefers-reduced-motion: reduce) { .se-hero-media { display: none; } } /* Centered hero content */ .se-hero-center { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 1.5rem; } @media (max-width: 991.98px) { .se-hero-center { padding-left: var(--se-page-gutter); padding-right: var(--se-page-gutter); } } /* Mobile: headline lower in frame (~66% from top), not vertically centered */ @media (max-width: 767.98px) { .se-hero-center { align-items: flex-start; justify-content: center; padding-top: 66svh; padding-left: 10px; padding-right: 10px; } /* Hero title — Figma mobile: Adventure V1 Medium 36 / 41 / -1.2px, white, centered */ .se-hero-title { font-size: 36px; line-height: 41px; letter-spacing: -1.2px; font-weight: 500; text-align: center; } } /* Bottom bar: SCROLL TO EXPLORE on left, arrow on right */ .se-hero-bottom { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 2.5rem 3rem; } @media (max-width: 991px) { .se-hero-bottom { display: none !important; } } /* Figma: SF Pro Display Medium 16 / 28 / -0.2px, #fff, left, uppercase */ .se-scroll-label { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 1rem; font-weight: 500; line-height: 28px; letter-spacing: -0.2px; color: #fff; text-align: left; text-transform: uppercase; } /* ── Learn Split: 606px text | 32px gap | 633px image (desktop) ── */ .se-learn-split { display: grid; gap: 2rem; align-items: center; width: 100%; max-width: 1271px; margin-left: auto; margin-right: auto; } @media (min-width: 992px) { .se-learn-split { gap: 32px; grid-template-columns: minmax(0, 606px) minmax(0, 633px); } } @media (max-width: 991px) { .se-learn-split { grid-template-columns: 1fr; } } .se-split-img { object-fit: cover; max-height: 500px; width: 100%; display: block; } /* ── Intro Video — static art (full image, no crop); Bunny iframe on “Watch Now” ── */ .se-intro-video { width: 100%; margin-left: auto; margin-right: auto; border-radius: var(--radius-md); overflow: hidden; display: block; position: relative; } .se-intro-video-poster { width: 100%; height: auto; display: block; border-radius: inherit; } /* Mobile: INTRO VID.png — background art + same aspect as image (716×1168) */ @media (max-width: 767.98px) { .se-intro-video { aspect-ratio: 716 / 1168; min-height: 0; background-image: url('INTRO VID.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } .se-intro-video-poster { display: none; } .se-intro-video.se-intro-video--playing { aspect-ratio: 16 / 9; background-image: none; } } .se-intro-video-frame { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: inherit; background: #000; } /* Playing: poster hidden; box uses video aspect so iframe fills */ .se-intro-video--playing { aspect-ratio: 16 / 9; min-height: 200px; } .se-intro-video--playing .se-intro-video-poster { display: none; } .se-intro-video--playing .se-intro-content { display: none; } .se-intro-iframe { display: block; width: 100%; height: 100%; border: 0; } .se-intro-content { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 1rem; } @media (max-width: 991.98px) { .se-intro-content { padding-left: var(--se-page-gutter); padding-right: var(--se-page-gutter); } } #intro-video .se-heading-xl { margin-top: 0; } /* Mobile Figma: “What is Somatic Energy?” — Adventure V1 Medium 36 / 110% / -1.2px, #fff, centered */ @media (max-width: 767.98px) { #intro-video .se-heading-xl { font-size: 36px; font-weight: 500; line-height: 1.1; letter-spacing: -1.2px; text-align: center; color: #ffffff; } } .se-subtitle { font-family: var(--font-body); font-size: 1rem; font-weight: 400; color: rgba(255, 255, 255, 0.8); } /* ── Program Cards — Figma: 450 × 528 ── */ /* --program-card-bg / --program-card-bg-hover set per card (hover = lossy animated WebP) */ .se-program-card { width: min(100%, 450px); margin-left: auto; margin-right: auto; aspect-ratio: 450 / 528; height: auto; background-image: var(--program-card-bg); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; padding: 1.25rem; position: relative; overflow: hidden; cursor: pointer; } /* Animated layer on top — fade in so the static bg stays visible while the WebP decodes (avoids white flash on hover). */ .se-program-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--program-card-bg-hover); background-size: cover; background-position: center; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; border-radius: inherit; } .se-program-num { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; color: rgba(255,255,255,0.75); position: absolute; top: 1.25rem; left: 1.25rem; z-index: 1; } .se-program-title { font-family: var(--font-heading); font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 500; color: var(--color-white); line-height: 1.15; text-align: center; position: relative; z-index: 1; margin-top: 50px; margin-bottom: 0; } /* Mobile program cards — same 450:528 proportion */ .se-program-card-mobile { width: 100%; max-width: 450px; margin-left: auto; margin-right: auto; aspect-ratio: 450 / 528; height: auto; background-image: var(--program-card-bg); background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; position: relative; overflow: hidden; } @media (hover: hover) and (pointer: fine) { #program .se-program-card:hover::before { opacity: 1; } #program .se-program-card-mobile:hover { background-image: var(--program-card-bg-hover); } } @media (prefers-reduced-motion: reduce) { #program .se-program-card::before { display: none; } #program .se-program-card-mobile:hover { background-image: var(--program-card-bg); } } /* Mobile — no hover: animated WebP as card background; static if user prefers reduced motion */ @media (max-width: 991.98px) { #program .se-program-card-mobile { background-image: var(--program-card-bg-hover); } } @media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { #program .se-program-card-mobile { background-image: var(--program-card-bg); } } /* Mobile — Figma: card titles Adventure V1 Medium 32 / 41 / 0, #fff, centered */ @media (max-width: 991.98px) { #program .se-program-title { font-family: var(--font-heading); font-size: 32px; font-weight: 500; line-height: 41px; letter-spacing: 0; color: #fff; text-align: center; } } /* Below-card copy — SF Pro Display Medium 18 / 21 / -0.24px; body #86868B, emphasis #000 */ .se-program-desc { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 18px; font-weight: 500; line-height: 21px; letter-spacing: -0.24px; text-align: left; color: var(--color-gray); } /* Bootstrap .text-dark uses !important; win for pure black in this block */ .se-program-desc .text-dark { color: #000 !important; } /* Mobile — “150+ video lessons…” Figma: SF Pro Display Medium 16 / 21 / -0.24px; body #86868B, emphasis #000 */ @media (max-width: 767.98px) { .se-program-desc { font-size: 16px; line-height: 21px; letter-spacing: -0.24px; font-weight: 500; text-align: left; color: var(--color-gray); } } /* Program section: no extra bottom padding (techniques block sits flush above next section) */ #program.se-section { padding-bottom: 0; /* Stack above #training toro6 (::after extends up with negative top); .se-section defaults to z-index 1 */ z-index: 2; } /* Mobile — Figma: padding-top 2rem; “The program includes” Adventure V1 Medium 32 / 35 / -1.2px, #1D1D1F, centered */ @media (max-width: 991.98px) { #program.se-section { padding-top: 2rem; } #program .container-xxl > .se-heading-lg { font-family: var(--font-heading); font-size: 32px; font-weight: 500; line-height: 35px; letter-spacing: -1.2px; color: #1d1d1f; text-align: center; } } @media (max-width: 767.98px) { #program.se-section { padding-top: 16px; } #program .se-program-includes-heading { margin-bottom: 28px !important; } } /* Inner content column — max 1050px centered; matches dev green guides (Why join inner edges) */ .se-inner-max { max-width: 1050px; margin-left: auto; margin-right: auto; } /* Wider desktop frame 1201px (Figma cyan / techniques block) */ @media (min-width: 992px) { .se-inner-max.se-inner-max--techniques, .se-inner-max.se-inner-max--see-work { max-width: 1201px; } } /* Heading + body sit above decorative bg overlap from #training */ .se-inner-max.se-inner-max--techniques { position: relative; z-index: 1; } /* "This is not just about techniques" — mobile: stacked; lg+: 269 | 68 | 864 (Figma) */ .se-techniques-row { display: grid; grid-template-columns: 1fr; width: 100%; max-width: none; margin-top: 1rem; margin-left: 0; margin-right: 0; padding-top: 2rem; align-items: start; row-gap: 1rem; } @media (min-width: 992px) { .se-techniques-row { padding-top: 150px; row-gap: 0; grid-template-columns: minmax(0, 269fr) minmax(0, 864fr); column-gap: 68px; } } /* Figma: Adventure V1 Medium 32 / 35 / -1.2px; left-aligned; top-aligned with paragraph */ .se-techniques-heading { font-family: var(--font-heading); font-weight: 500; text-align: left; font-size: clamp(1.25rem, 5vw, 32px); line-height: 1.1; letter-spacing: -0.04em; } @media (min-width: 992px) { .se-techniques-heading { font-size: 32px; line-height: 35px; letter-spacing: -1.2px; } } /* Mobile — Figma: padding-top 100; heading Adventure V1 Medium 32 / 35 / -1.2px, Mine Shaft / #1d1d1f, left */ @media (max-width: 767.98px) { .se-techniques-row { padding-top: 100px; } .se-techniques-heading { font-size: 32px; font-weight: 500; line-height: 35px; letter-spacing: -1.2px; text-align: left; color: var(--color-dark); } } /* Figma: SF Pro Display Medium 21 / 29 / 0.23px; body #86868B */ .se-techniques-body { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-weight: 500; text-align: left; font-size: clamp(0.9375rem, 2.8vw, 21px); line-height: 1.38; letter-spacing: 0.23px; color: #86868b; } @media (min-width: 992px) { .se-techniques-body { font-size: 21px; line-height: 29px; } } /* Techniques paragraph — mobile Figma: SF Pro Display Medium 16 / 145% / 0.23px */ @media (max-width: 767.98px) { .se-techniques-body { font-size: 16px; line-height: 1.45; letter-spacing: 0.23px; } } /* Training section title — Adventure V1 Medium 48 / 84 / -1.2px, centered */ #training .se-heading-lg { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.75rem, 6vw, 48px); line-height: 1.75; /* 84px at 48px */ letter-spacing: -1.2px; text-align: center; color: var(--color-dark); } /* Mobile — Figma: 32 / -1.2px, centered; two lines; 30px below title before slides */ @media (max-width: 767.98px) { #training .se-training-modules-heading { font-size: 32px; line-height: 1.15; letter-spacing: -1.2px; text-align: center; margin-bottom: 30px !important; } /* Was 64px floor from .se-section; mobile training uses 84px minimum top padding */ #training.se-section { padding-top: clamp(5.25rem, 7vw, 7rem); } } /* Training — toro6 (Figma: 1546×1137, opacity 48%, rotation -90°); flush to viewport like #learn torus */ #training.se-section { position: relative; width: 100%; max-width: none; margin-left: 0; margin-right: 0; box-sizing: border-box; z-index: 1; } #training.se-section::after { content: ""; position: absolute; z-index: 0; pointer-events: none; background-image: url('toro6.png'); background-repeat: no-repeat; background-position: left center; background-size: contain; opacity: 1; } #training.se-section > .container-xxl, #training.se-section > .se-modules-outer { position: relative; z-index: 1; } @media (min-width: 992px) { #training.se-section::after { width: 1546px; height: 1537px; /* Section is full-bleed: padding edge = viewport left (not container-xxl inset) */ left: 0; right: auto; top: -180px; transform-origin: left center; opacity: 1; } } @media (max-width: 991.98px) { #training.se-section::after { width: min(130vw, 900px); height: min(95vw, 660px); left: 0; right: auto; bottom: -220px; top: auto; transform-origin: left center; opacity: 1; } } @media (max-width: 767.98px) { #training.se-section::after { width: min(1000vw, 900px); height: min(195vw, 660px); left: 0; right: auto; bottom: -520px; top: auto; } } /* ── Module Carousel ── */ /* Full-bleed strip (edge-to-edge); slides are fixed px at each breakpoint */ #training .se-modules-outer { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; padding-left: env(safe-area-inset-left, 0); padding-right: env(safe-area-inset-right, 0); box-sizing: border-box; } .se-modules-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: 20px; padding-left: 0; padding-right: max(1rem, env(safe-area-inset-right, 0)); padding-bottom: 4px; /* prevent shadow clipping */ } .se-modules-track::-webkit-scrollbar { display: none; } /* Desktop: 395 × 700 (Figma module card) */ .se-module-card { width: 395px; height: 700px; scroll-snap-align: start; flex-shrink: 0; cursor: pointer; border-radius: 12px; overflow: hidden; position: relative; box-sizing: border-box; padding-left: 20px; } /* Mobile: 304 × 500 — fixed size at all small viewports */ @media (max-width: 991.98px) { .se-module-card { width: 304px; height: 500px; } } /* Image layer fills viewport behind labels; hover blurs this stack only */ .se-module-media { position: absolute; inset: 0; z-index: 0; } /* Plus-in-circle hint — top/right mirror .se-module-label-wrap padding from top/left (1rem) */ .se-module-pulse-hint { position: absolute; top: 1rem; right: 1rem; z-index: 2; /* 49 / 1.12 ≈ 43.75px — max scale in keyframes hits 49px */ width: calc(49px / 1.12); height: calc(49px / 1.12); pointer-events: none; transition: opacity 0.3s ease; } .se-module-pulse-hint svg { display: block; width: 100%; height: auto; animation: se-module-pulse-hint 2.1s ease-in-out infinite; will-change: transform, opacity; } @keyframes se-module-pulse-hint { 0%, 100% { transform: scale(1); opacity: 0.65; } 50% { transform: scale(1.12); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .se-module-pulse-hint svg { animation: none; opacity: 0.75; } } .se-module-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.4s ease, transform 0.45s ease; will-change: filter, transform; } .se-module-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 40%, rgba(0,0,0,0.5) 100%); pointer-events: none; } .se-module-hover-panel { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 1rem 1.25rem; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .se-module-hover-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; width: 100%; max-height: min(78%, 440px); } /* Hover copy — same Figma type as module label (slides overlay) */ .se-module-hover-text { margin: 0; font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 21.6px; letter-spacing: 0; color: #ffffff; text-align: left; flex: 1 1 auto; min-height: 0; max-height: min(60vh, 360px); overflow-y: auto; -webkit-overflow-scrolling: touch; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); } /* Desktop / fine pointer: blur + copy on hover */ @media (min-width: 992px) and (hover: hover) and (pointer: fine) { .se-module-card:hover .se-module-img { filter: blur(14px); transform: scale(1.07); } .se-module-card:hover .se-module-hover-panel { opacity: 1; } .se-module-card:hover .se-module-pulse-hint { opacity: 0; } } /* Keyboard / focus (carousel cards are focusable for overlay) */ .se-module-card:focus { outline: none; } .se-module-card:focus-visible { outline: 2px solid rgba(255,255,255,0.85); outline-offset: 2px; } .se-module-card:focus-visible .se-module-img { filter: blur(14px); transform: scale(1.07); } .se-module-card:focus-visible .se-module-hover-panel { opacity: 1; } .se-module-card:focus-visible .se-module-pulse-hint { opacity: 0; } /* Mobile / narrow: tap toggles .se-module-card--expanded (see inline script) */ @media (max-width: 991.98px) { .se-module-card--expanded .se-module-img { filter: blur(14px); transform: scale(1.07); } .se-module-card--expanded .se-module-hover-panel { opacity: 1; pointer-events: auto; } .se-module-card--expanded .se-module-pulse-hint { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .se-module-img, .se-module-hover-panel { transition-duration: 0.01ms; } } /* Module label at TOP — Figma: Adventure Semi Bold 16 / 21.6 / 0%, color/white/solid, left */ .se-module-label { font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 21.6px; letter-spacing: 0; color: #ffffff; text-align: left; text-transform: uppercase; } .se-module-label-wrap { position: absolute; top: 0; left: 0; padding: 1rem 1rem 0; z-index: 4; font-family: var(--font-heading); font-size: 16px; font-weight: 600; line-height: 21.6px; letter-spacing: 0; color: #ffffff; text-align: left; text-transform: uppercase; } /* Module title at BOTTOM — desktop: fluid up to ~32px; narrow cards: Figma 28 / 30 / 0, white, left */ .se-module-title-wrap { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 1rem 30px 20px; z-index: 4; font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.125rem, 4vw, 2rem); /* 32px max */ line-height: 1.125; /* 36px at 32px */ letter-spacing: 0; color: #fff; text-align: left; } @media (max-width: 991.98px) { .se-module-title-wrap { font-size: 28px; line-height: 30px; letter-spacing: 0; font-weight: 500; text-align: left; } } .se-carousel-btn { background: none; border: none; padding: 0; cursor: pointer; transition: opacity 0.2s; line-height: 0; } .se-carousel-btn img { display: block; width: 36px; height: 36px; } .se-carousel-btn:hover { opacity: 0.65; } /* ── John Section — 500×780 portrait | 60px gap | 697px text (desktop) ── */ .se-john-grid { display: grid; gap: 60px; align-items: start; } .se-john-content { min-width: 0; } /* "Learn from one of the leading voices…" — Figma: Adventure V1 Medium 48 / 54 / -1.2px, left */ #john .se-john-content .se-heading-lg { font-family: var(--font-heading); font-weight: 500; text-align: left; font-size: clamp(1.75rem, 6vw, 48px); line-height: 1.12; letter-spacing: -0.03em; } @media (min-width: 992px) { #john .se-john-content .se-heading-lg { font-size: 48px; line-height: 54px; letter-spacing: -1.2px; } .se-john-grid { grid-template-columns: 500px minmax(0, 697px); max-width: calc(500px + 60px + 697px); margin-left: auto; margin-right: auto; justify-content: center; align-items: center; } } /* “Learn from one of the leading voices…” — mobile: 32px / line-height 1.2 / -1.2px, #000, left */ @media (max-width: 767.98px) { #john .se-john-content .se-heading-lg { font-size: 32px; line-height: 1.2; letter-spacing: -1.2px; color: #000; text-align: left; } } .se-john-portrait { display: block; object-fit: cover; object-position: 30% top; width: 500px; height: 780px; max-width: 100%; } @media (max-width: 991px) { /* Full width of container inner (px-3) — matches layout guide lines */ .se-john-media { width: 100%; min-width: 0; } .se-john-portrait { width: 100%; max-width: 100%; height: auto; aspect-ratio: 500 / 780; margin-left: 0; margin-right: 0; } } @media (max-width: 767.98px) { .se-john-grid { gap: 24px; } } /* Bio copy — Figma: SF Pro Display Medium 21, letter-spacing 0.23px, fill #7D7E79, line-height Auto */ .se-john-bio p { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-weight: 500; font-size: clamp(0.9375rem, 3.5vw, 21px); line-height: 1.45; letter-spacing: 0.23px; text-align: left; color: #7d7e79; margin-bottom: 1rem; } @media (min-width: 992px) { .se-john-bio p { margin-bottom: 30px; } .se-john-bio p { font-size: 21px; line-height: normal; } } /* Bio paragraphs — mobile Figma: SF Pro Display Medium 16 / auto / 0.23px, #7D7E79, left */ @media (max-width: 767.98px) { #john .se-john-bio p { font-size: 16px; line-height: normal; letter-spacing: 0.23px; color: #7d7e79; text-align: left; } } /* John — press logos: keep strip inside container padding (same horizontal inset as bio), not full-bleed */ /* * Press logos: space-between + modest column-gap. * Desktop: normalized caps (~28–30px row height) so marks feel similar; mobile keeps tighter Figma-scale. */ #john .se-social-proof-logos { display: grid; width: 100%; max-width: 100%; grid-template-columns: repeat(8, auto); justify-content: space-between; align-items: center; justify-items: center; column-gap: clamp(0.25rem, 1vw, 0.5rem); row-gap: clamp(0.35rem, 1vw, 0.55rem); overflow: visible; } #john .se-social-proof-logos img { display: block; min-width: 0; width: auto; height: auto; object-fit: contain; object-position: center; align-self: center; } /* Optical nudge — People / Allure (mobile + desktop) */ #john .se-social-proof-logos img:nth-child(7) { transform: translateY(2px); } #john .se-social-proof-logos img:nth-child(8) { } /* Mobile / tablet: 2×4 — ~82% scale so marks fit the grid */ @media (max-width: 991.98px) { #john .se-social-proof-logos { grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: clamp(0.3rem, 2vw, 0.65rem); row-gap: clamp(1.7rem, 8vw, 2.7rem); } #john .se-social-proof-logos img:nth-child(1) { max-width: 77px; max-height: 21px; } #john .se-social-proof-logos img:nth-child(2) { max-width: 62px; max-height: 25px; } #john .se-social-proof-logos img:nth-child(3) { max-width: 56px; max-height: 39px; } #john .se-social-proof-logos img:nth-child(4) { max-width: 38px; max-height: 38px; } #john .se-social-proof-logos img:nth-child(5) { max-width: 72px; max-height: 20px; } #john .se-social-proof-logos img:nth-child(6) { max-width: 41px; max-height: 24px; } #john .se-social-proof-logos img:nth-child(7) { max-width: 70px; max-height: 28px; } #john .se-social-proof-logos img:nth-child(8) { max-width: 70px; max-height: 21px; } } /* Desktop: single row — balanced visual weight + space-between */ @media (min-width: 992px) { #john .se-social-proof-logos { grid-template-columns: repeat(8, auto); column-gap: clamp(0.5rem, 1.65vw, 1.05rem); row-gap: 0; justify-content: space-between; } #john .se-social-proof-logos img:nth-child(1) { max-width: 100px; max-height: 28px; } #john .se-social-proof-logos img:nth-child(2) { max-width: 78px; max-height: 30px; } #john .se-social-proof-logos img:nth-child(3) { max-width: 54px; max-height: 30px; } #john .se-social-proof-logos img:nth-child(4) { max-width: 34px; max-height: 30px; } #john .se-social-proof-logos img:nth-child(5) { max-width: 92px; max-height: 26px; } #john .se-social-proof-logos img:nth-child(6) { max-width: 48px; max-height: 28px; } #john .se-social-proof-logos img:nth-child(7) { max-width: 90px; max-height: 30px; } #john .se-social-proof-logos img:nth-child(8) { max-width: 90px; max-height: 26px; } } /* ── Belong Here ── */ /* Stack above #experts ::after torus (deco extends upward over preceding sections) */ #belong.se-belong { z-index: 2; } .se-belong { margin-top: 100px; height: clamp(380px, 52vw, 660px); background-image: url('belong-here.png'); background-size: cover; background-position: center; position: relative; overflow: hidden; } @media (min-width: 992px) { .se-belong { height: 538px; } } /* Mobile: art from Figma export (Container.png → belong-container-mobile.png) above the ticker */ @media (max-width: 767.98px) { .se-belong { margin-top: 70px; background-image: url('belong-container-mobile.png'); height: auto; aspect-ratio: 780 / 824; min-height: 0; } } /* Belong heading: Adventure V1 Medium 48 / 50 / -1.2px; left-aligned inside se-inner-max */ .se-belong-heading { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.875rem, 4.2vw, 3rem); /* 48px desktop */ line-height: clamp(2rem, 4.35vw, 3.125rem); /* 50px desktop */ letter-spacing: -1.2px; margin: 0; text-align: left; max-width: min(28rem, 100%); } /* “No matter your background…” — mobile Figma: Adventure V1 Medium 36 / 36 / -1.2px, white, left */ @media (max-width: 767.98px) { .se-belong-heading { font-size: 36px; line-height: 36px; letter-spacing: -1.2px; font-weight: 500; text-align: left; color: #fff; } } /* Vertically centered; inner .se-inner-max matches narrower green guide (1050) like Why join */ .se-belong-content { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 1; } /* ── Marquee — stack above #experts ::after torus like #belong */ .se-marquee-wrap { position: relative; z-index: 2; background: #fff; padding: 1.25rem 0; overflow: hidden; max-width: 100%; contain: paint; } .se-marquee-track { display: flex; align-items: center; gap: 3.5rem; white-space: nowrap; animation: marqueeScroll 28s linear infinite; width: max-content; } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .se-marquee-item { font-family: var(--font-heading); font-size: clamp(1.375rem, 2.8vw, 2.25rem); /* 36px */ font-weight: 500; /* Medium */ line-height: clamp(2.25rem, 3.9vw, 3.125rem); /* 50px */ letter-spacing: -1.2px; color: var(--color-scrolling-text); text-align: left; flex-shrink: 0; } /* Mobile — Figma: Adventure V1 Medium 36 / 50 / -1.2px, #D0D0D0 (clamp can read larger on wide phones) */ @media (max-width: 767.98px) { .se-marquee-item { font-size: 36px; line-height: 50px; letter-spacing: -1.2px; color: #d0d0d0; } .se-marquee-track { gap: 2rem; } .se-marquee-wrap { padding: 0.85rem 0; } } /* ── Experts — quote body: SF Pro Display Medium 20 / 150% / -0.5%, left ── */ .se-quote-text { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: clamp(1rem, 1.8vw, 1.25rem); /* 20px */ font-weight: 500; line-height: 1.5; letter-spacing: -0.005em; /* -0.5% in Figma */ color: rgba(0, 0, 0, 0.7); text-align: left; } /* Mobile — quote Figma: SF Pro Display Medium 16 / 150% / -0.5%, black @ 55%, left */ @media (max-width: 767.98px) { #experts .se-quote-text { font-size: 16px; line-height: 1.5; letter-spacing: -0.005em; color: rgba(0, 0, 0, 0.55); text-align: left; } } /* Rule above each quote (column-wide; gutter separates the two lines) */ .se-expert-divider { border: none; border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 0 0 1.25rem; opacity: 1; } /* Mobile: 71×71, radius 24 — desktop: 106×106, radius 24 */ .se-expert-avatar { width: 71px; height: 71px; object-fit: cover; border-radius: 24px; flex-shrink: 0; } @media (min-width: 992px) { .se-expert-avatar { width: 106px; height: 106px; } } /* Expert attribution name — SF Pro Display Bold; slightly larger than title (ref) */ .se-expert-name { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 16px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #1a1a1a; } /* Text column: fill space beside avatar; word breaks only at spaces (15rem max was forcing ugly wraps) */ .se-expert-meta { flex: 1 1 0; min-width: 0; word-break: normal; overflow-wrap: normal; hyphens: none; } @media (max-width: 767.98px) { /* Tighter than Bootstrap .mt-4 on the attribution text block */ #experts .se-expert-meta { margin-top: 0.5rem !important; } } /* Subtext — SF Pro Display Bold 15 / ~115% / -2%, #1A1A1A */ .se-expert-title { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 15px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: #1a1a1a; margin-top: 6px; } /* Why practitioners join — width via .se-inner-max on .se-why-join-wrap */ /* Above #membership torus (::before extends upward with same z as .se-section) */ #why-join.se-section { z-index: 2; padding-top: 200px; } #why-join .se-why-join-title { padding-bottom: 30px; margin-bottom: 0; } /* Tablet/mobile — +40px top vs .se-section */ @media (max-width: 991.98px) { #why-join.se-section { padding-top: calc(clamp(4rem, 7vw, 7rem) + 40px); } } /* “Why practitioners join” — mobile Figma: Adventure V1 Medium 36 / 120% / -1.2px, #000, centered */ @media (max-width: 767.98px) { #why-join .se-why-join-title { font-family: var(--font-heading); font-size: 36px; font-weight: 500; line-height: 1.2; letter-spacing: -1.2px; color: #000; text-align: center; } #why-join .row.align-items-center { justify-content: center; } /* Extra horizontal padding vs image so copy reads narrower */ #why-join .row > .col-12.col-md { padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 1rem); padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 1rem); } /* Paragraphs under card titles — Figma: SF Pro Display Medium 16 / 21 / 0.23%, black @ 55%, left */ #why-join .se-body-md { font-size: 16px; line-height: 21px; letter-spacing: 0.0023em; color: rgba(0, 0, 0, 0.55); text-align: left; } /* Card titles (“To learn to evaluate…” etc.) — Figma: Adventure V1 Medium 24 / 100% / -1.5%, #000, left */ #why-join .se-heading-md { font-size: 24px; line-height: 1; letter-spacing: -0.015em; color: #000; text-align: left; } } /* Why practitioners join — 111px gap between image and copy (md+) */ @media (min-width: 768px) { #why-join .row.align-items-center { --bs-gutter-x: 111px; } } /* Why practitioners join — headings: Adventure V1 Medium 32 / 100% / -1.5%, #000 */ #why-join .se-heading-md { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2rem); /* 32px */ font-weight: 500; line-height: 1; letter-spacing: -0.015em; color: #000; text-align: left; } /* Why practitioners join — body: SF Pro Display Medium 21 / 145% / 0.23% */ #why-join .se-body-md { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: clamp(1rem, 2vw, 1.3125rem); /* 21px */ font-weight: 500; line-height: 1.45; letter-spacing: 0.0023em; text-align: left; } /* Why practitioners join — fixed frame 307×173 (Figma); col-md-auto sizes column to image */ #why-join .se-why-img { display: block; width: 307px; height: 173px; max-width: min(100%, 307px); object-fit: cover; object-position: center; border-radius: 12px; flex-shrink: 0; transition: transform 0.5s ease; transform-origin: center center; } #why-join .se-why-img:hover { transform: scale(1.05); position: relative; z-index: 1; } #why-join .row.align-items-center .col-md-auto { overflow: visible; } @media (prefers-reduced-motion: reduce) { #why-join .se-why-img { transition: none; } #why-join .se-why-img:hover { transform: none; } } /* Stacked layout: full width, keep same aspect as desktop frame */ @media (max-width: 767.98px) { #why-join .se-why-img { width: 100%; height: auto; aspect-ratio: 307 / 173; max-width: none; margin-inline: 0; } } /* ── Contact (Have a question) — white bg; no top padding; 2× default section padding-bottom ── */ #contact.se-contact-section { padding-top: 0; padding-bottom: calc(2 * clamp(4rem, 7vw, 7rem)); } /* ── Contact (Have a question) — mobile: image fits container; centered copy inset; desktop unchanged ── */ @media (max-width: 991.98px) { #contact .se-contact-photo-bleed { width: 100%; max-width: 100%; border-radius: 12px; overflow: hidden; } #contact .se-contact-photo { width: 100%; border-radius: 0 !important; } #contact .se-contact-copy { padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 1rem); padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 1rem); } #contact .se-contact-cta { background: #fff; } /* Default #contact rule wins over .se-btn-outline-dark:hover background — without this, tap/hover keeps white bg + white text */ #contact .se-contact-cta:hover, #contact .se-contact-cta:active, #contact .se-contact-cta:focus-visible { background: var(--color-dark); color: #fff; border-color: var(--color-dark); } } /* Contact — mobile Figma */ @media (max-width: 767.98px) { #contact.se-contact-section { padding-bottom: 80px; } /* “Have a question…” — Adventure V1 Medium 32 / 130% / -1.2px, #1d1d1f, centered */ #contact .se-contact-copy .se-heading-lg { font-family: var(--font-heading); font-size: 32px; font-weight: 500; line-height: 1.3; letter-spacing: -1.2px; color: #1d1d1f; text-align: center; } /* Lead — SF Pro Display Medium 16 / 145% / -0.5%, black @ 55%, centered */ #contact .se-contact-copy .se-body-lg { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 16px; font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; text-align: center; color: rgba(0, 0, 0, 0.55); } #contact .se-contact-cta { padding: 12px 16px; } } /* ── Membership ── */ .se-membership-section { position: relative; } /* Toro2 — left edge, same treatment as #learn; sits beside iPhone column */ #membership.se-section::before { content: ""; position: absolute; z-index: 0; left: 0; top: -300px; bottom: 0; width: min(96vw, 1120px); min-width: 100%; background-image: url('toro5.png'); background-repeat: no-repeat; background-position: 0% 0%; background-size: min(50%, 1140px); pointer-events: none; height: 240%; transform-origin: 78% 82%; } #membership.se-section > .se-membership-inner { position: relative; z-index: 1; max-width: 1280px; margin-left: auto; margin-right: auto; width: 100%; padding-left: 0; padding-right: 0; box-sizing: border-box; } @media (max-width: 991.98px) { #membership.se-section::before { width: 100%; min-width: 100%; background-size: auto min(120%, 1280px); opacity: 0.78; } } /* Top row: no Bootstrap cols — copy 220px inset, 380px wide, ~300px gap; phone max 415px, aligned to grid right (lg+) */ .se-membership-top-row { display: flex; flex-direction: column; gap: 2rem; align-items: stretch; width: 100%; max-width: 100%; box-sizing: border-box; } @media (min-width: 992px) { /* Two columns: copy | flexible track; phone at end; 220px left inset; vertically centered pair */ .se-membership-top-row { display: grid; grid-template-columns: minmax(0, min(380px, 100%)) minmax(0, 1fr); column-gap: clamp(1.5rem, 5vw, 300px); padding-left: 220px; box-sizing: border-box; align-items: center; } .se-membership-copy { grid-column: 1; min-width: 0; } #membership .se-membership-phone-col { grid-column: 2; justify-self: end; width: 100%; max-width: 415px; min-width: 0; justify-content: flex-end; } } @media (min-width: 1400px) { .se-membership-top-row { column-gap: 300px; } } /* Heading — Adventure V1 Medium 48 / 55 / -1.2px, black, left */ .se-membership-heading { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 3rem); /* 48px */ font-weight: 500; line-height: clamp(2.125rem, 4.6vw, 3.4375rem); /* 55px at desktop */ letter-spacing: -1.2px; color: #000; text-align: left; margin-top: 0; margin-bottom: 1rem; } /* “Look inside our…” — mobile Figma: Adventure V1 Medium 32 / 32 / -1.2px, #000, centered */ /* “Learn, practice…” lead — mobile Figma: SF Pro Display Medium 16 / 145% / -0.24px, #86868B, centered */ /* Top row — mobile layout: full-width title + lead; stats stack (left) | phone (right) */ @media (max-width: 767.98px) { #membership.se-section > .se-membership-inner { padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; } #membership .se-membership-top-row { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-areas: "mem-head mem-head" "mem-lead mem-lead" "mem-stats mem-phone"; row-gap: 0; column-gap: 0.75rem; align-items: start; } #membership .se-membership-copy { display: contents; } #membership .se-membership-heading { grid-area: mem-head; font-size: 32px; line-height: 32px; letter-spacing: -1.2px; font-weight: 500; color: #000; text-align: center; } #membership .se-membership-copy .se-membership-lead { grid-area: mem-lead; font-size: 16px; line-height: 1.45; letter-spacing: -0.24px; font-weight: 500; color: #86868b; text-align: center; margin-bottom: 50px; } #membership .se-stats-row { grid-area: mem-stats; margin-top: 0; flex-direction: column; align-items: stretch; gap: 1rem; width: 100%; min-width: 0; } #membership .se-stat-block { flex: none; min-width: 0; padding-top: 0; border-top: none; } #membership .se-stat-block::before { content: ""; display: block; width: min(100%, 105px); max-width: 105px; height: 1px; background-color: #86868b; margin-bottom: 0.875rem; } /* “With over…” / “lessons available…” — SF Pro Display Medium 14px / 0.2px / #000 @ 55%, left */ #membership .se-stat-block .se-stat-label.se-stat-label--lead { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0.2px; color: rgba(0, 0, 0, 0.55); text-align: left; } /* 150+ / 35+ — mobile Figma: SF Pro Display Bold 32 / auto / 0, left */ #membership .se-stat-number { font-size: 32px; font-weight: 700; line-height: normal; letter-spacing: 0; text-align: left; } #membership .se-membership-phone-col { grid-area: mem-phone; justify-content: flex-end; align-self: start; min-width: 0; } #membership .se-membership-phone-figure { align-items: flex-end; width: 100%; } #membership .se-membership-phone-figure .se-iphone-mockup { width: 100%; max-width: 183px; margin-left: auto; display: block; height: auto; } } /* “Learn, practice…” — desktop: 21px / 1.45; mobile overrides in max-width block below */ .se-membership-lead { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 1.0625rem; /* 17px — overridden ≥768px */ font-weight: 500; line-height: 21px; letter-spacing: -0.24px; color: #86868b; text-align: left; max-width: 28rem; } #membership .se-membership-copy .se-membership-lead { max-width: 100%; } @media (min-width: 768px) { #membership .se-membership-copy .se-membership-lead { margin-bottom: 0; font-size: 21px; line-height: 1.45; } #membership .se-laptop-body { font-size: 21px; line-height: 1.45; } } #membership .se-stat-block .se-stat-label { margin-top: 0; margin-bottom: 0; } #membership .se-stat-block .se-stat-number { margin-top: 0.25rem; margin-bottom: 0.25rem; } #membership .se-laptop-body { margin-top: 0; margin-bottom: 27px; } #membership .se-membership-laptop-cta { text-align: center; } /* Mobile — match first Enroll (#learn): larger tap target + label (18px), same padding as #learn CTA */ @media (max-width: 767.98px) { #membership .se-membership-laptop-cta .se-btn-dark.se-btn-enroll { padding: 17px 30px; font-size: 18px; line-height: 1.45; letter-spacing: -0.005em; background-color: #000; color: #fff; } #membership .se-membership-laptop-cta .se-btn-dark.se-btn-enroll:hover { color: #fff; } } /* Phone column: centered on small screens; lg+ grid col 2, end-aligned so right edge matches grid */ .se-membership-phone-col { display: flex; justify-content: center; align-items: flex-start; } @media (min-width: 992px) { #membership .se-membership-top-row > .se-membership-phone-col { align-items: flex-start; } } .se-membership-phone-figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; } @media (min-width: 992px) { .se-membership-phone-figure { align-items: flex-end; } } .se-membership-phone-caption { margin-top: 0.75rem; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; color: var(--color-muted); text-align: center; line-height: 1.4; } /* Stats row */ .se-stats-row { display: flex; align-items: flex-start; gap: 2.5rem; } #membership .se-stats-row { margin-top: 100px; } @media (max-width: 767.98px) { #membership .se-stats-row { margin-top: 60px; padding-left: 10px; } } @media (min-width: 768px) { #membership .se-stat-block { flex: 1; min-width: 0; border-top: 1px solid rgba(0, 0, 0, 0.12); padding-top: 1rem; } } /* Stat labels — SF Pro Display Medium 21 / 41 / 0.2px; black @ 55% */ #membership .se-stat-label--lead { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 1.3125rem; /* 21px */ font-weight: 500; line-height: 41px; letter-spacing: 0.2px; text-align: left; color: rgba(0, 0, 0, 0.55); } .se-stat-label { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; color: var(--color-muted); } /* 150+ / 35+ — SF Pro Display Bold 48 / 41 / 0, left */ .se-stat-number { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 3rem; /* 48px */ font-weight: 700; line-height: 41px; letter-spacing: 0; text-align: left; color: #373737; } /* Membership — phone: design frame 415 × 853 (Figma); scales down on narrow viewports */ .se-iphone-mockup { display: block; width: min(100%, 415px); height: auto; aspect-ratio: 415 / 853; object-fit: contain; vertical-align: middle; } @media (min-width: 992px) { .se-iphone-mockup { width: 415px; height: 853px; max-width: 415px; aspect-ratio: unset; object-fit: contain; } } /* Membership — laptop: 873px max width; intrinsic aspect matches video-john.png (1759×1058) to avoid letterboxing */ .se-laptop-mockup { display: block; box-sizing: border-box; width: 100%; max-width: 873px; height: auto; aspect-ratio: 1759 / 1058; margin-left: auto; margin-right: auto; object-fit: contain; border-radius: 0.5rem; } @media (min-width: 992px) { #membership .se-laptop-mockup { width: 100%; height: auto; aspect-ratio: 1759 / 1058; max-width: 873px; object-fit: contain; } } /* Clip 1px inset on PNG edges (export artifacts); rounded clip on wrapper avoids duplicate radii */ #membership .se-membership-laptop-visual { overflow: hidden; border-radius: 0.5rem; line-height: 0; } /* Laptop row: no Bootstrap cols */ .se-membership-laptop-row { display: flex; flex-direction: column; gap: 42px; margin-top: 64px; align-items: stretch; } @media (min-width: 992px) { .se-membership-laptop-row { flex-direction: row; gap: 3rem; margin-top: 3rem; align-items: center; } /* Reserve 873px for mockup so flex doesn’t shrink it below design width */ .se-membership-laptop-visual { flex: 0 1 873px; width: 873px; max-width: min(873px, 100%); min-width: 0; } .se-membership-laptop-text { flex: 1 1 0; min-width: 0; max-width: 28rem; } } /* Flush left; trim 1px from PNG left/right (export edge artifacts) */ #membership .se-membership-laptop-col .se-laptop-mockup { margin-left: 0; margin-right: auto; border-radius: 0; clip-path: inset(0 1px); } /* ── Laptop row — “The training features…” desktop: 21px / 1.45 (≥768px); mobile below ── */ .se-laptop-body { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 1.0625rem; /* 17px — overridden ≥768px with #membership .se-laptop-body */ font-weight: 500; line-height: 21px; letter-spacing: -0.24px; color: var(--color-gray); /* #86868B */ text-align: left; } /* Mobile — same block: SF Pro Display Medium 16 / 145% / -0.24px, black @ 55%, centered */ @media (max-width: 767.98px) { #membership .se-laptop-body { font-size: 16px; line-height: 1.45; letter-spacing: -0.24px; font-weight: 500; color: rgba(0, 0, 0, 0.55); text-align: center; } } /* Get a feel for the training — section top spacing */ #get-feel.se-section { padding-top: 24px; } #get-feel .se-get-feel-heading { margin-bottom: 20px; } /* ── Get a Feel — center overlaps sides; edges peek out (shorter wings) ── */ .se-feel-carousel { position: relative; width: 100%; max-width: min(1280px, 100%); margin-left: auto; margin-right: auto; height: clamp(300px, 42vw, 560px); } .se-feel-side { position: absolute; top: 50%; transform: translateY(-50%); width: 52%; height: 82%; border-radius: 20px; overflow: hidden; z-index: 1; pointer-events: none; } .se-feel-side--left { left: 0; } .se-feel-side--right { right: 0; } .se-feel-side img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .se-feel-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(86%, 1040px); height: 100%; z-index: 2; border-radius: 20px; overflow: hidden; border: 16px solid #fff; box-sizing: border-box; } .se-feel-center-img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 20px; } .se-feel-center-poster { position: relative; width: 100%; height: 100%; cursor: pointer; } .se-feel-center-play-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .se-feel-play-btn { pointer-events: auto; } .se-feel-center-video { position: absolute; inset: 0; z-index: 3; background: #000; border-radius: 20px; overflow: hidden; } .se-feel-center.se-feel-center--playing .se-feel-center-poster { display: none; } .se-feel-iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 20px; } @media (max-width: 767px) { .se-feel-carousel { height: clamp(240px, 62vw, 420px); max-width: none; } .se-feel-center { position: relative; left: auto; top: auto; transform: none; width: 100%; height: 100%; } } /* ── Free Lesson ── */ /* Heading — Adventure V1 Medium 48 / 120% / -1.2px, black; desktop left */ #free-lesson .se-free-lesson-heading { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 3rem); /* 48px */ font-weight: 500; line-height: 1.2; letter-spacing: -1.2px; color: #000; text-align: left; } /* “Watch a Free Lesson” — mobile Figma: Adventure V1 Medium 32 / 120% / -1.2px, #000, centered */ /* Body (below poster tile when stacked) — mobile Figma: SF Pro Display Medium 16 / 145% / -0.5%, black @ 55%, centered */ @media (max-width: 767.98px) { #free-lesson .se-free-lesson-heading { font-size: 32px; line-height: 1.2; letter-spacing: -1.2px; font-weight: 500; color: #000; text-align: center; } #free-lesson .se-free-lesson-body { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 16px; line-height: 1.45; letter-spacing: -0.005em; font-weight: 500; color: rgba(0, 0, 0, 0.55); text-align: center; } } /* Body — SF Pro Display Medium 20 / 145% / -0.5% (desktop); mobile 16px + centered in max-width block above */ #free-lesson .se-free-lesson-body { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; color: var(--color-gray); margin-bottom: 0; } @media (min-width: 768px) { #free-lesson .se-free-lesson-body { font-size: 1.25rem; /* 20px */ text-align: left; } } @media (max-width: 991.98px) { #free-lesson .se-free-lesson-heading { text-align: center; } } /* Free Lesson — poster → Bunny iframe (same video as See the Work) */ #free-lesson .se-free-lesson-player { position: relative; width: 100%; aspect-ratio: 1605 / 979; border-radius: var(--radius-md); overflow: hidden; } #free-lesson .se-free-lesson-poster { position: relative; width: 100%; height: 100%; cursor: pointer; } #free-lesson .se-free-lesson-poster-img { width: 100%; height: 100%; display: block; object-fit: cover; } #free-lesson .se-free-lesson-play-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } #free-lesson .se-free-lesson-play-btn { pointer-events: auto; } #free-lesson .se-free-lesson-video { position: absolute; inset: 0; z-index: 2; background: #000; } #free-lesson .se-free-lesson-player.se-free-lesson--playing .se-free-lesson-poster { display: none; } #free-lesson .se-free-lesson-iframe { display: block; width: 100%; height: 100%; border: 0; } /* Free lesson — Klaviyo email gate (native ) */ .se-free-lesson-gate { max-width: 420px; width: calc(100% - 2rem); padding: 1.75rem 1.5rem 1.5rem; border: none; border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); box-sizing: border-box; } .se-free-lesson-gate::backdrop { background: rgba(0, 0, 0, 0.45); } .se-free-lesson-gate-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 2rem; height: 2rem; padding: 0; border: none; background: transparent; font-size: 1.5rem; line-height: 1; color: #666; cursor: pointer; border-radius: 4px; } .se-free-lesson-gate-close:hover { color: #000; background: rgba(0, 0, 0, 0.06); } .se-free-lesson-gate-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 500; margin: 0 2rem 0.5rem 0; letter-spacing: -0.02em; color: #000; } .se-free-lesson-gate-lead { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.45; color: var(--color-gray); margin: 0 0 1rem; } .se-free-lesson-gate-label { display: block; font-size: 0.8125rem; font-weight: 500; margin-bottom: 0.35rem; color: #333; } .se-free-lesson-gate-input { width: 100%; padding: 0.65rem 0.75rem; font-size: 1rem; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 8px; box-sizing: border-box; margin-bottom: 0.75rem; } .se-free-lesson-gate-input:focus { outline: 2px solid rgba(0, 0, 0, 0.15); outline-offset: 1px; } .se-free-lesson-gate-error { font-size: 0.875rem; color: #b00020; margin: 0 0 0.75rem; } .se-free-lesson-gate-submit { width: 100%; text-align: center; } /* Horizontal inset below lg only (replaces removed px-3); desktop stays edge-aligned inside max-width */ @media (max-width: 991.98px) { #see-work .se-inner-max--see-work { padding-left: var(--se-page-gutter); padding-right: var(--se-page-gutter); box-sizing: border-box; } } /* Desktop: top spacing + 64px gap between columns (32px + 32px); overrides g-lg-5 horizontal gutter */ @media (min-width: 992px) { #see-work.se-section { padding-top: 150px; padding-bottom: 50px; } #see-work .se-inner-max--see-work > .row { --bs-gutter-x: 4rem; } } /* See the Work in Action — Figma: Adventure V1 Medium 32 / 120% / -1.2px, #000, centered */ #see-work .se-see-work-heading { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 500; line-height: 1.2; letter-spacing: -1.2px; color: #000; text-align: left; } @media (max-width: 767.98px) { #see-work .se-see-work-heading { font-size: 32px; text-align: center; } } /* Body — desktop: 20px gray left; mobile Figma: 16 / 55% / centered */ #see-work .se-see-work-body { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 1.25rem; font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; color: var(--color-gray); text-align: left; } @media (max-width: 767.98px) { #see-work .se-see-work-body { font-size: 16px; color: rgba(0, 0, 0, 0.55); text-align: center; } } /* See the Work — poster → Bunny iframe (same pattern as #get-feel) */ #see-work .se-see-work-player { position: relative; width: 100%; aspect-ratio: 1600 / 875; border-radius: var(--radius-md); overflow: hidden; background: #000; } #see-work .se-see-work-poster { position: relative; width: 100%; height: 100%; cursor: pointer; } #see-work .se-see-work-poster-img { width: 100%; height: 100%; display: block; object-fit: cover; } #see-work .se-see-work-play-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } #see-work .se-see-work-play-btn { pointer-events: auto; } #see-work .se-see-work-video { position: absolute; inset: 0; z-index: 2; background: #000; } #see-work .se-see-work-player.se-see-work--playing .se-see-work-poster { display: none; } #see-work .se-see-work-iframe { display: block; width: 100%; height: 100%; border: 0; } .se-blurred-video { filter: blur(4px); transform: scale(1.02); } /* Students intro — heading: Adventure V1 Medium 48 / 120% / -2%, centered */ #students .se-students-heading { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 3rem); /* 48px */ font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: #000; text-align: center; } /* “What students are saying” — mobile Figma: Adventure V1 Medium 32 / 120% / -2% / centered / #000 */ /* “For many students…” — mobile Figma: SF Pro Display Medium 16 / 145% / -0.5%, centered */ @media (max-width: 767.98px) { #students .se-students-heading { font-family: var(--font-heading); font-size: 32px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: #000; text-align: center; } #students .se-students-lead { font-size: 16px; line-height: 1.45; letter-spacing: -0.005em; font-weight: 500; text-align: center; color: rgba(0, 0, 0, 0.55); } } /* “For many students…” — desktop 20px; mobile 16px in max-width block above */ #students .se-students-lead { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; color: rgba(0, 0, 0, 0.55); text-align: center; max-width: 42rem; margin-left: auto; margin-right: auto; margin-bottom: 92px; } @media (min-width: 768px) { #students .se-students-lead { font-size: 1.25rem; /* 20px */ } } @media (max-width: 767.98px) { #students .se-students-lead { margin-bottom: 52px; } } /* Testimonials — toro4 under grid; no overflow clip (was cutting off last card / avatars). Body handles overflow-x. */ #students.se-section { position: relative; padding-bottom: 120px; } #students.se-section::after { content: ""; position: absolute; z-index: 0; left: 0%; bottom: -38vw; width: 130%; min-width: 100%; height:200%; background-image: url('toro4.png'); background-repeat: no-repeat; background-position: center bottom; background-size: 100%; pointer-events: none; } #students.se-section > .se-inner-max { position: relative; z-index: 2; display: flow-root; } @media (max-width: 767.98px) { #students.se-section { padding-bottom: 80px; } #students.se-section::after { width: 200%; left: -25%; min-width: 100%; height: min(48vh, 520px); opacity: 1; top: 70px; bottom: auto; } } /* ── Testimonials – masonry (CSS columns on small/medium; three flex stacks on lg+) ── */ .se-testimonials-masonry { column-count: 1; column-gap: 1.25rem; } /* Wrappers are invisible below lg so multicol still sees six .se-testimonial-card children in order */ .se-testimonials-col { display: contents; } @media (min-width: 768px) { .se-testimonials-masonry { column-count: 2; } } @media (min-width: 992px) { /* * Three independent columns (no shared row heights). A 3×2 grid stretched row 1 to the * tallest card and left huge gaps under shorter cards in columns 1 and 3. */ .se-testimonials-masonry { column-count: unset; column-gap: unset; display: flex; flex-direction: row; align-items: flex-start; gap: 1.25rem; } .se-testimonials-col { display: flex; flex-direction: column; gap: 1.25rem; flex: 1 1 0; min-width: 0; } .se-testimonials-masonry .se-testimonial-card { margin-bottom: 0; } .se-testimonials-col--offset .se-testimonial-card { position: relative; top: -44px; } } .se-testimonial-card { break-inside: avoid; background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: var(--radius-md); padding: 1.5rem; box-shadow: var(--shadow-card); margin-bottom: 1.25rem; display: block; /* override flex for masonry */ } @media (max-width: 767.98px) { .se-testimonial-card { padding: 30px; } } /* Quote — SF Pro Display Medium 15 / 145% / -0.5%, black, left */ .se-testimonial-text { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 15px; font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; color: #000; text-align: left; margin-bottom: 1rem; } .se-testimonial-author { display: flex; align-items: center; gap: 0.75rem; padding-top: 1rem; } .se-testimonial-avatar { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } @media (max-width: 767.98px) { .se-testimonial-avatar { width: 83px; height: 83px; } } .se-testimonial-name { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--color-dark); } .se-testimonial-role { font-size: 0.8rem; font-weight: 400; color: var(--color-muted); margin-top: 0.1rem; } /* ── Dark CTA – "Learn the work beneath the work" (lossy animated WebP; img uses loading="lazy") ── */ .se-cta-dark { min-height: 672px; height: 672px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; overflow: hidden; } @media (max-width: 575.98px) { .se-cta-dark { height: auto; min-height: 672px; } } .se-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; } /* Narrow text container for CTA (½ prior padding: was 5rem 2rem) */ .se-cta-inner { position: relative; z-index: 1; text-align: center; width: 100%; max-width: 750px; margin-left: auto; margin-right: auto; padding: 2.5rem 1rem; } @media (max-width: 991.98px) { .se-cta-inner { padding: 2.5rem var(--se-page-gutter); } } /* Adventure V1 Medium 64 / 68 / -1.2px, centered */ .se-cta-heading { font-family: var(--font-heading); font-size: clamp(2.25rem, 5vw, 4rem); /* 64px */ font-weight: 500; line-height: clamp(2.5rem, 5.3vw, 4.25rem); /* 68px */ letter-spacing: -1.2px; text-align: center; color: #fff; margin-bottom: 1.25rem; } /* Body under CTA heading — SF Pro Display Medium 21 / 30 / 0.23px, centered, white */ .se-cta-body { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: clamp(1rem, 2vw, 1.3125rem); /* 21px */ font-weight: 500; line-height: 1.4285714; /* 30 / 21 */ letter-spacing: 0.23px; text-align: center; color: #fff; margin-bottom: 2.5rem; } /* Mobile — same shell as other Enroll CTAs (#learn / membership); keep outline-white fill */ @media (max-width: 767.98px) { #cta-dark .se-btn-outline-white.se-btn-enroll { padding: 17px 30px; font-size: 18px; line-height: 1.45; letter-spacing: -0.005em; } } /* ── FAQ ── */ #faq.se-section { position: relative; background-color: transparent; } /* Toro1 again — left edge, match #learn */ #faq.se-section::before { content: ""; position: absolute; z-index: 0; left: 0; top: -300px; bottom: 0; width: min(96vw, 1120px); min-width: 100%; background-image: url('toro1-on-white.png'); background-repeat: no-repeat; background-position: 0% 0%; background-size: min(50%, 740px); pointer-events: none; height: 240%; } #faq.se-section > .container-xxl { position: relative; z-index: 1; background-color: transparent; } @media (max-width: 991.98px) { #faq.se-section::before { width: 100%; min-width: 100%; background-size: auto min(120%, 1280px); opacity: 0.78; } } /* FAQ sidebar heading — Figma: Adventure V1 Medium 32 / auto / -1.2px, #000, centered */ #faq .se-faq-title { position: sticky; top: 90px; font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 500; line-height: 1.2; letter-spacing: -1.2px; color: #000; text-align: left; } @media (max-width: 767.98px) { #faq .se-faq-title { font-size: 32px; line-height: normal; text-align: center; } } /* FAQ row: default Bootstrap stretch keeps .col-lg-4 as tall as the accordion so the sticky title can remain in view while scrolling; do not add top margin on the heading — align with .se-faq-panel top. */ /* FAQ accordion wrapper — desktop rounded; mobile Figma: radius 0 */ #faq .se-faq-panel { box-sizing: border-box; background-color: #ffffff; border: 1px solid #ebf3e5; border-radius: var(--radius-md); padding: 1.25rem 1.5rem; } @media (max-width: 767.98px) { #faq .se-faq-panel { border-radius: 0; } } /* Accordion — no inner divider lines between questions */ .se-accordion { border: none; background: transparent; } .se-accordion-item { border: none !important; background: transparent; } .se-accordion .accordion-header { border-bottom: none !important; margin-bottom: 0; } /* FAQ question lines — Figma: Adventure V1 Medium 20 / auto / -2%, #1B263B, left */ #faq .se-accordion-btn { font-family: var(--font-heading); font-size: 1.25rem; /* 20px */ font-weight: 500; line-height: normal; letter-spacing: -0.02em; color: var(--color-faq-text) !important; text-align: left; justify-content: flex-start; background: transparent !important; padding: 1.1rem 0; box-shadow: none !important; border: none !important; } #faq .se-accordion-btn:not(.collapsed) { color: var(--color-faq-text) !important; background: transparent !important; } /* Custom + / − (no Bootstrap chevron; minus is a bar — avoids diagonal glyph artifacts) */ #faq .se-accordion-btn::after { flex-shrink: 0; margin-left: auto; background-image: none !important; transform: none !important; transition: none !important; } #faq .se-accordion-btn.collapsed::after { content: '+'; font-size: 1.25rem; font-weight: 500; line-height: 1; width: auto; height: auto; color: var(--color-faq-text); } #faq .se-accordion-btn:not(.collapsed)::after { content: ''; display: block; width: 14px; height: 2px; border-radius: 1px; background-color: var(--color-faq-text); align-self: center; } /* Mobile: keep a clear gap between title text and + / − */ @media (max-width: 991.98px) { #faq .se-accordion-btn { position: relative; padding-right: 2.25rem; } #faq .se-accordion-btn::after { position: absolute; right: 0; top: 50%; margin-left: 0 !important; align-self: auto; } #faq .se-accordion-btn.collapsed::after, #faq .se-accordion-btn:not(.collapsed)::after { transform: translateY(-50%) !important; } } #faq .se-accordion-body { font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.65; letter-spacing: -0.01em; color: var(--color-faq-text); padding: 0 0 1.1rem; text-align: left; } /* ── Contact ── */ /* ── Vision ── */ /* VISION.png at intrinsic aspect; scales with viewport width, not forced full-viewport height */ .se-vision { position: relative; display: block; } @media (max-width: 767.98px) { #vision.se-vision { padding-bottom: 16px; } } .se-vision-frame { position: relative; display: block; width: 100%; max-width: 100%; /* Stack text above the photo (avoid Bootstrap .position-relative !important on inner) */ isolation: isolate; } #vision .se-vision-frame picture { display: block; width: 100%; } .se-vision-img { display: block; width: 100%; max-width: 100%; height: auto; } /* Mobile: VISION (1).png — 778×762 @2x → 389×381 logical; lock band height to 381px (Figma) */ @media (max-width: 767.98px) { #vision .se-vision-img { height: 381px; object-fit: cover; object-position: center; } } .se-vision-inner { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; pointer-events: auto; } /* “Learn more about the” — readable above headline (same scale as mobile Figma; no fill behind text) */ .se-vision-eyebrow { font-family: var(--font-heading); font-size: 1.25rem; /* 20px */ font-weight: 600; line-height: 1.45; /* ~29px on 20px */ letter-spacing: 0.23px; color: #ffffff; background: transparent; box-shadow: none; } @media (max-width: 767.98px) { #vision .se-vision-eyebrow { text-align: center; } } /* * #vision wraps content in .text-white (Bootstrap !important). Outline CTAs use a dark label on frosted * white elsewhere — override inheritance so “Our Vision” matches other .se-btn-outline-white buttons. */ #vision .se-btn-outline-white { color: var(--color-dark) !important; } #vision .se-btn-outline-white:hover { color: var(--color-dark) !important; } #vision .se-btn-has-ripple.se-btn-outline-white:hover { color: var(--color-white) !important; } #vision .se-btn-has-ripple.se-btn-outline-white:hover .se-btn-label { color: var(--color-white) !important; } /* ── Pricing — torus deco bottom-right (toro7); clip so ::after doesn’t extend scroll past footer ── */ #pricing.se-section { overflow: hidden; } #pricing.se-section::after { content: ""; position: absolute; z-index: 0; right: 0; bottom: -1000px; width: 1000px; aspect-ratio: 1304 / 2548; background-image: url('toro7.png'); background-repeat: no-repeat; background-position: right bottom; background-size: contain; pointer-events: none; } #pricing.se-section > .se-inner-max { position: relative; z-index: 1; } @media (max-width: 767.98px) { #pricing.se-section { padding-top: 0; } #pricing.se-section::after { width: min(1000px, 100vw); bottom: -1000px; opacity: 0.9; } } /* ── Pricing — inside .se-inner-max (fill #F5F7F1, 2px border, drop shadow) ── */ .se-pricing-card { background-color: var(--color-off-white); /* #F5F7F1 */ border-radius: var(--radius-md); /* 16px */ border: 2px solid rgba(0, 0, 0, 1); /* Figma: two drop shadows — 10% + 15% black */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 32px rgba(0, 0, 0, 0.15); padding: 2.5rem 2rem; max-width: none; width: 100%; } @media (min-width: 768px) { .se-pricing-card { padding: 3.5rem 4.5rem; } } /* Pricing card heading — Figma: Adventure V1 Medium 24 / 140% / -0.5%, #000, centered */ .se-pricing-title { font-family: var(--font-heading); font-size: 1.5rem; /* 24px */ font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; color: #000000; text-align: center; } .se-pricing-amount { font-family: var(--font-body); font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 700; color: var(--color-dark); letter-spacing: -0.04em; line-height: 1; } /* Mobile — same Enroll shell as #learn / membership / #cta-dark */ @media (max-width: 767.98px) { #pricing .se-pricing-card .se-btn-dark.se-btn-enroll { padding: 17px 30px; font-size: 18px; line-height: 1.45; letter-spacing: -0.005em; } } /* Feature list inset — desktop */ @media (min-width: 992px) { #pricing .se-feature-list { margin-left: 80px; } } /* Pricing bullet lines — Figma: SF Pro Display Medium 18 / 140% / -0.5%, #000 */ #pricing .se-feature-list li { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 1.125rem; /* 18px */ font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; color: #000000; text-align: left; } #pricing .se-feature-list li span { color: inherit; } /* ── Newsletter ── */ .se-newsletter { position: relative; z-index: 2; background-color: var(--color-newsletter); padding: clamp(3.5rem, 6vw, 5.5rem) 0; } /* Stay connected — Adventure V1 Medium 70 / 110% / -2% */ .se-heading-newsletter { font-family: var(--font-heading); font-size: clamp(2.25rem, 6vw, 4.375rem); /* 70px */ font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-white); } /* “Stay up to date…” — SF Pro Display Medium 16 / 140% / -0.5% */ .se-newsletter-lead { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 1rem; /* 16px */ font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; color: rgba(255, 255, 255, 0.55); } /* Space above email + subscribe row (pre-footer newsletter) */ #newsletter .col-lg-7 .se-newsletter-form .d-flex.gap-3 { margin-top: 16px; } #newsletter .form-success { margin-bottom: 1rem; } #newsletter .form-success h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 500; color: var(--color-white); margin: 0 0 0.5rem; } #newsletter .form-success p { font-family: var(--font-body); font-size: 1rem; color: rgba(255, 255, 255, 0.85); margin: 0; } #newsletter .form-error { margin-bottom: 1rem; } #newsletter .form-error p { font-family: var(--font-body); font-size: 0.9375rem; color: #ffb4b4; margin: 0; } .se-email-input { box-sizing: border-box; background-color: #424242; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 10px; color: #e8e8e8; font-family: var(--font-body); font-size: 1rem; font-weight: 400; padding: 0.75rem 1rem; outline: none; transition: border-color 0.2s; } .se-email-input::placeholder { color: rgba(255, 255, 255, 0.45); } .se-email-input:focus { border-color: rgba(0, 0, 0, 0.35); } /* “By submitting…” — Adventure Regular 12 / 18.2px / 0%, left under email row, white @ 55% */ .se-disclaimer { font-family: var(--font-heading); font-size: 12px; font-weight: 400; line-height: 18.2px; letter-spacing: 0; text-align: left; color: rgba(255, 255, 255, 0.55); } /* Newsletter — mobile: top band padding, centered; “Stay connected” Adventure 36 / 110% / -2% / #fff */ @media (max-width: 767.98px) { .se-newsletter { padding: 87px 34px 3.5rem; } #newsletter .container-xxl.px-3 { padding-left: 0 !important; padding-right: 0 !important; } #newsletter .row { justify-content: center; text-align: center; } #newsletter .col-lg-5, #newsletter .col-lg-7 { text-align: center; } #newsletter .d-flex.gap-3.flex-column.flex-sm-row { flex-direction: column !important; align-items: center; gap: 20px !important; } #newsletter .se-email-input { width: 237px; max-width: 237px; padding: 18px 24px; } #newsletter .se-btn-white { width: auto; max-width: none; padding: 16px 30px; align-self: center; } /* Same width as .se-email-input so left edge lines up with centered field */ #newsletter .se-disclaimer { width: 237px; max-width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; } .se-heading-newsletter { font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; color: #fff; text-align: center; } .se-newsletter-lead { text-align: center; } } /* ── Footer — bg #202020; primary links left, Socials right ── */ .se-footer { position: relative; z-index: 3; background-color: #202020; color: var(--color-white); padding: clamp(3.5rem, 8vw, 5rem) 0 clamp(2rem, 4vw, 2.5rem); } @media (max-width: 767.98px) { /* Inset: ~10% viewport left, 50px right; top/bottom unchanged */ .se-footer { padding-top: 80px; padding-right: 50px; padding-bottom: clamp(2rem, 4vw, 2.5rem); padding-left: 10vw; } .se-footer .container-xxl.px-3 { padding-left: 0 !important; padding-right: 0 !important; } } .se-footer-links { list-style: none; padding: 0; margin: 0; } .se-footer-links li { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); } .se-footer-links a { font-family: var(--font-body); font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 600; color: #fff; text-decoration: none; line-height: 1.15; transition: opacity 0.2s; } .se-footer-links a:hover { color: #fff; opacity: 0.85; } @media (max-width: 767.98px) { /* Sign In + primary links — 36px @ 390px wide; scales down with viewport (e.g. ~32px @ 350px) */ .se-footer-links a { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: clamp(28px, 9.2307692308vw, 36px); font-weight: 500; line-height: calc(29 / 36 * 1em); letter-spacing: 0; color: #e4e4e4; } .se-footer-links a:hover { color: #e4e4e4; opacity: 0.85; } } @media (max-width: 389.98px) { /* “Sign In” — slightly smaller than sibling links under ~390px wide */ .se-footer-links li:first-child a { font-size: clamp(24px, 8.4923076923vw, 33px); line-height: calc(29 / 33 * 1em); } } .se-footer-socials-label { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; color: #727272; text-transform: none; letter-spacing: 0; } @media (max-width: 767.98px) { /* “Socials” — SF Pro Display Medium 16 / 29 / 0, #727272, left */ .se-footer-socials-label { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 16px; font-weight: 500; line-height: 29px; letter-spacing: 0; color: #727272; text-align: left; } } .se-footer-social-links { list-style: none; padding: 0; margin: 0; } .se-footer-social-links a { font-family: var(--font-body); font-size: 1.125rem; font-weight: 400; color: #fff; text-decoration: none; transition: opacity 0.2s; } .se-footer-social-links a:hover { color: #fff; opacity: 0.85; } @media (max-width: 767.98px) { /* Instagram / YouTube — SF Pro Display Light 20 / 29 / 0, #fff, left */ .se-footer-social-links a { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, var(--font-body), sans-serif; font-size: 20px; font-weight: 300; line-height: 29px; letter-spacing: 0; color: #fff; text-align: left; } .se-footer-social-links a:hover { color: #fff; } /* Row: 180px large links | gutter | Instagram/YouTube (flex); horizontal inset via .se-footer padding */ .se-footer-main-row { --bs-gutter-x: 1rem; } .se-footer-main-row > .col-6.col-lg-5 { flex: 0 0 180px; max-width: 180px; width: 180px; } .se-footer-main-row > .col-6.col-lg-4 { flex: 1 1 0; max-width: none; width: auto; min-width: 0; } .se-footer-links li { margin-bottom: 20px; } .se-footer-links li:last-child { margin-bottom: 0; } .se-footer-socials-label { margin-bottom: 0 !important; } } .se-arrow { margin-left: 0.25rem; } @media (max-width: 389.98px) { .se-footer-social-links .se-arrow { display: none; } } .se-footer-copyright { padding-top: clamp(2.5rem, 6vw, 4rem); margin-top: 0; } .se-footer-copyright p { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; color: rgba(255, 255, 255, 0.85); } .se-footer-legal-link { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; color: rgba(255,255,255,0.35); text-decoration: none; transition: color 0.2s; } .se-footer-legal-link:hover { color: rgba(255,255,255,0.7); } /* ════════════════════════════════════════ VISION PAGE ════════════════════════════════════════ */ /* Content container — 1032px wide (matches Figma: 240px margin each side of 1512px) */ .vp-container { max-width: 1032px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .vp-section { padding-top: clamp(4rem, 7vw, 8rem); padding-bottom: clamp(4rem, 7vw, 8rem); } /* First block under hero image — default .vp-section top padding was a huge white band */ .vp-hero + .vp-section { padding-top: 1.25rem; } @media (min-width: 768px) { .vp-hero + .vp-section { padding-top: clamp(2rem, 4vw, 5rem); } } .vp-section-sm { padding-top: clamp(3rem, 5vw, 5.5rem); padding-bottom: clamp(3rem, 5vw, 5.5rem); } /* ── Hero — fills box (LCP / fetchpriority); no duplicate CSS background ── */ .vp-hero { position: relative; overflow: hidden; width: 100%; aspect-ratio: 2559 / 1369; background-color: #1a1a1a; } .vp-hero-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; } .vp-hero-title { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; margin: 0; color: #fff; font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; text-align: center; padding: 0 1.5rem; } /* ── Section headings ── */ .vp-heading { font-family: var(--font-heading); font-size: clamp(1.75rem, 3.5vw, 3rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: #000; margin-bottom: 1.5rem; } /* ── Body text (24px desktop → 16px mobile per Figma) ── */ .vp-body { font-family: var(--font-body); font-size: clamp(1rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.45; color: rgba(0,0,0,0.55); } .vp-body p { margin-bottom: 1.25rem; } .vp-body p:last-child { margin-bottom: 0; } .vp-movement-term { font-weight: 700; color: rgba(0,0,0,0.75); } /* ── Pull quotes (Adventure V1, 48px desktop) ── */ .vp-pull-quote { font-family: var(--font-heading); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: #000; text-align: center; margin-bottom: 0; } /* ── Full-bleed image sections (The Body Tells the Truth / For humanity.) ── */ .vp-full-bleed { position: relative; min-height: clamp(240px, 28vw, 400px); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; padding: 4rem 2rem; } .vp-full-bleed-title { position: relative; z-index: 1; color: #fff; font-family: var(--font-heading); font-size: clamp(2.25rem, 5.5vw, 4rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; text-align: center; max-width: 860px; margin-bottom: 0; } /* ── Feature images strip (3-up desktop, stacked mobile; Figma Feature 1) ── */ .vp-feature-row { display: flex; flex-direction: column; gap: 1rem; width: 100%; padding: clamp(3rem, 8vw, 7.5rem) clamp(1.5rem, 5vw, 5.625rem); box-sizing: border-box; } @media (min-width: 768px) { .vp-feature-row { flex-direction: row; align-items: stretch; justify-content: center; gap: clamp(1rem, 2vw, 1.8125rem); } } .vp-feature-tile { flex: 1 1 0; min-width: 0; width: 100%; max-width: 100%; height: auto; aspect-ratio: 435 / 345; object-fit: cover; border-radius: 10px; display: block; } /* ── Depth section: text + image (606 | 32 | 633 desktop, matches #learn) ── */ .vp-depth-grid { max-width: 1271px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; display: grid; gap: 2rem; align-items: start; } @media (min-width: 992px) { .vp-depth-grid { gap: 32px; grid-template-columns: minmax(0, 606px) minmax(0, 633px); } } @media (max-width: 991px) { .vp-depth-grid { grid-template-columns: 1fr; } } .vp-depth-img { width: 100%; border-radius: 10px; object-fit: cover; aspect-ratio: 531 / 694; display: block; } /* ── Signature ── */ .vp-signature { max-width: 220px; height: auto; margin-top: 4rem; display: block; }