/* Pacisoft 2026 — shared chrome (docs/DIRECTION.md §2.4). Loaded on EVERY page, immediately after base.css. Requires tokens.css + base.css. Defines NO tokens and overrides no base component beyond the header breakpoints below, which DIRECTION §2.3 moves from base.css's 768/1024 to a single 900px line. Block map: === nav === mobile nav toggle + drawer (this file — integrator) === search === autocomplete panel lives in assets/css/search.css (Agent C); only the two on-dark placements it can't know about are here. === compare === tray + toast CSS is injected by assets/js/compare.js as the first child of (Agent D); it is deliberately NOT duplicated here — an author rule below would silently fork it. === layout === fixed-element offsets shared by every page. */ /* ==================================================================== nav === */ /* One breakpoint for the whole header: below 901px the desktop nav and the header search collapse into the drawer; at 901px and up the toggle disappears. base.css uses 1024 (nav) and 768 (search); these rules load later and win. */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; color: var(--white); border-radius: var(--radius); cursor: pointer; transition: background-color var(--dur) var(--ease); } .nav-toggle:hover { background: rgba(255,255,255,.12); } @media (max-width: 900px) { .header-nav { display: none; } .header-search { display: none; } /* logo · basket · toggle — the two controls sit together on the right */ .nav-toggle { order: 3; } .basket-dock { order: 2; margin-left: auto; } .header-inner { gap: var(--space-2); } } @media (min-width: 901px) { .nav-toggle { display: none; } .header-nav { display: flex; align-items: center; gap: var(--space-1); margin-right: auto; } .header-search { display: block; } } /* ----------------------------------------------------------------- drawer */ .mobile-nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--navy-900); border-bottom: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px rgba(8,26,43,.42); max-height: calc(100dvh - 64px); overflow-y: auto; /* resting state is VISIBLE — the closed state is `hidden`, so the reduced-motion kill switch in base.css can drop the transition without hiding the panel */ transform: translateY(0); opacity: 1; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .mobile-nav[hidden] { display: none; } .mobile-nav.is-closing, .mobile-nav.is-opening { transform: translateY(-8px); opacity: 0; } .mobile-nav-inner { padding-block: var(--space-4) var(--space-6); } .mobile-nav-links { display: grid; margin-top: var(--space-4); } .mobile-nav-links a { display: flex; align-items: center; min-height: 52px; padding: var(--space-2) var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); color: rgba(255,255,255,.86); border-radius: var(--radius); border-bottom: 1px solid rgba(255,255,255,.08); } .mobile-nav-links a:last-child { border-bottom: 0; } .mobile-nav-links a:hover { color: var(--white); background: rgba(255,255,255,.10); } .mobile-nav-links a[aria-current="page"] { color: var(--white); background: rgba(255,255,255,.14); } /* the drawer is above the page but must not sit above the header bar itself */ @media (min-width: 901px) { .mobile-nav { display: none !important; } } body.nav-open { overflow: hidden; } /* ================================================================= search === */ /* The panel itself is styled by assets/css/search.css. Two things that file can't know: the drawer input needs a positioning anchor for the absolute panel, and the on-dark header must not bleed its white text colour into the white panel. */ .mobile-search { position: relative; } .mobile-search .input { min-height: 48px; padding-left: var(--space-8); color: var(--white); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); } .mobile-search .input::placeholder { color: rgba(255,255,255,.60); } .mobile-search .input:focus { background: rgba(255,255,255,.16); border-color: var(--white); box-shadow: none; } .mobile-search .input:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; } .mobile-search > svg { position: absolute; left: var(--space-3); top: 26px; transform: translateY(-50%); opacity: .7; pointer-events: none; color: var(--white); } .site-header .search-suggest { color: var(--ink); } .site-header .search-suggest .search-suggest-row { color: var(--ink); } .site-header .search-suggest .search-suggest-row.is-active, .site-header .search-suggest .search-suggest-row:hover { color: var(--accent-ink); } .site-header .search-suggest .search-suggest-brand { color: var(--ink-soft); } .site-header .search-suggest .search-suggest-row--viewall { color: var(--accent-ink); } /* ============================================================= breadcrumb === */ /* `.breadcrumb` was re-declared in four page stylesheets (category / compare / pdp / vendor) and consequently MISSING on tim-kiem.html, where it rendered as a numbered `
    ` with browser indentation. base.css's `ul[class], ol[class]` reset does not reach it because the list itself carries no class. This is the shared-chrome baseline; chrome.css loads before every page stylesheet, so the four page-level variants still win where they exist. */ .breadcrumb { padding-block: var(--space-6) 0; } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); color: var(--ink-soft); } .breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line); } .breadcrumb a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink-soft); text-decoration: none; } .breadcrumb a:hover { color: var(--accent-ink); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; } /* ================================================================= layout === */ /* Nothing here. The fixed-furniture offsets DIRECTION §4.2 assigns to this file (body padding, .watermark-badge and .quote-bar lifted by --compare-tray-h) are already shipped inside compare.js's injected block and were verified working — restating them here would fork one rule across two files for no gain. */