Match auth screens to the in-app layout and collapse the profile hero on scroll.

Login and register no longer use a boxed splash, and the mobile profile keeps only the avatar as the green header shrinks.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/assets/styles/main.css

@@ -216,11 +216,89 @@ input[type='number'] {
   color: var(--color-text);
 }
 
+.auth-page {
+  background: transparent;
+}
+
+.auth-top {
+  display: grid;
+  grid-template-columns: 40px 1fr 40px;
+  align-items: center;
+  gap: 4px;
+  padding: 8px var(--page-padding);
+  background: var(--color-surface);
+}
+
+.auth-top__title {
+  margin: 0;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+.auth-top .icon-btn {
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  color: var(--color-text);
+  padding: 0;
+}
+
+.auth-body {
+  padding: 20px var(--page-padding) 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background: transparent;
+}
+
+.auth-lead {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  line-height: 1.6;
+}
+
 .auth-page .card {
+  width: 100%;
+  max-width: var(--auth-form-max-width);
+  margin-inline: auto;
   background: transparent;
   border: none;
   box-shadow: none;
-  padding-inline: 0;
+  padding: 0;
+}
+
+.auth-switch {
+  margin: 0 auto;
+  width: 100%;
+  max-width: var(--auth-form-max-width);
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+.auth-switch a {
+  font-weight: 700;
+  color: var(--color-primary);
+}
+
+.auth-page .input,
+.auth-page .job-select,
+.auth-page .otp-box {
+  border: 1px solid #eeeef1;
+  border-radius: 12px;
+  background: var(--color-surface);
+}
+
+.auth-page .btn {
+  border-radius: 12px;
 }
 
 .card + .card {

src/assets/styles/responsive.css

@@ -48,19 +48,16 @@
   }
 
   /* Auth pages */
-  .auth-page__scroll {
-    display: flex;
-    flex-direction: column;
+  .auth-body {
     align-items: center;
-    justify-content: center;
-    padding-block: 48px;
+    padding-block: 32px 48px;
   }
 
-  .auth-header,
+  .auth-lead,
   .auth-page .card,
-  .auth-footer {
+  .auth-switch {
     width: 100%;
-    max-width: var(--form-max-width);
+    max-width: var(--auth-form-max-width);
   }
 
   /* Company selection */

src/views/auth/LoginView.vue

@@ -72,14 +72,15 @@ async function submit() {
 </script>
 
 <template>
-  <div class="page page-shell auth-page">
-    <AuthThemeToggle />
+  <div class="page auth-page">
+    <header class="auth-top">
+      <span aria-hidden="true" />
+      <h1 class="auth-top__title">ورود</h1>
+      <AuthThemeToggle variant="inline" />
+    </header>
 
-    <div class="page__scroll flex flex-col justify-center py-6">
-      <div class="auth-header">
-        <h1 class="page-title">ورود به سامانه</h1>
-        <p class="page-subtitle">سامانه سفارش عمده پارچه</p>
-      </div>
+    <div class="page__scroll auth-body">
+      <p class="auth-lead">برای سفارش پارچه، شماره موبایل خود را وارد کنید.</p>
 
       <form class="card" @submit.prevent="submit">
         <FormErrorBanner :message="formError" />
@@ -102,17 +103,10 @@ async function submit() {
         <BaseButton block type="submit" :loading="auth.loading">دریافت کد تأیید</BaseButton>
       </form>
 
-      <div class="mt-6 w-full max-w-[var(--form-max-width)] text-center">
-        <p class="m-0 text-sm text-muted">
-          حساب کاربری ندارید؟
-          <RouterLink
-            to="/register"
-            class="ms-1 font-bold text-primary no-underline hover:underline"
-          >
-            ثبت نام کنید
-          </RouterLink>
-        </p>
-      </div>
+      <p class="auth-switch">
+        حساب کاربری ندارید؟
+        <RouterLink to="/register">ثبت‌نام کنید</RouterLink>
+      </p>
     </div>
   </div>
 </template>

src/views/auth/OtpView.vue

@@ -231,22 +231,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page page-shell auth-page">
-    <button
-      type="button"
-      class="auth-back"
-      aria-label="بازگشت"
-      @click="router.push(isRegister ? '/register' : '/login')"
-    >
-      <IconChevronBack :size="20" />
-    </button>
-    <AuthThemeToggle />
+  <div class="page auth-page">
+    <header class="auth-top">
+      <button
+        type="button"
+        class="icon-btn"
+        aria-label="بازگشت"
+        @click="router.push(isRegister ? '/register' : '/login')"
+      >
+        <IconChevronBack :size="20" />
+      </button>
+      <h1 class="auth-top__title">تأیید موبایل</h1>
+      <AuthThemeToggle variant="inline" />
+    </header>
 
-    <div class="page__scroll flex flex-col justify-center py-6">
-      <div class="auth-header">
-        <h1 class="page-title">تأیید شماره موبایل</h1>
-        <p class="page-subtitle">کد ارسال‌شده به {{ toPersianDigits(phone) }} را وارد کنید</p>
-      </div>
+    <div class="page__scroll auth-body">
+      <p class="auth-lead">کد ارسال‌شده به {{ toPersianDigits(phone) }} را وارد کنید.</p>
 
       <form class="card" @submit.prevent="submit">
         <FormErrorBanner :message="formError" />
@@ -344,20 +344,4 @@ onMounted(() => {
   font-size: 0.8125rem;
   margin: 4px 0 0;
 }
-
-.auth-back {
-  position: fixed;
-  top: calc(12px + env(safe-area-inset-top, 0px));
-  inset-inline-start: 16px;
-  z-index: 100;
-  width: 40px;
-  height: 40px;
-  border: none;
-  background: transparent;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  color: var(--color-text);
-  padding: 0;
-}
 </style>

src/views/auth/RegisterView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import { onClickOutside } from '@vueuse/core'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import BaseInput from '@/components/ui/BaseInput.vue'
@@ -28,9 +29,25 @@ const firstName = ref('')
 const lastName = ref('')
 const phone = ref('')
 const jobCategory = ref<JobCategory | ''>('')
+const jobOpen = ref(false)
+const jobRoot = ref<HTMLElement | null>(null)
 const fieldErrors = ref<FieldErrors>({})
 const formError = ref('')
 
+const selectedJobLabel = computed(
+  () => JOB_CATEGORY_OPTIONS.find((opt) => opt.id === jobCategory.value)?.label ?? 'انتخاب کنید',
+)
+
+onClickOutside(jobRoot, () => {
+  jobOpen.value = false
+})
+
+function selectJob(id: JobCategory) {
+  jobCategory.value = id
+  jobOpen.value = false
+  clearField('jobCategory')
+}
+
 function clearField(key: string) {
   fieldErrors.value = clearFieldError(fieldErrors.value, key)
   if (!hasFieldErrors(fieldErrors.value)) formError.value = ''
@@ -83,20 +100,19 @@ async function submit() {
 </script>
 
 <template>
-  <div class="page page-shell auth-page">
-    <button type="button" class="auth-back" aria-label="بازگشت" @click="router.push('/login')">
-      <IconChevronBack :size="20" />
-    </button>
-    <AuthThemeToggle />
+  <div class="page auth-page">
+    <header class="auth-top">
+      <button type="button" class="icon-btn" aria-label="بازگشت" @click="router.push('/login')">
+        <IconChevronBack :size="20" />
+      </button>
+      <h1 class="auth-top__title">ثبت‌نام</h1>
+      <AuthThemeToggle variant="inline" />
+    </header>
 
-    <div class="page__scroll flex flex-col justify-center py-6">
-      <div class="auth-header">
-        <div class="text-5xl mb-3">🧵</div>
-        <h1 class="page-title">ثبت‌نام</h1>
-        <p class="page-subtitle">ایجاد حساب کاربری جدید</p>
-      </div>
+    <div class="page__scroll auth-body">
+      <p class="auth-lead">نام، موبایل و شغل خود را وارد کنید تا حساب ساخته شود.</p>
 
-      <div class="card">
+      <form class="card" @submit.prevent="submit">
         <FormErrorBanner :message="formError" />
 
         <BaseInput
@@ -124,75 +140,150 @@ async function submit() {
           @update:model-value="clearField('phone')"
         />
 
-        <label class="job-label">
-          دسته‌بندی شغلی
-          <select
-            v-model="jobCategory"
-            class="job-select"
+        <div ref="jobRoot" class="job-field">
+          <span id="job-label" class="job-label">دسته‌بندی شغلی</span>
+          <button
+            type="button"
+            class="job-trigger"
+            :class="{ 'is-open': jobOpen, 'is-error': fieldErrors.jobCategory }"
+            aria-labelledby="job-label"
+            aria-haspopup="listbox"
+            :aria-expanded="jobOpen"
             :aria-invalid="!!fieldErrors.jobCategory"
-            @change="clearField('jobCategory')"
+            @click="jobOpen = !jobOpen"
           >
-            <option disabled value="">انتخاب کنید</option>
-            <option v-for="opt in JOB_CATEGORY_OPTIONS" :key="opt.id" :value="opt.id">
-              {{ opt.label }}
-            </option>
-          </select>
+            <span :class="{ 'is-placeholder': !jobCategory }">{{ selectedJobLabel }}</span>
+            <svg class="job-chevron" viewBox="0 0 12 12" aria-hidden="true">
+              <path
+                d="M2.5 4.5 6 8l3.5-3.5"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.4"
+                stroke-linecap="round"
+              />
+            </svg>
+          </button>
+          <ul v-if="jobOpen" class="job-menu" role="listbox">
+            <li v-for="opt in JOB_CATEGORY_OPTIONS" :key="opt.id">
+              <button
+                type="button"
+                role="option"
+                class="job-option"
+                :class="{ 'is-active': jobCategory === opt.id }"
+                :aria-selected="jobCategory === opt.id"
+                @click="selectJob(opt.id)"
+              >
+                {{ opt.label }}
+              </button>
+            </li>
+          </ul>
           <span v-if="fieldErrors.jobCategory" class="job-error">{{ fieldErrors.jobCategory }}</span>
-        </label>
+        </div>
 
-        <BaseButton block :loading="auth.loading" @click="submit">دریافت کد تأیید</BaseButton>
-      </div>
+        <BaseButton block type="submit" :loading="auth.loading">دریافت کد تأیید</BaseButton>
+      </form>
 
-      <div class="mt-6 w-full max-w-[var(--form-max-width)] text-center">
-        <p class="m-0 text-sm text-muted">
-          قبلاً ثبت‌نام کرده‌اید؟
-          <RouterLink
-            to="/login"
-            class="ms-1 font-bold text-primary no-underline hover:underline"
-          >
-            وارد شوید
-          </RouterLink>
-        </p>
-      </div>
+      <p class="auth-switch">
+        قبلاً ثبت‌نام کرده‌اید؟
+        <RouterLink to="/login">وارد شوید</RouterLink>
+      </p>
     </div>
   </div>
 </template>
 
 <style scoped>
-.auth-back {
-  position: fixed;
-  top: calc(12px + env(safe-area-inset-top, 0px));
-  inset-inline-start: 16px;
-  z-index: 100;
-  width: 40px;
-  height: 40px;
-  border: none;
-  background: transparent;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  color: var(--color-text);
-  padding: 0;
-}
-
-.job-label {
+.job-field {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin-bottom: 14px;
+}
+
+.job-label {
   font-size: 0.875rem;
   font-weight: 600;
   color: var(--color-text);
 }
 
-.job-select {
+.job-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
   height: 48px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  padding: 0 12px;
-  font: inherit;
+  padding: 0 14px;
+  border: 1px solid #eeeef1;
+  border-radius: 12px;
   background: var(--color-surface);
   color: var(--color-text);
+  font: inherit;
+  font-size: 0.9375rem;
+  text-align: start;
+  cursor: pointer;
+}
+
+.job-trigger.is-open {
+  border-color: var(--color-primary);
+}
+
+.job-trigger.is-error {
+  border-color: var(--color-danger);
+}
+
+.job-trigger .is-placeholder {
+  color: var(--color-text-muted);
+}
+
+.job-chevron {
+  width: 12px;
+  height: 12px;
+  color: #9aa3af;
+  flex-shrink: 0;
+  transition: transform 0.15s;
+}
+
+.job-trigger.is-open .job-chevron {
+  transform: rotate(180deg);
+}
+
+.job-menu {
+  position: absolute;
+  inset-inline: 0;
+  top: calc(100% + 6px);
+  z-index: 20;
+  margin: 0;
+  padding: 6px;
+  list-style: none;
+  background: var(--color-surface);
+  border: 1px solid #eeeef1;
+  border-radius: 14px;
+  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
+}
+
+.job-option {
+  display: block;
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--color-text);
+  font: inherit;
+  font-size: 0.9rem;
+  text-align: start;
+  cursor: pointer;
+}
+
+.job-option:hover {
+  background: #f4f6f5;
+}
+
+.job-option.is-active {
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+  font-weight: 600;
 }
 
 .job-error {

src/views/profile/components/MobileProfilePage.vue

@@ -99,6 +99,13 @@ const unreadLabel = computed(() =>
   notificationStore.unreadCount > 9 ? '9+' : String(notificationStore.unreadCount),
 )
 const samplePrice = computed(() => sampleProduct.value.basePrice ?? SAMPLE_PRODUCT.basePrice ?? 0)
+const collapse = ref(0)
+const COLLAPSE_DISTANCE = 160
+
+function onProfileScroll(event: Event) {
+  const top = (event.target as HTMLElement).scrollTop
+  collapse.value = Math.min(1, Math.max(0, top / COLLAPSE_DISTANCE))
+}
 
 onMounted(async () => {
   loading.value = true
@@ -127,7 +134,7 @@ onMounted(async () => {
 
 <template>
   <div class="page profile-page">
-    <header class="hero">
+    <header class="hero" :class="{ 'is-collapsed': collapse > 0.85 }" :style="{ '--c': String(collapse) }">
       <div class="hero__top">
         <button
           type="button"
@@ -161,20 +168,25 @@ onMounted(async () => {
         :initials="displayName.charAt(0)"
         :size="84"
       />
-      <h2>{{ displayName }}</h2>
-      <p>کد واسطه: {{ code }}</p>
-      <span class="level-pill">
-        <svg class="level-pill__crown" viewBox="0 0 24 24" aria-hidden="true">
-          <path
-            fill="currentColor"
-            d="M3.5 17.5h17l-1.2-8.2a1 1 0 0 0-1.5-.7L14 11l-2.5-5.2a1 1 0 0 0-1.8 0L7.2 11 4.2 8.6a1 1 0 0 0-1.5.7L3.5 17.5Zm1.7 1.5h13.6v1.2H5.2V19Z"
-          />
-        </svg>
-        سطح: {{ levelLabel }}
-      </span>
+      <div class="hero__meta">
+        <h2>{{ displayName }}</h2>
+        <p>کد واسطه: {{ code }}</p>
+        <span class="level-pill">
+          <svg class="level-pill__crown" viewBox="0 0 24 24" aria-hidden="true">
+            <path
+              fill="currentColor"
+              d="M3.5 17.5h17l-1.2-8.2a1 1 0 0 0-1.5-.7L14 11l-2.5-5.2a1 1 0 0 0-1.8 0L7.2 11 4.2 8.6a1 1 0 0 0-1.5.7L3.5 17.5Zm1.7 1.5h13.6v1.2H5.2V19Z"
+            />
+          </svg>
+          سطح: {{ levelLabel }}
+        </span>
+      </div>
     </header>
 
-    <div class="page__scroll page__scroll--with-nav profile-scroll">
+    <div
+      class="page__scroll page__scroll--with-nav profile-scroll"
+      @scroll.passive="onProfileScroll"
+    >
       <PageSkeleton v-if="loading" variant="profile" />
       <template v-else>
         <section class="panel">
@@ -330,13 +342,15 @@ onMounted(async () => {
 }
 
 .hero {
+  --c: 0;
+  flex-shrink: 0;
   background: linear-gradient(
     145deg,
     var(--color-primary) 0%,
     color-mix(in srgb, var(--color-primary) 78%, #0a1f18) 100%
   );
   color: #fff;
-  padding: 12px var(--page-padding) 44px;
+  padding: 12px var(--page-padding) calc(44px - var(--c) * 34px);
   text-align: center;
 }
 
@@ -344,13 +358,14 @@ onMounted(async () => {
   display: grid;
   grid-template-columns: 40px 1fr 40px;
   align-items: center;
-  margin-bottom: 16px;
+  margin-bottom: calc(16px * (1 - var(--c)));
 }
 
 .hero__top h1 {
   margin: 0;
   font-size: 1rem;
   font-weight: 700;
+  opacity: calc(1 - var(--c));
 }
 
 .icon-btn {
@@ -382,9 +397,23 @@ onMounted(async () => {
 }
 
 .hero__avatar {
-  margin: 0 auto 12px;
+  margin: 0 auto calc(12px * (1 - var(--c)));
   border: 3px solid rgba(255, 255, 255, 0.35);
   color: #fff;
+  transform: scale(calc(1 - var(--c) * 0.18));
+  transform-origin: center top;
+}
+
+.hero__meta {
+  overflow: hidden;
+  max-height: calc((1 - var(--c)) * 130px);
+  opacity: calc(1 - var(--c));
+  transform: translateY(calc(var(--c) * -12px));
+  pointer-events: none;
+}
+
+.hero.is-collapsed .hero__meta {
+  visibility: hidden;
 }
 
 .hero h2 {
@@ -420,6 +449,8 @@ onMounted(async () => {
 .profile-scroll {
   position: relative;
   z-index: 1;
+  flex: 1;
+  min-height: 0;
   margin-top: -24px;
   padding: 20px var(--page-padding) 24px;
   display: flex;