/* ========================================================================== Ascension UI layer — Phase 1: tokens, gold buttons, contrast + white-band fixes Loaded at wp_head priority 110, i.e. AFTER the Customizer blob (post 1000069, printed at 101). Source order is our specificity lever; `.asc-ui` on is the second. !important appears ONLY where the blob or glozin already used it on the same property. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens Surfaces carry over from Evo Aminoz almost unchanged (both sites are true black). Only the accent moves: Evo's blue #0068ff becomes Ascension gold. Measured contrast (WCAG 2.x relative luminance) on the chosen gold gradient: #000 on #d4b25c (0%) ..... 8.24:1 AAA #000 on #c9a449 (50%) ..... 7.05:1 AAA #000 on #a8862e (100%) ..... 6.12:1 AA <- darkest point, still clears AA #fff on #c9a449 ..... 2.55:1 FAILS <- why white ink is never used Ink is therefore always black. The floor across the whole fill is 6.12:1, comfortably above the 4.5:1 AA requirement for normal text. -------------------------------------------------------------------------- */ :root { --asc-black: #000000; --asc-surface: #0f0f11; --asc-surface-2: #08080a; --asc-line: rgba(255,255,255,.10); --asc-line-strong: rgba(255,255,255,.18); --asc-text: #ffffff; --asc-muted: #9a9a9a; /* Hamza's chosen gold, measured off the age-gate "ENTER SITE" button (.age-gate__submit--yes). Same gradient family as the COA button. Black ink on it measures 8.24:1 at the lightest stop, 6.12:1 at the darkest, so it clears WCAG AA (4.5:1) across the whole fill. */ --asc-gold-1: #d4b25c; /* gradient 0% + border colour */ --asc-gold-2: #c9a449; /* gradient 50% */ --asc-gold-3: #a8862e; /* gradient 100% */ --asc-gold-grad: linear-gradient(135deg, #d4b25c 0%, #c9a449 50%, #a8862e 100%); --asc-gold: #c9a449; /* flat fallback / accent text */ --asc-gold-lite: #e0c070; --asc-gold-ink: #000000; --asc-gold-soft: rgba(201,164,73,.14); --asc-gold-edge: rgba(212,178,92,.55); --asc-danger: #dc3545; --asc-ok: #57c76a; --asc-r-sm: 4px; --asc-r: 8px; --asc-r-md: 12px; --asc-r-lg: 16px; --asc-r-pill: 50rem; --asc-wrap: 1280px; --asc-pad: 24px; /* Shadow measured off the same age-gate button Hamza picked. */ --asc-btn-shadow: 0 8px 24px rgba(201,164,73,.40), inset 0 1px 0 rgba(255,255,255,.20); --asc-btn-shadow-hover: 0 10px 28px rgba(201,164,73,.52), inset 0 1px 0 rgba(255,255,255,.32); } /* Neutralises the parent's body padding even if the sticky-ATC module returns. Scoped to .asc-ui so we never touch glozin's variable on pages we don't own. */ .asc-ui { --gz-atc-sticky-height: 0px; } /* -------------------------------------------------------------------------- 2. The white bands (defect A2) glozin ships `body { background: #fff }` and it is never overridden. Black is painted only by individual sections, so every vertical gap between sections exposes white. Measured on production: a 91px band on the product page at 1440, five bands on mobile (largest 188px), and a 344px slab on the cart. -------------------------------------------------------------------------- */ html, body.asc-ui { background-color: var(--asc-black) !important; } .asc-ui #page, .asc-ui #site-content, .asc-ui #site-footer, .asc-ui .site-content { background-color: var(--asc-black); } /* #site-header renders white 1440x122 behind its own opaque black child. Invisible today, but it becomes a white band the moment that child shifts or collapses. Painted black so it can never surface. */ .asc-ui #site-header, .asc-ui .site-header { background-color: var(--asc-black); } /* The sticky-ATC module reserves this as body padding; it renders as white. */ .asc-ui { padding-bottom: 0 !important; } /* -------------------------------------------------------------------------- 3. Page headers (defect A3) Cart / Checkout / Affiliate Registration titles measured white-on-white, contrast ratio 1.00. The header sits on the (previously white) body, so fixing the canvas above plus forcing the text colour resolves both. -------------------------------------------------------------------------- */ .asc-ui .page-header, .asc-ui .page-header__inner { background-color: transparent; } .asc-ui .page-header__title, .asc-ui .page-header .woocommerce-breadcrumb, .asc-ui .page-header__breadcrumb, .asc-ui .page-header__breadcrumb a, .asc-ui .page-header__breadcrumb span { color: var(--asc-text) !important; } .asc-ui .page-header__breadcrumb a:hover { color: var(--asc-gold) !important; } /* -------------------------------------------------------------------------- 4. Button system Evo's geometry, Ascension's gold, black ink. -------------------------------------------------------------------------- */ .asc-ui .asc-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-weight: 700; font-size: 14px; letter-spacing: .5px; line-height: 1; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; padding: 14px 28px; border-radius: var(--asc-r-pill); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .asc-ui .asc-btn-lg { padding: 18px 36px; font-size: 15px; } .asc-ui .asc-btn-gold { background: var(--asc-gold-grad); border: 1px solid var(--asc-gold-1); color: var(--asc-gold-ink); box-shadow: var(--asc-btn-shadow); } .asc-ui .asc-btn-ghost { background: transparent; color: var(--asc-gold); border: 1px solid var(--asc-gold-edge); } /* -------------------------------------------------------------------------- 5. Site-wide gold rollout (defect A5 + client request) `.single_add_to_cart_button` measured background #111 with a 1px solid #111 border on a #000 page: 1.07:1 against the page. Effectively invisible. `border: 0` and the child colour rule are both required, or the cart glyph stays white on gold (2.2:1). -------------------------------------------------------------------------- */ .asc-ui .single_add_to_cart_button, .asc-ui .glozin-buy-now, .asc-ui .woocommerce a.button.alt, .asc-ui .woocommerce button.button.alt, .asc-ui .woocommerce input.button.alt, .asc-ui .woocommerce a.button:not(.gz-button-outline-dark), .asc-ui .woocommerce button.button:not(.gz-button-outline-dark), .asc-ui .checkout-button, .asc-ui #place_order, .asc-ui .wc-block-components-checkout-place-order-button, .asc-ui .woocommerce-form-login__submit, .asc-ui .woocommerce-form-register__submit, .asc-ui .ara-lab-report-btn, .asc-ui .elementor-button-link, .asc-ui .aff-submit, .asc-ui .asc-btn-gold { background: var(--asc-gold-grad) !important; color: var(--asc-gold-ink) !important; border: 1px solid var(--asc-gold-1) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .5px !important; text-transform: uppercase; box-shadow: var(--asc-btn-shadow) !important; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } /* Add-to-cart geometry, measured off evoaminozresearch.com's live button: height 56px, border-radius 12px, font-size 14px/700, letter-spacing .5px, text-transform uppercase, flat fill, box-shadow 0 2px 6px + inset 0 1px 0. */ .asc-ui .single_add_to_cart_button, .asc-ui .glozin-buy-now { min-height: 56px; border-radius: 12px !important; gap: 9px; } /* Glyphs and nested spans must take the ink colour too. */ .asc-ui .single_add_to_cart_button *, .asc-ui .glozin-buy-now *, .asc-ui .checkout-button *, .asc-ui #place_order *, .asc-ui .ara-lab-report-btn *, .asc-ui .elementor-button-link * { color: var(--asc-gold-ink) !important; fill: var(--asc-gold-ink) !important; stroke: var(--asc-gold-ink) !important; } .asc-ui .single_add_to_cart_button:hover, .asc-ui .glozin-buy-now:hover, .asc-ui .woocommerce a.button.alt:hover, .asc-ui .woocommerce button.button.alt:hover, .asc-ui .checkout-button:hover, .asc-ui #place_order:hover, .asc-ui .wc-block-components-checkout-place-order-button:hover, .asc-ui .ara-lab-report-btn:hover, .asc-ui .elementor-button-link:hover, .asc-ui .asc-btn-gold:hover { background: linear-gradient(135deg, #e0c070 0%, #d4b25c 50%, #b8923a 100%) !important; border-color: #e0c070 !important; box-shadow: var(--asc-btn-shadow-hover) !important; transform: translateY(-1px); } .asc-ui .single_add_to_cart_button:active, .asc-ui .glozin-buy-now:active, .asc-ui .checkout-button:active, .asc-ui #place_order:active, .asc-ui .asc-btn-gold:active { transform: translateY(0); filter: brightness(.98); } .asc-ui .single_add_to_cart_button:disabled, .asc-ui .single_add_to_cart_button.disabled, .asc-ui .woocommerce button.button:disabled { background: #3a3122 !important; color: rgba(255,255,255,.42) !important; box-shadow: none !important; transform: none; cursor: not-allowed; } /* Focus ring is WHITE, not gold. A gold ring on a gold fill measures 1.56:1 and would fail WCAG 2.2 SC 2.4.11; white on the black page measures 21:1. */ .asc-ui .asc-btn:focus-visible, .asc-ui .single_add_to_cart_button:focus-visible, .asc-ui .glozin-buy-now:focus-visible, .asc-ui .checkout-button:focus-visible, .asc-ui #place_order:focus-visible, .asc-ui .ara-lab-report-btn:focus-visible, .asc-ui .elementor-button-link:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 3px; } /* -------------------------------------------------------------------------- 5b. Cart totals panel glozin paints `.cart_totals_summary` with --gz-color-light-grey (#f5f5f5), a 450x697 light slab on a true-black page. The Customizer has rules for `.woocommerce-cart table.cart` but NOTHING for this panel, so nothing overrides it. Every label and link inside it was being measured against the wrong background. Depth here comes from a hairline border, not a fill. -------------------------------------------------------------------------- */ .asc-ui .cart_totals_summary, .asc-ui .cart-collaterals .cart_totals { background-color: var(--asc-surface) !important; border: 1px solid var(--asc-line); border-radius: var(--asc-r-md); color: var(--asc-text); } .asc-ui .cart_totals_summary th, .asc-ui .cart_totals_summary td, .asc-ui .cart_totals_summary h2, .asc-ui .cart_totals_summary label, .asc-ui .cart_totals_summary .woocommerce-Price-amount, .asc-ui .cart_totals_summary .amount { color: var(--asc-text) !important; } .asc-ui .cart_totals_summary tr, .asc-ui .cart_totals_summary th, .asc-ui .cart_totals_summary td { border-color: var(--asc-line) !important; } /* Form controls inside the dark panel (order-note textarea rendered pure white) */ .asc-ui .cart_totals_summary textarea, .asc-ui .cart_totals_summary input[type="text"], .asc-ui .cart_totals_summary select { background-color: var(--asc-surface-2) !important; color: var(--asc-text) !important; border: 1px solid var(--asc-line) !important; } /* -------------------------------------------------------------------------- 5c. Remaining white slabs on the product page Two more light panels on a black page, both measured at 390 and 1440: - `.guarantee-safe-checkout` (glozin) renders #f5f5f5. - The "Bulk deal" table is Advanced Dynamic Pricing. It prints its own inline