/* ============================================================ PROJECT PASSWORD GATE Shown before any individual case-study page renders. Matches site dark/light theme tokens from style.css. ============================================================ */ /* Hide page content until unlocked. Applied to as early as possible to avoid a flash of the protected page. Removed once access is granted. */ html.gate-locked body > *:not(.gate-overlay) { visibility: hidden !important; } html.gate-locked, html.gate-locked body { overflow: hidden !important; } .gate-overlay { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: clamp(1.25rem, 5vw, 3rem); background: var(--bg, #0a0a0c); color: var(--text, #e8e8ea); font-family: "General Sans", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } /* subtle atmospheric glow behind the card */ .gate-overlay::before { content: ""; position: absolute; width: min(70vw, 640px); height: min(70vw, 640px); border-radius: 50%; background: radial-gradient(circle, var(--accent-glow, rgba(200,255,77,0.16)), transparent 62%); filter: blur(8px); opacity: 0.55; pointer-events: none; } .gate-card { position: relative; width: 100%; max-width: 460px; background: var(--surface, #101013); border: 1px solid var(--divider, #25252c); border-radius: var(--radius-lg, 18px); box-shadow: var(--shadow-md, 0 16px 40px rgba(0,0,0,0.5)); padding: clamp(1.75rem, 4vw, 2.5rem); animation: gate-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes gate-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } } .gate-brand { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; } .gate-brand svg { display: block; } .gate-brand span { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--text-strong, #fff); } .gate-eyebrow { font-family: "Geist Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; color: var(--accent, #c8ff4d); display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; } .gate-eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--accent, #c8ff4d); display: inline-block; } .gate-card h1 { font-family: "Clash Display", system-ui, sans-serif; font-weight: 600; font-size: clamp(1.4rem, 3.4vw, 1.7rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--text-strong, #fff); margin: 0 0 0.6rem; } .gate-card p.gate-lead { font-size: 0.95rem; line-height: 1.55; color: var(--text-muted, #9a9aa3); margin: 0 0 1.5rem; } .gate-form { display: flex; flex-direction: column; gap: 0.75rem; } .gate-field { display: flex; gap: 0.6rem; } .gate-input { flex: 1; min-width: 0; background: var(--surface-3, #1c1c22); border: 1px solid var(--divider, #25252c); border-radius: var(--radius-md, 12px); color: var(--text-strong, #fff); font: inherit; font-size: 1rem; padding: 0.85rem 1rem; transition: border-color 0.18s ease, box-shadow 0.18s ease; outline: none; } .gate-input::placeholder { color: var(--text-muted, #9a9aa3); opacity: 0.7; } .gate-input:focus { border-color: var(--accent, #c8ff4d); box-shadow: 0 0 0 3px var(--accent-glow, rgba(200,255,77,0.16)); } .gate-input.gate-shake { animation: gate-shake 0.4s; border-color: #ff6b6b; } @keyframes gate-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } } .gate-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--accent, #c8ff4d); color: var(--accent-ink, #0a0a0c); border: none; border-radius: var(--radius-md, 12px); font: inherit; font-weight: 600; font-size: 1rem; padding: 0.85rem 1.3rem; cursor: pointer; white-space: nowrap; transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } .gate-submit:hover { background: var(--accent-hover, #d6ff73); transform: translateY(-2px); box-shadow: 0 10px 30px var(--accent-glow, rgba(200,255,77,0.16)); } .gate-submit:active { transform: translateY(0); } .gate-error { font-size: 0.85rem; color: #ff8585; min-height: 1.1em; margin: 0.15rem 0 0; } .gate-divider { display: flex; align-items: center; gap: 0.85rem; margin: 1.4rem 0 1.1rem; color: var(--text-muted, #9a9aa3); font-size: 0.78rem; } .gate-divider::before, .gate-divider::after { content: ""; flex: 1; height: 1px; background: var(--divider, #25252c); } .gate-help { display: inline-flex; align-items: center; gap: 0.5rem; width: 100%; justify-content: center; text-align: center; background: transparent; color: var(--text, #e8e8ea); border: 1px solid var(--divider, #25252c); border-radius: var(--radius-md, 12px); font: inherit; font-size: 0.92rem; font-weight: 500; padding: 0.8rem 1rem; text-decoration: none; cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease; } .gate-help:hover { border-color: var(--accent-line, rgba(200,255,77,0.30)); color: var(--accent, #c8ff4d); background: var(--accent-soft, rgba(200,255,77,0.12)); } .gate-help svg { flex: none; } .gate-back { display: block; text-align: center; margin-top: 1.25rem; font-size: 0.82rem; color: var(--text-muted, #9a9aa3); text-decoration: none; transition: color 0.18s ease; } .gate-back:hover { color: var(--text-strong, #fff); } @media (max-width: 480px) { .gate-field { flex-direction: column; } .gate-submit { width: 100%; } } /* ---------- GATE CUSTOM CURSOR ---------- */ /* The overlay hides the site's own cursor, so it renders its own dot + ring above the card. The lime accent matches the dark overlay theme. */ .gate-cursor-dot, .gate-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); will-change: transform; z-index: 100002; } .gate-cursor-dot { width: 9px; height: 9px; background: var(--accent, #c8ff4d); opacity: 0; box-shadow: 0 0 10px 1px var(--accent-glow, rgba(200,255,77,0.16)); transition: width 0.25s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), height 0.25s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), opacity 0.25s, box-shadow 0.22s ease; } /* Ring is consistently large (no tiny idle state). */ .gate-cursor-ring { width: 48px; height: 48px; z-index: 100001; border: 1.6px solid var(--accent-line, rgba(200,255,77,0.30)); background: var(--accent-soft, rgba(200,255,77,0.12)); opacity: 0; box-shadow: 0 0 0 1px var(--accent-glow, rgba(200,255,77,0.16)), 0 0 16px 2px var(--accent-glow, rgba(200,255,77,0.16)); transition: width 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), height 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), border-color 0.22s ease, border-width 0.22s ease, opacity 0.22s ease, box-shadow 0.25s ease, background-color 0.22s ease; } /* Solid disc that inverts the overlay text/icons it overlaps. */ .gate-cursor-blend { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); will-change: transform; z-index: 100000; width: 30px; height: 30px; background: #fff; opacity: 0; mix-blend-mode: difference; transition: width 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), height 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1)), opacity 0.25s; } .gate-cursor-dot.hover-active { width: 12px; height: 12px; box-shadow: 0 0 16px 3px var(--accent-glow, rgba(200,255,77,0.16)); } .gate-cursor-ring.hover-active { width: 72px; height: 72px; opacity: 1; border-width: 2px; border-color: var(--accent, #c8ff4d); box-shadow: 0 0 0 1px var(--accent-glow, rgba(200,255,77,0.16)), 0 0 28px 6px var(--accent-glow, rgba(200,255,77,0.16)); } .gate-cursor-blend.hover-active { width: 46px; height: 46px; opacity: 1; } /* Hide the native pointer over the overlay once the custom cursor is active. */ .gate-overlay.gate-has-cursor, .gate-overlay.gate-has-cursor a, .gate-overlay.gate-has-cursor button, .gate-overlay.gate-has-cursor input { cursor: none; } @media (hover: none), (pointer: coarse) { .gate-cursor-dot, .gate-cursor-ring, .gate-cursor-blend { display: none; } .gate-overlay.gate-has-cursor, .gate-overlay.gate-has-cursor a, .gate-overlay.gate-has-cursor button, .gate-overlay.gate-has-cursor input { cursor: auto; } } @media (prefers-reduced-motion: reduce) { .gate-cursor-dot, .gate-cursor-ring, .gate-cursor-blend { display: none; } }