/* ============================================================================ Solidum landing-page overrides (managed by Claude Code) Loaded via mu-plugin solidum-landing-overrides.php on the FRONT PAGE ONLY. Update-safe: lives in wp-content/mu-plugins/, survives theme & plugin updates. Re-deploy: scp this file to the server, then `wp @solidum litespeed-purge all`, then prime (see SOLIDUM_CC_SETUP.md §3). ---------------------------------------------------------------------------- CASCADE NOTES (why specific selectors / why !important is or isn't used) This sheet is enqueued at priority 9999, but #wp-custom-css (the ~40 KB Additional CSS) and Uncode's generated style-custom.css still emit LATER in wp_head. So every rule here is scoped to an ID (#page-header / #row-unique-2 / #row-unique-6) to out-specify the theme + Additional CSS. !important is used ONLY where a competitor declaration is itself !important or inline (the only cases specificity alone cannot win): • Hero CTAs → beat style-custom.css `.style-dark .btn-default.btn-outline { color/background/border …!important }`. • Brand strip (mobile) → beat #wp-custom-css `@media(max-width:959px) .solidum-brandstrip{…!important}` + `img{max-width:60px!important}`. • Servisas → beat an INLINE `background-position:center center` on .background-inner. Where the only competitors are non-!important (hero box-shadow; the whole desktop brand-strip block) the ID scope already wins, so no !important is used. Brand tokens are defined once in :root and every color is routed through them. ========================================================================== */ :root { --solidum-blue: #0055ba; /* logo wordmark + style-accent blue (reference) */ --solidum-red: #ff1d25; /* logo "°" mark — standardized accent */ --solidum-red-hover: #d10f16; /* darker shade for CTA hover */ --solidum-white: #fff; /* CTA label/icon on the red fill */ } /* ============================================================================ 1. HERO CTAs — "Plačiau" ghost buttons → solid red ---------------------------------------------------------------------------- Scope: #page-header a.btn.btn-outline matches EXACTLY the 2 hero CTAs (verified: only 2 .btn-outline on the page). The white-on-red buttons elsewhere are .btn-default WITHOUT .btn-outline and stay untouched. Size/position unchanged (same padding / radius / 2px border, now red). !important REQUIRED on color/background/border: style-custom.css forces these on `.style-dark .btn-default.btn-outline` with !important (incl. a DARK text + white bg on hover we must override). box-shadow has no !important competitor, so it stays plain. ========================================================================== */ /* Rest state */ #page-header a.btn.btn-outline, #page-header a.btn.btn-outline:link, #page-header a.btn.btn-outline:visited { background-color: var(--solidum-red) !important; border-color: var(--solidum-red) !important; color: var(--solidum-white) !important; box-shadow: none; transition: background-color .25s ease, border-color .25s ease, color .25s ease; } /* Hover / focus — darker red, text stays white */ #page-header a.btn.btn-outline:hover, #page-header a.btn.btn-outline:focus, #page-header a.btn.btn-outline:focus-visible { background-color: var(--solidum-red-hover) !important; border-color: var(--solidum-red-hover) !important; color: var(--solidum-white) !important; } /* Keep label + icon white in every state (Uncode flips outline-button text on hover) */ #page-header a.btn.btn-outline .btn-icon, #page-header a.btn.btn-outline span { color: var(--solidum-white) !important; } /* ============================================================================ 1b. HERO TEXT LEGIBILITY — scrim for white text over the hero photos ---------------------------------------------------------------------------- Genuine problem (measured, white text vs sampled background luminance): the RIGHT "Jaukiems namams" panel uses a GRADIENT overlay that is light where the heading sits, so "Jaukiems namams" reads at only 1.85:1 (mobile) / 2.05:1 (desktop) — below the 3:1 WCAG large-text floor — and its subheadline at ~4.0:1 / 3.4:1 (below 4.5:1 body). The LEFT panel has a solid 50%-black overlay and is already fine (heading 3.25:1, subheadline 11:1). A previous edit added #wp-custom-css rule F20 (`.page-id-395 #row-unique-0 … { text-shadow:none !important }`, "no glow"), made BEFORE the residential image was swapped to the current bright patio crop — so that decision predates, and now causes, the problem. We restore a soft text-shadow scrim: additive only (no layout/color change), self-targeting (invisible over the already-dark left panel, lifts the white text off the bright right panel). !important + the #page-header #row-unique-0 scope (2,0,1) is REQUIRED to beat F20 (1,1,1, !important). ========================================================================== */ #page-header #row-unique-0 h1, #page-header #row-unique-0 h2, #page-header #row-unique-0 h3, #page-header #row-unique-0 h4, #page-header #row-unique-0 h5, #page-header #row-unique-0 h6, #page-header #row-unique-0 p, #page-header #row-unique-0 .h1, #page-header #row-unique-0 .h2 { text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 14px rgba(0, 0, 0, .5) !important; } /* ============================================================================ 2. BRAND STRIP — "Atstovaujami prekių ženklai" (5 partner logos, coral band) ---------------------------------------------------------------------------- Scope: #row-unique-2 is the coral band's row (.style-accent-bg). The strip is NOT inside #page-header, so specificity is anchored on this row ID. Logo ASSETS are pre-balanced to a common optical box (cap-height = 30.4% of each canvas), so a single max-height equalises optical cap-height across all 5. Desktop: the ID scope out-specifies every (non-!important) #wp-custom-css competitor, so NO !important here. (At ≤959px the Additional CSS adds !important rules — those are beaten in section 2b below, which governs that range, so these desktop rules are safe even though they aren't media-scoped.) ========================================================================== */ /* 2a. Desktop / base — uniform cap-height, single centered row, even gaps. canvas 64px → cap ≈ 19.5px; the 5 logos total ≈ 924px and fit the ~1053px strip in one row with 28px gaps. flex:0 1 auto shrinks proportionally if tight. */ #row-unique-2 .solidum-brandstrip { display: flex; flex-wrap: nowrap; /* one row on desktop */ align-items: center; /* vertical centering */ justify-content: center; /* centered cluster, even gaps */ gap: 28px; padding: 8px 0 0; } #row-unique-2 .solidum-brandstrip a { display: flex; align-items: center; justify-content: center; flex: 0 1 auto; /* natural width; shrink proportionally if tight */ min-width: 0; } #row-unique-2 .solidum-brandstrip img { max-height: 64px; /* single canvas height → uniform optical cap */ max-width: 100%; /* scale down with the anchor when shrinking */ width: auto; height: auto; object-fit: contain; display: block; } /* 2b. Mobile / tablet (≤959px) — the logos are very wide-aspect (Saunier ~4.75:1), so one uniform-height row would force ~6px caps. Instead ALLOW WRAP: at max-height 46px the DOM order wraps into two width-balanced rows (Saunier+inVENTer / Solarfocus+Jäspi+Heatpex) with EQUAL caps, and we reclaim the band's heavy side padding to give them room. !important REQUIRED here: #wp-custom-css emits competing !important rules in this same breakpoint (flex-wrap:nowrap!important; gap:8px!important; img{max-width:60px!important;width:100%!important}). */ @media (max-width: 959px) { #row-unique-2 .row.limit-width.row-parent { padding-left: 12px !important; padding-right: 12px !important; } #row-unique-2 .uncell.double-block-padding { padding-left: 0 !important; padding-right: 0 !important; } #row-unique-2 .solidum-brandstrip { flex-wrap: wrap !important; /* two rows so logos stay readable + even */ justify-content: center !important; gap: 14px 12px !important; /* row-gap col-gap */ padding: 10px 0 6px !important; } #row-unique-2 .solidum-brandstrip a { flex: 0 0 auto !important; /* natural width (no slot-stretching) */ min-width: 0 !important; } #row-unique-2 .solidum-brandstrip img { max-height: 46px !important; /* cap ≈ 14px; DOM-order wrap → 2 balanced rows */ max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; } } /* ============================================================================ 3. SERVISAS band portrait — keep the worker's head in frame ---------------------------------------------------------------------------- Scope: #row-unique-6 .background-inner — the man02.jpg side image of the red "Servisas" / "PROFESIONALI ĮRANGOS PRIEŽIŪRA" band. The photo is a CSS background-image (NOT an ), so we tune background-position. The image box is a FIXED 421px height on desktop, so wider viewports flatten the box and `background-size:cover` crops harder vertically; the worker's face sits in the upper third, so default `center center` slices the top of his hard hat on wide desktops (≈1680px+) and tablet (~768px). Shifting the focal point to `center 25%` keeps the full head in frame (verified 390/1440/1920px; mobile is crop-insensitive, box AR ~1.56 ≈ image AR ~1.45, so it takes the same 25%). !important REQUIRED: background-position is set INLINE on .background-inner, and only !important beats an inline style. If Uncode renumbers the row id this rule safely no-ops (reverts to default). ========================================================================== */ #row-unique-6 .background-inner { background-position: center 25% !important; } @media (max-width: 959px) { #row-unique-6 .background-inner { background-position: center 25% !important; } }