/* Theme Name: Criteo Tech Community Author: Criteo Tech Community Description: Self-contained block theme for the Criteo Tech Community — a Caards/Recap-style magazine layout with a floating brand header, a corporate-style footer, post cards, dark mode, and multi-author bylines. Based on Automattic's Spiel, extended for Criteo. Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 8.0 Version: 3.11.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: criteo-tech-community Tags: blog, news, grid-layout, block-styles, featured-images, full-site-editing, sticky-post, threaded-comments, wide-blocks, block-patterns */ /* * Button Block * Control the hover stylings of outline block style. * Unnecessary once block styles are configurable via theme.json * https://github.com/WordPress/gutenberg/issues/42794 */ .wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--primary); } /* * Pull quote Block * Reset the browser default margins for blockquote element * https://github.com/WordPress/gutenberg/issues/44129 */ .wp-block-pullquote blockquote, .wp-block-pullquote p { margin: 0; } /* ========================================================================== Homepage post cards (Recap-style previews) + pagination. Scoped to the front page (body.home). Cards use the theme palette so the criteo-header dark-mode remap (:root[data-theme="dark"]) recolors them too. ========================================================================== */ /* Soft page background so the white cards lift by contrast (Recap-style) instead of relying on a hard border, plus a brand-tinted wash across the top (2.6.0). The wash replaces the visual weight the masthead photograph carried until 2.5.0 — without it the navy header pill floats on flat grey directly above the first white card and the page has no entry point. EVERY STOP IS AT OR DARKER THAN THE RESTING COLOUR, and that is a hard constraint, not taste: white cards on #f3f4f6 are only 1.11:1 (see the card rules below), so their edge is carried by a hairline and a shadow. A stop lighter than the page would dissolve the cards into the background. Literal hex per mode, never presets — the same rule as the banner scrim further down. `base`, `contrast`, `secondary` and `tertiary` are all remapped by the colour-mode toggle and `primary` never is, so stops routed through presets would invert with the theme. (Historical: until 3.9.0 the stops were hand-composited tints — #d8d7e8 was navy #130183 at 12% over the grey, #e0f3ef a mint pull at ~8%. That mint was #00eaa0, a colour the brand palette does not contain; it is gone from the theme entirely as of 3.10.0. The paragraphs below about tint strength describe THAT wash, not the brand gradient that replaced it — they are kept because the reasoning about band length versus what sits on top of it still applies.) STRENGTHENED AND SHORTENED IN 2.7.1. It shipped at 6%/5% over an 820px band and was effectively invisible: 13/14/6 per channel spread over most of a screen height is below the threshold where the eye reads a gradient rather than flat grey, and the homepage hero added afterwards covers the strongest top 400px — the region that was bare when those values were picked. Doubling the tint and shortening the band to 560px makes the same colour path steeper, so it reads in the places actually left visible: around the header pill, in the gutters beside the hero, and in the gap above the lead card. It still finishes before the first card row. If the top of the page ever gains or loses a full-width band again, re-check this — the band length is tuned to what sits on top of it. THE BAND MUST FINISH ON `background-color` IN BOTH BLOCKS (#f3f4f6 light, #14171d dark). That is what lets the wash be a sized 560px band with the flat colour continuing beneath it, instead of needing `background-attachment: fixed` (new to this codebase, and janky on iOS). A gradient on `body` is otherwise sized to the WHOLE document, so on a long page like /articles/ it would fade out imperceptibly. Desync the end and a seam appears at 560px. WHY THIS IS TWO LAYERS AS OF 3.9.0. The wash is now the brand team's `criteo-sunrise` gradient (theme.json), and the brand gradients are 45°, not 180°. A diagonal gradient's isolines are diagonal, so unlike the old vertical ramp it CANNOT land flat on the resting colour at the bottom of the band — swap it in on its own and you get a diagonal seam across the page at y=560. The fix is a second layer: a vertical transparent→resting fade painted OVER the diagonal brand gradient. `background-size` and `background-repeat` apply to every layer, so the fade reaches full #f3f4f6 exactly where the band ends and the seam rule above is satisfied while the brand direction is preserved. Layer order matters — the fade must be listed FIRST (topmost). Literal hex per mode, never presets — the same rule as the banner scrim further down. `base`, `contrast`, `secondary` and `tertiary` are all remapped by the colour-mode toggle and `primary` never is, so stops routed through presets would invert with the theme. This is also why the fade layer is written as literal rgba() rather than a `color-mix()` on the preset. DO NOT scope this first block to `:root[data-theme="light"]`. It is unscoped on purpose: it matches in both modes, and the dark block below deliberately overrides only the two colour properties. Scoping it would leave the dark band with no `background-size` and it would tile down the page. Known, accepted: dark-mode.css transitions `background-color` on body, but `background-image` cannot interpolate — so on toggle the band snaps while the rest of the page eases over 0.2s. At these alphas that is not worth rebuilding the wash as a separate fade-able overlay layer. THE SOFTNESS IS MANDATED BY THE BRAND GUIDELINES. NOT A DEFECT. DO NOT "FIX" IT. Criteo Brand Guidelines v5.0, "Signature Gradients", defines Sunrise as #ffdccc → #d8d2fe and states: "The Sunrise gradient is primarily used for backgrounds. To ensure enough contrast with overlapping text and elements, please only use at 50% opacity." Composite those two stops at 50% over white and you get #FFEEE6 → #EBE9FE — which is, to within a rounding step, the #FFEDE5 → #EBE8FE below. So this wash IS the brand asset applied exactly as specified, and its lightness is the guideline doing its job, not a value somebody under-tuned. Measured white-card separation, for whoever comes here because the cards look like they are floating: shipped brand-exact Sunrise #EBE8FE → #FFEDE5 1.20 / 1.14 rejected Sunrise deepened 10% #D5D1F2 → #E7D5DB 1.48 / 1.41 (the 2.7.1 wash this replaced measured 1.42 / 1.15) Both were built and screenshotted side by side on 2026-08-14 and brand fidelity won — and the guideline discovered afterwards confirms the deepened variant would have BREACHED the spec, not merely deviated from taste. The card edge here rests on its hairline and shadow rather than on the wash; if cards ever start dissolving into the page, the lever is the card's own border, not this gradient. Live consumers of this band: the homepage, /articles/, category archives and search. Nothing else has a page background beyond theme.json's flat `base`. */ body.home, body.blog, body.archive, body.search { background-color: #f3f4f6; background-image: linear-gradient( 180deg, rgba( 243, 244, 246, 0 ) 0%, rgba( 243, 244, 246, 1 ) 100% ), linear-gradient( 45deg, #EBE8FE 26%, #FFEDE5 74% ); background-repeat: no-repeat; background-size: 100% 560px; } /* Dark mode is Twilight TINTED, never at full strength: #3D1EF8 behind the #1c2029 cards is a lit screen, not a reading surface. These are Twilight's own two stops composited at 25% over the dark `base` #14171d — and note that lands #141236, which is within a hair of the #141235 this block used before 3.9.0. The hand-tuned dark band was already, in effect, a muted Twilight, so adopting the brand gradient here keeps the existing calibration and only adds the electric end. Mint at a low alpha over near-black goes murky green, which is why this stayed single-hue navy in the first place. */ :root[data-theme="dark"] body.home, :root[data-theme="dark"] body.blog, :root[data-theme="dark"] body.archive, :root[data-theme="dark"] body.search { background-color: var( --wp--preset--color--base ); background-image: linear-gradient( 180deg, rgba( 20, 23, 29, 0 ) 0%, rgba( 20, 23, 29, 1 ) 100% ), linear-gradient( 135deg, #1E1954 26%, #141236 74% ); } /* The homepage hero is a template part (parts/home-hero.html), and core wraps every part in its own
. That wrapper is a flow child of `.wp-site-blocks`, so it inherits the 32px block-gap — while the hero group's inline `margin-top: 0` is now INSIDE the wrapper and cannot suppress it. Zero it here so the hero sits exactly where it did as inline template markup, tight under the header pill with only its own spacing-20 spacer between them. */ .wp-block-template-part.criteo-home-hero { margin-top: 0; } /* Grid gaps: give the hero grid and the 3-col feed room to breathe. */ .criteo-cards .wp-block-post-template.is-layout-grid { gap: 1.75rem; } /* The Featured band: TWO across, and the biggest cards on the homepage. patterns/magazine-body.php THIS IS THE POINT OF THE CLASS, so don't "simplify" it back to a plain `columnCount` and nothing else. The band replaced `criteo-cards-quad`, a four-across override that produced 312px cards with no excerpt — directly beneath a three-card row of 425px cards WITH excerpts. That inverted the hierarchy: the posts deliberately promoted rendered smaller and thinner than the unpromoted ones, and at 312px the multi-author bylines truncated mid-name. Featured now means visibly larger: 520-652px cards, with excerpts, above the row of 425px ones. `minmax(520px, 1fr)` rather than a fixed `repeat(2, …)`. The block declares `columnCount: 2`, which core emits as a fixed two-track grid that does NOT reflow — in a ~700px container that would mean two ~330px cards, straight back into the byline-wrap zone the four-across version suffered from. An `auto-fill`/`minmax()` track list picks the count from the available width instead. NOTE THAT IT RESPONDS TO THE BAND'S CONTAINER, NOT THE VIEWPORT — the band is `alignwide` inside a constrained layout, so the two are not the same number and it is easy to mis-predict. Measured on this site: container 1332px (alignwide desktop) → 2 columns, 652px cards container 703px → 1 column, 703px container 553px → 1 column, 553px container 236px (390px phone) → 1 column, 236px The switch to one column happens once the container can no longer fit 2 x 520px plus the 1.75rem gap, i.e. below ~1068px. So a card is either >= 520px in a two-up row or it has the container to itself; it is never squeezed into a narrow multi-column track. Above ~420px multi-author bylines fit on one line, which is why this band needs NO byline clamp, unlike `criteo-cards-duo` below — now the clamp's only consumer. Below 600px core takes it to one column anyway and the card is as wide as the phone allows, where a wrapped byline is normal and harmless. Below 600px core forces a single column anyway from a QUADRUPLED class selector (specificity 0,4,0) that deliberately outranks this; it lands on the same answer, so there is no mobile case to keep in sync here. Specificity 0,3,0 beats the `.wp-container-*` rule core emits at 0,1,0. */ .criteo-cards-feature .wp-block-post-template.is-layout-grid { grid-template-columns: repeat( auto-fill, minmax( 520px, 1fr ) ); } /* 16/9 here, against the 3/2 every other card grid uses, and it is a proportion fix rather than a preference. Wider cards make the shared 3/2 crop enormous: measured at 652px, a 3/2 image is 433px tall — 66% of a 654px card — so the card reads as a big picture with a strip of text under it, and the band came to 1367px against the ordinary row's 465px. 16/9 takes the image to ~367px and the band to roughly a third less height. It also happens to CROP NOTHING: the featured images on this site are 1024x576, i.e. 16:9 already, and they are title cards with text in them. 3/2 was shaving ~16% off their width. Wider is both shorter and more faithful here. Declared on the IMG for the same reason as the 3/2 rule below — the block writes its ratio inline onto the
only, and the isLink between them has no height. NOTE THE DOUBLED CLASS. `.criteo-cards-feature .wp-block-post … img` is specificity 0,3,1 — exactly the same as the 3/2 rule it has to beat, which sits LATER in this file and therefore won on source order. Matching on both of the band's classes makes this 0,4,1, so it wins wherever either rule happens to sit. Keep in sync with `aspectRatio` in magazine-body.php. */ .criteo-cards.criteo-cards-feature .wp-block-post .wp-block-post-featured-image img { aspect-ratio: 16 / 9; } /* The category sits in the BOTTOM META ROW here, not as a kicker above the title — this band carries no date (a promoted post is not promoted for being recent), so the category takes the slot the date holds in every other grid, and the headline gets the top of the text body. See the long note in magazine-body.php. Only the box model changes: the uppercase / 0.72rem / brand-blue link treatment is inherited from the base `.wp-block-post-terms` rule further down, and in the meta row that reads as a tag, which is the intent. What has to go is the base rule's `margin: 0 0 0.55rem` — a kicker's gap to the title beneath it, which inside a flex row just pushes the label off centre. `flex: 0 0 auto` + `white-space: nowrap` make it hold its width the way the date did; the byline gets `min-width: 0` below so IT is what gives way when an author list runs long, since the row is `flex-wrap: nowrap`. DOUBLED CLASS, same trap as the rule above: the base rule is 0,3,0 and sits later in this file, so a 0,3,0 override here would tie and lose on source order. */ .criteo-cards.criteo-cards-feature .wp-block-post .wp-block-post-terms { margin: 0; flex: 0 0 auto; white-space: nowrap; } .criteo-cards.criteo-cards-feature .wp-block-post .criteo-byline { min-width: 0; } /* Keep the meta-row hairlines on one line, whatever the byline says. Cards in a grid row are equal height and the meta row is bottom-pinned with `margin-top: auto`, so the card BOTTOMS always align. The visible hairline is the meta row's top border, though, and that moves with the row's own height — which varies because the byline wraps. The byline shares its row with the date via `space-between`, so it only ever gets ~half the card width to play with. FIRST measured on the homepage's four-across Featured band (~312px cards): byline 23 / 47 / 70px, hairlines up to 70px out of line within a single row. That band is no longer a card grid (2.8.0) and no longer uses this rule — at 312px the clamp was still truncating author names mid-word, which is part of why it became rows — but the measurements are kept because they are what established the wrap thresholds below. Measured again on /articles/ when it became two-across-plus-a-rail, which is where the `-duo` selector came from and is now the rule's ONLY consumer — the wrap starts far earlier than the 312px figure above suggested: 420px cards → bylines 23px spread 0 ✓ 351px cards → bylines 23, 46px spread 24 ✗ 314px cards → bylines 23, 46, 68px spread 46 ✗ That page runs 314-420px in the split and 323-404px stacked, so almost its whole range is in the wrap zone and the clamp applies unconditionally rather than behind a media query. The cost is ~23px of reserved space per card at the very widest desktop, where one line would have done; the benefit is a 0px spread at every width. Fixed by clamping to two lines AND reserving exactly two lines, so the row height is constant whatever the byline says. `2.8em` is 2 x the 1.4 line-height declared here — expressed in em rather than px because the `small` preset is fluid, so a hardcoded pixel value would drift with the viewport. Specificity 0,3,0, which beats the plain `.criteo-byline` rule the companion plugin ships at 0,1,0 — the theme cannot rely on stylesheet order there. */ .criteo-cards-duo .wp-block-post .criteo-byline { line-height: 1.4; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* The card container = each post-template item. THESE VALUES ARE COPIED IN ONE OTHER PLACE: `.criteo-home-editorial__plate`, which since 3.6.0 is a card too but is deliberately outside `.criteo-cards` (it has no image, no terms row and no meta row, so inheriting this block would mean overriding most of it). If you change the base colour, border, radius, shadow, transition or the hover values below, change them there as well. */ .criteo-cards .wp-block-post { display: flex; flex-direction: column; background-color: var( --wp--preset--color--base ); border: 1px solid rgba( 16, 24, 40, 0.06 ); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.04 ), 0 10px 28px rgba( 16, 24, 40, 0.06 ); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .criteo-cards .wp-block-post:hover { transform: translateY( -3px ); border-color: #fe5000; box-shadow: 0 2px 4px rgba( 16, 24, 40, 0.06 ), 0 18px 42px rgba( 16, 24, 40, 0.12 ); } /* Featured image sits flush to the card top; card overflow clips it to the rounded corners. Fills the width at a consistent 3/2 crop. */ .criteo-cards .wp-block-post .wp-block-post-featured-image { margin: 0; } /* The 3/2 crop has to be declared on the IMG, not just the figure. `post-featured-image` already writes `aspect-ratio:3/2` inline — but only onto the
. Between them sits the block's own (isLink), which has no height, so the img keeps `aspect-ratio: auto` and renders at its SOURCE ratio, stretching the figure to match. Measured across the site before this rule: 1.0, 1.31, 1.33, 1.5, 1.57, 1.66, 1.78, 1.79, 1.91, 2.0 and even 3.04 — which is what made card interiors and meta rows fail to line up in every grid. Deliberately NOT also set on the figure: the hero override below only retargets the img, and keeping both rules aimed at the same element is what guarantees it still wins. */ .criteo-cards .wp-block-post .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; } /* Text body: padded, and grows so the meta row can pin to the bottom (keeps cards in a row the same visual rhythm). */ .criteo-cards .wp-block-post > .wp-block-group { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.15rem 1.3rem 1.3rem; } /* The card body is a constrained-layout group, so WordPress puts `margin-inline:auto` + a max-width on every child. Inside our flex column that centers short titles/terms. Reset it so everything is full-width and left-aligned. */ .criteo-cards .wp-block-post > .wp-block-group > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; width: 100%; } /* Category label — small, uppercase, brand blue. */ /* --- Card eyebrow: a PILL, not a line of text ---------------------------- Criteo Brand Guidelines v5.0, Card System: the card eyebrow ("CASE STUDY" in the book) is a component — a rounded pill holding uppercase MONOSPACE — and not the bare coloured caps this used to be. Outlined on light cards, filled on dark. The Eyebrow Tags & Badges page sets the type as Hurme Mono; every section eyebrow in the book itself is drawn the same way. MONO IS A SYSTEM STACK, DELIBERATELY. Hurme Mono is licensed and not in hand, the same situation as Hurme No. 4 standing in as Manrope for body copy. Do not bundle a lookalike to close the gap — if a Hurme web licence ever lands, this one declaration and the Manrope family are the only two places that change. THE LABEL IS NAVY, NOT ORANGE, AND THAT IS A DELIBERATE DEVIATION. The book draws this pill with orange text inside an orange outline. Orange #fe5000 on white is 3.30:1 — fine for a print deck, a fail for ~11px web text against the 4.5:1 AA floor, and no amount of weight fixes it at this size. So the brand orange is carried by the OUTLINE, which is a non-text element and only needs 3:1 (it has 3.30:1), while the label keeps `primary` at 15.44:1. Same split in reverse on dark, where the book fills the pill: lavender fill 11.31:1 against the card, navy label 10.71:1 against the fill. Flex + hidden separator so a post in two categories renders two pills rather than "PILL, PILL" — core emits a `__separator` span between terms. */ .criteo-cards .wp-block-post .wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.55rem; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; } .criteo-cards .wp-block-post .wp-block-post-terms .wp-block-post-terms__separator { display: none; } .criteo-cards .wp-block-post .wp-block-post-terms a { display: inline-block; padding: 0.2rem 0.55rem; border: 1px solid #fe5000; border-radius: 999px; color: var( --wp--preset--color--primary ); text-decoration: none; transition: background-color 0.15s ease; } /* Tint rather than underline — an underline inside a pill reads as a mistake. The label stays navy on the tint (13.70:1), so the hover costs no contrast. Same idiom as the topic-rail pills further down. */ .criteo-cards .wp-block-post .wp-block-post-terms a:hover, .criteo-cards .wp-block-post .wp-block-post-terms a:focus-visible { background-color: rgba( 254, 80, 0, 0.10 ); text-decoration: none; } /* Title — clamp to 2 lines so cards in a row stay even. */ .criteo-cards .wp-block-post .wp-block-post-title { margin: 0 0 0.5rem; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* The large hero title can run longer. Dormant since 2.1.0 — kept for the rollback file; see the long note on the `.criteo-front-hero` block further down. */ .home .criteo-front-hero > .wp-block-column:first-child .wp-block-post-title, .criteo-magazine .criteo-front-hero > .wp-block-column:first-child .wp-block-post-title { -webkit-line-clamp: 3; } .criteo-cards .wp-block-post .wp-block-post-title a { color: var( --wp--preset--color--contrast ); text-decoration: none; } /* Title turns Criteo orange only when the title link itself is hovered/focused (not on whole-card hover). */ .criteo-cards .wp-block-post .wp-block-post-title a:hover, .criteo-cards .wp-block-post .wp-block-post-title a:focus { color: #fe5000; } /* Excerpt — muted grey, comfortable line-height, clamped to 3 lines. (The palette has no grey preset — tertiary is brand orange — so use a neutral here.) */ .criteo-cards .wp-block-post .wp-block-post-excerpt { margin: 0 0 0.35rem; color: rgba( 20, 23, 29, 0.66 ); } .criteo-cards .wp-block-post .wp-block-post-excerpt p { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .criteo-cards .wp-block-post .wp-block-post-excerpt .wp-block-post-excerpt__more-text { display: none; } /* Meta row (author + date) — pinned to the card bottom with a hairline, author on the left, date on the right. */ .criteo-cards .wp-block-post > .wp-block-group > .wp-block-group { margin-top: auto; padding-top: 0.85rem; border-top: 1px solid rgba( 16, 24, 40, 0.09 ); font-size: 0.8rem; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.75rem; } /* The byline (criteo/post-byline) replaced the core author-name block on cards; its styling lives in the plugin's header.css (.criteo-byline). */ /* Date is muted grey (Recap-style). The theme's tertiary preset is brand orange, so we set a neutral grey explicitly here. */ .criteo-cards .wp-block-post .wp-block-post-date, .criteo-cards .wp-block-post .wp-block-post-date time { color: rgba( 20, 23, 29, 0.55 ); white-space: nowrap; } /* The large hero card keeps a bigger title but the same card treatment. Dormant since 2.1.0 — kept for the rollback file, same reason as above. */ .home .criteo-front-hero .wp-block-post-title, .criteo-magazine .criteo-front-hero .wp-block-post-title { line-height: 1.2; } /* --- Pagination: make the current page obvious ---------------------------- */ /* --- Pagination: numbers always dead centre ------------------------------ Every template used to set `justifyContent: space-between` with nothing centring the numbers, so the numbers block landed wherever the leftover space put it — and moved when `previous` or `next` was missing. Measured across /articles/ at 1280px, the numbers' centre was 126px on page 1 (no `previous`), 655px in the middle, and 1148px on the last page (no `next`): a 1022px swing between first and last. A three-column grid with EXPLICIT `grid-column` on each child is what fixes it. Auto placement is not enough: with no `previous` element to occupy column 1, the numbers would simply flow into it and sit left again. Naming the columns pins the numbers to the centre cell whether or not their siblings render. The outer 1fr columns are equal, so the centre cell is centred in the container regardless of how wide prev/next happen to be. `.is-layout-flex` is in the selector because core ships `body .is-layout-flex { display: flex }` — specificity 0,1,1, which quietly beats a lone class at 0,1,0 and left this rule doing nothing. Same family of trap as core's `.wp-block-group.is-layout-flex > :is(*, div) { margin: 0 }` noted further up: these layout rules carry an extra element in the selector, so a plain class never wins against them. */ .wp-block-query-pagination.is-layout-flex { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; } .wp-block-query-pagination.is-layout-flex > .wp-block-query-pagination-previous { grid-column: 1; justify-self: start; margin: 0; } .wp-block-query-pagination.is-layout-flex > .wp-block-query-pagination-numbers { grid-column: 2; justify-self: center; margin: 0; } .wp-block-query-pagination.is-layout-flex > .wp-block-query-pagination-next { grid-column: 3; justify-self: end; margin: 0; } /* On a phone the three columns squeeze the numbers to nothing, so stack instead: numbers first, then prev/next side by side beneath. */ @media ( max-width: 600px ) { .wp-block-query-pagination.is-layout-flex { grid-template-columns: 1fr 1fr; row-gap: 0.85rem; } .wp-block-query-pagination.is-layout-flex > .wp-block-query-pagination-numbers { grid-column: 1 / -1; grid-row: 1; } .wp-block-query-pagination.is-layout-flex > .wp-block-query-pagination-previous { grid-column: 1; grid-row: 2; } .wp-block-query-pagination.is-layout-flex > .wp-block-query-pagination-next { grid-column: 2; grid-row: 2; } } .wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers { padding: 0.15em 0.6em; border-radius: 8px; text-decoration: none; color: var( --wp--preset--color--contrast ); } .wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers:hover { background-color: rgba( 254, 80, 0, 0.12 ); color: #fe5000; } .wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.current { font-weight: 700; color: #ffffff; background-color: var( --wp--preset--color--primary ); } /* --- The rule above the paginator ---------------------------------------- Mode-agnostic neutral, and that is the fix rather than a preference. All four listing templates used to set this border inline as `var:preset|color|contrast`, which the colour-mode toggle remaps: #000000 in light, #eef1f6 in dark. So in dark mode a near-WHITE 1px rule ran the width of the column — by far the loudest line on the page, when every other hairline in this theme is a low-alpha neutral. Fixed by giving those wrappers a `criteo-pagination` class and moving the border here. The alternative was overriding an inline style with `!important`; adding a class instead keeps the cascade honest. 0.32 alpha reads at roughly the same weight as the card hairlines in both modes, so no dark variant is needed. */ .criteo-pagination { border-top: 1px solid rgba( 127, 127, 127, 0.32 ); } /* --- Previous / Next ------------------------------------------------------ These had NO treatment at all — only grid placement — so they rendered as bare body-coloured text sitting beside the numbers, which do get a chip with padding, a radius and a hover state. Two controls doing the same job looked like one control and one sentence, and in dark mode "Next Page" was simply light grey text floating at the edge of the column. Styled as outline pills, reusing the tag-pill vocabulary further down this file (neutral border, orange on hover) rather than inventing a third idiom. Every colour is a literal or a mode-agnostic neutral: `contrast` is what caused the problem above, and `primary` never remaps, so neither is safe for chrome that sits on a surface which flips. */ .wp-block-query-pagination .wp-block-query-pagination-previous, .wp-block-query-pagination .wp-block-query-pagination-next { display: inline-flex; align-items: center; box-sizing: border-box; /* 44px touch floor, stated rather than derived: the `small` preset is fluid and bottoms out near 13.9px at 390px, where padding-only maths measured 42px. Same reasoning as the tag pills. */ min-height: 36px; padding: 0.3em 0.9em; border: 1px solid rgba( 127, 127, 127, 0.4 ); border-radius: 999px; color: inherit; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .wp-block-query-pagination .wp-block-query-pagination-previous:hover, .wp-block-query-pagination .wp-block-query-pagination-next:hover, .wp-block-query-pagination .wp-block-query-pagination-previous:focus-visible, .wp-block-query-pagination .wp-block-query-pagination-next:focus-visible { border-color: #fe5000; color: #fe5000; background-color: rgba( 254, 80, 0, 0.08 ); } .wp-block-query-pagination .wp-block-query-pagination-previous:focus-visible, .wp-block-query-pagination .wp-block-query-pagination-next:focus-visible { outline: 2px solid #fe5000; outline-offset: 2px; } @media ( max-width: 600px ) { /* Stacked below the numbers at this width, one per half-column — centre them in their own cell so the pair reads as a matched pair rather than hugging the outer edges of the page. */ .wp-block-query-pagination.is-layout-flex > .wp-block-query-pagination-previous, .wp-block-query-pagination.is-layout-flex > .wp-block-query-pagination-next { justify-content: center; min-height: 44px; } } /* --- Dark mode (criteo-header toggle sets :root[data-theme="dark"]) -------- The next two rules are the other half of the pair `.criteo-home-editorial__plate` duplicates — see the note on `.criteo-cards .wp-block-post` above. */ :root[data-theme="dark"] .criteo-cards .wp-block-post { background-color: #1c2029; border-color: rgba( 255, 255, 255, 0.08 ); box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.3 ), 0 14px 34px rgba( 0, 0, 0, 0.4 ); } :root[data-theme="dark"] .criteo-cards .wp-block-post:hover { border-color: #fe5000; box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.4 ), 0 20px 46px rgba( 0, 0, 0, 0.55 ); } :root[data-theme="dark"] .criteo-cards .wp-block-post > .wp-block-group > .wp-block-group { border-top-color: rgba( 255, 255, 255, 0.08 ); } /* The book's DARK card fills the eyebrow pill rather than outlining it — lavender ground, navy label — and that inversion is what this reproduces. It also retires #6ea8ff, a light blue that was never in the brand palette and had the same problem the mint `secondary` did in 3.10.0: a colour invented to solve a dark-mode legibility problem, when Lavender #d8d2fe was sitting in the palette doing exactly that job at 11.31:1 against the card, with the navy label at 10.71:1 on the fill. NOTE the article-header kicker still uses #6ea8ff — that one is out of scope here and is the last off-brand colour left in the theme. */ :root[data-theme="dark"] .criteo-cards .wp-block-post .wp-block-post-terms a { background-color: #d8d2fe; border-color: #d8d2fe; color: var( --wp--preset--color--primary ); } :root[data-theme="dark"] .criteo-cards .wp-block-post .wp-block-post-terms a:hover, :root[data-theme="dark"] .criteo-cards .wp-block-post .wp-block-post-terms a:focus-visible { background-color: #ffffff; border-color: #ffffff; } :root[data-theme="dark"] .criteo-cards .wp-block-post .wp-block-post-excerpt { color: rgba( 238, 241, 246, 0.66 ); } :root[data-theme="dark"] .criteo-cards .wp-block-post .wp-block-post-date, :root[data-theme="dark"] .criteo-cards .wp-block-post .wp-block-post-date time { color: rgba( 238, 241, 246, 0.55 ); } /* ========================================================================== Footer band — modelled on criteo.com's corporate footer (3.5.0). Full-bleed pale band, logo, three link columns + social icons on a four-track grid, and a copyright line. Replaced the floating navy pill that mirrored the header. THE MAJORITY OF THIS BLOCK EXISTS TO OUTRANK theme.json, not to style from scratch. Four global rules land on this footer and three of them make it unreadable; each override below names the one it is beating. Nothing needs `!important`, because theme.json's element and block styles emit at (0,0,1) or (0,1,0). EVERY SELECTOR HERE IS DELIBERATELY DOUBLED (`.criteo-footer .criteo-footer-x`) even where a single class would win on the front end, and the reason is the EDITOR. functions.php calls `add_editor_style( 'style.css' )`, and core rewrites every selector in an editor stylesheet to sit under `.editor-styles-wrapper` — which adds a class to core's rules and to ours alike. Single-class rules that beat core on order in the front end therefore TIE with it inside the canvas and lose. That was not theoretical: with `.criteo-footer-cols > *` at one class, core's flow block-gap won in the editor and columns 2-4 sat 32px below column 1 while an author was editing them, and `.criteo-footer-title`'s margin was zeroed so headings collapsed onto their lists. One extra class makes the winner the same in both places. ========================================================================== */ /* ALMOST IMPERCEPTIBLE ON PURPOSE — READ THIS BEFORE "FIXING" THE CONTRAST. This shipped at #E3E9F6 with a 0.32-alpha hairline, chosen so the band was clearly visible on both page backgrounds, and that was REJECTED on review: the brief is that you should barely be able to tell where the footer starts, so it sits quietly with the rest of the page instead of announcing itself as a separate slab. So the values below are deliberately at the bottom of the perceptible range, and the measurements are recorded so nobody re-derives them as a bug: #F6F9FE vs #f3f4f6 (body.home/.blog/.archive/.search) 1.04:1 #F6F9FE vs #ffffff (single/page templates) 1.06:1 #171A20 vs #14171d (dark page) 1.05:1 1.04:1 IS the intent, not an oversight — it is the same number the note on the 2.7.1 gradient wash at the top of this file calls "effectively invisible", which there was a defect and here is the requirement. Nothing about text legibility rides on it: contrast/black on this band still measures 19.9:1. A happy side effect is that #F6F9FE is now criteo.com's actual footer colour, so the light mode matches the corporate original exactly. AND THERE IS NO BORDER. A 1px hairline was the single most noticeable thing about the old treatment — it drew the exact line the brief asks not to draw. The boundary is now carried only by the band's own faint tint and the 64px of top padding. If a whisper of an edge is ever wanted back, the cheapest version is `border-top: 1px solid rgba(127,127,127,0.10)`, not the 0.32 this replaced. */ .criteo-footer { background-color: #F6F9FE; } .criteo-footer .criteo-footer-inner { box-sizing: border-box; /* Deliberately NOT the header pill's `calc(100% - 4rem)`. That 4rem exists because the pill animates `width` on scroll and needed a value to animate between; a full-bleed band has no such constraint and should instead line up with the page's own content edge, which is the root padding. Copying the pill's 4rem would leave the footer up to 1rem wider per side than the cards above it, between roughly 600px and 1400px. */ width: min( var( --wp--style--global--wide-size, 1332px ), calc( 100% - 2 * var( --wp--style--root--padding-right, 2rem ) ) ); margin-inline: auto; } /* --- Links ---------------------------------------------------------------- WITHOUT THIS RULE EVERY FOOTER LINK IS ORANGE AND HOVERS TO LOW-CONTRAST. theme.json's `styles.elements.link` sets `color: tertiary` (#fe5000) with a `:hover` of `secondary`, which is right for links in running prose on white and wrong for a 13-item footer directory: measured on the #F6F9FE band that is 3.13:1 at rest, under the 4.5:1 AA floor for body text. That number is unchanged from the earlier, darker #E3E9F6 band — near-white is near-white as far as orange is concerned — so re-tinting the band does not let this override be dropped. The hover half of that used to be far worse. Until 3.10.0 `secondary` was #00eaa0, a mint that measured 1.50:1 here and 1.58:1 on white — pointing at a link all but erased it — and that was on top of it being absent from the brand palette entirely. It is now Electric Blue #3d1ef8, which is 7.67:1 on white, so article-prose link hover clears AA on its own for the first time. This footer override survives that fix because it exists for the REST colour, not the hover. Routed through `contrast` rather than a literal #000 on purpose — the colour toggle remaps `contrast` to #eef1f6, so dark mode inherits 14.4:1 from this one declaration and needs no override of its own. That is the mirror image of the warning at `.criteo-pagination`: `contrast` is the wrong choice for *chrome* on a flipping surface, and exactly the right one for *text* on it. The orange stays, as the hover — matching the tag pills and the pagination arrows, and measuring 4.94:1 on the dark band. */ .criteo-footer a { color: var( --wp--preset--color--contrast ); text-decoration: none; } .criteo-footer a:hover, .criteo-footer a:focus-visible { color: #fe5000; text-decoration: underline; text-underline-offset: 2px; } /* --- Column headings ------------------------------------------------------ Beating two theme.json element rules: `elements.heading` sets `font-weight: 800` and `elements.h2` the fluid `large` size, both of which are page-heading values that would make four column labels shout. criteo.com separates headings from links by ONE weight step (500 vs 400) at the same 16px. This theme's body weight is already 500, so the same one-step relationship lands on 600 against 400 here; both are in the bundled Manrope set. `h2` is kept as the tag for document outline, and restyled rather than downgraded to a paragraph. */ .criteo-footer .criteo-footer-title { margin: 0 0 1.5rem; font-size: var( --wp--preset--font-size--small ); font-weight: 600; line-height: 1.3; } /* --- Link lists ----------------------------------------------------------- DOUBLED CLASS, and it is load-bearing: theme.json's `blocks."core/list"` sets `padding-left: var(--wp--preset--spacing--40)` and emits it as `:root :where(.wp-block-list)` at (0,1,0) — a genuine tie with a single `.criteo-footer-links`. style.css does print after global styles, so a tie would resolve our way today, but this file's own rule is not to depend on that (see the note on `.criteo-cards-duo .criteo-byline`). */ .criteo-footer .criteo-footer-links { margin: 0; padding-left: 0; list-style: none; } .criteo-footer .criteo-footer-links li { margin-bottom: 1rem; /* SAME SIZE AS THE HEADING, differing only in weight — that is the whole of criteo.com's hierarchy here (16px/500 over 16px/400) and it needs stating explicitly: the list otherwise inherits the theme's `medium` body size and rendered at 20px against 16.7px headings, i.e. links LOUDER than the labels grouping them. Measured in the browser, not assumed. */ font-size: var( --wp--preset--font-size--small ); /* 400 against the heading's 600. Body weight here is 500, so this is a deliberate step DOWN — without it the one-step separation collapses. */ font-weight: 400; line-height: 1.3; } .criteo-footer .criteo-footer-links li:last-child { margin-bottom: 0; } /* --- Social icons --------------------------------------------------------- WITHOUT THIS RULE THE FOUR ICONS ARE LINKEDIN-BLUE, BLACK, YOUTUBE-RED AND ONE UNCOLOURED. The pattern deliberately omits `iconColor`/`iconColorValue` (those emit an inline `style="color:..."` per
  • that no stylesheet can override, which is fine on a permanently navy pill and impossible on a surface that flips), so core's `is-style-logos-only` per-service colours apply instead. Those are `:where()`-wrapped at (0,1,0); this is (0,2,0) and takes all of them, including the `feed` service for which core ships no colour rule at all. `inherit` rather than a colour: the icons then track the footer text through `contrast` and need no dark-mode variant. The
  • is the right target because core sets the anchor and its svg to `fill/color: currentColor` at (0,4,0), so colour has to arrive by inheritance from here. */ .criteo-footer .wp-block-social-link { color: inherit; } .criteo-footer .wp-block-social-link:hover { color: #fe5000; } /* --- The column grid ----------------------------------------------------- criteo.com's four 25% tracks with a 30px gutter. Three hold link columns and the fourth the social icons — which is where the corporate site puts them, under the Contact Sales button that was dropped here, so nothing is left empty. A fourth link column added later lands in that track and the grid simply grows a fifth on the next row. `minmax(0, 1fr)` rather than `1fr`: a bare `1fr` floors at min-content, so a long unbroken link label ("Terms and Conditions") would widen its own track and unbalance the row. */ .criteo-footer .criteo-footer-cols { display: grid; grid-template-columns: 1fr; gap: 2.5rem 1.875rem; margin-top: 3.5rem; } /* Core's flow-layout block gap — `:root :where(.is-layout-flow) > *` with a `margin-block-start` — lands on each grid child and pushes columns 2, 3 and 4 down inside their own cells, so the row arrives visibly stepped. Zeroing it here is what keeps the four column tops level. */ .criteo-footer .criteo-footer-cols > * { margin-block-start: 0; } @media ( min-width: 576px ) { .criteo-footer .criteo-footer-cols { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } @media ( min-width: 992px ) { .criteo-footer .criteo-footer-cols { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } } /* Right-aligned in the fourth track, as on criteo.com. Below the four-track breakpoint the icons share a row with a link column, where hard-right reads as detached — so they go back to the left edge and line up with everything else. `justify-content` is overridden rather than the block's attribute changed, because `is-content-justification-right` is a render-time class the editor owns. */ .criteo-footer .criteo-footer-social { /* ALIGNED TO THE TOP OF THE ROW, level with the column headings. As a grid item the