/*! * Guyscat — Age Layer (Netfield Liveschaltung §4.2) * Custom click-through gate, 7-day cookie. Inherits --gc-* tokens from style.css. */ /* Lock body scroll while the gate is up. * Class is added server-side via body_class filter in inc/age-layer.php * so this rule activates the moment parses. */ body.gc-age-locked { overflow: hidden !important; } /* Overlay container — fixed, full viewport, above everything */ .gc-age-layer { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 32px); transition: opacity 220ms ease; } .gc-age-layer.is-leaving { opacity: 0; pointer-events: none; } /* Backdrop */ .gc-age-layer__backdrop { position: absolute; inset: 0; background: rgba(3, 8, 21, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* Card */ .gc-age-layer__card { position: relative; max-width: 520px; width: 100%; background: linear-gradient(180deg, var(--gc-bg-alt, var(--gc-bg-alt)) 0%, var(--gc-bg, var(--gc-bg)) 100%); border: 1px solid var(--gc-border, rgba(var(--gc-border-rgb), 0.14)); border-radius: calc(var(--gc-radius-scale, 1) * 16px); padding: clamp(24px, 4vw, 40px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); color: var(--gc-text, var(--gc-text)); } /* Title — gradient like the footer wordmark for brand cohesion */ .gc-age-layer__title { margin: 0 0 18px; font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -0.01em; background: linear-gradient(135deg, var(--gc-accent, var(--gc-accent)) 0%, var(--gc-accent-2, var(--gc-accent-2)) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; line-height: 1.2; } /* Warning highlight */ .gc-age-layer__warn { margin: 0 0 16px; color: var(--gc-text, var(--gc-text)); font-size: 14px; padding: 12px 14px; border-left: 3px solid var(--gc-accent, var(--gc-accent)); background: var(--gc-accent-soft, rgba(var(--gc-accent-rgb), 0.08)); border-radius: 0 calc(var(--gc-radius-scale, 1) * 8px) calc(var(--gc-radius-scale, 1) * 8px) 0; line-height: 1.5; } .gc-age-layer__warn strong { color: var(--gc-accent, var(--gc-accent)); margin-right: 4px; } /* Body paragraphs */ .gc-age-layer__body { margin: 0 0 12px; color: var(--gc-text-soft, var(--gc-text-soft)); font-size: 14px; line-height: 1.6; } .gc-age-layer__body:last-of-type { margin-bottom: 0; } /* Actions */ .gc-age-layer__actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; } .gc-age-layer__btn { flex: 1 1 180px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border: 0; border-radius: var(--gc-radius-pill); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; font-family: inherit; transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease; } .gc-age-layer__btn--leave { background: linear-gradient(135deg, #d44a4a 0%, #b13838 100%); color: #fff; box-shadow: 0 8px 22px rgba(212, 74, 74, 0.28); } .gc-age-layer__btn--enter { /* gc_age_enter_cta_contrast_v1 (2026-07-06, scatportal/gold variant): gold is a LIGHT accent so dark text is correct, but the --gc-accent-strong #a5691f stop dropped dark #04121b to ~4.19:1. A translucent WHITE overlay lightens whatever the brand gold gradient is so dark text clears WCAG >=4.5 on both stops (mirror of the magenta white-on-black-overlay fix). */ background: linear-gradient(0deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)), linear-gradient(135deg, var(--gc-accent, var(--gc-accent)) 0%, var(--gc-accent-strong, var(--gc-accent-strong)) 100%); color: #04121b; box-shadow: 0 8px 22px rgba(var(--gc-accent-rgb), 0.28); } .gc-age-layer__btn:hover, .gc-age-layer__btn:focus-visible { transform: translateY(-1px); } .gc-age-layer__btn--leave:hover, .gc-age-layer__btn--leave:focus-visible { box-shadow: 0 12px 30px rgba(212, 74, 74, 0.36); color: #fff; } .gc-age-layer__btn--enter:hover, .gc-age-layer__btn--enter:focus-visible { box-shadow: 0 12px 30px rgba(var(--gc-accent-rgb), 0.36); color: #04121b; } .gc-age-layer__btn:focus-visible { outline: 2px solid var(--gc-accent, var(--gc-accent)); outline-offset: 3px; } /* Mobile: stack with Enter on top for thumb-reach priority */ @media (max-width: 480px) { .gc-age-layer__actions { flex-direction: column-reverse; } /* Override desktop flex-basis (180px) which becomes button HEIGHT in column flex */ .gc-age-layer__actions .gc-age-layer__btn { flex: 0 0 auto; width: 100%; } .gc-age-layer__title { font-size: 22px; } } /* Hide Complianz cookie banner while age gate is up. Without this, both render simultaneously (gates backdrop is 92% opaque so the banner shows dimly behind it). User must accept age FIRST. */ body.gc-age-locked #cmplz-cookiebanner-container, body.gc-age-locked #cmplz-manage-consent, body.gc-age-locked .cmplz-cookiebanner { display: none !important; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .gc-age-layer, .gc-age-layer__btn { transition: none; } .gc-age-layer__btn:hover, .gc-age-layer__btn:focus-visible { transform: none; } } /* Logo above title — gc_age_gate_logo_v1 (2026-05-19) Mirrors the WP Customizer custom-logo used by header.php so the gate keeps the brand visible on first paint, and stays per-site safe for the greenfield split (each site has its own custom_logo theme-mod). */ .gc-age-layer__logo-wrap { display: flex; justify-content: center; margin: 0 0 20px; } .gc-age-layer__logo { display: block; max-width: 220px; max-height: 96px; width: auto; height: auto; object-fit: contain; } @media (max-width: 480px) { .gc-age-layer__logo { max-width: 180px; max-height: 80px; } .gc-age-layer__logo-wrap { margin-bottom: 14px; } }