/* ============================================================ REVIEWS — AFMBP-2310 (the owner's simpler design; before it: AFMBP-2250, 2265, 2267, 2269, 2283, 2284, 2285, 2299) Figma 2251:139 (desktop, 1920x277) and 2778:3435 (mobile, 402x300): "Trusted by pros across the country" over a US-map outline on the dark photo band, and one quote card at a time growing in with a small bounce, holding, and shrinking away — to the right of the title on desktop, below it on phones. Nothing moves until the section is on screen (review-carousel.js adds .reviews--on), so the first card, Gus's, is what a visitor arriving at the section sees. Everything is placed in Figma pixels: --u is one Figma pixel, set on the stage (.reviews__inner). desktop: the title + card group (1481x277, centered), --u <= 1px so it keeps 24px from the page edges (1440: 0.94); phones: the 402x300 mobile frame, --u = the screen's width / 402, at most 1.5px (tablets). AFMBP-2324 (owner): the title's type is the How It Works band title's ("More jobs. Less hassle.": the band__title classes, so it follows that title's sizes at every width), and the quotes are 18px / 1.4 like the cards' body text ("You worked your ass off all day..."). Text no longer scales with --u, so each card is at least its Figma size and grows taller when its quote needs the room; the stage grows with the tallest card. ============================================================ */ /* ===== Background, every width (AFMBP-2345, owner: "removed the background image"): no photo. styles.css fills the section with #1E1E1E and Figma's 77% black overlay takes it to #070707; the US-map outline is all that shows behind the title and the card. */ .reviews { padding: 0; } .reviews__overlay { background: rgba(0, 0, 0, 0.77); } /* ===== The stage: the Figma frame (mobile) or the title + card group (desktop) ===== It forms no stacking layer of its own (z-index auto, not styles.css's 1), so the cards can sit above the How It Works band below it: see .rq-list. Desktop: the Figma band, 277 tall, with the card list 40.5 from its top and bottom and centered between them; a card taller than Figma's makes the band taller by as much. */ .reviews__inner { --u: min(1px, calc((100cqw - 48px) / 1481)); position: relative; z-index: auto; display: flex; align-items: center; max-width: none; width: calc(1481 * var(--u)); min-height: calc(277 * var(--u)); height: auto; margin: 0 auto; padding: calc(40.5 * var(--u)) 0; } /* The US-map outline (white at 33%), cropped by the section (.reviews overflow). Desktop: centered on the band (AFMBP-2345, owner: "the outline of the united states centered"); phones: Figma's place (2778:3435). */ .rv-map { position: absolute; pointer-events: none; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(1853.97 * var(--u)); height: calc(1045.04 * var(--u)); } /* "Trusted by pros / across the country" (AFMBP-2324): the type is the How It Works band title's — the band__title / marker band__title__hl classes in index.html give it that title's sizes at every width (hiw-phone.css) and "TRUSTED" in the marker's capitals like "MORE JOBS.". This keeps the Reviews look: "Trusted" in yellow and inline, so the title stays two lines, and its place: centered over x 209 of the group and in the band's height (desktop), centered on top (phones). Line 1 keeps Figma's trailing space after "pros" (the  ). */ .reviews .rv-title { position: absolute; left: calc(209 * var(--u)); top: 50%; transform: translate(-50%, -50%); margin: 0; white-space: nowrap; text-align: center; } .reviews .rv-title .rv-title__hl { display: inline; margin: 0; color: #fcbd11; } /* ===== Quote cards (Figma Quote 1 2776:3354: 919x196, white, 12px radius) ===== One card at a time, 919 wide and at least 196 tall (taller when its quote needs it), at x 562 of the group, centered in the band: card: Quote 1 Quote 2 Quote 3 Quote 4 (animation-delay = its turn's start) turn: 0-7.96s 8.0-15.9s 15.9-23.9s 23.9-31.8s (from the section's start) In its turn a card fades in as it grows from 80% to 104% (0.075s-0.525s, eased out), settles to 100% (to 0.775s) — the owner's "20% larger, then 5% smaller" bounce around the Figma size — holds until 6.175s, and shrinks back to 80% as it fades (eased in): shown 6.7s, then 1.26s before the next one. The list sits above the How It Works band (z-index 4 over its 3, hiw-phone.css; still under the sticky header's 100): on desktop that band's 3D phone pokes up into this section, and between about 1280px and 1440px wide it would otherwise draw over the card's bottom-left corner (up to 12px at the top of the bounce). The map and the title stay under the phone, as before. */ .rq-list { position: relative; z-index: 4; margin: 0 0 0 calc(562 * var(--u)); padding: 0; list-style: none; display: grid; align-items: center; } .rq { --rq-s0: 0.8; grid-area: 1 / 1; position: relative; /* The quote is the card's one in-flow child, centered between the header (84 from the top) and 22 from the bottom like Figma's (on y 129); a longer quote makes the card taller. */ display: flex; flex-direction: column; justify-content: center; width: calc(919 * var(--u)); min-height: calc(196 * var(--u)); padding: calc(84 * var(--u)) calc(46 * var(--u)) calc(22 * var(--u)) calc(260 * var(--u)); background: #fff; border-radius: calc(12 * var(--u)); box-shadow: 0 calc(5 * var(--u)) calc(7.5 * var(--u)) rgba(0, 0, 0, 0.19); opacity: 0; transform: scale(var(--rq-s0)); animation: rq-pop 31.84444s linear infinite backwards; will-change: transform, opacity; } .rq--1 { animation-delay: 0s; } .rq--2 { animation-delay: 7.96111s; } .rq--3 { animation-delay: 15.92222s; } .rq--4 { animation-delay: 23.88333s; } @keyframes rq-pop { 0%, 0.2355% { /* 0s-0.075s: hidden */ opacity: 0; transform: scale(var(--rq-s0)); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* grows: eased out */ } 1.6486% { /* 0.525s: the top of the bounce */ opacity: 1; transform: scale(1.04348); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); /* settles: eased in and out */ } 2.4337%, 19.3911% { /* 0.775s-6.175s: the Figma size */ opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0); /* shrinks: eased in */ } 21.2753%, 100% { /* 6.775s on: hidden */ opacity: 0; transform: scale(var(--rq-s0)); } } /* Until review-carousel.js sees the section, every card waits at its first frame; without JavaScript a