/* ============================================================ TIES — Dark Theme: Mining Gold Edition Activated by: Palette: Deep obsidian + rich gold + dark gold accents ============================================================ */ [data-theme="dark"] { /* ── Core dark palette ────────────────────────────────── */ --white: #1a1610; --off-white: #201c16; --gray-50: #252018; --gray-100: #2d2820; --gray-200: #3d3830; --gray-400: #8a8070; --gray-600: #c8b898; --gray-800: #f0e6d0; /* ── Gold palette — richer, more saturated in dark ──── */ --gold: #c9a84c; --gold-light: #e2c060; --gold-bright:#f0d070; --gold-pale: #2d2510; --gold-dark: #8a6a1e; --gold-deep: #5a4410; /* ── Navy → deep obsidian in dark mode ─────────────── */ --navy: #e8d8b0; --navy-dark: #0d0b08; --navy-mid: #1e1a10; --navy-light: #2a2418; /* ── Gradients ──────────────────────────────────────── */ --grad-gold: linear-gradient(135deg, #e2c060 0%, #c9a84c 60%, #9a7a28 100%); --grad-navy: linear-gradient(135deg, #0d0b08 0%, #1e1a10 100%); --grad-hero: linear-gradient(160deg,rgba(8,6,2,0.96) 0%,rgba(20,16,6,0.85) 55%,rgba(180,130,30,0.25) 100%); --grad-shine: linear-gradient(105deg,transparent 40%,rgba(255,220,100,0.06) 50%,transparent 60%); /* ── Shadows ─────────────────────────────────────────── */ --sh-sm: 0 1px 4px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --sh-md: 0 4px 20px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35); --sh-lg: 0 12px 48px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4); --sh-xl: 0 24px 80px rgba(0,0,0,0.7); --sh-gold:0 8px 32px rgba(201,168,76,0.35); --sh-navy:0 8px 32px rgba(10,8,2,0.6); } /* ── Base body ───────────────────────────────────────────── */ [data-theme="dark"] body { color: var(--gray-800); background: #0f0d09; } /* ── Headings ────────────────────────────────────────────── */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #f0e6cc; } [data-theme="dark"] p { color: #b8a888; } /* ── TIES Badge ──────────────────────────────────────────── */ [data-theme="dark"] .ties-badge { background: #2a2010; border-color: rgba(201,168,76,0.4); color: var(--gold-light); } /* ══════════════════════════════════════════════════════════════ TOP INFO BAR ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .top-info { background: #080600; border-bottom: 1px solid rgba(201,168,76,0.12); } /* ══════════════════════════════════════════════════════════════ NAVBAR ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .nav-container { background: rgba(15, 12, 6, 0.97); border-bottom: 1px solid rgba(201,168,76,0.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-theme="dark"] .top-nav.scrolled .nav-container { background: rgba(10, 8, 3, 0.99); box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 1px 0 rgba(201,168,76,0.1); } [data-theme="dark"] .nav-list > li > a { color: #d8c898; } [data-theme="dark"] .nav-list > li > a:hover { color: var(--gold-bright); } [data-theme="dark"] .nav-social a { color: #9a8a6a; border-color: rgba(201,168,76,0.2); } [data-theme="dark"] .nav-social a:hover { background: var(--gold); color: #0d0b08; border-color: var(--gold); } /* ── DROPDOWN ─────────────────────────────────────────────── */ [data-theme="dark"] .dropdown { background: #100d06; border-top-color: var(--gold); box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,168,76,0.15); } [data-theme="dark"] .dropdown li a { color: #b8a878; } [data-theme="dark"] .dropdown li a:hover { background: #2a2010; color: var(--gold-bright); border-left-color: var(--gold); } [data-theme="dark"] .dropdown li a i { color: var(--gold); } [data-theme="dark"] .dropdown li a:hover i { color: var(--gold-bright); } /* ── MEGA DROPDOWN ───────────────────────────────────────── */ [data-theme="dark"] .dropdown-accent { background: #0a0800; border-right-color: rgba(201,168,76,0.12); } [data-theme="dark"] .dropdown-items li a { color: #b8a878; } [data-theme="dark"] .dropdown-items li a:hover { background: #2a2010; color: var(--gold-bright); border-left-color: var(--gold); } [data-theme="dark"] .dropdown-items li a i { color: var(--gold); } /* ══════════════════════════════════════════════════════════════ MOBILE NAV ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .menu-row { background: rgba(12, 10, 4, 0.98); border-bottom-color: rgba(201,168,76,0.15); } [data-theme="dark"] .hamburger { border-color: rgba(201,168,76,0.3); } [data-theme="dark"] .hamburger span { background: #d8c898; } [data-theme="dark"] .hamburger:hover, [data-theme="dark"] .hamburger.open { border-color: var(--gold); background: #2a2010; } [data-theme="dark"] .mobile-nav { background: #100d06; box-shadow: -12px 0 60px rgba(0,0,0,0.7); } [data-theme="dark"] .mobile-nav-header { background: #0d0b05; border-bottom-color: rgba(201,168,76,0.12); } [data-theme="dark"] .close-btn { border-color: rgba(201,168,76,0.25); color: #d8c898; } [data-theme="dark"] .close-btn:hover { background: var(--gold); color: #0d0b08; border-color: var(--gold); } [data-theme="dark"] .mobile-nav-list > li { border-bottom-color: rgba(201,168,76,0.08); } [data-theme="dark"] .mobile-nav-list > li > a { color: #d8c898; } [data-theme="dark"] .mobile-nav-list > li > a:hover { color: var(--gold-bright); background: #1e1a0c; } [data-theme="dark"] .mobile-dropdown { background: #0a0800; } [data-theme="dark"] .mobile-dropdown li a { color: #a89878; } [data-theme="dark"] .mobile-dropdown li a:hover { color: var(--gold-bright); background: #1e1a0c; } [data-theme="dark"] .mobile-nav-footer { border-top-color: rgba(201,168,76,0.1); } [data-theme="dark"] .mobile-nav-social a { background: #1e1a0c; color: #c8a840; } [data-theme="dark"] .mobile-nav-social a:hover { background: var(--gold); color: #0d0b08; } /* ══════════════════════════════════════════════════════════════ HERO — stays mostly dark so minimal overrides needed ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .hero-overlay::after { background: #0f0d09; } /* ══════════════════════════════════════════════════════════════ STATS BAR ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .stats-bar { background: #0a0800; border-top: 1px solid rgba(201,168,76,0.12); border-bottom: 1px solid rgba(201,168,76,0.12); } [data-theme="dark"] .stat-item { border-right-color: rgba(201,168,76,0.1); } [data-theme="dark"] .stat-number { color: var(--gold-bright); text-shadow: 0 0 20px rgba(201,168,76,0.4); } [data-theme="dark"] .stat-label { color: rgba(200,180,130,0.55); } /* ══════════════════════════════════════════════════════════════ SECTIONS — light background sections ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] section, [data-theme="dark"] .section-pad { background: #0f0d09; } /* ── Section header ──────────────────────────────────────── */ [data-theme="dark"] .section-header h2 { color: #f0e0b0; } [data-theme="dark"] .section-header p { color: #a89878; } /* ══════════════════════════════════════════════════════════════ OVERVIEW / FEATURE CHIPS ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .overview-media::before { border-color: var(--gold); opacity: 0.5; } [data-theme="dark"] .feature-chip { background: #1e1a0c; color: #e0c878; border-left-color: var(--gold); } [data-theme="dark"] .feature-chip i { color: var(--gold-bright); } [data-theme="dark"] .feature-chip:hover { background: #2a2410; } /* ══════════════════════════════════════════════════════════════ SERVICES SECTION ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .services-section { background: #080601; } [data-theme="dark"] .service-card { background: rgba(201,168,76,0.04); border-color: rgba(201,168,76,0.1); } [data-theme="dark"] .service-card:hover { background: rgba(201,168,76,0.09); border-color: rgba(201,168,76,0.4); border-top-color: var(--gold); } [data-theme="dark"] .service-card h4 { color: #f0e0b0; } [data-theme="dark"] .service-card p { color: rgba(200,175,120,0.65); } [data-theme="dark"] .service-link { color: var(--gold-light); } /* ══════════════════════════════════════════════════════════════ PROJECT CARDS ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .project-card { background: #1a1608; box-shadow: 0 2px 12px rgba(0,0,0,0.5); } [data-theme="dark"] .project-card:hover { box-shadow: 0 16px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,168,76,0.15); } [data-theme="dark"] .project-card-body h4 { color: #f0e0b0; } [data-theme="dark"] .project-card-body p { color: #9a8a6a; } [data-theme="dark"] .project-card-footer { border-top-color: rgba(201,168,76,0.12); } [data-theme="dark"] .project-card-footer a { color: var(--gold-light); } /* ══════════════════════════════════════════════════════════════ PARTNERS MARQUEE ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .partner-logo { background: #1a1608; border-color: rgba(201,168,76,0.15); } [data-theme="dark"] .partner-logo:hover { border-color: var(--gold); box-shadow: var(--sh-gold); } [data-theme="dark"] .partner-logo img { filter: grayscale(20%) brightness(0.9); } [data-theme="dark"] .partner-logo:hover img { filter: none; } /* ══════════════════════════════════════════════════════════════ WHY CHOOSE US ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .why-img-badge { background: #0a0800; box-shadow: 0 8px 32px rgba(0,0,0,0.6); } [data-theme="dark"] .why-img-badge .big-num { color: var(--gold-light); } [data-theme="dark"] .why-img-badge p { color: rgba(200,175,120,0.7); } [data-theme="dark"] .why-feature { background: #1a1608; border-left-color: transparent; box-shadow: 0 2px 10px rgba(0,0,0,0.4); } [data-theme="dark"] .why-feature:hover { background: #201c0c; border-left-color: var(--gold); box-shadow: 0 8px 30px rgba(0,0,0,0.5); } [data-theme="dark"] .why-feature-icon { background: #2a2010; } [data-theme="dark"] .why-feature-icon i { color: var(--gold-light); } [data-theme="dark"] .why-feature-text h5 { color: #f0e0b0; } [data-theme="dark"] .why-feature-text p { color: #9a8a6a; } /* ══════════════════════════════════════════════════════════════ CTA SECTION ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .cta-section { background: linear-gradient(135deg, #060500 0%, #100d05 100%); border-top: 1px solid rgba(201,168,76,0.1); border-bottom: 1px solid rgba(201,168,76,0.1); } [data-theme="dark"] .cta-section::before, [data-theme="dark"] .cta-section::after { background: rgba(201,168,76,0.07); } [data-theme="dark"] .cta-inner p { color: rgba(200,175,120,0.72); } /* ══════════════════════════════════════════════════════════════ CONTACT ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .contact-info-item { background: #1a1608; border-left-color: var(--gold); } [data-theme="dark"] .contact-info-item:hover { background: #241e0c; } [data-theme="dark"] .contact-info-item .text p { color: #a89878; } [data-theme="dark"] .contact-info-item .text strong { color: var(--gold-light); } [data-theme="dark"] .contact-form-card { background: #1a1608; box-shadow: 0 8px 40px rgba(0,0,0,0.5); border: 1px solid rgba(201,168,76,0.12); } [data-theme="dark"] .form-group label { color: var(--gold-light); } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group textarea, [data-theme="dark"] .form-group select { background: #0f0d06; border-color: rgba(201,168,76,0.2); color: #e8d8b0; } [data-theme="dark"] .form-group input::placeholder, [data-theme="dark"] .form-group textarea::placeholder { color: #5a5040; } [data-theme="dark"] .form-group input:focus, [data-theme="dark"] .form-group textarea:focus, [data-theme="dark"] .form-group select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,0.15); background: #141008; } [data-theme="dark"] .form-group select option { background: #1a1608; color: #e8d8b0; } /* ══════════════════════════════════════════════════════════════ PAGE HERO (inner pages) ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .page-hero { background: linear-gradient(135deg, #060500 0%, #100d05 100%); } [data-theme="dark"] .page-hero::after { background: #0f0d09; } [data-theme="dark"] .page-hero-pattern { background-image: radial-gradient(circle at 15% 85%, rgba(201,168,76,0.12) 0%, transparent 50%), radial-gradient(circle at 85% 15%, rgba(201,168,76,0.05) 0%, transparent 40%), repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(201,168,76,0.02) 60px, rgba(201,168,76,0.02) 61px), repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(201,168,76,0.02) 80px, rgba(201,168,76,0.02) 81px); } /* ══════════════════════════════════════════════════════════════ INVESTMENTS ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .investment-card-new { background: #1a1608; box-shadow: 0 2px 12px rgba(0,0,0,0.5); } [data-theme="dark"] .investment-card-new:hover { box-shadow: 0 16px 50px rgba(0,0,0,0.65), 0 0 0 1px rgba(201,168,76,0.15); } [data-theme="dark"] .inv-card-header { background: linear-gradient(135deg, #0a0800 0%, #1a1408 100%); } [data-theme="dark"] .inv-mineral { color: #f0e0b0; } [data-theme="dark"] .inv-licence-type { color: rgba(200,175,120,0.65); } [data-theme="dark"] .inv-card-body { background: #1a1608; } [data-theme="dark"] .inv-stat { background: #141008; } [data-theme="dark"] .inv-stat-content .inv-stat-label { color: #7a6a4a; } [data-theme="dark"] .inv-stat-content .inv-stat-value { color: #e0c878; } [data-theme="dark"] .inv-card-footer { border-top-color: rgba(201,168,76,0.1); background: #141008; } [data-theme="dark"] .inv-status-pill { background: rgba(22,163,74,0.15); color: #4ade80; } /* ══════════════════════════════════════════════════════════════ BLOG ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .blog-sidebar-sticky::-webkit-scrollbar-track { background: #1a1608; } /* ══════════════════════════════════════════════════════════════ TOP-LINK (breadcrumb bar) ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .top-link { background: #141008; border-bottom-color: rgba(201,168,76,0.12); } [data-theme="dark"] .top-link p { color: #8a7a5a; } /* ══════════════════════════════════════════════════════════════ GENERIC CARDS / WHITE BOXES ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .card, [data-theme="dark"] .bg-white, [data-theme="dark"] [class*="card"] { background: #1a1608 !important; border-color: rgba(201,168,76,0.1) !important; color: #d8c898; } [data-theme="dark"] .table { color: #d8c898; } [data-theme="dark"] .table td, [data-theme="dark"] .table th { border-color: rgba(201,168,76,0.1); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(201,168,76,0.04); color: #d8c898; } [data-theme="dark"] .table thead th { background: #0a0800; color: var(--gold-light); } /* ── Bootstrap overrides ─────────────────────────────────── */ [data-theme="dark"] .btn-outline-secondary { border-color: rgba(201,168,76,0.3); color: #c8a840; } [data-theme="dark"] .btn-outline-secondary:hover { background: var(--gold); border-color: var(--gold); color: #0d0b08; } [data-theme="dark"] .alert-info { background: #1a1608; border-color: rgba(201,168,76,0.2); color: #d8c898; } [data-theme="dark"] .badge { background: #2a2010 !important; color: var(--gold-light) !important; } [data-theme="dark"] hr { border-color: rgba(201,168,76,0.1); } /* ══════════════════════════════════════════════════════════════ FOOTER — already dark, just refine for dark mode ══════════════════════════════════════════════════════════════ */ [data-theme="dark"] .site-footer { background: #060500; border-top: 1px solid rgba(201,168,76,0.12); } [data-theme="dark"] .footer-bottom { border-top-color: rgba(201,168,76,0.08); } [data-theme="dark"] .footer-contact-item { background: rgba(201,168,76,0.03); } [data-theme="dark"] .footer-contact-item:hover { background: rgba(201,168,76,0.07); } /* ══════════════════════════════════════════════════════════════ THEME TOGGLE BUTTON ══════════════════════════════════════════════════════════════ */ .theme-toggle { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--gray-200); background: transparent; color: var(--gray-600); cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--gold); background: var(--gold-pale); color: var(--gold); transform: rotate(20deg) scale(1.08); } /* Light icon (sun) — shown in dark mode */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle { border-color: rgba(201,168,76,0.3); color: var(--gold-light); } [data-theme="dark"] .theme-toggle:hover { border-color: var(--gold-bright); background: #2a2010; color: var(--gold-bright); } /* Mobile menu row toggle */ .theme-toggle-mobile { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--gray-200); background: transparent; color: var(--gray-600); cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .theme-toggle-mobile:hover { border-color: var(--gold); background: var(--gold-pale); color: var(--gold); } .theme-toggle-mobile .icon-sun { display: none; } .theme-toggle-mobile .icon-moon { display: block; } [data-theme="dark"] .theme-toggle-mobile .icon-sun { display: block; } [data-theme="dark"] .theme-toggle-mobile .icon-moon { display: none; } [data-theme="dark"] .theme-toggle-mobile { border-color: rgba(201,168,76,0.3); color: var(--gold-light); } [data-theme="dark"] .theme-toggle-mobile:hover { border-color: var(--gold-bright); background: #2a2010; color: var(--gold-bright); } /* ══════════════════════════════════════════════════════════════ SMOOTH TRANSITION on theme change ══════════════════════════════════════════════════════════════ */ body, body *, body *::before, body *::after { transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease !important; } /* But keep animations and transforms unchanged */ body .hero-slide::before, body .hero-carousel::before, body .btn::after, body .partners-track, body .carousel-item.active .hero-eyebrow, body .carousel-item.active .hero-content h1, body .carousel-item.active .hero-lead, body .carousel-item.active .hero-cta, body .carousel-item.active .hero-scroll-hint, body .carousel-item.active .gold-word, body .btn-register, body .inv-card-header::after, body .hero-bg { transition: none !important; }