:root {
  --rt-blue: #0b3a6e;
  --rt-dark: #082b55;
  --rt-accent: #2563eb;
  --rt-light: #eff6ff;
  --rt-text: #16324f;
}

body { background: #f8fbff; color: var(--rt-text); }
a { color: var(--rt-accent); }
#video-container { background: var(--rt-dark); }

header.on-top { background: rgba(8,43,85,.35); }
header.in-content { background: var(--rt-blue); }
header #text-menu a { color: #fff; }
header #text-menu li.active,
header #text-menu li:hover { border-bottom-color: #60a5fa; }
header .mod .bar { background-color: #93c5fd; }
@media (max-width: 800px) {
  header nav { background: rgba(8,43,85,.96); }
  header #text-menu li { border-bottom-color: #60a5fa; }
}

#screen1 { color: #fff; }
#screen1 a { color: #fff; }
#screen1 .right span.en { text-shadow: 0 4px 10px rgba(8,43,85,.6); }
@media (max-width: 500px) {
  #screen1 .right span.zh { border-top-color: #60a5fa; }
}

#artworks, #about-us, #team {
  background: #fff;
  color: var(--rt-text);
}
#artworks div.title > h1,
#team .title > h1 { color: var(--rt-blue); }
#artworks div.title > p,
#about-us .title > p,
#team .title > p { color: #64748b; }
#artworks .more a { color: var(--rt-accent); }

#artworks .artwork-1 > span { background: #eff6ff; }
#artworks .artwork-2 > span { background: var(--rt-blue); }
#artworks .artwork-3 > span { background: #dbeafe; }
#artworks .artwork-4 > span { background: #bfdbfe; }
#artworks .artwork-1 span.title,
#artworks .artwork-3 span.title,
#artworks .artwork-4 span.title { color: var(--rt-text); }
#artworks .artwork-2 span.title { color: #fff; }
#artworks .artwork-1 span.artist,
#artworks .artwork-3 span.artist,
#artworks .artwork-4 span.artist { color: #1d4ed8; }
#artworks .artwork-2 span.artist { color: #bfdbfe; }

#about-us .title > h1 { color: var(--rt-accent); }
#about-us div.border { border-color: var(--rt-accent); }
#about-us div.text { color: #334155; }
#team .title { border-color: var(--rt-accent); }
#team-block .fill div { border-bottom-color: #60a5fa; }
#team .detail {
  background: rgba(8,43,85,.76);
  color: #fff;
}
@media (max-width: 500px) {
  #about-us div.text .bottom-arrow {
    background-image: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      #fff 50%,
      #fff 100%
    );
  }
}

#contact { background-color: var(--rt-blue); color: #fff; }
#contact .bg { background: rgba(8,43,85,.82); }
#contact .left p.title { color: #bfdbfe; }
#contact .left address { color: #dbeafe; }
#contact input, #contact textarea {
  border-bottom-color: #93c5fd;
  color: #fff;
}
#contact input::placeholder,
#contact textarea::placeholder { color: #dbeafe; }
#contact button {
  border-color: #93c5fd;
  color: #fff;
  background: linear-gradient(
    270deg,
    #1d4ed8,
    #3b82f6,
    transparent,
    transparent
  );
  background-position: 1% 50%;
  background-size: 300% 300%;
}
#contact button:hover {
  border-color: #93c5fd;
  background-position: 99% 50%;
}

footer { background: var(--rt-dark); color: #fff; }
footer .right { color: #bfdbfe; }
footer .right .img-block > span { background: var(--rt-dark); }

/* 指南页与 FAQ 页 */
.guide-page, .faq-page {
  --bg: #f8fbff;
  --bg-soft: #eff6ff;
  --deep: #0b3a6e;
  --panel: #eff6ff;
  --gold: #2563eb;
  --light-gold: #2563eb;
  --text: #16324f;
  --muted: #52677f;
  --line: rgba(37,99,235,.22);
  background: #f8fbff;
  color: #16324f;
}
.guide-page header,
.faq-page .site-header { background: #0b3a6e; }
.guide-page header a,
.guide-page .brand,
.faq-page .site-header a,
.faq-page .brand { color: #fff; }
.faq-page .site-header .nav a { color: #dbeafe; }
.faq-page .site-header .nav a:hover,
.faq-page .site-header .nav a[aria-current="page"] { color: #fff; }
.faq-page .nav-cta {
  color: #dbeafe !important;
  border-color: #93c5fd;
}
.guide-page .hero,
.faq-page .hero {
  background: linear-gradient(125deg, #082b55, #1d4ed8);
  color: #fff;
}
.guide-page .hero p,
.faq-page .hero-copy { color: #dbeafe; }
.guide-page .hero .eyebrow,
.guide-page .hero .updated,
.faq-page .hero .eyebrow,
.faq-page .hero h1 span { color: #bfdbfe; }
.guide-page .point { background: #eff6ff; }
.guide-page article p,
.guide-page article li,
.guide-page td,
.guide-page .tag,
.guide-page .note { color: #334155; }
.guide-page .note,
.guide-page .source-box { background: #eff6ff; }
.guide-page footer { background: #0b3a6e; color: #dbeafe; }
.guide-page footer a { color: #bfdbfe; }
.faq-page .contact { background: #eff6ff; }
.faq-page .footer { background: transparent; color: #52677f; }
.faq-page .footer a { color: #2563eb; }

/* 瑞途 Logo 与页脚联系方式 */
#contact .left p img {
  width: 16rem;
  max-width: 100%;
  height: auto;
}

header #logo {
  display: block;
  box-sizing: border-box;
  object-fit: contain;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
header.on-top #logo {
  width: 205px;
  height: 66px;
  top: -15px;
}
header.in-content #logo {
  width: 176px;
  height: 56px;
  top: -13px;
}
footer .left {
  text-align: left;
}
footer .left .rt-footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: 14px;
  color: #93c5fd;
  vertical-align: middle;
  transition: color .2s, transform .2s;
}
footer .left a.rt-footer-link:hover {
  color: #fff;
  transform: translateY(-3px);
}
footer .left .rt-footer-link svg {
  display: block;
  width: 42px;
  height: 42px;
}
footer .left .rt-phone-pending {
  opacity: .65;
  cursor: default;
}
.remodal[data-remodal-id="qrcode"] img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 800px) {
  header.on-top #logo {
    width: 170px;
    height: 55px;
    top: -12px;
  }
  header.in-content #logo {
    width: 156px;
    height: 50px;
    top: -11px;
  }
}