.

src/assets/styles/desktop.css

@@ -566,6 +566,14 @@
     background: transparent;
   }
 
+  .page.calite-detail,
+  .page.calite-hub {
+    padding: 0;
+    max-width: none;
+    background: #f4f0ed;
+    overflow: visible;
+  }
+
   .catalog-list {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -590,6 +598,11 @@
     padding: 24px var(--page-padding-desktop) 32px;
   }
 
+  .page.calite-detail,
+  .page.calite-hub {
+    padding: 0;
+  }
+
   .orders-stats {
     gap: 16px;
     margin-bottom: 24px;

src/views/auth/LoginView.vue

@@ -393,7 +393,7 @@ onMounted(async () => {
   padding: 0 44px;
   border: none;
   border-radius: 999px;
-  background: var(--color-primary);
+  background: #0a353c;
   color: #f7f4ef;
   font-family: inherit;
   font-size: 0.9375rem;
@@ -404,7 +404,7 @@ onMounted(async () => {
 
 .login-submit:not(:disabled):hover,
 .login-submit:not(:disabled):focus-visible {
-  background: var(--color-primary-hover);
+  background: #072a2f;
 }
 
 .login-submit:focus-visible {

src/views/auth/OtpView.vue

@@ -493,7 +493,7 @@ onMounted(() => {
   padding: 0 44px;
   border: none;
   border-radius: 999px;
-  background: var(--color-primary);
+  background: #0a353c;
   color: #f7f4ef;
   font-family: inherit;
   font-size: 0.9375rem;
@@ -504,7 +504,7 @@ onMounted(() => {
 
 .otp-submit:not(:disabled):hover,
 .otp-submit:not(:disabled):focus-visible {
-  background: var(--color-primary-hover);
+  background: #072a2f;
 }
 
 .otp-submit:disabled {

src/views/auth/RegisterView.vue

@@ -136,40 +136,43 @@ async function submit() {
           <FormErrorBanner :message="formError" />
 
           <label class="reg-field" :class="{ 'is-invalid': Boolean(fieldErrors.firstName) }">
-            <span class="reg-field__meta">
-              <span>نام</span>
+<!--            <span class="reg-field__meta">-->
               <IconProfile :size="18" color="#8A847C" />
-            </span>
+<!--              <span>نام</span>-->
+<!--            </span>-->
             <input
               v-model="firstName"
               class="reg-field__input"
               type="text"
               autocomplete="given-name"
               @input="clearField('firstName')"
+              placeholder="نام"
             />
           </label>
           <p v-if="fieldErrors.firstName" class="reg-field__error">{{ fieldErrors.firstName }}</p>
 
           <label class="reg-field" :class="{ 'is-invalid': Boolean(fieldErrors.lastName) }">
-            <span class="reg-field__meta">
-              <span>نام خانوادگی</span>
+<!--            <span class="reg-field__meta">-->
               <IconProfile :size="18" color="#8A847C" />
-            </span>
+<!--              <span>نام خانوادگی</span>-->
+<!--            </span>-->
             <input
               v-model="lastName"
               class="reg-field__input"
               type="text"
+              dir="rtl"
               autocomplete="family-name"
               @input="clearField('lastName')"
+              placeholder="نام خانوادگی"
             />
           </label>
           <p v-if="fieldErrors.lastName" class="reg-field__error">{{ fieldErrors.lastName }}</p>
 
           <label class="reg-field" :class="{ 'is-invalid': Boolean(fieldErrors.phone) }">
-            <span class="reg-field__meta">
-              <span>شماره موبایل</span>
+<!--            <span class="reg-field__meta">-->
               <IconPhone :size="18" color="#8A847C" />
-            </span>
+<!--              <span>شماره موبایل</span>-->
+<!--            </span>-->
             <span class="reg-field__phone" dir="ltr">
               <span class="reg-field__locale" aria-hidden="true">
                 <svg class="iran-flag" viewBox="0 0 21 15" xmlns="http://www.w3.org/2000/svg">
@@ -194,8 +197,9 @@ async function submit() {
                 type="tel"
                 inputmode="numeric"
                 autocomplete="tel"
-                dir="ltr"
+                dir="rtl"
                 maxlength="11"
+                placeholder="شماره موبایل"
                 @input="onPhoneInput(($event.target as HTMLInputElement).value)"
               />
             </span>
@@ -212,8 +216,8 @@ async function submit() {
               @click="jobOpen = !jobOpen"
             >
               <span class="reg-field__meta">
-                <span :class="{ 'is-placeholder': !jobCategory }">{{ selectedJobLabel }}</span>
                 <IconBuilding :size="18" color="#8A847C" />
+                <span :class="{ 'is-placeholder': !jobCategory }">{{ selectedJobLabel }}</span>
               </span>
               <svg class="job-chevron" viewBox="0 0 12 12" aria-hidden="true">
                 <path
@@ -414,7 +418,6 @@ async function submit() {
   color: #2a2622;
   font: inherit;
   font-size: 0.875rem;
-  text-align: end;
   outline: none;
 }
 
@@ -532,7 +535,7 @@ async function submit() {
   padding: 0 44px;
   border: none;
   border-radius: 999px;
-  background: var(--color-primary);
+  background: #0a353c;
   color: #f7f4ef;
   font: inherit;
   font-size: 0.9375rem;
@@ -543,7 +546,7 @@ async function submit() {
 
 .register-submit:not(:disabled):hover,
 .register-submit:not(:disabled):focus-visible {
-  background: var(--color-primary-hover);
+  background: #072a2f;
 }
 
 .register-submit:disabled {

src/views/catalogs/CatalogDetailView.vue

@@ -387,7 +387,7 @@ async function addAllToInquiry() {
       </div>
     </div>
 
-    <div v-if="!loading && products.length" class="sticky-footer">
+    <div v-if="!loading && products.length" class="sticky-footer calite-detail__footer">
       <button type="button" class="inquiry-bar" :disabled="adding" @click="addAllToInquiry">
         {{ adding ? 'در حال افزودن...' : 'افزودن همه به سبد استعلام' }}
         <small>{{ formatNumber(patterns.length) }} طرح انتخاب می‌شود</small>
@@ -810,21 +810,127 @@ html.dark .inquiry-bar {
   color: #0b0f14;
 }
 
+html.dark .calite-detail__footer.sticky-footer {
+  background: #0b0f14;
+}
+
 @media (min-width: 768px) {
   .calite-detail {
     padding: 0;
     max-width: none;
     margin: 0;
-    overflow: hidden;
+    overflow: visible;
+    min-height: auto;
+  }
+
+  .calite-detail__scroll {
+    padding-bottom: 0;
   }
 
   .calite-hero {
-    min-height: 380px;
-    height: min(48vh, 460px);
+    min-height: 300px;
+    height: 340px;
+  }
+
+  .calite-hero__nav {
+    padding-top: 10px;
+  }
+
+  .calite-hero__copy {
+    inset-inline: 36px 36px;
+    bottom: 28px;
+    gap: 4px;
+  }
+
+  .calite-hero__copy h2 {
+    font-size: 2rem;
+  }
+
+  .calite-hero__usage {
+    font-size: 0.9375rem;
+  }
+
+  .calite-hero__latin {
+    font-size: 2.125rem;
+  }
+
+  .calite-hero__tagline {
+    font-size: 0.875rem;
+  }
+
+  .calite-detail__body {
+    padding: 18px 28px 28px;
+    max-width: 1120px;
+    margin-inline: auto;
+    width: 100%;
+    gap: 18px;
+  }
+
+  .attr-row {
+    max-width: 720px;
+    margin-inline: auto;
+    padding: 8px 0 4px;
+  }
+
+  .attr {
+    font-size: 0.875rem;
+    padding: 12px 12px;
+  }
+
+  .attr__icon {
+    width: 28px;
+    height: 28px;
+  }
+
+  .physical-cta {
+    max-width: 720px;
+    margin-inline: auto;
+    min-height: 56px;
+  }
+
+  .pattern-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 14px;
+  }
+
+  .calite-detail__footer.sticky-footer {
+    position: sticky;
+    bottom: 0;
+    inset-inline: auto;
+    width: 100%;
+    max-width: none;
+    padding: 12px 28px 24px;
+    background: #f4f0ed;
+  }
+
+  .inquiry-bar {
+    max-width: 1120px;
+    margin-inline: auto;
+    border-radius: 999px;
   }
 
   .toast {
-    bottom: 96px;
+    bottom: 32px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .calite-hero {
+    min-height: 360px;
+    height: 400px;
+  }
+
+  .calite-detail__body {
+    padding: 24px 40px 36px;
+  }
+
+  .pattern-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 16px;
+  }
+
+  .calite-detail__footer.sticky-footer {
+    padding-inline: 40px;
   }
 }
 </style>

src/views/catalogs/CatalogsHubView.vue

@@ -84,7 +84,7 @@ function metaLine(card: (typeof gallery.value)[number]) {
 <template>
   <div class="page calite-hub">
     <header class="calite-hub__nav">
-      <button type="button" class="icon-btn" aria-label="بازگشت" @click="goBack">
+      <button type="button" class="icon-btn mobile-only" aria-label="بازگشت" @click="goBack">
         <IconChevronBack :size="20" />
       </button>
       <h1>کالیته‌ها</h1>
@@ -408,4 +408,86 @@ html.dark .calite-card__copy small {
 html.dark .calite-card__copy small {
   color: #c5d0de;
 }
+
+@media (min-width: 768px) {
+  .calite-hub {
+    padding: 0;
+    max-width: none;
+    margin: 0;
+    overflow: visible;
+    min-height: auto;
+    background: #f4f0ed;
+  }
+
+  .calite-hub__scroll {
+    padding: 8px 28px 40px;
+    max-width: 1120px;
+    margin-inline: auto;
+    width: 100%;
+    gap: 16px;
+  }
+
+  .calite-hub__nav {
+    grid-template-columns: 1fr auto;
+    max-width: 1120px;
+    width: 100%;
+    margin-inline: auto;
+    padding: 28px 28px 0;
+  }
+
+  .calite-hub__nav h1 {
+    text-align: start;
+    font-size: 1.5rem;
+  }
+
+  .calite-hub__lead {
+    font-size: 0.9375rem;
+    text-align: start;
+  }
+
+  .calite-hub__chips {
+    flex-wrap: wrap;
+  }
+
+  .calite-chip {
+    height: 40px;
+    padding: 0 18px;
+    font-size: 0.8125rem;
+  }
+
+  .calite-hub__list {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+  }
+
+  .calite-card,
+  .calite-card__copy {
+    min-height: 176px;
+  }
+
+  .calite-card__copy {
+    padding: 20px 20px 20px 38%;
+  }
+}
+
+@media (min-width: 1200px) {
+  .calite-hub__nav,
+  .calite-hub__scroll {
+    padding-inline: 40px;
+  }
+
+  .calite-hub__scroll {
+    padding-bottom: 48px;
+  }
+
+  .calite-hub__list {
+    gap: 20px;
+  }
+
+  .calite-card,
+  .calite-card__copy {
+    min-height: 200px;
+  }
+}
 </style>