/* ============================================================ header.css — top header (brand, search, actions) + main nav Markup: includes/header.php · Behaviour: js/header.js ============================================================ */ /* ============ LIVE SEARCH DROPDOWN (site-wide) ============ */ /* Rendered by ebnLiveSearch() in header.js; anchored to and positioned under the search input, so no ancestor overflow can clip it. */ .live-suggest { position: fixed; z-index: 1200; background: #fff; border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.20); max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; padding: 6px; color: var(--text); } .live-suggest[hidden] { display: none; } .live-suggest .ds-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px 4px; } .live-suggest .ds-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; color: var(--text); font-size: 14px; text-decoration: none; } .live-suggest .ds-item:hover, .live-suggest .ds-item.active { background: #eff4ff; color: var(--blue); } .live-suggest .ds-ic { flex: 0 0 auto; font-size: 15px; } .live-suggest .ds-tx { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-suggest .ds-meta { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--muted); background: #eef2f7; border-radius: 999px; padding: 1px 8px; } .live-suggest .ds-all .ds-tx { font-weight: 600; } .live-suggest .ds-empty { padding: 12px 10px; font-size: 13.5px; color: var(--muted); } /* ============ TOP HEADER ============ */ .top-header { background: #fff; border-bottom: 1px solid var(--border); } .top-header .container { display: flex; align-items: center; gap: 16px 24px; min-height: 82px; flex-wrap: wrap; padding: 8px 20px; } .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand-logo { font-size: 34px; font-weight: 800; letter-spacing: -1px; border: 3px solid var(--blue); border-radius: 8px; padding: 0 8px; line-height: 1.3; } .brand-logo .e { color: var(--red); } .brand-logo .bn { color: var(--blue); } .brand-text .name { color: var(--blue-dark); font-weight: 700; font-size: 16px; } .brand-text .tag { color: var(--blue); font-size: 13px; font-weight: 600; margin-top: 2px; } /* Transparent on desktop so .search-bar stays the header flex child; becomes a real animatable box on mobile (see responsive block). */ .search-wrap { display: contents; } .search-bar { flex: 1 1 320px; min-width: 240px; max-width: 560px; display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #f9fafb; height: 44px; margin-left: auto; } .search-bar input { flex: 1; min-width: 0; border: none; background: #f9fafb; padding: 0 14px; font-size: 14px; outline: none; color: var(--text); } .search-bar .search-btn { background: var(--blue); color: #fff; border: none; padding: 0 20px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; } .header-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; } .cart { position: relative; font-size: 24px; color: var(--text); } .cart .badge { position: absolute; top: -8px; right: -10px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 6px; } .login-link { font-size: 15px; color: var(--text); font-weight: 500; } .register-btn { background: var(--blue); color: #fff; border: none; border-radius: 8px; padding: 10px 22px; font-size: 15px; font-weight: 600; display: inline-block; text-decoration: none; cursor: pointer; line-height: 1.2; } .login-link { text-decoration: none; } .lang { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 4px; } /* ============ NAV BAR ============ */ .main-nav { background: var(--nav-bg); } .main-nav .container { display: flex; align-items: stretch; position: relative; } .nav-links { display: flex; align-items: stretch; flex-wrap: nowrap; flex: 1; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .main-nav a { color: #d1d5db; font-size: 14px; font-weight: 500; padding: 14px 13px; display: flex; align-items: center; gap: 7px; white-space: nowrap; flex-shrink: 0; } .main-nav a:hover { color: #fff; background: rgba(255,255,255,.06); } .main-nav a.active { background: var(--blue); color: #fff; } .main-nav a.more { margin-left: auto; } .main-nav .icon { font-size: 15px; opacity: .9; } /* Hamburger toggle (hidden on desktop) */ .nav-toggle { display: none; align-items: center; gap: 9px; background: none; border: none; color: #fff; font-size: 15px; font-weight: 600; padding: 13px 4px; width: 100%; text-align: left; } .nav-toggle .nav-toggle-icon { font-size: 18px; line-height: 1; } /* ============ RESPONSIVE ============ */ @media (max-width: 860px) { /* Deterministic 2-row grid — [brand | actions] then [search, full width]. A grid can't left-align a wrapped item, so the actions can NEVER fall under the logo the way a wrapped flex line does. */ .top-header .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 0; height: auto; padding: 12px 16px; gap: 10px 12px; } .brand { min-width: 0; margin-right: 12px; } .brand-text { min-width: 0; overflow: hidden; } .brand-text .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-actions { justify-self: end; } .search-wrap { grid-column: 1 / -1; } /* Search wrapper becomes a real box on mobile so its height animates. */ .search-wrap { display: block; order: 3; width: 100%; overflow: hidden; max-height: 140px; opacity: 1; margin-top: 0; transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease; } .search-bar { max-width: 100%; width: 100%; margin-left: 0; } /* Slide the search row away when scrolled. The -10px margin cancels the container's 10px flex row-gap so no phantom space is left behind. */ .site-top.scrolled .search-wrap { max-height: 0; opacity: 0; margin-top: -10px; } /* Sticky header + nav together so both stay reachable while scrolling. Promote to its own compositor layer so mobile browsers don't repaint (flicker) the sticky bar every frame during fast/momentum scrolling. */ .site-top { position: sticky; top: 0; z-index: 300; transform: translate3d(0, 0, 0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* Collapsible mobile menu */ .nav-toggle { display: flex; } .nav-links { display: none; flex-direction: column; overflow: visible; flex: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 200; background: var(--nav-bg); box-shadow: 0 10px 20px rgba(0,0,0,.35); max-height: 75vh; overflow-y: auto; } .nav-links.open { display: flex; } .main-nav a { padding: 13px 20px; border-bottom: 1px solid rgba(255,255,255,.06); } .main-nav a.more { margin-left: 0; } } /* Small tablets / large phones */ @media (max-width: 600px) { /* Search: input + button share one row */ .search-bar { height: auto; flex-wrap: wrap; gap: 8px; border: none; background: transparent; overflow: visible; } .search-bar input { order: 1; flex: 1 1 auto; height: 44px; border: 1px solid var(--border); border-radius: 8px; background: #f9fafb; } .search-bar .search-btn { order: 2; height: 44px; border-radius: 8px; } /* Let actions wrap (Register drops to its own line) instead of overflowing */ .header-actions { gap: 10px 12px; flex-wrap: wrap; justify-content: flex-end; } .login-link { font-size: 14px; } /* keep Login visible on mobile */ .register-btn { padding: 9px 16px; } } /* Small phones */ @media (max-width: 400px) { .brand-logo { font-size: 28px; } .brand-text .name { font-size: 14px; } .brand-text .tag { display: none; } /* tagline is decorative — drop it to save width */ .header-actions { gap: 12px; } .lang { display: none; } .cart { font-size: 22px; } .register-btn { padding: 8px 14px; font-size: 14px; } }