/* ─── NDA Gate · gate.css ──────────────────────────────────────────────────── Drop-in replacement for the existing gate.css. Works alongside Bootstrap and the existing styles.css. Design tokens are scoped under .gate-* so they don't collide with the rest of the page. If your styles.css already defines these CSS variables globally, you can remove the :root block below. ──────────────────────────────────────────────────────────────────────────── */ :root { --gate-orange: #EA7404; --gate-card-bg: #ffffff; --gate-surface-warm: #f8f7f4; --gate-border: #e8e4dd; --gate-border-mid: #d4cfc7; --gate-text-dark: #1a1a1a; --gate-text-muted: #666666; --gate-text-link: #7A6B55; --gate-amber-muted: hsl(40, 16%, 40%); --gate-insight-bg: hsl(35, 50%, 96%); --gate-radius: 10px; --gate-radius-input: 8px; } /* ─── Animations ─────────────────────────────────────────────────────────── */ @keyframes gate-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes gate-badge-pop { 0% { opacity: 0; transform: scale(0.92) translateY(6px); } 60% { transform: scale(1.04) translateY(-1px); } 100% { opacity: 1; transform: none; } } /* ─── Anti-FOUC ────────────────────────────────────────────────────────────── The script already sets data-nda="unlocked" on if the cookie exists. This hides the gate card before first paint for returning visitors, preventing any flicker. ──────────────────────────────────────────────────────────────────────────── */ [data-nda="unlocked"] .locked-placeholder { display: none !important; } /* ─── Decoy fade layer ──────────────────────────────────────────────────────── aria-hidden greeked shapes that fade to nothing under a CSS mask gradient. Real copy never lives here — this is purely decorative. ──────────────────────────────────────────────────────────────────────────── */ .gate-fade-decoy .container { max-width: 960px; } #projectIntro { margin-bottom: 0; } .gate-fade-decoy { padding-top: 0; padding-bottom: 2rem; -webkit-mask-image: linear-gradient( to bottom, black 0%, rgba(0, 0, 0, 0.45) 42%, transparent 88% ); mask-image: linear-gradient( to bottom, black 0%, rgba(0, 0, 0, 0.45) 42%, transparent 88% ); pointer-events: none; user-select: none; } /* Skeleton shapes inside the decoy */ .gate-decoy-head { height: 22px; background: #D8C9A8; border-radius: 5px; display: inline-block; } .gate-decoy-bar { height: 12px; background: #E3DDD0; border-radius: 5px; } .gate-decoy-card-bar { height: 44px; background: #EAE5D9; border-radius: 8px; } /* ─── Gate card wrapper ──────────────────────────────────────────────────── */ .gate-card-wrap { display: flex; justify-content: center; /* Negative margin pulls the card up to overlap the faded decoy */ margin-top: -120px; position: relative; padding: 0 1.5rem 5rem; } /* ─── Gate card ──────────────────────────────────────────────────────────── */ .gate-card { width: min(480px, 100%); background: var(--gate-card-bg); border: 1px solid var(--gate-border); border-radius: var(--gate-radius); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06); padding: 2.25rem 2.5rem; text-align: center; } .gate-lock-icon { display: flex; justify-content: center; margin-bottom: 1rem; } /* Eyebrow label above title */ .gate-eyebrow { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--gate-amber-muted); margin: 0 0 0.5rem; } .gate-card h2 { font-family: "EB Garamond", Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 500; color: var(--gate-text-dark); line-height: 1.25; margin: 0 0 0.65rem; } .gate-card p { font-size: 0.875rem; line-height: 1.65; color: var(--gate-text-muted); max-width: 30em; margin: 0 auto 1.5rem; } /* ─── Password form ──────────────────────────────────────────────────────── */ .gate-form { /* Overrides any Bootstrap form defaults */ display: block !important; } .gate-input-group { display: flex; gap: 0.5rem; } .gate-input { flex: 1; min-width: 0; padding: 0.65rem 0.9rem; border: 1px solid var(--gate-border-mid); border-radius: var(--gate-radius-input); font-family: inherit; font-size: 0.9rem; background: var(--gate-card-bg); color: var(--gate-text-dark); outline: none; transition: border-color 150ms ease, box-shadow 150ms ease; /* Reset Bootstrap */ box-shadow: none; } .gate-input:focus { border-color: var(--gate-orange); box-shadow: 0 0 0 3px rgba(234, 116, 4, 0.12); } .gate-btn { background: var(--gate-orange); color: #ffffff; border: none; border-radius: var(--gate-radius-input); padding: 0.65rem 1.35rem; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 150ms ease; } .gate-btn:hover:not(:disabled) { background: #D06903; } .gate-btn:disabled { opacity: 0.65; cursor: not-allowed; } .gate-form .gate-error { font-size: 0.8rem; color: #CC2200; margin: 0.5rem 0 0; text-align: left; } .gate-card .gate-request { font-size: 0.8rem; color: var(--gate-text-muted); margin: 1rem 0 0; } .gate-request a { color: var(--gate-text-link); text-decoration: underline; } .gate-request a:hover { color: var(--gate-orange); } /* ─── Unlocked: entrance animation ─────────────────────────────────────────── Applied by gate.js only on password unlock (not cookie-based page load). ──────────────────────────────────────────────────────────────────────────── */ .locked-content.gate-revealing { animation: gate-reveal 600ms ease-in-out both; } /* ─── Unlock toast (fixed, auto-dismisses after ~3s) ────────────────────── */ .gate-unlock-toast { position: fixed; bottom: 1.75rem; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.4rem; background: var(--gate-insight-bg); border: 1px solid var(--gate-border); border-radius: 999px; padding: 0.35rem 1rem; font-family: inherit; font-size: 0.72rem; font-weight: 600; color: var(--gate-amber-muted); white-space: nowrap; z-index: 9999; animation: gate-badge-pop 400ms ease-in-out both; transition: opacity 500ms ease, transform 500ms ease; } .gate-unlock-toast--out { opacity: 0; transform: translateX(-50%) translateY(6px); } /* ─── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .locked-content.gate-revealing, .gate-unlock-toast { animation: none; transition: none; } }