/* * J3:30 — Shared Site Navigation * ───────────────────────────────────────────────────────────────── * Single source of truth for all nav styling. * Link from root pages: * Link from subfolders: * * Each page must also include the Google Fonts link: * family=Anton&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700 * * Required :root custom properties in each page: * --t-fast --t-med --t-slow --ease-out-expo * --ink --ink-30 --ink-50 --ink-70 --ink-90 * --accent --accent-bright --accent-glow --accent-glow-soft * --font-mono --font-body * * Nav HTML template (copy into every page's ): * *

* * * * * * * * Nav JS before : * (root pages) * (subfolders) * ───────────────────────────────────────────────────────────────── */ /* ── Logo ── */ .logo { position: fixed; top: 1.75rem; left: 1.75rem; width: 64px; height: 64px; z-index: 200; display: block; border-radius: 50%; overflow: hidden; transition: transform var(--t-med) var(--ease-out-expo), filter var(--t-med) var(--ease-out-expo); filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5)); } .logo img { width: 100%; height: 100%; display: block; object-fit: cover; } .logo:hover { transform: scale(1.06); filter: drop-shadow(0 6px 28px rgba(91,192,235,0.4)) drop-shadow(0 0 0 1px rgba(91,192,235,0.2)); } /* ── Hamburger toggle ── */ .menu-toggle { position: fixed; top: 2rem; right: 2rem; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; z-index: 300; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 7px; padding: 0; } .menu-toggle .bar { display: block; width: 32px; height: 2.5px; background: var(--ink); transition: all var(--t-med) var(--ease-out-expo); transform-origin: center; } .menu-toggle:hover .bar { background: var(--accent-bright); box-shadow: 0 0 8px var(--accent-glow-soft); } .menu-toggle.active .bar:nth-child(1) { transform: translateY(9.5px) rotate(45deg); } .menu-toggle.active .bar:nth-child(2) { opacity: 0; transform: translateX(20px); } .menu-toggle.active .bar:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); } /* ── Full-screen menu overlay ── */ .menu { position: fixed; inset: 0; background: rgba(2,6,11,0.96); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--t-med) var(--ease-out-expo); } .menu.active { opacity: 1; pointer-events: auto; } .menu-list { list-style: none; text-align: center; display: flex; flex-direction: column; gap: 1.25rem; } .menu-item { display: inline-block; font-family: 'Anton', 'Impact', sans-serif; font-size: clamp(2.25rem, 7vw, 5.5rem); letter-spacing: 0.04em; color: var(--ink); cursor: pointer; text-decoration: none; line-height: 1; transform: translateY(20px); opacity: 0; transition: transform var(--t-med) var(--ease-out-expo), opacity var(--t-med) var(--ease-out-expo); } .menu.active .menu-item { transform: translateY(0); opacity: 1; } .menu.active .menu-list li:nth-child(1) .menu-item { transition-delay: 0.10s; } .menu.active .menu-list li:nth-child(2) .menu-item { transition-delay: 0.18s; } .menu.active .menu-list li:nth-child(3) .menu-item { transition-delay: 0.26s; } .menu.active .menu-list li:nth-child(4) .menu-item { transition-delay: 0.34s; } .menu.active .menu-list li:nth-child(5) .menu-item { transition-delay: 0.42s; } /* ── Shimmer — signature hover interaction ── */ .shimmer { background: linear-gradient(110deg, var(--ink) 0%, var(--ink) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; transition: filter var(--t-fast) ease; } .shimmer:hover, .shimmer:focus-visible { background: linear-gradient(110deg, #041018 0%, #0a2838 15%, #5BC0EB 30%, var(--accent) 45%, #C8ECFB 50%, var(--accent) 55%, #5BC0EB 70%, #0a2838 85%, #041018 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer-flow 2.5s linear infinite; filter: drop-shadow(0 0 24px var(--accent-glow-soft)); } @keyframes shimmer-flow { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Social icons (inside menu overlay) ── */ .social { position: absolute; bottom: 3rem; left: 50%; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center; width: min(88vw, 520px); opacity: 0; transform: translateX(-50%) translateY(16px); transition: opacity var(--t-med) var(--ease-out-expo), transform var(--t-med) var(--ease-out-expo); } .menu.active .social { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0.50s; } .social a { color: var(--ink-50); display: flex; text-decoration: none; transition: color var(--t-fast) ease, transform var(--t-fast) var(--ease-out-expo), filter var(--t-fast) ease; } .social a:hover { color: var(--accent-bright); transform: translateY(-3px); filter: drop-shadow(0 0 8px var(--accent-glow)); } .social svg { width: 54px; height: 54px; fill: currentColor; } /* ── About overlay ── */ .about-section { position: fixed; inset: 0; background: rgba(2,6,11,0.96); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); z-index: 180; display: flex; align-items: center; justify-content: center; padding: 6rem 2rem 4rem; opacity: 0; pointer-events: none; transition: opacity var(--t-slow) var(--ease-out-expo); overflow-y: auto; } .about-section.active { opacity: 1; pointer-events: auto; } .about-content { max-width: 720px; width: 100%; } .about-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--ink-50); text-transform: uppercase; text-align: center; margin-bottom: 1.25rem; } .about-heading { font-family: 'Anton', 'Impact', sans-serif; font-size: clamp(3rem, 8vw, 6rem); letter-spacing: 0.04em; margin-bottom: 3rem; line-height: 1; text-align: center; } .shimmer-ambient { background: linear-gradient(110deg, #041018 0%, #5BC0EB 30%, var(--accent) 50%, #5BC0EB 70%, #041018 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer-flow 7s linear infinite; } .about-body { font-family: var(--font-body); font-size: 17px; font-weight: 400; line-height: 1.75; color: var(--ink-90); text-align: justify; hyphens: auto; margin-bottom: 2.5rem; } .about-scripture { border-left: 2px solid var(--accent); padding: 1rem 0 1rem 1.5rem; margin-top: 2.5rem; } .about-scripture-text { font-family: var(--font-body); font-style: italic; font-weight: 300; font-size: 1.05rem; line-height: 1.6; color: var(--ink-90); } .about-scripture-ref { display: block; margin-top: 0.5rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; color: var(--accent); text-transform: uppercase; } .about-close { position: fixed; top: 2rem; right: 2rem; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; color: var(--ink); display: flex; align-items: center; justify-content: center; transition: color var(--t-fast) ease, transform var(--t-med) var(--ease-out-expo), filter var(--t-fast) ease; z-index: 350; } .about-close:hover { color: var(--accent-bright); transform: rotate(90deg); filter: drop-shadow(0 0 8px var(--accent-glow)); } .about-close svg { width: 22px; height: 22px; } /* ── Mobile overrides ── */ @media (max-width: 640px) { .logo { top: 1.25rem; left: 1.25rem; width: 54px; height: 54px; } .menu-toggle { top: 1.5rem; right: 1.25rem; } .about-section { padding: 6rem 1.5rem 3rem; } .about-body { text-align: left; hyphens: none; } .about-close { top: 1.5rem; right: 1.25rem; } .social { bottom: 2rem; gap: 1.5rem; width: min(88vw, 264px); } .menu-list { gap: 0.85rem; } }