/* * Chordize AI — Cookie banner styling * Deploy path: assets/cookie-banner.css * Load in of every page (before app.js) alongside hud-theme.css. * * All selectors are namespaced with cz-cookie- to avoid clashes. * No !important. Style variables mirror the HUD theme. */ .cz-cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; max-width: 900px; margin: 0 auto; padding: 18px 20px; background: rgba(9, 14, 22, 0.96); color: #e8f3ff; border: 1px solid rgba(95, 225, 255, 0.35); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; } .cz-cookie-msg { margin: 0 0 8px 0; } .cz-cookie-links { margin: 0 0 12px 0; font-size: 13px; color: #9fc7d9; } .cz-cookie-links a { color: #7ee0ff; text-decoration: underline; } .cz-cookie-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .cz-cookie-btn { appearance: none; cursor: pointer; padding: 8px 14px; border-radius: 6px; border: 1px solid rgba(95, 225, 255, 0.5); background: transparent; color: #e8f3ff; font-size: 14px; font-weight: 500; line-height: 1.2; } .cz-cookie-btn:hover, .cz-cookie-btn:focus-visible { background: rgba(95, 225, 255, 0.12); outline: none; } .cz-cookie-btn-primary { background: linear-gradient(180deg, #7ee0ff, #38b6d9); color: #0a0f18; border-color: transparent; font-weight: 700; } .cz-cookie-btn-primary:hover, .cz-cookie-btn-primary:focus-visible { filter: brightness(1.08); } /* Customize dialog */ .cz-cookie-dialog { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .cz-cookie-dialog-inner { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: #0f1723; color: #e8f3ff; border: 1px solid rgba(95, 225, 255, 0.35); border-radius: 12px; padding: 24px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6); } .cz-cookie-dialog-inner h2 { margin: 0 0 16px 0; font-size: 20px; } .cz-cookie-category { padding: 12px 0; border-top: 1px solid rgba(95, 225, 255, 0.15); } .cz-cookie-category:first-of-type { border-top: none; } .cz-cookie-category label { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .cz-cookie-category input[type="checkbox"] { transform: scale(1.1); accent-color: #7ee0ff; } .cz-cookie-cat-desc { margin: 6px 0 0 24px; color: #9fc7d9; font-size: 13px; } .cz-cookie-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(95, 225, 255, 0.15); } @media (max-width: 520px) { .cz-cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 14px 16px; } .cz-cookie-buttons { justify-content: stretch; } .cz-cookie-btn { flex: 1; } } /* Cookie settings alignment override */ .cz-cookie-category label { cursor: pointer; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; color: #7fb8cc; font-size: 12px; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; } .cz-cookie-category label strong { display: block; min-width: 0; } .cz-cookie-category input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; margin: 1px 0 0; padding: 0; transform: none; accent-color: #7ee0ff; } .cz-cookie-cat-desc { margin: 7px 0 0 28px; color: #cfe1ea; font-size: 13px; line-height: 1.45; } /* Cookie settings utility-page link */ .cz-cookie-utility-link { margin: 18px 0 0; text-align: center; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.4; } .cz-cookie-utility-link a { color: #7ee0ff; text-decoration: underline; text-underline-offset: 2px; } .cz-cookie-utility-link a:hover, .cz-cookie-utility-link a:focus-visible { color: #b8f1ff; }