/** * Pale — B2B cart widget * * Fixed bottom bar (maroon fill / rose text, from the theme palette). The bar * carries the totals + a "use my saved details" toggle on the left and the * Order / Checkout action on the right. It expands upward to list and edit items * (+/- and remove) and show Subtotal / Shipping / Total. One-click Order places * an on-account invoice order; the widget then shows a thank-you and collapses. * Open/closed state is a class on so it survives the fragment swap on add. * * For guests (not logged in) the same bar structure renders a login/register * panel instead of cart items — see the .pale-cart--guest section below. */ /* Replace the product-table plugin's built-in floating cart (wc-product-table-lite). */ .wcpt-cart-widget { display: none !important; } .pale-cart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background-color: var(--wp--preset--color--maroon, #731f1f); color: var(--wp--preset--color--tertiary, #e9aec6); box-shadow: 0 -8px 28px -14px rgba(0, 0, 0, 0.55), 0 -2px 0 -1px rgba(233, 174, 198, 0.35); /* faint rose top hairline */ transition: transform 0.45s ease, opacity 0.45s ease; } /* Empty cart: the bar collapses out of view entirely. */ .pale-cart.is-empty { display: none; } .pale-cart a { color: var(--wp--preset--color--tertiary, #e9aec6); text-decoration: none; } /* --- expandable panel (grows upward from the bar) --- */ .pale-cart__panel { max-height: 0; overflow-y: auto; transition: max-height 0.28s ease; -webkit-overflow-scrolling: touch; } body.pale-cart-open .pale-cart__panel { max-height: 60vh; border-bottom: 1px solid rgba(233, 174, 198, 0.25); } /* dim the item list while an edit is in flight */ .pale-cart.is-busy .pale-cart__items { opacity: 0.55; pointer-events: none; } .pale-cart__items { list-style: none; margin: 0; padding: 0.5rem 1rem; } .pale-cart__item { display: flex; gap: 0.75rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid rgba(233, 174, 198, 0.18); } .pale-cart__item:last-child { border-bottom: 0; } .pale-cart__item-name { flex: 1 1 auto; min-width: 0; } .pale-cart__item-meta { display: block; opacity: 0.75; font-size: 0.85em; } /* --- per-item +/- and remove --- */ .pale-cart__item-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 0.3rem; } .pale-cart__qty { background: transparent; color: inherit; border: 1px solid rgba(233, 174, 198, 0.5); border-radius: 3px; width: 1.7rem; height: 1.7rem; padding: 0; line-height: 1; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .pale-cart__qty:hover { border-color: var(--wp--preset--color--tertiary, #e9aec6); } .pale-cart__item-qty { min-width: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; } .pale-cart__item-line { flex: 0 0 auto; font-variant-numeric: tabular-nums; } /* --- totals summary --- */ .pale-cart__summary { padding: 0.25rem 1rem 0.5rem; margin-top: 0.25rem; border-top: 1px solid rgba(233, 174, 198, 0.25); } .pale-cart__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; } .pale-cart__row--muted { opacity: 0.75; } .pale-cart__row--total { font-weight: 700; margin-top: 0.25rem; padding-top: 0.4rem; border-top: 1px solid rgba(233, 174, 198, 0.35); } .pale-cart__ship-method { display: block; opacity: 0.75; font-size: 0.85em; } /* the full-checkout pathway, inside the panel */ .pale-cart__checkout { display: block; text-align: center; padding: 0.55rem 1rem; margin: 0.5rem 1rem 0.35rem; border: 1px solid var(--wp--preset--color--tertiary, #e9aec6); border-radius: 3px; font-weight: 600; } .pale-cart__note { margin: 0.35rem 0 0; font-size: 0.8rem; opacity: 0.75; } .pale-cart__empty { padding: 1rem; text-align: center; opacity: 0.8; } /* --- bar --- */ .pale-cart__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.55rem 1rem; } .pale-cart__bar-main { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; min-width: 0; flex: 1 1 0; } .pale-cart__toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; } .pale-cart__totals { display: flex; align-items: center; gap: 0.6rem; font-size: 1.1rem; font-weight: 600; } /* On narrow screens the caret pill wraps to its own line above the totals */ @media (max-width: 480px) { .pale-cart__toggle { flex-direction: column; align-items: flex-start; gap: 0.15rem; } .pale-cart__caret { order: -1; } } .pale-cart__figure { font-weight: 700; } .pale-cart__sep { width: 1px; height: 1em; background: rgba(233, 174, 198, 0.5); } /* the expand affordance — deliberately visible (a bordered pill, not a faint caret) */ .pale-cart__caret { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.95; border: 1px solid rgba(233, 174, 198, 0.55); border-radius: 999px; padding: 0.12rem 0.55rem; } .pale-cart__chev { display: inline-block; font-size: 0.8em; transition: transform 0.2s ease; } body.pale-cart-open .pale-cart__chev { transform: rotate(180deg); } .pale-cart__savedetails { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; font-size: 0.85rem; } .pale-cart__savedetails.is-disabled { opacity: 0.55; cursor: not-allowed; } .pale-cart__usesaved { accent-color: var(--wp--preset--color--tertiary, #e9aec6); } /* --- bar action (right) --- */ .pale-cart__bar-action { flex: 0 0 auto; display: flex; align-items: center; margin-left: auto; } .pale-cart__order { background-color: var(--wp--preset--color--tertiary, #e9aec6); color: var(--wp--preset--color--maroon, #731f1f); border: 0; border-radius: 3px; padding: 0.6rem 1.5rem; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; white-space: nowrap; } .pale-cart__order.is-confirming { background-color: transparent; color: var(--wp--preset--color--tertiary, #e9aec6); border: 2px solid var(--wp--preset--color--tertiary, #e9aec6); } .pale-cart__order[disabled] { opacity: 0.75; cursor: default; } .pale-cart__view-checkout { display: none; /* shown only when ordering isn't the primary action */ align-items: center; padding: 0.55rem 1.2rem; border: 1px solid var(--wp--preset--color--tertiary, #e9aec6); border-radius: 3px; font-weight: 600; white-space: nowrap; } /* ineligible customer: Checkout is the only action and always shows */ .pale-cart__view-checkout.is-solo { display: inline-flex; } /* unticked "use my saved details": swap Order for Checkout */ .pale-cart.is-manual .pale-cart__order { display: none; } .pale-cart.is-manual .pale-cart__view-checkout { display: inline-flex; } /* order-placement error drops to its own line under the bar */ .pale-cart__error { flex-basis: 100%; margin: 0.15rem 0 0; font-size: 0.85rem; text-align: center; color: #ffd7d7; } /* --- order placed: thank-you, then collapse --- */ .pale-cart__thankyou { display: none; padding: 1.5rem 1rem; text-align: center; } .pale-cart--done .pale-cart__panel, .pale-cart--done .pale-cart__bar { display: none; } .pale-cart--done .pale-cart__thankyou { display: block; } .pale-cart__thankyou-msg { margin: 0; font-size: 1.2rem; font-weight: 700; } .pale-cart__thankyou-sub { margin: 0.15rem 0 0; font-size: 0.75rem; font-weight: 400; opacity: 0.75; } .pale-cart--dismissed { transform: translateY(110%); opacity: 0; pointer-events: none; } /* =========================================================================== Guest login / register bar --------------------------------------------------------------------------- Same structure as the cart widget (maroon fill, rose text, expand-up panel). The bar has a single "login" button on the right. The panel holds two views — login and register — toggled inline by JS (no page navigation). The [data-guest-form] divs swap via the hidden attribute. =========================================================================== */ /* The guest bar is always visible (not gated on cart count). The has-items class on .pale-cart keeps it from being hidden by the is-empty rule. */ /* Simplified bar: only the action button, no left-side content. */ .pale-cart--guest .pale-cart__bar-action--solo { margin-left: auto; } .pale-cart--guest .pale-cart__guest-forms { padding: 1rem 1rem 0.75rem; } /* Right-align the form block so it sits above the login button. */ .pale-cart--guest .pale-cart__guest-view { margin-left: auto; } /* --- shared input styles (login + register) --- */ .pale-cart--guest .login-username, .pale-cart--guest .login-password, .pale-cart--guest .pale-cart__field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.6rem; } .pale-cart--guest .login-username label, .pale-cart--guest .login-password label, .pale-cart--guest .pale-cart__field label { font-size: 0.85rem; font-weight: 600; opacity: 0.85; } .pale-cart--guest .pale-cart__req { color: var(--wp--preset--color--tertiary, #e9aec6); } .pale-cart--guest .login-username input, .pale-cart--guest .login-password input, .pale-cart--guest .pale-cart__field input[type="text"], .pale-cart--guest .pale-cart__field input[type="email"], .pale-cart--guest .pale-cart__field input[type="password"] { width: 100%; max-width: 22rem; padding: 0.5rem 0.65rem; border: 1px solid rgba(233, 174, 198, 0.45); border-radius: 3px; background: rgba(255, 255, 255, 0.08); color: inherit; font: inherit; font-size: 0.95rem; box-shadow: none; } .pale-cart--guest .login-username input:focus, .pale-cart--guest .login-password input:focus, .pale-cart--guest .pale-cart__field input:focus { outline: none; border-color: var(--wp--preset--color--tertiary, #e9aec6); box-shadow: 0 0 0 1px rgba(233, 174, 198, 0.35); } /* --- login form specifics --- */ .pale-cart--guest .login-remember { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; font-size: 0.85rem; } .pale-cart--guest .login-remember input { accent-color: var(--wp--preset--color--tertiary, #e9aec6); } .pale-cart--guest .login-submit { margin: 0; } .pale-cart--guest .login-submit input[type="submit"], .pale-cart--guest .pale-cart__register-btn, .pale-cart--guest .pale-cart__login-btn { background-color: var(--wp--preset--color--tertiary, #e9aec6); color: var(--wp--preset--color--maroon, #731f1f); border: 0; border-radius: 3px; padding: 0.55rem 1.4rem; font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; box-shadow: none; } .pale-cart--guest .login-submit input[type="submit"]:hover, .pale-cart--guest .pale-cart__register-btn:hover, .pale-cart--guest .pale-cart__login-btn:hover { box-shadow: 0 0 8px rgba(233, 174, 198, 0.45); } .pale-cart--guest .pale-cart__register-btn[disabled], .pale-cart--guest .pale-cart__login-btn[disabled] { opacity: 0.7; cursor: default; } /* Remember me checkbox (custom login form). */ .pale-cart__remember { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; font-size: 0.85rem; cursor: pointer; } .pale-cart__remember input { accent-color: var(--wp--preset--color--tertiary, #e9aec6); } /* Login error / notice. */ .pale-cart__login-notice { font-size: 0.85em; margin-top: 0.25em; } .pale-cart__login-notice.is-err { color: #ffd7d7; } .pale-cart__guest-lost { margin: 0.35rem 0 0; font-size: 0.8rem; } .pale-cart__guest-lost a { opacity: 0.7; text-decoration: underline; text-decoration-color: rgba(233, 174, 198, 0.4); text-underline-offset: 0.15em; } .pale-cart__guest-lost a:hover { opacity: 1; } /* --- register form specifics --- */ .pale-cart__guest-heading { margin: 0 0 0.6rem; font-size: 1.05rem; font-weight: 700; } .pale-cart__privacy { font-size: 0.8rem; opacity: 0.75; margin-bottom: 0.6rem; line-height: 1.4; } .pale-cart__privacy a { text-decoration: underline; text-decoration-color: rgba(233, 174, 198, 0.4); text-underline-offset: 0.15em; } .pale-cart__register-notice { font-size: 0.85em; margin-top: 0.25em; } .pale-cart__register-notice.is-err { color: #ffd7d7; } .pale-cart__register-notice.is-ok { color: #a4e4a4; } /* --- view toggle (login ↔ register) --- */ .pale-cart__guest-switch { padding: 0.5rem 0 0.25rem; margin-top: 0.5rem; border-top: 1px solid rgba(233, 174, 198, 0.2); font-size: 0.9rem; } .pale-cart__guest-switch p { margin: 0; } .pale-cart__guest-switch a { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(233, 174, 198, 0.4); text-underline-offset: 0.15em; } .pale-cart__guest-switch a:hover { text-decoration-color: var(--wp--preset--color--tertiary, #e9aec6); } /* --- textarea (for "What do you need from Pale?") --- */ .pale-cart--guest .pale-cart__field textarea { width: 100%; max-width: 22rem; padding: 0.5rem 0.65rem; border: 1px solid rgba(233, 174, 198, 0.45); border-radius: 3px; background: rgba(255, 255, 255, 0.08); color: inherit; font: inherit; font-size: 0.9rem; resize: vertical; min-height: 3.5rem; box-shadow: none; } .pale-cart--guest .pale-cart__field textarea:focus { outline: none; border-color: var(--wp--preset--color--tertiary, #e9aec6); box-shadow: 0 0 0 1px rgba(233, 174, 198, 0.35); } .pale-cart--guest .pale-cart__field textarea::placeholder { color: rgba(233, 174, 198, 0.45); } /* On desktop, keep forms compact. */ @media (min-width: 600px) { .pale-cart--guest .pale-cart__guest-view { max-width: 24rem; } } /* =========================================================================== Pending confirmation bar --------------------------------------------------------------------------- Logged-in user whose account awaits manual approval. Same bottom-bar structure but with a muted action button and an info panel. =========================================================================== */ .pale-cart--pending .pale-cart__pending-info { padding: 1rem; font-size: 0.9rem; line-height: 1.5; } .pale-cart--pending .pale-cart__pending-info p { margin: 0 0 0.5rem; } .pale-cart--pending .pale-cart__pending-info p:last-child { margin-bottom: 0; } .pale-cart--pending .pale-cart__pending-logout { margin-top: 0.5rem; font-size: 0.8rem; } .pale-cart--pending .pale-cart__pending-logout a { opacity: 0.7; text-decoration: underline; text-decoration-color: rgba(233, 174, 198, 0.4); text-underline-offset: 0.15em; } .pale-cart--pending .pale-cart__pending-logout a:hover { opacity: 1; } /* The pending button has a muted look — it's informational, not an action. */ .pale-cart__order--pending { background-color: rgba(233, 174, 198, 0.25) !important; color: var(--wp--preset--color--tertiary, #e9aec6) !important; font-size: 0.9rem !important; font-weight: 600 !important; letter-spacing: 0.02em; }