# Helalia — public site

Static HTML/CSS/JS. No backend, no bundler, no framework.

## Build

`build_pages.py` is the source of truth. Edit it (or the CSS/JS), then:

```
cd helalia-new-site
python build_pages.py
```

That rewrites all 13 `.html` files. Never hand-edit the generated HTML.

## Preview

```
python -m http.server 8777
```

→ http://127.0.0.1:8777/

## The hero film

The home page hero is **one video, no slideshow**:

```
assets/media/hero/helalia-sun.mp4      ← drop the file here
assets/media/sliders/1724071808i1lGMKhW6z.jpg   ← poster / reduced-motion frame
```

The `<video>` ships with the mp4 path already wired (`muted playsinline autoplay
loop`, no controls, no audio, `preload="metadata"`). Until the file exists the
poster frame is what visitors see — that is intentional. There is no image
carousel fallback.

## Design language — "daylight cinema"

Navy `#0a1b3d` · gold `#d4a017` / `#f0c44a` · cream `#f6f0e4`. Cream is air, not
paper; navy is shade you step into; gold is sunlight on an edge — a drawn line,
a glint, a warm hover — never chrome. Terracotta (the building's wings) appears
only as a low-opacity light wash. `--gold-ink` `#7a5a06` is the only gold used
for small text on cream, for contrast.

Type: **Newsreader** (display), **Manrope** (UI), **Cairo** (Arabic).

### Motion system

Defined at the top of `assets/css/site.css`, driven by `assets/js/site.js`:

| hook | behaviour |
| --- | --- |
| `[data-rise]` | lifts and fades in on entering the frame, staggered by `--i` (or by a `[data-stagger]` parent) |
| `[data-draw]` | a gold hairline draws itself left to right |
| `[data-split]` | display headings lift word by word out of a hidden line |
| `.btn` | a radial sunlight glow warms under the pointer |
| `.hero-glint` | a thin gold sun-line rides the right edge, moved by `--scroll` |
| `header.site.is-lifted` | glass-blurs and condenses once you leave the hero |
| `.roomwipe` | a navy panel walks up between pages — courtyard to classroom |

`prefers-reduced-motion: reduce` freezes the film on its poster (JS reloads the
element without playing it), reveals everything immediately, and removes the
wipe, the ticker, the glint and the calendar day animation. With JS off nothing
stays hidden and the nav is a plain list.

### Rooms

Each page sets `<body data-room="...">`:

`home` daylight campus · `about` 2008 → today as a rising path (faculty wall left
deliberately empty) · `news` editorial ticket/magazine · `events` the 7-column
navy/gold calendar, gold days animating in · `notices` a pin board, honestly
mostly empty · `results` a navy instrument · `contact` a department switchboard ·
`admission` a calm three-step stepper · `missions` oversized manifesto type ·
`legal` Helalia-only privacy and terms.

## Content rules

- School facts live in the constants at the top of `build_pages.py` (founding,
  address, phones, department lines, calendar events). Nothing is invented.
- Forms are preview-only: they intercept submit and show a toast. Wiring them up
  is a backend job, not a change to these files.
- Photographs are Helalia's own gallery, news and slider images. Never
  AI-generate students or staff.
- The two real news posts and the 2026/2027 Ministry calendar stay as they are.
