/* * Healio branding for the WooCommerce block checkout. * * This does double duty. It styles the checkout itself, and it sets the * elements the Stripe Payment Element samples to build its own appearance. * Since plugin 10.5 Stripe reads computed styles straight off this page * rather than taking an appearance object from PHP, so the card fields * inherit whatever these rules resolve to. * * Selectors Stripe samples (from upe-blocks.js, blocksCheckout profile): * .Input <- .wc-block-components-text-input #email * .Input--invalid <- .wc-block-components-text-input.has-error * .Label <- .wc-block-components-text-input label * .Text <- .wc-block-components-checkout-step__description, * .wc-block-components-text-input, * .wc-block-components-radio-control__label, * .wc-block-checkout__terms * .AccordionItem / colorBackground * <- #payment-method .wc-block-components-radio-control-accordion-option, * #payment-method, form.wc-block-checkout__form, .wc-block-checkout, body * * Changing a value here changes the Stripe card form to match. That is the * intended way to brand it; there is no appearance filter to hook. */ .wc-block-checkout { --healio-co-radius: 12px; --healio-co-line: var(--line, rgba(43, 10, 20, 0.10)); --healio-co-ink: var(--wine, #2B0A14); --healio-co-muted: #5F565A; --healio-co-accent: var(--berry, #8E2444); --healio-co-focus: var(--rose, #C96790); } /* --------------------------------------------------------------------------- * Payment area. Stripe reads its element background from the first of these * with a real colour, so make it explicit rather than letting it fall all the * way through to . * ------------------------------------------------------------------------ */ /* The fieldset also wraps the "Payment options" heading above the card, so * giving it its own white background made that heading sit on a rounded * white patch outside the actual bordered card below it. Leave it * transparent -- only the accordion option (the card itself) gets colour. */ #payment-method { background: transparent; } #payment-method .wc-block-components-radio-control-accordion-option { background: var(--paper, #fff); border: 1px solid var(--healio-co-line); border-radius: var(--healio-co-radius); overflow: hidden; } #payment-method .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option { margin-top: 10px; } /* The option the shopper has actually chosen. */ #payment-method .wc-block-components-radio-control-accordion-option:has( .wc-block-components-radio-control__input:checked ) { border-color: var(--healio-co-accent); box-shadow: 0 0 0 1px var(--healio-co-accent) inset; } /* --------------------------------------------------------------------------- * Text. The first matching selector becomes Stripe's colorText, fontFamily * and fontSizeBase, so it needs to be readable rather than decorative. * ------------------------------------------------------------------------ */ .wc-block-components-checkout-step__description { color: var(--healio-co-muted); font-family: var(--font-body, inherit); font-size: 14px; line-height: 1.5; } .wc-block-components-radio-control__label, .wc-block-checkout__terms { color: var(--healio-co-ink); font-family: var(--font-body, inherit); } /* --------------------------------------------------------------------------- * Fields. The theme already sets the border, radius and family; this adds the * breathing room and the error state Stripe mirrors into .Input--invalid. * ------------------------------------------------------------------------ */ .wc-block-components-text-input input, .wc-block-components-text-input select { min-height: 52px; } .wc-block-components-text-input.has-error input, .wc-block-components-text-input.has-error input:focus { border-color: #B3261E !important; box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14) !important; } .wc-block-components-text-input label { color: var(--healio-co-muted); font-family: var(--font-body, inherit); } .wc-block-components-text-input.is-active label { color: var(--healio-co-accent); } /* --------------------------------------------------------------------------- * Shipping options, to match the Shipping Protection card sitting under them. * ------------------------------------------------------------------------ */ .wc-block-components-shipping-rates-control .wc-block-components-radio-control__option { border-radius: var(--healio-co-radius); } .wc-block-components-radio-control__option--checked-option-highlighted, .wc-block-components-radio-control__option:has( input:checked ) { border-color: var(--healio-co-accent); } /* --------------------------------------------------------------------------- * Place Order. * ------------------------------------------------------------------------ */ /* Size is left to WooCommerce: it sets height and font-size from its own * relative scale and wins on specificity, and the resulting ~54px pill is * already the right proportion. Only the brand cues are overridden here. */ .wc-block-checkout .wc-block-components-checkout-place-order-button { border-radius: 999px; font-family: var(--font-body, inherit); font-weight: 600; letter-spacing: 0.01em; } @media (prefers-reduced-motion: no-preference) { .wc-block-components-checkout-place-order-button { transition: transform 0.15s ease, box-shadow 0.15s ease; } .wc-block-components-checkout-place-order-button:hover:not( :disabled ) { transform: translateY(-1px); box-shadow: var(--shadow-soft, 0 12px 24px -12px rgba(43, 10, 20, 0.35)); } }