/* ══════════════════════════════════════════════════════════════════════ Fast news bar — Platinum Eastern Loaded after output.css so it can push the fixed header down. Nothing here applies unless the server puts data-fast-news on , which it only does when the dashboard actually returns headlines. ══════════════════════════════════════════════════════════════════════ */ :root { --fast-news-height: 44px; --fast-news-bg: linear-gradient(100deg, #004a89 0%, #005ca9 52%, #0a72b8 100%); --fast-news-fg: #eaf3fb; --fast-news-accent: #f4c532; --fast-news-accent-fg: #020b17; --fast-news-edge: rgba(35, 183, 217, 0.35); --fast-news-bullet: #f4c532; } @media (max-width: 767.98px) { :root { --fast-news-height: 40px; } } /* The header is a floating pill pinned with Tailwind's `top-0`; it moves down by the height of the bar. The body padding puts the same height back into the flow so page content keeps its original clearance under the header. */ html[data-fast-news] body { padding-top: var(--fast-news-height); } html[data-fast-news] header[data-header-root] { top: var(--fast-news-height); } .fast-news { position: fixed; top: 0; left: 0; right: 0; height: var(--fast-news-height); /* Below the header (z-40) on purpose: the two never overlap, and this lets the dropdowns and the mobile panel cover the bar when they open. */ z-index: 39; background: var(--fast-news-bg); color: var(--fast-news-fg); border-bottom: 1px solid var(--fast-news-edge); box-shadow: 0 2px 18px rgba(2, 11, 23, 0.18); overflow: hidden; font-family: inherit; -webkit-font-smoothing: antialiased; } .fast-news__inner { display: flex; align-items: center; gap: clamp(8px, 1.2vw, 16px); height: 100%; max-width: 1440px; margin: 0 auto; padding-inline: clamp(10px, 2vw, 22px); } /* ── "Latest news" chip ── */ .fast-news__label { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 5px clamp(9px, 1.2vw, 14px); border-radius: 999px; background: var(--fast-news-accent); color: var(--fast-news-accent-fg); font-size: clamp(10.5px, 1.35vw, 12.5px); font-weight: 800; line-height: 1; white-space: nowrap; } .fast-news__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; animation: fast-news-pulse 1.8s ease-in-out infinite; } @keyframes fast-news-pulse { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 1; } } /* ── Headline track ── */ .fast-news__viewport { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; /* Fade both edges so headlines are never cut off by a hard border */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); } .fast-news__track { display: flex; align-items: center; height: 100%; width: max-content; /* The order of the two copies stays fixed whatever the page direction; each headline handles its own direction through dir="auto". */ direction: ltr; will-change: transform; animation: fast-news-marquee var(--fast-news-duration, 40s) linear infinite; } /* Arabic reads from the right, so the track travels rightwards and headlines enter from the left edge in the order they were published. */ [dir='rtl'] .fast-news__track { animation-name: fast-news-marquee-rtl; } @keyframes fast-news-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes fast-news-marquee-rtl { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } .fast-news:hover .fast-news__track, .fast-news:focus-within .fast-news__track { animation-play-state: paused; } .fast-news__group { display: flex; align-items: center; flex: 0 0 auto; } .fast-news__item { display: inline-flex; align-items: center; gap: clamp(14px, 2vw, 26px); padding-inline-end: clamp(14px, 2vw, 26px); font-size: clamp(12px, 1.6vw, 14.5px); font-weight: 600; line-height: 1; white-space: nowrap; unicode-bidi: isolate; } /* Separator dot after every headline — also works across the seam between the two copies of the group */ .fast-news__item::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--fast-news-bullet); opacity: 0.75; flex: 0 0 auto; } /* ── Dismiss button ── */ .fast-news__close { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: inherit; font-size: 17px; line-height: 1; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .fast-news__close:hover { background: rgba(255, 255, 255, 0.28); transform: rotate(90deg); } .fast-news__close:focus-visible { outline: 2px solid var(--fast-news-accent); outline-offset: 2px; } /* ── Narrow screens: the pulsing dot says enough without the label ── */ @media (max-width: 479.98px) { .fast-news__label-text { display: none; } .fast-news__label { padding-inline: 9px; } } /* ── Reduced motion: the bar becomes a manually scrollable strip ── */ @media (prefers-reduced-motion: reduce) { .fast-news__track { animation: none; transform: none; } .fast-news__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .fast-news__group + .fast-news__group { display: none; } } @media print { .fast-news { display: none !important; } html[data-fast-news] body { padding-top: 0; } html[data-fast-news] header[data-header-root] { top: 0; } }