/* * Component classes for the four CTA variants measured on the live site. * Loaded on every page. Tailwind utilities handle everything else; these exist * because the button variants repeat on every page and differ in ways that are * tedious to spell out in utilities each time. * * Measured values, do not "tidy" them — they are parity targets: * primary #161f40 on #06eaa9, Poppins 22px/600, ls 1px, r16, pad 14/24 * secondary #ffffff on #0063e9, Poppins 15px/700, r16, pad 10/20 * plan #ffffff on #0063e9, Poppins 16px/500, 2px border, r16, pad 8/20 * tertiary #161f40 on #f8f8f8, Poppins 22px/600, 2px #0063e9 border, r16 */ .btn { display: inline-block; font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; border-radius: 16px; border: 0 solid transparent; text-align: center; text-decoration: none; transition: filter 150ms ease, background-color 150ms ease; } .btn:hover { filter: brightness(0.95); } .btn:focus-visible { outline: 3px solid #07448c; outline-offset: 2px; } .btn-primary { color: #161f40; background-image: linear-gradient(#06eaa9 0%, #29c4a9 100%); background-color: #06eaa9; font-size: 22px; font-weight: 600; letter-spacing: 1px; padding: 14px 24px; } .btn-secondary { color: #fff; background-color: #0063e9; font-size: 15px; font-weight: 700; padding: 10px 20px; } .btn-plan { color: #fff; background-color: #0063e9; border: 2px solid #0063e9; font-size: 16px; font-weight: 500; padding: 8px 20px; } .btn-tertiary { color: #161f40; background-color: #f8f8f8; border: 2px solid #0063e9; font-size: 22px; font-weight: 600; letter-spacing: 1px; padding: 13px 16px; } @media (max-width: 768px) { .btn-primary, .btn-tertiary { font-size: 18px; padding: 12px 20px; } } /* ========================================================================== COMPONENTS Every value below is measured from the live site (see reference/computed/ and the styleguide). They are parity targets — do not "tidy" them. Only components the live site actually uses are here. Plan §9 also listed app-tabs, screenshot-carousel and stat-callout: the site contains no et_pb_tabs, et_pb_slider or number/circle counter anywhere, so they are not built. See AUDIT-NOTES.md. ========================================================================== */ /* --- layout: one content width for the whole page shell ------------------ Section rows, the header row (logo + nav) and the footer's inner container share one width, so the logo, the nav and the footer columns line up with section content at every viewport. 90% at every width, capped at 1440px -- no breakpoints, because there is nothing to vary. These are the user's widths, not a measurement: live runs 80% (84% on phones) with its header matching. Pinned by a test so a parity pass does not restore live's, and so no container can set a competing width and drift off the others again. */ .af-row, .af-header-row, .af-footer-row { width: 90%; max-width: 1440px; margin-inline: auto; } .af-row { padding-block: 28.8px; } .af-footer-row { padding-block: 56px; } } /* Grid and flex children default to min-width:auto, so a single long word can force a track wider than the viewport — which is exactly what a 54px h1 did at 360px on /real-estate-agents/. */ .af-row > *, .af-checkout-grid > *, .af-split > * { min-width: 0; } /* --- section: large rounded corner pair on the dark bands ---------------- */ .af-section { padding-block: 120px; } .af-section--hero { background-color: #07448c; color: #fff; border-radius: 0 0 48px 48px; box-shadow: rgba(0, 99, 233, 0.4) 0 12px 18px -6px; /* 262px top padding on the live page clears the fixed header. */ padding: 262px 0 120px; } .af-section--navy { background-color: #161f40; color: #fff; } /* There is no #f8f8f8 section anywhere on the live site: every content section between a hero and the contact band sets #ffffff explicitly, over a body that is itself #f8f8f8. An earlier pass left those sections transparent and alternated a grey "--alt" variant, so the body grey showed through. The sections now carry bg-white, and the only grey band is .af-section--grey (#eeeeee) -- the homepage agents band and the pricing plan grid. */ @media (max-width: 980px) { .af-section { padding-block: 72px; } .af-section--hero { padding: 160px 0 72px; border-radius: 0 0 32px 32px; } } /* --- feature-card / feature-icon-grid (et_pb_blurb, 18 uses) ------------- */ .af-card__title { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 24px; font-weight: 700; line-height: 34.8px; color: #221e1f; padding-bottom: 10px; } .af-card__body { font-family: "Nunito Sans", Helvetica, Arial, Lucida, sans-serif; font-size: 17px; font-weight: 600; line-height: 30.6px; color: #333; } /* Icons render at 28px and inherit the brand blue. */ .af-card__icon { width: 28px; height: 28px; color: #0063e9; padding-top: 4px; } .af-section--hero .af-card__title, .af-section--navy .af-card__title, .af-section--hero .af-card__body, .af-section--navy .af-card__body { color: #fff; } /* --- faq toggles --------------------------------------------------------- These are INDEPENDENT toggles, not an accordion: the live site uses et_pb_toggle with no et_pb_accordion wrapper, so more than one can be open at once. Replicated as
, which behaves the same way natively. */ .af-toggle { background-color: rgba(255, 255, 255, 0.85); border-radius: 16px; box-shadow: rgba(0, 99, 233, 0.5) 0 12px 18px -6px; padding: 18px 20px; margin-bottom: 16px; } .af-toggle > summary { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 16px; font-weight: 600; line-height: 21.6px; letter-spacing: 0.15px; color: #221e1f; padding-right: 50px; position: relative; cursor: pointer; list-style: none; } .af-toggle > summary::-webkit-details-marker { display: none; } .af-toggle > summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 10px; height: 10px; margin-top: -6px; border-right: 2px solid #0063e9; border-bottom: 2px solid #0063e9; transform: rotate(45deg); transition: transform 150ms ease; } .af-toggle[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; } .af-toggle > summary:focus-visible { outline: 3px solid #07448c; outline-offset: 3px; } .af-toggle__content { font-family: "Nunito Sans", Helvetica, Arial, Lucida, sans-serif; font-size: 16px; line-height: 27.2px; color: #333; padding-top: 12px; } /* --- pricing card (et_pb_pricing_table) ---------------------------------- Note: et_pb_best_value on the live site is NOT a "most popular" badge — it is the setup-fee line ("+ a one-time $50 setup fee"). The live site has no most-popular treatment at all. */ .af-plan { background-color: #fff; border-radius: 24px; box-shadow: rgba(0, 99, 233, 0.3) 0 12px 24px -6px; padding: 0 0 20px; overflow: hidden; display: flex; flex-direction: column; } .af-plan__head { background-color: #07448c; color: #fff; padding: 20px; text-align: center; } .af-plan__name { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 20px; font-weight: 600; color: #fff; padding-bottom: 8px; } .af-plan__price { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; } .af-plan__currency { font-size: 36px; font-weight: 400; color: #fff; vertical-align: top; } /* The number needs a line box that contains it. Without one it inherits the section's 27.2px line-height, and a 54px glyph overflowed ~25px above and ~11px below, overlapping the plan name and the setup-fee line at every viewport. Live sets 55.62px, but its own ink still overhangs by ~10px each side -- live simply has 20px of container padding there to absorb it, where our name and price sit adjacent. 76px is the glyph's actual ink height, so the box holds it and nothing collides. */ .af-plan__sum { font-size: 54px; font-weight: 600; color: #f8f8f8; line-height: 76px; } .af-plan__freq { font-size: 28px; font-weight: 400; color: #fff; } .af-plan__setup { font-family: "Nunito Sans", Helvetica, Arial, Lucida, sans-serif; font-size: 18px; font-weight: 600; color: #fff; text-align: center; } .af-plan__features { list-style: none; margin: 0; padding: 20px; flex: 1 1 auto; } .af-plan__features li { font-family: "Nunito Sans", Helvetica, Arial, Lucida, sans-serif; font-size: 16px; font-weight: 600; line-height: 27.2px; color: #333; padding-bottom: 16px; } .af-plan__cta { padding-inline: 20px; } /* --- logo row (static; the live site has no marquee animation) ----------- */ .af-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px 48px; } .af-logos img { height: 34px; width: auto; } .af-logos__eyebrow { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-align: center; color: #221e1f; } /* --- form controls (measured from #smart-mls-selection-form) ------------- */ .af-field { display: block; width: 100%; font-size: 1rem; padding: 0.8rem; border-radius: 5px; border: 1px solid #d4d4d4; background: #fff; color: #333; } .af-field:focus-visible { outline: 3px solid #07448c; outline-offset: 1px; } .af-label { display: block; font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-weight: 600; color: #221e1f; margin-bottom: 6px; } .af-form__status { border-radius: 16px; padding: 14px 18px; font-weight: 600; } .af-form__status--ok { background: rgba(6, 234, 169, 0.15); color: #161f40; } .af-form__status--err { background: rgba(220, 34, 9, 0.10); color: #8a1606; } /* --- pricing grid -------------------------------------------------------- Plan §5's grid: auto-fit with a clamped track so the card count drives the layout instead of hard-coded breakpoints. Measured live card width is 284px at a 1440px viewport, which the clamp brackets. Container queries are on the CARD, so its internal type and padding respond to how wide the card actually is, not to the viewport — the detail that matters as plan counts grow. */ /* 330px is the floor for a card: below it the feature lines wrap badly. The track is minmax(330px, 1fr), so cards stretch to fill the row rather than sitting at a fixed width with dead space either side. */ .af-plans { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: stretch; } /* 1-2 cards stay capped: stretched across a 1296px row a pair would be 636px each, which is not a pricing card any more. */ .af-plans[data-count="1"] { max-width: 420px; margin-inline: auto; } .af-plans[data-count="2"] { max-width: 688px; margin-inline: auto; } /* 3 and up span the full row. At 1440 that is 416px a card (was 331px in a 1040px cap, leaving 128px unused each side). */ /* 4 cards go 2x2, full stop. §5 allows "4 up, or 2x2 if cards narrow", and 4-up needs 4x330 + 3x24 = 1392px of grid -- which no container here ever reaches: the pricing row caps at 1440 (so 4-up would land exactly on the 330 floor) and the styleguide's is 1340, where 4-up measured 307px. Any viewport-based breakpoint is the wrong instrument, because what decides this is the container's width, not the window's; a media query pinned at 1200px produced 306px cards and at 1547px still produced 307px in the styleguide. 2x2 at the 688px cap is 332px a card and has no orphan row. */ .af-plans[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 688px; margin-inline: auto; } /* 5-6 cannot share a row at this floor: 5 needs 1746px of grid and 6 needs 2100px, against 1440px available at best. They wrap to 3+2 / 3+3, which is the orphan-row risk flagged in AUDIT-NOTES -- a one-row scroller or a comparison table is the real answer at those counts, not a grid tweak. */ /* 7-8: 2-up for the same reason as 4, giving 2x4 rather than an orphan row. §5 wants a comparison table at 7+, which is not built — the live site has no such source. */ .af-plans[data-count="7"], .af-plans[data-count="8"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 688px; margin-inline: auto; } /* Mobile: always stacked. The [data-count] selector is repeated here because the count-specific rules above have the same specificity as a bare `.af-plans`, so a plain `.af-plans` reset loses and 4 plans rendered as a 2x2 of 153px-wide cards. Caught by the plan-count acceptance test. */ @media (max-width: 560px) { .af-plans, .af-plans[data-count] { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } } /* Equal-height feature lists so the CTAs align across cards. Subgrid where supported; the flex column in .af-plan is the fallback. */ @supports (grid-template-rows: subgrid) { .af-plans { grid-template-rows: auto; } .af-plan { display: grid; grid-template-rows: auto 1fr auto; } } .af-plan { container-type: inline-size; container-name: plan; } @container plan (max-width: 300px) { .af-plan__name { font-size: 18px; } .af-plan__sum { font-size: 44px; } .af-plan__freq { font-size: 22px; } .af-plan__currency { font-size: 28px; } .af-plan__setup { font-size: 16px; } .af-plan__features { padding: 16px; } .af-plan__features li { font-size: 15px; } } @container plan (min-width: 380px) { .af-plan__features { padding: 24px; } } /* --- tabs (dipi_advanced_tabs on the live site) -------------------------- The live module is a third-party Divi Plus tab set with no ARIA roles and no keyboard support. Rebuilt as a proper tablist per plan §9: roles, arrow keys, Home/End, and roving tabindex. */ .af-tabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .af-tab { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 16px; font-weight: 600; color: #0063e9; background: transparent; border: 2px solid transparent; border-radius: 16px; padding: 10px 22px; cursor: pointer; } .af-tab[aria-selected="true"] { background: #0063e9; color: #fff; } .af-tab:focus-visible { outline: 3px solid #07448c; outline-offset: 2px; } .af-tabs__panel[hidden] { display: none !important; } /* Both toggles fit on one row on a phone once the label scales with the viewport: at 16px they need 361px against the 315px row at 375px wide, so they wrapped. The clamp keeps them on one line down to the narrowest phones and returns to 16px as soon as there is room. */ @media (max-width: 767px) { .af-tabs__list { flex-wrap: nowrap; } .af-tab { padding: 10px 14px; font-size: clamp(12px, 3.6vw, 16px); white-space: nowrap; } } /* The contact form's tabs are a full-width segmented strip sitting on the white panel, not centred pills: live splits the row into two halves (554px each at 1440), whites out the selected half so it merges with the panel below it, and greys the other to #eeeeee. 16px/600 #333, left aligned with a 25px inset, 57px tall. The pricing grid keeps the pill style. */ /* Live's form block is 1148px at 1440 with the tab strip inset 20px inside it, which is what puts the seam between the two tabs dead centre. */ .af-row--contact { max-width: 1148px; } .af-tabs--strip .af-tabs__list { flex-wrap: nowrap; justify-content: stretch; gap: 0; padding-inline: 20px; } .af-tabs--strip .af-tab { flex: 1 1 0; min-width: 0; text-align: left; background: #eeeeee; color: #333; border: 0; border-radius: 0; padding: 15px 25px; line-height: 27px; } .af-tabs--strip .af-tab[aria-selected="true"] { background: #fff; color: #333; } .af-tabs--strip .af-tabs__panel { background: #fff; padding: 10px; } /* Live's contact inputs are taller and rounder than the base field: 50px with a 16px radius and a 2px #d4d4d4 border. Scoped to the contact form so the login and MLS controls keep their own measured sizing. */ [data-contact-form] .af-field { padding: 12px 16px; border-radius: 16px; border-width: 2px; font-weight: 600; color: #4e4e4e; } [data-contact-form] textarea.af-field { font-weight: 400; } .af-form__req { font-size: 16px; color: #333; } /* ========================================================================== DIVI PLUS MODULES (dipi_*) The live site uses the Divi Plus module library alongside Divi core. These are the rebuilds. Measured values as always. NOT rebuilt — dipi_btt_wrapper: present on all 19 pages but renders NOTHING. Zero children before and after scrolling, position: static. It is an empty wrapper, so there is no back-to-top button on the live site to replicate. ========================================================================== */ /* --- typing headline (dipi_typing_text, homepage hero) ------------------- */ .af-typing { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 17px; font-weight: 600; color: #fff; } .af-typing__cursor { font-weight: 400; } .af-typing__cursor--blink { animation: af-blink 1s step-end infinite; } @keyframes af-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { /* Plan §9: respect reduced motion. The full string is rendered, unanimated. */ .af-typing__cursor--blink { animation: none; } } /* --- logo strip (dipi_tile_scroll) --------------------------------------- Static, despite the module's name and its move_amount config: the transform stays at translate(-1460px, 0) across the entire scroll range. The live markup carries 20 tiles of 180x160 in a 1440x160 overflow-hidden window, so only 8 are ever visible, plus 9 further logos that are hidden at 0px. Rebuilt as just the 8 visible logos — same visual result, without shipping 21 images that never render. */ .af-logostrip { overflow: hidden; } .af-logostrip__row { display: flex; align-items: center; justify-content: center; gap: 40px; height: 160px; } .af-logostrip__row img { width: 180px; height: 160px; object-fit: contain; flex: 0 0 auto; } @media (max-width: 980px) { .af-logostrip__row { flex-wrap: wrap; height: auto; gap: 24px 32px; padding-block: 24px; } .af-logostrip__row img { width: 130px; height: 90px; } } /* --- button grid (dipi_button_grid) ------------------------------------- */ .af-buttongrid { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } /* --- floating image group (dipi_floating_multi_images) ------------------- */ .af-floating { position: relative; } .af-floating__img { border-radius: 16px; box-shadow: rgba(0, 99, 233, 0.3) 0 12px 24px -6px; display: block; max-width: 100%; } .af-floating > :nth-child(2) { position: relative; z-index: 2; margin-top: -12%; margin-left: 18%; } .af-floating > :nth-child(3) { position: relative; z-index: 3; margin-top: -12%; margin-left: 4%; } @media (max-width: 760px) { /* Stack cleanly rather than overlapping in a narrow column. */ .af-floating > :nth-child(2), .af-floating > :nth-child(3) { margin: 16px 0 0; } } /* --- expanding CTA band (dipi_expanding_cta, /pricing/) ----------------- */ .af-ctaband { position: relative; min-height: 220px; display: grid; place-items: center; background-color: #0063e9; border-radius: 24px; overflow: hidden; text-align: center; } .af-ctaband__link { display: block; padding: 40px 24px; text-decoration: none; } .af-ctaband__heading { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 80px; font-weight: 600; line-height: 1.12; letter-spacing: 0.25px; color: #fff; padding-bottom: 10px; } @media (max-width: 980px) { .af-ctaband__heading { font-size: 44px; } } @media (max-width: 560px) { .af-ctaband__heading { font-size: 32px; } } /* --- before/after slider (dipi_before_after_slider) --------------------- Live overlays "Before" and "After" pills on the two halves; removed at the user's direction, so the images speak for themselves. The range input keeps its aria-label and aria-valuetext, which is what a screen reader was actually announcing -- the pills were decorative. */ .af-ba { position: relative; height: 394px; border-radius: 16px; overflow: hidden; } .af-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .af-ba__after { clip-path: inset(0 0 0 var(--af-ba-pos, 50%)); } .af-ba__divider { position: absolute; top: 0; bottom: 0; left: var(--af-ba-pos, 50%); width: 2px; background: #fff; pointer-events: none; } .af-ba__handle { position: absolute; top: 50%; left: var(--af-ba-pos, 50%); width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 1000px; background: #0063e9; color: #fff; display: grid; place-items: center; pointer-events: none; } /* The real control: a range input, so the slider is keyboard-operable. The live module is mouse/touch only. */ .af-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; } .af-ba__range:focus-visible ~ .af-ba__handle { outline: 3px solid #fff; outline-offset: 2px; } @media (max-width: 760px) { .af-ba { height: 260px; } } /* --- text divider (dipi_divider, /login/) ------------------------------- */ .af-divider { display: flex; align-items: center; gap: 0; } .af-divider__line { flex: 1 1 auto; height: 1px; background: #d4d4d4; } .af-divider__label { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 20px; font-weight: 600; color: #221e1f; padding: 10px; margin: 0; } /* --- breadcrumbs (dipi_breadcrumbs, the four checkout pages) ------------ */ .af-crumbs { display: flex; justify-content: flex-end; } /* The checkout hero stacks and centres, so its breadcrumb centres with it rather than hugging the right edge of a two-column row that no longer exists. */ .af-checkout-hero .af-crumbs { justify-content: center; } .af-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .af-crumbs a, .af-crumbs__current { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 16px; font-weight: 600; color: #fff; text-decoration: none; display: inline-flex; align-items: center; height: 44px; } .af-crumbs a:hover { text-decoration: underline; } .af-crumbs__current { background: rgba(0, 99, 233, 0.5); border-radius: 24px; padding: 8px 16px; } /* The live separator is an ETmodules icon glyph; that font is not loaded here, so an inline chevron stands in at the same 24px. */ .af-crumbs__sep { color: #fff; display: inline-flex; align-items: center; } /* --- carousel (dipi_carousel) ------------------------------------------- Config from the live module: 1 column at every breakpoint, 30px gap, 500ms transition, arrows on, pagination off, autoplay OFF and loop OFF. */ .af-carousel { position: relative; } .af-carousel__viewport { overflow: hidden; } .af-carousel__track { display: flex; gap: 30px; transition: transform 500ms ease; } @media (prefers-reduced-motion: reduce) { .af-carousel__track { transition: none; } } .af-carousel__slide { flex: 0 0 100%; } .af-carousel__title { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 24px; font-weight: 700; line-height: 34.8px; color: #221e1f; } .af-carousel__desc { font-family: "Nunito Sans", Helvetica, Arial, Lucida, sans-serif; font-size: 16px; font-weight: 600; color: #333; } .af-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; background: #0063e9; color: #fff; display: grid; place-items: center; cursor: pointer; } .af-carousel__nav:disabled { opacity: 0.35; cursor: default; } .af-carousel__nav:focus-visible { outline: 3px solid #07448c; outline-offset: 2px; } .af-carousel__nav--prev { left: -24px; } .af-carousel__nav--next { right: -24px; } @media (max-width: 980px) { .af-carousel__nav--prev { left: 4px; } .af-carousel__nav--next { right: 4px; } } /* --- pricing card: feature icons and the Enterprise variant -------------- Measured: features carry a 24px check (brand blue on the standard cards, white on the gradient Enterprise card); the lead-capacity caveat line uses emergency.svg at 14px instead. */ .af-plan__features li { display: flex; align-items: flex-start; gap: 10px; } .af-plan__icon { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 2px; } .af-plan__icon--caveat { width: 14px; height: 14px; margin-top: 7px; } .af-plan__annual { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 15px; font-weight: 600; color: #07448c; padding: 0 20px 16px; } /* The two "Custom plans" cards: full-card gradient, white copy, and the head carries no separate background. */ .af-plan--enterprise { background-color: transparent; background-image: linear-gradient(#07448c 0%, #0063e9 68%, #06eaa9 100%); } .af-plan--enterprise .af-plan__head { background: transparent; } .af-plan--enterprise .af-plan__features li { color: #fff; } .af-plan--enterprise .af-plan__annual { color: #fff; } .af-plan--enterprise .btn-plan { border-color: #fff; } /* --- pricing hero ------------------------------------------------------- Measured: gradient over the hatch-lines pattern, 262px top padding to clear the fixed header, 280px bottom, centered white copy. */ /* --- testimonial quote card --------------------------------------------- */ .af-quote { background: #fff; border-radius: 16px; box-shadow: rgba(0, 99, 233, 0.3) 0 12px 24px -6px; padding: 28px; margin: 0; display: flex; flex-direction: column; gap: 20px; } .af-quote__text { font-family: "Nunito Sans", Helvetica, Arial, Lucida, sans-serif; font-size: 16px; font-weight: 600; line-height: 27.2px; color: #333; margin: 0; flex: 1 1 auto; } .af-quote__meta { display: flex; align-items: center; gap: 14px; } /* object-position: top so a cover-cropped portrait keeps the face rather than centring on the torso. */ .af-quote__meta img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; flex: 0 0 auto; } .af-quote__author { display: block; font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 18px; font-weight: 700; color: #221e1f; } .af-quote__role { font-family: "Nunito Sans", Helvetica, Arial, Lucida, sans-serif; font-size: 15px; color: #595657; } /* --- hero video --------------------------------------------------------- The source MP4 is 271 MB on app.afordal.com, and that host is firewalled to US/CA. `preload="none"` on the element keeps it from being fetched until a visitor actually presses play. See AUDIT-NOTES.md. */ /* Live's Divi video module: 16:9, 20px radius, brand shadow, centred 80px play button that darkens the card on hover. */ .af-video { position: relative; line-height: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 18px -6px rgba(7, 68, 140, 0.5); } .af-video__el { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #1c1f3f; display: block; } .af-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 18%; border: 0; background: transparent; cursor: pointer; transition: background-color 0.3s; } .af-video__play:hover { background-color: rgba(0, 0, 0, 0.6); } .af-video__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; } .af-video__play svg { border-radius: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); } .af-video__play[hidden] { display: none; } @media (max-width: 480px) { .af-video__play svg { width: 56px; height: 56px; } } /* --- sub-page hero (faqs, newsroom, contact-us) ------------------------- Same gradient treatment as /pricing/ but shorter, since these pages carry a heading and at most one line of copy. */ /* Measured on live's /faqs/ and /contact-us/, which are identical. Live pads 262/200 at 1440 but also pulls the section up with margin-top: -80px, so the content lands 182px below the viewport top; the padding here is that effective figure, as on .af-hero-page. The top is fluid on live (219px at 981, 262px at 1440, an effective 198 -> 182 drift), so this takes the 1440 reference value. The bottom padding was the real error: 200px, not 120px. Phones drop the top to 117 and raise the bottom to 240. */ .af-hero-sub { padding: 182px 0 200px; background-image: linear-gradient(rgba(7, 68, 140, 0.95) 25%, rgba(0, 99, 233, 0.9) 64%, rgba(0, 214, 255, 0.85) 99%), url("../assets/images/Afordal-Background-Pattern-Hatch_Lines-Light.svg"); background-size: cover, cover; background-position: center, center; color: #fff; } @media (max-width: 980px) { .af-hero-sub { padding: 197px 0 240px; } } @media (max-width: 767px) { .af-hero-sub { padding: 117px 0 240px; } } /* /reach-out/ and /checkout-success/ share this hero but hold the 197px top on phones too -- live gives them no negative pull, so their content does not ride up. Without this they would regress by 80px on a phone. */ @media (max-width: 767px) { .af-hero-sub--tall { padding-top: 197px; } } /* --- page hero (Newsroom, Pricing, Contact Us) -------------------------- Live gives the newsroom hero a 130deg gradient running to mint, where the other sub-page heroes get a vertical one over the light hatch. Asked to put that treatment on Pricing and Contact Us too, so it is one shared class rather than three copies -- which also makes the three heroes the same height, the other thing asked for. Live's own photo layer here (Afordal-Agentf_Showing_Home_To_Couple-v6.png) 404s from the live site, and the gradient over it is 88-93% opaque, so the live page renders as the gradient alone -- reproduced rather than substituting a different photo. */ /* Live pads 262/80 but also pulls the section up with margin-top: -80px, so the content actually lands 182px below the viewport top (197px below 981px, where its header sits in flow). Our header is fixed at every width, so the effective figures go straight into the padding instead of reproducing the negative-margin trick -- same result, one fewer moving part. */ .af-hero-page { padding: 182px 0 80px; background-color: #0063e9; background-image: linear-gradient(130deg, rgba(7, 68, 140, 0.93) 6%, rgba(0, 99, 233, 0.92) 48%, rgba(0, 214, 255, 0.88) 87%, #06eaa9 100%); background-size: cover; background-position: center top; background-repeat: no-repeat; color: #fff; } @media (max-width: 980px) { .af-hero-page { padding: 197px 0 80px; } } /* Phones take 20% off the top and a third off the bottom (197/80 -> 158/54). Asked for on /newsroom/, /pricing/ and /contact-us/ only, so it is applied per hero class rather than to the shared sub-page hero. */ @media (max-width: 767px) { .af-hero-page { padding: 158px 0 54px; } } /* Live's newsroom h1 is 600 on a 1.3 line-height with 10px under it, and the standfirst is 18px/600 at 1.8 -- looser and lighter than the shared h1/lead tokens, so they are set here rather than moved for every page. */ .af-hero-page h1 { font-weight: 600; line-height: 1.3; padding-bottom: 10px; } .af-hero-page p { font-size: 18px; font-weight: 600; line-height: 1.8; } /* --- newsroom press list ----------------------------------------------- One centred column, not a grid: live caps the row at 980px and stacks all 16 releases full width, each an arrow + title + source card. The 980px cap is the only change from a normal row, so the 80%/84% widths below 981px still apply and match live at every viewport. */ .af-row--narrow { max-width: 980px; } .af-press-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; } .af-press__link { display: flex; align-items: flex-start; gap: 15px; background: #fff; /* Written out rather than width + colour alone: a border only paints with a style, and the only reason the two-property form works here is Tailwind's preflight setting `border-style: solid` globally. */ border: 2px solid #eeeeee; border-radius: 24px; box-shadow: rgba(0, 99, 233, 0.3) 0 12px 18px -6px; padding: 24px; text-decoration: none; transition: transform 150ms ease; } .af-press__link:hover { transform: translateX(8px) translateY(-8px) !important; } /* The 32px icon column leaves the headline only ~207px at a 360px viewport, so on phones the arrow sits above the headline instead of beside it. */ @media (max-width: 479px) { .af-press__link { flex-direction: column; } } .af-press__link:focus-visible { outline: 3px solid #07448c; outline-offset: 3px; } /* Live sets this with a FontAwesome arrow-right glyph (\f061) in a 32px box; an inline SVG gets the same 21x24 mark without the font. */ .af-press__icon { flex: none; width: 32px; height: 24px; color: #0063e9; } .af-press__title { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 20px; font-weight: 600; line-height: 27px; color: #221e1f; margin: 0; padding-bottom: 10px; } .af-press__source { font-family: "Nunito Sans", Helvetica, Arial, Lucida, sans-serif; font-size: 16px; font-weight: 300; font-style: italic; line-height: 27.2px; color: #595657; margin: 0; } /* Visually hidden but available to assistive tech. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- MLS selector ------------------------------------------------------- Form control sizing measured from the live #smart-mls-selection-form: 18px text, 16px/20px padding, 16px radius, full width. */ .af-mls select.af-field { font-size: 18px; padding: 16px 20px; border-radius: 16px; } .af-mls-gate { background: #f8f8f8; border: 2px solid #0063e9; border-radius: 24px; padding: 32px; } .af-fees { border-radius: 16px; background: rgba(0, 99, 233, 0.06); padding: 16px 18px; } .af-fees__line { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 16px; font-weight: 600; color: #07448c; } .af-fees__line + .af-fees__line, .af-fees__line + .af-fees__disclaimer, .af-fees__disclaimer + .af-fees__disclaimer { margin-top: 8px; } /* A plan that costs more in this MLS than the page advertises. Stated in the fee block, in body colour rather than the muted disclaimer grey, because it explains the price rather than qualifying it. */ /* Billing-period choice, shown only where an MLS carries both rows. A pair of radios rather than a tablist: this changes what the card is charged, so it is a form control, and it submits nothing of its own. */ .af-period { border: 0; padding: 0; margin: 20px 0 0; } .af-period__opts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .af-period__opt { flex: 1 1 180px; display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; border: 2px solid #eeeeee; border-radius: 12px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; } .af-period__opt:hover { border-color: #0063e9; } .af-period__opt:has(input:checked) { border-color: #0063e9; background: rgba(0, 99, 233, .06); } .af-period__opt:has(input:focus-visible) { outline: 2px solid #0063e9; outline-offset: 2px; } /* An option this MLS has no enabled row for: visible, so the visitor knows the plan is sold that way, but plainly not selectable. */ .af-period__opt--off { border-color: #eeeeee; background: #fafafa; cursor: default; opacity: .6; } .af-period__opt--off:hover { border-color: #eeeeee; } .af-period__name { font-weight: 700; color: #1f2d3d; } .af-period__detail { font-size: 14px; color: #5b6b7c; } @media (max-width: 479px) { .af-period__opt { flex: 1 1 100%; } } /* The monthly equivalent of an annual charge, under the price it explains. */ .af-checkout-equiv { font-family: "Nunito Sans", Helvetica, Arial, Lucida, sans-serif; font-size: 14px; color: #5b6b7c; margin-top: 2px; } .af-fees__special { font-weight: 600; color: #0063e9; margin-bottom: 8px; } .af-fees__disclaimer { font-family: "Nunito Sans", Helvetica, Arial, Lucida, sans-serif; font-size: 14px; line-height: 1.5; color: #595657; } /* --- checkout pages ----------------------------------------------------- Measured: hero gradient at 130deg over the hatch pattern with overlay blending, 64px/32px padding; body #EEEEEE, min-height 100vh, 64px top and 164px bottom; the billing card is white with a 40px radius and 40px pad. */ /* 102px of that top padding is the fixed header's height, leaving the 64px of breathing room the hero had back when these pages carried no nav at all. The header shrinks to 78px below 1024px, so the padding follows it. */ .af-checkout-hero { padding: 166px 0 32px; background-image: url("../assets/images/Afordal-Background-Pattern-Hatch_Lines-Light.svg"), linear-gradient(130deg, #07448c 5%, #0063e9 55%, #00d6ff 100%); background-blend-mode: overlay; background-position: center top; background-size: cover, cover; color: #fff; } @media (max-width: 1023px) { .af-checkout-hero { padding-top: 142px; } } .af-checkout-body { background-color: #eeeeee; min-height: 100vh; padding: 64px 0 164px; box-shadow: inset 0 0 18px 0 rgba(0, 99, 233, 0.4); } .af-checkout-card { background: #fff; border-radius: 40px; padding: 40px; box-shadow: 0 12px 18px -6px rgba(0, 99, 233, 0.25); } @media (max-width: 760px) { .af-checkout-card { padding: 24px; border-radius: 24px; } } .af-checkout-plan { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 24px; font-weight: 600; color: #07448c; } .af-checkout-fee { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 18px; font-weight: 600; color: #595657; } .af-checkout-body .af-field { font-size: 18px; padding: 16px 20px; border-radius: 16px; } .af-checkout-body [data-checkout-submit] { font-size: 20px; font-weight: 700; padding: 16px; } .af-checkout-body [data-checkout-submit]:disabled { background-color: #d4d4d4; border-color: #d4d4d4; cursor: not-allowed; } .af-checkout-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; } .af-checkout-badges img { height: 32px; width: auto; } .af-checkout-badges__stripe { height: 48px !important; } /* --- back-to-top (site-wide) ------------------------------------------- Measured from the live control: 52x52, fixed 20px from each edge, z-index 99999, revealed on scroll. */ .af-btt { position: fixed; bottom: 20px; right: 20px; z-index: 99999; width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(7, 68, 140, 0.85); color: #fff; cursor: pointer; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.4); } .af-btt:hover { background: #07448c; } .af-btt:focus-visible { outline: 3px solid #06eaa9; outline-offset: 2px; } /* --- checkout: 3/5 + 2/5 row, matching the live column split ------------ */ .af-checkout-grid { display: grid; gap: 40px; grid-template-columns: 1fr; } @media (min-width: 981px) { .af-checkout-grid { grid-template-columns: 3fr 2fr; align-items: start; } } .af-checkout-total { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 24px; font-weight: 600; color: #221e1f; margin-top: 28px; } .af-checkout-total strong { font-size: 28px; margin-left: 8px; } /* The live button is 20px/700 white on #0063E9, 2px border, 16px radius, 56px tall, with a padlock before the label. */ .af-checkout-btn { display: inline-flex; align-items: center; gap: 10px; font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 0.25px; color: #fff; background-color: #0063e9; border: 2px solid #0063e9; border-radius: 16px; padding: 8px 20px; min-height: 56px; cursor: pointer; } .af-checkout-btn:hover { filter: brightness(0.95); } .af-checkout-btn:focus-visible { outline: 3px solid #07448c; outline-offset: 2px; } .af-checkout-btn:disabled { background-color: #d4d4d4; border-color: #d4d4d4; cursor: not-allowed; } .af-checkout-btn__lock { flex: 0 0 auto; } .af-checkout-tos { font-family: "Nunito Sans", Helvetica, Arial, Lucida, sans-serif; font-size: 13px; line-height: 1.6; color: #333; margin-top: 20px; } .af-checkout-tos a { color: #0063e9; text-decoration: underline; } .af-checkout-seal { display: block; height: 48px; width: auto; margin-top: 20px; } /* --- checkout help card ------------------------------------------------- */ .af-help { background-color: #f8f8f8; border-radius: 24px; padding: 24px 16px; box-shadow: 0 12px 18px -6px rgba(0, 99, 233, 0.25); text-align: center; } /* Follow the form down the page. The billing card is much taller than this one, so without it the contact details scroll away exactly when someone filling the form might want them. Sticky only where the two columns exist — stacked on mobile it would just cover content. The grid sets `align-items: start`, which sticky needs in a grid item. `top` clears the fixed header. */ @media (min-width: 981px) { .af-help { position: sticky; top: 92px; /* If the viewport is ever shorter than the card, let the card itself scroll rather than clipping its lower contact route. */ max-height: calc(100vh - 112px); overflow-y: auto; } } .af-help__icon { display: block; color: #bababa; margin: 0 auto 12px; width: 48px; } .af-help__title { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 18px; font-weight: 600; color: #221e1f; } .af-help__label { font-family: "Nunito Sans", Helvetica, Arial, Lucida, sans-serif; font-size: 16px; color: #333; margin-top: 18px; } .af-help__link { font-family: Poppins, Helvetica, Arial, Lucida, sans-serif; font-size: 20px; font-weight: 600; color: #0063e9; text-decoration: none; } .af-help__link:hover { text-decoration: underline; } .af-help__or { font-size: 14px; color: #595657; margin: 2px 0; } .af-help__rule { border: 0; border-top: 1px solid #d4d4d4; margin: 22px 8px; } /* --- /reach-out/ contact pair -------------------------------------------- */ .af-reachout-contacts { display: grid; gap: 24px; margin-top: 40px; background: rgba(255, 255, 255, 0.12); border-radius: 24px; padding: 28px 24px; } @media (min-width: 620px) { .af-reachout-contacts { grid-template-columns: 1fr 1fr; } } .af-reachout-contacts .af-help__label { color: #fff; margin-top: 0; } .af-reachout-contacts .af-help__link { color: #fff; text-decoration: underline; } /* --- header ------------------------------------------------------------ Measured live at a 1440px viewport. The header overlays the page rather than pushing it down. Live fills it 90% white so the hero tints it lavender; kept solid #ffffff here at the user's direction. Divi swaps it to a shadowed, shorter bar once you scroll (`.et-fixed-header`, mirrored here as `.is-stuck`). The logo is capped at `max-height: 32%` of the header, which is why it shrinks with it: 33px at rest, 25px stuck. */ .af-header { background: #ffffff; box-shadow: none; transition: box-shadow .3s ease; } .af-header.is-stuck { box-shadow: 0 8px 12px rgba(0, 99, 233, .15); } .af-header-row { min-height: 102px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: min-height .3s ease; } .af-header.is-stuck .af-header-row { min-height: 78px; } @media (max-width: 1023px) { .af-header-row { min-height: 78px; } /* The