/* Unified navbar: load in on every page so layout matches before i18n runs. */ html.i18n-pending body { visibility: hidden; } #navbar .max-w-7xl { max-width: none !important; padding-left: 14px !important; padding-right: 14px !important; } #navbar .max-w-7xl > div.flex.justify-between { display: grid; grid-template-columns: auto 1fr auto; align-items: center; width: 100%; min-height: 68px; height: auto; column-gap: 15px; box-sizing: border-box; } #navbar .max-w-7xl > div.flex > .flex.items-center.space-x-3 { grid-column: 1; justify-self: start; min-width: 0; } /* Desktop strip: fills middle column; items stay visually centered */ #navbar .max-w-7xl > div.flex > div[class*="md:flex"][class*="items-center"] { grid-column: 2; justify-self: center; width: min(920px, 60vw); max-width: 100%; min-width: 0; display: flex !important; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 11px; margin-left: 0; margin-right: 0; padding-left: 10px; padding-right: 10px; } /* Use gap only (Tailwind space-x-* would double spacing) */ #navbar .max-w-7xl > div.flex > div[class*="space-x-8"] > :not([hidden]) ~ :not([hidden]) { margin-left: 0 !important; margin-right: 0 !important; } @media (max-width: 767px) { #navbar .max-w-7xl > div.flex > div[class*="md:flex"][class*="items-center"] { display: none !important; } } #navbar .max-w-7xl > div.flex > div[class*="md:flex"] > a, #navbar .max-w-7xl > div.flex > div[class*="md:flex"] > button, #navbar .max-w-7xl > div.flex > div[class*="md:flex"] > div[id^="product-drop"] > span { white-space: nowrap; font-size: clamp(15px, 1.05vw, 19px); font-weight: 500; line-height: 1; display: inline-flex; align-items: center; } #navbar .max-w-7xl > div.flex > div[class*="md:flex"] > a[class*="bg-gradient"], #navbar .max-w-7xl > div.flex > div[class*="md:flex"] > button[class*="bg-gradient"] { font-size: clamp(14px, 0.95vw, 17px); padding: 11px 22px; border-radius: 10px; } #navbar .max-w-7xl > div.flex > div[class*="md:flex"] > a:has(.fa-home), #navbar .nav-desktop-menu > a.nav-home-icon-link { font-size: 1.15rem; margin-left: 0 !important; } /* First nav item (首页) shifts left for stronger centering feel */ #navbar .max-w-7xl > div.flex > div[class*="md:flex"] > a:first-of-type, #navbar .nav-desktop-menu > a.nav-main-first-link { margin-left: 0 !important; } /* Tablet: moderate spacing/offsets */ @media (min-width: 768px) and (max-width: 1279px) { #navbar .max-w-7xl > div.flex > div[class*="md:flex"][class*="items-center"] { width: min(820px, 63vw); justify-content: space-between; gap: 9px; margin-left: 0; margin-right: 0; padding-left: 8px; padding-right: 8px; } #navbar .max-w-7xl > div.flex > div[class*="md:flex"] > a:first-of-type, #navbar .nav-desktop-menu > a.nav-main-first-link { margin-left: 0 !important; } #navbar .max-w-7xl > div.flex > div[class*="md:flex"] > a:has(.fa-home), #navbar .nav-desktop-menu > a.nav-home-icon-link { margin-left: 0 !important; } } /* Desktop large: obvious separation */ @media (min-width: 1280px) { #navbar .max-w-7xl > div.flex > div[class*="md:flex"][class*="items-center"] { width: min(990px, 61vw); justify-content: space-between; gap: 13px; margin-left: 0; margin-right: 0; padding-left: 12px; padding-right: 12px; } #navbar .max-w-7xl > div.flex > div[class*="md:flex"] > a:first-of-type, #navbar .nav-desktop-menu > a.nav-main-first-link { margin-left: 0 !important; } #navbar .max-w-7xl > div.flex > div[class*="md:flex"] > a:has(.fa-home), #navbar .nav-desktop-menu > a.nav-home-icon-link { margin-left: 0 !important; } } /* Language switcher: pinned to the right (before mobile button) */ #navbar .nav-lang-switcher { grid-column: 3; justify-self: end; flex: 0 0 auto; margin-left: 8px; align-self: center; } @media (max-width: 768px) { html, body { overflow-x: hidden !important; max-width: 100%; } img, video, iframe, canvas, svg { max-width: 100% !important; height: auto !important; } p, h1, h2, h3, h4, h5, h6, a, span, li, td, th, label, button, input, select, textarea { word-break: break-word; overflow-wrap: anywhere; } section, header, footer, main, nav { max-width: 100%; } .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl { max-width: 100% !important; } .grid { grid-template-columns: 1fr !important; } .flex { flex-wrap: wrap; } [class*="gap-"] { row-gap: 1rem; } button, .btn, a[class*="px-"][class*="py-"], input, select, textarea { min-height: 40px; } #navbar .nav-lang-switcher { display: none !important; } #navbar .max-w-7xl > div.flex.justify-between { grid-template-columns: auto auto; column-gap: 12px; min-height: 60px; } #navbar .max-w-7xl > div.flex > div[class*="md:flex"], #navbar .max-w-7xl > div.flex > div[class*="md:hidden"]:not(#mobile-menu) { display: none !important; } #navbar #mobile-menu { display: block !important; } #navbar #mobile-menu a, #navbar #mobile-menu button { width: 100%; display: block; padding-top: 0.8rem; padding-bottom: 0.8rem; } .flex-col.sm\:flex-row, .flex-row { flex-direction: column !important; align-items: stretch !important; } .space-y-8 > :not([hidden]) ~ :not([hidden]), .space-y-6 > :not([hidden]) ~ :not([hidden]), .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; } .rounded-xl, .rounded-lg { border-radius: 1rem !important; } } /* Product dropdown: align under label, tighter rhythm */ #navbar #product-dropdown > div.absolute, #navbar #product_dropdown > div.absolute, #navbar [id^="product-drop"] > div.absolute { left: 0 !important; right: auto; transform: none !important; margin-top: 0.45rem; min-width: 11.5rem; width: max-content; max-width: min(88vw, 17.5rem); padding: 0.2rem 0; border-radius: 0.65rem; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); border: 1px solid rgba(0, 212, 255, 0.22) !important; background: rgba(30, 41, 59, 0.96) !important; backdrop-filter: blur(12px); } #navbar #product-dropdown > div.absolute > div, #navbar #product_dropdown > div.absolute > div, #navbar [id^="product-drop"] > div.absolute > div { padding-top: 0.15rem; padding-bottom: 0.15rem; } #navbar #product-dropdown > div.absolute a, #navbar #product_dropdown > div.absolute a, #navbar [id^="product-drop"] > div.absolute a { display: flex; align-items: center; padding: 0.5rem 0.52rem 0.5rem 0.62rem; font-size: 0.9rem; gap: 0.35rem; border-radius: 0.35rem; margin: 0.08rem 0.34rem; line-height: 1.25; }