/* ============================================================ MARKET TICKER (NNA-19) — the strip under the main menu. Markup: templates/market-ticker.php · data: includes/market-ticker.php · refresh: js/market-ticker.js The strip hangs off the bottom of the fixed header (top:100%), so it stays directly under the menu at every width without knowing the menu's height. .nna-mkts-spacer, printed right after , moves the page down by the same amount, so every page keeps exactly the gap it had under the menu before. Loaded on every page from includes/links.php (in , so the space is reserved before first paint and nothing jumps). ============================================================ */ :root { --mk-h: 34px; } .nna-mkts-spacer { height: var(--mk-h); } /* The strip is painted after the nav; lift the nav so its dropdowns (Live TV, News, language) still open over the strip. */ #main-header nav { z-index: 1; } .nna-mkts { position: absolute; left: 0; right: 0; top: 100%; z-index: 0; display: flex; align-items: stretch; height: var(--mk-h); background: #0b0c10; border-bottom: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.95); font-family: "Inter", sans-serif; font-size: 12.5px; line-height: 1; color: #e9ecf2; overflow: hidden; contain: layout paint; } /* ── Label block: "MARKETS · Live" ── */ .nna-mkts .mk-label { position: relative; z-index: 1; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 18px 0 2.5%; /* lines up with the logo above */ background: linear-gradient(90deg, #11141a 0%, #161b25 100%); border-right: 1px solid rgba(193, 145, 20, 0.4); white-space: nowrap; cursor: default; } .nna-mkts .mk-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #7d859a; } .nna-mkts .mk-live .mk-dot { background: #2fd073; animation: mk-pulse 2s ease-out infinite; } .nna-mkts .mk-closed .mk-dot { background: #c19114; } @keyframes mk-pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 208, 115, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(47, 208, 115, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 208, 115, 0); } } .nna-mkts .mk-title { font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #c19114; } .nna-mkts .mk-status { font-size: 11px; font-weight: 500; color: #a1a9bb; } /* ── Scrolling part ── */ .nna-mkts .mk-viewport { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } /* The track holds the content twice; sliding it by half its width lands the second copy exactly where the first began, so the loop is seamless. Only transform animates, which the browser runs off the main thread — the strip cannot make the page itself lag. The duration is set by js/market-ticker.js from the content width, for a steady ~50px/s. */ .nna-mkts .mk-track { display: flex; flex: none; will-change: transform; animation: mk-scroll var(--mk-dur, 150s) linear infinite; } .nna-mkts:hover .mk-track, .nna-mkts:focus-within .mk-track, .nna-mkts.mk-paused .mk-track { animation-play-state: paused; } @keyframes mk-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .nna-mkts .mk-set { display: flex; flex: none; align-items: center; } /* Section heading inside the strip (Indices, Currencies, …) */ .nna-mkts .mk-group { flex: none; margin: 0 12px 0 22px; padding: 4px 7px 3px; border: 1px solid rgba(193, 145, 20, 0.5); border-radius: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #c19114; white-space: nowrap; } .nna-mkts .mk-item { position: relative; flex: none; display: inline-flex; align-items: baseline; gap: 7px; padding: 0 15px; white-space: nowrap; } .nna-mkts .mk-item + .mk-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: rgba(255, 255, 255, 0.12); } .nna-mkts .mk-name { font-weight: 700; color: #ffffff; } .nna-mkts .mk-price { color: #d4d9e4; font-variant-numeric: tabular-nums; } .nna-mkts .mk-chg { font-weight: 600; font-variant-numeric: tabular-nums; } .nna-mkts .mk-arrow { display: inline-block; margin-right: 3px; font-size: 0.78em; } .nna-mkts .mk-up { color: #2fd073; } .nna-mkts .mk-down { color: #ff5a5f; } .nna-mkts .mk-flat { color: #a1a9bb; } /* Sticky blocks were set to clear the old header height. */ body.single-post .ad-sticky { top: calc(100px + var(--mk-h)); } /* Reduced motion: no marquee; the reader can swipe/scroll it instead. */ @media (prefers-reduced-motion: reduce) { .nna-mkts .mk-track { animation: none; } .nna-mkts .mk-viewport { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; } .nna-mkts .mk-viewport::-webkit-scrollbar { display: none; } .nna-mkts .mk-set[aria-hidden="true"] { display: none; } .nna-mkts .mk-live .mk-dot { animation: none; } } /* ── Phones ── */ @media screen and (max-width: 768px) { :root { --mk-h: 30px; } .nna-mkts { font-size: 11.5px; } .nna-mkts .mk-label { gap: 6px; padding: 0 10px 0 5%; } /* header uses 5% here */ .nna-mkts .mk-title { font-size: 10.5px; letter-spacing: 1px; } .nna-mkts .mk-status { font-size: 10px; } .nna-mkts .mk-group { margin: 0 10px 0 16px; } .nna-mkts .mk-item { gap: 6px; padding: 0 12px; } /* On phones the weather pill is moved out of the header to sit under it (templates/footer.php); keep it under the strip too. */ #weather-bar { top: calc(63px + var(--mk-h)); } } @media screen and (max-width: 420px) { /* Room for the prices: the dot and "Live" / "Friday close" say enough. */ .nna-mkts .mk-title { display: none; } }