/* Quick Service Agreement (v2) — namespaced qsa2- so the legacy plugin's global CSS never bleeds in */ /* Theme-driven palette. Every surface (incl. overlays reparented to ) resolves from two theme sources: the Salient accent and the page's real

color, which qsa.js measures at init and publishes as --qsa2-dynamic-* on (Salient does not define a text-color custom property on pages). Everything else derives via color-mix so no brand color lives in this file. */ #qsa2-root, #qsa2-login, #qsa2-dup-overlay, #qsa2-overlay, .qsa2-modal{ --qsa2-accent: var(--qsa2-dynamic-accent, var(--nectar-accent-color, #0089ff)); --qsa2-text: var(--qsa2-dynamic-text, var(--nectar-page-text-color, #00294f)); --qsa2-muted: color-mix(in srgb, var(--qsa2-text) 62%, #fff); --qsa2-soft: color-mix(in srgb, var(--qsa2-text) 42%, #fff); --qsa2-border: color-mix(in srgb, var(--qsa2-text) 32%, #fff); --qsa2-border-light: color-mix(in srgb, var(--qsa2-text) 20%, #fff); --qsa2-hairline: color-mix(in srgb, var(--qsa2-text) 10%, #fff); --qsa2-panel: color-mix(in srgb, var(--qsa2-text) 5%, #fff); --qsa2-tint: color-mix(in srgb, var(--qsa2-accent) 10%, #fff); --qsa2-tint-soft: color-mix(in srgb, var(--qsa2-accent) 7%, #fff); } #qsa2-login{ background:#fff; padding:40px; border-radius:28px; max-width:500px; margin:auto; } #qsa2-login h3{ padding-bottom:20px; } #qsa2-root{ position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; padding:0 20px; --qsa2-col-product: minmax(240px, 1.3fr); --qsa2-col-qty: 90px; --qsa2-col-unit: 110px; --qsa2-col-disc: 50px; --qsa2-col-net: 105px; --qsa2-col-remove: 20px; } #qsa2-root .qsa2-card{ margin-top:20px; background:#fff; border-radius:28px; padding:30px 36px; } #qsa2-root .qsa2-title{ font-size:26px; line-height:1.2; margin:0 0 24px 0; font-weight:600; font-family:'Plus Jakarta Sans', sans-serif; } /* mode chooser (layout from the Page1.pdf mock; colors from the theme tokens) */ /* width mirrors the theme's .container.normal-container (1525px cap, centered) */ #qsa2-root .qsa2-mode{ max-width:1525px; margin-left:auto; margin-right:auto; padding:90px 40px 120px; } .qsa2-mode-title{ text-align:center; color:var(--qsa2-text); margin-bottom:56px !important; } .qsa2-mode-buttons{ display:flex; gap:80px; flex-wrap:wrap; justify-content:center; } #qsa2-root .qsa2-mode-btn{ /* !important beats Salient's global button radius/padding */ --qsa2-icon-bg:#fff; flex:0 1 320px; min-height:250px; background:#fff; border:1.5px solid var(--qsa2-border); border-radius:30px !important; padding:48px 36px !important; text-align:center; cursor:pointer; color:var(--qsa2-muted); line-height:1.4; transition:background .15s, border-color .15s, color .15s; } #qsa2-root .qsa2-mode-btn:hover, #qsa2-root .qsa2-mode-btn:focus-visible{ --qsa2-icon-bg:var(--qsa2-tint); background:var(--qsa2-tint) !important; border-color:var(--qsa2-accent) !important; color:var(--qsa2-accent); outline:none; } /* New client is the default option: white card outlined in the theme's page text color (updated Page1.pdf) */ #qsa2-root .qsa2-mode-btn[data-mode="new"]{ border-color:var(--qsa2-text); color:var(--qsa2-text); } #qsa2-root .qsa2-mode-btn[data-mode="new"] strong, #qsa2-root .qsa2-mode-btn[data-mode="new"] .qsa2-mode-desc{ color:var(--qsa2-text); } /* on hover it joins the regular accent hover style */ #qsa2-root .qsa2-mode-btn[data-mode="new"]:hover, #qsa2-root .qsa2-mode-btn[data-mode="new"]:focus-visible{ color:var(--qsa2-accent); } #qsa2-root .qsa2-mode-btn[data-mode="new"]:hover strong, #qsa2-root .qsa2-mode-btn[data-mode="new"]:focus-visible strong{ color:var(--qsa2-accent); } #qsa2-root .qsa2-mode-btn[data-mode="new"]:hover .qsa2-mode-desc, #qsa2-root .qsa2-mode-btn[data-mode="new"]:focus-visible .qsa2-mode-desc{ color:var(--qsa2-accent); } .qsa2-mode-icon{ display:block; margin:0 auto 20px; width:56px; height:56px; } .qsa2-mode-icon svg{ width:100%; height:100%; display:block; } /* mirrors the site's h3 (Plus Jakarta Sans 700, 30px/38px) */ .qsa2-mode-btn strong{ display:block; font-family:'Plus Jakarta Sans', sans-serif; font-size:30px; font-weight:700; line-height:38px; margin-bottom:10px; color:var(--qsa2-muted); transition:color .15s; } .qsa2-mode-btn:hover strong, .qsa2-mode-btn:focus-visible strong{ color:var(--qsa2-accent); } /* mirrors the site's p (Plus Jakarta Sans 400, line-height 22px) */ .qsa2-mode-desc{ display:block; font-family:'Plus Jakarta Sans', sans-serif; font-weight:400; line-height:22px; font-size:16px; color:var(--qsa2-muted); transition:color .15s; } .qsa2-mode-btn:hover .qsa2-mode-desc, .qsa2-mode-btn:focus-visible .qsa2-mode-desc{ color:var(--qsa2-accent); } /* shell 60/40 */ @media (min-width:840px){ #qsa2-root .qsa2-shell{ display:flex; } #qsa2-root .qsa2-card.qsa2-left{ width:60%; } #qsa2-root .qsa2-card.qsa2-right{ width:40%; margin-left:20px; } } @media (max-width:1024px){ #qsa2-root .qsa2-card.qsa2-left, #qsa2-root .qsa2-card.qsa2-right{ flex:1 1 auto; } } /* products grid */ #qsa2-lines-header{ display:grid; grid-template-columns:var(--qsa2-col-product) var(--qsa2-col-qty) var(--qsa2-col-unit) var(--qsa2-col-disc) var(--qsa2-col-net) var(--qsa2-col-remove); gap:8px; margin-bottom:12px; padding:0 0 6px 0; border-bottom:1px solid var(--qsa2-hairline); font-size:13px; font-weight:600; } #qsa2-lines-header .col{ text-align:center; } #qsa2-lines-header .col.col-product{ text-align:left; } #qsa2-form .qsa2-line{ display:grid; grid-template-columns:var(--qsa2-col-product) var(--qsa2-col-qty) var(--qsa2-col-unit) var(--qsa2-col-disc) var(--qsa2-col-net) var(--qsa2-col-remove); gap:8px; align-items:center; margin-bottom:16px; } .qsa2-card.qsa2-left .col{ margin:0; } /* inputs */ #qsa2-form input[type="text"], #qsa2-form input[type="email"], #qsa2-form input[type="tel"], #qsa2-form input[type="number"], #qsa2-form select{ appearance:none; background:#fff; border:1px solid var(--qsa2-border); border-radius:9999px; /* zero vertical padding + normal line-height: the theme's inherited line-height pushed text down and clipped descenders inside the fixed 44px height */ padding:0 16px; height:44px; line-height:normal; box-sizing:border-box; font-size:13px; outline:none; width:100%; color:var(--qsa2-text); } #qsa2-form input::placeholder{ color:var(--qsa2-text); } #qsa2-form input[type="number"]::-webkit-outer-spin-button, #qsa2-form input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } #qsa2-form input[type="number"]{ -moz-appearance:textfield; } /* money fields */ #qsa2-form .qsa2-money{ position:relative; display:grid; align-items:center; } #qsa2-form .qsa2-money .qsa2-money-prefix::before{ content:'$'; font-size:13px; } #qsa2-form .qsa2-money .qsa2-money-prefix{ position:absolute; left:12px; top:48%; transform:translateY(-50%); pointer-events:none; } #qsa2-form .qsa2-money input[type="text"]{ padding-left:24px; text-align:right; } #qsa2-form .qsa2-money .qsa2-net{ display:inline-block; padding:10px 12px 10px 24px; border:1px solid var(--qsa2-border-light); border-radius:24px; min-width:100px; text-align:right; color:var(--qsa2-text); font-size:13px; background:#fff; } #qsa2-form .col-disc input.qsa2-disc, #qsa2-form .col input.qsa2-qty{ text-align:center; padding:0; } /* qty controls */ #qsa2-form .col-qty{ display:inline-flex; align-items:center; gap:2px; } #qsa2-form .qsa2-qty{ width:64px; height:36px; border-radius:50px; text-align:center; border:1px solid var(--qsa2-border-light); } #qsa2-form .qsa2-qty-btn{ background:transparent; border:0; font-size:24px; width:28px; height:28px; line-height:1; color:var(--qsa2-accent); cursor:pointer; } #qsa2-form .qsa2-qty-btn:active{ transform:scale(0.97); } /* remove buttons */ #qsa2-form .qsa2-remove{ background:transparent; border:0; font-size:20px; color:var(--qsa2-soft); cursor:pointer; width:28px; height:28px; line-height:1; justify-self:end; } #qsa2-form .qsa2-remove:hover{ color:#d33; } /* add links */ #qsa2-form #qsa2-add-line, #qsa2-form #qsa2-add-discount{ background:transparent; border:0; color:var(--qsa2-accent); font-weight:600; cursor:pointer; padding:0; } #qsa2-form #qsa2-add-line{ margin-right:16px; } /* discounts */ #qsa2-form .qsa2-discount{ position:relative; } #qsa2-form #qsa2-discount-menu{ position:absolute; z-index:5; background:#fff; border-radius:14px; box-shadow:0 10px 20px rgba(0,0,0,.12); padding:8px; min-width:260px; } #qsa2-form .qsa2-menu-option{ display:block; width:100%; padding:12px 14px; border:0; background:transparent; cursor:pointer; text-align:left; font-size:14px; color:var(--qsa2-text); } #qsa2-form .qsa2-menu-option:hover{ background:var(--qsa2-tint-soft); } #qsa2-form .qsa2-discount-row{ font-weight:600; font-size:13px; margin-bottom:10px; } #qsa2-form .qsa2-discount-controls{ display:flex; gap:8px; align-items:center; margin-top:10px; max-width:340px; } #qsa2-form .qsa2-discount-controls.qsa2-money .qsa2-money-prefix{ top:50%; font-weight:400; left:15px; } /* right card */ .qsa2-right-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; } /* needs the #qsa2-root prefix or the base .qsa2-title margin (higher specificity) wins and the pill sits lower */ #qsa2-root .qsa2-right-head .qsa2-title{ margin:0; line-height:1.2; } /* deliberate off-palette accent from the Page1.pdf mock (same on both brands) */ #qsa2-form #qsa2-back{ display:inline-flex; align-items:center; gap:8px; background:#fdf1e5; color:#e8873a; border:0; border-radius:9999px; padding:10px 18px; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; } #qsa2-form #qsa2-back svg{ width:16px; height:16px; flex:0 0 auto; } #qsa2-form #qsa2-back:hover{ background:#fbe6d2; } #qsa2-root .qsa2-client-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; } #qsa2-root .qsa2-client-grid .full{ grid-column:1 / -1; } #qsa2-root .qsa2-client-grid label{ margin:0; } /* upsell search */ #qsa2-company-search-wrap{ position:relative; } #qsa2-company-results{ position:absolute; z-index:6; left:0; right:0; top:calc(100% + 6px); background:#fff; border-radius:22px; box-shadow:0 10px 24px rgba(0,0,0,.14); padding:6px; max-height:320px; overflow-y:auto; } /* the id prefixes are required: Salient forces button { border-radius:200px !important }; the dup overlay lives under (reparented by JS), outside #qsa2-root */ #qsa2-root .qsa2-result, #qsa2-dup-overlay .qsa2-result{ display:block; width:100%; padding:10px 14px; border:0; background:transparent; cursor:pointer; text-align:left; border-radius:18px !important; } #qsa2-root .qsa2-result:hover, #qsa2-dup-overlay .qsa2-result:hover{ background:var(--qsa2-tint-soft); } .qsa2-result strong{ display:block; font-size:14px; color:var(--qsa2-text); } .qsa2-result span{ font-size:12px; color:var(--qsa2-muted); } .qsa2-result-empty{ padding:12px 14px; font-size:13px; color:var(--qsa2-muted); } .qsa2-company-card{ display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--qsa2-panel); border:1px solid var(--qsa2-border-light); border-radius:16px; padding:14px 18px; margin-bottom:16px; } .qsa2-company-card strong{ display:block; font-size:15px; color:var(--qsa2-text); } .qsa2-company-card span{ font-size:12px; color:var(--qsa2-muted); } #qsa2-company-change{ background:transparent; border:0; color:var(--qsa2-accent); font-weight:600; cursor:pointer; font-size:13px; } #qsa2-signer .qsa2-signer-label{ display:block; font-weight:600; font-size:13px; margin-bottom:8px; color:var(--qsa2-text); } #qsa2-signer-new{ margin-top:14px; } /* totals */ #qsa2-root .qsa2-totals{ padding:0 15px; margin-top:16px; } #qsa2-root .qsa2-totals .row{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:15px; color:var(--qsa2-text); } #qsa2-root .qsa2-totals .row::before, #qsa2-root .qsa2-totals .row::after{ display:none; } #qsa2-root .qsa2-totals .row.total{ margin-top:6px; padding-top:12px; font-weight:800; font-size:20px; } /* same horizontal inset as .qsa2-totals so the message lines up with Total */ #qsa2-errors{ color:#b32d2e; min-height:1.4em; margin:10px 0 0; padding:0 15px; } /* submit */ #qsa2-form #qsa2-submit{ display:block; width:100%; height:64px; border-radius:9999px; background:var(--qsa2-accent); border:none; color:#fff; font-size:18px; font-weight:700; cursor:pointer; margin-top:20px; box-shadow:0 8px 18px color-mix(in srgb, var(--qsa2-accent) 25%, transparent); } #qsa2-form #qsa2-submit:hover{ filter:brightness(.95); } /* duplicate modal */ #qsa2-dup-overlay{ display:flex; position:fixed; inset:0; background:color-mix(in srgb, var(--qsa2-text) 45%, transparent); /* above Salient's header + WP admin bar */ z-index:999999; align-items:center; justify-content:center; padding:20px; } .qsa2-modal{ background:#fff; border-radius:20px; padding:28px 30px; max-width:520px; width:100%; max-height:80vh; overflow-y:auto; } .qsa2-modal h3{ margin:0 0 8px; font-size:20px; color:var(--qsa2-text); } .qsa2-modal p{ font-size:13px; color:var(--qsa2-muted); margin:0 0 14px; } #qsa2-dup-list .qsa2-result{ border:1px solid var(--qsa2-border-light); margin-bottom:8px; } .qsa2-client-badge{ display:inline-block; margin-left:8px; padding:2px 10px; border-radius:9999px; background:var(--qsa2-tint); color:var(--qsa2-accent); font-size:11px; font-style:normal; font-weight:700; vertical-align:2px; } #qsa2-dup-create{ display:block; width:100%; margin-top:10px; padding:12px 16px; border-radius:9999px; border:1px solid var(--qsa2-accent); background:transparent; color:var(--qsa2-accent); font-weight:600; cursor:pointer; } #qsa2-dup-create:hover{ background:var(--qsa2-tint-soft); } /* busy overlay */ #qsa2-overlay{ display:flex; position:fixed; inset:0; background:rgba(255,255,255,.85); z-index:9999999; align-items:center; justify-content:center; } .qsa2-overlay-inner{ display:flex; flex-direction:column; align-items:center; gap:22px; } #qsa2-overlay-msg{ margin:0; font-size:16px; font-weight:600; color:var(--qsa2-text); font-family:'Plus Jakarta Sans', sans-serif; } .qsa2-spinner{ width:120px; height:120px; border:12px solid var(--qsa2-hairline); border-top-color:var(--qsa2-accent); border-radius:50%; animation:qsa2-spin 1s linear infinite; } @keyframes qsa2-spin{ to{ transform:rotate(360deg); } } /* responsive */ @media (max-width:1024px){ #qsa2-lines-header, #qsa2-form .qsa2-line{ grid-template-columns:1.3fr 80px .9fr 50px .9fr 18px; } } @media (max-width:720px){ /* mode chooser: smaller type + tighter spacing */ #qsa2-root .qsa2-mode{ padding:48px 20px 64px; } #qsa2-root .qsa2-mode .qsa2-mode-title{ font-size:22px; margin-bottom:32px !important; } .qsa2-mode-buttons{ gap:24px; } #qsa2-root .qsa2-mode-btn{ padding:36px 24px !important; min-height:0; } .qsa2-mode-icon{ width:48px; height:48px; } #qsa2-root .qsa2-mode-btn strong{ font-size:22px; line-height:28px; } #qsa2-root .qsa2-mode-btn .qsa2-mode-desc{ font-size:14px; line-height:20px; } /* services: drop the detached header row and label each field in place */ #qsa2-lines-header{ display:none; } #qsa2-form .qsa2-line{ grid-template-columns:1fr 1fr; grid-auto-rows:auto; row-gap:12px; position:relative; margin-bottom:24px; } #qsa2-form .qsa2-line > .col.col-product{ grid-column:1 / -1; padding-right:34px; } #qsa2-form .qsa2-line .col.qsa2-money{ display:block; } /* label on its own row, then the - [qty] + stepper inline */ #qsa2-form .qsa2-line .col-qty{ display:flex; flex-wrap:wrap; align-items:center; } #qsa2-form .qsa2-line .col-qty::before{ flex:0 0 100%; } #qsa2-form .qsa2-line .col-qty .qsa2-qty{ flex:0 0 64px; width:64px; } #qsa2-form .qsa2-line .col::before{ display:block; font-size:12px; font-weight:600; color:var(--qsa2-muted); margin-bottom:6px; } #qsa2-form .qsa2-line .col-qty::before{ content:'Qty'; } #qsa2-form .qsa2-line .col-unit::before{ content:'Unit Price'; } #qsa2-form .qsa2-line .col-disc::before{ content:'Discount %'; } #qsa2-form .qsa2-line .col-net::before{ content:'Net Price'; } #qsa2-form .qsa2-line .col-product::before{ display:none; } /* the $ prefix anchors to the input at the bottom, below the new label */ #qsa2-form .qsa2-line .qsa2-money .qsa2-money-prefix{ top:auto; bottom:15px; transform:none; } #qsa2-form .qsa2-line .qsa2-money .qsa2-net{ display:block; } /* remove button rides the product row's right edge */ #qsa2-form .qsa2-line .qsa2-remove{ position:absolute; top:8px; right:0; justify-self:auto; } }