:root {
--td-spring: cubic-bezier(.34, 1.56, .64, 1);
--td-shadow-press: 2px 2px 0 var(--td-ink);
}
html,
body {
overflow-x: clip;
} .td-button,
.td-card,
.td-news-card,
.td-tag,
.td-url,
.td-category-card,
.td-modal__close {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.td-button:active,
.td-card:active,
.td-news-card:active,
.td-tag:active,
.td-url:active,
.td-category-card:active {
transform: translate(3px, 3px);
box-shadow: var(--td-shadow-press);
transition-duration: 60ms;
}
.td-button,
.td-tag,
.td-url {
transition: transform 220ms var(--td-spring), box-shadow 220ms var(--td-spring), background-color 180ms ease, filter 180ms ease;
} .td-article-shell.td-panel:hover,
.td-article-shell.td-panel:active {
transform: none;
box-shadow: var(--td-shadow);
}
.td-category-card:focus-visible,
.td-news-card a:focus-visible,
.td-url:focus-visible,
.td-tag:focus-visible {
outline: 4px solid var(--td-ink);
outline-offset: 3px;
box-shadow: 0 0 0 8px var(--td-yellow);
} .td-pop {
opacity: 0;
transform: scale(.6) rotate(-8deg);
}
.td-pop.is-popped {
animation: td-sticker-spring 720ms var(--td-spring) both;
animation-delay: calc(var(--td-stagger, 0) * 90ms);
}
@keyframes td-sticker-spring {
0% { opacity: 0; transform: scale(.6) rotate(-8deg); }
55% { opacity: 1; transform: scale(1.08) rotate(2deg); }
78% { transform: scale(.97) rotate(-1deg); }
100% { opacity: 1; transform: scale(1) rotate(var(--td-pop-rot, -2deg)); }
}  .td-springy {
transition: background-color 180ms ease;
will-change: transform;
} .td-springy:not(.td-reveal) {
animation: none !important;
}
.td-sticker-live {
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.td-hero-burst.td-sticker-live {
pointer-events: auto;
} .td-card.td-reveal.is-visible,
.td-news-card.td-reveal.is-visible {
animation: td-card-land 760ms var(--td-spring) backwards;
animation-delay: calc(var(--td-stagger, 0) * 70ms);
}
.td-card.td-reveal:nth-child(2n).is-visible,
.td-news-card.td-reveal:nth-child(2n).is-visible {
--td-land-rot: 4deg;
}
@keyframes td-card-land {
0% { opacity: 0; transform: translateY(70px) scale(.82) rotate(var(--td-land-rot, -4deg)); }
60% { opacity: 1; transform: translateY(-8px) scale(1.03) rotate(calc(var(--td-land-rot, -4deg) * -.25)); }
100% { opacity: 1; transform: none; }
} .td-tap-burst {
position: fixed;
left: var(--td-x);
top: var(--td-y);
z-index: 120;
width: 0;
height: 0;
pointer-events: none;
}
.td-tap-burst::before,
.td-tap-burst::after {
content: "";
position: absolute;
left: -38px;
top: -38px;
width: 76px;
height: 76px;
clip-path: polygon(50% 0, 61% 30%, 95% 18%, 72% 45%, 100% 62%, 66% 66%, 72% 100%, 50% 76%, 25% 98%, 31% 66%, 0 60%, 28% 44%, 6% 16%, 39% 30%);
background: var(--td-ink);
transform: rotate(var(--td-rot)) scale(0);
animation: td-tap-star 520ms var(--td-spring) forwards;
}
.td-tap-burst::after {
background: var(--td-c);
clip-path: polygon(50% 9%, 59% 35%, 86% 26%, 67% 47%, 90% 61%, 62% 62%, 66% 89%, 50% 70%, 31% 88%, 36% 62%, 9% 59%, 33% 46%, 15% 23%, 41% 35%);
}
.td-tap-burst i {
position: absolute;
left: -6px;
top: -6px;
width: 12px;
height: 12px;
border: 3px solid var(--td-ink);
border-radius: 50%;
background: var(--td-c);
animation: td-tap-dot 560ms cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes td-tap-star {
0% { opacity: 1; transform: rotate(var(--td-rot)) scale(0); }
45% { opacity: 1; transform: rotate(var(--td-rot)) scale(1.15); }
100% { opacity: 0; transform: rotate(calc(var(--td-rot) + 25deg)) scale(.9); }
}
@keyframes td-tap-dot {
0% { opacity: 1; transform: translate(0, 0) scale(1); }
100% { opacity: 0; transform: translate(var(--td-dx), var(--td-dy)) scale(.3); }
} @media (max-width: 768px) {
:root {
--td-shadow: 3px 3px 0 var(--td-ink);
--td-shadow-small: 3px 3px 0 var(--td-ink);
}
.td-shell {
overflow-x: clip;
} .td-kicker,
.td-speech,
.td-burst,
.td-url,
.td-url::after {
animation: none !important;
will-change: auto;
}
.td-comic-pop-fast {
animation: none;
} .td-hero-title-stack {
padding-bottom: 34px;
}
.td-hero-burst--boom {
left: auto;
right: 10px;
bottom: 0;
} .td-pop.is-popped {
animation: td-sticker-spring 720ms var(--td-spring) both !important;
} .td-button:hover,
.td-card:hover,
.td-news-card:hover,
.td-tag:hover,
.td-panel:hover,
.td-strip-cell:hover,
.td-compare-col:hover {
transform: none;
}
.td-category-card:hover,
.td-logistics-card:hover,
.td-strip-cell:hover,
.td-compare-col:hover,
.td-trust-chip:hover,
.td-warehouse:hover,
.td-media-card:hover,
.td-job-card:hover {
animation: none;
}
.td-nav a,
.td-tag,
.td-url,
.td-mobile-actions .td-button,
.td-footer__cookie-button {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.td-mobile-actions {
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
box-shadow: 0 -3px 0 var(--td-ink);
}
.td-mobile-actions .td-button {
justify-content: center;
box-shadow: var(--td-shadow-press);
}
.td-shell .td-modal button.td-modal__backdrop {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
@media (hover: hover) and (pointer: fine) {
.td-category-card:hover,
.td-news-card:hover {
box-shadow: 10px 10px 0 var(--td-ink);
}
} .td-article-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
}
.td-article-badge {
--td-pop-rot: -3deg;
display: inline-block;
padding: 8px 14px;
border: var(--td-border);
background: var(--td-accent);
color: #fff;
box-shadow: var(--td-shadow-small);
font-family: var(--td-font-mono);
font-size: 13px;
font-weight: 950;
letter-spacing: .08em;
text-transform: uppercase;
}
.td-article-stamp {
--td-pop-rot: 6deg;
display: inline-grid;
place-items: center;
width: 86px;
height: 86px;
border: var(--td-border);
border-radius: 50%;
background: var(--td-yellow);
box-shadow: var(--td-shadow-small);
font-family: var(--td-font-mono);
font-size: 11px;
font-weight: 900;
line-height: 1;
text-align: center;
}
.td-article-stamp span {
display: block;
font-family: var(--td-font-display);
font-size: 34px;
}
.td-article-title {
display: block;
margin-top: 22px;
}
.td-article-lead {
position: relative;
margin-top: 30px;
padding: 18px 22px;
border: var(--td-border);
border-radius: 28px;
background: var(--td-surface);
box-shadow: var(--td-shadow-small);
font-weight: 700;
}
.td-article-lead::after {
content: "";
position: absolute;
left: 46px;
bottom: -19px;
width: 26px;
height: 26px;
border-right: var(--td-border);
border-bottom: var(--td-border);
background: var(--td-surface);
transform: rotate(45deg) skew(8deg, 8deg);
}
.td-article__main {
display: grid;
gap: 34px;
min-width: 0;
}
.td-article__main > * {
min-width: 0;
}
.td-article-summary {
padding: 22px 24px;
border: var(--td-border);
background: var(--td-soft);
box-shadow: var(--td-shadow-small);
transform: rotate(-.6deg);
}
.td-article-summary__title {
display: inline-block;
margin: -38px 0 14px -6px;
padding: 6px 12px;
border: 3px solid var(--td-ink);
background: var(--td-cyan);
font-family: var(--td-font-display);
font-size: 22px;
text-transform: uppercase;
transform: rotate(-2deg);
}
.td-article-summary ol {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
counter-reset: td-point;
}
.td-article-summary li {
counter-increment: td-point;
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 12px;
align-items: start;
font-weight: 800;
line-height: 1.3;
}
.td-article-summary li::before {
content: counter(td-point);
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 3px solid var(--td-ink);
background: var(--td-yellow);
font-family: var(--td-font-display);
font-size: 18px;
}
.td-article-summary a {
display: inline-block;
min-height: 34px;
padding-top: 6px;
color: var(--td-ink);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.td-article-summary a:hover {
background: var(--td-yellow);
}
.td-article__body :where(h2) {
scroll-margin-top: 110px;
width: fit-content;
max-width: 100%;
padding: 6px 12px;
background: var(--td-yellow);
box-shadow: 4px 4px 0 var(--td-ink);
border: 3px solid var(--td-ink);
}
.td-article__body :where(h3) {
padding-left: 14px;
border-left: 8px solid var(--td-accent);
}
.td-article__body ul {
padding-left: 0;
list-style: none;
}
.td-article__body ul > li {
position: relative;
margin-bottom: 10px;
padding-left: 34px;
}
.td-article__body ul > li::before {
content: "";
position: absolute;
left: 0;
top: .38em;
width: 18px;
height: 18px;
border: 3px solid var(--td-ink);
background: var(--td-cyan);
box-shadow: 2px 2px 0 var(--td-ink);
transform: rotate(8deg);
}
.td-article__body ol > li::marker {
font-family: var(--td-font-display);
color: var(--td-accent);
}
.td-article__body blockquote {
position: relative;
border-radius: 28px;
transform: rotate(-.6deg);
}
.td-article__body blockquote::before {
content: "“";
position: absolute;
top: -30px;
left: 16px;
font-family: var(--td-font-display);
font-size: 84px;
line-height: 1;
color: var(--td-accent);
-webkit-text-stroke: 2px var(--td-ink);
}
.td-article__body :where(strong, b) {
background: linear-gradient(transparent 58%, color-mix(in oklch, var(--td-yellow) 80%, transparent) 58%);
}
.td-article__body :where(figure, img) {
max-width: 100%;
height: auto;
}
.td-article__body figure {
margin: 30px 0;
border: var(--td-border);
box-shadow: var(--td-shadow-small);
}
.td-article__body table {
display: block;
max-width: 100%;
overflow-x: auto;
border-collapse: collapse;
}
.td-article__body :where(th, td) {
padding: 10px 12px;
border: 2px solid var(--td-ink);
}
.td-article-cta--inline {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
padding: 26px 24px;
border: var(--td-border);
background: var(--td-cyan);
box-shadow: var(--td-shadow);
}
.td-article-cta--inline .td-burst {
position: absolute;
top: -22px;
right: 18px;
padding: 6px 12px;
font-size: 22px;
transform: rotate(6deg);
}
.td-article-cta__title {
margin: 0;
font-family: var(--td-font-display);
font-size: clamp(22px, 2.6vw, 30px);
line-height: 1.05;
text-transform: uppercase;
}
.td-article-aside__cta {
display: grid;
gap: 12px;
background: var(--td-yellow);
}
.td-related .td-grid {
margin-top: 18px;
}
@media (max-width: 768px) {
.td-article-stamp {
width: 70px;
height: 70px;
}
.td-article-stamp span {
font-size: 26px;
}
.td-article-summary,
.td-article__body blockquote {
transform: none;
}
.td-article-cta--inline {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.td-tap-burst {
display: none;
}
.td-card.td-reveal.is-visible,
.td-news-card.td-reveal.is-visible {
animation: none;
}
.td-pop,
.td-pop.is-popped {
opacity: 1;
animation: none;
transform: rotate(var(--td-pop-rot, -2deg));
}
}  @media (min-width: 641px) {
.td-topbar {
top: -41px;
}
}
.td-contact-strip__inner {
justify-content: flex-start;
gap: 10px;
min-height: 38px;
}
.td-contact-strip__inner > span a {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 3px 10px 3px 4px;
border: 2px solid transparent;
color: #fff;
text-decoration: none;
transition: border-color 160ms ease, color 160ms ease;
} .td-contact-strip__inner > span a::before {
content: "";
flex: none;
width: 20px;
height: 20px;
background: var(--td-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
transform: rotate(-6deg);
}
.td-contact-strip__inner > span + span a::before {
background: var(--td-cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.6' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14'/%3E%3Cpath d='m3.5 6 8.5 7 8.5-7'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
transform: rotate(5deg);
}
.td-contact-strip__inner > span a:hover {
border-color: var(--td-yellow);
color: var(--td-yellow);
}
.td-social {
margin-left: auto;
gap: 8px;
}
.td-social a {
display: inline-grid;
place-items: center;
min-width: 52px;
padding: 2px 10px;
border: 2px solid var(--td-ink);
background: var(--td-yellow);
box-shadow: 2px 2px 0 #fff;
color: var(--td-ink);
line-height: 1.3;
transition: transform 220ms var(--td-spring, ease), box-shadow 160ms ease;
}
.td-social a + a {
background: var(--td-cyan);
}
.td-social a:hover {
color: var(--td-ink);
box-shadow: 3px 3px 0 #fff;
transform: translate(-1px, -2px) rotate(-3deg);
} .td-nav a {
position: relative;
transition: transform 260ms var(--td-spring, ease), box-shadow 160ms ease, background-color 160ms ease;
}
.td-nav a:hover,
.td-nav a:focus-visible {
border-color: var(--td-ink);
background: var(--td-yellow);
box-shadow: 3px 3px 0 var(--td-ink);
transform: translate(-1px, -2px) rotate(-2deg);
}
.td-nav a:nth-child(2n):hover,
.td-nav a:nth-child(2n):focus-visible {
background: var(--td-cyan);
transform: translate(-1px, -2px) rotate(2deg);
}
.td-logo img {
transition: transform 320ms var(--td-spring, ease);
}
.td-logo:hover img {
transform: rotate(-6deg) scale(1.06);
} .td-form .td-form__consent input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
min-height: 22px;
margin: 0;
padding: 0;
border: 3px solid var(--td-ink);
background: #fff;
box-shadow: 2px 2px 0 var(--td-ink);
cursor: pointer;
transition: background-color 140ms ease, transform 220ms var(--td-spring, ease);
}
.td-form .td-form__consent input[type="checkbox"]::after {
left: 4px;
top: 0;
width: 6px;
height: 11px;
border-color: var(--td-ink);
}
.td-form .td-form__consent input[type="checkbox"]:checked {
background: var(--td-yellow);
transform: rotate(-6deg) scale(1.08);
}
.td-form__consent {
align-items: start;
padding-top: 2px;
} @media (min-width: 1101px) {
.td-form[data-td-price-form="hero"] .td-form__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.td-form[data-td-price-form="hero"] .td-form__grid > label:has(select) {
grid-column: 1 / -1;
}
}
.td-form select {
text-overflow: ellipsis;
} .td-footer {
padding: 30px 0;
}
.td-footer .td-form {
color: var(--td-ink);
}
.td-footer__brand {
margin-bottom: 10px;
}
.td-footer__brand img {
width: 84px;
height: 52px;
}
.td-footer .td-burst {
margin: 0 0 12px;
padding: 8px 18px;
font-size: clamp(18px, 1.6vw, 24px);
}
.td-footer .td-heading {
font-size: clamp(26px, 2.6vw, 38px);
text-shadow: 3px 3px 0 var(--td-ink);
}
.td-footer .td-lead {
margin-top: 12px;
color: #fff;
font-size: 13px;
line-height: 1.9;
}
.td-footer .td-lead a {
color: #fff;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.td-footer .td-lead a[href^="tel:"],
.td-footer .td-lead a[href^="mailto:"] {
display: inline-block;
margin: 0 2px 4px 0;
padding: 3px 10px;
border: 2px solid var(--td-ink);
background: var(--td-yellow);
box-shadow: 3px 3px 0 var(--td-ink);
color: var(--td-ink);
font-size: 15px;
line-height: 1.2;
text-decoration: none;
}
.td-footer .td-lead a[href^="mailto:"] {
background: var(--td-cyan);
}
@media (min-width: 1101px) {
.td-footer__inner {
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: 32px;
}
.td-footer .td-form {
padding: 14px 18px 16px;
}
.td-footer .td-form__title {
font-size: 22px;
}
.td-footer .td-form__hint {
margin-top: 2px;
font-size: 14px;
} .td-footer .td-form .td-form__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px 10px;
margin-top: 12px;
}
.td-footer .td-form .td-form__grid > label:has(select) {
grid-column: 1 / -1;
}
.td-footer .td-form .td-form__consent {
grid-column: span 2;
align-self: center;
font-size: 12px;
line-height: 1.35;
}
.td-footer .td-form .td-form__grid > .td-button {
grid-column: span 1;
align-self: center;
min-height: 48px;
padding-inline: 8px;
}
.td-footer .td-form input,
.td-footer .td-form select {
min-height: 46px;
padding: 10px 12px;
font-size: 15px;
}
.td-footer .td-heading {
font-size: clamp(26px, 2.2vw, 34px);
}
}
@media (max-width: 1100px) {
.td-footer .td-form .td-form__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.td-footer .td-form .td-form__grid > label:nth-of-type(n+3) {
grid-column: 1 / -1;
}
.td-footer .td-form input,
.td-footer .td-form select {
min-height: 44px;
padding: 9px 12px;
}
} @media (min-width: 1101px) {
.td-hero__inner {
top: 82px;
min-height: calc(100svh - 82px);
padding: 16px 0 20px;
}
.td-section {
padding: 52px 0;
}
.td-section-title {
margin-bottom: 24px;
}
.td-heading {
font-size: clamp(36px, 4.2vw, 60px);
}
} @media (min-width: 1101px) {
.td-hero__inner {
align-items: stretch;
align-content: center;
} .td-hero__aside {
align-content: stretch;
grid-template-rows: minmax(220px, 1fr) auto;
}
.td-hero__aside .td-product-window--video {
position: relative;
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: auto;
}
.td-hero__aside .td-product-window--video .td-hero-video {
position: absolute;
inset: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
}
.td-form[data-td-price-form="hero"] {
padding: 18px 20px;
}
.td-form[data-td-price-form="hero"] .td-form__consent {
font-size: 11px;
}
.td-hero-stat-grid::before {
inset: 30px 4px -10px 18px;
} .td-hero-burst--boom {
top: -58px;
right: 96px;
bottom: auto;
left: auto;
transform: rotate(-9deg);
}
.td-hero-burst {
min-width: 72px;
min-height: 46px;
font-size: 16px;
}
}
@media (max-width: 640px) { .td-contact-strip__inner {
grid-template-columns: auto auto 1fr;
align-items: center;
gap: 10px;
padding: 6px 0;
}
.td-contact-strip__inner > span a {
padding: 2px 0;
gap: 5px;
white-space: nowrap;
}
.td-contact-strip__inner > span + span a {
width: 28px;
height: 28px;
justify-content: center;
overflow: hidden;
font-size: 0;
}
.td-social {
justify-self: end;
gap: 6px;
}
}
@media (max-width: 359px) {
.td-contact-strip__inner {
gap: 6px;
}
.td-social a {
min-width: 40px;
padding: 2px 6px;
}
}  .td-tap-miss {
position: fixed;
left: var(--td-x);
top: var(--td-y);
z-index: 120;
width: 0;
height: 0;
pointer-events: none;
}
.td-tap-miss::before,
.td-tap-miss::after {
content: "";
position: absolute;
left: -21px;
top: -5px;
width: 42px;
height: 10px;
border: 2px solid var(--td-ink);
background: var(--td-accent);
box-shadow: 2px 2px 0 var(--td-ink);
animation: td-tap-miss 640ms var(--td-spring) forwards;
}
.td-tap-miss::before {
--td-miss-rot: calc(var(--td-rot) + 45deg);
}
.td-tap-miss::after {
--td-miss-rot: calc(var(--td-rot) - 45deg);
}
@keyframes td-tap-miss {
0% { opacity: 1; transform: rotate(var(--td-miss-rot)) scale(0); }
40% { opacity: 1; transform: rotate(var(--td-miss-rot)) scale(1.2); }
70% { opacity: 1; transform: rotate(var(--td-miss-rot)) scale(1) translateX(2px); }
100% { opacity: 0; transform: rotate(var(--td-miss-rot)) scale(.85); }
} .td-words .td-word {
display: inline-block;
}
.td-words:not(.is-words-in) .td-word {
opacity: 0;
}
.td-words.is-words-in .td-word {
animation: td-word-in 640ms var(--td-spring) backwards;
animation-delay: calc(var(--td-i) * 70ms);
}
@keyframes td-word-in {
0% { opacity: 0; transform: translateY(-.7em) rotate(-10deg) scale(1.35); }
60% { opacity: 1; transform: translateY(.06em) rotate(2deg) scale(.96); }
100% { opacity: 1; transform: none; }
} .td-speed-lines {
position: fixed;
inset: 0;
z-index: 25;
width: 100%;
height: 100%;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.td-tap-miss {
display: none;
}
} @media (min-width: 1101px) {
.td-hero__inner[style*="--td-hero-zoom"] {
zoom: var(--td-hero-zoom);
top: calc(82px / var(--td-hero-zoom));
min-height: calc((100svh - 82px) / var(--td-hero-zoom));
}
} .td-product-window--video {
background:
radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--td-ink) 10%, transparent) 0 2px, transparent 2px 11px),
#fff;
background-size: 22px 22px, auto;
}
.td-hero-video {
background: #fff;
object-fit: cover;
}
@media (max-width: 1100px) {
.td-hero__aside .td-product-window--video {
height: auto; aspect-ratio: 4 / 3;
}
} @media (min-width: 1101px) {
.td-hero__inner {
grid-template-columns: minmax(0, .86fr) minmax(390px, 1fr);
}
.td-form[data-td-price-form="hero"] .td-form__title {
font-size: 19px;
}
.td-form[data-td-price-form="hero"] .td-form__hint {
font-size: 13px;
}
.td-form[data-td-price-form="hero"] .td-form__grid {
gap: 6px;
margin-top: 8px;
}
.td-form[data-td-price-form="hero"] input,
.td-form[data-td-price-form="hero"] select {
min-height: 36px;
padding: 5px 10px;
font-size: 15px;
}
.td-form[data-td-price-form="hero"] .td-button {
min-height: 42px;
}
} .td-hero-burst.td-pop.is-popped {
animation: td-sticker-bang 620ms var(--td-spring) both !important;
animation-delay: calc(450ms + var(--td-stagger, 0) * 160ms) !important;
}
@keyframes td-sticker-bang {
0% { opacity: 0; transform: scale(0) rotate(-40deg); }
45% { opacity: 1; transform: scale(1.55) rotate(14deg); }
70% { transform: scale(.88) rotate(-6deg); }
100% { opacity: 1; transform: scale(1) rotate(var(--td-pop-rot, -2deg)); }
} .td-hero__copy {
background-position: 0 calc(var(--td-hero-p, 0) * -140px);
}
.td-hero__copy::after {
translate: 0 calc(var(--td-hero-p, 0) * -90px);
} .td-deal > .td-reveal.is-visible {
animation: td-card-deal 860ms var(--td-spring) backwards;
animation-delay: calc(var(--td-stagger, 0) * 130ms);
}
@keyframes td-card-deal {
0% { opacity: 0; transform: translate(var(--td-deal-x), var(--td-deal-y)) rotate(var(--td-deal-r)) scale(.45); }
18% { opacity: 1; }
72% { transform: translateY(-10px) rotate(calc(var(--td-deal-r) * -.12)) scale(1.03); }
100% { opacity: 1; transform: none; }
} @media (max-width: 768px) {
.td-deal-grid > * {
transition: transform 320ms var(--td-spring), box-shadow 320ms ease;
}
.td-deal-grid > .is-centered {
transform: translate(-3px, -4px) rotate(-1deg) scale(1.02);
box-shadow: 8px 8px 0 var(--td-accent);
}
} @media (min-width: 1101px) {
.td-header {
gap: 10px;
}
.td-nav {
gap: 2px;
font-size: 12px;
}
.td-nav a {
padding: 8px 6px;
white-space: nowrap;
}
} @media (min-width: 1101px) {
.td-wholesale-hero__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
min-height: 0;
}
.td-wholesale-hero__inner[style*="--td-hero-zoom"] {
zoom: var(--td-hero-zoom);
}
.td-wholesale-hero__copy {
min-height: 0;
gap: 14px;
}
.td-wholesale-hero__copy .td-display {
font-size: clamp(40px, 3.4vw, 56px);
}
.td-wholesale-hero__visual {
min-height: 0;
padding: 14px;
}
} .td-pin {
--td-pin-scrub: min(80vh, 680px);
padding-top: 34px;
}
.td-pin::after,
.td-hero-video-pin::after {
content: "";
display: block;
height: var(--td-pin-scrub);
}
.td-pin__sticky {
position: sticky;
top: 0;
}
.td-pin .td-page-hero {
margin-top: 0;
} @media (min-width: 981px) {
.td-hero-video-pin,
.td-hero-video-pin__sticky {
display: contents;
}
} @media (max-width: 980px) {
.td-hero-video-pin {
--td-pin-scrub: min(80vh, 640px);
}
.td-hero-video-pin__sticky {
position: sticky;
top: 0;
z-index: 2;
}
.td-wholesale-hero {
min-height: 0;
}
.td-wholesale-hero::after {
content: "";
display: block;
height: var(--td-wholesale-scrub);
}
.td-wholesale-hero__sticky {
min-height: 0;
}
} .td-archive-hero--flip {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
.td-archive-hero--flip .td-display {
font-size: clamp(44px, 5.2vw, 76px);
}
.td-archive-hero__copy {
display: grid;
gap: 18px;
}
.td-archive-hero__copy > * {
margin: 0;
}
.td-news-flip {
display: grid;
gap: 18px;
justify-items: end;
}
.td-news-flip__book {
position: relative;
width: 100%;
height: clamp(320px, 30vw, 400px);
perspective: 1600px;
}
.td-news-flip__page {
position: absolute;
inset: 0 36px 36px 0;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
overflow: hidden;
border: var(--td-border);
background: var(--td-surface);
box-shadow: var(--td-shadow-small);
color: var(--td-ink);
text-decoration: none;
transform-origin: left center;
transform: translate(calc(var(--td-pos, 0) * 14px), calc(var(--td-pos, 0) * 14px)) rotate(calc(var(--td-pos, 0) * 1.8deg));
transition: transform 520ms var(--td-spring), opacity 320ms ease;
backface-visibility: hidden;
}
.td-news-flip__page.is-deep,
.td-news-flip__page.is-back {
opacity: 0;
}
.td-news-flip__page.is-back {
transition: none;
}
.td-news-flip__page.is-turning {
z-index: 99 !important;
animation: td-page-turn 900ms cubic-bezier(.55, .06, .35, 1) forwards;
} .td-news-flip__page::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(90deg, transparent 40%, color-mix(in oklch, var(--td-ink) 35%, transparent));
opacity: 0;
}
.td-news-flip__page.is-turning::after {
animation: td-page-shade 900ms ease forwards;
}
.td-news-flip__media {
min-height: 0;
border-bottom: var(--td-border);
background: var(--td-yellow);
}
.td-news-flip__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.td-news-flip__body {
display: grid;
gap: 8px;
padding: 14px 18px 16px;
}
.td-news-flip__meta {
width: fit-content;
padding: 3px 8px;
border: 2px solid var(--td-ink);
background: var(--td-yellow);
font-family: var(--td-font-mono);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
}
.td-news-flip__title {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-family: var(--td-font-display);
font-size: clamp(19px, 1.6vw, 24px);
font-weight: 900;
line-height: 1.08;
text-transform: uppercase;
}
.td-news-flip__page:hover .td-news-flip__title,
.td-news-flip__page:focus-visible .td-news-flip__title {
color: var(--td-accent);
}
.td-news-flip__next {
margin-right: 36px;
padding: 8px 14px;
border: 3px solid var(--td-ink);
background: var(--td-cyan);
box-shadow: var(--td-shadow-small);
color: var(--td-ink);
font-family: var(--td-font-mono);
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
cursor: pointer;
}
.td-news-flip__next:hover {
background: var(--td-yellow);
transform: translate(-2px, -2px);
}
@keyframes td-page-turn {
0% { transform: rotateY(0); }
18% { transform: rotateY(-14deg) translateY(-6px); }
72% { opacity: 1; }
100% { transform: rotateY(-112deg) translateX(-24px); opacity: 0; }
}
@keyframes td-page-shade {
0% { opacity: 0; }
70% { opacity: 1; }
100% { opacity: 1; }
}
@media (max-width: 980px) {
.td-archive-hero--flip {
grid-template-columns: minmax(0, 1fr);
}
.td-news-flip__book {
height: clamp(280px, 78vw, 360px);
}
.td-news-flip__page {
inset: 0 26px 26px 0;
transform: translate(calc(var(--td-pos, 0) * 10px), calc(var(--td-pos, 0) * 10px)) rotate(calc(var(--td-pos, 0) * 1.4deg));
}
.td-news-flip__next {
margin-right: 26px;
}
} .td-article-summary__title {
position: relative;
overflow: hidden;
transform-origin: 54% 62%;
animation: td-summary-hop 3.2s ease-in-out infinite;
}
.td-article-summary__title::after {
content: "";
position: absolute;
inset: -35%;
pointer-events: none;
background: linear-gradient(115deg, transparent 35%, color-mix(in oklch, white 72%, transparent) 48%, transparent 61%);
opacity: 0;
transform: translateX(-72%) rotate(8deg);
animation: td-url-shine 4.6s ease-in-out infinite;
}
@keyframes td-summary-hop {
0%, 76%, 100% { transform: translate(0, 0) rotate(-2deg); }
84% { transform: translate(-2px, -6px) rotate(-3deg); }
92% { transform: translate(-1px, -2px) rotate(-1.5deg); }
} .td-article-lead {
transform-origin: 46px 100%;
animation:
td-cloud-pop 760ms var(--td-spring) 280ms both,
td-cloud-float 4.8s ease-in-out 1.1s infinite;
}
@keyframes td-cloud-pop {
0% { opacity: 0; transform: scale(.4) rotate(-6deg); }
100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes td-cloud-float {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-5px) rotate(-.6deg); }
} .td-article__body .td-h2-sticker {
display: flex;
gap: 14px;
align-items: center;
}
.td-h2-sticker > span:last-child {
min-width: 0;
}
.td-h2-icon {
flex: 0 0 auto;
width: 76px;
height: 76px;
margin: -24px 0 -24px -38px;
border: 4px solid var(--td-ink);
border-radius: 50%;
background: var(--td-surface) no-repeat center / 74%;
box-shadow: 3px 3px 0 var(--td-ink);
--td-pop-rot: -8deg;
transform: rotate(-8deg);
}
.td-h2-icon--idea { background-image: url(//xn----gtbb7cc.xn--p1ai/wp-content/themes/tdtd-redesign/assets/img/news-icons/idea.svg); }
.td-h2-icon--chart { background-image: url(//xn----gtbb7cc.xn--p1ai/wp-content/themes/tdtd-redesign/assets/img/news-icons/chart.svg); }
.td-h2-icon--deal { background-image: url(//xn----gtbb7cc.xn--p1ai/wp-content/themes/tdtd-redesign/assets/img/news-icons/deal.svg); }
.td-h2-icon--rocket { background-image: url(//xn----gtbb7cc.xn--p1ai/wp-content/themes/tdtd-redesign/assets/img/news-icons/rocket.svg); }
.td-h2-icon--warning { background-image: url(//xn----gtbb7cc.xn--p1ai/wp-content/themes/tdtd-redesign/assets/img/news-icons/warning.svg); }
.td-h2-icon--box { background-image: url(//xn----gtbb7cc.xn--p1ai/wp-content/themes/tdtd-redesign/assets/img/news-icons/box.svg); }
.td-h2-sticker.td-reveal.is-visible .td-h2-icon {
animation: td-sticker-bang 620ms var(--td-spring) 160ms both;
}
.td-h2-sticker:hover .td-h2-icon {
animation: td-comic-wiggle 420ms ease-in-out 2;
} @media (max-width: 768px) {
.td-article__body .td-h2-sticker {
display: block;
position: relative;
margin-top: 58px;
padding-top: 30px;
}
.td-h2-icon {
position: absolute;
top: -30px;
left: -14px;
width: 56px;
height: 56px;
margin: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.td-article-summary__title,
.td-article-summary__title::after,
.td-article-lead,
.td-h2-sticker .td-h2-icon,
.td-news-flip__page.is-turning,
.td-news-flip__page.is-turning::after {
animation: none !important;
}
}