/** * Path:/boost-privacy/public/css/boost-privacy-core.css * * Core structural CSS for cookie consent bar and privacy elements * * Contains only structural, layout, and responsive styles. * Theme-specific colors and styling are loaded separately. * ~2.5KB minified - always loaded regardless of theme. * UPDATED:Mobile fixes for modal header spacing, category borders, and button ordering */ /* ========================================================================== Base Structure ========================================================================== */ .boost-cookie-bar, .boost-cookie-modal{box-sizing:border-box;line-height:1.4;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:14px;z-index:999999}.boost-cookie-bar *, .boost-cookie-modal *{box-sizing:inherit}.boost-cookie-bar{position:fixed;left:0;right:0;line-height:1.5;transform:translateY(100%);transition:transform 0.3s ease-in-out, opacity 0.3s ease-in-out;opacity:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1)}.boost-cookie-bar.boost-cookie-bar-visible{transform:translateY(0);opacity:1}.boost-cookie-bar-container{max-width:1200px;margin:0 auto;padding:20px;position:relative;display:flex;align-items:center;gap:20px}.boost-cookie-bar-content{display:flex;align-items:center;gap:20px;flex:1}.boost-cookie-bar-message{flex:1;min-width:0}.boost-cookie-bar-title{margin:0 0 8px 0;font-size:16px;font-weight:600}.boost-cookie-bar-text{margin:0}.boost-cookie-bar-links{margin-top:8px}.boost-cookie-link{text-decoration:underline;font-size:13px;transition:color 0.2s ease, text-decoration 0.2s ease}.boost-cookie-bar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.boost-cookie-bar-close{position:absolute;top:10px;right:15px;background:none;border:none;font-size:20px;cursor:pointer;padding:5px;line-height:1;transition:color 0.2s ease}/* ========================================================================== Position Variants Structure ========================================================================== */ .boost-position-bottom{bottom:0;border-top:1px solid;border-bottom:none}.boost-position-top{top:0;border-bottom:1px solid;border-top:none;transform:translateY(-100%)}.boost-position-top.boost-cookie-bar-visible{transform:translateY(0)}.boost-position-center{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%, -50%) scale(0.9);max-width:600px;width:90%;border-radius:8px;box-shadow:0 10px 40px rgba(0, 0, 0, 0.2)}.boost-position-center.boost-cookie-bar-visible{transform:translate(-50%, -50%) scale(1)}.boost-position-center .boost-cookie-bar-container{max-width:none;flex-direction:column;text-align:center}.boost-position-center .boost-cookie-bar-content{flex-direction:column;text-align:center}.boost-position-corner{bottom:20px;right:20px;left:auto;top:auto;max-width:400px;width:90%;border-radius:8px;box-shadow:0 5px 25px rgba(0, 0, 0, 0.15);transform:translateX(100%)}.boost-position-corner.boost-cookie-bar-visible{transform:translateX(0)}.boost-position-corner .boost-cookie-bar-container{max-width:none;padding:15px;flex-direction:column}.boost-position-corner .boost-cookie-bar-content{flex-direction:column}.boost-position-corner .boost-cookie-bar-actions{justify-content:center;margin-top:15px}/* ========================================================================== Button Structure (No Colors) ========================================================================== */ .boost-btn{display:inline-block;padding:10px 20px;font-size:14px;font-weight:500;line-height:1.2;text-align:center;text-decoration:none;border:2px solid transparent;border-radius:4px;cursor:pointer;transition:all 0.2s ease-in-out;min-width:80px}.boost-btn:focus{outline:2px solid #0073aa;outline-offset:2px}/* ========================================================================== Settings Modal Structure ========================================================================== */ .boost-cookie-modal{position:fixed;top:0;left:0;right:0;bottom:0;display:none}.boost-cookie-modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5);backdrop-filter:blur(2px)}.boost-cookie-modal-content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:8px;box-shadow:0 10px 40px rgba(0, 0, 0, 0.2);max-width:700px;width:90%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.boost-cookie-modal-header{padding:20px;border-bottom:1px solid;display:flex;align-items:center;justify-content:space-between}.boost-cookie-modal-title{margin:0;font-size:18px;font-weight:600}.boost-cookie-modal-close{background:none;border:none;font-size:24px;cursor:pointer;padding:5px;line-height:1;transition:color 0.2s ease}.boost-cookie-modal-body{padding:20px;overflow-y:auto;flex:1}.boost-cookie-settings-description{margin-bottom:20px}.boost-cookie-categories{display:flex;flex-direction:column;gap:15px}.boost-cookie-category{border:1px solid;border-radius:6px;overflow:hidden}.boost-cookie-category-header{padding:15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background-color 0.2s ease}.boost-cookie-category-title{display:flex;align-items:center;gap:12px;flex:1}.boost-cookie-category-toggle{display:flex;align-items:center;gap:12px;cursor:pointer}.boost-toggle-switch{position:relative;display:inline-block;width:50px;height:24px;border-radius:24px;transition:background-color 0.2s ease}.boost-toggle-switch::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:white;border-radius:50%;transition:transform 0.2s ease}.boost-category-checkbox{position:absolute;opacity:0;width:0;height:0}.boost-category-checkbox:checked + .boost-toggle-switch::before{transform:translateX(26px)}.boost-category-checkbox:focus + .boost-toggle-switch{box-shadow:0 0 0 2px #0073aa, 0 0 0 4px rgba(0, 115, 170, 0.25)}.boost-required-badge{font-size:11px;padding:2px 8px;border-radius:12px;font-weight:500}.boost-category-toggle{background:none;border:none;cursor:pointer;font-size:16px;padding:5px;line-height:1;transition:color 0.2s ease}.boost-toggle-icon{transition:transform 0.2s ease}.boost-cookie-category-description{padding:15px;border-top:1px solid}.boost-cookie-modal-footer{padding:15px 20px;border-top:1px solid;display:flex;align-items:center;justify-content:flex-end;gap:12px}body.boost-modal-open{overflow:hidden}/* ========================================================================== Cookie Preferences Widget Structure ========================================================================== */ .boost-cookie-preferences-widget{border:1px solid;border-radius:6px;padding:20px;margin:15px 0}.boost-cookie-preferences-widget h4{margin:0 0 15px 0;font-size:16px;font-weight:600}.boost-consent-status{margin-bottom:15px}.boost-consent-categories{list-style:none;padding:0;margin:0 0 15px 0}.boost-consent-category{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid}.boost-consent-category:last-child{border-bottom:none}.boost-category-name{font-weight:500}.boost-consent-status.enabled, .boost-consent-status.disabled{font-weight:500}.boost-privacy-message{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:6px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);z-index:999999;transform:translateX(calc(100% + 40px));transition:transform 0.3s ease-in-out;max-width:300px;font-size:14px}.boost-privacy-message.boost-privacy-message-show{transform:translateX(0)}/* ========================================================================== Responsive Design Structure - UPDATED with Mobile Fixes ========================================================================== */ @media screen and (max-width:768px){.boost-cookie-bar-container{padding:15px;flex-direction:column;gap:15px}.boost-cookie-bar-content{flex-direction:column;text-align:center;gap:15px}.boost-cookie-bar-actions{flex-direction:column;align-items:stretch;width:100%;gap:10px}.boost-position-corner{bottom:10px;right:10px;width:calc(100% - 20px);max-width:350px}.boost-position-center{width:95%;max-width:500px}.boost-cookie-modal-content{width:95%;max-height:95vh}.boost-cookie-modal-header, .boost-cookie-modal-body, .boost-cookie-modal-footer{padding:15px}.boost-cookie-modal-footer{flex-wrap:wrap;justify-content:center}}@media screen and (max-width:480px){.boost-cookie-bar{font-size:13px}.boost-cookie-bar-container{padding:12px;gap:12px}.boost-cookie-bar-title{font-size:15px}.boost-cookie-bar-text{font-size:13px}.boost-btn{padding:12px 16px;font-size:14px;min-width:0;width:100%;font-weight:600}.boost-cookie-bar-actions{flex-direction:column;width:100%;gap:8px;align-items:stretch}.boost-cookie-preferences-widget{padding:15px;margin:10px 0}.boost-cookie-modal-content{max-height:calc(100vh - 115px)}.boost-cookie-categories{margin-left:0;margin-right:0;padding-left:0;padding-right:0}.boost-cookie-category{margin-left:0;margin-right:0;border-left-width:1px;border-right-width:1px}.boost-cookie-category-header{padding-left:15px;padding-right:15px}.boost-cookie-category-description{padding-left:15px;padding-right:15px}.boost-cookie-modal-footer{flex-direction:column;gap:10px}.boost-cookie-modal-footer .boost-btn{width:100%;margin:0}.boost-btn-save-first{order:1}.boost-btn-accept-second{order:2}.boost-btn-decline-third{order:3}.boost-privacy-message{top:10px;right:10px;left:10px;max-width:none;text-align:center}}@media screen and (min-width:1200px){.boost-position-corner{max-width:450px}.boost-cookie-modal-content{max-width:800px}}@media screen and (min-width:1400px){.boost-cookie-bar-container{max-width:1400px}}/* ========================================================================== Accessibility Support ========================================================================== */ .boost-cookie-modal-content{contain:layout style paint}.boost-cookie-category[aria-expanded="true"] .boost-toggle-icon{transform:rotate(180deg)}@media (prefers-contrast:more){.boost-toggle-switch{border:2px solid ButtonText}.boost-cookie-bar, .boost-btn{border-width:2px}}@media (prefers-reduced-motion:reduce){.boost-cookie-bar, .boost-privacy-message, .boost-toggle-switch, .boost-toggle-switch::before, .boost-toggle-icon, .boost-btn, .boost-cookie-category-header, .boost-cookie-link, .boost-cookie-bar-close, .boost-cookie-modal-close, .boost-category-toggle{transition:none}.boost-cookie-category[aria-expanded="true"] .boost-toggle-icon{transition:none}}.boost-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@media print{.boost-cookie-bar, .boost-cookie-modal, .boost-privacy-message{display:none !important}}/* ========================================================================== Animation Keyframes ========================================================================== */ @keyframes boostSlideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes boostSlideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes boostFadeIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes boostSlideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.boost-animate-slide-up{animation:boostSlideUp 0.3s ease-out}.boost-animate-slide-down{animation:boostSlideDown 0.3s ease-out}.boost-animate-fade-in{animation:boostFadeIn 0.3s ease-out}.boost-animate-slide-in-right{animation:boostSlideInRight 0.3s ease-out}.boost-cookie-bar, .boost-privacy-message, .boost-cookie-modal-content{will-change:transform}.boost-cookie-bar:not(.boost-cookie-bar-visible), .boost-privacy-message:not(.boost-privacy-message-show){will-change:auto}