/* ============================================================================= Quote form ----------------------------------------------------------------------------- One markup, two skins. `.fpq-light` for white page sections, `.fpq-dark` for the navy panels — the only difference between them is the value of six custom properties, so a change to the layout cannot land in one skin and miss the other. The brand colour is INHERITED from the theme via --fp-blue-dk rather than hardcoded, with #172554 only as a fallback. That matters because this file is shared between two sites whose brands differ — one is navy #172554, the other teal #083a50 — and a hardcoded value would have quietly shipped the wrong brand to the second one. One file, each site correct. WhatsApp green appears in exactly one place, on the button that opens WhatsApp: it is the destination's brand, not decoration, and it is recognised before it is read. ============================================================================= */ .fpq { --q-navy: var(--fp-blue-dk, #172554); --q-mid: var(--fp-blue, #2c3f75); --q-wa: #25d366; --q-wa-dk: #1fbe5b; /* Skin-controlled. Overridden wholesale by .fpq-dark below. */ --q-surface: #fff; --q-sunken: #fbfcfe; --q-line: #e4e7f0; --q-edge: #ccd2e4; --q-text: #16203a; --q-body: #4a5570; --q-muted: #78829c; --q-accent: var(--q-navy); --q-seg-bg: #eef0f6; --q-r-sm: 8px; --q-r: 12px; font-family: inherit; } .fpq * , .fpq *::before, .fpq *::after { box-sizing: border-box; } .fpq-dark { --q-surface: #1e293b; --q-sunken: #172033; --q-line: #334155; --q-edge: #3d4b63; --q-text: #f1f5f9; --q-body: #cbd5e1; --q-muted: #94a3b8; --q-accent: #93b4ff; /* navy is unreadable on navy — lift it for dark */ --q-seg-bg: #0f172a; } .fpq-title { margin: 0 0 12px; font-size: 20px; color: var(--q-text); } /* ── The promise ─────────────────────────────────────────────────── */ .fpq-promise { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 16px; padding: 13px 15px; background: var(--q-sunken); border: 1px solid var(--q-line); border-left: 3px solid var(--q-accent); border-radius: 0 var(--q-r-sm) var(--q-r-sm) 0; font-size: 13px; line-height: 1.6; color: var(--q-body); } .fpq-promise-mark { font-size: 15px; line-height: 1.4; flex-shrink: 0; } .fpq-promise strong { color: var(--q-text); display: block; margin-bottom: 2px; } /* ── Form shell ──────────────────────────────────────────────────── */ .fpq-form { display: flex; flex-direction: column; gap: 15px; } .fpq-row { display: flex; flex-wrap: wrap; gap: 13px 16px; align-items: flex-start; } .fpq-row > .fpq-field { flex: 1 1 190px; min-width: 0; } .fpq-grow { flex: 2 1 230px !important; } .fpq-narrow { flex: 0 1 120px !important; } .fpq-field { display: block; min-width: 0; } .fpq-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; font-weight: 650; color: var(--q-text); margin-bottom: 5px; } .fpq-req { color: #ef6b6b; font-style: normal; font-weight: 700; } .fpq-opt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--q-muted); background: var(--q-seg-bg); padding: 2px 6px; border-radius: 4px; } .fpq-hint { display: block; font-size: 11.5px; line-height: 1.5; color: var(--q-muted); margin-top: 5px; } .fpq-input { width: 100%; height: 42px; padding: 0 12px; font-size: 14.5px; border: 1px solid var(--q-edge); border-radius: var(--q-r-sm); background: var(--q-surface); color: var(--q-text); font-family: inherit; transition: border-color .15s, box-shadow .15s; } .fpq-dark .fpq-input { background: var(--q-sunken); } .fpq-input:focus { outline: none; border-color: var(--q-accent); box-shadow: 0 0 0 3px rgba(23, 37, 84, .14); } .fpq-dark .fpq-input:focus { box-shadow: 0 0 0 3px rgba(147, 180, 255, .22); } .fpq-input::placeholder { color: var(--q-muted); opacity: .75; } /* Date inputs render an invisible glyph on a dark field without this. */ .fpq-dark .fpq-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.75); } /* ── The three declarations ──────────────────────────────────────── */ .fpq-flags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; } .fpq-flag { border: 1px solid var(--q-line); border-radius: var(--q-r); padding: 12px 13px; background: var(--q-sunken); } .fpq-flag-q { display: block; font-size: 13px; font-weight: 650; color: var(--q-text); line-height: 1.35; } .fpq-flag-h { display: block; font-size: 11px; color: var(--q-muted); margin: 3px 0 9px; line-height: 1.4; } .fpq-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--q-seg-bg); border-radius: var(--q-r-sm); padding: 3px; } .fpq-seg-opt { position: relative; display: block; cursor: pointer; } .fpq-seg-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .fpq-seg-opt span { display: block; text-align: center; padding: 7px 4px; border-radius: 6px; font-size: 12.5px; font-weight: 650; color: var(--q-body); transition: background .12s, color .12s; } .fpq-seg-opt input:checked + span { background: var(--q-navy); color: #fff; } .fpq-dark .fpq-seg-opt input:checked + span { background: #3b5bdb; color: #fff; } .fpq-seg-opt input:focus-visible + span { box-shadow: 0 0 0 2px var(--q-accent); } .fpq-why { border: 1px solid var(--q-line); border-radius: var(--q-r-sm); background: var(--q-sunken); font-size: 12px; } .fpq-why summary { cursor: pointer; padding: 9px 13px; color: var(--q-accent); font-weight: 650; } .fpq-why p { margin: 0; padding: 0 13px 12px; color: var(--q-body); line-height: 1.65; max-width: 74ch; } /* ── Dimensions and units ────────────────────────────────────────── */ .fpq-dims { display: flex; align-items: center; gap: 6px; } .fpq-dims .fpq-input { text-align: center; padding: 0 6px; min-width: 0; } .fpq-x { color: var(--q-muted); font-size: 13px; flex-shrink: 0; } .fpq-suffix { color: var(--q-muted); font-size: 12px; flex-shrink: 0; } .fpq-unit { position: relative; } .fpq-unit .fpq-input { padding-right: 38px; } .fpq-unit > em { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; color: var(--q-muted); pointer-events: none; } /* ── Chips ───────────────────────────────────────────────────────── */ .fpq-chips { display: flex; gap: 8px; flex-wrap: wrap; } .fpq-chip { position: relative; cursor: pointer; } .fpq-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .fpq-chip span { display: block; padding: 9px 17px; border-radius: 999px; border: 1.5px solid var(--q-edge); background: var(--q-surface); font-size: 13px; font-weight: 600; color: var(--q-body); white-space: nowrap; transition: border-color .15s, background .15s, color .15s; } .fpq-dark .fpq-chip span { background: var(--q-sunken); } .fpq-chip:hover span { border-color: var(--q-accent); color: var(--q-accent); } .fpq-chip input:checked + span { background: var(--q-navy); border-color: var(--q-navy); color: #fff; } .fpq-dark .fpq-chip input:checked + span { background: #3b5bdb; border-color: #3b5bdb; color: #fff; } /* ── Dates ───────────────────────────────────────────────────────── */ .fpq-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fpq-dates label { display: block; } .fpq-dates span { display: block; font-size: 10.5px; font-weight: 650; color: var(--q-muted); margin-bottom: 4px; } /* ── Upload ──────────────────────────────────────────────────────── */ .fpq-drop { position: relative; } .fpq-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .fpq-drop-inner { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; padding: 13px 15px; text-align: center; cursor: pointer; border: 1.5px dashed var(--q-edge); border-radius: var(--q-r); background: var(--q-sunken); color: var(--q-muted); font-size: 12px; transition: border-color .15s, background .15s; } .fpq-drop-inner svg { color: var(--q-accent); flex-shrink: 0; } .fpq-drop-inner strong { color: var(--q-text); font-size: 13.5px; } .fpq-drop:hover .fpq-drop-inner, .fpq-drop.is-over .fpq-drop-inner { border-color: var(--q-accent); } .fpq-files { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .fpq-fileitem { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 11px; background: var(--q-sunken); border: 1px solid var(--q-line); border-radius: 7px; font-size: 12px; } .fpq-filename { color: var(--q-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fpq-filesize { color: var(--q-muted); font-size: 11px; flex-shrink: 0; } /* ── Status ──────────────────────────────────────────────────────── */ .fpq-status { padding: 10px 13px; border-radius: var(--q-r-sm); font-size: 13px; line-height: 1.5; } .fpq-status.is-error { background: rgba(220, 38, 38, .10); color: #dc2626; border: 1px solid rgba(220, 38, 38, .25); } .fpq-dark .fpq-status.is-error { color: #fca5a5; } /* ── Submit row ──────────────────────────────────────────────────── */ .fpq-submit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--q-line); } .fpq-send { background: var(--q-navy); color: #fff; border: 1px solid var(--q-navy); padding: 13px 30px; border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s; } .fpq-send:hover:not(:disabled) { background: var(--q-mid); border-color: var(--q-mid); } .fpq-send:disabled { opacity: .6; cursor: progress; } .fpq-dark .fpq-send { background: #3b5bdb; border-color: #3b5bdb; } .fpq-dark .fpq-send:hover:not(:disabled) { background: #4c6ae8; border-color: #4c6ae8; } .fpq-chat { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--q-edge); background: transparent; color: #12844a; font-size: 13px; font-weight: 650; text-decoration: none; transition: border-color .15s, background .15s; } .fpq-dark .fpq-chat { color: #6ee7a8; } .fpq-chat:hover { border-color: var(--q-wa); background: rgba(37, 211, 102, .10); } .fpq-privacy { font-size: 11.5px; color: var(--q-muted); line-height: 1.5; flex: 1 1 200px; } /* ── Success ─────────────────────────────────────────────────────── */ .fpq-done-head { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 14px; } .fpq-done-mark { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 17px; line-height: 32px; text-align: center; font-weight: 700; } .fpq-done-head h3 { margin: 2px 0 4px; font-size: 18px; color: var(--q-text); } .fpq-done-head p { margin: 0; font-size: 13.5px; color: var(--q-body); line-height: 1.6; } /* ── The handoff ────────────────────────────────────────────────────── The bubble sits in normal flow ABOVE the button, not absolutely positioned over it. The first version floated it with `position:absolute` and reserved a fixed 34px of padding for it to live in. That works right up until the text wraps to two lines — which it does at panel width — and then the bubble sits on top of the button label. Reserving a guessed amount of space for content whose height you do not control is the bug; letting the bubble take the space it actually needs is the fix. Now it cannot overlap at any width, in any language, at any font size. ------------------------------------------------------------------- */ .fpq-handoff { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .fpq-bubble { position: relative; /* for the tail only — it is in the flow */ align-self: stretch; background: var(--q-navy); color: #fff; padding: 10px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; box-shadow: 0 6px 18px rgba(23, 37, 84, .22); margin-bottom: 4px; /* clearance for the tail */ opacity: 0; transform: translateY(6px) scale(.97); transform-origin: 26px 100%; } .fpq-bubble strong { display: block; font-size: 13.5px; margin-bottom: 2px; } /* Tail, pointing down at the button below it. */ .fpq-bubble::after { content: ""; position: absolute; bottom: -5px; left: 24px; width: 11px; height: 11px; background: var(--q-navy); transform: rotate(45deg); border-radius: 2px; } /* The action row. The WhatsApp button is the primary action; the email fallback sits beside it as a quiet text link rather than a rival button. */ .fpq-handoff-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .fpq-handoff.is-live .fpq-bubble { animation: fpqBubblePop .42s cubic-bezier(.34, 1.56, .64, 1) .3s forwards; } @keyframes fpqBubblePop { from { opacity: 0; transform: translateY(6px) scale(.94); } 60% { opacity: 1; transform: translateY(-2px) scale(1.02); } to { opacity: 1; transform: none; } } /* One nudge on the button, landing just after the bubble so the pair reads as a single gesture rather than two things moving independently. */ .fpq-handoff.is-live .fpq-btn-wa { animation: fpqNudge .5s ease-out .68s 1; } @keyframes fpqNudge { 0%, 100% { transform: none; } 30% { transform: translateY(-3px); } 60% { transform: translateY(0); } } .fpq-btn-wa-lg { padding: 13px 26px; font-size: 15px; box-shadow: 0 4px 14px rgba(37, 211, 102, .32); } .fpq-mail-link { font-size: 12.5px; color: var(--q-muted); text-decoration: underline; } .fpq-mail-link:hover { color: var(--q-accent); } /* Honeypot: off-screen rather than display:none, which some bots skip. */ .fpq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 820px) { .fpq-flags { grid-template-columns: 1fr; } .fpq-flag { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 14px; } .fpq-flag-q, .fpq-flag-h { grid-column: 1; } .fpq-flag-h { margin: 0; } .fpq-seg { grid-column: 2; grid-row: 1 / span 2; width: 130px; } } @media (max-width: 560px) { .fpq-row > .fpq-field, .fpq-grow, .fpq-narrow { flex: 1 1 100% !important; } .fpq-submit { flex-direction: column; align-items: stretch; } .fpq-send, .fpq-chat { width: 100%; text-align: center; justify-content: center; } .fpq-flag { grid-template-columns: 1fr; } .fpq-seg { grid-column: 1; grid-row: auto; width: 100%; margin-top: 8px; } .fpq-fast-acts { flex-direction: column; } .fpq-btn-wa, .fpq-btn-mail { justify-content: center; } } @media (prefers-reduced-motion: reduce) { .fpq-input, .fpq-chip span, .fpq-seg-opt span, .fpq-send, .fpq-drop-inner { transition: none; } } /* ── WhatsApp bubble: form first, chat second ──────────────────────── The float bubble now offers both routes. The form button is filled navy so it reads as the primary action; the chat link keeps the green it has always had, one step down in weight. Same hierarchy as the CTA box, so the site makes one consistent argument about which route is faster. ------------------------------------------------------------------- */ .fp-wa-bubble-form { background: var(--fp-blue-dk, #172554) !important; color: #fff !important; margin-bottom: 7px; } .fp-wa-bubble-form:hover { background: var(--fp-blue, #2c3f75) !important; color: #fff !important; } /* Jump-link target. Offset so a sticky header does not cover the form's first line when someone arrives from a "get a quote" link. */ .fpq-anchor { display: block; height: 0; scroll-margin-top: calc(var(--fp-nav-h, 68px) + 20px); } /* ============================================================================= Wizard mode ----------------------------------------------------------------------------- Only the progress rail and the Back/Next row are new. Everything else is the same form — the steps are just hidden and shown, so nothing about the fields themselves changes between the flat page version and the popup. ============================================================================= */ .fpq-rail { display: flex; align-items: center; gap: 0; list-style: none; margin: 0 0 16px; padding: 0; counter-reset: none; } .fpq-rail-item { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; position: relative; font-size: 11.5px; color: var(--q-muted); font-weight: 600; } /* The connector between dots. Drawn on the item, not between them, so the last one has nothing trailing off the end. */ .fpq-rail-item:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: var(--q-line); border-radius: 2px; margin: 0 8px 0 2px; } .fpq-rail-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--q-seg-bg); color: var(--q-muted); font-size: 11px; font-weight: 700; transition: background .2s, color .2s; } .fpq-rail-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fpq-rail-item.is-current .fpq-rail-dot { background: var(--q-navy); color: #fff; } .fpq-rail-item.is-current { color: var(--q-text); } .fpq-rail-item.is-done .fpq-rail-dot { background: #16a34a; color: #fff; } .fpq-rail-item.is-done::after { background: #16a34a; } .fpq-dark .fpq-rail-item.is-current .fpq-rail-dot { background: #3b5bdb; } /* A completed step shows a tick rather than its number — the number has done its job, and the tick reads as progress at a glance. */ .fpq-rail-item.is-done .fpq-rail-dot { font-size: 0; } .fpq-rail-item.is-done .fpq-rail-dot::before { content: "✓"; font-size: 12px; } .fpq-wizard .fpq-step { display: flex; flex-direction: column; gap: 14px; } .fpq-wizard .fpq-step[hidden] { display: none; } .fpq-back, .fpq-next { border-radius: 999px; font-family: inherit; font-weight: 650; cursor: pointer; font-size: 14px; padding: 11px 22px; transition: background .15s, border-color .15s, color .15s; } .fpq-back { background: transparent; border: 1px solid var(--q-edge); color: var(--q-body); } .fpq-back:hover { border-color: var(--q-accent); color: var(--q-accent); } .fpq-next { background: var(--q-navy); border: 1px solid var(--q-navy); color: #fff; } .fpq-next:hover { background: var(--q-mid); border-color: var(--q-mid); } .fpq-dark .fpq-next { background: #3b5bdb; border-color: #3b5bdb; } /* Compact chrome for the popup: tighter rhythm, no privacy footnote, and the button row must not wrap onto three lines in a 380px panel. */ .fpq-compact .fpq-form { gap: 12px; } .fpq-compact .fpq-submit { padding-top: 12px; gap: 8px; } .fpq-compact .fpq-send, .fpq-compact .fpq-next { padding: 11px 20px; font-size: 14px; } .fpq-compact .fpq-chat { padding: 9px 14px; font-size: 12.5px; } .fpq-compact .fpq-rail-label { display: none; } .fpq-compact .fpq-rail-item.is-current .fpq-rail-label { display: inline; } .fpq-compact .fpq-done-head h3 { font-size: 16px; } .fpq-compact .fpq-fast { padding: 13px 14px; } /* ============================================================================= Floating quote widget ----------------------------------------------------------------------------- The launcher keeps WhatsApp green because that is what people have learned to look for in this corner, and the panel it opens is the form. The colour is a promise about who answers, not about which tool opens. ============================================================================= */ /* * Above everything. The topbar sits at 9999/10000 and the tools strip paints * inside the header's stacking context, which is what was drawing the "3D * Container Loading Planner" chip over this panel. A floating dialog the user * has deliberately opened outranks every fixed band on the page. */ .fp-qw { position: fixed; right: 20px; bottom: 20px; z-index: 100001; } /* ── Launcher ────────────────────────────────────────────────────── */ .fp-qw-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: #25d366; color: #fff; padding: 0; box-shadow: 0 6px 20px rgba(37, 211, 102, .38); transition: transform .18s, box-shadow .18s, background .18s; } .fp-qw-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37, 211, 102, .46); } .fp-qw-btn svg { width: 30px; height: 30px; } .fp-qw-ico-x { display: none; width: 24px !important; height: 24px !important; } .fp-qw.is-open .fp-qw-btn { background: var(--fp-blue-dk, #172554); box-shadow: 0 6px 20px rgba(0, 0, 0, .34); } .fp-qw.is-open .fp-qw-ico-chat { display: none; } .fp-qw.is-open .fp-qw-ico-x { display: block; } .fp-qw-dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; } .fp-qw.is-open .fp-qw-dot { display: none; } /* ── Teaser ──────────────────────────────────────────────────────── */ .fp-qw-teaser { position: absolute; right: 68px; bottom: 12px; white-space: nowrap; background: var(--fp-blue-dk, #172554); color: #fff; font-size: 13px; font-weight: 600; padding: 10px 32px 10px 15px; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .26); animation: fpQwIn .3s ease-out; } .fp-qw-teaser-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255, 255, 255, .6); font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 4px; } .fp-qw-teaser-x:hover { color: #fff; } @keyframes fpQwIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } } /* ── Panel ───────────────────────────────────────────────────────── */ .fp-qw-panel { position: absolute; right: 0; bottom: 70px; width: 420px; max-width: calc(100vw - 32px); max-height: calc(100vh - 130px); display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(15, 23, 42, .26), 0 2px 8px rgba(15, 23, 42, .1); opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .22s ease-out, transform .22s ease-out; } .fp-qw.is-open .fp-qw-panel { opacity: 1; transform: none; } .fp-qw-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: var(--fp-blue-dk, #172554); color: #fff; flex-shrink: 0; } .fp-qw-avatar { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: #25d366; color: #fff; } .fp-qw-head-text { flex: 1; min-width: 0; line-height: 1.3; } .fp-qw-head-text strong { display: block; font-size: 14.5px; } .fp-qw-online { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: rgba(255, 255, 255, .7); } .fp-qw-online i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; display: inline-block; } .fp-qw-close { background: none; border: none; color: rgba(255, 255, 255, .65); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 2px; } .fp-qw-close:hover { color: #fff; } .fp-qw-body { padding: 16px; overflow-y: auto; flex: 1; } .fp-qw-intro { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: #4a5570; } .fp-qw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; background: #f6f7fb; border-top: 1px solid #e4e7f0; font-size: 12.5px; color: #78829c; flex-shrink: 0; flex-wrap: wrap; } /* The panel's chat button. Promoted from a text link now that the in-form "Rather just chat?" is gone — this is the single chat entry point, so it should look like something you can press. Outlined rather than filled: the form is still the primary path, and two solid green buttons on one screen would argue with each other. */ .fp-qw-chat { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid #25d366; background: #fff; color: #12844a; font-weight: 700; font-size: 12.5px; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; } .fp-qw-chat:hover { background: #25d366; color: #06281b; text-decoration: none; } @media (max-width: 520px) { .fp-qw { right: 14px; bottom: 14px; } .fp-qw-panel { position: fixed; right: 8px; left: 8px; bottom: 78px; width: auto; max-width: none; max-height: calc(100vh - 100px); } .fp-qw-teaser { font-size: 12px; padding: 9px 28px 9px 13px; } } @media (prefers-reduced-motion: reduce) { .fp-qw-btn, .fp-qw-panel { transition: none; } .fp-qw-teaser { animation: none; } /* The bubble still needs to be visible — only the movement is dropped. */ .fpq-handoff.is-live .fpq-bubble { animation: none; opacity: 1; transform: none; } .fpq-handoff.is-live .fpq-btn-wa { animation: none; } } /* ============================================================================= Header actions — Get a Quote + Client Login ----------------------------------------------------------------------------- Same navy, two levels of emphasis. The quote button is filled because it is what a new visitor came for; login is outlined because the people who need it already know it exists and are scanning for it, not being persuaded by it. The login label collapses below 1080px, leaving the icon. That is what lets two buttons live in a navbar that was already full — an icon-only login is a pattern people read instantly, whereas a wrapped nav is not. ============================================================================= */ .fp-btn-login { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--fp-blue-dk, #172554); background: transparent; color: var(--fp-blue-dk, #172554); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; } .fp-btn-login:hover { background: var(--fp-blue-dk, #172554); color: #fff; } .fp-btn-login svg { flex-shrink: 0; } /* Header sits on a dark bar on some templates — invert there. */ .fp-header-dark .fp-btn-login, .fp-nav-dark .fp-btn-login { border-color: rgba(255,255,255,.5); color: #fff; } .fp-header-dark .fp-btn-login:hover, .fp-nav-dark .fp-btn-login:hover { background: #fff; color: var(--fp-blue-dk, #172554); border-color: #fff; } @media (max-width: 1080px) { .fp-btn-login-label { display: none; } .fp-btn-login { padding: 8px 11px; } } /* Below the mobile breakpoint the drawer carries login, so the header pair collapses to the single quote button. */ @media (max-width: 860px) { .fp-btn-login { display: none; } } .fp-drawer-login { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; margin-bottom: 10px; border-radius: 8px; border: 1.5px solid var(--fp-blue-dk, #172554); color: var(--fp-blue-dk, #172554); font-weight: 700; font-size: 15px; text-decoration: none; } .fp-drawer-login:hover { background: var(--fp-blue-dk, #172554); color: #fff; } /* ============================================================================= Dark skin — contrast repair ----------------------------------------------------------------------------- The home panel came out unreadable: some controls dark, some white with near-white text on them. Three separate causes, all of them the same mistake — assuming a control inherits the skin. 1. `