/* ═════════════════ SITE MARQUEE (.aitsmq) ═════════════════ Full-bleed brand ticker. Uses the site's brand palette (--brand-blue #3680ED · dark #2060C0 · light #60A4F5) instead of one- off hexes so the strip reads as part of the same system as the buttons and pills. `width: 100vw` + `margin-inline: calc(50% - 50vw)` pulls it out of any centred/capped shell so it always sits edge-to-edge. `color: #fff` is set on the CONTAINER, not the item, so it beats the footer's `.aitsft a { color: inherit }` (specificity 011) — that rule was stronger than our `.aitsmq-item { color: #fff }` (010), which is why the labels were rendering in the footer's default dark ink over the blue fill. Now the anchor inherits white from `.aitsmq`. */ /* Brand gradient without the edge mask — the previous 32px transparent fade at either end made the outermost labels read as half-visible on every screen, which is what "text not visible" was reporting. The track already scrolls so a label reaching the edge just wraps around to the other side; a fade adds nothing on top of that. Solid brand- blue → mid → light gives the full-vibrancy blue the user asked for. */ .aitsmq{position:relative;display:flex;width:calc(100vw - var(--aits-sbw, 0px));margin-inline:calc(50% - (100vw - var(--aits-sbw, 0px)) / 2);overflow:hidden;padding:0;color:#fff;background-image:linear-gradient(135deg,#2060C0 0%,#3680ED 55%,#2060C0 100%);background-color:#2060C0;border-block:1px solid rgba(255,255,255,.14);z-index:1} body.theme-dark .aitsmq{background-image:linear-gradient(135deg,#0e2b58 0%,#2060C0 55%,#0e2b58 100%);background-color:#0e2b58;border-block-color:var(--dk-line,rgba(255,255,255,.10))} /* Dot field the brand surfaces share, so the bar belongs to the page rather than looking like an embedded advert. */ .aitsmq::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.17) 1px,transparent 1.6px);background-size:15px 15px;opacity:.55;pointer-events:none} /* The two-copy loop only covers the strip while ONE copy is at least as wide as the viewport, and that is what `min-width:100%` guarantees. The pair slides left by exactly one copy's width. Copy A runs from -tW to W-tW and copy B from W-tW to 2W-tW, so the right-hand end of the ribbon sits at 2W - tW and the strip is only covered while that is still past the viewport edge V. Solve 2W - tW >= V and the loop holds for the whole cycle only when W >= V; below that the ribbon runs out partway through and leaves a growing band of empty blue that snaps back at the reset — read as "the marquee stops after a few passes". With the default ten items W measured 1902px against a 2560px viewport, so the last 35% of every pass was blank. `width:max-content` is what `min-width:max-content` used to do: a flex item's automatic width is fit-content, which CLAMPS to the container, so a long list would report a box narrower than its own content and the -100% translate would be short. Both are needed — one floors the track at the viewport, the other stops it being capped there. `space-around` then spends the slack a short list leaves over. It is the only distribution that keeps the seam invisible: every child gets an equal half-space on each side, so the half after A's last item plus the half before B's first separator adds up to exactly one internal gap. `space-between` would collapse the seam and `space-evenly` would double it. When the list overflows there is no slack, so it does nothing at all and the designed spacing is untouched. */ .aitsmq-track{display:flex;align-items:center;justify-content:space-around;flex:0 0 auto;gap:0;width:max-content;min-width:100%;padding:13px 0;will-change:transform;animation:aitsmq-run var(--aitsmq-dur,42s) linear infinite;color:inherit} .aitsmq[data-reverse="1"] .aitsmq-track{animation-direction:reverse} @keyframes aitsmq-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}} [dir="rtl"] .aitsmq-track{animation-direction:reverse} [dir="rtl"] .aitsmq[data-reverse="1"] .aitsmq-track{animation-direction:normal} /* Full winning specificity for the anchor: `.aitsmq .aitsmq-item` (020) beats `.aitsft a` (011) so `color: #fff` sticks even when the strip renders inside the footer. `text-shadow` gives the labels a hair of depth over the gradient without going navy or purple on the reader. */ .aitsmq .aitsmq-item, .aitsmq a.aitsmq-item, .aitsmq a.aitsmq-item:visited{color:#fff;text-shadow:0 1px 2px rgba(6,25,66,.55),0 0 1px rgba(0,0,0,.35)} .aitsmq-item{display:inline-flex;align-items:center;flex:0 0 auto;padding:4px 6px;border-radius:8px;font-size:17px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;text-decoration:none;transition:background-color .18s ease,color .18s ease,transform .2s cubic-bezier(.34,1.56,.64,1)} .aitsmq-sep{flex:0 0 auto;width:19px;height:19px;margin:0 20px;color:rgba(255,255,255,.92)} .aitsmq-sep.is-dot{width:6px;height:6px;margin:0 22px;border-radius:50%;background:rgba(255,255,255,.8)} .aitsmq-sep.is-slash{display:inline-flex;width:auto;height:auto;margin:0 18px;font-size:17px;font-weight:700;color:rgba(255,255,255,.55)} @media (hover:hover){ .aitsmq:hover .aitsmq-track{animation-play-state:paused} .aitsmq .aitsmq-item:hover, .aitsmq a.aitsmq-item:hover{background-color:#fff;color:#2060C0;text-shadow:none;transform:translateY(-1px);text-decoration:none} } .aitsmq:focus-within .aitsmq-track{animation-play-state:paused} .aitsmq .aitsmq-item:focus-visible, .aitsmq a.aitsmq-item:focus-visible{outline:3px solid #fff;outline-offset:2px;background-color:#fff;color:#2060C0;text-shadow:none} @media (max-width:640px){ .aitsmq-track{padding:10px 0;animation-duration:calc(var(--aitsmq-dur,42s) * .68)} .aitsmq-item{font-size:14px;letter-spacing:.03em} .aitsmq-sep{width:15px;height:15px;margin:0 13px} .aitsmq-sep.is-dot{margin:0 15px} .aitsmq-sep.is-slash{margin:0 12px;font-size:14px} } /* ═════════════════ GOLD TONE (.aitsmq.is-gold) ═════════════════ The sponsored ticker (ads/units/marquee.blade.php — placement `footer.sponsored`) wears this same strip under the footer newsletter, in gold, so the paid strip reads as a sibling of the blue section ticker rather than as a foreign advert. Only the palette changes: the geometry, loop, separators and breakpoints above are shared. Ink is deep espresso rather than the blue strip's white: white on a true gold (#E6B422) is ~2:1 and unreadable, while #2B1B03 on it is ~8:1. Night deepens the ramp (as the blue goes navy) and flips the ink to cream, which still clears 3.5:1 on the mid stop. Hover and focus invert to an ink plate with a gold label — the mirror of the blue strip's white-plate hover. */ .aitsmq.is-gold{color:#2B1B03;background-image:linear-gradient(135deg,#FFE082 0%,#FFC107 55%,#F59E0B 100%);background-color:#FFC107;border-block-color:rgba(255,255,255,.34)} /* The gold does NOT flip by night: it is the brand gold every other sponsored mark wears (the seal, the mega pill), and a muddy bronze strip beside a bright gold seal was what read as "off". Only the border softens for the dark canvas. */ body.theme-dark .aitsmq.is-gold{color:#2B1B03;background-image:linear-gradient(135deg,#FFE082 0%,#FFC107 55%,#F59E0B 100%);background-color:#FFC107;border-block-color:var(--dk-line,rgba(255,255,255,.10))} .aitsmq.is-gold::after{background-image:radial-gradient(circle,rgba(255,255,255,.34) 1px,transparent 1.6px);opacity:.5} body.theme-dark .aitsmq.is-gold::after{background-image:radial-gradient(circle,rgba(255,255,255,.34) 1px,transparent 1.6px)} .aitsmq.is-gold .aitsmq-item, .aitsmq.is-gold a.aitsmq-item, .aitsmq.is-gold a.aitsmq-item:visited{color:#2B1B03;text-shadow:0 1px 0 rgba(255,241,196,.45)} body.theme-dark .aitsmq.is-gold .aitsmq-item, body.theme-dark .aitsmq.is-gold a.aitsmq-item, body.theme-dark .aitsmq.is-gold a.aitsmq-item:visited{color:#2B1B03;text-shadow:0 1px 0 rgba(255,241,196,.45)} .aitsmq.is-gold .aitsmq-sep{color:rgba(43,27,3,.72)} .aitsmq.is-gold .aitsmq-sep.is-dot{background:rgba(43,27,3,.6)} .aitsmq.is-gold .aitsmq-sep.is-slash{color:rgba(43,27,3,.5)} body.theme-dark .aitsmq.is-gold .aitsmq-sep{color:rgba(43,27,3,.72)} body.theme-dark .aitsmq.is-gold .aitsmq-sep.is-dot{background:rgba(43,27,3,.6)} body.theme-dark .aitsmq.is-gold .aitsmq-sep.is-slash{color:rgba(43,27,3,.5)} /* Tool logo ahead of the name, EDGE TO EDGE on its plate (owner's call: no inset). The plate is the full item height (36px); an opaque mark covers it entirely, a transparent PNG shows the white plate behind its own glyph — which is why the plate stays white in both themes (a dark glyph would vanish into the night ramp). The gold item drops its block padding so the strip stays exactly as tall as the blue one (13px track padding + 36). */ .aitsmq-logo{flex:0 0 auto;box-sizing:border-box;width:36px;height:36px;margin-inline-end:10px;padding:0;border-radius:9px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18);object-fit:cover} .aitsmq.is-gold .aitsmq-item{padding-block:0} /* §MQLOGO (2026-09-14) — bigger tool logos on the gold strip. 36 → 44px, and the gold track drops its block padding 13 → 9px to compensate, so the strip stays exactly as tall as the blue section ticker (2×9 + 44 = 2×13 + 36 = 62px). The padding is scoped to .is-gold because .aitsmq-track is SHARED with the blue strip, which keeps its own 36px-era spacing. A per-logo gold seal was tried here and REMOVED the same day (owner's call): the pinned .aitsmq-tag already carries one, and 16 more down the strip read as clutter. The tag seal is the disclosure — do not re-add. */ .aitsmq.is-gold .aitsmq-track{padding-block:9px} .aitsmq.is-gold .aitsmq-logo{width:44px;height:44px;border-radius:11px;margin-inline-end:10px} @media (hover:hover){ /* No fill on hover (owner's call): the base rule above would paint the blue strip's white pill, so this neutralises it and keeps the ink; the base rule's 1px lift still applies. */ .aitsmq.is-gold .aitsmq-item:hover, .aitsmq.is-gold a.aitsmq-item:hover{background-color:transparent;color:#2B1B03;text-shadow:0 1px 0 rgba(255,241,196,.45)} body.theme-dark .aitsmq.is-gold .aitsmq-item:hover, body.theme-dark .aitsmq.is-gold a.aitsmq-item:hover{color:#2B1B03;text-shadow:0 1px 0 rgba(255,241,196,.45)} /* `pause_on_hover` off in the placement config keeps the strip moving. */ .aitsmq[data-pause="0"]:hover .aitsmq-track{animation-play-state:running} } .aitsmq.is-gold .aitsmq-item:focus-visible, .aitsmq.is-gold a.aitsmq-item:focus-visible{outline-color:#2B1B03;background-color:transparent;color:#2B1B03} body.theme-dark .aitsmq.is-gold .aitsmq-item:focus-visible, body.theme-dark .aitsmq.is-gold a.aitsmq-item:focus-visible{outline-color:#2B1B03;color:#2B1B03} /* Disclosure tag pinned to the leading edge (§77 — never optional on a paid strip). Absolute inside the strip so the names slide UNDER it and it stays readable for the whole pass; z-index lifts it over the dot field, which is a later pseudo-element at the same level. The inline padding mirrors the shell gutter so the word lines up with the footer brand column below. */ .aitsmq-tag{position:absolute;inset-inline-start:0;top:0;bottom:0;z-index:2;display:inline-flex;align-items:center;gap:9px;padding-inline:max(var(--seo-shell-pad,24px),16px) 14px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:#2B1B03;background:#fff;box-shadow:0 0 16px rgba(43,27,3,.35)} /* White in the dark theme too — the seal's gold reads on white, and the tag is meant to stand off the strip, not sink into it. */ body.theme-dark .aitsmq-tag{background:#fff;color:#2B1B03} /* The seal ahead of the word is assets/media/logo/sponsored-badge.svg — self-coloured (its own gold gradients), so it ships as an . */ .aitsmq-tag-ico{flex:0 0 auto;width:32px;height:32px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))} @media (max-width:640px){ /* 10px track padding + 30 = the blue strip's phone height. */ .aitsmq-logo{width:30px;height:30px;margin-inline-end:8px;padding:0;border-radius:8px} .aitsmq.is-gold .aitsmq-track{padding-block:6px} .aitsmq.is-gold .aitsmq-logo{width:38px;height:38px;border-radius:10px;margin-inline-end:8px} .aitsmq-tag{padding-inline:max(var(--seo-shell-pad,14px),12px) 10px;font-size:10px;letter-spacing:.1em;gap:5px} .aitsmq-tag-ico{width:24px;height:24px} } /* Motion off — the strip becomes a normal scrollable rail; the duplicate track is removed entirely so screen readers don't hit it. */ @media (prefers-reduced-motion:reduce){ .aitsmq{overflow-x:auto;scrollbar-width:none} .aitsmq::-webkit-scrollbar{display:none} .aitsmq-track{animation:none;will-change:auto} .aitsmq-track[aria-hidden="true"]{display:none} /* The tag is a flex item again and sticks to the leading edge of the rail — absolute would scroll away with the content. */ .aitsmq-tag{position:sticky;top:auto;bottom:auto;align-self:stretch} } /* Forced-colors: the tinted fill can be dropped by the OS, taking the white labels with it, so restore a neutral canvas. */ @media (forced-colors:active){ .aitsmq{background:Canvas;border-block-color:CanvasText} .aitsmq.is-gold{background:Canvas;color:CanvasText} .aitsmq-tag{background:Canvas;color:CanvasText;border-inline-end:1px solid CanvasText} .aitsmq::after{display:none} .aitsmq-item{color:LinkText} .aitsmq-track{animation:none} .aitsmq-track[aria-hidden="true"]{display:none} }