/* * cookie-consent.css * Styles for the cookie consent modal overlay — warszawa-masaz.pl * * Place in: css/cookie-consent.css * Linked from after style.css * * Palette mirrors the site: primary violet #ce64ce, accent orange #f6a21e */ /* ── Overlay backdrop ───────────────────────────────────────────────── */ #cookie-overlay { /* Hidden by default — JS adds .is-visible */ position: fixed; inset: 0; /* top/right/bottom/left: 0 */ z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; /* Frosted dark backdrop */ background-color: rgba(20, 10, 30, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); /* Start invisible */ opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } /* Visible state — added by JS */ #cookie-overlay.is-visible { opacity: 1; pointer-events: all; } /* Hiding state — JS adds this during the out-animation */ #cookie-overlay.is-hiding { opacity: 0; pointer-events: none; } /* ── Modal card ─────────────────────────────────────────────────────── */ #cookie-modal { position: relative; background: #ffffff; border-radius: 1.25rem; padding: 2rem 2rem 1.75rem; max-width: 460px; width: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 12px 40px rgba(0, 0, 0, 0.18); /* Slide-up entrance */ transform: translateY(24px); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); /* Top accent stripe in site violet */ border-top: 4px solid #ce64ce; } #cookie-overlay.is-visible #cookie-modal { transform: translateY(0); } /* ── Cookie icon ────────────────────────────────────────────────────── */ .cookie-modal__icon { font-size: 2.2rem; line-height: 1; margin-bottom: 0.75rem; display: block; text-align: center; } /* ── Title ──────────────────────────────────────────────────────────── */ .cookie-modal__title { font-family: "Merriweather", serif; font-size: 1.15rem; font-weight: 700; color: #2a1a2e; text-align: center; margin-bottom: 0.9rem; line-height: 1.3; } /* ── Description ────────────────────────────────────────────────────── */ .cookie-modal__desc { font-size: 0.88rem; color: #4a4a5a; line-height: 1.7; text-align: center; margin-bottom: 0.75rem; } /* ── Policy links ───────────────────────────────────────────────────── */ .cookie-modal__links { font-size: 0.8rem; color: #777; text-align: center; margin-bottom: 1.5rem; } .cookie-modal__links a { color: #ce64ce; text-decoration: underline; text-underline-offset: 2px; } .cookie-modal__links a:hover { color: #a040a0; } /* ── Action buttons ─────────────────────────────────────────────────── */ .cookie-modal__actions { display: flex; gap: 0.75rem; justify-content: center; } .cookie-btn { flex: 1; max-width: 180px; padding: 0.65rem 1rem; border-radius: 2rem; font-size: 0.9rem; font-weight: 600; font-family: "Roboto", sans-serif; cursor: pointer; border: 2px solid transparent; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease; line-height: 1.2; } .cookie-btn:focus-visible { outline: 3px solid #ce64ce; outline-offset: 3px; } .cookie-btn:active { transform: scale(0.97); } /* Accept — filled violet */ .cookie-btn--accept { background-color: #ce64ce; color: #ffffff; border-color: #ce64ce; } .cookie-btn--accept:hover { background-color: #b84eb8; border-color: #b84eb8; } /* Reject — ghost / outlined */ .cookie-btn--reject { background-color: transparent; color: #666; border-color: #ddd; } .cookie-btn--reject:hover { background-color: #f5f0f5; border-color: #bbb; color: #333; } /* ── Mobile adjustments ─────────────────────────────────────────────── */ @media screen and (max-width: 480px) { #cookie-modal { padding: 1.5rem 1.25rem 1.5rem; border-radius: 1rem; } .cookie-modal__title { font-size: 1rem; } .cookie-modal__desc { font-size: 0.84rem; } .cookie-modal__actions { flex-direction: column; align-items: stretch; } .cookie-btn { max-width: 100%; } /* On mobile: Reject goes below Accept */ .cookie-btn--accept { order: 1; } .cookie-btn--reject { order: 2; } } /* ===================================================== YOUTUBE FACADE Shown before consent. Replaced by real iframe on click after user accepts cookies. ===================================================== */ .yt-facade { position: relative; width: 100%; height: 100%; cursor: default; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 0.5rem; } .yt-facade__thumb { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.7; } .yt-facade__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; } .yt-facade__consent-note { color: #fff; font-size: 0.8rem; text-align: center; background: rgba(0, 0, 0, 0.6); padding: 0.3rem 0.75rem; border-radius: 1rem; max-width: 80%; } .yt-facade__play { width: 68px; height: 48px; background: transparent; border: none; cursor: not-allowed; padding: 0; opacity: 0.5; transition: opacity 0.2s; } .yt-facade__play:not([disabled]) { cursor: pointer; opacity: 1; } .yt-facade__play:not([disabled]):hover { opacity: 0.85; } .yt-facade__play svg { width: 68px; height: 48px; }