diff --git a/PROJECT.md b/PROJECT.md index 5355fc6..71bffb4 100644 --- a/PROJECT.md +++ b/PROJECT.md @@ -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. diff --git a/public/css/style.css b/public/css/style.css index 93a48a0..555280c 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -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; } diff --git a/views/company.ejs b/views/company.ejs index 7cb61a5..c39e758 100644 --- a/views/company.ejs +++ b/views/company.ejs @@ -1,8 +1,26 @@
-
-

Company

-

<%= config.brand.legalName %> is focused on improving emergency bleeding response through intuitive automation and practical deployment models.

+
+
+

Company

+

<%= config.brand.legalName %> is focused on improving emergency bleeding response through intuitive automation and practical readiness programs.

+
+
+ AutoTQ team collaboration +
+
+
+ +
+
+
+

Operating mission

+

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.

+

This includes product development, quality systems, operational planning, and education-oriented resources for real-world deployment settings.

+
+
+ AutoTQ operations and planning +
@@ -11,25 +29,16 @@

Team

<% (config.team || []).forEach(member => { %> -
- -
-
-

Company Gallery

- -
-
diff --git a/views/contact.ejs b/views/contact.ejs index fe7d818..2d36285 100644 --- a/views/contact.ejs +++ b/views/contact.ejs @@ -1,8 +1,13 @@
-
-

Contact

-

Connect with the AutoTQ team.

+
+
+

Contact

+

Connect with the AutoTQ team about emergency readiness planning, literature, and deployment pathways.

+
+
+ AutoTQ product for readiness planning discussions +
diff --git a/views/index.ejs b/views/index.ejs index a0c7e6b..639737f 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -3,110 +3,114 @@
-
- <%= config.brand.name %> logo - <%= config.brand.name %> -
-

FDA-Registered • Patented • Trusted Nationwide

-

A bleeding emergency becomes a race against time.

-

AutoTQ was built so the first person on scene can move from panic to action in seconds, with guided operation and one-button activation.

+

Mission-Driven Emergency Readiness

+

When hemorrhage risk is measured in minutes, response clarity matters.

+

AutoTQ focuses on helping people act under pressure through one-button activation and guided steps designed for high-stress moments.

-
- AutoTQ demonstration +
+ AutoTQ in emergency readiness context + AutoTQ product detail
-
-
-
-

Chapter 1

-

The gap

-

In severe extremity bleeding events, bystanders and teams need a response that is fast, repeatable, and simple under stress.

-
-
-

Chapter 2

-

The response

-

AutoTQ simplifies intervention through a two-step process and onboard guidance so users can focus on the patient, not guesswork.

-
-
-

Chapter 3

-

The outcome

-

Public research and deployment content highlight strong first-time usability and arterial occlusion performance in context.

-
-
-
- -
-
-
-

Proof points in context

-

These figures come from source research/deployment pages referenced throughout the site.

-
-
-

92%

First-time user success from source research pages.

-

100%

Arterial occlusion from source research pages.

-
-
-
- -
-
-
-

See deployment footage

-

Video source: Cape Coral Police deployment page.

-

Open source page →

-
-
- -
-
-
- -
+
-

The story continues: updates

-
- <% (config.news || []).forEach(item => { %> - - <% }) %> +

"Empowering anyone to stop the bleed with audio instructions and one-button activation."

+
+
+ +
+
+
+ Team development and readiness planning +
+
+

The challenge is not urgency alone — it is correct action under stress.

+

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.

+
    +
  • Addresses hemorrhage response where immediate intervention can be critical.
  • +
  • Supports first-on-scene users with guided operation rather than complex setup.
  • +
  • Built around broad emergency readiness use cases in public and professional settings.
  • +
+
+
+
+ +
+
+
+

Use-context readiness

+

AutoTQ is positioned for organizations that need dependable bleeding-control preparedness across diverse environments.

+
+
SchoolsEmergency planning support for campuses and student activity areas.
+
ConstructionHigh-risk jobsite preparedness where rapid intervention capability is essential.
+
Public venuesScalable readiness for spaces with large and changing foot traffic.
+
First response teamsOperational integration conversations for trained public safety personnel.
+
+
+
+ AutoTQ deployment readiness across industries
-
+
-

Voices from the field

-
- <% (config.testimonials || []).forEach(t => { %> -
-

“<%= t.quote %>”

- — <%= t.name %>, <%= t.title %> +
+

Video highlights

+

Reference videos and deployment content.

+
+
+
+ +
+
+
- <% }) %>
-
-

Write the next chapter with your team

-

Contact AutoTQ for deployment planning, training, literature, and partnership details.

- Contact AutoTQ +
+
+

Evidence orientation and cautious claims

+

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.

+ Go to Research sources → +
+
+ Clinical and technical review context +
+
+
+ +
+
+

News and testimonials

+
+
+ <% (config.news || []).slice(0, 3).forEach(item => { %> + + <% }) %> +
+
+ <% (config.testimonials || []).slice(0, 2).forEach(t => { %> +
+

“<%= t.quote %>”

+ — <%= t.name %>, <%= t.title %> +
+ <% }) %> +
+
diff --git a/views/literature.ejs b/views/literature.ejs index 00f947c..c7f25f7 100644 --- a/views/literature.ejs +++ b/views/literature.ejs @@ -1,16 +1,24 @@
-
-

Literature

-

Official AutoTQ literature and reference files.

+
+
+

Literature

+

Official AutoTQ literature and reference files for deployment planning, product details, and safety context.

+
+
+ AutoTQ literature and training material context +
+
-
+
<% (config.literature || []).forEach((doc) => { %> -
-

<%= doc.title %>

-

PDF document

+
+
+

<%= doc.title %>

+

Reference document

+
Open PDF
<% }) %> diff --git a/views/news.ejs b/views/news.ejs index 01f1b1f..eff9f56 100644 --- a/views/news.ejs +++ b/views/news.ejs @@ -1,15 +1,20 @@
-
-

News

-

Recent AutoTQ news and press links.

+
+
+

News

+

Recent AutoTQ news and press links.

+
+
+ +
<% (config.news || []).forEach(item => { %> -
+

<%= item.date %>

<%= item.title %>

View source → diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs index 0d349d3..08c14f1 100644 --- a/views/partials/footer.ejs +++ b/views/partials/footer.ejs @@ -12,9 +12,14 @@

Explore

diff --git a/views/partials/header.ejs b/views/partials/header.ejs index f7eef17..d4f48c2 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -33,7 +33,6 @@ %> ><%= item.label %> <% }) %> - >Contact
diff --git a/views/research.ejs b/views/research.ejs index 23ec98c..15d2b90 100644 --- a/views/research.ejs +++ b/views/research.ejs @@ -2,23 +2,40 @@

Research

-

AutoTQ source materials reference first-time-user success and arterial occlusion findings.

+

AutoTQ source materials reference first-time-user success and arterial occlusion findings. Review linked summaries and source URLs.

+
+
+ +
+
+
+

Media overview

+

Video content can help illustrate use and context alongside written research references.

+
+
+ +
-
-
diff --git a/views/testimonials.ejs b/views/testimonials.ejs index 266b31c..8bc3034 100644 --- a/views/testimonials.ejs +++ b/views/testimonials.ejs @@ -1,17 +1,25 @@
-
-

Testimonials

-

Feedback from public safety and medical professionals.

+
+
+

Testimonials

+

Feedback from public safety and medical professionals.

+
+
+ Public safety and medical stakeholder engagement +
-
- <% (config.testimonials || []).forEach(t => { %> -
-

“<%= t.quote %>”

- — <%= t.name %>, <%= t.title %> +
+ <% (config.testimonials || []).forEach((t, i) => { %> +
+
+
+

<%= t.quote %>

+ — <%= t.name %>, <%= t.title %> +
<% }) %>