/* ==========================================================================
Bibiballoonz — Design Tokens
Source of truth for color, type, shadow, radius, and spacing.
Pair with THEME.md for usage rules. Import this before any component CSS.
Fonts (add to or @import in your bundler):
https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap
========================================================================== */
:root{
/* ---------- Color ---------- */
--ink: #211D2E; /* text / outlines / shadows */
--paper: #FFF9F2; /* page background */
--paper-2: #FBEFE0; /* alternate section background */
--white: #FFFFFF;
--pink: #FF3E8C; /* primary accent */
--pink-dark: #E11F70; /* pink hover/active */
--sky: #38C6F4; /* secondary accent */
--sky-dark: #1BA9D8;
--sun: #FFD639; /* tertiary accent — always pair with --ink text, not white */
--sun-dark: #F0C300;
--grape: #8B6BF2; /* fourth accent, used sparingly */
--muted: #6E6880; /* secondary text on paper */
/* ---------- Type ---------- */
--font-display: 'Fredoka', sans-serif;
--font-body: 'Plus Jakarta Sans', sans-serif;
--fs-h1: clamp(2.25rem, 5vw, 4rem);
--fs-h2: clamp(1.75rem, 3.4vw, 2.625rem);
--fs-h3: clamp(1.25rem, 2vw, 1.5rem);
--fs-body: 1rem;
--fs-caption: 0.8125rem;
--lh-display: 1.08;
--lh-body: 1.65;
/* ---------- Shape ---------- */
--border-w: 3px;
--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 28px;
--radius-pill: 999px;
/* ---------- Shadow (hard offset, no blur — the signature) ---------- */
--shadow-lg: 6px 6px 0 var(--ink);
--shadow-sm: 4px 4px 0 var(--ink);
--shadow-xs: 2px 2px 0 var(--ink);
/* ---------- Spacing ---------- */
--space-unit: 8px;
--section-pad-desktop: 112px;
--section-pad-mobile: 60px;
}
/* ==========================================================================
Base
========================================================================== */
body{
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
/* Grayscale AA — prevents subpixel color fringing/ghosting on text that
sits over the dot-grid hero backgrounds. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,.font-display{
font-family: var(--font-display);
font-weight: 700;
line-height: var(--lh-display);
margin: 0;
}
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }
.text-muted{ color: var(--muted); }
section, .section{ padding: var(--section-pad-desktop) 0; }
@media (max-width: 700px){
section, .section{ padding: var(--section-pad-mobile) 0; }
}
.section-alt{ background: var(--paper-2); }
.section-ink{ background: var(--ink); color: var(--paper); }
.section-ink h1, .section-ink h2, .section-ink h3{ color: var(--white); }
/* ==========================================================================
Eyebrow label (small caps label above section headings)
========================================================================== */
.eyebrow{
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.8125rem;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 12px;
}
.eyebrow--pink{ color: var(--pink); }
.eyebrow--sky{ color: var(--sky); }
.eyebrow--sun{ color: var(--sun-dark); }
/* ==========================================================================
Highlight marker (colored block behind key headline words)
========================================================================== */
.mark{
display: inline-block;
border: var(--border-w) solid var(--ink);
box-shadow: var(--shadow-sm);
padding: 2px 14px 6px;
transform: rotate(-1deg);
}
.mark--pink{ background: var(--pink); color: var(--white); }
.mark--sky{ background: var(--sky); color: var(--ink); }
.mark--sun{ background: var(--sun); color: var(--ink); }
/* ==========================================================================
Buttons — pill shaped, hard offset shadow, press-down interaction
========================================================================== */
.btn{
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-weight: 600;
font-size: 1rem;
padding: 14px 28px;
border: var(--border-w) solid var(--ink);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-sm);
cursor: pointer;
white-space: nowrap;
transition: transform .12s ease, box-shadow .12s ease;
text-decoration: none;
}
.btn:hover{ transform: translate(2px,2px); box-shadow: var(--shadow-xs); }
.btn:active{ transform: translate(4px,4px); box-shadow: 0 0 0 var(--ink); }
.btn--primary{ background: var(--pink); color: var(--white); }
.btn--secondary{ background: var(--white); color: var(--ink); }
.btn--sky{ background: var(--sky); color: var(--ink); }
.btn--sun{ background: var(--sun); color: var(--ink); } /* never white text on sun */
.btn--ghost{ background: transparent; color: var(--ink); box-shadow: none; }
.btn--sm{ padding: 10px 20px; font-size: 0.875rem; }
/* ==========================================================================
Cards
========================================================================== */
.card{
background: var(--white);
border: var(--border-w) solid var(--ink);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 28px;
}
.card--alt{ background: var(--paper-2); }
.card--pink{ background: var(--pink); color: var(--white); }
.card--sky{ background: var(--sky); color: var(--ink); }
.card--sun{ background: var(--sun); color: var(--ink); }
.card--featured{ box-shadow: var(--shadow-lg); }
/* ==========================================================================
Badges / tags
========================================================================== */
.badge{
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.75rem;
padding: 6px 14px;
border: 2px solid var(--ink);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-xs);
}
.badge--pink{ background: var(--pink); color: var(--white); }
.badge--sky{ background: var(--sky); color: var(--ink); }
.badge--sun{ background: var(--sun); color: var(--ink); }
.badge--grape{ background: var(--grape); color: var(--white); }
/* ==========================================================================
Step badge (for "how booking works" numbered steps)
========================================================================== */
.step-badge{
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: var(--border-w) solid var(--ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.step-badge .step-num{
position: absolute;
top: -14px; left: -14px;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--white);
border: 2px solid var(--ink);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.8125rem;
}
/* ==========================================================================
Decorative shapes — floating balloon / confetti motifs
Use sparingly, background layer only, never over content.
========================================================================== */
.shape-balloon{
position: absolute;
border-radius: 50%;
border: var(--border-w) solid var(--ink);
}
.shape-balloon::after{ /* string */
content: '';
position: absolute;
left: 50%;
top: 100%;
width: 2px;
height: 40px;
background: var(--ink);
transform: translateX(-50%);
}
.shape-confetti-dot{
position: absolute;
border-radius: 50%;
opacity: 0.9;
}
/* Confetti dot-grid background (subtle, for hero/section backdrops) */
.bg-confetti{
background-image: radial-gradient(var(--ink) 1.2px, transparent 1.2px);
background-size: 24px 24px;
background-color: var(--paper);
}
/* ==========================================================================
Balloon Arch Divider — the signature element
Drop this SVG (or similar) between major sections instead of a plain
.
Colors cycle pink/sky/sun/grape; keep stroke = var(--ink) at 3px.
Usage: ...
containing an inline SVG.
========================================================================== */
.arch-divider{
display: flex;
justify-content: center;
margin: 0;
line-height: 0;
}
/* ==========================================================================
Utility
========================================================================== */
.container{ max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.text-center{ text-align: center; }
.rounded-pill{ border-radius: var(--radius-pill); }