/* ========================================================================= PvPAssist — Auth V2 (scoped) Every selector lives under `.pvp-auth-body`, which only layouts/account.blade puts on . Nothing here can reach /account, /admin or the landing. Loaded after css/pvpassist.css, so the shared primitives it deliberately reuses — .pvp-btn, .pvp-field, .pvp-check, .pvp-flash — keep working on the account settings form and the admin panel, which share those classes. This file only ever overrides them INSIDE the auth surface. ========================================================================= */ .pvp-auth-body { /* Landing-family palette, kept local so it cannot leak into the app shell. */ --a-bg: #060d16; --a-bg-deep: #04090f; --a-panel: #0c1826; --a-panel-2: #0e1d2e; --a-line: rgba(96, 148, 208, 0.16); --a-line-2: rgba(96, 148, 208, 0.30); --a-line-3: rgba(96, 168, 232, 0.46); --a-blue: #1f8cff; --a-cyan: #3fb0ff; --a-cyan-soft: #7ecbff; --a-fg: #ffffff; --a-fg-2: #aebfd2; --a-fg-3: #7a8da4; --a-radius: 0.85rem; --a-radius-lg: 1.15rem; min-height: 100dvh; background: var(--a-bg); color: var(--a-fg); } /* ========================================================================= Shell ========================================================================= */ .pvp-auth-shell { position: relative; isolation: isolate; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); /* No fixed height anywhere: a long form (register) grows the page and the document scrolls normally instead of the card being clipped. */ overflow: hidden; } /* ========================================================================= Artwork One real, text-free plate from the marketing set. On narrow screens it is a full-bleed atmosphere behind the form; from 1024px up it is clipped to the left column and the form sits on clean surface beside it, which is what lets the plate be genuinely visible rather than faded to nothing. ========================================================================= */ .pvp-auth-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .pvp-auth-art img { width: 100%; height: 100%; object-fit: cover; /* Framed on the warrior. The plate is pre-cropped free of baked-in text, so no viewport can bring a wordmark or slogan back on screen. */ object-position: 52% 26%; opacity: 0.62; } /* Scrim: the card carries form legibility on its own (opaque surface plus a backdrop blur), so this only has to keep the plate from competing with the text — not erase it. */ .pvp-auth-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 70% 10%, rgba(31, 140, 255, 0.22), transparent 60%), linear-gradient(180deg, rgba(6, 13, 22, 0.45) 0%, rgba(6, 13, 22, 0.68) 48%, rgba(6, 13, 22, 0.90) 100%); } /* ========================================================================= Ghost copy — decorative, desktop only ========================================================================= */ .pvp-auth-stage { display: none; } .pvp-auth-ghost { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; text-transform: uppercase; color: var(--a-fg-3); } .pvp-auth-ghost span { color: var(--a-cyan); opacity: 0.75; } .pvp-auth-ghost::after { content: ""; display: block; width: 4.5rem; height: 2px; margin-top: 1.35rem; background: var(--a-cyan); opacity: 0.6; } /* ========================================================================= Panel — logo + card + foot ========================================================================= */ .pvp-auth-panel { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(1.75rem, 5vw, 3rem) clamp(1.15rem, 5vw, 2.5rem); } /* --- Brand: the real horizontal wordmark, never a CSS letterform --------- */ .pvp-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem); text-align: center; text-decoration: none; color: inherit; } .pvp-auth-brand:hover, .pvp-auth-brand:focus-visible { color: inherit; } /* Sized by width with height:auto, so the wordmark's aspect ratio is fixed by the mechanism and cannot drift. No box, no panel, no filter. */ .pvp-auth-brand__logo { display: block; width: clamp(9.5rem, 40vw, 10.75rem); height: auto; } .pvp-auth-brand__tagline { color: var(--a-fg-3); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.2; } /* --- Card ---------------------------------------------------------------- */ .pvp-auth-card { position: relative; width: 100%; /* Content-driven height: the short forms stay short instead of being padded out to match register. */ max-width: 26.5rem; border: 1px solid var(--a-line-2); border-radius: var(--a-radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%), rgba(12, 24, 38, 0.92); box-shadow: 0 28px 70px rgba(3, 8, 16, 0.7), 0 0 60px rgba(31, 140, 255, 0.10); padding: clamp(1.45rem, 3vw, 1.9rem) clamp(1.25rem, 2.6vw, 1.75rem); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* A single hairline of light along the top edge — the landing's cyan accent, used once rather than as an all-round glow. */ .pvp-auth-card::before { content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--a-line-3), transparent); } .pvp-auth-title { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.22; color: var(--a-fg); } .pvp-auth-lead { margin: 0.6rem 0 0; color: var(--a-fg-2); font-size: 0.94rem; line-height: 1.6; } .pvp-auth-form { margin-top: 1.4rem; display: grid; gap: 0.95rem; } /* --- Fields: shared .pvp-field markup, auth-local skin ------------------- */ .pvp-auth-body .pvp-field { gap: 0.4rem; } .pvp-auth-body .pvp-field label { color: var(--a-fg-2); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em; } .pvp-auth-body .pvp-field input[type="email"], .pvp-auth-body .pvp-field input[type="password"], .pvp-auth-body .pvp-field input[type="text"] { min-height: 3rem; border-radius: var(--a-radius); border: 1px solid var(--a-line-2); background: rgba(4, 10, 18, 0.72); color: var(--a-fg); font-size: 0.98rem; } .pvp-auth-body .pvp-field input::placeholder { color: var(--a-fg-3); } .pvp-auth-body .pvp-field input:hover { border-color: var(--a-line-3); } .pvp-auth-body .pvp-field input:focus { outline: none; border-color: var(--a-cyan); box-shadow: 0 0 0 3px rgba(63, 176, 255, 0.20); } .pvp-auth-body .pvp-field input.is-invalid { border-color: #e1687a; box-shadow: 0 0 0 3px rgba(225, 104, 122, 0.14); } .pvp-auth-body .pvp-field-inline { margin-top: 0.1rem; } .pvp-auth-body .pvp-check { color: var(--a-fg-2); font-size: 0.88rem; } .pvp-auth-body .pvp-check input { width: 1rem; height: 1rem; accent-color: var(--a-blue); } /* --- Primary action ------------------------------------------------------ */ .pvp-auth-body .pvp-btn { border-radius: var(--a-radius); } .pvp-auth-body .pvp-btn-primary { background: var(--a-blue); box-shadow: 0 10px 30px rgba(31, 140, 255, 0.30); } .pvp-auth-body .pvp-btn-primary:hover { background: #35a0ff; box-shadow: 0 14px 38px rgba(31, 140, 255, 0.40); } .pvp-auth-body .pvp-btn-secondary { background: rgba(10, 22, 38, 0.6); border-color: var(--a-line-2); } .pvp-auth-body .pvp-btn-secondary:hover { border-color: var(--a-line-3); background: rgba(16, 35, 56, 0.85); } .pvp-auth-body .pvp-form-gap { margin-top: 0.75rem; } .pvp-auth-body a:focus-visible, .pvp-auth-body button:focus-visible, .pvp-auth-body input:focus-visible { outline: 2px solid var(--a-cyan); outline-offset: 2px; } /* --- Secondary links: present, but never competing with the CTA ---------- */ .pvp-auth-switch { margin: 1.15rem 0 0; text-align: center; color: var(--a-fg-3); font-size: 0.9rem; } .pvp-auth-legal { margin: 0.9rem 0 0; text-align: center; color: var(--a-fg-3); font-size: 0.8rem; line-height: 1.55; } .pvp-auth-legal a { color: var(--a-cyan-soft); font-weight: 600; text-decoration: none; } .pvp-auth-legal a:hover, .pvp-auth-legal a:focus-visible { color: var(--a-cyan); text-decoration: underline; text-underline-offset: 2px; } .pvp-auth-switch a, .pvp-auth-body .pvp-field-inline a { color: var(--a-cyan-soft); font-weight: 600; text-decoration: none; } .pvp-auth-switch a:hover, .pvp-auth-body .pvp-field-inline a:hover { color: var(--a-cyan); text-decoration: underline; text-underline-offset: 2px; } .pvp-auth-body .pvp-field-inline a { font-size: 0.87rem; } .pvp-auth-foot { margin: clamp(1.1rem, 2.2vw, 1.5rem) 0 0; text-align: center; color: var(--a-fg-3); font-size: 0.84rem; } .pvp-auth-foot a { color: var(--a-fg-3); text-decoration: none; } .pvp-auth-foot a:hover { color: var(--a-fg-2); text-decoration: underline; text-underline-offset: 2px; } /* --- Flash: shared markup, auth-local skin ------------------------------- */ .pvp-auth-body .pvp-flash { border-radius: var(--a-radius); font-size: 0.9rem; } .pvp-auth-body .pvp-flash-success { border: 1px solid rgba(47, 207, 139, 0.42); background: rgba(47, 207, 139, 0.12); color: #c9f5e2; } .pvp-auth-body .pvp-flash-error { border: 1px solid rgba(225, 104, 122, 0.45); background: rgba(225, 104, 122, 0.12); color: #ffd7dd; } /* ========================================================================= Desktop composition From 1024px the shell becomes two columns: the plate (with its ghost line) on the left, the form on the right. Below that it stays one centred column so the 768–1024 band never renders an awkward half-and-half split. ========================================================================= */ @media (min-width: 1024px) { .pvp-auth-shell { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); } /* Clipped to the left column, and allowed to be properly visible there because no form sits on top of it. */ .pvp-auth-art { right: 47%; } .pvp-auth-art img { opacity: 0.92; object-position: 50% 26%; } .pvp-auth-art::after { background: radial-gradient(ellipse 80% 60% at 40% 18%, rgba(31, 140, 255, 0.20), transparent 62%), linear-gradient(180deg, rgba(6, 13, 22, 0.55) 0%, rgba(6, 13, 22, 0.20) 38%, rgba(6, 13, 22, 0.72) 100%), /* Dissolve into the form column instead of ending on a hard edge. */ linear-gradient(90deg, rgba(6, 13, 22, 0.80) 0%, rgba(6, 13, 22, 0.10) 26%, rgba(6, 13, 22, 0.45) 72%, var(--a-bg) 100%); } .pvp-auth-stage { display: flex; align-items: flex-end; padding: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 3.6vw, 3.5rem); min-width: 0; } /* The brand block and the card are the same width and are centred in the column as one stack, so the wordmark's left edge lines up with the card's while the pair stays balanced in the space beside the artwork. Anchoring them to the column's left padding instead leaves a growing dead margin on the right as the viewport widens. */ .pvp-auth-panel { align-items: center; padding-inline: clamp(2rem, 4vw, 4rem); } .pvp-auth-brand { width: 100%; max-width: 27rem; align-items: flex-start; text-align: left; } .pvp-auth-brand__logo { width: 10.75rem; } .pvp-auth-card { max-width: 27rem; } } @media (min-width: 1440px) { .pvp-auth-art { right: 48%; } } /* ========================================================================= Reduced motion ========================================================================= */ @media (prefers-reduced-motion: reduce) { .pvp-auth-body *, .pvp-auth-body *::before, .pvp-auth-body *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } .pvp-auth-body .pvp-btn-primary:hover { transform: none; } }