Onboarding
/* ═══════════════════════════════════════════════════════════
SKYWARD AIR VIRTUAL — GETTING STARTED PAGE ADDITIONS Append to: MediaWiki:Common.css (add below existing styles) ═══════════════════════════════════════════════════════════ */
/* ── PAGE NAV BAR ── */ .sav-page-nav {
display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.75rem 2rem; background: #111418; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 2rem;
}
.sav-page-nav-label {
font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #8A9BB0; letter-spacing: 0.15em; text-transform: uppercase; margin-right: 0.5rem;
}
.sav-page-nav-link {
font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #8A9BB0 !important; text-decoration: none; padding: 0.2rem 0.65rem; border: 1px solid rgba(255,255,255,0.07); border-radius: 3px; transition: all 0.15s; letter-spacing: 0.05em;
}
.sav-page-nav-link:hover {
color: #F39C12 !important; border-color: rgba(230,126,34,0.3); background: rgba(230,126,34,0.06);
}
/* ── CONTENT WRAPPER ── */ .sav-content {
padding: 0;
}
/* ── SECTION BLOCKS ── */ .sav-section {
margin: 0 2rem 1.5rem; background: #111418; border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; overflow: hidden; transition: border-color 0.2s;
}
.sav-section:hover {
border-color: rgba(230,126,34,0.2);
}
.sav-section-header {
display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02);
}
.sav-step-num {
font-family: 'Bebas Neue', 'Impact', sans-serif; font-size: 2.5rem; line-height: 1; color: rgba(230,126,34,0.25); letter-spacing: 0.05em; min-width: 52px;
}
.sav-section-title {
font-family: 'Bebas Neue', 'Impact', sans-serif; font-size: 1.6rem; letter-spacing: 0.06em; color: #F0F4F8; line-height: 1;
}
.sav-section-sub {
font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; color: #8A9BB0; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.2rem;
}
.sav-section-body {
padding: 1.5rem;
}
.sav-p {
font-size: 0.88rem; color: #B0BEC5; line-height: 1.75; margin-bottom: 1.25rem;
}
/* ── STEP LIST ── */ .sav-steps-list {
display: flex; flex-direction: column; gap: 0; margin-bottom: 1.25rem; border: 1px solid rgba(255,255,255,0.06); border-radius: 5px; overflow: hidden;
}
.sav-step-item {
display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.15s;
}
.sav-step-item:last-child { border-bottom: none; } .sav-step-item:hover { background: rgba(230,126,34,0.04); }
.sav-step-marker {
flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(230,126,34,0.15); border: 1px solid rgba(230,126,34,0.35); color: #F39C12; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; font-weight: 500; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem;
}
.sav-step-title {
font-size: 0.85rem; font-weight: 500; color: #F0F4F8; margin-bottom: 0.3rem;
}
.sav-step-desc {
font-size: 0.78rem; color: #8A9BB0; line-height: 1.65;
}
.sav-step-desc a { color: #E67E22 !important; } .sav-step-desc a:hover { color: #F39C12 !important; }
/* ── INFOBOXES ── */ .sav-infobox {
display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.9rem 1.1rem; border-radius: 5px; font-size: 0.8rem; line-height: 1.65; margin-top: 1rem;
}
.sav-infobox-icon {
font-size: 1rem; flex-shrink: 0; margin-top: 0.05rem;
}
.sav-infobox--amber {
background: rgba(230,126,34,0.08); border: 1px solid rgba(230,126,34,0.25); color: #B0BEC5;
}
.sav-infobox--amber strong { color: #F39C12; }
.sav-infobox--steel {
background: rgba(138,155,176,0.06); border: 1px solid rgba(138,155,176,0.18); color: #B0BEC5;
}
.sav-infobox--steel strong { color: #F0F4F8; }
.sav-infobox--red {
background: rgba(192,57,43,0.1); border: 1px solid rgba(192,57,43,0.3); color: #B0BEC5;
}
.sav-infobox--red strong { color: #E74C3C; }
/* ── SIMULATOR CARDS ── */ .sav-sim-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem;
}
.sav-sim-card {
background: #181C22; border: 1px solid rgba(255,255,255,0.07); border-radius: 5px; padding: 1.1rem 0.85rem; text-align: center; transition: border-color 0.15s;
}
.sav-sim-card:hover { border-color: rgba(230,126,34,0.25); }
.sav-sim-icon { font-size: 1.75rem; margin-bottom: 0.5rem; }
.sav-sim-name {
font-size: 0.8rem; font-weight: 500; color: #F0F4F8; margin-bottom: 0.2rem; line-height: 1.3;
}
.sav-sim-short {
font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #8A9BB0; letter-spacing: 0.05em; margin-bottom: 0.6rem;
}
.sav-sim-status {
font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; letter-spacing: 0.12em; padding: 0.15rem 0.5rem; border-radius: 2px; text-transform: uppercase; display: inline-block;
}
.sav-sim-status--supported {
background: rgba(39,174,96,0.15); border: 1px solid rgba(39,174,96,0.3); color: #2ECC71;
}
.sav-sim-status--optional {
background: rgba(230,126,34,0.12); border: 1px solid rgba(230,126,34,0.25); color: #F39C12;
}
/* ── RANK TABLE ── */ .sav-rank-table-wrap {
margin-bottom: 1.25rem; overflow-x: auto; border-radius: 5px; border: 1px solid rgba(255,255,255,0.07);
}
.sav-rank-table {
width: 100%; border-collapse: collapse;
}
.sav-rank-table th {
background: #181C22; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8A9BB0; padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); font-weight: 500;
}
.sav-rank-table td {
padding: 0.7rem 1rem; font-size: 0.8rem; color: #B0BEC5; border-bottom: 1px solid rgba(255,255,255,0.04); background: transparent !important; border: none; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sav-rank-table tr:last-child td { border-bottom: none; } .sav-rank-table tr:hover td { background: rgba(255,255,255,0.02) !important; }
.sav-rank-badge {
display: inline-block; font-size: 0.75rem; font-weight: 500; padding: 0.18rem 0.6rem; border-radius: 3px; white-space: nowrap;
}
.sav-rank--1 { background: rgba(138,155,176,0.12); color: #B0BEC5; border: 1px solid rgba(138,155,176,0.2); } .sav-rank--2 { background: rgba(138,155,176,0.14); color: #C5D0DA; border: 1px solid rgba(138,155,176,0.25); } .sav-rank--3 { background: rgba(230,126,34,0.1); color: #E67E22; border: 1px solid rgba(230,126,34,0.2); } .sav-rank--4 { background: rgba(230,126,34,0.13); color: #F39C12; border: 1px solid rgba(230,126,34,0.28); } .sav-rank--5 { background: rgba(230,126,34,0.16); color: #F5A623; border: 1px solid rgba(230,126,34,0.32); } .sav-rank--6 { background: rgba(192,57,43,0.12); color: #E74C3C; border: 1px solid rgba(192,57,43,0.25); } .sav-rank--7 { background: rgba(192,57,43,0.18); color: #E74C3C; border: 1px solid rgba(192,57,43,0.35); } .sav-rank--8 { background: rgba(192,57,43,0.22); color: #FF6B6B; border: 1px solid rgba(192,57,43,0.4); }
/* ── RULES GRID ── */ .sav-rules-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem;
}
.sav-rule-item {
display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; background: #181C22; border: 1px solid rgba(255,255,255,0.06); border-radius: 5px; font-size: 0.8rem; color: #B0BEC5; line-height: 1.6;
}
.sav-rule-icon {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; margin-top: 0.05rem;
}
.sav-rule--green { background: rgba(39,174,96,0.15); color: #2ECC71; border: 1px solid rgba(39,174,96,0.3); } .sav-rule--red { background: rgba(192,57,43,0.15); color: #E74C3C; border: 1px solid rgba(192,57,43,0.3); }
.sav-rule-text strong { color: #F0F4F8; }
/* ── RESPONSIVE ── */ @media screen and (max-width: 900px) {
.sav-sim-grid { grid-template-columns: repeat(2, 1fr); }
.sav-rules-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 600px) {
.sav-section { margin: 0 1rem 1.25rem; }
.sav-sim-grid { grid-template-columns: 1fr 1fr; }
.sav-page-nav { padding: 0.75rem 1rem; }
}