gator/autotq-modern-ejs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cohesive redesign: remove Company Gallery, add varied layouts/media/video, refresh palette, and update PROJECT.md

Browse source
This commit is contained in:
gator 2026-03-11 01:31:18 +00:00
parent 3914f0f446
commit a6debb8ef4
11 changed files with 414 additions and 415 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

165
PROJECT.md
View file

@ -1,126 +1,63 @@
# PROJECT.md — autotq-modern-ejs
## 1) Site overview
- Stack: Node/Express + EJS templates + single global CSS/JS.
- Stack: Node/Express + EJS templates + 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.
- Content source remains `site.config.js` for factual data (team, literature, testimonials, news, contact).
- This update focused on a stronger visual hierarchy, mixed section layouts, and reduced repetitive card patterns.
## 2) File structure (repo map + one-liners)
## 2) Updated file structure notes (files changed)
- `views/partials/header.ejs`
- `views/partials/footer.ejs`
- `views/index.ejs`
- `views/company.ejs`
- `views/research.ejs`
- `views/literature.ejs`
- `views/testimonials.ejs`
- `views/news.ejs`
- `views/contact.ejs`
- `public/css/style.css`
### 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. |
## 3) Navigation/routes
- Primary nav: `/`, `/about-autotq`, `/company`, `/research`, `/literature`, `/news`, `/testimonials`, `/contact`.
- **Removed Company Gallery references** from page structure and nav rendering behavior.
### 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. |
## 4) Design system (refresh)
- Updated primary red toward requested tone: `--brand-red: #d12020`.
- Complementary palette introduced with dark neutrals for contrast bands:
- `--dark: #111315`
- `--dark-soft: #1e2124`
- white/light-gray surfaces for cleaner reading sections.
- Larger red/dark surface usage in hero, strip bands, and CTA moments while keeping body sections clean.
### 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. |
## 5) Component patterns now used
- Alternating split sections (`.split`, `.split-reverse`) for left/right rhythm.
- Media-first blocks (`.media-band`, `.media-stack`, `.video-grid`).
- Quote strip and quote row formats (`.quote-strip`, `.quote-row`) replacing repetitive equal cards.
- Context list and research/doc rows (`.context-list`, `.research-item`, `.doc-row`).
- News rows with left accent instead of repeated large cards.
### 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. |
## 6) Content/layout updates by page
- **Home (`index.ejs`)**: rebuilt with hero split, mission strip, challenge/context sections, use-case list, media band with video embeds, evidence orientation block, and mixed news/testimonial layout.
- **Company (`company.ejs`)**: removed Company Gallery block; replaced with mission/operations split + team presentation.
- **Research (`research.ejs`)**: added media-first section with video embed and clearer evidence reference rows.
- **News (`news.ejs`)**: added featured video band plus press row list.
- **Literature (`literature.ejs`)**: converted to structured document rows with stronger hierarchy.
- **Testimonials (`testimonials.ejs`)**: switched from uniform cards to quote rows.
- **Contact (`contact.ejs`)**: added media-supported hero and refined readiness-oriented intro.
## 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.
## 7) Media inventory used in redesign
Reused existing configured assets (from `config.assets.images`) across pages:
- `hero`, `product`
- `company1`–`company7`
- team headshots (company page team cards)
## 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.
Added provided YouTube embeds:
- `z7VjjfdjIhU`
- `l2ocd5el0Yc`
- `4PnhBm5WIg0`
- `rI2n9TlMYIU`
## 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.
## 8) Known TODOs
- If any legacy `config.nav` entries still include old/unused links, optionally clean that array in `site.config.js` for full parity with curated header/footer nav.
- Consider per-page metadata and richer alt text pass for SEO/accessibility polishing.

326
public/css/style.css
View file

@ -1,24 +1,25 @@
:root {
--bg: #fff8f8;
--bg-alt: #ffe4e4;
--bg: #ffffff;
--bg-alt: #f8f8f8;
--surface: #ffffff;
--surface-soft: #fff3f3;
--text: #1d1111;
--muted: #5a4040;
--brand-red: #c81919;
--brand-red-strong: #a90f0f;
--brand-red-soft: #ffe0e0;
--border: #efcaca;
--shadow: 0 14px 30px rgba(102, 18, 18, 0.12);
--surface-soft: #f4f4f4;
--text: #151515;
--muted: #4d4d4d;
--brand-red: #d12020;
--brand-red-strong: #ab1515;
--brand-red-soft: #fde9e9;
--dark: #111315;
--dark-soft: #1e2124;
--border: #e5e5e5;
--shadow: 0 12px 28px rgba(16, 16, 16, 0.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: var(--text);
background: linear-gradient(180deg, #fff9f9 0%, #fff3f3 100%);
background: var(--bg);
line-height: 1.7;
font-size: 18px;
overflow-x: hidden;
@ -26,203 +27,216 @@ body {
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container { width: min(1160px, calc(100% - 2rem)); margin-inline: auto; }
.section { padding: 5rem 0; }
.section-alt {
background: linear-gradient(180deg, #ffe3e3 0%, #ffd8d8 100%);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.section-alt { background: var(--brand-red-soft); }
.section-band { background: linear-gradient(90deg, #171a1d 0%, #202327 100%); color: #fff; }
.section-band p, .section-band h2, .section-band strong, .section-band span { color: #fff; }
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.015em; margin-top: 0; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: .9rem; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.65rem); margin-bottom: .6rem; }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin-bottom: .55rem; }
p { margin: 0 0 1rem; color: var(--text); }
.lead { color: var(--muted); font-size: 1.15rem; max-width: 70ch; }
.lead { color: var(--muted); font-size: 1.12rem; max-width: 72ch; }
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 247, 247, 0.95);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(200, 25, 25, 0.2);
border-bottom: 1px solid var(--border);
transition: box-shadow .2s ease, background-color .2s ease;
}
.site-header.is-scrolled {
background: rgba(255, 244, 244, 0.98);
box-shadow: 0 12px 24px rgba(94, 14, 14, 0.16);
}
.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 86px; gap: 1rem; }
.brand {
display: inline-flex;
align-items: center;
gap: .7rem;
font-weight: 800;
color: #7f1111;
}
.site-header.is-scrolled { box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 800; color: var(--dark); }
.brand img {
width: 56px;
height: 56px;
width: 52px;
height: 52px;
object-fit: contain;
border-radius: 12px;
background: #fff;
border: 1px solid var(--border);
padding: .25rem;
padding: .24rem;
}
.brand span { font-size: 1.08rem; }
.brand span { font-size: 1.06rem; }
.site-nav { display: block; }
.nav-links { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
.nav-links a {
color: #5d3f3f;
color: #3a3d40;
font-weight: 700;
font-size: .95rem;
padding: .58rem .82rem;
padding: .56rem .82rem;
border-radius: 999px;
border: 1px solid transparent;
transition: .2s ease;
}
.nav-links a:hover,
.nav-links a.active {
color: var(--brand-red);
border-color: rgba(200, 25, 25, .3);
background: #ffecec;
}
.nav-links a.active { color: var(--brand-red); border-color: #f1cdcd; background: #fff5f5; }
.nav-cta,
.nav-links a.nav-cta-link {
background: linear-gradient(180deg, #dc2b2b 0%, #b81414 100%);
border: 1px solid #a81010;
background: linear-gradient(180deg, #e13232 0%, #c41d1d 100%);
border: 1px solid #b31a1a;
color: #fff;
font-weight: 800;
box-shadow: 0 8px 18px rgba(148, 15, 15, 0.25);
}
.nav-cta:hover,
.nav-links a.nav-cta-link:hover,
.nav-links a.nav-cta-link.active {
color: #fff;
border-color: #930d0d;
background: linear-gradient(180deg, #e43535 0%, #ab0f0f 100%);
}
.nav-links a.nav-cta-link.active { color: #fff; background: linear-gradient(180deg, #ea4242 0%, #b01717 100%); }
.mobile-toggle { display: none; border: 1px solid transparent; border-radius: 10px; background: transparent; padding: .3rem .35rem; }
.mobile-toggle span { display: block; width: 22px; height: 2px; background: #5a1a1a; margin: 5px 0; border-radius: 2px; }
.mobile-toggle span { display: block; width: 22px; height: 2px; background: #24272a; margin: 5px 0; border-radius: 2px; }
.hero {
position: relative;
padding: 5.5rem 0 4.5rem;
background: linear-gradient(180deg, #ffe6e6 0%, #fff4f4 55%, #fff8f8 100%);
border-bottom: 1px solid var(--border);
padding: 5.4rem 0 4.5rem;
background: linear-gradient(115deg, #121417 0%, #21262c 58%, #d12020 58%, #cc1d1d 100%);
color: #fff;
}
.hero p, .hero h1 { color: #fff; }
.hero-bg {
position: absolute;
inset: 0;
background: radial-gradient(650px 280px at 80% -20%, rgba(200, 25, 25, 0.2), transparent 70%);
background: radial-gradient(680px 300px at 72% 8%, rgba(255,255,255,.22), transparent 70%);
pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; }
.hero-brand {
display: inline-flex;
align-items: center;
gap: .55rem;
margin-bottom: .85rem;
padding: .35rem .7rem;
border-radius: 999px;
background: #fff;
border: 1px solid var(--border);
color: #851313;
font-weight: 700;
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.eyebrow { color: #ffd6d6; font-weight: 800; text-transform: uppercase; font-size: .83rem; letter-spacing: .07em; }
.hero-actions { display: flex; gap: .8rem; margin-top: 1.2rem; flex-wrap: wrap; }
.media-stack { display: grid; gap: .8rem; }
.media-stack img {
border-radius: 14px;
border: 1px solid rgba(255,255,255,.22);
box-shadow: 0 18px 36px rgba(0,0,0,.22);
object-fit: cover;
max-height: 300px;
width: 100%;
}
.hero-brand img { width: 28px; height: 28px; object-fit: contain; }
.eyebrow { color: var(--brand-red); font-weight: 800; text-transform: uppercase; font-size: .86rem; letter-spacing: .06em; }
.hero-actions { display: flex; gap: .8rem; margin-top: 1.3rem; flex-wrap: wrap; }
.page-hero {
padding: 4.8rem 0 2.2rem;
background: linear-gradient(180deg, #ffe3e3 0%, #fff6f6 100%);
padding: 4.5rem 0 2.4rem;
background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
border-bottom: 1px solid var(--border);
}
.quote-strip { background: var(--dark); color: #fff; padding: 1.1rem 0; }
.quote-strip p { margin: 0; color: #fff; font-weight: 600; text-align: center; }
.story-band {
padding: 4rem 0;
background: linear-gradient(180deg, rgba(200,25,25,.11), rgba(200,25,25,.03));
border-top: 1px solid #efc3c3;
border-bottom: 1px solid #efc3c3;
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: center; }
.split-reverse .split-copy { order: 1; }
.split-reverse .split-media { order: 2; }
.split-media img {
border-radius: 14px;
border: 1px solid var(--border);
box-shadow: var(--shadow);
min-height: 250px;
object-fit: cover;
width: 100%;
}
.story-steps { display: grid; gap: 1rem; }
.story-step {
padding: 1rem 1.1rem;
.split-copy { padding: .4rem 0; }
.bullet-list { margin: .5rem 0 0; padding-left: 1.1rem; }
.bullet-list li { margin-bottom: .35rem; }
.context-list { display: grid; gap: .75rem; }
.context-list div { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); padding: .75rem .85rem; border-radius: 10px; }
.context-list strong { display: block; margin-bottom: .2rem; }
.media-band { background: #f6f6f7; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band-head { margin-bottom: 1.1rem; }
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.video-frame {
border-radius: 14px;
border: 1px solid var(--border);
box-shadow: var(--shadow);
overflow: hidden;
background: #fff;
}
.video-frame iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }
.news-testimonials { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; align-items: start; }
.timeline { display: grid; gap: .8rem; }
.news-row {
background: #fff;
border: 1px solid var(--border);
border-left: 4px solid var(--brand-red);
border-radius: 10px;
background: rgba(255, 255, 255, .75);
border-radius: 12px;
padding: .95rem 1rem;
}
.story-kicker { color: var(--brand-red-strong); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.date { color: var(--brand-red); font-weight: 800; font-size: .88rem; }
.stacked-quotes { display: grid; gap: .8rem; }
.quote-panel {
margin: 0;
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem;
}
.quote-panel p { font-size: 1.02rem; }
.quote-panel cite { font-style: normal; color: var(--muted); font-weight: 600; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; }
.team-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.1rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }
.stats-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.research-list, .docs-list, .testimonials-stack { display: grid; gap: 1rem; }
.research-item, .doc-row {
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem;
box-shadow: var(--shadow);
}
.item-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.doc-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.team-card {
display: grid;
grid-template-columns: 170px 1fr;
gap: .9rem;
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
padding: .8rem;
box-shadow: var(--shadow);
}
.team-card img { border-radius: 10px; height: 170px; width: 100%; object-fit: cover; }
.quote-row {
display: grid;
grid-template-columns: 60px 1fr;
gap: .8rem;
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem;
}
.quote-row .quote-mark { font-size: 3rem; line-height: .9; color: var(--brand-red); font-weight: 800; }
.quote-row span { color: var(--muted); font-weight: 600; }
.glass-card {
background: var(--surface);
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
border-radius: 14px;
box-shadow: var(--shadow);
padding: 1.1rem;
padding: 1rem;
}
.media-card { padding: .7rem; }
.media-card img { border-radius: 12px; width: 100%; object-fit: cover; }
.video-frame { padding: .5rem; }
.video-frame iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; }
.stat-card h3 { color: var(--brand-red); font-size: 2.2rem; margin-bottom: .35rem; }
.cta-card {
background: linear-gradient(145deg, #be1a1a, #980f0f);
border-color: #8e0f0f;
color: #fff;
}
.cta-card p, .cta-card h2 { color: #fff; }
.quote-card p { font-size: 1.08rem; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .82rem 1.18rem;
padding: .82rem 1.15rem;
border-radius: 999px;
border: 1px solid transparent;
font-weight: 700;
transition: .2s ease;
}
.btn-primary {
background: linear-gradient(180deg, #dd2f2f 0%, #b81212 100%);
color: #fff;
border-color: #a71212;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(138, 16, 16, .3); }
.btn-ghost {
border-color: #e4bbbb;
background: #fff;
color: #7f1f1f;
}
.btn-ghost:hover { border-color: var(--brand-red); color: var(--brand-red); background: #fff3f3; }
.btn-primary { background: linear-gradient(180deg, #e13232 0%, #c41d1d 100%); color: #fff; border-color: #b31a1a; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(156, 24, 24, .24); }
.btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.text-link { color: var(--brand-red); font-weight: 700; }
.text-link:hover { text-decoration: underline; }
.timeline { display: grid; gap: 1rem; }
.news-card .date, .date { color: var(--brand-red-strong); font-weight: 800; font-size: .92rem; }
.team-card img { border-radius: 12px; margin-bottom: .75rem; height: 260px; width: 100%; object-fit: cover; }
.gallery-grid img { border-radius: 12px; min-height: 170px; object-fit: cover; border: 1px solid var(--border); }
.profile-card { max-width: 860px; }
.profile-card img { width: 220px; height: 220px; border-radius: 18px; object-fit: cover; margin-bottom: .9rem; }
.inquiry-form label { display: block; font-weight: 600; margin-bottom: .9rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.inquiry-form input,
@ -232,11 +246,11 @@ p { margin: 0 0 1rem; color: var(--text); }
margin-top: .35rem;
padding: .75rem .85rem;
border-radius: 12px;
border: 1px solid #d9b7b7;
border: 1px solid #d9d9d9;
background: #fff;
font-size: 1rem;
}
.alert { margin-top: .9rem; padding: .8rem .9rem; border: 1px solid #edb5b5; background: #fff1f1; color: #aa2020; border-radius: 12px; }
.alert { margin-top: .9rem; padding: .8rem .9rem; border: 1px solid #f0c9c9; background: #fff3f3; color: #8a2020; border-radius: 12px; }
.form-status { margin-top: .75rem; font-weight: 700; }
.form-status.success { color: #146c2f; }
.form-status.error { color: #b42323; }
@ -245,17 +259,17 @@ p { margin: 0 0 1rem; color: var(--text); }
.site-footer {
margin-top: 3rem;
padding-top: 2.6rem;
border-top: 1px solid #4f1616;
background: linear-gradient(180deg, #2f1010, #180808);
color: #f8eded;
border-top: 1px solid #282b2f;
background: linear-gradient(180deg, #16181b, #0f1113);
color: #f0f0f0;
}
.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 1.3rem; }
.brand-footer img { width: 50px; height: 50px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin: .5rem 0; color: #dfbcbc; }
.footer-links li { margin: .45rem 0; color: #c8cbcf; }
.footer-links a:hover { color: #fff; }
.footer-bottom { padding: 1.2rem 0 1.8rem; color: #ddb7b7; }
.legal { color: #ddb7b7; }
.footer-bottom { padding: 1.2rem 0 1.8rem; color: #afb3b8; }
.legal { color: #afb3b8; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@ -267,23 +281,24 @@ button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid rgba(200, 25, 25, .25);
outline: 3px solid rgba(209, 32, 32, .25);
outline-offset: 2px;
}
@media (max-width: 980px) {
.hero-grid, .split, .grid-3, .grid-2, .team-grid, .gallery-grid, .stats-grid, .footer-grid, .form-grid { grid-template-columns: 1fr; }
.hero-grid, .split, .video-grid, .news-testimonials, .footer-grid, .form-grid, .team-grid, .team-card, .quote-row { grid-template-columns: 1fr; }
.split-reverse .split-copy,
.split-reverse .split-media { order: initial; }
.mobile-toggle { display: inline-block; }
.site-nav {
position: absolute;
top: 82px;
right: 1rem;
left: 1rem;
background: rgba(255, 244, 244, .99);
border: 1px solid #f0cccc;
box-shadow: 0 14px 35px rgba(87, 13, 13, .2);
background: rgba(255, 255, 255, .99);
border: 1px solid var(--border);
box-shadow: 0 14px 30px rgba(0,0,0,.15);
border-radius: 14px;
padding: .85rem;
transform: translateY(-8px) scale(.98);
@ -292,23 +307,10 @@ select:focus-visible {
visibility: hidden;
transition: transform .22s ease, opacity .22s ease;
}
.site-nav.open {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
visibility: visible;
}
.site-nav.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; visibility: visible; }
.nav-links { width: 100%; flex-direction: column; align-items: stretch; gap: .25rem; }
.nav-links a {
width: 100%;
text-align: left;
border-radius: 10px;
background: #fff;
border-left: 3px solid transparent;
}
.nav-links a:hover,
.nav-links a.active { border-left-color: var(--brand-red); }
.nav-cta { width: 100%; text-align: center; justify-content: center; }
.nav-links a { width: 100%; text-align: left; border-radius: 10px; background: #fff; border-left: 3px solid transparent; }
.nav-links a:hover, .nav-links a.active { border-left-color: var(--brand-red); }
.section { padding: 4rem 0; }
body { font-size: 17px; }

45
views/company.ejs
View file

@ -1,8 +1,26 @@
<main>
<section class="page-hero">
<div class="container">
<h1>Company</h1>
<p class="lead"><%= config.brand.legalName %> is focused on improving emergency bleeding response through intuitive automation and practical deployment models.</p>
<div class="container split split-visual">
<div>
<h1>Company</h1>
<p class="lead"><%= config.brand.legalName %> is focused on improving emergency bleeding response through intuitive automation and practical readiness programs.</p>
</div>
<div class="split-media reveal" data-reveal>
<img src="<%= config.assets.images.company4 %>" alt="AutoTQ team collaboration" loading="lazy" />
</div>
</div>
</section>
<section class="section">
<div class="container split split-reverse">
<article class="split-copy reveal" data-reveal>
<h2>Operating mission</h2>
<p>The team’s work centers on a clear goal: improve readiness for severe bleeding incidents by making intervention more practical for people who may be under pressure and short on time.</p>
<p>This includes product development, quality systems, operational planning, and education-oriented resources for real-world deployment settings.</p>
</article>
<div class="split-media reveal" data-reveal>
<img src="<%= config.assets.images.company5 %>" alt="AutoTQ operations and planning" loading="lazy" />
</div>
</div>
</section>
@ -11,25 +29,16 @@
<h2>Team</h2>
<div class="team-grid">
<% (config.team || []).forEach(member => { %>
<article class="glass-card team-card reveal" data-reveal>
<article class="team-card reveal" data-reveal>
<img src="<%= config.assets.images[member.image] %>" alt="<%= member.name %>" loading="lazy" />
<h3><%= member.name %></h3>
<p><%= member.role %></p>
<a class="text-link" href="/<%= member.slug %>">View profile →</a>
<div>
<h3><%= member.name %></h3>
<p><%= member.role %></p>
<a class="text-link" href="/<%= member.slug %>">View profile →</a>
</div>
</article>
<% }) %>
</div>
</div>
</section>
<section class="section">
<div class="container">
<h2>Company Gallery</h2>
<div class="gallery-grid">
<% for (let i = 1; i <= 7; i++) { %>
<img class="reveal" data-reveal src="<%= config.assets.images[`company${i}`] %>" alt="AutoTQ company image <%= i %>" loading="lazy" />
<% } %>
</div>
</div>
</section>
</main>

11
views/contact.ejs
View file

@ -1,8 +1,13 @@
<main>
<section class="page-hero">
<div class="container">
<h1>Contact</h1>
<p class="lead">Connect with the AutoTQ team.</p>
<div class="container split split-visual">
<div>
<h1>Contact</h1>
<p class="lead">Connect with the AutoTQ team about emergency readiness planning, literature, and deployment pathways.</p>
</div>
<div class="split-media reveal" data-reveal>
<img src="<%= config.assets.images.product %>" alt="AutoTQ product for readiness planning discussions" loading="lazy" />
</div>
</div>
</section>

174
views/index.ejs
View file

@ -3,110 +3,114 @@
<div class="hero-bg"></div>
<div class="container hero-grid">
<div class="reveal" data-reveal>
<div class="hero-brand">
<img src="<%= config.assets.logo %>" alt="<%= config.brand.name %> logo" loading="eager" />
<span><%= config.brand.name %></span>
</div>
<p class="eyebrow">FDA-Registered • Patented • Trusted Nationwide</p>
<h1>A bleeding emergency becomes a race against time.</h1>
<p class="lead">AutoTQ was built so the first person on scene can move from panic to action in seconds, with guided operation and one-button activation.</p>
<p class="eyebrow">Mission-Driven Emergency Readiness</p>
<h1>When hemorrhage risk is measured in minutes, response clarity matters.</h1>
<p class="lead">AutoTQ focuses on helping people act under pressure through one-button activation and guided steps designed for high-stress moments.</p>
<div class="hero-actions">
<a href="/contact" class="btn btn-primary">Start a Deployment Conversation</a>
<a href="/about-autotq" class="btn btn-ghost">See How AutoTQ Works</a>
<a href="/contact" class="btn btn-primary">Plan a Deployment</a>
<a href="/research" class="btn btn-ghost">Review Research Links</a>
</div>
</div>
<div class="glass-card media-card reveal" data-reveal>
<img src="<%= config.assets.images.hero %>" alt="AutoTQ demonstration" loading="eager" />
<div class="media-stack reveal" data-reveal>
<img src="<%= config.assets.images.hero %>" alt="AutoTQ in emergency readiness context" loading="eager" />
<img src="<%= config.assets.images.product %>" alt="AutoTQ product detail" loading="lazy" />
</div>
</div>
</section>
<section class="story-band">
<div class="container story-steps">
<article class="story-step reveal" data-reveal>
<p class="story-kicker">Chapter 1</p>
<h3>The gap</h3>
<p>In severe extremity bleeding events, bystanders and teams need a response that is fast, repeatable, and simple under stress.</p>
</article>
<article class="story-step reveal" data-reveal>
<p class="story-kicker">Chapter 2</p>
<h3>The response</h3>
<p>AutoTQ simplifies intervention through a two-step process and onboard guidance so users can focus on the patient, not guesswork.</p>
</article>
<article class="story-step reveal" data-reveal>
<p class="story-kicker">Chapter 3</p>
<h3>The outcome</h3>
<p>Public research and deployment content highlight strong first-time usability and arterial occlusion performance in context.</p>
</article>
</div>
</section>
<section class="section">
<div class="container split">
<div class="reveal" data-reveal>
<h2>Proof points in context</h2>
<p>These figures come from source research/deployment pages referenced throughout the site.</p>
</div>
<div class="stats-grid reveal" data-reveal>
<article class="glass-card stat-card"><h3>92%</h3><p>First-time user success from source research pages.</p></article>
<article class="glass-card stat-card"><h3>100%</h3><p>Arterial occlusion from source research pages.</p></article>
</div>
</div>
</section>
<section class="section section-alt">
<div class="container split">
<div class="reveal" data-reveal>
<h2>See deployment footage</h2>
<p class="lead">Video source: Cape Coral Police deployment page.</p>
<p><a class="text-link" href="<%= config.videos[0].pageUrl %>" target="_blank" rel="noopener noreferrer">Open source page →</a></p>
</div>
<div class="glass-card video-frame reveal" data-reveal>
<iframe
src="<%= config.videos[0].embedUrl %>"
title="<%= config.videos[0].title %>"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
</div>
</div>
</section>
<section class="section">
<section class="quote-strip">
<div class="container">
<h2 class="reveal" data-reveal>The story continues: updates</h2>
<div class="timeline">
<% (config.news || []).forEach(item => { %>
<article class="glass-card news-card reveal" data-reveal>
<p class="date"><%= item.date %></p>
<h3><%= item.title %></h3>
<a class="text-link" href="<%= item.url %>" target="_blank" rel="noopener noreferrer">View source →</a>
</article>
<% }) %>
<p>"Empowering anyone to stop the bleed with audio instructions and one-button activation."</p>
</div>
</section>
<section class="section feature-row">
<div class="container split split-visual">
<div class="split-media reveal" data-reveal>
<img src="<%= config.assets.images.company1 %>" alt="Team development and readiness planning" loading="lazy" />
</div>
<article class="split-copy reveal" data-reveal>
<h2>The challenge is not urgency alone — it is correct action under stress.</h2>
<p>Emergency scenes often involve first-time responders, noise, and confusion. AutoTQ’s design focus is practical usability so application steps are easier to execute when seconds count.</p>
<ul class="bullet-list">
<li>Addresses hemorrhage response where immediate intervention can be critical.</li>
<li>Supports first-on-scene users with guided operation rather than complex setup.</li>
<li>Built around broad emergency readiness use cases in public and professional settings.</li>
</ul>
</article>
</div>
</section>
<section class="section section-band">
<div class="container split split-reverse">
<article class="split-copy reveal" data-reveal>
<h2>Use-context readiness</h2>
<p>AutoTQ is positioned for organizations that need dependable bleeding-control preparedness across diverse environments.</p>
<div class="context-list">
<div><strong>Schools</strong><span>Emergency planning support for campuses and student activity areas.</span></div>
<div><strong>Construction</strong><span>High-risk jobsite preparedness where rapid intervention capability is essential.</span></div>
<div><strong>Public venues</strong><span>Scalable readiness for spaces with large and changing foot traffic.</span></div>
<div><strong>First response teams</strong><span>Operational integration conversations for trained public safety personnel.</span></div>
</div>
</article>
<div class="split-media reveal" data-reveal>
<img src="<%= config.assets.images.company2 %>" alt="AutoTQ deployment readiness across industries" loading="lazy" />
</div>
</div>
</section>
<section class="section section-alt">
<section class="section media-band">
<div class="container">
<h2 class="reveal" data-reveal>Voices from the field</h2>
<div class="grid-2">
<% (config.testimonials || []).forEach(t => { %>
<article class="glass-card quote-card reveal" data-reveal>
<p>“<%= t.quote %>”</p>
<span>— <%= t.name %>, <%= t.title %></span>
<div class="band-head reveal" data-reveal>
<h2>Video highlights</h2>
<p>Reference videos and deployment content.</p>
</div>
<div class="video-grid">
<article class="video-frame reveal" data-reveal>
<iframe src="https://www.youtube.com/embed/z7VjjfdjIhU" title="AutoTQ video highlight 1" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</article>
<article class="video-frame reveal" data-reveal>
<iframe src="https://www.youtube.com/embed/l2ocd5el0Yc" title="AutoTQ video highlight 2" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</article>
<% }) %>
</div>
</div>
</section>
<section class="section">
<div class="container cta-card glass-card reveal" data-reveal>
<h2>Write the next chapter with your team</h2>
<p>Contact AutoTQ for deployment planning, training, literature, and partnership details.</p>
<a href="/contact" class="btn btn-primary">Contact AutoTQ</a>
<div class="container split split-visual">
<article class="split-copy reveal" data-reveal>
<h2>Evidence orientation and cautious claims</h2>
<p>AutoTQ pages reference first-time user and occlusion findings, with source links available on the Research page. This site keeps statements aligned with those referenced source materials.</p>
<a href="/research" class="text-link">Go to Research sources →</a>
</article>
<div class="split-media reveal" data-reveal>
<img src="<%= config.assets.images.company3 %>" alt="Clinical and technical review context" loading="lazy" />
</div>
</div>
</section>
<section class="section section-alt">
<div class="container">
<h2 class="reveal" data-reveal>News and testimonials</h2>
<div class="news-testimonials">
<div class="timeline">
<% (config.news || []).slice(0, 3).forEach(item => { %>
<article class="news-row reveal" data-reveal>
<p class="date"><%= item.date %></p>
<h3><%= item.title %></h3>
<a class="text-link" href="<%= item.url %>" target="_blank" rel="noopener noreferrer">View source →</a>
</article>
<% }) %>
</div>
<div class="stacked-quotes">
<% (config.testimonials || []).slice(0, 2).forEach(t => { %>
<blockquote class="quote-panel reveal" data-reveal>
<p>“<%= t.quote %>”</p>
<cite>— <%= t.name %>, <%= t.title %></cite>
</blockquote>
<% }) %>
</div>
</div>
</div>
</section>
</main>

22
views/literature.ejs
View file

@ -1,16 +1,24 @@
<main>
<section class="page-hero">
<div class="container">
<h1>Literature</h1>
<p class="lead">Official AutoTQ literature and reference files.</p>
<div class="container split split-visual">
<div>
<h1>Literature</h1>
<p class="lead">Official AutoTQ literature and reference files for deployment planning, product details, and safety context.</p>
</div>
<div class="split-media reveal" data-reveal>
<img src="<%= config.assets.images.company6 %>" alt="AutoTQ literature and training material context" loading="lazy" />
</div>
</div>
</section>
<section class="section">
<div class="container grid-2">
<div class="container docs-list">
<% (config.literature || []).forEach((doc) => { %>
<article class="glass-card literature-card reveal" data-reveal>
<h3><%= doc.title %></h3>
<p>PDF document</p>
<article class="doc-row reveal" data-reveal>
<div>
<h3><%= doc.title %></h3>
<p>Reference document</p>
</div>
<a href="<%= doc.url %>" target="_blank" rel="noopener noreferrer" class="btn btn-primary">Open PDF</a>
</article>
<% }) %>

13
views/news.ejs
View file

@ -1,15 +1,20 @@
<main>
<section class="page-hero">
<div class="container">
<h1>News</h1>
<p class="lead">Recent AutoTQ news and press links.</p>
<div class="container split split-visual">
<div>
<h1>News</h1>
<p class="lead">Recent AutoTQ news and press links.</p>
</div>
<article class="video-frame reveal" data-reveal>
<iframe src="https://www.youtube.com/embed/rI2n9TlMYIU" title="AutoTQ press and awareness video" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</article>
</div>
</section>
<section class="section">
<div class="container timeline">
<% (config.news || []).forEach(item => { %>
<article class="glass-card news-card reveal" data-reveal>
<article class="news-row reveal" data-reveal>
<p class="date"><%= item.date %></p>
<h3><%= item.title %></h3>
<a class="text-link" href="<%= item.url %>" target="_blank" rel="noopener noreferrer">View source →</a>

11
views/partials/footer.ejs
View file

@ -12,9 +12,14 @@
<div>
<h4>Explore</h4>
<ul class="footer-links">
<% (config?.nav || []).forEach(item => { %>
<li><a href="<%= item.href %>"><%= item.label %></a></li>
<% }) %>
<li><a href="/">Home</a></li>
<li><a href="/about-autotq">About</a></li>
<li><a href="/company">Company</a></li>
<li><a href="/research">Research</a></li>
<li><a href="/literature">Literature</a></li>
<li><a href="/news">News</a></li>
<li><a href="/testimonials">Testimonials</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>

1
views/partials/header.ejs
View file

@ -33,7 +33,6 @@
%>
<a href="<%= item.href %>" class="<%= active ? 'active' : '' %>" <%= active ? 'aria-current="page"' : '' %>><%= item.label %></a>
<% }) %>
<a href="/contact" class="nav-cta nav-cta-link <%= pageName === 'contact' ? 'active' : '' %>" aria-label="Contact AutoTQ" <%= pageName === 'contact' ? 'aria-current="page"' : '' %>>Contact</a>
</div>
</nav>

37
views/research.ejs
View file

@ -2,23 +2,40 @@
<section class="page-hero">
<div class="container">
<h1>Research</h1>
<p class="lead">AutoTQ source materials reference first-time-user success and arterial occlusion findings.</p>
<p class="lead">AutoTQ source materials reference first-time-user success and arterial occlusion findings. Review linked summaries and source URLs.</p>
</div>
</section>
<section class="section media-band">
<div class="container split split-visual">
<article class="split-copy reveal" data-reveal>
<h2>Media overview</h2>
<p>Video content can help illustrate use and context alongside written research references.</p>
</article>
<article class="video-frame reveal" data-reveal>
<iframe src="https://www.youtube.com/embed/4PnhBm5WIg0" title="AutoTQ research and deployment overview" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</article>
</div>
</section>
<section class="section">
<div class="container grid-2">
<article class="glass-card reveal" data-reveal>
<h3>Occlusion Finding</h3>
<div class="container research-list">
<article class="research-item reveal" data-reveal>
<h3>Occlusion finding reference</h3>
<p>Source pages reference a 100% arterial occlusion finding.</p>
<p><a class="text-link" href="/occlusion">Read summary page →</a></p>
<p><a class="text-link" href="https://theautotq.com/occlusion" target="_blank" rel="noopener noreferrer">View source URL →</a></p>
<div class="item-links">
<a class="text-link" href="/occlusion">Read summary page →</a>
<a class="text-link" href="https://theautotq.com/occlusion" target="_blank" rel="noopener noreferrer">View source URL →</a>
</div>
</article>
<article class="glass-card reveal" data-reveal>
<h3>First-Time User Finding</h3>
<article class="research-item reveal" data-reveal>
<h3>First-time user finding reference</h3>
<p>Source pages reference 92% first-time-user success.</p>
<p><a class="text-link" href="/firsttimeusers">Read summary page →</a></p>
<p><a class="text-link" href="https://theautotq.com/firsttimeusers" target="_blank" rel="noopener noreferrer">View source URL →</a></p>
<div class="item-links">
<a class="text-link" href="/firsttimeusers">Read summary page →</a>
<a class="text-link" href="https://theautotq.com/firsttimeusers" target="_blank" rel="noopener noreferrer">View source URL →</a>
</div>
</article>
</div>
</section>

24
views/testimonials.ejs
View file

@ -1,17 +1,25 @@
<main>
<section class="page-hero">
<div class="container">
<h1>Testimonials</h1>
<p class="lead">Feedback from public safety and medical professionals.</p>
<div class="container split split-visual">
<div>
<h1>Testimonials</h1>
<p class="lead">Feedback from public safety and medical professionals.</p>
</div>
<div class="split-media reveal" data-reveal>
<img src="<%= config.assets.images.company7 %>" alt="Public safety and medical stakeholder engagement" loading="lazy" />
</div>
</div>
</section>
<section class="section section-alt">
<div class="container grid-2">
<% (config.testimonials || []).forEach(t => { %>
<article class="glass-card quote-card reveal" data-reveal>
<p>“<%= t.quote %>”</p>
<span>— <%= t.name %>, <%= t.title %></span>
<div class="container testimonials-stack">
<% (config.testimonials || []).forEach((t, i) => { %>
<article class="quote-row <%= i % 2 === 1 ? 'reverse' : '' %> reveal" data-reveal>
<div class="quote-mark">“</div>
<div>
<p><%= t.quote %></p>
<span>— <%= t.name %>, <%= t.title %></span>
</div>
</article>
<% }) %>
</div>