/* CorpsGuide marketing site layout & components. Colors come from --mud-palette-* (theme.css), so
everything below adapts to light/dark automatically. */
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background-color: var(--mud-palette-background);
}
a {
text-decoration: none;
}
* {
-webkit-tap-highlight-color: transparent;
}
/* FocusOnNavigate (Routes.razor) moves focus to the page
on load/navigation so screen readers
announce the new page. That leaves a visible focus ring on the heading until you click away. The
markup is untouched, so the SSR output stays
the same crawlable table it always was; only the presentation changes. */
@media (max-width: 599px) {
.calc-table--stacked thead {
border: 0;
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.calc-table--stacked tr {
display: block;
}
.calc-table--stacked tbody tr {
border-bottom: 1px solid var(--mud-palette-lines-default);
padding: 0.6rem 0;
}
/* Portion headings ("Destroys", "Drills") keep spanning the row. */
.calc-table--stacked tbody th {
border: 0;
display: block;
padding: 0.9rem 0 0.2rem;
}
.calc-table--stacked td {
border: 0;
display: grid;
gap: 0.25rem 0.9rem;
grid-template-columns: minmax(5.5rem, 34%) 1fr;
padding: 0.15rem 0;
}
/* The column heading, repeated per cell — the only way a stacked row stays self-describing. */
.calc-table--stacked td::before {
color: var(--mud-palette-text-secondary);
content: attr(data-label);
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Undo the last-column emphasis: in a stacked row it lands on a citation, not a figure. */
.calc-table--stacked td:last-child {
font-variant-numeric: normal;
font-weight: 400;
}
}
/* Standards tables whose every column after the first is a number (body composition), not just the
last one — keeps the digits aligned across all of them. */
.calc-table-numeric td:not(:first-child) {
font-variant-numeric: tabular-nums;
font-weight: 700;
}
/* ---------- Ribbon rack builder ----------
The rack is centered and the rows stack tight, the way a rack is actually worn. Ribbon art is a
fixed 150x42 aspect, so widths are set per row-count and height follows. */
.rack-preview {
align-items: center;
background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
border: 1px solid var(--mud-palette-lines-default);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 0.75rem;
min-height: 132px;
justify-content: center;
padding: 1.1rem 1rem;
}
.rack-empty {
color: var(--mud-palette-text-secondary);
font-size: 0.9rem;
margin: 0;
text-align: center;
}
.rack-row {
display: flex;
gap: 2px;
justify-content: center;
}
/* Each ribbon is a button so removal works by keyboard as well as pointer. */
.rack-ribbon {
background: none;
border: 1px solid transparent;
border-radius: 3px;
cursor: pointer;
display: block;
line-height: 0;
padding: 0;
}
.rack-ribbon:hover,
.rack-ribbon:focus-visible {
border-color: var(--mud-palette-primary);
}
.rack-ribbon img {
display: block;
height: auto;
width: 88px;
}
.rack-controls {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: space-between;
margin-top: 0.9rem;
}
/* Picker list: one scrollable column so the rack above stays in view while choosing. */
.ribbon-picker {
border: 1px solid var(--mud-palette-lines-default);
border-radius: 12px;
list-style: none;
margin: 0;
max-height: 26rem;
overflow-y: auto;
padding: 0;
}
.ribbon-option + .ribbon-option {
border-top: 1px solid var(--mud-palette-lines-default);
}
.ribbon-option-button {
align-items: center;
background: none;
border: none;
color: inherit;
cursor: pointer;
display: flex;
font: inherit;
gap: 0.85rem;
padding: 0.6rem 0.85rem;
text-align: left;
width: 100%;
}
.ribbon-option-button:hover,
.ribbon-option-button:focus-visible {
background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}
.ribbon-option-button img {
flex: 0 0 auto;
height: auto;
width: 64px;
}
.ribbon-option-name {
flex: 1 1 auto;
font-size: 0.92rem;
min-width: 0;
}
.ribbon-option.is-selected .ribbon-option-name {
font-weight: 700;
}
/* Cutting scores table: MOS codes read as data, and the change column keeps its icon and text on
one line. Long MOS titles wrap rather than forcing the table wider than its scroll container. */
.scores-head {
align-items: baseline;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: space-between;
}
.scores-table {
min-width: 34rem;
}
.scores-table td {
vertical-align: top;
}
.scores-mos {
font-variant-numeric: tabular-nums;
font-weight: 700;
white-space: nowrap;
}
.scores-change {
align-items: center;
display: inline-flex;
gap: 0.35rem;
white-space: nowrap;
}
/* ---------- Ad slots ----------
Space is reserved here, in CSS, so an injected ad lands in a pre-sized box and costs no layout
shift. Heights are the standard unit sizes plus room for the label; if a slot is ever served a
different size, change the height here to match or CLS comes straight back. The container is
centered and overflow-hidden so an oversized creative cannot widen the page. */
.ad-slot {
align-items: center;
display: flex;
flex-direction: column;
gap: 0.35rem;
justify-content: center;
margin-inline: auto;
max-width: 100%;
overflow: hidden;
}
.ad-slot-label {
color: var(--mud-palette-text-secondary);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1;
opacity: 0.75;
text-transform: uppercase;
}
.ad-slot-fill {
max-width: 100%;
width: 100%;
}
/* 300x250 rectangle inside prose. */
.ad-slot-inarticle .ad-slot-fill {
height: 250px;
width: 300px;
}
/* 320x100 on mobile, 728x90 from the small breakpoint up. */
.ad-slot-leaderboard .ad-slot-fill {
height: 100px;
width: 320px;
}
@media (min-width: 768px) {
.ad-slot-leaderboard .ad-slot-fill {
height: 90px;
width: 728px;
}
}
/* Small uppercase qualifier under a card title (e.g. a category's point maximum). */
.card-eyebrow {
color: var(--mud-palette-primary);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
margin: 0.35rem 0 0;
text-transform: uppercase;
}
/* Checkbox group inside a calculator section (JEPES bonus billets). */
.calc-checks {
display: grid;
gap: 0.1rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.calc-checks {
grid-template-columns: 1fr 1fr;
}
}
/* Standard-version marker centered above the calculator inputs. */
.calc-badge-row {
display: flex;
justify-content: center;
margin-bottom: 1.1rem;
}
/* Numbered step badge, reusing the tinted .feature-icon square instead of a brand glyph. */
.step-number {
font-size: 1.25rem;
font-weight: 800;
}
/* Bulleted prose lists inside a tool article. */
.tool-list {
color: var(--mud-palette-text-secondary);
line-height: 1.7;
margin: 0;
padding-left: 1.25rem;
}
.tool-list li + li {
margin-top: 0.5rem;
}
/* ---------- Installations ---------- */
.installations-count {
color: var(--mud-palette-text-secondary);
}
.installations-map {
background-color: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default);
border-radius: 12px;
overflow: hidden;
}
.installations-map__svg {
display: block;
height: auto;
width: 100%;
}
/* Land takes the theme's text colour so it inverts with light/dark. currentColor plus fill-opacity
rather than color-mix — both are core SVG, so this does not need a modern-browser floor. */
.installations-map__land {
color: var(--mud-palette-text-primary);
}
.installations-map__land path {
fill: currentColor;
fill-opacity: 0.12;
stroke: currentColor;
stroke-opacity: 0.22;
stroke-width: 0.5;
vector-effect: non-scaling-stroke;
}
.installations-map__halo {
fill: var(--mud-palette-primary);
fill-opacity: 0.28;
}
.installations-map__dot {
fill: var(--mud-palette-primary);
/* Ring in the map's own background colour, separating the marker from the land beneath it. */
stroke: var(--mud-palette-surface);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
/* Pins are real links, so they need a real focus indicator for keyboard users. */
.installations-map__pins a:focus-visible {
outline: 2px solid var(--mud-palette-primary);
outline-offset: 2px;
}
.installations-map__pins a:hover .installations-map__halo {
fill-opacity: 0.55;
}
.installations-map__note {
color: var(--mud-palette-text-secondary);
display: block;
margin-top: 0.5rem;
}
.installations-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.installations-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.installation-card {
background-color: color-mix(in srgb, var(--mud-palette-surface) 70%, transparent);
border: 1px solid var(--mud-palette-lines-default);
border-radius: 12px;
padding: 1.15rem 1.25rem;
/* Offsets the sticky header when a map pin jumps to this card. */
scroll-margin-top: 5rem;
}
.installation-card__name {
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
}
.installation-card__meta {
align-items: center;
color: var(--mud-palette-text-secondary);
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.5rem 0 0.75rem;
}
.installation-card__chip {
background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
border-radius: 999px;
color: var(--mud-palette-text-primary);
font-size: 0.72rem;
font-weight: 800;
padding: 0.2rem 0.5rem;
}
.installation-card__overview {
margin: 0 0 0.75rem;
}
.installation-card__note {
color: var(--mud-palette-text-secondary);
font-size: 0.85rem;
margin: 0 0 0.5rem;
}
.installation-card__label {
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.04em;
margin: 0 0 0.3rem;
text-transform: uppercase;
}
.installation-card__commands {
margin: 0 0 0.85rem;
padding-left: 1.15rem;
}
.installation-card__commands li + li {
margin-top: 0.25rem;
}
.installation-card__links {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 0;
}
/* ---------- Back to top ---------- */
/* Starts hidden and is revealed by js/scroll-to-top.js, so with scripting off it never appears. */
.scroll-to-top {
align-items: center;
background-color: var(--mud-palette-primary);
border: none;
border-radius: 50%;
bottom: 1.5rem;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.32);
color: var(--mud-palette-primary-text);
cursor: pointer;
display: flex;
height: 3rem;
justify-content: center;
opacity: 0;
padding: 0;
pointer-events: none;
position: fixed;
right: 1.5rem;
transform: translateY(0.75rem);
transition: opacity 160ms ease, transform 160ms ease, background-color 160ms ease;
width: 3rem;
z-index: 1200;
}
.scroll-to-top.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.scroll-to-top:hover {
background-color: var(--mud-palette-primary-darken);
}
.scroll-to-top:focus-visible {
outline: 2px solid var(--mud-palette-primary);
outline-offset: 3px;
}
/* Respect the OS setting: no slide-in for anyone who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
.scroll-to-top {
transform: none;
transition: opacity 120ms ease;
}
}
/* Clear of the safe area on phones with a home indicator. */
@supports (padding: env(safe-area-inset-bottom)) {
.scroll-to-top {
bottom: calc(1.5rem + env(safe-area-inset-bottom));
}
}
/* ---------- Utilities ---------- */
.d-none {
display: none !important;
}
@media (min-width: 960px) {
.d-md-flex {
display: flex !important;
}
.d-md-none {
display: none !important;
}
}
/* ---------- In-widget result CTA (growth plan §3, item 1.1) ---------- */
/* Secondary by design. ui.md: the calculator result is the user's goal and the app download is
incidental, so separation comes from whitespace and a hairline rather than a filled panel —
anything heavier competes with the number the user came for. */
.result-cta {
border-top: 1px solid var(--mud-palette-lines-default);
margin-top: 1.25rem;
padding-top: 1rem;
}
/* Deprioritized by weight and lightness, not by color alone (ui.md contrast rule), so the hierarchy
still reads for anyone who cannot distinguish the primary hue. */
.result-cta-message {
color: var(--mud-palette-text-secondary);
font-size: 0.875rem;
line-height: 1.5;
margin: 0 0 0.6rem;
max-width: 46ch;
}
/* Size.Small drops these text buttons under the 44px minimum touch target. Being secondary must not
mean being hard to hit — ui.md: "Do not hide important actions behind tiny targets." */
.store-buttons-compact .mud-button-root {
min-height: 44px;
}
/* ---------- MARADMIN pages (growth plan §4, item 2.1) ---------- */
/* Titles are published ALL CAPS and run to 270 characters, dense with long unbroken words
(NONCOMMISSIONED). Left verbatim because they are official document titles, so the readability
problem is solved typographically: smaller than a normal h1, looser leading, and an explicit wrap
rule so a long word cannot overflow the viewport on a phone. */
.maradmin-title {
font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2rem);
line-height: 1.25;
overflow-wrap: break-word;
text-wrap: pretty;
}
.maradmin-meta {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1rem;
}
.maradmin-date {
color: var(--mud-palette-text-secondary);
font-size: 0.9rem;
}
/* Status is real information — a Marine must know they are reading a dead policy — but in a listing
the titles are the content, and a saturated outlined pill out-shouts them. So: a soft filled chip,
weight and a tinted ground instead of a bright border. The word itself still carries the meaning,
so the distinction survives without colour (ui.md contrast rule). */
.maradmin-status {
border-radius: 6px;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.05em;
line-height: 1.7;
padding: 0 0.4rem;
text-transform: uppercase;
white-space: nowrap;
}
/* Mixed toward the text colour rather than used at full strength: alarm red reads as "error", and a
cancelled MARADMIN is a status, not a fault. */
.maradmin-status.is-cancelled {
background-color: color-mix(in srgb, var(--mud-palette-error) 14%, transparent);
color: color-mix(in srgb, var(--mud-palette-error) 70%, var(--mud-palette-text-primary));
}
.maradmin-status.is-active {
background-color: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
color: color-mix(in srgb, var(--mud-palette-success) 70%, var(--mud-palette-text-primary));
}
/* The detail page has one status and it is a headline fact, so it keeps more presence than the
listing chips do. */
.maradmin-meta .maradmin-status {
font-size: 0.72rem;
padding: 0.1rem 0.55rem;
}
/* The Marine Corps publishes these as fixed-width text: paragraph numbering and inline tables depend
on the column alignment, so reflowing it as prose would corrupt the content. Scrolls inside itself
rather than forcing the page sideways. */
.maradmin-body {
background-color: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
border: 1px solid var(--mud-palette-lines-default);
border-radius: 16px;
font-size: 0.85rem;
line-height: 1.6;
margin: 0;
overflow-x: auto;
padding: 1.25rem;
white-space: pre-wrap;
word-break: normal;
}
/* ---- Listing ---- */
.maradmin-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.maradmin-list-item {
border-bottom: 1px solid var(--mud-palette-lines-default);
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1rem;
justify-content: space-between;
padding: 0.85rem 0;
}
.maradmin-list-link {
color: inherit;
display: flex;
flex: 1 1 20rem;
flex-direction: column;
gap: 0.2rem;
/* Comfortably past the 44px minimum target, since the whole row is the hit area. */
min-height: 44px;
text-decoration: none;
}
.maradmin-list-link:hover .maradmin-list-title,
.maradmin-list-link:focus-visible .maradmin-list-title {
text-decoration: underline;
}
.maradmin-list-number {
color: var(--mud-palette-primary);
font-size: 0.8rem;
font-weight: 700;
}
/* Clamped to two lines for scanability. Visual only: the full title stays in the DOM, so crawlers
and screen readers still get all of it. */
.maradmin-list-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
overflow-wrap: break-word;
}
/* Status sits before the date, and the date gets a fixed lane, so the date column stays straight
whether or not a row carries a chip. Previously a single CANCELLED badge shunted that row's date
left out of alignment with every other row — the ragged edge read as a layout bug. */
.maradmin-list-meta {
align-items: center;
display: flex;
flex: 0 0 auto;
gap: 0.5rem;
justify-content: flex-end;
}
.maradmin-list-meta .maradmin-date {
min-width: 6.25rem;
text-align: right;
}
/* On a phone the row stacks, so the fixed lane would only push the date away from its title. */
@media (max-width: 599px) {
.maradmin-list-meta {
justify-content: flex-start;
}
.maradmin-list-meta .maradmin-date {
min-width: 0;
text-align: left;
}
}
.maradmin-archive {
display: grid;
gap: 0.5rem 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Rank structure page (growth plan §4, item 2.2) ---------- */
.rank-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.rank-entry {
border: 1px solid var(--mud-palette-lines-default);
border-radius: 16px;
display: flex;
gap: 1.25rem;
padding: 1.25rem;
}
/* Insignia sit on a light plate regardless of theme: the artwork is mostly gold and dark navy, and
several pieces vanish against a dark page background. */
.rank-entry__insignia {
align-items: center;
background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
border-radius: 12px;
display: flex;
flex: 0 0 auto;
height: 96px;
justify-content: center;
width: 96px;
}
/* General officers: one star repeated, so a star is the same size at O-7 as at O-10.
Single row, never wrapped — that is how the insignia is worn and how the app's rank grid draws it.
Star size below is set so four plus their gaps fit the plate without wrapping. */
.rank-entry__stars {
align-items: center;
display: flex;
flex-wrap: nowrap;
gap: 3px;
justify-content: center;
}
/* Selector carries the parent on purpose. ".rank-entry__insignia img" (0,1,1) outranks a bare
".rank-entry__star" (0,1,0), and it sets width/height auto with an 80px cap — so without this the
stars render at 80px each and spill out of the plate. */
.rank-entry__insignia .rank-entry__star {
/* 4 stars x 18px + 3 gaps x 3px = 81px, inside the 96px plate with room to spare. */
height: 18px;
max-height: 18px;
max-width: 18px;
object-fit: contain;
width: 18px;
}
/* Stated in words, so the plate never reads as a failed image load. */
.rank-entry__no-insignia {
color: var(--mud-palette-text-secondary);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.2;
padding: 0 0.4rem;
text-align: center;
text-transform: uppercase;
}
.rank-entry__insignia img {
height: auto;
max-height: 80px;
max-width: 80px;
object-fit: contain;
width: auto;
}
.rank-entry__body {
flex: 1 1 auto;
min-width: 0;
}
.rank-entry__meta {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0.35rem 0 0.75rem;
}
.rank-entry__grade,
.rank-entry__abbr {
border-radius: 6px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 0.1rem 0.45rem;
}
.rank-entry__grade {
background-color: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
color: color-mix(in srgb, var(--mud-palette-primary) 75%, var(--mud-palette-text-primary));
}
.rank-entry__abbr {
background-color: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
color: var(--mud-palette-text-secondary);
}
.rank-entry__copy {
line-height: 1.6;
margin: 0 0 0.6rem;
}
/* Cross-service equivalents. Separated by a rule and set quieter than the description: it is
supporting context for the rank above, not the point of the entry. */
/* Cross-service equivalents. Separated by a rule and set quieter than the description: it is
supporting context for the rank above, not the point of the entry. */
.rank-entry__equivalents {
border-top: 1px solid var(--mud-palette-lines-default);
display: grid;
gap: 0.55rem 0.75rem;
/* Even columns so every service block is the same width and the insignia line up down the page.
At E-9 a service can hold five ranks, so blocks must be able to grow downward, not sideways. */
grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
margin: 0.9rem 0 0;
padding-top: 0.8rem;
}
.rank-entry__equivalents-label {
color: var(--mud-palette-text-secondary);
font-size: 0.72rem;
font-weight: 700;
grid-column: 1 / -1;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.rank-equivalent {
display: flex;
flex-direction: column;
font-size: 0.85rem;
gap: 0.25rem;
line-height: 1.35;
}
.rank-equivalent__branch {
color: var(--mud-palette-text-secondary);
font-size: 0.72rem;
}
/* A service can hold several ranks at one grade, so these stack rather than running on. */
.rank-equivalent__ranks {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.rank-equivalent__rank {
align-items: center;
display: flex;
gap: 0.4rem;
}
/* A fixed box, not just a height cap. Insignia aspect ratios vary enormously — narrow Army chevrons
against wide Air Force devices — so capping only the height left every chip a different width and
nothing lined up. object-fit keeps each image whole inside the same footprint, and the plate keeps
gold and dark-navy artwork legible in both themes. */
.rank-equivalent__insignia {
background-color: color-mix(in srgb, var(--mud-palette-text-primary) 7%, transparent);
border-radius: 4px;
flex: 0 0 auto;
height: 24px;
object-fit: contain;
padding: 2px;
width: 34px;
}
/* Star ranks get a row instead of a single image. Width is allowed to exceed the standard box: four
stars squeezed into 34px would be four unreadable dots, and these chips stack vertically inside a
service block, so a wider one does not knock anything out of column. */
.rank-equivalent__insignia.is-stars {
align-items: center;
background: none;
display: flex;
flex-wrap: nowrap;
gap: 2px;
justify-content: flex-start;
padding: 0;
width: auto;
}
/* Parent in the selector for the same reason as the main plate: ".rank-equivalent__insignia" would
otherwise not outrank the generic sizing rules. */
.rank-equivalent__insignia .rank-equivalent__star {
flex: 0 0 auto;
height: 13px;
max-height: 13px;
max-width: 13px;
object-fit: contain;
width: 13px;
}
/* Same footprint as a real insignia so the grid stays in column; the em dash reads as "nothing
here" without pretending to be artwork. The rank name is on the chip's title attribute. */
.rank-equivalent__insignia.is-none {
align-items: center;
color: var(--mud-palette-text-secondary);
display: flex;
font-size: 0.8rem;
justify-content: center;
}
.rank-equivalent__abbr {
font-weight: 700;
}
/* On a phone the insignia moves above the text: side by side leaves the description too narrow for
the long rank names these entries carry. */
@media (max-width: 599px) {
.rank-entry {
flex-direction: column;
gap: 0.9rem;
}
.rank-entry__insignia {
height: 80px;
width: 80px;
}
}
/* ---------- Rank page jump navigation ---------- */
.rank-jump {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
}
.rank-jump__link {
background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
border-radius: 999px;
color: var(--mud-palette-primary);
display: inline-flex;
align-items: center;
font-size: 0.85rem;
font-weight: 600;
/* Full 44px target: these are the page's primary navigation on a phone, where the alternative is
scrolling past 29 rank cards. */
min-height: 44px;
padding: 0 0.95rem;
text-decoration: none;
}
.rank-jump__link:hover,
.rank-jump__link:focus-visible {
background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}
/* The app bar is Fixed, so an anchored section would land underneath it without this. */
.rank-section {
scroll-margin-top: 6rem;
}
/* ---------- MOS list (growth plan §4, item 2.3) ---------- */
/* Visible by default, and hidden by a