/* ───────────────────────────────────────────────────────────────────────── * qchat-elevate.css — additive polish on the existing aesthetic. * NO layout changes. NO new fonts. NO color reinventions. * Just: choreography, glow, focus states, card lift, corner marks. * Loads AFTER style.css + qsec-panel.css to layer on top. * ───────────────────────────────────────────────────────────────────────── */ /* ── Login card entrance — staggered slide-up + fade ──────────────────── */ #login-screen .login-card { animation: qe-card-in 720ms cubic-bezier(.22,.61,.36,1) both; /* Soft glow halo behind the card, picks up the brand gradient. Layered as TWO box-shadows: a tight inner ring + a soft outer bloom. */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(123, 47, 247, 0.18), 0 30px 80px -20px rgba(123, 47, 247, 0.35), 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 80px rgba(0, 212, 255, 0.06) !important; } @keyframes qe-card-in { from { opacity: 0; transform: translateY(14px) scale(0.985); filter: blur(4px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* Stagger reveals on direct children — title, tagline, attrib, fields */ #login-screen .login-card > * { animation: qe-child-in 520ms cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(180ms + var(--qe-i, 0) * 50ms); opacity: 0; } #login-screen .login-card > *:nth-child(1) { --qe-i: 0; } #login-screen .login-card > *:nth-child(2) { --qe-i: 1; } #login-screen .login-card > *:nth-child(3) { --qe-i: 2; } #login-screen .login-card > *:nth-child(4) { --qe-i: 3; } #login-screen .login-card > *:nth-child(5) { --qe-i: 4; } #login-screen .login-card > *:nth-child(6) { --qe-i: 5; } #login-screen .login-card > *:nth-child(7) { --qe-i: 6; } #login-screen .login-card > *:nth-child(8) { --qe-i: 7; } #login-screen .login-card > *:nth-child(9) { --qe-i: 8; } #login-screen .login-card > *:nth-child(10) { --qe-i: 9; } #login-screen .login-card > *:nth-child(11) { --qe-i: 10; } #login-screen .login-card > *:nth-child(12) { --qe-i: 11; } #login-screen .login-card > *:nth-child(13) { --qe-i: 12; } #login-screen .login-card > *:nth-child(14) { --qe-i: 13; } @keyframes qe-child-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── Brand title — soft pulsing radiance behind the gradient text ──────── */ #login-screen .brand-title { position: relative; isolation: isolate; } #login-screen .brand-title::after { content: ''; position: absolute; inset: -18px -32px; background: radial-gradient(60% 70% at 50% 50%, rgba(123, 47, 247, 0.22) 0%, rgba(0, 212, 255, 0.10) 45%, transparent 75%); z-index: -1; filter: blur(8px); opacity: 0.85; animation: qe-halo 8s ease-in-out infinite; pointer-events: none; } @keyframes qe-halo { 0%, 100% { opacity: 0.5; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } } /* ── Icon: orbital ring + breathing glow (replaces flat drop-shadow) ───── */ #login-screen .login-card > img { position: relative; z-index: 1; animation: qe-icon-breathe 5s ease-in-out infinite; } @keyframes qe-icon-breathe { 0%, 100% { filter: drop-shadow(0 0 12px rgba(123, 47, 247, 0.4)) drop-shadow(0 0 28px rgba(123, 47, 247, 0.15)); } 50% { filter: drop-shadow(0 0 18px rgba(0, 212, 255, 0.5)) drop-shadow(0 0 40px rgba(0, 212, 255, 0.2)); } } /* ── Input focus state — premium neon edge ring ────────────────────────── */ #login-screen .login-card input[type="text"]:focus, #login-screen .login-card select:focus { border-color: var(--color-secondary) !important; box-shadow: 0 0 0 1px var(--color-secondary), 0 0 14px rgba(0, 212, 255, 0.22), inset 0 0 0 1px rgba(0, 212, 255, 0.08) !important; outline: none !important; background: rgba(0, 212, 255, 0.04) !important; transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease !important; } /* ── CONNECT button — premium hover w/ internal glow + sweep ───────────── */ #login-screen .btn-generate { position: relative; overflow: hidden; isolation: isolate; transition: transform 160ms ease, box-shadow 220ms ease, filter 160ms ease !important; box-shadow: 0 8px 24px -8px rgba(123, 47, 247, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; } /* The sweep — a faint diagonal highlight that runs across on hover */ #login-screen .btn-generate::before { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%); transform: skewX(-20deg); z-index: 0; transition: left 700ms cubic-bezier(.22,.61,.36,1); pointer-events: none; } #login-screen .btn-generate:hover::before { left: 130%; } #login-screen .btn-generate:hover { transform: translateY(-1px); filter: brightness(1.08) saturate(1.1); box-shadow: 0 14px 36px -10px rgba(123, 47, 247, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 28px rgba(0, 212, 255, 0.25); } #login-screen .btn-generate:active { transform: translateY(0); filter: brightness(0.96); } /* ── Brand attribution — small underline accent on hover ───────────────── */ #login-screen .brand-attrib { display: inline-block; position: relative; transition: color 200ms ease; } #login-screen .brand-attrib::after { content: ''; display: block; width: 28px; height: 1px; margin: 6px auto 0; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); opacity: 0.5; } /* ── Subtle scanline texture on the card surface (very faint) ──────────── */ #login-screen .login-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient( 0deg, transparent 0px, transparent 2px, rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 3px); pointer-events: none; z-index: 0; } #login-screen .login-card > * { position: relative; z-index: 1; } /* ── /security page — card hover lift + corner crosshairs ──────────────── */ .qsec-page-elevated .card, body .card { transition: transform 240ms cubic-bezier(.22,.61,.36,1), box-shadow 240ms ease, border-color 240ms ease !important; } body .card:hover { transform: translateY(-3px); border-color: rgba(123, 47, 247, 0.45) !important; box-shadow: 0 14px 38px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(123, 47, 247, 0.3), 0 0 32px -8px rgba(0, 212, 255, 0.15) !important; } /* /security cards get small corner crosshair marks (subtle, refined) */ body .card { position: relative; overflow: visible; } body .card::before, body .card::after { content: ''; position: absolute; width: 8px; height: 8px; border: 1px solid var(--color-secondary, #00d4ff); opacity: 0.4; transition: opacity 240ms ease, border-color 240ms ease; pointer-events: none; } body .card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } body .card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } body .card:hover::before, body .card:hover::after { opacity: 0.85; } /* ── Smooth scrolling sitewide ─────────────────────────────────────────── */ html { scroll-behavior: smooth; } /* ── Respect prefers-reduced-motion ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #login-screen .login-card, #login-screen .login-card > *, #login-screen .login-card > img, #login-screen .brand-title::after, #login-screen .btn-generate::before { animation: none !important; transition: none !important; } }