/* ============================================================ styles-gate.css — VEX SportTech dark auth + admin surface Shared by gate.html (split login) and dashboard.html (admin console). Tokens come from /tokens.css (linked FIRST on both pages). This file carries NO :root token block — the DS foundation + alias bridge in /tokens.css own every --vex-* / --surface-* / scale token. Only color-scheme + component rules live here. Dark-first; RTL-first; logical properties only; decorative alphas derive from tokens via color-mix so no raw hexes are invented. ============================================================ */ html { color-scheme: dark; height: 100%; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100%; font-family: var(--font-ui); font-size: var(--text-3); line-height: var(--leading-normal); color: var(--text-body); background: var(--vex-gradient-page); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button, input, select { font: inherit; } img { display: block; max-width: 100%; } a { color: var(--vex-neon); text-decoration: none; } /* ---- Bilingual show/hide — driven by , which app/brand.js keeps in sync on every language toggle. Both languages always in the DOM (parity holds); CSS reveals the active one. ---- */ html[lang="ar"] [data-lang="en"], html[lang="en"] [data-lang="ar"] { display: none !important; } /* ============================================================ Language toggle (fixed, glass) — gate.html. dashboard.html re-scopes it to static via #dashboardLangToggle. ============================================================ */ .gate-lang-toggle { position: fixed; top: var(--space-5); inset-inline-end: var(--space-5); z-index: 30; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); min-width: var(--tap-min); padding-inline: var(--space-4); background: var(--surface-raise); border: 1px solid var(--border-strong); border-radius: var(--radius-control); color: var(--text-strong); font-family: var(--font-ui); font-size: var(--text-2); font-weight: var(--weight-semibold); cursor: pointer; backdrop-filter: blur(12px); transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .gate-lang-toggle:hover { border-color: var(--vex-neon); color: var(--vex-neon); } .gate-lang-toggle:focus-visible { /* transparent outline is invisible normally but becomes a real ring under Windows High-Contrast / forced-colors, where box-shadow is dropped */ outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--vex-focus-ring); } /* ============================================================ GATE — split login shell Form panel (reading side / start) + brand-evidence panel (end). ============================================================ */ .gate-shell { display: flex; min-height: 100dvh; } /* ---- Form panel ---- */ .gate-form-panel { flex: 1 1 46%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-7) var(--space-6); min-width: 0; } /* faint measurement grid behind the form — neon at 4% via color-mix */ .gate-form-panel::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 4%, transparent) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(90% 70% at 50% 0, #000, transparent 72%); mask-image: radial-gradient(90% 70% at 50% 0, #000, transparent 72%); pointer-events: none; } .gate-form-inner { position: relative; width: 100%; max-width: 392px; } .gate-legal { position: absolute; inset-inline-start: var(--space-6); bottom: var(--space-5); font-family: var(--font-mono); font-size: var(--text-1); font-variant-numeric: var(--numeric); color: var(--text-muted); direction: ltr; } /* ---- Gate card (now a form column, not a boxed card) ---- */ .gate-card { display: flex; flex-direction: column; gap: var(--space-4); } .gate-logo { height: 30px; width: 108px; object-fit: contain; margin-bottom: var(--space-4); } .gate-title-block { text-align: start; } .gate-title-block h1, .gate-heading { margin: 0; font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-6); line-height: var(--leading-tight); letter-spacing: var(--tracking-arabic); color: var(--text-strong); } .gate-title-block p, .gate-subtitle { margin: var(--space-2) 0 0; font-size: var(--text-3); line-height: var(--leading-normal); color: var(--text-muted); } /* Enforce [hidden] even when a parent is display:flex/grid */ .gate-step[hidden], [hidden] { display: none !important; } .gate-step { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); } /* ---- Fields ---- */ .gate-field { display: flex; flex-direction: column; gap: var(--space-2); } /* labels are bilingual body text (Arabic must NOT take latin-style letter-spacing/uppercase — it breaks cursive joining) */ .gate-field label { font-family: var(--font-ui); font-size: var(--text-1); font-weight: var(--weight-semibold); color: var(--text-muted); } .gate-field input { width: 100%; height: 50px; padding-inline: var(--space-4); border-radius: var(--radius-control); background: var(--surface-raise); border: 1px solid var(--border-strong); color: var(--text-strong); font-family: var(--font-ui); font-size: var(--text-2); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .gate-field input::placeholder { color: var(--text-muted); } .gate-field input:hover { border-color: var(--vex-line-strong); } .gate-field input:focus, .gate-field input:focus-visible { outline: none; border-color: var(--vex-neon); box-shadow: var(--vex-focus-ring); } .gate-field input:disabled { opacity: 0.5; cursor: not-allowed; background: var(--surface-raise); } .gate-field input[aria-invalid="true"] { border-color: var(--vex-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vex-danger) 22%, transparent); } /* PIN — numeric, always LTR even under RTL, mono tabular */ .gate-pin-input { direction: ltr; text-align: center; letter-spacing: 0.25em; font-family: var(--font-mono); font-variant-numeric: var(--numeric); font-size: var(--text-5); } /* ---- Primary button — neon→green gradient on near-black ink ---- */ .gate-btn-primary { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: 56px; border: 1px solid transparent; border-radius: var(--radius-control); background: var(--vex-gradient-accent); color: var(--accent-ink); font-family: var(--font-ui); font-weight: var(--weight-bold); font-size: var(--text-3); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); } .gate-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-accent); } .gate-btn-primary:active { transform: scale(0.99); box-shadow: none; } .gate-btn-primary:focus-visible { /* transparent outline → visible focus ring under forced-colors mode */ outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--vex-focus-ring); } .gate-btn-primary:disabled, .gate-btn-primary[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } /* ---- Spinner (dark ink on the neon button) ---- */ .gate-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid transparent; border-top-color: var(--accent-ink); border-radius: 50%; animation: gate-spin 0.7s linear infinite; vertical-align: middle; } @keyframes gate-spin { to { transform: rotate(360deg); } } /* ---- Status region ---- */ .gate-status { min-height: 20px; font-size: var(--text-2); text-align: center; } .gate-status--error { color: var(--vex-danger); } .gate-status--success { color: var(--vex-green-bright); } /* ---- Sub-actions (step 2) ---- */ .gate-subactions { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: var(--space-2); } .gate-resend-countdown { font-family: var(--font-mono); font-variant-numeric: var(--numeric); font-size: var(--text-2); color: var(--text-muted); } .gate-resend-btn { background: none; border: none; cursor: pointer; color: var(--vex-neon); font-family: var(--font-ui); font-size: var(--text-2); text-decoration: underline; text-underline-offset: 3px; padding: 0; } .gate-resend-btn:focus-visible, .gate-use-another:focus-visible { /* transparent outline → visible focus ring under forced-colors mode */ outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--vex-focus-ring); border-radius: var(--radius-sm); } .gate-use-another { background: none; border: none; cursor: pointer; color: var(--text-muted); font-family: var(--font-ui); font-size: var(--text-2); text-decoration: underline; text-underline-offset: 3px; padding: 0; transition: color var(--dur-fast) var(--ease-out); } .gate-use-another:hover { color: var(--text-strong); } .gate-use-another:active { color: var(--vex-neon); } /* ============================================================ GATE — brand / evidence panel (broadcast still + detection) ============================================================ */ .gate-brand-panel { flex: 1 1 54%; position: relative; overflow: hidden; border-inline-start: 1px solid var(--border); background: var(--surface-video); } /* the broadcast frame layer is inherently LTR (pixel-anchored boxes) */ .gate-frame { position: absolute; inset: 0; direction: ltr; } .gate-brand-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.62; } .gate-brand-scrim { position: absolute; inset: 0; background: linear-gradient( 180deg, color-mix(in srgb, var(--vex-bg-strong) 55%, transparent), color-mix(in srgb, var(--vex-bg-strong) 92%, transparent) ); } .gate-scan { position: absolute; inset-inline: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--vex-signal), transparent); box-shadow: 0 0 14px var(--vex-signal); opacity: 0.5; animation: vexScan 4s linear infinite; } @keyframes vexScan { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } } /* ---- Detection boxes over the still ---- */ .gate-detbox { position: absolute; border-radius: 6px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--vex-ink-deep) 40%, transparent), 0 0 20px color-mix(in srgb, var(--vex-signal) 42%, transparent); } .gate-detbox--1 { inset-inline-start: 12%; top: 26%; width: 38%; height: 12%; border: 2px solid var(--vex-signal); background: color-mix(in srgb, var(--vex-signal) 6%, transparent); } .gate-detbox--2 { inset-inline-start: 58%; top: 58%; width: 20%; height: 11%; border: 2px solid var(--vex-neon); background: color-mix(in srgb, var(--vex-neon) 6%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--vex-ink-deep) 40%, transparent), 0 0 16px color-mix(in srgb, var(--vex-neon) 35%, transparent); } .gate-detbox-chip { position: absolute; inset-inline-start: -2px; top: -25px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; color: var(--accent-ink); font-family: var(--font-mono); font-variant-numeric: var(--numeric); font-size: var(--text-1); font-weight: var(--weight-bold); line-height: 1.1; white-space: nowrap; direction: ltr; } .gate-detbox--1 .gate-detbox-chip { background: var(--vex-signal); } .gate-detbox--2 .gate-detbox-chip { background: var(--vex-neon); } .gate-detbox-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); } .gate-detbox-chip .conf { opacity: 0.8; } /* ---- Brand content (RTL text over the frame) ---- */ .gate-brand-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-8) var(--space-7); } .gate-brand-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-2); padding: 7px 14px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--vex-bg) 55%, transparent); border: 1px solid var(--border-strong); backdrop-filter: blur(12px); margin-bottom: var(--space-5); font-family: var(--font-ui); font-size: var(--text-1); color: var(--text-body); } /* Latin HUD label reads in mono; Arabic keeps the UI font (mono has no Arabic glyphs and would fall back to a system face) */ .gate-brand-pill [data-lang="en"] { font-family: var(--font-mono); } .gate-brand-pill .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vex-signal); box-shadow: 0 0 10px var(--vex-signal); animation: vexPulse 1.6s var(--ease-out) infinite; } @keyframes vexPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.82); } } .gate-brand-headline { margin: 0; max-width: 520px; font-family: var(--font-display); font-weight: var(--weight-black); font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.12; letter-spacing: var(--tracking-arabic); color: var(--text-strong); } .gate-brand-grad { background: var(--vex-gradient-signal); -webkit-background-clip: text; background-clip: text; color: transparent; } .gate-brand-sub { margin: var(--space-4) 0 0; max-width: 480px; font-size: var(--text-3); line-height: var(--leading-relaxed); color: var(--text-muted); } .gate-trust { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-6); } .gate-trust-stat .val { font-family: var(--font-mono); font-variant-numeric: var(--numeric); font-weight: var(--weight-bold); font-size: 26px; color: var(--vex-neon); } /* Arabic word-values (لحظي / سيادة) use the UI Arabic font, not mono */ .gate-trust-stat .val [data-lang="ar"] { font-family: var(--font-ui); } .gate-trust-stat .lbl { margin-top: 2px; font-size: var(--text-1); color: var(--text-muted); } .gate-trust-div { width: 1px; align-self: stretch; background: var(--border); } /* ---- Responsive: collapse to single form column ---- */ @media (max-width: 900px) { .gate-brand-panel { display: none; } .gate-form-panel { flex: 1 1 100%; } } /* ============================================================ Accessibility — reduced motion (styles.css is NOT linked here, so this must stand alone). Kills scan line, pulse, spinner. ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } }