Apply v3 design review: hero CTA hierarchy, mobile responsiveness, type scale, sponsor strip
- Move donate button under H1 in reading path (was orphaned bottom-right, hidden on mobile) - Hero height 63→70vh; responsive padding via CSS (88px/24px mobile, 96px/48px desktop) - Type scale: eyebrow 12px/0.25em → 13px/0.2em; H1 margins snapped to 8px grid; blockquote 16px/1.6 - CTA cards on mobile: 200→280px height; force .cta-sub/.cta-more visible (were hover-only) - Video body text capped at 620px (~65ch, was 680px/~85ch) - Sponsors demoted to compact strip — removed large serif heading that outweighed CTAs - Footer quick links: min-height 44px tap targets on mobile Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Calum Muir
parent
a319016dbb
commit
ade2c3da30
2 changed files with 36 additions and 31 deletions
|
|
@ -50,11 +50,11 @@ const year = new Date().getFullYear();
|
||||||
Quick links
|
Quick links
|
||||||
</p>
|
</p>
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="flex flex-col gap-2.5">
|
<ul class="flex flex-col">
|
||||||
{quickLinks.map((link) => (
|
{quickLinks.map((link) => (
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
class="[font-family:'Public_Sans',sans-serif] font-semibold text-sm text-black/70 hover:underline"
|
class="[font-family:'Public_Sans',sans-serif] font-semibold text-sm text-black/70 hover:underline flex items-center min-h-[44px]"
|
||||||
href={link.href}
|
href={link.href}
|
||||||
>
|
>
|
||||||
{link.label}
|
{link.label}
|
||||||
|
|
|
||||||
|
|
@ -104,7 +104,9 @@ const sponsors = cms?.sponsors?.length ? cms.sponsors : DEFAULTS.sponsor
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.cta-editorial { flex-direction: column; height: auto; }
|
.cta-editorial { flex-direction: column; height: auto; }
|
||||||
.cta-card { flex: none; height: 200px; }
|
.cta-card { flex: none; height: 280px; }
|
||||||
|
.cta-sub { opacity: 1 !important; }
|
||||||
|
.cta-more { opacity: 1 !important; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-embed {
|
.video-embed {
|
||||||
|
|
@ -149,7 +151,14 @@ const sponsors = cms?.sponsors?.length ? cms.sponsors : DEFAULTS.sponsor
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.scroll-indicator { display: none; }
|
.scroll-indicator { display: none; }
|
||||||
.hero-donate { display: none; }
|
}
|
||||||
|
|
||||||
|
/* Hero content padding: clear the fixed nav */
|
||||||
|
#hero-content {
|
||||||
|
padding: 96px 48px 48px;
|
||||||
|
}
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
#hero-content { padding: 88px 24px 32px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Donate modal ── */
|
/* ── Donate modal ── */
|
||||||
|
|
@ -218,7 +227,7 @@ const sponsors = cms?.sponsors?.length ? cms.sponsors : DEFAULTS.sponsor
|
||||||
<main class="w-full">
|
<main class="w-full">
|
||||||
|
|
||||||
<!-- ── HERO ── -->
|
<!-- ── HERO ── -->
|
||||||
<section class="relative w-full overflow-hidden" style="min-height: 63vh;">
|
<section class="relative w-full overflow-hidden" style="min-height: 70vh;">
|
||||||
<img
|
<img
|
||||||
class="absolute inset-0 h-full w-full object-cover"
|
class="absolute inset-0 h-full w-full object-cover"
|
||||||
style="object-position: 50% 38%;"
|
style="object-position: 50% 38%;"
|
||||||
|
|
@ -235,18 +244,30 @@ const sponsors = cms?.sponsors?.length ? cms.sponsors : DEFAULTS.sponsor
|
||||||
|
|
||||||
<!-- Hero content -->
|
<!-- Hero content -->
|
||||||
<div
|
<div
|
||||||
|
id="hero-content"
|
||||||
class="relative flex flex-col"
|
class="relative flex flex-col"
|
||||||
style="min-height: 63vh; padding: 120px 28px 72px;"
|
style="min-height: 70vh;"
|
||||||
>
|
>
|
||||||
<!-- Headline block -->
|
<!-- Headline block -->
|
||||||
<div class="anim-fade-up" style="max-width: 640px; margin-top: 16px;">
|
<div class="anim-fade-up" style="max-width: 640px; margin-top: 8px;">
|
||||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.75);">
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.75);">
|
||||||
Highland Group RDA · Since 1975
|
Highland Group RDA · Since 1975
|
||||||
</p>
|
</p>
|
||||||
<div style="margin-top: 14px; width: 48px; height: 2px; background: #7DA371;" />
|
<div style="margin-top: 16px; width: 48px; height: 2px; background: #7DA371;" />
|
||||||
<h1 style="margin-top: 18px; font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(34px, 5vw, 62px); color: #F6F1E8; line-height: 1.12;">
|
<h1 style="margin-top: 16px; font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(31px, 5.5vw, 61px); color: #F6F1E8; line-height: 1.1;">
|
||||||
{heroHeadline}
|
{heroHeadline}
|
||||||
</h1>
|
</h1>
|
||||||
|
<div style="margin-top: 32px;">
|
||||||
|
<button
|
||||||
|
onclick="openDonateModal()"
|
||||||
|
style="display: inline-flex; align-items: center; gap: 10px; background: #f5d445; color: #000; border: none; border-radius: 9999px; padding: 16px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 18px rgba(0,0,0,0.32); transition: background 0.18s ease;"
|
||||||
|
onmouseover="this.style.background='#e8c933'" onmouseout="this.style.background='#f5d445'"
|
||||||
|
aria-label="Open donation form"
|
||||||
|
>
|
||||||
|
Donate
|
||||||
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Mission blockquote -->
|
<!-- Mission blockquote -->
|
||||||
|
|
@ -255,24 +276,12 @@ const sponsors = cms?.sponsors?.length ? cms.sponsors : DEFAULTS.sponsor
|
||||||
style="margin-top: auto; max-width: 500px; background: rgba(0,0,0,0.48); backdrop-filter: blur(6px); border-radius: 7px; padding: 22px 26px;"
|
style="margin-top: auto; max-width: 500px; background: rgba(0,0,0,0.48); backdrop-filter: blur(6px); border-radius: 7px; padding: 22px 26px;"
|
||||||
>
|
>
|
||||||
<div style="width: 32px; height: 3px; background: #7DA371; margin-bottom: 14px;" />
|
<div style="width: 32px; height: 3px; background: #7DA371; margin-bottom: 14px;" />
|
||||||
<blockquote style="font-family: 'Merriweather', serif; font-weight: 700; font-style: italic; font-size: clamp(15px, 1.5vw, 18px); color: #F6F1E8; line-height: 1.55; margin: 0;">
|
<blockquote style="font-family: 'Merriweather', serif; font-weight: 700; font-style: italic; font-size: 16px; color: #F6F1E8; line-height: 1.6; margin: 0;">
|
||||||
{heroMission}
|
{heroMission}
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Donate button (absolute, hidden on mobile) -->
|
|
||||||
<button
|
|
||||||
onclick="openDonateModal()"
|
|
||||||
class="absolute hero-donate"
|
|
||||||
style="bottom: 40px; right: 28px; display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: #fff; border: none; border-radius: 9999px; padding: 16px 28px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 18px rgba(0,0,0,0.32); transition: background 0.18s ease;"
|
|
||||||
onmouseover="this.style.background='#5a7d55'" onmouseout="this.style.background='#7DA371'"
|
|
||||||
aria-label="Open donation form"
|
|
||||||
>
|
|
||||||
Donate
|
|
||||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Scroll indicator (absolute, hidden on mobile) -->
|
<!-- Scroll indicator (absolute, hidden on mobile) -->
|
||||||
<div
|
<div
|
||||||
class="scroll-indicator absolute"
|
class="scroll-indicator absolute"
|
||||||
|
|
@ -288,13 +297,13 @@ const sponsors = cms?.sponsors?.length ? cms.sponsors : DEFAULTS.sponsor
|
||||||
<!-- ── VIDEO ── -->
|
<!-- ── VIDEO ── -->
|
||||||
<section style="background: #1e2e1a; padding: clamp(48px, 8vw, 80px) clamp(24px, 5vw, 56px);">
|
<section style="background: #1e2e1a; padding: clamp(48px, 8vw, 80px) clamp(24px, 5vw, 56px);">
|
||||||
<div style="max-width: 960px; margin: 0 auto;">
|
<div style="max-width: 960px; margin: 0 auto;">
|
||||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #7DA371; margin-bottom: 12px;">
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: #7DA371; margin-bottom: 16px;">
|
||||||
Our Story
|
Our Story
|
||||||
</p>
|
</p>
|
||||||
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(24px, 3vw, 38px); color: #F6F1E8; margin-bottom: 20px; line-height: 1.2; max-width: 600px;">
|
<h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(24px, 3vw, 38px); color: #F6F1E8; margin-bottom: 20px; line-height: 1.2; max-width: 600px;">
|
||||||
{videoHeading}
|
{videoHeading}
|
||||||
</h2>
|
</h2>
|
||||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(246,241,232,0.75); line-height: 1.65; max-width: 680px; margin-bottom: 40px;">
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 16px; color: rgba(246,241,232,0.75); line-height: 1.6; max-width: 620px; margin-bottom: 40px;">
|
||||||
{videoBody}
|
{videoBody}
|
||||||
</p>
|
</p>
|
||||||
<div class="video-embed" style="max-width: 860px; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5);">
|
<div class="video-embed" style="max-width: 860px; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5);">
|
||||||
|
|
@ -365,16 +374,12 @@ const sponsors = cms?.sponsors?.length ? cms.sponsors : DEFAULTS.sponsor
|
||||||
<!-- ── SPONSORS ── -->
|
<!-- ── SPONSORS ── -->
|
||||||
<section style="background: #1e2e1a; padding: clamp(48px, 8vw, 72px) clamp(24px, 5vw, 56px);">
|
<section style="background: #1e2e1a; padding: clamp(48px, 8vw, 72px) clamp(24px, 5vw, 56px);">
|
||||||
<div style="max-width: 1100px; margin: 0 auto;">
|
<div style="max-width: 1100px; margin: 0 auto;">
|
||||||
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #7DA371; text-align: center; margin-bottom: 10px;">
|
<p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: #7DA371; text-align: center; margin-bottom: 32px;">
|
||||||
Supporters & Sponsors
|
Supporters & Sponsors
|
||||||
</p>
|
</p>
|
||||||
<div style="width: 36px; height: 2px; background: #7DA371; margin: 0 auto 32px;" />
|
|
||||||
<p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(20px, 2.5vw, 30px); color: #F6F1E8; text-align: center; margin-bottom: 48px; line-height: 1.2;">
|
|
||||||
{sponsorHeading}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!-- Current sponsors -->
|
<!-- Current sponsors -->
|
||||||
<div style="display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; align-items: center; margin-bottom: 64px;">
|
<div style="display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; align-items: center; margin-bottom: 48px;">
|
||||||
{sponsors.map((s) => (
|
{sponsors.map((s) => (
|
||||||
<div class="sponsor-logo">
|
<div class="sponsor-logo">
|
||||||
{s.url
|
{s.url
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue