autotq-modern-ejs/PROJECT.md

PROJECT.md — autotq-modern-ejs

1) Site overview

• Stack: Node/Express + EJS templates + global CSS/JS.
• Brand/entity: AutoTQ / Golden Hour Medical, Inc.
• Content source remains site.config.js for factual data (team, literature, testimonials, news, contact).
• This revision focused on UX/content-structure consistency for people imagery and team bio presentation.

2) Updated file structure notes (files changed in this pass)

• views/company.ejs
• public/css/style.css
• public/js/main.js
• PROJECT.md

3) Navigation/routes

• Primary nav remains: /, /about-autotq, /company, /research, /literature, /news, /testimonials, /contact.
• Team profile links from the Company roster continue to use slug routes (e.g., /<member.slug>).

4) Design system notes (this revision)

• Reinforced visual logic: profile/headshot treatment is now isolated to the team roster cards.
• Narrative sections (Company mission and Operating mission) continue using neutral/non-profile supporting media (company4, company5).
• Added dedicated team-roster card styles and a clear CTA hierarchy for bio reveal (Read bio button + collapsible panel).

5) Component patterns now used

• Existing split sections and capability cards retained for company narrative blocks.
• New team-specific component set:
  • .team-roster (2-column responsive grid)
  • .team-person-card (headshot + person details)
  • .btn-team-bio (bio reveal control)
  • .team-bio-panel (collapsible bio region)
• Bio reveal behavior is managed by progressive JS and keeps native button keyboard behavior.

6) Content/layout updates by page

• Company (company.ejs)
  • Kept non-team sections free of employee portraits in mission/operating mission blocks.
  • Reworked “Leadership and specialists” into a true roster with each person’s headshot, name, role, and a Read bio button.
  • Added collapsible bio panel per person instead of displaying long bios inline by default.
• Audit pass completed (no edits required):
  • views/literature.ejs
  • views/testimonials.ejs
  • views/about-autotq.ejs
  • views/research.ejs
  • views/index.ejs
  • These pages were verified to use non-employee support visuals in narrative sections.

7) JS behavior updates

• public/js/main.js now includes a scoped team bio accordion behavior:
  • Uses .team-bio-toggle buttons with aria-expanded + aria-controls.
  • Toggles hidden state on associated .team-bio-panel.
  • Keeps one bio open at a time within the company roster for cleaner scanning.
  • Button labels switch between Read bio / Hide bio.

8) Accessibility/UX notes

• Team bio interaction is button-based and keyboard accessible by default.
• ARIA state and controlled-region linkage are implemented per card.
• Visual hierarchy now clearly separates abstract/company claims from individual people content.

9) Known TODOs

• Optional next pass: animate panel expansion/collapse while preserving reduced-motion preferences.
• Optional next pass: consolidate legacy unused classes (.people-list, .person-row, .team-grid, .team-card) if no longer referenced elsewhere.