/* ========================================================================= AW Paid Ad — Landing Page (2026-08 XD redesign) All rules scoped under body.aw-paid-ad so nothing leaks into the rest of the site. Font-family values reference custom properties defined locally on .aw-paid-ad itself (not a global :root). ========================================================================= */ body.aw-paid-ad { --awpa-green: #006838; --awpa-green-600: #00572f; --awpa-green-700: #004526; --awpa-green-800: #00351d; --awpa-green-900: #002d19; --awpa-green-300: #4f9e73; --awpa-green-100: #dcebe2; --awpa-green-50: #eef5f0; --awpa-sage: #8fb89a; --awpa-red: #a6322a; --awpa-icon-red: #c8322b; --awpa-gold: #e8a825; --awpa-white: #ffffff; --awpa-cream: #f7f3ea; --awpa-sand: #efe8d8; --awpa-mist: #ded8c8; --awpa-stone: #b6b1a3; --awpa-slate: #7c776b; --awpa-charcoal: #403d36; --awpa-ink: #201e1a; --awpa-black: #0f0e0c; --awpa-bg: var(--awpa-cream); --awpa-surface: var(--awpa-white); --awpa-text-body: var(--awpa-charcoal); --awpa-text-strong: var(--awpa-ink); --awpa-text-muted: var(--awpa-slate); --awpa-border: var(--awpa-mist); /* Content widths measured off the 1440px artboard. */ --awpa-container: 1272px; --awpa-container-md: 946px; --awpa-gutter: 24px; --awpa-radius-sm: 4px; --awpa-radius-md: 8px; --awpa-radius-lg: 12px; --awpa-radius-pill: 999px; --awpa-shadow-sm: 0 1px 3px rgba(32,30,26,.10), 0 1px 2px rgba(32,30,26,.06); --awpa-shadow-md: 0 4px 12px rgba(32,30,26,.10), 0 2px 4px rgba(32,30,26,.05); --awpa-shadow-lg: 0 14px 34px rgba(32,30,26,.16), 0 4px 10px rgba(32,30,26,.08); --awpa-section-y: 84px; } /* ------------------------------------------------------------------------- Page-level reset within the scope. ------------------------------------------------------------------------- */ body.aw-paid-ad { background: var(--awpa-bg); color: var(--awpa-text-body); font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; margin: 0; padding-bottom: 0; } body.aw-paid-ad *, body.aw-paid-ad *::before, body.aw-paid-ad *::after { box-sizing: border-box; } /* The guard belongs on body, never html — non-visible overflow on breaks body→viewport overflow propagation and any modal scroll-lock. */ body.aw-paid-ad { overflow-x: clip; } /* :where() keeps this at 0 specificity. As `body.aw-paid-ad img` it was (0,1,2) and silently beat every component class that sizes an image. */ :where(body.aw-paid-ad) img { max-width: 100%; height: auto; } /* Wrap the selector in :where() so every part contributes 0 specificity and any class-based rule below beats it without fighting the site's global aw-custom.css bare-tag rules. */ :where(body.aw-paid-ad h1, body.aw-paid-ad h2, body.aw-paid-ad h3, body.aw-paid-ad h4, body.aw-paid-ad h5, body.aw-paid-ad h6) { font-family: 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif; color: var(--awpa-text-strong); line-height: 1.1; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; margin: 0; } :where(body.aw-paid-ad p, body.aw-paid-ad ul, body.aw-paid-ad ol) { margin: 0; } :where(body.aw-paid-ad ul, body.aw-paid-ad ol) { list-style: none; padding: 0; } /* The reset above contributes 0 specificity, so the parent theme's `ol, ul { padding-left: 2rem }` (theme.min.css) beats it and every one of these lists rendered 32px off-centre. Restated at class weight. */ .aw-paid-ad__socials, .aw-paid-ad__benefits-grid, .aw-paid-ad__product-grid, .aw-paid-ad__trio-grid, .aw-paid-ad__faq-list { padding: 0; } /* The site's global `p { font-size: 18px }` beats the 0-specificity reset below, so every wysiwyg-backed block restates its type at class weight. ACF wysiwyg wraps its value in

; these are those wrappers. */ .aw-paid-ad__hero-headline p, .aw-paid-ad__hero-subline p, .aw-paid-ad__faq-answer p, .aw-paid-ad__location-value p, .aw-paid-ad__footer-content p { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; margin: 0; } :where(body.aw-paid-ad h1 p, body.aw-paid-ad h2 p, body.aw-paid-ad h3 p) { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0; } body.aw-paid-ad .aw-paid-ad__skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 999; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--awpa-white); color: var(--awpa-green); border-radius: var(--awpa-radius-sm); } /* ========================================================================= Shared layout primitives ========================================================================= */ .aw-paid-ad__section { position: relative; padding: var(--awpa-section-y) 0; } .aw-paid-ad__section--light { background-color: var(--awpa-cream); background-size: cover; background-position: center; background-repeat: no-repeat; } .aw-paid-ad__section--dark { background-color: var(--awpa-green-900); background-size: cover; background-position: center; } .aw-paid-ad__section--brand { background-color: var(--awpa-green-700); } .aw-paid-ad__section-inner { width: 100%; max-width: var(--awpa-container); margin: 0 auto; padding-left: var(--awpa-gutter); padding-right: var(--awpa-gutter); } .aw-paid-ad__section-heading { position: relative; z-index: 1; /* above .aw-paid-ad__benefits-decor, which is absolutely placed */ /* Capped so the headings break across lines the way the artboard shows them rather than running out to the full container width. */ max-width: 640px; margin: 0 auto; font-size: clamp(2rem, 4.4vw, 3.25rem); text-align: center; color: var(--awpa-text-strong); } .aw-paid-ad__section-heading--on-dark { color: var(--awpa-white); } .aw-paid-ad__section-intro { max-width: 620px; margin: 18px auto 0; text-align: center; font-size: 1.0625rem; line-height: 1.65; color: rgba(255, 255, 255, .84); } .aw-paid-ad__section--light .aw-paid-ad__section-intro { color: var(--awpa-text-body); } /* Split heading: line 1 solid, line 2 in the outlined accent face. */ .aw-paid-ad__section-heading--split { display: grid; gap: 2px; } .aw-paid-ad__heading-line { display: block; } .aw-paid-ad__heading-accent { display: block; letter-spacing: 2px; color: var(--awpa-white); } @supports (-webkit-text-stroke: 1px black) { .aw-paid-ad__heading-accent { -webkit-text-stroke: 4px var(--awpa-green); /* Without this the stroke is painted over the fill and eats into the letterforms; at this weight it would close the counters entirely. stroke-then-fill keeps the white fill fully visible. */ paint-order: stroke fill; } } /* ========================================================================= Buttons ========================================================================= */ .aw-paid-ad__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 15px 34px; border: 1.5px solid transparent; border-radius: var(--awpa-radius-pill); font-family: 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.11em; line-height: 1; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .aw-paid-ad__btn svg { flex: 0 0 auto; } .aw-paid-ad__btn--primary { background: var(--awpa-green); border-color: var(--awpa-green); color: var(--awpa-white); } .aw-paid-ad__btn--primary:hover, .aw-paid-ad__btn--primary:focus-visible { background: var(--awpa-green-700); border-color: var(--awpa-green-700); color: var(--awpa-white); } .aw-paid-ad__btn--outline { background: var(--awpa-white); border-color: var(--awpa-green); color: var(--awpa-green); } .aw-paid-ad__btn--outline:hover, .aw-paid-ad__btn--outline:focus-visible { background: var(--awpa-green); color: var(--awpa-white); } .aw-paid-ad__btn--ghost-on-dark { background: transparent; border-color: rgba(255, 255, 255, .72); color: var(--awpa-white); } .aw-paid-ad__btn--ghost-on-dark:hover, .aw-paid-ad__btn--ghost-on-dark:focus-visible { background: var(--awpa-white); border-color: var(--awpa-white); color: var(--awpa-green-800); } .aw-paid-ad__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .aw-paid-ad__cta-row--light, .aw-paid-ad__cta-row--dark { justify-content: center; margin-top: 40px; } /* Alignment is chosen per call site, independent of the colour context. Declared after the two above so it wins at equal specificity. */ .aw-paid-ad__cta-row--align-start { justify-content: flex-start; } .aw-paid-ad__cta-row--align-center { justify-content: center; } /* ========================================================================= Header — utility bar + brand row ========================================================================= */ .aw-paid-ad__header { position: relative; z-index: 3; background: var(--awpa-white); } /* Matched to the site's #global-nav (.global-nav-wrapper): full-bleed container-fluid, right-justified, Roboto 100 at 14px/21px on #005629, with 16px bare Font-Awesome-sized icons 12px apart. Measured off the homepage — keep these in step if the global nav is ever restyled. */ .aw-paid-ad__utility { background: #005629; padding: 4.8px 16px; } .aw-paid-ad__utility-inner { max-width: none; margin: 0; /* Pinned, not min-height: the label's line box otherwise pushes the bar to 42px. 27px inner + the wrapper's 4.8px block padding = the 37px the site's global nav renders at. */ height: 27px; padding: 0 12px; display: flex; align-items: center; justify-content: flex-end; gap: 0; } .aw-paid-ad__utility-label { padding-left: 24px; font-family: 'Roboto', system-ui, sans-serif; font-size: 14px; font-weight: 300; line-height: 21px; letter-spacing: normal; text-transform: uppercase; color: var(--awpa-white); } .aw-paid-ad__socials { display: flex; align-items: center; gap: 12px; } .aw-paid-ad__socials a { display: inline-flex; align-items: center; justify-content: center; color: var(--awpa-white); transition: color .18s ease; } .aw-paid-ad__socials a:hover, .aw-paid-ad__socials a:focus-visible { color: var(--awpa-sage); } .aw-paid-ad__socials--header { margin: 0; padding: 0 24px; } /* line-height:0 keeps each icon box exactly the glyph height; the inherited 24px line-height otherwise inflates the bar past the global nav's height. No svg sizing here on purpose: aw_paid_ad_social_svg() emits the width and height, and forcing a square would squash the non-square glyphs. */ .aw-paid-ad__socials--header li, .aw-paid-ad__socials--header a { line-height: 0; } .aw-paid-ad__socials--footer { justify-content: center; gap: 16px; margin-top: 8px; padding: 0; } .aw-paid-ad__socials--footer a { width: 34px; height: 34px; } .aw-paid-ad__header-inner { max-width: var(--awpa-container); margin: 0 auto; padding: 14px var(--awpa-gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; } .aw-paid-ad__header-brand { display: flex; align-items: center; gap: 26px; } .aw-paid-ad__header-logo-link { display: block; line-height: 0; } .aw-paid-ad__header-logo { display: block; } .aw-paid-ad__header-partner { display: block; line-height: 0; } .aw-paid-ad__header-partner-logo { display: block; height: 90px; width: auto; } .aw-paid-ad__header-phone { display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 13px 28px; border: 1.5px solid var(--awpa-green); border-radius: var(--awpa-radius-pill); color: var(--awpa-green); font-family: 'Roboto Condensed', system-ui, sans-serif; font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; transition: background-color .18s ease, color .18s ease; } .aw-paid-ad__header-phone:hover, .aw-paid-ad__header-phone:focus-visible { background: var(--awpa-green); color: var(--awpa-white); } .aw-paid-ad__header-phone-icon { display: inline-flex; color: var(--awpa-icon-red); transition: color .18s ease; } .aw-paid-ad__header-phone:hover .aw-paid-ad__header-phone-icon, .aw-paid-ad__header-phone:focus-visible .aw-paid-ad__header-phone-icon { color: var(--awpa-white); } /* ========================================================================= Hero + trust bar ========================================================================= */ /* The trust card is absolutely positioned out of this wrapper (below), so the wrapper's height is exactly the hero's and the next section's background starts at the hero's bottom edge with no band between them. */ .aw-paid-ad__hero-wrap { position: relative; } .aw-paid-ad__hero { position: relative; min-height: 520px; display: flex; align-items: center; background-color: var(--awpa-green-800); background-size: cover; background-position: center right; padding: 96px 0 132px; } .aw-paid-ad__hero-inner { width: 100%; max-width: var(--awpa-container); margin: 0 auto; padding: 0 var(--awpa-gutter); } /* Wide enough that the enlarged headline still breaks over two lines, as the artboard shows, rather than three. */ .aw-paid-ad__hero-copy { max-width: 780px; } .aw-paid-ad__hero-eyebrow { display: block; margin-bottom: 14px; font-family: 'Roboto Condensed', system-ui, sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, .9); } .aw-paid-ad__hero-headline { font-size: clamp(2.5rem, 5.9vw, 4.5rem); line-height: 1.04; color: var(--awpa-white); letter-spacing: 0.005em; } .aw-paid-ad__hero-subline { margin-top: 16px; max-width: 520px; font-size: 1.125rem; line-height: 1.6; color: rgba(255, 255, 255, .86); } .aw-paid-ad__hero-subline p { margin: 0; } .aw-paid-ad__hero .aw-paid-ad__cta-row { margin-top: 30px; } /* Trust card straddles the hero's lower edge. Out of flow and centred on the seam, so it adds no height of its own — the sections meet behind it. The following section carries enough top padding to clear the overhang. */ .aw-paid-ad__trust { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(50%); z-index: 5; margin: 0; padding: 0 var(--awpa-gutter); } .aw-paid-ad__trust-bar { display: flex; align-items: center; justify-content: center; gap: 44px; max-width: 772px; margin: 0 auto; padding: 24px 48px; background: var(--awpa-white); border-radius: 100px; box-shadow: var(--awpa-shadow-lg); } .aw-paid-ad__trust-divider { width: 2px; align-self: stretch; background: #000; } .aw-paid-ad__trust-item { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; } .aw-paid-ad__trust-google { color: var(--awpa-text-strong); } .aw-paid-ad__trust-stars { color: var(--awpa-gold); font-size: 1.5rem; letter-spacing: 0.14em; line-height: 1; } .aw-paid-ad__trust-google-rating { font-family: 'Roboto Condensed', system-ui, sans-serif; font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--awpa-green); /* Kept on one line: at tablet the flex row squeezed this column and broke it after "GOOGLE". */ white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; } .aw-paid-ad__trust-google-sub { font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--awpa-text-muted); } .aw-paid-ad__trust-bm { gap: 7px; } .aw-paid-ad__trust-bm-logo { display: block; height: 52px; width: auto; } .aw-paid-ad__trust-bm-text { font-family: 'Roboto Condensed', system-ui, sans-serif; font-size: 1.125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #000; text-align: center; } /* ========================================================================= Benefits — "Why Choose" ========================================================================= */ /* Clears the trust card, which now hangs ~60px past the hero's bottom edge. */ .aw-paid-ad__benefits { padding-top: 130px; } /* This one section reads better at the narrower measure than the page-wide 1272. */ .aw-paid-ad__benefits .aw-paid-ad__section-inner { max-width: var(--awpa-container-md); } /* The artboard breaks this heading after "WHY CHOOSE"; the shared 640px cap lets one more word up onto line 1. */ .aw-paid-ad__benefits .aw-paid-ad__section-heading { max-width: 560px; } /* Positioned against the section itself (see the template comment), so right:0 is genuinely flush with the viewport edge. Anchoring it inside the centred inner wrapper needs a vw-based pull, and vw counts the scrollbar, which left a ~7px gap. */ .aw-paid-ad__benefits-decor { position: absolute; top: 0; right: 0; width: 268px; max-width: 34vw; pointer-events: none; line-height: 0; } .aw-paid-ad__benefits-decor img { display: block; width: 100%; height: auto; } .aw-paid-ad__benefits-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; } /* The design centres the trailing two cards under the row of three. Cards 4 and 5 each span 1 of 3 columns but start half a column in. */ .aw-paid-ad__benefits-grid > :nth-child(4) { grid-column: 1 / 2; transform: translateX(50%); } .aw-paid-ad__benefits-grid > :nth-child(5) { grid-column: 2 / 3; transform: translateX(50%); } .aw-paid-ad__benefit-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 26px; background: var(--awpa-white); border: 1px solid var(--awpa-green); border-radius: var(--awpa-radius-md); box-shadow: var(--awpa-shadow-sm); } .aw-paid-ad__benefit-icon { display: block; color: var(--awpa-icon-red); line-height: 0; } .aw-paid-ad__benefit-heading { margin: 0; font-size: 1.1875rem; line-height: 1.25; letter-spacing: 0.04em; color: var(--awpa-green); } .aw-paid-ad__benefit-body { font-size: 1rem; line-height: 1.55; color: var(--awpa-text-body); } /* ========================================================================= Product browser ========================================================================= */ .aw-paid-ad__product-browser { margin-top: 34px; } .aw-paid-ad__product-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .aw-paid-ad__product-tab { min-height: 44px; padding: 11px 20px; background: transparent; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: var(--awpa-radius-pill); color: var(--awpa-white); font-family: 'Roboto Condensed', system-ui, sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .aw-paid-ad__product-tab:hover { border-color: var(--awpa-white); } .aw-paid-ad__product-tab.is-active { background: var(--awpa-white); border-color: var(--awpa-white); color: var(--awpa-green); } .aw-paid-ad__product-panel { margin-top: 26px; } .aw-paid-ad__product-panel[hidden] { display: none; } .aw-paid-ad__product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .aw-paid-ad__product-card { display: flex; flex-direction: column; background: var(--awpa-white); border-radius: var(--awpa-radius-md); overflow: hidden; box-shadow: var(--awpa-shadow-md); } .aw-paid-ad__product-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 4; padding: 22px; background: #e4e4e4; } .aw-paid-ad__product-thumb img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; } .aw-paid-ad__product-name { padding: 14px 16px; text-align: center; font-family: 'Roboto Condensed', system-ui, sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--awpa-green); } /* ========================================================================= Image trio ========================================================================= */ .aw-paid-ad__trio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; } .aw-paid-ad__trio-item { display: flex; } .aw-paid-ad__trio-figure { display: flex; flex-direction: column; width: 100%; margin: 0; background: var(--awpa-white); border: 1px solid var(--awpa-green); border-radius: var(--awpa-radius-md); overflow: hidden; box-shadow: var(--awpa-shadow-sm); } /* The media box is a COLUMN flex item, so with an in-flow its main-axis size resolved from the image's intrinsic height and aspect-ratio was ignored — the three boxes came out 364/241/346px instead of a uniform 205px. Taking the image out of flow (absolute) leaves the box with no content height, so aspect-ratio governs and every card matches. flex: 0 0 auto stops the column from stretching it. */ .aw-paid-ad__trio-media { position: relative; flex: 0 0 auto; aspect-ratio: 7 / 8; overflow: hidden; background: var(--awpa-sand); } .aw-paid-ad__trio-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .aw-paid-ad__trio-caption { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 16px 18px 20px; text-align: center; font-size: 1rem; line-height: 1.5; font-weight: 700; color: var(--awpa-text-strong); } /* ========================================================================= Reviews slider ========================================================================= */ .aw-paid-ad__reviews-slider { margin-top: 38px; /* Bleed toward the right edge as the design shows: start at the container inset, run to the viewport edge. Uses 100% (the section's content box), NOT 100vw — vw counts the scrollbar, which left the first slide 7px out of line with the heading above it. */ padding-left: max(var(--awpa-gutter), calc((100% - var(--awpa-container)) / 2 + var(--awpa-gutter))); overflow: hidden; } /* Looping band. aw-paid-ad.js adds .is-looping only once it has enough slides to loop cleanly, and pairs it with centeredSlides -- so the inset above is dropped and partial cards bleed past the LEFT as well as the right edge at every position, on the same centre axis as the heading and the nav buttons. Two classes, so this also beats the mobile padding-left further down without needing a second override inside that media query. A page with too few reviews to loop never gets the class and keeps the left-aligned band. */ .aw-paid-ad__reviews-slider.is-looping { padding-left: 0; } .aw-paid-ad__reviews-slider .swiper-wrapper { align-items: stretch; } .aw-paid-ad__review-slide { height: auto; display: flex; } .aw-paid-ad__review-card { display: flex; flex-direction: column; gap: 12px; width: 100%; min-height: 260px; margin: 0; padding: 20px 22px 22px; background: var(--awpa-white); border-radius: var(--awpa-radius-md); box-shadow: var(--awpa-shadow-md); } .aw-paid-ad__review-stars { color: var(--awpa-gold); font-size: 1rem; letter-spacing: 0.14em; line-height: 1; } .aw-paid-ad__review-quote { margin: 0; padding: 0; border: 0; font-size: 1rem; line-height: 1.6; color: var(--awpa-text-body); } .aw-paid-ad__review-name { margin-top: auto; padding-top: 14px; font-family: 'Roboto Condensed', system-ui, sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; color: var(--awpa-text-strong); } /* No-JS / Swiper-failed fallback: a plain scrollable row. */ .aw-paid-ad__reviews-slider.is-fallback .swiper-wrapper { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; } .aw-paid-ad__reviews-slider.is-fallback .aw-paid-ad__review-slide { flex: 0 0 clamp(240px, 78vw, 290px); scroll-snap-align: start; } .aw-paid-ad__reviews-controls { display: flex; justify-content: center; gap: 12px; margin-top: 26px; } .aw-paid-ad__slider-btn { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 50%; color: var(--awpa-white); cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease; } .aw-paid-ad__slider-btn:hover, .aw-paid-ad__slider-btn:focus-visible { background: var(--awpa-white); border-color: var(--awpa-white); color: var(--awpa-green-800); } .aw-paid-ad__slider-btn.is-disabled { opacity: .35; pointer-events: none; } /* ========================================================================= FAQ ========================================================================= */ .aw-paid-ad__faq-inner { width: 100%; max-width: var(--awpa-container-md); margin: 0 auto; padding: 0 var(--awpa-gutter); } .aw-paid-ad__faq-list { display: grid; gap: 16px; margin-top: 38px; } .aw-paid-ad__faq-item { padding: 44px; background: var(--awpa-white); border: 1px solid var(--awpa-green); border-radius: var(--awpa-radius-md); box-shadow: var(--awpa-shadow-sm); } .aw-paid-ad__faq-question { font-weight: 900; font-size: 1.2rem; line-height: 1.3; letter-spacing: 0.05em; color: var(--awpa-green); } .aw-paid-ad__faq-answer { margin-top: 8px; font-size: 1rem; line-height: 1.6; color: var(--awpa-text-body); } .aw-paid-ad__faq-answer p { margin: 0; } .aw-paid-ad__faq-answer p + p { margin-top: 8px; } /* ========================================================================= Location ========================================================================= */ .aw-paid-ad__location-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; } .aw-paid-ad__location-map { position: relative; aspect-ratio: 16 / 9; background: var(--awpa-green-800); border-radius: var(--awpa-radius-md); overflow: hidden; box-shadow: var(--awpa-shadow-md); } .aw-paid-ad__location-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .aw-paid-ad__location-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 34px 28px; background: var(--awpa-white); border-radius: var(--awpa-radius-md); box-shadow: var(--awpa-shadow-md); text-align: center; } .aw-paid-ad__location-icon { display: inline-flex; color: var(--awpa-icon-red); } .aw-paid-ad__location-label { font-family: 'Roboto Condensed', system-ui, sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--awpa-green); } .aw-paid-ad__location-value { font-size: 1.125rem; font-weight: 600; line-height: 1.55; color: var(--awpa-text-body); } .aw-paid-ad__location-value p { margin: 0; } .aw-paid-ad__location-card .aw-paid-ad__cta-row { margin-top: 20px; } /* ========================================================================= Closing CTA ========================================================================= */ .aw-paid-ad__closing { position: relative; padding: 76px 0; background-color: var(--awpa-green-900); background-size: cover; background-position: center; overflow: clip; } .aw-paid-ad__closing-stamp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .06; pointer-events: none; } .aw-paid-ad__closing-stamp img { width: 100%; height: 100%; object-fit: cover; } .aw-paid-ad__closing-inner { position: relative; max-width: var(--awpa-container); margin: 0 auto; padding: 0 var(--awpa-gutter); text-align: center; } .aw-paid-ad__closing-heading { font-size: clamp(1.75rem, 4.6vw, 3.25rem); line-height: 1.06; letter-spacing: 2px; color: var(--awpa-green-800); } @supports (-webkit-text-stroke: 1px black) { .aw-paid-ad__closing-heading { -webkit-text-stroke: 4px rgba(255, 255, 255, .9); paint-order: stroke fill; } } .aw-paid-ad__closing .aw-paid-ad__cta-row { margin-top: 30px; } /* ========================================================================= Footer ========================================================================= */ .aw-paid-ad__footer { background-color: var(--awpa-black); background-size: cover; background-position: center; color: rgba(255, 255, 255, .82); } .aw-paid-ad__footer-inner { display: grid; /* Content-sized columns centred as a pair. repeat(2, 1fr) centred each block in its own half of 1272px, which pushed them to opposite ends of the footer; the artboard keeps them together with one gutter between. */ grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 0; max-width: var(--awpa-container); margin: 0 auto; padding: 52px var(--awpa-gutter); } .aw-paid-ad__footer-brand { display: flex; justify-content: center; padding-right: 60px; } .aw-paid-ad__footer-logo { display: block; width: auto; max-height: 190px; } .aw-paid-ad__footer-contact { position: relative; text-align: center; padding-left: 60px; } .aw-paid-ad__footer-contact::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 176px; background: rgba(255, 255, 255, .32); } .aw-paid-ad__footer-phone { display: inline-block; font-family: 'Roboto Condensed', system-ui, sans-serif; font-size: 1.625rem; font-weight: 700; letter-spacing: 0.1em; color: var(--awpa-white); text-decoration: none; } .aw-paid-ad__footer-phone:hover, .aw-paid-ad__footer-phone:focus-visible { color: var(--awpa-sage); } .aw-paid-ad__footer-address { /* Capped so the address wraps after "SUITE A", as the artboard shows, instead of running out on one long line. A px value, not ch: ch ignores letter-spacing, and this text carries 0.11em of it. */ max-width: 350px; margin: 10px auto 0; font-size: 1rem; letter-spacing: 0.11em; text-transform: uppercase; line-height: 1.6; color: rgba(255, 255, 255, .74); } .aw-paid-ad__footer-content { margin-top: 12px; font-size: 1rem; line-height: 1.6; } .aw-paid-ad__footer-content a { color: var(--awpa-white); } .aw-paid-ad__footer-legal { background: var(--awpa-green); } .aw-paid-ad__footer-legal-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; max-width: var(--awpa-container); margin: 0 auto; padding: 11px var(--awpa-gutter); font-size: 1rem; color: rgba(255, 255, 255, .72); } .aw-paid-ad__footer-legal-inner a { color: rgba(255, 255, 255, .88); text-decoration: underline; text-underline-offset: 2px; } .aw-paid-ad__footer-legal-sep { opacity: .5; } /* ========================================================================= Sticky mobile CTA bar ========================================================================= */ .aw-paid-ad__sticky-bar { display: none; } .aw-paid-ad__btn--sticky { flex: 1 1 0; padding: 14px 12px; font-size: 1rem; letter-spacing: 0.06em; } /* ========================================================================= Responsive ========================================================================= */ /* The decoration stays pinned to the section's top right at every desktop width, and is hidden from 991px down (see below) rather than being nudged around to avoid the trust card. */ @media (max-width: 991.98px) { body.aw-paid-ad { --awpa-section-y: 64px; } /* Touch targets: 44px minimum, applied from tablet down. Kept out of the desktop rules so the utility bar keeps the global nav's tight sizing there, but 768px is a touch device — scoping these to phones only left tablet with 16px icon hit areas. */ .aw-paid-ad__utility-inner { height: auto; min-height: 44px; } .aw-paid-ad__socials { gap: 0; } .aw-paid-ad__socials a { width: 44px; height: 44px; } .aw-paid-ad__socials--header { padding: 0 12px; } .aw-paid-ad__socials--footer a { width: 44px; height: 44px; } .aw-paid-ad__trust-google { min-height: 44px; justify-content: center; padding: 4px 8px; } .aw-paid-ad__footer-phone { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 8px; } .aw-paid-ad__footer-legal-inner a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; } .aw-paid-ad__hero { min-height: 440px; padding: 72px 0 116px; } .aw-paid-ad__hero-copy { max-width: none; } .aw-paid-ad__benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Two-column layout makes the centring offsets wrong — reset every variant. */ .aw-paid-ad__benefits-grid > :nth-child(4), .aw-paid-ad__benefits-grid > :nth-child(5) { grid-column: auto; transform: none; } /* Both hold exactly three items, so 2-up orphaned one on its own row and made the page ~250px longer. Three fit at this width. */ .aw-paid-ad__product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .aw-paid-ad__trio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } /* Five benefit tiles in two columns leave the fifth alone on the left; centre it the way the 3+2 desktop layout does. */ .aw-paid-ad__benefits-grid > :nth-child(5) { grid-column: 1 / 2; transform: translateX(50%); } .aw-paid-ad__location-grid { grid-template-columns: minmax(0, 1fr); } /* Hidden from here down so it cannot crowd the section's content. */ .aw-paid-ad__benefits-decor { display: none; } /* 4px is proportionally heavy once the clamp()-scaled headings shrink. */ .aw-paid-ad__heading-accent, .aw-paid-ad__closing-heading { -webkit-text-stroke-width: 3px; } /* 44px eats too much of the card once the measure narrows. */ .aw-paid-ad__faq-item { padding: 32px; } /* Wrap onto as many rows as needed rather than scrolling — the row is centred, so five tabs stack tidily as the width shrinks. */ .aw-paid-ad__product-tabs { flex-wrap: wrap; justify-content: center; gap: 10px; } .aw-paid-ad__footer-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; } .aw-paid-ad__footer-brand { padding-right: 0; } .aw-paid-ad__footer-contact { padding-left: 0; } .aw-paid-ad__footer-contact::before { top: -14px; left: 50%; transform: translateX(-50%); width: 120px; height: 1px; } } @media (max-width: 767.98px) { /* NB: body padding-bottom cannot be used to clear the sticky bar — aw-custom.css ships `body { padding: 0 !important }`, which beats both a more specific rule and an inline style. The legal bar carries the space instead (below), which also means the bar sits over green rather than a blank gap. */ body.aw-paid-ad { --awpa-section-y: 52px; } .aw-paid-ad__utility-inner { justify-content: center; } .aw-paid-ad__header-inner { flex-wrap: wrap; justify-content: center; padding: 12px var(--awpa-gutter); } .aw-paid-ad__header-brand { gap: 18px; } .aw-paid-ad__header-partner-logo { height: 64px; } .aw-paid-ad__header-phone { display: none; } /* the sticky bar carries the call action */ /* Bottom padding clears the stacked trust card, which rises ~129px above the hero's edge at this width. Re-check both this and the benefits padding-top below whenever the card's type or spacing changes — they are its clearance. */ .aw-paid-ad__hero { min-height: 0; padding: 56px 0 146px; background-position: center; } .aw-paid-ad__trust-bar { flex-direction: column; gap: 14px; padding: 18px 24px; } .aw-paid-ad__trust-divider { width: 84px; height: 2px; align-self: center; } /* Card trimmed to ~230px, so ~115px hangs into this section. */ .aw-paid-ad__benefits { padding-top: 176px; } .aw-paid-ad__benefits-grid, .aw-paid-ad__product-grid, .aw-paid-ad__trio-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } /* Single column — undo every centring offset, including the tablet one. */ .aw-paid-ad__benefits-grid > :nth-child(4), .aw-paid-ad__benefits-grid > :nth-child(5) { grid-column: auto; transform: none; } /* 7/8 makes a full-width card ~389px tall, so each of the three fills most of a phone screen. A landscape crop keeps the set scannable. */ .aw-paid-ad__trio-media { aspect-ratio: 4 / 3; } /* Trim the trust card so its clearance either side shrinks with it. */ .aw-paid-ad__trust-bm-logo { height: 44px; } .aw-paid-ad__closing { padding: 56px 0; } .aw-paid-ad__faq-item { padding: 24px; } /* Scroll room so the fixed CTA bar never covers the copyright line. */ .aw-paid-ad__footer-legal { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); } /* The line wraps at this width, which left the "|" orphaned at the end of line one. Drop it and let the two parts stack. */ .aw-paid-ad__footer-legal-sep { display: none; } .aw-paid-ad__footer-legal-inner { gap: 4px 8px; } .aw-paid-ad__product-tabs { gap: 8px; } .aw-paid-ad__product-tab { padding: 10px 14px; font-size: 1rem; letter-spacing: 0.06em; } .aw-paid-ad__cta-row--light, .aw-paid-ad__cta-row--dark { margin-top: 28px; } .aw-paid-ad__btn { width: 100%; } .aw-paid-ad__hero .aw-paid-ad__cta-row .aw-paid-ad__btn { width: 100%; } .aw-paid-ad__reviews-slider { padding-left: var(--awpa-gutter); } .aw-paid-ad__footer-logo { max-height: 96px; } .aw-paid-ad__footer-phone { font-size: 1.375rem; } /* Sticky mobile CTA */ .aw-paid-ad__sticky-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--awpa-white); border-top: 1px solid var(--awpa-border); box-shadow: 0 -4px 14px rgba(32, 30, 26, .12); padding-bottom: env(safe-area-inset-bottom, 0px); } .aw-paid-ad__sticky-inner { display: flex; gap: 10px; padding: 10px 12px; } .aw-paid-ad__btn--sticky { width: auto; } } @media (prefers-reduced-motion: reduce) { body.aw-paid-ad *, body.aw-paid-ad *::before, body.aw-paid-ad *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }