/** * Atlas Labs — WooCommerce Pages (Cart, Checkout, My Account) * * Dark-palette styling for the three WooCommerce "shell" pages, which * are otherwise rendered by Kadence/WooCommerce defaults: white * `.content-bg` / `.entry-content-wrap` plates, light form fields * (`.woocommerce-Input`, `input.input-text`), light `shop_table` * tables, and WooCommerce's own gray notice/payment boxes — all * illegible against the dark page (cart and My Account verified live * on staging; checkout shares the identical Kadence shell). * * Every selector carries the `html body` specificity bump documented * in CLAUDE.md: Kadence's and WooCommerce's own rules load after this * theme's stylesheets and win bare-class ties. `.woocommerce` / * `.woocommerce-page` are classes on itself (second CLAUDE.md * gotcha), so compound `body.woocommerce-page` selectors are used * where extra weight is needed — never a descendant `.woocommerce ...`. * * Loaded only on cart / checkout / account pages — see inc/enqueue.php. */ /* --------------------------------------------------------------- * Kadence page shell: entry-hero band + white content plates * ------------------------------------------------------------- */ html body .entry-hero-container-inner, html body .entry-hero { background-color: var(--color-bg-hero); } html body .entry-hero .entry-title, html body .entry-hero-container-inner .entry-title { color: var(--color-text-primary); } html body .entry-hero .kadence-breadcrumbs, html body .entry-hero .kadence-breadcrumbs a, html body .kadence-breadcrumbs, html body .kadence-breadcrumbs a { color: var(--color-text-secondary); } html body .content-bg, html body .entry-content-wrap { background-color: var(--color-bg-primary); color: var(--color-text-primary); } /* --------------------------------------------------------------- * WooCommerce/Kadence form fields * * These pages render WooCommerce's own field classes * (.woocommerce-Input, input.input-text, the checkout form-row * fields), not this theme's .al-input — so the forms.css treatment is * restated here against those classes, same tokens, same rationale * (border-secondary at rest for the 3:1 component boundary). * ------------------------------------------------------------- */ html body .woocommerce-Input, html body input.input-text, html body .woocommerce form .form-row input.input-text, html body .woocommerce form .form-row textarea, html body .woocommerce form .form-row select, html body input#coupon_code, html body .woocommerce input.qty, html body select.country_select, html body select.state_select { background-color: var(--color-input-background); color: var(--color-text-primary); border: var(--border-width-standard) solid var(--color-border-secondary); border-radius: var(--radius-md); padding: var(--space-12) var(--space-16); font-family: var(--font-family-base); font-size: var(--type-body-size); line-height: var(--type-body-line-height); } html body input#coupon_code, html body .woocommerce input.qty { padding: var(--space-8) var(--space-12); } html body .woocommerce-Input::placeholder, html body input.input-text::placeholder, html body input#coupon_code::placeholder { color: var(--color-text-muted); } html body .woocommerce-Input:focus, html body input.input-text:focus, html body .woocommerce form .form-row input.input-text:focus, html body .woocommerce form .form-row textarea:focus, html body .woocommerce form .form-row select:focus, html body input#coupon_code:focus { outline: none; border-color: var(--color-focus-ring); background-color: var(--color-input-background-focus); } html body .woocommerce form .form-row label, html body .woocommerce-form label, html body form.woocommerce-form-login label, html body form.woocommerce-form-register label { color: var(--color-text-secondary); font-family: var(--font-family-base); font-size: var(--type-form-label-size); font-weight: var(--type-form-label-weight); letter-spacing: var(--type-form-label-letter-spacing); } /* --------------------------------------------------------------- * WooCommerce native buttons * * Same silver-control treatment as .al-button--primary in * buttons.css, restated against WooCommerce's literal `button` * classes (loop/cart/checkout/account buttons all carry them); the * same Kadence generic-button tie documented in CLAUDE.md applies. * ------------------------------------------------------------- */ html body a.button, html body button.button, html body input.button, html body .woocommerce a.button, html body .woocommerce button.button, html body button.woocommerce-button, html body .woocommerce-Button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); padding: var(--space-12) var(--space-24); border-radius: var(--radius-md); border: var(--border-width-standard) solid transparent; background-color: var(--color-accent-primary); background-image: var(--gradient-silver); color: var(--color-bg-primary); font-family: var(--font-family-base); font-size: var(--type-button-size); font-weight: var(--type-button-weight); letter-spacing: var(--type-button-letter-spacing); line-height: var(--type-button-line-height); text-decoration: none; cursor: pointer; transition: background-color var(--duration-standard) var(--easing-standard), color var(--duration-standard) var(--easing-standard); } html body a.button:hover, html body button.button:hover, html body input.button:hover, html body button.woocommerce-button:hover, html body .woocommerce-Button:hover { background-color: var(--color-accent-hover); background-image: var(--gradient-silver-hover); color: var(--color-bg-primary); } html body button.button:disabled, html body .woocommerce button.button:disabled, html body .woocommerce button.button[disabled] { background-color: var(--color-surface-disabled); background-image: none; color: var(--color-text-disabled); border-color: var(--color-border-disabled); cursor: not-allowed; } /* --------------------------------------------------------------- * Tables: cart table, cart totals, checkout order review, * account orders table * ------------------------------------------------------------- */ html body table.shop_table { background-color: var(--color-surface-primary); border: var(--border-width-standard) solid var(--color-border-primary); border-radius: var(--radius-lg); color: var(--color-text-primary); } html body table.shop_table th { background-color: var(--color-table-header-background); color: var(--color-text-secondary); } html body table.shop_table td { background-color: transparent; color: var(--color-text-primary); border-color: var(--color-border-primary); } html body table.shop_table td a, html body table.shop_table .product-name a { color: var(--color-text-primary); } html body table.shop_table td a:hover { color: var(--color-text-secondary); } html body table.shop_table .amount { color: var(--color-text-primary); } html body .woocommerce a.remove { color: var(--color-text-secondary); } html body .woocommerce a.remove:hover { color: var(--color-error); background-color: transparent; } /* Cart totals box */ html body .cart_totals, html body .cart-collaterals .cart_totals { color: var(--color-text-primary); } html body .cart_totals h2 { color: var(--color-text-primary); } /* Empty-cart state */ html body p.cart-empty, html body .wc-empty-cart-message, html body .woocommerce-mini-cart__empty-message { color: var(--color-text-secondary); } /* --------------------------------------------------------------- * Checkout: order review + payment methods box * * WooCommerce core paints #payment and its .payment_box light gray * (#ebe9eb family) in stylesheets loaded after ours. * ------------------------------------------------------------- */ html body.woocommerce-checkout #payment, html body #add_payment_method #payment { background-color: var(--color-surface-primary); border: var(--border-width-standard) solid var(--color-border-primary); border-radius: var(--radius-lg); color: var(--color-text-primary); } html body.woocommerce-checkout #payment div.payment_box, html body #add_payment_method #payment div.payment_box { background-color: var(--color-surface-elevated); color: var(--color-text-secondary); } /* The payment box's speech-bubble arrow is a CSS border triangle — match it to the new box fill. */ html body.woocommerce-checkout #payment div.payment_box::before, html body #add_payment_method #payment div.payment_box::before { border-bottom-color: var(--color-surface-elevated); } html body.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--color-border-primary); } html body.woocommerce-checkout #payment ul.payment_methods li label { color: var(--color-text-primary); } /* --------------------------------------------------------------- * Checkout: WooCommerce Blocks form labels * * The live Checkout page renders through WooCommerce Blocks * (`.wc-block-checkout__form`, `.wc-block-components-text-input`), * not the classic `.woocommerce-checkout` template the rest of this * file targets — a completely different DOM tree that none of the * selectors above ever reach. Its text inputs and selects paint their * own white field background regardless of theme, but its floating * labels inherit this site's light `--color-text-primary` body text * color meant for the dark page background, landing near-white-on- * white (contrast ~1.16:1, confirmed via axe-core on staging * 2026-07-16 — WCAG 1.4.3). Reuses `--color-bg-primary` as a dark * foreground here, the same token-repurposing already used for text * on the light pricing-gate button gradient. * * WooCommerce Blocks' own checkout.css (loaded after this file) sets * `.wc-block-components-form .wc-block-components-text-input label` * to `color: inherit` — two classes, which outranks a single-class * selector regardless of extra type selectors piled on for the * Kadence tie-break elsewhere in this file. The text-input labels * need the same two-class weight to win; the select labels (Country, * State) use a different, less specific WC rule and are covered by * the plain `label` selector already. * ------------------------------------------------------------- */ html body .wc-block-checkout__form .wc-block-components-text-input label, html body .wc-block-checkout__form label { color: var(--color-bg-primary); } /* --------------------------------------------------------------- * My Account: navigation, dashboard content, login/register card, * address boxes * ------------------------------------------------------------- */ html body .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: var(--border-width-standard) solid var(--color-border-primary); border-radius: var(--radius-lg); background-color: var(--color-surface-primary); overflow: hidden; } html body .woocommerce-MyAccount-navigation li a { display: block; padding: var(--space-12) var(--space-16); color: var(--color-text-secondary); border-bottom: var(--border-width-standard) solid var(--color-border-primary); } html body .woocommerce-MyAccount-navigation li:last-child a { border-bottom: none; } html body .woocommerce-MyAccount-navigation li a:hover, html body .woocommerce-MyAccount-navigation li.is-active a { color: var(--color-text-primary); background-color: var(--color-surface-elevated); } html body .woocommerce-MyAccount-content { color: var(--color-text-primary); } html body .woocommerce-MyAccount-content a:not(.button) { color: var(--color-text-primary); text-decoration: underline; } /* Login / register card — Kadence wraps these in white boxes. */ html body form.woocommerce-form-login, html body form.woocommerce-form-register, html body .woocommerce form.login, html body .woocommerce form.register, html body .woocommerce form.checkout_coupon { background-color: var(--color-surface-primary); border: var(--border-width-standard) solid var(--color-border-primary); border-radius: var(--radius-lg); color: var(--color-text-primary); } html body .woocommerce-LostPassword a, html body .lost_password a { color: var(--color-text-secondary); text-decoration: underline; } /* Address boxes on the Addresses endpoint */ html body .woocommerce-Addresses .woocommerce-Address, html body .woocommerce-Address address { color: var(--color-text-secondary); font-style: normal; } html body .woocommerce-Address-title h3 { color: var(--color-text-primary); } /* --------------------------------------------------------------- * WooCommerce notices — status-token tint pattern (same formula as * status.css alerts: tinted background, mid-opacity border, * full-opacity text). * ------------------------------------------------------------- */ html body .woocommerce-message, html body .woocommerce-info, html body .woocommerce-error, html body ul.woocommerce-error { border-radius: var(--radius-md); font-family: var(--font-family-base); font-size: var(--type-body-small-size); line-height: var(--type-body-small-line-height); color: var(--color-text-primary); } html body .woocommerce-message { background-color: var(--color-badge-success-background); border: var(--border-width-standard) solid var(--color-badge-success-border); border-top-color: var(--color-success); } html body .woocommerce-info { background-color: var(--color-badge-neutral-background); border: var(--border-width-standard) solid var(--color-badge-neutral-border); border-top-color: var(--color-information); } html body .woocommerce-error, html body ul.woocommerce-error { background-color: var(--color-badge-error-background); border: var(--border-width-standard) solid var(--color-badge-error-border); border-top-color: var(--color-error); } /* WooCommerce colors the notices' ::before icon per type; keep the defaults' hue but ensure inline links inside notices stay legible. */ html body .woocommerce-message a, html body .woocommerce-info a, html body .woocommerce-error a { color: var(--color-text-primary); text-decoration: underline; } /* --------------------------------------------------------------- * Affiliate dashboard: stacks the code/commission/payout `.al-card` * blocks with breathing room between them. `.al-card` itself carries * no margin (cards.css is deliberately layout-agnostic), so the * dashboard wrapper owns the vertical rhythm. * ------------------------------------------------------------- */ .al-affiliate-dashboard { display: flex; flex-direction: column; gap: var(--space-16); } /* --------------------------------------------------------------- * Consent row (checkbox + label text), duplicated from access-gate.css. * access-gate.css is only enqueued for the logged-out registration * gate; the become-affiliate application form uses the same * `.al-consent-item` markup but only ever renders to a logged-in * user, so it needs its own copy here rather than a cross-module * dependency on a module scoped to logged-out visitors. * ------------------------------------------------------------- */ html body .al-consent-item { display: flex; align-items: flex-start; gap: var(--space-8); font-size: var(--type-body-small-size); color: var(--color-text-secondary); cursor: pointer; } html body .al-consent-item .al-checkbox { margin-top: 2px; flex-shrink: 0; } html body .al-consent-item a { color: var(--color-text-primary); text-decoration-color: var(--color-border-secondary); }