/* =====================================================
MINSTER SPICE — styles.css
Tier 2 Standard Demo · Mobile-first
Breakpoints: 768px / 1024px
===================================================== */
/* ===================== GOOGLE FONTS ===================== */
/* Loaded via in HTML with preconnect for performance.
Two families only: Fraunces (display) + Inter (body). */
/* ===================== CUSTOM PROPERTIES ===================== */
:root {
/* Brand palette */
--paper: #f7f1e6; /* warm off-white, dominant background */
--paper-deep: #efe6d2; /* one shade darker for subtle layering */
--ink: #1c1410; /* near-black warm brown, body text */
--spice-red: #b8341f; /* deep tomato-red, primary brand */
--spice-red-dark: #951f0e;
--turmeric: #d4a017; /* warm gold, secondary accent */
--cardamom: #4a5d3a; /* muted green, veg/vegan markers */
--charcoal: #2a2420; /* headers and footer */
--muted: #8a7f72; /* secondary text */
--rule: rgba(28, 20, 16, 0.12); /* hairline borders */
/* Allergen pill colours */
--a-gluten: #c97b3a;
--a-milk: #a8956b;
--a-nuts: #7d4a2e;
--a-mustard: #c9a83a;
--a-egg: #d6a849;
--a-fish: #5b7a8a;
--a-soy: #8b7355;
--a-sesame: #b08947;
--a-celery: #6b8a3a;
--a-sulphite:#a06848;
/* Type stacks */
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
/* Geometry */
--radius: 6px;
--radius-lg: 12px;
--radius-pill: 999px;
/* Layout */
--container-max: 1180px;
--container-pad: 24px;
}
/* ===================== RESET ===================== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
scroll-padding-top: 96px; /* offset for sticky header on anchor jumps */
}
body {
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.65;
color: var(--ink);
background-color: var(--paper);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
ul, ol {
list-style: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
}
input, select, textarea {
font: inherit;
color: inherit;
}
::selection {
background: var(--spice-red);
color: var(--paper);
}
:focus-visible {
outline: 2px solid var(--spice-red);
outline-offset: 3px;
border-radius: 2px;
}
/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ===================== PAPER TEXTURE OVERLAY ===================== */
/* A near-invisible SVG grain over the warm off-white background.
Fixed pseudo-element on body, ~3% opacity, pointer-events:none.
Lifts the page out of flat-template territory. */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.045;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
}
/* ===================== TYPOGRAPHY ===================== */
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.1;
color: var(--ink);
font-variation-settings: "opsz" 32;
}
h1 {
font-size: clamp(3.25rem, 8vw, 5.5rem);
line-height: 1.0;
letter-spacing: -0.02em;
font-weight: 600;
font-variation-settings: "opsz" 144;
}
h2 {
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.1;
letter-spacing: -0.01em;
font-variation-settings: "opsz" 72;
}
h3 {
font-size: 1.5rem;
line-height: 1.2;
}
h4 {
font-size: 1.125rem;
line-height: 1.3;
}
p {
margin-bottom: 1rem;
}
p:last-child {
margin-bottom: 0;
}
/* Small caps label — used as section eyebrows throughout */
.eyebrow {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--spice-red);
display: inline-block;
margin-bottom: 1rem;
}
.eyebrow--muted {
color: var(--muted);
}
/* Dish name — used in menu and cards */
.dish-name {
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: 600;
line-height: 1.2;
color: var(--ink);
}
/* Hand-drawn ink underline wrapper */
.ink-underline {
position: relative;
display: inline-block;
white-space: nowrap;
}
.ink-underline svg {
position: absolute;
left: -2%;
bottom: -0.35em;
width: 104%;
height: 0.45em;
pointer-events: none;
color: var(--spice-red);
}
/* Make sure z-index above paper texture works for content */
main, header, footer, .tier-badge, .mobile-order-bar {
position: relative;
z-index: 2;
}
/* ===================== LAYOUT ===================== */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
}
.section {
padding: 3.5rem 0;
}
@media (min-width: 1024px) {
.section {
padding: 6rem 0;
}
}
/* ===================== TIER BADGE ===================== */
.tier-badge {
position: fixed;
top: 0;
left: 0;
z-index: 200;
background: var(--paper);
color: var(--spice-red);
border: 1.5px solid var(--spice-red);
border-top: none;
border-left: none;
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 18px 8px 14px;
text-decoration: none;
transition: opacity 0.25s, background 0.2s, color 0.2s;
}
.tier-badge:hover {
background: var(--spice-red);
color: var(--paper);
}
body.dn-on .tier-badge {
opacity: 0;
pointer-events: none;
}
@media (min-width: 768px) {
.tier-badge {
font-size: 0.75rem;
padding: 10px 22px 10px 18px;
}
}
/* ===================== HEADER ===================== */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(247, 241, 230, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid transparent;
transition: border-color 0.3s, background 0.3s;
}
.site-header.scrolled {
border-bottom-color: var(--rule);
background: rgba(247, 241, 230, 0.95);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--container-max);
margin: 0 auto;
padding: 14px var(--container-pad);
gap: 16px;
}
.header-brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.0625rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ink);
flex-shrink: 0;
}
.header-brand svg {
width: 26px;
height: 26px;
color: var(--spice-red);
flex-shrink: 0;
}
.header-nav {
display: none;
}
.header-nav ul {
display: flex;
gap: 32px;
}
.header-nav a {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink);
padding: 4px 0;
border-bottom: 1.5px solid transparent;
transition: border-color 0.2s, color 0.2s;
}
.header-nav a:hover,
.header-nav a[aria-current="page"] {
color: var(--spice-red);
border-bottom-color: var(--spice-red);
}
.header-right {
display: flex;
align-items: center;
gap: 14px;
}
.header-phone {
display: none;
align-items: center;
gap: 6px;
font-size: 0.875rem;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
}
.header-phone svg {
width: 15px;
height: 15px;
}
.header-cta {
display: inline-flex;
}
.nav-toggle {
display: flex;
flex-direction: column;
gap: 5px;
padding: 8px;
z-index: 110;
}
.nav-toggle-bar {
display: block;
width: 22px;
height: 2px;
background: var(--ink);
transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child {
transform: translateY(-7px) rotate(-45deg);
}
@media (min-width: 768px) {
.header-phone {
display: flex;
}
}
@media (min-width: 1024px) {
.header-nav {
display: block;
}
.nav-toggle {
display: none;
}
}
/* ===================== MOBILE MENU ===================== */
.mobile-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background: var(--paper);
padding: 96px 24px 32px;
transform: translateY(-100%);
transition: transform 0.35s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.mobile-menu.open {
transform: translateY(0);
}
.mobile-menu ul {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 20px;
}
.mobile-menu a {
display: block;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
padding: 14px 0;
color: var(--ink);
border-bottom: 1px solid var(--rule);
}
.mobile-menu .header-phone {
display: flex;
margin-top: 16px;
font-size: 1rem;
}
@media (min-width: 1024px) {
.mobile-menu { display: none; }
}
/* ===================== MOBILE STICKY ORDER BAR ===================== */
.mobile-order-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 90;
background: var(--spice-red);
padding: 14px 18px;
transform: translateY(0);
transition: transform 0.35s ease;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
}
.mobile-order-bar.hidden {
transform: translateY(110%);
}
.mobile-order-bar a {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--paper);
}
@media (min-width: 768px) {
.mobile-order-bar { display: none; }
}
/* ===================== BUTTONS ===================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 1rem 1.75rem;
border-radius: var(--radius);
transition: background 0.2s, color 0.2s, transform 0.15s, border-color 0.2s;
white-space: nowrap;
text-align: center;
line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
background: var(--spice-red);
color: var(--paper);
}
.btn-primary:hover {
background: var(--spice-red-dark);
color: var(--paper);
}
.btn-outline {
background: transparent;
border: 1.5px solid var(--ink);
color: var(--ink);
padding: calc(1rem - 1.5px) calc(1.75rem - 1.5px);
}
.btn-outline:hover {
background: var(--ink);
color: var(--paper);
}
.btn-paper {
background: var(--paper);
color: var(--spice-red);
}
.btn-paper:hover {
background: var(--ink);
color: var(--paper);
}
.btn-small {
font-size: 0.75rem;
padding: 0.7rem 1.25rem;
}
/* Header CTA size override */
.header-cta {
font-size: 0.7rem;
padding: 0.7rem 1.1rem;
}
@media (min-width: 768px) {
.header-cta {
font-size: 0.75rem;
padding: 0.85rem 1.4rem;
}
}
/* ===================== CARDS ===================== */
.card {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 8px;
padding: 1.75rem;
transition: transform 0.25s, box-shadow 0.25s;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(28, 20, 16, 0.06);
}
.card-photo {
aspect-ratio: 4 / 3;
margin: -1.75rem -1.75rem 1.25rem;
background: var(--paper-deep);
border-bottom: 1px solid var(--rule);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
font-size: 0.75rem;
text-align: center;
padding: 16px;
}
/* ===================== FORM INPUTS ===================== */
.field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 1.25rem;
}
.field label {
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink);
}
.field input,
.field select,
.field textarea {
font-family: var(--font-body);
font-size: 1rem;
background: var(--paper);
border: 1.5px solid rgba(28, 20, 16, 0.3);
border-radius: var(--radius);
padding: 0.85rem 1rem;
color: var(--ink);
-webkit-appearance: none;
appearance: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea {
min-height: 120px;
resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--spice-red);
box-shadow: 0 0 0 3px rgba(184, 52, 31, 0.15);
}
.field input.invalid,
.field textarea.invalid {
border-color: var(--spice-red);
}
.field-error {
font-size: 0.8125rem;
color: var(--spice-red);
display: none;
}
.field input.invalid ~ .field-error,
.field textarea.invalid ~ .field-error {
display: block;
}
.field-help {
font-size: 0.8125rem;
color: var(--muted);
}
/* ===================== ALLERGEN PILLS ===================== */
.allergens {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 0.5rem;
}
.allergen {
display: inline-block;
font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--paper);
background: var(--muted);
padding: 0.25rem 0.6rem;
border-radius: var(--radius-pill);
box-shadow: 0 1px 2px rgba(28, 20, 16, 0.12);
white-space: nowrap;
}
.allergen--gluten { background: var(--a-gluten); }
.allergen--milk { background: var(--a-milk); }
.allergen--nuts { background: var(--a-nuts); }
.allergen--mustard { background: var(--a-mustard); color: var(--ink); }
.allergen--egg { background: var(--a-egg); color: var(--ink); }
.allergen--fish { background: var(--a-fish); }
.allergen--soy { background: var(--a-soy); }
.allergen--sesame { background: var(--a-sesame); color: var(--ink); }
.allergen--celery { background: var(--a-celery); }
.allergen--sulphite { background: var(--a-sulphite); }
.diet {
display: inline-block;
font-family: var(--font-body);
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.25rem 0.6rem;
border-radius: var(--radius-pill);
border: 1.5px solid var(--cardamom);
color: var(--cardamom);
background: transparent;
white-space: nowrap;
}
.diet--vegan { background: var(--cardamom); color: var(--paper); }
/* ===================== SPICE FLAME ICONS ===================== */
.spice-level {
display: inline-flex;
align-items: center;
gap: 2px;
vertical-align: middle;
}
.spice-level svg {
width: 14px;
height: 14px;
color: var(--spice-red);
}
.spice-level[aria-label*="not"] svg,
.spice-level--off svg {
color: rgba(28, 20, 16, 0.18);
}
/* SR-only label */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Image placeholder helper */
[data-placeholder] {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.75rem;
color: var(--muted);
padding: 24px;
background: var(--paper-deep);
border: 1px dashed var(--rule);
border-radius: var(--radius);
}
/* ===================== HERO (HOME) ===================== */
.hero {
padding: 130px 0 4rem;
position: relative;
overflow: hidden;
}
.hero-grid {
display: grid;
gap: 2.5rem;
}
.hero-copy h1 {
margin: 0.5rem 0 1.25rem;
}
.hero-lede {
font-size: 1.125rem;
line-height: 1.6;
color: var(--ink);
max-width: 38ch;
margin-bottom: 2rem;
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 2rem;
}
.hero-trust {
font-size: 0.8125rem;
color: var(--muted);
line-height: 1.6;
border-top: 1px solid var(--rule);
padding-top: 1.25rem;
max-width: 44ch;
}
.hero-trust .star { color: var(--turmeric); }
.hero-photo {
aspect-ratio: 4 / 5;
background: var(--paper-deep);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--muted);
font-size: 0.8125rem;
padding: 32px;
border: 1px solid var(--rule);
}
@media (min-width: 768px) {
.hero { padding: 160px 0 5rem; }
.hero-grid {
grid-template-columns: 55fr 45fr;
align-items: center;
gap: 3rem;
}
.hero-photo {
aspect-ratio: 4 / 5;
margin-right: calc(var(--container-pad) * -1);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
@media (min-width: 1024px) {
.hero { padding: 180px 0 6rem; min-height: 92vh; display: flex; align-items: center; }
.hero .container { width: 100%; }
}
/* ===================== SECTION HEADING (with margin spice) ===================== */
.section-head {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 2rem;
}
.section-head .margin-spice {
width: 42px;
height: 42px;
color: var(--turmeric);
flex-shrink: 0;
}
.section-head .eyebrow { margin-bottom: 0; }
.section-head h2 { margin: 0; }
/* ===================== SPECIALS RAIL (snap-scroll) ===================== */
.specials {
background: var(--paper);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.specials-rail {
display: flex;
gap: 1.25rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: var(--container-pad);
padding: 0 var(--container-pad) 1rem;
margin: 0 calc(var(--container-pad) * -1);
scrollbar-width: thin;
scrollbar-color: var(--rule) transparent;
-webkit-overflow-scrolling: touch;
}
.specials-rail::-webkit-scrollbar { height: 6px; }
.specials-rail::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.special-card {
flex: 0 0 78%;
max-width: 320px;
scroll-snap-align: start;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
}
.special-card .photo {
aspect-ratio: 1 / 1;
background: var(--paper-deep);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
color: var(--muted);
text-align: center;
padding: 12px;
}
.special-card .body {
padding: 1.25rem 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.special-card .name-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.special-card .price {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.125rem;
color: var(--ink);
flex-shrink: 0;
}
.special-card p {
font-size: 0.875rem;
color: var(--muted);
margin: 0;
line-height: 1.55;
}
.special-card .add {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--spice-red);
margin-top: auto;
padding-top: 0.75rem;
}
@media (min-width: 768px) {
.special-card { flex: 0 0 320px; }
}
/* ===================== SIGNATURE DISHES ===================== */
.signature-grid {
display: grid;
gap: 2rem;
}
.signature-card {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
}
.signature-card .photo {
aspect-ratio: 5 / 4;
background: var(--paper-deep);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.75rem;
color: var(--muted);
padding: 16px;
}
.signature-card .body {
padding: 1.5rem 1.75rem 2rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
flex: 1;
}
.signature-card .name-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.signature-card .price {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.25rem;
flex-shrink: 0;
}
.signature-card p {
color: var(--muted);
font-size: 0.9375rem;
line-height: 1.6;
margin: 0;
}
@media (min-width: 768px) {
.signature-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}
/* ===================== KITCHEN STORY PREVIEW ===================== */
.story-preview {
background: var(--paper-deep);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.story-grid {
display: grid;
gap: 2.5rem;
align-items: center;
}
.story-photo {
aspect-ratio: 1 / 1;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.8125rem;
color: var(--muted);
padding: 32px;
}
.story-text h2 {
margin-bottom: 1.25rem;
}
.story-text p {
color: var(--ink);
font-size: 1.0625rem;
margin-bottom: 1rem;
max-width: 50ch;
}
.story-link {
display: inline-block;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--spice-red);
border-bottom: 1.5px solid var(--spice-red);
padding-bottom: 2px;
margin-top: 0.75rem;
}
@media (min-width: 768px) {
.story-grid { grid-template-columns: 1fr 1.1fr; gap: 4rem; }
}
/* ===================== INSTAGRAM STRIP ===================== */
.instagram .section-head { justify-content: space-between; }
.instagram-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.instagram-tile {
aspect-ratio: 1 / 1;
background: var(--paper-deep);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
color: var(--muted);
text-align: center;
padding: 12px;
border-radius: 4px;
}
@media (min-width: 768px) {
.instagram-grid { grid-template-columns: repeat(6, 1fr); }
}
/* ===================== REVIEWS ===================== */
.reviews-grid {
display: grid;
gap: 1.5rem;
}
.review-card {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 1.75rem;
}
.review-stars {
color: var(--turmeric);
letter-spacing: 2px;
font-size: 1.0625rem;
margin-bottom: 0.75rem;
}
.review-text {
font-family: var(--font-display);
font-size: 1.0625rem;
line-height: 1.55;
color: var(--ink);
margin-bottom: 1.25rem;
}
.review-author {
font-size: 0.8125rem;
color: var(--muted);
font-weight: 500;
}
@media (min-width: 768px) {
.reviews-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ===================== FINAL CTA BAND ===================== */
.cta-band {
background: var(--spice-red);
color: var(--paper);
text-align: center;
padding: 4rem 0;
}
.cta-band h2 {
color: var(--paper);
font-size: clamp(2.5rem, 6vw, 4rem);
margin-bottom: 0.5rem;
}
.cta-band p {
color: rgba(247, 241, 230, 0.85);
font-size: 1.125rem;
margin-bottom: 2rem;
}
@media (min-width: 1024px) {
.cta-band { padding: 6rem 0; }
}
/* ===================== FOOTER ===================== */
.site-footer {
background: var(--charcoal);
color: rgba(247, 241, 230, 0.7);
padding: 4rem 0 2rem;
font-size: 0.875rem;
}
.footer-grid {
display: grid;
gap: 2.5rem;
margin-bottom: 2.5rem;
}
.site-footer h4 {
font-family: var(--font-body);
color: var(--paper);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 1rem;
}
.site-footer a {
color: rgba(247, 241, 230, 0.7);
transition: color 0.2s;
}
.site-footer a:hover { color: var(--turmeric); }
.footer-brand .wordmark {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 600;
color: var(--paper);
letter-spacing: 0.04em;
text-transform: uppercase;
display: block;
margin-bottom: 0.75rem;
}
.footer-brand p { line-height: 1.55; }
.footer-socials {
display: flex;
gap: 12px;
margin-top: 1rem;
}
.footer-socials a {
width: 36px;
height: 36px;
border: 1px solid rgba(247, 241, 230, 0.2);
border-radius: var(--radius-pill);
display: flex;
align-items: center;
justify-content: center;
}
.footer-socials svg { width: 16px; height: 16px; }
.footer-nap address {
font-style: normal;
line-height: 1.65;
}
.footer-hours table {
border-collapse: collapse;
width: 100%;
font-size: 0.8125rem;
}
.footer-hours td {
padding: 4px 0;
}
.footer-hours td:last-child {
text-align: right;
color: var(--paper);
}
.footer-links ul {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-bottom {
border-top: 1px solid rgba(247, 241, 230, 0.1);
padding-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 0.75rem;
color: rgba(247, 241, 230, 0.4);
}
.footer-bottom .row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px;
}
@media (min-width: 768px) {
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 0.9fr; gap: 2rem; }
}
/* Body padding to clear sticky mobile order bar */
@media (max-width: 767px) {
body { padding-bottom: 64px; }
}
/* Page hero (inner pages) shared */
.page-hero {
padding: 130px 0 3rem;
}
.page-hero h1 { margin: 0.75rem 0 1rem; }
.page-hero .lede {
max-width: 56ch;
font-size: 1.0625rem;
color: var(--muted);
}
@media (min-width: 1024px) {
.page-hero { padding: 170px 0 4rem; }
}
/* ===================== MENU PAGE ===================== */
/* Filter bar — sticks below the header */
.menu-filter {
position: sticky;
top: 64px;
z-index: 80;
background: rgba(247, 241, 230, 0.95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--rule);
padding: 0.85rem 0;
}
.menu-filter-inner {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 0 var(--container-pad);
max-width: var(--container-max);
margin: 0 auto;
}
.menu-filter-inner::-webkit-scrollbar { display: none; }
.menu-filter button {
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink);
background: transparent;
border: 1.5px solid var(--rule);
border-radius: var(--radius-pill);
padding: 0.55rem 0.95rem;
white-space: nowrap;
transition: background 0.18s, color 0.18s, border-color 0.18s;
flex-shrink: 0;
}
.menu-filter button:hover {
border-color: var(--ink);
}
.menu-filter button[aria-pressed="true"] {
background: var(--spice-red);
border-color: var(--spice-red);
color: var(--paper);
}
/* Section sub-nav — sticks below the filter bar */
.menu-subnav {
position: sticky;
top: 124px;
z-index: 79;
background: var(--paper);
border-bottom: 1px solid var(--rule);
padding: 0.5rem 0;
}
.menu-subnav-inner {
display: flex;
gap: 24px;
overflow-x: auto;
scrollbar-width: none;
padding: 0 var(--container-pad);
max-width: var(--container-max);
margin: 0 auto;
}
.menu-subnav-inner::-webkit-scrollbar { display: none; }
.menu-subnav a {
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
padding: 0.6rem 0;
border-bottom: 2px solid transparent;
transition: color 0.2s, border-color 0.2s;
white-space: nowrap;
flex-shrink: 0;
}
.menu-subnav a:hover {
color: var(--ink);
}
.menu-subnav a.active,
.menu-subnav a[aria-current="true"] {
color: var(--spice-red);
border-bottom-color: var(--spice-red);
}
/* Menu sections */
.menu-section {
padding: 3.5rem 0 2rem;
border-bottom: 1px solid var(--rule);
scroll-margin-top: 180px;
}
.menu-section:last-of-type { border-bottom: none; }
.menu-section-head {
display: flex;
align-items: flex-start;
gap: 18px;
margin-bottom: 2rem;
}
.menu-section-head .margin-spice {
width: 56px;
height: 56px;
color: var(--turmeric);
flex-shrink: 0;
margin-top: -4px;
}
.menu-section-head h2 {
font-size: clamp(1.75rem, 3vw, 2.5rem);
margin: 0 0 0.4rem;
}
.menu-section-head p {
color: var(--muted);
font-size: 0.9375rem;
max-width: 52ch;
margin: 0;
}
/* Menu items */
.menu-list {
display: grid;
gap: 2rem;
}
.menu-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.6rem 1rem;
padding-bottom: 1.75rem;
border-bottom: 1px dashed var(--rule);
}
.menu-item:last-child { border-bottom: none; padding-bottom: 0; }
.menu-item .name-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
grid-column: 1;
}
.menu-item .price {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.25rem;
color: var(--ink);
grid-column: 2;
grid-row: 1;
white-space: nowrap;
}
.menu-item .desc {
grid-column: 1 / -1;
font-size: 0.9375rem;
color: var(--muted);
line-height: 1.55;
margin: 0;
max-width: 60ch;
}
.menu-item .allergens {
grid-column: 1 / -1;
margin-top: 0.25rem;
}
.menu-item .add-to-order {
grid-column: 1 / -1;
justify-self: end;
margin-top: 0.5rem;
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--spice-red);
border-bottom: 1.5px solid var(--spice-red);
padding-bottom: 1px;
transition: color 0.18s, border-color 0.18s;
}
.menu-item .add-to-order:hover {
color: var(--spice-red-dark);
border-bottom-color: var(--spice-red-dark);
}
@media (min-width: 768px) {
.menu-list {
grid-template-columns: 1fr 1fr;
gap: 2.5rem 3rem;
}
}
/* ===================== ORDER PAGE ===================== */
.order-form {
max-width: 720px;
margin: 0 auto;
}
.order-step {
border-top: 1px solid var(--rule);
padding: 2.5rem 0;
}
.order-step:first-of-type { border-top: none; }
.order-step h2 {
font-size: 1.5rem;
margin: 0 0 0.5rem;
display: flex;
align-items: baseline;
gap: 14px;
}
.order-step h2 .step-num {
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--spice-red);
background: rgba(184, 52, 31, 0.1);
padding: 0.35rem 0.6rem;
border-radius: var(--radius-pill);
}
.order-step .step-help {
color: var(--muted);
font-size: 0.9375rem;
margin: 0 0 1.5rem;
}
/* Mode toggle (collection / delivery) */
.mode-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.mode-toggle label {
display: block;
border: 1.5px solid var(--rule);
border-radius: var(--radius-lg);
padding: 1.25rem 1.5rem;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
}
.mode-toggle input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.mode-toggle label:has(input:checked),
.mode-toggle label.checked {
border-color: var(--spice-red);
background: rgba(184, 52, 31, 0.05);
}
.mode-toggle .mode-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.125rem;
display: block;
margin-bottom: 0.25rem;
}
.mode-toggle .mode-sub {
font-size: 0.8125rem;
color: var(--muted);
}
/* Day tabs + time slots */
.day-tabs {
display: flex;
gap: 8px;
margin-bottom: 1rem;
}
.day-tabs button {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.6rem 1rem;
border: 1.5px solid var(--rule);
border-radius: var(--radius-pill);
color: var(--ink);
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.day-tabs button[aria-pressed="true"] {
background: var(--ink);
border-color: var(--ink);
color: var(--paper);
}
.slots {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 8px;
}
.slots button {
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 600;
padding: 0.65rem 0.5rem;
border: 1.5px solid var(--rule);
border-radius: var(--radius);
background: var(--paper);
color: var(--ink);
text-align: center;
transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.slots button:hover { border-color: var(--ink); }
.slots button[aria-pressed="true"] {
background: var(--spice-red);
border-color: var(--spice-red);
color: var(--paper);
}
/* Order line items */
.order-lines {
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
background: var(--paper);
}
.order-line {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 16px;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--rule);
}
.order-line:last-child { border-bottom: none; }
.order-line .line-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.0625rem;
margin: 0;
}
.order-line .line-meta {
display: block;
font-family: var(--font-body);
font-size: 0.8125rem;
color: var(--muted);
margin-top: 2px;
}
.qty-stepper {
display: inline-flex;
align-items: center;
border: 1.5px solid var(--rule);
border-radius: var(--radius-pill);
overflow: hidden;
}
.qty-stepper button {
width: 32px;
height: 32px;
font-size: 1.125rem;
color: var(--ink);
background: transparent;
transition: background 0.15s;
}
.qty-stepper button:hover { background: var(--paper-deep); }
.qty-stepper [data-qty] {
min-width: 28px;
text-align: center;
font-weight: 600;
font-size: 0.9375rem;
}
.line-remove {
font-size: 0.75rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
border-bottom: 1px solid var(--rule);
padding-bottom: 1px;
}
.order-totals {
padding: 1rem 1.25rem;
border-top: 1px solid var(--rule);
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-body);
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
.order-totals strong {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--ink);
font-weight: 600;
letter-spacing: 0;
}
.add-more {
display: inline-block;
margin-top: 1rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--spice-red);
text-transform: uppercase;
letter-spacing: 0.1em;
border-bottom: 1.5px solid var(--spice-red);
padding-bottom: 1px;
}
/* Allergen check */
.field-check {
border: 1.5px solid var(--rule);
border-radius: var(--radius-lg);
padding: 1.25rem 1.5rem;
background: var(--paper);
}
.field-check.invalid {
border-color: var(--spice-red);
background: rgba(184, 52, 31, 0.05);
}
.field-check label {
display: flex;
gap: 12px;
align-items: flex-start;
cursor: pointer;
font-size: 0.9375rem;
}
.field-check input[type="checkbox"] {
margin-top: 3px;
width: 18px;
height: 18px;
accent-color: var(--spice-red);
flex-shrink: 0;
}
.field-check small {
display: block;
margin-top: 0.6rem;
font-size: 0.8125rem;
color: var(--muted);
}
.field-check small a {
color: var(--spice-red);
border-bottom: 1px solid var(--spice-red);
}
/* Submit */
.order-submit {
width: 100%;
font-size: 0.9375rem;
padding: 1.2rem 1.5rem;
margin-top: 1rem;
display: flex;
justify-content: space-between;
gap: 16px;
}
.order-success {
text-align: center;
padding: 3rem 2rem;
border: 1px solid var(--cardamom);
background: rgba(74, 93, 58, 0.06);
border-radius: var(--radius-lg);
max-width: 560px;
margin: 2rem auto;
}
.order-success h2 { color: var(--cardamom); }
/* ===================== OUR KITCHEN PAGE ===================== */
.kitchen-section {
padding: 4rem 0;
border-bottom: 1px solid var(--rule);
}
.kitchen-section:last-of-type { border-bottom: none; }
.kitchen-family {
display: grid;
gap: 2.5rem;
align-items: center;
}
.kitchen-family .photo {
aspect-ratio: 4 / 5;
background: var(--paper-deep);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.8125rem;
color: var(--muted);
padding: 32px;
border: 1px solid var(--rule);
}
.kitchen-family .text h2 { margin-bottom: 1.25rem; }
.kitchen-family p {
font-size: 1.0625rem;
line-height: 1.7;
margin-bottom: 1rem;
max-width: 52ch;
}
@media (min-width: 768px) {
.kitchen-family { grid-template-columns: 5fr 6fr; gap: 4rem; }
.kitchen-family.reversed { grid-template-columns: 6fr 5fr; }
.kitchen-family.reversed .photo { order: 2; }
}
/* Centred narrow column for the regional positioning */
.kitchen-narrow {
max-width: 640px;
margin: 0 auto;
text-align: left;
}
.kitchen-narrow .eyebrow { display: block; text-align: center; margin-bottom: 0.75rem; }
.kitchen-narrow h2 {
text-align: center;
margin-bottom: 1.5rem;
}
.kitchen-narrow p {
font-size: 1.0625rem;
line-height: 1.75;
margin-bottom: 1.25rem;
}
.kitchen-narrow p:first-letter {
font-family: var(--font-display);
font-size: 3.25rem;
font-weight: 600;
float: left;
line-height: 0.85;
padding: 0.4rem 0.5rem 0 0;
color: var(--spice-red);
}
/* Photo grid */
.kitchen-photos {
display: grid;
gap: 8px;
grid-template-columns: 1fr 1fr;
}
.kitchen-photos .tile {
aspect-ratio: 1 / 1;
background: var(--paper-deep);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.7rem;
color: var(--muted);
padding: 12px;
border-radius: 4px;
}
.kitchen-photos .tile.wide { aspect-ratio: 1 / 1; }
@media (min-width: 768px) {
.kitchen-photos { grid-template-columns: repeat(3, 1fr); }
}
/* What we don't do */
.dont-do {
background: var(--ink);
color: var(--paper);
}
.dont-do .container {
max-width: 760px;
}
.dont-do h2 {
color: var(--paper);
margin-bottom: 0.5rem;
}
.dont-do .eyebrow { color: var(--turmeric); }
.dont-do p {
color: rgba(247, 241, 230, 0.7);
margin-bottom: 2rem;
max-width: 52ch;
}
.dont-list {
display: flex;
flex-direction: column;
}
.dont-list li {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.375rem, 3vw, 2rem);
line-height: 1.25;
padding: 1.25rem 0;
border-top: 1px solid rgba(247, 241, 230, 0.15);
display: flex;
align-items: baseline;
gap: 16px;
}
.dont-list li:last-child {
border-bottom: 1px solid rgba(247, 241, 230, 0.15);
}
.dont-list li::before {
content: "✕";
color: var(--spice-red);
font-family: var(--font-body);
font-weight: 600;
font-size: 1.25rem;
flex-shrink: 0;
}
/* ===================== VISIT & CONTACT PAGE ===================== */
.visit-grid {
display: grid;
gap: 3rem;
align-items: start;
}
.map-frame {
width: 100%;
aspect-ratio: 16 / 10;
border-radius: var(--radius-lg);
border: 1px solid var(--rule);
overflow: hidden;
background: var(--paper-deep);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
text-align: center;
font-size: 0.8125rem;
padding: 24px;
}
.directions-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 1rem;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--spice-red);
border-bottom: 1.5px solid var(--spice-red);
padding-bottom: 2px;
}
.visit-block {
margin-bottom: 2.5rem;
}
.visit-block:last-child { margin-bottom: 0; }
.visit-block .eyebrow { display: block; margin-bottom: 0.6rem; }
.visit-block address {
font-family: var(--font-display);
font-style: normal;
font-size: 1.375rem;
font-weight: 600;
line-height: 1.4;
color: var(--ink);
}
.visit-phone {
display: inline-block;
font-family: var(--font-display);
font-weight: 600;
font-size: 2rem;
color: var(--spice-red);
}
.hours-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
}
.hours-table td {
padding: 0.6rem 0;
border-bottom: 1px dashed var(--rule);
}
.hours-table td:last-child {
text-align: right;
font-weight: 600;
}
.hours-table tr:last-child td { border-bottom: none; }
.contact-form-note {
background: var(--paper-deep);
border-left: 3px solid var(--spice-red);
padding: 0.85rem 1rem;
font-size: 0.8125rem;
color: var(--muted);
border-radius: 0 var(--radius) var(--radius) 0;
margin-top: 1rem;
}
@media (min-width: 768px) {
.visit-grid { grid-template-columns: 1.2fr 1fr; gap: 4rem; }
}
/* ===================== CART FLOATING POPOVER ===================== */
.cart-fab {
position: fixed;
bottom: 5rem;
right: 1.25rem;
z-index: 105;
font-family: var(--font-body);
}
.cart-fab[hidden] { display: none; }
.cart-fab-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--ink);
color: var(--paper);
border: none;
border-radius: var(--radius-pill);
padding: 0.7rem 1.1rem 0.7rem 0.95rem;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 20px rgba(28, 20, 16, 0.22);
transition: background 0.2s, transform 0.15s;
}
.cart-fab-toggle:hover {
background: var(--spice-red);
transform: translateY(-1px);
}
.cart-fab-toggle svg {
flex-shrink: 0;
}
.cart-fab-count {
background: var(--spice-red);
color: var(--paper);
font-size: 0.7rem;
font-weight: 700;
padding: 2px 7px;
border-radius: var(--radius-pill);
min-width: 20px;
text-align: center;
line-height: 1.2;
}
.cart-fab-toggle:hover .cart-fab-count {
background: var(--paper);
color: var(--spice-red);
}
.cart-fab-total {
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 600;
}
@media (max-width: 767px) {
.cart-fab {
bottom: 5rem;
right: 12px;
}
.cart-fab-toggle {
padding: 0.6rem 0.9rem 0.6rem 0.8rem;
font-size: 0.75rem;
}
}
.cart-fab-panel {
position: absolute;
bottom: calc(100% + 12px);
right: 0;
width: min(340px, 88vw);
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
box-shadow: 0 12px 32px rgba(28, 20, 16, 0.18);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: min(70vh, 520px);
}
.cart-fab-panel[hidden] { display: none; }
.cart-fab-panel header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem 0.75rem;
border-bottom: 1px solid var(--rule);
}
.cart-fab-panel header strong {
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 600;
}
.cart-fab-close {
background: none;
border: none;
font-size: 1.5rem;
line-height: 1;
color: var(--muted);
padding: 0 4px;
cursor: pointer;
}
.cart-fab-close:hover { color: var(--ink); }
.cart-fab-panel ul {
list-style: none;
margin: 0;
padding: 0;
overflow-y: auto;
flex: 1;
}
.cart-fab-panel li {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 12px;
align-items: center;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--rule);
}
.cart-fab-panel li:last-child { border-bottom: none; }
.cart-fab-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.25;
}
.cart-fab-qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--rule);
border-radius: var(--radius-pill);
overflow: hidden;
}
.cart-fab-qty button {
width: 26px;
height: 26px;
font-size: 1rem;
background: transparent;
border: none;
color: var(--ink);
cursor: pointer;
transition: background 0.15s;
}
.cart-fab-qty button:hover { background: var(--paper-deep); }
.cart-fab-qty span {
min-width: 22px;
text-align: center;
font-size: 0.8125rem;
font-weight: 600;
}
.cart-fab-line-total {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.9375rem;
text-align: right;
min-width: 48px;
}
.cart-fab-panel footer {
padding: 1rem 1.25rem 1.25rem;
border-top: 1px solid var(--rule);
background: var(--paper-deep);
}
.cart-fab-summary {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.85rem;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
}
.cart-fab-summary strong {
font-family: var(--font-display);
font-size: 1.375rem;
color: var(--ink);
letter-spacing: 0;
}
.cart-fab-checkout {
width: 100%;
display: flex;
justify-content: center;
}
/* "Added ✓" feedback on the menu item link */
.menu-item .add-to-order.added {
color: var(--cardamom);
border-bottom-color: var(--cardamom);
}
/* Order page empty state */
.order-empty {
padding: 2rem;
text-align: center;
border: 1px dashed var(--rule);
border-radius: var(--radius-lg);
background: var(--paper);
}
.order-empty p {
color: var(--muted);
margin-bottom: 1rem;
}