Jump to content

MediaWiki:Common.css: Difference between revisions

From OnTrackWorld
← Older editNewer edit →

CNeiss (talk | contribs)

6 user groups
545 edits
No edit summary
No edit summary
Line 208: Line 208:
     Matches the look already live on the current site. Reuses that site's own background
     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. */
     asset rather than a fresh upload; swap the url() below if a local copy is preferred. */
   #vector-main-menu-dropdown .vector-dropdown-content {
   #vector-main-menu-dropdown .vector-dropdown-content,
  #mw-panel {
     background:
     background:
       linear-gradient(rgba(247,245,240,.93), rgba(247,245,240,.93)),
       linear-gradient(rgba(247,245,240,.6), rgba(247,245,240,.6)),
       url("https://ontrackworld.com/resources/assets/Background.jpg") center top / cover no-repeat;
       url("https://ontrackworld.com/resources/assets/Background.jpg") center top / cover no-repeat;
     box-shadow: 0 10px 30px rgba(10,20,30,.35);
     box-shadow: 0 10px 30px rgba(10,20,30,.35);
   }
   }
   #mw-panel .vector-menu-heading {
   #mw-panel .vector-menu-heading,
  #vector-main-menu .vector-menu-heading {
     font-weight: 700 !important;
     font-weight: 700 !important;
     color: #1a1a1a !important;
     color: #1a1a1a !important;
     font-size: 1.02em !important;
     font-size: 1.02em !important;
   }
   }

Revision as of 16:40, 14 September 2026

/* ==========================================================================
   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: #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; }

.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. */
  #vector-main-menu-dropdown .vector-dropdown-content,
  #mw-panel {
    background:
      linear-gradient(rgba(247,245,240,.6), rgba(247,245,240,.6)),
      url("https://ontrackworld.com/resources/assets/Background.jpg") center top / cover no-repeat;
    box-shadow: 0 10px 30px rgba(10,20,30,.35);
  }
  #mw-panel .vector-menu-heading,
  #vector-main-menu .vector-menu-heading {
    font-weight: 700 !important;
    color: #1a1a1a !important;
    font-size: 1.02em !important;
  }
Retrieved from "https://priceless-meitner.74-208-238-145.plesk.page/w/index.php?title=MediaWiki:Common.css&oldid=485"