/* ===================================================================== UNIKA KEBAB — Charcoal Grill Design system + components for the public site. Palette is taken straight from the logo artwork: gold #F4B007 bronze #CB8C0E charcoal #050202 ember #C33601 ===================================================================== */ /* --------------------------------------------------------------------- 1. Tokens --------------------------------------------------------------------- */ :root { /* brand */ --gold: #f4b007; --gold-light: #ffc93c; --gold-deep: #cb8c0e; --gold-soft: rgba(244, 176, 7, 0.14); --ember: #c33601; /* neutrals */ --char: #12100e; --char-2: #1c1815; --char-3: #2b2521; --ink: #1a1613; --muted: #6d6259; --cream: #fff8ec; --cream-2: #f6ecdb; --line: rgba(26, 22, 19, 0.1); --line-strong: rgba(26, 22, 19, 0.18); /* type */ --font-display: "Anton", "Arial Narrow", sans-serif; --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; /* shape */ --radius: 18px; --radius-sm: 12px; --radius-pill: 999px; /* depth */ --shadow-sm: 0 2px 10px rgba(18, 16, 14, 0.06); --shadow: 0 14px 34px rgba(18, 16, 14, 0.1); --shadow-lg: 0 26px 60px rgba(18, 16, 14, 0.18); --shadow-gold: 0 16px 38px rgba(244, 176, 7, 0.28); /* motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --speed: 0.45s; /* layout */ --nav-h: 84px; } /* --------------------------------------------------------------------- 2. Base --------------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; /* "clip" keeps stray wide elements in check without turning into a scroll container — "hidden" does, and that quietly breaks position:sticky. */ overflow-x: hidden; overflow-x: clip; } img { max-width: 100%; height: auto; } a { color: var(--gold-deep); text-decoration: none; transition: color 0.25s var(--ease); } a:hover { color: var(--ember); } h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 700; letter-spacing: -0.015em; } ::selection { background: var(--gold); color: var(--char); } /* Keyboard focus ring — visible, on brand, never on mouse clicks. */ :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--char); color: var(--gold); padding: 0.9rem 1.4rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; color: var(--gold); } /* --------------------------------------------------------------------- 3. Typography helpers --------------------------------------------------------------------- */ .display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.98; color: var(--ink); } .eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 1rem; } .eyebrow::before, .eyebrow::after { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); } .eyebrow::after { background: linear-gradient(90deg, var(--gold), transparent); } .eyebrow--start::before { display: none; } .eyebrow--start::after { display: none; } .eyebrow--start { color: var(--gold-deep); } .section-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1; letter-spacing: 0.005em; font-size: clamp(2rem, 4.4vw, 3.25rem); margin: 0 0 1rem; } .section-text { color: var(--muted); font-size: 1.06rem; max-width: 62ch; margin: 0 auto; } .section-text--start { margin-inline: 0; } .text-gold { color: var(--gold-deep) !important; } .text-cream { color: var(--cream) !important; } .text-muted-warm { color: var(--muted) !important; } /* Gold ornament dividers, cut from the supplied artwork. .ornament — the ornate flourish, for hero and major section heads .ornament--alt — the lighter one, for menu category heads */ .ornament { display: block; width: min(340px, 68%); height: auto; margin: 1.35rem auto 0.9rem; /* a little air underneath it */ opacity: 0.95; } .ornament--alt { width: min(260px, 58%); margin-top: 1.1rem; } .ornament--start { margin-inline: 0; } /* Sitting above a block of content rather than under a heading. The space above the ornament comes from the hero's own bottom padding, so the space below it is set to exactly the same clamp — the flourish then sits centred between the hero text and the content, reading as a divider between the two rather than as a lid on the block underneath. */ .ornament--top { margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); } /* A section that opens with an ornament adds no top padding of its own — the hero above it already supplies the breathing room, and stacking both leaves a conspicuous empty band. Written as a double class on purpose: plain .section is defined further down this file, and at equal specificity the later rule would otherwise win and put the full section padding back. */ .section.section--tight-top { padding-top: 0; } /* Mirror it when closing a section instead of opening one. */ .ornament--flip { transform: scaleY(-1); } /* --------------------------------------------------------------------- 4. Layout --------------------------------------------------------------------- */ .section { position: relative; padding: clamp(4rem, 8vw, 7rem) 0; } .section--tight { padding: clamp(3rem, 5vw, 4.5rem) 0; } .section--cream { background: var(--cream); } .section--cream-2 { background: var(--cream-2); } .section--stone { background: url("../img/bg-stone.jpg") center / cover no-repeat fixed; } .section--stone::before { content: ""; position: absolute; inset: 0; background: rgba(255, 248, 236, 0.72); } .section--stone > * { position: relative; } .section--parchment { background: url("../img/bg-parchment.jpg") center / cover no-repeat; } .section--dark { background: var(--char); color: rgba(255, 248, 236, 0.78); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark .section-title { color: var(--cream); } .section--dark .section-text { color: rgba(255, 248, 236, 0.7); } .section--dark .eyebrow { color: var(--gold); } /* Charcoal texture: soft embers behind dark sections. */ .section--dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 12% 0%, rgba(244, 176, 7, 0.13), transparent 60%), radial-gradient(50% 80% at 92% 100%, rgba(195, 54, 1, 0.14), transparent 62%); pointer-events: none; } .section--dark > .container, .section--dark > .container-fluid { position: relative; z-index: 1; } .section-head { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); } /* --------------------------------------------------------------------- 5. Buttons --------------------------------------------------------------------- */ .btn-u { --btn-bg: var(--gold); --btn-fg: var(--char); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 2rem; border: 2px solid transparent; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-body); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1; cursor: pointer; overflow: hidden; transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .btn-u:hover { transform: translateY(-3px); color: var(--btn-fg); } .btn-u:active { transform: translateY(-1px); } /* light sweep across the button on hover */ .btn-u::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); transition: left 0.65s var(--ease); } .btn-u:hover::after { left: 130%; } .btn-gold { --btn-bg: var(--gold); --btn-fg: var(--char); box-shadow: var(--shadow-gold); } .btn-gold:hover { --btn-bg: var(--gold-light); box-shadow: 0 20px 44px rgba(244, 176, 7, 0.4); } .btn-char { --btn-bg: var(--char); --btn-fg: var(--gold); box-shadow: var(--shadow); } .btn-char:hover { --btn-bg: var(--char-3); --btn-fg: var(--gold-light); } .btn-outline-char { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line-strong); } .btn-outline-char:hover { --btn-bg: var(--char); --btn-fg: var(--cream); border-color: var(--char); } .btn-outline-gold { --btn-bg: transparent; --btn-fg: var(--gold); border-color: rgba(244, 176, 7, 0.55); } .btn-outline-gold:hover { --btn-bg: var(--gold); --btn-fg: var(--char); border-color: var(--gold); } .btn-u--sm { padding: 0.7rem 1.4rem; font-size: 0.76rem; } .btn-u--lg { padding: 1.1rem 2.5rem; font-size: 0.92rem; } .btn-u--block { width: 100%; } /* Text link with an animated gold rule. */ .link-arrow { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.82rem; color: var(--gold-deep); } .link-arrow i { transition: transform 0.35s var(--ease); } .link-arrow:hover i { transform: translateX(5px); } /* --------------------------------------------------------------------- 6. Navbar --------------------------------------------------------------------- */ .u-nav { position: sticky; top: 0; z-index: 1030; background: rgba(255, 248, 236, 0.86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(244, 176, 7, 0.25); transition: box-shadow 0.35s var(--ease), background-color 0.35s var(--ease), padding 0.35s var(--ease); } .u-nav.is-stuck { background: rgba(255, 248, 236, 0.97); box-shadow: 0 10px 30px rgba(18, 16, 14, 0.09); } .u-nav .navbar { padding: 0.55rem 0; } .u-nav__brand { display: inline-flex; align-items: center; gap: 0.75rem; } .u-nav__logo { height: 62px; width: auto; transition: height 0.35s var(--ease); } .u-nav.is-stuck .u-nav__logo { height: 50px; } .u-nav__link { position: relative; display: inline-block; padding: 0.55rem 0.15rem !important; margin: 0 0.85rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink) !important; transition: color 0.3s var(--ease); } .u-nav__link::after { content: ""; position: absolute; left: 0; bottom: 0.15rem; width: 100%; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); } .u-nav__link:hover { color: var(--gold-deep) !important; } .u-nav__link:hover::after, .u-nav__link.active::after { transform: scaleX(1); transform-origin: left; } .u-nav__link.active { color: var(--gold-deep) !important; } /* Order-online dropdown */ .u-nav .dropdown-menu { border: 1px solid rgba(244, 176, 7, 0.3); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 0.5rem; min-width: 270px; background: var(--cream); margin-top: 0.65rem; } .u-order-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 0.75rem; border-radius: 10px; color: var(--ink); transition: background-color 0.25s var(--ease), transform 0.25s var(--ease); } .u-order-item:hover { background: var(--gold-soft); color: var(--ink); transform: translateX(4px); } .u-order-item i { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--char); font-size: 0.85rem; } .u-order-item span { display: block; font-weight: 600; line-height: 1.25; } .u-order-item small { color: var(--muted); font-size: 0.78rem; } /* --------------------------------------------------------------------- 6a. Delivery platform marks Each platform's logo is drawn in its own brand colour on a white chip, which is how people recognise them — the gold house chip is kept for everything we do not have a mark for (phone, "all options", etc). --------------------------------------------------------------------- */ .u-brand--ubereats { color: #06c167; } .u-brand--doordash { color: #ff3008; } .u-brand--skipthedishes { color: #ff8000; } .u-brand--grubhub { color: #f63440; } .u-brand--deliveroo { color: #00ccbc; } .u-brand--postmates { color: #1a1613; } .u-order-item svg.u-brand, .u-order-item i.u-brand { flex: 0 0 34px; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); } .u-order-item i.u-brand { padding: 0; font-size: 0.95rem; } .u-nav__cta { margin-left: 0.75rem; } /* Burger → X toggler. Hidden on desktop; the panel is a plain flex row there. */ .u-nav__toggler { display: none; position: relative; z-index: 1042; flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(255, 248, 236, 0.6); color: var(--ink); cursor: pointer; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); } .u-nav__toggler:hover { border-color: var(--gold); background: var(--gold-soft); } .u-nav__toggler:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; } .u-nav__burger { display: block; position: relative; width: 20px; height: 14px; margin: 0 auto; } .u-nav__burger i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.4s var(--ease), opacity 0.25s var(--ease), width 0.4s var(--ease); } .u-nav__burger i:nth-child(1) { top: 0; } .u-nav__burger i:nth-child(2) { top: 6px; width: 74%; } .u-nav__burger i:nth-child(3) { top: 12px; } /* Open state: top and bottom bars cross, middle bar fades out. */ .u-nav__toggler[aria-expanded="true"] { border-color: var(--gold); background: var(--gold-soft); } .u-nav__toggler[aria-expanded="true"] .u-nav__burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .u-nav__toggler[aria-expanded="true"] .u-nav__burger i:nth-child(2) { opacity: 0; transform: translateX(-10px); } .u-nav__toggler[aria-expanded="true"] .u-nav__burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Desktop: the panel wrapper is transparent to the flex layout. */ @media (min-width: 992px) { .u-nav__panel-inner { display: flex; align-items: center; } } /* --------------------------------------------------------------------- 6b. Full-screen mobile menu --------------------------------------------------------------------- */ @media (max-width: 991.98px) { .u-nav__logo { height: 50px; } /* Breathing room between the viewport edge and the logo / toggler. */ .u-nav .navbar { padding: 0.5rem 0.65rem; flex-wrap: nowrap; gap: 0.75rem; } .u-nav__brand { position: relative; z-index: 1042; min-width: 0; } .u-nav__toggler { display: block; } /* The panel itself. Sits just under the sticky bar so the logo and the close button stay put, and covers everything below it. */ .u-nav__panel { display: block !important; /* beat Bootstrap's .collapse { display:none } */ position: fixed; inset: 0; z-index: 1020; height: 100vh; height: 100dvh; margin: 0; padding: calc(var(--nav-h-real, 72px) + 1.75rem) 1.5rem 2.5rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: radial-gradient(120% 55% at 100% 0%, rgba(244, 176, 7, 0.22), transparent 62%), radial-gradient(90% 45% at 0% 100%, rgba(203, 140, 14, 0.16), transparent 60%), linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); /* Curtain-drop reveal. */ clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden; transition: clip-path 0.62s var(--ease), opacity 0.35s var(--ease), visibility 0s linear 0.62s; } .u-nav__panel.is-open { clip-path: inset(0 0 0 0); opacity: 1; visibility: visible; transition: clip-path 0.62s var(--ease), opacity 0.25s var(--ease), visibility 0s linear 0s; } .u-nav__panel-inner { display: flex; flex-direction: column; min-height: 100%; max-width: 32rem; margin: 0 auto; } .u-nav__panel .navbar-nav { width: 100%; } /* Every direct child of the panel drifts up and fades in, one after the other, once the curtain has started to drop. */ .u-nav__panel .nav-item, .u-nav__panel .u-nav__foot { opacity: 0; transform: translateY(22px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .u-nav__panel.is-open .nav-item, .u-nav__panel.is-open .u-nav__foot { opacity: 1; transform: none; } .u-nav__panel.is-open .nav-item:nth-child(1) { transition-delay: 0.16s; } .u-nav__panel.is-open .nav-item:nth-child(2) { transition-delay: 0.22s; } .u-nav__panel.is-open .nav-item:nth-child(3) { transition-delay: 0.28s; } .u-nav__panel.is-open .nav-item:nth-child(4) { transition-delay: 0.34s; } .u-nav__panel.is-open .nav-item:nth-child(5) { transition-delay: 0.40s; } .u-nav__panel.is-open .u-nav__foot { transition-delay: 0.48s; } /* Big display-face links with a gold rule that sweeps in on tap. */ .u-nav__link { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 1rem 0.15rem !important; font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; letter-spacing: 0.02em; line-height: 1.1; border-bottom: 1px solid var(--line); } .u-nav__link::after { display: block; left: 0; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; } .u-nav__link.active { color: var(--gold-deep) !important; } .u-nav__link.active::after { transform: scaleX(1); } /* Order Online block: the dropdown is always open inside the panel. */ .u-nav__cta { margin: 1.75rem 0 0; display: block; } .u-nav__cta > .btn-u { width: 100%; justify-content: center; font-size: 0.95rem; } .u-nav__cta-caret { display: none; } .u-nav .dropdown-menu { display: block !important; position: static !important; transform: none !important; float: none; width: 100%; min-width: 0; margin: 0.85rem 0 0; padding: 0; border: 0; background: transparent; box-shadow: none; } .u-nav .dropdown-menu .dropdown-divider { display: none; } .u-nav .dropdown-menu .u-order-item { padding: 0.7rem 0.85rem; margin-bottom: 0.5rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.55); } .u-nav .dropdown-menu .u-order-item:hover { transform: none; background: var(--gold-soft); } /* Panel footer — phone, address, socials. */ .u-nav__foot { margin-top: auto; padding-top: 2rem; text-align: center; } .u-nav__foot-link { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); } .u-nav__foot-link i { color: var(--gold-deep); margin-right: 0.5rem; font-size: 1rem; } .u-nav__foot-address { display: inline-block; margin: 0.4rem 0 1.1rem; font-size: 0.9rem; color: var(--muted); } .u-nav__foot-address:hover { color: var(--gold-deep); } .u-nav__socials { display: flex; justify-content: center; gap: 0.6rem; } .u-nav__socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink); transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease); } .u-nav__socials a:hover { background: var(--gold); color: var(--char); transform: translateY(-3px); } } /* Page behind the open panel must not scroll. */ body.nav-open { overflow: hidden; } /* Small laptops (992–1199px). Bootstrap pins .container at 960px across this whole range, so the moment the desktop navbar appears it is at its most cramped: logo, four links and the Order Online button all fighting for the same 960px, with the layout only loosening again at 1200. Let the width ramp up with the window instead of sitting on a plateau, and take a little air out of the link spacing at the tight end. Content and navbar stay on the same gridlines. */ @media (min-width: 992px) and (max-width: 1199.98px) { .container { max-width: min(100% - 2rem, 1140px); } .u-nav__link { margin: 0 0.5rem; font-size: 0.78rem; letter-spacing: 0.1em; } .u-nav__logo { height: 54px; } .u-nav.is-stuck .u-nav__logo { height: 46px; } } /* Very small phones: the brand mark takes the room the toggler needs. */ @media (max-width: 400px) { .u-nav__logo { height: 44px; } .u-nav .navbar { padding: 0.45rem 0.5rem; } .u-nav__panel { padding-left: 1.15rem; padding-right: 1.15rem; } .u-nav__link { font-size: 1.65rem; } } /* --------------------------------------------------------------------- 7. Hero --------------------------------------------------------------------- */ .hero { position: relative; display: flex; align-items: center; overflow: hidden; background: var(--cream-2); text-align: center; } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); animation: heroDrift 26s ease-in-out infinite alternate; } @keyframes heroDrift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(0, -1.4%, 0); } } /* Cream scrim keeps the ornate artwork readable behind dark text. */ .hero__veil { position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 45%, rgba(255, 248, 236, 0.92) 0%, rgba(255, 248, 236, 0.72) 45%, rgba(255, 248, 236, 0.5) 100%), linear-gradient(180deg, rgba(255, 248, 236, 0.55) 0%, transparent 25%, rgba(255, 248, 236, 0.96) 100%); } .hero__inner { position: relative; z-index: 2; width: 100%; padding: clamp(5rem, 11vw, 8.5rem) 0; } .hero--home { min-height: min(92vh, 900px); } .hero--page { min-height: min(56vh, 520px); } /* A shallower banner for pages whose content should start almost straight away. The min-height is kept close to the natural content height so there is no dead band under the last line of text. */ .hero--compact { min-height: min(34vh, 310px); } .hero--compact .hero__inner { padding: clamp(2.5rem, 5vw, 3.5rem) 0; } /* The banner is centred by .hero's flex alignment, so whenever the minimum height is taller than the copy the leftover is split above and below it. That trailing half is what pushes an ornament in the next section away from the hero text it belongs to — so a flush hero ends at its own padding and nothing else, letting the ornament's margins set both gaps to the same size. */ .hero--flush { min-height: 0; } .hero--compact .hero__crumbs { margin-bottom: 0.75rem; } .hero--compact .eyebrow { margin-bottom: 0.6rem; } .hero__logo { display: block; width: clamp(140px, 20vw, 215px); margin: 0 auto 1.5rem; filter: drop-shadow(0 12px 26px rgba(18, 16, 14, 0.18)); animation: floatY 6s ease-in-out infinite; } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .hero__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.94; letter-spacing: 0.005em; margin: 0 0 1.1rem; color: var(--ink); } .hero--home .hero__title { font-size: clamp(2.9rem, 8.2vw, 6.2rem); } .hero--page .hero__title { font-size: clamp(2.4rem, 6vw, 4.5rem); } .hero--compact .hero__title { font-size: clamp(2.1rem, 4.8vw, 3.5rem); margin-bottom: 0.85rem; } /* Highlight the accent word without an underline. */ .hero__accent { position: relative; display: inline-block; color: var(--gold-deep); white-space: nowrap; } .hero__text { font-size: clamp(1.02rem, 1.8vw, 1.2rem); color: var(--muted); max-width: 60ch; margin: 0 auto 2rem; } .hero--page .hero__text { margin-bottom: 0; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; } /* status chip — "Open now until 10:00 pm" */ .status-chip { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 1.05rem; border-radius: var(--radius-pill); background: rgba(18, 16, 14, 0.06); border: 1px solid var(--line); font-size: 0.82rem; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; } .status-chip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; } .status-chip--open .status-chip__dot { background: #2f9e44; box-shadow: 0 0 0 0 rgba(47, 158, 68, 0.6); animation: pulseDot 2.2s infinite; } .status-chip--closed .status-chip__dot { background: var(--ember); } @keyframes pulseDot { 70% { box-shadow: 0 0 0 9px rgba(47, 158, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 158, 68, 0); } } .status-chip--dark { background: rgba(255, 248, 236, 0.08); border-color: rgba(255, 248, 236, 0.16); color: var(--cream); } /* scroll cue at the bottom of the home hero */ .hero__cue { position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%); z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink); background: rgba(255, 248, 236, 0.7); animation: bobble 2.4s var(--ease) infinite; } .hero__cue:hover { color: var(--gold-deep); border-color: var(--gold); } @keyframes bobble { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* breadcrumb under a page hero title */ .hero__crumbs { display: flex; justify-content: center; gap: 0.6rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; } .hero__crumbs a { color: var(--muted); } .hero__crumbs a:hover { color: var(--gold-deep); } .hero__crumbs span { color: var(--gold-deep); } /* --------------------------------------------------------------------- 8. Dish cards (home preview + grids) --------------------------------------------------------------------- */ .dish-card { position: relative; height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease); } .dish-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(244, 176, 7, 0.5); } .dish-card[role="button"] { cursor: pointer; } .dish-card[role="button"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; } .dish-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-2); } .dish-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.8s var(--ease); } .dish-card:hover .dish-card__media img { transform: scale(1.08); } .dish-card__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; } .dish-card__head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; } .dish-card__name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.3rem; line-height: 1.1; margin: 0; letter-spacing: 0.01em; } .dish-card__dots { flex: 1; border-bottom: 2px dotted var(--line-strong); transform: translateY(-4px); min-width: 14px; } .dish-card__price { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold-deep); white-space: nowrap; } .dish-card__text { color: var(--muted); font-size: 0.95rem; margin: 0; } .dish-card__cat { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2; background: rgba(18, 16, 14, 0.72); color: var(--cream); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.35rem 0.7rem; border-radius: var(--radius-pill); backdrop-filter: blur(4px); } /* small labels: Best seller / Spicy / Vegetarian */ .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; } .chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.65rem; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); background: #fff; } .chip--gold { background: var(--gold); border-color: var(--gold); color: var(--char); } .chip--spicy { color: var(--ember); border-color: rgba(195, 54, 1, 0.35); background: rgba(195, 54, 1, 0.07); } .chip--veg { color: #2f7a3e; border-color: rgba(47, 122, 62, 0.3); background: rgba(47, 122, 62, 0.07); } /* --------------------------------------------------------------------- 9. Menu page --------------------------------------------------------------------- */ /* Category bar + layout switch, centred together, riding along as you scroll. */ .menu-toolbar { position: sticky; top: calc(var(--nav-h) + 10px); z-index: 900; display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 0 clamp(2.5rem, 5vw, 3.75rem); } .menu-nav { min-width: 0; flex: 0 1 auto; } .menu-nav__scroll { display: flex; gap: 0.4rem; width: fit-content; /* centres itself when the pills fit … */ max-width: 100%; /* … and scrolls sideways when they do not */ margin-inline: auto; padding: 0.45rem; border-radius: var(--radius-pill); background: rgba(255, 248, 236, 0.92); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border: 1px solid rgba(244, 176, 7, 0.35); box-shadow: 0 8px 24px rgba(18, 16, 14, 0.09); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } .menu-nav__scroll::-webkit-scrollbar { display: none; } /* The scrollbar is hidden, so main.js flags whichever edge still has pills behind it and we fade that side — otherwise the last category simply looks chopped in half on a phone or a narrow tablet. */ .menu-nav__scroll.has-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%); } .menu-nav__scroll.has-more-start { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px); mask-image: linear-gradient(to right, transparent 0, #000 34px); } .menu-nav__scroll.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); } .menu-pill { flex: none; padding: 0.6rem 1.15rem; border-radius: var(--radius-pill); border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; white-space: nowrap; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .menu-pill:hover { background: var(--gold-soft); color: var(--gold-deep); } .menu-pill.is-active { background: var(--char); border-color: var(--char); color: var(--gold); box-shadow: 0 4px 12px rgba(18, 16, 14, 0.22); } /* Photo / list switch — same capsule treatment as the category bar. */ .view-toggle { flex: none; display: flex; gap: 0.25rem; padding: 0.45rem; border-radius: var(--radius-pill); background: rgba(255, 248, 236, 0.92); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border: 1px solid rgba(244, 176, 7, 0.35); box-shadow: 0 8px 24px rgba(18, 16, 14, 0.09); } .view-toggle__btn { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); font-size: 0.92rem; cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); } .view-toggle__btn:hover { background: var(--gold-soft); color: var(--gold-deep); } .view-toggle__btn.is-active { background: var(--char); border-color: var(--char); color: var(--gold); box-shadow: 0 4px 12px rgba(18, 16, 14, 0.22); } /* Clear both the navbar and the sticky category bar when jumping to an anchor. */ /* The category bar sits directly on top of the first category heading — no long empty stretch between the pills and "Sandwiches". */ /* The menu section opens with the category bar, so it needs less headroom than a normal section. */ .section--menu { padding-top: clamp(2.25rem, 4vw, 3.25rem); } /* Anchor jumps clear the navbar and the floating category capsule. */ .menu-block { padding-top: 0; scroll-margin-top: calc(var(--nav-h) + 92px); } .menu-block + .menu-block { margin-top: clamp(3.25rem, 6vw, 5rem); } .menu-block__head { text-align: center; margin-bottom: 2rem; } .menu-block__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1; margin: 0 0 0.6rem; } .menu-block__text { color: var(--muted); max-width: 56ch; margin: 0 auto; } /* One dish as a row: thumb, name + dotted leader + price, description. */ .menu-row { display: flex; gap: 1.1rem; padding: 1.1rem; border-radius: var(--radius-sm); border: 1px solid transparent; transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease); height: 100%; } .menu-row:hover { background: #fff; border-color: rgba(244, 176, 7, 0.4); transform: translateY(-3px); box-shadow: var(--shadow-sm); } .menu-row__thumb { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 12px; overflow: hidden; background: var(--cream-2); border: 1px solid var(--line); } .menu-row__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.7s var(--ease); } .menu-row:hover .menu-row__thumb img { transform: scale(1.09); } .menu-row__body { flex: 1; min-width: 0; } .menu-row__head { display: flex; align-items: baseline; gap: 0.6rem; } .menu-row__name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.16rem; line-height: 1.15; margin: 0; letter-spacing: 0.01em; min-width: 0; /* long names wrap instead of shoving the price out */ overflow-wrap: break-word; } .menu-row__dots { flex: 1; border-bottom: 2px dotted var(--line-strong); transform: translateY(-4px); min-width: 12px; } .menu-row__price { font-family: var(--font-display); font-size: 1.16rem; color: var(--gold-deep); white-space: nowrap; } .menu-row__text { color: var(--muted); font-size: 0.93rem; margin: 0.3rem 0 0; } /* --------------------------------------------------------------------- 9b. Photo view — the same rows, re-flowed as cards --------------------------------------------------------------------- */ /* A dish with no photo of its own stays a clean text row in list view … */ .menu-row__thumb[data-placeholder] { display: none; } /* … and picks up the configured placeholder once photos are switched on. */ [data-view="grid"] .menu-row__thumb[data-placeholder] { display: block; } [data-view="grid"] .menu-row { flex-direction: column; gap: 0; padding: 0; overflow: hidden; background: #fff; border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } [data-view="grid"] .menu-row:hover { transform: translateY(-8px); border-color: rgba(244, 176, 7, 0.5); box-shadow: var(--shadow-lg); } [data-view="grid"] .menu-row__thumb { flex: none; align-self: stretch; width: 100%; max-width: none; height: auto; margin: 0; aspect-ratio: 4 / 3; border: 0; border-radius: 0; } [data-view="grid"] .menu-row__thumb img { width: 100%; height: 100%; object-fit: cover; transition-duration: 0.8s; } [data-view="grid"] .menu-row:hover .menu-row__thumb img { transform: scale(1.08); } /* Keep uploaded placeholders full-bleed too, so every menu card has the same edge-to-edge media treatment as a card on the home page. */ [data-view="grid"] .menu-row__thumb[data-placeholder] { background: var(--cream-2); } /* One card per row on a phone means a 4:3 photo is a lot of scrolling before the next dish — a slightly wider frame keeps more of the menu in view. */ @media (max-width: 575.98px) { [data-view="grid"] .menu-row__thumb { aspect-ratio: 16 / 10; } } [data-view="grid"] .menu-row__body { width: 100%; padding: 1.15rem 1.3rem 1.35rem; } [data-view="grid"] .menu-row__name { font-size: 1.24rem; } [data-view="grid"] .menu-row__price { font-size: 1.24rem; } /* Three across on desktop, two on tablets — list view keeps its own widths. */ @media (min-width: 992px) { [data-view="grid"] .menu-col { width: 33.3333%; } } @media (min-width: 576px) and (max-width: 991.98px) { [data-view="grid"] .menu-col { width: 50%; } } /* The list view is a thumbnail beside text, so on a narrow phone the thumbnail has to give way before the dish name starts wrapping onto three lines. */ @media (max-width: 420px) { .menu-row { gap: 0.8rem; padding: 0.85rem; } .menu-row__thumb { flex: 0 0 68px; width: 68px; height: 68px; border-radius: 10px; } .menu-row__name, .menu-row__price { font-size: 1.04rem; } .menu-row__text { font-size: 0.88rem; } } /* --------------------------------------------------------------------- 9c. Dish popup --------------------------------------------------------------------- */ .menu-row[role="button"] { cursor: pointer; } .dish-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: clamp(0.75rem, 3vw, 2rem); } .dish-modal[hidden] { display: none; } .dish-modal__backdrop { position: absolute; inset: 0; background: rgba(12, 10, 9, 0.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.3s var(--ease); } .dish-modal.is-open .dish-modal__backdrop { opacity: 1; } .dish-modal__panel { position: relative; z-index: 1; display: flex; width: min(880px, 100%); max-height: min(88vh, 620px); background: var(--cream); border-radius: var(--radius); overflow: hidden; box-shadow: 0 32px 80px rgba(12, 10, 9, 0.45); opacity: 0; transform: translateY(18px) scale(0.97); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .dish-modal.is-open .dish-modal__panel { opacity: 1; transform: none; } .dish-modal__media { flex: 0 0 46%; position: relative; background: var(--cream-2); overflow: hidden; } .dish-modal__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .dish-modal__body { flex: 1; min-width: 0; padding: clamp(1.5rem, 3.5vw, 2.5rem); overflow-y: auto; } .dish-modal__cat { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.7rem; } .dish-modal__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.02; letter-spacing: 0.01em; margin: 0 0 0.5rem; } .dish-modal__price { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 1.85rem); color: var(--gold-deep); margin: 0 0 0.9rem; } .dish-modal__price:empty { display: none; } .dish-modal__text { color: var(--muted); margin: 0; } .dish-modal__text:empty { display: none; } .dish-modal .chips { margin-top: 1rem; } .dish-modal .chips:empty { display: none; } .dish-modal__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; } .dish-modal__actions:empty { display: none; } .dish-modal__close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 248, 236, 0.92); color: var(--ink); font-size: 1rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease); } .dish-modal__close:hover { background: var(--char); color: var(--gold); transform: rotate(90deg); } /* Stack the panel on small screens. */ @media (max-width: 767.98px) { .dish-modal__panel { flex-direction: column; max-height: 90vh; } .dish-modal__media { flex: none; aspect-ratio: 16 / 10; width: 100%; } .dish-modal__close { top: 0.6rem; right: 0.6rem; width: 36px; height: 36px; } .dish-modal__actions .btn-u { width: 100%; } } /* Stop the page behind the popup from scrolling. */ body.has-modal { overflow: hidden; } .menu-empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius); } /* --------------------------------------------------------------------- 10. Feature cards --------------------------------------------------------------------- */ .feature-card { height: 100%; padding: 2.1rem 1.6rem; background: #fff; /* A resting shadow so the card reads as a raised surface, not a flat patch. */ border: 1px solid rgba(26, 22, 19, 0.07); border-radius: var(--radius); box-shadow: var(--shadow-sm); text-align: center; transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease); } .feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: rgba(244, 176, 7, 0.45); } .feature-card__icon { width: 68px; height: 68px; margin: 0 auto 1.15rem; display: grid; place-items: center; border-radius: 50%; font-size: 1.5rem; color: var(--char); background: linear-gradient(140deg, var(--gold-light), var(--gold-deep)); box-shadow: 0 12px 26px rgba(244, 176, 7, 0.32); transition: transform 0.5s var(--ease); } .feature-card:hover .feature-card__icon { transform: rotate(-8deg) scale(1.06); } .feature-card__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.02em; margin: 0 0 0.5rem; } .feature-card__text { color: var(--muted); font-size: 0.95rem; margin: 0; } /* dark variant, used on charcoal sections */ .section--dark .feature-card { background: rgba(255, 248, 236, 0.04); border-color: rgba(255, 248, 236, 0.1); } .section--dark .feature-card__title { color: var(--cream); } .section--dark .feature-card__text { color: rgba(255, 248, 236, 0.66); } /* --------------------------------------------------------------------- 11. Split media / story block --------------------------------------------------------------------- */ .media-frame { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); } .media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .media-frame--tall { aspect-ratio: 4 / 5; } .media-frame--wide { aspect-ratio: 16 / 11; } /* thin gold outline offset behind the image */ .media-frame__outline { position: absolute; inset: 14px; border: 1px solid rgba(255, 248, 236, 0.5); border-radius: calc(var(--radius) - 6px); pointer-events: none; } .media-badge { position: absolute; right: -14px; bottom: 26px; z-index: 3; background: var(--gold); color: var(--char); border-radius: var(--radius-sm); padding: 1rem 1.35rem; box-shadow: var(--shadow); text-align: center; line-height: 1.15; } .media-badge strong { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; } .media-badge span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } /* --------------------------------------------------------------------- 12. Newsletter --------------------------------------------------------------------- */ .newsletter { position: relative; border-radius: var(--radius); padding: clamp(2.25rem, 5vw, 3.5rem); background: linear-gradient(135deg, var(--char) 0%, var(--char-3) 100%); color: var(--cream); overflow: hidden; box-shadow: var(--shadow-lg); } .newsletter::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 100% at 100% 0%, rgba(244, 176, 7, 0.22), transparent 60%), radial-gradient(50% 100% at 0% 100%, rgba(195, 54, 1, 0.2), transparent 60%); } .newsletter > * { position: relative; z-index: 1; } .newsletter .eyebrow { color: var(--gold); } .newsletter__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1; color: var(--cream); margin: 0 0 0.75rem; } .newsletter__text { color: rgba(255, 248, 236, 0.72); margin-bottom: 0; } .newsletter__form { display: grid; gap: 0.75rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .newsletter__form { grid-template-columns: 1fr 1.2fr auto; align-items: stretch; } } .newsletter__input { width: 100%; padding: 1rem 1.25rem; border-radius: var(--radius-pill); border: 1px solid rgba(255, 248, 236, 0.2); background: rgba(255, 248, 236, 0.07); color: var(--cream); font-family: inherit; font-size: 0.98rem; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); } .newsletter__input::placeholder { color: rgba(255, 248, 236, 0.45); } .newsletter__input:focus { outline: none; border-color: var(--gold); background: rgba(255, 248, 236, 0.12); } .newsletter__note { font-size: 0.82rem; color: rgba(255, 248, 236, 0.5); margin: 0.9rem 0 0; } /* The sign-up result is printed inside the band, so the page-wide alert colours — dark ink on a pale wash — have to be re-cut for a dark panel. */ .newsletter .alert-note { margin-bottom: 1rem; } .newsletter .alert-note--success { background: rgba(126, 204, 137, 0.12); border-color: rgba(126, 204, 137, 0.42); color: #a8e3b2; } .newsletter .alert-note--error { background: rgba(255, 122, 82, 0.12); border-color: rgba(255, 122, 82, 0.45); color: #ffb59b; } .newsletter .alert-note--info { background: rgba(244, 176, 7, 0.12); border-color: rgba(244, 176, 7, 0.42); color: #f6c750; } /* Confirmation panel, shown in place of the form once this browser has signed up. Same dark band, so it reads as the form settling rather than a different component appearing. */ .nl-done { display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; padding: 1.35rem 1.5rem; border: 1px solid rgba(244, 176, 7, 0.35); border-radius: var(--radius); background: rgba(244, 176, 7, 0.08); animation: nl-done-in 0.55s var(--ease) both; } .nl-done__check { flex: 0 0 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--char); font-size: 1.05rem; animation: nl-check-pop 0.5s var(--ease) 0.15s both; } .nl-done__body { flex: 1 1 12rem; min-width: 0; } .nl-done__title { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.15rem; line-height: 1.2; color: var(--cream); } .nl-done__email { display: flex; align-items: center; gap: 0.45rem; margin: 0.3rem 0 0; font-size: 0.9rem; color: rgba(255, 248, 236, 0.62); /* A long address must wrap rather than stretch the panel off-screen. */ overflow-wrap: anywhere; } .nl-done__email i { color: var(--gold); font-size: 0.8rem; flex: 0 0 auto; } .nl-done__reset { flex: 0 0 auto; margin: 0; } @media (max-width: 575.98px) { .nl-done { gap: 0.9rem; } .nl-done__reset { flex: 1 1 100%; } .nl-done__reset .btn-u { width: 100%; justify-content: center; } } @keyframes nl-done-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes nl-check-pop { 0% { opacity: 0; transform: scale(0.4); } 60% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } } /* --------------------------------------------------------------------- 12b. Unsubscribe One card, three states — asking, done, broken link — told apart by the colour of the mark at the top rather than by three different layouts. --------------------------------------------------------------------- */ .unsub { --unsub-accent: var(--gold); --unsub-accent-soft: rgba(244, 176, 7, 0.14); position: relative; overflow: hidden; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(2rem, 5vw, 3.25rem) clamp(1.4rem, 4vw, 3rem) clamp(1.6rem, 4vw, 2.5rem); box-shadow: var(--shadow); } .unsub::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, transparent, var(--unsub-accent), transparent); } .unsub--done { --unsub-accent: #2f7a3e; --unsub-accent-soft: rgba(47, 122, 62, 0.12); } .unsub--invalid { --unsub-accent: var(--ember); --unsub-accent-soft: rgba(195, 54, 1, 0.1); } .unsub__mark { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 1.4rem; border-radius: 50%; background: var(--unsub-accent-soft); border: 1px solid var(--unsub-accent); color: var(--unsub-accent); font-size: 1.6rem; animation: nl-check-pop 0.5s var(--ease) both; } .unsub--done .unsub__mark { background: #2f7a3e; border-color: #2f7a3e; color: #fff; box-shadow: 0 14px 30px rgba(47, 122, 62, 0.28); } .unsub__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1.02; font-size: clamp(1.8rem, 4vw, 2.7rem); margin: 0 0 0.9rem; } .unsub__lead { color: var(--muted); font-size: 1.04rem; max-width: 52ch; margin: 0 auto; } .unsub__lead + .unsub__lead { margin-top: 0.9rem; } /* The address itself, set apart so nobody unsubscribes the wrong one. */ .unsub__chip { display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%; margin: 1.4rem 0 0.4rem; padding: 0.7rem 1.25rem; border-radius: var(--radius-pill); background: var(--cream-2); border: 1px solid var(--line); font-size: 0.98rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .unsub__chip i { color: var(--unsub-accent); font-size: 0.85rem; flex: 0 0 auto; } /* One decision, stacked deliberately: the button that acts sits above the one that backs out, at the same width, at every screen size. */ .unsub .hero__actions { flex-direction: column; align-items: center; gap: 0.7rem; margin-top: 1.6rem; } .unsub .hero__actions .btn-u { min-width: min(20rem, 100%); } /* Three short promises under the button — the things people want to know before they press it, and the reason they press it instead of "spam". */ .unsub__facts { display: grid; gap: 0.75rem; grid-template-columns: 1fr; list-style: none; margin: 1.9rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--line); text-align: left; } @media (min-width: 700px) { .unsub__facts { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } } .unsub__fact { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.88rem; line-height: 1.5; color: var(--muted); } .unsub__fact i { flex: 0 0 auto; margin-top: 0.15rem; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-soft); color: var(--gold-deep); font-size: 0.72rem; } .unsub__fact strong { display: block; color: var(--ink); font-weight: 600; } .unsub__note { margin: 1.5rem 0 0; font-size: 0.85rem; color: var(--muted); } .unsub__note i { color: var(--gold-deep); margin-right: 0.4rem; } /* --------------------------------------------------------------------- 13. CTA band --------------------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; background: var(--char); color: var(--cream); padding: clamp(3rem, 6vw, 4.75rem) 0; } .cta-band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(244, 176, 7, 0.055) 0 2px, transparent 2px 16px), radial-gradient(60% 120% at 85% 50%, rgba(244, 176, 7, 0.16), transparent 60%); } .cta-band > .container { position: relative; z-index: 1; } .cta-band__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1; color: var(--cream); margin: 0 0 0.6rem; } .cta-band__text { color: rgba(255, 248, 236, 0.72); margin: 0; } .cta-band__address { display: inline-block; color: rgba(255, 248, 236, 0.72); } .cta-band__address:hover { color: var(--gold); } /* Home call-to-action controls form one clean vertical column. */ .home-cta__actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; } /* Locations page: keep the ordering button and phone link together. */ .location-cta__actions { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; } .location-cta__call { margin: 0; } /* --------------------------------------------------------------------- 14. Info cards (contact + locations) --------------------------------------------------------------------- */ .info-card { height: 100%; padding: 1.75rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease); } .info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .info-card__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--gold-soft); color: var(--gold-deep); font-size: 1.15rem; margin-bottom: 1rem; } .info-card__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; } .info-card__value { font-size: 1.08rem; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.5; } .info-card__value a { color: var(--ink); } .info-card__value a:hover { color: var(--gold-deep); } .info-card__address-link { display: block; color: var(--ink); } .info-card__address-link:hover { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.18em; } .map-address-link { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(244, 176, 7, 0.6); text-underline-offset: 0.18em; } .map-address-link:hover { color: var(--gold-deep); } .info-card__note { color: var(--muted); font-size: 0.9rem; margin: 0.5rem 0 0; } /* Opening hours — every day on its own line, today called out. */ .hours-list { list-style: none; margin: 0; padding: 0; } .hours-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.58rem 0.7rem; border-radius: 10px; border-bottom: 1px dashed var(--line); font-size: 0.95rem; transition: background-color 0.3s var(--ease); } .hours-list li:last-child { border-bottom: 0; } .hours-list__day { display: flex; align-items: center; gap: 0.5rem; color: inherit; min-width: 0; } .hours-list__time { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; /* times line up cleanly down the column */ } .hours-list__time.is-closed { color: var(--ember); font-weight: 600; } /* Days the shop is shut read quieter than the days it is open. */ .hours-list li.is-closed-day .hours-list__day { color: var(--muted); } /* Today */ .hours-list li.is-today { background: var(--gold-soft); border-bottom-color: transparent; box-shadow: inset 3px 0 0 var(--gold); color: var(--ink); font-weight: 700; } .hours-list li.is-today .hours-list__day { color: var(--ink); } .hours-list li.is-today .hours-list__time { color: var(--gold-deep); } /* Live marker on today's row — a green dot with a soft outward pulse. */ .hours-list__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #2f9e44; box-shadow: 0 0 0 0 rgba(47, 158, 68, 0.65); animation: hoursPulse 2.2s infinite; } @keyframes hoursPulse { 70% { box-shadow: 0 0 0 8px rgba(47, 158, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 158, 68, 0); } } /* If the shop is shut today, a green "live" dot would be misleading. */ .hours-list li.is-closed-day .hours-list__dot { background: var(--ember); box-shadow: none; animation: none; } .hours-list__note { display: block; font-size: 0.78rem; font-weight: 500; color: var(--muted); margin-top: 0.1rem; } /* Map */ .map-frame { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--cream-2); min-height: 340px; } .map-frame iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; } .map-fallback { display: grid; place-items: center; text-align: center; padding: 3rem 1.5rem; color: var(--muted); min-height: 340px; } /* --------------------------------------------------------------------- 15. Forms --------------------------------------------------------------------- */ .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow); } .field { margin-bottom: 1.15rem; } .field__label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem; } .field__label .req { color: var(--ember); } .field__input, .field__textarea, .field__select { width: 100%; padding: 0.85rem 1.05rem; font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--cream); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease); } .field__textarea { min-height: 150px; resize: vertical; } .field__input:focus, .field__textarea:focus, .field__select:focus { outline: none; background: #fff; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); } .field__hint { font-size: 0.82rem; color: var(--muted); margin: 0.4rem 0 0; } .recaptcha-wrap { margin: 1.5rem 0; } .recaptcha-v3-note { margin: 0; color: var(--muted); font-size: 0.76rem; line-height: 1.55; } .recaptcha-v3-note a { color: inherit; text-decoration: underline; text-underline-offset: 0.16em; } .recaptcha-v3-note a:hover { color: var(--gold-deep); } /* honeypot — hidden from people, visible to bots */ .hp-field { position: absolute; left: -5000px; opacity: 0; height: 0; overflow: hidden; } /* Alerts */ .alert-note { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.95rem 1.15rem; border-radius: var(--radius-sm); border: 1px solid; font-size: 0.95rem; margin-bottom: 1.25rem; } .alert-note i { margin-top: 0.15rem; } .alert-note--success { background: rgba(47, 122, 62, 0.08); border-color: rgba(47, 122, 62, 0.35); color: #216032; } .alert-note--error { background: rgba(195, 54, 1, 0.07); border-color: rgba(195, 54, 1, 0.32); color: #9a2b02; } .alert-note--info { background: var(--gold-soft); border-color: rgba(244, 176, 7, 0.45); color: #8a6206; } /* --------------------------------------------------------------------- 16. Order page cards --------------------------------------------------------------------- */ .order-card { position: relative; display: flex; align-items: center; gap: 1.2rem; height: 100%; padding: 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--ink); overflow: hidden; transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease); } .order-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s var(--ease); } .order-card:hover { transform: translateY(-6px); border-color: rgba(244, 176, 7, 0.5); box-shadow: var(--shadow); color: var(--ink); } .order-card:hover::before { transform: scaleY(1); transform-origin: top; } .order-card__icon { flex: 0 0 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; font-size: 1.3rem; color: var(--char); background: linear-gradient(140deg, var(--gold-light), var(--gold-deep)); transition: transform 0.45s var(--ease); } .order-card:hover .order-card__icon { transform: scale(1.07) rotate(-6deg); } /* A recognised delivery platform swaps the gold tile for its own logo on white — the whole point of the mark is that people spot it at a glance. */ .order-card__icon:has(.u-brand) { background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); } .order-card__icon .u-brand { width: 30px; height: 30px; font-size: 1.5rem; } .order-card__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.2rem; margin: 0 0 0.15rem; letter-spacing: 0.02em; } .order-card__note { color: var(--muted); font-size: 0.9rem; margin: 0; } .order-card__go { margin-left: auto; color: var(--gold-deep); transition: transform 0.35s var(--ease); } .order-card:hover .order-card__go { transform: translateX(5px); } /* --------------------------------------------------------------------- 17. Footer --------------------------------------------------------------------- */ .u-foot { position: relative; background: var(--char); color: rgba(255, 248, 236, 0.68); padding: clamp(3.5rem, 7vw, 5.25rem) 0 0; overflow: hidden; } .u-foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-deep) 50%, var(--gold) 80%, transparent); } .u-foot::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 15% 0%, rgba(244, 176, 7, 0.09), transparent 60%); pointer-events: none; } .u-foot > .container { position: relative; z-index: 1; } .u-foot__logo { display: block; width: 168px; max-height: 86px; object-fit: contain; object-position: left center; margin-bottom: 1.15rem; } .u-foot__about { font-size: 0.95rem; line-height: 1.75; max-width: 38ch; } .u-foot__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.05rem; color: var(--cream); margin: 0 0 1.25rem; padding-bottom: 0.65rem; border-bottom: 1px solid rgba(255, 248, 236, 0.12); position: relative; } .u-foot__title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 42px; height: 2px; background: var(--gold); } .u-foot__links { list-style: none; margin: 0; padding: 0; } .u-foot__links li { margin-bottom: 0.6rem; } .u-foot__links a { display: inline-flex; align-items: center; gap: 0.55rem; color: rgba(255, 248, 236, 0.68); font-size: 0.95rem; transition: color 0.3s var(--ease), transform 0.3s var(--ease), gap 0.3s var(--ease); } .u-foot__links a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-deep); transition: transform 0.3s var(--ease); flex: none; } .u-foot__links a:hover { color: var(--gold); gap: 0.8rem; } .u-foot__links a:hover::before { transform: scale(1.5); } .u-foot__contact { list-style: none; margin: 0; padding: 0; } .u-foot__contact li { display: flex; gap: 0.85rem; margin-bottom: 1rem; font-size: 0.95rem; line-height: 1.6; } .u-foot__contact i { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(244, 176, 7, 0.12); color: var(--gold); font-size: 0.82rem; } .u-foot__contact a { color: rgba(255, 248, 236, 0.68); } .u-foot__contact a:hover { color: var(--gold); } .u-foot__contact strong { display: block; color: var(--cream); font-weight: 600; } .u-foot__address { display: inline-block; } .u-foot .hours-list li { border-bottom-color: rgba(255, 248, 236, 0.1); color: rgba(255, 248, 236, 0.68); font-size: 0.9rem; padding: 0.5rem 0.6rem; } .u-foot .hours-list li.is-closed-day .hours-list__day { color: rgba(255, 248, 236, 0.45); } .u-foot .hours-list__time.is-closed { color: #e2704a; } .u-foot .hours-list li.is-today { background: rgba(244, 176, 7, 0.13); box-shadow: inset 3px 0 0 var(--gold); color: var(--cream); } .u-foot .hours-list li.is-today .hours-list__day { color: var(--cream); } .u-foot .hours-list li.is-today .hours-list__time { color: var(--gold); } .u-foot .hours-list__note { color: rgba(255, 248, 236, 0.45); } .social-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.35rem; } .social-row a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 248, 236, 0.18); color: rgba(255, 248, 236, 0.8); font-size: 0.95rem; transition: all 0.35s var(--ease); } .social-row a:hover { background: var(--gold); border-color: var(--gold); color: var(--char); transform: translateY(-4px); } .u-foot__bar { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 1.5rem 0; border-top: 1px solid rgba(255, 248, 236, 0.12); font-size: 0.87rem; color: rgba(255, 248, 236, 0.5); } .u-foot__bar a { color: rgba(255, 248, 236, 0.62); } .u-foot__bar a:hover { color: var(--gold); } .u-foot__credit { display: inline-flex; align-items: center; gap: 0.38rem; } .u-foot__credit a { position: relative; display: inline-block; padding-bottom: 0.15rem; color: var(--gold); font-weight: 700; letter-spacing: 0.035em; transition: color 0.3s var(--ease); } .u-foot__credit a::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); } .u-foot__credit a:hover { color: var(--gold-light); } .u-foot__credit a:hover::after { transform: scaleX(1); transform-origin: left; } /* back to top */ .to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1040; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--char); color: var(--gold); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(14px); transition: all 0.4s var(--ease); } .to-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); } .to-top:hover { background: var(--gold); color: var(--char); } /* --------------------------------------------------------------------- 18. Scroll reveal --------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal][data-reveal-delay="1"] { transition-delay: 0.1s; } [data-reveal][data-reveal-delay="2"] { transition-delay: 0.2s; } [data-reveal][data-reveal-delay="3"] { transition-delay: 0.3s; } [data-reveal][data-reveal-delay="4"] { transition-delay: 0.4s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } .hero__bg { animation: none; } /* The panel still has to fully hide itself, so drop the staged reveal entirely rather than leaving a delayed visibility flip behind. */ .u-nav__panel { transition: none !important; } .u-nav__panel .nav-item, .u-nav__panel .u-nav__foot { opacity: 1; transform: none; transition: none !important; } } /* --------------------------------------------------------------------- 19. Small screens --------------------------------------------------------------------- */ @media (max-width: 767.98px) { :root { --nav-h: 72px; } body { font-size: 1rem; } .hero--home { min-height: 88vh; } .hero__actions { flex-direction: column; align-items: stretch; } .hero__actions .btn-u { width: 100%; } /* Menu: capsule fills the width beside the switch, no hover lift on touch. */ .menu-toolbar { top: calc(var(--nav-h) + 6px); gap: 0.4rem; } .menu-nav__scroll { width: 100%; justify-content: flex-start; padding: 0.4rem; gap: 0.35rem; } .view-toggle { padding: 0.4rem; gap: 0.2rem; } .view-toggle__btn { width: 34px; height: 34px; font-size: 0.85rem; } [data-view="grid"] .menu-row__body { padding: 1rem 1.1rem 1.15rem; } [data-view="grid"] .menu-row:hover { transform: none; } .menu-pill { padding: 0.55rem 0.95rem; font-size: 0.72rem; letter-spacing: 0.09em; } .menu-block { scroll-margin-top: calc(var(--nav-h) + 84px); } .menu-block__head { margin-bottom: 1.5rem; } .menu-row { padding: 0.85rem 0.6rem; gap: 0.9rem; } .menu-row:hover { transform: none; } .menu-row__thumb { flex-basis: 66px; width: 66px; height: 66px; } .menu-row__name { font-size: 1.06rem; } .menu-row__price { font-size: 1.06rem; } .media-badge { right: 12px; bottom: 12px; padding: 0.75rem 1rem; } .media-badge strong { font-size: 1.35rem; } .section--stone { background-attachment: scroll; } .u-foot { text-align: left; } .to-top { right: 0.9rem; bottom: 0.9rem; } }