/*! Theme Name: GeneratePress Child (child) Theme URI: https://rankitup.fr/cockpit Author: Clément Gillet Author URI: https://rankitup.fr Description: Cockpit child theme for HR cluster sites — inherits GeneratePress, injects palette overrides and custom block CSS from the Cockpit block registry. Generated and pushed by Cockpit duplicator (ADR-DUP-0010). Template: generatepress Version: 0.1.0 License: GPL v2 or later Text Domain: generatepress-child */ /* * ──────────────────────────────────────────────────────────────────── * CSS variables — overridden per-site by `apply-theme-palette.ts` at * the `theme_palette_applied` step. The Cockpit duplicator regenerates * this stylesheet for each target with the chosen OKLCH palette * (ADR-DUP-0004) substituted into the values below. Block registry * blocks (`blocks//style.css`) consume these vars via var(--nt-029c-*) * for cascading recolor without touching individual block files. * ──────────────────────────────────────────────────────────────────── */ :root { /* Palette — substituted at theme_palette_applied step */ --nt-029c-primary: #0F4C5C; --nt-029c-primary-light: #5A8993; --nt-029c-primary-dark: #1E5F70; --nt-029c-accent: #FBC02D; --nt-029c-bg: #FFFFFF; --nt-029c-bg-muted: #F0F4F5; --nt-029c-text: #0F1419; --nt-029c-text-muted: #3A4244; --nt-029c-border: #E5E9EA; /* Style hints — variant-driven (ADR-DUP-0010 §3, extended recolorBlock) */ --nt-029c-border-style: solid; --nt-029c-border-width: 1px; --nt-029c-border-radius: 6px; --nt-029c-spacing: 2rem; --nt-029c-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); /* 7 rotating accent colors for components that loop (ria-pills, * comparative tables, alternating cards). Sourced from variant.pillColors * in DesignVariantV2. */ --nt-029c-pill-1: #0F4C5C; --nt-029c-pill-2: #FBC02D; --nt-029c-pill-3: #1E5F70; --nt-029c-pill-4: #5A8993; --nt-029c-pill-5: #FFD96A; --nt-029c-pill-6: #F0F4F5; --nt-029c-pill-7: #0F1419; } /* * GeneratePress parent overrides — surcharge the few GP variables that * propagate to most blocks. The full list of GP vars is documented at * https://docs.generatepress.com/article/css-custom-properties/ ; * we override only the ones safe to remap (primary accent, body bg). */ :root { --base-color: var(--nt-029c-text); --contrast: var(--nt-029c-text); --contrast-2: var(--nt-029c-text-muted); --base: var(--nt-029c-bg); --base-2: var(--nt-029c-bg-muted); --accent: var(--nt-029c-primary); --accent-2: var(--nt-029c-primary-light); } /* * WordPress CORE preset color overrides — ADR-DUP-0011 Bug I fix. * * Block themes (Affinity etc. from GP Premium Site Library) use the * WordPress core default preset palette (`--wp--preset--color--*`) for * their saved content via `has--color` / `has--background-color` * classes. Without these overrides, our chosen palette (Cockpit * variant) only repaints the GP chrome — the Affinity hero/buttons/ * accents keep their hardcoded WP defaults (vivid-cyan-blue etc.), * making every Cockpit fresh-themed site look like the same blue * Affinity template regardless of which variant was picked. * * We remap the WP core slugs semantically: the BLUE accents become the * variant primary, the PURPLE accents become the variant accent, the * categorical colors (red/green/amber/orange/light-green/pink) bind to * our 7 rotating pillColors. Black + white stay universal. * * Note: `--wp--preset--gradient--*` are not CSS-var references but * baked rgb() strings, so gradients keep their default look. If a * specific Affinity gradient becomes visually problematic, override the * named gradient var here with our own. */ :root { --wp--preset--color--vivid-cyan-blue: var(--nt-029c-primary); --wp--preset--color--vivid-purple: var(--nt-029c-accent); --wp--preset--color--pale-cyan-blue: var(--nt-029c-primary-light); --wp--preset--color--cyan-bluish-gray: var(--nt-029c-text-muted); --wp--preset--color--vivid-red: var(--nt-029c-pill-1); --wp--preset--color--luminous-vivid-orange: var(--nt-029c-pill-2); --wp--preset--color--luminous-vivid-amber: var(--nt-029c-pill-3); --wp--preset--color--light-green-cyan: var(--nt-029c-pill-4); --wp--preset--color--vivid-green-cyan: var(--nt-029c-pill-5); --wp--preset--color--pale-pink: var(--nt-029c-pill-6); } /* * WordPress CORE preset GRADIENT overrides — complements Bug I color * fix. Unlike CSS custom properties for colors (which cascade via * `var()` lookup), the default WP gradients are baked `rgb()` strings * (e.g. `linear-gradient(135deg,rgb(6,147,227),rgb(155,81,224))`), * so changing the underlying color preset has zero effect on the * gradient. We redefine each gradient var as a new `linear-gradient()` * expression using our `--nt-029c-*` palette so heroes / CTA backgrounds / * tinted images follow the chosen variant. * * Mapping is loosely semantic (blue-purple → primary→accent, warm * gradients → pillColors warm tones, cool → cool, neutrals → base). * Tweak per-target via the gradient CSS vars if a specific Affinity * section looks off — these are merely defaults. */ :root { /* Primary brand gradients (hero, CTA backgrounds) */ --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, var(--nt-029c-primary) 0%, var(--nt-029c-accent) 100%); --wp--preset--gradient--blush-light-purple: linear-gradient(135deg, var(--nt-029c-primary-light) 0%, var(--nt-029c-accent) 100%); --wp--preset--gradient--midnight: linear-gradient(135deg, var(--nt-029c-accent) 0%, var(--nt-029c-primary-dark) 100%); /* Warm gradients (CTA highlights, callouts) */ --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, var(--nt-029c-pill-3) 0%, var(--nt-029c-pill-2) 100%); --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, var(--nt-029c-pill-2) 0%, var(--nt-029c-pill-1) 100%); --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, var(--nt-029c-pill-6) 0%, var(--nt-029c-pill-1) 100%); /* Cool gradients (testimonial sections, secondary CTAs) */ --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, var(--nt-029c-pill-4) 0%, var(--nt-029c-pill-5) 100%); --wp--preset--gradient--pale-ocean: linear-gradient(135deg, var(--nt-029c-primary-light) 0%, var(--nt-029c-pill-5) 100%); /* Neutral / multi-tone gradients (image overlays, dividers) */ --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, var(--nt-029c-bg) 0%, var(--nt-029c-bg-muted) 100%); --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, var(--nt-029c-primary) 0%, var(--nt-029c-pill-2) 100%); --wp--preset--gradient--electric-grass: linear-gradient(135deg, var(--nt-029c-pill-4) 0%, var(--nt-029c-accent) 100%); --wp--preset--gradient--luminous-dusk: linear-gradient(135deg, var(--nt-029c-pill-3) 0%, var(--nt-029c-accent) 100%); } /* * Bug J safety net — GenerateBlocks Pro SVG size cap. * * GB Pro generates a per-page CSS file (`uploads/generateblocks/style-.css`) * with per-instance width rules like `.gb-text-cdabd4a3 .gb-shape svg * { width: .8em; height: .8em; }`. The file is regenerated lazily on first * page render. When it hasn't been generated yet (or fails), the SVG has * only `viewBox` and renders at the browser default of ~300x150px — * social icons end up at near-fullscreen size. * * This safety net caps any GB-shape SVG that hasn't received its * per-instance width rule yet. The `:not([width]):not([style*="width"])` * guard means real per-instance rules (always specified via CSS, never * inline) still win the cascade through specificity. Worst case here: * an icon meant to be 5rem stays at 3rem until the GB CSS regen runs. */ .gb-shape svg:not([width]):not([style*="width"]) { max-width: 3rem; max-height: 3rem; } /* Same defensive cap for the legacy GB Icon block. */ .gb-icon svg:not([width]):not([style*="width"]) { max-width: 3rem; max-height: 3rem; } /* Custom block container default (blocks override per-slug as needed) */ .nt-029c-block { margin-block: var(--nt-029c-spacing); } /* Belt-and-braces: hide the GeneratePress footer credit line in case the * PHP filters in functions.php don't catch an edge code path. */ .site-info { display: none !important; } /* * ──────────────────────────────────────────────────────────────────── * V4 Chantier Fresh — visual reinforcement layer * Appended by scripts/patch-chort-v4-visibility.ts on 2026-05-21T12:35:36.617Z. * Adds teal overlay to hero images + boosts yellow CTA presence. * ──────────────────────────────────────────────────────────────────── */ /* Hero / cover blocks: tint with V4 deep teal */ .wp-block-cover:not(.has-background-dim), .wp-block-cover.has-background-dim { position: relative; } .wp-block-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 76, 92, 0.55) 0%, rgba(30, 95, 112, 0.85) 100%); pointer-events: none; z-index: 1; } .wp-block-cover > * { position: relative; z-index: 2; } .wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3, .wp-block-cover p { color: #FFFFFF !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* GenerateBlocks containers with background images: same teal overlay */ .gb-container.has-background-image, .gb-container[style*="background-image"] { position: relative; } .gb-container.has-background-image::before, .gb-container[style*="background-image"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 76, 92, 0.50) 0%, rgba(30, 95, 112, 0.80) 100%); pointer-events: none; z-index: 0; } .gb-container.has-background-image > *, .gb-container[style*="background-image"] > * { position: relative; z-index: 1; } /* CTA buttons: enforce safety yellow */ .wp-block-button__link, .gb-button, .button, button[type="submit"], input[type="submit"] { background-color: #FBC02D !important; color: #0F1419 !important; border-color: #FBC02D !important; font-weight: 600 !important; } .wp-block-button__link:hover, .gb-button:hover, .button:hover, button[type="submit"]:hover, input[type="submit"]:hover { background-color: #FFD96A !important; color: #0F1419 !important; border-color: #FFD96A !important; } /* Secondary buttons (outline variant): teal border + text */ .wp-block-button.is-style-outline .wp-block-button__link, .gb-button.gb-button-secondary { background-color: transparent !important; color: #0F4C5C !important; border: 2px solid #0F4C5C !important; } /* Section titles: stronger teal tone (already in H2/H3 via GP settings, but force here in case some H2 don't pick up GP defaults) */ .entry-content h2, .entry-content h3, .gb-container h2, .gb-container h3 { color: #0F4C5C; } /* Top "ORDER NOW" header CTA already yellow — ensure hover stays yellow */ .main-navigation .header-cta a, .main-navigation a.cta { background-color: #FBC02D !important; color: #0F1419 !important; } /* Custom footer credit (Mentions légales link) */ .site-info { display: block !important; text-align: center; padding: 1.5rem; font-size: 0.85rem; color: #6B6E7A; background: #F0F4F5; } .cockpit-footer-credit a { color: #0F4C5C; text-decoration: none; border-bottom: 1px solid currentColor; } .cockpit-footer-credit a:hover { color: #FBC02D; } /* V4 contrast fix (dark backgrounds get light text) */ /* Any GB container with a background image: light text on top */ .gb-container.has-background-image, .gb-container[style*="background-image"] { color: #FFFFFF; } .gb-container.has-background-image h1, .gb-container.has-background-image h2, .gb-container.has-background-image h3, .gb-container.has-background-image h4, .gb-container.has-background-image p, .gb-container.has-background-image li, .gb-container[style*="background-image"] h1, .gb-container[style*="background-image"] h2, .gb-container[style*="background-image"] h3, .gb-container[style*="background-image"] h4, .gb-container[style*="background-image"] p, .gb-container[style*="background-image"] li { color: #FFFFFF !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } /* GB containers with dark contrast-2 background: light text */ .gb-element[style*="contrast-2"], .gb-element[style*="--contrast-2"], .gb-container[style*="contrast-2"], .gb-container[style*="--contrast-2"] { color: #FFFFFF; } .gb-element[style*="contrast-2"] h1, .gb-element[style*="contrast-2"] h2, .gb-element[style*="contrast-2"] h3, .gb-element[style*="contrast-2"] h4, .gb-element[style*="contrast-2"] p, .gb-element[style*="contrast-2"] li, .gb-container[style*="contrast-2"] h1, .gb-container[style*="contrast-2"] h2, .gb-container[style*="contrast-2"] h3, .gb-container[style*="contrast-2"] h4, .gb-container[style*="contrast-2"] p, .gb-container[style*="contrast-2"] li { color: #FFFFFF !important; } /* Specs table (Nos engagements) — dark background, force light text + slight padding */ .entry-content table, .gb-container table { color: #FFFFFF; } .entry-content table th, .entry-content table td, .gb-container table th, .gb-container table td { color: #FFFFFF !important; border-color: rgba(255, 255, 255, 0.15) !important; } /* Heading vars override — when GP global_colors makes h1/h2 teal on a dark bg, force white. Use [data-theme="dark"] or detect via bg. */ .gb-element[style*="background-color: var(--nt-029c-contrast"], .gb-element[style*="background-color: var(--contrast"] { color: #FFFFFF; } .gb-element[style*="background-color: var(--nt-029c-contrast"] h1, .gb-element[style*="background-color: var(--nt-029c-contrast"] h2, .gb-element[style*="background-color: var(--nt-029c-contrast"] h3, .gb-element[style*="background-color: var(--nt-029c-contrast"] h4, .gb-element[style*="background-color: var(--nt-029c-contrast"] p, .gb-element[style*="background-color: var(--nt-029c-contrast"] li, .gb-element[style*="background-color: var(--contrast"] h1, .gb-element[style*="background-color: var(--contrast"] h2, .gb-element[style*="background-color: var(--contrast"] h3, .gb-element[style*="background-color: var(--contrast"] h4, .gb-element[style*="background-color: var(--contrast"] p, .gb-element[style*="background-color: var(--contrast"] li { color: #FFFFFF !important; } /* WP cover blocks (hero) — explicit white headings */ .wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3, .wp-block-cover h4, .wp-block-cover p { color: #FFFFFF !important; } /* Tweaks: make the GB media hero image visible behind text */ .gb-element[style*="grid-template"] .gb-media { opacity: 0.9; } /* V4 contrast fix v3 — sledgehammer */ /* GP --contrast-2 var: ensure it's dark (so light text reads). */ :root { --contrast-2: #2D3142; } /* Any element with var(--contrast-2) or var(--nt-029c-contrast-2) bg → text white */ [style*="background-color:var(--contrast"], [style*="background-color: var(--contrast"], [style*="background:var(--contrast"], [style*="background: var(--contrast"] { color: #FFFFFF !important; } [style*="background-color:var(--contrast"] h1, [style*="background-color:var(--contrast"] h2, [style*="background-color:var(--contrast"] h3, [style*="background-color:var(--contrast"] h4, [style*="background-color:var(--contrast"] p, [style*="background-color:var(--contrast"] li, [style*="background-color:var(--contrast"] span, [style*="background-color: var(--contrast"] h1, [style*="background-color: var(--contrast"] h2, [style*="background-color: var(--contrast"] h3, [style*="background-color: var(--contrast"] h4, [style*="background-color: var(--contrast"] p, [style*="background-color: var(--contrast"] li, [style*="background-color: var(--contrast"] span { color: #FFFFFF !important; } /* Buttons inside dark sections stay yellow-on-dark, readable */ [style*="background-color:var(--contrast"] a.wp-block-button__link, [style*="background-color: var(--contrast"] a.wp-block-button__link, [style*="background-color:var(--contrast"] .gb-button, [style*="background-color: var(--contrast"] .gb-button { color: #0F1419 !important; background-color: #FBC02D !important; } /* H1 in any .gb-element acting as hero (image bg or contrast bg): force white */ .gb-element h1, .gb-element h2 { /* default: rely on cascade. But for first .gb-element of entry-content, force white. */ } .entry-content > .gb-element:first-of-type h1, .entry-content > .gb-element:nth-of-type(1) h1 { color: #FFFFFF !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); } .entry-content > .gb-element:first-of-type p, .entry-content > .gb-element:nth-of-type(1) p { color: #FFFFFF !important; } /* Nova "Specs" table section — usually contrast-2 bg, force light text */ .gb-element table th, .gb-element table td, .gb-element table h2, .gb-element table h3, .gb-element table p { color: #FFFFFF !important; } /* Cover blocks on LPs: white text already handled by core, but force it just in case */ .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover__inner-container * { color: #FFFFFF !important; } .wp-block-cover .wp-block-cover__inner-container .wp-block-button__link { color: #0F1419 !important; } /* GP standard vars — Nova uses these unprefixed */ :root { /* Light family (used for text on dark sections) */ --base: #FFFFFF; --base-2: #F0F4F5; --base-3: #FFFFFF; /* Dark family (used for bg of hero/specs/CTA + body text on light) */ --contrast: #0F1419; --contrast-2: #2D3142; --contrast-3: #6B6E7A; /* Brand */ --accent: #FBC02D; --accent-2: #0F4C5C; }