/* * Header promo strip — visibility, layout and per-brand colour. * * ⚠ Pairs with Trafalgar_Core::html/head/strip-state.phtml, which stamps * `tlg-strip-off` on when the visitor has already dismissed the current * copy. The strip itself renders VISIBLE in the markup, so the rule below is * the only thing that ever hides it, and it has applied by the time the first * frame paints. * * ⚠ A PLAIN CSS FILE, NOT TAILWIND UTILITIES, deliberately and for two reasons. * `tlg-strip-off` lives on and is written by JavaScript, so Tailwind's * content scanner would never see it and would purge it. And this file is * shared by four themes whose Tailwind builds each scan only their own * directories — a module template written in utility classes would come out * unstyled in whichever theme forgot its @source line. Everything structural * therefore lives here; only the COLOURS reach out to per-theme tokens. * * ⚠ It must stay in a RENDER-BLOCKING stylesheet. Deferred or injected later * and the strip paints first, which restores the 28px layout shift this exists * to remove (measured 0.1879 on production, 1 Sep 2026). */ :root { /* ⚠ THE BAR'S HEIGHT IS FIXED HERE AND NEVER DERIVED FROM ITS CONTENT. Every slide is absolutely positioned, so no message — however long, in any language, at any breakpoint — can change this number. That is the entire CLS guarantee; making this `auto` silently gives the 28px shift back to every visitor on every page load. */ --tlg-strip-h: 28px; } .lux-msg-strip { position: relative; height: var(--tlg-strip-h); width: 100%; overflow: hidden; } .tlg-strip-off .lux-msg-strip { display: none; } /* ---- Per-brand colour ------------------------------------------------- Both token pairs already exist in their themes, so no new design tokens are introduced: luxury_base/aigner/itsluxury/options define --color-secondary (It's Luxury #2f211d, Options #c0c1ce), and Gait defines --color-action (#0071e3) + --color-action-fg (#fff), which is exactly the blue in the Apple partner reference this strip is modelled on. */ .lux-msg-strip--luxury { background: var(--color-secondary); color: var(--color-on-secondary); } .lux-msg-strip--gait { background: var(--color-action); color: var(--color-action-fg); } /* ---- Slides ------------------------------------------------------------ */ .lux-msg-strip__slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.375rem; /* Room for the arrows / dismiss control at either edge. */ padding-inline: 2.25rem; font-family: var(--font-display, inherit); font-size: 12px; line-height: normal; text-align: center; opacity: 0; transform: translateX(100%); transition: transform 0.5s ease, opacity 0.5s ease; } /* * ⚠ THIS RULE IS WHAT MAKES THE FIRST MESSAGE VISIBLE BEFORE ALPINE BOOTS. * The :style binding that drives the rotation only applies once Alpine has * initialised; until then CSS alone must put slide one on screen, or the strip * paints empty and fills in late — which is a flash of blank colour rather than * a layout shift, but is just as visible. Alpine's first computed style for * slide 0 is identical to this, so nothing moves when it takes over. */ .lux-msg-strip__slide:first-child { opacity: 1; transform: none; } .lux-msg-strip__text { /* Long copy is CLIPPED, never wrapped — wrapping is what would change the bar's height. The admin field comment tells merchants ~60 characters. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* ⚠ min-width:0 IS WHAT MAKES THE ELLIPSIS WORK, AND IT IS NOT OPTIONAL. A flex item defaults to min-width:auto, i.e. it refuses to shrink below its content. Inside a justify-content:center row that means an over-long message overflows BOTH edges and is chopped mid-word at the start ("d in 2 hours. Shop now…") instead of truncating cleanly at the end. Seen on It's Luxury Kuwait at 390px during the first visual pass. */ min-width: 0; max-width: 100%; } /* * Base link = INLINE, so a {link}...{/link} anchor sits inside the sentence and * wraps/truncates with it. ⚠ Not inline-flex: a flex box inside the nowrap, * ellipsising text run becomes an atomic item the ellipsis cannot cut into, so * a mid-sentence link would push the rest of the copy out instead of * truncating cleanly. */ .lux-msg-strip__link { display: inline; text-decoration: underline; text-underline-offset: 2px; color: inherit; } /* * The end-of-message CTA ("Shop now ›") is a separate flex ITEM of the slide, * outside the truncating text box, which is why the call to action can never be * ellipsised away. inline-flex here only aligns its chevron. */ .lux-msg-strip__link--cta { display: inline-flex; align-items: center; gap: 0.125rem; white-space: nowrap; flex: none; } .lux-msg-strip__link:hover { text-decoration: none; } .lux-msg-strip__chev { width: 0.75rem; height: 0.75rem; flex: none; } /* ---- Controls ---------------------------------------------------------- */ .lux-msg-strip__nav, .lux-msg-strip__dismiss { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; color: inherit; background: none; border: 0; cursor: pointer; } /* ⚠ LOGICAL PROPERTIES, NOT left/right. The Arabic store views set dir="rtl" on , and inset-inline-* mirrors the pair automatically — "previous" stays on the side the shopper reads from. The slide direction is flipped to match in tlgStripRotator.slideStyle(). */ .lux-msg-strip__nav { width: 1.5rem; height: 1.5rem; } .lux-msg-strip__nav--prev { inset-inline-start: 0.25rem; } .lux-msg-strip__nav--next { inset-inline-end: 0.25rem; } .lux-msg-strip__nav svg { width: 0.875rem; height: 0.875rem; } .lux-msg-strip__dismiss { inset-inline-end: 0.75rem; width: 1rem; height: 1rem; } /* ---- RTL -------------------------------------------------------------- ⚠ inset-inline-* mirrors where the arrows SIT, but it cannot mirror the glyph inside them: an SVG path is geometry, not text, and direction has no effect on it. Without this the Arabic storefronts put "previous" on the correct (right) edge pointing the wrong way, and the inline "Shop now" chevron points away from the direction of reading. Caught on g_kw_ar during the first visual pass; the markup alone looks correct. */ [dir="rtl"] .lux-msg-strip__nav svg, [dir="rtl"] .lux-msg-strip__chev { transform: scaleX(-1); } /* ---- Motion ------------------------------------------------------------ The rotator already refuses to start a timer under this preference; killing the transition too covers a manual arrow press, which still moves. */ @media (prefers-reduced-motion: reduce) { .lux-msg-strip__slide { transition: none; } }