/* ============================================================================
SalmonPrices — Premium Design System
/css/salmonprices-premium.css
----------------------------------------------------------------------------
Extracted from the new premium front page. Drop-in, framework-free.
DESIGN GOALS
• Visual consistency with the new front page, with minimal page changes.
• Non-invasive: every class is prefixed `sp-` and every token `--sp-`, so it
will NOT collide with a page's existing `.card`, `.seg`, `--gold`, etc.
• Self-contained: ships its own tokens + font stack; no external deps.
HOW TO USE (per page, visual-only — no data/PHP/chart-data changes)
1) In , after the page's own CSS:
) OR sp-dtable (div grid)
old "source:" line → sp-source (or sp-source-box for a panel)
flags → sp-flag (+ sp-sm for table size)
up/down numbers → sp-up / sp-down (gold accent → sp-gold)
COMPONENTS
tokens · page · section header · cards · card head/title/source
KPI cards · metric cards · chart cards · legend
tabs/buttons · pills · tables (semantic + grid) · flag badges
indicators (green/red/gold) · source box · disclaimer
========================================================================== */
/* ─── 1. Tokens ─────────────────────────────────────────────────────────── */
:root{
--sp-font:'Inter','IBM Plex Sans',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,Arial,sans-serif;
/* text */
--sp-text:#F3F7FF; /* primary / brightest */
--sp-heading:#EEF3FB; /* card + section titles */
--sp-text-2:#C5D1DF; /* secondary */
--sp-muted:#8FA1B5; /* labels, captions */
--sp-faint:#5C6F86; /* faintest meta */
/* accents (muted gold/copper) */
--sp-gold:#A89470;
--sp-gold-light:#D4B87A;
--sp-gold-deep:#76684E;
/* status */
--sp-green:#18D98B;
--sp-red:#FF4058;
--sp-blue:#5FA8FF;
/* borders / hairlines */
--sp-border:rgba(91,135,180,0.20);
--sp-border-2:rgba(96,142,186,0.30);
--sp-border-hero:rgba(96,142,186,0.30);
--sp-hair:rgba(148,163,184,0.06);
--sp-hair-2:rgba(148,163,184,0.11);
/* chart series helpers (legend swatches only — canvas colors live in JS) */
--sp-c-2026:#FFFFFF; --sp-c-2025:#C8A86A; --sp-c-2024:#2BD27E;
--sp-c-2023:#FB9A3C; --sp-c-2022:#3DC9EE; --sp-c-2021:#9B8CFF;
}
/* ─── 2. Page surface (opt-in via ) ────────────── */
body.sp-premium{
font-family:var(--sp-font);
color:var(--sp-text-2);
background:
radial-gradient(1200px 620px at 18% -6%, rgba(0,92,152,0.20), transparent 48%),
radial-gradient(960px 540px at 86% 2%, rgba(22,74,134,0.13), transparent 56%),
radial-gradient(820px 460px at 50% 120%, rgba(8,40,78,0.18), transparent 60%),
linear-gradient(180deg, #07131F 0%, #060E18 46%, #04090F 100%);
background-attachment:fixed;
-webkit-font-smoothing:antialiased;
font-variant-numeric:tabular-nums lining-nums;
font-feature-settings:'tnum' 1,'lnum' 1;
}
/* ─── 3. Section header ─────────────────────────────────────────────────── */
.sp-section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin:0 0 16px; }
.sp-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--sp-gold-light); margin-bottom:6px; }
.sp-section-title{ font-family:var(--sp-font); font-size:24px; font-weight:800; letter-spacing:-0.02em; color:var(--sp-heading); line-height:1.12; }
.sp-section-sub{ font-size:13px; color:var(--sp-text-2); font-weight:500; margin-top:5px; max-width:760px; line-height:1.5; }
/* ─── 4. Cards (tiered depth: base · secondary · hero) ──────────────────── */
.sp-card{
font-family:var(--sp-font);
background:
radial-gradient(120% 90% at 12% -10%, rgba(28,96,158,0.16), transparent 44%),
linear-gradient(145deg, #0C2138 0%, #091627 56%, #06101D 100%);
border:1px solid var(--sp-border); border-radius:12px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 12px 30px rgba(0,0,0,0.30);
padding:17px 19px; position:relative; isolation:isolate; color:var(--sp-text-2);
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sp-card.sp-secondary{
background:
radial-gradient(130% 95% at 14% -12%, rgba(34,108,176,0.18), transparent 44%),
linear-gradient(145deg, #0D2440 0%, #0A1A2F 55%, #07121F 100%);
border-color:rgba(91,135,180,0.24);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.045), 0 16px 38px rgba(0,0,0,0.34);
padding:19px 21px;
}
.sp-card.sp-hero{
background:
radial-gradient(135% 100% at 12% -10%, rgba(0,118,186,0.24), transparent 46%),
linear-gradient(145deg, #0E263F 0%, #0B1C32 50%, #071322 100%);
border-color:var(--sp-border-hero); border-radius:13px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.055), 0 24px 58px rgba(0,0,0,0.44), 0 6px 18px rgba(0,0,0,0.30);
padding:22px 24px;
}
.sp-card.sp-hero::before{
content:''; position:absolute; inset:0 0 auto 0; height:1px; border-radius:13px 13px 0 0;
background:linear-gradient(90deg, transparent, rgba(168,148,112,0.50) 30%, rgba(168,148,112,0.62) 50%, rgba(168,148,112,0.50) 70%, transparent);
opacity:0.75; z-index:1;
}
.sp-card:hover, .sp-card.sp-secondary:hover{ border-color:rgba(96,142,186,0.38); }
.sp-card.sp-hero:hover{ border-color:rgba(168,148,112,0.34); }
/* card head / titles / source */
.sp-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.sp-card-title{ font-size:16px; font-weight:700; color:var(--sp-heading); letter-spacing:-0.01em; display:flex; align-items:center; gap:7px; }
.sp-card.sp-hero .sp-card-title{ font-size:18.5px; }
.sp-card.sp-secondary .sp-card-title{ font-size:16.5px; }
.sp-card-subtitle{ font-size:11.5px; color:var(--sp-text-2); font-weight:500; margin-top:3px; letter-spacing:0.005em; }
.sp-card-note{ font-size:11px; color:var(--sp-muted); font-weight:500; margin-top:3px; }
.sp-source{ font-size:10.5px; color:var(--sp-muted); letter-spacing:0.02em; margin-top:14px; }
/* ─── 5. KPI cards ──────────────────────────────────────────────────────── */
.sp-kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.sp-kpi{
font-family:var(--sp-font);
background:
radial-gradient(130% 110% at 14% -14%, rgba(0,120,188,0.22), transparent 48%),
linear-gradient(150deg, #0F2742 0%, #0B1D34 52%, #071423 100%);
border:1px solid rgba(96,142,186,0.26); border-radius:13px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 36px rgba(0,0,0,0.38);
padding:24px 24px 21px; display:flex; flex-direction:column; min-height:226px;
position:relative; isolation:isolate;
transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.sp-kpi:hover{ border-color:rgba(168,148,112,0.30); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 22px 46px rgba(0,0,0,0.44); }
.sp-kpi-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.sp-kpi-title{ font-size:10.5px; font-weight:600; letter-spacing:0.10em; text-transform:uppercase; color:#B8C2D4; }
.sp-kpi-prices{ display:flex; align-items:baseline; gap:22px; flex-wrap:wrap; margin-bottom:auto; }
.sp-kpi-price{ display:flex; align-items:baseline; gap:7px; }
.sp-kpi-price .sp-val{ font-size:39px; font-weight:800; letter-spacing:-0.03em; color:#FFFFFF; line-height:1; font-variant-numeric:tabular-nums; }
.sp-kpi-price .sp-unit{ font-size:12.5px; color:var(--sp-muted); font-weight:600; letter-spacing:0.01em; align-self:baseline; }
.sp-kpi-price.sp-secondary .sp-val{ font-size:26px; color:#B7C3D6; font-weight:600; }
.sp-kpi-foot{ margin-top:18px; padding-top:14px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; position:relative; }
.sp-kpi-foot::before{ content:''; position:absolute; top:0; left:-2px; right:-2px; height:1px; background:linear-gradient(90deg, transparent, rgba(148,163,184,0.16) 18%, rgba(148,163,184,0.16) 82%, transparent); }
.sp-kpi-period{ font-size:11.5px; color:var(--sp-text-2); letter-spacing:0.02em; font-weight:500; }
.sp-kpi-change{ font-size:13.5px; font-weight:700; display:flex; align-items:baseline; gap:7px; font-variant-numeric:tabular-nums; }
.sp-kpi-change .sp-vs{ font-size:9.5px; color:var(--sp-text-2); font-weight:600; letter-spacing:0.05em; text-transform:uppercase; }
/* ─── 6. Metric cards (compact stat tile) ───────────────────────────────── */
.sp-metric{
font-family:var(--sp-font);
background:linear-gradient(150deg, #0D2440 0%, #0A1A2F 56%, #07121F 100%);
border:1px solid var(--sp-border); border-radius:11px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.30);
padding:16px 18px; display:flex; flex-direction:column; gap:8px;
}
.sp-metric .sp-metric-label{ font-size:10px; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--sp-muted); }
.sp-metric .sp-metric-value{ font-size:27px; font-weight:800; letter-spacing:-0.02em; color:#FFFFFF; line-height:1; font-variant-numeric:tabular-nums; }
.sp-metric .sp-metric-value .sp-unit{ font-size:12px; font-weight:600; color:var(--sp-muted); margin-left:5px; }
.sp-metric .sp-metric-delta{ font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
/* ─── 7. Chart cards + legend ───────────────────────────────────────────── */
.sp-chart-card{ display:flex; flex-direction:column; }
.sp-chart-card canvas{ flex:1 1 auto; }
.sp-chart-card .sp-source{ margin-top:14px; }
canvas.sp-canvas{ display:block; width:100%; }
.sp-legend{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.sp-legend .sp-lg{ font-size:11px; color:var(--sp-muted); display:inline-flex; align-items:center; gap:6px; letter-spacing:0.02em; }
.sp-legend .sp-lg .sp-sw{ width:16px; height:3px; border-radius:2px; display:inline-block; }
.sp-legend .sp-lg.is-current{ color:#F1F5FB; font-weight:700; }
.sp-legend .sp-lg.is-current .sp-sw{ height:4px; box-shadow:0 0 8px rgba(248,250,252,0.5); }
/* ─── 8. Tabs / segmented buttons ───────────────────────────────────────── */
.sp-tabs{ display:inline-flex; padding:3px; border:1px solid var(--sp-border); border-radius:8px; background:rgba(6,14,26,0.92); box-shadow:inset 0 1px 3px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.015); }
.sp-tab{ height:29px; padding:0 13px; border:0; background:transparent; color:var(--sp-muted); font-family:var(--sp-font); font-size:10.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; border-radius:6px; transition:color .16s,background .16s,box-shadow .16s; line-height:1; }
.sp-tab:hover{ color:var(--sp-text-2); background:rgba(255,255,255,0.03); }
.sp-tab.is-active{ color:var(--sp-gold-light); background:linear-gradient(180deg, rgba(168,148,112,0.16) 0%, rgba(8,17,30,0.95) 100%); box-shadow:inset 0 0 0 1px rgba(168,148,112,0.70), inset 0 1px 0 rgba(212,184,122,0.20), 0 0 14px rgba(168,148,112,0.18), 0 1px 2px rgba(0,0,0,0.35); }
.sp-tabs.sp-sm .sp-tab{ height:26px; padding:0 10px; font-size:9.5px; letter-spacing:0.04em; }
/* ─── 9. Pills (independent selector buttons) ───────────────────────────── */
.sp-pill-row{ display:flex; gap:7px; flex-wrap:wrap; margin:4px 0 2px; }
.sp-pill{ height:28px; padding:0 13px; border:1px solid var(--sp-border); border-radius:7px; background:rgba(6,14,26,0.6); color:var(--sp-text-2); font-family:var(--sp-font); font-size:11px; font-weight:600; letter-spacing:0.02em; cursor:pointer; line-height:1; transition:color .16s, background .16s, border-color .16s; }
.sp-pill:hover{ color:var(--sp-text); border-color:rgba(96,142,186,0.36); background:rgba(255,255,255,0.02); }
.sp-pill.is-active{ color:var(--sp-gold-light); background:linear-gradient(180deg, rgba(168,148,112,0.16) 0%, rgba(8,17,30,0.95) 100%); border-color:rgba(168,148,112,0.70); box-shadow:inset 0 1px 0 rgba(212,184,122,0.18), 0 0 12px rgba(168,148,112,0.16); }
/* ─── 10a. Tables — semantic ───────────────────── */
.sp-table{ width:100%; border-collapse:collapse; font-family:var(--sp-font); }
.sp-table thead th{ font-size:9.5px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--sp-text-2); text-align:left; padding:0 10px 9px; border-bottom:1px solid var(--sp-hair-2); }
.sp-table tbody td{ font-size:13px; color:#D5DEEC; font-weight:600; letter-spacing:0.01em; padding:9.5px 10px; border-top:1px solid var(--sp-hair); }
.sp-table tbody tr:first-child td{ border-top:0; }
.sp-table .sp-num{ text-align:right; font-variant-numeric:tabular-nums; color:#F1F5FB; font-weight:700; letter-spacing:-0.01em; }
.sp-table th.sp-num{ text-align:right; color:var(--sp-text-2); font-weight:600; }
.sp-table .sp-name{ display:flex; align-items:center; gap:9px; }
/* ─── 10b. Tables — div grid (matches the front-page look exactly) ──────── */
.sp-dtable{ width:100%; display:flex; flex-direction:column; }
.sp-dtable .sp-dt-head{ display:grid; grid-template-columns:var(--sp-cols,1fr 92px 80px); gap:10px; font-size:9.5px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--sp-text-2); padding:0 0 9px; border-bottom:1px solid var(--sp-hair-2); }
.sp-dtable .sp-dt-head .sp-r{ text-align:right; }
.sp-dtable .sp-dt-rows{ display:flex; flex-direction:column; }
.sp-dtable .sp-dt-row{ display:grid; grid-template-columns:var(--sp-cols,1fr 92px 80px); gap:10px; align-items:center; padding:9.5px 0; }
.sp-dtable .sp-dt-row + .sp-dt-row{ border-top:1px solid var(--sp-hair); }
.sp-dtable .sp-dt-row .sp-nm{ display:flex; align-items:center; gap:9px; font-size:13px; color:#D5DEEC; font-weight:600; letter-spacing:0.01em; }
.sp-dtable .sp-dt-row .sp-v{ font-size:13.5px; color:#F1F5FB; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.sp-dtable .sp-dt-row .sp-c{ font-size:12px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
/* ─── 11. Flag badges (market identifiers) ──────────────────────────────── */
.sp-flag{ width:28px; height:28px; border-radius:50%; flex-shrink:0; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background:#07111F; border:1px solid rgba(168,148,112,0.34); box-shadow:0 4px 12px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.10); position:relative; }
.sp-flag img, .sp-flag svg{ width:100%; height:100%; display:block; object-fit:cover; border-radius:50%; filter:saturate(0.82) contrast(1.03) brightness(0.93); }
.sp-flag::after{ content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none; box-shadow:inset 0 0 6px rgba(0,0,0,0.42); }
.sp-flag.sp-sm{ width:19px; height:19px; border-color:rgba(120,150,185,0.38); box-shadow:0 2px 6px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08); }
.sp-flag.sp-sm::after{ box-shadow:inset 0 0 4px rgba(0,0,0,0.40); }
/* ─── 12. Indicators (green / red / gold) ───────────────────────────────── */
.sp-up, .sp-pos{ color:var(--sp-green) !important; }
.sp-down, .sp-neg{ color:var(--sp-red) !important; }
.sp-gold{ color:var(--sp-gold) !important; }
.sp-gold-light{ color:var(--sp-gold-light) !important; }
.sp-check{ color:var(--sp-green); flex-shrink:0; display:inline-flex; }
/* ─── 13. Source box (bordered "sources & methodology" panel) ───────────── */
.sp-source-box{ font-family:var(--sp-font); background:rgba(15,26,43,0.35); border:1px solid rgba(148,163,184,0.14); border-radius:8px; padding:20px 24px; }
.sp-source-box .sp-source-h{ font-size:13px; color:var(--sp-gold); font-weight:700; letter-spacing:0.02em; margin-bottom:6px; }
.sp-source-box .sp-source-b{ font-size:13px; color:#758298; line-height:1.6; }
.sp-source-box a{ color:var(--sp-gold-light); text-decoration:none; }
.sp-source-box a:hover{ text-decoration:underline; }
/* ─── 14. Canonical quiet disclaimer ────────────────────────────────────── */
.sp-disclaimer{ margin:26px 0 4px; padding:14px 2px 0; border-top:1px solid rgba(148,163,184,0.08); font-family:var(--sp-font); }
.sp-disclaimer .sp-dh{ font-size:10px; color:#5B6A7E; font-weight:600; margin-bottom:4px; letter-spacing:0.10em; text-transform:uppercase; }
.sp-disclaimer .sp-db{ font-size:11px; color:#5B6A7E; line-height:1.6; max-width:1060px; font-weight:400; }
/* ─── 15. Light layout helpers (optional) ───────────────────────────────── */
.sp-grid{ display:grid; gap:14px; align-items:stretch; }
.sp-grid.sp-2{ grid-template-columns:1fr 1fr; }
.sp-grid.sp-3{ grid-template-columns:repeat(3,1fr); }
.sp-grid.sp-4{ grid-template-columns:repeat(4,1fr); }
/* ─── 16. Responsive ────────────────────────────────────────────────────── */
@media (max-width:1180px){
.sp-grid.sp-2, .sp-grid.sp-3, .sp-grid.sp-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
.sp-kpi-grid{ grid-template-columns:1fr 1fr; }
.sp-grid.sp-2, .sp-grid.sp-3, .sp-grid.sp-4{ grid-template-columns:1fr; }
.sp-section-title{ font-size:21px; }
}
@media (max-width:520px){
.sp-kpi-grid{ grid-template-columns:1fr; }
}