/* ========================================================================== FOOTER CONTACT SECTION The footer template renders on every page, so every rule below is site wide by design. Element ids come from that template (2266), the form is the Contact Form 7 shortcode widget 4e223cf, which carries the two class names contact-form and cc-cf7. ADDITIVE ONLY. The look of the form lives in two places that this file never rewrites: wp-content/themes/hello-theme-child-master/cartcraft-forms.css the frozen field box: colour, padding, 1px rim in white at 10 percent, 12px radius, 44px height, 114px for the message, placeholder colour, plus the one focus rule (border-color #e3e3e3, outline 0). the site wide custom CSS row and column layout, submit pill, upload area, checkboxes. Exactly one declaration here touches anything those files own, and it does so on purpose: the focus rim colour, which supersedes the single grey focus rule instead of stacking a second ring next to it. Everything else writes a property nobody else claims. Where a shorthand elsewhere would have swept such a new layer away at equal weight, one extra class name in the chain settles it, which is why .ccx-field appears twice in the field rules. Colour tokens: accent #ff8e2b, warm rim #ffb765, glow blue hue 212, star gold #ffb765. ========================================================================== */ /* Alpha of the pointer glint inside a field. Registered so it can be transitioned: a plain custom property jumps between its values, and a pool of light that pops in and out beside the caret is exactly the kind of restlessness a text field must not have. Browsers without support keep the effect, they just switch it instead of fading it. */ @property --ccx-fx-glint { syntax: ""; inherits: false; initial-value: 0; } /* -------------------------------------------------------------------- 1. FORM CARD The card is the container a30a497: 16px radius, 1.2px rim in #33394A, a gradient fill. The ring takes that radius through border-radius: inherit, so nothing needs to be repeated here. The aura reaches 24px instead of the usual 36px because the card sits close to the footer padding on the right. That value is behind a min-width query on purpose. ccfx-v3.css pulls --gc-pad back to 0 below 1024px so the ring box, which is absolutely positioned and reaches past its card, cannot widen the page. That guard is written on the bare class and would lose to anything more specific, so a plain override here would have reopened the page sideways: at 390px the card is 358px wide, and 24px of overhang on each side turned a scroll width of 390 into 397. Above the guard the two do not meet. The soft interior light is the reason this card runs with spot-soft rather than nospot: the form is the one place on the page a visitor works in, and the card answering the pointer and the caret (the engine lights the fill on :focus-within as well) reads as the section being live rather than decorated. -------------------------------------------------------------------- */ @media (min-width: 1025px) { .elementor-2266 .mmrb-glowcard[data-id="a30a497"] { --gc-pad: 24px; } } /* -------------------------------------------------------------------- 2. FIELDS Host is the control itself, not the span around it. Three reasons, all measured on the live page: a) That span is 236 by 18 pixels while the input inside it is 236 by 44. It is an inline box, so its height comes from the line box, not from the field. A decoration drawn into that box lands in the wrong place and only lines up again once the span is forced into a block, which is a layout change to frozen markup. b) Contact Form 7 appends the validation message into that same span. After a failed submit the box grows, and a rim anchored to it would then trace field plus error text instead of the field. c) A background layer on the control always paints below the value and the placeholder, because text is foreground. Whatever the light does, it can never sit on top of what somebody is typing. A pseudo element would need a z-index fight to get anywhere near that guarantee. The class mmrb-specbtn is on these controls for one purpose: it is the documented way into the shared pointer loop of mm-rb.js, which then writes --mm-x / --mm-y / --edge-proximity onto the element. Its own two pseudo elements are switched off below, so none of the button look arrives here. On an input they would not render anyway, on the upload area, which is a real div, they would. Doubled class name: the site wide custom CSS is printed after the enqueued stylesheets, so at equal weight it wins. Two class names on .ccx-field settle that without an !important. -------------------------------------------------------------------- */ .cc-cf7 .ccx-field.mmrb-specbtn::before, .cc-cf7 .ccx-field.mmrb-specbtn::after { content: none; } /* mmrb-specbtn clips its host so its glint stays inside the button. On a message field that would take the scrollbar away from a long text, so the controls get their own overflow back. */ .cc-cf7 .ccx-field.mmrb-specbtn { overflow: visible; } .cc-cf7 textarea.ccx-field.mmrb-specbtn { overflow: auto; } .cc-cf7 .ccx-field.ccx-field { /* 0 to 100 from the shared loop, as a plain factor for the colours */ --ccx-fx-near: calc(var(--edge-proximity, 0) / 100); background-image: radial-gradient( circle 90px at var(--mm-x, 50%) var(--mm-y, 50%), rgb(255 255 255 / calc(var(--ccx-fx-glint) * 100%)), rgb(255 255 255 / 0) 72% ); /* Warm rim that answers the pointer while it is still approaching. Same idea as the rim on the buttons, at roughly a third of its strength: a field is read, not pressed. */ box-shadow: 0 0 0 1px rgb(255 183 101 / calc(var(--ccx-fx-near) * 42%)), 0 0 14px -4px rgb(255 142 43 / calc(var(--ccx-fx-near) * 40%)); transition: --ccx-fx-glint 0.32s ease-out, border-color 0.25s ease-out, box-shadow 0.25s ease-out; } /* The loop leaves the last reading on the element when the pointer walks away, and an inline value outranks a stylesheet. Reset it here so the rim goes out instead of freezing at its last brightness. */ .cc-cf7 .ccx-field.ccx-field:not(:hover):not(.mmrb-near) { --edge-proximity: 0 !important; } /* The glint follows a real pointer only. On touch there is nothing to follow, and with reduced motion the engine never registers the field in the first place, so this keeps the two in step. */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .cc-cf7 .ccx-field.ccx-field:hover { --ccx-fx-glint: 0.075; } } /* Focus. cartcraft-forms.css turns the rim light grey here; that single rule is superseded rather than doubled, so the field has one focus look and it is the brand one. The ring stays on regardless of motion settings, it is the state that tells somebody where they are typing. The long chain is what it takes to reach the rim colour. Two rules in that file claim border-color: the focus one at three names, and the field box itself at five, and the file is printed after this one, so a tie goes to it. The selector below mirrors that five name chain and adds the second class name to land one above it. The other two declarations would not need the chain, they are kept together so the state reads as one block. */ .elementor-2266 .elementor-element.elementor-element-4e223cf .ccx-field.ccx-field:focus, .elementor-2266 .elementor-element.elementor-element-4e223cf .ccx-field.ccx-field:focus-visible { border-color: rgb(255 142 43 / 0.7); box-shadow: 0 0 0 1px rgb(255 142 43 / 0.32), 0 0 18px -5px rgb(255 142 43 / 0.55); outline: 0; } @media (prefers-reduced-motion: no-preference) { .cc-cf7 .ccx-field.ccx-field:focus { --ccx-fx-glint: 0.06; } } /* -------------------------------------------------------------------- 3. SUBMIT BUTTON Send Message is a real