/* ───────────────────────────────────────────────────────────────── Bricks & Blooms — Persistent contact topbar ───────────────────────────────────────────────────────────────── */ /* * Height tokens — keep in sync if you change bar padding. * Desktop/tablet (≥ 768px) : one row ≈ 36px * Mobile (< 768px) : two rows ≈ 72px * * These are used to push the Sway fixed navbar down so it sits * below the topbar instead of overlapping it. */ :root { --bb-topbar-h: 36px; --bb-topbar-h-mobile: 72px; } /* ── Bar shell ───────────────────────────────────────────────── */ #bb-contact-topbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 10001 !important; background-color: #7E352E; color: #fff; font-size: 12px; line-height: 1; border-bottom: 1px solid rgba(255, 255, 255, .07); box-sizing: border-box; } /* ── Safari position:fixed fix ────────────────────────────────── * * Sway sets body { overflow-x: hidden }. In Safari this is a * known bug: any non-visible overflow on breaks position:fixed * for that body's descendants — they scroll with the page instead of * staying fixed to the viewport. Moving the clip to keeps the * no-horizontal-scroll behaviour without triggering the Safari bug. * (Chrome/Firefox are unaffected either way.) */ html { overflow-x: hidden; } body { overflow-x: visible !important; } /* ── Push the Sway fixed navbar below the topbar ─────────────── */ /* * Sway sets .navbar.navbar-default { position:fixed; top:0 }. * We shift it down by the topbar height so they stack cleanly. * The matching #wrapper margin-top shifts page content down too. * * We use margin-top (not padding-top) on #wrapper so that on mobile * it ADDS to Sway's existing padding-top: 65px instead of replacing * it — otherwise content would start under the nav on small screens. */ .navbar.navbar-default { top: var(--bb-topbar-h) !important; } /* WP admin bar adds 32px on desktop, 46px on mobile */ .admin-bar #bb-contact-topbar { top: 32px !important; } .admin-bar .navbar.navbar-default { top: calc(32px + var(--bb-topbar-h)) !important; } /* Sway does not dynamically pad #wrapper on desktop — it relies on full-height hero sections. margin-top (not padding-top) ADDS the topbar offset on top of whatever padding Sway applies at smaller breakpoints, rather than replacing it. */ body #wrapper { margin-top: var(--bb-topbar-h) !important; } /* ── Inner: two branch groups side by side ───────────────────── */ .bb-topbar-inner { display: flex; align-items: stretch; max-width: 1800px; margin: 0 auto; padding: 0 24px; height: var(--bb-topbar-h); box-sizing: border-box; } /* ── Branch group ────────────────────────────────────────────── */ .bb-topbar-branch { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; overflow: hidden; } .bb-topbar-ff { justify-content: flex-end; } /* Desktop balance: BB has more links, so allocate a wider side. */ @media (min-width: 992px) { .bb-topbar-bb { flex: 1.2; } .bb-topbar-ff { flex: 0.8; } .bb-topbar-divider { margin: 8px 16px; } } /* ── Brand label ─────────────────────────────────────────────── */ .bb-topbar-brand { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: .55; white-space: nowrap; padding-right: 4px; flex-shrink: 0; } /* ── Item list ───────────────────────────────────────────────── */ .bb-topbar-items { display: flex; align-items: center; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; } .bb-topbar-item { display: flex; align-items: center; margin: 0; padding: 0; } /* Pipe divider between items */ .bb-topbar-item + .bb-topbar-item::before { content: '|'; color: rgba(255, 255, 255, .2); padding: 0 8px; font-size: 11px; pointer-events: none; flex-shrink: 0; } /* ── Links ───────────────────────────────────────────────────── */ .bb-topbar-items a, .bb-topbar-items a:visited { display: flex; align-items: center; gap: 5px; color: #fff !important; text-decoration: none !important; white-space: nowrap; transition: color .15s; font-size: 12px; } .bb-topbar-items a:hover { color: #E9477A !important; } /* WhatsApp icon — green to distinguish from plain calls */ .bb-topbar-whatsapp .fa-whatsapp { color: #4dbd74; } .bb-topbar-whatsapp:hover .fa-whatsapp { color: inherit; } /* ── Vertical divider between the two branch groups ─────────── */ .bb-topbar-divider { width: 1px; background: rgba(255, 255, 255, .15); margin: 8px 24px; flex-shrink: 0; align-self: stretch; } /* ───────────────────────────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────────────────────────── */ /* ── Narrow desktop (1200–1599px): hide social handle text ────── * * At ~1600px each branch has ≈875px — enough for all text. * Below that, Instagram / TikTok handles push BB beyond its half; * hiding just those spans keeps phone + email fully readable. * `:has()` is supported in all evergreen browsers (Chrome 105+, * Safari 15.4+, Firefox 121+). */ @media (min-width: 1200px) and (max-width: 1599px) { .bb-topbar-item:has(.fa-instagram) .bb-topbar-text, .bb-topbar-item:has(.fa-tiktok) .bb-topbar-text { display: none; } /* Tighten pipe padding slightly to recover extra room */ .bb-topbar-item + .bb-topbar-item::before { padding: 0 5px; } } /* ── Medium (992–1199px): hide text, keep icons ──────────────── */ @media (max-width: 1199px) { .bb-topbar-text { display: none; } .bb-topbar-items a { gap: 0; } .bb-topbar-item + .bb-topbar-item::before { padding: 0 6px; } .bb-topbar-items a i { font-size: 14px; } .bb-topbar-inner { padding: 0 16px; } } /* ── Tablet (768–991px): hide brand labels too ───────────────── */ @media (max-width: 991px) { .bb-topbar-brand { display: none; } .bb-topbar-divider { margin: 8px 12px; } } /* ── Mobile (< 768px): two stacked rows, icons + dot labels ─── */ @media (max-width: 767px) { :root { --bb-topbar-h: var(--bb-topbar-h-mobile); } .navbar.navbar-default { top: var(--bb-topbar-h-mobile) !important; } .admin-bar .navbar.navbar-default { top: calc(46px + var(--bb-topbar-h-mobile)) !important; } body #wrapper { margin-top: var(--bb-topbar-h-mobile) !important; } #bb-contact-topbar { height: var(--bb-topbar-h-mobile) !important; } .bb-topbar-inner { flex-direction: column; padding: 0; max-width: 100%; height: var(--bb-topbar-h-mobile); gap: 0; } .bb-topbar-branch { width: 100%; padding: 0 16px; height: 36px; flex-shrink: 0; box-sizing: border-box; justify-content: space-between; gap: 0; } .bb-topbar-bb { border-bottom: 1px solid rgba(255, 255, 255, .07); } .bb-topbar-ff { justify-content: space-between; } /* Dot-label replaces the full brand name on mobile */ .bb-topbar-brand { display: flex !important; align-items: center; gap: 5px; font-size: 9px; letter-spacing: .05em; opacity: 1; white-space: nowrap; margin-right: 10px; flex-shrink: 0; } .bb-topbar-items { margin-left: auto; justify-content: flex-end; } .bb-topbar-bb .bb-topbar-brand::before, .bb-topbar-ff .bb-topbar-brand::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .bb-topbar-bb .bb-topbar-brand::before { background: #E9477A; } .bb-topbar-ff .bb-topbar-brand::before { background: #82372E; } .bb-topbar-divider { display: none; } /* Hide email on small mobile */ .bb-topbar-hide-sm { display: flex !important; } /* Keep the indicator dot only for Fantastic Flowers row. visibility:hidden (not display:none) preserves the dot's width so both brand labels start at the same horizontal position. */ .bb-topbar-bb .bb-topbar-brand::before { visibility: hidden; } .bb-topbar-item + .bb-topbar-item::before { padding: 0 5px; } }