/* Futuristic fuchsia landing for anonymous visitors (Pages/Index.cshtml). This page renders with Layout = null and its own , so it does NOT get the app's style bundle: the tokens below are declared here rather than read from css/app-theme.css. The brand constants are the same values — keep the two files in step if the palette ever moves. */ :root { --fuchsia: #ff2bd6; --fuchsia-bright: #ff6ae4; --magenta: #ff1493; --violet: #a855f7; } /* Dark is the default: no attribute, no stored choice, no light OS setting. */ :root, [data-gl-theme="dark"] { --bg0: #070310; --bg1: #0e0620; --bg2: #030106; --ink: #fff; --ink-soft: #d7c7ef; --ink-faint: rgba(203, 184, 232, .45); --orb-opacity: .55; --orb-blend: screen; --grid-line: rgba(255, 43, 214, .35); --vignette: rgba(3, 1, 8, .85); --brand-gradient: linear-gradient(180deg, #fff 0%, var(--fuchsia-bright) 45%, var(--fuchsia) 75%, var(--violet) 100%); --brand-glow: drop-shadow(0 0 26px rgba(255, 43, 214, .55)) drop-shadow(0 0 60px rgba(168, 85, 247, .35)); --cta-gradient: linear-gradient(90deg, var(--magenta), var(--fuchsia)); --toggle-bg: rgba(255, 255, 255, .07); --app-icon: url('/icons/dark/icon-192.png'); } [data-gl-theme="light"] { --bg0: #fbf7ff; --bg1: #f2e9fd; --bg2: #ffffff; --ink: #1a0f26; --ink-soft: #5c4b72; --ink-faint: rgba(90, 70, 120, .55); --orb-opacity: .16; --orb-blend: multiply; --grid-line: rgba(199, 14, 128, .22); --vignette: rgba(255, 255, 255, .78); --brand-gradient: linear-gradient(180deg, var(--violet) 0%, var(--fuchsia) 50%, #c70e80 100%); --brand-glow: drop-shadow(0 0 18px rgba(255, 43, 214, .28)); --cta-gradient: linear-gradient(90deg, #c70e80, #e11fa8); --toggle-bg: rgba(26, 15, 38, .06); --app-icon: url('/icons/light/icon-192.png'); } [data-gl-theme="dark"] { color-scheme: dark; } [data-gl-theme="light"] { color-scheme: light; } .gl-body { font-family: 'Rajdhani', system-ui, sans-serif; background: radial-gradient(120% 120% at 50% 10%, var(--bg1) 0%, var(--bg0) 60%, var(--bg2) 100%); color: var(--ink); overflow: hidden; position: relative; height: 100vh; margin: 0; } .gl-nexus { position: fixed; inset: 0; z-index: 1; display: block; } .gl-orb { position: fixed; border-radius: 50%; filter: blur(70px); opacity: var(--orb-opacity); z-index: 0; pointer-events: none; mix-blend-mode: var(--orb-blend); } .gl-orb.a { width: 520px; height: 520px; background: var(--fuchsia); top: -140px; left: -120px; animation: gl-float1 16s ease-in-out infinite; } .gl-orb.b { width: 460px; height: 460px; background: var(--violet); bottom: -160px; right: -120px; animation: gl-float2 19s ease-in-out infinite; } .gl-orb.c { width: 340px; height: 340px; background: var(--magenta); top: 40%; left: 55%; opacity: calc(var(--orb-opacity) * .64); animation: gl-float3 22s ease-in-out infinite; } @keyframes gl-float1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(80px, 60px); } } @keyframes gl-float2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-70px, -50px); } } @keyframes gl-float3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-60px, 40px) scale(1.15); } } .gl-grid { position: fixed; left: 50%; bottom: -2px; width: 280vw; height: 52vh; transform: translateX(-50%) perspective(340px) rotateX(74deg); transform-origin: bottom center; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 70px 70px; -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 90%); mask-image: linear-gradient(to top, #000 0%, transparent 90%); animation: gl-grid 3.2s linear infinite; } @keyframes gl-grid { from { background-position-y: 0; } to { background-position-y: 70px; } } .gl-vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, var(--vignette) 100%); } .gl-stage { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; } .gl-kicker { font-weight: 600; letter-spacing: .5em; text-transform: uppercase; font-size: 13px; color: var(--fuchsia-bright); opacity: 0; transform: translateY(10px); animation: gl-rise .9s .1s forwards; text-shadow: 0 0 18px rgba(255, 43, 214, .7); } .gl-brand { font-family: 'Orbitron', sans-serif; font-weight: 900; letter-spacing: .06em; line-height: 1; font-size: clamp(40px, 9vw, 120px); margin: 14px 0 6px; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; filter: var(--brand-glow); opacity: 0; transform: translateY(16px) scale(.98); animation: gl-rise 1s .25s forwards, gl-flicker 6s 1.4s infinite; } .gl-tagline { font-weight: 400; font-size: clamp(15px, 2vw, 20px); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); opacity: 0; transform: translateY(12px); animation: gl-rise .9s .45s forwards; min-height: 1.4em; } .gl-tagline b { color: var(--fuchsia-bright); font-weight: 600; } .gl-caret { display: inline-block; width: 3px; height: 1em; margin-left: 4px; vertical-align: -2px; border-radius: 1px; background: var(--fuchsia); box-shadow: 0 0 10px var(--fuchsia); animation: gl-blink 1.05s steps(1) infinite; } @keyframes gl-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .gl-login { position: relative; margin-top: 38px; display: inline-flex; align-items: center; gap: 9px; padding: 11px 26px; border-radius: 999px; text-decoration: none; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--cta-gradient); border: 1px solid rgba(255, 120, 230, .6); box-shadow: 0 0 22px rgba(255, 43, 214, .55), inset 0 0 12px rgba(255, 255, 255, .15); opacity: 0; transform: translateY(12px); animation: gl-rise .9s .6s forwards; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .gl-login:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 0 34px rgba(255, 43, 214, .9), 0 0 70px rgba(168, 85, 247, .4); color: #fff; } .gl-login .gl-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; animation: gl-pulse 1.6s infinite; } .gl-foot { position: fixed; bottom: 18px; left: 0; right: 0; z-index: 3; text-align: center; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-faint); } /* Light/dark switch, top-right. Same control as the app shell (theme-switch.js styles it there); the landing declares its own copy because it loads none of the app bundles. */ .gl-theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 999px; border: 1px solid rgba(255, 120, 230, .35); background: var(--toggle-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink-soft); font-size: 17px; line-height: 1; cursor: pointer; transition: color .2s ease, border-color .2s ease, box-shadow .2s ease; } .gl-theme-toggle:hover, .gl-theme-toggle:focus-visible { color: var(--fuchsia-bright); border-color: var(--fuchsia); box-shadow: 0 0 18px rgba(255, 43, 214, .4); outline: none; } .gl-theme-toggle .gl-icon-light { display: none; } [data-gl-theme="light"] .gl-theme-toggle .gl-icon-light { display: block; } [data-gl-theme="light"] .gl-theme-toggle .gl-icon-dark { display: none; } @keyframes gl-rise { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes gl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @keyframes gl-flicker { 0%, 100%, 48% { filter: var(--brand-glow); } 50% { filter: drop-shadow(0 0 10px rgba(255, 43, 214, .3)); } 52% { filter: drop-shadow(0 0 30px rgba(255, 43, 214, .7)) drop-shadow(0 0 70px rgba(168, 85, 247, .4)); } } /* The hero elements are declared at opacity:0 and revealed by gl-rise, so simply cancelling the animations left the whole page blank for anyone browsing with "reduce motion" on. Cancel the motion, then force the settled state. */ @media (prefers-reduced-motion: reduce) { .gl-body * { animation: none !important; } .gl-kicker, .gl-brand, .gl-tagline, .gl-login { opacity: 1 !important; transform: none !important; } .gl-brand { filter: var(--brand-glow); } .gl-caret { display: none; } }