# Story 13.3: Subtle Background Pattern Implementation

## Story

**As a** visitor to the authentication pages
**I want to** see a subtle, elegant background pattern on the form side
**So that** the page feels polished and professionally designed

## Acceptance Criteria

### AC1: Create SVG Pattern Asset

**Given** the need for a subtle background pattern
**When** the pattern is created
**Then**:
- SVG format for scalability and performance
- Uses brand color (Warm Gold #A68966) at 5-8% opacity
- Pattern type: Geometric or botanical (wheat/leaf motif)
- Seamlessly tileable
- File size under 5KB for performance

### AC2: Pattern Placement

**Given** the SVG pattern is created
**When** applied to the auth layout
**Then**:
- Pattern appears on the form side (right panel desktop, full background mobile)
- Pattern overlays the Warm Cream background
- Pattern is fixed/static (doesn't scroll with content)
- Pattern doesn't interfere with form readability

### AC3: Pattern Opacity

**Given** readability requirements
**When** the pattern is displayed
**Then**:
- Opacity is subtle (5-8%)
- Text remains clearly readable
- Pattern adds visual interest without distraction

### AC4: CSS Implementation

**Given** the pattern asset
**When** integrated into CSS
**Then**:
- Applied via `background-image` or pseudo-element
- Uses `background-repeat: repeat` for tiling
- Background is fixed or positioned appropriately
- Can be easily disabled if needed

### AC5: Performance Consideration

**Given** page load performance
**When** the pattern loads
**Then**:
- Pattern is inlined or loaded efficiently
- No noticeable delay in page rendering
- Pattern works without JavaScript

### AC6: Mobile Compatibility

**Given** mobile viewport
**When** pattern is displayed
**Then**:
- Pattern scales appropriately
- No horizontal scrolling caused by pattern
- Pattern remains subtle on smaller screens

## Technical Notes

### Pattern Options

**Option A: Geometric (Recommended)**
- Simple diagonal lines or dots
- Clean, modern aesthetic
- Easier to create and maintain

**Option B: Botanical**
- Wheat/leaf silhouettes
- Aligns with LIBRA brand identity
- More complex but more unique

### SVG Pattern Example (Geometric)
```svg
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
  <circle cx="2" cy="2" r="1" fill="#A68966" fill-opacity="0.06"/>
</svg>
```

### CSS Implementation Options

**Option 1: Inline SVG in CSS**
```css
.auth-pattern {
    background-image: url("data:image/svg+xml,...");
    background-repeat: repeat;
}
```

**Option 2: Pseudo-element Overlay**
```css
.auth-form-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/images/pattern.svg');
    background-repeat: repeat;
    opacity: 0.06;
    pointer-events: none;
}
```

**Option 3: Tailwind Arbitrary Value**
```html
<div class="bg-[url('/images/pattern.svg')]">
```

### Files to Create/Modify
- `public/images/auth-pattern.svg` (new) OR inline in CSS
- `resources/css/app.css` (if adding pattern class)
- `resources/views/components/layouts/auth/split.blade.php` (apply pattern)

### Pattern Design Guidelines
- Color: Warm Gold (#A68966)
- Opacity: 5-8% (0.05-0.08)
- Size: 20-40px tiles for subtle effect
- Style: Minimalist, professional

## Dev Checklist

- [ ] Design/select pattern style (geometric vs botanical)
- [ ] Create SVG pattern file
- [ ] Optimize SVG for file size
- [ ] Add pattern to auth layout CSS
- [ ] Test pattern visibility at various screen sizes
- [ ] Verify text readability over pattern
- [ ] Test in both Arabic and English
- [ ] Verify no horizontal scroll issues
- [ ] Check pattern on high-DPI displays

## Estimation

**Complexity:** Medium
**Risk:** Low - Decorative enhancement only

## Dependencies

- Story 13.2 (Auth Split Layout) - Must be completed first
