# Rafif Hotel — Frontend Design System

## Brand Identity

Rafif Hotel blends **modern hospitality** with a subtle **Ancient Egypt** theme. The visual language uses deep navy and midnight backgrounds as the primary stage, warm gold and sand as accent colours, and Nile teal as a supporting accent. Hieroglyphic characters (Unicode Egyptian Hieroglyphs block) appear as purely decorative elements in section headings, the footer, and hero overlays.

---

## Colour Palette

### Public Site (`styles.css`)

| Token | Hex | Role |
|---|---|---|
| `--navy` | `#1e3a8a` | Primary brand colour — links, badges, nav active |
| `--navy-dark` | `#0b1f45` | Headings, strong text |
| `--blue` | `#3b82f6` | Input focus ring |
| `--gold` | `#ca8a04` | Primary CTA buttons, stars, eyebrow labels, accents |
| `--gold-dark` | `#9a6a03` | Gold hover state |
| `--bg` | `#f8fafc` | Page background base |
| `--surface` | `#ffffff` | Cards, panels, modals |
| `--text` | `#13213a` | Body copy |
| `--muted` | `#5f6f87` | Secondary text, captions, placeholders |
| `--line` | `#dbe3ee` | Borders, dividers |
| `--shadow` | `0 22px 60px rgba(10,28,61,.13)` | Elevation shadow |
| `--nile` | `#0f5d6d` | Teal accent (hero overlays, decorative gradients) |
| `--sand` | `#d8b56d` | Warm gold text on dark backgrounds (footer, CTA) |
| `--papyrus` | `#fff8e8` | Warm off-white tint |
| `--clay` | `#8a4f2a` | Deep terracotta (used in radial gradients) |

**Dark surfaces used in:** hero overlay, CTA banner, footer, page-hero overlay
- Midnight: `#0c1525` (CTA bg, footer bg)
- Deep navy: `#071631` (page-hero bg, admin sidebar)
- Admin sidebar: `#0f1117`

**Semantic colours:**
- Success: `#047857` (green) / `#dcfce7` bg + `#166534` text (badge)
- Error: `#b91c1c` / `#fef2f2` bg + `#fecaca` border
- Warning (badge): `#fef3c7` bg + `#92400e` text

### Admin Dashboard (`admin.css`)

| Token | Hex | Role |
|---|---|---|
| `--al-gold` | `#92734A` | Primary action colour (muted, professional) |
| `--al-gold-light` | `#b8945f` | Gold hover |
| `--al-dark` | `#1a1a2e` | Text, headings |
| `--al-sidebar` | `#0f1117` | Sidebar background |
| `--al-surface` | `#ffffff` | Card / panel background |
| `--al-bg` | `#f4f5f7` | Page background |
| `--al-border` | `#e0e4eb` | All borders |
| `--al-text` | `#1a1a2e` | Body text |
| `--al-muted` | `#6b7280` | Secondary text |
| `--al-danger` | `#dc2626` | Destructive actions |
| `--al-success` | `#16a34a` | Positive feedback |
| `--al-warning` | `#d97706` | Warning state |

---

## Typography

### Typefaces

| Face | Source | Usage |
|---|---|---|
| **Cormorant** | Google Fonts (wght 500–700) | All headings (`h1`, `h2`, `h3`) on the public site |
| **Montserrat** | Google Fonts (wght 400–700) | All body text, UI labels, navigation, admin dashboard |
| System fallback | `system-ui, sans-serif` | Fallback for both |
| **Segoe UI Historic** / **Noto Sans Egyptian Hieroglyphs** | System / Google | Decorative hieroglyphic characters only |

### Type Scale (public site)

| Element | Size | Weight | Font | Line-height |
|---|---|---|---|---|
| `h1` | `clamp(48px, 8vw, 96px)` | 500–700 | Cormorant | 1.04 |
| `h2` | `clamp(34px, 5vw, 56px)` | 500–700 | Cormorant | 1.04 |
| `h3` | `30px` | 500–700 | Cormorant | 1.04 |
| Body | 16px (browser default) | 400 | Montserrat | 1.65 |
| Eyebrow label | `13px` | 800 | Montserrat | — |
| Nav links | `14px` | 700 | Montserrat | — |
| Meta / captions | `13px` | 700 | Montserrat | — |
| Price | `28px` | bold | Cormorant | — |

**Eyebrow labels** — uppercase, `letter-spacing: .14em`, colour `--gold`. Used above section headings as category markers (e.g. "Welcome", "Location", "Stay Rhythm").

### Type Scale (admin dashboard)

- Page titles (`h1`): `26px / 700 / Montserrat`
- Card headings: `15px / 600 / Montserrat`
- Table headers: `12px / 700 / uppercase / letter-spacing .05em`
- Body/labels: `13–14px / 500–600 / Montserrat`
- Badge text: `11px / 700 / uppercase / letter-spacing .04em`

---

## Spacing & Layout

### Grid breakpoints

| Breakpoint | Behaviour |
|---|---|
| > 1100px | Full multi-column layout |
| ≤ 1100px | Two-column grids collapse to single column; facility/gallery grids go 2-col |
| ≤ 900px | `.about-strip` collapses to 1 col |
| ≤ 760px | Single-column everything; mobile nav activated; hero full-height |
| ≤ 380px | Minor padding and image height reductions |

### Core spacing units

- Section vertical padding: `86px` desktop → `58px` mobile (`padding: 86px max(24px, 6vw)`)
- Horizontal page gutter: `max(24px, 6vw)` — fluid, minimum 24px
- Card internal padding: `20–28px`
- Gap between grid columns: `14–54px` depending on context
- Standard gap between related elements: `8–16px`

### Layout grids used

| Grid | Template |
|---|---|
| Hero (home) | `1fr 390px` (content + quick-book form) |
| Two-col sections | `1fr minmax(300px, 460px)` |
| Room grid | `repeat(3, 1fr)` |
| Facility grid | `repeat(4, 1fr)` |
| Gallery preview | `1.3fr 1fr 1fr` (first image spans 2 rows) |
| Gallery editorial | `repeat(4, 1fr)`, `grid-auto-flow: dense`; item 1 and 8 span 2×2 |
| Review grid | `repeat(3, 1fr)` |
| Room detail | `1.15fr minmax(360px, .85fr)` |
| Contact | `1fr minmax(330px, 430px)` |
| Footer | `1.2fr 1fr 1fr` |
| Admin shell | Sidebar fixed `220px` + `flex: 1` main |

---

## Elevation & Depth

Three levels of elevation are used:

| Level | Shadow value | Usage |
|---|---|---|
| Low | `0 12px 32px rgba(10,28,61,.06)` | Room cards (resting), gallery cards |
| Medium | `0 22px 60px rgba(10,28,61,.13)` (`--shadow`) | Header, booking panel, detail panel, modals |
| High | `0 24px 60px rgba(0,0,0,.25)` | Admin login card |

On hover, cards lift to `--shadow` and shift `translateY(-4px)` to `translateY(-5px)`.

---

## Components

### Button

Three variants defined on `.btn`:

| Variant | Background | Border | Text | Hover |
|---|---|---|---|---|
| Default (gold filled) | `--gold` (`#ca8a04`) | `--gold` | `#fff` | `--gold-dark`, glow shadow |
| `.ghost` | `rgba(255,255,255,.08)` | `rgba(255,255,255,.6)` | `#fff` | White fill, navy text |
| `.ghost-dark` | `#fff` | `--line` | `--navy` | Navy border, shadow |
| `.small` | Same as default | — | — | `min-height: 40px; font-size: 13px` |

All buttons: `min-height: 48px`, `border-radius: 8px`, `font-weight: 800`, `gap: 8px` (for icon + label), transition `0.2s ease` on background/shadow/transform.

### Card

All content cards share:
- `border: 1px solid rgba(216,181,109,.28)` (subtle gold tint on public site)
- `border-radius: 8px`
- `background: #fff`
- `box-shadow: 0 12px 32px rgba(10,28,61,.06)` at rest

Room cards additionally have a `4:3` image at the top (`object-fit: cover`), an image scale effect on hover, and a `.pill` badge showing the room type.

### Pill / Badge

`.pill` — Inline rounded label: `background: #edf4ff`, `color: var(--navy)`, `border-radius: 999px`, `font-size: 12px`, `font-weight: 800`.

Admin badges (`.al-badge`):

| State | Background | Text |
|---|---|---|
| `available` | `#dcfce7` | `#15803d` |
| `reserved` | `#fef3c7` | `#92400e` |
| `blocked` | `#fee2e2` | `#991b1b` |

### Form inputs

- Border: `1px solid var(--line)` at rest
- Hover: border `rgba(30,58,138,.32)`, subtle shadow
- Focus: border `--blue`, `box-shadow: 0 0 0 3px rgba(59,130,246,.16)`
- `min-height: 44px`, `border-radius: 8px`, `padding: 10px 12px`
- Labels: `font-weight: 800`, `font-size: 13px`, `color: var(--navy-dark)`, `display: grid; gap: 7px`

Admin inputs focus with `--al-gold` border + `rgba(146,115,74,.12)` ring.

### Header (`.site-header`)

- Fixed, floating: `top/left/right: 16px`
- `background: rgba(255,255,255,.92)`, `backdrop-filter: blur(16px)`
- `border: 1px solid rgba(216,181,109,.52)` (gold-tinted)
- `border-radius: 8px`
- `min-height: 70px`
- Active/hover nav links: `background: #edf4ff`, `color: var(--navy)`

### Hero

- Full-bleed, `min-height: 94vh`
- Background: full-cover photo with `animation: heroDrift 13s ease-in-out infinite alternate` (subtle 5.5% scale drift)
- On load: `heroImageIn` (scale from 1.04→1 + fade in, 900ms)
- Overlay shade: two radial gradients (gold + navy) + horizontal linear gradient darkening left side
- Text content animates in: `contentRise` (translateY 18px → 0, opacity 0→1, 700ms)

### Page Hero (inner pages)

- `min-height: 56vh`
- Same photo + shade pattern
- Three `.egypt-symbols` (rotated diamond wireframes with inner borders, `opacity: .28`) positioned at `right: 10% top: 30%`, `right: 24% bottom: 18%`, `left: 6% bottom: 20%`

### Booking Modal

- Overlay: `rgba(0,0,0,.52)`, `z-index: 1000`
- Card: `border-radius: 14px`, `padding: 40px 36px`, `max-width: 420px`
- Input focus: `border-color: var(--gold)` (gold instead of blue)
- Close button top-right, colour `--muted` → `--navy` on hover

### CTA Banner

- `background: #0c1525` (midnight) with two radial gradients (clay + sand/gold)
- `border: 1px solid rgba(216,181,109,.22)`, top border `rgba(216,181,109,.48)`
- `border-radius: 12px`
- `::before` pseudo-element renders hieroglyphs in `rgba(216,181,109,.44)`
- Heading uses `--sand` colour; body text `rgba(139,172,200,.82)`

### Footer

- `background: #0c1525`
- Gold hairline top border (linear gradient: transparent → sand → gold → sand → transparent)
- `::before` pseudo renders hieroglyph decorative row with `rgba(216,181,109,.38)`
- Text colours: `#8bacc8` (links/body), `rgba(216,181,109,.65)` (section headings)

### Floating WhatsApp button

- `width/height: 58px`, `border-radius: 50%`
- `background: #128c7e` (WhatsApp green)
- Fixed `right: 22px`, `bottom: 22px`, `z-index: 18`
- On hover: `translateY(-5px) rotate(-4deg)`, green glow shadow

---

## Animations & Motion

| Name | Effect | Duration | Used on |
|---|---|---|---|
| `heroImageIn` | Scale 1.04→1 + opacity 0.5→1 | 900ms ease | Hero image on slide change |
| `heroDrift` | Scale 1→1.055 | 13s ease-in-out infinite alternate | Hero background (subtle parallax) |
| `contentRise` | translateY 18px→0 + opacity 0→1 | 700ms ease | Hero text content |
| Card hover lift | `translateY(-4px)` to `(-5px)` | 240ms ease | Room cards, review cards, facility tiles |
| Button hover | `translateY(-3px)` | Inherited transition | All `.btn`, `.icon-btn` |
| Image hover | `scale(1.035)` + `saturate(1.08) contrast(1.03)` | 500ms ease | Room card images, gallery images |
| Gallery editorial hover | `scale(1.04)` + `opacity: .86` | 450ms ease | Editorial gallery figures |
| Hero pagination active | `translateY(-2px)` | 0.2s | Slide dot buttons |

**Reduced motion:** All transitions and animations are disabled when `prefers-reduced-motion: reduce` is set.

**Hover interactions** are scoped to `@media (hover: hover) and (pointer: fine)` — touch devices get no hover transforms, which prevents stuck hover states on mobile.

---

## Ancient Egypt Identity Elements

These are purely cosmetic and non-interactive:

| Element | Implementation | Where |
|---|---|---|
| Hieroglyphic row | CSS `::before` with Unicode Egyptian Hieroglyphs (`\131F3`, `\13080`, etc.) | CTA banner, footer, section-heading `::before`, hero/page-hero `::after` |
| Heritage mark | An oval/pill-shaped border with a centred horizontal bar and two parallel bars via `box-shadow` | Hero (84×34px), page heroes (66×26px) |
| Egypt diamond symbols | Three rotated-45° bordered squares with inner concentric borders, `opacity: .28` | All inner page heroes |
| Gold gradient accents | `radial-gradient` at corners using `--sand` / `--gold` / `--clay` | Body `::before` (fixed, z=-1), hero shade, CTA bg, page-hero shade |
| Border tint | `rgba(216,181,109,.28)` on cards; `rgba(216,181,109,.52)` on header | All content cards and the site header |
| Glyph in headings | `::before` on room card `h3`, about-strip `h3` (`\133CF`); `::after` on facility grid large items (`\132B9`) | Room cards, feature sections |

---

## Admin Dashboard Design

The admin dashboard deliberately uses a **neutral, functional** palette — no gold gradients or Egyptian motifs — to visually distinguish it from the public site.

- **Sidebar:** `#0f1117` (near-black), fixed, `220px` wide
- **Page background:** `#f4f5f7` (light grey)
- **Cards/forms:** `#fff` with `1px solid #e0e4eb` border, `border-radius: 10px`
- **Active nav item:** Right-side `3px solid var(--al-gold)` indicator + `rgba(146,115,74,.25)` background
- **Primary action colour:** `--al-gold #92734A` (earthy, muted — more professional than public gold)
- **Table header row:** `#f8f9fb` background, uppercase grey labels
- **Table rows:** hover to `#fafbfc`; alternating border `#f0f2f5` (inner), `#e0e4eb` (outer wrap)

---

## Responsive Summary

| Viewport | Key changes |
|---|---|
| Mobile (≤ 760px) | Single column everywhere; mobile hamburger nav; hero `100vh`; section padding `58px 18px`; gallery editorial collapses to 1 col |
| Tablet (≤ 1100px) | Two-column grids; facility/gallery grids 2-col; admin sidebar goes horizontal |
| Desktop (> 1100px) | Full multi-column layouts; sticky room detail panel (`top: 112px`); 4-col editorial gallery |