/** * LS Back In Stock — front end. * * Everything is expressed in the lsfab theme's --ls-* design tokens with fallbacks, * so it inherits the site's palette, type and control sizing when that theme is active * and still looks right if it is not. */ /* * Tokens live on :root, NOT on .lsbis-wrap. * * The popup is moved onto when it opens, so anything scoped to the wrapper is * out of scope by the time it renders — every var() resolves to nothing and the panel * loses its background, border and radius. Declaring them globally is what keeps the * popup styled wherever in the document it ends up. */ :root { --lsbis-surface: var(--ls-surface-1, #111); --lsbis-inset: var(--ls-surface-2, #1a1a1a); --lsbis-line: var(--ls-hairline, rgba(255, 255, 255, .15)); --lsbis-line-input: var(--ls-hairline-input, rgba(255, 255, 255, .18)); --lsbis-text: var(--ls-text, #fff); --lsbis-muted: var(--ls-text-muted, rgba(255, 255, 255, .7)); --lsbis-soft: var(--ls-text-soft, rgba(255, 255, 255, .55)); --lsbis-accent: var(--ls-red, #ff0044); --lsbis-accent-hover: var(--ls-red-hover, #d9003a); --lsbis-display: var(--ls-font-display, "Barlow Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif); --lsbis-body: var(--ls-font-body, Inter, "Helvetica Neue", Helvetica, Arial, sans-serif); --lsbis-radius: var(--ls-radius-xl, 12px); --lsbis-radius-ctl: var(--ls-radius-md, 6px); --lsbis-control-h: var(--ls-control-h, 48px); --lsbis-btn-h: var(--ls-btn-h, 48px); --lsbis-tracking: var(--ls-tracking-button, .12em); --lsbis-transition: var(--ls-transition, 160ms ease); } .lsbis-wrap { margin: var(--ls-space-5, 22px) 0; font-family: var(--lsbis-body); color: var(--lsbis-text); } .lsbis-wrap[hidden] { display: none; } /* ---------------------------------------------------------------- panel */ .lsbis-panel { position: relative; overflow: hidden; padding: var(--ls-space-5, 22px); border: 1px solid var(--lsbis-line); border-radius: var(--lsbis-radius); background: var(--lsbis-surface); } /* The gradient rule across the top, matching the product cards. */ .lsbis-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--ls-card-line-h, 3px); background: var(--ls-gradient-ui, linear-gradient(90deg, #ff0044 0%, #ff7a5c 100%)); } .lsbis-title { margin: 0 0 var(--ls-space-2, 8px); font-family: var(--lsbis-display); font-weight: 700; font-size: var(--ls-h4, 1.375rem); line-height: var(--ls-leading-tight, 1.15); text-transform: uppercase; letter-spacing: .01em; color: var(--lsbis-text); } .lsbis-count { display: flex; align-items: center; gap: var(--ls-space-2, 8px); margin: 0 0 var(--ls-space-4, 16px); font-size: var(--ls-small, .875rem); color: var(--lsbis-muted); } .lsbis-count__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lsbis-accent); box-shadow: 0 0 0 3px rgba(255, 0, 68, .2); flex: none; } /* ---------------------------------------------------------------- fields */ .lsbis-fields { display: grid; gap: var(--ls-space-3, 12px); margin-top: var(--ls-space-4, 16px); } /* Fields stack. The panel lives in a product summary column, so it is never wide enough for two inputs to sit comfortably side by side. */ .lsbis-field-quantity input { max-width: 110px; } .lsbis-field { margin: 0; } .lsbis-label { display: block; margin-bottom: var(--ls-space-1, 4px); font-size: var(--ls-micro, .6875rem); font-weight: 600; letter-spacing: var(--ls-tracking-eyebrow, 1.5px); text-transform: uppercase; color: var(--lsbis-soft); } /* body prefix and !important: the Divi customizer prints white form fields into wp_head with !important on every request, and would otherwise win here. */ body .lsbis-panel .lsbis-form input[type="text"], body .lsbis-panel .lsbis-form input[type="email"], body .lsbis-panel .lsbis-form input[type="number"] { background-color: var(--lsbis-inset) !important; color: var(--lsbis-text) !important; border: 1px solid var(--lsbis-line-input) !important; } body .lsbis-panel .lsbis-form input:focus { border-color: var(--lsbis-accent) !important; } .lsbis-form input[type="text"], .lsbis-form input[type="email"], .lsbis-form input[type="number"] { width: 100%; height: var(--lsbis-control-h); padding: 0 var(--ls-control-pad-x, 14px); box-sizing: border-box; border: 1px solid var(--lsbis-line-input); border-radius: var(--lsbis-radius-ctl); background: var(--lsbis-inset); color: var(--lsbis-text); font-family: var(--lsbis-body); font-size: var(--ls-body, 1rem); line-height: normal; transition: border-color var(--lsbis-transition), box-shadow var(--lsbis-transition); -webkit-appearance: none; appearance: none; } .lsbis-form input::placeholder { color: var(--ls-text-ghost, rgba(255, 255, 255, .3)); } .lsbis-form input:focus { outline: none; border-color: var(--lsbis-accent); box-shadow: var(--ls-focus-ring, 0 0 0 3px rgba(255, 0, 68, .25)); } .lsbis-field-error input { border-color: var(--lsbis-accent); } /* ---------------------------------------------------------------- consent */ /* * A custom control, not a styled native checkbox. This theme forces * background-color on inputs so hard that even an inline !important does not hold, * so the real input is hidden and a span is painted instead. Keyboard behaviour and * screen reader semantics are unchanged — the input is still there and still focusable. */ .lsbis-field-agree { margin-top: var(--ls-space-4, 16px); } .lsbis-check { display: flex; align-items: flex-start; gap: var(--ls-space-2, 8px); cursor: pointer; } .lsbis-check__input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; } .lsbis-check__box { position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border: 1px solid var(--lsbis-line-input); border-radius: var(--ls-radius-sm, 4px); background: var(--lsbis-inset); transition: background-color var(--lsbis-transition), border-color var(--lsbis-transition); } .lsbis-check:hover .lsbis-check__box { border-color: var(--ls-hairline-strong, rgba(255, 255, 255, .3)); } .lsbis-check__input:checked + .lsbis-check__box { border-color: var(--lsbis-accent); background: var(--lsbis-accent); } .lsbis-check__input:checked + .lsbis-check__box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .lsbis-check__input:focus-visible + .lsbis-check__box { box-shadow: var(--ls-focus-ring, 0 0 0 3px rgba(255, 0, 68, .25)); } /* The theme uppercases and enlarges labels site-wide; this one is body copy. */ .lsbis-panel .lsbis-check__text { font-family: var(--lsbis-body); font-size: var(--ls-small, .875rem); font-weight: 400; line-height: var(--ls-leading-body, 1.6); letter-spacing: normal; text-transform: none; color: var(--lsbis-muted); } .lsbis-check__text a { color: var(--lsbis-text); text-decoration: underline; text-underline-offset: 2px; } /* ---------------------------------------------------------------- buttons */ .lsbis-submit, .lsbis-trigger { display: inline-flex; align-items: center; justify-content: center; gap: var(--ls-space-2, 8px); width: 100%; min-height: var(--lsbis-btn-h); margin-top: var(--ls-space-4, 16px); padding: 0 var(--ls-btn-pad-x, 26px); border: 0; border-radius: var(--ls-btn-radius, 6px); background: var(--lsbis-accent); color: #fff; font-family: var(--lsbis-display); font-size: var(--ls-btn-font, 1rem); font-weight: 700; text-transform: uppercase; letter-spacing: var(--lsbis-tracking); line-height: 1; cursor: pointer; transition: background-color var(--lsbis-transition), transform var(--lsbis-transition); } .lsbis-trigger { margin-top: 0; } .lsbis-submit:hover, .lsbis-trigger:hover { background: var(--lsbis-accent-hover); color: #fff; } .lsbis-submit:active, .lsbis-trigger:active { transform: translateY(1px); } .lsbis-submit:focus-visible, .lsbis-trigger:focus-visible { outline: none; box-shadow: var(--ls-focus-ring, 0 0 0 3px rgba(255, 0, 68, .25)); } .lsbis-submit[disabled] { opacity: .65; cursor: default; } .lsbis-spinner { display: none; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: lsbis-spin 600ms linear infinite; } .lsbis-submit.is-busy .lsbis-spinner { display: block; } @keyframes lsbis-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .lsbis-spinner { animation-duration: 2s; } .lsbis-submit, .lsbis-trigger, .lsbis-modal__dialog { transition: none; } } /* ---------------------------------------------------------------- messages */ .lsbis-message:empty { display: none; } .lsbis-message { margin-top: var(--ls-space-3, 12px); padding: var(--ls-space-3, 12px) var(--ls-space-4, 16px); border-radius: var(--lsbis-radius-ctl); border-left: 3px solid transparent; background: var(--ls-surface-3, #161616); font-size: var(--ls-small, .875rem); line-height: var(--ls-leading-body, 1.6); color: var(--lsbis-muted); } .lsbis-message.lsbis-ok { border-left-color: var(--ls-green, #059d58); color: var(--lsbis-text); } .lsbis-message.lsbis-error { border-left-color: var(--lsbis-accent); color: var(--lsbis-text); } /* honeypot */ .lsbis-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .lsbis-captcha { margin-top: var(--ls-space-3, 12px); } /* ---------------------------------------------------------------- login notice */ .lsbis-login-required { padding: var(--ls-space-4, 16px); border: 1px solid var(--lsbis-line); border-radius: var(--lsbis-radius); background: var(--lsbis-surface); color: var(--lsbis-muted); font-size: var(--ls-small, .875rem); } .lsbis-login-required p { margin: 0; } /* ---------------------------------------------------------------- modal */ .lsbis-modal[hidden] { display: none; } /* The modal is moved onto , so it inherits nothing from the wrapper. */ .lsbis-modal { position: fixed; inset: 0; z-index: 100000; font-family: var(--lsbis-body); color: var(--lsbis-text); display: flex; align-items: center; justify-content: center; padding: var(--ls-space-5, 22px); } .lsbis-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .75); backdrop-filter: blur(3px); } .lsbis-modal__dialog { position: relative; display: flex; width: 100%; max-width: 440px; max-height: calc(100vh - 2 * var(--ls-space-5, 22px)); border-radius: var(--lsbis-radius); box-shadow: var(--ls-shadow-drop, 0 18px 40px rgba(0, 0, 0, .65)); animation: lsbis-rise 180ms ease; } @keyframes lsbis-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .lsbis-modal__dialog { animation: none; } } /* * The panel inside the dialog keeps its own background and border — it IS the popup. * Scrolling lives here rather than on the dialog so the rounded corners are not clipped. */ .lsbis-modal .lsbis-panel { flex: 1 1 auto; overflow-y: auto; padding: var(--ls-space-6, 30px); padding-top: var(--ls-space-7, 44px); border-radius: var(--lsbis-radius); -webkit-overflow-scrolling: touch; } /* Never let the heading run under the close button. */ .lsbis-modal .lsbis-title { padding-right: var(--ls-space-6, 30px); } .lsbis-modal__close { position: absolute; top: var(--ls-space-3, 12px); right: var(--ls-space-3, 12px); z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--lsbis-radius-ctl); background: transparent; color: var(--ls-text-soft, rgba(255, 255, 255, .55)); cursor: pointer; transition: color var(--lsbis-transition), background-color var(--lsbis-transition); } .lsbis-modal__close:hover { color: var(--lsbis-text); background: var(--ls-surface-raised, #1f1f1f); } .lsbis-modal__close:focus-visible { outline: none; color: var(--lsbis-text); box-shadow: var(--ls-focus-ring, 0 0 0 3px rgba(255, 0, 68, .25)); } body.lsbis-modal-open { overflow: hidden; } /* ---------------------------------------------------------------- mobile */ @media (max-width: 30em) { /* * On a phone the popup becomes a bottom sheet: full width, anchored to the bottom, * rounded on top only. It is closer to the thumb and cannot end up taller than the * screen with its buttons out of reach. */ .lsbis-modal { align-items: flex-end; padding: 0; } .lsbis-modal__dialog { max-width: none; max-height: 88vh; border-radius: var(--lsbis-radius) var(--lsbis-radius) 0 0; animation-name: lsbis-slide-up; } .lsbis-modal .lsbis-panel { padding: var(--ls-space-5, 22px); padding-top: var(--ls-space-7, 44px); padding-bottom: calc(var(--ls-space-5, 22px) + env(safe-area-inset-bottom, 0px)); border-radius: var(--lsbis-radius) var(--lsbis-radius) 0 0; } .lsbis-modal .lsbis-title { padding-right: var(--ls-space-7, 44px); } /* A 22px heading eats three lines on a 390px screen; 18px keeps the sheet compact. */ .lsbis-title { font-size: var(--ls-h5, 1.125rem); } .lsbis-panel { padding: var(--ls-space-4, 16px); } /* Thumb-sized controls, and 16px type so iOS does not zoom the page on focus. */ .lsbis-form input[type="text"], .lsbis-form input[type="email"], .lsbis-form input[type="number"] { height: var(--ls-btn-h-lg, 56px); font-size: 16px; } .lsbis-submit, .lsbis-trigger { min-height: var(--ls-btn-h-lg, 56px); width: 100%; } .lsbis-modal__close { top: var(--ls-space-2, 8px); right: var(--ls-space-2, 8px); width: 40px; height: 40px; } } @keyframes lsbis-slide-up { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } } /* ---------------------------------------------------------------- merged into the store notice */ /* * When the block is moved inside the store's own out-of-stock notice, drop the panel's * own chrome so the two read as one card rather than a box inside a box. * * Spacing is measured, not guessed: the notice card carries its own 12px bottom margin, * and WooCommerce's variation add-to-cart button carries a 2px top margin. Subtracting * that offset leaves an identical 12px gap above and below our button. */ .lsbis-wrap--merged { --lsbis-gap: var(--ls-space-3, 12px); --lsbis-cart-offset: 2px; margin: 0 0 calc(var(--lsbis-gap) - var(--lsbis-cart-offset)); } /* The notice card's own margin supplies the gap above; ours would double it. */ .lsbis-wrap--merged > .lsbis-trigger { margin-top: 0; } /* * Sitting directly above Add to Cart, the button matches it: the design system's large * control size, so the two read as a pair rather than two different buttons. */ .lsbis-wrap--merged > .lsbis-trigger, .lsbis-wrap--merged > .lsbis-panel .lsbis-submit { min-height: var(--ls-btn-h-lg, 56px); font-size: var(--ls-btn-font-lg, 1.125rem); padding: 0 var(--ls-btn-pad-x-lg, 34px); } /* * Direct child only. The modal's panel is nested deeper, and stripping its background * left the popup floating transparently over the page. */ .lsbis-wrap--merged > .lsbis-panel { padding: 0; border: 0; border-radius: 0; background: none; } .lsbis-wrap--merged > .lsbis-panel::before { display: none; } .lsbis-wrap--merged > .lsbis-panel .lsbis-title { font-size: var(--ls-h5, 1.125rem); } .lsbis-wrap--merged > .lsbis-panel .lsbis-submit { margin-top: var(--ls-space-3, 12px); } .lsbis-wrap--merged > .lsbis-panel .lsbis-fields { margin-top: var(--ls-space-3, 12px); } /* The notice becomes the card, so let it stack its children. */ .lsbis-has-form { display: block; }