System Requirements Document for purple-deals

1. Introduction

purple-deals delivers the completed Deals section of the existing Unique Café single-page restaurant website. The Unique Café is a Pakistani fast-food café selling pizzas, zinger burgers, shawarmas, fries, wings, nuggets, pound cakes and drinks. A previous code generation was cut off mid-way through the Deals section, before Deal 1 was completed. This project's sole product intent is to finish that section in full — all 15 deal cards as production-ready HTML/CSS/JavaScript that integrates seamlessly with the already-built page.

The audience is the Café customer: families and students browsing the site who want to compare bundle deals by price, included items, and savings versus buying items individually, then set a quantity and see a subtotal before choosing a deal.

The work is scoped strictly to the Deals section. The existing dark premium theme (deep red, golden, orange accents), menu card components, PKR pricing display, sticky navbar, and interactive section patterns are already implemented and must not be recreated.

2. System Overview

The product is a static, client-side single-page restaurant website. The Deals section is delivered as a single self-contained HTML/CSS/JS block that continues from the cut-off point, marked with a clear continuation comment, with all styles scoped under a .deals-section parent class so nothing conflicts with existing CSS.

Actors

• Café customer (active human persona) — browses the Deals section anonymously, filters, expands, and sets quantities.
• Browser / client runtime (non-persona system actor) — renders cards dynamically from the dealsData array, runs filter, expand, quantity, and scroll-animation logic.

Accepted behavior owned by the Deals section

• A grid of all 15 deal cards rendered from dealsData, each with a stamped deal-number badge, a prominent PKR price, an itemized list of included items, a savings figure versus individual item pricing, and a −/+ quantity control with a subtotal.
• "Popular" badge on Deal 9; "Best Value" badges on Deals 12 and 13.
• A filter bar (All | Under Rs. 1,000 | Rs. 1,000–Rs. 2,500 | Rs. 2,500–Rs. 5,000 | Most Popular) with smooth fade/slide transitions and a highlighted active state.
• Click-to-expand detail (inline accordion or modal) showing the full breakdown, crossed-out individual item prices, and highlighted total savings, with smooth open/close animation.
• Scroll-triggered fade-up card entrance with per-card stagger, and hover lift/glow/lightening.

Narrow exclusions

• No recreation of already-built page parts (menu cards, PKR pricing display, sticky navbar, interactive section patterns, existing theme).
• No external libraries unless already present in the existing page.
• No inline styles.
• No checkout, ordering, payment, cart persistence, or account system is introduced by this section.

2a. Product Interpretation and Delivery Boundary

The Deals section is a public, anonymous, client-side surface. There is no application-owned identity, no login, and no protected state: a Café customer opens the single-page site, scrolls to the Deals section, and interacts entirely in the browser. Quantity selections and subtotals are display-only state on each card; they are not persisted, transmitted, or turned into an order by this section. Savings are computed from realistic individual item prices derived from the menu data already established on the page.

The delivery boundary is the Deals section completion only. Everything already built on the page is out of scope for recreation. There is no future-horizon requirement in the authoritative thread; nothing beyond the completed Deals section is committed.

2b. Source Content Inventory

The authoritative source supplies the following verified deal data, all prices in PKR. This is the content the dealsData array must carry.

Individual item prices used for savings are derived from the menu data already established on the page (see Assumptions for the derivation rule).

2c. Page Content and Component Coverage

Landing

The existing single-page Unique Café site. This project does not recreate it; it only receives the completed Deals section as one of its sections.

• Information/state: existing hero, menu cards, PKR pricing display, sticky navbar, and interactive section patterns, plus the newly completed Deals section embedded in the page flow.
• Primary actions: existing navigation; scrolling to the Deals section.
• Supporting actions: none added by this project.
• Domain entities: menu items, deals (via the embedded Deals section).
• Component responsibilities: the sticky navbar and menu cards remain as built; the Deals section is inserted at its continuation point.
• States: loading/empty/success/error for the existing page are unchanged; the Deals section's own states are described under Deals.

Deals

The completed Deals section, scoped under .deals-section, rendered from dealsData.

• Information/state:
  • Section heading "OUR DEALS" styled to match existing section headers, with a decorative underline accent.
  • A filter bar above the grid with options All | Under Rs. 1,000 | Rs. 1,000–Rs. 2,500 | Rs. 2,500–Rs. 5,000 | Most Popular, with the active filter clearly highlighted in the golden/red accent.
  • A responsive CSS grid of 15 deal cards: 3 columns desktop, 2 tablet, 1 mobile.
  • Each card: bold deal-number badge (e.g., "DEAL 1") in golden/red accent; large high-contrast total PKR price; itemized list of included items with bullet/icon styling consistent with existing menu cards; savings versus individual item pricing; −/+ quantity control with subtotal; "Popular" ribbon on Deal 9 and "Best Value" ribbons on Deals 12 and 13, visually distinct.
  • Expanded detail (inline accordion or modal) showing full deal breakdown, individual item prices crossed out, and total savings highlighted.
• Primary actions: select a filter; click a deal card to expand/collapse its detail; press − or + to change quantity.
• Supporting actions: scroll to trigger card entrance animation; hover a card for lift/glow.
• Domain entities: deal (number, price, included items, badge, savings), deal line item (name, individual price), quantity, subtotal.
• Component responsibilities:
  • dealsData array — single data source for all 15 deals.
  • Card render function — builds cards dynamically from dealsData.

• Filter logic — shows/hides cards by price band or popularity with fade/slide transitions.
• Modal/expand handler — opens/closes the detail view with smooth animation.
• Quantity logic — enforces minimum 1 and updates the subtotal.
• Scroll animation — fade-up with per-card stagger.
• States:
  • Loading: cards render from dealsData on script execution.
  • Empty: not applicable — all 15 deals are always present in the data.
  • Success: cards visible, filter active state shown, expanded detail open, quantity and subtotal updated.
  • Error/recovery: if a filter matches no cards, the grid shows no cards and the active filter remains selected so the customer can switch back to All; quantity cannot go below 1, so − at 1 is a no-op.

3. Functional Requirements

FR-1 — Complete the Deals section without recreating existing parts (explicit) As a Café customer, I should see the Deals section completed in full on the existing Unique Café page, so that I can browse all deals without the page's already-built menu cards, PKR pricing display, sticky navbar, interactive section patterns, and dark premium theme being recreated or disturbed.

• Lifecycle: initiator = Café customer opening the page; result = Deals section present and complete; failure/recovery = none beyond normal page load; continuation = scroll into the Deals section.
• Acceptance: the Deals section renders all 15 deals; existing page parts are unchanged.

FR-2 — Single self-contained block with continuation marker and scoped styles (explicit) As a developer maintaining the page, I should receive the Deals section as a single self-contained HTML/CSS/JS block with a clear comment marking the continuation point and all styles scoped under .deals-section, so that it integrates without conflicts.

• Acceptance: one block; continuation comment present; every Deals style rule is scoped under .deals-section; no inline styles.

FR-3 — Render all 15 deal cards from dealsData (explicit) As a Café customer, I should see all 15 deal cards rendered dynamically from the dealsData array, each with a bold deal-number badge (e.g., "DEAL 1") in golden/red accent, a prominent large high-contrast total PKR price, and an itemized list of included items styled consistently with existing menu cards.

• Acceptance: exactly 15 cards; each shows its badge, PKR price, and itemized list matching the Source Content Inventory.

FR-4 — Deal data fidelity (explicit) As a Café customer, I should see each deal's exact price and included items as specified (Deals 1–15 per the Source Content Inventory), so that what I read is what the café offers.

• Acceptance: every price and item line matches the inventory exactly, including quantities (e.g., "2 Zinger Burgers", "1.5 Ltr Drink").

FR-5 — Popular and Best Value badges (explicit) As a Café customer, I should see a visually distinct "Popular" badge on Deal 9 and "Best Value" badges on Deals 12 and 13 (e.g., glowing accent border or ribbon), so that I can spot recommended deals at a glance.

• Acceptance: Deal 9 shows "Popular"; Deals 12 and 13 show "Best Value"; no other card carries these badges.

FR-6 — Savings versus individual item pricing (explicit) As a Café customer, I should see a savings figure on each card calculated against realistic individual item prices derived from the menu data already established on the page, so that I can judge the value of each bundle.

• Acceptance: each card displays a savings amount; savings = sum of individual item prices − deal price, using menu-derived individual prices.

FR-7 — Expandable deal detail (explicit) As a Café customer, I should be able to click a deal card to expand it (inline accordion or modal) and see the full deal breakdown, individual item prices crossed out, and total savings highlighted, with a smooth open/close animation consistent with the dark premium aesthetic.

• Acceptance: clicking a card opens its detail; clicking again (or closing) collapses it; crossed-out individual prices and highlighted total savings are shown; animation is smooth.

FR-8 — Quantity control with subtotal and minimum 1 (explicit) As a Café customer, I should be able to use −/+ on each deal card to change quantity and see the subtotal update on the card, with quantity never going below 1.

• Acceptance: + increments quantity and updates subtotal = quantity × deal price; − decrements but stops at 1; subtotal is displayed on the card.

FR-9 — Filter bar with smooth transitions and active state (explicit) As a Café customer, I should be able to filter the grid with All | Under Rs. 1,000 | Rs. 1,000–Rs. 2,500 | Rs. 2,500–Rs. 5,000 | Most Popular, with non-matching cards hiding gracefully via fade/slide, matching cards remaining visible, and the active filter clearly highlighted in the golden/red accent.

• Acceptance: each filter shows exactly the matching deals (price bands by deal price; Most Popular shows Deal 9); transitions are smooth; active filter is visually distinct.

FR-10 — Scroll entrance and hover animation (explicit) As a Café customer, I should see cards animate into view on scroll with a fade-up and slight per-card delay stagger, and on hover see a subtle lift (translateY), golden border glow, and slight background lightening consistent with existing card hover patterns.

• Acceptance: cards fade up with stagger as they enter the viewport; hover applies lift, golden glow, and lightening.

FR-11 — Responsive grid and section heading (explicit) As a Café customer, I should see the deals in a responsive CSS grid — 3 columns on desktop, 2 on tablet, 1 on mobile — under a section heading styled to match existing section headers (e.g., "OUR DEALS" with decorative underline accent).

• Acceptance: column counts match at desktop/tablet/mobile breakpoints; heading matches existing section-header styling.

FR-12 — Code standards (explicit) As a developer, I should get vanilla HTML/CSS/JS only (no external libraries unless already present), all CSS scoped with .deals-section, modular JavaScript using dealsData as the data source with dynamically rendered cards, no inline styles, and comments on each major block (filter logic, card render function, modal/expand handler, quantity logic).

• Acceptance: no new external libraries; scoped CSS; dealsData-driven rendering; no inline styles; the four named blocks are commented.

4. User Personas

Café customer

Product context. A visitor to the Unique Café single-page site — a family or student in Pakistan deciding what to order from the café's pizzas, zinger burgers, shawarmas, fries, wings, nuggets, pound cakes and drinks. They arrive anonymously; there is no account, login, or protected state in this product.

Primary goal. Compare the 15 combo deals by price, included items, and savings versus buying items individually, then settle on a quantity and see the subtotal before choosing a deal.

Distinct accepted responsibilities.

• Scan the full deal board and read each deal's number, PKR price, and itemized contents.
• Notice the "Popular" and "Best Value" badges to shortlist recommended deals.
• Read each card's savings versus individual item pricing.
• Filter the grid by price band or popularity to narrow the board.
• Expand a deal to review its full breakdown with crossed-out individual prices and highlighted total savings.
• Set a quantity (minimum 1) and read the resulting subtotal on the card.

Relevant inputs or decisions. Which filter to apply; which deal to expand; how many of a deal to consider. All prices are in PKR.

Interactions with other accepted participants. The Café customer is the only active human participant; the browser runtime renders cards and applies filter, expand, quantity, and animation logic on their behalf. No other human participant is affected by these interactions.

Observable success. The customer sees all 15 deals, can narrow them with a filter, can open any deal's detail with crossed-out individual prices and highlighted savings, and can set a quantity with a correct subtotal that never drops below 1.

5. Core User Flows

Flow A — Browse the full deal board

1. The Café customer opens the Unique Café single-page site and scrolls to the Deals section (Landing → Deals).
2. The browser renders all 15 cards from dealsData, each with its deal-number badge, large PKR price, itemized list, savings figure, and quantity control.
3. The customer reads the board; Deal 9 shows "Popular" and Deals 12 and 13 show "Best Value".
4. As cards enter the viewport they fade up with a slight per-card stagger.
5. Next step: the customer filters, expands, or sets a quantity.

Flow B — Filter the deals

1. From the Deals section, the customer selects a filter: All, Under Rs. 1,000, Rs. 1,000–Rs. 2,500, Rs. 2,500–Rs. 5,000, or Most Popular.
2. Non-matching cards hide with a smooth fade/slide; matching cards remain visible.
3. The active filter is clearly highlighted in the golden/red accent.
4. If a filter matches no cards, the grid shows none and the active filter stays selected; the customer switches back to All to recover.
5. Next step: the customer expands a matching deal or sets a quantity.

Flow C — Expand a deal for the full breakdown

1. The customer clicks a deal card.
2. The card expands (inline accordion or modal) with a smooth open/close animation, showing the full deal breakdown, individual item prices crossed out, and total savings highlighted.
3. The customer reviews the breakdown and closes the expansion (or clicks again) to collapse it.
4. Next step: the customer sets a quantity or moves to another deal.

Flow D — Set quantity and read the subtotal

1. On a deal card, the customer presses + to increase quantity; the subtotal on the card updates to quantity × deal price.
2. The customer presses − to decrease quantity; at quantity 1 the − control does not go lower.
3. The customer reads the updated subtotal on the card.
4. Next step: the customer compares another deal or settles on their choice.

6. Visuals Colors and Theme

The creative direction is authoritative: thick-stroke deal badges after Aaron Draplin — a diner price board built like a Field Notes cover. The emotional register is hearty, honest, value-driven, and a little loud: a big number and a badge you can trust, not a luxury experience. Shape, type, and component language come from Draplin's thick-stroke badges, ruled panels, workwear colour blocking, and plain-spoken all-caps labels; the palette stays the brief's dark premium ground with deep red, golden, and orange accents.

Colour tokens (dark mode)

• Background: #14100D (espresso-black ground)
• Surface: #211A15 (warm kraft-dark card)
• Text: #F4EAD8 (warm cream)
• Primary: #E8A317 (golden — deal badges, active filter pill, focus rings, large PKR prices)
• Accent: #C8341F (deep red — savings, ribbons, hover glow)
• Muted: #9C8B76 (itemized lines, crossed-out original prices)
• Hairline rule: #3A2E24
• Proportion: ~70% dark ground, ~20% golden rules and badges, ~10% red accents. Body text on surface stays above 7:1 contrast.

Typography

• Headings: Alfa Slab One — only for the section heading "OUR DEALS" and the giant PKR prices; all-caps, ultra-slab, tight tracking (-0.01em), with a golden 6px underline bar offset 12px left of the word.
• UI/labels: Oswald medium/semibold, all-caps, 0.08em letterspacing — deal badges, filter labels, item lists, quantity controls. Oswald regular for short descriptive copy.
• Scale: 1.25 modular for UI, with a deliberate 1.8 jump at the price. Section heading clamp(40px, 9vw, 96px); deal card price clamp(40px, 6.5vw, 64px); badge/label 12–14px caps; item lines 15–17px; savings line 13px caps. Line-height 1.0 on display, 1.5 on item lists.

Shape language

• Hard edges and thick strokes: 3px solid borders on every card; 6px golden rule under the section heading; 2px hairline rules between itemized lines; square 0-radius badges and filter pills (4px max); offset hard shadows 4px 4px 0 instead of blur.
• Ribbons ("Popular", "Best Value") are rotated 90° stamp rectangles pinned to the card's top-right corner with a 2px notch cut — never rounded chips.

Layout

• Strict 3-column CSS grid on desktop, 2 on tablet, 1 on mobile, 24px gutters, cards sharing a common baseline: badge row, price block, ruled item list, savings strip, quantity + subtotal footer.
• Filter bar is a single horizontal ruled strip of square pills separated by 1px dividers, scrolling horizontally at 375px.
• Section heading sits flush-left with an oversized numeral "15 DEALS" in Alfa Slab One at the far right of the same row on desktop, stacked beneath on mobile.

Imagery

• No photography in the deals grid — type and badges are the image. Supporting texture only: a faint 1px diagonal hatch on the section ground, halftone-dot corner marks, and thick-line vector icons (pizza slice, burger, cup, fries) at 20px with 2.5px golden strokes used as item bullets instead of generic dots.

7. Signature Design Concept

The Deals section opens as a full-width poster band: "OUR DEALS" set in Alfa Slab One at clamp(40px, 9vw, 96px) flush-left, with a solid golden #E8A317 block 32px tall running edge-to-edge beneath it and the numeral "15" knocked out of that block in espresso black. To the right on desktop (stacked below on mobile) sits a red #C8341F "BUNDLE & SAVE" stamp rotated -4° with a 3px cream border. Beneath the band, the square filter strip sits on its own ruled line, and Deal 1's card is already half-visible above the fold so the grid reads as a continuous board rather than a centred SaaS hero.

Signature moves carried through every card:

• Deal number as a stamped field badge: square, 3px golden border, espresso fill, Oswald caps at 13px with "DEAL" small and the numeral in Alfa Slab One at 28px inside the same badge.
• The PKR price is the largest element on every card: Alfa Slab One at clamp(40px, 6.5vw, 64px) in golden, with "Rs." set small in Oswald caps superscripted to its left and the crossed-out individual total in muted 13px directly beneath.
• Itemized lists as a ruled ledger: thick-line golden vector icons (2.5px stroke pizza/burger/cup/fries) as bullets; each line separated by a 1px #3A2E24 hairline with the item name left and its individual price right-aligned in Oswald tabular caps.
• "Popular" and "Best Value" as rotated stamp ribbons pinned to the card's top-right corner in deep red #C8341F with a 2px cream border and a hard 4px offset shadow — never a pill chip.
• Filter bar as a single ruled strip of square pills divided by 1px vertical rules; the active pill inverts to solid golden with espresso text and a 3px red underline; the strip becomes horizontally scrollable at 375px with each pill fully reachable.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the "OUR DEALS" poster band with its golden block and knocked-out "15", plus the rotated "BUNDLE & SAVE" stamp.
• Input → transformation → outcome thesis: as the customer scrolls into the Deals section, the poster band and filter strip settle into place and the deal cards stamp in one after another — a 180ms fade-up with a 60ms per-card stagger — so the board assembles like a price board being posted, using only the accepted card-entrance behavior.
• Motion vocabulary: sturdy and mechanical — fade-up stamps, no bounces, no spring physics, no parallax. Hover lifts cards translateY(-4px) with a 3px golden border and a 4px → 8px hard-shadow growth. Filter changes fade non-matching cards to 0 over 160ms and slide matching cards up 8px.
• Composed first frame: the poster band flush-left with the golden block and "15" knocked out, the "BUNDLE & SAVE" stamp rotated -4° at right, the ruled filter strip beneath, and Deal 1's card half-visible above the fold.
• Reduced-motion state: with prefers-reduced-motion, cards appear in their final positions without fade-up or stagger, hover lift is suppressed, filter changes swap instantly, and the filter strip wraps or scrolls so every pill is fully reachable.

9. Non-Functional Requirements

• NFR-1 — No recreation of existing parts (explicit). The menu cards, PKR pricing display, sticky navbar, interactive section patterns, and existing dark premium theme must not be recreated. Rationale: the previous generation already built them; the task is only the Deals section completion.
• NFR-2 — Style isolation (explicit). All CSS must be scoped with the .deals-section parent class to prevent conflicts with existing CSS.
• NFR-3 — No inline styles (explicit). All styling via scoped CSS classes.
• NFR-4 — Vanilla stack (explicit). Vanilla HTML/CSS/JS only — no external libraries unless already present in the existing page.
• NFR-5 — Modular JavaScript (explicit). dealsData is the single data source; cards render dynamically; filter logic, card render function, modal/expand handler, and quantity logic are each commented as major blocks.
• NFR-6 — Quantity floor (explicit). Quantity minimum is 1 on every deal card.
• NFR-7 — Currency (explicit). All prices are in PKR.
• NFR-8 — Savings derivation (explicit). Savings must be derived from realistic individual item prices based on the menu data already established on the page.
• NFR-9 — Responsive readability (required_inference). Headlines, labels, prices, item lines, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling via clamp(...) to fit; no element covers readable text or controls. Rationale: the direction's fixed type scale and 3/2/1 grid require the price and badge text to remain whole at every breakpoint.
• NFR-10 — Reduced motion (required_inference). With prefers-reduced-motion, provide a usable static arrangement: no fade-up/stagger, no hover lift, instant filter swaps, and the filter strip wraps or scrolls so every pill is fully reachable. Rationale: the accepted scroll and filter animations must not block access to content for motion-sensitive customers.

10. Tech Stack

• HTML5 — the single self-contained Deals section block, inserted at the continuation point with a clear comment.
• CSS3 — scoped under .deals-section; responsive CSS Grid (3/2/1 columns); hard shadows, thick borders, square badges; clamp() type scale; prefers-reduced-motion handling.
• Vanilla JavaScript — dealsData array, dynamic card rendering, filter logic, modal/expand handler, quantity logic, scroll-triggered entrance animation.
• Fonts — Alfa Slab One (headings and PKR prices) and Oswald (UI, labels, item lists), as specified by the creative direction.
• No external libraries beyond what the existing page already includes. No backend, database, or build tooling is required by this section.

11. Assumptions and Constraints

Constraints (binding)

• Do not recreate anything already built on the page (menu cards, PKR pricing display, sticky navbar, interactive section patterns, existing theme).
• Deliver only the Deals section completion as a single self-contained HTML/CSS/JS block, with a clear comment marking the continuation point.
• All CSS must be scoped with the .deals-section parent class.
• No inline styles; all styling via scoped CSS classes.
• Vanilla HTML/CSS/JS only — no external libraries unless already present in the existing page.
• Quantity minimum is 1.
• All prices are in PKR.
• Savings must be derived from realistic individual item prices based on the menu data already established on the page.

Assumptions (narrow, labeled)

• A-1 (required_inference) The individual item prices used for savings come from the menu data already established on the page; where the page's menu does not state a price for a component, a realistic individual price consistent with the menu's PKR pricing is used. Savings = sum of individual item prices − deal price.
• A-2 (required_inference) The "Most Popular" filter shows Deal 9, the deal carrying the "Popular" badge.
• A-3 (required_inference) Price-band filters match on the deal's total PKR price: Under Rs. 1,000 (Deals 1–5), Rs. 1,000–Rs. 2,500 (Deals 6–10), Rs. 2,500–Rs. 5,000 (Deals 11–15).
• A-4 (required_inference) Quantity and subtotal are display-only per-card state; they are not persisted or turned into an order by this section.
• A-5 (required_inference) The Deals section is public and anonymous; no account, login, or protected state is introduced.

12. Glossary

• Deals section — the part of the Unique Café single-page site this project completes, scoped under .deals-section.
• dealsData — the JavaScript array that is the single data source for all 15 deal cards.
• Deal card — one card in the grid showing a deal's number badge, PKR price, itemized list, savings, and quantity control.
• Deal-number badge — the stamped square badge reading "DEAL" plus the numeral (e.g., "DEAL 1").
• Popular / Best Value ribbon — the rotated stamp ribbon on Deal 9 ("Popular") and Deals 12 and 13 ("Best Value").
• Savings — the difference between the sum of individual item prices and the deal price, shown on each card and highlighted in the expanded detail.
• Subtotal — quantity × deal price, displayed on the card and updated by the −/+ control.
• Filter bar — the ruled strip of square pills: All | Under Rs. 1,000 | Rs. 1,000–Rs. 2,500 | Rs. 2,500–Rs. 5,000 | Most Popular.
• Expanded detail — the inline accordion or modal showing the full breakdown with crossed-out individual prices and highlighted total savings.
• PKR — Pakistani Rupee, the currency for all prices.