/* ===================================================================== HIDPLANET DESIGN WINDOW 03 — TOP MENU VARIANTS (staging only) Three concepts scoped to body.hp-menu-variant-a|b|c .hp-topnav Warm sun / rounded catalogue direction. Reversible; no baseline change. Palette tokens sourced from template.css (--hp-*). ===================================================================== */ /* --------------------------------------------------------------- Baseline neutralisation for variants: kill Tailwind's inline hover colour so our variant states are the source of truth. Only inside .hp-topnav__link when a variant class is on . --------------------------------------------------------------- */ body.hp-menu-variant-a .hp-topnav .hp-topnav__link, body.hp-menu-variant-b .hp-topnav .hp-topnav__link, body.hp-menu-variant-c .hp-topnav .hp-topnav__link { color: var(--hp-text); text-decoration: none; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease; font-family: var(--hp-font-sans); font-weight: var(--hp-fw-medium); letter-spacing: 0.005em; } body.hp-menu-variant-a .hp-topnav .hp-topnav__item, body.hp-menu-variant-b .hp-topnav .hp-topnav__item, body.hp-menu-variant-c .hp-topnav .hp-topnav__item { list-style: none; } /* ===================================================================== VARIANT A — SOFT ROUNDED PILLS Warm cream nav bar, each item a floating pill with generous padding. Active = filled warm accent pill with soft glow. Hover = warm cream fill, gentle lift. ===================================================================== */ body.hp-menu-variant-a nav.hp-topnav { background-color: #faf3e5; border-top-color: #ecdfc9; border-bottom: 1px solid #e6d5b6; padding: 8px 0 10px; } body.hp-menu-variant-a nav.hp-topnav .hp-topnav__list { gap: 8px; } body.hp-menu-variant-a .hp-topnav .hp-topnav__link { border-radius: var(--hp-radius-full); padding: 0 18px; height: 40px; display: inline-flex; align-items: center; background-color: #ffffff; border: 1px solid #ecdfc9; font-size: 0.9rem; font-weight: var(--hp-fw-medium); color: var(--hp-text); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; } body.hp-menu-variant-a .hp-topnav .hp-topnav__link:hover, body.hp-menu-variant-a .hp-topnav .hp-topnav__link:focus-visible { background-color: #f3e6ce; color: var(--hp-text); border-color: #e8d6b3; box-shadow: 0 1px 2px rgba(232, 112, 32, 0.06); transform: translateY(-1px); } body.hp-menu-variant-a .hp-topnav .hp-topnav__item.is-active > .hp-topnav__link { background-color: var(--hp-primary); color: #fff; border-color: var(--hp-primary); box-shadow: 0 1px 2px rgba(232, 112, 32, 0.28), 0 4px 14px rgba(232, 112, 32, 0.22); font-weight: var(--hp-fw-semibold); } body.hp-menu-variant-a .hp-topnav .hp-topnav__item.is-active > .hp-topnav__link:hover { background-color: var(--hp-primary-hover); border-color: var(--hp-primary-hover); transform: none; } /* Mobile — Variant A */ body.hp-menu-variant-a nav.hp-mobile-nav { padding: 8px 8px 12px; } body.hp-menu-variant-a nav.hp-mobile-nav .hp-topnav__list { gap: 6px; } body.hp-menu-variant-a nav.hp-mobile-nav .hp-topnav__link { border-radius: 999px; height: 44px; padding: 0 18px; justify-content: flex-start; width: 100%; } body.hp-menu-variant-a nav.hp-mobile-nav .hp-topnav__item.is-active > .hp-topnav__link { background-color: var(--hp-primary); color: #fff; } /* ===================================================================== VARIANT B — CLEAN TABS WITH ACTIVE UNDERLINE + SOFT SURFACE Restrained horizontal tabs, warm hairline underline. Active = warm underline + subtle cream tint background + weight bump. Hover = same warm tint + underline preview (fade in). Small subtle icons attached to a few primary sections (variant B only). ===================================================================== */ body.hp-menu-variant-b nav.hp-topnav { background-color: var(--hp-header); border-top-color: var(--hp-border); border-bottom: 1px solid #ecdfc9; padding: 0; } body.hp-menu-variant-b nav.hp-topnav .hp-topnav__list { gap: 2px; align-items: stretch; } body.hp-menu-variant-b .hp-topnav .hp-topnav__item { display: flex; align-items: stretch; } body.hp-menu-variant-b .hp-topnav .hp-topnav__link { position: relative; padding: 0 14px; height: 46px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--hp-text-secondary); border-radius: 0; background: transparent; letter-spacing: 0.01em; } /* Underline slot */ body.hp-menu-variant-b .hp-topnav .hp-topnav__link::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: transparent; border-radius: 2px 2px 0 0; transition: background-color 160ms ease; } body.hp-menu-variant-b .hp-topnav .hp-topnav__link:hover, body.hp-menu-variant-b .hp-topnav .hp-topnav__link:focus-visible { color: var(--hp-text); background-color: rgba(232, 112, 32, 0.06); } body.hp-menu-variant-b .hp-topnav .hp-topnav__link:hover::after { background-color: rgba(232, 112, 32, 0.35); } body.hp-menu-variant-b .hp-topnav .hp-topnav__item.is-active > .hp-topnav__link { color: var(--hp-text); background-color: rgba(232, 112, 32, 0.09); font-weight: var(--hp-fw-semibold); } body.hp-menu-variant-b .hp-topnav .hp-topnav__item.is-active > .hp-topnav__link::after { background-color: var(--hp-primary); height: 3px; left: 8px; right: 8px; } /* Optional subtle icon glyphs (variant B only) via ::before dot for first-tier sections — small warm accent, low visual weight. */ body.hp-menu-variant-b .hp-topnav .hp-topnav__item[data-nav-key="diagnostics"] > .hp-topnav__link::before, body.hp-menu-variant-b .hp-topnav .hp-topnav__item[data-nav-key="tpms"] > .hp-topnav__link::before, body.hp-menu-variant-b .hp-topnav .hp-topnav__item[data-nav-key="service"] > .hp-topnav__link::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: rgba(232, 112, 32, 0.55); display: inline-block; margin-right: 2px; flex: 0 0 auto; } body.hp-menu-variant-b .hp-topnav .hp-topnav__item.is-active[data-nav-key="diagnostics"] > .hp-topnav__link::before, body.hp-menu-variant-b .hp-topnav .hp-topnav__item.is-active[data-nav-key="tpms"] > .hp-topnav__link::before, body.hp-menu-variant-b .hp-topnav .hp-topnav__item.is-active[data-nav-key="service"] > .hp-topnav__link::before { background-color: var(--hp-primary); } /* Mobile — Variant B */ body.hp-menu-variant-b nav.hp-mobile-nav { padding: 4px 6px 10px; } body.hp-menu-variant-b nav.hp-mobile-nav .hp-topnav__list { gap: 0; } body.hp-menu-variant-b nav.hp-mobile-nav .hp-topnav__link { border-radius: 0; height: 46px; padding: 0 14px; border-bottom: 1px solid #efe3ce; width: 100%; } body.hp-menu-variant-b nav.hp-mobile-nav .hp-topnav__link::after { display: none; } body.hp-menu-variant-b nav.hp-mobile-nav .hp-topnav__item.is-active > .hp-topnav__link { border-left: 3px solid var(--hp-primary); padding-left: 11px; } /* ===================================================================== VARIANT C — SEGMENTED ROUNDED NAV (grouped) Whole menu sits inside a rounded warm surface acting as a segmented control. Items separated by hairlines; active item is a filled warm segment. Feels like a catalogue navigator tool. ===================================================================== */ body.hp-menu-variant-c nav.hp-topnav { background-color: var(--hp-background); border-top: 1px solid var(--hp-border); border-bottom: 1px solid var(--hp-border); padding: 14px 16px 16px; } body.hp-menu-variant-c nav.hp-topnav .hp-topnav__list { gap: 0; background-color: #eee0c4; border: 1px solid #d8c398; border-radius: 16px; padding: 5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(45, 36, 22, 0.05); align-items: stretch; height: 52px; } body.hp-menu-variant-c .hp-topnav .hp-topnav__item { position: relative; display: flex; align-items: stretch; flex: 1 1 auto; } body.hp-menu-variant-c .hp-topnav .hp-topnav__item + .hp-topnav__item::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: linear-gradient( to bottom, transparent, rgba(156, 139, 114, 0.35) 20%, rgba(156, 139, 114, 0.35) 80%, transparent ); } body.hp-menu-variant-c .hp-topnav .hp-topnav__item.is-active + .hp-topnav__item::before, body.hp-menu-variant-c .hp-topnav .hp-topnav__item:has(+ .hp-topnav__item.is-active)::after, body.hp-menu-variant-c .hp-topnav .hp-topnav__item.is-active::before { background: transparent; } body.hp-menu-variant-c .hp-topnav .hp-topnav__link { width: 100%; justify-content: center; padding: 0 14px; height: 40px; border-radius: 10px; background: transparent; color: var(--hp-text-secondary); font-size: 0.88rem; font-weight: var(--hp-fw-medium); text-align: center; } body.hp-menu-variant-c .hp-topnav .hp-topnav__link:hover, body.hp-menu-variant-c .hp-topnav .hp-topnav__link:focus-visible { background-color: rgba(255, 255, 255, 0.7); color: var(--hp-text); } body.hp-menu-variant-c .hp-topnav .hp-topnav__item.is-active > .hp-topnav__link { background-color: #ffffff; color: var(--hp-primary); font-weight: var(--hp-fw-semibold); box-shadow: 0 1px 2px rgba(45, 36, 22, 0.06), 0 4px 10px rgba(45, 36, 22, 0.06), inset 0 0 0 1px #f0dcb9; } /* Mobile — Variant C: keeps grouped-card feel but stacks vertically */ body.hp-menu-variant-c nav.hp-mobile-nav { padding: 8px 8px 12px; background-color: var(--hp-background); } body.hp-menu-variant-c nav.hp-mobile-nav .hp-topnav__list { flex-direction: column; gap: 0; padding: 6px; border-radius: 14px; height: auto; background-color: #eee0c4; border: 1px solid #d8c398; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); } body.hp-menu-variant-c nav.hp-mobile-nav .hp-topnav__item { flex: 0 0 auto; width: 100%; } body.hp-menu-variant-c nav.hp-mobile-nav .hp-topnav__item + .hp-topnav__item::before { display: none; } body.hp-menu-variant-c nav.hp-mobile-nav .hp-topnav__item + .hp-topnav__item { border-top: 1px solid rgba(156, 139, 114, 0.25); } body.hp-menu-variant-c nav.hp-mobile-nav .hp-topnav__link { height: 48px; justify-content: flex-start; border-radius: 10px; padding: 0 14px; width: 100%; color: var(--hp-text); background-color: transparent; } body.hp-menu-variant-c nav.hp-mobile-nav .hp-topnav__item.is-active > .hp-topnav__link { background-color: #ffffff; color: var(--hp-primary); box-shadow: 0 1px 2px rgba(45, 36, 22, 0.05), inset 0 0 0 1px #f0dcb9; }