/* ============================================================ BASE RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } body { font-family: 'Raleway', 'Segoe UI', sans-serif; background: #090c10; } /* ============================================================ PHOTO HERO BACKGROUND Expected: foggy-woods.jpg sits in the same folder as this styles.css and index.html (site root). Resolved URL: /foggy-woods.jpg ============================================================ */ .bg-forest { position: fixed; inset: 0; z-index: 0; background-color: #090c10; background-image: url('foggy-woods.jpg'); background-size: cover; background-position: center 20%; background-repeat: no-repeat; } /* ============================================================ FOG — STATIC BASE GRADIENT Gentle top-edge lift only; lets the photo breathe below ============================================================ */ .fog-static { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient( 180deg, rgba(205, 222, 228, 0.32) 0%, rgba(190, 210, 218, 0.18) 6%, rgba(172, 196, 204, 0.08) 18%, rgba(150, 178, 188, 0.02) 30%, transparent 44% ); } /* ============================================================ FOG — SVG TURBULENCE OVERLAY #fog-svg: position + screen blend. .fog-r CSS keyframes independently translate/scale each rect. JS (fog-turbulence IIFE) varies feTurbulence baseFrequency for organic, non-repeating morphing (~10 fps throttled). DEBUG_FOG = true in script.js adds class .fog-debug to which boosts visibility for tuning. ============================================================ */ #fog-svg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; mix-blend-mode: screen; opacity: 0.85; } /* transform-box: view-box → % translate is relative to SVG viewport */ .fog-r { will-change: transform; transform-box: view-box; transform-origin: 50% 50%; } .fog-r1 { animation: fogR1 75s ease-in-out infinite alternate; } .fog-r2 { animation: fogR2 55s ease-in-out infinite alternate; animation-delay: -20s; } .fog-r3 { animation: fogR3 105s ease-in-out infinite alternate; animation-delay: -44s; } .fog-r4 { animation: fogR4 48s ease-in-out infinite alternate; animation-delay: -15s; } .fog-r5 { animation: fogR5 88s ease-in-out infinite alternate; animation-delay: -35s; } @keyframes fogR1 { to { transform: translate( 8%, 3%) scale(1.05); } } @keyframes fogR2 { to { transform: translate(-8%, 2%) scale(1.04); } } @keyframes fogR3 { to { transform: translate( 7%, -3%) scale(1.06); } } @keyframes fogR4 { to { transform: translate(-6%, 4%) scale(1.04); } } @keyframes fogR5 { to { transform: translate( 9%, 1%) scale(1.05); } } @media (prefers-reduced-motion: reduce) { .fog-r { animation: none; } } /* ── FOG DEBUG BOOST — set DEBUG_FOG = true in script.js ─────────── */ .fog-debug #fog-svg { opacity: 1 !important; } .fog-debug .fog-r { fill-opacity: 0.7 !important; } /* ============================================================ SITE WRAPPER ============================================================ */ .site-wrapper { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; } /* ============================================================ NAVIGATION ============================================================ */ .main-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 18px 24px 14px; flex-shrink: 0; } .tab-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(240, 248, 242, 0.80); font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.09em; text-transform: uppercase; padding: 7px 15px; cursor: pointer; border-radius: 5px; white-space: nowrap; transition: background 0.30s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.30s ease, border-radius 0.30s ease, color 0.30s ease, box-shadow 0.30s ease; } .tab-btn:hover { background: rgba(12, 12, 12, 0.68); border-color: rgba(255, 255, 255, 0.10); border-radius: 22px; color: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 0 10px rgba(0, 0, 0, 0.2); } .tab-btn.active { background: rgba(10, 10, 10, 0.58); border-color: rgba(255, 255, 255, 0.18); border-radius: 18px; color: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); } /* ============================================================ MAIN CONTENT AREA ============================================================ */ .main-content { flex: 1; position: relative; overflow: hidden; } /* ============================================================ TAB SECTIONS ============================================================ */ .tab-section { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } .tab-section.active { opacity: 1; pointer-events: auto; } /* ============================================================ HOME — SITE TITLE ============================================================ */ #tab-home { align-items: center; justify-content: center; } .site-title { font-family: 'Rubik', 'Nunito', 'Arial Rounded MT Bold', Arial, sans-serif; font-weight: 900; font-size: clamp(52px, 10.5vw, 118px); letter-spacing: -0.04em; line-height: 1; user-select: none; position: relative; background: linear-gradient( 45deg, #000000 0%, #050409 13%, #090813 26%, #0D0C1D 39%, #111027 52%, #151434 65%, #19183B 78%, #1E1C40 100% ); background-size: 300% 300%; background-position: 0% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: titleSweep 20s ease-in-out infinite alternate; } @keyframes titleSweep { from { background-position: 0% 100%; } to { background-position: 100% 0%; } } .site-title::after { content: 'masoncord'; position: absolute; top: 0; left: 0; pointer-events: none; user-select: none; font: inherit; letter-spacing: inherit; background: radial-gradient( circle 280px at var(--cx, -9999px) var(--cy, -9999px), var(--glow-c, transparent) 0%, transparent 68% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ CONTENT PANELS (non-home tabs) ============================================================ */ .content-panel { background: rgba(6, 12, 6, 0.76); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 42px 52px; max-width: 920px; width: 90%; max-height: 78vh; overflow-y: auto; color: rgba(215, 232, 218, 0.88); } .content-panel h2 { font-family: 'Alfa Slab One', 'Clarendon', 'Clarendon BT', 'Clarendon LT Std', Georgia, serif; font-weight: 700; font-size: 30px; color: rgba(230, 242, 233, 0.96); margin-bottom: 30px; letter-spacing: -0.01em; border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding-bottom: 16px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; } .card { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 26px 28px; transition: background 0.28s ease, border-color 0.28s ease; } .card:hover { background: rgba(255, 255, 255, 0.065); border-color: rgba(255, 255, 255, 0.12); } .card h3 { font-family: 'Raleway', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(190, 215, 195, 0.72); margin-bottom: 10px; } .card p, .placeholder { font-size: 13px; color: rgba(160, 190, 165, 0.48); font-style: italic; } .content-panel::-webkit-scrollbar { width: 3px; } .content-panel::-webkit-scrollbar-track { background: transparent; } .content-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 2px; } /* ============================================================ FOOTER ============================================================ */ .site-footer { flex-shrink: 0; padding: 14px 24px; text-align: center; } .footer-email { color: rgba(190, 215, 194, 0.48); text-decoration: none; font-family: 'Raleway', sans-serif; font-size: 11px; letter-spacing: 0.10em; transition: color 0.30s ease; } .footer-email:hover { color: rgba(215, 235, 218, 0.85); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 860px) { .main-nav { padding: 12px 14px 10px; gap: 4px; } .tab-btn { font-size: 10px; padding: 6px 11px; } .content-panel { padding: 28px 26px; } .content-panel h2 { font-size: 24px; } } @media (max-width: 480px) { .tab-btn { font-size: 9.5px; padding: 5px 9px; letter-spacing: 0.06em; } .site-title { font-size: clamp(38px, 14vw, 62px); } }