/* ============================================================
Hairy Melon — Playful overrides (shared across A & B)
Adds on top of site.css
============================================================ */
/* Hand-drawn fallback */
/* Caveat is loaded from each page ; no @import here (it blocked rendering and duplicated the request) */
/* Chinchilla loaded via Adobe Fonts (kit tyo1dth) in each page */
:root {
--playful-display: 'chinchilla', 'Anton', 'Impact', sans-serif;
--hand: 'Caveat', cursive;
}
/* Custom cursor — dialed back: hidden, native cursor used */
.cursor-dot, .cursor-ring { display: none !important; }
/* Hand-drawn squiggle underline (used inline) */
.scribble {
position: relative;
display: inline-block;
white-space: nowrap;
}
.scribble::after {
content: "";
position: absolute;
left: -2%; right: -2%; bottom: -0.12em;
height: 0.22em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-size: 100% 100%;
}
/* Hovers — squishy bounce */
.bounce-hover { transition: transform .35s cubic-bezier(.34,1.56,.64,1); transform-origin: center; will-change: transform; }
.bounce-hover:hover { transform: scale(1.04) rotate(-1deg); }
/* Wobble-on-hover for chips/buttons */
.wobble:hover { animation: wobble .5s ease; }
@keyframes wobble {
0%, 100% { transform: rotate(0); }
25% { transform: rotate(-3deg); }
50% { transform: rotate(3deg); }
75% { transform: rotate(-2deg); }
}
/* Decorative star (coral) */
.star {
display: inline-block;
width: 1em; height: 1em;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain; background-repeat: no-repeat;
}
/* Squiggle line svg helper */
.squiggle-line {
display: inline-block;
width: 100%; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* Asterisk decoration */
.asterisk {
display: inline-flex; align-items: center; justify-content: center;
color: var(--coral);
font-family: 'Newsreader', serif;
font-style: italic;
font-weight: 400;
line-height: 0.6;
}
/* Sticker (used in Direction B) */
.sticker {
display: inline-flex; align-items: center; justify-content: center;
padding: 10px 18px;
background: var(--coral); color: var(--cream);
border-radius: 999px;
font-family: 'Archivo', sans-serif; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; font-size: 11px;
box-shadow: 0 6px 0 rgba(168,52,56,0.35);
transform: rotate(-4deg);
transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.sticker:hover { transform: rotate(4deg) scale(1.06); }
.sticker.hand { font-family: var(--hand); font-size: 22px; letter-spacing: 0; text-transform: none; padding: 8px 18px; line-height: 1; }
/* Washi-tape strip */
.tape {
position: absolute;
width: 90px; height: 22px;
background: rgba(200, 69, 74, 0.55);
background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 4px, transparent 4px 10px);
border-left: 2px dashed rgba(255,255,255,0.25);
border-right: 2px dashed rgba(255,255,255,0.25);
pointer-events: none;
}
/* Polaroid frame */
.polaroid {
background: var(--cream);
padding: 12px 12px 36px;
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.polaroid .caption {
text-align: center;
font-family: var(--hand);
font-size: 22px;
color: var(--ink);
line-height: 1;
margin-top: 16px;
}
/* "Big condensed" display headline */
.bigword {
font-family: var(--playful-display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: -0.005em;
line-height: 0.88;
}
/* Direction-A nav tweak: bolder coral active */
.nav-link.active { color: var(--coral); }
/* Unified marquee typography — one treatment on every page */
.playful .marquee-track > span {
font-family: var(--playful-display);
text-transform: uppercase;
letter-spacing: -0.005em;
font-size: 44px;
font-weight: 400;
}
.playful .marquee-track > span .it {
font-family: 'Newsreader', serif;
text-transform: none;
font-style: italic;
color: var(--coral-soft);
letter-spacing: 0;
}
/* Product-card set eyebrow — set name lives here, card title is the colourway */
.playful .pcard .set-label {
margin-top: 16px;
padding: 0 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.playful .pcard .set-label + .caption-row { margin-top: 6px; }
/* Product-card hover swap — tee front → shorts (reveals the full set) */
.playful .pcard .pic .prod-img.alt { opacity: 0; transition: opacity .35s ease; }
.playful .pcard:hover .pic .prod-img.alt,
.playful .pcard a:focus-visible .pic .prod-img.alt { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.playful .pcard .pic .prod-img.alt { transition: none; }
}
/* Gallery thumbnails are now