/* zoharceramic port — additive only, loaded after the site bundle */ :root { --zohar-page-bg: #F2EFE9; } /* THE FONT. Her bundle writes every rule as `font-family: var(--font-heebo)`, but only ever DECLARES that variable on a Next.js-generated class that sits on the original's (`heebo_…__variable`). Without the class the var is undefined, the whole declaration is invalid, and every page silently falls back to the system UI font — which is also why the hero heading measured taller than its clipping box and came out cropped. Declare it ourselves. The @font-face rules in her bundle resolve to `../media/…woff2`, i.e. /assets/media/ from where we host the stylesheet, so the publish step uploads the two woff2 files there as well as under /assets/site/. */ :root { --font-heebo: "Heebo", "Heebo Fallback", system-ui, sans-serif; } body { background-color: var(--zohar-page-bg); color: var(--zohar-dark); font-family: var(--font-heebo); } /* Top spacing under the fixed header. The site's purged bundle has no pt-28. */ .zp-pad { padding-top: 116px; } @media (min-width: 768px) { .zp-pad { padding-top: 148px; } } /* ── header: three states, all driven from here ─────────────────────────── The capture bakes ONE state into the element's style attribute; loadShell strips it and stamps [data-zohar-header] instead, so these rules are the only thing that decides the bar's colour. home, at the top → the dark bar the logo is designed to sit on inner page, at the top→ transparent over the page's own light background anywhere, scrolled → the cream bar the live site uses */ header[data-zohar-header] { background-color: transparent; backdrop-filter: none; border-bottom: 0; color: var(--zohar-dark); transition: background-color .3s ease, color .3s ease; } .zp-home header[data-zohar-header] { background-color: rgba(40, 37, 30, .94); backdrop-filter: blur(12px); border-bottom: .5px solid rgba(255, 255, 255, .08); color: #fff; } header[data-zohar-header][data-scrolled="1"] { background-color: rgba(249, 247, 242, .88); backdrop-filter: blur(12px); border-bottom: .5px solid rgba(45, 45, 45, .08); color: var(--zohar-dark); } /* The buttons carry their own inline `color`, so restate it at higher weight. */ header[data-zohar-header] button, header[data-zohar-header] a[data-header-cart] { color: inherit !important; } /* The logo ships as a WHITE signature. Tint it to match the bar underneath: white only on the dark home header, brand-dark everywhere else. */ header[data-zohar-header] [data-zohar-logo] { display: block; filter: brightness(0); transition: filter .3s ease; } .zp-home header[data-zohar-header] [data-zohar-logo] { filter: brightness(0) invert(1); } .zp-home header[data-zohar-header][data-scrolled="1"] [data-zohar-logo] { filter: brightness(0); } /* Dot-nav labels are revealed on hover on the original; without its runtime they would otherwise sit permanently across the page content. */ .dot-nav .dot-label { opacity: 0; transition: opacity .2s ease; pointer-events: none; white-space: nowrap; } .dot-nav .dot-nav-item:hover .dot-label, .dot-nav .dot-wrapper:focus-visible .dot-label { opacity: 1; } /* The shop + cart dots are the only ones holding an ICON rather than being a plain bullet, and at the shared 24px they were completely covered by it. Give them a bigger disc so the white glyph sits inside with a real margin. */ .dot-nav .dot-shop, .dot-nav [data-dot-id="cart"] { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #2d2d2d; color: #fff; } .dot-nav .dot-shop svg, .dot-nav [data-dot-id="cart"] svg { width: 20px; height: 20px; } /* .dot:hover blanks the background; keep these two readable while hovered. */ .dot-nav .dot-shop:hover, .dot-nav [data-dot-id="cart"]:hover { background: var(--zohar-brown); border-color: transparent; } /* The signature logo asks for a 300px minimum. On a 390px phone that leaves nothing for the buttons, and everything after it is pushed off the left edge — on the live site the admin lock sits at x:-30 for exactly this reason. Give the logo a smaller floor on phones so the cart stays reachable. */ @media (max-width: 520px) { header[data-zohar-header] a[aria-label*="דף הבית"] > span { min-width: 170px !important; height: 54px !important; } } /* ── mobile drawer ──────────────────────────────────────────────────────── Selector weight matters here: the panel is a plain `