/* Password gate — scoped to pages with data-protected="1" Content hiding only activates when JS adds .js-gate to , so no-JS users still see the page. */ html.js-gate body[data-protected="1"] .site-header, html.js-gate body[data-protected="1"] main, html.js-gate body[data-protected="1"] section, html.js-gate body[data-protected="1"] footer { visibility: hidden; } html.js-gate body[data-protected="1"].unlocked .site-header, html.js-gate body[data-protected="1"].unlocked main, html.js-gate body[data-protected="1"].unlocked section, html.js-gate body[data-protected="1"].unlocked footer { visibility: visible !important; } /* Overlay */ #gate-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background-color: rgba(242, 234, 217, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 1rem; } /* Card */ .gate-card { background: #ffffff; border-radius: 6px; box-shadow: 0 8px 40px rgba(92, 91, 77, 0.18), 0 2px 8px rgba(92, 91, 77, 0.10); max-width: 420px; width: 100%; padding: 2.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } /* Lock icon */ .gate-icon { font-size: 1.75rem; color: var(--gold, #c2a253); margin-bottom: 0.25rem; line-height: 1; } /* Title */ .gate-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; font-weight: 700; color: var(--text, #5c5b4d); margin: 0; line-height: 1.3; } /* Description */ .gate-desc { font-family: 'Lora', Georgia, serif; font-size: 0.95rem; color: var(--text, #5c5b4d); margin: 0.25rem 0 0.5rem; line-height: 1.6; opacity: 0.85; } /* Error message */ .gate-error { font-family: 'Montserrat', Arial, sans-serif; font-size: 0.8rem; color: #9b3a2a; background: #fdf0ed; border: 1px solid #e8c4bc; border-radius: 4px; padding: 0.5rem 0.75rem; margin: 0; width: 100%; box-sizing: border-box; } /* Input */ .gate-input { font-family: 'Montserrat', Arial, sans-serif; font-size: 1rem; width: 100%; box-sizing: border-box; padding: 0.65rem 0.9rem; border: 1px solid var(--line, #e6dcc6); border-radius: 4px; background: var(--cream, #faf6ed); color: var(--text, #5c5b4d); outline: none; transition: border-color 0.2s; letter-spacing: 0.05em; } .gate-input:focus { border-color: var(--gold, #c2a253); box-shadow: 0 0 0 3px rgba(194, 162, 83, 0.15); } /* Submit button */ .gate-btn { font-family: 'Montserrat', Arial, sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; width: 100%; padding: 0.75rem 1rem; background: var(--olive, #6f7a4d); color: #ffffff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s, transform 0.1s; margin-top: 0.25rem; } .gate-btn:hover { background: var(--olive-deep, #54603a); } .gate-btn:active { transform: scale(0.98); } /* Back link */ .gate-back { font-family: 'Montserrat', Arial, sans-serif; font-size: 0.8rem; color: var(--gold-deep, #a8863a); text-decoration: none; margin-top: 0.25rem; opacity: 0.85; transition: opacity 0.2s; } .gate-back:hover { opacity: 1; text-decoration: underline; } /* Shake animation on wrong password */ @keyframes gate-shake { 0% { transform: translateX(0); } 15% { transform: translateX(-6px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-5px); } 60% { transform: translateX(5px); } 75% { transform: translateX(-3px); } 90% { transform: translateX(3px); } 100% { transform: translateX(0); } } .gate-input.gate-shake { animation: gate-shake 0.4s ease-in-out; border-color: #9b3a2a; }