libra/docs/stories/story-13.3-background-pattern.md

# 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

- [x] Design/select pattern style (geometric vs botanical)
- [x] Create SVG pattern file
- [x] Optimize SVG for file size
- [x] Add pattern to auth layout CSS
- [x] Test pattern visibility at various screen sizes
- [x] Verify text readability over pattern
- [x] Test in both Arabic and English
- [x] Verify no horizontal scroll issues
- [x] 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

---

## Dev Agent Record

### Agent Model Used
- Claude Opus 4.5

### File List

| File | Action | Description |
|------|--------|-------------|
| `public/images/auth-pattern.svg` | Created | Geometric dot pattern SVG using Warm Gold at 6% opacity (138 bytes) |
| `resources/css/app.css` | Modified | Added `.auth-pattern` CSS class with pseudo-element overlay |
| `resources/views/components/layouts/auth/split.blade.php` | Modified | Applied `auth-pattern` class to form panel |
| `tests/Feature/Auth/AuthBackgroundPatternTest.php` | Created | 12 tests covering pattern asset, CSS, and layout integration |

### Change Log

- **AC1**: Created `auth-pattern.svg` - geometric dot pattern with Warm Gold (#A68966) at 6% opacity, 20x20px tiles, 138 bytes
- **AC2**: Applied pattern to auth split layout form panel via `auth-pattern` class
- **AC3**: Pattern opacity set to 6% (within 5-8% range) - subtle and non-distracting
- **AC4**: Implemented using CSS pseudo-element overlay with `background-repeat: repeat` and `pointer-events: none`
- **AC5**: SVG is only 138 bytes (well under 5KB), loads efficiently, works without JavaScript
- **AC6**: Pattern uses `repeat` for seamless scaling, no horizontal scroll issues

### Completion Notes

- Used Option A (Geometric) as recommended - simple dot pattern for clean, modern aesthetic
- Used Option 2 (Pseudo-element Overlay) for better control and accessibility
- All 12 new tests pass
- All 45 auth tests pass
- All 20 RTL/LTR layout tests pass

### Status
Ready for Review