diff --git a/www/src/components/campaign/Header.astro b/www/src/components/campaign/Header.astro index 4da31a6..d67ec4f 100644 --- a/www/src/components/campaign/Header.astro +++ b/www/src/components/campaign/Header.astro @@ -19,3 +19,69 @@ const tel = phone.replace(/[^0-9+]/g, ''); + + diff --git a/www/src/layouts/EarlyInterventionLayout.astro b/www/src/layouts/EarlyInterventionLayout.astro index 7d66318..5c62661 100644 --- a/www/src/layouts/EarlyInterventionLayout.astro +++ b/www/src/layouts/EarlyInterventionLayout.astro @@ -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; -
Arizona Institute for Autism
+
diff --git a/www/src/styles/campaign.css b/www/src/styles/campaign.css index 28e786f..0efa686 100644 --- a/www/src/styles/campaign.css +++ b/www/src/styles/campaign.css @@ -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; } diff --git a/www/src/styles/early-intervention.css b/www/src/styles/early-intervention.css index 209bfe0..8447356 100644 --- a/www/src/styles/early-intervention.css +++ b/www/src/styles/early-intervention.css @@ -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; } } diff --git a/www/tools/campaign.test.mjs b/www/tools/campaign.test.mjs index 50c23fd..bd7ad6d 100644 --- a/www/tools/campaign.test.mjs +++ b/www/tools/campaign.test.mjs @@ -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); });