The Whole Weird Crew — Conversation Cards
/* ─── TOKENS ─────────────────────────────────────────── */
:root {
–coral: #FF4F2B;
–orange: #FF8A1E;
–yellow: #FFE04A;
–cream: #FFF8ED;
–ink: #1C1108;
–white: #FFFFFF;
–r: 14px;
–rcard: 18px;
}
/* ─── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: ‘DM Sans’, sans-serif;
background: var(–cream);
color: var(–ink);
overflow-x: hidden;
cursor: none;
}
/* ─── CUSTOM CURSOR ──────────────────────────────────── */
.cursor {
position: fixed;
width: 14px; height: 14px;
background: var(–coral);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width 0.15s, height 0.15s, background 0.15s;
mix-blend-mode: multiply;
}
.cursor.big { width: 40px; height: 40px; background: var(–yellow); }
/* ─── NOISE OVERLAY ──────────────────────────────────── */
body::before {
content: ”;
position: fixed;
inset: 0;
background-image: url(“data:image/svg+xml,%3Csvg viewBox=’0 0 256 256′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cfilter id=’noise’%3E%3CfeTurbulence type=’fractalNoise’ baseFrequency=’0.9′ numOctaves=’4′ stitchTiles=’stitch’/%3E%3C/filter%3E%3Crect width=’100%25′ height=’100%25′ filter=’url(%23noise)’ opacity=’0.035’/%3E%3C/svg%3E”);
pointer-events: none;
z-index: 9990;
opacity: 0.6;
}
/* ─── PAGES ──────────────────────────────────────────── */
.page { display: none; min-height: 100vh; }
.page.active { display: block; }
/* ─── NAV ────────────────────────────────────────────── */
nav {
position: sticky;
top: 0;
z-index: 100;
background: var(–coral);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 clamp(24px, 5vw, 64px);
height: 64px;
border-bottom: 2.5px solid var(–ink);
}
.nav-logo {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: 17px;
font-weight: 800;
color: var(–white);
letter-spacing: -0.02em;
cursor: pointer;
}
.nav-links {
display: flex;
gap: 8px;
list-style: none;
}
.nav-links li button {
background: none;
border: none;
font-family: ‘DM Sans’, sans-serif;
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,0.75);
cursor: pointer;
padding: 6px 14px;
border-radius: 100px;
transition: background 0.15s, color 0.15s;
letter-spacing: 0.01em;
}
.nav-links li button:hover,
.nav-links li button.active {
background: rgba(255,255,255,0.18);
color: white;
}
.nav-cta {
background: var(–yellow) !important;
color: var(–ink) !important;
font-weight: 700 !important;
border: 2px solid var(–ink) !important;
}
.nav-cta:hover { background: var(–white) !important; }
/* ─── BLOB SHAPES ────────────────────────────────────── */
.blob {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════
HOME PAGE
═══════════════════════════════════════════════════════ */
#home {}
/* HERO */
.hero {
background: var(–coral);
position: relative;
overflow: hidden;
padding: clamp(60px, 10vh, 100px) clamp(24px, 5vw, 80px);
min-height: calc(100vh – 64px);
display: flex;
align-items: center;
border-bottom: 3px solid var(–ink);
}
.hero .blob-1 {
width: clamp(300px, 50vw, 600px);
height: clamp(300px, 50vw, 600px);
background: var(–orange);
top: -120px; right: -80px;
opacity: 0.55;
}
.hero .blob-2 {
width: clamp(200px, 30vw, 380px);
height: clamp(200px, 30vw, 380px);
background: var(–yellow);
bottom: -80px; left: 5%;
opacity: 0.4;
}
.hero .blob-3 {
width: 160px; height: 160px;
background: var(–white);
top: 20%; left: 40%;
opacity: 0.06;
}
.hero-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr auto;
gap: clamp(32px, 6vw, 80px);
align-items: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.hero-text { display: flex; flex-direction: column; gap: 24px; }
.hero-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.15);
border: 1.5px solid rgba(255,255,255,0.3);
backdrop-filter: blur(6px);
padding: 7px 16px;
border-radius: 100px;
font-family: ‘Space Mono’, monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
width: fit-content;
}
.hero-pill .dot { width: 6px; height: 6px; background: var(–yellow); border-radius: 50%; }
.hero-h1 {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: clamp(52px, 8vw, 96px);
font-weight: 800;
color: var(–white);
line-height: 0.95;
letter-spacing: -0.04em;
}
.hero-h1 em {
font-style: italic;
font-family: ‘Instrument Serif’, serif;
font-weight: 400;
color: var(–yellow);
}
.hero-tagline {
font-family: ‘Instrument Serif’, serif;
font-size: clamp(18px, 2.5vw, 24px);
font-style: italic;
color: rgba(255,255,255,0.82);
max-width: 420px;
line-height: 1.45;
}
.hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.btn-primary {
background: var(–white);
color: var(–coral);
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 15px 32px;
border: 2.5px solid var(–ink);
border-radius: 6px;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
box-shadow: 4px 4px 0 var(–ink);
}
.btn-primary:hover { background: var(–yellow); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(–ink); }
.btn-ghost {
background: none;
border: none;
color: rgba(255,255,255,0.7);
font-family: ‘DM Sans’, sans-serif;
font-size: 14px;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
padding: 4px 0;
}
.btn-ghost:hover { color: white; }
/* CARD STACK in hero */
.hero-cards {
position: relative;
width: clamp(200px, 28vw, 280px);
height: clamp(300px, 40vw, 380px);
flex-shrink: 0;
}
.hcard {
position: absolute;
width: clamp(160px, 22vw, 220px);
background: var(–white);
border: 2.5px solid var(–ink);
border-radius: var(–rcard);
padding: 22px 20px 28px;
box-shadow: 5px 5px 0 var(–ink);
}
.hcard-back {
background: var(–ink);
width: clamp(160px, 22vw, 220px);
height: clamp(210px, 30vw, 300px);
border-radius: var(–rcard);
border: 2.5px solid var(–ink);
box-shadow: 5px 5px 0 rgba(0,0,0,0.35);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hcard-back img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: calc(var(–rcard) – 4px);
}
/* Placeholder card back pattern */
.hcard-back-placeholder {
width: 100%; height: 100%;
background: var(–ink);
border-radius: calc(var(–rcard) – 4px);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 6px;
position: relative;
overflow: hidden;
}
.hcard-back-placeholder::before {
content: ”;
position: absolute;
inset: 0;
background: repeating-linear-gradient(
45deg,
rgba(255,78,43,0.08) 0px,
rgba(255,78,43,0.08) 1px,
transparent 1px,
transparent 12px
);
}
.hcard-back-placeholder .back-logo {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
z-index: 1;
text-align: center;
padding: 0 16px;
}
.hcard-back-placeholder .back-mark {
width: 40px; height: 40px;
border: 2px solid rgba(255,78,43,0.4);
border-radius: 50%;
z-index: 1;
}
.hcard:nth-child(1) { top: 0; left: 0; transform: rotate(-6deg); z-index: 1; }
.hcard:nth-child(2) { top: 20px; left: 16px; transform: rotate(2deg); z-index: 2; }
.hcard:nth-child(3) { top: 50px; left: 8px; transform: rotate(-1deg); z-index: 3; }
.hcard-cat {
font-family: ‘Space Mono’, monospace;
font-size: 8px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(–coral);
margin-bottom: 10px;
}
.hcard-text {
font-family: ‘Instrument Serif’, serif;
font-size: 14px;
font-style: italic;
color: var(–ink);
line-height: 1.5;
}
/* MARQUEE STRIP */
.marquee-strip {
background: var(–yellow);
border-top: 2.5px solid var(–ink);
border-bottom: 2.5px solid var(–ink);
padding: 12px 0;
overflow: hidden;
white-space: nowrap;
}
.marquee-track {
display: inline-flex;
animation: marquee 22s linear infinite;
gap: 0;
}
.marquee-track span {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(–ink);
padding: 0 24px;
}
.marquee-track .sep {
color: var(–coral);
padding: 0 4px;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* FEATURES GRID */
.features {
padding: clamp(60px, 8vh, 100px) clamp(24px, 5vw, 80px);
max-width: 1200px;
margin: 0 auto;
}
.section-eyebrow {
font-family: ‘Space Mono’, monospace;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–coral);
margin-bottom: 16px;
}
.section-title {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
color: var(–ink);
line-height: 1.1;
letter-spacing: -0.03em;
margin-bottom: 48px;
}
.section-title em {
font-style: italic;
font-family: ‘Instrument Serif’, serif;
font-weight: 400;
color: var(–coral);
}
.feat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}
.feat-card {
background: var(–white);
border: 2.5px solid var(–ink);
border-radius: var(–r);
padding: 32px 28px;
box-shadow: 4px 4px 0 var(–ink);
transition: transform 0.15s, box-shadow 0.15s;
}
.feat-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(–ink); }
.feat-icon {
width: 44px; height: 44px;
border-radius: 10px;
margin-bottom: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
border: 2px solid var(–ink);
}
.feat-card h3 {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
letter-spacing: -0.02em;
}
.feat-card p {
font-size: 14px;
line-height: 1.65;
color: #555;
}
/* CARD PREVIEW SECTION */
.card-preview {
background: var(–ink);
padding: clamp(60px, 8vh, 100px) clamp(24px, 5vw, 80px);
border-top: 3px solid var(–ink);
border-bottom: 3px solid var(–ink);
overflow: hidden;
position: relative;
}
.card-preview .blob {
background: var(–coral);
opacity: 0.12;
width: 500px; height: 500px;
top: -100px; right: -100px;
}
.card-preview-inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.card-preview .section-eyebrow { color: var(–yellow); }
.card-preview .section-title { color: var(–white); }
.card-preview .section-title em { color: var(–orange); }
.cards-scroll {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.preview-card {
background: var(–white);
border: 2.5px solid rgba(255,255,255,0.15);
border-radius: var(–rcard);
padding: 24px 20px 28px;
width: 200px;
flex-shrink: 0;
transition: transform 0.2s;
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.preview-card:hover { transform: translateY(-6px) rotate(-1deg); }
.preview-card .pcat {
font-family: ‘Space Mono’, monospace;
font-size: 8px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 12px;
padding: 4px 8px;
border-radius: 4px;
display: inline-block;
}
.preview-card .ptext {
font-family: ‘Instrument Serif’, serif;
font-size: 14px;
font-style: italic;
color: var(–ink);
line-height: 1.55;
}
/* QUOTE BAND */
.quote-band {
background: var(–orange);
padding: clamp(48px, 8vw, 80px) clamp(24px, 5vw, 80px);
border-bottom: 3px solid var(–ink);
text-align: center;
}
.quote-band blockquote {
font-family: ‘Instrument Serif’, serif;
font-size: clamp(22px, 4vw, 40px);
font-style: italic;
color: var(–white);
max-width: 800px;
margin: 0 auto 20px;
line-height: 1.35;
}
.quote-band cite {
font-family: ‘Space Mono’, monospace;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
}
/* ═══════════════════════════════════════════════════════
ABOUT PAGE
═══════════════════════════════════════════════════════ */
.about-hero {
background: var(–yellow);
padding: clamp(60px, 8vh, 100px) clamp(24px, 5vw, 80px);
border-bottom: 3px solid var(–ink);
position: relative;
overflow: hidden;
}
.about-hero .blob { background: var(–orange); opacity: 0.3; width: 400px; height: 400px; top: -80px; right: -60px; }
.about-hero-inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
.about-hero h1 {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: clamp(40px, 6vw, 72px);
font-weight: 800;
color: var(–ink);
line-height: 1.0;
letter-spacing: -0.04em;
}
.about-hero h1 em {
font-style: italic;
font-family: ‘Instrument Serif’, serif;
font-weight: 400;
}
.about-hero p {
font-size: clamp(15px, 1.8vw, 18px);
line-height: 1.7;
color: rgba(28,17,8,0.75);
margin-top: 20px;
}
.about-right {
display: flex;
flex-direction: column;
gap: 16px;
}
.stat-card {
background: var(–white);
border: 2.5px solid var(–ink);
border-radius: var(–r);
padding: 20px 24px;
box-shadow: 4px 4px 0 var(–ink);
display: flex;
align-items: baseline;
gap: 12px;
}
.stat-num {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: 40px;
font-weight: 800;
color: var(–coral);
letter-spacing: -0.04em;
line-height: 1;
}
.stat-label {
font-family: ‘DM Sans’, sans-serif;
font-size: 14px;
color: #555;
line-height: 1.4;
}
.about-body {
max-width: 1200px;
margin: 0 auto;
padding: clamp(60px, 8vh, 100px) clamp(24px, 5vw, 80px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 100px);
}
.about-section h2 {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: clamp(22px, 3vw, 30px);
font-weight: 800;
letter-spacing: -0.03em;
margin-bottom: 16px;
}
.about-section p {
font-size: 15px;
line-height: 1.75;
color: #444;
margin-bottom: 14px;
}
.about-section p strong {
color: var(–coral);
font-weight: 600;
}
.categories-section {
padding: clamp(40px, 6vh, 80px) clamp(24px, 5vw, 80px);
background: var(–coral);
border-top: 3px solid var(–ink);
border-bottom: 3px solid var(–ink);
}
.categories-section .section-eyebrow { color: var(–yellow); }
.categories-section .section-title { color: var(–white); margin-bottom: 36px; }
.cat-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.cat-tile {
background: rgba(255,255,255,0.12);
border: 1.5px solid rgba(255,255,255,0.25);
backdrop-filter: blur(8px);
border-radius: var(–r);
padding: 22px 20px;
transition: background 0.15s;
}
.cat-tile:hover { background: rgba(255,255,255,0.2); }
.cat-num {
font-family: ‘Space Mono’, monospace;
font-size: 9px;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.5);
margin-bottom: 8px;
}
.cat-name {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: 16px;
font-weight: 700;
color: var(–white);
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.cat-desc {
font-size: 13px;
color: rgba(255,255,255,0.7);
line-height: 1.5;
}
/* ═══════════════════════════════════════════════════════
ORDER PAGE
═══════════════════════════════════════════════════════ */
.order-hero {
background: var(–coral);
padding: clamp(60px, 8vh, 100px) clamp(24px, 5vw, 80px);
border-bottom: 3px solid var(–ink);
position: relative;
overflow: hidden;
text-align: center;
}
.order-hero .blob-1 { background: var(–orange); opacity: 0.45; width: 500px; height: 500px; top: -150px; right: -100px; }
.order-hero .blob-2 { background: var(–yellow); opacity: 0.35; width: 350px; height: 350px; bottom: -100px; left: -60px; }
.order-hero-inner {
position: relative; z-index: 1;
max-width: 700px; margin: 0 auto;
display: flex; flex-direction: column; gap: 20px; align-items: center;
}
.order-hero h1 {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: clamp(44px, 7vw, 80px);
font-weight: 800;
color: var(–white);
line-height: 1.0;
letter-spacing: -0.04em;
}
.order-hero h1 em {
font-style: italic;
font-family: ‘Instrument Serif’, serif;
font-weight: 400;
color: var(–yellow);
}
.order-hero p {
font-family: ‘Instrument Serif’, serif;
font-size: clamp(16px, 2vw, 20px);
font-style: italic;
color: rgba(255,255,255,0.82);
max-width: 480px;
line-height: 1.5;
}
.order-body {
max-width: 900px;
margin: 0 auto;
padding: clamp(60px, 8vh, 100px) clamp(24px, 5vw, 80px);
display: flex;
flex-direction: column;
gap: 48px;
}
.product-box {
background: var(–white);
border: 2.5px solid var(–ink);
border-radius: 20px;
overflow: hidden;
box-shadow: 6px 6px 0 var(–ink);
display: grid;
grid-template-columns: 1fr 1fr;
}
.product-visual {
background: var(–coral);
display: flex;
align-items: center;
justify-content: center;
padding: 48px 36px;
position: relative;
overflow: hidden;
border-right: 2.5px solid var(–ink);
}
.product-visual::before {
content: ”;
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 30%, var(–orange) 0%, transparent 65%);
opacity: 0.6;
}
.product-card-stack {
position: relative;
width: 160px;
height: 220px;
z-index: 1;
}
.pcs-card {
position: absolute;
width: 150px;
background: var(–white);
border: 2.5px solid var(–ink);
border-radius: 14px;
padding: 18px 16px;
box-shadow: 4px 4px 0 rgba(0,0,0,0.25);
}
.pcs-card:nth-child(1) { transform: rotate(-8deg); top: 0; left: 0; }
.pcs-card:nth-child(2) { transform: rotate(3deg); top: 16px; left: 8px; }
.pcs-back {
position: absolute;
width: 150px;
height: 200px;
background: var(–ink);
border: 2.5px solid var(–ink);
border-radius: 14px;
box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
transform: rotate(-4deg);
top: 30px; left: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.pcs-back img {
width: 100%; height: 100%;
object-fit: cover;
}
.pcs-back-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 8px;
background: var(–ink);
position: relative;
overflow: hidden;
}
.pcs-back-placeholder::before {
content: ”;
position: absolute; inset: 0;
background: repeating-linear-gradient(
45deg,
rgba(255,78,43,0.1) 0px, rgba(255,78,43,0.1) 1px,
transparent 1px, transparent 10px
);
}
.pcs-back-placeholder .bp-text {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: 9px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255,255,255,0.25); z-index: 1;
text-align: center; padding: 0 12px;
}
.product-info {
padding: 40px 40px 44px;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
}
.product-info h2 {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: 28px;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
}
.product-info h2 em {
font-style: italic;
font-family: ‘Instrument Serif’, serif;
font-weight: 400;
color: var(–coral);
}
.product-meta {
display: flex; gap: 10px; flex-wrap: wrap;
}
.meta-chip {
background: #f5f0e8;
border: 1.5px solid #e0d8cc;
border-radius: 100px;
padding: 5px 12px;
font-family: ‘Space Mono’, monospace;
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #888;
}
.product-price {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: 36px;
font-weight: 800;
color: var(–coral);
letter-spacing: -0.04em;
}
.product-desc {
font-size: 14px;
line-height: 1.7;
color: #555;
}
.btn-order {
background: var(–coral);
color: var(–white);
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 17px 36px;
border: 2.5px solid var(–ink);
border-radius: 8px;
cursor: pointer;
box-shadow: 4px 4px 0 var(–ink);
transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
width: 100%;
}
.btn-order:hover { background: var(–ink); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(–ink); }
.faq {
display: flex; flex-direction: column; gap: 0;
}
.faq h2 {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: clamp(22px, 3vw, 32px);
font-weight: 800;
letter-spacing: -0.03em;
margin-bottom: 24px;
}
.faq-item {
border-top: 2px solid var(–ink);
padding: 20px 0;
}
.faq-item:last-child { border-bottom: 2px solid var(–ink); }
.faq-q {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.faq-q::after {
content: ‘+’;
font-size: 20px;
font-weight: 300;
color: var(–coral);
flex-shrink: 0;
transition: transform 0.2s;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
font-size: 14px;
line-height: 1.75;
color: #555;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding-top 0.3s;
}
.faq-item.open .faq-a { max-height: 200px; padding-top: 14px; }
/* ─── FOOTER ─────────────────────────────────────────── */
footer {
background: var(–ink);
padding: 40px clamp(24px, 5vw, 80px);
border-top: 3px solid var(–ink);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.footer-logo {
font-family: ‘Bricolage Grotesque’, sans-serif;
font-size: 16px;
font-weight: 800;
color: var(–white);
letter-spacing: -0.02em;
}
.footer-note {
font-family: ‘Space Mono’, monospace;
font-size: 10px;
color: rgba(255,255,255,0.3);
letter-spacing: 0.1em;
}
/* ─── ANIMATIONS ─────────────────────────────────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.55s cubic-bezier(0.22,1,0.36,1) both; }
.fd-1 { animation-delay: 0.05s; }
.fd-2 { animation-delay: 0.15s; }
.fd-3 { animation-delay: 0.25s; }
.fd-4 { animation-delay: 0.38s; }
.fd-5 { animation-delay: 0.5s; }
/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 700px) {
.hero-inner { grid-template-columns: 1fr; }
.hero-cards { display: none; }
.about-hero-inner { grid-template-columns: 1fr; }
.about-body { grid-template-columns: 1fr; }
.product-box { grid-template-columns: 1fr; }
.product-visual { border-right: none; border-bottom: 2.5px solid var(–ink); height: 260px; }
.nav-links li:not(:last-child) { display: none; }
}
The whole
weird
crew.
For all the parts that didn’t come with a manual.
“Hi, I’m the part that googles symptoms at 2am. I contain multitudes.”
“This one’s been clocking overtime since 1994. Give it a minute.”
Weird Crew
54 Conversation Prompts✦
Snarky But Sincere✦
No Self-Helpy-Ness✦
For The Whole Weird Crew✦
Therapy-Adjacent✦
IFS-Grounded✦
54 Conversation Prompts✦
Snarky But Sincere✦
No Self-Helpy-Ness✦
For The Whole Weird Crew✦
Therapy-Adjacent✦
Comedy is the entry point.
Insight sneaks in the back.
IFS-Grounded
Rooted in Internal Family Systems psychology. Every card acknowledges a real part of you — without making you feel like a case study.
Actually Funny
The humor isn’t decoration — it’s the delivery mechanism. Because you’ll only read something twice if it made you laugh the first time.
Post-Traumatic Growth
Backed by mindfulness and resilience science. These aren’t toxic positivity. They’re honest, warm dispatches from the other side.
Strangely Relatable
Written to work for everyone in the room at once — a 10-year-old and a 45-year-old can read the same card and both feel like it was written for them.
A few dispatches
from the crew.
“The part of you that’s been running the defense since 1997 deserves a little credit.”
“That’s not anxiety. That’s a very loyal sentinel who has kept you safe in some genuinely difficult weather.”
“You’ve survived 100% of your worst days so far. The membership is paying off.”
“Curiosity over judgment. (Even about the judgment. Even about the curiosity.)”
“This one showed up before you could ask it to. That’s not a bug. That’s a really devoted part.”
“Our parts aren’t problems to be fixed. They’re the whole weird crew that got you here.”
The philosophy behind the deck
For every
part that
showed up
uninvited.
This deck started as a question: what would it look like if psychological concepts felt like dinner table conversation instead of therapy homework?
The cards are grounded in Internal Family Systems (IFS), a framework that understands the mind as a system of distinct “parts” — each with its own history, its own job, and its own very strong opinions. There’s also a thread of mindfulness practice running through, and a quiet backbone of post-traumatic growth research, which is essentially the science of how humans actually come back from hard things.
None of that shows up on the front of the cards. What shows up instead is something true, slightly funny, and maybe a little too accurate for comfort.
The deck was designed to work for everyone in the room at once — a 10-year-old and a 45-year-old can read the same card and both feel like it was written for them.
Draw one. See what it brings up.
The philosophy
Internal Family Systems (IFS) is a therapeutic model that understands the mind as a system of distinct “parts” — each with its own role, history, and intention. The anxious part. The inner critic. The one that deflects with humor. The one that shuts down.
None of these parts are wrong. None of them are broken. They’re adaptive — they showed up for a reason. The Whole Weird Crew gives each one a moment of recognition, without being weird about it.
The register
Comedy is the entry point. Insight is the payload. These cards are not going to tell you to “manifest” anything or “choose joy.” They’re going to meet you exactly where you are and say something true in a way that might make you laugh before you realize you’re crying.
The tonal model is Affirmators! by Knock Knock: snarky, sincere, second-person, and warm in a way that earns it — through the joke, not despite it.
Every part
has a seat.
Order
yours.
54 cards for every part of you that showed up without an instruction manual.
“You’ve survived 100% of your worst days so far.”
“Hi. We’ve been here the whole time.”
Weird Crew™
The Whole
Weird Crew
Plot twist: the parts of us that are hardest to live with are also our hardest working. The Whole Weird Crew is 54 cards for every person in your family and every part inside each of them — the part that locks in a dinner plan three months out, because “good at planning” sounds way better than “trying to control the universe” — the part that still remembers how you broke their favourite mug in first grade, because someone in this family has to — and the part that holds it all together so quietly that nobody thinks to say thank you, because that’s just what it does. Sound familiar? Understanding our own weird parts turns out to be surprisingly good practice for understanding everyone else’s.
Got questions?
Your anxious part probably does.
/* Cursor */
const cursor = document.getElementById(‘cursor’);
document.addEventListener(‘mousemove’, e => {
cursor.style.left = e.clientX + ‘px’;
cursor.style.top = e.clientY + ‘px’;
});
document.querySelectorAll(‘button, a, .faq-q, .feat-card, .preview-card, .cat-tile’).forEach(el => {
el.addEventListener(‘mouseenter’, () => cursor.classList.add(‘big’));
el.addEventListener(‘mouseleave’, () => cursor.classList.remove(‘big’));
});
/* Navigation */
function showPage(id) {
document.querySelectorAll(‘.page’).forEach(p => p.classList.remove(‘active’));
document.getElementById(id).classList.add(‘active’);
document.querySelectorAll(‘.nav-links button’).forEach(b => b.classList.remove(‘active’));
const nb = document.getElementById(‘nav-‘ + id);
if (nb) nb.classList.add(‘active’);
window.scrollTo(0, 0);
}
/* FAQ */
function toggleFaq(el) {
const item = el.parentElement;
const wasOpen = item.classList.contains(‘open’);
document.querySelectorAll(‘.faq-item’).forEach(i => i.classList.remove(‘open’));
if (!wasOpen) item.classList.add(‘open’);
}
The Whole Weird Crew - Conversation Cards 