/* ========================================= THEME: purple (light + dark) Classes attendues sur : - cc--purple - cc--light OU cc--dark ========================================= */ /* ---------- LIGHT MODE ---------- */ .cc--purple.cc--light { color-scheme: light; --cc-bg: #ffffff; --cc-primary-color: #2c2f31; --cc-secondary-color: #5e6266; --cc-btn-primary-bg: #754ffe; --cc-btn-primary-color: #ffffff; --cc-btn-primary-hover-bg: #5d3ecc; --cc-btn-primary-hover-color: #ffffff; --cc-btn-secondary-bg: #eaeff2; --cc-btn-secondary-color: var(--cc-primary-color); --cc-btn-secondary-hover-bg: #d4dae0; --cc-btn-secondary-hover-color: #000000; --cc-btn-secondary-hover-border-color: #d4dae0; --cc-separator-border-color: #f0f4f7; --cc-toggle-on-bg: #754ffe; --cc-toggle-off-bg: #667481; --cc-toggle-on-knob-bg: #ffffff; --cc-toggle-enabled-icon-color: var(--cc-bg); --cc-toggle-disabled-icon-color: var(--cc-bg); --cc-toggle-readonly-bg: #d5dee2; --cc-toggle-readonly-knob-bg: #fff; --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg); --cc-cookie-category-block-bg: #f0f4f7; --cc-cookie-category-block-border: #f0f4f7; --cc-cookie-category-block-hover-bg: #e9eff4; --cc-cookie-category-block-hover-border: #e9eff4; --cc-cookie-category-expanded-block-bg: transparent; --cc-cookie-category-expanded-block-hover-bg: #dee4e9; --cc-section-category-border: var(--cc-cookie-category-block-bg); --cc-overlay-bg: rgba(0, 0, 0, 0.65); --cc-webkit-scrollbar-bg: var(--cc-section-category-border); --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg); --cc-footer-bg: var(--cc-btn-secondary-bg); --cc-footer-color: var(--cc-secondary-color); --cc-footer-border-color: #e4eaed; } /* ---------- DARK MODE ---------- */ .cc--purple.cc--dark { color-scheme: dark; --cc-bg: #14161a; --cc-primary-color: #f2f4f7; --cc-secondary-color: #b6bdc6; --cc-btn-primary-bg: #8b6bff; --cc-btn-primary-color: #0b0c0f; --cc-btn-primary-hover-bg: #a08aff; --cc-btn-primary-hover-color: #0b0c0f; --cc-btn-secondary-bg: #22262d; --cc-btn-secondary-color: var(--cc-primary-color); --cc-btn-secondary-hover-bg: #2b303a; --cc-btn-secondary-hover-color: #ffffff; --cc-btn-secondary-hover-border-color: #2b303a; --cc-separator-border-color: #2a2f38; --cc-toggle-on-bg: #8b6bff; --cc-toggle-off-bg: #56606d; --cc-toggle-on-knob-bg: #0b0c0f; --cc-toggle-enabled-icon-color: #0b0c0f; --cc-toggle-disabled-icon-color: #0b0c0f; --cc-toggle-readonly-bg: #303642; --cc-toggle-readonly-knob-bg: #0b0c0f; --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg); --cc-cookie-category-block-bg: #1c2027; --cc-cookie-category-block-border: #1c2027; --cc-cookie-category-block-hover-bg: #232834; --cc-cookie-category-block-hover-border: #232834; --cc-cookie-category-expanded-block-bg: transparent; --cc-cookie-category-expanded-block-hover-bg: #1f2430; --cc-section-category-border: var(--cc-cookie-category-block-bg); --cc-overlay-bg: rgba(0, 0, 0, 0.75); --cc-webkit-scrollbar-bg: #2a2f38; --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg); --cc-footer-bg: var(--cc-btn-secondary-bg); --cc-footer-color: var(--cc-secondary-color); --cc-footer-border-color: #2a2f38; } /* ========================================= Custom floating button (inherits theme vars) ========================================= */ .custom-cc-button { position: fixed; z-index: 9999; width: 50px; height: 50px; display: none; align-items: center; justify-content: center; background: var(--cc-bg); border: 2px solid var(--cc-separator-border-color); border-radius: 50%; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; padding: 0; } /* Positions */ .cc-toggle-bottom-left { bottom: 20px; left: 20px; } .cc-toggle-bottom-right { bottom: 20px; right: 20px; } .cc-toggle-top-left { top: 20px; left: 20px; } .cc-toggle-top-right { top: 20px; right: 20px; } .custom-cc-button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(117, 79, 254, 0.30); background: var(--cc-cookie-category-block-hover-bg); } .custom-cc-button .bi-cookie { font-size: 40px; color: var(--cc-btn-primary-bg); line-height: 1; display: block; transition: color 0.3s ease; } .custom-cc-button:hover .bi-cookie { color: var(--cc-btn-primary-hover-bg); }