fix(landing): align early intervention campaign header
This commit is contained in:
5 files changed
+79
-34
No files matched your search
@@ -19,3 +19,69 @@ const tel = phone.replace(/[^0-9+]/g, '');
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
/* Keep the shared campaign header independent of each landing page's body CSS. */
|
||||
.site-header {
|
||||
background: white;
|
||||
color: #243f7e;
|
||||
font-family: Rubik, ui-sans-serif, system-ui, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
font-synthesis: none;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.container { width: min(calc(100% - 80px), 1200px); margin-inline: auto; }
|
||||
.site-header__ribbon { background: #254080; color: white; font-size: .71rem; letter-spacing: .025em; padding: 8px 0; }
|
||||
.site-header__ribbon .container { display: flex; justify-content: space-between; gap: 16px; }
|
||||
.site-header__inner { min-height: 108px; display: flex; gap: 24px; align-items: center; justify-content: space-between; padding-block: 14px; }
|
||||
.brand { display: block; flex: 0 0 auto; }
|
||||
.brand img { display: block; width: 174px; height: auto; max-width: 100%; }
|
||||
.header-actions { display: flex; gap: 28px; align-items: center; }
|
||||
a, a:hover, a:focus, a:active { color: #254080; text-decoration: none; text-underline-offset: .22em; }
|
||||
a:focus-visible { outline: 3px solid #115bbd; outline-offset: 5px; }
|
||||
.header-phone { display: inline-flex; gap: 10px; align-items: center; font-size: .88rem; }
|
||||
.header-phone :global(svg) { width: 18px; flex-shrink: 0; }
|
||||
.button {
|
||||
display: inline-flex;
|
||||
min-height: 46px;
|
||||
max-width: 100%;
|
||||
gap: 13px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 14px 21px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid transparent;
|
||||
background: #ffc15d;
|
||||
color: #192f63;
|
||||
text-align: center;
|
||||
font-family: inherit;
|
||||
font-weight: 700;
|
||||
font-size: .81rem;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
transition: background .18s ease, box-shadow .18s ease;
|
||||
}
|
||||
.button:focus, .button:active { color: #192f63; }
|
||||
.button:hover { color: #192f63; background: #ffce80; box-shadow: 0 4px 14px #243f7e12; }
|
||||
@media (max-width: 1080px) {
|
||||
.container { width: calc(100% - 56px); }
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.container { width: calc(100% - 40px); }
|
||||
.site-header__ribbon .container { justify-content: center; }
|
||||
.site-header__ribbon span:last-child { display: none; }
|
||||
.site-header__inner { min-height: 90px; padding-block: 12px; }
|
||||
.brand img { width: 140px; }
|
||||
.header-actions { gap: 0; }
|
||||
.header-actions .button { display: none; }
|
||||
.header-phone { font-size: .74rem; gap: 7px; min-height: 44px; }
|
||||
}
|
||||
@media (max-width: 359px) {
|
||||
.container { width: calc(100% - 32px); }
|
||||
.brand img { width: 119px; }
|
||||
.header-phone { font-size: .67rem; gap: 5px; }
|
||||
.header-phone :global(svg) { width: 15px; }
|
||||
.button { padding-inline: 15px; }
|
||||
}
|
||||
</style>
|
||||
@@ -3,6 +3,7 @@ import '../styles/early-intervention.css';
|
||||
import { getEntry } from 'astro:content';
|
||||
import Seo from '../components/Seo.astro';
|
||||
import OrganizationSchema from '../components/OrganizationSchema.astro';
|
||||
import Header from '../components/campaign/Header.astro';
|
||||
import { getPublication } from '../utils/publication';
|
||||
const publication = await getPublication('/lp/early-intervention');
|
||||
const entry = await getEntry('pages', 'en/lp/early-intervention');
|
||||
@@ -19,7 +20,7 @@ const { title, description } = entry.data;
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#main-content">Skip to content</a>
|
||||
<header class="early-header"><a href="/" aria-label="Arizona Institute for Autism home"><img src="/assets/images/aia-logo.svg" width="300" height="140" alt="Arizona Institute for Autism" /></a></header>
|
||||
<Header primaryCta="Request a Free Consultation" />
|
||||
<main id="main-content" tabindex="-1"><slot /></main>
|
||||
<footer class="early-footer"><span>© 2018–2026 Arizona Institute for Autism ♥ All Rights Reserved</span><div><a href="/privacy-policy">Privacy Policy</a> | <a href="/faqs">FAQ</a></div></footer>
|
||||
</body>
|
||||
|
||||
@@ -49,16 +49,8 @@ p { margin: 0 0 1rem; }
|
||||
.skip-link { position: fixed; z-index: 50; top: 8px; left: 16px; padding: 12px 20px; background: white; transform: translateY(-160%); border: 2px solid var(--brand); }
|
||||
.skip-link:focus { transform: translateY(0); }
|
||||
|
||||
.site-header { background: white; }
|
||||
.site-header__ribbon { background: var(--brand); color: white; font-size: .71rem; letter-spacing: .025em; padding: 8px 0; }
|
||||
.site-header__ribbon .container { display: flex; justify-content: space-between; gap: 16px; }
|
||||
.site-header__inner { min-height: 108px; display: flex; gap: 24px; align-items: center; justify-content: space-between; padding-block: 14px; }
|
||||
.brand { display: block; flex: 0 0 auto; }
|
||||
.brand img { width: 174px; }
|
||||
.header-actions { display: flex; gap: 28px; align-items: center; }
|
||||
.header-phone { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font-size: .88rem; }
|
||||
.header-phone svg { width: 18px; }
|
||||
.site-header .button { font-size: .81rem; min-height: 46px; }
|
||||
.button { display: inline-flex; min-height: 52px; max-width: 100%; gap: 13px; align-items: center; justify-content: center; padding: 14px 21px; border-radius: 6px; border: 1px solid transparent; background: var(--gold); color: var(--brand-dark); text-decoration: none; text-align: center; font-weight: 700; font-size: .86rem; line-height: 1.5; cursor: pointer; transition: background .18s ease, box-shadow .18s ease; }
|
||||
.button svg { width: 19px; height: 19px; }
|
||||
.button:hover { background: #ffce80; box-shadow: 0 4px 14px #243f7e12; }
|
||||
@@ -189,13 +181,7 @@ input, select { width: 100%; min-height: 50px; padding: 11px 12px; border: 1px s
|
||||
html { scroll-padding-top: 18px; }
|
||||
.container { width: calc(100% - 40px); }
|
||||
.section { padding: 56px 0; }
|
||||
.site-header__ribbon .container { justify-content: center; }
|
||||
.site-header__ribbon span:last-child { display: none; }
|
||||
.site-header__inner { min-height: 90px; padding-block: 12px; }
|
||||
.brand img { width: 140px; }
|
||||
.header-actions { gap: 0; }
|
||||
.header-actions .button { display: none; }
|
||||
.header-phone { font-size: .74rem; gap: 7px; min-height: 44px; }
|
||||
.hero { padding: 34px 0 46px; }
|
||||
.hero__grid, .grid-2, .cards, .process, .faq-grid { grid-template-columns: 1fr; }
|
||||
.hero__grid { gap: 38px; }
|
||||
@@ -242,8 +228,6 @@ input, select { width: 100%; min-height: 50px; padding: 11px 12px; border: 1px s
|
||||
@media (max-width: 359px) {
|
||||
.container { width: calc(100% - 32px); }
|
||||
.brand img { width: 119px; }
|
||||
.header-phone { font-size: .67rem; gap: 5px; }
|
||||
.header-phone svg { width: 15px; }
|
||||
.hero h1 { font-size: 2.08rem; }
|
||||
.button { font-size: .8rem; padding-inline: 15px; }
|
||||
.hero__location { font-size: .6rem; gap: 8px; padding-right: 14px; }
|
||||
|
||||
@@ -90,7 +90,7 @@ html{
|
||||
line-height:1.5
|
||||
}
|
||||
body{
|
||||
background:linear-gradient(180deg, #ffffffe6, #f3f4f8eb 38rem), var(--color-background);
|
||||
background:var(--color-background);
|
||||
min-width:320px;
|
||||
margin:0
|
||||
}
|
||||
@@ -663,18 +663,6 @@ code{
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('/assets/fonts/Playfair_Display/700.woff2') format('woff2'); }
|
||||
.early-header {
|
||||
position: fixed;
|
||||
inset: 0 0 auto;
|
||||
z-index: 5;
|
||||
background: white;
|
||||
text-align: center;
|
||||
padding: 8px 0 10px;
|
||||
box-shadow: 0 1px 6px #0002;
|
||||
}
|
||||
#main-content {
|
||||
margin-top: 157px;
|
||||
}
|
||||
.early-footer {
|
||||
background: #0e1133;
|
||||
color: white;
|
||||
@@ -691,7 +679,7 @@ code{
|
||||
text-decoration: underline;
|
||||
}
|
||||
#consultation {
|
||||
scroll-margin-top: 170px;
|
||||
scroll-margin-top: 24px;
|
||||
}
|
||||
#consultation button:disabled {
|
||||
cursor: not-allowed;
|
||||
@@ -712,6 +700,5 @@ html {
|
||||
} }
|
||||
|
||||
.qr-fit-card ul { color: var(--color-primary); }
|
||||
.early-header img { display: block; width: 300px; margin: auto; }
|
||||
.early-footer a { color: white; text-decoration: underline; }
|
||||
@media (max-width: 767px) { .early-header img { width: 60%; max-width: 300px; } }
|
||||
@media (max-width: 800px) { #consultation { scroll-margin-top: 18px; } }
|
||||
@@ -150,7 +150,14 @@ test('early-intervention preserves its own publication identity and source secti
|
||||
assert.equal($('#consultation button').attr('type'), 'button');
|
||||
assert.ok($('#consultation-unavailable a[href="tel:+14806877099"]').length);
|
||||
assert.equal($('img[src^="https:"]').length, 0);
|
||||
assert.ok($('.early-header').length);
|
||||
assert.equal($('.early-header').length, 0);
|
||||
assert.equal($('.site-header').length, 1);
|
||||
const campaign = html(pages[0]);
|
||||
assert.equal($('.site-header__ribbon').text(), campaign('.site-header__ribbon').text());
|
||||
assert.equal($('.site-header .brand img').attr('src'), campaign('.site-header .brand img').attr('src'));
|
||||
assert.equal($('.site-header .header-phone').attr('href'), campaign('.site-header .header-phone').attr('href'));
|
||||
assert.equal($('.site-header .button').text(), 'Request a Free Consultation');
|
||||
assert.equal($('.site-header .button').attr('href'), '#consultation');
|
||||
assert.equal($('.mobile-cta').length, 0);
|
||||
});
|
||||
|
||||
|
||||
Reference in new issue
Block a user