/** * Fit Football — the express checkout sheet. * * Lifted out of the product page stylesheet because the sheet is no longer a * product-page thing: the bag drawer opens the same one. Loaded site-wide. */ /* ---- express checkout button ----------------------------------------- */ .pdp-xp { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 15px 18px; border: 0; border-radius: var(--ff-radius-pill); /* Deliberately not black: it must read as a payment provider's button sitting beside our own, the way a wallet button does. */ background: linear-gradient(135deg, #635bff 0%, #4b45c6 100%); color: #fff; font-family: inherit; text-align: left; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .pdp-xp:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(99, 91, 255, .35); } .pdp-xp-bolt { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: rgba(255, 255, 255, .18); } .pdp-xp-txt { display: flex; flex-direction: column; line-height: 1.25; } .pdp-xp-txt strong { font-size: var(--ff-text-md); font-weight: 700; } .pdp-xp-txt span { font-size: var(--ff-text-xs); opacity: .82; } .pdp-xp-go { margin-left: auto; display: grid; place-items: center; } .pdp-xp-note { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 8px 0 0; color: var(--ff-ink-mute); font-size: var(--ff-text-xs); } /* ---- payment sheet ---------------------------------------------------- */ .pdp-xps { /* The sheet lives on , not inside .pdp, so it carries the page's tokens itself rather than inheriting hairlines from nowhere. */ --pdp-line: #d7dbde; --pdp-fill: #f1f3f4; --pdp-soft: #f5f5f5; position: fixed; inset: 0; z-index: 120; } .pdp-xps-scrim { position: absolute; inset: 0; background: rgba(11, 15, 20, .6); opacity: 0; transition: opacity .25s ease; } .pdp-xps.is-open .pdp-xps-scrim { opacity: 1; } /* A sheet, at every width: it rises from the bottom edge, takes nearly the whole screen, and sinks back the same way. Three quarters read as a popup; this reads as the checkout it is. */ .pdp-xps-panel { position: absolute; left: 50%; bottom: 0; display: flex; flex-direction: column; width: min(520px, 100%); height: 88vh; max-height: 88vh; background: #fff; border-radius: 14px 14px 0 0; box-shadow: 0 -18px 60px rgba(10, 12, 14, .18); transform: translate(-50%, 100%); transition: transform .34s cubic-bezier(.22, .61, .36, 1); overflow: hidden; } .pdp-xps.is-open .pdp-xps-panel { transform: translate(-50%, 0); } .pdp-xps-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--pdp-line); } .pdp-xps-lock { display: inline-flex; align-items: center; gap: 6px; color: var(--ff-brand-ink); font-size: var(--ff-text-sm); font-weight: 700; } .pdp-xps-x { border: 0; background: none; font-size: 1.7rem; line-height: 1; cursor: pointer; } .pdp-xps-body { position: relative; flex: 1; min-height: 0; } /* A sheet that hugs its contents reads as a popup; one that claims most of the screen reads as a checkout. Three quarters is the shape this had when it felt right, so the height is set rather than left to the content. */ .pdp-xps-panel.is-wait { height: 88vh; max-height: 88vh; } @media (min-width: 700px) { .pdp-xps-panel.is-wait { height: min(88vh, 900px); max-height: min(88vh, 900px); } } .pdp-xps-wait { padding: 26px 22px 24px; text-align: center; } .pdp-xps-lead { margin: 0 auto 18px; max-width: 30ch; color: var(--ff-ink); font-size: var(--ff-text-sm); line-height: 1.55; } .pdp-xps-sum { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--pdp-line); border-radius: 5px; text-align: left; } .pdp-xps-sum > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: var(--ff-text-sm); } .pdp-xps-sum > div + div { border-top: 1px dashed var(--pdp-line); } .pdp-xps-sum dt { color: var(--ff-ink-mute); } .pdp-xps-sum dd { margin: 0; font-weight: 700; text-align: right; } .pdp-xps-cta { display: block; padding: 15px 18px; background: var(--ff-brand-ink); border-radius: 4px; color: #fff; font-size: var(--ff-text-sm); font-weight: 700; text-decoration: none; } /* Once the tab is already open this is a second chance, not the main road. */ .pdp-xps-cta.is-quiet { background: #fff; border: 1px solid var(--pdp-line); color: var(--ff-ink); } .pdp-xps-paid { display: block; width: 100%; margin-top: 10px; padding: 13px 18px; background: none; border: 0; color: var(--ff-ink-mute); font-size: var(--ff-text-sm); text-decoration: underline; cursor: pointer; } .pdp-xps-hint { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 6px 0 0; color: var(--ff-ink-mute); font-size: var(--ff-text-xs); } .pdp-xps-pulse { width: 7px; height: 7px; border-radius: 50%; background: #17913a; animation: ff-xps-pulse 1.6s ease-in-out infinite; } .pdp-xps-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--ff-ink-mute); font-size: var(--ff-text-sm); text-align: center; padding: 20px; } .pdp-xps-spin { width: 34px; height: 34px; border: 3px solid var(--pdp-line); border-top-color: #635bff; border-radius: 50%; animation: ff-xps-spin .8s linear infinite; } @media (prefers-reduced-motion: reduce) { .pdp-xps-spin { animation-duration: 2.4s; } } .pdp-xps-foot { padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); border-top: 1px solid var(--pdp-line); text-align: center; } .pdp-xps-foot span { color: var(--ff-ink-mute); font-size: var(--ff-text-xs); } /* Nothing floats over anything here, so the spinner takes its own room. */ .pdp-xps-panel.is-wait .pdp-xps-loading { position: static; min-height: 240px; } /* ---- thank-you note --------------------------------------------------- */ .pdp-xps-panel.is-note { height: auto; max-width: 420px; padding: 34px 26px calc(26px + env(safe-area-inset-bottom)); text-align: center; align-items: center; } .pdp-xps-tick { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 14px; border-radius: 50%; background: var(--ff-brand); color: #fff; } .pdp-xps-panel.is-note h2 { margin: 0 0 10px; font-family: var(--ff-font-display); font-size: var(--ff-text-xl); text-transform: uppercase; } .pdp-xps-panel.is-note p { margin: 0 0 10px; color: var(--ff-ink-soft); font-size: var(--ff-text-sm); line-height: 1.6; } .pdp-xps-done { width: 100%; margin-top: 14px; padding: 15px; border: 0; border-radius: var(--ff-radius-pill); background: var(--ff-brand-ink); color: #fff; font-family: inherit; font-size: var(--ff-text-md); font-weight: 700; cursor: pointer; } /* This block used to be a desktop-only override — a centred modal that faded in — and it lost its @media wrapper when these rules were lifted out of the product page stylesheet. Unwrapped, it beat every height set below and replaced the rise-from-the-bottom with a fade. The sheet is a bottom sheet at every width now, so the whole override is gone rather than restored. */ /* ======================================================================= * The payment sheet showed its spinner on top of a perfectly loaded * checkout: `display: grid` / `display: block` on these two elements beat * the `hidden` attribute, which only carries `display: none` from the UA * stylesheet. Both need an explicit override or `hidden` does nothing. * ==================================================================== */ .pdp-xps-wait[hidden], .pdp-xps-sum[hidden], .pdp-xps-paid[hidden], .pdp-xps-hint[hidden], .pdp-xps-loading[hidden], .pdp-video-mute[hidden], .pdp-sticky[hidden], .pdp-rv-card[hidden], .pdp-ugc-tile[hidden] { display: none !important; } /* ---- express button: Stripe mark + a button that feels alive --------- */ .pdp-xp-bolt { background: #fff; color: #635bff; overflow: hidden; } .pdp-xp-bolt svg { width: 20px; height: 20px; } /* A slow sheen crossing the button, the way a wallet button breathes. */ .pdp-xp { position: relative; overflow: hidden; isolation: isolate; } .pdp-xp::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-100%); animation: ff-xp-sheen 4.5s ease-in-out infinite; } .pdp-xp:active { transform: translateY(1px) scale(.995); } /* The sub-line cycles through what the button actually gets you. */ .pdp-xp-rotate { display: block; min-height: 1.05em; transition: opacity .28s ease, transform .28s ease; } .pdp-xp-rotate.is-out { opacity: 0; transform: translateY(-4px); } .pdp-xp-bolt.is-pulse { animation: ff-xp-pulse 1.6s ease-in-out infinite; } .pdp-xp::after, .pdp-xp-bolt.is-pulse { animation: none; } .pdp-xp-rotate { transition: none; } .pdp-xp.is-sticky { margin-top: 0; padding: 13px 18px; } .pdp-xp.is-sticky .pdp-xp-bolt { width: 28px; height: 28px; } .pdp-xp.is-sticky .pdp-xp-bolt svg { width: 17px; height: 17px; } /* Not disabled — it still responds, it just says the size is missing. A greyed-out button gives the shopper nothing to act on. */ .pdp-xp.is-waiting { background: linear-gradient(135deg, #8f8bff 0%, #7a75d6 100%); } .pdp-xp.is-waiting::after { animation: none; } .pdp-xp[disabled] { opacity: .7; cursor: wait; } .pdp-xp-warn { margin: 8px 0 0; padding: 9px 12px; border-left: 3px solid var(--ff-sale); background: #fff2f4; color: #a1152f; font-size: var(--ff-text-sm); opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; } .pdp-xp-warn.is-in { opacity: 1; transform: translateY(0); } /* ---- receipt ---------------------------------------------------------- */ .pdp-xps-panel.is-receipt { max-width: 440px; text-align: left; } .pdp-xps-panel.is-receipt h2, .pdp-xps-panel.is-receipt .pdp-xps-tick { align-self: center; } .pdp-xps-shot { margin: 0 0 16px !important; padding: 9px 12px; background: var(--pdp-fill); color: var(--ff-ink) !important; font-weight: 600; text-align: center; } .pdp-xps-lines { margin: 0 0 16px; width: 100%; } .pdp-xps-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--pdp-line); } .pdp-xps-lines dt { color: var(--ff-ink-mute); font-size: var(--ff-text-sm); } .pdp-xps-lines dd { margin: 0; font-size: var(--ff-text-sm); font-weight: 600; text-align: right; } .pdp-xps-track { display: block; width: 100%; margin-top: 4px; padding: 14px; border: 1px solid var(--ff-ink); color: var(--ff-brand-ink); font-size: var(--ff-text-sm); font-weight: 700; text-align: center; text-decoration: none; } /* ======================================================================= * Express checkout, step one: our own details form. * * The provider's page asked for these six fields in its own type on its own * domain — a hand-off in the middle of a hand-off. Asking here keeps the * shopper on the shop until the only screen that has to be someone else's: * Stripe's card form. * ==================================================================== */ .pdp-xps-body { overflow-y: auto; -webkit-overflow-scrolling: touch; } .pdp-xpf { padding: 20px 22px 24px; } .pdp-xpf-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--pdp-line); } .pdp-xpf-item { color: var(--ff-ink-mute); font-size: var(--ff-text-xs); line-height: 1.4; } .pdp-xpf-total { font-size: var(--ff-text-md); white-space: nowrap; } .pdp-xpf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pdp-xpf-grid label { display: block; } .pdp-xpf-grid label.is-wide { grid-column: 1 / -1; } .pdp-xpf-grid span { display: block; margin-bottom: 5px; color: var(--ff-ink-mute); font-size: var(--ff-text-xs); letter-spacing: .01em; } /* An empty field on a white card is invisible until you tap it. Resting grey is what tells the eye there is a box here at all; white plus a dark rule is what tells it which box is live. */ .pdp-xpf-grid input { width: 100%; padding: 12px 13px; border: 1px solid var(--pdp-line); border-radius: 4px; background: #f2f4f6; color: var(--ff-ink); font-family: inherit; font-size: var(--ff-text-sm); transition: border-color .16s ease, background .16s ease; } .pdp-xpf-grid input::placeholder { color: #9aa3ac; } .pdp-xpf-grid input:hover { background: #eceff2; } .pdp-xpf-grid input:focus { outline: none; background: #fff; border-color: var(--ff-brand-ink); box-shadow: 0 0 0 3px rgba(14, 164, 94, .12); } .pdp-xpf-grid input.is-bad { border-color: var(--ff-sale); } .pdp-xpf-err { margin: 12px 0 0; color: var(--ff-sale); font-size: var(--ff-text-xs); } .pdp-xpf-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 18px; padding: 16px 18px; border: 0; border-radius: 4px; background: var(--ff-brand-ink); color: #fff; font-family: inherit; font-size: var(--ff-text-sm); font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: opacity .16s ease; } .pdp-xpf-go:disabled { opacity: .6; cursor: default; } .pdp-xpf-amt { opacity: .8; } .pdp-xps-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: var(--ff-ink-mute); font-size: var(--ff-text-xs); } .pdp-xpf[hidden] { display: none !important; } .pdp-xpf { padding: 16px 16px 20px; } .pdp-xpf-grid { gap: 10px; } /* The provider's return address lands here for a second before the receipt. */ .pdp-xps.is-bridge .pdp-xps-panel { display: grid; justify-items: center; gap: 14px; } .pdp-xps.is-bridge .pdp-xps-spin { width: 30px; height: 30px; } @keyframes ff-xps-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } @keyframes ff-xps-spin { to { transform: rotate(360deg); } } /* ---- "are you sure" ---------------------------------------------------- */ .pdp-xps-confirm { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 22px; background: rgba(255, 255, 255, .93); backdrop-filter: blur(2px); } .pdp-xps-confirm[hidden] { display: none !important; } .pdp-xps-confirm-box { max-width: 320px; text-align: center; } .pdp-xps-confirm h3 { margin: 0 0 8px; font-family: var(--ff-font-display, 'Anton', sans-serif); font-size: 1.15rem; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; } .pdp-xps-confirm p { margin: 0 0 20px; color: var(--ff-ink-mute); font-size: var(--ff-text-sm); line-height: 1.6; } .pdp-xps-keep, .pdp-xps-drop { display: block; width: 100%; padding: 14px 18px; border-radius: 4px; font-family: inherit; font-size: var(--ff-text-sm); font-weight: 700; cursor: pointer; } .pdp-xps-keep { border: 0; background: var(--ff-brand-ink, #0b0f14); color: #fff; } .pdp-xps-drop { margin-top: 8px; border: 1px solid var(--pdp-line); background: #fff; color: var(--ff-sale, #b42318); } /* ---- the address, said out loud --------------------------------------- */ .pdp-xpf-say { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; padding: 11px 13px; border: 1px solid var(--pdp-line); border-left: 3px solid var(--ff-brand-ink, #0b0f14); border-radius: 4px; background: #fafafa; color: var(--ff-ink-soft, #3f4854); font-size: var(--ff-text-xs); line-height: 1.55; text-align: left; } .pdp-xpf-say svg { flex: 0 0 auto; margin-top: 1px; color: var(--ff-ink-mute); } .pdp-xpf-help { display: block; margin-top: 5px; color: var(--ff-ink-mute); font-size: 11px; font-style: normal; line-height: 1.5; } /* A field that has been filled has no need to keep explaining itself. */ .pdp-xpf-grid input:not(:placeholder-shown) ~ .pdp-xpf-help { opacity: .55; } /* ---- phones: lift the sheet off the very bottom ------------------------ */ @media (max-width: 700px) { /* Sitting flush against the bottom edge puts the last field under the browser's own chrome and the home indicator. Floating it clear reads as a card the shopper can dismiss, and gives the keyboard somewhere to go. dvh rather than vh: on a phone vh is the tallest the viewport ever gets, which is exactly the height that hides behind the address bar. */ .pdp-xps-panel, .pdp-xps-panel.is-wait { bottom: max(14px, env(safe-area-inset-bottom)); width: calc(100% - 20px); height: 88dvh; max-height: 88dvh; border-radius: 14px; } .pdp-xps-foot { padding-bottom: 12px; } } /* ---- the address, in parts --------------------------------------------- */ .pdp-xpf-grid span i { font-style: normal; font-weight: 400; opacity: .65; text-transform: none; } .pdp-xpf-grid span i:empty { display: none; } /* Postcode reads as a code, not as prose. */ .pdp-xpf-grid input[name="postcode"] { text-transform: uppercase; letter-spacing: .04em; } .pdp-xpf-grid input[name="postcode"]::placeholder { text-transform: none; letter-spacing: 0; } /* A field the shopper skipped is the only red thing on the sheet. */ .pdp-xpf-grid input.is-bad { border-color: var(--ff-sale, #b42318); background: #fdf3f2; }