/* ============================================================ AUTH V3 — signup + login Ported from the shipday-signup-flow prototype's styles.css. Reference: docs/signup-flow-v2-design.md Self-contained on purpose: the V3 pages load ONLY this file, so the sd-avenir @font-face blocks are declared here rather than pulling in all of custom_fonts_colors.css. No Bootstrap / bootstrap-select / intl-tel-input / Handlebars / Google Fonts — the design's .btn-primary would collide with Bootstrap's, and none of them are needed. The prototype's post-signup setup-wizard styles are deliberately NOT here (/signup-info is out of scope and keeps signupUserInfo.css). ============================================================ */ /* ── Fonts (mirrors custom_fonts_colors.css) ───────────────── */ @font-face { font-family: 'sd-avenir'; src: url(../../fonts/Avenir/300-Avenir-Light-07.woff) format('woff'); font-weight: 300; } @font-face { font-family: 'sd-avenir'; src: url(../../fonts/Avenir/400-AvenirLTStd-Book.woff) format('woff'); } @font-face { font-family: 'sd-avenir'; src: url(../../fonts/Avenir/500-AvenirLTStd-Roman.otf) format('woff'); font-weight: 500; } @font-face { font-family: 'sd-avenir'; src: url(../../fonts/Avenir/600-Avenir-Medium-09.woff) format('woff'); font-weight: 600; } @font-face { font-family: 'sd-avenir'; src: url(../../fonts/Avenir/700-Avenir-Heavy-05.woff) format('woff'); font-weight: 700; } @font-face { font-family: 'sd-avenir'; src: url(../../fonts/Avenir/800-AvenirLTStd-Black.woff) format('woff'); font-weight: 800; } /* ── Design Tokens ────────────────────────────────────────── */ :root { /* Colors */ --color-primary: #008062; --color-primary-hover: #006a52; --color-primary-light: #ebfef6; /* Right-panel background. Intentionally a DIFFERENT green from --color-primary-light (which drives dropdown hover/selected states). Don't merge them. */ --color-panel-bg: #d7f5e9; --color-primary-ring: rgba(0, 128, 98, 0.1); --color-accent: #01ad85; --color-border-accent: #0abf8c; --color-text: #0a0a0a; --color-text-secondary: #404040; --color-text-muted: #525252; --color-text-placeholder: #737373; --color-text-disabled: #a3a3a3; --color-text-label: #262626; --color-border: #e3e4eb; --color-border-otp: #d4d4cf; --color-bg: #ffffff; --color-bg-disabled: #f4f4f8; --color-bg-hover: #f4f4f8; --color-danger: #dc2626; --color-danger-bg: #fef2f2; /* Typography — Avenir is self-hosted in this repo, so no Nunito / Google Fonts fallback is needed (unlike the prototype). */ --font-family: 'sd-avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Radii */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-full: 99px; /* Shadows / Rings */ --ring-primary: 0 0 0 3px var(--color-primary-ring); } /* ============================================================ RESET + BASE ============================================================ */ /* `.sd-auth-v3` itself is listed alongside its descendants on purpose: the class sits on , and a descendant-only reset leaves the UA stylesheet's default `body { margin: 8px }` in place — which shows up as an 8px white gap between the green right panel and the viewport edge. That gap reads as a bug (see the note on .right-panel below). */ .sd-auth-v3, .sd-auth-v3 *, .sd-auth-v3 *::before, .sd-auth-v3 *::after { box-sizing: border-box; margin: 0; padding: 0; } body.sd-auth-v3 { background: var(--color-bg); min-height: 100vh; font-family: var(--font-family); -webkit-font-smoothing: antialiased; } .sd-auth-v3 button, .sd-auth-v3 input { font-family: inherit; } /* ============================================================ LAYOUT ============================================================ */ .main-content { display: flex; min-height: 100vh; } .left-panel { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; background: var(--color-bg); } /* ── Header ── */ .reg-header { width: 100%; padding: 32px 40px 16px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } /* The Shipday logo ships as two SVG halves in this repo (images/signup-info/logo-part-1.svg + logo-part-2.svg). */ .reg-header-logo { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .reg-header-logo img { height: 32px; width: auto; display: block; } /* ── Footer ── */ .reg-footer { width: 100%; max-width: 700px; padding: 0 40px 24px; flex-shrink: 0; text-align: center; align-self: center; } .reg-footer-text { font-size: 14px; color: var(--color-text-secondary); line-height: 1.4; font-weight: 500; } .reg-footer-text a { color: #03624C; text-decoration: none; } .reg-footer-text a:hover { text-decoration: underline; } /* ============================================================ STEPS ============================================================ */ @keyframes stepFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .step { display: none; flex: 1; flex-direction: column; } .step.active { display: flex; animation: stepFadeIn 0.28s ease forwards; } @media (prefers-reduced-motion: reduce) { .step.active { animation: none; } } /* ============================================================ FORM AREA ============================================================ */ .form-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 40px; gap: 40px; background: var(--color-bg); } /* All direct children of form-area cap at 420px so inputs stay readable regardless of how wide the panel gets. */ .form-area > * { width: 100%; max-width: 420px; } /* Each auth step wraps its fields in a

to scope browser autofill / password-manager heuristics (every step lives in the same document). The form is then form-area's only direct child, so it has to replicate the exact flex/gap layout its contents used to get from .form-area. */ .form-area form { display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: 420px; } .form-area form > * { width: 100%; } /* Per-step gap overrides */ #step-login-password .form-area, #step-login-password .form-area form, #step-business .form-area, #step-business .form-area form, #step-location .form-area, #step-location .form-area form { gap: 48px; } .form-inner { display: flex; flex-direction: column; gap: 48px; } /* ============================================================ FORM HERO ============================================================ */ .form-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; } .form-title-b { font-size: 32px; font-weight: 800; color: var(--color-text); text-align: center; letter-spacing: -0.02em; line-height: 1.3; font-family: var(--font-family); } .form-subtitle-b { font-size: 16px; color: var(--color-text-secondary); font-weight:600; text-align: center; line-height: 1.4; max-width: 360px; } /* ── Layout helpers ── */ .form-stack-sm { display: flex; flex-direction: column; gap: 12px; width: 100%; } .form-stack-md { display: flex; flex-direction: column; gap: 24px; width: 100%; } .form-stack-lg {display: flex;flex-direction: column;gap: 16px;width: 100%;} .form-stack-sm--center { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; } .login-credentials { display: flex; flex-direction: column; gap: 24px; width: 100%; } .form-desc { font-size: 16px; color: var(--color-text-secondary); font-weight: 600; text-align: center; line-height: 1.4; margin: 0; } .forgot-link { font-size: 15px; align-self: flex-start; } .subtitle { font-size: 16px; font-weight: 600; color: var(--color-text-secondary); text-align: center; line-height: 1.4; word-break: break-word; } .subtitle strong { font-weight: 700; color: var(--color-text); } /* ============================================================ LABEL FIELD (label above input) ============================================================ */ .label-field { display: flex; flex-direction: column; gap: 8px; width: 100%; } .field-error { display: none; font-size: 13px; font-weight: 500; color: var(--color-danger); margin: -2px 0 0; } .field-error.visible { display: block; } .label-field-label { font-size: 16px; font-weight: 600; color: var(--color-text); line-height: 1.4; } .label-field-input { height: 48px; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 12px 16px; font-size: 16px; font-weight: 500; font-family: inherit; color: var(--color-text); background: var(--color-bg); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .label-field-input:focus { border-color: var(--color-primary); box-shadow: var(--ring-primary); } .label-field-input::placeholder { color: var(--color-text-placeholder); font-weight: 500; } .label-field-input.valid { border-color: var(--color-primary); } .label-field-input:disabled { background: var(--color-bg-disabled); color: var(--color-text-muted); cursor: not-allowed; } /* Shared invalid state for wrapper-based fields (phone, password) */ .label-field-input.invalid { border-color: var(--color-danger); background: var(--color-danger-bg); } /* ============================================================ GOOGLE PLACES-STYLE BUSINESS SEARCH ============================================================ */ .gplace-field { position: relative; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); padding: 0 16px 0 12px; transition: border-color 0.15s, box-shadow 0.15s; } .gplace-field.focused { border-color: var(--color-primary); box-shadow: var(--ring-primary); } .gplace-input-row { display: flex; align-items: center; gap: 12px; height: 48px; } .gplace-source { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 0 0 auto; padding-right: 12px; border-right: 1px solid var(--color-border); height: 32px; } .gplace-source-label { font-size: 10px; color: var(--color-text-muted); line-height: 1; white-space: nowrap; } .gplace-g-icon { width: 18px; height: 18px; flex: 0 0 18px; } .gplace-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 16px; color: var(--color-text); font-weight: 500; } .gplace-input::placeholder { color: var(--color-text-placeholder); } .gplace-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); z-index: 850; overflow: hidden; } .gplace-field.open .gplace-dropdown { display: block; } .gplace-result { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--color-border); transition: background 0.12s ease; } .gplace-result:hover { background: var(--color-bg-hover); } .gplace-pin { flex: 0 0 auto; color: var(--color-text-muted); margin-top: 2px; } .gplace-result-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .gplace-result-name { font-size: 15px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gplace-result-name b { font-weight: 700; } .gplace-result-address { font-size: 13px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gplace-powered { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 10px 16px; font-size: 12px; color: var(--color-text-muted); } .gplace-google-word { font-weight: 600; letter-spacing: 0.2px; } .gplace-google-word span:nth-child(1) { color: #4285F4; } .gplace-google-word span:nth-child(2) { color: #EA4335; } .gplace-google-word span:nth-child(3) { color: #FBBC05; } .gplace-google-word span:nth-child(4) { color: #4285F4; } .gplace-google-word span:nth-child(5) { color: #34A853; } .gplace-google-word span:nth-child(6) { color: #EA4335; } .gplace-linked-check { flex: 0 0 auto; color: var(--color-primary); font-size: 14px; font-weight: 600; } /* ============================================================ FORM ACTIONS ============================================================ */ .form-actions { display: flex; flex-direction: column; gap: 20px; } .form-actions-b { display: flex; flex-direction: column; gap: 16px; align-items: center; width: 100%; } .form-signin-text { font-size: 15px; color: var(--color-text-secondary); text-align: center; font-weight: 600; } .form-signin-link { color: var(--color-primary); font-weight: 700; text-decoration: none; cursor: pointer; } .form-signin-link:hover { text-decoration: underline; } /* ============================================================ OTP ============================================================ */ .otp-row { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2.5vw, 12px); width: 100%; } .otp-group { display: flex; align-items: center; gap: clamp(4px, 2vw, 8px); } .otp-box { width: clamp(38px, 11vw, 48px); height: clamp(38px, 11vw, 48px); border: 1px solid var(--color-border-otp); border-radius: var(--radius-md); background: var(--color-bg); text-align: center; font-family: inherit; font-size: clamp(16px, 4.5vw, 20px); font-weight: 600; color: var(--color-text); outline: none; transition: border-color 0.15s, box-shadow 0.15s; caret-color: var(--color-primary); } .otp-box:focus { border-color: var(--color-primary); box-shadow: var(--ring-primary); } .otp-box.complete { border-color: var(--color-primary); background: #f0fdf8; color: var(--color-primary); } .otp-box.invalid { border-color: var(--color-danger); background: var(--color-danger-bg); color: var(--color-danger); } .otp-box:disabled { background: var(--color-bg-disabled); color: var(--color-text-disabled); cursor: not-allowed; } .otp-sep { width: clamp(6px, 2vw, 10px); height: 1.5px; background: var(--color-border-otp); border-radius: 2px; flex-shrink: 0; } .otp-input-block { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; } .otp-error { display: none; font-size: 13px; font-weight: 500; color: var(--color-danger); text-align: center; margin: 0; } .otp-error.visible { display: block; } @keyframes otpShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .otp-row.shake { animation: otpShake 0.4s ease; } @media (prefers-reduced-motion: reduce) { .otp-row.shake { animation: none; } } .resend-link.disabled { color: var(--color-text-disabled); cursor: default; pointer-events: none; text-decoration: none; } .otp-sent-msg { display: none; color: var(--color-primary); font-weight: 500; } .otp-sent-msg.visible { display: inline; } /* ============================================================ BUTTONS Primary buttons start DISABLED-looking and only go green when the step's validator adds .ready. Removing [disabled] without adding .ready leaves a grey button that looks dead but is clickable. ============================================================ */ .btn-primary { width: 100%; height: 48px; background: var(--color-bg-disabled); color: var(--color-text-disabled); border: none; border-radius: var(--radius-md); font-family: inherit; font-size: 16px; font-weight: 700; cursor: not-allowed; transition: background 0.2s, color 0.2s; } .btn-primary.ready { background: var(--color-primary); color: white; cursor: pointer; } .btn-primary.ready:hover { background: var(--color-primary-hover); } .btn-primary.is-busy { cursor: progress; opacity: 0.75; } .btn-outline { width: 100%; height: 48px; background: var(--color-bg); color: var(--color-text-label); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: border-color 0.15s; } .btn-outline:hover { border-color: var(--color-primary); } /* ============================================================ HELPER TEXT ============================================================ */ .helper-text { text-align: center; line-height: 1.4; color: var(--color-text-secondary); } .helper-text.sm { font-size: 14px; } .helper-text.md { font-size: 16px; } .helper-text a { color: #027948; font-weight: 700; text-decoration: none; cursor: pointer; } .helper-text a:hover { text-decoration: underline; } /* Inline form-level error (replaces V2's bootstrap error modal) */ .auth-form-error { display: none; font-size: 14px; font-weight: 500; color: var(--color-danger); background: var(--color-danger-bg); border-radius: var(--radius-md); padding: 10px 14px; text-align: center; line-height: 1.4; } .auth-form-error.visible { display: block; } /* Slot for the page-level error, sitting between the steps and the footer so it's visible whichever step is active. */ .reg-error-slot { width: 100%; padding: 0 40px 12px; display: flex; justify-content: center; flex-shrink: 0; } .reg-error-slot .auth-form-error { width: 100%; max-width: 420px; } /* ============================================================ OR DIVIDER ============================================================ */ .or-divider { display: flex; align-items: center; gap: 24px; } .or-divider-line { flex: 1; height: 1px; background: var(--color-border); } .or-divider span { font-size: 14px; color: var(--color-text-secondary); white-space: nowrap; } /* ============================================================ PASSWORD FIELD ============================================================ */ .password-wrap { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); display: flex; align-items: center; transition: border-color 0.15s, box-shadow 0.15s; } .password-wrap:focus-within { border-color: var(--color-primary); box-shadow: var(--ring-primary); } .password-wrap.invalid { border-color: var(--color-danger); background: var(--color-danger-bg); } .password-wrap.invalid:focus-within { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); } .password-wrap input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: none; border-radius: var(--radius-lg); font-family: inherit; font-size: 16px; color: var(--color-text); background: transparent; outline: none; } .password-wrap input::placeholder { color: var(--color-text-muted); } .eye-toggle { width: 52px; height: 48px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: #8c8c8c; flex-shrink: 0; } .eye-toggle:hover { color: var(--color-text-secondary); } /* ============================================================ PHONE FIELD ============================================================ */ .phone-field { position: relative; display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-lg); height: 48px; background: var(--color-bg); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; } .phone-field:focus-within { border-color: var(--color-primary); box-shadow: var(--ring-primary); } .phone-field.invalid { border-color: var(--color-danger); background: var(--color-danger-bg); } .phone-field.invalid:focus-within { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); } .phone-prefix { display: flex; align-items: center; gap: 5px; padding: 0 16px; border-right: 1px solid var(--color-border); height: 100%; font-size: 16px; color: var(--color-text); white-space: nowrap; flex-shrink: 0; } .phone-prefix .flag-icon { width: 20px; height: 20px; } .phone-field input { flex: 1; min-width: 0; height: 100%; padding: 0 16px; border: none; font-family: inherit; font-size: 16px; font-weight: 500; color: var(--color-text); background: transparent; outline: none; } .phone-field input::placeholder { color: var(--color-text-placeholder); } .phone-field input:disabled { color: var(--color-text-muted); cursor: not-allowed; } /* ============================================================ CUSTOM SELECT DROPDOWN — unified component Used by the header language picker and the signup country picker. ============================================================ */ .cust-select { position: relative; width: 100%; } /* ── Trigger ── */ .cust-select-trigger { height: 48px; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); display: flex; align-items: center; padding: 0 14px; gap: 8px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; user-select: none; } .cust-select-trigger:hover { border-color: #c0c2cc; } .cust-select.cs-open .cust-select-trigger { border-color: var(--color-primary); box-shadow: var(--ring-primary); } .cust-select.cs-disabled { opacity: 0.7; } .cust-select.cs-disabled .cust-select-trigger { cursor: not-allowed; background: var(--color-bg-disabled); } .cust-select-flag { width: 18px; height: 18px; flex: 0 0 18px; display: block; } .cust-select-label { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cust-select-label.is-placeholder { color: var(--color-text-placeholder); font-weight: 500; } .cust-select-chevron { flex: 0 0 auto; color: #8c8c8c; transition: transform 0.2s ease; } .cust-select.cs-open .cust-select-chevron { transform: rotate(180deg); } /* ── Panel ── */ .cust-select-panel { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; min-width: 100%; background: var(--color-bg); border-radius: var(--radius-xl); border: 1px solid var(--color-border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); z-index: 900; max-height: 280px; padding: 4px; flex-direction: column; overflow: hidden; } .cust-select.cs-open .cust-select-panel { display: flex; } /* Applied via JS when there isn't enough room below the trigger. Without this the panel (absolute, but still counted in scrollable overflow) grows the page's scroll height and the page visibly jumps. */ .cust-select.cs-open-up .cust-select-panel { top: auto; bottom: calc(100% + 4px); } /* Scrollable option list inside the panel, so a sticky search row can sit above it (the prototype had 14 countries and needed neither). */ .cust-select-options { overflow-y: auto; min-height: 0; scrollbar-width: none; } .cust-select-options::-webkit-scrollbar { display: none; } /* ── Search row (country picker only — ~235 options) ── */ .cust-select-search { flex: 0 0 auto; padding: 4px 4px 8px; } .cust-select-search input { width: 100%; height: 38px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--color-text); background: var(--color-bg); outline: none; } .cust-select-search input:focus { border-color: var(--color-primary); } .cust-select-search input::placeholder { color: var(--color-text-placeholder); } .cust-select-empty { display: none; padding: 12px 10px; font-size: 14px; color: var(--color-text-muted); text-align: center; } .cust-select-empty.visible { display: block; } /* ── Option rows ── */ .cust-select-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; transition: background 0.12s ease; border-radius: 8px; } .cust-select-option:hover { background: var(--color-primary-light); } .cust-select-option.cs-selected { background: var(--color-primary-light); } .cust-select-option.cs-hidden { display: none; } .cust-select-option.cs-option-disabled { opacity: 0.45; cursor: not-allowed; } .cust-select-option.cs-option-disabled:hover { background: transparent; } .cust-select-option-flag { width: 18px; height: 18px; flex: 0 0 18px; display: block; } .cust-select-option-label { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cust-select-option-dial { flex: 0 0 auto; font-size: 13px; color: var(--color-text-muted); } .cust-select-check { flex: 0 0 auto; color: var(--color-primary); font-size: 14px; font-weight: 600; visibility: hidden; } .cust-select-option.cs-selected .cust-select-check { visibility: visible; } /* ── Header context: shrink trigger to content, panel right-aligned ── */ .reg-header .cust-select { width: auto; flex: 0 0 auto; } .reg-header .cust-select-trigger { width: auto; height: 40px; padding: 0 10px 0 12px; } .reg-header .cust-select-label { flex: 0 0 auto; font-size: 14px; } .reg-header .cust-select-panel { left: auto; right: 0; min-width: 260px; } /* The country dataset