/** * Bella Nova NY, Age Gate: visual styling. * * Namespace: bn-agegate-. Loaded via the bellanova-area-styles must-use plugin, * which enqueues every CSS file under assets/css/ (except tokens.css and * animations.css) alphabetically after tokens.css/animations.css. This file * sorts first among area files (bn-agegate, bn-footer, bn-header, bn-home, * bn-menu), so it cannot be beaten in the cascade by another area's CSS. * * FOUC-prevention structural rules (show/hide keyed off html.bn-age-hide) are * duplicated inline in by wp-content/mu-plugins/bn-agegate.php, printed * render-blocking before first paint. That inline copy is the one that * actually prevents the flash; the copy below is kept byte-identical so the * two never drift, and so the rule still applies if this linked file were * ever delayed or stripped by a caching layer. * * Stacking: the overlay uses position: fixed + z-index: 100 (the --z-modal * ceiling from tokens.css) to sit above every other area's content. No * !important is used for that purpose; the !important uses below are for the * FOUC-hide and scroll-lock mechanics only, not for winning the stacking fight. */ /* Structural show/hide, kept byte-identical to the inline critical CSS printed by wp-content/mu-plugins/bn-agegate.php so the two never drift. */ #bn-agegate.bn-agegate-overlay { display: none; } html.bn-age-hide #bn-agegate.bn-agegate-overlay { display: flex; } html.bn-age-hide body > *:not(#bn-agegate) { visibility: hidden !important; } html.bn-agegate-lock, html.bn-agegate-lock body { overflow: hidden !important; } #bn-agegate.bn-agegate-overlay { position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; padding-left: 24px; padding-right: 24px; background-color: rgba(247, 245, 240, 0.95); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); } .bn-agegate-overlay.bn-agegate-exiting { animation: bn-agegate-overlay-exit 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .bn-agegate-card { max-width: 448px; width: 100%; text-align: center; opacity: 0; animation: bn-agegate-card-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes bn-agegate-card-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes bn-agegate-overlay-exit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-40px); } } .bn-agegate-wordmark { display: flex; flex-direction: column; align-items: center; line-height: 1; margin-bottom: 40px; } .bn-agegate-wordmark-line1 { font-family: var(--font-serif); font-size: 30px; letter-spacing: 0.3em; color: var(--color-forest); } .bn-agegate-wordmark-line2 { display: block; font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.55em; color: var(--color-moss); margin-top: 8px; padding-left: 4px; } .bn-agegate-divider { width: 48px; height: 1px; background-color: var(--color-brass); margin: 0 auto 40px; } .bn-agegate-heading { font-family: var(--font-serif); font-weight: 400; font-size: 36px; line-height: 1.25; color: var(--color-forest); margin: 0 0 16px; } .bn-agegate-heading .bn-agegate-italic { font-style: italic; } .bn-agegate-heading-denied:focus { outline: none; } .bn-agegate-body { font-family: var(--font-sans); font-size: 14px; color: var(--color-moss); margin: 0 0 40px; } .bn-agegate-body-denied { margin-bottom: 0; } .bn-agegate-buttons { display: flex; flex-direction: column; gap: 12px; justify-content: center; } .bn-agegate-btn { font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase; padding: 16px 40px; border-radius: 9999px; cursor: pointer; border: none; background: none; transition-property: background-color, border-color; transition-duration: 300ms; } .bn-agegate-btn-yes { background-color: var(--color-forest); color: var(--color-cream); } .bn-agegate-btn-yes:hover { background-color: var(--color-sage); } .bn-agegate-btn-yes:focus { background-color: var(--color-forest); color: var(--color-cream); } .bn-agegate-btn-no { background-color: transparent; color: var(--color-forest); border: 1px solid rgba(44, 59, 46, 0.25); } .bn-agegate-btn-no:hover { border-color: var(--color-forest); } .bn-agegate-btn-no:focus { background-color: transparent; color: var(--color-forest); } .bn-agegate-btn:focus-visible { outline: 2px solid var(--color-sage); outline-offset: 2px; } .bn-agegate-footer { margin-top: 48px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(92, 107, 94, 0.7); } @media (min-width: 640px) { .bn-agegate-heading:not(.bn-agegate-heading-denied) { font-size: 48px; } .bn-agegate-buttons { flex-direction: row; } } @media (prefers-reduced-motion: reduce) { .bn-agegate-card { animation: none; opacity: 1; } .bn-agegate-overlay.bn-agegate-exiting { animation: none; opacity: 0; } }