/* ============================================================================ Imagenomic — global chrome (header + mobile drawer + footer) 2026 refresh. Self-contained, isolated component. Prefix: imx_ ids: imx- Loaded LAST in . Does not modify or depend on any existing stylesheet. Theme: refined dark. Accent = brand cyan (#00aff0). Font = Montserrat (already loaded). ============================================================================ */ :root { /* --imx-hh is the header's OWN height. --imx-h is the offset pages should clear, i.e. header + promo bar. Every redesigned page already pads its hero with calc(var(--imx-h,84px) + N), so making --imx-h a sum accounts for the promo bar on all of them with zero page edits - and they spring back when it goes away. IMPORTANT: var() inside a custom property is substituted where that property is DECLARED, not where it is finally used. So --imx-h computed here freezes the :root value of --imx-promo-h (0px); setting --imx-promo-h on body alone would NOT feed back into it. That is why body.imx-has-promo re-declares BOTH (see the promotions block at the end of this file). Keep them in sync. */ --imx-hh: 84px; /* header height at top of page */ --imx-promo-h: 0px; /* promo bar height; 0 = no campaign */ --imx-h: calc(var(--imx-hh) + var(--imx-promo-h)); --imx-h-sm: 64px; /* header height after scroll */ --imx-max: 1300px; /* content max width */ --imx-bg: rgba(14,16,22,.94); --imx-bg-sm: rgba(11,13,18,.98); --imx-solid: #0e1016; --imx-surface: #171a22; --imx-surface-2: #1e222c; --imx-border: rgba(255,255,255,.10); --imx-border-2: rgba(255,255,255,.16); --imx-text: #eef0f4; --imx-text-2: #aab0bd; --imx-text-3: #808897; --imx-accent: #00aff0; --imx-accent-2: #33c4ff; --imx-accent-ink: #04121b; --imx-focus: #8fd3ff; --imx-ease: cubic-bezier(.4,0,.2,1); --imx-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } .imx_header *, .imx_drawer *, .imx_footer * { box-sizing: border-box; } /* ---- Skip link ---------------------------------------------------------- */ .imx_skip { position: fixed; top: 10px; left: 10px; z-index: 2000; background: var(--imx-accent); color: var(--imx-accent-ink); padding: 11px 18px; border-radius: 8px; font: 600 14px/1 var(--imx-font); text-decoration: none; transform: translateY(-160%); transition: transform .2s var(--imx-ease); } .imx_skip:focus { transform: none; outline: 2px solid #fff; outline-offset: 2px; } /* ====================== HEADER ======================================== */ .imx_header { position: fixed; top: var(--imx-promo-h); left: 0; right: 0; height: var(--imx-hh); z-index: 1000; background: var(--imx-bg); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); border-bottom: 1px solid var(--imx-border); font-family: var(--imx-font); transition: height .3s var(--imx-ease), background .3s var(--imx-ease), box-shadow .3s var(--imx-ease); } .imx_header--scrolled { height: var(--imx-h-sm); background: var(--imx-bg-sm); box-shadow: 0 10px 34px rgba(0,0,0,.40); } .imx_bar { max-width: var(--imx-max); height: 100%; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 22px; } /* Logo */ .imx_logo { display: flex; align-items: center; flex: 0 0 auto; } .imx_logo img { height: 38px; width: auto; display: block; transition: height .3s var(--imx-ease); } .imx_header--scrolled .imx_logo img { height: 32px; } /* Primary nav */ .imx_nav { display: flex; align-items: center; gap: 2px; } .imx_nav_item { position: relative; display: flex; align-items: center; height: 100%; } .imx_nav_link { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; color: var(--imx-text); font: 500 14px/1 var(--imx-font); letter-spacing: .005em; text-decoration: none; background: none; border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: color .2s, background .2s; } .imx_nav_link:hover, .imx_nav_link:focus-visible { color: #fff; background: rgba(255,255,255,.07); } .imx_nav_link.is-active { color: var(--imx-accent); } .imx_caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .65; transition: transform .25s var(--imx-ease); } .imx_nav_item:hover .imx_caret, .imx_nav_item:focus-within .imx_caret, .imx_nav_item.is-open .imx_caret { transform: translateY(1px) rotate(225deg); } /* Popovers (shared) */ .imx_pop { position: absolute; top: 100%; left: 0; margin-top: 6px; min-width: 236px; background: var(--imx-surface); border: 1px solid var(--imx-border-2); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.55); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s var(--imx-ease), transform .2s var(--imx-ease), visibility .2s; z-index: 1001; } .imx_pop::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } /* hover bridge */ .imx_nav_item:hover > .imx_pop, .imx_nav_item:focus-within > .imx_pop, .imx_nav_item.is-open > .imx_pop { opacity: 1; visibility: visible; transform: none; } /* Simple menu (Support / About) */ .imx_menu_link { display: block; padding: 10px 14px; border-radius: 9px; white-space: nowrap; color: var(--imx-text); font: 500 14px/1.2 var(--imx-font); text-decoration: none; transition: background .18s, color .18s; } .imx_menu_link:hover, .imx_menu_link:focus-visible { background: var(--imx-surface-2); color: #fff; } .imx_menu_ext { color: var(--imx-text-3); font-size: 11px; margin-left: 6px; vertical-align: 1px; } /* Mega menu (Products) — left-anchored under the Products item; inherits .imx_pop's left:0 + open/close transform, so it never runs off the left edge on wide viewports. */ .imx_mega { width: min(780px, calc(100vw - 40px)); padding: 20px; } .imx_mega_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 22px; } .imx_mega_head { font: 700 11px/1 var(--imx-font); letter-spacing: .14em; text-transform: uppercase; color: var(--imx-accent); padding: 6px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--imx-border); } .imx_mega_link { display: block; padding: 9px 12px; border-radius: 9px; text-decoration: none; transition: background .18s; } .imx_mega_link strong { display: block; color: var(--imx-text); font: 600 14px/1.2 var(--imx-font); } .imx_mega_link > span { display: block; color: var(--imx-text-3); font: 400 12px/1.3 var(--imx-font); margin-top: 3px; } .imx_mega_link:hover, .imx_mega_link:focus-visible { background: var(--imx-surface-2); } .imx_mega_link:hover strong { color: #fff; } .imx_mega_foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--imx-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .imx_mega_foot span { color: var(--imx-text-3); font: 400 13px/1.4 var(--imx-font); } .imx_mega_foot a { color: var(--imx-accent); font: 600 13px/1 var(--imx-font); text-decoration: none; white-space: nowrap; } .imx_mega_foot a:hover { color: var(--imx-accent-2); text-decoration: underline; } /* Right-side actions */ .imx_actions { margin-left: auto; display: flex; align-items: center; gap: 6px; } .imx_offers { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; color: var(--imx-accent); font: 600 13.5px/1 var(--imx-font); text-decoration: none; border-radius: 8px; white-space: nowrap; transition: background .2s; } .imx_offers:hover, .imx_offers:focus-visible { background: rgba(0,175,240,.12); } .imx_offers svg { width: 15px; height: 15px; fill: currentColor; } .imx_account { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px; color: var(--imx-text-2); font: 500 13.5px/1 var(--imx-font); text-decoration: none; border-radius: 8px; white-space: nowrap; transition: color .2s, background .2s; } .imx_account:hover, .imx_account:focus-visible { color: #fff; background: rgba(255,255,255,.06); } .imx_account svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; } .imx_cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; background: var(--imx-accent); color: var(--imx-accent-ink); font: 700 14px/1 var(--imx-font); letter-spacing: .005em; text-decoration: none; border: 0; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: background .2s, transform .12s var(--imx-ease), box-shadow .2s; } .imx_cta:hover, .imx_cta:focus-visible { background: var(--imx-accent-2); box-shadow: 0 8px 24px rgba(0,175,240,.30); } .imx_cta:active { transform: translateY(1px); } .imx_divider { width: 1px; height: 26px; background: var(--imx-border); margin: 0 4px; } /* Hamburger */ .imx_burger { display: none; margin-left: auto; width: 46px; height: 46px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 0; border-radius: 9px; cursor: pointer; color: var(--imx-text); } .imx_burger:hover { background: rgba(255,255,255,.07); } .imx_burger span { display: block; width: 23px; height: 2px; background: currentColor; border-radius: 2px; } /* Focus visibility (shared) */ .imx_header a:focus-visible, .imx_header button:focus-visible, .imx_drawer a:focus-visible, .imx_drawer button:focus-visible, .imx_footer a:focus-visible { outline: 2px solid var(--imx-focus); outline-offset: 2px; border-radius: 6px; } /* ® marks inside chrome */ .imx_header .reg, .imx_drawer .reg, .imx_footer .reg, .imx_header sup, .imx_drawer sup { display: inline-block; font-size: .62em; vertical-align: super; font-weight: 400; opacity: .75; margin: 0 0 0 1px; } /* ====================== MOBILE DRAWER ================================= */ .imx_scrim { position: fixed; inset: 0; z-index: 1090; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .3s var(--imx-ease), visibility .3s; } .imx_scrim.is-open { opacity: 1; visibility: visible; } .imx_drawer { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(88vw, 380px); z-index: 1100; background: var(--imx-solid); border-left: 1px solid var(--imx-border); display: flex; flex-direction: column; font-family: var(--imx-font); transform: translateX(100%); transition: transform .32s var(--imx-ease); box-shadow: -20px 0 60px rgba(0,0,0,.5); } .imx_drawer.is-open { transform: none; } .imx_drawer_head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 16px 20px; border-bottom: 1px solid var(--imx-border); } .imx_drawer_head img { height: 30px; width: auto; display: block; } .imx_close { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 9px; color: var(--imx-text); cursor: pointer; font-size: 26px; line-height: 1; } .imx_close:hover { background: rgba(255,255,255,.08); } .imx_drawer_cta { flex: 0 0 auto; padding: 16px 18px 6px; } .imx_drawer_cta .imx_cta { width: 100%; height: 50px; font-size: 15px; } .imx_drawer_scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 16px; } .imx_acc { border-bottom: 1px solid var(--imx-border); } .imx_dlink, .imx_acc_btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 20px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--imx-text); font: 600 15px/1.2 var(--imx-font); text-decoration: none; } .imx_dlink:hover, .imx_acc_btn:hover { background: rgba(255,255,255,.04); } .imx_dlink.is-active { color: var(--imx-accent); } .imx_acc_panel { max-height: 0; overflow: hidden; transition: max-height .3s var(--imx-ease); } .imx_acc.is-open .imx_acc_panel { max-height: 720px; } .imx_acc.is-open .imx_acc_btn .imx_caret { transform: translateY(1px) rotate(225deg); } .imx_acc_sub_head { padding: 12px 20px 4px; color: var(--imx-accent); font: 700 11px/1 var(--imx-font); letter-spacing: .13em; text-transform: uppercase; } .imx_acc_sublink { display: block; padding: 11px 20px 11px 30px; color: var(--imx-text-2); font: 500 14px/1.2 var(--imx-font); text-decoration: none; } .imx_acc_sublink:hover { color: #fff; background: var(--imx-surface); } .imx_drawer_foot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--imx-border); } .imx_drawer_foot .imx_account { padding: 8px 12px; border: 1px solid var(--imx-border); } .imx_drawer_foot .imx_offers { padding: 8px 12px; border: 1px solid rgba(0,175,240,.35); } /* body scroll lock while drawer open */ html.imx-lock, html.imx-lock body { overflow: hidden !important; } /* ====================== FOOTER ======================================== */ .imx_footer { background: var(--imx-solid); border-top: 1px solid var(--imx-border); font-family: var(--imx-font); } /* neutralise legacy global "footer ul / footer ul li" rules from site.css */ .imx_footer ul { margin: 0; padding: 0; width: auto; display: block; list-style: none; text-align: left; color: inherit; } .imx_footer li { margin: 0 0 11px; padding: 0; line-height: normal; text-transform: none; cursor: auto; } .imx_footer li:hover { text-decoration: none; } .imx_footer_inner { max-width: var(--imx-max); margin: 0 auto; padding: 58px 28px 34px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr 1.2fr; gap: 40px; } .imx_footer_brand { min-width: 0; } .imx_footer_brand img { height: 42px; width: auto; display: block; margin-bottom: 18px; } .imx_footer_blurb { color: var(--imx-text-3); font: 400 13.5px/1.75 var(--imx-font); max-width: 290px; margin: 0 0 20px; } .imx_social { display: flex; gap: 10px; } .imx_social a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--imx-border); border-radius: 10px; color: var(--imx-text-3); transition: .2s; } .imx_social a:hover { color: #fff; border-color: var(--imx-accent); background: rgba(0,175,240,.10); } .imx_social svg { width: 17px; height: 17px; } .imx_fcol { min-width: 0; } .imx_fcol h4 { color: #fff; font: 700 12px/1 var(--imx-font); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; } .imx_fcol a { color: var(--imx-text-2); font: 400 13.5px/1.4 var(--imx-font); text-decoration: none; transition: color .18s; } .imx_fcol a:hover { color: var(--imx-accent); } .imx_footer_bottom { border-top: 1px solid var(--imx-border); } .imx_footer_bottom_inner { max-width: var(--imx-max); margin: 0 auto; padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 14px 26px; flex-wrap: wrap; } .imx_copy { color: var(--imx-text-3); font: 400 12.5px/1.7 var(--imx-font); margin: 0; } .imx_legal { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .imx_legal a { color: var(--imx-text-3); font: 400 12.5px/1 var(--imx-font); text-decoration: none; } .imx_legal a:hover { color: #fff; text-decoration: underline; } /* ====================== RESPONSIVE ==================================== */ @media (max-width: 1200px) { .imx_nav_link { padding: 0 10px; font-size: 13.5px; } .imx_bar { gap: 14px; padding: 0 22px; } } @media (max-width: 1000px) { .imx_nav, .imx_actions { display: none; } .imx_burger { display: flex; } .imx_bar { gap: 12px; padding: 0 16px; } .imx_footer_inner { grid-template-columns: 1fr 1fr 1fr; } .imx_footer_brand { grid-column: 1 / -1; } } @media (max-width: 670px) { :root { --imx-hh: 68px; --imx-h-sm: 60px; } .imx_logo img { height: 32px; } .imx_footer_inner { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding: 44px 20px 26px; } .imx_footer_bottom_inner { flex-direction: column; align-items: flex-start; gap: 12px; } } @media (max-width: 400px) { .imx_footer_inner { grid-template-columns: 1fr; } .imx_drawer { width: 100vw; } } /* Respect reduced-motion */ @media (prefers-reduced-motion: reduce) { .imx_header, .imx_logo img, .imx_pop, .imx_mega, .imx_drawer, .imx_scrim, .imx_acc_panel, .imx_cta, .imx_caret, .imx_skip { transition: none !important; } } /* ============================================================================ Testimonials — shared 2026 component (matches the home page card design). Used as a standalone section on the product pages (outside their page-scope wrappers), so it is defensively reset + uses !important on visual props to survive the legacy global cascade (bare h2/p/blockquote/figure/img rules). ============================================================================ */ .imx_quotes_sec { background: #f4f7f9; border-top: 1px solid #e5e8ec; border-bottom: 1px solid #e5e8ec; padding: 72px 20px; text-align: left; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } .imx_quotes_sec, .imx_quotes_sec * { box-sizing: border-box; } .imx_quotes_sec h2, .imx_quotes_sec p, .imx_quotes_sec figure, .imx_quotes_sec blockquote, .imx_quotes_sec figcaption { margin: 0; padding: 0; } .imx_quotes_sec img { max-width: 100%; } .imx_quotes_head { text-align: center; max-width: 720px; margin: 0 auto 40px; } .imx_quotes_eyebrow { display: block; font: 700 12px/1 'Montserrat', sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--imx-accent, #00aff0) !important; margin: 0 0 14px !important; } .imx_quotes_head h2 { font: 800 clamp(24px, 3vw, 36px)/1.12 'Montserrat', sans-serif !important; letter-spacing: -.01em; color: #14161c !important; text-transform: none !important; } .imx_quotes_sub { color: #565e6b !important; font-size: 16px !important; line-height: 1.6 !important; margin: 12px auto 0 !important; max-width: 60ch; } .imx_quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; max-width: 1100px; margin: 0 auto; } /* NOTE: the defensive reset above matches `.imx_quotes_sec figure` / `figcaption` (specificity 0,1,1), which would beat a bare `.imx_quote` / `.imx_quote_by` (0,1,0) and zero the card padding + caption gap. Keep these two selectors two-class (0,2,0) so the component's own spacing wins. */ .imx_quotes_sec .imx_quote { background: #fff; border: 1px solid #e5e8ec; border-radius: 16px; padding: 28px; box-shadow: 0 1px 2px rgba(16,18,24,.05), 0 10px 30px rgba(16,18,24,.07); display: flex; flex-direction: column; } .imx_quote_mk { color: var(--imx-accent, #00aff0); margin-bottom: 6px; line-height: 0; } .imx_quote_mk svg { width: 30px; height: 30px; display: block; } .imx_quote_tx { color: #14161c !important; font: 500 15px/1.72 'Montserrat', sans-serif !important; border: 0 !important; quotes: none; } .imx_quote_tx::before, .imx_quote_tx::after { content: none !important; } .imx_quotes_sec .imx_quote_by { margin-top: 22px; display: flex; align-items: center; gap: 13px; } .imx_quote_by img { width: 48px !important; height: 48px !important; min-width: 48px; border-radius: 50%; object-fit: cover; flex: none; background: #f4f7f9; } .imx_quote_by b { display: block; font-size: 14px !important; color: #14161c !important; font-weight: 700 !important; line-height: 1.2 !important; } .imx_quote_by span { display: block; font-size: 12.5px !important; color: #565e6b !important; } .imx_quote_by span > b + span, .imx_quote_by span span { margin-top: 2px; } @media (max-width: 1000px) { .imx_quotes { grid-template-columns: 1fr; max-width: 640px; } .imx_quotes_sec { padding: 52px 20px; } } /* ============================================================================ Cookie notice — first-visit row. Replaces the third-party cookieinfo script (js/cooki.min.js), which injected an inline-styled bar predating this chrome. Injected by site-chrome.js; z-index sits above the header (1000) but below the mobile drawer scrim (1090) so an open drawer covers it. ============================================================================ */ .imx_cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 28px; padding: 16px 24px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--imx-bg-sm, rgba(11,13,18,.98)); border-top: 1px solid var(--imx-border, rgba(255,255,255,.10)); box-shadow: 0 -10px 34px rgba(0,0,0,.30); font: 500 14px/1.55 var(--imx-font); color: var(--imx-text-2, #aab0bd); transition: transform .32s var(--imx-ease, cubic-bezier(.4,0,.2,1)), opacity .32s var(--imx-ease, cubic-bezier(.4,0,.2,1)); } .imx_cookie, .imx_cookie * { box-sizing: border-box; } @supports (backdrop-filter: blur(10px)) { .imx_cookie { backdrop-filter: blur(10px); } } /* The notice is visible the moment it is inserted — deliberately NOT revealed by a transition, so it can never be left off-screen if frames are paused (hidden tab, reduced-motion, throttling). Only the dismissal animates, and site-chrome.js removes the node on a timer whether or not that animation runs. */ .imx_cookie--out { transform: translateY(100%); opacity: 0; } .imx_cookie .imx_cookie_tx { margin: 0 !important; padding: 0; max-width: 82ch; font: 500 14px/1.55 var(--imx-font); color: var(--imx-text-2, #aab0bd); } .imx_cookie .imx_cookie_tx a { color: var(--imx-accent, #00aff0) !important; font-weight: 600; text-decoration: none; } .imx_cookie .imx_cookie_tx a:hover { text-decoration: underline; } .imx_cookie .imx_cookie_tx a:focus-visible { outline: 2px solid var(--imx-focus, #8fd3ff); outline-offset: 3px; border-radius: 3px; } .imx_cookie_btn { flex: 0 0 auto; appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0; border: 0; border-radius: 9px; padding: 12px 26px; background: var(--imx-accent, #00aff0); color: var(--imx-accent-ink, #04121b); font: 700 14px/1 var(--imx-font); transition: background .18s var(--imx-ease), transform .18s var(--imx-ease); } .imx_cookie_btn:hover { background: var(--imx-accent-2, #33c4ff); } .imx_cookie_btn:active { transform: translateY(1px); } .imx_cookie_btn:focus-visible { outline: 3px solid var(--imx-focus, #8fd3ff); outline-offset: 3px; } @media (max-width: 670px) { .imx_cookie { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; padding: 16px 18px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .imx_cookie .imx_cookie_tx { font-size: 13.5px; } .imx_cookie_btn { width: 100%; padding: 13px 20px; } } @media (prefers-reduced-motion: reduce) { .imx_cookie, .imx_cookie_btn { transition: none; } } /* ============================================================================ PROMOTIONS (2026) Three surfaces driven by one campaign record in coupons.json, resolved by Infrastructure/PromotionService and rendered by Views/Shared/_ImxPromoBar.cshtml and _ImxPromoBand.cshtml. Behaviour: the 4th IIFE in js/site-chrome.js. `body.imx-has-promo` is set by _Layout when a campaign is live. It only changes --imx-promo-h; every page's existing calc(var(--imx-h) + N) hero padding then clears the bar on its own. When no campaign is live nothing here applies and the chrome is byte-for-byte what it was. Layering (all inside .wrapper_inner's stacking context, same as the cookie bar): header 1000 < promo bar 1005 < cookie 1080 < scrim 1090 < drawer 1100. The bar is top-fixed and the cookie bar bottom-fixed, so they never overlap. ============================================================================ */ /* Both tokens must be declared together: --imx-h re-substitutes var(--imx-promo-h) here, which is what makes every page's calc(var(--imx-h) + N) hero padding clear the bar. Declaring only --imx-promo-h leaves --imx-h frozen at its :root value. */ body.imx-has-promo { --imx-promo-h: 40px; --imx-h: calc(var(--imx-hh) + 40px); } .imx_vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Announcement bar --------------------------------------------------- */ .imx_promo { position: fixed; top: 0; left: 0; right: 0; height: var(--imx-promo-h); z-index: 1005; display: flex; align-items: center; justify-content: center; padding: 0 46px 0 16px; overflow: hidden; font-family: var(--imx-font); border-bottom: 1px solid rgba(255,255,255,.10); transition: transform .3s var(--imx-ease), opacity .3s var(--imx-ease); } .imx_promo, .imx_promo * { box-sizing: border-box; } .imx_promo--out { transform: translateY(-100%); opacity: 0; } /* themes - a deep ink base lit from above, so the bar reads as a designed band rather than a browser notification, plus a hairline accent on the bottom edge. */ .imx_promo--dark { background: radial-gradient(720px 130px at 50% -46px, rgba(0,175,240,.34), transparent 72%), linear-gradient(90deg, #090b10 0%, #111a25 50%, #090b10 100%); color: var(--imx-text); } .imx_promo--cyan { background: linear-gradient(90deg, #0086b8 0%, #14b8f4 50%, #0086b8 100%); color: #04121b; } .imx_promo--warm { background: linear-gradient(90deg, #59280a 0%, #c2600f 50%, #59280a 100%); color: #fff6ee; } .imx_promo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,175,240,.6), transparent); } .imx_promo--cyan::after, .imx_promo--warm::after { background: rgba(0,0,0,.20); } /* Slow one-pass sheen - just enough to catch the eye once, not a blinking banner. */ .imx_promo--dark::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 220px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.075), transparent); animation: imx_promo_sheen 9s var(--imx-ease) infinite; } @keyframes imx_promo_sheen { 0% { transform: translateX(-260px); } 50%, 100% { transform: translateX(2400px); } } /* The whole bar is ONE link (the dismiss button sits outside it), so it stays fully tappable at 360px where the CTA pill is hidden, and screen-reader users get one link + one button instead of a pile of fragments. */ .imx_promo_in { display: flex; align-items: center; gap: 8px 18px; max-width: var(--imx-max); width: 100%; height: 100%; justify-content: center; white-space: nowrap; text-decoration: none !important; color: inherit !important; } .imx_promo_in:hover .imx_promo_cta { background: var(--imx-accent-2); } .imx_promo--cyan .imx_promo_in:hover .imx_promo_cta, .imx_promo--warm .imx_promo_in:hover .imx_promo_cta { background: #fff; } /* Leading discount chip: the number is the message, so it gets the emphasis. */ .imx_promo_pct { flex: 0 0 auto; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; font: 900 12px/1 var(--imx-font); letter-spacing: .03em; background: var(--imx-accent); color: var(--imx-accent-ink); } .imx_promo--cyan .imx_promo_pct, .imx_promo--warm .imx_promo_pct { background: rgba(0,0,0,.26); color: #fff; } .imx_promo_tx { font: 600 13.5px/1 var(--imx-font); letter-spacing: .01em; } .imx_promo_min { display: none; } .imx_promo_code { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border: 1px dashed rgba(255,255,255,.30); border-radius: 6px; font: 600 11.5px/1 var(--imx-font); letter-spacing: .02em; opacity: .9; } .imx_promo--cyan .imx_promo_code, .imx_promo--warm .imx_promo_code { border-color: rgba(0,0,0,.30); } .imx_promo_code b { font-weight: 800; letter-spacing: .07em; } .imx_promo_time { font: 600 12px/1 var(--imx-font); letter-spacing: .03em; opacity: .78; font-variant-numeric: tabular-nums; } .imx_promo_cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 27px; padding: 0 15px; border-radius: 999px; font: 800 12.5px/1 var(--imx-font); letter-spacing: .02em; transition: background .2s var(--imx-ease), color .2s var(--imx-ease); } .imx_promo--dark .imx_promo_cta { background: var(--imx-accent); color: #04121b; } .imx_promo--cyan .imx_promo_cta, .imx_promo--warm .imx_promo_cta { background: rgba(255,255,255,.94); color: #10161c; } .imx_promo_cta::after { content: "\2192"; font-weight: 700; transition: transform .2s var(--imx-ease); } .imx_promo_in:hover .imx_promo_cta::after { transform: translateX(3px); } .imx_promo_x { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); appearance: none; -webkit-appearance: none; background: transparent; border: 0; cursor: pointer; color: inherit; opacity: .62; width: 34px; height: 34px; border-radius: 8px; padding: 0; font: 400 21px/1 var(--imx-font); transition: opacity .2s var(--imx-ease), background .2s var(--imx-ease); } .imx_promo_x:hover { opacity: 1; background: rgba(255,255,255,.10); } .imx_promo--cyan .imx_promo_x:hover, .imx_promo--warm .imx_promo_x:hover { background: rgba(0,0,0,.12); } .imx_promo_in:focus-visible, .imx_promo_x:focus-visible { outline: 2px solid var(--imx-focus); outline-offset: -3px; border-radius: 6px; } .imx_promo--cyan .imx_promo_in:focus-visible, .imx_promo--cyan .imx_promo_x:focus-visible, .imx_promo--warm .imx_promo_in:focus-visible, .imx_promo--warm .imx_promo_x:focus-visible { outline-color: #04121b; } /* ---- Offer pill (hero / product pages) ---------------------------------- */ /* Rendered outside any page scope, so visual props are defensive (!important). */ .imx_ppill { display: inline-flex !important; align-items: center; gap: 9px; height: 30px; padding: 0 14px 0 12px; margin: 0 0 14px !important; border-radius: 999px; border: 1px solid rgba(0,175,240,.45) !important; background: linear-gradient(90deg, rgba(0,175,240,.22), rgba(0,175,240,.07)) !important; box-shadow: 0 0 0 4px rgba(0,175,240,.055), 0 10px 26px rgba(0,110,160,.20) !important; font: 800 12px/1 var(--imx-font) !important; letter-spacing: .1em !important; text-transform: uppercase; color: #bfe9ff !important; text-decoration: none !important; white-space: nowrap; transition: border-color .2s var(--imx-ease), background .2s var(--imx-ease); } .imx_ppill:hover { border-color: rgba(0,175,240,.75) !important; } .imx_ppill_dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--imx-accent, #00aff0); box-shadow: 0 0 0 3px rgba(0,175,240,.24); animation: imx_ppill_pulse 2.6s var(--imx-ease) infinite; } @keyframes imx_ppill_pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(0,175,240,.24); } 50% { box-shadow: 0 0 0 7px rgba(0,175,240,.04); } } .imx_ppill_sep { opacity: .42; font-weight: 600; letter-spacing: .04em; } /* ---- Promo band (flagship campaigns) ------------------------------------ */ /* GRAPHIC, not photographic - on purpose. The band sits between the home hero and the hmx_ product bands (three more full-bleed photographs). A fourth photo there just muddied the page and made the promo read as one more content section. A saturated accent band gives the page rhythm instead - dark photo -> vivid offer -> light section - and makes the promo unmistakably an offer. It also removes the artwork dependency completely, which is the whole point of retiring the old baked-text slider banners. An `image` is still honoured, but only as a low-opacity TEXTURE behind the type, never as a subject to look at, so it can never compete with the hero again. */ .imx_pband { position: relative; isolation: isolate; overflow: hidden; padding: 74px 24px; font-family: var(--imx-font); border-top: 1px solid rgba(255,255,255,.10); } .imx_pband, .imx_pband * { box-sizing: border-box; } .imx_pband h2, .imx_pband p { margin: 0; padding: 0; } /* Optional texture. Deliberately faint - see the note above. */ .imx_pband_tex { position: absolute; inset: 0; z-index: 0; opacity: .12; background-size: cover; background-position: center; } /* Fine diagonal weave so a flat gradient still has surface. */ .imx_pband::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px); } /* ---- themes ------------------------------------------------------------- */ /* cyan: the flagship look. Ink-on-accent, which is the same pairing the design system already uses for primary buttons (--imx-accent-ink on --imx-accent). */ .imx_pband--cyan { background: radial-gradient(720px 420px at 86% -14%, rgba(255,255,255,.36), transparent 62%), linear-gradient(112deg, #0080b6 0%, #00a4e4 46%, #37c7ff 100%); --pb-ink: #04121b; --pb-ink-2: rgba(4,18,27,.84); --pb-ink-3: rgba(4,18,27,.62); --pb-line: rgba(4,18,27,.22); --pb-cell: rgba(4,18,27,.10); --pb-cell-line: rgba(4,18,27,.16); --pb-btn-bg: #04121b; --pb-btn-tx: #eaf7ff; --pb-btn-bg-h: #0b2130; --pb-plaque: #ffffff; --pb-plaque-shadow: 0 18px 44px rgba(0,52,80,.26); --pb-num: #0084bc; --pb-num-2: #5c7383; } /* warm: for autumn / Black Friday style campaigns. */ .imx_pband--warm { background: radial-gradient(720px 420px at 86% -14%, rgba(255,225,190,.34), transparent 62%), linear-gradient(112deg, #8a3c08 0%, #d1690f 48%, #f0932f 100%); --pb-ink: #200d02; --pb-ink-2: rgba(32,13,2,.86); --pb-ink-3: rgba(32,13,2,.64); --pb-line: rgba(32,13,2,.24); --pb-cell: rgba(32,13,2,.10); --pb-cell-line: rgba(32,13,2,.17); --pb-btn-bg: #200d02; --pb-btn-tx: #fff4e8; --pb-btn-bg-h: #35180a; --pb-plaque: #fffaf4; --pb-plaque-shadow: 0 18px 44px rgba(70,26,0,.28); --pb-num: #b8560c; --pb-num-2: #8a6a52; } /* dark: the restrained option, for when a loud band is not wanted. */ .imx_pband--dark { background: radial-gradient(820px 460px at 84% -12%, rgba(0,175,240,.34), transparent 62%), linear-gradient(140deg, #0e1822 0%, #090b10 72%); --pb-ink: #eef0f4; --pb-ink-2: #aab0bd; --pb-ink-3: #808897; --pb-line: rgba(255,255,255,.16); --pb-cell: rgba(255,255,255,.07); --pb-cell-line: rgba(255,255,255,.13); --pb-btn-bg: var(--imx-accent); --pb-btn-tx: #04121b; --pb-btn-bg-h: var(--imx-accent-2); /* On the dark theme the plaque is a glass panel rather than a white card. */ --pb-plaque: rgba(255,255,255,.06); --pb-plaque-shadow: inset 0 1px 0 rgba(255,255,255,.09); --pb-num: #ffffff; --pb-num-2: #8f99a8; } .imx_pband--dark::before { background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 1px, transparent 1px 9px); } .imx_pband--dark .imx_pband_fig { border: 1px solid rgba(255,255,255,.13); } /* ---- layout ------------------------------------------------------------- */ .imx_pband_in { position: relative; z-index: 2; max-width: var(--imx-max); margin: 0 auto; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 0 44px; align-items: center; color: var(--pb-ink); } /* The discount sits on a white plaque. On a bright accent band every accessible text colour is dark ink (white type fails contrast on the light end of the gradient), so the focal point cannot be made from colour alone - the plaque is what gives the number its own surface and makes it the first thing seen. */ .imx_pband_fig { text-align: center; padding: 28px 34px 26px; border-radius: 18px; background: var(--pb-plaque); box-shadow: var(--pb-plaque-shadow); } .imx_pband_num { display: block; color: var(--pb-num); font: 900 clamp(56px,6.6vw,96px)/.82 var(--imx-font); letter-spacing: -.052em; } .imx_pband_num i { font-style: normal; font-size: .40em; letter-spacing: 0; vertical-align: .62em; } .imx_pband_off { display: block; margin: 12px auto 0; /* px, not ch: at 10.5px a `ch` is ~6px, so 11ch (~68px) is narrower than the tracked word "EVERYTHING" (~91px) and it overflowed the plaque instead of wrapping. */ max-width: 112px; font: 800 10.5px/1.5 var(--imx-font); letter-spacing: .2em; text-transform: uppercase; color: var(--pb-num-2); } .imx_pband_badge { display: inline-flex; align-items: center; height: 26px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--pb-line); background: rgba(255,255,255,.20); color: var(--pb-ink); font: 800 11px/1 var(--imx-font); letter-spacing: .15em; text-transform: uppercase; } .imx_pband--dark .imx_pband_badge { background: rgba(0,175,240,.14); color: #bfe9ff; border-color: rgba(0,175,240,.42); } .imx_pband_h { font: 800 clamp(25px,2.6vw,37px)/1.1 var(--imx-font) !important; letter-spacing: -.02em; color: var(--pb-ink) !important; text-transform: none !important; margin: 14px 0 0 !important; } .imx_pband_sub { color: var(--pb-ink-2) !important; font-size: 15.5px; line-height: 1.62 !important; margin: 11px 0 0 !important; max-width: 52ch; } /* Segmented countdown - boxed digits read as a clock at a glance. */ .imx_pclock { display: flex; gap: 8px; margin-top: 20px; } .imx_pclock_u { min-width: 64px; padding: 9px 9px 8px; text-align: center; border-radius: 10px; background: var(--pb-cell); border: 1px solid var(--pb-cell-line); } .imx_pclock_u b { display: block; font: 800 22px/1 var(--imx-font); color: var(--pb-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .imx_pclock_u s { display: block; margin-top: 4px; text-decoration: none; font: 700 9px/1 var(--imx-font); letter-spacing: .13em; text-transform: uppercase; color: var(--pb-ink-3); } .imx_pband_deadline { display: block; margin-top: 16px; font: 700 12.5px/1 var(--imx-font); color: var(--pb-ink-3); } .imx_pband_act { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 214px; } .imx_pband_code { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px; border: 1px dashed var(--pb-line); border-radius: 9px; font: 600 12.5px/1 var(--imx-font); color: var(--pb-ink-2); } .imx_pband_code b { color: var(--pb-ink); font-weight: 800; letter-spacing: .09em; font-size: 14px; } .imx_pband_btn, .imx_pband_btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 24px; border-radius: 9px; font: 700 14.5px/1 var(--imx-font) !important; text-decoration: none !important; transition: background .2s var(--imx-ease), border-color .2s var(--imx-ease), box-shadow .2s var(--imx-ease), transform .12s var(--imx-ease); } /* Primary is INK on the accent band - the inverse of the usual cyan button, which is what makes it read as the strongest thing on the panel. */ .imx_pband_btn { background: var(--pb-btn-bg); color: var(--pb-btn-tx) !important; } .imx_pband_btn:hover { background: var(--pb-btn-bg-h); box-shadow: 0 12px 28px rgba(0,0,0,.24); } .imx_pband_btn:active { transform: translateY(1px); } .imx_pband_btn::after { content: "\2192"; font-weight: 700; transition: transform .2s var(--imx-ease); } .imx_pband_btn:hover::after { transform: translateX(3px); } .imx_pband_btn2 { background: transparent; color: var(--pb-ink) !important; border: 1px solid var(--pb-line); } .imx_pband_btn2:hover { background: rgba(255,255,255,.22); } .imx_pband--dark .imx_pband_btn2:hover { background: rgba(255,255,255,.09); } .imx_pband_btn:focus-visible, .imx_pband_btn2:focus-visible { outline: 2px solid var(--pb-ink); outline-offset: 3px; } .imx_pband--dark .imx_pband_btn:focus-visible, .imx_pband--dark .imx_pband_btn2:focus-visible { outline-color: var(--imx-focus); } @media (max-width: 1000px) { /* Below 1000px the legacy responsive.min.css forces `header { position: relative !important; top: 0 !important }`, so the site header is IN FLOW here, not fixed - it has been that way since long before this component. A fixed bar would therefore paint on top of it. Put the bar in flow too so it simply stacks above the header (position:relative, not static, so the dismiss button still anchors to the bar rather than to .wrapper_inner), and take it back out of --imx-h: an in-flow bar already occupies its own space, so pages must not pad for it as well. Side benefit: on phones the bar scrolls away instead of permanently eating vertical space. */ .imx_promo { position: relative; } body.imx-has-promo { --imx-h: var(--imx-hh); } .imx_promo_in { gap: 6px 14px; } .imx_promo_code { display: none; } .imx_pband { padding: 52px 20px; } /* Plaque and copy stack; the plaque goes wide and lays the number out horizontally so it does not eat a third of a tablet screen in height. */ .imx_pband_in { grid-template-columns: 1fr; gap: 26px 0; } .imx_pband_fig { display: flex; align-items: center; justify-content: flex-start; gap: 22px; text-align: left; padding: 18px 26px; justify-self: start; } .imx_pband_num { font-size: clamp(50px,11vw,72px); } .imx_pband_off { margin: 0; } /* Actions become a row under the copy rather than a right-hand column. */ .imx_pband_act { flex-direction: row; flex-wrap: wrap; align-items: center; min-width: 0; gap: 12px; } .imx_pband_act .imx_pband_btn, .imx_pband_act .imx_pband_btn2 { flex: 0 0 auto; } } @media (max-width: 670px) { /* Height only - the 1000px block above already reset --imx-h, and the bar is in flow. */ body.imx-has-promo { --imx-promo-h: 34px; } .imx_promo { padding: 0 40px 0 12px; } .imx_promo_tx { font-size: 12.5px; } .imx_promo_full { display: none; } .imx_promo_min { display: inline; } /* The discount chip stays - on a phone it is the most valuable element in the bar. The countdown and code chip go; both are repeated on the landing page. */ .imx_promo_time { display: none; } .imx_promo_pct { font-size: 11px; padding: 0 8px; } .imx_pband { padding: 36px 16px 40px; } .imx_pclock { gap: 6px; } .imx_pclock_u { min-width: 0; flex: 1 1 0; padding: 8px 4px 6px; } .imx_pclock_u b { font-size: 18px; } .imx_pclock_u s { font-size: 8.5px; letter-spacing: .08em; } .imx_pband_act { flex-direction: column; align-items: stretch; gap: 10px; } .imx_pband_act .imx_pband_btn, .imx_pband_act .imx_pband_btn2 { width: 100%; } } @media (max-width: 400px) { /* Keep the pill as an arrow only: hiding it entirely leaves the bar looking like static text, when the whole thing is actually a link. */ .imx_promo_cta { padding: 0 9px; font-size: 0; } .imx_promo_cta::after { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .imx_promo, .imx_promo_cta, .imx_promo_cta::after, .imx_promo_x, .imx_ppill, .imx_pband_btn, .imx_pband_btn2 { transition: none; } .imx_promo--dark::before, .imx_ppill_dot { animation: none; } }