/* =================================================================== Clarity theme mapping for the contact launcher. Everything BELOW the marker is WL00008_PGPT/site/assets/css/contact.css copied VERBATIM — do not edit it; retheme by changing these vars only. =================================================================== */ :root{ --pink:#0B2A4A; /* brand primary (was #e44398) */ --pink-dark:#081E36; /* darker (was #c22e7e) */ --blush:#D6E3F0; /* light tint (was #f6d3e7) */ --blush-soft:#EEF3F8; /* lightest tint (was #fdf3f9) */ --coal:#1A2733; /* body text (was #141414) */ --glow:0 0 0 3px rgba(11,42,74,.24), 0 4px 18px rgba(11,42,74,.30); } /* ---------- VERBATIM COPY BEGINS ---------- */ /* WL00001 — Multi-channel contact launcher (Text / Call / Email / Chat) * Replaces the "Let's Chat" fab. Duck-branded per CONTACT_LAUNCHER_SPEC.md. * Mobile = bottom dock (4 tabs). Desktop = floating button expanding to the panel. */ /* hide the legacy fab once JS mounts the launcher (JS adds this class to ) */ body.wl-launcher-on .chat-fab{display:none} /* ---------- desktop floating button ---------- */ .wl-launch-btn{position:fixed;top:102px;right:24px;z-index:600;display:inline-flex;align-items:center;gap:8px; background:var(--pink);color:#fff;font-family:'Marcellus',serif;font-weight:700;font-size:.95rem; padding:11px 18px;border:2px solid #fff;border-radius:9px;cursor:pointer; box-shadow:0 6px 18px rgba(20,20,20,.28);transition:transform .18s,box-shadow .18s,background .18s} .wl-launch-btn:hover{transform:translateY(-2px);background:var(--pink-dark);box-shadow:var(--glow)} .wl-launch-btn svg{width:18px;height:18px;fill:currentColor;flex:none} /* ---------- panel ---------- */ .wl-panel{position:fixed;top:150px;right:24px;z-index:640;width:344px;max-width:calc(100vw - 32px); background:#fff;border:1px solid rgba(20,20,20,.14);border-radius:var(--radius);box-shadow:0 18px 50px rgba(20,20,20,.24); overflow:hidden;display:none;flex-direction:column} .wl-panel.open{display:flex;animation:wlPop .22s ease} @keyframes wlPop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}} .wl-head{display:flex;align-items:center;gap:10px;padding:12px 14px; background:linear-gradient(120deg,var(--pink-dark),var(--pink-dark));color:#fff} .wl-logo{height:44px;width:auto;flex:none} .wl-logo-lg{height:68px;display:block;margin:0 auto 8px} .wl-head-t{font-family:'Marcellus',serif;font-weight:700;font-size:.98rem;line-height:1.2} .wl-head-s{font-size:.78rem;opacity:.92;margin-top:2px} .wl-x{margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;padding:6px;line-height:0;border-radius:8px} .wl-x:hover{background:rgba(255,255,255,.18)} .wl-x svg{width:16px;height:16px;fill:currentColor} /* ---------- tabs ---------- */ .wl-tabs{display:flex;border-bottom:1px solid rgba(20,20,20,.14);background:var(--blush-soft)} .wl-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 7px; background:none;border:0;border-bottom:3px solid transparent;cursor:pointer; color:#6d5a66;font-family:'Marcellus',serif;font-weight:700;font-size:.72rem;transition:color .15s,border-color .15s} .wl-tab svg{width:19px;height:19px;fill:currentColor} .wl-tab.on{color:var(--pink-dark);border-bottom-color:var(--pink)} .wl-tab:hover{color:var(--pink-dark)} /* ---------- card body ---------- */ .wl-card{padding:14px;overflow-y:auto;max-height:min(56vh,460px)} .wl-lead{font-size:.85rem;color:var(--coal);margin:0 0 10px;line-height:1.45} .wl-form{display:grid;grid-template-columns:1fr 1fr;gap:8px} .wl-form .full{grid-column:1/-1} .wl-form label{display:flex;flex-direction:column;gap:3px;font-size:.72rem;font-weight:700;color:#6d5a66} .wl-form input,.wl-form select,.wl-form textarea{font:inherit;font-size:.88rem;color:var(--coal); padding:8px 10px;border:1px solid rgba(20,20,20,.14);border-radius:10px;background:#fff;width:100%} .wl-form input:focus,.wl-form select:focus,.wl-form textarea:focus{outline:2px solid var(--pink);border-color:var(--pink)} .wl-form textarea{resize:vertical;min-height:64px} .wl-hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden} .wl-send{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--pink);color:#fff;font-family:'Marcellus',serif;font-weight:400;font-size:1rem; padding:11px 16px;border:0;border-radius:9px;cursor:pointer;box-shadow:0 6px 16px rgba(20,20,20,.22); transition:transform .15s,background .15s} .wl-send:hover{transform:translateY(-1px);background:var(--pink-dark)} .wl-send:disabled{opacity:.6;cursor:default;transform:none} .wl-callbtn{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--blush);color:var(--coal);font-family:'Marcellus',serif;font-weight:400;font-size:1.05rem; padding:12px 16px;border:0;border-radius:9px;text-decoration:none;box-shadow:0 6px 16px rgba(20,20,20,.18); transition:transform .15s,background .15s} .wl-callbtn:hover{transform:translateY(-1px);background:#efc0dd} .wl-callbtn svg{width:18px;height:18px;fill:currentColor} .wl-or{grid-column:1/-1;text-align:center;font-size:.74rem;font-weight:700;color:#6d5a66; text-transform:uppercase;letter-spacing:.06em;margin:2px 0} .wl-consent{grid-column:1/-1;font-size:.68rem;color:#6d5a66;line-height:1.5;margin:2px 0 0} .wl-consent a{color:var(--pink-dark)} .wl-err{grid-column:1/-1;display:none;font-size:.8rem;font-weight:700;color:#c0392b;margin:0} .wl-err.show{display:block} /* success state */ .wl-done{text-align:center;padding:18px 8px} .wl-done h4{font-family:'Marcellus',serif;color:var(--coal);font-size:1.05rem;margin:0 0 6px} .wl-done p{font-size:.85rem;color:#6d5a66;margin:0;line-height:1.5} /* chat-coming-soon state */ .wl-soon{text-align:center;padding:10px 6px} .wl-soon h4{font-family:'Marcellus',serif;color:var(--coal);font-size:1rem;margin:0 0 6px} .wl-soon p{font-size:.83rem;color:#6d5a66;margin:0 0 12px;line-height:1.5} .wl-soon-row{display:flex;gap:8px;justify-content:center} .wl-soon-row button{flex:1;max-width:150px;background:var(--blush);border:1px solid rgba(20,20,20,.14);border-radius:9px; padding:9px 12px;font-family:'Marcellus',serif;font-weight:700;font-size:.82rem;color:var(--pink-dark);cursor:pointer;transition:background .15s} .wl-soon-row button:hover{background:var(--pink)} /* ---------- mobile: bottom dock ---------- */ @media(max-width:760px){ .wl-launch-btn{display:none} body.wl-launcher-on{padding-bottom:64px} .wl-dock{position:fixed;left:0;right:0;bottom:0;z-index:600;display:flex; background:#fff;border-top:1px solid rgba(20,20,20,.14);box-shadow:0 -6px 18px rgba(20,20,20,.14); padding-bottom:env(safe-area-inset-bottom)} .wl-dock .wl-tab{padding:6px 2px;margin:6px 6px;border:1.5px solid var(--pink);border-radius:9px} .wl-dock .wl-tab.on{border-color:var(--pink-dark);background:rgba(228,67,152,.12)} .wl-panel{top:auto;bottom:calc(64px + env(safe-area-inset-bottom));left:12px;right:12px;width:auto; border-radius:var(--radius) var(--radius) 14px 14px} .wl-card{max-height:58vh} } @media(min-width:761px){.wl-dock{display:none}} .wl-head .wl-logo{background:#fff;border-radius:8px;padding:3px} /* David 2026-07-16: widget text = Marcellus (site accent font); launcher squared per sketch */ .wl-panel,.wl-panel input,.wl-panel select,.wl-panel textarea,.wl-panel label,.wl-dock,.wl-lead,.wl-consent,.wl-or,.wl-done p,.wl-soon p{font-family:'Marcellus',serif}