/* Login & gate pages — accent from --login-accent on */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } :root { --accent: var(--login-accent, #22d3ee); --accent-2: color-mix(in srgb, var(--accent) 55%, #6366f1); --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent); --accent-line: color-mix(in srgb, var(--accent) 55%, transparent); --bg-deep: #050818; --bg-mid: #0c1230; --glass: rgba(8, 12, 28, 0.55); --glass-border: rgba(255, 255, 255, 0.08); --text: #eef2ff; --text-muted: #a8b4d4; --text-faint: #6b7a9e; --radius-pill: 999px; --radius-lg: 18px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --font-he: 'Heebo', 'Segoe UI', 'Arial Hebrew', sans-serif; --font-ui: 'Rubik', 'Heebo', sans-serif; } html { font-family: var(--font-he); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Base ─────────────────────────────────────────────────────── */ .login-body { font-family: var(--font-he); background: var(--bg-deep); color: var(--text); -webkit-font-smoothing: antialiased; min-height: 100%; overflow-x: hidden; position: relative; display: flex; flex-direction: column; } .login-noise { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.28; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E"); } .login-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 90% 70% at 80% 90%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 55%), radial-gradient(ellipse 60% 50% at 10% 70%, color-mix(in srgb, #4338ca 20%, transparent), transparent 60%), linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 55%, #03040c 100%); } /* זוהר ירוק עליון — נדידה איטית על המסך */ .login-glow-float { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .login-glow-float::before, .login-glow-float::after { content: ''; position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; } .login-glow-float::before { width: min(85vw, 640px); height: min(50vh, 420px); top: -18%; left: 20%; background: radial-gradient( ellipse at center, color-mix(in srgb, var(--accent) 42%, transparent), transparent 68% ); animation: login-glow-drift-a 26s ease-in-out infinite; } .login-glow-float::after { width: min(70vw, 520px); height: min(42vh, 360px); top: -8%; right: 10%; background: radial-gradient( ellipse at center, color-mix(in srgb, var(--accent) 28%, transparent), transparent 72% ); animation: login-glow-drift-b 32s ease-in-out infinite; } @keyframes login-glow-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; } 33% { transform: translate(18vw, 6vh) scale(1.06); opacity: 0.95; } 66% { transform: translate(-12vw, 3vh) scale(0.96); opacity: 0.8; } } @keyframes login-glow-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; } 50% { transform: translate(-22vw, 8vh) scale(1.08); opacity: 0.85; } } .login-vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 75% 65% at 50% 45%, transparent 35%, rgba(0,0,0,0.55) 100%); } .login-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .login-orb { position: absolute; border-radius: 50%; filter: blur(72px); opacity: 0.38; } .login-orb--1 { width: 420px; height: 420px; top: -14%; left: 50%; margin-left: -210px; background: var(--accent); opacity: 0.32; animation: login-orb-drift-top 20s ease-in-out infinite; } @keyframes login-orb-drift-top { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(90px, 24px) scale(1.05); } 50% { transform: translate(-70px, 12px) scale(0.98); } 75% { transform: translate(40px, -16px) scale(1.03); } } .login-orb--2 { width: 280px; height: 280px; bottom: -5%; right: 8%; background: var(--accent-2); opacity: 0.28; animation: login-orb-drift-soft 28s ease-in-out infinite; } @keyframes login-orb-drift-soft { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-40px, -20px); } } /* ── Top bar (ימין ב-RTL) ─────────────────────────────────────── */ .login-topbar { position: relative; z-index: 2; flex-shrink: 0; padding: 18px clamp(20px, 5vw, 40px); border-bottom: 1px solid var(--glass-border); background: rgba(4, 8, 22, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .login-topbar-inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: flex-start; } .login-topbar-brand { display: inline-flex; align-items: center; gap: 14px; padding: 6px 4px; } .login-topbar-logo-wrap { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); box-shadow: 0 0 20px var(--accent-soft); overflow: hidden; } .login-topbar-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; filter: drop-shadow(0 0 10px var(--accent-glow)); } .login-topbar-title { font-family: var(--font-ui); font-size: clamp(1rem, 2.2vw, 1.15rem); font-weight: 800; letter-spacing: 0.05em; color: var(--text); text-transform: uppercase; line-height: 1.2; } /* ── Center stage (main login) ────────────────────────────────── */ .login-body--center .login-stage { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(32px, 6vh, 64px) clamp(20px, 5vw, 40px); } .login-center { position: relative; width: min(720px, 94vw); text-align: center; padding: clamp(42px, 5vw, 60px) clamp(32px, 4vw, 52px); border-radius: 28px; background: rgba(8, 12, 30, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 48px 100px -40px rgba(0, 0, 0, 0.7); animation: login-fade-up 0.75s var(--ease) both; overflow: hidden; } .login-center::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.6; } @keyframes login-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .login-logo-stage { margin: 0 auto 28px; display: flex; align-items: center; justify-content: center; } .login-center-logo { width: 168px; height: 168px; object-fit: contain; display: block; border-radius: 32px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 0 40px var(--accent-soft), 0 8px 32px rgba(0, 0, 0, 0.4); animation: login-logo-in 0.8s var(--ease) 0.1s both; } @keyframes login-logo-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } .login-heading { margin: 0; font-family: var(--font-ui); font-weight: 900; font-size: clamp(2.2rem, 6.5vw, 3.4rem); line-height: 1.1; letter-spacing: -0.03em; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.2em 0.4em; unicode-bidi: isolate; } .login-heading-brand { color: var(--accent); text-shadow: 0 0 40px var(--accent-glow), 0 0 80px color-mix(in srgb, var(--accent) 25%, transparent); } .login-heading-sep { color: var(--text-muted); font-weight: 600; } .login-heading-panel { color: var(--text); font-weight: 700; } .login-tagline { margin: 10px 0 0; font-family: var(--font-he); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); opacity: 0.7; } .login-tagline:empty { display: none; } .login-copy-frame { margin: clamp(28px, 4vh, 40px) auto 0; max-width: 52ch; } .login-rule { height: 1px; margin: 0 auto; max-width: 80%; background: linear-gradient( 90deg, transparent 0%, var(--accent-line) 25%, var(--accent) 50%, var(--accent-line) 75%, transparent 100% ); box-shadow: 0 0 12px var(--accent-glow); border-radius: 1px; opacity: 0.7; } .login-intro { margin: 22px 0; font-family: var(--font-he); font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.85; color: var(--text); font-weight: 400; letter-spacing: 0.01em; opacity: 0.9; } .login-hint-text { margin: 0 auto 32px; max-width: 46ch; font-family: var(--font-he); font-size: clamp(0.88rem, 1.8vw, 0.95rem); line-height: 1.7; color: var(--text-muted); font-weight: 400; letter-spacing: 0.01em; opacity: 0.75; } /* CTA — כפתור נקי */ .login-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; width: min(340px, 100%); padding: 0; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: linear-gradient( 180deg, color-mix(in srgb, var(--accent) 90%, #fff) 0%, var(--accent) 100% ); color: #041008; text-decoration: none; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 12px 40px -10px var(--accent-glow); transition: transform 0.2s var(--ease), box-shadow 0.25s, border-color 0.2s; } .login-cta-inner { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 32px; font-family: var(--font-ui); font-size: 1.1rem; font-weight: 800; letter-spacing: 0.02em; } .login-cta-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, 0.12); flex-shrink: 0; } .login-cta-icon svg { display: block; } .login-cta-label { line-height: 1; } .login-cta-shine { position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 0%, rgba(255,255,255,0.35) 48%, transparent 55% ); transform: translateX(-130%); animation: login-cta-shine 5s ease-in-out infinite; } @keyframes login-cta-shine { 0%, 72%, 100% { transform: translateX(-130%); } 88% { transform: translateX(130%); } } .login-cta:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 70%, #fff); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 20px 50px -12px var(--accent-glow); } .login-cta:active { transform: translateY(0) scale(0.98); box-shadow: 0 6px 20px -8px var(--accent-glow); } .login-error { margin-top: 20px; padding: 14px 18px; border-radius: 14px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.25); color: #fca5a5; font-family: var(--font-he); font-size: 0.88rem; font-weight: 600; line-height: 1.55; backdrop-filter: blur(8px); } .login-foot { position: relative; z-index: 2; flex-shrink: 0; padding: 18px; text-align: center; font-family: var(--font-he); font-size: 0.78rem; font-weight: 400; color: var(--text-faint); opacity: 0.6; } .login-foot a { color: var(--text-muted); font-weight: 600; text-decoration: none; transition: color 0.2s; } .login-foot a:hover { color: var(--accent); } /* ── Gate pages (offline / no-character) ─────────────────────── */ .login-body--gate .login-orbs { display: none; } .login-body--gate .login-topbar { display: none; } .login-body--gate .login-stage, .login-body--gate .login-grid { flex: 1; display: grid; place-items: center; padding: clamp(20px, 5vw, 48px); position: relative; z-index: 1; } .login-body--gate .login-center, .login-body--gate .login-hero { display: none; } .login-body--gate .login-main { width: min(460px, 100%); } .login-body--gate .login-card-wrap { position: relative; width: 100%; border-radius: 22px; background: var(--glass); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); box-shadow: 0 32px 64px -24px rgba(0,0,0,0.65); } .login-body--gate .login-card-accent { position: absolute; top: 0; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); } .login-body--gate .login-card-inner { padding: clamp(28px, 5vw, 40px); } .login-card-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px; } .login-brand-lock { display: flex; flex-direction: column; align-items: center; gap: 4px; } .login-logo-wrap { display: grid; place-items: center; margin-bottom: 10px; } .login-logo-wrap--sm .login-logo { width: 56px; height: 56px; object-fit: contain; } .login-brand-kicker { margin: 0; font-family: var(--font-he); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .login-brand-title { margin: 6px 0 0; font-family: var(--font-ui); font-size: 1.45rem; font-weight: 800; } .login-lead, .login-hint { font-family: var(--font-he); font-size: 0.95rem; line-height: 1.7; color: var(--text-muted); text-align: center; font-weight: 500; } .login-lead { margin: 0 0 8px; } .login-hint { margin: 0 0 20px; font-size: 0.88rem; color: var(--text-faint); } .login-discord { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 20px; border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: 1rem; font-weight: 800; text-decoration: none; transition: transform 0.15s, background 0.2s; } .login-discord--primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 75%, #fff)); color: #030508; border: 1px solid transparent; box-shadow: 0 8px 28px -8px var(--accent-glow); } .login-discord--primary:hover { transform: translateY(-2px); } .login-discord--ghost { background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid var(--glass-border); } .login-discord--ghost:hover { background: rgba(255,255,255,0.09); } .login-gate-actions { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 420px) { .login-gate-actions { flex-direction: row; } .login-gate-actions .login-discord { flex: 1; } } /* Legacy / unused */ .login-mesh, .login-shell, .login-hero, .login-panel, .login-features, .login-divider, .login-bg-mark { display: none !important; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 520px) { .login-heading { font-size: 1.75rem; } .login-center { padding: 28px 20px; border-radius: 22px; } .login-center-logo { width: 120px; height: 120px; border-radius: 24px; } .login-cta-inner { padding: 14px 24px; font-size: 1rem; } .login-cta { border-radius: 14px; } .login-topbar-logo-wrap { width: 42px; height: 42px; border-radius: 10px; } .login-topbar-logo { width: 36px; height: 36px; } } @media (prefers-reduced-motion: reduce) { .login-glow-float::before, .login-glow-float::after, .login-orb--1, .login-orb--2 { animation: none; } .login-cta-shine, .login-center, .login-center-logo { animation: none; } }