.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
} @media(hover: hover) {
body.modal--open,
body.offside-js--is-open {
overflow-y: hidden;
padding-right: 8px;
touch-action: none;
}
body.modal--open dialog {
left: calc(50% - 4px);
}
body.modal--open .cta,
body.offside-js--is-open .cta  {
padding-right: 8px;
}
body.modal--open .header,
body.offside-js--is-open .header {
padding-right: 8px;
}
}
@media (hover: none) {
body.modal--open,
body.offside-js--is-open {
overflow-y: hidden;
}
}
body {
--color: var(--main);
}
.title {
font-size: var(--h2-size);
line-height: var(--h2-line-height);
margin-bottom: 16px;
}
@media(max-width: 1000px) {
h1 {
font-size: var(--h2-size);
line-height: var(--h2-line-height);
}
}
.container {
max-width: 960px;
padding: 0 10px;
margin: auto;
width: 100%;
}
.btn {
display: block;
width: fit-content;
}
.btn__inner {
width: fit-content;
display: flex;
gap: 4px;
align-items: center;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
padding: 8px 14px;
color: var(--main);
background-color: var(--main-bg);
border: 2px solid var(--main-bg);
border-radius: 8px;
transition: transform 250ms;
font-weight: 600;
min-height: 44px;
will-change: transform, opacity;
}
@media(hover: hover) {
.btn:hover .btn__inner {
transform: translateY(-4px);
transition: transform 125ms;
}
}
.btn--white .btn__inner {
color: var(--neutral-600);
background-color: #fff;
border-color: #fff;
font-weight: 600;
}
.btn--white .btn__inner svg {
color: var(--neutral-600);
}
.btn--subtle .btn__inner {
color: var(--neutral-700);
background: var(--gradient-subtle);
border: none;
}
.btn__inner svg {
flex-shrink: 0;
}
.btn_arrow {
display: block;
width: fit-content;
}
.btn_arrow__inner {
display: flex;
align-items: center;
gap: 4px;
width: fit-content;
padding: 10px;
margin: -10px;
transition: 250ms;
}
.btn_arrow span {
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
color: var(--neutral-700);
font-weight: 600;
}
@media(hover: hover) {
.btn_arrow:hover .btn_arrow__inner {
transform: translateX(4px);
transition: 125ms;
}
}
.content a {
text-decoration: underline;
color: currentColor;
}
.badge {
color: var(--neutral-600);
font-weight: 600;
background-color: var(--neutral-100);
border-radius: 6px;
padding: 1px 8px;
width: fit-content;
}
span.emblem {
display: block;
width: fit-content;
background-color: #fff;
font-size: calc(12 / 16 * 1rem);
line-height: 16px;
font-weight: 600;
color: var(--neutral-700);
padding: 4px 9px;
border-radius: 60px;
}
.page404 {
margin-top: 60px;
}
.page404 > div {
padding: 60px;
border-radius: 6px;
box-shadow: var(--box-shadow-warm);
background: var(--gradient-subtle);
}
.page404 a {
margin-top: 16px;
}
.iframe {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.iframe iframe {
width: 100%;
height: 100%;
border: 0;
}
dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 24px;
box-shadow: var(--box-shadow-next);
border: none;
overflow: visible;
max-width: min(calc(100% - 20px), 960px);
width: 100%;
padding: 0;
}
dialog::backdrop {
background-color: var(--neutral-700);
opacity: .8;
}
.modal__container {
max-height: 700px;
padding: 20px;
padding-bottom: 28px;
overflow-y: auto;
}
.modal__container:has(> .modal__content:only-child > p:only-child > iframe:only-child) {
padding: 0;
}
.modal__container--overflow {
border-radius: 24px 1px 1px 24px;
}
.modal__content iframe {
border-radius: 12px;
}
.close-modal {
position: absolute;
top: -26px;
right: 16px;
}
.close-modal__inner {
color: #fff;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
display: flex;
align-items: center;
gap: 4px;
padding: 10px;
margin: -10px;
transition: 250ms;
}
@media(hover: hover) {
.close-modal:hover .close-modal__inner {
transform: translateX(4px);
transition: 125ms;
}
}
@media(max-width: 1000px) {
dialog {
margin-left: unset;
}
}
@media(max-width: 500px) {
.modal__container {
max-height: 600px;
}
.modal__container--overflow {
border-radius: 24px;
}
} ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
summary::-webkit-details-marker {
display: none;
}
@media(max-width: 1000px) {
.btn--white .btn__inner {
box-shadow: var(--box-shadow-warm);
}
.page404 > div {
border-radius: 0;
}
} .blocks > section {
overflow-x: clip;
scroll-margin-top: 80px;
}
.single .blocks {
margin-top: 60px;
}
.content__container {
padding-top: 60px;
padding-bottom: 70px;
}
[data-type='dark'] .content__container .prose {
color: #fff;
} .header {
display: flex;
flex-direction: column;
flex-shrink: 0;
box-shadow: var(--box-shadow-warm);
position: fixed;
width: 100%;
z-index: 3;
background-color: #fff;
height: auto;
}
.header__container {
height: 80px;
width: 100%;
display: flex;
gap: 8px;
align-items: center;
}
.header__contact {
display: flex;
height: 40px;
background-color: #f3f3f3;
border-bottom: 1px solid #dfdfdf;
}
.header__contact_container {
display: flex;
gap: 24px;
}
.header__contact_container a {
display: flex;
gap: 4px;
align-items: center;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
color: var(--neutral-600);
}
.header__contact_container svg {
max-width: 18px;
}
.header__logo_placeholder {
margin-right: auto;
}
.header__logo {
margin-right: auto;
}
.header__logo img {
object-fit: contain;
}
.header__logo_placeholder {
font-size: var(--h2-size);
line-height: var(--h2-line-height);
color: var(--neutral-700);
}
.header__menu {
display: flex;
flex-wrap: wrap;
position: relative;
margin-right: 8px;
}
.header__menu li {
position: relative;
}
.header__menu li a {
display: inline-block;
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
color: var(--neutral-700);
padding: 11px 12px 12px;
border-radius: 6px;
}
.header__menu li a:has(~ .sub-menu) {
padding-right: 20px;
}
.header__menu li a:has(~ .sub-menu):after {
content: '';
border-style: solid;
border-color: var(--neutral-600);
border-width: 1px 1px 0 0;
content: '';
display: inline-block;
height: 6px;
left: 8px;
position: relative;
top: 6px;
transform: rotate(135deg);
vertical-align: top;
width: 6px;
}
.header__menu li a:hover {
color: var(--neutral-900);
background-color: var(--neutral-100);
}
.header__menu li .sub-menu {
background-color: #fff;
padding: 4px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
border-radius: 6px;
box-shadow: var(--box-shadow-next);
opacity: 0;
transform: translateY(4px);
transition: 125ms;
}
.header__menu li:hover > .sub-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: 125ms;
}
.header__menu .sub-menu a {
width: 100%;
white-space: nowrap;
}
.header__buttons {
display: flex;
gap: 8px;
margin-right: 8px;
}
.header__search {
padding: 8px;
border-radius: 8px;
}
body:has(.header__contact) .sidebar__open {
margin-right: -12px;
}
body:has(.header__contact) .blocks {
margin-top: 40px;
}
@media(hover: hover) {
.header__search:hover {
background-color: var(--neutral-100);
}
.header__contact_container a:hover {
color: var(--neutral-900);
}
}
@media(max-width: 1000px) {
.header__contact {
display: none;
}
body:has(.header__contact) .blocks {
margin-top: unset;
}
}
@media(max-width: 1000px) {
.header__logo img {
max-width: 160px;
}
.header__menu {
display: none;
}
.header__buttons {
display: none;
}
} .sidebar {
background-color: #fff;
display: none;
}
.sidebar.is-open {
display: initial;
z-index: 99999;
}
.sidebar__button {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
}
.sidebar__button:hover {
background-color: var(--neutral-100);
}
.sidebar__button:focus {
background: transparent;
}
.sidebar__button svg {
flex-shrink: 0;
}
.sidebar__menu {
margin-top: 50px;
}
.sidebar__menu_close {
position: absolute;
top: 4px;
right: 4px;
padding: 10px;
background: transparent;
border-radius: 50%;
}
.sidebar__menu_close:hover {
background: var(--neutral-100);
}
.sidebar__link {
display: flex;
align-items: center;
color: var(--neutral-500);
padding: 7px 24px 8px;
border-bottom: 1px solid var(--neutral-100);
position: relative;
}
.sub-menu .sidebar__link {
font-size: calc(14 / 16 * 1rem);
line-height: 20px;
padding: 7px 40px 8px;
}
.sidebar__link:hover {
background-color: var(--neutral-100);
color: var(--neutral-600);
}
.color .sidebar__link {
background-color: var(--color);
color: #fff;
}
.current-menu-item>.sidebar__link::before {
content: '';
display: block;
height: 100%;
width: 4px;
background: var(--main);
position: absolute;
left: 0;
}
.overlay {
background-color: transparent;
position: fixed;
inset: 0;
z-index: 3;
opacity: 0;
visibility: hidden;
transition: 250ms;
}
.offside-js--is-open .overlay {
background-color: var(--neutral-700);
opacity: .8;
visibility: visible;
transition: 125ms;
} .footer {
margin-top: 60px;
padding-top: 32px;
padding-bottom: 70px;
}
.footer__social_container {
border-bottom: 1px solid var(--neutral-200);
padding-bottom: 24px;
display: flex;
gap: 16px;
}
.footer__social_title {
display: block;
font-size: calc(18 / 16 * 1rem);
}
.footer__social {
display: flex;
gap: 16px;
}
.footer__social svg {
color: var(--neutral-700);
}
.footer__cards {
margin: 40px 0;
}
.footer .cards_1__item {
flex-basis: 450px;
}
.footer__cards li {
width: fit-content;
}
.footer__cards .cards_1__item a {
text-decoration: unset;
}
.footer__cards .cards_1__content {
margin-top: 16px;
}
.footer__credits {
padding-top: 60px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px 40px;
}
.footer__credits > span {
color: var(--neutral-600);
font-size: calc(14 / 16 * 1rem);
}
.footer .developer {
margin-left: auto;
}
.footer .developer a {
color: var(--neutral-600);
}
.footer .developer a:hover {
text-decoration: underline;
}
@media(min-width: 1001px) {
.footer__social a>svg {
transition: transform 250ms;
}
@media(hover: hover) {
.footer__social a:hover>svg {
transform: translateY(-4px);
transition: transform 125ms;
}
}
}
@media(max-width: 1000px) {
.footer__social_container {
flex-direction: column;
align-items: center;
}
.footer .cards_1__item {
flex-basis: unset;
justify-items: center;
}
.footer__credits {
flex-direction: column;
align-items: center;
}
.footer .developer {
margin-left: unset;
}
} .animate {
position: relative;
}
.animate::before {
content: '';
background-color: var(--neutral-50);
position: absolute;
inset: 0;
}
.viewport .animate::before {
animation: hide forwards;
animation-delay: 1100ms; pointer-events: none;
}
.animate::after {
content: '';
inset: 0;
position: absolute;
width: 0%;
height: 100%;
background-color: var(--neutral-300);
}
.viewport .animate::after {
animation: reveal 1000ms forwards;
animation-delay: 600ms;
}
@keyframes reveal {
0% {
left: 0;
width: 0%;
}
50% {
left: 0;
width: calc(100% + 1px);
}
100% {
left: calc(100% + 1px);
width: 0;
}
}
@media(max-width: 1000px) {
@keyframes reveal {
0% {
left: 0;
width: 0%;
}
50% {
left: 0;
width: 100%;
}
100% {
left: 100%;
width: 0;
}
}
}
@keyframes hide {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes shimmer {
100% {
transform: translate(100%);
}
}
.show > * {
opacity: 0;
}
.viewport .show > * {
animation: show 300ms forwards;
--base-delay: 300ms;
}
.viewport .show > *:first-child {
animation-delay: var(--base-delay);
}
.viewport .show > *:nth-child(2) {
animation-delay: calc(var(--base-delay) + 300ms * 1);
}
.viewport .show > *:nth-child(3) {
animation-delay: calc(var(--base-delay) + 300ms * 2);
}
.viewport .show > *:nth-child(4) {
animation-delay: calc(var(--base-delay) + 300ms * 3);
}
.viewport .show > *:nth-child(5) {
animation-delay: calc(var(--base-delay) + 300ms * 4);
}
.viewport .show > *:nth-child(6) {
animation-delay: calc(var(--base-delay) + 300ms * 5);
}
.viewport .show > *:nth-child(7) {
animation-delay: calc(var(--base-delay) + 300ms * 6);
}
.viewport .show > *:nth-child(8) {
animation-delay: calc(var(--base-delay) + 300ms * 7);
}
.viewport .show > *:nth-child(9) {
animation-delay: calc(var(--base-delay) + 300ms * 8);
}
.viewport .show > *:nth-child(10) {
animation-delay: calc(var(--base-delay) + 300ms * 9);
}
.viewport .show > *:nth-child(11) {
animation-delay: calc(var(--base-delay) + 300ms * 10);
}
.viewport .show > *:nth-child(12) {
animation-delay: calc(var(--base-delay) + 300ms * 11);
}
.viewport .show > *:nth-child(13) {
animation-delay: calc(var(--base-delay) + 300ms * 12);
}
.viewport .show > *:nth-child(14) {
animation-delay: calc(var(--base-delay) + 300ms * 13);
}
.viewport .show > *:nth-child(15) {
animation-delay: calc(var(--base-delay) + 300ms * 14);
}
.viewport .show > *:nth-child(16) {
animation-delay: calc(var(--base-delay) + 300ms * 15);
}
.viewport .show > *:nth-child(17) {
animation-delay: calc(var(--base-delay) + 300ms * 16);
}
.viewport .show > *:nth-child(18) {
animation-delay: calc(var(--base-delay) + 300ms * 17);
}
.viewport .show > *:nth-child(19) {
animation-delay: calc(var(--base-delay) + 300ms * 18);
}
.viewport .show > *:nth-child(20) {
animation-delay: calc(var(--base-delay) + 300ms * 19);
}
.viewport .show > *:nth-child(21) {
animation-delay: calc(var(--base-delay) + 300ms * 20);
}
.viewport .show > *:nth-child(22) {
animation-delay: calc(var(--base-delay) + 300ms * 21);
}
.viewport .show > *:nth-child(23) {
animation-delay: calc(var(--base-delay) + 300ms * 22);
}
.viewport .show > *:nth-child(24) {
animation-delay: calc(var(--base-delay) + 300ms * 23);
}
.viewport .show > *:nth-child(25) {
animation-delay: calc(var(--base-delay) + 300ms * 24);
}
.viewport .show > *:nth-child(26) {
animation-delay: calc(var(--base-delay) + 300ms * 25);
}
.viewport .show > *:nth-child(27) {
animation-delay: calc(var(--base-delay) + 300ms * 26);
}
.viewport .show > *:nth-child(28) {
animation-delay: calc(var(--base-delay) + 300ms * 27);
}
.viewport .show > *:nth-child(29) {
animation-delay: calc(var(--base-delay) + 300ms * 28);
}
.viewport .show > *:nth-child(30) {
animation-delay: calc(var(--base-delay) + 300ms * 29);
}
.viewport .show > *:nth-child(31) {
animation-delay: calc(var(--base-delay) + 300ms * 30);
}
.viewport .show > *:nth-child(32) {
animation-delay: calc(var(--base-delay) + 300ms * 31);
}
.viewport .show > *:nth-child(33) {
animation-delay: calc(var(--base-delay) + 300ms * 32);
}
.viewport .show > *:nth-child(34) {
animation-delay: calc(var(--base-delay) + 300ms * 33);
}
.viewport .show > *:nth-child(35) {
animation-delay: calc(var(--base-delay) + 300ms * 34);
}
.viewport .show > *:nth-child(36) {
animation-delay: calc(var(--base-delay) + 300ms * 35);
}
.viewport .show > *:nth-child(37) {
animation-delay: calc(var(--base-delay) + 300ms * 36);
}
.viewport .show > *:nth-child(38) {
animation-delay: calc(var(--base-delay) + 300ms * 37);
}
.viewport .show > *:nth-child(39) {
animation-delay: calc(var(--base-delay) + 300ms * 38);
}
.viewport .show > *:nth-child(40) {
animation-delay: calc(var(--base-delay) + 300ms * 39);
}
.viewport .show > *:nth-child(41) {
animation-delay: calc(var(--base-delay) + 300ms * 40);
}
.viewport .show > *:nth-child(42) {
animation-delay: calc(var(--base-delay) + 300ms * 41);
}
.viewport .show > *:nth-child(43) {
animation-delay: calc(var(--base-delay) + 300ms * 42);
}
.viewport .show > *:nth-child(44) {
animation-delay: calc(var(--base-delay) + 300ms * 43);
}
.viewport .show > *:nth-child(45) {
animation-delay: calc(var(--base-delay) + 300ms * 44);
}
.viewport .show > *:nth-child(46) {
animation-delay: calc(var(--base-delay) + 300ms * 45);
}
.viewport .show > *:nth-child(47) {
animation-delay: calc(var(--base-delay) + 300ms * 46);
}
.viewport .show > *:nth-child(48) {
animation-delay: calc(var(--base-delay) + 300ms * 47);
}
.viewport .show > *:nth-child(49) {
animation-delay: calc(var(--base-delay) + 300ms * 48);
}
.viewport .show > *:nth-child(50) {
animation-delay: calc(var(--base-delay) + 300ms * 49);
}
@keyframes show {
from {
opacity: 0;
transform: translateY(8px);
}
to {
visibility: visible;
opacity: 1;
}
}
@keyframes reveal_left {
0% {
opacity: 0;
transform: translate(-8px);
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
100% {
opacity: 1;
transform: translate(0);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
} .underline {
background-image: linear-gradient(to right, rgba(255, 235, 59, 0.4) 50%, transparent 50%);
background-size: 200% 100%;
background-position: 100% 0;
animation: highlight 1000ms forwards;
animation-delay: 500ms;
}
@keyframes highlight {
to {
background-position: 0 0;
}
} .no-animation *:not(.sidebar__link),
.no-animation *:not(.sidebar__link)::before,
.no-animation *:not(.sidebar__link)::after {
transition: none !important;
scale: none !important;
animation: none !important;
opacity: 1 !important;
}
.no-animation *:not(.sidebar__link)::before {
content: unset !important;
animation: unset !important;
}
.no-animation *::after {
animation: unset !important;
}
.no-animation .viewport .show > * {
opacity: 1;
}
.no-animation .btn:hover .btn__inner {
transform: none !important;
}
.no-animation .overlay {
opacity: .8 !important;
}
.no-animation .cta {
opacity: 1 !important;
visibility: visible !important;
}