/* 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(--bright);color:#fff;font-family:var(--display);font-weight:700;font-size:.95rem; padding:11px 18px;border:2px solid #fff;border-radius:999px;cursor:pointer; box-shadow:0 6px 18px rgba(18,72,112,.28);transition:transform .18s,box-shadow .18s,background .18s} .wl-launch-btn:hover{transform:translateY(-2px);background:var(--blue);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 var(--line);border-radius:var(--radius);box-shadow:0 18px 50px rgba(18,72,112,.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(--blue),var(--blue-deep));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:var(--display);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 var(--line);background:var(--tint)} .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:var(--ink-soft);font-family:var(--display);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(--blue);border-bottom-color:var(--yellow)} .wl-tab:hover{color:var(--blue)} /* ---------- card body ---------- */ .wl-card{padding:14px;overflow-y:auto;max-height:min(56vh,460px)} .wl-lead{font-size:.85rem;color:var(--ink);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:var(--ink-soft)} .wl-form input,.wl-form select,.wl-form textarea{font:inherit;font-size:.88rem;color:var(--ink); padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;width:100%} .wl-form input:focus,.wl-form select:focus,.wl-form textarea:focus{outline:2px solid var(--bright-2);border-color:var(--bright)} .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(--bright);color:#fff;font-family:var(--display);font-weight:700;font-size:.95rem; padding:11px 16px;border:0;border-radius:999px;cursor:pointer;box-shadow:0 6px 16px rgba(18,72,112,.22); transition:transform .15s,background .15s} .wl-send:hover{transform:translateY(-1px);background:var(--blue)} .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(--yellow);color:var(--ink);font-family:var(--display);font-weight:800;font-size:1rem; padding:12px 16px;border:0;border-radius:999px;text-decoration:none;box-shadow:0 6px 16px rgba(18,72,112,.18); transition:transform .15s,background .15s} .wl-callbtn:hover{transform:translateY(-1px);background:var(--yellow-deep)} .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:var(--ink-soft); text-transform:uppercase;letter-spacing:.06em;margin:2px 0} .wl-consent{grid-column:1/-1;font-size:.68rem;color:var(--ink-soft);line-height:1.5;margin:2px 0 0} .wl-consent a{color:var(--blue)} .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:var(--display);color:var(--ink);font-size:1.05rem;margin:0 0 6px} .wl-done p{font-size:.85rem;color:var(--ink-soft);margin:0;line-height:1.5} /* chat-coming-soon state */ .wl-soon{text-align:center;padding:10px 6px} .wl-soon h4{font-family:var(--display);color:var(--ink);font-size:1rem;margin:0 0 6px} .wl-soon p{font-size:.83rem;color:var(--ink-soft);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(--tint-2);border:1px solid var(--line);border-radius:999px; padding:9px 12px;font-family:var(--display);font-weight:700;font-size:.82rem;color:var(--blue);cursor:pointer;transition:background .15s} .wl-soon-row button:hover{background:var(--bright-2)} /* ---------- 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 var(--line);box-shadow:0 -6px 18px rgba(18,72,112,.14); padding-bottom:env(safe-area-inset-bottom)} .wl-dock .wl-tab{padding:8px 2px calc(7px);border-bottom:0;border-top:3px solid transparent} .wl-dock .wl-tab.on{border-top-color:var(--yellow)} .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}}