style(ui): full UX/UI + motion pass across storefront, admin, editor

- fix save-bar buttons to use shared app-button primitive (were unstyled)
- fix platform-nav-group border/radius via structural selectors, drop dead
  -middle/-right classes
- storefront widgets (hero/categories/product-carousel/footer-nav): design
  tokens, hover/focus states, 44px touch targets, entrance motion, reduced-
  motion guards
- admin dashboard cards + quick-actions: hover lift, entrance animation
- admin product-form gallery remove badge: hover/focus + expanded hit area
- project-editor section.shared button styles: hover/active/focus/disabled
  states + reduced-motion; section-switch fade-in motion

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/components/header/header.component.html

@@ -11,17 +11,17 @@
       <!-- Navigation Buttons (desktop) -->
       <nav class="platform-nav">
         <div class="platform-nav-group">
-          <a [routerLink]="'/' | langRoute" routerLinkActive="platform-active" [routerLinkActiveOptions]="{exact: true}" 
-             (click)="closeMenu()" class="platform-nav-btn platform-nav-btn-left">
+          <a [routerLink]="'/' | langRoute" routerLinkActive="platform-active" [routerLinkActiveOptions]="{exact: true}"
+             (click)="closeMenu()" class="platform-nav-btn">
             {{ 'header.home' | translate }}
           </a>
           @if (headerConfig().showCategories) {
-            <button type="button" (click)="navigateToCatalog()" class="platform-nav-btn platform-nav-btn-left">
+            <button type="button" (click)="navigateToCatalog()" class="platform-nav-btn">
               {{ 'header.catalog' | translate }}
             </button>
           }
           @for (page of headerPages(); track page.id) {
-            <button type="button" (click)="navigateToStatic(page.route)" class="platform-nav-btn platform-nav-btn-left">
+            <button type="button" (click)="navigateToStatic(page.route)" class="platform-nav-btn">
               {{ page.title }}
             </button>
           }

src/app/components/header/header.component.scss

@@ -553,34 +553,30 @@
   cursor: pointer;
   transition: background 0.3s ease;
   white-space: nowrap;
-  
+
+  &:not(:first-child) {
+    border-left: none;
+  }
+
+  &:first-child {
+    border-radius: 10px 0 0 10px;
+  }
+
+  &:last-child {
+    border-radius: 0 10px 10px 0;
+  }
+
   &:hover {
     background: #a1b4b5;
     color: #1e3c38;
   }
-  
+
   &.platform-active {
     background: #497671;
     color: #ffffff;
   }
 }
 
-.platform-nav-btn-left {
-  border-radius: 10px 0 0 10px;
-  padding: 6px 32px;
-}
-
-.platform-nav-btn-middle {
-  padding: 6px 40px;
-  border-left: none;
-}
-
-.platform-nav-btn-right {
-  border-radius: 0 10px 10px 0;
-  padding: 6px 28px;
-  border-left: none;
-}
-
 // Search Box
 .platform-search-wrapper {
   flex: 1;
@@ -975,7 +971,7 @@
     height: 32px;
   }
 
-  // Mobile Menu Backdrop — full-screen, blurred, blocks interaction
+  // Mobile Menu Backdrop <EFBFBD> full-screen, blurred, blocks interaction
   .platform-menu-backdrop {
     display: block;
     position: fixed;

src/app/features/admin/dashboard/components/admin-dashboard-card.component.scss

@@ -8,6 +8,30 @@
   background: var(--bg-primary, #fff);
   box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
   min-height: 108px;
+  transition: box-shadow var(--transition-normal, 180ms ease), border-color var(--transition-normal, 180ms ease), transform var(--transition-normal, 180ms ease);
+  animation: dashboard-card-in 320ms ease-out both;
+}
+
+.dashboard-card:hover {
+  border-color: var(--primary-color, #497671);
+  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
+  transform: translateY(-2px);
+}
+
+@keyframes dashboard-card-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dashboard-card {
+    animation: none;
+    transition: none;
+  }
+
+  .dashboard-card:hover {
+    transform: none;
+  }
 }
 
 .dashboard-card--error {

src/app/features/admin/dashboard/components/admin-dashboard-quick-actions.component.scss

@@ -25,13 +25,29 @@
   font-weight: 600;
   font-size: 14px;
   text-decoration: none;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
 }
 
 .dashboard-quick-actions__item:hover,
 .dashboard-quick-actions__item:focus-visible {
   border-color: var(--primary-color, #497671);
   box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));
+  transform: translateY(-2px);
+}
+
+.dashboard-quick-actions__item:active {
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dashboard-quick-actions__item {
+    transition: none;
+  }
+
+  .dashboard-quick-actions__item:hover,
+  .dashboard-quick-actions__item:focus-visible {
+    transform: none;
+  }
 }
 
 @media (max-width: 960px) {

src/app/features/admin/products/components/admin-product-form.component.scss

@@ -14,7 +14,35 @@ input[type='checkbox'] { width: auto; }
 .gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
 .gallery-item { position: relative; width: 64px; height: 64px; }
 .gallery-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color, #d3dad9); }
-.gallery-item button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: #d9433c; color: #fff; cursor: pointer; }
+.gallery-item button {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: none;
+  background: #d9433c;
+  color: #fff;
+  cursor: pointer;
+  transition: transform var(--transition-fast, 120ms ease), background-color var(--transition-fast, 120ms ease);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -12px;
+  }
+
+  &:hover {
+    background: #b8352f;
+    transform: scale(1.1);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #d9433c;
+    outline-offset: 2px;
+  }
+}
 .related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
 .price-preview { font-weight: 600; }
 .actions { display: flex; justify-content: flex-end; }

src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html

@@ -2,7 +2,7 @@
   @if (draftRestored()) {
     <div class="project-editor-save-bar-notice">
       <span>{{ 'builder.draftRestored' | translate }}</span>
-      <button type="button" (click)="dismissDraftRestoredNotice()">{{ 'builder.dismiss' | translate }}</button>
+      <app-button variant="ghost" size="sm" (click)="dismissDraftRestoredNotice()">{{ 'builder.dismiss' | translate }}</app-button>
     </div>
   }
   <div class="project-editor-save-bar-status">
@@ -21,8 +21,8 @@
     }
   </div>
   <div class="project-editor-save-bar-actions">
-    <button type="button" class="project-editor-save-bar-reset" (click)="resetDraft()">{{ 'builder.resetDraft' | translate }}</button>
-    <button type="button" (click)="save()">{{ 'builder.save' | translate }}</button>
-    <button type="button" [disabled]="issues().length > 0" (click)="publish()">{{ 'builder.publish' | translate }}</button>
+    <app-button variant="danger" size="sm" (click)="resetDraft()">{{ 'builder.resetDraft' | translate }}</app-button>
+    <app-button variant="secondary" size="sm" (click)="save()">{{ 'builder.save' | translate }}</app-button>
+    <app-button variant="primary" size="sm" [disabled]="issues().length > 0" (click)="publish()">{{ 'builder.publish' | translate }}</app-button>
   </div>
 </div>

src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.scss

@@ -22,8 +22,10 @@
   color: var(--danger, #b91c1c);
 }
 
-.project-editor-save-bar-actions button + button {
-  margin-left: 0.5rem;
+.project-editor-save-bar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .project-editor-save-bar-saved-at {
@@ -45,7 +47,3 @@
   color: var(--info, #1d4ed8);
   border-bottom: 1px solid var(--border, #ddd);
 }
-
-.project-editor-save-bar-reset {
-  color: var(--danger, #b91c1c);
-}

src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.ts

@@ -2,11 +2,12 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { TranslatePipe } from '../../../../i18n/translate.pipe';
 import { TranslateService } from '../../../../i18n/translate.service';
 import { ProjectEditorFacade } from '../../facade/project-editor.facade';
+import { ButtonComponent } from '../../../../shared/ui/button/button.component';
 
 @Component({
   selector: 'app-project-editor-save-bar',
   standalone: true,
-  imports: [TranslatePipe],
+  imports: [TranslatePipe, ButtonComponent],
   templateUrl: './project-editor-save-bar.component.html',
   styleUrls: ['./project-editor-save-bar.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/features/project-editor/pages/project-editor-page.component.scss

@@ -23,6 +23,27 @@
 .project-editor-stack {
   display: grid;
   gap: 16px;
+
+  > * {
+    animation: project-editor-section-in 220ms ease-out both;
+  }
+}
+
+@keyframes project-editor-section-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .project-editor-stack > * {
+    animation: none;
+  }
 }
 
 .project-editor-section-actions {
@@ -37,6 +58,23 @@
   border-radius: 8px;
   padding: 6px 12px;
   cursor: pointer;
+  transition: background-color var(--transition-fast, 120ms ease), border-color var(--transition-fast, 120ms ease);
+
+  &:hover {
+    background: rgba(185, 28, 28, 0.08);
+    border-color: #b91c1c;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #b91c1c;
+    outline-offset: 2px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .project-editor-section-actions button {
+    transition: none;
+  }
 }
 
 .project-editor-empty {

src/app/features/project-editor/sections/section.shared.scss

@@ -111,12 +111,58 @@ button {
   padding: 0 14px;
   font-weight: 700;
   cursor: pointer;
+  transition: background-color var(--transition-fast, 120ms ease),
+    border-color var(--transition-fast, 120ms ease),
+    transform var(--transition-fast, 120ms ease),
+    box-shadow var(--transition-fast, 120ms ease);
+
+  &:hover {
+    background: var(--primary-hover, #3d635f);
+    border-color: var(--primary-hover, #3d635f);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #497671;
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    transform: none;
+    box-shadow: none;
+  }
 }
 
 button.secondary {
   background: #fff;
   color: #1e3c38;
   border-color: var(--border-color, #d3dad9);
+
+  &:hover {
+    background: var(--bg-secondary, #f5f5f5);
+    border-color: #497671;
+  }
+
+  &:focus-visible {
+    outline-color: #497671;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button {
+    transition: none;
+
+    &:hover {
+      transform: none;
+    }
+  }
 }
 
 .editor-error {

src/app/widgets/ui/categories-widget.component.ts

@@ -12,7 +12,7 @@ import { CategoriesWidgetData } from '../contracts/widget-data.contract';
     <section class="categories-widget">
       @if (data; as widgetData) {
         @if (widgetData.title) {
-          <h2>{{ widgetData.title }}</h2>
+          <h2 class="categories-widget__title">{{ widgetData.title }}</h2>
         }
 
         @if (widgetData.categories.length) {
@@ -28,7 +28,15 @@ import { CategoriesWidgetData } from '../contracts/widget-data.contract';
   `,
   styles: [
     `
-      .categories-widget { display: grid; gap: 1rem; }
+      .categories-widget { display: grid; gap: var(--space-lg, 24px); }
+
+      .categories-widget__title {
+        margin: 0;
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: var(--text-primary, #1e3c38);
+      }
+
       .categories-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
     `
   ],

src/app/widgets/ui/footer-navigation-widget.component.ts

@@ -28,9 +28,32 @@ export interface FooterNavigationLink {
   `,
   styles: [
     `
-      .footer-nav-widget { padding: 1rem; border-top: 1px solid var(--border-color, #d3dad9); }
-      ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
-      button { background: transparent; border: none; color: var(--text-secondary, #667a77); cursor: pointer; }
+      .footer-nav-widget { padding: 1rem 0; border-top: 1px solid var(--border-color, #d3dad9); }
+      ul { display: flex; gap: var(--space-sm, 8px); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        min-height: 44px;
+        padding: 0.5rem 0.75rem;
+        border: none;
+        border-radius: var(--radius-md, 12px);
+        background: transparent;
+        color: var(--text-secondary, #667a77);
+        font: inherit;
+        cursor: pointer;
+        transition: background-color var(--transition-fast, 120ms ease), color var(--transition-fast, 120ms ease);
+      }
+
+      button:hover {
+        background: var(--bg-secondary, #f5f5f5);
+        color: var(--primary-color, #497671);
+      }
+
+      button:focus-visible {
+        outline: 2px solid var(--primary-color, #497671);
+        outline-offset: 2px;
+      }
     `
   ],
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/widgets/ui/hero-widget.component.ts

@@ -22,10 +22,72 @@ import { HeroWidgetData } from '../contracts/widget-data.contract';
   `,
   styles: [
     `
-      .hero-widget { padding: 2rem; border-radius: var(--radius-lg, 16px); background: var(--bg-secondary, #f5f5f5); }
-      .hero-widget__title { margin: 0 0 0.5rem; font-size: 2rem; color: var(--text-primary, #1e3c38); }
-      .hero-widget__subtitle { margin: 0 0 1rem; color: var(--text-secondary, #667a77); }
-      .hero-widget__cta { border: none; border-radius: var(--radius-md, 12px); padding: 0.75rem 1rem; cursor: pointer; background: var(--primary-color, #497671); color: #fff; }
+      .hero-widget {
+        padding: var(--space-xl, 32px);
+        border-radius: var(--radius-lg, 16px);
+        background: linear-gradient(135deg, var(--bg-secondary, #f5f5f5) 0%, var(--bg-tertiary, #eef1f0) 100%);
+        animation: hero-widget-in 420ms ease-out both;
+      }
+
+      .hero-widget__title {
+        margin: 0 0 var(--space-sm, 8px);
+        font-size: 2rem;
+        font-weight: 700;
+        color: var(--text-primary, #1e3c38);
+        animation: hero-widget-in 480ms ease-out 60ms both;
+      }
+
+      .hero-widget__subtitle {
+        margin: 0 0 var(--space-lg, 24px);
+        color: var(--text-secondary, #667a77);
+        font-size: 1.05rem;
+        animation: hero-widget-in 480ms ease-out 120ms both;
+      }
+
+      .hero-widget__cta {
+        border: 1px solid transparent;
+        border-radius: var(--radius-md, 12px);
+        padding: 0.75rem 1.5rem;
+        cursor: pointer;
+        font-weight: 600;
+        background: var(--primary-color, #497671);
+        color: #fff;
+        transition: transform var(--transition-normal, 180ms ease), box-shadow var(--transition-normal, 180ms ease), background-color var(--transition-normal, 180ms ease);
+        animation: hero-widget-in 480ms ease-out 180ms both;
+
+        &:hover {
+          background: var(--primary-hover, #3d635f);
+          transform: translateY(-2px);
+          box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--primary-color, #497671);
+          outline-offset: 2px;
+        }
+      }
+
+      @keyframes hero-widget-in {
+        from { opacity: 0; transform: translateY(12px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .hero-widget,
+        .hero-widget__title,
+        .hero-widget__subtitle,
+        .hero-widget__cta {
+          animation: none;
+        }
+
+        .hero-widget__cta {
+          transition: none;
+        }
+      }
     `
   ],
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/widgets/ui/product-carousel-widget.component.ts

@@ -11,7 +11,7 @@ import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';
   template: `
     <section class="product-carousel-widget">
       @if (data?.title) {
-        <h2>{{ data?.title }}</h2>
+        <h2 class="product-carousel-widget__title">{{ data?.title }}</h2>
       }
 
       @if (data?.products?.length) {
@@ -23,7 +23,15 @@ import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';
   `,
   styles: [
     `
-      .product-carousel-widget { display: grid; gap: 1rem; }
+      .product-carousel-widget { display: grid; gap: var(--space-lg, 24px); }
+
+      .product-carousel-widget__title {
+        margin: 0;
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: var(--text-primary, #1e3c38);
+      }
+
       .product-carousel-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
     `
   ],