/* ========================================================================== WENEX CONSENT — the notice -------------------------------------------------------------------------- Tokens first, with fallbacks to the canonical values, because this component must render correctly on pages where wenex-wdxs is not active (production is still light-only and the foundation rollout has not started). MODE. The surface is dark by default and follows the PAGE, not the operating system: the estate ignores prefers-color-scheme, so honouring it here would put a light bar under a dark Home. Light is opted into with the same signal the design system uses — [data-theme="light"] — or .wxc-light on . NO LAYOUT SHIFT. The bar is fixed; it cannot move the document. The end-of- document padding that keeps it from covering a focused control (WCAG 2.2 2.4.11) is applied by a class the head script writes BEFORE first paint, so it is part of the first layout rather than a correction to it. RTL is structural, not a stylesheet: every offset here is a logical property. ========================================================================== */ .wxc { /* surface */ --wxc-bg: #0C0C0C; --wxc-bg-panel: #101010; --wxc-rule: rgba(255, 255, 255, 0.14); --wxc-edge: rgba(255, 255, 255, 0.42); /* 4.1:1 on the surface — a real boundary */ --wxc-ink: #FFFFFF; --wxc-ink-2: #B3B3B3; --wxc-scrim: rgba(0, 0, 0, 0.62); /* brand */ --wxc-accent: var(--wenex-color-accent, #C93927); --wxc-accent-hover: var(--wenex-color-accent-hover, #9D2F21); --wxc-focus: var(--wenex-color-accent-light, #E24D39); /* type */ --wxc-display: var(--wenex-font-headline, 'Switzer', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); --wxc-text: var(--wenex-font-body, 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); /* geometry — the ratified content band, the estate's radius, 44px targets */ --wxc-wrap: 1100px; --wxc-gutter: clamp(20px, 5vw, 48px); --wxc-radius: 10px; --wxc-tap: 44px; --wxc-ease: cubic-bezier(0.16, 1, 0.3, 1); } [data-theme="light"] .wxc, body.wxc-light .wxc { --wxc-bg: #FFFFFF; --wxc-bg-panel: #FFFFFF; --wxc-rule: rgba(0, 0, 0, 0.12); --wxc-edge: rgba(0, 0, 0, 0.46); --wxc-ink: #101010; --wxc-ink-2: #4A4A4A; /* 8.1:1 on white */ --wxc-scrim: rgba(0, 0, 0, 0.42); } /* ------------------------------------------------------------------ the bar */ .wxc-bar { display: none; /* revealed only for an undecided visitor */ position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 2147483000; /* above the site, below nothing that matters */ background: var(--wxc-bg); border-block-start: 1px solid var(--wxc-rule); color: var(--wxc-ink); font-family: var(--wxc-text); /* A dark bar on a light page separates itself; a heavy plume above it just reads as a smudge on white. The hairline does the work. */ box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.10); } .wenex-consent-needed .wxc-bar { display: block; animation: wxc-rise 320ms var(--wxc-ease) both; } /* WCAG 2.2 · 2.4.11 Focus Not Obscured. Two halves, and both are needed: the padding guarantees the document can scroll past the bar at all, and the scroll-padding tells the browser to leave that much room when it scrolls a focused control into view. Without the second half, moving focus to the last control on a page parks it neatly underneath the notice. */ .wenex-consent-needed { scroll-padding-block-end: 168px; } .wenex-consent-needed body { padding-block-end: 168px; } @keyframes wxc-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } .wxc-bar-in { max-width: var(--wxc-wrap); margin-inline: auto; padding: 20px var(--wxc-gutter); display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } /* Held to a readable measure rather than allowed to run the full band. */ .wxc-copy { flex: 1 1 380px; min-width: 0; max-width: 64ch; } .wxc-title { font-family: var(--wxc-display); font-size: 1rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; color: var(--wxc-ink); } /* 2026-08-08 — ONE DECLARATION, SO THE BAR'S OWN INK WINS ON ITS OWN SURFACE. * * `.wxc-title` is (0,1,0). wenex-club's `wenex-ui.css` carries * .woocommerce-account :where(h1.entry-title, h2, h3){color:var(--wx-ink);} * and `:where()` contributes ZERO specificity, so that selector is also * (0,1,0) — a tie, decided by load order, and wenex-ui.css loads later. On * account pages the bar's heading was therefore painted with My WENEX's ink, * `#1D1D1F`, on the bar's own `#0C0C0C` surface: measured 1.16:1. Everywhere * else the bar renders white at 19:1, which is why only the account audit saw it. * * Nothing here changes what the banner asks, records, or does, and no new * colour is introduced: the value is the bar's existing `--wxc-ink`, already * #FFFFFF. Only the scope changes, so a global component stops inheriting ink * calibrated for a page it does not own — the same rule the shell footer needed. */ .wxc .wxc-title { color: var(--wxc-ink); } .wxc-body { font-size: 0.875rem; line-height: 1.55; margin: 0; color: var(--wxc-ink-2); } .wxc-link { color: var(--wxc-ink); text-decoration: underline; text-underline-offset: 3px; } .wxc-link:hover { color: var(--wxc-accent); } /* --------------------------------------------------------------- the buttons */ .wxc-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wxc-btn { appearance: none; min-height: var(--wxc-tap); min-width: var(--wxc-tap); padding: 0 22px; border-radius: var(--wxc-radius); border: 1px solid transparent; font-family: var(--wxc-text); font-size: 0.875rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 160ms var(--wxc-ease), border-color 160ms var(--wxc-ease), color 160ms var(--wxc-ease); } /* Accept and Reject are the same size and the same weight, deliberately: a reject that is harder to reach than an accept is not a choice. */ .wxc-btn-primary { background: var(--wxc-accent); color: #FFFFFF; /* 5.1:1 on the crimson */ } .wxc-btn-primary:hover { background: var(--wxc-accent-hover); } .wxc-btn-secondary { background: transparent; color: var(--wxc-ink); border-color: var(--wxc-edge); } .wxc-btn-secondary:hover { border-color: var(--wxc-ink); } .wxc-btn-quiet { background: transparent; color: var(--wxc-ink-2); padding-inline: 12px; text-decoration: underline; text-underline-offset: 3px; } .wxc-btn-quiet:hover { color: var(--wxc-ink); } /* The dialog receives focus on open so its name is announced; it is not a control, so it does not draw a ring. */ .wxc-panel:focus { outline: none; } .wxc :focus-visible { outline: 2px solid var(--wxc-focus); outline-offset: 2px; border-radius: var(--wxc-radius); } /* ---------------------------------------------------------------- the panel */ .wxc-scrim { position: fixed; inset: 0; z-index: 2147483001; background: var(--wxc-scrim); animation: wxc-fade 200ms var(--wxc-ease) both; } .wxc-panel { position: fixed; z-index: 2147483002; inset-block-end: 0; inset-inline: 0; margin-inline: auto; max-width: 560px; max-height: min(86vh, 760px); overflow-y: auto; overscroll-behavior: contain; background: var(--wxc-bg-panel); color: var(--wxc-ink); font-family: var(--wxc-text); border: 1px solid var(--wxc-rule); border-start-start-radius: 16px; border-start-end-radius: 16px; box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.42); animation: wxc-rise 320ms var(--wxc-ease) both; } @media (min-width: 720px) { .wxc-panel { inset-block: 50% auto; transform: translateY(-50%); border-radius: 16px; animation: wxc-fade 220ms var(--wxc-ease) both; } } @keyframes wxc-fade { from { opacity: 0; } to { opacity: 1; } } .wxc-panel-in { padding: 28px clamp(20px, 4vw, 32px) 24px; } .wxc-panel .wxc-title { font-size: 1.125rem; margin-block-end: 18px; } .wxc-cat { padding-block: 16px; border-block-start: 1px solid var(--wxc-rule); } .wxc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--wxc-tap); } .wxc-cat-name { font-weight: 600; font-size: 0.9375rem; } .wxc-cat-fixed { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wxc-ink-2); } .wxc-cat-body { margin: 6px 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--wxc-ink-2); } /* switch — a real checkbox, styled; never a div pretending */ .wxc-switch { display: flex; align-items: center; gap: 14px; min-height: var(--wxc-tap); cursor: pointer; /* Reversed so the name reads first and the switch sits at the inline end, on the same rail as "Always on" in the row above it. */ flex-direction: row-reverse; justify-content: space-between; inline-size: 100%; } .wxc-switch input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; margin: 0; } .wxc-track { inline-size: 48px; block-size: 28px; flex: 0 0 48px; border-radius: 999px; background: transparent; border: 1px solid var(--wxc-edge); position: relative; transition: background-color 180ms var(--wxc-ease), border-color 180ms var(--wxc-ease); } .wxc-thumb { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--wxc-edge); transition: transform 180ms var(--wxc-ease), background-color 180ms var(--wxc-ease); } .wxc-switch input:checked ~ .wxc-track { background: var(--wxc-accent); border-color: var(--wxc-accent); } .wxc-switch input:checked ~ .wxc-track .wxc-thumb { background: #FFFFFF; transform: translateX(20px); } [dir="rtl"] .wxc-switch input:checked ~ .wxc-track .wxc-thumb { transform: translateX(-20px); } .wxc-switch input:focus-visible ~ .wxc-track { outline: 2px solid var(--wxc-focus); outline-offset: 2px; } .wxc-panel-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-block-start: 22px; border-block-start: 1px solid var(--wxc-rule); margin-block-start: 8px; } .wxc-fine { margin: 16px 0 0; font-size: 0.75rem; color: var(--wxc-ink-2); } /* ------------------------------------------------------------- reopen control */ .wxc-reopen { appearance: none; background: none; border: 0; padding: 10px 0; min-height: var(--wxc-tap); font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------------- mobile */ @media (max-width: 719px) { .wxc-bar-in { gap: 18px; padding-block: 18px; } .wxc-actions { inline-size: 100%; } .wxc-btn-primary, .wxc-btn-secondary { flex: 1 1 140px; } .wenex-consent-needed { scroll-padding-block-end: 260px; } .wenex-consent-needed body { padding-block-end: 260px; } } /* --------------------------------------------------------- reduced motion */ @media (prefers-reduced-motion: reduce) { .wenex-consent-needed .wxc-bar, .wxc-panel, .wxc-scrim { animation: none; } .wxc-btn, .wxc-track, .wxc-thumb { transition: none; } } /* ------------------------------------------------------------------- print */ @media print { .wxc { display: none !important; } }