/* ========================================================================== VIP Parking - auth split shell. public/assets/css/auth-split.css Emitted once, from resources/views/components/auth-shell.blade.php ONLY, so it is never present on driver-scan / supervisor-scan / booking / invoice views, which ship their own .page-body and .card-header-banner rules. Do NOT move this into a layout - that guarantee is the whole reason every rule below is also scoped under .vsp / .vsp-body. Palette unchanged: #2B2B28 #1e1e1b #E3B04B #dfa83a #c9943c ========================================================================== */ .vsp { --vsp-ink:#2B2B28; --vsp-ink-deep:#1e1e1b; --vsp-gold:#E3B04B; --vsp-gold-2:#dfa83a; --vsp-gold-3:#c9943c; --vsp-line:#e5e7eb; --vsp-border:#d1d5db; --vsp-muted:#6b7280; --vsp-faint:#9ca3af; position: relative; width: 100%; } .vsp, .vsp *, .vsp *::before, .vsp *::after { box-sizing: border-box; } .vsp .af { font-family: 'DINNextLTArabic', 'Tajawal', sans-serif !important; } /* ── Mobile first (<1024px): one column under the site chrome ───────────── */ .vsp-panel, .vsp-corner { display: none; } .vsp-form { display: flex; flex-direction: column; padding-inline: 16px; } .vsp-form__inner { flex: 1; width: 100%; max-width: 420px; margin-inline: auto; display: flex; flex-direction: column; justify-content: center; /* Deliberately no min-height / calc(100vh - 110px): under ?app=1 the site header is display:none and any reserved offset becomes dead space. Padding alone behaves correctly in both modes. */ padding-block: 56px 72px; } .vsp-wordmark { text-align: center; margin-bottom: 22px; } .vsp-wordmark img { height: 64px; width: auto; } .vsp-head { text-align: center; margin-bottom: 26px; } .vsp-head h1 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; color: var(--vsp-ink); } .vsp-head p { margin: 10px 0 0; font-size: .9rem; line-height: 1.9; color: var(--vsp-muted); } /* Some views open with the subtitle and no h1 above it — the 10px would be a stray offset there. Inert on login, where the heading comes first. */ .vsp-head p:first-child { margin-top: 0; } /* main.css:87 sets h1..h6 to var(--heading-font) = Roboto, which carries no Arabic glyphs, so every Arabic heading in the shell drops to a generic system face. A rule naming the element beats the DINNextLTArabic on , so state it here. RTL only: on the English pages Roboto is a Latin face on Latin copy. Same fight as the explicit color on .vsp-panel__headline further down. */ [dir="rtl"] .vsp-head h1 { font-family: 'DINNextLTArabic', 'Tajawal', sans-serif; } .vsp-foot { width: 100%; max-width: 420px; margin-inline: auto; padding-inline: 16px; padding-bottom: 36px; text-align: center; font-size: 12px; line-height: 2; color: var(--vsp-faint); } /* ── Desktop (≥1024px): full-bleed split, the site chrome steps aside ───── */ @media (min-width: 1024px) { /* Same technique as the layout's own ?app=1 block (public_ar:277-283). !important is NOT optional on #header: it carries Bootstrap's .d-flex, which is itself display:flex!important. */ body { padding-top: 0 !important; } #header, .site-footer, #chat-widget { display: none !important; } .vsp { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; min-height: 100dvh; } .vsp-corner { position: absolute; top: 20px; inset-inline-end: 24px; z-index: 20; display: flex; align-items: center; gap: 8px; } .vsp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: 1px solid var(--vsp-line); border-radius: 999px; background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 1px 2px rgba(0,0,0,.05); font-size: .82rem; font-weight: 600; color: #4b5563; text-decoration: none; white-space: nowrap; transition: color .2s, border-color .2s; } .vsp-pill:hover { color: var(--vsp-gold-3); border-color: var(--vsp-gold); } .vsp-pill svg { width: 15px; height: 15px; flex: none; } .vsp-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 48px; color: #fff; /* Only the faint top glow survives: the two bottom gradients (18% 88% at .22 and 85% 90% at .30) washed gold straight over the copyright line, on the outer edge in AR and the inner one in EN. */ background: radial-gradient(320px 240px at 78% 22%, rgba(223,168,58,.10), transparent 70%), var(--vsp-ink-deep); } .vsp-panel__logo { align-self: flex-start; } /* 56px, not 96px like tickets' h-24: uploadwhitelogo.png is a tight crop (91% ink) where tickets' logo.png fills only 52% of its canvas, so this renders the same ~123x51 mark on screen. */ .vsp-panel__logo img { display: block; height: 56px; width: auto; } .vsp-panel__mid { position: relative; max-width: 30rem; } /* Explicit, not inherited: main.css:88 has a grouped `h1,h2,...{color:var(--heading-color)}` and a rule that names the element beats the panel's inherited white. Without this the headline renders #2B2B28 on a #1e1e1b panel. */ .vsp-panel__headline { margin: 0; color: #fff; font-size: 1.7rem; font-weight: 800; line-height: 1.6; } /* Same --heading-font override as .vsp-head h1 up top, for the same reason. */ [dir="rtl"] .vsp-panel__headline { font-family: 'DINNextLTArabic', 'Tajawal', sans-serif; } /* ── Photo deck ──────────────────────────────────────────────────────── Ported from VIP Tickets' AuthSplit.vue showcase, minus the JS: every slot sits in the same grid cell and they cross-fade on a 20s CSS cycle, 5s each. Fixed box, so the headline below never moves between photos. Inside this media query on purpose - a background-image on a non-rendered element is never fetched, so phones pay zero bytes. */ .vsp-deck { display: grid; width: 380px; height: 320px; margin-bottom: 36px; } .vsp-deck > * { grid-area: 1 / 1; place-self: center; } .vsp-slot { position: relative; width: 380px; height: 270px; opacity: 0; pointer-events: none; animation: vsp-deal 20s infinite both; } /* The card in front rests at its tilt; the rest wait lower, smaller and straighter, as though still in the pile. No border and no ghost frames behind it - the photo alone, held off the panel by its shadow. */ .vsp-card { width: 100%; height: 100%; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.45); background-size: cover; background-position: center; transform-origin: 50% 60%; animation: vsp-deal-face 20s infinite both; } .vsp-slot:nth-child(1) .vsp-card { background-image: url("../../images/auth/deck-01.webp"); } .vsp-slot:nth-child(2) .vsp-card { background-image: url("../../images/auth/deck-02.webp"); } .vsp-slot:nth-child(3) .vsp-card { background-image: url("../../images/auth/deck-03.webp"); } .vsp-slot:nth-child(4) .vsp-card { background-image: url("../../images/auth/deck-04.webp"); } .vsp-slot:nth-child(2), .vsp-slot:nth-child(2) .vsp-card { animation-delay: 5s; } .vsp-slot:nth-child(3), .vsp-slot:nth-child(3) .vsp-card { animation-delay: 10s; } .vsp-slot:nth-child(4), .vsp-slot:nth-child(4) .vsp-card { animation-delay: 15s; } .vsp-feats { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 8px; font-size: .78rem; color: rgba(255,255,255,.62); } .vsp-feats li::before { content: "\2713"; color: var(--vsp-gold); margin-inline-end: 6px; font-weight: 700; } .vsp-panel__foot { position: relative; } .vsp-copy { margin: 0; font-size: 11.5px; color: rgba(255,255,255,.35); } .vsp-form { padding-inline: 40px; justify-content: center; } .vsp-form__inner { padding-block: 56px; } .vsp-wordmark { display: none; } /* the panel logo covers it */ .vsp-head { text-align: start; } .vsp-head h1 { font-size: 2rem; } .vsp-head p { max-width: 26rem; } .vsp-foot { text-align: start; padding-inline: 40px; padding-bottom: 40px; margin-inline: auto; } /* OTP views pass align="center": the code boxes, timer and divider are centred by their own rules, so a start-aligned heading above them reads crooked. Desktop only — below 1024px .vsp-head is already centred. */ .vsp--center .vsp-head { text-align: center; } .vsp--center .vsp-head p { margin-inline: auto; } } /* The panel is overflow:hidden and space-between; below ~660px of viewport height the logo + deck + headline + copyright stop fitting, and the deck is the decoration, so it is what goes. (Was 720px, before the brand row went.) */ @media (min-width: 1024px) and (max-height: 660px) { .vsp-deck { display: none; } } @media (prefers-reduced-motion: reduce) { .vsp-slot, .vsp-card { animation: none; } .vsp-slot:nth-child(1) { opacity: 1; } .vsp-slot:nth-child(1) .vsp-card { transform: rotate(-3deg); } } /* The pair mid-fade would dip and let the panel show through on one shared curve, so the card leaving holds then releases while the one arriving rises at once - between them the stack never thins. (= AuthSplit.vue:241-252) */ @keyframes vsp-deal { 0% { opacity: 0; z-index: 2; animation-timing-function: cubic-bezier(0,0,.2,1); } 3.5% { opacity: 1; } 25% { opacity: 1; animation-timing-function: cubic-bezier(.4,0,1,1); } 28.5% { opacity: 0; z-index: 1; } 100% { opacity: 0; z-index: 1; } } @keyframes vsp-deal-face { 0% { transform: translateY(12px) rotate(-1deg) scale(.985); animation-timing-function: cubic-bezier(0,0,.2,1); } 3.5% { transform: rotate(-3deg); } 25% { transform: rotate(-3deg); animation-timing-function: cubic-bezier(.4,0,1,1); } 28.5% { transform: translateY(12px) rotate(-1deg) scale(.985); } 100% { transform: translateY(12px) rotate(-1deg) scale(.985); } } /* Narrow desktop: at exactly 1024px the panel is only ~524px wide. */ @media (min-width: 1024px) and (max-width: 1199.98px) { .vsp-panel { padding: 36px; } .vsp-panel__logo img { height: 46px; } .vsp-panel__headline { font-size: 1.42rem; } .vsp-form, .vsp-foot { padding-inline: 28px; } } /* ── The genuinely asymmetric cases ─────────────────────────────────────── */ [dir="rtl"] .vsp-panel__logo { align-self: flex-end; } /* hug the divider */ [dir="rtl"] .vsp-pill svg { transform: scaleX(-1); } /* "back" follows the writing direction */ /* ── Segmented control (login only) ─────────────────────────────────────── */ .vsp-seg { display: flex; width: 100%; max-width: 320px; margin: 0 auto 22px; padding: 4px; border: 1px solid var(--vsp-line); border-radius: 999px; background: #f4f4f2; } .vsp-seg__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--vsp-muted); font-family: 'DINNextLTArabic', 'Tajawal', sans-serif; font-size: .84rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; } .vsp-seg__btn:hover:not(.active) { color: var(--vsp-ink); } .vsp-seg__btn.active { background: #fff; color: var(--vsp-ink); box-shadow: 0 1px 3px rgba(0,0,0,.10), inset 0 0 0 1.5px var(--vsp-gold); } .vsp-pane { display: none; } .vsp-pane.active { display: block; } @media (min-width: 1024px) { .vsp-seg { margin-inline: 0 auto; } } /* ========================================================================== Shared body chrome - every rule that used to be repeated, byte for byte, across two or more auth views. Values are unchanged; only the scope is new. .vsp-body is what makes the bare element selectors (label, input, h2, p) safe: they are no longer global. ========================================================================== */ /* Messages and field errors */ .vsp-body .message { font-size: 13px; padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; text-align: start; } .vsp-body .message.error { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; } .vsp-body .message.success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; } .vsp-body .err { color: #ef4444; font-size: 12px; margin-top: 5px; text-align: start; } /* Step indicator */ .vsp-body .steps { display: flex; gap: 8px; justify-content: center; margin-bottom: 22px; } .vsp-body .step { flex: 1; max-width: 60px; height: 5px; border-radius: 3px; background: #e5e7eb; } .vsp-body .step.on { background: var(--vsp-ink); } /* Labels and text inputs */ .vsp-body label, .vsp-body .form-field-label { display: block; font-size: .85rem; font-weight: 400; color: #444; margin-bottom: 6px; text-align: start; } .vsp-body input[type=email], .vsp-body input[type=text], .vsp-body input[type=password] { width: 100%; padding: 12px 16px; border-radius: 6px; border: 1.5px solid var(--vsp-border); background: #fff; color: var(--vsp-ink); font-size: 14px; font-family: 'DINNextLTArabic', 'Tajawal', sans-serif; direction: ltr; text-align: left; transition: border-color .2s, box-shadow .2s; } .vsp-body input[type=email]:focus, .vsp-body input[type=text]:focus, .vsp-body input[type=password]:focus { outline: none; border-color: var(--vsp-gold); box-shadow: 0 0 0 3px rgba(227,176,75,.15); } .vsp-body input::placeholder { color: var(--vsp-faint); } /* Password field with the eye toggle. The input carries direction:ltr on itself, so a logical property here would resolve against LTR in BOTH languages - hence the physical pair, gated on [dir]. */ .vsp-body .pw-wrap { position: relative; } .vsp-body .pw-toggle { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--vsp-faint); background: none; border: none; padding: 0; font-size: 14px; } .vsp-body .pw-toggle:hover { color: var(--vsp-ink); } [dir="ltr"] .vsp-body .pw-wrap input { padding-right: 44px; } [dir="ltr"] .vsp-body .pw-toggle { right: 12px; } [dir="rtl"] .vsp-body .pw-wrap input { padding-left: 44px; } [dir="rtl"] .vsp-body .pw-toggle { left: 12px; } /* Primary buttons (charcoal, gold on hover) */ .vsp-body .btn-submit, .vsp-body .btn-fp { width: 100%; padding: 13px; border-radius: 8px; border: none; background: var(--vsp-ink); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; font-family: 'DINNextLTArabic', 'Tajawal', sans-serif; transition: background .25s, transform .2s; } .vsp-body .btn-submit:hover:not(:disabled), .vsp-body .btn-fp:hover:not(:disabled) { background: var(--vsp-gold); color: #151515; transform: translateY(-1px); } .vsp-body .btn-submit:disabled, .vsp-body .btn-fp:disabled { opacity: .5; cursor: not-allowed; transform: none; } .vsp-body .btn-login { display: inline-block; width: 100%; padding: 13px; border-radius: 8px; background: var(--vsp-ink); color: #fff; font-size: 15px; font-weight: 600; text-align: center; text-decoration: none; transition: background .25s; font-family: 'DINNextLTArabic', 'Tajawal', sans-serif; } .vsp-body .btn-login:hover { background: var(--vsp-gold); color: #151515; } /* Secondary / outline buttons */ .vsp-body .btn-resend, .vsp-body .btn-secondary-outline { width: 100%; padding: 13px; border-radius: 8px; border: 1.5px solid var(--vsp-border); background: #fff; color: var(--vsp-ink); font-weight: 600; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: border-color .2s, background .2s; font-family: 'DINNextLTArabic', 'Tajawal', sans-serif; text-decoration: none; } .vsp-body .btn-resend:hover:not(:disabled), .vsp-body .btn-secondary-outline:hover { border-color: var(--vsp-gold); background: #fffbf2; color: var(--vsp-ink); } .vsp-body .btn-resend:disabled { opacity: .5; cursor: not-allowed; } /* "or" rule */ .vsp-body .or-divider { display: flex; align-items: center; gap: 12px; color: var(--vsp-faint); font-size: 13px; } .vsp-body .or-divider::before, .vsp-body .or-divider::after { content: ''; flex: 1; height: 1px; background: var(--vsp-line); } /* OTP grid. `input.otp-box`, not `.otp-box`: the generic .vsp-body input[type=text] rule above (line 238) is 0-2-1 and would otherwise win on width/padding/font-size/ text-align/radius, rendering the boxes full-width and left-aligned. Geometry mirrors VIP Tickets' OtpInput.vue; colours stay valet gold/ink. */ .vsp-body form.otp-form { display: flex; flex-direction: column; gap: 16px; } .vsp-body .otp-inputs { display: flex; justify-content: center; gap: 12px; margin-bottom: 8px; direction: ltr; } .vsp-body input.otp-box { width: 48px; height: 60px; padding: 0; text-align: center; font-size: 24px; font-weight: 900; line-height: 1; border-radius: 14px; border: 1.5px solid var(--vsp-border); background: #fff; color: var(--vsp-ink); transition: border-color .2s, box-shadow .2s; font-family: 'DINNextLTArabic', sans-serif; } .vsp-body input.otp-box:focus { outline: none; border-color: var(--vsp-gold); box-shadow: 0 0 0 3px rgba(227,176,75,.15); } @media (min-width: 640px) { .vsp-body input.otp-box { width: 56px; } } .vsp-body #timer { text-align: center; font-size: 13px; color: var(--vsp-muted); margin-top: 6px; } .vsp-body .phone-hint { text-align: center; font-size: 13px; color: var(--vsp-muted); margin-bottom: 20px; background: #f9fafb; border: 1px solid var(--vsp-line); border-radius: 8px; padding: 10px 14px; } .vsp-body .phone-hint strong { color: var(--vsp-ink); direction: ltr; display: inline-block; } /* Success screen */ .vsp-body .success-stack { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .vsp-body .success-stack h2 { font-size: 1.3rem; font-weight: 700; margin: 0; color: var(--vsp-ink); } .vsp-body .success-stack p { font-size: .9rem; color: var(--vsp-muted); margin: 0; line-height: 1.6; } .vsp-body .icon-circle { width: 72px; height: 72px; border-radius: 50%; background: #f0fdf4; border: 2px solid #86efac; display: flex; align-items: center; justify-content: center; font-size: 32px; color: #16a34a; } .vsp-body .redirect-bar-wrap { width: 100%; background: #e5e7eb; border-radius: 99px; height: 5px; overflow: hidden; margin-top: 4px; } .vsp-body .redirect-bar { height: 100%; border-radius: 99px; background: var(--vsp-gold); width: 100%; transition: width 1s linear; } .vsp-body .redirect-note { font-size: 12px; color: var(--vsp-faint); } /* Fine print */ .vsp-body .privacy-note { text-align: center; font-size: 12px; color: var(--vsp-muted); line-height: 2; margin-top: 4px; } .vsp-body .privacy-note a { color: var(--vsp-gold); text-decoration: underline; font-weight: 600; } .vsp-body .privacy-note a:hover { color: var(--vsp-gold-3); } .vsp-foot .foot-link { display: inline-block; font-size: 13px; color: var(--vsp-muted); text-decoration: none; } .vsp-foot .foot-link:hover { color: var(--vsp-gold); } /* ── Small phones ───────────────────────────────────────────────────────── */ @media (max-width: 480px) { .vsp-form__inner { padding-block: 36px 56px; } .vsp-head h1 { font-size: 1.5rem; } .vsp-seg__btn { font-size: .8rem; padding: 8px 6px; gap: 5px; } }