as its first child. Breaks out to full viewport width using the negative-margin trick so the obsidian band spans the whole screen even when WP/Elementor wrappers constrain the parent. ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-tophead { /* Escape any constrained parent and span full viewport width */ position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--sst-obsidian); /* paper white in light mode */ border-bottom: 1px solid var(--sst-divider); padding: 0; /* Force this band to its own row regardless of parent flex/grid */ flex: none; display: block; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02); } .sst-ip-tophead::after { /* Thin gold pinstripe at the very bottom — handshake with the card */ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--sst-gold-deep), var(--sst-gold) 50%, var(--sst-gold-deep)); opacity: 0.8; } .sst-ip-tophead__inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; max-width: 1000px; margin: 0 auto; padding: 0.85rem 1.25rem; gap: 1rem; } /* Centered variant — logo only, no nav links. Used for the focused checkout. */ .sst-ip-tophead__inner--centered { justify-content: center; } .sst-ip-tophead__brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; line-height: 1; } /* Styled wordmark — preferred over the theme's logo file because we control * the color treatment (white "SST" + gold ".NYC") and don't depend on the * theme serving a white-text variant. The theme logo is left as a fallback * in the template but we prefer the wordmark visually for the focused header. */ .sst-ip-tophead__logo { max-height: 32px; max-width: 220px; width: auto; height: auto; display: block; object-fit: contain; /* Native colors — the theme's logo is dark text, which reads naturally * on the paper-white focused header in light mode. */ } .sst-ip-tophead__wordmark { font-family: var(--sst-font-display); font-size: 1.5rem; line-height: 1; letter-spacing: 0.06em; color: var(--sst-text); text-transform: uppercase; white-space: nowrap; } .sst-ip-tophead__wordmark span { color: var(--sst-gold); } .sst-ip-tophead__back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--sst-text-dim); text-decoration: none; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.5rem 0.85rem; border-radius: 6px; white-space: nowrap; flex-shrink: 0; transition: color 0.15s ease, background-color 0.15s ease; } .sst-ip-tophead__back:hover, .sst-ip-tophead__back:focus-visible { color: var(--sst-gold); background-color: rgba(212, 160, 23, 0.08); text-decoration: none; } .sst-ip-tophead__back:focus-visible { outline: 2px solid var(--sst-gold); outline-offset: 2px; } @media (max-width: 480px) { .sst-ip-tophead__back span:last-child { display: none; } .sst-ip-tophead__back { padding: 0.5rem; } } /* ═══════════════════════════════════════════════════════════════════════════ CARD CONTAINER Mobile/tablet: vertical stack of two obsidian panels. Desktop: two-column CSS grid (380px brand | 1fr pay), centered. ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-card { display: grid; grid-template-columns: 1fr; background: var(--sst-obsidian); overflow: hidden; /* clip the gold pinstripe on the brand panel */ } .sst-ip-card__brand, .sst-ip-card__pay { background: var(--sst-obsidian); padding: 1.25rem 1.25rem 2rem; position: relative; } /* Brand panel: thin gold top accent + tiny noise texture for industrial feel. */ .sst-ip-card__brand { background: linear-gradient(180deg, rgba(212, 160, 23, 0.05) 0%, rgba(212, 160, 23, 0) 18%), var(--sst-obsidian); border-bottom: 1px solid var(--sst-divider); } .sst-ip-card__brand::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sst-gold-deep), var(--sst-gold) 50%, var(--sst-gold-deep)); } .sst-ip-card__pay { padding-bottom: 6rem; /* room for the sticky PAY button on mobile */ } /* Mobile: the .sst-ip outer fills the viewport so no white shows below the form */ @media (max-width: 719px) { .sst-ip { min-height: 100vh; } } /* Tablet+: card on the page background. Still single-column. */ @media (min-width: 720px) { .sst-ip { max-width: 620px; margin: 2rem auto; } .sst-ip-card { border-radius: 16px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08); } .sst-ip-card__brand, .sst-ip-card__pay { padding: 2rem 2.25rem 2.25rem; } .sst-ip-card__pay { padding-bottom: 2.5rem; } } /* Desktop: two-column grid. Brand left, pay right, gold pinstripe between. */ @media (min-width: 1024px) { .sst-ip { max-width: 1000px; } .sst-ip-card { grid-template-columns: 380px 1fr; min-height: 640px; } .sst-ip-card__brand { border-bottom: none; border-right: 1px solid var(--sst-divider); /* Gold pinstripe replaces the top bar on desktop — vertical accent on the divider edge */ background: linear-gradient(180deg, rgba(212, 160, 23, 0.04) 0%, rgba(212, 160, 23, 0) 24%), var(--sst-obsidian); } .sst-ip-card__brand::before { top: 0; bottom: 0; right: -1px; left: auto; width: 3px; height: auto; background: linear-gradient(180deg, var(--sst-gold-deep), var(--sst-gold) 50%, var(--sst-gold-deep)); } .sst-ip-card__brand, .sst-ip-card__pay { padding: 2.5rem 2.5rem 2.5rem; } .sst-ip-card__pay { padding-bottom: 2.5rem; } } /* ═══════════════════════════════════════════════════════════════════════════ BRAND PANEL — logo, eyebrow, heading, order summary, trust badges, mailing ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-brand { display: flex; align-items: center; margin-bottom: 1.5rem; max-width: 100%; overflow: hidden; } .sst-ip-brand__logo { max-height: 36px; max-width: 100%; width: auto; height: auto; display: block; object-fit: contain; /* Astra often serves a logo that assumes a light background. Drop it onto our obsidian with a small drop shadow so it pops without needing a recolored asset. */ filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); } .sst-ip-brand__wordmark { font-family: var(--sst-font-display); font-size: 2rem; line-height: 1; letter-spacing: 0.04em; color: var(--sst-text); } .sst-ip-brand__wordmark span { color: var(--sst-gold); } /* Back-to-cart link inside the brand panel — sits above the "Secure * Checkout" eyebrow. Subtle text-only link, gold on hover. Mobile: full-width * tap target. */ .sst-ip-back-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--sst-text); text-decoration: none; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35rem 0; margin-bottom: 0.85rem; transition: color 0.15s ease, transform 0.15s ease; border: none; background: transparent; } .sst-ip-back-link:hover, .sst-ip-back-link:focus-visible { color: var(--sst-gold); text-decoration: none; } .sst-ip-back-link:hover span[aria-hidden] { transform: translateX(-2px); } .sst-ip-back-link span[aria-hidden] { transition: transform 0.15s ease; font-size: 1rem; letter-spacing: 0; } .sst-ip-back-link:focus-visible { outline: 2px solid var(--sst-gold); outline-offset: 3px; border-radius: 4px; } .sst-ip-heading { margin-bottom: 1.5rem; } .sst-ip-eyebrow { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--sst-gold); margin-bottom: 0.4rem; font-weight: 600; } .sst-ip-title { font-family: var(--sst-font-display); font-size: 2.25rem; line-height: 1; letter-spacing: 0.02em; color: var(--sst-text); margin: 0 0 0.6rem; text-transform: uppercase; /* Subtle gold accent underline — anchors the headline as a premium * editorial moment without screaming. Uses background-image so it * sits behind the text descenders cleanly. */ background-image: linear-gradient(90deg, var(--sst-gold) 0%, var(--sst-gold) 32px, transparent 32px); background-repeat: no-repeat; background-position: 0 100%; background-size: 32px 3px; padding-bottom: 0.65rem; } .sst-ip-subtitle { font-size: 0.95rem; font-weight: 500; color: var(--sst-text-dim); margin: 0; line-height: 1.55; max-width: 32ch; } @media (min-width: 1024px) { .sst-ip-title { font-size: 2.75rem; } } /* ═══════════════════════════════════════════════════════════════════════════ ORDER SUMMARY — anchors the brand panel ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-summary { background: var(--sst-bg-soft); border: 1px solid var(--sst-divider); border-left: 3px solid var(--sst-gold); border-radius: 8px; padding: 0.85rem 1rem; margin-bottom: 1.25rem; } .sst-ip-summary__line { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; } .sst-ip-summary__info { min-width: 0; flex: 1; } .sst-ip-summary__name { font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--sst-text); /* Prefer breaking on whole words; never break mid-word like "NYC DOB-Approved" */ word-break: keep-all; overflow-wrap: normal; hyphens: none; } .sst-ip-summary__sub { color: var(--sst-text-dim); font-size: 0.85rem; font-weight: 500; margin-top: 0.3rem; line-height: 1.45; } .sst-ip-summary__price { color: var(--sst-gold); font-weight: 800; font-size: 1.35rem; line-height: 1; white-space: nowrap; letter-spacing: -0.01em; } /* ═══════════════════════════════════════════════════════════════════════════ TRUST LIST — short factual badges below the order summary ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-trust-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.4rem; } .sst-ip-trust-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; font-weight: 600; color: var(--sst-text); line-height: 1.4; } .sst-ip-trust-item__bullet { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(74, 214, 117, 0.12); color: var(--sst-success); font-size: 0.7rem; font-weight: 800; flex-shrink: 0; } .sst-ip-trust-item__label { letter-spacing: 0.01em; } /* ═══════════════════════════════════════════════════════════════════════════ EXPRESS ROW — Apple/Google/Link via Stripe + custom Cash App ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-express { margin-bottom: 0.5rem; } .sst-ip-express-btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; height: 44px; border-radius: 8px; border: none; font-weight: 700; font-size: 0.95rem; cursor: pointer; margin-bottom: 0.5rem; transition: transform 0.12s ease, box-shadow 0.12s ease; } .sst-ip-express-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); } .sst-ip-express-btn--cashapp { background: #00d54b; color: #000; } .sst-ip-express-btn--cashapp:focus-visible { outline: 2px solid var(--sst-gold); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ DIVIDER — "or pay with card" with horizontal rules on either side ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-divider { display: flex; align-items: center; gap: 0.65rem; color: var(--sst-text); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; margin: 1rem 0 0.85rem; } .sst-ip-divider::before, .sst-ip-divider::after { content: ""; flex: 1; height: 1px; background: var(--sst-divider); } /* ═══════════════════════════════════════════════════════════════════════════ FORM FIELDS — email + first/last name. Double-class specificity beats Astra/WC overrides without !important. ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-fields { margin-bottom: 1rem; } .sst-ip-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .sst-ip-field { display: block; margin-bottom: 0.6rem; } .sst-ip-label { display: block; font-size: 0.75rem; color: var(--sst-text); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 0.4rem; font-weight: 700; } .sst-ip-field-hint { display: block; font-size: 0.82rem; font-weight: 500; color: var(--sst-text-dim); line-height: 1.5; margin-top: 0.4rem; letter-spacing: 0.005em; } .sst-ip .sst-ip-field input, .sst-ip .sst-ip-field input[type="text"], .sst-ip .sst-ip-field input[type="email"], .sst-ip .sst-ip-field input[type="tel"] { width: 100%; height: 46px; background-color: var(--sst-input-bg); border: 1px solid var(--sst-input-border); border-radius: 8px; color: var(--sst-text); font-size: 1rem; /* prevent iOS zoom on focus */ padding: 0 0.9rem; box-shadow: none; -webkit-appearance: none; appearance: none; transition: border-color 0.15s ease, background-color 0.15s ease; } .sst-ip .sst-ip-field input::placeholder { color: var(--sst-text-dim); } .sst-ip .sst-ip-field input:hover { border-color: var(--sst-divider); } .sst-ip .sst-ip-field input:focus-visible, .sst-ip .sst-ip-field input[type="email"]:focus-visible, .sst-ip .sst-ip-field input[type="text"]:focus-visible { outline: 2px solid var(--sst-gold); outline-offset: 1px; border-color: var(--sst-gold); } /* Defeat Chrome/Safari yellow autofill */ .sst-ip .sst-ip-field input:-webkit-autofill, .sst-ip .sst-ip-field input:-webkit-autofill:hover, .sst-ip .sst-ip-field input:-webkit-autofill:focus { -webkit-text-fill-color: var(--sst-text); -webkit-box-shadow: 0 0 0 1000px var(--sst-input-bg) inset; caret-color: var(--sst-text); transition: background-color 99999s ease-in-out 0s; } /* ═══════════════════════════════════════════════════════════════════════════ STRIPE PAYMENT ELEMENT mount point (Stripe styles the inside itself) ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-payment-element { margin-bottom: 1rem; } /* ═══════════════════════════════════════════════════════════════════════════ BNPL ROW — Klarna + Affirm tiles with installment math ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-bnpl-label { font-size: 0.75rem; color: var(--sst-text); text-transform: uppercase; letter-spacing: 0.16em; margin: 0.85rem 0 0.55rem; font-weight: 700; } .sst-ip-bnpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.85rem; } /* Single-tile variant — used when only one BNPL method qualifies */ .sst-ip-bnpl-grid--single { grid-template-columns: 1fr; } .sst-ip-bnpl { border: 1px solid var(--sst-divider); border-radius: 8px; padding: 0.85rem 1rem; display: flex; align-items: center; gap: 0.7rem; cursor: pointer; text-align: left; background: var(--sst-obsidian); transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease; } .sst-ip-bnpl:hover { transform: translateY(-1px); border-color: var(--sst-gold-deep); background: #faf8f1; } .sst-ip-bnpl__name { font-size: 0.95rem; font-weight: 700; line-height: 1; color: var(--sst-text); flex-shrink: 0; } /* Right-aligned terms; margin-left:auto groups lozenge+name on the left * and pushes the installment math to the right edge of the tile. */ .sst-ip-bnpl__terms { margin-left: auto; font-size: 0.8rem; color: var(--sst-text-dim); font-weight: 500; text-align: right; } /* Brand-colored vertical accent — keeps brand recognition without making * the whole tile a brand-color block (which was competing with PAY). */ .sst-ip-bnpl::before { content: ""; width: 3px; height: 24px; border-radius: 2px; flex-shrink: 0; } .sst-ip-bnpl--klarna::before { background: #ffa8c5; } .sst-ip-bnpl--affirm::before { background: #0073ff; } .sst-ip-bnpl:focus-visible { outline: 2px solid var(--sst-gold); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ ACH ROW — discoverable bank-account row ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-ach { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.85rem 1rem; background: var(--sst-bg-soft); border: 1px solid var(--sst-divider); border-radius: 8px; color: var(--sst-text); font-size: 0.92rem; font-weight: 600; cursor: pointer; margin-bottom: 1rem; transition: border-color 0.12s ease, background-color 0.12s ease; } .sst-ip-ach:hover { border-color: var(--sst-gold-deep); } .sst-ip-ach__label { display: flex; align-items: center; gap: 0.5rem; } .sst-ip-ach__icon { color: var(--sst-gold); } .sst-ip-ach:focus-visible { outline: 2px solid var(--sst-gold); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ ERROR REGION — aria-live="polite" ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-error { min-height: 1.5rem; padding: 0; color: var(--sst-error); font-size: 0.85rem; margin-bottom: 0.5rem; } .sst-ip-error--shown { padding: 0.5rem 0.75rem; background: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.3); border-radius: 6px; } /* ═══════════════════════════════════════════════════════════════════════════ TERMS ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-terms { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.92rem; font-weight: 500; color: var(--sst-text); margin: 0.85rem 0 1rem; cursor: pointer; line-height: 1.5; } .sst-ip-terms input { margin-top: 0.2rem; accent-color: var(--sst-gold); } .sst-ip-terms a { color: var(--sst-gold); text-decoration: underline; } /* ═══════════════════════════════════════════════════════════════════════════ PAY BUTTON — gold, big, confident. Sticky on mobile. ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-pay-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 1rem; /* Subtle gradient gives the button real-world depth — lighter at top, * deeper at bottom — without looking cheap or 2010s-skeuomorphic. */ background: linear-gradient(180deg, #c89510 0%, #b8860b 100%); color: #fdfaef; border: none; border-radius: 10px; font-family: var(--sst-font-body); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.06em; cursor: pointer; /* Layered shadow: tight contact shadow + soft glow */ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 2px rgba(139, 102, 20, 0.4), 0 8px 24px rgba(184, 134, 11, 0.28), 0 2px 6px rgba(184, 134, 11, 0.18); transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease, filter 0.15s ease; text-transform: uppercase; } .sst-ip-pay-btn:focus-visible { outline: 3px solid var(--sst-gold); outline-offset: 3px; } .sst-ip-pay-btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; background: var(--sst-gold-deep); } .sst-ip-pay-btn:hover:not(:disabled) { background: linear-gradient(180deg, #d4a017 0%, #c89510 100%); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 4px rgba(139, 102, 20, 0.45), 0 14px 32px rgba(184, 134, 11, 0.36), 0 4px 10px rgba(184, 134, 11, 0.22); } .sst-ip-pay-btn:active:not(:disabled) { transform: translateY(0); filter: brightness(0.97); } @media (max-width: 719px) { .sst-ip-pay-btn { position: sticky; bottom: 0.75rem; z-index: 10; } } /* ═══════════════════════════════════════════════════════════════════════════ TRUST ROW — small "Encrypted · Powered by Stripe" line below PAY. Wrapped in a subtle bordered chip so it carries weight without shouting. ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-trust { display: inline-flex; justify-content: center; align-items: center; gap: 0.6rem; color: var(--sst-text); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; margin: 1rem auto 0; padding: 0.5rem 1rem; border: 1px solid var(--sst-divider); border-radius: 99px; background: var(--sst-bg-soft); width: max-content; max-width: 100%; } .sst-ip-trust-lock { color: var(--sst-success); font-size: 0.85rem; } /* The whole pay-section gets centered horizontal alignment for the trust pill */ .sst-ip-card__pay { display: flex; flex-direction: column; } /* ═══════════════════════════════════════════════════════════════════════════ ALT PAYMENT SECTION — lives below the trust pill on the right panel. Visually separated from the main PAY flow so buyers don't compare it against the gold PAY button. Subtle: thin dashed top border + small uppercase label. ACH button inherits its existing .sst-ip-ach style. ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-alt-payment { margin-top: 1.75rem; padding-top: 1.35rem; border-top: 1px dashed var(--sst-divider); } .sst-ip-alt-payment__label { font-size: 0.72rem; font-weight: 700; color: var(--sst-text-dim); text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 0.7rem; text-align: center; } /* When the ACH row is inside the alt-payment wrapper, drop its bottom margin * since the wrapper handles the closing space. */ .sst-ip-alt-payment .sst-ip-ach { margin-bottom: 0; } /* ═══════════════════════════════════════════════════════════════════════════ MAILING CALLOUT — anchors the brand panel on desktop, bottom of right on mobile ═══════════════════════════════════════════════════════════════════════════ */ .sst-ip-mailing-callout { margin-top: 0.5rem; padding: 0.8rem 0.95rem; background: rgba(212,160,23,0.08); border: 1px solid rgba(184,134,11,0.28); border-radius: 8px; font-size: 0.88rem; font-weight: 500; color: var(--sst-text); line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════════════════ ENTRANCE ANIMATION — subtle staggered reveal on page load. Brand panel first (anchors the eye), then the pay flow. Respects prefers-reduced-motion. ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: no-preference) { .sst-ip-card__brand, .sst-ip-card__pay { animation: sst-ip-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } .sst-ip-card__brand { animation-delay: 0.04s; } .sst-ip-card__pay { animation-delay: 0.12s; } } @keyframes sst-ip-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════════════════ PRO POLISH — v0.5.0 1. Graceful empty-Express fallback (no Apple/Google/Link available) 2. Payment Element skeleton → fade-in transition 3. Full-card submitting overlay with branded spinner 4. Refined input focus (subtle gold glow) 5. Tactile hover lift on tiles ═══════════════════════════════════════════════════════════════════════════ */ /* 1. EMPTY EXPRESS ROW — hide the express container AND its trailing divider * when Stripe's ECE reports no available wallets. Avoids a dangling * "or pay with card" label floating over nothing. JS sets the class on *

after the ECE 'ready' event fires. */ .sst-ip.sst-ip--no-wallets #sst-ip-express, .sst-ip.sst-ip--no-wallets .sst-ip-express, .sst-ip.sst-ip--no-wallets #sst-ip-express + .sst-ip-divider { display: none !important; } /* Conversely, when wallets ARE present, give the express row a touch of * breathing room above and below so the buttons don't fight the divider. * The 1px gold-tinted frame keeps the third-party wallet buttons feeling * like they belong in our checkout, not a Stripe widget plopped on top. */ .sst-ip.sst-ip--has-wallets #sst-ip-express { margin-bottom: 0.5rem; padding: 0.4rem; border: 1px solid rgba(184, 134, 11, 0.18); background: rgba(184, 134, 11, 0.03); border-radius: 10px; } /* 2. PAYMENT ELEMENT SKELETON * Stripe's loader UI ("loader-ui") shows gray stub bars while Card / Klarna / * Affirm tabs assemble. Replace its bland look with a branded ivory-card * skeleton + shimmer until paymentEl.on('ready') flips the class. */ .sst-ip-payment-element { /* Soft reserved space so the form doesn't pop in below the email block. */ min-height: 240px; position: relative; border-radius: 10px; background: var(--sst-bg-soft); transition: background 0.3s ease; } .sst-ip-payment-element::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: linear-gradient( 90deg, transparent 0%, rgba(184, 134, 11, 0.08) 50%, transparent 100% ); background-size: 200% 100%; pointer-events: none; opacity: 1; transition: opacity 0.45s ease; } @media (prefers-reduced-motion: no-preference) { .sst-ip-payment-element::before { animation: sst-ip-shimmer 1.6s ease-in-out infinite; } } @keyframes sst-ip-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Fade-in for the iframe content inside the Payment Element. Stripe's iframe * takes a beat to paint after .on('ready') fires; we hide it until then so * there's no flash of empty box. */ .sst-ip-payment-element > .__PrivateStripeElement { opacity: 0; transition: opacity 0.35s ease; } /* When the Payment Element finishes rendering, drop the skeleton background + * shimmer so the actual form takes over cleanly. */ .sst-ip.sst-ip--payment-ready .sst-ip-payment-element { background: transparent; min-height: 0; } .sst-ip.sst-ip--payment-ready .sst-ip-payment-element::before { opacity: 0; } .sst-ip.sst-ip--payment-ready .sst-ip-payment-element > .__PrivateStripeElement { opacity: 1; } /* 3. SUBMITTING OVERLAY — when the user clicks PAY (or any payment method), * cover the right-column pay panel with a soft white scrim + a centered * gold spinner. Communicates "we're working" with zero ambiguity. */ .sst-ip-card__pay { position: relative; } .sst-ip-card__pay::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; z-index: 8; } .sst-ip.sst-ip--submitting .sst-ip-card__pay::after { opacity: 1; pointer-events: auto; } /* Spinner: gold ring rotating against the soft scrim. */ .sst-ip-card__pay > .sst-ip-submitting-spinner { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid rgba(184, 134, 11, 0.18); border-top-color: var(--sst-gold); box-shadow: 0 4px 16px rgba(184, 134, 11, 0.18); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; z-index: 9; } .sst-ip.sst-ip--submitting .sst-ip-card__pay > .sst-ip-submitting-spinner { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .sst-ip-card__pay > .sst-ip-submitting-spinner { animation: sst-ip-spin 0.85s linear infinite; } } @keyframes sst-ip-spin { to { transform: rotate(360deg); } } /* 4. REFINED FOCUS — subtle gold ring on inputs. The native browser focus * outline is jarring on a payment page; we want confident-but-quiet. */ .sst-ip input[type="email"]:focus, .sst-ip input[type="text"]:focus, .sst-ip input[type="tel"]:focus { outline: none; border-color: var(--sst-gold); box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.18), 0 1px 2px rgba(0, 0, 0, 0.03) inset; } /* 5. TACTILE HOVER — the Affirm tile + ACH button get a quiet 1-px lift * on hover so they feel pressable without looking gaudy. */ @media (hover: hover) { .sst-ip-bnpl:not(:disabled):hover, .sst-ip-ach-btn:not(:disabled):hover, #sst-ip-ach-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 15, 26, 0.06); } .sst-ip-bnpl, .sst-ip-ach-btn, #sst-ip-ach-btn { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } } /* Press-down on click for the tactile feel. */ .sst-ip-bnpl:active, .sst-ip-ach-btn:active, #sst-ip-ach-btn:active, .sst-ip-pay-btn:active { transform: translateY(0); } /* 7. TABULAR NUMERALS on every price — digits don't wobble between line-item * card, PAY button, and Affirm tile. The "$ 179 vs $ 1,979" mid-stream * column-shift is a tell of an amateur build. */ .sst-ip .woocommerce-Price-amount, .sst-ip-pay-amount, .sst-ip-pay-label, .sst-ip-order-summary__amount, .sst-ip-bnpl__terms { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* 8. DISABLED STATE during submit — fade affordances so user doesn't double-tap. */ .sst-ip.sst-ip--submitting .sst-ip-bnpl, .sst-ip.sst-ip--submitting #sst-ip-ach-btn, .sst-ip.sst-ip--submitting #sst-ip-cashapp-btn, .sst-ip.sst-ip--submitting .sst-ip-pay-btn[disabled] { pointer-events: none; opacity: 0.55; filter: saturate(0.6); }