@font-face { font-family: 'Executive'; src: url('../assets/fonts/Executive-Regular.otf') format('opentype'); font-weight: 400; } @font-face { font-family: 'Executive'; src: url('../assets/fonts/Executive-Bold.otf') format('opentype'); font-weight: 700; } /* Shared light-mode background — same liquid gradient the app uses in light mode, so login + app read as one continuous backdrop. The LiquidBackground shader (js/three-bg.js, via auth-bg.js) reads these --liquid-* vars; data-theme="light" on selects the light feel. */ :root { --bg-main: #eef6fa; /* PALE SILVER HOLOGRAM — pastel iridescent tints (rose · gold · cyan · periwinkle · lavender · mint) over a near-white silver base, so the foil logo reads as bright pale chrome catching holographic light. */ --liquid-color-1: #FFC9E4; /* pale rose */ --liquid-color-2: #FFF4C9; /* pale gold */ --liquid-color-3: #C9F0FF; /* pale cyan */ --liquid-color-4: #CFE0FF; /* pale periwinkle */ --liquid-color-5: #E6D6FF; /* pale lavender */ --liquid-color-6: #D2FBE8; /* pale mint */ --liquid-base: #eef6fa; /* pale sky */ } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; background: var(--bg-main); color: #FFFFFF; font-family: 'Host Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 24px; overflow: hidden; } #auth-bg { position: fixed; inset: 0; z-index: 0; } #auth-bg canvas { display: block; } .hidden { display: none !important; } /* Retro TV / film grain over the WHOLE 3D scene (gradient + silver logo alike), sitting above the canvas but below the login UI so the pill stays crisp. The stepped position jumps = boiling TV-static grain. */ .scene-grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay; will-change: background-position; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 240px 240px; animation: grainShift 0.6s steps(6) infinite; } @keyframes grainShift { 0% { background-position: 0 0; } 17% { background-position: -62px 38px; } 33% { background-position: 44px -56px; } 50% { background-position: -34px -44px; } 67% { background-position: 58px 46px; } 83% { background-position: -50px 14px; } 100% { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .scene-grain { animation: none; } } /* ---------- public top bar (login / about / pricing / signup) ---------- LOEWE structure, mirroring the app header: small brand mark + plain text links LEFT (underline = current page), the single dark CTA RIGHT. Flat — no pills, transparent over the scene. */ .auth-topbar { /* width + gutters MATCH the logged-in app header (the standard): .floating-topbar is max 1280 (1200 content + 2×40 gutter), 40px inline pad. */ position: fixed; top: 0; left: 0; right: 0; z-index: 10; max-width: calc(1200px + var(--space-10) * 2); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px var(--space-10) 14px; animation: authTopbarIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } /* full-bleed frosted strip behind the fixed bar (mirrors the app's .bar-flat::before) so scrolling content reads legibly beneath it. */ .auth-topbar::before { content: ''; position: absolute; inset: 0; left: 50%; transform: translateX(-50%); width: 100vw; z-index: -1; background: rgba(238, 246, 250, 0.72); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); } html.demo-dark .auth-topbar::before { background: rgba(10, 11, 15, 0.72); } @keyframes authTopbarIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .auth-topbar { animation: none; } } /* LEFT — text links, one row. Typography = the SIGNED-IN app header verbatim (.bar-flat .top-nav-link): 14px · weight 460 · opacity .58 · 24px gap · underline offset 7px / 1.5px · active = underline + weight 600. */ .auth-nav { display: flex; align-items: center; gap: 24px; min-width: 0; } .auth-nav-link { font-size: 14px; font-weight: 460; color: #18181B; text-decoration: none; padding: 6px 0; white-space: nowrap; letter-spacing: 0.01em; opacity: 0.58; transition: opacity 0.18s ease; text-underline-offset: 7px; text-decoration-thickness: 1.5px; } /* Hover = opacity only (NO underline). The underline indicator is driven SOLELY by .active (the current page, JS-managed), so a :hover underline can never get "stuck" after the SPA view-swap changes layout without the mouse moving (Chromium keeps :hover until the next move). active = underline + 600. */ .auth-nav-link:hover { opacity: 1; } .auth-nav-link.active { opacity: 1; text-decoration: underline; font-weight: 600; } /* BUGFIX: after a mouse click, an /