:root {
--tp180-ink: #696667;
--tp180-ink-dark: #3b3a3a;
--tp180-ink-soft: rgba(105, 102, 103, 0.86);
--tp180-blue: #005786;
--tp180-blue-bright: #367ff0;
--tp180-red: #ef2c2f;
--tp180-line: rgba(105, 102, 103, 0.22);
--tp180-white: #ffffff;
--tp180-container: 1254px;
--tp180-gutter: clamp(20px, 5.75vw, 83px);
--tp180-radius-card: 25px;
--tp180-radius-photo: 30px;
--tp180-gradient: linear-gradient(90deg, var(--tp180-blue) 0%, var(--tp180-red) 100%);
--tp180-shadow: 0 18px 45px rgba(19, 29, 40, 0.14);
--tp180-ease: cubic-bezier(.2, .75, .25, 1);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
min-width: 320px;
background: #fff;
color: var(--tp180-ink);
font-family: Inter, Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
video,
svg {
display: block;
max-width: 100%;
}
button,
a {
font: inherit;
} .tp-skip-link {
position: fixed;
z-index: 12000;
top: 10px;
left: 10px;
padding: 10px 14px;
border-radius: 6px;
background: #000;
color: #fff;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transform: translateY(-160%);
transition: transform 180ms ease;
}
.tp-skip-link:focus {
transform: translateY(0);
}
.tp-header {
position: relative;
z-index: 9999;
width: 100%;
height: 72px;
background: #fff;
color: #050505;
font-family: Arial, Helvetica, sans-serif;
}
.tp-header-inner {
display: flex;
width: 100%;
max-width: 1480px;
height: 72px;
margin: 0 auto;
padding: 0 38px;
align-items: center;
}
.tp-logo {
display: flex;
flex: 0 0 auto;
margin-right: auto;
align-items: center;
}
.tp-logo img {
display: block;
width: 105px;
height: auto;
max-width: none;
}
.tp-nav {
display: flex;
height: 100%;
gap: 13px;
align-items: center;
justify-content: center;
}
.tp-nav-item {
position: relative;
display: flex;
height: 100%;
align-items: center;
}
.tp-nav-link {
display: flex;
height: 100%;
align-items: center;
color: #050505;
font-size: 10px;
font-weight: 500;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: opacity 180ms ease;
}
.tp-nav-link:hover,
.tp-nav-link:focus-visible,
.tp-nav-link[aria-expanded="true"] {
opacity: 0.55;
}
.tp-nav-link:focus-visible,
.tp-social a:focus-visible,
.tp-mobile-toggle:focus-visible,
.tp-mobile-close:focus-visible,
.tp-mobile-nav a:focus-visible,
.tp-mobile-group summary:focus-visible {
outline: 2px solid #367ff0;
outline-offset: 4px;
}
.tp-arrow {
width: 0;
height: 0;
margin-left: 5px;
border-right: 3px solid transparent;
border-left: 3px solid transparent;
border-top: 4px solid #000;
transition: transform 180ms ease;
}
.tp-nav-link[aria-expanded="true"] .tp-arrow {
transform: rotate(180deg);
}
.tp-mega-menu {
position: absolute;
top: 72px;
left: 0;
width: 100%;
background: #000;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-3px);
transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}
.tp-header.mega-open .tp-mega-menu.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.tp-mega-inner {
display: grid;
max-width: 1300px;
margin: 0 auto;
padding: 29px 90px 31px;
gap: 0;
}
.tp-mega-photo .tp-mega-inner {
grid-template-columns: repeat(4, 1fr);
}
.tp-mega-video .tp-mega-inner {
max-width: 650px;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
}
.tp-mega-special .tp-mega-inner {
max-width: 720px;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
}
.tp-mega-column {
padding: 0 24px;
border-right: 1px solid rgba(255, 255, 255, 0.23);
}
.tp-mega-column:first-child {
padding-left: 0;
}
.tp-mega-column:last-child {
border-right: 0;
}
.tp-mega-link {
display: block;
margin-bottom: 17px;
color: #fff;
font-size: 12px;
font-weight: 500;
line-height: 1.1;
text-decoration: none;
transition: opacity 180ms ease;
}
.tp-mega-link:last-child {
margin-bottom: 0;
}
.tp-mega-link:hover,
.tp-mega-link:focus-visible {
opacity: 0.55;
}
.tp-link--disabled {
cursor: default;
}
.tp-social {
display: flex;
margin-left: auto;
padding-left: 36px;
gap: 19px;
align-items: center;
}
.tp-social a,
.tp-mobile-social a {
display: grid;
color: currentColor;
place-items: center;
text-decoration: none;
transition: opacity 180ms ease;
}
.tp-social a {
width: 16px;
height: 16px;
color: #111;
}
.tp-social a:hover,
.tp-mobile-social a:hover {
opacity: 0.55;
}
.tp-social svg,
.tp-mobile-social svg {
width: 100%;
height: 100%;
overflow: visible;
fill: currentColor;
stroke: currentColor;
stroke-width: 0;
}
.tp-social svg rect,
.tp-mobile-social svg rect,
.tp-social svg circle,
.tp-mobile-social svg circle {
fill: none;
stroke-width: 2;
}
.tp-social svg circle:last-child,
.tp-mobile-social svg circle:last-child {
fill: currentColor;
stroke: none;
}
.tp-social .tp-social__play,
.tp-mobile-social .tp-social__play {
fill: #fff;
stroke: none;
}
.tp-mobile-toggle {
display: none;
width: 44px;
height: 44px;
margin-left: auto;
padding: 10px;
border: 0;
background: transparent;
cursor: pointer;
}
.tp-mobile-toggle span {
display: block;
width: 24px;
height: 2px;
margin: 5px auto;
border-radius: 2px;
background: #050505;
}
.tp-mobile-backdrop {
position: fixed;
z-index: 10000;
inset: 0;
background: rgba(0, 0, 0, 0.58);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 260ms ease, visibility 260ms ease;
}
.tp-mobile-panel {
position: fixed;
z-index: 10001;
top: 0;
right: 0;
display: flex;
width: min(92vw, 430px);
height: 100vh;
height: 100dvh;
padding: 0 26px 28px;
overflow-y: auto;
flex-direction: column;
background: #050505;
color: #fff;
visibility: hidden;
transform: translateX(100%);
transition: transform 320ms cubic-bezier(.2, .75, .25, 1), visibility 320ms ease;
overscroll-behavior: contain;
}
.tp-header.mobile-open .tp-mobile-backdrop {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.tp-header.mobile-open .tp-mobile-panel {
visibility: visible;
transform: translateX(0);
}
.tp-mobile-panel__top {
position: sticky;
z-index: 2;
top: 0;
display: flex;
min-height: 82px;
padding: 18px 0;
align-items: center;
justify-content: space-between;
background: #050505;
}
.tp-mobile-panel__logo img {
width: 132px;
height: auto;
max-width: none;
}
.tp-mobile-close {
position: relative;
width: 44px;
height: 44px;
border: 0;
background: transparent;
cursor: pointer;
}
.tp-mobile-close span {
position: absolute;
top: 21px;
left: 10px;
width: 25px;
height: 2px;
background: #fff;
}
.tp-mobile-close span:first-child {
transform: rotate(45deg);
}
.tp-mobile-close span:last-child {
transform: rotate(-45deg);
}
.tp-mobile-nav {
display: grid;
padding: 12px 0 28px;
}
.tp-mobile-link,
.tp-mobile-group summary {
display: flex;
min-height: 52px;
padding: 15px 2px;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.17);
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.2;
text-decoration: none;
}
.tp-mobile-group summary {
cursor: pointer;
list-style: none;
}
.tp-mobile-group summary::-webkit-details-marker {
display: none;
}
.tp-mobile-group summary span {
position: relative;
width: 14px;
height: 14px;
margin-left: 14px;
}
.tp-mobile-group summary span::before,
.tp-mobile-group summary span::after {
position: absolute;
top: 6px;
left: 1px;
width: 12px;
height: 1px;
background: #fff;
content: "";
transition: transform 180ms ease;
}
.tp-mobile-group summary span::after {
transform: rotate(90deg);
}
.tp-mobile-group[open] summary span::after {
transform: rotate(0);
}
.tp-mobile-submenu {
display: grid;
padding: 9px 0 14px 16px;
gap: 0;
background: #0d0d0d;
}
.tp-mobile-submenu a {
padding: 10px 4px;
color: rgba(255, 255, 255, 0.83);
font-size: 13px;
font-weight: 500;
line-height: 1.3;
text-decoration: none;
}
.tp-mobile-submenu a:hover,
.tp-mobile-submenu a:focus-visible,
.tp-mobile-link:hover,
.tp-mobile-link:focus-visible {
color: #fff;
}
.tp-mobile-social {
display: flex;
margin-top: auto;
padding-top: 18px;
gap: 24px;
color: #fff;
}
.tp-mobile-social a {
width: 22px;
height: 22px;
}
body.tp-menu-lock {
overflow: hidden;
}
@media (max-width: 1180px) and (min-width: 1051px) {
.tp-header-inner {
padding-inline: 24px;
}
.tp-nav {
gap: 9px;
}
.tp-nav-link {
font-size: 9px;
}
.tp-social {
padding-left: 20px;
gap: 14px;
}
}
@media (max-width: 1050px) {
.tp-nav,
.tp-social,
.tp-mega-menu {
display: none;
}
.tp-mobile-toggle {
display: block;
}
.tp-header-inner {
padding-right: 25px;
padding-left: 25px;
}
.tp-logo img {
width: 116px;
}
}
@media (max-width: 480px) {
.tp-header-inner {
padding-inline: 18px;
}
.tp-mobile-panel {
width: 100%;
padding-inline: 22px;
}
}
.tp180-page {
position: relative;
isolation: isolate;
width: 100%;
overflow: hidden;
background:
radial-gradient(circle at -8% 2%, rgba(237, 44, 166, 0.12), transparent 18%),
radial-gradient(circle at 106% 10%, rgba(237, 44, 166, 0.10), transparent 17%),
radial-gradient(circle at 102% 57%, rgba(53, 122, 240, 0.11), transparent 22%),
linear-gradient(#fff, #fff);
}
.tp180-page::before,
.tp180-page::after {
position: absolute;
z-index: -1;
width: 44rem;
height: 44rem;
border-radius: 50%;
content: "";
filter: blur(110px);
opacity: 0.14;
pointer-events: none;
}
.tp180-page::before {
top: -28rem;
left: -28rem;
background: #f226a7;
}
.tp180-page::after {
top: 48rem;
right: -31rem;
background: #f226a7;
}
.tp180-section {
position: relative;
}
.tp180-shell {
width: min(calc(100% - (2 * var(--tp180-gutter))), var(--tp180-container));
margin-inline: auto;
}
.tp180-badge {
display: flex;
width: fit-content;
min-height: 36px;
margin: 0 auto;
padding: 7px 40px;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--tp180-gradient);
color: #fff;
font-size: clamp(12px, 1.25vw, 18px);
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.2;
text-align: center;
}
.tp180-gradient-text,
.tp180-section-title--gradient {
color: var(--tp180-blue);
background: var(--tp180-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tp180-hero {
padding-top: clamp(72px, 12.9vw, 186px);
}
.tp180-hero__inner {
text-align: center;
}
.tp180-hero__title {
display: grid;
gap: 0;
margin: clamp(18px, 2vw, 22px) auto 0;
color: var(--tp180-ink);
font-size: clamp(38px, 4.18vw, 60px);
font-weight: 900;
letter-spacing: -0.045em;
line-height: 1.08;
}
.tp180-hero-fan {
position: relative;
width: min(100%, 1050px);
height: clamp(360px, 40vw, 575px);
margin: clamp(18px, 3.25vw, 46px) auto 0;
}
.tp180-hero-fan::after {
position: absolute;
z-index: 0;
bottom: 5.5%;
left: 50%;
width: 28%;
height: 14px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.23);
content: "";
filter: blur(14px);
transform: translateX(-50%);
}
.tp180-fan-card {
--tp180-fan-width: 200px;
--tp180-fan-x: -50%;
--tp180-fan-y: -50%;
--tp180-fan-rotate: 0deg;
--tp180-fan-radius: clamp(24px, 4vw, 60px);
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: var(--tp180-fan-width);
aspect-ratio: 220.127 / 277.038;
margin: 0;
transform: translate(var(--tp180-fan-x), var(--tp180-fan-y));
transform-origin: center;
}
.tp180-fan-card__rotator {
position: absolute;
inset: 0;
border-radius: var(--tp180-fan-radius);
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.20);
transform: rotate(var(--tp180-fan-rotate));
transform-origin: center;
transition: box-shadow 420ms var(--tp180-ease);
}
.tp180-fan-card__frame {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
background: #fff;
clip-path: inset(0 round var(--tp180-fan-radius));
contain: paint;
isolation: isolate;
-webkit-mask-image: -webkit-radial-gradient(white, black);
transform: translateZ(0);
}
.tp180-fan-card img,
.tp180-fan-card video {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
backface-visibility: hidden;
transform: translateZ(0);
}
.tp180-fan-card--outer-left {
--tp180-fan-width: clamp(153px, 15.5vw, 220.127px);
--tp180-fan-x: -261.82%;
--tp180-fan-y: -67.01%;
--tp180-fan-rotate: -29.33deg;
z-index: 1;
}
.tp180-fan-card--inner-left {
--tp180-fan-width: clamp(190px, 20vw, 279.662px);
--tp180-fan-x: -150.16%;
--tp180-fan-y: -63.39%;
--tp180-fan-rotate: -17.45deg;
z-index: 2;
}
.tp180-fan-card--center {
--tp180-fan-width: clamp(249px, 26.5vw, 371.41px);
--tp180-fan-x: -51.47%;
--tp180-fan-y: -60.08%;
--tp180-fan-rotate: -12.02deg;
z-index: 5;
aspect-ratio: 371.41 / 467.434;
}
.tp180-fan-card--inner-right {
--tp180-fan-width: clamp(190px, 20vw, 279.662px);
--tp180-fan-x: 40.51%;
--tp180-fan-y: -63.39%;
--tp180-fan-rotate: 9.03deg;
z-index: 3;
}
.tp180-fan-card--outer-right {
--tp180-fan-width: clamp(153px, 15.5vw, 220.127px);
--tp180-fan-x: 152.77%;
--tp180-fan-y: -67.01%;
--tp180-fan-rotate: 23.47deg;
z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
.tp180-fan-card:hover .tp180-fan-card__rotator {
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
}
}
.tp180-hero__intro {
max-width: 694px;
margin: clamp(4px, 1vw, 14px) auto 0;
color: var(--tp180-ink);
font-size: clamp(15px, 1.25vw, 18px);
font-weight: 500;
line-height: 1.55;
}
.tp180-media-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(10px, 1.35vw, 19px);
}
.tp180-media-grid--opening {
margin-top: clamp(46px, 4vw, 58px);
}
.tp180-media-card {
position: relative;
margin: 0;
overflow: hidden;
border-radius: var(--tp180-radius-card);
background: #101010;
box-shadow: 0 8px 20px rgba(9, 19, 31, 0.06);
isolation: isolate;
}
.tp180-media-grid--opening .tp180-media-card {
aspect-ratio: 9 / 16;
}
.tp180-video {
width: 100%;
pointer-events: none;
height: 100%;
border: 0;
background: #111;
object-fit: cover;
}
.tp180-media-card::after {
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: inherit;
content: "";
pointer-events: none;
}
.tp180-story {
padding-top: clamp(75px, 6.2vw, 90px);
}
.tp180-section-title {
margin: 0;
color: var(--tp180-ink);
font-size: clamp(36px, 4.2vw, 60px);
font-weight: 900;
letter-spacing: -0.045em;
line-height: 1.09;
text-align: center;
}
.tp180-section-title--story {
display: grid;
font-size: clamp(34px, 3.75vw, 54px);
}
.tp180-kicker {
margin: clamp(18px, 2.35vw, 34px) auto 0;
color: var(--tp180-ink);
font-size: clamp(16px, 1.4vw, 20px);
font-weight: 500;
line-height: 1.45;
text-align: center;
}
.tp180-story__copy {
max-width: 1224px;
margin: clamp(36px, 4.4vw, 64px) auto 0;
color: var(--tp180-ink);
font-size: clamp(16px, 1.6vw, 23px);
line-height: 1.6;
text-align: center;
}
.tp180-story__copy p {
margin: 0;
}
.tp180-story__copy p + p {
margin-top: 1.25em;
}
.tp180-photo-mosaic {
display: grid;
grid-template-columns: minmax(0, 1.89fr) minmax(260px, 1fr);
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: clamp(18px, 2.55vw, 37px);
height: min(56.35vw, 812px);
min-height: 570px;
margin-top: clamp(58px, 6.7vw, 96px);
}
.tp180-photo-mosaic figure {
margin: 0;
overflow: hidden;
border-radius: var(--tp180-radius-photo);
background: #ececec;
}
.tp180-photo-mosaic__main {
grid-row: 1 / span 2;
}
.tp180-photo-mosaic img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tp180-photo-mosaic__main img {
object-position: 50% 46%;
}
.tp180-photo-mosaic__side:first-of-type img {
object-position: 50% 48%;
}
.tp180-photo-mosaic__side:last-of-type img {
object-position: 50% 48%;
}
.tp180-process {
padding-top: clamp(58px, 4vw, 58px);
}
.tp180-section-title--gradient {
max-width: 1195px;
margin: clamp(50px, 4.8vw, 69px) auto 0;
}
.tp180-process-list {
margin: clamp(54px, 6vw, 87px) 0 0;
padding: 0;
list-style: none;
counter-reset: tp180-step;
border-top: 1px solid var(--tp180-line);
}
.tp180-process-item {
display: grid;
grid-template-columns: minmax(280px, 0.45fr) minmax(0, 0.55fr);
gap: clamp(35px, 7vw, 100px);
min-height: 143px;
padding: 30px clamp(10px, 6.3vw, 90px);
align-items: start;
border-bottom: 1px solid var(--tp180-line);
counter-increment: tp180-step;
}
.tp180-process-item h3 {
position: relative;
margin: 0;
padding-left: 48px;
color: rgba(16, 15, 15, 0.5);
font-size: clamp(19px, 1.7vw, 24px);
font-weight: 800;
line-height: 1.35;
}
.tp180-process-item h3::before {
position: absolute;
top: 0;
left: 0;
content: counter(tp180-step) ".";
font-variant-numeric: tabular-nums;
}
.tp180-process-item p {
margin: 0;
color: var(--tp180-ink-soft);
font-size: clamp(16px, 1.4vw, 20px);
font-weight: 500;
line-height: 1.55;
}
.tp180-benefits {
padding-top: clamp(54px, 3.75vw, 54px);
}
.tp180-section-title--benefits {
font-size: clamp(36px, 4.2vw, 60px);
}
.tp180-benefits-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(34px, 5.25vw, 76px);
margin-top: clamp(54px, 5.5vw, 80px);
}
.tp180-benefit {
text-align: center;
}
.tp180-benefit__icon {
width: clamp(68px, 6.25vw, 90px);
margin: 0 auto;
color: var(--tp180-blue-bright);
}
.tp180-benefit__icon svg {
width: 100%;
height: auto;
overflow: visible;
fill: currentColor;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 7;
}
.tp180-benefit__icon svg rect,
.tp180-benefit__icon svg circle,
.tp180-benefit__icon svg path {
vector-effect: non-scaling-stroke;
}
.tp180-benefit__icon--picture svg {
fill: none;
stroke-width: 6;
}
.tp180-benefit__icon--picture svg circle {
fill: currentColor;
stroke: none;
}
.tp180-benefit h3 {
margin: 12px 0 0;
color: var(--tp180-blue);
font-size: clamp(18px, 1.4vw, 20px);
font-weight: 900;
line-height: 1.2;
}
.tp180-benefit h3 {
background: var(--tp180-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tp180-benefit p {
max-width: 350px;
margin: 16px auto 0;
color: var(--tp180-ink);
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.55;
}
.tp180-requirements {
padding-top: clamp(62px, 5.75vw, 82px);
}
.tp180-requirements::before {
position: absolute;
z-index: -1;
top: -13rem;
right: -28rem;
width: 43rem;
height: 43rem;
border-radius: 50%;
background: rgba(51, 121, 239, 0.14);
content: "";
filter: blur(100px);
pointer-events: none;
}
.tp180-requirements-grid {
display: grid;
grid-template-columns: minmax(370px, 0.38fr) minmax(0, 0.62fr);
gap: clamp(34px, 5.6vw, 80px);
align-items: start;
}
.tp180-requirements__title {
display: grid;
margin: 0;
color: var(--tp180-ink);
font-size: clamp(42px, 3.75vw, 54px);
font-weight: 900;
letter-spacing: -0.045em;
line-height: 1.2;
}
.tp180-spec-list {
display: grid;
gap: 22px;
margin: clamp(30px, 3vw, 43px) 0 0;
}
.tp180-spec-list div {
display: grid;
gap: 1px;
}
.tp180-spec-list dt {
color: var(--tp180-ink);
font-size: clamp(16px, 1.2vw, 17px);
font-style: italic;
font-weight: 900;
line-height: 1.25;
}
.tp180-spec-list dd {
max-width: 375px;
margin: 0;
color: var(--tp180-ink);
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.45;
}
.tp180-requirements__image {
margin: 0;
overflow: hidden;
border-radius: clamp(30px, 4.6vw, 66px);
background: #e9e9e9;
box-shadow: 0 12px 32px rgba(13, 30, 46, 0.06);
}
.tp180-requirements__image img {
width: 100%;
height: auto;
}
.tp180-media-grid--final {
margin-top: clamp(66px, 5.9vw, 85px);
row-gap: clamp(22px, 2.4vw, 35px);
}
.tp180-media-grid--final .tp180-media-card {
aspect-ratio: 9 / 17.87;
}
.tp180-cta {
padding: clamp(56px, 3.9vw, 57px) 0 clamp(86px, 8vw, 118px);
}
.tp180-cta__inner {
text-align: center;
}
.tp180-section-title--cta {
display: grid;
font-size: clamp(36px, 3.75vw, 54px);
}
.tp180-cta__brand {
margin: clamp(43px, 4.35vw, 63px) 0 0;
color: var(--tp180-ink-dark);
font-size: clamp(25px, 2.45vw, 35px);
font-weight: 600;
line-height: 1.2;
text-align: center;
}
.tp180-cta__copy {
max-width: 1096px;
margin: clamp(18px, 1.5vw, 22px) auto 0;
color: var(--tp180-ink-dark);
font-size: clamp(16px, 1.4vw, 20px);
line-height: 1.5;
}
.tp180-cta__button {
display: inline-flex;
width: min(304px, 100%);
min-height: 60px;
margin-top: clamp(38px, 3.8vw, 54px);
padding: 14px 30px;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 999px;
background: #ddd;
color: var(--tp180-ink-dark);
font-size: clamp(18px, 1.75vw, 25px);
font-weight: 500;
line-height: 1.1;
text-decoration: none;
transition: color 240ms ease, background 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}
.tp180-cta__button:hover {
background: var(--tp180-gradient);
color: #fff;
box-shadow: 0 12px 28px rgba(0, 87, 134, 0.22);
transform: translateY(-2px);
}
.tp180-cta__button:focus-visible {
outline: 4px solid rgba(54, 127, 240, 0.35);
outline-offset: 4px;
}
.tp180-reveal {
opacity: 1;
transform: translateY(18px);
transition: opacity 600ms var(--tp180-ease), transform 600ms var(--tp180-ease);
}
.tp180-js .tp180-reveal {
opacity: 0;
transform: translateY(18px);
}
.tp180-js .tp180-reveal.tp180-is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 1100px) {
.tp180-hero-fan {
width: min(100%, 900px);
}
.tp180-process-item {
grid-template-columns: minmax(250px, 0.42fr) minmax(0, 0.58fr);
padding-inline: 24px;
}
.tp180-requirements-grid {
grid-template-columns: minmax(310px, 0.42fr) minmax(0, 0.58fr);
}
}
@media (max-width: 900px) {
:root {
--tp180-gutter: clamp(24px, 5vw, 46px);
}
.tp180-hero-fan {
height: clamp(330px, 54vw, 470px);
}
.tp180-fan-card--outer-left {
--tp180-fan-x: -245%;
}
.tp180-fan-card--inner-left {
--tp180-fan-x: -168%;
}
.tp180-fan-card--inner-right {
--tp180-fan-x: 68%;
}
.tp180-fan-card--outer-right {
--tp180-fan-x: 150%;
}
.tp180-photo-mosaic {
grid-template-columns: minmax(0, 1.65fr) minmax(220px, 1fr);
height: min(72vw, 700px);
min-height: 520px;
}
.tp180-process-item {
gap: 30px;
}
.tp180-benefits-grid {
gap: 28px;
}
.tp180-requirements-grid {
grid-template-columns: 1fr;
}
.tp180-requirements__content {
display: grid;
grid-template-columns: minmax(250px, 0.55fr) minmax(280px, 0.45fr);
gap: 36px;
align-items: end;
}
.tp180-spec-list {
margin-top: 0;
}
}
@media (max-width: 768px) {
:root {
--tp180-gutter: 24px;
--tp180-radius-card: 20px;
--tp180-radius-photo: 24px;
}
.tp180-page {
background:
radial-gradient(circle at -10% 0%, rgba(237, 44, 166, 0.13), transparent 15%),
radial-gradient(circle at 110% 10%, rgba(237, 44, 166, 0.10), transparent 18%),
radial-gradient(circle at 110% 58%, rgba(53, 122, 240, 0.10), transparent 18%),
#fff;
}
.tp180-hero {
padding-top: 60px;
}
.tp180-badge {
min-height: 32px;
padding-inline: 28px;
}
.tp180-hero__title {
letter-spacing: -0.04em;
}
.tp180-hero-fan {
width: calc(100% + 28px);
height: clamp(300px, 73vw, 450px);
margin-left: -14px;
}
.tp180-fan-card {
--tp180-fan-radius: clamp(22px, 6vw, 42px);
}
.tp180-fan-card--outer-left {
--tp180-fan-width: clamp(94px, 24vw, 150px);
--tp180-fan-x: -235%;
}
.tp180-fan-card--inner-left {
--tp180-fan-width: clamp(118px, 30vw, 185px);
--tp180-fan-x: -164%;
}
.tp180-fan-card--center {
--tp180-fan-width: clamp(158px, 39vw, 238px);
}
.tp180-fan-card--inner-right {
--tp180-fan-width: clamp(118px, 30vw, 185px);
--tp180-fan-x: 64%;
}
.tp180-fan-card--outer-right {
--tp180-fan-width: clamp(94px, 24vw, 150px);
--tp180-fan-x: 137%;
}
.tp180-hero__intro {
max-width: 580px;
}
.tp180-media-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.tp180-story {
padding-top: 68px;
}
.tp180-photo-mosaic {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto auto;
height: auto;
min-height: 0;
}
.tp180-photo-mosaic__main {
grid-column: 1 / -1;
grid-row: auto;
aspect-ratio: 16 / 12;
}
.tp180-photo-mosaic__side {
aspect-ratio: 4 / 5;
}
.tp180-process {
padding-top: 56px;
}
.tp180-section-title--gradient {
margin-top: 42px;
}
.tp180-process-list {
margin-top: 54px;
}
.tp180-process-item {
grid-template-columns: 1fr;
gap: 14px;
min-height: 0;
padding: 26px 8px;
}
.tp180-process-item h3 {
padding-left: 42px;
}
.tp180-process-item p {
padding-left: 42px;
}
.tp180-benefits-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.tp180-benefit p {
max-width: 460px;
}
.tp180-requirements__content {
grid-template-columns: 1fr;
gap: 26px;
align-items: start;
}
.tp180-spec-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tp180-spec-list div:last-child {
grid-column: 1 / -1;
}
.tp180-media-grid--final {
margin-top: 52px;
}
.tp180-cta {
padding-bottom: 80px;
}
}
@media (max-width: 560px) {
:root {
--tp180-gutter: 18px;
}
.tp180-hero {
padding-top: 44px;
}
.tp180-hero__title {
font-size: clamp(34px, 9.6vw, 46px);
}
.tp180-hero-fan {
width: calc(100% + 32px);
height: clamp(270px, 83vw, 385px);
margin-top: 10px;
margin-left: -16px;
}
.tp180-fan-card--outer-left {
--tp180-fan-width: clamp(79px, 23vw, 118px);
--tp180-fan-x: -230%;
}
.tp180-fan-card--inner-left {
--tp180-fan-width: clamp(101px, 29vw, 148px);
--tp180-fan-x: -157%;
}
.tp180-fan-card--center {
--tp180-fan-width: clamp(136px, 39vw, 198px);
}
.tp180-fan-card--inner-right {
--tp180-fan-width: clamp(101px, 29vw, 148px);
--tp180-fan-x: 56%;
}
.tp180-fan-card--outer-right {
--tp180-fan-width: clamp(79px, 23vw, 118px);
--tp180-fan-x: 130%;
}
.tp180-hero__intro {
margin-top: -2px;
font-size: 15px;
}
.tp180-media-grid {
gap: 10px;
}
.tp180-story__copy {
text-align: left;
}
.tp180-story__copy p + p {
margin-top: 1em;
}
.tp180-photo-mosaic {
gap: 12px;
}
.tp180-photo-mosaic__main {
aspect-ratio: 4 / 4.25;
}
.tp180-section-title,
.tp180-section-title--story,
.tp180-section-title--gradient,
.tp180-section-title--benefits,
.tp180-section-title--cta {
font-size: clamp(32px, 9vw, 42px);
}
.tp180-requirements__title {
font-size: clamp(38px, 10.5vw, 48px);
}
.tp180-spec-list {
grid-template-columns: 1fr;
}
.tp180-spec-list div:last-child {
grid-column: auto;
}
.tp180-requirements__image {
border-radius: 28px;
}
.tp180-cta__button {
width: min(280px, 100%);
}
}
@media (max-width: 390px) {
:root {
--tp180-gutter: 15px;
}
.tp180-badge {
padding-inline: 22px;
}
.tp180-hero-fan {
width: calc(100% + 24px);
height: 285px;
margin-left: -12px;
}
.tp180-fan-card--outer-left {
--tp180-fan-width: 75px;
--tp180-fan-x: -225%;
}
.tp180-fan-card--inner-left {
--tp180-fan-width: 96px;
--tp180-fan-x: -153%;
}
.tp180-fan-card--center {
--tp180-fan-width: 130px;
}
.tp180-fan-card--inner-right {
--tp180-fan-width: 96px;
--tp180-fan-x: 54%;
}
.tp180-fan-card--outer-right {
--tp180-fan-width: 75px;
--tp180-fan-x: 125%;
}
.tp180-media-grid {
gap: 8px;
}
.tp180-process-item p {
padding-left: 0;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.tp180-page *,
.tp180-page *::before,
.tp180-page *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
.tp180-reveal {
opacity: 1;
transform: none;
}
.tp180-fan-card:hover,
.tp180-cta__button:hover {
transform: none;
}
}