/* =====================================================================
British Craft Club
Editorial-craft aesthetic: cream paper, hand-drawn marks, polaroid
photos, speech-bubble callouts, asymmetric scrapbook layouts.
===================================================================== */
/* ---- 1. FONTS ---------------------------------------------------------
All headings: Intro Rust (Lizzie's official file — heavy solid block,
includes Cyrillic so EN and BG share the same heading face).
Body: Glacial Indifference Regular + Bold (Lizzie's official files,
also Cyrillic-capable).
Annotation: Caveat (Google Fonts) — handwritten flavour for inline marks. */
@font-face {
font-family: "Intro Rust";
src: url("../fonts/IntroRust.otf") format("opentype");
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Glacial Indifference";
src: url("../fonts/GlacialIndifference-Regular.otf") format("opentype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Glacial Indifference";
src: url("../fonts/GlacialIndifference-Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Caveat (handwritten annotation face) is now loaded via a in each
* page's , not @import here — moves the request out of the CSS
* critical path and lets the browser parallelise the font download. */
/* ---- 2. DESIGN TOKENS -------------------------------------------------- */
:root {
/* Palette — exact sampled values, do not eyeball */
--color-cream: #FEFAF6;
--color-cream-deep: #F5EDE2;
--color-cream-darker: #EDDFCC;
--color-coral: #EC635F;
--color-coral-soft: #F8D0CD;
--color-navy: #2C4C6D;
--color-navy-deep: #1B3552;
--color-navy-soft: #D9E2EB;
--color-sky: #91B8C4;
--color-sky-soft: #D6E4E9;
--color-charcoal: #444444;
--color-charcoal-soft: #6C6C6C;
--color-white: #FFFFFF;
--color-shadow: rgba(44, 76, 109, 0.12);
--color-shadow-soft: rgba(44, 76, 109, 0.06);
/* #12: force light rendering so the cream brand palette is never
auto-inverted by a mobile browser's dark mode. */
color-scheme: light;
/* Type families. Intro Rust has Cyrillic, so EN and BG share it. */
--font-display: "Intro Rust", "Helvetica Neue", system-ui, sans-serif;
--font-display-en: var(--font-display);
--font-display-bg: var(--font-display);
--font-body: "Glacial Indifference", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-accent: "Caveat", cursive; /* hand-written annotations */
/* Type scale */
--fs-hero: clamp(2.8rem, 6.5vw, 5.6rem);
--fs-h1: clamp(2.4rem, 5vw, 4.2rem);
--fs-h2: clamp(1.9rem, 3.6vw, 3rem);
--fs-h3: clamp(1.4rem, 2.2vw, 1.8rem);
--fs-body: 1.0625rem; /* 17px */
--fs-lead: 1.2rem;
--fs-small: 0.875rem;
--fs-eyebrow: 0.78rem;
/* Spacing scale (8-pt) */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-6: 1.5rem;
--sp-8: 2rem;
--sp-12: 3rem;
--sp-16: 4rem;
--sp-20: 5rem;
--sp-24: 6rem;
/* Section vertical rhythm */
--section-y: clamp(4rem, 9vw, 8rem);
/* Container */
--container-max: 1240px;
--gutter: clamp(1.25rem, 4vw, 3rem);
/* Radii / motion */
--r-sm: 6px;
--r-md: 14px;
--r-lg: 28px;
--r-pill: 999px;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--t-fast: 180ms;
--t-med: 320ms;
}
/* ---- 3. RESET / BASE -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.7;
color: var(--color-charcoal);
background: var(--color-cream);
/* Faint paper grain via SVG noise so cream is not visually inert */
background-image:
url("data:image/svg+xml;utf8,");
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: var(--color-navy); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--color-coral); }
p { margin: 0 0 var(--sp-4); }
/* ---- 4. TYPOGRAPHY ---------------------------------------------------- */
.hero-title,
.section-title,
h1, h2, h3, h4 {
font-family: var(--font-display-en);
font-weight: 800;
line-height: 0.98;
letter-spacing: 0;
color: var(--color-navy);
margin: 0 0 var(--sp-6);
text-wrap: balance;
text-transform: uppercase;
}
html[lang="bg"] .hero-title,
html[lang="bg"] .section-title,
html[lang="bg"] h1,
html[lang="bg"] h2,
html[lang="bg"] h3,
html[lang="bg"] h4 {
font-family: var(--font-display-bg);
}
h1, .hero-title { font-size: var(--fs-hero); }
h2, .section-title { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: 1.15rem; font-weight: 700; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--color-charcoal); max-width: 60ch; }
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-coral);
margin: 0 0 var(--sp-3);
}
.eyebrow.on-dark { color: var(--color-cream); }
.hand-note {
font-family: var(--font-body);
font-weight: 700;
font-size: 1.25rem;
color: var(--color-coral);
line-height: 1.4;
margin-top: var(--sp-6);
}
/* ---- 5. LAYOUT PRIMITIVES --------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.grid { display: grid; gap: var(--sp-8); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) {
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
.grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.flex { display: flex; gap: var(--sp-4); }
.flex-wrap { flex-wrap: wrap; }
.center { display: flex; align-items: center; justify-content: center; }
.text-center { text-align: center; }
/* ---- 6. BUTTONS / LINKS ----------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 0.95em 1.6em;
font-family: var(--font-body);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.02em;
border-radius: var(--r-pill);
background: var(--color-coral);
color: var(--color-white);
transition: transform var(--t-med) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
box-shadow: 0 8px 18px -8px rgba(236, 99, 95, 0.55);
position: relative;
}
.btn:hover {
background: var(--color-navy);
color: var(--color-white);
transform: translateY(-2px) rotate(-0.5deg);
box-shadow: 0 14px 28px -12px rgba(44, 76, 109, 0.4);
}
.btn::after {
content: "→";
font-weight: 800;
transition: transform var(--t-fast) var(--ease);
}
.btn:hover::after { transform: translateX(3px); }
.btn.secondary {
background: transparent;
color: var(--color-navy);
border: 2px solid var(--color-navy);
box-shadow: none;
}
.btn.secondary:hover {
background: var(--color-navy);
color: var(--color-cream);
}
.btn.ghost {
background: transparent;
color: var(--color-navy);
box-shadow: none;
padding-inline: 0.4em;
}
.btn.ghost:hover {
color: var(--color-coral);
transform: none;
background: none;
}
.btn.ghost::after { content: " →"; }
/* Plain inline link with hand-drawn coral underline */
.link-underline {
position: relative;
color: var(--color-navy);
font-weight: 600;
}
.link-underline::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 6px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.link-underline:hover { color: var(--color-coral); }
/* ---- 7. HEADER / NAV -------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(254, 250, 246, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(44, 76, 109, 0.08);
}
.site-header__inner {
display: flex;
align-items: center;
gap: var(--sp-6);
padding-block: 1rem;
}
.brand {
display: flex;
align-items: center;
gap: 0.8rem;
text-decoration: none;
color: var(--color-navy);
font-family: var(--font-display-en);
font-weight: 800;
font-size: 1.05rem;
letter-spacing: 0.01em;
flex: 0 0 auto;
transition: transform var(--t-fast) var(--ease);
}
.brand:hover { transform: rotate(-2deg); }
.brand__bubble {
display: block;
width: clamp(72px, 6vw, 92px);
height: clamp(72px, 6vw, 92px);
background-image: url("../images/illustrations/logo-bubble.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.brand__name {
display: none;
font-family: var(--font-display-en);
font-weight: 800;
font-size: clamp(1.25rem, 1.5vw, 1.45rem);
letter-spacing: 0.02em;
line-height: 1.0;
max-width: 14ch;
}
html[lang="bg"] .brand__name { font-family: var(--font-display-bg); }
@media (min-width: 720px) {
.brand__name { display: inline; }
}
.nav {
margin-left: auto;
display: flex;
align-items: center;
gap: clamp(0.6rem, 2vw, 1.8rem);
}
.nav__list {
display: none;
list-style: none;
margin: 0;
padding: 0;
gap: clamp(0.8rem, 2.4vw, 2rem);
align-items: center;
}
@media (min-width: 900px) {
.nav__list { display: flex; }
}
.nav__link {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.98rem;
color: var(--color-navy);
position: relative;
padding-block: 0.4em;
}
.nav__link[aria-current="page"]::after,
.nav__link:hover::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 5px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* Language toggle */
.lang {
display: inline-flex;
align-items: center;
border: 1.5px solid var(--color-navy);
border-radius: var(--r-pill);
overflow: hidden;
padding: 2px;
background: var(--color-cream);
}
.lang__btn {
padding: 0.35em 0.75em;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
border-radius: var(--r-pill);
color: var(--color-navy);
line-height: 1;
}
.lang__btn[aria-pressed="true"] {
background: var(--color-navy);
color: var(--color-cream);
}
.nav__toggle {
display: inline-flex;
flex-direction: column;
gap: 5px;
padding: 0.5rem;
border-radius: var(--r-sm);
}
.nav__toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--color-navy);
border-radius: 2px;
}
@media (min-width: 900px) {
.nav__toggle { display: none; }
}
.nav-drawer {
display: none;
position: fixed;
inset: 0;
background: var(--color-cream);
z-index: 60;
flex-direction: column;
padding: var(--sp-6) var(--gutter) var(--sp-8);
align-items: center;
}
.nav-drawer.is-open { display: flex; }
.nav-drawer__close {
align-self: flex-end;
font-size: 1.6rem;
font-weight: 700;
color: var(--color-navy);
padding: 0.4rem 0.8rem;
}
.nav-drawer__brand {
display: flex;
justify-content: center;
margin-top: var(--sp-4);
margin-bottom: var(--sp-6);
}
.nav-drawer__brand img {
width: 140px;
height: auto;
}
.nav-drawer__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sp-4);
align-items: center;
text-align: center;
width: 100%;
}
.nav-drawer__list a {
font-family: var(--font-display-en);
font-weight: 800;
font-size: 2.2rem;
color: var(--color-navy);
text-decoration: none;
display: inline-block;
line-height: 1;
}
.nav-drawer__list a:hover { color: var(--color-coral); }
.nav-drawer__cta {
background: var(--color-coral);
color: var(--color-cream) !important;
padding: 0.2em 0.6em;
border-radius: var(--r-md);
transition: background var(--t-fast) var(--ease);
}
.nav-drawer__cta:hover {
background: var(--color-navy);
color: var(--color-cream) !important;
}
/* ---- 8. HERO ---------------------------------------------------------- */
.hero {
position: relative;
overflow: hidden;
isolation: isolate;
padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
}
.hero__container {
display: grid;
gap: clamp(2rem, 4vw, 4rem);
align-items: stretch;
}
@media (min-width: 900px) {
.hero__container { grid-template-columns: 1fr 1.1fr; align-items: center; }
}
.hero__copy { position: relative; z-index: 2; }
.hero__title {
font-size: var(--fs-hero);
line-height: 0.95;
margin-bottom: var(--sp-6);
text-transform: none;
}
.hero__title .accent { color: var(--color-coral); }
.hero__title .swoosh {
display: inline-block;
position: relative;
}
.hero__title .swoosh::after {
content: "";
position: absolute;
left: -2%; right: -2%; bottom: -0.1em;
height: 0.22em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.hero__lead {
font-size: var(--fs-lead);
color: var(--color-charcoal);
max-width: 38ch;
margin-bottom: var(--sp-8);
}
.hero__buttons { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__photo {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: 0 30px 60px -25px rgba(44, 76, 109, 0.35),
0 12px 25px -15px rgba(44, 76, 109, 0.25);
transform: rotate(0.5deg);
aspect-ratio: 4/5;
background: var(--color-sky-soft);
}
.hero__photo img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 8s var(--ease);
}
.hero__photo:hover img { transform: scale(1.04); }
/* Tape strips on the hero photo */
.hero__photo::before,
.hero__photo::after {
content: "";
position: absolute;
width: 90px;
height: 22px;
background: rgba(254, 250, 246, 0.78);
border-left: 1px dashed rgba(44, 76, 109, 0.18);
border-right: 1px dashed rgba(44, 76, 109, 0.18);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
z-index: 3;
}
.hero__photo::before { top: 14px; left: -18px; transform: rotate(-22deg); }
.hero__photo::after { bottom: 28px; right: -18px; transform: rotate(18deg); }
/* Decorative coral stars in hero */
.hero__star {
position: absolute;
width: 64px; height: 64px;
color: var(--color-coral);
z-index: 1;
opacity: 0.85;
}
.hero__star--1 { top: 18%; right: 38%; transform: rotate(-15deg); }
.hero__star--2 { bottom: 12%; left: 6%; width: 38px; height: 38px; transform: rotate(20deg); }
/* ---- 9. SECTION INTROS / EYEBROWS ------------------------------------ */
.section-head {
margin-bottom: var(--sp-12);
max-width: 56ch;
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--tight { margin-bottom: var(--sp-6); }
.section-head .section-title { margin-bottom: var(--sp-4); }
.section-head p { color: var(--color-charcoal-soft); }
/* ---- 10. PHILOSOPHY INTRO (home) ------------------------------------- */
.philosophy {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
@media (min-width: 880px) {
.philosophy { grid-template-columns: 1.3fr 1fr; }
}
.philosophy__art {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.philosophy__art img {
width: 100%;
max-width: 100%;
filter: drop-shadow(0 18px 28px rgba(44, 76, 109, 0.15));
transform: rotate(-2deg);
}
/* Circular portrait variant — for the About Lizzie section */
.philosophy__portrait {
position: relative;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1;
max-width: 420px;
margin-inline: auto;
}
.philosophy__portrait img {
width: 82%;
height: 82%;
border-radius: 50%;
object-fit: cover;
/* Photo composition has Lizzie's face on the left half. Bias the crop
left and slightly down so more of her face is in frame and less of the
cat dominates the right edge of the circle. */
object-position: 22% 32%;
box-shadow: 0 18px 32px -16px rgba(44, 76, 109, 0.4),
0 6px 14px -8px rgba(44, 76, 109, 0.2);
border: 6px solid var(--color-cream);
transform: rotate(-1deg);
}
.philosophy__portrait .scribble-circle {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
/* Photo variant of the philosophy split, rectangular, framed, slight tilt */
.philosophy__photo {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.philosophy__photo img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--r-lg);
box-shadow: 0 24px 48px -24px rgba(44, 76, 109, 0.35),
0 10px 20px -12px rgba(44, 76, 109, 0.18);
transform: rotate(1.2deg);
}
.philosophy__photo::before,
.philosophy__photo::after {
content: "";
position: absolute;
width: 90px;
height: 22px;
background: rgba(254, 250, 246, 0.78);
border-left: 1px dashed rgba(44, 76, 109, 0.18);
border-right: 1px dashed rgba(44, 76, 109, 0.18);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
z-index: 3;
}
.philosophy__photo::before { top: 14px; left: -18px; transform: rotate(-18deg); }
.philosophy__photo::after { bottom: 28px; right: -18px; transform: rotate(14deg); }
/* Feature callout — for the "Immersive English" value-prop section */
.feature-callout {
background: var(--color-sky-soft);
border-radius: var(--r-lg);
padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
text-align: center;
position: relative;
overflow: hidden;
isolation: isolate;
}
.feature-callout::before {
content: "";
position: absolute;
width: 240px; height: 240px;
border-radius: 50%;
background: rgba(236, 99, 95, 0.12);
top: -80px; right: -80px;
z-index: -1;
}
.feature-callout::after {
content: "";
position: absolute;
width: 180px; height: 180px;
border-radius: 50%;
background: rgba(44, 76, 109, 0.10);
bottom: -80px; left: -60px;
z-index: -1;
}
.feature-callout .eyebrow { color: var(--color-navy); }
.feature-callout h2 {
max-width: 22ch;
margin-inline: auto;
margin-bottom: var(--sp-8);
}
.feature-callout p {
max-width: 60ch;
margin-inline: auto;
font-size: 1.05rem;
line-height: 1.65;
}
.feature-callout p.lead {
font-size: 1.2rem;
color: var(--color-navy);
font-weight: 700;
max-width: 50ch;
}
.philosophy__art .scribble-circle {
position: absolute;
inset: -8% -6%;
z-index: -1;
pointer-events: none;
}
/* ---- 11. PILLARS ------------------------------------------------------ */
.pillars {
display: grid;
gap: clamp(1rem, 2vw, 1.6rem);
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar {
position: relative;
padding: clamp(1.5rem, 2.5vw, 2.2rem);
border-radius: var(--r-lg);
background: var(--color-cream-deep);
transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
box-shadow: 0 6px 14px -10px var(--color-shadow);
}
.pillar:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 18px 38px -22px var(--color-shadow); }
.pillar:nth-child(1) { background: var(--color-coral-soft); transform: rotate(-0.8deg); }
.pillar:nth-child(2) { background: var(--color-sky-soft); transform: rotate(0.6deg); }
.pillar:nth-child(3) { background: var(--color-navy-soft); transform: rotate(-0.4deg); }
.pillar:nth-child(4) { background: var(--color-cream-darker); transform: rotate(0.8deg); }
.pillar:hover { transform: translateY(-4px) rotate(0deg); }
.pillar__index {
font-family: var(--font-display-en);
font-weight: 800;
font-size: 3rem;
line-height: 1;
color: var(--color-coral);
opacity: 0.7;
}
html[lang="bg"] .pillar__index { font-family: var(--font-display-bg); }
.pillar:nth-child(2) .pillar__index { color: var(--color-navy); }
.pillar:nth-child(3) .pillar__index { color: var(--color-navy); }
.pillar:nth-child(4) .pillar__index { color: var(--color-coral); }
.pillar__title {
font-size: 1.4rem;
margin-top: var(--sp-3);
margin-bottom: var(--sp-3);
color: var(--color-navy);
}
.pillar__body { font-size: 0.98rem; color: var(--color-charcoal); margin: 0; }
/* About-page expanded pillars: bigger, more breathing space */
.pillars--detail .pillar {
padding: clamp(2rem, 3vw, 2.8rem);
}
.pillars--detail .pillar__index { font-size: 4rem; }
.pillars--detail .pillar__title { font-size: 1.6rem; }
.pillars--detail .pillar__body { font-size: 1.02rem; line-height: 1.7; }
/* ---- 12. PHOTO STRIP (home) ------------------------------------------ */
.photo-strip {
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 740px) { .photo-strip { grid-template-columns: repeat(4, 1fr); } }
.photo-card {
position: relative;
display: block;
aspect-ratio: 3/4;
border-radius: var(--r-md);
overflow: hidden;
box-shadow: 0 18px 30px -20px rgba(44, 76, 109, 0.4);
transition: transform var(--t-med) var(--ease);
}
.photo-card:nth-child(1) { transform: rotate(-1.4deg); }
.photo-card:nth-child(2) { transform: rotate(0.8deg); margin-top: var(--sp-6); }
.photo-card:nth-child(3) { transform: rotate(-0.6deg); }
.photo-card:nth-child(4) { transform: rotate(1.2deg); margin-top: var(--sp-6); }
.photo-card:hover { transform: rotate(0) translateY(-6px); }
.photo-card img { width: 100%; height: 100%; object-fit: cover; }
/* ---- 13. CTA STRIP --------------------------------------------------- */
.cta-strip {
background: var(--color-navy);
color: var(--color-cream);
border-radius: var(--r-lg);
padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
position: relative;
overflow: hidden;
isolation: isolate;
text-align: center;
}
/* /program sticky bottom CTA — coral bar fixed to the viewport so the
* Book Now button is always one click away while a parent scrolls through
* the workshops list. Auto-hides via IntersectionObserver in program.js
* once the static .cta-strip above enters view, so the two never sit
* stacked at the bottom of the page. */
.program-sticky-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
background: var(--color-coral);
color: var(--color-cream);
padding: var(--sp-3) 0;
/* iOS safe-area inset so the bar lifts above the home-bar gesture line. */
padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
box-shadow: 0 -6px 18px rgba(44, 76, 109, 0.18);
transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
/* No effect for users who prefer reduced motion — the bar just toggles. */
}
.program-sticky-cta[aria-hidden="true"] {
transform: translateY(100%);
opacity: 0;
pointer-events: none;
}
.program-sticky-cta__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
}
.program-sticky-cta__label {
font-family: var(--font-display-en);
font-weight: 800;
font-size: clamp(1rem, 1.6vw, 1.25rem);
letter-spacing: 0.01em;
color: var(--color-cream);
}
html[lang="bg"] .program-sticky-cta__label { font-family: var(--font-display-bg); }
.program-sticky-cta__btn {
/* On a coral background, flip the button to cream → navy on hover so
* it sits visually inverted from the surrounding bar. */
background: var(--color-cream);
color: var(--color-navy);
}
.program-sticky-cta__btn:hover,
.program-sticky-cta__btn:focus-visible {
background: var(--color-navy);
color: var(--color-cream);
}
@media (prefers-reduced-motion: reduce) {
.program-sticky-cta { transition: none; }
}
.cta-strip h2 { color: var(--color-cream); margin-bottom: var(--sp-4); }
.cta-strip p { color: rgba(254, 250, 246, 0.86); max-width: 50ch; margin-inline: auto; margin-bottom: var(--sp-8); }
.cta-strip .btn { background: var(--color-coral); }
.cta-strip .btn:hover { background: var(--color-cream); color: var(--color-navy); }
.cta-strip::after {
content: "";
position: absolute;
width: 280px; height: 280px;
border-radius: 50%;
background: rgba(236, 99, 95, 0.12);
top: -100px; right: -90px;
z-index: -1;
}
.cta-strip::before {
content: "";
position: absolute;
width: 220px; height: 220px;
border-radius: 50%;
background: rgba(145, 184, 196, 0.15);
bottom: -100px; left: -60px;
z-index: -1;
}
/* ---- 13b. NAV CTA --------------------------------------------------- */
.nav__link--cta {
background: var(--color-coral);
color: var(--color-cream) !important;
padding: 0.45em 1em;
border-radius: var(--r-pill);
transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav__link--cta:hover { background: var(--color-navy); transform: translateY(-1px); }
.nav__link--cta::after,
.nav__link--cta:hover::after { content: none !important; }
/* ---- 13c. STEP HEADS (Book Now page) --------------------------------- */
.step-head {
display: flex;
align-items: center;
gap: var(--sp-4);
margin-bottom: var(--sp-8);
}
.step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
background: var(--color-coral);
color: var(--color-cream);
border-radius: 50%;
font-family: var(--font-display-en);
font-weight: 800;
font-size: 1.4rem;
flex: 0 0 auto;
letter-spacing: 0;
}
html[lang="bg"] .step-num { font-family: var(--font-display-bg); }
.step-head h2 { margin: 0; }
/* ---- 14. EVENTS — GROUP PICKER, PRICING, SCHEDULE -------------------- */
/* Group picker: two big cards, click to select */
.group-picker {
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
grid-template-columns: 1fr;
margin-bottom: var(--sp-12);
}
@media (min-width: 720px) { .group-picker { grid-template-columns: 1fr 1fr; } }
.group-card {
position: relative;
display: block;
padding: clamp(1.5rem, 3vw, 2.4rem);
background: var(--color-cream-deep);
border: 3px solid transparent;
border-radius: var(--r-lg);
text-align: left;
cursor: pointer;
transition: transform var(--t-med) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
width: 100%;
font: inherit;
color: inherit;
}
.group-card:hover { transform: translateY(-3px); }
.group-card:nth-child(1) { background: var(--color-coral-soft); }
.group-card:nth-child(2) { background: var(--color-sky-soft); }
.group-card[aria-pressed="true"] {
border-color: var(--color-navy);
background: var(--color-navy);
color: var(--color-cream);
transform: translateY(-3px);
}
.group-card[aria-pressed="true"] .group-card__age,
.group-card[aria-pressed="true"] .group-card__time { color: var(--color-cream); opacity: 0.92; }
.group-card[aria-pressed="true"] .group-card__check { display: flex; }
.group-card__eyebrow {
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-coral);
margin-bottom: var(--sp-3);
display: block;
}
.group-card[aria-pressed="true"] .group-card__eyebrow { color: var(--color-coral-soft); }
.group-card__title {
font-family: var(--font-display-en);
font-weight: 800;
font-size: clamp(1.5rem, 3vw, 2.2rem);
line-height: 1;
letter-spacing: 0;
color: var(--color-navy);
margin: 0 0 var(--sp-3);
text-transform: uppercase;
}
html[lang="bg"] .group-card__title { font-family: var(--font-display-bg); }
.group-card[aria-pressed="true"] .group-card__title { color: var(--color-cream); }
.group-card__age {
display: inline-block;
font-family: var(--font-body);
font-weight: 700;
font-size: 1.1rem;
color: var(--color-navy);
margin-bottom: var(--sp-2);
}
.group-card__time {
display: block;
font-family: var(--font-body);
font-weight: 500;
font-size: 1rem;
color: var(--color-charcoal);
letter-spacing: 0.02em;
}
.group-card__check {
display: none;
position: absolute;
top: var(--sp-4);
right: var(--sp-4);
width: 36px; height: 36px;
background: var(--color-coral);
color: var(--color-cream);
border-radius: 50%;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.05rem;
}
/* Pricing trio: three small cards showing single / month / term */
.pricing-trio {
display: grid;
gap: clamp(0.8rem, 1.8vw, 1.4rem);
grid-template-columns: 1fr;
margin-bottom: var(--sp-12);
}
@media (min-width: 780px) { .pricing-trio { grid-template-columns: repeat(3, 1fr); } }
.pricing-card {
background: var(--color-cream-deep);
border-radius: var(--r-lg);
padding: clamp(1.2rem, 2.2vw, 1.8rem);
display: flex;
flex-direction: column;
gap: var(--sp-2);
border: 2px solid transparent;
}
.pricing-card:nth-child(2) { background: var(--color-cream-darker); }
.pricing-card:nth-child(3) {
background: var(--color-navy);
color: var(--color-cream);
}
.pricing-card__price {
font-family: var(--font-display-en);
font-weight: 800;
font-size: 2.4rem;
line-height: 1;
color: var(--color-coral);
letter-spacing: 0;
}
html[lang="bg"] .pricing-card__price { font-family: var(--font-display-bg); }
.pricing-card:nth-child(3) .pricing-card__price { color: var(--color-coral-soft); }
.pricing-card__title {
font-family: var(--font-body);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-navy);
}
.pricing-card:nth-child(3) .pricing-card__title { color: var(--color-cream); }
.pricing-card__body {
font-size: 0.93rem;
color: var(--color-charcoal-soft);
line-height: 1.5;
margin: 0;
}
.pricing-card:nth-child(3) .pricing-card__body { color: rgba(254, 250, 246, 0.78); }
.pricing-note {
font-family: var(--font-accent);
font-size: 1.1rem;
color: var(--color-coral);
text-align: center;
margin-bottom: var(--sp-16);
}
/* Schedule strip: shows currently-selected group above the workshop list */
.schedule-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--sp-4);
flex-wrap: wrap;
margin-bottom: var(--sp-8);
}
.schedule-head h2 { margin: 0; }
.schedule-head__current {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--color-charcoal-soft);
}
.schedule-head__current strong {
display: inline-block;
padding: 0.15em 0.7em;
background: var(--color-navy);
color: var(--color-cream);
border-radius: var(--r-pill);
font-weight: 700;
letter-spacing: 0.04em;
font-size: 0.85rem;
text-transform: uppercase;
margin-left: 0.3em;
}
/* Workshop schedule card: a horizontal-ish card with photo, content, booking trio */
.events-list {
display: grid;
gap: var(--sp-6);
grid-template-columns: 1fr;
}
.workshop-card {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-6);
padding: var(--sp-6);
background: var(--color-cream-deep);
border-radius: var(--r-lg);
transition: transform var(--t-med) var(--ease);
}
@media (min-width: 720px) {
.workshop-card { grid-template-columns: 180px 1fr; padding: var(--sp-8); }
}
@media (min-width: 1000px) {
.workshop-card { grid-template-columns: 220px 1fr 280px; align-items: center; }
}
.workshop-card:hover { transform: translateY(-2px); }
.workshop-card__photo {
width: 100%;
aspect-ratio: 1;
border-radius: var(--r-md);
overflow: hidden;
background: var(--color-sky-soft);
}
.workshop-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.workshop-card__body { min-width: 0; }
.workshop-card__date {
font-family: var(--font-display-en);
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.04em;
color: var(--color-coral);
text-transform: uppercase;
margin-bottom: var(--sp-2);
}
html[lang="bg"] .workshop-card__date { font-family: var(--font-display-bg); }
.workshop-card__title {
font-family: var(--font-display-en);
font-weight: 800;
font-size: clamp(1.4rem, 2.5vw, 2rem);
line-height: 1;
color: var(--color-navy);
margin: 0 0 var(--sp-3);
text-transform: uppercase;
letter-spacing: 0;
}
html[lang="bg"] .workshop-card__title { font-family: var(--font-display-bg); }
.workshop-card__desc {
font-size: 0.98rem;
color: var(--color-charcoal);
margin: 0 0 var(--sp-4);
max-width: 50ch;
}
.workshop-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
font-size: 0.85rem;
color: var(--color-charcoal-soft);
}
.workshop-card__meta-item { display: inline-flex; gap: 0.3em; align-items: center; }
.workshop-card__meta-item::before {
content: "·";
margin-right: 0.3em;
color: var(--color-coral);
font-weight: 800;
}
.workshop-card__meta-item:first-child::before { display: none; }
/* Booking trio (right column on wide, bottom on narrow) */
.workshop-card__book {
display: grid;
gap: var(--sp-2);
grid-template-columns: 1fr;
}
.book-btn {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-3);
padding: 0.85em 1em;
border-radius: var(--r-md);
background: var(--color-cream);
border: 2px solid transparent;
cursor: pointer;
font: inherit;
text-align: left;
transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
width: 100%;
color: var(--color-navy);
}
.book-btn:hover { transform: translateX(-2px); border-color: var(--color-coral); }
.book-btn--primary { background: var(--color-coral); color: var(--color-cream); }
.book-btn--primary:hover { background: var(--color-navy); border-color: var(--color-navy); }
.book-btn__label {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
display: block;
}
.book-btn__sub {
font-family: var(--font-body);
font-weight: 500;
font-size: 0.75rem;
letter-spacing: 0.02em;
opacity: 0.78;
display: block;
margin-top: 2px;
}
.book-btn__price {
font-family: var(--font-display-en);
font-weight: 800;
font-size: 1.4rem;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
}
html[lang="bg"] .book-btn__price { font-family: var(--font-display-bg); }
.event-card__tag {
position: absolute;
top: -10px;
right: 20px;
background: var(--color-coral);
color: var(--color-cream);
font-family: var(--font-body);
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.35em 0.9em;
border-radius: var(--r-pill);
transform: rotate(2deg);
}
.event-empty {
background: var(--color-cream-deep);
border-radius: var(--r-lg);
padding: clamp(2.5rem, 5vw, 4rem);
text-align: center;
}
.event-empty h3 { font-size: 1.6rem; }
.extras-empty {
font-family: var(--font-accent);
font-size: 1.2rem;
color: var(--color-charcoal-soft);
text-align: center;
padding: var(--sp-8);
border: 2px dashed rgba(44, 76, 109, 0.18);
border-radius: var(--r-lg);
}
/* ---- 14a. WEEK GROUPING (Program page) ------------------------------- */
.schedule { display: block; }
.week-group + .week-group { margin-top: clamp(2rem, 4vw, 3rem); }
.week-heading {
display: flex;
align-items: baseline;
gap: var(--sp-3);
padding-bottom: var(--sp-3);
margin-bottom: var(--sp-6);
border-bottom: 2px dashed rgba(44, 76, 109, 0.22);
position: relative;
}
.week-heading::after {
content: "";
position: absolute;
left: 0; bottom: -4px;
width: 64px; height: 6px;
background: var(--color-coral);
border-radius: var(--r-pill);
}
.week-heading__label {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--fs-eyebrow);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-coral);
}
.week-heading__date {
font-family: var(--font-display-en);
font-weight: 800;
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1;
color: var(--color-navy);
text-transform: uppercase;
letter-spacing: 0;
}
html[lang="bg"] .week-heading__date { font-family: var(--font-display-bg); }
.week-group__list {
display: grid;
gap: var(--sp-4);
}
/* ---- 14b. PROGRAM CARDS (read-only schedule) ------------------------- */
.program-card {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-6);
padding: var(--sp-6);
background: var(--color-cream-deep);
border-radius: var(--r-lg);
transition: transform var(--t-med) var(--ease);
}
@media (min-width: 720px) {
.program-card { grid-template-columns: 200px 1fr; padding: var(--sp-8); align-items: center; }
}
.program-card:hover { transform: translateY(-2px); }
.program-card__photo {
width: 100%;
aspect-ratio: 1;
border-radius: var(--r-md);
overflow: hidden;
background: var(--color-sky-soft);
}
.program-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.program-card__body { min-width: 0; }
.program-card__date {
font-family: var(--font-display-en);
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.04em;
color: var(--color-coral);
text-transform: uppercase;
margin-bottom: var(--sp-2);
}
html[lang="bg"] .program-card__date { font-family: var(--font-display-bg); }
/* "SPECIAL" eyebrow on special-event workshop cards. Sky-blue matches the
* "X spaces left" urgency hint family — informational, not blocking. */
.program-card__eyebrow {
display: inline-block;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 0.3em 0.7em;
border-radius: var(--r-pill);
margin-bottom: var(--sp-3);
}
.program-card__eyebrow--special {
background: var(--color-sky);
color: var(--color-navy);
}
/* "Monthly / Term package only" eyebrow + matching photo rule. Coral-tinted
* outline rather than a sky-blue fill so it reads as a distinct marketing
* concept ("you can't single-book this — package it") rather than the
* urgency-family information SPECIAL / X-spaces-left use. */
.program-card__eyebrow--package {
background: var(--color-cream);
color: var(--color-coral);
border: 1px solid var(--color-coral);
}
.program-card__eyebrow--announce {
background: var(--color-cream);
color: var(--color-charcoal);
border: 1px solid var(--color-charcoal);
}
.program-card--special .program-card__photo {
/* Thin sky-blue rule down the left of the photo so the row reads as
* "different from the regular weekly pattern" even before the parent
* sees the SPECIAL pill. */
border-left: 3px solid var(--color-sky);
}
.program-card--package .program-card__photo {
border-left: 3px solid var(--color-coral);
}
/* Helper line under a package-only card: "Individual booking opens closer
* to the date." Quieter than the description so it doesn't compete with the
* theme but still picks up the eye after the sessions list. */
.program-card__helper {
margin: var(--sp-3) 0 0;
font-size: 0.82rem;
font-style: italic;
color: var(--color-charcoal);
opacity: 0.78;
}
.program-card__title {
font-family: var(--font-display-en);
font-weight: 800;
font-size: clamp(1.5rem, 2.6vw, 2.2rem);
line-height: 1;
color: var(--color-navy);
margin: 0 0 var(--sp-3);
text-transform: uppercase;
letter-spacing: 0;
}
html[lang="bg"] .program-card__title { font-family: var(--font-display-bg); }
.program-card__desc {
font-size: 0.98rem;
color: var(--color-charcoal);
margin: 0 0 var(--sp-4);
max-width: 55ch;
}
.program-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
font-size: 0.85rem;
color: var(--color-charcoal-soft);
}
.program-card__meta-item { display: inline-flex; gap: 0.3em; align-items: center; }
.program-card__meta-item::before {
content: "·";
margin-right: 0.3em;
color: var(--color-coral);
font-weight: 800;
}
.program-card__meta-item:first-child::before { display: none; }
/* Sessions footnote — list of group + time + age rows */
.program-card__sessions {
list-style: none;
margin: var(--sp-4) 0 0;
padding: var(--sp-3) 0 0;
border-top: 1px dashed rgba(44, 76, 109, 0.22);
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.program-card__session {
/* #15: one flowing line — "date · time · age" (+ optional badge). Flex-wrap
keeps it legible on narrow screens (the badge drops to its own line only
when there genuinely isn't room) instead of the old forced two-row grid. */
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: var(--sp-2);
row-gap: var(--sp-1);
font-size: 0.88rem;
color: var(--color-charcoal);
padding: 0.15em 0;
}
.program-card__session-sep {
color: var(--color-charcoal-soft);
opacity: 0.55;
}
.program-card__session-slot {
font-family: var(--font-body);
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-navy);
}
.program-card__session-time {
font-family: var(--font-body);
font-weight: 600;
color: var(--color-coral);
letter-spacing: 0.02em;
}
.program-card__session-ages {
font-family: var(--font-body);
font-weight: 500;
color: var(--color-charcoal-soft);
}
.program-card__session--sold-out .program-card__session-slot,
.program-card__session--sold-out .program-card__session-time,
.program-card__session--sold-out .program-card__session-ages {
text-decoration: line-through;
opacity: 0.55;
}
.program-card__session-badge--low {
/* Medium-urgency pill: solid sky-blue, matches the SOLD OUT shape but
* the brand's medium-urgency colour. */
background: var(--color-sky) !important;
color: var(--color-navy) !important;
border: none;
}
.program-card__session-badge {
background: var(--color-coral);
color: var(--color-cream);
font-family: var(--font-body);
font-weight: 700;
font-size: 0.66rem;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.25em 0.7em;
border-radius: var(--r-pill);
white-space: nowrap;
align-self: center;
margin-left: auto;
}
/* Sold-out state on the booking checklist */
.checklist__item--sold-out label {
cursor: not-allowed;
background: var(--color-cream-deep);
}
.checklist__item--sold-out .checklist__body,
.checklist__item--sold-out .checklist__photo {
opacity: 0.5;
}
/* Replace the price column with the SOLD OUT badge when sold out. */
.checklist__item--sold-out .checklist__price { display: none; }
.checklist__sold-out {
background: var(--color-coral);
color: var(--color-cream);
font-family: var(--font-body);
font-weight: 700;
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.35em 0.8em;
border-radius: var(--r-pill);
white-space: nowrap;
margin-left: auto;
align-self: center;
}
.checklist__low-spaces {
/* Urgency hint: "1 / 2 / 3 spaces left". Solid sky-blue pill matches
* the SOLD OUT shape exactly (so the eye groups them) but in the
* brand's medium-urgency colour. Sold out (coral) = blocking; sky
* blue = "act soon, still bookable". */
background: var(--color-sky);
color: var(--color-navy);
font-family: var(--font-body);
font-weight: 700;
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.35em 0.8em;
border-radius: var(--r-pill);
white-space: nowrap;
margin-left: auto;
align-self: center;
}
.checklist__extra-badge {
/* Lives as a sibling of .checklist__body in the row grid, NOT inside
* the body (the body is a flex-column that would stretch the pill full
* width). Right-aligns alongside the availability pills so the column
* of badges on the right edge reads as one visual family. */
display: inline-block;
background: var(--color-sky);
color: var(--color-navy);
font-family: var(--font-body);
font-weight: 700;
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 2px 8px;
vertical-align: middle;
border-radius: var(--r-pill);
/* Mobile placement: own row below body + price, right-aligned. */
grid-column: 1 / -1;
grid-row: 4;
justify-self: end;
align-self: center;
white-space: nowrap;
}
.checklist__empty {
padding: var(--sp-6);
text-align: center;
font-size: 0.95rem;
color: var(--color-charcoal);
background: var(--color-cream-deep);
border-radius: var(--r-md);
}
/* Discovery line under the single-session checklist. Tells the parent that
* the monthly package includes N additional sessions this month that aren't
* shown in the picker above. Coral left-rule echoes the package eyebrow on
* /program so the two surfaces feel linked. */
.checklist__discovery {
margin: var(--sp-3) 0 0;
padding: var(--sp-3) var(--sp-4);
border-left: 3px solid var(--color-coral);
background: var(--color-cream-deep);
border-radius: 0 var(--r-md) var(--r-md) 0;
font-size: 0.92rem;
color: var(--color-charcoal);
}
/* ---- 14c. BOOK NOW — option cards and checklist --------------------- */
.book-option {
background: var(--color-cream-deep);
border-radius: var(--r-lg);
padding: clamp(1.5rem, 3vw, 2.4rem);
margin-bottom: var(--sp-8);
transition: transform var(--t-med) var(--ease);
}
.book-option:hover { transform: translateY(-2px); }
.book-option--month { background: var(--color-sky-soft); }
.book-option--term { background: var(--color-navy); color: var(--color-cream); }
.book-option--term .book-option__title,
.book-option--term .book-option__sub,
.book-option--term .book-option__body { color: var(--color-cream); }
.book-option--term .book-option__sub { opacity: 0.85; }
/* #4: the term window reads as a confident headline — Intro Rust display
face in coral, lifting it out of the cream body text on the navy card. */
.book-option--term .book-option__dates {
font-family: var(--font-display);
color: var(--color-coral);
font-size: 1.15rem;
line-height: 1.2;
letter-spacing: 0.01em;
margin-top: var(--sp-2);
}
/* #12: tighten the stacked booking cards on mobile so /book isn't an endless
scroll — smaller gap between cards; padding already clamps down on its own. */
@media (max-width: 600px) {
.book-option { margin-bottom: var(--sp-5); }
}
.book-option__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--sp-6);
flex-wrap: wrap;
margin-bottom: var(--sp-6);
}
.book-option__title {
font-family: var(--font-display-en);
font-weight: 800;
font-size: clamp(1.15rem, 2.4vw, 2rem);
line-height: 1.05;
color: var(--color-navy);
margin: 0 0 var(--sp-3);
text-transform: uppercase;
letter-spacing: 0;
overflow-wrap: anywhere;
hyphens: auto;
}
html[lang="bg"] .book-option__title { font-family: var(--font-display-bg); }
.book-option__sub {
font-size: 1rem;
color: var(--color-charcoal);
margin: 0;
max-width: 50ch;
}
.book-option__price {
font-family: var(--font-display-en);
font-weight: 800;
font-size: clamp(2rem, 3.5vw, 3rem);
line-height: 1;
color: var(--color-coral);
letter-spacing: 0;
white-space: nowrap;
}
html[lang="bg"] .book-option__price { font-family: var(--font-display-bg); }
.book-option__price small {
display: block;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.7rem;
color: var(--color-charcoal-soft);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-top: 4px;
}
.book-option--term .book-option__price { color: var(--color-coral-soft); }
.book-option--term .book-option__price small { color: rgba(254, 250, 246, 0.6); }
.book-option__body h4 {
font-family: var(--font-display-en);
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-navy);
margin: 0 0 var(--sp-3);
}
html[lang="bg"] .book-option__body h4 { font-family: var(--font-display-bg); }
.book-option--term .book-option__body h4 { color: var(--color-cream); }
.book-option__list {
list-style: none;
padding: 0;
margin: 0 0 var(--sp-6);
display: grid;
gap: var(--sp-2);
}
.book-option__list li {
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: 1rem;
color: var(--color-charcoal);
}
.book-option__list li::before {
content: "✓";
width: 24px; height: 24px;
flex: 0 0 auto;
background: var(--color-coral);
color: var(--color-cream);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.8rem;
}
.book-option__dates {
font-family: var(--font-accent);
font-size: 1.2rem;
color: var(--color-coral-soft);
margin: 0 0 var(--sp-6);
}
/* Workshop checklist (under "Pick individual workshops") */
.checklist {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--sp-3);
}
/* Narrow phones (<480): checkbox + photo + body on row 1, price on its own
row below, right-aligned. From 480px up: single row, price on the right. */
.checklist__item label {
display: grid;
grid-template-columns: auto 52px 1fr;
grid-template-rows: auto auto;
column-gap: var(--sp-3);
row-gap: 4px;
padding: var(--sp-3);
background: var(--color-cream);
border: 2px solid transparent;
border-radius: var(--r-md);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
align-items: center;
}
.checklist__check { grid-column: 1; grid-row: 1; }
.checklist__photo { grid-column: 2; grid-row: 1; }
.checklist__body { grid-column: 3; grid-row: 1; min-width: 0; }
.checklist__price { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
/* Availability badge (SOLD OUT or "X spaces left"): same grid slot as the
price on mobile (wraps below the row), explicit column on desktop. */
.checklist__sold-out,
.checklist__low-spaces {
grid-column: 1 / -1;
grid-row: 3;
justify-self: end;
margin-left: 0;
}
@media (min-width: 480px) {
.checklist__item label {
/* check + photo + body + price + badge — 5 columns so the badge
always lands on the right of the same row, regardless of whether
the price column collapses (SOLD OUT hides the price). */
grid-template-columns: auto 64px minmax(0, 1fr) auto auto;
grid-template-rows: auto;
column-gap: var(--sp-4);
row-gap: 0;
padding: var(--sp-3) var(--sp-4);
}
.checklist__check { grid-column: 1; }
.checklist__photo { grid-column: 2; }
.checklist__body { grid-column: 3; }
.checklist__price { grid-column: 4; grid-row: 1; justify-self: end; }
.checklist__sold-out,
.checklist__low-spaces,
.checklist__extra-badge {
grid-column: 5;
grid-row: 1;
justify-self: end;
align-self: center;
}
/* If a row is BOTH a special event AND has an availability hint, stack
* them vertically in column 5 (extra-badge on top). Rare in practice
* but predictable when it happens. */
.checklist__item--extra .checklist__sold-out,
.checklist__item--extra .checklist__low-spaces {
grid-row: 2;
}
}
.checklist__item label:hover { border-color: var(--color-coral); transform: translateX(2px); }
.checklist__check {
width: 22px;
height: 22px;
appearance: none;
-webkit-appearance: none;
border: 2px solid var(--color-navy);
border-radius: 6px;
cursor: pointer;
position: relative;
background: var(--color-cream);
}
.checklist__check:checked {
background: var(--color-coral);
border-color: var(--color-coral);
}
.checklist__check:checked::after {
content: "✓";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-cream);
font-weight: 800;
font-size: 0.85rem;
}
.checklist__photo {
width: 52px;
height: 52px;
border-radius: var(--r-sm);
overflow: hidden;
background: var(--color-sky-soft);
flex: 0 0 auto;
}
@media (min-width: 480px) {
.checklist__photo { width: 64px; height: 64px; }
}
.checklist__photo img { width: 100%; height: 100%; object-fit: cover; }
.checklist__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.checklist__date {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-coral);
}
.checklist__title {
font-family: var(--font-display-en);
font-weight: 800;
font-size: 1rem;
color: var(--color-navy);
text-transform: uppercase;
letter-spacing: 0;
line-height: 1.1;
overflow-wrap: anywhere;
hyphens: auto;
}
@media (min-width: 520px) {
.checklist__title { font-size: 1.2rem; }
}
html[lang="bg"] .checklist__title { font-family: var(--font-display-bg); }
.checklist__price {
font-family: var(--font-display-en);
font-weight: 800;
font-size: 1.05rem;
color: var(--color-navy);
white-space: nowrap;
}
@media (min-width: 480px) {
.checklist__price { font-size: 1.3rem; }
}
html[lang="bg"] .checklist__price { font-family: var(--font-display-bg); }
/* Sticky summary bar at bottom of Book page */
.book-summary {
position: sticky;
bottom: 0;
background: var(--color-cream);
border-top: 2px solid var(--color-cream-darker);
box-shadow: 0 -8px 24px -16px rgba(44, 76, 109, 0.3);
z-index: 40;
padding-block: var(--sp-4);
transition: padding var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.book-summary__row {
display: flex;
align-items: center;
gap: var(--sp-6);
flex-wrap: wrap;
}
.book-summary__count {
font-size: 1rem;
font-weight: 600;
color: var(--color-navy);
transition: color var(--t-fast) var(--ease), font-size var(--t-fast) var(--ease);
}
/* UAT #12: when nothing's picked, collapse the sticky bar to a thin muted
* strip on mobile. The children stepper / total / continue button are all
* hidden until the parent ticks their first session. On wider screens we
* keep the existing full bar — there's plenty of room and the controls
* aren't competing with the workshop list above. */
@media (max-width: 720px) {
.book-summary--empty {
padding-block: var(--sp-2);
}
.book-summary--empty .book-summary__count {
font-size: 0.85rem;
color: var(--color-charcoal-soft);
font-weight: 600;
opacity: 0.85;
}
.book-summary--empty .book-summary__children,
.book-summary--empty .book-summary__total,
.book-summary--empty #book-continue,
.book-summary--empty .book-summary__warning {
display: none;
}
}
.book-summary__total {
display: flex;
align-items: baseline;
gap: var(--sp-2);
}
/* Children stepper. Sits between the selection count and the total in the
* sticky bar. Margin-left: auto pushes the total + button to the right. */
.book-summary__children {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-left: auto;
}
.book-summary__children-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-charcoal-soft);
}
.stepper {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
background: var(--color-cream-deep);
border-radius: var(--r-pill);
padding: 4px 6px;
}
.stepper__btn {
width: 28px;
height: 28px;
border: 0;
border-radius: 50%;
background: var(--color-cream);
color: var(--color-navy);
font-size: 1.1rem;
font-weight: 800;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--t-fast) var(--ease), opacity var(--t-fast);
}
.stepper__btn:hover:not(:disabled) { background: var(--color-coral); color: var(--color-cream); }
.stepper__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper__value {
min-width: 1.2em;
text-align: center;
font-family: var(--font-display-en);
font-weight: 800;
font-size: 1.1rem;
color: var(--color-navy);
}
html[lang="bg"] .stepper__value { font-family: var(--font-display-bg); }
.book-summary__warning {
margin: var(--sp-2) 0 0;
color: var(--color-coral);
font-size: 0.9rem;
font-weight: 600;
text-align: center;
}
.book-summary__label {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-charcoal-soft);
}
.book-summary__amount {
font-family: var(--font-display-en);
font-weight: 800;
font-size: 1.8rem;
color: var(--color-coral);
letter-spacing: 0;
}
html[lang="bg"] .book-summary__amount { font-family: var(--font-display-bg); }
#book-continue:disabled {
opacity: 0.35;
cursor: not-allowed;
transform: none !important;
}
/* ---- 14d. BOOK NOW — booking-details form ---------------------------- */
.booking-form { padding: clamp(1.5rem, 3.2vw, 2.4rem); }
.booking-form__group {
border: 0;
margin: 0 0 var(--sp-8);
padding: 0;
}
.booking-form__group legend {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-coral);
margin-bottom: var(--sp-4);
padding: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
}
.booking-form__group--child {
border-left: 3px solid var(--color-sky);
padding-left: var(--sp-4);
margin-bottom: var(--sp-6);
}
.booking-form__group--child:first-of-type {
border-left-color: var(--color-coral);
}
.child-remove {
border: 0;
background: transparent;
color: var(--color-charcoal-soft);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
padding: 4px 8px;
border-radius: var(--r-pill);
transition: background var(--t-fast) var(--ease), color var(--t-fast);
}
.child-remove:hover { background: var(--color-coral); color: var(--color-cream); }
.booking-form__add-child {
margin: var(--sp-4) 0 var(--sp-8);
display: flex;
align-items: center;
gap: var(--sp-4);
flex-wrap: wrap;
}
.field__error {
margin: var(--sp-2) 0 0;
padding: var(--sp-2) var(--sp-3);
background: rgba(236, 99, 95, 0.10);
border-left: 3px solid var(--color-coral);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
color: var(--color-coral);
font-size: 0.88rem;
font-weight: 600;
}
.field__hint {
display: block;
margin-top: var(--sp-2);
font-size: 0.82rem;
color: var(--color-charcoal-soft);
font-style: italic;
}
/* Textareas inside the booking form are short, optional free-text fields,
so override the taller default min-height used on the contact form. */
.booking-form .field textarea {
min-height: 64px;
}
/* Two-column field row for forename/surname pairs on wider screens. */
.field-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-4);
}
@media (min-width: 560px) {
.field-row { grid-template-columns: 1fr 1fr; }
}
.field-row .field { margin-bottom: 0; }
/* ---- 14e. DETAILS PAGE — summary card + empty state ----------------- */
.summary-card {
background: var(--color-navy);
color: var(--color-cream);
border-radius: var(--r-lg);
padding: clamp(1.5rem, 3vw, 2.4rem);
margin-bottom: var(--sp-8);
position: relative;
overflow: hidden;
isolation: isolate;
}
.summary-card::after {
content: "";
position: absolute;
width: 240px; height: 240px;
border-radius: 50%;
background: rgba(236, 99, 95, 0.10);
top: -100px; right: -90px;
z-index: -1;
}
.summary-card__head { margin-bottom: var(--sp-6); }
.summary-card__head .eyebrow { color: var(--color-coral-soft); }
.summary-card__meta {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--sp-2) var(--sp-6);
margin: 0 0 var(--sp-6);
font-size: 0.95rem;
}
.summary-card__meta dt {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(254, 250, 246, 0.65);
align-self: center;
}
.summary-card__meta dd { margin: 0; color: var(--color-cream); font-weight: 600; }
.summary-card__items {
list-style: none;
padding: 0;
margin: 0 0 var(--sp-6);
border-top: 1px dashed rgba(254, 250, 246, 0.2);
}
.summary-item {
display: grid;
grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto;
gap: var(--sp-3) var(--sp-4);
padding: var(--sp-3) 0;
border-bottom: 1px dashed rgba(254, 250, 246, 0.18);
align-items: baseline;
}
@media (max-width: 480px) {
.summary-item {
grid-template-columns: 1fr auto;
grid-template-areas:
"date price"
"title price";
}
.summary-item__date { grid-area: date; }
.summary-item__title { grid-area: title; }
.summary-item__price { grid-area: price; align-self: center; }
}
.summary-item__date {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-coral-soft);
}
.summary-item__title { color: var(--color-cream); font-weight: 600; }
.summary-item__price {
font-family: var(--font-display-en);
font-weight: 800;
font-size: 1.1rem;
color: var(--color-cream);
white-space: nowrap;
justify-self: end;
}
html[lang="bg"] .summary-item__price { font-family: var(--font-display-bg); }
.summary-card__total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: var(--sp-4);
border-top: 2px solid rgba(254, 250, 246, 0.3);
margin-bottom: var(--sp-6);
}
.summary-card__total span {
font-family: var(--font-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.82rem;
color: rgba(254, 250, 246, 0.75);
}
.summary-card__total strong {
font-family: var(--font-display-en);
font-weight: 800;
font-size: clamp(2rem, 4vw, 2.8rem);
color: var(--color-coral-soft);
letter-spacing: 0;
}
html[lang="bg"] .summary-card__total strong { font-family: var(--font-display-bg); }
.summary-card__edit {
color: var(--color-cream);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
border-bottom: 2px dashed rgba(254, 250, 246, 0.4);
padding-bottom: 2px;
transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.summary-card__edit:hover {
color: var(--color-coral-soft);
border-bottom-color: var(--color-coral-soft);
}
.empty-state {
text-align: center;
padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
background: var(--color-cream-deep);
border-radius: var(--r-lg);
max-width: 560px;
margin: 0 auto;
}
.empty-state h2 {
font-family: var(--font-display-en);
font-weight: 800;
font-size: clamp(1.4rem, 3vw, 2rem);
color: var(--color-navy);
margin: 0 0 var(--sp-4);
text-transform: uppercase;
letter-spacing: 0;
}
html[lang="bg"] .empty-state h2 { font-family: var(--font-display-bg); }
.empty-state p {
color: var(--color-charcoal);
font-size: 1.05rem;
margin-bottom: var(--sp-8);
}
/* Consent / checkbox stack */
.consent {
display: flex;
flex-direction: column;
gap: var(--sp-4);
margin-block: var(--sp-8);
padding-top: var(--sp-6);
border-top: 1px dashed rgba(44, 76, 109, 0.2);
}
.consent__item {
display: grid;
grid-template-columns: 24px 1fr;
gap: var(--sp-3);
align-items: start;
cursor: pointer;
font-size: 0.95rem;
color: var(--color-charcoal);
line-height: 1.5;
}
.consent__item input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
margin: 2px 0 0;
border: 2px solid var(--color-navy);
border-radius: 6px;
cursor: pointer;
position: relative;
background: var(--color-cream);
flex-shrink: 0;
}
.consent__item input[type="checkbox"]:checked {
background: var(--color-coral);
border-color: var(--color-coral);
}
.consent__item input[type="checkbox"]:checked::after {
content: "✓";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-cream);
font-weight: 800;
font-size: 0.85rem;
}
.consent__item span a { color: var(--color-navy); font-weight: 700; }
/* Term programme footnote — appears inside the navy "Book the term" card */
.term-program {
margin-top: var(--sp-8);
padding-top: var(--sp-6);
border-top: 1px dashed rgba(254, 250, 246, 0.2);
}
.term-program__heading {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-coral-soft);
margin: 0 0 var(--sp-4);
}
.term-program__list {
display: grid;
gap: var(--sp-3);
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.term-program__list { grid-template-columns: 1fr 1fr; }
}
.term-program__month {
display: grid;
gap: 2px;
}
.term-program__month-name {
font-family: var(--font-display-en);
font-weight: 800;
font-size: 1rem;
letter-spacing: 0;
text-transform: uppercase;
color: var(--color-cream);
}
.term-program__month-theme {
font-family: var(--font-body);
font-style: italic;
font-size: 0.82rem;
color: rgba(254, 250, 246, 0.7);
margin-bottom: 4px;
}
.term-program__items {
font-family: var(--font-body);
font-size: 0.8rem;
line-height: 1.55;
color: rgba(254, 250, 246, 0.82);
margin: 0;
}
/* ---- 15. GALLERY ----------------------------------------------------- */
/* Strict grid: 1 col mobile, 2 col tablet, 3 col small desktop, 4 col wide.
Each item enforces a uniform aspect ratio so rows align cleanly. */
.masonry {
display: grid;
gap: clamp(0.75rem, 1.8vw, 1.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 620px) { .masonry { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .masonry { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .masonry { grid-template-columns: repeat(4, 1fr); } }
.masonry .gallery-item {
display: block;
aspect-ratio: 4 / 5;
border-radius: var(--r-md);
overflow: hidden;
position: relative;
box-shadow: 0 14px 30px -22px var(--color-shadow);
background: var(--color-cream-deep);
transition: transform var(--t-med) var(--ease);
}
.masonry .gallery-item:nth-child(3n) { transform: rotate(-0.4deg); }
.masonry .gallery-item:nth-child(4n+1) { transform: rotate(0.4deg); }
.masonry .gallery-item:hover { transform: rotate(0) translateY(-3px); }
.masonry .gallery-item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.gallery-item__caption { display: none; }
/* Lightbox */
.lightbox {
position: fixed;
inset: 0;
background: rgba(27, 53, 82, 0.92);
display: none;
align-items: center;
justify-content: center;
z-index: 100;
padding: var(--gutter);
}
.lightbox.is-open { display: flex; }
.lightbox__img {
max-width: 90vw;
max-height: 85vh;
border-radius: var(--r-md);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.lightbox__close {
position: absolute;
top: 24px; right: 24px;
color: var(--color-cream);
font-size: 1.6rem;
background: rgba(0, 0, 0, 0.3);
width: 48px; height: 48px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.lightbox__caption { display: none; }
/* ---- 16. CONTACT PAGE ------------------------------------------------ */
.contact-grid {
display: grid;
gap: clamp(2rem, 4vw, 3.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 880px) { .contact-grid { grid-template-columns: 1.1fr 1fr; } }
.form-card {
background: var(--color-cream-deep);
padding: clamp(1.8rem, 3vw, 2.8rem);
border-radius: var(--r-lg);
position: relative;
}
.field {
display: block;
margin-bottom: var(--sp-5, 1.25rem);
}
.field label {
display: block;
font-weight: 700;
font-size: 0.9rem;
color: var(--color-navy);
margin-bottom: 0.4em;
letter-spacing: 0.04em;
}
.field input,
.field textarea {
width: 100%;
padding: 0.85em 1em;
border: 2px solid transparent;
border-bottom-color: rgba(44, 76, 109, 0.2);
border-radius: var(--r-sm);
background: var(--color-cream);
font: inherit;
color: var(--color-charcoal);
transition: border-color var(--t-fast) var(--ease);
}
.field input:focus,
.field textarea:focus {
outline: none;
border-color: var(--color-coral);
}
.field textarea { min-height: 140px; resize: vertical; }
.location-card {
background: var(--color-navy);
color: var(--color-cream);
border-radius: var(--r-lg);
padding: clamp(1.8rem, 3vw, 2.8rem);
position: relative;
overflow: hidden;
}
.location-card h2 { color: var(--color-cream); margin-bottom: var(--sp-4); font-size: 2rem; }
.location-card p { color: rgba(254, 250, 246, 0.85); margin-bottom: var(--sp-3); }
.location-card .address-line {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
margin-bottom: var(--sp-3);
}
.location-card .address-line strong {
font-family: var(--font-display-en);
font-weight: 800;
font-size: 1.4rem;
color: var(--color-cream);
line-height: 1.1;
}
html[lang="bg"] .location-card .address-line strong { font-family: var(--font-display-bg); }
.location-map {
display: block; /* wrapper */
margin-top: var(--sp-6);
aspect-ratio: 16/10;
border-radius: var(--r-md);
overflow: hidden;
border: 4px solid var(--color-cream);
/* Fallback colour shown while the OSM iframe loads (or if it's blocked).
* Matches OSM's standard land tint so the layout doesn't look broken. */
background: #f2eee3;
/* Anchor for the coral pin overlay (see &__pin below). */
position: relative;
cursor: pointer;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.location-map:hover, .location-map:focus-visible {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(44, 76, 109, 0.18);
}
/* Iframe is presentation-only: the wrapping handles the click, the
* iframe can't be panned/dragged out of alignment with the overlay pin,
* and keyboard focus skips it (tabindex="-1" in the markup). */
.location-map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
background: transparent;
pointer-events: none;
}
/* Coral SVG pin overlay. We omit the OSM iframe's built-in green marker and
* draw our own at the dead-centre of the iframe — which lines up with the
* centre of the bbox set on the iframe URL, i.e. our actual address.
* Translate(-50%, -100%) anchors the SVG by its tip (bottom-centre). */
.location-map__pin {
position: absolute;
left: 50%;
top: 50%;
width: 32px;
height: auto;
transform: translate(-50%, -100%);
/* The wrapping handles clicks; the pin overlay shouldn't swallow them. */
pointer-events: none;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
transition: transform var(--t-fast) var(--ease);
}
.location-map:hover .location-map__pin,
.location-map:focus-visible .location-map__pin {
transform: translate(-50%, -110%) scale(1.08);
}
.location-map__link {
margin: var(--sp-3) 0 0;
font-size: 0.9rem;
letter-spacing: 0.04em;
}
.location-map__link a {
color: var(--color-cream);
text-decoration: underline;
text-decoration-color: rgba(254, 250, 246, 0.5);
text-underline-offset: 4px;
transition: text-decoration-color 0.15s;
}
.location-map__link a:hover { text-decoration-color: var(--color-coral); }
.channels {
list-style: none;
margin: var(--sp-6) 0 0;
padding: 0;
display: grid;
gap: var(--sp-3);
}
.channels a {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--color-cream-deep);
border-radius: var(--r-pill);
color: var(--color-navy);
font-weight: 600;
transition: transform var(--t-fast) var(--ease);
}
.channels a:hover { transform: translateY(-2px); background: var(--color-coral-soft); }
/* ---- 17. FOOTER ------------------------------------------------------ */
.site-footer {
background: var(--color-cream-deep);
margin-top: clamp(4rem, 8vw, 7rem);
padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
border-top: 1px dashed rgba(44, 76, 109, 0.18);
}
.footer-grid {
display: grid;
gap: var(--sp-8);
grid-template-columns: 1fr;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand {
display: flex;
flex-direction: column;
gap: var(--sp-4);
max-width: 38ch;
}
/* Lizzie's wordmark — sized so it visually balances the tagline beneath. */
.footer-brand img {
width: clamp(200px, 22vw, 240px);
height: auto;
display: block;
margin-bottom: var(--sp-1);
}
.footer-brand p {
color: var(--color-charcoal-soft);
margin: 0;
line-height: 1.5;
}
.footer-heading {
font-family: var(--font-display-en);
font-weight: 800;
font-size: 1rem;
color: var(--color-navy);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--sp-3);
}
html[lang="bg"] .footer-heading { font-family: var(--font-display-bg); }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.footer-list a {
color: var(--color-charcoal);
font-size: 0.95rem;
}
.footer-list a:hover { color: var(--color-coral); }
.footer-bottom {
margin-top: var(--sp-12);
padding-top: var(--sp-4);
border-top: 1px solid rgba(44, 76, 109, 0.12);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-3);
font-size: 0.85rem;
color: var(--color-charcoal-soft);
}
/* ---- 18. SVG DECORATIONS / HELPERS ----------------------------------- */
.svg-divider {
display: block;
width: 100%;
height: 18px;
color: var(--color-coral);
opacity: 0.7;
margin-block: var(--sp-12);
}
/* Reveal on load */
@keyframes rise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: rise 0.9s var(--ease) both; }
.reveal--d1 { animation-delay: 0.12s; }
.reveal--d2 { animation-delay: 0.24s; }
.reveal--d3 { animation-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
.photo-card, .pillar, .hero__photo, .masonry .gallery-item { transform: none !important; }
}
/* ---- 18b. LEGAL / T&Cs page ----------------------------------------- */
.legal {
max-width: 70ch;
margin-inline: auto;
color: var(--color-charcoal);
line-height: 1.7;
}
.legal .lead { margin-bottom: var(--sp-8); }
.legal h2 {
font-family: var(--font-display-en);
font-weight: 800;
font-size: clamp(1.2rem, 2vw, 1.6rem);
letter-spacing: 0;
text-transform: uppercase;
color: var(--color-navy);
margin: var(--sp-12) 0 var(--sp-3);
}
html[lang="bg"] .legal h2 { font-family: var(--font-display-bg); }
.legal h2 + p { margin-top: 0; }
.legal p { margin: 0 0 var(--sp-4); }
.legal hr {
margin-block: var(--sp-12);
border: 0;
border-top: 1px dashed rgba(44, 76, 109, 0.2);
}
.legal__updated {
font-size: 0.9rem;
color: var(--color-charcoal-soft);
margin-top: var(--sp-8);
}
/* ---- 19. UTILITIES --------------------------------------------------- */
.sr-only {
position: absolute;
width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.no-scroll { overflow: hidden; }
/* ---- Maintenance takeover page ------------------------------------------ */
/* Standalone; no header / footer; bilingual stacked content so the message
* reads in EN + BG without a language toggle (the toggle lives in main.js
* which this page deliberately doesn't load). */
.maintenance-body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-cream);
padding: var(--sp-8) var(--sp-4);
}
.maintenance {
width: 100%;
max-width: 640px;
}
.maintenance__card {
background: var(--color-cream-deep);
border-radius: var(--r-lg);
padding: clamp(2rem, 5vw, 3.5rem);
text-align: center;
border-top: 6px solid var(--color-coral);
box-shadow: 0 8px 28px rgba(44, 76, 109, 0.10);
}
.maintenance__brand {
display: inline-block;
margin-bottom: var(--sp-4);
}
.maintenance__brand img { display: block; width: 96px; height: 96px; }
.maintenance__eyebrow {
color: var(--color-coral);
margin-bottom: var(--sp-2);
}
.maintenance__eyebrow--bg {
margin-top: var(--sp-8);
color: var(--color-navy);
}
.maintenance__heading {
font-family: var(--font-display-en);
font-weight: 800;
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
color: var(--color-navy);
margin: 0 0 var(--sp-3);
text-transform: uppercase;
letter-spacing: 0;
}
.maintenance__heading--bg { font-family: var(--font-display-bg); }
.maintenance__body {
color: var(--color-charcoal);
font-size: 1rem;
line-height: 1.6;
max-width: 44ch;
margin: 0 auto;
}
.maintenance__channels {
list-style: none;
padding: 0;
margin: var(--sp-6) 0 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--sp-4);
font-weight: 600;
}
.maintenance__channels a {
color: var(--color-coral);
text-decoration: underline;
text-decoration-color: rgba(236, 99, 95, 0.4);
text-underline-offset: 4px;
}
.maintenance__channels a:hover { text-decoration-color: var(--color-coral); }
/* ---------------------------------------------------------------------------
Post-booking manual payment panel (details.html). Shown on iOS only — see
js/details.js renderPaymentPanel(). Android + desktop redirect straight to
Revolut; iPhone/iPad get this card because the Revolut app intercepts the
deep-link and drops the pre-filled amount.
--------------------------------------------------------------------------- */
.payment-panel {
margin-top: 1.5rem;
padding: clamp(1.25rem, 4vw, 2rem);
background: var(--color-cream-deep);
border: 2px solid var(--color-coral);
border-radius: 16px;
}
.payment-panel__heading { margin: 0 0 0.75rem; }
.payment-panel__amount { font-size: 1.4rem; margin: 0.5rem 0; }
.payment-panel__ref,
.payment-panel__followup { font-size: 0.9rem; }
.payment-panel .btn--small {
font-size: 0.85rem;
padding: 0.35em 0.9em;
margin-left: 0.5rem;
}
/* ---------------------------------------------------------------------------
FAQ / "What to expect" page (faq.html, rendered by js/faq.js). A native
/ accordion — keyboard-accessible with zero JS, honours
prefers-reduced-motion via the global rule.
--------------------------------------------------------------------------- */
.container--narrow { max-width: 760px; }
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
background: #fff;
border: 1px solid var(--color-cream-darker);
border-left: 3px solid var(--color-coral);
border-radius: 12px;
padding: 0.25rem 1.1rem;
}
.faq-item__q {
font-family: var(--font-display, inherit);
font-size: 1.05rem;
color: var(--color-navy);
cursor: pointer;
padding: 0.85rem 0;
list-style: none;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
content: "+";
float: right;
color: var(--color-coral);
font-weight: 700;
margin-left: 1rem;
}
.faq-item[open] .faq-item__q::after { content: "\2013"; }
.faq-item__a {
padding: 0 0 1rem;
color: var(--color-charcoal, #444);
line-height: 1.6;
}