# Partner Auth Pages Design System

**Last Updated:** 2026-02-24

Design system and consistency requirements for Ordio Loop partner authentication pages: login, register, and reset-password.

## Overview

Partner auth pages use a shared design system to ensure brand consistency across the authentication flow. All pages use ordio-blue (#4D8EF3) as the primary color—no purple or violet.

## Pages

| Page | URL | Purpose |
|------|-----|---------|
| Login | `/partner/login` | Partner sign-in |
| Register | `/partner/register` | New partner registration |
| Reset Password | `/partner/reset-password` | Request and confirm password reset |

## Shared CSS

**File:** `v2/css/affiliate-auth.css` (minified: `affiliate-auth.min.css`)

Loaded via `affiliate-head.php` for all affiliate pages. Auth-specific styles are scoped to `.auth-*` classes.

### Design Tokens (from affiliate-shared.css)

- `--ordio-blue`: #4D8EF3
- `--ordio-blue-dark`: #286bcd
- Gray scale: `--gray-50` through `--gray-900`

### Key Classes

| Class | Purpose |
|-------|---------|
| `auth-page-body` | Page background (gradient), layout |
| `auth-container` | Centered container |
| `auth-card` | White card with shadow, rounded corners |
| `auth-back-link` | "← Zurück zur Partner-Seite" link |
| `auth-form-input` | Form input styling |
| `auth-form-label` | Form label styling |
| `auth-btn-primary` | Primary CTA button |
| `auth-btn-google` | Google OAuth button (white, bordered) |
| `auth-divider` | "oder" divider between OAuth and email form |
| `auth-link` | Ordio-blue link |
| `auth-split-wrapper` | Split layout (login form + enticement) |
| `auth-split-form` | Left panel (form) |
| `auth-split-enticement` | Right panel (benefits, CTA) |
| `partner-stats-carousel` | Stats carousel in enticement panel |

## Layout Patterns

### Login Page

- **Desktop (≥1024px):** Split layout—form left, enticement panel right
- **Mobile:** Stacked—form first, enticement below
- **OAuth:** "Mit Google anmelden" button (when `isGoogleOAuthEnabled()`); divider "oder"; email/password form
- **Enticement:** Headline (AFFILIATE_PROGRAM_CLAIM), 3 benefit bullets, **stats carousel** (below checklist), "Jetzt registrieren" CTA, "Mehr erfahren" link

### Stats Carousel (Login Page)

- **Location:** Enticement panel, between headline and benefit list
- **Component:** `v2/includes/partner-stats-carousel.php`
- **Data:** `v2/data/partner-stats.php` (8 stats, German copy)
- **Behavior:** Auto-rotates every 5.5s; pauses on hover/focus; respects `prefers-reduced-motion`
- **Dependencies:** Alpine.js (enabled via `$alpineJs = 'true'` in partner-login.php)
- **Validation:** Run `python3 v2/scripts/dev-helpers/validate-partner-stats.py` to verify calculator-derived stats

### Register Page

- Single centered card
- Badge, headline, claim, intro paragraph
- **OAuth:** "Mit Google registrieren" button (when enabled); divider "oder"
- Form with name, email, password, terms checkbox

### Reset Password Page

- Single centered card
- Request form: email input, "Reset-Link senden"
- Confirm form: new password, confirm, "Mindestens 8 Zeichen" hint

## Required Elements (All Pages)

- **Back link:** "← Zurück zur Partner-Seite" → `/partner`
- **Logo:** Ordio logo linking to `/partner` (login, reset)
- **Primary color:** #4D8EF3 (ordio-blue) for buttons, links, focus states
- **Background:** Gradient `#f0f7ff` → `#e8f0fe` → `#f8fafc`
- **Font:** Inter

## Stats Carousel Sources

Stats in `v2/data/partner-stats.php` use these sources:

- **calculator:** Verified against partner-income-calculator-loop.php (1 Kunde, 20%, €149×3)
- **calculator_generous:** Realistic optimistic (25 Kunden, 4 Standorte, €160 → ~€57K)
- **industry:** Affiliate benchmarks 2026 (Impact.com, Rewardful)
- **internal:** Verify with sales data (e.g. 50% deal close rate)

Run `python3 v2/scripts/dev-helpers/validate-partner-stats.py` before updating calculator-derived stats.

## Pre-Deployment Checklist

- [ ] Visual review: all three pages use ordio-blue, no purple
- [ ] Links: back, forgot password, register, login work correctly
- [ ] Responsive: test at 320px, 768px, 1024px
- [ ] Accessibility: labels, focus states, contrast
- [ ] Run `npm run minify` after editing affiliate-auth.css

## Related Documentation

- [OAUTH_SOCIAL_LOGIN.md](OAUTH_SOCIAL_LOGIN.md) – Google OAuth setup and callback flow
- [PARTNER_GUIDE.md](PARTNER_GUIDE.md)
- [affiliate-dashboard.mdc](../../../.cursor/rules/affiliate-dashboard.mdc) – Partner Auth Pages subsection