/*! Comfort Food Edition — Open Late * © 2026 Maneesh Thakur. MIT licensed. * github.com/maneesh-kumar-thakur/devto-frontend-challenge-food-edition */ /* ============================================================ OPEN LATE — the 24-hour comfort diner No framework, no build step, no image files. Every plate on the page is drawn with gradients. Contents 1. tokens & themes 2. reset & base 3. utilities 4. header 5. hero + the neon sign 6. filters 7. dish cards 8. hours table 9. booking form 10. footer & dialog 11. motion preferences ============================================================ */ /* ── 1. tokens & themes ───────────────────────────────────── Night is the default because the diner is. `data-theme` on is the single switch; every colour below resolves through it, so nothing needs a second definition per block. */ :root { --bg: #0b0f17; --bg-2: #0e131d; --surface: #151c29; --surface-2: #1b2433; --line: #26314492; --line-solid:#263144; --text: #e9eef7; --text-dim: #9daac0; --accent: #ffb454; /* warm bulb amber */ --accent-ink:#2a1a05; /* text that sits ON accent */ --neon: #ff4f7b; /* the sign */ --neon-2: #4fd4ff; --focus: #ffd88a; --radius: 0.85rem; --radius-lg: 1.4rem; --shadow: 0 1.2rem 2.6rem -0.9rem rgb(0 0 0 / 0.7); --wrap: 72rem; --step: clamp(1rem, 0.7rem + 1.2vw, 1.6rem); color-scheme: dark; } [data-theme="day"] { --bg: #fbf3e7; --bg-2: #f5ead9; --surface: #fffaf2; --surface-2: #f4e7d4; --line: #d9c7ad; --line-solid:#d0bb9d; --text: #2a2015; --text-dim: #6a5942; /* #b45f00 was only 4.17:1 on --bg. Accent is not decoration here — it colours every link, the hero eyebrow at 0.8rem and the dish meta at 0.72rem — so it needs AA for NORMAL text (4.5), not the 3:1 that large text and UI borders get away with. This is the lightest amber that clears 4.5 against --bg, --surface, and for --accent-ink sitting on top of it. */ --accent: #a55f00; /* 4.50:1 on --bg, 4.77:1 on --surface */ --accent-ink:#fff6e8; /* 4.63:1 on --accent */ --neon: #c0264b; --neon-2: #0b6c8c; --focus: #7a4200; --shadow: 0 1rem 2.2rem -0.9rem rgb(90 62 24 / 0.32); color-scheme: light; } /* ── 2. reset & base ────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* The one justified !important on the page. `hidden` is a UA-stylesheet `display: none`, so ANY author rule that sets display beats it — `.btn { display: inline-flex }` and `.filters { display: grid }` were both silently un-hiding elements. That second one mattered: the filter panel ships `hidden` and is revealed by JS, so with scripting off the panel was appearing with dead controls inside it. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.075rem)/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0 0 0.5em; } h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.3rem); letter-spacing: -0.015em; } h3 { font-size: 1.15rem; letter-spacing: -0.005em; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 2px; } img, svg { max-width: 100%; } /* One focus style, everywhere, high contrast in both themes. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 0.35rem; } /* ── 3. utilities ───────────────────────────────────────── */ .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 0.75rem; top: -4rem; z-index: 100; padding: 0.7rem 1.1rem; background: var(--accent); color: var(--accent-ink); font-weight: 650; border-radius: 0 0 var(--radius) var(--radius); text-decoration: none; transition: top 0.16s ease; } .skip-link:focus { top: 0; } .section-head { max-width: 44rem; margin-bottom: 2.2rem; } .section-head__lede { color: var(--text-dim); font-size: 1.05em; margin: 0; } /* Section headings get a short warm rule above them. It gives the page a repeating beat, which a single flat dark column badly needed. */ .section-head h2 { position: relative; padding-top: 1.1rem; } .section-head h2::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 3.2rem; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), transparent); } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.9rem; /* ≥44px touch target */ padding: 0.65rem 1.3rem; border: 1px solid transparent; border-radius: 999px; font: inherit; font-weight: 620; text-decoration: none; cursor: pointer; transition: transform 0.14s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { background: color-mix(in oklab, var(--accent) 86%, #fff); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--line-solid); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn--quiet { background: transparent; color: var(--text-dim); border-color: var(--line-solid); min-height: 2.5rem; padding: 0.45rem 1rem; font-size: 0.92rem; align-self: end; } .btn--quiet:hover { color: var(--text); border-color: var(--accent); } .link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; } /* ── 4. header ──────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--bg); /* fallback before color-mix */ background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } @supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--bg); } } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.4rem; padding-block: 0.7rem; } .brand { text-decoration: none; color: inherit; line-height: 1.1; margin-right: auto; } .brand__neon { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--neon); text-shadow: 0 0 1.4rem color-mix(in oklab, var(--neon) 55%, transparent); } .brand__sub { display: block; font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; } .site-nav__list { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; list-style: none; margin: 0; padding: 0; } .site-nav a { color: var(--text-dim); text-decoration: none; font-size: 0.95rem; padding-block: 0.4rem; } .site-nav a:hover { color: var(--text); text-decoration: underline; } .site-header__tools { display: flex; align-items: center; gap: 0.7rem; } .open-pill { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.35rem 0.8rem; border: 1px solid var(--line-solid); border-radius: 999px; font-size: 0.82rem; color: var(--text-dim); white-space: nowrap; } .open-pill__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0.5rem #3ddc84; } [data-theme="day"] .open-pill__dot { background: #0d8a45; box-shadow: none; } .theme-toggle { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.4rem; padding: 0.4rem 0.9rem; border: 1px solid var(--line-solid); border-radius: 999px; background: transparent; color: var(--text-dim); font: inherit; font-size: 0.82rem; cursor: pointer; } .theme-toggle:hover { color: var(--text); border-color: var(--accent); } .theme-toggle__icon { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--accent); box-shadow: inset -0.28rem -0.1rem 0 0 var(--bg); } [data-theme="day"] .theme-toggle__icon { box-shadow: 0 0 0.4rem var(--accent); } /* ── 5. hero + neon sign ────────────────────────────────── */ .hero { padding-block: clamp(2.6rem, 1.5rem + 5vw, 5.5rem); /* the sign's glow is deliberately larger than the sign; clip it here so it can never widen the document on narrow screens */ overflow: hidden; background: radial-gradient(70% 55% at 78% 12%, color-mix(in oklab, var(--neon) 13%, transparent), transparent 68%), radial-gradient(60% 50% at 12% 8%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 62%), linear-gradient(180deg, var(--bg-2), var(--bg)); } .hero__inner { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 60rem) { .hero__inner { grid-template-columns: 1.15fr 0.85fr; } } .hero__eyebrow { margin: 0 0 1rem; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .hero__lede { color: var(--text-dim); font-size: 1.1em; max-width: 34rem; } .hero__now { margin: 1.6rem 0; padding: 0.9rem 1.15rem; border: 1px solid var(--line-solid); border-left: 4px solid var(--accent); border-radius: 0.4rem var(--radius) var(--radius) 0.4rem; background: var(--surface); } .hero__now strong { color: var(--accent); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* ── the kulhad ────────────────────────────────────────────── Terracotta cup of chai, drawn in CSS. Its own container query, so it scales off its own width rather than the viewport's and drops into any column without a breakpoint. */ .brew { container-type: inline-size; position: relative; width: min(100%, 30rem); aspect-ratio: 1 / 0.92; margin-inline: auto; } /* warm bloom on the wall behind it */ .brew__glow { position: absolute; left: 50%; top: 46%; width: 96%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 26%, transparent), transparent 64%); filter: blur(2rem); } .brew__cup { position: absolute; left: 21cqw; top: 34cqw; width: 58cqw; height: 46cqw; } /* Same hand-thrown silhouette as the standalone art piece: wide mouth, base a bit over half the rim, nothing perfectly straight. */ .brew__body { position: absolute; inset: 0; clip-path: polygon( 1% 0%, 99% 0%, 97.5% 13%, 95.5% 26%, 93% 40%, 90% 54%, 87% 67%, 84% 79%, 81% 90%, 78% 100%, 22% 100%, 19% 90%, 16% 79%, 13% 67%, 10% 54%, 7% 40%, 4.5% 26%, 2.5% 13% ); background: repeating-linear-gradient(0deg, rgba(94, 46, 26, 0.16) 0 0.5cqw, transparent 0.5cqw 2.6cqw), linear-gradient(100deg, rgba(255, 220, 186, 0.5) 0 5%, transparent 28%), linear-gradient(260deg, rgba(48, 20, 8, 0.55) 0 7%, transparent 38%), radial-gradient(52% 38% at 32% 24%, rgba(255, 228, 198, 0.38), transparent 68%), linear-gradient(180deg, #d09468 0%, #b9714a 44%, #8c4a2c 86%, #5e2e1a 100%); box-shadow: 0 1.4cqw 2.6cqw rgba(0, 0, 0, 0.5); } .brew__rim { position: absolute; top: -5.4cqw; left: -2.6cqw; width: calc(100% + 5.2cqw); height: 13cqw; border-radius: 50%; background: linear-gradient(180deg, #e3ab7e 0%, #b9714a 52%, #8c4a2c 100%); box-shadow: inset 0 -0.9cqw 1.5cqw rgba(70, 30, 14, 0.5); } .brew__chai { position: absolute; inset: 1.8cqw 2.6cqw; border-radius: 50%; background: radial-gradient(64% 84% at 32% 22%, rgba(255, 238, 210, 0.5), transparent 58%), radial-gradient(120% 130% at 74% 92%, #6b3f16, transparent 62%), linear-gradient(180deg, #d8a970 0%, #b98147 58%, #8e5b28 100%); box-shadow: inset 0 1cqw 2cqw rgba(60, 26, 8, 0.55); } .brew__saucer { position: absolute; left: 24cqw; top: 77cqw; width: 52cqw; height: 9cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 8, 2, 0.6), transparent 74%); filter: blur(1.4cqw); } [data-theme="day"] .brew__saucer { background: radial-gradient(closest-side, rgba(120, 78, 34, 0.34), transparent 74%); } /* Sits deeper than the rim on purpose. Each wisp fades in over its first quarter, so anchoring it at the surface leaves a visible gap between cup and steam — it has to start inside the cup, where the cup itself hides the transparent lead-in. */ .brew__steam { position: absolute; left: 50cqw; top: 44cqw; width: 0; height: 0; mix-blend-mode: screen; } .brew__steam i { position: absolute; bottom: 0; left: var(--x); width: var(--w); height: 42cqw; border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%; background: linear-gradient(to top, rgba(255, 246, 236, 0) 0%, rgba(255, 246, 236, 0.8) 26%, rgba(255, 240, 226, 0.3) 62%, transparent 100%); filter: blur(1.7cqw); opacity: 0; animation: brew-rise var(--d) var(--delay) infinite ease-in-out; } .brew__steam i:nth-child(1) { --x: -9cqw; --w: 7cqw; --d: 7.4s; --delay: -0.4s; --drift: 6cqw; } .brew__steam i:nth-child(2) { --x: -2cqw; --w: 5.2cqw; --d: 8.8s; --delay: -3.2s; --drift: -5cqw; } .brew__steam i:nth-child(3) { --x: 4cqw; --w: 7.4cqw; --d: 6.6s; --delay: -5.1s; --drift: 8cqw; } .brew__steam i:nth-child(4) { --x: 9cqw; --w: 4.6cqw; --d: 9.4s; --delay: -1.9s; --drift: -7cqw; } /* Screen-blending white steam onto a cream page produces cream, so in daylight the steam has to darken the background instead of lightening it. Same shape, inverted physics. */ [data-theme="day"] .brew__steam { mix-blend-mode: multiply; } [data-theme="day"] .brew__steam i { background: linear-gradient(to top, rgba(146, 112, 74, 0) 0%, rgba(146, 112, 74, 0.36) 26%, rgba(146, 112, 74, 0.15) 62%, transparent 100%); } @keyframes brew-rise { 0% { opacity: 0; transform: translate(-50%, 4cqw) scale(0.5, 0.4) rotate(-3deg); } 20% { opacity: 0.8; } 62% { opacity: 0.34; } 100% { opacity: 0; transform: translate(calc(-50% + var(--drift)), -30cqw) scale(1.6, 1.35) rotate(9deg); } } /* ── 6. filters ─────────────────────────────────────────── */ .menu { padding-block: clamp(3rem, 2rem + 4vw, 5rem); } .filters { display: grid; gap: 1.4rem; grid-template-columns: 1fr; padding: 1.4rem; margin-bottom: 1.5rem; border: 1px solid var(--line-solid); border-radius: var(--radius-lg); background: var(--surface); } @media (min-width: 52rem) { .filters { grid-template-columns: minmax(0, 1fr) minmax(13rem, 19rem) auto; align-items: start; } .filters__group--service { grid-column: 1 / -1; } } .filters__group { border: 0; margin: 0; padding: 0; min-width: 0; } .filters__legend { display: block; padding: 0; margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); } .filters__hint { margin: 0 0 0.6rem; font-size: 0.86rem; color: var(--text-dim); } .filters__group--search .filters__hint { margin: 0.45rem 0 0; } .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip { position: relative; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.45rem 1rem; border: 1px solid var(--line-solid); border-radius: 999px; background: var(--surface-2); color: var(--text-dim); font: inherit; font-size: 0.9rem; cursor: pointer; transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease; } .chip:hover { color: var(--text); border-color: var(--accent); } /* The control stays a real radio or checkbox — invisible, but focusable, arrow-key navigable and group-aware, none of which a div can be talked into. */ .chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; } .chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 620; } .chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } /* Forced-colours mode throws our palette away, so selection has to be carried by something other than a background colour. */ @media (forced-colors: active) { .chip:has(input:checked) { outline: 3px solid CanvasText; outline-offset: -3px; } } .field { width: 100%; min-height: 2.75rem; padding: 0.6rem 0.85rem; border: 1px solid var(--line-solid); border-radius: var(--radius); background: var(--bg-2); color: var(--text); font: inherit; } .field::placeholder { color: var(--text-dim); opacity: 0.75; } .field:hover { border-color: var(--accent); } .results { display: block; /* is inline by default */ margin: 0 0 1.4rem; font-size: 0.92rem; color: var(--text-dim); } .no-results { padding: 2.5rem 1.5rem; text-align: center; border: 1px dashed var(--line-solid); border-radius: var(--radius-lg); color: var(--text-dim); } .no-results__msg { color: var(--text); font-size: 1.05em; } .no-results__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.4rem; margin: 0; } /* ── 7. dish cards ──────────────────────────────────────── */ /* 20rem gives THREE columns in a 72rem wrap. Each kitchen serves six dishes, so a filtered menu is exactly two full rows — no orphan card sitting alone with half the row empty. The column count and the dishes-per-kitchen have to be chosen together. */ .dishes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); list-style: none; margin: 0; padding: 0; } .dish > article { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line-solid); border-radius: var(--radius-lg); background: var(--surface); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } /* A warm hairline along the top edge, brightening on hover. Cheap way to make a flat card feel lit from somewhere. */ .dish > article::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.25; transition: opacity 0.18s ease; } .dish > article:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow); } .dish > article:hover::after { opacity: 0.9; } /* keyboard parity: the same lift when anything inside takes focus */ .dish > article:focus-within { border-color: var(--accent); box-shadow: var(--shadow); } /* Every plate on this page is two radial gradients and a shadow. --food-a / --food-b are set per dish in the markup. */ .dish__art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(165deg, var(--surface-2), var(--bg-2)); overflow: hidden; } /* ── the plates ─────────────────────────────────────────────── Sixteen dishes served in five different VESSELS, not sixteen shades of one bowl. `data-form` on the
  • picks which. Colour alone tells you nothing; a shape tells you it's soup, or a stack of pancakes, or something baked in a tray. Default: a bowl, seen from just above — an ellipse rather than a circle for the rim, contents inset within it, a wet sheen off the top-left, and specks of garnish. */ .dish__art::before { content: ""; width: 52%; aspect-ratio: 1 / 0.88; border-radius: 50%; background: /* Garnish, kept asymmetric and all below the centre line — two symmetric specks above a third reads as a face, which is not the mood we are going for. */ radial-gradient(circle at 39% 60%, rgb(255 255 255 / 0.42) 0 2.1%, transparent 2.7%), radial-gradient(circle at 48% 68%, rgb(0 0 0 / 0.18) 0 1.8%, transparent 2.4%), radial-gradient(circle at 58% 62%, rgb(255 255 255 / 0.3) 0 1.5%, transparent 2%), radial-gradient(circle at 53% 55%, rgb(255 255 255 / 0.22) 0 1.2%, transparent 1.7%), /* sheen */ radial-gradient(ellipse 40% 22% at 35% 28%, rgb(255 255 255 / 0.42), transparent 72%), /* contents, then the rim they sit in */ radial-gradient(circle at 50% 50%, var(--food-a) 0 41%, transparent 42%), radial-gradient(circle at 50% 50%, var(--food-b) 0 100%); box-shadow: 0 0.8rem 1.6rem rgb(0 0 0 / 0.42), inset 0 0 0 0.3rem rgb(255 255 255 / 0.12), inset 0 -0.45rem 0.9rem rgb(0 0 0 / 0.3); } /* --- plate: circular, seen from above --- This was a wide flat ellipse, which meant the food covered the middle and the white survived only as two crescents at the sides — it read as a plate with its ends sliced off. A circle viewed from directly overhead keeps an unbroken rim all the way round, and it matches the bowl, which is also near-circular. */ .dish[data-form="plate"] .dish__art::before { width: 54%; aspect-ratio: 1; border-radius: 50%; background: /* sheen across the rim */ radial-gradient(circle at 34% 26%, rgb(255 255 255 / 0.55), transparent 44%), /* the food, sitting in the well */ radial-gradient(circle at 50% 50%, var(--food-a) 0 36%, transparent 37%), radial-gradient(circle at 50% 50%, var(--food-b) 0 50%, transparent 51%), /* the plate: a shallow well, then the rim */ radial-gradient(circle at 50% 50%, #e7edf4 0 58%, #f7fafd 61%, #c9d3de 100%); box-shadow: 0 0.8rem 1.6rem rgb(0 0 0 / 0.42), inset 0 -0.22rem 0.6rem rgb(0 0 0 / 0.14); } /* A "stack" vessel used to live here. It was a mistake: a stack is a shape food takes, not a thing you serve it in — and once the glyph supplies the food, a stack vessel under a stack glyph reads doubled. Those dishes are plates now, and the glyph does the stacking. */ /* --- tray: something baked, with a browned top and a dish rim --- */ .dish[data-form="tray"] .dish__art::before { width: 60%; aspect-ratio: 1 / 0.54; border-radius: 14% / 26%; background: radial-gradient(ellipse 30% 40% at 34% 28%, rgb(255 255 255 / 0.22), transparent 72%), /* forked, browned surface */ repeating-linear-gradient(96deg, rgb(0 0 0 / 0.09) 0 0.22rem, transparent 0.22rem 0.6rem), linear-gradient(180deg, var(--food-a) 0%, var(--food-b) 82%, rgb(0 0 0 / 0.25) 100%); box-shadow: inset 0 0 0 0.3rem rgb(238 242 247 / 0.85), 0 0.7rem 1.4rem rgb(0 0 0 / 0.45); } /* --- mug: soup you can hold, with a handle --- */ .dish[data-form="mug"] .dish__art::before { width: 38%; aspect-ratio: 1 / 1.02; border-radius: 10% 10% 42% 42% / 8% 8% 34% 34%; background: radial-gradient(ellipse 40% 9% at 50% 9%, var(--food-a) 0 86%, transparent 88%), linear-gradient(100deg, rgb(255 255 255 / 0.4) 0 16%, transparent 40%), linear-gradient(180deg, #eef2f7 0%, #cbd4e0 62%, #a6b1c0 100%); box-shadow: 0 0.7rem 1.4rem rgb(0 0 0 / 0.45); } /* The handle replaces the table shading for mugs — higher specificity than the generic ::after below, so order doesn't matter here. */ .dish[data-form="mug"] .dish__art::after { content: ""; position: absolute; inset: 46% auto auto 66%; width: 11%; height: auto; aspect-ratio: 1 / 1.25; border: 0.34rem solid #cdd6e1; border-left: 0; border-radius: 0 60% 60% 0 / 0 50% 50% 0; background: none; } .dish__art::after { /* the table it sits on */ content: ""; position: absolute; inset: auto 0 0 0; height: 32%; background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.28)); } /* The sprite itself never renders. */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* The glyph sits ON the vessel and identifies the dish. The vessel supplies colour and depth; the glyph supplies "this is noodles". Stroke-only on currentColor, so one sprite serves both themes. */ /* Centred explicitly. Left to its static position, an absolutely positioned child of this grid landed low and off the vessel. */ .dish__icon { position: absolute; left: 50%; top: 47%; z-index: 2; width: 30%; height: 30%; transform: translate(-50%, -50%); /* One ink colour. currentColor feeds `stroke` here and the solid fills inside the symbols, so a glyph can mix outline and solid. Note: only INHERITED properties reach content — a rule like `.dish__icon .solid` cannot select into that shadow tree at all, so anything per-shape lives on the symbol as an attribute. */ color: rgb(26 13 2 / 0.62); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0.08rem 0 rgb(255 255 255 / 0.3)); transition: transform 0.22s ease; } [data-theme="day"] .dish__icon { color: rgb(40 22 6 / 0.68); } .dish > article:hover .dish__icon { transform: translate(-50%, -50%) scale(1.07); } .dish__steam { position: absolute; top: 8%; width: 12%; height: 34%; border-radius: 50%; background: linear-gradient(to top, rgb(255 255 255 / 0.5), transparent); filter: blur(7px); opacity: 0; animation: steam 5.5s infinite ease-in-out; } .dish:nth-child(3n) .dish__steam { animation-delay: -1.8s; } .dish:nth-child(3n+1) .dish__steam { animation-delay: -3.6s; } @keyframes steam { 0% { opacity: 0; transform: translateY(30%) scaleX(0.7); } 25% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-45%) scaleX(1.5); } } .dish__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.2rem 1.2rem; } .dish__service { margin: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .dish__name { margin: 0 0 0.45rem; } .dish__desc { color: var(--text-dim); font-size: 0.95rem; margin: 0 0 0.9rem; } .dish__meta { display: flex; align-items: baseline; gap: 0.7rem; margin: 0 0 0.7rem; font-size: 0.92rem; color: var(--text-dim); } .dish__price { font-size: 1.15rem; font-weight: 700; color: var(--text); } .dish__time::before { content: "· "; } .tags { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0 0 1rem; padding: 0; } .tags:empty { display: none; } .tag { padding: 0.15rem 0.6rem; border: 1px solid var(--line-solid); border-radius: 999px; font-size: 0.74rem; color: var(--text-dim); } /*
    rather than a JS modal: it works with scripting off, it's keyboard operable for free, and screen readers already know how to announce it. */ .dish__more { margin-top: auto; border-top: 1px solid var(--line); padding-top: 0.8rem; } .dish__more summary { cursor: pointer; font-size: 0.9rem; font-weight: 620; color: var(--accent); min-height: 1.9rem; display: flex; align-items: center; } .dish__more summary::marker { color: var(--accent); } .dish__more-body { padding-top: 0.6rem; font-size: 0.88rem; color: var(--text-dim); } .dish__more-body p { margin-bottom: 0.6rem; } .dish__more-body strong { color: var(--text); } /* ── 8. hours table ─────────────────────────────────────── */ .hours { padding-block: clamp(3rem, 2rem + 4vw, 5rem); background: var(--bg-2); } .table-scroll { overflow-x: auto; border-radius: var(--radius-lg); } .hours-table { width: 100%; min-width: 34rem; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line-solid); border-radius: var(--radius-lg); overflow: hidden; } .hours-table th, .hours-table td { padding: 0.9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); } .hours-table thead th { font-size: 0.76rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-dim); background: var(--surface-2); } .hours-table tbody th { font-weight: 650; } .hours-table td:last-child { color: var(--text-dim); } .hours-table tbody tr:last-child th, .hours-table tbody tr:last-child td { border-bottom: 0; } /* the kitchen that's actually cooking */ .hours-table tr[aria-current="true"] { background: color-mix(in oklab, var(--accent) 14%, transparent); } .hours-table tr[aria-current="true"] th[scope="row"] { box-shadow: inset 4px 0 0 var(--accent); color: var(--accent); } .hours-table tr[aria-current="true"] th[scope="row"]::after { content: " — on now"; font-weight: 500; font-size: 0.82rem; color: var(--text-dim); } /* ── 9. booking form ────────────────────────────────────── */ .book { padding-block: clamp(3rem, 2rem + 4vw, 5rem); } .book__inner { max-width: 46rem; } .form { display: grid; gap: 1.1rem; grid-template-columns: 1fr; padding: clamp(1.2rem, 0.8rem + 1.6vw, 2rem); border: 1px solid var(--line-solid); border-radius: var(--radius-lg); background: var(--surface); } @media (min-width: 40rem) { .form { grid-template-columns: 1fr 1fr; } .form__row--wide, .form__actions, .form__error-summary { grid-column: 1 / -1; } } .form__row { display: grid; gap: 0.35rem; align-content: start; } .form__label { font-weight: 620; font-size: 0.95rem; } .req { color: var(--neon); } .form__hint { margin: 0; font-size: 0.84rem; color: var(--text-dim); } .form__msg { margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--neon); } [data-theme="night"] .form__msg { color: #ff8fa6; } .field[aria-invalid="true"] { border-color: var(--neon); box-shadow: 0 0 0 3px color-mix(in oklab, var(--neon) 22%, transparent); } .form__error-summary { margin: 0; padding: 0.85rem 1.1rem; border: 1px solid var(--neon); border-radius: var(--radius); background: color-mix(in oklab, var(--neon) 12%, transparent); font-weight: 600; } .form__actions { display: flex; justify-content: flex-start; } /* ── 10. footer & dialog ────────────────────────────────── */ .site-footer { padding-block: 2.5rem 3rem; border-top: 1px solid var(--line); background: var(--bg-2); color: var(--text-dim); font-size: 0.92rem; } .site-footer__brand { font-weight: 800; font-size: 1.1rem; color: var(--neon); margin-bottom: 0.4rem; } .site-footer__inner { max-width: 46rem; } .confirm { width: min(100% - 2rem, 26rem); padding: 1.6rem; border: 1px solid var(--line-solid); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .confirm::backdrop { background: rgb(3 5 10 / 0.68); backdrop-filter: blur(3px); } .confirm h2 { font-size: 1.4rem; } .confirm form { margin-top: 1.2rem; } /* ── 11. motion preferences ─────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .dish__steam { opacity: 0.5; } /* leave the steam visible, just still */ .brew__steam i { animation: none; opacity: 0.45; transform: translate(-50%, -10cqw) scale(1.25, 1.15); } }