/** * TitanCart Abandoned Cart Recovery — Storefront capture widget. * * A non-intrusive corner card (bottom-right on desktop, docked full-width at the * bottom on mobile) that captures a guest's email to recover their cart. Appended to * , so tokens live on :root. * * All classes are prefixed `tcac-` to avoid collision with core/theme styles. * * Design tokens (Pattern #105): brand/semantic colors are constant; surfaces, text and * borders consume the theme's mode-aware --tct-* tokens (flipped under * [data-theme="dark"] on ) with Pulse light values as fallback — so dark mode * "just works" with the theme active, and plugin-only / third-party-theme installs keep * the light look with zero regression. * * Palette: Pulse UI. Font: Inter (falls back to the theme/system stack). */ :root { --tcac-accent: #2563EB; --tcac-accent-d: #1D4ED8; --tcac-success: #16A34A; --tcac-error: #DC2626; --tcac-text: var( --tct-text, #0A0A0A ); --tcac-muted: var( --tct-text-secondary, #737373 ); --tcac-border: var( --tct-border, #E5E5E5 ); --tcac-bg: var( --tct-bg-elevated, #FFFFFF ); --tcac-bg-soft: var( --tct-bg-secondary, #FAFAFA ); --tcac-radius: 14px; --tcac-radius-sm: 9px; --tcac-shadow: 0 18px 48px rgba( 0, 0, 0, .20 ), 0 4px 12px rgba( 0, 0, 0, .10 ); --tcac-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ── Card shell ───────────────────────────────────────────────────────────── */ .tcac-capture { position: fixed; right: 24px; bottom: 24px; z-index: 99990; width: 360px; max-width: calc( 100vw - 32px ); box-sizing: border-box; background: var( --tcac-bg ); color: var( --tcac-text ); border: 1px solid var( --tcac-border ); border-radius: var( --tcac-radius ); box-shadow: var( --tcac-shadow ); font-family: var( --tcac-font ); font-size: 14px; line-height: 1.5; padding: 22px 22px 20px; opacity: 0; transform: translateY( 16px ); transition: opacity .28s ease, transform .28s ease; -webkit-font-smoothing: antialiased; } .tcac-capture *, .tcac-capture *::before, .tcac-capture *::after { box-sizing: border-box; } .tcac-capture.tcac-is-visible { opacity: 1; transform: translateY( 0 ); } /* ── Close ────────────────────────────────────────────────────────────────── */ .tcac-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var( --tcac-muted ); font-size: 20px; line-height: 1; border-radius: 50%; cursor: pointer; transition: background .15s ease, color .15s ease; } .tcac-close:hover { background: var( --tcac-bg-soft ); color: var( --tcac-text ); } .tcac-close:focus-visible { outline: 2px solid var( --tcac-accent ); outline-offset: 2px; } /* ── Content ──────────────────────────────────────────────────────────────── */ .tcac-heading { margin: 0 28px 8px 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var( --tcac-text ); } .tcac-body { margin: 0 0 16px; color: var( --tcac-muted ); } /* ── Form ─────────────────────────────────────────────────────────────────── */ .tcac-form { display: flex; flex-direction: column; gap: 10px; } .tcac-input { width: 100%; padding: 11px 13px; font-family: inherit; font-size: 14px; color: var( --tcac-text ); background: var( --tcac-bg ); border: 1px solid var( --tcac-border ); border-radius: var( --tcac-radius-sm ); transition: border-color .15s ease, box-shadow .15s ease; } .tcac-input::placeholder { color: var( --tcac-muted ); opacity: .8; } .tcac-input:focus { outline: none; border-color: var( --tcac-accent ); box-shadow: 0 0 0 3px rgba( 37, 99, 235, .18 ); } .tcac-capture.tcac-has-error .tcac-input { border-color: var( --tcac-error ); } .tcac-submit { width: 100%; padding: 12px 16px; font-family: inherit; font-size: 14px; font-weight: 600; color: #fff; background: var( --tcac-accent ); border: 0; border-radius: var( --tcac-radius-sm ); cursor: pointer; transition: background .15s ease, transform .05s ease; } .tcac-submit:hover { background: var( --tcac-accent-d ); } .tcac-submit:active { transform: translateY( 1px ); } .tcac-submit:disabled { opacity: .65; cursor: default; } .tcac-submit:focus-visible { outline: 2px solid var( --tcac-accent ); outline-offset: 2px; } /* ── Footer (privacy + dismiss) ───────────────────────────────────────────── */ .tcac-foot { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .tcac-privacy { margin: 0; font-size: 11.5px; line-height: 1.45; color: var( --tcac-muted ); } .tcac-dismiss { align-self: flex-start; padding: 0; border: 0; background: transparent; color: var( --tcac-muted ); font-size: 12px; text-decoration: underline; cursor: pointer; } .tcac-dismiss:hover { color: var( --tcac-text ); } /* ── Inline message + success state ───────────────────────────────────────── */ .tcac-msg { margin: 0; min-height: 0; font-size: 12.5px; color: var( --tcac-error ); } .tcac-msg:empty { display: none; } .tcac-success { display: flex; align-items: flex-start; gap: 10px; color: var( --tcac-text ); } .tcac-success__icon { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba( 22, 163, 74, .12 ); color: var( --tcac-success ); font-size: 15px; font-weight: 700; } .tcac-success__text { margin: 2px 0 0; font-size: 14px; } /* ── Mobile: dock to the bottom edge ──────────────────────────────────────── */ @media ( max-width: 520px ) { .tcac-capture { right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%; border-radius: var( --tcac-radius ) var( --tcac-radius ) 0 0; padding-bottom: max( 20px, env( safe-area-inset-bottom ) ); transform: translateY( 100% ); } .tcac-capture.tcac-is-visible { transform: translateY( 0 ); } } /* ── Reduced motion ───────────────────────────────────────────────────────── */ @media ( prefers-reduced-motion: reduce ) { .tcac-capture { transition: opacity .2s ease; transform: none; } .tcac-capture.tcac-is-visible { transform: none; } }