/** * Breakdance Consent — Banner Styles * * Uses --bdc-* CSS custom properties with Orbit design token fallbacks * so the plugin works on any theme. * * @package BreakdanceConsent */ /* * Custom property defaults (fallback for non-Orbit themes). * * Defined on component selectors (not :root) so that --wp--preset--color--* * references resolve inside , where dark-mode overrides from * orbit-theme-toggle (html[data-theme="dark"] body) take effect. */ .breakdance-consent, .breakdance-consent__reopen, .breakdance-consent__preferences { --bdc-color-primary: var(--wp--preset--color--primary, var(--bde-brand-primary-color, #1a56db)); --bdc-color-primary-hover: var(--wp--preset--color--primary-hover, var(--bde-brand-primary-color-hover, #1244b0)); /* Text links follow the Breakdance link color; toggles follow the brand color. Both are overridable from Breakdance → Global Settings → Consent. */ --bdc-color-link: var(--bde-links-color, var(--bdc-color-primary)); --bdc-color-link-hover: var(--bde-links-color-hover, var(--bdc-color-primary-hover)); --bdc-color-toggle-active: var(--bde-brand-primary-color, var(--bdc-color-primary)); --bdc-color-bg: var(--wp--preset--color--background, #ffffff); --bdc-color-text: var(--wp--preset--color--body-text, #374151); --bdc-color-text-muted: var(--wp--preset--color--muted, #6b7280); --bdc-color-border: var(--wp--preset--color--border, #d1d5db); --bdc-color-surface: var(--wp--preset--color--surface, #f9fafb); --bdc-color-foreground: var(--wp--preset--color--foreground, #111827); --bdc-shadow: var(--wp--preset--shadow--lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)); --bdc-shadow-md: var(--wp--preset--shadow--md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)); --bdc-radius: 0.5rem; --bdc-spacing-xs: var(--wp--preset--spacing--xs, 0.5rem); --bdc-spacing-sm: var(--wp--preset--spacing--sm, 0.75rem); --bdc-spacing-md: var(--wp--preset--spacing--md, 1rem); --bdc-spacing-lg: var(--wp--preset--spacing--lg, 1.5rem); --bdc-spacing-xl: var(--wp--preset--spacing--xl, 2rem); --bdc-font-family: var(--wp--preset--font-family--primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); --bdc-font-size-sm: var(--wp--preset--font-size--sm, 0.875rem); --bdc-font-size-base: var(--wp--preset--font-size--base, 1rem); --bdc-overlay-opacity: 0.5; --bdc-transition-fast: 0.15s; } /* ── Base wrapper ── */ .breakdance-consent { font-family: var(--bdc-font-family); font-size: var(--bdc-font-size-base); line-height: 1.5; color: var(--bdc-color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Bottom bar position ── */ .breakdance-consent--bottom-bar .breakdance-consent__banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; background: var(--bdc-color-bg); border-top: 1px solid var(--bdc-color-border); box-shadow: var(--bdc-shadow); transition: background-color var(--bdc-transition-fast) ease, border-color var(--bdc-transition-fast) ease; } /* Banner slide-up entrance */ .breakdance-consent--bottom-bar .breakdance-consent__banner:not([hidden]) { animation: bdc-slide-up 0.3s ease-out; } @keyframes bdc-slide-up { from { opacity: 0; transform: translateY(100%); } } /* ── Centered modal position ── */ .breakdance-consent--centered-modal .breakdance-consent__banner { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, var(--bdc-overlay-opacity)); } /* Centered modal fade entrance */ .breakdance-consent--centered-modal .breakdance-consent__banner:not([hidden]) { animation: bdc-fade-in 0.2s ease-out; } @keyframes bdc-fade-in { from { opacity: 0; } } .breakdance-consent--centered-modal .breakdance-consent__inner { background: var(--bdc-color-bg); border-radius: var(--bdc-radius); box-shadow: var(--bdc-shadow); max-width: 520px; width: 90%; max-height: 90vh; overflow-y: auto; padding: var(--bdc-spacing-xl) var(--bdc-spacing-xl) var(--bdc-spacing-lg); transition: background-color var(--bdc-transition-fast) ease, box-shadow var(--bdc-transition-fast) ease; } .breakdance-consent--centered-modal .breakdance-consent__title { font-size: 1.25rem; margin-bottom: var(--bdc-spacing-sm); } .breakdance-consent--centered-modal .breakdance-consent__description { margin-bottom: var(--bdc-spacing-md); } .breakdance-consent--centered-modal .breakdance-consent__privacy-link { display: inline-block; margin-bottom: var(--bdc-spacing-lg); } .breakdance-consent--centered-modal .breakdance-consent__actions { flex-direction: column; } .breakdance-consent--centered-modal .breakdance-consent__btn { width: 100%; } .breakdance-consent--centered-modal .breakdance-consent__btn--link { width: auto; align-self: center; } /* ── Banner close (dismiss without changing preferences) ── */ .breakdance-consent__banner-close { position: absolute; top: var(--bdc-spacing-sm, 0.5rem); right: var(--bdc-spacing-sm, 0.5rem); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; font-size: 1.25rem; color: var(--bdc-color-text-muted, #6b7280); border-radius: var(--bdc-radius, 0.5rem); padding: 0; line-height: 1; transition: background-color 0.15s ease, color 0.15s ease; } .breakdance-consent__banner-close:hover { background: var(--bdc-color-surface, #f9fafb); color: var(--bdc-color-text, #374151); } .breakdance-consent__banner-close:focus-visible { outline: 2px solid var(--bdc-color-primary, #1a56db); outline-offset: 2px; } /* ── Banner inner ── */ .breakdance-consent__inner { position: relative; padding: var(--bdc-spacing-lg) var(--bdc-spacing-xl); max-width: 1200px; margin: 0 auto; } .breakdance-consent--bottom-bar .breakdance-consent__inner { display: flex; align-items: center; gap: var(--bdc-spacing-lg); flex-wrap: wrap; } /* ── Banner content ── */ .breakdance-consent__content { flex: 1; min-width: 0; } .breakdance-consent .breakdance-consent__title, .breakdance-consent__preferences .breakdance-consent__preferences-header h2 { color: var(--bdc-color-heading, var(--bdc-color-text)) !important; } .breakdance-consent__title { font-size: var(--bdc-font-size-base); font-weight: 700; margin: 0 0 var(--bdc-spacing-xs) 0; } .breakdance-consent__description { font-size: var(--bdc-font-size-sm); color: var(--bdc-color-text-muted); margin: 0 0 var(--bdc-spacing-xs) 0; } .breakdance-consent__description p { margin: 0; } .breakdance-consent__privacy-link { font-size: var(--bdc-font-size-sm); color: var(--bdc-color-link, var(--bdc-color-primary)); text-decoration: underline; transition: color var(--bdc-transition-fast) ease; } .breakdance-consent__privacy-link:hover { color: var(--bdc-color-link-hover, var(--bdc-color-primary-hover)); } /* ── Banner actions ── */ .breakdance-consent__actions { display: flex; gap: var(--bdc-spacing-sm); align-items: center; flex-wrap: wrap; flex-shrink: 0; } /* * Inline wrapper that only exists so Breakdance button-preset selectors * (which require a `.breakdance` ancestor) can match our banner buttons. * `display: contents` keeps layout untouched and the reset neutralizes * BD's global `.breakdance { background/color: ... }` rules. */ .breakdance-consent__bd-scope { display: contents; background: transparent !important; color: inherit !important; } /* ── Buttons ── */ .breakdance-consent__btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--bdc-spacing-sm) var(--bdc-spacing-lg); font-size: var(--bdc-font-size-sm); font-weight: 600; font-family: inherit; line-height: 1.2; border-radius: var(--bdc-radius); cursor: pointer; min-height: 44px; min-width: 44px; transition: background-color var(--bdc-transition-fast) ease, color var(--bdc-transition-fast) ease, border-color var(--bdc-transition-fast) ease, transform var(--bdc-transition-fast) ease; border: 2px solid transparent; text-decoration: none; } .breakdance-consent__btn:focus-visible { outline: 2px solid var(--bdc-color-primary); outline-offset: 2px; } .breakdance-consent__btn--primary { background: var(--bdc-color-primary); color: var(--bdc-color-bg); border-color: var(--bdc-color-primary); } .breakdance-consent__btn--primary:hover { background: var(--bdc-color-primary-hover); border-color: var(--bdc-color-primary-hover); } .breakdance-consent__btn--secondary { background: transparent; color: var(--bdc-color-text); border-color: var(--bdc-color-border); } .breakdance-consent__btn--secondary:hover { background: var(--bdc-color-surface); border-color: var(--bdc-color-text-muted); } .breakdance-consent__btn--link { background: transparent; color: var(--bdc-color-link, var(--bdc-color-primary)); border: none; padding: var(--bdc-spacing-sm) var(--bdc-spacing-xs); text-decoration: underline; } .breakdance-consent__btn--link:hover { color: var(--bdc-color-link-hover, var(--bdc-color-primary-hover)); } /* * Reopen button (floating cookie icon). * * Styled to match orbit-theme-toggle's floating button (surface bg, * foreground icon color, same border/shadow/hover behavior). * Positioned to its left with a 0.5rem gap. */ .breakdance-consent__reopen { position: fixed; bottom: var(--wp--preset--spacing--lg, 1.5rem); right: calc(var(--wp--preset--spacing--lg, 1.5rem) + 2.75rem + 0.5rem); z-index: 99998; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--bdc-color-surface); border: 1px solid var(--bdc-color-border); box-shadow: var(--bdc-shadow-md); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--bdc-color-foreground); transition: background-color var(--bdc-transition-fast) ease, border-color var(--bdc-transition-fast) ease, box-shadow var(--bdc-transition-fast) ease, color var(--bdc-transition-fast) ease, transform var(--bdc-transition-fast) ease; padding: 0; } .breakdance-consent__reopen:hover { background: var(--bdc-color-bg); box-shadow: var(--bdc-shadow); transform: scale(1.05); } /* Icon: spin in with scale on page load (mirrors orbit-theme-toggle sun). */ .breakdance-consent__reopen svg { animation: bdc-cookie-enter 0.5s ease-out; } @keyframes bdc-cookie-enter { 0% { opacity: 0; transform: scale(0.3) rotate(-180deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } /* Hover/focus: gentle rocking on the cookie icon. */ .breakdance-consent__reopen:hover svg, .breakdance-consent__reopen:focus-visible svg { animation: bdc-cookie-hover 1.5s ease-in-out infinite; } @keyframes bdc-cookie-hover { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } } .breakdance-consent__reopen:active { transform: scale(0.95); } .breakdance-consent__reopen:focus-visible { outline: 2px solid var(--bdc-color-primary); outline-offset: 2px; } /* ── Banner focus (programmatic focus for keyboard/SR users) ── */ .breakdance-consent__banner:focus { outline: none; } .breakdance-consent__banner:focus-visible { outline: 2px solid var(--bdc-color-primary); outline-offset: -2px; } .breakdance-consent--centered-modal .breakdance-consent__banner:focus-visible { outline: none; } .breakdance-consent--centered-modal .breakdance-consent__banner:focus-visible > .breakdance-consent__inner { outline: 2px solid var(--bdc-color-primary); outline-offset: -4px; } /* ── Hidden state ── */ .breakdance-consent__banner[hidden] { display: none; } /* ── Responsive: stack on mobile ── */ @media (max-width: 768px) { .breakdance-consent--bottom-bar .breakdance-consent__inner { flex-direction: column; align-items: stretch; } .breakdance-consent__actions { flex-direction: column; } .breakdance-consent__btn { width: 100%; } } /* Match orbit-theme-toggle's mobile breakpoint for grouped positioning */ @media (max-width: 599.98px) { .breakdance-consent__reopen { bottom: var(--wp--preset--spacing--md, 1rem); right: calc(var(--wp--preset--spacing--md, 1rem) + 2.75rem + 0.5rem); } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .breakdance-consent__btn, .breakdance-consent__reopen, .breakdance-consent__privacy-link { transition: none; } .breakdance-consent--bottom-bar .breakdance-consent__banner:not([hidden]), .breakdance-consent--centered-modal .breakdance-consent__banner:not([hidden]) { animation: none; } .breakdance-consent__reopen svg, .breakdance-consent__reopen:hover svg, .breakdance-consent__reopen:focus-visible svg { animation: none; } } /* * Do Not Sell / privacy choices link ([breakdance_consent_do_not_sell]). * The opt-out icon scales with the surrounding font size. */ .breakdance-consent__do-not-sell { display: inline-flex; align-items: center; gap: 0.4em; color: var(--bdc-color-link, var(--bde-links-color, inherit)); text-decoration: underline; cursor: pointer; } .breakdance-consent__do-not-sell:hover { color: var(--bdc-color-link-hover, var(--bde-links-color-hover, inherit)); } .breakdance-consent__optout-icon { height: 0.95em; width: auto; flex-shrink: 0; }