# Standalone Architecture - Ordio Loop Affiliate Partner System
**Last Updated:** 2026-01-30
Complete documentation of the standalone architecture decision and implementation for the Ordio Loop affiliate partner system.
## Overview
The affiliate partner system is completely separated from the main marketing website, functioning as its own standalone product. This architectural decision provides significant benefits in terms of maintainability, performance, and code clarity.
## Why Standalone Architecture?
### Benefits
1. **Separation of Concerns**
- Partner system is independent from marketing site
- Changes to marketing site don't affect partner pages
- Clear boundaries between systems
2. **Performance**
- No unnecessary scripts/styles loading
- Faster page load times
- Reduced bundle sizes
3. **Maintainability**
- Easier to update partner system without affecting main site
- No conflicts between marketing and partner code
- Cleaner codebase
4. **Security**
- No tracking scripts in partner dashboard
- Reduced attack surface
- Better privacy for partners
5. **Future-Proof**
- Can evolve independently
- Easier to migrate or refactor
- Clear upgrade paths
## Architecture Components
### Standalone Head Section
**File:** `v2/base/affiliate-head.php`
The standalone head section includes only what's necessary for partner pages:
**Included:**
- Essential meta tags (charset, viewport, robots)
- Favicon links
- Font preloads (Inter, Gilroy) - minimal set
- Font face definitions with `font-display: swap`
- Minimal CSS reset
- `affiliate-dashboard.css` (automatically included)
- Optional Chart.js (if `$chartJs = "true"`)
- Optional Alpine.js (if `$alpineJs = "true"`)
**Excluded (Separated from Marketing Site):**
- Google Analytics / HubSpot tracking scripts
- AOS animations library
- Swiper carousel library
- Tailwind CSS
- Marketing site critical CSS
- Service worker registration
- SEO meta tags (hreflang, canonical)
- DNS prefetch for marketing resources
- Alpine.js mobile navigation scripts
### Usage Pattern
```php
Page Title - <?php echo AFFILIATE_PROGRAM_NAME; ?>
```
## Pages Using Standalone Architecture
### Partner Dashboard Pages (All Standalone)
- `partner-dashboard.php` - Main dashboard (uses Chart.js)
- `partner-leads.php` - Leads management
- `partner-earnings.php` - Earnings overview (uses Chart.js)
- `partner-referral-urls.php` - URL generation
- `partner-leaderboard.php` - Leaderboard
- `partner-settings.php` - Settings
- `partner-login.php` - Login page
- `partner-register.php` - Registration form
- `partner-reset-password.php` - Password reset
### Pages Keeping Marketing Integration
- `partner-program.php` - Public marketing landing page
- Uses `base/head.php` (marketing site head)
- Includes header and footer
- Uses marketing site styles and scripts
- This is intentional - it's a public-facing marketing page
## CSS Architecture
### Partner platform CSS files
All partner pages use **minified** CSS (`.min.css`) with `filemtime()` for cache busting. Run `npm run minify` after editing any `v2/css/affiliate-*.css`.
| File | Loaded | Purpose |
|------|--------|---------|
| `affiliate-shared.min.css` | `affiliate-head.php` | Design tokens, sidebar, cards, tables, buttons, empty/loading states, responsive breakpoints |
| `affiliate-dashboard.min.css` | `affiliate-head.php` | Dashboard page overrides |
| `affiliate-levels.min.css` | `partner-levels.php` (customHead) | Levels page only |
| `affiliate-referral-urls.min.css` | `partner-referral-urls.php` (customHead) | Referral URLs page (UTM form, sitemap table) |
- No Tailwind dependencies; self-contained styles; responsive without external frameworks.
- Minimal CSS reset and font definitions are inline in `affiliate-head.php`.
- **Page-specific styles use dedicated CSS files**, not inline `