/* ============================================================================ * BA Top Bars — notification bar + events marquee (two stacked bars at the * very top of ). Rendered by inc/ba-top-bars.php: * .ba-topbar--notif ba_render_notification_bar() (top) * .ba-topbar--marquee ba_render_events_marquee() (below) * * Cohesive with the theme's modern navy system (calendar_list / ba-upcoming-markets): * navy #113c61 · navy-deep #0d2c48 · sky #25a7ce/#1268a1 · amber #ffa41b * ink #12303f · white #fff * The two bars layer as TWO navy shades (notif brand-navy on top, marquee a * deeper navy below) and amber carries the warm accent (pinned prefix label, * CTA, links, event dots) so the whole stack reads as ONE intentional system, * not two mismatched strips. * * NOTE: theme root is html{font-size:62.5%} => 1rem = 10px. Sizes are authored * on that 10px scale. * ========================================================================== */ /* ---- Shared shell ---------------------------------------------------------- */ .ba-topbar{ position:relative; z-index:5; font-size:1.4rem; line-height:1.45; -webkit-font-smoothing:antialiased; } .ba-topbar--dismissed{ display:none !important; } /* ---- 1) Notification bar (top) — brand navy ------------------------------- */ /* This bar still carries the theme's legacy `.top_notibar` class, whose old rule is `position:fixed; top:13rem; padding:1.5rem 0; background:#04157d` (built for a bar that floated below a fixed header). In the new stacked layout that 13rem offset shoved the bar 130px down OVER the hero. Neutralize it (higher specificity than the single-class legacy rule) so it sits in normal flow at the very top. */ .ba-topbar.ba-topbar--notif{ position:relative; top:0; left:0; padding:0; } .ba-topbar--notif{ background:#113c61; color:#fff; box-shadow:inset 0 -1px 0 rgba(255,255,255,.08); /* subtle seam to the marquee below */ } .ba-topbar--notif .ba-topbar__text{ margin:0; padding-right:0; } /* undo legacy `.top_notibar p` */ .ba-topbar__row{ display:flex; align-items:center; gap:1.2rem; padding:.9rem 15px; } .ba-topbar__body{ flex:1 1 auto; min-width:0; } .ba-topbar__text{ margin:0; } .ba-topbar__text a, .ba-topbar__link{ color:#ffd98a; font-weight:700; text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; } .ba-topbar__text a:hover, .ba-topbar__text a:focus, .ba-topbar__link:hover, .ba-topbar__link:focus{ color:#fff; } /* dismiss "x" — font-independent glyph in a circular hit area (no Font Awesome dep) */ .ba-topbar__close{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:3rem; height:3rem; padding:0; border:0; border-radius:50%; background:transparent; color:#fff; opacity:.85; cursor:pointer; transition:background-color 140ms ease, opacity 140ms ease; } .ba-topbar__x{ font-size:2.2rem; line-height:1; font-weight:400; } .ba-topbar__close:hover, .ba-topbar__close:focus-visible{ opacity:1; background:rgba(255,255,255,.16); } .ba-topbar__close:focus-visible{ outline:2px solid #7cc7e0; outline-offset:2px; } /* ---- 2) Events marquee (below) — deeper navy ------------------------------ */ /* .ba-topbar.ba-topbar--marquee (2 classes) so the fluid base always beats the mobile `.ba-topbar{font-size}` rule below (equal-specificity + later source). */ .ba-topbar.ba-topbar--marquee{ background:#0d2c48; color:#fff; display:flex; align-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); /* Device-appropriate reading size — NOT screen-proportional. A top bar is UI chrome, so it should stay a comfortable reading size on every device rather than ballooning on wide screens. Tight band: ~15px on phones -> ~18px on desktop (barely varies; just a readable floor + a sane ceiling). px units (not rem) because this theme's html{62.5%} makes rem unreliable on mobile. Children size in `em` off this so the bar stays proportional. */ font-size:clamp(15px, 13.5px + 0.4vw, 18px); } /* pinned prefix label — stays put while the events scroll past it */ .ba-marquee__label{ flex:0 0 auto; align-self:stretch; display:flex; align-items:center; padding:0 0.95em; margin-right:.2rem; font-size:0.82em; font-weight:800; text-transform:uppercase; letter-spacing:.07em; white-space:nowrap; color:#ffb23e; border-right:1px solid rgba(255,255,255,.14); } .ba-topbar--marquee .ba-marquee{ flex:1 1 auto; } /* ---- Marquee mechanism (shared by notif-scroll + events marquee) ---------- viewport holds TWO identical tracks; translating -50% loops seamlessly. Content moves left => reads right-to-left. Soft edge-fade so items don't hard-cut against the bar edges / the pinned label. */ .ba-marquee{ overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 2.4rem, #000 calc(100% - 2.4rem), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 2.4rem, #000 calc(100% - 2.4rem), transparent 100%); } .ba-marquee__viewport{ display:flex; width:max-content; animation:ba-marquee-scroll var(--ba-mq-speed,30s) linear infinite; will-change:transform; } .ba-marquee:hover .ba-marquee__viewport, .ba-marquee__viewport:focus-within{ animation-play-state:paused; } .ba-marquee__track{ display:flex; align-items:center; flex:0 0 auto; } .ba-marquee__item{ white-space:nowrap; padding:0.66em 0.97em; display:inline-flex; align-items:center; gap:.4em; } .ba-marquee__prefix{ font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#ffb23e; } /* legacy fallback only */ .ba-marquee__dot{ color:#ffb23e; opacity:.9; font-size:.63em; } .ba-marquee__cta{ flex:0 0 auto; margin:.35rem 15px .35rem 1rem; padding:.4em 1em; border-radius:999px; background:#ffa41b; color:#12303f; font-weight:700; font-size:.72em; white-space:nowrap; text-decoration:none; transition:filter 140ms ease, transform 140ms ease; } .ba-marquee__cta:hover{ filter:brightness(1.06); color:#12303f; transform:translateY(-1px); } .ba-marquee__cta:focus-visible{ outline:2px solid #7cc7e0; outline-offset:2px; color:#12303f; } @keyframes ba-marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* ---- Accessibility: no motion => static, single copy, horizontally scrollable */ @media (prefers-reduced-motion: reduce){ .ba-marquee{ -webkit-mask-image:none; mask-image:none; } .ba-marquee__viewport{ animation:none; width:100%; overflow-x:auto; } .ba-marquee__viewport > .ba-marquee__track[aria-hidden="true"]{ display:none; } } /* ---- Mobile --------------------------------------------------------------- */ @media (max-width:600px){ .ba-topbar{ font-size:1.3rem; } /* notification bar only — marquee uses the fluid clamp */ .ba-topbar__row{ gap:.8rem; padding:.7rem 12px; } .ba-marquee__cta{ margin:.3rem 12px .3rem .8rem; } /* tighter gutter only; size is em/fluid */ .ba-marquee{ -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 1.4rem, #000 calc(100% - 1.4rem), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 1.4rem, #000 calc(100% - 1.4rem), transparent 100%); } } /* ========================================================================== Events-marquee rich items — segmented data, colour-coded day/part-of-day pills, prominent market name, and a delightful "today" treatment. ========================================================================== */ .ba-mq-item{ gap:.5em; } .ba-mq-pill{ display:inline-flex; align-items:center; gap:.3em; padding:.24em .62em; border-radius:999px; line-height:1; white-space:nowrap; font-size:.8em; font-weight:800; letter-spacing:.005em; } .ba-mq-pill i{ font-size:.9em; } .ba-mq-pill--morning{ background:#ffa41b; color:#3a2600; } /* amber — AM */ .ba-mq-pill--afternoon{ background:#25a7ce; color:#042833; } /* sky — noon */ .ba-mq-pill--evening{ background:#7c86f2; color:#0b0f33; } /* indigo — PM */ .ba-mq-pill--allday{ background:#eef3f6; color:#0d2c48; } /* neutral */ .ba-mq-pill--upcoming{ background:rgba(255,255,255,.18); color:#fff; } .ba-mq-name{ font-weight:800; color:#fff; font-size:.95em; } .ba-mq-meta{ color:#a9c9de; font-size:.78em; font-weight:600; } /* Today — always-prominent pulsing badge (info that matters). */ .ba-mq-today{ display:inline-flex; align-items:center; padding:.2em .5em; border-radius:999px; background:#e8483b; color:#fff; font-weight:800; font-size:.7em; text-transform:uppercase; letter-spacing:.06em; animation:ba-mq-today-pulse 1.8s ease-out infinite; } @keyframes ba-mq-today-pulse{ 0%{ box-shadow:0 0 0 0 rgba(232,72,59,.55); } 70%{ box-shadow:0 0 0 .7rem rgba(232,72,59,0); } 100%{ box-shadow:0 0 0 0 rgba(232,72,59,0); } } /* Hover a TODAY item => shake (the marquee already pauses on hover). */ .ba-mq-item[data-ba-today]{ cursor:default; } .ba-mq-item[data-ba-today]:hover{ animation:ba-mq-shake .5s ease-in-out; } @keyframes ba-mq-shake{ 10%,90%{ transform:translateX(-1px) rotate(-1deg); } 20%,80%{ transform:translateX(2px) rotate(1deg); } 30%,50%,70%{ transform:translateX(-4px) rotate(-1.6deg); } 40%,60%{ transform:translateX(4px) rotate(1.6deg); } } /* Confetti burst (JS-spawned; escapes the bar's overflow via fixed layer). */ .ba-mq-confetti{ position:fixed; inset:0; pointer-events:none; z-index:99999; } .ba-mq-confetti i{ position:fixed; width:8px; height:8px; border-radius:2px; transform:translate(-50%,-50%); animation:ba-mq-confetti-fly .9s ease-out forwards; } @keyframes ba-mq-confetti-fly{ 0%{ opacity:1; transform:translate(-50%,-50%) rotate(0); } 100%{ opacity:0; transform:translate(calc(-50% + var(--bax)), calc(-50% + var(--bay) + 40px)) rotate(var(--bar)); } } @media (prefers-reduced-motion: reduce){ .ba-mq-today{ animation:none; } .ba-mq-item[data-ba-today]:hover{ animation:none; } } /* No fixed mobile font overrides: the fluid clamp base + em children scale the whole marquee (text, pills, height) across every viewport. */