@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600&display=swap'); /* ========================================================================== Norwich Glass — overrides for the SmartGlazier LiteApp contact form. Matches the reference form at https://norwich-glass.bigfork.dev/get-in-touch/ NOTE: in this app #root is the element, so #root… selectors win on specificity over the app's class rules. ========================================================================== */ /* Brand palette */ #root { --ng-dark-blue: #083d8c; /* section headings */ --ng-light-blue: #79c0ff; /* input / checkbox borders */ --ng-text: #222428; /* body / label / input text */ --ng-green: #3a5a40; /* submit button */ --ng-arrow: #beef9e; /* button arrow accent */ --ng-placeholder:#6a6a6a; } /* -------------------------------------------------------------------------- Fonts — the app hardcodes "Open Sans"; force Archivo everywhere. -------------------------------------------------------------------------- */ #root, #root .dx-widget, #root .dx-texteditor-input, #root input, #root textarea, #root button, #root label, #root .card-header, #root .sales-item-submit-note, #root .sales-item-submit-note * { /* note has inline font-family: Calibri */ font-family: 'Archivo', sans-serif !important; } /* -------------------------------------------------------------------------- SmartGlazier theme variables. -------------------------------------------------------------------------- */ #root { /* Corners — reference uses 5px (app default was squared) */ --sb-primary-button-border-radius: 5px; --sb-primary-button-hover-border-radius: 5px; --sb-primary-button-focus-border-radius: 5px; --sb-input-border-radius: 5px; --sb-input-hover-border-radius: 5px; --sb-input-focus-border-radius: 5px; --sb-card-border-radius: 0; /* Primary button — green, matching the reference "Submit form" button */ --sb-primary-button-background-color: var(--ng-green); --sb-primary-button-text-color: #fff; --sb-primary-button-border-color: transparent; --sb-primary-button-hover-background-color: var(--ng-green); --sb-primary-button-hover-text-color: #fff; --sb-primary-button-hover-border-color: transparent; --sb-primary-button-focus-background-color: var(--ng-green); --sb-primary-button-focus-text-color: #fff; --sb-primary-button-focus-border-color: transparent; /* Links */ --sb-text-link-color: var(--ng-dark-blue); --sb-text-link-hover-color: var(--ng-light-blue); /* Inputs — light-blue border, white background */ --sb-input-background-color: #fff; --sb-input-text-color: var(--ng-text); --sb-input-border-color: var(--ng-light-blue); --sb-input-hover-background-color: #fff; --sb-input-hover-text-color: var(--ng-text); --sb-input-hover-border-color: var(--ng-light-blue); --sb-input-focus-background-color: #fff; --sb-input-focus-text-color: var(--ng-text); --sb-input-focus-border-color: var(--ng-dark-blue); /* Card — header text on-brand, transparent fill, no border (set below too) */ --sb-card-header-background-color: transparent; --sb-card-header-text-color: var(--ng-dark-blue); --sb-card-background-color: transparent; --sb-card-text-color: var(--ng-text); --sb-card-border-color: transparent; } /* -------------------------------------------------------------------------- Card header & chrome. Keep the "Enter Your Details" heading but make it on-brand, and drop the card border/padding so the fields sit cleanly like the reference. -------------------------------------------------------------------------- */ #root .card-header { background: transparent; color: var(--ng-dark-blue); font-size: 18px; font-weight: 600; line-height: 1.3; padding: 0 0 16px; border-bottom: none; } #root .lite-card.card { border: none; box-shadow: none; } #root .lite-card > .card-body { padding: 0; background: transparent; } /* -------------------------------------------------------------------------- Layout — force a single column (the app floats fields left at 640px) and drop the per-breakpoint horizontal margin (e.g. .bp-md … .form-item) so the fields run full width. -------------------------------------------------------------------------- */ /* Outer container — full width, no gutters (our site column wraps the iframe). */ #root .container { max-width: none; padding-left: 0; padding-right: 0; } #root .card-body > .field-edit { float: none !important; width: 100% !important; margin: 0 0 18px; } /* -------------------------------------------------------------------------- Inputs / textareas. Border colour + radius come from the --sb-input-* vars above; typography here. -------------------------------------------------------------------------- */ #root .dx-texteditor-input { color: var(--ng-text); font-size: 16px; font-weight: 300; } /* The app reserves top/right padding for the floating label and the validation badge; with the label moved above and the badge hidden, reset to a clean box. 16px vertical for a roomier field (text inputs and textareas alike). */ #root .text-edit .dx-texteditor-input, #root .control-memo .dx-texteditor-input { padding: 16px 12px !important; } #root .dx-texteditor-input::placeholder { color: var(--ng-placeholder); font-weight: 300; } /* Hide the "!" validation badge (the ::after on the input container). */ #root .dx-texteditor-input-container::after { display: none !important; } /* Labels now sit above the fields, so hide DevExtreme's floating-label overlay. (Single-line fields then show nothing; the Requirements textarea keeps its native placeholder. Leaving the overlay visible double-prints the textarea hint once the label is lifted out.) */ #root .dx-placeholder { display: none !important; } /* -------------------------------------------------------------------------- Field labels — move above each input. The app's is a sibling AFTER .dx-texteditor inside .text-edit and is absolutely positioned (floating-label style). Lay them out in a column with the label first. -------------------------------------------------------------------------- */ #root .text-edit { display: flex; flex-direction: column-reverse; /* DOM order is [editor, label] → label on top */ } #root .text-edit label { position: static; transform: none; background: transparent; font-size: 16px; font-weight: 300; line-height: 1.4; color: var(--ng-text); margin: 0 0 6px; padding: 0; max-width: none; white-space: normal; pointer-events: auto; } /* The attachments title is absolutely positioned (sits inside the box). Make it flow as a normal block label above the box, matching the other fields. */ #root .lite-attachments-container-title { position: static !important; display: block; font-size: 16px; font-weight: 300; line-height: 1.4; color: var(--ng-text); margin: 0 0 6px; } /* -------------------------------------------------------------------------- File upload — border the inner box only (so the title sits outside it, like the other fields). Leave the app's Select File / Clipboard / drop zone. -------------------------------------------------------------------------- */ #root .lite-attachments-container { border: none; background: transparent; padding-left: 0; padding-right: 0; } #root .attachments-container { border: 1px solid var(--ng-light-blue); border-radius: 5px; padding: 12px; background: #fff; } /* -------------------------------------------------------------------------- Submit button — green, square corners, drop shadow, brand arrow after text. -------------------------------------------------------------------------- */ #root .quote-submit-btn { position: relative; overflow: hidden; /* clips the hover shimmer */ display: inline-flex; align-items: center; gap: 8px; height: auto; padding: 14px 28px; font-size: 18px; font-weight: 600; letter-spacing: .9px; box-shadow: 2px 2px 5px rgba(0, 0, 0, .25); transition: transform .15s cubic-bezier(.23, 1, .32, 1), box-shadow .15s cubic-bezier(.23, 1, .32, 1), background-color .15s ease; } /* Hide the app's prepended Font Awesome icon… */ #root .quote-submit-btn svg.icon-prepend { display: none; } /* …and append our brand arrow (masked so we can colour it). */ #root .quote-submit-btn::after { content: ''; flex: 0 0 auto; width: 22px; height: 14px; background-color: var(--ng-arrow); -webkit-mask: url('../images/brand/arrow.svg') no-repeat center / contain; mask: url('../images/brand/arrow.svg') no-repeat center / contain; transition: transform .15s cubic-bezier(.23, 1, .32, 1); } /* Norwich Glass hover effect: a skewed light "shine" parked off to the left… */ #root .quote-submit-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(to right, transparent 0%, #fff 50%, transparent 100%); opacity: .15; mix-blend-mode: screen; transform: translate(-150%) skew(-20deg); transition: transform .4s; pointer-events: none; } /* Pressed: scale down slightly. */ #root .quote-submit-btn:active { transform: scale(.97); } @media (hover: hover) and (pointer: fine) { /* …that sweeps across on hover, while the button nudges into its shadow and the arrow edges forward. */ #root .quote-submit-btn:hover { transform: translate(2px, 2px); box-shadow: 0 0 2px rgba(0, 0, 0, .25); } #root .quote-submit-btn:hover::before { transform: translate(250%) skew(-20deg); } #root .quote-submit-btn:hover::after { transform: translate(25%); } /* Pressed while hovering: keep the nudge and add the scale. */ #root .quote-submit-btn:hover:active { transform: translate(2px, 2px) scale(.97); } } /* -------------------------------------------------------------------------- "Stay up to date" switch — restyled to look like the reference checkbox. The app uses a dx-switch; its hidden input[value] stays "false" even when on, so the checked state is the .dx-switch-on-value class on .control-switch. -------------------------------------------------------------------------- */ #root .control-switch.dx-switch, #root .control-switch .dx-switch-wrapper, #root .control-switch .dx-switch-container, #root .control-switch .dx-switch-inner { width: 24px; min-width: 24px; height: 24px; } #root .control-switch .dx-switch-wrapper { position: relative; border: 1px solid var(--ng-light-blue); border-radius: 5px; background: #fff; overflow: hidden; transform: none; } /* The container paints white over the wrapper (and carries a grey border) — clear both so the fill + tick show and only the wrapper's border remains. */ #root .control-switch .dx-switch-container { background: transparent !important; border: none !important; } /* Hide the toggle internals (track / handle). */ #root .control-switch .dx-switch-on, #root .control-switch .dx-switch-off, #root .control-switch .dx-switch-handle { display: none !important; } /* Checked: fill + white tick. */ #root .control-switch.dx-switch-on-value .dx-switch-wrapper { background: var(--ng-light-blue); border-color: var(--ng-light-blue); } #root .control-switch.dx-switch-on-value .dx-switch-wrapper::after { content: ''; position: absolute; left: 8px; top: 3px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* -------------------------------------------------------------------------- Consent row — drop the container's horizontal padding so it lines up with the fields, and match its label to the other field labels. -------------------------------------------------------------------------- */ #root .accept-sms-container { padding-left: 0; padding-right: 0; } #root .accept-sms-container label { font-size: 16px; font-weight: 300; color: var(--ng-text); } /* Consent note — drop horizontal padding so it lines up with the fields. */ #root .sales-item-submit-note { padding-left: 0; padding-right: 0; } /* -------------------------------------------------------------------------- Footer nav — Restart in brand dark blue (was a red link-danger). Only appears once the form has been edited. -------------------------------------------------------------------------- */ #root .btn-nav-restart .button { color: var(--ng-dark-blue) !important; } #root .btn-nav-restart .button:hover { color: var(--ng-light-blue) !important; } /* When the Next/Submit button is present (.btn-nav-next not empty), hide Restart. */ #root .footer-nav:has(.btn-nav-next:not(:empty)) .btn-nav-restart { display: none; } /* -------------------------------------------------------------------------- Alert styles -------------------------------------------------------------------------- */ #root .alert { padding: 1rem !important; } #root .alert.alert-success { border-color: var(--ng-green); color: white; background-color: var(--ng-green); }