/* gate.css — shared age-gate + access-code overlay. House palette: #0a0a0a / #c9a96e / Georgia. */ /* House display face — self-hosted, loaded on every page via this shared sheet. */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/cormorant-upright.woff2) format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/cormorant-italic.woff2) format('woff2'); } /* Anti-flash: hide page content until the gate resolves. Only applied (via gate.js, synchronously in ) on pages that actually need gating, so cleared/returning users never see a hidden flash. The overlay itself stays visible. */ html.ag-init body { visibility: hidden; } #ag-overlay, #ag-overlay * { visibility: visible !important; } body.ag-locked { overflow: hidden; } #ag-overlay { position: fixed; inset: 0; z-index: 99999; background: #0a0a0a; display: flex; align-items: center; justify-content: center; padding: 24px; -webkit-overflow-scrolling: touch; overflow-y: auto; } #ag-overlay .ag-modal { max-width: 440px; width: 100%; margin: auto; text-align: center; border: 1px solid #33291e; border-radius: 8px; background: rgba(201,169,110,0.03); padding: 36px 28px 30px; font-family: 'Georgia', serif; color: #d4c8b8; } #ag-overlay .ag-brand { font-family: -apple-system, system-ui, sans-serif; font-size: 0.62em; letter-spacing: 6px; text-transform: uppercase; color: #c9a96e; margin-bottom: 24px; } #ag-overlay h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2em; font-weight: 500; color: #c9a96e; letter-spacing: 1px; margin-bottom: 14px; } #ag-overlay p { font-size: 0.86em; line-height: 1.7; color: #9a9184; margin-bottom: 22px; } #ag-overlay .ag-input { width: 100%; padding: 13px 14px; margin-bottom: 8px; background: rgba(0,0,0,0.4); border: 1px solid #33291e; border-radius: 5px; color: #e0d5c7; font-family: 'Georgia', serif; font-size: 1em; letter-spacing: 2px; text-align: center; text-transform: uppercase; } #ag-overlay .ag-input:focus { outline: none; border-color: #c9a96e; } #ag-overlay .ag-err { min-height: 18px; font-size: 0.74em; color: #c97a6e; margin-bottom: 8px; } #ag-overlay .ag-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } #ag-overlay .ag-btn { width: 100%; padding: 14px 20px; border-radius: 5px; border: 1px solid #c9a96e; background: rgba(201,169,110,0.1); color: #c9a96e; font-family: -apple-system, system-ui, sans-serif; font-size: 0.68em; letter-spacing: 2.5px; text-transform: uppercase; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.16s ease-out; } #ag-overlay .ag-btn:hover { background: rgba(201,169,110,0.2); } #ag-overlay .ag-btn:active { transform: scale(0.97); } #ag-overlay .ag-btn.ag-ghost { border-color: #3a3a3a; background: transparent; color: #9a9184; } #ag-overlay .ag-btn.ag-ghost:hover { border-color: #555; color: #c9b9a0; } #ag-overlay .ag-legal { margin-top: 22px; font-size: 0.72em; color: #8a8278; letter-spacing: 1px; } #ag-overlay .ag-legal a { color: #9a9184; text-decoration: none; } #ag-overlay .ag-legal a:hover { color: #c9a96e; } #ag-overlay .ag-req { margin-top: 18px; font-size: 0.76em; color: #8a8278; line-height: 1.6; } #ag-overlay .ag-req a { color: #c9a96e; text-decoration: none; } /* Accessibility: visible focus + comfortable tap targets for the gate controls. (Locked-card styling now lives in index.html, which renders its own card states.) */ #ag-overlay .ag-btn { min-height: 44px; } #ag-overlay .ag-buy { margin-top: 18px; padding-top: 18px; border-top: 1px solid #2a2418; font-size: 0.76em; color: #8a8278; line-height: 1.6; } #ag-overlay .ag-buy .ag-buybtn { margin-top: 12px; } #ag-overlay .ag-buybtn { background: #c9a96e; color: #0a0a0a; border-color: #c9a96e; } #ag-overlay .ag-buybtn:hover { background: #d8b87c; } #ag-overlay .ag-btn:focus-visible, #ag-overlay .ag-input:focus-visible, #ag-overlay a:focus-visible { outline: 2px solid #c9a96e; outline-offset: 2px; } /* invite-request row inside the code modal (id-prefixed to outrank the width:100% base rules) */ .ag-reqrow { display: flex; gap: 8px; margin-top: 10px; } #ag-overlay .ag-reqrow .ag-input { flex: 1 1 0%; width: auto; min-width: 0; margin: 0; font-size: 0.82em; letter-spacing: 1px; text-transform: none; } #ag-overlay .ag-reqrow .ag-btn { padding: 10px 16px; flex: 0 0 auto; width: auto; min-height: 40px; } /* The modal materializes rather than snapping in (no-op on browsers without @starting-style) */ #ag-overlay .ag-modal { transition: opacity 0.22s ease-out, transform 0.22s ease-out; } @starting-style { #ag-overlay .ag-modal { opacity: 0; transform: scale(0.98) translateY(6px); } } @media (prefers-reduced-motion: reduce) { #ag-overlay .ag-modal { transition: opacity 0.2s ease; transform: none !important; } } /* quiet "no code?" line replacing the in-modal paywall */ #ag-overlay .ag-alt { margin-top: 16px; font-size: 0.8em; color: #a49c8a; text-align: center; } #ag-overlay .ag-alt a { color: #c9a96e; } /* ─── Shared site navigation (every product page) ─── */ .tnav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; padding: 13px 22px; background: rgba(10,10,10,0.9); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); border-bottom: 1px solid #201e1a; } @media (min-width: 920px) { .tnav { padding: 15px 40px; } } .tnav-brand { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #c9a96e; text-decoration: none; margin-right: auto; line-height: 1; } .tnav-brand:hover { color: #dbbd84; } .tnav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; } .tnav-links a { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.68rem; letter-spacing: 1.6px; text-transform: uppercase; color: #97907f; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .tnav-links a:hover { color: #c9a96e; border-bottom-color: #c9a96e; } .tnav-links a.current { color: #e6ddd0; border-bottom-color: #4a4436; } .tnav-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.68rem; letter-spacing: 1.6px; text-transform: uppercase; color: #120f0a; background: #c9a96e; border: none; border-radius: 3px; padding: 9px 15px; cursor: pointer; transition: background 0.2s; } .tnav-code:hover { background: #dbbd84; } .tnav-code.on { background: none; color: #9db383; border: 1px solid #33321e; cursor: default; } section[id] { scroll-margin-top: calc(var(--nav-h, 62px) + 14px); } @media (max-width: 620px) { .tnav { gap: 9px 14px; padding: 11px 18px; } .tnav-brand { flex: 1; margin-right: 0; font-size: 1.32rem; } .tnav-links { order: 2; width: 100%; gap: 6px 16px; margin-top: 2px; } .tnav-links a { font-size: 0.66rem; letter-spacing: 1px; padding: 4px 0; } .tnav-code { padding: 7px 12px; font-size: 0.64rem; } }