/* ===================================================================================================== N46k fixes v4. Pixel, desk 10, for Brain's N46k CSS round, ruling OG (v4 on top of v3, accepted; v3 on OF, v2 on OD5, v1 on OD3). Mockup: P:\SIG\02 Franco-Media\Agents\Pixel\TEMPLATE - N46k fixes v4 (08-11-2026).html Report: P:\SIG\02 Franco-Media\Agents\Pixel\DONE - N46k fixes v4 (08-11-2026).md v1 stays as the base (parts 1 to 5). v2 changed one v1 line (see part 1) and added parts 6 to 9. v3 changed parts 8 and 9 (OF); v4 changes one line of part 8 (OG: the hero-v3 hover label is white). The file REPLACES v3, v2 and v1: load this one alone, never with another version. v1 1. CTA logo tile, 64 px desktop and 48 px phone, white tile (NW1) 2. Section H2 in --acc-deep (NV2 2) 3. CTA heading wrap (NW2) 4. About figure, 2 / 3 (NT2 6) 5. Hub post-grid button, secondary (OB8) v2 6. Wide logo tile above the heading on a phone, class is-wide (OD5 a) 7. Contact card heading "Appelez directement" (OD5 b) 8. Hub hero button, pill, three variants hero-v1, hero-v2, hero-v3 (OC5, item 6; OF) 9. Back button in the header band, rusty spice (OC7, item 7; OF, option B) Tokens of tokens.css only: no hex, no important flag, no new token, no new font. A raw length is used only where a brief gives it (64, 48, 19 px, the label size) or for the width caps of the tile. LOAD ORDER (unchanged): last of all, after n46j.css, which is after n46j-brand.css (MK6), n46i-boxes.css (MK2 v4 and MK5 v2), n46i-banyan.css (MK3 v2), n46i-ticker.css and n46h-band.css (MK4). Every rule starts with body or an id, or carries one more class than the rule it replaces. ===================================================================================================== */ /* ----- 1. CTA block: the client logo tile (NW1) ----------------------------------------------------- */ /* Before: a 200 by 120 tile (160 by 96 on a phone) with a logo up to 168 by 88 inside it. Now the tile follows the logo: the picture is capped at 64 px high (48 px on a phone) and 200 px wide, and the tile is the picture plus its padding. White ground, the card radius, no frame (MK2 v4 already removes it). */ body aside.gpcf-cta .gpcf-cta__logo{ box-sizing:border-box; display:grid; grid-template-columns:auto; grid-template-rows:auto; place-items:center; width:auto; height:auto; max-width:100%; padding:var(--space-5) var(--space-7); background:var(--os-card); border:0; border-radius:var(--radius-card); overflow:hidden; } body aside.gpcf-cta .gpcf-cta__logo img{ display:block; width:auto; height:auto; min-width:0; min-height:0; max-width:200px; max-height:64px; margin:0; object-fit:contain; } /* A white logo (gpcf_logo_on_dark) stands on the panel itself, as MK2 v4 has it; it keeps the same size cap. */ body aside.gpcf-cta .gpcf-cta__logo.is-dark{ background:none; border:1px solid var(--on-dark-border); } /* ----- 3. CTA heading and its tile (NW2) --------------------------------------------------------------- */ /* The text cell may shrink below its content so the heading wraps in its own column instead of pushing the tile out; balance keeps the lines of equal length (no one-word last line), and a name longer than the column breaks. */ body aside.gpcf-cta .gpcf-cta__txt{ min-width:0; } body aside.gpcf-cta .gpcf-cta__txt p.gpcf-cta__t{ min-width:0; overflow-wrap:break-word; hyphens:manual; text-wrap:balance; } body aside.gpcf-cta .gpcf-cta__txt p.gpcf-cta__l{ overflow-wrap:break-word; text-wrap:pretty; } @media (max-width:768px){ /* The tile stays beside the heading, smaller: 48 px high logo, a narrower cap so a wide logo does not take the column, the margin MK2 v4 gives the tile kept. */ /* n46f.css gives the tile order:-1 on a phone. On the form block that put it before the heading strip (::before of MK2 v4) in paint order, so the strip covered it: the tile was there and measured, but not visible. Order 0 paints it on the strip. v2: the order line is now for the form block only (.gpcf-cta--form). In v1 it was on every .gpcf-cta, which moved the logo of the article CTA (no strip, logo above the text) below the text on a phone. v2 also sets justify-self:start: a tile with width auto would otherwise stretch over the whole row of the one-column article CTA. */ body aside.gpcf-cta .gpcf-cta__logo{ justify-self:start; padding:var(--space-4) var(--space-5); } body aside.gpcf-cta.gpcf-cta--form .gpcf-cta__logo{ order:0; } body aside.gpcf-cta .gpcf-cta__logo img{ max-width:104px; max-height:48px; } } /* ----- 2. Section H2 of a client profile (NV2 2) -------------------------------------------------------- */ /* Offers, About, gallery, related articles: the deep colour of the page. A rubrique page has --acc-deep from j6.css, a page with gpcf_brand_1 has the brand colour (n46j-brand.css), a page with neither falls back to the heading ink it has today. One class more than n46f.css (".main .gpcf-about h2") and than n46g.css. Fact lines, body text and the H2 written inside the body by the editor (inline colour) are not touched. */ body .main :is(.gpcf-offers,.gpcf-about,.gpcf-gal,.prel) > h2{ color:var(--acc-deep,var(--os-heading)); } /* ----- 4. About figure (NT2 6) ----------------------------------------------------------------------------- */ /* n46j.css is kept as built: the grid of 160 px (96 px under 600 px), the gap, the vertical centring, the card radius. Added: the portrait is always 2:3. Without it the height followed the uploaded file (a square or landscape file made a 160 by 160 or 160 by 107 figure beside a 132 px paragraph). The picture is cropped to the frame, not stretched. */ .main .gpcf-about .gpcf-about__fig img{ aspect-ratio:2 / 3; object-fit:cover; object-position:center top; } /* ----- 5. Hub post grid: the card button (OB8) ------------------------------------------------------------- */ /* Markup read on the live EN, FR and RU sports hubs (the same on all three): a WPBakery post grid. .vc_grid-item .vc_gitem-zone-c .wpb_btn-container > a.wpb_btn.wpb_btn-style-gradient-custom (icon fa-eye + label) The theme did not style it, so it printed WPBakery's own 80 by 20 px turquoise and green gradient link with an underline. It becomes the secondary button of MK2 v4, shape and size of .btn-secondary (n46.css): white ground, an accent hairline, the text in --acc-deep, hover and focus a light wash with the darker frame and text, golden focus ring. The gradient is a rule of the generated per-button class, so the selector carries four classes. */ body .vc_grid-item .wpb_btn-container{ margin-top:var(--space-7); } body .vc_grid-item .wpb_btn-container a.wpb_btn.wpb_btn-style-gradient-custom, body .vc_grid-item .wpb_btn-container a.wpb_btn.wpb_btn-style-gradient-custom:visited{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3); box-sizing:border-box; min-height:var(--tap-comfortable); padding:var(--space-3) var(--space-12); background-color:var(--os-card); background-image:none; border:1px solid var(--acc-deep,var(--os-link)); border-radius:var(--radius-sm); box-shadow:none; color:var(--acc-deep,var(--os-link)); font-family:var(--font-body); font-weight:var(--weight-bold); font-size:var(--size-body); line-height:1.2; text-decoration:none; transition:background-color var(--duration-base) var(--ease); } body .vc_grid-item .wpb_btn-container a.wpb_btn.wpb_btn-style-gradient-custom:hover, body .vc_grid-item .wpb_btn-container a.wpb_btn.wpb_btn-style-gradient-custom:focus, body .vc_grid-item .wpb_btn-container a.wpb_btn.wpb_btn-style-gradient-custom:focus-visible{ background-color:var(--acc-wash,var(--os-tint)); background-image:none; border-color:var(--acc-darker,var(--os-link-hover)); color:var(--acc-darker,var(--os-link-hover)); text-decoration:none; } body .vc_grid-item .wpb_btn-container a.wpb_btn.wpb_btn-style-gradient-custom:focus-visible{ outline:3px solid var(--os-cta); outline-offset:3px; } body .vc_grid-item .wpb_btn-container a.wpb_btn .wpb_btn-icon{ color:inherit; } /* ----- 6. Wide logo tile above the heading on a phone (OD5 a) ---------------------------------------------- */ /* Nick's N46k adds the class is-wide on .gpcf-cta__logo when the logo attachment is at least twice as wide as high. Without the class nothing below applies and nothing changes. On a phone the is-wide tile takes its own row above the heading, left aligned, and the heading, the line and the form take the full width. The strip (::before of MK2 v4) spans the two rows; the form moves to the third. The tile is 48 px high as in part 1 and up to 160 px wide. */ @media (max-width:768px){ #contact#contact.gpcf-cta--form:has(.gpcf-cta__logo.is-wide)::before{ grid-row:1 / 3; } #contact#contact.gpcf-cta--form .gpcf-cta__logo.is-wide{ grid-column:1 / -1; grid-row:1; justify-self:start; margin:var(--space-9) var(--space-8) 0; } body aside.gpcf-cta .gpcf-cta__logo.is-wide img{ max-width:160px; } #contact#contact.gpcf-cta--form:has(.gpcf-cta__logo.is-wide) .gpcf-cta__txt{ grid-column:1 / -1; grid-row:2; padding-top:var(--space-6); } #contact#contact.gpcf-cta--form:has(.gpcf-cta__logo.is-wide) .gpcf-cta__form{ grid-row:3; } } /* ----- 7. Contact card heading "Appelez directement" (OD5 b) ---------------------------------------------- */ /* The card title of the contact card takes --acc-deep, as every section heading (NV2 2): in the rail of a profile, in the rail of a client article (.sigrail) and in the phone panel. Brain's ruling says white inside the phone panel; the panel card is a white card (MK2 v4, section 1), so white would not show. It keeps the deep colour there, which is what it already shows on live (n46.css colours H2 inside .desc). Said in the report. Fallback: the heading ink. */ body :is(.rail,.sigrail,.gpcf-ccpanel) .ccard h2{ color:var(--acc-deep,var(--os-heading)); } /* ----- 8. Hub hero button (OC5, item 6; OF: three variants) -------------------------------------------------- */ /* Markup read on live (EN hub, 08-11-2026): header.pagehead.pagehead-photo.pagehead-hub > .wrap > a.cta.cta--accent ("Advertise with us" and its FR and RU twins) with a send icon in span.ico. A pill, the width of its label (it was 100 % wide on a phone), centred on a phone, the white gap line of every primary button. Nick's N46k puts ONE class on header.pagehead-hub, fixed per hub (the FR, EN and RU twins share it): hero-v1 deep teal (--os-dark-teal), white label, 7.4:1 hero-v2 mid turquoise (--os-dark-cyan), white label, 3.4:1: passes only as large text, so the label of ALL three variants is bold at 19 px (bold counts as large from 14 pt = 18.67 px) hero-v3 golden (--os-cta), ink label (--os-cta-ink) at rest; hover and focus as the band button of ruling NI: --os-cta-hover ground, WHITE label (--on-dark, 3.9:1, bold 19 px is large text, 3:1 floor). White on the golden is 2.3:1 and fails even as large text, hence the ink at rest. Desktop only: on a phone (max-width 768 px) hero-v3 renders as hero-v1. No class at all: the pill is hero-v1. Hover and focus: the ground 80 % with 20 % ink (v1, v2). */ body .pagehead.pagehead-hub a.cta.cta--accent{ box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-4); width:auto; max-width:100%; min-height:var(--tap-comfortable); padding:var(--space-3) var(--space-11); background-color:var(--os-dark-teal); background-image:none; border:0; border-radius:var(--radius-pill); color:var(--on-dark); font-size:19px; font-weight:var(--weight-bold); text-decoration:none; box-shadow:0 0 0 2px var(--on-dark); } body .pagehead.pagehead-hub a.cta.cta--accent:hover, body .pagehead.pagehead-hub a.cta.cta--accent:focus-visible{ background-color:color-mix(in srgb,var(--os-dark-teal) 80%,var(--os-ink-black)); color:var(--on-dark); text-decoration:none; box-shadow:0 0 0 2px var(--on-dark); } body .pagehead.pagehead-hub a.cta.cta--accent:focus-visible{ outline:3px solid var(--os-cta); outline-offset:6px; } body .pagehead.pagehead-hub a.cta.cta--accent svg{ stroke:currentColor; } /* hero-v2: mid turquoise, white label (one more class than the rules above) */ body .pagehead.pagehead-hub.hero-v2 a.cta.cta--accent{ background-color:var(--os-dark-cyan); } body .pagehead.pagehead-hub.hero-v2 a.cta.cta--accent:hover, body .pagehead.pagehead-hub.hero-v2 a.cta.cta--accent:focus-visible{ background-color:color-mix(in srgb,var(--os-dark-cyan) 80%,var(--os-ink-black)); } /* hero-v3: golden, ink label, desktop only */ @media (min-width:769px){ body .pagehead.pagehead-hub.hero-v3 a.cta.cta--accent{ background-color:var(--os-cta); color:var(--os-cta-ink); } body .pagehead.pagehead-hub.hero-v3 a.cta.cta--accent:hover, body .pagehead.pagehead-hub.hero-v3 a.cta.cta--accent:focus-visible{ background-color:var(--os-cta-hover); color:var(--on-dark); } body .pagehead.pagehead-hub.hero-v3 a.cta.cta--accent:focus-visible{ outline-color:var(--on-dark); } } @media (max-width:768px){ body .pagehead.pagehead-hub a.cta.cta--accent{ display:flex; width:fit-content; margin-left:auto; margin-right:auto; } } /* ----- 9. Back button in the header band (OC7, item 7; OF: option B) -------------------------------------- */ /* Fabrice picked option B: the rusty spice fill (--os-rusty-spice), white bold label at the current 14 px (white on it 5.52:1, normal text passes). The border takes the fill. Hover and focus: the spice 80 % with 20 % ink, the border the same as the fill. No svg rule: the arrow keeps its size. */ body .gpcf-hband .gpcf-back{ background-color:var(--os-rusty-spice); border-color:var(--os-rusty-spice); color:var(--on-dark); } body .gpcf-hband .gpcf-back:hover, body .gpcf-hband .gpcf-back:focus-visible{ background-color:color-mix(in srgb,var(--os-rusty-spice) 80%,var(--os-ink-black)); border-color:color-mix(in srgb,var(--os-rusty-spice) 80%,var(--os-ink-black)); color:var(--on-dark); }