/* ============================================================ GeoBizz top system bar (theme + language) Colors use the theme's --si-* custom properties, which flip automatically between light and [data-bs-theme=dark] - so both modes stay readable. Bump ?v= in pluginsTop.blade.php when editing. ============================================================ */ /* ============================================================ Sticky header wrapper: system bar + navbar pinned together. The theme makes a flex container sized to the viewport, which breaks position:sticky for direct children (no travel room). So pinning is done the theme's own way: JS toggles .gbc-stuck (position:fixed) and compensates body padding. See topbar.js. ============================================================ */ .gbc-head-wrap { position: relative; /* explicit stacking: will-change alone puts the header at z:auto, so page content with .zindex-2 (hero text) painted OVER the open dropdown panels */ z-index: 1031; will-change: transform; } .gbc-head-wrap.gbc-stuck { position: fixed; top: 0; left: 0; width: 100%; z-index: 1031; /* no entrance animation on purpose: a pinned header must never risk rendering off-screen (throttled/background tabs freeze animations) */ box-shadow: 0 .275rem 1.25rem rgba(11, 15, 25, .05), 0 .25rem .5625rem rgba(11, 15, 25, .03); } .gbc-head-wrap .navbar { margin-bottom: 0; } .gbc-topbar { background: var(--si-body-bg, #fff); border-bottom: 1px solid var(--si-tertiary-bg, rgba(0,0,0,.08)); } .gbc-topbar-inner { display: flex; align-items: center; justify-content: flex-end; /* both controls aligned to the right */ gap: .4rem; min-height: 42px; padding-top: .2rem; padding-bottom: .2rem; } /* ----- left-side contact email ----- Two-class specificity: the theme styles plain anchors via [data-bs-theme=dark] a (0,1,1), which would beat a single class. */ .gbc-topbar .gbc-topbar-mail { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; /* !important: the theme paints mailto anchors black in dark mode via a nested rule; the link must follow --si-emphasis-color in both modes */ color: var(--si-emphasis-color, #1f2733) !important; font-weight: 600; font-size: .9rem; line-height: 1; padding: .35rem .65rem; border-radius: .65rem; transition: background-color .2s ease, color .2s ease; white-space: nowrap; } .gbc-topbar .gbc-topbar-mail:hover, .gbc-topbar .gbc-topbar-mail:focus { background: var(--si-tertiary-bg, rgba(0,0,0,.05)); color: var(--bs-primary, #2c65e3) !important; outline: none; } .gbc-topbar-mail .bx { font-size: 1.1rem; } /* spacer fills the middle so theme/language stay right-aligned */ .gbc-topbar-spacer { flex: 1 1 auto; } /* ----- buttons in the bar ----- */ .gbc-topbar-btn { display: inline-flex; align-items: center; gap: .45rem; background: transparent; border: 0; padding: .35rem .65rem; border-radius: .65rem; font-weight: 600; font-size: .9rem; color: var(--si-emphasis-color, #1f2733); line-height: 1; transition: background-color .2s ease; } .gbc-topbar-btn:hover, .gbc-topbar-btn:focus { background: var(--si-tertiary-bg, rgba(0,0,0,.05)); outline: none; } .gbc-topbar-btn .bx { font-size: 1.1rem; } .gbc-topbar-btn .bx-chevron-down, .gbc-topbar-btn .bx-chevron-up { transition: transform .25s ease; opacity: .65; } .gbc-topbar .dropdown.show .gbc-topbar-btn .bx-chevron-down, .gbc-topbar .dropdown.show .gbc-topbar-btn .bx-chevron-up { transform: rotate(180deg); } /* ----- flags ----- */ .gbc-lang-flag, .gbc-lang-item img { width: 22px; height: 15px; object-fit: cover; border-radius: 2.5px; box-shadow: 0 0 0 1px rgba(0,0,0,.09); flex: none; } /* ----- dropdown panels ----- */ .gbc-theme-menu, .gbc-lang-menu { --bs-dropdown-min-width: 200px; --bs-dropdown-border-color: var(--si-tertiary-bg, rgba(0,0,0,.08)); border-radius: 1rem; padding: .5rem; box-shadow: 0 .85rem 2.2rem rgba(23, 29, 44, .18); overflow: hidden; } /* Language grid: 2 stylish columns like the reference. IMPORTANT: grid applies ONLY while .show is present. Putting display:grid on the base class overrides Bootstrap's closed-state `display:none` (this file loads after theme.min.css) and the menu could never close. */ .gbc-lang-menu.show { --bs-dropdown-min-width: 330px; min-width: 330px; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem; } .gbc-theme-item, .gbc-lang-item { display: flex; align-items: center; gap: .6rem; width: 100%; border: 0; background: transparent; border-radius: .65rem; padding: .55rem .8rem; font-size: .92rem; color: var(--si-body-color, #565973); text-align: left; transition: background-color .15s ease, color .15s ease; } .gbc-theme-item .bx { font-size: 1.05rem; opacity: .8; } .gbc-theme-item:hover, .gbc-lang-item:hover { background: var(--si-tertiary-bg, rgba(0,0,0,.05)); color: var(--si-emphasis-color, #1f2733); } .gbc-theme-item.active, .gbc-lang-item.active { background: rgba(44, 101, 227, .12); color: var(--bs-primary, #2c65e3); font-weight: 700; } /* ----- dark mode: variables flip automatically; only the active tint differs ----- */ [data-bs-theme="dark"] .gbc-theme-item.active, [data-bs-theme="dark"] .gbc-lang-item.active { background: rgba(129, 140, 248, .22); color: #a5b4fc; } [data-bs-theme="dark"] .gbc-lang-flag, [data-bs-theme="dark"] .gbc-lang-item img { box-shadow: 0 0 0 1px rgba(255,255,255,.18); } /* ----- responsive ----- */ @media (max-width: 575.98px) { .gbc-topbar-inner { min-height: 38px; gap: .15rem; } .gbc-topbar-btn { font-size: .84rem; padding: .3rem .5rem; } /* narrow phones: icon only, address would overflow */ .gbc-topbar .gbc-topbar-mail { padding: .3rem .5rem; font-size: .84rem; } .gbc-topbar-mail-text { display: none; } .gbc-topbar .gbc-topbar-mail .bx { font-size: 1.15rem; } .gbc-theme-menu, .gbc-lang-menu { --bs-dropdown-min-width: 240px; } .gbc-lang-menu.show { min-width: 262px; } .gbc-lang-item { padding: .5rem .55rem; font-size: .86rem; gap: .45rem; } .gbc-lang-flag, .gbc-lang-item img { width: 19px; height: 13px; } } @media (max-width: 359.98px) { /* very narrow phones: single column, panel must fit beside the right edge */ .gbc-lang-menu.show { grid-template-columns: 1fr; min-width: 244px; } } /* Extra-large screens: a touch more presence */ @media (min-width: 1660px) { .gbc-topbar-inner { min-height: 48px; } .gbc-topbar-btn { font-size: .95rem; } }