/* ========================================================================== Base — reset, typography defaults, shared primitives. This is a standalone site (not an Elementor embed), so a global reset is legitimate here. Section fragments in /site/ still scope their own. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* No scroll-behavior: smooth here. Lenis does the interpolation, and the browser's own smooth scrolling fights it: input crawls, then snaps. Anchor links go through lenis.scrollTo() in motion.js, and the reduced-motion path wants instant jumps anyway. */ /* Several sections reveal by sliding in from the right. Until the animation plays, those elements sit past the viewport edge and the page scrolls sideways — measured at +20px on /medspa-os/ and +18px on /contractor-os/, and it happens on the live site too. `clip` rather than `hidden`: hidden would turn into a scroll container, which breaks position: sticky further down the page. */ html { overflow-x: clip; -webkit-text-size-adjust: 100%; } /* Lenis. Required by the library: without it the html element keeps its own scroll interpolation and the two compete. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } body { background: var(--black); color: var(--warm-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* clip, not hidden: overflow-x: hidden turns body into a scroll container, which breaks ScrollTrigger pinning and position: sticky. */ overflow-x: clip; } img, svg, video { display: block; max-width: 100%; height: auto; } /* Heading type lives entirely in assets/css/typography.css. base.css owns reset and layout only — if you are looking for a font-size, it is not here. */ h1 { } h2 { } h3 { } p { text-wrap: pretty; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--purple-light); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--purple); color: var(--white); } /* --- Shared primitives ---------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); position: relative; } .eyebrow { color: var(--muted); } .eyebrow--purple { color: var(--purple-light); } .lede { line-height: 1.6; color: var(--muted); max-width: var(--measure); } /* Buttons. Every state is explicit — including :visited — so a host theme or a browser default can never flip the label colour mid-interaction. */ .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 1.05em 1.9em; border-radius: var(--radius); border: 1px solid transparent; transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); will-change: transform; } .btn--primary, .btn--primary:visited { background: var(--purple); color: var(--white); border-color: var(--purple); } .btn--primary:hover, .btn--primary:focus-visible { background: var(--purple-glow); border-color: var(--purple-light); color: var(--white); box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35), 0 18px 46px -18px rgba(124, 58, 237, 0.85); } .btn--primary:active { transform: translateY(1px); color: var(--white); } .btn--ghost, .btn--ghost:visited { color: var(--warm-white); border-color: var(--divider); background: transparent; } .btn--ghost:hover, .btn--ghost:focus-visible { color: var(--white); border-color: var(--purple-light); background: rgba(139, 92, 246, 0.06); } .btn--ghost:active { transform: translateY(1px); } .btn__arrow { transition: transform var(--dur) var(--ease-out); } .btn:hover .btn__arrow { transform: translateX(4px); } /* Visually hidden but reachable by assistive tech. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: var(--gutter); z-index: 200; background: var(--purple); color: var(--white); padding: 0.75em 1.25em; border-radius: var(--radius); transition: top var(--dur) var(--ease-out); } .skip-link:focus { top: 1rem; } /* --- Reveal baseline ------------------------------------------------------ Content ships VISIBLE. motion.js sets the from-state at runtime only when motion is allowed, so crawlers and JS-off visitors always see everything. -------------------------------------------------------------------------- */ [data-reveal], [data-split] { opacity: 1; } /* Word masks created by motion.js. Inline-flex + overflow clip gives the inner span something to slide up out of. */ .split-word { display: inline-flex; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; } .split-word__in { display: inline-block; } /* Only while the word is actually moving. As a bare rule on .split-word__in this promoted every word of every split headline to its own compositor layer and held it there for the life of the page — motion.js adds the class before the tween and takes it off in onComplete. */ .split-word__in.is-animating { will-change: transform; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }