/* ============ V4 — multi-specialist audit implementation (2026-07-27) ============ Everything here is scoped to .ampd-page--v4 (or to the V4 pages' own classes) so Design 3 and its product pages are untouched. Findings and reconciliation: research/design-audit-2026-07-27.md. Reference tags (C5, C6…) match that file. Loaded after variant-v3.css / product-page.css and before themes.css. */ /* ---------- C5 · Token contrast (measured AA failures) ---------- --text-muted was #8A8A92 = 3.43:1 on white and 2.91:1 on the powder tint; --text-strike was #A0A0A8 = 2.60:1 on white. Both carry real content — every struck anchor price is set in --text-strike, which made the entire price- anchoring mechanism the least legible text on the page. #6E6E76 is already --text-body, so no new grey enters the system. Set on the page wrapper so the custom properties inherit without touching tokens.css. */ .ampd-page--v4 { --text-muted: #6E6E76; /* 5.05:1 on white, 4.76:1 on the footer grey */ --text-strike: #767680; /* 4.52:1 on white */ --ampd-muted: #6E6E76; } /* ---------- C6 · Focus ring ---------- The pinned-to-AMPD-Blue principle was right and deliberately documented, but #00A8E9 measures 2.70:1 on white against a 3:1 requirement — and it is the only focus affordance on the site. Two-tone keeps the blue identity while the dark core carries the contrast (19.65:1). */ .ampd-page--v4 :focus-visible, .v4-skip:focus-visible { outline: 2px solid var(--ampd-black); outline-offset: 2px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-ampd-blue) 55%, transparent); } /* Skip link — no
landmark or bypass existed on any page. */ .v4-skip { position: absolute; left: 8px; top: -60px; z-index: 999; padding: 10px 16px; border-radius: 0 0 12px 12px; background: var(--ampd-black); color: var(--ampd-white); font-family: var(--font-display); font-size: 13px; font-weight: 700; transition: top var(--duration-fast) var(--ease-out); } .v4-skip:focus { top: 0; } /* ---------- C7 · Unselected state contrast ---------- Resting radio borders measured 1.22–1.39:1 and resting plan borders 1.43–1.57:1. Which option is selected was visible; that a choice existed was not. Selected states are already 19:1+, so the delta survives. */ .ampd-page--v4 .ampd-plan2__radio { border-color: #8A8A92; } .ampd-page--v4 .pdp-flav__radio { border-color: #8A8A92; } .ampd-page--v4 .ampd-plan2:not([aria-checked="true"]) { border-color: color-mix(in srgb, var(--flav-accent) 34%, #8A8A92); } .ampd-page--v4 .pdp-flav:not([aria-checked="true"]) { border-color: color-mix(in srgb, var(--flav-accent) 34%, #8A8A92); } .ampd-page--v4 .ampd-dot { background: #9A9AA2; } .ampd-page--v4 .ampd-dot[aria-current="true"] { background: var(--ampd-ink); } /* On-image gallery dots keep the translucent-white treatment — they sit on photography, not on white, and were already legible there. */ .ampd-page--v4 .ampd-gallery-dots .ampd-dot { background: rgba(255,255,255,0.72); } .ampd-page--v4 .ampd-gallery-dots .ampd-dot[aria-current="true"] { background: var(--ampd-white); } /* ---------- C8 · Trust elements below AA on the active scheme ---------- "30% OFF" in the promo bar was the raw accent on near-black: AMPD Purple measured 3.07:1. A 60% tint of the same accent is the official ramp and clears 8:1. The "Verified" review pill was --success on a 12% tint of itself = 2.54:1 at 9px; the 55%-toward-black mix is already proven elsewhere. */ .ampd-page--v4 .ampd-promo__accent { color: color-mix(in srgb, var(--accent-primary) 60%, white); } .ampd-page--v4 .ampd-review-card__verified { color: color-mix(in srgb, var(--success) 55%, black); font-size: 10.5px; } /* Body copy on the tinted Why Powder band measured 4.30:1 on ampd. */ .ampd-page--v4 .ampd-powder .ampd-different__intro, .ampd-page--v4 .ampd-trust-card__desc { color: var(--text-label); } /* ---------- C9 · Primary CTA gradient — REVISED on review (2026-07-27) ---------- The audit fix replaced the two-tone ramp with a single-hue one on every scheme. That cleared 4.5:1 everywhere but lost the blue→purple signature, so it is reverted: the original gradient is restored wherever it actually passes, and darkened only on the schemes where it does not. Measured white-on-gradient under the label (16.5px/15px bold is NOT WCAG large text, so 4.5:1 applies): ampd 5.38 → 8.04 PASS ← the client's chosen scheme grape 6.40 → 8.04 PASS watermelon 4.41 fail sunset 3.17 fail citrus-minimal 3.17 fail citrus 1.35 → 3.52 fail ← and citrus is still the :root default So on the scheme AMPD is shipping, the original gradient is compliant and no compromise is needed. The four warm-led schemes keep the darkened ramp so the switcher stays honest for client review — swap that for an ink label if the two-tone look is wanted there too. */ :root[data-theme="watermelon"] .ampd-page--v4, :root[data-theme="sunset"] .ampd-page--v4, :root[data-theme="citrus-minimal"] .ampd-page--v4, :root[data-theme="citrus"] .ampd-page--v4 { --accent-gradient: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-hover) 65%); } /* ---------- C10 · Flavour accent fell through for two of three products ---------- choose-v2.css only defined --flav-accent for the default and "watermelon", so data-flavour="citrus" and "unflavoured" silently inherited raw Citrus Orange — branding the Unflavoured product as Citrus on three of six schemes. */ .ampd-page--v4 .ampd-choose2[data-flavour="citrus"] { --flav-accent: var(--brand-citrus-orange); } .ampd-page--v4 .ampd-choose2[data-flavour="unflavoured"] { --flav-accent: var(--accent-primary); } /* Scheme harmony still wins for chrome on the purple-led schemes (contrast), per the reconciliation — flavour identity is carried by --flav-signature below. */ :root[data-theme="ampd"] .ampd-page--v4 .ampd-choose2, :root[data-theme="grape"] .ampd-page--v4 .ampd-choose2 { --flav-accent: var(--accent-primary); } /* --flav-signature: one flavour-true accent per product, used only where it identifies the flavour. Resolves the visual-vs-contrast disagreement between the brand and system specialists. */ .ampd-page--v4 .ampd-choose2[data-flavour="watermelon"] { --flav-signature: var(--brand-watermelon-red); } .ampd-page--v4 .ampd-choose2[data-flavour="citrus"] { --flav-signature: var(--brand-citrus-orange); } .ampd-page--v4 .ampd-choose2[data-flavour="unflavoured"] { --flav-signature: var(--accent-primary); } .ampd-page--v4 .v4-flav-dot { display: inline-block; width: 11px; height: 11px; border-radius: 999px; background: var(--flav-signature); vertical-align: 2px; } /* ---------- C11 · Classes used in markup that only exist in v9.css ---------- These pages load variant-v9.css, not v9.css, so the trust line's intended three-tier hierarchy rendered flat and the plan cards rendered without their resting elevation. Ported rather than left broken. */ .ampd-page--v4 .ampd-guarantee-line__soft { font-weight: 500; color: var(--text-body-strong); } .ampd-page--v4 .ampd-guarantee-line__soft svg { color: var(--text-muted); } .ampd-page--v4 .ampd-plan2 { box-shadow: 0 2px 10px rgba(11, 11, 14, 0.05); } .ampd-page--v4 .ampd-plan2[aria-checked="true"] { box-shadow: 0 8px 26px var(--flav-shadow); } /* ---------- C13 · Founder photo cropped his face off ---------- Source is 2400x3600 (2:3) in a 4:3 box with object-fit: cover and no object-position, so only the middle 50% of height survived — Ross's head sits at ~12-20%. The founder section rendered a torso on a founder-led brand. */ .ampd-page--v4 .ampd-founder__media { aspect-ratio: 4 / 5; } .ampd-page--v4 .ampd-founder__media img { object-position: center 18%; } /* The media is now the founder video, whose resting card is this same 4:5 crop. The shared expand-on-play rule (styles.css) ties this one on specificity and loses on file order, so restate it here — without this the card never opens out to the footage's 9:16 and the video plays letterboxed. */ .ampd-page--v4 .ampd-founder__media--video.is-playing { aspect-ratio: 9 / 16; } /* ---------- C15 · Press feedback was silently disabled ---------- .ampd-plan2 redeclares `transition`, ties .ampd-tap on specificity and wins on load order, dropping transform/opacity — so scale(0.97) snapped on the six most-tapped elements on the page. Same defect on .ampd-flav__opt. */ .ampd-page--v4 .ampd-plan2, .ampd-page--v4 .ampd-flav__opt { transition: border-color 220ms var(--ease-out), background-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); } /* Mode pills and flavour cards had no transition at all; .pdp-flav's border faded over 150ms while its background snapped, so one state arrived in two halves. */ .ampd-page--v4 .pdp-mode__opt { transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); } .ampd-page--v4 .pdp-flav { transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out), transform var(--duration-fast) var(--ease-out); } .ampd-page--v4 .pdp-flav__radio { transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); } /* ---------- C3 · Scroll reveals could hide 40% of the page forever ---------- variant-v1.css sets opacity: 0 unconditionally and only variant-v1.js removes it; the reduced-motion blocks kill the transition but never restore opacity, so CSS alone could never recover. Default to visible here, and only allow the hidden state once v4.js has confirmed IntersectionObserver + motion allowed — the capability gate v9.css already used and that was never backported. */ .ampd-page--v4 .ampd-powder [data-reveal], .ampd-page--v4 .ampd-different__card { opacity: 1; transform: none; } .v4-motion .ampd-page--v4 .ampd-powder [data-reveal]:not(.is-visible), .v4-motion .ampd-page--v4 .ampd-different__card:not(.is-visible) { opacity: 0; transform: translateY(16px); } .v4-motion .ampd-page--v4 .ampd-powder [data-reveal], .v4-motion .ampd-page--v4 .ampd-different__card { transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); } /* ---------- Recommended · type discipline on the plan card ---------- Eight distinct sizes rendered in one PDP viewport against a project cap of three. Collapsed to three roles: the price anchors, name/supply reads, and everything else is one caption size. Also lifts __perday and __was off the sub-12px floor. */ .ampd-page--v4 .ampd-plan2__now { font-size: 20px; } .ampd-page--v4 .ampd-plan2__supply { font-size: 14px; } .ampd-page--v4 .ampd-plan2__freq, .ampd-page--v4 .ampd-plan2__was, .ampd-page--v4 .ampd-plan2__perday { font-size: 11.5px; } .ampd-page--v4 .ampd-plan2__perday { color: var(--text-body-strong); } /* ---------- Intro price vs renewal price (client pricing, 2026-07-28) ---------- Creatine+ subscriptions bill a discounted first order and a different (still discounted) amount on every renewal. The price column shows the first-order figure, so the renewal has to be stated somewhere unmissable rather than left to the benefits list, which is collapsed until the card is selected. Full-width row under the head, above the collapsible details, so it reads on every card at rest. Not used on Creatine Monohydrate, where both prices are the same. */ .ampd-page--v4 .ampd-plan2__renew { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--ampd-line-softer); font-size: 11.5px; font-weight: 600; color: var(--ampd-muted); } /* ---------- Recommended · homepage gutter + product shelf ---------- .ampd-choose was the only section on a 20px gutter (everything else is 24px), and its head added 4px so the heading and the grid disagreed. The cards then sat on a --bg-panel slab — a 20% accent tint that reads as a lilac block under the AMPD scheme — with 84px thumbnails, in a section whose own comment argues for large photography. Restacked: full-width 4:3 media on white. */ .ampd-page--v4 .ampd-choose { padding: 20px 24px 64px; background: var(--bg-white); } .ampd-page--v4 .ampd-choose__head { padding: 0; } .ampd-page--v4 .pdp-card { display: block; position: relative; padding: 0; overflow: hidden; } .ampd-page--v4 .pdp-card__media { width: 100%; border-radius: 0; } .ampd-page--v4 .pdp-card__media img { aspect-ratio: 4 / 3; } .ampd-page--v4 .pdp-card__media .pdp-placeholder { aspect-ratio: 4 / 3; font-size: 12px; } .ampd-page--v4 .pdp-card__body { padding: 14px 16px 16px; } .ampd-page--v4 .pdp-card__name { font-size: 17px; } .ampd-page--v4 .pdp-card__go { position: absolute; right: 14px; bottom: 14px; width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent-primary) 12%, white); color: color-mix(in srgb, var(--accent-primary) 72%, black); } /* ---------- Hero video crop ---------- The base rule crops to `center 22%` to keep Ross's face in frame. This page's hero is now the watermelon product clip, where the pouch and bottle sit dead centre — the upward bias cropped the product's lower half out. Everything else in the base rule already matches. Scoped to .ampd-hero__media so it can't reach the founder video below, which carries the same class. */ .ampd-page--v4:not(.ampd-page--product) .ampd-hero__media .ampd-hero__video { object-position: center; } /* ---------- Recommended · hero runs one gutter ---------- Four insets (12/16/24/26px) in one composition; the perk row's hairlines made the mismatch visible against the CTA directly above it. Originally fixed by putting 24px on each child; now the body owns the inset (padding) and the rhythm (gap), and the children carry no spacing of their own — one place to change, and no margin/gap double-ups. Homepage only. The three flavour PDPs carry ampd-page--v4 too and reuse .ampd-hero__rating, so every rule here is scoped off .ampd-page--product — unscoped, the padding-top reset here would flatten the PDP rating row. The PDP's own gutter comes from .pdp-head in product-page.css. */ .ampd-page--v4:not(.ampd-page--product) .ampd-hero__body { padding: 20px; display: flex; flex-direction: column; gap: 15px; } .ampd-page--v4:not(.ampd-page--product) .ampd-hero__rating { margin: 0; padding-top: 0; } .ampd-page--v4:not(.ampd-page--product) .ampd-hero__title { margin: 0; font-size: 26px; } .ampd-page--v4:not(.ampd-page--product) .ampd-hero__subtitle { margin: 0; max-width: none; margin-inline: auto; } .ampd-page--v4:not(.ampd-page--product) .ampd-btn-group { margin: 0; } .ampd-page--v4:not(.ampd-page--product) .ampd-perks { margin: 0; padding-bottom: 0; } /* Sits outside the hero body, so the gap above doesn't reach it — it carries its own padding instead (was 40px/36px, which read as a gap in the story rather than a cue attached to the hero). */ .ampd-page--v4:not(.ampd-page--product) .ampd-scrolldown { padding: 15px 0; } .ampd-page--v4:not(.ampd-page--product) .ampd-scrolldown__label { font-size: 16px; } /* ---------- Recommended · PDP above-the-fold economy — NOT APPLIED ---------- The mobile specialist wanted photo slides cut 410px -> 320px, because ~803px of chrome + gallery + header sits above the first price, plan or CTA at 390px. Reverted on review (2026-07-27): the taller gallery was judged to look materially better, and product photography is the price justification on a premium PDP. `product-page.css`'s 410px therefore stands for every slide, and the nutrition modifier is redundant. The finding is not dismissed, just paid for elsewhere: the sticky purchase bar added below keeps price and CTA reachable regardless of scroll depth, which was the actual risk behind the recommendation. */ /* Dot hit areas overlapped by 10px (23px-wide target, 6px gap) so a tap on dot 2 could land on dot 3. */ .ampd-page--v4 .ampd-gallery-dots { gap: 16px; } .ampd-page--v4 .ampd-dot::after { content: ''; position: absolute; inset: -14px -9px; } .ampd-page--v4 .ampd-dot { position: relative; } /* iOS zooms the viewport on focus for any input under 16px. */ .ampd-page--v4 .ampd-newsletter__input { font-size: 16px; } /* Touch targets under the 44pt floor. */ .ampd-page--v4 .pdp-mode__opt, .ampd-page--v4 .pdp-nutrition { height: 44px; } /* ---------- C12 · Proof at the decision point ---------- The PDP carried the buy decision and none of the evidence. These blocks are relocated homepage sections (verbatim copy), so they need the section rhythm the PDP's zero-padding section doesn't provide. */ .ampd-page--v4 .v4-pdp-proof { padding: 8px 24px 40px; background: var(--bg-white); } .ampd-page--v4 .v4-pdp-proof + .v4-pdp-proof { padding-top: 0; } .ampd-page--v4 .v4-proof-head { margin: 0 0 14px; font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--ampd-ink); } .ampd-page--v4 .v4-founder-strip { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: var(--bg-founder); border: 1px solid var(--ampd-line-soft); } .ampd-page--v4 .v4-founder-strip img { width: 72px; height: 90px; flex: none; border-radius: 14px; object-fit: cover; object-position: center 18%; } .ampd-page--v4 .v4-founder-strip p { margin: 0; font-family: var(--font-display); font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--ampd-ink); } .ampd-page--v4 .v4-founder-strip a { margin-top: 6px; font-size: 13px; } /* ---------- C12b · Sticky purchase bar on the page that can transact ---------- .v9-sticky styling already loads via variant-v9.css; only the PDP behaviour is new. Sits above the footer legal links rather than over them. */ .ampd-page--v4 .v4-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-width: 450px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--ampd-line-soft); transform: translateY(110%); transition: transform 240ms var(--ease-out); } .ampd-page--v4 .v4-sticky.is-visible { transform: translateY(0); } .ampd-page--v4 .v4-sticky__meta { flex: 1; min-width: 0; } .ampd-page--v4 .v4-sticky__plan { font-size: 11.5px; color: var(--text-body-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ampd-page--v4 .v4-sticky__price { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--ampd-ink); } .ampd-page--v4 .v4-sticky .ampd-btn-block { margin: 0; width: auto; padding: 0 20px; height: 46px; } @media (prefers-reduced-motion: reduce) { .ampd-page--v4 .v4-sticky { transition: none; } } /* Screen-reader-only live region for the step machine (4.1.3). */ .v4-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }