/* * servisas-overrides.css — update-safe CSS for the /servisas/ page ONLY. * Enqueued by solidum-landing-overrides.php on is_page( 380 ) (page-id-380), * filename-cache-busted like the other sheets. Does NOT load on the landing. * * ── Consolidated 2026-06-19 (behavior-identical) ───────────────────────────── * De-duplicated, grouped into the numbered sections below, every color routed * through the :root brand tokens, and UNNEEDED !important pruned. `!important` * is now used ONLY where a live competitor is itself !important or inline — * verified element-by-element against the live cascade (CDP getMatchedStylesForNode, * diag-prune.mjs). Selectors are unchanged from the prior, separately-proven state; * the only edits are token routing (identical hex values) and the !important prunes * listed under each section. Pruned because the #row-unique-N id scope already * out-specifies the only (non-!important) competitor: * §1a panel bg, §3d radio-ul grid/padding/margin/list-style, §5a row padding + * row-internal margin, §5c eyebrow font-size/line-height, §6b divider margin. * Kept (each faces an !important / inline competitor): §1b labels, §3b focus ring, * §3d ul display+gap & the pseudo-circle kill & selected-chip color, §3e submit, * §3f errors, §4d tel links, §5a row-inner height, §5c eyebrow letter-spacing, * §5d mobile photo, §6b divider hairline color. * ───────────────────────────────────────────────────────────────────────────── */ /* Brand tokens (mirror the landing sheet; this sheet + the landing sheet never * load on the same page, so there is no :root collision. footer-overrides.css, * which DOES co-load here, defines no tokens). */ :root { --solidum-red: #ff1d25; /* brand red — accents: focus ring, selected chip, submit, partner phone */ --solidum-red-hover: #d10f16; /* deeper red — the functional form-panel bg + phone hover */ --solidum-white: #fff; /* all panel text on the red fill */ --servisas-input-border: #d3d9e0; /* idle text-input border (grey) */ --servisas-ink: #303133; /* partner name — dark text on the grey list */ --servisas-hairline: #d8dde2; /* partner-list divider hairline */ } /* ========================================================================= * 1. Red service-request form panel — contrast fix (2026-06-19) * ------------------------------------------------------------------------- * The panel is #row-unique-0 (.vc_row.style-accent-bg.row-container), whose * background was the BRIGHT band red #FF3A41 (rgb 255,58,65). On that red the * MAX contrast any light text can reach is white at only 3.54:1 — so no light * value can clear WCAG-AA 4.5:1 (measured, both engines, both widths). The * dark form text was even worse: the helper/description text and the required * asterisks rendered slate #6a7585 at ~1.32:1, and the navy labels at ~4.47:1. * * Fix (per design decision 2026-06-19): darken ONLY this functional form panel * to the deeper brand red-hover #D10F16, then make ALL panel text white. White * on #D10F16 = ~5.54:1, so every element — eyebrow, labels, asterisks, helper * text, time-slot labels, contact block — clears 4.5:1. The landing's bright * #FF1D25 / #FF3A41 celebratory bands are deliberately left unchanged; this * deeper red is reserved for the legibility-critical form panel. * * Scope: pinned to #row-unique-0 so it can only ever touch this panel. If * Uncode renumbers the row id the rules no-op safely (revert to defaults). * NOT touched: the white form INPUTS / textareas (dark text on white — kept * readable) and the original blue #0055ba submit button (restyled in §3e). * ========================================================================= */ /* 1a. Panel background: bright band red -> deeper brand red-hover. * No !important: the only competitor is the plain `.style-accent-bg{#ff3a41}` * [0,1,0] in style-custom.css; this `#row-unique-0.style-accent-bg` id scope * [1,1,0] out-specifies it (no inline bg on the row — verified live). */ #row-unique-0.style-accent-bg, #row-unique-0.vc_row.style-accent-bg { background-color: var(--solidum-red-hover); } /* 1b. All panel text -> white. * The live Additional CSS (#wp-custom-css, loads LATE in wp_head) already * pins this form's text dark via form-id selectors, the strongest being * `#wpforms-1554 .wpforms-field-radio ul li label { color:#1a2330!important }` * at specificity [1,1,3] (governs the time-slot radio labels). So we route * through the confirmed `.wpforms-container-full` ancestor to reach [1,2,x], * which out-specifies [1,1,3] / [1,1,0] regardless of source order. The * competitor IS !important, so this rule must stay !important. (Found with * diag-inline-label.mjs via CDP CSS.getMatchedStylesForNode.) */ #row-unique-0 .wpforms-container-full .wpforms-field-label, /* labels + legend */ #row-unique-0 .wpforms-container-full .wpforms-field-label-inline, /* time-slot labels */ #row-unique-0 .wpforms-container-full .wpforms-required-label, /* asterisks (*) */ #row-unique-0 .wpforms-container-full .wpforms-field-description { /* helper text */ color: var(--solidum-white) !important; } /* ========================================================================= * 2. Partner-logo strip — normalize + de-clip (2026-06-19) * ------------------------------------------------------------------------- * The 5 partner logos (Saunier Duval, inVENTer, Heatpex, Solarfocus, Jäspi) * at the top of the red panel (#row-unique-0) used to be an Uncode owl-CAROUSEL * (#gallery-150707, type="carousel", carousel_sm="4") pointing at OLD, * non-normalized files (saunier.png/jaspi.png/Logo-02/inventer.png) with * mismatched cap-heights. The owl wrapper's overflow:hidden CLIPPED the 5th * logo: on mobile (sm=4 per view, 5 logos) inVENTer was cut at the right edge, * and on desktop the stage (595px) overflowed the 558px wrapper. * * Fix (same treatment as the landing brand strip): the carousel shortcode in * page 380 was replaced with a static
of the * five NORMALIZED landing assets (uploads/2026/06/*-white-balanced.{svg,png}, * cap-height baked to 30.4% of canvas), laid out as a centered flex strip that * WRAPS — so a single uniform max-height equalises optical cap-height across all * five and nothing is ever clipped. The panel is only ~558px (desktop) / ~318px * (mobile) wide (it's the 1/2-width form column), much narrower than the * landing's ~1053px strip, so the logos wrap to two balanced rows at both widths. * * DEDICATED CLASS (NOT .solidum-brandstrip): the live Additional CSS * (#wp-custom-css) carries UN-scoped .solidum-brandstrip wildcards — per-brand * fixed heights AND an "F3" @media(<=959px) block with * `flex-wrap:nowrap!important; a{flex-shrink:1!important}; img{max-width:60px * !important; width:100%!important}` that would force a single shrunk row of * uneven logos, plus `:has(.solidum-brandstrip)` padding rules that would shift * the form panel. Using `.servisas-brandstrip` sidesteps all of them, so these * rules need NO !important (the #row-unique-0 scope + a brand-new class have no * competitors). Verified live both engines @1440 & 390: uniform caps (42/36px), * 0 clip, identical chromium==webkit (servisas-logos-tune.mjs). * Scope pinned to #row-unique-0 so it can only touch this panel. * ========================================================================= */ #row-unique-0 .servisas-brandstrip { display: flex; flex-wrap: wrap; /* wrap to balanced rows — never clip */ align-items: center; /* vertical centering */ justify-content: center; /* centered cluster, even gaps */ gap: 18px 22px; /* row-gap col-gap */ padding: 4px 0 0; width: 100%; } #row-unique-0 .servisas-brandstrip span { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; /* natural width, NO shrink → wraps cleanly */ min-width: 0; } #row-unique-0 .servisas-brandstrip img { max-height: 42px; /* single cap → uniform optical cap-height */ max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; } /* Mobile/tablet (<=959px): narrower panel → smaller cap; still wraps to two balanced rows ([Saunier+inVENTer] / [Heatpex+Solarfocus+Jäspi]). */ @media (max-width: 959px) { #row-unique-0 .servisas-brandstrip { gap: 16px 18px; padding: 6px 0 2px; } #row-unique-0 .servisas-brandstrip img { max-height: 36px; } } /* ========================================================================= * 3. Service-request form — premium field / radio / button styling (2026-06-19) * ------------------------------------------------------------------------- * The WPForms form (#wpforms-1554) on the red panel. Goal: make it read clean * and consistent — subtle input radius + clear focus, even label/field spacing, * proper time-slot radios, and a button that matches the site's button system * instead of the old clashing blue. PURE styling: no field or logic change. * * Scope: every rule routes through `#row-unique-0 .wpforms-container-full`, the * same [1,2,x] ancestor used by §1 to beat the live Additional-CSS `#wpforms-1554 * …` selectors (which pin form text/colors at [1,1,x]). `!important` is used * ONLY where a competitor is itself !important / inline (the focus border, the * grid display + gap, the submit colors, the radio pseudo-control, the selected * chip color) — verified live with diag-prune.mjs / servisas-form-tune.mjs. * * Tap targets: inputs 46px, radio chips 44px, submit 46px — all >= 44px. * Revert: delete this §3 (or restore servisas-overrides.backup-20260619-formfix2.css), * redeploy + litespeed-purge all + prime /servisas/ and /. * ========================================================================= */ /* 3a. White text inputs — consistent radius, >=44px height. (No !important: the * #row-unique-0 id scope beats WPForms' plain input rules.) */ #row-unique-0 .wpforms-container-full input.wpforms-field-medium, #row-unique-0 .wpforms-container-full input[type="text"], #row-unique-0 .wpforms-container-full input[type="email"], #row-unique-0 .wpforms-container-full input[type="tel"], #row-unique-0 .wpforms-container-full input[type="number"], #row-unique-0 .wpforms-container-full textarea { border: 1px solid var(--servisas-input-border); border-radius: 8px; padding: 12px 16px; min-height: 46px; font-size: 14px; background-color: var(--solidum-white); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } /* 3b. Clear focus ring — grey border -> brand red + white halo (pops on the red * panel). The live form pins a brand-BLUE :focus border with high * specificity AND !important, so this needs !important to win (verified via * the focus crop). Uses --solidum-red, matching the landing/button accents. */ #row-unique-0 .wpforms-container-full input.wpforms-field-medium:focus, #row-unique-0 .wpforms-container-full input[type="text"]:focus, #row-unique-0 .wpforms-container-full input[type="email"]:focus, #row-unique-0 .wpforms-container-full input[type="tel"]:focus, #row-unique-0 .wpforms-container-full input[type="number"]:focus, #row-unique-0 .wpforms-container-full textarea:focus { border-color: var(--solidum-red) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.55) !important; outline: none !important; } /* 3c. Consistent label / field / description spacing. */ #row-unique-0 .wpforms-container-full .wpforms-field { padding: 0; margin-bottom: 20px; } #row-unique-0 .wpforms-container-full .wpforms-field-label { margin-bottom: 8px; line-height: 1.3; } #row-unique-0 .wpforms-container-full .wpforms-field-description { margin-top: 8px; line-height: 1.4; } /* 3d. Time-slot radios (8:00 / 10:00 / 13:00 / 15:00) — premium segmented chips. * The native control is a custom blue ::before/::after circle whose checked * dot rendered #066aab (the same clashing blue as the old button). It is * HIDDEN and the whole CHIP becomes the selectable target: white-fill / * brand-red text when selected, mirroring the Siųsti button — one unified * white/red system, no blue. * * CLICK TARGET (fix 2026-06-19): the