Maker's guide

How this site was made

One of twenty-five sites in a series built end-to-end by Claude — hand-written HTML, CSS, and JavaScript. No framework, no build step.

Concept & art direction

This is Concept E — "The Table in the Sky", one of five concept directions prepared for Borenstein Caterers, Inc., the kosher airline caterer at JFK (est. 1946, a subsidiary of El Al since 1970, and the only fully equipped, complete kosher in-flight kitchen in the USA). Where a typical caterer site sells capacity, this page sells a feeling: the moment the tray lands on the table at 35,000 feet. The audience is airline brand and service leaders, so the page is written as one flight — Boarding, Ascent, Cruise, Service, Descent — with a flight-progress rail tracking the phases down the right edge.

Every fact on the page is a real client fact: 15,000+ meals a day, 50+ airlines, Fresh Meals cooked and packaged on flight day, OU Kosher / FDA / USDA, Kosher4U, the Jamaica NY address and phone. No testimonials or airline names were invented; the example dinner service is labeled as a composition and keeps kosher (meat main, olive-oil purée instead of butter, pareve dessert).

Palette

Dusk-flight gradients: deep indigo falling to a gold horizon band, with cabin-lamp amber and cloud white for type.

Typography

• Cormorant Garamond — the romantic editorial serif. Headlines set at 300–400 with italic gold accents; dish names on the menu card in italic, the way a printed first-class menu would.
• Jost — the fine geometric sans. All labels, eyebrows, and phase marks in letterspaced uppercase (0.2–0.34em tracking) at small sizes: menu-card manners.

Signature: the sky engine + the composed tray

The whole page sits on a single fixed sky. A scroll listener maps document progress (0→1) through five color keyframes — afternoon blue, golden hour, dusk, late dusk, night — and interpolates the zenith, mid, and horizon colors in JavaScript, writing them back as CSS custom properties:

const KEYS = [
  [0.00, "#4e6fa3", "#7e96be", "#e9c98f", ...],  // afternoon
  [0.28, "#35476f", "#6d6796", "#f0a95c", ...],  // golden hour
  [0.58, "#1b2247", "#3d3a6b", "#d98a45", ...],  // dusk
  [1.00, "#0b0f26", "#1c2145", "#8a5a33", ...],  // night
];
root.style.setProperty("--sky0", zenith); // gradient re-lights itself

The same variables tint the cloud layers, so the clouds catch gold at sunset, and 90 seeded stars fade in past 60% scroll. The cabin-window hero is drawn entirely in CSS and SVG — an elliptical-radius window with an inner shade, two parallax cloud layers, a wing silhouette, and a glare sweep — and it looks through to the same live sky variables, so the window darkens with the page.

In the Cruise section, a 340vh scroll track pins a drawn SVG meal tray. Local scroll progress is split into overlapping smoothstepped windows, one per course — napkin, challah roll, starter, main, dessert, wine — each drifting in like a cloud (translate + opacity driven by a per-course --p variable) while its line on the menu card inks in beside it. At the reservation CTA, a seatbelt sign lights cabin-lamp amber with two expanding rings — a visual chime, no audio.

Photography

Four stills were pre-generated with Nano Banana Pro for this pitch: the flight-kitchen line, the overhead Fresh Meals tray, a black-and-white founding-era scene for 1946, and a 3:4 freshness macro. No additional images were generated; everything else on the page — sky, clouds, stars, window, tray, food, seatbelt sign — is code.

The three iteration passes

1. Pass 1 — composition & correctness. Screenshots exposed vertically stretched photos (the CSS reset lacked height:auto, so the HTML height attribute stuck), a 6px horizontal overflow on mobile from the nowrap hero foot-note, and a cramped 390px hero — the cabin window ate the whole fold and the letterspaced eyebrow wrapped badly. Fixed all four: aspect ratios restored, foot-note wraps, window shrunk to 46vw on mobile so the headline peeks into the first screen.
2. Pass 2 — elevate, and a real bug. Warmed the plate porcelain with a gold rim in the tray SVG, added a menu-card hover (dish names ink gold), a slow 7s float to the fuselage, and a brighter serif window caption. The overflow hunt found the true culprit — the fixed sky's cloud puffs inflate scrollWidth — but the first fix, html{overflow-x:hidden}, silently killed position:sticky and emptied the Cruise section. The screenshots caught it; the cure is overflow-x:clip, which clips without creating a scroll container.
3. Pass 3 — taste & final QA. Chanel rule: removed the reveal animation from the stats row (the sky is the show; the numbers should just be there). Added legibility shadows to captions that cross the gold horizon band, and retimed the course choreography so the wine lands before the section unpins — a beat to admire the finished tray. Verified 390px mobile, zero horizontal overflow on both viewports, reduced-motion (tray pre-composed, no twinkle, no float), and a zero-error console.

Technical notes

• Static HTML/CSS/JS, relative paths only; Google Fonts is the sole external dependency.
• All scroll work runs through one requestAnimationFrame-gated handler; cloud parallax uses transform only.
• prefers-reduced-motion pre-composes the tray, stops the twinkle and chime rings, and stills the parallax.
• Reveals use a one-shot IntersectionObserver; the seatbelt chime fires once at 60% visibility.

Design concept prepared for Borenstein Caterers, Inc. — Integralink