MediaWiki:Common.css: Difference between revisions

Latest revision as of 14:49, 16 September 2026

/* ==========================================================================
   OnTrackWorld home page and inquiry components -- MediaWiki:Common.css
   Ready to paste back into MediaWiki:Common.css as a full replacement for
   the current OTW block there (keep any unrelated content already on the
   page that isn't part of this block).
   Palette: adjust --otw-ink and --otw-accent to the logo colours in onelineotw.svg.

   Changes from the version currently live on-wiki (in_progress.css in this
   repo is a record of that version):

   - Removed the "Sidebar (Vector 2022 main menu)" block entirely -- the
     body background photo, #content/header card, and main-menu/TOC card
     are now built into the skin itself (resources/skins.vector.styles/
     layouts/screen.less and components/SidebarCard.less), with fixes this
     Common.css version never had: it follows night mode, the main menu
     and TOC cards line up with the page and with each other, the default
     scroll-fade gradient on the TOC card is suppressed, and the
     rarely-used dropdown-only main menu container is no longer carded.
     Leaving the old rules here would just fight the skin's own styling,
     so once this replaces the live page, that section is gone for good.
   - Collapsed a duplicate `.otw-zone-record .otw-card:hover` rule (was
     defined twice back-to-back in the old version) down to one copy.
   - Moved the small-screen media query to the end of the file. It has the
     same specificity as the unconditional `.otw-zone`/`.otw-join-band`
     rules it overrides, so it must come after them in source order to win
     the cascade at narrow widths -- previously it happened to sit between
     the card rules and the graphics section, which worked, but grouping
     all the layout primitives together up top (as this version does)
     means it has to move down to keep working.

   Everything else is content unchanged, just regrouped by component so
   each section reads top-to-bottom (base rules then that component's own
   graphics), matching common-css-split/templates/ in this repo.
   ========================================================================== */

:root {
  --otw-ink: #1c3557;        /* deep rail blue: headings, primary buttons */
  --otw-ink-soft: #3f5f8a;
  --otw-accent: #c47a12;     /* warm signal: current phase, live markers */
  --otw-paper: #f7f5f0;      /* warm off-white panels */
  --otw-line: #d9d4ca;
  --otw-text: #202122;
  --otw-muted: #5c6470;
  --otw-inquiry: #2f6f9f;
  --otw-convergence: #b8741a;
  --otw-commitment: #2e7d4f;
}

/* ---- Layout primitives ------------------------------------------------- */
.otw-hero,
.otw-how,
.otw-grid,
.otw-two-col,
.otw-join-roles { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---- Hero banner + "how it works" strip -------------------------------- */
.otw-hero { align-items: stretch; margin: 0 0 28px; }
.otw-hero-text { flex: 2 1 480px; }
.otw-hero-aside {
  flex: 1 1 260px; background: var(--otw-paper); border: 1px solid var(--otw-line);
  border-left: 4px solid var(--otw-accent); padding: 16px 18px; border-radius: 4px;
}
.otw-kicker { font-size: 0.8em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--otw-muted); margin-bottom: 4px; }
.otw-hero-text h1, .otw-hero-text .mw-heading1 { border: none; font-family: inherit; font-weight: 600; line-height: 1.2; color: var(--otw-ink); margin: 0 0 12px; }
.otw-lede { font-size: 1.08em; max-width: 60ch; margin-bottom: 18px; }
.otw-aside-title { font-weight: 700; color: var(--otw-ink); text-transform: uppercase; font-size: 0.78em; letter-spacing: 0.1em; margin-bottom: 8px; }
.otw-aside-stat { margin: 6px 0; }
.otw-num { font-size: 1.6em; font-weight: 700; color: var(--otw-accent); margin-right: 6px; line-height: 1; }
.otw-aside-foot { margin-top: 12px; font-size: 0.9em; color: var(--otw-muted); }

.otw-how { margin: 0 0 32px; padding: 18px 0; border-top: 1px solid var(--otw-line); border-bottom: 1px solid var(--otw-line); }
.otw-how-item { flex: 1 1 260px; }
.otw-how-item h4, .otw-how-item .mw-heading4 { margin-top: 0; color: var(--otw-ink); }

/* graphics: hero background diagram, text gradient, live marker */
.otw-hero { position: relative; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 520 300%22 fill=%22none%22 stroke=%22%23b7c4d6%22 stroke-width=%221.6%22 stroke-linecap=%22round%22%3E %3Cg opacity=%220.9%22%3E %3Cpath d=%22M30 250 L120 200 L210 215 L300 150 L400 120 L500 60%22/%3E %3Cpath d=%22M120 200 L150 110 L260 70 L400 120%22/%3E %3Cpath d=%22M210 215 L330 240 L440 200 L500 60%22/%3E %3Cpath d=%22M60 90 L150 110 M330 240 L300 150 M260 70 L300 150%22/%3E %3C/g%3E %3Cg fill=%22%23ffffff%22 stroke=%22%23b7c4d6%22 stroke-width=%221.8%22%3E %3Ccircle cx=%2230%22 cy=%22250%22 r=%225%22/%3E%3Ccircle cx=%22120%22 cy=%22200%22 r=%226%22/%3E%3Ccircle cx=%22210%22 cy=%22215%22 r=%225%22/%3E %3Ccircle cx=%22300%22 cy=%22150%22 r=%227%22/%3E%3Ccircle cx=%22400%22 cy=%22120%22 r=%226%22/%3E%3Ccircle cx=%22500%22 cy=%2260%22 r=%225%22/%3E %3Ccircle cx=%22150%22 cy=%22110%22 r=%226%22/%3E%3Ccircle cx=%22260%22 cy=%2270%22 r=%225%22/%3E%3Ccircle cx=%22330%22 cy=%22240%22 r=%225%22/%3E %3Ccircle cx=%22440%22 cy=%22200%22 r=%226%22/%3E%3Ccircle cx=%2260%22 cy=%2290%22 r=%224%22/%3E %3C/g%3E %3Cg fill=%22%23e3b77f%22%3E%3Ccircle cx=%22300%22 cy=%22150%22 r=%223.5%22/%3E%3Ccircle cx=%22120%22 cy=%22200%22 r=%222.5%22/%3E%3Ccircle cx=%22440%22 cy=%22200%22 r=%222.5%22/%3E%3C/g%3E %3C/svg%3E"); background-repeat: no-repeat;
  background-position: right 250px top 40px; background-size: 460px auto; }
@media (max-width: 1000px) { .otw-hero { background-position: right -60px bottom 0; background-size: 360px auto; } }
.otw-hero-text { position: relative; background: linear-gradient(90deg, #fff 0, #fff 55%, rgba(255,255,255,0) 100%); padding-right: 40px; }
.otw-hero-aside { position: relative; }

/* live marker in the aside */
.otw-aside-title::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--otw-accent); margin-right: 8px; box-shadow: 0 0 0 0 rgba(196,122,18,.6); animation: otw-pulse 2.2s infinite; }
@keyframes otw-pulse { 0% { box-shadow: 0 0 0 0 rgba(196,122,18,.55); } 70% { box-shadow: 0 0 0 9px rgba(196,122,18,0); } 100% { box-shadow: 0 0 0 0 rgba(196,122,18,0); } }

/* rail-line divider around the how-it-works strip */
.otw-how { border: none; padding: 26px 0;
  background:
    linear-gradient(var(--otw-line), var(--otw-line)) top / 100% 1px no-repeat,
    linear-gradient(var(--otw-line), var(--otw-line)) top 5px left / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 14px, var(--otw-line) 14px 16px) top / 100% 6px no-repeat,
    linear-gradient(var(--otw-line), var(--otw-line)) bottom / 100% 1px no-repeat,
    linear-gradient(var(--otw-line), var(--otw-line)) bottom 5px left / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 14px, var(--otw-line) 14px 16px) bottom / 100% 6px no-repeat; }

/* icons: any element with otw-ic-* gets a 30px glyph above its heading */
[class*="otw-ic-"]::before { content: ""; display: block; width: 30px; height: 30px; margin: 0 0 8px;
  background-repeat: no-repeat; background-size: contain; }
.otw-how-item[class*="otw-ic-"]::before { width: 34px; height: 34px; }

.otw-ic-rail::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 3v18M17 3v18M5 7h14M5 12h14M5 17h14%22/%3E%3C/svg%3E"); }
.otw-ic-tree::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l5 7h-3l4 5h-4l3 5H7l3-5H6l4-5H7z%22/%3E%3Cpath d=%22M12 20v2%22/%3E%3C/svg%3E"); }
.otw-ic-mineral::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2.5l8 4.6v9.8l-8 4.6-8-4.6V7.1z%22/%3E%3Cpath d=%22M12 2.5v19M4 7.1l8 4.6 8-4.6%22/%3E%3C/svg%3E"); }
.otw-ic-systems::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%227%22 cy=%227%22 r=%223.2%22/%3E%3Ccircle cx=%2217%22 cy=%227%22 r=%223.2%22/%3E%3Ccircle cx=%2212%22 cy=%2217%22 r=%223.2%22/%3E%3Cpath d=%22M9.6 8.6l1 5.4M14.4 8.6l-1 5.4M10.2 7h3.6%22/%3E%3C/svg%3E"); }
.otw-ic-pin::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21s-6-6.2-6-11a6 6 0 0 1 12 0c0 4.8-6 11-6 11z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%222.2%22/%3E%3C/svg%3E"); }
.otw-ic-plan::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 3h9l4 4v14H6z%22/%3E%3Cpath d=%22M15 3v4h4M9 12h6M9 16h6%22/%3E%3C/svg%3E"); }
.otw-ic-book::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 5.5C6 4 8.5 4 12 6c3.5-2 6-2 9-.5V19c-3-1.5-5.5-1.5-9 .5-3.5-2-6-2-9-.5z%22/%3E%3Cpath d=%22M12 6v13.5%22/%3E%3C/svg%3E"); }
.otw-ic-library::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 4h4v16H4zM10 4h4v16h-4zM16.5 5l3.8-.9 3 15.4-3.8.9z%22/%3E%3C/svg%3E"); }
.otw-ic-calc::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%223%22 width=%2214%22 height=%2218%22 rx=%221.5%22/%3E%3Cpath d=%22M8 7h8M8.5 12h.01M12 12h.01M15.5 12h.01M8.5 16h.01M12 16h.01M15.5 16h.01%22/%3E%3C/svg%3E"); }
.otw-ic-gis::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z%22/%3E%3Cpath d=%22M9 4v14M15 6v14%22/%3E%3C/svg%3E"); }
.otw-ic-optimize::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%225%22 r=%222.2%22/%3E%3Ccircle cx=%225%22 cy=%2218%22 r=%222.2%22/%3E%3Ccircle cx=%2219%22 cy=%2218%22 r=%222.2%22/%3E%3Cpath d=%22M10.8 7L6.2 16M13.2 7l4.6 9M7.2 18h9.6%22/%3E%3C/svg%3E"); }
.otw-ic-synthesis::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 20l3.5-1L19 7.5 15.5 4 4 15.5z%22/%3E%3Cpath d=%22M13 6.5l3.5 3.5M4 20l1-3.5%22/%3E%3Cpath d=%22M14 20h6M16 16.5h4%22/%3E%3C/svg%3E"); }
.otw-ic-conference::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3Cpath d=%22M12 3a9 9 0 0 1 9 9%22/%3E%3Cpath d=%22M12 21a9 9 0 0 1-9-9%22/%3E%3Cpath d=%22M19.5 9.5L21 12l-2.5.8M4.5 14.5L3 12l2.5-.8%22/%3E%3C/svg%3E"); }
.otw-ic-multilogue::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 12h6%22/%3E%3Cpath d=%22M10 12c3 0 3-6 6-6h4M10 12h10M10 12c3 0 3 6 6 6h4%22/%3E%3Ccircle cx=%224%22 cy=%2212%22 r=%221.5%22/%3E%3C/svg%3E"); }
.otw-ic-pulse::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23c47a12%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228%22 stroke-dasharray=%223 3%22/%3E%3C/svg%3E"); }
.otw-ic-record::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h16M4 12h16M4 17h16%22/%3E%3Cpath d=%22M4 5v14M20 5v14%22/%3E%3C/svg%3E"); }

/* ---- Zones, cards, phase badges and track ------------------------------ */
.otw-zone { margin: 0 0 36px; padding: 22px 22px 18px; border-radius: 6px; }
.otw-zone-active { background: #fff; border: 1px solid var(--otw-line); border-top: 5px solid var(--otw-accent); }
.otw-zone-record { background: var(--otw-paper); border: 1px solid var(--otw-line); border-top: 5px solid var(--otw-ink); }
.otw-zone-head h2, .otw-zone-head .mw-heading2 { border: none; margin-top: 0; color: var(--otw-ink); }
.otw-zone-sub { color: var(--otw-muted); max-width: 80ch; margin: -6px 0 18px; }
.otw-zone-foot { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--otw-line); }

.otw-grid > * { flex: 1 1 300px; }
.otw-grid-3 > * { flex: 1 1 240px; }
.otw-card {
  background: #fff; border: 1px solid var(--otw-line); border-radius: 5px; padding: 14px 16px;
}
.otw-card h4, .otw-card .mw-heading4 { margin: 0 0 6px; font-size: 1.05em; }
.otw-inquiry { border-left: 4px solid var(--otw-inquiry); }
.otw-inquiry-convergence { border-left-color: var(--otw-convergence); }
.otw-inquiry-commitment { border-left-color: var(--otw-commitment); }
.otw-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.85em; color: var(--otw-muted); }
.otw-card-title { font-weight: 700; font-size: 1.15em; margin-bottom: 6px; }
.otw-question { font-style: italic; margin-bottom: 10px; }
.otw-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.85em; color: var(--otw-muted); margin-bottom: 12px; }
.otw-stat::before { content: "•"; margin-right: 6px; color: var(--otw-line); }
.otw-stat:first-child::before { content: none; margin: 0; }
.otw-actions .mw-ui-button { margin: 0 6px 6px 0; }

.otw-phase {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.78em; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--otw-muted);
}
.otw-phase-inquiry { background: var(--otw-inquiry); }
.otw-phase-convergence { background: var(--otw-convergence); }
.otw-phase-commitment { background: var(--otw-commitment); }
.otw-phase-closed { background: #8a8f98; }

.otw-track { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.85em; }
.otw-track-step { padding: 3px 10px; border: 1px solid var(--otw-line); border-radius: 999px; color: var(--otw-muted); background: #fff; }
.otw-track-current { border-color: var(--otw-accent); color: var(--otw-ink); font-weight: 700; background: #fff6e8; }
.otw-track-arrow { color: var(--otw-line); }

/* graphics: series glyphs, zone-heading markers, phase track */
.otw-card-series::before { content: ""; display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px;
  background-repeat: no-repeat; background-size: contain; }
.otw-series-vitalrail .otw-card-series::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 3v18M17 3v18M5 7h14M5 12h14M5 17h14%22/%3E%3C/svg%3E"); }
.otw-series-re-forest .otw-card-series::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l5 7h-3l4 5h-4l3 5H7l3-5H6l4-5H7z%22/%3E%3Cpath d=%22M12 20v2%22/%3E%3C/svg%3E"); }
.otw-series-emip .otw-card-series::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2.5l8 4.6v9.8l-8 4.6-8-4.6V7.1z%22/%3E%3Cpath d=%22M12 2.5v19M4 7.1l8 4.6 8-4.6%22/%3E%3C/svg%3E"); }
.otw-series-re-stem .otw-card-series::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2.5l8 4.6v9.8l-8 4.6-8-4.6V7.1z%22/%3E%3Cpath d=%22M12 2.5v19M4 7.1l8 4.6 8-4.6%22/%3E%3C/svg%3E"); }

.otw-zone-head h2::before, .otw-zone-head .mw-heading2 h2::before { content: ""; display: inline-block; width: 26px; height: 26px;
  vertical-align: -4px; margin-right: 10px; background-repeat: no-repeat; background-size: contain; }
.otw-zone-active .otw-zone-head h2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23c47a12%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%228%22 stroke-dasharray=%223 3%22/%3E%3C/svg%3E"); }
.otw-zone-record .otw-zone-head h2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%231c3557%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h16M4 12h16M4 17h16%22/%3E%3Cpath d=%22M4 5v14M20 5v14%22/%3E%3C/svg%3E"); }

.otw-track { position: relative; padding: 6px 0; }
.otw-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; z-index: 0;
  background:
    linear-gradient(var(--otw-line), var(--otw-line)) top / 100% 1px no-repeat,
    linear-gradient(var(--otw-line), var(--otw-line)) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 8px, var(--otw-line) 8px 10px); }
.otw-track { justify-content: space-between; gap: 4px; }
.otw-track-step { position: relative; z-index: 1; padding: 2px 8px; font-size: 0.95em; white-space: nowrap; }
.otw-track-arrow { display: none; }
.otw-track-current { box-shadow: 0 0 0 3px #fff; }

/* record cards lift slightly on hover */
.otw-card { transition: transform .15s ease, box-shadow .15s ease; }
.otw-zone-record .otw-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(28,53,87,.10); }

/* ---- Activity, upcoming, join band -------------------------------------- */
.otw-two-col { margin-bottom: 36px; }
.otw-col { flex: 1 1 320px; }
.otw-activity .mw-changeslist { font-size: 0.92em; }
.otw-activity .mw-changeslist h4 { display: none; }
.otw-small { font-size: 0.85em; color: var(--otw-muted); margin-top: 8px; }
.otw-upcoming ul { list-style: none; margin: 0; padding: 0; }
.otw-upcoming li { padding: 8px 0; border-bottom: 1px solid var(--otw-line); }

.otw-join-band { background: var(--otw-ink); color: #fff; padding: 24px; border-radius: 6px; margin-bottom: 24px; }
.otw-join-band h2, .otw-join-band .mw-heading2 { color: #fff; border: none; margin-top: 0; }
.otw-join-band a { color: #ffe0b3; }
.otw-join-band .otw-role { flex: 1 1 240px; }
.otw-join-band h5, .otw-join-band .mw-heading5 { color: #fff; margin-top: 0; font-size: 1.05em; }
.otw-join-band .otw-cta { display: inline-block; margin-top: 14px; }
.otw-join-band .otw-cta-button { background: var(--otw-accent); border-color: var(--otw-accent); color: #fff; }

.otw-cta-button { font-weight: 700; }
.otw-respond { font-size: 0.85em; }
.otw-respond a::before { content: "↳ "; }
.otw-footer-contact { font-size: 0.9em; color: var(--otw-muted); padding-top: 12px; border-top: 1px solid var(--otw-line); }

/* join band texture */
.otw-join-band { background-color: var(--otw-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%221.3%22%3E%3Cg opacity=%220.13%22%3E%3Cpath d=%22M-4 84 L84 -4%22 transform=%22translate(-4 -4)%22/%3E%3Cpath d=%22M-4 84 L84 -4%22 transform=%22translate(4 4)%22/%3E%3Cpath d=%22M-0.2 71.8 L8.2 80.2%22/%3E%3Cpath d=%22M15.8 55.8 L24.2 64.2%22/%3E%3Cpath d=%22M31.8 39.8 L40.2 48.2%22/%3E%3Cpath d=%22M47.8 23.8 L56.2 32.2%22/%3E%3Cpath d=%22M63.8 7.8 L72.2 16.2%22/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(135deg, #1c3557 0%, #274a78 100%); }

/* ---- Site notice bar ---------------------------------------------------- */
#siteNotice .otw-notice {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
  background: var(--otw-paper); border: 1px solid var(--otw-line); border-left: 4px solid var(--otw-accent);
  padding: 8px 14px; border-radius: 4px; font-size: 0.95em; text-align: left;
}
#siteNotice .otw-notice .mw-ui-button { padding: 4px 12px; font-size: 0.9em; }

/* ---- Small screens ------------------------------------------------------
   Kept last: same specificity as the unconditional `.otw-zone`/
   `.otw-join-band` rules above, so it needs to come after them in source
   order to actually win at narrow widths. */
@media (max-width: 720px) {
  .otw-zone { padding: 16px 14px; }
  .otw-join-band { padding: 18px 14px; }
}

/* ---- Home Page: larger body paragraph text ---------------------------- */
.page-Home_Page #mw-content-text p {
  font-size: 17px;
  line-height: 1.6;
}
/* Excludes .otw-join-band explicitly (rather than relying on specificity)
   so its own white/small heading styling above is untouched -- this only
   affects plain body sub-headlines like "We have a challenge ahead of us."
   that aren't inside that or any other card component. */
.page-Home_Page #mw-content-text .mw-heading5:not(.otw-join-band *) {
  font-size: 20px;
  color: var(--otw-ink);
  margin: 1.5em 0 0.4em;
}

/* ---- Blog --------------------------------------------------------------- */
.otw-blogpost-head { margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--otw-line); }
.otw-blogpost-back { font-size: 0.85em; margin-bottom: 8px; }
.otw-blogpost-meta { color: var(--otw-muted); font-size: 0.92em; }
.otw-blogpost-tag {
  display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.88em;
  color: var(--otw-ink); background: var(--otw-paper); border: 1px solid var(--otw-line);
}
.otw-blogcard { border-left: 4px solid var(--otw-accent); }
.otw-blogcard-title { font-weight: 700; font-size: 1.1em; margin-bottom: 4px; }
.otw-blogcard-meta { color: var(--otw-muted); font-size: 0.85em; margin-bottom: 8px; }
.otw-blogcard-excerpt { font-size: 0.95em; }