/* ========================================================================= * ADVERTISER DISCLOSURE — HOMEPAGE HOST LAYOUT * ========================================================================= * * Approved 2026-08-25. This file exists so the homepage can host the shared * Advertiser Disclosure WITHOUT the component being modified. * * ★ assets/css/components/advertiser-disclosure.css IS FROZEN at v3.40.9. * Nothing here overrides its dimensions, typography, colour, padding, * border, radius, shadow, copy, Popover behaviour or the x. The only * declaration this file makes on the component itself is `right`, and only * to reconcile a gutter difference described below. * * WHY A WRAPPER AT ALL * * The disclosure is a PAGE-LEVEL statement: it applies to the whole homepage, * not to Editor's Picks. It previously rendered inside * .fp-editors-picks__container, which tied it to a section roughly 1,250px * down the page. It is now emitted at generate_after_header priority 5, * immediately before the first content band, inside .fp-advdisc-page. * * ★ THE WRAPPER SITS AT THE HEADER'S BOTTOM EDGE, WHICH IS THE WHOLE POINT. * Because its top edge IS the first content band's top edge, the frozen * component's own `top: var(--fp-space-m)` (24px) resolves to the correct * place with NO vertical override. Measured at 1440: header ends 89, * disclosure lands at 113 — the same 24px inset the article hero band uses. * Do not add a `top` here; that would re-introduce the hardcoding this * structure removes. * ========================================================================= */ /* ── Below 1024 : the component is in normal flow ────────── * * ⚠ THE WRAPPER MUST NOT BE ZERO-HEIGHT HERE. Below 1024 the frozen component * is position: relative, so a collapsed parent cannot contain it — measured, * it overflowed and overlapped the hero. The wrapper is therefore a real * in-flow block carrying the page gutter, and the trigger sits above the * hero. This adds ~19.5px of page height on mobile, which is approved and * expected. The popover panel is unaffected: it is viewport-centred at * 293px with equal gutters, exactly as frozen. */ .fp-advdisc-page { padding: 0 var(--fp-margin-mobile); /* 20px */ /* v3.56.12: WHITE, like the header above and the page below. Below 1024 this 19.5px row sits between the white header and the white page container, directly on the body's #F7F8F9 - which showed as a gray bar across the top of every page with a disclosure on tablet and phone. From 1024 the row is zero-height, so nothing is painted there. */ background-color: var(--fp-color-white); } /* The component's own 10px top margin collapsed through this row, so it sat OUTSIDE the white background and a 10px gray strip remained above the label. flow-root keeps the margin inside the row; the row's total height (29.5px) and the label's position are unchanged. Below 1024 only - from 1024 the component is absolutely positioned. */ @media (max-width: 1023.98px) { .fp-advdisc-page { display: flow-root; } } @media (min-width: 640px) { .fp-advdisc-page { padding: 0 var(--fp-margin-tablet); } /* 24px */ } /* ── 1024+ : collapsed positioning context ───────────────── * * height: 0 keeps the wrapper out of flow calculations entirely, so inserting * it shifts nothing: hero, Explore by Category, Editor's Picks heading, * subtitle, dividers and cards all measured unmoved, page height unchanged. */ @media (min-width: 1024px) { .fp-advdisc-page { position: relative; height: 0; padding: 0; } /* GUTTER RECONCILIATION, NOT A REPOSITION. * * The frozen component's `right: var(--fp-space-l)` (32px) is the ARTICLE * hero band's padding. The homepage gutter is 24px until 1440, so the * unmodified value left the label 8px inside the content edge — measured * 1024 -8, 1280 -8, 1440 0, 1600 0. Tying the offset to the page gutter * makes the right edge flush at every desktop width. * * ★ AT >=1440 THIS RESOLVES TO 32px, i.e. the component's own value. */ .fp-advdisc-page > .fp-advdisc { right: var(--fp-margin-tablet); } /* 24px */ } @media (min-width: 1440px) { .fp-advdisc-page > .fp-advdisc { right: var(--fp-margin-desktop); } /* 32px */ } /* ========================================================================= * v3.42.0 — THE SAME ROW ON EVERY ELIGIBLE PAGE * ========================================================================= * * The homepage row above is now the ONE disclosure pattern. functions.php * emits the same wrapper at the same hook on eligible articles and category * pages; the hero-corner and after-category-hero placements are gone. * * Everything above this line still applies unchanged: the in-flow gutter * below 1024, the zero-height positioning context from 1024, and the * component's own `top: var(--fp-space-m)` (24px below the header). A host * modifier changes only WHICH CONTENT EDGE the label's right side sits on, * because each page family has its own canvas: * * homepage the page gutter (unchanged) * article the hero card's right edge - .fp-article__container, * 1200px max, padding 20 / 24 / 32 / 0 * category the category container's right edge - 1500px max, * padding 20 / 24 / 32, the same gutters as the homepage * * Below 1024 all three are the homepage row to the pixel: the article and * category gutters are 20px and 24px there, exactly the base rule's. * ========================================================================= */ @media (min-width: 1024px) { .fp-advdisc-page--article { max-width: 1200px; /* .fp-article__container */ margin: 0 auto; } .fp-advdisc-page--article > .fp-advdisc { right: var(--fp-margin-desktop); } /* 32px, the container's padding */ .fp-advdisc-page--category, .fp-advdisc-page--providers, .fp-advdisc-page--collection, .fp-advdisc-page--resources { max-width: 1500px; /* .fp-category-hero__container, and .fp-breadcrumb__container on every one of these pages (v3.56.12) */ margin: 0 auto; } } /* From 1280 the article container drops its padding and the canvas is exactly 1200px, so the hero's right edge IS the wrapper's right edge. */ @media (min-width: 1280px) { .fp-advdisc-page--article > .fp-advdisc { right: 0; } } /* ========================================================================= * v3.42.1 — INFORMATIONAL GUIDE HOST * ========================================================================= * * The guide template emits the row as the first child of its
, directly * above the guide card. The wrapper takes the card's OWN width rules * (informational-guide.css: min(100% - 24px, 980px), auto margins, max-width * 700 below 1024 and 360 below 640), so the label sits on the card's outer * edge - the same relationship articles have with their hero card. * * ⚠ IN FLOW AT EVERY WIDTH, AND THAT IS THE ONE DIFFERENCE. On other pages the * desktop row is a zero-height context and the label overlays the top of the * first band. The guide card starts only 20px below the header, so an overlay * put the label inside the card's top edge, 5px under its border and against * the breadcrumb (measured, rejected). The row therefore takes its own space: * the label keeps the homepage's 24px drop from the header at 1024+ (10px * below, as everywhere), right-aligned at 1024+ and left-aligned below, and * the card follows it unchanged. * ========================================================================= */ .fp-advdisc-page--guide { width: min(100% - 24px, 980px); margin: 0 auto; padding: 0; box-sizing: border-box; } @media (max-width: 1023.98px) { .fp-advdisc-page--guide { max-width: 700px; } } @media (max-width: 639.98px) { .fp-advdisc-page--guide { max-width: 360px; } } @media (min-width: 1024px) { .fp-advdisc-page--guide { height: auto; } .fp-advdisc-page--guide > .fp-advdisc { position: relative; top: auto; right: auto; margin: var(--fp-space-m) 0 0; /* the homepage's 24px drop */ text-align: right; } }