/* ============================================================================= Athli-style enhancements for the Sculptr (Framer) site - Scroll-reactive floating navbar (ported from Athli header.tsx) - Footer (ported from Athli footer.tsx) - Dark mode (hybrid: full-page invert + hand-tuned hero) - Scroll-progress bar + back-to-top button All injected DOM lives OUTSIDE [data-framer-root] so the dark-mode invert never touches it. Edit freely — this file + athli-enhance.js are the only two files that drive these features. ========================================================================== */ :root { --ath-navy: rgb(15, 57, 139); --ath-blue: rgb(0, 153, 255); --ath-bright: rgb(0, 136, 255); --ath-cyan-glow: rgba(0, 187, 255, 0.25); --ath-font: "Hanken Grotesk", "Figtree", system-ui, -apple-system, sans-serif; /* light-mode surface tokens */ --ath-fg: rgb(15, 57, 139); --ath-fg-muted: rgba(15, 57, 139, 0.62); --ath-nav-bg: rgba(255, 255, 255, 0.55); --ath-nav-border: rgba(15, 57, 139, 0.12); --ath-nav-shadow: 0 8px 30px rgba(15, 57, 139, 0.10); --ath-panel-bg: rgba(255, 255, 255, 0.92); --ath-footer-bg: rgba(247, 250, 255, 0.9); --ath-footer-border: rgba(15, 57, 139, 0.10); } html.dark { --ath-fg: rgba(235, 242, 255, 0.92); --ath-fg-muted: rgba(200, 215, 245, 0.60); --ath-nav-bg: rgba(12, 18, 34, 0.55); --ath-nav-border: rgba(120, 170, 255, 0.16); --ath-nav-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); --ath-panel-bg: rgba(14, 20, 38, 0.96); --ath-footer-bg: rgba(10, 15, 28, 0.92); --ath-footer-border: rgba(120, 170, 255, 0.12); } /* ----------------------------------------------------------------------------- Hide Framer's built-in nav + footer (keep nav's reserved space to avoid shift) -------------------------------------------------------------------------- */ /* Generic + root-scoped so it works across pages regardless of Framer's per-page generated class names. Our injected nav/footer live OUTSIDE [data-framer-root] (appended to ), so they are never matched. */ [data-framer-root] nav { visibility: hidden !important; pointer-events: none !important; } [data-framer-root] footer { display: none !important; } /* ============================================================================= NAVBAR ========================================================================== */ .ath-nav { position: fixed; inset: 0 0 auto 0; z-index: 1000; width: 100%; padding: 8px 8px 0; box-sizing: border-box; font-family: var(--ath-font); } .ath-nav__inner { margin: 8px auto 0; max-width: 1152px; /* max-w-6xl */ padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid transparent; border-radius: 16px; transition: max-width .3s ease, background-color .3s ease, padding .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease, border-radius .3s ease; } /* Scrolled: shrink into a floating, blurred, bordered pill */ .ath-nav.is-scrolled .ath-nav__inner { max-width: 896px; /* max-w-4xl */ padding: 12px 24px; /* slim glass bar with natural breathing room */ border-radius: 999px; /* pill */ background: var(--ath-nav-bg); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-color: var(--ath-nav-border); box-shadow: var(--ath-nav-shadow); } .ath-nav__logo { display: flex; align-items: center; flex-shrink: 0; position: relative; top: 1px; } .ath-nav__logo img { width: 200px; height: 44px; object-fit: cover; object-position: center; display: block; filter: drop-shadow(0 0 13px rgba(0, 136, 255, 0.35)); } /* centered links (absolutely centered like Athli) */ .ath-nav__links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; } .ath-nav__links a { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ath-fg-muted); transition: color .15s ease; white-space: nowrap; } .ath-nav__links a:hover { color: var(--ath-fg); } .ath-nav__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* buttons */ .ath-btn { font-family: inherit; font-size: 14px; font-weight: 600; border-radius: 999px; padding: 8px 16px; cursor: pointer; border: 1px solid transparent; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; } .ath-btn:active { transform: scale(0.97); } .ath-btn--primary { background: linear-gradient(180deg, var(--ath-blue), var(--ath-navy)); color: #fff; box-shadow: inset 0 0 30px var(--ath-cyan-glow), 0 6px 20px rgba(0, 136, 255, 0.25); } .ath-btn--primary:hover { box-shadow: inset 0 0 30px var(--ath-cyan-glow), 0 10px 28px rgba(0, 136, 255, 0.38); } .ath-btn--ghost { background: transparent; color: var(--ath-fg); border-color: var(--ath-nav-border); } .ath-btn--ghost:hover { border-color: var(--ath-blue); color: var(--ath-blue); } /* icon buttons (theme toggle, hamburger) */ .ath-icon-btn { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; border: 1px solid var(--ath-nav-border); color: var(--ath-fg); transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; } .ath-icon-btn:hover { border-color: var(--ath-blue); color: var(--ath-blue); } .ath-icon-btn:active { transform: scale(0.92); } .ath-icon-btn svg { width: 18px; height: 18px; } /* theme toggle: show sun in dark mode, moon in light mode */ .ath-theme-toggle .ath-icon-sun { display: none; } .ath-theme-toggle .ath-icon-moon { display: block; } html.dark .ath-theme-toggle .ath-icon-sun { display: block; } html.dark .ath-theme-toggle .ath-icon-moon { display: none; } /* hamburger only on mobile */ .ath-nav__burger { display: none; } /* ============================================================================= MOBILE NAV ========================================================================== */ @media (max-width: 860px) { .ath-nav__links { display: none; } .ath-nav__actions .ath-btn--primary, .ath-nav__actions .ath-nav-cta, .ath-nav__actions .ath-theme-toggle { display: none; } .ath-nav__burger { display: inline-flex; } .ath-mobile-panel { position: fixed; inset: 70px 8px auto 8px; z-index: 999; background: var(--ath-panel-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--ath-nav-border); border-radius: 20px; box-shadow: 0 20px 50px rgba(15, 57, 139, 0.18); padding: 22px; display: flex; flex-direction: column; gap: 18px; opacity: 0; transform: translateY(-12px) scale(0.98); pointer-events: none; transition: opacity .22s ease, transform .22s ease; font-family: var(--ath-font); } .ath-mobile-panel.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .ath-mobile-panel a.ath-mobile-link { font-size: 17px; font-weight: 500; text-decoration: none; color: var(--ath-fg); } .ath-mobile-panel a.ath-mobile-link:hover { color: var(--ath-blue); } .ath-mobile-panel .ath-mobile-row { display: flex; gap: 10px; align-items: center; margin-top: 4px; } .ath-mobile-panel .ath-btn--primary { flex: 1; } } .ath-mobile-panel { display: none; } @media (max-width: 860px) { .ath-mobile-panel { display: flex; } } /* ============================================================================= FOOTER ========================================================================== */ .ath-footer { font-family: var(--ath-font); background: var(--ath-footer-bg); border-top: 1px solid var(--ath-footer-border); padding: 40px 24px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ath-footer__inner { max-width: 1024px; margin: 0 auto; text-align: center; } .ath-footer__logo { display: inline-flex; } .ath-footer__logo img { height: 46.875px; width: auto; filter: drop-shadow(0 0 10px rgba(0,136,255,0.28)); } .ath-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin: 18px 0; } .ath-footer__links a { font-size: 13.5px; text-decoration: none; color: var(--ath-fg-muted); transition: color .15s ease; } .ath-footer__links a:hover { color: var(--ath-blue); } .ath-footer__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 18px 0; } .ath-footer__social a { color: var(--ath-fg-muted); transition: color .15s ease, transform .15s ease; } .ath-footer__social a:hover { color: var(--ath-blue); transform: translateY(-2px); } .ath-footer__social svg { width: 20px; height: 20px; display: block; } .ath-footer__copy { font-size: 12px; color: var(--ath-fg-muted); margin: 0; } /* ============================================================================= SCROLL PROGRESS BAR + BACK TO TOP ========================================================================== */ .ath-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 1001; background: linear-gradient(90deg, var(--ath-blue), var(--ath-bright), rgb(0, 187, 255)); box-shadow: 0 0 12px var(--ath-cyan-glow); transition: width .08s linear; } .ath-totop { position: fixed; right: 22px; bottom: 22px; z-index: 1000; width: 46px; height: 46px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 16px; /* "Haze Dark" glass button (style lab): deep navy-blue translucent glass that glows */ background: rgba(10, 55, 135, 0.8); border: 1px solid rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(2px) saturate(195%) brightness(1.05); backdrop-filter: blur(2px) saturate(195%) brightness(1.05); box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), inset 0 -3px 6px rgba(2,16,56,0.5), 0 0 8px -1px rgba(45,120,230,0.7), 0 2px 11px 0 rgba(18,86,205,0.55), 0 0 19px 0 rgba(8,60,170,0.45); opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none; transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease; } .ath-totop.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .ath-totop:hover { box-shadow: inset 0 2px 4px rgba(255,255,255,0.5), inset 0 -3px 6px rgba(2,16,56,0.55), 0 0 10px -1px rgba(45,120,230,0.9), 0 3px 14px 0 rgba(18,86,205,0.65), 0 0 26px 2px rgba(8,60,170,0.55); } .ath-totop:active { transform: scale(0.92); } .ath-totop svg { width: 20px; height: 20px; } /* ============================================================================= DARK MODE (hybrid: full-page invert + media re-correction + hero tuning) ========================================================================== */ html.dark { background: rgb(8, 11, 22); } html.dark body { background: rgb(8, 11, 22); } /* Invert the entire Framer page content. NB: we filter #main (the Framer wrapper) rather than [data-framer-root]. The framer-root element has compositing props that make a filter on it a visual no-op; #main is its parent with the same box and inverts reliably. Our injected nav/footer are siblings of #main, so they're untouched. */ html.dark #main { filter: invert(1) hue-rotate(180deg); background: rgb(8, 11, 22); } /* ...then re-invert real raster media so photos/video/logo/canvas stay true-colour. IMPORTANT: correct at exactly ONE level (the media element itself). Do NOT also target image *wrappers* or a broad [style*="background-image"] — a full-viewport background wrapper exists and would re-invert the whole page (cancelling dark mode), and wrapper+img together would double-invert photos. */ html.dark #main img, html.dark #main video, html.dark #main canvas, html.dark #main svg image { filter: invert(1) hue-rotate(180deg); } /* --- Hero hand-tuning ------------------------------------------------------- The hero's "Gradient Blur" canvas drives the colourful top glow. After the global invert it can read a touch flat, so we soften it and lay a deliberate brand-blue radial glow behind the top of the page. Tune these two rules to taste — this is the area most worth a manual pass. */ html.dark .framer-lbyv5o { opacity: 0.55; mix-blend-mode: screen; } html.dark #main::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 720px; pointer-events: none; z-index: 0; background: radial-gradient(60% 60% at 50% 0%, rgba(0, 136, 255, 0.20), transparent 70%), radial-gradient(40% 40% at 80% 10%, rgba(0, 187, 255, 0.12), transparent 70%); /* counter the parent invert so this glow renders as intended */ filter: invert(1) hue-rotate(180deg); } /* Honour reduced-motion */ @media (prefers-reduced-motion: reduce) { .ath-nav__inner, .ath-progress, .ath-totop, .ath-mobile-panel, .ath-btn { transition: none; } } /* ============================================================================= HERO BADGE — Petr Knoll "Glass Button" (exact port), in the nav<->headline gap. Only overrides vs. the original: text colour (#1560bd) + font (Satoshi, brand). Selectors are scoped to .glass-button* so they never touch other buttons. ========================================================================== */ :root { --anim--hover-time: 400ms; --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1); } @property --angle-1 { syntax: ""; inherits: false; initial-value: -75deg; } @property --angle-2 { syntax: ""; inherits: false; initial-value: -45deg; } .ath-hero-badge { display: flex; justify-content: center; margin: 56px 0 -39px; /* top: clear the tall nav; bottom: pull headline to ~19px below */ position: relative; z-index: 2; font-size: 16px; /* drives the em-based glass sizing (component "default") */ } .glass-button-wrap { position: relative; z-index: 2; border-radius: 999vw; background: transparent; pointer-events: none; transition: all var(--anim--hover-time) var(--anim--hover-ease); } .glass-button-shadow { --shadow-cuttoff-fix: 2em; position: absolute; width: calc(100% + var(--shadow-cuttoff-fix)); height: calc(100% + var(--shadow-cuttoff-fix)); top: calc(0% - var(--shadow-cuttoff-fix) / 2); left: calc(0% - var(--shadow-cuttoff-fix) / 2); filter: blur(clamp(2px, 0.125em, 12px)); -webkit-filter: blur(clamp(2px, 0.125em, 12px)); overflow: visible; pointer-events: none; } .glass-button-shadow::after { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: 999vw; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)); width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em); height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em); top: calc(var(--shadow-cuttoff-fix) - 0.5em); left: calc(var(--shadow-cuttoff-fix) - 0.875em); padding: 0.125em; box-sizing: border-box; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-composite: xor; transition: all var(--anim--hover-time) var(--anim--hover-ease); overflow: visible; opacity: 1; } .glass-button { --border-width: clamp(1px, 0.0625em, 4px); all: unset; cursor: pointer; position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); pointer-events: auto; z-index: 3; background: linear-gradient(-75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)); border-radius: 999vw; box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 1); backdrop-filter: blur(clamp(1px, 0.125em, 4px)); -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px)); transition: all var(--anim--hover-time) var(--anim--hover-ease); } .glass-button, .glass-button:hover { transform: scale(0.975); backdrop-filter: blur(0.01em); -webkit-backdrop-filter: blur(0.01em); box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25), 0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5), 0 0 0 0 rgba(255, 255, 255, 1); } .glass-button .glass-button-text { position: relative; display: block; user-select: none; -webkit-user-select: none; font-family: "Satoshi", "Satoshi Placeholder", "Inter", sans-serif; letter-spacing: -0.05em; font-weight: 500; font-size: 1em; color: #1560bd; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1); transition: all var(--anim--hover-time) var(--anim--hover-ease); padding-inline: 1.5em; padding-block: 0.875em; } .glass-button .glass-button-text, .glass-button:hover .glass-button-text { text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12); } .glass-button::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 999vw; width: calc(100% + var(--border-width)); height: calc(100% + var(--border-width)); top: calc(0% - var(--border-width) / 2); left: calc(0% - var(--border-width) / 2); padding: var(--border-width); box-sizing: border-box; background: conic-gradient( from var(--angle-1) at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5% 40%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 60% 95%, rgba(0, 0, 0, 0.5) ), linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-composite: xor; transition: all var(--anim--hover-time) var(--anim--hover-ease), --angle-1 500ms ease; box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5); } .glass-button-wrap .glass-button-shadow, .glass-button-wrap:has(.glass-button:hover) .glass-button-shadow { filter: blur(clamp(2px, 0.0625em, 6px)); -webkit-filter: blur(clamp(2px, 0.0625em, 6px)); transition: filter var(--anim--hover-time) var(--anim--hover-ease); } .glass-button-wrap .glass-button-shadow::after, .glass-button-wrap:has(.glass-button:hover) .glass-button-shadow::after { top: calc(var(--shadow-cuttoff-fix) - 0.875em); opacity: 1; } .glass-button-wrap:has(.glass-button:active) { transform: rotate3d(1, 0, 0, 25deg); } .glass-button-wrap:has(.glass-button:active) .glass-button { box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2), 0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05), 0 0.25em 0 0 rgba(255, 255, 255, 0.75), inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15); } .glass-button-wrap:has(.glass-button:active) .glass-button-shadow { filter: blur(clamp(2px, 0.125em, 12px)); } .glass-button-wrap:has(.glass-button:active) .glass-button-shadow::after { top: calc(var(--shadow-cuttoff-fix) - 0.5em); opacity: 0.75; } .glass-button-wrap:has(.glass-button:active) .glass-button-text { text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12); } /* dark mode: counter the #main invert so the glass keeps its intended look */ html.dark .ath-hero-badge { filter: invert(1) hue-rotate(180deg); } /* ============================================================================= NAV CTA — the glass button in the brand "haze" (blue) tone. Reuses the glass-button base above; only the fill/glow/text colour change. ========================================================================== */ .ath-nav-cta { font-size: 16px; } /* drives the em-based glass sizing for the nav */ /* all:unset leaves .glass-button as display:inline, so its background only paints the text line-strip; make the CTA fill its box so the haze tint covers the pill. */ .ath-nav-cta .glass-button { display: inline-flex; align-items: center; justify-content: center; } /* optical centering: nudge the label UP slightly so it reads perfectly centered in the pill (the bottom inset shadow makes a math-centered label look low) */ .ath-nav-cta .glass-button-text { top: -0.05em; } .glass-button--haze .glass-button { background: rgba(0, 135, 230, 0.7); box-shadow: inset 0 0.14em 0.22em rgba(255, 255, 255, 0.55), inset 0 -0.18em 0.4em rgba(8, 40, 110, 0.32), 0 0 0.5em -0.05em rgba(120, 205, 255, 0.7), 0 0.1em 0.7em 0 rgba(40, 150, 255, 0.55), 0 0 1.2em 0 rgba(0, 140, 255, 0.4); } .glass-button--haze .glass-button-text { color: #fff; text-shadow: 0 0.08em 0.35em rgba(8, 40, 110, 0.6); } /* Remove Framer's injected editor bar ("edit content"); JS strips it too. */ iframe[src*="framer.com/edit"], iframe[src*="framer.com/_edit"] { display: none !important; } /* ============================================================================= ANIMATED HERO TAGLINE — one line: "3D Simulations that" + a cycling 3D fly-in phrase. The static lead glides to keep the whole sentence centred as the phrase changes width (the suffix slot's width is animated; the centred line re-centres each frame). Styled like the "Join the waitlist" heading: Satoshi Light, -0.04em, white -> #1560bd gradient text fill. Size auto-fitted in JS. ========================================================================== */ .ath-line { display: inline-block; white-space: nowrap; } .ath-flux-lead { margin-right: 0.25em; } .ath-flux { display: inline-block; position: relative; vertical-align: baseline; width: 0; /* set + animated in JS */ overflow: visible; perspective: 1000px; transition: width 1s cubic-bezier(0.45, 0, 0.55, 1); /* slow, smooth ease-in-out glide */ } .ath-flux::before { content: "\200B"; } /* baseline + height anchor for the absolute phrase */ .ath-flux__phrase { position: absolute; left: 0; top: 0; white-space: nowrap; transform-style: preserve-3d; will-change: transform, opacity, filter; } .ath-ch { display: inline-block; white-space: pre; will-change: transform, opacity, filter; } /* exact "Join the waitlist" gradient text fill — applied per letter (lead + phrase) and straight top->bottom, so every word fades identically. */ .ath-ch { background-image: linear-gradient(180deg, rgb(255, 255, 255) -42%, rgb(21, 96, 189) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @media (prefers-reduced-motion: reduce) { .ath-flux { transition: none; } } /* ============================================================================= HERO APP SCREENSHOT — framed Studio shot under the hero. Sits full-width and centred; placed right after the hero so its top peeks above the fold and the rest reveals on scroll. ========================================================================== */ /* shrink the two hero CTAs a touch and nudge them up */ .ath-cta-row { transform: translateY(-38px) scale(0.9) !important; transform-origin: center !important; } .ath-heroshot { width: 100%; display: flex; justify-content: center; box-sizing: border-box; padding: 0 24px 1rem; margin-top: -100px; /* pull the shot up so it peeks into the hero */ position: relative; z-index: 1; } .ath-heroshot__frame { width: min(1120px, 92vw); border-radius: 16px; overflow: hidden; border: 1px solid rgba(15, 57, 139, 0.12); background: #fff; box-shadow: 0 40px 90px -30px rgba(15, 57, 139, 0.40), 0 12px 30px -12px rgba(15, 57, 139, 0.22), 0 0 80px -6px rgba(0, 153, 255, 0.18); /* very subtle blue glow */ animation: ath-shot-in 0.8s 0.15s both cubic-bezier(0.22, 1, 0.36, 1); } .ath-heroshot picture, .ath-heroshot__img { display: block; width: 100%; height: auto; } @keyframes ath-shot-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ath-heroshot__frame { animation: none; } } /* ====================================================================== */ /* Logo marquee (under the hero shot) + progressive-blur edges */ /* ====================================================================== */ .ath-logos { width: 100%; display: flex; justify-content: center; box-sizing: border-box; padding: 0 24px; margin-top: 100px; /* 100px below the hero screenshot */ position: relative; z-index: 1; } .ath-logos__viewport { position: relative; width: min(1120px, 92vw); overflow: hidden; padding: 16px 0; /* soft fade so logos don't hard-clip at the very edges */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } .ath-logos__track { display: flex; width: max-content; animation: ath-marquee 40s linear infinite; } .ath-logos:hover .ath-logos__track { animation-play-state: paused; } .ath-logos.is-off .ath-logos__track { animation-play-state: paused; } /* offscreen (phone JS): compositor idle */ .ath-logos__group { display: flex; align-items: center; gap: 64px; padding-right: 64px; /* trailing gap so the two groups loop seamlessly */ flex: 0 0 auto; } .ath-logo { display: flex; align-items: center; flex: 0 0 auto; } .ath-logo__img { height: clamp(28px, 3.4vw, 40px); width: auto; display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; /* full original colours */ } .ath-logo__img--tall { height: clamp(42px, 5.2vw, 58px); } /* portrait crest needs more height */ @keyframes ath-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ProgressiveBlur port: stacked backdrop-blur layers, each masked to a band */ .ath-pblur { position: absolute; top: 0; bottom: 0; width: 170px; pointer-events: none; z-index: 2; } .ath-pblur--left { left: 0; } .ath-pblur--right { right: 0; } .ath-pblur__layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; } @media (prefers-reduced-motion: reduce) { .ath-logos__track { animation: none; } } @media (max-width: 700px) { .ath-logos { margin-top: 64px; } .ath-logo__img { height: 26px; } .ath-logo__img--tall { height: 38px; } .ath-pblur { width: 90px; } } /* ====================================================================== */ /* "How it works" — header above the template's 3-icon composition, plus */ /* restyled caption lines. The composition itself is left untouched. */ /* ====================================================================== */ .ath-how-head { width: 100%; box-sizing: border-box; text-align: center; padding: 72px 24px 0; /* lift above the Framer fixed noise/particles layers so they don't mask the header as it scrolls through the mid-viewport band (stays below nav z:1000) */ position: relative; z-index: 1; } .ath-how-eyebrow { /* "HOW IT WORKS" — smaller; vibrant brand blue (no dull translucency) */ margin: 0 0 14px; font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(21, 96, 189); } .ath-how-title { /* EXACTLY the "Join the waitlist"

(54px Satoshi 300) / margin: 0; font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-weight: 300; font-size: 54px; line-height: 1.1em; letter-spacing: -0.04em; background-image: linear-gradient(161deg, rgb(255, 255, 255) -42%, rgb(21, 96, 189) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } / Caption lines under each icon — all solid brand #1560bd. / .ath-cap-t { display: block; font-weight: 600; color: rgb(21, 96, 189); } .ath-cap-s { display: block; font-weight: 400; color: rgb(21, 96, 189); margin-top: 3px; } .ath-cap--nudge { transform: translateX(-6px); } / nudge the middle (Sculpt) caption 6px left / @media (max-width: 760px) { .ath-how-head { padding-top: 52px; } .ath-how-title { font-size: 34px; } } / ====================================================================== / / "Why clinics switch" — proof section. ONE contained premium card on the / / white page; nested frosted-glass panels (style-lab glass-button feel). / / ====================================================================== / .ath-stats { width: 100%; box-sizing: border-box; padding: 88px 24px; display: flex; justify-content: center; background: transparent; / section/background untouched — plain white / } .ath-statscard { position: relative; width: min(1080px, 94vw); box-sizing: border-box; padding: clamp(28px, 4vw, 52px); border-radius: 30px; / MAIN container = the glass-button material, scaled up, but TRANSLUCENT: only a faint -75deg sheen (NO opaque fill) + near-zero backdrop blur, so the page background — noise + the moving particles — shows fully through it, exactly like the "Now in limited access" glass button. / background: linear-gradient(-75deg, rgba(255,255,255,0.05), rgba(255,255,255,0.2), rgba(255,255,255,0.05)); -webkit-backdrop-filter: blur(0.01em); backdrop-filter: blur(0.01em); box-shadow: inset 0 2px 2px rgba(0,0,0,0.05), inset 0 -2px 2px rgba(255,255,255,0.5), 0 2px 1px -2px rgba(0,0,0,0.25), inset 0 0 1px 2px rgba(255,255,255,0.5), 0 46px 100px -52px rgba(15,57,139,0.42), 0 14px 34px -18px rgba(15,57,139,0.18); } .ath-statscard::after { / static glass-button conic rim (border-only via mask) / content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: conic-gradient(from -75deg at 50% 50%, rgba(0,0,0,0.5), rgba(0,0,0,0) 5% 40%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 60% 95%, rgba(0,0,0,0.5)), linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5); } .ath-statstitle { margin: 0 0 32px; / exact percentage-number style, with a slightly darker shade of the same blue / font-family: "Satoshi","Satoshi Placeholder",sans-serif; font-weight: 500; font-size: clamp(40px, 6vw, 70px); letter-spacing: -0.04em; line-height: 1.1em; / the gradient is clipped to the text box; descenders (the "y") fall below it and get cut off — a little padding-bottom extends the box to cover them / padding-bottom: 0.18em; background-image: linear-gradient(161deg, rgb(255,255,255) -42%, rgb(16,78,152) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } / hero stat / .ath-statshero-stat { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } / counting numbers: fixed-width digits so the value doesn't jitter as it rises / .ath-count { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .ath-statsbig { / Based on the Framer "85%" treatment (upright, not italic): Satoshi 500, -0.04em, 1.1em, white->blue gradient text. 70px desktop (scales on mobile). / font-family: "Satoshi","Satoshi Placeholder",sans-serif; font-weight: 500; font-size: clamp(40px, 6vw, 70px); line-height: 1.1em; letter-spacing: -0.04em; background-image: linear-gradient(161deg, rgb(255,255,255) -42%, rgb(21,96,189) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ath-statsbig-label { font-family: "Satoshi","Satoshi Placeholder",sans-serif; font-weight: 500; font-size: clamp(15px, 1.6vw, 19px); color: rgba(15,57,139,0.85); } .ath-statshero-sub { margin: 14px 0 0; font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 14.5px; color: rgba(15,57,139,0.55); font-weight: 400; } .ath-statsaccent { color: #1560bd; font-weight: 700; } .ath-statsmuted { color: rgba(15,57,139,0.42); } / ---- emphasized comparison bars ---- / .ath-statsbars { margin: 30px 0 40px; display: flex; flex-direction: column; gap: 16px; } .ath-statsbar-row { display: grid; grid-template-columns: 112px 1fr 64px; align-items: center; gap: 16px; } .ath-statsbar-name { font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 13.5px; font-weight: 500; color: rgb(15,57,139); white-space: nowrap; } .ath-statsbar-track { position: relative; height: 16px; border-radius: 999px; background: rgba(15,57,139,0.06); box-shadow: inset 0 1px 2px rgba(15,57,139,0.10); } .ath-statsbar-fill { position: relative; display: block; height: 100%; width: 0; border-radius: 999px; transition: width 2s cubic-bezier(0.22,1,0.36,1); } .ath-stats.run-top .ath-statsbar-fill { width: var(--w); } .ath-statsbar-fill--brand { / same white->blue gradient as the big percentage numbers / background: linear-gradient(161deg, rgb(255,255,255) -42%, rgb(21,96,189) 100%); box-shadow: 0 2px 10px rgba(21,96,189,0.45), 0 0 16px rgba(58,147,242,0.5), inset 0 1px 0 rgba(255,255,255,0.4); } .ath-statsbar-fill--muted { background: linear-gradient(90deg, #c4cee0, #aab6cc); } .ath-statsbar-val { font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 15px; font-weight: 700; text-align: right; } / ---- nested section boxes (subtle translucent glass over the main card) ---- / .ath-statsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .ath-stat-panel { / Section boxes — exact spec: fill #000000 5% · border #ffffff 10% · radius 37 · shadow #000000 25% 0/0/40. The 5% black fill keeps the background visible through each box; the box just groups its section. The main card stays untouched (translucent glass). / position: relative; border-radius: 37px; padding: 26px; background: rgba(0,0,0,0.05); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 0 40px rgba(0,0,0,0.25); } / center the chart group so the bars sit lower (closer to the caption above and the "Post-treatment satisfaction" label below) instead of being pinned to the top / .ath-statspanel--tall { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; } / "shorter consultations" feature card — a brand-blue gauge dial of tick marks (no center knob). On scroll the lit ticks wind down from 30 to 15 (each tick ~= a minute), brand-blue with a soft glow — the consultation getting shorter. / .ath-statspanel--time { align-items: center; text-align: center; } .ath-time-illo { width: clamp(150px, 56%, 196px); margin-bottom: 18px; } .ath-dial { width: 100%; height: auto; display: block; overflow: visible; } .ath-dial-tick { stroke: rgba(15,57,139,0.15); stroke-width: 2.5; stroke-linecap: round; transition: stroke .35s ease, filter .35s ease; } .ath-dial-tick.is-on { stroke: url(#athDialG); filter: drop-shadow(0 0 5px rgba(0,153,255,0.75)); } .ath-statspanel-num { / Same treatment as the hero stat (upright). / display: block; font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-weight: 500; font-size: clamp(40px, 6vw, 70px); letter-spacing: -0.04em; line-height: 1.1em; background-image: linear-gradient(161deg, rgb(255,255,255) -42%, rgb(21,96,189) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: 13px; } .ath-statspanel-title { margin: 0; font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-weight: 600; font-size: 16px; color: rgb(15,57,139); } .ath-statspanel-sub { margin: 6px 0 0; font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-weight: 400; font-size: 14px; color: rgba(15,57,139,0.5); } / satisfaction column chart (left tall panel) / / margins position the centered group: bars sit higher while the foot ("Post-treatment satisfaction") stays in line with "shorter consultations" / .ath-statschart { display: flex; align-items: flex-end; justify-content: center; gap: 30px; height: 218px; margin-top: 10px; margin-bottom: 38px; } .ath-statscol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 11px; } .ath-statscol-cap { font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 12.5px; font-weight: 500; color: rgba(15,57,139,0.7); white-space: nowrap; } .ath-statscol-bar { width: 82px; height: 0; border-radius: 13px 13px 6px 6px; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; opacity: 0; transition: height 2s cubic-bezier(0.22,1,0.36,1), opacity .5s ease; } .ath-stats.run-left .ath-statscol-bar { height: var(--h); opacity: 1; } .ath-statscol-bar--brand { background: linear-gradient(161deg, rgb(255,255,255) -42%, rgb(21,96,189) 100%); box-shadow: 0 14px 30px -10px rgba(21,96,189,0.55), inset 0 1px 0 rgba(255,255,255,0.35); } .ath-statscol-bar--muted { background: linear-gradient(180deg, #b9c4d8, #9facc4); box-shadow: 0 12px 26px -12px rgba(15,57,139,0.28); } .ath-statscol-val { font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-weight: 700; font-size: 24px; color: #fff; } .ath-statscol-val small { font-size: 0.55em; font-weight: 600; opacity: 0.9; margin-left: 1px; } @media (max-width: 820px) { .ath-stats { padding: 60px 16px; } .ath-statsgrid { grid-template-columns: 1fr; } .ath-statspanel--tall { grid-row: auto; } } @media (prefers-reduced-motion: reduce) { .ath-statsbar-fill, .ath-statscol-bar { transition: none; } } / =================================================================== Below the waitlist: testimonials + traction strip + team (vanilla port of the provided React components, brand-matched) =================================================================== / .ath-below { position: relative; z-index: 1; / sit above Framer's fixed bg/noise layer (same as .ath-heroshot/.ath-how-head) so the section isn't masked and stays interactive / width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: clamp(56px, 9vw, 120px); padding: clamp(56px, 9vw, 120px) 24px; background: transparent; / plain white page, like the other sections / } / scroll-reveal for each block / .ath-below [data-anim="up"] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(0.22,1,0.36,1), transform .7s cubic-bezier(0.22,1,0.36,1); } .ath-below [data-anim="up"].is-in { opacity: 1; transform: none; } / ---------------------------- testimonials ------------------------- / .ath-tm { width: min(680px, 92vw); display: flex; flex-direction: column; align-items: center; gap: 34px; text-align: center; } / photo canvas: a staggered 3-column cluster of author photos (team-style). The active one is full colour + lifted, the rest grayscale/dim. Hover (or tap) a photo to read that person's quote. / .ath-tmcanvas { display: flex; align-items: flex-start; justify-content: center; gap: clamp(10px, 1.4vw, 14px); } .ath-tmcol { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 14px); } .ath-tmcol--2 { margin-top: clamp(26px, 4.5vw, 50px); } / staggered columns, team-style / .ath-tmcol--3 { margin-top: clamp(12px, 2.2vw, 24px); } .ath-tmcard { position: relative; flex: 0 0 auto; border: 0; padding: 0; cursor: pointer; width: clamp(98px, 12vw, 138px); aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: rgba(15,57,139,0.06); box-shadow: 0 16px 34px -20px rgba(15,57,139,0.4); transition: transform .45s cubic-bezier(0.22,1,0.36,1), opacity .4s ease, box-shadow .4s ease; } .ath-tmcol--2 .ath-tmcard { width: clamp(104px, 12.8vw, 148px); } / middle column slightly larger / .ath-tmcol--3 .ath-tmcard { width: clamp(100px, 12.2vw, 140px); } .ath-tmcard-img { width: 100%; height: 100%; object-fit: cover; display: block; background: rgba(15,57,139,0.06); filter: grayscale(1) brightness(0.9); transition: filter .5s ease; } .ath-tmcard.is-dim { opacity: 0.5; } .ath-tmcard.is-active { transform: translateY(-6px) scale(1.04); box-shadow: 0 26px 46px -22px rgba(15,57,139,0.55); } .ath-tmcard.is-active .ath-tmcard-img { filter: grayscale(0) brightness(1); } .ath-tmquote-wrap { position: relative; padding: 0 28px; } .ath-tmmark { position: absolute; font-family: Georgia, "Times New Roman", serif; font-size: 86px; line-height: 1; color: rgba(15,57,139,0.10); user-select: none; pointer-events: none; } .ath-tmmark--l { left: -8px; top: -34px; } .ath-tmmark--r { right: -8px; bottom: -60px; } .ath-tmquote { margin: 0; font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-weight: 300; font-size: clamp(22px, 3.4vw, 32px); line-height: 1.42; color: rgb(15,57,139); max-width: 560px; transition: opacity .4s ease-out, filter .4s ease-out, transform .4s ease-out; } .ath-tm.is-anim .ath-tmquote { opacity: 0; filter: blur(5px); transform: scale(0.98); } .ath-tmattrib { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: opacity .4s ease-out, filter .4s ease-out, transform .4s ease-out; } / same hide treatment + timing as the quote so the name swaps while it's blurred out (not visibly mid-change) / .ath-tm.is-anim .ath-tmattrib { opacity: 0; filter: blur(5px); transform: scale(0.98); } .ath-tmname { font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 16px; font-weight: 600; color: rgb(15,57,139); } .ath-tmrole { font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(15,57,139,0.5); } / ---------------------------- traction strip ----------------------- / .ath-counts { width: min(900px, 92vw); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(22px, 5vw, 64px); } .ath-countsitem { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .ath-num { font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-weight: 500; font-size: clamp(38px, 6vw, 60px); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; will-change: filter, transform; / light->dark fade mirrored to the right side (199deg = horizontal flip of 161deg) / background-image: linear-gradient(199deg, rgb(255,255,255) -42%, rgb(21,96,189) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ath-countslabel { margin: 0; font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 13.5px; font-weight: 500; color: rgba(15,57,139,0.55); } .ath-countsdiv { width: 1px; height: 46px; background: linear-gradient(180deg, transparent, rgba(15,57,139,0.18), transparent); } @media (max-width: 600px) { .ath-countsdiv { display: none; } } / ------------------------------- team ------------------------------ / .ath-team { width: min(1040px, 94vw); } .ath-teamhead { text-align: center; margin-bottom: clamp(30px, 4vw, 52px); } .ath-teameyebrow { margin: 0 0 12px; font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(15,57,139,0.5); } .ath-teamtitle { margin: 0; font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-weight: 500; font-size: clamp(26px, 4vw, 42px); letter-spacing: -0.02em; line-height: 1.1; background-image: linear-gradient(161deg, rgb(255,255,255) -42%, rgb(16,78,152) 110%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ath-teambody { display: flex; align-items: flex-start; justify-content: center; gap: clamp(26px, 5vw, 68px); } .ath-teamgrid { display: flex; gap: 12px; flex-shrink: 0; } .ath-teamcol { display: flex; flex-direction: column; gap: 12px; } .ath-teamcol--2 { margin-top: 56px; } .ath-teamcol--3 { margin-top: 26px; } .ath-teamcard { overflow: hidden; border-radius: 16px; cursor: pointer; flex-shrink: 0; box-shadow: 0 16px 34px -20px rgba(15,57,139,0.4); transition: opacity .4s ease; } .ath-teamcol--1 .ath-teamcard { width: 150px; height: 160px; } .ath-teamcol--2 .ath-teamcard { width: 166px; height: 176px; } .ath-teamcol--3 .ath-teamcard { width: 156px; height: 166px; } .ath-teamcard img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) brightness(0.8); transition: filter .5s ease, transform .5s ease; background: rgba(15,57,139,0.06); } .ath-teamcard.is-active img { filter: grayscale(0) brightness(1); } .ath-teamcard.is-dim { opacity: 0.55; } .ath-teamlist { display: flex; flex-direction: column; gap: 18px; flex: 1; min-width: 0; padding-top: 4px; } .ath-teamrow { cursor: pointer; transition: opacity .3s ease; } .ath-teamrow.is-dim { opacity: 0.45; } .ath-teamnameline { display: flex; align-items: center; gap: 10px; } .ath-teamdot { width: 16px; height: 12px; border-radius: 5px; background: rgba(15,57,139,0.25); flex-shrink: 0; transition: width .3s ease, background-color .3s ease; } .ath-teamrow.is-active .ath-teamdot { width: 20px; background: rgb(15,57,139); } .ath-teamname { font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: rgba(15,57,139,0.8); transition: color .3s ease; } .ath-teamrow.is-active .ath-teamname { color: rgb(15,57,139); } .ath-teamsocial { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; opacity: 0; transform: translateX(-8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .ath-teamrow.is-active .ath-teamsocial { opacity: 1; transform: none; pointer-events: auto; } .ath-teamic { display: inline-flex; padding: 4px; border-radius: 6px; color: rgba(15,57,139,0.5); transition: color .15s ease, background-color .15s ease, transform .15s ease; } .ath-teamic:hover { color: rgb(15,57,139); background: rgba(15,57,139,0.08); transform: scale(1.1); } .ath-teamic svg { width: 13px; height: 13px; display: block; fill: currentColor; } .ath-teamrole { margin: 6px 0 0; padding-left: 26px; font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(15,57,139,0.45); } @media (max-width: 820px) { .ath-teambody { flex-direction: column; align-items: center; gap: 36px; } .ath-teamgrid { max-width: 100%; overflow-x: auto; padding-bottom: 4px; } .ath-teamlist { width: 100%; max-width: 520px; } } @media (prefers-reduced-motion: reduce) { .ath-below [data-anim="up"] { opacity: 1; transform: none; transition: none; } .ath-tmquote, .ath-tmrole, .ath-num { transition: none; } } / Removed sections (kept in the DOM only as injection anchors / Framer hashes): - #waitlist: the "Join the waitlist" section (still anchors the stats card). - 3rd FAQ item ("When will Sculptr be available to the public?"). / #waitlist { display: none !important; } .framer-m0gbk0-container { display: none !important; } / The FAQ ships with a large designed bottom padding (~128px) + its list adds ~48px — dead space that was the gap to the old next section. It pushed the commits grid far below the FAQ content while it sat only ~120px above the footer. Trim that dead space so the FAQ box wraps its content; the commits section's symmetric padding then sits it an equal distance from the FAQ and the footer at every breakpoint. / #faq { padding-bottom: 0 !important; } #faq .framer-1rz5h1u { padding-bottom: 0 !important; } / ------------------ commits grid (spells SCULPTR) ------------------ / / GitHub-contributions-style board, light mode + brand blues. Letter cells draw in (pop + fill) when scrolled into view; ambient cells twinkle. / / Standalone last section (was nested in .ath-below). Same stacking rule so it sits above Framer's fixed bg layer; centred with its own vertical rhythm. / .ath-cg-section { position: relative; z-index: 1; width: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center; / the FAQ leaves a constant ~46px of accordion structure below its last question (after we trim its 128px design padding above), so the top padding is 46px less than the bottom — this centres the card between the FAQ content and the footer at every breakpoint. / padding: calc(clamp(67.76px, 10.89vw, 145.2px) - 46px) 24px clamp(67.76px, 10.89vw, 145.2px); background: transparent; } .ath-cg-wrap { width: min(640px, 94vw); display: flex; justify-content: center; } .ath-cg { width: 100%; box-sizing: border-box; display: grid; gap: clamp(2px, 0.5vw, 4px); padding: clamp(8px, 1.5vw, 16px); background: rgba(255,255,255,0.6); border: 1px solid rgba(15,57,139,0.10); border-radius: 16px; box-shadow: 0 18px 44px -26px rgba(15,57,139,0.32), inset 0 1px 0 rgba(255,255,255,0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .ath-cg-cell { aspect-ratio: 1; width: 100%; border-radius: 3px; background-color: rgba(15,57,139,0.05); border: 1px solid rgba(15,57,139,0.06); transition: background-color .3s ease, box-shadow .3s ease; / smooths the JS commit pulses / } / letters: pop in (staggered), then breathe continuously so the word stays alive. pop owns opacity/transform; breathe owns filter/box-shadow — no property clash. / .ath-cg-wrap.is-lit .ath-cg-cell.is-on { background-color: var(--hl); border-color: transparent; animation: ath-cg-pop .5s ease var(--d, 0s) both, ath-cg-breathe 2.6s ease-in-out calc(var(--d, 0s) + .55s) infinite; } @keyframes ath-cg-pop { 0% { opacity: 0; transform: scale(0.4); } 60% { transform: scale(1.14); } 100% { opacity: 1; transform: scale(1); } } @keyframes ath-cg-breathe { 0%, 100% { filter: brightness(0.9); box-shadow: 0 0 4px -2px var(--hl); } 50% { filter: brightness(1.28); box-shadow: 0 0 13px 0 var(--hl); } } @media (prefers-reduced-motion: reduce) { .ath-cg-cell { transition: none; } .ath-cg-wrap.is-lit .ath-cg-cell.is-on { animation: none; background-color: var(--hl); border-color: transparent; } } / =================================================================== ROI calculator (directly under "Why clinics switch") =================================================================== / .ath-calc { position: relative; z-index: 1; / above Framer's fixed bg layer / width: 100%; box-sizing: border-box; padding: 8px 24px clamp(72px, 10vw, 104px); display: flex; justify-content: center; background: transparent; } .ath-calccard { position: relative; width: min(1080px, 94vw); box-sizing: border-box; padding: clamp(26px, 4vw, 52px); border-radius: 30px; background: rgba(255,255,255,0.55); border: 1px solid rgba(15,57,139,0.10); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 40px 90px -52px rgba(15,57,139,0.42), 0 12px 30px -18px rgba(15,57,139,0.16), inset 0 1px 0 rgba(255,255,255,0.6); } .ath-calchead { text-align: center; margin-bottom: clamp(26px, 3.6vw, 42px); } .ath-calceyebrow { margin: 0 0 10px; font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(15,57,139,0.5); } .ath-calctitle { margin: 0; font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-weight: 500; font-size: clamp(24px, 3.6vw, 38px); letter-spacing: -0.02em; line-height: 1.12; background-image: linear-gradient(161deg, rgb(255,255,255) -42%, rgb(21,96,189) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ath-calcsub { margin: 10px 0 0; font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 14.5px; font-weight: 400; color: rgba(15,57,139,0.55); } .ath-calcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 26px) clamp(28px, 4vw, 56px); } .ath-calcgroup { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); } .ath-calcgroup-title { margin: 0 0 2px; font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(21,96,189); } .ath-calcrow { display: flex; flex-direction: column; gap: 9px; } .ath-calclabel { font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 13.5px; font-weight: 500; color: rgb(15,57,139); line-height: 1.3; } .ath-calchint { display: block; font-size: 11.5px; font-weight: 400; color: rgba(15,57,139,0.45); margin-top: 2px; } .ath-calccontrol { display: grid; grid-template-columns: 1fr 108px; gap: 14px; align-items: center; } / paired slider (brand fill) / .ath-calcrange { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; } .ath-calcrange::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #3a93f2, #1560bd var(--p,50%), rgba(15,57,139,0.12) var(--p,50%)); } .ath-calcrange::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid rgba(15,57,139,0.18); box-shadow: 0 2px 8px rgba(15,57,139,0.30); } .ath-calcrange::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(15,57,139,0.12); } .ath-calcrange::-moz-range-progress { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #3a93f2, #1560bd); } .ath-calcrange::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid rgba(15,57,139,0.18); box-shadow: 0 2px 8px rgba(15,57,139,0.30); } .ath-calcrange:focus-visible { outline: none; } .ath-calcrange:focus-visible::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(15,57,139,0.30), 0 0 0 4px rgba(0,153,255,0.22); } / number field / .ath-calcfield { display: inline-flex; align-items: center; gap: 3px; padding: 7px 11px; border: 1px solid rgba(15,57,139,0.15); border-radius: 10px; background: rgba(255,255,255,0.7); } .ath-calcfield:focus-within { border-color: #1560bd; box-shadow: 0 0 0 3px rgba(0,153,255,0.12); } .ath-calcnum { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 14px; font-weight: 600; color: rgb(15,57,139); text-align: right; -moz-appearance: textfield; } .ath-calcnum::-webkit-outer-spin-button, .ath-calcnum::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ath-calcunit { font-family:"Satoshi","Satoshi Placeholder",sans-serif; font-size: 13px; font-weight: 500; color: rgba(15,57,139,0.5); flex-shrink: 0; } / outputs reuse the traction-strip number style / .ath-calcoutputs { width: 100%; margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid rgba(15,57,139,0.10); } @media (max-width: 760px) { .ath-calcgrid { grid-template-columns: 1fr; gap: 22px; } } / PRODUCTION (main) ONLY: hide the testimonials + traction strip (kept in the code, just hidden via CSS). The website-preview branch keeps them. / .ath-below { display: none !important; } / #experience and #case-study are removed by JS on every breakpoint (see buildHeroShot / removeCaseStudy) — but the JS only runs after parse, and Framer re-renders can flash them back before the observers re-hide them. Pin them off in CSS: same end state, guaranteed from first paint. This also permanently silences the ~90 infinite "shine" mask animations and ~60 blurred Glow chips that ship inside #experience in the SSR HTML. / #experience, #case-study { display: none !important; } / ============================================================================= MOBILE OPTIMISATION (layout order + GPU/perf) ========================================================================== / / Below Framer's desktop breakpoint the root flex column reorders its sections via `order:`; our injected (order:0) sections piled up first and scrambled the page (hero pushed down, FAQ to the bottom). Pin every root child to source order so the mobile layout matches the desktop arrangement. / @media (max-width: 1199px) { [data-framer-root] > { order: 0 !important; } } @media (max-width: 860px) { /* Drop GPU-heavy backdrop-filter blur on phones: the 16-layer marquee edge blur, the fixed nav (re-blurred every scroll frame) and the glass cards were dropping the frame rate. Surfaces stay legible over the light page. / .ath-pblur { display: none; } .ath-logosviewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } [class="ath-"], .glass-button, .glass-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .ath-nav.is-scrolled .ath-navinner { background: rgba(247,250,255,0.95); } .ath-mobile-panel { background: rgba(247,250,255,0.98); } /* keep just the one-time draw-in; stop the infinite breathe (box-shadow+filter animation on ~100 commit-grid cells). / .ath-cg-wrap.is-lit .ath-cg-cell.is-on { animation: ath-cg-pop .5s ease var(--d, 0s) both; } } / ============================================================================= MOBILE OPTIMISATION — FRAMER CORE (GPU memory + scroll paint) The block above only tames our own `.ath-` layer; the rules below tame the Framer-generated core, which is where the phone crashes-while-scrolling come from (measured: 162 compositor layers, 79 blurred elements at 393px). All phone-only; desktop is untouched. ========================================================================== / @media (max-width: 860px) { /* Match the sped-up phone stats reveal (JS DUR 900ms): the bar/column fills are CSS transitions that were 2s, so on phone they lagged the numbers. / .ath-statsbar-fill { transition: width .9s cubic-bezier(0.22,1,0.36,1) !important; } .ath-statscol-bar { transition: height .9s cubic-bezier(0.22,1,0.36,1), opacity .4s ease !important; } / While a number is actively counting, paint it solid: these are gradient text (background-clip:text), and every text write re-rasters the whole clipped gradient — 60x/s across several counters right as the section scrolls in was crashing the GPU process on phones. The JS restores the gradient on the final frame, so the settled look is pixel-identical. / .ath-statsbig.is-counting, .ath-num.is-counting { background-image: none !important; -webkit-text-fill-color: rgb(21, 96, 189) !important; color: rgb(21, 96, 189) !important; } / The stats/calc cards carry 90-100px-blur drop shadows; rasterising those the moment the section renders mid-scroll allocates huge blur textures. Tighter shadow, same floating feel. / .ath-statscard, .ath-calccard { box-shadow: inset 0 2px 2px rgba(0,0,0,0.05), inset 0 -2px 2px rgba(255,255,255,0.5), inset 0 0 1px 2px rgba(255,255,255,0.5), 0 12px 28px -16px rgba(15,57,139,0.35) !important; } / ~40 dial ticks each gain a drop-shadow() filter layer during the reveal — drop the glow on phones (ticks still light up in the brand gradient). / .ath-dial-tick.is-on { filter: none !important; } / P0-A — Neutralise the ~60 decorative blurred radial-gradient "Glow" planes. Each blur() forces its own composited GPU texture; on a phone they pile up as you scroll and exhaust GPU memory (tab crash). The gradients are already soft, so removing the blur is visually near-identical. / #main [data-framer-name="Glow"] { filter: none !important; -webkit-filter: none !important; } / The single large fixed hero glow ("Gradient Blur" = .framer-lbyv5o): keep the soft look but cut the cost — a full-viewport blur(80px) is one of the most expensive mobile paint ops. / #main [data-framer-name="Gradient Blur"] { filter: blur(20px) !important; -webkit-filter: blur(20px) !important; } / P0-B — Stop Framer speculatively promoting ~50 compositor layers. Framer drives will-change through these two custom properties; forcing them to `auto` collapses the variable-driven promotions (the few genuinely-animating appear elements use a hard-coded will-change:transform and are left alone). / #main { --framer-will-change-override: auto; --framer-will-change-effect-override: auto; } / The tagline runs the cheap opacity fade on phones (P3), so the per-letter 3D/blur compositor hints on its ~44 letter spans are pure wasted GPU layers. / .ath-flux, .ath-fluxphrase, .ath-ch, .ath-num { will-change: auto !important; } / P1 — Defer rendering of the below-fold sections until they near the viewport (content-visibility:auto ⇒ the browser skips their layout/paint/compositing and image decode entirely while off-screen). Biggest win for scroll load + memory. `contain-intrinsic-size: auto px` reserves the right height up-front (no scroll-jump) and remembers the real size after first render. Heights measured live at 393px. NB: `.framer-f786x8` is a Framer-hashed class (the FAQ) — re-measure if the site is ever re-exported from Framer. / .ath-stats { content-visibility: auto; contain-intrinsic-size: auto 1060px; } .ath-calc { content-visibility: auto; contain-intrinsic-size: auto 820px; } .framer-f786x8 { content-visibility: auto; contain-intrinsic-size: auto 410px; } / Scan/Sculpt/Satisfy feature cards — 980px of always-rendered content missed in the first pass (it hides inside a display:contents ssr-variant wrapper, so it never showed up as a root child). Framer-hashed class too — re-check on re-export. / .framer-1pkm4pd-container { content-visibility: auto; contain-intrinsic-size: auto 980px; } .ath-cg-section { content-visibility: auto; contain-intrinsic-size: auto 250px; } / P4 — Dark mode is currently dormant (toggle not wired), but if it is ever enabled the full-page filter:invert() would instantly crash a phone. Never run the whole-page filter on mobile; media re-inversion and the counter-invert glow become no-ops too. / html.dark #main { filter: none !important; -webkit-filter: none !important; background: rgb(8, 11, 22); } html.dark #main img, html.dark #main video, html.dark #main canvas, html.dark #main svg image, html.dark #main::before { filter: none !important; -webkit-filter: none !important; } } / ============================================================================= PHONE (<=600px): more compact rhythm + standard mobile sizing. The injected sections carried desktop-scaled padding and headings that hit their clamp minimums (~60px section padding, 40px titles, 28px card insets) — too airy on a phone. Tighten section spacing, card insets and headings, and dial the busy background particles down. Phone-only; tablet + desktop are untouched (they never match this query). ========================================================================== / @media (max-width: 600px) { / tighter vertical rhythm between sections / .ath-how-head { padding-top: 34px; } .ath-stats { padding: 36px 16px; } .ath-calc { padding-bottom: 44px; } .ath-cg-section { padding-top: 12px; padding-bottom: 36px; } .ath-footer { padding-top: 28px; padding-bottom: 28px; } / tighter card insets / .ath-statscard { padding: 20px; } .ath-calccard { padding: 20px; } / standard phone heading sizes (down from the desktop-scaled clamps) / .ath-how-title { font-size: 28px; } .ath-statstitle { font-size: 30px; margin-bottom: 18px; } .ath-statsbig { font-size: 36px; } / Fewer / less-busy background particles. The literal particle COUNT lives in the Framer WebGL component (not settable from CSS), so soften the canvas so the field reads sparser and calmer behind the content. Tune the opacity (or remove) to taste. / #main [data-framer-name="Gradient Blur"] canvas { opacity: 0.45 !important; } / --- Nav logo: smaller on phones (200x44 was ~half the screen wide). Same aspect ratio so the wordmark crop is identical, just scaled down. --- / .ath-navlogo img { width: 150px; height: 33px; } / Pull the whole nav bar closer to the edges so the logo sits nearer the left (was ~33px in; now ~22px — a healthy margin, not touching the edge). / .ath-nav__inner { padding-left: 14px; padding-right: 14px; } / --- Hero: raise it and tighten the vertical rhythm without jamming. The hero content column (framer-wqgg98) had padding-top:41px and a 90px gap between its stacked blocks (badge / heading / tagline / buttons). Framer-hashed classes — re-check these hashes on any Framer re-export. --- / #main .framer-wqgg98 { padding-top: 18px !important; gap: 34px !important; row-gap: 34px !important; } #main .framer-1dci305 { padding-top: 18px !important; padding-bottom: 18px !important; } / --- Hero screenshot: the -100px "peek up into the hero" pull is a desktop device — on a phone it drags the photo up OVER the Request Access / Find Out More buttons (a constant 100px overlap, worse once the heading/tagline wrap). Sit it cleanly below the buttons with a small gap instead. --- */ .ath-heroshot { margin-top: -24px !important; } }