/* Digital You CIC — form modernisation + reCAPTCHA badge pinning Loads after qa2 (@986), before a11y (@999). Reversible: delete this file + loader. lukeduff.co.uk — 19 Jul */ /* =========================================================================== §1 reCAPTCHA v3 badge — pin to the VIEWPORT bottom-right, always. Google injects the badge as position:fixed, but any Elementor ancestor with transform / filter / backdrop-filter / will-change (our reveal-motion layer) becomes its containing block, so it lands inside the form section instead of the page corner. dycic-forms.js re-parents it to ; this hard-pins it. Google's own collapse mechanism is `right:-186px` (badge is 256px wide, so only the 70px logo tile peeks out) sliding to `right:0` on hover. Do NOT override `right` with a positive value — that pins the badge permanently expanded. =========================================================================== */ .grecaptcha-badge{ position:fixed!important; bottom:14px!important; right:-186px!important; /* collapsed: logo tile only, flush to the edge */ left:auto!important; top:auto!important; z-index:9990!important; /* under the a11y widget, over page content */ transform:none!important; margin:0!important; overflow:hidden!important; box-shadow:0 4px 14px rgba(13,58,107,.22)!important; border-radius:4px 0 0 4px!important; transition:right .3s ease!important; } /* Expanded on hover / keyboard focus only */ .grecaptcha-badge:hover, .grecaptcha-badge:focus-within{ right:0!important; } /* Mobile: lift clear of browser chrome + the cookie/a11y launchers */ @media (max-width:767px){ .grecaptcha-badge{bottom:76px!important} } @media (prefers-reduced-motion:reduce){ .grecaptcha-badge{transition:none!important} } /* =========================================================================== §2 Elementor Pro forms — modern field styling (site-wide). Scoped to .elementor-form so the footer newsletter keeps its own tighter treatment from dycic-footer-form.php where that is more specific. =========================================================================== */ .elementor-form .elementor-field-group{margin-bottom:4px} .elementor-form .elementor-field-group > label.elementor-field-label{ font-family:"Source Sans 3",sans-serif; font-size:14px; font-weight:600; letter-spacing:.01em; color:var(--blue,#144e8c); margin-bottom:7px; display:block; } .elementor-form .elementor-field-group .elementor-mark-required .elementor-field-label:after{ color:#d0454c; font-weight:700; margin-left:3px; } /* --- Text inputs, selects, textareas: one shared control surface --- */ .elementor-form .elementor-field-textual, .elementor-form input[type=text].elementor-field, .elementor-form input[type=email].elementor-field, .elementor-form input[type=tel].elementor-field, .elementor-form input[type=url].elementor-field, .elementor-form input[type=number].elementor-field, .elementor-form select.elementor-field, .elementor-form textarea.elementor-field{ width:100%; padding:13px 16px; border:1.5px solid rgba(20,78,140,.16)!important; border-radius:12px!important; background-color:#f6f9fc!important; color:var(--ink,#1e2a3a); font-family:"Source Sans 3",sans-serif; font-size:16px; /* 16px stops iOS Safari zoom-on-focus */ line-height:1.45; box-shadow:none; transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease; -webkit-appearance:none; appearance:none; } .elementor-form .elementor-field-textual::placeholder, .elementor-form textarea.elementor-field::placeholder{ color:#8d9aa9; opacity:1; } .elementor-form .elementor-field-textual:hover, .elementor-form select.elementor-field:hover, .elementor-form textarea.elementor-field:hover{ border-color:rgba(20,78,140,.32)!important; } .elementor-form .elementor-field-textual:focus, .elementor-form select.elementor-field:focus, .elementor-form textarea.elementor-field:focus{ outline:none; background-color:#fff!important; border-color:var(--turquoise,#16becf)!important; box-shadow:0 0 0 4px rgba(22,190,207,.18)!important; } /* Keyboard users still get a visible ring even where focus styles are reset */ .elementor-form .elementor-field-textual:focus-visible, .elementor-form select.elementor-field:focus-visible, .elementor-form textarea.elementor-field:focus-visible{ outline:2px solid transparent; outline-offset:2px; } /* --- Select: replace the OS arrow with a brand chevron --- */ .elementor-form select.elementor-field{ padding-right:44px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23144e8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important; background-position:right 16px center!important; background-size:14px 9px!important; } /* Elementor wraps selects in a div that can re-add an arrow — hide it */ .elementor-form .elementor-field-type-select .elementor-select-wrapper:after, .elementor-form .elementor-field-type-select .select-caret-down-wrapper{ display:none!important; } /* --- Textarea --- */ .elementor-form textarea.elementor-field{ min-height:140px; resize:vertical; } /* --- Submit button: brand pill, subtle lift --- */ .elementor-form .elementor-field-type-submit{margin-top:6px} .elementor-form button[type=submit].elementor-button{ width:100%; justify-content:center; background:var(--turquoise,#16becf); color:var(--blue-deep,#0d3a6b); font-family:"Source Sans 3",sans-serif; font-weight:700; font-size:16.5px; letter-spacing:.01em; padding:15px 28px; border:none; border-radius:999px; cursor:pointer; box-shadow:0 4px 14px rgba(22,190,207,.28); transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease; } .elementor-form button[type=submit].elementor-button:hover{ background:#12aebd; transform:translateY(-2px); box-shadow:0 10px 24px rgba(22,190,207,.4); } .elementor-form button[type=submit].elementor-button:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(22,190,207,.3); } .elementor-form button[type=submit].elementor-button:focus-visible{ outline:3px solid var(--blue,#144e8c); outline-offset:3px; } /* --- Messages --- */ .elementor-form .elementor-message{ font-family:"Source Sans 3",sans-serif; font-size:15px; line-height:1.5; margin-top:12px; padding:12px 16px; border-radius:10px; } .elementor-form .elementor-message.elementor-message-success{ background:rgba(13,122,79,.08);color:#0d7a4f; } .elementor-form .elementor-message.elementor-message-danger{ background:rgba(208,69,76,.08);color:#b3383e; } .elementor-form .elementor-field-group.elementor-error .elementor-field{ border-color:#d0454c!important; background-color:#fff6f6!important; } @media (prefers-reduced-motion:reduce){ .elementor-form .elementor-field-textual, .elementor-form select.elementor-field, .elementor-form textarea.elementor-field, .elementor-form button[type=submit].elementor-button{transition:none} .elementor-form button[type=submit].elementor-button:hover{transform:none} } /* Small screens: a touch less padding so the card breathes */ @media (max-width:767px){ .elementor-form .elementor-field-textual, .elementor-form select.elementor-field, .elementor-form textarea.elementor-field{padding:12px 14px} .elementor-form button[type=submit].elementor-button{padding:14px 24px;font-size:16px} }