/* ──────────────────────────────────────────────────────────────────
OunceInsight — main_2 theme
"Modern Fintech" — Cool Slate + Lime + Soft Cream
──────────────────────────────────────────────────────────────────
Designed to be visually distinct from `main` (which is editorial
gold/cinnamon on warm cream). main_2 is geometric, generous, modern:
– Inter for body, Space Grotesk for headings, Cairo for numbers
(also covers Arabic body type on RTL pages — one font family
serves both jobs so the LTR / RTL switch doesn't change the
look of the numeric columns)
– Stone-50 / 100 backgrounds, true white cards
– Cool slate as the structural colour, vibrant lime as the accent
– 10–12px corner radius (vs main's 2px) for a softer, contemporary feel
– Subtle layered shadows for depth
– Tabular numerals everywhere prices appear
────────────────────────────────────────────────────────────────── */
/* Fonts (Cairo / Inter / Space Grotesk) are loaded asynchronously
via in blocks/meta.html. A
blocking @import here would serialize the critical path:
HTML → style.css → fonts.googleapis.com → fonts.gstatic.com (.woff2)
Lighthouse measured 965 ms of render-blocking time for that chain.
Async loading lets the browser fetch them in parallel with style.css
while a system-font fallback paints first. */
:root {
/* ── Brand primary — COOL SLATE (almost-black with cool tint) ── */
--gold-1: #1e293b; /* slate-800 — primary structure */
--gold-2: #0f172a; /* slate-900 — deepest */
--gold-3: #334155; /* slate-700 — hover / emphasis text */
--gold-soft: #f1f5f9; /* slate-100 — soft fill */
/* ── Accent — PURE BLUE (modern fintech / data-driven) ── */
--accent-1: #36508b; /* blue-600 — primary accent */
--accent-2: #2a3e6c; /* blue-700 — hover */
--accent-soft: #dbeafe; /* blue-100 — soft fill */
--accent-tint: #eff6ff; /* blue-50 — barely-there */
/* ── Backgrounds — warm off-white biased ── */
--bg: #fafaf9; /* stone-50 */
--bg-alt: #f5f5f4; /* stone-100 */
--card: #ffffff;
--card-elev: #ffffff;
--surface-deep: #e7e5e4; /* stone-200 — table headers */
/* Legacy ink vars repurposed to stone neutrals. */
--ink: #f5f5f4;
--ink-2: #e7e5e4;
--ink-3: #57534e;
/* ── Borders — thin, cool ── */
--border: #e2e8f0; /* slate-200 */
--border-soft: #f1f5f9; /* slate-100 */
/* ── Text ── */
--text: #0f172a; /* slate-900 */
--text-2: #475569; /* slate-600 */
--text-3: #94a3b8; /* slate-400 */
--muted: #cbd5e1; /* slate-300 */
/* ── Status ── */
--green: #16a34a; /* green-600 */
--red: #c14444; /* muted brick red — less intense than #dc2626 for bearish signals */
--blue: #0891b2; /* cyan-600 — info / tech driver (distinct from blue accent) */
/* ── Accent text colours (Tailwind-700 family) ── */
--text-warm: #2a3e6c; /* blue-700 — brand emphasis */
--text-cool: #0e7490; /* cyan-700 — data labels (distinct from primary blue) */
--text-rose: #be123c; /* rose-700 — editorial */
--text-mint: #15803d; /* green-700 — wealth/success */
--text-lavender: #6d28d9; /* violet-700 */
--text-amber: #b45309; /* amber-700 */
--text-teal: #0f766e; /* teal-700 */
/* ── Tinted surfaces (subtle, used by section / card variants) ── */
--tint-warm: #fff7ed; /* orange-50 */
--tint-cool: #f0f9ff; /* sky-50 */
--tint-rose: #fff1f2; /* rose-50 */
--tint-mint: #f0fdf4; /* green-50 */
--tint-lavender: #f5f3ff; /* violet-50 */
/* ── Status pill fills ── */
--soft-green: #dcfce7;
--soft-red: #fee2e2;
--soft-blue: #dbeafe;
--soft-amber: #fef3c7;
/* ── Shape & shadow tokens (rounder than main) ── */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--r-xl: 20px;
--shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
--shadow-md: 0 4px 12px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
--shadow-lg: 0 12px 32px rgba(15,23,42,0.08), 0 4px 12px rgba(15,23,42,0.04);
--shadow-accent: 0 8px 24px rgba(54,80,139,0.20);
}
/* ──────────────────────────────────────────────────────────────────
BASE
────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--text);
font-size: 15px;
line-height: 1.65;
font-feature-settings: 'ss01', 'cv11';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Typography — Space Grotesk for display, Inter for body,
Cairo for prices/numerics + Arabic body type. */
h1, h2, h3, h4, h5, h6, .display-serif {
font-family: 'Space Grotesk', 'Inter', sans-serif;
letter-spacing: -0.015em;
color: var(--text);
}
h1 { font-weight: 700; font-size: 44px; line-height: 1.1; }
h2 { font-weight: 600; font-size: 30px; line-height: 1.2; }
h3 { font-weight: 600; font-size: 22px; line-height: 1.3; }
h5 { font-weight: 600; font-size: 16px; line-height: 1.4; }
/* Tabular numerics for anything that prices a thing. */
.price, .price-table, .price-table tbody td, .stat-value, .metric-value,
.score-circle .num, .env-value, .hero-stats .stat-value, .panel-value,
.gold-text { font-variant-numeric: tabular-nums; }
a { color: var(--accent-2); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent-1); text-decoration: none; }
.gold-text {
font-family: 'Cairo', sans-serif;
font-weight: 600;
color: var(--accent-2);
letter-spacing: -0.01em;
}
/* ──────────────────────────────────────────────────────────────────
BOOTSTRAP OVERRIDES
────────────────────────────────────────────────────────────────── */
.text-muted { color: var(--text-3) !important; }
.text-dark,
.text-body { color: var(--text) !important; }
.bg-light { background: var(--bg-alt) !important; color: var(--text); }
.bg-white { background: var(--card) !important; }
.border { border-color: var(--border) !important; }
.table { color: var(--text); }
.table th,
.table td { border-color: var(--border); }
.alert-light { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-2); }
.form-control,
.custom-select {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-md);
color: var(--text);
padding: 10px 14px;
font-size: 14px;
box-shadow: var(--shadow-sm);
transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
.custom-select:focus {
border-color: var(--accent-1);
box-shadow: 0 0 0 4px rgba(54,80,139,0.12);
outline: none;
}
.form-control::placeholder { color: var(--text-3); }
.input-group-text { background: var(--bg-alt); border-color: var(--border); color: var(--text-2); }
.modal-content { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.modal-header,
.modal-footer { border-color: var(--border); }
.close { color: var(--text); text-shadow: none; opacity: 0.7; }
.close:hover { color: var(--accent-1); opacity: 1; }
.page-link { background: var(--card); border-color: var(--border); color: var(--text-2); border-radius: var(--r-sm); margin: 0 2px; }
.page-link:hover { background: var(--accent-soft); border-color: var(--accent-1); color: var(--accent-2); }
.page-item.active .page-link { background: var(--accent-1); border-color: var(--accent-1); color: #fff; }
.page-item.disabled .page-link { background: var(--bg-alt); border-color: var(--border); color: var(--muted); }
.progress { background: var(--bg-alt); border-radius: var(--r-md); overflow: hidden; }
.badge-light { background: var(--bg-alt); color: var(--text-2); border-radius: var(--r-sm); padding: 4px 8px; }
.badge-secondary { background: var(--bg-alt); color: var(--text-2); }
.btn-light { background: var(--card); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-md); }
.btn-light:hover { background: var(--bg-alt); border-color: var(--text-3); color: var(--text); }
.btn-outline-secondary { color: var(--text-2); border-color: var(--border); }
.btn-outline-secondary:hover { background: var(--bg-alt); border-color: var(--text-2); color: var(--text); }
.table-warning,
.table-warning > th,
.table-warning > td { background: var(--accent-tint) !important; color: var(--text); }
.custom-control-label { color: var(--text-2); }
/* Always-visible dark scrollbar — wider and consistent regardless of
hover state. No transition on the thumb so it never lightens or
darkens; the visitor sees the same solid color whether the cursor
is over the bar or not. */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb {
background: var(--gold-2); /* slate-900 — dark, always */
border: 3px solid var(--bg-alt); /* inset so the thumb feels padded */
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
/* Same color as default — no hover lighten/darken effect. */
background: var(--gold-2);
}
::-webkit-scrollbar-corner { background: var(--bg-alt); }
/* Firefox equivalent. */
* {
scrollbar-width: auto; /* "auto" ≈ wider, vs "thin" */
scrollbar-color: var(--gold-2) var(--bg-alt);
}
/* ──────────────────────────────────────────────────────────────────
TOP UTILITY BAR
────────────────────────────────────────────────────────────────── */
.utility-bar {
background: var(--gold-2);
color: #cbd5e1;
font-size: 12px;
padding: 8px 0;
letter-spacing: 0.2px;
}
.utility-bar a { color: #cbd5e1; }
.utility-bar a:hover { color: var(--accent-1); }
.utility-bar .ub-divider { color: #475569; margin: 0 10px; }
/* ──────────────────────────────────────────────────────────────────
SELECT2 — site-wide overrides
Matches the .form-control Bootstrap inputs in height, font, border
and focus ring so a Select2 widget sits seamlessly next to a real
. RTL-aware via .select2-container--default[dir="rtl"].
────────────────────────────────────────────────────────────────── */
/* Single-select container — match Bootstrap's `.form-control` height + border */
.select2-container--default .select2-selection--single {
height: calc(1.5em + 0.75rem + 2px); /* same as Bootstrap form-control */
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--card);
transition: border-color .15s ease, box-shadow .15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: calc(1.5em + 0.75rem);
padding: 0 12px;
color: var(--text);
font-size: 14px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: calc(1.5em + 0.75rem);
right: 8px;
}
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
right: auto;
left: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: var(--text-3) transparent transparent transparent;
}
/* Multi-select container — chips inside */
.select2-container--default .select2-selection--multiple {
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--card);
min-height: calc(1.5em + 0.75rem + 2px);
padding: 2px 8px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background: var(--accent-soft);
border: 1px solid rgba(54, 80, 139, 0.22);
color: var(--accent-2);
border-radius: var(--r-sm);
padding: 2px 8px 2px 22px;
font-size: 12px;
font-weight: 600;
margin: 3px 4px 3px 0;
line-height: 1.5;
}
html[dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
padding: 2px 22px 2px 8px;
margin: 3px 0 3px 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: var(--accent-2);
background: transparent;
border: 0;
font-weight: 700;
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%);
padding: 0;
width: 12px;
height: 12px;
}
html[dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
left: auto;
right: 6px;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
font-size: 13px;
color: var(--text);
padding: 0;
margin-top: 6px;
}
/* Focus ring — match the gold-themed inputs already on the site */
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
border-color: var(--accent-1);
box-shadow: 0 0 0 3px rgba(54, 80, 139, 0.18);
outline: none;
}
/* Dropdown panel */
.select2-container--default .select2-dropdown {
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
margin-top: 4px;
overflow: hidden;
background: var(--card);
}
.select2-container--default .select2-results__option {
padding: 9px 14px;
font-size: 13px;
color: var(--text);
border-radius: 0;
transition: background .12s ease;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
background: var(--accent-tint);
color: var(--accent-2);
}
.select2-container--default .select2-results__option[aria-selected=true] {
background: var(--accent-1);
color: #fff;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 6px 10px;
font-size: 13px;
}
/* ──────────────────────────────────────────────────────────────────
UTILITY BAR — language + country pickers
Pill-shaped toggle on the dark bar; light card dropdown on the way
down. Each option is a 3-column row: [ISO chip] [name] [side meta]
────────────────────────────────────────────────────────────────── */
.ub-picker-row { gap: 8px; }
.ub-picker { position: relative; }
/* The clickable pill toggle in the utility bar.
Subtle outlined chip on the dark slate background. */
.ub-picker-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 999px;
color: #e2e8f0 !important;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.2px;
text-decoration: none !important;
transition: background .15s ease, border-color .15s ease, color .15s ease;
white-space: nowrap;
cursor: pointer;
}
.ub-picker-toggle:hover,
.ub-picker-toggle[aria-expanded="true"] {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.22);
color: #fff !important;
}
.ub-picker-toggle > i.fa-language,
.ub-picker-toggle > i.fa-globe {
font-size: 12px;
opacity: 0.85;
}
.ub-picker-toggle .ub-picker-code {
font-family: 'Cairo', sans-serif;
font-weight: 700;
letter-spacing: 0.5px;
font-size: 11px;
}
.ub-picker-toggle .ub-picker-name {
font-weight: 500;
opacity: 0.85;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
}
.ub-picker-toggle .ub-picker-ccy {
font-family: 'Cairo', sans-serif;
font-size: 10px;
font-weight: 600;
opacity: 0.65;
padding-left: 4px;
border-left: 1px solid rgba(255, 255, 255, 0.16);
margin-left: 2px;
}
/* Wallet-total pill — same chip shape as the picker toggles but with a
subtle gold accent so it reads as "your money" at a glance. Emitted
hidden by Smarty (`hidden` attribute); main.js fills in the value via
/web/get_wallet_total.php and removes the hidden attribute. */
.ub-wallet-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: rgba(211, 156, 0, 0.10);
border: 1px solid rgba(211, 156, 0, 0.30);
border-radius: 999px;
color: #f8e7b0 !important;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.2px;
text-decoration: none !important;
transition: background .15s ease, border-color .15s ease, color .15s ease;
white-space: nowrap;
}
.ub-wallet-pill:hover {
background: rgba(211, 156, 0, 0.18);
border-color: rgba(211, 156, 0, 0.50);
color: #fff !important;
}
.ub-wallet-pill > i.fa-wallet {
font-size: 12px;
opacity: 0.95;
color: #fcd975;
}
.ub-wallet-pill .ub-wallet-label {
font-weight: 500;
opacity: 0.85;
}
.ub-wallet-pill .ub-wallet-value {
font-family: 'Cairo', sans-serif;
font-weight: 700;
color: #fff;
letter-spacing: 0.3px;
}
.ub-wallet-pill .ub-wallet-ccy {
font-family: 'Cairo', sans-serif;
font-size: 10px;
font-weight: 600;
opacity: 0.75;
}
html[dir="rtl"] .ub-picker-toggle .ub-picker-ccy {
border-left: none;
border-right: 1px solid rgba(255, 255, 255, 0.16);
padding-left: 0;
padding-right: 4px;
margin-left: 0;
margin-right: 2px;
}
.ub-picker-toggle .ub-picker-caret {
font-size: 9px;
opacity: 0.55;
margin-left: 2px;
}
.ub-picker-toggle:hover .ub-picker-caret {
opacity: 0.9;
}
/* Suppress Bootstrap's default ▾ since we render our own. */
.ub-picker-toggle.dropdown-toggle::after,
.ub-picker-toggle::after { display: none !important; }
/* The dropdown card itself — light surface against the dark utility bar. */
.ub-picker-menu {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22), 0 4px 10px rgba(15, 23, 42, 0.10);
padding: 8px;
min-width: 260px;
max-height: 70vh;
overflow-y: auto;
margin-top: 10px !important;
font-size: 13px;
}
/* Each row inside the dropdown — 3 columns: chip · name · side meta. */
.ub-pick-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 8px;
color: var(--text) !important;
font-weight: 500;
text-decoration: none !important;
transition: background .12s ease, color .12s ease;
position: relative;
}
.ub-pick-item:hover {
background: var(--accent-tint);
color: var(--accent-2) !important;
}
.ub-pick-item.active {
background: var(--accent-1);
color: #fff !important;
}
.ub-pick-item.active:hover {
background: var(--accent-2);
color: #fff !important;
}
/* Leftmost square ISO-code chip — EG / SA / AR / EN. */
.ub-pick-item .ub-iso-chip {
background: var(--bg-alt);
color: var(--text-2);
font-family: 'Cairo', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.6px;
padding: 4px 8px;
border-radius: 5px;
min-width: 36px;
text-align: center;
flex-shrink: 0;
border: 1px solid var(--border);
}
.ub-pick-item.active .ub-iso-chip {
background: rgba(255, 255, 255, 0.22);
color: #fff;
border-color: rgba(255, 255, 255, 0.25);
}
/* Centre column — full localized name. */
.ub-pick-item .ub-item-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
letter-spacing: 0.1px;
}
/* Right column — currency code for country items. */
.ub-pick-item .ub-item-side {
font-family: 'Cairo', sans-serif;
font-size: 11px;
font-weight: 600;
color: var(--text-3);
flex-shrink: 0;
padding: 2px 7px;
background: var(--bg-alt);
border-radius: 4px;
letter-spacing: 0.4px;
}
.ub-pick-item.active .ub-item-side {
background: rgba(255, 255, 255, 0.20);
color: #fff;
}
/* Tiny checkmark on the active row. */
.ub-pick-item .ub-item-check {
font-size: 11px;
opacity: 0.9;
margin-left: 2px;
}
html[dir="rtl"] .ub-pick-item .ub-item-check {
margin-left: 0;
margin-right: 2px;
}
/* Mobile — drop the chevron and the country name on tiny screens to
keep the bar from wrapping awkwardly. */
@media (max-width: 575.98px) {
.ub-picker-toggle { padding: 4px 9px; font-size: 11px; }
.ub-picker-toggle .ub-picker-caret { display: none; }
.ub-picker-menu { min-width: 220px; }
}
/* ──────────────────────────────────────────────────────────────────
BRAND BAR
────────────────────────────────────────────────────────────────── */
.brand-bar {
background: var(--card);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.navbar-brand {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 26px;
letter-spacing: -0.02em;
color: var(--text) !important;
}
.navbar-brand .gold-text {
font-family: 'Space Grotesk', sans-serif;
color: var(--accent-1);
}
.navbar-brand .brand-logo {
display: block;
height: 40px;
width: auto;
flex-shrink: 0;
}
.navbar-brand .brand-text { line-height: 1.05; display: inline-block; }
.mobile-brand .brand-logo { height: 30px; }
.brand-tagline {
font-family: 'Inter', sans-serif;
color: var(--text-3);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
margin-top: 2px;
}
/* ──────────────────────────────────────────────────────────────────
MAIN NAVBAR
────────────────────────────────────────────────────────────────── */
.main-nav {
background: var(--card);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 rgba(15,23,42,0.04);
/* Extra breathing room above and below the navbar row itself, on
top of the per-link vertical padding below. Keeps the brand bar
above and the page content below from crowding the nav. */
padding-top: 8px;
padding-bottom: 8px;
}
.main-nav .navbar-nav .nav-link {
color: var(--text-2);
font-weight: 700;
font-size: 13px;
padding: 18px 14px !important;
letter-spacing: 0;
text-transform: none;
border-bottom: 2px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
.main-nav .navbar-nav .nav-link:hover,
.main-nav .navbar-nav .nav-link.active {
color: var(--accent-1);
border-bottom-color: var(--accent-1);
}
/* Dropdown-menu inner items keep the icon inline to the left of the
label — the dropdown is a vertical list and an icon-above-label
stack would just waste vertical space. */
.main-nav .dropdown-menu .dropdown-item > i {
font-size: 12px;
width: 1.2em;
text-align: center;
color: var(--text-3);
}
/* ─── Desktop nav (≥ 992 px / Bootstrap lg breakpoint): stack the
icon ABOVE the label on each top-level menu item for a more
dashboard-style look. Mobile (below lg) keeps the default
horizontal Bootstrap behaviour — icon next to text — because
the collapsed nav is already a vertical list and stacking
inside each row would make it look fragmented.
The `mr-1` margin baked into the icon markup gets neutralised
here so the column is properly centred. */
@media (min-width: 992px) {
.main-nav .navbar-nav .nav-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
/* Top/bottom: 18 px on the link itself, stacked on top of the
extra 8 px the .main-nav wrapper now adds top and bottom.
Net vertical air around each link ≈ 26 px on each side, up
from 10 px before — gives the icon-above-label stack room
to breathe without the navbar dominating the page. */
padding: 18px 14px !important;
line-height: 1.15;
}
.main-nav .navbar-nav .nav-link > i.fas,
.main-nav .navbar-nav .nav-link > i.far {
font-size: 18px; /* bumped — standalone icons need
more weight to read */
opacity: .85;
margin: 0 !important; /* kill the mr-1 from the markup
so the icon sits dead-centre */
width: auto;
}
/* Bootstrap appends a tiny ▼ caret to .dropdown-toggle via ::after.
In our column layout it would land as a third row below the
label and look glitchy. Hide it — the dropdown still opens on
click + the chevron icon would have to be a separate anyway. */
.main-nav .navbar-nav .nav-link.dropdown-toggle::after {
display: none;
}
.main-nav .navbar-nav .nav-link:hover > i,
.main-nav .navbar-nav .nav-link.active > i {
opacity: 1;
color: var(--accent-1);
}
}
/* Mobile (< 992 px) — icon stays inline with the label. */
@media (max-width: 991.98px) {
.main-nav .navbar-nav .nav-link > i.fas,
.main-nav .navbar-nav .nav-link > i.far {
font-size: 12px;
opacity: .85;
width: 1.1em;
text-align: center;
}
.main-nav .navbar-nav .nav-link:hover > i,
.main-nav .navbar-nav .nav-link.active > i {
opacity: 1;
color: var(--accent-1);
}
}
/* Section-title icons inherit gold colour from the eyebrow so they
read as part of the heading rather than UI chrome. */
.section-title > i.fas,
.section-title > i.far {
/* Brand-blue icon (#36508b) — gives every section header a strong
primary-color anchor while the headline text stays gold. */
color: var(--accent-1);
font-size: 0.82em; /* slightly smaller than the headline */
vertical-align: middle;
margin-bottom: 0.18em;
}
/* Footer column-header icons + per-link icons. The column headers use
the accent colour (matches the brand), the link icons stay muted. */
.site-footer h6 > i.fas,
.site-footer h6 > i.far {
color: var(--gold-1);
font-size: 13px;
}
.site-footer a > i.fas,
.site-footer a > i.far {
font-size: 11px;
opacity: .55;
width: 1.1em;
text-align: center;
transition: opacity .15s ease;
}
.site-footer a:hover > i { opacity: 1; }
.main-nav .dropdown-menu {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
margin-top: 6px;
font-size: 13px;
padding: 6px;
min-width: 220px;
position: absolute; /* explicit — needed for the ::before bridge anchor */
}
/* Hover bridge — invisible strip filling the 6px visual gap between
the nav-link and the dropdown. Without it, the cursor moves through
"dead space" while transitioning trigger → menu, the parent's :hover
state breaks, and the dropdown vanishes before the user can click
any submenu item. The bridge is a pseudo-element of .dropdown-menu
(which is itself a child of .nav-item.dropdown) so hovering it keeps
the parent in :hover and the CSS-only fallback rule below stays
active. ~10px (slightly larger than the 6px margin) gives a small
forgiveness margin for off-axis cursor movement. */
.main-nav .nav-item.dropdown .dropdown-menu::before {
content: '';
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
background: transparent;
}
.main-nav .dropdown-item {
padding: 10px 14px;
font-size: 13px;
color: var(--text-2);
border-radius: var(--r-sm);
transition: background .15s ease, color .15s ease;
}
.main-nav .dropdown-item:hover {
background: var(--accent-soft);
color: var(--accent-2);
padding-left: 14px;
}
@media (min-width: 992px) {
.main-nav .nav-item.dropdown:hover > .dropdown-menu { display: block; }
}
/* ──────────────────────────────────────────────────────────────────
PRICE TICKER
────────────────────────────────────────────────────────────────── */
.price-ticker {
background: var(--gold-1);
color: #f1f5f9;
padding: 12px 0;
overflow: hidden;
position: relative;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ticker-track {
display: flex;
white-space: nowrap;
animation: tickerScroll 60s linear infinite;
}
.ticker-item {
display: inline-flex;
align-items: center;
margin-right: 44px;
font-size: 13px;
letter-spacing: 0.2px;
}
.ticker-item .label { color: #cbd5e1; margin-right: 10px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; }
.ticker-item .price { color: #fbbf24; font-weight: 700; font-family: 'Cairo', sans-serif; }
.ticker-item .change { margin-left: 10px; font-weight: 600; font-size: 12px; font-family: 'Cairo', sans-serif; }
.ticker-item .change.up { color: #86efac; }
.ticker-item .change.down { color: #fca5a5; }
.ticker-item .change.flat { color: #cbd5e1; }
@keyframes tickerScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ──────────────────────────────────────────────────────────────────
HERO
────────────────────────────────────────────────────────────────── */
.hero {
background: var(--bg);
color: var(--text);
padding: 56px 0;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--border);
}
.hero h1 {
font-family: 'Space Grotesk', sans-serif;
font-size: 42px;
font-weight: 700;
margin-bottom: 14px;
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--text);
}
.hero h1 .gold-text {
font-family: 'Space Grotesk', sans-serif;
color: var(--accent-1);
font-style: normal;
}
.hero p.lead {
color: var(--text-2);
font-size: 18px;
max-width: 580px;
font-weight: 400;
line-height: 1.6;
}
.hero-stats {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 20px;
box-shadow: var(--shadow-lg);
}
.hero-stats .stat-label {
color: var(--text-3);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 600;
}
.hero-stats .stat-value {
font-family: 'Cairo', sans-serif;
font-size: 26px;
font-weight: 600;
color: var(--text);
margin: 8px 0 2px;
letter-spacing: -0.01em;
}
.hero-stats .stat-change.up { color: var(--green); font-weight: 600; font-size: 12px; font-family: 'Cairo', sans-serif; }
.hero-stats .stat-change.down { color: var(--red); font-weight: 600; font-size: 12px; font-family: 'Cairo', sans-serif; }
.hero-stats .stat-change.flat { color: var(--text-3); font-weight: 600; font-size: 12px; font-family: 'Cairo', sans-serif; }
/* ─────────────────────────────────────────────────────────────
HERO-STATS V2 — premium karat-tile rack
Replaces the row of bare stat columns with a card-shell + 2×2
tile grid. Karat-graded gold accent strips (24K brightest →
18K most muted) give each tile a distinct identity at a glance.
───────────────────────────────────────────────────────────── */
.hero-stats-v2 {
padding: 0;
overflow: hidden;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 14px 32px rgba(15, 23, 42, 0.08);
}
.hsv2-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
padding: 12px 18px;
background: #fbf7ec;
border-bottom: 1px solid var(--border);
}
.hsv2-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 700;
letter-spacing: 1.3px; text-transform: uppercase;
color: var(--text-2);
min-width: 0;
}
.hsv2-eyebrow i { color: var(--accent-1); font-size: 13px; flex-shrink: 0; }
.hsv2-eyebrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsv2-currency-pill {
display: inline-flex; align-items: center;
padding: 4px 11px;
border-radius: 999px;
background: var(--card);
/* Navy currency pill — currency codes (EGP / SAR / USD) are data
signals, not luxury accents, so they belong in brand blue. */
border: 1px solid rgba(54, 80, 139, 0.35);
color: var(--accent-1);
font-size: 11px; font-weight: 800;
letter-spacing: 1px;
font-family: 'Space Grotesk', sans-serif;
flex-shrink: 0;
}
.hsv2-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--border-soft);
}
.hsv2-tile {
background: var(--card);
padding: 20px 22px 18px;
position: relative;
transition: background .2s ease;
}
.hsv2-tile::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: rgba(212, 169, 58, 0.35);
}
/* Karat-graded accent strips — 24K is the brightest pure gold,
each lower karat steps slightly cooler/dustier to mirror the
physical hue progression of the actual alloy. */
.hsv2-tile-k24::before { background: #fbbf24; }
.hsv2-tile-k22::before { background: #f0c845; }
.hsv2-tile-k21::before { background: #e6b438; }
.hsv2-tile-k18::before { background: #d4a82b; }
.hsv2-tile:hover { background: rgba(212, 169, 58, 0.05); }
.hsv2-tile-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
min-width: 0;
}
.hsv2-karat-badge {
display: inline-flex; align-items: center;
padding: 4px 13px;
border-radius: 999px;
background: rgba(212, 169, 58, 0.22);
border: 1px solid rgba(212, 169, 58, 0.32);
color: #8a6a14;
font-size: 14px; font-weight: 700;
letter-spacing: 0.2px;
font-family: 'Cairo', 'Space Grotesk', sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
max-width: 100%;
}
.hsv2-unit {
font-size: 10px; font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.9px;
color: var(--text-3);
white-space: nowrap;
flex-shrink: 0;
}
.hsv2-price {
font-family: 'Cairo', sans-serif;
font-size: 30px; font-weight: 800;
color: var(--text);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1.1;
margin-bottom: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hsv2-meta {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.hsv2-change {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 11px;
border-radius: 999px;
font-size: 13px; font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
border: 1px solid transparent;
line-height: 1.4;
}
.hsv2-change i { font-size: 10px; }
.hsv2-change-up {
background: rgba(22, 163, 74, 0.10);
color: var(--green);
border-color: rgba(22, 163, 74, 0.25);
}
.hsv2-change-down {
background: rgba(193, 68, 68, 0.10);
color: var(--red);
border-color: rgba(193, 68, 68, 0.25);
}
.hsv2-change-flat {
background: rgba(100, 116, 139, 0.08);
color: var(--text-2);
border-color: rgba(100, 116, 139, 0.22);
}
.hsv2-updated {
display: inline-flex; align-items: center; gap: 4px;
margin-inline-start: auto;
font-size: 12px; font-weight: 500;
color: var(--text-3);
white-space: nowrap;
}
.hsv2-updated i { font-size: 10px; opacity: 0.85; }
.hsv2-empty {
padding: 22px 18px;
text-align: center;
font-size: 13px;
color: var(--text-2);
}
.hsv2-empty i { color: var(--accent-1); margin-inline-end: 4px; }
@media (max-width: 575px) {
.hsv2-price { font-size: 24px; margin-bottom: 9px; }
.hsv2-karat-badge { font-size: 12px; padding: 3px 10px; }
.hsv2-tile { padding: 15px 16px 13px; }
.hsv2-tile-head { margin-bottom: 9px; }
.hsv2-change { font-size: 12px; padding: 2px 9px; }
.hsv2-updated { font-size: 11px; }
}
/* ──────────────────────────────────────────────────────────────────
SECTIONS
────────────────────────────────────────────────────────────────── */
.section { padding: 48px 0; }
.section-alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Tinted-section variants — kept neutral for visual consistency. */
.section-warm,
.section-cool,
.section-rose,
.section-mint,
.section-lavender {
background: var(--bg-alt);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.section-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 28px;
font-weight: 700;
margin-bottom: 6px;
position: relative;
padding-bottom: 12px;
letter-spacing: -0.02em;
line-height: 1.18;
/* Rich saturated gold. */
color: #d39c00;
}
.section-title::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 64px;
height: 3px;
/* Brand bicolor underline — navy → gold gradient ties the two brand
colors together visually under every section heading. */
background: #36508b;
border-radius: 3px;
}
html[dir="rtl"] .section-title::after {
left: auto;
right: 0;
background: #36508b;
}
.section-subtitle {
color: var(--text-2);
margin-bottom: 20px;
font-size: 14px;
font-weight: 400;
line-height: 1.55;
max-width: 680px;
}
/* ──────────────────────────────────────────────────────────────────
CARDS
────────────────────────────────────────────────────────────────── */
.gold-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 20px;
height: 100%;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
color: var(--text);
box-shadow: var(--shadow-sm);
}
.gold-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.gold-card .icon-circle {
width: 52px; height: 52px;
border-radius: var(--r-md);
background: var(--accent-soft);
color: var(--accent-2);
display: flex; align-items: center; justify-content: center;
font-size: 22px;
margin-bottom: 18px;
border: 1px solid rgba(54,80,139,0.20);
}
.gold-card h5 {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 18px;
margin-bottom: 8px;
color: var(--text);
letter-spacing: -0.01em;
}
.gold-card h6 { color: var(--text); }
.gold-card p {
color: var(--text-2);
margin-bottom: 0;
font-size: 14px;
line-height: 1.65;
}
.gold-card small.text-muted { color: var(--text-3) !important; }
/* ──────────────────────────────────────────────────────────────────
PRICE TABLE
────────────────────────────────────────────────────────────────── */
.price-table {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
}
.price-table thead {
/* Soft-gold tinted header, matching the global / local panel
col-heads above the page for visual consistency. Provider
names and column labels at 16px now read at the same weight
as the rest of the home page''s headings. */
background: #fbf7ec;
color: var(--text-2);
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.price-table thead th {
/* Padding 18 22 matches the panel-table cells for a unified
rhythm down the page. */
border: none;
border-bottom: 1px solid var(--border);
padding: 18px 22px;
}
.price-table tbody td {
/* Bumped to 18px body + 20 22 padding so the per-vendor price
cells have proper visual weight. font-feature-settings:'tnum'
keeps the digits monospaced so columns line up cleanly. */
padding: 20px 22px;
vertical-align: middle;
border-top: 1px solid var(--border);
color: var(--text);
font-family: 'Cairo', sans-serif;
font-feature-settings: 'tnum';
font-size: 18px;
}
.price-table tbody tr { transition: background .15s ease; }
.price-table tbody tr:first-child td { border-top: none; }
.price-table tbody tr:hover { background: var(--bg-alt); }
/* Price values in the right-aligned vendor columns — 24px / 700
in brand gold (matches the panel-table headline price colour
above). Cheapest cells have an inline `color: var(--green)`
that wins over this default — green keeps signalling "best
deal in the row" without us blanket-overriding it. The
tabular-num feature on tbody td covers the digit alignment. */
.price-table tbody td.text-right strong {
font-size: 24px;
font-weight: 700;
color: var(--gold-1);
letter-spacing: -0.4px;
}
/* Product column strong (the product name label) stays at body
text weight — it''s a label, not a price. */
.price-table tbody td:first-child strong {
font-size: 18px;
font-weight: 600;
color: var(--text);
}
/* Weight column strong ("10 g", "5 g") — slightly bolder than
body text but not in the gold "this is a price" colour. */
.price-table tbody td:nth-child(2) strong {
font-size: 18px;
font-weight: 700;
color: var(--text);
}
/* Cheapest-badge ("★ cheapest") — bumped 11 → 13 so the badge
isn''t lost under the now-much-bigger green price. */
.price-table .cheapest-badge { font-size: 13px !important; }
/* Vendor "updated at" timestamp in the header — bumped to 12
so it stays readable under the 16px provider name. */
.price-table .vendor-updated-at { font-size: 12px; }
.price-up { color: var(--green); font-weight: 600; }
.price-down { color: var(--red); font-weight: 600; }
.price-flat { color: var(--muted); font-weight: 500; }
/* ── Vendor badges. */
.vendor-logo {
width: 36px; height: 36px;
border-radius: var(--r-md);
background: var(--accent-soft);
color: var(--accent-2);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px;
margin-right: 10px;
letter-spacing: 0.5px;
}
.country-flag {
width: 22px; height: 16px;
display: inline-block;
vertical-align: middle;
margin-right: 6px;
border: 1px solid var(--border);
border-radius: 2px;
background-size: cover;
}
/* ── Badges. */
.badge-gold {
background: var(--accent-1);
color: #fff;
font-weight: 600;
letter-spacing: 0.3px;
border-radius: var(--r-sm);
padding: 4px 10px;
}
/* Now properly gold (was inadvertently blue after the lime→blue swap).
Used by karat badges, TECH/MACRO drivers, news-category chips, FX
currency codes and counts. */
.badge-soft-gold {
background: #fef9e7; /* pale gold tint */
color: #854d0e; /* deep cinnamon-gold text */
font-weight: 600;
border-radius: var(--r-sm);
letter-spacing: 0.2px;
padding: 4px 10px;
border: 1px solid rgba(202,138,4,0.30); /* gold-600 outline */
}
/* Inline gold treatment for bare-text karat values (24K, 21K, etc.)
in places where a full badge would be too heavy — hero stat labels,
wallet rows, ingots/coins small-text. */
.karat-tag {
color: #ca8a04;
font-weight: 700;
letter-spacing: 0.5px;
font-family: 'Cairo', sans-serif;
}
.badge-soft-success { background: var(--soft-green); color: var(--green); border-radius: var(--r-sm); padding: 4px 10px; font-weight: 500; }
.badge-soft-danger { background: var(--soft-red); color: var(--red); border-radius: var(--r-sm); padding: 4px 10px; font-weight: 500; }
.badge-soft-info { background: var(--soft-blue); color: var(--blue); border-radius: var(--r-sm); padding: 4px 10px; font-weight: 500; }
.badge-success-solid { background: var(--green); color: #fff; font-weight: 600; }
.badge-danger-solid { background: var(--red); color: #fff; font-weight: 600; }
.badge-info-solid { background: var(--blue); color: #fff; font-weight: 600; }
/* ──────────────────────────────────────────────────────────────────
CHART HOVER TOOLTIPS — shared by the home 30-day sparkline and
the price-history canvas chart. Floating dark pill positioned
over the chart, anchored at the nearest data point on mousemove.
────────────────────────────────────────────────────────────────── */
.chart-tooltip {
position: absolute;
pointer-events: none;
background: rgba(15, 23, 42, 0.95);
color: #f1f5f9;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
font-family: 'Cairo', sans-serif;
white-space: nowrap;
z-index: 20;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.20);
opacity: 0;
transform: translate(-50%, -130%);
transition: opacity .12s ease;
left: 0;
top: 0;
}
.chart-tooltip.show { opacity: 1; }
.chart-tooltip .tip-date {
color: #cbd5e1;
font-size: 11px;
display: block;
margin-bottom: 2px;
letter-spacing: 0.3px;
}
.chart-tooltip .tip-price {
color: #fbbf24;
font-weight: 700;
font-size: 13px;
}
/* Sparkline-specific bits — wrapper carries the absolute-positioned
tooltip, the SVG `` catches mouse events
so we can hover anywhere over the chart (not just on the line). */
.spark-wrap { position: relative; }
.spark-marker {
fill: #fbbf24;
stroke: #ffffff;
stroke-width: 1.5;
opacity: 0;
transition: opacity .12s ease;
pointer-events: none;
}
.spark-marker.show { opacity: 1; }
.spark-hit {
fill: transparent;
cursor: crosshair;
}
/* ──────────────────────────────────────────────────────────────────
BUTTONS
────────────────────────────────────────────────────────────────── */
.btn {
border-radius: var(--r-md);
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
transition: all .2s ease;
padding: 10px 18px;
}
.btn-gold {
background: var(--accent-1);
border-color: var(--accent-1);
color: #fff;
padding: 12px 24px;
box-shadow: var(--shadow-sm);
}
.btn-gold:hover {
background: var(--accent-2);
border-color: var(--accent-2);
color: #fff;
box-shadow: var(--shadow-accent);
transform: translateY(-1px);
}
.btn-outline-gold {
background: transparent;
border: 1.5px solid var(--accent-1);
color: var(--accent-2);
padding: 11.5px 22.5px;
}
.btn-outline-gold:hover {
background: var(--accent-1);
color: #fff;
border-color: var(--accent-1);
box-shadow: var(--shadow-accent);
}
.btn-outline-light {
background: transparent;
border: 1.5px solid var(--border);
color: var(--text);
padding: 11.5px 22.5px;
}
.btn-outline-light:hover {
background: var(--bg-alt);
border-color: var(--text-3);
color: var(--text);
}
/* ──────────────────────────────────────────────────────────────────
SELECTORS
────────────────────────────────────────────────────────────────── */
.selector-group {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 22px;
margin-bottom: 28px;
box-shadow: var(--shadow-sm);
}
.selector-group label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-3);
font-weight: 600;
margin-bottom: 6px;
}
.selector-group .form-control {
border-radius: var(--r-md);
background: var(--bg-alt);
border-color: var(--border);
color: var(--text);
font-size: 14px;
}
.selector-group .form-control:focus { border-color: var(--accent-1); box-shadow: 0 0 0 4px rgba(54,80,139,0.12); }
select.form-control option { background: var(--card); color: var(--text); }
/* ──────────────────────────────────────────────────────────────────
NEWS
────────────────────────────────────────────────────────────────── */
.news-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
height: 100%;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
box-shadow: var(--shadow-sm);
}
.news-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.news-thumb {
height: 200px;
background: var(--accent-soft);
display: flex; align-items: center; justify-content: center;
color: var(--accent-2);
font-size: 48px;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--border);
}
.news-thumb::after {
content: '';
position: absolute;
inset: 0;
background: transparent;
}
.news-body { padding: 24px; }
.news-meta {
font-size: 10px;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 1.2px;
font-weight: 600;
}
.news-title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 18px;
margin: 10px 0;
line-height: 1.3;
letter-spacing: -0.01em;
}
.news-title a { color: var(--text); }
.news-title a:hover { color: var(--accent-1); }
.news-card[class*="type-"] .news-title a:hover { color: var(--accent-1); }
.news-card[class*="type-"]:hover { border-color: var(--accent-1); }
.news-thumb[class*="type-"] { background: var(--accent-soft); color: var(--accent-2); }
.news-thumb[class*="type-"]::after { background: transparent; }
/* ──────────────────────────────────────────────────────────────────
CALENDAR
────────────────────────────────────────────────────────────────── */
.calendar-table .impact-high { color: var(--red); }
.calendar-table .impact-med { color: #d97706; }
.calendar-table .impact-low { color: var(--muted); }
/* ──────────────────────────────────────────────────────────────────
AUTH
────────────────────────────────────────────────────────────────── */
.auth-wrap { min-height: calc(100vh - 240px); display: flex; align-items: center; }
.auth-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 44px;
box-shadow: var(--shadow-lg);
color: var(--text);
}
.auth-card h5, .auth-card h6 { color: var(--text); }
.auth-card label { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; }
.auth-card .form-control {
border-radius: var(--r-md);
background: var(--card);
border-color: var(--border);
padding: 12px 14px;
font-size: 14px;
}
.auth-card .form-control:focus { background: var(--card); border-color: var(--accent-1); box-shadow: 0 0 0 4px rgba(54,80,139,0.12); }
/* ──────────────────────────────────────────────────────────────────
FOOTER
────────────────────────────────────────────────────────────────── */
.site-footer {
background: var(--gold-2);
color: #94a3b8;
padding: 64px 0 0;
font-size: 14px;
margin-top: 60px;
}
.site-footer h6 {
color: #fff;
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 18px;
font-size: 14px;
}
.site-footer a {
color: #94a3b8;
display: block;
padding: 6px 0;
transition: color .15s ease;
}
.site-footer a:hover { color: var(--accent-1); }
.footer-bottom {
margin-top: 48px;
padding: 22px 0;
border-top: 1px solid rgba(255,255,255,0.08);
font-size: 12px;
color: #64748b;
}
.social-icons a {
display: inline-flex;
width: 38px; height: 38px;
border-radius: var(--r-md);
background: rgba(255,255,255,0.05);
color: #94a3b8;
align-items: center; justify-content: center;
margin-right: 8px;
border: 1px solid rgba(255,255,255,0.08);
transition: all .2s ease;
}
.social-icons a:hover {
background: var(--accent-1);
color: #fff;
border-color: var(--accent-1);
transform: translateY(-2px);
}
/* ──────────────────────────────────────────────────────────────────
TREND ARROWS
────────────────────────────────────────────────────────────────── */
.trend-arrow.up::before { content: '↑'; color: var(--green); margin-right: 4px; font-weight: 700; }
.trend-arrow.down::before { content: '↓'; color: var(--red); margin-right: 4px; font-weight: 700; }
.trend-arrow.flat::before { content: '−'; color: var(--text-3); margin-right: 4px; font-weight: 700; }
.trend-arrow.up { color: var(--green); }
.trend-arrow.down { color: var(--red); }
.trend-arrow.flat { color: var(--text-3); }
/* ──────────────────────────────────────────────────────────────────
CHART + WALLET
────────────────────────────────────────────────────────────────── */
.chart-box {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 28px;
min-height: 400px;
position: relative;
color: var(--text);
box-shadow: var(--shadow-sm);
}
.chart-canvas { width: 100%; height: 320px; }
.cta-band {
background: var(--gold-1);
color: #fff;
border-radius: var(--r-xl);
margin: 0 16px;
padding: 36px 32px;
position: relative;
overflow: hidden;
}
.cta-band h2, .cta-band h3 { color: #fff; }
.cta-band .text-muted { color: #94a3b8 !important; }
.cta-band .form-control {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.20);
color: #fff;
}
.cta-band .form-control::placeholder { color: rgba(255,255,255,0.6); }
.cta-band .form-control:focus {
background: rgba(255,255,255,0.15);
border-color: var(--accent-1);
color: #fff;
}
.wallet-summary {
background: var(--card);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 36px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.wallet-summary .total-value {
font-family: 'Cairo', sans-serif;
color: var(--accent-2);
font-size: 42px;
font-weight: 700;
letter-spacing: -0.02em;
}
/* ──────────────────────────────────────────────────────────────────
MOBILE NAVBAR + RESPONSIVE
────────────────────────────────────────────────────────────────── */
.mobile-brand {
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--text) !important;
}
.mobile-brand:hover { color: var(--text) !important; }
.navbar-toggler {
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 6px 10px;
background: var(--card);
}
.navbar-toggler:focus { outline: none; box-shadow: 0 0 0 3px rgba(54,80,139,0.15); }
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(54,80,139,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px) {
.main-nav .navbar-nav .nav-link {
padding: 14px 16px !important;
border-bottom: 1px solid var(--border);
border-left: 3px solid transparent;
}
.main-nav .navbar-nav .nav-link.active,
.main-nav .navbar-nav .nav-link:hover {
border-bottom-color: var(--border);
border-left-color: var(--accent-1);
background: var(--accent-tint);
color: var(--accent-2);
}
.main-nav .navbar-nav .nav-item.dropdown .dropdown-menu {
border: none;
border-radius: 0;
box-shadow: none;
background: var(--bg-alt);
padding: 0;
margin: 0;
}
.navbar-cta { border-top: 1px solid var(--border); padding: 16px; }
.mobile-only-link {
color: var(--text-2) !important;
font-weight: 500;
padding: 12px 16px !important;
border-bottom: 1px solid var(--border);
}
.mobile-only-link:hover { color: var(--accent-1) !important; background: var(--accent-tint); }
}
@media (max-width: 767px) {
.hero h1 { font-size: 32px; }
.hero { padding: 56px 0; }
.hero-stats { padding: 22px; }
.hero-stats .stat-value { font-size: 22px; }
.section { padding: 48px 0; }
.section-title { font-size: 24px; }
.auth-card { padding: 24px; }
}
@media (max-width: 575.98px) {
.navbar-brand .brand-tagline { display: none; }
.utility-bar .dropdown-toggle { font-size: 11px; }
}
/* ──────────────────────────────────────────────────────────────────
GOLD INSIGHT (full set)
────────────────────────────────────────────────────────────────── */
.insight-hero {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 32px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.insight-hero .direction-badge {
display: inline-block;
padding: 8px 16px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
border-radius: var(--r-md);
}
.insight-hero h1 {
font-family: 'Space Grotesk', sans-serif;
font-size: 36px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 12px 0 6px;
line-height: 1.15;
}
.insight-hero .meta-line {
color: var(--text-2);
font-size: 14px;
line-height: 1.6;
}
.insight-hero .meta-line strong { color: var(--text); }
/* Score bar — bearish red → amber → bullish green.
FORCED `direction: ltr` so the bar reads bearish-left / bullish-right
regardless of the page's writing direction. Without this, RTL pages
(Arabic) flipped the label flexbox so "100 · Bullish" ended up on the
visual LEFT, but the marker's `left:X%` still positioned from the
left edge — making score 80 sit over the "0 · Bearish" label. The
convention in every financial dashboard (TradingView, Bloomberg,
etc.) is bearish-left/bullish-right regardless of language, so we
lock the orientation here. */
.score-bar {
position: relative;
height: 8px;
background: rgba(193,68,68,0.35);
border-radius: 4px;
overflow: visible;
margin-top: 8px;
direction: ltr;
}
.score-bar .marker {
position: absolute;
top: -5px;
width: 4px;
height: 18px;
background: var(--text);
border-radius: 2px;
transform: translateX(-50%);
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.score-bar-label {
font-size: 10px;
color: var(--text-3);
letter-spacing: 1.2px;
text-transform: uppercase;
margin-top: 8px;
display: flex;
justify-content: space-between;
font-weight: 600;
direction: ltr;
}
/* Circular score halo. */
.score-circle {
width: 104px;
height: 104px;
border-radius: 50%;
background: var(--card);
border: 3px solid var(--accent-1);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
margin: 0 auto;
box-shadow: var(--shadow-sm);
}
.score-circle .num {
font-family: 'Cairo', sans-serif;
font-size: 34px; font-weight: 700;
color: var(--accent-2);
line-height: 1;
letter-spacing: -0.02em;
}
.score-circle .lbl {
font-size: 10px;
letter-spacing: 1.2px;
color: var(--text-3);
text-transform: uppercase;
margin-top: 6px;
font-family: 'Inter', sans-serif;
font-weight: 600;
}
/* Metric cards. */
.metric {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 16px 18px;
height: 100%;
transition: border-color .2s ease, transform .2s ease;
}
.metric:hover { border-color: var(--accent-1); transform: translateY(-1px); }
.metric .metric-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-3);
font-weight: 600;
display: block;
margin-bottom: 4px;
}
.metric .metric-value {
font-family: 'Cairo', sans-serif;
font-size: 20px;
font-weight: 600;
color: var(--text);
line-height: 1.2;
letter-spacing: -0.01em;
}
.metric .metric-sub {
font-size: 12px;
color: var(--text-3);
margin-top: 4px;
}
/* Tab styling. */
.insight-tabs.nav-tabs {
border-bottom: 1px solid var(--border);
margin-bottom: 0;
}
.insight-tabs.nav-tabs .nav-link {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--text-2);
padding: 14px 22px;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.3px;
}
.insight-tabs.nav-tabs .nav-link:hover { color: var(--accent-1); }
.insight-tabs.nav-tabs .nav-link.active {
background: transparent;
border-bottom: 2px solid var(--accent-1);
color: var(--accent-2);
}
/* Trade-zone ladder. */
.zone-ladder { list-style: none; padding: 0; margin: 0; }
.zone-ladder li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 18px 12px 24px;
background: var(--card);
border-bottom: 1px solid var(--border-soft);
position: relative;
font-size: 13px;
color: var(--text-2);
}
.zone-ladder li:last-child { border-bottom: none; }
.zone-ladder li::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--border);
}
.zone-ladder li.zone-target { background: rgba(22,163,74,0.04); }
.zone-ladder li.zone-target::before { background: var(--green); }
.zone-ladder li.zone-target strong { color: var(--green); }
.zone-ladder li.zone-resist::before { background: #d97706; }
.zone-ladder li.zone-resist strong { color: #b45309; }
.zone-ladder li.zone-entry { background: var(--accent-tint); }
.zone-ladder li.zone-entry::before { background: var(--accent-1); }
.zone-ladder li.zone-entry strong { color: var(--accent-2); }
.zone-ladder li.zone-spot {
background: rgba(8,145,178,0.06);
border-top: 1px solid rgba(8,145,178,0.22);
border-bottom: 1px solid rgba(8,145,178,0.22);
font-weight: 600;
}
.zone-ladder li.zone-spot::before { background: var(--blue); }
.zone-ladder li.zone-spot strong { color: var(--blue); }
.zone-ladder li.zone-support::before { background: #15803d; }
.zone-ladder li.zone-support strong { color: #15803d; }
.zone-ladder li.zone-stop { background: rgba(193,68,68,0.04); }
.zone-ladder li.zone-stop::before { background: var(--red); }
.zone-ladder li.zone-stop strong { color: var(--red); }
.zone-ladder li strong { color: var(--text); font-family: 'Cairo', sans-serif; }
/* Indicator grid. */
.ind-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
.ind-cell {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px 16px;
}
.ind-cell .ind-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-3);
font-weight: 600;
display: block;
margin-bottom: 4px;
}
.ind-cell .ind-value {
font-family: 'Cairo', sans-serif;
font-size: 17px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
}
.ind-cell .ind-sub {
font-size: 11px;
color: var(--text-3);
margin-top: 2px;
font-family: 'Cairo', sans-serif;
}
/* Insight section heading. */
.insight-section-heading {
font-family: 'Space Grotesk', sans-serif;
font-size: 18px;
font-weight: 600;
color: var(--text);
margin: 32px 0 16px;
position: relative;
padding-bottom: 8px;
letter-spacing: -0.01em;
}
.insight-section-heading::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 32px; height: 2px;
background: var(--accent-1);
border-radius: 2px;
}
.insight-section-heading i { color: var(--accent-1); margin-right: 8px; }
/* Insight sub-section heading — smaller heading inside a section to
group related blocks (e.g. Trend / Momentum / Bollinger inside
"Technical Drill-Down"). Reads as a labelled divider rather than
a top-level heading. */
.insight-subsection-heading {
font-family: 'Space Grotesk', sans-serif;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-2);
margin: 18px 0 10px;
}
/* ──────────────────────────────────────────────────────────────────
TIMEFRAME COLUMNS (simple-insight)
Three side-by-side cards on desktop — Short / Medium / Long.
Each card carries a self-contained mini-insight: header, direction,
score circle, bearish/bullish bar, decision, mini metrics, trade
levels, optional verdict, narrative.
────────────────────────────────────────────────────────────────── */
.tf-columns { margin-top: 4px; }
.tf-column-card {
display: flex;
flex-direction: column;
overflow: hidden;
/* When the user lands via /simple-insight#tf- the browser
scrolls the matching card into view. scroll-margin-top keeps
the card's header from disappearing behind the brand bar /
sticky navbar above. Tuned to roughly match the bar height. */
scroll-margin-top: 96px;
}
.tf-col-header {
padding: 14px 18px;
background: var(--bg-alt);
border-bottom: 1px solid var(--border);
text-align: center;
}
.tf-col-label {
font-family: 'Space Grotesk', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--gold-3);
letter-spacing: -0.01em;
}
.tf-col-horizon {
font-size: 14px;
font-weight: 600;
color: var(--text-2);
margin-top: 2px;
}
.tf-col-body {
padding: 18px;
flex: 1;
}
.tf-col-decision {
text-align: center;
font-size: 15px;
margin: 14px 0 4px;
padding: 10px 12px;
background: var(--accent-tint);
border-radius: var(--r-sm);
}
/* Mini Risk / Confidence row inside each TF column. R-R cell was
removed when we dropped trade-plan rendering — grid is now 2 cols
(was 3, which left a phantom empty cell on the right). */
.tf-col-mini-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--r-sm);
margin: 14px 0;
overflow: hidden;
}
.tf-col-metric {
background: var(--card);
padding: 10px 6px;
text-align: center;
}
.tf-col-metric-label {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-3);
line-height: 1.2;
}
.tf-col-metric-value {
font-family: 'Cairo', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--text);
margin-top: 4px;
line-height: 1.2;
}
/* Stacked trade-level rows (Target / Spot / Stop) — compact enough
to fit the narrow column width. */
.tf-col-levels {
margin-top: 14px;
}
.tf-col-level {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-radius: var(--r-sm);
margin-bottom: 6px;
font-size: 13px;
}
.tf-col-level i {
font-size: 11px;
margin-right: 6px;
}
.tf-col-level-label {
font-weight: 600;
color: var(--text-2);
}
.tf-col-level-value {
font-family: 'Cairo', sans-serif;
font-weight: 700;
font-size: 15px;
text-align: right;
line-height: 1.2;
}
/* Small % delta from spot — sits beneath the level price so the user
can see at a glance whether Target / Stop is above or below spot.
Resolves the "why is the target below the spot?" confusion: a
bearish signal's target naturally sits below spot. */
.tf-col-level-delta {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2px;
margin-top: 2px;
opacity: 0.75;
}
.tf-col-level-delta i { font-size: 9px; margin-right: 2px; }
.tf-col-level-target {
background: rgba(22, 163, 74, 0.08);
border-left: 3px solid var(--green);
}
.tf-col-level-target .tf-col-level-label,
.tf-col-level-target .tf-col-level-value,
.tf-col-level-target i { color: var(--green); }
.tf-col-level-spot {
background: rgba(54, 80, 139, 0.06);
border-left: 3px solid var(--accent-1);
}
.tf-col-level-spot .tf-col-level-label,
.tf-col-level-spot .tf-col-level-value,
.tf-col-level-spot i { color: var(--accent-1); }
.tf-col-level-stop {
background: rgba(193, 68, 68, 0.08);
border-left: 3px solid var(--red);
}
.tf-col-level-stop .tf-col-level-label,
.tf-col-level-stop .tf-col-level-value,
.tf-col-level-stop i { color: var(--red); }
/* RTL: flip the accent border to the right side. */
html[dir="rtl"] .tf-col-level-target,
html[dir="rtl"] .tf-col-level-spot,
html[dir="rtl"] .tf-col-level-stop {
border-left: none;
border-right-width: 3px;
border-right-style: solid;
}
html[dir="rtl"] .tf-col-level-target { border-right-color: var(--green); }
html[dir="rtl"] .tf-col-level-spot { border-right-color: var(--accent-1); }
html[dir="rtl"] .tf-col-level-stop { border-right-color: var(--red); }
.tf-col-narrative {
margin-top: 16px;
padding: 12px 14px;
background: var(--bg-alt);
border-radius: var(--r-sm);
font-size: 13px;
line-height: 1.6;
color: var(--text);
}
/* Narrative variant when it sits AT THE TOP of the card (right after
the badge + signal label, before the score circle) — used so the
human-readable explanation precedes the raw numbers. Slightly
tighter top margin since the badge sits right above it. */
.tf-col-narrative.tf-col-narrative-top {
margin-top: 10px;
margin-bottom: 14px;
font-size: 13px;
line-height: 1.55;
text-align: start;
}
/* Plain-language signal label under the direction badge — the
AI5 engine's `signal_label` (e.g. "ميل صعودي معتدل"). Centered
under the badge with subtle weight so it reads as the human
translation of the technical label above. */
.tf-col-signal-label {
text-align: center;
font-size: 13px;
color: var(--text-muted);
margin-bottom: 8px;
font-weight: 500;
letter-spacing: 0.2px;
}
/* Score circle tinted by direction. The base .score-circle keeps
its gold border; these overrides apply when the direction class
is also on the element. Subtle tint — the dominant cue stays the
badge, the circle just reinforces it for at-a-glance scanning. */
.score-circle.score-circle-dir-bullish-strong { border-color: var(--green, #16a34a); }
.score-circle.score-circle-dir-bullish-strong .num { color: var(--green, #16a34a); }
.score-circle.score-circle-dir-bullish { border-color: #4ade80; }
.score-circle.score-circle-dir-bullish .num { color: #16a34a; }
.score-circle.score-circle-dir-neutral { border-color: var(--text-muted, #9ca3af); }
.score-circle.score-circle-dir-bearish { border-color: #fb7185; }
.score-circle.score-circle-dir-bearish .num { color: #c14444; }
.score-circle.score-circle-dir-bearish-strong { border-color: var(--red, #c14444); }
.score-circle.score-circle-dir-bearish-strong .num { color: var(--red, #c14444); }
/* ──────────────────────────────────────────────────────────────────
Reasons — compact driver list under the narrative
Renders the top 3 key_drivers from AI5 with a small badge per
row (TECH / MACRO) and the engine's Arabic phrasing. Sits
between the narrative paragraph and the score circle so the
reader sees WHAT → WHY → numbers in that order.
────────────────────────────────────────────────────────────── */
.tf-col-reasons {
margin-top: 14px;
margin-bottom: 14px;
padding: 10px 12px;
background: var(--bg-alt);
border-inline-start: 3px solid var(--accent-1, #d4a93a);
border-radius: var(--r-sm);
}
.tf-col-reasons-head {
font-size: 12px;
color: var(--accent-1, #d4a93a);
letter-spacing: 0.3px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 6px;
}
.tf-col-reasons-head i { margin-inline-end: 4px; }
.tf-col-reasons-list {
list-style: none;
margin: 0;
padding: 0;
}
.tf-col-reason {
display: flex;
align-items: baseline;
gap: 6px;
padding: 4px 0;
font-size: 13px;
line-height: 1.5;
color: var(--text);
border-top: 1px dashed rgba(148, 163, 184, 0.18);
}
.tf-col-reason:first-child { border-top: none; }
.tf-col-reason-tag {
flex-shrink: 0;
font-size: 9px;
letter-spacing: 0.5px;
padding: 2px 6px;
border-radius: 3px;
background: rgba(212, 169, 58, 0.15);
color: var(--accent-1, #d4a93a);
font-weight: 700;
text-transform: uppercase;
}
.tf-col-reason-technical .tf-col-reason-tag {
background: rgba(13, 110, 253, 0.12);
color: #0d6efd;
}
.tf-col-reason-macro .tf-col-reason-tag {
background: rgba(212, 169, 58, 0.15);
color: var(--accent-1, #d4a93a);
}
.tf-col-reason-text { flex: 1; }
.tf-col-reason-note { color: var(--text-muted); font-weight: normal; }
/* ──────────────────────────────────────────────────────────────────
TODAY'S ANALYSIS BANNER (home page)
A single horizontal callout that promotes the short-term (swing)
AI5 signal to the top of the page: direction · decision · spot,
plus a narrative paragraph and a "View Full Insight" CTA.
────────────────────────────────────────────────────────────────── */
.today-analysis-banner {
background: var(--card);
border: 1px solid var(--border);
overflow: hidden;
}
.today-analysis-head {
padding: 20px 24px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
}
.today-analysis-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 24px;
font-weight: 700;
color: #a07a37;
margin: 0;
letter-spacing: -0.01em;
}
.today-analysis-subtitle {
font-size: 13px;
color: var(--text-2);
margin: 4px 0 0;
max-width: 560px;
line-height: 1.5;
}
.today-analysis-cta {
flex-shrink: 0;
white-space: nowrap;
}
.today-analysis-body {
padding: 6px 0 24px;
}
.today-analysis-cell {
padding: 22px 24px;
border-right: 1px solid var(--border);
text-align: left;
}
.today-analysis-cell-last { border-right: none; }
html[dir="rtl"] .today-analysis-cell {
border-right: none;
border-left: 1px solid var(--border);
}
html[dir="rtl"] .today-analysis-cell-last { border-left: none; }
@media (max-width: 767.98px) {
.today-analysis-cell, html[dir="rtl"] .today-analysis-cell {
border-right: none;
border-left: none;
border-bottom: 1px solid var(--border);
text-align: center;
}
.today-analysis-cell-last { border-bottom: none; }
}
.today-analysis-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 700;
color: var(--text-3);
}
.today-analysis-bignum {
font-family: 'Cairo', sans-serif;
font-size: 28px;
font-weight: 700;
color: var(--text);
line-height: 1;
}
.today-analysis-bignum-suffix {
font-size: 14px;
color: var(--text-3);
font-weight: 600;
}
.today-analysis-decision {
font-family: 'Space Grotesk', sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--gold-3);
line-height: 1.2;
}
.today-analysis-narrative {
margin: 0 24px;
padding: 14px 18px;
background: var(--bg-alt);
border-radius: var(--r-sm);
font-size: 14px;
line-height: 1.7;
color: var(--text);
border-left: 3px solid #a07a37;
}
.today-analysis-narrative i.fa-quote-left {
color: #a07a37;
margin-right: 8px;
opacity: 0.6;
}
html[dir="rtl"] .today-analysis-narrative {
border-left: none;
border-right: 3px solid #a07a37;
}
html[dir="rtl"] .today-analysis-narrative i.fa-quote-left {
margin-right: 0;
margin-left: 8px;
}
/* Per-provider "last updated" stamp under each column header in the
home Vendor Prices matrix. Renders below the provider name as a
small muted timestamp — hovering reveals the full ISO string via
the title attribute. */
.vendor-updated-at {
display: block;
/* Bumped from 10 → 12 so the "May 14 · 9:05 AM" line under each
vendor header is actually readable, especially after the column
title size bump above. text-transform:uppercase on the parent
thead is intentionally NOT inherited here (text-transform doesn't
cascade through inline children that re-declare it; we leave it
unset so the original case from PHP is preserved). */
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
color: var(--text-3);
margin-top: 3px;
font-family: 'Cairo', sans-serif;
white-space: nowrap;
text-transform: none;
}
.vendor-updated-at i {
font-size: 11px;
margin-right: 3px;
color: var(--accent-1);
}
html[dir="rtl"] .vendor-updated-at i {
margin-right: 0;
margin-left: 3px;
}
/* "★ cheapest" badge below the lowest vendor price in each row —
now in a distinct green so the cheapest cell pops against the
dark gold price text. */
.cheapest-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--green);
margin-top: 2px;
}
/* ──────────────────────────────────────────────────────────────────
TODAY'S ANALYSIS — two side-by-side columns on the home page
(Global / Local), instead of the tabbed single-column view used
on simple-insight. Each column is its own card with a labelled
header strip and the same panel-table inside.
────────────────────────────────────────────────────────────────── */
.today-panel-col { display: flex; flex-direction: column; }
.today-panel-col-head {
/* Padding bumped to 18 22 so the heading strip has more breathing
room around the larger glyph + label. */
padding: 18px 22px;
background: #fbf7ec; /* soft gold tint instead of plain stone — matches
the headline price colour below for visual unity */
border-bottom: 1px solid var(--border);
font-family: 'Space Grotesk', sans-serif;
/* Bumped from 20 → 24 so the "Global" / "Local" column heading
anchors the panel — it is the first thing the eye lands on. */
font-size: 24px;
letter-spacing: 0.3px;
display: flex;
align-items: center;
}
.today-panel-col-head i { color: var(--gold-1); font-size: 26px; }
.today-panel-col-head strong { color: var(--gold-1); font-weight: 700; }
/* Subtitle (USD/OUNCE, EGP/GRAM). 16px keeps it clearly smaller
than the 24px label but still comfortable to read alongside it. */
.today-panel-col-head small { font-size: 16px; font-weight: 500; color: var(--text-2); }
.today-panel-col .panel-table { flex: 1; }
/* Inline warning shown when the badge direction (fused tech + macro)
disagrees with the zone orientation (technical only). Without this
note, users see e.g. "Bearish" badge + bullish-shaped zones (target
above spot, stop below) and assume the engine is broken. */
.tf-col-mismatch {
margin-top: 14px;
padding: 10px 12px;
background: rgba(202, 138, 4, 0.08);
border-left: 3px solid #ca8a04;
border-radius: var(--r-sm);
font-size: 12px;
line-height: 1.5;
color: #854d0e;
}
.tf-col-mismatch i { margin-right: 6px; color: #ca8a04; }
html[dir="rtl"] .tf-col-mismatch {
border-left: none;
border-right: 3px solid #ca8a04;
}
/* Pill list. */
.pill-list { list-style: none; padding: 0; margin: 0; }
.pill-list li {
background: var(--card);
border: 1px solid var(--border);
border-left: 4px solid var(--accent-1);
border-radius: var(--r-md);
padding: 12px 16px;
margin-bottom: 8px;
font-size: 13px;
color: var(--text-2);
}
.pill-list li.driver-tech {
border-left-color: var(--blue);
background: rgba(8,145,178,0.05);
}
.pill-list li.driver-tech .badge { background: rgba(8,145,178,0.14); color: var(--blue); border: 1px solid rgba(8,145,178,0.28); }
.pill-list li.driver-macro {
border-left-color: var(--accent-1);
background: rgba(54,80,139,0.04);
}
.pill-list li.driver-macro .badge { background: var(--accent-soft); color: var(--accent-2); border: 1px solid rgba(54,80,139,0.30); }
.pill-list li strong { color: var(--text); }
/* Confidence bar. */
.conf-bar {
height: 6px;
background: var(--bg-alt);
border-radius: 3px;
overflow: hidden;
margin-top: 6px;
}
.conf-bar > span {
display: block;
height: 100%;
background: var(--accent-1);
}
.conf-bar.conf-low > span { background: #c14444; }
.conf-bar.conf-medium > span { background: #f59e0b; }
.conf-bar.conf-high > span { background: var(--accent-1); }
/* Macro environment cards. */
.env-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 20px;
position: relative;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
box-shadow: var(--shadow-sm);
}
.env-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.env-card .env-icon {
width: 36px; height: 36px;
border-radius: var(--r-sm);
background: var(--accent-soft);
border: 1px solid rgba(54,80,139,0.25);
color: var(--accent-2);
display: inline-flex;
align-items: center; justify-content: center;
font-size: 16px;
margin-bottom: 10px;
}
.env-card .env-name {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-3);
font-weight: 600;
}
.env-card .env-value {
font-family: 'Cairo', sans-serif;
font-size: 30px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.02em;
margin: 8px 0;
}
.env-card .env-meta { font-size: 12px; color: var(--text-2); }
.env-card .env-meta strong { color: var(--text); }
/* ──────────────────────────────────────────────────────────────────
INFO TOOLTIP
────────────────────────────────────────────────────────────────── */
.info-tip {
display: inline-block;
margin-left: 5px;
color: var(--accent-1);
opacity: 0.5;
font-size: 0.78em;
cursor: help;
vertical-align: middle;
transition: opacity .15s, color .15s, transform .15s;
}
.info-tip:hover, .info-tip:focus { opacity: 1; color: var(--accent-2); transform: translateY(-1px); }
html[dir="rtl"] .info-tip { margin-left: 0; margin-right: 5px; }
.tooltip-inner {
max-width: 280px;
padding: 10px 14px;
background-color: var(--gold-2);
color: #f1f5f9;
font-size: 13px;
line-height: 1.5;
border-radius: var(--r-md);
text-align: left;
box-shadow: var(--shadow-lg);
}
html[dir="rtl"] .tooltip-inner { text-align: right; }
.tooltip { font-family: inherit; }
.tooltip.bs-tooltip-top .arrow::before { border-top-color: var(--gold-2); }
.tooltip.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--gold-2); }
.tooltip.bs-tooltip-left .arrow::before { border-left-color: var(--gold-2); }
.tooltip.bs-tooltip-right .arrow::before { border-right-color: var(--gold-2); }
/* ──────────────────────────────────────────────────────────────────
TODAY'S NUMBERS PANEL TABLE
────────────────────────────────────────────────────────────────── */
.panel-table { margin-bottom: 0; }
.panel-table tbody tr { border-bottom: 1px solid var(--border-soft); }
.panel-table tbody tr:last-child { border-bottom: none; }
.panel-table tbody tr:nth-child(even) { background: var(--bg-alt); }
.panel-table tbody tr.panel-group {
background: var(--accent-soft) !important;
}
.panel-table tbody tr.panel-group td {
/* Section divider strip — uppercase mini-header at 13px with
a warm-gold tinted background instead of cool-blue. Matches
the heading strip''s soft-gold theme above and de-emphasises
itself from the price values below (which are the actual
focus of the row). */
padding: 14px 22px;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gold-2, #946d00);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: #fbf4dd !important; /* soft-gold tint (matches the col-head) */
}
.panel-table tbody tr.panel-group:first-child td { border-top: none; }
.panel-table .panel-label {
/* Bumped 15 → 17. var(--text) (full-strength dark text) instead
of var(--text-2) (muted slate) because at 17px the muted
colour started reading as "disabled" rather than "supporting".
Now the label commands attention proportional to the value
it labels. */
padding: 18px 22px;
color: var(--text);
font-weight: 500;
font-size: 17px;
width: 45%;
border: none;
vertical-align: middle;
}
.panel-table .panel-value {
/* Bumped 17 → 20 for the body sub-row values (Today Open,
Today High, Weekly Change, etc.). The headline price rows
get a further upsize via the .panel-value strong rule
below. */
padding: 18px 22px;
color: var(--text);
font-family: 'Cairo', sans-serif;
text-align: right;
border: none;
vertical-align: middle;
font-size: 20px;
}
/* Headline price — now 28px in the brand gold colour
(var(--gold-1)). The `!important` overrides the inline
`style="color:var(--accent-1)"` on the two headline rows in
home.html so they shift from cool-blue to warm-gold —
on-brand for a gold-pricing site and visually unifies the
row with the col-head strip''s gold accent above. Tabular-
nums + tight tracking keeps the big digits visually tidy. */
.panel-table .panel-value strong {
font-weight: 700;
font-size: 28px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.5px;
color: var(--gold-1) !important;
}
/* Unit suffix ("USD/OUNCE", "EGP/GRAM") — 14px so it sits as
a clear, comfortable caption beside the much-bigger price
number, not an afterthought. */
.panel-table .panel-value small { font-size: 14px; }
/* Trend-arrow chip (the +0.42% delta beside the price) — 14px
so the right side of the row stays visually balanced now that
the price number is much heavier. */
.panel-table .panel-value .trend-arrow { font-size: 14px !important; font-weight: 700; }
html[dir="rtl"] .panel-table .panel-value { text-align: left; }
html[dir="rtl"] .panel-table .panel-label { text-align: right; }
/* Inline panel tabs (Global / Local). */
.panel-tabs.nav-tabs { border-bottom: none; margin-bottom: 0; flex-wrap: nowrap; }
.panel-tabs.nav-tabs .nav-link {
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-sm);
color: var(--text-2);
padding: 5px 14px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
margin-left: 4px;
transition: all .15s ease;
}
.panel-tabs.nav-tabs .nav-link:hover {
color: var(--accent-1);
border-color: var(--border);
background: var(--card);
}
.panel-tabs.nav-tabs .nav-link.active {
background: var(--accent-1);
border-color: var(--accent-1);
color: #fff;
}
html[dir="rtl"] .panel-tabs.nav-tabs .nav-link { margin-left: 0; margin-right: 4px; }
/* ──────────────────────────────────────────────────────────────────
DATE PICKER BAR
────────────────────────────────────────────────────────────────── */
.date-picker-bar {
background: var(--card);
border: 1px solid var(--border);
border-left: 4px solid var(--accent-1);
border-radius: var(--r-md);
padding: 14px 18px;
box-shadow: var(--shadow-sm);
}
.date-picker-bar .form-control[type="date"] {
font-family: 'Cairo', sans-serif;
letter-spacing: 0.3px;
}
.date-picker-bar .form-control[type="date"]:focus {
border-color: var(--accent-1);
box-shadow: 0 0 0 4px rgba(54,80,139,0.12);
}
/* ──────────────────────────────────────────────────────────────────
TIMEFRAME CHIP SELECTOR
────────────────────────────────────────────────────────────────── */
.tf-selector {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 14px 18px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
}
.tf-selector-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-3);
margin-right: 6px;
}
.tf-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2px;
background: var(--bg-alt);
border: 1px solid var(--border);
color: var(--text-2);
border-radius: var(--r-md);
text-decoration: none;
transition: all .15s ease;
}
.tf-chip:hover {
text-decoration: none;
border-color: var(--accent-1);
color: var(--accent-1);
background: var(--card);
}
.tf-chip.active {
background: var(--accent-1);
border-color: var(--accent-1);
color: #fff;
box-shadow: var(--shadow-accent);
}
.tf-chip.active:hover { color: #fff; }
.tf-chip-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}
.tf-chip.active .tf-chip-dot { box-shadow: 0 0 0 1px rgba(255,255,255,0.6); }
/* ──────────────────────────────────────────────────────────────────
VERDICT CARD (historical as-of accuracy)
────────────────────────────────────────────────────────────────── */
.verdict-card {
padding: 14px 18px;
border-radius: var(--r-md);
border-left: 4px solid;
font-size: 13px;
line-height: 1.6;
box-shadow: var(--shadow-sm);
}
.verdict-card .price-up { color: var(--green); }
.verdict-card .price-down { color: var(--red); }
.verdict-card .price-flat { color: var(--text-3); }
.verdict-correct {
background: var(--soft-green);
border-left-color: var(--green);
color: var(--text);
}
.verdict-correct strong:first-of-type { color: var(--green); }
.verdict-incorrect {
background: var(--soft-red);
border-left-color: var(--red);
color: var(--text);
}
.verdict-incorrect strong:first-of-type { color: var(--red); }
.verdict-pending {
background: var(--accent-soft);
border-left-color: var(--accent-1);
color: var(--text);
}
.verdict-pending strong:first-of-type { color: var(--accent-2); }
/* Hit chips (T1 / T2 / Stop). */
.verdict-hits {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 12px;
}
.hit-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: var(--r-md);
border: 1px solid var(--border);
background: var(--card);
font-family: 'Cairo', sans-serif;
}
.hit-chip i { font-size: 11px; }
.hit-chip.hit-yes { background: var(--soft-green); border-color: rgba(22,163,74,0.30); color: var(--green); }
.hit-chip.hit-yes i { color: var(--green); }
.hit-chip.hit-stop { background: var(--soft-red); border-color: rgba(193,68,68,0.30); color: var(--red); }
.hit-chip.hit-stop i { color: var(--red); }
.hit-chip.hit-no { color: var(--text-3); }
.hit-chip.hit-no i { color: var(--muted); }
/* ──────────────────────────────────────────────────────────────────
UTILITY TEXT CLASSES
────────────────────────────────────────────────────────────────── */
.text-warm { color: var(--text-warm); }
.text-cool { color: var(--text-cool); }
.text-rose { color: var(--text-rose); }
.text-mint { color: var(--text-mint); }
.text-lavender { color: var(--text-lavender); }
.text-amber { color: var(--text-amber); }
.text-teal { color: var(--text-teal); }
.text-success { color: var(--green); }
.text-danger { color: var(--red); }
.text-info { color: var(--blue); }
/* ──────────────────────────────────────────────────────────────────
Wider site shell — closer to investing.com's layout.
Bootstrap 4's stock .container caps at 1140 px on the xl
breakpoint (≥1200 px). On modern 1440 px / 1920 px monitors that
leaves a wide unused side gutter and makes the price tables
feel cramped. We bump the cap to 1320 px at xl and to 1440 px at
a new "xxl" step (≥1400 px) — same widths investing.com uses for
its main content zone.
Targets every container alias Bootstrap ships so .container-sm,
.container-md, etc. follow along, and the brand-bar / nav /
footer (all use plain .container) inherit the wider track too.
Mobile + tablet breakpoints (sm / md / lg) are intentionally
untouched — those caps are already correct for their screen
sizes; only the desktop tier needed the room.
────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
max-width: 1320px;
}
}
@media (min-width: 1400px) {
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
max-width: 1440px;
}
}
/* Main nav — spread items across the full container width.
The markup uses ``, which centres
the menu with auto-margins on either side. That centring leaves
wide empty gutters once the container is widened, so on desktop
we (a) let the collapsed-nav wrapper grow to fill the container,
(b) cancel the auto-margins, (c) distribute items with
`space-between` so the first and last items align with the left
and right edges of the container.
Below the lg breakpoint the menu collapses into the hamburger
drawer, which stays vertical — the override is desktop-only. */
@media (min-width: 992px) {
.main-nav .navbar-collapse { flex-grow: 1; }
.main-nav .navbar-nav.mx-auto {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100%;
justify-content: space-between;
}
}
/* Live-commodities — clickable rows + cards link to /commodity-history.
Row: the actual wraps only the first two cells (name + symbol),
the cursor + hover tint make the whole row read as one target.
Card: the wraps the entire card so any click navigates. Small
lift on hover signals interactivity. */
tr.comm-row-clickable { cursor: pointer; }
tr.comm-row-clickable:hover { background: var(--bg-alt); }
.comm-card-link {
transition: transform .15s ease, box-shadow .15s ease;
cursor: pointer;
}
.comm-card-link:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--gold-3);
text-decoration: none !important;
}
/* ──────────────────────────────────────────────────────────────────
Breadcrumb (blocks/breadcrumbs.html)
────────────────────────────────────────────────────────────────── */
.dahab-breadcrumb {
background: var(--bg-alt);
border-bottom: 1px solid var(--border);
padding: 10px 0;
font-size: 13px;
}
.dahab-breadcrumb ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.dahab-breadcrumb li {
display: inline-flex;
align-items: center;
color: var(--text-3);
}
.dahab-breadcrumb a {
color: var(--text-2);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color .15s ease;
}
.dahab-breadcrumb a:hover { color: var(--accent-1); }
.dahab-breadcrumb li[aria-current="page"] {
color: var(--text);
font-weight: 600;
}
.dahab-breadcrumb-sep {
font-size: 9px;
margin: 0 10px;
color: var(--text-3);
opacity: 0.6;
}
html[dir="rtl"] .dahab-breadcrumb-sep { transform: scaleX(-1); }
/* ════════════════════════════════════════════════════════════════════
SIMPLE-INSIGHT & HOME — DESIGN POLISH PASS
═══════════════════════════════════════════════════════════════════
Lifts the timeframe cards and Today panels with consistent
elevation + a thin gold accent strip on the top edge, tightens
typography, and gives the score visualization the prominence it
deserves. All overrides — does not modify the semantic rules
above (so reverting is a single block-delete).
──────────────────────────────────────────────────────────────── */
/* ── Section headings — bigger, more breathing room ──────────── */
.insight-section-heading {
font-size: 22px;
font-weight: 700;
margin: 48px 0 22px;
padding-bottom: 12px;
}
.insight-section-heading::after {
width: 56px;
height: 3px;
background: var(--accent-1);
border-radius: 2px;
}
.insight-section-heading i {
font-size: 0.85em;
opacity: 0.9;
}
/* ════════════════════════════════════════════════════════════════════
TIMEFRAME OUTLOOK CARDS — fully redesigned for readability
═══════════════════════════════════════════════════════════════════
Sections in vertical flow: HEADER | HERO (direction + score + bar)
| REASONS list | NARRATIVE prose | METRICS row | CTA.
The whole card themes from .tf-tone-bullish/bearish/neutral — top
strip, header tint, score-bar fill all swap colors per tone.
──────────────────────────────────────────────────────────────── */
/* Direction-tone palette tokens — read by the styled sub-elements */
.tf-tone-bullish { --tftone: var(--green); --tftone-soft: rgba(22, 163, 74, 0.07); --tftone-edge: rgba(22, 163, 74, 0.20); }
.tf-tone-bearish { --tftone: var(--red); --tftone-soft: rgba(193, 68, 68, 0.07); --tftone-edge: rgba(193, 68, 68, 0.20); }
.tf-tone-neutral { --tftone: #94a3b8; --tftone-soft: rgba(148, 163, 184, 0.08); --tftone-edge: rgba(148, 163, 184, 0.22); }
.tf-column-card {
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 4px 16px rgba(15, 23, 42, 0.05);
transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
position: relative;
overflow: hidden;
}
/* Top accent strip swaps per tone — instant visual signal */
.tf-column-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--tftone);
z-index: 2;
}
.tf-column-card:hover {
box-shadow:
0 4px 10px rgba(15, 23, 42, 0.06),
0 18px 42px rgba(15, 23, 42, 0.10);
transform: translateY(-3px);
border-color: var(--tftone-edge);
}
/* ── Header band — tone-dot + horizon pill row, then big title ── */
.tf-col-header {
padding: 16px 22px 18px;
background: var(--tftone-soft);
border-bottom: 1px solid var(--tftone-edge);
text-align: start;
position: relative;
}
.tf-col-header-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.tf-col-tone-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--tftone);
box-shadow: 0 0 0 3px var(--tftone-soft), 0 0 0 4px var(--tftone-edge);
flex-shrink: 0;
}
.tf-col-label {
font-size: 22px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.02em;
font-family: 'Cairo', 'Space Grotesk', sans-serif;
line-height: 1.2;
margin: 0;
}
.tf-col-horizon-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 11px;
border-radius: 999px;
background: var(--card);
border: 1px solid var(--tftone-edge);
color: var(--tftone);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3px;
line-height: 1.4;
flex-shrink: 0;
font-family: 'Cairo', 'Space Grotesk', sans-serif;
}
.tf-col-horizon-pill i { font-size: 9px; opacity: 0.85; }
/* Legacy class — old horizon label, hidden in case it ever renders */
.tf-col-horizon { display: none; }
.tf-col-body { padding: 24px 22px 18px; }
/* ── HERO region — scoreboard row + signal caption + position bar ── */
.tf-col-hero {
padding-bottom: 22px;
margin-bottom: 22px;
border-bottom: 1px solid var(--border-soft);
}
/* Scoreboard row — badge on the start side, big score on the end side */
.tf-col-hero-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.tf-col-body .direction-badge {
font-size: 14px !important;
padding: 10px 18px !important;
border-radius: 999px;
letter-spacing: 0.3px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
flex-shrink: 0;
}
.tf-col-body .direction-badge i { font-size: 12px; }
/* Signal label — italic caption with em-dashes; centered below row */
.tf-col-signal-label {
font-size: 13px;
margin-top: 14px;
margin-bottom: 0;
font-style: italic;
color: var(--text-2);
line-height: 1.45;
text-align: center;
}
/* Score number — number-and-/100 vertically aligned, tone-colored */
.tf-col-score {
display: inline-flex;
align-items: baseline;
gap: 3px;
font-family: 'Cairo', 'Space Grotesk', sans-serif;
color: var(--tftone);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
position: relative;
cursor: help;
}
.tf-col-score:focus-visible { outline: none; }
.tf-col-score-num {
font-size: 48px;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
}
.tf-col-score-out {
font-size: 16px;
font-weight: 700;
color: var(--text-3);
letter-spacing: -0.01em;
}
/* Small info icon next to /100 — affordance that there's more to discover */
.tf-col-score-info {
font-size: 12px;
color: var(--text-3);
opacity: 0.55;
margin-inline-start: 4px;
align-self: center;
transition: color .15s ease, opacity .15s ease, transform .15s ease;
}
.tf-col-score:hover .tf-col-score-info,
.tf-col-score:focus-visible .tf-col-score-info {
opacity: 1;
color: var(--tftone);
transform: scale(1.1);
}
/* ── Hover hint — color-coded 5-band scale popover ── */
/* Anchored to the score's end edge — extends toward the card middle,
avoiding overflow past the card boundary (the card has overflow:
hidden to clip the gold strip to rounded corners). */
.tf-col-score-hint {
position: absolute;
top: calc(100% + 14px);
inset-inline-end: 0;
width: 244px;
max-width: calc(100vw - 40px);
background: #1f2937;
color: #f8fafc;
padding: 14px 16px 12px;
border-radius: 10px;
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.06);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease, visibility .18s;
z-index: 30;
font-family: 'Cairo', sans-serif;
text-align: start;
transform: translateY(-4px);
}
.tf-col-score:hover .tf-col-score-hint,
.tf-col-score:focus-visible .tf-col-score-hint,
.layer-card-score:hover .tf-col-score-hint,
.layer-card-score:focus-visible .tf-col-score-hint {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* Layer-card score box (gold-technical / gold-macro pages) gets the
same hover-hint affordance as the forecast cards' score. */
.layer-card-score {
position: relative;
cursor: help;
}
.layer-card-score-info {
font-size: 12px;
color: var(--text-3);
opacity: 0.55;
margin-inline-start: 5px;
vertical-align: 4px;
transition: color .15s ease, opacity .15s ease, transform .15s ease;
}
.layer-card-score:hover .layer-card-score-info,
.layer-card-score:focus-visible .layer-card-score-info {
opacity: 1;
transform: scale(1.1);
}
/* Arrow on the end side, pointing UP to the score */
.tf-col-score-hint::before {
content: '';
position: absolute;
bottom: 100%;
inset-inline-end: 16px;
width: 0; height: 0;
border: 7px solid transparent;
border-bottom-color: #1f2937;
}
.tf-col-score-hint-title {
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: rgba(248, 250, 252, 0.55);
margin-bottom: 12px;
font-family: 'Cairo', 'Space Grotesk', sans-serif;
}
.tf-col-score-hint-rows {
display: flex;
flex-direction: column;
gap: 2px;
}
.tf-col-score-hint-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
border-radius: 6px;
font-size: 12px;
line-height: 1.3;
}
/* Active band — the one matching the current score */
.tf-col-score-hint-row.is-active {
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
position: relative;
}
.tf-col-score-hint-row.is-active::after {
content: '◂';
position: absolute;
inset-inline-end: 6px;
color: rgba(255, 255, 255, 0.55);
font-size: 10px;
}
html[dir="rtl"] .tf-col-score-hint-row.is-active::after { content: '▸'; }
.tf-col-hint-swatch {
display: inline-block;
width: 14px; height: 14px;
border-radius: 4px;
flex-shrink: 0;
}
.tf-col-hint-bearish-strong { background: #c14444; }
.tf-col-hint-bearish { background: #f87171; }
.tf-col-hint-neutral { background: #94a3b8; }
.tf-col-hint-bullish { background: #4ade80; }
.tf-col-hint-bullish-strong { background: #16a34a; }
.tf-col-hint-range {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
color: rgba(248, 250, 252, 0.65);
font-variant-numeric: tabular-nums;
font-size: 11px;
min-width: 52px;
}
.tf-col-score-hint-row.is-active .tf-col-hint-range {
color: rgba(255, 255, 255, 0.95);
}
.tf-col-hint-label {
font-weight: 700;
color: #fff;
flex: 1;
font-size: 12.5px;
}
/* Hide the old .score-circle decoration if it ever renders */
.tf-col-body .score-circle { display: none !important; }
/* Position bar — flat track + tone-colored fill + marker */
.tf-col-bar {
position: relative;
height: 8px;
margin: 16px 6px 0;
border-radius: 999px;
background: rgba(148, 163, 184, 0.20);
overflow: visible;
}
.tf-col-bar-fill {
position: absolute;
inset-inline-start: 0;
top: 0;
height: 100%;
width: var(--tfbar-pct, 0%);
background: var(--tftone);
border-radius: 999px;
transition: width .35s ease;
}
.tf-col-bar-marker {
position: absolute;
top: -5px;
width: 4px;
height: 18px;
border-radius: 2px;
background: var(--tftone);
box-shadow:
0 0 0 3px var(--card),
0 2px 5px rgba(15, 23, 42, 0.20);
transform: translateX(-50%);
}
html[dir="rtl"] .tf-col-bar-marker { transform: translateX(50%); }
.tf-col-bar-ends {
display: flex;
justify-content: space-between;
margin-top: 9px;
padding: 0 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
color: var(--text-3);
text-transform: uppercase;
}
/* Hide the OLD score-bar markup if it shows */
.tf-col-body .score-bar { display: none !important; }
.tf-col-body .score-bar-label { display: none !important; }
/* ── REASONS list — flat rows, type-coded tags ── */
.tf-col-reasons {
margin: 0 0 20px;
padding: 0;
background: transparent;
border: none;
border-inline-start: none;
border-radius: 0;
}
.tf-col-reasons-head {
font-size: 10px;
color: var(--text-3);
letter-spacing: 1.5px;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 7px;
}
.tf-col-reasons-head i {
color: var(--gold-1);
font-size: 11px;
}
.tf-col-reasons-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.tf-col-reason {
padding: 10px 12px;
background: var(--bg-alt);
border: 1px solid var(--border-soft);
border-radius: 8px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.45;
transition: border-color .15s ease, background .15s ease;
}
.tf-col-reason:hover {
border-color: var(--border);
background: var(--card);
}
.tf-col-reason-tag {
flex-shrink: 0;
padding: 3px 9px;
border-radius: 4px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
line-height: 1.5;
white-space: nowrap;
}
.tf-col-reason-technical .tf-col-reason-tag {
background: rgba(54, 80, 139, 0.10);
color: var(--accent-1);
border: 1px solid rgba(54, 80, 139, 0.25);
}
.tf-col-reason-macro .tf-col-reason-tag {
background: rgba(212, 169, 58, 0.18);
color: #8a6a14;
border: 1px solid rgba(212, 169, 58, 0.32);
}
.tf-col-reason-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.tf-col-reason-text strong {
font-weight: 700;
color: var(--text);
font-family: 'Cairo', sans-serif;
line-height: 1.35;
}
.tf-col-reason-note {
font-size: 11px;
color: var(--text-3);
font-weight: 500;
line-height: 1.4;
}
/* ── NARRATIVE — italic context paragraph, no box ── */
.tf-col-narrative.tf-col-narrative-top {
margin: 0 0 20px;
padding: 14px 0 0;
background: transparent;
border: none;
border-top: 1px solid var(--border-soft);
border-radius: 0;
font-size: 13px;
line-height: 1.7;
color: var(--text-2);
font-style: italic;
font-family: 'Cairo', sans-serif;
}
html[dir="rtl"] .tf-col-narrative.tf-col-narrative-top { border-radius: 0; }
/* ── METRICS — horizontal row, no card chrome ── */
.tf-col-body .tf-col-mini-metrics {
margin: 0 0 18px;
padding: 16px 0;
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
background: transparent;
border-radius: 0;
display: flex;
align-items: center;
justify-content: space-around;
overflow: visible;
}
.tf-col-body .tf-col-metric {
padding: 0 14px;
text-align: center;
flex: 1;
min-width: 0;
}
.tf-col-body .tf-col-metric + .tf-col-metric {
border-inline-start: 1px solid var(--border-soft);
}
.tf-col-body .tf-col-metric-label {
font-size: 10px;
letter-spacing: 1.3px;
font-weight: 800;
color: var(--text-3);
text-transform: uppercase;
margin-bottom: 6px;
}
.tf-col-body .tf-col-metric-value {
font-size: 18px;
font-weight: 800;
color: var(--text);
font-family: 'Cairo', sans-serif;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
/* ── CTA — bottom centered, tone-aware on hover ── */
.tf-col-cta {
text-align: center;
font-size: 13px;
font-weight: 700;
color: var(--gold-3);
letter-spacing: 0.3px;
padding: 4px 0 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
transition: color .15s ease;
}
.tf-col-cta-arrow {
font-size: 11px;
transition: transform .2s ease;
}
.tf-column-card:hover .tf-col-cta { color: var(--tftone); }
.tf-column-card:hover .tf-col-cta-arrow { transform: translateX(-3px); }
html[dir="rtl"] .tf-column-card:hover .tf-col-cta-arrow { transform: translateX(3px); }
/* Mobile — tighten the heroic numbers so cards don't get tall */
@media (max-width: 575px) {
.tf-col-header { padding: 14px 18px 16px; }
.tf-col-header-top { margin-bottom: 10px; }
.tf-col-tone-dot { width: 9px; height: 9px; }
.tf-col-label { font-size: 19px; }
.tf-col-horizon-pill { font-size: 10px; padding: 2px 9px; }
.tf-col-body { padding: 20px 18px 16px; }
.tf-col-hero { padding-bottom: 18px; margin-bottom: 18px; }
.tf-col-hero-row { gap: 10px; }
.tf-col-body .direction-badge { font-size: 13px !important; padding: 8px 14px !important; }
.tf-col-score-num { font-size: 38px; }
.tf-col-score-out { font-size: 14px; }
.tf-col-signal-label { font-size: 12px; margin-top: 12px; }
.tf-col-reason { padding: 9px 11px; font-size: 12.5px; }
.tf-col-body .tf-col-metric-value { font-size: 16px; }
}
/* ── LEGEND — explains the three analysis layers shown in cards ── */
.tf-legend {
margin-top: 24px;
padding: 22px 24px 20px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 4px 14px rgba(15, 23, 42, 0.05);
}
.tf-legend-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-2);
margin-bottom: 18px;
font-family: 'Cairo', 'Space Grotesk', sans-serif;
}
.tf-legend-head i {
color: var(--accent-1);
font-size: 13px;
}
.tf-legend-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.tf-legend-item {
padding: 16px 18px;
background: var(--bg-alt);
border: 1px solid var(--border-soft);
border-radius: var(--r-md);
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.tf-legend-item:hover {
border-color: rgba(54, 80, 139, 0.30);
background: var(--card);
transform: translateY(-2px);
}
.tf-legend-item-head {
display: flex;
align-items: center;
gap: 10px;
}
.tf-legend-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgba(54, 80, 139, 0.10);
color: var(--accent-1);
}
.tf-legend-icon i { font-size: 14px; }
.tf-legend-name {
font-size: 15px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.01em;
font-family: 'Cairo', sans-serif;
line-height: 1.3;
}
.tf-legend-desc {
font-size: 12.5px;
line-height: 1.6;
color: var(--text-2);
font-family: 'Cairo', sans-serif;
}
/* Per-factor icon tint — gives each layer a distinct color identity
so a reader can match the three to the {dominant} label inside the
narrative ("بقيادة المؤشرات الفنية" → blue icon, etc.). */
.tf-legend-item-tech .tf-legend-icon {
background: rgba(54, 80, 139, 0.12);
color: var(--accent-1);
}
.tf-legend-item-macro .tf-legend-icon {
background: rgba(212, 169, 58, 0.20);
color: #8a6a14;
}
.tf-legend-item-env .tf-legend-icon {
background: rgba(22, 163, 74, 0.12);
color: var(--green);
}
@media (max-width: 767px) {
.tf-legend { padding: 18px 18px 16px; margin-top: 18px; }
.tf-legend-grid { grid-template-columns: 1fr; gap: 12px; }
.tf-legend-item { padding: 14px 16px; }
.tf-legend-name { font-size: 14px; }
.tf-legend-desc { font-size: 12px; }
.tf-legend-icon { width: 32px; height: 32px; border-radius: 9px; }
.tf-legend-icon i { font-size: 12px; }
}
/* ── VERDICT PAIR — "buy?" + "sell?" cards in a 2-column grid ─ */
/* Two verdict cards share the aggregate market read but ask
inverse questions. Tone (green/red/gold) tracks market state;
text gives each card's specific answer. Footer (TF chips +
disclaimer) is shared once below the pair to avoid duplication. */
.tf-verdict-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 20px;
}
.tf-verdict {
padding: 22px 24px 20px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow:
0 2px 6px rgba(15, 23, 42, 0.05),
0 8px 22px rgba(15, 23, 42, 0.06);
}
/* Verdict-tone palette tokens — drive the top strip + badge color */
.tf-verdict-buy { --vtone: var(--green); --vtone-soft: rgba(22, 163, 74, 0.08); --vtone-edge: rgba(22, 163, 74, 0.25); }
.tf-verdict-sell { --vtone: var(--red); --vtone-soft: rgba(193, 68, 68, 0.08); --vtone-edge: rgba(193, 68, 68, 0.25); }
.tf-verdict-wait { --vtone: #d39c00; --vtone-soft: rgba(211, 156, 0, 0.10); --vtone-edge: rgba(211, 156, 0, 0.30); }
.tf-verdict::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--vtone);
}
.tf-verdict-head {
display: flex;
align-items: center;
gap: 9px;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--text-2);
font-family: 'Cairo', 'Space Grotesk', sans-serif;
margin-bottom: 18px;
}
.tf-verdict-head i {
color: var(--vtone);
font-size: 14px;
}
.tf-verdict-body {
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
}
/* Big verdict badge — the headline answer */
.tf-verdict-badge {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
border-radius: 12px;
background: var(--vtone-soft);
border: 1px solid var(--vtone-edge);
color: var(--vtone);
font-size: 16px;
font-weight: 800;
font-family: 'Cairo', sans-serif;
letter-spacing: -0.01em;
line-height: 1.4;
}
.tf-verdict-badge i {
font-size: 26px;
flex-shrink: 0;
}
.tf-verdict-badge span {
flex: 1;
min-width: 0;
}
/* Price section — two stacked blocks: current market (neutral) and
recommended action (tone-accented). Each block contains two rows:
global (USD/oz) and local (24K-per-gram retail) — both references
the user can read at a glance. */
.tf-verdict-prices {
display: flex;
flex-direction: column;
gap: 8px;
}
.tf-verdict-price-block {
padding: 10px 12px;
background: var(--bg-alt);
border: 1px solid var(--border-soft);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
/* "Action" block gets the verdict tone — start-edge stripe + tone text
on the price numbers, so the eye lands here as the recommended call. */
.tf-verdict-price-block-action {
border-inline-start: 3px solid var(--vtone);
}
.tf-verdict-price-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--text-3);
text-transform: uppercase;
font-family: 'Cairo', sans-serif;
line-height: 1.3;
}
.tf-verdict-price-block-action .tf-verdict-price-label {
color: var(--vtone);
}
.tf-verdict-price-row {
display: flex;
align-items: baseline;
gap: 7px;
flex-wrap: wrap;
line-height: 1.2;
}
.tf-verdict-price-row > i {
font-size: 11px;
color: var(--text-3);
flex-shrink: 0;
width: 13px;
text-align: center;
}
.tf-verdict-price-block-action .tf-verdict-price-row > i {
color: var(--vtone);
opacity: 0.85;
}
.tf-verdict-price-val {
font-size: 16px;
font-weight: 800;
color: var(--text);
font-family: 'Cairo', sans-serif;
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
}
.tf-verdict-price-block-action .tf-verdict-price-val {
color: var(--vtone);
}
.tf-verdict-price-unit {
font-size: 10.5px;
font-weight: 700;
color: var(--text-3);
letter-spacing: 0.3px;
font-family: 'Cairo', sans-serif;
}
/* Strength sub-line — "based on N of 3 layers" context */
.tf-verdict-strength {
font-size: 12.5px;
color: var(--text-2);
line-height: 1.55;
font-family: 'Cairo', sans-serif;
padding-inline-start: 4px;
margin-top: auto;
}
/* ── Shared footer beneath the verdict pair ─────────── */
.tf-verdict-footer {
margin-top: 14px;
padding: 18px 24px 18px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
position: relative;
overflow: hidden;
}
.tf-verdict-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--vtone);
}
/* Per-timeframe breakdown — 3 chips showing each card's direction */
.tf-verdict-breakdown {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid var(--border-soft);
}
.tf-verdict-tf {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 12px;
border-radius: 8px;
background: var(--bg-alt);
border: 1px solid var(--border-soft);
}
.tf-verdict-tf-label {
font-size: 11px;
font-weight: 700;
color: var(--text-3);
letter-spacing: 0.3px;
font-family: 'Cairo', sans-serif;
}
.tf-verdict-tf-dir {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 800;
letter-spacing: -0.01em;
font-family: 'Cairo', sans-serif;
line-height: 1.3;
}
.tf-verdict-tf-dir i { font-size: 10px; }
.tf-verdict-tf-up .tf-verdict-tf-dir { color: var(--green); }
.tf-verdict-tf-down .tf-verdict-tf-dir { color: var(--red); }
.tf-verdict-tf-flat .tf-verdict-tf-dir { color: var(--text-2); }
.tf-verdict-tf-up { border-color: rgba(22, 163, 74, 0.20); background: rgba(22, 163, 74, 0.04); }
.tf-verdict-tf-down { border-color: rgba(193, 68, 68, 0.20); background: rgba(193, 68, 68, 0.04); }
/* Compliance disclaimer — small muted line at the bottom */
.tf-verdict-disclaimer {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 11.5px;
color: var(--text-3);
line-height: 1.6;
font-family: 'Cairo', sans-serif;
}
.tf-verdict-disclaimer i {
color: var(--vtone);
font-size: 13px;
flex-shrink: 0;
margin-top: 2px;
}
@media (max-width: 767px) {
.tf-verdict-row { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
.tf-verdict { padding: 18px 18px 16px; }
.tf-verdict-badge { font-size: 14.5px; padding: 13px 14px; gap: 10px; }
.tf-verdict-badge i { font-size: 22px; }
.tf-verdict-prices { gap: 6px; }
.tf-verdict-price-block { padding: 9px 11px; gap: 5px; }
.tf-verdict-price-val { font-size: 14.5px; }
.tf-verdict-price-unit { font-size: 10px; }
.tf-verdict-price-label { font-size: 10px; }
.tf-verdict-footer { padding: 16px 18px; margin-top: 12px; }
.tf-verdict-breakdown { grid-template-columns: 1fr; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; }
.tf-verdict-strength { font-size: 12px; }
}
/* ── SCORE COMPOSITION GRID — full-insight per-TF drill-down ──
Three cards (Technical · Macro · Fused) each showing a 0-100 layer
score. Number colors are band-coded (red ≤30 / softer-red 30-45 /
gray 45-55 / soft-green 55-70 / green >70) so the user reads the
bearish/bullish lean without doing the math. Fused gets a gold
top stripe — it's the headline that drives the forecast card. */
.insight-score-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 18px;
}
.insight-score-metric {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 16px 18px;
position: relative;
transition: border-color .2s ease, transform .15s ease;
cursor: help;
}
.insight-score-metric:hover {
border-color: rgba(54, 80, 139, 0.40);
transform: translateY(-1px);
}
.insight-score-metric.is-fused {
border-color: rgba(212, 169, 58, 0.42);
box-shadow: 0 0 0 1px rgba(212, 169, 58, 0.16) inset;
}
.insight-score-metric.is-fused::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: #d4af37;
border-radius: var(--r-md) var(--r-md) 0 0;
}
.insight-score-label {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 700;
color: var(--text-2);
letter-spacing: 0.3px;
margin-bottom: 12px;
font-family: 'Cairo', sans-serif;
}
.insight-score-label i {
color: var(--accent-1);
font-size: 12px;
}
.insight-score-metric.is-fused .insight-score-label i { color: #d4af37; }
.insight-score-val {
font-family: 'Cairo', 'Space Grotesk', sans-serif;
font-size: 32px;
font-weight: 800;
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
display: flex;
align-items: baseline;
gap: 4px;
color: var(--text);
}
.insight-score-out {
font-size: 14px;
font-weight: 700;
color: var(--text-3);
letter-spacing: -0.01em;
}
.insight-score-band {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--text-3);
margin-top: 8px;
font-family: 'Cairo', sans-serif;
}
/* Band-driven coloring on the score number + the band caption */
.insight-score-bearish-strong .insight-score-val,
.insight-score-bearish-strong .insight-score-out,
.insight-score-bearish-strong .insight-score-band { color: var(--red); }
.insight-score-bearish .insight-score-val,
.insight-score-bearish .insight-score-out,
.insight-score-bearish .insight-score-band { color: #cc6e6e; }
.insight-score-neutral .insight-score-val,
.insight-score-neutral .insight-score-out,
.insight-score-neutral .insight-score-band { color: var(--text-2); }
.insight-score-bullish .insight-score-val,
.insight-score-bullish .insight-score-out,
.insight-score-bullish .insight-score-band { color: #4d8c5e; }
.insight-score-bullish-strong .insight-score-val,
.insight-score-bullish-strong .insight-score-out,
.insight-score-bullish-strong .insight-score-band { color: var(--green); }
/* Subtitle under the section heading — sets reader expectation for the
three numbers below (what scale, what they mean). */
.insight-score-intro {
font-size: 12.5px;
line-height: 1.6;
color: var(--text-2);
margin-bottom: 14px;
font-family: 'Cairo', sans-serif;
}
@media (max-width: 575px) {
.insight-score-grid { grid-template-columns: 1fr; gap: 10px; }
.insight-score-val { font-size: 28px; }
.insight-score-metric { padding: 14px 16px; }
}
/* ════════════════════════════════════════════════════════════════════
LAYER PAGES — gold-technical / gold-macro / gold-environment
═══════════════════════════════════════════════════════════════════
Per-timeframe deep-dive cards used on the focused layer pages.
Each layer-card has a header (TF label + horizon pill + layer
score), a summary row, and one or more drill-down sections
(indicator grid, signal list, pivot levels, event list).
──────────────────────────────────────────────────────────────── */
.layer-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
/* overflow visible so tooltips can pop past the card edges */
overflow: visible;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 6px 18px rgba(15, 23, 42, 0.05);
}
.layer-card-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px;
padding: 20px 22px 16px;
background: rgba(54, 80, 139, 0.05);
border-bottom: 1px solid var(--border-soft);
/* Top corners match the parent card's radius so the head's tinted
bg doesn't poke past the rounded top now that overflow is visible */
border-top-left-radius: var(--r-lg);
border-top-right-radius: var(--r-lg);
flex-wrap: wrap;
}
.layer-card-title { display: flex; flex-direction: column; gap: 6px; }
.layer-card-title h3 {
font-size: 22px;
font-weight: 800;
color: var(--text);
margin: 0;
font-family: 'Cairo', 'Space Grotesk', sans-serif;
letter-spacing: -0.02em;
line-height: 1.2;
}
.layer-horizon-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 11px;
border-radius: 999px;
background: var(--card);
border: 1px solid rgba(54, 80, 139, 0.25);
color: var(--accent-1);
font-size: 11px; font-weight: 700;
letter-spacing: 0.3px;
font-family: 'Cairo', sans-serif;
align-self: flex-start;
}
.layer-horizon-pill i { font-size: 9px; opacity: 0.85; }
.layer-card-score {
text-align: end;
min-width: 110px;
}
.layer-card-score-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text-3);
font-family: 'Cairo', sans-serif;
margin-bottom: 4px;
}
.layer-card-score-val {
font-family: 'Cairo', 'Space Grotesk', sans-serif;
font-size: 32px;
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.layer-card-score-band {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
margin-top: 4px;
font-family: 'Cairo', sans-serif;
}
/* Reuse insight-score-* band coloring — the score-* classes already
exist from the full-insight refresh. */
.layer-card-score.insight-score-bearish-strong .layer-card-score-val,
.layer-card-score.insight-score-bearish-strong .layer-card-score-band { color: var(--red); }
.layer-card-score.insight-score-bearish .layer-card-score-val,
.layer-card-score.insight-score-bearish .layer-card-score-band { color: #cc6e6e; }
.layer-card-score.insight-score-neutral .layer-card-score-val,
.layer-card-score.insight-score-neutral .layer-card-score-band { color: var(--text-2); }
.layer-card-score.insight-score-bullish .layer-card-score-val,
.layer-card-score.insight-score-bullish .layer-card-score-band { color: #4d8c5e; }
.layer-card-score.insight-score-bullish-strong .layer-card-score-val,
.layer-card-score.insight-score-bullish-strong .layer-card-score-band { color: var(--green); }
/* Summary row beneath the header — trend/confidence/support/resistance */
.layer-card-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1px;
background: var(--border-soft);
border-bottom: 1px solid var(--border-soft);
}
.layer-card-sum-item {
padding: 12px 16px;
background: var(--card);
display: flex;
flex-direction: column;
gap: 3px;
}
.layer-card-sum-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-3);
font-family: 'Cairo', sans-serif;
}
.layer-card-sum-val {
font-size: 16px;
font-weight: 800;
color: var(--text);
font-variant-numeric: tabular-nums;
font-family: 'Cairo', sans-serif;
}
/* Drill-down sections inside the card */
.layer-card-section {
padding: 18px 22px;
border-top: 1px solid var(--border-soft);
}
.layer-card-section:first-of-type { border-top: none; }
.layer-card-section-head {
display: flex; align-items: center; gap: 9px;
/* Arabic doesn't get readability from uppercase + heavy tracking
the way Latin eyebrows do — bump size, drop tracking, restore
primary text colour so the section labels actually read. */
font-size: 15px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
color: var(--text);
font-family: 'Cairo', sans-serif;
margin-bottom: 14px;
line-height: 1.4;
}
.layer-card-section-head i {
color: var(--accent-1);
font-size: 15px;
}
/* Active signals list */
.layer-card-signals {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.layer-card-signals li {
padding: 8px 12px;
background: var(--bg-alt);
border: 1px solid var(--border-soft);
border-radius: 6px;
font-size: 13px;
font-family: 'Space Grotesk', 'Cairo', sans-serif;
font-variant-numeric: tabular-nums;
color: var(--text);
}
/* Indicator tile grid */
.indicator-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
.indicator-tile {
padding: 12px 14px;
background: var(--bg-alt);
border: 1px solid var(--border-soft);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 4px;
cursor: help;
}
.indicator-tile:hover {
border-color: rgba(54, 80, 139, 0.30);
}
.indicator-label {
font-size: 11px;
font-weight: 800;
color: var(--text-2);
letter-spacing: 0.5px;
text-transform: uppercase;
font-family: 'Space Grotesk', sans-serif;
}
.indicator-label .indicator-sub {
font-size: 9px;
font-weight: 700;
color: var(--text-3);
margin-inline-start: 2px;
}
.indicator-value {
font-family: 'Cairo', sans-serif;
font-size: 18px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.indicator-note {
font-size: 10.5px;
color: var(--text-3);
font-weight: 600;
font-family: 'Cairo', sans-serif;
}
/* Pivot grid — 2 columns, support vs resistance */
.pivot-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.pivot-col {
padding: 12px 14px;
border-radius: 8px;
border: 1px solid var(--border-soft);
}
.pivot-col-support { background: rgba(22, 163, 74, 0.05); border-color: rgba(22, 163, 74, 0.20); }
.pivot-col-resistance { background: rgba(193, 68, 68, 0.05); border-color: rgba(193, 68, 68, 0.20); }
.pivot-col-head {
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: 8px;
font-family: 'Cairo', sans-serif;
}
.pivot-col-support .pivot-col-head { color: var(--green); }
.pivot-col-resistance .pivot-col-head { color: var(--red); }
.pivot-row {
font-family: 'Cairo', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
padding: 3px 0;
}
/* ── Generic hover tooltip — used across gold-technical and other
layer pages to explain technical terms, indicators, signals, and
pivot levels. Markup:
trigger text or icon
tooltip body…
tabindex="0" makes it keyboard-focusable so screen readers and
tab users get the same affordance. */
.tt {
position: relative;
cursor: help;
display: inline-flex;
align-items: center;
gap: 4px;
}
.tt-icon {
font-size: 11px;
color: var(--text-3);
opacity: 0.7;
transition: color .15s ease, opacity .15s ease;
}
.tt:hover .tt-icon,
.tt:focus-visible .tt-icon {
color: var(--accent-1);
opacity: 1;
}
.tt-text {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: max-content;
max-width: 280px;
background: #1f2937;
color: #f8fafc;
padding: 10px 14px;
border-radius: 8px;
font-size: 12px;
line-height: 1.55;
font-weight: 500;
font-family: 'Cairo', sans-serif;
z-index: 60;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .15s, transform .15s, visibility .15s;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
text-align: start;
white-space: normal;
}
.tt:hover .tt-text,
.tt:focus-visible .tt-text,
.indicator-tile:hover > .tt-text,
.indicator-tile:focus-visible > .tt-text,
.sr-window-tile:hover > .tt-text,
.sr-window-tile:focus-visible > .tt-text,
.pivot-row:hover > .tt-text,
.pivot-row:focus-visible > .tt-text,
.env-detail-card:hover > .tt-text,
.env-detail-card:focus-visible > .tt-text,
.event-item:hover > .tt-text,
.event-item:focus-visible > .tt-text {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
/* Block-level trigger elements (tiles, rows, cards) need position:
relative + cursor:help so the inline .tt-text positions correctly. */
.indicator-tile, .sr-window-tile, .pivot-row, .env-detail-card, .event-item { position: relative; }
.pivot-row { cursor: help; padding-inline: 4px; border-radius: 4px; }
.pivot-row:hover { background: rgba(54, 80, 139, 0.06); }
.tt-text::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #1f2937;
}
/* When the tooltip would clip off the start side of a container, allow
it to flow toward the end side instead. Apply .tt-end on the trigger. */
.tt.tt-end .tt-text { left: auto; right: 0; transform: translateY(4px); }
.tt.tt-end:hover .tt-text,
.tt.tt-end:focus-visible .tt-text { transform: translateY(0); }
.tt.tt-end .tt-text::after { left: auto; right: 12px; transform: none; }
/* ── Compact tech-score strip (gold-technical page) — 3 mini-tiles
showing the per-TF technical score without the bulk of duplicated
indicators/pivots that live in a single block below. */
.tech-score-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 22px;
}
.tech-score-tile {
position: relative;
padding: 16px 18px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 4px 12px rgba(15, 23, 42, 0.04);
cursor: help;
transition: border-color .15s ease, transform .15s ease;
}
.tech-score-tile:hover { border-color: rgba(54, 80, 139, 0.30); transform: translateY(-2px); }
.tech-score-tile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.tech-score-tile-label {
font-size: 14px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.01em;
font-family: 'Cairo', sans-serif;
}
.tech-score-tile-horizon {
font-size: 10px;
font-weight: 700;
color: var(--text-3);
letter-spacing: 0.5px;
font-family: 'Cairo', sans-serif;
}
.tech-score-tile-val {
font-family: 'Cairo', 'Space Grotesk', sans-serif;
font-size: 36px;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.tech-score-tile-band {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3px;
margin-top: 6px;
font-family: 'Cairo', sans-serif;
}
.tech-score-tile-trend {
font-size: 11px;
color: var(--text-2);
margin-top: 8px;
font-family: 'Cairo', sans-serif;
}
.tech-score-tile-trend strong { color: var(--text); }
.tech-score-tile.insight-score-bearish-strong .tech-score-tile-val,
.tech-score-tile.insight-score-bearish-strong .insight-score-out,
.tech-score-tile.insight-score-bearish-strong .tech-score-tile-band { color: var(--red); }
.tech-score-tile.insight-score-bearish .tech-score-tile-val,
.tech-score-tile.insight-score-bearish .insight-score-out,
.tech-score-tile.insight-score-bearish .tech-score-tile-band { color: #cc6e6e; }
.tech-score-tile.insight-score-neutral .tech-score-tile-val,
.tech-score-tile.insight-score-neutral .insight-score-out,
.tech-score-tile.insight-score-neutral .tech-score-tile-band { color: var(--text-2); }
.tech-score-tile.insight-score-bullish .tech-score-tile-val,
.tech-score-tile.insight-score-bullish .insight-score-out,
.tech-score-tile.insight-score-bullish .tech-score-tile-band { color: #4d8c5e; }
.tech-score-tile.insight-score-bullish-strong .tech-score-tile-val,
.tech-score-tile.insight-score-bullish-strong .insight-score-out,
.tech-score-tile.insight-score-bullish-strong .tech-score-tile-band { color: var(--green); }
/* Reuse the tf-col-score-hint popover on these tiles too */
.tech-score-tile:hover .tf-col-score-hint,
.tech-score-tile:focus-visible .tf-col-score-hint {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* Active signals — one combined block with per-TF tagged groups so
the user sees which signal fires on which horizon without showing
the same indicator three times. */
.tech-signal-groups {
display: flex; flex-direction: column;
gap: 14px;
}
.tech-signal-group {
padding: 12px 14px;
background: var(--bg-alt);
border: 1px solid var(--border-soft);
border-radius: 8px;
}
.tech-signal-group-head {
display: flex; align-items: baseline; gap: 10px;
margin-bottom: 9px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--border-soft);
}
.tech-signal-group-tf {
font-size: 13px;
font-weight: 800;
color: var(--text);
font-family: 'Cairo', sans-serif;
}
.tech-signal-group-horizon {
font-size: 11px;
font-weight: 600;
color: var(--text-3);
font-family: 'Cairo', sans-serif;
display: inline-flex; align-items: center; gap: 4px;
}
.tech-signal-group-horizon i { font-size: 9px; opacity: 0.85; }
/* S/R map — 4 windows (20/50/100/200) side-by-side, each showing its
own support+resistance pair. The windows ARE different even though
indicators are the same — this is the per-window unique data. */
.sr-windows-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.sr-window-tile {
background: var(--bg-alt);
border: 1px solid var(--border-soft);
border-radius: 8px;
padding: 12px 14px;
cursor: help;
}
.sr-window-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--accent-1);
margin-bottom: 10px;
font-family: 'Space Grotesk', 'Cairo', sans-serif;
}
.sr-window-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px;
font-family: 'Cairo', sans-serif;
padding: 4px 0;
}
.sr-window-side {
font-size: 11px;
font-weight: 700;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sr-window-val {
font-size: 15px;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.sr-window-resistance .sr-window-val,
.sr-window-resistance .sr-window-side { color: var(--red); }
.sr-window-support .sr-window-val,
.sr-window-support .sr-window-side { color: var(--green); }
@media (max-width: 575px) {
.tech-score-strip { grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.tech-score-tile-val { font-size: 30px; }
.tech-signal-group { padding: 11px 13px; }
.sr-windows-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
.sr-windows-grid { grid-template-columns: 1fr; }
}
/* ── Env detail card (gold-environment page) — DXY / Real Yield /
Combined Bias. Larger than the home page's env-card; richer
metadata + per-metric note + band-tone accent stripe. */
.env-detail-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 20px 22px 18px;
height: 100%;
position: relative;
/* overflow visible so .tt-text popovers can escape the card */
overflow: visible;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 6px 18px rgba(15, 23, 42, 0.05);
transition: border-color .2s ease, transform .2s ease;
}
.env-detail-card:hover {
transform: translateY(-2px);
border-color: rgba(54, 80, 139, 0.30);
}
.env-detail-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--text-3);
/* Round the strip's top corners to match the card now that
overflow:visible no longer clips it to the parent's radius */
border-top-left-radius: var(--r-lg);
border-top-right-radius: var(--r-lg);
}
.env-detail-card.insight-score-bearish-strong::before { background: var(--red); }
.env-detail-card.insight-score-bearish::before { background: #cc6e6e; }
.env-detail-card.insight-score-bullish::before { background: #4d8c5e; }
.env-detail-card.insight-score-bullish-strong::before { background: var(--green); }
.env-detail-head {
display: flex; align-items: flex-start; gap: 12px;
margin-bottom: 14px;
}
.env-detail-icon {
width: 40px; height: 40px;
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(54, 80, 139, 0.10);
color: var(--accent-1);
flex-shrink: 0;
font-size: 16px;
}
.env-detail-card.insight-score-bearish-strong .env-detail-icon,
.env-detail-card.insight-score-bearish .env-detail-icon {
background: rgba(193, 68, 68, 0.10);
color: var(--red);
}
.env-detail-card.insight-score-bullish .env-detail-icon,
.env-detail-card.insight-score-bullish-strong .env-detail-icon {
background: rgba(22, 163, 74, 0.10);
color: var(--green);
}
.env-detail-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.env-detail-name {
font-size: 14px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.01em;
font-family: 'Cairo', sans-serif;
line-height: 1.3;
}
.env-detail-sub {
font-size: 11.5px;
color: var(--text-3);
font-family: 'Cairo', sans-serif;
line-height: 1.4;
}
.env-detail-value {
font-family: 'Cairo', 'Space Grotesk', sans-serif;
font-size: 32px;
font-weight: 800;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
line-height: 1.1;
color: var(--text);
margin-bottom: 14px;
}
.env-detail-card.insight-score-bearish-strong .env-detail-value { color: var(--red); }
.env-detail-card.insight-score-bearish .env-detail-value { color: #cc6e6e; }
.env-detail-card.insight-score-bullish .env-detail-value { color: #4d8c5e; }
.env-detail-card.insight-score-bullish-strong .env-detail-value { color: var(--green); }
.env-detail-meta {
display: flex; flex-direction: column;
gap: 6px;
padding: 10px 0;
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
margin-bottom: 12px;
}
.env-meta-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px;
font-size: 12px;
font-family: 'Cairo', sans-serif;
}
.env-meta-label {
color: var(--text-3);
font-weight: 600;
}
.env-meta-val {
color: var(--text);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.env-score-val {
font-size: 14px;
}
.env-detail-card.insight-score-bearish-strong .env-score-val,
.env-detail-card.insight-score-bearish .env-score-val { color: var(--red); }
.env-detail-card.insight-score-bullish .env-score-val,
.env-detail-card.insight-score-bullish-strong .env-score-val { color: var(--green); }
.env-detail-note {
font-size: 12px;
line-height: 1.6;
color: var(--text-2);
font-style: italic;
font-family: 'Cairo', sans-serif;
padding: 6px 0 0;
}
.env-detail-note i {
color: var(--accent-1);
font-size: 11px;
margin-inline-end: 4px;
opacity: 0.7;
}
@media (max-width: 575px) {
.env-detail-card { padding: 16px 18px 14px; }
.env-detail-value { font-size: 26px; }
.env-detail-icon { width: 36px; height: 36px; font-size: 14px; }
}
/* ── Event list (gold-macro page) — one card per economic event,
color-tinted by impact direction (bullish/bearish/neutral). */
.event-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.event-item {
padding: 12px 14px;
border-radius: 8px;
background: var(--bg-alt);
border: 1px solid var(--border-soft);
border-inline-start: 3px solid var(--text-3);
display: flex;
flex-direction: column;
gap: 8px;
}
.event-item-bullish { border-inline-start-color: var(--green); background: rgba(22, 163, 74, 0.04); }
.event-item-bearish { border-inline-start-color: var(--red); background: rgba(193, 68, 68, 0.04); }
.event-item-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.event-title {
font-size: 14px;
font-weight: 700;
color: var(--text);
font-family: 'Cairo', sans-serif;
letter-spacing: -0.01em;
flex: 1;
min-width: 0;
}
.event-impact {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 11px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3px;
font-family: 'Cairo', sans-serif;
white-space: nowrap;
}
.event-impact i { font-size: 9px; }
.event-impact-bullish { background: rgba(22, 163, 74, 0.10); color: var(--green); border: 1px solid rgba(22, 163, 74, 0.25); }
.event-impact-bearish { background: rgba(193, 68, 68, 0.10); color: var(--red); border: 1px solid rgba(193, 68, 68, 0.25); }
.event-impact-neutral { background: rgba(100, 116, 139, 0.08); color: var(--text-2); border: 1px solid rgba(100, 116, 139, 0.20); }
.event-meta {
display: flex; align-items: center; gap: 14px;
flex-wrap: wrap;
font-size: 11px;
color: var(--text-3);
font-family: 'Cairo', sans-serif;
}
.event-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.event-meta i { font-size: 10px; opacity: 0.8; }
.event-values {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
gap: 8px;
padding-top: 4px;
border-top: 1px dashed var(--border-soft);
}
.event-val {
display: flex; flex-direction: column;
gap: 2px;
padding: 6px 10px;
background: var(--card);
border: 1px solid var(--border-soft);
border-radius: 6px;
}
.event-val-label {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--text-3);
font-family: 'Cairo', sans-serif;
}
.event-val-num {
font-size: 14px;
font-weight: 800;
color: var(--text);
font-variant-numeric: tabular-nums;
font-family: 'Cairo', sans-serif;
letter-spacing: -0.01em;
}
.event-val-surprise { border-width: 1.5px; }
.event-surprise-up .event-val-num { color: var(--green); }
.event-surprise-down .event-val-num { color: var(--red); }
.event-surprise-flat .event-val-num { color: var(--text-2); }
.event-surprise-up { border-color: rgba(22, 163, 74, 0.30); background: rgba(22, 163, 74, 0.05); }
.event-surprise-down { border-color: rgba(193, 68, 68, 0.30); background: rgba(193, 68, 68, 0.05); }
/* ── Upcoming event variant — distinct dashed border + softer bg so
the visual weight matches the dampened MACRO_EXPECTED_WEIGHT (0.4x)
the engine applies. Consensus is real signal, just softer than
realized data. */
.event-item-upcoming {
border-style: dashed;
border-color: var(--border);
background: rgba(54, 80, 139, 0.025);
border-inline-start-style: solid;
border-inline-start-color: var(--text-3);
}
.event-item-upcoming.event-item-bullish { border-inline-start-color: #4d8c5e; background: rgba(22, 163, 74, 0.025); }
.event-item-upcoming.event-item-bearish { border-inline-start-color: #cc6e6e; background: rgba(193, 68, 68, 0.025); }
.event-upcoming-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px;
border-radius: 4px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
background: rgba(54, 80, 139, 0.10);
color: var(--accent-1);
border: 1px solid rgba(54, 80, 139, 0.20);
margin-inline-end: 6px;
vertical-align: 2px;
font-family: 'Cairo', sans-serif;
}
.event-upcoming-badge i { font-size: 8px; }
.event-upcoming-count {
margin-inline-start: 4px;
font-size: 11px;
font-weight: 700;
color: var(--text-3);
font-variant-numeric: tabular-nums;
}
.event-ago-upcoming {
color: var(--accent-1);
font-weight: 700;
}
.event-val-forecast-strong {
border-color: rgba(54, 80, 139, 0.30);
background: rgba(54, 80, 139, 0.05);
}
.event-val-forecast-strong .event-val-label { color: var(--accent-1); font-weight: 800; }
@media (max-width: 575px) {
.layer-card-head { padding: 16px 16px 12px; }
.layer-card-title h3 { font-size: 18px; }
.layer-card-score-val { font-size: 26px; }
.layer-card-section { padding: 14px 16px; }
.indicator-grid { grid-template-columns: repeat(2, 1fr); }
.indicator-value { font-size: 15px; }
.pivot-grid { grid-template-columns: 1fr; }
.event-title { font-size: 13px; }
.event-values { grid-template-columns: repeat(2, 1fr); }
}
/* ── END TIMEFRAME REDESIGN ─────────────────────────────────── */
/* ── Today's Numbers panels — match the timeframe card language ─ */
.today-panel-col {
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 4px 16px rgba(15, 23, 42, 0.05);
overflow: hidden;
position: relative;
}
.today-panel-col::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: rgba(212, 169, 58, 1);
z-index: 2;
}
.today-panel-col-head {
padding: 16px 22px 14px;
background: var(--bg-alt);
border-bottom: 1px solid var(--border-soft);
border-radius: 0;
display: flex;
align-items: center;
gap: 12px;
}
.today-panel-col-head i { font-size: 20px; color: #c9971c; }
.today-panel-col-head strong { font-size: 17px; font-weight: 700; color: var(--text); }
.today-panel-col-head small { font-size: 13px; color: var(--text-3); margin-inline-start: auto; }
/* ── END POLISH PASS ─────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
HOME PAGE — PREMIUM REDESIGN PASS for the three data sections
═══════════════════════════════════════════════════════════════════
Applies the same gold-accent + elevation treatment the timeframe
cards already use, to the three remaining "data" surfaces on the
home page:
1. Today's Gold Market Analysis (.today-panel-col already polished)
2. Vendor Prices section (.gold-card wrapping .price-table)
3. Spot vs Local Retail section (.gold-card wrapping .price-table)
Plus a smarter "cheapest" pill, a proper premium-% chip with
colored background, hover/alternating rows, and tabular numerals
across the board.
──────────────────────────────────────────────────────────────── */
/* ── Section title — slightly bigger + more breathing room ─── */
.section-title {
font-size: 32px;
margin-bottom: 8px;
padding-bottom: 14px;
letter-spacing: -0.025em;
}
.section-title::after {
width: 64px;
height: 3px;
background: #d39c00;
border-radius: 3px;
}
.section-title > i.fas,
.section-title > i.far {
font-size: 0.78em;
opacity: 0.85;
margin-right: 8px;
}
.section-subtitle {
font-size: 15px;
color: var(--text-2);
margin-bottom: 28px;
}
/* ── Gold-accent card — gives the .gold-card wrapping each table
the same top gold strip + elevation the timeframe cards have.
Applies automatically whenever .gold-card has the .p-0 modifier
AND directly contains a .table-responsive or .price-table — i.e.
the "data card" pattern used by both home sections. */
.gold-card.p-0 {
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
position: relative;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 6px 18px rgba(15, 23, 42, 0.05);
transition: box-shadow .25s ease, transform .25s ease;
}
.gold-card.p-0::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: rgba(212, 169, 58, 1);
z-index: 2;
}
.gold-card.p-0:hover {
box-shadow:
0 4px 8px rgba(15, 23, 42, 0.06),
0 14px 36px rgba(15, 23, 42, 0.08);
}
/* ── Price table — premium row treatment ───────────────────── */
.price-table {
border: none;
border-radius: 0;
background: var(--card);
font-variant-numeric: tabular-nums;
}
.price-table thead {
background: #fbf7ec;
}
.price-table thead th {
font-size: 12px;
letter-spacing: 1.2px;
font-weight: 700;
color: var(--text-2);
padding: 16px 22px;
}
.price-table thead th.text-right { text-align: right; }
.price-table tbody td {
padding: 18px 22px;
border-top: 1px solid var(--border-soft);
transition: background .15s ease;
}
.price-table tbody tr:first-child td { border-top: none; }
.price-table tbody tr:nth-child(even) {
background: rgba(15, 23, 42, 0.018);
}
.price-table tbody tr:hover {
background: rgba(212, 169, 58, 0.06);
}
/* Make primary numbers in the table stand out more */
.price-table tbody td strong {
font-weight: 700;
letter-spacing: -0.01em;
}
/* ── Cheapest vendor mark — proper green pill ─────────────── */
.price-table .cheapest-badge {
display: inline-flex !important;
align-items: center;
gap: 4px;
margin-top: 6px;
padding: 3px 10px !important;
background: rgba(34, 197, 94, 0.16);
color: #15803d !important;
border-radius: 999px;
font-size: 10px !important;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
border: 1px solid rgba(34, 197, 94, 0.30);
}
/* ── Premium % chip — colored pill instead of bare arrow text ── */
.premium-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
letter-spacing: -0.01em;
}
.premium-chip i { font-size: 11px; }
.premium-chip.up {
background: rgba(193, 68, 68, 0.14);
color: var(--red);
border: 1px solid rgba(193, 68, 68, 0.22);
}
.premium-chip.down {
background: rgba(22, 163, 74, 0.14);
color: var(--green);
border: 1px solid rgba(22, 163, 74, 0.22);
}
.premium-chip.flat {
background: rgba(148, 163, 184, 0.10);
color: var(--text-3);
border: 1px solid rgba(148, 163, 184, 0.22);
}
/* ── Section header with "Live" pulse indicator ───────────── */
.section-header-row {
display: flex; align-items: flex-start; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
margin-bottom: 24px;
}
.live-pulse {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700;
color: var(--green);
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 5px 12px;
background: rgba(22, 163, 74, 0.10);
border: 1px solid rgba(22, 163, 74, 0.22);
border-radius: 999px;
vertical-align: middle;
margin-left: 12px;
}
.live-pulse::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
animation: live-pulse-anim 2s infinite;
}
@keyframes live-pulse-anim {
0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
70% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
/* Footer note inside data cards — refined typography */
.gold-card.p-0 .px-3.py-2.small.text-muted {
background: var(--bg-alt) !important;
border-top: 1px solid var(--border-soft) !important;
padding: 12px 22px !important;
font-size: 12px !important;
line-height: 1.55;
color: var(--text-2) !important;
}
.gold-card.p-0 .px-3.py-2.small.text-muted i.fa-info-circle {
color: var(--accent-1);
margin-inline-end: 4px;
}
/* ── END HOME REDESIGN ───────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
HOME PAGE — FULL REDESIGN of the 3 data sections
═══════════════════════════════════════════════════════════════════
Replaces the three "table inside a card" surfaces with proper
dashboard components — hero-stat panels (today's analysis),
enhanced vendor comparison card, and a hero comparison strip
(spot vs local). All numbers tabular, all color-coded, all hover.
──────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
SECTION 1 — Hero Stat Panel (Today's Analysis)
───────────────────────────────────────────────────────────── */
.hero-stat-panel {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 24px 26px 22px;
position: relative;
overflow: hidden;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 6px 18px rgba(15, 23, 42, 0.05);
transition: box-shadow .25s ease, transform .25s ease;
}
.hero-stat-panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: rgba(212, 169, 58, 1);
}
.hero-stat-panel-global {
/* Strengthened brand-blue halo + start-edge stripe — the Global panel
is the "international markets" pane so it leans hard into navy. */
background: var(--card);
border-color: rgba(54, 80, 139, 0.20);
}
.hero-stat-panel-global::before {
background: rgba(54, 80, 139, 1);
}
.hero-stat-panel-local {
background: var(--card);
}
.hero-stat-panel:hover {
box-shadow:
0 4px 8px rgba(15, 23, 42, 0.06),
0 14px 36px rgba(15, 23, 42, 0.08);
}
.hsp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.hsp-flag {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--accent-1);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
box-shadow: 0 4px 12px rgba(54, 80, 139, 0.25);
flex-shrink: 0;
}
.hero-stat-panel-local .hsp-flag {
background: #d39c00;
box-shadow: 0 4px 12px rgba(211, 156, 0, 0.25);
}
.hsp-head-text { flex: 1; min-width: 0; }
.hsp-eyebrow {
font-size: 11px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--text-2);
}
.hsp-head-sub {
font-size: 14px; font-weight: 600;
color: var(--text); margin-top: 2px;
letter-spacing: -0.01em;
}
.hsp-hero {
display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
margin: 8px 0 22px;
padding-bottom: 22px;
border-bottom: 1px dashed var(--border);
}
.hsp-hero-price {
font-family: 'Cairo', sans-serif;
font-size: 48px; font-weight: 800;
color: var(--text); line-height: 1;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
}
.hsp-hero-currency {
font-size: 28px; font-weight: 600;
color: var(--accent-1);
margin-right: 2px;
vertical-align: top;
}
.hsp-change-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px;
border-radius: 999px;
font-size: 15px; font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
border: 1px solid transparent;
}
.hsp-change-chip i { font-size: 11px; }
.hsp-change-up {
background: rgba(22, 163, 74, 0.16);
color: var(--green);
border-color: rgba(22, 163, 74, 0.30);
}
.hsp-change-down {
background: rgba(193, 68, 68, 0.16);
color: var(--red);
border-color: rgba(193, 68, 68, 0.30);
}
.hsp-change-flat {
background: rgba(100, 116, 139, 0.10);
color: var(--text-2);
border-color: rgba(100, 116, 139, 0.22);
}
.hsp-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 22px;
}
.hsp-stat {
background: var(--bg-alt);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 12px 14px;
text-align: start;
}
.hsp-stat-label {
font-size: 10px; font-weight: 700;
letter-spacing: 1.2px; text-transform: uppercase;
color: var(--text-3);
margin-bottom: 4px;
}
.hsp-stat-value {
font-size: 17px; font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.hsp-stat-value.price-up { color: var(--green); }
.hsp-stat-value.price-down { color: var(--red); }
.hsp-stat-value.price-flat { color: var(--text-3); }
.hsp-section-label {
font-size: 10px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--text-3);
margin-bottom: 10px;
position: relative;
padding-bottom: 8px;
}
.hsp-section-label::after {
content: '';
position: absolute;
inset-inline-start: 0; bottom: 0;
width: 32px; height: 2px;
background: var(--accent-1);
border-radius: 1px;
}
.hsp-movement-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.hsp-move-cell {
padding: 14px 16px;
border-radius: 10px;
border: 1px solid transparent;
position: relative;
}
.hsp-move-up {
background: rgba(22, 163, 74, 0.10);
border-color: rgba(22, 163, 74, 0.20);
}
.hsp-move-down {
background: rgba(193, 68, 68, 0.10);
border-color: rgba(193, 68, 68, 0.20);
}
.hsp-move-flat {
background: rgba(100, 116, 139, 0.07);
border-color: rgba(100, 116, 139, 0.18);
}
.hsp-move-label {
font-size: 11px; font-weight: 700;
letter-spacing: 1.2px; text-transform: uppercase;
color: var(--text-2);
margin-bottom: 6px;
}
.hsp-move-value {
display: flex; align-items: baseline; gap: 6px;
font-size: 22px; font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.hsp-move-value i { font-size: 13px; }
.hsp-move-up .hsp-move-value { color: var(--green); }
.hsp-move-down .hsp-move-value { color: var(--red); }
.hsp-move-flat .hsp-move-value { color: var(--text-2); }
.hsp-move-abs {
margin-top: 4px;
font-size: 12px; font-weight: 500;
color: var(--text-3);
font-variant-numeric: tabular-nums;
}
/* "Updated 5m ago" stamp shown beneath each change chip/cell.
Used across every page that renders a price-change indicator. Kept
tiny + muted so it reads as ambient metadata, not primary content. */
.updated-line {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
font-size: 10px;
font-weight: 500;
color: var(--text-3);
letter-spacing: 0.3px;
line-height: 1.2;
white-space: nowrap;
}
.updated-line i { font-size: 9px; opacity: 0.85; }
/* Block-level wrapper that forces the stamp to its own line — useful
when the chip is inline (like the hero chip beside the big price). */
.updated-line-block { display: block; }
/* Inside the colored move-cells, soften the muted color a notch so the
stamp doesn't get drowned by the tinted backgrounds. */
.hsp-move-cell .updated-line { color: var(--text-2); }
@media (max-width: 575px) {
.hsp-hero-price { font-size: 38px; }
.hsp-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ─────────────────────────────────────────────────────────────
SECTION 2 — Vendor Comparison Card
───────────────────────────────────────────────────────────── */
.vendor-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
position: relative;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 6px 18px rgba(15, 23, 42, 0.05);
}
.vendor-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: rgba(212, 169, 58, 1);
z-index: 2;
}
.vendor-table {
width: 100%;
margin: 0;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.vendor-table thead {
background: #fbf7ec;
}
.vendor-table thead th {
padding: 16px 18px;
text-align: start;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.vendor-table tbody td {
padding: 16px 18px;
border-top: 1px solid var(--border-soft);
vertical-align: middle;
background: var(--card);
}
.vendor-table tbody tr:hover td {
background: rgba(212, 169, 58, 0.04);
}
.vt-prod-col {
font-size: 11px; font-weight: 700;
letter-spacing: 1.2px; text-transform: uppercase;
color: var(--text-2);
}
.vt-vendor-col {
min-width: 140px;
}
.vt-vendor-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 4px;
}
.vt-vendor-avatar {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
font-weight: 800; font-size: 16px;
letter-spacing: -0.02em;
text-transform: uppercase;
font-family: 'Space Grotesk', sans-serif;
background: var(--accent-1);
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}
/* Subtle per-vendor color rotation via attribute selector — gives each
vendor a unique avatar hue without a JS color map. Falls through to
the accent gradient default for letters not listed. */
.vt-vendor-avatar[data-letter="A"], .vt-vendor-avatar[data-letter="ا"],
.vt-vendor-avatar[data-letter="B"], .vt-vendor-avatar[data-letter="ب"] {
background: #d39c00;
}
.vt-vendor-avatar[data-letter="C"], .vt-vendor-avatar[data-letter="ت"],
.vt-vendor-avatar[data-letter="D"], .vt-vendor-avatar[data-letter="د"] {
background: #0e7490;
}
.vt-vendor-avatar[data-letter="E"], .vt-vendor-avatar[data-letter="ع"],
.vt-vendor-avatar[data-letter="F"], .vt-vendor-avatar[data-letter="ف"] {
background: #be123c;
}
.vt-vendor-avatar[data-letter="G"], .vt-vendor-avatar[data-letter="ج"],
.vt-vendor-avatar[data-letter="H"], .vt-vendor-avatar[data-letter="ه"] {
background: #15803d;
}
.vt-vendor-avatar[data-letter="M"], .vt-vendor-avatar[data-letter="م"],
.vt-vendor-avatar[data-letter="N"], .vt-vendor-avatar[data-letter="ن"] {
background: #6d28d9;
}
.vt-vendor-name {
font-size: 14px; font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.vt-vendor-updated {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10px; font-weight: 500;
color: var(--text-3);
margin-top: 2px;
letter-spacing: 0.3px;
}
.vt-vendor-updated i { font-size: 9px; }
.vt-prod-cell {
background: var(--bg-alt) !important;
border-inline-end: 1px solid var(--border);
}
.vt-prod-name {
font-size: 15px; font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
margin-bottom: 6px;
}
.vt-prod-meta {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.vt-chip {
display: inline-flex; align-items: center;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.4px;
line-height: 1.4;
}
.vt-chip-gold {
background: rgba(212, 169, 58, 0.18);
color: #8a6a14;
border: 1px solid rgba(212, 169, 58, 0.30);
}
.vt-chip-weight {
background: rgba(54, 80, 139, 0.10);
color: var(--accent-2);
border: 1px solid rgba(54, 80, 139, 0.20);
}
.vt-price-cell {
position: relative;
text-align: end;
white-space: nowrap;
}
.vt-price {
font-size: 18px; font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.vt-price-empty {
color: var(--text-3);
font-size: 16px;
}
.vt-price-cell.vt-best {
background: rgba(22, 163, 74, 0.12) !important;
position: relative;
}
.vt-price-cell.vt-best .vt-price {
color: var(--green);
font-size: 22px;
font-weight: 800;
}
.vt-best-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px;
border-radius: 999px;
background: var(--green);
color: #fff;
font-size: 9px; font-weight: 800;
letter-spacing: 0.8px; text-transform: uppercase;
margin-bottom: 6px;
box-shadow: 0 2px 4px rgba(22, 163, 74, 0.25);
}
.vt-best-pill i { font-size: 9px; }
/* ─────────────────────────────────────────────────────────────
SECTION 3 — Compare Card (Spot vs Local)
───────────────────────────────────────────────────────────── */
.compare-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
position: relative;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 6px 18px rgba(15, 23, 42, 0.05);
}
.compare-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: rgba(212, 169, 58, 1);
}
/* Hero comparison strip — spot ↔ bridge ↔ local */
.cc-hero {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
padding: 32px 32px 28px;
background: var(--card);
border-bottom: 1px solid var(--border);
}
.cc-side { min-width: 0; }
.cc-side-spot { text-align: start; }
.cc-side-local { text-align: end; }
.cc-side-label {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700;
letter-spacing: 1.2px; text-transform: uppercase;
color: var(--text-2);
margin-bottom: 12px;
}
.cc-side-label i { color: var(--accent-1); font-size: 13px; }
.cc-side-local .cc-side-label i { color: #d39c00; }
.cc-side-price {
font-family: 'Cairo', sans-serif;
font-size: 52px; font-weight: 800;
color: var(--text);
line-height: 1;
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
}
.cc-currency {
font-size: 28px; font-weight: 600;
color: var(--accent-1);
margin-right: 2px;
vertical-align: top;
}
.cc-side-unit {
margin-top: 8px;
font-size: 12px; font-weight: 600;
letter-spacing: 0.5px;
color: var(--text-3);
text-transform: uppercase;
}
.cc-side-alt {
margin-top: 4px;
font-size: 13px; font-weight: 500;
color: var(--text-2);
font-variant-numeric: tabular-nums;
}
/* Bridge — middle "premium" indicator */
.cc-bridge {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 0 8px;
}
.cc-bridge-label {
font-size: 10px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--text-3);
}
.cc-bridge-chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 11px 22px;
border-radius: 999px;
font-size: 20px; font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
border: 1px solid transparent;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.cc-bridge-chip i { font-size: 14px; }
.cc-bridge-up {
background: rgba(193, 68, 68, 0.16);
color: var(--red);
border-color: rgba(193, 68, 68, 0.30);
}
.cc-bridge-down {
background: rgba(22, 163, 74, 0.16);
color: var(--green);
border-color: rgba(22, 163, 74, 0.30);
}
.cc-bridge-flat {
background: rgba(100, 116, 139, 0.12);
color: var(--text-2);
border-color: rgba(100, 116, 139, 0.25);
}
.cc-bridge-note {
font-size: 11px; font-weight: 500;
color: var(--text-3);
text-align: center;
max-width: 180px;
}
/* Per-karat tiles strip below the hero */
.cc-karats {
padding: 22px 28px 24px;
}
.cc-karats-label {
font-size: 11px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--text-2);
margin-bottom: 14px;
position: relative;
padding-bottom: 8px;
}
.cc-karats-label::after {
content: '';
position: absolute;
inset-inline-start: 0; bottom: 0;
width: 32px; height: 2px;
background: var(--accent-1);
border-radius: 1px;
}
.cc-karats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.cc-karat-tile {
background: var(--bg-alt);
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 14px 16px;
display: flex; flex-direction: column; gap: 10px;
transition: border-color .2s ease, transform .2s ease;
}
.cc-karat-tile:hover {
border-color: rgba(212, 169, 58, 0.40);
transform: translateY(-2px);
}
.cc-karat-tag {
align-self: flex-start;
display: inline-flex; align-items: center;
padding: 4px 11px;
border-radius: 999px;
background: rgba(212, 169, 58, 0.22);
color: #8a6a14;
border: 1px solid rgba(212, 169, 58, 0.32);
font-size: 13px; font-weight: 800;
letter-spacing: 0.4px;
}
.cc-karat-prices {
display: flex; flex-direction: column; gap: 4px;
}
.cc-karat-row {
display: flex; align-items: baseline; justify-content: space-between;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.cc-karat-label {
font-size: 10px; font-weight: 700;
letter-spacing: 0.8px; text-transform: uppercase;
color: var(--text-3);
}
.cc-karat-val {
font-weight: 700;
color: var(--text-2);
letter-spacing: -0.01em;
}
.cc-karat-val.cc-karat-local {
color: var(--text);
font-size: 16px;
}
.cc-karat-chip {
align-self: flex-start;
display: inline-flex; align-items: center;
padding: 4px 11px;
border-radius: 999px;
font-size: 12px; font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
border: 1px solid transparent;
}
.cc-karat-up {
background: rgba(193, 68, 68, 0.10);
color: var(--red);
border-color: rgba(193, 68, 68, 0.22);
}
.cc-karat-down {
background: rgba(22, 163, 74, 0.10);
color: var(--green);
border-color: rgba(22, 163, 74, 0.22);
}
.cc-karat-flat {
background: rgba(100, 116, 139, 0.08);
color: var(--text-2);
border-color: rgba(100, 116, 139, 0.20);
}
.cc-footer {
padding: 14px 28px;
background: var(--bg-alt);
border-top: 1px solid var(--border-soft);
font-size: 12px; line-height: 1.55;
color: var(--text-2);
}
.cc-footer i { color: var(--accent-1); margin-inline-end: 4px; }
@media (max-width: 767px) {
.cc-hero {
grid-template-columns: 1fr;
text-align: center;
padding: 26px 20px 22px;
gap: 18px;
}
.cc-side, .cc-side-spot, .cc-side-local { text-align: center; }
.cc-side-price { font-size: 42px; }
.cc-bridge { padding: 0; }
.cc-karats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.cc-karats-grid { grid-template-columns: 1fr; }
}
/* ── END HOME 3-SECTION FULL REDESIGN ───────────────────────── */
/* ════════════════════════════════════════════════════════════════════
VENDOR MARKETPLACE PRODUCT CARDS (.vmp-*)
═══════════════════════════════════════════════════════════════════
Replaces the matrix-table for the home page "Vendor Prices" section.
Each weight bracket (1g, 2.5g, 5g, ...) becomes its own card with a
header strip (karat + weight chips, product name, vendor count) and
a horizontal grid of vendor offer tiles. The cheapest vendor lights
up with a crown ribbon + gold-bordered tile.
──────────────────────────────────────────────────────────────── */
.vmp-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.vmp-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
position: relative;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 6px 16px rgba(15, 23, 42, 0.05);
transition: box-shadow .25s ease, transform .25s ease;
}
.vmp-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: rgba(212, 169, 58, 1);
z-index: 1;
}
.vmp-card:hover {
box-shadow:
0 3px 8px rgba(15, 23, 42, 0.06),
0 14px 32px rgba(15, 23, 42, 0.08);
}
/* ── Card header — product info + vendor count ── */
.vmp-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
padding: 16px 22px;
background: #fbf7ec;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.vmp-head-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.vmp-prod-chips { display: inline-flex; gap: 6px; flex-shrink: 0; }
.vmp-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 11px;
border-radius: 999px;
font-size: 12px; font-weight: 800;
letter-spacing: 0.3px;
font-family: 'Cairo', 'Space Grotesk', sans-serif;
white-space: nowrap;
}
.vmp-chip i { font-size: 9px; opacity: 0.8; }
.vmp-chip-gold {
background: rgba(212, 169, 58, 0.22);
border: 1px solid rgba(212, 169, 58, 0.32);
color: #8a6a14;
}
.vmp-chip-weight {
background: rgba(54, 80, 139, 0.10);
border: 1px solid rgba(54, 80, 139, 0.22);
color: var(--accent-2);
}
.vmp-prod-name {
font-size: 16px; font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
font-family: 'Cairo', sans-serif;
}
.vmp-head-right {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px;
border-radius: 999px;
background: var(--card);
border: 1px solid var(--border);
font-size: 11px; font-weight: 600;
color: var(--text-2);
letter-spacing: 0.3px;
flex-shrink: 0;
}
.vmp-head-right i { color: var(--accent-1); font-size: 11px; }
/* ── Vendor offer grid ── */
.vmp-offers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
padding: 18px 20px 20px;
}
.vmp-offer {
position: relative;
background: var(--bg-alt);
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 13px 14px 12px;
display: flex; flex-direction: column; gap: 9px;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.vmp-offer:hover {
border-color: rgba(212, 169, 58, 0.35);
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
/* Cheapest variant — gold border, soft green tint, crown ribbon */
.vmp-offer-best {
background: rgba(22, 163, 74, 0.07);
border-color: rgba(212, 169, 58, 0.50);
box-shadow: 0 0 0 1px rgba(212, 169, 58, 0.30) inset;
padding-top: 22px;
}
.vmp-offer-best:hover {
border-color: rgba(212, 169, 58, 0.70);
box-shadow:
0 0 0 1px rgba(212, 169, 58, 0.50) inset,
0 10px 22px rgba(15, 23, 42, 0.08);
}
.vmp-best-ribbon {
position: absolute;
top: -1px;
inset-inline-start: 12px;
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px 4px;
border-radius: 0 0 8px 8px;
background: #d4af37;
color: #fff;
font-size: 9px; font-weight: 800;
letter-spacing: 0.8px; text-transform: uppercase;
font-family: 'Space Grotesk', 'Cairo', sans-serif;
box-shadow: 0 2px 6px rgba(212, 169, 58, 0.30);
}
.vmp-best-ribbon i { font-size: 9px; }
/* Vendor row inside an offer tile */
.vmp-vendor {
display: flex; align-items: center; gap: 9px;
min-width: 0;
}
.vmp-avatar {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
font-weight: 800; font-size: 14px;
letter-spacing: -0.02em;
text-transform: uppercase;
font-family: 'Space Grotesk', sans-serif;
background: var(--accent-1);
box-shadow: 0 2px 5px rgba(15, 23, 42, 0.15);
}
/* Per-letter avatar tinting — same scheme as the previous vt-* design
so vendors keep a consistent color identity across the site. */
.vmp-avatar[data-letter="A"], .vmp-avatar[data-letter="ا"],
.vmp-avatar[data-letter="B"], .vmp-avatar[data-letter="ب"] {
background: #d39c00;
}
.vmp-avatar[data-letter="C"], .vmp-avatar[data-letter="ت"],
.vmp-avatar[data-letter="D"], .vmp-avatar[data-letter="د"] {
background: #0e7490;
}
.vmp-avatar[data-letter="E"], .vmp-avatar[data-letter="ع"],
.vmp-avatar[data-letter="F"], .vmp-avatar[data-letter="ف"] {
background: #be123c;
}
.vmp-avatar[data-letter="G"], .vmp-avatar[data-letter="ج"],
.vmp-avatar[data-letter="H"], .vmp-avatar[data-letter="ه"] {
background: #15803d;
}
.vmp-avatar[data-letter="M"], .vmp-avatar[data-letter="م"],
.vmp-avatar[data-letter="N"], .vmp-avatar[data-letter="ن"] {
background: #6d28d9;
}
.vmp-vendor-name {
font-size: 13px; font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.vmp-price {
display: flex; align-items: baseline; gap: 5px;
}
.vmp-price-val {
font-family: 'Cairo', sans-serif;
font-size: 20px; font-weight: 800;
color: var(--text);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.vmp-offer-best .vmp-price-val { color: var(--green); font-size: 22px; }
.vmp-updated {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10px; font-weight: 500;
color: var(--text-3);
letter-spacing: 0.2px;
white-space: nowrap;
}
.vmp-updated i { font-size: 8px; opacity: 0.85; }
/* Responsive — collapse the offer grid to denser layouts on small viewports */
@media (max-width: 575px) {
.vmp-head { padding: 12px 16px; gap: 10px; }
.vmp-prod-name { font-size: 14px; }
.vmp-offers { padding: 14px 14px 16px; gap: 10px; }
.vmp-offer { padding: 12px 13px 11px; }
.vmp-offer-best { padding-top: 21px; }
.vmp-price-val { font-size: 18px; }
.vmp-offer-best .vmp-price-val { font-size: 20px; }
}
/* ── END VENDOR MARKETPLACE CARDS ───────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
VENDOR PRICE TABLE (.vptbl-*)
═══════════════════════════════════════════════════════════════════
Single consolidated matrix table — products down the start side,
vendors across the top. Replaces both the matrix marketplace cards
and the earlier vendor-table design. Aims for a Bloomberg-style
professional finance look: subtle zebra rows, tabular numerals,
tight header with vendor identity + freshness, gold-stripe accent
on the cheapest cell with a small crown.
──────────────────────────────────────────────────────────────── */
.vptbl-wrap {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
position: relative;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 8px 24px rgba(15, 23, 42, 0.06);
}
.vptbl-wrap::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: rgba(212, 169, 58, 1);
z-index: 2;
}
.vptbl {
width: 100%;
margin: 0;
border-collapse: separate;
border-spacing: 0;
font-variant-numeric: tabular-nums;
}
/* ── Header — luminous ivory band with pale-gold hairline ── */
.vptbl thead th {
background: #faf9f5;
border-top: 1px solid #f0e6c8;
border-bottom: 1px solid #ddd1a3;
padding: 12px 12px 10px;
text-align: center;
vertical-align: middle;
font-weight: 700;
color: var(--text);
}
.vptbl-prod-col {
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #8a6a14;
min-width: 220px;
width: 1%;
white-space: nowrap;
text-align: start;
font-weight: 800;
font-family: 'Cairo', 'Space Grotesk', sans-serif;
line-height: 1.4;
border-inline-end: 1px solid #ece3c8;
}
.vptbl-vendor-col {
min-width: 144px;
border-inline-end: 1px solid #f1e9d3;
}
.vptbl-vendor-col:last-child { border-inline-end: none; }
.vptbl-vendor {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
min-width: 0;
}
.vptbl-avatar {
flex-shrink: 0;
width: 42px; height: 42px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
font-weight: 800; font-size: 16px;
letter-spacing: -0.02em;
text-transform: uppercase;
font-family: 'Space Grotesk', 'Cairo', sans-serif;
background: rgba(255, 255, 255, 0.18);
border: 2px solid rgba(255, 255, 255, 0.45);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
}
/* Per-initial avatar tinting — both Latin and Arabic letters covered
so each vendor keeps a stable color across the whole site. */
.vptbl-avatar[data-letter="A"], .vptbl-avatar[data-letter="ا"],
.vptbl-avatar[data-letter="B"], .vptbl-avatar[data-letter="ب"] {
background: #d39c00;
}
.vptbl-avatar[data-letter="C"], .vptbl-avatar[data-letter="ت"],
.vptbl-avatar[data-letter="D"], .vptbl-avatar[data-letter="د"] {
background: #0e7490;
}
.vptbl-avatar[data-letter="E"], .vptbl-avatar[data-letter="ع"],
.vptbl-avatar[data-letter="F"], .vptbl-avatar[data-letter="ف"] {
background: #be123c;
}
.vptbl-avatar[data-letter="G"], .vptbl-avatar[data-letter="ج"],
.vptbl-avatar[data-letter="H"], .vptbl-avatar[data-letter="ه"] {
background: #15803d;
}
.vptbl-avatar[data-letter="M"], .vptbl-avatar[data-letter="م"],
.vptbl-avatar[data-letter="N"], .vptbl-avatar[data-letter="ن"] {
background: #6d28d9;
}
.vptbl-avatar[data-letter="S"], .vptbl-avatar[data-letter="س"],
.vptbl-avatar[data-letter="T"], .vptbl-avatar[data-letter="ط"] {
background: #b91c1c;
}
.vptbl-vendor-meta {
display: flex; flex-direction: column;
align-items: center;
gap: 4px;
min-width: 0;
width: 100%;
}
.vptbl-vendor-name {
font-size: 14px; font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'Cairo', sans-serif;
max-width: 100%;
line-height: 1.3;
}
.vptbl-vendor-time {
display: inline-flex; align-items: center; gap: 5px;
padding: 0;
font-size: 10px; font-weight: 600;
color: var(--text-3);
letter-spacing: 0.3px;
white-space: nowrap;
line-height: 1.3;
font-family: 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
}
.vptbl-vendor-time i { font-size: 9px; opacity: 0.85; color: #c19a35; }
/* ── Body ── */
.vptbl tbody td {
padding: 10px 14px;
border-bottom: 1px solid var(--border-soft);
vertical-align: middle;
background: var(--card);
transition: background .15s ease;
}
.vptbl tbody tr:nth-child(even) > td {
background: rgba(248, 247, 244, 0.55);
}
.vptbl tbody tr:hover > td {
background: rgba(212, 169, 58, 0.06);
}
.vptbl tbody tr:last-child td { border-bottom: none; }
/* Product cell — sticky-feeling start column */
.vptbl-prod-cell {
border-inline-end: 1px solid var(--border);
background: rgba(248, 247, 244, 0.4) !important;
}
.vptbl tbody tr:nth-child(even) > .vptbl-prod-cell {
background: rgba(241, 238, 229, 0.5) !important;
}
.vptbl tbody tr:hover > .vptbl-prod-cell {
background: rgba(212, 169, 58, 0.10) !important;
}
.vptbl-prod-name {
font-size: 14px; font-weight: 700;
color: var(--text);
margin-bottom: 5px;
letter-spacing: -0.01em;
line-height: 1.25;
font-family: 'Cairo', sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vptbl-prod-meta {
display: inline-flex; gap: 5px; flex-wrap: wrap;
}
.vptbl-karat {
display: inline-flex; align-items: center;
padding: 3px 10px;
border-radius: 999px;
background: rgba(212, 169, 58, 0.22);
border: 1px solid rgba(212, 169, 58, 0.30);
color: #8a6a14;
font-size: 11px; font-weight: 800;
letter-spacing: 0.4px;
font-family: 'Space Grotesk', sans-serif;
font-variant-numeric: tabular-nums;
line-height: 1.45;
}
.vptbl-weight {
display: inline-flex; align-items: center;
padding: 3px 10px;
border-radius: 999px;
background: rgba(54, 80, 139, 0.10);
border: 1px solid rgba(54, 80, 139, 0.20);
color: var(--accent-2);
font-size: 11px; font-weight: 700;
letter-spacing: 0.2px;
line-height: 1.45;
font-variant-numeric: tabular-nums;
}
/* Price cells */
.vptbl-price-cell {
text-align: end;
font-family: 'Cairo', sans-serif;
white-space: nowrap;
position: relative;
}
.vptbl-price-val {
font-size: 16px; font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.vptbl-empty {
color: var(--text-3);
font-size: 16px;
font-weight: 500;
text-align: center;
}
/* Cheapest cell — gold inset stripe + soft green tint + crown */
.vptbl-best {
background: rgba(22, 163, 74, 0.10) !important;
}
.vptbl tbody tr:nth-child(even) > .vptbl-best {
background: rgba(22, 163, 74, 0.12) !important;
}
.vptbl tbody tr:hover > .vptbl-best {
background: rgba(22, 163, 74, 0.16) !important;
}
.vptbl-best::before {
/* Gold inset stripe on the inline-start (reading-direction start) of
the best cell. Explicit RTL override below — browsers don't reliably
flip inset-inline-start on table-cell ::before pseudo-elements. */
content: '';
position: absolute;
top: 8px; bottom: 8px;
left: 0;
width: 3px;
border-radius: 0 2px 2px 0;
background: #d4af37;
}
html[dir="rtl"] .vptbl-best::before {
left: auto;
right: 0;
border-radius: 2px 0 0 2px;
}
.vptbl-best .vptbl-price-val {
color: var(--green);
font-size: 19px;
font-weight: 800;
}
.vptbl-crown {
font-size: 13px;
color: #d4af37;
margin-inline-end: 8px;
filter: drop-shadow(0 1px 1px rgba(212, 169, 58, 0.35));
vertical-align: 0;
}
/* Compact on small screens */
@media (max-width: 767px) {
.vptbl thead th { padding: 9px 10px 8px; }
.vptbl tbody td { padding: 8px 10px; }
.vptbl-prod-col { font-size: 10px; min-width: 190px; letter-spacing: 1.2px; }
.vptbl-vendor-col { min-width: 118px; }
.vptbl-prod-name { font-size: 13px; margin-bottom: 4px; }
.vptbl-karat, .vptbl-weight { font-size: 10px; padding: 2px 8px; }
.vptbl-price-val { font-size: 14px; }
.vptbl-best .vptbl-price-val { font-size: 16px; }
.vptbl-vendor { gap: 4px; }
.vptbl-vendor-name { font-size: 12px; }
.vptbl-vendor-time { font-size: 9px; }
.vptbl-crown { font-size: 11px; margin-inline-end: 6px; }
}
/* ── END VENDOR PRICE TABLE ─────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
US HIGH-IMPACT EVENTS (.usev-*)
═══════════════════════════════════════════════════════════════════
Two cards side-by-side (Upcoming | Past). Each event row carries a
date pill on the start side, then title + meta + value chips on the
right. Past events' Actual value is shown as a colored chip
(green/red/gray vs Previous). Replaces the bare Bootstrap tables.
──────────────────────────────────────────────────────────────── */
.usev-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
position: relative;
height: 100%;
display: flex; flex-direction: column;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 8px 22px rgba(15, 23, 42, 0.06);
}
.usev-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: rgba(212, 169, 58, 1);
z-index: 1;
}
/* ── Card header ── */
.usev-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
}
/* Upcoming card → navy-tinted header (brand blue #36508b) to signal
"forward-looking data" — distinct from the gold luxury cards. */
.usev-head-upcoming {
background: rgba(54, 80, 139, 0.10);
border-bottom-color: rgba(54, 80, 139, 0.25);
}
.usev-head-past {
background: #f4f3f0;
}
.usev-head-title {
display: inline-flex; align-items: center; gap: 9px;
font-size: 14px; font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.usev-head-title i {
color: var(--accent-1);
font-size: 14px;
}
.usev-head-past .usev-head-title i {
color: var(--text-2);
}
.usev-count {
display: inline-flex; align-items: center;
padding: 4px 11px;
border-radius: 999px;
background: var(--card);
border: 1px solid rgba(54, 80, 139, 0.32);
color: var(--accent-1);
font-size: 11px; font-weight: 700;
letter-spacing: 0.3px;
font-variant-numeric: tabular-nums;
}
.usev-head-past .usev-count {
border-color: var(--border);
color: var(--text-2);
}
/* ── Event list ── */
.usev-list {
display: flex; flex-direction: column;
flex: 1;
}
.usev-item {
display: flex; align-items: stretch; gap: 14px;
padding: 14px 18px;
border-bottom: 1px solid var(--border-soft);
transition: background .15s ease;
}
.usev-item:hover { background: rgba(54, 80, 139, 0.04); }
.usev-item:last-child { border-bottom: none; }
/* Date pill — left rail, brand-navy tinted to read as a "calendar"
visual signal (data context, not luxury). */
.usev-when {
flex-shrink: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 8px 10px;
border-radius: 10px;
background: rgba(54, 80, 139, 0.10);
border: 1px solid rgba(54, 80, 139, 0.22);
min-width: 56px;
position: relative;
overflow: hidden;
}
.usev-when::before {
/* Tiny navy band across the top of the date pill — mimics a torn
calendar header. */
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--accent-1);
}
.usev-day {
font-family: 'Space Grotesk', sans-serif;
font-size: 22px; font-weight: 800;
color: var(--accent-1);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
margin-top: 4px;
}
.usev-mon {
margin-top: 2px;
font-size: 10px; font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--accent-2);
font-family: 'Space Grotesk', sans-serif;
}
/* Body — title + meta + values */
.usev-body {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 7px;
}
.usev-title {
font-size: 14px; font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.4;
font-family: 'Cairo', sans-serif;
}
.usev-meta {
display: flex; align-items: center; gap: 8px;
font-size: 11px;
color: var(--text-3);
flex-wrap: wrap;
}
.usev-meta-time {
display: inline-flex; align-items: center; gap: 4px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.usev-meta-time i { font-size: 10px; opacity: 0.85; }
.usev-impact-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--red);
box-shadow: 0 0 0 2px rgba(193, 68, 68, 0.18);
}
.usev-meta-impact {
font-size: 10px; font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--red);
}
/* Value chips row */
.usev-vals {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
margin-top: 2px;
}
.usev-val {
display: inline-flex; flex-direction: column;
padding: 5px 11px;
border-radius: 8px;
background: var(--bg-alt);
border: 1px solid var(--border-soft);
}
.usev-val-forecast {
background: rgba(212, 169, 58, 0.12);
border-color: rgba(212, 169, 58, 0.30);
}
.usev-val-label {
font-size: 9px; font-weight: 700;
letter-spacing: 0.9px;
text-transform: uppercase;
color: var(--text-3);
line-height: 1.4;
}
.usev-val-forecast .usev-val-label {
color: #8a6a14;
}
.usev-val-num {
font-size: 13px; font-weight: 800;
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
font-family: 'Cairo', sans-serif;
line-height: 1.2;
}
.usev-val-forecast .usev-val-num {
color: #5e4810;
}
/* Past event "Actual" chip — color-coded vs Previous */
.usev-actual {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px;
border-radius: 8px;
background: var(--bg-alt);
border: 1px solid var(--border-soft);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.usev-actual i { font-size: 10px; }
.usev-actual-num {
font-size: 14px; font-weight: 800;
font-family: 'Cairo', sans-serif;
letter-spacing: -0.02em;
}
.usev-actual-label {
font-size: 9px; font-weight: 700;
letter-spacing: 0.9px;
text-transform: uppercase;
opacity: 0.75;
margin-inline-start: 2px;
}
.usev-actual-up {
background: rgba(22, 163, 74, 0.12);
border-color: rgba(22, 163, 74, 0.28);
color: var(--green);
}
.usev-actual-down {
background: rgba(193, 68, 68, 0.12);
border-color: rgba(193, 68, 68, 0.28);
color: var(--red);
}
.usev-actual-flat {
background: rgba(100, 116, 139, 0.08);
border-color: rgba(100, 116, 139, 0.22);
color: var(--text-2);
}
/* Empty state */
.usev-empty {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px;
padding: 36px 22px;
text-align: center;
font-size: 13px;
color: var(--text-2);
line-height: 1.5;
}
.usev-empty i {
font-size: 28px;
color: var(--text-3);
opacity: 0.55;
}
/* Mobile — denser layout */
@media (max-width: 575px) {
.usev-head { padding: 12px 14px; }
.usev-item { padding: 12px 14px; gap: 11px; }
.usev-when { min-width: 48px; padding: 6px 8px; }
.usev-day { font-size: 18px; }
.usev-mon { font-size: 9px; }
.usev-title { font-size: 13px; }
.usev-val { padding: 4px 9px; }
.usev-val-num { font-size: 12px; }
.usev-actual { padding: 4px 9px; }
.usev-actual-num { font-size: 13px; }
}
/* ── END US HIGH-IMPACT EVENTS ──────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
Economic calendar — day-grouped layout (/economic-calendar)
══════════════════════════════════════════════════════════════════ */
.cal-header { margin-bottom: 18px; }
/* Range chips — one click submits the form. */
.cal-range-row {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 14px;
}
.cal-range-chip {
appearance: none;
background: var(--bg-alt);
border: 1px solid var(--border);
color: var(--text-2);
font-family: 'Cairo', sans-serif;
font-size: 13px; font-weight: 600;
padding: 8px 14px;
border-radius: 999px;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cal-range-chip:hover {
border-color: var(--accent-1);
color: var(--text);
}
.cal-range-chip.is-active {
background: #36508b;
border-color: #36508b;
color: #fff;
}
/* Secondary filter row */
.cal-filter-grid {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
gap: 12px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
}
.cal-filter-cell { display: flex; flex-direction: column; }
.cal-filter-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 5px;
}
.cal-filter-grid select.form-control,
.cal-filter-grid input.form-control {
font-family: 'Cairo', sans-serif;
}
/* Window summary strip */
.cal-window-strip {
display: flex; align-items: center; gap: 10px;
font-size: 12px;
color: var(--text-3);
padding: 10px 0 14px;
}
.cal-window-range {
font-family: 'Space Grotesk', monospace;
font-variant-numeric: tabular-nums;
}
.cal-window-sep { opacity: 0.5; }
.cal-window-count { font-weight: 600; color: var(--text-2); }
/* Feed = stack of day cards */
.cal-feed {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Day card */
.cal-day {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 4px 16px rgba(15, 23, 42, 0.05);
}
.cal-day.is-past { opacity: 0.72; }
.cal-day.is-today {
border-color: rgba(54, 80, 139, 0.40);
box-shadow:
0 1px 3px rgba(54, 80, 139, 0.10),
0 4px 16px rgba(54, 80, 139, 0.16);
}
/* Sticky day header */
.cal-day-head {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
background: rgba(54, 80, 139, 0.04);
border-bottom: 1px solid var(--border-soft);
}
.cal-day.is-today .cal-day-head {
background: rgba(54, 80, 139, 0.10);
}
.cal-day-head-left {
display: flex; align-items: center; gap: 14px;
flex: 1;
min-width: 0;
}
.cal-day-num {
font-family: 'Cairo', 'Space Grotesk', sans-serif;
font-size: 30px; font-weight: 800;
line-height: 1;
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.cal-day.is-today .cal-day-num { color: #36508b; }
.cal-day-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-day-name {
font-size: 14px; font-weight: 700;
color: var(--text);
}
.cal-day-month {
font-size: 11px;
letter-spacing: 0.3px;
color: var(--text-3);
}
.cal-day-tag {
font-size: 10px; font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
background: var(--bg-alt);
color: var(--text-2);
font-family: 'Cairo', sans-serif;
}
.cal-day-tag-today {
background: #36508b;
color: #fff;
}
.cal-day-count {
font-size: 12px;
color: var(--text-3);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Event row */
.cal-event-list {
display: flex; flex-direction: column;
}
.cal-event {
display: grid;
grid-template-columns: 64px 80px 52px 1fr auto;
gap: 14px;
align-items: center;
padding: 12px 18px;
border-top: 1px solid var(--border-soft);
transition: background .12s ease;
}
.cal-event-list .cal-event:first-child { border-top: none; }
.cal-event:hover { background: rgba(54, 80, 139, 0.03); }
.cal-event-time {
font-family: 'Space Grotesk', monospace;
font-size: 13px;
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.cal-event-country {
display: flex; align-items: center; gap: 7px;
min-width: 0;
}
.cal-flag {
width: 20px; height: 15px;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
flex-shrink: 0;
}
.cal-event-cc {
font-size: 11px; font-weight: 700;
color: var(--text-2);
letter-spacing: 0.3px;
}
/* Impact dots */
.cal-event-impact {
display: inline-flex;
gap: 3px;
align-items: center;
cursor: help;
}
.cal-dot {
display: block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--border);
}
.cal-impact-high .cal-dot.is-on { background: var(--red); }
.cal-impact-med .cal-dot.is-on { background: #f59e0b; }
.cal-impact-low .cal-dot.is-on { background: var(--text-3); }
/* Event body */
.cal-event-body { min-width: 0; }
.cal-event-title {
font-family: 'Cairo', sans-serif;
font-size: 14px; font-weight: 700;
color: var(--text);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
}
.cal-event-indicator {
font-size: 11px;
color: var(--text-3);
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Numbers grid */
.cal-event-numbers {
display: flex;
gap: 16px;
font-variant-numeric: tabular-nums;
}
.cal-num {
display: flex; flex-direction: column;
align-items: flex-end;
min-width: 56px;
text-align: end;
}
.cal-num-label {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 3px;
font-family: 'Cairo', sans-serif;
}
.cal-num-val {
font-size: 13px;
color: var(--text-2);
}
.cal-num-actual .cal-num-val {
color: var(--text);
}
.cal-num-actual .cal-num-val strong {
font-weight: 700;
color: var(--text);
}
/* Mobile — stack the row into a card */
@media (max-width: 768px) {
.cal-filter-grid { grid-template-columns: 1fr; }
.cal-event {
grid-template-columns: 56px 1fr auto;
grid-template-rows: auto auto auto;
column-gap: 12px;
row-gap: 6px;
padding: 12px 14px;
}
.cal-event-time { grid-column: 1; grid-row: 1; }
.cal-event-country { grid-column: 1; grid-row: 2; }
.cal-event-impact { grid-column: 3; grid-row: 1; justify-self: end; }
.cal-event-body { grid-column: 2 / -1; grid-row: 2; }
.cal-event-numbers {
grid-column: 1 / -1; grid-row: 3;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 4px;
padding-top: 8px;
border-top: 1px dashed var(--border-soft);
}
.cal-num { align-items: flex-start; text-align: start; min-width: 0; }
.cal-day-num { font-size: 24px; }
.cal-day-head { padding: 12px 14px; gap: 10px; }
.cal-day-tag { font-size: 9px; padding: 3px 8px; }
}
/* RTL: numbers grid flips its alignment naturally; flags + dots are
inherently neutral so they don't need extra rules. */
/* ── END economic calendar (list view) ───────────────────────── */
/* ══════════════════════════════════════════════════════════════════
Economic calendar — month grid (/economic-calendar)
══════════════════════════════════════════════════════════════════ */
/* Month nav bar */
.calm-nav {
display: flex; align-items: center; gap: 10px;
margin: 4px 0 14px;
flex-wrap: wrap;
}
.calm-nav-btn {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--bg-alt);
color: var(--text);
border: 1px solid var(--border);
text-decoration: none;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.calm-nav-btn:hover {
background: #36508b;
color: #fff;
border-color: #36508b;
}
[dir="rtl"] .calm-nav-prev .fa-chevron-left::before { content: "\f054"; } /* swap arrows in RTL */
[dir="rtl"] .calm-nav-next .fa-chevron-right::before { content: "\f053"; }
.calm-nav-picker {
display: inline-flex; align-items: baseline; gap: 8px;
font-family: 'Cairo', sans-serif;
flex: 1;
justify-content: center;
}
.calm-nav-month-name {
font-size: 22px; font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1;
}
.calm-year-select {
background: transparent;
border: 1px solid var(--border);
border-radius: 6px;
font-family: 'Cairo', 'Space Grotesk', sans-serif;
font-size: 18px; font-weight: 700;
color: var(--text);
padding: 4px 10px;
cursor: pointer;
font-variant-numeric: tabular-nums;
}
.calm-year-select:focus {
outline: 2px solid rgba(54, 80, 139, 0.30);
border-color: #36508b;
}
.calm-nav-today {
font-family: 'Cairo', sans-serif;
font-size: 12px; font-weight: 700;
letter-spacing: 0.5px;
padding: 7px 16px;
border-radius: 999px;
background: var(--bg-alt);
color: var(--text);
border: 1px solid var(--border);
text-decoration: none;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.calm-nav-today:hover {
background: #36508b;
color: #fff;
border-color: #36508b;
}
/* Grid */
.calm-grid {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
/* overflow:visible so hover popovers can escape the grid box.
Corner cells fall outside the rounded radius but their own
borders+bg keep the visual coherent. */
overflow: visible;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 4px 16px rgba(15, 23, 42, 0.05);
}
.calm-cells { overflow: visible; }
/* Day-of-week header */
.calm-weekrow {
display: grid;
/* minmax(0, 1fr) so the 7 columns truly share viewport width.
Plain "1fr" expands past 1/7 of the container when cell content
uses nowrap — that's what was causing the whole grid to overflow. */
grid-template-columns: repeat(7, minmax(0, 1fr));
background: rgba(54, 80, 139, 0.05);
border-bottom: 1px solid var(--border-soft);
}
.calm-weekday {
padding: 10px 6px;
font-family: 'Cairo', sans-serif;
font-size: 11px; font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
color: var(--text-2);
border-inline-end: 1px solid var(--border-soft);
}
.calm-weekday:last-child { border-inline-end: none; }
/* 42 cells, 7 cols × 6 rows */
.calm-cells {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calm-cell {
display: flex;
flex-direction: column;
gap: 4px;
min-height: 110px;
padding: 8px 8px 6px;
border-inline-end: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
text-decoration: none;
color: var(--text);
background: var(--card);
transition: background .12s ease;
position: relative;
/* overflow:visible so the absolute-positioned popover can escape
the cell box. Was overflow:hidden when cells linked to a bottom
detail panel — no longer needed. */
overflow: visible;
cursor: default;
}
.calm-cell[tabindex="0"] { cursor: pointer; }
/* Strip the right border on every 7th cell (end of week) and bottom
on the final row. Easier than counting indices in Smarty. */
.calm-cell:nth-child(7n) { border-inline-end: none; }
.calm-cell:nth-last-child(-n+7) { border-bottom: none; }
.calm-cell:hover {
background: rgba(54, 80, 139, 0.04);
}
.calm-cell.is-other-month {
background: rgba(15, 23, 42, 0.02);
color: var(--text-3);
}
.calm-cell.is-weekend {
background: rgba(54, 80, 139, 0.015);
}
.calm-cell.is-weekend.is-other-month {
background: rgba(15, 23, 42, 0.03);
}
.calm-cell.is-past:not(.is-today)::after {
/* faint diagonal-line wash on past dates so eye skims to upcoming */
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg,
rgba(15, 23, 42, 0.015) 0%,
rgba(15, 23, 42, 0.015) 50%,
transparent 50%, transparent 100%);
pointer-events: none;
}
.calm-cell.is-today {
background: rgba(54, 80, 139, 0.10);
box-shadow: inset 0 0 0 2px #36508b;
z-index: 1;
}
.calm-cell.is-selected,
.calm-cell.is-pinned,
.calm-cell:hover {
z-index: 2;
}
.calm-cell.is-pinned {
background: rgba(54, 80, 139, 0.10);
box-shadow: inset 0 0 0 2px #36508b;
}
/* ── Hover popover ────────────────────────────────────────────── */
/* Position vars (--pop-*) are set by JS in placePopover() — picks the
side with the most space so a 380px popover never overflows the
viewport, regardless of which cell hovered. CSS variables provide
sensible defaults when JS hasn't run yet. */
.calm-popover {
position: absolute;
top: var(--pop-top, 100%);
bottom: var(--pop-bottom, auto);
inset-inline-start: var(--pop-istart, 0);
inset-inline-end: var(--pop-iend, auto);
margin-top: var(--pop-mt, 8px);
margin-bottom: var(--pop-mb, 0);
width: 380px;
max-width: min(90vw, 420px);
max-height: 380px;
overflow-y: auto;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow:
0 16px 40px rgba(15, 23, 42, 0.20),
0 4px 12px rgba(15, 23, 42, 0.08);
z-index: 100;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-4px);
transition: opacity .14s ease, visibility .14s, transform .14s ease;
text-align: start;
}
.calm-popover.is-flipped-up { transform: translateY(4px); }
/* Click-only: popover opens via .is-pinned (mouse/touch click) or
:focus-within (keyboard tab). Hover does NOT open the popover —
that way the close button works on both desktop and touch. */
.calm-cell:focus-within .calm-popover,
.calm-cell.is-pinned .calm-popover {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.calm-popover-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px;
background: rgba(54, 80, 139, 0.06);
border-bottom: 1px solid var(--border-soft);
position: sticky; top: 0; z-index: 2;
}
.calm-popover-date {
font-family: 'Cairo', sans-serif;
font-size: 14px;
color: var(--text);
}
.calm-popover-date strong {
font-size: 20px; font-weight: 800;
color: #36508b;
margin-inline-end: 4px;
letter-spacing: -0.02em;
}
.calm-popover-meta {
display: inline-flex;
align-items: center;
gap: 8px;
}
.calm-popover-count {
font-size: 11px;
color: var(--text-3);
font-variant-numeric: tabular-nums;
}
.calm-popover-close {
appearance: none;
background: transparent;
border: none;
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-2);
cursor: pointer;
/* Plain × glyph (HTML ×) — fa-times isn't in our FA subset.
The glyph sits high in its em box, so a bumped font-size + slight
baseline nudge centers it visually inside the circle. */
font-size: 22px;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1;
padding: 0 0 3px;
transition: background .15s ease, color .15s ease;
}
.calm-popover-close:hover,
.calm-popover-close:focus-visible {
background: rgba(15, 23, 42, 0.08);
color: var(--text);
outline: none;
}
.calm-popover-close:focus-visible {
box-shadow: 0 0 0 3px rgba(54, 80, 139, 0.20);
}
/* Bigger touch target on mobile bottom sheet. */
@media (max-width: 720px) {
.calm-popover-close { width: 36px; height: 36px; font-size: 14px; }
}
/* Inside the popover use the stacked card layout for events so the
row fits the 380px width comfortably. */
.calm-popover .cal-event {
grid-template-columns: 56px minmax(0, 1fr) auto;
grid-template-rows: auto auto auto;
column-gap: 12px;
row-gap: 6px;
padding: 10px 14px;
}
.calm-popover .cal-event-time { grid-column: 1; grid-row: 1; }
.calm-popover .cal-event-country { grid-column: 1; grid-row: 2; }
.calm-popover .cal-event-impact { grid-column: 3; grid-row: 1; justify-self: end; }
.calm-popover .cal-event-body {
grid-column: 2 / -1; grid-row: 2;
/* min-width: 0 lets grid 1fr shrink below its content's natural
width — without it, long event titles blow the popover open. */
min-width: 0;
}
.calm-popover .cal-event-title {
/* Long titles ellipsis on a single line; the popover stays at its
intended width so the cell anchor remains accurate. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.calm-popover .cal-event-indicator {
/* Indicator can wrap to 2 lines but no further. */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-width: 100%;
}
.calm-popover .cal-event-numbers {
grid-column: 1 / -1; grid-row: 3;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 4px;
padding-top: 8px;
border-top: 1px dashed var(--border-soft);
min-width: 0;
}
.calm-popover .cal-num { align-items: flex-start; text-align: start; min-width: 0; }
.calm-popover .cal-num-val {
/* Numbers (forecast/actual/previous) can be long strings like
"-378700000000" — wrap them rather than overflow horizontally. */
word-break: break-all;
}
/* Top accent line per impact tier */
.calm-cell-high::before,
.calm-cell-med::before,
.calm-cell-low::before {
content: '';
position: absolute;
top: 0; inset-inline-start: 0; inset-inline-end: 0;
height: 3px;
}
.calm-cell-high::before { background: var(--red); }
.calm-cell-med::before { background: #f59e0b; }
.calm-cell-low::before { background: var(--text-3); }
/* Head row inside the cell */
.calm-cell-head {
display: flex; align-items: center; justify-content: space-between;
}
.calm-day-num {
font-family: 'Cairo', 'Space Grotesk', sans-serif;
font-size: 15px; font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
color: inherit;
}
.calm-cell.is-today .calm-day-num {
color: #36508b;
font-weight: 800;
}
.calm-day-count {
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: 999px;
background: rgba(54, 80, 139, 0.12);
color: #36508b;
font-variant-numeric: tabular-nums;
}
/* Dot row */
.calm-cell-dots {
display: inline-flex; gap: 3px;
}
.calm-dot {
display: block;
width: 6px; height: 6px;
border-radius: 50%;
}
.calm-dot-high { background: var(--red); }
.calm-dot-med { background: #f59e0b; }
.calm-dot-low { background: var(--text-3); }
/* Preview event lines */
.calm-cell-preview {
display: flex; flex-direction: column;
gap: 2px;
margin-top: 2px;
flex: 1;
/* Belt-and-braces — the grid columns already use minmax(0, 1fr),
but min-width: 0 on the flex child stops any nowrap line from
bleeding past the cell's column box. */
min-width: 0;
overflow: hidden;
}
.calm-preview-line {
font-family: 'Cairo', sans-serif;
font-size: 10.5px;
line-height: 1.3;
color: var(--text-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.calm-preview-time {
font-family: 'Space Grotesk', monospace;
font-weight: 700;
color: var(--text-3);
margin-inline-end: 4px;
}
.calm-preview-more {
font-size: 10px;
font-weight: 700;
color: #36508b;
margin-top: 2px;
}
/* Detail panel under the grid */
.calm-detail-host {
margin-top: 18px;
}
.calm-detail-empty {
text-align: center;
padding: 28px 20px;
color: var(--text-3);
font-size: 13px;
background: var(--bg-alt);
border: 1px dashed var(--border);
border-radius: var(--r-lg);
}
.calm-detail-empty i {
display: block;
font-size: 22px;
margin-bottom: 8px;
opacity: 0.55;
}
.calm-detail {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 4px 16px rgba(15, 23, 42, 0.05);
}
.calm-detail-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
background: rgba(54, 80, 139, 0.06);
border-bottom: 1px solid var(--border-soft);
}
.calm-detail-date {
font-family: 'Cairo', sans-serif;
font-size: 16px;
color: var(--text);
}
.calm-detail-date strong {
font-size: 22px;
font-weight: 800;
color: #36508b;
margin-inline-end: 4px;
letter-spacing: -0.02em;
}
.calm-detail-count {
font-size: 12px;
color: var(--text-3);
font-variant-numeric: tabular-nums;
}
/* ── Mobile (≤720px) — compact grid + bottom-sheet popover ───
Hide preview text, shrink cells but keep a tappable 56-72px touch
target. Popover becomes a fixed-position bottom sheet (slides up
from the bottom 8px gutter). JS bails out below this width — see
economic-calendar.html. */
@media (max-width: 720px) {
/* Grid cells */
.calm-cell {
min-height: 72px;
padding: 6px 4px 4px;
gap: 3px;
}
.calm-cell-head { gap: 4px; }
.calm-day-num { font-size: 13px; }
.calm-day-count {
font-size: 9px;
padding: 1px 5px;
line-height: 14px;
min-width: 18px;
text-align: center;
}
.calm-cell-preview { display: none; }
.calm-cell-dots { gap: 2px; }
.calm-dot { width: 5px; height: 5px; }
.calm-weekday { font-size: 9px; padding: 7px 2px; letter-spacing: 0.4px; }
/* Popover → bottom sheet. !important wins over JS-set inline vars. */
.calm-popover {
position: fixed !important;
inset-inline-start: 8px !important;
inset-inline-end: 8px !important;
top: auto !important;
bottom: 8px !important;
width: auto;
max-width: none !important;
max-height: 70vh !important;
margin: 0 !important;
border-radius: 14px;
box-shadow:
0 -8px 32px rgba(15, 23, 42, 0.22),
0 -2px 8px rgba(15, 23, 42, 0.10);
transform: translateY(12px);
}
.calm-cell:focus-within .calm-popover,
.calm-cell.is-pinned .calm-popover {
transform: translateY(0);
}
/* A subtle drag handle on the sheet so the bottom-sheet shape reads
as a panel, not a stray tooltip. */
.calm-popover::before {
content: '';
display: block;
position: sticky; top: 0;
height: 6px;
background: var(--card);
padding-top: 8px;
z-index: 3;
}
.calm-popover::after {
content: '';
position: sticky;
top: 8px;
z-index: 4;
display: block;
width: 36px; height: 4px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.18);
margin: -10px auto 4px;
}
.calm-popover-head { padding-top: 8px; }
}
/* ── Phone (≤480px) ─────────────────────────────────────────── */
@media (max-width: 480px) {
.calm-cell {
min-height: 56px;
padding: 4px 3px 3px;
}
.calm-day-num { font-size: 12px; }
.calm-day-count {
/* Below ~360px the count badge takes too much room — the dots
already convey "this day has events". */
display: none;
}
.calm-cell-head { justify-content: center; }
}
/* ── END economic calendar (month grid) ──────────────────────── */
/* ══════════════════════════════════════════════════════════════════
Economic calendar — professional toolbar (ec-* classes)
Replaces the older 2-row .cal-header + .calm-nav + .cal-filter-grid
layout with a single integrated bar.
══════════════════════════════════════════════════════════════════ */
.ec-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Cairo', sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--text-3);
margin: 4px 0 10px;
}
.ec-eyebrow i { font-size: 13px; color: var(--accent-1); }
/* Toolbar bar */
.ec-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
padding: 12px 16px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 4px 16px rgba(15, 23, 42, 0.05);
margin-bottom: 18px;
}
/* Left segment — month nav */
.ec-toolbar-left {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.ec-nav-arrow {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--bg-alt);
color: var(--text);
border: 1px solid var(--border);
text-decoration: none;
font-size: 13px;
transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
.ec-nav-arrow:hover {
background: #36508b;
color: #fff;
border-color: #36508b;
transform: scale(1.06);
}
[dir="rtl"] .ec-toolbar-left .ec-nav-arrow:first-of-type .fa-chevron-left::before { content: "\f054"; }
[dir="rtl"] .ec-toolbar-left .ec-nav-arrow:nth-of-type(2) .fa-chevron-right::before { content: "\f053"; }
.ec-month-title {
display: inline-flex; align-items: baseline; gap: 6px;
margin: 0;
font-family: 'Cairo', sans-serif;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
color: var(--text);
padding: 0 6px;
}
.ec-month-name { color: var(--text); }
.ec-month-year-wrap {
position: relative;
display: inline-flex; align-items: center;
}
.ec-year-select {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 1px solid transparent;
font: inherit;
font-variant-numeric: tabular-nums;
color: #36508b;
padding: 2px 22px 2px 4px;
border-radius: 6px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 4px center;
background-size: 9px 5px;
transition: background-color .14s ease, border-color .14s ease;
}
[dir="rtl"] .ec-year-select {
padding: 2px 4px 2px 22px;
background-position: left 4px center;
}
.ec-year-select:hover {
background-color: rgba(54, 80, 139, 0.08);
border-color: rgba(54, 80, 139, 0.20);
}
.ec-year-select:focus {
outline: 2px solid rgba(54, 80, 139, 0.30);
border-color: #36508b;
}
.ec-today-btn {
display: inline-flex; align-items: center;
margin-inline-start: 6px;
font-family: 'Cairo', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.4px;
padding: 7px 16px;
border-radius: 999px;
background: rgba(54, 80, 139, 0.10);
color: #36508b;
border: 1px solid rgba(54, 80, 139, 0.20);
text-decoration: none;
white-space: nowrap;
transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.ec-today-btn:hover {
background: #36508b;
color: #fff;
border-color: #36508b;
text-decoration: none;
}
/* Right segment — filters */
.ec-toolbar-right {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
flex: 1;
justify-content: flex-end;
}
.ec-field {
display: inline-flex; align-items: center;
gap: 6px;
padding: 0 8px 0 10px;
height: 38px;
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 999px;
font-family: 'Cairo', sans-serif;
transition: border-color .14s ease, background .14s ease;
cursor: pointer;
}
.ec-field:focus-within {
background: var(--card);
border-color: #36508b;
box-shadow: 0 0 0 3px rgba(54, 80, 139, 0.10);
}
.ec-field:hover { border-color: rgba(54, 80, 139, 0.30); }
.ec-field-icon {
font-size: 12px;
color: var(--text-3);
line-height: 1;
display: inline-flex; align-items: center;
}
.ec-field:focus-within .ec-field-icon { color: #36508b; }
.ec-select,
.ec-input {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: none;
outline: none;
font: inherit;
font-size: 13px;
font-weight: 600;
color: var(--text);
padding: 0 18px 0 0;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0 center;
background-size: 9px 5px;
max-width: 200px;
}
[dir="rtl"] .ec-select {
padding: 0 0 0 18px;
background-position: left 0 center;
}
.ec-input {
cursor: text;
background-image: none;
padding: 0;
min-width: 200px;
}
.ec-input::placeholder { color: var(--text-3); }
.ec-field-search { padding-inline-end: 14px; }
/* ── Mobile toolbar (≤720px) ────────────────────────────────
Two rows: month nav on top (◀ Month/Year ▶ Today distributed),
filters on bottom (country + search). */
@media (max-width: 720px) {
.ec-toolbar {
flex-direction: column;
align-items: stretch;
padding: 10px 12px;
gap: 10px;
}
.ec-toolbar-left {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px;
flex: 1 1 100%;
}
.ec-month-title {
flex: 1;
justify-content: center;
padding: 0;
/* Center the title between the two arrows. */
text-align: center;
}
.ec-toolbar-right {
display: flex;
flex-direction: row;
gap: 8px;
flex: 1 1 100%;
width: 100%;
justify-content: stretch;
}
.ec-field, .ec-field-search { flex: 1 1 auto; min-width: 0; }
.ec-select { max-width: none; }
.ec-input { min-width: 0; flex: 1; }
}
/* ── Phone (≤480px) — even tighter ──────────────────────────── */
@media (max-width: 480px) {
.ec-toolbar { padding: 9px 10px; gap: 8px; }
.ec-month-title { font-size: 18px; }
.ec-today-btn { font-size: 11px; padding: 6px 12px; margin-inline-start: 4px; }
.ec-nav-arrow { width: 32px; height: 32px; font-size: 12px; }
.ec-year-select { font-size: 15px; padding: 2px 18px 2px 4px; }
[dir="rtl"] .ec-year-select { padding: 2px 4px 2px 18px; }
.ec-toolbar-right { flex-direction: column; }
.ec-field { padding: 0 10px 0 12px; }
}
/* ── END professional toolbar ─────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
/should-i-buy-gold-now + /should-i-sell-gold-now
Dedicated single-question decision cards. Tone palette mirrors the
.tf-tone-* system used by the home/simple-insight verdict cards so
the visual language is consistent across the buy/sell surfaces.
══════════════════════════════════════════════════════════════════ */
.sib-hero { text-align: center; margin-top: 8px; }
.sib-hero-question {
font-family: 'Cairo', sans-serif;
font-size: 30px; font-weight: 800;
color: var(--text);
margin: 0 0 6px;
letter-spacing: -0.02em;
}
.sib-hero-subtitle {
font-size: 14px;
color: var(--text-2);
margin: 0 auto;
max-width: 720px;
line-height: 1.55;
}
.sib-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 24px 26px 22px;
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 8px 24px rgba(15, 23, 42, 0.06);
position: relative;
overflow: hidden;
}
.sib-card::before {
content: '';
position: absolute;
top: 0; inset-inline-start: 0; inset-inline-end: 0;
height: 4px;
}
.sib-card-bullish::before { background: var(--green); }
.sib-card-bearish::before { background: var(--red); }
.sib-card-neutral::before { background: #f59e0b; }
/* Headline answer */
.sib-answer {
display: flex; flex-direction: column;
align-items: center; gap: 8px;
margin-bottom: 22px;
padding-bottom: 22px;
border-bottom: 1px solid var(--border-soft);
}
.sib-answer-badge {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Cairo', sans-serif;
font-size: 22px; font-weight: 800;
padding: 12px 24px;
border-radius: 999px;
letter-spacing: -0.01em;
}
.sib-answer-badge i { font-size: 22px; }
.sib-answer-bullish {
background: rgba(56, 142, 60, 0.12);
color: var(--green);
box-shadow: 0 0 0 1px rgba(56, 142, 60, 0.20);
}
.sib-answer-bearish {
background: rgba(220, 38, 38, 0.10);
color: var(--red);
box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.20);
}
.sib-answer-neutral {
background: rgba(245, 158, 11, 0.12);
color: #b45309;
box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25);
}
.sib-answer-strength {
font-size: 13px;
color: var(--text-2);
font-family: 'Cairo', sans-serif;
display: inline-flex; align-items: center; gap: 6px;
}
.sib-strength-strong { color: var(--green); }
.sib-strength-moderate { color: #b45309; }
.sib-strength-unclear { color: var(--text-3); }
/* Prices */
.sib-prices {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin-bottom: 22px;
}
.sib-price-tile {
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 18px;
background: var(--bg-alt);
}
.sib-price-action {
background: rgba(54, 80, 139, 0.06);
border-color: rgba(54, 80, 139, 0.30);
}
.sib-price-label {
font-family: 'Cairo', sans-serif;
font-size: 11px; font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 8px;
}
.sib-price-row {
display: flex; align-items: baseline; gap: 6px;
margin-top: 6px;
}
.sib-price-row i { color: var(--text-3); font-size: 11px; }
.sib-price-val {
font-family: 'Cairo', 'Space Grotesk', sans-serif;
font-size: 19px; font-weight: 800;
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.sib-price-unit { font-size: 11px; color: var(--text-3); }
/* Sections */
.sib-section { margin-top: 22px; }
.sib-section-head {
font-family: 'Cairo', sans-serif;
font-size: 15px; font-weight: 700;
color: var(--text);
margin: 0 0 12px;
display: inline-flex; align-items: center; gap: 8px;
}
.sib-section-head i { color: var(--accent-1); }
/* Per-TF tile grid */
.sib-tf-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
.sib-tf-tile {
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
background: var(--card);
position: relative;
overflow: hidden;
}
.sib-tf-tile::before {
content: '';
position: absolute;
top: 0; inset-inline-start: 0;
width: 3px; height: 100%;
}
.sib-tf-bullish::before { background: var(--green); }
.sib-tf-bearish::before { background: var(--red); }
.sib-tf-neutral::before { background: var(--text-3); }
.sib-tf-label {
font-family: 'Cairo', sans-serif;
font-size: 14px; font-weight: 700;
color: var(--text);
}
.sib-tf-horizon { font-size: 11px; color: var(--text-3); margin-bottom: 8px; }
.sib-tf-direction {
font-size: 12px;
display: inline-flex; align-items: center; gap: 5px;
margin-bottom: 4px;
font-weight: 600;
}
.sib-tf-bullish .sib-tf-direction { color: var(--green); }
.sib-tf-bearish .sib-tf-direction { color: var(--red); }
.sib-tf-neutral .sib-tf-direction { color: var(--text-2); }
.sib-tf-score {
font-family: 'Cairo', 'Space Grotesk', sans-serif;
font-size: 22px; font-weight: 800;
color: var(--text);
letter-spacing: -0.02em;
line-height: 1;
}
.sib-tf-score-out {
font-size: 11px; font-weight: 600;
color: var(--text-3);
margin-inline-start: 2px;
}
.sib-tf-conf { font-size: 11px; color: var(--text-3); margin-top: 6px; }
/* Tally row */
.sib-tally {
display: flex; flex-wrap: wrap; gap: 16px;
margin-top: 12px;
font-size: 12px;
color: var(--text-2);
}
.sib-tally-item { display: inline-flex; align-items: center; gap: 5px; }
.sib-tally-bull { color: var(--green); }
.sib-tally-bear { color: var(--red); }
.sib-tally-neut { color: var(--text-3); }
.sib-tally-item strong { font-variant-numeric: tabular-nums; }
/* Why-list */
.sib-why-list { list-style: none; padding: 0; margin: 0; }
.sib-why-list li {
font-family: 'Cairo', sans-serif;
font-size: 13.5px;
color: var(--text);
line-height: 1.6;
padding: 8px 0;
border-top: 1px dashed var(--border-soft);
display: flex; align-items: flex-start; gap: 10px;
}
.sib-why-list li:first-child { border-top: none; padding-top: 0; }
.sib-why-list li i { flex-shrink: 0; margin-top: 4px; }
/* When-this-changes block */
.sib-change-text {
font-family: 'Cairo', sans-serif;
font-size: 13.5px;
color: var(--text-2);
line-height: 1.7;
margin: 0;
padding: 12px 14px;
background: var(--bg-alt);
border: 1px solid var(--border-soft);
border-radius: 8px;
}
/* Crosslink */
.sib-crosslink { margin-top: 22px; display: flex; justify-content: center; }
.sib-crosslink-btn {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Cairo', sans-serif;
font-size: 13px; font-weight: 700;
color: #36508b;
background: rgba(54, 80, 139, 0.08);
border: 1px solid rgba(54, 80, 139, 0.20);
padding: 10px 18px;
border-radius: 999px;
text-decoration: none;
transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.sib-crosslink-btn:hover {
background: #36508b;
color: #fff;
border-color: #36508b;
text-decoration: none;
}
.sib-crosslink-btn i { font-size: 11px; }
/* Disclaimer */
.sib-disclaimer {
margin-top: 18px;
font-size: 11px;
color: var(--text-3);
text-align: center;
line-height: 1.55;
}
.sib-disclaimer i { margin-inline-end: 4px; }
/* Mobile */
@media (max-width: 720px) {
.sib-hero-question { font-size: 24px; }
.sib-answer-badge { font-size: 17px; padding: 10px 18px; }
.sib-card { padding: 18px 16px 16px; }
.sib-price-val { font-size: 17px; }
}
/* ── END should-i-buy / should-i-sell ──────────────────────────── */
/* ──────────────────────────────────────────────────────────────────
END
────────────────────────────────────────────────────────────────── */