/* ============================================================================= SITE SHELL - utility bar, sticky header, nav + mega menu, live search, mobile panel, footer ============================================================================= Pairs with js/shell.js. All selectors are namespaced `dc-` so they cannot collide with the legacy styles.css rules that still own the page bodies. Deliberately NOT wrapped in @layer: the shell is new, finished UI and should win outright. It is loaded after styles.css. Uses tokens from css/tokens.css only - no literal colours here. ============================================================================= */ /* Reserve the shell's height so injecting it causes no layout shift. This applies only until the shell mounts. */ #dc-header { min-height: 118px; } /* Once mounted, the wrapper must STOP forming a box. A position:sticky element can only travel within its parent's box, and this wrapper is only as tall as the header itself - so `.dc-header { position: sticky }` had nowhere to travel and scrolled away with the wrapper. Checking the computed `position` value said "sticky" and hid the bug; only measuring the header's top offset after scrolling revealed it. display:contents removes the wrapper's box, promoting .dc-utility and .dc-header to direct children of , so the sticky header now has the whole page to stick against. The class is added by js/shell.js after the markup is injected, so the min-height reservation above still does its job during the brief pre-mount window. */ #dc-header.is-mounted { display: contents; } body.dc-no-scroll { overflow: hidden; } /* ============================================================================= 1. TOP UTILITY BAR ============================================================================= */ .dc-utility { background-color: var(--surface-inverse); color: var(--text-inverse-muted); font-size: var(--text-sm); } .dc-utility-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 38px; flex-wrap: wrap; } .dc-utility-contact { display: flex; align-items: center; gap: var(--space-4); } .dc-utility-contact a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-inverse-muted); text-decoration: none; /* keep the phone number on one line - it must never break mid-number */ white-space: nowrap; transition: color var(--duration-base) var(--ease); } .dc-utility-contact a:hover { color: var(--text-inverse); } .dc-utility-contact .material-symbols-outlined { font-size: 18px; } .dc-utility-note { margin: 0; color: var(--text-inverse-muted); } /* ============================================================================= 2. STICKY HEADER ============================================================================= */ .dc-header { position: sticky; top: 0; z-index: var(--z-header); background-color: var(--surface); border-bottom: 1px solid var(--border); transition: box-shadow var(--duration-base) var(--ease); } .dc-header.is-scrolled { box-shadow: var(--shadow-2); } .dc-header-inner { position: relative; display: flex; align-items: center; gap: var(--space-4); min-height: 80px; } .dc-logo { flex: 0 0 auto; display: inline-flex; align-items: center; } .dc-logo img { display: block; height: 46px; width: auto; } /* --- primary nav ---------------------------------------------------------- */ .dc-nav { flex: 0 0 auto; } .dc-nav-list { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; } .dc-nav-item-has-menu { position: relative; } .dc-nav-link { display: inline-flex; align-items: center; gap: 2px; padding: var(--space-2) var(--space-3); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: 1.4; color: var(--text); text-decoration: none; white-space: nowrap; background: none; border: 0; border-radius: var(--radius-pill); cursor: pointer; transition: color var(--duration-base) var(--ease), background-color var(--duration-base) var(--ease); } .dc-nav-link:hover, .dc-nav-link:focus-visible { color: var(--brand-text); background-color: var(--brand-tint); } .dc-nav-link.is-active { color: var(--brand-text); } .dc-nav-toggle .material-symbols-outlined { font-size: 18px; transition: transform var(--duration-base) var(--ease); } .dc-nav-item-has-menu.is-open .dc-nav-toggle .material-symbols-outlined { transform: rotate(180deg); } /* --- mega dropdown -------------------------------------------------------- */ .dc-mega { position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: var(--z-dropdown); width: min(680px, 80vw); padding: var(--space-4); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); } .dc-mega[hidden] { display: none; } .dc-mega-head { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border); } .dc-mega-head a { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--brand-text); text-decoration: none; } .dc-mega-head a .material-symbols-outlined { font-size: 18px; } .dc-mega-head a:hover { text-decoration: underline; } .dc-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: 0; } .dc-mega-link { display: block; padding: 6px 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text); text-decoration: none; transition: color var(--duration-base) var(--ease); } .dc-mega-link:hover, .dc-mega-link:focus-visible, .dc-mega-link.is-current { color: var(--brand-text); } /* --- live search ---------------------------------------------------------- */ /* On phones the header row carries only the logo, the search icon and the burger. The contact CTA is dropped here - it stays available inside the mobile menu (.dc-mobile-foot), so nothing is lost. Removing it also puts the search icon directly beside the burger, which is the intended grouping. */ @media (max-width: 767px) { .dc-header .dc-cta { display: none; } } /* Wrapper anchors the expanding field to the icon. */ .dc-search-wrap { position: relative; flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; } /* Icon-only trigger. */ .dc-search-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1px solid var(--border); border-radius: var(--radius-circle); color: var(--text); cursor: pointer; transition: color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), background-color var(--duration-base) var(--ease); } .dc-search-toggle:hover, .dc-search-toggle:focus-visible { border-color: var(--border-brand); color: var(--brand-text); } .dc-search-toggle.is-open { background-color: var(--brand-text); border-color: var(--brand-text); color: var(--text-on-brand); } .dc-search-toggle .material-symbols-outlined { font-size: 22px; } /* Magnifier while closed, X while open. Both glyphs are in the DOM and only one is displayed, so the icon can never disagree with the panel's state. This X closes the search; the separate .dc-search-clear inside the field only empties the text. */ .dc-search-toggle .dc-icon-close, .dc-search-toggle.is-open .dc-icon-search { display: none; } .dc-search-toggle.is-open .dc-icon-close { display: inline-flex; } /* The field sits immediately to the left of the icon and floats above the nav rather than pushing it. NO entrance animation, deliberately. A width transition and an opacity keyframe were both tried; each leaves the field invisible or collapsed if the animation does not run to completion (frozen compositor, throttled background tab). Visibility now depends on the [hidden] attribute and nothing else - the field is either fully there or fully gone. */ .dc-search { position: absolute; right: calc(100% + var(--space-2)); top: 50%; transform: translateY(-50%); z-index: var(--z-dropdown); width: min(360px, calc(100vw - 118px)); min-width: 0; display: flex; align-items: center; gap: var(--space-1); height: 44px; padding-inline: var(--space-3); background-color: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-pill); transition: border-color var(--duration-base) var(--ease), background-color var(--duration-base) var(--ease); } .dc-search[hidden] { display: none; } .dc-search:focus-within { border-color: var(--border-brand); background-color: var(--surface); } .dc-search > .material-symbols-outlined { font-size: 20px; color: var(--text-muted); flex: 0 0 auto; } .dc-search-input { flex: 1 1 auto; min-width: 0; height: 100%; background: none; border: 0; outline: none; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text); } .dc-search-input::placeholder { color: var(--text-muted); } .dc-search-clear { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: none; border: 0; border-radius: var(--radius-circle); color: var(--text-muted); cursor: pointer; } .dc-search-clear:hover { background-color: var(--border); color: var(--text); } .dc-search-clear .material-symbols-outlined { font-size: 16px; } .dc-search-results { position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: var(--z-dropdown); max-height: 60vh; overflow-y: auto; padding: var(--space-1); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); } .dc-search-results[hidden] { display: none; } .dc-search-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); } .dc-search-row:hover, .dc-search-row.is-active, .dc-search-row:focus-visible { background-color: var(--brand-tint); } .dc-search-row img { flex: 0 0 auto; width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); background-color: var(--surface-muted); } .dc-search-row-text { display: flex; flex-direction: column; min-width: 0; } .dc-search-row-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-search-row-meta { font-size: var(--text-xs); color: var(--text-muted); } .dc-search-all { display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin-top: var(--space-1); padding: var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--brand-text); text-decoration: none; border-top: 1px solid var(--border); border-radius: var(--radius-sm); } .dc-search-all:hover, .dc-search-all.is-active, .dc-search-all:focus-visible { background-color: var(--brand-tint); } .dc-search-all .material-symbols-outlined { font-size: 18px; } .dc-search-empty { margin: 0; padding: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); text-align: center; } /* --- contact CTA + burger ------------------------------------------------- */ .dc-cta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); height: 44px; padding-inline: var(--space-4); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-on-brand); text-decoration: none; white-space: nowrap; background-color: var(--brand); border: 1px solid var(--brand); border-radius: var(--radius-pill); transition: background-color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease); } .dc-cta:hover, .dc-cta:focus-visible { background-color: var(--brand-deep); border-color: var(--brand-deep); box-shadow: var(--shadow-2); } .dc-cta .material-symbols-outlined { font-size: 18px; } .dc-cta-block { width: 100%; } .dc-burger { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1px solid var(--border); border-radius: var(--radius-circle); color: var(--text); cursor: pointer; } .dc-burger:hover { border-color: var(--border-brand); color: var(--brand-text); } /* ---- Mobile search ------------------------------------------------------- */ /* Below 768px the row cannot hold a usable field next to the logo, CTA and burger - anchoring one to the icon pushes it off-screen. So opening search hands the whole row to the field, with the icon acting as the close button. */ @media (max-width: 767px) { .dc-header-inner.is-searching .dc-logo, .dc-header-inner.is-searching .dc-burger { display: none; } .dc-header-inner.is-searching .dc-search-wrap { flex: 1 1 auto; /* a flex item defaults to min-width:auto and will not shrink below its content - without this the wrap stayed at field+toggle width and ran off the right edge on narrow phones (measured at 320px) */ min-width: 0; margin-left: 0; gap: var(--space-2); } .dc-header-inner.is-searching .dc-search { position: relative; right: auto; top: auto; transform: none; width: auto; flex: 1 1 auto; } } /* ============================================================================= 3. MOBILE PANEL ============================================================================= */ /* The panel is fullscreen, so the overlay sits fully behind it and is only there to lock the page underneath. It is never animated: a frozen fade from opacity 0 would leave an invisible sheet still swallowing clicks. */ .dc-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background-color: rgb(var(--scrim-rgb) / 55%); } .dc-overlay[hidden] { display: none; } /* Fullscreen sheet. Visibility is the [hidden] attribute ONLY - the slide-in below is decoration layered on top of an already-correct resting state. Earlier revisions gated visibility on the motion itself, first with a transform transition and then with a filled keyframe, both starting at translateX(100%). Whenever the animation did not run to completion (frozen compositor, heavily throttled tab) the panel stayed parked outside the viewport while aria-expanded said true and page scroll was locked - an open menu nobody could see. The keyframe below therefore carries NO fill-mode, so the panel's static computed transform is none: if the animation never plays, it is simply already where it belongs. */ .dc-mobile-panel { position: fixed; inset: 0; z-index: var(--z-drawer); display: flex; flex-direction: column; width: 100%; background-color: var(--surface); overflow-y: auto; overscroll-behavior: contain; } .dc-mobile-panel[hidden] { display: none; } /* The right-to-left entrance is NOT declared here. It is played from js/shell.js with the Web Animations API, because only JS can carry the safety net: a setTimeout cancels the animation shortly after its nominal end, which drops the panel back to this resting state (transform: none). A plain CSS keyframe has no such escape - if the document timeline stalls it holds frame 0, translateX(100%), forever. setTimeout keeps firing when rAF and the compositor do not, so the menu always arrives. */ .dc-mobile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); } .dc-mobile-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: 1px solid var(--border); border-radius: var(--radius-circle); color: var(--text); cursor: pointer; } .dc-mobile-nav { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); } .dc-mobile-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-3); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text); text-align: left; text-decoration: none; background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; } .dc-mobile-link:hover, .dc-mobile-link:focus-visible, .dc-mobile-link.is-active { color: var(--brand-text); background-color: var(--brand-tint); } /* --- collapsible category group ------------------------------------------- */ .dc-mobile-group { display: flex; flex-direction: column; } .dc-mobile-sub-toggle .material-symbols-outlined { font-size: 20px; transition: transform var(--duration-base) var(--ease); } .dc-mobile-sub-toggle.is-open .material-symbols-outlined { transform: rotate(180deg); } .dc-mobile-subs { display: flex; flex-direction: column; margin: 0 0 var(--space-1) var(--space-3); padding-left: var(--space-3); border-left: 2px solid var(--border); } .dc-mobile-subs[hidden] { display: none; } .dc-mobile-subs a { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); text-decoration: none; border-radius: var(--radius-sm); transition: color var(--duration-base) var(--ease), background-color var(--duration-base) var(--ease); } .dc-mobile-subs a:hover, .dc-mobile-subs a:focus-visible, .dc-mobile-subs a.is-active { color: var(--brand-text); background-color: var(--brand-tint); } .dc-mobile-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); text-align: center; border-top: 1px solid var(--border); background-color: var(--surface-muted); } /* align-items:center would shrink the full-width CTA to its content, so it opts back out. */ .dc-mobile-foot .dc-cta-block { align-self: stretch; } .dc-mobile-contact { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text); text-decoration: none; } .dc-mobile-contact .material-symbols-outlined { font-size: 18px; color: var(--brand-text); } .dc-mobile-hours { margin: 0; font-size: var(--text-xs); color: var(--text-muted); } /* ============================================================================= 4. FOOTER ============================================================================= */ .dc-footer { margin-top: var(--space-8); background-color: var(--surface-inverse); color: var(--text-inverse-muted); } .dc-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--space-6) var(--space-5); padding-top: var(--space-7); padding-bottom: var(--space-7); } .dc-footer-logo img { display: block; height: 48px; width: auto; margin-bottom: var(--space-3); } .dc-footer-tagline { margin: 0; font-size: var(--text-sm); line-height: var(--leading-body); color: var(--text-inverse-muted); } .dc-footer-title { margin: 0 0 var(--space-3); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-semibold); line-height: var(--leading-heading); color: var(--text-inverse); } .dc-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .dc-footer-links a { font-size: var(--text-sm); color: var(--text-inverse-muted); text-decoration: none; transition: color var(--duration-base) var(--ease); } .dc-footer-links a:hover, .dc-footer-links a:focus-visible { color: var(--brand-light); } .dc-footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .dc-footer-contact li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-normal); } .dc-footer-contact .material-symbols-outlined { font-size: 20px; color: var(--brand-light); flex: 0 0 auto; } .dc-footer-contact a { color: var(--text-inverse-muted); text-decoration: none; transition: color var(--duration-base) var(--ease); } .dc-footer-contact a:hover, .dc-footer-contact a:focus-visible { color: var(--brand-light); } .dc-footer-bar { background-color: var(--surface-inverse-alt); } .dc-footer-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-3); padding-bottom: var(--space-3); } .dc-footer-bar-inner p { margin: 0; font-size: var(--text-xs); color: var(--text-inverse-muted); } .dc-footer-credit { font-size: var(--text-xs); color: var(--text-inverse-muted); text-decoration: none; } .dc-footer-credit:hover { color: var(--brand-light); } /* ============================================================================= 5. RESPONSIVE desktop >= 1024 | tablet 768–1023 | mobile < 768 ============================================================================= */ /* Narrow desktop: the header CTA collapses to its icon. Scoped to the header so the panel's full-width CTA keeps its label, and excludes the icon span itself so the button never renders empty. */ @media (max-width: 1199px) { .dc-header .dc-cta > span:not(.material-symbols-outlined) { display: none; } .dc-header .dc-cta { padding-inline: var(--space-3); } } /* Tablet and below: nav collapses into the panel. */ @media (max-width: 1023px) { #dc-header { min-height: 110px; } .dc-nav { display: none; } .dc-burger { display: inline-flex; } .dc-header-inner { min-height: 72px; } .dc-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { /* Space reserved for the shell before js/shell.js injects it, so the page does not jump on mount. Re-measured after the contact links left the top bar: 38px bar + 73px header. Below ~325px the shipping note wraps to a second line and the bar grows to 48px - see the rule after this block. */ #dc-header { min-height: 111px; } .dc-utility-inner { justify-content: center; gap: var(--space-1) var(--space-3); padding-block: var(--space-1); } .dc-utility { font-size: var(--text-xs); } /* Phone and e-mail come off the top bar on small screens - two long, unbreakable strings were eating a whole row above the fold to repeat what the burger menu's footer already offers, one tap away. The shipping note keeps the bar, centred on its own. */ .dc-utility-contact { display: none; } .dc-utility-note { text-align: center; } .dc-header-inner { flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-2); } .dc-logo img { height: 38px; } .dc-cta { height: 42px; margin-left: auto; } .dc-footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); text-align: center; } .dc-footer-logo img { margin-inline: auto; } .dc-footer-links, .dc-footer-contact { align-items: center; } .dc-footer-contact li { justify-content: center; text-align: left; } .dc-footer-bar-inner { justify-content: center; text-align: center; } } /* Narrowest phones: the shipping note no longer fits on one line, so the top bar is 10px taller and the pre-mount reservation follows it. */ @media (max-width: 325px) { #dc-header { min-height: 121px; } }