/* assets/css/login.css — mobile-first, fully responsive (light + optional dark) */ :root { /* Brand */ --primary: #6366f1; --primary-600: #4f46e5; /* Light theme */ --bg: #f8fafc; --card: #ffffff; --text: #0f172a; --muted: #64748b; --line: #e2e8f0; /* Accents */ --error: #ef4444; --success: #10b981; /* Layout + effects */ --radius: 16px; --shadow: 0 10px 30px rgba(2, 6, 23, .06); --focus-ring: 0 0 0 4px rgba(79, 70, 229, .15); /* Type scale */ --fs-100: .85rem; --fs-200: .95rem; --fs-300: 1rem; --fs-400: 1.125rem; --fs-500: 1.35rem; --fs-600: 1.6rem; /* Spacing */ --space-1: .5rem; --space-2: .75rem; --space-3: 1rem; --space-4: 1.25rem; --space-5: 1.75rem; /* Viewport unit fix */ --vh: 1vh; } /* Use modern 100dvh when supported */ @supports (height: 100dvh) { :root { --vh: 1dvh; } } /* Optional dark mode (if is used) */ .dark-mode { --bg: #0f172a; --card: #1e293b; --text: #f1f5f9; --muted: #94a3b8; --line: #334155; --shadow: 0 10px 30px rgba(0, 0, 0, .25); } /* Base reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { height: 100%; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif; color: var(--text); background: radial-gradient(900px 500px at 85% -10%, rgba(99, 102, 241, .08), transparent 55%), radial-gradient(700px 400px at 10% 110%, rgba(139, 92, 246, .08), transparent 55%), var(--bg); min-height: calc(var(--vh) * 100); line-height: 1.5; color-scheme: light dark; } /* Prefer reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* Focus visibility */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ===== Layout ===== */ .auth-wrap { min-height: calc(var(--vh) * 100); display: grid; place-items: center; padding: clamp(16px, 4vw, 28px); /* respect iOS safe areas */ padding-bottom: calc(clamp(16px, 4vw, 28px) + env(safe-area-inset-bottom)); } .auth-card { /* keep card inside the padded wrapper on all screens */ width: min(560px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 5vw, 32px) clamp(18px, 4.5vw, 28px); box-shadow: var(--shadow); } /* Tighten card at very small widths */ @media (max-width:360px) { .auth-card { width: min(560px, 100%); padding: 16px 14px; border-radius: 12px; } } /* ===== Brand & Headings ===== */ .brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: .25rem; } .brand i { font-size: 1.2rem; } .title { font-size: var(--fs-600); font-weight: 800; margin: .1rem 0 .35rem; } .subtitle { margin: 0 0 .85rem; color: var(--muted); font-size: var(--fs-200); } /* ===== Form ===== */ form { margin-top: .25rem; } .form-group { margin: 12px 0; } .form-label { display: block; margin: 0 0 .4rem; font-weight: 600; font-size: var(--fs-200); } .req { color: var(--error); } .form-control, .form-select { width: 100%; background: #fff; border: 1px solid var(--line); color: var(--text); padding: 12px 14px; border-radius: 12px; outline: none; transition: border-color .2s, box-shadow .2s, background-color .2s, transform .06s ease; font-size: 16px; /* prevent iOS zoom */ } .dark-mode .form-control, .dark-mode .form-select { background: #0b1220; border-color: var(--line); color: var(--text); } .form-control::placeholder { color: #94a3b8; } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: var(--focus-ring); background: #fff; } .dark-mode .form-control:focus, .dark-mode .form-select:focus { background: #0b1220; } .hint { font-size: .8rem; color: var(--muted); margin-top: .25rem; } /* Remove number spinners (optional) */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* Radios */ .radio-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .radio-row label { display: flex; gap: 8px; align-items: center; background: #f1f5f9; border: 1px solid var(--line); padding: 10px 12px; border-radius: 999px; cursor: pointer; font-size: var(--fs-200); } .dark-mode .radio-row label { background: #0b1220; border-color: var(--line); } .radio-row input[type="radio"] { accent-color: var(--primary); } /* Two-column grid → stacks on mobile */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width:640px) { .grid-2 { grid-template-columns: 1fr; } } /* Button */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: none; cursor: pointer; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #fff; font-weight: 700; padding: 12px 16px; border-radius: 12px; transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease; width: 100%; min-height: 48px; /* touch size */ font-size: var(--fs-300); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(99, 102, 241, .25); filter: saturate(1.05); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { opacity: .6; cursor: not-allowed; } .w-100 { width: 100%; } .mt-2 { margin-top: .75rem; } .mt-3 { margin-top: 1rem; } .small { font-size: .85rem; } /* Links */ .tos { text-align: center; } .tos a { color: var(--primary-600); text-decoration: none; } .tos a:hover { text-decoration: underline; } /* Bootstrap alert soft roundness */ .alert { border-radius: 12px; } /* ===== Responsiveness & polish ===== */ /* Make background gradients subtler on narrow screens */ @media (max-width:480px) { body { background: radial-gradient(600px 360px at 85% -10%, rgba(99, 102, 241, .07), transparent 55%), radial-gradient(520px 320px at 10% 110%, rgba(139, 92, 246, .07), transparent 55%), var(--bg); } .title { font-size: 1.45rem; } .subtitle { font-size: .95rem; } } /* Larger view: gently scale typography and card width */ @media (min-width:768px) { .auth-card { width: min(620px, 100%); } .title { font-size: 1.75rem; } } /* XL view */ @media (min-width:1200px) { .auth-card { width: min(680px, 100%); } } /* Prevent layout shift when mobile keyboard opens */ @supports (height: 100dvh) { .auth-wrap { min-height: 100dvh; } } /* Ensure country-other reveal block animates smoothly if you toggle via JS */ #countryOtherGroup { transition: height .2s ease, opacity .2s ease; } /* Improve select appearance on iOS */ select { -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%), linear-gradient(to right, transparent, transparent); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5rem) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; padding-right: 2.5rem; } /* Helper classes you already use */ ul.m-0 { margin: 0; } .ps-3 { padding-left: 1rem; } /* Input error hint (if you decide to add per-field errors later) */ .form-error { margin-top: .35rem; font-size: .8rem; color: var(--error); }