/* ══════════════════════════════════════════════════════════════ CURTIX STUDIO — BACKDROP Four fixed, non-scrolling layers behind all page content, shared by every page. Loaded right after tokens.css, before the page's own stylesheet. 1. Flat var(--bg) on the body. 2. A faint 80px grid, masked so it fades toward the viewport edges. 3. A single soft radial glow, positioned per page via --glow-x / --glow-y set as inline custom properties on that page's . 4. The real Curtix crown logo (/curtix-crown.webp), oversized, bottom-right, cropped by the viewport edge. mix-blend-mode: screen drops its pure-black background to nothing; opacity keeps it barely visible. The nav and case-study topbar still use the geometric inline-SVG crown from /js/icons.js — the photographic logo turns soft at icon scale, so it is reserved for large, low-opacity display use only (see CLAUDE.md). Markup (path is root-relative to each page, e.g. ../../curtix-crown.webp from a two-deep case study page): ══════════════════════════════════════════════════════════════ */ body { background: var(--bg); } .backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; animation: backdropIn 1.4s ease forwards; } @keyframes backdropIn { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .backdrop { opacity: 1; animation: none; } } /* ─── LAYER 2: GRID ─── */ .backdrop-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(to right, rgba(255,255,255,0.03) 0 1px, transparent 1px 80px), repeating-linear-gradient(to bottom, rgba(255,255,255,0.03) 0 1px, transparent 1px 80px); mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, var(--black) 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, var(--black) 40%, transparent 100%); } /* ─── LAYER 3: GLOW ─── Position defaults to the upper-left of the content area; each page overrides --glow-x / --glow-y on to sit behind its own headline. */ .backdrop-glow { position: absolute; left: var(--glow-x, 20%); top: var(--glow-y, 15%); width: 900px; height: 900px; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--accent-deep) 0%, transparent 70%); opacity: 0.35; filter: blur(80px); } /* ─── LAYER 4: MARK ─── Real photographic logo. mix-blend-mode: screen drops its pure-black background to nothing against var(--bg); opacity tuned by eye since a chrome render reads brighter at low opacity than the old flat vector did. */ .backdrop-mark { position: absolute; right: -12%; bottom: -18%; width: 900px; height: auto; display: block; opacity: 0.02; mix-blend-mode: screen; } @media (max-width: 640px) { .backdrop-glow { width: 600px; height: 600px; } .backdrop-mark { width: 560px; right: -20%; bottom: -14%; } }