/* ========================================= VARIABLES & DESIGN TOKENS ========================================= */ :root { --bg-void: #030407; --accent-glow: #D4AF37; --text-bright: #F5E6DA; --text-dim: #A88160; --border-light: rgba(212, 175, 55, 0.15); --font-display: 'Fraunces', serif; --font-body: 'Satoshi', sans-serif; --transition-smooth: 0.8s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 0.3s ease; } /* ========================================= RESET & BASE STYLES ========================================= */ * { margin: 0; padding: 0; box-sizing: border-box; cursor: none; } html { scroll-behavior: initial; } body { font-family: var(--font-body); background-color: transparent; /* WebGL handles bg */ color: var(--text-bright); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Custom Cursor */ .cursor { width: 8px; height: 8px; background-color: var(--accent-glow); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); mix-blend-mode: difference; transition: width 0.3s, height 0.3s, background-color 0.3s; will-change: transform; } .cursor-follower { width: 40px; height: 40px; border: 1px solid rgba(212, 175, 55, 0.5); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, border-color 0.3s; will-change: transform; } .cursor-follower.active { width: 60px; height: 60px; border-color: var(--accent-glow); background-color: rgba(212, 175, 55, 0.15); } /* Grain Overlay */ .grain-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } /* WebGL Canvas */ #webgl-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; background-color: var(--bg-void); /* Fallback */ } /* Opt-in fade: the canvas is visible by default (so any page that doesn't wire up the .is-ready toggle still shows its background). Only pages that add BOTH .fade-in (immediately) and later .is-ready (when the scene is built) get the smooth fade. This avoids a page's background silently staying invisible if its scene JS never adds the ready class. */ #webgl-canvas.fade-in { opacity: 0; transition: opacity 0.8s ease; } #webgl-canvas.fade-in.is-ready { opacity: 1; } /* Typography */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; } /* Prevent font descender / swash cutoffs in overflow-hidden wrappers */ .text-row { padding-bottom: 0.3em; margin-bottom: -0.3em; padding-right: 0.15em; margin-right: -0.15em; } /* ========================================= LAYOUT & COMPONENTS ========================================= */ .container { max-width: 1400px; margin: 0 auto; padding: 0 5%; } /* Navbar */ .navbar { position: fixed; top: 0; width: 100%; padding: 2rem 5%; display: flex; justify-content: space-between; align-items: center; z-index: 100; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(3, 4, 7, 0.4); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } /* WordPress core injects `html { margin-top: 32px !important; }` (see wp_admin_bar_render() in wp-includes/admin-bar.php) whenever the admin bar is showing. That margin shifts the whole viewport's rendering origin down, which drags our position:fixed navbar down with it too (fixed positioning is normally viewport-relative, but a margin on the root element itself still offsets it). Counteract it directly with the same !important specificity, since WP's own inline