/* ============================================================================ * Gorilla Energy - 18+ age gate (Phase C) * Blur lens on energy-drink cards/PDP, age-gate modal, disclaimer bar. * Default state = BLURRED (server-rendered .g-18). JS adds `g-18-ok` to * once the visitor confirms 18+, which unblurs and hides the lens. * ========================================================================== */ /* ---- Blur lens (catalog cards + PDP gallery) --------------------------- */ .g-18 { position: relative; } .g-18 .product-card__img, .g-18 img, .g-18 .woocommerce-product-gallery, .g-18 .gorilla-pdp-gallery { filter: blur(7px) saturate(1.05); transform: scale(1.03); /* hide blurred edges; can stays recognizable */ transition: filter var(--g-transition-slow), transform var(--g-transition-slow); pointer-events: none; user-select: none; } .g-18-lens { position: absolute; inset: 0; z-index: var(--g-z-above); display: flex; align-items: center; justify-content: center; padding: var(--g-space-3); text-align: center; /* Decorative overlay: let clicks fall through to the card's product link. */ pointer-events: none; border-radius: inherit; transition: opacity var(--g-transition-med); -webkit-tap-highlight-color: transparent; } /* Clean circular "18+" mark - no plate, no caption. Just an elegant badge * floating over the lightly-blurred can so the product stays recognizable. */ .g-18-lens__badge { font-family: var(--g-font-display); font-weight: var(--g-fw-black); color: var(--g-color-navy); background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); border: 1px solid rgb(var(--g-navy-rgb) / .1); border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; letter-spacing: .3px; box-shadow: 0 6px 18px rgb(var(--g-navy-rgb) / .22), inset 0 0 0 3px rgba(255, 255, 255, .85); } /* PDP gallery lens: larger badge to match the bigger image */ .g-18--pdp .g-18-lens__badge { width: 92px; height: 92px; font-size: 30px; border-width: 2px; } /* Confirmed: reveal ONLY the PDP gallery (the product the visitor opened). * Listing cards (homepage featured, category archive, related products) stay * permanently blurred behind the lens - that age-restricted blur is an * intentional brand aesthetic for energy drinks, not a one-time gate that * unblurs the whole site after a single confirmation. */ html.g-18-ok .g-18--pdp img, html.g-18-ok .g-18--pdp .woocommerce-product-gallery, html.g-18-ok .g-18--pdp .gorilla-pdp-gallery { filter: none; transform: none; pointer-events: auto; user-select: auto; } html.g-18-ok .g-18--pdp .g-18-lens { display: none; } /* ---- Юр-сноска 18+ (коллекция энергетиков + низ PDP) -------------------- v2.7.7: аккуратная сноска вместо полосы с плашкой - бейдж «18+» в тонком кольце, приглушённый мелкий текст, только волосяная линия сверху. */ .g-18-disclaimer { display: flex; align-items: center; gap: 14px; max-width: 860px; margin: 0 auto; padding: 20px 0 28px; font-family: 'DIN 2014 UI', system-ui, sans-serif; font-size: 12.5px; line-height: 1.55; text-transform: none; color: #6b7080; border-top: 1px solid rgb(var(--g-navy-rgb) / .1); } .g-18-disclaimer__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1.5px solid rgb(var(--g-navy-rgb) / .35); border-radius: 50%; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--g-color-navy); } .g-18-disclaimer strong { color: var(--g-color-navy); font-weight: 700; } /* ---- Age-gate modal ---------------------------------------------------- */ .g-agegate { display: none; position: fixed; inset: 0; z-index: 10001; align-items: center; justify-content: center; padding: var(--g-space-5); } .g-agegate.is-open { display: flex; } .g-agegate__overlay { position: absolute; inset: 0; background: rgba(3, 15, 84, .82); /* navy-dark wash - no peeking */ backdrop-filter: blur(4px); } .g-agegate__panel { position: relative; z-index: 1; width: 100%; max-width: 440px; background: var(--g-color-white); border-radius: var(--g-radius-xl); box-shadow: var(--g-shadow-modal); padding: var(--g-space-10) var(--g-space-8) var(--g-space-8); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--g-space-4); } @media (max-width: 767px) { .g-agegate__panel { padding: var(--g-space-8) var(--g-space-5) var(--g-space-6); } } .g-agegate__badge { font-family: var(--g-font-display); font-weight: var(--g-fw-black); color: var(--g-color-white); background: var(--g-color-navy); border-radius: var(--g-radius-full); width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; box-shadow: 0 6px 18px rgb(var(--g-navy-rgb) / .3); } .g-agegate__title { font-family: var(--g-font-display); font-weight: var(--g-fw-black); font-size: var(--g-text-2xl); line-height: var(--g-lh-tight); text-transform: uppercase; color: var(--g-color-navy); margin: 0; } .g-agegate__text { font-family: var(--g-font-body); font-size: var(--g-text-base); line-height: var(--g-lh-relaxed); color: var(--g-color-text-primary); margin: 0; } .g-agegate__actions { display: flex; gap: var(--g-space-3); width: 100%; margin-top: var(--g-space-2); } .g-agegate__btn { flex: 1; font-family: var(--g-font-bold); font-weight: var(--g-fw-bold); font-size: var(--g-text-base); text-transform: uppercase; letter-spacing: var(--g-ls-wide); padding: 14px 16px; border-radius: var(--g-radius-pill); border: 2px solid var(--g-color-navy); cursor: pointer; transition: background var(--g-transition-fast), color var(--g-transition-fast); } .g-agegate__btn--yes { background: var(--g-color-navy); color: var(--g-color-white); } .g-agegate__btn--yes:hover { background: var(--g-color-navy-mid); border-color: var(--g-color-navy-mid); } .g-agegate__btn--no { background: transparent; color: var(--g-color-navy); } .g-agegate__btn--no:hover { background: var(--g-color-navy-5); } .g-agegate__fine { font-family: var(--g-font-body); font-size: var(--g-text-xs); line-height: var(--g-lh-relaxed); color: var(--g-color-text-muted); margin: var(--g-space-2) 0 0; } /* Soft-block message shown after "НЕТ" (before redirect) */ .g-agegate__panel.is-denied .g-agegate__title { color: var(--g-color-red-bad); }