/* ============================================================================ Get a Quote — Offcanvas Panel (quote-panel.css) ---------------------------------------------------------------------------- Premium right-side sliding panel used by footer.php. All rules are scoped under .qpanel-root / .qpanel / body.qpanel-no-scroll, so nothing here can leak into the rest of the site. Follows the site theme (body.light / body.dark) and the site palette: Accent : #4C6FFF → #213E76 (footer button gradient / focus glow) Light : #FFFFFF surfaces, #161616 ink, #585858 muted Dark : #161616 / #1F1F1F surfaces, #FFFFFF ink ========================================================================== */ /* -- design tokens: LIGHT (default) ---------------------------------------- */ .qpanel-root { --qp-accent: #4C6FFF; --qp-accent-2: #213E76; --qp-accent-hover: #2563EB; --qp-accent-soft: rgba(76, 111, 255, 0.10); --qp-accent-ring: rgba(76, 111, 255, 0.22); --qp-surface: #FFFFFF; /* panel background */ --qp-surface-2: #F7F8FC; /* header background */ --qp-field-bg: #F5F7FB; /* input background */ --qp-field-bg-focus: #FFFFFF; /* input background on focus */ --qp-border: #E4E8F1; --qp-ink: #161616; --qp-muted: #585858; --qp-label: #3A4356; --qp-placeholder: #9AA3B5; --qp-error: #D92D20; --qp-close-bg: #EEF1F7; --qp-close-border: #E0E5EF; --qp-close-ink: #3A4356; --qp-overlay: rgba(8, 10, 16, 0.60); --qp-shadow: -24px 0 64px rgba(10, 16, 38, 0.25); --qp-scroll-thumb: #C7CFDE; --qp-radius: 12px; --qp-ease: cubic-bezier(0.22, 1, 0.36, 1); --qp-duration: 0.45s; /* Overlay sits above everything on the page; panel sits above the overlay. Kept below the form plugin's OTP modal (z-index: 99999). */ --qp-z-overlay: 9980; --qp-z-panel: 9990; } /* -- design tokens: DARK (site adds .dark to ) ----------------------- */ body.dark .qpanel-root { --qp-accent-soft: rgba(76, 111, 255, 0.16); --qp-accent-ring: rgba(76, 111, 255, 0.32); --qp-surface: #1B1B1B; --qp-surface-2: #161616; --qp-field-bg: #1F1F1F; --qp-field-bg-focus: #262626; --qp-border: rgba(255, 255, 255, 0.12); --qp-ink: #FFFFFF; --qp-muted: #9CA3AF; --qp-label: #D3D9E4; --qp-placeholder: #7C8494; --qp-error: #F87171; --qp-close-bg: rgba(255, 255, 255, 0.06); --qp-close-border: rgba(255, 255, 255, 0.14); --qp-close-ink: #E6E9F0; --qp-overlay: rgba(0, 0, 0, 0.72); --qp-shadow: -24px 0 64px rgba(0, 0, 0, 0.60); --qp-scroll-thumb: #3D4450; } /* --------------------------------------------------------------------------- Body scroll lock (applied by quote-panel.js while the panel is open). --qp-scrollbar-comp equals the scrollbar width, so hiding the page scrollbar never causes a layout shift. ------------------------------------------------------------------------- */ body.qpanel-no-scroll { overflow: hidden !important; padding-right: var(--qp-scrollbar-comp, 0px); } /* --------------------------------------------------------------------------- Overlay ------------------------------------------------------------------------- */ .qpanel-overlay { position: fixed; inset: 0; z-index: var(--qp-z-overlay); background: var(--qp-overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; cursor: pointer; transition: opacity var(--qp-duration) var(--qp-ease), visibility 0s linear var(--qp-duration); } .qpanel-root.is-open .qpanel-overlay { opacity: 1; visibility: visible; transition: opacity var(--qp-duration) var(--qp-ease); } /* --------------------------------------------------------------------------- Panel shell ------------------------------------------------------------------------- */ .qpanel { position: fixed; top: 0; right: 0; z-index: var(--qp-z-panel); display: flex; flex-direction: column; width: min(100%, 850px); height: 100%; height: 100dvh; background: var(--qp-surface); color: var(--qp-ink); border-radius: 20px 0 0 20px; box-shadow: var(--qp-shadow); transform: translate3d(105%, 0, 0); visibility: hidden; outline: none; /* Only transform + visibility are animated — cheap for the GPU, no lag. */ transition: transform var(--qp-duration) var(--qp-ease), visibility 0s linear var(--qp-duration); } .qpanel-root.is-open .qpanel { transform: translate3d(0, 0, 0); visibility: visible; transition: transform var(--qp-duration) var(--qp-ease); } /* --------------------------------------------------------------------------- Header — follows the light/dark theme, with a soft blue brand glow ------------------------------------------------------------------------- */ .qpanel__header { position: relative; flex-shrink: 0; padding: 30px 78px 24px 36px; background: radial-gradient(130% 130% at 100% 0%, var(--qp-accent-soft), transparent 55%), var(--qp-surface-2); color: var(--qp-ink); border-bottom: 1px solid var(--qp-border); border-radius: 20px 0 0 0; } .qpanel__badge { display: inline-block; padding: 5px 14px; margin-bottom: 13px; background: var(--qp-accent-soft); color: var(--qp-accent); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; border: 1px solid var(--qp-accent-ring); border-radius: 999px; } body.dark .qpanel__badge { color: #8FA5FF; } .qpanel__title { margin: 0 0 8px; color: var(--qp-ink); font-size: clamp(22px, 4.5vw, 28px); font-weight: 700; line-height: 1.25; } .qpanel__subtitle { margin: 0; color: var(--qp-muted); font-size: 14.5px; line-height: 1.55; } /* --------------------------------------------------------------------------- Close button — quiet rounded square, brand-blue on hover ------------------------------------------------------------------------- */ .qpanel__close { position: absolute; top: 24px; right: 26px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: var(--qp-close-bg); border: 1px solid var(--qp-close-border); border-radius: 12px; color: var(--qp-close-ink); line-height: 0; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .qpanel__close svg { width: 16px; height: 16px; display: block; margin: auto; } .qpanel__close:hover { background: var(--qp-accent); border-color: var(--qp-accent); color: #FFFFFF; box-shadow: 0 6px 16px rgba(76, 111, 255, 0.35); } .qpanel__close:active { transform: scale(0.94); } .qpanel__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--qp-accent-ring); } /* --------------------------------------------------------------------------- Scrollable body ------------------------------------------------------------------------- */ .qpanel__body { flex: 1 1 auto; min-height: 0; /* required so the flex child can actually scroll */ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 28px 36px 36px; scrollbar-width: thin; scrollbar-color: var(--qp-scroll-thumb) transparent; } .qpanel__body::-webkit-scrollbar { width: 8px; } .qpanel__body::-webkit-scrollbar-track { background: transparent; } .qpanel__body::-webkit-scrollbar-thumb { background: var(--qp-scroll-thumb); border-radius: 8px; } /* --------------------------------------------------------------------------- Form layout — CSS grid, 2 columns on desktop, 1 column on small screens ------------------------------------------------------------------------- */ .qpanel__grid { display: grid; grid-template-columns: 3fr 3fr 3fr; gap: 18px 16px; } .qpanel__field--full { grid-column: 1 / -1; } .qpanel__label { display: block; margin: 0; cursor: pointer; } .qpanel__label-text { display: block; margin-bottom: 7px; color: var(--qp-label); font-size: 13px; font-weight: 600; letter-spacing: 0.2px; line-height: 1.3; } .qpanel__req { color: var(--qp-error); } /* --------------------------------------------------------------------------- Fields — scoped overrides of .form-control / .form-select inside the panel ------------------------------------------------------------------------- */ .qpanel .form-control, .qpanel .form-select { display: block; width: 100%; margin: 0; padding: 12px 14px; background-color: var(--qp-field-bg); border: 1px solid var(--qp-border); border-radius: var(--qp-radius); color: var(--qp-ink); font-size: 15px; line-height: 1.5; box-shadow: none; -webkit-appearance: none; appearance: none; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .qpanel .form-control::placeholder { color: var(--qp-placeholder); opacity: 1; } /* Focus state matches the footer's location input: blue glow (#4C6FFF) */ .qpanel .form-control:focus, .qpanel .form-select:focus { outline: none; background-color: var(--qp-field-bg-focus); border-color: var(--qp-accent); box-shadow: 0 0 0 4px var(--qp-accent-ring); } .qpanel .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A93A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; padding-right: 42px; cursor: pointer; } body.dark .qpanel .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D3D9E4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .qpanel .form-select option { color: var(--qp-ink); background: var(--qp-surface); } .qpanel textarea.form-control { min-height: 120px; resize: vertical; } /* Keep browser autofill from breaking the dark field styling */ .qpanel .form-control:-webkit-autofill, .qpanel .form-select:-webkit-autofill { -webkit-text-fill-color: var(--qp-ink); -webkit-box-shadow: 0 0 0 1000px var(--qp-field-bg) inset; transition: background-color 9999s ease-in-out 0s; } /* --------------------------------------------------------------------------- Submit button — same gradient family as the footer's send button ------------------------------------------------------------------------- */ .qpanel__submit { display: block; width: 100%; margin-top: 4px; padding: 15px 20px; background: linear-gradient(135deg, var(--qp-accent), var(--qp-accent-2)); border: none; border-radius: var(--qp-radius); color: #FFFFFF; font-size: 15px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 22px rgba(76, 111, 255, 0.28); transition: filter 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease; } .qpanel__submit:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(76, 111, 255, 0.40); } .qpanel__submit:active { transform: translateY(0); } .qpanel__submit:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--qp-accent-ring), 0 8px 22px rgba(76, 111, 255, 0.28); } .qpanel__submit:disabled { opacity: 0.7; cursor: progress; transform: none; filter: none; } /* --------------------------------------------------------------------------- Form-plugin feedback (success / error messages injected by dwss-form.js) ------------------------------------------------------------------------- */ .qpanel .dwss-message { grid-column: 1 / -1; margin-bottom: 18px; border-radius: 10px; } .qpanel .dwss-field-error { border-radius: 0 8px 8px 0; } body.dark .qpanel .dwss-field-error { background: rgba(220, 38, 38, 0.12); color: #FCA5A5; } /* --------------------------------------------------------------------------- Responsive ------------------------------------------------------------------------- */ /* Small phones + phones: full-width panel, single-column form */ @media (max-width: 575.98px) { .qpanel { width: 100%; border-radius: 0; } .qpanel__header { padding: 22px 66px 18px 20px; border-radius: 0; } .qpanel__close { top: 18px; right: 16px; width: 38px; height: 38px; border-radius: 10px; } .qpanel__body { padding: 20px 20px 28px; } .qpanel__grid { grid-template-columns: 1fr; gap: 16px; } } /* Tablets: comfortable width, still 2 columns */ @media (min-width: 576px) and (max-width: 991.98px) { .qpanel { width: min(100%, 636px); } } /* Large desktop */ @media (min-width: 1600px) { .qpanel { width: 660px; } } /* 4K and ultra-wide */ @media (min-width: 2200px) { .qpanel { width: 740px; } .qpanel__title { font-size: 32px; } .qpanel .form-control, .qpanel .form-select { padding: 14px 16px; font-size: 16px; } } /* Short viewports (landscape phones): tighten the header */ @media (max-height: 500px) { .qpanel__header { padding-top: 16px; padding-bottom: 14px; } .qpanel__badge { display: none; } } /* --------------------------------------------------------------------------- Accessibility: respect users who prefer reduced motion ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .qpanel, .qpanel-overlay, .qpanel__close, .qpanel__submit { transition-duration: 0.01ms !important; } }