/* ========================================================================== UAEPC Portal Header & Nav — single source of truth -------------------------------------------------------------------------- Loaded last in on pricelist / inquiry / sell / pallet-deals so it wins the cascade over any older per-page rule. The 4 portal pages now render the dark banner + nav identically, byte-for-byte. Selectors cover both the `.s-*` prefix used by pricelist/sell/pallet-deals AND the `.iq-*` prefix inquiry still uses — same rules, twice the names. ========================================================================== */ /* --- Dark header bar ------------------------------------------------------ */ .s-header, .iq-header { background: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 100%); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 12px rgba(0,0,0,0.10); position: static; top: auto; z-index: auto; } /* Pin line-height on EVERY header/nav element so none of them inherit a different body line-height between pages (sell/pallet body = 1.75, pricelist body = 1.6) — that 2px drift was making the buttons shift. */ .s-header, .iq-header, .portal-nav, .s-header *, .iq-header *, .portal-nav * { line-height: 1.2; } /* --- Logo --------------------------------------------------------------- */ .s-logo, .iq-logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; } .s-logo-mark, .iq-logo-mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #f5a623, #d97706); display: flex; align-items: center; justify-content: center; color: #0a0e1a; font-weight: 900; font-size: 16px; } .s-logo-text, .iq-logo-text { font-size: 16px; font-weight: 800; color: #fff; } .iq-logo-text small { display: none; } /* --- Header right group ------------------------------------------------- */ .s-header-right, .iq-header-right { display: flex; align-items: center; gap: 10px; } /* --- Lang chips --------------------------------------------------------- */ .s-langs, .iq-langs { display: flex; gap: 5px; padding: 4px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; } .s-langs a, .s-langs button, .iq-langs a { padding: 5px 10px; font-size: 11.5px; font-weight: 700; color: #9ca3af; text-decoration: none; border: 0; background: transparent; border-radius: 6px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; transition: all 0.15s; } .s-langs a.active, .s-langs button.active, .iq-langs a.active { background: rgba(245,166,35,0.15); color: #ffc966; } .s-langs a:hover:not(.active), .s-langs button:hover:not(.active), .iq-langs a:hover:not(.active) { color: #fff; background: rgba(255,255,255,0.05); } .s-langs img, .iq-langs img { width: 14px !important; height: 10px !important; vertical-align: middle; border-radius: 2px; } /* --- Home / Logout buttons --------------------------------------------- */ .s-back { color: #d1d5db; font-size: 13px; font-weight: 600; padding: 7px 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; } .s-back:hover { color: #f5a623; border-color: rgba(245,166,35,0.45); } .s-logout { color: #fecaca; font-size: 13px; font-weight: 700; padding: 7px 12px; border: 1px solid rgba(220,38,38,0.45); border-radius: 10px; background: rgba(220,38,38,0.12); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; } .s-logout:hover { background: linear-gradient(135deg, #dc2626, #991b1b); color: #fff; border-color: #7f1d1d; } /* --- Portal-nav strip --------------------------------------------------- */ .portal-nav { background: #0a0e1a; padding: 10px 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; border-bottom: 1px solid rgba(245,166,35,0.18); } .portal-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 9px; color: #cdd3df; font-size: 12.5px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: all 0.15s; white-space: nowrap; } .portal-nav a:hover { background: rgba(245,166,35,0.12); border-color: rgba(245,166,35,0.45); color: #ffc966; } .portal-nav a i { color: #ffc966; font-size: 12px; flex-shrink: 0; } .portal-nav a.active { background: linear-gradient(135deg, #f5a623, #d97706); border-color: #b45309; color: #0a0e1a; } .portal-nav a.active i { color: #0a0e1a; } /* --- Mobile ≤720px ------------------------------------------------------ */ @media (max-width: 720px) { .portal-nav { padding: 8px 10px; gap: 6px; } .portal-nav a { padding: 7px 11px; font-size: 11.5px; } .portal-nav a i { font-size: 10.5px; } } /* --- Header stacks ≤720px (matches sell/pallet's inline breakpoint so all four pages flip to the column layout at the exact same width) -------- */ @media (max-width: 720px) { .s-header, .iq-header { padding: 10px 12px; flex-direction: column; align-items: stretch; gap: 8px; } .s-logo-mark, .iq-logo-mark { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; } .s-logo-text, .iq-logo-text { font-size: 14px; } .s-header-right, .iq-header-right { width: 100%; gap: 8px; flex-wrap: nowrap; justify-content: center; } .s-langs a, .s-langs button, .iq-langs a { padding: 4px 7px; font-size: 11px; } .s-back, .s-logout { font-size: 11.5px; padding: 6px 10px; } /* Pricelist's body has padding:14px 12px; let the banner + nav escape it so they sit flush at the viewport edge like the other three pages. Scoped to body[data-portal="pricelist"] so it does NOT bleed onto sell/inquiry/pallet pages whose body has no padding (which used to overflow them by 24px). The escape MUST equal the body's current horizontal padding — at this width that's 12px. */ body[data-portal="pricelist"] > .s-header, body[data-portal="pricelist"] > .portal-nav { margin-left: -12px; margin-right: -12px; } body[data-portal="pricelist"] > .s-header { margin-top: -14px; } } /* Pricelist's body padding shrinks to 10px 8px at ≤640px, so the escape margins must shrink to match — otherwise the banner/nav overflow the viewport by 4px each side and the nav buttons land 4px off-centre vs the other three pages. */ @media (max-width: 640px) { body[data-portal="pricelist"] > .s-header, body[data-portal="pricelist"] > .portal-nav { margin-left: -8px; margin-right: -8px; } body[data-portal="pricelist"] > .s-header { margin-top: -10px; } } /* --- Mobile ≤480px ------------------------------------------------------ */ @media (max-width: 480px) { /* Portal-nav buttons stack full-width, one per row, above the hero. */ .portal-nav { display: flex; flex-direction: column; gap: 6px; padding: 8px; } .portal-nav a { width: 100%; justify-content: center; padding: 10px 12px; font-size: 12px; } .portal-nav a i { font-size: 12px; } .s-langs a, .s-langs button, .iq-langs a { padding: 4px 6px; font-size: 10.5px; } }