/* ============================================================
GoldNexa SKIN — premium polish layer (Aug 2026 redesign)
------------------------------------------------------------
ApplyPilot-warm identity: cream paper, espresso, bronze-gold.
This file layers PRO FINISH on top of existing pages:
typography, nav depth, card shadows, controls, tables.
RULES:
- Additive only: colors/shadows/spacing polish, never layout.
- Uses the same token names with hex fallbacks, so pages that
miss a token still render correctly.
- Loaded LAST (after page inline styles + page-content.css).
============================================================ */
/* ── Base refinement ────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(156,107,36,0.18); color: #26221C; }
body { letter-spacing: 0.005em; }
/* Warm slim scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #EFEAE0; }
::-webkit-scrollbar-thumb { background: #C9BFA8; border-radius: 6px; border: 2px solid #EFEAE0; }
::-webkit-scrollbar-thumb:hover { background: #A29A8C; }
/* ── Headings: display-grade typography ─────────────────────── */
h1, h2, h3, .ph-title, .pc-h2, .calc-title, .api-name, .guide-title,
.nav-logo-text, .footer-logo-text, .res-main, .doc-logo-text {
letter-spacing: -0.015em;
}
.ph-title, .pc-h1 { text-wrap: balance; }
.pc-lead, .ph-sub { text-wrap: pretty; }
/* ── Navbar: depth + translucency ───────────────────────────── */
#navbar {
background: rgba(255,255,255,0.92) !important;
-webkit-backdrop-filter: saturate(1.4) blur(10px);
backdrop-filter: saturate(1.4) blur(10px);
box-shadow: 0 1px 0 rgba(38,34,28,0.06), 0 4px 18px rgba(38,34,28,0.05);
}
.nav-logo-icon, .footer-logo-icon {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 2px 6px rgba(156,107,36,0.35);
}
.nav-link.active { font-weight: 700; }
.nav-icon-btn:hover { box-shadow: 0 2px 8px rgba(156,107,36,0.18); }
/* ── Cards: layered warm shadows + bronze hover ─────────────── */
.pc-card, .rate-card, .chart-card, .market-summary-card, .calc-panel,
.dir-card, .api-card, .guide-card, .explore-card, .doc-card,
.news-hero, .qc-card, .panel-card, .metal-card {
box-shadow:
0 1px 2px rgba(38,34,28,0.04),
0 6px 20px rgba(38,34,28,0.05) !important;
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.api-card:hover, .guide-card:hover, .explore-card:hover, .pc-card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgba(38,34,28,0.05),
0 14px 34px rgba(38,34,28,0.10) !important;
}
.rate-card.featured, .rate-card:first-child {
border-color: rgba(156,107,36,0.28);
background:
linear-gradient(180deg, rgba(248,241,227,0.55), rgba(255,255,255,0) 38%),
#FFFFFF;
}
/* ── Buttons & pills ────────────────────────────────────────── */
.btn-share, .ttab, .fchip, .karat-tab, .unit-tab, .cpt, .show-more,
.about-cta a, .api-visit, .doc-cta, .alert-submit-btn {
transition: all .22s cubic-bezier(.4,0,.2,1);
}
.about-cta a.primary, .alert-submit-btn {
box-shadow: 0 2px 8px rgba(156,107,36,0.28);
}
.about-cta a.primary:hover, .alert-submit-btn:hover {
box-shadow: 0 6px 18px rgba(156,107,36,0.38);
}
.fchip.on, .ttab.active, .karat-tab.active, .unit-tab.active {
box-shadow: inset 0 -2px 0 rgba(156,107,36,0.35);
}
/* ── Focus visibility (pro detail) ──────────────────────────── */
:focus-visible { outline: 2px solid #B07E2B; outline-offset: 2px; border-radius: 4px; }
/* ── Data/price typography ─────────────────────────────────── */
.rc-price, .pc-price, .chart-big-price, .ms-value, .metal-price {
font-variant-numeric: tabular-nums lining-nums;
letter-spacing: -0.01em;
}
/* ── Tables ──
Header colours/sizes are unified in the UNIFIED READING SCALE block
below, which covers all six table classes at once. Only the zebra
striping lives here. */
.doc-table tr:nth-child(even) td, .pc-table tr:nth-child(even) td { background: rgba(247,244,238,0.5); }
/* ── Badges & status chips ─────────────────────────────────── */
.ph-live-badge {
background: #F8F1E3 !important;
border: 1px solid rgba(156,107,36,0.30) !important;
box-shadow: 0 1px 3px rgba(156,107,36,0.12);
}
.tag { border-radius: 999px; }
/* ── Hero & footer: espresso depth ─────────────────────────── */
#hero { background:
radial-gradient(1100px 420px at 18% -10%, rgba(156,107,36,0.07), transparent 62%),
var(--bg, #F7F4EE) !important;
}
#footer {
background:
radial-gradient(900px 300px at 85% -20%, rgba(217,160,63,0.10), transparent 60%),
#26221C !important;
border-top: 3px solid #9C6B24;
}
.result-card, .alert-banner-inner {
background: linear-gradient(135deg, #26221C, #3A2F23) !important;
}
/* ── Notes & insights ───────────────────────────────────────── */
.pc-note, .doc-note {
box-shadow: inset 0 0 0 1px rgba(156,107,36,0.06);
}
/* ── Link underline polish ─────────────────────────────────── */
.pc-section a, .doc-wrap a:not(.doc-related-card) { text-underline-offset: 3px; }
/* ── FAQ accordions ─────────────────────────────────────────── */
.pc-faq details { box-shadow: 0 1px 2px rgba(38,34,28,0.04); }
.pc-faq details[open] { border-color: rgba(156,107,36,0.30); }
.pc-faq details[open] summary { color: #9C6B24; }
/* ── Inputs: warm focus ─────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
border-color: #B07E2B !important;
box-shadow: 0 0 0 3px rgba(176,126,43,0.12);
}
/* ── Mobile niceties ───────────────────────────────────────── */
@media (max-width: 1024px) {
.api-card:hover, .guide-card:hover, .explore-card:hover, .pc-card:hover {
transform: none; /* no lift without hover */
}
::-webkit-scrollbar { width: 6px; height: 6px; }
}
@media (prefers-reduced-motion: reduce) {
.api-card, .guide-card, .explore-card, .pc-card { transition: none; }
}
/* ============================================================
UNIFIED READING SCALE — single source of truth (Aug 2026)
------------------------------------------------------------
THE PROBLEM THIS SOLVES
The site grew two parallel type scales that disagreed on every
element, so the same kind of heading or paragraph changed size
depending on which page you were on:
element content.css (.doc-*) page-content.css (.pc-*)
h1 34px 30px
h2 / h3 23 / 18px 20 / 15.5px
body p, li 16px 13.5px
lead 17px 14px
table / th 15 / 13px 14.5 / 12.5px UPPERCASE
note 14.5px 13px
11 pages (legal + guides) used the first, the app pages the
second, and about.html had moved from one family to the other —
which is why About stopped matching Privacy and Terms.
WHY THE SIZES LIVE HERE
skin.css is the only stylesheet loaded by all 26 pages, so it is
the one place a scale can be authoritative. The font-size values
still sitting in content.css and page-content.css are overridden
below; edit sizes HERE, not there.
Both class families are given the same values, so a page keeps
its own markup and still matches every other page. Editorial
classes only — mobile.css uses a SEPARATE .pc-price / .pc-icon /
.pc-metal / .pc-unit / .pc-change namespace for price-card
chrome, and none of it is touched here.
============================================================ */
:root{
--gn-h1: 32px; --gn-h2: 22px; --gn-h3: 17px;
--gn-lead: 16.5px;
--gn-sub: 14px; /* .ph-sub, the line under an app page's title */
--gn-body: 15.5px;
--gn-table: 14.5px; --gn-table-th: 12.5px;
--gn-note: 14px;
--gn-small: 12.5px;
--gn-card-pad: 24px 26px;
--gn-radius-card: 12px;
--gn-radius-inner: 8px;
--gn-measure: 76ch; /* readable line length, independent of container */
}
/* ── headings ──
.ph-title is the app pages' . It had drifted to FOUR different
sizes — 26px (calculator), 28px (news/jewellers/ai-advisor), 30px
(charts/crypto/currency/weather/tools/about), 32px (rate pages) —
so the main heading changed size as you moved through the site.
The `#page-header` prefix is load-bearing. mobile.css defines six
scoped overrides (.page-metal-v2 .ph-title, .page-charts-v2 …) at
22/23/24px, which are specificity (0,2,0) and would outrank a bare
.ph-title (0,1,0) on mobile. An ID selector is (1,1,0) and wins
over all of them; the bare class after it covers any page whose
title sits outside #page-header. */
#page-header .ph-title, .ph-title,
.doc-wrap h1, .pc-h1 { font-size: var(--gn-h1); }
/* the sub-line under the page title: was 13px on 7 pages, 13.5px on 7 */
#page-header .ph-sub, .ph-sub { font-size: var(--gn-sub); }
.doc-wrap h2, .pc-h2 { font-size: var(--gn-h2); }
.doc-wrap h3, .pc-h3 { font-size: var(--gn-h3); }
/* The lead must be scoped (.doc-wrap .doc-lead = 0,2,0), not bare
(.doc-lead = 0,1,0): the body rule below is `.doc-wrap p` (0,1,1),
and since a lead IS a
inside .doc-wrap, a bare class selector
loses to it and the intro silently renders at body size. */
.doc-wrap .doc-lead, .pc-section .pc-lead,
.doc-lead, .pc-lead { font-size: var(--gn-lead); }
/* ── body copy ── */
.doc-wrap p, .pc-section p,
.doc-wrap li, .pc-section li { font-size: var(--gn-body); }
/* Cap the measure so prose stays readable. .doc-wrap is already a
760px column, but .pc-section spans up to 1280px — unconstrained
that produced the wall-of-text look. Applies to prose only, so
tables and card grids still use the full width. */
.pc-section p, .pc-section li { max-width: var(--gn-measure); }
/* ── cards: one padding + one radius ── */
.doc-card, .pc-card {
padding: var(--gn-card-pad);
border-radius: var(--gn-radius-card);
}
/* ── notes ── */
.doc-note, .pc-note { font-size: var(--gn-note); border-radius: var(--gn-radius-inner); }
/* ── tables: one treatment for all six table classes ──
The site had grown SIX table classes with three different header
treatments and two different header backgrounds:
.doc-table 15px th 13px sentence case bg var(--bg)
.pc-table 14.5px th 12.5px UPPERCASE bg var(--bg)
.ds-table 13.5px th 11px UPPERCASE bg #F1ECE1
.history-table -- th 11px UPPERCASE bg var(--bg)
.perf-table 13px th 11px UPPERCASE bg var(--bg)
.market-table 13.5px th 11px UPPERCASE bg var(--bg)
All six now share one size, one header style and one border colour.
Sentence-case headers: at 11–12.5px, uppercase with letter-spacing
is measurably harder to scan, and it read as a different design on
every page.
Deliberately NOT touched: .ds-table's position:sticky headers and
its min-width:640px scroll floor, which are functional, not
cosmetic. Only colour/size/case are normalised here. */
/* NOTE the `table.ds-table` selector: crypto/currency/weather define
their table as `table.ds-table{font-size:13.5px}` inline, which is
specificity (0,1,1) and would OUTRANK a bare `.ds-table` (0,1,0)
here — the size would silently keep its old value on exactly those
three pages. Matching the element qualifier makes specificity equal,
so load order decides and skin.css (loaded last) wins. */
.doc-table, .pc-table, .ds-table, table.ds-table,
.history-table, .perf-table, .market-table {
font-size: var(--gn-table);
}
.doc-table th, .pc-table th, .ds-table th,
.history-table th, .perf-table th, .market-table th {
font-size: var(--gn-table-th);
text-transform: none;
letter-spacing: normal;
font-weight: 700;
color: #4A4234;
background: #F1ECE1;
border-bottom: 2px solid #E0D7C4;
}
.doc-table td, .pc-table td, .ds-table td,
.history-table td, .perf-table td, .market-table td {
font-size: var(--gn-table);
border-bottom: 1px solid var(--border, #E7E2D8);
}
/* ── FAQ + related strips ── */
.pc-faq details { border-radius: var(--gn-radius-inner); }
.pc-faq summary { font-size: var(--gn-body); }
.pc-faq .pc-faq-body, .pc-faq .pc-faq-body p { font-size: var(--gn-note); }
.doc-related-title, .pc-related-title { font-size: var(--gn-lead); }
.doc-related-card, .pc-related-card { font-size: var(--gn-note); border-radius: var(--gn-radius-inner); }
.doc-related-card span, .pc-related-card span { font-size: var(--gn-small); }
.doc-updated, .pc-updated { font-size: var(--gn-small); }
/* A prose card is not a control — the hover lift inherited from the
interactive-card rule above made blocks of text jump under the
cursor. Interactive cards keep it. */
.pc-card:hover {
transform: none;
box-shadow:
0 1px 2px rgba(38,34,28,0.04),
0 6px 20px rgba(38,34,28,0.05) !important;
}
@media (max-width: 1024px) {
:root{
--gn-h1: 26px; --gn-h2: 19px; --gn-h3: 16px;
--gn-lead: 15.5px;
--gn-body: 15px;
--gn-card-pad: 18px 16px;
}
/* full width on a phone; the container gutter already insets it */
.pc-section p, .pc-section li { max-width: none; }
}
/* ── Ticker tape (Moneycontrol-style market strip) ─────── */
#ticker-tape {
background: #26221C;
border-bottom: 1px solid rgba(217,160,63,0.25);
overflow: hidden;
white-space: nowrap;
position: relative;
height: 34px;
display: flex;
align-items: center;
}
#ticker-tape::before {
content: 'LIVE MARKETS';
position: relative; z-index: 2;
background: #9C6B24;
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
padding: 0 12px;
display: flex;
align-items: center;
align-self: stretch;
flex-shrink: 0;
}
#ticker-track {
display: inline-flex;
gap: 34px;
padding-left: 20px;
animation: tk-scroll 55s linear infinite;
will-change: transform;
}
#ticker-tape:hover #ticker-track { animation-play-state: paused; }
@keyframes tk-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.tk-item { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12px; }
.tk-label { color: rgba(255,255,255,0.55); font-weight: 700; font-size: 10.5px; letter-spacing: 0.05em; }
.tk-val { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-up { color: #7FC08F; font-size: 11px; font-weight: 700; }
.tk-dn { color: #E08B80; font-size: 11px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
#ticker-track { animation: none; overflow-x: auto; }
}
@media (max-width: 1024px) {
#ticker-tape { height: 32px; }
#ticker-tape::before { padding: 0 10px; font-size: 9px; }
}
/* ============================================================
FOOTER — shared appearance (added Aug 2026)
------------------------------------------------------------
Same failure mode as the hamburger below: crypto, currency,
weather, tools and guides use the .footer-grid / .footer-links
markup, but that CSS only ever existed in each older page's
inline