/** * Header multi-function publish cluster + VIP CTA. * * @package AKSRT */ .navbar-but-cluster { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; } .navbar-but-cluster .navbar-but, .navbar-but-cluster .navbar-vip { display: inline-flex; align-items: center; min-width: 0; } /* CTA button base: flex icon + text, never stack or clip glyphs */ .navbar-but-cluster .navbar-cta, .navbar-but-cluster .btn-primary, .navbar-but-cluster .but.btn-primary, .navbar-but-cluster .navbar-newposts.but, .navbar-but-cluster a.but { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; padding: 6px 14px; border-radius: var(--navbar-cta-radius, 20px); background: var(--color-primary, #2f6df6); color: #fff; text-decoration: none; border: 0; font-size: 13px; line-height: 1.2; white-space: nowrap; box-sizing: border-box; vertical-align: middle; } .navbar-but-cluster .navbar-cta > i, .navbar-but-cluster a.but > i, .navbar-but-cluster .btn-primary > i { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; margin: 0 !important; /* kill mr3/ml10 utility drift on icons */ flex: 0 0 auto; line-height: 1; font-size: 1em; } .navbar-but-cluster .navbar-cta-text, .navbar-but-cluster .navbar-cta > span:not(.badge) { display: inline-block; line-height: 1.2; white-space: nowrap; } .navbar-but-cluster .payvip-icon.but, .navbar-but-cluster a.payvip-icon { background: linear-gradient(90deg, #ff6b6b, #f04494); color: #fff; padding: 6px 12px; border-radius: var(--navbar-cta-radius, 20px); text-decoration: none; font-size: 13px; } .navbar-but-cluster .ml10 { margin-left: 0; /* spacing handled by cluster gap */ } .navbar-but-cluster .theme-toggle-desktop, .navbar-but-cluster .toggle-theme { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 999px; flex: 0 0 auto; } .navbar-but-cluster .theme-toggle-desktop > i, .navbar-but-cluster .toggle-theme > i { margin: 0 !important; line-height: 1; } .newadd-btns.hover-show { position: relative; display: inline-flex; align-items: center; } .newadd-btns .drop-newadd, .newadd-btns .hover-show-con { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 148px; background: var(--main-bg-color, #fff); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 6px 0; z-index: 50; } .newadd-btns.hover-show:hover .drop-newadd, .newadd-btns.hover-show:hover .hover-show-con, .newadd-btns.hover-show:focus-within .drop-newadd { display: block; } .newadd-btns__item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; color: inherit; text-decoration: none; white-space: nowrap; } .newadd-btns__item > i { width: 1em; margin: 0; text-align: center; flex: 0 0 auto; } .newadd-btns__item:hover { background: var(--surface-2, rgba(0, 0, 0, 0.04)); color: var(--focus-color, var(--color-primary)); } /* Header VIP hover cards */ .navbar-vip.hover-show { position: relative; } .navbar-vip .sub-vip-card { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: min(420px, 90vw); padding: 10px; border-radius: 12px; background: var(--main-bg-color, #fff); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16); gap: 10px; flex-wrap: wrap; } .navbar-vip.hover-show:hover .sub-vip-card, .navbar-vip.hover-show:focus-within .sub-vip-card { display: flex; } /* float commerce */ .float-btn-shop-cart { position: relative; } .float-btn-shop-cart badge, .float-btn-shop-cart [cart-count] { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 10px; background: #e74c3c; color: #fff; font-size: 11px; line-height: 16px; text-align: center; } .float-btn-shop-cart badge:empty, .float-btn-shop-cart [cart-count=""] { display: none; } .float-btn.pay-vip { color: #f5a623; } @media (max-width: 768px) { .navbar-but-cluster .navbar-cta-text { /* keep text on tablet; hide only on very narrow if needed */ } } @media (max-width: 520px) { .navbar-but-cluster { gap: 6px; } .navbar-but-cluster .navbar-cta, .navbar-but-cluster a.but { padding: 6px 10px; font-size: 12px; } } /* Theme toggle: keep moon/sun icons centered, no double-glyph overlap */ .theme-toggle-desktop, .theme-toggle-mobile, .toggle-theme { position: relative; } .theme-toggle-desktop .theme-icon-moon, .theme-toggle-desktop .theme-icon-sun, .theme-toggle-mobile .theme-icon-moon, .theme-toggle-mobile .theme-icon-sun, .toggle-theme .theme-icon-moon, .toggle-theme .theme-icon-sun { margin: 0 !important; line-height: 1; width: 1em; text-align: center; }