# Theme Maintenance Guide

## Fast path

For a normal server reskin, do **not** edit every HTML file.

1. Create/edit `assets/css/themes/<server>.css`.
2. Override theme variables only.
3. Point `--hero-image`, `--server-logo`, and `--gameplay-image` to that server's assets.
4. Load that stylesheet after `assets/css/theme.css`.
5. Check `index.html`, one content page, one form page, and `playground.html`.

## Minimal theme file

```css
:root {
  --accent: #VALUE;
  --accent-rgb: R,G,B;
  --accent-2: #VALUE;
  --theme-soft: rgba(R,G,B,.12);
  --hero-image: url("../../path/to/banner.png");
  --server-logo: url("../../path/to/logo.png");
  --gameplay-image: url("../../path/to/gameplay.jpg");
}
```

Paths are relative to the theme CSS file.

## What belongs where

| Change | File |
|---|---|
| Server colors/logo/banner | `assets/css/themes/<server>.css` |
| Header/layout/cards/forms/tables/responsive rules | `assets/css/theme.css` |
| Menu/dropdown/accordion/preview behavior | `assets/js/theme.js` |
| Navigation structure or page markup | relevant `.html` files |
| CMS component DOM contract | change only with backend approval |

## Adding a server

- Add its artwork under `assets/`.
- Add `assets/css/themes/<server>.css`.
- Do not duplicate HTML.
- If local query preview is needed, add the server key to the allow-list in `theme.js`.
- Production should load exactly one server-theme stylesheet.

## Hero tuning

Prefer theme overrides such as:

```css
.hero { background-position: center 40%; }
.home-page .hero { min-height: 650px; }
```

Avoid editing/cropping the source image unless requested. Adjust `background-position` before increasing `background-size`; excessive scaling can make banners look pixelated.

## Regression checklist

- Header fits without collisions.
- ES/EN selector remains usable.
- Desktop hero preserves logo/characters/focal point.
- Mobile hero crop remains acceptable.
- Dropdowns and mobile menu open/close.
- Accordions work.
- Tables scroll on narrow screens.
- Forms remain readable.
- `playground.html` components retain their original DOM/classes.
- No PWA manifest/service worker/SPA routing was introduced.