MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ==========================================================================
OnTrackWorld home page and inquiry components.
Append to MediaWiki:Common.css (keep whatever is already there).
Palette: adjust --otw-ink and --otw-accent to the logo colours in onelineotw.svg.
========================================================================== */
: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: #ffffff; /* 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; }
.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); }
/* ---- Zones ------------------------------------------------------------- */
.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); }
/* ---- Cards ------------------------------------------------------------- */
.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; }
/* ---- Phase badges and track ------------------------------------------- */
.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); }
/* ---- 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); }
/* ---- 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 ----------------------------------------------------- */
@media (max-width: 720px) {
.otw-zone { padding: 16px 14px; }
.otw-join-band { padding: 18px 14px; }
}
/* ==========================================================================
Graphics: original SVG icons and textures as data URIs. Generated by build_graphics.py.
Same files are in graphics/ if you prefer to upload them as File: pages.
========================================================================== */
.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"); }
/* series glyph on inquiry cards */
.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"); }
/* zone headings get a marker */
.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"); }
/* phase track drawn as a length of track */
.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; }
/* 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%); }
/* 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); }
.otw-zone-record .otw-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(28,53,87,.10); }
/* ---- Sidebar (Vector 2022 main menu): photo-backed card + bold section headings -----
Matches the look already live on the current site. Reuses that site's own background
asset rather than a fresh upload; swap the url() below if a local copy is preferred. */
body {
background: #0f2233 url("https://ontrackworld.com/resources/assets/Background.jpg") center top / cover no-repeat fixed;
}
.mw-page-container {
background: transparent !important;
}
#content {
background: #fff;
margin: 16px 16px 16px 0;
padding: 20px 26px 26px;
border-radius: 8px;
box-shadow: 0 6px 16px rgba(10,20,30,.15);
box-sizing: border-box;
}
.vector-header-container {
background: #fff;
}
#vector-main-menu-dropdown .vector-dropdown-content,
#vector-main-menu-pinned-container,
#vector-page-titlebar-toc .vector-dropdown-content,
#vector-toc-pinned-container {
background: var(--otw-paper);
border-radius: 8px;
margin: 16px 0 16px 16px;
padding: 18px 16px 24px;
box-sizing: border-box;
box-shadow: 0 6px 16px rgba(10,20,30,.18);
}
#mw-panel .vector-menu-heading,
#vector-main-menu .vector-menu-heading {
font-weight: 700 !important;
color: #1a1a1a !important;
font-size: 1.02em !important;
}
/* ---- 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;
}