/* CSS Safety — WooCommerce checkout & account. * * Every rule is scoped under `.css-woo-page` (added to only on the * checkout, cart and account pages) or under the `.css-checkout` wrapper, so * nothing here can affect the rest of the website. * * Design tokens come from the existing site — `.css-safety` supplies * --c-dark / --c-grey-light / --radius-* / --fs-*, and the inline :root block * supplies --c-primary / --font-heading / --font-body. No new palette is * introduced. */ /* ========================================================================== 1. SHARED FOUNDATIONS ========================================================================== */ .css-woo-page .site-content { background: var(--c-white, #fff); } /* WooCommerce styles its own controls through CSS custom properties. Redefining them in scope is cleaner — and far more complete — than out-specifying every individual rule, and it keeps components we haven't enumerated consistent too. Scoped to CSS Safety WooCommerce pages only. */ .css-woo-page .css-safety, .css-checkout { --wc-form-border-color: #ddd; --wc-form-border-width: 1px; --wc-form-border-radius: 10px; --wc-content-bg: var(--c-white, #fff); --wc-subtext: #6d6d6d; --wc-primary: var(--c-primary, #edcb20); --wc-primary-text: var(--c-dark, #242128); --wc-secondary: var(--c-grey-light, #f5f5f5); --wc-secondary-text: var(--c-dark, #242128); --wc-highlight: var(--c-primary, #edcb20); --wc-highligh-text: var(--c-dark, #242128); --wc-red: #c0392b; --wc-green: #1a7f37; } /* Field language shared by checkout and account, matching the site's own contact form: soft grey fill, hairline border, 10px radius. */ .css-woo-page .css-safety input[type="text"], .css-woo-page .css-safety input[type="email"], .css-woo-page .css-safety input[type="tel"], .css-woo-page .css-safety input[type="number"], .css-woo-page .css-safety input[type="password"], .css-woo-page .css-safety textarea, .css-woo-page .css-safety select { width: 100%; padding: 13px 16px; border: 1px solid #ddd; border-radius: 10px; background: var(--c-grey-light, #f5f5f5); color: var(--c-dark, #242128); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 15px; line-height: 1.4; transition: border-color .15s ease, background .15s ease; appearance: none; -webkit-appearance: none; } .css-woo-page .css-safety textarea { min-height: 110px; resize: vertical; } .css-woo-page .css-safety input:focus, .css-woo-page .css-safety textarea:focus, .css-woo-page .css-safety select:focus { border-color: var(--c-primary, #edcb20); background: var(--c-white, #fff); outline: 2px solid rgba(var(--c-primary-rgb, 237, 203, 32), .28); outline-offset: 1px; } /* Native select needs its own chevron once appearance is stripped. */ .css-woo-page .css-safety select { padding-right: 40px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23242128' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; } .css-woo-page .css-safety label { display: block; margin-bottom: 7px; color: var(--c-dark, #242128); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 14px; font-weight: 600; line-height: 1.35; } .css-woo-page .css-safety .required { color: var(--c-primary, #edcb20); font-weight: 700; text-decoration: none; border: 0; } .css-woo-page .css-safety .optional { color: #8a8a8a; font-weight: 400; } /* ========================================================================== 2. CHECKOUT — TWO-COLUMN COMPOSITION ========================================================================== */ .css-checkout { --css-co-gutter: 64px; --css-co-pad-y: 64px; font-family: var(--font-body, 'Inter', system-ui, sans-serif); color: var(--c-grey-text, #3f3f3f); /* The vertical split is painted here rather than on the columns, so the contrasting right side runs the full height whichever column is taller. */ background: linear-gradient( to right, var(--c-white, #fff) 0%, var(--c-white, #fff) 50%, var(--c-grey-light, #f5f5f5) 50%, var(--c-grey-light, #f5f5f5) 100% ); } .css-checkout__grid { display: grid; grid-template-columns: 1fr 1fr; /* `stretch` (not `start`) is deliberate: the aside must fill the row height or the sticky summary inside it has no travel and simply scrolls away. Stretching also means sticky naturally releases at the end of the column — it can never ride over the footer. */ align-items: stretch; } /* The form is the left grid cell; its inner wrapper does the padding. */ .css-checkout__form { grid-column: 1; min-width: 0; } .css-checkout__main { box-sizing: border-box; width: 100%; max-width: 620px; margin-left: auto; padding: var(--css-co-pad-y) var(--css-co-gutter) var(--css-co-pad-y) 40px; } .css-checkout__aside { grid-column: 2; box-sizing: border-box; width: 100%; max-width: 560px; min-width: 0; margin-right: auto; padding: var(--css-co-pad-y) 40px var(--css-co-pad-y) var(--css-co-gutter); } /* ========================================================================== 3. STICKY ORDER SUMMARY ========================================================================== */ .css-checkout__summary { position: sticky; /* Clears the sticky site header; the admin bar is added below. */ top: 120px; } .admin-bar .css-checkout__summary { top: 152px; } /* Sticky positioning needs a normal flow context on shorter viewports — below this height it would trap the summary and hide the total. */ @media (max-height: 720px) { .css-checkout__summary { position: static; } } /* ========================================================================== 4. TYPOGRAPHY ========================================================================== */ .css-checkout__intro { margin-bottom: 36px; } .css-checkout__title { margin: 0 0 10px; color: var(--c-heading, #242128); font-family: var(--font-heading, 'Instrument Sans', system-ui, sans-serif); font-size: var(--fs-h3, clamp(24px, 4vw, 40px)); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; } .css-checkout__lead { margin: 0; max-width: 46ch; color: var(--c-grey-text, #3f3f3f); font-size: var(--fs-small, 15px); line-height: 1.55; } /* Section headings — billing, training address, payment, order summary. */ .css-checkout h3, .css-checkout .css-checkout__section-heading, .css-checkout #order_review_heading, .css-checkout .woocommerce-billing-fields > h3, .css-checkout .woocommerce-additional-fields > h3 { margin: 0 0 20px; color: var(--c-heading, #242128); font-family: var(--font-heading, 'Instrument Sans', system-ui, sans-serif); font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -0.005em; } /* Left-column sequence. `#customer_details` becomes `display: contents` so its two inner columns become direct flex children here. That lets the Training Address sit between the customer's details and the order notes — matching the intended reading order — without moving any markup with JavaScript, so it survives every WooCommerce AJAX refresh. */ .css-checkout__main { display: flex; flex-direction: column; } .css-checkout #customer_details { display: contents; } .css-checkout__main > .css-checkout__intro { order: 1; } .css-checkout #customer_details > .col-1 { order: 2; } .css-checkout__main > .css-training-address { order: 3; } .css-checkout #customer_details > .col-2 { order: 4; } /* WooCommerce fires `woocommerce_review_order_before_payment` outside the payment wrapper, so the heading is a sibling — it needs the same order value as the payment block to stay attached to it. */ .css-checkout__main > .css-checkout__section-heading { order: 5; } .css-checkout__main > .woocommerce-checkout-payment { order: 5; } /* Separators between the stacked sections. */ .css-checkout__main .woocommerce-additional-fields, .css-checkout__main .css-training-address, .css-checkout__main .css-checkout__section-heading { margin-top: 40px; padding-top: 36px; border-top: 1px solid #e6e6e6; } /* The payment heading carries the separator, so the payment block itself must not add a second one. */ .css-checkout__main .woocommerce-checkout-payment { margin-top: 0; padding-top: 0; border-top: 0; } /* An empty additional-fields block would leave a stray rule. */ .css-checkout__main .woocommerce-additional-fields:empty { display: none; } /* ========================================================================== 5. FIELD GRID ========================================================================== */ .css-checkout .woocommerce-billing-fields__field-wrapper, .css-checkout .woocommerce-additional-fields__field-wrapper, .css-checkout .css-training-address__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; } /* WooCommerce lays these out with floats and percentage widths (`.woocommerce form .form-row-first { width:47%; float:left }`). Those selectors carry an element in them, so ours match that specificity and are loaded afterwards. */ .css-checkout form .form-row, .css-checkout form .form-row-first, .css-checkout form .form-row-last, .css-checkout form .form-row-wide { margin: 0; padding: 0; float: none; width: auto; clear: none; } .css-checkout form .form-row textarea, .css-checkout form .form-row input.input-text, .css-checkout form .form-row select { height: auto; padding: 13px 16px; border: 1px solid #ddd; border-radius: 10px; background-color: var(--c-grey-light, #f5f5f5); box-shadow: none; color: var(--c-dark, #242128); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 15px; } .css-checkout form .form-row textarea { min-height: 110px; } .css-checkout form .form-row input.input-text:focus, .css-checkout form .form-row textarea:focus, .css-checkout form .form-row select:focus { border-color: var(--c-primary, #edcb20); background-color: var(--c-white, #fff); } /* Woo marks half-width fields first/last; everything else spans the row. */ .css-checkout .form-row-wide, .css-checkout .form-row.notes, .css-checkout .form-row.create-account, .css-checkout .form-row.validate-required.woocommerce-validated, .css-checkout .woocommerce-billing-fields__field-wrapper > .form-row:not(.form-row-first):not(.form-row-last), .css-checkout .css-training-address__fields > .form-row:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; } .css-checkout .form-row-first { grid-column: 1; } .css-checkout .form-row-last { grid-column: 2; } /* Undo WooCommerce's float-based two-column layout. */ .css-checkout .col2-set, .css-checkout .col2-set .col-1, .css-checkout .col2-set .col-2 { float: none; width: 100%; margin: 0; padding: 0; } .css-checkout .woocommerce-input-wrapper { display: block; width: 100%; } /* Select2 (country pickers) matched to the native fields. */ .css-checkout .select2-container--default .select2-selection--single { height: auto; padding: 12px 16px; border: 1px solid #ddd; border-radius: 10px; background: var(--c-grey-light, #f5f5f5); } .css-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; color: var(--c-dark, #242128); font-size: 15px; line-height: 1.4; } .css-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; right: 12px; transform: translateY(-50%); } /* ========================================================================== 6. TRAINING ADDRESS Deliberately NOT a card: no accent stripe, no tinted panel. It reads as the next section of the same form. ========================================================================== */ .css-training-address { /* spacing/border comes from the shared section rule above */ } .css-training-address__intro { margin: -8px 0 18px; color: var(--c-grey-text, #3f3f3f); font-size: 14px; line-height: 1.55; } /* Checkbox and label are siblings (see checkout.php for why). */ .css-checkout .css-training-address__copy { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; } .css-checkout .css-training-address__copy label { margin: 0; font-size: 14px; font-weight: 500; cursor: pointer; } .css-checkout .css-training-address__copy input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--c-primary, #edcb20); cursor: pointer; } /* A copied field reads as derived, not disabled. */ .css-checkout .css-training-address input[readonly] { background: #fafafa; color: #6d6d6d; } /* ========================================================================== 7. ORDER SUMMARY Flat rows separated by hairlines — the contrasting column already provides containment, so no inner card. ========================================================================== */ /* WooCommerce gives .shop_table a border, radius and cell padding via `.woocommerce table.shop_table`. Match that specificity to strip it back to flat rows — the contrasting column is the containment. */ .css-checkout table.shop_table, .css-checkout table.woocommerce-checkout-review-order-table { display: block; width: 100%; margin: 0; border: 0; border-radius: 0; background: none; border-collapse: collapse; border-spacing: 0; } /* `tfoot` is included because WooCommerce targets `.woocommerce table.shop_table tfoot th`, which outranks a plain th/td selector and would leave a hairline above every totals row. */ .css-checkout table.shop_table th, .css-checkout table.shop_table td, .css-checkout table.shop_table tfoot th, .css-checkout table.shop_table tfoot td, .css-checkout table.shop_table tbody th, .css-checkout table.shop_table tbody td { border: 0; border-top: 0; padding: 0; background: none; vertical-align: baseline; } .css-checkout .woocommerce-checkout-review-order-table thead { display: none; } .css-checkout .woocommerce-checkout-review-order-table tbody, .css-checkout .woocommerce-checkout-review-order-table tfoot { display: block; width: 100%; } .css-checkout .woocommerce-checkout-review-order-table tr { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; width: 100%; } .css-checkout .woocommerce-checkout-review-order-table th, .css-checkout .woocommerce-checkout-review-order-table td { display: block; padding: 0; border: 0; background: none; text-align: left; font-size: 15px; } /* Course line */ .css-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item { align-items: flex-start; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid #e2e2e2; } .css-checkout .woocommerce-checkout-review-order-table .product-name { flex: 1 1 auto; } .css-checkout .woocommerce-checkout-review-order-table .product-total { flex: 0 0 auto; font-weight: 700; white-space: nowrap; } .css-checkout__item-course { display: block; margin-bottom: 6px; color: var(--c-heading, #242128); font-family: var(--font-heading, 'Instrument Sans', system-ui, sans-serif); font-size: 17px; font-weight: 800; line-height: 1.25; } .css-checkout__item-dates, .css-checkout__item-attendees { display: block; color: var(--c-grey-text, #3f3f3f); font-size: 14px; line-height: 1.5; } /* Totals rows */ .css-checkout .woocommerce-checkout-review-order-table tfoot tr { padding: 11px 0; } .css-checkout .woocommerce-checkout-review-order-table tfoot th { font-weight: 500; color: var(--c-grey-text, #3f3f3f); } .css-checkout .woocommerce-checkout-review-order-table tfoot td { font-weight: 600; color: var(--c-dark, #242128); white-space: nowrap; } .css-checkout .woocommerce-checkout-review-order-table tfoot .order-total { margin-top: 6px; padding-top: 20px; border-top: 1px solid #e2e2e2; } .css-checkout .woocommerce-checkout-review-order-table tfoot .order-total th { color: var(--c-heading, #242128); font-family: var(--font-heading, 'Instrument Sans', system-ui, sans-serif); font-size: 19px; font-weight: 800; } .css-checkout .woocommerce-checkout-review-order-table tfoot .order-total td { font-family: var(--font-heading, 'Instrument Sans', system-ui, sans-serif); font-size: 24px; font-weight: 800; line-height: 1.1; } .css-checkout .woocommerce-checkout-review-order-table tfoot .order-total small, .css-checkout .woocommerce-checkout-review-order-table .includes_tax { display: block; margin-top: 4px; color: #6d6d6d; font-size: 13px; font-weight: 400; } /* Cart item meta that survives (e.g. a coupon-related note). */ .css-checkout .woocommerce-checkout-review-order-table .variation, .css-checkout .woocommerce-checkout-review-order-table dl.variation { margin: 6px 0 0; font-size: 13px; } /* ========================================================================== 8. COUPON ========================================================================== */ /* WooCommerce styles `form.checkout_coupon` as a bordered panel; this replaces it with a plain section inside the summary. */ .css-checkout form.checkout_coupon, .css-checkout .css-checkout__coupon { margin: 28px 0 0; padding: 24px 0 0; border: 0; border-top: 1px solid #d8d8d8; border-radius: 0; background: none; text-align: left; } /* WooCommerce's checkout.js calls `$('form.checkout_coupon').hide()` on init, because by default the field is revealed by a "Have a coupon?" toggle link. That banner is exactly what we removed, so the field must stay visible. A stylesheet `!important` overrides the inline style JavaScript sets, which keeps this declarative — we do not re-show it with our own script, and WooCommerce's submit handler stays bound, so applying a coupon still works. */ .css-checkout form.checkout_coupon { display: block !important; } .css-checkout__coupon-label { display: block; margin-bottom: 9px; color: var(--c-dark, #242128); font-size: 14px; font-weight: 600; } .css-checkout__coupon-row { display: flex; gap: 10px; align-items: stretch; } .css-checkout .css-checkout__coupon-input { flex: 1 1 auto; min-width: 0; /* White against the grey column so the field still reads as an input. */ background: var(--c-white, #fff); } /* `button.` qualifier is needed to outrank `.woocommerce button.button`. */ .css-checkout button.css-checkout__coupon-btn { flex: 0 0 auto; padding: 0 22px; border: 1px solid var(--c-dark, #242128); border-radius: var(--radius-button, 5px); background: transparent; background-color: transparent; color: var(--c-dark, #242128); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .css-checkout button.css-checkout__coupon-btn:hover, .css-checkout button.css-checkout__coupon-btn:focus-visible { background-color: var(--c-dark, #242128); color: var(--c-white, #fff); } /* ========================================================================== 9. PAYMENT ========================================================================== */ .css-checkout .woocommerce-checkout-payment { background: none !important; border-radius: 0; } .css-checkout .wc_payment_methods { margin: 0 0 22px; padding: 0; list-style: none; } .css-checkout .wc_payment_method { margin-bottom: 10px; padding: 0; list-style: none; } .css-checkout .wc_payment_method > label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 15px 18px; border: 1px solid #ddd; border-radius: 10px; background: var(--c-white, #fff); font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .15s ease; } .css-checkout .wc_payment_method > input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--c-primary, #edcb20); } .css-checkout .wc_payment_method > input[type="radio"]:checked + label { border-color: var(--c-dark, #242128); } .css-checkout .payment_box { margin: 8px 0 0; padding: 16px 18px; border-radius: 10px; background: var(--c-grey-light, #f5f5f5); font-size: 14px; line-height: 1.55; } /* Stripe's own card element must keep its internal styling. */ .css-checkout .payment_box .wc-stripe-elements-field, .css-checkout .payment_box .wc-stripe-upe-element { padding: 12px 14px; border: 1px solid #ddd; border-radius: 10px; background: var(--c-white, #fff); } /* ========================================================================== 10. TERMS + PLACE ORDER ========================================================================== */ .css-checkout .woocommerce-privacy-policy-text { margin-bottom: 16px; color: var(--c-grey-text, #3f3f3f); font-size: 13.5px; line-height: 1.6; } .css-checkout .woocommerce-privacy-policy-text p { margin: 0; } .css-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: 24px; } .css-checkout .validate-required.woocommerce-terms-and-conditions-checkbox-text, .css-checkout .form-row.validate-required > label.woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 11px; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; cursor: pointer; } .css-checkout .woocommerce-form__input-checkbox { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--c-primary, #edcb20); cursor: pointer; } .css-checkout a { color: var(--c-dark, #242128); text-decoration: underline; text-underline-offset: 2px; } .css-checkout a:hover, .css-checkout a:focus-visible { color: var(--c-primary, #edcb20); } /* Primary CTA — the site's own button language. */ .css-checkout #place_order { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 16px 28px; border: 1px solid transparent; border-radius: var(--radius-button, 5px); background: var(--c-primary, #edcb20); box-shadow: inset 0 -2px 2px rgba(0, 0, 0, .06); color: var(--c-dark, #242128); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .15s ease, filter .15s ease; } .css-checkout #place_order:hover { transform: translateY(-1px); filter: brightness(.95); } .css-checkout #place_order:disabled { opacity: .6; cursor: not-allowed; transform: none; } /* ========================================================================== 11. NOTICES Flat, no side stripes, no icons — see brief §8 and §21. ========================================================================== */ .css-woo-page .woocommerce-notices-wrapper:empty { display: none; } .css-woo-page .woocommerce-message, .css-woo-page .woocommerce-info, .css-woo-page .woocommerce-error, .css-checkout .woocommerce-message, .css-checkout .woocommerce-info, .css-checkout .woocommerce-error { margin: 0 0 22px; padding: 15px 18px; border: 1px solid #e6e0bd; border-left-width: 1px; border-top-width: 1px; border-radius: 10px; background: #fdfaec; color: var(--c-dark, #242128); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 14.5px; line-height: 1.55; list-style: none; } /* Kill WooCommerce's ::before icon glyph and its indent. */ .css-woo-page .woocommerce-message::before, .css-woo-page .woocommerce-info::before, .css-woo-page .woocommerce-error::before, .css-checkout .woocommerce-message::before, .css-checkout .woocommerce-info::before, .css-checkout .woocommerce-error::before { content: none !important; display: none !important; } .css-woo-page .woocommerce-error { border-color: #eccfcb; background: #fdf1ef; } .css-woo-page .woocommerce-error li { margin: 0 0 4px; padding: 0; list-style: none; } .css-woo-page .woocommerce-error li:last-child { margin-bottom: 0; } .css-woo-page .woocommerce-message .button, .css-woo-page .woocommerce-info .button { float: none; margin-left: 10px; } /* Inline field validation */ .css-checkout .woocommerce-invalid input.input-text, .css-checkout .woocommerce-invalid select { border-color: #c0392b; } .css-checkout .woocommerce-invalid .required { color: #c0392b; } /* ========================================================================== 12. RESPONSIVE ========================================================================== */ /* Tablet — one column, but keep comfortable gutters. The split background is removed here so the summary reads as its own band. */ @media (max-width: 1100px) { .css-checkout { background: var(--c-white, #fff); } .css-checkout__grid { grid-template-columns: 1fr; } /* Stacked, the summary leads. The customer sees the course, dates, attendees and total before working down a long form — if it stayed in source order it would land *after* the Place order button, where it can no longer inform the decision. */ .css-checkout__form, .css-checkout__aside { grid-column: 1; } .css-checkout__aside { order: 1; } .css-checkout__form { order: 2; } .css-checkout__main, .css-checkout__aside { max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; } .css-checkout__main { padding-bottom: 40px; } .css-checkout__aside { padding-top: 40px; padding-bottom: 56px; background: var(--c-grey-light, #f5f5f5); max-width: none; } .css-checkout__aside .css-checkout__summary { /* Never sticky once stacked. */ position: static; max-width: 720px; margin: 0 auto; } } /* Mobile */ @media (max-width: 700px) { .css-checkout { --css-co-pad-y: 36px; } .css-checkout__main, .css-checkout__aside { padding-left: 20px; padding-right: 20px; } .css-checkout .woocommerce-billing-fields__field-wrapper, .css-checkout .woocommerce-additional-fields__field-wrapper, .css-checkout .css-training-address__fields { grid-template-columns: 1fr; gap: 16px; } .css-checkout .form-row-first, .css-checkout .form-row-last { grid-column: 1; } .css-checkout__title { font-size: 28px; } .css-checkout .woocommerce-checkout-review-order-table tfoot .order-total td { font-size: 21px; } /* Nothing may scroll the page sideways. */ .css-checkout, .css-checkout__form { overflow-x: hidden; } } /* ========================================================================== 13. ORDER RECEIVED / THANK YOU ========================================================================== */ .css-woo-page .woocommerce-order { max-width: 820px; margin: 0 auto; padding: 64px 40px 80px; } .css-woo-page .woocommerce-order .woocommerce-thankyou-order-received { margin: 0 0 24px; color: var(--c-heading, #242128); font-family: var(--font-heading, 'Instrument Sans', system-ui, sans-serif); font-size: var(--fs-h4, 22px); font-weight: 800; } .css-woo-page .woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin: 0 0 36px; padding: 24px; border-radius: var(--radius-image, 20px); background: var(--c-grey-light, #f5f5f5); list-style: none; } .css-woo-page .woocommerce-order-overview li { color: var(--c-grey-text, #3f3f3f); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border: 0; } .css-woo-page .woocommerce-order-overview li strong { display: block; margin-top: 6px; color: var(--c-dark, #242128); font-size: 16px; text-transform: none; letter-spacing: 0; } .css-woo-page .css-confirmation__title { margin: 0 0 12px; color: var(--c-heading, #242128); font-family: var(--font-heading, 'Instrument Sans', system-ui, sans-serif); font-size: var(--fs-h2, 36px); font-weight: 800; line-height: 1.15; } /* Supporting copy under the heading, not a second heading. */ .css-woo-page .css-confirmation .woocommerce-thankyou-order-received { max-width: 58ch; margin: 0 0 32px; color: var(--c-body, #3f3f3f); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 16px; font-weight: 400; line-height: 1.6; } /* -------------------------------------------------------------------------- Booking details panel Shown on the confirmation page and on the customer's booking view. The same dl pattern as My Courses, so a booking reads identically wherever it appears. -------------------------------------------------------------------------- */ .css-booking-details { margin: 0 0 40px; padding: 26px 28px; border-radius: var(--radius-image, 20px); background: var(--c-grey-light, #f5f5f5); } .css-booking-details__title { margin: 0 0 20px; color: var(--c-heading, #242128); font-family: var(--font-heading, 'Instrument Sans', system-ui, sans-serif); font-size: 18px; font-weight: 800; } .css-booking-details__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 26px; margin: 0; } .css-booking-details__row dt { margin: 0 0 3px; color: #6d6d6d; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .css-booking-details__row dd { margin: 0; color: var(--c-dark, #242128); font-size: 15px; font-weight: 500; overflow-wrap: anywhere; } /* The payment breakdown below is supporting detail, not the headline. */ .css-woo-page .css-confirmation .woocommerce-order-details__title, .css-woo-page .css-confirmation .woocommerce-column__title, .css-woo-page .woocommerce-order-details .woocommerce-order-details__title { margin: 0 0 16px; color: var(--c-heading, #242128); font-family: var(--font-heading, 'Instrument Sans', system-ui, sans-serif); font-size: 16px; font-weight: 700; } @media (max-width: 700px) { .css-woo-page .woocommerce-order { padding: 36px 20px 64px; } .css-booking-details { padding: 22px 20px; } .css-booking-details__list { grid-template-columns: 1fr; } } /* ========================================================================== 14. MY ACCOUNT ========================================================================== */ .css-woo-page.woocommerce-account .woocommerce { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; max-width: 1180px; margin: 0 auto; padding: 56px 40px 80px; } /* WooCommerce floats the account nav; floats are ignored on grid items but the declared width still fights the track. Cells are placed explicitly because WooCommerce also emits a notices wrapper as the first child, which would otherwise consume the nav's cell and push everything out of alignment. */ .css-woo-page.woocommerce-account .woocommerce-MyAccount-navigation, .css-woo-page.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; margin: 0; } .css-woo-page.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; } .css-woo-page.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; } .css-woo-page.woocommerce-account .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; } .css-woo-page.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; } .css-woo-page.woocommerce-account .woocommerce-MyAccount-navigation li { margin-bottom: 4px; } .css-woo-page.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 11px 15px; border-radius: 10px; color: var(--c-dark, #242128); font-size: 15px; font-weight: 600; text-decoration: none; transition: background .15s ease; } .css-woo-page.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .css-woo-page.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--c-primary, #edcb20); } .css-woo-page.woocommerce-account .woocommerce-MyAccount-content { min-width: 0; } .css-account-heading { margin: 36px 0 18px; color: var(--c-heading, #242128); font-family: var(--font-heading, 'Instrument Sans', system-ui, sans-serif); font-size: 20px; font-weight: 800; } .css-account-heading:first-child { margin-top: 0; } .css-account-courses { display: grid; gap: 14px; margin: 0 0 12px; padding: 0; list-style: none; } .css-account-course { padding: 22px 24px; border: 1px solid #e6e6e6; border-radius: var(--radius-image, 20px); background: var(--c-white, #fff); } .css-account-courses--past .css-account-course { background: var(--c-grey-light, #f5f5f5); border-color: transparent; } .css-account-course__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .css-account-course__title { margin: 0; color: var(--c-heading, #242128); font-family: var(--font-heading, 'Instrument Sans', system-ui, sans-serif); font-size: 18px; font-weight: 800; } .css-account-course__status { padding: 5px 12px; border-radius: var(--radius-pill, 100px); background: #eaf4ec; color: #1a7f37; font-size: 12px; font-weight: 700; white-space: nowrap; } .css-account-course__status--cancelled, .css-account-course__status--refunded { background: #fdf1ef; color: #c0392b; } .css-account-course__status--unpaid, .css-account-course__status--pending-confirmation { background: #fdfaec; color: #92700a; } .css-account-course__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 22px; margin: 0; } .css-account-course__row dt { margin: 0 0 3px; color: #6d6d6d; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .css-account-course__row dd { margin: 0; color: var(--c-dark, #242128); font-size: 15px; font-weight: 500; overflow-wrap: anywhere; } .css-account-course__link { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; } .css-account-note { margin-top: 26px; padding: 18px 20px; border-radius: var(--radius-image, 20px); background: var(--c-grey-light, #f5f5f5); font-size: 14px; line-height: 1.6; } .css-account-empty { padding: 40px 28px; border-radius: var(--radius-image, 20px); background: var(--c-grey-light, #f5f5f5); text-align: center; } .css-account-empty p { margin: 0 0 16px; } .css-woo-page.woocommerce-account .woocommerce button.button, .css-woo-page.woocommerce-account .woocommerce a.button { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border: 1px solid transparent; border-radius: var(--radius-button, 5px); background: var(--c-primary, #edcb20); color: var(--c-dark, #242128); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; } @media (max-width: 900px) { .css-woo-page.woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 28px; padding: 36px 20px 64px; } /* Clear the explicit desktop cell placement, or the content would be assigned to a second column that no longer exists. */ .css-woo-page.woocommerce-account .woocommerce-notices-wrapper, .css-woo-page.woocommerce-account .woocommerce-MyAccount-navigation, .css-woo-page.woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; } .css-account-course__meta { grid-template-columns: 1fr; } } /* ──────────────────────────────────────────────────────────────────────────── * CONFIRMATION — WHAT HAPPENS NEXT * * The page told the customer the booking existed and then stopped. This is the * onward step: what we will do, and the two places they might want to go. * ──────────────────────────────────────────────────────────────────────────── */ .css-woo-page .css-confirmation__next { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--c-border, #e8e8e8); } .css-woo-page .css-confirmation__next-heading { margin: 0 0 16px; color: var(--c-heading, #242128); font-family: var(--font-heading, 'Instrument Sans', system-ui, sans-serif); font-size: 22px; font-weight: 700; } .css-woo-page .css-confirmation__steps { margin: 0 0 28px; padding: 0 0 0 22px; color: var(--c-body, #3f3f3f); font-size: 16px; line-height: 1.6; } .css-woo-page .css-confirmation__steps li { margin: 0 0 10px; padding-left: 4px; } .css-woo-page .css-confirmation__steps li::marker { color: var(--c-primary, #edcb20); font-weight: 700; } .css-woo-page .css-confirmation__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; } /* RESPONSIVE * BREAKPOINT: 575PX */ @media (max-width: 575px) { .css-woo-page .css-confirmation__actions .css-btn { width: 100%; justify-content: center; } } /* ========================================================================== 15. MY ACCOUNT — LOGGED-OUT LOGIN A full-height branded hero for the login / lost-password / reset-password screens: client photography, a dark overlay in the site's own charcoal, and a translucent panel sitting toward the top of the container's left edge. SCOPING — everything below sits under `.css-account-login`, a body class added only when `is_account_page()` is true AND the visitor is logged out (includes/booking/account-login.php). The logged-in dashboard, My Courses, account details, orders and the whole checkout are therefore untouched by this section, including the account layout in section 14 above. Several rules carry the longer `.css-woo-page.woocommerce-account .css-account-login` chain purely to out-specify section 14 and WooCommerce's own stylesheets without resorting to !important. ========================================================================== */ /* -------------------------------------------------------------------------- The hero -------------------------------------------------------------------------- */ .css-login { /* The site's --c-dark (#242128) as channels, so the overlay can be mixed at several opacities without introducing a second, unrelated black. */ --css-login-tint: 36, 33, 40; /* .css-header__inner is min-height:80px at every breakpoint, plus the 3px primary rule underneath it. The header is sticky, which still occupies its space in flow, so subtracting it gives an exact viewport fill. booking-checkout.js replaces this with the header's measured height, which differs only in the narrow band where the header wraps to two rows; this value is what the page uses without JavaScript. */ --css-login-header: 83px; /* Symmetric top and bottom, so the panel centres exactly rather than landing a few pixels high. It is a minimum, not the panel's offset: once the panel is taller than the space available the padding is all that keeps it off the header and the footer. */ --css-login-top: 56px; --css-login-panel: 470px; position: relative; isolation: isolate; display: flex; min-height: calc(100vh - var(--css-login-header)); padding: var(--css-login-top) 0; /* The photograph is supplied per-page as a custom property by css_login_wrap_account_shortcode(). If the attachment is ever missing the property is undefined, background-image resolves to none, and the hero falls back to the flat dark colour rather than breaking. */ background-color: var(--c-dark, #242128); background-image: var(--css-login-bg-sm); background-position: 50% 30%; background-repeat: no-repeat; background-size: cover; } /* Small viewport units keep the hero inside the visible area on mobile, where 100vh is measured against the *expanded* viewport and would push the panel under the browser chrome. */ @supports (height: 100svh) { .css-login { min-height: calc(100svh - var(--css-login-header)); } } /* The dark overlay. * * Deep — around 80% — because the panel over it is only 20% white, so the * photograph, not the panel, is what white text is really being read against. * Enough image survives for the room, the trainer and the CSS Safety polo to * stay clearly legible; the result is dark and moody rather than flat. * * The gradient runs deepest through the middle band where the panel sits and * lifts toward the edges, which keeps contrast where it is needed without * crushing the whole frame. */ .css-login::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 100deg, rgba(var(--css-login-tint), .78) 0%, rgba(var(--css-login-tint), .86) 42%, rgba(var(--css-login-tint), .82) 68%, rgba(var(--css-login-tint), .72) 100% ); } /* .css-container supplies the site's own max-width and gutters; the panel is centred inside it on both axes, so it sits on the site grid while reading as part of the photograph's composition rather than pinned to an edge. The hero's padding still applies as minimum breathing room, so on a viewport too short to centre in, the panel falls back to sitting below the header rather than colliding with it. */ .css-login__inner { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; } /* The white page the login form used to float on (brief §13). */ .css-woo-page.css-account-login .site-content { background: var(--c-dark, #242128); } /* Section 14 turns .woocommerce into the logged-in account grid. Logged out it is only a pass-through wrapper around the panel. */ .css-woo-page.woocommerce-account.css-account-login .woocommerce { display: block; max-width: none; margin: 0; padding: 0; } /* -------------------------------------------------------------------------- The glass panel -------------------------------------------------------------------------- */ /* Real frosted glass: the photograph is meant to read *through* the panel, so the fill stays at 20% white and the separation comes from the blur, not from opacity. Everything inside it is therefore white on a dark ground. `color-scheme: dark` tells the browser to draw its own native widgets — the checkbox, the autofill treatment, the caret — for a dark surface, which is what the panel now is. */ .css-login__card, .css-woo-page.css-account-login--reset .css-login .woocommerce { width: 100%; max-width: var(--css-login-panel); padding: 32px 26px 28px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-image, 20px); background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(28px) saturate(130%); backdrop-filter: blur(28px) saturate(130%); box-shadow: 0 20px 50px rgba(0, 0, 0, .34); color: var(--c-white, #fff); color-scheme: dark; } /* WooCommerce draws its own bordered box around form.login / form.register. Inside a panel that reads as a box within a box. */ .css-login form.login, .css-login form.register, .css-login form.lost_reset_password { margin: 0; padding: 0; border: 0; border-radius: 0; } /* Without backdrop blur, 20% white over a busy photograph leaves white text sitting on whatever happens to be behind it. The fallback deepens the panel rather than whitening it, so the treatment still reads as dark glass and the foreground stays white either way. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .css-login__card, .css-woo-page.css-account-login--reset .css-login .woocommerce { background: rgba(var(--css-login-tint), .72); } } /* Registration is currently handled at checkout, so this side of the template is normally never rendered. If the WooCommerce setting is ever switched on, the two forms become two panels side by side rather than one wide one. */ .css-login__cards { display: grid; gap: 24px; width: 100%; max-width: 980px; } .css-login__cards .css-login__card { max-width: none; } /* WooCommerce floats col2-set columns to 48%. */ .css-login .col2-set .col-1, .css-login .col2-set .col-2 { float: none; width: auto; } @media (min-width: 900px) { .css-login__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- Panel heading -------------------------------------------------------------------------- */ .css-login__intro { margin: 0 0 22px; } /* Out-specifies the global inner-page H1 size in frontend.css — 45px is a page title, not a panel title. */ .css-woo-page .css-login .css-login__title { margin: 0 0 8px; color: var(--c-white, #fff); font-family: var(--font-heading, 'Instrument Sans', system-ui, sans-serif); font-size: clamp(26px, 3vw, 32px); font-weight: 700; line-height: 1.12; } .css-woo-page .css-login .css-login__title--sub { font-size: clamp(22px, 2.4vw, 26px); } /* Off-white rather than flat white: supporting copy should sit a step behind the heading, and on glass that reads better as opacity than as a grey. Held at .88 rather than lower — below that it drops under 4.5:1 against the brighter parts of the photograph showing through the panel. */ .css-login .css-login__lead, .css-login .css-login__note { margin: 0; color: rgba(255, 255, 255, .88); font-size: 15px; line-height: 1.55; } .css-login .css-login__note { margin: 0 0 18px; font-size: 14px; } /* -------------------------------------------------------------------------- Fields — the site's form language, lifted onto the panel -------------------------------------------------------------------------- */ /* WooCommerce lays form rows out with floats and percentage widths. These selectors match its specificity and load afterwards. */ .css-login form .form-row, .css-login form .form-row-first, .css-login form .form-row-last, .css-login form .form-row-wide { margin: 0 0 18px; padding: 0; float: none; width: auto; clear: none; } .css-woo-page .css-login label { display: block; margin: 0 0 7px; color: var(--c-white, #fff); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 14px; font-weight: 600; line-height: 1.35; } /* The required marker is red in WooCommerce's own stylesheet, which is a muddy, low-contrast note on dark glass. The site's yellow is both legible here and already the page's accent. */ .css-woo-page .css-login form .form-row .required { color: var(--c-primary, #edcb20); border: 0; text-decoration: none; } /* The fields keep the site's shape — same height, padding and 10px radius — and stay translucent, so the photograph still moves behind them. * * The fill is a *dark* wash of the site's charcoal rather than more white. * The panel is already 20% white, so adding white on top of it makes a field * lighter than its surroundings and drags white text down to ~3:1 in the * brighter parts of the photograph. Recessing the field instead holds it above * 7:1 everywhere, and a well reads more like an input than a lighter patch * does. Two thirds of the blurred image still shows through. */ .css-woo-page .css-login input[type="text"], .css-woo-page .css-login input[type="email"], .css-woo-page .css-login input[type="password"] { width: 100%; height: auto; padding: 13px 16px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; background: rgba(var(--css-login-tint), .35); box-shadow: none; color: var(--c-white, #fff); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 15px; line-height: 1.4; transition: border-color .15s ease, background .15s ease; } .css-woo-page .css-login input::placeholder { color: rgba(255, 255, 255, .55); opacity: 1; } .css-woo-page .css-login input[type="text"]:focus, .css-woo-page .css-login input[type="email"]:focus, .css-woo-page .css-login input[type="password"]:focus { border-color: var(--c-primary, #edcb20); background: rgba(var(--css-login-tint), .45); outline: 3px solid rgba(var(--c-primary-rgb, 237, 203, 32), .55); outline-offset: 1px; } /* Chrome paints autofilled fields with its own opaque background, which would punch a solid block through the glass and put dark text on it. Deferring the transition indefinitely is the only way to stop that paint; the text colour is forced separately because -webkit-text-fill-color outranks `color`. */ .css-woo-page .css-login input:-webkit-autofill, .css-woo-page .css-login input:-webkit-autofill:hover, .css-woo-page .css-login input:-webkit-autofill:focus { -webkit-text-fill-color: var(--c-white, #fff); caret-color: var(--c-white, #fff); transition: background-color 600000s 0s, color 600000s 0s; } /* WooCommerce's own JavaScript wraps password fields in this span and appends the show/hide eye button, positioned by woocommerce-layout.css. */ .css-login .password-input { width: 100%; } /* That button's artwork is a dark SVG served as a background image, invisible against a dark field. brightness(0) flattens whatever WooCommerce ships to black while keeping its alpha, and invert(1) turns it white — so the toggle stays light even if the icon is redrawn in a future release. */ .css-woo-page .css-login .show-password-input::before { filter: brightness(0) invert(1); opacity: .7; transition: opacity .15s ease; } .css-woo-page .css-login .show-password-input:hover::before, .css-woo-page .css-login .show-password-input:focus::before, .css-woo-page .css-login .show-password-input.display-password::before { opacity: 1; } /* Inline validation. A flat red border disappears on dark glass, so the well is washed red as well as bordered. Covers WooCommerce's server-side .woocommerce-invalid and the shared frontend validator's .is-invalid. */ .css-login .woocommerce-invalid input.input-text, .css-login .is-invalid input.input-text, .css-login .is-invalid input.input-text:focus { border-color: #e8776a !important; background: rgba(122, 32, 26, .48); box-shadow: none !important; outline-color: rgba(232, 119, 106, .35); } .css-login .css-field-error { color: #ffb4a8; } /* Elsewhere on Woo pages the yellow focus outline yields to the error state. */ .css-woo-page .css-safety .is-invalid input:focus, .css-woo-page .css-safety .is-invalid textarea:focus, .css-woo-page .css-safety .is-invalid select:focus { border-color: var(--c-error, #b42318); outline-color: rgba(180, 35, 24, .28); } /* -------------------------------------------------------------------------- Remember me / lost password -------------------------------------------------------------------------- */ .css-login__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; margin: 0 0 22px; } .css-woo-page .css-login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: var(--c-white, #fff); font-size: 14px; font-weight: 500; cursor: pointer; } /* The box stays a real checkbox — `color-scheme: dark` on the panel is what makes the browser draw its unchecked state for a dark surface, and accent-color makes the checked state the site's yellow. The added outline lifts the empty box off the glass, where the native border alone is faint. */ .css-woo-page .css-login .woocommerce-form-login__rememberme input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--c-primary, #edcb20); outline: 1px solid rgba(255, 255, 255, .4); outline-offset: 0; border-radius: 3px; } .css-woo-page .css-login input[type="checkbox"]:checked { outline-color: transparent; } .css-woo-page .css-login input[type="checkbox"]:focus-visible { outline: 3px solid rgba(var(--c-primary-rgb, 237, 203, 32), .7); outline-offset: 2px; } .css-login__meta .lost_password { margin: 0; font-size: 14px; } .css-login__meta .lost_password a { color: rgba(255, 255, 255, .8); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .css-login__meta .lost_password a:hover, .css-login__meta .lost_password a:focus-visible { color: var(--c-primary, #edcb20); text-decoration-color: var(--c-primary, #edcb20); } /* The links and the password eye keep a visible focus ring; it is only recoloured from the browser's blue so keyboard use looks deliberate. */ .css-woo-page .css-login a:focus-visible, .css-woo-page .css-login .show-password-input:focus-visible { outline: 3px solid rgba(var(--c-primary-rgb, 237, 203, 32), .6); outline-offset: 2px; border-radius: 3px; } /* -------------------------------------------------------------------------- Primary action -------------------------------------------------------------------------- */ .css-login__submit { margin: 0; } /* The site's primary CTA, out-specifying the account button rule in section 14 so the button can run the panel's full width. */ .css-woo-page.woocommerce-account.css-account-login .css-login button.button, .css-woo-page.woocommerce-account.css-account-login .css-login input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 14px 26px; border: 1px solid transparent; border-radius: var(--radius-button, 5px); background: var(--c-primary, #edcb20); box-shadow: inset 0 -2px 2px rgba(0, 0, 0, .06); color: var(--c-dark, #242128); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 16px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .15s ease, filter .15s ease; } .css-woo-page.woocommerce-account.css-account-login .css-login button.button:hover { transform: translateY(-1px); filter: brightness(.95); } .css-woo-page.woocommerce-account.css-account-login .css-login button.button:focus-visible { outline: 3px solid rgba(var(--c-primary-rgb, 237, 203, 32), .6); outline-offset: 3px; } /* -------------------------------------------------------------------------- Notices Section 11 already strips WooCommerce's coloured stripes and icons. These only tighten the result to panel scale. -------------------------------------------------------------------------- */ .css-login .woocommerce-notices-wrapper { margin: 0; } /* Section 11's cream and pink notice panels are built for a white page; inside dark glass they read as bright blocks pasted on. Same flat, stripe-free, icon-free treatment — just cut from the glass instead, with the semantic colour carried by a translucent wash and the border. */ .css-woo-page.css-account-login .woocommerce-error, .css-woo-page.css-account-login .woocommerce-message, .css-woo-page.css-account-login .woocommerce-info { margin: 0 0 20px; padding: 13px 16px; border: 1px solid rgba(255, 255, 255, .24); background: rgba(var(--css-login-tint), .42); color: var(--c-white, #fff); font-size: 14px; } /* A failed login is the one message that has to be unmissable. */ .css-woo-page.css-account-login .woocommerce-error { border-color: rgba(232, 119, 106, .6); background: rgba(122, 32, 26, .48); } .css-woo-page.css-account-login .woocommerce-message { border-color: rgba(var(--c-primary-rgb, 237, 203, 32), .55); } .css-woo-page.css-account-login .woocommerce-error a, .css-woo-page.css-account-login .woocommerce-message a, .css-woo-page.css-account-login .woocommerce-info a { text-decoration: underline; text-underline-offset: 2px; } /* WooCommerce gives notices tabindex="-1" and moves focus to them so screen readers announce the failure. The focus ring has to stay — it is only recoloured, so it reads as part of the page rather than a browser default. */ .css-woo-page.css-account-login .woocommerce-error:focus, .css-woo-page.css-account-login .woocommerce-message:focus, .css-woo-page.css-account-login .woocommerce-info:focus { outline: 3px solid rgba(var(--c-primary-rgb, 237, 203, 32), .5); outline-offset: 2px; } /* -------------------------------------------------------------------------- Responsive The panel keeps the same left alignment at every width; only the offset from the header, the panel padding and the image size change. -------------------------------------------------------------------------- */ /* RESPONSIVE * BREAKPOINT: 768PX */ @media (min-width: 768px) { .css-login { --css-login-top: 88px; padding: var(--css-login-top) 0; } .css-login__card, .css-woo-page.css-account-login--reset .css-login .woocommerce { padding: 38px 34px 32px; } } /* RESPONSIVE * BREAKPOINT: 700–1199PX * A portrait tablet is narrow enough that `cover` crops the sides hard, and the * centred panel then covers most of what is left. Anchoring the crop left of * centre walks the trainer far enough right that he emerges past the panel's * edge instead of sitting wholly behind it. On a landscape tablet the image is * cropped top and bottom instead, where the horizontal anchor has no effect, so * this is safe across both orientations. */ @media (min-width: 700px) and (max-width: 1199px) { .css-login { background-position: 25% 30%; } } /* RESPONSIVE * BREAKPOINT: 1000PX * Above this width the 2560px photograph is worth its weight; below it the * 1536px copy is indistinguishable and a fraction of the bytes. */ @media (min-width: 1000px) { .css-login { background-image: var(--css-login-bg); } } /* RESPONSIVE * BREAKPOINT: 1200PX */ @media (min-width: 1200px) { .css-login { --css-login-top: 120px; --css-login-panel: 480px; padding: var(--css-login-top) 0; } .css-login__card, .css-woo-page.css-account-login--reset .css-login .woocommerce { padding: 44px 40px 38px; } } /* RESPONSIVE * BREAKPOINT: 420PX * Below this the two meta controls no longer share a line comfortably. */ @media (max-width: 420px) { .css-login__meta { align-items: flex-start; flex-direction: column; gap: 12px; } }