/*
Theme Name: Slushy Bros
Theme URI: https://slushybros.example
Author: SEO Locale
Author URI: https://seolocale.com
Description: Limited-edition party apparel theme. Cold drinks. Hot decisions. Zero regrets. A bold zine-style theme for Slushy Bros featuring custom post types for Drops and House Rules, full Customizer integration, and a sticky countdown for drop launches.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: slushy-bros
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, theme-options
*/
:root {
--ink: #0a0a0c;
--ink-2: #16161b;
--ink-3: #1e1e25;
--paper: #f4ead3;
--paper-2: #ead9b1;
--paper-dim: rgba(244, 234, 211, 0.78);
--paper-faint: rgba(244, 234, 211, 0.18);
--blood: #d6202b;
--blood-deep: #a8161e;
--blood-bright: #ff3b3b;
--ice: #1e5bc6;
--ice-deep: #1547a0;
--ice-bright: #4a82d9;
--mustard: #f4b942;
--line: rgba(244, 234, 211, 0.14);
--line-strong: rgba(244, 234, 211, 0.32);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Restore browser-default margin/padding inside WooCommerce content
containers so the universal `* { margin: 0; padding: 0 }` reset
doesn't collapse WC's checkout/cart/account layout.
Notes:
- Targets actual content wrappers only — the `.woocommerce-page`
body class is intentionally NOT included or it would leak into
the header nav, footer, and other shared chrome.
- We do NOT revert box-sizing. WC Blocks' two-column checkout
(form + order summary sidebar) relies on border-box widths for
the flex columns to fit side-by-side. Reverting to UA default
(content-box) made the order summary wrap to a third row. */
.woocommerce,
.woocommerce *,
[class*="wp-block-woocommerce-"],
[class*="wp-block-woocommerce-"] *,
[class*="wc-block-"],
[class*="wc-block-"] * {
margin: revert;
padding: revert;
}
html { scroll-behavior: smooth; }
body {
background: var(--ink);
color: var(--paper);
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 16px;
line-height: 1.5;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Heavier film grain for that printed/zine feel */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 100;
opacity: 0.09;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img { display: block; max-width: 100%; }
/* Restore browser-default a/button styling inside WC content
containers (NOT the body class) so the header nav, footer, and
other shared chrome on every WC page keep their brand styling. */
.woocommerce a,
[class*="wp-block-woocommerce-"] a,
[class*="wc-block-"] a {
color: revert;
text-decoration: revert;
}
.woocommerce button,
[class*="wp-block-woocommerce-"] button,
[class*="wc-block-"] button {
font: revert;
color: revert;
background: revert;
border: revert;
cursor: pointer;
}
/* ====== Focus-visible ====== */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.cart-pill:focus-visible,
.nav-toggle:focus-visible,
.swatch-btn:focus-visible,
.size-chip:focus-visible,
.gallery-thumb:focus-visible,
.qty-btn:focus-visible,
.signup-form input:focus-visible,
.qty-input:focus-visible {
outline: 3px solid var(--mustard);
outline-offset: 3px;
border-radius: 4px;
}
/* ====== Skip link ====== */
.skip-link {
position: absolute;
left: -9999px;
top: -9999px;
z-index: 9999;
padding: 12px 18px;
background: var(--paper);
color: var(--ink);
font-family: 'Anton', sans-serif;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.skip-link:focus,
.skip-link:focus-visible { left: 16px; top: 16px; }
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.marquee-track { animation: none !important; }
.hero-logo,
.hero-logo-stage::before,
.hero-eyebrow .pulse,
.countdown-label .live-dot,
.product-stock .dot { animation: none !important; }
}
.wrap { width: min(1320px, calc(100% - 48px)); margin: 0 auto; }
.wrap-tight { width: min(1080px, calc(100% - 48px)); margin: 0 auto; }
/* ====== Type system ====== */
.sb-display {
font-family: 'Anton', sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.005em;
line-height: 0.95;
}
.chunk {
font-family: 'Anton', 'Bebas Neue', sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.005em;
line-height: 0.86;
}
.marker {
font-family: 'Permanent Marker', cursive;
font-weight: 400;
letter-spacing: 0.01em;
line-height: 1;
}
/* ====== Marker eyebrows (default outside specific sections) ====== */
.marker-eyebrow {
font-family: 'Permanent Marker', cursive;
color: var(--blood);
font-size: 22px;
line-height: 1;
transform: rotate(-2deg);
display: inline-block;
margin-bottom: 14px;
}
/* ====== Marker margin notes ====== */
.note {
font-family: 'Permanent Marker', cursive;
color: var(--blood);
font-size: 22px;
line-height: 1;
letter-spacing: 0.005em;
transform: rotate(-4deg);
display: inline-block;
}
.note.blue { color: var(--ice-bright); }
.note.cream { color: var(--paper); }
.note.small { font-size: 16px; }
/* ====== Stamps (rotated rubber-stamp style) ====== */
.stamp {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
border: 2.5px solid currentColor;
border-radius: 4px;
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.16em;
color: var(--blood);
transform: rotate(-6deg);
opacity: 0.92;
position: relative;
}
.stamp.blue { color: var(--ice-bright); }
.stamp.cream { color: var(--paper); }
.stamp.ink { color: var(--ink); }
.stamp.tilt-r { transform: rotate(5deg); }
.stamp.tilt-r-2 { transform: rotate(8deg); }
/* ====== Promo bar (above marquee) ====== */
.promo-bar {
position: relative;
background: var(--ink-2);
color: var(--paper);
padding: 8px 48px 8px 16px;
text-align: center;
border-bottom: 1px solid var(--line);
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 600;
}
.promo-bar.is-hidden { display: none; }
.promo-bar-msg { color: var(--paper); }
.promo-bar-msg:hover { color: var(--mustard); }
.promo-bar-msg strong { color: var(--mustard); font-weight: 700; }
.promo-bar-close {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
color: var(--paper-dim);
cursor: pointer;
display: grid;
place-items: center;
transition: color 0.15s, background 0.15s;
}
.promo-bar-close:hover { color: var(--paper); background: rgba(244,234,211,0.06); }
/* ====== Marquee ====== */
.marquee {
background: var(--blood);
color: var(--paper);
overflow: hidden;
padding: 12px 0;
border-bottom: 3px solid var(--ink);
position: relative;
z-index: 5;
width: 100%;
}
.marquee-track {
display: flex;
gap: 0;
width: max-content;
/* Ensure the track is always at least 2x viewport so the -50% loop
never reveals empty space on the right edge with a sparse item list */
min-width: 200vw;
animation: marquee 32s linear infinite;
white-space: nowrap;
font-family: 'Anton', sans-serif;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.marquee-track > span {
display: inline-flex;
align-items: center;
gap: 32px;
padding-right: 32px;
}
.marquee-track > span::after {
content: "★";
font-family: 'DM Sans', sans-serif;
color: var(--paper);
opacity: 0.9;
font-size: 14px;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ====== Header ====== */
.site-header {
position: sticky;
top: 0;
z-index: 40;
/* No backdrop-filter — it creates a containing block that traps the
position:fixed mobile menu drawer inside the header strip. */
background: rgba(10, 10, 12, 0.94);
border-bottom: 1px solid var(--line);
}
.nav {
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.brand {
display: flex;
align-items: center;
gap: 14px;
font-family: 'Anton', sans-serif;
font-size: 22px;
text-transform: uppercase;
letter-spacing: 0.005em;
color: var(--paper);
}
.brand-mark {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--blood);
display: grid;
place-items: center;
font-family: 'Anton', sans-serif;
font-size: 14px;
color: var(--paper);
border: 2px solid var(--paper);
transform: rotate(-6deg);
}
.brand-mark img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.site-logo {
display: block;
width: auto;
max-width: 100%;
object-fit: contain;
}
.nav-links {
display: flex;
align-items: center;
gap: 24px;
font-family: 'Anton', sans-serif;
font-size: 17px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.04em;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links > li { display: inline-flex; align-items: center; }
.nav-links a {
color: var(--paper);
opacity: 0.78;
transition: opacity 0.15s, color 0.15s;
position: relative;
padding: 4px 0;
line-height: 1;
}
.nav-links a:hover,
.nav-links .current-menu-item a {
color: var(--paper);
opacity: 1;
}
/* ---------- Drops-by-tier nav dropdown ---------- */
.nav-tier-drops { position: relative; list-style: none; display: inline-flex; align-items: center; }
.nav-dropdown-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 0;
margin: 0;
font-family: 'Anton', sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--paper);
opacity: 0.78;
background: transparent;
border: 0;
cursor: pointer;
transition: opacity 0.15s, color 0.15s;
}
.nav-dropdown-trigger:hover { opacity: 1; }
.nav-dropdown-trigger i {
font-size: 11px;
line-height: 1;
transition: transform 0.2s;
transform: translateY(1px); /* optical centering — chevron sits a hair high otherwise */
}
.nav-tier-drops[data-open] .nav-dropdown-trigger,
.nav-tier-drops[data-open] .nav-dropdown-trigger i { opacity: 1; }
.nav-tier-drops[data-open] .nav-dropdown-trigger i { transform: translateY(1px) rotate(180deg); }
.nav-dropdown-panel {
position: absolute;
top: calc(100% + 16px);
left: 50%;
transform: translate(-50%, -8px);
width: min(880px, calc(100vw - 32px));
background: rgba(10, 10, 12, 0.97);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid var(--line-strong);
border-radius: 14px;
padding: 22px;
box-shadow: 0 28px 60px -16px rgba(0,0,0,0.6);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
z-index: 50;
}
.nav-tier-drops[data-open] .nav-dropdown-panel {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0s;
}
.nav-dropdown-panel::before {
content: "";
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 14px;
height: 14px;
background: rgba(10, 10, 12, 0.97);
border-top: 1px solid var(--line-strong);
border-left: 1px solid var(--line-strong);
}
.nav-dropdown-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.nav-dropdown-tier {
--cup-color: var(--blood-bright);
border: 1px solid var(--line);
border-radius: 10px;
padding: 14px;
background: rgba(244,234,211,0.02);
border-top: 3px solid var(--cup-color);
}
.nav-dropdown-tier-head {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.nav-dropdown-tier-num {
font-family: 'Anton', sans-serif;
font-size: 24px;
color: var(--cup-color);
line-height: 1;
}
.nav-dropdown-tier-name {
font-family: 'Anton', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--paper-dim);
}
.nav-dropdown-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.nav-dropdown-list a {
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: center;
gap: 10px;
padding: 6px 10px;
border-radius: 8px;
font-family: 'DM Sans', sans-serif;
color: var(--paper);
font-size: 14px;
font-weight: 600;
text-transform: none;
letter-spacing: normal;
line-height: 1.2;
transition: background 0.15s, color 0.15s;
}
.nav-dropdown-list a:hover { background: rgba(244,234,211,0.06); }
.nav-dropdown-list a:hover::after { display: none; }
.nav-dropdown-list a[data-stock="sold"] { opacity: 0.55; }
.nav-dropdown-drop-thumb {
width: 36px;
height: 36px;
border-radius: 8px;
overflow: hidden;
background: rgba(244,234,211,0.06);
display: grid;
place-items: center;
}
.nav-dropdown-drop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-dropdown-drop-thumb-fallback {
font-family: 'Anton', sans-serif;
font-size: 13px;
color: var(--cup-color);
letter-spacing: 0.04em;
}
.nav-dropdown-drop-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.nav-dropdown-drop-title {
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 14px;
font-weight: 700;
text-transform: none;
letter-spacing: 0.005em;
line-height: 1.25;
color: var(--paper);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-dropdown-drop-fill {
display: inline-flex;
align-items: center;
gap: 6px;
}
.nav-dropdown-drop-bar {
display: inline-block;
width: 36px;
height: 6px;
border-radius: 100px;
background: rgba(244,234,211,0.14);
overflow: hidden;
}
.nav-dropdown-drop-bar-fill {
display: block;
height: 100%;
background: var(--cup-color);
}
.nav-dropdown-drop-pct {
font-family: 'Anton', sans-serif;
font-size: 12px;
color: var(--cup-color);
letter-spacing: 0.04em;
min-width: 32px;
text-align: right;
}
.nav-dropdown-drop-flag {
grid-column: 1 / -1;
font-family: 'Anton', sans-serif;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--paper-dim);
}
.nav-dropdown-empty {
margin: 4px 4px 8px;
color: var(--paper-dim);
font-size: 13px;
font-weight: 500;
}
.nav-dropdown-locked {
margin-top: 16px;
padding: 14px;
border: 1px dashed var(--line-strong);
border-radius: 10px;
background: rgba(244, 234, 211, 0.02);
}
.nav-dropdown-locked-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Anton', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--mustard);
margin-bottom: 10px;
}
.nav-dropdown-locked-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.nav-dropdown-locked-list li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
color: var(--paper-dim);
font-size: 13px;
font-weight: 500;
}
.nav-dropdown-locked-title { color: var(--paper); font-weight: 600; }
.nav-dropdown-locked-when {
font-family: 'Anton', sans-serif;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mustard);
}
.nav-dropdown-foot {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.nav-dropdown-foot-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Anton', sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--paper);
transition: color 0.15s, gap 0.2s;
}
.nav-dropdown-foot-link i { color: var(--mustard); }
.nav-dropdown-foot-link:hover { color: var(--mustard); gap: 12px; }
.nav-dropdown-foot-link:hover::after { display: none; }
@media (max-width: 1100px) {
.nav-dropdown-panel { width: min(720px, calc(100vw - 32px)); padding: 18px; }
.nav-dropdown-grid { gap: 14px; }
}
@media (max-width: 960px) {
/* Inside the mobile drawer: render inline, no overlay */
.nav-tier-drops { width: 100%; }
.nav-dropdown-trigger { display: none; }
.nav-dropdown-panel {
position: static;
transform: none;
width: 100%;
opacity: 1;
visibility: visible;
background: transparent;
border: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
padding: 0;
}
.nav-dropdown-panel::before { display: none; }
.nav-dropdown-grid { grid-template-columns: 1fr; gap: 16px; }
.nav-dropdown-tier { padding: 14px; }
.nav-dropdown-list a { font-size: 16px; padding: 10px 12px; }
.nav-dropdown-foot { flex-direction: column; align-items: flex-start; }
}
.nav-links a:hover::after,
.nav-links .current-menu-item a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 3px;
background: var(--blood-bright);
border-radius: 2px;
transform: skewX(-12deg);
}
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border: 1.5px solid var(--line-strong);
border-radius: 100px;
color: var(--paper);
font-size: 18px;
background: transparent;
cursor: pointer;
padding: 0;
transition: border-color 0.15s, background 0.15s;
}
.nav-toggle:hover { border-color: var(--paper); background: rgba(244,234,211,0.04); }
.nav-toggle .fa-xmark { display: none; }
body.menu-open .nav-toggle .fa-bars { display: none; }
body.menu-open .nav-toggle .fa-xmark { display: inline-block; }
.cart-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1.5px solid var(--line-strong);
border-radius: 100px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 600;
transition: border-color 0.15s, background 0.15s;
}
.cart-pill:hover { border-color: var(--paper); background: rgba(244,234,211,0.04); }
.cart-pill i { color: var(--blood-bright); font-size: 14px; }
.cart-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blood); }
/* ====== Buttons ====== */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 26px;
border-radius: 100px;
font-family: 'Anton', sans-serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
border: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
}
.btn-red { background: var(--blood); color: var(--paper); }
.btn-red:hover { background: var(--blood-deep); transform: translateY(-2px) rotate(-1deg); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { background: #fff; transform: translateY(-2px) rotate(1deg); }
.btn-ink { background: var(--ink); color: var(--paper); border-color: var(--paper); }
.btn-ink:hover { transform: translateY(-2px) rotate(-1deg); background: var(--ink-3); }
.btn-ghost {
background: transparent;
color: var(--paper);
border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--paper); transform: translateY(-2px) rotate(1deg); }
.btn .arrow { display: inline-block; transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(4px); }
/* ====== Hero ====== */
.hero {
position: relative;
padding: 80px 0 64px;
overflow: hidden;
background:
radial-gradient(circle at 12% 18%, rgba(214, 32, 43, 0.18), transparent 38%),
radial-gradient(circle at 88% 82%, rgba(30, 91, 198, 0.18), transparent 38%);
}
.hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 56px;
align-items: center;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
background: var(--blood);
color: var(--paper);
font-family: 'Anton', sans-serif;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: 100px;
margin-bottom: 28px;
transform: rotate(-2deg);
}
.hero-eyebrow .pulse {
width: 8px; height: 8px; border-radius: 50%; background: var(--paper);
animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(244, 234, 211, 0.7); }
100% { box-shadow: 0 0 0 10px rgba(244, 234, 211, 0); }
}
h1.hero-title {
font-size: clamp(72px, 10.5vw, 156px);
margin-bottom: 28px;
position: relative;
}
h1.hero-title .l1 { display: block; color: var(--paper); }
h1.hero-title .l2 { display: block; color: var(--blood-bright); position: relative; }
h1.hero-title .l3 { display: block; color: var(--ice-bright); }
@media (min-width: 900px) {
h1.hero-title .l1,
h1.hero-title .l2,
h1.hero-title .l3 { white-space: nowrap; }
}
.hero-deck {
max-width: 540px;
font-size: 19px;
line-height: 1.5;
color: var(--paper-dim);
margin-bottom: 36px;
font-weight: 500;
}
.hero-deck strong {
color: var(--paper);
font-weight: 700;
}
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
}
.hero-stamps {
margin-top: 42px;
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
}
.hero-logo-stage {
position: relative;
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
isolation: isolate;
}
.hero-logo-stage::before {
content: "";
position: absolute;
inset: 4%;
border-radius: 50%;
background:
radial-gradient(circle at 28% 28%, rgba(30, 91, 198, 0.55), transparent 55%),
radial-gradient(circle at 72% 72%, rgba(214, 32, 43, 0.55), transparent 55%);
filter: blur(38px);
z-index: -1;
animation: drift 11s ease-in-out infinite;
}
@keyframes drift {
0%, 100% { transform: scale(1) translate(0, 0); }
33% { transform: scale(1.04) translate(2%, -1%); }
66% { transform: scale(1.02) translate(-2%, 2%); }
}
.hero-logo {
width: 92%;
max-width: 560px;
aspect-ratio: 1 / 1;
object-fit: contain;
filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
animation: logoIn 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both, logoBob 6s ease-in-out 1.1s infinite;
}
@keyframes logoIn {
from { opacity: 0; transform: scale(0.92) rotate(-2deg); }
to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes logoBob {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-8px) rotate(-0.5deg); }
}
/* Hero photo carousel */
.hero-carousel {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 28px;
overflow: hidden;
isolation: isolate;
background: var(--ink);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
animation: heroStageIn 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-carousel-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.04);
transition: opacity 900ms ease, transform 6000ms ease;
will-change: opacity, transform;
}
.hero-carousel-slide.is-active {
opacity: 1;
transform: scale(1);
}
.hero-carousel-dots {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 4;
}
.hero-carousel-dot {
appearance: none;
border: 0;
width: 28px;
height: 4px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
padding: 0;
transition: background 200ms ease, width 200ms ease;
}
.hero-carousel-dot:hover { background: rgba(255, 255, 255, 0.7); }
.hero-carousel-dot.is-active {
background: var(--paper, #fff);
width: 38px;
}
/* Hero YouTube background video */
.hero--has-bg-video {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 48px 0 40px;
min-height: min(56.25vw, 620px);
display: grid;
align-items: center;
}
.hero--has-bg-video .hero-grid {
position: relative;
z-index: 2;
grid-template-columns: 1fr;
text-align: center;
max-width: 1100px;
margin: 0 auto;
}
.hero--has-bg-video .hero-stage { display: none; }
.hero--has-bg-video .hero-copy {
max-width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.hero--has-bg-video .hero-deck { max-width: 720px; }
.hero--has-bg-video .hero-pulse { align-self: center; }
.hero--has-bg-video .hero-actions { justify-content: center; }
@media (max-width: 720px) {
.hero--has-bg-video { min-height: 460px; padding: 40px 0 32px; }
}
.hero-bg-video {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
background: #0a0a0a;
}
.hero-bg-video iframe {
position: absolute;
top: 50%;
left: 50%;
width: 177.78vh;
height: 56.25vw;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%) scale(1.25);
border: 0;
pointer-events: none;
opacity: 0;
transition: opacity 600ms ease;
}
.hero-bg-video.is-ready iframe { opacity: 1; }
.hero-bg-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%),
radial-gradient(circle at 28% 28%, rgba(30, 91, 198, 0.25), transparent 55%),
radial-gradient(circle at 72% 72%, rgba(214, 32, 43, 0.25), transparent 55%);
}
.hero--has-bg-video .hero-title,
.hero--has-bg-video .hero-eyebrow,
.hero--has-bg-video .hero-deck,
.hero--has-bg-video .hero-deck strong { color: var(--paper, #fff); }
.hero--has-bg-video .hero-deck { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
@keyframes heroStageIn {
from { opacity: 0; transform: translateY(14px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Live drop pulse pill — sits between hero title and deck */
.hero-pulse {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 14px 0 18px;
padding: 8px 14px 8px 12px;
border-radius: 100px;
background: var(--paper, #fff);
color: var(--ink, #111);
text-decoration: none;
font-family: 'DM Sans', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
border: 2px solid var(--ink, #111);
box-shadow: 4px 4px 0 var(--ink, #111);
transition: transform 180ms ease, box-shadow 180ms ease;
max-width: 100%;
}
.hero-pulse:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 var(--ink, #111);
}
.hero-pulse:active {
transform: translate(0, 0);
box-shadow: 2px 2px 0 var(--ink, #111);
}
.hero-pulse-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--cup-color, #ff3b3b);
box-shadow: 0 0 0 0 var(--cup-color, #ff3b3b);
animation: heroPulseDot 1.6s ease-out infinite;
flex: 0 0 auto;
}
@keyframes heroPulseDot {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cup-color, #ff3b3b) 70%, transparent); }
70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--cup-color, #ff3b3b) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cup-color, #ff3b3b) 0%, transparent); }
}
.hero-pulse-label {
display: inline-flex;
align-items: baseline;
gap: 4px;
text-transform: lowercase;
letter-spacing: 0.01em;
color: var(--ink, #111);
}
.hero-pulse-label strong {
font-family: 'Anton', sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.02em;
color: var(--cup-color, #ff3b3b);
}
.hero-pulse-divider {
width: 1px;
height: 14px;
background: rgba(0, 0, 0, 0.18);
flex: 0 0 auto;
}
.hero-pulse-name {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
}
.hero-pulse-arrow {
font-size: 11px;
color: var(--ink, #111);
transition: transform 180ms ease;
flex: 0 0 auto;
}
.hero-pulse:hover .hero-pulse-arrow { transform: translateX(3px); }
@media (max-width: 720px) {
.hero-pulse-name { max-width: 140px; }
.hero-carousel,
.hero-video-stage { aspect-ratio: 1 / 1; }
}
.sticker {
position: absolute;
z-index: 5;
font-family: 'Anton', sans-serif;
text-transform: uppercase;
text-align: center;
border-radius: 100px;
padding: 10px 16px;
font-size: 13px;
letter-spacing: 0.04em;
line-height: 1;
}
.sticker.s1 {
top: 6%;
left: -2%;
background: var(--mustard);
color: var(--ink);
transform: rotate(-12deg);
}
.sticker.s2 {
bottom: 12%;
right: -3%;
background: var(--ice);
color: var(--paper);
transform: rotate(10deg);
border: 2px solid var(--paper);
}
.sticker.s3 {
bottom: 4%;
left: 4%;
background: var(--paper);
color: var(--ink);
transform: rotate(-6deg);
font-family: 'Permanent Marker', cursive;
font-size: 16px;
padding: 8px 14px;
}
/* ====== Countdown ====== */
.countdown-bar {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 32px 0;
background: var(--ink-2);
position: relative;
}
.countdown-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 40px;
align-items: center;
}
.countdown-label {
font-family: 'Anton', sans-serif;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--paper);
display: flex;
align-items: center;
gap: 12px;
}
.countdown-label .live-dot {
width: 9px; height: 9px; border-radius: 50%; background: var(--blood-bright);
animation: blink 1.2s ease-in-out infinite;
box-shadow: 0 0 12px var(--blood-bright);
}
@keyframes blink { 50% { opacity: 0.3; } }
.countdown-numbers {
display: flex;
justify-content: center;
gap: 24px;
align-items: baseline;
}
.countdown-unit { text-align: center; min-width: 86px; }
.countdown-unit .num {
font-family: 'Anton', sans-serif;
font-size: clamp(44px, 5vw, 68px);
line-height: 1;
color: var(--paper);
font-variant-numeric: tabular-nums;
}
.countdown-unit .num.red { color: var(--blood-bright); }
.countdown-unit .num.blue { color: var(--ice-bright); }
.countdown-unit .num.gold { color: var(--mustard); }
.countdown-unit .name {
display: block;
margin-top: 4px;
font-family: 'DM Sans', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--paper-dim);
font-weight: 700;
}
.countdown-divider {
font-family: 'Anton', sans-serif;
color: var(--paper-faint);
font-size: 32px;
}
.countdown-cta {
font-family: 'Permanent Marker', cursive;
font-size: 18px;
color: var(--mustard);
transform: rotate(-3deg);
transition: transform 0.2s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.countdown-cta:hover { transform: rotate(-3deg) translateY(-2px); }
/* ====== Manifesto ====== */
.manifesto {
background: var(--paper);
color: var(--ink);
padding: 120px 0 130px;
position: relative;
overflow: hidden;
}
.manifesto::before,
.manifesto::after {
content: "";
position: absolute;
width: 200%;
height: 12px;
background-image: repeating-linear-gradient(
45deg,
var(--blood) 0,
var(--blood) 14px,
var(--paper) 14px,
var(--paper) 28px
);
left: -50%;
}
.manifesto::before { top: 0; }
.manifesto::after { bottom: 0; transform: scaleX(-1); }
.manifesto-stamp-tl {
position: absolute;
top: 32px;
left: 32px;
transform: rotate(-8deg);
}
.manifesto-stamp-br {
position: absolute;
bottom: 32px;
right: 32px;
transform: rotate(6deg);
}
.manifesto-eyebrow {
text-align: center;
font-family: 'Permanent Marker', cursive;
color: var(--blood);
font-size: 22px;
margin-bottom: 24px;
transform: rotate(-1deg);
}
.manifesto-text {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: clamp(38px, 5.6vw, 80px);
line-height: 1;
letter-spacing: 0.005em;
text-align: center;
max-width: 1100px;
margin: 0 auto;
color: var(--ink);
}
.manifesto-text .red { color: var(--blood); }
.manifesto-text .blue { color: var(--ice); }
.manifesto-text .marker-word {
font-family: 'Permanent Marker', cursive;
color: var(--blood);
font-size: 0.9em;
text-transform: lowercase;
display: inline-block;
transform: rotate(-2deg);
margin: 0 4px;
}
.manifesto-text .marker-word.blue { color: var(--ice); transform: rotate(2deg); }
.manifesto-foot {
text-align: center;
margin-top: 40px;
color: var(--ink);
opacity: 0.7;
max-width: 540px;
margin-left: auto;
margin-right: auto;
font-size: 16px;
line-height: 1.55;
font-weight: 500;
}
.manifesto-foot strong { color: var(--blood); font-weight: 800; }
/* ====== Drop Section ====== */
.drop-section {
padding: 120px 0 90px;
position: relative;
}
/* ---------- Modernized drop section head ---------- */
.drop-head {
max-width: 880px;
margin: 0 auto 56px;
text-align: center;
position: relative;
}
.drop-head-meta {
display: inline-flex;
align-items: center;
gap: 18px;
padding: 8px 16px;
border: 1px solid var(--line-strong);
border-radius: 100px;
margin-bottom: 28px;
}
.drop-head-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Anton', sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--paper);
}
.drop-head-pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--blood-bright);
box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.55);
animation: drop-head-pulse 1.6s ease-out infinite;
}
@keyframes drop-head-pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.55); }
100% { box-shadow: 0 0 0 8px rgba(255, 59, 59, 0); }
}
.drop-head-count {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding-left: 16px;
border-left: 1px solid var(--line-strong);
color: var(--paper-dim);
}
.drop-head-count strong {
font-family: 'Anton', sans-serif;
font-size: 18px;
color: var(--paper);
font-weight: 400;
}
.drop-head-count span {
font-family: 'Anton', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
}
.drop-head-title {
font-size: clamp(56px, 10vw, 156px);
line-height: 0.9;
color: var(--paper);
margin: 0 0 22px;
letter-spacing: -0.01em;
}
.drop-head-title .red { color: var(--blood-bright); }
.drop-head-title .blue { color: var(--ice-bright); }
.drop-head-title .gold { color: var(--mustard); }
.drop-head-deck {
color: var(--paper-dim);
font-size: 19px;
line-height: 1.5;
max-width: 580px;
margin: 0 auto 32px;
font-weight: 500;
}
.drop-head-deck strong { color: var(--paper); font-weight: 700; }
/* Tier filter chips */
.drop-filter {
display: inline-flex;
gap: 6px;
padding: 6px;
border: 1px solid var(--line-strong);
border-radius: 100px;
background: rgba(244, 234, 211, 0.02);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
flex-wrap: wrap;
}
.drop-filter-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border-radius: 100px;
background: transparent;
color: var(--paper);
font-family: 'Anton', sans-serif;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.12em;
cursor: pointer;
transition: background 0.18s, color 0.18s;
border: none;
line-height: 1;
}
.drop-filter-chip:hover { background: rgba(244, 234, 211, 0.06); }
.drop-filter-chip.is-active {
background: var(--paper);
color: var(--ink);
}
.drop-filter-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--paper-dim);
}
.drop-filter-dot[data-tier="12"] { background: #ff3b3b; }
.drop-filter-dot[data-tier="32"] { background: #4a82d9; }
.drop-filter-dot[data-tier="64"] { background: #f4b942; }
/* Hide cards filtered out (graceful, animated) */
.products .product[hidden] { display: none; }
.products .product {
transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (max-width: 600px) {
.drop-head-meta { flex-direction: column; gap: 8px; padding: 10px 16px; }
.drop-head-count { padding-left: 0; border-left: none; }
.drop-filter { padding: 4px; }
.drop-filter-chip { padding: 8px 12px; font-size: 12px; letter-spacing: 0.08em; }
}
/* ---------- Legacy section-head (kept for code/proof/signup) ---------- */
.section-head {
margin-bottom: 56px;
position: relative;
}
.section-head h2 {
font-size: clamp(64px, 9vw, 132px);
margin-bottom: 20px;
}
.section-head h2 .red { color: var(--blood-bright); }
.section-head h2 .blue { color: var(--ice-bright); }
.section-head h2 .gold { color: var(--mustard); }
.section-head .head-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: end;
}
.section-head .deck {
max-width: 420px;
color: var(--paper-dim);
font-size: 17px;
line-height: 1.5;
font-weight: 500;
}
.section-head .deck strong { color: var(--paper); }
.section-head .deck-stamps {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 16px;
}
.products {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 28px;
}
.product {
grid-column: span 4;
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
}
.product.span-6 { grid-column: span 6; }
.product.span-8 { grid-column: span 8; }
.product-art {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 8px;
overflow: hidden;
background: var(--ink-2);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.product:hover .product-art { transform: translateY(-8px) rotate(-0.6deg); }
.product.span-8:hover .product-art,
.product.span-6:hover .product-art { transform: translateY(-8px) rotate(0.4deg); }
.product-tag {
position: absolute;
top: 16px;
left: 16px;
z-index: 4;
font-family: 'Anton', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--paper);
background: var(--ink);
padding: 7px 12px;
border-radius: 100px;
border: 2px solid var(--paper);
transform: rotate(-3deg);
}
.product-stock {
position: absolute;
top: 14px;
right: 14px;
z-index: 4;
font-family: 'Anton', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 7px 12px;
border-radius: 100px;
border: 2px solid var(--ink);
transform: rotate(4deg);
}
.product-stock.live { background: var(--blood-bright); color: var(--paper); }
.product-stock.low { background: var(--mustard); color: var(--ink); }
.product-stock.sold { background: var(--ink); color: var(--paper); border-color: var(--paper); }
.product-stock .dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
margin-right: 5px;
vertical-align: middle;
animation: blink 1.4s ease-in-out infinite;
}
.product .pin-sticker {
position: absolute;
z-index: 5;
font-family: 'Permanent Marker', cursive;
font-size: 18px;
color: var(--mustard);
transform: rotate(-12deg);
pointer-events: none;
}
.product .pin-sticker.tr { top: -14px; right: -8px; transform: rotate(8deg); }
.product .pin-sticker.bl { bottom: -8px; left: -8px; }
.product .pin-sticker svg { display: block; width: 36px; margin-top: 4px; }
.print-panel {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 8%;
text-align: center;
overflow: hidden;
}
.print-panel.bg-black { background: #0e0e11; }
.print-panel.bg-cream { background: var(--paper); }
.print-panel.bg-tan { background: #c7b188; }
.print-panel.bg-navy { background: #0e1f3a; }
.print-panel.bg-red { background: var(--blood-deep); }
.print-panel::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(currentColor 1px, transparent 1.5px);
background-size: 14px 14px;
opacity: 0.06;
pointer-events: none;
}
.print-panel.text-cream { color: var(--paper); }
.print-panel.text-ink { color: var(--ink); }
.print-panel.text-red { color: var(--blood); }
.print-stack {
width: 92%;
max-width: 320px;
position: relative;
z-index: 2;
}
.print-mono-top,
.print-mono-bot {
font-family: 'DM Sans', sans-serif;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
opacity: 0.7;
font-weight: 700;
}
.print-mono-top { margin-bottom: 10px; }
.print-mono-bot { margin-top: 12px; }
.print-line {
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: clamp(28px, 4.4vw, 52px);
line-height: 1;
}
.print-line.chunk { font-family: 'Anton', sans-serif; }
.print-line .marker {
font-family: 'Permanent Marker', cursive;
text-transform: lowercase;
font-weight: 400;
}
.print-line.red { color: var(--blood); }
.print-line.cream { color: var(--paper); }
.print-line.gold { color: var(--mustard); }
.print-line.blue { color: var(--ice-bright); }
.print-mascot-bg {
position: absolute;
inset: 0;
background-size: 75%;
background-position: center 35%;
background-repeat: no-repeat;
opacity: 0.18;
z-index: 1;
}
.product-art-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Make the whole image area click-through to the drop */
.product-art-link {
position: absolute;
inset: 0;
z-index: 2;
display: block;
color: inherit;
text-decoration: none;
}
.product-art-link:focus-visible {
outline: 3px solid var(--mustard);
outline-offset: -6px;
border-radius: 8px;
}
.product-info h3 a { color: inherit; transition: color 0.15s; }
.product-info h3 a:hover { color: var(--mustard); }
.product-info {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 16px;
align-items: end;
}
.product-info h3 {
grid-column: 1 / 2;
font-family: 'Anton', sans-serif;
font-size: 24px;
text-transform: uppercase;
letter-spacing: 0.005em;
color: var(--paper);
line-height: 1;
}
.product-info .price {
grid-column: 2 / 3;
grid-row: 1;
font-family: 'Anton', sans-serif;
font-size: 22px;
color: var(--paper);
align-self: end;
}
.product-info .desc {
grid-column: 1 / -1;
color: var(--paper-dim);
font-size: 15px;
line-height: 1.5;
font-weight: 500;
}
.product-info .desc strong {
color: var(--paper);
font-family: 'Permanent Marker', cursive;
font-weight: 400;
font-size: 1.05em;
}
.product-cta {
grid-column: 1 / -1;
margin-top: 6px;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.product-cta .colorways {
display: flex;
gap: 6px;
align-items: center;
}
.swatch {
width: 16px; height: 16px;
border-radius: 50%;
border: 1.5px solid var(--line-strong);
}
.swatch.black { background: #0e0e11; }
.swatch.cream { background: var(--paper); }
.swatch.tan { background: #c7b188; }
.swatch.red { background: var(--blood); }
.swatch.navy { background: #0e1f3a; }
.add-link {
font-family: 'Anton', sans-serif;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--paper);
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap 0.2s ease, color 0.2s ease;
}
.add-link:hover { gap: 12px; color: var(--mustard); }
.add-link.disabled {
color: var(--paper-dim);
pointer-events: none;
}
/* ====== The Code ====== */
.code-section {
padding: 130px 0;
background: var(--blood);
color: var(--paper);
position: relative;
overflow: hidden;
border-top: 4px solid var(--ink);
border-bottom: 4px solid var(--ink);
}
.code-section::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(var(--paper) 1px, transparent 1.5px);
background-size: 22px 22px;
opacity: 0.05;
pointer-events: none;
}
.code-head {
text-align: center;
margin-bottom: 64px;
position: relative;
}
.code-head .marker-eyebrow {
font-family: 'Permanent Marker', cursive;
color: var(--paper);
font-size: 22px;
transform: rotate(-2deg);
display: inline-block;
margin-bottom: 12px;
}
.code-head h2 {
font-size: clamp(72px, 11vw, 180px);
color: var(--paper);
line-height: 0.95;
}
.code-head h2 em {
font-family: 'Permanent Marker', cursive;
color: var(--mustard);
font-style: normal;
text-transform: lowercase;
font-size: 0.7em;
display: inline-block;
transform: rotate(-3deg);
margin-left: 0.05em;
}
.code-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.code-item {
background: var(--paper);
color: var(--ink);
padding: 32px 28px 36px;
border: 3px solid var(--ink);
border-radius: 12px;
position: relative;
transition: transform 0.3s ease;
}
.code-item:hover { transform: translateY(-6px) rotate(-0.5deg); }
.code-item:nth-child(2) { transform: rotate(-1deg); }
.code-item:nth-child(2):hover { transform: translateY(-6px) rotate(-1.5deg); }
.code-item:nth-child(3) { transform: rotate(0.8deg); }
.code-item:nth-child(3):hover { transform: translateY(-6px) rotate(1.4deg); }
.code-num {
font-family: 'Anton', sans-serif;
font-size: clamp(80px, 10vw, 140px);
line-height: 0.95;
margin-bottom: 12px;
}
.code-num.red { color: var(--blood); }
.code-num.blue { color: var(--ice); }
.code-num.gold { color: #c8910f; }
.code-item h3 {
font-family: 'Anton', sans-serif;
font-size: 24px;
text-transform: uppercase;
letter-spacing: 0.005em;
line-height: 1;
margin-bottom: 14px;
color: var(--ink);
}
.code-item p {
color: var(--ink);
opacity: 0.85;
font-size: 16px;
line-height: 1.5;
font-weight: 500;
}
.code-item p strong {
font-family: 'Permanent Marker', cursive;
font-weight: 400;
color: var(--blood);
}
.code-item .corner-mark {
position: absolute;
top: -14px;
right: 16px;
background: var(--ink);
color: var(--paper);
font-family: 'Anton', sans-serif;
font-size: 11px;
padding: 6px 10px;
border-radius: 4px;
transform: rotate(6deg);
text-transform: uppercase;
letter-spacing: 0.04em;
border: 2px solid var(--paper);
}
/* ====== Crew set ====== */
.crew-section {
padding: 130px 0;
background: var(--ink);
color: var(--paper);
position: relative;
overflow: hidden;
}
/* Tier-color glow cones — quietly cycles the three cup colors so the
section reads as the rewards block without competing with the cards */
.crew-section::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 12% 18%, rgba(255, 59, 59, 0.18), transparent 40%),
radial-gradient(circle at 88% 30%, rgba(74, 130, 217, 0.18), transparent 40%),
radial-gradient(circle at 50% 92%, rgba(244, 185, 66, 0.20), transparent 45%);
z-index: 0;
}
/* Candy-stripe in tier colors at the top edge */
.crew-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 10px;
background-image: repeating-linear-gradient(
-45deg,
var(--blood-bright) 0,
var(--blood-bright) 14px,
var(--ice-bright) 14px,
var(--ice-bright) 28px,
var(--mustard) 28px,
var(--mustard) 42px
);
z-index: 2;
}
.crew-section > .wrap { position: relative; z-index: 1; }
.crew-grid {
display: grid;
grid-template-columns: 1fr;
gap: 56px;
align-items: start;
}
.crew-copy {
max-width: 760px;
}
.crew-copy h2 { max-width: 720px; }
.crew-copy p { max-width: 580px; }
.crew-copy .marker-eyebrow {
font-family: 'Permanent Marker', cursive;
color: var(--mustard);
font-size: 22px;
transform: rotate(-2deg);
display: inline-block;
margin-bottom: 16px;
}
.crew-copy h2 {
font-family: 'Anton', sans-serif;
font-size: clamp(56px, 8vw, 108px);
line-height: 0.95;
margin-bottom: 24px;
color: var(--paper);
text-transform: uppercase;
}
.crew-copy h2 .red { color: var(--blood-bright); }
.crew-copy h2 .blue { color: var(--ice-bright); }
.crew-copy h2 em {
font-family: 'Permanent Marker', cursive;
color: var(--mustard);
font-style: normal;
text-transform: lowercase;
font-size: 0.65em;
display: inline-block;
transform: rotate(-2deg);
}
.crew-copy p {
font-size: 18px;
line-height: 1.55;
color: var(--paper-dim);
opacity: 1;
margin-bottom: 28px;
max-width: 480px;
font-weight: 500;
}
.crew-copy p strong {
color: var(--paper);
opacity: 1;
font-weight: 700;
}
.crew-cta-row {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.crew-cta-row .btn-ink {
background: var(--paper);
color: var(--ink);
border-color: var(--paper);
}
.crew-cta-row .btn-ink:hover {
background: var(--mustard);
color: var(--ink);
border-color: var(--mustard);
}
.crew-cta-row .marker-aside {
font-family: 'Permanent Marker', cursive;
color: var(--mustard);
font-size: 18px;
transform: rotate(-3deg);
}
.crew-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.crew-card {
--accent: var(--blood);
--accent-dim: rgba(214, 32, 43, 0.85);
aspect-ratio: 2 / 3;
border: 3px solid var(--ink);
border-radius: 10px;
transition: transform 0.4s ease, box-shadow 0.4s ease;
position: relative;
overflow: hidden;
color: var(--paper);
background: #0e0e11;
isolation: isolate;
}
.crew-card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 24px 48px -16px rgba(0,0,0,0.55); }
.crew-card:nth-child(2) { transform: rotate(2deg); }
.crew-card:nth-child(2):hover { transform: translateY(-8px) rotate(3deg); }
.crew-card:nth-child(3) { transform: rotate(-1deg); }
.crew-card:nth-child(3):hover { transform: translateY(-8px) rotate(-2deg); }
/* Color theming per character */
.crew-card.crew-roller { --accent: var(--blood); --accent-dim: rgba(214, 32, 43, 0.55); }
.crew-card.crew-slush { --accent: var(--ice-bright); --accent-dim: rgba(74, 130, 217, 0.55); }
.crew-card.crew-problem { --accent: var(--mustard); --accent-dim: rgba(244, 185, 66, 0.55); }
/* Photo + overlay layers */
.crew-card-photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
/* Fallback when no photo is set — gets overridden by the inline url() */
background-image:
radial-gradient(circle at 30% 30%, var(--accent-dim), transparent 55%),
radial-gradient(circle at 70% 80%, rgba(0,0,0,0.5), transparent 60%),
linear-gradient(160deg, #1e1e22 0%, #0e0e11 100%);
filter: brightness(0.78) saturate(1.05);
z-index: 0;
}
.crew-card-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg,
rgba(10,10,12,0.92) 0%,
rgba(10,10,12,0.85) 18%,
rgba(10,10,12,0.45) 38%,
rgba(10,10,12,0.15) 55%,
rgba(10,10,12,0.20) 75%,
rgba(10,10,12,0.85) 100%);
pointer-events: none;
}
/* Text block */
.crew-card-text {
position: relative;
z-index: 2;
padding: 28px 26px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.crew-card .crew-num {
font-family: 'Anton', sans-serif;
font-size: clamp(15px, 1.4vw, 18px);
letter-spacing: 0.1em;
color: var(--accent);
text-transform: uppercase;
text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.crew-card .crew-name {
font-family: 'Anton', sans-serif;
font-weight: 400;
text-transform: uppercase;
line-height: 0.88;
margin: 0;
position: relative;
}
.crew-card .crew-the {
display: block;
font-size: clamp(40px, 4.6vw, 60px);
color: var(--paper);
letter-spacing: 0.005em;
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.crew-card .crew-character {
display: block;
font-size: clamp(64px, 8vw, 104px);
color: var(--accent);
letter-spacing: 0.005em;
text-shadow:
0 2px 0 rgba(0,0,0,0.45),
0 4px 18px rgba(0,0,0,0.75);
}
.crew-card .crew-underline {
display: block;
width: 64px;
height: 6px;
margin-top: 10px;
background: var(--accent);
border-radius: 2px;
transform: skewX(-12deg);
box-shadow: 8px 0 0 -2px var(--accent);
}
.crew-card .crew-role {
margin-top: 12px;
font-family: 'DM Sans', sans-serif;
font-size: clamp(13px, 1.2vw, 15px);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--paper);
opacity: 0.9;
text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
/* ====== Photos / Proof ====== */
.proof-section {
padding: 130px 0;
border-top: 1px solid var(--line);
background: var(--ink);
position: relative;
}
.proof-head {
margin-bottom: 56px;
text-align: center;
}
.proof-head .marker-eyebrow {
font-family: 'Permanent Marker', cursive;
color: var(--mustard);
font-size: 22px;
transform: rotate(-2deg);
display: inline-block;
margin-bottom: 14px;
}
.proof-head h2 {
font-size: clamp(56px, 8vw, 124px);
color: var(--paper);
margin-bottom: 16px;
}
.proof-head h2 .red { color: var(--blood-bright); }
.proof-head .deck {
max-width: 540px;
margin: 0 auto;
color: var(--paper-dim);
font-size: 17px;
line-height: 1.5;
font-weight: 500;
}
.proof-head .deck strong { color: var(--paper); }
.photo-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 200px;
gap: 16px;
}
.photo {
background: var(--ink-2);
border: 2px solid var(--line);
border-radius: 10px;
overflow: hidden;
position: relative;
transition: border-color 0.3s, transform 0.3s ease;
display: flex;
align-items: flex-end;
padding: 18px;
}
.photo:hover { border-color: var(--mustard); transform: translateY(-4px); }
.photo .caption {
font-family: 'Permanent Marker', cursive;
font-size: 16px;
color: var(--paper);
z-index: 2;
position: relative;
transform: rotate(-1deg);
}
.photo .index {
position: absolute;
top: 12px;
right: 16px;
font-family: 'Anton', sans-serif;
font-size: 13px;
color: var(--paper-faint);
z-index: 2;
}
.photo::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(214,32,43,0.3), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(30,91,198,0.3), transparent 60%),
linear-gradient(180deg, rgba(244,234,211,0.04), transparent);
z-index: 1;
}
.photo .photo-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.photo.span-6 { grid-column: span 6; grid-row: span 2; }
.photo.span-4 { grid-column: span 4; }
.photo.span-3 { grid-column: span 3; }
.photo.row-2 { grid-row: span 2; }
/* ====== Final CTA / Newsletter ====== */
.signup-section {
padding: 140px 0;
text-align: center;
background:
radial-gradient(circle at 20% 30%, rgba(214, 32, 43, 0.22), transparent 45%),
radial-gradient(circle at 80% 60%, rgba(30, 91, 198, 0.22), transparent 45%);
position: relative;
}
.signup-section .marker-eyebrow {
font-family: 'Permanent Marker', cursive;
color: var(--mustard);
font-size: 22px;
transform: rotate(-3deg);
display: inline-block;
margin-bottom: 20px;
}
.signup-section h2 {
font-size: clamp(64px, 9vw, 144px);
margin-bottom: 24px;
color: var(--paper);
}
.signup-section h2 em {
font-family: 'Permanent Marker', cursive;
color: var(--blood-bright);
text-transform: lowercase;
font-style: normal;
display: inline-block;
transform: rotate(-3deg);
}
.signup-section p {
max-width: 560px;
margin: 0 auto 40px;
color: var(--paper-dim);
font-size: 18px;
line-height: 1.55;
font-weight: 500;
}
.signup-section p strong { color: var(--paper); }
.signup-form {
max-width: 480px;
margin: 0 auto;
display: flex;
gap: 0;
border: 2px solid var(--paper);
border-radius: 100px;
padding: 6px;
background: rgba(10,10,12,0.7);
backdrop-filter: blur(8px);
transform: rotate(-0.5deg);
}
.signup-form input[type="email"] {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--paper);
padding: 12px 22px;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 600;
}
.signup-form input::placeholder { color: var(--paper-dim); }
.signup-form .btn { padding: 12px 22px; }
.signup-aside {
margin-top: 18px;
font-family: 'Permanent Marker', cursive;
color: var(--paper-dim);
font-size: 16px;
transform: rotate(1deg);
display: inline-block;
}
.signup-message {
margin-top: 18px;
font-family: 'Permanent Marker', cursive;
font-size: 18px;
color: var(--mustard);
}
.signup-message.error { color: var(--blood-bright); }
/* ====== Footer ====== */
.site-footer {
border-top: 1px solid var(--line);
padding: 56px 0 32px;
background: #07070a;
}
.footer-top {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
.footer-brand .footer-logo {
font-family: 'Anton', sans-serif;
font-size: 56px;
line-height: 1;
margin-bottom: 14px;
color: var(--paper);
text-transform: uppercase;
}
.footer-brand .footer-logo .red { color: var(--blood-bright); }
.footer-brand .footer-logo-mark {
display: inline-block;
margin-bottom: 18px;
transition: transform 0.2s ease;
}
.footer-brand .footer-logo-mark:hover { transform: rotate(-2deg); }
.footer-brand .footer-logo-mark img {
display: block;
height: 96px;
width: auto;
max-width: 100%;
object-fit: contain;
}
.footer-brand p {
color: var(--paper-dim);
font-size: 14px;
line-height: 1.55;
max-width: 320px;
font-weight: 500;
}
.footer-col h4 {
font-family: 'Anton', sans-serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--paper);
margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; font-size: 14px; }
.footer-col li i { width: 18px; text-align: center; margin-right: 6px; color: var(--paper); transition: color 0.15s; }
.footer-col li a:hover i { color: var(--blood-bright); }
.footer-col a {
color: var(--paper-dim);
transition: color 0.15s;
font-weight: 500;
}
.footer-col a:hover { color: var(--blood-bright); }
.footer-bottom {
border-top: 1px solid var(--line);
padding-top: 24px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: var(--paper-dim);
font-weight: 500;
}
.footer-bottom em {
font-family: 'Permanent Marker', cursive;
font-style: normal;
color: var(--blood-bright);
}
/* ====== Reveal animations ====== */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
/* ===================================================================
Single drop (product) view
=================================================================== */
.single-drop {
padding: 64px 0 120px;
}
.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--paper-dim);
margin-bottom: 32px;
font-family: 'Anton', sans-serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: color 0.15s, gap 0.2s;
}
.back-link:hover { color: var(--paper); gap: 12px; }
.single-drop-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 64px;
align-items: start;
}
/* ----- Sticky art column ----- */
.single-drop-art-col {
position: sticky;
top: 96px;
}
.single-drop-art {
aspect-ratio: 4/5;
position: relative;
border-radius: 12px;
overflow: hidden;
background: var(--ink-2);
box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.6);
}
.single-drop-art .product-art-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.2s ease;
}
.single-drop-art .product-art-image.is-fading { opacity: 0; }
.gallery-thumbs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: 10px;
margin-top: 14px;
}
.gallery-thumb {
aspect-ratio: 1 / 1;
border-radius: 8px;
overflow: hidden;
border: 2px solid var(--line-strong);
background: var(--ink-2);
padding: 0;
cursor: pointer;
transition: border-color 0.15s, transform 0.15s;
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery-thumb:hover { transform: translateY(-2px); border-color: var(--paper); }
.gallery-thumb.is-active {
border-color: var(--blood-bright);
box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--blood-bright);
}
/* ----- Buy panel ----- */
.single-drop-buy {
position: sticky;
top: 96px;
display: flex;
flex-direction: column;
gap: 18px;
}
.buy-eyebrow {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 8px;
padding: 6px 14px;
background: var(--blood);
color: var(--paper);
font-family: 'Anton', sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
border-radius: 100px;
transform: rotate(-2deg);
}
.single-drop-title {
font-size: clamp(44px, 6vw, 88px);
margin: 4px 0 0;
color: var(--paper);
}
.buy-price-row {
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
margin-top: 4px;
}
.single-drop .price-tag {
font-family: 'Anton', sans-serif;
font-size: clamp(32px, 4vw, 44px);
color: var(--mustard);
line-height: 1;
}
.price-aside {
font-family: 'Permanent Marker', cursive;
color: var(--paper-dim);
font-size: 15px;
transform: rotate(-1deg);
}
.single-drop .description {
color: var(--paper-dim);
font-size: 16px;
line-height: 1.6;
}
.single-drop .description strong { color: var(--paper); }
.single-drop .description p { margin: 0 0 12px; }
.buy-form {
display: flex;
flex-direction: column;
gap: 18px;
padding: 24px;
border: 1px solid var(--line-strong);
border-radius: 14px;
background: rgba(244, 234, 211, 0.03);
margin-top: 8px;
}
.buy-field { display: flex; flex-direction: column; gap: 10px; }
.buy-field-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.buy-field-label {
font-family: 'Anton', sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--paper-dim);
}
.buy-field-value {
font-family: 'Anton', sans-serif;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--paper);
}
.buy-field-link {
font-family: 'Permanent Marker', cursive;
color: var(--mustard);
font-size: 14px;
transform: rotate(-2deg);
display: inline-block;
}
/* swatches */
.buy-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--line-strong);
background: transparent;
padding: 4px;
cursor: pointer;
display: grid;
place-items: center;
transition: border-color 0.15s, transform 0.15s;
}
.swatch-btn .swatch {
width: 100%; height: 100%;
border: 1px solid rgba(0,0,0,0.2);
}
.swatch-btn:hover { transform: translateY(-2px); }
.swatch-btn.is-active {
border-color: var(--paper);
box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--paper);
}
/* size chips */
.buy-sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.size-chip {
min-width: 52px;
padding: 11px 16px;
border: 2px solid var(--line-strong);
border-radius: 100px;
background: transparent;
color: var(--paper);
font-family: 'Anton', sans-serif;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}
.size-chip:hover { border-color: var(--paper); transform: translateY(-2px); }
.size-chip.is-active {
background: var(--paper);
color: var(--ink);
border-color: var(--paper);
}
/* qty */
.buy-qty-row .qty-stepper {
display: inline-flex;
align-items: stretch;
border: 2px solid var(--line-strong);
border-radius: 100px;
overflow: hidden;
width: fit-content;
}
.qty-btn {
width: 44px;
background: transparent;
color: var(--paper);
font-family: 'Anton', sans-serif;
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: background 0.15s;
}
.qty-btn:hover { background: rgba(244,234,211,0.06); }
.qty-input {
width: 56px;
background: transparent;
border: none;
color: var(--paper);
text-align: center;
font-family: 'Anton', sans-serif;
font-size: 18px;
-moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* submit */
.buy-submit {
margin-top: 4px;
padding: 18px 28px;
font-size: 15px;
justify-content: center;
}
.buy-submit:disabled {
opacity: 0.55;
cursor: not-allowed;
background: var(--ink-3);
color: var(--paper-dim);
border-color: var(--line-strong);
}
.buy-marker-aside {
align-self: center;
font-family: 'Permanent Marker', cursive;
color: var(--paper-dim);
font-size: 14px;
transform: rotate(-1deg);
}
/* perks */
.buy-perks {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.buy-perks li {
display: flex;
align-items: center;
gap: 12px;
color: var(--paper-dim);
font-size: 14px;
font-weight: 500;
}
.buy-perks i { color: var(--blood-bright); width: 20px; text-align: center; }
/* ----- Specs row ----- */
.single-drop-specs {
margin-top: 96px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.spec-card {
padding: 28px;
border: 1px solid var(--line-strong);
border-radius: 12px;
background: var(--ink-2);
position: relative;
transition: transform 0.3s, border-color 0.3s;
}
.spec-card:hover { transform: translateY(-4px); border-color: var(--paper); }
.spec-card .spec-stamp {
display: inline-block;
margin-bottom: 14px;
padding: 5px 12px;
border: 2px solid var(--blood);
color: var(--blood);
border-radius: 4px;
font-family: 'Anton', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
transform: rotate(-3deg);
}
.spec-card h3 {
font-size: clamp(22px, 2vw, 28px);
line-height: 1;
color: var(--paper);
margin-bottom: 10px;
}
.spec-card p {
color: var(--paper-dim);
font-size: 15px;
line-height: 1.55;
margin: 0;
font-weight: 500;
}
.spec-card p strong { color: var(--paper); font-weight: 700; }
/* ----- Related drops ----- */
.single-drop-related { margin-top: 96px; }
.related-head { margin-bottom: 36px; }
.related-head .note { display: inline-block; margin-bottom: 8px; }
.related-head h2 {
font-size: clamp(40px, 5vw, 72px);
color: var(--paper);
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.related-card {
display: flex;
flex-direction: column;
gap: 14px;
color: var(--paper);
transition: transform 0.3s;
}
.related-card:hover { transform: translateY(-6px); }
.related-art {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 10px;
overflow: hidden;
background: var(--ink-2);
}
.related-art .product-art-image {
width: 100%; height: 100%; object-fit: cover;
}
.related-info {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.related-info h3 {
font-family: 'Anton', sans-serif;
font-size: 22px;
text-transform: uppercase;
letter-spacing: 0.005em;
color: var(--paper);
margin: 0;
}
.related-info .price {
font-family: 'Anton', sans-serif;
font-size: 20px;
color: var(--paper);
}
/* ----- Mobile sticky buy bar ----- */
.mobile-buy-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 45;
background: rgba(10, 10, 12, 0.95);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-top: 1px solid var(--line-strong);
padding: 12px env(safe-area-inset-right, 16px) calc(12px + env(safe-area-inset-bottom, 0px)) env(safe-area-inset-left, 16px);
}
.mobile-buy-bar-inner {
display: flex;
align-items: center;
gap: 14px;
max-width: 720px;
margin: 0 auto;
}
.mobile-buy-bar-text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.mobile-buy-bar-text strong {
font-family: 'Anton', sans-serif;
font-weight: 400;
text-transform: uppercase;
color: var(--paper);
font-size: 14px;
letter-spacing: 0.04em;
line-height: 1.05;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-buy-bar-text span {
font-family: 'Anton', sans-serif;
color: var(--mustard);
font-size: 13px;
line-height: 1;
margin-top: 2px;
}
.mobile-buy-cta {
flex: 0 0 auto;
padding: 12px 18px;
font-size: 13px;
}
@media (max-width: 1024px) {
body.show-mobile-buy .mobile-buy-bar { display: block; }
}
/* ====== Generic modal ====== */
.sb-modal {
position: fixed;
inset: 0;
z-index: 75;
pointer-events: none;
visibility: hidden;
transition: visibility 0s linear 0.3s;
}
.sb-modal.is-open {
pointer-events: auto;
visibility: visible;
transition: visibility 0s linear 0s;
}
.sb-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(10, 10, 12, 0.7);
opacity: 0;
transition: opacity 0.3s ease;
}
.sb-modal.is-open .sb-modal-backdrop { opacity: 1; }
.sb-modal-panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -45%);
width: min(560px, calc(100% - 32px));
max-height: 86vh;
background: var(--ink-2);
border: 1px solid var(--line-strong);
border-radius: 14px;
box-shadow: 0 30px 60px -16px rgba(0,0,0,0.6);
opacity: 0;
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
display: flex;
flex-direction: column;
}
.sb-modal.is-open .sb-modal-panel { transform: translate(-50%, -50%); opacity: 1; }
.sb-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 24px;
border-bottom: 1px solid var(--line);
}
.sb-modal-head h2 { font-size: clamp(24px, 2.6vw, 32px); color: var(--paper); margin: 0; line-height: 1; }
.sb-modal-close {
width: 36px; height: 36px;
border-radius: 50%;
color: var(--paper);
font-size: 16px;
background: transparent;
cursor: pointer;
transition: background 0.15s;
}
.sb-modal-close:hover { background: rgba(244,234,211,0.06); }
.sb-modal-body { padding: 24px; overflow-y: auto; }
/* Size guide */
.size-guide-lede { color: var(--paper-dim); margin: 0 0 20px; line-height: 1.5; font-weight: 500; }
.size-guide-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.size-guide-table {
width: 100%;
border-collapse: collapse;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
}
.size-guide-table th,
.size-guide-table td {
padding: 12px 14px;
text-align: center;
border-bottom: 1px solid var(--line);
}
.size-guide-table thead th {
font-family: 'Anton', sans-serif;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--paper-dim);
background: rgba(244,234,211,0.04);
}
.size-guide-table tbody th {
font-family: 'Anton', sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--paper-dim);
text-align: left;
width: 36%;
font-weight: 400;
}
.size-guide-table tbody td { color: var(--paper); font-weight: 600; }
.size-guide-aside {
margin: 12px 0 0;
font-family: 'Permanent Marker', cursive;
color: var(--mustard);
font-size: 14px;
text-align: center;
transform: rotate(-1deg);
}
/* ====== Image zoom lightbox ====== */
.product-art-zoom {
display: block;
width: 100%;
height: 100%;
padding: 0;
background: transparent;
cursor: zoom-in;
position: absolute;
inset: 0;
}
.product-art-zoom img { width: 100%; height: 100%; object-fit: cover; }
.product-art-zoom-hint {
position: absolute;
bottom: 14px;
right: 14px;
width: 40px;
height: 40px;
display: grid;
place-items: center;
background: rgba(10, 10, 12, 0.7);
color: var(--paper);
border-radius: 50%;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
pointer-events: none;
transition: transform 0.2s, background 0.2s;
}
.product-art-zoom:hover .product-art-zoom-hint { transform: scale(1.08); background: var(--blood); }
.zoom-lightbox {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(10, 10, 12, 0.96);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 24px 24px;
}
.zoom-lightbox.is-open { display: flex; }
.zoom-lightbox-close {
position: absolute;
top: 16px;
right: 16px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(244,234,211,0.08);
color: var(--paper);
font-size: 18px;
cursor: pointer;
z-index: 2;
transition: background 0.15s;
}
.zoom-lightbox-close:hover { background: rgba(244,234,211,0.16); }
.zoom-stage {
flex: 1 1 auto;
width: 100%;
max-width: 1080px;
overflow: hidden;
cursor: zoom-in;
display: grid;
place-items: center;
border-radius: 12px;
}
.zoom-stage.is-zoomed { cursor: zoom-out; }
.zoom-image {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.2s ease-out;
transform-origin: center center;
user-select: none;
-webkit-user-drag: none;
}
.zoom-stage.is-zoomed .zoom-image { transform: scale(2); }
.zoom-thumbs {
margin-top: 16px;
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.zoom-thumb {
width: 64px;
aspect-ratio: 1 / 1;
border-radius: 8px;
overflow: hidden;
border: 2px solid var(--line-strong);
background: var(--ink-2);
padding: 0;
cursor: pointer;
transition: border-color 0.15s;
}
.zoom-thumb img { width: 100%; height: 100%; object-fit: cover; }
.zoom-thumb.is-active { border-color: var(--blood-bright); }
/* ====== Header live-drop hype pill ====== */
.header-hype[data-tier="12"] { --cup-color: #ff3b3b; }
.header-hype[data-tier="32"] { --cup-color: #4a82d9; }
.header-hype[data-tier="64"] { --cup-color: #f4b942; }
.header-hype {
--cup-color: var(--blood-bright);
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 14px 6px 10px;
border: 1.5px solid var(--line-strong);
border-radius: 100px;
color: var(--paper);
background: rgba(244, 234, 211, 0.02);
transition: border-color 0.15s, background 0.15s, transform 0.2s;
position: relative;
}
.header-hype:hover {
border-color: var(--cup-color);
background: rgba(244, 234, 211, 0.05);
transform: translateY(-1px);
}
.header-hype .slushy-cup-svg { width: 26px; height: 32px; flex-shrink: 0; }
.header-hype-text {
display: flex;
flex-direction: column;
line-height: 1;
}
.header-hype-label {
font-family: 'Anton', sans-serif;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--paper-dim);
margin-bottom: 2px;
}
.header-hype-stat {
font-family: 'Anton', sans-serif;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--paper);
}
.header-hype-stat [data-cup-fill-text] { color: var(--cup-color); }
.header-hype-pulse {
position: absolute;
top: 8px;
right: 8px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--blood-bright);
box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6);
animation: header-hype-pulse 1.6s ease-out infinite;
}
@keyframes header-hype-pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.55); }
100% { box-shadow: 0 0 0 8px rgba(255, 59, 59, 0); }
}
@media (max-width: 720px) {
.header-hype-text { display: none; }
.header-hype { padding: 4px 8px 4px 6px; }
.header-hype .slushy-cup-svg { width: 24px; height: 30px; }
}
/* ====== Tier stamps + tier-themed cup component ====== */
.tier-stamp {
--tier-color: var(--blood-bright);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px 4px;
border: 2px solid var(--tier-color);
border-radius: 4px;
background: rgba(10, 10, 12, 0.7);
color: var(--tier-color);
font-family: 'Anton', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
transform: rotate(-3deg);
line-height: 1;
}
.tier-stamp[data-tier="12"] { --tier-color: #ff3b3b; }
.tier-stamp[data-tier="32"] { --tier-color: #4a82d9; }
.tier-stamp[data-tier="64"] { --tier-color: #f4b942; }
.tier-stamp .tier-stamp-num { font-size: 14px; }
/* Position the tier stamp on product cards (sits below the product-tag) */
.product-art .tier-stamp {
position: absolute;
top: 56px;
left: 16px;
z-index: 4;
transform: rotate(-5deg);
}
/* ====== Slushy cup component (hype tracker) ====== */
.slushy-cup {
--cup-color: var(--blood-bright);
display: inline-flex;
align-items: center;
gap: 8px;
}
.slushy-cup[data-tier="12"] { --cup-color: #ff3b3b; }
.slushy-cup[data-tier="32"] { --cup-color: #4a82d9; }
.slushy-cup[data-tier="64"] { --cup-color: #f4b942; }
.slushy-cup-svg { width: 36px; height: 44px; flex-shrink: 0; }
.slushy-cup-svg .slushy-cup-outline { fill: rgba(244, 234, 211, 0.06); stroke: var(--paper); stroke-width: 2; }
.slushy-cup-svg .slushy-cup-lid { fill: var(--paper); }
.slushy-cup-svg .slushy-cup-straw { fill: var(--blood); }
.slushy-cup-svg .slushy-cup-shine { fill: none; stroke: rgba(244,234,211,0.35); stroke-width: 2; stroke-linecap: round; }
.slushy-cup-svg .slushy-cup-liquid {
fill: var(--cup-color);
transform: translateY(100%);
transform-origin: 0 0;
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.slushy-cup-svg .slushy-cup-foam {
fill: var(--cup-color);
opacity: 0.4;
transform: translateY(100%);
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
animation: slushy-foam 3.5s ease-in-out infinite;
}
@keyframes slushy-foam {
0%, 100% { translate: 0 0; }
50% { translate: 0 -2px; }
}
.slushy-cup-stats {
display: flex;
flex-direction: column;
line-height: 1;
}
.slushy-cup-fill {
font-family: 'Anton', sans-serif;
font-size: 14px;
color: var(--paper);
letter-spacing: 0.04em;
}
.slushy-cup-tier {
font-family: 'Anton', sans-serif;
font-size: 10px;
color: var(--cup-color);
text-transform: uppercase;
letter-spacing: 0.16em;
margin-top: 2px;
}
/* Mini variant: pinned to product card art, themed by tier */
.slushy-cup--mini {
position: absolute;
bottom: 14px;
left: 14px;
z-index: 4;
background: rgba(10, 10, 12, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 6px 12px 6px 6px;
border-radius: 100px;
border: 2px solid var(--cup-color);
box-shadow: 0 0 0 3px rgba(10,10,12,0.55);
}
.slushy-cup--mini .slushy-cup-tier {
color: var(--cup-color);
font-weight: 700;
}
/* Tier row on single product */
.single-drop-tier-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.single-drop-tier-row .tier-stamp { transform: rotate(-4deg); padding: 8px 14px 7px; font-size: 13px; }
.single-drop-tier-row .tier-stamp .tier-stamp-num { font-size: 18px; }
/* Large variant: on single product near the buy form */
.slushy-cup--large {
align-self: flex-start;
padding: 14px 18px 14px 14px;
border: 2px solid var(--cup-color);
border-radius: 14px;
background: var(--ink-2);
gap: 14px;
}
.slushy-cup--large .slushy-cup-svg { width: 56px; height: 70px; }
.slushy-cup--large .slushy-cup-fill { font-size: 22px; }
.slushy-cup--large .slushy-cup-tier { font-size: 11px; }
/* ====== User loyalty cup (in drawer) ====== */
.user-cup {
--cup-color: var(--blood-bright);
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
margin: 0 0 18px;
border-radius: 12px;
background: rgba(244, 234, 211, 0.04);
border: 1px solid var(--line-strong);
}
.user-cup .slushy-cup-svg { width: 48px; height: 60px; flex-shrink: 0; }
.user-cup .slushy-cup-svg .slushy-cup-liquid { transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.user-cup-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.user-cup-label {
font-family: 'Anton', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--paper-dim);
margin-bottom: 2px;
}
.user-cup-text strong {
font-family: 'Anton', sans-serif;
font-weight: 400;
font-size: 18px;
text-transform: uppercase;
color: var(--cup-color);
letter-spacing: 0.005em;
}
.user-cup-next {
font-family: 'Permanent Marker', cursive;
font-size: 13px;
color: var(--paper-dim);
margin-top: 4px;
transform: rotate(-1deg);
align-self: flex-start;
}
.user-cup-next.user-cup-maxed { color: var(--mustard); }
.user-cup-expiry {
margin-top: 6px;
display: inline-block;
align-self: flex-start;
padding: 3px 8px;
border: 1px solid var(--line-strong);
border-radius: 100px;
font-family: 'Anton', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--paper-dim);
line-height: 1.2;
}
/* ====== Spike the Slush modal ====== */
.spike-modal-panel { width: min(480px, calc(100% - 32px)); }
.spike-modal-body { padding: 32px 28px 28px; text-align: center; }
.spike-modal-body h2 {
font-size: clamp(40px, 5vw, 60px);
color: var(--paper);
margin: 6px 0 14px;
line-height: 0.9;
}
.spike-modal-body h2 + p {
color: var(--paper-dim);
line-height: 1.55;
font-weight: 500;
margin: 0 0 22px;
}
.spike-code {
display: flex;
align-items: center;
gap: 12px;
justify-content: space-between;
padding: 10px 14px;
border: 2px dashed var(--mustard);
border-radius: 12px;
background: rgba(244, 185, 66, 0.05);
margin-bottom: 14px;
}
.spike-code-label {
font-family: 'Anton', sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--paper-dim);
}
.spike-code-value {
flex: 1 1 auto;
text-align: center;
font-family: 'Anton', sans-serif;
font-size: clamp(20px, 2.4vw, 28px);
color: var(--mustard);
letter-spacing: 0.06em;
user-select: all;
}
.spike-code-copy {
background: var(--mustard);
color: var(--ink);
font-family: 'Anton', sans-serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.1em;
padding: 8px 14px;
border-radius: 100px;
cursor: pointer;
transition: transform 0.15s;
}
.spike-code-copy:hover { transform: translateY(-1px); }
.spike-code-copy.is-copied { background: var(--paper); }
.spike-aside {
font-family: 'Permanent Marker', cursive;
color: var(--paper-dim);
font-size: 13px;
margin: 0 0 24px;
transform: rotate(-1deg);
}
/* ===================================================================
Default page template (page.php) — generic wrapper for any page
without a custom Page Template. Keeps Gutenberg blocks + shortcodes
(especially WooCommerce blocks) in their natural layout.
=================================================================== */
.page-default { padding: 64px 0 96px; }
.page-default-head { margin-bottom: 32px; text-align: center; }
.page-default-title {
font-size: clamp(36px, 5vw, 72px);
line-height: 1;
margin: 0;
}
.page-default-content { font-size: 17px; line-height: 1.6; }
.page-default-content > * + * { margin-top: 18px; }
.page-default-content h2,
.page-default-content h3 {
font-family: 'Anton', sans-serif;
line-height: 1.15;
margin-top: 36px;
margin-bottom: 10px;
}
.page-default-content h2 { font-size: clamp(28px, 3vw, 40px); }
.page-default-content h3 { font-size: clamp(22px, 2.4vw, 28px); }
.page-default-content a:not(.button):not([class*="wc-block-"]):not([class*="wp-block-woocommerce-"] a) {
text-decoration: underline;
text-underline-offset: 3px;
}
/* On WC pages the cream-surface body class kicks in; the default page
wrapper inherits that automatically. WooCommerce blocks render
inside .page-default-content unwrapped, so the WC blocks stylesheet
handles its own internal layout (form ↔ sidebar 2-col flex). */
/* ===================================================================
Checkout / Cart page-template isolation zone (page-checkout.php)
Wraps the_content() — which renders the WC Block markup — and
fully reverts the theme's global resets so the WC checkout/cart
block layout reads exactly the way WC ships it.
=================================================================== */
.sb-checkout-zone {
background: var(--paper);
color: var(--ink);
padding: 56px 0 96px;
}
.sb-checkout-zone .wrap {
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
}
.sb-checkout-head { margin-bottom: 28px; }
.sb-checkout-back {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ink);
font-family: 'Anton', sans-serif;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 14px;
}
.sb-checkout-back:hover { color: var(--blood); gap: 12px; }
.sb-checkout-title {
font-size: clamp(36px, 5vw, 64px);
color: var(--ink);
margin: 0 0 8px;
line-height: 1;
}
/* Hard isolation — every descendant gets browser-default margin /
padding / box-sizing back, plus button & link defaults. This is
identical to the global WC reverts but scoped to a wrapper the
user opts in to via the page template, so even if WC's body
class is missing or a plugin strips it, the layout still works. */
.sb-wc-zone,
.sb-wc-zone * {
margin: revert;
padding: revert;
box-sizing: revert;
}
.sb-wc-zone a {
color: revert;
text-decoration: revert;
}
.sb-wc-zone button {
font: revert;
color: revert;
background: revert;
border: revert;
cursor: pointer;
}
/* Plain text bg so WC's white form panels read clearly */
.sb-wc-zone {
color: var(--ink);
font-family: 'DM Sans', system-ui, sans-serif;
}
/* Anton + brand button accent on the WC checkout/cart inside the zone */
.sb-wc-zone h1, .sb-wc-zone h2, .sb-wc-zone h3 {
font-family: 'Anton', sans-serif;
color: var(--ink);
line-height: 1.05;
letter-spacing: 0.005em;
}
.sb-wc-zone .wc-block-components-button:not(.is-link),
.sb-wc-zone .wp-element-button {
background: var(--blood) !important;
color: var(--paper) !important;
border-color: var(--blood) !important;
border-radius: 100px !important;
font-family: 'Anton', sans-serif !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
}
.sb-wc-zone .wc-block-components-button:not(.is-link):hover,
.sb-wc-zone .wp-element-button:hover {
background: var(--blood-deep) !important;
border-color: var(--blood-deep) !important;
}
/* ===================================================================
WooCommerce — Minimal brand layer
Strategy: let WooCommerce keep its native form / table / button
layout. Pages flip to a cream surface that matches the rest of the
brand, headings + buttons get the Anton voice, but the structural
CSS lives in WC's own stylesheet untouched. Anything else stays
browser-default thanks to the reverts at the top of the file.
=================================================================== */
/* Surface only — set the background but DON'T cascade text color to
the body, or the header chrome (cart pill, nav links) inherits it
and reads invisible against the dark header. The main element gets
the ink text color so the WC content reads correctly. */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.woocommerce-order-pay,
body.woocommerce-order-received {
background: var(--paper);
}
body.woocommerce-cart main,
body.woocommerce-checkout main,
body.woocommerce-account main,
body.woocommerce-order-pay main,
body.woocommerce-order-received main {
background: var(--paper);
color: var(--ink);
padding: 64px 0 96px;
}
body.woocommerce-cart .wrap,
body.woocommerce-checkout .wrap,
body.woocommerce-account .wrap,
body.woocommerce-order-pay .wrap,
body.woocommerce-order-received .wrap {
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
}
.woocommerce {
color: var(--ink);
font-family: 'DM Sans', system-ui, sans-serif;
}
.woocommerce h1, .woocommerce h2, .woocommerce h3 {
font-family: 'Anton', sans-serif;
color: var(--ink);
line-height: 1.05;
letter-spacing: 0.005em;
}
/* Anton-pill brand button on top of WC's native button shape */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #place_order {
background: var(--blood);
color: var(--paper);
border: 2px solid var(--blood);
border-radius: 100px;
font-family: 'Anton', sans-serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 12px 22px;
cursor: pointer;
text-decoration: none;
transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover {
background: var(--blood-deep);
border-color: var(--blood-deep);
color: var(--paper);
transform: translateY(-1px);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
background: var(--ink);
border-color: var(--ink);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
background: var(--ink-3);
border-color: var(--ink-3);
}
/* Inline links use brand red — only inside WC content, not body-class */
.woocommerce a:not(.button):not(.wc-block-components-button) {
color: var(--blood);
}
.woocommerce a:not(.button):hover { color: var(--blood-deep); }
/* ===================================================================
WC Blocks — Checkout sidebar (order summary card)
The sidebar lives in .wp-block-woocommerce-checkout-totals-block
on Block-based checkout (WC defaults to a dark panel that doesn't
match the brand). Pulls it onto a white card with Anton headings,
ink text, mustard total accent.
=================================================================== */
/* Constrain the main column so the sidebar has room to land beside
it instead of dropping below — matches WC's intended 60/40 split. */
.wc-block-components-sidebar-layout .wc-block-components-main {
width: 60%;
}
/* Right-rail container — sidebar styled as a clean white card with
no border, just a soft shadow + radius to keep it contained. */
.wp-block-woocommerce-checkout-totals-block,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
background: #fff;
border: 0;
border-radius: 14px;
padding: 24px;
box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.18);
color: var(--ink);
}
/* "Order summary" heading */
.wc-block-components-checkout-order-summary__title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel__button,
.wc-block-components-checkout-step__title {
font-family: 'Anton', sans-serif !important;
font-size: 22px !important;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink) !important;
line-height: 1 !important;
margin: 0 0 16px !important;
}
/* Line items */
.wc-block-components-order-summary-item {
display: grid !important;
grid-template-columns: 120px 1fr auto !important;
gap: 18px;
align-items: center;
padding: 18px 0 !important;
border-bottom: 1px solid rgba(10, 10, 12, 0.08);
}
.wc-block-components-order-summary-item:last-child { border-bottom: none; }
.wc-block-components-order-summary-item__image {
width: 120px !important;
height: 120px !important;
min-width: 120px !important;
border-radius: 12px !important;
overflow: hidden !important;
background: rgba(10, 10, 12, 0.04) !important;
position: relative !important;
margin: 0 !important;
}
.wc-block-components-order-summary-item__image > * {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
.wc-block-components-order-summary-item__image img,
.wc-block-components-order-summary-item__image picture,
.wc-block-components-order-summary-item__image picture img,
.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
display: block !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* Quantity overlay badge — small ink pill in the corner */
.wc-block-components-order-summary-item__quantity,
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
position: absolute !important;
top: 6px !important;
right: 6px !important;
transform: none !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
padding: 3px 9px !important;
background: var(--ink) !important;
color: var(--paper) !important;
border: 1.5px solid var(--paper) !important;
border-radius: 100px !important;
font-family: 'Anton', sans-serif !important;
font-size: 11px !important;
line-height: 1 !important;
letter-spacing: 0.06em;
box-shadow: 0 2px 8px -2px rgba(0,0,0,0.3);
}
/* Hide the description blurb in line items — keeps the row compact and
focused on title + qty + price. */
.wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item__description .wc-block-components-product-details {
display: none !important;
}
.wc-block-components-order-summary-item__image img,
.wc-block-components-order-summary-item__image picture > img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}
.wc-block-components-order-summary-item__quantity {
/* The little "1×" / "2×" qty badge */
background: var(--ink) !important;
color: var(--paper) !important;
border-color: var(--ink) !important;
font-family: 'Anton', sans-serif !important;
font-size: 11px !important;
letter-spacing: 0.06em;
}
.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__product-name,
.wc-block-components-product-name {
font-family: 'Anton', sans-serif !important;
text-transform: uppercase !important;
color: var(--ink) !important;
font-size: 14px !important;
letter-spacing: 0.005em;
line-height: 1.15 !important;
}
.wc-block-components-order-summary-item__total-price,
.wc-block-components-product-price,
.wc-block-components-product-metadata__description {
color: var(--ink) !important;
font-family: 'DM Sans', sans-serif !important;
font-size: 13px !important;
line-height: 1.45 !important;
}
.wc-block-components-product-metadata__description { color: rgba(10,10,12,0.65) !important; }
/* Coupon expander */
.wc-block-components-totals-coupon,
.wc-block-components-panel {
border-top: 1px solid rgba(10, 10, 12, 0.08);
border-bottom: 1px solid rgba(10, 10, 12, 0.08);
margin: 12px -8px !important;
}
.wc-block-components-totals-coupon-link,
.wc-block-components-panel__button {
color: var(--ink) !important;
font-family: 'Anton', sans-serif !important;
font-size: 14px !important;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 12px 8px !important;
}
.wc-block-components-totals-coupon-link:hover,
.wc-block-components-panel__button:hover { color: var(--blood) !important; }
/* Totals rows */
.wc-block-components-totals-wrapper,
.wc-block-components-totals-item {
border-color: rgba(10, 10, 12, 0.08) !important;
}
.wc-block-components-totals-item {
display: flex !important;
justify-content: space-between;
align-items: baseline;
padding: 10px 0 !important;
color: var(--ink) !important;
}
.wc-block-components-totals-item__label {
font-family: 'Anton', sans-serif !important;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 13px !important;
color: rgba(10, 10, 12, 0.7) !important;
}
.wc-block-components-totals-item__value {
font-family: 'Anton', sans-serif !important;
color: var(--ink) !important;
font-size: 18px !important;
letter-spacing: 0.04em;
}
/* The big "Total" row — stronger emphasis */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
font-size: 14px !important;
color: var(--ink) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-size: 28px !important;
color: var(--blood) !important;
line-height: 1;
}
.wc-block-components-totals-footer-item__tax-value {
font-family: 'DM Sans', sans-serif !important;
font-size: 12px !important;
color: rgba(10, 10, 12, 0.55) !important;
}
/* Place order button — Anton red pill matching the rest of the brand */
.wp-block-woocommerce-checkout-actions-block,
.wc-block-checkout__actions_row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
}
.wp-block-woocommerce-checkout-actions-block .wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-container .wc-block-cart__submit-button,
.wc-block-cart__submit-button {
background: var(--blood) !important;
color: var(--paper) !important;
border: 2px solid var(--blood) !important;
border-radius: 100px !important;
font-family: 'Anton', sans-serif !important;
font-size: 15px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
padding: 14px 28px !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
transition: background 0.15s, border-color 0.15s, transform 0.15s !important;
}
.wp-block-woocommerce-checkout-actions-block .wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-container .wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:hover {
background: var(--blood-deep) !important;
border-color: var(--blood-deep) !important;
transform: translateY(-1px);
}
.wc-block-cart__submit-button .wc-block-components-button__text {
font-family: 'Anton', sans-serif !important;
color: var(--paper) !important;
}
.wc-block-cart__submit-container { margin-top: 16px; }
/* "Return to cart" small link below place order */
.wc-block-components-checkout-return-to-cart-button {
color: rgba(10, 10, 12, 0.65) !important;
font-family: 'Anton', sans-serif !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
font-size: 12px !important;
}
.wc-block-components-checkout-return-to-cart-button:hover { color: var(--blood) !important; }
/* ----- Saved address card (Shipping / Billing summary) ----- */
.wc-block-components-address-card {
display: flex !important;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 16px 18px !important;
background: #fff !important;
border: 1.5px solid rgba(10, 10, 12, 0.12) !important;
border-radius: 12px !important;
margin: 0 0 16px !important;
color: var(--ink);
}
.wc-block-components-address-card address {
display: flex !important;
flex-direction: column;
gap: 4px;
font-style: normal;
line-height: 1.45;
}
.wc-block-components-address-card__address-section--primary {
font-family: 'Anton', sans-serif !important;
font-size: 16px !important;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink) !important;
}
.wc-block-components-address-card__address-section--secondary {
font-family: 'DM Sans', sans-serif !important;
font-size: 14px !important;
color: rgba(10, 10, 12, 0.7) !important;
line-height: 1.5;
}
.wc-block-components-address-card__edit {
flex-shrink: 0;
background: transparent !important;
color: var(--blood) !important;
border: 0 !important;
padding: 4px 8px !important;
font-family: 'Anton', sans-serif !important;
font-size: 12px !important;
text-transform: uppercase;
letter-spacing: 0.14em;
cursor: pointer;
transition: color 0.15s;
}
.wc-block-components-address-card__edit:hover { color: var(--blood-deep) !important; }
/* ----- Address form fields ----- */
.wc-block-components-address-form {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.wc-block-components-address-form > * { grid-column: span 1; }
.wc-block-components-address-form__country,
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__address_2,
.wc-block-components-address-form__address_2-toggle,
.wc-block-components-address-autocomplete-container,
.wc-block-components-address-form__address_2-hidden-input,
.wc-block-checkout__use-address-for-billing,
.wc-block-components-address-form .wc-block-components-text-input.wc-block-components-address-form__address_1 {
grid-column: span 2 !important;
}
/* Floating-label text input */
.wc-block-components-text-input,
.wc-blocks-components-select {
position: relative !important;
margin: 0 !important;
}
.wc-block-components-text-input input,
.wc-blocks-components-select__select {
width: 100% !important;
padding: 22px 14px 8px !important;
border: 1.5px solid rgba(10, 10, 12, 0.18) !important;
border-radius: 10px !important;
background: #fff !important;
color: var(--ink) !important;
font-family: 'DM Sans', system-ui, sans-serif !important;
font-size: 15px !important;
line-height: 1.3 !important;
box-shadow: none !important;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.wc-block-components-text-input input:hover,
.wc-blocks-components-select__select:hover {
border-color: rgba(10, 10, 12, 0.32) !important;
}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
border-color: var(--blood) !important;
outline: 0 !important;
box-shadow: 0 0 0 3px rgba(214, 32, 43, 0.18) !important;
}
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
position: absolute !important;
top: 50% !important;
left: 14px !important;
transform: translateY(-50%) !important;
font-family: 'DM Sans', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
color: rgba(10, 10, 12, 0.55) !important;
pointer-events: none;
transition: top 0.15s, font-size 0.15s, color 0.15s;
margin: 0 !important;
padding: 0 !important;
text-transform: none !important;
letter-spacing: normal !important;
background: transparent !important;
line-height: 1 !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label,
.wc-blocks-components-select__select:focus ~ .wc-blocks-components-select__label,
.wc-blocks-components-select.has-value .wc-blocks-components-select__label,
.wc-blocks-components-select__label {
top: 13px !important;
transform: translateY(0) !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
color: rgba(10, 10, 12, 0.6) !important;
font-family: 'Anton', sans-serif !important;
}
/* Select chevron */
.wc-blocks-components-select__container { position: relative; }
.wc-blocks-components-select__expand {
position: absolute !important;
right: 10px !important;
top: 50% !important;
transform: translateY(-50%);
fill: var(--ink) !important;
pointer-events: none;
width: 22px !important;
height: 22px !important;
}
/* "+ Add apartment, suite, etc." toggle */
.wc-block-components-address-form__address_2-toggle {
display: inline-block !important;
margin: 4px 0 0 !important;
padding: 6px 0 !important;
color: var(--blood) !important;
font-family: 'Anton', sans-serif !important;
font-size: 12px !important;
text-transform: uppercase;
letter-spacing: 0.14em;
cursor: pointer;
background: none !important;
border: 0 !important;
}
.wc-block-components-address-form__address_2-toggle:hover { color: var(--blood-deep) !important; }
.wc-block-components-address-form__address_2-hidden-input { display: none !important; }
/* Address autocomplete (Google Places-style) icon */
.wc-block-components-text-input__wrapper { position: relative; }
.wc-block-components-address-autocomplete-icon {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
pointer-events: none;
}
/* ----- Checkbox (Use same address for billing) ----- */
.wc-block-components-checkbox {
display: flex !important;
align-items: center;
margin: 16px 0 0 !important;
}
.wc-block-components-checkbox label {
display: inline-flex !important;
align-items: center;
gap: 10px;
cursor: pointer;
color: var(--ink);
}
.wc-block-components-checkbox__input {
appearance: none !important;
-webkit-appearance: none !important;
width: 20px !important;
height: 20px !important;
border: 1.5px solid rgba(10, 10, 12, 0.32) !important;
border-radius: 5px !important;
background: #fff !important;
cursor: pointer;
margin: 0 !important;
position: relative;
flex-shrink: 0;
transition: border-color 0.15s, background 0.15s;
}
.wc-block-components-checkbox__input:hover { border-color: var(--ink) !important; }
.wc-block-components-checkbox__input:checked {
background: var(--blood) url("data:image/svg+xml;utf8,") center/14px 12px no-repeat !important;
border-color: var(--blood) !important;
}
/* Hide WC's separate