diff --git a/PROJECT.md b/PROJECT.md new file mode 100644 index 0000000..5355fc6 --- /dev/null +++ b/PROJECT.md @@ -0,0 +1,126 @@ +# 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. diff --git a/public/css/style.css b/public/css/style.css index 066a3d1..93a48a0 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,14 +1,15 @@ :root { - --bg: #fff7f7; - --bg-alt: #ffecec; - --bg-deep: #2a0f0f; - --text: #1f1414; - --muted: #5a4242; - --accent: #c81919; - --accent-2: #e12a2a; - --card: #ffffff; - --border: #f0caca; - --shadow: 0 12px 30px rgba(90, 15, 15, 0.12); + --bg: #fff8f8; + --bg-alt: #ffe4e4; + --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); } * { box-sizing: border-box; } @@ -17,12 +18,8 @@ html, body { margin: 0; padding: 0; } body { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text); - background: - radial-gradient(900px 400px at 100% -5%, rgba(200, 25, 25, 0.12), transparent 60%), - radial-gradient(700px 300px at 0% 30%, rgba(225, 42, 42, 0.08), transparent 60%), - var(--bg); - line-height: 1.75; - letter-spacing: 0.01em; + background: linear-gradient(180deg, #fff9f9 0%, #fff3f3 100%); + line-height: 1.7; font-size: 18px; overflow-x: hidden; } @@ -30,280 +27,237 @@ body { a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } -.container { width: min(1180px, calc(100% - 2.25rem)); margin-inline: auto; } -.section { padding: 5.75rem 0; } +.container { width: min(1160px, calc(100% - 2rem)); margin-inline: auto; } +.section { padding: 5rem 0; } .section-alt { - background: linear-gradient(180deg, #ffe9e9 0%, #ffdede 100%); - border-top: 1px solid #f6d1d1; - border-bottom: 1px solid #f6d1d1; + background: linear-gradient(180deg, #ffe3e3 0%, #ffd8d8 100%); + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); } -.story-band { padding: 4.5rem 0; background: linear-gradient(180deg, rgba(200,25,25,.08), rgba(200,25,25,.02)); border-top: 1px solid #f3c3c3; border-bottom: 1px solid #f3c3c3; } -.story-steps { display: grid; gap: 1rem; } -.story-step { padding: 1.1rem 1.15rem; border-left: 4px solid var(--accent); background: rgba(255,255,255,.55); border-radius: 10px; } -.story-kicker { color: #a61c1c; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; margin-bottom: .35rem; } - -h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.015em; } -p { margin: 0 0 1.1rem; font-size: 1.09rem; color: var(--text); } +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; } +p { margin: 0 0 1rem; color: var(--text); } +.lead { color: var(--muted); font-size: 1.15rem; max-width: 70ch; } .site-header { position: sticky; top: 0; - z-index: 999; - background: rgba(255, 245, 245, 0.88); + z-index: 1000; + background: rgba(255, 247, 247, 0.95); backdrop-filter: blur(10px); - border-bottom: 1px solid rgba(200, 25, 25, 0.16); - transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease; + border-bottom: 1px solid rgba(200, 25, 25, 0.2); + transition: box-shadow .2s ease, background-color .2s ease; } - .site-header.is-scrolled { - background: rgba(255, 242, 242, 0.97); - border-bottom-color: rgba(200, 25, 25, 0.28); - box-shadow: 0 10px 24px rgba(88, 12, 12, 0.16); + background: rgba(255, 244, 244, 0.98); + box-shadow: 0 12px 24px rgba(94, 14, 14, 0.16); } -.nav-wrap { - display: flex; +.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 86px; gap: 1rem; } + +.brand { + display: inline-flex; align-items: center; - justify-content: space-between; - min-height: 84px; - gap: 1rem; + gap: .7rem; + font-weight: 800; + color: #7f1111; } - -.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; flex-shrink: 0; } -.brand img { width: 46px; height: 46px; object-fit: contain; } -.brand span { font-size: 1.05rem; } - -.site-nav { - display: block; - min-width: 0; -} - -.nav-links { - display: flex; - align-items: center; - justify-content: flex-end; - gap: .6rem; - flex-wrap: wrap; - min-width: 0; +.brand img { + width: 56px; + height: 56px; + object-fit: contain; + border-radius: 12px; + background: #fff; + border: 1px solid var(--border); + padding: .25rem; } +.brand span { font-size: 1.08rem; } +.site-nav { display: block; } +.nav-links { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; justify-content: flex-end; } .nav-links a { - color: #5a3f3f; + color: #5d3f3f; font-weight: 700; - font-size: 1rem; - line-height: 1; - padding: .58rem .86rem; + font-size: .95rem; + padding: .58rem .82rem; border-radius: 999px; border: 1px solid transparent; - background: transparent; - white-space: nowrap; - transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease; + transition: .2s ease; } - -.nav-links a:hover { - color: var(--accent); - border-color: rgba(200, 25, 25, 0.28); - background: #fff0f0; - transform: translateY(-1px); -} - +.nav-links a:hover, .nav-links a.active { - color: #8d1414; - background: #ffe4e4; - border-color: rgba(200, 25, 25, 0.35); + color: var(--brand-red); + border-color: rgba(200, 25, 25, .3); + background: #ffecec; } .nav-cta, .nav-links a.nav-cta-link { - display: inline-flex; - align-items: center; - justify-content: center; - padding: .66rem 1.05rem; - border-radius: 999px; - border: 1px solid #b71414; - background: linear-gradient(180deg, #df2a2a 0%, #bf1616 100%); + background: linear-gradient(180deg, #dc2b2b 0%, #b81414 100%); + border: 1px solid #a81010; color: #fff; font-weight: 800; - white-space: nowrap; - box-shadow: 0 8px 16px rgba(161, 14, 14, 0.22); + box-shadow: 0 8px 18px rgba(148, 15, 15, 0.25); } - .nav-cta:hover, -.nav-links a.nav-cta-link:hover { - color: #fff; - transform: translateY(-1px); - box-shadow: 0 10px 20px rgba(161, 14, 14, 0.3); - filter: saturate(1.05); - border-color: #a91212; - background: linear-gradient(180deg, #e23535 0%, #bb1212 100%); -} - +.nav-links a.nav-cta-link:hover, .nav-links a.nav-cta-link.active { color: #fff; - border-color: #a91212; - background: linear-gradient(180deg, #e23535 0%, #bb1212 100%); + border-color: #930d0d; + background: linear-gradient(180deg, #e43535 0%, #ab0f0f 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; } -.hero { padding: 6rem 0 4.5rem; position: relative; overflow: clip; } -.hero-bg { position: absolute; inset: 0; background: radial-gradient(700px 350px at 70% -30%, rgba(209,32,32,.18), transparent), radial-gradient(500px 280px at 20% 0%, rgba(220,0,0,.12), transparent); } -.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .4; pointer-events: none; animation: drift 10s ease-in-out infinite alternate; } -.hero-orb-1 { width: 260px; height: 260px; right: -70px; top: 60px; background: radial-gradient(circle at 30% 30%, #ff7777, #c81919); } -.hero-orb-2 { width: 180px; height: 180px; left: -60px; bottom: 20px; background: radial-gradient(circle at 30% 30%, #ffc0c0, #e12a2a); animation-duration: 14s; } -@keyframes drift { from { transform: translateY(-8px); } to { transform: translateY(14px); } } +.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); +} +.hero-bg { + position: absolute; + inset: 0; + background: radial-gradient(650px 280px at 80% -20%, rgba(200, 25, 25, 0.2), 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-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; } -.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.2rem; align-items: center; } -.eyebrow { color: var(--accent); font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } -h1 { font-size: clamp(2.45rem, 5.3vw, 4.2rem); margin: .25rem 0 .95rem; } -h2 { font-size: clamp(2rem, 3.6vw, 2.85rem); margin: 0 0 1rem; } -h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin: 0 0 .65rem; } -.lead { color: var(--muted); font-size: 1.22rem; max-width: 68ch; } -.hero-actions { display: flex; gap: .85rem; margin-top: 1.5rem; flex-wrap: wrap; } +.page-hero { + padding: 4.8rem 0 2.2rem; + background: linear-gradient(180deg, #ffe3e3 0%, #fff6f6 100%); + border-bottom: 1px solid var(--border); +} + +.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; +} +.story-steps { display: grid; gap: 1rem; } +.story-step { + padding: 1rem 1.1rem; + border-left: 4px solid var(--brand-red); + border-radius: 10px; + background: rgba(255, 255, 255, .75); +} +.story-kicker { color: var(--brand-red-strong); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; } + +.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; } + +.glass-card { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 16px; + box-shadow: var(--shadow); + padding: 1.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: .84rem 1.2rem; + padding: .82rem 1.18rem; border-radius: 999px; border: 1px solid transparent; font-weight: 700; - transition: .25s ease; + transition: .2s ease; } -.btn-primary { background: var(--accent); color: #fff; } -.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(160, 22, 22, .33); } -.btn-ghost { border-color: #e4b1b1; background: #fff5f5; color: #7a2222; } -.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: #ffeaea; } - -/* Less card fragmentation: default cards are lighter and blend into the narrative flow */ -.glass-card { - background: transparent; - border: 0; - border-radius: 0; - padding: 0; - box-shadow: none; - transition: transform .25s ease; +.btn-primary { + background: linear-gradient(180deg, #dd2f2f 0%, #b81212 100%); + color: #fff; + border-color: #a71212; } - -/* Panels only where structure is useful */ -.media-card, -.video-frame, -.stat-card, -.news-card, -.quote-card, -.cta-card, -.profile-card, -.team-card, -.inquiry-form { - background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .98)); - border: 1px solid var(--border); - border-radius: 18px; - box-shadow: var(--shadow); - padding: 1.25rem; +.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; } -.media-card { padding: .75rem; } -.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; } -.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.3rem; } -.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.3rem; } -.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; align-items: start; } -.page-hero { padding: 5.4rem 0 2rem; } - -.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; } -.stat-card h3 { font-size: 2.25rem; margin: .1rem 0; color: var(--accent); } -.chip-list { display: flex; flex-wrap: wrap; gap: .55rem; } -.chip { border: 1px solid #efb2b2; background: #ffecec; color: #961717; padding: .46rem .74rem; border-radius: 999px; font-weight: 700; font-size: .95rem; } -.cta-card { text-align: left; } -.cta-card h2 { margin-bottom: .65rem; } -.text-link { color: var(--accent); font-weight: 700; } +.text-link { color: var(--brand-red); font-weight: 700; } .text-link:hover { text-decoration: underline; } -.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .9rem; } -.gallery-grid img { border-radius: 12px; min-height: 170px; object-fit: cover; border: 1px solid var(--border); } -.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; } +.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: 20px; object-fit: cover; margin-bottom: 1rem; } +.profile-card img { width: 220px; height: 220px; border-radius: 18px; object-fit: cover; margin-bottom: .9rem; } -.timeline { - display: grid; - gap: 1.15rem; - position: relative; - padding-left: 1.4rem; -} -.timeline::before { - content: ""; - position: absolute; - left: .4rem; - top: .25rem; - bottom: .25rem; - width: 2px; - background: linear-gradient(180deg, rgba(200,25,25,.5), rgba(200,25,25,.12)); -} -.news-card { - position: relative; - padding-left: 1.25rem; -} -.news-card::before { - content: ""; - position: absolute; - left: -.75rem; - top: 1.15rem; - width: .7rem; - height: .7rem; - border-radius: 50%; - background: var(--accent); - box-shadow: 0 0 0 4px rgba(200, 25, 25, .14); -} -.news-card .date, .date { color: #a61c1c; font-weight: 800; font-size: .95rem; } -.quote-card p { font-size: 1.14rem; line-height: 1.7; } - -.inquiry-form label { display: block; font-weight: 600; margin-bottom: .95rem; } +.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, .inquiry-form textarea, .inquiry-form select { width: 100%; margin-top: .35rem; - padding: .78rem .9rem; + padding: .75rem .85rem; border-radius: 12px; - border: 1px solid #d6b3b3; + border: 1px solid #d9b7b7; background: #fff; - color: var(--text); font-size: 1rem; - transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } - -.inquiry-form input:hover, -.inquiry-form textarea:hover, -.inquiry-form select:hover { border-color: #bf9a9a; } - -.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } -.alert { margin-top: 1rem; padding: .8rem .95rem; border: 1px solid #f0b3b3; background: #fff1f1; color: #b42323; border-radius: 12px; } -.form-status { margin-top: .8rem; font-weight: 700; } +.alert { margin-top: .9rem; padding: .8rem .9rem; border: 1px solid #edb5b5; background: #fff1f1; color: #aa2020; border-radius: 12px; } +.form-status { margin-top: .75rem; font-weight: 700; } .form-status.success { color: #146c2f; } .form-status.error { color: #b42323; } .form-status.pending { color: #8a5a00; } .site-footer { - border-top: 1px solid #4b1616; - margin-top: 3.5rem; - padding-top: 2.9rem; - background: linear-gradient(180deg, #2f1010, #1a0909); - color: #f9eded; + margin-top: 3rem; + padding-top: 2.6rem; + border-top: 1px solid #4f1616; + background: linear-gradient(180deg, #2f1010, #180808); + color: #f8eded; } -.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 1.4rem; } +.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: .54rem 0; color: #e1bcbc; } -.footer-links a:hover { color: #ffffff; } -.footer-bottom { padding: 1.3rem 0 1.9rem; color: #dcb7b7; } -.legal { color: #dcb7b7; } +.footer-links li { margin: .5rem 0; color: #dfbcbc; } +.footer-links a:hover { color: #fff; } +.footer-bottom { padding: 1.2rem 0 1.8rem; color: #ddb7b7; } +.legal { color: #ddb7b7; } -.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } +.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } a:focus-visible, @@ -313,14 +267,12 @@ button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { - outline: 3px solid rgba(200, 25, 25, .28); + outline: 3px solid rgba(200, 25, 25, .25); outline-offset: 2px; - box-shadow: 0 0 0 1px rgba(200, 25, 25, .36); - border-color: rgba(200, 25, 25, .5); } @media (max-width: 980px) { - .hero-grid, .split, .grid-3, .grid-2, .footer-grid, .form-grid, .gallery-grid, .team-grid, .stats-grid { grid-template-columns: 1fr; } + .hero-grid, .split, .grid-3, .grid-2, .team-grid, .gallery-grid, .stats-grid, .footer-grid, .form-grid { grid-template-columns: 1fr; } .mobile-toggle { display: inline-block; } @@ -332,57 +284,32 @@ select:focus-visible { background: rgba(255, 244, 244, .99); border: 1px solid #f0cccc; box-shadow: 0 14px 35px rgba(87, 13, 13, .2); - border-radius: 16px; - padding: .9rem; - flex-direction: column; - align-items: stretch; - gap: .7rem; - transform-origin: top center; + border-radius: 14px; + padding: .85rem; transform: translateY(-8px) scale(.98); opacity: 0; pointer-events: none; visibility: hidden; - transition: transform .22s ease, opacity .22s ease, visibility .22s ease; + transition: transform .22s ease, opacity .22s ease; } - .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 { width: 100%; flex-direction: column; align-items: stretch; gap: .25rem; } .nav-links a { width: 100%; text-align: left; - padding: .75rem .7rem; - border-bottom: 0; - border-left: 3px solid transparent; border-radius: 10px; background: #fff; + border-left: 3px solid transparent; } - .nav-links a:hover, - .nav-links a.active { - border-left-color: var(--accent); - background: #fff0f0; - } + .nav-links a.active { border-left-color: var(--brand-red); } + .nav-cta { width: 100%; text-align: center; justify-content: center; } - .nav-cta { - width: 100%; - justify-content: center; - text-align: center; - border-radius: 12px; - margin-top: .25rem; - } - - .section { padding: 4.25rem 0; } + .section { padding: 4rem 0; } body { font-size: 17px; } } diff --git a/public/js/main.js b/public/js/main.js index 9d455b1..3d965e3 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -59,19 +59,6 @@ reveals.forEach((el) => el.classList.add('is-visible')); } - const parallaxEls = document.querySelectorAll('[data-parallax]'); - if (parallaxEls.length) { - const onScroll = () => { - const y = window.scrollY || 0; - parallaxEls.forEach((el) => { - const speed = Number(el.getAttribute('data-parallax')) || 0; - el.style.transform = `translateY(${y * speed}px)`; - }); - }; - onScroll(); - window.addEventListener('scroll', onScroll, { passive: true }); - } - const contactForm = document.getElementById('contactForm'); const status = document.getElementById('formStatus'); const endpoint = 'https://api.corben.world/forms/af90392e-9399-4778-9b80-9eed83580f1d/submit'; diff --git a/views/index.ejs b/views/index.ejs index 52fa44e..a0c7e6b 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -1,10 +1,12 @@
- -
+
+ <%= 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.

@@ -13,7 +15,7 @@ See How AutoTQ Works
-
+
AutoTQ demonstration
diff --git a/views/partials/header.ejs b/views/partials/header.ejs index e7550a8..f7eef17 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -15,81 +15,25 @@ - <% - const navItems = (config?.nav || []); - const mainItems = []; - const productItems = []; - const resourceItems = []; - - navItems.forEach((item) => { - const key = `${item.label || ''} ${item.href || ''}`.toLowerCase(); - - if ((item.href || '') === '/') { - mainItems.push(item); - return; - } - - if (/about/.test(key)) { - mainItems.push(item); - return; - } - - if (/shop|training|report/.test(key)) { - productItems.push(item); - return; - } - - if (/literature|testimonial|first|occlusion|news|update|video|media/.test(key)) { - resourceItems.push(item); - return; - } - - mainItems.push(item); - }); - - const uniqueByHref = (arr) => arr.filter((it, idx, src) => src.findIndex(x => x.href === it.href) === idx); - const main = uniqueByHref(mainItems); - const products = uniqueByHref(productItems); - const resources = uniqueByHref(resourceItems); - %> + <% const primaryNav = [ + { label: 'Home', href: '/' }, + { label: 'About', href: '/about-autotq' }, + { label: 'Company', href: '/company' }, + { label: 'Research', href: '/research' }, + { label: 'Literature', href: '/literature' }, + { label: 'News', href: '/news' }, + { label: 'Testimonials', href: '/testimonials' } + ]; %>