Pages Hard

Cookbook — Restaurant Chef / Fine Dining landing

A dramatic charcoal-and-gold fine-dining landing for a fictional chef, built with couture serif type and CSS-gradient food photography. It pairs a parallax-tinged hero and Michelin-style overline with a signature-dishes showcase, a chef philosophy strip, a nine-course tasting teaser, press quotes, and a reservation form. Scroll-reveal, a focus-trapped dish lightbox, and validated reserve flow make it feel like a real premium restaurant site.

Open in Lab

html css vanilla-js

Targets: JS HTML

Code

/* ============================================================
   Atelier Verel — fine-dining chef landing
   Themed palette: charcoal + gold + ivory, couture serif
   ============================================================ */

:root {
  /* themed luxe palette */
  --char-900: #14110f;
  --char-800: #1b1815;
  --char-700: #221e1a;
  --char-600: #2b2622;
  --ivory: #f4efe6;
  --ivory-2: #e9e1d3;
  --paper: #fbf7ef;
  --ink: #2b2622;
  --ink-2: #5c534a;
  --muted: #8a7f73;

  /* gold accents */
  --gold: #c9a44c;
  --gold-2: #e3c878;
  --gold-d: #a8852f;

  /* warm support */
  --tomato: #d6452b;
  --clay: #c8775a;

  --line: rgba(201, 164, 76, 0.22);
  --line-2: rgba(201, 164, 76, 0.4);
  --line-ivory: rgba(43, 38, 34, 0.12);

  --ok: #3f8f5f;
  --danger: #c8412b;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 24px 60px rgba(0, 0, 0, 0.45);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;

  --maxw: 1160px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--char-900);
  color: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: var(--char-900);
  padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 200;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- buttons ---------- */
.btn {
  --b: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9em 1.6em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease,
    color 0.2s ease, border-color 0.2s ease;
}
.btn:active {
  transform: translateY(1px);
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-2), var(--gold) 60%, var(--gold-d));
  color: var(--char-900);
  box-shadow: 0 8px 24px rgba(201, 164, 76, 0.28);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(201, 164, 76, 0.42);
}

.btn-ghost {
  background: transparent;
  color: var(--ivory);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-2);
}

.btn-block {
  width: 100%;
}

/* ---------- header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  background: rgba(20, 17, 15, 0.72);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-right: auto;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--gold-2);
  letter-spacing: 0.04em;
}
.brand-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ivory);
  letter-spacing: 0.02em;
}
.nav-links {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  color: var(--ivory-2);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover {
  color: var(--gold-2);
  border-color: var(--gold);
}
.nav-cta {
  padding: 0.6em 1.2em;
}

@media (max-width: 820px) {
  .nav-links {
    display: none;
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 7rem 1.5rem 5rem;
  background: radial-gradient(120% 90% at 50% -10%, var(--char-700), var(--char-900) 70%);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  will-change: transform;
}
.blob-a {
  width: 46vw;
  height: 46vw;
  top: -8vw;
  right: -6vw;
  background: radial-gradient(circle at 35% 35%, #7a2f1b, transparent 65%);
}
.blob-b {
  width: 40vw;
  height: 40vw;
  bottom: -12vw;
  left: -8vw;
  background: radial-gradient(circle at 60% 40%, var(--gold-d), transparent 62%);
  opacity: 0.4;
}
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: radial-gradient(rgba(255, 255, 255, 0.6) 0.5px, transparent 0.5px);
  background-size: 4px 4px;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.overline {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 1.5rem;
}
.stars {
  letter-spacing: 0.15em;
  color: var(--gold);
}
.hero-title {
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 500;
}
.hero-title em {
  font-style: italic;
  color: var(--gold-2);
}
.hero-sub {
  margin: 1.6rem auto 0;
  max-width: 540px;
  color: var(--ivory-2);
  font-size: 1.08rem;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.3rem;
}
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin: 3.4rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.hero-stats div {
  text-align: center;
}
.hero-stats dt {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-stats dd {
  margin: 0.3rem 0 0;
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--gold-2);
}
.scroll-hint {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 1;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}

/* ---------- generic section ---------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 6rem 1.5rem;
}
.section-head {
  max-width: 640px;
  margin: 0 auto 3.2rem;
  text-align: center;
}
.kicker {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.section-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 500;
}
.section-lede {
  margin-top: 1rem;
  color: var(--ivory-2);
  font-size: 1.05rem;
}

/* ---------- signatures / dishes ---------- */
.dish-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.dish {
  background: var(--char-800);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.dish:hover {
  transform: translateY(-6px);
  border-color: var(--line-2);
  box-shadow: var(--sh-2);
}
.dish-photo {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.dish-photo .ph {
  font-size: 3.4rem;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
  transition: transform 0.4s ease;
  z-index: 1;
}
.dish-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 80% at 30% 20%, rgba(255, 255, 255, 0.14), transparent 60%);
  mix-blend-mode: screen;
}
.dish:hover .dish-photo .ph {
  transform: scale(1.08) rotate(-2deg);
}
/* gradient "photo" backgrounds — appetizing, intentional */
.ph-beet { background: none; }
.dish-photo.ph-beet, .ph-beet {}
.dish [data-photo] {}
.dish-photo {
  background: linear-gradient(150deg, #3a2118, #6a2f1b 55%, var(--gold-d));
}
.dish [data-photo="beet"] .dish-photo,
.dish:nth-child(1) .dish-photo {
  background: linear-gradient(150deg, #2a1422, #6a1f3a 55%, var(--clay));
}
.dish:nth-child(2) .dish-photo {
  background: linear-gradient(150deg, #3a2118, #7a2f1b 55%, var(--gold));
}
.dish:nth-child(3) .dish-photo {
  background: linear-gradient(150deg, #3a1813, #8a2f1b 55%, var(--tomato));
}
.dish:nth-child(4) .dish-photo {
  background: linear-gradient(150deg, #221813, #5c3a1f 55%, var(--gold-d));
}
.dish:nth-child(5) .dish-photo {
  background: linear-gradient(150deg, #2a2410, #7a5a1f 55%, var(--gold-2));
}
.dish:nth-child(6) .dish-photo {
  background: linear-gradient(150deg, #2a2012, #8a6a1f 55%, var(--gold));
}
.dish-body {
  padding: 1.4rem 1.5rem 1.7rem;
  position: relative;
}
.dish-no {
  position: absolute;
  top: -1.7rem;
  right: 1.2rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--char-900);
  background: var(--gold-2);
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: var(--sh-1);
}
.dish-body h3 {
  font-size: 1.35rem;
  margin-bottom: 0.4rem;
}
.dish-body p {
  margin: 0;
  color: var(--ivory-2);
  font-size: 0.92rem;
}

@media (max-width: 900px) {
  .dish-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .dish-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- chef / philosophy ---------- */
.chef {
  background: linear-gradient(180deg, var(--char-900), var(--char-800));
  max-width: none;
}
.chef-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4rem;
  align-items: center;
}
.chef-portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(201, 164, 76, 0.2), transparent 60%),
    linear-gradient(160deg, #2a211a, #14110f 70%);
  display: grid;
  place-items: center;
  will-change: transform;
}
.portrait-blob {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #6a4a2a, #2a1c12 70%);
  filter: blur(4px);
  opacity: 0.85;
}
.chef-portrait::after {
  content: "👩‍🍳";
  position: absolute;
  font-size: 6rem;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.5));
}
.portrait-tag {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-2);
  background: rgba(20, 17, 15, 0.7);
  padding: 0.4em 0.9em;
  border-radius: 999px;
  border: 1px solid var(--line);
  z-index: 2;
}
.chef-text .section-title {
  text-align: left;
  margin-bottom: 1.4rem;
}
.dropcap {
  float: left;
  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 0.8;
  padding: 0.1em 0.12em 0 0;
  color: var(--gold);
}
.chef-text p {
  color: var(--ivory-2);
}
.chef-credo {
  list-style: none;
  margin: 1.6rem 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.chef-credo li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  color: var(--ivory);
}
.signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--gold-2);
  margin: 0;
}

@media (max-width: 820px) {
  .chef-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .chef-portrait {
    max-width: 380px;
  }
}

/* ---------- tasting menu ---------- */
.menu-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--char-800);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 2.6rem 2.4rem;
  box-shadow: var(--sh-2);
  position: relative;
}
.menu-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--line);
  border-radius: calc(var(--r-lg) - 8px);
  pointer-events: none;
}
.menu-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  counter-reset: course;
}
.menu-list li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--line);
  counter-increment: course;
}
.menu-list li::before {
  content: counter(course, upper-roman);
  font-family: var(--serif);
  font-size: 0.82rem;
  color: var(--gold);
  min-width: 2.2rem;
  letter-spacing: 0.05em;
}
.course-name {
  font-size: 1.02rem;
  color: var(--ivory);
}
.course-dot {
  flex: 1;
  border-bottom: 1px dotted var(--line-2);
  transform: translateY(-4px);
}
.course-note {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.menu-foot {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.price {
  display: flex;
  flex-direction: column;
}
.price-amt {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--gold-2);
}
.price-lbl {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-alt .price-amt {
  color: var(--ivory);
}
.menu-foot .btn {
  margin-left: auto;
}

@media (max-width: 560px) {
  .menu-foot .btn {
    margin-left: 0;
    width: 100%;
  }
}

/* ---------- press ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.quote {
  margin: 0;
  padding: 2rem 1.8rem;
  background: var(--char-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  position: relative;
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: -0.4rem;
  left: 1rem;
  font-family: var(--serif);
  font-size: 4rem;
  color: var(--gold);
  opacity: 0.5;
}
.quote blockquote {
  margin: 0.8rem 0 1.4rem;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ivory);
}
.quote figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cite-name {
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivory-2);
}
.cite-stars {
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

@media (max-width: 820px) {
  .quote-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- reserve ---------- */
.reserve {
  background: linear-gradient(180deg, var(--char-800), var(--char-900));
  max-width: none;
}
.reserve-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.reserve-intro .section-title {
  text-align: left;
}
.reserve-facts {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.reserve-facts li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ivory-2);
}
.reserve-form {
  background: var(--char-700);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2.2rem 2rem;
}
.field {
  margin-bottom: 1.2rem;
}
.field label,
.check span {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.field input,
.field select {
  width: 100%;
  background: var(--char-900);
  border: 1px solid var(--line);
  color: var(--ivory);
  border-radius: var(--r-sm);
  padding: 0.8em 0.9em;
  font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 164, 76, 0.18);
}
.field input.invalid,
.field select.invalid {
  border-color: var(--danger);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.check {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.4rem 0 1.4rem;
  cursor: pointer;
}
.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}
.check span {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  color: var(--ivory-2);
}
.form-note {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.form-note.ok {
  color: var(--gold-2);
}

@media (max-width: 820px) {
  .reserve-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--char-900);
  border-top: 1px solid var(--line);
  padding: 4rem 1.5rem 2.5rem;
}
.foot-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 2.5rem;
  align-items: start;
}
.foot-brand {
  display: grid;
  gap: 0.6rem;
}
.foot-brand .brand-name {
  margin-top: 0.4rem;
}
.foot-brand p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 220px;
}
.foot-col h3 {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.8rem;
}
.foot-col p {
  margin: 0 0 0.6rem;
  color: var(--ivory-2);
  font-size: 0.92rem;
}
.foot-fine {
  max-width: var(--maxw);
  margin: 3rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 820px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .foot-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.lightbox[hidden] {
  display: none;
}
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 7, 0.82);
  backdrop-filter: blur(6px);
  animation: fade 0.25s ease;
}
.lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  background: var(--char-800);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  display: grid;
  grid-template-columns: 1fr 1fr;
  animation: rise 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lightbox-close {
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(20, 17, 15, 0.6);
  color: var(--ivory);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.lightbox-close:hover {
  background: var(--gold);
  color: var(--char-900);
}
.lightbox-photo {
  display: grid;
  place-items: center;
  min-height: 280px;
  background: linear-gradient(150deg, #3a2118, #7a2f1b 55%, var(--gold-d));
}
.lb-emoji {
  font-size: 5rem;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.5));
}
.lightbox-info {
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lb-title {
  font-size: 1.7rem;
  margin: 0.4rem 0 0.9rem;
}
.lb-desc {
  color: var(--ivory-2);
  font-size: 0.98rem;
  margin-bottom: 1.6rem;
}

@media (max-width: 600px) {
  .lightbox-panel {
    grid-template-columns: 1fr;
  }
  .lightbox-photo {
    min-height: 180px;
  }
}

@keyframes fade {
  from { opacity: 0; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%) translateY(20px);
  z-index: 400;
  background: var(--gold-2);
  color: var(--char-900);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.9em 1.4em;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-2);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}
.toast[hidden] {
  display: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-reveal].in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Atelier Verel — fine-dining landing interactions
   Vanilla JS, no dependencies.
   - scroll-reveal (IntersectionObserver + fallback)
   - hero parallax hint
   - dish lightbox (focus-trapped, esc/backdrop close)
   - reserve form validation + toast
   ============================================================ */
(function () {
  "use strict";

  var prefersReduced = window.matchMedia(
    "(prefers-reduced-motion: reduce)"
  ).matches;

  /* ---------- toast helper ---------- */
  var toastEl = document.getElementById("toast");
  var toastTimer = null;
  function toast(msg) {
    if (!toastEl) return;
    toastEl.textContent = msg;
    toastEl.hidden = false;
    // force reflow so the transition runs
    void toastEl.offsetWidth;
    toastEl.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toastEl.classList.remove("show");
      setTimeout(function () {
        toastEl.hidden = true;
      }, 320);
    }, 3200);
  }

  /* ---------- scroll reveal ---------- */
  var revealEls = Array.prototype.slice.call(
    document.querySelectorAll("[data-reveal]")
  );
  if (!revealEls.length) {
    // nothing to do
  } else if (prefersReduced || !("IntersectionObserver" in window)) {
    revealEls.forEach(function (el) {
      el.classList.add("in");
    });
  } else {
    var io = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            // gentle stagger within a group
            var el = entry.target;
            var siblings = Array.prototype.slice.call(
              (el.parentNode || document).querySelectorAll("[data-reveal]")
            );
            var idx = Math.max(0, siblings.indexOf(el));
            el.style.transitionDelay = Math.min(idx * 70, 350) + "ms";
            el.classList.add("in");
            io.unobserve(el);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    revealEls.forEach(function (el) {
      io.observe(el);
    });
  }

  /* ---------- hero parallax hint ---------- */
  if (!prefersReduced) {
    var blobs = Array.prototype.slice.call(
      document.querySelectorAll("[data-parallax] .blob")
    );
    var softs = Array.prototype.slice.call(
      document.querySelectorAll("[data-parallax-soft]")
    );
    var ticking = false;
    function onScroll() {
      if (ticking) return;
      ticking = true;
      window.requestAnimationFrame(function () {
        var y = window.pageYOffset || 0;
        blobs.forEach(function (b, i) {
          var rate = i % 2 === 0 ? 0.12 : -0.08;
          b.style.transform = "translate3d(0," + y * rate + "px,0)";
        });
        softs.forEach(function (s) {
          var rect = s.getBoundingClientRect();
          var center = rect.top + rect.height / 2 - window.innerHeight / 2;
          s.style.transform = "translateY(" + center * -0.04 + "px)";
        });
        ticking = false;
      });
    }
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
  }

  /* ---------- dish lightbox ---------- */
  var lightbox = document.getElementById("lightbox");
  var lbPhoto = document.getElementById("lb-photo");
  var lbEmoji = lbPhoto ? lbPhoto.querySelector(".lb-emoji") : null;
  var lbCourse = document.getElementById("lb-course");
  var lbTitle = document.getElementById("lb-title");
  var lbDesc = document.getElementById("lb-desc");
  var lastFocused = null;

  var EMOJI = {
    beet: "🥬",
    saffron: "🦞",
    tomato: "🍅",
    duck: "🍒",
    citrus: "🍋",
    honey: "🍯"
  };
  var GRAD = {
    beet: "linear-gradient(150deg,#2a1422,#6a1f3a 55%,#c8775a)",
    saffron: "linear-gradient(150deg,#3a2118,#7a2f1b 55%,#c9a44c)",
    tomato: "linear-gradient(150deg,#3a1813,#8a2f1b 55%,#d6452b)",
    duck: "linear-gradient(150deg,#221813,#5c3a1f 55%,#a8852f)",
    citrus: "linear-gradient(150deg,#2a2410,#7a5a1f 55%,#e3c878)",
    honey: "linear-gradient(150deg,#2a2012,#8a6a1f 55%,#c9a44c)"
  };

  function openLightbox(dish) {
    if (!lightbox) return;
    lastFocused = document.activeElement;
    var photo = dish.getAttribute("data-photo") || "saffron";
    if (lbEmoji) lbEmoji.textContent = EMOJI[photo] || "🍽️";
    if (lbPhoto)
      lbPhoto.style.background = GRAD[photo] || GRAD.saffron;
    if (lbCourse) lbCourse.textContent = dish.getAttribute("data-course") || "";
    if (lbTitle) lbTitle.innerHTML = dish.getAttribute("data-title") || "";
    if (lbDesc) lbDesc.textContent = dish.getAttribute("data-desc") || "";
    lightbox.hidden = false;
    document.body.style.overflow = "hidden";
    var closeBtn = lightbox.querySelector(".lightbox-close");
    if (closeBtn) closeBtn.focus();
    document.addEventListener("keydown", onLbKey);
  }

  function closeLightbox() {
    if (!lightbox || lightbox.hidden) return;
    lightbox.hidden = true;
    document.body.style.overflow = "";
    document.removeEventListener("keydown", onLbKey);
    if (lastFocused && lastFocused.focus) lastFocused.focus();
  }

  function onLbKey(e) {
    if (e.key === "Escape") {
      closeLightbox();
      return;
    }
    if (e.key === "Tab") {
      // simple focus trap inside the panel
      var focusables = lightbox.querySelectorAll(
        'button, a[href], input, select, [tabindex]:not([tabindex="-1"])'
      );
      if (!focusables.length) return;
      var first = focusables[0];
      var last = focusables[focusables.length - 1];
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  }

  document.querySelectorAll(".dish .dish-photo").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var dish = btn.closest(".dish");
      if (dish) openLightbox(dish);
    });
  });

  document.querySelectorAll("[data-lb-close]").forEach(function (el) {
    el.addEventListener("click", function () {
      closeLightbox();
    });
  });

  /* ---------- reserve form ---------- */
  var form = document.getElementById("reserve-form");
  var status = document.getElementById("form-status");

  // pre-fill date min = tomorrow
  var dateInput = form ? form.querySelector('input[type="date"]') : null;
  if (dateInput) {
    var t = new Date();
    t.setDate(t.getDate() + 1);
    dateInput.min = t.toISOString().slice(0, 10);
  }

  function validEmail(v) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
  }

  if (form) {
    form.addEventListener("submit", function (e) {
      e.preventDefault();
      var fields = form.querySelectorAll("input[required], select[required]");
      var firstBad = null;
      fields.forEach(function (f) {
        var bad = !f.value.trim();
        if (f.type === "email" && !bad) bad = !validEmail(f.value.trim());
        f.classList.toggle("invalid", bad);
        if (bad && !firstBad) firstBad = f;
      });

      if (firstBad) {
        firstBad.focus();
        if (status) {
          status.textContent = "Please complete the highlighted fields.";
          status.classList.remove("ok");
        }
        toast("Please check the form.");
        return;
      }

      var name = form.querySelector('input[name="name"]').value.trim();
      var first = name.split(" ")[0] || name;
      if (status) {
        status.textContent =
          "Merci, " +
          first +
          " — your request is in. We'll confirm by email within 24 hours.";
        status.classList.add("ok");
      }
      toast("Reservation requested 🍷");
      form.reset();
      if (dateInput) dateInput.min = dateInput.min; // keep min
    });

    form.querySelectorAll("input, select").forEach(function (f) {
      f.addEventListener("input", function () {
        f.classList.remove("invalid");
      });
    });
  }

  /* ---------- year (footer is static here, no-op) ---------- */
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Atelier Verel — Chef Hélène Verel · Fine Dining</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>

  <header class="site-header" id="top">
    <nav class="nav" aria-label="Primary">
      <a class="brand" href="#top">
        <span class="brand-mark" aria-hidden="true">AV</span>
        <span class="brand-name">Atelier&nbsp;Verel</span>
      </a>
      <ul class="nav-links">
        <li><a href="#signatures">Signatures</a></li>
        <li><a href="#chef">The Chef</a></li>
        <li><a href="#tasting">Tasting Menu</a></li>
        <li><a href="#press">Press</a></li>
      </ul>
      <a class="btn btn-gold nav-cta" href="#reserve">Reserve</a>
    </nav>
  </header>

  <main id="main">
    <!-- HERO -->
    <section class="hero" aria-labelledby="hero-title">
      <div class="hero-bg" data-parallax aria-hidden="true">
        <span class="blob blob-a"></span>
        <span class="blob blob-b"></span>
        <span class="grain"></span>
      </div>
      <div class="hero-inner">
        <p class="overline" data-reveal>
          <span class="stars" aria-hidden="true">★★★</span>
          Three Michelin Stars · Est. 2009
        </p>
        <h1 id="hero-title" class="hero-title" data-reveal>
          The quiet drama of a<br /><em>single perfect plate.</em>
        </h1>
        <p class="hero-sub" data-reveal>
          A twelve-seat counter in the old quarter, where Chef Hélène Verel
          composes a nightly tasting menu from the morning&rsquo;s market and the
          seasons&rsquo; whim.
        </p>
        <div class="hero-actions" data-reveal>
          <a class="btn btn-gold" href="#reserve">Reserve a table</a>
          <a class="btn btn-ghost" href="#tasting">View the menu</a>
        </div>
        <dl class="hero-stats" data-reveal>
          <div><dt>Seats</dt><dd>12</dd></div>
          <div><dt>Courses</dt><dd>9</dd></div>
          <div><dt>Since</dt><dd>2009</dd></div>
        </dl>
      </div>
      <span class="scroll-hint" aria-hidden="true">Scroll</span>
    </section>

    <!-- SIGNATURES -->
    <section class="section signatures" id="signatures" aria-labelledby="sig-title">
      <header class="section-head" data-reveal>
        <span class="kicker">The Repertoire</span>
        <h2 id="sig-title" class="section-title">Signature dishes</h2>
        <p class="section-lede">
          Six plates that return each season, reinterpreted but never abandoned.
          Click any plate to look closer.
        </p>
      </header>

      <div class="dish-grid">
        <article class="dish" data-reveal
          data-title="Beetroot &amp; Smoked Crème"
          data-course="First Course · Vegetable"
          data-desc="Slow-roasted heirloom beets, charred over vine cuttings, set against a cloud of smoked crème fraîche, candied walnut and bronze fennel."
          data-photo="beet">
          <button class="dish-photo" type="button" aria-label="View Beetroot &amp; Smoked Crème">
            <span class="ph ph-beet" aria-hidden="true">🥬</span>
          </button>
          <div class="dish-body">
            <span class="dish-no">01</span>
            <h3>Beetroot &amp; Smoked Crème</h3>
            <p>Charred heirloom beets, bronze fennel, walnut.</p>
          </div>
        </article>

        <article class="dish" data-reveal
          data-title="Saffron Langoustine"
          data-course="Third Course · From the Sea"
          data-desc="Day-boat langoustine, barely poached in saffron butter, finished with preserved lemon, sea herbs and a whisper of fermented chili."
          data-photo="saffron">
          <button class="dish-photo" type="button" aria-label="View Saffron Langoustine">
            <span class="ph ph-saffron" aria-hidden="true">🦞</span>
          </button>
          <div class="dish-body">
            <span class="dish-no">02</span>
            <h3>Saffron Langoustine</h3>
            <p>Day-boat langoustine, preserved lemon, sea herbs.</p>
          </div>
        </article>

        <article class="dish" data-reveal
          data-title="Tomato Confit Tart"
          data-course="Second Course · The Garden"
          data-desc="A glassy tart of confit tomatoes, basil oil, aged sheep&rsquo;s milk and a crackling brittle of black olive — summer, distilled."
          data-photo="tomato">
          <button class="dish-photo" type="button" aria-label="View Tomato Confit Tart">
            <span class="ph ph-tomato" aria-hidden="true">🍅</span>
          </button>
          <div class="dish-body">
            <span class="dish-no">03</span>
            <h3>Tomato Confit Tart</h3>
            <p>Confit tomato, basil oil, aged sheep&rsquo;s milk.</p>
          </div>
        </article>

        <article class="dish" data-reveal
          data-title="Aged Duck, Cherry &amp; Cocoa"
          data-course="Main Course · From the Land"
          data-desc="Forty-day aged duck breast lacquered in cherry and cocoa, with charred shallot, foie gras royale and a sauce reduced over two days."
          data-photo="duck">
          <button class="dish-photo" type="button" aria-label="View Aged Duck, Cherry and Cocoa">
            <span class="ph ph-duck" aria-hidden="true">🍒</span>
          </button>
          <div class="dish-body">
            <span class="dish-no">04</span>
            <h3>Aged Duck, Cherry &amp; Cocoa</h3>
            <p>40-day duck, charred shallot, foie gras royale.</p>
          </div>
        </article>

        <article class="dish" data-reveal
          data-title="Citrus &amp; Saffron Veil"
          data-course="Pre-Dessert · Palate"
          data-desc="A trembling veil of blood orange and saffron, with buttermilk snow, candied bergamot and olive oil pressed the week of harvest."
          data-photo="citrus">
          <button class="dish-photo" type="button" aria-label="View Citrus and Saffron Veil">
            <span class="ph ph-citrus" aria-hidden="true">🍋</span>
          </button>
          <div class="dish-body">
            <span class="dish-no">05</span>
            <h3>Citrus &amp; Saffron Veil</h3>
            <p>Blood orange, buttermilk snow, bergamot.</p>
          </div>
        </article>

        <article class="dish" data-reveal
          data-title="Burnt Honey Soufflé"
          data-course="Dessert · The Finish"
          data-desc="A burnt-honey soufflé that arrives breathing, opened tableside and flooded with brown-butter ice cream and toasted buckwheat."
          data-photo="honey">
          <button class="dish-photo" type="button" aria-label="View Burnt Honey Soufflé">
            <span class="ph ph-honey" aria-hidden="true">🍯</span>
          </button>
          <div class="dish-body">
            <span class="dish-no">06</span>
            <h3>Burnt Honey Soufflé</h3>
            <p>Burnt honey, brown-butter ice cream, buckwheat.</p>
          </div>
        </article>
      </div>
    </section>

    <!-- CHEF / PHILOSOPHY -->
    <section class="section chef" id="chef" aria-labelledby="chef-title">
      <div class="chef-grid">
        <div class="chef-portrait" data-reveal data-parallax-soft aria-hidden="true">
          <span class="portrait-blob"></span>
          <span class="portrait-tag">Chef Hélène Verel</span>
        </div>
        <div class="chef-text" data-reveal>
          <span class="kicker">Philosophy</span>
          <h2 id="chef-title" class="section-title">
            <span class="dropcap">W</span>e cook the calendar, not the cookbook.
          </h2>
          <p>
            Hélène Verel trained in Lyon and Copenhagen before returning to open
            Atelier Verel with no fixed menu — only a relationship with twenty
            growers, two fishermen and a forager who arrives unannounced.
          </p>
          <p>
            Each evening begins where the market ends. What you eat tonight
            could not have existed last week, and will not exist next.
          </p>
          <ul class="chef-credo">
            <li><span aria-hidden="true">🌿</span> Sourced within a single day&rsquo;s drive</li>
            <li><span aria-hidden="true">🔥</span> Cooked over wood and embers</li>
            <li><span aria-hidden="true">🍷</span> Paired by our cellar, glass by glass</li>
          </ul>
          <p class="signature">— Hélène Verel</p>
        </div>
      </div>
    </section>

    <!-- TASTING MENU TEASER -->
    <section class="section tasting" id="tasting" aria-labelledby="tasting-title">
      <header class="section-head" data-reveal>
        <span class="kicker">Tonight at the Counter</span>
        <h2 id="tasting-title" class="section-title">The nine-course tasting</h2>
        <p class="section-lede">
          A single seating. A single menu. Pricing per guest, wine pairing optional.
        </p>
      </header>

      <div class="menu-card" data-reveal>
        <ol class="menu-list">
          <li><span class="course-name">Oyster &amp; Cucumber, frozen</span><span class="course-dot" aria-hidden="true"></span><span class="course-note">Snow</span></li>
          <li><span class="course-name">Tomato Confit Tart</span><span class="course-dot" aria-hidden="true"></span><span class="course-note">Garden</span></li>
          <li><span class="course-name">Beetroot &amp; Smoked Crème</span><span class="course-dot" aria-hidden="true"></span><span class="course-note">Embers</span></li>
          <li><span class="course-name">Saffron Langoustine</span><span class="course-dot" aria-hidden="true"></span><span class="course-note">Sea</span></li>
          <li><span class="course-name">Hand-rolled Tagliolini, brown butter</span><span class="course-dot" aria-hidden="true"></span><span class="course-note">Pasta</span></li>
          <li><span class="course-name">Turbot, bone marrow, capers</span><span class="course-dot" aria-hidden="true"></span><span class="course-note">Fish</span></li>
          <li><span class="course-name">Aged Duck, Cherry &amp; Cocoa</span><span class="course-dot" aria-hidden="true"></span><span class="course-note">Land</span></li>
          <li><span class="course-name">Citrus &amp; Saffron Veil</span><span class="course-dot" aria-hidden="true"></span><span class="course-note">Palate</span></li>
          <li><span class="course-name">Burnt Honey Soufflé</span><span class="course-dot" aria-hidden="true"></span><span class="course-note">Finish</span></li>
        </ol>
        <div class="menu-foot">
          <div class="price">
            <span class="price-amt">€245</span>
            <span class="price-lbl">per guest · 9 courses</span>
          </div>
          <div class="price price-alt">
            <span class="price-amt">+€155</span>
            <span class="price-lbl">cellar wine pairing</span>
          </div>
          <a class="btn btn-gold" href="#reserve">Reserve the counter</a>
        </div>
      </div>
    </section>

    <!-- PRESS -->
    <section class="section press" id="press" aria-labelledby="press-title">
      <header class="section-head" data-reveal>
        <span class="kicker">In Print</span>
        <h2 id="press-title" class="section-title">What they&rsquo;re saying</h2>
      </header>
      <div class="quote-grid">
        <figure class="quote" data-reveal>
          <blockquote>&ldquo;Verel doesn&rsquo;t plate food so much as compose silence around it. The most quietly devastating meal of the year.&rdquo;</blockquote>
          <figcaption><span class="cite-name">Le Monde Gastronomique</span><span class="cite-stars" aria-hidden="true">★★★★★</span></figcaption>
        </figure>
        <figure class="quote" data-reveal>
          <blockquote>&ldquo;Twelve seats, nine courses, and not one wasted gesture. This is cooking as autobiography.&rdquo;</blockquote>
          <figcaption><span class="cite-name">The Continental Table</span><span class="cite-stars" aria-hidden="true">★★★★★</span></figcaption>
        </figure>
        <figure class="quote" data-reveal>
          <blockquote>&ldquo;The burnt honey soufflé alone is worth the year-long wait for a reservation.&rdquo;</blockquote>
          <figcaption><span class="cite-name">Gault &amp; Voyage</span><span class="cite-stars" aria-hidden="true">★★★★★</span></figcaption>
        </figure>
      </div>
    </section>

    <!-- RESERVE -->
    <section class="section reserve" id="reserve" aria-labelledby="reserve-title">
      <div class="reserve-grid">
        <div class="reserve-intro" data-reveal>
          <span class="kicker">Reservations</span>
          <h2 id="reserve-title" class="section-title">Join us at the counter</h2>
          <p class="section-lede">
            We seat once nightly, Tuesday through Saturday. The book opens on the
            first of each month for the month following.
          </p>
          <ul class="reserve-facts">
            <li><span aria-hidden="true">🕖</span> One seating · 7:00 PM</li>
            <li><span aria-hidden="true">📅</span> Tuesday – Saturday</li>
            <li><span aria-hidden="true">📍</span> 9 Rue des Lavandes, Old Quarter</li>
          </ul>
        </div>

        <form class="reserve-form" id="reserve-form" data-reveal novalidate>
          <div class="field">
            <label for="r-name">Full name</label>
            <input id="r-name" name="name" type="text" autocomplete="name" required />
          </div>
          <div class="field">
            <label for="r-email">Email</label>
            <input id="r-email" name="email" type="email" autocomplete="email" required />
          </div>
          <div class="field-row">
            <div class="field">
              <label for="r-date">Date</label>
              <input id="r-date" name="date" type="date" required />
            </div>
            <div class="field">
              <label for="r-guests">Guests</label>
              <select id="r-guests" name="guests" required>
                <option value="1">1 guest</option>
                <option value="2" selected>2 guests</option>
                <option value="3">3 guests</option>
                <option value="4">4 guests</option>
              </select>
            </div>
          </div>
          <label class="check">
            <input type="checkbox" id="r-pairing" name="pairing" />
            <span>Add cellar wine pairing (+€155 / guest)</span>
          </label>
          <button class="btn btn-gold btn-block" type="submit">Request reservation</button>
          <p class="form-note" id="form-status" role="status" aria-live="polite">
            We&rsquo;ll confirm within 24 hours. A card is held but not charged.
          </p>
        </form>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="foot-grid">
      <div class="foot-brand">
        <span class="brand-mark" aria-hidden="true">AV</span>
        <span class="brand-name">Atelier Verel</span>
        <p>A twelve-seat counter in the old quarter.</p>
      </div>
      <div class="foot-col">
        <h3>Visit</h3>
        <p>9 Rue des Lavandes<br />Old Quarter</p>
        <p>Tue – Sat · 7:00 PM</p>
      </div>
      <div class="foot-col">
        <h3>Contact</h3>
        <p>+33 1 23 45 67 89</p>
        <p>[email protected]</p>
      </div>
      <div class="foot-cta">
        <a class="btn btn-gold" href="#reserve">Reserve a table</a>
      </div>
    </div>
    <p class="foot-fine">© 2026 Atelier Verel · Illustrative concept · Fictional restaurant</p>
  </footer>

  <!-- LIGHTBOX -->
  <div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-labelledby="lb-title" hidden>
    <div class="lightbox-backdrop" data-lb-close></div>
    <div class="lightbox-panel" role="document">
      <button class="lightbox-close" type="button" aria-label="Close" data-lb-close>&times;</button>
      <div class="lightbox-photo" id="lb-photo" aria-hidden="true"><span class="lb-emoji"></span></div>
      <div class="lightbox-info">
        <span class="lb-course kicker" id="lb-course"></span>
        <h3 class="lb-title" id="lb-title"></h3>
        <p class="lb-desc" id="lb-desc"></p>
        <a class="btn btn-gold" href="#reserve" data-lb-close>Reserve to taste</a>
      </div>
    </div>
  </div>

  <div class="toast" id="toast" role="status" aria-live="polite" hidden></div>

  <script src="script.js"></script>
</body>
</html>

Restaurant Chef / Fine Dining landing

A refined single-page landing for Atelier Verel, a fictional twelve-seat chef’s counter. The mood is couture: a charcoal gradient hero with gold hairlines, a Fraunces serif headline, and a Michelin-style overline, all set against ivory body type. Soft radial “food photography” blobs drift behind the hero as a parallax hint, and every section reveals on scroll with a gentle stagger.

The body walks a guest down the experience — a signature-dishes grid of gradient plates, a chef philosophy strip with drop-cap prose and a portrait card, a nine-course tasting menu teaser with per-guest pricing, glowing press quotes, and a reservation panel. Each dish opens a focus-trapped lightbox with its course, tasting note, and a reserve CTA; the reservation form validates name, email, date, and party size, then confirms with a toast and an aria-live status message.

Everything is vanilla HTML, CSS, and JavaScript with no libraries: food imagery is pure CSS gradients plus emoji, the layout collapses cleanly to a single column on mobile, and all controls are keyboard-usable with visible focus and reduced-motion support.

Illustrative UI only — recipes & nutrition data are fictional, not dietary advice.