/* * BDP CUSTOM — Black Diamond Pro design override layer * Loads after style.css; do NOT edit style.css directly. * All future BDP-specific CSS goes here. * * Sections: * 1. CSS Variables (light + dark) * 2. Base & Typography * 3. Primary Button * 4. Secondary / Outline Buttons * 5. Cards * 6. Tables * 7. Form Inputs * 8. Sidebar * 9. Page Titles & Header * 10. Status Badges * 11. Spot Price Ticker * 12. Modals * 13. Login / Auth Pages */ /* ── 1. CSS Variables — master design token system ─────────────────────────── * Single source of truth for app colors. * New components: use --bdp-* tokens, NOT hex codes. * Bootstrap utilities (bg-success, etc.) pull from --bs-* which alias --bdp-*. * Dark mode is automatic when [data-theme-version="dark"] is on . * ─────────────────────────────────────────────────────────────────────────── */ :root { /* Backgrounds */ --bdp-bg: #faf8f3; --bdp-bg-card: #ffffff; --bdp-bg-elevated: #ffffff; --bdp-bg-sunken: #f1ede0; /* Text */ --bdp-text: #1a1612; --bdp-text-muted: #6b6358; --bdp-text-faint: #9e9382; --bdp-text-inverse: #faf8f3; /* Borders */ --bdp-border-subtle: #e8e4d6; --bdp-border-strong: #c9c4b3; /* Brand accent — gold */ --bdp-gold: #a08534; --bdp-gold-rich: #7a651f; --bdp-gold-tint: rgba(160, 133, 52, 0.08); --bdp-glow: rgba(160, 133, 52, 0.40); --bdp-glow-soft: rgba(160, 133, 52, 0.15); /* Metal colors (Live Spots, inventory) */ --bdp-metal-gold: #a08534; --bdp-metal-silver: #8a8a8a; --bdp-metal-platinum: #6b7d8a; --bdp-metal-palladium: #c5b88a; /* Semantic status colors */ --bdp-success: #3d7a3d; --bdp-success-bg: #e8f1e8; --bdp-success-border: #b8d4b8; --bdp-success-text: #1f4d1f; --bdp-warning: #c4751a; --bdp-warning-bg: #faf0e0; --bdp-warning-border: #e8c896; --bdp-warning-text: #6b3f0e; --bdp-info: #5c7d8a; --bdp-info-bg: #e8eef0; --bdp-info-border: #b8c8d0; --bdp-info-text: #2d4550; --bdp-danger: #c93838; --bdp-danger-bg: #f8e4e4; --bdp-danger-border: #e0a8a8; --bdp-danger-text: #6b1f1f; /* Legacy aliases — keep for existing components */ --bdp-status-melt: var(--bdp-warning); --bdp-status-danger: var(--bdp-danger); --bdp-status-success: var(--bdp-success); /* Shadows */ --bdp-shadow: rgba(26, 22, 18, 0.10); --bdp-shadow-strong: rgba(26, 22, 18, 0.20); /* Bootstrap token overrides — maps Bootstrap utilities to BDP palette. Any element using bg-success, text-warning, btn-info, etc. will pull from the master palette automatically. */ --bs-primary: var(--bdp-gold); --bs-secondary: var(--bdp-text-muted); --bs-success: var(--bdp-success); --bs-info: var(--bdp-info); --bs-warning: var(--bdp-warning); --bs-danger: var(--bdp-danger); --bs-light: var(--bdp-bg-sunken); --bs-dark: var(--bdp-text); /* Bootstrap RGB variants (used by alpha-channel utilities like bg-success-subtle) */ --bs-primary-rgb: 160, 133, 52; --bs-secondary-rgb: 107, 99, 88; --bs-success-rgb: 61, 122, 61; --bs-info-rgb: 92, 125, 138; --bs-warning-rgb: 196, 117, 26; --bs-danger-rgb: 201, 56, 56; --bs-light-rgb: 241, 237, 224; --bs-dark-rgb: 26, 22, 18; --bs-body-bg: var(--bdp-bg); --bs-body-color: var(--bdp-text); --bs-border-color: var(--bdp-border-subtle); --bs-success-bg-subtle: var(--bdp-success-bg); --bs-warning-bg-subtle: var(--bdp-warning-bg); --bs-info-bg-subtle: var(--bdp-info-bg); --bs-danger-bg-subtle: var(--bdp-danger-bg); --bs-success-text-emphasis: var(--bdp-success-text); --bs-warning-text-emphasis: var(--bdp-warning-text); --bs-info-text-emphasis: var(--bdp-info-text); --bs-danger-text-emphasis: var(--bdp-danger-text); } [data-theme-version="dark"] { /* Backgrounds */ --bdp-bg: #0a0a0c; --bdp-bg-card: #14141a; --bdp-bg-elevated: #1a1a22; --bdp-bg-sunken: #050507; /* Text */ --bdp-text: #f5f5f0; --bdp-text-muted: #a8a8a0; --bdp-text-faint: #6a6a62; --bdp-text-inverse: #0a0a0c; /* Borders */ --bdp-border-subtle: #2a2a30; --bdp-border-strong: #4a4a52; /* Brand accent — brighter gold for dark backgrounds */ --bdp-gold: #c4a553; --bdp-gold-rich: #a08534; --bdp-gold-tint: rgba(196, 165, 83, 0.10); --bdp-glow: rgba(196, 165, 83, 0.35); --bdp-glow-soft: rgba(196, 165, 83, 0.15); /* Metal colors — lifted for dark mode */ --bdp-metal-gold: #c4a553; --bdp-metal-silver: #b8b8b8; --bdp-metal-platinum: #8fa3b3; --bdp-metal-palladium: #d8c89a; /* Status colors — muted for dark mode */ --bdp-success: #4a8b66; --bdp-success-bg: rgba(74, 139, 102, 0.15); --bdp-success-border: rgba(74, 139, 102, 0.35); --bdp-success-text: #8edaa6; --bdp-warning: #d49545; --bdp-warning-bg: rgba(212, 149, 69, 0.15); --bdp-warning-border: rgba(212, 149, 69, 0.35); --bdp-warning-text: #e8b878; --bdp-info: #7a9aa8; --bdp-info-bg: rgba(122, 154, 168, 0.15); --bdp-info-border: rgba(122, 154, 168, 0.35); --bdp-info-text: #b0c4cc; --bdp-danger: #d05858; --bdp-danger-bg: rgba(208, 88, 88, 0.15); --bdp-danger-border: rgba(208, 88, 88, 0.35); --bdp-danger-text: #e89999; /* Shadows — heavier lift for dark mode */ --bdp-shadow: rgba(0, 0, 0, 0.40); --bdp-shadow-strong: rgba(0, 0, 0, 0.60); /* Bootstrap RGB overrides for dark mode */ --bs-primary-rgb: 196, 165, 83; --bs-success-rgb: 74, 139, 102; --bs-warning-rgb: 212, 149, 69; --bs-info-rgb: 122, 154, 168; --bs-danger-rgb: 208, 88, 88; --bs-secondary-rgb: 168, 168, 160; --bs-light-rgb: 5, 5, 7; --bs-dark-rgb: 245, 245, 240; } /* ── 1b. Bootstrap Utility Overrides ──────────────────────────────────────── */ /* Bootstrap's bg-* utilities may compile to hardcoded hex from Sass. These !important rules ensure the brand palette wins in both modes. */ .bg-success { background-color: var(--bdp-success) !important; color: #ffffff !important; } .bg-warning { background-color: var(--bdp-warning) !important; color: #ffffff !important; } .bg-info { background-color: var(--bdp-info) !important; color: #ffffff !important; } .bg-danger { background-color: var(--bdp-danger) !important; color: #ffffff !important; } .bg-primary { background-color: var(--bdp-gold) !important; color: #ffffff !important; } .text-success { color: var(--bdp-success) !important; } .text-warning { color: var(--bdp-warning) !important; } .text-info { color: var(--bdp-info) !important; } .text-danger { color: var(--bdp-danger) !important; } .text-primary { color: var(--bdp-gold) !important; } .text-muted { color: var(--bdp-text-muted) !important; } .border-success { border-color: var(--bdp-success) !important; } .border-warning { border-color: var(--bdp-warning) !important; } .border-info { border-color: var(--bdp-info) !important; } .border-danger { border-color: var(--bdp-danger) !important; } .border-primary { border-color: var(--bdp-gold) !important; } /* ── 2. Base & Typography ─────────────────────────────────────────────────── */ body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 400; color: var(--bdp-text); background-color: var(--bdp-bg); } h1, h2, h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; font-weight: 500; color: var(--bdp-gold); } h4, h5, h6 { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 600; color: var(--bdp-text); } /* Tabular numbers for data-heavy cells */ td, th, .font-monospace, .fw-monospace { font-feature-settings: 'tnum' 1, 'lnum' 1; } /* ── 3. Primary Button ────────────────────────────────────────────────────── */ .btn-primary { background-color: var(--bdp-gold); border-color: var(--bdp-gold); color: var(--bdp-bg); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; font-family: 'Inter', system-ui, sans-serif; font-size: 0.8125rem; border: 1px solid var(--bdp-glow-soft); box-shadow: 0 0 0 1px var(--bdp-glow-soft), 0 4px 12px var(--bdp-shadow); transition: box-shadow 0.2s ease, transform 0.1s ease, background-color 0.15s ease; } .btn-primary:hover, .btn-primary:focus { background-color: var(--bdp-gold-rich); border-color: var(--bdp-gold); color: var(--bdp-bg); box-shadow: 0 0 0 1px var(--bdp-glow), 0 0 24px var(--bdp-glow), 0 6px 16px var(--bdp-shadow); } .btn-primary:active { background-color: var(--bdp-gold-rich); transform: scale(0.98); box-shadow: 0 0 0 1px var(--bdp-glow-soft), 0 2px 6px var(--bdp-shadow); } .btn-primary:disabled, .btn-primary.disabled { background-color: var(--bdp-gold); border-color: var(--bdp-gold); opacity: 0.5; box-shadow: none; } /* Warning button maps to melt amber — keep functional color, add glow */ .btn-warning { background-color: var(--bdp-status-melt); border-color: var(--bdp-status-melt); color: #000; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; box-shadow: 0 2px 8px var(--bdp-shadow); transition: box-shadow 0.2s ease, transform 0.1s ease; } .btn-warning:hover, .btn-warning:focus { background-color: var(--bdp-status-melt); box-shadow: 0 0 18px rgba(226, 135, 28, 0.45), 0 4px 12px var(--bdp-shadow); } .btn-warning:active { transform: scale(0.98); } /* ── 4. Secondary / Outline Buttons ──────────────────────────────────────── */ .btn-secondary { background-color: transparent; border: 1px solid var(--bdp-gold); color: var(--bdp-gold); font-family: 'Inter', system-ui, sans-serif; font-weight: 500; transition: background-color 0.15s ease, box-shadow 0.2s ease; } .btn-secondary:hover, .btn-secondary:focus { background-color: var(--bdp-gold-tint); border-color: var(--bdp-gold); color: var(--bdp-gold); box-shadow: 0 0 0 1px var(--bdp-glow-soft); } .btn-outline-primary, .btn-outline-secondary { border-color: var(--bdp-border-strong); color: var(--bdp-text); font-family: 'Inter', system-ui, sans-serif; font-weight: 500; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease; } .btn-outline-primary:hover, .btn-outline-secondary:hover { background-color: var(--bdp-gold-tint); border-color: var(--bdp-gold); color: var(--bdp-gold); box-shadow: 0 0 0 1px var(--bdp-glow-soft); } /* ── 5. Cards ─────────────────────────────────────────────────────────────── */ .card { background-color: var(--bdp-bg-card); border: 1px solid var(--bdp-border-subtle); border-radius: 6px; box-shadow: 0 2px 8px var(--bdp-shadow); } [data-theme-version="dark"] .card { background: linear-gradient(180deg, #16161a 0%, #18181c 100%); } .card-header { background-color: transparent; border-bottom: 1px solid var(--bdp-border-subtle); padding: 0.875rem 1.25rem; } .card-header h4, .card-header h5, .card-header h6, .card-header .card-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--bdp-gold); letter-spacing: 0.01em; } [data-theme-version="dark"] .card-header { background-color: rgba(255, 255, 255, 0.02); } /* ── 6. Tables ────────────────────────────────────────────────────────────── */ .table { border-color: var(--bdp-border-subtle); color: var(--bdp-text); } .table > thead > tr > th { background-color: var(--bdp-gold-tint); color: var(--bdp-gold); font-family: 'Inter', system-ui, sans-serif; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--bdp-border-subtle); } .table > tbody > tr > td { border-color: var(--bdp-border-subtle); color: var(--bdp-text); } .table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th { background-color: var(--bdp-gold-tint); } /* Preserve specific table-light / table-dark within BDP context */ [data-theme-version="dark"] .table-light { background-color: var(--bdp-gold-tint); --bs-table-color: var(--bdp-text); } /* ── 7. Form Inputs ───────────────────────────────────────────────────────── */ .form-control, .form-select, .form-control-bdp { background-color: var(--bdp-bg-card); border: 1px solid var(--bdp-border-strong); color: var(--bdp-text); font-family: 'Inter', system-ui, sans-serif; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control:focus, .form-select:focus, .form-control-bdp:focus { background-color: var(--bdp-bg-card); border-color: var(--bdp-gold); color: var(--bdp-text); box-shadow: 0 0 0 3px var(--bdp-gold-tint); outline: none; } .form-control::placeholder { color: var(--bdp-text-muted); opacity: 0.7; } .form-label { font-family: 'Inter', system-ui, sans-serif; font-size: 0.8125rem; font-weight: 500; color: var(--bdp-text-muted); letter-spacing: 0.02em; } .input-group-text { background-color: var(--bdp-bg-elevated); border-color: var(--bdp-border-strong); color: var(--bdp-text-muted); } /* ── 8. Sidebar ───────────────────────────────────────────────────────────── */ .dlabnav { background-color: #0e0e10 !important; } [data-theme-version="light"] .dlabnav, html:not([data-theme-version="dark"]) .dlabnav { background-color: #fafafa !important; border-right: 1px solid var(--bdp-border-subtle); } /* Nav links */ .dlabnav .metismenu a { font-family: 'Inter', system-ui, sans-serif; font-size: 0.875rem; font-weight: 400; color: var(--bdp-text-muted); transition: color 0.15s ease, background-color 0.15s ease, padding-left 0.15s ease; border-radius: 4px; } .dlabnav .metismenu a:hover { background-color: var(--bdp-gold-tint); color: var(--bdp-gold); } /* Active item — gold left bar */ .dlabnav .metismenu li.mm-active > a, .dlabnav .metismenu li.mm-active > a:hover { background-color: var(--bdp-gold-tint); color: var(--bdp-gold); font-weight: 500; border-left: 3px solid var(--bdp-gold); } /* Nav icons */ .dlabnav .metismenu .ai-icon svg path, .dlabnav .metismenu .ai-icon i { color: var(--bdp-text-muted); transition: color 0.15s ease; } .dlabnav .metismenu a:hover .ai-icon svg path, .dlabnav .metismenu a:hover .ai-icon i, .dlabnav .metismenu li.mm-active > a .ai-icon svg path, .dlabnav .metismenu li.mm-active > a .ai-icon i { color: var(--bdp-gold); } /* Submenu items */ .dlabnav .metismenu ul a { font-size: 0.8125rem; padding-left: 3rem; } /* ── 9. Page Titles & Header ──────────────────────────────────────────────── */ /* Diagnostic note: .page-titles is a plain .row div containing
    . It is NOT wrapped in .alert-light. The .alert-light used for spot-price tickers is a separate element inside content areas — treated below. */ .page-titles { background-color: #2e2e42; border-bottom: 1px solid rgba(255, 255, 255, 0.10); padding: 0.5rem 0; margin-bottom: 1.25rem; } /* Light mode variant — warmer, slightly less dramatic */ html:not([data-theme-version="dark"]) .page-titles { background-color: #f0ede6; border-bottom: 1px solid var(--bdp-border-subtle); } .page-titles h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.375rem; font-weight: 600; color: var(--bdp-gold); } /* Breadcrumb — left padding so text isn't flush against the edge */ .page-titles .breadcrumb { padding-left: 1.5rem; margin-bottom: 0; } .page-titles .breadcrumb-item, .page-titles .breadcrumb-item a { font-family: 'Inter', system-ui, sans-serif; font-size: 0.8125rem; color: #a8a8a3; /* explicit — avoids cascade fight with Innap's breadcrumb color */ text-decoration: none; } .page-titles .breadcrumb-item a:hover { color: var(--bdp-gold); } /* Active (current page) breadcrumb item — gold so it's readable and on-brand */ .page-titles .breadcrumb-item.active, .page-titles .breadcrumb-item.active a { color: var(--bdp-gold); font-weight: 500; } /* Breadcrumb separator */ .page-titles .breadcrumb-item + .breadcrumb-item::before { color: #5a5a6a; } /* Light mode breadcrumb text */ html:not([data-theme-version="dark"]) .page-titles .breadcrumb-item, html:not([data-theme-version="dark"]) .page-titles .breadcrumb-item a { color: var(--bdp-text-muted); } html:not([data-theme-version="dark"]) .page-titles .breadcrumb-item.active, html:not([data-theme-version="dark"]) .page-titles .breadcrumb-item.active a { color: var(--bdp-gold); } /* ── .alert-light — spot price ticker / info bar treatment ────────────────── .alert-light is NOT used on .page-titles — it's used for spot-price tickers (e.g. appraisals/index.php) and inline info boxes. Give it the same dark-bar treatment so tickers match the melt page's bg-dark ticker style. */ [data-theme-version="dark"] .alert-light { background-color: #2e2e42; border-color: rgba(255, 255, 255, 0.10); color: #a8a8a3; } /* Light mode: keep Bootstrap's default off-white — dark #2e2e42 would look out of place */ html:not([data-theme-version="dark"]) .alert-light { background-color: #f8f6f1; border-color: var(--bdp-border-subtle); color: var(--bdp-text-muted); } /* Top header bar */ .header { background-color: var(--bdp-bg-card); border-bottom: 1px solid var(--bdp-border-subtle); box-shadow: 0 1px 4px var(--bdp-shadow); } .header .dashboard_bar { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 500; color: var(--bdp-text); } /* Main content body background */ .content-body { background-color: var(--bdp-bg); } /* ── 10. Status Badges ────────────────────────────────────────────────────── */ /* Base badge polish — applies to all badge-status-* classes */ [class*="badge-status-"] { font-family: 'Inter', system-ui, sans-serif; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.275em 0.6em; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 1px 2px var(--bdp-shadow); } .badge-status-intake { background-color: #6c757d; color: #fff; } .badge-status-appraised { background-color: #0dcaf0; color: #000; } .badge-status-purchased { background-color: #0d6efd; color: #fff; } .badge-status-available { background-color: #0d6efd; color: #fff; } .badge-status-melt { background-color: var(--bdp-status-melt); color: #000; } .badge-status-melted { background-color: #495057; color: #fff; } .badge-status-wholesale { background-color: #6f42c1; color: #fff; } .badge-status-retail { background-color: #198754; color: #fff; } .badge-status-consign { background-color: #20c997; color: #000; } .badge-status-hold { background-color: #ffc107; color: #000; border-color: rgba(0,0,0,0.10); } .badge-status-returned { background-color: #fd7e14; color: #fff; } .badge-status-sold { background-color: #198754; color: #fff; } .badge-status-lost { background-color: #dc3545; color: #fff; } /* ── 11. Spot Price Ticker ────────────────────────────────────────────────── */ .bdp-spot-ticker { background-color: var(--bdp-bg-elevated); border: 1px solid var(--bdp-border-subtle); border-radius: 6px; padding: 0.75rem; color: var(--bdp-text); } .bdp-spot-ticker .row.g-1 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; } .bdp-spot-label { font-size: 0.75rem; color: var(--bdp-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .bdp-spot-value { font-weight: 600; font-size: 1rem; font-family: 'Inter', sans-serif; font-feature-settings: 'tnum' 1, 'lnum' 1; } .bdp-spot-gold { color: var(--bdp-gold); } .bdp-spot-silver { color: var(--bdp-text); } .bdp-spot-platinum { color: #6cc4d8; } .bdp-spot-palladium { color: #9c8fd9; } html:not([data-theme-version="dark"]) .bdp-spot-platinum { color: #4a8fa0; } html:not([data-theme-version="dark"]) .bdp-spot-palladium { color: #6c5fa6; } /* Color-coded metal blocks */ .bdp-spot-block { padding: 0.625rem 0.75rem; border-radius: 6px; border: 1px solid var(--bdp-border-subtle); text-align: center; transition: background-color 0.2s ease, border-color 0.2s ease; } [data-theme-version="dark"] .bdp-spot-block-gold { background-color: rgba(201,169, 97,0.10); border-color: rgba(201,169, 97,0.25); } [data-theme-version="dark"] .bdp-spot-block-silver { background-color: rgba(192,192,192,0.08); border-color: rgba(192,192,192,0.20); } [data-theme-version="dark"] .bdp-spot-block-platinum { background-color: rgba(108,196,216,0.08); border-color: rgba(108,196,216,0.20); } [data-theme-version="dark"] .bdp-spot-block-palladium { background-color: rgba(156,143,217,0.08); border-color: rgba(156,143,217,0.20); } html:not([data-theme-version="dark"]) .bdp-spot-block-gold { background-color: rgba(160,133, 52,0.08); border-color: rgba(160,133, 52,0.30); } html:not([data-theme-version="dark"]) .bdp-spot-block-silver { background-color: rgba(120,120,120,0.06); border-color: rgba(120,120,120,0.25); } html:not([data-theme-version="dark"]) .bdp-spot-block-platinum { background-color: rgba( 74,143,160,0.08); border-color: rgba( 74,143,160,0.25); } html:not([data-theme-version="dark"]) .bdp-spot-block-palladium { background-color: rgba(108, 95,166,0.08); border-color: rgba(108, 95,166,0.25); } .bdp-spot-block:hover { border-color: var(--bdp-border-strong); } /* ── 11b. Calculated-value inputs & info notices ──────────────────────────── */ .bdp-calculated-value { background-color: var(--bdp-bg-elevated) !important; border-color: var(--bdp-border-subtle) !important; color: var(--bdp-gold) !important; } .bdp-info-notice { background-color: var(--bdp-bg-elevated); border: 1px solid var(--bdp-gold); border-radius: 6px; padding: 0.75rem 1rem; color: var(--bdp-text); } .bdp-info-notice strong { color: var(--bdp-gold); } /* ── 12. Modals ───────────────────────────────────────────────────────────── */ .modal-content { background-color: var(--bdp-bg-card); border: 1px solid var(--bdp-border-subtle); border-radius: 8px; box-shadow: 0 20px 60px var(--bdp-shadow); } .modal-header { border-bottom: 1px solid var(--bdp-gold); padding: 1rem 1.25rem 0.875rem; } .modal-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--bdp-gold); font-size: 1.25rem; } .modal-body { background-color: var(--bdp-bg-card); color: var(--bdp-text); } .modal-footer { border-top: 1px solid var(--bdp-border-subtle); background-color: transparent; } /* ── 13. Auth Pages (login, forgot-password, reset-password) ─────────────── */ /* Page background */ .authincation { display: flex; min-height: 100vh; flex-direction: column; justify-content: center; height: auto !important; background: radial-gradient( ellipse at center, #1a1a1e 0%, #0a0a0c 60%, #050507 100% ) !important; position: relative; overflow: hidden; } .authincation::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(135deg, transparent 49%, rgba(255, 255, 255, 0.012) 49%, rgba(255, 255, 255, 0.012) 51%, transparent 51%), linear-gradient(45deg, transparent 49%, rgba(255, 255, 255, 0.012) 49%, rgba(255, 255, 255, 0.012) 51%, transparent 51%); background-size: 80px 80px; pointer-events: none; z-index: 0; } .authincation > .container { position: relative; z-index: 1; } /* Auth card */ .auth-form { background-color: #0f0f12; border: 1px solid #2a2a30; border-radius: 2px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.015); padding: 2.5rem 2rem 2rem; position: relative; } .auth-form::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent 0%, #6a6a74 50%, transparent 100%); } /* Logo block */ .bdp-auth-logo { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #1f1f24; } .bdp-auth-logo svg { flex-shrink: 0; } .bdp-auth-wordmark { font-family: Georgia, 'Times New Roman', serif; font-size: 1rem; font-weight: 400; letter-spacing: 2px; color: #f5f5f0; text-transform: uppercase; line-height: 1.2; } .bdp-auth-tagline { font-family: Georgia, 'Times New Roman', serif; font-size: 0.7rem; font-style: italic; letter-spacing: 2px; color: #888880; margin-top: 4px; line-height: 1.2; } /* Form labels */ .auth-form .form-group label, .auth-form label { color: #888880; margin-bottom: 0.5rem; } .auth-form label strong { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #888880; } /* Inputs */ .auth-form .form-control { background-color: #050507; border: 1px solid #2a2a30; color: #f5f5f0; border-radius: 2px; padding: 0.75rem 1rem; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 0.95rem; transition: border-color 0.2s ease, background-color 0.2s ease; height: auto; } .auth-form .form-control:hover { border-color: #4a4a52; } .auth-form .form-control:focus { background-color: #050507; border-color: #f5f5f0; box-shadow: none; color: #f5f5f0; outline: none; } /* ── Sidebar user section ───────────────────────────────────────────────────── */ .bdp-sidebar-user { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; width: 100%; padding: 0.75rem 0 0.5rem; border-top: 1px solid rgba(255,255,255,0.07); gap: 0.25rem; } .bdp-sidebar-user-link { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; gap: 0.5rem; width: 80%; max-width: 280px; min-height: 44px; padding: 0.5rem 1.25rem; font-size: 0.875rem; color: rgba(255,255,255,0.65); text-decoration: none; border-radius: 4px; text-align: center; transition: color 0.15s, background 0.15s; -webkit-text-size-adjust: none; } .bdp-sidebar-user-link:hover { color: #fff; background: rgba(255,255,255,0.06); text-decoration: none; } .bdp-sidebar-user-link i { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 1.25rem; height: 1.25rem; font-size: 1rem; line-height: 1; -webkit-flex-shrink: 0; flex-shrink: 0; } .bdp-sidebar-logout { color: rgba(220,90,90,0.8) !important; } .bdp-sidebar-logout:hover { color: #ef8080 !important; background: rgba(220,90,90,0.08) !important; } /* ── Metal Price History report ────────────────────────────────────────────── */ .bdp-metal-tabs .nav-link { color: #888880; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; border-radius: 4px 4px 0 0; padding: 0.625rem 1.125rem; } .bdp-metal-tabs .nav-link.active { font-weight: 600; color: #0a0a0c; border-bottom-color: transparent; } [data-theme-version="dark"] .bdp-metal-tabs .nav-link { color: rgba(196,201,212,0.55); } [data-theme-version="dark"] .bdp-metal-tabs .nav-link.active{ color: #e8eaf0; } .bdp-price-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.875rem; } .bdp-stat-card { background: #faf9f5; border: 1px solid #e8e4d6; border-left: 3px solid var(--bdp-metal, #888880); border-radius: 2px; padding: 0.875rem 1rem; } [data-theme-version="dark"] .bdp-stat-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); border-left-color: var(--bdp-metal, #888880); } .bdp-stat-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; color: #888880; margin-bottom: 0.4rem; } .bdp-stat-value { font-family: Georgia, 'Times New Roman', serif; font-size: 1.25rem; color: var(--bdp-metal, #0a0a0c); line-height: 1.2; } .bdp-change-up { color: #2e7d3a !important; } .bdp-change-down { color: #a83232 !important; } .bdp-chart-wrap { min-height: 360px; } .auth-form .form-control::placeholder { color: #4a4a52; opacity: 1; } /* Suppress Chromium's yellow autofill background */ .auth-form .form-control:-webkit-autofill, .auth-form .form-control:-webkit-autofill:hover, .auth-form .form-control:-webkit-autofill:focus { -webkit-text-fill-color: #f5f5f0; -webkit-box-shadow: 0 0 0 1000px #050507 inset; transition: background-color 9999s ease-in-out 0s; caret-color: #f5f5f0; } /* Submit button */ .auth-form .btn-primary, .auth-form .btn-primary.btn-block { background-color: #f5f5f0; border: 1px solid #f5f5f0; color: #0a0a0c; border-radius: 2px; padding: 0.85rem 1rem; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; margin-top: 0.5rem; } .auth-form .btn-primary:hover, .auth-form .btn-primary:focus, .auth-form .btn-primary:active { background-color: transparent !important; color: #f5f5f0 !important; border-color: #f5f5f0 !important; box-shadow: none !important; } .auth-form .btn-primary:disabled { background-color: #2a2a30; border-color: #2a2a30; color: #888880; cursor: not-allowed; } /* Forgot password / secondary links */ .authincation .text-center.mt-3 .text-muted, .authincation .text-center .text-muted { color: #888880 !important; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 0.75rem; letter-spacing: 1.5px; text-decoration: none; text-transform: uppercase; transition: color 0.2s ease; } .authincation .text-center .text-muted:hover { color: #f5f5f0 !important; text-decoration: none; } /* Cloudflare Turnstile wrapper (the widget itself is in an iframe and uses data-theme="dark" on the HTML element — see Step 3) */ .auth-form .cf-turnstile { display: flex; justify-content: center; margin: 0.25rem 0 0.5rem; } .auth-form .cf-turnstile > div { border-radius: 2px; overflow: hidden; } .auth-form .cf-turnstile:empty, .auth-form .cf-turnstile > div:empty { display: none; } /* Form group spacing */ .auth-form .form-group { margin-bottom: 1.25rem; } .auth-form .form-group:last-of-type { margin-bottom: 1.5rem; } /* Validation states */ .auth-form .form-control.is-invalid { border-color: #a85555 !important; background-image: none; } .auth-form .invalid-feedback, .auth-form .text-danger, .auth-form .alert-danger { color: #e89999 !important; background: rgba(107, 31, 31, 0.15); border: 1px solid rgba(168, 85, 85, 0.3); border-radius: 2px; padding: 0.6rem 0.85rem; font-family: system-ui, -apple-system, sans-serif; font-size: 0.825rem; margin-top: 0.5rem; } .auth-form .alert-success, .auth-form .text-success { color: #8edaa6 !important; background: rgba(26, 77, 46, 0.15); border: 1px solid rgba(74, 139, 102, 0.3); border-radius: 2px; padding: 0.6rem 0.85rem; font-family: system-ui, -apple-system, sans-serif; font-size: 0.825rem; } /* Mobile */ @media (max-width: 575.98px) { .auth-form { padding: 2rem 1.5rem 1.5rem; margin: 1rem; } .bdp-auth-logo { gap: 0.75rem; } .bdp-auth-wordmark { font-size: 0.9rem; letter-spacing: 1.5px; } .bdp-auth-tagline { font-size: 0.65rem; } .auth-form .btn-primary { letter-spacing: 2px; } }