# PROJECT.md — autotq-modern-ejs

## 1) Site overview
- Stack: Node/Express + EJS templates + single global CSS/JS.
- Brand/entity: **AutoTQ** / Golden Hour Medical, Inc.
- Content model: all factual content (team, literature, testimonials, news, video links, image URLs) is sourced from `site.config.js` and rendered by views.
- Goal of this refresh: unified premium feel, less visual noise, stronger but accessible red brand surfaces, consistent logo/header/hero treatment.

## 2) File structure (repo map + one-liners)

### Root
| File | Purpose |
|---|---|
| `README.md` | Short project description. |
| `PROJECT.md` | This project/source-of-truth document. |
| `site.config.js` | Central site data: brand, contact, assets, nav, team, literature, videos, testimonials/news. |

### Public assets
| File | Purpose |
|---|---|
| `public/css/style.css` | Global design system + all component/page styling. |
| `public/js/main.js` | Mobile nav, sticky header state, reveal animations, contact form submit. |

### Views (pages)
| File | Purpose |
|---|---|
| `views/layout.ejs` | Global HTML shell; injects header/footer and page body. |
| `views/index.ejs` | Home page (hero, proof points, video, updates, testimonials, CTA). |
| `views/about.ejs` | Redirect-style About page pointing to `/about-autotq`. |
| `views/about-autotq.ejs` | Main product/about narrative with stats. |
| `views/company.ejs` | Team grid and company gallery. |
| `views/contact.ejs` | Contact details + inquiry form. |
| `views/literature.ejs` | Download/open literature docs from config. |
| `views/news.ejs` | News timeline from config links. |
| `views/articles.ejs` | External source article links list. |
| `views/research.ejs` | Research summary links (occlusion + first-time user). |
| `views/firsttimeusers.ejs` | Source-linked summary page. |
| `views/occlusion.ejs` | Source-linked summary page. |
| `views/testimonials.ejs` | Testimonials grid from config data. |
| `views/training.ejs` | Training summary/source link page. |
| `views/shop.ejs` | External shop source link page. |
| `views/hannah.ejs` | Team profile page. |
| `views/laresa.ejs` | Team profile page. |
| `views/jamie.ejs` | Team profile page. |
| `views/gabriella.ejs` | Team profile page. |
| `views/devin.ejs` | Team profile page. |
| `views/nandini.ejs` | Team profile page. |
| `views/max.ejs` | Team profile page. |
| `views/nick.ejs` | Team profile page. |
| `views/carisse.ejs` | Team profile page. |

### Views partials
| File | Purpose |
|---|---|
| `views/partials/header.ejs` | Unified top nav + brand/logo + contact CTA. |
| `views/partials/footer.ejs` | Footer with logo, nav list, contact details. |

## 3) Navigation structure
- **Primary header nav (refresh):**
  - `/` Home
  - `/about-autotq` About
  - `/company` Company
  - `/research` Research
  - `/literature` Literature
  - `/news` News
  - `/testimonials` Testimonials
  - `/contact` Contact CTA
- **Additional pages (accessible via content/footer/config):** `/articles`, `/training`, `/shop`, `/firsttimeusers`, `/occlusion`, team profile slugs.

## 4) Design system
- **Colors (CSS vars):**
  - Brand red: `--brand-red #c81919`
  - Strong red: `--brand-red-strong #a90f0f`
  - Red surfaces: `--bg-alt #ffe4e4`, `--brand-red-soft #ffe0e0`
  - Text: `--text #1d1111`, muted `--muted #5a4040`
- **Typography:** Inter/system sans stack, large editorial headings, readable paragraph rhythm.
- **Spacing:** container max 1160px; section vertical rhythm `~4rem–5rem` desktop.
- **Core components:** sticky header, pill nav links, strong red CTA buttons, card panels (`.glass-card`), page hero band, timeline cards, team/gallery grids.

## 5) CSS architecture
- Single stylesheet (`public/css/style.css`) with:
  1. Tokens/variables (`:root`)
  2. Global/reset/layout utilities
  3. Header/nav system
  4. Hero/page-hero/section systems
  5. Component styles (cards, buttons, forms, timeline, grids)
  6. Footer system
  7. Motion/accessibility states
  8. Responsive breakpoint block (`max-width: 980px`)

## 6) JS functionality
- Mobile nav open/close + ESC/outside click close.
- Sticky header “scrolled” class toggle.
- IntersectionObserver reveal-on-scroll.
- Contact form async POST to configured endpoint with status states.

## 7) Content map per page
- `index`: hero value prop, proof stats, deployment video embed, updates, testimonials, CTA.
- `about-autotq`: product overview + feature cards + stats.
- `company`: team cards (from config) + gallery images.
- `research`: links to occlusion and first-time-user source summaries.
- `literature`: downloadable docs.
- `news/articles`: external source links.
- `contact`: business contact + inquiry submission form.
- profile pages (`/hannah`, etc.): image/name/role/bio from config.

## 8) Image/media inventory (current usage)
- **Logo:** `config.assets.logo` (header/footer/home hero badge).
- **Core images:** `hero`, `product`, `videoThumb`.
- **Team headshots:** `hannah`, `laresa`, `jamie`, `gabriella`, `devin`, `nandini`, `max`, `nick`, `carisse`.
- **Company gallery:** `company1`..`company7`.
- **Video embeds:** `config.videos[*].embedUrl` (YouTube embed on home).
- **Literature docs:** `config.literature[*].url` (external document URLs).

## 9) Known issues / TODOs
- Confirm all configured nav items in `site.config.js` align with intended IA; header currently uses a curated primary set to reduce clutter.
- Team profile templates are duplicated per person; could be consolidated into a single dynamic profile route/template.
- Add automated visual regression checks for responsive nav and hero spacing.
- Consider moving external media URLs to local managed asset pipeline if required by deployment policy.

## 10) Refresh changes implemented in this update
- Unified header/nav treatment with larger, consistently visible logo and simplified primary navigation.
- Removed noisy motion/parallax behavior from JS and home hero for cleaner experience.
- Increased brand red usage via hero/page bands, CTA/button gradients, and section accents while preserving contrast.
- Standardized component styling (cards, sections, buttons, form controls, timeline, grid spacing) for cross-page consistency.
- Added home hero logo badge for stronger brand presence above fold.