/* ============================================================ HEIRLOOM GOLD — header.css Dark header + new hallmark logo. Linked from include/topnav.inc, so it loads after every stylesheet in (nav.css, heirloom.css, page CSS) on every page that shows the header, and wins the cascade without !important. Logo files live in /assets/: heirloom-gold-logo-stacked.svg icon on top — 900px and wider heirloom-gold-logo-horizontal.svg icon left — under 900px The in topnav.inc picks the file; this sheet sizes it. 1200px + stacked 108px tall header 136px 900–1199px stacked 88px tall header 112px 460–899px horizontal 40px tall (351px wide) under 460px horizontal scales down to fit beside the icons ============================================================ */ :root { --hg-hdr-bg : #14130F; --hg-hdr-line : rgba(239, 225, 190, .12); --hg-hdr-text : #D9CFB6; --hg-hdr-hi : #EFE1BE; --hg-hdr-muted : #8E8471; --hg-gold : #CFAA5C; } /* ── HEADER BAR ──────────────────────────────────────────── */ .hg-header { background: var(--hg-hdr-bg); border-bottom: 1px solid var(--hg-hdr-line); } /* ── LOGO ────────────────────────────────────────────────── */ .hg-logo { display: block; flex-direction: row; /* cancels the old text-logo column layout */ line-height: 0; flex-shrink: 0; } .hg-logo picture { display: block; } .hg-logo-img { display: block; width: auto; height: 108px; max-width: none; /* global img{max-width:100%} would squash it */ } .hg-logo:focus-visible { outline: 2px solid var(--hg-gold); outline-offset: 4px; } /* ── SEARCH ──────────────────────────────────────────────── */ .hg-search-input { color: var(--hg-hdr-hi); border-bottom-color: #5A5244; } .hg-search-input:focus { border-bottom-color: var(--hg-gold); } .hg-search-input::placeholder { color: var(--hg-hdr-muted); } .hg-search-btn { color: #A1957B; } .hg-search-btn:hover { color: var(--hg-hdr-hi); } /* ── ICONS ───────────────────────────────────────────────── */ .hg-icon-btn, .hg-menu-btn { color: var(--hg-hdr-text); } .hg-icon-btn:hover, .hg-menu-btn:hover { color: var(--hg-hdr-hi); } .hg-icon-btn:focus-visible { outline-color: var(--hg-gold); } .hg-cart-badge { background: var(--hg-gold); color: var(--hg-hdr-bg); } /* ── DESKTOP NAV ─────────────────────────────────────────── */ .hg-nav { background: var(--hg-hdr-bg); border-bottom: 1px solid var(--hg-hdr-line); } .hg-nav-btn { color: var(--hg-hdr-text); border-bottom-width: 2px; margin-bottom: -1px; } .hg-nav-btn:hover { color: var(--hg-hdr-hi); } .hg-nav-item.hg-nav-on .hg-nav-btn { color: var(--hg-hdr-hi); border-bottom-color: var(--hg-gold); } .hg-dropdown { top: calc(100% + 1px); border-top-color: var(--hg-gold); } /* ── DESKTOP + WIDE TABLET: search | logo | icons ────────── */ @media (min-width: 900px) { :root { --header-h: 112px; } .hg-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-h); gap: 32px; } .hg-search { grid-column: 1; grid-row: 1; justify-self: start; width: 100%; max-width: 320px; } .hg-logo { grid-column: 2; grid-row: 1; } .hg-header-icons { grid-column: 3; grid-row: 1; justify-self: end; } .hg-logo-img { height: 88px; } } @media (min-width: 1200px) { :root { --header-h: 136px; } .hg-logo-img { height: 108px; } } /* ── MOBILE: icon-left logo, hamburger, search on 2nd row ── */ @media (max-width: 899px) { .hg-logo { flex: 1 1 0; /* basis 0: the logo shrinks, the icons never wrap */ min-width: 0; } .hg-logo-img { height: auto; width: 100%; max-width: 351px; /* 40px tall; scales down on narrow phones */ } } /* ── SHOP PANEL ────────────────────────────────────────────── Full-width dark panel under the nav bar (markup in topnav.inc). The Shop item goes position:static so the panel's containing block is the sticky .hg-nav, which spans the page. The dim over the page below uses :has(), so it simply doesn't appear in a browser without it — the menu still works. */ .hg-nav-item.hg-has-dropdown { position: static; } .hg-dropdown.hg-mega { top: 100%; left: 0; right: 0; width: auto; /* heirloom.css sets min(1180px, ...) */ min-width: 0; background: var(--hg-hdr-bg); border: 0; border-top: 1px solid var(--hg-hdr-line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); transform: translateY(-6px); } .hg-dropdown.hg-mega.hg-dropdown--open { transform: none; } .hg-nav:has(.hg-dropdown--open)::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 100vh; background: rgba(20, 19, 15, .35); pointer-events: none; z-index: 1; } .hg-mega-inner--panel { display: grid; grid-template-columns: 1fr 1fr 1fr 1.25fr 1.25fr; gap: 0 40px; max-width: 1320px; margin: 0 auto; padding: 40px 40px 44px; } .hg-mega-inner--panel .hg-mega-col { padding: 0 24px 0 0; border-right: 1px solid rgba(239, 225, 190, .1); } .hg-mega-inner--panel .hg-mega-heading { margin: 0 0 18px; padding: 0; border: 0; font: 600 10.5px/1 'Inter Tight', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--hg-gold); } .hg-mega-inner--panel .hg-mega-link { padding: 6px 0; font-family: 'Noto Serif Display', Didot, Georgia, serif; font-size: 21px; font-weight: 300; font-stretch: 62.5%; line-height: 1.25; letter-spacing: .01em; color: var(--hg-hdr-hi); } .hg-mega-inner--panel .hg-mega-link:hover { color: #fff; } .hg-mega-all { display: inline-block; margin-top: 14px; font: 500 12.5px 'Inter Tight', system-ui, sans-serif; color: var(--hg-hdr-text); text-decoration: underline; text-underline-offset: 4px; } .hg-mega-all:hover { color: #fff; } .hg-mega-tile { display: block; color: inherit; text-decoration: none; } .hg-mega-tile__img { display: block; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #1f1d18; } .hg-mega-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2, .7, .2, 1); } .hg-mega-tile:hover .hg-mega-tile__img img { transform: scale(1.04); } .hg-mega-tile__cap { display: block; margin-top: 12px; font-family: 'Noto Serif Display', Didot, Georgia, serif; font-size: 20px; font-weight: 300; font-stretch: 62.5%; line-height: 1.2; color: var(--hg-hdr-hi); } .hg-mega-tile__sub { display: block; margin-top: 4px; font: 500 12px 'Inter Tight', system-ui, sans-serif; color: var(--hg-hdr-muted); } /* Narrower desktops: keep one photo tile */ @media (max-width: 1099px) { .hg-mega-inner--panel { grid-template-columns: 1fr 1fr 1fr 1.25fr; gap: 0 28px; padding: 32px 28px 36px; } .hg-mega-inner--panel .hg-mega-tile + .hg-mega-tile { display: none; } }