Faiaz Shisha

Established the visual language with deep charcoal backgrounds (#0d0d0d, #1a1a1a), gold accent colours (#c9a84c, #e8c96e), and off-white body text. All values were encoded as CSS custom properties so the entire theme can be adjusted from one declaration block.

:root {
  --color-bg:       #0d0d0d;
  --color-surface:  #1a1a1a;
  --color-gold:     #c9a84c;
  --color-gold-lt:  #e8c96e;
  --color-text:     #e8e0d5;
  --color-muted:    #888;
  --font-display:   'Playfair Display', serif;
  --font-body:      'Inter', sans-serif;
}

The hero uses a background image overlaid with a multi-stop linear-gradient from near-opaque dark at the bottom to semi-transparent at the top, creating depth without a separate overlay element. A subtle CSS @keyframes animation pulses the gradient opacity to give the hero a breathing, atmospheric feel on desktop.

.hero {
  background-image:
    linear-gradient(to top, rgba(13,13,13,0.95) 0%, rgba(13,13,13,0.4) 60%, transparent 100%),
    url('images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
}

Each flavour card has a data-category attribute (fruit, mint, mixed). Tab buttons use aria-selected for accessibility. The JavaScript filter works identically to the product filter pattern — reading data-category on each card and setting visibility based on the active tab, ensuring the DOM is the single source of truth.

The gallery uses the CSS columns property to achieve a masonry-style layout without JavaScript. Images flow into column tracks naturally, with a break-inside: avoid on each figure to prevent images splitting across column boundaries.

.gallery-masonry {
  columns: 1;
  gap: 1rem;
}

@media (min-width: 480px) { .gallery-masonry { columns: 2; } }
@media (min-width: 768px) { .gallery-masonry { columns: 3; } }

.gallery-masonry figure {
  break-inside: avoid;
  margin-bottom: 1rem;
}

The booking form validates: date (must be future date using Date.now() comparison), time slot (valid hours 17:00–01:00), and party size (1–20). Invalid states display inline error messages adjacent to the affected field. On valid submission a confirmation message receives focus for screen-reader accessibility.

function validateBooking(form) {
  const date = new Date(form.date.value);
  const hour = parseInt(form.time.value.split(':')[0]);
  const size = parseInt(form.partySize.value);
  const validHours = (hour >= 17) || (hour < 2);

  if (date <= new Date()) return showError(form.date, 'Date must be in the future');
  if (!validHours) return showError(form.time, 'Bookings available 17:00 – 01:00');
  if (size < 1 || size > 20) return showError(form.partySize, 'Party size: 1 to 20');
  return true;
}

Elements that should animate on scroll are given a .reveal class. A single IntersectionObserver watches all .reveal elements and adds .is-visible when they enter the viewport. CSS handles the transition entirely — .reveal starts at opacity: 0; transform: translateY(20px) and .reveal.is-visible transitions to opacity: 1; transform: none. Cascade delays are set with inline --delay custom properties.

// JS — set up observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('is-visible'); observer.unobserve(e.target); } });
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

/* CSS */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease var(--delay, 0s), transform 0.5s ease var(--delay, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }