/* =========================================================================== VSightX — Design tokens (liquid glass, deep blue scene) Load before glass.css and before your Bootstrap overrides. Naming follows your existing kit: every component colour comes from a ---1 / -2 / -line triplet. Change those and the whole kit reskins. =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace; /* ---- Scene: deep blue, not teal -------------------------------------- Three cool hues at different depths so the glass has something varied to refract. The warm bloom at bottom-left is the only warm light in the scene — it is what stops this reading as flat corporate blue. */ --bg-base: #060B18; --scene: radial-gradient(85% 65% at 14% 4%, rgba(46, 92, 214, .42), transparent 55%), radial-gradient(70% 68% at 88% 14%, rgba(22, 122, 200, .30), transparent 55%), radial-gradient(58% 50% at 78% 78%, rgba(120, 74, 200, .22), transparent 60%), radial-gradient(46% 38% at 22% 88%, rgba(214, 108, 48, .14), transparent 62%), radial-gradient(120% 95% at 50% 112%, rgba(4, 12, 34, .60), transparent 60%), linear-gradient(165deg, #0C1730 0%, #091124 46%, #040914 100%); --ink: #E9EFFC; --ink-dim: #9BADD2; --ink-mute: #6F82A8; /* ---- Variant pairs: top / bottom of the glass gradient, plus rim ------ Primary is warm on purpose. On a blue scene a blue primary button sinks into the backdrop; warm gives the one thing the user should press maximum separation, and keeps the Auth0 feel you liked. Prefer a blue primary? Put data-primary="azure" on . */ --primary-1: rgba(255, 156, 66, .90); --primary-2: rgba(198, 74, 28, .86); --primary-line: #FFB03C; --azure-1: rgba(84, 156, 236, .88); --azure-2: rgba(26, 78, 158, .84); --azure-line: #7FBCF5; --secondary-1: rgba(132, 148, 186, .55); --secondary-2: rgba(50, 62, 92, .58); --secondary-line: #A8B6D6; --success-1: rgba(46, 194, 90, .86); --success-2: rgba(12, 94, 45, .84); --success-line: #43DC71; --danger-1: rgba(232, 92, 122, .86); --danger-2: rgba(122, 28, 54, .84); --danger-line: #FF7E9E; --warning-1: rgba(228, 213, 62, .88); --warning-2: rgba(124, 108, 24, .84); --warning-line: #F5E74E; --busy-line: #F0553D; /* presence: Busy — distinct from Away (amber) and Do-not-disturb (rose). */ --info-1: rgba(58, 200, 222, .88); --info-2: rgba(12, 90, 116, .84); --info-line: #4FD8E8; /* Brand shorthands. Warm = a person did this. Cyan = the system did this. */ --flare: #FFB03C; --beam: #4FD8E8; --live: #FF4D6A; /* recording. Reserved — never decorative. */ /* ---- Glass physics ---------------------------------------------------- One place to tune the whole material. Push --glass-fill past about .10 and frosted glass turns into plastic; the rim and the gloss are what sell it. */ --glass-fill: rgba(255, 255, 255, .055); --glass-fill-2: rgba(255, 255, 255, .085); --glass-rim: rgba(255, 255, 255, .13); --glass-rim-2: rgba(255, 255, 255, .20); --glass-gloss: inset 0 1px 0 rgba(255, 255, 255, .18); --glass-gloss-2: inset 0 1px 0 rgba(255, 255, 255, .38); --glass-blur: blur(16px) saturate(135%); --glass-blur-sm: blur(8px) saturate(140%); --glass-blur-lg: blur(24px) saturate(140%); --glass-drop: 0 14px 40px rgba(2, 8, 24, .42); --glass-drop-lg: 0 22px 60px rgba(2, 8, 24, .55); /* Tint for menus and popovers that have to stay readable over anything. */ --glass-panel: rgba(11, 22, 46, .82); /* ---- Type -------------------------------------------------------------- */ --fs-display: clamp(28px, 5vw, 44px); --fs-h1: clamp(22px, 3.4vw, 30px); --fs-h2: 19px; --fs-h3: 16px; --fs-lg: 15.5px; --fs-md: 14px; --fs-sm: 13px; --fs-xs: 12px; --fs-label: 11px; --ls-label: .22em; /* ---- Shape, space, motion ---------------------------------------------- */ --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 26px; --r-full: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 28px; --sp-8: 38px; --sp-10: 52px; --sp-12: 72px; --ease: cubic-bezier(.2, .8, .2, 1); --t-fast: 120ms; --t-base: 200ms; --t-slow: 340ms; } /* Swap the primary to blue in one attribute, if you'd rather not go warm. */ [data-primary='azure'] { --primary-1: var(--azure-1); --primary-2: var(--azure-2); --primary-line: var(--azure-line); } /* ---- Scene application --------------------------------------------------- Fixed attachment so the glass appears to sit still while content scrolls behind it. That parallax is most of the illusion. */ html, body { min-height: 100%; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-ui); font-size: var(--fs-md); color: var(--ink); background-color: var(--bg-base); background-image: var(--scene); background-attachment: fixed; -webkit-font-smoothing: antialiased; } /* Fine grain — kills the banding you always get across large dark gradients. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* Vignette settles attention toward the middle of the viewport. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 100% at 50% 34%, transparent 50%, rgba(0, 0, 0, .5) 100%); } ::selection { background: var(--primary-line); color: #201004; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Backdrop blur is expensive, and some field devices won't have it at all. Everything degrades to a solid tinted panel rather than a transparent mess. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass-fill: rgba(16, 30, 60, .90); --glass-fill-2: rgba(22, 40, 76, .94); } }