/*
* Sovereign Tracker — Theme tokens (dark default, light via system pref + override)
* Version: 1.5.0
* https://goldsovereignvault.com
*
* Theming model:
* :root → DARK tokens (default)
* @media (prefers-color-scheme: light) → LIGHT tokens (when no explicit override)
* :root[data-theme="light"] → LIGHT tokens (explicit user override)
* :root[data-theme="dark"] → DARK tokens (forces dark over system pref)
*
* `data-theme` is set on by an inline script that reads
* sessionStorage('st_theme'). FOUC-prevention runs synchronously before paint.
*/
/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
/* Brand colours — same in both themes */
--st-navy: #0D1B2A; /* royal blue brand colour, e.g. text on gold */
--st-gold: #C9A84C;
--st-gold-light: #E8C96D;
--st-gold-dark: #A0822E;
/* Status colours — same in both themes */
--st-success: #4CAF82;
--st-danger: #E05252;
--st-warning: #D4A017;
/* Semantic accent — used for text-style highlights (headings, links,
prices). Dark mode keeps gold for the rich Bloomberg-on-navy feel.
Light mode flips this to navy in the override below — gold-on-cream
fails contrast, while navy-on-cream reads like a luxury auction
catalogue (NAC AG, Spink, Heritage). Buttons retain `--st-gold`
directly so the brand CTA stays gold across both themes. */
--st-accent: var(--st-gold);
--st-accent-strong: var(--st-gold-light);
/* Semantic surface tokens — DARK defaults */
--st-bg: #0D1B2A; /* page background */
--st-bg-deep: #0A1420; /* footer / secondary header */
--st-bg-deepest: #060D15; /* copyright bar */
--st-surface: #1C2E40; /* card / panel surface */
--st-surface-2: #253D52; /* hover / secondary surface */
--st-surface-3: #162536; /* alternate surface (homepage cards) */
--st-text: #E8E8E8;
--st-text-muted: #9BA8B4;
--st-text-faint: #6B7A8A;
--st-border: #2A3F54;
--st-border-subtle: rgba(255, 255, 255, 0.06);
--st-border-faint: rgba(255, 255, 255, 0.05);
--st-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
--st-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.6);
--st-shadow-header: 0 2px 20px rgba(0, 0, 0, 0.3);
/* Legacy aliases — kept for backwards compat with existing rules */
--st-slate: var(--st-surface);
--st-slate-light: var(--st-surface-2);
/* Misc */
--st-radius: 0; /* squared corners site-wide — NAC catalogue look */
--st-radius-sm: 0;
--st-transition: 0.18s ease;
--st-font-mono: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
}
/* ── Light theme — system preference (no explicit user override) ─────────────── */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--st-bg: #F3F3F2; /* near-neutral grey, NAC-inspired */
--st-bg-deep: #EBEBEA;
--st-bg-deepest: #DEDEDC;
--st-surface: #FFFFFF;
--st-surface-2: #F7F7F6;
--st-surface-3: #FAFAF9;
--st-text: #1A1A1A;
--st-text-muted: #4A5563;
--st-text-faint: #6B7280;
--st-border: #D8D8D6;
--st-border-subtle: rgba(0, 0, 0, 0.08);
--st-border-faint: rgba(0, 0, 0, 0.06);
--st-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
--st-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.10);
--st-shadow-header: 0 2px 14px rgba(0, 0, 0, 0.06);
/* Antique gold tuned for legibility on warm off-white.
~4:1 contrast on `--st-bg` — borderline AA but reads clearly as
gold rather than the previous olive. Buttons paired with navy
text remain high-contrast. */
--st-gold: #A88130;
--st-gold-light: #C8A040;
--st-gold-dark: #7A5A0F;
/* Accent flips to navy on light surfaces. Using a slightly brighter
navy (#1F3A5C) rather than pure brand `--st-navy` so it reads as
blue rather than near-black, while still passing AA contrast
(~9.5:1 on cream). The `-strong` variant is used for hover. */
--st-accent: #1F3A5C;
--st-accent-strong: #2E548F;
}
}
/* ── Light theme — explicit override (beats system preference) ───────────────── */
:root[data-theme="light"] {
--st-bg: #F3F3F2;
--st-bg-deep: #EBEBEA;
--st-bg-deepest: #DEDEDC;
--st-surface: #FFFFFF;
--st-surface-2: #F7F7F6;
--st-surface-3: #FAFAF9;
--st-text: #1A1A1A;
--st-text-muted: #4A5563;
--st-text-faint: #6B7280;
--st-border: #D8D8D6;
--st-border-subtle: rgba(0, 0, 0, 0.08);
--st-border-faint: rgba(0, 0, 0, 0.06);
--st-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
--st-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.10);
--st-shadow-header: 0 2px 14px rgba(0, 0, 0, 0.06);
--st-gold: #A88130;
--st-gold-light: #C8A040;
--st-gold-dark: #7A5A0F;
--st-accent: #1F3A5C;
--st-accent-strong: #2E548F;
}
/* :root[data-theme="dark"] is implicitly handled by :root defaults above. */
/* ── Inverse sections — pin tokens to dark values regardless of active theme ──
Apply the `st-inverse` class to any section that should always render with
a dark navy background and light text, regardless of the active theme.
CSS custom properties cascade through descendants, so every child of an
`.st-inverse` block automatically picks up the dark token values.
(`.st-stats-band` and `.st-membership` were previously listed here but
were converted to fully theme-aware light/dark sections — see their
gradient definitions in template-sovereign-home.php.) */
.st-inverse {
--st-bg: #0D1B2A;
--st-bg-deep: #0A1420;
--st-bg-deepest: #060D15;
--st-surface: #1C2E40;
--st-surface-2: #253D52;
--st-surface-3: #162536;
--st-text: #E8E8E8;
--st-text-muted: #9BA8B4;
--st-text-faint: #6B7A8A;
--st-border: #2A3F54;
--st-border-subtle: rgba(255, 255, 255, 0.06);
--st-border-faint: rgba(255, 255, 255, 0.05);
/* Re-pin gold to its bright dark-mode value — darker amber loses
legibility against a navy background. */
--st-gold: #C9A84C;
--st-gold-light: #E8C96D;
--st-gold-dark: #A0822E;
color: var(--st-text);
}
/* ── Base / reset ────────────────────────────────────────────────────────────── */
body {
background-color: var(--st-bg);
color: var(--st-text);
}
/* ── Sovereign page wrapper — themed surface for all pages ── */
.st-page-wrap {
background: var(--st-bg);
color: var(--st-text);
min-height: 100vh;
padding: 30px 0 60px;
}
/* Coin detail shares the themed background but does NOT claim min-height: 100vh —
before its REST fetch resolves, the container is visually empty aside from
the "Loading…" title, and a 100vh blank rectangle looks like a broken
overlay on mobile. The body's background covers any residual space. */
.st-coin-detail {
background: var(--st-bg);
color: var(--st-text);
padding: 30px 0 60px;
}
/* The `.st-spot-bar` (sticky, sibling of .st-coin-detail/.st-page-wrap
inside #ajax-content-wrap) provides the nav clearance — it sits
directly below Salient's fixed header. We just need a small breathing
gap between the spot bar and the first content row (back-link or
page title). 40px is enough for clean separation without a void. */
@media (min-width: 769px) {
body.page-template-template-sovereign-catalogue .st-coin-detail,
body.page-template-template-sovereign-catalogue .st-page-wrap {
padding-top: 40px;
}
}
.st-page-wrap .st-container,
.st-coin-detail .st-container,
.st-coin-detail__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Scope resets inside Sovereign Tracker containers to avoid breaking the WP
admin or other plugins. */
.st-root *,
.st-root *::before,
.st-root *::after,
.st-page-wrap *,
.st-page-wrap *::before,
.st-page-wrap *::after {
box-sizing: border-box;
}
.st-root a,
.st-page-wrap a {
color: var(--st-gold);
text-decoration: none;
transition: color var(--st-transition);
}
.st-root a:hover,
.st-root a:focus,
.st-page-wrap a:hover,
.st-page-wrap a:focus {
color: var(--st-gold-light);
text-decoration: underline;
}
/* Override Salient theme white backgrounds within our pages */
.st-page-wrap .container-wrap,
.st-page-wrap #ajax-content-wrap,
.st-page-wrap .main-content,
.st-page-wrap .post-area,
.st-page-wrap .content-inner,
.st-page-wrap article {
background: transparent !important;
color: var(--st-text, #E8E8E8) !important;
}
.st-page-wrap h1, .st-page-wrap h2, .st-page-wrap h3,
.st-page-wrap h4, .st-page-wrap h5, .st-page-wrap h6 {
color: var(--st-text, #E8E8E8);
}
.st-page-wrap p, .st-page-wrap li, .st-page-wrap td, .st-page-wrap th {
color: var(--st-text, #E8E8E8);
}
.st-page-wrap .st-page-title {
color: var(--st-gold, #C9A84C);
}
.st-page-wrap .st-page-intro,
.st-page-wrap .st-page-subtitle {
color: var(--st-text-muted, #9BA8B4);
font-size: 14px;
margin: 0 0 4px;
}
/* ── Page header — shared across all sovereign pages ─────────────────────────── */
.st-page-header {
padding: 28px 0 24px;
border-bottom: 1px solid rgba(255,255,255,.06);
margin-bottom: 32px;
}
.st-page-header .st-page-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.6rem;
margin: 0 0 6px;
}
/* ── Dashboard section — shared component ──────────────────────────────────────
Each section sits as a clean white card on the page background — gives
the dashboard / auctions pages the same NAC-style "data dossier" feel
the homepage uses. */
.st-dash-section {
background: var(--st-surface);
border: 1px solid var(--st-border);
border-radius: 0;
padding: 32px;
margin-bottom: 28px;
box-shadow: var(--st-shadow);
}
.st-dash-section__head {
margin-bottom: 20px;
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
}
.st-dash-section__head h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.4rem;
color: var(--st-text);
margin: 0;
}
.st-dash-section__sub {
font-size: 14px;
color: var(--st-text-muted);
}
/* ── Clickable table rows — used across all sovereign tables ──────────────── */
.st-page-wrap tr[style*="cursor:pointer"]:hover,
.st-page-wrap tr[onclick]:hover {
background: rgba(201,168,76,.08) !important;
}
.st-page-wrap .st-sale-thumb {
cursor: zoom-in;
}
.st-dash-section__controls {
margin-left: auto;
display: flex;
gap: 4px;
}
/* ── Empty state ─────────────────────────────────────────────────────────────── */
.st-empty {
color: var(--st-text-muted, #9BA8B4);
font-style: italic;
padding: 24px 0;
}
/* ── Toggle buttons (period selectors etc.) ──────────────────────────────────── */
.st-dtog {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.08);
color: var(--st-text-muted, #9BA8B4);
padding: 5px 12px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background .15s, color .15s;
}
.st-dtog:hover { background: rgba(255,255,255,.1); color: var(--st-text, #E8E8E8); }
.st-dtog.active { background: var(--st-gold); color: var(--st-navy); font-weight: 600; border-color: var(--st-gold); }
/* ── Spot price bar ──────────────────────────────────────────────────────────── */
.st-spot-bar {
position: sticky;
top: 0;
z-index: 9000;
width: 100%;
background: var(--st-slate);
border-bottom: 1px solid var(--st-border);
padding: 0 20px;
font-size: 0.82rem;
color: var(--st-text-muted);
overflow: hidden;
}
.st-spot-bar__inner {
display: flex;
align-items: center;
gap: 10px;
height: 38px;
white-space: nowrap;
overflow: hidden;
}
.st-spot-bar__label {
font-weight: 700;
color: var(--st-gold);
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 0.72rem;
flex-shrink: 0;
}
.st-spot-bar__price {
font-family: var(--st-font-mono);
color: var(--st-gold);
font-size: 0.92rem;
font-weight: 700;
flex-shrink: 0;
}
.st-spot-bar__unit {
font-size: 0.72rem;
color: var(--st-text-muted);
flex-shrink: 0;
}
.st-spot-bar__sep {
color: var(--st-text-muted);
opacity: 0.35;
flex-shrink: 0;
}
.st-spot-bar__melt-label {
font-size: 0.72rem;
color: var(--st-text-muted);
flex-shrink: 0;
}
.st-spot-bar__melt-val {
font-family: var(--st-font-mono);
color: var(--st-gold-light, #e0c97a);
font-size: 0.82rem;
font-weight: 600;
flex-shrink: 0;
}
.st-spot-bar__updated {
font-size: 0.7rem;
color: var(--st-text-muted);
opacity: 0.6;
flex-shrink: 0;
}
/* Push currency switcher to the right */
.st-spot-bar .st-currency-switcher {
margin-left: auto;
flex-shrink: 0;
}
/* ── Currency switcher ───────────────────────────────────────────────────────── */
.st-currency-switcher {
display: inline-flex;
gap: 0;
border: 1px solid var(--st-border);
border-radius: var(--st-radius-sm);
overflow: hidden;
}
.st-currency-switcher button {
background: transparent;
border: none;
color: var(--st-text-muted);
cursor: pointer;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.05em;
padding: 5px 12px;
transition: background var(--st-transition), color var(--st-transition);
}
.st-currency-switcher button:not(:last-child) {
border-right: 1px solid var(--st-border);
}
.st-currency-switcher button:hover {
background: var(--st-slate-light);
color: var(--st-text);
}
.st-currency-switcher button.active,
.st-currency-switcher button[aria-pressed="true"] {
background: var(--st-accent);
color: var(--st-bg);
}
/* ── Cards ───────────────────────────────────────────────────────────────────── */
.st-card {
background: var(--st-surface);
border: 1px solid var(--st-border);
border-radius: 0;
padding: 24px;
box-shadow: var(--st-shadow);
transition: border-color var(--st-transition),
box-shadow var(--st-transition),
transform var(--st-transition);
}
.st-card:hover {
border-color: var(--st-gold);
box-shadow: var(--st-shadow-lg);
transform: translateY(-3px);
}
.st-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.st-card__title {
font-size: 1rem;
font-weight: 600;
color: var(--st-text);
margin: 0;
}
.st-card__meta {
font-size: 14px;
color: var(--st-text-muted);
margin-top: 4px;
}
.st-card__image {
width: 100%;
max-width: 200px;
border-radius: var(--st-radius-sm);
border: 1px solid var(--st-border);
object-fit: contain;
background: var(--st-bg);
}
/* ── Badges ──────────────────────────────────────────────────────────────────── */
.st-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.6;
}
/* `.st-badge--flag` is the homepage-style filled accent badge — accent
background + cream text. Use this for "SOLD" / "NEW" tag overlays on
coin cards across the site. Theme-aware (gold in dark, navy in light). */
.st-badge--flag {
background: var(--st-accent);
color: var(--st-bg);
border: 0;
padding: 4px 12px;
}
.st-badge--mint {
background: var(--st-slate-light);
color: var(--st-gold);
border: 1px solid var(--st-gold-dark);
}
.st-badge--grade {
background: rgba(201, 168, 76, 0.15);
color: var(--st-gold-light);
border: 1px solid rgba(201, 168, 76, 0.3);
}
.st-badge--sold {
background: rgba(76, 175, 130, 0.12);
color: var(--st-success);
border: 1px solid rgba(76, 175, 130, 0.3);
}
.st-badge--unsold {
background: rgba(224, 82, 82, 0.12);
color: var(--st-danger);
border: 1px solid rgba(224, 82, 82, 0.3);
}
.st-badge--upcoming {
background: rgba(212, 160, 23, 0.12);
color: var(--st-warning);
border: 1px solid rgba(212, 160, 23, 0.3);
}
.st-badge--rare {
background: rgba(201, 168, 76, 0.2);
color: var(--st-gold-light);
border: 1px solid var(--st-gold);
}
.st-badge--free {
background: rgba(76, 175, 130, 0.12);
color: var(--st-success);
border: 1px solid rgba(76, 175, 130, 0.25);
}
.st-badge--pro {
background: rgba(201, 168, 76, 0.15);
color: var(--st-gold);
border: 1px solid var(--st-gold-dark);
}
/* ── Price display ───────────────────────────────────────────────────────────── */
.st-price {
font-family: var(--st-font-mono);
color: var(--st-gold);
font-size: 1.1em;
font-weight: 700;
}
.st-price--lg {
font-size: 1.4em;
}
.st-price--sm {
font-size: 0.9em;
font-weight: 600;
}
.st-price-muted {
font-family: var(--st-font-mono);
color: var(--st-text-muted);
font-size: 0.85em;
}
.st-price-row {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.st-price-row__label {
font-size: 0.78rem;
color: var(--st-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.st-price-pair {
display: flex;
flex-direction: column;
gap: 2px;
}
.st-price-pair__hammer {
font-family: var(--st-font-mono);
color: var(--st-text-muted);
font-size: 0.82em;
text-decoration: line-through;
}
.st-price-pair__total {
font-family: var(--st-font-mono);
color: var(--st-gold);
font-size: 1em;
font-weight: 700;
}
/* ── Tables ──────────────────────────────────────────────────────────────────── */
.st-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
.st-table thead th {
background: var(--st-slate);
color: var(--st-text-muted);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 10px 14px;
border-bottom: 1px solid var(--st-border);
text-align: left;
white-space: nowrap;
}
.st-table tbody tr {
border-bottom: 1px solid var(--st-border);
transition: background var(--st-transition);
}
.st-table tbody tr:nth-child(odd) {
background: var(--st-bg);
}
.st-table tbody tr:nth-child(even) {
background: var(--st-slate);
}
.st-table tbody tr:hover {
background: var(--st-slate-light);
}
.st-table tbody td {
padding: 9px 14px;
color: var(--st-text);
vertical-align: middle;
}
.st-table tbody td.st-price,
.st-table tbody td.st-num {
text-align: right;
white-space: nowrap;
}
/* Match thead alignment to body alignment for monetary / numeric columns
— without this rule, `| Price | ` (default left-align) and
`$5,250 | ` (right-aligned) drift out of column,
making the header read off-centre against its values. */
.st-table thead th.st-price,
.st-table thead th.st-num {
text-align: right;
}
.st-table tfoot td {
padding: 10px 14px;
background: var(--st-slate);
color: var(--st-text-muted);
font-size: 0.8rem;
border-top: 1px solid var(--st-border);
}
/* ── Year × Mint grid ────────────────────────────────────────────────────────── */
.st-grid {
display: grid;
gap: 2px;
}
.st-grid--year-mint {
/* Columns auto-generated by JS: repeat(N, minmax(48px, 1fr)) */
grid-auto-rows: 44px;
}
.st-grid__cell {
display: flex;
align-items: center;
justify-content: center;
background: var(--st-slate);
border: 1px solid var(--st-border);
border-radius: var(--st-radius-sm);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background var(--st-transition), border-color var(--st-transition);
position: relative;
overflow: hidden;
}
.st-grid__cell:hover {
background: var(--st-slate-light);
border-color: var(--st-gold-dark);
}
.st-grid__cell--has-data {
background: rgba(201, 168, 76, 0.08);
border-color: rgba(201, 168, 76, 0.25);
}
.st-grid__cell--has-data:hover {
background: rgba(201, 168, 76, 0.18);
border-color: var(--st-gold);
}
.st-grid__cell--empty {
background: var(--st-bg);
border-color: var(--st-border);
cursor: default;
opacity: 0.35;
}
.st-grid__cell--header {
background: var(--st-slate);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--st-text-muted);
cursor: default;
font-weight: 700;
}
.st-grid__cell-count {
position: absolute;
top: 2px;
right: 4px;
font-size: 0.6rem;
color: var(--st-gold);
font-weight: 700;
}
/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.st-btn {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
border-radius: var(--st-radius-sm);
cursor: pointer;
font-family: inherit;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 9px 18px;
text-decoration: none;
transition: background var(--st-transition), color var(--st-transition),
box-shadow var(--st-transition), transform var(--st-transition);
user-select: none;
white-space: nowrap;
}
.st-btn:active {
transform: translateY(1px);
}
.st-btn-gold,
.st-btn--gold {
/* Gold class name preserved for backwards compat — actually uses
--st-accent so it stays gold in dark mode and flips to royal navy
in light mode (matches the homepage brand CTA pattern). */
background: var(--st-accent);
color: var(--st-bg);
box-shadow: var(--st-shadow);
}
.st-btn-gold:hover,
.st-btn--gold:hover {
background: var(--st-accent-strong);
box-shadow: var(--st-shadow-lg);
color: var(--st-bg);
text-decoration: none;
transform: translateY(-1px);
}
.st-btn-outline,
.st-btn--outline {
background: transparent;
border: 1px solid var(--st-border);
color: var(--st-text);
}
.st-btn-outline:hover,
.st-btn--outline:hover {
background: var(--st-slate-light);
border-color: var(--st-gold-dark);
color: var(--st-gold-light);
text-decoration: none;
}
.st-btn--sm {
font-size: 0.78rem;
padding: 5px 12px;
}
.st-btn--lg {
font-size: 1rem;
padding: 12px 28px;
}
.st-btn:disabled,
.st-btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
/* ── Pro gating overlay ──────────────────────────────────────────────────────── */
.st-gated {
position: relative;
overflow: hidden;
}
.st-gated__content {
filter: blur(5px);
pointer-events: none;
user-select: none;
}
.st-gated__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(13, 27, 42, 0.72);
backdrop-filter: blur(1px);
z-index: 10;
gap: 12px;
padding: 20px;
text-align: center;
}
.st-gated__overlay-icon {
font-size: 1.8rem;
opacity: 0.7;
}
.st-gated__overlay-text {
color: var(--st-text);
font-size: 0.9rem;
font-weight: 600;
margin: 0;
}
.st-gated__overlay-sub {
color: var(--st-text-muted);
font-size: 0.8rem;
margin: 0;
}
/* ── Loading skeleton ────────────────────────────────────────────────────────── */
@keyframes st-shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.st-loading,
.st-skeleton {
background: linear-gradient(
90deg,
var(--st-slate) 25%,
var(--st-slate-light) 50%,
var(--st-slate) 75%
);
background-size: 800px 100%;
animation: st-shimmer 1.5s infinite linear;
border-radius: var(--st-radius-sm);
display: block;
}
.st-skeleton--text {
height: 1em;
width: 80%;
margin-bottom: 0.5em;
}
.st-skeleton--title {
height: 1.4em;
width: 55%;
margin-bottom: 0.75em;
}
.st-skeleton--price {
height: 1.2em;
width: 40%;
}
.st-skeleton--card {
height: 140px;
width: 100%;
border-radius: var(--st-radius);
}
/* ── Filter / search bar ─────────────────────────────────────────────────────── */
.st-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-bottom: 20px;
}
.st-filters__select,
.st-filters__input {
background: var(--st-surface);
border: 1px solid var(--st-border);
border-radius: 0;
color: var(--st-text);
font-family: inherit;
font-size: 0.88rem;
padding: 9px 14px;
outline: none;
transition: border-color var(--st-transition), box-shadow var(--st-transition);
min-width: 0;
}
.st-filters__select:focus,
.st-filters__input:focus {
border-color: var(--st-accent);
box-shadow: 0 0 0 3px rgba(31, 58, 92, 0.12);
}
.st-filters__select option {
background: var(--st-surface);
color: var(--st-text);
}
/* ── Stats / summary blocks ──────────────────────────────────────────────────── */
.st-stat-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.st-stat-box {
background: var(--st-surface);
border: 1px solid var(--st-border);
border-radius: 0;
padding: 20px 24px;
flex: 1 1 160px;
min-width: 120px;
box-shadow: var(--st-shadow);
transition: transform var(--st-transition),
box-shadow var(--st-transition),
border-color var(--st-transition);
}
.st-stat-box:hover {
transform: translateY(-3px);
box-shadow: var(--st-shadow-lg);
border-color: var(--st-gold);
}
.st-stat-box__label {
font-size: 0.73rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--st-text-muted);
margin-bottom: 6px;
}
.st-stat-box__value {
font-family: var(--st-font-mono);
font-size: 1.6rem;
font-weight: 700;
color: var(--st-gold);
line-height: 1;
}
.st-stat-box__sub {
font-size: 14px;
color: var(--st-text-muted);
margin-top: 4px;
}
/* ── Pagination ──────────────────────────────────────────────────────────────── */
.st-pagination {
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
margin-top: 24px;
}
.st-pagination__btn {
background: var(--st-slate);
border: 1px solid var(--st-border);
border-radius: var(--st-radius-sm);
color: var(--st-text);
cursor: pointer;
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
padding: 6px 14px;
transition: background var(--st-transition), border-color var(--st-transition);
}
.st-pagination__btn:hover:not(:disabled) {
background: var(--st-slate-light);
border-color: var(--st-gold-dark);
color: var(--st-gold-light);
}
.st-pagination__btn.active {
background: var(--st-gold);
border-color: var(--st-gold);
color: var(--st-navy);
}
.st-pagination__btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.st-pagination__info {
font-size: 14px;
color: var(--st-text-muted);
}
/* ── Empty state ─────────────────────────────────────────────────────────────── */
.st-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
color: var(--st-text-muted);
text-align: center;
gap: 10px;
}
.st-empty__icon {
font-size: 2.4rem;
opacity: 0.4;
}
.st-empty__title {
font-size: 1rem;
font-weight: 600;
color: var(--st-text);
margin: 0;
}
.st-empty__sub {
font-size: 14px;
margin: 0;
}
/* ── Divider ─────────────────────────────────────────────────────────────────── */
.st-divider {
border: none;
border-top: 1px solid var(--st-border);
margin: 24px 0;
}
/* ── Utility helpers ─────────────────────────────────────────────────────────── */
.st-text-gold { color: var(--st-gold); }
.st-text-muted { color: var(--st-text-muted); }
.st-text-success{ color: var(--st-success); }
.st-text-danger { color: var(--st-danger); }
.st-text-small { font-size: 0.82em; }
.st-text-mono { font-family: var(--st-font-mono); }
.st-flex { display: flex; }
.st-flex-center { display: flex; align-items: center; justify-content: center; }
.st-gap-8 { gap: 8px; }
.st-gap-12 { gap: 12px; }
.st-gap-16 { gap: 16px; }
.st-mt-8 { margin-top: 8px; }
.st-mt-16 { margin-top: 16px; }
.st-mt-24 { margin-top: 24px; }
.st-mb-8 { margin-bottom: 8px; }
.st-mb-16 { margin-bottom: 16px; }
.st-mb-24 { margin-bottom: 24px; }
/* ── Responsive breakpoints ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
.st-page-wrap .st-container,
.st-coin-detail .st-container {
padding: 0 16px;
}
.st-spot-bar {
padding: 0 12px;
}
.st-spot-bar__inner {
gap: 7px;
font-size: 0.78rem;
}
/* Hide melt values on small screens — keep spot price + switcher */
.st-spot-bar__melt-label,
.st-spot-bar__melt-val,
.st-spot-bar__sep,
.st-spot-bar__updated {
display: none;
}
.st-spot-bar__unit {
display: none;
}
.st-card {
padding: 14px;
}
.st-stat-row {
gap: 10px;
}
.st-stat-box {
flex: 1 1 130px;
padding: 12px 14px;
}
.st-stat-box__value {
font-size: 1.3rem;
}
/* Stack year×mint grid cells smaller on mobile */
.st-grid--year-mint {
grid-auto-rows: 36px;
}
.st-grid__cell {
font-size: 0.68rem;
}
/* Full-width filters on mobile */
.st-filters {
flex-direction: column;
align-items: stretch;
}
.st-filters__select,
.st-filters__input {
width: 100%;
}
.st-table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.st-currency-switcher button {
padding: 5px 9px;
font-size: 0.75rem;
}
.st-gated__overlay-text {
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.st-price {
font-size: 1em;
}
.st-price--lg {
font-size: 1.2em;
}
.st-pagination {
flex-wrap: wrap;
}
}
/* ==========================================================================
CATALOGUE TEMPLATE — Layout, filter sidebar, year × mint grid
========================================================================== */
/* ── Page shell ─────────────────────────────────────────────────────────────── */
.st-page-header {
padding: 36px 0 28px;
border-bottom: 1px solid var(--st-border);
margin-bottom: 32px;
}
.st-page-title {
font-family: var(--st-font-display);
font-size: 2rem;
font-weight: 700;
color: var(--st-gold);
margin: 0 0 10px;
}
.st-page-intro {
color: var(--st-text-muted);
font-size: 0.95rem;
margin: 0;
max-width: 640px;
}
/* ── Two-column layout: sidebar + main ──────────────────────────────────────── */
.st-catalogue-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 28px;
align-items: start;
}
@media (max-width: 900px) {
.st-catalogue-layout {
grid-template-columns: 1fr;
}
}
/* ── Filter sidebar ─────────────────────────────────────────────────────────── */
.st-filter-sidebar {
background: var(--st-surface);
border: 1px solid var(--st-border);
border-radius: 0;
padding: 24px;
position: sticky;
top: 100px;
box-shadow: var(--st-shadow);
}
.st-filter-heading {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--st-gold);
margin: 0 0 16px;
}
.st-filter-group {
border: none;
padding: 0;
margin: 0 0 18px;
}
.st-filter-legend {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--st-text-muted);
margin-bottom: 8px;
display: block;
width: 100%;
}
.st-filter-check,
.st-filter-radio {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.84rem;
color: var(--st-text);
cursor: pointer;
padding: 3px 0;
user-select: none;
}
.st-filter-sidebar .st-filter-check span,
.st-filter-sidebar .st-filter-radio span {
color: var(--st-text) !important;
text-decoration: none !important;
transition: color .15s ease;
}
.st-filter-check:hover,
.st-filter-radio:hover,
.st-filter-sidebar .st-filter-check:hover span,
.st-filter-sidebar .st-filter-radio:hover span {
color: var(--st-gold-light) !important;
}
.st-filter-input[type="checkbox"],
.st-filter-input[type="radio"] {
accent-color: var(--st-gold);
width: 14px;
height: 14px;
cursor: pointer;
flex-shrink: 0;
}
.st-filter-actions {
display: flex;
gap: 8px;
margin-top: 4px;
}
.st-filter-actions .st-btn {
flex: 1;
font-size: 0.82rem;
padding: 7px 10px;
}
/* Mobile filter toggle button (hidden on desktop) */
.st-filter-toggle {
display: none;
align-items: center;
gap: 6px;
background: var(--st-surface);
border: 1px solid var(--st-border);
border-radius: 0;
color: var(--st-text);
cursor: pointer;
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
padding: 9px 16px;
margin-bottom: 14px;
}
@media (max-width: 900px) {
.st-filter-toggle {
display: inline-flex;
}
.st-filter-sidebar {
display: none;
position: static;
top: auto;
margin-bottom: 12px;
}
.st-filter-sidebar.is-open {
display: block;
}
}
/* ── Catalogue status bar ───────────────────────────────────────────────────── */
.st-catalogue-status {
font-size: 0.82rem;
color: var(--st-text-muted);
margin-bottom: 12px;
min-height: 20px;
}
/* ── Table wrapper (horizontal scroll on narrow screens) ────────────────────── */
.st-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
/* ── Year × Mint grid table ─────────────────────────────────────────────────── */
.st-grid-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
table-layout: fixed;
background: var(--st-slate);
}
.st-grid-table thead th {
background: var(--st-bg);
color: var(--st-text-muted);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 10px 8px;
text-align: center;
border-bottom: 1px solid var(--st-border);
white-space: nowrap;
}
.st-grid-table thead th.st-col-year {
text-align: left;
width: 56px;
min-width: 50px;
}
.st-grid-table tbody tr {
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.st-grid-table tbody tr:hover {
background: rgba(201, 168, 76, 0.04);
}
/* Year label column */
.st-grid-table th.st-col-year {
color: var(--st-text-muted);
font-size: 0.78rem;
font-weight: 600;
padding: 6px 8px;
text-align: left;
white-space: nowrap;
background: var(--st-bg);
border-right: 1px solid var(--st-border);
}
/* Generic data cell */
.st-grid-table td.st-cell {
padding: 0;
text-align: center;
vertical-align: middle;
height: 38px; /* single-denom default; expands to auto when two links present */
border-right: 1px solid rgba(255,255,255,0.04);
display: flex;
flex-direction: column;
}
/* Empty cell (coin not issued that year / mint) */
.st-cell--empty {
background: transparent;
}
/* Coin exists */
.st-cell--exists {
background: rgba(201, 168, 76, 0.06);
}
.st-cell--exists:hover {
background: rgba(201, 168, 76, 0.14);
}
/* Rare coin (R7+) */
.st-cell--rare {
background: rgba(224, 82, 82, 0.1);
}
.st-cell--rare:hover {
background: rgba(224, 82, 82, 0.18);
}
/* Locked / pro-only */
.st-cell--locked {
background: rgba(155, 168, 180, 0.06);
cursor: not-allowed;
}
/* Cell link — fills available space; flex:1 lets two stacked links share the cell equally */
.st-cell-link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
flex: 1;
min-height: 38px;
text-decoration: none;
color: inherit;
padding: 4px;
}
/* Half-sovereign link inside a dual-denomination cell — subtle top divider */
.st-cell-link--half {
border-top: 1px solid rgba(255,255,255,0.08);
opacity: 0.85;
}
.st-cell-link:hover {
text-decoration: none;
color: var(--st-gold-light);
}
.st-cell-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
line-height: 1.1;
}
/* Mintage shorthand (e.g. "2.7M") */
.st-cell-mintage {
font-size: 0.62rem;
font-family: var(--st-font-mono);
color: var(--st-text-muted);
display: block;
}
.st-cell--exists .st-cell-mintage {
color: var(--st-gold-dark);
}
/* Half sovereign "½" badge */
.st-cell-denom {
font-size: 0.85rem;
color: var(--st-gold);
font-weight: 700;
line-height: 1;
}
/* Lock icon in pro-only cells */
.st-lock-icon {
opacity: 0.4;
color: var(--st-text-muted);
}
/* Skeleton loading row */
.st-skeleton-row td {
padding: 0;
}
.st-skeleton--table-row {
height: 38px;
}
/* ── Grid legend ────────────────────────────────────────────────────────────── */
.st-grid-legend {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 10px 4px;
margin-top: 8px;
}
.st-legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.74rem;
color: var(--st-text-muted);
}
.st-legend-item::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
border-radius: 2px;
flex-shrink: 0;
}
.st-legend-item--exists::before {
background: rgba(201, 168, 76, 0.25);
border: 1px solid var(--st-gold-dark);
}
.st-legend-item--rare::before {
background: rgba(224, 82, 82, 0.25);
border: 1px solid #e05252;
}
.st-legend-item--locked::before {
background: rgba(155, 168, 180, 0.12);
border: 1px solid var(--st-border);
}
.st-legend-item--empty::before {
background: transparent;
border: 1px solid rgba(255,255,255,0.08);
}
/* ── Coin detail overlay (shown when ?coin= param present) ──────────────────── */
.st-coin-detail {
/* Padding/bg handled by .st-page-wrap, .st-coin-detail shared rule above */
}
.st-coin-detail__back {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--st-gold);
font-size: 0.88rem;
text-decoration: none;
margin-bottom: 24px;
}
.st-coin-detail__back:hover {
color: var(--st-gold-light);
text-decoration: none;
}
.st-coin-detail__body {
display: grid;
grid-template-columns: 280px 1fr;
gap: 36px;
align-items: start;
}
/* Grid children default to min-width: auto (= min-content), which means a
single wide child (e.g. an unwrapped table or long word) makes the grid
track expand past the viewport on mobile and clips every section to the
right. min-width: 0 lets children shrink to fit the track. Critical for
the "Sales by Grade" + "PCGS Population" tables we added — without this,
their column count forces the whole right side off-screen on phones. */
.st-coin-detail__image-col,
.st-coin-detail__data-col {
min-width: 0;
}
/* Sticky reference column on desktop — left column (coin image + facts
table) stays pinned while the right column (price cards, market
availability, premium charts, sales) scrolls past it.
The real blocker (re-discovered 28 Apr 2026): Salient's
`main-styles.min.css` sets `body { overflow: hidden }` globally — that
makes the scroll root and silently kills `position: sticky`
on every descendant. We override `body` to `overflow: visible` here
AND relax `.container-wrap` / `.main-content` for safety. Scoped to
the catalogue page body class + desktop ≥769px so Salient's mobile
off-canvas menu (which depends on body overflow:hidden when the
drawer is open) is not affected. */
@media (min-width: 769px) {
body.page-template-template-sovereign-catalogue,
body.page-template-template-sovereign-catalogue .container-wrap,
body.page-template-template-sovereign-catalogue .main-content {
overflow: visible;
}
.st-coin-detail__image-col {
position: sticky;
/* Pin below the nav (~100px) + the sticky spot bar (~38px) with a
small breathing gap. */
top: 150px;
align-self: start;
}
}
@media (max-width: 768px) {
.st-coin-detail__body {
grid-template-columns: 1fr;
}
}
/* (Salient off-canvas menu styling was here — reverted 27 Apr 2026 at
user request. They'll configure the off-canvas menu through WP Admin
→ Appearance → Menus instead. Salient's default chrome / colour
handling applies again.) */
/* ── Jump-nav — quick-jumps to each major section ────────────────
Sits above the first section heading, below the top stat tiles.
Buttons match `.st-pc-toolbar button` (the chart range / denom
toggles) one-for-one so the page feels visually unified. */
.st-jump-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin: 4px 0 22px;
padding: 0;
background: transparent;
border: 0;
}
.st-jump-nav a {
display: inline-block;
background: transparent;
border: 1px solid var(--st-border);
color: var(--st-text);
border-radius: 14px;
padding: 4px 12px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
}
.st-jump-nav a:hover {
border-color: var(--st-gold);
color: var(--st-gold);
text-decoration: none;
}
.st-jump-nav a:focus-visible {
outline: 2px solid var(--st-gold);
outline-offset: 2px;
}
/* Anchor jump offset — keep the heading visible after scrolling so
it doesn't sit flush against the sticky chrome above. */
html { scroll-behavior: smooth; }
.st-coin-detail__data-col h2.st-section-heading {
scroll-margin-top: 100px;
}
@media (max-width: 768px) {
/* Wrap onto multiple rows on narrow viewports — 8 buttons in a
horizontal scroll hid half of them behind the right edge.
Mobile keeps the same chip styling, just slightly tighter gap. */
.st-jump-nav { gap: 5px; margin-bottom: 18px; }
}
.st-coin-img {
width: 100%;
height: auto;
border-radius: var(--st-radius);
display: block;
}
.st-coin-img-wrap {
background: var(--st-slate);
border: 0;
border-radius: var(--st-radius);
padding: 0;
text-align: center;
margin-bottom: 16px;
overflow: hidden;
}
/* No-image placeholder — shown when coins_reference.image_url is NULL */
.st-coin-img-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
aspect-ratio: 2 / 1;
padding: 20px;
color: var(--st-text-muted, #9BA8B4);
font-family: 'Inter', -apple-system, sans-serif;
}
.st-coin-img-placeholder__icon {
font-size: 48px;
color: rgba(201, 168, 76, 0.25);
line-height: 1;
}
.st-coin-img-placeholder__label {
font-size: 13px;
font-weight: 600;
color: var(--st-text-muted, #9BA8B4);
letter-spacing: 0.02em;
}
.st-coin-img-placeholder__hint {
font-size: 11px;
color: #6B7A8A;
max-width: 220px;
line-height: 1.5;
}
.st-facts-table {
width: 100%;
font-size: 0.95rem;
border-collapse: collapse;
}
.st-facts-table th,
.st-facts-table td {
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.st-facts-table th {
color: var(--st-text-muted);
font-weight: 600;
width: 40%;
}
.st-facts-table td {
color: var(--st-text);
}
.st-coin-title {
font-family: var(--st-font-display);
font-size: 1.6rem;
font-weight: 700;
color: var(--st-gold);
margin: 0 0 20px;
}
.st-section-heading {
font-size: 1rem;
font-weight: 600;
color: var(--st-text, #E8E8E8);
border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 8px;
margin: 28px 0 16px;
}
.st-empty {
color: var(--st-text-muted, #888);
font-size: 0.85rem;
padding: 12px 0;
}
/* Breadcrumb navigation */
.st-breadcrumb {
font-size: 13px;
margin-bottom: 10px;
}
.st-breadcrumb a {
color: var(--st-gold, #C9A84C);
text-decoration: none;
}
.st-breadcrumb a:hover {
text-decoration: underline;
}
.st-breadcrumb__sep {
color: var(--st-text-muted, #888);
margin: 0 6px;
}
.st-breadcrumb span:last-child {
color: var(--st-text-muted, #888);
}
.st-price-cards {
display: grid;
/* 3-column layout: Box 1 (Market Estimate, primary) · Box 2 (Retail +
Melt) · Box 3 (Premium + Frequency + Trend). Box 1 is given a touch
more room since its single hero figure is the headline. Mobile rule
below collapses to a single column. */
grid-template-columns: 1.15fr 1fr 1.15fr;
gap: 14px;
margin-bottom: 8px;
}
/* Marsh-comparison chip — small pill folded into the Sale Frequency
sub-block of the Premium / Frequency price card. Default gold tone
for "above-typical" / "below-typical" market signals; --agree gives
the green "in line with Marsh" treatment. Sized to sit naturally
below the existing star row + sub-line without crowding the card. */
.st-mavail__chip {
display: inline-block;
align-self: flex-start;
margin-top: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
background: rgba(201, 168, 76, 0.12);
color: var(--st-gold);
line-height: 1.4;
}
.st-mavail__chip--agree {
background: rgba(0, 168, 71, 0.10);
color: #00a847;
}
/* Each "split" inside a multi-stat card. flex:1 makes the splits share
the card's available vertical space evenly so a 2-split card (Box 2:
Retail + Melt) doesn't pool whitespace at the bottom when grid stretch
makes it as tall as the 3-block Box 3. justify-content:center vertically
centres each split's content within its share. */
.st-price-card__split {
flex: 1 1 auto;
display: flex; flex-direction: column;
justify-content: center;
gap: 4px;
padding: 8px 0;
}
.st-price-card__split + .st-price-card__split,
.st-price-card__split + .st-trend-mini {
border-top: 1px solid var(--st-border);
}
.st-price-card__split + .st-price-card__split { padding-top: 12px; }
/* Inline trend mini-banner — compressed version of the full-width
.st-trend-banner so it fits inside the Premium / Frequency tile. */
.st-trend-mini {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: baseline;
gap: 6px 8px;
padding: 10px 12px 8px;
margin: 4px -10px -8px; /* bleed into the card padding so the ribbon spans full width */
border-top: 1px solid var(--st-border);
background: rgba(201,168,76,0.06);
border-bottom-left-radius: var(--st-radius);
border-bottom-right-radius: var(--st-radius);
text-decoration: none;
color: var(--st-text);
transition: background .15s;
}
.st-trend-mini:hover { background: rgba(201,168,76,0.12); text-decoration: none; }
.st-trend-mini__icon { font-size: 0.95rem; line-height: 1; }
.st-trend-mini__label { font-weight: 600; font-size: 0.85rem; }
.st-trend-mini__change {
font-family: var(--st-font-mono);
font-weight: 700; font-size: 0.85rem;
color: var(--st-gold);
}
.st-trend-mini--up .st-trend-mini__change { color: #00c853; }
.st-trend-mini--down .st-trend-mini__change { color: #c9474a; }
.st-trend-mini__sub {
grid-column: 1 / -1;
font-size: 0.78rem;
color: var(--st-text-muted);
margin-top: 4px;
line-height: 1.5;
display: flex; flex-direction: column;
}
.st-trend-mini__sub > span { display: block; }
.st-trend-mini__sub strong { color: var(--st-text); font-weight: 600; }
.st-price-card {
background: var(--st-slate);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 4px;
/* Multi-stat cards (Box 2 / Box 3 with __split sub-blocks) need to
spread their sections; primary single-stat card gets centered. */
justify-content: flex-start;
}
.st-price-card--primary { justify-content: center; }
.st-price-card__label {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--st-text-muted);
}
.st-price-card .st-price {
font-size: 1.4rem;
font-weight: 700;
color: var(--st-gold);
font-family: var(--st-font-mono);
line-height: 1.2;
}
/* Box 1 (Market Estimate) is the page's headline figure — give it real
presence vs the secondary stats in Box 2 / Box 3. */
.st-price-card--primary .st-price { font-size: 2.2rem; }
.st-price-card .st-price--prem {
color: #00c853;
}
/* Sale-frequency rating — gold stars at a comfortable read size so the
filled vs outlined characters are obvious. Letterspacing tightens the
inter-star gap for that "rating bar" look. */
.st-price-card .st-price--freq {
color: var(--st-gold, #C9A84C);
letter-spacing: 0.04em;
font-family: inherit;
font-size: 1.4rem;
line-height: 1;
}
.st-price-card__sub {
font-size: 0.78rem;
color: var(--st-text-muted, #888);
margin-top: 2px;
line-height: 1.4;
}
.st-price-card__basis {
display: block;
font-size: 0.85rem;
font-weight: 500;
/* Was uppercase tracked tiny gold — too low-contrast at the new sizes
and unreadable against the cream/light tile bg. Sentence case + italic
reads as the "methodology footnote" it really is. */
color: var(--st-text-muted);
letter-spacing: 0;
text-transform: none;
font-style: italic;
margin-top: 10px;
line-height: 1.4;
}
.st-price-card--primary {
border-color: var(--st-gold, #C9A84C);
background: rgba(201, 168, 76, 0.08);
}
.st-coin-series-badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 500;
color: var(--st-text-muted, #888);
background: var(--st-slate, #1C2E40);
border: 1px solid rgba(255,255,255,0.08);
padding: 3px 10px;
border-radius: 12px;
margin-left: 10px;
vertical-align: middle;
font-family: var(--st-font-body, sans-serif);
letter-spacing: 0.02em;
}
.st-coin-sales-wrap {
overflow-x: auto;
}
/* ── Catalogue mobile tweaks ────────────────────────────────────────────────── */
@media (max-width: 600px) {
.st-page-title {
font-size: 1.5rem;
}
.st-grid-table {
font-size: 0.72rem;
}
.st-grid-table thead th {
font-size: 0.6rem;
padding: 8px 4px;
}
.st-grid-table th.st-col-year {
font-size: 0.7rem;
padding: 5px 4px;
}
.st-grid-table td.st-cell {
height: 32px; /* single-denom default; auto-expands for dual-denom cells */
}
.st-cell-link {
min-height: 32px;
}
.st-price-cards {
grid-template-columns: 1fr;
}
}
/* ── Coin detail — mobile polish ──────────────────────────────────────────────
Problems to fix:
1. 7-column sales table doesn't fit even with 3 cols hidden → convert to
card-per-row layout on narrow phones.
2. Coin title + series badge wrap badly at small widths.
3. Coin image box can be full-width on phones — cap it sensibly.
4. Facts-table key column is 40% — too narrow for some long labels.
5. Expand-detail images need to stay within viewport width.
─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Back link — tighten spacing */
.st-coin-detail__back {
margin-bottom: 16px;
font-size: 13px;
}
/* Title — allow the series badge to wrap to its own line */
.st-coin-title {
font-size: 1.3rem;
line-height: 1.25;
margin: 0 0 16px;
display: block;
}
.st-coin-series-badge {
display: inline-block;
margin: 6px 0 0;
font-size: 0.65rem;
}
/* Coin image — cap so it doesn't dominate the phone screen */
.st-coin-img-wrap {
max-width: 280px;
margin: 0 auto 16px;
padding: 12px;
}
/* Facts table — widen key column, smaller type */
.st-facts-table {
font-size: 0.8rem;
margin-bottom: 24px;
}
.st-facts-table th { width: 45%; padding: 5px 6px; }
.st-facts-table td { padding: 5px 6px; }
/* Section headings */
.st-section-heading {
font-size: 0.95rem;
margin: 20px 0 12px;
}
/* Price cards — slightly tighter on small viewports */
.st-price-card { padding: 12px 14px; }
.st-price-card .st-price { font-size: 1rem; }
.st-price-card__sub { font-size: 0.62rem; }
}
/* ── Sales table → stacked cards on phones ─────────────────────────────────── */
@media (max-width: 600px) {
/* Kill the horizontal-scroll wrapper, render as cards instead */
.st-coin-sales-wrap { overflow-x: visible !important; }
.st-coin-sales-wrap .st-sales-table,
.st-coin-sales-wrap .st-sales-table thead,
.st-coin-sales-wrap .st-sales-table tbody,
.st-coin-sales-wrap .st-sales-table tr,
.st-coin-sales-wrap .st-sales-table td {
display: block;
width: 100%;
}
/* Hide the table header — each card labels its own fields */
.st-coin-sales-wrap .st-sales-table thead {
position: absolute;
left: -9999px;
}
/* Shared card chrome for BOTH auction-sale rows and retail rows.
Background is transparent — page bg shows through. Border keeps
the cards visually separated. */
.st-coin-sales-wrap .st-sales-table tr.st-sale-row,
.st-coin-sales-wrap .st-sales-table tr.st-retail-row {
background: transparent;
border: 1px solid var(--st-border);
border-radius: 8px;
padding: 12px;
margin-bottom: 10px;
display: grid;
grid-template-columns: 64px 1fr auto;
column-gap: 12px;
row-gap: 6px;
align-items: center;
}
.st-coin-sales-wrap .st-sales-table tr.st-sale-row td,
.st-coin-sales-wrap .st-sales-table tr.st-retail-row td {
border: 0;
padding: 0;
font-size: 13px;
line-height: 1.4;
color: var(--st-text);
}
/* Thumbnail — first two rows on the left */
.st-coin-sales-wrap .st-sales-table td.st-sale-img {
grid-row: 1 / span 2;
grid-column: 1;
}
.st-coin-sales-wrap .st-sales-table td.st-sale-img img,
.st-coin-sales-wrap .st-sales-table td.st-sale-img .st-sale-thumb {
width: 64px; height: 64px; object-fit: cover; border-radius: 6px;
}
.st-coin-sales-wrap .st-sales-table td.st-sale-img .st-sale-nothumb {
display: flex; width: 64px; height: 64px;
align-items: center; justify-content: center;
background: var(--st-surface-2); border-radius: 6px;
color: var(--st-text-faint); font-size: 20px;
}
/* ── AUCTION card ──
Row 1: SOLD pill + date | total paid (gold)
Row 2: source · via | premium %
Row 3: full-width title (clamped to 2 lines) */
.st-coin-sales-wrap .st-sales-table tr.st-sale-row {
grid-template-rows: auto auto auto;
}
.st-coin-sales-wrap .st-sales-table td.st-sale-date {
grid-row: 1; grid-column: 2;
color: var(--st-text-muted);
font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
/* Strong "SOLD" signal — green pill before the date label */
.st-coin-sales-wrap .st-sales-table td.st-sale-date::before {
content: '✓ SOLD';
display: inline-block;
margin-right: 8px;
padding: 2px 7px;
background: var(--st-success);
color: var(--st-bg);
font-size: 10px;
font-weight: 700;
letter-spacing: .05em;
border-radius: 3px;
vertical-align: 1px;
}
.st-coin-sales-wrap .st-sales-table tr.st-sale-row td:nth-of-type(3) {
grid-row: 2; grid-column: 2;
font-size: 13px; color: var(--st-text); font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-coin-sales-wrap .st-sales-table tr.st-sale-row td.st-price {
grid-row: 1; grid-column: 3;
text-align: right;
font-size: 15px; font-weight: 700;
color: var(--st-gold);
font-family: var(--st-font-mono);
}
.st-coin-sales-wrap .st-sales-table td.st-sale-prem {
grid-row: 2; grid-column: 3;
text-align: right;
font-size: 11px; color: var(--st-text-muted);
}
.st-coin-sales-wrap .st-sales-table td.st-sale-prem:before {
content: 'Prem '; color: var(--st-text-faint); margin-right: 2px;
}
/* Title row — clamped to 2 lines, full width, divider above */
.st-coin-sales-wrap .st-sales-table tr.st-sale-row td.st-sale-notes {
grid-row: 3;
grid-column: 1 / -1;
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--st-border);
font-size: 12px;
line-height: 1.45;
color: var(--st-text-muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
/* Hide the redundant spot-melt column on phones */
.st-coin-sales-wrap .st-sales-table tr.st-sale-row td.st-sale-spot {
display: none;
}
/* ── RETAIL card —
Row 1: dealer name | price (gold)
Row 2: "Grade: …" spanning right two cols */
.st-coin-sales-wrap .st-sales-table tr.st-retail-row td.st-retail-dealer {
grid-row: 1; grid-column: 2;
font-weight: 600; color: var(--st-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.st-coin-sales-wrap .st-sales-table tr.st-retail-row td.st-price {
grid-row: 1; grid-column: 3;
text-align: right;
font-size: 15px; font-weight: 700;
color: var(--st-gold);
font-family: var(--st-font-mono);
}
.st-coin-sales-wrap .st-sales-table tr.st-retail-row td.st-sale-notes {
grid-row: 2; grid-column: 2 / span 2;
font-size: 12px; color: var(--st-text-muted);
}
.st-coin-sales-wrap .st-sales-table tr.st-retail-row td.st-sale-notes:not(:empty):before {
content: 'Grade: '; color: var(--st-text-faint); margin-right: 3px;
}
/* Expand row still works — just give it proper padding as a card */
.st-coin-sales-wrap .st-sales-table tr.st-sale-expand {
background: rgba(13,27,42,.6);
border: 1px solid rgba(201,168,76,.15);
border-radius: 8px;
padding: 14px;
margin: -4px 0 10px;
}
.st-coin-sales-wrap .st-sales-table tr.st-sale-expand td {
padding: 0;
font-size: 12.5px;
}
/* Expand images — stack and constrain */
.st-coin-sales-wrap .st-expand-imgs {
display: flex;
flex-direction: row;
gap: 8px;
justify-content: center;
margin-bottom: 12px;
}
.st-coin-sales-wrap .st-expand-img {
width: 48%;
max-width: 160px;
height: auto;
}
.st-coin-sales-wrap .st-expand-facts {
width: 100%;
font-size: 12px;
}
.st-coin-sales-wrap .st-expand-facts th {
width: 45%;
font-weight: 500;
color: var(--st-text-muted, #9BA8B4);
padding: 3px 4px;
}
.st-coin-sales-wrap .st-expand-facts td { padding: 3px 4px; }
.st-coin-sales-wrap .st-expand-title {
font-size: 12.5px;
color: var(--st-text-muted, #9BA8B4);
margin-bottom: 8px;
line-height: 1.4;
}
/* Upcoming auctions table — same stacked-card treatment */
#st-coin-upcoming table,
#st-coin-upcoming thead,
#st-coin-upcoming tbody,
#st-coin-upcoming tr,
#st-coin-upcoming td {
display: block;
width: 100%;
}
#st-coin-upcoming thead { position: absolute; left: -9999px; }
#st-coin-upcoming tr {
background: var(--st-slate, #1C2E40);
border: 1px solid rgba(255,255,255,.06);
border-left: 3px solid var(--st-gold, #C9A84C);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 10px;
}
#st-coin-upcoming td {
border: 0;
padding: 2px 0;
font-size: 13px;
}
}
/* ==========================================================================
RESULTS TEMPLATE — Filter bar, results table, pagination
`template-sovereign-results.php` introduced its own class names
(.st-filter-bar, .st-select, .st-input, .st-btn--primary, .st-btn--ghost,
.st-results-table, .st-page-btn) but no CSS ever defined them, so the
page rendered with default browser styling. This block backfills them
using the shared design tokens so they auto-theme with light/dark.
========================================================================== */
/* ── Filter bar ───────────────────────────────────────────────────────────── */
.st-filter-bar {
background: var(--st-surface);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
padding: 20px 24px;
margin-bottom: 24px;
box-shadow: var(--st-shadow);
}
.st-filter-bar__row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
margin-bottom: 18px;
}
.st-filter-bar__group {
display: flex;
flex-direction: column;
min-width: 0;
}
.st-filter-bar__label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--st-text-muted);
margin-bottom: 6px;
}
.st-filter-bar__group--range .st-range-inputs {
display: flex;
align-items: center;
gap: 6px;
}
.st-range-sep {
color: var(--st-text-muted);
}
.st-filter-bar__actions {
display: flex;
align-items: center;
gap: 12px;
padding-top: 12px;
border-top: 1px solid var(--st-border-subtle);
}
.st-filter-bar__count {
font-size: 0.85rem;
color: var(--st-text-muted);
margin-left: auto;
}
/* ── Form controls (select / input) ───────────────────────────────────────── */
.st-select,
.st-input {
background: var(--st-bg);
border: 1px solid var(--st-border);
border-radius: var(--st-radius-sm);
color: var(--st-text);
font-family: inherit;
font-size: 0.88rem;
padding: 8px 12px;
outline: none;
transition: border-color var(--st-transition), box-shadow var(--st-transition);
width: 100%;
min-width: 0;
}
.st-select:focus,
.st-input:focus {
border-color: var(--st-gold);
box-shadow: 0 0 0 3px rgba(168, 129, 48, 0.15);
}
.st-select option {
background: var(--st-bg);
color: var(--st-text);
}
.st-input--year {
width: 84px;
}
/* ── Buttons (additional variants used by the results filter) ─────────────── */
.st-btn--primary {
background: var(--st-accent);
color: var(--st-bg);
border: 1px solid var(--st-accent);
font-weight: 600;
box-shadow: var(--st-shadow);
}
.st-btn--primary:hover {
background: var(--st-accent-strong);
border-color: var(--st-accent-strong);
color: var(--st-bg);
text-decoration: none;
box-shadow: var(--st-shadow-lg);
transform: translateY(-1px);
}
.st-btn--ghost {
background: transparent;
color: var(--st-text);
border: 1px solid var(--st-border);
}
.st-btn--ghost:hover {
background: var(--st-surface-2);
border-color: var(--st-gold-dark);
color: var(--st-text);
text-decoration: none;
}
/* ── Results table ────────────────────────────────────────────────────────── */
.st-results-section {
margin-top: 8px;
}
.st-table-wrap {
background: var(--st-surface);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
overflow: auto;
box-shadow: var(--st-shadow);
}
.st-results-table {
width: 100%;
border-collapse: collapse;
font-size: 0.86rem;
}
.st-results-table thead th {
background: var(--st-bg);
color: var(--st-text-muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 11px 14px;
text-align: left;
border-bottom: 1px solid var(--st-border);
white-space: nowrap;
position: sticky;
top: 0;
}
.st-results-table tbody tr {
border-bottom: 1px solid var(--st-border-subtle);
transition: background var(--st-transition);
}
.st-results-table tbody tr:last-child { border-bottom: none; }
.st-results-table tbody tr:hover { background: var(--st-surface-2); }
.st-results-table tbody td {
padding: 10px 14px;
color: var(--st-text);
vertical-align: middle;
}
.st-results-table .st-num {
text-align: right;
font-family: var(--st-font-mono);
white-space: nowrap;
}
.st-col-sortable {
cursor: pointer;
user-select: none;
}
.st-col-sortable:hover { color: var(--st-gold); }
.st-col-sortable.is-sorted { color: var(--st-gold); }
.st-col-sortable.is-sorted::after {
content: ' ↓';
font-size: 0.85em;
}
.st-col-sortable.is-sorted-asc::after { content: ' ↑'; }
/* ── Per-row sale thumbnail (durability sprint 2026-04-26) ────────────
Tiny photo column on the recent-sales table. Click opens the
sale-photo lightbox below. Local images kept on our server so the
thumbnail keeps working when the upstream auction page goes dark. */
.st-results-table th.st-th-img,
.st-results-table td.st-td-img {
width: 56px;
padding: 4px 8px;
text-align: center;
}
.st-thumb-btn {
background: none;
border: 1px solid var(--st-border-subtle);
padding: 0;
cursor: zoom-in;
border-radius: 4px;
overflow: hidden;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.st-thumb-btn:hover { border-color: var(--st-gold); }
.st-thumb-btn img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.st-thumb-empty {
color: var(--st-text-muted);
font-size: 0.85em;
}
/* ── Sale-photo lightbox ───────────────────────────────────────────── */
.st-lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.78);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.st-lightbox[hidden] { display: none; }
.st-lightbox__close {
position: absolute;
top: 16px;
right: 20px;
font-size: 32px;
line-height: 1;
background: none;
color: #fff;
border: 0;
cursor: pointer;
padding: 4px 12px;
}
.st-lightbox__inner {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 24px;
width: min(1200px, 100%);
max-height: 90vh;
background: var(--st-surface, #fff);
border-radius: 6px;
overflow: hidden;
}
@media (max-width: 800px) {
.st-lightbox__inner { grid-template-columns: 1fr; max-height: 95vh; }
}
.st-lightbox__main {
position: relative;
background: #000;
display: flex;
align-items: center;
justify-content: center;
min-height: 320px;
}
.st-lightbox__main img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
display: block;
}
.st-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: #fff;
border: 0;
font-size: 28px;
padding: 8px 14px;
cursor: pointer;
border-radius: 4px;
}
.st-lightbox__nav:hover { background: rgba(0, 0, 0, 0.85); }
.st-lightbox__nav--prev { left: 12px; }
.st-lightbox__nav--next { right: 12px; }
.st-lightbox__counter {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
}
.st-lightbox__meta {
padding: 24px;
overflow-y: auto;
color: var(--st-text);
}
.st-lightbox__meta h3 {
margin: 0 0 8px;
font-size: 18px;
line-height: 1.3;
}
.st-lightbox__subtitle {
color: var(--st-text-muted);
margin: 0 0 16px;
font-size: 13px;
}
.st-lightbox__desc {
white-space: pre-wrap;
font-size: 14px;
line-height: 1.55;
margin: 0 0 16px;
}
.st-lightbox__source a {
color: var(--st-gold);
text-decoration: none;
font-size: 13px;
}
.st-lightbox__source a:hover { text-decoration: underline; }
.st-col-thumb { width: 56px; }
.st-results-table img {
max-width: 44px;
max-height: 44px;
object-fit: contain;
border-radius: var(--st-radius-sm);
display: block;
}
/* ── Currency switcher in bar mode ────────────────────────────────────────── */
.st-currency-switcher--bar {
margin: 0 0 16px;
align-self: flex-end;
}
/* ── Pagination ───────────────────────────────────────────────────────────── */
.st-page-btn {
background: var(--st-surface);
border: 1px solid var(--st-border);
border-radius: var(--st-radius-sm);
color: var(--st-text);
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
padding: 8px 16px;
cursor: pointer;
transition: border-color var(--st-transition),
background var(--st-transition),
color var(--st-transition);
}
.st-page-btn:hover:not(:disabled) {
border-color: var(--st-gold);
background: var(--st-surface-2);
color: var(--st-gold);
}
.st-page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.st-page-info {
font-size: 14px;
color: var(--st-text-muted);
font-family: var(--st-font-mono);
}
/* ── Skeleton (table loading state) ───────────────────────────────────────── */
.st-skeleton--results-table {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
background: var(--st-surface);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
.st-skeleton--results-table .st-skeleton--table-row {
height: 36px;
background: linear-gradient(
90deg,
var(--st-surface-2) 25%,
var(--st-surface-3) 50%,
var(--st-surface-2) 75%
);
background-size: 800px 100%;
animation: st-shimmer 1.5s infinite linear;
border-radius: var(--st-radius-sm);
}
/* ── Responsive — let the table scroll horizontally on small screens ──────── */
@media (max-width: 900px) {
.st-filter-bar { padding: 16px; }
.st-filter-bar__actions { flex-wrap: wrap; }
.st-results-table thead th,
.st-results-table tbody td { padding: 8px 10px; font-size: 14px; }
}
/* ── Readability floor — 14px minimum for body text ───────────────────────────
Front-end pages must render normal text (paragraphs, list items, table
cells) at 14px or larger. Smaller sizes are reserved for explicit
small-text classes (footnotes, asterisks, badges, chips, mono labels).
Placed at the end of the file so it cascades over earlier rules; the
`body` prefix raises specificity to beat most class selectors. */
body .st-page-wrap,
body .st-coin-detail,
body .st-root {
font-size: 14px;
line-height: 1.55;
}
body .st-page-wrap p,
body .st-page-wrap li,
body .st-page-wrap dt,
body .st-page-wrap dd,
body .st-page-wrap td,
body .st-page-wrap th,
body .st-coin-detail p,
body .st-coin-detail li,
body .st-coin-detail dt,
body .st-coin-detail dd,
body .st-coin-detail td,
body .st-coin-detail th,
body .st-root p,
body .st-root li,
body .st-root td,
body .st-root th {
font-size: 14px;
}
/* Small-text opt-outs — these classes are explicitly allowed below 14px for
footnotes, asterisks, chips, badges, and meta labels. Add new classes
here when introducing intentionally smaller text. */
body .st-page-wrap .st-foot,
body .st-page-wrap .st-foot *,
body .st-page-wrap .st-note-small,
body .st-page-wrap .st-asterisk,
body .st-page-wrap sup,
body .st-page-wrap sub,
body .st-page-wrap small,
body .st-page-wrap .st-badge,
body .st-page-wrap .st-chip,
body .st-page-wrap .st-tag,
body .st-page-wrap .st-pill,
body .st-page-wrap .st-meta-tiny,
body .st-page-wrap .st-text-small,
body .st-coin-detail .st-foot,
body .st-coin-detail .st-foot *,
body .st-coin-detail .st-note-small,
body .st-coin-detail sup,
body .st-coin-detail sub,
body .st-coin-detail small,
body .st-coin-detail .st-badge,
body .st-coin-detail .st-chip,
body .st-coin-detail .st-tag,
body .st-coin-detail .st-pill,
body .st-coin-detail .st-meta-tiny,
body .st-coin-detail .st-text-small {
font-size: 0.82em;
}