/* ===================================================================================================== Client brand colours, v1. Pixel, desk 10, brief MK6 (Brain ruling NN, 06-11-2026). FOR RULING. Mockup: P:\SIG\02 Franco-Media\Agents\Pixel\TEMPLATE - Client brand colours, Siam Bike Tours v1 (06-11-2026).html Loads AFTER: TEMPLATE - Boxes and contact form v4, CSS for Nick (06-11-2026).css (it changes nothing in it). Ships with N46i (the colours) and N46j (the two small fixes of part B). --------------------------------------------------------------------------------------------------- PART A. A client profile may carry the client's own two brand colours (ruling NN, general rule). The rubrique accent stays the default: a profile with no brand colour changes by not one pixel. --------------------------------------------------------------------------------------------------- The two optional profile fields (hex, six digits, with or without the hash): gpcf_brand_1 the deep colour. Takes the role of --acc-deep: primary buttons, headings and links in the accent, chips, the open tab, the contact card, the heading strip of the form, and the start of the gradient panels. gpcf_brand_2 the warm colour. Takes the role of --panel-warm: the button on a gradient panel (white text, 2 px white line, as MK2 v4 rule 3). gpcf_brand_2 alone does nothing. gpcf_brand_1 alone changes the deep role only and the panel button keeps the palette warm tone. What Nick prints (PHP, in gpcf_body_accent_attr(), where the body style attribute is built today): - No valid gpcf_brand_1: nothing new, the rubrique pair --acc and --acc-tint is printed as today. - A valid gpcf_brand_1: the rubrique pair is NOT printed. The body style carries two properties, --brand-1 and --brand-2 (the second only when gpcf_brand_2 is valid), each a six digit hex, after the contrast guard below. Nothing else is written, and only on that profile page. The contrast guard (Nick builds it in PHP, one small function, run when the page prints): 1. Reject a value that is not six hex digits (a bad value is ignored, the page keeps its rubrique accent). 2. gpcf_brand_1 must give 4.5:1 or more on both white and on its own 12 percent tint (the chip ground, defined in this file as --acc-tint). The test is the lower of the two ratios. gpcf_brand_2 must give 4.5:1 or more against white (the label of the panel button). 3. A colour that passes is printed as it is. A colour that fails is mixed with the ink colour of the palette (--os-ink-black) in steps of 4 percent ink until the first shade that passes; that shade is printed. Both values, the client's and the guarded one, are in the mockup, section 2. 4. The hover shade (--acc-darker) is derived in CSS below, 80 percent of the deep colour with 20 percent ink, as in MK2 v4. A deep colour that passes the guard keeps its hover shade above 4.5:1. The mockup's contrast table gives the arithmetic (WCAG relative luminance), computed, not typed. Everything below is variables on the page root, so every MK2 v4 rule applies unchanged. The selectors beat j6.css section 0 (one attribute) and the v4 warm tone on body (one type) by one more simple selector, never by a flag. Tokens of tokens.css only: no hex, no important flag, no new font, no new token (--brand-1 and --brand-2 are the two inputs the profile fields set, not tokens of the palette). ===================================================================================================== */ body[style*="--brand-1:"]{ --acc:var(--brand-1); --acc-tint:color-mix(in srgb,var(--brand-1) 12%,var(--os-card)); --acc-deep:var(--brand-1); --acc-darker:color-mix(in srgb,var(--acc-deep) 80%,var(--os-ink-black)); --acc-wash:color-mix(in srgb,var(--brand-1) 7%,var(--os-card)); --acc-line:color-mix(in srgb,var(--brand-1) 24%,var(--os-line)); } body[style*="--brand-1:"][style*="--brand-2:"]{ --panel-warm:var(--brand-2); } /* ===================================================================================================== PART B. Two small fixes seen on the Siam Bike Tours profile at 390 px, for N46j. ===================================================================================================== */ /* B1. The Contact accordion under the lead sat against the text, on every page that prints it (every client profile and service page, not only this one): the button is printed right after the lead paragraph, with no margin. One gap above it, the same gap as between two text blocks, and a small one below the open panel. The selector is not tied to .desc or to a template, so every page is covered. A phone only: the button does not print above 768 px. */ @media (max-width:768px){ body .contact-btn{ margin-top:var(--space-9); } body .gpcf-ccpanel{ margin-bottom:var(--space-3); } } /* B2. The offer cards get a "Voir les détails" secondary button at the foot of each card (EN "See details", RU "Подробнее"). The link per card is written later by Nick; until a card has a link the button is not printed. Markup, last child of .gpcf-offer__bd: Voir les détails The card becomes a column so the button sits at the foot of every card of a row, whatever the text length. The button is the secondary button of MK2 v4 (white ground, a hairline and the text in --acc-deep, hover a light wash and --acc-darker, golden focus ring); this block only places it. */ .gpcf-offers .gpcf-offer{ display:flex; flex-direction:column; } .gpcf-offers .gpcf-offer .gpcf-offer__bd{ display:flex; flex:1 1 auto; flex-direction:column; } .gpcf-offers .gpcf-offer .gpcf-offer__bd > p:last-of-type{ margin-bottom:auto; } .gpcf-offers .gpcf-offer .gpcf-offer__more{ display:flex; align-items:center; justify-content:center; align-self:stretch; min-height:var(--tap-comfortable); margin-top:var(--space-9); text-align:center; text-decoration:none; } /* n46.css still sets white text on any a.btn-secondary inside .desc (the old filled recipe), and that rule is one class stronger than the v4 secondary. The text colour is therefore restated here, one class stronger again, for this button only. Hover and focus follow the v4 secondary (wash, darker frame, darker text). */ .gpcf-offers .gpcf-offer a.btn-secondary.gpcf-offer__more, .gpcf-offers .gpcf-offer a.btn-secondary.gpcf-offer__more:visited{ color:var(--acc-deep,var(--os-link)); } .gpcf-offers .gpcf-offer a.btn-secondary.gpcf-offer__more:hover, .gpcf-offers .gpcf-offer a.btn-secondary.gpcf-offer__more:focus, .gpcf-offers .gpcf-offer a.btn-secondary.gpcf-offer__more:focus-visible{ color:var(--acc-darker,var(--os-link-hover)); }