/* ================================================================ Resayil — Login Page · "Aurora Split" redesign Phase 24.14 login overhaul, 2026-06-21 ---------------------------------------------------------------- Full-bleed split: a living orange aurora brand canvas (left) and a clean form theatre (right). Collapses to a centered, compact-branded form on <=991px. Hard requirements honoured: - Stock Frappe web navbar + footer hidden on body.login-page so there is no double-nav. - .resayil-login breaks out of Frappe's centered .page-container to sit edge-to-edge (no gray frame). - Inputs read ACTIVE (solid fill + strong border), never disabled. - One accent locked: Resayil Orange. Dark mode + RTL + reduced motion all covered. Selectors scoped to .resayil-login. Load order: resayil-brand.css -> rs-portal.css -> rs-login.css -> login.bundle.css (Frappe's). Selectors stay prefixed with .resayil-login to win specificity over Frappe's stock styles. ================================================================ */ /* ================================================================ 0. KILL FRAPPE WEB CHROME ON LOGIN ---------------------------------------------------------------- Frappe 17's web renderer does NOT add `body.login-page` here — the ships with an empty class. The stock web navbar + footer are direct children of , and the page sits inside a route wrapper `#page-login`. So we hook off `#page-login` (always present on the login route) and the modern `body:has(.resayil-login)` fallback, then kill the stock chrome and flatten every wrapper gutter so the Aurora Split is truly edge-to-edge, full-viewport. ================================================================ */ /* The stock navbar + footer are siblings of #page-login under . */ body:has(#page-login) > nav.navbar, body:has(#page-login) > header.navbar, body:has(#page-login) > .navbar, body:has(#page-login) > .web-footer, body:has(#page-login) > footer, body:has(.resayil-login) > nav.navbar, body:has(.resayil-login) > .navbar, body:has(.resayil-login) > .web-footer, body:has(.resayil-login) > footer, /* Empty breadcrumb rail Frappe injects above the page body — its box margin pushed the stage down ~24px even at height 0. */ #page-login .page-breadcrumbs { display: none !important; } /* Let the login own the whole viewport — strip every web wrapper gutter. overflow-x:hidden guards against the 100vw full-bleed breakout adding a horizontal scrollbar when a vertical scrollbar reserves space. */ body:has(#page-login), body:has(.resayil-login) { background: var(--rs-bg) !important; color: var(--rs-fg); overflow-x: hidden; } /* Frappe's native error/message dialogs (frappe.throw / msgprint, e.g. the CSRF "Invalid Request" popup) are appended as plain Bootstrap .modal children of and never set their own text color — they rely on inheriting a normal dark-on-white default. In dark mode --rs-fg resolves to a near-white value, and the body-wide color rule above leaks into these stock dialogs, which still have a white .modal-content background, making the message invisible. Reset to a fixed dark color here so any native dialog stays readable regardless of the login page's own theme. */ body:has(#page-login) .modal-content, body:has(.resayil-login) .modal-content { color: #1c1c1c; } /* Flatten the route wrapper chain: #page-login > .page-content-wrapper > main.container.my-4 > .page_content main.container.my-4 carries the gray frame (max-width 1290px, ~67px left margin, my-4 vertical margin, 24px padding). Neutralise the lot so #rs-login-root can break out to a true 100vw / 100dvh stage. */ #page-login, #page-login .page-content-wrapper, #page-login > main, #page-login main.container, #page-login .page_content, #page-login .page-content, #page-login .main-section, #page-login #body, #page-login .container, #page-login .page-container { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; } /* ================================================================ 1. ROOT — full-bleed stage ================================================================ */ .resayil-login { /* Break out of any centered ancestor container to true viewport width */ position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; min-height: 100vh; min-height: 100dvh; background: var(--rs-bg); color: var(--rs-fg); /* Link ink: brand orange fails AA on white (2.87:1); use a darker burnt-orange for link text in light mode (~5.8:1). Dark mode keeps full brand orange (passes on near-black). */ --rs-link: #b23f00; font-family: var(--rs-font-sans); font-size: 15px; line-height: 1.6; display: flex; flex-direction: column; overflow-x: clip; } .resayil-login * { box-sizing: border-box; } [dir="rtl"] .resayil-login { font-family: var(--rs-font-arabic); } :root[data-theme="dark"] .resayil-login, .resayil-login[data-theme="dark"] { --rs-link: var(--rs-accent); } /* Noscript banner */ .resayil-login .rs-login-noscript { max-width: 520px; margin: 40px auto; padding: 20px 24px; background: var(--rs-accent-soft); border: 1px solid var(--rs-accent); border-radius: var(--rs-radius); color: var(--rs-fg); text-align: center; } .resayil-login .rs-login-noscript h4 { margin: 0 0 8px; font-weight: 700; color: var(--rs-fg); } .resayil-login .rs-login-noscript p { margin: 0; color: var(--rs-fg-muted); } /* ================================================================ 2. PRIMARY STAGE — split grid ================================================================ */ .resayil-login .rs-login-stage { flex: 1; display: flex; } .resayil-login .rs-stage-grid { flex: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 100dvh; } /* ================================================================ 3. LEFT — AURORA BRAND CANVAS ================================================================ */ .resayil-login .rs-brand-canvas { position: relative; overflow: hidden; background: #07070a; /* deep near-black base, theme-independent */ color: #fafafa; isolation: isolate; } /* --- aurora layers --- */ .resayil-login .rs-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .resayil-login .rs-aurora-blob { position: absolute; border-radius: 50%; filter: blur(54px); /* reads ~identical to 70px once scaled, far cheaper */ opacity: 0.72; will-change: transform; } .resayil-login .rs-aurora-1 { width: min(46vw, 640px); height: min(46vw, 640px); top: -12%; left: -8%; background: radial-gradient(circle at 50% 50%, #ff6a00 0%, rgba(255,106,0,0) 68%); animation: rs-aurora-drift-1 26s ease-in-out infinite alternate; } .resayil-login .rs-aurora-2 { width: min(38vw, 520px); height: min(38vw, 520px); bottom: -14%; right: -10%; background: radial-gradient(circle at 50% 50%, #ff4d00 0%, rgba(255,77,0,0) 70%); opacity: 0.58; animation: rs-aurora-drift-2 32s ease-in-out infinite alternate; } .resayil-login .rs-aurora-3 { width: min(30vw, 420px); height: min(30vw, 420px); top: 38%; left: 36%; background: radial-gradient(circle at 50% 50%, #ffb070 0%, rgba(255,176,112,0) 72%); opacity: 0.34; animation: rs-aurora-drift-3 38s ease-in-out infinite alternate; } @keyframes rs-aurora-drift-1 { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(8%, 10%, 0) scale(1.15); } } @keyframes rs-aurora-drift-2 { 0% { transform: translate3d(0,0,0) scale(1.05); } 100% { transform: translate3d(-10%, -8%, 0) scale(0.9); } } @keyframes rs-aurora-drift-3 { 0% { transform: translate3d(0,0,0) scale(0.9); } 100% { transform: translate3d(-6%, 12%, 0) scale(1.2); } } /* fine dot grid */ .resayil-login .rs-aurora-grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 80% 70% at 40% 40%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 40% 40%, #000 30%, transparent 80%); opacity: 0.6; } /* film grain — tiny SVG noise tile keeps the gradients from banding */ .resayil-login .rs-aurora-grain { position: absolute; inset: 0; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } /* top + bottom vignette for legibility of fixed content */ .resayil-login .rs-brand-canvas::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7,7,10,0.55) 0%, rgba(7,7,10,0) 26%, rgba(7,7,10,0) 70%, rgba(7,7,10,0.65) 100%); pointer-events: none; } /* --- brand content --- */ .resayil-login .rs-brand-inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding: clamp(32px, 4vw, 56px) clamp(36px, 5vw, 72px); gap: 32px; } .resayil-login .rs-brand-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .resayil-login .rs-brand-logo { display: inline-flex; } .resayil-login .rs-brand-logo img { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); /* force the wordmark to read white on dark */ } .resayil-login .rs-brand-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: rgba(250,250,250,0.78); padding-block: 5px; padding-inline: 9px 11px; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--rs-radius-full); background: rgba(255,255,255,0.04); backdrop-filter: blur(6px); } .resayil-login .rs-brand-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rs-accent); box-shadow: 0 0 0 0 rgba(255,106,0,0.55); animation: rs-status-pulse 2.6s ease-out infinite; } @keyframes rs-status-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,106,0,0.5); } 70% { box-shadow: 0 0 0 7px rgba(255,106,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,106,0,0); } } .resayil-login .rs-brand-mid { max-width: 44ch; } .resayil-login .rs-brand-headline { font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; line-height: 1.07; letter-spacing: -0.025em; margin: 0 0 18px; max-width: 20ch; /* punchy two-line break; sub keeps its own measure */ color: #ffffff; } [dir="rtl"] .resayil-login .rs-brand-headline { max-width: 26ch; } .resayil-login .rs-brand-sub { font-size: 16px; line-height: 1.6; color: rgba(250,250,250,0.78); margin: 0 0 28px; max-width: 42ch; } /* inline trust ROW — deliberately not stacked cards */ .resayil-login .rs-brand-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .resayil-login .rs-brand-trust li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 500; color: rgba(250,250,250,0.9); } .resayil-login .rs-brand-trust svg { flex-shrink: 0; color: #ff8a3d; } .resayil-login .rs-brand-foot { font-size: 13px; color: rgba(250,250,250,0.5); } /* ================================================================ 4. RIGHT — FORM THEATRE ================================================================ */ .resayil-login .rs-login-main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px clamp(24px, 5vw, 72px); background: var(--rs-bg); } /* floating top-right controls (Plans + theme toggle) */ .resayil-login .rs-login-controls { position: absolute; top: 22px; inset-inline-end: clamp(20px, 4vw, 40px); display: inline-flex; align-items: center; gap: 8px; z-index: 5; } .resayil-login .rs-login-nav-link { padding: 8px 14px; color: var(--rs-fg-muted); text-decoration: none; font-size: 14px; font-weight: 500; border-radius: var(--rs-radius); transition: background 150ms var(--rs-ease), color 150ms var(--rs-ease); } .resayil-login .rs-login-nav-link:hover, .resayil-login .rs-login-nav-link:focus-visible { background: var(--rs-surface-2); color: var(--rs-fg); text-decoration: none; } .resayil-login .rs-login-theme-btn { width: 36px; height: 36px; border-radius: var(--rs-radius); background: var(--rs-surface-2); border: 1px solid var(--rs-border); color: var(--rs-fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background 150ms var(--rs-ease), color 150ms var(--rs-ease), border-color 150ms var(--rs-ease); } .resayil-login .rs-login-theme-btn:hover { background: var(--rs-accent-soft); color: var(--rs-accent); border-color: var(--rs-accent); } .resayil-login .rs-login-theme-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--rs-accent-glow); } .resayil-login .rs-sun { display: block; } .resayil-login .rs-moon { display: none; } :root[data-theme="dark"] .resayil-login .rs-sun, .resayil-login[data-theme="dark"] .rs-sun { display: none; } :root[data-theme="dark"] .resayil-login .rs-moon, .resayil-login[data-theme="dark"] .rs-moon { display: block; } /* compact brand header — only when canvas is hidden (<=991px) */ .resayil-login .rs-mobile-brand { display: none; } .resayil-login .rs-mobile-brand img { height: 30px; width: auto; display: block; } /* the card itself — flat on the theatre (panel is the container). `!important` on background: Frappe's login.bundle.css ships `.for-login .page-card { background:#fff }` at the SAME specificity (0,2,0) as our `.resayil-login .rs-login-card`, and loads AFTER us — so without !important the card paints white, which strands the near-white heading/labels invisible in dark mode (mobile especially, where the card is the whole surface). */ .resayil-login .rs-login-card { width: 100%; max-width: 400px; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0; } /* Card head */ .resayil-login .rs-login-card .rs-card-head { text-align: start; margin-bottom: 26px; padding: 0; border: none; display: block; } .resayil-login .rs-login-card .rs-card-head h4 { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--rs-fg); margin: 0 0 7px; } .resayil-login .rs-login-card .rs-card-sub { font-size: 15px; color: var(--rs-fg-muted); margin: 0; line-height: 1.5; } /* belt+braces: nuke any stray legacy icon */ .resayil-login .rs-login-card .rs-card-icon { display: none !important; } /* ================================================================ 5. FORM INPUTS — must read ACTIVE, never disabled ================================================================ */ .resayil-login .rs-form-body, .resayil-login .page-card-body { padding: 0; } .resayil-login .form-group { margin-bottom: 18px; position: relative; } .resayil-login .form-label { display: block; font-size: 13px; font-weight: 600; color: var(--rs-fg); margin-bottom: 7px; } .resayil-login .email-field, .resayil-login .password-field { position: relative; } .resayil-login .form-control, .resayil-login input[type="text"], .resayil-login input[type="email"], .resayil-login input[type="password"] { width: 100%; height: 46px; padding: 10px 14px 10px 42px; background: var(--rs-bg); border: 1.5px solid var(--rs-border-strong); border-radius: var(--rs-radius); color: var(--rs-fg); font-family: inherit; font-size: 15px; line-height: 1.4; box-shadow: none; transition: border-color 150ms var(--rs-ease), box-shadow 150ms var(--rs-ease), background 150ms var(--rs-ease); } [dir="rtl"] .resayil-login .form-control, [dir="rtl"] .resayil-login input[type="text"], [dir="rtl"] .resayil-login input[type="email"], [dir="rtl"] .resayil-login input[type="password"] { padding: 10px 42px 10px 14px; } .resayil-login .form-control:hover { border-color: var(--rs-fg-subtle); } .resayil-login .form-control:focus, .resayil-login .form-control:focus-visible { outline: none; border-color: var(--rs-accent); box-shadow: 0 0 0 4px var(--rs-accent-glow); background: var(--rs-bg); } [data-theme="dark"] .resayil-login .form-control { background: var(--rs-bg-raised); border-color: var(--rs-border-strong); color: var(--rs-fg); } [data-theme="dark"] .resayil-login .form-control:focus { background: var(--rs-bg-raised); border-color: var(--rs-accent); } /* field icon brightens on focus-within for affordance */ .resayil-login .field-icon { position: absolute; top: 50%; inset-inline-start: 15px; transform: translateY(-50%); color: var(--rs-fg-subtle); pointer-events: none; z-index: 1; transition: color 150ms var(--rs-ease); } .resayil-login .form-group.is-focused .field-icon, .resayil-login .email-field:focus-within .field-icon, .resayil-login .password-field:focus-within .field-icon { color: var(--rs-accent); } .resayil-login .form-control::placeholder { color: var(--rs-fg-subtle); opacity: 1; } /* #737373 on the dark input fill is only 3.46:1 — lift to --rs-fg-muted (~6.2:1) */ [data-theme="dark"] .resayil-login .form-control::placeholder { color: var(--rs-fg-muted); } /* show/hide password */ .resayil-login .toggle-password { position: absolute; top: 50%; inset-inline-end: 12px; transform: translateY(-50%); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--rs-fg-muted); padding: 4px 8px; border-radius: var(--rs-radius-sm); user-select: none; transition: color 120ms var(--rs-ease), background 120ms var(--rs-ease); } .resayil-login .toggle-password:hover { color: var(--rs-accent); background: var(--rs-accent-soft); } /* Keyboard focus rings on the controls Frappe/our chrome left bare */ .resayil-login .btn-login-option:focus-visible, .resayil-login .rs-login-nav-link:focus-visible, .resayil-login .rs-brand-logo:focus-visible, .resayil-login .rs-aux-backlink a:focus-visible, .resayil-login .rs-login-signup a:focus-visible, .resayil-login .forgot-password-message a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--rs-accent-glow); border-radius: var(--rs-radius-sm); } /* forgot link */ .resayil-login .forgot-password-message { margin: 6px 0 20px; text-align: end; font-size: 13px; } .resayil-login .forgot-password-message a { color: var(--rs-link); font-weight: 600; text-decoration: none; } .resayil-login .forgot-password-message a:hover { color: var(--rs-link); text-decoration: underline; } /* ================================================================ 6. BUTTONS ================================================================ */ .resayil-login .page-card-actions { margin-top: 4px; } .resayil-login .btn-login, .resayil-login .btn-primary, .resayil-login button[type="submit"].btn-primary, .resayil-login .btn-forgot, .resayil-login .btn-login-with-email-link.btn-primary { background: var(--rs-accent) !important; border: 1px solid var(--rs-accent) !important; color: #ffffff !important; font-weight: 600; font-size: 15px; height: 48px; line-height: 1; border-radius: var(--rs-radius); width: 100%; box-shadow: 0 1px 2px rgba(0,0,0,0.08); cursor: pointer; transition: background 150ms var(--rs-ease), transform 90ms var(--rs-ease), box-shadow 200ms var(--rs-ease); } .resayil-login .btn-login:hover, .resayil-login .btn-primary:hover, .resayil-login .btn-forgot:hover { background: var(--rs-accent-hover) !important; border-color: var(--rs-accent-hover) !important; transform: translateY(-1px); box-shadow: 0 10px 24px var(--rs-accent-glow); } .resayil-login .btn-login:active, .resayil-login .btn-primary:active, .resayil-login .btn-forgot:active { transform: scale(0.985); background: var(--rs-accent-active) !important; border-color: var(--rs-accent-active) !important; box-shadow: 0 2px 6px var(--rs-accent-glow); } .resayil-login .btn-login:focus-visible, .resayil-login .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--rs-accent-glow), 0 10px 24px var(--rs-accent-glow); } /* invalid-login shake (login.js toggles .invalid-login) */ .resayil-login .login-content.page-card.invalid-login { animation: rs-login-shake 0.4s ease-in-out; } @keyframes rs-login-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } /* ================================================================ 7. DIVIDER + SOCIAL BUTTONS (Frappe injects these) ================================================================ */ .resayil-login .rs-or-wrap { display: flex; align-items: center; gap: 12px; width: 100%; margin: 22px 0 16px; } .resayil-login .rs-or-wrap::before, .resayil-login .rs-or-wrap::after { content: ""; flex: 1; height: 1px; background: var(--rs-border); } .resayil-login .rs-or-wrap .login-divider { display: inline-flex; flex: 0 0 auto; margin: 0; padding: 0; gap: 0; color: var(--rs-fg-subtle); font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; } .resayil-login .rs-or-wrap .login-divider::before, .resayil-login .rs-or-wrap .login-divider::after { content: none; } .resayil-login .rs-or-wrap .login-divider span { background: none; padding: 0; } .resayil-login .social-login-buttons { text-align: start; } .resayil-login .login-button-wrapper { margin-bottom: 8px; } .resayil-login .btn-login-option { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; padding: 0 14px; background: var(--rs-surface) !important; border: 1.5px solid var(--rs-border-strong) !important; color: var(--rs-fg) !important; border-radius: var(--rs-radius); font-weight: 500; font-size: 14px; text-decoration: none; transition: background 150ms var(--rs-ease), border-color 150ms var(--rs-ease), color 150ms var(--rs-ease); } .resayil-login .btn-login-option:hover { background: var(--rs-bg-subtle) !important; border-color: var(--rs-accent) !important; color: var(--rs-fg) !important; text-decoration: none; } [data-theme="dark"] .resayil-login .btn-login-option { background: var(--rs-bg-raised) !important; border-color: var(--rs-border-strong) !important; color: var(--rs-fg) !important; } [data-theme="dark"] .resayil-login .btn-login-option:hover { background: var(--rs-surface-2) !important; border-color: var(--rs-accent) !important; } /* ================================================================ 8. SIGN-UP LINE / AUX BACK LINK ================================================================ */ .resayil-login .rs-login-signup { width: 100%; max-width: 400px; margin: 22px auto 0; text-align: center; font-size: 14px; color: var(--rs-fg-muted); } .resayil-login .rs-login-signup a { color: var(--rs-link); font-weight: 600; text-decoration: none; } .resayil-login .rs-login-signup a:hover { color: var(--rs-link); text-decoration: underline; } .resayil-login .rs-aux-backlink { text-align: center; margin: 14px 0 0; font-size: 13px; } .resayil-login .rs-aux-backlink a { color: var(--rs-fg-muted); text-decoration: none; font-weight: 500; } .resayil-login .rs-aux-backlink a:hover { color: var(--rs-accent); text-decoration: underline; } /* ================================================================ 9. AUX STAGES (signup, forgot, email-link, social fallback) Centered card on an aurora field. ================================================================ */ .resayil-login .rs-aux-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px 16px; position: relative; overflow: hidden; background: #07070a; color: #fafafa; } .resayil-login .rs-aux-stage .rs-aurora-1 { left: 50%; top: -20%; transform: translateX(-50%); } .resayil-login .rs-aux-shell { position: relative; z-index: 2; width: 100%; max-width: 412px; background: var(--rs-bg); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-lg); box-shadow: var(--rs-shadow-xl); padding: 36px 32px 30px; color: var(--rs-fg); } .resayil-login .rs-aux-stage .rs-card-head { text-align: center; margin-bottom: 22px; } .resayil-login .rs-aux-stage .rs-card-head .app-logo { display: block; margin: 0 auto 14px; height: 30px; width: auto; } .resayil-login .rs-aux-stage .rs-card-head h4 { font-size: 21px; font-weight: 800; color: var(--rs-fg); margin: 0; letter-spacing: -0.01em; } .resayil-login .rs-aux-stage .rs-login-card { max-width: none; } .resayil-login .rs-aux-stage .rs-login-signup { margin-top: 18px; } .resayil-login .rs-aux-stage .sign-up-message a { color: var(--rs-link); font-weight: 600; text-decoration: none; } .resayil-login .rs-aux-stage .sign-up-message a:hover { color: var(--rs-link); text-decoration: underline; } /* ================================================================ 10. ENTRANCE MOTION (WAAPI in rs-login-enhance.js handles the rest) Pre-paint hidden state so there is no flash before JS animates in. html.no-js / reduced-motion fall back to fully visible. ================================================================ */ /* Scoped to the PRIMARY stage only — aux-stage cards (forgot/signup/ email-link) must never inherit this opacity:0 or they would be stranded invisible when login.route() toggles to them (the JS only choreographs the primary stage). */ .resayil-login[data-anim="ready"] .rs-login-stage .rs-brand-top, .resayil-login[data-anim="ready"] .rs-login-stage .rs-brand-mid > *, .resayil-login[data-anim="ready"] .rs-login-stage .rs-login-card, .resayil-login[data-anim="ready"] .rs-login-stage .rs-login-signup { opacity: 0; } /* ================================================================ 11. RESPONSIVE — collapse to centered form <=991px ================================================================ */ @media (max-width: 991px) { .resayil-login .rs-stage-grid { grid-template-columns: 1fr; } .resayil-login .rs-brand-canvas { display: none; } .resayil-login .rs-login-main { padding: 28px 22px 40px; justify-content: flex-start; } .resayil-login .rs-mobile-brand { display: block; margin: 12px auto 30px; } /* subtle top aurora wash so mobile is not naked white */ .resayil-login .rs-login-stage { background: radial-gradient(ellipse 130% 60% at 50% -10%, var(--rs-accent-glow) 0%, transparent 60%); } [data-theme="dark"] .resayil-login .rs-login-stage { background: radial-gradient(ellipse 130% 60% at 50% -10%, rgba(255,106,0,0.16) 0%, transparent 60%); } .resayil-login .rs-login-controls { top: 16px; } } @media (max-width: 520px) { .resayil-login .rs-login-card .rs-card-head h4 { font-size: 23px; } .resayil-login .rs-login-controls .rs-login-nav-link { display: none; } /* keep just the theme toggle */ .resayil-login .form-control { font-size: 16px; } /* prevent iOS zoom on focus */ .resayil-login .rs-aux-shell { padding: 28px 22px 24px; } } /* ================================================================ 12. REDUCED MOTION — freeze every decorative animation ================================================================ */ @media (prefers-reduced-motion: reduce) { .resayil-login .rs-aurora-blob, .resayil-login .rs-brand-status-dot { animation: none !important; } .resayil-login .btn-login, .resayil-login .btn-primary, .resayil-login .form-control { transition: none !important; } .resayil-login .login-content.page-card.invalid-login { animation: none; } /* never leave content stuck invisible if JS motion is skipped */ .resayil-login[data-anim="ready"] .rs-login-stage .rs-brand-top, .resayil-login[data-anim="ready"] .rs-login-stage .rs-brand-mid > *, .resayil-login[data-anim="ready"] .rs-login-stage .rs-login-card, .resayil-login[data-anim="ready"] .rs-login-stage .rs-login-signup { opacity: 1; } }