System Requirements Document for astrotiancafei

1. Introduction

Astrotian Café is a celestial-themed neighbourhood coffee house on Rizal Street, Brgy. 1, Laoag City, Ilocos Norte, Philippines. This project delivers its public web presence: a modern, clean, celestial-themed landing page and ordering web app that presents the café's story, its menu, its opening hours and contact details, and lets visitors place an online order and reserve a table.

The product intent is to translate the café's physical atmosphere — a dark, warm room where stargazing and fresh espresso come together — into a single public destination. The founder's story (Christian, whose childhood fascination with the cosmos gave the café its "Astro" and whose own name gave it its "Tian") is the emotional centre of the page, and the visual language carries that romantic sweep without becoming childish or science-fiction clichéd.

The audience is local café-goers and curious visitors in and around Laoag City who want warmth and wonder rather than a corporate chain experience. They arrive to discover the café, browse what is on offer, order food and drink online, and secure a table for a visit.

2. System Overview

The current delivery is a single public landing destination, Landing, that carries the entire accepted experience: the hero with the tagline "Brewed in the Stars", the About story section, the interactive tabbed menu, the online order shopping cart drawer, the table reservation popup modal, testimonials, and opening hours with contact details.

Actors:

• Café Customer — browses the celestial-themed landing content, explores the interactive menu tabs, and places an online order through the shopping cart drawer.
• Table Reserver — opens the reservation popup modal and submits a booking for a date and time.
• Café Owner / Founder — Christian, whose story and identity shape the About section and the brand presented on the page.

The Landing destination is publicly reachable with no access requirement. Ordering and reservation are interactions inside that destination (a cart drawer and a popup modal), not separate destinations. The backend supports the ordering and reservation workflows so that placed orders and confirmed reservations persist and can be fulfilled by the café.

Narrow exclusions: this document does not add customer accounts, login, loyalty programmes, delivery tracking, payment-gateway integrations, staff-facing administration consoles, or any destination beyond the single Landing page. Nothing in the accepted requirements asks for them.

2a. Product Interpretation and Delivery Boundary

The café's public face and its transactional interactions live together on one page. A visitor lands, reads the founder's story, browses the menu by tab, adds items to a cart that slides in as a drawer, and either completes an order or opens a reservation modal to book a table. Because the ordering and reservation interactions are presented as a drawer and a modal — surfaces that belong to the page that opened them — they are owned by Landing rather than split into separate destinations.

Access is public. No account, sign-in, or identity establishment is required or implied by the source: the accepted requirements describe a visitor browsing and ordering, and a guest reserving a table, with no mention of accounts, profiles, or returning-user state. Order and reservation records are created and persisted server-side so the café can act on them, but the customer is not asked to establish an identity to do so.

Current horizon: the Landing page, its menu tabs, the cart drawer, the reservation modal, testimonials, and the hours/contact content. Future horizon: nothing beyond the accepted requirements is committed; any later addition (accounts, payments, delivery, admin tooling) is out of scope for this generation.

2b. Source Content Inventory

Not applicable — no reference directive in this project declares content_source authority. All factual content below is drawn from the authoritative user requirement thread.

2c. Page Content and Component Coverage

Landing

The single public entry surface. Espresso-brown ground (#2C1A14) across the whole page, creamy off-white (#FDFBF7) body copy and section titles, warm gold (#D4A373) as the single structural accent. Section boundaries are golden hairline arcs cut into the espresso ground rather than straight lines.

Information and state

• Wordmark "ASTROTIAN" and tagline "Brewed in the Stars".
• Micro-label line: "Rizal Street · Laoag City" and "Open 7AM – 9PM".
• Founder's story text and attribution "— Christian, Founder".
• Featured menu items with prices.
• Menu tab state: Coffee, Celestial Brews, Pastries, Light Bites (one active at a time).
• Cart state: line items, quantities, running item count, order total in\x20\xe2\x82\xb1.
• Reservation state: selected date, selected time, party details, confirmation result.
• Testimonials content.
• Location and hours content.

Primary actions

• "Order Now" — scrolls to the menu / opens the ordering context.
• Select a menu tab to switch the visible item grid.
• Add a menu item to the cart.
• Open the cart drawer; adjust quantity; remove a line item; place the order.
• Open the reservation modal; submit a table reservation.

Supporting actions

• Close the cart drawer and the reservation modal.
• Continue browsing after a successful order or reservation.
• Retry after a failed order or reservation submission.

Domain entities

• Menu item: name, price (\xe2\x82\xb1), category (Coffee / Celestial Brews / Pastries / Light Bites).
• Cart line: menu item, quantity, line subtotal.
• Order: set of cart lines, total, submission status.
• Reservation: date, time, party details, confirmation status.
• Testimonial: reviewer name, quote.
• Location and hours record: address, operating hours, stargazing hours.

Component responsibilities

• Hero — full-bleed espresso viewport; oversized Cinzel wordmark anchored bottom-left in a 7-column block; tagline "Brewed in the Stars" in Jost small-caps gold beneath it; gold pill "Order Now" CTA on the same baseline; a large golden hairline orbit ring bleeding off the top-right edge, slowly rotating, with a cream-lit espresso cup photograph inside its lower arc; a thin gold rule at 62% height carrying the location and hours micro-labels.
• About story panel — two-column layout; left column a portrait-shaped dark panel with a thin gold ring drawn around the founder's name; right column the founder's story at ~60ch measure; a small constellation diagram drawn as gold hairlines behind the quote.
• Menu tab strip — horizontal tabs (Coffee, Celestial Brews, Pastries, Light Bites) sitting on a single gold hairline; active tab marked by a gold underline.
• Menu item grid — 3 columns at 1280, 2 at 768, 1 at 375; each item an asymmetric-radius "planet tile" (28px top-left / 4px bottom-right) with a Cinzel price numeral in gold at the top-right and a 1px gold hairline tracing the tile edge on hover; each tile carries an add-to-cart control.
• Cart drawer — slides in from the side with a curved leading edge; lists cart lines with quantity controls and removal; shows a small gold orbit-ring progress glyph that fills as items are added; shows the order total; carries the place-order action.
• Reservation modal — popup with one rounded top corner echoing the hero arc; collects reservation date and time and party details; carries the submit action and shows the confirmation result.
• Testimonials row — horizontally scrollable row of three espresso-brown cards tilted ±1.5°, each with the reviewer's name in Cinzel small-caps gold above a Jost quote.
• Hours and contact footer band — curved top edge cut into the espresso ground; a small gold compass/location glyph; address, operating hours, and stargazing hours.

States

• Loading — menu items and testimonials render with a restrained placeholder treatment on the espresso ground; no spinner-heavy or bouncy loading.
• Empty — cart drawer empty state: a short message that no items have been added yet, with a way back to the menu. Menu tab with no items in a category: a short message rather than a blank grid.
• Success — order placed: the drawer confirms the order and its total, and the cart clears. Reservation submitted: the modal confirms the booking with the chosen date and time.
• Error — order or reservation submission fails: the drawer or modal stays open, keeps the entered items or details, shows a plain message that the submission did not go through, and offers retry.
• Recovery — after a failure the customer can retry the submission, adjust the cart or reservation details, or close the surface and continue browsing; nothing entered is silently discarded.

3. Functional Requirements

FR-1 — Celestial landing page and ordering web app (explicit) As a Café Customer, I should land on a modern, clean, celestial-themed page for Astrotian Café that both presents the café and lets me order, so that discovery and ordering happen in one place.

• Trigger: the visitor opens the site.
• Observable result: the Landing page renders with the hero, About story, interactive menu, cart drawer, reservation modal, testimonials, and hours/contact content.
• Access state: public, no sign-in.
• Failure/recovery: if content fails to load, the page shows a plain retry affordance rather than a blank screen.
• Continuation: the visitor can scroll through sections, switch menu tabs, add items, or open the reservation modal.

FR-2 — Colour palette (explicit) As a Café Customer, I should see the café's palette applied consistently, so that the page reads as one warm, dark, celestial room.

• Palette: rich dark espresso brown #2C1A14 as the dominant ground; creamy off-white #FDFBF7 for body copy and section titles; warm golden accents #D4A373 as the single structural accent.
• Observable result: espresso ground across the page, cream text at full contrast, gold used for hairline rules, orbital arcs, active tab underline, price numerals, and primary buttons (with espresso-brown text on gold).
• Constraint: gold is never used for small body text.

FR-3 — Typography (explicit) As a Café Customer, I should read elegant serif titles and clean sans-serif body text, so that the page feels classical and cosmic rather than generic.

• Titles: elegant serif in the Cinzel register, letter-spaced, all-caps for section eyebrows and the wordmark, sentence-case for display headlines.
• Body: clean sans-serif (Jost), neutral letterspacing.
• Observable result: every heading renders in the serif face and every body passage in the sans-serif face.

FR-4 — Hero with tagline (explicit) As a Café Customer, I should see a hero section carrying the tagline "Brewed in the Stars", so that the café's promise is the first thing I read.

• Observable result: the hero renders the wordmark, the tagline "Brewed in the Stars", and the "Order Now" call to action.
• Continuation: the call to action moves the visitor into the ordering context.

FR-5 — About story section (explicit) As a Café Customer, I should read the founder's story, so that I understand what the café is and where its name comes from.

• Content: the founder's story — his childhood fascination with the cosmos, galaxies, and outer space as the source of "Astro"; "Tian" taken directly from his own name, Christian; Astrotian Café as his dream realized in Laoag City, a place where stargazing and fresh espresso come together.
• Attribution: "— Christian, Founder".
• Observable result: the About section renders the story and attribution.

FR-6 — Interactive menu with tabs (explicit) As a Café Customer, I should switch between menu tabs to browse what the café offers, so that I can find the category I want.

• Tabs: Coffee, Celestial Brews, Pastries, Light Bites.
• Trigger: the visitor selects a tab.
• Observable result: the item grid shows the items for the selected category, and the active tab is marked.
• Failure/recovery: a category with no items shows a short message instead of a blank grid.
• Continuation: the visitor can switch tabs again or add an item to the cart.

FR-7 — Featured menu items and prices (explicit) As a Café Customer, I should see the featured menu items with their prices, so that I know what is on offer and what it costs.

• Items and prices: Nebula Latte —\x20\xe2\x82\xb1180; Supernova Espresso —\x20\xe2\x82\xb1150; Stardust Cold Brew —\x20\xe2\x82\xb1190; Cosmic Mocha —\x20\xe2\x82\xb1100; Celestial Matcha —\x20\xe2\x82\xb1110; Eclipse Caramel Macchiato —\x20\xe2\x82\xb1120.
• Observable result: each item renders its name and its price in\x20\xe2\x82\xb1.

FR-8 — Online order shopping cart drawer (explicit) As a Café Customer, I should add items to a cart drawer and place an order, so that I can buy food and drink online.

• Trigger: the visitor adds a menu item, then opens the cart drawer.
• Observable result: the drawer lists the added items with quantities and a running total in\x20\xe2\x82\xb1; the customer can adjust quantities and remove lines.
• Commitment step: the customer places the order from the drawer.
• Observable result on success: the drawer confirms the placed order and its total, and the cart clears.
• Failure/recovery: if the order does not go through, the drawer stays open with the items intact, states plainly that the order was not placed, and offers retry.
• Continuation: after a successful order the customer can close the drawer and keep browsing, or open the reservation modal.
• Access state: public, no sign-in required.

FR-9 — Table reservation popup modal (explicit) As a Table Reserver, I should open a reservation popup modal and submit a booking, so that I can secure a table.

• Trigger: the guest opens the reservation modal.
• Input: reservation date and time, and party details.
• Commitment step: the guest submits the reservation.
• Observable result on success: the modal confirms the booking with the chosen date and time.
• Failure/recovery: if the reservation does not go through, the modal stays open with the entered details intact, states plainly that the booking was not confirmed, and offers retry.
• Continuation: after confirmation the guest can close the modal and continue browsing.
• Access state: public, no sign-in required.

FR-10 — Testimonials (explicit) As a Café Customer, I should read testimonials, so that I can judge the café from other people's experience.

• Observable result: the testimonials render as a horizontally scrollable row of tilted espresso cards, each with the reviewer's name and quote.

FR-11 — Opening hours with contact details (explicit) As a Café Customer, I should find the café's location, hours, and contact details, so that I know when and where to visit.

• Content: Address — Rizal Street, Brgy. 1, Laoag City, Ilocos Norte; Operating Hours — Mon – Sun: 7:00 AM – 9:00 PM; Stargazing Hours — 8:00 AM – 11:00 AM.
• Observable result: the hours and contact band renders the address, operating hours, and stargazing hours.

FR-12 — Order and reservation persistence (required_inference) As a Café Customer, I should have my placed order and my confirmed reservation recorded, so that the café can actually prepare my order and hold my table.

• Trigger: a successful order placement or reservation submission.
• Observable result: the order and the reservation are stored server-side and remain available to the café after the customer closes the page.
• Rationale: an order that is not recorded cannot be fulfilled and a reservation that is not recorded cannot hold a table; this is the minimum state needed for the accepted ordering and reservation outcomes to be real.
• Failure/recovery: if the record cannot be written, the customer sees the failure state described in FR-8 / FR-9 rather than a false confirmation.

4. User Personas

Café Customer

Product context. A local café-goer or curious visitor in or around Laoag City who has found Astrotian Café's site. They may be deciding whether to visit at all, or they may already know what they want and are ordering ahead.

Primary goal. Discover the café's story and offerings, and complete a food-and-drink order with the correct items.

Distinct accepted responsibilities. Browsing the celestial-themed landing content; reading the founder's story; exploring the interactive menu tabs (Coffee, Celestial Brews, Pastries, Light Bites); adding items to the cart drawer; adjusting and removing cart lines; placing the order.

Relevant inputs or decisions. Which menu tab to open; which items and quantities to add; whether to proceed to place the order or keep browsing.

Interactions with other accepted participants. The customer's placed order is the handoff to the café, which prepares it. The customer and the Table Reserver are the same kind of visitor taking a different action; a customer may also reserve a table.

Observable success. A placed order with the correct items and a confirmed total, with the cart cleared afterwards.

What makes this role different. The customer's work is selection and commitment — choosing among categories and items and converting that selection into an order. It is not the same as booking a table, which is a scheduling commitment rather than a basket of goods.

Table Reserver

Product context. A guest who intends to visit the café in person and wants a table held for a specific date and time.

Primary goal. Secure a table at the café by submitting a booking for a date and time.

Distinct accepted responsibilities. Opening the reservation popup modal; providing reservation details (date, time, party details); submitting the booking; confirming the booking.

Relevant inputs or decisions. The date and time they want; the size of their party; whether to confirm the booking or abandon it.

Interactions with other accepted participants. The confirmed reservation is the handoff to the café, which holds the table. A reserver may also be a Café Customer ordering online.

Observable success. A confirmed table reservation showing the chosen date and time.

What makes this role different. The reserver's work is a scheduling commitment against the café's capacity, not a product selection. Their success is measured in a held table at a time, not in items and a total.

Café Owner / Founder

Product context. Christian, the founder, whose story and identity shape the About section and the brand. The site is the café's public face.

Primary goal. Have the café's offerings and story accurately and attractively presented to customers.

Distinct accepted responsibilities. Supplying the founder's story and its attribution; supplying the café's location, operating hours, and stargazing hours; supplying the featured menu items and their prices; supplying the testimonials content.

Relevant inputs or decisions. The exact wording of the story; the exact prices; the exact hours; which items are featured.

Interactions with other accepted participants. The founder's content is what the Café Customer reads and what the Table Reserver sees before booking; the orders and reservations the site produces are what the café acts on.

Observable success. The café's story, menu, prices, hours, and location appear correctly and attractively on the public page, and orders and reservations reach the café.

What makes this role different. The founder is the source of the café's identity and factual content rather than a transactional actor; his success is accurate, attractive presentation, not a completed transaction.

5. Core User Flows

Flow 1 — Café Customer discovers the café and places an online order

1. The Café Customer opens the Astrotian Café site. The Landing page renders publicly with no sign-in.
2. The hero fills the viewport: the wordmark "ASTROTIAN" anchored bottom-left, the tagline "Brewed in the Stars" beneath it, and the gold "Order Now" call to action on the same baseline. The gold orbit ring rotates slowly at the top-right, and the micro-label rule reads "Rizal Street · Laoag City" and "Open 7AM – 9PM".
3. The customer scrolls past the golden hairline arc into the About section and reads the founder's story — the cosmos fascination behind "Astro", Christian's name behind "Tian", and the dream realized in Laoag City — attributed "— Christian, Founder".
4. The customer reaches the interactive menu. The tab strip sits on a single gold hairline with Coffee, Celestial Brews, Pastries, and Light Bites.
5. The customer selects a tab. The item grid crossfades to that category's items, each a planet tile with its name and its Cinzel price numeral in gold (for example Nebula Latte —\x20\xe2\x82\xb1180, Supernova Espresso —\x20\xe2\x82\xb1150, Stardust Cold Brew —\x20\xe2\x82\xb1190, Cosmic Mocha —\x20\xe2\x82\xb1100, Celestial Matcha —\x20\xe2\x82\xb1110, Eclipse Caramel Macchiato —\x20\xe2\x82\xb1120).
6. The customer adds one or more items. The cart's orbit-ring progress glyph fills as items are added.
7. The customer opens the cart drawer. It slides in with its curved leading edge and lists each line with its quantity and the running total in\x20\xe2\x82\xb1.
8. The customer adjusts a quantity or removes a line. The drawer updates the lines and the total.
9. The customer places the order. The order is recorded server-side.
10. Success: the drawer confirms the placed order and its total, and the cart clears. The customer closes the drawer and continues browsing.

11. Failure: if the order does not go through, the drawer stays open with every item intact, states plainly that the order was not placed, and offers retry. The customer retries, or adjusts the cart and retries, or closes the drawer and keeps browsing. Nothing entered is silently discarded.

Flow 2 — Table Reserver books a table

1. The Table Reserver opens the Astrotian Café site and scrolls to the menu or the hours band.
2. The reserver opens the reservation popup modal. It fades and scales in with its single rounded top corner echoing the hero arc.
3. The reserver enters the reservation date and time and the party details.
4. The reserver submits the booking. The reservation is recorded server-side.
5. Success: the modal confirms the booking with the chosen date and time. The reserver closes the modal and continues browsing.
6. Failure: if the booking is not confirmed, the modal stays open with the entered details intact, states plainly that the reservation was not confirmed, and offers retry. The reserver retries, or changes the date or time and retries, or closes the modal.

Flow 3 — Café Customer reads testimonials and checks when to visit

1. The Café Customer scrolls to the testimonials row — three espresso-brown cards tilted ±1.5°, each with the reviewer's name in Cinzel small-caps gold above a Jost quote.
2. The customer scrolls the row horizontally to read each card fully.
3. The customer continues to the hours and contact band, whose top edge is a curve cut into the espresso ground, marked with a small gold compass/location glyph.
4. The customer reads the address (Rizal Street, Brgy. 1, Laoag City, Ilocos Norte), the operating hours (Mon – Sun: 7:00 AM – 9:00 PM), and the stargazing hours (8:00 AM – 11:00 AM).
5. The customer decides when to visit, and may return to the menu to place an order or open the reservation modal.

Flow 4 — Café Owner / Founder's content reaches customers

1. The Café Owner / Founder supplies the founder's story and its attribution, the featured menu items and their prices, the location and hours, and the testimonials content.
2. The Landing page presents that content: the story in the About section with the founder's name ringed in gold, the items and prices in the menu grid, the hours and address in the footer band, and the testimonials in the tilted card row.
3. A Café Customer reads the story and the menu, and a Table Reserver reads the hours before booking.
4. Orders placed through the cart drawer and reservations submitted through the modal are recorded server-side and reach the café, which prepares the order and holds the table.
5. Success: the café's story, menu, prices, hours, and location appear correctly and attractively, and the resulting orders and reservations are available to the café.

6. Visuals Colors and Theme

Muse: Zaha Hadid. Headline: Fluid cosmic grandeur — espresso-dark voids carved by golden light. The shape, layout, and motion language is parametric continuity: curved section boundaries that read as orbital arcs, espresso-dark grounds cut by golden light, and continuous surfaces that suggest a coffee being poured and a galaxy rotating are the same gesture. The user's exact palette and typographic register are preserved unchanged.

Colour tokens (dark mode)

Proportion: roughly 60% espresso ground, 25% cream text, 12% gold accents, 3% lifted surface. Contrast is checked: #FDFBF7 on #2C1A14 far exceeds WCAG AA. Gold #D4A373 is never used for small body text — only for headings, icons, rules, and buttons.

Typography

• Headings: Cinzel, 400–600 weight, letter-spaced +0.04em; all-caps for section eyebrows and the wordmark, sentence-case for display headlines. Titles are the only place letterspacing widens; body stays neutral. Cinzel's carved, classical Roman proportions carry the cosmic-ritual feel without tipping into fantasy.
• Body: Jost.
• Scale: 1.333 modular — 128 / 96 / 64 / 40 / 24 / 18 / 16.
• Hero display: Cinzel clamp(3.25rem, 10vw, 8rem).
• Section titles: Cinzel clamp(2rem, 4.5vw, 4rem).
• Body: Jost 17px/1.7 desktop, 16px/1.65 mobile.
• Micro-labels: Jost 12px uppercase, tracked +0.18em.

Shape language. Parametric continuity. Section boundaries are not straight lines: a wide golden hairline arc sweeps between the hero and the About section, and the About section's top edge is a single shallow curve cut into the espresso ground. Menu cards use a large asymmetric corner radius (28px top-left, 4px bottom-right) so each tile reads as a small, tilted planet. Buttons are pill or full-capsule with a 1px gold hairline. The cart drawer slides in with a curved leading edge, and the reservation modal has one rounded top corner echoing the hero arc. No hard 90° corners anywhere except the tab bar's baseline rule.

Layout. Asymmetric editorial grid on a 12-column system. The hero occupies the full viewport with the wordmark and tagline anchored bottom-left in a 7-column block; a large circular orbit motif bleeds off the top-right corner. The About story is two columns: left a portrait-shaped dark panel with a thin gold ring drawn around the founder's name, right the founder's story at 60ch measure. The menu is a horizontal tab strip on a single gold hairline, with items below in a 3-column grid at 1280, 2-column at 768, single column at 375. Testimonials are a horizontally scrollable row of three tilted espresso cards (each rotated ±1.5°). Hours and contact sit in a footer band with a curved top edge cut into the espresso ground and a small gold compass/location glyph. All display type scales with clamp() so the hero line wraps rather than clips at 375px.

Imagery. One large photograph or rendered image of a dark espresso cup on a warm brown ground, lit from above like a small moon, with a soft golden rim light — the single celestial object of the page. Supporting imagery: macro shots of crema swirls, a stargazing-window photograph in the About panel, and a small constellation diagram drawn as gold hairlines behind the founder's quote. No stock people, no flat clip art, no gradient blobs. Photography is always cropped in a circle or an arc, never a plain rectangle.

7. Signature Design Concept

The poster hero. The public entry is composed as a poster, not a SaaS hero. A full-bleed espresso-brown viewport (#2C1A14) carries an oversized Cinzel wordmark "ASTROTIAN" at clamp(3.25rem, 10vw, 8rem), letter-spaced, anchored bottom-left in a 7-column block. Directly beneath it on the same baseline grid sit the tagline "Brewed in the Stars" in Jost small-caps gold and the gold pill "Order Now" call to action. Top-right, a large golden hairline circle — the orbit ring — bleeds off the viewport edge and rotates slowly; a single cream-lit espresso cup photograph sits inside its lower arc, cropped by the ring. A thin gold rule runs horizontally across the viewport at 62% height, carrying the micro-label "Rizal Street · Laoag City" on the left and "Open 7AM – 9PM" on the right.

There is no centred headline, no subtext stack, no blue button, and no gradient blob. The composition reads as a poster: one dark room, one golden light, one cup, and the café's name set large enough to be the architecture of the page. Every element in it is accepted content — the wordmark, the tagline, the ordering call to action, the location, and the hours.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: the golden hairline orbit ring bleeding off the top-right edge, with the cream-lit espresso cup photograph inside its lower arc — the single celestial object of the page.
• Input → transformation → outcome thesis: as the page settles, the orbit ring turns continuously and the cup holds still inside it, so the visitor's first impression is a slow cosmic rotation around a warm, grounded object — the same gesture as a galaxy turning around a cup of coffee. The motion introduces the café's promise; it does not perform a task.
• Motion vocabulary: one continuous slow orbit of the golden hairline ring (60s loop, 8px amplitude); section boundaries reveal with a 400ms ease-out curve-draw of the gold arc as the user scrolls; menu tab switches crossfade the item grid in 220ms with a 12px upward drift; the cart drawer slides in 320ms cubic-bezier(0.22, 1, 0.36, 1); the reservation modal fades and scales from 0.96 to 1 in 260ms. No bounce, no particles, no gradient blobs.
• Composed first frame: espresso-brown viewport; "ASTROTIAN" bottom-left at full display size; "Brewed in the Stars" and the gold "Order Now" pill on the same baseline beneath it; the orbit ring already in motion at the top-right with the cup inside its lower arc; the gold rule at 62% height carrying "Rizal Street · Laoag City" and "Open 7AM – 9PM".
• Reduced-motion state: under prefers-reduced-motion, the orbit ring is static and all reveals collapse to plain opacity 0→1 over 150ms. The hero remains fully composed and readable, with the wordmark, tagline, call to action, location, and hours all in place.

9. Non-Functional Requirements

NFR-1 — Readable text and controls at every viewport (explicit, from the creative direction's readability rule) Headlines, the wordmark, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit. No other element covers any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut as the direction asks, as long as they cover no readable text or control. The horizontally scrollable testimonials row may cross the container edge by design; every card becomes fully readable as it passes, and under reduced motion the row remains horizontally scrollable so each card can be brought fully into view.

NFR-2 — Colour contrast (explicit palette, checked) #FDFBF7 on #2C1A14 far exceeds WCAG AA. Gold #D4A373 is never used for small body text — only for headings, icons, rules, and buttons, with espresso-brown text on gold buttons for readability.

NFR-3 — Reduced motion (explicit, from the creative direction) Under prefers-reduced-motion, the orbit ring is static and all reveals collapse to plain opacity 0→1 over 150ms. The page remains fully usable and fully readable.

NFR-4 — Order and reservation durability (required_inference) Placed orders and confirmed reservations persist server-side so the café can prepare the order and hold the table after the customer closes the page. Rationale: without persistence the accepted ordering and reservation outcomes are not real.

NFR-5 — Public access (explicit) The Landing page and its ordering and reservation interactions are publicly reachable with no sign-in. No account, profile, or returning-user state is required by any accepted requirement.

NFR-6 — Currency and locale (explicit) All prices are displayed in Philippine pesos with the\x20\xe2\x82\xb1 symbol, matching the source values. Location and hours are presented as given for Laoag City, Ilocos Norte.

10. Tech Stack

• Frontend: React — a single-page landing and ordering app for the Landing destination, with the cart drawer and reservation modal as in-page surfaces.
• Backend: Python / FastAPI — one shared backend service providing the menu data, order placement, and reservation submission endpoints, and persisting orders and reservations.
• Storage: a relational database for menu items, orders, order lines, and reservations.
• Containerisation: Docker and docker-compose, with the frontend and the backend as the runnable services.
• Typography: Cinzel for headings and Jost for body text, loaded as web fonts.

Kubernetes is not required for this deployment.

11. Assumptions and Constraints

• A-1 (assumption) The Landing page is the only destination in this generation; the cart drawer and reservation modal are in-page surfaces owned by Landing, not separate pages.
• A-2 (assumption) Access is public. No account, sign-in, or identity establishment is required for browsing, ordering, or reserving, because no accepted requirement asks for one.
• A-3 (assumption) The menu categories Coffee, Celestial Brews, Pastries, and Light Bites are the tab set; the six featured items with their stated prices are the source-backed items, and the café supplies the remaining items per category.
• A-4 (assumption) Testimonials content is supplied by the café; the source does not name individual reviewers.
• A-5 (constraint) The palette is fixed to #2C1A14, #FDFBF7, and #D4A373, with the direction's lifted surface #3A241B, accent #E8C39E, and muted #8A6A55 as supporting tokens.
• A-6 (constraint) Titles use an elegant serif in the Cinzel register; body text uses a clean sans-serif (Jost).
• A-7 (constraint) The hero tagline is exactly "Brewed in the Stars".
• A-8 (constraint) The founder's story, the address, the operating hours, and the stargazing hours are presented exactly as given in the source.
• A-9 (constraint) No customer accounts, loyalty programmes, delivery tracking, payment-gateway integrations, or staff-facing administration consoles are in scope for this generation.
• A-10 (default — not specified by user) The relational database choice and the specific web-font loading strategy are implementation defaults; the source specifies only the font families and the palette.

12. Glossary

• Astrotian Café — the celestial-themed coffee house at Rizal Street, Brgy. 1, Laoag City, Ilocos Norte, Philippines.
• Landing — the single public destination of this project, carrying the hero, About story, interactive menu, cart drawer, reservation modal, testimonials, and hours/contact content.
• Hero — the full-viewport opening section carrying the wordmark, the tagline "Brewed in the Stars", and the "Order Now" call to action.
• Orbit ring — the large golden hairline circle that bleeds off the hero's top-right edge and rotates slowly.
• Planet tile — a menu item card with an asymmetric corner radius (28px top-left, 4px bottom-right) and a Cinzel price numeral in gold at the top-right.
• Cart drawer — the in-page surface that slides in with a curved leading edge, listing cart lines, quantities, and the order total, and carrying the place-order action.
• Reservation modal — the in-page popup with one rounded top corner that collects reservation date, time, and party details and carries the submit action.
• Stargazing Hours — 8:00 AM – 11:00 AM, the café's designated stargazing window, distinct from its operating hours.
• Operating Hours — Mon – Sun: 7:00 AM – 9:00 PM.
• Founder — Christian, whose childhood fascination with the cosmos gave the café its "Astro" and whose own name gave it its "Tian".