.td-assortment-landing {
--td-assortment-accent: var(--td-yellow);
--td-assortment-soft: color-mix(in oklch, var(--td-assortment-accent) 54%, white);
--td-assortment-deep: color-mix(in oklch, var(--td-assortment-accent) 76%, var(--td-ink));
}
.td-assortment-landing--cyan {
--td-assortment-accent: var(--td-cyan);
}
.td-assortment-landing--red {
--td-assortment-accent: var(--td-accent);
--td-assortment-soft: color-mix(in oklch, var(--td-accent) 38%, white);
}
.td-assortment-landing--violet {
--td-assortment-accent: var(--td-violet);
--td-assortment-soft: color-mix(in oklch, var(--td-violet) 34%, white);
}
.td-assortment-landing--sweets-china,
.td-assortment-landing--sweets-turkey,
.td-assortment-landing--stationery {
--td-assortment-page-bg: var(--td-yellow);
}
.td-assortment-landing--sweets-korea,
.td-assortment-landing--figurines {
--td-assortment-page-bg: color-mix(in oklch, var(--td-violet) 34%, white);
}
.td-assortment-landing--noodles-china,
.td-assortment-landing--noodles-korea,
.td-assortment-landing--drinks-china {
--td-assortment-page-bg: var(--td-cyan);
}
.td-assortment-landing--snacks-china {
--td-assortment-page-bg: color-mix(in oklch, var(--td-accent) 38%, white);
}
.td-assortment-hero {
--td-assortment-scrub: min(86vh, 720px);
min-height: calc(100svh + var(--td-assortment-scrub));
border-bottom: var(--td-border-heavy);
background:
radial-gradient(circle at 18px 18px, color-mix(in oklch, var(--td-ink) 12%, transparent) 0 2px, transparent 2px 14px),
linear-gradient(135deg, var(--td-cyan) 0 46%, var(--td-assortment-page-bg, var(--td-yellow)) 46% 100%);
background-size: 28px 28px, auto;
}
.td-assortment-hero--static {
min-height: auto;
}
.td-assortment-hero__sticky {
min-height: 100svh;
position: sticky;
top: 0;
display: grid;
align-items: center;
padding: 18px 0;
}
.td-assortment-hero--static .td-assortment-hero__sticky {
min-height: auto;
position: relative;
top: auto;
padding: 34px 0;
}
.td-assortment-hero__grid {
width: min(var(--td-max), calc(100% - 40px));
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(360px, .78fr);
gap: 22px;
align-items: center;
}
.td-assortment-hero__copy {
position: relative;
min-height: min(620px, calc(100svh - 150px));
display: grid;
align-content: center;
gap: 16px;
padding: clamp(22px, 3vw, 36px);
overflow: hidden;
background:
radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--td-ink) 14%, transparent) 0 2px, transparent 2px 11px),
var(--td-surface);
background-size: 22px 22px, auto;
}
.td-assortment-hero__copy::after {
content: "POP";
position: absolute;
right: clamp(-26px, -2vw, -14px);
bottom: clamp(18px, 5vw, 62px);
z-index: 0;
min-width: 96px;
min-height: 72px;
display: grid;
place-items: center;
border: 4px solid var(--td-ink);
background: var(--td-assortment-accent);
box-shadow: 6px 6px 0 var(--td-ink);
color: var(--td-ink);
font-family: var(--td-font-display);
font-size: clamp(38px, 5vw, 70px);
line-height: .9;
transform: rotate(10deg);
opacity: .92;
}
.td-assortment-hero__copy > * {
position: relative;
z-index: 1;
}
.td-assortment-hero__copy .td-display {
max-width: 960px;
font-size: clamp(42px, 5.4vw, 74px);
}
.td-assortment-hero__copy .td-lead {
max-width: 780px;
margin-top: 0;
font-size: clamp(19px, 1.65vw, 25px);
line-height: 1.24;
}
.td-assortment-hero__stats {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.td-assortment-hero__stats span {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 8px 11px;
border: 3px solid var(--td-ink);
background: var(--td-assortment-accent);
box-shadow: 3px 3px 0 var(--td-ink);
color: var(--td-ink);
font-family: var(--td-font-mono);
font-size: 11px;
font-weight: 950;
letter-spacing: .04em;
text-transform: uppercase;
transform: rotate(-1deg);
}
.td-assortment-hero__stats span:nth-child(2n) {
transform: rotate(1.1deg) translateY(3px);
}
.td-assortment-media {
position: relative;
min-height: min(540px, calc(100svh - 180px));
display: grid;
place-items: center;
padding: 14px;
overflow: hidden;
background:
radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--td-ink) 16%, transparent) 0 2px, transparent 2px 11px),
linear-gradient(135deg, var(--td-assortment-soft), var(--td-surface));
background-size: 22px 22px, auto;
}
.td-assortment-media::before,
.td-assortment-media::after {
content: "";
position: absolute;
border: 4px solid var(--td-ink);
box-shadow: 5px 5px 0 var(--td-ink);
pointer-events: none;
}
.td-assortment-media::before {
left: -34px;
top: 34px;
width: 86px;
height: 64px;
background: var(--td-yellow);
transform: rotate(-12deg);
}
.td-assortment-media::after {
right: -28px;
bottom: 42px;
width: 78px;
height: 78px;
background: var(--td-cyan);
clip-path: polygon(50% 0, 62% 35%, 100% 18%, 74% 50%, 100% 82%, 62% 65%, 50% 100%, 38% 65%, 0 82%, 26% 50%, 0 18%, 38% 35%);
transform: rotate(16deg);
}
.td-assortment-video,
.td-assortment-media img {
position: relative;
z-index: 1;
width: 100%;
display: block;
border: 4px solid var(--td-ink);
background: var(--td-surface);
box-shadow: 7px 7px 0 var(--td-ink);
object-fit: contain;
filter: saturate(1.08) contrast(1.04);
}
.td-assortment-video {
aspect-ratio: 1 / 1;
max-height: min(500px, calc(100svh - 230px));
}
.td-assortment-media img {
aspect-ratio: 4 / 3;
max-height: 480px;
}
.td-assortment-band {
position: relative;
}
.td-assortment-story {
padding-top: 86px;
}
.td-assortment-story__grid {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(320px, .72fr);
gap: 22px;
align-items: stretch;
}
.td-assortment-story__copy {
display: grid;
gap: 18px;
align-content: center;
padding: clamp(24px, 4vw, 44px);
background:
linear-gradient(135deg, var(--td-assortment-soft), var(--td-surface)),
var(--td-surface);
}
.td-assortment-story__plates {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.td-assortment-plate {
min-height: 152px;
margin: 0;
padding: 18px;
border: 3px solid var(--td-ink);
background: var(--td-surface);
box-shadow: 4px 4px 0 var(--td-ink);
color: var(--td-ink);
font-size: 16px;
font-weight: 850;
line-height: 1.25;
transform: rotate(-.9deg);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.td-assortment-plate:nth-child(2n) {
background: var(--td-yellow);
transform: rotate(1.1deg) translateY(10px);
}
.td-assortment-plate:nth-child(3n) {
background: var(--td-cyan);
transform: rotate(-1.6deg) translateY(-6px);
}
.td-assortment-plate:hover,
.td-assortment-product:hover,
.td-assortment-final:hover {
animation: td-visual-bounce 520ms cubic-bezier(.16, 1, .3, 1) both;
}
.td-assortment-visual {
min-height: 100%;
margin: 0;
display: grid;
place-items: center;
padding: 22px;
overflow: hidden;
border: var(--td-border);
background:
radial-gradient(circle at 10px 10px, color-mix(in oklch, var(--td-ink) 15%, transparent) 0 2px, transparent 2px 10px),
var(--td-assortment-accent);
background-size: 20px 20px, auto;
box-shadow: var(--td-shadow);
}
.td-assortment-visual img {
width: 100%;
max-height: 380px;
object-fit: contain;
filter: drop-shadow(7px 8px 0 color-mix(in oklch, var(--td-ink) 80%, transparent));
}
.td-assortment-category-zone {
background:
linear-gradient(180deg, color-mix(in oklch, var(--td-assortment-accent) 13%, transparent), transparent 46%);
}
.td-assortment-product-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.td-assortment-product {
min-height: 360px;
display: grid;
grid-template-rows: clamp(170px, 18vw, 220px) 1fr;
padding: 0;
overflow: hidden;
background:
radial-gradient(circle at 10px 10px, color-mix(in oklch, var(--td-ink) 12%, transparent) 0 2px, transparent 2px 10px),
var(--td-surface);
background-size: 20px 20px, auto;
}
.td-assortment-product:nth-child(3n + 1) {
background-color: color-mix(in oklch, var(--td-assortment-accent) 70%, white);
}
.td-assortment-product:nth-child(3n + 2) {
background-color: var(--td-cyan);
}
.td-assortment-product:nth-child(3n + 3) {
background-color: var(--td-yellow);
}
.td-assortment-product__visual {
margin: 0;
display: grid;
place-items: center;
padding: 14px;
overflow: hidden;
border-bottom: var(--td-border);
background: var(--td-surface);
}
.td-assortment-product__visual img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
filter: drop-shadow(5px 6px 0 color-mix(in oklch, var(--td-ink) 72%, transparent));
transition: transform 240ms ease, filter 240ms ease;
}
.td-assortment-product:hover .td-assortment-product__visual img {
transform: scale(1.06) rotate(-1deg);
}
.td-assortment-product__body {
position: relative;
display: grid;
align-content: start;
gap: 12px;
padding: 18px;
}
.td-assortment-product h3 {
margin: 34px 0 0;
font-family: var(--td-font-display);
font-size: clamp(28px, 2.8vw, 40px);
line-height: .95;
text-transform: uppercase;
text-wrap: balance;
}
.td-assortment-product p,
.td-assortment-trust__list p {
margin: 0;
color: var(--td-ink);
font-size: 16px;
font-weight: 820;
line-height: 1.28;
}
.td-assortment-product .td-burst {
position: absolute;
top: 14px;
right: 14px;
padding: 7px 10px;
border: 3px solid var(--td-ink);
background: var(--td-accent);
color: #fff;
box-shadow: 3px 3px 0 var(--td-ink);
font-family: var(--td-font-mono);
font-size: 12px;
font-weight: 950;
letter-spacing: .04em;
}
.td-assortment-band--trust {
background:
radial-gradient(circle at 14px 14px, color-mix(in oklch, var(--td-ink) 10%, transparent) 0 2px, transparent 2px 12px),
color-mix(in oklch, var(--td-assortment-accent) 18%, transparent);
background-size: 24px 24px, auto;
}
.td-assortment-trust {
position: relative;
display: grid;
grid-template-columns: minmax(0, .78fr) minmax(0, 1.12fr);
gap: 22px;
align-items: center;
padding: clamp(24px, 4vw, 42px);
background: linear-gradient(135deg, var(--td-assortment-soft), var(--td-surface));
overflow: hidden;
}
.td-assortment-trust__stamp {
width: 110px;
height: 82px;
margin-top: 20px;
display: grid;
place-items: center;
border: 4px solid var(--td-ink);
background: var(--td-accent);
box-shadow: 5px 5px 0 var(--td-ink);
color: #fff;
font-family: var(--td-font-display);
font-size: 46px;
line-height: 1;
transform: rotate(-8deg);
}
.td-assortment-trust__list {
display: grid;
gap: 12px;
}
.td-assortment-trust__list p {
padding: 16px;
border: 3px solid var(--td-ink);
background: var(--td-surface);
box-shadow: 4px 4px 0 var(--td-ink);
}
.td-assortment-proof .td-trust-chip {
min-height: 230px;
background: var(--td-surface);
}
.td-assortment-crosslinks {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.td-assortment-crosslinks .is-active {
background: var(--td-assortment-accent);
}
.td-assortment-cta {
padding-top: 42px;
}
.td-assortment-final {
position: relative;
width: min(980px, 100%);
margin: 0 auto;
min-height: 420px;
display: grid;
gap: 18px;
align-content: center;
padding: clamp(24px, 4vw, 46px);
overflow: hidden;
background:
radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--td-ink) 14%, transparent) 0 2px, transparent 2px 11px),
color-mix(in oklch, var(--td-assortment-accent) 58%, white);
background-size: 22px 22px, auto;
}
.td-assortment-final::after {
content: "GO";
position: absolute;
right: 22px;
bottom: 18px;
padding: 10px 16px;
border: 4px solid var(--td-ink);
background: var(--td-cyan);
box-shadow: 4px 4px 0 var(--td-ink);
font-family: var(--td-font-display);
font-size: 48px;
line-height: .9;
transform: rotate(7deg);
}
.td-assortment-final__actions {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
@media (max-width: 1100px) {
.td-assortment-hero__grid,
.td-assortment-story__grid {
grid-template-columns: 1fr;
}
.td-assortment-hero__copy,
.td-assortment-media {
min-height: auto;
}
.td-assortment-video,
.td-assortment-media img {
max-height: 430px;
}
.td-assortment-story__plates,
.td-assortment-product-grid,
.td-assortment-trust {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.td-assortment-hero {
--td-assortment-scrub: 58vh;
}
.td-assortment-hero--static {
min-height: auto;
}
.td-assortment-hero__sticky {
align-items: start;
padding: 14px 0 22px;
}
.td-assortment-hero--static .td-assortment-hero__sticky {
padding: 14px 0 24px;
}
.td-assortment-hero__grid {
width: min(100vw - 24px, 720px);
gap: 14px;
}
.td-assortment-hero__copy {
gap: 12px;
padding: 16px;
}
.td-assortment-hero__copy::after {
display: none;
}
.td-assortment-hero__copy .td-display {
font-size: clamp(34px, 10.5vw, 44px);
-webkit-text-stroke-width: 1px;
}
.td-assortment-hero__copy .td-lead {
font-size: 17px;
}
.td-assortment-hero__stats span {
min-height: 32px;
font-size: 10px;
}
.td-assortment-media {
min-height: auto;
padding: 8px;
}
.td-assortment-media::before,
.td-assortment-media::after {
display: none;
}
.td-assortment-video,
.td-assortment-media img {
max-height: min(330px, calc(100vw - 44px));
box-shadow: 4px 4px 0 var(--td-ink);
}
.td-assortment-story {
padding-top: 56px;
}
.td-assortment-story__plates {
gap: 10px;
}
.td-assortment-plate {
min-height: 0;
}
.td-assortment-product {
min-height: 0;
grid-template-rows: 176px 1fr;
}
.td-assortment-product__visual {
align-items: start;
padding: 8px 10px 10px;
}
.td-assortment-product__visual .td-lazy-video__poster,
.td-assortment-product__visual .td-lazy-video__media {
object-position: center 42%;
transform: translateY(-5px);
}
.td-assortment-product h3 {
font-size: 30px;
}
.td-assortment-product .td-burst {
display: none;
}
.td-assortment-trust__stamp {
width: 88px;
height: 64px;
font-size: 36px;
}
.td-assortment-final {
min-height: 320px;
}
}
.td-assortment-landing--sweets-china .td-assortment-hero {
--td-assortment-scrub: min(68vh, 560px);
}
.td-assortment-landing--sweets-china .td-assortment-hero__copy {
min-height: min(560px, calc(100svh - 132px));
}
.td-assortment-landing--sweets-china .td-assortment-media {
min-height: min(500px, calc(100svh - 170px));
}
.td-assortment-landing .td-section {
padding: clamp(38px, 4.2vw, 54px) 0;
scroll-margin-top: 128px;
}
.td-assortment-landing.td-assortment-landing .td-assortment-pain__grid,
.td-assortment-landing .td-assortment-scenarios__grid-vertical,
.td-assortment-landing .td-assortment-risk__grid {
display: grid;
gap: 18px;
}
.td-assortment-landing .td-assortment-pain__grid {
grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
align-items: stretch;
}
.td-assortment-landing .td-assortment-pain__scene,
.td-assortment-landing .td-assortment-scenario-panel__visual,
.td-assortment-landing .td-assortment-risk-card figure,
.td-assortment-landing .td-assortment-upsell-card figure {
position: relative;
display: block;
margin: 0;
overflow: hidden;
border: var(--td-border);
background: var(--td-surface);
box-shadow: var(--td-shadow);
}
.td-assortment-landing .td-assortment-pain__scene img,
.td-assortment-landing .td-assortment-pain__scene .td-lazy-video__poster,
.td-assortment-landing .td-assortment-pain__scene .td-lazy-video__media,
.td-assortment-landing .td-assortment-scenario-panel__visual img,
.td-assortment-landing .td-assortment-risk-card img,
.td-assortment-landing .td-assortment-risk-card .td-lazy-video__poster,
.td-assortment-landing .td-assortment-risk-card .td-lazy-video__media,
.td-assortment-landing .td-assortment-upsell-card img,
.td-assortment-landing .td-assortment-upsell-card .td-lazy-video__poster,
.td-assortment-landing .td-assortment-upsell-card .td-lazy-video__media {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
filter: saturate(1.08) contrast(1.04);
}
.td-assortment-landing .td-assortment-pain__scene {
min-height: 320px;
max-height: 386px;
}
.td-assortment-landing .td-assortment-pain__copy {
display: grid;
align-content: start;
gap: 12px;
padding: clamp(18px, 2.4vw, 28px);
background:
radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--td-ink) 12%, transparent) 0 2px, transparent 2px 11px),
linear-gradient(135deg, var(--td-yellow), var(--td-surface));
background-size: 22px 22px, auto;
}
.td-assortment-landing .td-assortment-pain__copy.td-reveal,
.td-assortment-landing .td-assortment-pain .td-assortment-pain__note.td-reveal {
opacity: 1;
transform: none;
}
.td-assortment-landing .td-assortment-pain__copy .td-heading {
font-size: clamp(38px, 3.8vw, 60px);
line-height: .9;
}
.td-assortment-landing .td-assortment-pain__plates {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.td-assortment-landing .td-assortment-pain__note,
.td-assortment-landing .td-assortment-logic__card,
.td-assortment-landing .td-assortment-audience-card,
.td-assortment-landing .td-assortment-faq__item {
border: 3px solid var(--td-ink);
background: var(--td-surface);
box-shadow: var(--td-shadow-small);
}
.td-assortment-landing .td-assortment-pain__note {
min-height: 118px;
padding: 12px;
transform: rotate(-1.1deg);
}
.td-assortment-landing .td-assortment-pain__note:nth-child(2n) {
background: var(--td-cyan);
transform: rotate(1deg) translateX(8px);
}
.td-assortment-landing .td-assortment-pain__note:nth-child(3n) {
background: color-mix(in oklch, var(--td-accent) 78%, white);
color: #fff;
transform: rotate(-.6deg) translateX(-6px);
}
.td-assortment-landing .td-assortment-pain__note strong,
.td-assortment-landing .td-assortment-logic__card strong,
.td-assortment-landing .td-assortment-audience-card strong,
.td-assortment-landing .td-assortment-risk-card strong,
.td-assortment-landing .td-assortment-upsell-card strong {
display: block;
color: inherit;
font-family: var(--td-font-display);
font-size: clamp(24px, 2.2vw, 34px);
line-height: .98;
text-transform: uppercase;
}
.td-assortment-landing .td-assortment-pain__note strong {
font-size: clamp(19px, 1.7vw, 25px);
}
.td-assortment-landing .td-assortment-pain__note p,
.td-assortment-landing .td-assortment-logic__card p,
.td-assortment-landing .td-assortment-audience-card p,
.td-assortment-landing .td-assortment-risk-card p,
.td-assortment-landing .td-assortment-upsell-card p,
.td-assortment-landing .td-assortment-faq__item p {
margin: 8px 0 0;
color: inherit;
font-size: 16px;
font-weight: 820;
line-height: 1.28;
}
.td-assortment-landing .td-assortment-logic {
background:
linear-gradient(90deg, color-mix(in oklch, var(--td-cyan) 28%, transparent), transparent 44%),
color-mix(in oklch, var(--td-yellow) 22%, transparent);
}
.td-assortment-landing .td-assortment-logic .td-section-title {
align-items: center;
padding: 16px 20px;
border: var(--td-border);
background: var(--td-surface);
box-shadow: var(--td-shadow);
}
.td-assortment-landing .td-assortment-logic .td-heading {
max-width: 1040px;
font-size: clamp(42px, 4.6vw, 76px);
}
.td-assortment-landing .td-assortment-logic__track {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.td-assortment-landing .td-assortment-logic__card {
position: relative;
min-height: 180px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
overflow: visible;
transition: transform 200ms cubic-bezier(.16, 1, .3, 1), box-shadow 200ms cubic-bezier(.16, 1, .3, 1), background-color 200ms ease, color 200ms ease;
will-change: transform;
}
.td-assortment-landing .td-assortment-logic__card:nth-child(4n + 1) {
background-color: color-mix(in oklch, var(--td-yellow) 86%, white);
}
.td-assortment-landing .td-assortment-logic__card:nth-child(4n + 2) {
background-color: color-mix(in oklch, var(--td-cyan) 86%, white);
}
.td-assortment-landing .td-assortment-logic__card:nth-child(4n + 3) {
background-color: color-mix(in oklch, var(--td-accent) 86%, white);
}
.td-assortment-landing .td-assortment-logic__card:nth-child(4n + 4) {
background-color: color-mix(in oklch, var(--td-violet) 86%, white);
}
.td-assortment-landing .td-assortment-logic__card:nth-child(4n + 1):hover {
background-color: var(--td-yellow);
transform: translate(-5px, -8px) rotate(-0.5deg);
box-shadow: 10px 10px 0 var(--td-ink);
}
.td-assortment-landing .td-assortment-logic__card:nth-child(4n + 2):hover {
background-color: var(--td-cyan);
transform: translate(-5px, -8px) rotate(0.6deg);
box-shadow: 10px 10px 0 var(--td-ink);
}
.td-assortment-landing .td-assortment-logic__card:nth-child(4n + 3):hover {
background-color: var(--td-accent);
color: #fff;
transform: translate(-5px, -8px) rotate(-0.6deg);
box-shadow: 10px 10px 0 var(--td-ink);
}
.td-assortment-landing .td-assortment-logic__card:nth-child(4n + 4):hover {
background-color: var(--td-violet);
color: #fff;
transform: translate(-5px, -8px) rotate(0.5deg);
box-shadow: 10px 10px 0 var(--td-ink);
}
.td-assortment-landing .td-assortment-logic__card::after {
content: "";
position: absolute;
right: -18px;
top: 50%;
transform: translateY(-50%) rotate(0deg);
z-index: 10;
width: 16px;
height: 16px;
border: 3px solid var(--td-ink);
background: var(--td-yellow);
box-shadow: 2px 2px 0 var(--td-ink);
clip-path: polygon(0 32%, 54% 32%, 54% 0, 100% 50%, 54% 100%, 54% 68%, 0 68%);
}
.td-assortment-landing .td-assortment-logic__card:last-child::after {
content: "OK";
right: 12px;
top: auto;
bottom: 12px;
width: 46px;
height: 36px;
display: grid;
place-items: center;
clip-path: none;
color: var(--td-ink);
font-family: var(--td-font-display);
font-size: 22px;
line-height: 1;
transform: rotate(7deg);
background: var(--td-cyan);
box-shadow: 2px 2px 0 var(--td-ink);
}
.td-assortment-landing .td-assortment-logic__badge-wrapper {
margin-bottom: 16px;
}
.td-assortment-landing .td-assortment-logic__badge {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 34px;
border: 3px solid var(--td-ink);
background: var(--td-accent);
color: #fff;
box-shadow: 3px 3px 0 var(--td-ink);
font-family: var(--td-font-mono);
font-weight: 950;
}
.td-assortment-landing .td-assortment-shelf {
background:
radial-gradient(circle at 14px 14px, color-mix(in oklch, var(--td-ink) 11%, transparent) 0 2px, transparent 2px 12px),
color-mix(in oklch, var(--td-yellow) 18%, transparent);
background-size: 24px 24px, auto;
}
.td-assortment-landing .td-assortment-shelf__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.td-assortment-landing .td-assortment-shelf-card {
position: relative;
min-height: 380px;
display: grid;
grid-template-rows: auto auto auto 1fr;
gap: 10px;
padding: 0 14px 16px;
border: var(--td-border);
border-radius: 0;
background:
radial-gradient(circle at 10px 10px, color-mix(in oklch, var(--td-ink) 12%, transparent) 0 2px, transparent 2px 10px),
var(--td-surface);
background-size: 20px 20px, auto;
box-shadow: var(--td-shadow);
color: var(--td-ink);
font: inherit;
text-align: left;
cursor: pointer;
transition: transform 180ms cubic-bezier(.23, 1, .32, 1), box-shadow 180ms cubic-bezier(.23, 1, .32, 1), background-color 180ms ease;
}
.td-assortment-landing .td-assortment-shelf-card:nth-child(3n + 1) {
background-color: color-mix(in oklch, var(--td-yellow) 72%, white);
}
.td-assortment-landing .td-assortment-shelf-card:nth-child(3n + 2) {
background-color: color-mix(in oklch, var(--td-cyan) 84%, white);
}
.td-assortment-landing .td-assortment-shelf-card:nth-child(3n + 3) {
background-color: color-mix(in oklch, var(--td-accent) 74%, white);
}
.td-assortment-landing button.td-assortment-shelf-card:nth-child(3n + 1) {
background-color: color-mix(in oklch, var(--td-yellow) 72%, white);
}
.td-assortment-landing button.td-assortment-shelf-card:nth-child(3n + 2) {
background-color: color-mix(in oklch, var(--td-cyan) 84%, white);
}
.td-assortment-landing button.td-assortment-shelf-card:nth-child(3n + 3) {
background-color: color-mix(in oklch, var(--td-accent) 74%, white);
}
.td-assortment-landing .td-assortment-shelf-card:hover,
.td-assortment-landing .td-assortment-shelf-card:focus-visible,
.td-assortment-landing .td-assortment-upsell-card:hover,
.td-assortment-landing .td-assortment-upsell-card:focus-visible {
transform: translate(-4px, -6px) rotate(-.4deg);
box-shadow: 12px 13px 0 var(--td-ink);
}
.td-assortment-landing .td-assortment-shelf-card:active {
transform: translate(0, 0) scale(.985);
box-shadow: var(--td-shadow-small);
}
.td-assortment-landing .td-assortment-shelf-card__visual {
position: relative;
display: block;
width: calc(100% + 28px);
aspect-ratio: 16 / 9;
margin: 0 -14px;
overflow: hidden;
border-bottom: var(--td-border);
background: var(--td-surface);
}
.td-assortment-landing .td-assortment-shelf-card__visual .td-lazy-video__poster,
.td-assortment-landing .td-assortment-shelf-card__visual .td-lazy-video__media {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 47%;
filter: saturate(1.08) contrast(1.04);
}
.td-assortment-landing .td-assortment-shelf-card__badge {
width: fit-content;
max-width: 100%;
padding: 7px 10px;
border: 3px solid var(--td-ink);
background: var(--td-accent);
color: #fff;
box-shadow: 3px 3px 0 var(--td-ink);
font-family: var(--td-font-mono);
font-size: 11px;
font-weight: 950;
line-height: 1;
letter-spacing: .04em;
text-transform: uppercase;
margin-top: 14px;
}
.td-assortment-landing .td-assortment-shelf-card strong {
color: var(--td-ink) !important;
font-family: var(--td-font-display);
font-size: clamp(28px, 2.25vw, 36px);
line-height: .9;
text-transform: uppercase;
text-wrap: balance;
margin-top: 4px;
}
.td-assortment-landing .td-assortment-shelf-card p {
margin: 0;
color: color-mix(in oklch, var(--td-ink) 82%, transparent);
font-size: 16px;
font-weight: 850;
line-height: 1.24;
}
.td-assortment-landing .td-assortment-scenarios__grid-vertical {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.td-assortment-landing .td-assortment-scenario-card {
position: relative;
display: flex;
flex-direction: column;
border: 3px solid var(--td-ink);
background: var(--td-surface);
box-shadow: var(--td-shadow);
transition: transform 200ms cubic-bezier(.16, 1, .3, 1), box-shadow 200ms cubic-bezier(.16, 1, .3, 1);
will-change: transform;
}
.td-assortment-landing .td-assortment-scenario-card:hover {
transform: translate(-6px, -10px) rotate(-0.6deg);
box-shadow: 14px 14px 0 var(--td-ink);
}
.td-assortment-landing .td-assortment-scenario-card__visual {
position: relative;
display: block;
margin: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
border-bottom: 3px solid var(--td-ink);
background: var(--td-surface);
}
.td-assortment-landing .td-assortment-pain__scene .td-lazy-video__poster,
.td-assortment-landing .td-assortment-pain__scene .td-lazy-video__media,
.td-assortment-landing .td-assortment-shelf-card__visual .td-lazy-video__poster,
.td-assortment-landing .td-assortment-shelf-card__visual .td-lazy-video__media,
.td-assortment-landing .td-assortment-scenario-card__visual .td-lazy-video__poster,
.td-assortment-landing .td-assortment-scenario-card__visual .td-lazy-video__media,
.td-assortment-landing .td-assortment-audience-card__visual .td-lazy-video__poster,
.td-assortment-landing .td-assortment-audience-card__visual .td-lazy-video__media,
.td-assortment-landing .td-assortment-risk-card figure .td-lazy-video__poster,
.td-assortment-landing .td-assortment-risk-card figure .td-lazy-video__media,
.td-assortment-landing .td-assortment-upsell-card figure .td-lazy-video__poster,
.td-assortment-landing .td-assortment-upsell-card figure .td-lazy-video__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.td-assortment-landing .td-assortment-scenario-card__visual img,
.td-assortment-landing .td-assortment-scenario-card__visual .td-lazy-video__poster,
.td-assortment-landing .td-assortment-scenario-card__visual .td-lazy-video__media {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1.08) contrast(1.04);
}
.td-assortment-landing .td-assortment-scenario-card__body {
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
flex-grow: 1;
}
.td-assortment-landing .td-assortment-scenario-card__badge {
width: fit-content;
padding: 6px 10px;
border: 3px solid var(--td-ink);
background: var(--td-yellow);
box-shadow: 2px 2px 0 var(--td-ink);
font-family: var(--td-font-mono);
font-weight: 950;
font-size: 11px;
line-height: 1;
text-transform: uppercase;
margin-bottom: 4px;
}
.td-assortment-landing .td-assortment-scenario-card:nth-child(3n + 1) {
background: color-mix(in oklch, var(--td-yellow) 88%, white);
}
.td-assortment-landing .td-assortment-scenario-card:nth-child(3n + 2) {
background: color-mix(in oklch, var(--td-cyan) 88%, white);
}
.td-assortment-landing .td-assortment-scenario-card:nth-child(3n + 3) {
background: color-mix(in oklch, var(--td-accent) 88%, white);
}
.td-assortment-landing .td-assortment-scenario-card:nth-child(3n + 3) .td-assortment-scenario-card__badge {
background: var(--td-cyan);
}
.td-assortment-landing .td-assortment-scenario-card strong {
color: inherit;
font-family: var(--td-font-display);
font-size: clamp(28px, 2.25vw, 36px);
line-height: .9;
text-transform: uppercase;
text-wrap: balance;
}
.td-assortment-landing .td-assortment-scenario-card__meta {
display: grid;
gap: 6px;
}
.td-assortment-landing .td-assortment-scenario-card__meta p {
margin: 0;
color: var(--td-ink);
font-size: 15px;
font-weight: 820;
line-height: 1.28;
}
.td-assortment-landing .td-assortment-scenario-card__tags {
margin: 8px 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
}
.td-assortment-landing .td-assortment-scenario-card__tags li {
padding: 5px 8px;
border: 2px solid var(--td-ink);
background: var(--td-surface);
box-shadow: 2px 2px 0 var(--td-ink);
font-family: var(--td-font-mono);
font-size: 11px;
font-weight: 950;
text-transform: uppercase;
color: var(--td-ink);
}
.td-assortment-landing .td-assortment-scenario-card__button {
margin-top: auto;
align-self: stretch;
text-align: center;
}
.td-assortment-landing .td-assortment-risk {
background:
linear-gradient(180deg, color-mix(in oklch, var(--td-cyan) 24%, transparent), transparent 58%);
}
.td-assortment-landing .td-assortment-audience {
background:
linear-gradient(180deg, color-mix(in oklch, var(--td-assortment-accent) 10%, transparent), transparent 50%);
}
.td-assortment-landing .td-assortment-audience__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
}
.td-assortment-landing .td-assortment-audience-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 3px solid var(--td-ink);
background: var(--td-surface);
box-shadow: var(--td-shadow);
transition: transform 200ms cubic-bezier(.16, 1, .3, 1), box-shadow 200ms cubic-bezier(.16, 1, .3, 1);
will-change: transform;
}
.td-assortment-landing .td-assortment-audience-card__visual {
position: relative;
display: block;
margin: 0;
aspect-ratio: 1 / 1;
overflow: hidden;
border-bottom: 3px solid var(--td-ink);
background: var(--td-surface);
}
.td-assortment-landing .td-assortment-audience-card__visual img,
.td-assortment-landing .td-assortment-audience-card__visual .td-lazy-video__poster,
.td-assortment-landing .td-assortment-audience-card__visual .td-lazy-video__media {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1.08) contrast(1.04);
}
.td-assortment-landing .td-assortment-audience-card__body {
padding: 18px;
display: flex;
flex-direction: column;
gap: 10px;
flex-grow: 1;
}
.td-assortment-landing .td-assortment-audience-card__badge {
width: fit-content;
padding: 6px 10px;
border: 3px solid var(--td-ink);
background: var(--td-yellow);
box-shadow: 2px 2px 0 var(--td-ink);
font-family: var(--td-font-mono);
font-weight: 950;
font-size: 11px;
line-height: 1;
text-transform: uppercase;
margin-bottom: 4px;
}
.td-assortment-landing .td-assortment-audience-card:nth-child(4n + 1) {
background: color-mix(in oklch, var(--td-yellow) 88%, white);
}
.td-assortment-landing .td-assortment-audience-card:nth-child(4n + 2) {
background: color-mix(in oklch, var(--td-cyan) 88%, white);
}
.td-assortment-landing .td-assortment-audience-card:nth-child(4n + 3) {
background: color-mix(in oklch, var(--td-accent) 88%, white);
}
.td-assortment-landing .td-assortment-audience-card:nth-child(4n + 4) {
background: color-mix(in oklch, var(--td-violet) 88%, white);
}
.td-assortment-landing .td-assortment-audience-card:nth-child(4n + 3) .td-assortment-audience-card__badge,
.td-assortment-landing .td-assortment-audience-card:nth-child(4n + 4) .td-assortment-audience-card__badge {
background: var(--td-cyan);
}
.td-assortment-landing .td-assortment-risk {
background:
linear-gradient(180deg, color-mix(in oklch, var(--td-cyan) 24%, transparent), transparent 58%);
}
.td-assortment-landing .td-assortment-risk__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.td-assortment-landing .td-assortment-risk-card {
min-height: 430px;
display: grid;
grid-template-rows: 220px 1fr;
padding: 0;
overflow: hidden;
}
.td-assortment-landing .td-assortment-risk-card figure {
border-width: 0 0 4px;
box-shadow: none;
}
.td-assortment-landing .td-assortment-risk-card div {
display: grid;
align-content: start;
gap: 10px;
padding: 18px;
}
.td-assortment-landing .td-assortment-upsell__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.td-assortment-landing .td-assortment-upsell-card {
min-height: 390px;
display: grid;
grid-template-rows: 170px auto 1fr auto;
gap: 12px;
padding: 0 14px 16px;
border: var(--td-border);
background: var(--td-surface);
box-shadow: var(--td-shadow);
color: var(--td-ink);
transition: transform 180ms cubic-bezier(.23, 1, .32, 1), box-shadow 180ms cubic-bezier(.23, 1, .32, 1);
}
.td-assortment-landing .td-assortment-upsell-card figure {
width: calc(100% + 28px);
height: 170px;
margin: 0 -14px;
border-width: 0 0 4px;
box-shadow: none;
}
.td-assortment-landing .td-assortment-faq__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.td-assortment-landing .td-assortment-faq__item {
position: relative;
padding: 0;
overflow: hidden;
background:
linear-gradient(135deg, color-mix(in oklch, var(--td-yellow) 42%, white), var(--td-surface));
}
.td-assortment-landing .td-assortment-faq__item summary {
list-style: none;
padding: 16px 58px 16px 16px;
color: var(--td-ink);
font-family: var(--td-font-display);
font-size: clamp(24px, 2vw, 32px);
line-height: .98;
text-transform: uppercase;
cursor: pointer;
}
.td-assortment-landing .td-assortment-faq__item summary::-webkit-details-marker {
display: none;
}
.td-assortment-landing .td-assortment-faq__item summary::marker {
content: "";
}
.td-assortment-landing .td-assortment-faq__item summary::after {
content: "+";
position: absolute;
right: 14px;
top: 12px;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 3px solid var(--td-ink);
background: var(--td-cyan);
box-shadow: 3px 3px 0 var(--td-ink);
font-family: var(--td-font-display);
font-size: 30px;
line-height: 1;
}
.td-assortment-landing .td-assortment-faq__item[open] summary::after {
content: "-";
background: var(--td-accent);
color: #fff;
}
.td-assortment-landing .td-assortment-faq__item[open] {
background: var(--td-assortment-soft);
transform: translate(-3px, -3px);
box-shadow: var(--td-shadow);
border-color: var(--td-ink);
}
.td-assortment-landing .td-assortment-faq__item p {
padding: 0 16px 18px;
}
.td-assortment-landing .td-assortment-modal[hidden] {
display: none;
}
.td-assortment-landing .td-assortment-modal {
position: fixed;
inset: 0;
z-index: 95;
display: grid;
place-items: center;
padding: 24px;
background: color-mix(in oklch, var(--td-ink) 54%, transparent);
backdrop-filter: blur(8px);
}
.td-assortment-landing .td-assortment-modal__dialog {
position: relative;
width: min(1020px, 100%);
max-height: min(720px, calc(100vh - 48px));
display: grid;
grid-template-columns: 1.05fr 1.15fr;
overflow: hidden;
border: 6px solid var(--td-ink);
background:
radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--td-ink) 12%, transparent) 0 2px, transparent 2px 11px),
var(--td-surface);
background-size: 22px 22px, auto;
box-shadow: 12px 12px 0 var(--td-ink);
}
.td-assortment-landing .td-assortment-modal__dialog--text-only {
width: min(760px, 100%);
grid-template-columns: 1fr;
}
.td-assortment-landing .td-assortment-modal__close {
position: absolute;
right: 12px;
top: 12px;
z-index: 10;
width: 44px;
height: 44px;
border: 3px solid var(--td-ink);
background: var(--td-accent);
color: #fff;
box-shadow: 3px 3px 0 var(--td-ink);
font-family: var(--td-font-display);
font-size: 28px;
line-height: 1;
cursor: pointer;
transition: transform 180ms ease, box-shadow 180ms ease;
}
.td-assortment-landing .td-assortment-modal__close:hover {
transform: translate(-3px, -3px) rotate(8deg);
box-shadow: 6px 6px 0 var(--td-ink);
}
.td-assortment-landing .td-assortment-modal__visual {
min-height: 100%;
margin: 0;
border-right: 4px solid var(--td-ink);
background: var(--td-yellow);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.td-assortment-landing .td-assortment-modal__visual[hidden] {
display: none;
}
.td-assortment-landing .td-assortment-modal__visual img,
.td-assortment-landing .td-assortment-modal__visual video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.td-assortment-landing .td-assortment-modal__visual img[hidden],
.td-assortment-landing .td-assortment-modal__visual video[hidden] {
display: none;
}
.td-assortment-landing .td-assortment-modal__copy {
display: flex;
flex-direction: column;
padding: clamp(24px, 3.5vw, 36px);
overflow-y: auto;
gap: 16px;
max-height: min(720px, calc(100vh - 48px));
justify-content: flex-start;
align-items: flex-start;
text-align: left;
}
.td-assortment-landing .td-assortment-modal__copy .td-heading {
font-size: clamp(38px, 4.2vw, 56px);
line-height: .9;
margin: 0;
}
.td-assortment-landing .td-assortment-modal__copy .td-lead {
font-size: clamp(17px, 1.5vw, 22px);
line-height: 1.2;
margin: 0;
}
.td-assortment-landing .td-assortment-modal__details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
}
.td-assortment-landing .td-assortment-modal__details div {
padding: 12px;
border: 3px solid var(--td-ink);
background: color-mix(in oklch, var(--td-yellow) 72%, white);
box-shadow: 3px 3px 0 var(--td-ink);
}
.td-assortment-landing .td-assortment-modal__details strong {
display: block;
margin-bottom: 5px;
font-family: var(--td-font-mono);
font-size: 11px;
font-weight: 950;
letter-spacing: .04em;
text-transform: uppercase;
}
.td-assortment-landing .td-assortment-modal__details p {
margin: 0;
color: var(--td-ink);
font-size: 14px;
font-weight: 800;
line-height: 1.28;
}
.td-float-badge {
animation: td-badge-float 3.5s ease-in-out infinite;
animation-delay: var(--td-float-delay, 0s);
display: inline-block;
will-change: transform;
}
@keyframes td-badge-float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-8px) rotate(-1.5deg);
}
}
@media (max-width: 1100px) {
.td-assortment-landing .td-assortment-pain__grid,
.td-assortment-landing .td-assortment-modal__dialog {
grid-template-columns: 1fr;
} .td-assortment-landing .td-assortment-scenarios__grid-vertical {
grid-template-columns: 1fr;
}
.td-assortment-landing .td-assortment-shelf__grid,
.td-assortment-landing .td-assortment-audience__grid,
.td-assortment-landing .td-assortment-risk__grid,
.td-assortment-landing .td-assortment-upsell__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.td-assortment-landing .td-assortment-logic__card::after {
display: none;
}
.td-assortment-landing .td-assortment-logic__track,
.td-assortment-landing .td-assortment-faq__list {
grid-template-columns: 1fr 1fr;
}
.td-assortment-landing .td-assortment-modal__visual {
border-right: 0;
border-bottom: var(--td-border);
}
}
@media (max-width: 640px) {
.td-assortment-landing .td-assortment-hero {
--td-assortment-scrub: 42vh;
}
.td-assortment-landing .td-assortment-pain__scene {
min-height: 260px;
}
.td-assortment-landing .td-assortment-logic__track,
.td-assortment-landing .td-assortment-shelf__grid,
.td-assortment-landing .td-assortment-pain__plates,
.td-assortment-landing .td-assortment-audience__grid,
.td-assortment-landing .td-assortment-risk__grid,
.td-assortment-landing .td-assortment-upsell__grid,
.td-assortment-landing .td-assortment-faq__list {
grid-template-columns: 1fr;
}
.td-assortment-landing .td-assortment-shelf-card {
min-height: 0;
grid-template-rows: auto auto auto auto;
}
.td-assortment-landing .td-assortment-shelf-card__visual {
height: 190px;
}
.td-assortment-landing .td-assortment-scenario-card:hover {
transform: none;
box-shadow: var(--td-shadow);
}
.td-assortment-landing .td-assortment-scenario-card__body {
padding: 14px;
}
.td-assortment-landing .td-assortment-scenarios__grid-vertical {
gap: 14px;
}
.td-assortment-landing .td-assortment-audience-card__badge {
display: none;
}
.td-assortment-landing .td-assortment-shelf-card:hover,
.td-assortment-landing .td-assortment-shelf-card:focus-visible,
.td-assortment-landing .td-assortment-upsell-card:hover,
.td-assortment-landing .td-assortment-upsell-card:focus-visible {
transform: none;
box-shadow: var(--td-shadow);
}
.td-assortment-landing .td-assortment-modal {
padding: 12px;
}
.td-assortment-landing .td-assortment-modal__dialog {
max-height: 90vh;
}
.td-assortment-landing .td-assortment-modal__visual img,
.td-assortment-landing .td-assortment-modal__visual video {
min-height: 200px;
max-height: 240px;
}
.td-assortment-landing .td-assortment-modal__copy {
padding: 16px;
max-height: calc(90vh - 240px);
}
.td-assortment-landing .td-assortment-modal__details {
grid-template-columns: 1fr;
}
} .td-assortment-landing .td-assortment-hero .td-button--brand,
.td-assortment-page-hero .td-button--brand {
position: relative;
overflow: hidden;
animation: td-url-hop 3.2s ease-in-out infinite;
transform-origin: 54% 62%;
will-change: transform;
}
.td-assortment-landing .td-assortment-hero .td-button--brand::after,
.td-assortment-page-hero .td-button--brand::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;
} .td-assortment-landing .td-assortment-pain__scene:hover .td-lazy-video__media,
.td-assortment-landing .td-assortment-scenario-card:hover .td-lazy-video__media,
.td-assortment-landing .td-assortment-audience-card:hover .td-lazy-video__media,
.td-assortment-landing .td-assortment-risk-card:hover .td-lazy-video__media,
.td-assortment-landing .td-assortment-shelf-card:hover .td-lazy-video__media,
.td-assortment-landing .td-assortment-upsell-card:hover .td-lazy-video__media {
transform: scale(1.04) rotate(-1deg);
} .td-assortment-landing .td-assortment-audience-card:hover {
transform: translate(-6px, -10px) rotate(-0.6deg);
box-shadow: 14px 14px 0 var(--td-ink);
} .td-assortment-landing .td-assortment-logic__card strong,
.td-assortment-landing .td-assortment-logic__card p {
position: relative;
z-index: 2;
}
.td-assortment-landing .td-assortment-logic__card::after {
z-index: 1;
} .td-assortment-landing .td-assortment-faq__item {
transition: transform 180ms ease, box-shadow 180ms ease, background-color 240ms ease;
}
.td-assortment-landing .td-assortment-faq__item:hover {
transform: translate(-2px, -2px);
box-shadow: var(--td-shadow);
}
.td-assortment-landing .td-assortment-faq__item summary::after {
transition: transform 240ms cubic-bezier(.16, 1, .3, 1), background-color 180ms ease, color 180ms ease;
}
.td-assortment-landing .td-assortment-faq__item[open] summary::after {
transform: rotate(180deg);
}
@keyframes td-faq-slide {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.td-assortment-landing .td-assortment-faq__item[open] p {
animation: td-faq-slide 300ms cubic-bezier(.16, 1, .3, 1) both;
} .td-assortment-landing.td-assortment-landing--sweets-china .td-assortment-pain__grid {
grid-template-columns: minmax(0, .84fr) minmax(560px, 1.16fr);
gap: clamp(34px, 4.2vw, 78px);
align-items: center;
}
.td-assortment-landing--sweets-china .td-assortment-pain__scene,
.td-assortment-landing--sweets-china .td-assortment-scenario-card__visual {
position: relative;
display: block;
aspect-ratio: 16 / 9;
background: var(--td-ink);
}
.td-assortment-landing--sweets-china .td-assortment-pain__scene {
z-index: 1;
width: 100%;
min-height: 0;
max-height: 360px;
}
.td-assortment-landing--sweets-china .td-assortment-pain__copy {
position: relative;
z-index: 2;
}
.td-assortment-landing--sweets-china .td-assortment-pain__scene .td-lazy-video__poster,
.td-assortment-landing--sweets-china .td-assortment-pain__scene .td-lazy-video__media,
.td-assortment-landing--sweets-china .td-assortment-scenario-card__visual .td-lazy-video__poster,
.td-assortment-landing--sweets-china .td-assortment-scenario-card__visual .td-lazy-video__media {
position: absolute;
inset: 0;
}
.td-assortment-landing--sweets-china .td-assortment-pain__scene img,
.td-assortment-landing--sweets-china .td-assortment-pain__scene .td-lazy-video__poster,
.td-assortment-landing--sweets-china .td-assortment-pain__scene .td-lazy-video__media,
.td-assortment-landing--sweets-china .td-assortment-scenario-card__visual img,
.td-assortment-landing--sweets-china .td-assortment-scenario-card__visual .td-lazy-video__poster,
.td-assortment-landing--sweets-china .td-assortment-scenario-card__visual .td-lazy-video__media {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 46%;
}
.td-assortment-landing--sweets-china .td-assortment-risk-card {
grid-template-rows: auto 1fr;
}
.td-assortment-landing--sweets-china .td-assortment-risk-card figure {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 10;
min-height: clamp(220px, 18vw, 270px);
background: var(--td-ink);
}
.td-assortment-landing--sweets-china .td-assortment-risk-card .td-lazy-video__poster,
.td-assortment-landing--sweets-china .td-assortment-risk-card .td-lazy-video__media {
position: absolute;
inset: 0;
}
.td-assortment-landing--sweets-china .td-assortment-risk-card img,
.td-assortment-landing--sweets-china .td-assortment-risk-card .td-lazy-video__poster,
.td-assortment-landing--sweets-china .td-assortment-risk-card .td-lazy-video__media {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 45%;
padding: 0;
}
.td-assortment-landing--sweets-china .td-assortment-shelf .td-section-title__copy {
position: relative;
max-width: min(760px, 100%);
margin-left: auto;
padding: clamp(14px, 1.4vw, 20px) clamp(18px, 2vw, 28px);
border: 4px solid var(--td-ink);
background:
radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--td-ink) 10%, transparent) 0 2px, transparent 2px 12px),
var(--td-surface);
background-size: 24px 24px, auto;
box-shadow: 8px 8px 0 var(--td-ink);
color: var(--td-ink);
font-size: clamp(18px, 1.35vw, 25px);
font-weight: 950;
line-height: 1.32;
transform: rotate(.4deg);
}
.td-assortment-landing--sweets-china .td-assortment-shelf .td-section-title__copy::before {
content: "";
position: absolute;
inset: -11px auto auto 24px;
width: 92px;
height: 18px;
border: 3px solid var(--td-ink);
background: var(--td-accent);
box-shadow: 3px 3px 0 var(--td-ink);
transform: rotate(-2deg);
}
@media (max-width: 1100px) {
.td-assortment-landing.td-assortment-landing--sweets-china .td-assortment-pain__grid {
grid-template-columns: 1fr;
gap: 30px;
}
.td-assortment-landing--sweets-china .td-assortment-pain__scene {
max-height: none;
}
}
@media (max-width: 640px) {
.td-assortment-landing--sweets-china .td-assortment-shelf .td-section-title__copy {
width: 100%;
margin-left: 0;
box-shadow: 5px 5px 0 var(--td-ink);
transform: rotate(0deg);
}
} .td-assortment-landing .td-assortment-risk-card {
grid-template-rows: auto 1fr;
}
.td-assortment-landing .td-assortment-risk-card figure {
aspect-ratio: 4 / 3;
width: 100%;
}
.td-assortment-landing .td-assortment-risk-card img {
object-fit: cover !important;
padding: 0;
}
.td-assortment-landing.td-assortment-landing--sweets-china .td-assortment-risk-card figure {
aspect-ratio: 16 / 10;
min-height: clamp(220px, 18vw, 270px);
}
.td-assortment-landing.td-assortment-landing--sweets-china .td-assortment-risk-card img,
.td-assortment-landing.td-assortment-landing--sweets-china .td-assortment-risk-card .td-lazy-video__poster,
.td-assortment-landing.td-assortment-landing--sweets-china .td-assortment-risk-card .td-lazy-video__media {
object-fit: cover;
object-position: center 45%;
padding: 0;
} .td-assortment-landing .td-assortment-scenario-tab {
transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}
.td-assortment-landing .td-assortment-scenario-tab:hover:not(.is-active) {
background: var(--td-assortment-soft);
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 var(--td-ink);
}
@keyframes td-panel-fade-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.td-assortment-landing .td-assortment-scenario-panel.is-active {
animation: td-panel-fade-in 300ms cubic-bezier(.16, 1, .3, 1) both;
} .td-assortment-landing .td-assortment-pain__note {
transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, filter 180ms ease;
}
.td-assortment-landing .td-assortment-pain__note:hover {
transform: scale(1.05) rotate(-1.5deg);
box-shadow: 8px 8px 0 var(--td-ink), 0 0 20px var(--td-assortment-accent);
border-color: var(--td-ink);
background: var(--td-yellow);
color: var(--td-ink);
}
.td-assortment-landing .td-assortment-pain__note:nth-child(2n):hover {
transform: scale(1.05) rotate(1.5deg) translateX(8px);
background: var(--td-cyan);
box-shadow: 8px 8px 0 var(--td-ink), 0 0 20px var(--td-cyan);
filter: saturate(1.3) contrast(1.1);
}
.td-assortment-landing .td-assortment-pain__note:nth-child(3n):hover {
transform: scale(1.05) rotate(-1deg) translateX(-6px);
background: var(--td-accent);
box-shadow: 8px 8px 0 var(--td-ink), 0 0 20px var(--td-accent);
filter: saturate(1.3) contrast(1.1);
}
@media (prefers-reduced-motion: reduce) {
.td-assortment-landing .td-assortment-shelf-card,
.td-assortment-landing .td-assortment-upsell-card,
.td-assortment-landing .td-assortment-pain__note,
.td-float-badge,
.td-assortment-landing .td-assortment-hero .td-button--brand,
.td-assortment-landing .td-assortment-hero .td-button--brand::after,
.td-assortment-page-hero .td-button--brand,
.td-assortment-page-hero .td-button--brand::after,
.td-assortment-landing .td-assortment-audience-card:hover,
.td-assortment-landing .td-assortment-faq__item[open] p,
.td-assortment-landing .td-assortment-scenario-panel.is-active,
.td-assortment-landing .td-assortment-pain__note:hover {
transition: none !important;
animation: none !important;
transform: none !important;
box-shadow: none !important;
}
}  .td-assortment-page-hero .td-heading {
font-size: clamp(30px, 3vw, 50px);
}
.td-assortment-page-hero .td-lead {
font-size: clamp(16px, 1.25vw, 20px);
}
.td-assortment-page-hero > div {
display: grid;
gap: 14px;
}
.td-assortment-page-hero > div > * {
margin: 0;
}
@media (min-width: 1101px) {
.td-assortment-page-hero.td-page-hero--split {
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}
}
@media (max-width: 980px) {
.td-assortment-page-hero .td-heading {
font-size: clamp(26px, 7.4vw, 38px);
}
} .td-assortment-landing.td-assortment-landing .td-assortment-pain__note {
min-height: 0;
padding: 14px 16px;
}
@media (min-width: 981px) {
.td-assortment-landing.td-assortment-landing .td-assortment-pain__grid {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 26px;
align-items: center;
}
.td-assortment-landing.td-assortment-landing .td-assortment-pain__scene {
width: 100%;
min-height: 0;
max-height: none;
aspect-ratio: 16 / 9;
}
.td-assortment-landing.td-assortment-landing .td-assortment-pain__plates {
grid-template-columns: 1fr;
gap: 14px;
}
.td-assortment-landing .td-assortment-pain__note strong {
font-size: clamp(18px, 1.4vw, 22px);
}
.td-assortment-landing .td-assortment-pain__note p {
margin-top: 6px;
}
} .td-assortment-landing.td-assortment-landing .td-assortment-scenario-card__visual {
aspect-ratio: 4 / 3;
} .td-assortment-landing.td-assortment-landing .td-assortment-shelf-card {
grid-template-rows: auto auto auto 1fr auto;
}
.td-assortment-landing .td-assortment-shelf-card .td-url {
justify-self: start;
background: var(--td-yellow);
color: var(--td-ink);
}: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;
}
}