/* Better Call Zak marketing-page styles. Extracted from the design source so the CSP can stay tight (style-src 'self' 'unsafe-inline' for the few inline style="..." attributes still in the templates). */ @import url("/static/fonts/_fontfaces.css"); /* Icons are inline SVG (app.web.icons) — no @import for an icon font (WEB-07 dropped the broken Tabler webfont). */ @import url("/static/css/app.css"); :root { --bg: #05060c; --bg2: #0a0c18; --white: #f6f5ff; --dim: #a9a7c8; --violet: #7b5cff; --pink: #ff5cab; --cyan: #3fe0d0; --gold: #ffcf6b; --red: #ff7a5c; --glass: rgba(255, 255, 255, 0.06); --glass-brd: rgba(255, 255, 255, 0.14); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } /* `overflow-x` lives on ONLY. Putting it on as well establishes a scrolling container on the root and breaks `position: sticky` for descendants in the body's scroll context (SHELL-04). Aurora blobs in fixed-positioned layers still need horizontal clipping somewhere — body provides it. */ body { background: var(--bg); color: var(--white); font-family: 'Sora', sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; } ::selection { background: var(--pink); color: #fff; } a { text-decoration: none; color: inherit; } /* AURORA */ .aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; } .blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.5; mix-blend-mode: screen; will-change: transform; } .b1 { width: 55vw; height: 55vw; background: radial-gradient(circle, var(--violet), transparent 65%); top: -18%; left: -12%; animation: f1 20s ease-in-out infinite; } .b2 { width: 50vw; height: 50vw; background: radial-gradient(circle, var(--pink), transparent 65%); top: 5%; right: -16%; animation: f2 24s ease-in-out infinite; } .b3 { width: 48vw; height: 48vw; background: radial-gradient(circle, var(--cyan), transparent 65%); bottom: -22%; left: 25%; animation: f3 22s ease-in-out infinite; } @keyframes f1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(7vw, 5vh) scale(1.15); } } @keyframes f2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-6vw, 7vh) scale(1.1); } } @keyframes f3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5vw, -6vh) scale(1.18); } } .tint { position: fixed; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5, 6, 12, 0.35), rgba(5, 6, 12, 0.8)); pointer-events: none; } body::after { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .page { position: relative; z-index: 2; } /* CURSOR */ .cursor { position: fixed; width: 12px; height: 12px; border-radius: 50%; background: var(--white); z-index: 9998; pointer-events: none; mix-blend-mode: difference; transform: translate(-50%, -50%); transition: width .25s, height .25s; } .cursor.big { width: 56px; height: 56px; background: rgba(255, 255, 255, 0.16); } @media (max-width: 900px) { .cursor { display: none; } } /* NAV */ /* Scope to the marketing top-bar nav only — bare `nav { ... }` would leak onto every