KDOT--001 . NEW PRESSING JUMP . KALUS . 12" HAND-NUMBERED 100 COPIES . PRE-ORDER OPEN SHIPS 31 JAN 2027 -- LAUNCH NIGHT INCLUDES DIGITAL DOWNLOAD + PRINTED CD FREE AU SHIPPING OVER $120 KDOT--001 . NEW PRESSING JUMP . KALUS . 12" HAND-NUMBERED 100 COPIES . PRE-ORDER OPEN SHIPS 31 JAN 2027 -- LAUNCH NIGHT
K.DOT RECORDS
Search Cart 0
# Catalog

Vinyl Records

1 1 release
Kalus - Jump (Original) [Limited Edition Vinyl] Remixes: Eric Lavile, Dean Del & Reece Low KDOT--001 On sale
Vinyl Records Single

Kalus - Jump (Original) [Limited Editio...

In stock $80.00 AUD
KDOT RECORDS . custom Big Cartel theme Aesthetic: editorial-brutalist record-label Palette : bone + off-black + signal red + acid yellow Type : Anton (display) . Instrument Serif (italic accent) Inter Tight (body) . JetBrains Mono (metadata) ------------------------------------------------------------- */ :root { --ink: #0d0d0c; --paper: #f1ebe1; --paper-2: #e6dfd0; --mute: #7a7570; --rule: rgba(13,13,12,0.18); --rule-on-dark: rgba(241,235,225,0.22); --red: #ff3b2f; --acid: #d4ff00; --display: "Anton", "Bebas Neue", "Helvetica Neue Condensed", sans-serif; --serif: "Instrument Serif", "Times New Roman", serif; --mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace; --body: "Inter Tight", system-ui, -apple-system, sans-serif; --type-1: clamp(11px, 0.72vw, 13px); --type-2: clamp(14px, 0.95vw, 16px); --type-3: clamp(18px, 1.2vw, 22px); --h5: clamp(28px, 2.2vw, 40px); --h4: clamp(40px, 3.5vw, 64px); --h3: clamp(56px, 5vw, 92px); --h2: clamp(80px, 8vw, 140px); --h1: clamp(110px, 16vw, 280px); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--type-2); line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* --------------- Ticker --------------- */ .ticker { background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--rule-on-dark); overflow: hidden; white-space: nowrap; padding: 9px 0; } .ticker__track { display: inline-block; padding-left: 100%; animation: marquee 42s linear infinite; } .ticker__track span { padding: 0 28px; } .ticker__track span:nth-child(odd) { color: var(--acid); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* --------------- Header --------------- */ header.site { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule); } .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 28px; gap: 24px; } .nav__brand { font-family: var(--display); font-size: clamp(22px, 1.6vw, 28px); letter-spacing: 0.02em; text-transform: uppercase; } .nav__brand b { color: var(--red); font-weight: inherit; } .nav__center { display: flex; gap: 28px; font-family: var(--mono); font-size: var(--type-1); text-transform: uppercase; letter-spacing: 0.14em; } .nav__center a { position: relative; padding: 4px 0; } .nav__center a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--red); } .nav__right { display: flex; gap: 18px; justify-self: end; align-items: center; font-family: var(--mono); font-size: var(--type-1); text-transform: uppercase; letter-spacing: 0.14em; } .nav__cart { display: inline-flex; align-items: center; gap: 8px; } .nav__cart-count { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 11px; } /* --------------- Buttons --------------- */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid var(--ink); cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; } .btn:hover { background: var(--red); border-color: var(--red); } .btn--inv { background: transparent; color: var(--ink); } .btn--inv:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn--block { width: 100%; justify-content: space-between; } /* --------------- Hero (home) --------------- */ .hero { position: relative; padding: 56px 28px 0; border-bottom: 1px solid var(--rule); } .hero__meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--type-1); text-transform: uppercase; letter-spacing: 0.16em; } .hero__meta span:first-child { color: var(--red); } .hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: end; gap: 28px; margin-top: 18px; } .hero__title { font-family: var(--display); font-size: var(--h1); line-height: 0.84; margin: 0; letter-spacing: -0.01em; text-transform: uppercase; } .hero__title em { color: var(--red); font-style: normal; } .hero__title i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; text-transform: none; display: block; font-size: 0.18em; line-height: 1.15; margin-top: 16px; color: var(--ink); max-width: 22ch; } .hero__title i span { color: var(--mute); } .hero__art { position: relative; aspect-ratio: 1; border: 1px solid var(--ink); background: var(--ink); overflow: hidden; margin: 0; } .hero__art a, .hero__art img { display: block; width: 100%; height: 100%; } .hero__art img { object-fit: cover; } .hero__stamp { position: absolute; top: 16px; right: 16px; background: var(--acid); color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 10px; transform: rotate(4deg); z-index: 2; } .hero__num { position: absolute; bottom: 16px; left: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); background: rgba(13,13,12,0.78); padding: 6px 10px; border: 1px solid var(--paper); z-index: 2; backdrop-filter: blur(2px); } .hero__bar { display: grid; grid-template-columns: 1.6fr 1fr 1.1fr 1fr auto; gap: 24px; align-items: center; padding: 22px 0; margin: 56px 0 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .hero__bar dt { font-family: var(--mono); font-size: var(--type-1); text-transform: uppercase; letter-spacing: 0.16em; color: var(--mute); margin-bottom: 6px; } .hero__bar dd { margin: 0; font-family: var(--display); font-size: clamp(22px, 1.8vw, 30px); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; } .hero__bar dd small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--mute); margin-left: 6px; } /* --------------- Section header --------------- */ .section-h { display: flex; align-items: baseline; gap: 18px; padding: 64px 28px 22px; } .section-h--top { padding-top: 48px; } .section-h__num { font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); } .section-h__title { font-family: var(--display); font-size: var(--h4); margin: 0; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; } .section-h__rule { flex: 1; border-bottom: 1px solid var(--ink); transform: translateY(-8px); } .section-h__meta { font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); } /* --------------- Spec sheet --------------- */ .spec { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; padding: 12px 28px 80px; } .spec__copy h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--h5); line-height: 1.05; margin: 0 0 18px; letter-spacing: -0.01em; max-width: 22ch; } .spec__copy p, .spec__desc p { font-size: var(--type-3); line-height: 1.5; margin: 0 0 14px; max-width: 56ch; } .spec__desc { font-size: var(--type-3); line-height: 1.5; } .spec__desc strong { font-weight: 600; } .spec__desc em { font-family: var(--serif); font-style: italic; } .spec__sheet { border: 1px solid var(--ink); background: var(--paper-2); } .spec__sheet--solo { margin: 12px 28px 80px; } .spec__sheet dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; } .spec__sheet > dl > div { padding: 18px 20px; border-bottom: 1px solid var(--rule); } .spec__sheet > dl > div:nth-child(odd) { border-right: 1px solid var(--rule); } .spec__sheet dt { font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin: 0 0 6px; } .spec__sheet dd { font-family: var(--display); font-size: clamp(20px, 1.5vw, 26px); margin: 0; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; } .spec__sheet .tracklist { grid-column: 1 / -1; padding: 18px 20px; border-right: 0 !important; border-bottom: 0; } .spec__sheet .tracklist ol { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: tr; } .spec__sheet .tracklist li { counter-increment: tr; display: grid; grid-template-columns: 36px 1fr auto; align-items: baseline; padding: 10px 0; border-bottom: 1px dotted var(--rule); font-family: var(--mono); font-size: var(--type-2); } .spec__sheet .tracklist li:last-child { border-bottom: 0; } .spec__sheet .tracklist li::before { content: "A" counter(tr, decimal-leading-zero); color: var(--red); } .spec__sheet .tracklist li:nth-child(n+3)::before { content: "B" counter(tr, decimal-leading-zero); } .spec__sheet .tracklist .dur { color: var(--mute); font-size: 13px; } .spec__sheet .tracklist .ttl { font-family: var(--body); font-size: var(--type-3); font-weight: 500; text-transform: none; letter-spacing: 0; } .spec__sheet .tracklist .ttl i { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--mute); } /* --------------- Catalog grid --------------- */ .catalog { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; padding: 12px 28px 80px; } .cat { position: relative; display: flex; flex-direction: column; gap: 14px; } .cat__art { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); border: 1px solid var(--ink); } .cat__art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .cat:hover .cat__art img { transform: scale(1.04); } .cat__num { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: 4px 8px; z-index: 2; } .cat__tag { position: absolute; top: 12px; right: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--red); color: var(--paper); padding: 4px 8px; z-index: 2; } .cat__tag--acid { background: var(--acid); color: var(--ink); } .cat__tag--mute { background: transparent; border: 1px solid var(--paper); color: var(--paper); } .cat__meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); } .cat__title { font-family: var(--display); font-size: clamp(22px, 1.7vw, 28px); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; margin: 0; } .cat__title i { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; color: var(--mute); } .cat__price { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); border-top: 1px solid var(--rule); padding-top: 10px; } .cat__price b { font-family: var(--display); font-size: clamp(18px, 1.3vw, 22px); font-weight: 400; color: var(--ink); } .cat--lg { grid-column: span 7; } .cat--md { grid-column: span 5; } .cat--sm { grid-column: span 4; } .cat--tba .cat__art { background: var(--ink); display: grid; place-items: center; } .cat--tba .cat__art::after { content: "TBA"; font-family: var(--display); font-size: clamp(70px, 7vw, 130px); letter-spacing: 0.08em; color: var(--paper); opacity: 0.32; } .product.sold .cat__art img { filter: grayscale(0.5) brightness(0.85); } /* Category filter chips */ .cat-filter { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 28px 24px; } .cat-filter__chip { font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.14em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--ink); background: transparent; color: var(--ink); } .cat-filter__chip:hover { background: var(--ink); color: var(--paper); } .cat-filter__chip.is-active { background: var(--red); border-color: var(--red); color: var(--paper); } /* Pagination */ .pagination, #pagination { padding: 24px 28px 80px; display: flex; gap: 8px; justify-content: center; font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.14em; text-transform: uppercase; } .pagination a, .pagination span, #pagination a, #pagination span { padding: 10px 14px; border: 1px solid var(--rule); } .pagination a:hover, #pagination a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .pagination .current, #pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* Empty state */ .empty { text-align: center; padding: 80px 28px 120px; border-top: 1px solid var(--rule); } .empty h3 { font-family: var(--display); font-size: var(--h3); text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 16px; } .empty p { font-family: var(--serif); font-style: italic; font-size: var(--type-3); color: var(--mute); margin: 0 0 24px; max-width: 44ch; margin-left: auto; margin-right: auto; } /* --------------- About (dark) --------------- */ .about { background: var(--ink); color: var(--paper); padding: 96px 28px; } .about__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; } .about__num { font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--acid); margin-bottom: 18px; } .about__h { font-family: var(--display); font-size: var(--h3); line-height: 0.94; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; } .about__h em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 0.96em; letter-spacing: -0.02em; text-transform: none; color: var(--acid); } .about__body p { font-size: var(--type-3); line-height: 1.55; margin: 0 0 14px; max-width: 56ch; color: var(--paper); } .about__pull { border-left: 2px solid var(--red); padding-left: 22px; margin: 32px 0 0; font-family: var(--serif); font-style: italic; font-size: var(--h5); line-height: 1.15; max-width: 22ch; color: var(--paper); } /* --------------- Shows --------------- */ .shows { padding: 12px 28px 96px; } .shows__list { list-style: none; margin: 0; padding: 0; } .shows__row { display: grid; grid-template-columns: 0.6fr 2fr 1.4fr auto; gap: 28px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule); transition: background 0.18s, padding 0.18s; } .shows__row:hover { background: var(--paper-2); padding-left: 14px; padding-right: 14px; } .shows__date { font-family: var(--mono); font-size: var(--type-2); letter-spacing: 0.06em; text-transform: uppercase; display: flex; flex-direction: column; gap: 4px; } .shows__date small { font-size: 11px; letter-spacing: 0.18em; color: var(--mute); } .shows__name { font-family: var(--display); font-size: clamp(22px, 2vw, 34px); letter-spacing: 0.01em; text-transform: uppercase; line-height: 1; } .shows__name em { color: var(--red); font-style: normal; } .shows__city { font-family: var(--serif); font-style: italic; font-size: var(--type-3); color: var(--mute); } .shows__cta { font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.18em; text-transform: uppercase; } .shows__cta--out { color: var(--red); } /* --------------- Product detail (PDP) --------------- */ .pdp { padding: 28px 28px 48px; } .pdp__crumbs { display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-bottom: 28px; } .pdp__crumbs a:hover { color: var(--red); } .pdp__crumbs-current { color: var(--ink); } .pdp__hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; } .pdp__gallery { position: sticky; top: 100px; } .pdp__main-img { position: relative; aspect-ratio: 1; border: 1px solid var(--ink); background: var(--ink); overflow: hidden; } .pdp__main-img img { width: 100%; height: 100%; object-fit: cover; } .pdp__num { position: absolute; bottom: 16px; left: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); background: rgba(13,13,12,0.78); padding: 6px 10px; border: 1px solid var(--paper); } .pdp__stamp { position: absolute; top: 16px; right: 16px; background: var(--red); color: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 10px; transform: rotate(4deg); } .pdp__stamp--acid { background: var(--acid); color: var(--ink); } .pdp__stamp--mute { background: transparent; border: 1px solid var(--paper); color: var(--paper); } .pdp__thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .pdp__thumb { width: 64px; height: 64px; padding: 0; background: var(--paper-2); border: 1px solid var(--rule); cursor: pointer; overflow: hidden; } .pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pdp__thumb:hover, .pdp__thumb.is-active { border-color: var(--ink); } .pdp__info { display: flex; flex-direction: column; gap: 22px; } .pdp__meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.16em; text-transform: uppercase; } .pdp__meta span:first-child { color: var(--red); } .pdp__title { font-family: var(--display); font-size: clamp(40px, 4vw, 64px); line-height: 0.94; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; } .pdp__price { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .pdp__price b { font-family: var(--display); font-size: clamp(40px, 3vw, 52px); font-weight: 400; line-height: 1; } .pdp__price small { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--mute); text-transform: uppercase; } .pdp__sale { margin-left: auto; background: var(--red); color: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 10px; } .pdp__form { display: flex; flex-direction: column; gap: 14px; } .pdp__label { font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); } .pdp__form select, .pdp__select { padding: 14px 18px; border: 1px solid var(--ink); background: var(--paper); font-family: var(--mono); font-size: var(--type-2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); border-radius: 0; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .pdp__soldout { border: 1px solid var(--red); background: rgba(255,59,47,0.06); padding: 18px 20px; } .pdp__soldout strong { display: block; font-family: var(--display); font-size: var(--h5); text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 6px; } .pdp__soldout p { margin: 0 0 14px; font-size: var(--type-2); line-height: 1.5; } .pdp__shipping h4 { font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin: 0 0 10px; } .pdp__shipping ul { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: var(--type-2); } .pdp__shipping li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dotted var(--rule); } .pdp__desc { font-size: var(--type-2); line-height: 1.55; padding-top: 14px; border-top: 1px solid var(--rule); } .pdp__desc p { margin: 0 0 12px; } .pdp__desc strong { font-weight: 600; } .pdp__desc em { font-family: var(--serif); font-style: italic; } .pdp__pager { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 48px 28px; border-top: 1px solid var(--rule); } .pdp__pager-prev, .pdp__pager-next { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; border: 1px solid var(--rule); } .pdp__pager-next { text-align: right; } .pdp__pager-prev:hover, .pdp__pager-next:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .pdp__pager-kicker { font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); } .pdp__pager-name { font-family: var(--display); font-size: clamp(20px, 1.6vw, 26px); letter-spacing: 0.01em; text-transform: uppercase; line-height: 1; } /* --------------- Cart --------------- */ .cart { padding: 12px 28px 80px; } .cart__list { list-style: none; margin: 0 0 32px; padding: 0; } .cart__row { display: grid; grid-template-columns: 140px 1fr 140px 120px; gap: 28px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); } .cart__art { aspect-ratio: 1; border: 1px solid var(--ink); overflow: hidden; } .cart__art img { width: 100%; height: 100%; object-fit: cover; } .cart__name { font-family: var(--display); font-size: clamp(22px, 1.6vw, 28px); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; margin: 0 0 8px; } .cart__option { display: block; font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; } .cart__unit { font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.06em; color: var(--mute); } .cart__qty { display: flex; flex-direction: column; gap: 6px; } .cart__qty label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); } .cart__qty input { width: 80px; padding: 10px 12px; border: 1px solid var(--ink); background: var(--paper); font-family: var(--mono); font-size: var(--type-2); text-align: center; } .cart__price b { font-family: var(--display); font-size: clamp(22px, 1.6vw, 28px); font-weight: 400; } .cart__totals { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-top: 24px; padding: 32px 0; border-top: 1px solid var(--ink); } .cart__totals dl { margin: 0; } .cart__totals dl > div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dotted var(--rule); font-family: var(--mono); font-size: var(--type-2); } .cart__totals dt { color: var(--mute); text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--type-1); } .cart__totals dd { margin: 0; } .cart__grand { border-bottom: 0 !important; padding-top: 18px !important; } .cart__grand dt { font-family: var(--display) !important; font-size: clamp(20px, 1.4vw, 24px) !important; color: var(--ink) !important; letter-spacing: 0.01em !important; } .cart__grand dd { font-family: var(--display) !important; font-size: clamp(28px, 2vw, 36px); color: var(--ink); } .cart__actions { display: flex; flex-direction: column; gap: 12px; } /* --------------- Contact --------------- */ .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 12px 28px 80px; } .contact__copy h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--h5); line-height: 1.05; margin: 0 0 18px; } .contact__copy p { font-size: var(--type-3); line-height: 1.5; margin: 0 0 24px; max-width: 50ch; } .contact__direct { margin: 0; } .contact__direct > div { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); } .contact__direct dt { font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); } .contact__direct dd { margin: 0; font-family: var(--display); font-size: clamp(20px, 1.4vw, 26px); letter-spacing: 0.01em; text-transform: uppercase; } .contact__direct dd a:hover { color: var(--red); } .contact__form { display: flex; flex-direction: column; gap: 8px; } .contact__form label { font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin-top: 14px; } .contact__input, .contact__form input, .contact__form textarea { padding: 14px 18px; border: 1px solid var(--ink); background: var(--paper); font-family: var(--mono); font-size: var(--type-2); color: var(--ink); border-radius: 0; outline: 0; } .contact__form .contact__input--textarea, .contact__form textarea { min-height: 140px; resize: vertical; } .contact__form input:focus, .contact__form textarea:focus { border-color: var(--red); } .contact__success { padding: 22px 24px; border: 1px solid var(--acid); background: rgba(212,255,0,0.08); } .contact__success strong { font-family: var(--display); font-size: var(--h5); text-transform: uppercase; display: block; margin-bottom: 6px; } /* --------------- Maintenance --------------- */ .maint { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding: 80px 28px; gap: 24px; max-width: 920px; } .maint__num { font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); } .maint__title { font-family: var(--display); font-size: var(--h1); line-height: 0.84; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; } .maint__title em { color: var(--red); font-style: normal; } .maint__copy { font-family: var(--serif); font-style: italic; font-size: var(--h5); line-height: 1.2; margin: 0; max-width: 40ch; color: var(--mute); } .maint .btn { align-self: flex-start; } /* --------------- Footer --------------- */ footer.site { background: var(--ink); color: var(--paper); padding: 80px 28px 28px; } .foot__top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; padding-bottom: 56px; border-bottom: 1px solid var(--rule-on-dark); } .foot__brand { font-family: var(--display); font-size: var(--h2); line-height: 0.85; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; } .foot__brand em { color: var(--red); font-style: normal; } .foot__news h4 { font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--acid); margin: 0 0 14px; } .foot__news p { font-size: var(--type-2); line-height: 1.5; margin: 0 0 22px; color: var(--paper); opacity: 0.78; max-width: 36ch; } .foot__form { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--paper); } .foot__form input { background: transparent; border: 0; color: var(--paper); font-family: var(--mono); font-size: var(--type-2); padding: 12px 0; outline: 0; } .foot__form input::placeholder { color: var(--mute); } .foot__form button { background: transparent; border: 0; color: var(--acid); font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.18em; text-transform: uppercase; padding: 12px 0 12px 18px; cursor: pointer; } .foot__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-top: 28px; font-family: var(--mono); font-size: var(--type-1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); } .foot__bottom a:hover { color: var(--acid); } /* --------------- Responsive --------------- */ @media (max-width: 960px) { .nav { grid-template-columns: 1fr auto; } .nav__center { display: none; } .hero__grid { grid-template-columns: 1fr; gap: 32px; } .hero__bar { grid-template-columns: repeat(2, 1fr); } .hero__bar > .btn { grid-column: 1 / -1; } .spec { grid-template-columns: 1fr; gap: 32px; padding-bottom: 56px; } .catalog { grid-template-columns: repeat(6, 1fr); } .cat--lg, .cat--md { grid-column: span 6; } .cat--sm { grid-column: span 3; } .about__grid { grid-template-columns: 1fr; gap: 32px; } .shows__row { grid-template-columns: 1fr 1fr; row-gap: 8px; } .shows__row > * { grid-column: span 1; } .foot__top { grid-template-columns: 1fr; } .section-h { flex-wrap: wrap; } .section-h__rule { display: none; } .pdp__hero { grid-template-columns: 1fr; gap: 32px; } .pdp__gallery { position: static; } .cart__row { grid-template-columns: 100px 1fr; row-gap: 12px; } .cart__qty, .cart__price { grid-column: 2; } .cart__totals { grid-template-columns: 1fr; } .contact { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 540px) { .catalog { grid-template-columns: 1fr; } .cat--lg, .cat--md, .cat--sm { grid-column: 1 / -1; } .spec__sheet > dl { grid-template-columns: 1fr; } .spec__sheet > dl > div:nth-child(odd) { border-right: 0; } .pdp__pager { grid-template-columns: 1fr; } }