/* ============================================================================ Cookie Consent — quiet, premium fixed bottom bar. Onyx surface, champagne primary action. Slides up on .is-visible. Loaded globally from the so it is present on every page. ============================================================================ */ .cookie-consent { position: fixed; inset: auto 0 0 0; z-index: 9999; background: rgba(11, 13, 15, 0.96); /* --color-onyx @ 96% */ border-top: 1px solid rgba(185, 151, 91, 0.28); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: translateY(100%); transition: transform var(--dur-med, 420ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } .cookie-consent.is-visible { transform: translateY(0); } .cookie-consent__inner { width: 100%; max-width: var(--container-max, 1320px); margin: 0 auto; padding: 1.1rem var(--container-pad, 2.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .cookie-consent__text { color: rgba(255, 255, 255, 0.72); font-size: 0.85rem; font-weight: 300; line-height: 1.55; margin: 0; max-width: 62ch; } .cookie-consent__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .cookie-consent__text a:hover { color: var(--color-accent-soft, #d4b27a); } .cookie-consent__actions { display: flex; gap: 0.6rem; flex-shrink: 0; } .cookie-consent__btn { font: inherit; font-size: 0.8rem; letter-spacing: 0.04em; padding: 0.55rem 1.25rem; border: 1px solid var(--color-accent, #b9975b); background: var(--color-accent, #b9975b); color: var(--color-onyx, #0b0d0f); cursor: pointer; border-radius: var(--radius, 2px); transition: background var(--dur-fast, 220ms) var(--ease-out, ease), opacity var(--dur-fast, 220ms) var(--ease-out, ease); } .cookie-consent__btn:hover { background: var(--color-accent-hover, #d4b27a); border-color: var(--color-accent-hover, #d4b27a); } .cookie-consent__btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); } .cookie-consent__btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.55); } @media (max-width: 640px) { .cookie-consent__inner { flex-direction: column; align-items: flex-start; } .cookie-consent__actions { width: 100%; } .cookie-consent__btn { flex: 1; } }