/* ============================================================ pp-footer.css -- Prime Peptides global footer: the dedicated, precisely scoped FOOTER-ONLY stylesheet. R4 step 12 (2026-08-13). Deployed to uploads/pp-redesign/css/pp-footer.css and enqueued on part-76 contexts by sandbox pp-redesign-footer.php (deps pp-tokens). WHY A DEDICATED SHEET (architecture, recorded rather than assumed): template part 76 renders OUTSIDE every
wrapper, on nine templates whose surface stylesheets are ALL .pp-site-scoped and ALL load in different lanes (pp-site-scoped / pp-catalogue / pp-product / pp-cart / pp-checkout / pp-education / pp-pages). No existing sheet can reach the footer markup, and appending footer rules to any one lane would style the footer on one surface only. This is the exact structural situation the header solved at step 4 with pp-header.css + pp-redesign-header.php (owner decision 2026-08-09, Direction 04 strategy (a): a dedicated, precisely scoped part-only stylesheet), so step 12 follows that precedent rather than inventing a second pattern. pp-site-scoped.css's own contract already routes the "footer/legal" family away from itself ("Excluded families ... footer/legal ... arrive with their own surface's step"). SCOPE CONTRACT (machine-auditable): - EVERY selector list begins with `.pp-footer`, with exactly ONE documented exception: section A's wrapper reset, anchored `footer.wp-block-template-part:has(> .pp-footer)`, which by construction cannot match a document that does not render this footer. - Zero :root, zero bare `*` / body / html, zero bare element selectors, zero @keyframes, zero @import. - Zero commerce selectors: no add-to-cart, buy-block, gateway, price, quantity, notice-banner or Store API class is selected anywhere in this file. A4 is not touched and not discharged. - Zero JavaScript ships with this surface. - This file NEVER modifies pp-tokens.css, pp-site-scoped.css, pp-compat.css, pp-header.css, pp-catalogue.css, pp-product.css, pp-cart.css, pp-checkout.css, pp-education.css, pp-pages.css or custom_css post 27. !important CENSUS -- 11 declarations in shipped code (comment text excluded), every one a MATCHED answer to a custom_css post-27 rule that already carries !important, or the scoped reduced-motion override. Breakdown, each cited again at its use site: A wrapper reset 2 (background, color) E contact affordances 5 (display x1; color x4 -- rest + hover, WhatsApp + social) I focus 1 (outline) J reduced motion 3 (animation-duration, transition-duration, scroll-behavior) No other !important ships. Audited legacy generic ceiling for footer markup (post 27, comment-stripped selector census, 2026-08-13): exactly three generic rules exist site-wide -- `img{max-width:100%}` (0,0,1), `a{color:var(--pp-blue);...}` (0,0,1) and `a:focus-visible{outline:2px solid var(--pp-blue)!important; outline-offset:3px}` (0,1,1). There is NO generic h2/p/div/nav/b/ strong/span rule. Component declarations below therefore sit at (0,2,1) or heavier, which clears every one of them. VALUES: concept-verbatim where the concept has the component (SRC = design-reference/claude-concept/css/pp-site.css line refs); PP-EXT = derived extension, cited inline. Tokens come from pp-tokens.css, which loads on every non-shell surface. Brief: redesign/build/step-12/STEP-12-PACKET.md. ============================================================ */ /* ---- A. Template-part wrapper reset ---- THE ONE non-.pp-footer-rooted rule in this file, and the reason it exists: custom_css post 27 paints the footer wrapper twice, both with !important -- footer.wp-block-template-part{margin:0!important;padding:0!important; color:var(--pp-white)!important;background:#04142c!important} footer.wp-block-template-part{background: url("data:image/svg+xml,...hexagonal line-art...") repeat, linear-gradient(160deg,#04142c 0%,#081d3e 100%)!important} The second is the legacy molecular/hexagonal line-art motif, which CLAUDE.md and .claude/agents/site-builder.md name explicitly as a banned aesthetic ("molecular geometry", "hexagonal biotech patterns"). Post 27 is R5 territory and is not edited here, so the ground is reset from this lane instead. MATCHED !important x2 (background, color) at (0,2,1) > (0,1,1); among !important author declarations the winner is specificity, so post 27 printing later cannot recover. margin/padding are NOT contested -- post 27's 0/0 is what this composition wants. The :has() anchor makes the rule self-limiting: it cannot fire on a footer that is not this footer. Section B additionally paints the white ground on .pp-footer itself, so the visible result is correct even where :has() is unsupported. */ footer.wp-block-template-part:has(> .pp-footer){background:var(--pp-surface-page) !important;color:var(--pp-text-body) !important} /* ---- B. Scoped normalization + the footer ground ---- SRC 22 (box-sizing), 24 (img max-width), 27 (a base), 23 (the body font layer, re-hosted on .pp-footer because this markup renders outside .pp-site and inherits nothing from it). `.pp-footer a` deliberately sets NO color: a (0,1,1) color would defeat the (0,2,1) component colors below -- the same decision pp-header.css section A records for `.pp-pill a`. display/padding-block are declared explicitly to close the ONE cascade seam this class name has: the frozen reference sheet pp-site.css (SRC 84) declares `.pp-footer{display:flex; justify-content:space-between;align-items:flex-end;gap:var(--pp-space-8); padding-block:70px 56px;flex-wrap:wrap}` and still loads in the private typography-specimen lane. Under display:block the four flex properties are inert, so restating display + padding-block is sufficient and nothing is left to source order. */ .pp-footer,.pp-footer *,.pp-footer *::before,.pp-footer *::after{box-sizing:border-box} .pp-footer{display:block;margin:0;background:var(--pp-surface-page);border-top:1px solid var(--pp-border-subtle);font-family:var(--pp-font-sans);font-size:15px;line-height:1.45;color:var(--pp-text-body);-webkit-font-smoothing:antialiased;text-wrap:pretty} .pp-footer img{max-width:100%} .pp-footer nav{margin:0;padding:0} .pp-footer a{text-decoration:none;transition:color var(--pp-dur-fast) var(--pp-ease)} /* ---- C. Layout ---- C1. padding-block SRC 84 verbatim (70px 56px); the <=700 value (48px 40px) is SRC 327 verbatim, section H. C2. .pp-footer__shell restates .pp-shell (SRC 34) verbatim -- max-width:var(--pp-max);margin:0 auto;padding-inline:var(--pp-gutter). It is restated rather than reused because the deployed .pp-shell ships as `.pp-site .pp-shell` and cannot match outside .pp-site. Same class values, different root: a step-13 consolidation is a pure move. C3. PP-EXT F-1. The concept footer is two elements (logo + legal) in one flex row, authored against a mock with no information architecture. Production carries a real 16-link footer IA which redesign/03-site-audit.md classifies RESTYLE ("content/links materially unchanged"), and CLAUDE.md forbids removing substantive content for a cleaner layout. The concept's space-between reading is therefore realized as a two-track grid whose proportion is the live footer's own (minmax(280px,.95fr) / minmax(520px,1.05fr)), with the column gap snapped to the token scale (--pp-space-16 = 64px; the legacy one-off was 72px). */ .pp-footer{padding-block:70px 56px} .pp-footer .pp-footer__shell{max-width:var(--pp-max);margin:0 auto;padding-inline:var(--pp-gutter)} /* PP-FIX B1 (2026-08-29): the link area takes a fourth column ("Research guides"), so its share of the top grid widens a step. */ .pp-footer .pp-footer__top{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(560px,1.2fr);align-items:start;gap:var(--pp-space-16)} /* ---- D. Brand column ---- D1. Logo. Official approved asset, attachment 163, unchanged src -- the same Media Library file the live footer already carries, at its natural colour. The legacy `filter:brightness(0) invert(1)` existed only to force the artwork white for the navy ground and dies with the old class name; the artwork is brand blue on transparent (sampled mean luminance 70, e.g. #146ced), which is the intended rendering on the white ground. The logo is NOT re-typeset, recoloured or replaced. Box pinned on both axes so nothing shifts (SRC: the concept footer's own logo width, 116px). D2. Brand line register: 14px/1.7 and the 430px measure are the live footer's own composition values, carried forward; colour moves to the system token --pp-text-muted (#6b7789 on white = 5.42:1). */ .pp-footer .pp-footer__logo{display:inline-flex} .pp-footer .pp-footer__logo img{display:block;width:116px;height:auto} .pp-footer .pp-footer__line{max-width:430px;margin:var(--pp-space-5) 0 0;color:var(--pp-text-muted);font-size:14px;line-height:1.7} .pp-footer .pp-footer__contact{display:flex;flex-wrap:wrap;gap:var(--pp-space-3) var(--pp-space-4);margin-top:var(--pp-space-6)} /* ---- E. Contact affordances ---- REUSED, NOT FORKED. a.pp-whatsapp-link and its two children are restated BY NAME AND VALUE from the applied pp-product.css (which pp-education.css and pp-pages.css also restate verbatim), so the footer's WhatsApp route is the same component the product, education and document surfaces ship. Lane sheets cannot import one another, so the values are restated here; the class names are NOT renamed, so a step-13 consolidation into one shared component sheet is a pure file move with zero markup change. The legacy `--inverse` modifiers are dropped from the markup: they existed solely for the retired navy ground. MATCHED !important x2 -- answers post 27 `.pp-whatsapp-link{display:inline-flex!important;color:var(--pp-navy)!important}` and `.pp-social-link{display:inline-flex!important;color:var(--pp-navy)!important}` (both (0,1,0); these rules are (0,2,1)). post 27's `text-decoration:none!important` is NOT contested -- the same value is wanted, so it is declared at normal weight and the computed result is identical either way. E2 is PP-EXT: the system has no social-link component. It is built as the outline twin of the WhatsApp pill on the same geometry, from the concept's own button grammar (SRC 58-73), rather than as a third button size. The handle keeps its literal case (text-transform:none) -- "@primepeptidesae" is a name, not a label. E3: the icon plates lose the legacy 28px circles and become plain 17px currentColor glyphs, matching pp-product.css's .pp-whatsapp-link__icon exactly. The Instagram SVG's shapes carry no fill/stroke attributes of their own, so the stroke values are preserved from the live rule. */ .pp-footer a.pp-whatsapp-link,.pp-footer a.pp-social-link{display:inline-flex !important;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:1px solid transparent;border-radius:var(--pp-radius-pill);box-shadow:none;transform:none;font-family:var(--pp-font-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;text-decoration:none} .pp-footer a.pp-whatsapp-link{background:var(--pp-blue-600);color:var(--pp-text-on-dark) !important} .pp-footer a.pp-whatsapp-link:hover{border-color:transparent;background:var(--pp-blue-500);box-shadow:none;transform:none;color:var(--pp-text-on-dark) !important} .pp-footer a.pp-social-link{border-color:var(--pp-border-default);background:transparent;color:var(--pp-text-heading) !important} .pp-footer a.pp-social-link:hover{border-color:var(--pp-border-strong);background:var(--pp-neutral-50);box-shadow:none;transform:none;color:var(--pp-text-heading) !important} .pp-footer a.pp-whatsapp-link:active,.pp-footer a.pp-social-link:active{box-shadow:none;transform:none} .pp-footer .pp-whatsapp-link__icon,.pp-footer .pp-social-link__icon{display:inline-flex;width:17px;height:17px;flex:0 0 17px;border:0;border-radius:0;background:none;color:inherit} .pp-footer .pp-whatsapp-link__icon svg{width:17px;height:17px;fill:currentColor} .pp-footer .pp-social-link__icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7} .pp-footer .pp-whatsapp-link__label{display:inline} .pp-footer .pp-social-link__label{display:inline;text-transform:none;letter-spacing:.02em} /* ---- F. Link columns (PP-EXT F-2) ---- Three labelled groups inside ONE