cookiecraft 1.0.0 → 1.0.2

package/dist/cookiecraft.css

@@ -1 +1 @@
-.cc-banner,.cc-modal,.cc-widget{--cc-primary:#06c;--cc-primary-hover:#0052a3;--cc-primary-glow:color-mix(in srgb,var(--cc-primary) 30%,transparent);--cc-bg:#fff;--cc-text:#1a1a1a;--cc-text-secondary:#666;--cc-border:#e5e7eb;--cc-overlay:rgba(0,0,0,.4);--cc-padding:1.5rem;--cc-gap:0.75rem;--cc-border-radius:12px;--cc-shadow:0 -4px 24px rgba(0,0,0,.12);--cc-transition:0.3s cubic-bezier(0.4,0,0.2,1);--cc-backdrop-blur:10px;--cc-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}.cc-banner *,.cc-modal *,.cc-widget *{box-sizing:border-box;margin:0;padding:0}.cc-banner{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--cc-bg);bottom:0;box-shadow:var(--cc-shadow);font-family:var(--cc-font-family);left:0;padding:var(--cc-padding);position:fixed;right:0;transform:translateY(100%);transition:transform var(--cc-transition);z-index:9999}.cc-banner.cc-backdrop-blur{backdrop-filter:blur(var(--cc-backdrop-blur));background:hsla(0,0%,100%,.95)}.cc-banner.is-visible{transform:translateY(0)}.cc-banner__container{margin:0 auto;max-width:1200px}.cc-banner__content{margin-bottom:1rem}.cc-banner__title{color:var(--cc-text);font-size:1.125rem;font-weight:600;line-height:1.4;margin:0 0 .5rem}.cc-banner__description{color:var(--cc-text-secondary);font-size:.875rem;line-height:1.6;margin:0}.cc-banner__description a{color:var(--cc-primary);font-weight:500;text-decoration:none;transition:all .2s ease}.cc-banner__description a:hover{color:var(--cc-primary-hover);text-decoration:underline}.cc-banner__actions{display:flex;flex-wrap:wrap;gap:var(--cc-gap)}.cc-btn{align-items:center;border:none;border-radius:var(--cc-border-radius);cursor:pointer;display:inline-flex;font-family:inherit;font-size:.875rem;font-weight:500;justify-content:center;min-height:44px;min-width:44px;padding:.75rem 1.5rem;text-decoration:none;transition:all .2s ease}.cc-btn:focus-visible{outline:3px solid var(--cc-primary);outline-offset:2px}.cc-btn:disabled{cursor:not-allowed;opacity:.6}.cc-btn--accept{background:var(--cc-primary);color:#fff}.cc-btn--accept:hover:not(:disabled){background:var(--cc-primary-hover);box-shadow:0 4px 12px var(--cc-primary-glow);transform:translateY(-1px)}.cc-btn--accept:active:not(:disabled){transform:translateY(0)}.cc-btn--reject{background:var(--cc-text);color:#fff}.cc-btn--reject:hover:not(:disabled){box-shadow:0 4px 12px rgba(0,0,0,.2);opacity:.85;transform:translateY(-1px)}.cc-btn--reject:active:not(:disabled){transform:translateY(0)}.cc-btn--primary{background:var(--cc-primary);color:#fff}.cc-btn--primary:hover:not(:disabled){background:var(--cc-primary-hover);box-shadow:0 4px 12px var(--cc-primary-glow);transform:translateY(-1px)}.cc-btn--primary:active:not(:disabled){transform:translateY(0)}.cc-btn--secondary{background:#f3f4f6;color:var(--cc-text)}.cc-btn--secondary:hover:not(:disabled){background:#e5e7eb;transform:translateY(-1px)}.cc-btn--secondary:active:not(:disabled){transform:translateY(0)}.cc-btn--tertiary{background:transparent;border:1px solid var(--cc-border);color:var(--cc-text-secondary)}.cc-btn--tertiary:hover:not(:disabled){background:rgba(0,0,0,.03);color:var(--cc-text);transform:translateY(-1px)}.cc-btn--tertiary:active:not(:disabled){transform:translateY(0)}@media (min-width:768px){.cc-banner--bar .cc-banner__container{align-items:center;display:flex;gap:2rem;justify-content:space-between}.cc-banner--bar .cc-banner__content{flex:1;margin-bottom:0}.cc-banner--bar .cc-banner__actions{flex-shrink:0}}.cc-banner--top{bottom:auto;box-shadow:0 4px 24px rgba(0,0,0,.12);top:0;transform:translateY(-100%)}.cc-banner--top.is-visible{transform:translateY(0)}.cc-banner--center{border-radius:var(--cc-border-radius);bottom:auto;left:50%;max-width:600px;opacity:0;right:auto;top:50%;transform:translate(-50%,-50%) scale(.9)}.cc-banner--center.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.cc-banner--bottom-right{border-radius:var(--cc-border-radius);bottom:1.5rem;left:auto;max-width:420px;right:1.5rem;transform:translateX(calc(100% + 2rem))}.cc-banner--bottom-right.is-visible{transform:translateX(0)}.cc-banner--bottom-left{border-radius:var(--cc-border-radius);bottom:1.5rem;left:1.5rem;max-width:420px;right:auto;transform:translateX(calc(-100% - 2rem))}.cc-banner--bottom-left.is-visible{transform:translateX(0)}.cc-banner--box{border-radius:var(--cc-border-radius);max-width:420px}.cc-banner--box .cc-banner__container{display:block}.cc-banner--box .cc-banner__actions{flex-direction:column;margin-top:1rem}.cc-banner--box .cc-banner__actions .cc-btn{width:100%}.cc-banner--floating{border-radius:var(--cc-border-radius);box-shadow:0 8px 32px rgba(0,0,0,.2);max-width:380px}.cc-banner--floating .cc-banner__container{display:block}.cc-banner--floating .cc-banner__title{font-size:1rem}.cc-banner--floating .cc-banner__description{font-size:.8125rem}.cc-banner--floating .cc-banner__actions{flex-direction:column;margin-top:1rem}.cc-banner--floating .cc-banner__actions .cc-btn{font-size:.8125rem;padding:.625rem 1rem;width:100%}@media (prefers-color-scheme:dark){.cc-banner[data-theme=auto]{--cc-bg:#1a1a1a;--cc-text:#fff;--cc-text-secondary:#a0a0a0;--cc-border:#333}.cc-banner[data-theme=auto].cc-backdrop-blur{background:rgba(26,26,26,.95)}.cc-banner[data-theme=auto] .cc-btn--secondary{background:#2a2a2a;color:#fff}.cc-banner[data-theme=auto] .cc-btn--secondary:hover:not(:disabled){background:#333}.cc-banner[data-theme=auto] .cc-btn--reject{background:#fff;color:#1a1a1a}.cc-banner[data-theme=auto] .cc-btn--tertiary{border-color:#555;color:#a0a0a0}}.cc-banner[data-theme=dark]{--cc-bg:#1a1a1a;--cc-text:#fff;--cc-text-secondary:#a0a0a0;--cc-border:#333}.cc-banner[data-theme=dark].cc-backdrop-blur{background:rgba(26,26,26,.95)}.cc-banner[data-theme=dark] .cc-btn--secondary{background:#2a2a2a;color:#fff}.cc-banner[data-theme=dark] .cc-btn--secondary:hover:not(:disabled){background:#333}.cc-banner[data-theme=dark] .cc-btn--reject{background:#fff;color:#1a1a1a}.cc-banner[data-theme=dark] .cc-btn--tertiary{border-color:#555;color:#a0a0a0}@keyframes cc-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes cc-slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes cc-slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes cc-scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes cc-backdropFadeIn{0%{opacity:0}to{opacity:1}}.cc-animate-fadeIn{animation:cc-fadeIn .3s ease-out}.cc-animate-slideUp{animation:cc-slideUp .4s cubic-bezier(.4,0,.2,1)}.cc-animate-slideDown{animation:cc-slideDown .4s cubic-bezier(.4,0,.2,1)}.cc-animate-scaleIn{animation:cc-scaleIn .3s cubic-bezier(.4,0,.2,1)}@media (prefers-reduced-motion:reduce){.cc-banner{transition:none}.cc-animate-fadeIn,.cc-animate-scaleIn,.cc-animate-slideDown,.cc-animate-slideUp{animation:none}.cc-btn{transition:none}}.cc-modal{align-items:center;bottom:0;display:flex;justify-content:center;left:0;opacity:0;padding:1rem;pointer-events:none;position:fixed;right:0;top:0;transition:opacity var(--cc-transition);z-index:10000}.cc-modal.is-visible{opacity:1;pointer-events:all}.cc-modal__overlay{background:var(--cc-overlay);bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0}.cc-modal__content{background:var(--cc-bg);border-radius:var(--cc-border-radius);box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column;max-height:90vh;max-width:600px;overflow:hidden;position:relative;transform:scale(.9);transition:transform var(--cc-transition);width:100%}.cc-modal.is-visible .cc-modal__content{transform:scale(1)}.cc-modal__header{align-items:center;background:linear-gradient(135deg,var(--cc-primary) 0,var(--cc-primary-hover) 100%);box-shadow:0 2px 8px rgba(0,0,0,.1);display:flex;flex-shrink:0;justify-content:space-between;padding:2rem 1.5rem}.cc-modal__header h2{color:#fff;font-size:1.375rem;font-weight:700;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.1)}.cc-modal__close{align-items:center;background:hsla(0,0%,100%,.2);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;justify-content:center;padding:.5rem;transition:all .2s ease}.cc-modal__close:hover{background:hsla(0,0%,100%,.3);transform:scale(1.05)}.cc-modal__close:focus-visible{outline:2px solid hsla(0,0%,100%,.5);outline-offset:2px}.cc-modal__body{flex:1;overflow-y:auto;padding:1.5rem}.cc-category{border-bottom:1px solid var(--cc-border);padding:1rem 0}.cc-category:last-child{border-bottom:none}.cc-category__header{align-items:flex-start;display:flex;gap:1rem}.cc-category__info{flex:1}.cc-category__info h3{color:var(--cc-text);font-size:1rem;font-weight:600;margin:0 0 .25rem}.cc-category__info p{color:var(--cc-text-secondary);font-size:.875rem;line-height:1.5;margin:0}.cc-toggle{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cc-toggle input{height:0;opacity:0;position:absolute;width:0}.cc-toggle__slider{background:#d1d5db;border-radius:12px;height:24px;position:relative;transition:background-color .2s ease;width:48px}.cc-toggle__slider:before{background:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);content:"";height:20px;left:2px;position:absolute;top:2px;transition:transform .2s ease;width:20px}.cc-toggle input:checked+.cc-toggle__slider{background:var(--cc-primary)}.cc-toggle input:checked+.cc-toggle__slider:before{transform:translateX(24px)}.cc-toggle input:focus-visible+.cc-toggle__slider{outline:2px solid var(--cc-primary);outline-offset:2px}.cc-toggle--disabled{cursor:not-allowed;opacity:.6}.cc-toggle--disabled input:checked+.cc-toggle__slider{background:#9ca3af}.cc-modal__footer{align-items:center;border-top:1px solid var(--cc-border);display:flex;flex-shrink:0;gap:var(--cc-gap);justify-content:space-between;padding:1.5rem}.cc-modal__footer-links{align-items:center;display:flex;gap:.5rem}.cc-modal__footer-actions{display:flex;gap:var(--cc-gap)}.cc-privacy-link{align-items:center;color:var(--cc-text-secondary);display:inline-flex;font-size:.875rem;gap:.25rem;text-decoration:none;transition:color .2s ease}.cc-privacy-link:hover{color:var(--cc-primary);text-decoration:underline}@media (prefers-color-scheme:dark){.cc-modal[data-theme=auto] .cc-modal__content{background:#1a1a1a}.cc-modal[data-theme=auto] .cc-modal__close:hover{background:hsla(0,0%,100%,.1)}}.cc-modal[data-theme=dark] .cc-modal__content{background:#1a1a1a}.cc-modal[data-theme=dark] .cc-modal__close:hover{background:hsla(0,0%,100%,.1)}.cc-modal--bottom-right{align-items:flex-end;justify-content:flex-end;padding:1.5rem}.cc-modal--bottom-right .cc-modal__content{max-width:450px;transform:translateX(100%)}.cc-modal--bottom-right.is-visible .cc-modal__content{transform:translateX(0)}.cc-modal--bottom-left{align-items:flex-end;justify-content:flex-start;padding:1.5rem}.cc-modal--bottom-left .cc-modal__content{max-width:450px;transform:translateX(-100%)}.cc-modal--bottom-left.is-visible .cc-modal__content{transform:translateX(0)}.cc-modal--top-right{align-items:flex-start;justify-content:flex-end;padding:1.5rem}.cc-modal--top-right .cc-modal__content{max-width:450px;transform:translateX(100%)}.cc-modal--top-right.is-visible .cc-modal__content{transform:translateX(0)}.cc-modal--top-left{align-items:flex-start;justify-content:flex-start;padding:1.5rem}.cc-modal--top-left .cc-modal__content{max-width:450px;transform:translateX(-100%)}.cc-modal--top-left.is-visible .cc-modal__content{transform:translateX(0)}@media (max-width:640px){.cc-modal{align-items:flex-end;padding:0}.cc-modal__content{border-radius:16px 16px 0 0;max-height:85vh;max-width:100%;transform:translateY(100%);width:100%}.cc-modal.is-visible .cc-modal__content{transform:translateY(0)}.cc-modal__body{padding:1rem 1.25rem}.cc-modal__footer{align-items:stretch;flex-direction:column;padding:1rem 1.25rem 1.5rem}.cc-modal__footer-links{justify-content:center;margin-top:.75rem;order:2}.cc-modal__footer-actions{flex-direction:column;order:1;width:100%}.cc-modal__footer .cc-btn{width:100%}}.cc-widget{align-items:center;background:var(--cc-primary);border-radius:50px;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#fff;cursor:pointer;display:flex;font-family:var(--cc-font-family);gap:.5rem;min-height:44px;opacity:0;padding:.75rem 1rem;position:fixed;transform:scale(0);transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:9998}.cc-widget.is-visible{opacity:1;transform:scale(1)}.cc-widget:hover{box-shadow:0 6px 20px var(--cc-primary-glow);transform:scale(1.05)}.cc-widget:active{transform:scale(.98)}.cc-widget:focus-visible{outline:3px solid #fff;outline-offset:2px}.cc-widget__icon{flex-shrink:0;height:24px;width:24px}.cc-widget__text{font-size:.875rem;font-weight:500;white-space:nowrap}.cc-widget--bottom-right{bottom:1.5rem;right:1.5rem}.cc-widget--bottom-left{bottom:1.5rem;left:1.5rem}.cc-widget--top-right{right:1.5rem;top:1.5rem}.cc-widget--top-left{left:1.5rem;top:1.5rem}.cc-widget--compact{border-radius:50%;height:48px;justify-content:center;padding:.75rem;width:48px}.cc-widget--compact .cc-widget__text{display:none}@media (max-width:640px){.cc-widget--full .cc-widget__text{display:none}.cc-widget--full{border-radius:50%;height:56px;justify-content:center;padding:.75rem;width:56px}}@keyframes cc-widget-bounce{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}.cc-widget.is-visible{animation:cc-widget-bounce .4s cubic-bezier(.4,0,.2,1)}@media (prefers-reduced-motion:reduce){.cc-widget{transition:none}.cc-widget.is-visible{animation:none}.cc-widget:hover{transform:none}}
+.cc-banner,.cc-modal,.cc-widget{--cc-primary:#1a1a1a;--cc-primary-hover:#333;--cc-primary-glow:color-mix(in srgb,var(--cc-primary) 30%,transparent);--cc-bg:#fff;--cc-text:#1a1a1a;--cc-text-secondary:#666;--cc-border:#e5e7eb;--cc-overlay:rgba(0,0,0,.4);--cc-padding:1.125rem;--cc-gap:0.5rem;--cc-border-radius:12px;--cc-shadow:0 -4px 24px rgba(0,0,0,.12);--cc-transition:0.3s cubic-bezier(0.4,0,0.2,1);--cc-backdrop-blur:10px;--cc-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}.cc-banner *,.cc-modal *,.cc-widget *{box-sizing:border-box;margin:0;padding:0}.cc-banner{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--cc-bg);bottom:0;box-shadow:var(--cc-shadow);font-family:var(--cc-font-family);left:0;padding:var(--cc-padding);position:fixed;right:0;transform:translateY(100%);transition:transform var(--cc-transition);z-index:9999}.cc-banner.cc-backdrop-blur{backdrop-filter:blur(var(--cc-backdrop-blur));background:hsla(0,0%,100%,.95)}.cc-banner.is-visible{transform:translateY(0)}.cc-banner__container{margin:0 auto;max-width:1200px}.cc-banner__content{margin-bottom:1rem}.cc-banner__title{color:var(--cc-text);font-size:.9375rem;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:0 0 .375rem}.cc-banner__description{color:var(--cc-text-secondary);font-size:.8125rem;line-height:1.5;margin:0}.cc-banner__description a{color:var(--cc-primary);font-weight:500;text-decoration:none;transition:all .2s ease}.cc-banner__description a:hover{color:var(--cc-primary-hover);text-decoration:underline}.cc-banner__actions{display:flex;flex-wrap:wrap;gap:var(--cc-gap)}.cc-btn{align-items:center;border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-family:inherit;font-size:.8125rem;font-weight:500;justify-content:center;letter-spacing:-.01em;min-height:36px;min-width:36px;padding:.5rem 1.125rem;text-decoration:none;transition:all .2s ease}.cc-btn:focus-visible{outline:3px solid var(--cc-primary);outline-offset:2px}.cc-btn:disabled{cursor:not-allowed;opacity:.6}.cc-btn--accept{background:var(--cc-primary);color:#fff}.cc-btn--accept:hover:not(:disabled){background:var(--cc-primary-hover);box-shadow:0 4px 12px var(--cc-primary-glow);transform:translateY(-1px)}.cc-btn--accept:active:not(:disabled){transform:translateY(0)}.cc-btn--ghost{background:transparent;color:var(--cc-text-secondary);font-size:.75rem;padding:.5rem .75rem}.cc-btn--ghost:hover:not(:disabled){color:var(--cc-text);text-decoration:underline}.cc-btn--ghost:active:not(:disabled){transform:translateY(0)}.cc-btn--primary{background:var(--cc-primary);color:#fff}.cc-btn--primary:hover:not(:disabled){background:var(--cc-primary-hover);box-shadow:0 4px 12px var(--cc-primary-glow);transform:translateY(-1px)}.cc-btn--primary:active:not(:disabled){transform:translateY(0)}.cc-btn--secondary{background:#f3f4f6;color:var(--cc-text)}.cc-btn--secondary:hover:not(:disabled){background:#e5e7eb;transform:translateY(-1px)}.cc-btn--secondary:active:not(:disabled){transform:translateY(0)}.cc-btn--tertiary{background:transparent;border:1px solid var(--cc-border);color:var(--cc-text-secondary)}.cc-btn--tertiary:hover:not(:disabled){background:rgba(0,0,0,.03);color:var(--cc-text);transform:translateY(-1px)}.cc-btn--tertiary:active:not(:disabled){transform:translateY(0)}@media (min-width:768px){.cc-banner--bar .cc-banner__container{align-items:center;display:flex;gap:2rem;justify-content:space-between}.cc-banner--bar .cc-banner__content{flex:1;margin-bottom:0}.cc-banner--bar .cc-banner__actions{flex-shrink:0}}.cc-banner--top{bottom:auto;box-shadow:0 4px 24px rgba(0,0,0,.12);top:0;transform:translateY(-100%)}.cc-banner--top.is-visible{transform:translateY(0)}.cc-banner--center{border-radius:var(--cc-border-radius);bottom:auto;left:50%;max-width:600px;opacity:0;right:auto;top:50%;transform:translate(-50%,-50%) scale(.9)}.cc-banner--center.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.cc-banner--bottom-right{border-radius:var(--cc-border-radius);bottom:1.5rem;left:auto;max-width:420px;right:1.5rem;transform:translateX(calc(100% + 2rem))}.cc-banner--bottom-right.is-visible{transform:translateX(0)}.cc-banner--bottom-left{border-radius:var(--cc-border-radius);bottom:1.5rem;left:1.5rem;max-width:420px;right:auto;transform:translateX(calc(-100% - 2rem))}.cc-banner--bottom-left.is-visible{transform:translateX(0)}.cc-banner--box{border-radius:var(--cc-border-radius);max-width:420px}.cc-banner--box .cc-banner__container{display:block}.cc-banner--box .cc-banner__actions{flex-direction:column;margin-top:1rem}.cc-banner--box .cc-banner__actions .cc-btn{width:100%}.cc-banner--floating{border-radius:var(--cc-border-radius);box-shadow:0 8px 32px rgba(0,0,0,.2);max-width:380px}.cc-banner--floating .cc-banner__container{display:block}.cc-banner--floating .cc-banner__title{font-size:1rem}.cc-banner--floating .cc-banner__description{font-size:.8125rem}.cc-banner--floating .cc-banner__actions{flex-direction:column;margin-top:1rem}.cc-banner--floating .cc-banner__actions .cc-btn{font-size:.8125rem;padding:.625rem 1rem;width:100%}@media (prefers-color-scheme:dark){.cc-banner[data-theme=auto]{--cc-bg:#1a1a1a;--cc-text:#fff;--cc-text-secondary:#a0a0a0;--cc-border:#333}.cc-banner[data-theme=auto].cc-backdrop-blur{background:rgba(26,26,26,.95)}.cc-banner[data-theme=auto] .cc-btn--secondary{background:#2a2a2a;color:#fff}.cc-banner[data-theme=auto] .cc-btn--secondary:hover:not(:disabled){background:#333}.cc-banner[data-theme=auto] .cc-btn--reject{background:#fff;color:#1a1a1a}.cc-banner[data-theme=auto] .cc-btn--tertiary{border-color:#555;color:#a0a0a0}}.cc-banner[data-theme=dark]{--cc-bg:#1a1a1a;--cc-text:#fff;--cc-text-secondary:#a0a0a0;--cc-border:#333}.cc-banner[data-theme=dark].cc-backdrop-blur{background:rgba(26,26,26,.95)}.cc-banner[data-theme=dark] .cc-btn--secondary{background:#2a2a2a;color:#fff}.cc-banner[data-theme=dark] .cc-btn--secondary:hover:not(:disabled){background:#333}.cc-banner[data-theme=dark] .cc-btn--reject{background:#fff;color:#1a1a1a}.cc-banner[data-theme=dark] .cc-btn--tertiary{border-color:#555;color:#a0a0a0}@keyframes cc-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes cc-slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes cc-slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes cc-scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes cc-backdropFadeIn{0%{opacity:0}to{opacity:1}}.cc-animate-fadeIn{animation:cc-fadeIn .3s ease-out}.cc-animate-slideUp{animation:cc-slideUp .4s cubic-bezier(.4,0,.2,1)}.cc-animate-slideDown{animation:cc-slideDown .4s cubic-bezier(.4,0,.2,1)}.cc-animate-scaleIn{animation:cc-scaleIn .3s cubic-bezier(.4,0,.2,1)}@media (prefers-reduced-motion:reduce){.cc-banner{transition:none}.cc-animate-fadeIn,.cc-animate-scaleIn,.cc-animate-slideDown,.cc-animate-slideUp{animation:none}.cc-btn{transition:none}}.cc-modal{align-items:center;bottom:0;display:flex;justify-content:center;left:0;opacity:0;padding:1rem;pointer-events:none;position:fixed;right:0;top:0;transition:opacity var(--cc-transition);z-index:10000}.cc-modal.is-visible{opacity:1;pointer-events:all}.cc-modal__overlay{background:var(--cc-overlay);bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0}.cc-modal__content{background:var(--cc-bg);border-radius:var(--cc-border-radius);box-shadow:0 16px 48px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.08);display:flex;flex-direction:column;max-height:90vh;max-width:480px;overflow:hidden;position:relative;transform:scale(.9);transition:transform var(--cc-transition);width:100%}.cc-modal.is-visible .cc-modal__content{transform:scale(1)}.cc-modal__header{align-items:center;background:linear-gradient(135deg,var(--cc-primary) 0,var(--cc-primary-hover) 100%);display:flex;flex-shrink:0;justify-content:space-between;padding:1.125rem 1.25rem}.cc-modal__header h2{color:#fff;font-size:.95rem;font-weight:600;letter-spacing:-.01em;margin:0}.cc-modal__close{align-items:center;background:hsla(0,0%,100%,.15);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;justify-content:center;padding:.375rem;transition:all .2s ease}.cc-modal__close svg{height:18px;width:18px}.cc-modal__close:hover{background:hsla(0,0%,100%,.3);transform:scale(1.05)}.cc-modal__close:focus-visible{outline:2px solid hsla(0,0%,100%,.5);outline-offset:2px}.cc-modal__body{flex:1;overflow-y:auto;padding:1rem 1.25rem}.cc-category{border-bottom:1px solid var(--cc-border);padding:.75rem 0}.cc-category:last-child{border-bottom:none}.cc-category__header{align-items:center;display:flex;gap:.75rem}.cc-category__info{flex:1}.cc-category__info h3{color:var(--cc-text);font-size:.8125rem;font-weight:600;letter-spacing:-.01em;margin:0 0 .125rem}.cc-category__info p{color:var(--cc-text-secondary);font-size:.75rem;line-height:1.4;margin:0}.cc-toggle{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cc-toggle input{height:0;opacity:0;position:absolute;width:0}.cc-toggle__slider{background:#d1d5db;border-radius:10px;height:20px;position:relative;transition:background-color .2s ease;width:36px}.cc-toggle__slider:before{background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.15);content:"";height:16px;left:2px;position:absolute;top:2px;transition:transform .2s ease;width:16px}.cc-toggle input:checked+.cc-toggle__slider{background:var(--cc-primary)}.cc-toggle input:checked+.cc-toggle__slider:before{transform:translateX(16px)}.cc-toggle input:focus-visible+.cc-toggle__slider{outline:2px solid var(--cc-primary);outline-offset:2px}.cc-toggle--disabled{cursor:not-allowed;opacity:.6}.cc-toggle--disabled input:checked+.cc-toggle__slider{background:#9ca3af}.cc-modal__footer{align-items:center;border-top:1px solid var(--cc-border);display:flex;flex-shrink:0;gap:var(--cc-gap);justify-content:space-between;padding:1rem 1.25rem}.cc-modal__footer-links{align-items:center;display:flex;gap:.5rem}.cc-modal__footer-actions{display:flex;gap:var(--cc-gap)}.cc-privacy-link{align-items:center;color:var(--cc-text-secondary);display:inline-flex;font-size:.875rem;gap:.25rem;text-decoration:none;transition:color .2s ease}.cc-privacy-link:hover{color:var(--cc-primary);text-decoration:underline}@media (prefers-color-scheme:dark){.cc-modal[data-theme=auto] .cc-modal__content{background:#1a1a1a}.cc-modal[data-theme=auto] .cc-category__info h3{color:#fff}.cc-modal[data-theme=auto] .cc-category__info p{color:#a0a0a0}.cc-modal[data-theme=auto] .cc-category,.cc-modal[data-theme=auto] .cc-modal__footer{border-color:#333}.cc-modal[data-theme=auto] .cc-toggle__slider{background:#444}.cc-modal[data-theme=auto] .cc-btn--secondary{background:#2a2a2a;color:#fff}.cc-modal[data-theme=auto] .cc-btn--secondary:hover:not(:disabled){background:#333}.cc-modal[data-theme=auto] .cc-modal__close:hover{background:hsla(0,0%,100%,.1)}}.cc-modal[data-theme=dark] .cc-modal__content{background:#1a1a1a}.cc-modal[data-theme=dark] .cc-category__info h3{color:#fff}.cc-modal[data-theme=dark] .cc-category__info p{color:#a0a0a0}.cc-modal[data-theme=dark] .cc-category,.cc-modal[data-theme=dark] .cc-modal__footer{border-color:#333}.cc-modal[data-theme=dark] .cc-toggle__slider{background:#444}.cc-modal[data-theme=dark] .cc-btn--secondary{background:#2a2a2a;color:#fff}.cc-modal[data-theme=dark] .cc-btn--secondary:hover:not(:disabled){background:#333}.cc-modal[data-theme=dark] .cc-modal__close:hover{background:hsla(0,0%,100%,.1)}.cc-modal--bottom-right{align-items:flex-end;justify-content:flex-end;padding:1.5rem}.cc-modal--bottom-right .cc-modal__content{max-width:450px;transform:translateX(100%)}.cc-modal--bottom-right.is-visible .cc-modal__content{transform:translateX(0)}.cc-modal--bottom-left{align-items:flex-end;justify-content:flex-start;padding:1.5rem}.cc-modal--bottom-left .cc-modal__content{max-width:450px;transform:translateX(-100%)}.cc-modal--bottom-left.is-visible .cc-modal__content{transform:translateX(0)}.cc-modal--top-right{align-items:flex-start;justify-content:flex-end;padding:1.5rem}.cc-modal--top-right .cc-modal__content{max-width:450px;transform:translateX(100%)}.cc-modal--top-right.is-visible .cc-modal__content{transform:translateX(0)}.cc-modal--top-left{align-items:flex-start;justify-content:flex-start;padding:1.5rem}.cc-modal--top-left .cc-modal__content{max-width:450px;transform:translateX(-100%)}.cc-modal--top-left.is-visible .cc-modal__content{transform:translateX(0)}@media (max-width:640px){.cc-modal{align-items:flex-end;padding:0}.cc-modal__content{border-radius:16px 16px 0 0;max-height:85vh;max-width:100%;transform:translateY(100%);width:100%}.cc-modal.is-visible .cc-modal__content{transform:translateY(0)}.cc-modal__body{padding:1rem 1.25rem}.cc-modal__footer{align-items:stretch;flex-direction:column;padding:1rem 1.25rem 1.5rem}.cc-modal__footer-links{justify-content:center;margin-top:.75rem;order:2}.cc-modal__footer-actions{flex-direction:column;order:1;width:100%}.cc-modal__footer .cc-btn{width:100%}}.cc-widget{align-items:center;background:#fff;border:1.5px solid var(--cc-primary);border-radius:50px;box-shadow:0 2px 8px rgba(0,0,0,.08);color:var(--cc-primary);cursor:pointer;display:flex;font-family:var(--cc-font-family);gap:.5rem;min-height:40px;opacity:0;padding:.625rem .875rem;position:fixed;transform:scale(0);transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:9998}.cc-widget.is-visible{opacity:1;transform:scale(1)}.cc-widget:hover{background:var(--cc-primary);box-shadow:0 4px 16px rgba(0,0,0,.12);color:#fff;transform:scale(1.05)}.cc-widget:active{transform:scale(.98)}.cc-widget:focus-visible{outline:3px solid #fff;outline-offset:2px}.cc-widget__icon{flex-shrink:0;height:20px;width:20px}.cc-widget__text{color:inherit;font-size:.8125rem;font-weight:500;white-space:nowrap}.cc-widget--bottom-right{bottom:1.5rem;right:1.5rem}.cc-widget--bottom-left{bottom:1.5rem;left:1.5rem}.cc-widget--top-right{right:1.5rem;top:1.5rem}.cc-widget--top-left{left:1.5rem;top:1.5rem}.cc-widget--compact{border-radius:50%;height:42px;justify-content:center;padding:.625rem;width:42px}.cc-widget--compact .cc-widget__text{display:none}@media (max-width:640px){.cc-widget--full .cc-widget__text{display:none}.cc-widget--full{border-radius:50%;height:44px;justify-content:center;padding:.625rem;width:44px}}@keyframes cc-widget-bounce{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}.cc-widget.is-visible{animation:cc-widget-bounce .4s cubic-bezier(.4,0,.2,1)}.cc-widget[data-theme=dark]{background:#1a1a1a;border-color:var(--cc-primary);color:var(--cc-primary)}.cc-widget[data-theme=dark]:hover{background:var(--cc-primary);color:#fff}@media (prefers-color-scheme:dark){.cc-widget[data-theme=auto]{background:#1a1a1a;border-color:var(--cc-primary);color:var(--cc-primary)}.cc-widget[data-theme=auto]:hover{background:var(--cc-primary);color:#fff}}@media (prefers-reduced-motion:reduce){.cc-widget{transition:none}.cc-widget.is-visible{animation:none}.cc-widget:hover{transform:none}}

package/dist/cookiecraft.esm.js

@@ -512,6 +512,35 @@ function sanitizeColor(color) {
     return '';
 }
 
+/**
+ * Adjust a hex color brightness by a percentage
+ * Negative = darker, positive = lighter
+ */
+function adjustColorBrightness(color, percent) {
+    const hex = color.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    const adjust = (value) => {
+        const adjusted = value + (value * percent / 100);
+        return Math.max(0, Math.min(255, Math.round(adjusted)));
+    };
+    const toHex = (value) => {
+        const h = value.toString(16);
+        return h.length === 1 ? '0' + h : h;
+    };
+    return `#${toHex(adjust(r))}${toHex(adjust(g))}${toHex(adjust(b))}`;
+}
+/**
+ * Build inline CSS custom properties for a primary color
+ */
+function buildColorStyle(safeColor) {
+    if (!safeColor)
+        return '';
+    const hover = adjustColorBrightness(safeColor, -15);
+    return `--cc-primary: ${safeColor}; --cc-primary-hover: ${hover};`;
+}
+
 /**
  * Banner - Cookie consent banner component
  */
@@ -525,24 +554,28 @@ class Banner {
      * Show the banner
      */
     show() {
-        var _a;
-        if (!this.element) {
-            this.element = this.createDOM();
-            document.body.appendChild(this.element);
-            this.attachListeners();
-        }
-        // Trigger animation
-        requestAnimationFrame(() => {
-            var _a;
-            (_a = this.element) === null || _a === void 0 ? void 0 : _a.classList.add('is-visible');
-        });
-        // Focus first button for accessibility
-        const firstButton = (_a = this.element) === null || _a === void 0 ? void 0 : _a.querySelector('button');
-        firstButton === null || firstButton === void 0 ? void 0 : firstButton.focus();
-        // Disable page interaction if configured
-        if (this.config.disablePageInteraction) {
-            document.body.style.overflow = 'hidden';
+        const append = () => {
+            if (!this.element) {
+                this.element = this.createDOM();
+                document.body.appendChild(this.element);
+                this.attachListeners();
+            }
+            // Trigger animation
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.element) === null || _a === void 0 ? void 0 : _a.classList.add('is-visible');
+            });
+            // Disable page interaction if configured
+            if (this.config.disablePageInteraction) {
+                document.body.style.overflow = 'hidden';
+            }
+        };
+        // Wait for body if not yet available
+        if (!document.body) {
+            document.addEventListener('DOMContentLoaded', append);
+            return;
         }
+        append();
     }
     /**
      * Hide the banner
@@ -577,7 +610,7 @@ class Banner {
         const layout = this.config.layout || 'bar';
         const backdropBlur = this.config.backdropBlur !== false;
         const safeColor = this.config.primaryColor ? sanitizeColor(this.config.primaryColor) : '';
-        const colorStyle = safeColor ? `--cc-primary: ${safeColor};` : '';
+        const colorStyle = buildColorStyle(safeColor);
         const template = `
       <div
         class="cc-banner cc-banner--${escapeHtml(position)} cc-banner--${escapeHtml(layout)} ${backdropBlur ? 'cc-backdrop-blur' : ''}"
@@ -597,6 +630,13 @@ class Banner {
             </p>
           </div>
           <div class="cc-banner__actions">
+            <button
+              class="cc-btn cc-btn--ghost"
+              data-action="reject"
+              aria-label="${escapeHtml(translations.rejectAll || 'Uniquement essentiels')}"
+            >
+              ${escapeHtml(translations.rejectAll || 'Uniquement essentiels')}
+            </button>
             <button
               class="cc-btn cc-btn--tertiary"
               data-action="customize"
@@ -604,13 +644,6 @@ class Banner {
             >
               ${escapeHtml(translations.customize || 'Personnaliser')}
             </button>
-            <button
-              class="cc-btn cc-btn--reject"
-              data-action="reject"
-              aria-label="${escapeHtml(translations.rejectAll || 'Tout refuser')}"
-            >
-              ${escapeHtml(translations.rejectAll || 'Tout refuser')}
-            </button>
             <button
               class="cc-btn cc-btn--accept"
               data-action="accept"
@@ -731,15 +764,22 @@ class PreferenceCenter {
      * Show the preference center
      */
     show() {
-        if (!this.element) {
-            this.element = this.createDOM();
-            document.body.appendChild(this.element);
-            this.attachListeners();
+        const append = () => {
+            if (!this.element) {
+                this.element = this.createDOM();
+                document.body.appendChild(this.element);
+                this.attachListeners();
+            }
+            this.element.classList.add('is-visible');
+            this.trapFocus();
+            // Prevent body scroll
+            document.body.style.overflow = 'hidden';
+        };
+        if (!document.body) {
+            document.addEventListener('DOMContentLoaded', append);
+            return;
         }
-        this.element.classList.add('is-visible');
-        this.trapFocus();
-        // Prevent body scroll
-        document.body.style.overflow = 'hidden';
+        append();
     }
     /**
      * Hide the preference center
@@ -769,9 +809,7 @@ class PreferenceCenter {
         const theme = this.config.theme || 'light';
         const position = this.config.preferencesPosition || 'center';
         const safeColor = this.config.primaryColor ? sanitizeColor(this.config.primaryColor) : '';
-        const colorStyle = safeColor
-            ? `--cc-primary: ${safeColor}; --cc-primary-hover: ${this.adjustColorBrightness(safeColor, -15)};`
-            : '';
+        const colorStyle = buildColorStyle(safeColor);
         const privacyLinkHtml = translations.privacyPolicyUrl
             ? (() => {
                 const safeUrl = sanitizeUrl(translations.privacyPolicyUrl);
@@ -969,28 +1007,6 @@ class PreferenceCenter {
             }
         });
     }
-    /**
-     * Adjust color brightness for hover effect
-     */
-    adjustColorBrightness(color, percent) {
-        // Remove # if present
-        const hex = color.replace('#', '');
-        // Convert to RGB
-        const r = parseInt(hex.substring(0, 2), 16);
-        const g = parseInt(hex.substring(2, 4), 16);
-        const b = parseInt(hex.substring(4, 6), 16);
-        // Adjust brightness
-        const adjust = (value) => {
-            const adjusted = value + (value * percent / 100);
-            return Math.max(0, Math.min(255, Math.round(adjusted)));
-        };
-        // Convert back to hex
-        const toHex = (value) => {
-            const hex = value.toString(16);
-            return hex.length === 1 ? '0' + hex : hex;
-        };
-        return `#${toHex(adjust(r))}${toHex(adjust(g))}${toHex(adjust(b))}`;
-    }
 }
 
 /**
@@ -1008,17 +1024,24 @@ class FloatingWidget {
      * Show the floating widget
      */
     show() {
-        if (!this.element) {
-            this.element = this.createDOM();
-            document.body.appendChild(this.element);
-            this.attachListeners();
+        const append = () => {
+            if (!this.element) {
+                this.element = this.createDOM();
+                document.body.appendChild(this.element);
+                this.attachListeners();
+            }
+            // Delay to allow for transition
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.element) === null || _a === void 0 ? void 0 : _a.classList.add('is-visible');
+                this.isVisible = true;
+            });
+        };
+        if (!document.body) {
+            document.addEventListener('DOMContentLoaded', append);
+            return;
         }
-        // Delay to allow for transition
-        requestAnimationFrame(() => {
-            var _a;
-            (_a = this.element) === null || _a === void 0 ? void 0 : _a.classList.add('is-visible');
-            this.isVisible = true;
-        });
+        append();
     }
     /**
      * Hide the floating widget
@@ -1053,7 +1076,7 @@ class FloatingWidget {
         const widgetPosition = this.config.widgetPosition || 'bottom-right';
         const widgetStyle = this.config.widgetStyle || 'full';
         const safeColor = this.config.primaryColor ? sanitizeColor(this.config.primaryColor) : '';
-        const colorStyle = safeColor ? `--cc-primary: ${safeColor};` : '';
+        const colorStyle = buildColorStyle(safeColor);
         const template = `
       <div
         class="cc-widget cc-widget--${escapeHtml(widgetPosition)} cc-widget--${escapeHtml(widgetStyle)}"
@@ -1063,13 +1086,17 @@ class FloatingWidget {
         data-theme="${escapeHtml(theme)}"
         style="${colorStyle}"
       >
-        <svg class="cc-widget__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
-          <circle cx="12" cy="12" r="2"/>
-          <circle cx="7" cy="7" r="1.5"/>
-          <circle cx="17" cy="7" r="1.5"/>
-          <circle cx="7" cy="17" r="1.5"/>
-          <circle cx="17" cy="17" r="1.5"/>
+        <svg class="cc-widget__icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <path id="cc-ck-a" d="M6,9 C5.448,9 5,8.552 5,8 C5,7.448 5.448,7 6,7 C6.552,7 7,7.448 7,8 C7,8.552 6.552,9 6,9 Z M0.5,5 C0.776,5 1,5.224 1,5.5 C1,5.776 0.776,6 0.5,6 C0.224,6 0,5.776 0,5.5 C0,5.224 0.224,5 0.5,5 Z M1.5,0 C1.776,0 2,0.224 2,0.5 C2,0.776 1.776,1 1.5,1 C1.224,1 1,0.776 1,0.5 C1,0.224 1.224,0 1.5,0 Z"/>
+            <path id="cc-ck-c" d="M16.899,14.984 C14.727,14.802 12.991,13.088 12.773,10.927 C10.117,10.808 8,8.617 8,5.932 C8,4.837 8.352,3.824 8.949,3 C5.027,3.515 2,6.87 2,10.932 C2,15.35 5.582,18.932 10,18.932 C12.939,18.932 15.509,17.346 16.899,14.984 Z M18.623,15.998 C16.839,19.029 13.583,20.932 10,20.932 C4.477,20.932 0,16.454 0,10.932 C0,5.897 3.74,1.666 8.689,1.017 C10.429,0.789 11.599,2.753 10.568,4.174 C10.2,4.682 10,5.289 10,5.932 C10,7.537 11.265,8.857 12.862,8.929 C13.854,8.973 14.663,9.738 14.763,10.726 C14.884,11.932 15.857,12.889 17.067,12.991 C18.535,13.114 19.37,14.729 18.623,15.998 Z M10,18 C8.343,18 7,16.657 7,15 C7,13.343 8.343,12 10,12 C11.657,12 13,13.343 13,15 C13,16.657 11.657,18 10,18 Z M10,16 C10.552,16 11,15.552 11,15 C11,14.448 10.552,14 10,14 C9.448,14 9,14.448 9,15 C9,15.552 9.448,16 10,16 Z M4.5,14 C3.672,14 3,13.328 3,12.5 C3,11.672 3.672,11 4.5,11 C5.328,11 6,11.672 6,12.5 C6,13.328 5.328,14 4.5,14 Z M4.5,12 C4.224,12 4,12.224 4,12.5 C4,12.776 4.224,13 4.5,13 C4.776,13 5,12.776 5,12.5 C5,12.224 4.776,12 4.5,12 Z M5.5,9 C4.672,9 4,8.328 4,7.5 C4,6.672 4.672,6 5.5,6 C6.328,6 7,6.672 7,7.5 C7,8.328 6.328,9 5.5,9 Z M5.5,7 C5.224,7 5,7.224 5,7.5 C5,7.776 5.224,8 5.5,8 C5.776,8 6,7.776 6,7.5 C6,7.224 5.776,7 5.5,7 Z"/>
+          </defs>
+          <g fill="currentColor" fill-rule="evenodd" transform="translate(3 1)">
+            <g transform="translate(4 7)">
+              <use href="#cc-ck-a"/>
+            </g>
+            <use href="#cc-ck-c"/>
+          </g>
         </svg>
         <span class="cc-widget__text">
           ${escapeHtml(translations.cookies || 'Cookies')}
@@ -1500,7 +1527,7 @@ class CookieConsent {
      * Validate and set default config values
      */
     validateConfig(config) {
-        return Object.assign(Object.assign({}, config), { mode: config.mode || 'opt-in', autoShow: config.autoShow !== undefined ? config.autoShow : true, revision: config.revision || 1, gtmConsentMode: config.gtmConsentMode || false, disablePageInteraction: config.disablePageInteraction || false, theme: config.theme || 'light', position: config.position || 'bottom', layout: config.layout || 'bar', backdropBlur: config.backdropBlur !== false, animationStyle: config.animationStyle || 'smooth', preferencesPosition: config.preferencesPosition || 'center', showWidget: config.showWidget !== undefined ? config.showWidget : true, widgetPosition: config.widgetPosition || 'bottom-right', widgetStyle: config.widgetStyle || 'full' });
+        return Object.assign(Object.assign({}, config), { mode: config.mode || 'opt-in', autoShow: config.autoShow !== undefined ? config.autoShow : true, revision: config.revision || 1, gtmConsentMode: config.gtmConsentMode !== undefined ? config.gtmConsentMode : true, disablePageInteraction: config.disablePageInteraction || false, theme: config.theme || 'light', position: config.position || 'bottom-left', layout: config.layout || 'box', backdropBlur: config.backdropBlur !== false, animationStyle: config.animationStyle || 'smooth', preferencesPosition: config.preferencesPosition || 'center', showWidget: config.showWidget !== undefined ? config.showWidget : true, widgetPosition: config.widgetPosition || 'bottom-left', widgetStyle: config.widgetStyle || 'compact' });
     }
 }