diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index c174424..856c06a 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -133,7 +133,7 @@
@if (headerConfig().showCategories) {
-
+
+
}
@for (page of headerPages(); track page.id) {
-
+
+
}
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index 8f17505..04089dd 100644
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -1,498 +1,3 @@
-.header {
- background: white;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
- position: sticky;
- top: 0;
- z-index: 1000;
-}
-
-.header-container {
- max-width: 1200px;
- margin: 0 auto;
- padding: 16px 20px;
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.logo {
- display: flex;
- align-items: center;
- gap: 8px;
- text-decoration: none;
- color: #333;
- font-size: 1.5rem;
- font-weight: 700;
- transition: color 0.2s;
-
- .logo-icon {
- font-size: 2rem;
- }
-
- &:hover {
- color: var(--primary-hover);
- }
-}
-
-/* Shared badge styling for cart count */
-.cart-badge {
- background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
- color: white;
- font-weight: 700;
- padding: 3px 7px;
- border-radius: 12px;
- min-width: 20px;
- text-align: center;
- box-shadow: 0 3px 8px rgba(255, 71, 87, 0.4);
- border: 2px solid white;
- display: inline-flex;
- align-items: center;
- justify-content: center;
-}
-
-.nav {
- display: flex;
- align-items: center;
- gap: 32px;
-
- a {
- display: flex;
- align-items: center;
- gap: 6px;
- text-decoration: none;
- color: #333;
- font-weight: 500;
- transition: all 0.2s;
- position: relative;
- padding: 8px 12px;
- border-radius: 6px;
-
- .nav-icon {
- font-size: 1.2rem;
- line-height: 1;
- }
-
- .nav-text {
- font-size: 1rem;
- }
-
- &:hover {
- color: var(--primary-hover);
- background: rgba(73, 118, 113, 0.05);
- }
-
- &.active {
- color: var(--primary-hover);
- background: rgba(73, 118, 113, 0.1);
- font-weight: 600;
- }
- }
-
- .cart-link {
- .cart-badge {
- position: absolute;
- top: -6px;
- right: -6px;
- font-size: 0.75rem;
- }
- }
-}
-
-.cart-link {
- display: flex;
- align-items: center;
- gap: 6px;
- position: relative;
-
- .cart-icon {
- font-size: 1.3rem;
- }
-
- .cart-badge {
- position: absolute;
- top: -8px;
- right: -12px;
- font-size: 0.8rem;
- }
-}
-
-.menu-toggle {
- display: none;
- flex-direction: column;
- gap: 5px;
- background: none;
- border: none;
- cursor: pointer;
- padding: 8px;
-
- span {
- width: 25px;
- height: 3px;
- background: #333;
- border-radius: 2px;
- transition: all 0.3s;
- }
-
- &.active {
- span:nth-child(1) {
- transform: rotate(45deg) translate(7px, 4.5px);
- }
-
- span:nth-child(2) {
- opacity: 0;
- }
-
- span:nth-child(3) {
- transform: rotate(-45deg) translate(7px, -4.5px);
- }
- }
-}
-
-.cart-link-mobile {
- display: none;
-}
-
-.header-actions {
- display: flex;
- align-items: center;
- gap: 12px;
- margin-right: 8px;
-}
-
-@media (max-width: 768px) {
- .cart-link-mobile {
- display: flex;
- align-items: center;
- position: relative;
- text-decoration: none;
- margin-right: 8px;
- padding: 8px;
- border-radius: 6px;
- transition: background 0.2s;
-
- .cart-icon {
- font-size: 1.5rem;
- color: #333;
- }
-
- .cart-badge {
- position: absolute;
- top: 2px;
- right: 2px;
- font-size: 0.75rem;
- }
-
- &:hover {
- background: rgba(73, 118, 113, 0.05);
- }
-
- &.active {
- background: rgba(73, 118, 113, 0.1);
- }
- }
-
- .nav {
- position: fixed;
- top: 68px;
- left: 0;
- right: 0;
- background: white;
- flex-direction: column;
- gap: 0;
- padding: 0;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- max-height: 0;
- overflow: hidden;
- transition: max-height 0.3s ease;
-
- &.nav-open {
- max-height: 300px;
- }
-
- a {
- width: 100%;
- padding: 16px 20px;
- border-bottom: 1px solid #f0f0f0;
-
- &::after {
- display: none;
- }
-
- &.active {
- background: #f5f5f5;
- }
- }
-
- .cart-link {
- display: none;
- }
- }
-
- .menu-toggle {
- display: flex;
- }
-
- .logo-text {
- font-size: 1.2rem;
- }
-}
-
-// ========== alt HEADER STYLES ==========
-.alt-header {
- background: white;
- border-bottom: 1px solid var(--border-color);
- position: sticky;
- top: 0;
- z-index: 1000;
- backdrop-filter: blur(10px);
- background: rgba(255, 255, 255, 0.95);
-}
-
-.alt-header-container {
- max-width: 1400px;
- margin: 0 auto;
- padding: 1rem 2rem;
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-.alt-left {
- flex: 1;
-}
-
-.alt-logo {
- display: flex;
- align-items: center;
- gap: 0.75rem;
- text-decoration: none;
-
- .alt-brand {
- font-size: 1.25rem;
- font-weight: 600;
- color: var(--text-primary);
- transition: color 0.3s;
- }
-
- &:hover .alt-brand {
- color: var(--primary-color);
- }
-}
-
-.alt-nav {
- flex: 2;
- display: flex;
- justify-content: center;
-
- .alt-nav-links {
- display: flex;
- gap: 2.5rem;
- }
-
- .alt-link {
- color: var(--text-secondary);
- text-decoration: none;
- font-weight: 500;
- font-size: 0.95rem;
- position: relative;
- padding: 0.5rem 0;
- transition: color 0.3s;
-
- &::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- width: 0;
- height: 2px;
- background: var(--primary-color);
- transition: width 0.3s;
- }
-
- &:hover,
- &.alt-active {
- color: var(--primary-color);
-
- &::after {
- width: 100%;
- }
- }
- }
-}
-
-.alt-right {
- flex: 1;
- display: flex;
- justify-content: flex-end;
- align-items: center;
- gap: 1.5rem;
-}
-
-.alt-mobile-controls {
- display: none;
-}
-
-.alt-cart {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 0.2rem;
- color: var(--text-primary);
- text-decoration: none;
- padding: 0.5rem;
- border-radius: var(--radius-md);
- transition: all 0.3s;
-
- &:hover,
- &.alt-cart-active {
- color: var(--primary-color);
- background: var(--bg-secondary);
- }
-}
-
-.alt-cart-icon {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- line-height: 0;
-
- svg {
- display: block;
- }
-}
-
-.alt-cart-badge {
- position: absolute;
- top: -4px;
- right: -4px;
- background: var(--primary-color);
- color: white;
- font-size: 0.7rem;
- font-weight: 700;
- min-width: 18px;
- height: 18px;
- border-radius: 9px;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0 5px;
- box-shadow: var(--shadow-sm);
-}
-
-.alt-cart-total {
- font-size: 0.68rem;
- font-weight: 700;
- line-height: 1;
- white-space: nowrap;
-}
-
-.alt-menu-toggle {
- display: none;
- flex-direction: column;
- gap: 5px;
- background: none;
- border: none;
- cursor: pointer;
- padding: 0.5rem;
-
- span {
- width: 24px;
- height: 2px;
- background: var(--text-primary);
- border-radius: 2px;
- transition: all 0.3s;
- }
-
- &.alt-active {
- span:nth-child(1) {
- transform: rotate(45deg) translate(6px, 6px);
- }
- span:nth-child(2) {
- opacity: 0;
- }
- span:nth-child(3) {
- transform: rotate(-45deg) translate(7px, -7px);
- }
- }
-}
-
-@media (max-width: 968px) {
- .alt-nav {
- position: fixed;
- top: 65px;
- left: 0;
- right: 0;
- background: white;
- border-bottom: 1px solid var(--border-color);
- box-shadow: var(--shadow-md);
- max-height: 0;
- overflow: hidden;
- transition: max-height 0.3s;
-
- &.alt-nav-open {
- max-height: calc(100dvh - 65px);
- overflow-y: auto;
- }
-
- .alt-nav-links {
- width: 100%;
- flex-direction: column;
- gap: 0;
- padding: 1rem 0;
- }
-
- .alt-link {
- padding: 1rem 2rem;
- border-bottom: 1px solid var(--border-color);
- text-align: center;
-
- &::after {
- display: none;
- }
-
- &:hover,
- &.alt-active {
- background: var(--bg-secondary);
- }
- }
- }
-
- .alt-right {
- flex: 0 0 auto;
- gap: 0.75rem;
- }
-
- .alt-right > app-region-selector,
- .alt-right > app-language-selector {
- display: none;
- }
-
- .alt-mobile-controls {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 12px;
- padding: 1rem 2rem 1.25rem;
- border-top: 1px solid var(--border-color);
- }
-
- .alt-menu-toggle {
- display: flex;
- }
-}
-
-@media (max-width: 768px) {
- .alt-header-container {
- padding: 1rem;
- }
-
- .alt-logo .alt-brand {
- font-size: 1.1rem;
- }
-}
-
-// ========== platform REDESIGN 2026 STYLES ==========
.platform-header {
background: rgba(117, 121, 124, 0.1);
padding: 8px 0;
@@ -526,7 +31,7 @@
align-items: center;
text-decoration: none;
flex-shrink: 0;
-
+
::ng-deep .logo-img {
width: 120px;
height: 38px;
@@ -622,7 +127,7 @@
font-size: 15px;
color: #828e8d;
cursor: pointer;
-
+
&::placeholder {
color: #828e8d;
}
@@ -690,16 +195,16 @@
cursor: pointer;
transition: opacity 0.3s ease;
gap: 2px;
-
+
svg {
width: 36px;
height: 28px;
}
-
+
&:hover {
opacity: 0.85;
}
-
+
&.platform-cart-active {
opacity: 1;
}
@@ -775,6 +280,8 @@
font-weight: 500;
color: #1e3c38;
text-decoration: none;
+ text-align: left;
+ appearance: none;
cursor: pointer;
transition: background 0.2s ease, transform 0.15s ease;
box-sizing: border-box;
@@ -878,7 +385,7 @@
padding: 6px;
margin-left: auto;
transition: opacity 0.2s ease;
-
+
&:hover {
opacity: 0.7;
}
@@ -890,20 +397,20 @@
padding: 0 32px;
gap: 32px;
}
-
+
.platform-nav-btn {
font-size: 18px;
padding: 8px 32px !important;
}
-
+
.platform-nav-btn-left {
padding: 8px 32px !important;
}
-
+
.platform-nav-btn-middle {
padding: 8px 40px !important;
}
-
+
.platform-nav-btn-right {
padding: 8px 28px !important;
}
@@ -914,33 +421,33 @@
padding: 0 20px;
gap: 20px;
}
-
+
.platform-logo ::ng-deep .logo-img {
width: 120px;
height: 40px;
}
-
+
.platform-nav-btn {
font-size: 16px;
padding: 8px 24px !important;
}
-
+
.platform-nav-btn-left {
padding: 8px 24px !important;
}
-
+
.platform-nav-btn-middle {
padding: 8px 28px !important;
}
-
+
.platform-nav-btn-right {
padding: 8px 20px !important;
}
-
+
.platform-search-box {
height: 42px;
}
-
+
.platform-search-input {
font-size: 18px;
}
@@ -951,35 +458,35 @@
gap: 12px;
padding: 0 16px;
}
-
+
// Hide desktop nav
.platform-nav {
display: none;
}
-
+
// Hide desktop language selector
.platform-lang-desktop {
display: none !important;
}
-
+
.platform-search-wrapper {
display: none;
}
-
+
.platform-search-mobile {
display: flex;
}
-
+
.platform-menu-toggle {
display: flex;
}
-
+
.platform-logo ::ng-deep .logo-img {
width: 100px;
height: 32px;
}
- // Mobile Menu Backdrop � full-screen, blurred, blocks interaction
+ // Mobile Menu Backdrop – full-screen, blurred, blocks interaction
.platform-menu-backdrop {
display: block;
position: fixed;
@@ -1011,7 +518,7 @@
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
z-index: 999;
box-sizing: border-box;
-
+
// Hide by default, animate in
max-height: 0;
padding-top: 0;
@@ -1053,5 +560,3 @@
from { opacity: 0; }
to { opacity: 1; }
}
-
-