/** * Simply Dwell — CookieHub consent banner re-skin. * * The cookie banner is rendered by CookieHub (a third-party CMP, prod-only — see * includes/sd-gtm.php and GO-LIVE-CHECKLIST.md). CookieHub injects its own ".ch2-*" * markup + stylesheet at the end of ; this file overrides that styling so the * banner matches the Simply Dwell brand: a full-width dark bar pinned to the bottom, * Lexend type, #1F242E ground, #C8C8C8 copy, a solid #D46F35 "Accept" pill and an * outlined "Decline" pill. It is CSS-only — it never touches CookieHub's buttons or * consent logic, so accept/reject and Google Consent Mode keep working unchanged. * * Consent lifetime ("show once / re-prompt after 30 days") is a CookieHub dashboard * setting (Consent expiration), not CSS — see the note in includes/enqueue.php. * * !important is used throughout because CookieHub ships high-specificity / inline * styling for position and colour; the selectors also carry partial-class fallbacks * ([class*="ch2-allow"] etc.) so minor CookieHub version differences still match. * Brand tokens: dark #1F242E · accent #D46F35 · gold #E2BB61 · muted #C8C8C8. */ /* ── Full-width bottom bar ───────────────────────────────────────────────────── */ #ch2 .ch2-dialog, .ch2-dialog { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; max-width: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: #1f242e !important; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.28) !important; font-family: 'Lexend', sans-serif !important; color: #c8c8c8 !important; z-index: 99999 !important; } /* Inner layout: content left, actions right; centred to the site's max width. */ #ch2 .ch2-dialog-content, .ch2-dialog .ch2-dialog-content { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: clamp(16px, 3vw, 40px) !important; width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; padding: clamp(16px, 2.5vw, 24px) clamp(20px, 6vw, 120px) !important; box-sizing: border-box !important; } /* ── Typography ──────────────────────────────────────────────────────────────── */ #ch2 .ch2-dialog .ch2-title, .ch2-dialog .ch2-title, .ch2-dialog .ch2-dialog-title { margin: 0 0 6px !important; font-family: 'Lexend', sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.4 !important; color: #ffffff !important; } #ch2 .ch2-dialog .ch2-text, .ch2-dialog .ch2-text, .ch2-dialog .ch2-description, .ch2-dialog .ch2-dialog-description, .ch2-dialog p { margin: 0 !important; font-family: 'Lexend', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; color: #c8c8c8 !important; } #ch2 .ch2-dialog a, .ch2-dialog .ch2-text a, .ch2-dialog .ch2-description a { color: #e2bb61 !important; text-decoration: underline !important; } /* ── Actions row ─────────────────────────────────────────────────────────────── */ #ch2 .ch2-dialog .ch2-buttons, .ch2-dialog .ch2-buttons, .ch2-dialog .ch2-dialog-actions { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; margin: 0 !important; flex: none !important; } /* ── Buttons (brand pills) ───────────────────────────────────────────────────── */ #ch2 .ch2-dialog .ch2-btn, .ch2-dialog .ch2-btn, .ch2-dialog [class*="ch2-allow"], .ch2-dialog [class*="ch2-deny"], .ch2-dialog [class*="ch2-customize"], .ch2-dialog [class*="ch2-settings"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 48px !important; min-width: 132px !important; padding: 10px 24px !important; border-radius: 31px !important; font-family: 'Lexend', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; transition: filter 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease !important; } /* Primary — "Accept all": solid accent */ #ch2 .ch2-dialog .ch2-allow-all-btn, .ch2-dialog .ch2-allow-all-btn, .ch2-dialog [class*="ch2-allow"], .ch2-dialog .ch2-btn-primary { background: #d46f35 !important; color: #ffffff !important; border: 1.5px solid #d46f35 !important; } #ch2 .ch2-dialog .ch2-allow-all-btn:hover, #ch2 .ch2-dialog .ch2-allow-all-btn:focus-visible, .ch2-dialog [class*="ch2-allow"]:hover, .ch2-dialog [class*="ch2-allow"]:focus-visible { filter: brightness(0.92) !important; color: #ffffff !important; } /* Secondary — "Decline" / "Customize": outlined */ #ch2 .ch2-dialog .ch2-deny-all-btn, .ch2-dialog .ch2-deny-all-btn, .ch2-dialog [class*="ch2-deny"], .ch2-dialog [class*="ch2-customize"], .ch2-dialog [class*="ch2-settings"], .ch2-dialog .ch2-btn-secondary { background: transparent !important; color: #ffffff !important; border: 1.5px solid #c8c8c8 !important; } #ch2 .ch2-dialog .ch2-deny-all-btn:hover, #ch2 .ch2-dialog .ch2-deny-all-btn:focus-visible, .ch2-dialog [class*="ch2-deny"]:hover, .ch2-dialog [class*="ch2-deny"]:focus-visible, .ch2-dialog [class*="ch2-customize"]:hover, .ch2-dialog [class*="ch2-settings"]:hover { border-color: #d46f35 !important; color: #d46f35 !important; } #ch2 .ch2-dialog .ch2-btn:focus-visible, .ch2-dialog .ch2-btn:focus-visible { outline: 2px solid #e2bb61 !important; outline-offset: 2px !important; } /* ── Responsive: tablet & mobile ─────────────────────────────────────────────── */ @media (max-width: 860px) { #ch2 .ch2-dialog-content, .ch2-dialog .ch2-dialog-content { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; text-align: center !important; } #ch2 .ch2-dialog .ch2-buttons, .ch2-dialog .ch2-buttons, .ch2-dialog .ch2-dialog-actions { justify-content: center !important; } } @media (max-width: 560px) { #ch2 .ch2-dialog .ch2-buttons, .ch2-dialog .ch2-buttons, .ch2-dialog .ch2-dialog-actions { flex-direction: column !important; } #ch2 .ch2-dialog .ch2-btn, .ch2-dialog .ch2-btn, .ch2-dialog [class*="ch2-allow"], .ch2-dialog [class*="ch2-deny"], .ch2-dialog [class*="ch2-customize"], .ch2-dialog [class*="ch2-settings"] { width: 100% !important; } } .ch2-theme-bar .ch2-dialog.ch2-dialog-center, .ch2-theme-default .ch2-dialog.ch2-dialog-center, .ch2-theme-overlay .ch2-dialog.ch2-dialog-center { top: unset !important; left: unset !important; transform: none !important; -webkit-transform: none !important; box-sizing: border-box !important; } .ch2-style-light .ch2-dialog-content h2, .ch2-style-light .ch2-dialog-content p a, .ch2-style-light .ch2-dialog-content p strong { color: #fff !important; } #ch2 .ch2-dialog .ch2-btn, .ch2-dialog .ch2-btn, .ch2-dialog [class*="ch2-allow"], .ch2-dialog [class*="ch2-deny"], .ch2-dialog [class*="ch2-customize"], .ch2-dialog [class*="ch2-settings"] { min-height: fit-content !important; } #ch2 .ch2-dialog-content, .ch2-dialog .ch2-dialog-content { padding: 20px 0px !important; } @media (max-width: 560px) { #ch2 .ch2-dialog .ch2-btn, .ch2-dialog .ch2-btn, .ch2-dialog [class*="ch2-allow"], .ch2-dialog [class*="ch2-deny"], .ch2-dialog [class*="ch2-customize"], .ch2-dialog [class*="ch2-settings"] { width: fit-content !important; } }