/** * Content Blocker – frontend.css * Design: minimalist black/white with accent #2043B7 * Colors come from CSS custom properties set inline by PHP. * * Note on specificity: every visible rule is scoped under `.cb-blocker` * (specificity 0,2,0) so theme button/link styles (typically 0,1,1) cannot * override the plugin. Your Custom-CSS is injected AFTER this file, so it can * still override everything — use the same `.cb-blocker …` prefix to be safe. */ :root { --cb-text: #ffffff; --cb-bg: #111111; --cb-btn-bg: #2043B7; --cb-btn-text: #ffffff; --cb-btn-hover-bg: #1a369a; --cb-btn-hover-text: #ffffff; } /* ── Wrapper / placeholder ── */ .cb-blocker { display: flex; align-items: flex-start; /* pin content to the top */ justify-content: center; min-height: 180px; /* fallback only; real height is set inline */ width: 100%; background-color: var(--cb-bg); color: var(--cb-text); box-sizing: border-box; padding: 24px 8px 20px; /* min 20px top/bottom, 8px sides */ font-family: inherit; border-radius: 4px; overflow: auto; /* if text is taller than the embed, scroll, don't clip */ } /* ── Inner content ── */ .cb-blocker .cb-blocker__inner { width: 100%; max-width: 520px; text-align: center; } /* ── Text elements ── */ .cb-blocker .cb-blocker__text, .cb-blocker .cb-blocker__recipient, .cb-blocker .cb-blocker__purpose { margin: 0 0 0.65em; font-size: 0.875rem; line-height: 1.6; color: var(--cb-text); } .cb-blocker .cb-blocker__text { font-size: 0.9375rem; } .cb-blocker .cb-blocker__third-country { display: inline-block; margin-top: 0.25em; font-size: 0.8rem; color: #f0b429; /* amber — universal caution, brand-neutral */ font-weight: 600; } /* ── Privacy link ── */ .cb-blocker .cb-blocker__privacy-link { display: inline-block; margin-bottom: 0.75em; font-size: 0.8125rem; line-height: 1.5; color: var(--cb-btn-bg); text-decoration: underline; text-underline-offset: 3px; transform: none; /* neutralise theme hover scaling */ } .cb-blocker .cb-blocker__privacy-link:hover, .cb-blocker .cb-blocker__privacy-link:focus { color: var(--cb-btn-hover-bg); transform: none; /* link must not grow on hover */ font-size: 0.8125rem; } /* ── Button ── */ .cb-blocker .cb-blocker__button { display: inline-block; margin-top: 1em; padding: 0.6em 1.4em; background-color: var(--cb-btn-bg); color: var(--cb-btn-text); border: none; /* never a border/frame */ outline: none; box-shadow: none; transform: none; /* no size change, even with theme hover styles */ border-radius: 3px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; letter-spacing: 0.01em; } /* Hover: only the colour changes — no frame, no resize. */ .cb-blocker .cb-blocker__button:hover { background-color: var(--cb-btn-hover-bg); color: var(--cb-btn-hover-text); border: none; outline: none; box-shadow: none; transform: none; } /* Keyboard focus keeps a subtle, accessible ring (not shown on mouse hover). */ .cb-blocker .cb-blocker__button:focus-visible { outline: 2px solid var(--cb-btn-hover-bg); outline-offset: 2px; } /* "Remember this service" checkbox under the button */ .cb-blocker .cb-blocker__remember { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 0.8em; font-size: 0.8rem; opacity: 0.85; cursor: pointer; } .cb-blocker .cb-blocker__remember input { margin: 0; cursor: pointer; } /* ── Revoke button ── */ .cb-revoke-btn { display: inline-block; padding: 0.5em 1.2em; background-color: #111111; color: #ffffff; border: 2px solid #111111; border-radius: 3px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .cb-revoke-btn:hover, .cb-revoke-btn:focus-visible { background-color: #ffffff; color: #111111; } /* ── Revoke as a visible text link (default) ── */ .cb-revoke-link { display: inline-block; color: var(--cb-btn-bg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .cb-revoke-link:hover, .cb-revoke-link:focus-visible { color: var(--cb-btn-hover-bg); text-decoration: underline; } .cb-revoke-note { display: block; margin-top: 6px; font-size: 0.8125rem; opacity: 0.8; } /* ── Services overview (for the privacy policy) ── */ .cb-services-list { list-style: none; margin: 1em 0; padding: 0; } .cb-services-list .cb-service-entry { margin: 0 0 1.1em; padding: 0 0 1.1em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .cb-services-list .cb-service-entry:last-child { border-bottom: none; } .cb-services-list .cb-service-entry__name { font-weight: 700; font-size: 1.02em; } .cb-services-list .cb-service-entry dl { margin: 0.4em 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; } .cb-services-list .cb-service-entry dt { font-weight: 600; } .cb-services-list .cb-service-entry dd { margin: 0; }