# NTPPA — Full Static Site with UI/UX Refinements

The complete **New Tampa Piano & Pedagogy Academy** public site (live at
`clients.expertaims.in/ntppa/`), rebuilt as a self-contained static set with a
consistent layer of UI/UX refinements applied **site-wide**. Ready to drop into
the CMS.

The existing design is already strong — a mature purple/Playfair system with
light & dark themes, scroll-reveal, count-up stats, a 3D-tilt "signature" card
system and an accessible faculty carousel. These changes are **surgical and
additive**; nothing existing was removed, and no CMS schema or content changes
are required.

## Pages (65 total)

- **Home** — the newer "signature-card" design (`home-preview`), not the older
  bento home still on the live server.
- **Programs** — programs (overview), preparatory, core, adult, program-details,
  calendar, performance-exams, summer-programs
- **About** — about, why-ntppa, meet-the-founder, teaching-philosophy, faculty
  (roster), reviews
- **Faculty details** — 9 instructor pages
- **Media** — gallery, press (+ 36 press articles), blogs
- **Career** and **Contact**

Every internal link resolves — no dead links.

## How it's wired (matches the CMS model)

Each page is `<head>` + content only. The shared chrome — topbar, navbar,
dropdowns, mobile drawer, footer, cookie banner, scroll-to-top, theme toggle —
is injected by `assets/common.js`, and all styling is in `assets/style.css`. So
the improvements live in just **two shared files** and apply everywhere.

| File | Change |
|------|--------|
| `assets/style.css` | Original stylesheet **+ an appended `UI/UX REFINEMENTS 2026` block** |
| `assets/common.js` | Original shared script **+ the mobile action bar + a branded favicon injector** |
| `assets/settings-bind.js` | Unchanged (binds phone/email/address from `NTPPA_SETTINGS`) |

## What changed and why

1. **Motion safety (accessibility).** Several decorative infinite loops (hero
   glow orbs, credential marquee, scroll cue) ignored `prefers-reduced-motion`.
   They're now silenced for that setting, and scroll-reveal elements are forced
   visible so none can get stuck at `opacity:0`.
2. **Persistent mobile action bar** (site-wide, ≤640px). A sticky bottom
   `Call` + `Free Interview` bar — injected once in `common.js`, so every page
   gets it. Theme-aware and `env(safe-area-inset-bottom)`-safe; reveals once the
   hero/page-hero scrolls away. A local music school runs on those two
   conversions, which previously scrolled out of reach.
3. **Readability / contrast.** The faintest supporting copy on dark bands (hero
   lede, trust row, CTA "or call" line, testimonials sub-head) lifted toward
   WCAG AA — via `!important` rules so it holds regardless of per-page inline
   colors.
4. **Typographic finish.** `text-wrap: balance` on headings, `text-wrap: pretty`
   on body copy.
5. **Hero sizing.** `min-height: 100svh` so the hero doesn't jump when the mobile
   URL bar shows/hides (falls back to `100vh`).
6. **Graceful image fallback.** A brand gradient behind program, faculty and
   media tiles, so a slow or missing CDN image reads as intentional instead of a
   dark void.
7. **Branded favicon** on every page (music note on brand purple), injected by
   `common.js` only where a page has none.

## Applying to the live CMS

The design is entirely in the two shared assets. To ship, replace the live
`assets/style.css` and `assets/common.js` with the versions here (the appended
blocks are clearly commented). No template, database or content changes needed.

> Images referenced from `newtampappa.com/uploads/...` load from the live CDN;
> local hero/banner images are in `images/`.
