diff --git a/src/styles/ecommerce-standalone.css b/src/styles/ecommerce-standalone.css index 043e658..bc80614 100644 --- a/src/styles/ecommerce-standalone.css +++ b/src/styles/ecommerce-standalone.css @@ -17433,3 +17433,48 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d margin-left: 0 !important; } } + +/* Hide the topbar banner background while keeping brand and account in place. */ +html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__topbar { + border-bottom: none !important; + background: transparent !important; + box-shadow: none !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} + +html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__topbar::after { + content: none !important; +} + +/* Redesign topbar inner elements for readability on transparent background. */ +html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__brand strong { + color: #10202c !important; + font-weight: 800 !important; + letter-spacing: -0.02em !important; +} + +html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__credits { + color: #3a5a6a !important; + font-weight: 600 !important; +} + +html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__account button { + gap: 8px !important; + min-height: 36px !important; + padding: 0 13px !important; + border: 1px solid rgba(30, 189, 219, 0.18) !important; + border-radius: 999px !important; + color: #10202c !important; + background: rgba(255, 255, 255, 0.78) !important; + box-shadow: 0 4px 14px rgba(16, 115, 204, 0.06) !important; + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; + transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important; +} + +html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecommerce-standalone__account button:hover { + background: rgba(255, 255, 255, 0.96) !important; + border-color: rgba(30, 189, 219, 0.34) !important; + box-shadow: 0 6px 20px rgba(16, 115, 204, 0.1) !important; +}