/* ------ FOCUS ------ */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: var(--_spacing---space--2xs) solid var(--_color---text--primary); outline-offset: var(--_spacing---space--2xs); box-shadow: 0 0 0 var(--_spacing---space--xs) var(--_color---background--primary); } /* ------ FORMS ------ */ /* -- Rich text (strip Webflow's first/last-block margins) -- */ .w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child { margin-top: 0 !important; } .w-richtext > :last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child { margin-bottom: 0 !important; } /* -- Inputs -- */ .w-input, .w-select { height: auto; padding: var(--_spacing---space--s) var(--_spacing---space--m); font-size: var(--_type---size--font-m); } /* ------ SITE LOADER ------ */ /* Full-viewport opening curtain: animated 5-colour gradient with the line-draw "Stitchy" logo centred on top. In production the logo is a NATIVE Webflow Lottie (.site-loader-logo); the prototype injects it via lottie-web into the [data-site-loader-logo] mount. Dismissed by site-loader.js once window.load + studio:ready + the data-min-display floor have all passed (5s safety cap). Once-per-session: an inline script adds html.loader-seen on loads that should NOT show the curtain (in-session navigations); the rules at the end of this section hide it before first paint. Shown on first load + every hard refresh. Layout: orange top, yellow mid-left, lime bottom-left, sage bottom-right, peach base wash + soft right-edge highlight. Positions drift on a 22s loop; two warm layers breathe between adjacent palette colours on a 26s loop. All motion killed under prefers-reduced-motion. */ /* Register the two cycling colour stops so they can interpolate in @keyframes. */ @property --loader-warm-top { syntax: ""; inherits: false; initial-value: #FF9E52; } @property --loader-warm-mid { syntax: ""; inherits: false; initial-value: #FADB6F; } .site-loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; /* Fully opaque from first paint — on hard refresh the user must NEVER see the page content flash before the curtain covers it. .is-hidden runs the fade-OUT when site-loader.js dismisses the curtain. */ opacity: 1; transition: opacity 0.5s ease; --loader-warm-top: #FF9E52; --loader-warm-mid: #FADB6F; background-color: #F6C193; background-image: /* sage — bottom-right */ radial-gradient(ellipse 55% 50% at 95% 100%, #AFCDBE 0%, transparent 60%), /* lime — bottom-left */ radial-gradient(ellipse 55% 55% at 5% 95%, #9DEE9C 0%, transparent 65%), /* yellow — mid-left (cycles to lime-warm) */ radial-gradient(ellipse 50% 60% at 0% 55%, var(--loader-warm-mid) 0%, transparent 60%), /* peach — right-edge highlight */ radial-gradient(ellipse 45% 70% at 105% 50%, #F6C193 0%, transparent 60%), /* orange — top (cycles to peach-warm) */ radial-gradient(ellipse 70% 55% at 60% -5%, var(--loader-warm-top) 0%, transparent 65%); background-size: 150% 150%, 160% 160%, 160% 160%, 150% 150%, 170% 170%; background-repeat: no-repeat; animation: site-loader-drift 22s ease-in-out infinite alternate, site-loader-shift 26s ease-in-out infinite; } .site-loader.is-hidden { opacity: 0; pointer-events: none; } /* Lock page scroll while the loader curtain is up. Removed by site-loader.js the instant the fade-out completes, so reveals run against the real layout. */ body.is-intro-loading { overflow: hidden; } .site-loader-logo { width: 70vw; aspect-ratio: 1267 / 266; height: auto; } .site-loader-logo svg, .site-loader-logo > div { width: 100%; height: 100%; display: block; } /* 5 layers, in declaration order: sage(BR), lime(BL), yellow(L-mid), peach(R-mid), orange(top). Each drifts a small amount on its own axis so the composition slowly rearranges. */ @keyframes site-loader-drift { 0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; } 50% { background-position: -8% -5%, 8% -5%, -5% 10%, 5% -8%, 5% 10%; } 100% { background-position: 5% -10%, -8% 10%, 10% -5%, -5% 8%, -8% 5%; } } /* Two warm layers gently swap between adjacent palette colours so the warmth subtly breathes without any colour disappearing from the composition. */ @keyframes site-loader-shift { 0%, 100% { --loader-warm-top: #FF9E52; --loader-warm-mid: #FADB6F; } 50% { --loader-warm-top: #F6C193; --loader-warm-mid: #9DEE9C; } } @media (max-width: 767px) { .site-loader-logo { width: 82vw; } } @media (prefers-reduced-motion: reduce) { .site-loader { animation: none; } } /* Once-per-session skip — html.loader-seen is set by the inline script BEFORE first paint on in-session navigations, so the curtain never renders and the scroll lock never bites. site-loader.js reads window.__siteLoaderSkip and dismisses the (already hidden) element on the same loads. */ html.loader-seen .site-loader { display: none; } html.loader-seen body.is-intro-loading { overflow: visible; } /* ------ BUTTONS ------ */ /* -- Base (API: data-variant | data-size | data-icon-only | data-full-width) -- */ .button, button.button { --button-color: var(--_color---text--primary); --button-faded: color-mix(in srgb, var(--button-color), transparent 90%); --button-bg: var(--button-color); --button-border: var(--button-color); --button-text-color: var(--_color---text--inverted); --button-font: var(--_type---family--mona-sans); --button-text-size: 1.25vw; --button-padding-y: var(--_spacing---space--l); --button-padding-x: var(--_spacing---space--xl); --button-gap: var(--_spacing---space--s); --icon-size: 0.8em; display: inline-flex; align-items: center; justify-content: center; gap: var(--button-gap); padding: var(--button-padding-y) var(--button-padding-x); background-color: var(--button-bg); border: var(--_border---width--s) solid var(--button-border); border-radius: var(--_border---radius--s); color: var(--button-text-color); font-family: var(--button-font); font-size: var(--button-text-size); font-weight: var(--_type---weight--regular); line-height: var(--_type---line-height--s); text-transform: none; text-decoration: none; cursor: pointer; transition: background-color 600ms cubic-bezier(0.16, 1, 0.3, 1), color 100ms cubic-bezier(0.16, 1, 0.3, 1), border-color 100ms cubic-bezier(0.16, 1, 0.3, 1), opacity 100ms cubic-bezier(0.16, 1, 0.3, 1), transform 100ms cubic-bezier(0.16, 1, 0.3, 1); } .button:hover { --button-color: color-mix(in srgb, var(--_color---text--primary), var(--_color---background--primary) 10%); } .button:active { transform: scale(0.98); } /* -- Variants -- */ .button[data-variant="outline"] { --button-bg: transparent; --button-text-color: var(--button-color); } .button[data-variant="faded"] { --button-bg: var(--button-faded); --button-border: transparent; --button-text-color: var(--button-color); } .button[data-variant="outline-faded"] { --button-bg: transparent; --button-border: var(--button-faded); --button-text-color: var(--button-color); } .button[data-variant="transparent"] { --button-bg: transparent; --button-border: transparent; --button-text-color: var(--button-color); } .button[data-variant="text"] { --button-bg: transparent; --button-border: transparent; --button-text-color: var(--button-color); --button-padding-x: 0; --button-padding-y: 0; } .button[data-variant="text"]:hover { text-decoration: underline; text-underline-offset: 2.5px; } .button[data-variant="text"]:active { transform: none; } /* Unfilled variants: subtle fill on hover instead of darkening transparent. */ .button[data-variant="outline"]:hover, .button[data-variant="faded"]:hover, .button[data-variant="outline-faded"]:hover, .button[data-variant="transparent"]:hover { background-color: color-mix(in srgb, var(--button-color), transparent 95%); } /* -- Sizes -- */ .button[data-size="small"] { --button-padding-y: var(--_spacing---space--s); --button-padding-x: var(--_spacing---space--m); --button-text-size: 1vw; } .button[data-size="xsmall"] { --button-padding-y: var(--_spacing---space--xs); --button-padding-x: var(--_spacing---space--s); --button-text-size: 0.85vw; } /* -- Modifiers -- */ .button[data-icon-only] { --button-padding-x: var(--button-padding-y); --icon-size: 1.3rem; } .button[data-full-width] { width: 100%; } /* -- States -- */ .button:disabled, .button.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .button.is-loading { opacity: 0.6; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .button:active { transform: none; } } /* -- Group -- */ .button-group { display: flex; flex-wrap: wrap; align-items: center; grid-column-gap: var(--_spacing---space--m); grid-row-gap: var(--_spacing---space--m); } /* ------ WEBFLOW NAVBAR ------ */ /* Burger ⇄ close icon swap, off Webflow's native .w--open hook (Webflow adds .w--open to .w-nav-button when the mobile menu opens). The Designer can't author an ancestor-state → child selector, so the swap lives here. .w--open is mobile-only — no media query needed. */ .w-nav-button .icn_nav-close { display: none; } .w-nav-button.w--open .icn_nav-open { display: none; } .w-nav-button.w--open .icn_nav-close { display: block; } /* ------ DATA-GRID ------ */ /* Named layouts + mobile collapse are viewport-gated — see RESPONSIVE. */ [data-grid] { --grid-gap: var(--_spacing---space--xl); display: grid; container-type: inline-size; grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gap); row-gap: var(--_spacing---space--xl); } [data-grid] > * { grid-column: 1 / -1; } /* -- Column span -- */ [data-grid] > [data-col-span="1"] { grid-column-end: span 1; } [data-grid] > [data-col-span="2"] { grid-column-end: span 2; } [data-grid] > [data-col-span="3"] { grid-column-end: span 3; } [data-grid] > [data-col-span="4"] { grid-column-end: span 4; } [data-grid] > [data-col-span="5"] { grid-column-end: span 5; } [data-grid] > [data-col-span="6"] { grid-column-end: span 6; } [data-grid] > [data-col-span="7"] { grid-column-end: span 7; } [data-grid] > [data-col-span="8"] { grid-column-end: span 8; } [data-grid] > [data-col-span="9"] { grid-column-end: span 9; } [data-grid] > [data-col-span="10"] { grid-column-end: span 10; } [data-grid] > [data-col-span="11"] { grid-column-end: span 11; } [data-grid] > [data-col-span="12"] { grid-column-end: span 12; } /* -- Column start -- */ [data-grid] > [data-col-start="1"] { grid-column-start: 1; } [data-grid] > [data-col-start="2"] { grid-column-start: 2; } [data-grid] > [data-col-start="3"] { grid-column-start: 3; } [data-grid] > [data-col-start="4"] { grid-column-start: 4; } [data-grid] > [data-col-start="5"] { grid-column-start: 5; } [data-grid] > [data-col-start="6"] { grid-column-start: 6; } [data-grid] > [data-col-start="7"] { grid-column-start: 7; } [data-grid] > [data-col-start="8"] { grid-column-start: 8; } [data-grid] > [data-col-start="9"] { grid-column-start: 9; } [data-grid] > [data-col-start="10"] { grid-column-start: 10; } [data-grid] > [data-col-start="11"] { grid-column-start: 11; } [data-grid] > [data-col-start="12"] { grid-column-start: 12; } /* ------ STICKERS ------ */ /* -- Base (ADD: ::before beside word. SWAP: transparent glyph behind image.) -- */ .sticker-add { position: relative; white-space: nowrap; } .sticker-add::before { content: ""; display: inline-block; height: 0.9em; aspect-ratio: 1; vertical-align: baseline; background-size: contain; background-repeat: no-repeat; background-position: center; transform: scale(1.07); } .sticker-swap { display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center; color: transparent; } .sticker-swap.sticker-box { display: inline-block; width: 1em; aspect-ratio: 1; vertical-align: middle; overflow: hidden; } /* -- Add artwork -- */ .sticker-add.sticker-book::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d29b58e74fa85fb67_aee3637281e60afc5b3733cc8894bd88_sticker_book.svg"); aspect-ratio: 103 / 102; } .sticker-add.sticker-brain::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a270310f2e9e581ba53724c_sticker-brain.svg"); aspect-ratio: 76 / 86; transform: translateX(0.05em) translateY(0.1em) rotate(8deg) scale(1.05); } .sticker-add.sticker-burrito::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3dcaa064ef33b41cb3_sticker_burrito.svg"); aspect-ratio: 72 / 108; } .sticker-add.sticker-chess::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a27141a127f4b0b8bc5a201_sticker-chess.svg"); aspect-ratio: 68 / 103; transform: translateX(0.05em) translateY(-0.06em) rotate(8deg) scale(1.5); } .sticker-add.sticker-coffee::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3dba03ba59ac867ed5_sticker_coffee.svg"); aspect-ratio: 59 / 70; transform: translateX(0.05em) rotate(8deg) scale(1.2); } .sticker-add.sticker-coffee-cup::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d656dbb77c24eedb5_sticker_coffee%20cup.svg"); aspect-ratio: 67 / 80; } .sticker-add.sticker-disco-ball::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3dfcc5c2be7045d5d4_sticker_disco-ball.svg"); transform: translateX(-0.01em) translateY(0.1em) rotate(3deg) scale(1.1); } .sticker-add.sticker-eye::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d1a9d535903c44b01_sticker_eye.svg"); } .sticker-add.sticker-heart::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d0320e598439628ed_sticker_heart.svg"); transform: translateX(0.05em) translateY(0.1em) rotate(8deg) scale(1.05); } .sticker-add.sticker-margarita::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3dcaa064ef33b41cca_sticker_Margarita.svg"); aspect-ratio: 136 / 116; } .sticker-add.sticker-megaphone::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3dfee538e890d8fa64_sticker_megaphone.svg"); } .sticker-add.sticker-phone::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d81b18d9459a37b0c_sticker_phone.svg"); aspect-ratio: 87 / 107; transform: translateX(-0.09em) translateY(0.1em) rotate(-15deg) scale(1.6); } .sticker-add.sticker-post-social::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d6d4d91ecdbe50035_sticker_post%20social.svg"); aspect-ratio: 176 / 98; transform: translateX(0.1em) translateY(0.1em) rotate(3deg) scale(1.05); } .sticker-add.sticker-slot-machine::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3db3db0157963bfe4f_sticker_slot%20machine.svg"); aspect-ratio: 167 / 70; transform: translateX(0.03em) translateY(-0.01em) rotate(3deg) scale(1.1); } .sticker-add.sticker-slot-green::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d11b6e405a1f4e180_sticker_slot%20machine-green.svg"); aspect-ratio: 152 / 63; } .sticker-add.sticker-smiley::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d321baeb989063a84_sticker_smiley.svg"); aspect-ratio: 104 / 105; transform: scale(1.07) rotate(var(--sticker-rotation, 0deg)); transform-origin: 50% 50%; will-change: transform; } .sticker-add.sticker-smiley-side::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3dfee538e890d8fa8a_sticker_smiley-side.svg"); } .sticker-add.sticker-smiley-up::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d850dcc5431d1b613_sticker_smiley-up.svg"); } .sticker-add.sticker-shine::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d78c306601d7bb42a_sticker_shine.svg"); aspect-ratio: 100 / 54; } .sticker-add.sticker-sparkle::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d55af9680ca6239d3_sticker_sparkle.svg"); aspect-ratio: 92 / 62; transform: translateX(0.08em) translateY(0.05em) rotate(-3deg) scale(1.05); } .sticker-add.sticker-speech::before { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d350b6a58abc7cdfe_sticker_speech%20bubble.svg"); aspect-ratio: 37 / 33; } /* -- Swap artwork -- */ .sticker-swap.sticker-logo { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3dc231e9d5766170e1_sticker_logo.svg"); aspect-ratio: 609 / 158; transform: rotate(-5deg) scale(1.2); } .sticker-swap.sticker-you { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3eb3db0157963bfe7c_sticker_you.svg"); aspect-ratio: 208 / 108; transform: rotate(7deg) scale(0.96); } .sticker-swap.sticker-post-social { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d6d4d91ecdbe50035_sticker_post%20social.svg"); aspect-ratio: 176 / 98; transform: translateY(-0.6em) rotate(3deg) scale(0.7); margin-inline: -0.7em; } .sticker-swap.sticker-o { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d9c83315aa821244d_sticker_o.svg"); aspect-ratio: 219 / 51; margin-right: 0.1em; padding-inline: 0 2.5em; } .sticker-swap.sticker-l { background-image: url("https://cdn.prod.website-files.com/6a1c3e91bcdb95c89bd55ef3/6a1c4a3d4f9f44f7ac1d2769_sticker_L.svg"); margin-inline: .1em; margin-right: -1.5em; padding-inline: 0 2.9em; transform: translateY(-0.1em) scale(1.15); } /* -- Placeholder artwork (swap to real assets before launch) -- */ .sticker-add.sticker-about::before { background-image: url("https://bydefault.design/image/120x90"); aspect-ratio: 4 / 3; } .sticker-add.sticker-founded-1::before { background-image: url("https://bydefault.design/image/90x90"); } .sticker-add.sticker-founded-2::before { background-image: url("https://bydefault.design/image/90x90"); } .sticker-add.sticker-slot::before { background-image: url("https://bydefault.design/image/120x90"); aspect-ratio: 4 / 3; } .sticker-add.sticker-social::before { background-image: url("https://bydefault.design/image/180x108"); aspect-ratio: 5 / 3; } .sticker-add.sticker-speaker::before { background-image: url("https://bydefault.design/image/180x108"); aspect-ratio: 5 / 3; } .sticker-add.sticker-out::before { background-image: url("https://bydefault.design/image/180x108"); aspect-ratio: 5 / 3; } .sticker-add.sticker-science::before { background-image: url("https://bydefault.design/image/180x108?text=Book"); aspect-ratio: 5 / 3; } .sticker-add.sticker-science-coffee::before { background-image: url("https://bydefault.design/image/100x120?text=Coffee"); aspect-ratio: 5 / 6; } /* ------ EYEBROW ------ */ /* Decorative underline squiggle. The inline SVG (Webflow HTML Embed) uses stroke="currentColor" + preserveAspectRatio="none" + vector-effect="non-scaling-stroke", so it stretches to the flex parent's width at a constant 1.5px line weight. Colour = `color` (set per section in the Designer); defaults to brand orange. */ .eyebrow-line { display: block; width: 100%; /* fills the flex parent → matches the eyebrow text width */ height: 0.6em; /* fixed height; tracks the eyebrow font size */ overflow: visible; /* the path crests above its viewBox — don't clip the cap */ color: var(--_color---background--orange); } /* ------ POST-IT ------ */ /* The static (closed) look is authored natively in Webflow. The OPEN state ships here: Webflow tree-shakes its published CSS and drops any class only applied at runtime by JS, so the `.is-open` combos postit.js toggles never make it into the Webflow export. Those deltas + the few things Designer can't express live in this block. postit.js reads --duration-m for its exit-timing fallback — keep it equal to the duration below. */ :root { --duration-m: 600ms; } .post-it-dialog[hidden] { display: none; } /* survive a stray Webflow display value */ body.is-postit-open { overflow: hidden; } /* scroll lock — no Designer equivalent */ /* Open state — JS adds `is-open` per part; Webflow won't ship these, so they live here. Base (opacity 0 + rotation) stays native; the backdrop's own transition is native too. */ .container-post-it { transition: opacity var(--duration-m) cubic-bezier(0.16, 1, 0.3, 1); } .post-it-backdrop.is-open, .container-post-it.is-open { opacity: 1; } .sticker-trigger { -webkit-appearance: none; appearance: none; border: 0; background-color: transparent; padding: 0; font: inherit; vertical-align: baseline; cursor: pointer; } @media (prefers-reduced-motion: reduce) { .post-it-backdrop, .container-post-it, .post-it, .post-it-shadow { transition: none; } } /* ------ STANDOUT ------ */ /* .js gives the stage a definite 100svh so the JS-injected ball layer measures non-zero. */ .js .standout-stage { display: grid; place-items: center; height: 100svh; padding-block: 0; overflow: hidden; } .js .standout-scene { grid-area: 1 / 1; z-index: 1; } .js .standout-balls { grid-area: 1 / 1; align-self: stretch; justify-self: stretch; z-index: 2; } .js .standout-balls ~ .standout-scene { z-index: 3; } .standout-ball { position: absolute; top: 0; left: 0; border-radius: 50%; background-color: var(--_color---background--green); } .standout-balls.is-active .standout-ball { will-change: transform; } /* -- Static fallback (.is-static, reduced motion) -- */ .section-standout.is-static .standout-stage { display: flex; flex-direction: column; align-items: center; gap: var(--_spacing---space--l); padding-block: var(--_spacing---space--5xl); height: auto; overflow: visible; } .section-standout.is-static .standout-scene { position: static; grid-area: auto; z-index: auto; } .section-standout.is-static .standout-balls { display: none; } /* ------ TICKER ------ */ .ticker-track { animation: ticker-scroll 45s linear infinite; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } } /* ------ LOGO TICKER ------ */ /* SplideJS marquee (logo-ticker.js + Splide AutoScroll). Logos arrive from the CMS as an uploaded image (Logo field -> ) or a pasted SVG (.svg-code embed). logo-ticker.js EQUAL-AREA-sizes each one inline — width/height in vw on desktop so they scale with the viewport like the type scale, fixed rem ≤600px — so wide, tall and square logos share one visual footprint. These rules center them on a common axis and act as the no-JS / unknown-ratio CONTAIN fallback; the JS clears max-width/height inline, so these rem caps only apply when JS hasn't sized a logo and never fight the (vw) inline size. */ .logo-ticker .splide__slide { display: flex; align-items: center; } .logo-ticker img, .logo-ticker .svg-code svg { display: block; width: auto; height: auto; max-height: 3.25rem; max-width: 11.5rem; } /* ------ SERVICES STACK ------ */ /* Resting overlap is the negative margin below — homepage.js reads --bd-stack-overlap too. */ .services-section[data-bd-stack] { --bd-stack-overlap: 150px; } @media (prefers-reduced-motion: no-preference) { .services-section[data-bd-stack] .service-block { position: relative; padding-bottom: 0; } .services-section[data-bd-stack] .service-block:not(:first-child) { margin-top: calc(-1 * var(--bd-stack-overlap)); } } /* ------ TEAM FLIP ------ */ /* -- Resting tilts — fixed 6-angle cycle keyed to DOM order; repeats for any member count. .team-cell is the Webflow .w-dyn-item (direct grid child), so :nth-child counts true. -- */ .team-cell:nth-child(6n+1) { transform: rotate(-1.5deg); } .team-cell:nth-child(6n+2) { transform: rotate(1.2deg); } .team-cell:nth-child(6n+3) { transform: rotate(-0.8deg); } .team-cell:nth-child(6n+4) { transform: rotate(1.6deg); } .team-cell:nth-child(6n+5) { transform: rotate(-1.2deg); } .team-cell:nth-child(6n) { transform: rotate(0.9deg); } /* -- Flip mechanics (cell owns perspective natively; card owns rotateY) -- */ .team-card { transform-style: preserve-3d; transition: transform 600ms ease; } .team-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .team-face-front { background: var(--_color---background--faded); } .team-face-back { display: grid; padding: var(--_spacing---space--l); background: var(--_color---background--primary); color: var(--_color---text--primary); align-items: center; text-align: center; transform: rotateY(180deg); } .team-photo-hover { aspect-ratio: auto; transition: opacity 220ms ease; } /* Hover-photo reveal on keyboard focus + the active (open) cell — unconditional. */ .team-grid:not(.is-open) .team-card:focus-visible .team-photo-hover, .team-cell.is-active .team-photo-hover { opacity: 1; } /* :hover swap gated to real (mouse) pointers — on touch, a content-revealing hover style makes the first tap land on :hover instead of opening the card (iOS swallows the first tap), so on touch a single tap opens it. */ @media (hover: hover) and (pointer: fine) { .team-grid:not(.is-open) .team-card:hover .team-photo-hover { opacity: 1; } } .team-cell.is-flipped .team-card { transform: rotateY(180deg); } /* -- Back-face content (JS-injected .team-back-* elements) -- */ .team-back-name, .team-back-role, .team-back-fact { margin: 0; } .team-back-name { font-size: var(--_type---size--font-l); font-weight: var(--_type---weight--bold); line-height: var(--_type---line-height--s); text-transform: uppercase; letter-spacing: 0.01em; } .team-back-role { font-size: var(--_type---size--font-m); font-weight: var(--_type---weight--bold); line-height: var(--_type---line-height--s); text-transform: uppercase; } .team-back-fact { font-size: var(--_type---size--font-s); line-height: var(--_type---line-height--m); } .team-back-sticker { display: block; width: 60%; height: auto; margin: auto; aspect-ratio: auto; } /* -- Sticker rotation — fixed 6-angle cycle keyed to the landing cell's DOM order (the slot the sticker flips into); any member count. -- */ .team-cell:nth-child(6n+1) .team-back-sticker { transform: rotate(8deg); } .team-cell:nth-child(6n+2) .team-back-sticker { transform: rotate(-5deg); } .team-cell:nth-child(6n+3) .team-back-sticker { transform: rotate(6deg); } .team-cell:nth-child(6n+4) .team-back-sticker { transform: rotate(-10deg); } .team-cell:nth-child(6n+5) .team-back-sticker { transform: rotate(4deg); } .team-cell:nth-child(6n) .team-back-sticker { transform: rotate(-7deg); } /* -- Slot anchors — homepage.js sets data-anchor-h/-v per landing cell from the live grid geometry (row/col at the current column count), so each cell radiates toward its own outer corner. One rule set covers every breakpoint AND member count (this is why the mobile 2-col override is no longer needed here). -- */ .team-cell[data-anchor-h="left"] .team-face-back { text-align: left; } .team-cell[data-anchor-h="center"] .team-face-back { text-align: center; } .team-cell[data-anchor-h="right"] .team-face-back { text-align: right; } .team-cell[data-anchor-v="start"] .team-face-back { align-items: start; } .team-cell[data-anchor-v="center"] .team-face-back { align-items: center; } .team-cell[data-anchor-v="end"] .team-face-back { align-items: end; } /* -- Close button (active cell) -- */ .team-cell-close { top: var(--_spacing---space--s); right: var(--_spacing---space--s); width: var(--_spacing---space--2xl); height: var(--_spacing---space--2xl); padding: 0; border: 0; border-radius: var(--_border---radius--pill); background: var(--_color---background--accent); color: var(--_color---text--primary); font-size: var(--_type---size--font-l); line-height: 1; cursor: pointer; z-index: 3; } .team-cell.is-active .team-cell-close { display: flex; } /* -- Reduced motion (cross-fade faces instead of 3D flip) -- */ @media (prefers-reduced-motion: reduce) { .team-cell { perspective: none; } .team-card { transform-style: flat; transition: none; } .team-card, .team-cell.is-flipped .team-card { transform: none; } .team-face { backface-visibility: visible; -webkit-backface-visibility: visible; } .team-face-back { transform: none; opacity: 0; transition: opacity 220ms ease; pointer-events: none; } .team-cell.is-flipped .team-face-back { opacity: 1; pointer-events: auto; } .team-cell.is-flipped .team-face-front { opacity: 0; } .team-photo-hover { transition: none; } } /* ------ SCIENCE HERO ------ */ /* Parent-hover cross-fade between the stacked portraits — a parent :hover targeting descendants can't be authored natively. The stacking, sizing and resting opacity states live natively on .skittles-img / .is-default / .is-hover. */ .science-hero-portrait:hover .skittles-img.is-default { opacity: 0; } .science-hero-portrait:hover .skittles-img.is-hover { opacity: 1; } /* ------ SCIENCE BODY ------ */ /* Body copy occupies the right column of the 2-col grid — a child combinator on the shared .block utility can't be native. The tablet collapse is in RESPONSIVE. */ .science-body-grid > .block { grid-column: 2; } /* ------ SIX THINGS ------ */ /* Physics canvas + orbs: the custom props (--six-things-padding read by our-science.js, --orb-size set by it), display:contents, inset, :focus-visible / [data-active] state selectors, and the reduced-motion flex fallback can't be authored natively. The split shell + typography are native classes; only this mechanic ships here. */ .six-things-canvas { --six-things-padding: clamp(var(--_spacing---space--xl), 3vw, var(--_spacing---space--3xl)); list-style: none; margin: 0; position: absolute; inset: 0; overflow: hidden; background: transparent; z-index: 2; margin-block-start: 0; margin-block-end: 0; padding-inline-start: 0; } .six-things-orb-item { display: contents; } .six-things-source { display: none; } .six-things-left-content { position: absolute; top: 3vh; left: 3vh; right: 0; z-index: 1; pointer-events: none; } .science-orb { --orb-size: clamp(3.5rem, 7vw, 6rem); position: absolute; top: 0; left: 0; width: var(--orb-size); height: var(--orb-size); padding: 0; border: 0; border-radius: 999px; background-color: var(--_color---background--secondary); color: var(--_color---text--primary); display: inline-flex; align-items: center; justify-content: center; font-family: var(--_type---family--mona-sans); font-size: calc(var(--orb-size) * 0.55); font-weight: var(--_type---weight--semi-bold); line-height: 1; cursor: grab; touch-action: pan-y; will-change: transform; transition: background-color 180ms ease, color 180ms ease; } .science-orb:active { cursor: grabbing; } .science-orb:focus-visible { outline: 2px solid var(--_color---background--green); outline-offset: 4px; } .science-orb[data-active="true"] { background-color: var(--_color---background--green); color: var(--_color---text--primary); } /* -- Reduced motion (physics skipped by JS; canvas falls back to a flex row) -- */ @media (prefers-reduced-motion: reduce) { .six-things-canvas { position: relative; inset: auto; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--_spacing---space--s); padding: var(--_spacing---space--l); } .six-things-left-content { position: static; pointer-events: auto; } .six-things-orb-item { display: list-item; } .science-orb { position: static; transform: none !important; } } /* ------ LEGAL ------ */ /* The section and any id'd heading inside it clear the 70px sticky .site-nav on deep-link jumps (e.g. /privacy-policy#cookies). Descendant + [id] selector → not natively authorable. */ .legal-section, .legal-section [id] { scroll-margin-top: calc(70px + var(--_spacing---space--l)); } /* ------ RESPONSIVE ------ */ /* -- Buttons (font-size has no Webflow Variable; steps hardcoded) -- */ @media (max-width: 991px) { .button { --button-text-size: 18px; } .button[data-size="small"] { --button-text-size: 14px; } .button[data-size="xsmall"] { --button-text-size: 12px; } } @media (max-width: 767px) { .button { --button-text-size: 16px; } .button[data-size="small"] { --button-text-size: 12px; } .button[data-size="xsmall"] { --button-text-size: 12px; } } /* -- Data-grid named layouts: split | feature | feature-alt | headline | thirds | masthead | spotlight -- */ @media (min-width: 992px) { [data-grid][data-layout="split"] > :nth-child(1) { grid-column: 1 / span 6; } [data-grid][data-layout="split"] > :nth-child(2) { grid-column: 7 / span 6; } [data-grid][data-layout="feature"] > :nth-child(1) { grid-column: 1 / span 4; } [data-grid][data-layout="feature"] > :nth-child(2) { grid-column: 5 / span 8; } [data-grid][data-layout="feature-alt"] > :nth-child(1), [data-grid][data-layout="headline"] > :nth-child(1) { grid-column: 1 / span 8; } [data-grid][data-layout="feature-alt"] > :nth-child(2), [data-grid][data-layout="headline"] > :nth-child(2) { grid-column: 9 / span 4; } [data-grid][data-layout="thirds"] > :nth-child(1) { grid-column: 1 / span 4; } [data-grid][data-layout="thirds"] > :nth-child(2) { grid-column: 5 / span 4; } [data-grid][data-layout="thirds"] > :nth-child(3) { grid-column: 9 / span 4; } [data-grid][data-layout="masthead"] > :nth-child(1), [data-grid][data-layout="spotlight"] > :nth-child(1) { grid-column: 1 / span 3; } [data-grid][data-layout="masthead"] > :nth-child(2), [data-grid][data-layout="spotlight"] > :nth-child(2) { grid-column: 4 / span 6; } [data-grid][data-layout="masthead"] > :nth-child(3), [data-grid][data-layout="spotlight"] > :nth-child(3) { grid-column: 10 / span 3; } } /* -- Data-grid mobile collapse: single column; data-stack-order promotes a child earlier -- */ @media (max-width: 991px) { [data-grid] { grid-template-columns: 1fr; } [data-grid] > [data-stack-order="1"] { order: -3; } [data-grid] > [data-stack-order="2"] { order: -2; } [data-grid] > [data-stack-order="3"] { order: -1; } } /* -- Science body: copy returns to a single column -- */ @media (max-width: 991px) { .science-body-grid > .block { grid-column: auto; } } /* -- Six things: canvas fills the column edge-to-edge; title overlay nudges in -- */ @media (max-width: 991px) { .six-things-canvas { padding: 0; margin: 0; width: 100%; height: 100%; } .six-things-left-content { top: 2vh; left: 5%; } } /* ------ CUSTOM CURSORS ------ */ /* Moved: all cursor CSS now lives in ONE file - assets/css/bd-cursor.css. Native cursors are now bare OS keywords (v4.4 dropped the PNG --cursor-* vars), so the .science-orb above uses a plain `grab` keyword. bd-cursor.css still ships for the JS overlay (data-cursor-replace / -badge). Apply any custom cursor by the data-cursor / data-cursor-* ATTRIBUTE - never a class. */