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; } } - -