/* ============================================================================ custom.css — project enhancements layered on top of the captured Elementor CSS. Loaded LAST in so these rules win the cascade. Scope is deliberately narrow: accessibility + subtle interaction polish only. No brand redesign, no layout changes. The single colour change is a small, owner-approved contrast lift so text on the brand mocha meets WCAG AA. ========================================================================== */ /* 1. Contrast (WCAG AA) The brand secondary (mocha) was #8F7865 = 4.16:1 on white — just under the 4.5:1 AA minimum for normal text (CTA buttons, active nav item). Nudge it to #836C59 = 4.94:1. Redefining the global custom property keeps every mocha usage consistent; it is only ever paired with light text, so darkening can only improve contrast, never worsen it. */ .elementor-kit-6 { --e-global-color-secondary: #836C59; } /* 2. Button hover/active feedback The captured :hover kept the exact same background, so buttons gave almost no feedback. Add a soft shadow + slight darken (no transform, so this never fights Elementor's own animation-* hover transforms) with a smooth transition. */ .elementor-button { transition: box-shadow .18s ease, filter .18s ease, background-color .3s ease; } .elementor-button:hover { box-shadow: 0 4px 14px rgba(22, 21, 19, .18); filter: brightness(.95); } .elementor-button:active { box-shadow: 0 2px 6px rgba(22, 21, 19, .22); filter: brightness(.9); } /* 3. Nav links — smooth colour transition on the existing hover/active states. */ .elementor-nav-menu .elementor-item, .elementor-nav-menu .elementor-sub-item { transition: color .2s ease, background-color .2s ease; } /* 4. Accessible keyboard focus Mouse users are unaffected (:focus-visible only). Gives keyboard users a clear focus ring on every interactive element. */ a:focus-visible, button:focus-visible, .elementor-button:focus-visible, .elementor-menu-toggle:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--e-global-color-secondary, #836C59); outline-offset: 3px; border-radius: 2px; } /* 5. Smooth in-page scrolling — honours users who prefer reduced motion. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* 7. Contact form — legibility + polish The captured Elementor form rendered as low-contrast brown-on-brown outlined fields on the mocha section (hard to read, cheap-looking). Give every contact form (kontakt / usluge / homepage share these classes) clean white filled fields with readable text, a proper custom select caret, and a high-contrast charcoal submit button that stands out against the mocha background. */ .elementor-form .elementor-field-group .elementor-field-textual { background-color: #ffffff !important; border: 1px solid #e7ded4 !important; border-radius: 8px !important; padding: 14px 16px !important; min-height: 52px !important; font-family: "DM Sans", Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; /* captured CSS set fields to a 700-italic "gotham" that isn't loaded -> unreadable faux-italic; normalize */ font-style: normal !important; letter-spacing: normal !important; line-height: 1.45 !important; color: #2b2926 !important; box-shadow: none !important; transition: border-color .2s ease, box-shadow .2s ease; } /* Native