/* ============================================================================
BAKING WITH MARI — the hero world.
----------------------------------------------------------------------------
This stylesheet is the WORLD, not a theme swap. Every rule here exists to make
the page look like the same printed object the Seedance clips were drawn in:
heavy ink linework, halftone dot fields, flat saturated colour, drawn panels.
Where it comes from — Oliver's own brief PDF (BRIEF_FROM_OLIVER_2026-08-08.pdf):
· chebahut.com — the stoner-cartoon poster world: black line, halftone,
flat colour, a real photographed food object flying through
a hand-drawn world. That IS image_masters/hero_anchor/
anchor_A_bleed.png, which every clip was generated from.
· voodoodoughnut.com — the LAYOUT: simple, centred, straight to the point,
ORDER NOW never more than one look away.
What it refuses: the white minimal scroll-site with a grey route rail and a
"01 / 10" beat counter. His words, 2026-08-11: "I see every step of the way
1 of Ten 2 of Ten 3 of 10 it doesn't make sense like this is a slop still."
TYPE IS GATE-ENFORCED: 11 13 15 17 20 24 30 38 48 60 76, floor 13,
11px only in a rule that also sets uppercase. clamp() endpoints count.
========================================================================== */
/* ---- faces: all SIL OFL 1.1, all on disk, zero third-party requests -------- */
/* WOFF2 FIRST, and it is the single biggest speed win on this site. The three faces shipped
as raw .ttf: 1,481 KB on EVERY page, on phones, on rural Missouri mobile data — and
ShantellSans alone was 1.25 MB because it carried 1,728 glyphs and four variable axes
(weight, informality, bounce, spacing) when the site only ever renders weight 400-700 in
Latin. Subset to Latin, the unused axes pinned out, converted to woff2: 143 KB total,
1,338 KB saved per visitor. Measured 2026-08-12.
The .ttf stays listed second as a fallback and costs nothing — a browser downloads the
first format it understands, and every browser since 2016 understands woff2. */
@font-face{font-family:'Alfa Slab One';src:url('../assets/fonts/AlfaSlabOne-Regular.woff2') format('woff2'),url('../assets/fonts/AlfaSlabOne-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Shantell Sans';src:url('../assets/fonts/ShantellSans.woff2') format('woff2'),url('../assets/fonts/ShantellSans.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Jost';src:url('../assets/fonts/Jost.woff2') format('woff2'),url('../assets/fonts/Jost.ttf') format('truetype');font-display:swap}
/* RYE — the western woodtype, and the face Oliver asked for by name. It is the one closest to
Voodoo Doughnut's own logo, which is his stated reference for this site.
IT WAS REMOVED IN ERROR. A previous session wrote "Rye. None may appear on the site" into
DESIGN_V5.md and a later one swept the file out as unused. That sentence was a session's
opinion recorded as if it were his ruling, and it is the opposite of what he actually said.
Restored on his direct instruction, 2026-08-13: "I want the rye back."
Subset to Latin + punctuation: 178.9 KB .ttf -> 38.9 KB .woff2. */
@font-face{font-family:'Rye';src:url('../assets/fonts/Rye-Regular.woff2') format('woff2'),url('../assets/fonts/Rye-Regular.ttf') format('truetype');font-display:swap}
:root{
/* DESIGN_V5, ratified. The ink is a deep plum, never black — his rule. It is
also the LINEWORK colour, which is why the page can be drawn without ever
using #000. */
--paper:#FFFFFF;
--ink:#332742;
--pink:#F2ACB9;
--rose:#D95C7A; /* pink darkened until it passes 4.5:1 AS TEXT ON PAPER — that is the
measurement this value was chosen against, and it holds. */
/* THE BUTTON FACE IS A DEEPER ROSE, and the reason is a number that was wrong in this file.
A comment beside the CTA claimed "white text on #D95C7A measures 4.6:1 — AA at this size."
It measures 3.64:1. That is AA for LARGE text only (24px+), and these labels ship at 15px in
the bar, 17px on a normal pill and 20px on a phone — all of which need 4.5:1. So every rose
button on the site has been failing the contrast gate, quietly, since the day it turned rose.
This is the SAME hue (345.6°) at the SAME saturation, 7% deeper: white on it measures
4.54:1 and every button clears AA at every size. It is a separate token so that reverting it
is one line if Oliver prefers the original — the colour is his call and he has the numbers. */
--rose-btn:#D23F62;
--violet:#A87CC9;
--plum:#6B4A87;
--gold:#FFB01F;
--sky:#3FA7D6;
--wash:#F7EFFB;
--line:3px; /* the pen width. One value, everywhere. */
--drop:6px; /* the ink drop. One value, everywhere. */
--radius:6px;
--display:'Rye','Alfa Slab One',Georgia,serif; /* his face, restored 2026-08-13 */
--voice:'Shantell Sans','Jost',sans-serif; /* the funny one */
--ui:'Jost',system-ui,sans-serif;
/* halftone: the dot field that makes flat colour read as printed */
--halftone:radial-gradient(var(--dotcolor,rgba(51,39,66,.16)) 1.4px, transparent 1.5px);
}
*{box-sizing:border-box}
/* `hidden` must actually hide. The UA rule is [hidden]{display:none}, which ANY class rule
that sets display silently outranks — so the custom-tip field sat open under a selected
preset, and switching to Pickup would have left the delivery address on screen. Measured
2026-08-11. One line, and every `hidden` on the page means what it says. */
[hidden]{display:none !important}
html{
scroll-behavior:smooth;
/* The bar is fixed, so an anchor jump parks the target underneath it. Measured on
/shop.php: the delivery toggle landed behind the bar. */
scroll-padding-top:76px;
}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
font-family:var(--ui);-webkit-font-smoothing:antialiased;
/* NEVER LET THE BROWSER FAKE A BOLD. Rye and Alfa Slab One each ship exactly ONE weight, and
11 elements on the shop asked them for 700 — so Chrome smeared the glyphs sideways to
invent it, which is why the digits and product names came out double-struck (seen at 390,
2026-08-13). A previous session fixed this by hand for Alfa Slab and it came straight back
the moment Rye arrived. This kills the whole class instead: real weights on variable faces
like Jost still work, only the FAKE ones stop. */
font-synthesis-weight:none; font-synthesis:none}
img{max-width:100%;display:block}
a{color:inherit}
/* ============================================================================
1. THE BAR — voodoodoughnut's lesson: ordering is never more than one look away.
Thin, drawn, always there. It is the only chrome on the whole page.
========================================================================== */
.bar{
position:fixed; inset:0 0 auto 0; z-index:200;
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:10px max(14px,env(safe-area-inset-left)) 10px max(14px,env(safe-area-inset-right));
background:var(--paper); border-bottom:var(--line) solid var(--ink);
}
.bar__mark{
/* gap:0 ON PURPOSE, and this was a live defect he could see: the mark is
`Baking With Mari`, so flex makes the leading text an anonymous item and
`` a second one — and an 8px flex gap landed ON TOP of the nbsp already in the markup.
The result was one word space between "Baking" and "With" and roughly two and a half
before "Mari". A flex gap is not a word space; the space characters are. */
display:flex; align-items:center; gap:0; text-decoration:none;
font-family:var(--display); font-size:20px; line-height:1; letter-spacing:.01em;
min-height:44px; /* it is a link to the home page, so it is a target */
/* The bar is the only three-item flex row on the page, so something has to give when the
viewport narrows. It is the NAME, never the button — the button is the page's whole job. */
min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bar__mark b{color:var(--rose); font-weight:400}
/* flex:0 0 auto so the RIGHT side of the bar never gives ground. `.bar .order-btn` alone was
not enough — the button is a child of this wrapper, and it was the WRAPPER that flex was
squeezing, which squeezed the pill inside it. */
.bar__right{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.bar__note{
font-family:var(--voice); font-size:15px; color:var(--plum);
}
@media (max-width:760px){ .bar__note{display:none} }
/* the one button the whole page walks toward */
.order-btn{
/* ONE PADDING SOURCE, THREE SIZES. Padding used to be re-declared in four places, two of
them in competing `max-width:640px` blocks, so the size a button actually got depended on
rule order rather than on anything anyone chose. The variants now set the two numbers and
nothing re-states the shorthand. */
--pad-y:12px; --pad-x:22px;
/* THE OPTICAL NUDGE — this is the measured half of "the words don't sit in the buttons well".
`align-items:center` with `line-height:1` centres the font's EM BOX. This display face
carries its ink high (tall caps, a descender well that most of these labels never use), so
a mathematically centred label reads as floating. Measured off the live 390 screenshot by
comparing the white ink bounding box against the rose face: the label sat 1.5px HIGH.
0.045em each way at 17px is 0.77px, so the label moves down 1.5px — and because it is in
em it stays correct at 15px in the bar and 24px on the big button, which a pixel could not. */
--optical:.045em;
/* NOT FLEX, and this is the whole two-line fix. As a flex row the label was one item and the
arrow another; when the label had to wrap, flex shrank the LABEL to fill the row and left
the arrow pinned at the far right — a pill with its words in the middle and its arrow 130px
away, which is exactly the "doesn't sit in the button well" he reported. As inline content
the label and the arrow are one centred block that wraps together. Vertical centring then
comes from the padding rather than align-items, which is why --pad-y is tuned so the box is
always at or over the 44px touch floor and `min-height` never has to add space at the
bottom (that would push the label off centre by the amount it added). */
display:inline-block; text-align:center; vertical-align:middle;
padding:calc(var(--pad-y) + var(--optical)) var(--pad-x)
calc(var(--pad-y) - var(--optical));
border-radius:999px;
/* ROSE IS THE DEFAULT, and this is a system rule rather than a preference.
The reference system this build follows rations its warm colour by JOB: one hue means
"this moves you forward", another means "this is a tool or a mark", and they never trade
places. On this site rose is the forward colour — and it was applied by listing the three
places it happened to be needed (`.bar`, `.bake__go`, `.curtain__foot`), so anything not on
that list fell through to gold. Measured live: "Order this week's bake", the LAST call to
action on the home page, was gold, and both "Check out" buttons on the shop — the single
most important control on the whole site — were gold too, while "← The story", a back link,
was rose because it sits in the bar. The loudest colour was on the least important control.
Oliver on the gold, 2026-08-13: "I don't like the yellow, it looks cheap." So the default
inverts: every .order-btn is the forward colour, and the two that are NOT forward say so
themselves (--ghost for going back, .join__go for a form that is not an order).
Gold stays where it was always meant to be: a surface, never a button. */
background:var(--rose-btn); color:#fff; text-decoration:none;
/* 1.1, not 1: at line-height:1 a wrapped label's two lines touch. Half-leading is added
symmetrically, so this does not disturb the optical nudge above. */
font-family:var(--display); font-size:17px; line-height:1.1; letter-spacing:.02em;
border:var(--line) solid var(--ink);
box-shadow:0 var(--drop) 0 var(--ink);
transition:transform .1s ease, box-shadow .1s ease;
min-height:44px; /* touch floor */
/* A pill may never be wider than the column it sits in. "See the whole bake and order →" is
306px of nowrap label, which at 320px overhung the viewport by 6px. */
max-width:100%;
}
.order-btn:hover{transform:translateY(-2px); box-shadow:0 calc(var(--drop) + 2px) 0 var(--ink)}
.order-btn:active{transform:translateY(var(--drop)); box-shadow:0 0 0 var(--ink)}
.order-btn:focus-visible{outline:var(--line) solid var(--sky); outline-offset:3px}
.order-btn--big{--pad-y:18px; --pad-x:34px; font-size:24px}
/* GOING BACK IS NOT GOING FORWARD. The specificity has to beat `.bar .order-btn`, because the
one place a ghost button actually appears is the shop's bar — where it was inheriting the bar's
rose and reading as the page's primary action while "Check out" sat in utility gold. */
.order-btn--ghost,
.bar .order-btn--ghost{background:var(--paper); color:var(--ink); animation:none}
.order-btn--ghost::before{display:none}
/* THE TWO-LINE CASE, MADE DELIBERATE. A long label breaks evenly instead of leaving one word
stranded on its own line, and the arrow keeps its distance from the last word. */
.order-btn{text-wrap:balance}
/* 5px, not the old flex gap of 9px: flex DISCARDED the whitespace-only text node between the
label and the arrow, inline layout renders it. 5px of margin on top of a ~4px word space
lands back on the 9px the button was designed with. */
.order-btn > span{margin-left:5px}
/* --- THE CTA IS ALIVE. -----------------------------------------------------------------
Oliver, 2026-08-13: "I want the actual element, the CTA button itself, to pulsate, to glow,
to do something... I don't like the yellow, it looks cheap." He also rejected the first
attempt by name: "did I ask you to put a gold ring around the CTA button? No."
So: no ring, nothing added AROUND it. THE BUTTON ITSELF is what moves.
Three things happen to the button, all on the compositor (transform, opacity, box-shadow) so
none of them cost layout on a page whose frame budget we already spent a session recovering:
1. IT BREATHES — a slow scale, small enough to feel alive rather than twitchy.
2. IT GLOWS — a soft rose halo swells and fades under the hard ink drop. The drop is the
brand's linework and never moves; the glow lives behind it, so the button gains light
without the outline appearing to wobble.
3. LIGHT CROSSES IT — a highlight sweeps the face every cycle, the way light moves over
something physical. That is what stops it reading as a flat coloured rectangle.
COLOUR is no longer set here. Rose is now every order button's default (see .order-btn above),
so these three lines only decide WHICH buttons MOVE. That list is deliberately short and stays
exactly as he approved it: the two ways into the shop from the home page, and the one in the
bar. The checkout button is not on it on purpose — a button that breathes while someone is
reading their own order total is a distraction at the worst possible moment. */
.bar .order-btn,
.bake__go .order-btn,
.curtain__foot .order-btn{ /* BOTH ways in wear the same face. Two Order buttons on one
screen in two different colours reads as two different
things — measured on the phone shot, 2026-08-13. */
position:relative; overflow:hidden;
animation:cta-breathe 3.2s ease-in-out infinite;
}
.bar .order-btn::before,
.bake__go .order-btn::before,
.curtain__foot .order-btn::before{
content:""; position:absolute; top:0; bottom:0; width:45%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
pointer-events:none;
animation:cta-sheen 3.2s ease-in-out infinite;
/* MEASURED, 2026-08-13, warm page, scripted scroll of the whole live home page:
everything as it was ....... 9.0% of frames over 20ms, p95 44.5ms, 122 frames over 50ms
with this one line ......... 6.2%, p95 27.9ms, 14 frames over 50ms
The sheen translates inside a rounded `overflow:hidden` button that is FIXED in the bar, so
it is on screen for every frame of every scroll. Without its own layer Chrome cannot
composite the transform through that rounded clip and repaints the bar instead.
This is the narrow, justified use of will-change the audit allows — one known-expensive
animation, not a blanket hint — and it changes nothing about how the button looks. */
will-change:transform;
}
@keyframes cta-breathe{
/* The glow is held at nothing for most of the cycle. A button that pulses without pause
becomes wallpaper within seconds and stops being seen at all — the rest is what makes
each swell register. */
0%,60%,100%{transform:scale(1); box-shadow:0 var(--drop) 0 var(--ink), 0 0 0 rgba(217,92,122,0)}
78% {transform:scale(1.045); box-shadow:0 var(--drop) 0 var(--ink), 0 0 26px 6px rgba(217,92,122,.72)}
}
/* THE BAR BUTTON BREATHES BUT DOES NOT GLOW, and this is an engineering decision, not a taste one.
Oliver asked for the CTA to pulsate and glow, and it does — on the BIG button, at full strength.
The one in the bar is `position:fixed`, so unlike the hero button it never scrolls away: its
26px blurred shadow was being repainted on every frame of all 7,000px of the page. Measured warm
on the live site: 9.0% of frames over 20ms with it, 1.9% without, p95 44.5ms against 11.5ms.
Scale and the light sweep are compositor work and cost nothing, so they stay. The glow goes
where it is both most visible and free — the button that leaves the screen after one screen.
He was asked and told me, fairly, that this is not a question he should be answering. */
.bar .order-btn{
animation-name:cta-breathe-quiet;
/* THE BUTTON NEVER SHRINKS. It is a flex item in a row with the wordmark, and with
`white-space:nowrap` a shrunk pill does not wrap its label — it lets the label hang out
the side. Measured on the live site at 320px: the pill was 123px, the words ran 8px past
its right edge. The wordmark now yields instead (ellipsis, above), which is the correct
trade: the name is recoverable from the page, the way to order is not. */
flex:0 0 auto;
}
@keyframes cta-breathe-quiet{
0%,60%,100%{transform:scale(1)}
78% {transform:scale(1.045)}
}
@keyframes cta-sheen{
0%,52%{transform:translateX(-160%) skewX(-18deg)}
86%,100%{transform:translateX(320%) skewX(-18deg)}
}
/* ============================================================================
2. THE CURTAIN — the first viewport. Dot lettering (blackdogstory.com, the one
technique he named by hand), one line of voice, one gold button, Bella peeled
into the corner like a sticker on a van window.
========================================================================== */
/* The canvas is absolutely positioned, not a grid row: a