/* Global */ .text-line-mask { padding-bottom: 0.2em; margin-bottom: -0.2em; } /* before after CSS */ img::selection { background: none; } .splitter-handle__center::after { content: ''; position: absolute; z-index: 1; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100em; opacity: 1; border: 1px solid white; transition: all 0.4s cubic-bezier(0.35, 1, 0.6, 1); } .splitter-handle:hover .splitter-handle__center::after { width: 130%; height: 130%; opacity: 0.5; } /* Buttons */ :root { --button-027-color: #fae6b9; --button-027-color-background: #223f20; --button-027-border: 0; --button-027-hover-color: #223f20; --button-027-hover-color-background: #fae6b9; --button-027-hover-border: 0; --button-027-color-focus: #131313; --button-027-padding: 0.75em 1em; --button-027-border-radius: 1em; --button-027-focus-inset: -0.125em; --button-027-click-scale: 0.955 0.925; --button-027-focus-scale: 1.15; --button-027-ease-click: cubic-bezier(0.4, 0, 0.2, 1); --button-027-ease-hover: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1); --button-027-ease-focus: cubic-bezier(0.32, 0.72, 0, 1); } .button-027 { -webkit-tap-highlight-color: transparent; transition: scale 0.15s var(--button-027-ease-click); } .button-027:is(:focus-visible)::after { box-shadow: 0 0 0 0.125em var(--button-027-color-focus); scale: 1 1; } .button-027:active { scale: var(--button-027-click-scale); } .button-027::after { content: ''; display: block; position: absolute; inset: var(--button-027-focus-inset); border-radius: var(--button-027-border-radius); transition: box-shadow 0.2s var(--button-027-ease-focus), scale 0.75s var(--button-027-ease-hover); scale: var(--button-027-focus-scale); pointer-events: none; z-index: 1; } .button-027__default { transition: translate 0.75s var(--button-027-ease-hover), rotate 0.85s var(--button-027-ease-hover), opacity 0.15s ease-out; } .button-027__hover { transition: translate 0.85s var(--button-027-ease-hover), rotate 0.75s var(--button-027-ease-hover), opacity 0.15s ease-out; opacity: 0; translate: 0 2em -8em; rotate: 1 0 0 -90deg; } .button-027[data-theme='design'] { --button-027-color-background: #fae6b9; --button-027-color: #2f1314; --button-027-hover-color-background: #2f1314; --button-027-hover-color: #fae6b9; } .button-027[data-theme='dev'] { --button-027-color-background: #fae6b9; --button-027-color: #15162c; --button-027-hover-color-background: #6571dc; --button-027-hover-color: #fae6b9; } .button-027[data-theme='transparent'] { --button-027-color-background: transparent; --button-027-color: #fae6b9; --button-027-hover-color-background: transparent; --button-027-hover-color: #fae6b9; --button-027-padding: 0rem; } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .button-027:is(:hover, :focus-visible) .button-027__default, [data-hover]:is(:hover, :focus-visible) .button-027 .button-027__default { translate: 0 -2em -8em; rotate: 1 0 0 90deg; opacity: 0; transition-delay: 0.05s; } .button-027:is(:hover, :focus-visible) .button-027__hover, [data-hover]:is(:hover, :focus-visible) .button-027 .button-027__hover { transition: translate 0.75s 0.05s var(--button-027-ease-hover), rotate 0.85s 0.05s var(--button-027-ease-hover), opacity 0.075s 0.05s ease-in; rotate: 1 0 0 0deg; translate: 0 0 0; opacity: 1; } } /* Cursor */ .cursor { z-index: 25; pointer-events: none; padding-top: 1em; padding-left: .5em; padding-right: 1em; position: fixed; top: 0; left: 0; } .cursor-bubble { opacity: 0; color: #fae6b9; background-color: #223f20; border-radius: 50em; justify-content: center; align-items: center; height: 3.625em; padding-left: 2em; padding-right: 2em; display: flex; position: relative; } .cursor-bubble__text { letter-spacing: -.02em; white-space: nowrap; font-size: 1em; font-weight: 500; } @media (hover: hover) and (pointer: fine) { [data-cursor] .cursor-bubble { transition: transform 0.4s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1); transform: translateX(0%) scale(0.9) rotate(0.001deg); } [data-cursor="active"] .cursor-bubble { opacity: 1; transform: translateX(0%) scale(1) rotate(0.001deg); } [data-cursor="active-edge"] .cursor-bubble { opacity: 1; transform: translateX(-100%) scale(1) rotate(0.001deg); } } @media (hover: none) and (pointer: coarse) { .cursor { display: none; } } /* Nav CSS */ [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 { transition: transform var(--animation-default); transform: translateY(-0.25em) rotate(0.001deg); } .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(0em) rotate(45deg); } [data-nav-status="active"] .twostep-nav__toggle .twostep-nav__toggle-bar:nth-child(2) { transform: translateY(0em) rotate(-45deg); } /* Page dark overlay */ .twostep-nav__bg { 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 { transition: max-width var(--animation-default) 0s; max-width: 100%; } /* Thin line in nav bar */ .twostep-nav__top-line { transition: all var(--animation-default) 0s; opacity: 0; } [data-nav-status="active"] .twostep-nav__top-line { transition: all var(--animation-default) 0.1s; opacity: 1; } @media screen and (max-width: 767px) { .twostep-nav__top-line { inset: auto 1em -0.5em; } [data-nav-status="active"] .twostep-nav__top-line { transition: all var(--animation-default) 0.2s; inset: auto 0em -0.5em; } } /* Nav bar background */ .twostep-nav__bar__bg, [data-nav-status="active"] .twostep-nav__back-bg { transition: background-color var(--animation-ease); } .twostep-nav__back { transition: all var(--animation-default); inset: 0em; } [data-nav-status="active"] .twostep-nav__back { inset: -0.25em; } @media screen and (max-width: 767px) { [data-nav-status="active"] .twostep-nav__back { inset: -1.25em; } } /* Nav bottom */ .twostep-nav__bottom { transition: grid-template-rows var(--animation-default) 0s; } [data-nav-status="active"] .twostep-nav__bottom { transition: grid-template-rows var(--animation-default-long) 0.25s; grid-template-rows: 1fr; } @media screen and (max-width: 767px) { .twostep-nav__bottom { transition: grid-template-rows var(--animation-default) 0s, transform var(--animation-default) 0s; transform: translateY(-0.625em); } [data-nav-status="active"] .twostep-nav__bottom { transition: grid-template-rows var(--animation-default-long) 0.25s, transform var(--animation-default) 0.25s; transform: translateY(0em); } } /* Nav columns reveal */ .twostep-nav__bottom-row>* { transition: all var(--animation-default) 0s; transform: translateY(2em); opacity: 0; } .twostep-nav__bottom-row>*:nth-child(2) { transition-delay: 0.075s; } [data-nav-status="active"] .twostep-nav__bottom-row>* { transition: all var(--animation-default-long) 0.5s; transform: translateY(0em); opacity: 1; } [data-nav-status="active"] .twostep-nav__bottom-row>*:nth-child(2) { transition-delay: 0.575s; } /* Expertise Details component */ /* Max width of expanded pill/content */ [data-feature-pills-init] { --content-item-expanded: 25em; } @media screen and (max-width: 991px) { [data-feature-pills-init] { --content-item-expanded: calc(50% - 0.5em); } } @media screen and (max-width: 767px) { [data-feature-pills-init] { --content-item-expanded: 100%; } } /* Default state + transition */ [data-feature-pills-button] { opacity: 1; transition: opacity 400ms ease-in-out 300ms; } [data-feature-pills-inner] { opacity: 0; transition: opacity 300ms ease-in-out 0ms; } [data-feature-pills-visual] { opacity: 0; transition: opacity 350ms ease-in-out; } [data-feature-pills-cover] { opacity: 1; transition: opacity 350ms ease-in-out; } /* Active Pill */ [data-feature-pills-item][data-active="true"] [data-feature-pills-button] { opacity: 0; transition: opacity 50ms ease-in-out 0ms; } [data-feature-pills-item][data-active="true"] [data-feature-pills-inner] { opacity: 1; } /* Active Visual */ [data-feature-pills-visual][data-active="true"] { opacity: 1; } [data-feature-pills-cover][data-active="false"] { opacity: 0; } /* Close button */ [data-feature-pills-close] { transform: scale(0) rotate(135deg); opacity: 0; pointer-events: none; transition: all 500ms cubic-bezier(.7, 0, .3, 1); } [data-feature-pills-active="true"] [data-feature-pills-close] { transform: scale(1) rotate(45deg); opacity: 1; pointer-events: auto; } /* 'edit' mode where buttons are hidden and inner content is shown */ [data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-collection] { overflow: auto; justify-content: start; } [data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-button] { display: none; } [data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-content] { position: relative; pointer-events: auto; } [data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-inner] { opacity: 1; transform: translate(0px, 0em); } /* Accordion FAQ */ .accordion-css { position: relative; } .accordion-css__list { grid-column-gap: .5em; grid-row-gap: .5em; flex-flow: column; margin-top: 0; margin-bottom: 0; padding-left: 0; display: flex; position: static; } .accordion-css__item { border-radius: .5em; list-style: none; } .accordion-css__item-top { grid-column-gap: 1em; grid-row-gap: 1em; cursor: pointer; justify-content: space-between; align-items: center; padding: 1em 1em 1em 1.5em; display: flex; } .accordion-css__item-bottom { transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1); grid-template-rows: 0fr; display: grid; position: relative; overflow: hidden; } [data-accordion-status="active"] .accordion-css__item-bottom { grid-template-rows: 1fr; } .accordion-css__item-bottom-wrap { flex-flow: column; height: 100000%; display: flex; position: relative; overflow: hidden; } .accordion-css__item-bottom-content { padding-bottom: 1.5em; padding-left: 1.5em; padding-right: 1.5em; } .accordion-css__item-h3 { margin-top: 0; margin-bottom: 0; font-size: 1.125em; font-weight: 500; line-height: 1.3; } .accordion-css__item-icon { transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1); border-radius: 50%; flex-shrink: 0; justify-content: center; align-items: center; width: 2em; height: 2em; display: flex; transform: rotate(180deg); } [data-accordion-status="active"] .accordion-css__item-icon { transform: rotate(0.001deg); } .accordion-css__item-icon-svg { width: 1em; }