/* * CHLAT Age Gate — modal styles. No dependencies, ~3KB. * Dark theme: modal #131820, primary green #4caf50, secondary #2a323d. */ /* No scroll lock: the page stays scrollable behind the open gate (the modal is position:fixed, so it stays on screen until consent). The .chlat-gate-open class on / remains available as a state hook for theme styling. */ .chlat-age-gate { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 16px; } .chlat-age-gate__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; /* Light overlay, no backdrop blur: the site must stay clearly visible behind the modal (regulated-zone images are already blurred by the content blur itself). */ background: rgba(0, 0, 0, 0.5); } .chlat-age-gate__modal { position: relative; width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; background: #131820; border: 1px solid #232b36; border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); animation: chlat-age-gate-in 0.22s ease-out both; } @keyframes chlat-age-gate-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .chlat-age-gate__modal { animation: none; } } .chlat-age-gate__content { padding: 32px 28px; text-align: center; color: #e7ebf0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } .chlat-age-gate__header { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; } .chlat-age-gate__icon { width: 32px; height: 32px; flex: 0 0 auto; color: #ffffff; } .chlat-age-gate__title { font-size: 22px; font-weight: 800; letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase; color: #ffffff; } .chlat-age-gate__message { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: #b9c2cf; } .chlat-age-gate__message p { margin: 0 0 12px; } .chlat-age-gate__message p:last-child { margin-bottom: 0; } .chlat-age-gate__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .chlat-age-gate__btn { display: inline-block; /* Buttons grow to fill the row side to side (primary ends up wider, proportional to its text). */ flex: 1 1 auto; padding: 13px 30px; border: 0; border-radius: 8px; font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none !important; cursor: pointer; transition: background-color 0.15s ease; } .chlat-age-gate__btn--primary { background: #4caf50; color: #ffffff !important; } .chlat-age-gate__btn--primary:hover { background: #3f9844; } .chlat-age-gate__btn--secondary { background: #2a323d; color: #dfe5ec !important; } .chlat-age-gate__btn--secondary:hover { background: #353f4d; } .chlat-age-gate__btn:focus-visible { outline: 2px solid #93d79a; outline-offset: 2px; } .chlat-age-gate__footer { margin: 20px 0 0; font-size: 13px; line-height: 1.5; color: #768290; } /* Mobile (≤480px): stacked buttons + adjusted (larger) font sizes. Keep these values — the original smaller set (17/24/14/13/11) was hard to read on phones. */ @media (max-width: 480px) { .chlat-age-gate__content { padding: 26px 20px; } .chlat-age-gate__title { font-size: 19px; } .chlat-age-gate__icon { width: 26px; height: 26px; } .chlat-age-gate__message { font-size: 16px; } .chlat-age-gate__actions { flex-direction: column; } .chlat-age-gate__btn { width: 100%; padding: 14px 20px; font-size: 14px; } .chlat-age-gate__footer { font-size: 12px; } }