/** * Site Header — Almutaheda Pack * * Three-layer structure: * 1. .alm-utility-bar — top strip: phone, whatsapp, locale * 2. .alm-header-main — logo + primary nav + actions * 3. .alm-header-shadow — scroll shadow (JS adds --scrolled modifier) * * Sticky behavior is prepared via position:sticky without hard commitment — * a body class controls it so it can be toggled per page type. * * Depends on: tokens.css, base.css, buttons.css */ /* ─── Outer shell ────────────────────────────────────────────────── */ .alm-site-header { position: sticky; inset-block-start: 0; z-index: var(--alm-z-sticky); background: var(--alm-color-white); /* Defer shadow to scrolled state — no CLS from shadow on first paint */ transition: box-shadow var(--alm-duration-base) var(--alm-easing-standard); } /* Add shadow once user scrolls (JS adds class to ) */ .alm-is-scrolled .alm-site-header { box-shadow: var(--alm-shadow-md); } /* Per-page sticky opt-out: add .alm-no-sticky to via body_class filter */ .alm-no-sticky .alm-site-header { position: relative; } /* ─── Utility bar ────────────────────────────────────────────────── */ .alm-utility-bar { background: var(--alm-color-navy-primary); color: rgba(255, 255, 255, 0.80); font-size: var(--alm-text-xs); line-height: var(--alm-leading-snug); } .alm-utility-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--alm-space-4); padding-block: var(--alm-space-2); } .alm-utility-bar__start, .alm-utility-bar__end { display: flex; align-items: center; gap: var(--alm-space-4); } .alm-utility-bar a { color: inherit; text-decoration: none; transition: color var(--alm-duration-fast) var(--alm-easing-standard); } .alm-utility-bar a:hover { color: var(--alm-color-sand); } .alm-utility-bar__whatsapp { display: flex; align-items: center; gap: var(--alm-space-1); color: #68D391 !important; /* WhatsApp green on dark */ font-weight: var(--alm-weight-medium); } .alm-utility-bar__whatsapp svg { flex-shrink: 0; } .alm-utility-bar__divider { width: 1px; height: 0.875rem; background: rgba(255, 255, 255, 0.25); flex-shrink:0; } /* ─── Main header row ────────────────────────────────────────────── */ .alm-header-main { background: var(--alm-color-white); } .alm-header-main__inner { display: flex; align-items: center; gap: var(--alm-space-6); padding-block: var(--alm-space-4); } /* ─── Logo / branding ────────────────────────────────────────────── */ .alm-site-branding { flex-shrink: 0; display: flex; align-items: center; gap: var(--alm-space-3); } .alm-site-branding a { text-decoration: none; display: flex; align-items: center; gap: var(--alm-space-3); } .alm-site-branding img { height: 2.5rem; /* 40px — adapt to actual logo asset */ width: auto; display: block; } .alm-site-name { font-size: var(--alm-text-lg); font-weight: var(--alm-weight-bold); color: var(--alm-color-navy-primary); line-height: var(--alm-leading-tight); white-space: nowrap; } .alm-site-tagline { font-size: var(--alm-text-xs); color: var(--alm-color-text-muted); margin: 0; white-space:nowrap; } /* ─── Nav spacer ─────────────────────────────────────────────────── */ .alm-header-nav-wrap { flex: 1; display: flex; align-items: center; justify-content: flex-end; /* actions pushed to end by default */ gap: var(--alm-space-2); } /* ─── Header actions (search, account, cart, WA) ─────────────────── */ .alm-header-actions { display: flex; align-items: center; gap: var(--alm-space-1); flex-shrink: 0; } /* Icon button base */ .alm-header-action-btn { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: none; background: transparent; color: var(--alm-color-navy-primary); border-radius: var(--alm-radius-md); cursor: pointer; position: relative; text-decoration: none; transition: background-color var(--alm-duration-fast) var(--alm-easing-standard), color var(--alm-duration-fast) var(--alm-easing-standard); } .alm-header-action-btn:hover { background-color: var(--alm-color-navy-primary-10); color: var(--alm-color-navy-primary); } .alm-header-action-btn:focus-visible { outline: var(--alm-focus-ring-width) solid var(--alm-focus-ring-color); outline-offset: var(--alm-focus-ring-offset); } /* Cart count bubble */ .alm-cart-count { position: absolute; inset-block-start: 0.25rem; inset-inline-end: 0.25rem; min-width: 1.125rem; height: 1.125rem; padding-inline: 0.2rem; background: var(--alm-color-error); color: var(--alm-color-white); font-size: 0.625rem; font-weight: var(--alm-weight-bold); font-family: var(--alm-font-latin); line-height: 1.125rem; text-align: center; border-radius: var(--alm-radius-full); pointer-events: none; } .alm-cart-count[data-count="0"] { display: none; } /* WhatsApp action button — distinct color */ .alm-header-action-btn--whatsapp { color: #25D366; } .alm-header-action-btn--whatsapp:hover { background-color: #ECFDF5; color: #1EB857; } /* ─── Search bar ─────────────────────────────────────────────────── */ .alm-header-search { position: relative; } .alm-search-panel { display: none; position: absolute; inset-block-start:calc(100% + var(--alm-space-2)); inset-inline-end: 0; width: min(380px, 90vw); background: var(--alm-color-white); border: var(--alm-border-standard); border-radius: var(--alm-radius-lg); box-shadow: var(--alm-shadow-lg); padding: var(--alm-space-4); z-index: var(--alm-z-dropdown); } .alm-search-panel.is-open { display: block; } .alm-search-panel__form { display: flex; gap: var(--alm-space-2); align-items:center; } .alm-search-panel__input { flex: 1; /* inherits .alm-input styles */ } /* ─── Mobile toggle (hamburger) ──────────────────────────────────── */ .alm-mobile-toggle { display: none; /* hidden on desktop */ } /* ─── Responsive breakpoints ─────────────────────────────────────── */ @media (max-width: 1023px) { /* Hide desktop nav on mobile */ .alm-nav-primary { display: none; } /* Show hamburger */ .alm-mobile-toggle { display: flex; } /* Tighten header padding */ .alm-header-main__inner { padding-block: var(--alm-space-3); gap: var(--alm-space-3); } /* Utility bar: show minimal info only */ .alm-utility-bar__start { display: none; } .alm-utility-bar__inner { justify-content: center; } } @media (max-width: 639px) { /* Hide utility bar entirely on small phones */ .alm-utility-bar { display: none; } .alm-site-name { font-size: var(--alm-text-base); } .alm-header-main__inner { gap: var(--alm-space-2); } } /* ─── Hamburger icon lines ───────────────────────────────────────── */ .alm-hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 22px; height: 22px; pointer-events: none; } .alm-hamburger__line { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transform-origin: center; transition: transform var(--alm-duration-base) var(--alm-easing-standard), opacity var(--alm-duration-base) var(--alm-easing-standard); } /* Animate to ✕ when open */ .alm-mobile-toggle[aria-expanded="true"] .alm-hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .alm-mobile-toggle[aria-expanded="true"] .alm-hamburger__line:nth-child(2) { opacity: 0; transform: scaleX(0); } .alm-mobile-toggle[aria-expanded="true"] .alm-hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ═══════════════════════════════════════════════════════════════════ HEADER REDESIGN — PREMIUM COMMERCE 2026 ══════════════════════════════════════════════════════════════════ */ .alm-site-header { background: rgba(252, 251, 249, 0.94); border-bottom: 1px solid rgba(14, 34, 58, 0.08); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); } .alm-is-scrolled .alm-site-header { box-shadow: 0 12px 30px rgba(14, 34, 58, 0.10); } .alm-utility-bar { background: linear-gradient(90deg, var(--alm-color-navy-primary), var(--alm-color-navy-secondary)); color: rgba(255, 255, 255, 0.84); } .alm-utility-bar__inner { min-height: 2.25rem; padding-block: 0.4rem; } .alm-utility-bar__promise, .alm-utility-bar__phone, .alm-utility-bar__whatsapp { display: inline-flex; align-items: center; gap: var(--alm-space-1-5); } .alm-utility-bar__promise { font-weight: var(--alm-weight-medium); color: var(--alm-color-white); } .alm-utility-bar__phone { font-family: var(--alm-font-latin); direction: ltr; } .alm-utility-bar__whatsapp { color: #8FE3B7 !important; } .alm-header-main { background: transparent; } .alm-header-main__inner { min-height: 5.25rem; padding-block: var(--alm-space-3); gap: clamp(1rem, 2vw, 2rem); } .alm-site-branding { min-width: 0; } .alm-site-branding__logo, .alm-site-branding__logo .custom-logo-link { display: flex; align-items: center; text-decoration: none; } .alm-site-branding__logo img, .alm-site-branding .custom-logo { width: auto; height: clamp(2.75rem, 4vw, 3.5rem); max-width: clamp(9rem, 18vw, 13rem); object-fit: contain; } .alm-site-branding__fallback { display: flex; align-items: center; gap: var(--alm-space-3); text-decoration: none; } .alm-site-branding__mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--alm-radius-lg); background: var(--alm-color-navy-primary); color: var(--alm-color-sand); font-weight: var(--alm-weight-bold); font-family: var(--alm-font-latin); } .alm-site-branding__copy { display: flex; flex-direction: column; gap: 0.1rem; } .alm-site-name { font-size: var(--alm-text-lg); } .alm-site-tagline { display: block; } .alm-header-nav-wrap { gap: var(--alm-space-4); } .alm-header-actions { gap: var(--alm-space-2); padding-inline-start: var(--alm-space-3); border-inline-start: 1px solid var(--alm-color-border); } .alm-header-action-btn { width: auto; min-width: 2.75rem; padding-inline: var(--alm-space-2-5); gap: var(--alm-space-2); border: 1px solid transparent; } .alm-header-action-btn:hover { border-color: var(--alm-color-border); background-color: var(--alm-color-white); box-shadow: var(--alm-shadow-xs); } .alm-header-action-label { display: none; font-size: var(--alm-text-sm); font-weight: var(--alm-weight-semibold); } .alm-header-action-btn--whatsapp-cta { background: var(--alm-color-whatsapp); border-color: var(--alm-color-whatsapp); color: var(--alm-color-white); padding-inline: var(--alm-space-4); } .alm-header-action-btn--whatsapp-cta:hover { background: var(--alm-color-whatsapp-hover); border-color: var(--alm-color-whatsapp-hover); color: var(--alm-color-white); } .alm-header-action-btn--whatsapp-cta .alm-header-action-label { display: inline; } .alm-search-panel { inset-block-start: calc(100% + var(--alm-space-3)); width: min(30rem, calc(100vw - 2rem)); border-color: rgba(14, 34, 58, 0.10); border-radius: var(--alm-radius-xl); box-shadow: var(--alm-shadow-xl); } @media (min-width: 75rem) { .alm-header-action-btn--account .alm-header-action-label, .alm-header-action-btn--cart .alm-header-action-label { display: inline; } } @media (max-width: 63.99rem) { .alm-header-main__inner { min-height: 4.5rem; } .alm-header-nav-wrap { justify-content: flex-end; } .alm-header-actions { padding-inline-start: 0; border-inline-start: 0; } .alm-header-action-btn--account { display: none; } .alm-site-branding__logo img, .alm-site-branding .custom-logo { height: 2.6rem; max-width: 10.5rem; } } @media (max-width: 47.99rem) { .alm-utility-bar__inner { justify-content: center; } .alm-utility-bar__hours, .alm-utility-bar__divider, .alm-utility-bar__phone { display: none; } .alm-utility-bar__end { display: none; } .alm-header-main__inner { gap: var(--alm-space-2); padding-block: var(--alm-space-2); } .alm-site-branding { flex: 1; justify-content: center; } .alm-header-actions { gap: 0; } .alm-header-action-btn--search, .alm-header-action-btn--whatsapp-cta { display: none; } .alm-header-action-btn--cart { padding-inline: var(--alm-space-2); } .alm-site-branding__logo img, .alm-site-branding .custom-logo { height: 2.35rem; max-width: 9.5rem; } .alm-search-panel { position: fixed; inset-inline: 1rem; inset-block-start: 6rem; width: auto; } }