/** * Zai Lab — WPConsent (WP Consent Pro) cookie banner theming. * * WPConsent renders its banner inside a *shadow root* attached to * #wpconsent-container, so ordinary descendant selectors cannot reach it. * Everything below therefore works through the only two channels the shadow * boundary allows: * * 1. CSS custom properties set on the host (#wpconsent-container) — these * inherit through the boundary and override the inline defaults the * plugin prints on #wpconsent-root. * 2. ::part() selectors, using the part="" names the plugin exposes * (wpconsent-banner, wpconsent-banner-body, wpconsent-banner-footer, * wpconsent-button-accept | -cancel | -preferences, and the preferences * modal buttons). * * Normal declarations from this (outer) tree beat the plugin's shadow-tree * stylesheet in the cascade, so no !important is needed. * * The target look is the legacy Vue banner still live on * zailaboratory.com: a full-width white bar pinned to the bottom, message on * the left, red-gradient pill buttons stacked on the right. * * NOTE: hand-authored, not generated from Tailwind. It is run through * webpack-mix (see webpack.mix.js) only so it picks up autoprefixer and * cache-busting; the compiled copy in /css is byte-identical. */ #wpconsent-container { /* Plugin variables — override the inline values on #wpconsent-root. */ --wpconsent-background: #ffffff; --wpconsent-text: #000000; --wpconsent-border: #e5e7eb; --wpconsent-font-size: 16px; --wpconsent-line-height: 1.5; --wpconsent-title-size: 1.5rem; /* Close button (only rendered when enabled in WPConsent settings). */ --wpconsent-close-color: #000000; --wpconsent-close-size: 24px; /* Keeps the preferences modal's own buttons legible if a gradient fails. */ --wpconsent-accept-bg: #db0516; --wpconsent-cancel-bg: #db0516; --wpconsent-preferences-bg: #db0516; --wpconsent-accept-color: #ffffff; --wpconsent-cancel-color: #ffffff; --wpconsent-preferences-color: #ffffff; /* Theme tokens. Gradients match .red-gradient / .zai-button:hover. */ --zai-consent-red: linear-gradient(to right, #f22635, #820303); --zai-consent-red-hover: linear-gradient(to right, #000000, #6b7280); --zai-consent-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --zai-consent-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* * Mirrors the Tailwind `.container` the rest of the theme uses, so the * banner's text lines up with the page content above it. * --zai-consent-content = container max-width minus its horizontal padding. */ --zai-consent-content: 100%; --zai-consent-gutter: 1rem; } @media (min-width: 640px) { #wpconsent-container { --zai-consent-content: 36rem; /* 640px - 2 * 2rem */ --zai-consent-gutter: 2rem; } } @media (min-width: 768px) { #wpconsent-container { --zai-consent-content: 44rem; /* 768px - 2 * 2rem */ } } @media (min-width: 1024px) { #wpconsent-container { --zai-consent-content: 56rem; /* 1024px - 2 * 4rem */ --zai-consent-gutter: 4rem; } } @media (min-width: 1280px) { #wpconsent-container { --zai-consent-content: 70rem; /* 1280px - 2 * 5rem */ --zai-consent-gutter: 5rem; } } @media (min-width: 1536px) { #wpconsent-container { --zai-consent-content: 84rem; /* 1536px - 2 * 6rem */ --zai-consent-gutter: 6rem; } } /* --------------------------------------------------------------------------- * The bar * ------------------------------------------------------------------------ */ #wpconsent-container::part(wpconsent-banner) { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: auto; min-width: 0; max-width: none; max-height: 100vh; overflow-y: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; /* Full-bleed white bar, content held to the theme container width. */ padding: 2rem max( var(--zai-consent-gutter), calc((100% - var(--zai-consent-content)) / 2) ); background: #ffffff; color: #000000; border: 0; border-top: 1px solid #e5e7eb; border-radius: 0; box-shadow: none; } @media (min-width: 1024px) { #wpconsent-container::part(wpconsent-banner) { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 4rem; padding-top: 4rem; padding-bottom: 4rem; } } /* --------------------------------------------------------------------------- * Message * ------------------------------------------------------------------------ */ #wpconsent-container::part(wpconsent-banner-body) { flex: 0 1 auto; width: auto; max-width: 36rem; /* max-w-xl, as on the live banner */ max-height: none; overflow: visible; margin: 0; padding: 0; font-family: inherit; font-size: 1.125rem !important; line-height: 1.75 !important; color: #000000; text-align: left; } /* --------------------------------------------------------------------------- * Buttons * ------------------------------------------------------------------------ */ #wpconsent-container::part(wpconsent-banner-footer) { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; width: auto; gap: 0.5rem; } /* * DOM order is preferences / reject / accept; the live banner leads with * accept. Reordering visually here keeps it in step without touching the * plugin's "Button Order" setting. */ #wpconsent-container::part(wpconsent-button-accept) { order: 1; } #wpconsent-container::part(wpconsent-button-cancel) { order: 2; } #wpconsent-container::part(wpconsent-button-preferences) { order: 3; } /* .zai-button + .red-gradient, rebuilt as plain CSS. */ #wpconsent-container::part(wpconsent-button-accept), #wpconsent-container::part(wpconsent-button-cancel), #wpconsent-container::part(wpconsent-button-preferences), #wpconsent-container::part(wpconsent-preferences-accept-button), #wpconsent-container::part(wpconsent-preferences-cancel-button), #wpconsent-container::part(wpconsent-preferences-save-button) { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: auto; min-height: 0; margin: 0; padding: 1rem 1.5rem; background: linear-gradient(to right, #f22635, #820303); color: #ffffff; border: 0; border-radius: 9999px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); font-family: inherit; font-size: 0.875rem; font-weight: 400; line-height: 1.25rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; white-space: nowrap; cursor: pointer; transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } #wpconsent-container::part(wpconsent-button-accept):hover, #wpconsent-container::part(wpconsent-button-cancel):hover, #wpconsent-container::part(wpconsent-button-preferences):hover, #wpconsent-container::part(wpconsent-preferences-accept-button):hover, #wpconsent-container::part(wpconsent-preferences-cancel-button):hover, #wpconsent-container::part(wpconsent-preferences-save-button):hover { background: linear-gradient(to right, #000000, #6b7280); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } /* * Trailing arrow, matching Icons/IconArrow.vue. Drawn as a mask so it picks up * the button's currentColor rather than needing a second asset. */ #wpconsent-container::part(wpconsent-button-accept)::after, #wpconsent-container::part(wpconsent-button-cancel)::after, #wpconsent-container::part(wpconsent-button-preferences)::after { content: ""; flex: none; width: 1.0625rem; height: 0.625rem; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M9.68,1.53C9.34,1.24,9.34,0.76,9.68,0.47C10.01,0.18,10.56,0.18,10.89,0.47L15.46,4.47C15.8,4.76,15.8,5.24,15.46,5.53L10.89,9.53C10.56,9.82,10.01,9.82,9.68,9.53C9.34,9.24,9.34,8.76,9.68,8.47L12.79,5.75L1.71,5.75C1.24,5.75,0.86,5.41,0.86,5C0.86,4.59,1.24,4.25,1.71,4.25L12.79,4.25L9.68,1.53Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M9.68,1.53C9.34,1.24,9.34,0.76,9.68,0.47C10.01,0.18,10.56,0.18,10.89,0.47L15.46,4.47C15.8,4.76,15.8,5.24,15.46,5.53L10.89,9.53C10.56,9.82,10.01,9.82,9.68,9.53C9.34,9.24,9.34,8.76,9.68,8.47L12.79,5.75L1.71,5.75C1.24,5.75,0.86,5.41,0.86,5C0.86,4.59,1.24,4.25,1.71,4.25L12.79,4.25L9.68,1.53Z'/%3E%3C/svg%3E") center / contain no-repeat; } /* --------------------------------------------------------------------------- * Preferences modal — kept in the same visual family as the bar. * ------------------------------------------------------------------------ */ #wpconsent-container::part(wpconsent-preferences-content) { border-radius: 0; font-family: inherit; } #wpconsent-container::part(wpconsent-preferences-title) { font-family: inherit; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; } #wpconsent-container::part(wpconsent-preferences-buttons) { gap: 0.5rem; } #wpconsent-container::part(zai-consent-close) { display: none !important; }