/* Auth surfaces: login, forgot-password, and password reset. */ .auth-root { --auth-bg: #f7e8d7; --auth-bg-deep: #e9dccb; --auth-bg-soft: rgba(146, 183, 194, 0.24); --auth-bg-warm: rgba(78, 107, 63, 0.12); --auth-grid-line: rgba(117, 105, 95, 0.11); --auth-grid-accent: rgba(146, 183, 194, 0.13); --auth-surface: #fff7ea; --auth-surface-raised: #fffaf3; --auth-border: rgba(187, 169, 152, 0.52); --auth-text: #241f1a; --auth-muted: #6f6252; --auth-shadow: 0 28px 80px rgba(117, 105, 95, 0.3); --auth-control-radius-g3: 14px; position: relative; overflow: hidden; min-height: 100vh; background: linear-gradient(135deg, rgba(251, 239, 224, 0.98), rgba(233, 220, 203, 0.92)), linear-gradient(115deg, var(--auth-bg-soft) 0%, rgba(146, 183, 194, 0) 32%, var(--auth-bg-warm) 70%, rgba(78, 107, 63, 0) 100%), var(--auth-bg); background-size: 150% 150%, 220% 220%, auto; background-position: 0% 48%, 100% 0%, center; color: var(--auth-text); animation: auth-gradient-drift 24s ease-in-out infinite alternate; } .auth-root::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--auth-grid-line) 1px, transparent 1px), linear-gradient(0deg, var(--auth-grid-line) 1px, transparent 1px), linear-gradient(135deg, transparent 0 42%, var(--auth-grid-accent) 42% 46%, transparent 46% 100%); background-size: 68px 68px, 68px 68px, 280px 280px; background-position: 0 0, 0 0, 50% 50%; opacity: 0.32; animation: auth-backdrop-drift 42s linear infinite; } /* Full-bleed background video for the auth surfaces. */ .auth-bg-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* Two themed clips are stacked and cross-faded on theme change, so the light/dark swap glides instead of cutting. */ .auth-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 0.7s ease; } /* Default (no .dark-theme on ) = LIGHT MODE: show the light clip, blurred; hide the dark clip. */ .auth-bg-video-light { opacity: 1; filter: blur(8px); } .auth-bg-video-dark { opacity: 0; } /* DARK MODE (.dark-theme): swap which clip is visible. */ .dark-theme .auth-bg-video-light { opacity: 0; } .dark-theme .auth-bg-video-dark { opacity: 1; } /* Scrim = the veil over the video. It has two layers: - base element -> LIGHT MODE tint (always painted) - ::after -> DARK MODE wash (faded in only under .dark-theme) LIGHT MODE: a soft warm tint only. The opaque card carries legibility, so this just warms the footage instead of veiling it. */ .auth-bg-scrim { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(251, 239, 224, 0.26), rgba(233, 220, 203, 0.2)), linear-gradient(115deg, var(--auth-bg-soft) 0%, rgba(146, 183, 194, 0) 50%, var(--auth-bg-warm) 100%); } /* DARK MODE: a heavier dark wash, layered on top of the light tint and cross-faded in step with the video (opacity 0 -> 1 under .dark-theme). */ .auth-bg-scrim::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; background: linear-gradient(135deg, rgba(36, 31, 26, 0.72), rgba(31, 36, 32, 0.66)), linear-gradient(115deg, var(--auth-bg-soft) 0%, rgba(146, 183, 194, 0) 40%, var(--auth-bg-warm) 100%); } .dark-theme .auth-bg-scrim::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .auth-bg-video { display: none; } .auth-bg-scrim::after { transition: none; } } /* ===================================================================== Branded light/dark toggle — a glossy sliding pill on the auth surface. The .auth-theme-toggle-dark / -light state classes are applied by the global theme callback in index.py; the click handler that flips theme-store lives in pages/shared/login.py. ===================================================================== */ .auth-theme-toggle { --auth-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 1.6v2.4'/%3E%3Cpath d='M12 20v2.4'/%3E%3Cpath d='M4.5 4.5l1.7 1.7'/%3E%3Cpath d='M17.8 17.8l1.7 1.7'/%3E%3Cpath d='M1.6 12h2.4'/%3E%3Cpath d='M20 12h2.4'/%3E%3Cpath d='M6.2 17.8l-1.7 1.7'/%3E%3Cpath d='M19.5 4.5l-1.7 1.7'/%3E%3C/svg%3E"); --auth-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E"); position: fixed; top: clamp(1rem, 2.8vw, 1.7rem); right: clamp(1rem, 3.2vw, 2rem); z-index: 20; width: 72px; height: 38px; padding: 0; border-radius: 999px; border: 1px solid var(--auth-border, rgba(187, 169, 152, 0.52)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #f7ecdc, #e7d8c3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 16px rgba(117, 105, 95, 0.18); cursor: pointer; transition: background .4s ease, border-color .4s ease, box-shadow .25s ease; } .auth-theme-toggle:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 22px rgba(117, 105, 95, 0.26); } .auth-theme-toggle:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 3px rgba(146, 183, 194, 0.42); } /* Glossy sliding thumb carrying the current-mode icon. */ .auth-theme-thumb { position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #b6c98a, #8fae6a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 3px 8px rgba(60, 77, 52, 0.4); transition: transform .42s cubic-bezier(.34, 1.35, .5, 1), background .4s ease, box-shadow .4s ease; } .auth-theme-icon { position: absolute; width: 16px; height: 16px; background-color: #283420; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; transition: opacity .3s ease, transform .4s ease; } .auth-theme-icon-sun { -webkit-mask-image: var(--auth-sun); mask-image: var(--auth-sun); } .auth-theme-icon-moon { -webkit-mask-image: var(--auth-moon); mask-image: var(--auth-moon); opacity: 0; transform: rotate(-40deg) scale(0.7); } /* --- Dark state --- */ .auth-theme-toggle-dark { border-color: rgba(246, 234, 216, 0.18); background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #2c3b24, #161f13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 16px rgba(0, 0, 0, 0.4); } .auth-theme-toggle-dark:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 24px rgba(0, 0, 0, 0.5); } .auth-theme-toggle-dark .auth-theme-thumb { transform: translateX(34px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #fff7ea, #ecdcc6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 10px rgba(0, 0, 0, 0.5); } .auth-theme-toggle-dark .auth-theme-icon { background-color: #2a2018; } .auth-theme-toggle-dark .auth-theme-icon-sun { opacity: 0; transform: rotate(40deg) scale(0.7); } .auth-theme-toggle-dark .auth-theme-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } @media (prefers-reduced-motion: reduce) { .auth-theme-thumb, .auth-theme-icon { transition: none; } } @media (max-width: 860px) { .auth-theme-toggle { top: 0.75rem; right: 0.75rem; } } #main-container.auth-root, #main-container .auth-root { background: linear-gradient(135deg, rgba(251, 239, 224, 0.98), rgba(233, 220, 203, 0.92)), linear-gradient(115deg, var(--auth-bg-soft) 0%, rgba(146, 183, 194, 0) 32%, var(--auth-bg-warm) 70%, rgba(78, 107, 63, 0) 100%), var(--auth-bg); background-size: 150% 150%, 220% 220%, auto; background-position: 0% 48%, 100% 0%, center; animation: auth-gradient-drift 24s ease-in-out infinite alternate; } @keyframes auth-gradient-drift { 0% { background-position: 0% 48%, 100% 0%, center; } 100% { background-position: 100% 52%, 0% 100%, center; } } @keyframes auth-backdrop-drift { 0% { background-position: 0 0, 0 0, 50% 50%; } 100% { background-position: 68px 0, 0 68px, 20% 80%; } } .auth-panel-wrap { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(1.25rem, 4vw, 3.5rem); } .auth-stage { width: min(980px, 100%); display: grid; grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1fr); overflow: hidden; border: 1px solid rgba(117, 105, 95, 0.16); border-radius: 26px; background: var(--auth-surface); box-shadow: var(--auth-shadow); } .auth-stage-reset { width: min(760px, 100%); grid-template-columns: minmax(180px, 0.64fr) minmax(340px, 1fr); } /* Light mode only: frost the footage subtly through the form side, mirroring the glass the dark stage already has. The opaque brand panel keeps the left solid; only the transparent form column reveals the blurred video. NOTE: scoped on (where the theme class lives) so it can never bleed into dark mode. */ body:not(.dark-theme) .auth-stage { background: rgba(255, 247, 234, 0.56); -webkit-backdrop-filter: blur(16px) saturate(1.08); backdrop-filter: blur(16px) saturate(1.08); } .auth-brand-panel { position: relative; min-height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: clamp(1.4rem, 3vw, 2.4rem); padding: clamp(1.9rem, 3.4vw, 2.85rem); background: radial-gradient(135% 90% at 12% -10%, rgba(146, 183, 194, 0.30), transparent 52%), radial-gradient(120% 80% at 110% 115%, rgba(78, 107, 63, 0.55), transparent 60%), linear-gradient(158deg, #3c4d34 0%, #20271d 58%, #161b13 100%); color: #f3eadc; text-align: left; overflow: hidden; } /* soft dot field behind the brand copy */ .auth-brand-panel::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(246, 234, 216, 0.10) 1px, transparent 1.4px); background-size: 22px 22px; opacity: 0.45; pointer-events: none; } .auth-brand-panel > * { position: relative; z-index: 1; width: 100%; } .auth-brand-top { display: block; } /* Product lockup: small tracked sage label under the wordmark, marking this as the operations surface. Same on both themes (the brand panel is dark green in both), so one rule covers it. */ .auth-brand-kicker { display: block; margin-top: 0.6rem; margin-left: 0.12em; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #b6c98a; } .auth-logo-cutout { position: relative; width: min(300px, 86%); aspect-ratio: 1156 / 248; isolation: isolate; } .auth-logo-fill { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url("logo.svg") center / contain no-repeat; mask: url("logo.svg") center / contain no-repeat; background: rgba(236, 216, 188, 0.62); /* One soft drop-shadow follows each glyph's own alpha, so depth reads cleanly per letter — no offset-subtract slivers bleeding across the neighbouring glyphs the way the old faux-emboss did. */ filter: drop-shadow(0 1px 2px rgba(8, 12, 7, 0.45)); z-index: 0; } @supports not ((mask: url("logo.svg") center / contain no-repeat) or (-webkit-mask: url("logo.svg") center / contain no-repeat)) { .auth-logo-cutout { background: url("logo.svg") center / contain no-repeat; filter: brightness(0) invert(0.92) sepia(0.2) saturate(0.75) opacity(0.92); } .auth-logo-fill, .auth-logo-shade, .auth-logo-glint { display: none; } } .auth-form-column { display: grid; align-content: center; gap: 0.9rem; padding: clamp(1.25rem, 3.4vw, 2.25rem); background: linear-gradient(180deg, rgba(255, 250, 243, 0.94), rgba(246, 234, 216, 0.72)), var(--auth-surface); } .auth-card { position: relative; overflow: hidden; border: 1px solid var(--auth-border); border-radius: 18px; background: var(--auth-surface-raised); box-shadow: 0 16px 36px rgba(117, 105, 95, 0.16); } .auth-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; background: var(--color-slate, #92B7C2); } .auth-card-reset::before { background: var(--color-brown, #8B7969); } .auth-card .card-body { display: grid; gap: 0.85rem; padding: clamp(1.1rem, 3vw, 1.55rem) clamp(1.1rem, 3vw, 1.55rem) clamp(1.1rem, 3vw, 1.55rem) clamp(1.35rem, 3vw, 1.85rem); } .auth-card-heading { display: grid; gap: 0.25rem; } .auth-eyebrow { color: var(--color-slate-dark, #6E868D); font-size: 0.72rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .auth-title { color: var(--auth-text); font-size: clamp(1.7rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.1; margin: 0; } .auth-subtitle { color: var(--auth-muted); font-size: 0.95rem; margin: 0; } .auth-field-stack { display: grid; gap: 0.9rem; } .auth-field.ui-field { gap: 0.4rem; position: relative; --auth-field-icon-color: #9b8e80; } .auth-field .form-label { color: #4e453b; font-size: 0.82rem; font-weight: 800; letter-spacing: 0; } .auth-field .form-control { min-height: 44px; border: 1px solid rgba(187, 169, 152, 0.7); border-radius: var(--auth-control-radius-g3); background: #fffdf8; background-clip: padding-box; color: var(--auth-text); font-size: 1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); overflow: hidden; } .auth-field .form-control::placeholder { color: #9b8e80; font-size: 0.95rem; font-weight: 400; } .auth-field .form-control:hover { border-color: rgba(110, 134, 141, 0.55); } .auth-field .form-control:focus { border-color: var(--color-slate-dark, #6E868D); box-shadow: 0 0 0 3px rgba(146, 183, 194, 0.28); } .auth-submit.btn-dd { position: relative; overflow: hidden; min-height: 46px; border-radius: var(--auth-control-radius-g3); border-width: 1px; font-weight: 800; letter-spacing: 0; } .auth-submit-secondary.btn-dd-secondary { background: rgba(96, 120, 128, 0.14); border: 1px solid rgba(79, 110, 119, 0.45); color: #3c565c; box-shadow: none; } .auth-submit-secondary.btn-dd-secondary:hover, .auth-submit-secondary.btn-dd-secondary:focus { background: rgba(96, 120, 128, 0.22); border-color: rgba(79, 110, 119, 0.65); color: #2f474d; } .auth-output { min-height: 1.15rem; margin-top: -0.25rem; } .auth-output:empty { display: none; } .auth-output .alert { border-radius: 12px; border-width: 1px; margin-bottom: 0; } .auth-secondary-action { display: flex; justify-content: center; } .auth-link-button { border: 0; border-radius: 999px; background: transparent; color: #4e6b3f; font-family: var(--font-family-base, "Inter", sans-serif); font-size: 0.95rem; font-weight: 800; padding: 0.45rem 0.8rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .auth-link-button:hover, .auth-link-button:focus-visible { background: rgba(78, 107, 63, 0.11); color: #3e5234; outline: none; } .auth-link-button:focus-visible { box-shadow: 0 0 0 3px rgba(78, 107, 63, 0.22); } .auth-reset-collapse.collapsing, .auth-reset-collapse.show { margin-top: 1rem; } .dark-theme .auth-root, .dark-theme #main-container .auth-root { --auth-bg: #241f1a; --auth-bg-deep: #1f2420; --auth-bg-soft: rgba(146, 183, 194, 0.1); --auth-bg-warm: rgba(78, 107, 63, 0.18); --auth-grid-line: rgba(246, 234, 216, 0.06); --auth-grid-accent: rgba(146, 183, 194, 0.08); --auth-surface: #25221e; --auth-surface-raised: #2d2823; --auth-border: rgba(246, 234, 216, 0.14); --auth-text: #f5ecdf; --auth-muted: #c8b9a6; --auth-shadow: 0 30px 90px rgba(8, 7, 6, 0.48); background: linear-gradient(135deg, rgba(36, 31, 26, 0.96), rgba(31, 36, 32, 0.96)), linear-gradient(115deg, var(--auth-bg-soft) 0%, rgba(146, 183, 194, 0) 32%, var(--auth-bg-warm) 70%, rgba(78, 107, 63, 0) 100%), var(--auth-bg); background-size: 150% 150%, 220% 220%, auto; background-position: 0% 48%, 100% 0%, center; color: var(--auth-text); animation: auth-gradient-drift 24s ease-in-out infinite alternate; } .dark-theme .auth-stage { border-color: rgba(246, 234, 216, 0.12); background: var(--auth-surface); box-shadow: var(--auth-shadow); } .dark-theme .auth-form-column { background: linear-gradient(180deg, rgba(53, 47, 41, 0.94), rgba(36, 31, 26, 0.94)), var(--auth-surface); } .dark-theme .auth-card { background: var(--auth-surface-raised); border-color: var(--auth-border); box-shadow: 0 16px 42px rgba(8, 7, 6, 0.36); } .dark-theme .auth-eyebrow { color: #c3dde5; } .dark-theme .auth-title { color: var(--auth-text); } .dark-theme .auth-subtitle { color: var(--auth-muted); } .dark-theme .auth-field .form-label { color: #eadfcc; } .dark-theme .auth-field .form-control { background: rgba(255, 250, 243, 0.07); border-color: rgba(246, 234, 216, 0.2); color: #fffaf3; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .dark-theme .auth-field .form-control::placeholder { color: rgba(246, 234, 216, 0.48); } .dark-theme .auth-field .form-control:hover { border-color: rgba(195, 221, 229, 0.48); } .dark-theme .auth-field .form-control:focus { border-color: #c3dde5; box-shadow: 0 0 0 3px rgba(146, 183, 194, 0.24); } .dark-theme .auth-link-button { color: #cfe6ee; } .dark-theme .auth-link-button:hover, .dark-theme .auth-link-button:focus-visible { background: rgba(146, 183, 194, 0.14); color: #fff8ed; } @keyframes auth-panel-drift { 0% { background-position: 20% 0%, 90% 40%, center; } 100% { background-position: 80% 100%, 10% 65%, center; } } @media (max-width: 860px) { .auth-panel-wrap { align-items: stretch; padding: 4.75rem 1rem 1rem; } .auth-stage, .auth-stage-reset { grid-template-columns: 1fr; border-radius: 20px; } .auth-brand-panel { min-height: auto; gap: 1.2rem; padding: 1.5rem; } .auth-logo-frame { width: min(148px, 52%); } .auth-form-column { padding: 1rem; } } @media (prefers-reduced-motion: reduce) { .auth-root *, .auth-root *::before, .auth-root *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } .auth-root, #main-container .auth-root, .auth-root::before, .auth-brand-panel { animation: none !important; } } /* =========================================== Brand-rail copy (pro-startup login redesign) The brand panel is always the dark green rail, in both themes, so this light-on-dark copy needs no dark-theme overrides. =========================================== */ .auth-brand-body { display: flex; flex-direction: column; } .auth-brand-headline { font-size: clamp(2rem, 3.4vw, 2.95rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 0.85rem; color: #f7efe1; } /* "Deliver." stays the solid bright accent (re-asserts fill over the inherited transparent text-fill from the light gradient headline). */ .auth-brand-accent { color: #b6c98a; -webkit-text-fill-color: #b6c98a; } /* Light mode ONLY: cream-to-sage gradient on the headline. Scoped on (where the theme class lives) so it cannot touch dark mode, which keeps the solid cream above. */ body:not(.dark-theme) .auth-brand-headline { background: linear-gradient(180deg, #f9f2e4 0%, #ddc88f 34%, #9bb96a 70%, #7ba74f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Dark mode gets its OWN treatment, kept low-contrast: "Design./Manufacture." step down from a soft off-white into a dimmer tone (descending emphasis), and "Deliver." is a calm muted sage with only a gentle bloom — present as the accent without shouting. Scoped to body.dark-theme so it never hits light. */ body.dark-theme .auth-brand-headline { background: linear-gradient(180deg, #d2cdc0 0%, #a39d8f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } body.dark-theme .auth-brand-accent { color: #a4b681; -webkit-text-fill-color: #a4b681; text-shadow: 0 0 14px rgba(150, 190, 120, 0.28); } .auth-brand-subline { font-size: 0.98rem; line-height: 1.5; color: rgba(243, 234, 220, 0.78); margin: 0 0 1.45rem; max-width: 34ch; } .auth-feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .auth-feature { display: flex; align-items: center; gap: 0.65rem; font-size: 0.9rem; font-weight: 600; color: rgba(243, 234, 220, 0.92); } .auth-feature-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #92b7c2; box-shadow: 0 0 0 4px rgba(146, 183, 194, 0.18); flex: 0 0 auto; } .auth-brand-footer { display: flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; font-weight: 600; color: rgba(243, 234, 220, 0.72); } .auth-status-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #7ec07a; animation: auth-status-pulse 2.4s ease-out infinite; flex: 0 0 auto; } @keyframes auth-status-pulse { 0% { box-shadow: 0 0 0 0 rgba(126, 192, 122, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(126, 192, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(126, 192, 122, 0); } } /* Keep the mobile login compact: stack the rail, drop the marketing extras */ @media (max-width: 860px) { .auth-brand-panel { justify-content: flex-start; gap: 1.1rem; } .auth-brand-headline { font-size: 1.7rem; margin-bottom: 0.5rem; } .auth-brand-subline { margin-bottom: 0; max-width: none; } .auth-feature-list, .auth-brand-footer { display: none; } } /* =========================================== Form side polish (was neglected): input icons, sharper heading, confident CTA. =========================================== */ .auth-title { font-size: clamp(1.95rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; } .auth-eyebrow { letter-spacing: 0.14em; } /* Leading icons are painted on the wrapper, not the input. Browser autofill paints over input backgrounds, so input background icons can disappear. */ .auth-field-username { --auth-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); } .auth-field-password { --auth-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); } .auth-field-email { --auth-field-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E"); } .auth-field-username::after, .auth-field-password::after, .auth-field-email::after { content: ""; position: absolute; left: 0.92rem; bottom: 13px; width: 1.1rem; height: 1.1rem; pointer-events: none; z-index: 2; background-color: var(--auth-field-icon-color); -webkit-mask: var(--auth-field-icon) center / contain no-repeat; mask: var(--auth-field-icon) center / contain no-repeat; } #login-username.form-control, #login-password.form-control, #reset-email.form-control, #reset-new-password.form-control { padding-left: 2.6rem; background-image: none !important; } /* Grounded primary CTA: deep flat slate, crisp hairline edge, a tight contact shadow (no floaty colored glow), and a pressed active state. */ .auth-submit.btn-dd-primary { background: #c46a47; border: 1px solid rgba(90, 45, 28, 0.5); color: #fff; box-shadow: 0 1px 2px rgba(74, 38, 22, 0.18); transition: background .18s ease, box-shadow .18s ease, transform .12s ease, filter .18s ease; } .auth-submit.btn-dd-primary:hover, .auth-submit.btn-dd-primary:focus { background: #b35d3c; box-shadow: 0 2px 5px rgba(74, 38, 22, 0.22); } .auth-submit.btn-dd-primary:active { background: #9e5135; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); } .auth-submit.btn-dd-primary::after { content: " \2192"; font-weight: 700; } /* Film-grain texture on the primary CTA — the same feTurbulence noise overlay from the reference, baked into a data-URI so no inline