/* ============================================================ Ecothermia — visual refresh layer ------------------------------------------------------------ Loaded AFTER the vendored WordPress theme CSS (main.css), so it wins the cascade for the handful of properties it touches. Deliberately limited to SHAPE, SHADOW, TRANSITION and FOCUS — never colour, font-size or layout geometry — so the 1:1 visual fidelity of every cloned page is preserved. It only makes things feel a touch fresher, in the same spirit as the /calculator/. Same brand palette already used throughout main.css: navy #283582 + yellow #ffdc00. Project-owned. Injected into every page by scripts/inject-refresh-css.mjs (idempotent, runs in clone:pages). ============================================================ */ :root { --eco-navy: #283582; --eco-yellow: #ffdc00; --eco-ease: 150ms ease; --eco-shadow-soft: 0 8px 32px rgba(40, 53, 130, 0.08); --eco-shadow-lift: 0 6px 18px rgba(40, 53, 130, 0.16); --eco-focus-ring: 0 0 0 3px rgba(40, 53, 130, 0.28); --eco-input-glow: 0 0 0 3px rgba(40, 53, 130, 0.12); } /* ---- Buttons: smoother transition + subtle hover lift ------------- Targets real button classes only; the cookie-banner buttons (.cli-*) and carousel arrows (.elementor-swiper-button) are left untouched on purpose. */ .elementor-button, .elementor-cta__button, .wpforms-submit, .k2i-custom-form-submit-button { transition: transform var(--eco-ease), box-shadow var(--eco-ease), background-color var(--eco-ease), color var(--eco-ease), border-color var(--eco-ease) !important; } .elementor-button:hover, .elementor-cta__button:hover, .wpforms-submit:hover, .k2i-custom-form-submit-button:hover { transform: translateY(-1px); box-shadow: var(--eco-shadow-lift); } .elementor-button:active, .elementor-cta__button:active, .wpforms-submit:active, .k2i-custom-form-submit-button:active { transform: translateY(0); box-shadow: none; } /* ---- Form fields: rounded corners + soft branded focus glow ------- Scoped to WPForms / the .k2i-custom-form contact + job forms. File-upload, checkbox and radio inputs are excluded. */ .wpforms-field-large, .wpforms-field-medium, .wpforms-field-small, .wpforms-field select, .wpforms-field textarea, .k2i-custom-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .k2i-custom-form select, .k2i-custom-form textarea { border-radius: 10px !important; transition: border-color var(--eco-ease), box-shadow var(--eco-ease) !important; } /* The focus selectors mirror WPForms' own container chain (div.wpforms-container-full .wpforms-form input:focus, which ships with !important) so this branded glow out-specifies it. */ .wpforms-container-full .wpforms-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):focus, .wpforms-container-full .wpforms-form select:focus, .wpforms-container-full .wpforms-form textarea:focus, .k2i-custom-form .wpforms-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):focus, .k2i-custom-form .wpforms-form select:focus, .k2i-custom-form .wpforms-form textarea:focus { outline: none !important; border-color: var(--eco-navy) !important; box-shadow: var(--eco-input-glow) !important; } /* ---- CTA cards: gentle hover elevation (no geometry change) ------- No radius/overflow change here — the homepage CTAs use a "grow" hover animation that overflow:hidden would clip. */ .elementor-cta { transition: box-shadow var(--eco-ease); } .elementor-cta:hover { box-shadow: var(--eco-shadow-soft); } /* ---- Global keyboard focus: branded, accessible ring -------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .elementor-button:focus-visible, .wpforms-submit:focus-visible { outline: none; box-shadow: var(--eco-focus-ring); border-radius: 6px; }