/* YOL CHAT banner artwork update — visuals only, based on Stage 2.35.19.
   The existing yol-logo.png, markup, site navigation and all features are untouched. */
.topbar {
  background-color: #d1f8f5;
  background-image: url("yol-banner-connected-globe.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.topbar .brand {
  color: #063f44;
  font-weight: 900;
  letter-spacing: -1px;
  text-shadow: 0 1px 0 #fff, 0 2px 1px rgba(0,94,101,.20);
}
.topbar .brand small {
  color: #08616b;
  font-weight: 800;
  letter-spacing: 1.7px;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}
/* At mobile widths the background art remains decorative and never competes
   with the real brand, logo or the actual online-count widget. */
@media (max-width: 760px) {
  .topbar {
    background-image: linear-gradient(90deg, rgba(242,255,252,.95) 0%, rgba(242,255,252,.92) 47%, rgba(242,255,252,.20) 100%), url("yol-banner-connected-globe.png");
  }
  .topbar .brand { letter-spacing: -.65px; }
  .topbar .brand small { letter-spacing: .5px; }
}