:root {
--td-bg: oklch(97.9% 0 89.9);
--td-surface: #fff;
--td-ink: oklch(17.3% 0 89.9);
--td-muted: oklch(45% 0.02 89.9);
--td-accent: oklch(61.3% 0.233 21.4);
--td-yellow: oklch(85.9% 0.175 97.7);
--td-cyan: oklch(82.7% 0.141 204);
--td-blue: #7aa2ff;
--td-violet: #9b7bff;
--td-brand-ink: oklch(24% 0.095 278);
--td-soft: oklch(94% 0.03 97.7);
--td-radius: 0px;
--td-border: 4px solid var(--td-ink);
--td-border-heavy: 5px solid var(--td-ink);
--td-shadow: 8px 8px 0 var(--td-ink);
--td-shadow-small: 4px 4px 0 var(--td-ink);
--td-max: 1220px;
--td-font-display: Impact, Haettenschweiler, "Arial Black", "Roboto Condensed", sans-serif;
--td-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--td-font-mono: ui-monospace, "JetBrains Mono", Menlo, monospace;
}.td-shell,
.td-shell * {
box-sizing: border-box;
}
.td-shell {
min-height: 100vh;
overflow: clip;
color: var(--td-ink);
font-family: var(--td-font-body);
line-height: 1.5;
background:
radial-gradient(circle at 14px 14px, color-mix(in oklch, var(--td-ink) 12%, transparent) 0 2px, transparent 2px 12px),
var(--td-bg);
background-size: 24px 24px, auto;
}
.td-shell a {
color: inherit;
text-decoration: none;
}
.td-shell img {
display: block;
max-width: 100%;
}
.td-topbar {
position: sticky;
top: 0;
z-index: 30;
border-bottom: var(--td-border);
background: var(--td-surface);
}
.td-contact-strip {
border-bottom: 3px solid var(--td-ink);
background: var(--td-ink);
color: #fff;
font-size: 12px;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
}
.td-contact-strip__inner,
.td-header,
.td-section,
.td-footer__inner {
width: min(var(--td-max), calc(100% - 40px));
margin: 0 auto;
}
.td-contact-strip__inner {
min-height: 34px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.td-social {
display: flex;
align-items: center;
gap: 10px;
color: var(--td-yellow);
}
.td-social a {
color: var(--td-yellow);
font-weight: 950;
}
.td-social a:hover {
color: var(--td-yellow);
text-decoration: none;
}
.td-contact-chip {
display: inline-grid;
place-items: center;
min-width: 48px;
min-height: 24px;
padding: 3px 9px;
border: 2px solid #fff;
background: var(--td-yellow);
color: var(--td-ink);
box-shadow: 2px 2px 0 #fff;
font: inherit;
line-height: 1;
letter-spacing: .04em;
text-transform: uppercase;
cursor: pointer;
}
.td-contact-chip--max {
transform: rotate(-1.5deg);
}
.td-contact-chip:hover {
transform: translate(-1px, -1px) rotate(1deg);
box-shadow: 3px 3px 0 #fff;
}
.td-header {
min-height: 78px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 18px;
}
.td-logo {
display: inline-grid;
grid-template-columns: 94px auto;
align-items: center;
gap: 12px;
min-width: 220px;
font-size: 12px;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--td-muted);
}
.td-logo img {
width: 94px;
height: 58px;
object-fit: contain;
filter: drop-shadow(3px 3px 0 var(--td-ink));
}
.td-nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
min-width: 0;
gap: 8px;
font-size: 13px;
font-weight: 900;
}
.td-nav a {
padding: 8px 10px;
border: 2px solid transparent;
}
.td-nav a:hover {
border-color: var(--td-ink);
background: var(--td-yellow);
}
.td-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 12px 18px;
border: 3px solid var(--td-ink);
border-radius: var(--td-radius);
background: var(--td-accent);
color: #fff;
box-shadow: var(--td-shadow-small);
font-size: 13px;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
cursor: pointer;
}
.td-button--secondary {
background: var(--td-surface);
color: var(--td-ink);
}
.td-button--brand {
background: var(--td-accent);
color: #fff;
}
.td-shell .td-button:not(.td-button--secondary):not(.td-button--ghost),
.td-shell .td-form .td-button,
.td-shell .td-header > .td-button,
.td-shell .td-mobile-actions .td-button--brand {
background: var(--td-accent);
color: #fff;
}
.td-shell .td-button:not(.td-button--secondary):not(.td-button--ghost):hover,
.td-shell .td-form .td-button:hover,
.td-shell .td-header > .td-button:hover,
.td-shell .td-mobile-actions .td-button--brand:hover {
border-color: var(--td-ink);
background: var(--td-accent);
color: #fff;
}
.td-button--ghost {
background: var(--td-yellow);
color: var(--td-ink);
}
.td-button:focus-visible,
.td-nav a:focus-visible,
.td-side-link:focus-visible,
.td-form input:focus-visible,
.td-form select:focus-visible,
.td-form textarea:focus-visible,
.td-modal__close:focus-visible {
outline: 4px solid var(--td-yellow);
outline-offset: 3px;
}
.td-section {
padding: 76px 0;
}
.td-section-title {
display: flex;
align-items: end;
justify-content: space-between;
gap: 22px;
margin-bottom: 30px;
}
.td-section-title__copy {
max-width: 58ch;
margin: 0;
color: var(--td-muted);
font-size: 18px;
font-weight: 700;
}
.td-kicker,
.td-meta,
.td-url {
font-family: var(--td-font-mono);
font-size: 12px;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.td-kicker,
.td-meta {
width: fit-content;
max-width: 100%;
padding: 7px 10px;
border: 3px solid var(--td-ink);
background: var(--td-yellow);
}
.td-kicker {
display: inline-block;
line-height: 1.25;
}
.td-url {
display: inline-block;
position: relative;
width: fit-content;
max-width: 100%;
padding: 6px 8px;
border: 2px solid var(--td-ink);
background: var(--td-yellow);
color: var(--td-ink);
line-height: 1.35;
overflow-wrap: anywhere;
overflow: hidden;
transform-origin: 54% 62%;
animation: td-url-hop 3.2s ease-in-out infinite;
will-change: transform;
}
.td-url::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-url:hover {
background: var(--td-accent);
color: #fff;
animation: none;
transform: translate(-3px, -3px) rotate(-.45deg);
box-shadow: var(--td-shadow-small);
}
.td-url:hover::after {
animation: td-url-shine 820ms ease both;
}
.td-url:active {
animation: none;
transform: translate(1px, 1px);
box-shadow: 2px 2px 0 var(--td-ink);
}
.td-category-card:nth-child(2n) .td-url,
.td-news-card:nth-child(2n) .td-url {
animation-delay: -.65s;
}
.td-category-card:nth-child(3n) .td-url,
.td-news-card:nth-child(3n) .td-url {
animation-delay: -1.35s;
}
.td-category-card:nth-child(2n) .td-url::after,
.td-news-card:nth-child(2n) .td-url::after {
animation-delay: -1.1s;
}
.td-category-card:nth-child(3n) .td-url::after,
.td-news-card:nth-child(3n) .td-url::after {
animation-delay: -2.2s;
}
.td-display,
.td-heading,
.td-article-title {
margin: 0;
font-family: var(--td-font-display);
line-height: 1.03;
letter-spacing: 0;
text-transform: uppercase;
text-wrap: balance;
}
.td-display {
color: var(--td-yellow);
font-size: clamp(52px, 9vw, 128px);
font-weight: 900;
-webkit-text-stroke: 2px var(--td-ink);
text-shadow: 6px 6px 0 var(--td-ink);
}
.td-heading {
font-size: clamp(38px, 6vw, 74px);
}
.td-lead {
max-width: 62ch;
margin: 22px 0 0;
color: var(--td-brand-ink);
font-size: 21px;
font-weight: 760;
line-height: 1.35;
text-wrap: pretty;
}
.td-panel,
.td-card,
.td-news-card,
.td-form {
border: var(--td-border);
background: var(--td-surface);
box-shadow: 5px 5px 0 var(--td-ink);
}
.td-panel {
box-shadow: var(--td-shadow);
}
.td-halftone {
background:
radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--td-ink) 13%, transparent) 0 2px, transparent 2px 11px),
var(--td-surface);
background-size: 22px 22px, auto;
}
.td-burst {
width: fit-content;
padding: 18px 22px;
border: var(--td-border);
background: var(--td-yellow);
box-shadow: 5px 5px 0 var(--td-ink);
font-family: var(--td-font-display);
font-size: clamp(30px, 5vw, 56px);
line-height: .95;
text-transform: uppercase;
transform: rotate(-2deg);
}
.td-grid {
display: grid;
gap: 18px;
}
.td-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.td-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.td-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.td-card {
padding: 20px;
}
.td-card__title {
margin: 0;
font-size: 24px;
line-height: 1.12;
font-weight: 900;
text-wrap: balance;
overflow-wrap: anywhere;
}
.td-card__text {
margin: 12px 0 0;
color: var(--td-muted);
font-size: 15px;
font-weight: 680;
}
.td-card-icon,
.td-visual-thumb {
display: block;
margin: 0;
border: 3px solid var(--td-ink);
background: var(--td-surface);
box-shadow: 3px 3px 0 var(--td-ink);
}
img.td-card-icon,
.td-card-icon img {
width: 76px;
height: 76px;
object-fit: cover;
}
figure.td-card-icon {
width: 82px;
height: 82px;
display: grid;
place-items: center;
overflow: hidden;
}
.td-card-icon img {
width: 100%;
height: 100%;
}
.td-card-icon img {
display: block;
}
.td-visual-thumb {
width: 100%;
height: auto;
object-fit: cover;
}
figure.td-visual-thumb {
overflow: hidden;
}
.td-card-icon .td-lazy-video__poster,
.td-card-icon .td-lazy-video__media,
.td-visual-thumb .td-lazy-video__poster,
.td-visual-thumb .td-lazy-video__media {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: none;
}
.td-category-card {
--td-category-media-position: center 76%;
--td-category-media-scale: 1.16;
--td-category-media-shift-y: -8%;
--td-category-media-hover-scale: 1.23;
--td-category-media-hover-shift-y: -9%;
min-height: 360px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 20px;
padding: 0;
overflow: hidden;
background:
radial-gradient(circle at 10px 10px, color-mix(in oklch, var(--td-ink) 13%, transparent) 0 2px, transparent 2px 10px),
var(--td-surface);
background-size: 20px 20px, auto;
}
.td-category-card__visual {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 10;
margin: 0;
overflow: hidden;
border-bottom: var(--td-border);
background: var(--td-bg);
}
.td-category-card__visual.td-lazy-video {
display: block;
}
.td-category-card__visual img,
.td-category-card__visual .td-lazy-video__poster,
.td-category-card__visual .td-lazy-video__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--td-category-media-position);
transform: translateY(var(--td-category-media-shift-y)) scale(var(--td-category-media-scale));
transform-origin: center center;
}
.td-category-card__visual .td-lazy-video__media {
filter: none;
}
.td-category-card > div {
padding: 0 18px;
}
.td-category-card .td-url {
align-self: flex-start;
margin: auto 18px 18px;
background: var(--td-yellow);
color: var(--td-ink);
}
.td-category-card:nth-child(3n + 1) {
background-color: var(--td-yellow);
}
.td-category-card:nth-child(3n + 2) {
background-color: var(--td-cyan);
}
.td-category-card:nth-child(3n + 3) {
background-color: color-mix(in oklch, var(--td-accent) 86%, white);
color: #fff;
}
.td-form {
padding: 22px;
}
.td-form__trap {
position: absolute;
left: -100vw;
width: 1px;
height: 1px;
overflow: hidden;
}
.td-form__title {
margin: 0;
font-size: 24px;
line-height: 1.12;
font-weight: 900;
}
.td-form__hint {
margin: 8px 0 0;
color: var(--td-muted);
font-size: 14px;
font-weight: 700;
}
.td-form__grid {
display: grid;
gap: 10px;
margin-top: 14px;
}
.td-form input,
.td-form select,
.td-form textarea {
width: 100%;
min-height: 46px;
padding: 12px 14px;
border: 3px solid var(--td-ink);
border-radius: 0;
background: var(--td-bg);
color: var(--td-ink);
font: inherit;
font-weight: 700;
}
.td-form textarea {
min-height: 118px;
resize: vertical;
}
.td-form input[type="file"] {
min-height: auto;
padding: 10px;
background: var(--td-surface);
}
.td-form input[type="file"]::file-selector-button {
margin-right: 12px;
padding: 8px 12px;
border: 2px solid var(--td-ink);
background: var(--td-yellow);
color: var(--td-ink);
font: inherit;
font-weight: 900;
cursor: pointer;
}
.td-form__wide {
grid-column: 1 / -1;
}
.td-form__consent {
display: grid;
grid-template-columns: 22px 1fr;
gap: 10px;
align-items: start;
color: var(--td-muted);
font-size: 12px;
font-weight: 700;
line-height: 1.35;
}
.td-form__consent input {
width: 22px;
height: 22px;
min-height: 22px;
padding: 0;
accent-color: var(--td-accent);
}
.td-form__consent a {
text-decoration: underline;
text-decoration-thickness: 2px;
}
.td-form__consent--optional {
margin-top: -2px;
}
.td-form__consent,
.td-form__grid > .td-button {
grid-column: 1 / -1;
}
.td-news-card {
display: flex;
flex-direction: column;
overflow: hidden;
}
.td-news-card__media {
aspect-ratio: 16 / 9;
border-bottom: var(--td-border);
background: var(--td-surface);
overflow: hidden;
}
.td-news-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--td-image-position, center);
}
.td-news-card__body {
display: grid;
gap: 12px;
padding: 18px;
}
.td-news-card__title {
margin: 0;
font-size: 22px;
line-height: 1.12;
font-weight: 900;
}
.td-news-card__excerpt {
margin: 0;
color: var(--td-muted);
font-size: 14px;
font-weight: 650;
}
.td-tag-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 26px;
}
.td-tag {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 7px 10px;
border: 3px solid var(--td-ink);
background: var(--td-surface);
box-shadow: 3px 3px 0 var(--td-ink);
font-family: var(--td-font-mono);
font-size: 11px;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
}
.td-tag.is-active {
background: var(--td-yellow);
box-shadow: 5px 5px 0 var(--td-ink);
}
.td-mobile-actions {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 10px 12px;
border-top: var(--td-border);
background: var(--td-surface);
}
.td-modal[hidden] {
display: none;
}
.td-modal {
position: fixed;
inset: 0;
z-index: 95;
display: grid;
place-items: center;
padding: 20px;
}
.td-shell .td-modal button.td-modal__backdrop {
position: absolute;
inset: 0;
border: 0;
background:
radial-gradient(circle at 18% 14%, color-mix(in oklch, var(--td-yellow) 24%, transparent), transparent 34%),
linear-gradient(135deg, color-mix(in oklch, white 64%, transparent), color-mix(in oklch, var(--td-cyan) 28%, transparent)),
color-mix(in oklch, white 62%, transparent);
-webkit-backdrop-filter: blur(8px) saturate(1.08);
backdrop-filter: blur(8px) saturate(1.08);
cursor: pointer;
}
.td-modal__dialog {
position: relative;
z-index: 1;
width: min(560px, calc(100vw - 28px));
max-height: calc(100vh - 28px);
overflow: auto;
padding: clamp(20px, 4vw, 30px);
}
.td-modal__close {
position: absolute;
top: 12px;
right: 12px;
width: 42px;
height: 42px;
display: inline-grid;
place-items: center;
border: 3px solid var(--td-ink);
background: var(--td-accent);
color: #fff;
box-shadow: 3px 3px 0 var(--td-ink);
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.td-modal__head {
display: grid;
gap: 12px;
padding-right: 46px;
margin-bottom: 18px;
}
.td-modal__title {
margin: 0;
font-family: var(--td-font-display);
font-size: clamp(32px, 5vw, 52px);
line-height: 1;
text-transform: uppercase;
}
.td-modal .td-form {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.td-modal .td-form__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.td-modal .td-form__title,
.td-modal .td-form__hint {
display: none;
}
.td-modal-open {
overflow: hidden;
}
.td-footer__cookie-button {
display: inline;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
font-weight: 760;
text-decoration: underline;
text-decoration-thickness: 2px;
cursor: pointer;
}
.td-cookie[hidden] {
display: none;
}
.td-cookie {
position: fixed;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 92;
display: grid;
justify-items: center;
pointer-events: none;
}
.td-cookie__panel {
width: min(760px, 100%);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px 16px;
align-items: center;
padding: 12px;
border: var(--td-border);
background: var(--td-surface);
box-shadow: var(--td-shadow-small);
pointer-events: auto;
}
.td-cookie__copy {
min-width: 0;
}
.td-cookie__copy strong {
display: inline-block;
margin-bottom: 3px;
font-family: var(--td-font-display);
font-size: 22px;
line-height: 1;
text-transform: uppercase;
}
.td-cookie__copy p,
.td-cookie__settings p {
margin: 0;
color: var(--td-muted);
font-size: 12px;
font-weight: 700;
line-height: 1.35;
}
.td-cookie__copy a {
text-decoration: underline;
text-decoration-thickness: 2px;
}
.td-cookie__actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.td-cookie__actions .td-button,
.td-cookie__settings .td-button {
min-height: 36px;
padding: 8px 10px;
font-size: 11px;
}
.td-cookie__settings {
grid-column: 1 / -1;
display: grid;
gap: 10px;
padding-top: 10px;
border-top: 2px solid var(--td-ink);
}
.td-cookie__settings[hidden] {
display: none;
}
.td-cookie__settings .td-form__consent {
color: var(--td-muted);
}
.td-button,
.td-url,
.td-card,
.td-news-card,
.td-tag,
.td-panel,
.td-strip-cell,
.td-compare-col,
.td-before-after-visual,
.td-card-icon,
.td-visual-thumb,
.td-category-card__visual img,
.td-category-card__visual .td-lazy-video__media {
transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, filter 180ms ease;
}
.td-button:hover,
.td-card:hover,
.td-news-card:hover,
.td-tag:hover,
.td-panel:hover {
transform: translate(-3px, -3px);
box-shadow: var(--td-shadow);
}
.td-button:active,
.td-card:active,
.td-news-card:active {
transform: translate(1px, 1px);
box-shadow: 2px 2px 0 var(--td-ink);
}
.td-strip-cell:hover,
.td-compare-col:hover {
transform: translate(-3px, -3px);
}
.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: td-visual-bounce 520ms cubic-bezier(.16, 1, .3, 1) both;
}
.td-card:hover :is(img.td-card-icon, .td-card-icon img),
.td-strip-cell:hover .td-visual-thumb,
.td-compare-col:hover .td-visual-thumb,
.td-category-card:hover .td-category-card__visual img,
.td-category-card:hover .td-category-card__visual .td-lazy-video__media {
transform: translateY(var(--td-category-media-hover-shift-y)) scale(var(--td-category-media-hover-scale)) rotate(-1.2deg);
filter: saturate(1.08) contrast(1.04);
}
.td-hero__copy {
animation: td-panel-pop 640ms cubic-bezier(.16, 1, .3, 1) both;
}
.td-hero__aside {
animation: td-panel-pop 760ms cubic-bezier(.16, 1, .3, 1) 120ms both;
}
.td-kicker,
.td-speech,
.td-burst {
animation: td-comic-wiggle 3.6s ease-in-out infinite;
transform-origin: 55% 65%;
will-change: transform;
}
.td-section:nth-of-type(2n) .td-kicker,
.td-card:nth-child(2n) .td-kicker,
.td-news-card:nth-child(2n) .td-kicker {
animation-delay: -.9s;
}
.td-section:nth-of-type(3n) .td-kicker,
.td-card:nth-child(3n) .td-kicker,
.td-news-card:nth-child(3n) .td-kicker {
animation-delay: -1.8s;
}
.td-product-window img,
.td-news-card__media img,
.td-article-hero__media img {
transition: transform 520ms cubic-bezier(.16, 1, .3, 1), filter 220ms ease;
}
.td-product-window:hover img,
.td-news-card:hover .td-news-card__media img,
.td-article-hero__media:hover img {
transform: scale(1.055) rotate(-1.2deg);
filter: saturate(1.08) contrast(1.03);
}
.td-catalog-ad,
.td-footer {
position: relative;
overflow: hidden;
}
.td-catalog-ad::after,
.td-footer::after {
content: "";
position: absolute;
inset: -40%;
pointer-events: none;
background: linear-gradient(115deg, transparent 38%, color-mix(in oklch, white 62%, transparent) 48%, transparent 58%);
opacity: 0;
transform: translateX(-65%) rotate(8deg);
}
.td-catalog-ad:hover::after,
.td-catalog-ad.is-visible::after,
.td-footer.is-visible::after {
animation: td-shine-swipe 1.8s ease 380ms both;
}
.td-catalog-ad > *,
.td-footer > * {
position: relative;
z-index: 1;
}
.td-reveal {
opacity: 0;
transform: translateY(22px);
}
.td-reveal.is-visible {
opacity: 1;
transform: translateY(0);
transition: opacity 520ms ease, transform 560ms cubic-bezier(.16, 1, .3, 1);
transition-delay: calc(var(--td-stagger, 0) * 64ms);
}
.td-candy-trail {
position: fixed;
inset: 0;
z-index: 80;
overflow: hidden;
pointer-events: none;
contain: layout paint;
}
.td-candy-bit {
position: absolute;
top: 0;
left: 0;
width: var(--td-size, 12px);
height: calc(var(--td-size, 12px) * .66);
border: 2px solid var(--td-ink);
border-radius: 999px;
background: var(--td-c, var(--td-yellow));
box-shadow: 2px 2px 0 var(--td-ink);
opacity: .94;
transform: translate3d(var(--td-x), var(--td-y), 0) translate(-50%, -50%) rotate(var(--td-rot));
animation: td-candy-trail-pop 760ms cubic-bezier(.16, 1, .3, 1) forwards;
will-change: transform, opacity;
}
.td-candy-bit::before,
.td-candy-bit::after {
content: "";
position: absolute;
top: 50%;
width: 7px;
height: 7px;
border: 2px solid var(--td-ink);
border-radius: 2px;
background: var(--td-c, var(--td-yellow));
transform: translateY(-50%) rotate(45deg);
}
.td-candy-bit::before {
left: -7px;
}
.td-candy-bit::after {
right: -7px;
}
@keyframes td-candy-trail-pop {
0% {
opacity: 0;
transform: translate3d(var(--td-x), var(--td-y), 0) translate(-50%, -50%) rotate(var(--td-rot)) scale(.62);
}
14% {
opacity: .96;
}
100% {
opacity: 0;
transform: translate3d(calc(var(--td-x) + var(--td-dx)), calc(var(--td-y) + var(--td-dy)), 0) translate(-50%, -50%) rotate(calc(var(--td-rot) + 150deg)) scale(.22);
}
}
@keyframes td-panel-pop {
0% {
opacity: 0;
transform: translateY(26px) scale(.98) rotate(-.35deg);
}
100% {
opacity: 1;
transform: translateY(0) scale(1) rotate(0);
}
}
@keyframes td-comic-wiggle {
0%,
100% {
transform: rotate(-1.2deg);
}
50% {
transform: rotate(1.2deg);
}
}
@keyframes td-url-hop {
0%,
76%,
100% {
transform: translate(0, 0) rotate(0);
}
84% {
transform: translate(-2px, -5px) rotate(-.65deg);
}
92% {
transform: translate(-1px, -2px) rotate(.35deg);
}
}
@keyframes td-visual-bounce {
0% {
transform: translate(0, 0) rotate(0);
}
42% {
transform: translate(-4px, -10px) rotate(-.9deg);
}
72% {
transform: translate(-2px, -4px) rotate(.35deg);
}
100% {
transform: translate(-3px, -6px) rotate(-.35deg);
}
}
@keyframes td-shine-swipe {
0% {
opacity: 0;
transform: translateX(-65%) rotate(8deg);
}
22% {
opacity: .78;
}
100% {
opacity: 0;
transform: translateX(68%) rotate(8deg);
}
}
@keyframes td-url-shine {
0%,
62% {
opacity: 0;
transform: translateX(-72%) rotate(8deg);
}
70% {
opacity: .72;
}
84%,
100% {
opacity: 0;
transform: translateX(72%) rotate(8deg);
}
}
@media (prefers-reduced-motion: reduce) {
.td-shell,
.td-shell * {
animation-duration: 1ms;
animation-iteration-count: 1;
scroll-behavior: auto;
transition-duration: 1ms;
}
.td-reveal {
opacity: 1;
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;
}
}
@media (max-width: 980px) {
.td-header,
.td-grid--2,
.td-grid--3,
.td-grid--4 {
grid-template-columns: 1fr 1fr;
}
.td-logo {
grid-column: 1 / -1;
}
.td-nav {
justify-content: flex-start;
}
}
@media (max-width: 640px) {
.td-shell {
max-width: 100%;
overflow-x: hidden;
padding-bottom: 78px;
}
.td-topbar {
position: relative;
}
.td-contact-strip {
font-size: 11px;
letter-spacing: .02em;
}
.td-contact-strip__inner,
.td-header,
.td-section,
.td-footer__inner {
width: min(var(--td-max), calc(100vw - 24px));
min-width: 0;
}
.td-contact-strip__inner {
display: grid;
gap: 5px;
padding: 7px 0;
}
.td-header,
.td-grid--2,
.td-grid--3,
.td-grid--4,
.td-section-title {
display: grid;
grid-template-columns: 1fr;
}
.td-header {
min-height: auto;
padding: 12px 0;
gap: 10px;
}
.td-logo {
grid-template-columns: 84px minmax(0, 1fr);
min-width: 0;
}
.td-logo img {
width: 84px;
height: 52px;
}
.td-nav {
width: 100%;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.td-nav::-webkit-scrollbar {
display: none;
}
.td-nav a {
flex: 0 0 auto;
scroll-snap-align: start;
border-color: var(--td-ink);
background: var(--td-surface);
white-space: nowrap;
}
.td-header > .td-button {
display: none;
}
.td-section {
padding: 56px 0;
}
.td-tag-row {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 4px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.td-tag-row::-webkit-scrollbar {
display: none;
}
.td-tag {
flex: 0 0 auto;
scroll-snap-align: start;
}
.td-display {
max-width: 100%;
font-size: clamp(38px, 11vw, 46px);
-webkit-text-stroke-width: 1px;
text-shadow: 4px 4px 0 var(--td-ink);
overflow-wrap: anywhere;
}
.td-heading {
font-size: 36px;
}
.td-lead {
font-size: 18px;
max-width: 100%;
overflow-wrap: anywhere;
text-wrap: wrap;
}
.td-panel,
.td-card,
.td-news-card,
.td-form {
min-width: 0;
max-width: 100%;
box-shadow: var(--td-shadow-small);
}
.td-button {
width: 100%;
}
.td-mobile-actions {
display: grid;
}
.td-cookie {
bottom: 88px;
}
.td-cookie__panel {
grid-template-columns: 1fr;
}
.td-cookie__actions {
justify-content: stretch;
}
.td-cookie__actions .td-button,
.td-cookie__settings .td-button {
width: 100%;
}
}
@media (max-width: 420px) {
.td-logo span {
max-width: 150px;
overflow-wrap: anywhere;
}
.td-display {
font-size: 38px;
}
}.td-hero {
--td-hero-scrub: min(92vh, 760px);
max-width: none;
min-height: calc(100svh + var(--td-hero-scrub));
padding: 0;
border-bottom: var(--td-border);
background:
linear-gradient(135deg, transparent 0 52%, color-mix(in oklch, var(--td-yellow) 84%, white) 52% 100%),
var(--td-cyan);
}
.td-hero__inner {
width: min(var(--td-max), calc(100% - 40px));
margin: 0 auto;
padding: 14px 0 14px;
min-height: calc(100svh - 118px);
position: sticky;
top: 0;
display: grid;
grid-template-columns: minmax(0, .98fr) minmax(390px, .76fr);
gap: 22px;
align-items: center;
}
.td-hero__copy {
position: relative;
min-height: auto;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
padding: clamp(20px, 2.6vw, 30px);
overflow: hidden;
}
.td-hero__copy::after {
content: "";
position: absolute;
right: -92px;
bottom: -114px;
width: min(34vw, 420px);
aspect-ratio: 1;
background: var(--td-yellow);
clip-path: polygon(50% 0, 60% 32%, 96% 14%, 72% 46%, 100% 64%, 64% 62%, 72% 100%, 50% 70%, 24% 100%, 34% 62%, 0 64%, 28% 46%, 4% 14%, 40% 32%);
opacity: .8;
transform: rotate(-13deg);
pointer-events: none;
}
.td-hero__copy > * {
position: relative;
z-index: 1;
}
.td-hero__aside {
min-height: auto;
display: grid;
grid-template-rows: auto auto;
gap: 12px;
align-content: start;
}
.td-hero .td-display {
font-size: clamp(50px, 6.1vw, 82px);
}
.td-hero .td-lead {
max-width: 800px;
margin-top: 8px;
font-size: clamp(21px, 2vw, 28px);
line-height: 1.24;
}
.td-hero-brand-plate {
width: fit-content;
font-size: clamp(13px, 1.25vw, 17px);
transform: rotate(-1.6deg);
}
.td-hero-title-stack {
position: relative;
width: fit-content;
max-width: 100%;
}
.td-hero-burst {
position: absolute;
z-index: 2;
display: inline-grid;
place-items: center;
min-width: 58px;
min-height: 38px;
padding: 8px 12px;
border: 3px solid var(--td-ink);
background: var(--td-accent);
box-shadow: 4px 4px 0 var(--td-ink);
color: #fff;
font-family: var(--td-font-mono);
font-size: 12px;
font-weight: 950;
letter-spacing: .04em;
pointer-events: none;
}
.td-hero-burst--pop {
top: -18px;
right: -24px;
background: var(--td-accent);
transform: rotate(9deg);
}
.td-hero-burst--boom {
left: 22%;
bottom: -18px;
background: var(--td-cyan);
color: var(--td-ink);
transform: rotate(-7deg);
}
.td-comic-pop-fast {
animation: td-comic-pop-fast 2.4s ease-in-out infinite;
}
@keyframes td-comic-pop-fast {
0%, 100% {
transform: translate3d(0, 0, 0) rotate(-2deg) scale(1);
}
28% {
transform: translate3d(8px, -7px, 0) rotate(3deg) scale(1.04);
}
55% {
transform: translate3d(-6px, 5px, 0) rotate(-4deg) scale(.98);
}
78% {
transform: translate3d(5px, -4px, 0) rotate(2deg) scale(1.02);
}
}
.td-hero-mobile-actions {
display: none;
}
.td-hero-stat-grid {
position: relative;
align-items: stretch;
margin-top: 2px;
}
.td-hero-stat-grid::before {
content: "";
position: absolute;
inset: 30px -14px -12px 22px;
background: linear-gradient(135deg, var(--td-cyan), color-mix(in oklch, var(--td-violet) 64%, white));
border: 3px solid var(--td-ink);
transform: rotate(-1deg);
}
.td-hero-stat-card {
position: relative;
z-index: 1;
}
.td-hero-stat-card:nth-child(1) {
transform: rotate(-1.2deg);
}
.td-hero-stat-card:nth-child(2) {
transform: translateY(10px) rotate(.8deg);
}
.td-hero-stat-card:nth-child(3) {
transform: translateY(-2px) rotate(-.45deg);
}
.td-product-window {
min-height: 320px;
aspect-ratio: 4 / 3;
display: grid;
place-items: center;
padding: 24px;
background:
radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--td-ink) 14%, transparent) 0 2px, transparent 2px 11px),
var(--td-yellow);
background-size: 22px 22px, auto;
}
.td-product-window img {
width: 100%;
max-height: 280px;
object-fit: contain;
filter: drop-shadow(7px 8px 0 color-mix(in oklch, var(--td-ink) 80%, transparent));
}
.td-product-window--photo {
min-height: 320px;
padding: 18px;
}
.td-product-window--photo img {
width: min(100%, 420px);
max-height: 280px;
object-fit: contain;
filter: saturate(1.08) contrast(1.06) drop-shadow(7px 8px 0 color-mix(in oklch, var(--td-ink) 74%, transparent));
}
.td-product-window--video {
height: clamp(360px, 30vw, 450px);
min-height: 0;
padding: 10px;
overflow: hidden;
background:
radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--td-yellow) 28%, transparent) 0 2px, transparent 2px 11px),
var(--td-ink);
background-size: 22px 22px, auto;
}
.td-hero-video {
display: block;
width: 100%;
height: 100%;
border-radius: 10px;
background: var(--td-ink);
object-fit: contain;
filter: saturate(1.05) contrast(1.04);
}
.td-speech {
position: relative;
width: fit-content;
max-width: 540px;
margin-top: 22px;
padding: 22px 26px;
border: var(--td-border);
border-radius: 48px;
background: var(--td-surface);
box-shadow: 5px 5px 0 var(--td-ink);
font-size: 22px;
font-weight: 900;
line-height: 1.12;
}
.td-speech::after {
content: "";
position: absolute;
right: 52px;
bottom: -24px;
width: 34px;
height: 34px;
border-right: var(--td-border);
border-bottom: var(--td-border);
background: var(--td-surface);
transform: rotate(45deg);
}
.td-logistics-card {
min-height: 168px;
display: grid;
align-content: start;
gap: 7px;
padding: 12px;
}
.td-logistics-card > img.td-card-icon,
.td-logistics-card > figure.td-card-icon {
width: 44px;
height: 44px;
object-fit: cover;
}
.td-logistics-card .td-kicker {
color: var(--td-accent);
background: var(--td-surface);
}
.td-logistics-card .td-card__title {
font-size: 22px;
}
.td-logistics-card .td-card__text {
margin-top: 6px;
font-size: 14px;
line-height: 1.24;
}
.td-logistics-card .td-card__title {
font-size: clamp(18px, 1.55vw, 21px);
}
.td-logistics-card .td-card__text {
margin-top: 6px;
color: var(--td-ink);
font-weight: 820;
line-height: 1.25;
}
.td-split {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
gap: 24px;
align-items: start;
}
.td-comic-strip,
.td-comparison {
display: grid;
border: var(--td-border-heavy);
background: var(--td-ink);
box-shadow: var(--td-shadow);
}
.td-comic-strip {
grid-template-columns: 1fr 1fr;
transform: rotate(-1deg);
}
.td-strip-cell,
.td-compare-col {
border: 3px solid var(--td-ink);
background: var(--td-surface);
}
.td-strip-cell {
min-height: 228px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 10px;
padding: 22px;
}
.td-strip-cell .td-visual-thumb {
width: 76px;
height: 76px;
object-fit: cover;
background: var(--td-surface);
}
.td-strip-cell figure.td-visual-thumb {
width: 76px;
height: 76px;
}
.td-strip-cell:nth-child(1),
.td-compare-col:nth-child(2) {
background: var(--td-yellow);
}
.td-strip-cell:nth-child(2) {
background: var(--td-cyan);
}
.td-strip-cell:nth-child(3) {
background: var(--td-accent);
color: #fff;
}
.td-strip-cell strong,
.td-process-card strong,
.td-trust-chip strong,
.td-warehouse strong {
display: block;
font-family: var(--td-font-display);
line-height: 1;
text-transform: uppercase;
}
.td-strip-cell strong {
font-size: 40px;
}
.td-strip-cell span {
font-size: 15px;
font-weight: 800;
}
.td-comparison {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.td-compare-col {
min-height: 430px;
display: grid;
align-content: start;
gap: 14px;
padding: 24px;
}
.td-compare-col .td-visual-thumb {
aspect-ratio: 16 / 10;
max-height: 164px;
object-fit: cover;
}
.td-compare-col figure.td-visual-thumb {
aspect-ratio: 16 / 10;
max-height: 164px;
}
.td-compare-col .td-card__title {
font-family: var(--td-font-display);
font-size: 42px;
line-height: 1;
text-transform: uppercase;
}
.td-compare-col ul,
.td-process-card ul {
margin: 20px 0 0;
padding-left: 20px;
font-weight: 720;
}
.td-trust-band {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
gap: 22px;
align-items: stretch;
}
.td-trust-panel {
padding: 28px;
background:
linear-gradient(135deg, color-mix(in oklch, var(--td-blue) 24%, white), color-mix(in oklch, var(--td-violet) 24%, white)),
var(--td-surface);
}
.td-swatches {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
margin-top: 18px;
}
.td-swatch {
min-height: 76px;
border: 3px solid var(--td-ink);
box-shadow: 3px 3px 0 var(--td-ink);
}
.td-swatch--bg {
background: var(--td-bg);
}
.td-swatch--ink {
background: var(--td-ink);
}
.td-swatch--logo {
background: linear-gradient(135deg, var(--td-blue), var(--td-violet));
}
.td-swatch--red {
background: var(--td-accent);
}
.td-swatch--yellow {
background: var(--td-yellow);
}
.td-swatch--cyan {
background: var(--td-cyan);
}
.td-trust-list {
display: grid;
gap: 12px;
}
.td-trust-chip {
display: grid;
align-content: start;
gap: 10px;
font-weight: 800;
}
.td-trust-chip > img.td-card-icon,
.td-trust-chip > figure.td-card-icon {
width: 82px;
height: 82px;
}
.td-trust-chip strong,
.td-warehouse strong {
margin-bottom: 6px;
font-size: 30px;
}
.td-assortment-showcase-video {
width: 100%;
height: 100%;
margin: 0;
}
.td-assortment-showcase-video .td-lazy-video__poster,
.td-assortment-showcase-video .td-lazy-video__media {
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
object-position: center;
filter: none;
}
.td-inline-photo,
.td-card-photo {
margin: 0;
overflow: hidden;
border: var(--td-border);
background: var(--td-cyan);
box-shadow: 5px 5px 0 var(--td-ink);
}
.td-inline-photo img,
.td-card-photo img,
.td-inline-photo .td-lazy-video__media,
.td-card-photo .td-lazy-video__media {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--td-image-position, center);
filter: saturate(1.08) contrast(1.06);
}
.td-contact-hero-visual .td-lazy-video__media,
.td-media-card .td-lazy-video__media {
transform: none;
}
.td-inline-photo {
aspect-ratio: 4 / 3;
}
.td-card-photo {
aspect-ratio: 16 / 10;
border-width: 0 0 4px;
box-shadow: none;
}
.td-page-hero--split {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
gap: 24px;
align-items: center;
}
.td-process-card {
min-height: 180px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.td-process-card strong {
color: var(--td-accent);
font-size: 48px;
-webkit-text-stroke: 1px var(--td-ink);
text-shadow: 3px 3px 0 var(--td-ink);
}
.td-catalog-layout {
display: grid;
grid-template-columns: 270px 1fr;
gap: 20px;
align-items: start;
}
.td-sidebar {
position: sticky;
top: 98px;
display: grid;
gap: 4px;
}
.td-side-link {
display: block;
padding: 10px 0;
border-bottom: 2px solid color-mix(in oklch, var(--td-ink) 18%, transparent);
font-weight: 800;
}
.td-catalog-ad {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
padding: 26px;
background:
radial-gradient(circle at 10px 10px, color-mix(in oklch, var(--td-ink) 18%, transparent) 0 2px, transparent 2px 10px),
linear-gradient(135deg, var(--td-yellow), color-mix(in oklch, var(--td-blue) 38%, white));
background-size: 20px 20px, auto;
}
.td-assortment-price-compact {
grid-column: auto;
min-height: 100%;
align-content: center;
}
.td-assortment-price-compact .td-button {
justify-self: start;
}
.td-product-card {
overflow: hidden;
padding: 0;
}
.td-product-card__visual {
min-height: 180px;
display: grid;
place-items: center;
padding: 18px;
border-bottom: var(--td-border);
background:
radial-gradient(circle at 9px 9px, color-mix(in oklch, var(--td-ink) 12%, transparent) 0 2px, transparent 2px 9px),
var(--td-cyan);
background-size: 18px 18px, auto;
}
.td-product-card__visual img {
max-height: 160px;
object-fit: contain;
filter: drop-shadow(5px 6px 0 color-mix(in oklch, var(--td-ink) 85%, transparent));
}
.td-product-card__body {
display: grid;
gap: 12px;
padding: 18px;
}
.td-flow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-top: 18px;
}
.td-flow-step {
min-height: 150px;
font-weight: 800;
}
.td-flow-step strong {
display: block;
margin-bottom: 12px;
font-family: var(--td-font-display);
font-size: 38px;
line-height: 1;
}
.td-contact-map {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.td-warehouse {
min-height: 300px;
overflow: hidden;
}
.td-warehouse p {
margin: 8px 0;
font-weight: 750;
}
.td-map-frame {
width: 100%;
aspect-ratio: 4 / 3;
margin: 14px 0;
border: 3px solid var(--td-ink);
background: var(--td-bg);
overflow: hidden;
}
.td-map-frame iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.td-yandex-static-map {
position: relative;
display: block;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.td-yandex-static-map img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: saturate(1.08) contrast(1.04);
}
.td-yandex-static-map__badge {
position: absolute;
left: 12px;
bottom: 12px;
display: inline-flex;
max-width: calc(100% - 24px);
padding: 7px 10px;
border: 3px solid var(--td-ink);
background: var(--td-yellow);
box-shadow: 3px 3px 0 var(--td-ink);
font-family: var(--td-font-mono);
font-size: 11px;
font-weight: 900;
letter-spacing: .05em;
line-height: 1.15;
text-transform: uppercase;
}
.td-yandex-static-map:hover,
.td-yandex-static-map:focus-visible {
outline: none;
box-shadow: 4px 4px 0 var(--td-ink);
}
.td-map-frame--local {
display: grid;
align-content: center;
gap: 10px;
padding: 18px;
background:
linear-gradient(135deg, color-mix(in oklch, var(--td-yellow) 78%, white), color-mix(in oklch, var(--td-cyan) 48%, white)),
var(--td-surface);
}
.td-map-frame--local span {
display: inline-flex;
width: fit-content;
padding: 6px 9px;
border: 3px solid var(--td-ink);
background: var(--td-surface);
box-shadow: 3px 3px 0 var(--td-ink);
font-family: var(--td-font-mono);
font-size: 11px;
font-weight: 900;
letter-spacing: .05em;
text-transform: uppercase;
}
.td-map-frame--local strong {
font-size: 20px;
line-height: 1.15;
}
.td-warehouse > img.td-card-icon {
width: 100%;
height: auto;
max-height: 150px;
margin-bottom: 14px;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
}
.td-before-after-visual {
width: min(100%, 980px);
margin: 24px auto 0;
overflow: hidden;
border: var(--td-border-heavy);
background: var(--td-surface);
box-shadow: var(--td-shadow);
}
.td-before-after-visual img {
width: 100%;
height: auto;
display: block;
}
.td-wholesale-hero-visual img,
.td-contact-hero-visual img {
object-position: center;
}
.td-action-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.td-action-row .td-button {
width: auto;
}
.td-form[data-td-price-form="hero"] {
padding: 14px;
}
.td-form[data-td-price-form="hero"] .td-form__title {
font-size: 22px;
}
.td-form[data-td-price-form="hero"] .td-form__hint {
margin-top: 4px;
}
.td-form[data-td-price-form="hero"] .td-form__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 12px;
}
.td-form[data-td-price-form="hero"] input,
.td-form[data-td-price-form="hero"] select {
min-height: 42px;
padding: 9px 12px;
}
.td-form[data-td-price-form="hero"] .td-form__consent {
gap: 8px;
font-size: 12px;
line-height: 1.35;
}
.td-form[data-td-price-form="hero"] .td-button {
min-height: 50px;
font-size: 14px;
letter-spacing: .08em;
}
.td-job-card,
.td-media-card {
padding: 0;
overflow: hidden;
}
.td-job-card__body {
padding: 22px;
}
.td-vacancy-apply {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: 24px;
align-items: start;
}
.td-vacancy-apply__intro {
padding: 28px;
}
.td-vacancy-apply__intro .td-heading {
margin-top: 18px;
font-size: clamp(34px, 4.6vw, 58px);
}
.td-vacancy-apply__intro .td-lead {
font-size: 18px;
}
.td-vacancy-form .td-form__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.td-vacancy-form .td-button {
grid-column: 1 / -1;
justify-self: start;
}
.td-wholesale-page {
background:
radial-gradient(circle at 14px 14px, color-mix(in oklch, var(--td-ink) 9%, transparent) 0 2px, transparent 2px 12px),
var(--td-bg);
background-size: 24px 24px, auto;
}
.td-wholesale-hero {
--td-wholesale-scrub: min(78vh, 650px);
max-width: none;
min-height: calc(100svh + var(--td-wholesale-scrub));
border-bottom: var(--td-border-heavy);
background:
linear-gradient(135deg, var(--td-cyan) 0 47%, var(--td-yellow) 47% 100%);
}
.td-wholesale-hero__sticky {
min-height: 100svh;
position: sticky;
top: 0;
display: grid;
align-items: center;
padding: 18px 0;
}
.td-wholesale-hero__inner {
width: min(var(--td-max), calc(100% - 40px));
min-height: calc(100svh - 118px);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, .98fr) minmax(360px, .72fr);
gap: 22px;
align-items: center;
}
.td-wholesale-hero__copy {
position: relative;
min-height: 560px;
display: grid;
align-content: center;
gap: 18px;
padding: clamp(24px, 4vw, 42px);
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-wholesale-hero__copy::after {
content: "";
position: absolute;
right: -64px;
bottom: -70px;
width: min(30vw, 360px);
aspect-ratio: 1;
background: var(--td-yellow);
clip-path: polygon(50% 0, 61% 34%, 100% 18%, 74% 50%, 100% 82%, 61% 66%, 50% 100%, 39% 66%, 0 82%, 26% 50%, 0 18%, 39% 34%);
opacity: .78;
transform: rotate(9deg);
}
.td-wholesale-hero__copy > * {
position: relative;
z-index: 1;
}
.td-wholesale-hero__copy .td-display {
font-size: clamp(44px, 5.4vw, 74px);
}
.td-wholesale-hero__visual {
position: relative;
min-height: 560px;
display: grid;
place-items: center;
padding: 18px;
overflow: hidden;
background:
radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--td-ink) 12%, transparent) 0 2px, transparent 2px 11px),
linear-gradient(135deg, color-mix(in oklch, var(--td-violet) 26%, white), var(--td-surface));
background-size: 22px 22px, auto;
}
.td-wholesale-hero__visual img,
.td-wholesale-hero__visual .td-lazy-video__media {
width: 100%;
aspect-ratio: 4 / 3;
border: 4px solid var(--td-ink);
object-fit: cover;
box-shadow: 7px 7px 0 var(--td-ink);
filter: saturate(1.08) contrast(1.04);
}
.td-wholesale-hero__visual .td-lazy-video__media {
height: auto;
}
.td-wholesale-hero__visual .td-lazy-video__media.is-scroll-ready {
opacity: 1;
}
.td-wholesale-audience {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.td-wholesale-audience__card {
min-height: 390px;
padding: 0;
overflow: hidden;
background:
radial-gradient(circle at 10px 10px, color-mix(in oklch, var(--td-ink) 11%, transparent) 0 2px, transparent 2px 10px),
var(--td-surface);
background-size: 20px 20px, auto;
}
.td-wholesale-audience__card:nth-child(2n) {
background-color: var(--td-cyan);
}
.td-wholesale-audience__card:nth-child(3n) {
background-color: var(--td-yellow);
}
.td-wholesale-audience__card figure {
height: clamp(170px, 14vw, 220px);
margin: 0;
display: grid;
place-items: center;
padding: 12px;
border-bottom: var(--td-border);
background: var(--td-surface);
}
.td-wholesale-audience__card 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));
}
.td-wholesale-audience__card div {
display: grid;
gap: 10px;
padding: 22px;
}
.td-wholesale-audience__card h3,
.td-wholesale-step h3 {
margin: 0;
font-family: var(--td-font-display);
font-size: clamp(27px, 2.2vw, 34px);
line-height: .95;
text-transform: uppercase;
overflow-wrap: anywhere;
}
.td-wholesale-audience__card p,
.td-wholesale-step p {
margin: 0;
color: var(--td-ink);
font-weight: 800;
line-height: 1.28;
}
.td-wholesale-process {
background:
linear-gradient(180deg, color-mix(in oklch, var(--td-cyan) 24%, transparent), transparent);
}
.td-wholesale-steps {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.td-wholesale-process__visual {
margin: 0 0 22px;
overflow: hidden;
border: var(--td-border);
background: var(--td-surface);
box-shadow: var(--td-shadow);
}
.td-wholesale-process__visual img {
display: block;
width: 100%;
aspect-ratio: 16 / 7;
object-fit: cover;
}
.td-wholesale-step {
min-height: 270px;
display: grid;
align-content: start;
gap: 12px;
padding: 18px;
background: var(--td-surface);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.td-wholesale-step:hover {
animation: td-step-hop 540ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes td-step-hop {
0%, 100% {
transform: translate3d(0, 0, 0) rotate(-.6deg);
}
35% {
transform: translate3d(0, -12px, 0) rotate(2deg);
}
65% {
transform: translate3d(0, 4px, 0) rotate(-1.4deg);
}
}
.td-wholesale-step strong {
width: fit-content;
color: var(--td-accent);
font-family: var(--td-font-display);
font-size: 58px;
line-height: .9;
-webkit-text-stroke: 1px var(--td-ink);
text-shadow: 3px 3px 0 var(--td-ink);
}
.td-wholesale-step:nth-child(2n) {
transform: translateY(18px) rotate(.7deg);
}
.td-wholesale-step:nth-child(3n) {
background: var(--td-yellow);
transform: translateY(-6px) rotate(-.6deg);
}
.td-wholesale-trust {
display: grid;
grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
gap: 24px;
align-items: center;
padding: clamp(24px, 4vw, 44px);
background:
linear-gradient(135deg, color-mix(in oklch, var(--td-violet) 26%, white), var(--td-surface));
}
.td-wholesale-trust__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.td-wholesale-faq {
background:
radial-gradient(circle at 12px 12px, color-mix(in oklch, var(--td-ink) 10%, transparent) 0 2px, transparent 2px 11px),
color-mix(in oklch, var(--td-yellow) 18%, transparent);
background-size: 22px 22px, auto;
}
.td-wholesale-cta__copy {
min-height: 420px;
display: grid;
align-content: center;
gap: 18px;
padding: clamp(28px, 4vw, 50px);
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-cyan) 48%, white);
background-size: 22px 22px, auto;
}
.td-wholesale-cta__single {
width: min(920px, 100%);
margin: 0 auto;
}
.td-file-field {
display: grid;
gap: 8px;
color: var(--td-muted);
font-size: 13px;
font-weight: 800;
}
.td-job-card ul,
.td-card ul {
margin: 14px 0 0;
padding-left: 20px;
font-weight: 720;
}
.td-footer {
max-width: none;
padding: 76px 0;
border-top: var(--td-border-heavy);
background:
radial-gradient(circle at 11px 11px, color-mix(in oklch, var(--td-ink) 14%, transparent) 0 2px, transparent 2px 10px),
var(--td-accent);
background-size: 20px 20px, auto;
color: #fff;
}
.td-footer__inner {
display: grid;
grid-template-columns: 1fr 380px;
gap: 28px;
align-items: center;
}
.td-footer__brand {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
font-size: 13px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.td-footer__brand img {
width: 112px;
height: 70px;
object-fit: contain;
filter: drop-shadow(4px 4px 0 var(--td-ink));
}
.td-footer .td-heading {
color: #fff;
text-shadow: 5px 5px 0 var(--td-ink);
}
.td-footer .td-form .td-button {
min-height: 54px;
background: var(--td-accent);
color: #fff;
}
.td-page-hero,
.td-archive-hero {
width: min(var(--td-max), calc(100% - 40px));
margin: 34px auto 0;
padding: clamp(26px, 5vw, 54px);
background:
linear-gradient(135deg, color-mix(in oklch, var(--td-blue) 26%, white), color-mix(in oklch, var(--td-violet) 22%, white)),
var(--td-surface);
}
.td-page-hero .td-display,
.td-archive-hero .td-display {
font-size: clamp(48px, 7vw, 92px);
}
.td-page,
.td-article {
width: min(980px, calc(100% - 40px));
margin: 34px auto 80px;
padding: clamp(24px, 5vw, 56px);
}
.td-page--policy {
background: var(--td-surface);
}
.td-page__content,
.td-article__body {
max-width: 74ch;
font-size: 18px;
line-height: 1.68;
}
.td-page__content > *:first-child,
.td-article__body > *:first-child {
margin-top: 0;
}
.td-page__content p,
.td-article__body p {
margin: 0 0 22px;
}
.td-page__content :where(h1, h2, h3, h4),
.td-article__body :where(h2, h3, h4) {
margin: 42px 0 16px;
font-family: var(--td-font-display);
line-height: 1.05;
letter-spacing: 0;
text-transform: uppercase;
}
.td-page__content :where(ul, ol),
.td-article__body :where(ul, ol) {
margin: 0 0 26px;
padding-left: 24px;
font-weight: 700;
}
.td-page__content blockquote,
.td-article__body blockquote {
margin: 30px 0;
padding: 18px 22px;
border: var(--td-border);
background: var(--td-yellow);
box-shadow: 5px 5px 0 var(--td-ink);
font-size: 20px;
font-weight: 800;
line-height: 1.4;
}
.td-new-order-page {
width: min(var(--td-max), calc(100% - 40px));
margin: 38px auto 82px;
}
.td-new-order-slide {
position: relative;
overflow: hidden;
padding: clamp(24px, 5vw, 58px);
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-new-order-slide::before {
content: "";
position: absolute;
inset: 14px;
border: 3px solid var(--td-ink);
pointer-events: none;
}
.td-new-order-slide > * {
position: relative;
z-index: 1;
}
.td-new-order-slide__header {
max-width: 920px;
margin-bottom: 28px;
}
.td-new-order-slide .td-display {
margin-top: 10px;
font-size: clamp(46px, 7.2vw, 98px);
}
.td-new-order-slide .td-lead {
max-width: 760px;
margin-top: 16px;
}
.td-new-order-catalogs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.td-new-order-catalog {
min-height: 170px;
display: grid;
align-content: space-between;
gap: 18px;
padding: 22px;
border: var(--td-border);
background:
radial-gradient(circle at 10px 10px, color-mix(in oklch, var(--td-ink) 13%, transparent) 0 2px, transparent 2px 10px),
var(--td-yellow);
background-size: 20px 20px, auto;
color: var(--td-ink);
text-decoration: none;
box-shadow: 8px 8px 0 var(--td-ink);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.td-new-order-catalog:hover,
.td-new-order-catalog:focus-visible {
transform: translate3d(0, -8px, 0) rotate(-1deg);
box-shadow: 11px 13px 0 var(--td-ink);
}
.td-new-order-catalog--cyan {
background:
radial-gradient(circle at 10px 10px, color-mix(in oklch, var(--td-ink) 13%, transparent) 0 2px, transparent 2px 10px),
var(--td-cyan);
}
.td-new-order-catalog--red {
background:
radial-gradient(circle at 10px 10px, color-mix(in oklch, var(--td-ink) 13%, transparent) 0 2px, transparent 2px 10px),
var(--td-accent);
color: #fff;
}
.td-new-order-catalog__city {
font-family: var(--td-font-display);
font-size: clamp(30px, 3.4vw, 46px);
line-height: .98;
text-transform: uppercase;
}
.td-new-order-catalog__label {
width: fit-content;
padding: 8px 12px;
border: 3px solid currentColor;
background: var(--td-surface);
color: var(--td-ink);
font-family: var(--td-font-mono);
font-size: 13px;
font-weight: 950;
text-transform: uppercase;
box-shadow: 4px 4px 0 currentColor;
}
.td-new-order-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.td-new-order-bottom {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, .36fr);
gap: 22px;
align-items: end;
margin-top: 28px;
}
.td-new-order-contacts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.td-new-order-contact {
min-height: 118px;
display: grid;
align-content: start;
gap: 8px;
padding: 16px;
border: var(--td-border);
background: color-mix(in oklch, var(--td-cyan) 16%, white);
}
.td-new-order-contact strong {
font-size: 18px;
line-height: 1.1;
}
.td-new-order-contact span {
color: var(--td-muted);
font-weight: 800;
line-height: 1.35;
}
.td-new-order-socials {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
.td-new-order-socials a {
padding: 10px 12px;
border: 3px solid var(--td-ink);
background: var(--td-surface);
color: var(--td-ink);
font-family: var(--td-font-mono);
font-weight: 950;
text-decoration: none;
text-transform: uppercase;
box-shadow: 4px 4px 0 var(--td-ink);
}
.td-article-shell {
width: min(1180px, calc(100% - 40px));
margin: 42px auto 80px;
overflow: hidden;
}
.td-article-hero {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, .82fr);
align-items: center;
border-bottom: var(--td-border-heavy);
background: var(--td-cyan);
}
.td-article-hero__copy {
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 22px;
padding: clamp(24px, 3vw, 38px);
}
.td-article-title {
max-width: 100%;
margin-top: 16px;
color: var(--td-yellow);
font-size: clamp(34px, 4vw, 50px);
-webkit-text-stroke: 2px var(--td-ink);
text-shadow: 5px 5px 0 var(--td-ink);
}
.td-article-hero__media {
height: clamp(300px, 30vw, 420px);
min-height: 0;
border-left: var(--td-border-heavy);
background: var(--td-yellow);
}
.td-article-hero__media img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
}
.td-article-hero__media img.wp-post-image {
height: 100%;
}
.td-article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 42px;
padding: clamp(24px, 5vw, 56px);
align-items: start;
}
.td-article-aside {
position: sticky;
top: 110px;
display: grid;
gap: 16px;
}
.td-article-cta,
.td-related {
padding: clamp(24px, 5vw, 56px);
border-top: var(--td-border-heavy);
}
.td-related {
background: var(--td-yellow);
}
.td-pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 34px;
font-weight: 900;
}
.td-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 8px 12px;
border: 3px solid var(--td-ink);
background: var(--td-surface);
box-shadow: 3px 3px 0 var(--td-ink);
}
.td-pagination .current {
background: var(--td-yellow);
}
.td-lazy-video {
position: relative;
display: grid;
place-items: center;
}
.td-lazy-video__poster,
.td-lazy-video__media {
grid-area: 1 / 1;
min-width: 0;
}
.td-lazy-video__poster {
transition: opacity 180ms ease, transform 240ms ease;
}
.td-lazy-video__media {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: center;
opacity: 0;
pointer-events: none;
filter: drop-shadow(5px 6px 0 color-mix(in oklch, var(--td-ink) 72%, transparent));
transition: opacity 180ms ease, transform 240ms ease;
}
.td-lazy-video.is-video-ready .td-lazy-video__media {
opacity: 1;
}
.td-lazy-video.is-video-ready .td-lazy-video__poster {
opacity: 0;
}
.td-card:hover .td-lazy-video__media {
transform: scale(1.04) rotate(-1deg);
}
.td-media-card:hover .td-lazy-video__media,
.td-contact-hero-visual:hover .td-lazy-video__media {
transform: none;
}
.td-wholesale-process__visual .td-lazy-video__media {
object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
.td-lazy-video__media {
display: none;
}
.td-lazy-video__poster {
opacity: 1;
}
}
@media (max-width: 1100px) {
.td-wholesale-audience {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.td-hero {
min-height: auto;
}
.td-hero__inner,
.td-split,
.td-trust-band,
.td-wholesale-hero__inner,
.td-wholesale-trust,
.td-catalog-layout,
.td-footer__inner,
.td-page-hero--split,
.td-article-hero,
.td-article-layout {
grid-template-columns: 1fr;
}
.td-hero__inner {
position: relative;
top: auto;
min-height: auto;
}
.td-hero__copy,
.td-hero__aside,
.td-wholesale-hero__copy,
.td-wholesale-hero__visual,
.td-article-hero__copy,
.td-article-hero__media {
min-height: auto;
}
.td-article-hero__media {
border-left: 0;
border-top: var(--td-border-heavy);
}
.td-sidebar,
.td-article-aside {
position: static;
}
.td-contact-map,
.td-comparison,
.td-flow,
.td-wholesale-audience,
.td-wholesale-steps,
.td-wholesale-trust__grid,
.td-new-order-catalogs,
.td-new-order-bottom,
.td-new-order-contacts {
grid-template-columns: 1fr;
}
.td-wholesale-step:nth-child(2n),
.td-wholesale-step:nth-child(3n) {
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.td-comic-pop-fast,
.td-wholesale-step:hover {
animation: none;
}
}
@media (max-width: 640px) {
.td-hero__inner,
.td-wholesale-hero__inner,
.td-page-hero,
.td-archive-hero,
.td-page,
.td-new-order-page,
.td-article-shell {
width: min(calc(100vw - 24px), var(--td-max));
min-width: 0;
max-width: calc(100vw - 24px);
}
.td-hero__inner {
padding: 14px 0 22px;
gap: 14px;
}
.td-assortment-price-compact {
grid-template-columns: 1fr;
}
.td-new-order-page {
margin: 20px auto 58px;
}
.td-new-order-slide {
padding: 22px;
}
.td-new-order-slide::before {
inset: 8px;
}
.td-new-order-slide .td-display {
font-size: clamp(38px, 13vw, 56px);
}
.td-new-order-catalog {
min-height: 136px;
padding: 18px;
}
.td-new-order-actions,
.td-new-order-socials {
display: grid;
grid-template-columns: 1fr;
}
.td-wholesale-hero__inner {
min-height: auto;
gap: 14px;
}
.td-wholesale-hero__sticky {
padding: 14px 0 24px;
}
.td-wholesale-hero__copy {
gap: 12px;
padding: 16px;
}
.td-wholesale-hero__copy .td-display {
font-size: clamp(34px, 10.5vw, 44px);
-webkit-text-stroke-width: 1px;
}
.td-wholesale-hero__visual {
padding: 8px;
}
.td-wholesale-hero__visual img,
.td-wholesale-hero__visual .td-lazy-video__media {
aspect-ratio: 16 / 10;
}
.td-category-card {
--td-category-media-position: center 72%;
--td-category-media-scale: 1.2;
--td-category-media-shift-y: -10%;
--td-category-media-hover-scale: 1.25;
--td-category-media-hover-shift-y: -11%;
}
.td-hero__copy {
min-width: 0;
max-width: 100%;
overflow: visible;
gap: 12px;
padding: 16px;
}
.td-hero .td-display {
font-size: clamp(32px, 9.8vw, 39px);
}
.td-hero .td-lead {
margin-top: 10px;
font-size: 17px;
line-height: 1.24;
}
.td-hero__copy > .td-grid {
display: none;
}
.td-hero-mobile-actions {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 4px;
}
.td-hero__aside {
gap: 12px;
}
.td-hero__aside .td-product-window {
order: 1;
}
.td-hero__aside .td-form {
order: 2;
}
.td-form[data-td-price-form="hero"] .td-form__grid {
grid-template-columns: 1fr;
}
.td-product-window--photo img {
max-height: 180px;
}
.td-product-window,
.td-product-window--photo {
min-height: 220px;
aspect-ratio: 16 / 10;
}
.td-product-window--video {
height: min(390px, calc(100vw - 24px));
min-height: 0;
padding: 8px;
}
.td-form[data-td-price-form="hero"] {
padding: 14px;
}
.td-form[data-td-price-form="hero"] .td-form__title {
font-size: 22px;
}
.td-category-card {
min-height: 330px;
}
.td-category-card__visual {
aspect-ratio: 16 / 9;
}
.td-strip-cell {
min-height: 0;
}
.td-compare-col {
min-height: 0;
}
.td-compare-col .td-visual-thumb {
max-height: 180px;
}
.td-page-hero--split .td-inline-photo {
aspect-ratio: 16 / 10;
max-height: 220px;
}
.td-speech {
box-sizing: border-box;
width: 100%;
max-width: 100%;
border-radius: 28px;
font-size: 18px;
overflow-wrap: anywhere;
text-wrap: wrap;
}
.td-speech::after {
right: 34px;
}
.td-comic-strip {
grid-template-columns: 1fr;
transform: none;
}
.td-catalog-ad {
grid-template-columns: 1fr;
}
.td-vacancy-apply,
.td-vacancy-form .td-form__grid,
.td-wholesale-trust__grid {
grid-template-columns: 1fr;
}
.td-wholesale-audience__card,
.td-wholesale-step {
min-height: 0;
}
.td-wholesale-audience__card figure {
height: 188px;
align-items: start;
padding: 8px 10px 10px;
}
.td-wholesale-audience__card .td-lazy-video__poster,
.td-wholesale-audience__card .td-lazy-video__media {
object-position: center 42%;
transform: translateY(-5px);
}
.td-wholesale-cta__copy {
min-height: 320px;
}
.td-swatches {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.td-article-layout,
.td-related,
.td-article-cta {
padding: 20px;
}
.td-article-title {
font-size: 30px;
-webkit-text-stroke-width: 1px;
}
.td-article-hero__copy {
padding: 20px;
}
.td-article-hero__media {
height: 220px;
min-height: 0;
}
}