/* ──────────────────────────────────────────────────────────────────
DahabPro — 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: #dc2626; /* red-600 */
--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 {
color: var(--gold-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; }
@keyframes tickerScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ──────────────────────────────────────────────────────────────────
HERO
────────────────────────────────────────────────────────────────── */
.hero {
background:
radial-gradient(circle at 15% 20%, rgba(54,80,139,0.10), transparent 50%),
radial-gradient(circle at 85% 80%, rgba(15,23,42,0.04), transparent 50%),
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; }
/* ──────────────────────────────────────────────────────────────────
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: 48px;
height: 3px;
background: #d39c00;
border-radius: 3px;
}
.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 {
background: var(--bg-alt);
color: var(--text-2);
/* Bumped from 11 → 14 so vendor names ("جولد ايرا", "سليمة جولد", …)
and column labels ("المنتج", "الوزن", "العيار") are legible without
squinting. Letter-spacing dialled back from 1.2 → 0.5 — at the new
size the wider tracking would have looked over-styled and tends to
break Arabic ligatures. text-transform:uppercase stays (no-op for
Arabic glyphs but keeps the English columns crisp). */
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.price-table thead th { border: none; border-bottom: 1px solid var(--border); padding: 14px 16px; }
.price-table tbody td {
padding: 16px;
vertical-align: middle;
border-top: 1px solid var(--border);
color: var(--text);
font-family: 'Cairo', sans-serif;
font-feature-settings: 'tnum';
}
.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-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: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-tint) 100%);
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: radial-gradient(circle at 30% 30%, rgba(54,80,139,0.12), transparent 60%);
}
.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: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-tint) 100%); color: var(--accent-2); }
.news-thumb[class*="type-"]::after { background: radial-gradient(circle at 30% 30%, rgba(54,80,139,0.12), transparent 60%); }
/* ──────────────────────────────────────────────────────────────────
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; }
/* ──────────────────────────────────────────────────────────────────
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:
radial-gradient(circle at 15% 50%, rgba(54,80,139,0.12), transparent 50%),
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:
radial-gradient(circle at 80% 20%, rgba(54,80,139,0.10), transparent 60%),
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:
linear-gradient(135deg, var(--card) 0%, var(--bg-alt) 100%),
radial-gradient(circle at 80% 20%, rgba(54,80,139,0.10), transparent 55%);
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: linear-gradient(90deg,
rgba(220,38,38,0.35) 0%,
rgba(245,158,11,0.35) 50%,
rgba(22,163,74,0.35) 100%);
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(220,38,38,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 / R-R row inside each TF column. */
.tf-col-mini-metrics {
display: grid;
grid-template-columns: 1fr 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(220, 38, 38, 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);
}
/* ──────────────────────────────────────────────────────────────────
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:
radial-gradient(circle at 8% 30%, rgba(202, 138, 4, 0.10), transparent 55%),
radial-gradient(circle at 92% 70%, rgba(54, 80, 139, 0.08), transparent 55%),
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: 14px 18px;
background: #f5f5f4;
border-bottom: 1px solid var(--border);
font-family: 'Space Grotesk', sans-serif;
/* Bumped from 14 → 20 so the "Global" / "Local" label reads as a
real column heading, not a faint caption. The subtitle (small)
scales with it via the 70% override below. */
font-size: 20px;
letter-spacing: 0.3px;
display: flex;
align-items: center;
}
.today-panel-col-head i { color: var(--accent-1); font-size: 22px; }
.today-panel-col-head strong { color: var(--gold-3); font-weight: 700; }
/* Subtitle (USD/OUNCE, EGP/GRAM). 14px keeps it visibly smaller than
the 20px label but readable — used to be 11px (hard-to-read caption). */
.today-panel-col-head small { font-size: 14px; font-weight: 500; }
.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: linear-gradient(90deg, rgba(8,145,178,0.05) 0%, var(--card) 70%);
}
.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: linear-gradient(90deg, rgba(54,80,139,0.04) 0%, var(--card) 70%);
}
.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: linear-gradient(90deg, var(--accent-1), var(--accent-2));
}
.conf-bar.conf-low > span { background: linear-gradient(90deg, #dc2626, #f59e0b); }
.conf-bar.conf-medium > span { background: linear-gradient(90deg, #f59e0b, var(--accent-1)); }
.conf-bar.conf-high > span { background: linear-gradient(90deg, var(--accent-1), var(--green)); }
/* 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 {
padding: 10px 18px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--accent-2);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.panel-table tbody tr.panel-group:first-child td { border-top: none; }
.panel-table .panel-label {
padding: 13px 18px;
color: var(--text-2);
font-weight: 500;
font-size: 13px;
width: 45%;
border: none;
vertical-align: middle;
}
.panel-table .panel-value {
padding: 13px 18px;
color: var(--text);
font-family: 'Cairo', sans-serif;
text-align: right;
border: none;
vertical-align: middle;
font-size: 14px;
}
.panel-table .panel-value strong { font-weight: 600; }
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-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(220,38,38,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 `