/* ============================================================
BUBBLE HOUSE — Colors & Type foundations
"Bursting bubbles on the dancefloor."
Amsterdam house-music community platform.
------------------------------------------------------------
This file self-hosts the brand DISPLAY face (Luckybones Bold)
and loads the editorial face (Archivo) from Google Fonts.
Load Archivo BEFORE this file:
FONT NOTE: Luckybones Bold IS the Bubble House display face — the
bubbly, rounded hand-drawn lettering used in the wordmark and on the
flyers. Use it for headlines, event titles and hero statements; the
logo image remains the canonical "Bubble House" lockup.
============================================================ */
@font-face {
font-family: 'Luckybones';
src: url('fonts/Luckybones-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
/* ---------- PRIMARY PALETTE ---------- */
--bubble-pink: #F5D5EA; /* highlights, playful blocks, text-marker bars */
--dopamine-yellow:#F4F000; /* labels, artist-name markers, emphasis */
--soft-black: #111111; /* primary ink / typography */
--paper-white: #F8F7F5; /* default background */
/* ---------- SECONDARY PALETTE ---------- */
--moss-green: #A6B06A; /* Yellow House artwork, organic blobs */
--dust-blue: #AFC4D6; /* atmospheric accent */
--warm-grey: #D8D5CF; /* background texture support, dividers */
/* ---------- LIVING INK ACCENTS (recolorable wordmark) ---------- */
--poster-red: #E5203A; /* flyer text + red logo variant */
--acid-lime: #D9F36B; /* lime logo variant fill */
--ink-purple: #5B3A8C; /* drop-shadow on lime logo variant */
/* ---------- SEMANTIC SURFACES ---------- */
--bg: var(--paper-white);
--bg-warm: var(--warm-grey);
--surface: #FFFFFF; /* taped paper card */
--ink: var(--soft-black);
--ink-soft: #3A3A38; /* secondary text on paper */
--ink-mute: #8A8880; /* captions / meta */
--line: #E2DFD9; /* hairline dividers on paper */
--line-ink: #111111; /* hand-drawn ink border */
/* highlighter marker (text behind copy, like the flyers) */
--marker-pink: #F5D5EA;
--marker-yellow: #F4F000;
/* ---------- TYPE FAMILIES ---------- */
--font-display: 'Luckybones', 'Bagel Fat One', system-ui, sans-serif; /* bubbly headlines */
--font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif; /* editorial workhorse */
/* ---------- TYPE SCALE (poster-first, generous) ---------- */
--fs-display-xl: clamp(3.5rem, 12vw, 9rem); /* hero wordmark statements */
--fs-display: clamp(2.5rem, 7vw, 5rem); /* event titles */
--fs-h1: clamp(2rem, 4.5vw, 3.25rem);
--fs-h2: clamp(1.5rem, 3vw, 2.25rem);
--fs-h3: 1.375rem;
--fs-lead: 1.25rem;
--fs-body: 1.0625rem;
--fs-body-sm: 0.9375rem;
--fs-label: 0.8125rem; /* uppercase grotesque labels */
--fs-caption: 0.6875rem;
/* ---------- RHYTHM / SHAPE ---------- */
--lh-tight: 0.92;
--lh-snug: 1.08;
--lh-body: 1.6;
--tracking-label: 0.18em;
--tracking-caps: 0.06em;
--radius-tape: 2px; /* taped paper bars — almost square */
--radius-card: 14px; /* soft cards */
--radius-pill: 999px; /* buttons, chips */
--radius-blob: 46% 54% 58% 42% / 52% 44% 56% 48%; /* organic blob */
--shadow-tape: 3px 4px 0 rgba(17,17,17,0.9); /* hard offset, zine sticker */
--shadow-soft: 0 10px 30px rgba(17,17,17,0.10);
--shadow-lift: 0 16px 40px rgba(17,17,17,0.16);
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--space-9: 96px;
--maxw: 1200px;
}
/* ============================================================
SEMANTIC TYPOGRAPHY
============================================================ */
.bh-display-xl,
.bh-display,
.bh-h1, .bh-h2, .bh-h3 {
font-family: var(--font-display);
font-weight: 700; /* Luckybones Bold */
color: var(--ink);
line-height: var(--lh-tight);
letter-spacing: -0.005em;
text-wrap: balance;
}
.bh-display-xl { font-size: var(--fs-display-xl); }
.bh-display { font-size: var(--fs-display); }
.bh-h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); }
.bh-h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
.bh-h3 { font-size: var(--fs-h3); line-height: 1.15; }
/* Editorial sans — info, body, labels */
.bh-lead {
font-family: var(--font-sans); font-weight: 500;
font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-soft);
text-wrap: pretty;
}
.bh-body {
font-family: var(--font-sans); font-weight: 400;
font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft);
text-wrap: pretty;
}
.bh-body-sm {
font-family: var(--font-sans); font-weight: 400;
font-size: var(--fs-body-sm); line-height: 1.55; color: var(--ink-soft);
}
.bh-label {
font-family: var(--font-sans); font-weight: 700;
font-size: var(--fs-label); line-height: 1; color: var(--ink);
text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.bh-caption {
font-family: var(--font-sans); font-weight: 500;
font-size: var(--fs-caption); line-height: 1.3; color: var(--ink-mute);
text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
/* Event-info caps block — condensed grotesque feel (flyer voice) */
.bh-info {
font-family: var(--font-sans); font-weight: 800;
font-size: var(--fs-body); line-height: 1.25; color: var(--ink);
text-transform: uppercase; letter-spacing: 0.01em;
font-stretch: 75%; /* Archivo supports condensed */
}
/* Marker highlight behind inline text (the flyer "tape" treatment) */
.bh-mark {
background: var(--marker-yellow);
box-decoration-break: clone; -webkit-box-decoration-break: clone;
padding: 0.05em 0.28em;
}
.bh-mark--pink { background: var(--marker-pink); }