## Color Palette

## Typography

### Font Families

#### Primary Fonts
- **Inter** - Body text, primary sans-serif (weights: 300, 400, 500, 600)
- **Oswald** - Headlines, brand font, uppercase display text (weights: 400, 500, 600)

#### Extended Font Library (Available but not actively used)
The page loads 20+ Google Fonts for maximum flexibility:
- Sans-serif: Geist, Roboto, Montserrat, Poppins, Bricolage Grotesque, Plus Jakarta Sans, Manrope, Space Grotesk, Work Sans, DM Sans, Quicksand, Nunito, Google Sans Flex
- Serif: Playfair Display, Instrument Serif, Merriweather, PT Serif, Newsreader
- Monospace: Geist Mono, Space Mono

### Type Scale
- **7xl-8xl** (`4.5rem` - `6rem`) - Hero headlines ("PLAY WONDER")
- **4xl-5xl** (`2.25rem` - `3rem`) - Section headings
- **3xl-4xl** (`1.875rem` - `2.25rem`) - Card titles, subsection headings
- **2xl** (`1.5rem`) - Secondary headings
- **xl** (`1.25rem`) - Large body text
- **lg** (`1.125rem`) - Emphasized body text
- **base** (`1rem`) - Standard body text
- **sm** (`0.875rem`) - Small text, labels
- **xs** (`0.75rem`) - Micro copy, metadata

### Font Weights
- **Light (300)** - Subtle descriptive text
- **Regular (400)** - Body text
- **Medium (500)** - Emphasized text
- **Semibold (600)** - Strong emphasis
- **Bold (700)** - Headlines, CTAs

### Typography Utilities
- **Tracking**: `tracking-tighter` (-0.05em), `tracking-tight` (-0.025em), `tracking-wide` (0.025em), `tracking-wider` (0.05em), `tracking-widest` (0.1em)
- **Leading**: `leading-tight` (1.25), `leading-[1.1]`, `leading-[0.85]`, `leading-none` (1), `leading-relaxed` (1.625)
- **Transform**: `uppercase` for labels and category tags

## Layout System

### Grid Structure
The page uses a 12-column responsive grid:
- **Hero Section**: `lg:grid-cols-12` split into 4-8 columns (sidebar + main visual)
- **Content Sections**: `md:grid-cols-2`, `lg:grid-cols-3`, `lg:grid-cols-4`
- **Bento Grid**: Asymmetric layout with `col-span-1`, `col-span-2`, `row-span-2` variations

### Spacing Scale (Tailwind)
- **Small**: `gap-1` (0.25rem), `gap-2` (0.5rem), `gap-3` (0.75rem)
- **Medium**: `gap-4` (1rem), `gap-6` (1.5rem), `gap-8` (2rem)
- **Large**: `gap-12` (3rem), `gap-16` (4rem)
- **Padding**: Consistent use of `p-8`, `p-12`, `px-6`, `py-24` for sections

### Container
- **Max Width**: `max-w-7xl` (80rem) centered with `mx-auto`
- **Horizontal Padding**: `px-6` mobile, `lg:px-12` desktop

## Design Patterns

### Navigation
- **Hamburger Menu**: Minimalist top-left icon with dropdown
- **Dropdown Menu**: Rounded corners (`rounded-2xl`), shadow (`shadow-[0_8px_30px_rgb(0,0,0,0.12)]`), clean white card
- **Menu Items**: Hover states with `hover:bg-blue-50/50`, icon + text layout

### Cards & Components

### Buttons

#### Primary CTA
- Background: `bg-blue-700/50`, `hover:bg-blue-700`
- Shape: `rounded-full`, `px-6 py-3`
- Text: Uppercase, `tracking-wide`, white with arrow icon

#### Icon Buttons
- Shape: `rounded-full`, `w-10 h-10`
- Border: `border border-blue-400`
- Hover: `hover:bg-blue-500`

#### Secondary Links
- Style: Underlined text with `border-b`
- Hover: `hover:border-white`, `hover:opacity-75`

### Decorative Elements

#### Abstract Shapes
- **Blurred Blobs**: `blur-3xl`, `opacity-20`, `mix-blend-multiply`, animated
- **Background Patterns**: Radial gradient dots (`bg-[radial-gradient(circle,transparent_20%,#eff6ff_20%)]`)
- **Typography Overlay**: Giant "GAME" text with `mix-blend-multiply`, `opacity-10`

#### Borders & Dividers
- **Subtle Lines**: `h-0.5 w-12`, `h-px`, `w-px` for accent lines
- **Border Colors**: `border-gray-100`, `border-blue-500/20`, `border-white/30` (with transparency)

## Animations

### Keyframe Animations
```css
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blurIn { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
```

### Animation Classes
- **Fade In**: `animate-fade-in` - 0.8s ease-out
- **Slide In**: `animate-slide-in` - 0.8s cubic-bezier(0.16, 1, 0.3, 1)
- **Blur In**: `animate-blur-in` - 1s ease-out

### Delay Classes
- `delay-75` (75ms), `delay-100` (100ms), `delay-150` (150ms)
- `delay-200` (200ms), `delay-300` (300ms), `delay-500` (500ms), `delay-700` (700ms)

### Transition Effects
- **All Properties**: `transition-all duration-500 ease-out`
- **Colors**: `transition-colors`
- **Transform**: `transition-transform`
- **Opacity**: `transition-opacity`

### Hover Animations
- **Scale**: `hover:scale-110`, `group-hover:scale-105`
- **Translate**: `group-hover:translate-x-1`
- **Color Shift**: Text and background color changes on hover

## Visual Effects

### Shadows
- **Card Shadows**: `shadow-xl`, `shadow-2xl`
- **Custom Shadow**: `shadow-[0_8px_30px_rgb(0,0,0,0.12)]`
- **Inner Shadow**: `shadow-inner` for recessed elements

### Backdrop Effects
- **Blur**: `backdrop-blur-sm`, `backdrop-blur-md` for glass morphism
- **Background Opacity**: `bg-white/40`, `bg-white/50`, `bg-gray-200/30`

### Blend Modes
- **Multiply**: `mix-blend-multiply` for layered effects
- **Opacity Variations**: `opacity-10`, `opacity-20`, `opacity-50`, `opacity-80`

### Border Radius
- **Small**: `rounded-md` (0.375rem), `rounded-lg` (0.5rem), `rounded-xl` (0.75rem)
- **Large**: `rounded-2xl` (1rem), `rounded-3xl` (1.5rem)
- **Custom**: `rounded-[2.5rem]`, `rounded-[3rem]`
- **Full**: `rounded-full` for circles and pills

## Iconography

### Icon Library
**Lucide Icons** - Consistent stroke-based icon system
- Stroke width: `1.5`
- Common sizes: `w-4 h-4` (small), `w-5 h-5` (medium), `w-6 h-6` (large), `w-8 h-8` (XL)

### Icon Categories
- **Navigation**: menu, arrow-left, arrow-right, home
- **Gaming**: gamepad-2, zap, shapes, rocket, sword, shield
- **Shopping**: shopping-bag
- **UI**: settings, trophy, crown, layers

## Section Breakdowns

### 1. Hero Section
- **Layout**: Split-screen (4-8 column grid)
- **Left**: White sidebar with navigation, headline, category selector
- **Right**: Slate-50 background with abstract shapes and background image
- **Typography Overlay**: Massive "GAME" text at `text-[40rem]`
- **Animation**: Staggered fade-in and slide-in effects

### 2. Section 2 
- **Background**: `bg-blue-600`
- **Container**: `bg-blue-700`, rounded top corners
- **Layout**: Asymmetric grid - 1 large (2x2), 4 medium (1x1)
- **Featured Card**: gradient background, icon, title, CTA
- **Image Cards**: Full-bleed background images with text overlay

### 3. Featured Categories
- **Background**: `bg-gray-700` with animated gradient blobs
- **Cards**: Icon + text, hover scale effect
- **Decorative**: Purple and blue blurred circles with `mix-blend-multiply`

### 4. Section 4
- **Layout**: 1-3 column split (text + logo grid)
- **Logo Grid**: 4x2 grid with borders, hover states
- **Style**: Icons as placeholder logos, consistent spacing with gaps

### 5. Section 5
- **Layout**: 2-column (image + text)
- **Left**: Postage stamp effect with radial gradient pattern
- **Right**: `bg-blue-700` with metadata, title, navigation dots

## Responsive Behavior

### Breakpoints
- **Mobile**: Default styles (< 768px)
- **Tablet**: `md:` prefix (≥ 768px)
- **Desktop**: `lg:` prefix (≥ 1024px)

### Mobile Adaptations
- Single column layouts (`grid-cols-1`)
- Smaller padding (`p-8` → `lg:p-12`)
- Reduced text sizes (`text-7xl` → `lg:text-8xl`)
- Stacked flex layouts (`flex-col` → `md:flex-row`)

## Accessibility Features

### Text Contrast
- White text on blue 600+ backgrounds
- Dark slate text on white/light backgrounds
- Semi-transparent overlays on images ensure readability

### Interactive Elements
- Focus states: `focus:outline-none focus:ring-2 focus:ring-blue-100`
- Cursor indicators: `cursor-pointer` on interactive elements
- Clear hover states with color/opacity changes

### Selection Styling
```css
selection:bg-pink-500 selection:text-white
```

## Design Philosophy

The design follows modern web trends:
1. **Bold Typography**: Large, tight headlines with uppercase treatments
2. **Vibrant Colors**: Saturated blues and oranges with high contrast
3. **Smooth Animations**: Subtle entrance effects and hover states
4. **Card-Based Layout**: Bento grid asymmetry creates visual interest
5. **Glass Morphism**: Backdrop blur and transparency effects
6. **3D Touches**: Phone mockup rotation, layered shadows
7. **Minimalist UI**: Clean icons, simple buttons, generous whitespace

## Technical Implementation

- **Framework**: Astro with Tailwind CSS
- **CDN Resources**: Tailwind CDN, Google Fonts CDN, Lucide icons CDN
- **Image Hosting**: Supabase storage for background images
- **Optimization**: AVIF/WebP images, lazy loading implied
- **Responsive Images**: Multiple resolutions (800w, 1600w)