/* Cookie consent banner + preferences panel. Mobile-first. Plain CSS (no Tailwind) so the app is portable. */ .consent-banner { position: fixed; inset: auto 0 0 0; z-index: 9999; display: flex; justify-content: center; padding: 1rem; pointer-events: none; } .consent-banner--hidden, .consent-banner[hidden] { display: none !important; } .consent-banner__card { pointer-events: auto; width: 100%; max-width: 640px; background: #ffffff; color: #2C2416; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); padding: 1rem; font-family: inherit; font-size: 0.875rem; line-height: 1.45; } @media (min-width: 640px) { .consent-banner__card { padding: 1.25rem; font-size: 0.95rem; } } /* Dark theme is controlled by the .dark class on via the site's theme switcher; do not use prefers-color-scheme here so the banner follows the explicit user choice. Background matches the newsletter form inputs (zinc-700) so the banner stands out from the body (#1a1a1a) in dark mode. */ .dark .consent-banner__card { background: #3f3f46; color: #e4e4e7; border-color: rgba(255, 255, 255, 0.08); } .consent-banner__title { margin: 0 0 0.4rem 0; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; } @media (min-width: 640px) { .consent-banner__title { font-size: 1.1rem; } } .consent-banner__title-icon { font-size: 1.15rem; line-height: 1; } @media (min-width: 640px) { .consent-banner__title-icon { font-size: 1.25rem; } } .consent-banner__desc { margin: 0 0 0.85rem 0; } @media (min-width: 640px) { .consent-banner__desc { margin: 0 0 1rem 0; } } .consent-banner__link { color: #D97642; text-decoration: underline; } .dark .consent-banner__link { color: #E8956B; } .consent-banner__actions { display: flex; flex-direction: column; gap: 0.5rem; } @media (min-width: 640px) { .consent-banner__actions { flex-direction: row; } .consent-banner__actions .consent-btn { flex: 1 1 0; } } .consent-btn { appearance: none; border: 1.5px solid #D97642; background: #ffffff; color: #2C2416; padding: 0.5rem 0.85rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } @media (min-width: 640px) { .consent-btn { padding: 0.65rem 1rem; font-size: 0.95rem; } } .consent-btn__icon { font-size: 1.05em; line-height: 1; } .consent-btn:hover { background: #F4C7A8; } .consent-btn:focus-visible { outline: 2px solid #D97642; outline-offset: 2px; } .dark .consent-btn { background: #27272a; color: #e4e4e7; border-color: #E8956B; } .dark .consent-btn:hover { background: #18181b; } .consent-btn--save { /* Stays full-width on its own in the preferences panel, but shares space with the back button inside the banner via the flex .consent-banner__actions container. */ } .consent-btn--back { background: transparent; border-color: rgba(0, 0, 0, 0.18); color: inherit; } .consent-btn--back:hover { background: rgba(0, 0, 0, 0.04); } .dark .consent-btn--back { background: transparent; border-color: rgba(255, 255, 255, 0.18); } .dark .consent-btn--back:hover { background: rgba(255, 255, 255, 0.06); } /* Customize panel inside the banner */ .consent-banner__customize { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; padding: 0.75rem; border-radius: 8px; background: rgba(217, 118, 66, 0.06); } .consent-banner__customize[hidden] { display: none; } .dark .consent-banner__customize { background: rgba(232, 149, 107, 0.08); } .consent-toggle { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.4rem 0.25rem; cursor: pointer; } .consent-toggle input[type="checkbox"] { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; accent-color: #D97642; flex: none; } .consent-toggle__label { display: flex; flex-direction: column; gap: 0.15rem; } .consent-toggle__sub { font-size: 0.85rem; opacity: 0.78; } /* Preferences panel (privacy page) */ .consent-prefs { margin: 2rem 0; padding: 1.25rem; border: 1px solid rgba(217, 118, 66, 0.3); border-radius: 12px; background: rgba(217, 118, 66, 0.04); } .dark .consent-prefs { background: rgba(232, 149, 107, 0.05); border-color: rgba(232, 149, 107, 0.4); } .consent-prefs__title { margin: 0 0 0.5rem 0; font-size: 1.25rem; font-weight: 600; } .consent-prefs__desc { margin: 0 0 1rem 0; opacity: 0.85; } .consent-prefs__toggles { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1rem; } .consent-prefs__actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .consent-prefs__saved { color: #16a34a; font-size: 0.9rem; } .consent-prefs__saved[hidden] { display: none; }