feat(landing): integrate campaign and early intervention pages
This commit is contained in:
63 files changed
+4230
-50
No files matched your search
@@ -0,0 +1,20 @@
|
||||
---
|
||||
import site from '../data/site.json';
|
||||
const organizationSchema = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'MedicalOrganization',
|
||||
name: site.name,
|
||||
url: site.url,
|
||||
// Contact details are rendered through ContactObfuscation to avoid plain text in HTML.
|
||||
address: {
|
||||
'@type': 'PostalAddress',
|
||||
streetAddress: '8901 E Raintree Dr Ste 160',
|
||||
addressLocality: 'Scottsdale',
|
||||
addressRegion: 'AZ',
|
||||
postalCode: '85260',
|
||||
addressCountry: 'US'
|
||||
},
|
||||
sameAs: Object.values(site.social)
|
||||
};
|
||||
---
|
||||
<script type="application/ld+json" is:inline set:html={JSON.stringify(organizationSchema)} />
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
import Icon from './Icon.astro';
|
||||
interface Props {
|
||||
sourcePage: 'general' | 'commercial' | 'ahcccs' | 'private_pay';
|
||||
title: string;
|
||||
intro: string;
|
||||
buttonText: string;
|
||||
}
|
||||
const { sourcePage, title, intro, buttonText } = Astro.props;
|
||||
const phone = import.meta.env.PUBLIC_AIA_PHONE || '480-687-7099';
|
||||
const tel = phone.replace(/[^0-9+]/g, '');
|
||||
---
|
||||
<section class="section consultation" id="consultation" aria-labelledby="consultation-heading">
|
||||
<div class="container consultation__panel grid-2">
|
||||
<div class="consultation__copy">
|
||||
<div class="eyebrow">Talk with AIA</div>
|
||||
<h2 id="consultation-heading">{title}</h2>
|
||||
<p class="lede">{intro}</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<!-- TODO: Replace this inactive presentation with the approved Jotform integration under P9-03. -->
|
||||
<!-- TODO: Verify privacy, spam protection and notifications before production activation. -->
|
||||
<div id="lead-form" role="group" aria-labelledby="campaign-form-heading" aria-describedby="campaign-form-status" data-forms-mode="off">
|
||||
<h3 id="campaign-form-heading">Start with your contact details</h3>
|
||||
<p class="form-note form-intro">Use this form to request a conversation. An AIA team member can explain the next steps for your family.</p>
|
||||
<input disabled type="hidden" name="sourcePage" value={sourcePage} />
|
||||
<div class="form-grid">
|
||||
<div class="field field--full">
|
||||
<label for="name">Parent or caregiver name</label>
|
||||
<input disabled id="name" name="name" autocomplete="name" required maxlength="160" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="phone">Phone</label>
|
||||
<input disabled id="phone" name="phone" type="tel" autocomplete="tel" required maxlength="80" />
|
||||
</div>
|
||||
<div class="field field--website" aria-hidden="true" inert>
|
||||
<label for="website">Website</label>
|
||||
<input disabled id="website" name="website" type="text" tabindex="-1" autocomplete="off" data-1p-ignore />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="email">Email <span id="email-requirement" class="form-note">(optional)</span></label>
|
||||
<input disabled id="email" name="email" type="email" autocomplete="email" maxlength="320" />
|
||||
</div>
|
||||
<div class="field field--full">
|
||||
<label for="preferredContact">Preferred contact method</label>
|
||||
<select disabled id="preferredContact" name="preferredContact" required>
|
||||
<option value="">Choose one</option>
|
||||
<option value="phone">Phone</option>
|
||||
<option value="email">Email</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<p class="form-note">
|
||||
Please avoid entering detailed medical, diagnostic, or insurance-member information here. An AIA team member can gather any needed details through the appropriate follow-up process.
|
||||
</p>
|
||||
<p class="form-note">
|
||||
By submitting this form, you are asking AIA to contact you about services. Review AIA's <a href="/privacy-policy">privacy policy</a>.
|
||||
</p>
|
||||
<div id="form-error" class="form-error" role="alert" tabindex="-1"></div>
|
||||
<button class="button" type="button" disabled>{buttonText}<Icon name="arrow" /></button>
|
||||
<p id="campaign-form-status" class="form-note">Online requests are not enabled on this site yet. Please <a href={`tel:${tel}`}>call AIA at {phone}</a> during staffed hours.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="consultation__details">
|
||||
<div class="consultation__contact">
|
||||
<h3><a href={`tel:${tel}`}><Icon name="phone" />Call AIA at {phone}</a></h3>
|
||||
<p>Mon–Fri, 8:00 AM–6:00 PM<br />Online requests are not enabled yet.</p>
|
||||
</div>
|
||||
<div class="clinic-location" aria-labelledby="clinic-location-heading">
|
||||
<span class="icon-circle"><Icon name="pin" /></span>
|
||||
<div class="clinic-location__body">
|
||||
<h3 id="clinic-location-heading">Scottsdale clinic location</h3>
|
||||
<address>8901 E Raintree Dr, Ste 160<br />Scottsdale, AZ 85260</address>
|
||||
<a class="clinic-location__directions" href="https://www.google.com/maps/search/?api=1&query=8901+E+Raintree+Dr+Ste+160+Scottsdale+AZ+85260" target="_blank" rel="noopener noreferrer">Get directions <Icon name="arrow" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.field--website { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
|
||||
</style>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!-- Source: public /lp/early-intervention, 2026-10-20 (cache-qualified). -->
|
||||
<!-- TODO: Approved Jotform integration and spam protection require separate authorization. -->
|
||||
<div class="qr-landing">
|
||||
<section class="qr-hero" aria-labelledby="qr-hero-heading">
|
||||
<div class="qr-hero-copy">
|
||||
<p id="locale-message" class="eyebrow">Evidense-Based ABA Therapy</p>
|
||||
<h1 id="qr-hero-heading">Early Autism Intervention Makes a Difference</h1>
|
||||
<p class="qr-hero-subheading">If you have questions about your child's communication, play, or everyday routines, AIA offers a calm, practical place to explore early support and possible next steps, including ABA therapy and school readiness programs.</p>
|
||||
<p class="qr-audience">For parents and caregivers with questions about a young child’s development</p>
|
||||
<div class="hero-actions qr-hero-actions" aria-label="Ways to contact AIA"><a class="button button-primary" href="#consultation">Request a consultation</a><a class="button button-secondary" href="tel:+14806877099">Call (480) 687-7099</a></div>
|
||||
</div>
|
||||
<div class="qr-hero-visual">
|
||||
<div class="qr-image-frame"><img src="/assets/images/bcba-with-happy-toddler.webp" alt="A smiling young child with an AIA team member" width="474" height="450" loading="eager" decoding="async" fetchpriority="high"></div>
|
||||
<aside class="qr-fit-card" aria-label="Who this page may help">
|
||||
<p class="panel-label">Could this help my child?</p>
|
||||
<p class="panel-title">A free consultation may be useful if:</p>
|
||||
<ul>
|
||||
<li>You have questions about your child's communication, play, or routines.</li>
|
||||
<li>You want to understand what early developmental support may involve.</li>
|
||||
<li>You’re looking for clear next steps without pressure.</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
<div class="qr-process-band">
|
||||
<section class="qr-section qr-contact-section" aria-label="Request a consultation or call AIA"><div id="consultation" class="lead-form" aria-labelledby="consultation-heading" aria-describedby="consultation-unavailable" role="group" data-forms-mode="off">
|
||||
|
||||
<div class="form-heading">
|
||||
<h2 id="consultation-heading">Request a free consultation</h2>
|
||||
<p>Share your name and the best number to reach you. Email is optional.</p>
|
||||
</div>
|
||||
|
||||
<div class="field"><label for="parent-name">Parent or caregiver name</label><input id="parent-name" autocomplete="name" required="" type="text" disabled=""></div>
|
||||
<div class="field"><label for="phone">Phone number</label><input id="phone" autocomplete="tel" required="" type="tel" disabled=""></div>
|
||||
<div class="field"><label for="email">Email address<span class="field-optional"> (optional)</span></label><input id="email" autocomplete="email" type="email" disabled=""></div>
|
||||
<button class="button button-primary" type="button" disabled="">Request a consultation</button><p id="consultation-unavailable">Online submissions are not enabled on this site. Please <a href="tel:+14806877099">call (480) 687-7099</a> to contact AIA.</p></div>
|
||||
<aside class="qr-call-card">
|
||||
<p class="eyebrow">Prefer to talk?</p>
|
||||
<h2>Call AIA</h2>
|
||||
<p>Call to speak with a client advocate about early intervention and the consultation process.</p>
|
||||
<a class="phone-link" href="tel:+14806877099">(480) 687-7099</a></aside>
|
||||
</section>
|
||||
</div>
|
||||
<section class="qr-section qr-benefits-section" id="proof" aria-labelledby="qr-benefits-heading">
|
||||
<div class="section-heading qr-section-heading">
|
||||
<p class="eyebrow">Early support, explained</p>
|
||||
<h2 id="qr-benefits-heading">What early support may focus on</h2>
|
||||
</div>
|
||||
<div class="qr-benefit-grid">
|
||||
<article class="qr-benefit-card"><span class="qr-card-number" aria-hidden="true">01</span>
|
||||
<h3>Communication and connection</h3>
|
||||
<p>Support may build on how a child communicates needs, shares attention, and connects with other people.</p>
|
||||
</article>
|
||||
<article class="qr-benefit-card"><span class="qr-card-number" aria-hidden="true">02</span>
|
||||
<h3>Play and everyday routines</h3>
|
||||
<p>Goals may include play, transitions, participation, and other skills used throughout the day.</p>
|
||||
</article>
|
||||
<article class="qr-benefit-card"><span class="qr-card-number" aria-hidden="true">03</span>
|
||||
<h3>Guidance for caregivers</h3>
|
||||
<p>Families can learn practical ways to support skills across home and community routines.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<div class="qr-process-band">
|
||||
<section class="qr-section qr-process-section" aria-labelledby="qr-process-heading">
|
||||
<div class="section-heading qr-section-heading">
|
||||
<p class="eyebrow">What happens next</p>
|
||||
<h2 id="qr-process-heading">A clear path to understanding your options</h2>
|
||||
</div>
|
||||
<ol class="qr-process-list">
|
||||
<li class="qr-process-step"><span class="step-number" aria-hidden="true">1</span>
|
||||
<div>
|
||||
<h3>Send a short request</h3>
|
||||
<p>Share your name and contact details. This first step does not ask for medical history or other private health information.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="qr-process-step"><span class="step-number" aria-hidden="true">2</span>
|
||||
<div>
|
||||
<h3>Consult with AIA</h3>
|
||||
<p>An AIA team member can listen to your questions and explain relevant services, timing, and what information may be useful next.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="qr-process-step"><span class="step-number" aria-hidden="true">3</span>
|
||||
<div>
|
||||
<h3>Next steps</h3>
|
||||
<p>If you want to continue, AIA can explain the appropriate consultation, evaluation, referral, or service path.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
</div>
|
||||
<section class="qr-section qr-assurance-section" aria-labelledby="qr-assurance-heading">
|
||||
<div class="qr-assurance-copy">
|
||||
<p class="eyebrow">AIA offers</p>
|
||||
<h2 id="qr-assurance-heading">A calm place to start</h2>
|
||||
<p>You do not need to know what kind of support your child may need before contacting AIA. A consultation is a chance to learn about possible next steps, including ABA therapy and school readiness programs; it is not a diagnosis or a promise of outcomes.</p>
|
||||
<ul class="check-list">
|
||||
<li>Plain-language answers about the process</li>
|
||||
<li>Space to ask about services and scheduling</li>
|
||||
<li>Private details handled through approved intake channels</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="qr-assurance-figure"><img src="/assets/images/playing-girl.webp" alt="A young child playing with a colorful toy" width="280" height="280" loading="lazy" decoding="async"></figure>
|
||||
</section>
|
||||
<section class="qr-final-cta" aria-labelledby="qr-final-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Start where you are</p>
|
||||
<h2 id="qr-final-heading">Take the next step</h2>
|
||||
<p>Send a short request or call AIA to talk it through.</p>
|
||||
</div>
|
||||
<div class="hero-actions" aria-label="Final contact options"><a class="button button-primary" href="#consultation">Request a consultation</a><a class="button button-secondary" href="tel:+14806877099">Call (480) 687-7099</a></div>
|
||||
</section>
|
||||
<div class="qr-process-band">
|
||||
<section class="qr-section qr-more-info-section" aria-labelledby="qr-more-info-heading">
|
||||
<div>
|
||||
<p class="eyebrow">More about AIA</p>
|
||||
<h2 id="qr-more-info-heading">Learn more about Arizona Institute for Autism</h2>
|
||||
<p>Visit AIA's main website for more information about the organization, its services, and extensive family resources.</p>
|
||||
</div>
|
||||
<a class="button button-secondary" href="/">Visit the AIA website</a></section>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
interface Props {
|
||||
src: string;
|
||||
alt: string;
|
||||
height?: number;
|
||||
priority?: boolean;
|
||||
sizes?: string;
|
||||
}
|
||||
const { src, alt, height = 853, priority = false, sizes = '(max-width: 800px) calc(100vw - 40px), (max-width: 1240px) 45vw, 550px' } = Astro.props;
|
||||
---
|
||||
<img
|
||||
src={src}
|
||||
srcset={`${src.replace('.webp', '-640.webp')} 640w, ${src} 1280w`}
|
||||
sizes={sizes}
|
||||
alt={alt}
|
||||
width="1280"
|
||||
height={height}
|
||||
loading={priority ? 'eager' : 'lazy'}
|
||||
fetchpriority={priority ? 'high' : 'auto'}
|
||||
decoding="async"
|
||||
/>
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
import type { FAQItem } from '../../data/campaign/landingPages';
|
||||
interface Props { items: FAQItem[] }
|
||||
const { items } = Astro.props;
|
||||
---
|
||||
<section class="section faq-section" aria-labelledby="faq-heading">
|
||||
<div class="container faq-grid">
|
||||
<div>
|
||||
<div class="eyebrow">Questions families ask</div>
|
||||
<h2 id="faq-heading">Frequently asked questions</h2>
|
||||
</div>
|
||||
<div class="faq">
|
||||
{items.map((item) => (
|
||||
<details>
|
||||
<summary>{item.question}</summary>
|
||||
<p>{item.answer}</p>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,14 @@
|
||||
<footer class="site-footer">
|
||||
<div class="container site-footer__inner">
|
||||
<a class="brand" href="/" aria-label="Arizona Institute for Autism home"><img src="/assets/campaign/media/brand/aia-logo.svg" alt="Arizona Institute for Autism" width="679" height="316" loading="lazy" /></a>
|
||||
<div>
|
||||
<div class="site-footer__links">
|
||||
<a href="/">Main site</a>
|
||||
<a href="/privacy-policy">Privacy</a>
|
||||
<a href="/faqs">FAQs</a>
|
||||
<a href="/client-consultation">Consultation information</a>
|
||||
</div>
|
||||
<p class="form-note">ABA at AIA is for children ages 18 months through 8 years old. An autism diagnosis is required before services begin.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
import Icon from './Icon.astro';
|
||||
interface Props { primaryCta?: string }
|
||||
const { primaryCta } = Astro.props;
|
||||
const phone = import.meta.env.PUBLIC_AIA_PHONE || '480-687-7099';
|
||||
const tel = phone.replace(/[^0-9+]/g, '');
|
||||
---
|
||||
<header class="site-header">
|
||||
<div class="site-header__ribbon">
|
||||
<div class="container"><span>ABA therapy · Scottsdale clinic</span><span>Calls answered Mon–Fri, 8 AM–6 PM</span></div>
|
||||
</div>
|
||||
<div class="container site-header__inner">
|
||||
<a class="brand" href="/" aria-label="Arizona Institute for Autism home">
|
||||
<img src="/assets/campaign/media/brand/aia-logo.svg" alt="Arizona Institute for Autism" width="679" height="316" />
|
||||
</a>
|
||||
<div class="header-actions">
|
||||
<a class="header-phone" href={`tel:${tel}`}><Icon name="phone" /><span>Call {phone}</span></a>
|
||||
{primaryCta && <a class="button" href="#consultation">{primaryCta}</a>}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
import Icon from './Icon.astro';
|
||||
import EditorialImage from './EditorialImage.astro';
|
||||
interface Props {
|
||||
eyebrow: string;
|
||||
h1: string;
|
||||
subhead: string;
|
||||
eligibilityNote: string;
|
||||
primaryCta: string;
|
||||
heroImage: string;
|
||||
heroAlt: string;
|
||||
heroHeight: number;
|
||||
}
|
||||
const { eyebrow, h1, subhead, eligibilityNote, primaryCta, heroImage, heroAlt, heroHeight } = Astro.props;
|
||||
const phone = import.meta.env.PUBLIC_AIA_PHONE || '480-687-7099';
|
||||
const tel = phone.replace(/[^0-9+]/g, '');
|
||||
---
|
||||
<section class="hero">
|
||||
<div class="container hero__grid">
|
||||
<div class="hero__copy">
|
||||
<div class="eyebrow"><span class="eyebrow__line" aria-hidden="true"></span>{eyebrow}</div>
|
||||
<h1>{h1}</h1>
|
||||
<p class="lede">{subhead}</p>
|
||||
<p class="eligibility-note">{eligibilityNote}</p>
|
||||
<div class="hero__actions">
|
||||
<a class="button" href="#consultation">{primaryCta}<Icon name="arrow" /></a>
|
||||
<a class="hero__call" href={`tel:${tel}`}><Icon name="phone" />Call {phone}</a>
|
||||
</div>
|
||||
<p class="form-note">Calls are answered Mon–Fri, 8:00 AM–6:00 PM. Forms are available anytime.</p>
|
||||
</div>
|
||||
<div class="hero__visual">
|
||||
<img class="hero__gear" src="/assets/campaign/media/brand/gear-outline.svg" alt="" width="160" height="160" aria-hidden="true" />
|
||||
<figure class="hero__media">
|
||||
<EditorialImage src={heroImage} alt={heroAlt} height={heroHeight} priority sizes="(max-width: 800px) 100vw, 800px" />
|
||||
</figure>
|
||||
<div class="hero__location"><span class="icon-circle"><Icon name="pin" /></span><div>Arizona Institute for Autism<strong>Scottsdale clinic</strong></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
interface Props {
|
||||
name: 'arrow' | 'phone' | 'check' | 'pin' | 'conversation' | 'coverage' | 'heart';
|
||||
class?: string;
|
||||
}
|
||||
const { name, class: className } = Astro.props;
|
||||
const paths = {
|
||||
arrow: 'M4 12h15m-6-6 6 6-6 6',
|
||||
phone: 'M7 3H4a1 1 0 0 0-1 1c0 9.4 7.6 17 17 17a1 1 0 0 0 1-1v-3l-5-2-2 2a15 15 0 0 1-7-7l2-2-2-5Z',
|
||||
check: 'm5 12 4 4L19 6',
|
||||
pin: 'M20 10c0 6-8 11-8 11S4 16 4 10a8 8 0 1 1 16 0ZM15 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z',
|
||||
conversation: 'M21 11a9 9 0 0 1-9 9H3l2-5a9 9 0 1 1 16-4ZM8 10h8M8 14h5',
|
||||
coverage: 'm12 2 8 3v6c0 5-8 11-8 11S4 16 4 11V5l8-3Zm-4 9 3 3 5-6',
|
||||
heart: 'M20.5 4.5a5 5 0 0 0-7 0L12 6l-1.5-1.5a5 5 0 0 0-7 7L12 20l8.5-8.5a5 5 0 0 0 0-7Z',
|
||||
};
|
||||
---
|
||||
<svg class={className} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d={paths[name]} /></svg>
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
import type { LandingPageConfig } from '../../data/campaign/landingPages';
|
||||
import { paymentPaths } from '../../data/campaign/landingPages';
|
||||
import LandingLayout from '../../layouts/CampaignLayout.astro';
|
||||
import Hero from './Hero.astro';
|
||||
import FAQ from './FAQ.astro';
|
||||
import ConsultationForm from './ConsultationForm.astro';
|
||||
import Icon from './Icon.astro';
|
||||
import EditorialImage from './EditorialImage.astro';
|
||||
|
||||
interface Props { page: LandingPageConfig }
|
||||
const { page } = Astro.props;
|
||||
---
|
||||
<LandingLayout title={page.title} description={page.description} canonicalPath={page.slug} primaryCta={page.primaryCta}>
|
||||
<Hero
|
||||
eyebrow={page.eyebrow}
|
||||
h1={page.h1}
|
||||
subhead={page.subhead}
|
||||
eligibilityNote={page.eligibilityNote}
|
||||
primaryCta={page.primaryCta}
|
||||
heroImage={page.heroImage}
|
||||
heroAlt={page.heroAlt}
|
||||
heroHeight={page.heroHeight}
|
||||
/>
|
||||
|
||||
<section class="section reassurance" aria-labelledby="reassurance-heading">
|
||||
<div class="container grid-2">
|
||||
<div>
|
||||
<div class="eyebrow">A clear first step</div>
|
||||
<h2 id="reassurance-heading">{page.reassuranceTitle}</h2>
|
||||
<p class="lede">{page.reassuranceBody}</p>
|
||||
</div>
|
||||
<div class="expectations">
|
||||
<h3>What you can expect</h3>
|
||||
<ul class="check-list">
|
||||
{page.highlights.map((item) => <li><span class="check-mark"><Icon name="check" /></span><span>{item}</span></li>)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--soft payment" aria-labelledby="payer-heading">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<div class="eyebrow">Payment and coverage path</div>
|
||||
<h2 id="payer-heading">{page.payerTitle}</h2>
|
||||
<p class="lede">{page.payerBody}</p>
|
||||
</div>
|
||||
<div class="cards">
|
||||
{page.payerPoints.map((item, index) => (
|
||||
<article class="payment-card">
|
||||
<span class="icon-circle"><Icon name={index === 0 ? 'coverage' : index === 1 ? 'heart' : 'conversation'} /></span>
|
||||
<p>{item}</p>
|
||||
{page.intent === 'general' && <a class="text-link" href={paymentPaths[index].href} data-payment-intent={paymentPaths[index].intent}>{paymentPaths[index].label}<Icon name="arrow" /></a>}
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
{page.intent !== 'general' && <a class="text-link payment__action" href="#consultation">{page.primaryCta}<Icon name="arrow" /></a>}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="section care" aria-labelledby="aba-heading">
|
||||
<div class="container grid-2 care__grid">
|
||||
<figure class="care__media">
|
||||
<EditorialImage src={page.careImage} alt={page.careAlt} />
|
||||
</figure>
|
||||
<div class="care__copy">
|
||||
<div class="eyebrow">ABA at AIA</div>
|
||||
<h2 id="aba-heading">Care should be individualized and meaningful</h2>
|
||||
<p class="lede">Talk with AIA about your child's communication, daily routines, and goals. Clinical recommendations depend on an individualized assessment.</p>
|
||||
<a class="text-link" href="#consultation">{page.primaryCta}<Icon name="arrow" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section next-steps" aria-labelledby="process-heading">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<div class="eyebrow">Next steps</div>
|
||||
<h2 id="process-heading">{page.processTitle}</h2>
|
||||
</div>
|
||||
<ol class="process">
|
||||
{page.processSteps.map((step, index) => (
|
||||
<li>
|
||||
<span class="process__number" aria-hidden="true">0{index + 1}</span>
|
||||
<h3>{step.title}</h3>
|
||||
<p>{step.body}</p>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<FAQ items={page.faq} />
|
||||
|
||||
<ConsultationForm
|
||||
sourcePage={page.intent}
|
||||
title={page.formTitle}
|
||||
intro={page.formIntro}
|
||||
buttonText={page.primaryCta}
|
||||
/>
|
||||
</LandingLayout>
|
||||
@@ -22,6 +22,7 @@ const shared = {
|
||||
translationKey,
|
||||
draft: z.boolean().default(false),
|
||||
noindex: z.boolean().default(false),
|
||||
campaign: z.enum(['general', 'commercial', 'ahcccs', 'private_pay', 'early_intervention']).optional(),
|
||||
home: homePageSchema.optional(),
|
||||
sections: homeSectionsSchema.optional(),
|
||||
team: teamPageSchema.optional()
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: "UnitedHealthcare Community Plan ABA Therapy | AIA"
|
||||
description: "AIA is in network with UnitedHealthcare Community Plan for eligible ABA therapy for children ages 18 months through 8 years."
|
||||
displayH1: "ABA Therapy With UnitedHealthcare Community Plan"
|
||||
slug: "lp/aba-ahcccs"
|
||||
lang: "en"
|
||||
canonical: "https://www.azinstitute4autism.com/lp/aba-ahcccs"
|
||||
noindex: true
|
||||
campaign: "ahcccs"
|
||||
---
|
||||
|
||||
<!-- Campaign content is maintained in src/data/campaign/landingPages.ts. -->
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: "ABA Therapy and Insurance Support | AIA"
|
||||
description: "Learn how AIA helps families verify ABA insurance benefits and next steps for eligible children ages 18 months through 8 years."
|
||||
displayH1: "ABA Therapy With Insurance Support"
|
||||
slug: "lp/aba-insurance"
|
||||
lang: "en"
|
||||
canonical: "https://www.azinstitute4autism.com/lp/aba-insurance"
|
||||
noindex: true
|
||||
campaign: "commercial"
|
||||
---
|
||||
|
||||
<!-- Campaign content is maintained in src/data/campaign/landingPages.ts. -->
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: "Private-Pay ABA Therapy Options | AIA"
|
||||
description: "Explore self-pay ABA options for eligible children ages 18 months through 8 years and discuss current rates and next steps with AIA."
|
||||
displayH1: "Private-Pay ABA Therapy Options"
|
||||
slug: "lp/aba-private-pay"
|
||||
lang: "en"
|
||||
canonical: "https://www.azinstitute4autism.com/lp/aba-private-pay"
|
||||
noindex: true
|
||||
campaign: "private_pay"
|
||||
---
|
||||
|
||||
<!-- Campaign content is maintained in src/data/campaign/landingPages.ts. -->
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: "ABA Therapy Ages 18 Months–8 Years | Arizona Institute for Autism"
|
||||
description: "Explore individualized ABA therapy for children ages 18 months through 8 years with an autism diagnosis at AIA's Scottsdale clinic."
|
||||
displayH1: "ABA Therapy for Children Ages 18 Months–8 Years"
|
||||
slug: "lp/aba-therapy"
|
||||
lang: "en"
|
||||
canonical: "https://www.azinstitute4autism.com/lp/aba-therapy"
|
||||
noindex: true
|
||||
campaign: "general"
|
||||
---
|
||||
|
||||
<!-- Campaign content is maintained in src/data/campaign/landingPages.ts. -->
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: "Early Autism Intervention Makes a Difference"
|
||||
description: "Explore early autism intervention options with Arizona Institute for Autism in Scottsdale. Request a free consultation or call (480) 687-7099."
|
||||
displayH1: "Early Autism Intervention Makes a Difference"
|
||||
slug: "lp/early-intervention"
|
||||
lang: "en"
|
||||
canonical: "https://www.azinstitute4autism.com/lp/early-intervention"
|
||||
campaign: "early_intervention"
|
||||
---
|
||||
|
||||
<!-- Source-faithful page content lives in EarlyInterventionPage.astro. -->
|
||||
@@ -0,0 +1,311 @@
|
||||
export type LandingIntent = 'general' | 'commercial' | 'ahcccs' | 'private_pay';
|
||||
|
||||
export interface FAQItem {
|
||||
question: string;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
export interface LandingPageConfig {
|
||||
intent: LandingIntent;
|
||||
slug: string;
|
||||
title: string;
|
||||
description: string;
|
||||
h1: string;
|
||||
subhead: string;
|
||||
eligibilityNote: string;
|
||||
primaryCta: string;
|
||||
eyebrow: string;
|
||||
heroImage: string;
|
||||
heroAlt: string;
|
||||
heroHeight: number;
|
||||
careImage: string;
|
||||
careAlt: string;
|
||||
reassuranceTitle: string;
|
||||
reassuranceBody: string;
|
||||
highlights: string[];
|
||||
payerTitle: string;
|
||||
payerBody: string;
|
||||
payerPoints: string[];
|
||||
processTitle: string;
|
||||
processSteps: { title: string; body: string }[];
|
||||
faq: FAQItem[];
|
||||
formTitle: string;
|
||||
formIntro: string;
|
||||
}
|
||||
|
||||
const eligibilityNote =
|
||||
'Eligibility: ages 18 months through 8 years • autism diagnosis required';
|
||||
|
||||
const sharedProcess = [
|
||||
{
|
||||
title: 'Request a consultation',
|
||||
body: 'Share basic contact information so an AIA team member can follow up about your questions and next steps.',
|
||||
},
|
||||
{
|
||||
title: 'Confirm service and payment fit',
|
||||
body: 'AIA provides ABA therapy for children ages 18 months through 8 years old and requires an autism diagnosis before services begin. AIA can also explain the payment or coverage path that applies.',
|
||||
},
|
||||
{
|
||||
title: 'Complete the clinical intake steps',
|
||||
body: 'If ABA services are appropriate, AIA will explain the assessment, authorization, and care-planning steps that apply.',
|
||||
},
|
||||
];
|
||||
|
||||
export const paymentPaths = [
|
||||
{ label: 'Commercial insurance', href: '/lp/aba-insurance', intent: 'commercial' },
|
||||
{ label: 'AHCCCS / UHC Community Plan', href: '/lp/aba-ahcccs', intent: 'ahcccs' },
|
||||
{ label: 'Private pay', href: '/lp/aba-private-pay', intent: 'private_pay' },
|
||||
];
|
||||
|
||||
export const landingPages: Record<LandingIntent, LandingPageConfig> = {
|
||||
general: {
|
||||
intent: 'general',
|
||||
slug: '/lp/aba-therapy',
|
||||
title: 'ABA Therapy Ages 18 Months–8 Years | Arizona Institute for Autism',
|
||||
description:
|
||||
"Explore individualized ABA therapy for children ages 18 months through 8 years with an autism diagnosis at AIA's Scottsdale clinic.",
|
||||
h1: 'ABA Therapy for Children Ages 18 Months–8 Years',
|
||||
subhead:
|
||||
"AIA provides individualized, neurodiversity-affirming ABA therapy at its Scottsdale clinic for children ages 18 months through 8 years. An autism diagnosis is required before ABA services begin.",
|
||||
eligibilityNote,
|
||||
primaryCta: 'Request a Free Consultation',
|
||||
eyebrow: 'ABA Therapy in Scottsdale',
|
||||
heroImage: '/assets/campaign/media/aba/general/hero.webp',
|
||||
heroAlt: 'Young boy exploring wooden blocks with an attentive adult nearby.',
|
||||
heroHeight: 720,
|
||||
careImage: '/assets/campaign/media/aba/general/shared-reading.webp',
|
||||
careAlt: 'Young child and an adult reading a picture book together, with its illustrated cover facing the camera.',
|
||||
reassuranceTitle: 'Start with a conversation about your child and your goals',
|
||||
reassuranceBody:
|
||||
'Families often begin with questions about communication, everyday routines, independence, flexibility, or how ABA services may fit into daily life. A consultation can help clarify whether AIA is an appropriate next step for a child who meets the age and diagnosis requirements.',
|
||||
highlights: [
|
||||
'ABA therapy for children ages 18 months through 8 years',
|
||||
'Autism diagnosis required before services begin',
|
||||
'Individualized goals with parent and caregiver collaboration',
|
||||
],
|
||||
payerTitle: 'Explore payment and coverage options',
|
||||
payerBody:
|
||||
'Your payment path affects the administrative steps, not the goal of individualized care. Choose the option that best matches what you are looking for.',
|
||||
payerPoints: [
|
||||
'Commercial insurance: learn how benefit verification and authorization may work.',
|
||||
'AHCCCS: AIA is in network with UnitedHealthcare Community Plan and accepts no other AHCCCS plans.',
|
||||
'Private pay: discuss current self-pay options directly with AIA.',
|
||||
],
|
||||
processTitle: 'What happens after you reach out?',
|
||||
processSteps: sharedProcess,
|
||||
faq: [
|
||||
{
|
||||
question: 'What ages does AIA serve for ABA therapy?',
|
||||
answer:
|
||||
'AIA provides ABA therapy for children ages 18 months through 8 years old at its Scottsdale clinic.',
|
||||
},
|
||||
{
|
||||
question: 'Does my child need an autism diagnosis before ABA starts?',
|
||||
answer:
|
||||
'Yes. An autism diagnosis is required before ABA therapy services can begin. AIA offers examination and evaluation services but does not provide diagnoses.',
|
||||
},
|
||||
{
|
||||
question: 'What kinds of skills can ABA support?',
|
||||
answer:
|
||||
'Depending on individual needs, goals may involve functional communication, daily routines, flexibility, independence, social participation, safety, or other meaningful skills. Specific goals are determined through the clinical process.',
|
||||
},
|
||||
],
|
||||
formTitle: 'Request a Free Consultation',
|
||||
formIntro:
|
||||
'Share basic contact information and an AIA team member can follow up about ABA services, eligibility, and next steps.',
|
||||
},
|
||||
|
||||
commercial: {
|
||||
intent: 'commercial',
|
||||
slug: '/lp/aba-insurance',
|
||||
title: 'ABA Therapy and Insurance Support | AIA',
|
||||
description:
|
||||
'Learn how AIA helps families verify ABA insurance benefits and next steps for eligible children ages 18 months through 8 years.',
|
||||
h1: 'ABA Therapy With Insurance Support',
|
||||
subhead:
|
||||
'AIA provides individualized, neurodiversity-affirming ABA therapy at its Scottsdale clinic for children ages 18 months through 8 years. AIA helps families verify ABA benefits and understand coverage, authorizations, copays, deductibles, and next steps before care begins.',
|
||||
eligibilityNote,
|
||||
primaryCta: 'Request Insurance Verification',
|
||||
eyebrow: 'Commercial Insurance',
|
||||
heroImage: '/assets/campaign/media/aba/commercial/insurance-support.webp',
|
||||
heroAlt: 'Two adults having a relaxed conversation at a table in a welcoming room.',
|
||||
heroHeight: 853,
|
||||
careImage: '/assets/campaign/media/aba/commercial/creative-play.webp',
|
||||
careAlt: 'Young child painting at a table with an attentive adult nearby.',
|
||||
reassuranceTitle: 'Coverage is specific to your plan',
|
||||
reassuranceBody:
|
||||
'Insurance participation and benefits can vary by carrier, employer plan, policy, and authorization requirements. AIA can help verify the details that apply to your specific coverage before services begin.',
|
||||
highlights: [
|
||||
'ABA therapy for children ages 18 months through 8 years',
|
||||
'Autism diagnosis required before services begin',
|
||||
'Verify current plan participation',
|
||||
'Connect coverage steps with the ABA intake process',
|
||||
],
|
||||
payerTitle: 'Questions to review about your plan',
|
||||
payerBody:
|
||||
'Contact AIA to discuss your specific plan and the steps that may apply before services begin.',
|
||||
payerPoints: [
|
||||
'Is my specific plan currently accepted?',
|
||||
'What benefits, authorization requirements, and out-of-pocket costs apply?',
|
||||
'What steps are needed before services can begin?',
|
||||
],
|
||||
processTitle: 'What happens next?',
|
||||
processSteps: sharedProcess,
|
||||
faq: [
|
||||
{
|
||||
question: 'Does my insurance cover ABA therapy?',
|
||||
answer:
|
||||
'Coverage depends on the specific policy and applicable requirements. AIA can verify plan participation and available benefit information rather than assuming coverage from the carrier name alone.',
|
||||
},
|
||||
{
|
||||
question: 'Does AIA accept my insurance carrier?',
|
||||
answer:
|
||||
'AIA accepts Blue Cross Blue Shield of Arizona PPO plans, subject to verification of your specific policy. For other commercial plans, contact AIA to ask about current participation. Acceptance does not guarantee coverage or authorization for a particular service.',
|
||||
},
|
||||
{
|
||||
question: 'Does my child need an autism diagnosis?',
|
||||
answer:
|
||||
'Yes. AIA requires an autism diagnosis before ABA therapy services can begin, in addition to the child being within AIA’s service age range of 18 months through 8 years.',
|
||||
},
|
||||
{
|
||||
question: 'Will ABA require prior authorization?',
|
||||
answer:
|
||||
'Authorization requirements vary by plan. AIA can identify the requirements that apply after the relevant insurance information is reviewed.',
|
||||
},
|
||||
],
|
||||
formTitle: 'Request Insurance Verification',
|
||||
formIntro:
|
||||
'Start with basic contact information. AIA can collect any plan-specific details through the appropriate secure process during follow-up.',
|
||||
},
|
||||
|
||||
ahcccs: {
|
||||
intent: 'ahcccs',
|
||||
slug: '/lp/aba-ahcccs',
|
||||
title: 'UnitedHealthcare Community Plan ABA Therapy | AIA',
|
||||
description:
|
||||
'AIA is in network with UnitedHealthcare Community Plan for eligible ABA therapy for children ages 18 months through 8 years.',
|
||||
h1: 'ABA Therapy With UnitedHealthcare Community Plan',
|
||||
subhead:
|
||||
'AIA provides individualized, neurodiversity-affirming ABA therapy at its Scottsdale clinic for children ages 18 months through 8 years. AIA is in network with UnitedHealthcare Community Plan for eligible ABA therapy services. This is the only AHCCCS plan AIA currently accepts.',
|
||||
eligibilityNote,
|
||||
primaryCta: 'Request a Benefits Check',
|
||||
eyebrow: 'AHCCCS • UnitedHealthcare Community Plan',
|
||||
heroImage: '/assets/campaign/media/aba/ahcccs/family-support.webp',
|
||||
heroAlt: 'A parent and another adult talking while a young child explores a toy nearby.',
|
||||
heroHeight: 853,
|
||||
careImage: '/assets/campaign/media/aba/ahcccs/everyday-routine.webp',
|
||||
careAlt: 'Young child placing a book into a backpack with an adult nearby.',
|
||||
reassuranceTitle: 'AIA is in network with UnitedHealthcare Community Plan',
|
||||
reassuranceBody:
|
||||
'UnitedHealthcare Community Plan is the only AHCCCS plan AIA currently accepts for eligible ABA therapy services. Individual benefits, authorization, documentation, and member-specific requirements still need to be verified before services begin.',
|
||||
highlights: [
|
||||
'In network with UnitedHealthcare Community Plan',
|
||||
'No other AHCCCS plans are currently accepted',
|
||||
'ABA therapy for children ages 18 months through 8 years',
|
||||
'Autism diagnosis required before services begin',
|
||||
],
|
||||
payerTitle: 'What UnitedHealthcare Community Plan families should know',
|
||||
payerBody:
|
||||
'Being in network does not eliminate member-specific benefit or authorization requirements. AIA can verify the administrative steps that apply before ABA services begin.',
|
||||
payerPoints: [
|
||||
'AIA is in network with UnitedHealthcare Community Plan for eligible ABA therapy services.',
|
||||
'AIA does not currently accept any other AHCCCS plan.',
|
||||
'Benefit, authorization, referral, and documentation requirements should be verified for the individual member.',
|
||||
],
|
||||
processTitle: 'What happens next?',
|
||||
processSteps: sharedProcess,
|
||||
faq: [
|
||||
{
|
||||
question: 'Does AIA accept UnitedHealthcare Community Plan for ABA?',
|
||||
answer:
|
||||
'Yes. AIA is in network with UnitedHealthcare Community Plan for eligible ABA therapy services.',
|
||||
},
|
||||
{
|
||||
question: 'Does AIA accept other AHCCCS plans?',
|
||||
answer:
|
||||
'No. UnitedHealthcare Community Plan is the only AHCCCS plan AIA currently accepts.',
|
||||
},
|
||||
{
|
||||
question: 'Does my child need an autism diagnosis?',
|
||||
answer:
|
||||
'Yes. An autism diagnosis is required before ABA therapy services can begin at AIA, and AIA provides ABA for children ages 18 months through 8 years old.',
|
||||
},
|
||||
{
|
||||
question: 'Does UnitedHealthcare Community Plan require authorization for ABA?',
|
||||
answer:
|
||||
'Member-specific authorization, referral, benefit, and documentation requirements should be verified before services begin. AIA can explain the applicable steps after reviewing the relevant plan information.',
|
||||
},
|
||||
],
|
||||
formTitle: 'Request a Benefits Check',
|
||||
formIntro:
|
||||
'Contact AIA about your UnitedHealthcare Community Plan benefits. Start with your contact details; member-specific information can be discussed through the appropriate secure process during follow-up.',
|
||||
},
|
||||
|
||||
private_pay: {
|
||||
intent: 'private_pay',
|
||||
slug: '/lp/aba-private-pay',
|
||||
title: 'Private-Pay ABA Therapy Options | AIA',
|
||||
description:
|
||||
'Explore self-pay ABA options for eligible children ages 18 months through 8 years and discuss current rates and next steps with AIA.',
|
||||
h1: 'Private-Pay ABA Therapy Options',
|
||||
subhead:
|
||||
"AIA provides individualized, neurodiversity-affirming ABA therapy at its Scottsdale clinic for children ages 18 months through 8 years. Explore self-pay ABA options with AIA and request a conversation about current rates, payment options, and the intake process.",
|
||||
eligibilityNote,
|
||||
primaryCta: 'Discuss Private-Pay Options',
|
||||
eyebrow: 'Self-Pay / Private Pay',
|
||||
heroImage: '/assets/campaign/media/aba/private-pay/consultation.webp',
|
||||
heroAlt: 'Two adults having a calm planning conversation across a small table.',
|
||||
heroHeight: 853,
|
||||
careImage: '/assets/campaign/media/aba/private-pay/plant-care.webp',
|
||||
careAlt: 'Young child watering a small plant with an adult nearby.',
|
||||
reassuranceTitle: 'Get clear information before deciding how to pay',
|
||||
reassuranceBody:
|
||||
'Private pay may be relevant for families who plan to self-pay, do not have applicable coverage, or want to understand options outside insurance. AIA can explain current rates and available payment mechanisms directly.',
|
||||
highlights: [
|
||||
'ABA therapy for children ages 18 months through 8 years',
|
||||
'Autism diagnosis required before services begin',
|
||||
'Discuss current private-pay rates directly with AIA',
|
||||
'Keep financial decisions separate from individualized clinical recommendations',
|
||||
],
|
||||
payerTitle: 'Questions worth asking in a private-pay conversation',
|
||||
payerBody:
|
||||
'Ask about the costs and billing details that matter to your family. AIA accepts HSA/FSA cards for ABA program fees. Payment method does not change clinical eligibility or guarantee a start date.',
|
||||
payerPoints: [
|
||||
'What are the current rates and billing cadence?',
|
||||
'What services are included in the quoted rate?',
|
||||
'Which payment methods can I use for ABA program fees?',
|
||||
],
|
||||
processTitle: 'What happens next?',
|
||||
processSteps: sharedProcess,
|
||||
faq: [
|
||||
{
|
||||
question: 'Can I use AIA without insurance?',
|
||||
answer:
|
||||
'AIA can discuss current private-pay options with families considering care outside an insurance payment path. The same age and diagnosis eligibility requirements apply.',
|
||||
},
|
||||
{
|
||||
question: 'What does private-pay ABA cost?',
|
||||
answer:
|
||||
'Ask AIA about current rates, what a quote includes, and billing arrangements before deciding on next steps.',
|
||||
},
|
||||
{
|
||||
question: 'Can I pay with an HSA or FSA card?',
|
||||
answer:
|
||||
'AIA accepts HSA/FSA cards for ABA program fees. Check with your account administrator about your own eligibility and account requirements.',
|
||||
},
|
||||
{
|
||||
question: 'Does my child need an autism diagnosis?',
|
||||
answer:
|
||||
'Yes. An autism diagnosis is required before ABA therapy services can begin at AIA, and the child must be within AIA’s ABA service age range of 18 months through 8 years.',
|
||||
},
|
||||
{
|
||||
question: 'Does private pay change which services are recommended?',
|
||||
answer:
|
||||
'Clinical recommendations should be individualized based on assessment and need rather than the payment method.',
|
||||
},
|
||||
],
|
||||
formTitle: 'Discuss Private-Pay Options',
|
||||
formIntro:
|
||||
'Share basic contact information and AIA can follow up about current private-pay options, eligibility, and next steps.',
|
||||
},
|
||||
};
|
||||
@@ -2,7 +2,7 @@
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import Seo from '../components/Seo.astro';
|
||||
import site from '../data/site.json';
|
||||
import OrganizationSchema from '../components/OrganizationSchema.astro';
|
||||
import { getPublication, getRoutePublicationManifest } from '../utils/publication';
|
||||
import type { VisitorLocale, VisitorPublication } from '../utils/visitor-navigation';
|
||||
import '../styles/global.css';
|
||||
@@ -16,22 +16,7 @@ const imageAlt = image && image === publication.entry.data.featuredImage
|
||||
: undefined;
|
||||
const dir = lang === 'ar' ? 'rtl' : 'ltr';
|
||||
const skipLink = { en: 'Skip to content', es: 'Saltar al contenido', ar: 'انتقل إلى المحتوى' }[lang as VisitorLocale] ?? 'Skip to content';
|
||||
const organizationSchema = {
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'MedicalOrganization',
|
||||
name: site.name,
|
||||
url: site.url,
|
||||
// Contact details are rendered through ContactObfuscation to avoid plain text in HTML.
|
||||
address: {
|
||||
'@type': 'PostalAddress',
|
||||
streetAddress: '8901 E Raintree Dr Ste 160',
|
||||
addressLocality: 'Scottsdale',
|
||||
addressRegion: 'AZ',
|
||||
postalCode: '85260',
|
||||
addressCountry: 'US'
|
||||
},
|
||||
sameAs: Object.values(site.social)
|
||||
};
|
||||
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang={lang} dir={dir}>
|
||||
@@ -41,7 +26,7 @@ const organizationSchema = {
|
||||
<link rel="icon" href="/assets/images/favicon.svg" />
|
||||
<Seo title={title} description={description} publication={publication} image={image} imageAlt={imageAlt} type={type} />
|
||||
<slot name="head" />
|
||||
<script type="application/ld+json" is:inline set:html={JSON.stringify(organizationSchema)} />
|
||||
<OrganizationSchema />
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#main">{skipLink}</a>
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
import '../styles/campaign.css';
|
||||
import Header from '../components/campaign/Header.astro';
|
||||
import Footer from '../components/campaign/Footer.astro';
|
||||
import Seo from '../components/Seo.astro';
|
||||
import OrganizationSchema from '../components/OrganizationSchema.astro';
|
||||
import { getPublication } from '../utils/publication';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
canonicalPath: string;
|
||||
primaryCta?: string;
|
||||
}
|
||||
const { title, description, canonicalPath, primaryCta } = Astro.props;
|
||||
const publication = await getPublication(canonicalPath);
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<Seo title={title} description={description} publication={publication} />
|
||||
<OrganizationSchema />
|
||||
<link rel="preload" href="/assets/campaign/fonts/playfair-display-700.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="/assets/campaign/fonts/rubik-400.woff2" as="font" type="font/woff2" crossorigin />
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#main-content">Skip to content</a>
|
||||
<Header primaryCta={primaryCta} />
|
||||
<main id="main-content" tabindex="-1"><slot /></main>
|
||||
<Footer />
|
||||
{primaryCta && <div class="mobile-cta"><a class="button" href="#consultation">{primaryCta}</a></div>}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
import '../styles/early-intervention.css';
|
||||
import { getEntry } from 'astro:content';
|
||||
import Seo from '../components/Seo.astro';
|
||||
import OrganizationSchema from '../components/OrganizationSchema.astro';
|
||||
import { getPublication } from '../utils/publication';
|
||||
const publication = await getPublication('/lp/early-intervention');
|
||||
const entry = await getEntry('pages', 'en/lp/early-intervention');
|
||||
if (!entry || !publication.eligible) throw new Error('Early-intervention publication unavailable');
|
||||
const { title, description } = entry.data;
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<Seo title={title} description={description} publication={publication} />
|
||||
<OrganizationSchema />
|
||||
</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>
|
||||
<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>
|
||||
</html>
|
||||
@@ -12,7 +12,11 @@ import LibraryEnglish from '../components/pages/LibraryEnglish.astro';
|
||||
import LibrarySpanish from '../components/pages/LibrarySpanish.astro';
|
||||
import LibraryArabic from '../components/pages/LibraryArabic.astro';
|
||||
export async function getStaticPaths() {
|
||||
return (await getRoutePublicationManifest()).filter((page) => page.eligible).map((publication) => ({
|
||||
// Campaign records share publication policy, but render through an isolated
|
||||
// route/layout so their global design styles cannot leak into the main site.
|
||||
return (await getRoutePublicationManifest()).filter((page) =>
|
||||
page.eligible && !('campaign' in page.entry.data && page.entry.data.campaign)
|
||||
).map((publication) => ({
|
||||
params: { slug: publication.route === '/' ? undefined : decodeURI(publication.route.slice(1)) },
|
||||
props: {
|
||||
entry: publication.entry,
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
// Temporary reviewer utility. Do not include in indexing-enabled release builds.
|
||||
import { allowIndexing, getPublicationManifest } from '../../utils/publication';
|
||||
import OrganizationSchema from '../../components/OrganizationSchema.astro';
|
||||
import site from '../../data/site.json';
|
||||
|
||||
export function getStaticPaths() {
|
||||
return allowIndexing ? [] : [{ params: { review: undefined } }];
|
||||
}
|
||||
|
||||
const published = new Set((await getPublicationManifest()).filter(p => p.eligible).map(p => p.route));
|
||||
const pages = [
|
||||
{ route: '/lp/aba-therapy', label: 'General ABA' },
|
||||
{ route: '/lp/aba-insurance', label: 'Commercial Insurance' },
|
||||
{ route: '/lp/aba-ahcccs', label: 'AHCCCS / UnitedHealthcare Community Plan' },
|
||||
{ route: '/lp/aba-private-pay', label: 'Private Pay' },
|
||||
{ route: '/lp/early-intervention', label: 'Early Intervention — existing AIA branding' }
|
||||
].filter(page => published.has(page.route));
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>AIA Landing Pages — Testing Index</title>
|
||||
<meta name="description" content="Temporary index for reviewing the five AIA landing pages." />
|
||||
<meta name="robots" content="noindex,nofollow" />
|
||||
<link rel="canonical" href={new URL('/lp', site.url).href} />
|
||||
<OrganizationSchema />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<p class="notice">Temporary · testing only</p>
|
||||
<h1>AIA landing pages</h1>
|
||||
<p>This index is for local and staging review. Campaign traffic should use the individual landing-page URLs.</p>
|
||||
<nav aria-label="Landing pages">
|
||||
<ul>{pages.map(page => <li><a href={page.route}>{page.label}</a><span>{page.route}</span></li>)}</ul>
|
||||
</nav>
|
||||
<p class="note">The first four pages retain their campaign design. Early Intervention uses the existing AIA branding. Online submissions remain disabled.</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
<style>
|
||||
:global(body) { margin: 0; background: #f7f8fb; color: #254080; font-family: system-ui, sans-serif; line-height: 1.6; }
|
||||
main { max-width: 48rem; margin: 0 auto; padding: clamp(1.25rem, 5vw, 4rem); }
|
||||
h1 { line-height: 1.2; font-size: clamp(2rem, 5vw, 3rem); }
|
||||
.notice { font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; }
|
||||
ul { padding-left: 1.4rem; }
|
||||
li { margin-block: 1.25rem; }
|
||||
a { color: #254080; text-decoration: underline; text-underline-offset: .2em; font-weight: 650; }
|
||||
a:hover { color: #17264c; }
|
||||
a:focus-visible { outline: 3px solid #254080; outline-offset: 4px; }
|
||||
li span { display: block; color: #535d70; font-size: .9rem; overflow-wrap: anywhere; }
|
||||
.note { border-top: 1px solid #c9cedb; padding-top: 1.5rem; }
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
import CampaignPage from '../../components/campaign/LandingPage.astro';
|
||||
import { landingPages, type LandingPageConfig } from '../../data/campaign/landingPages';
|
||||
import { getPublicationManifest } from '../../utils/publication';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
return (await getPublicationManifest())
|
||||
.filter(({ eligible, entry }) => eligible && entry.collection === 'pages' && entry.data.campaign && entry.data.campaign !== 'early_intervention')
|
||||
.map(({ entry, route, noindex }) => {
|
||||
const key = entry.data.campaign!;
|
||||
if (key === 'early_intervention') throw new Error('Dedicated route required');
|
||||
const page = landingPages[key];
|
||||
// Fail on drift between the imported copy configuration and CMS metadata.
|
||||
if (entry.data.lang !== 'en' || !noindex || route !== page.slug ||
|
||||
entry.data.title !== page.title || entry.data.description !== page.description ||
|
||||
entry.data.displayH1 !== page.h1) {
|
||||
throw new Error(`Campaign publication/configuration mismatch: ${route}`);
|
||||
}
|
||||
return { params: { campaign: route.slice('/lp/'.length) }, props: { page } };
|
||||
});
|
||||
}
|
||||
const { page } = Astro.props as { page: LandingPageConfig };
|
||||
---
|
||||
<CampaignPage page={page} />
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
import Layout from '../../layouts/EarlyInterventionLayout.astro';
|
||||
import Page from '../../components/campaign/EarlyInterventionPage.astro';
|
||||
---
|
||||
<Layout><Page /></Layout>
|
||||
@@ -0,0 +1,257 @@
|
||||
@font-face { font-family: 'Playfair Display'; src: url('/assets/campaign/fonts/playfair-display-700.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
|
||||
@font-face { font-family: Rubik; src: url('/assets/campaign/fonts/rubik-400.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
|
||||
@font-face { font-family: Rubik; src: url('/assets/campaign/fonts/rubik-700.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
|
||||
|
||||
:root {
|
||||
--ink: #243f7e;
|
||||
--muted: #515e73;
|
||||
--surface: #fff;
|
||||
--cream: #fbf2e3;
|
||||
--surface-soft: #f8f7f3;
|
||||
--brand: #254080;
|
||||
--brand-dark: #192f63;
|
||||
--gold: #ffc15d;
|
||||
--line: #dedfdc;
|
||||
--focus: #115bbd;
|
||||
--danger: #a21c28;
|
||||
--max: 1200px;
|
||||
font-family: Rubik, ui-sans-serif, system-ui, sans-serif;
|
||||
color: var(--ink);
|
||||
background: var(--surface);
|
||||
line-height: 1.65;
|
||||
font-synthesis: none;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
|
||||
body { margin: 0; }
|
||||
a { color: var(--brand); text-underline-offset: .22em; }
|
||||
a:hover { text-decoration-thickness: 2px; }
|
||||
img { max-width: 100%; height: auto; display: block; }
|
||||
button, input, select, textarea { font: inherit; }
|
||||
svg { flex-shrink: 0; }
|
||||
:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
|
||||
h1, h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; text-wrap: pretty; }
|
||||
h1 { font-size: clamp(2.25rem, 4.1vw, 3.5rem); line-height: 1.12; letter-spacing: -.032em; }
|
||||
h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.2; letter-spacing: -.025em; margin: .7rem 0 1.2rem; }
|
||||
h3 { font-size: 1.13rem; line-height: 1.45; margin: 0 0 .65rem; }
|
||||
p { margin: 0 0 1rem; }
|
||||
::selection { background: #ffda96; color: var(--brand-dark); }
|
||||
.container { width: min(calc(100% - 80px), var(--max)); margin-inline: auto; }
|
||||
.section { padding: 88px 0; }
|
||||
.section--soft { background: var(--surface-soft); }
|
||||
.eyebrow { color: var(--ink); display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; line-height: 1.6; }
|
||||
.eyebrow__line { display: block; width: 30px; height: 2px; flex: 0 0 30px; background: #b87a24; }
|
||||
.lede { font-size: 1.05rem; color: var(--muted); max-width: 62ch; line-height: 1.8; }
|
||||
.section-heading { max-width: 760px; margin: 0 auto 36px; text-align: center; }
|
||||
.section-heading .eyebrow { justify-content: center; }
|
||||
.section-heading .lede { margin-inline: auto; }
|
||||
.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; }
|
||||
.button:disabled { opacity: .7; cursor: progress; }
|
||||
.button--secondary { background: transparent; border-color: var(--brand); color: var(--brand); }
|
||||
.button--secondary:hover { background: var(--cream); }
|
||||
.text-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: .86rem; line-height: 1.5; text-decoration: none; }
|
||||
.text-link:hover { text-decoration: underline; }
|
||||
.text-link svg { width: 20px; }
|
||||
.icon-circle { display: inline-grid; place-items: center; flex: 0 0 auto; width: 49px; height: 49px; border-radius: 50%; background: var(--cream); color: var(--brand); }
|
||||
|
||||
.hero { padding: 62px 0 72px; background: var(--cream); overflow: hidden; }
|
||||
.hero__grid { display: grid; gap: 60px; align-items: center; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
|
||||
.hero h1 { margin: 19px 0 22px; overflow-wrap: anywhere; }
|
||||
.hero .lede { font-size: 1rem; line-height: 1.8; }
|
||||
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; margin: 26px 0 14px; }
|
||||
.hero__call { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; font-size: .84rem; text-decoration: none; }
|
||||
.hero__call:hover { text-decoration: underline; }
|
||||
.hero__call svg { width: 17px; height: 17px; }
|
||||
.eligibility-note { border-left: 3px solid #d49c40; padding: 2px 0 2px 15px; margin: 22px 0 0; font-size: .88rem; line-height: 1.8; color: var(--ink); }
|
||||
.hero .form-note { max-width: 47ch; font-size: .73rem; line-height: 1.7; margin-bottom: 0; }
|
||||
.hero__visual { position: relative; padding: 10px 0 34px; min-width: 0; }
|
||||
.hero__media { margin: 0; aspect-ratio: 1.08; border-radius: 120px 16px 120px 16px; overflow: hidden; position: relative; background: #e8dfd0; }
|
||||
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
|
||||
.hero__gear { position: absolute; width: 178px; height: 178px; right: -44px; top: -40px; opacity: .8; transform: rotate(12deg); }
|
||||
.hero__location { display: flex; gap: 13px; align-items: center; position: absolute; bottom: 0; left: -24px; padding: 17px 26px 17px 18px; background: white; border-radius: 10px; box-shadow: 0 14px 36px #343c5212; font-size: .66rem; color: var(--muted); }
|
||||
.hero__location strong { display: block; font-size: .94rem; font-weight: 700; color: var(--ink); margin-top: 2px; }
|
||||
.hero__location .icon-circle { width: 42px; height: 42px; }
|
||||
|
||||
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 74px; align-items: center; }
|
||||
.reassurance .lede { font-size: 1rem; }
|
||||
.expectations { border-left: 1px solid var(--line); padding: 12px 0 12px 54px; }
|
||||
.expectations h3 { font-size: 1.08rem; margin-bottom: 22px; }
|
||||
.check-list { padding: 0; margin: 0; list-style: none; }
|
||||
.check-list li { display: flex; align-items: flex-start; gap: 13px; margin: 17px 0; font-size: .93rem; }
|
||||
.check-mark { margin-top: 2px; width: 23px; height: 23px; display: inline-grid; flex: 0 0 23px; place-items: center; background: var(--cream); border-radius: 50%; }
|
||||
.check-mark svg { width: 14px; height: 14px; }
|
||||
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
|
||||
.payment-card { padding: 28px; border-radius: 10px; background: white; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; }
|
||||
.payment-card .icon-circle { margin-bottom: 22px; }
|
||||
.payment-card p { color: var(--muted); font-size: .94rem; margin-bottom: 24px; }
|
||||
.payment-card .text-link { margin-top: auto; padding-top: 19px; border-top: 1px solid var(--line); width: 100%; justify-content: space-between; }
|
||||
.payment__action { margin-top: 28px; }
|
||||
|
||||
.care { background: var(--brand); color: white; }
|
||||
.care__grid { gap: 80px; }
|
||||
.care__media { margin: 0; overflow: hidden; border-radius: 12px 80px 12px 12px; aspect-ratio: 1.25; }
|
||||
.care__media img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.care .eyebrow { color: #ffd18a; }
|
||||
.care .lede { color: #e2e8f3; font-size: 1rem; }
|
||||
.care .text-link { color: #ffd18a; margin-top: 13px; }
|
||||
.care :focus-visible, .consultation__details :focus-visible { outline-color: var(--gold); }
|
||||
.process { padding: 0; list-style: none; margin: 42px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
|
||||
.process li { position: relative; }
|
||||
.process__number { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cream); color: var(--brand); font-family: 'Playfair Display', Georgia, serif; font-size: 1.4rem; margin-bottom: 23px; }
|
||||
.process li:not(:last-child)::after { content: ''; position: absolute; height: 1px; background: var(--line); top: 28px; left: 78px; right: -20px; }
|
||||
.process p { font-size: .92rem; color: var(--muted); }
|
||||
|
||||
.faq-section { padding-top: 0; }
|
||||
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 88px; padding-top: 72px; border-top: 1px solid var(--line); }
|
||||
.faq details { border-top: 1px solid var(--line); }
|
||||
.faq details:last-child { border-bottom: 1px solid var(--line); }
|
||||
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; padding: 21px 0; cursor: pointer; font-weight: 700; font-size: .94rem; line-height: 1.65; list-style: none; }
|
||||
.faq summary::-webkit-details-marker { display: none; }
|
||||
.faq summary::after { content: '+'; flex: 0 0 24px; font-weight: 400; font-size: 1.5rem; text-align: center; }
|
||||
.faq details[open] summary::after { content: '−'; }
|
||||
.faq details p { font-size: .94rem; color: var(--muted); padding-right: 30px; padding-bottom: 12px; }
|
||||
|
||||
.consultation { background: var(--cream); scroll-margin-top: 0; }
|
||||
.consultation__panel { background: var(--brand); border-radius: 16px; overflow: hidden; gap: 0; align-items: stretch; grid-template-areas: 'copy form' 'contact form'; grid-template-rows: auto 1fr; }
|
||||
.consultation__copy { grid-area: copy; padding: 50px 50px 0; color: white; }
|
||||
.consultation__details { grid-area: contact; padding: 0 50px 35px; }
|
||||
.consultation__copy .eyebrow { color: #ffd18a; }
|
||||
.consultation__copy h2 { font-size: clamp(2rem, 3vw, 2.7rem); }
|
||||
.consultation__copy .lede { color: #e2e8f3; font-size: 1rem; }
|
||||
.consultation__contact { margin: 28px 0; padding-top: 25px; border-top: 1px solid #ffffff35; }
|
||||
.consultation__contact h3 { margin: 0; font-size: 1rem; }
|
||||
.consultation__contact a { display: inline-flex; align-items: center; gap: 12px; color: #ffcf80; text-decoration: none; font-weight: 700; }
|
||||
.consultation__contact p { margin: 10px 0 0 36px; font-size: .8rem; color: #e2e8f3; line-height: 1.9; }
|
||||
.clinic-location { display: flex; align-items: flex-start; gap: 12px; margin-top: 26px; padding-top: 25px; border-top: 1px solid #ffffff35; color: #e2e8f3; }
|
||||
.clinic-location > .icon-circle { width: 32px; height: 32px; flex: 0 0 32px; color: var(--brand); background: #ffcf80; }
|
||||
.clinic-location__body { min-width: 0; }
|
||||
.clinic-location h3 { margin: 0; color: white; font-size: 1rem; }
|
||||
.clinic-location address { margin: 10px 0 12px; font-size: .82rem; line-height: 1.7; font-style: normal; }
|
||||
.clinic-location__directions { display: inline-flex; align-items: center; gap: 8px; color: #ffcf80; font-size: .8rem; font-weight: 700; text-decoration: none; }
|
||||
.clinic-location__directions svg { width: 16px; }
|
||||
.form-wrap { grid-area: form; background: white; margin: 12px; border-radius: 10px; padding: 34px; }
|
||||
.form-wrap h3 { font-size: 1.15rem; }
|
||||
.form-intro { margin-bottom: 24px; }
|
||||
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
|
||||
.field { display: grid; gap: 7px; }
|
||||
.field--full { grid-column: 1 / -1; }
|
||||
label { font-weight: 700; font-size: .78rem; line-height: 1.7; }
|
||||
input, select { width: 100%; min-height: 50px; padding: 11px 12px; border: 1px solid #8993a5; border-radius: 5px; background: #fff; color: var(--ink); }
|
||||
.form-note { color: var(--muted); font-size: .78rem; line-height: 1.75; }
|
||||
#lead-form > .form-note { margin-top: 20px; margin-bottom: 0; }
|
||||
.form-error { color: var(--danger); font-size: .85rem; font-weight: 700; }
|
||||
.form-error:not(:empty) { margin-top: 18px; }
|
||||
.form-wrap .button { width: 100%; margin-top: 24px; }
|
||||
|
||||
.site-footer { padding: 45px 0; }
|
||||
.site-footer__inner { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; align-items: center; }
|
||||
.site-footer .brand img { width: 150px; }
|
||||
.site-footer__links { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: .8rem; }
|
||||
.site-footer .form-note { margin: 16px 0 0; max-width: 78ch; }
|
||||
.mobile-cta { display: none; position: fixed; inset: auto 0 0; background: #fff; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px #243f7e0b; z-index: 20; }
|
||||
.mobile-cta .button { width: 100%; }
|
||||
.thank-you { background: var(--cream); min-height: 60vh; }
|
||||
.thank-you__content { max-width: 760px; }
|
||||
.thank-you h1 { margin: 16px 0 24px; }
|
||||
.thank-you .button { margin-top: 16px; }
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.container { width: calc(100% - 56px); }
|
||||
.hero__grid { gap: 36px; }
|
||||
.hero h1 { font-size: 2.8rem; }
|
||||
.grid-2 { gap: 44px; }
|
||||
.hero__media { aspect-ratio: .9; }
|
||||
.expectations { padding-left: 30px; }
|
||||
.consultation__panel { gap: 0; }
|
||||
.consultation__copy, .form-wrap { padding: 30px; }
|
||||
.consultation__copy { padding-bottom: 0; }
|
||||
.consultation__details { padding: 0 30px 24px; }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.faq-grid { gap: 44px; }
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
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; }
|
||||
.hero h1 { font-size: clamp(2.2rem, 6.6vw, 3.3rem); margin-top: 15px; }
|
||||
.hero .lede { font-size: .96rem; }
|
||||
.eyebrow { font-size: .68rem; letter-spacing: .08em; }
|
||||
.hero__actions { gap: 8px; align-items: flex-start; flex-direction: column; margin-top: 23px; }
|
||||
.hero__actions .button { min-height: 54px; }
|
||||
.hero__visual { width: min(100%, 570px); margin-inline: auto; padding-bottom: 26px; }
|
||||
.hero__media { aspect-ratio: 1.28; border-radius: 78px 12px 78px 12px; }
|
||||
.hero__location { left: 12px; padding: 12px 20px 12px 14px; }
|
||||
.hero__gear { width: 130px; height: 130px; top: -15px; right: -20px; }
|
||||
.grid-2 { gap: 30px; }
|
||||
.reassurance .lede { margin-bottom: 0; }
|
||||
.expectations { border-left: 0; border-top: 1px solid var(--line); padding: 27px 0 0; }
|
||||
.section-heading { text-align: left; margin-bottom: 28px; }
|
||||
.section-heading .eyebrow { justify-content: flex-start; }
|
||||
.cards { gap: 16px; }
|
||||
.payment-card { padding: 24px; }
|
||||
.payment-card .icon-circle { margin-bottom: 16px; }
|
||||
.payment-card p { margin-bottom: 18px; }
|
||||
.care__grid { gap: 34px; }
|
||||
.care__media { aspect-ratio: 1.4; border-top-right-radius: 65px; }
|
||||
.care__copy { order: -1; }
|
||||
.process { gap: 28px; margin-top: 30px; }
|
||||
.process li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; }
|
||||
.process__number { width: 44px; height: 44px; font-size: 1.1rem; grid-row: span 2; margin: 0; }
|
||||
.process h3 { margin-top: 6px; }
|
||||
.process p { margin: 0; }
|
||||
.process li:not(:last-child)::after { width: 1px; height: auto; left: 22px; top: 57px; bottom: -16px; right: auto; }
|
||||
.faq-section { padding-top: 0; }
|
||||
.faq-grid { padding-top: 45px; gap: 18px; }
|
||||
.faq h2 { margin-bottom: 0; }
|
||||
.faq summary { font-size: .88rem; gap: 15px; }
|
||||
.consultation__panel { gap: 0; grid-template-areas: 'copy' 'form' 'contact'; grid-template-rows: auto; }
|
||||
.consultation__copy { padding: 30px 26px 6px; }
|
||||
.consultation__details { padding: 0 26px 8px; }
|
||||
.form-wrap { margin: 8px; padding: 25px 20px; }
|
||||
.site-footer { padding-bottom: 112px; }
|
||||
.site-footer__inner { grid-template-columns: 1fr; gap: 24px; }
|
||||
.mobile-cta { display: block; }
|
||||
input, select { scroll-margin-bottom: 105px; }
|
||||
}
|
||||
@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; }
|
||||
.hero__location strong { font-size: .86rem; }
|
||||
.consultation__copy { padding-inline: 20px; }
|
||||
.form-wrap { padding-inline: 16px; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
||||
}
|
||||
@@ -0,0 +1,717 @@
|
||||
/* Adapted from the source-authored early-intervention page stylesheet, not HubSpot theme CSS. */
|
||||
:root{
|
||||
--color-aia-blue:#254080;
|
||||
--color-aia-logo-blue:#27417f;
|
||||
--color-aia-gold:#ffbd59;
|
||||
--color-aia-orange:#ff914d;
|
||||
--color-aia-amber:#ff9f0d;
|
||||
--color-aia-mist:#f3f4f8;
|
||||
--color-aia-pale-warm:#fefaf2;
|
||||
--color-aia-ink:#0e1133;
|
||||
--color-aia-slate:#5b5f6f;
|
||||
--color-aia-border:#d7d9e3;
|
||||
--color-aia-red-600:#dc2626;
|
||||
--color-white:#fff;
|
||||
--color-transparent:transparent;
|
||||
--space-1:.25rem;
|
||||
--space-2:.5rem;
|
||||
--space-3:.75rem;
|
||||
--space-4:1rem;
|
||||
--space-6:1.5rem;
|
||||
--space-8:2rem;
|
||||
--space-12:3rem;
|
||||
--space-16:4rem;
|
||||
--radius-sm:.25rem;
|
||||
--radius-md:.5rem;
|
||||
--radius-lg:.75rem;
|
||||
--radius-xl:1rem;
|
||||
--shadow-sm:0 1px 2px #0e11330f;
|
||||
--shadow-md:0 12px 30px #25408024;
|
||||
--font-heading:"Playfair Display", Georgia, serif;
|
||||
--font-body:"Rubik", system-ui, sans-serif;
|
||||
--font-accent:"Caveat", cursive;
|
||||
--container-xl:1180px;
|
||||
--color-primary:var(--color-aia-blue);
|
||||
--color-on-primary:var(--color-white);
|
||||
--color-secondary:var(--color-aia-gold);
|
||||
--color-accent:var(--color-aia-orange);
|
||||
--color-background:var(--color-aia-mist);
|
||||
--color-foreground:var(--color-aia-slate);
|
||||
--color-heading:var(--color-aia-blue);
|
||||
--color-card:var(--color-white);
|
||||
--color-muted:#edeef3;
|
||||
--color-muted-foreground:var(--color-aia-slate);
|
||||
--color-border:var(--color-aia-border);
|
||||
--color-destructive:var(--color-aia-red-600);
|
||||
--color-ring:var(--color-aia-blue);
|
||||
--color-link:var(--color-aia-orange);
|
||||
--color-link-hover:var(--color-aia-gold);
|
||||
--button-font-family:var(--font-body);
|
||||
--button-font-size:1rem;
|
||||
--button-font-weight:400;
|
||||
--button-line-height:1.5rem;
|
||||
--button-padding-block:.8rem;
|
||||
--button-padding-inline:1.2rem;
|
||||
--button-border-width:2px;
|
||||
--button-radius:var(--radius-sm);
|
||||
--button-transition:.3s linear all;
|
||||
--button-bg:var(--color-secondary);
|
||||
--button-fg:var(--color-primary);
|
||||
--button-border:var(--color-secondary);
|
||||
--button-bg-hover:var(--color-transparent);
|
||||
--button-fg-hover:var(--color-primary);
|
||||
--button-border-hover:var(--color-accent);
|
||||
--button-bg-active:var(--color-transparent);
|
||||
--button-border-active:var(--color-secondary);
|
||||
--button-bg-focus:var(--color-accent);
|
||||
--button-border-focus:var(--color-accent);
|
||||
--button-secondary-bg:var(--color-transparent);
|
||||
--button-secondary-fg:var(--color-primary);
|
||||
--button-secondary-border:var(--color-secondary);
|
||||
--button-secondary-bg-hover:#2540800a;
|
||||
--button-secondary-border-hover:var(--color-primary);
|
||||
--button-secondary-bg-active:#25408029;
|
||||
--button-secondary-border-active:var(--color-primary);
|
||||
--card-radius:var(--radius-sm);
|
||||
--card-shadow:var(--shadow-md);
|
||||
--input-bg:var(--color-white);
|
||||
--input-border:var(--color-border);
|
||||
--input-focus-ring:var(--color-ring);
|
||||
--input-radius:var(--radius-md)
|
||||
}
|
||||
*{
|
||||
box-sizing:border-box
|
||||
}
|
||||
html{
|
||||
color:var(--color-foreground);
|
||||
background:var(--color-background);
|
||||
font-family:var(--font-body);
|
||||
scroll-behavior:smooth;
|
||||
line-height:1.5
|
||||
}
|
||||
body{
|
||||
background:linear-gradient(180deg, #ffffffe6, #f3f4f8eb 38rem), var(--color-background);
|
||||
min-width:320px;
|
||||
margin:0
|
||||
}
|
||||
body,button,input,select{
|
||||
font:inherit
|
||||
}
|
||||
a{
|
||||
color:var(--color-link);
|
||||
cursor:pointer;
|
||||
text-decoration:none
|
||||
}
|
||||
a:hover,a:focus,a:active{
|
||||
color:var(--color-link-hover);
|
||||
text-decoration:none
|
||||
}
|
||||
img{
|
||||
max-width:100%;
|
||||
height:auto
|
||||
}
|
||||
button,a{
|
||||
-webkit-tap-highlight-color:transparent;
|
||||
touch-action:manipulation
|
||||
}
|
||||
:focus-visible{
|
||||
outline:3px solid var(--color-ring);
|
||||
outline-offset:4px
|
||||
}
|
||||
.skip-link{
|
||||
z-index:10;
|
||||
border-radius:var(--radius-md);
|
||||
background:var(--color-card);
|
||||
color:var(--color-foreground);
|
||||
box-shadow:var(--shadow-md);
|
||||
padding:.75rem 1rem;
|
||||
position:fixed;
|
||||
top:1rem;
|
||||
left:1rem;
|
||||
transform:translateY(-150%)
|
||||
}
|
||||
.skip-link:focus{
|
||||
transform:translateY(0)
|
||||
}
|
||||
.hero-actions{
|
||||
align-items:center;
|
||||
gap:.75rem;
|
||||
display:flex
|
||||
}
|
||||
.eyebrow{
|
||||
text-transform:uppercase;
|
||||
margin:0 0 .75rem;
|
||||
font-size:.875rem;
|
||||
font-weight:800;
|
||||
color:var(--color-aia-orange)!important
|
||||
}
|
||||
h1,h2,h3,p{
|
||||
margin-top:0
|
||||
}
|
||||
h1,h2,h3{
|
||||
color:var(--color-heading);
|
||||
font-family:var(--font-heading);
|
||||
line-height:1.1
|
||||
}
|
||||
h1{
|
||||
letter-spacing:0;
|
||||
max-width:13ch;
|
||||
margin-bottom:1.25rem;
|
||||
font-size:clamp(2.7rem,7.4vw,5.25rem);
|
||||
font-weight:700
|
||||
}
|
||||
h2{
|
||||
letter-spacing:0;
|
||||
margin-bottom:1rem;
|
||||
font-size:clamp(2rem,4.6vw,3.45rem);
|
||||
font-weight:700
|
||||
}
|
||||
h3{
|
||||
letter-spacing:0;
|
||||
margin-bottom:.75rem;
|
||||
font-size:1.35rem
|
||||
}
|
||||
.hero-actions{
|
||||
flex-wrap:wrap;
|
||||
margin-top:2rem
|
||||
}
|
||||
.button{
|
||||
border:var(--button-border-width) solid var(--button-border);
|
||||
border-radius:var(--button-radius);
|
||||
cursor:pointer;
|
||||
min-height:48px;
|
||||
font-family:var(--button-font-family);
|
||||
font-size:var(--button-font-size);
|
||||
font-weight:var(--button-font-weight);
|
||||
line-height:var(--button-line-height);
|
||||
padding:var(--button-padding-block) var(--button-padding-inline);
|
||||
text-align:center;
|
||||
transition:var(--button-transition);
|
||||
white-space:normal;
|
||||
word-break:break-word;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
text-decoration:none;
|
||||
display:inline-flex
|
||||
}
|
||||
.button:hover{
|
||||
transition:var(--button-transition)
|
||||
}
|
||||
.button-primary{
|
||||
background:var(--button-bg);
|
||||
color:var(--button-fg);
|
||||
border-color:var(--button-border)
|
||||
}
|
||||
.button-primary:hover{
|
||||
background:var(--button-bg-hover);
|
||||
color:var(--button-fg-hover);
|
||||
border-color:var(--button-border-hover)
|
||||
}
|
||||
.button-primary:active{
|
||||
background:var(--button-bg-active);
|
||||
color:var(--button-fg-hover);
|
||||
border-color:var(--button-border-active)
|
||||
}
|
||||
.button-primary:focus{
|
||||
background:var(--button-bg-focus);
|
||||
color:var(--button-fg-hover);
|
||||
border-color:var(--button-border-focus)
|
||||
}
|
||||
.button-secondary{
|
||||
border-color:var(--button-secondary-border);
|
||||
background:var(--button-secondary-bg);
|
||||
color:var(--button-secondary-fg)
|
||||
}
|
||||
.button-secondary:hover{
|
||||
border-color:var(--button-secondary-border-hover);
|
||||
background:var(--button-secondary-bg-hover);
|
||||
color:var(--button-secondary-fg)
|
||||
}
|
||||
.button-secondary:active,.button-secondary:focus{
|
||||
border-color:var(--button-secondary-border-active);
|
||||
background:var(--button-secondary-bg-active);
|
||||
color:var(--button-secondary-fg)
|
||||
}
|
||||
.lead-form{
|
||||
border:1px solid var(--color-border);
|
||||
border-radius:var(--card-radius);
|
||||
background:var(--color-card);
|
||||
box-shadow:var(--card-shadow)
|
||||
}
|
||||
.panel-label{
|
||||
color:var(--color-muted-foreground);
|
||||
margin-bottom:.25rem;
|
||||
font-weight:800
|
||||
}
|
||||
.panel-title{
|
||||
color:var(--color-heading);
|
||||
font-family:var(--font-heading);
|
||||
font-size:1.35rem;
|
||||
font-weight:800
|
||||
}
|
||||
.section-heading{
|
||||
max-width:44rem
|
||||
}
|
||||
.step-number{
|
||||
background:var(--color-primary);
|
||||
width:3rem;
|
||||
height:3rem;
|
||||
color:var(--color-on-primary);
|
||||
border-radius:999px;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
font-weight:800;
|
||||
display:inline-flex
|
||||
}
|
||||
.check-list{
|
||||
gap:.85rem;
|
||||
margin:1.5rem 0 0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
display:grid
|
||||
}
|
||||
.check-list li{
|
||||
color:var(--color-heading);
|
||||
padding-left:2rem;
|
||||
position:relative
|
||||
}
|
||||
.check-list li:before{
|
||||
content:"";
|
||||
background:var(--color-secondary);
|
||||
width:.85rem;
|
||||
height:.85rem;
|
||||
box-shadow:inset 0 0 0 3px var(--color-card);
|
||||
border-radius:999px;
|
||||
position:absolute;
|
||||
top:.35rem;
|
||||
left:0
|
||||
}
|
||||
.lead-form p{
|
||||
color:var(--color-muted-foreground)
|
||||
}
|
||||
.lead-form{
|
||||
gap:1rem;
|
||||
padding:clamp(1.25rem,4vw,2rem);
|
||||
display:grid
|
||||
}
|
||||
.field{
|
||||
gap:.45rem;
|
||||
display:grid
|
||||
}
|
||||
.field label{
|
||||
color:var(--color-heading);
|
||||
font-weight:800
|
||||
}
|
||||
.field input{
|
||||
border:1px solid var(--input-border);
|
||||
border-radius:var(--input-radius);
|
||||
background:var(--input-bg);
|
||||
width:100%;
|
||||
min-height:48px;
|
||||
color:var(--color-foreground);
|
||||
padding:.75rem .9rem
|
||||
}
|
||||
.field input:focus{
|
||||
border-color:var(--input-focus-ring);
|
||||
outline:3px solid color-mix(in srgb, var(--input-focus-ring), transparent 70%)
|
||||
}
|
||||
.phone-link{
|
||||
border-radius:var(--radius-md);
|
||||
min-height:48px;
|
||||
color:var(--color-link);
|
||||
align-items:center;
|
||||
font-size:clamp(1.35rem,3vw,2rem);
|
||||
font-weight:800;
|
||||
text-decoration:none;
|
||||
display:inline-flex
|
||||
}
|
||||
.phone-link:hover,.phone-link:focus{
|
||||
color:var(--color-link-hover)
|
||||
}
|
||||
code{
|
||||
border-radius:var(--radius-sm);
|
||||
background:var(--color-muted);
|
||||
padding:.1rem .3rem
|
||||
}
|
||||
@media (width<=860px){
|
||||
}
|
||||
@media (width<=520px){
|
||||
.button{
|
||||
flex:1
|
||||
}
|
||||
.hero-actions{
|
||||
flex-direction:column;
|
||||
align-items:stretch
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion:reduce){
|
||||
*,:before,:after{
|
||||
scroll-behavior:auto!important;
|
||||
transition-duration:.01ms!important;
|
||||
animation-duration:.01ms!important;
|
||||
animation-iteration-count:1!important
|
||||
}
|
||||
}
|
||||
.field-optional{
|
||||
color:var(--color-muted-foreground);
|
||||
font-weight:500
|
||||
}
|
||||
.qr-landing{
|
||||
min-width:0
|
||||
}
|
||||
.qr-hero,.qr-section,.qr-final-cta{
|
||||
width:100%;
|
||||
max-width:var(--container-xl);
|
||||
padding:var(--space-8) var(--space-4);
|
||||
margin:0 auto
|
||||
}
|
||||
.qr-hero{
|
||||
gap:var(--space-8);
|
||||
padding-top:var(--space-6);
|
||||
align-items:center;
|
||||
display:grid
|
||||
}
|
||||
.qr-hero-copy,.qr-hero-visual,.qr-contact-section>*,.qr-assurance-section>*{
|
||||
min-width:0
|
||||
}
|
||||
.qr-hero h1{
|
||||
max-width:14ch;
|
||||
margin-bottom:var(--space-4);
|
||||
font-size:clamp(2.55rem,12vw,4.2rem);
|
||||
line-height:1.02
|
||||
}
|
||||
.qr-hero .eyebrow{
|
||||
margin-bottom:var(--space-3)
|
||||
}
|
||||
.qr-hero-subheading{
|
||||
max-width:39rem;
|
||||
margin-bottom:var(--space-4);
|
||||
color:var(--color-foreground);
|
||||
font-size:clamp(1.0625rem,3.8vw,1.25rem);
|
||||
line-height:1.6
|
||||
}
|
||||
.qr-audience{
|
||||
border-left:4px solid var(--color-secondary);
|
||||
max-width:38rem;
|
||||
color:var(--color-heading);
|
||||
padding-left:var(--space-3);
|
||||
margin:0;
|
||||
font-weight:700;
|
||||
line-height:1.5
|
||||
}
|
||||
.qr-hero-actions{
|
||||
align-items:stretch;
|
||||
gap:var(--space-3);
|
||||
margin-top:var(--space-6);
|
||||
flex-direction:column
|
||||
}
|
||||
.qr-hero-actions .button{
|
||||
width:100%
|
||||
}
|
||||
.qr-hero-visual{
|
||||
display:grid;
|
||||
position:relative
|
||||
}
|
||||
.qr-image-frame{
|
||||
place-items:end center;
|
||||
min-height:19rem;
|
||||
display:grid
|
||||
}
|
||||
.qr-image-frame img{
|
||||
border-radius:var(--card-radius);
|
||||
width:min(100%,29.625rem);
|
||||
height:auto;
|
||||
display:block
|
||||
}
|
||||
.qr-fit-card,.qr-call-card,.qr-benefit-card,.qr-process-step,.qr-assurance-section,.qr-final-cta{
|
||||
border:1px solid var(--color-border);
|
||||
border-radius:var(--card-radius);
|
||||
background:var(--color-card);
|
||||
box-shadow:var(--shadow-sm)
|
||||
}
|
||||
.qr-fit-card{
|
||||
padding:var(--space-6)
|
||||
}
|
||||
.qr-fit-card .panel-label{
|
||||
color:var(--color-primary)
|
||||
}
|
||||
.qr-fit-card .panel-title{
|
||||
margin-bottom:var(--space-3)
|
||||
}
|
||||
.qr-fit-card ul{
|
||||
gap:var(--space-3);
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
display:grid
|
||||
}
|
||||
.qr-fit-card li{
|
||||
padding-left:var(--space-6);
|
||||
position:relative
|
||||
}
|
||||
.qr-fit-card li:before{
|
||||
content:"";
|
||||
background:var(--color-secondary);
|
||||
border-radius:999px;
|
||||
width:.75rem;
|
||||
height:.75rem;
|
||||
position:absolute;
|
||||
top:.45rem;
|
||||
left:0
|
||||
}
|
||||
.qr-section{
|
||||
gap:var(--space-8);
|
||||
padding-block:var(--space-12);
|
||||
display:grid
|
||||
}
|
||||
.qr-contact-section{
|
||||
align-items:start
|
||||
}
|
||||
.qr-contact-section .lead-form,.qr-call-card{
|
||||
padding:var(--space-6)
|
||||
}
|
||||
.qr-contact-section .lead-form{
|
||||
scroll-margin-top:var(--space-4);
|
||||
box-shadow:var(--shadow-md)
|
||||
}
|
||||
.qr-contact-section .lead-form .button{
|
||||
width:100%
|
||||
}
|
||||
.qr-call-card{
|
||||
gap:var(--space-3);
|
||||
display:grid
|
||||
}
|
||||
.qr-call-card h2,.qr-call-card p{
|
||||
margin-bottom:0
|
||||
}
|
||||
.qr-call-card .phone-link{
|
||||
width:fit-content;
|
||||
margin-block:var(--space-2);
|
||||
color:var(--color-primary)
|
||||
}
|
||||
.qr-process-band{
|
||||
background:var(--color-aia-pale-warm);
|
||||
width:100%
|
||||
}
|
||||
.qr-section-heading{
|
||||
max-width:41rem
|
||||
}
|
||||
.qr-benefit-grid,.qr-process-list{
|
||||
gap:var(--space-4);
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
display:grid
|
||||
}
|
||||
.qr-benefit-card{
|
||||
padding:var(--space-6)
|
||||
}
|
||||
.qr-card-number{
|
||||
margin-bottom:var(--space-6);
|
||||
color:var(--color-primary);
|
||||
font-size:.875rem;
|
||||
font-weight:800;
|
||||
display:inline-flex
|
||||
}
|
||||
.qr-benefit-card p,.qr-process-step p,.qr-assurance-copy>p,.qr-final-cta p{
|
||||
color:var(--color-muted-foreground);
|
||||
margin-bottom:0
|
||||
}
|
||||
.qr-process-step{
|
||||
gap:var(--space-4);
|
||||
padding:var(--space-6);
|
||||
grid-template-columns:3rem minmax(0,1fr);
|
||||
align-items:start;
|
||||
display:grid
|
||||
}
|
||||
.qr-process-step .step-number{
|
||||
flex:none
|
||||
}
|
||||
.qr-assurance-section{
|
||||
margin-top:var(--space-12);
|
||||
padding:var(--space-6);
|
||||
align-items:center
|
||||
}
|
||||
.qr-assurance-copy>p{
|
||||
font-size:1.0625rem;
|
||||
line-height:1.65
|
||||
}
|
||||
.qr-assurance-figure{
|
||||
border-radius:var(--card-radius);
|
||||
background-color:var(--color-aia-pale-warm);
|
||||
place-items:center;
|
||||
min-height:17.5rem;
|
||||
margin:0;
|
||||
display:grid
|
||||
}
|
||||
.qr-assurance-figure img{
|
||||
width:min(100%,17.5rem);
|
||||
height:auto;
|
||||
display:block
|
||||
}
|
||||
.qr-final-cta{
|
||||
gap:var(--space-6);
|
||||
margin-block:var(--space-4) var(--space-12);
|
||||
padding:var(--space-8) var(--space-6);
|
||||
background-color:var(--color-aia-pale-warm);
|
||||
box-shadow:none;
|
||||
display:grid
|
||||
}
|
||||
.qr-final-cta h2{
|
||||
max-width:17ch;
|
||||
font-size:clamp(2rem,8vw,3.25rem)
|
||||
}
|
||||
.qr-final-cta .hero-actions{
|
||||
flex-direction:column;
|
||||
align-items:stretch;
|
||||
margin-top:0
|
||||
}
|
||||
.qr-final-cta .button{
|
||||
width:100%
|
||||
}
|
||||
.qr-more-info-section{
|
||||
background-color:#fff;
|
||||
align-items:center
|
||||
}
|
||||
.qr-more-info-section h2{
|
||||
max-width:22ch
|
||||
}
|
||||
.qr-more-info-section div>p:last-child{
|
||||
max-width:42rem;
|
||||
color:var(--color-muted-foreground);
|
||||
margin-bottom:0
|
||||
}
|
||||
.qr-more-info-section .button{
|
||||
width:100%
|
||||
}
|
||||
@media (width>=640px){
|
||||
.qr-hero,.qr-section,.qr-final-cta{
|
||||
padding-inline:var(--space-8)
|
||||
}
|
||||
.qr-hero-actions,.qr-final-cta .hero-actions{
|
||||
flex-direction:row;
|
||||
align-items:center
|
||||
}
|
||||
.qr-hero-actions .button,.qr-final-cta .button,.qr-more-info-section .button{
|
||||
width:auto
|
||||
}
|
||||
}
|
||||
@media (width>=800px){
|
||||
.qr-hero{
|
||||
gap:var(--space-8);
|
||||
min-height:min(46rem,100dvh - 4.75rem);
|
||||
padding-block:var(--space-12);
|
||||
grid-template-columns:minmax(0,1.08fr) minmax(18rem,.72fr)
|
||||
}
|
||||
.qr-image-frame{
|
||||
min-height:27rem
|
||||
}
|
||||
.qr-fit-card{
|
||||
margin-top:-5rem
|
||||
}
|
||||
.qr-contact-section{
|
||||
grid-template-columns:minmax(0,1.08fr) minmax(18rem,.72fr)
|
||||
}
|
||||
.qr-benefit-grid,.qr-process-list{
|
||||
grid-template-columns:repeat(3,minmax(0,1fr))
|
||||
}
|
||||
.qr-process-step{
|
||||
grid-template-columns:1fr
|
||||
}
|
||||
.qr-assurance-section{
|
||||
grid-template-columns:minmax(0,1fr) minmax(17.5rem,.62fr)
|
||||
}
|
||||
.qr-final-cta{
|
||||
grid-template-columns:minmax(0,1fr) auto;
|
||||
align-items:center
|
||||
}
|
||||
.qr-more-info-section{
|
||||
grid-template-columns:minmax(0,1fr) auto
|
||||
}
|
||||
}
|
||||
@media (width<=520px){
|
||||
}
|
||||
.qr-process-band:has(.qr-more-info-section) {
|
||||
background-color:#fff;
|
||||
}
|
||||
.lead-form button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Local font files replace the source's Google Fonts request. */
|
||||
@font-face {
|
||||
font-family: Rubik;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('/assets/fonts/Rubik/regular.woff2') format('woff2'); }
|
||||
@font-face {
|
||||
font-family: Rubik;
|
||||
font-style: normal;
|
||||
font-weight: 700 800;
|
||||
font-display: swap;
|
||||
src: url('/assets/fonts/Rubik/700.woff2') format('woff2'); }
|
||||
@font-face {
|
||||
font-family: 'Playfair Display';
|
||||
font-style: normal;
|
||||
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;
|
||||
padding: 30px 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
#consultation-unavailable {
|
||||
margin: 0;
|
||||
}
|
||||
#consultation-unavailable a {
|
||||
color: #254080;
|
||||
text-decoration: underline;
|
||||
}
|
||||
#consultation {
|
||||
scroll-margin-top: 170px;
|
||||
}
|
||||
#consultation button:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.early-footer {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 1rem;
|
||||
} }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
*, *::before, *::after {
|
||||
transition: none !important;
|
||||
} }
|
||||
|
||||
.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; } }
|
||||
Reference in new issue
Block a user