/* ========================================================= SYNTHTC GLOBAL CSS ========================================================= */ /* ========================================================= GLOBAL FIXES ========================================================= */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ========================================================= BUNNY BACKGROUND VIDEO ========================================================= */ [data-bunny-background-init] :is(.bunny-bg__placeholder, .bunny-bg__loading) { transition: opacity 0.3s linear, visibility 0.3s linear; } [data-bunny-background-init][data-player-status="playing"] .bunny-bg__placeholder, [data-bunny-background-init][data-player-status="paused"] .bunny-bg__placeholder, [data-bunny-background-init][data-player-activated="true"][data-player-status="ready"] .bunny-bg__placeholder { opacity: 0; visibility: hidden; } [data-bunny-background-init][data-player-status="playing"] .bunny-bg__play-svg, [data-bunny-background-init][data-player-status="loading"] .bunny-bg__play-svg { display: none; } [data-bunny-background-init][data-player-status="playing"] .bunny-bg__pause-svg, [data-bunny-background-init][data-player-status="loading"] .bunny-bg__pause-svg { display: block; } [data-bunny-background-init][data-player-status="loading"] .bunny-bg__loading { opacity: 1; visibility: visible; } /* ========================================================= SCALING NAVIGATION BAR ========================================================= */ [data-twostep-nav] { --cubic-default: cubic-bezier(0.625, 0.05, 0, 1); --animation-ease: 0.2s ease; --duration-default: 0.5s; --duration-default-long: 0.75s; --duration-default-half: 0.25s; --animation-default: var(--duration-default) var(--cubic-default); --animation-default-long: var(--duration-default-long) var(--cubic-default); --animation-default-half: var(--duration-default-half) var(--cubic-default); } /* Menu button */ .twostep-nav__toggle-bar { transform: translateY(-0.25em) rotate(0.001deg); transition: transform var(--animation-default); } .twostep-nav__toggle:hover .twostep-nav__toggle-bar { transform: translateY(0.25em) rotate(0.001deg); } .twostep-nav__toggle .twostep-nav__toggle-bar:nth-child(2) { transform: translateY(0.15em) rotate(0.001deg); } .twostep-nav__toggle:hover .twostep-nav__toggle-bar:nth-child(2) { transform: translateY(-0.15em) rotate(0.001deg); } [data-nav-status="active"] .twostep-nav__toggle .twostep-nav__toggle-bar { transform: translateY(0) rotate(45deg); } [data-nav-status="active"] .twostep-nav__toggle .twostep-nav__toggle-bar:nth-child(2) { transform: translateY(0) rotate(-45deg); } /* Expanded-menu backdrop */ .twostep-nav__bg { visibility: hidden; /* * A near-transparent fill improves backdrop-filter * reliability without visually tinting the page. */ background-color: rgba(0, 0, 0, 0.001) !important; -webkit-backdrop-filter: blur(var(--adp-menu-backdrop-blur)); backdrop-filter: blur(var(--adp-menu-backdrop-blur)); transition: opacity var(--animation-default), visibility var(--animation-default); } [data-nav-status="active"] .twostep-nav__bg { opacity: 1; visibility: visible; } /* Inner bar grow */ .twostep-nav__bar { transition: max-width var(--animation-default-long) 0.2s; } [data-nav-status="active"] .twostep-nav__bar { max-width: 100%; transition: max-width var(--animation-default) 0s; } /* Top line */ .twostep-nav__top-line { opacity: 0; transition: all var(--animation-default) 0s; } [data-nav-status="active"] .twostep-nav__top-line { opacity: 1; transition: all var(--animation-default) 0.1s; } /* Back button */ .twostep-nav__back { inset: 0; transition: all var(--animation-default); } [data-nav-status="active"] .twostep-nav__back { inset: -0.25em; } /* Bottom reveal */ .twostep-nav__bottom { transition: grid-template-rows var(--animation-default) 0s; } [data-nav-status="active"] .twostep-nav__bottom { grid-template-rows: 1fr; transition: grid-template-rows var(--animation-default-long) 0.25s; } /* Column reveal */ .twostep-nav__bottom-row>* { opacity: 0; transform: translateY(2em); transition: all var(--animation-default) 0s; } .twostep-nav__bottom-row>*:nth-child(2) { transition-delay: 0.075s; } [data-nav-status="active"] .twostep-nav__bottom-row>* { opacity: 1; transform: translateY(0); transition: all var(--animation-default-long) 0.5s; } [data-nav-status="active"] .twostep-nav__bottom-row>*:nth-child(2) { transition-delay: 0.575s; } @media screen and (max-width: 767px) { .twostep-nav__top-line { inset: auto 1em -0.5em; } [data-nav-status="active"] .twostep-nav__top-line { inset: auto 0 -0.5em; transition: all var(--animation-default) 0.2s; } [data-nav-status="active"] .twostep-nav__back { inset: -1.25em; } .twostep-nav__bottom { transform: translateY(-0.625em); transition: grid-template-rows var(--animation-default) 0s, transform var(--animation-default) 0s; } [data-nav-status="active"] .twostep-nav__bottom { transform: translateY(0); transition: grid-template-rows var(--animation-default-long) 0.25s, transform var(--animation-default) 0.25s; } } /* ========================================================= COLOUR TOKENS AND THEME MAPPING Webflow palette variables are the source of truth for the actual colours. The hex values below are fallbacks only. This stylesheet maps those colours to semantic Page, Surface and Navigation tokens for each theme state. ========================================================= */ :root { /* Core palette */ --adp-dark: var(--_colour-palette---dark, #38433d); --adp-dark-alt: var(--_colour-palette---dark-alt, #313b36); --adp-light: var(--_colour-palette---light, #e0d9d2); --adp-light-alt: var(--_colour-palette---light-alt, #e5dfd9); --adp-accent: var(--_colour-palette---accent, #d3e059); /* * Compatibility alias for any existing components * still referring to --adp-lime. */ --adp-lime: var(--adp-accent); /* Motion */ --adp-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --adp-dur-fast: 220ms; --adp-dur-slow: 700ms; --adp-menu-backdrop-blur: var(--_glass---nav-menu-backdrop-blur, var(--_glass---glass-blur-2x, 48px)); } @media screen and (max-width: 767px) { :root { --adp-menu-backdrop-blur: var(--_glass---nav-menu-backdrop-blur, var(--_glass---glass-blur-2x, 28px)); } } /* ========================================================= LIGHT THEME — DEFAULT Light page with subtly lighter tonal surfaces ========================================================= */ .page_theme { --page-bg: var(--adp-light); --page-fg: var(--adp-dark); --surface-bg: var(--adp-light-alt); --surface-bg-light: var(--adp-light-alt); --surface-bg-dark: var(--adp-light); --surface-fg: var(--adp-dark); --surface-fg-light: var(--adp-dark); --surface-fg-dark: var(--adp-dark-alt); --nav-bg: var(--adp-dark-alt); --nav-bg-light: var(--adp-dark); --nav-bg-dark: var(--adp-dark-alt); --nav-fg: var(--adp-light); --nav-fg-light: var(--adp-light-alt); --nav-fg-dark: var(--adp-light); --tone-strong: var(--page-fg); --tone-medium: color-mix(in oklab, var(--page-fg) 72%, transparent); --tone-subtle: color-mix(in oklab, var(--page-fg) 52%, transparent); --tone-faint: color-mix(in oklab, var(--page-fg) 32%, transparent); /* Webflow semantic-token bridge */ --_colour-palette---color-tokens--surface-bg-base: var(--surface-bg); --_colour-palette---color-tokens--surface-bg-light: var(--surface-bg-light); --_colour-palette---color-tokens--surface-bg-dark: var(--surface-bg-dark); --_colour-palette---color-tokens--surface-fg-base: var(--surface-fg); --_colour-palette---color-tokens--surface-fg-light: var(--surface-fg-light); --_colour-palette---color-tokens--surface-fg-dark: var(--surface-fg-dark); --_colour-palette---color-tokens--nav-bg-light: var(--nav-bg-light); --_colour-palette---color-tokens--nav-bg: var(--nav-bg); --_colour-palette---color-tokens--nav-bg-dark: var(--nav-bg-dark); --_colour-palette---color-tokens--nav-fg-light: var(--nav-fg-light); --_colour-palette---color-tokens--nav-fg: var(--nav-fg); --_colour-palette---color-tokens--nav-fg-dark: var(--nav-fg-dark); --_colour-palette---color-tokens--page-bg: var(--page-bg); --_colour-palette---color-tokens--page-fg: var(--page-fg); color: var(--page-fg); transition: color var(--adp-dur-slow) var(--adp-ease); } /* ========================================================= DARK THEME Dark page with subtly lighter tonal surfaces ========================================================= */ .page_theme.is-dark { --page-bg: var(--adp-dark); --page-fg: var(--adp-light); --surface-bg: var(--adp-dark-alt); --surface-bg-light: var(--adp-dark); --surface-bg-dark: var(--adp-dark-alt); --surface-fg: var(--adp-light); --surface-fg-light: var(--adp-light-alt); --surface-fg-dark: var(--adp-light); --nav-bg: var(--adp-light-alt); --nav-bg-light: var(--adp-light-alt); --nav-bg-dark: var(--adp-light); --nav-fg: var(--adp-dark); --nav-fg-light: var(--adp-dark); --nav-fg-dark: var(--adp-dark-alt); --tone-strong: var(--page-fg); --tone-medium: color-mix(in oklab, var(--page-fg) 75%, transparent); --tone-subtle: color-mix(in oklab, var(--page-fg) 55%, transparent); --tone-faint: color-mix(in oklab, var(--page-fg) 35%, transparent); color: var(--page-fg); } /* ========================================================= PAGE BACKGROUND ========================================================= */ .page-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-color: var(--page-bg); transition: background-color var(--adp-dur-slow) var(--adp-ease); will-change: background-color; } .page-content { position: relative; z-index: 1; } :where(.dark_section, .light_section) { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ========================================================= PAGE TEXT ========================================================= */ .page_theme :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, small, [class*="heading-style-"]):not(.tone-strong):not(.tone-medium):not(.tone-subtle):not(.tone-faint) { color: inherit !important; } .page_theme .w-richtext, .page_theme .w-richtext :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, small, span, strong, em) { color: inherit !important; } .page_theme .tone-strong { color: var(--tone-strong) !important; } .page_theme .tone-medium { color: var(--tone-medium) !important; } .page_theme .tone-subtle { color: var(--tone-subtle) !important; } .page_theme .tone-faint { color: var(--tone-faint) !important; } /* ========================================================= TONAL SURFACES ========================================================= */ :where(.c-surface) { --tone-strong: var(--surface-fg); --tone-medium: color-mix(in oklab, var(--surface-fg) 72%, transparent); --tone-subtle: color-mix(in oklab, var(--surface-fg) 52%, transparent); --tone-faint: color-mix(in oklab, var(--surface-fg) 32%, transparent); background-color: var(--surface-bg); color: var(--surface-fg); transition: background-color var(--adp-dur-slow) var(--adp-ease), color var(--adp-dur-slow) var(--adp-ease); } .c-surface :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, small, span, strong, em, a) { color: inherit; } /* ========================================================= NAVIGATION COLOUR SYSTEM ========================================================= */ .nav__container, [data-twostep-nav] { color: var(--nav-fg) !important; background: transparent !important; background-color: transparent !important; transition: color var(--adp-dur-slow) var(--adp-ease); } /* * The navigation is now a solid inverse surface. * There is no blur on the navigation itself. */ .nav__menu, .twostep-nav__bar__bg, .twostep-nav__back-bg { background-color: var(--nav-bg) !important; color: var(--nav-fg); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: background-color var(--adp-dur-slow) var(--adp-ease), color var(--adp-dur-slow) var(--adp-ease); } .nav__container a, .nav__container .nav__label, .nav__menu a { color: inherit; } [data-twostep-nav] .twostep-nav__bottom, [data-twostep-nav] .twostep-nav__info { color: var(--nav-fg) !important; } [data-twostep-nav] :is(.twostep-nav__bottom, .twostep-nav__info) a { color: inherit; } [data-twostep-nav] .nav__home, [data-twostep-nav] .twostep-nav__toggle { color: var(--nav-fg) !important; } [data-twostep-nav] .twostep-nav__toggle-bar, [data-twostep-nav] .twostep-nav__top-line { background-color: currentColor !important; } .nav__container svg, .nav__container svg * { stroke: currentColor !important; fill: currentColor !important; } .nav__home svg, .nav__home svg * { fill: currentColor !important; stroke: none !important; } .nav-arrow svg, .nav-arrow svg * { fill: none !important; stroke: currentColor !important; } .nav__startup-wrapper:hover { color: var(--adp-accent); } /* ========================================================= REMOVE LEGACY GLASS-CORNER EFFECT ========================================================= */ .u-glass-corner { position: relative; overflow: hidden; } .u-glass-corner::before, .u-glass-corner::after { content: none !important; display: none !important; } /* ========================================================= ACCORDION ========================================================= */ .accordion-css__item-bottom { transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-accordion-status="active"] .accordion-css__item-bottom { grid-template-rows: 1fr; } .accordion-css__item-icon { transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-accordion-status="active"] .accordion-css__item-icon { transform: rotate(0.001deg); } /* ========================================================= KNOWLEDGE ACCORDION The Webflow component owns its classes and visual design. Slater owns only the open/closed interaction state. ========================================================= */ .w-mod-js [data-accordion-css-init] .expandable-bottom { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; pointer-events: none; visibility: hidden; transition: max-height 0.6s cubic-bezier(0.625, 0.05, 0, 1), margin-top 0.6s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.2s ease, visibility 0s linear 0.6s; } .w-mod-js [data-accordion-css-init] [data-accordion-status="active"] .expandable-bottom { max-height: 48rem; margin-top: 24px; opacity: 1; pointer-events: auto; visibility: visible; transition: max-height 0.6s cubic-bezier(0.625, 0.05, 0, 1), margin-top 0.6s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.2s ease 0.08s, visibility 0s linear; } [data-accordion-css-init] .c-cross__animated-box { transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-accordion-css-init] [data-accordion-status="active"] .c-cross__animated-box { transform: rotate(45deg); } @media (prefers-reduced-motion: reduce) { [data-accordion-css-init] .expandable-bottom, [data-accordion-css-init] .c-cross__animated-box { transition-duration: 0.01ms; } } /* ========================================================= KNOWLEDGE SEARCH RESULTS ========================================================= */ .knowledge-results-preview .knowledge-result-row { flex: 0 0 auto; width: 100%; box-sizing: border-box; } .knowledge-results-preview [data-knowledge-field="category"] { display: none; }