/ the builder emits, and neither carries a .card class, so
the card treatment has to be applied here or they render as loose images and
text floating on the page background.
fcard markup is:
li.fcard > img.fcard__img
> div.fcard__body > span.fcard__dot, h3.fcard__name,
p.fcard__price, a.fcard__cta
There is no __top wrapper: name and price are stacked siblings. */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.util {
background: var(--surface); outline: 1px solid var(--line); outline-offset: -1px;
border-radius: var(--r-card); overflow: hidden; list-style: none;
display: flex; flex-direction: column;
}
.util__img { width: 100%; height: 190px; object-fit: cover; }
.util > div { padding: 28px 30px 32px; }
.util__h { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
.util__p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.rail { list-style: none; margin: 0; padding: 0 0 8px; }
.fcard {
width: 300px; flex: none; list-style: none; overflow: hidden;
background: var(--surface); outline: 1px solid var(--line); outline-offset: -1px;
border-radius: var(--r-card); scroll-snap-align: start;
display: flex; flex-direction: column;
transition: transform .28s var(--ease), box-shadow .28s ease;
}
.fcard:nth-child(4n+1) { transform: rotate(-1.6deg); }
.fcard:nth-child(4n+2) { transform: rotate(1.1deg); }
.fcard:nth-child(4n+3) { transform: rotate(-0.8deg); }
.fcard:nth-child(4n+4) { transform: rotate(1.7deg); }
.fcard:hover, .fcard:focus-within {
transform: rotate(0deg) translateY(-6px);
box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 14%, transparent);
}
.fcard__img { width: 100%; height: 190px; object-fit: cover; flex: none; }
/* An item with no photo still has to be the same card, not a collapsed one. */
.fcard__img--none { display: block; height: 190px; background: var(--band-down); }
.fcard__body { padding: 22px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.fcard__dot { width: 8px; height: 8px; border-radius: var(--pill); background: var(--muted); display: block; }
.fcard__dot--veg { background: var(--accent); }
.fcard__name { font-family: var(--font-display); font-size: 23px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.fcard__price { margin: 0; font-size: 17px; font-weight: 600; color: var(--brand); }
.fcard__cta { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.fcard__cta:hover { color: var(--brand); }
@media (max-width: 1100px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .ways { grid-template-columns: minmax(0, 1fr); } .fcard { width: 244px; } .fcard__img, .fcard__img--none { height: 148px; } }
/* --- spec alignment --------------------------------------------------------
Found by comparing the built page against design/pizza/spec section by section. */
/* The spec's "how it works" cards are numbered 01/02/03 with no photograph.
The builder always emits a photo slot, so the count is a CSS counter and the
image is dropped in this context only - the story page still uses the photos. */
.ways { counter-reset: way; }
.ways .util { counter-increment: way; padding: 34px 30px 32px; }
.ways .util__img { display: none; }
.ways .util::before {
content: "0" counter(way);
font-family: var(--font-display); font-size: 40px; font-weight: 800;
color: var(--brand); line-height: 1; display: block; padding-bottom: 14px;
}
.ways .util > div { padding: 0; }
/* name and price share a row, description beneath */
.fcard__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; }
.fcard__name { grid-column: 1; }
.fcard__price { grid-column: 2; grid-row: 1; }
.fcard__note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* the note beside a section heading, right-aligned on the spec */
.sec__note { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 34ch; text-align: right; align-self: flex-end; }
/* the spec's FAQ has no +/- marker: the question is the affordance */
.faq__q::after { content: none; }
.faq__q { display: block; }
@media (max-width: 860px) { .sec__note { text-align: left; } }
/* --- reviews, rating and hours, against the builder's real markup ------------
REVIEWS emits
with .quote__stars/.quote__text/.quote__by.
HOURS_ROWS emits / pairs, NOT rows - the .hours__row rules above never
matched anything. RATING_SUMMARY is one string with the number in . */
.reviews { list-style: none; margin: 0; padding: 0; }
.quote {
background: var(--surface); outline: 1px solid var(--line); outline-offset: -1px;
border-radius: var(--r-card); padding: 30px; list-style: none;
display: flex; flex-direction: column; gap: 14px;
}
.quote__stars { display: none; } /* the spec's cards carry no stars */
.quote__text { margin: 0; font-size: 17px; line-height: 1.55; quotes: "“" "”"; }
.quote__text::before { content: open-quote; }
.quote__text::after { content: close-quote; }
.quote__by { margin: 0; font-size: 14px; color: var(--muted); }
/* "4.7" large, the rest small and grey, from one string */
.rating { align-items: baseline; gap: 12px; }
.rating__n { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.rating__n strong {
font-family: var(--font-display); font-size: 46px; font-weight: 800;
letter-spacing: -0.025em; color: var(--ink); margin-right: 8px;
}
.hours { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; margin: 0; }
.hours dt, .hours dd {
margin: 0; font-size: 16px; padding: 12px 0;
border-bottom: 1px solid var(--band-down);
}
.hours dt { color: var(--muted); }
.hours dd { font-weight: 500; text-align: right; }
.hours dd.closed { color: var(--muted); font-weight: 400; }
/* GALLERY and CRAFT_STATS emit bare . The IS the tile - there is no
.shot class to hang the treatment on. */
.gallery { list-style: none; margin: 0; padding: 0; }
.gallery li { border-radius: 14px; overflow: hidden; height: 260px; background: var(--band-down); list-style: none; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery li:hover img { transform: scale(1.05); }
.stats, .statband__grid { list-style: none; margin: 0; padding: 0; }
.stat { list-style: none; }
.stat__n { margin: 0; }
.stat__l { margin: 6px 0 0; }
@media (max-width: 860px) { .gallery li { height: 160px; } }
.hero__facts { list-style: none; margin: 0; padding-top: 8px; }
.hero__facts > * { list-style: none; }
.rail { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
/* --- mobile navigation -----------------------------------------------------
The links were hidden at 860 with a .nav__burger that does not exist in the
markup, so a phone had no way to reach Menu, The oven or Visit at all.
A scrollable row instead of a drawer: nothing is hidden, there is no toggle
state to get wrong, and it needs no JavaScript. */
@media (max-width: 860px) {
.nav__in { flex-wrap: wrap; row-gap: 0; padding-bottom: 6px; }
.nav__mark { order: 1; }
.nav__cta { order: 2; margin-left: auto; }
.nav__links {
order: 3; flex: 1 0 100%; gap: 20px; overflow-x: auto;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px;
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links li { flex: none; }
.nav__links a { min-height: 44px; white-space: nowrap; font-size: 14px; }
}
/* ===========================================================================
MOTION
Transform and opacity only - the two things the compositor can animate
without re-laying out the page. Everything is off under
prefers-reduced-motion and under [data-capture].
=========================================================================== */
/* --- staggered children ---------------------------------------------------
The section fades up as a whole; its cards follow one after another. --i is
written by site.js; the rhythm stays here.
ONE FADE PER ELEMENT. The children slide, they do not fade: a card inside a
section that is itself fading gets both opacities multiplied together, so it
sits under 20% for most of the transition and the whole band reads as washed
out rather than as arriving. The section owns the fade; the stagger owns the
travel, and the cascade is legible because it is the only thing moving. */
.js .reveal [data-stagger] > * {
transform: translateY(16px);
}
.js .reveal.is-in [data-stagger] > * {
transform: none;
transition: transform .42s var(--ease-out);
transition-delay: calc(var(--i, 0) * 45ms);
}
/* on screen at load: no fade, it is already there */
.js .reveal.is-now,
.js .reveal.is-now [data-stagger] > * { transition: none; }
/* images wipe up from their frame rather than fading */
.js .reveal [data-stagger] > * > img,
.js .reveal .hero__img { will-change: transform; }
.js .reveal.is-in .gallery li { overflow: hidden; }
/* --- hover ----------------------------------------------------------------
Every interactive thing answers the pointer. */
/* nav: the underline sweeps in from the left rather than appearing */
.nav__links a { position: relative; border-bottom: 0; }
.nav__links a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
background: var(--brand); transform: scaleX(0); transform-origin: left;
transition: transform .3s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links [aria-current="page"]::after { transform: scaleX(1); }
/* buttons lean toward the pointer (--mx/--my come from site.js) and lift */
.btn { transform: translate(var(--mx, 0), var(--my, 0)); }
.btn:hover { transform: translate(var(--mx, 0), calc(var(--my, 0px) - 2px)); }
.btn--brand { position: relative; overflow: hidden; z-index: 0; }
.btn--brand::before {
content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brand-dark);
transform: translateY(101%); transition: transform .34s var(--ease);
}
.btn--brand:hover::before { transform: translateY(0); }
.rail__btn { transform: translate(var(--mx, 0), var(--my, 0)); transition: transform .18s ease, background-color .2s ease; }
/* menu rows: the leader fills toward the price */
.item { transition: background-color .25s ease; }
.item:hover { background: color-mix(in srgb, var(--band-down) 55%, transparent); }
.item:hover .item__lead { border-bottom-color: var(--brand); }
.item:hover .item__price { color: var(--brand-dark); }
/* gallery tiles */
.gallery li { transition: transform .4s var(--ease); }
.gallery li:hover { transform: translateY(-4px); }
/* press names come forward */
.press__item { transition: color .25s ease; }
.press__item:hover { color: var(--ink); }
/* the marquee slows when you look at it */
.tick:hover .tick__row { animation-play-state: paused; }
/* --- custom cursor --------------------------------------------------------
Built by site.js and only on a real mouse: (hover: hover) and
(pointer: fine). The native cursor is hidden by .has-cursor, which the same
code adds, so if any of it fails the visitor still has a pointer. */
.cur {
position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
border-radius: var(--pill); mix-blend-mode: difference;
transition: width .25s var(--ease), height .25s var(--ease), opacity .2s ease;
}
.cur--dot { width: 7px; height: 7px; background: #fff; }
.cur--ring { width: 34px; height: 34px; border: 1.5px solid #fff; }
.cur--ring.is-hot { width: 62px; height: 62px; border-width: 1px; }
.cur--dot.is-hot { opacity: 0; }
.cur--ring.is-down { width: 26px; height: 26px; }
.has-cursor.cur-out .cur { opacity: 0; }
/* Hide the native cursor only where the custom one is live, and never on a
text field - typing without a caret cursor is hostile. */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }
@media (prefers-reduced-motion: reduce) {
.cur { display: none; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary { cursor: auto; }
.js .reveal [data-stagger] > * { opacity: 1; transform: none; }
.nav__links a::after { transition: none; }
.btn { transform: none; }
}
html[data-capture] .cur { display: none !important; }
html[data-capture] .reveal [data-stagger] > * { opacity: 1 !important; transform: none !important; }