/* ============================================================
TOWBakes — styles
FRIENDS-inspired: black backdrop, primary-colour dots,
Central Perk warm caramel accents.
============================================================ */
/* FRIENDS-style display font (Gabriel Weiss' Friends Font — free for personal use;
commercial use requires a licence/donation to the author).
Declared ONCE here with font-display:block — it is the logo, so showing nothing
briefly beats painting it in a substitute face and swapping. The repeats
this declaration so the first paint can use it; keep the two in sync, since a
second @font-face for the same family would override the inline one. */
@font-face {
font-family: 'Friends';
src: url('../fonts/friends.woff2') format('woff2'),
url('../fonts/friends.ttf') format('truetype');
font-display: block;
}
:root {
/* Warm ivory, not white. Three rounds of enriching a dark purple never fixed
"dull", because the problem wasn't the purple — it was ten sections of one
hue on a near-black ground. On cream the bakes photograph as food rather
than as jewellery, and the FRIENDS dots finally have something to pop
against. The purple survives as the door in the story, where it means
something. */
--bg: #f8f3ea;
--bg-soft: #f1e8db;
--card: #fffefa;
--card-2: #f7f0e4;
--cream: #3d2c21; /* display type: cocoa now that the ground is light */
--text: #3d2c21;
--muted: #776458; /* warm taupe — grey would go cold against ivory */
--line: rgba(61, 44, 33, .13);
--line-warm: rgb(var(--gold-rgb) / .3);
/* RGB triplets so every translucent wash, hairline and scrim derives from the
same accent. Retheming is then a change to this block alone. */
--bg-rgb: 248 243 234;
--card-rgb: 255 254 250;
--gold-rgb: 125 87 38;
--purple-rgb: 170 128 150; /* the ambient wash, dusty rose at this lightness */
--shadow-rgb: 61 44 33; /* shadows are cocoa; black goes grey and dirty */
/* Topbar + footer band, one step deeper than the page. Not darker than this:
the footer sets small --muted text on it, and #ede2d0 dropped that to
4.37:1. */
--bg-deep: #f2e9dc;
--logo-mat: #f1e8db; /* mat behind the brand logo tile */
--door: #3d2470; /* the purple door frame in the story */
--door-2: #361f65;
--purple: #5b3596; /* door purple */
--purple-light: #8a5fd0;
/* Antique gold. The champagne this replaced was lighter than the ivory it
sits on, so it disappeared — on a light ground the metal has to go darker,
not brighter. These are set at the darkness that clears 4.5:1 on both the
page and the deeper topbar/footer band, since the accent carries small
uppercase text (kickers, the topbar, nav hovers). */
--caramel: #7d5726; /* 5.8:1 on --bg, 5.0:1 on --bg-deep */
--caramel-soft: #6d4b1c;
--caramel-deep: #6d4b1c;
--ink: #fffefa; /* text sitting on gold */
/* The door in the story stays dark in this theme, so its gold details need an
on-dark value rather than the page's dark-on-light accent. */
--on-door: #f0d7a8;
--toast-accent: #e8c88f;
--red: #e4032e; /* FRIENDS dot red */
--blue: #00a7e1; /* FRIENDS dot blue */
--yellow: #ffcf33; /* FRIENDS dot yellow */
/* Instagram's plum → magenta → amber sweep, deepened. The brand gradient at
full saturation only reaches 2.5:1 against the button's cream label; these
stops keep the sweep recognisable and clear 5:1. */
--ig-plum: #5d3277;
--ig-magenta: #a82c63;
--ig-amber: #b04a28;
--ig-fg: #fdf4f7;
--ig-grad: linear-gradient(150deg, var(--ig-plum), var(--ig-magenta) 52%, var(--ig-amber));
--radius: 16px;
--radius-sm: 11px;
--radius-lg: 24px;
/* One shadow scale, themed in one place. Light grounds need far less alpha
than dark ones, so these carry the whole difference. */
--shadow-sm: 0 10px 26px rgb(var(--shadow-rgb) / .10);
--shadow-card: 0 14px 38px rgb(var(--shadow-rgb) / .09);
--shadow-md: 0 18px 44px rgb(var(--shadow-rgb) / .14);
--shadow: 0 22px 56px rgb(var(--shadow-rgb) / .12);
--shadow-lift: 0 30px 74px rgb(var(--shadow-rgb) / .17);
--vignette-a: .06; /* barely there; on ivory any more reads as dirt */
--well: rgb(var(--shadow-rgb) / .07);
--well-shadow: inset 0 2px 12px rgb(var(--shadow-rgb) / .13);
--overlay: rgb(var(--shadow-rgb) / .38);
/* 1px inner top highlight — the cheapest way to make a surface read as a
physical, lit object rather than a flat fill. */
--edge: inset 0 1px 0 rgba(255, 255, 255, .85);
--container: 1180px;
--nav-h: 76px;
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
/* The logo letters. Keep the copy of this in sync or the intro
wordmark changes colour at the handoff. */
--wordmark-grad: linear-gradient(180deg, #4b3527, #2a1c13);
--toast-bg: rgb(var(--shadow-rgb) / .93);
--toast-fg: #f8f3ea;
/* Every stop is dark enough for --ink to clear 4.5:1, so the light-to-dark
sweep still reads as light moving across metal without the cream label
dropping out at the bright end. */
--gold-grad: linear-gradient(142deg, #96682a 0%, #7d5726 36%, #5c3f16 70%, #8a6129 100%);
--gold-hair: linear-gradient(90deg, transparent, rgb(var(--gold-rgb) / .5), transparent);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); overflow-x: hidden; background: var(--bg); }
body {
font-family: 'Gabarito', system-ui, -apple-system, 'Segoe UI', sans-serif;
background: var(--bg);
background-image:
radial-gradient(1200px 700px at 50% -8%, rgb(var(--purple-rgb) / .18), transparent 64%),
radial-gradient(900px 540px at 100% 6%, rgb(var(--gold-rgb) / .08), transparent 60%),
radial-gradient(780px 500px at 0% 30%, rgb(var(--purple-rgb) / .10), transparent 62%),
/* Light vignette only. At .55 it crushed the edges of every section and was
most of why the page read as dull. */
radial-gradient(150% 105% at 50% 45%, transparent 58%, rgb(var(--shadow-rgb) / var(--vignette-a)) 100%);
background-attachment: fixed;
color: var(--text);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/* Form controls don't inherit the page font on their own — the UA sheet gives
them Arial, which is what the filter chips and the cart badge were rendering
in. Family only: each control already sets the size it wants. */
button, input, select, textarea {
font-family: inherit;
}
/* Fine film grain over the whole page — reads as printed matter rather than a
perfectly smooth screen. Ivory shows noise far more readily than near-black
did, so this is dialled well back from the dark theme's .035. */
body::after {
content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: .02;
background-image: url("data:image/svg+xml;utf8,, but an still reserves 300x150 by default. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { flex: 0 0 auto; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }
h1, h2, h3 {
font-family: var(--font-display); font-optical-sizing: auto;
line-height: 1.08; letter-spacing: -0.022em; font-weight: 500;
}
/* Large display type wants a lighter weight and tighter tracking — 600 at 3rem
reads as bulky rather than expensive. */
h2 { font-size: clamp(2.15rem, 4.6vw, 3.5rem); font-weight: 400; }
.card__title, .why__card h3, .cat-card h3, .step h3, .footer__col h3 {
font-family: var(--font-display); font-weight: 500; letter-spacing: -0.012em;
}
a { color: inherit; text-decoration: none; }
.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;
}
/* ---------- Intro splash / preloader ----------
The curtain is painted by CRITICAL INLINE CSS in , so the first paint is
instantly dark with no white flash. The splash wordmark deliberately carries the
same .wordmark classes defined below, so it is pixel-identical to the hero mark
and the handoff at the end of its flight is invisible. It stays hidden until
both this stylesheet and the Friends font are ready — see initIntro() in app.js. */
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-family: inherit; font-weight: 600; font-size: .9rem; letter-spacing: .06em;
text-transform: uppercase;
padding: 16px 32px; border-radius: 999px; border: 0; cursor: pointer;
transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, background .3s ease, color .22s ease, border-color .22s ease;
}
.btn--sm { padding: 11px 20px; font-size: .8rem; letter-spacing: .05em; }
.btn--block { width: 100%; }
.btn--primary {
background: var(--gold-grad); background-size: 180% 180%; background-position: 0% 50%;
color: var(--ink); font-weight: 700;
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .45);
transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, background-position .55s ease;
}
/* Shift the gradient rather than brighten the fill — reads like light moving
across metal instead of a colour change. */
.btn--primary:hover { transform: translateY(-2px); background-position: 100% 50%; box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn--ghost { background: rgba(255, 255, 255, .02); color: var(--text); border: 1px solid var(--line-warm); box-shadow: var(--edge); }
.btn--ghost:hover { border-color: rgb(var(--gold-rgb) / .55); color: var(--caramel); transform: translateY(-2px); background: rgb(var(--gold-rgb) / .05); }
.btn:active { transform: translateY(0) scale(.98); }
.card__add:active, .chip:active { transform: scale(.96); }
/* ---------- FRIENDS dots ---------- */
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; vertical-align: middle; }
.dot--red { background: var(--red); }
.dot--blue { background: var(--blue); }
.dot--yellow { background: var(--yellow); }
/* ---------- Top bar ---------- */
.topbar {
background: var(--bg-deep); border-bottom: 1px solid var(--line-warm);
color: var(--caramel); text-align: center; font-size: .66rem; font-weight: 600;
padding: 10px 14px; letter-spacing: .3em; text-transform: uppercase;
}
/* Visible keyboard focus for all interactive elements */
:focus-visible {
outline: 3px solid var(--caramel);
outline-offset: 2px;
border-radius: 6px;
}
/* ---------- Navbar ---------- */
.nav {
position: sticky; top: 0; z-index: 60;
background: rgb(var(--bg-rgb) / .8);
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
border-bottom: 1px solid var(--line);
}
.nav__inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__logo {
width: 44px; height: 44px; border-radius: 12px; object-fit: contain;
border: 1px solid var(--line-warm); background: var(--logo-mat); box-shadow: var(--edge);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__text strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.brand__text em { font-style: normal; font-size: .72rem; color: var(--muted); }
.nav__links { display: flex; align-items: center; gap: 30px; }
/* The vertical padding is hit area, not spacing: the caps-height text is only
20px tall, under the 24px minimum pointer target. */
.nav__links a { position: relative; color: var(--muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; transition: color .2s; padding: 6px 0; }
.nav__links a:hover { color: var(--caramel); }
.nav__links a::after {
content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
background: linear-gradient(90deg, var(--caramel), transparent);
transform: scaleX(0); transform-origin: left; transition: transform .32s ease;
}
.nav__links a:hover::after { transform: scaleX(1); }
.cart-btn {
position: relative; background: rgba(255,255,255,.03); border: 1px solid var(--line);
color: var(--text); width: 44px; height: 44px; border-radius: 12px; box-shadow: var(--edge);
display: grid; place-items: center; cursor: pointer; transition: border-color .2s, transform .15s, color .2s;
}
.cart-btn:hover { border-color: var(--line-warm); color: var(--caramel); transform: translateY(-1px); }
.cart-btn__count {
position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px;
background: var(--red); color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 800;
display: grid; place-items: center; border: 2px solid var(--bg);
}
/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(60px, 10vw, 120px) 0 clamp(50px, 7vw, 90px); overflow: hidden; }
.hero__glow {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(620px 340px at 78% 6%, rgb(var(--gold-rgb) / .17), transparent 60%),
radial-gradient(560px 320px at 15% 92%, rgb(var(--purple-rgb) / .28), transparent 60%);
}
.hero__inner { position: relative; z-index: 1; text-align: center; max-width: 100%; }
.hero__inner > * { max-width: 100%; }
.hero__slogan, .hero__tagline { overflow-wrap: break-word; }
.wordmark { max-width: 100%; }
/* balance: at .38em tracking this line is ~420px, so on a phone it wraps and
orphans the last word. Balancing splits it into two even lines instead. */
.hero__eyebrow { color: var(--caramel); font-weight: 600; letter-spacing: .38em; text-transform: uppercase; font-size: .68rem; text-wrap: balance; }
.hero__logo {
width: min(340px, 74vw); height: auto; margin: 26px auto 4px; border-radius: 22px;
box-shadow: 0 24px 60px rgb(var(--purple-rgb) / .45), 0 0 0 1px var(--line);
animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .hero__logo { animation: none; } }
/* FRIENDS-style dotted wordmark — a colored dot after every letter */
.wordmark {
margin: 20px auto 0; display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 8px; font-family: 'Friends', 'Gabarito', cursive;
font-weight: 400; letter-spacing: 1px;
font-size: clamp(2.2rem, 7vw, 4.2rem); line-height: 1;
}
.wordmark__letter {
font-family: 'Friends', 'Gabarito', sans-serif;
/* background-image, not the `background` shorthand — the shorthand resets
background-clip and the letters paint as solid blocks. */
background-image: var(--wordmark-grad);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.wordmark__letter--gap { margin-left: 12px; }
.wordmark .dot { width: clamp(6px, 1.1vw, 10px); height: clamp(6px, 1.1vw, 10px); }
.wordmark .dot { animation: dotPop .5s ease both; }
.wordmark span:nth-of-type(2) { animation-delay: .10s; }
.wordmark span:nth-of-type(4) { animation-delay: .18s; }
.wordmark span:nth-of-type(6) { animation-delay: .26s; }
.wordmark span:nth-of-type(8) { animation-delay: .34s; }
.wordmark span:nth-of-type(10) { animation-delay: .42s; }
.wordmark span:nth-of-type(12) { animation-delay: .50s; }
.wordmark span:nth-of-type(14) { animation-delay: .58s; }
.wordmark span:nth-of-type(16) { animation-delay: .66s; }
@keyframes dotPop { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.hero__slogan {
margin: 26px auto 0; font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: clamp(1.55rem, 3.5vw, 2.5rem); line-height: 1.24; letter-spacing: -0.015em;
background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__tagline { max-width: 54ch; margin: 22px auto 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.12rem); line-height: 1.78; }
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 42px; }
/* Stats as a single hairline-divided rail rather than three separate tiles —
boxed stat chips are dashboard furniture. */
.hero__stats {
list-style: none; display: flex; justify-content: center; flex-wrap: wrap;
/* Hugs its content so the hairlines end with the stats rather than running on
to a fixed width — otherwise a single stat sits marooned mid-rule. */
margin: 64px auto 0; width: fit-content; max-width: 640px;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hero__stats li { padding: 24px 34px; position: relative; }
.hero__stats li + li::before {
content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: var(--line);
}
.hero__stats strong {
display: block; font-family: var(--font-display); font-size: 1.85rem; font-weight: 400;
letter-spacing: -0.02em;
background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__stats span { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .24em; margin-top: 6px; display: block; }
/* ---------- Section shared ---------- */
/* Kicker flanked by hairlines — the bare gold caption repeated on every section
read as filler; a rule turns it into a deliberate label. */
.section-kicker {
display: inline-flex; align-items: center; gap: 14px;
font-family: 'Gabarito', sans-serif; font-size: .68rem; font-weight: 700;
color: var(--caramel); text-transform: uppercase; letter-spacing: .34em; margin-bottom: 20px;
}
.section-kicker::before, .section-kicker::after {
content: ""; width: clamp(22px, 5vw, 46px); height: 1px;
background: linear-gradient(90deg, transparent, rgb(var(--gold-rgb) / .6));
}
.section-kicker::after { background: linear-gradient(90deg, rgb(var(--gold-rgb) / .6), transparent); }
.story__body .section-kicker::before { display: none; }
.menu__head { text-align: center; max-width: 680px; margin: 0 auto; }
.menu__head h2 { position: relative; padding-bottom: 26px; }
.menu__head h2::after {
content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 66px; height: 1px; background: var(--gold-hair);
}
.menu__sub { color: var(--muted); margin-top: 20px; font-size: 1.03rem; max-width: 56ch; margin-inline: auto; }
/* ---------- Story ---------- */
.story { background: var(--bg-soft); border-block: 1px solid var(--line); padding: clamp(70px, 9vw, 128px) 0; }
.story__inner { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(34px, 5vw, 76px); align-items: center; }
.story__frame { display: grid; place-items: center; }
/* The door frame is the brand's origin story, so it stays — but muted, matted
and lit rather than rendered in full-saturation purple and yellow. */
.peephole {
width: min(268px, 70vw); aspect-ratio: 1; border-radius: var(--radius-lg);
background:
radial-gradient(115% 90% at 50% 0%, rgb(240 215 168 / .13), transparent 62%),
repeating-linear-gradient(45deg, var(--door), var(--door) 20px, var(--door-2) 20px, var(--door-2) 40px);
border: 1px solid rgb(240 215 168 / .22);
box-shadow: var(--shadow), inset 0 0 0 1px rgb(240 215 168 / .12), inset 0 1px 0 rgb(255 255 255 / .1);
display: grid; place-items: center; position: relative;
}
.peephole::after {
content: ""; position: absolute; width: 32%; aspect-ratio: 1; border-radius: 50%;
border: 1px solid rgb(255 255 255 / .16); background: rgb(0 0 0 / .26);
box-shadow: inset 0 2px 12px rgb(0 0 0 / .5);
}
.peephole__mark { position: relative; z-index: 1; width: 58px; height: 58px; color: var(--on-door); opacity: .9; }
.story__frame-caption { font-family: var(--font-display); font-style: italic; color: var(--muted); margin-top: 20px; font-size: 1rem; }
/* Cap the measure — 90-character lines are why the story read as a wall. */
.story__body p { color: var(--muted); margin-top: 18px; font-size: 1.04rem; line-height: 1.82; max-width: 62ch; }
.story__body strong { color: var(--text); font-weight: 600; }
/* Gabarito is loaded upright only, so italic body text was a synthesized slant.
Fraunces ships a real italic and is already on the page. */
.story__body em { color: var(--caramel); font-style: italic; font-family: var(--font-display); }
/* Editorial drop cap on the opening paragraph */
.story__body p:first-of-type::first-letter {
font-family: var(--font-display); font-weight: 400; float: left;
font-size: 3.6em; line-height: .76; padding: 10px 14px 0 0; color: var(--caramel);
}
.story__body h2 { margin-top: 4px; }
.story__body .btn { margin-top: 32px; }
/* Pull quote to break up the run of paragraphs */
.story__pull {
margin: 30px 0 4px; padding: 4px 0 4px 24px; border-left: 1px solid var(--line-warm);
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 1.22rem; line-height: 1.5; color: var(--caramel-soft); max-width: 46ch;
}
/* ---------- Menu ---------- */
.menu { padding: clamp(70px, 9vw, 128px) 0; }
.menu__filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 40px 0 48px; }
.chip {
background: rgba(255,255,255,.025); border: 1px solid var(--line); color: var(--muted);
padding: 14px 22px; border-radius: 999px; cursor: pointer;
font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
box-shadow: var(--edge);
transition: color .22s ease, border-color .22s ease, background .22s ease;
}
.chip:hover { color: var(--text); border-color: var(--line-warm); }
.chip.is-active { background: var(--gold-grad); color: var(--ink); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
/* Three across at full width. Four columns squeezed the cards so hard that the
price and the Add button collided. */
.menu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
background: linear-gradient(178deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%), var(--card);
border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden; display: flex; flex-direction: column;
box-shadow: var(--shadow-card), var(--edge);
transition: transform .38s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .38s ease;
}
.card:hover {
transform: translateY(-7px); border-color: var(--line-warm);
box-shadow: var(--shadow-lift), 0 0 0 1px rgb(var(--gold-rgb) / .1), var(--edge);
}
.card__emoji {
height: 210px; display: grid; place-items: center;
background:
radial-gradient(120% 90% at 50% 0%, rgb(var(--gold-rgb) / .07), transparent 62%),
linear-gradient(160deg, var(--card-2), var(--card));
position: relative; overflow: hidden;
border-bottom: 1px solid var(--line);
}
/* Line-art plate for items that have no photograph yet. A giant emoji next to
real product shots was the most jarring thing in the grid. */
.card__plate { width: 62px; height: 62px; color: var(--caramel); opacity: .8; }
.card__emoji::before {
content: ""; position: absolute; inset: 0; opacity: .5;
background-image: repeating-linear-gradient(135deg, rgb(var(--gold-rgb) / .05) 0 1px, transparent 1px 11px);
}
.card__emoji--photo::before { display: none; }
.card__emoji--photo { padding: 0; }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__img { transform: scale(1.05); }
/* The product shots come from different sessions with different white balance,
so they still get one warm scrim to read as a single set — but food has to
look appetising, so this lifts saturation rather than muting it. */
.card__img, .gallery__item img { filter: saturate(1.08) contrast(1.04) brightness(1.02); }
.card__emoji--photo::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, transparent 62%, rgb(var(--shadow-rgb) / .14)),
linear-gradient(0deg, rgb(var(--gold-rgb) / .05), rgb(var(--gold-rgb) / .05));
}
.card__tag {
/* Both the photo and the scrim over it are positioned, so without a stacking
order the badge would be painted under them. */
position: absolute; z-index: 2; top: 12px; left: 12px; font-size: .62rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .12em; padding: 5px 11px; border-radius: 999px;
/* Sits on top of a photo, so it stays a dark pill with light type in every
theme — the page's dark-on-light accent would be unreadable here. */
background: rgb(var(--shadow-rgb) / .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
color: var(--on-door); border: 1px solid rgb(240 215 168 / .28);
}
.card__body { padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__title { font-size: 1.22rem; }
.card__desc { color: var(--muted); font-size: .89rem; flex: 1; line-height: 1.68; }
/* Size picker. A segmented pill rather than a : there are only ever
two or three options and the price below reacts to the choice, so it should
be visible at a glance instead of hidden behind a dropdown. */
.card__sizes {
display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px;
}
.card__sizes .size {
background: transparent; border: 1px solid var(--line); color: var(--muted);
font-family: inherit; font-weight: 600; font-size: .72rem;
letter-spacing: .06em; text-transform: uppercase;
padding: 7px 15px; min-height: 40px; border-radius: 999px; cursor: pointer;
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.card__sizes .size:hover { color: var(--text); border-color: var(--line-warm); }
.card__sizes .size.is-active {
background: var(--gold-grad); color: var(--ink);
border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.card__sizes .size:active { transform: scale(.96); }
.card__row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.card__price {
font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--caramel);
line-height: 1.15; letter-spacing: -0.01em;
}
.card__price span { font-family: 'Gabarito', sans-serif; font-size: .72rem; color: var(--muted); font-weight: 500; letter-spacing: .02em; }
/* "Price on request" is prose, not a figure — sizing it like a figure made it
wrap into the Add button. */
.card__price--poa { font-size: .82rem; font-style: italic; color: var(--caramel-soft); max-width: 11ch; }
.card__add {
background: transparent; border: 1px solid var(--line-warm); color: var(--caramel);
font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
padding: 11px 17px; min-height: 40px; border-radius: 999px; cursor: pointer; white-space: nowrap;
transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card__add:hover { background: var(--gold-grad); color: var(--ink); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.card__control { display: flex; align-items: center; justify-content: flex-end; }
.card__adds { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.card__adds .card__add { padding: 8px 14px; min-height: 36px; }
.qty--card { background: var(--card-2); }
.qty--card span { color: var(--text); }
/* ---------- How it works ---------- */
.how { background: var(--bg-soft); border-block: 1px solid var(--line); padding: clamp(70px, 9vw, 128px) 0; }
.how__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.how__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.how__num {
display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
background: var(--gold-grad); color: var(--ink);
/* 800 is the heaviest weight loaded; 900 was silently clamped to it anyway. */
font-weight: 800; font-size: 1.2rem; margin-bottom: 16px;
}
.how__card h3 { font-size: 1.2rem; margin-bottom: 6px; }
.how__card p { color: var(--muted); font-size: .95rem; }
/* ---------- Good to know ---------- */
.goodtoknow {
list-style: none; margin: 46px 0 0; display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px;
}
.goodtoknow li {
display: flex; gap: 14px; align-items: flex-start;
border-radius: var(--radius-sm); padding: 20px 22px;
}
.goodtoknow li svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--caramel); margin-top: 3px; }
.goodtoknow li div { display: flex; flex-direction: column; font-size: .87rem; color: var(--muted); }
.goodtoknow li strong { color: var(--text); font-size: .97rem; margin-bottom: 3px; }
/* ---------- Footer ---------- */
.footer { padding: 84px 0 34px; border-top: 1px solid var(--line); background: var(--bg-deep); }
.footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.brand--footer .brand__text em { font-size: .78rem; }
.footer__note { color: var(--muted); margin-top: 18px; font-size: .9rem; max-width: 34ch; line-height: 1.75; }
.footer__col h3 {
font-size: .7rem; font-weight: 700; margin-bottom: 20px; color: var(--caramel);
text-transform: uppercase; letter-spacing: .24em; font-family: 'Gabarito', sans-serif;
}
.footer__link { display: flex; align-items: center; gap: 11px; color: var(--muted); font-weight: 500; margin-bottom: 13px; transition: color .2s ease; }
.footer__link:hover { color: var(--caramel); }
.footer__meta { display: flex; align-items: flex-start; gap: 11px; color: var(--muted); font-size: .88rem; margin-bottom: 13px; }
.footer__link svg, .footer__meta svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--caramel-deep); margin-top: 4px; }
.footer__link:hover svg { color: var(--caramel); }
.footer__copy { text-align: center; color: var(--muted); font-size: .78rem; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); letter-spacing: .04em; }
/* ---------- Cart drawer ---------- */
.cart-overlay {
position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(2px);
opacity: 0; visibility: hidden; transition: opacity .3s ease; z-index: 90;
}
.cart-overlay.is-open { opacity: 1; visibility: visible; }
.cart {
position: fixed; top: 0; right: 0; height: 100%; width: min(430px, 100%);
background: var(--bg-soft); border-left: 1px solid var(--line-warm); z-index: 100;
transform: translateX(100%); transition: transform .36s cubic-bezier(.4,0,.2,1);
display: flex; flex-direction: column;
}
.cart.is-open { transform: translateX(0); box-shadow: var(--shadow); }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: 22px; border-bottom: 1px solid var(--line); }
.cart__head h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.cart__close { background: none; border: 0; color: var(--muted); font-size: 1.3rem; cursor: pointer; transition: color .2s; }
.cart__close:hover { color: var(--text); }
.cart__items { flex: 1; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; }
.cart__empty { text-align: center; color: var(--muted); margin: auto 0; padding: 40px 0; }
.cart__empty svg { width: 40px; height: 40px; color: var(--caramel-deep); margin: 0 auto 16px; opacity: .7; }
.cart-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.cart-item__emoji { width: 52px; height: 52px; border-radius: 12px; background: var(--card-2); display: grid; place-items: center; border: 1px solid var(--line); overflow: hidden; }
.cart-item__emoji img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__emoji svg { width: 22px; height: 22px; color: var(--caramel); opacity: .8; }
.cart-item__name { font-weight: 700; font-size: .98rem; }
.cart-item__price { color: var(--muted); font-size: .85rem; }
.cart-item__right { text-align: right; }
.qty { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.qty button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; color: var(--text); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.qty button:hover { background: var(--card-2); }
.qty span { min-width: 20px; text-align: center; font-weight: 700; font-size: .9rem; }
.cart-item__remove { background: none; border: 0; color: var(--muted); font-size: .78rem; cursor: pointer; margin-top: 6px; }
.cart-item__remove:hover { color: var(--red); }
.cart__foot { border-top: 1px solid var(--line); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.cart__total { display: flex; align-items: center; justify-content: space-between; font-size: 1.1rem; }
.cart__total strong { font-size: 1.5rem; color: var(--caramel); }
/* Name and phone share a row; the date takes its own so the drawer's three
fields don't squeeze each other into unreadable slivers. */
.cart__fields { display: flex; gap: 10px; flex-wrap: wrap; }
.cart__field { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: var(--muted); flex: 1; min-width: 128px; }
.cart__field--date { flex-basis: 100%; }
.cart__field b { color: var(--red); }
.cart__field input { background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 11px 14px; font-family: inherit; font-size: .95rem; width: 100%; }
.cart__field input:focus { outline: none; border-color: var(--caramel); }
.cart__field input.is-invalid { border-color: var(--red); }
/* Safari renders an empty date input taller than a text input without this. */
.cart__field input[type="date"] { min-height: 45px; appearance: none; -webkit-appearance: none; }
/* No opacity here: at this size, fading --muted drops the hint under 4.5:1. */
.cart__field-hint { font-size: .72rem; color: var(--muted); margin-top: -2px; }
/* Per-item note */
.cart-item__opts { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 7px; margin-top: 2px; padding-left: 64px; }
.cart-item__note {
background: var(--card); border: 1px solid var(--line); color: var(--text);
border-radius: 9px; padding: 8px 11px; font-family: inherit; font-size: .85rem; width: 100%;
}
.cart-item__note:focus { outline: none; border-color: var(--caramel); }
.cart-item__note::placeholder { color: var(--muted); opacity: .7; }
.cart__hint { text-align: center; color: var(--muted); font-size: .78rem; }
.cart__dm {
display: flex; flex-direction: column; gap: 8px;
background: var(--card); border: 1px solid var(--line-warm); border-radius: 12px;
padding: 12px 12px 10px;
}
.cart__dm[hidden] { display: none; }
.cart__dm-title { font-weight: 700; font-size: .88rem; color: var(--text); }
.cart__dm-hint { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.cart__dm textarea {
width: 100%; min-height: 96px; resize: vertical;
background: var(--card-2); border: 1px solid var(--line); color: var(--text);
border-radius: 9px; padding: 8px 10px; font-family: inherit; font-size: .8rem; line-height: 1.45;
}
.cart__dm textarea:focus { outline: none; border-color: var(--caramel); }
.cart__dm kbd {
display: inline-block; padding: 1px 6px; border-radius: 5px;
border: 1px solid var(--line); background: var(--card-2); font-size: .74rem;
}
/* ---------- Toast ---------- */
.toast {
position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(16px);
/* The toast has to carry against the page, so it inverts: a cocoa pill on
ivory, where a cream one would vanish into the background. */
background: var(--toast-bg); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
color: var(--toast-fg); font-weight: 500; padding: 11px 18px; border-radius: 999px;
border: 1px solid var(--line-warm); box-shadow: var(--shadow-md), var(--edge); z-index: 120;
/* Hidden by opacity rather than by sliding out of frame: the slide distance
is relative to the toast's own height, which is shorter than the offset it
sits at, so a sliver used to stay parked at the bottom of the page.
Visibility trails the fade so it is gone from the a11y tree afterwards. */
opacity: 0; visibility: hidden;
transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease, visibility .35s;
max-width: 90vw;
display: flex; align-items: center; gap: 11px;
}
.toast.is-show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }
.toast__icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: rgba(255,255,255,.05); }
.toast__icon img { width: 100%; height: 100%; object-fit: cover; }
.toast__ico { width: 16px; height: 16px; color: var(--toast-accent); }
.toast__msg { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
/* ---------- Gradient accent text ---------- */
.grad-text {
background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes shimmer { to { background-position: 200% center; } }
/* ---------- Story signature ---------- */
.story__signature { margin-top: 24px; display: flex; flex-direction: column; line-height: 1.25; }
.story__signature { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: var(--caramel); }
.story__signature span { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.25rem; color: var(--muted); margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
.grad-text, .hero__slogan { animation: none; }
.reveal { transition: none; }
}
/* ============================================================
Premium sections (why / creations / steps / reviews /
gallery / faq / floating WA / sticky mobile bar)
============================================================ */
.container--narrow { max-width: 780px; }
/* Skip link */
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--gold-grad); color: var(--ink); padding: 10px 18px;
border-radius: 0 0 10px 0; font-weight: 800;
}
.skip-link:focus { left: 0; }
/* Instagram — the brand sweep, deepened, with a gold hairline. Unmistakable
thanks to the glyph, without the neon fighting the whole palette. */
.btn--ig {
background: var(--ig-grad);
color: var(--ig-fg); border: 1px solid rgb(var(--gold-rgb) / .28);
box-shadow: var(--shadow-sm), var(--edge);
}
.btn--ig:hover {
filter: saturate(1.12) brightness(1.08);
border-color: rgb(var(--gold-rgb) / .5); transform: translateY(-2px);
box-shadow: var(--shadow-md), var(--edge);
}
/* Sized in em so the glyph tracks the label in both the hero and the mobile bar. */
.ig-ico { flex: 0 0 auto; width: 1.25em; height: 1.25em; }
/* Section wrappers — alternating tone gives the page a cadence instead of one
uninterrupted field of purple. */
.why, .creations, .reviews, .gallery, .faq { padding: clamp(70px, 9vw, 128px) 0; }
.creations, .gallery { background: var(--bg-soft); border-block: 1px solid var(--line); }
.why { border-top: 1px solid var(--line); }
/* Shared raised-surface treatment */
.why__card, .cat-card, .step, .review, .faq__item, .how__card, .goodtoknow li {
background: linear-gradient(178deg, rgba(255,255,255,.04), rgba(255,255,255,0) 46%), var(--card);
border: 1px solid var(--line); box-shadow: var(--shadow-card), var(--edge);
}
.why__card, .cat-card, .step, .review {
transition: transform .32s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .32s ease;
}
.why__card:hover, .cat-card:hover, .review:hover {
transform: translateY(-6px); border-color: var(--line-warm);
box-shadow: var(--shadow-lift), var(--edge);
}
/* Icon plate — a bordered tile reads as craft; a bare emoji reads as a draft. */
.ico-plate {
width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
margin-bottom: 18px; color: var(--caramel);
background: linear-gradient(150deg, rgb(var(--gold-rgb) / .14), rgb(var(--gold-rgb) / .03));
border: 1px solid var(--line-warm); box-shadow: var(--edge);
}
.ico-plate svg { width: 23px; height: 23px; }
.ico-plate--photo { padding: 0; overflow: hidden; }
.ico-plate--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Why choose us — 3 across, so six cards fill two full rows instead of
leaving an orphan pair on a four-column grid. */
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.why__card { border-radius: var(--radius); padding: 32px 28px; }
.why__card h3 { font-size: 1.16rem; margin-bottom: 8px; }
.why__card p { color: var(--muted); font-size: .93rem; }
/* Our creations (categories) */
.creations__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px; }
.cat-card {
display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
border-radius: var(--radius); padding: 28px 24px;
}
.cat-card h3 { font-size: 1.1rem; }
.cat-card p { color: var(--muted); font-size: .85rem; }
.cat-card__more {
margin-top: 14px; font-size: .68rem; font-weight: 700; letter-spacing: .18em;
text-transform: uppercase; color: var(--caramel); opacity: 0;
transform: translateX(-6px); transition: opacity .28s ease, transform .28s ease;
}
.cat-card:hover .cat-card__more { opacity: 1; transform: none; }
/* How it works — 4 steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 54px; }
.step { position: relative; border-radius: var(--radius); padding: 32px 26px; }
/* Outlined numeral in the display serif — a filled gold circle with a heavy
sans numeral looked like a step tracker in an app. */
.step__num {
display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
border: 1px solid var(--line-warm); background: rgb(var(--gold-rgb) / .07);
color: var(--caramel); font-family: var(--font-display); font-weight: 500; font-size: 1.15rem;
margin-bottom: 18px; box-shadow: var(--edge);
}
.step h3 { font-size: 1.12rem; margin-bottom: 7px; }
.step p { color: var(--muted); font-size: .9rem; }
.step:not(:last-child)::after {
content: ""; position: absolute; right: -11px; top: 55px; z-index: 1;
width: 22px; height: 1px; background: linear-gradient(90deg, rgb(var(--gold-rgb) / .5), transparent);
}
/* Testimonials */
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.review { border-radius: var(--radius); padding: 34px 30px; display: flex; flex-direction: column; gap: 16px; position: relative; }
/* Oversized quote mark, set in the display serif and kept very faint */
.review::before {
content: "\201C"; position: absolute; top: -14px; right: 20px;
font-family: var(--font-display); font-size: 8rem; line-height: 1;
color: var(--caramel); opacity: .09; pointer-events: none;
}
.review__stars { display: flex; gap: 5px; color: var(--caramel); }
.review__stars svg { width: 15px; height: 15px; }
.review blockquote { color: var(--text); font-size: 1rem; line-height: 1.66; font-style: italic; font-family: var(--font-display); font-weight: 400; }
.review figcaption { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: auto; }
/* Gallery */
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 52px; }
.gallery__item {
position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius);
overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card);
transition: border-color .3s ease, box-shadow .3s ease;
}
.gallery__item::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.45));
opacity: 0; transition: opacity .35s ease;
}
.gallery__item:hover { border-color: var(--line-warm); box-shadow: var(--shadow-lift); }
.gallery__item:hover::after { opacity: 1; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item--cta {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; gap: 6px; padding: 18px;
background: linear-gradient(160deg, var(--card-2), var(--card));
}
.gallery__item--cta svg { width: 26px; height: 26px; color: var(--caramel); margin-bottom: 4px; }
.gallery__item--cta strong { font-size: .9rem; }
.gallery__item--cta em { color: var(--muted); font-size: .76rem; font-style: normal; letter-spacing: .04em; }
/* FAQ */
.faq__list { margin-top: 46px; display: flex; flex-direction: column; gap: 12px; }
.faq__item { border-radius: var(--radius-sm); overflow: hidden; transition: border-color .25s ease; }
.faq__item[open] { border-color: var(--line-warm); }
.faq__item summary {
cursor: pointer; padding: 21px 24px; font-family: var(--font-display); font-weight: 500;
font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between;
align-items: center; gap: 12px; transition: color .2s ease;
}
.faq__item summary:hover { color: var(--caramel); }
.faq__item summary::-webkit-details-marker { display: none; }
/* Thin cross drawn from two rules instead of a chunky "+" glyph */
.faq__item summary::after {
content: ""; flex: 0 0 auto; width: 13px; height: 13px; position: relative;
background:
linear-gradient(var(--caramel), var(--caramel)) center/13px 1px no-repeat,
linear-gradient(var(--caramel), var(--caramel)) center/1px 13px no-repeat;
transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.faq__item[open] summary::after { transform: rotate(135deg); }
.faq__a { padding: 0 24px 22px; color: var(--muted); font-size: .95rem; line-height: 1.75; max-width: 68ch; }
/* Floating go-to-top — sits just above the cart floater */
.fab-top {
position: fixed; right: 20px; bottom: 156px; width: 54px; height: 54px; border-radius: 50%;
background: var(--card); color: var(--caramel);
border: 1px solid var(--line-warm); cursor: pointer; display: grid; place-items: center; z-index: 80;
box-shadow: var(--shadow-md), var(--edge);
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(10px);
transition: transform .2s ease, opacity .2s ease, visibility .2s ease, border-color .2s ease;
}
.fab-top.is-show { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.fab-top:hover { transform: scale(1.06); border-color: rgb(var(--gold-rgb) / .5); }
/* Floating cart */
.fab-cart {
position: fixed; right: 20px; bottom: 88px; width: 54px; height: 54px; border-radius: 50%;
background: var(--gold-grad); color: var(--ink);
border: 0; cursor: pointer; display: grid; place-items: center; z-index: 80;
box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.45);
transition: transform .2s ease;
}
.fab-cart:hover { transform: scale(1.06); }
.fab-cart__count {
position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px;
background: var(--red); color: #fff; border-radius: 999px; font-size: .74rem; font-weight: 800;
display: grid; place-items: center; border: 2px solid var(--bg);
}
.fab-cart.is-empty .fab-cart__count { display: none; }
/* Floating Instagram. The old version pulsed a neon ring forever, which is the
visual language of a support widget, not a patisserie. */
.fab-ig {
position: fixed; right: 20px; bottom: 20px; width: 54px; height: 54px; border-radius: 50%;
background: var(--ig-grad); color: var(--ig-fg);
display: grid; place-items: center; z-index: 80;
border: 1px solid rgb(var(--gold-rgb) / .28);
box-shadow: var(--shadow-md), var(--edge); transition: transform .2s ease, border-color .2s ease;
}
.fab-ig:hover { transform: scale(1.06); border-color: rgb(var(--gold-rgb) / .5); }
.fab-ig svg { width: 26px; height: 26px; }
/* Sticky mobile order bar */
.mobar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; display: none; gap: 10px;
padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
background: rgb(var(--bg-rgb) / .93); -webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%); border-top: 1px solid var(--line);
}
.mobar__ig { flex: 1; }
.mobar__cart { flex: 0 0 auto; }
/* ---------- Nav actions + mobile toggle ---------- */
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__toggle {
display: none; width: 46px; height: 46px; border-radius: 12px;
background: var(--card); border: 1px solid var(--line); cursor: pointer;
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__toggle span {
display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px;
transition: transform .25s ease, opacity .2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- Responsive ----------
The why / creations / menu / reviews grids are fixed-column on desktop so the
card counts land on full rows; they need explicit steps down. */
@media (max-width: 1080px) {
.why__grid, .menu__grid, .reviews__grid { grid-template-columns: repeat(2, 1fr); }
.creations__grid { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: repeat(2, 1fr); }
.step:not(:last-child)::after { display: none; }
}
@media (max-width: 820px) {
.nav__toggle { display: flex; }
.nav__links {
position: absolute; top: calc(var(--nav-h) + 1px); left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0;
background: rgb(var(--bg-rgb) / .98); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line); padding: 8px 22px 16px;
transform: translateY(-12px); opacity: 0; visibility: hidden;
transition: transform .25s ease, opacity .25s ease, visibility .25s;
}
.nav__links.is-open { transform: none; opacity: 1; visibility: visible; }
.nav__links a { padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
.nav__links a:last-child { border-bottom: 0; }
.nav__links a::after { display: none; }
.story__inner { grid-template-columns: 1fr; text-align: center; }
.story__body .section-kicker { display: inline-flex; }
.story__body .section-kicker::before { display: block; }
.story__body p, .story__pull { max-width: none; }
.story__pull { border-left: 0; border-top: 1px solid var(--line-warm); padding: 22px 0 0; margin-inline: auto; text-align: center; }
.gallery__grid { grid-template-columns: repeat(2, 1fr); }
.footer__inner { grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
/* sticky mobile order bar replaces the floating cart / Instagram */
.mobar { display: flex; }
.fab-ig, .fab-cart { display: none; }
.fab-top { bottom: 84px; }
body { padding-bottom: 68px; }
.toast { bottom: 84px; }
}
@media (max-width: 620px) {
/* Card sections stay two-across so tiles read as a set (desktop feel) instead
of a long one-at-a-time scroll. */
.why__grid,
.menu__grid,
.steps,
.reviews__grid,
.faq__list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.faq__list { display: grid; }
.why__card { padding: 22px 16px; }
.why__card h3 { font-size: 1.02rem; }
.why__card p { font-size: .86rem; }
.why__card .ico-plate { width: 40px; height: 40px; margin-bottom: 12px; border-radius: 11px; }
.why__card .ico-plate svg { width: 20px; height: 20px; }
.step { padding: 22px 16px; }
.step__num { width: 40px; height: 40px; font-size: 1.05rem; margin-bottom: 12px; }
.step h3 { font-size: 1.02rem; }
.step p { font-size: .86rem; }
.review { padding: 22px 16px; gap: 12px; }
.review::before { font-size: 5.5rem; top: -8px; right: 12px; }
.review blockquote { font-size: .9rem; line-height: 1.55; }
.review figcaption { font-size: .7rem; }
/* Three reviews in two columns leaves one orphan — span it full-width. */
.reviews__grid .review:last-child:nth-child(odd) { grid-column: 1 / -1; }
.faq__item summary { font-size: .88rem; padding: 14px 14px; gap: 8px; line-height: 1.35; }
.faq__item summary::after { width: 11px; height: 11px; background:
linear-gradient(var(--caramel), var(--caramel)) center/11px 1px no-repeat,
linear-gradient(var(--caramel), var(--caramel)) center/1px 11px no-repeat; }
.faq__a { padding: 0 14px 14px; font-size: .84rem; line-height: 1.6; max-width: none; }
/* Odd last FAQ in a 2-col grid — same full-width treatment. */
.faq__list .faq__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.card__emoji { height: 140px; }
.card__body { padding: 14px 12px 14px; gap: 6px; }
.card__title { font-size: 1rem; }
.card__desc { font-size: .78rem; line-height: 1.5; }
.card__sizes { margin-top: 8px; gap: 4px; }
.card__sizes .size { padding: 6px 10px; min-height: 34px; font-size: .64rem; }
.card__row {
flex-direction: column; align-items: stretch; gap: 10px;
margin-top: 12px; padding-top: 12px;
}
.card__price { font-size: 1.1rem; }
.card__price--poa { max-width: none; }
.card__add { width: 100%; text-align: center; padding: 10px 12px; }
.creations__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
/* Below ~414px the dotted wordmark wrapped and left a lone "s·" on a second
line. Tightening the gaps buys more than shrinking the face alone.
Applies to the splash mark too (same classes), so the intro still lands. */
.wordmark { font-size: clamp(1.4rem, 7.4vw, 2.2rem); gap: 5px; }
.wordmark__letter--gap { margin-left: 7px; }
/* Three-across wraps to 2 + 1 and orphans the last figure, so on phones the
rail becomes a stacked spec list instead. */
/* Back to a fixed width here: the label is pushed to the far edge, which
needs room to push into. */
.hero__stats { display: block; margin-top: 48px; width: 320px; max-width: 100%; }
.hero__stats li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 4px; }
.hero__stats li + li { border-top: 1px solid var(--line); }
.hero__stats li + li::before { display: none; }
.hero__stats strong { font-size: 1.6rem; }
.hero__stats span { margin-top: 0; letter-spacing: .2em; }
.brand__text em { display: none; }
.footer__inner { grid-template-columns: 1fr; }
.btn { padding: 15px 24px; font-size: .82rem; }
}