/* * DarajaERP Operational Workspace — Login * * Loaded only on /login (see layouts/auth-modern.blade.php), so registration, * password recovery, and OTP keep the layout's stock auth styling. Everything * below either targets .auth-page--workspace-login or a class that only the * login screen renders. */ /* The shared auth layout paints a violet gradient on ; the workspace login sits on a flat light-blue page instead. Safe to state unscoped because this file is only ever linked from the login route. */ html { background: #edf5fa; } .auth-page--workspace-login { /* Surfaces */ --navy-950: #031630; --navy-900: #041d3d; --navy-800: #07325d; --page-bg: #edf5fa; --surface: #ffffff; /* Accents */ --brand-blue: #168bff; --brand-blue-deep: #0877f9; --brand-cyan: #08bdf2; --success: #20c997; /* Ink + lines */ --text-primary: #071d3b; --text-secondary: #667a96; --border: #d8e3ef; --danger: #d64550; /* Rhythm — 8px system */ --radius-shell: 26px; --radius-md: 12px; --radius-sm: 10px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --login-font: 'DM Sans', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; display: flex; min-height: 100vh; padding: 20px; overflow-x: hidden; background: var(--page-bg); color: var(--text-primary); font-family: var(--login-font); font-feature-settings: 'cv11', 'ss01'; } /* The layout's dotted overlay would sit on top of the shell. */ .auth-page--workspace-login::before, .auth-page--workspace-login .floating-shapes { display: none; } /* The design system sets font-family on bare element selectors (h1, input, button, ...), and a direct match always beats a family inherited from an ancestor — so the family has to be restated per element. is left out deliberately: those carry the icon font. */ .auth-page--workspace-login h1, .auth-page--workspace-login h2, .auth-page--workspace-login p, .auth-page--workspace-login span, .auth-page--workspace-login strong, .auth-page--workspace-login small, .auth-page--workspace-login label, .auth-page--workspace-login a, .auth-page--workspace-login li, .auth-page--workspace-login div, .auth-page--workspace-login summary, .auth-page--workspace-login input, .auth-page--workspace-login button { font-family: var(--login-font); } .auth-page--workspace-login .auth-branding, .auth-page--workspace-login .auth-form-panel { min-width: 0; /* flex items default to min-width:auto and would refuse to shrink */ min-height: calc(100vh - 40px); } /* ============================================================ LEFT — marketing panel ============================================================ */ .auth-page--workspace-login .auth-branding { flex: 0 0 55%; max-width: 55%; position: relative; justify-content: center; overflow: hidden; padding: clamp(36px, 3.6vw, 60px); border-radius: var(--radius-shell) 0 0 var(--radius-shell); background: radial-gradient(120% 80% at 88% 6%, rgba(8, 189, 242, 0.16), transparent 62%), radial-gradient(90% 70% at 4% 96%, rgba(22, 139, 255, 0.14), transparent 60%), linear-gradient(155deg, #031a38 0%, #052b58 52%, #031630 100%); box-shadow: 0 24px 60px -28px rgba(4, 29, 61, 0.45); backdrop-filter: none; } /* Concentric technical rings + a faint dot field. */ .auth-page--workspace-login .auth-branding::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: radial-gradient(rgba(160, 214, 255, 0.16) 1px, transparent 1px); background-size: 34px 34px; opacity: 0.5; box-shadow: none; pointer-events: none; } /* Large curved sweep bleeding off the bottom-right corner. */ .auth-page--workspace-login .auth-branding::after { content: ''; position: absolute; right: -22%; bottom: -34%; width: 640px; height: 640px; border: 1px solid rgba(146, 205, 255, 0.09); border-radius: 50%; box-shadow: 0 0 0 74px rgba(146, 205, 255, 0.028), 0 0 0 148px rgba(146, 205, 255, 0.02), 0 0 0 222px rgba(146, 205, 255, 0.014); pointer-events: none; } .auth-page--workspace-login .branding-content { position: relative; z-index: 2; width: 100%; max-width: 720px; margin: 0; } .workspace-login-brand { position: relative; z-index: 2; display: flex; min-height: min(760px, calc(100vh - 120px)); flex-direction: column; } .workspace-login-logo { display: inline-flex; width: fit-content; align-items: center; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .workspace-login-logo img { display: block; width: 186px; height: 58px; object-fit: contain; object-position: left center; } /* --- Status badge --- */ .wsl-badge { display: inline-flex; align-items: center; gap: 9px; width: fit-content; margin-top: clamp(28px, 4.2vh, 48px); padding: 8px 16px; border: 1px solid rgba(150, 208, 255, 0.22); border-radius: 999px; background: rgba(11, 46, 88, 0.5); color: #cfe6fb; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .wsl-badge i { font-size: 7px; color: var(--success); filter: drop-shadow(0 0 6px rgba(32, 201, 151, 0.85)); } /* --- Headline + copy --- */ .workspace-login-message { margin-top: 26px; } .workspace-login-message h1 { max-width: 14ch; margin: 0; color: #ffffff; font-size: clamp(34px, 3.35vw, 54px); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; } .wsl-accent { background: linear-gradient(96deg, #35a6ff 0%, #08bdf2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--brand-cyan); } .workspace-login-message p { max-width: 46ch; margin: 20px 0 0; color: rgba(203, 222, 240, 0.85); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.65; } /* --- Capability cards --- */ .workspace-login-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 520px; margin-top: clamp(28px, 4vh, 44px); } .workspace-login-capability, .workspace-login-security { display: flex; min-width: 0; align-items: center; gap: 14px; padding: 15px 16px; border: 1px solid rgba(160, 210, 255, 0.14); border-radius: 14px; background: rgba(255, 255, 255, 0.04); transition: border-color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease); } .workspace-login-capability:hover, .workspace-login-security:hover { border-color: rgba(160, 210, 255, 0.28); background: rgba(255, 255, 255, 0.07); transform: translateY(-2px); } .workspace-login-capability > span, .workspace-login-security > span { display: inline-flex; flex: 0 0 36px; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid rgba(53, 166, 255, 0.22); border-radius: 10px; background: rgba(22, 139, 255, 0.16); color: #6cc9ff; font-size: 14px; } .workspace-login-security > span { border-color: rgba(32, 201, 151, 0.24); background: rgba(32, 201, 151, 0.14); color: #4fdcb2; } .workspace-login-capability p, .workspace-login-security p { min-width: 0; margin: 0; } .workspace-login-capability strong, .workspace-login-capability small, .workspace-login-security strong, .workspace-login-security small { display: block; } .workspace-login-capability strong, .workspace-login-security strong { color: #ffffff; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; } .workspace-login-capability small, .workspace-login-security small { margin-top: 3px; color: rgba(196, 216, 236, 0.72); font-size: 11.5px; line-height: 1.45; } /* Wider card sitting under the 2x2 grid. */ .workspace-login-security { max-width: 520px; margin-top: 12px; padding-top: 15px; border-top: 1px solid rgba(160, 210, 255, 0.14); } /* --- Trust line pinned to the bottom --- */ .wsl-trust { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: clamp(24px, 4vh, 44px); color: rgba(190, 212, 234, 0.72); font-size: 12px; font-weight: 500; } .wsl-trust i { color: rgba(79, 220, 178, 0.85); font-size: 13px; } /* --- Holographic dashboard visual --- */ .wsl-visual { position: absolute; top: 12%; right: 1%; z-index: 1; width: min(470px, 44%); pointer-events: none; user-select: none; } .wsl-visual svg { display: block; width: 100%; height: auto; } .wsl-dash-float { animation: wslFloat 9s ease-in-out infinite; transform-origin: 280px 300px; } @keyframes wslFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* --- Mascot --- */ .wsl-mascot { position: absolute; right: clamp(24px, 2vw, 40px); bottom: clamp(10px, 1.6vh, 26px); z-index: 3; width: clamp(160px, 12vw, 212px); pointer-events: none; user-select: none; animation: wslMascotFloat 7s ease-in-out infinite; } /* Light pooled under the feet so it stands on the panel rather than floating over it. */ .wsl-mascot::after { content: ''; position: absolute; right: 10%; bottom: 1%; left: 10%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(74, 186, 255, 0.55), transparent 76%); } .wsl-mascot img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 26px rgba(2, 16, 36, 0.55)); } @keyframes wslMascotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ============================================================ RIGHT — login panel ============================================================ */ .auth-page--workspace-login .auth-form-panel { flex: 0 0 45%; max-width: 45%; justify-content: center; padding: clamp(56px, 6vw, 88px) clamp(32px, 4.4vw, 72px) 40px; border: 1px solid rgba(216, 227, 239, 0.9); border-left: 0; border-radius: 0 var(--radius-shell) var(--radius-shell) 0; /* Almost-pure white with a barely-there dot grid. */ background-color: var(--surface); background-image: radial-gradient(rgba(7, 29, 59, 0.045) 1px, transparent 1px); background-size: 22px 22px; box-shadow: 0 24px 60px -28px rgba(4, 29, 61, 0.28); backdrop-filter: none; } /* --- Language selector / header links --- */ .auth-page--workspace-login .auth-header-links { top: 24px; right: 26px; z-index: 8; gap: 10px; } .auth-page--workspace-login .auth-header-links > .auth-link { display: inline-flex; min-height: 40px; align-items: center; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: #4d6079; font-size: 12.5px; box-shadow: 0 1px 2px rgba(7, 29, 59, 0.05); } .wsl-lang { position: relative; margin: 0 !important; } .wsl-lang__toggle { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; padding: 0 12px 0 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: #4a5f7c !important; font-size: 13px; font-weight: 500; cursor: pointer; list-style: none; box-shadow: 0 1px 2px rgba(7, 29, 59, 0.05); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); } .wsl-lang__toggle::-webkit-details-marker { display: none; } .wsl-lang__toggle:hover { border-color: #bcd0e4; box-shadow: 0 2px 6px rgba(7, 29, 59, 0.08); } .wsl-lang__globe { color: var(--text-secondary); font-size: 13px; } .wsl-lang__caret { margin-left: 2px; color: #9aacc2; font-size: 10px; transition: transform 180ms var(--ease); } .wsl-lang[open] .wsl-lang__caret { transform: rotate(180deg); } .wsl-lang__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 190px; max-height: min(360px, 60vh); margin: 0; padding: 6px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); list-style: none; box-shadow: 0 18px 40px -12px rgba(7, 29, 59, 0.22); } .wsl-lang__menu li a { display: block; padding: 8px 10px; border-radius: 8px; color: #43566f; font-size: 13px; text-decoration: none; cursor: pointer; transition: background 140ms var(--ease), color 140ms var(--ease); } .wsl-lang__menu li a:hover, .wsl-lang__menu li a:focus-visible { background: #f1f7fc; color: var(--brand-blue-deep); } /* --- Card shell --- */ .auth-page--workspace-login .auth-card { width: 100%; max-width: 500px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; backdrop-filter: none; } .auth-page--workspace-login .auth-card-logo { align-items: flex-start; gap: 6px; margin-bottom: 30px; } .auth-page--workspace-login .auth-card-logo a { display: inline-flex; } .auth-page--workspace-login .auth-card-logo img { width: 170px; height: 54px; max-width: 100%; object-fit: contain; object-position: left center; } .auth-page--workspace-login .auth-card-version { margin-left: 2px; color: #6d8098; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: none; } .auth-page--workspace-login .auth-card-header { margin-bottom: 26px; text-align: left; } .login-workspace-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; color: var(--brand-blue); font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .login-workspace-eyebrow i { font-size: 12px; } .auth-page--workspace-login .auth-card-title { margin: 0; background: none; color: var(--text-primary); font-size: clamp(32px, 2.9vw, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; -webkit-text-fill-color: currentColor; } .auth-page--workspace-login .auth-card-subtitle { margin: 10px 0 0; color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; } /* --- Alerts --- */ .login-workspace-alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 13px 15px; border: 1px solid #a7e4c9; border-radius: var(--radius-md); background: #ecfdf5; color: #0a7a58; font-size: 13px; line-height: 1.5; } .login-workspace-alert i { margin-top: 2px; flex: 0 0 auto; } .login-workspace-alert--error { border-color: #f3c3c7; background: #fdf2f3; color: #b53641; } /* --- Form --- */ .auth-page--workspace-login .auth-form { gap: 18px; } .auth-page--workspace-login .d-label { margin: 0 0 8px; color: #26405f; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; } .login-workspace-field-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; } .auth-page--workspace-login .auth-link { color: var(--brand-blue-deep); font-size: 13px; font-weight: 600; transition: color 160ms var(--ease); } .auth-page--workspace-login .auth-link:hover { color: #0563d4; text-decoration: none; } .auth-page--workspace-login .d-input-icon { left: 16px; color: #93a6bd; font-size: 14px; transition: color 160ms var(--ease); } .auth-page--workspace-login .d-input-wrapper:focus-within .d-input-icon { color: var(--brand-blue); } .auth-page--workspace-login .d-input { min-height: 52px; padding: 13px 48px 13px 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #f7fafd; color: var(--text-primary); font-family: var(--login-font); font-size: 14.5px; box-shadow: none; backdrop-filter: none; transition: border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease); } .auth-page--workspace-login .d-input::placeholder { color: #8494ab; } .auth-page--workspace-login .d-input:hover { border-color: #c2d3e5; background: var(--surface); } .auth-page--workspace-login .d-input:focus { border-color: var(--brand-blue); background: var(--surface); box-shadow: 0 0 0 3px rgba(22, 139, 255, 0.14); transform: none; } .auth-page--workspace-login .d-input-error, .auth-page--workspace-login .d-input-error:hover { border-color: #e2919a; background: #fefafa; } .auth-page--workspace-login .d-input-error:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(214, 69, 80, 0.13); } .auth-page--workspace-login .d-input-error-text { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; color: #b53641; font-size: 12px; font-weight: 500; } .auth-page--workspace-login .password-toggle { right: 8px; width: 36px; height: 36px; padding: 0; border-radius: 8px; color: #8397ae; transition: background 160ms var(--ease), color 160ms var(--ease); } .auth-page--workspace-login .password-toggle:hover { background: #eef5fb; color: var(--brand-blue-deep); } .auth-page--workspace-login .password-toggle:focus-visible, .auth-page--workspace-login a:focus-visible, .auth-page--workspace-login button:focus-visible, .auth-page--workspace-login summary:focus-visible, .auth-page--workspace-login input[type='checkbox']:focus-visible { outline: 3px solid rgba(22, 139, 255, 0.28); outline-offset: 2px; } /* --- Remember me --- */ .auth-page--workspace-login .auth-form-row { margin: -2px 0 0; } .auth-page--workspace-login .auth-checkbox { align-items: center; gap: 10px; color: #4a5f7c; font-size: 13.5px; font-weight: 500; } .auth-page--workspace-login .auth-checkbox input[type='checkbox'] { display: inline-grid; flex: 0 0 19px; width: 19px; height: 19px; place-content: center; margin: 0; border: 1.5px solid #c3d4e6; border-radius: 6px; background: var(--surface); -webkit-appearance: none; appearance: none; transition: background 150ms var(--ease), border-color 150ms var(--ease); } .auth-page--workspace-login .auth-checkbox input[type='checkbox']:hover { border-color: #9dbbd8; } .auth-page--workspace-login .auth-checkbox input[type='checkbox']:checked { border-color: var(--brand-blue-deep); background: linear-gradient(135deg, var(--brand-blue-deep), #2994ff); } .auth-page--workspace-login .auth-checkbox input[type='checkbox']:checked::after { content: ''; width: 9px; height: 5px; margin-top: -2px; border-bottom: 2px solid #ffffff; border-left: 2px solid #ffffff; transform: rotate(-45deg); } /* --- Primary CTA --- */ .auth-page--workspace-login .d-btn-primary { position: relative; min-height: 56px; justify-content: flex-start; gap: 12px; padding: 8px 52px 8px 8px; border: 0; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--brand-blue-deep) 0%, #2994ff 100%); color: #ffffff; font-family: var(--login-font); font-size: 15px; font-weight: 700; letter-spacing: -0.005em; box-shadow: 0 10px 24px -8px rgba(8, 119, 249, 0.55); transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), filter 180ms var(--ease); } .auth-page--workspace-login .d-btn-primary:hover:not(:disabled) { filter: saturate(1.06); box-shadow: 0 14px 30px -8px rgba(8, 119, 249, 0.62); transform: translateY(-2px); } .auth-page--workspace-login .d-btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 6px 16px -8px rgba(8, 119, 249, 0.55); } .auth-page--workspace-login .d-btn-primary:disabled { opacity: 1; transform: none; filter: none; background: linear-gradient(90deg, #7fb6f7 0%, #9cc9ff 100%); box-shadow: none; cursor: not-allowed; } .login-workspace-button-icon { display: inline-flex; flex: 0 0 40px; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.18); font-size: 14px; } .login-workspace-button-arrow { position: absolute; right: 20px; transition: transform 180ms var(--ease); } .auth-page--workspace-login .d-btn-primary:hover:not(:disabled) .login-workspace-button-arrow { transform: translateX(3px); } /* Loading state — centred spinner + label. */ .auth-page--workspace-login .d-btn-primary.is-loading { justify-content: center; gap: 10px; padding: 8px 20px; } /* --- Assurance line --- */ .login-workspace-assurance { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; color: #61748d; font-size: 12px; } .login-workspace-assurance i { color: var(--success); font-size: 11px; } /* --- "or" divider --- */ .login-workspace-divider { display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; color: #6d8098; font-size: 12px; font-weight: 500; } .login-workspace-divider::before, .login-workspace-divider::after { content: ''; flex: 1; height: 1px; background: #e4ecf4; } /* --- Register box --- */ .auth-page--workspace-login .auth-footer { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 0; padding: 15px; border: 1px solid #e3ebf3; border-radius: var(--radius-md); background: #f8fbfd; color: var(--text-secondary); font-size: 13.5px; transition: border-color 160ms var(--ease), background 160ms var(--ease); } .auth-page--workspace-login .auth-footer:hover { border-color: #cfe0f0; background: #f3f9fd; } .auth-page--workspace-login .auth-footer a { color: var(--brand-blue-deep); font-weight: 600; } /* --- Footer --- */ .auth-page--workspace-login .auth-card-footer { margin-top: 28px; padding-top: 18px; border-top: 1px solid #eaf0f6; color: #6d8098; font-size: 11.5px; } .auth-page--workspace-login .auth-footer-link { color: #61748d; } /* --- Demo shortcuts (demo env only) --- */ .auth-page--workspace-login .demo-section { margin-top: 24px; padding: 18px; border-color: #e3ebf3; border-radius: var(--radius-md); background: #f8fbfd; backdrop-filter: none; } .auth-page--workspace-login .demo-btn { border-radius: var(--radius-sm); } /* ============================================================ RESPONSIVE ============================================================ */ /* Mid-desktop — the panel is narrower here, so the cards give ground to keep the mascot clear of them rather than the mascot disappearing. */ @media (min-width: 1200px) and (max-width: 1439px) { .workspace-login-capabilities, .workspace-login-security { max-width: 424px; } .wsl-mascot { right: 22px; width: 150px; } } /* Tablet — trim the marketing panel and simplify the visual. The shared auth layout hides .auth-branding below 1024px, so the panel has to be re-shown explicitly for the 768–1199 band. */ @media (min-width: 768px) and (max-width: 1199px) { .auth-page--workspace-login { padding: 16px; } .auth-page--workspace-login .auth-branding, .auth-page--workspace-login .auth-form-panel { min-height: calc(100vh - 32px); } .auth-page--workspace-login .auth-branding { display: flex; flex: 0 0 42%; max-width: 42%; padding: 36px 30px; } .auth-page--workspace-login .auth-form-panel { flex: 0 0 58%; max-width: 58%; padding: 72px 40px 36px; } .workspace-login-logo img { width: 158px; height: 50px; } .workspace-login-message h1 { max-width: none; font-size: 34px; } .workspace-login-message p { font-size: 14px; } .workspace-login-capabilities { grid-template-columns: minmax(0, 1fr); gap: 10px; } /* Only the two strongest capabilities survive the narrower column. */ .workspace-login-capability:nth-child(n + 3) { display: none; } /* Simplified: pushed low and dimmed so it reads as ambient texture. */ .wsl-visual { top: auto; right: -24%; bottom: -12%; width: 92%; opacity: 0.3; } .wsl-trust { display: none; } /* The single-column cards use the full panel width here — no room left. */ .wsl-mascot { display: none; } } /* Mobile — single column, marketing panel removed. */ @media (max-width: 767px) { .auth-page--workspace-login { display: block; min-height: 100vh; padding: 0; background: var(--surface); } .auth-page--workspace-login .auth-branding { display: none; } .auth-page--workspace-login .auth-form-panel { display: flex; width: 100%; max-width: 100%; min-width: 0; min-height: 100vh; justify-content: flex-start; padding: 96px 22px 32px; border: 0; border-radius: 0; box-shadow: none; background-image: none; } /* The shared layout drops this back into flow below 480px; keep it pinned so it never collides with the wordmark. */ .auth-page--workspace-login .auth-header-links { position: absolute; top: 18px; right: 20px; left: auto; flex-wrap: wrap; justify-content: flex-end; margin: 0; } .auth-page--workspace-login .auth-card { max-width: 100%; } .auth-page--workspace-login .auth-card-logo { margin-bottom: 24px; } .auth-page--workspace-login .auth-card-logo img { width: 152px; height: 48px; } .auth-page--workspace-login .auth-card-header { margin-bottom: 24px; } .auth-page--workspace-login .auth-card-title { font-size: 32px; } .auth-page--workspace-login .auth-card-subtitle { font-size: 14px; } } @media (max-width: 380px) { .login-workspace-field-heading { align-items: flex-start; flex-direction: column; gap: 0; } .login-workspace-field-heading .auth-link { margin: -3px 0 8px; } .auth-page--workspace-login .auth-footer { flex-direction: column; gap: 2px; } } @media (prefers-reduced-motion: reduce) { .auth-page--workspace-login *, .auth-page--workspace-login *::before, .auth-page--workspace-login *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }