/* ───────────────────────────────────────────────────────────── AUTH · Round 13 · Cohort 2 invite-only gating Shared masking styles for .gated-section + .gated-page. State is held on . Default = "locked" (set by inline script in ) so content doesn't briefly flash visible before JS evaluates. ───────────────────────────────────────────────────────────── */ /* While Identity widget initializes — keep gates dimmed but no overlay yet */ html[data-auth-state="loading"] .gated-section > *:not(.gate-overlay), html[data-auth-state="loading"] .gated-page > *:not(.gate-overlay) { filter: blur(6px); opacity: 0.85; pointer-events: none; user-select: none; transition: filter 0.3s, opacity 0.3s; } /* LOCKED · non-authenticated user · full blur + overlay */ html[data-auth-state="locked"] .gated-section, html[data-auth-state="locked"] .gated-page { position: relative; } html[data-auth-state="locked"] .gated-section > *:not(.gate-overlay), html[data-auth-state="locked"] .gated-page > *:not(.gate-overlay) { filter: blur(8px); pointer-events: none; user-select: none; transition: filter 0.3s; } html[data-auth-state="locked"] .gate-overlay { display: flex !important; } /* UNLOCKED · authenticated user · no blur, no overlay */ html[data-auth-state="unlocked"] .gated-section > *, html[data-auth-state="unlocked"] .gated-page > * { filter: none; pointer-events: auto; user-select: auto; } html[data-auth-state="unlocked"] .gate-overlay { display: none !important; } /* ─── Overlay component (always rendered in HTML, shown only when locked) ─── */ .gate-overlay { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(255, 247, 237, 0.88); backdrop-filter: blur(1px); border-radius: 16px; z-index: 50; text-align: center; padding: 32px 24px; font-family: 'DM Sans', system-ui, sans-serif; } .gate-overlay .gate-lock { font-size: 36px; opacity: 0.85; line-height: 1; } .gate-overlay .gate-msg { font-family: 'Instrument Serif', Georgia, serif; font-size: 22px; font-style: italic; color: #0F172A; margin: 0; max-width: 480px; line-height: 1.3; } .gate-overlay .gate-msg .gate-sub { display: block; font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; font-style: normal; color: #64748B; margin-top: 6px; letter-spacing: 0.5px; } .gate-overlay .gate-signin { display: inline-block; padding: 13px 24px; background: #16A34A; color: #FFF7ED; border-radius: 10px; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-decoration: none; cursor: pointer; border: none; font-family: inherit; transition: transform 0.15s, box-shadow 0.15s; } .gate-overlay .gate-signin:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(22, 163, 74, 0.25); } .gate-overlay .gate-waitlist { font-size: 12px; color: #64748B; text-decoration: none; letter-spacing: 1px; font-weight: 600; } .gate-overlay .gate-waitlist:hover { color: #0F172A; text-decoration: underline; } /* ─── Warm gate variant · two-path layout, no padlock emoji ─── */ .gate-overlay.gate-overlay-warm { gap: 24px; padding: 48px 32px; max-width: 720px; margin: 0 auto; } /* On session decks (.gated-page wrapping the whole stacked slide stack), pin the overlay to the viewport so it covers the active slide rather than stretching across the full DOM height of all stacked slides. */ .gated-page > .gate-overlay.gate-overlay-warm { position: fixed; inset: 0; z-index: 100; max-width: none; background: rgba(255, 247, 237, 0.94); backdrop-filter: blur(4px); } .gated-page > .gate-overlay.gate-overlay-warm .gate-paths { max-width: 720px; } .gate-overlay .gate-eyebrow { display: inline-block; background: #16A34A; color: #FFF7ED; padding: 6px 16px; border-radius: 999px; font-size: 11px; letter-spacing: 3px; font-weight: 700; } .gate-overlay.gate-overlay-warm .gate-msg { font-size: 28px; margin: 0; } .gate-overlay.gate-overlay-warm .gate-sub { font-size: 14px; margin-top: 12px; line-height: 1.5; max-width: 560px; margin-left: auto; margin-right: auto; } .gate-overlay .gate-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; text-align: center; width: 100%; max-width: 640px; } .gate-overlay .gate-path { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 18px; background: rgba(255, 255, 255, 0.65); border: 1.5px solid rgba(15, 23, 42, 0.08); border-radius: 14px; } .gate-overlay .gate-path .gate-signin, .gate-overlay .gate-path .gate-cta-secondary { margin-top: auto; } .gate-overlay .gate-path-label { font-size: 10px; letter-spacing: 2.5px; font-weight: 700; color: #64748B; text-transform: uppercase; } .gate-overlay .gate-path-sub { font-size: 13px; color: #475569; margin: 0; line-height: 1.45; } .gate-overlay .gate-cta-secondary { display: inline-block; padding: 12px 20px; background: #FFF; color: #0F172A; border: 1.5px solid #0F172A; border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-decoration: none; transition: background 0.15s, color 0.15s; } .gate-overlay .gate-cta-secondary:hover { background: #0F172A; color: #FFF7ED; } @media (max-width: 720px) { .gate-overlay .gate-paths { grid-template-columns: 1fr; gap: 18px; } } /* ─── Topnav auth affordance (Sign in / greeting · Sign out) ─── */ [data-auth-slot] { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 2px; font-weight: 700; font-family: 'DM Sans', system-ui, sans-serif; } [data-auth-slot] a, [data-auth-slot] button { color: #64748B; text-decoration: none; cursor: pointer; background: none; border: none; font: inherit; padding: 6px 2px; letter-spacing: inherit; font-weight: inherit; } [data-auth-slot] a:hover, [data-auth-slot] button:hover { color: #16A34A; } [data-auth-slot] .auth-greeting { font-weight: 500; color: #475569; font-size: 11px; letter-spacing: 1px; } [data-auth-slot] .auth-greeting strong { color: #0F172A; font-weight: 700; } /* ─── Signed-in compact avatar + sign-out icon ─── */ [data-auth-slot] .auth-avatar { display: inline-flex; align-items: center; gap: 8px; } [data-auth-slot] .auth-avatar-letter { width: 32px; height: 32px; border-radius: 50%; background: #16A34A; color: #FFF7ED; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; letter-spacing: 0; text-transform: uppercase; flex-shrink: 0; } [data-auth-slot] .auth-signout-icon { background: transparent; border: 1.5px solid #CBD5E1; color: #64748B; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; letter-spacing: 0; transition: background 0.15s, color 0.15s, border-color 0.15s; } [data-auth-slot] .auth-signout-icon:hover { background: #0F172A; color: #FFF7ED; border-color: #0F172A; } /* Hide the italic brand tagline when signed in so the topbar breathes */ html[data-auth-state="unlocked"] .brand-tagline { display: none; } /* Hide topnav slot until JS knows what to render (prevents flicker) */ html[data-auth-state="loading"] [data-auth-slot] { visibility: hidden; } /* ─── Hide Netlify Identity widget's default button (we use our own) ─── */ .netlify-identity-button { display: none !important; }