.tdh {
--tdh-bg1: var(--toscano-brand-deep, #032d35);
--tdh-bg2: #004451;
--tdh-accent: #2fc4c7;
--tdh-btn: var(--toscano-brand-teal, #009a9d);
--tdh-white: #ffffff;
--tdh-sc: .86; --tdh-max: 1248px;
--tdh-gutter: 24px;
--tdh-top: 80px;
--tdh-bottom: 96px;
--tdh-gap: 64px;
position: relative;
isolation: isolate;
box-sizing: border-box;
width: 100%;
overflow: hidden;
padding: var(--tdh-top) 0 var(--tdh-bottom);
background: linear-gradient(127deg, var(--tdh-bg1) 0%, var(--tdh-bg2) 100%);
color: var(--tdh-white);
font-family: "Inter", sans-serif;
-webkit-font-smoothing: antialiased;
word-break: break-word;
}
.tdh *,
.tdh *::before,
.tdh *::after {
box-sizing: border-box;
} .tdh.tdh--full {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc(100vh - var(--tdh-offset, 0px));
min-height: calc(100svh - var(--tdh-offset, 0px));
}
.tdh.tdh--full .tdh__inner {
width: 100%;
}
.tdh.tdh--full[style*="--tdh-fit"] {
--tdh-sc: var(--tdh-fit);
}
.tdh.tdh--fit-hide .tdh__visual {
display: none;
}
.tdh.tdh--fit-hide .tdh__inner {
grid-template-columns: minmax(0, 1fr);
} .tdh.tdh--grid::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 64px 64px,
linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 64px 64px;
pointer-events: none;
} .tdh .tdh__fx {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.2s ease;
pointer-events: none;
}
.tdh.tdh--gl .tdh__fx {
opacity: 1;
}
.tdh .tdh__glow {
position: absolute;
top: 6%;
right: -6%;
z-index: -1;
width: 54vw;
max-width: 900px;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(47, 196, 199, .26), transparent);
pointer-events: none;
}
.tdh a:focus-visible,
.tdh button:focus-visible {
outline: 2px solid var(--tdh-accent);
outline-offset: 3px;
}
.tdh .tdh__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) calc(720px * var(--tdh-sc));
gap: var(--tdh-gap);
align-items: center;
max-width: var(--tdh-max);
margin: 0 auto;
padding: 0 var(--tdh-gutter);
}
.tdh.tdh--novisual .tdh__inner {
grid-template-columns: minmax(0, 760px);
} .tdh .tdh__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
min-width: 0;
max-width: 620px;
}
.tdh .tdh__content > * {
animation: tdh-up .8s cubic-bezier(.2, .7, .2, 1) both;
}
.tdh .tdh__content > :nth-child(2) { animation-delay: .06s; }
.tdh .tdh__content > :nth-child(3) { animation-delay: .12s; }
.tdh .tdh__content > :nth-child(4) { animation-delay: .18s; }
.tdh .tdh__content > :nth-child(5) { animation-delay: .24s; }
.tdh .tdh__content > :nth-child(6) { animation-delay: .3s; }
@keyframes tdh-up {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: none; }
}
.tdh .tdh__crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: -4px;
font-size: 13px;
line-height: 18px;
color: rgba(255, 255, 255, .45);
}
.tdh .tdh__crumbs a {
color: rgba(255, 255, 255, .6);
text-decoration: none;
transition: color .2s ease;
}
.tdh .tdh__crumbs a:hover {
color: #ffffff;
}
.tdh .tdh__crumb-current {
color: var(--tdh-accent);
}
.tdh .tdh__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 -6px;
color: var(--tdh-accent);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .08em;
text-transform: uppercase;
}
.tdh .tdh__eyebrow svg {
width: 11px;
height: 16px;
} .tdh .tdh__title {
margin: 0;
font-family: "Inter", sans-serif;
font-size: 58px;
font-weight: 600;
line-height: 1.06;
letter-spacing: 0;
text-transform: none;
color: #ffffff;
}
.tdh .tdh__hl {
background: linear-gradient(100deg, var(--tdh-accent) 0%, var(--tdh-accent) 40%, #b8f1f2 50%, var(--tdh-accent) 60%, var(--tdh-accent) 100%);
background-size: 250% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: tdh-shine 2.4s .9s ease-in-out both;
}
@keyframes tdh-shine {
from { background-position: 100% 0; }
to { background-position: 0% 0; }
}
.tdh .tdh__text {
margin: 0;
max-width: 560px;
font-size: 17px;
line-height: 1.6;
color: rgba(255, 255, 255, .75);
} .tdh .tdh__search {
position: relative;
z-index: 5; display: flex;
align-items: center;
width: 100%;
max-width: 600px;
height: 60px;
margin: 6px 0 0;
padding: 6px 6px 6px 54px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .35);
}
.tdh .tdh__sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.tdh .tdh__search-ico {
position: absolute;
top: 50%;
left: 22px;
width: 18px;
height: 18px;
margin-top: -9px;
color: #8a9699;
}
.tdh .tdh__search input[type="search"] {
flex: 1 1 auto;
min-width: 0;
height: 100%;
margin: 0;
padding: 0 12px 0 0;
border: 0;
background: transparent;
color: var(--tdh-bg1);
font: 400 16px/1 "Inter", sans-serif;
box-shadow: none;
outline: none;
-webkit-appearance: none;
appearance: none;
}
.tdh .tdh__search input[type="search"]::placeholder {
color: #8a9699;
}
.tdh .tdh__search input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.tdh .tdh__search button {
flex: 0 0 auto;
height: 48px;
padding: 0 24px;
border: 0;
border-radius: 999px;
background: var(--tdh-btn);
color: #ffffff;
font: 700 15px/1 "Inter", sans-serif;
letter-spacing: normal;
text-transform: none;
cursor: pointer;
transition: background-color .2s ease, box-shadow .2s ease;
}
.tdh .tdh__search button:hover {
background: var(--tdh-bg2);
box-shadow: 0 0 0 1px var(--tdh-accent) inset;
}
.tdh .tdh__search:focus-within {
box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .35), 0 0 0 4px rgba(47, 196, 199, .35);
} .tdh .tdh__results {
position: absolute;
top: calc(100% + 10px);
left: 0;
right: 0;
z-index: 20;
max-height: 340px;
margin: 0;
padding: 8px;
overflow-y: auto;
list-style: none;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .4);
animation: tdh-drop .2s ease both;
}
@keyframes tdh-drop {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
.tdh .tdh__results[hidden] {
display: none;
}
.tdh .tdh__results li {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 10px 12px;
border-radius: 12px;
color: var(--tdh-bg1);
font-size: 15px;
line-height: 1.35;
cursor: pointer;
}
.tdh .tdh__results li[aria-selected="true"],
.tdh .tdh__results li:hover {
background: #eef7f7;
}
.tdh .tdh__results mark {
padding: 0;
background: none;
color: var(--toscano-text-accent, #007b7e);
font-weight: 700;
}
.tdh .tdh__rtype {
flex: 0 0 auto;
min-width: 44px;
padding: 3px 8px;
border-radius: 6px;
background: #eef7f7;
color: var(--toscano-text-accent, #007b7e);
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-align: center;
text-transform: uppercase;
}
.tdh .tdh__rctx {
margin-left: auto;
padding-left: 10px;
color: #8a9699;
font-size: 12px;
white-space: nowrap;
}
.tdh .tdh__results .tdh__rnone {
color: #8a9699;
cursor: default;
}
.tdh .tdh__results .tdh__rnone:hover {
background: none;
} .tdh-found {
animation: tdh-found 1.8s ease both;
}
@keyframes tdh-found {
0%, 100% { box-shadow: 0 0 0 0 rgba(47, 196, 199, 0); }
20%, 60% { box-shadow: 0 0 0 4px rgba(47, 196, 199, .55); }
} .tdh .tdh__tiles {
display: grid;
grid-template-columns: repeat(var(--tdh-tiles, 3), minmax(0, 1fr));
gap: 14px;
width: 100%;
max-width: 600px;
margin-top: 4px;
}
.tdh .tdh__tile {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
padding: 18px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 16px;
background: rgba(255, 255, 255, .06);
color: #ffffff;
text-decoration: none;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.tdh a.tdh__tile:hover,
.tdh a.tdh__tile:focus-visible {
transform: translateY(-3px);
border-color: rgba(47, 196, 199, .6);
background: rgba(47, 196, 199, .12);
}
.tdh .tdh__tile-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.tdh .tdh__tile-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(47, 196, 199, .16);
color: var(--tdh-accent);
}
.tdh .tdh__tile-ico svg {
width: 19px;
height: 19px;
}
.tdh .tdh__tile-arrow {
width: 16px;
height: 16px;
color: rgba(255, 255, 255, .6);
transition: transform .3s ease, color .3s ease;
}
.tdh a.tdh__tile:hover .tdh__tile-arrow {
transform: translateX(4px);
color: var(--tdh-accent);
}
.tdh .tdh__tile-title {
font-size: 17px;
font-weight: 600;
line-height: 1.25;
}
.tdh .tdh__tile-sub {
margin-top: -10px;
color: rgba(255, 255, 255, .6);
font-size: 13px;
line-height: 1.35;
} .tdh .tdh__visual {
position: relative;
width: calc(720px * var(--tdh-sc));
height: calc(640px * var(--tdh-sc));
}
.tdh .tdh__stage {
position: absolute;
top: 0;
left: 0;
width: 720px;
height: 640px;
transform: scale(var(--tdh-sc));
transform-origin: 0 0;
}
.tdh .tdh__circuit {
position: absolute;
inset: 0;
width: 720px;
height: 640px;
overflow: visible;
transform: translate(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 4px));
transition: transform .6s cubic-bezier(.2, .7, .2, 1);
} .tdh .tdh__trace {
fill: none;
stroke: rgba(255, 255, 255, .18);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 400;
stroke-dashoffset: 0;
animation: tdh-draw 1.1s cubic-bezier(.4, 0, .2, 1) backwards;
animation-delay: .5s;
}
@keyframes tdh-draw {
from { stroke-dashoffset: 400; }
to { stroke-dashoffset: 0; }
} .tdh .tdh__pulse {
fill: none;
stroke: var(--c, var(--tdh-accent));
stroke-width: 3.2;
stroke-linecap: round;
stroke-dasharray: 14 86;
stroke-dashoffset: 14;
opacity: 0;
animation: tdh-pulse 2.6s cubic-bezier(.5, 0, .75, .4) infinite;
animation-delay: calc(1.4s + var(--k) * .43s);
}
@keyframes tdh-pulse {
0% { stroke-dashoffset: 14; opacity: 0; }
8% { opacity: 1; }
70% { stroke-dashoffset: -86; opacity: 1; }
71%, 100% { stroke-dashoffset: -86; opacity: 0; }
}
.tdh .tdh__pad {
fill: var(--tdh-bg1);
stroke: rgba(255, 255, 255, .45);
stroke-width: 2;
} .tdh .tdh__core {
animation: tdh-pop .7s .2s cubic-bezier(.3, 1.4, .5, 1) backwards;
transform-box: fill-box;
transform-origin: center;
}
.tdh .tdh__ripple {
fill: none;
stroke: var(--tdh-accent);
stroke-width: 2;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
animation: tdh-ripple 2.6s 1.2s ease-out infinite;
}
.tdh .tdh__ripple--2 {
animation-delay: 2.5s;
}
@keyframes tdh-ripple {
0% { opacity: .55; transform: scale(1); }
100% { opacity: 0; transform: scale(2.1); }
}
.tdh .tdh__ring-a {
fill: none;
stroke: rgba(255, 255, 255, .28);
stroke-width: 1.5;
stroke-dasharray: 3 9;
transform-box: fill-box;
transform-origin: center;
animation: tdh-spin 40s linear infinite;
}
@keyframes tdh-spin {
to { transform: rotate(360deg); }
}
.tdh .tdh__ring-b {
fill: rgba(47, 196, 199, .08);
stroke: var(--tdh-accent);
stroke-width: 2;
} .tdh .tdh__ring-glow {
fill: none;
stroke: var(--tdh-accent);
stroke-width: 14;
opacity: .14;
animation: tdh-breathe 2.6s 1.2s ease-in-out infinite;
}
@keyframes tdh-breathe {
0%, 100% { opacity: .1; }
45% { opacity: .32; }
}
.tdh .tdh__core-ico {
color: var(--tdh-btn);
} .tdh .tdh__node {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
width: 200px;
height: 68px;
padding: 12px 14px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 14px;
background: rgba(6, 42, 50, .78);
color: #ffffff;
text-decoration: none;
box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .6);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transform: translate(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 11px));
transition: transform .6s cubic-bezier(.2, .7, .2, 1), border-color .3s ease, background-color .3s ease;
animation: tdh-node .7s cubic-bezier(.2, .7, .2, 1) backwards, tdh-bob 6s ease-in-out infinite;
animation-delay: calc(.35s + var(--k) * .1s), calc(1.2s + var(--k) * .7s);
}
@keyframes tdh-node {
from { opacity: 0; scale: .85; }
to { opacity: 1; scale: 1; }
}
@keyframes tdh-bob {
0%, 100% { translate: 0 0; }
50% { translate: 0 -6px; }
}
.tdh .tdh__node--s0 { left: 30px; top: 50px; }
.tdh .tdh__node--s1 { left: 490px; top: 40px; }
.tdh .tdh__node--s2 { left: 0; top: 286px; }
.tdh .tdh__node--s3 { left: 520px; top: 286px; }
.tdh .tdh__node--s4 { left: 40px; top: 540px; }
.tdh .tdh__node--s5 { left: 480px; top: 540px; }
.tdh a.tdh__node:hover,
.tdh a.tdh__node:focus-visible {
border-color: var(--tdh-accent);
background: rgba(8, 60, 70, .9);
}
.tdh .tdh__node.is-featured {
border-color: transparent;
background: #ffffff;
color: var(--tdh-bg1);
box-shadow: 0 22px 40px -14px rgba(0, 0, 0, .55), 0 0 0 4px rgba(47, 196, 199, .18);
}
.tdh a.tdh__node.is-featured:hover {
background: #ffffff;
box-shadow: 0 22px 40px -14px rgba(0, 0, 0, .55), 0 0 0 3px var(--tdh-accent);
}
.tdh .tdh__node-ico {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 11px;
background: color-mix(in srgb, var(--c) 22%, transparent);
color: color-mix(in srgb, var(--c) 70%, #ffffff);
}
.tdh .tdh__node.is-featured .tdh__node-ico {
background: color-mix(in srgb, var(--c) 14%, #ffffff);
color: var(--c);
}
.tdh .tdh__node-ico svg {
width: 20px;
height: 20px;
}
.tdh .tdh__node-ico b {
font-size: 11px;
font-weight: 800;
letter-spacing: .03em;
}
.tdh .tdh__node-txt {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tdh .tdh__node-name {
overflow: hidden;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
text-overflow: ellipsis;
}
.tdh .tdh__node-meta {
overflow: hidden;
color: rgba(255, 255, 255, .6);
font-size: 12.5px;
line-height: 1.3;
white-space: nowrap;
text-overflow: ellipsis;
}
.tdh .tdh__node.is-featured .tdh__node-meta {
color: #6f6f6f;
}
@keyframes tdh-pop {
from { opacity: 0; transform: scale(.6); }
to { opacity: 1; transform: none; }
} @media (max-width: 1199px) {
.tdh {
--tdh-sc: .72;
--tdh-gap: 40px;
}
.tdh .tdh__title {
font-size: 50px;
}
}
@media (max-width: 1024px) {
.tdh {
--tdh-sc: .9;
--tdh-top: 64px;
--tdh-bottom: 72px;
}
.tdh .tdh__inner {
grid-template-columns: minmax(0, 1fr);
}
.tdh .tdh__content {
max-width: 680px;
}
.tdh .tdh__visual {
justify-self: center;
}
.tdh .tdh__glow {
top: auto;
bottom: -10%;
right: -20%;
width: 90vw;
}
}
@media (max-width: 860px) {
.tdh {
--tdh-sc: .8;
}
} @media (max-width: 767px) {
.tdh {
--tdh-sc: .8;
--tdh-gutter: 16px;
--tdh-top: 44px;
--tdh-bottom: 56px;
}
.tdh .tdh__content {
gap: 20px;
}
.tdh .tdh__title {
font-size: 38px;
line-height: 1.08;
}
.tdh .tdh__text {
font-size: 16px;
}
.tdh .tdh__search {
height: 54px;
padding-left: 46px;
}
.tdh .tdh__search-ico {
left: 18px;
}
.tdh .tdh__search button {
height: 42px;
padding: 0 18px;
}
.tdh .tdh__rctx {
display: none;
}
.tdh .tdh__visual {
width: calc(440px * var(--tdh-sc));
height: calc(610px * var(--tdh-sc));
margin-top: calc(-10px * var(--tdh-sc));
}
.tdh .tdh__stage {
left: calc(-140px * var(--tdh-sc));
top: calc(-20px * var(--tdh-sc));
}
.tdh .tdh__node {
justify-content: center;
width: 64px;
height: 64px;
padding: 0;
border-radius: 18px;
}
.tdh .tdh__node-txt {
display: none;
}
.tdh .tdh__node-ico {
width: 44px;
height: 44px;
}
.tdh .tdh__node--s0 { left: 166px; top: 52px; }
.tdh .tdh__node--s1 { left: 490px; top: 42px; }
.tdh .tdh__node--s2 { left: 136px; top: 288px; }
.tdh .tdh__node--s3 { left: 520px; top: 288px; }
.tdh .tdh__node--s4 { left: 176px; top: 542px; }
.tdh .tdh__node--s5 { left: 480px; top: 542px; } .tdh .tdh__tiles {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.tdh .tdh__tile {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "ico title arrow" "ico sub arrow";
align-items: center;
gap: 2px 14px;
padding: 14px 16px;
}
.tdh .tdh__tile-top {
display: contents;
}
.tdh .tdh__tile-ico {
grid-area: ico;
}
.tdh .tdh__tile-arrow {
grid-area: arrow;
}
.tdh .tdh__tile-title {
grid-area: title;
font-size: 16px;
}
.tdh .tdh__tile-sub {
grid-area: sub;
margin-top: 0;
}
}
@media (max-width: 380px) {
.tdh {
--tdh-sc: .74;
}
} @media (max-height: 800px) and (min-width: 1025px) {
.tdh.tdh--full {
--tdh-top: 40px;
--tdh-bottom: 48px;
}
.tdh.tdh--full .tdh__content {
gap: 18px;
}
.tdh.tdh--full .tdh__title {
font-size: 46px;
}
.tdh.tdh--full .tdh__text {
font-size: 16px;
}
.tdh.tdh--full .tdh__search {
height: 54px;
}
.tdh.tdh--full .tdh__search button {
height: 42px;
}
.tdh.tdh--full .tdh__tile {
gap: 10px;
padding: 14px 16px;
}
}
@media (max-height: 640px) and (min-width: 1025px) {
.tdh.tdh--full .tdh__title {
font-size: 40px;
}
.tdh.tdh--full .tdh__crumbs {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.tdh .tdh__content > *,
.tdh .tdh__hl,
.tdh .tdh__trace,
.tdh .tdh__pulse,
.tdh .tdh__core,
.tdh .tdh__ripple,
.tdh .tdh__ring-a,
.tdh .tdh__ring-glow,
.tdh .tdh__node {
animation: none;
}
.tdh .tdh__hl {
background-position: 0 0;
}
.tdh .tdh__pulse {
opacity: 0;
}
}.tfm {
--tfm-bg: #f6fafa;
--tfm-accent: var(--toscano-brand-teal, #009a9d);
--tfm-accent-2: #2fc4c7;
--tfm-deep: var(--toscano-brand-deep, #032d35);
--tfm-title: var(--tfm-deep);
--tfm-highlight: var(--tfm-accent);
--tfm-text: #6f6f6f;
--tfm-card: #ffffff;
--tfm-field: #f7fbfb;
--tfm-border: #dfe9eb;
--tfm-error: #d93a3a;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 110px 0;
overflow: hidden;
background:
radial-gradient(60% 70% at 100% 50%, color-mix(in srgb, var(--tfm-accent) 10%, transparent) 0%, transparent 70%),
linear-gradient(rgba(3, 45, 53, .035) 1px, transparent 1px) 0 0 / 48px 48px,
linear-gradient(90deg, rgba(3, 45, 53, .035) 1px, transparent 1px) 0 0 / 48px 48px,
var(--tfm-bg);
color: var(--tfm-text);
font-family: "Inter", sans-serif;
-webkit-font-smoothing: antialiased;
word-break: break-word;
}
.tfm *,
.tfm *::before,
.tfm *::after {
box-sizing: border-box;
}
.tfm .tfm__inner {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(40px, 6vw, 88px);
align-items: center;
max-width: 1248px;
margin: 0 auto;
padding: 0 24px;
} .tfm .tfm__eyebrow {
margin: 0 0 12px;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .06em;
text-transform: uppercase;
color: #6f6f6f;
}
.tfm .tfm__title {
margin: 0;
font-family: "Inter", sans-serif;
font-size: 39px;
font-weight: 400;
line-height: 1.15;
letter-spacing: 0;
text-transform: none;
color: var(--tfm-title);
}
.tfm .tfm__hl {
color: var(--tfm-highlight);
}
.tfm .tfm__text {
margin: 16px 0 0;
font-size: 16px;
line-height: 1.59;
}
.tfm .tfm__benefits {
display: grid;
gap: 18px;
margin: 36px 0 0;
padding: 0;
list-style: none;
}
.tfm .tfm__benefits li {
display: flex;
align-items: flex-start;
gap: 14px;
margin: 0;
font-size: 15px;
line-height: 1.55;
}
.tfm .tfm__benefits strong {
font-weight: 700;
color: var(--tfm-title);
}
.tfm .tfm__tick {
flex: 0 0 24px;
margin-top: 0;
}
.tfm .tfm__tick svg {
display: block;
}
.tfm .tfm__tick-bg {
fill: #e0f4f4;
}
.tfm .tfm__tick-path {
stroke: var(--tfm-accent);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
} .tfm .tfm__direct {
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid var(--tfm-border);
}
.tfm .tfm__direct-title {
margin: 0 0 14px;
font-size: 14px;
font-weight: 700;
color: var(--tfm-title);
}
.tfm .tfm__direct-items {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.tfm a.tfm__direct-item {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 18px 12px 12px;
border: 1px solid var(--tfm-border);
border-radius: 12px;
background: #ffffff;
color: var(--tfm-title);
font-size: 15px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.tfm a.tfm__direct-item small {
display: block;
margin-bottom: 3px;
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--tfm-text);
}
.tfm a.tfm__direct-item:hover {
border-color: color-mix(in srgb, var(--tfm-accent) 45%, var(--tfm-border));
box-shadow: 0 10px 24px -12px rgba(3, 45, 53, .25);
color: var(--tfm-title);
transform: translateY(-2px);
}
.tfm .tfm__direct-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: #e0f4f4;
color: var(--tfm-accent);
}
.tfm .tfm__hours {
display: flex;
align-items: center;
gap: 8px;
margin: 14px 0 0;
font-size: 13px;
}
.tfm .tfm__dot {
position: relative;
width: 8px;
height: 8px;
border-radius: 50%;
background: #3cc38a;
}
.tfm .tfm__dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: #3cc38a;
animation: tfm-ping 2s ease-out infinite;
}
@keyframes tfm-ping {
0% { opacity: .7; transform: scale(1); }
100% { opacity: 0; transform: scale(2.8); }
} .tfm .tfm__card {
position: relative;
padding: 40px 40px 34px;
overflow: hidden;
border: 1px solid var(--tfm-border);
border-radius: 18px;
background: var(--tfm-card);
box-shadow: 0 30px 70px -30px rgba(3, 45, 53, .28);
}
.tfm .tfm__edge {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--tfm-accent), var(--tfm-accent-2), #ffffff, var(--tfm-accent-2), var(--tfm-accent));
background-size: 300% 100%;
animation: tfm-edge 4s linear infinite;
}
@keyframes tfm-edge {
to { background-position: -300% 0; }
}
.tfm .tfm__form-title {
margin: 0 0 26px;
font-family: "Inter", sans-serif;
font-size: 28px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
color: var(--tfm-title);
}
.tfm .tfm__hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
.tfm .tfm__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-bottom: 14px;
}
.tfm .tfm__grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tfm .tfm__grid--3.tfm__grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
} .tfm .tfm__field {
position: relative;
}
.tfm .tfm__input {
display: block;
width: 100%;
height: 58px;
margin: 0;
padding: 24px 16px 8px;
border: 1px solid var(--tfm-border);
border-radius: 10px;
background: var(--tfm-field);
box-shadow: none;
color: var(--tfm-title);
font-family: "Inter", sans-serif;
font-size: 15px;
line-height: 1.4;
outline: none;
-webkit-appearance: none;
appearance: none;
transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.tfm textarea.tfm__input {
height: auto;
min-height: 128px;
padding-top: 28px;
resize: vertical;
}
.tfm select.tfm__input {
padding-right: 38px;
cursor: pointer;
}
.tfm .tfm__input:hover {
border-color: color-mix(in srgb, var(--tfm-accent) 35%, var(--tfm-border));
}
.tfm .tfm__input:focus {
border-color: var(--tfm-accent);
background: #ffffff;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--tfm-accent) 12%, transparent);
}
.tfm .tfm__label {
position: absolute;
top: 19px;
left: 17px;
right: 12px;
overflow: hidden;
color: var(--tfm-text);
font-size: 15px;
line-height: 1.3;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
transform-origin: 0 0;
transition: transform .22s ease, color .22s ease;
}
.tfm .tfm__label span {
color: var(--tfm-accent);
} .tfm .tfm__input:focus + .tfm__label,
.tfm .tfm__input:not(:placeholder-shown) + .tfm__label,
.tfm .tfm__field--select.has-value .tfm__label,
.tfm select.tfm__input:focus + .tfm__label {
color: var(--tfm-accent);
transform: translateY(-10px) scale(.78);
}
.tfm .tfm__line {
position: absolute;
left: 10px;
right: 10px;
bottom: 0;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--tfm-accent), var(--tfm-accent-2));
box-shadow: 0 0 8px var(--tfm-accent-2);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform .45s cubic-bezier(.2, .7, .2, 1);
pointer-events: none;
}
.tfm .tfm__input:focus ~ .tfm__line {
transform: scaleX(1);
}
.tfm .tfm__caret {
position: absolute;
top: 23px;
right: 16px;
color: var(--tfm-text);
pointer-events: none;
}
.tfm .tfm__field--area {
margin-top: 4px;
}
.tfm .tfm__hint {
display: block;
margin: 8px 2px 0;
font-size: 12px;
line-height: 1.5;
color: color-mix(in srgb, var(--tfm-text) 85%, transparent);
} .tfm .tfm__err {
display: block;
min-height: 0;
margin: 0 2px;
font-size: 12px;
line-height: 1.4;
color: var(--tfm-error);
}
.tfm .tfm__err:not(:empty) {
margin-top: 6px;
}
.tfm .is-invalid .tfm__input {
border-color: var(--tfm-error);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--tfm-error) 10%, transparent);
animation: tfm-shake .35s ease;
}
@keyframes tfm-shake {
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
} .tfm .tfm__chips-set {
min-width: 0;
margin: 20px 0 0;
padding: 0;
border: 0;
}
.tfm .tfm__legend {
margin: 0 0 10px;
padding: 0;
font-size: 13px;
font-weight: 700;
color: var(--tfm-title);
}
.tfm .tfm__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tfm .tfm__chip {
position: relative;
margin: 0;
cursor: pointer;
}
.tfm .tfm__chip input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tfm .tfm__chip span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 1px solid var(--tfm-border);
border-radius: 999px;
background: var(--tfm-field);
color: var(--tfm-title);
font-size: 14px;
font-weight: 600;
line-height: 1;
transition: border-color .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.tfm .tfm__chip:hover span {
border-color: color-mix(in srgb, var(--tfm-accent) 45%, var(--tfm-border));
}
.tfm .tfm__chip input:checked + span {
border-color: var(--tfm-accent);
background: var(--tfm-accent);
color: #ffffff;
box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--tfm-accent) 70%, transparent);
}
.tfm .tfm__chip input:focus-visible + span {
outline: 2px solid var(--tfm-accent);
outline-offset: 2px;
}
.tfm .tfm__chip:active span {
transform: scale(.96);
} .tfm .tfm__chip--brand i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
transition: background-color .25s ease, box-shadow .25s ease;
}
.tfm .tfm__chip--brand input:checked + span {
border-color: var(--c);
background: color-mix(in srgb, var(--c) 10%, #ffffff);
color: var(--c);
box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--c) 70%, transparent);
}
.tfm .tfm__chip--brand input:checked + span i {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), 0 0 8px var(--c);
} .tfm .tfm__check {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
margin: 22px 0 0;
font-size: 13px;
line-height: 1.5;
cursor: pointer;
}
.tfm .tfm__check input {
position: absolute;
opacity: 0;
}
.tfm .tfm__box {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 20px;
width: 20px;
height: 20px;
margin-top: 1px;
border: 1.5px solid color-mix(in srgb, var(--tfm-text) 60%, transparent);
border-radius: 5px;
background: #ffffff;
color: #ffffff;
transition: background-color .2s ease, border-color .2s ease;
}
.tfm .tfm__box svg {
opacity: 0;
transform: scale(.5);
transition: opacity .2s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.tfm .tfm__check input:checked + .tfm__box {
border-color: var(--tfm-accent);
background: var(--tfm-accent);
}
.tfm .tfm__check input:checked + .tfm__box svg {
opacity: 1;
transform: none;
}
.tfm .tfm__check input:focus-visible + .tfm__box {
outline: 2px solid var(--tfm-accent);
outline-offset: 2px;
}
.tfm .tfm__check-text {
flex: 1 1 0;
min-width: 0;
}
.tfm .tfm__check-text a {
color: var(--tfm-accent);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.tfm .tfm__check .tfm__err {
flex: 0 0 100%;
margin-left: 32px;
}
.tfm .tfm__check.is-invalid .tfm__box {
border-color: var(--tfm-error);
animation: tfm-shake .35s ease;
} .tfm button.tfm__submit {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 56px;
margin: 24px 0 0;
padding: 0 28px;
overflow: hidden;
border: 0;
border-radius: 8px;
background: var(--tfm-accent);
box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--tfm-accent) 80%, transparent);
color: #ffffff;
font-family: "Inter", sans-serif;
font-size: 15px;
font-weight: 700;
line-height: 1;
letter-spacing: normal;
text-transform: none;
cursor: pointer;
transition: background-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.tfm button.tfm__submit::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -40%;
width: 30%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
transform: skewX(-18deg);
transition: left .7s ease;
}
.tfm button.tfm__submit:hover {
background: var(--toscano-text-accent, #007b7e);
color: #ffffff;
box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--tfm-accent) 90%, transparent);
}
.tfm button.tfm__submit:hover::before {
left: 120%;
}
.tfm button.tfm__submit:active {
transform: scale(.99);
}
.tfm button.tfm__submit:focus-visible {
outline: 2px solid var(--tfm-accent);
outline-offset: 3px;
}
.tfm .tfm__bolt {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linejoin: round;
}
.tfm button.tfm__submit:hover .tfm__bolt {
fill: currentColor;
}
.tfm .tfm__form.is-sending button.tfm__submit {
cursor: progress;
pointer-events: none;
}
.tfm .tfm__form.is-sending .tfm__bolt {
fill: none;
stroke-dasharray: 1;
animation: tfm-charge .9s ease-in-out infinite;
}
@keyframes tfm-charge {
0% { stroke-dashoffset: 1; fill-opacity: 0; }
60% { stroke-dashoffset: 0; fill: currentColor; fill-opacity: 0; }
100% { stroke-dashoffset: 0; fill: currentColor; fill-opacity: 1; }
}
.tfm .tfm__status {
margin: 12px 0 0;
min-height: 0;
font-size: 13px;
line-height: 1.5;
text-align: center;
color: var(--tfm-error);
}
.tfm .tfm__status:empty {
margin: 0;
} .tfm .tfm__done {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 420px;
padding: 20px;
text-align: center;
}
.tfm .tfm__done[hidden] {
display: none;
}
.tfm .tfm__done-ring,
.tfm .tfm__done-tick {
stroke: var(--tfm-accent);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.tfm .tfm__done.is-in .tfm__done-ring {
animation: tfm-draw .8s ease forwards;
filter: drop-shadow(0 0 6px var(--tfm-accent-2));
}
.tfm .tfm__done.is-in .tfm__done-tick {
animation: tfm-draw .45s ease .65s forwards;
}
@keyframes tfm-draw {
to { stroke-dashoffset: 0; }
}
.tfm .tfm__done-text {
max-width: 380px;
margin: 22px 0 0;
font-size: 18px;
line-height: 1.5;
color: var(--tfm-title);
}
.tfm button.tfm__again {
margin-top: 22px;
padding: 10px 18px;
border: 1px solid var(--tfm-border);
border-radius: 6px;
background: transparent;
color: var(--tfm-accent);
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
cursor: pointer;
}
.tfm button.tfm__again:hover {
border-color: var(--tfm-accent);
background: transparent;
color: var(--tfm-accent);
} .tfm.tfm--js .tfm__aside > *,
.tfm.tfm--js .tfm__card {
opacity: 0;
transform: translateY(24px);
}
.tfm.tfm--js.is-in .tfm__aside > *,
.tfm.tfm--js.is-in .tfm__card {
opacity: 1;
transform: none;
transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.tfm.tfm--js.is-in .tfm__aside > :nth-child(2) { transition-delay: .08s; }
.tfm.tfm--js.is-in .tfm__aside > :nth-child(3) { transition-delay: .16s; }
.tfm.tfm--js.is-in .tfm__aside > :nth-child(4) { transition-delay: .24s; }
.tfm.tfm--js.is-in .tfm__aside > :nth-child(5) { transition-delay: .32s; }
.tfm.tfm--js.is-in .tfm__card { transition-delay: .2s; } .tfm.tfm--js .tfm__tick-path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.tfm.tfm--js.is-in .tfm__tick-path {
animation: tfm-draw .5s ease forwards;
animation-delay: calc(.5s + var(--i, 0) * .14s);
}
@media (prefers-reduced-motion: reduce) {
.tfm .tfm__edge,
.tfm .tfm__dot::after,
.tfm .tfm__form.is-sending .tfm__bolt {
animation: none;
} .tfm .tfm__done-ring,
.tfm .tfm__done-tick,
.tfm.tfm--js .tfm__tick-path {
stroke-dashoffset: 0;
animation: none !important;
}
} @media (max-width: 1024px) {
.tfm .tfm__inner {
grid-template-columns: minmax(0, 1fr);
}
.tfm .tfm__aside {
max-width: 640px;
}
}
@media (max-width: 767px) {
.tfm {
padding: 72px 0;
}
.tfm .tfm__inner {
gap: 40px;
padding: 0 16px;
}
.tfm .tfm__title {
font-size: 30px;
}
.tfm .tfm__text,
.tfm .tfm__benefits li {
font-size: 15px;
}
.tfm .tfm__card {
padding: 30px 18px 24px;
border-radius: 14px;
}
.tfm .tfm__form-title {
font-size: 24px;
}
.tfm .tfm__grid,
.tfm .tfm__grid--3,
.tfm .tfm__grid--3.tfm__grid--2 {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
margin-bottom: 12px;
} .tfm .tfm__grid--3:not(.tfm__grid--2) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tfm .tfm__grid--3:not(.tfm__grid--2) > :first-child {
grid-column: 1 / -1;
}
.tfm a.tfm__direct-item {
flex: 1 1 100%;
}
.tfm .tfm__done {
min-height: 340px;
}
}.tfm.ttr {
--ttr-bg: #f4f8f8;
--ttr-panel: var(--toscano-brand-deep, #032d35);
--ttr-panel-2: #064a54;
--ttr-glow: #2fc4c7;
--ttr-pad: 110px;
padding: var(--ttr-pad) 24px;
background: var(--ttr-bg);
scroll-margin-top: 90px;
}
.tfm.ttr .ttr__card {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
border-radius: 24px;
background: var(--tfm-card);
box-shadow: 0 40px 80px -40px rgba(3, 45, 53, .35), 0 0 0 1px rgba(3, 45, 53, .04);
} .tfm.ttr .ttr__info {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 36px;
min-width: 0;
padding: 52px 48px;
overflow: hidden;
background:
radial-gradient(70% 90% at 0% 100%, color-mix(in srgb, var(--ttr-glow) 14%, transparent) 0%, transparent 70%),
linear-gradient(135deg, var(--ttr-panel) 0%, var(--ttr-panel-2) 100%);
color: rgba(255, 255, 255, .78);
}
.tfm.ttr .ttr__info-inner {
position: relative;
z-index: 1;
grid-row: 1;
max-width: 520px; text-shadow: 0 1px 14px rgba(3, 45, 53, .65);
}
.tfm.ttr .ttr__chips li {
background: rgba(3, 45, 53, .35);
} .tfm.ttr .ttr__fx {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .8s ease;
pointer-events: none;
}
.tfm.ttr.ttr--gl .ttr__fx {
opacity: 1;
} .tfm.ttr.ttr--cover .ttr__info {
grid-template-columns: minmax(0, 1fr) auto;
}
.tfm.ttr .ttr__cover {
position: relative;
z-index: 1;
grid-row: 1;
grid-column: 2;
width: 190px;
perspective: 900px;
} .tfm.ttr .ttr__cover-glow {
position: absolute;
inset: -30% -45%;
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--ttr-glow) 38%, transparent), transparent);
opacity: .8;
pointer-events: none;
animation: ttr-glow 5s ease-in-out infinite;
}
.tfm.ttr .ttr__cover-book {
position: relative;
transform: rotate(-4deg);
transition: transform .7s cubic-bezier(.2, .7, .2, 1);
animation: ttr-float 6s ease-in-out infinite;
}
.tfm.ttr .ttr__cover-img {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .45)) drop-shadow(0 4px 8px rgba(0, 0, 0, .25));
}
.tfm.ttr .ttr__info:hover .ttr__cover-book {
transform: rotate(0deg) translateY(-6px) scale(1.03);
}
@keyframes ttr-float {
0%, 100% { translate: 0 0; }
50% { translate: 0 -8px; }
}
@keyframes ttr-glow {
0%, 100% { opacity: .65; }
50% { opacity: 1; }
}
.tfm.ttr .ttr__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 16px;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ttr-glow);
}
.tfm.ttr .ttr__title {
margin: 0;
font-family: "Inter", sans-serif;
font-size: 44px;
font-weight: 600;
line-height: 1.08;
letter-spacing: 0;
text-transform: none;
color: #ffffff;
}
.tfm.ttr .ttr__hl {
color: var(--ttr-glow);
}
.tfm.ttr .ttr__text {
margin: 20px 0 0;
font-size: 16px;
line-height: 1.59;
}
.tfm.ttr .ttr__features {
display: grid;
gap: 14px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.tfm.ttr .ttr__features li {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0;
font-size: 15px;
font-weight: 500;
line-height: 1.45;
color: #ffffff;
}
.tfm.ttr .ttr__tick {
flex: 0 0 22px;
margin-top: -1px;
}
.tfm.ttr .ttr__tick svg {
display: block;
}
.tfm.ttr .ttr__tick circle {
fill: color-mix(in srgb, var(--ttr-glow) 22%, transparent);
}
.tfm.ttr .ttr__tick path {
stroke: var(--ttr-glow);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.tfm.ttr .ttr__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.tfm.ttr .ttr__chips li {
margin: 0;
padding: 7px 13px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
color: #ffffff;
} .tfm.ttr .ttr__access {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: 48px 44px 40px;
}
.tfm.ttr .ttr__badge {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 7px;
margin: 0 0 16px;
padding: 6px 11px;
border-radius: 8px;
background: #e0f4f4;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
color: var(--toscano-text-accent, #007b7e);
}
.tfm.ttr .ttr__form {
display: flex;
flex-direction: column;
}
.tfm.ttr .ttr__form[hidden] {
display: none;
}
.tfm.ttr .ttr__form-title {
margin: 0;
font-family: "Inter", sans-serif;
font-size: 26px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
color: var(--tfm-title);
}
.tfm.ttr .ttr__form-text {
margin: 8px 0 22px;
font-size: 14px;
line-height: 1.55;
}
.tfm.ttr .ttr__stack {
display: grid;
gap: 14px;
}
.tfm.ttr .tfm__check {
margin-top: 18px;
}
.tfm.ttr .tfm__check + .tfm__check {
margin-top: 12px;
}
.tfm.ttr .ttr__note {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 14px 0 0;
font-size: 12px;
line-height: 1.4;
color: #8a9799;
}
.tfm.ttr .ttr__warn {
margin: 0 0 16px;
padding: 10px 12px;
border-radius: 8px;
background: #fff4e5;
font-size: 13px;
color: #8a4b00;
} .tfm.ttr .ttr__done {
min-height: 440px;
}
.tfm.ttr .ttr__env svg {
display: block;
overflow: visible;
}
.tfm.ttr .ttr__env-body,
.tfm.ttr .ttr__env-flap {
stroke: var(--tfm-accent);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.tfm.ttr .ttr__env-bolt {
fill: var(--ttr-glow);
opacity: 0;
transform-box: fill-box;
transform-origin: 50% 50%;
transform: translateY(-14px) scale(.6);
}
.tfm.ttr .ttr__done.is-in .ttr__env-body {
animation: tfm-draw .7s ease forwards;
}
.tfm.ttr .ttr__done.is-in .ttr__env-flap {
animation: tfm-draw .45s ease .55s forwards;
}
.tfm.ttr .ttr__done.is-in .ttr__env-bolt {
animation: ttr-bolt .5s cubic-bezier(.34, 1.56, .64, 1) .9s forwards;
}
@keyframes ttr-bolt {
to { opacity: 1; transform: none; }
}
.tfm.ttr .ttr__done-title {
margin: 22px 0 0;
font-size: 24px;
font-weight: 600;
line-height: 1.2;
color: var(--tfm-title);
}
.tfm.ttr .ttr__done .tfm__done-text {
margin-top: 10px;
font-size: 15px;
color: var(--tfm-text);
} .tfm.ttr.ttr--js .ttr__card {
opacity: 0;
transform: translateY(28px);
}
.tfm.ttr.ttr--js.is-in .ttr__card {
opacity: 1;
transform: none;
transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.tfm.ttr.ttr--js .ttr__info-inner > * {
opacity: 0;
transform: translateY(16px);
}
.tfm.ttr.ttr--js.is-in .ttr__info-inner > * {
opacity: 1;
transform: none;
transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.tfm.ttr.ttr--js.is-in .ttr__info-inner > :nth-child(2) { transition-delay: .1s; }
.tfm.ttr.ttr--js.is-in .ttr__info-inner > :nth-child(3) { transition-delay: .2s; }
.tfm.ttr.ttr--js.is-in .ttr__info-inner > :nth-child(4) { transition-delay: .3s; }
.tfm.ttr.ttr--js.is-in .ttr__info-inner > :nth-child(5) { transition-delay: .4s; }
.tfm.ttr.ttr--js .ttr__tick path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.tfm.ttr.ttr--js.is-in .ttr__tick path {
animation: tfm-draw .5s ease forwards;
animation-delay: calc(.6s + var(--i, 0) * .14s);
}
@media (prefers-reduced-motion: reduce) {
.tfm.ttr .ttr__cover-book,
.tfm.ttr .ttr__cover-glow {
animation: none;
}
.tfm.ttr .ttr__env-body,
.tfm.ttr .ttr__env-flap,
.tfm.ttr.ttr--js .ttr__tick path {
stroke-dashoffset: 0;
animation: none !important;
}
.tfm.ttr .ttr__env-bolt {
opacity: 1;
transform: none;
animation: none !important;
}
} @media (max-width: 1199px) {
.tfm.ttr .ttr__info {
padding: 44px 36px;
gap: 28px;
}
.tfm.ttr .ttr__title {
font-size: 38px;
}
.tfm.ttr .ttr__cover {
width: 150px;
}
}
@media (max-width: 1024px) {
.tfm.ttr .ttr__card {
grid-template-columns: minmax(0, 1fr);
max-width: 720px;
}
.tfm.ttr .ttr__info-inner {
max-width: none;
}
.tfm.ttr .ttr__done {
min-height: 360px;
}
}
@media (max-width: 767px) {
.tfm.ttr {
--ttr-pad: 72px;
padding-right: 16px;
padding-left: 16px;
}
.tfm.ttr .ttr__card {
border-radius: 18px;
}
.tfm.ttr .ttr__info {
padding: 36px 22px;
} .tfm.ttr.ttr--cover .ttr__info {
grid-template-columns: minmax(0, 1fr);
gap: 26px;
}
.tfm.ttr .ttr__cover {
grid-row: 1;
grid-column: 1;
justify-self: center;
width: 132px;
}
.tfm.ttr .ttr__info-inner {
grid-row: 2;
}
.tfm.ttr .ttr__title {
font-size: 32px;
}
.tfm.ttr .ttr__text {
font-size: 15px;
}
.tfm.ttr .ttr__access {
padding: 32px 20px 26px;
}
.tfm.ttr .ttr__form-title {
font-size: 22px;
}
.tfm.ttr .tfm__grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
margin-bottom: 12px;
}
.tfm.ttr .ttr__stack {
gap: 12px;
}
.tfm.ttr .ttr__done {
min-height: 320px;
}
}.tk-hs {
--tk-hs-bg: #ffffff;
position: relative;
min-width: 0;
}
.tk-hs .tk-hs__strip {
overscroll-behavior-x: contain;
}
.tk-hs::before,
.tk-hs::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
width: 56px;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
}
.tk-hs::before {
left: 0;
background: linear-gradient(90deg, var(--tk-hs-bg) 30%, transparent);
}
.tk-hs::after {
right: 0;
background: linear-gradient(270deg, var(--tk-hs-bg) 30%, transparent);
}
.tk-hs.has-prev::before,
.tk-hs.has-next::after {
opacity: 1;
}
.tk-hs .tk-hs__btn {
position: absolute;
top: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin: -15px 0 0;
padding: 0;
border: 1px solid #e3ecee;
border-radius: 50%;
background: #ffffff;
color: #032d35;
box-shadow: 0 4px 12px -4px rgba(3, 45, 53, .3);
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s ease, border-color .2s ease, color .2s ease;
}
.tk-hs .tk-hs__btn svg {
width: 14px;
height: 14px;
}
.tk-hs .tk-hs__btn:hover {
border-color: var(--toscano-brand-teal, #009a9d);
color: var(--toscano-brand-teal, #009a9d);
}
.tk-hs .tk-hs__btn--prev {
left: var(--tk-hs-inset, 0);
}
.tk-hs .tk-hs__btn--next {
right: var(--tk-hs-inset, 0);
}
.tk-hs.has-prev .tk-hs__btn--prev,
.tk-hs.has-next .tk-hs__btn--next {
opacity: 1;
visibility: visible;
} .tk-hs.has-next:not(.is-touched) .tk-hs__btn--next svg {
animation: tk-hs-nudge 1.4s ease-in-out infinite;
}
@keyframes tk-hs-nudge {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(3px); }
} .tk-hs .tk-hs__strip.is-peek {
animation: tk-hs-peek 1.1s .3s cubic-bezier(.45, 0, .2, 1);
}
@keyframes tk-hs-peek {
0%, 100% { transform: translateX(0); }
45% { transform: translateX(-28px); }
}
@media (prefers-reduced-motion: reduce) {
.tk-hs.has-next .tk-hs__btn--next svg,
.tk-hs .tk-hs__strip.is-peek {
animation: none;
}
}.tdl {
--tdl-bg: #ffffff;
--tdl-card: #ffffff;
--tdl-accent: var(--toscano-brand-teal, #009a9d);
--tdl-deep: var(--toscano-brand-deep, #032d35);
--tdl-title: var(--tdl-deep);
--tdl-text: #6f6f6f;
--tdl-muted: #8a9699;
--tdl-border: #e3ecee;
--tdl-soft: #f6fafa;
--tdl-cols: 2; --tdl-max: 1248px;
--tdl-gutter: 24px;
--tdl-top: 110px;
--tdl-bottom: 110px;
--tdl-head: 44px;
--tdl-gap: 24px;
position: relative;
box-sizing: border-box;
width: 100%;
padding: var(--tdl-top) 0 var(--tdl-bottom);
background: var(--tdl-bg);
color: var(--tdl-text);
font-family: "Inter", sans-serif;
-webkit-font-smoothing: antialiased;
word-break: break-word;
scroll-margin-top: 90px;
}
.tdl.tdl--grid {
background:
linear-gradient(rgba(3, 45, 53, .035) 1px, transparent 1px) 0 0 / 48px 48px,
linear-gradient(90deg, rgba(3, 45, 53, .035) 1px, transparent 1px) 0 0 / 48px 48px,
var(--tdl-bg);
}
.tdl *,
.tdl *::before,
.tdl *::after {
box-sizing: border-box;
}
.tdl a:focus-visible,
.tdl button:focus-visible {
outline: 2px solid var(--tdl-accent);
outline-offset: 3px;
}
.tdl .tdl__inner {
max-width: var(--tdl-max);
margin: 0 auto;
padding: 0 var(--tdl-gutter);
} .tdl .tdl__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px 48px;
margin-bottom: var(--tdl-head);
}
.tdl .tdl__intro {
flex: 1 1 auto;
min-width: 0;
max-width: 620px;
}
.tdl .tdl__eyebrow {
margin: 0 0 12px;
font-size: 15px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--tdl-text);
}
.tdl .tdl__title {
margin: 0;
font-family: "Inter", sans-serif;
font-size: 39px;
font-weight: 400;
line-height: 1.15;
letter-spacing: 0;
text-transform: none;
color: var(--tdl-title);
}
.tdl .tdl__hl {
color: var(--tdl-accent);
}
.tdl .tdl__text {
margin: 14px 0 0;
font-size: 16px;
line-height: 1.59;
} .tdl .tdl__filter-wrap {
--tk-hs-bg: var(--tdl-bg);
flex: 0 1 auto;
max-width: 64%;
}
.tdl .tdl__filter {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.tdl .tdl__filter::-webkit-scrollbar {
display: none;
}
.tdl.tdl--filter-below .tdl__head {
flex-direction: column;
align-items: flex-start;
}
.tdl.tdl--filter-below .tdl__filter-wrap {
max-width: 100%;
}
.tdl.tdl--filter-below .tdl__filter,
.tdl .tdl__filter-wrap.is-scroll .tdl__filter {
justify-content: flex-start;
}
.tdl .tdl__chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 9px 16px;
border: 1px solid var(--tdl-border);
border-radius: 999px;
background: #ffffff;
color: var(--tdl-deep);
font: 600 14px/18px "Inter", sans-serif;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
cursor: pointer;
transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.tdl .tdl__chip i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c);
}
.tdl .tdl__chip:hover {
border-color: var(--c, var(--tdl-accent));
}
.tdl .tdl__chip.is-active {
border-color: var(--tdl-deep);
background: var(--tdl-deep);
color: #ffffff;
}
.tdl .tdl__chip.is-active i {
box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
} .tdl .tdl__grid {
display: grid;
grid-template-columns: repeat(var(--tdl-cols), minmax(0, 1fr));
gap: var(--tdl-gap);
align-items: stretch;
}
.tdl .tdl__line {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border: 1px solid var(--tdl-border);
border-radius: 20px;
background: var(--tdl-card);
transition: border-color .4s ease, box-shadow .4s ease;
}
.tdl .tdl__line:hover {
border-color: color-mix(in srgb, var(--c) 35%, var(--tdl-border));
box-shadow: 0 24px 48px -28px rgba(3, 45, 53, .3);
}
.tdl .tdl__line.is-hidden {
display: none;
}
.tdl .tdl__line.is-in {
animation: tdl-in .5s cubic-bezier(.2, .7, .2, 1) both;
animation-delay: calc(var(--n, 0) * 60ms);
}
@keyframes tdl-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
} .tdl .tdl__edge {
position: relative;
display: block;
height: 4px;
overflow: hidden;
background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 25%, transparent));
}
.tdl .tdl__edge::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -120px;
width: 110px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
opacity: 0;
}
.tdl .tdl__line:hover .tdl__edge::after {
animation: tdl-spark 1.4s ease-in-out infinite;
}
@keyframes tdl-spark {
0% { left: -120px; opacity: 0; }
15%, 85% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
.tdl .tdl__line-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 20px;
padding: 26px 28px 20px;
}
.tdl .tdl__line-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tdl .tdl__brand {
display: inline-flex;
padding: 4px 10px;
border-radius: 4px;
background: var(--cb);
color: var(--c);
font-size: 12px;
font-weight: 700;
line-height: 16px;
letter-spacing: .04em;
}
.tdl .tdl__count {
color: var(--tdl-muted);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
.tdl .tdl__line-title {
margin: -4px 0 0;
font-family: "Inter", sans-serif;
font-size: 21px;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
color: var(--tdl-title);
} .tdl .tdl__cat {
display: flex;
align-items: center;
gap: 18px;
padding: 14px 18px 14px 14px;
border-radius: 14px;
background: color-mix(in srgb, var(--cb) 60%, #ffffff);
color: inherit;
text-decoration: none;
transition: background-color .3s ease, box-shadow .3s ease;
}
.tdl a.tdl__cat:hover {
background: var(--cb);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
}
.tdl .tdl__cover {
position: relative;
display: flex;
flex: 0 0 auto;
align-items: flex-end;
width: 72px;
height: 96px;
padding: 8px 5px 8px 10px; overflow: hidden;
border-radius: 6px;
background: linear-gradient(150deg, var(--c) 0%, var(--tdl-deep) 100%);
box-shadow: 0 10px 18px -8px rgba(3, 45, 53, .45);
transform: perspective(400px) rotateY(0deg);
transform-origin: left center;
transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
} .tdl a.tdl__cat:hover .tdl__cover {
transform: perspective(400px) rotateY(-18deg);
box-shadow: 10px 12px 20px -8px rgba(3, 45, 53, .45);
}
.tdl .tdl__cover::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 6px;
width: 1px;
background: rgba(255, 255, 255, .25);
} .tdl .tdl__cover span {
display: block;
max-width: 100%;
color: #ffffff;
font-size: 8px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .02em;
overflow-wrap: anywhere;
}
.tdl .tdl__cover--img {
padding: 0;
background: #ffffff;
}
.tdl .tdl__cover img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.tdl .tdl__cat-txt {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.tdl .tdl__cat-label {
color: var(--c);
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.tdl .tdl__cat-name {
color: var(--tdl-title);
font-size: 17px;
font-weight: 600;
line-height: 1.3;
}
.tdl .tdl__cat-meta {
color: var(--tdl-muted);
font-size: 13px;
}
.tdl .tdl__btn {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 4px;
background: var(--tdl-accent);
color: #ffffff;
font-size: 14px;
font-weight: 700;
line-height: 20px;
letter-spacing: normal;
text-transform: none;
transition: background-color .25s ease, box-shadow .25s ease;
}
.tdl .tdl__btn svg {
width: 15px;
height: 15px;
}
.tdl a.tdl__cat:hover .tdl__btn {
background: var(--tdl-deep);
box-shadow: 0 8px 18px -8px rgba(3, 45, 53, .5);
} .tdl .tdl__dl-arrow {
transition: transform .3s ease;
}
.tdl a:hover .tdl__dl-arrow {
animation: tdl-drop .7s ease-in-out infinite;
}
@keyframes tdl-drop {
0% { transform: translateY(-3px); opacity: 0; }
40% { opacity: 1; }
100% { transform: translateY(2px); opacity: 1; }
} .tdl .tdl__docs {
margin: -6px 0 0;
padding: 0;
list-style: none;
}
.tdl .tdl__docs li {
margin: 0;
padding: 0;
border-top: 1px solid var(--tdl-border);
}
.tdl .tdl__docs li:first-child {
border-top: 0;
}
.tdl .tdl__doc {
display: flex;
align-items: center;
gap: 14px;
margin: 0 -10px;
padding: 12px 10px;
border-radius: 10px;
color: var(--tdl-title);
text-decoration: none;
transition: background-color .2s ease;
}
.tdl a.tdl__doc:hover {
background: var(--tdl-soft);
}
.tdl .tdl__doc-ico {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--tdl-border);
border-radius: 8px;
background: var(--tdl-soft);
color: var(--c);
font-size: 9px;
font-weight: 800;
letter-spacing: .02em;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tdl a.tdl__doc:hover .tdl__doc-ico {
border-color: var(--c);
background: var(--c);
color: #ffffff;
}
.tdl .tdl__doc-name {
flex: 1 1 auto;
min-width: 0;
font-size: 15px;
font-weight: 500;
line-height: 1.35;
}
.tdl .tdl__doc-dl {
display: inline-flex;
flex: 0 0 auto;
color: var(--tdl-accent);
}
.tdl .tdl__doc-dl svg {
width: 16px;
height: 16px;
} .tdl .tdl__doc.tdh-found,
.tdl .tdl__cat.tdh-found {
background: color-mix(in srgb, var(--c) 12%, #ffffff);
} @media (max-width: 1024px) {
.tdl {
--tdl-top: 80px;
--tdl-bottom: 80px;
}
.tdl .tdl__head {
flex-direction: column;
align-items: flex-start;
}
.tdl .tdl__filter-wrap {
max-width: 100%;
}
.tdl .tdl__filter {
justify-content: flex-start;
}
.tdl .tdl__cat {
flex-wrap: wrap;
}
.tdl .tdl__cat-txt {
flex-basis: calc(100% - 90px);
}
.tdl .tdl__btn {
margin-left: 90px;
}
}
@media (max-width: 767px) {
.tdl {
--tdl-cols: 1;
--tdl-gutter: 16px;
--tdl-top: 56px;
--tdl-bottom: 56px;
--tdl-head: 32px;
--tdl-gap: 16px;
}
.tdl .tdl__title {
font-size: 30px;
}
.tdl .tdl__text {
font-size: 15px;
} .tdl .tdl__filter-wrap {
width: calc(100% + 32px);
max-width: none;
margin: 0 -16px;
}
.tdl .tdl__filter {
padding: 0 16px 4px;
scroll-padding: 0 16px;
}
.tdl .tdl__filter-wrap {
--tk-hs-inset: 8px;
}
.tdl .tdl__line-body {
gap: 18px;
padding: 22px 18px 14px;
}
.tdl .tdl__line-title {
font-size: 19px;
}
.tdl .tdl__cover {
width: 60px;
height: 80px;
padding-right: 3px;
padding-left: 9px;
}
.tdl .tdl__cover span {
font-size: 7px;
}
.tdl .tdl__cat-txt {
flex-basis: calc(100% - 78px);
}
.tdl .tdl__btn {
justify-content: center;
width: 100%;
margin-left: 0;
}
.tdl .tdl__doc-name {
font-size: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.tdl .tdl__line.is-in,
.tdl .tdl__line:hover .tdl__edge::after,
.tdl a:hover .tdl__dl-arrow {
animation: none;
}
.tdl a.tdl__cat:hover .tdl__cover {
transform: none;
}
}@property --tapc {
syntax: "<color>";
inherits: true;
initial-value: #009a9d;
}
.tap {
--tap-bg: #f6fafa;
--tap-p1: var(--toscano-brand-deep, #032d35);
--tap-p2: #004451;
--tap-accent: var(--toscano-brand-teal, #009a9d);
--tap-accent-2: #2fc4c7;
--tap-deep: var(--toscano-brand-deep, #032d35);
--tap-title: var(--tap-deep);
--tap-text: #6f6f6f;
--tap-muted: #8a9699;
--tap-border: #e3ecee;
--tap-dur: 6s; --tap-max: 1248px;
--tap-gutter: 24px;
--tap-top: 110px;
--tap-bottom: 110px;
--tap-head: 44px;
position: relative;
box-sizing: border-box;
width: 100%;
padding: var(--tap-top) 0 var(--tap-bottom);
background: var(--tap-bg);
color: var(--tap-text);
font-family: "Inter", sans-serif;
-webkit-font-smoothing: antialiased;
word-break: break-word;
scroll-margin-top: 90px;
}
.tap *,
.tap *::before,
.tap *::after {
box-sizing: border-box;
}
.tap a:focus-visible,
.tap button:focus-visible {
outline: 2px solid var(--tap-accent);
outline-offset: 3px;
}
.tap .tap__inner {
max-width: var(--tap-max);
margin: 0 auto;
padding: 0 var(--tap-gutter);
} .tap .tap__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px 48px;
margin-bottom: var(--tap-head);
}
.tap .tap__intro {
flex: 1 1 auto;
min-width: 0;
max-width: 620px;
}
.tap .tap__eyebrow {
margin: 0 0 12px;
font-size: 15px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--tap-text);
}
.tap .tap__title {
margin: 0;
font-family: "Inter", sans-serif;
font-size: 39px;
font-weight: 400;
line-height: 1.15;
letter-spacing: 0;
text-transform: none;
color: var(--tap-title);
}
.tap .tap__hl {
color: var(--tap-accent);
}
.tap .tap__text {
margin: 14px 0 0;
font-size: 16px;
line-height: 1.59;
}
.tap .tap__filter-wrap {
--tk-hs-bg: var(--tap-bg);
flex: 0 1 auto;
}
.tap .tap__filter {
display: flex;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.tap .tap__filter::-webkit-scrollbar {
display: none;
}
.tap .tap__chip {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
margin: 0;
padding: 9px 16px;
border: 1px solid var(--tap-border);
border-radius: 999px;
background: #ffffff;
color: var(--tap-deep);
font: 600 14px/18px "Inter", sans-serif;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
cursor: pointer;
transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.tap .tap__chip i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c);
}
.tap .tap__chip:hover {
border-color: var(--c, var(--tap-accent));
}
.tap .tap__chip.is-active {
border-color: var(--tap-deep);
background: var(--tap-deep);
color: #ffffff;
}
.tap .tap__chip.is-active i {
box-shadow: 0 0 0 2px rgba(255, 255, 255, .8);
} .tap .tap__body {
display: grid;
grid-template-columns: 392px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
.tap .tap__list-wrap {
--tk-hs-bg: var(--tap-bg);
}
.tap .tap__list {
display: flex;
flex-direction: column;
gap: 6px;
}
.tap .tap__app {
position: relative;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
width: 100%;
margin: 0;
padding: 10px 16px 10px 12px;
border: 1px solid transparent;
border-radius: 14px;
background: transparent;
color: var(--tap-deep);
font: inherit;
letter-spacing: normal;
text-align: left;
text-transform: none;
cursor: pointer;
transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.tap .tap__app:hover {
background: rgba(255, 255, 255, .7);
}
.tap .tap__app.is-active {
border-color: color-mix(in srgb, var(--c) 35%, transparent);
background: #ffffff;
box-shadow: 0 12px 28px -12px rgba(3, 45, 53, .18);
}
.tap .tap__app.is-hidden {
display: none;
}
.tap .tap__thumb {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
overflow: hidden;
border-radius: 11px;
background: var(--c);
color: #ffffff;
transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.tap .tap__app:hover .tap__thumb,
.tap .tap__app.is-active .tap__thumb {
transform: scale(1.06);
}
.tap .tap__thumb img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: top center;
}
.tap .tap__thumb b {
font-size: 18px;
font-weight: 700;
}
.tap .tap__app-txt {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tap .tap__app-name {
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
.tap .tap__app-sub {
overflow: hidden;
color: var(--tap-muted);
font-size: 13px;
line-height: 1.35;
white-space: nowrap;
text-overflow: ellipsis;
}
.tap .tap__app.is-active .tap__app-sub {
color: var(--tap-text);
}
.tap .tap__app-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c);
} .tap .tap__app-prog {
position: absolute;
left: 16px;
right: 16px;
bottom: 5px;
height: 3px;
overflow: hidden;
border-radius: 2px;
background: var(--tap-border);
opacity: 0;
transition: opacity .3s ease;
}
.tap .tap__app-prog i {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(90deg, var(--tap-accent), var(--tap-accent-2));
transform: scaleX(0);
transform-origin: 0 50%;
}
.tap.is-auto .tap__app.is-active .tap__app-prog {
opacity: 1;
}
.tap.is-auto .tap__app.is-active.is-running .tap__app-prog i {
animation: tap-prog var(--tap-dur) linear forwards;
}
.tap.is-paused .tap__app.is-active .tap__app-prog i {
animation-play-state: paused;
}
@keyframes tap-prog {
to { transform: scaleX(1); }
} .tap .tap__show {
--tapc: var(--c);
position: relative;
display: grid;
grid-template-columns: 360px minmax(0, 1fr);
align-items: center;
min-height: 700px;
padding: 60px 50px 60px 30px;
overflow: hidden;
isolation: isolate;
border-radius: 24px;
background:
linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 52px 52px,
linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 52px 52px,
linear-gradient(127deg, var(--tap-p1) 0%, var(--tap-p2) 100%);
color: #ffffff;
box-shadow: 0 30px 60px -30px rgba(3, 45, 53, .45);
transition: --tapc .8s ease;
} .tap .tap__fx {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .8s ease;
pointer-events: none;
}
.tap.tap--gl .tap__fx {
opacity: 1;
}
.tap.tap--gl .tap__rays {
display: none;
} .tap.tap--gl .tap__show::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 52px 52px,
linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 52px 52px;
pointer-events: none;
}
.tap .tap__rays {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
pointer-events: none;
}
.tap .tap__ray {
fill: none;
stroke: var(--tap-accent-2);
stroke-width: 1.6;
stroke-linejoin: round;
stroke-linecap: round;
opacity: .35;
}
.tap .tap__ray--flow {
stroke: #d7fbfb;
stroke-width: 2.2;
stroke-dasharray: 12 88;
opacity: .9;
animation: tap-flow 3.4s linear infinite;
}
.tap .tap__ray--2 {
animation-duration: 4.6s;
animation-delay: -1.5s;
}
@keyframes tap-flow {
from { stroke-dashoffset: 100; }
to { stroke-dashoffset: 0; }
} .tap .tap__glow {
position: absolute;
top: 50%;
left: 210px;
z-index: -1;
width: 520px;
height: 520px;
margin: -260px 0 0 -260px;
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--tapc) 42%, transparent), transparent);
pointer-events: none;
}
.tap .tap__device {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 580px;
}
.tap .tap__ring {
position: absolute;
top: 50%;
left: 50%;
width: 380px;
height: 380px;
margin: -190px 0 0 -190px;
border: 1.2px solid color-mix(in srgb, var(--tap-accent-2) 24%, transparent);
border-radius: 50%;
}
.tap .tap__ring--2 {
width: 480px;
height: 480px;
margin: -240px 0 0 -240px;
border-style: dashed;
border-color: color-mix(in srgb, var(--tap-accent-2) 16%, transparent);
animation: tap-spin 50s linear infinite;
}
@keyframes tap-spin {
to { transform: rotate(360deg); }
}
.tap .tap__phone {
position: relative;
width: 250px;
height: 510px;
padding: 7px;
overflow: hidden;
border-radius: 40px;
background: #0b1c20;
box-shadow: 0 34px 60px -12px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08);
animation: tap-float 7s ease-in-out infinite;
}
@keyframes tap-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(-.6deg); }
}
.tap .tap__screen {
position: absolute;
inset: 7px;
overflow: hidden;
border-radius: 33px;
background: var(--c);
opacity: 0;
visibility: hidden;
}
.tap .tap__screen.is-active {
z-index: 1;
opacity: 1;
visibility: visible;
} .tap .tap__screen.is-entering {
z-index: 2;
animation: tap-wipe .75s cubic-bezier(.65, 0, .35, 1) both;
}
.tap .tap__screen.is-leaving {
visibility: visible;
opacity: 1;
}
@keyframes tap-wipe {
from { clip-path: inset(100% 0 0 0 round 33px); }
to { clip-path: inset(0 0 0 0 round 33px); }
}
.tap .tap__screen img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: top center;
}
.tap .tap__screen-ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
height: 100%;
background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 55%, #032d35));
color: #ffffff;
text-align: center;
}
.tap .tap__screen-ph b {
font-size: 26px;
font-weight: 700;
}
.tap .tap__screen-ph span {
font-size: 18px;
font-weight: 600;
opacity: .85;
}
.tap .tap__notch {
position: absolute;
top: 16px;
left: 50%;
z-index: 4;
width: 70px;
height: 18px;
margin-left: -35px;
border-radius: 9px;
background: #0b1c20;
} .tap .tap__sweep {
position: absolute;
left: 7px;
right: 7px;
bottom: 7px;
z-index: 3;
height: 3px;
border-radius: 2px;
background: #ffffff;
box-shadow: 0 0 14px 4px color-mix(in srgb, var(--tap-accent-2) 80%, transparent);
opacity: 0;
pointer-events: none;
}
.tap .tap__phone.is-switch .tap__sweep {
animation: tap-sweep .75s cubic-bezier(.65, 0, .35, 1) both;
}
@keyframes tap-sweep {
0% { bottom: 7px; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { bottom: calc(100% - 10px); opacity: 0; }
} .tap .tap__details {
position: relative;
display: flex;
flex-direction: column;
gap: 28px;
min-width: 0;
padding-left: 30px;
}
.tap .tap__detail {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.tap .tap__detail[hidden] {
display: none;
}
.tap .tap__detail.is-active > * {
animation: tap-up .6s cubic-bezier(.2, .7, .2, 1) both;
}
.tap .tap__detail.is-active > :nth-child(2) { animation-delay: .05s; }
.tap .tap__detail.is-active > :nth-child(3) { animation-delay: .1s; }
.tap .tap__detail.is-active > :nth-child(4) { animation-delay: .15s; }
.tap .tap__detail.is-active > :nth-child(5) { animation-delay: .2s; }
.tap .tap__detail.is-active > :nth-child(6) { animation-delay: .25s; }
@keyframes tap-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
.tap .tap__d-line {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--c) 22%, transparent);
color: color-mix(in srgb, var(--c) 45%, #ffffff);
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.tap .tap__d-line i {
width: 8px;
height: 8px;
border-radius: 50%;
background: color-mix(in srgb, var(--c) 70%, #ffffff);
}
.tap .tap__d-name {
margin: 0;
font-family: "Inter", sans-serif;
font-size: 44px;
font-weight: 600;
line-height: 1.05;
letter-spacing: 0;
text-transform: none;
color: #ffffff;
}
.tap .tap__d-title {
margin: -8px 0 0;
color: var(--tap-accent-2);
font-size: 15px;
font-weight: 600;
line-height: 1.4;
}
.tap .tap__d-desc {
margin: 0;
max-width: 420px;
color: rgba(255, 255, 255, .72);
font-size: 15px;
line-height: 1.6;
}
.tap .tap__d-feats {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.tap .tap__d-feats li {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
color: rgba(255, 255, 255, .92);
font-size: 14px;
font-weight: 500;
line-height: 1.35;
}
.tap .tap__d-feats span {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: color-mix(in srgb, var(--tap-accent-2) 18%, transparent);
color: var(--tap-accent-2);
}
.tap .tap__d-feats svg {
width: 11px;
height: 9px;
}
.tap .tap__d-stores {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
.tap a.tap__store {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 48px;
padding: 8px 16px 8px 14px;
border-radius: 10px;
background: #ffffff;
color: var(--tap-deep);
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.tap a.tap__store:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .5), 0 0 0 2px color-mix(in srgb, var(--tap-accent-2) 70%, transparent);
}
.tap a.tap__store svg {
width: 14px;
height: 15px;
}
.tap .tap__store-txt {
display: flex;
flex-direction: column;
}
.tap .tap__store-small {
color: var(--tap-text);
font-size: 9px;
font-weight: 500;
line-height: 1.2;
}
.tap .tap__store-big {
font-size: 14px;
font-weight: 700;
line-height: 1.2;
}
.tap a.tap__store--web {
background: var(--tap-accent);
color: #ffffff;
}
.tap a.tap__store--web:hover {
background: var(--tap-accent-2);
} .tap .tap__nav {
display: flex;
align-items: center;
gap: 8px;
}
.tap .tap__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin: 0;
padding: 0;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 50%;
background: transparent;
color: #ffffff;
cursor: pointer;
transition: border-color .2s ease, background-color .2s ease;
}
.tap .tap__arrow svg {
width: 14px;
height: 14px;
}
.tap .tap__arrow:hover {
border-color: var(--tap-accent-2);
background: rgba(47, 196, 199, .14);
}
.tap .tap__count {
margin-left: 10px;
color: rgba(255, 255, 255, .5);
font-size: 13px;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.tap .tap__count-n {
color: #ffffff;
font-weight: 700;
} .tap .tap__grid {
display: grid;
grid-template-columns: repeat(var(--tap-cols, 4), minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
.tap .tap__card {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border: 1px solid var(--tap-border);
border-radius: 20px;
background: #ffffff;
transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, border-color .4s ease;
}
.tap .tap__card:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--c) 30%, var(--tap-border));
box-shadow: 0 24px 44px -26px rgba(3, 45, 53, .32);
}
.tap .tap__card.is-hidden {
display: none;
}
.tap.tap--anim .tap__card {
opacity: 0;
transform: translateY(22px);
}
.tap.tap--anim .tap__card.is-in {
opacity: 1;
transform: none;
transition: opacity .6s ease calc(var(--n, 0) * 70ms), transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--n, 0) * 70ms), box-shadow .4s ease, border-color .4s ease;
}
.tap.tap--anim .tap__card.is-in:hover {
transform: translateY(-4px);
transition-delay: 0s;
} .tap .tap__card-visual {
position: relative;
height: 230px;
overflow: hidden;
background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, #ffffff) 0%, #ffffff 100%);
}
.tap .tap__card-glow {
position: absolute;
top: 40px;
left: 50%;
width: 240px;
height: 240px;
margin-left: -120px;
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 18%, transparent), transparent);
}
.tap .tap__card-phone {
position: absolute;
top: 34px;
left: 50%;
width: 140px;
height: 286px;
margin-left: -70px;
padding: 6px;
overflow: hidden;
border-radius: 26px;
background: #0b1c20;
box-shadow: 0 18px 30px -8px rgba(3, 45, 53, .3);
transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.tap .tap__card:hover .tap__card-phone {
transform: translateY(-10px);
}
.tap .tap__card-phone img,
.tap .tap__card-phone .tap__screen-ph {
display: block;
width: 100%;
height: 100%;
max-width: none;
border-radius: 21px;
object-fit: cover;
object-position: top center;
}
.tap .tap__card-phone .tap__screen-ph {
display: flex;
gap: 10px;
}
.tap .tap__card-phone .tap__screen-ph b {
font-size: 18px;
}
.tap .tap__card-phone .tap__screen-ph span {
font-size: 13px;
}
.tap .tap__card-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 22px 22px 24px;
}
.tap .tap__card-line {
padding: 3px 8px;
border-radius: 4px;
background: color-mix(in srgb, var(--c) 14%, #ffffff);
color: color-mix(in srgb, var(--c) 85%, #000000);
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.tap .tap__card-name {
margin: 0;
font-family: "Inter", sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
color: var(--tap-title);
}
.tap .tap__card-sub {
margin: -8px 0 0;
color: var(--tap-text);
font-size: 14px;
line-height: 1.4;
}
.tap .tap__card-feats {
display: flex;
flex-direction: column;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
}
.tap .tap__card-feats li {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
color: var(--tap-deep);
font-size: 13px;
font-weight: 500;
line-height: 1.35;
}
.tap .tap__card-feats svg {
flex: 0 0 auto;
width: 11px;
height: 9px;
color: var(--tap-accent);
}
.tap .tap__card-stores {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
padding-top: 8px;
} .tap .tap__card-stores a.tap__store {
gap: 7px;
min-height: 0;
padding: 8px 13px 8px 12px;
border-radius: 8px;
background: var(--tap-deep);
color: #ffffff;
}
.tap .tap__card-stores a.tap__store svg {
width: 11px;
height: 12px;
}
.tap .tap__card-stores .tap__store-big {
font-size: 12px;
}
.tap .tap__card-stores a.tap__store--web {
background: var(--tap-accent);
}
.tap .tap__card-stores a.tap__store:hover {
box-shadow: 0 8px 18px -8px rgba(3, 45, 53, .5);
} @media (max-width: 1199px) {
.tap .tap__body {
grid-template-columns: 330px minmax(0, 1fr);
gap: 22px;
}
.tap .tap__show {
grid-template-columns: 300px minmax(0, 1fr);
padding: 50px 36px 50px 20px;
}
.tap .tap__phone {
width: 220px;
height: 450px;
}
.tap .tap__device {
height: 520px;
}
.tap .tap__glow {
left: 170px;
}
.tap .tap__details {
padding-left: 16px;
}
.tap .tap__d-name {
font-size: 38px;
}
} @media (max-width: 1024px) {
.tap {
--tap-top: 80px;
--tap-bottom: 80px;
}
.tap .tap__head {
flex-direction: column;
align-items: flex-start;
}
.tap .tap__filter-wrap {
max-width: 100%;
}
.tap .tap__body {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
.tap {
--tap-cols: 2;
}
.tap .tap__grid {
gap: 18px;
}
.tap .tap__list {
flex-direction: row;
gap: 8px;
padding-bottom: 4px;
overflow-x: auto;
scrollbar-width: none;
}
.tap .tap__list::-webkit-scrollbar {
display: none;
}
.tap .tap__app {
flex: 0 0 auto;
grid-template-columns: 36px auto;
gap: 10px;
width: auto;
padding: 8px 14px 10px 8px;
border-color: var(--tap-border);
background: #ffffff;
}
.tap .tap__thumb {
width: 36px;
height: 36px;
border-radius: 9px;
}
.tap .tap__app-name {
font-size: 14px;
white-space: nowrap;
}
.tap .tap__app-sub,
.tap .tap__app-dot {
display: none;
}
.tap .tap__app-prog {
left: 10px;
right: 10px;
bottom: 3px;
height: 2px;
}
.tap .tap__show {
grid-template-columns: 280px minmax(0, 1fr);
min-height: 0;
padding: 40px 32px 40px 12px;
}
.tap .tap__device {
height: 470px;
}
.tap .tap__phone {
width: 210px;
height: 430px;
}
.tap .tap__glow {
left: 150px;
}
}
@media (max-width: 767px) {
.tap {
--tap-cols: 1;
--tap-gutter: 16px;
--tap-top: 56px;
--tap-bottom: 56px;
--tap-head: 28px;
}
.tap .tap__title {
font-size: 30px;
}
.tap .tap__text {
font-size: 15px;
}
.tap .tap__filter-wrap,
.tap .tap__list-wrap {
--tk-hs-inset: 8px;
width: calc(100% + 32px);
margin: 0 -16px;
}
.tap .tap__filter,
.tap .tap__list {
padding-left: 16px;
padding-right: 16px;
}
.tap .tap__show {
grid-template-columns: minmax(0, 1fr);
padding: 28px 22px 26px;
border-radius: 20px;
} .tap .tap__device {
justify-content: flex-start;
height: 390px;
}
.tap .tap__phone {
width: 180px;
height: 368px;
padding: 6px;
border-radius: 30px;
}
.tap .tap__screen {
inset: 6px;
border-radius: 25px;
}
.tap .tap__ring {
left: 90px;
width: 290px;
height: 290px;
margin: -145px 0 0 -145px;
}
.tap .tap__ring--2 {
width: 350px;
height: 350px;
margin: -175px 0 0 -175px;
}
.tap .tap__glow {
top: 223px;
left: 112px;
width: 400px;
height: 400px;
margin: -200px 0 0 -200px;
}
.tap .tap__details {
gap: 22px;
padding-left: 0;
}
.tap .tap__d-name {
font-size: 32px;
}
.tap .tap__d-stores {
width: 100%;
}
.tap .tap__d-stores a.tap__store {
flex: 1 1 140px;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.tap .tap__ray--flow,
.tap .tap__ring--2,
.tap .tap__phone,
.tap .tap__detail.is-active > *,
.tap .tap__screen.is-entering,
.tap .tap__phone.is-switch .tap__sweep {
animation: none;
}
.tap .tap__show {
transition: none;
}
.tap .tap__card,
.tap .tap__card:hover,
.tap .tap__card:hover .tap__card-phone {
transform: none;
}
}.elementor .e-div-block-base{min-width:30px;padding:10px;display:block;}.elementor .e-flexbox-base{padding:10px;display:flex;flex-direction:row;}.elementor .e-grid-base{column-gap:20px;padding:10px;display:grid;row-gap:20px;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(2, 1fr);}.elementor .e-tabs-base{padding-block-start:0px;display:flex;flex-direction:column;gap:30px;}.elementor .e-tabs-menu-base{display:flex;justify-content:center;}.elementor .e-tab-base{width:160px;color:#0C0D0E;cursor:pointer;padding:8px;border-width:2px;border-color:#E0E0E0;border-style:solid;background-color:#FFFFFF;display:block;}.elementor .e-tab-base.e--selected{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:focus{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:hover,.elementor .e-tab-base:focus-visible{background-color:#E0E0E0;}.elementor .e-tabs-content-area-base{display:block;}.elementor .e-tab-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-accordion-base{padding:0px;display:flex;flex-direction:column;}.elementor .e-accordion-item-base{padding:0px;display:block;}.elementor .e-accordion-item-header-base{cursor:pointer;padding:10px;display:flex;gap:8px;justify-content:space-between;align-items:center;}.elementor .e-accordion-item-title-base{padding:0px;}.elementor .e-accordion-item-icon-base{width:200px;height:20px;padding:0px;display:inline-flex;flex:0 0 auto;justify-content:flex-end;align-items:center;}.elementor .e-accordion-item-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-background-video-base{width:100%;overflow:hidden;position:relative;padding:10px;display:flex;flex-direction:column;}.elementor .e-background-video-content-base{width:100%;position:relative;z-index:1;padding:0px;display:flex;flex-direction:column;flex:1 1 auto;}.elementor .e-background-video-controls-base{width:auto;position:absolute;inset-inline-end:20px;inset-block-end:20px;z-index:2;display:flex;gap:8px;}.elementor .e-background-video-play-base{cursor:pointer;padding:8px;border-style:none;background-color:transparent;display:inline-flex;justify-content:center;align-items:center;}.elementor .e-background-video-pause-base{cursor:pointer;padding:8px;border-style:none;background-color:transparent;display:inline-flex;justify-content:center;align-items:center;}.elementor .e-form-base{padding:20px;display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;align-content:start;align-items:flex-start;}.elementor .e-form-base .e-form-checkbox-row{padding:0px;gap:8px;align-items:center;}.elementor .e-form-success-message-base{font-size:12px;color:#2F532E;text-align:center;padding:12px;background-color:#D4E9D6;display:none;}.elementor .e-form-error-message-base{font-size:12px;color:#870000;text-align:center;padding:12px;background-color:#ffdede;display:none;}.elementor .e-collection-loop-base{display:block;}.elementor .e-collection-loop-layout-base{display:grid;gap:20px;grid-template-columns:repeat(3, 1fr);grid-auto-rows:1fr;}.elementor .e-pagination-base{padding-block-start:8px;padding-block-end:8px;padding-inline-start:8px;padding-inline-end:8px;margin-block-start:8px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;align-items:center;}.elementor .e-pagination-prev-base{font-size:14px;color:#1F2937;text-align:center;text-decoration:none;padding-block-start:8px;padding-block-end:8px;padding-inline-start:12px;padding-inline-end:12px;border-radius:4px;border-width:1px;border-color:#E5E7EB;border-style:solid;display:inline-flex;gap:8px;align-items:center;}.elementor .e-pagination-next-base{font-size:14px;color:#1F2937;text-align:center;text-decoration:none;padding-block-start:8px;padding-block-end:8px;padding-inline-start:12px;padding-inline-end:12px;border-radius:4px;border-width:1px;border-color:#E5E7EB;border-style:solid;display:inline-flex;gap:8px;align-items:center;}.elementor .e-collection-loop-empty-state-base{display:flex;justify-content:center;}.elementor .e-heading-base{margin:0px;}.elementor .e-heading-link-base{all:unset;cursor:pointer;}.elementor .e-image-link-base{width:fit-content;all:unset;cursor:pointer;display:inherit;}.elementor .e-image-base{display:block;}.elementor .e-paragraph-base{margin:0px;}.elementor .e-paragraph-link-base{all:unset;cursor:pointer;}.elementor .e-svg-base{width:65px;height:65px;display:inline-block;}.elementor .e-button-base{text-align:center;padding-block-start:12px;padding-block-end:12px;padding-inline-start:24px;padding-inline-end:24px;border-radius:2px;border-width:0px;background-color:#375EFB;display:inline-block;}.elementor .e-youtube-base{overflow:hidden;aspect-ratio:16/9;}.elementor .e-divider-base{width:100%;height:1px;border-width:0px;border-color:transparent;border-style:none;background-color:#000;}.elementor .e-self-hosted-video-base{max-width:100vw;aspect-ratio:16/9;display:inline-block;}.elementor .e-form-input-base{height:36px;font-size:12px;color:#0c0d0e;border-radius:0px;border-color:#D6D5D5;}.elementor .e-form-input-base:focus{border-color:#706F6F;outline-style:none;}.elementor .e-form-input-base::placeholder{color:#9DA5AE;}.elementor .e-form-label-base{font-size:14px;color:#0c0d0e;}.elementor .e-form-textarea-base{font-size:12px;border-radius:0px;border-color:#D6D5D5;}.elementor .e-form-textarea-base:focus{border-color:#706F6F;outline-style:none;}.elementor .e-form-textarea-base::placeholder{color:#9DA5AE;}.elementor .e-form-submit-button-base{color:#fff;padding-block-start:10px;padding-block-end:10px;padding-inline-start:28px;padding-inline-end:30px;border-radius:0px;border-width:0px;background-color:#000;display:flex;justify-content:center;align-items:center;}.elementor .e-form-submit-button-base:hover,.elementor .e-form-submit-button-base:focus-visible{background-color:#323232;}.elementor .e-form-checkbox-base{width:1.15em;height:1.15em;color:#ffffff;border-radius:0px;border-width:1px;border-color:#D6D5D5;border-style:solid;background-color:transparent;transition:background-color 200ms;display:grid;justify-items:center;align-items:center;appearance:none;}.elementor .e-form-checkbox-base:focus{border-color:#706F6F;outline-style:none;}.elementor .e-form-checkbox-base:checked{background-color:#69727D;}.elementor .e-form-checkbox-base::before{width:65%;height:65%;background-color:currentColor;opacity:0%;transform-origin:0% 100% 0px;transition:opacity 200ms;content:"";clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);}.elementor .e-form-checkbox-base:checked::before{opacity:100%;}.elementor .e-form-radio-button-base{width:1.15em;height:1.15em;color:#ffffff;border-radius:50%;border-width:1px;border-color:#D6D5D5;border-style:solid;background-color:transparent;display:grid;justify-items:center;align-items:center;appearance:none;}.elementor .e-form-radio-button-base:focus{border-color:#706F6F;outline-style:none;}.elementor .e-form-radio-button-base:checked{background-color:transparent;}.elementor .e-form-radio-button-base::before{width:65%;height:65%;border-radius:50%;background-color:#706F6F;opacity:0%;transition:opacity 200ms;content:"";}.elementor .e-form-radio-button-base:checked::before{opacity:100%;}.elementor .e-form-date-picker-base{width:100%;height:36px;font-size:12px;color:#0c0d0e;border-radius:0px;border-width:1px;border-color:#D6D5D5;border-style:solid;}.elementor .e-form-date-picker-base:focus{border-color:#706F6F;outline-style:none;}.elementor .e-form-time-picker-base{width:100%;height:36px;font-size:12px;color:#0c0d0e;border-radius:0px;border-width:1px;border-color:#D6D5D5;border-style:solid;}.elementor .e-form-time-picker-base:focus{border-color:#706F6F;outline-style:none;}.elementor .e-form-select-base{font-size:12px;border-width:1px;border-color:#D6D5D5;border-style:solid;background-color:transparent;}.elementor .e-form-select-base:focus{border-color:#706F6F;outline-style:none;}.elementor .e-form-file-upload-base{height:36px;font-size:12px;color:#0c0d0e;border-radius:0px;border-color:#D6D5D5;}.elementor .e-form-file-upload-base:focus{border-color:#706F6F;outline-style:none;}