/** * GENERATED FILE — do not edit directly. Synced from forwineries-theme-core. * Edit the source there and re-run tools/sync-core.sh. * * Shared forwineries.com template-demo strip (DemoBar::render()). * Deliberately NOT built from a theme's own brand tokens (--fw-clay etc.) * or fonts — a system font stack and a neutral near-black bar reads as * tooling bolted on top of the site, not a design decision the winery * made. Fixed at the very top, one z-index above .fw-age-gate (100000), * so it stays visible even while the age gate is showing. * * --fw-bar-h is kept in sync with the bar's real (possibly wrapped, on * narrow screens) height by core/assets/js/demo-bar.js; the value below * is just the pre-JS fallback for that same variable. * * Shared contract with each product theme's own (hand-authored, not * core) header.php: the sticky header wrapper must use id="fw-header" * for the html.fw-demo-bar-active rule below to push it down correctly * — this is the one place a per-theme template file needs to match an * exact id core CSS depends on. See docs/ARCHITECTURE.md. */ .fw-demo-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100001; background: #16181c; color: #f2f2f2; } .fw-demo-bar-inner { max-width: var(--fw-container); margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 7px 20px; font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .fw-demo-bar-label { opacity: 0.85; white-space: nowrap; } .fw-demo-bar-skin { font-weight: 600; color: #fff; margin-left: 4px; } .fw-demo-switcher { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; } .fw-demo-switcher a { color: #cfd3d8; text-decoration: none; } .fw-demo-switcher a:hover, .fw-demo-switcher a:focus { color: #fff; text-decoration: underline; } .fw-demo-switcher a.is-current { color: #fff; font-weight: 600; text-decoration: underline; } .fw-demo-buy { background: #fff; color: #16181c; padding: 4px 12px; border-radius: 3px; text-decoration: none; font-weight: 600; white-space: nowrap; } .fw-demo-buy:hover, .fw-demo-buy:focus { background: #d8d8d8; color: #16181c; } .fw-demo-bar-close { background: none !important; border: none !important; color: #cfd3d8 !important; font: 20px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; padding: 0 2px !important; margin-left: 2px; cursor: pointer; } .fw-demo-bar-close:hover, .fw-demo-bar-close:focus { background: none !important; color: #fff !important; } /* Reserves space for the fixed bar (JS-synced; this is only the initial value before core/assets/js/demo-bar.js measures the real height) and shifts the sticky header and the age gate's own top edge down to match, so neither renders underneath the bar. All a no-op — zero layout shift — when the bar is hidden, since this class is never printed on in that case. */ html.fw-demo-bar-active { --fw-bar-h: 34px; } html.fw-demo-bar-active .fw-age-gate { top: var(--fw-bar-h); } /* margin-top alongside top, not top alone: #fw-header is the very first element in the document, so its sticky `top` offset is active from scroll position zero (it's "stuck" immediately, never in an un-stuck natural position) — but position:sticky reserves flow space at the element's UNSHIFTED natural position regardless of `top`, the same as position:relative. `top` alone visually renders the header --fw-bar-h lower than the space the document actually reserves for it, so whatever comes right after the header in the DOM starts --fw-bar-h too early and renders partly underneath the header's own box. Confirmed live on Heronrest's product page: the "Back to Wines" link sits immediately after the header with nothing else above it, so nearly its entire ~27px height fell inside that overlap and it read as simply missing — but the same overlap exists on every page, it's just usually absorbed by hero padding or a heading's own margin instead of eating actual content. margin-top makes the header's RESERVED space match its rendered position (both become --fw-bar-h from the top) instead of just moving where it's painted, which is what actually closes the gap. .fw-age-gate doesn't need the same fix — position:fixed never reserves flow space at all, with or without a margin, so there's nothing for it to mismatch. */ html.fw-demo-bar-active #fw-header { top: var(--fw-bar-h); margin-top: var(--fw-bar-h); } /* WordPress's own toolbar (#wpadminbar) is also position:fixed; top:0, but at a lower z-index (99999) than this bar (100001) — left alone, the two fully collide and this bar visually blots out the WP toolbar (and everything in it, including "Edit with Elementor") for any logged-in admin. Push this bar below the toolbar instead, at the same two breakpoints WP core itself uses to size #wpadminbar, and add that same height on top of the existing --fw-bar-h offset for the header and age gate so nothing renders underneath either bar. */ body.admin-bar .fw-demo-bar { top: 32px; } html.fw-demo-bar-active body.admin-bar #fw-header { top: calc(var(--fw-bar-h) + 32px); margin-top: calc(var(--fw-bar-h) + 32px); } html.fw-demo-bar-active body.admin-bar .fw-age-gate { top: calc(var(--fw-bar-h) + 32px); } @media screen and (max-width: 782px) { body.admin-bar .fw-demo-bar { top: 46px; } html.fw-demo-bar-active body.admin-bar #fw-header { top: calc(var(--fw-bar-h) + 46px); margin-top: calc(var(--fw-bar-h) + 46px); } html.fw-demo-bar-active body.admin-bar .fw-age-gate { top: calc(var(--fw-bar-h) + 46px); } } /* Every product theme's own style.css switches #fw-header to position:static below 900px (a deliberate, separate fix stopping the sticky header from colliding with position:fixed mobile checkout/cart action bars — see each theme's own comment at that rule). A static element ignores `top` entirely, so every `top:` rule above — correct for the sticky/fixed header that exists above 900px — silently does nothing at exactly the width a real phone uses, and the header (plus anything inside it, e.g. an announcement line above the logo) renders directly underneath the fixed demo bar instead of below it, invisible rather than merely misaligned. Confirmed live on Vespera at 375px width: its announcement bar sat at the very top of the document, fully hidden behind the demo bar, both computed at y:0. margin-top works identically to top for a static element (only top/left/right/bottom are ignored), so this mirrors each rule above with the equivalent margin-top, scoped to the same 900px breakpoint every theme uses for its own position:static override — the pre-existing `top:` rules become harmless no-ops here rather than needing to be removed. The 782px sub-breakpoint must stay AFTER the 900px block in source order, same precedence reasoning as the `top:`-based rules above: both match at ≤782px, so the later, narrower rule needs to win. */ @media (max-width: 900px) { html.fw-demo-bar-active #fw-header { margin-top: var(--fw-bar-h); } html.fw-demo-bar-active body.admin-bar #fw-header { margin-top: calc(var(--fw-bar-h) + 32px); } } @media screen and (max-width: 782px) { html.fw-demo-bar-active body.admin-bar #fw-header { margin-top: calc(var(--fw-bar-h) + 46px); } } /* Session-scoped dismiss (the "×" button, core/assets/js/demo-bar.js) — separate from the permanent "Hide demo bar" admin toggle above: closing it here only lasts for this browsing session (sessionStorage) and only hides the bar itself, not the demo-mode noindex/title behavior elsewhere in DemoBar. demo-bar.js zeroes --fw-bar-h itself when it adds this class, since that happens from a click after the page has already loaded — no matching CSS fallback needed the way the --active rule above has one for its own pre-JS moment. */ html.fw-demo-bar-dismissed .fw-demo-bar { display: none; } /* Section heads are the usual same-page scroll target — a nav link, a browser "find", a focus jump — and without this they land tucked under the sticky header (and demo bar, if active) instead of clear of it: both are position:fixed/sticky, so they overlap page content rather than pushing it down, and the browser's own scroll-into-view math has no way to know that on its own. --fw-header-h is kept in sync with #fw-header's real height by demo-bar.js above, same reasoning as --fw-bar-h. Zeroed below 900px to match #fw-header's own position:static override there (see above): a static header no longer overlaps the content below it, so no offset is needed. */ .fw-section-head { scroll-margin-top: calc(var(--fw-bar-h, 0px) + var(--fw-header-h, 0px) + 16px); } @media (max-width: 900px) { .fw-section-head { scroll-margin-top: var(--fw-bar-h, 0px); } } @media (max-width: 700px) { .fw-demo-bar-inner { padding: 6px 16px; } .fw-demo-switcher { width: 100%; margin-left: 0; order: 3; } /* "Winery template demo {Skin}" + "Request {Skin} · price" no longer both fit on the bar's first row at phone widths, so the buy button was wrapping onto its own line between the label and the switcher — three rows for what reads better as two. The skin name alone (bold, still visible) carries the same identification the full "Winery template demo" prefix did; dropping just the prefix here frees enough width for Request + close to stay on row one with it, and the switcher still gets its own row below either way. */ .fw-demo-bar-label-full { display: none; } /* Row 1 becomes skin name + Request pill + close, with the switcher dropped to its own row below (order: 3, above) — .fw-demo-switcher no longer sits in row 1 to soak up the margin-left: auto that pins it to the right at wider widths (see .fw-demo-switcher above), so without a replacement here that same auto margin, row 1 just left-aligns skin/pill/close with a ragged gap of empty bar to their right instead of the close button reading as pinned to the bar's far edge. */ .fw-demo-bar-close { margin-left: auto; } }