/** * AquaGones: site palette "Bleu du logo" (client decision of 2026-10-09). * * Logo blue #00508A (dark #003C68) as primary AND accent: no orange left. * Red #C8102E for the hairline and the required-field asterisks, #D61F35 for * the small marks (readable on the dark cards too). Hero cards and footer in * #0A2236, cool canvas #F2F7FB. Measured 0 AA failure on 2026-10-03. * * This sheet is the former "bc" palette of the preview palette picker, made * permanent: same rules, same values, the picker attribute on * dropped. Enqueued right after extras.css (functions.php), so it wins ties. * * SPECIFICITY. Every selector keeps the specificity it had under the picker, * so the cascade against extras.css is unchanged: * - rules of the "bc" palette only: :root + 1 attribute (0,2,0) -> `:root:root` * - shared layer of the picker: :root + 2 attributes (0,3,0) -> `:root:root:root` * Do not "simplify" these prefixes to a single `:root`: some component rules * of extras.css would then win again. * * Theme.json presets carry the same hex (settings.color.palette), so the * block editor shows these colours; the preset block below stays as a guard. * * Role variables (read by the component rules below): * --aqg-pal-hero hero card (home, service, town and archive heroes) * --aqg-pal-glow halo inside the hero card * --aqg-pal-bar 5px band under the hero card and on top of the * quote block (transparent = none) * --aqg-pal-btn main button ON THE HERO, -ink its text, -hover * --aqg-pal-fill-ink text on an `accent` fill (buttons on light * backgrounds, header pill, call bar, badges) * --aqg-pal-side "Nous joindre" card and service hero side card, * -ink its text, -veil its badge veil, -shadow * --aqg-pal-form big quote block, -ink its text * --aqg-pal-submit form submit button, -ink, -hover * --aqg-pal-req required-field asterisks (on white) * --aqg-pal-mark small accent marks on light backgrounds (icons, * chips, stars, FAQ "+", numbered cards) * --aqg-pal-foot footer background * --aqg-pal-lis1/lis2 two-tone hairline (top of page, top of footer) * --aqg-pal-nav header pill background (opaque, then blurred) * * Contrast (WCAG AA) is checked by `npm run a11y:contraste`. * * @package AquaGones */ /* ========================================================================== 1. Values ========================================================================== */ :root:root { --wp--preset--color--primary: #00508A; --wp--preset--color--primary-dark: #003C68; --wp--preset--color--primary-light: #5CC0F2; --wp--preset--color--accent: #00508A; --wp--preset--color--accent-dark: #003C68; --wp--preset--color--accent-light: #FF8080; --wp--preset--color--ink-deep: #0A2236; --wp--preset--color--surface: #F7FAFC; --aqg-page: #F2F7FB; --aqg-border-warm: #DDE6EE; --aqg-border-warm-2: #E5ECF2; --aqg-input-bg: #F2F7FB; --aqg-input-border: #7D8696; --aqg-brand: #5C6670; --aqg-ico-orange: linear-gradient(135deg, #FDEDEF, #F9D6DB); --aqg-pal-hero: #0A2236; --aqg-pal-glow: #0067A8; --aqg-pal-bar: transparent; --aqg-pal-btn: #FFFFFF; --aqg-pal-btn-ink: #00508A; --aqg-pal-btn-hover: #EEF2FA; --aqg-pal-fill-ink: #FFFFFF; --aqg-pal-side: #00508A; --aqg-pal-side-ink: #FFFFFF; --aqg-pal-side-veil: rgba(0, 0, 0, .22); --aqg-pal-side-shadow: rgba(0, 80, 138, .5); --aqg-pal-form: #00508A; --aqg-pal-form-ink: #FFFFFF; --aqg-pal-submit: #00508A; --aqg-pal-submit-ink: #FFFFFF; --aqg-pal-submit-hover: #003C68; --aqg-pal-req: #C8102E; /* #C8102E would fall to 2,76:1 on the dark cards: #D61F35 (3,17:1 there, 3,82:1 on its tile, 5,11:1 on white). */ --aqg-pal-mark: #D61F35; --aqg-pal-foot: #0A2236; --aqg-pal-lis1: #0067A8; --aqg-pal-lis2: #C8102E; --aqg-pal-nav: rgba(255, 255, 255, .96); --aqg-pal-nav-blur: rgba(255, 255, 255, .86); } /* ========================================================================== 2. Component overrides ========================================================================== */ /* Page canvas. theme.json writes it on `body` (styles.color.background) and extras.css repeats it from --aqg-page: both are covered here. */ :root:root:root body { background-color: var(--aqg-page); } /* Two-tone hairline. */ :root:root:root body::before, :root:root:root .aqg-footer::before { background: linear-gradient(to bottom, var(--aqg-pal-lis1) 0 3px, var(--aqg-pal-lis2) 3px 6px); } /* Header pill: cool white. */ :root:root:root .aqg-navpill, :root:root:root .aqg-navpill.is-scrolled { background: var(--aqg-pal-nav); } @media (min-width: 901px) { :root:root:root .aqg-navpill { background: var(--aqg-pal-nav-blur); } } /* Text on an accent fill: core buttons without a light, outline, ghost, green or blue variant (they set their own colours), header pill, mobile sheet action, call bar, badge. */ :root:root:root .wp-block-button:where(:not(.aqg-btn-light, .aqg-btn-outline, .aqg-btn-phone--ghost, .aqg-btn-green, .aqg-btn-blue)) > .wp-block-button__link, :root:root:root .aqg-nav__act--devis, :root:root:root .aqg-badge--spec, :root:root:root .aqg-callbar { color: var(--aqg-pal-fill-ink); } /* Hero cards (home, service sheets, towns, archives). */ :root:root:root .aqg-hero__main, :root:root:root .aqg-phero__main { background: var(--aqg-pal-hero); box-shadow: inset 0 -5px 0 var(--aqg-pal-bar); } :root:root:root .aqg-hero__glow, :root:root:root .aqg-phero__glow { background: radial-gradient(circle, var(--aqg-pal-glow) 0%, transparent 66%); } /* Main button of the hero cards (and of the dark "feature" card). */ :root:root:root .aqg-btn-accent > .wp-block-button__link { background: var(--aqg-pal-btn); color: var(--aqg-pal-btn-ink); } :root:root:root .aqg-btn-accent > .wp-block-button__link:hover, :root:root:root .aqg-btn-accent > .wp-block-button__link:focus-visible { background: var(--aqg-pal-btn-hover); color: var(--aqg-pal-btn-ink); } /* "Nous joindre" card (home) and side card of the service heroes. */ :root:root:root .aqg-hero__urgence, :root:root:root .aqg-phero__side { background: var(--aqg-pal-side); color: var(--aqg-pal-side-ink); } :root:root:root .aqg-hero__urgence:hover { box-shadow: 0 24px 44px -26px var(--aqg-pal-side-shadow); } :root:root:root .aqg-hero__urgence-badge, :root:root:root .aqg-phero__side-badge { background: var(--aqg-pal-side-veil); color: var(--aqg-pal-side-ink); } :root:root:root .aqg-hero__urgence-title, :root:root:root .aqg-hero__urgence-text, :root:root:root .aqg-phero__side-title, :root:root:root .aqg-phero__side-text { color: var(--aqg-pal-side-ink); } /* Big quote block (pattern cta-contact). The white form card inside keeps its own colours. */ :root:root:root .aqg-cta { background: var(--aqg-pal-form); box-shadow: inset 0 5px 0 var(--aqg-pal-bar); } :root:root:root .aqg-cta__body, :root:root:root .aqg-cta__body h2, :root:root:root .aqg-cta__lead, :root:root:root .aqg-cta__phone a, :root:root:root .aqg-cta__line, :root:root:root .aqg-cta__line a { color: var(--aqg-pal-form-ink); } /* Form submit button. */ :root:root:root .aqg-form__submit { background: var(--aqg-pal-submit); color: var(--aqg-pal-submit-ink); } :root:root:root .aqg-form__submit:hover, :root:root:root .aqg-form__submit:focus-visible, :root:root:root .aqg-form__submit:disabled, :root:root:root .aqg-form__submit[aria-disabled="true"] { background: var(--aqg-pal-submit-hover); color: var(--aqg-pal-submit-ink); } /* Required-field asterisks. */ :root:root:root .aqg-form__field .aqg-req { color: var(--aqg-pal-req); } /* Small accent marks on light backgrounds: the accent token is a FILL here (blue), too close to the text as ink. */ :root:root:root .aqg-hero__chip--2, :root:root:root .aqg-service-card__chip--accent, :root:root:root .aqg-ico--orange, :root:root:root .aqg-faq__item summary::after { color: var(--aqg-pal-mark); } :root:root:root .aqg-avis-card__note::before { background: var(--aqg-pal-mark); } :root:root:root .aqg-arg--accent { border-top-color: var(--aqg-pal-mark); } :root:root:root .aqg-arg--accent .aqg-arg__num { color: #F2F4F8; } /* Process frieze: the accent dot carries a number, so it is a fill. */ :root:root:root .aqg-step__dot--accent { color: var(--aqg-pal-fill-ink); box-shadow: 0 8px 18px -8px rgba(13, 34, 51, .45); } /* Footer. */ :root:root:root .aqg-footer { background: var(--aqg-pal-foot); } /* Home hero button: white and slightly larger. */ :root:root .aqg-hero__cta .aqg-btn-accent > .wp-block-button__link { font-size: 17px; padding: 18px 32px; } /* Body links in anthracite. Same specificity as the theme.json rule (a:where(:not(.wp-element-button))), printed after it: every component rule that colours its own links still wins. */ a:where(:not(.wp-element-button)) { color: #2B3440; }