/* ========================================================= tk 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; } /* ========================================================= 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-olive: var( --_colour-palette---olive-green, #38433d ); --adp-olive-dark: var( --_colour-palette---olive-dark, #313b36 ); --adp-linen: var( --_colour-palette---linen, #e0d9d2 ); --adp-linen-light: var( --_colour-palette---linen-light, #e5dfd9 ); --adp-accent: var( --_colour-palette---accent, #d3e059 ); /* * Temporary 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; /* * Uses the renamed Webflow variable where available. * It also supports the old variable name as a fallback. */ --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 Linen page with subtly lighter tonal surfaces ========================================================= */ .page_theme { --page-bg: var(--adp-linen); --page-fg: var(--adp-olive); --surface-bg: var(--adp-linen-light); --surface-bg-light: var(--adp-linen-light); --surface-bg-dark: var(--adp-linen); --surface-fg: var(--adp-olive); --surface-fg-light: var(--adp-olive); --surface-fg-dark: var(--adp-olive-dark); --nav-bg: var(--adp-olive-dark); --nav-bg-light: var(--adp-olive); --nav-bg-dark: var(--adp-olive-dark); --nav-fg: var(--adp-linen); --nav-fg-light: var(--adp-linen-light); --nav-fg-dark: var(--adp-linen); --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 Olive page with subtly darker tonal surfaces ========================================================= */ .page_theme.is-dark { --page-bg: var(--adp-olive); --page-fg: var(--adp-linen); --surface-bg: var(--adp-olive-dark); --surface-bg-light: var(--adp-olive); --surface-bg-dark: var(--adp-olive-dark); --surface-fg: var(--adp-linen); --surface-fg-light: var(--adp-linen-light); --surface-fg-dark: var(--adp-linen); --nav-bg: var(--adp-linen-light); --nav-bg-light: var(--adp-linen-light); --nav-bg-dark: var(--adp-linen); --nav-fg: var(--adp-olive); --nav-fg-light: var(--adp-olive); --nav-fg-dark: var(--adp-olive-dark); --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); }