/* ========================================================= HQ GLOBAL CSS ========================================================= */ /* ========================================================= GLOBAL FIXES ========================================================= */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ========================================================= BUNNY BACKGROUND VIDEO ========================================================= */ /* Animation */ [data-bunny-background-init] :is(.bunny-bg__placeholder, .bunny-bg__loading) { transition: opacity 0.3s linear, visibility 0.3s linear; } /* Placeholder */ [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; } /* Play/Pause */ [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; } /* Loading */ [data-bunny-background-init][data-player-status="loading"] .bunny-bg__loading { opacity: 1; visibility: visible; } /* ========================================================= HQ FORM VALIDATION ========================================================= */ /* Field: Error state */ [data-validate].is--error input, [data-validate].is--error textarea, [data-validate].is--error select { border-color: #ff4c24; } [data-validate].is--error .form-field-icon.is--error, [data-validate].is--error .radiocheck-field-icon.is--error { opacity: 1; } /* Field: Success state */ [data-validate].is--success .form-field-icon.is--success, [data-validate].is--success .radiocheck-field-icon.is--success { opacity: 1; } /* Custom radio / checkbox focus + checked states */ [data-form-validate] .radiocheck-field input:focus-visible ~ .radiocheck-custom { background-color: #d0cfcd; color: #e2e1df; } [data-form-validate] .radiocheck-field input:focus-visible:checked ~ .radiocheck-custom, [data-form-validate] .radiocheck-field input:checked ~ .radiocheck-custom { background-color: #131313; color: #efeeec; } [data-form-validate] .radiocheck-field .radiocheck-label.is--small { margin-top: 0.125em; } /* Error state for custom radio/checkbox */ [data-validate].is--error .radiocheck-custom { border-color: #ff4c24; } [data-validate].is--error input:checked ~ .radiocheck-custom { border-color: #131313; } /* Select placeholder styling */ [data-form-validate] select:has(option[value=""]:checked) { color: rgba(19, 19, 19, 0.3); } /* ========================================================= 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); } /* Overlay */ .twostep-nav__bg { visibility: hidden; 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 background */ .twostep-nav__bar__bg, [data-nav-status="active"] .twostep-nav__back-bg { transition: background-color var(--animation-ease); } .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 THEME SWITCHING ========================================================= */ :root { /* Palette */ --p-midnight: var(--_colour-palette---midnight-blue); --p-hqblue: var(--_colour-palette---hq-blue); --p-alloy: var(--_colour-palette---alloy-grey); --p-accent: var(--_colour-palette---hq-accent); /* Glass */ --glass-dark: var(--_glass---glass-bg-dark); --glass-light: var(--_glass---glass-bg-white); /* Motion */ --hq-ease: cubic-bezier(.22, .61, .36, 1); --hq-dur-fast: 220ms; --hq-dur-slow: 700ms; --hq-blur: 18px; } .page_theme { --page-bg: var(--p-alloy); --surface-bg: var(--glass-light); --surface-fg: var(--p-midnight); --nav-bg: var(--glass-light); --nav-fg: var(--p-midnight); --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); --nav-bg-light: color-mix(in oklab, var(--nav-bg) 82%, var(--glass-light)); --nav-bg-dark: color-mix(in oklab, var(--nav-bg) 82%, var(--glass-dark)); --nav-fg-light: var(--nav-fg); --nav-fg-dark: color-mix(in oklab, var(--nav-fg) 62%, transparent); --surface-bg-light: color-mix(in oklab, var(--surface-bg) 82%, var(--glass-light)); --surface-bg-dark: color-mix(in oklab, var(--surface-bg) 82%, var(--glass-dark)); --surface-fg-light: var(--surface-fg); --surface-fg-dark: color-mix(in oklab, var(--surface-fg) 62%, transparent); /* Webflow alias 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--page-bg: var(--page-bg); color: var(--surface-fg); } .page_theme.is-dark { --page-bg: var(--p-midnight); --surface-bg: var(--glass-dark); --surface-fg: var(--p-alloy); --nav-bg: var(--glass-dark); --nav-fg: var(--p-alloy); --tone-strong: var(--surface-fg); --tone-medium: color-mix(in oklab, var(--surface-fg) 75%, transparent); --tone-subtle: color-mix(in oklab, var(--surface-fg) 55%, transparent); --tone-faint: color-mix(in oklab, var(--surface-fg) 35%, transparent); --surface-bg-light: color-mix(in oklab, var(--surface-bg) 55%, var(--glass-light)); --surface-bg-dark: color-mix(in oklab, var(--surface-bg) 70%, var(--glass-dark)); --nav-bg-light: color-mix(in oklab, var(--nav-bg) 55%, var(--glass-light)); --nav-bg-dark: color-mix(in oklab, var(--nav-bg) 70%, var(--glass-dark)); color: var(--surface-fg); } /* Fixed page background */ .page-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-color: var(--page-bg); transition: background-color var(--hq-dur-slow) var(--hq-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; } /* Text inheritance */ .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; } /* Themeable surfaces */ :where(.c-surface) { background-color: var(--surface-bg); color: var(--surface-fg); transition: background-color var(--hq-dur-slow) var(--hq-ease); } /* Nav */ .nav__container { color: var(--nav-fg) !important; background: transparent !important; background-color: transparent !important; transition: color var(--hq-dur-fast) var(--hq-ease); } .nav__menu { color: inherit; background-color: var(--nav-bg) !important; -webkit-backdrop-filter: blur(var(--hq-blur)); backdrop-filter: blur(var(--hq-blur)); transition: background-color var(--hq-dur-fast) var(--hq-ease), color var(--hq-dur-fast) var(--hq-ease); } .nav__menu *, .nav__menu a { background: transparent !important; background-color: transparent !important; } .nav__container a, .nav__container .nav__label { color: inherit; } .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(--p-accent); } /* ========================================================= GLASS UI CORNER HIGHLIGHTS ========================================================= */ .u-glass-corner { position: relative; isolation: isolate; overflow: hidden; --stroke-w: 1px; --stroke-tl-a: 0.55; --stroke-br-a: 0.18; --stroke-mid-a: 0; } @supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) { .u-glass-corner { border: 1px solid rgba(255, 255, 255, 0.14); } } @supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) { .u-glass-corner::before, .u-glass-corner::after { content: ""; position: absolute; inset: 0; z-index: 0; padding: var(--stroke-w); border-radius: inherit; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .u-glass-corner::before { background: radial-gradient( 140% 140% at 0% 0%, rgba(255, 255, 255, var(--stroke-tl-a)) 0%, rgba(255, 255, 255, 0.14) 22%, rgba(255, 255, 255, var(--stroke-mid-a)) 58% ); } .u-glass-corner::after { background: radial-gradient( 140% 140% at 100% 100%, rgba(255, 255, 255, var(--stroke-br-a)) 0%, rgba(255, 255, 255, 0.06) 26%, rgba(255, 255, 255, var(--stroke-mid-a)) 62% ); } .u-glass-corner > :not(.u-hover-layer__bg) { position: relative; z-index: 1; } } /* ========================================================= 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); }