/* ============================================= Shared styles for login-04 and signup-04 ============================================= */ /* --- Fonts --- */ @font-face { font-family: 'Geist'; src: url('../fonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist'; src: url('../fonts/Geist-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist'; src: url('../fonts/Geist-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* --- Design tokens (light mode) --- */ :root { --background: hsl(0, 0%, 100%); --foreground: hsl(240, 10%, 3.9%); --card: hsl(0, 0%, 100%); --card-foreground: hsl(240, 10%, 3.9%); --muted: hsl(240, 4.8%, 95.9%); --muted-foreground: hsl(240, 3.8%, 46.1%); --primary: hsl(240, 5.9%, 10%); --primary-foreground: hsl(0, 0%, 98%); --accent: hsl(240, 4.8%, 95.9%); --accent-foreground: hsl(240, 5.9%, 10%); --border: hsl(240, 5.9%, 90%); --input-border: hsl(240, 5.9%, 90%); --ring: hsl(240, 5.9%, 10%); --radius: 0.5rem; --radius-xl: 0.75rem; } /* --- Dark mode --- Controlled via data-theme attribute on : data-theme="dark" → always dark data-theme="light" → always light data-theme="system" → follow OS preference (no attribute) → follow OS preference */ /* System preference — only when not overridden */ @media (prefers-color-scheme: dark) { html:not([data-theme]), html[data-theme="system"] { --background: hsl(240, 10%, 3.9%); --foreground: hsl(0, 0%, 98%); --card: hsl(240, 10%, 3.9%); --card-foreground: hsl(0, 0%, 98%); --muted: hsl(240, 3.7%, 15.9%); --muted-foreground: hsl(240, 5%, 64.9%); --primary: hsl(0, 0%, 98%); --primary-foreground: hsl(240, 5.9%, 10%); --accent: hsl(240, 3.7%, 15.9%); --accent-foreground: hsl(0, 0%, 98%); --border: hsl(240, 3.7%, 15.9%); --input-border: hsl(240, 3.7%, 15.9%); --ring: hsl(240, 4.9%, 83.9%); } html:not([data-theme]) .btn-primary:hover, html[data-theme="system"] .btn-primary:hover { background-color: hsl(0, 0%, 85%); } html:not([data-theme]) input:focus-visible, html[data-theme="system"] input:focus-visible { box-shadow: 0 0 0 3px hsla(240, 4.9%, 83.9%, 0.2); } } /* Forced dark */ html[data-theme="dark"] { --background: hsl(240, 10%, 3.9%); --foreground: hsl(0, 0%, 98%); --card: hsl(240, 10%, 3.9%); --card-foreground: hsl(0, 0%, 98%); --muted: hsl(240, 3.7%, 15.9%); --muted-foreground: hsl(240, 5%, 64.9%); --primary: hsl(0, 0%, 98%); --primary-foreground: hsl(240, 5.9%, 10%); --accent: hsl(240, 3.7%, 15.9%); --accent-foreground: hsl(0, 0%, 98%); --border: hsl(240, 3.7%, 15.9%); --input-border: hsl(240, 3.7%, 15.9%); --ring: hsl(240, 4.9%, 83.9%); } html[data-theme="dark"] .btn-primary:hover { background-color: hsl(0, 0%, 85%); } html[data-theme="dark"] input:focus-visible { box-shadow: 0 0 0 3px hsla(240, 4.9%, 83.9%, 0.2); } /* --- Base --- */ html, body { height: 100%; } body { font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.5; color: var(--foreground); background-color: var(--background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --- Page wrapper --- */ .page { display: flex; min-height: 100svh; flex-direction: column; align-items: center; justify-content: center; background-color: var(--muted); padding: 1.5rem; gap: 1.5rem; } @media (min-width: 768px) { .page { padding: 2.5rem; } } /* --- Card container --- */ .card-wrap { width: 100%; max-width: 24rem; } @media (min-width: 768px) { .card-wrap { max-width: 56rem; } } /* --- Card --- */ .card { border-radius: var(--radius-xl); border: 1px solid var(--border); background-color: var(--card); color: var(--card-foreground); box-shadow: 0 1px 3px 0 rgba(0,0,0,0.07), 0 1px 2px -1px rgba(0,0,0,0.07); overflow: hidden; } .card-inner { display: grid; padding: 0; } @media (min-width: 768px) { .card-inner { grid-template-columns: 1fr 1fr; } } /* --- Form section --- */ .form-section { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; } @media (min-width: 768px) { .form-section { padding: 2rem; } } /* --- Form header --- */ .form-header { display: flex; flex-direction: column; gap: 0.375rem; text-align: center; } .form-header h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; } .form-header p { font-size: 0.875rem; color: var(--muted-foreground); } /* --- Form body --- */ .form-body { display: flex; flex-direction: column; gap: 1.5rem; } .fields { display: flex; flex-direction: column; gap: 1.5rem; } .field { display: flex; flex-direction: column; gap: 0.375rem; } .field-label-row { display: flex; justify-content: space-between; align-items: baseline; } .field-hint { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.25rem; } /* --- Labels --- */ label { font-size: 0.875rem; font-weight: 500; line-height: 1.35; color: var(--foreground); user-select: none; } /* --- Inputs --- */ input[type="email"], input[type="password"], input[type="text"] { height: 2.25rem; width: 100%; min-width: 0; border-radius: var(--radius); border: 1px solid var(--input-border); background: transparent; padding: 0.25rem 0.75rem; font-size: 0.875rem; font-family: inherit; color: var(--foreground); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04); } input::placeholder { color: var(--muted-foreground); } input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px hsla(240, 5.9%, 10%, 0.18); } /* --- Buttons --- */ button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; font-family: inherit; white-space: nowrap; height: 2.25rem; padding: 0.5rem 1rem; outline: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; border: none; flex-shrink: 0; } button svg { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; } .htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; margin-left: 0.4em; } .btn-primary { background-color: var(--primary); color: var(--primary-foreground); width: 100%; } .btn-primary:hover { background-color: hsl(240, 5.9%, 20%); } .btn-outline { border: 1px solid var(--border); background-color: var(--background); color: var(--foreground); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04); padding: 0.5rem 0.75rem; } .btn-outline:hover { background-color: var(--accent); color: var(--accent-foreground); } /* --- OR separator --- */ .separator { position: relative; display: flex; align-items: center; } .separator::before, .separator::after { content: ''; flex: 1; height: 1px; background-color: var(--border); } .separator span { font-size: 0.875rem; color: var(--muted-foreground); background-color: var(--card); padding: 0 0.5rem; } /* --- Social buttons grid --- */ .social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .social-grid button { width: 100%; } /* --- Links --- */ a { color: inherit; text-decoration: underline; text-underline-offset: 4px; } a:hover { color: var(--muted-foreground); } .link-subtle { font-size: 0.875rem; } .text-center { text-align: center; font-size: 0.875rem; } /* --- Image panel --- */ .image-panel { display: none; position: relative; background-color: var(--muted); min-height: 300px; } @media (min-width: 768px) { .image-panel { display: block; } } .image-panel img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; } /* --- Page footer --- */ .page-footer { text-align: center; font-size: 0.6875rem; color: var(--muted-foreground); line-height: 1.5; } .page-footer a { text-underline-offset: 4px; } .page-footer a:hover { color: var(--muted-foreground); } /* --- Auth error banner --- */ .auth-error { font-size: 0.875rem; color: hsl(0, 72%, 51%); background-color: hsl(0, 72%, 51%, 0.08); border: 1px solid hsl(0, 72%, 51%, 0.25); border-radius: var(--radius); padding: 0.5rem 0.75rem; } /* --- OTP input grid --- */ .otp-grid { display: flex; gap: 0.5rem; justify-content: center; } .otp-grid input { width: 3rem; height: 3.5rem; text-align: center; font-size: 1.25rem; font-weight: 500; border-radius: var(--radius); border: 1px solid var(--input-border); background: transparent; color: var(--foreground); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04); padding: 0; /* override the general input width */ min-width: 0; } .otp-grid input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px hsla(240, 5.9%, 10%, 0.18); } @media (prefers-color-scheme: dark) { html:not([data-theme]) .otp-grid input:focus-visible, html[data-theme="system"] .otp-grid input:focus-visible { box-shadow: 0 0 0 3px hsla(240, 4.9%, 83.9%, 0.2); } } html[data-theme="dark"] .otp-grid input:focus-visible { box-shadow: 0 0 0 3px hsla(240, 4.9%, 83.9%, 0.2); } /* --- Back link --- */ .back-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground); text-decoration: none; align-self: flex-start; } .back-link:hover { color: var(--foreground); } .back-link svg { width: 1rem; height: 1rem; flex-shrink: 0; } /* --- Accessibility --- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }