/* ========================================================= UGL DARK MODE + THEME TOGGLE --------------------------------------------------------- Light mode = the original design (no light rules change). Dark mode = : charcoal surfaces with champagne-gold accents. Every dark rule is scoped to html[data-theme="dark"], so removing this file (and the toggle partials) restores the site exactly. ========================================================= */ /* ========================================================= 1. DARK TOKENS ========================================================= */ html[data-theme="dark"] { --ugl-d-bg: #0E0F11; --ugl-d-bg-2: #121316; --ugl-d-surface: #17181C; --ugl-d-surface-2: #1D1F24; --ugl-d-surface-3: #24262C; --ugl-d-border: rgba(214, 181, 106, 0.16); --ugl-d-border-2: rgba(214, 181, 106, 0.32); --ugl-d-text: #EDE8DD; --ugl-d-text-2: #BDB7AB; --ugl-d-text-3: #948F85; --ugl-d-gold: #D9B96E; --ugl-d-gold-2: #EBD08E; --ugl-d-gold-grad: linear-gradient(135deg, #B8914A 0%, #E2C47F 50%, #B8914A 100%); --ugl-d-shadow: 0 22px 55px rgba(0, 0, 0, 0.45); --ugl-d-shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.35); color-scheme: dark; } /* smooth colour change only while switching themes */ html.ugl-theme-switching, html.ugl-theme-switching *, html.ugl-theme-switching *::before, html.ugl-theme-switching *::after { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, fill 0.4s ease !important; } /* ========================================================= 2. THEME TOGGLE BUTTON (both themes) ========================================================= */ .ugl-theme-toggle-x1 { position: relative; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(214, 181, 106, 0.55); background: radial-gradient(circle at 30% 25%, #FFFFFF 0%, #FAF8F2 60%, #F3EEE2 100%); color: #A9853F; box-shadow: 0 8px 22px rgba(43, 45, 49, 0.10), inset 0 0 0 3px rgba(214, 181, 106, 0.08); cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: transform 0.3s cubic-bezier(.22, 1, .36, 1), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .ugl-theme-toggle-x1:hover { transform: translateY(-2px); color: #FFFFFF; background: linear-gradient(135deg, #A9853F 0%, #D6B56A 55%, #A9853F 100%); border-color: rgba(214, 181, 106, 0.95); box-shadow: 0 12px 26px rgba(169, 133, 63, 0.30); } .ugl-theme-toggle-x1:focus-visible { outline: 2px solid #A9853F; outline-offset: 3px; } .ugl-theme-toggle-x1:active { transform: scale(0.95); } .ugl-theme-icons-x1 { position: relative; width: 18px; height: 18px; display: block; } .ugl-theme-icons-x1 i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: transform 0.5s cubic-bezier(.22, 1, .36, 1), opacity 0.35s ease; } /* light mode shows the moon ("switch to dark") */ .ugl-theme-moon-x1 { transform: rotate(0deg) scale(1); opacity: 1; } .ugl-theme-sun-x1 { transform: rotate(-90deg) scale(0.4); opacity: 0; } /* dark mode shows the sun ("switch to light") */ html[data-theme="dark"] .ugl-theme-moon-x1 { transform: rotate(90deg) scale(0.4); opacity: 0; } html[data-theme="dark"] .ugl-theme-sun-x1 { transform: rotate(0deg) scale(1); opacity: 1; } html[data-theme="dark"] .ugl-theme-toggle-x1 { color: var(--ugl-d-gold-2); background: radial-gradient(circle at 30% 25%, #2A2C32 0%, #1D1F24 60%, #17181C 100%); border-color: var(--ugl-d-border-2); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.40), inset 0 0 0 3px rgba(214, 181, 106, 0.06); } html[data-theme="dark"] .ugl-theme-toggle-x1:hover { color: #17181C; background: var(--ugl-d-gold-grad); border-color: var(--ugl-d-gold); } /* where the button shows */ .ugl-theme-header-x1 { display: none; } @media (max-width: 1024px) { .ugl-theme-menu-x1 { display: none; } .ugl-theme-header-x1 { display: inline-flex; margin-left: auto; } } @media (max-width: 600px) { .ugl-theme-toggle-x1 { width: 40px; height: 40px; } } @media (prefers-reduced-motion: reduce) { .ugl-theme-toggle-x1, .ugl-theme-icons-x1 i { transition: none; } } @media print { .ugl-theme-toggle-x1 { display: none; } } /* ========================================================= 3. PAGE BASE ========================================================= */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--ugl-d-bg); color: var(--ugl-d-text); } /* verify page navbar: toggle sits just before the "back" button */ .ugl-theme-verify-x1 { margin-left: auto; margin-right: -10px; } /* ========================================================= 4. SECTION BACKGROUNDS ========================================================= */ html[data-theme="dark"] :is( .ugl-about-page, .asr-contact-page, .ugl-contact-main, .ugl-calculator-page, .ugl-auth-page, .ugl-auth-main, .verify-page-background, .why-section, .metals-section, .ugl-auth-section, .ugl-showcase, .uglc-section ) { background: var(--ugl-d-bg); } html[data-theme="dark"] :is( .why-asr, .mission-section, .owner-section, .story-section, .authentication-section, .ugl-live-section, .ugl-verification, .ugl-newsletter ) { background: radial-gradient(circle at 12% 18%, rgba(214, 181, 106, 0.07), transparent 42%), linear-gradient(180deg, var(--ugl-d-bg-2) 0%, var(--ugl-d-bg) 100%); } /* hero / feature sections that had gold radial glows */ html[data-theme="dark"] :is( .ugl-xhero, .about-hero, .calculator-hero, .ugl-auth-hero, .ugl-contact-hero, .ugl-about-section, .ugl-trust-section, .ugl-showcase-bg, .about-cta ) { background: radial-gradient(circle at 12% 20%, rgba(214, 181, 106, 0.12), transparent 40%), radial-gradient(circle at 88% 80%, rgba(214, 181, 106, 0.08), transparent 42%), linear-gradient(180deg, #131417 0%, var(--ugl-d-bg) 100%); } html[data-theme="dark"] .ugl-contact-hero-bg { background: linear-gradient(135deg, rgba(14, 15, 17, 0.78), rgba(18, 19, 22, 0.92)); } /* overlays on top of photos */ html[data-theme="dark"] .ugl-showcase-overlay { background: linear-gradient(90deg, rgba(14, 15, 17, 0.97) 0%, rgba(14, 15, 17, 0.88) 45%, rgba(14, 15, 17, 0.45) 100%); } html[data-theme="dark"] .ugl-trust-overlay { background: linear-gradient(135deg, rgba(14, 15, 17, 0.96), rgba(18, 19, 22, 0.90)); } html[data-theme="dark"] .premium-footer { background: radial-gradient(circle at 8% 15%, rgba(214, 181, 106, 0.08), transparent 38%), linear-gradient(180deg, #111215 0%, #0B0C0E 100%); border-top-color: var(--ugl-d-border); } /* ========================================================= 5. CARDS / PANELS ========================================================= */ html[data-theme="dark"] :is( .verification-card, .ugl-new-authentication-card, .about-stats, .ugl-verification-step, .ugl-table-wrap, .ugl-info-card, .ugl-reference-card, .detail-item, .ugl-about-feature, .ugl-auth-feature, .ugl-trust-bottom, .activity-card, .ugl-qr-card, .calculator-hero-info, .story-highlight, .ugl-market-note, .ugl-form-security, .ugl-xfeature, .why-trust-content, .ugl-security-card, .ugl-id-card, .ugl-purity-badge, .ugl-founder-badge, .qr-flow-note, .uglc-card, .newsletter-card, .ugl-rates-panel, .ugl-card, .product-passport, .ugl-contact-form-card, .ugl-trust-card, .why-card, .ugl-international-price, .ugl-about-square, .ugl-new-help-card, .meta-card, .ugl-live-rate-box, .ugl-new-database-security, .ugl-whatsapp-card, .social-box, .newsletter-benefit, .contact-item, .footer-security, .developer-whatsapp, .ugl-reference-item, .why-item, .foundation-card, .metal-card, .ugl-new-security-card, .mission-card, .stat-card, .ugl-auth-trust-item, .ugl-result-detail, .ugl-price-breakdown, .ugl-result-metal, .ugl-final-price, .ugl-result-empty, .certificate-card, .ugl-silver-card ) { background: linear-gradient(145deg, rgba(32, 34, 40, 0.96) 0%, rgba(23, 24, 28, 0.96) 100%); border-color: var(--ugl-d-border); box-shadow: var(--ugl-d-shadow-sm); } html[data-theme="dark"] :is( .ugl-about-square-inner, .verification-card-top, .verification-card-footer, .ugl-new-auth-top, thead ) { background: linear-gradient(145deg, rgba(38, 40, 46, 0.9), rgba(29, 31, 36, 0.9)); border-color: var(--ugl-d-border); } html[data-theme="dark"] .ugl-rate-table :is(td, th) { border-color: var(--ugl-d-border); } html[data-theme="dark"] .ugl-rate-table tbody tr:hover { background: rgba(214, 181, 106, 0.05); } /* result states keep their colour tint */ html[data-theme="dark"] .verification-status { background: linear-gradient(135deg, rgba(64, 170, 128, 0.14), rgba(23, 24, 28, 0.96)); } html[data-theme="dark"] .report-section { background: linear-gradient(135deg, rgba(214, 96, 92, 0.12), rgba(23, 24, 28, 0.96)); } /* image frames (product photos) */ html[data-theme="dark"] :is(.image-frame, .ugl-founder-photo, .uglc-product-center) { background: radial-gradient(circle at 50% 40%, #2A2C32 0%, #1B1C20 70%); border-color: var(--ugl-d-border); } /* QR codes must stay dark-on-white to scan */ html[data-theme="dark"] :is(.qr-frame, .fake-qr, .ugl-qr-box) { background: #FFFFFF; border-color: var(--ugl-d-border-2); } /* soft white "shine" sweeps are too bright on dark */ html[data-theme="dark"] :is( .newsletter-card-shine, .ugl-card-shine, .ugl-photo-shine, .ugl-xproduct-shine, .certificate-shine, .ugl-logo-light-v2 ) { opacity: 0.25; } /* ========================================================= 6. SMALL LABELS / PILLS / EYEBROWS ========================================================= */ html[data-theme="dark"] :is( .newsletter-eyebrow, .section-tag, .ugl-contact-eyebrow, .ugl-verification-eyebrow, .calculator-badge, .ugl-auth-label, .ugl-showcase-eyebrow, .ugl-section-label span, .ugl-system-status, .qr-status, .header-label, .footer-badges span, .ugl-contact-trust div, .uglc-details span, .ugl-xkicker, .hero-badge, .ugl-auth-badge ) { background: rgba(29, 31, 36, 0.85); border-color: var(--ugl-d-border-2); } /* ========================================================= 7. ICON BOXES / LOGO DISCS ========================================================= */ html[data-theme="dark"] :is( .why-icon, .detail-icon, .ugl-feature-icon, .foundation-icon, .trust-icon, .stat-icon, .metal-icon, .ugl-security-icon, .ugl-id-icon, .badge-crown, .ugl-new-input-icon, .uglc-product-icon, .verify-brand-logo, .verified-icon, .ugl-form-icon-box, .ugl-auth-core, .orbit-center, .uglc-platform-core, .contact-icon, .newsletter-benefit span, .newsletter-mini-icon, .ugl-info-icon, .ugl-step-icon, .ugl-result-empty-icon, .passport-seal, .no-image-icon, .footer-logo-box, .footer-logo, .ugl-logo-circle-v2, .ugl-logo-orbit-v2, .ugl-card-icon, .hero-info-icon ) { background: radial-gradient(circle at 30% 25%, #2C2E34 0%, #1E2025 60%, #18191D 100%); border-color: var(--ugl-d-border-2); } /* ========================================================= 8. FORM FIELDS ========================================================= */ html[data-theme="dark"] :is( .ugl-input-box, .ugl-textarea-box, .ugl-select, .ugl-input, .ugl-new-serial-input, .newsletter-input-wrapper input, .newsletter-input-wrapper ) { background: var(--ugl-d-surface-2); border-color: var(--ugl-d-border-2); color: var(--ugl-d-text); } html[data-theme="dark"] :is(input, textarea, select) { color: var(--ugl-d-text); } html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--ugl-d-text-3); opacity: 1; } html[data-theme="dark"] select option { background: var(--ugl-d-surface-2); color: var(--ugl-d-text); } html[data-theme="dark"] :is(.ugl-input-box, .ugl-textarea-box, .ugl-new-serial-input) :is(input, textarea) { background: transparent; } /* ========================================================= 9. SECONDARY BUTTONS / ROUND CONTROLS ========================================================= */ html[data-theme="dark"] :is( .action-secondary, .action-share, .outline-btn, .report-button, .ugl-xbtn-secondary, .ugl-auth-secondary, .ugl-btn, .ugl-xarrow, .ugl-showcase-prev, .ugl-showcase-next, .verify-back, .asr-scrolltop-x9, .ugl-wa-circle-x1 ) { background: radial-gradient(circle at 30% 25%, #2C2E34 0%, #1E2025 60%, #18191D 100%); border-color: var(--ugl-d-border-2); color: var(--ugl-d-text); } html[data-theme="dark"] .ugl-wa-circle-x1 { color: #3DDC84; } html[data-theme="dark"] .ugl-wa-label-x1 { background: var(--ugl-d-surface); border-color: var(--ugl-d-border-2); } /* ========================================================= 10. HEADER, TOP BAR, MOBILE MENU, LOADER ========================================================= */ html[data-theme="dark"] .ugl-header-v2 { background: rgba(14, 15, 17, 0.94); border-bottom-color: var(--ugl-d-border); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] .ugl-topbar-v2 { background: linear-gradient(90deg, #15161A 0%, #1D1E22 50%, #15161A 100%); border-bottom: 1px solid var(--ugl-d-border); } html[data-theme="dark"] .ugl-topbar-v2 :is(a, span) { color: var(--ugl-d-gold-2); } html[data-theme="dark"] .ugl-menu-inner-v2 { background: rgba(20, 21, 24, 0.98); border-color: var(--ugl-d-border); } html[data-theme="dark"] .ugl-menu-bar-v2 { background: var(--ugl-d-gold-2); } html[data-theme="dark"] :is(.ugx-loader-v3, .ugx-loader-bg-v3) { background: var(--ugl-d-bg); } html[data-theme="dark"] .verify-navbar { background: rgba(23, 24, 28, 0.86); border-color: var(--ugl-d-border); } /* ========================================================= 11. TEXT COLOURS Generated from a dark-mode scan of every public page: headings -> cream, body text -> soft grey, status colours brightened. Plain selector lists (no :is) so each rule keeps its own specificity and hover / active states still win. ========================================================= */ /* text variables used by page stylesheets */ html[data-theme="dark"], html[data-theme="dark"] .asr-contact-page, html[data-theme="dark"] .ugl-trust-section { --text: var(--ugl-d-text); --muted: var(--ugl-d-text-2); --ugl-muted: var(--ugl-d-text-2); } html[data-theme="dark"] #liveRateTitle, html[data-theme="dark"] #uglGoldIntlRate, html[data-theme="dark"] #uglSilverIntlRate, html[data-theme="dark"] .activity-content strong, html[data-theme="dark"] .activity-time strong, html[data-theme="dark"] .auth-content h2, html[data-theme="dark"] .badge-text, html[data-theme="dark"] .badge-text strong, html[data-theme="dark"] .calculator-title, html[data-theme="dark"] .certificate-content h3, html[data-theme="dark"] .contact-item strong, html[data-theme="dark"] .cta-content h2, html[data-theme="dark"] .detail-item strong, html[data-theme="dark"] .details-heading h2, html[data-theme="dark"] .footer-bottom strong, html[data-theme="dark"] .footer-column h4, html[data-theme="dark"] .foundation-card h3, html[data-theme="dark"] .founder-signature strong, html[data-theme="dark"] .hero-content h1, html[data-theme="dark"] .hero-info-item strong, html[data-theme="dark"] .meta-card strong, html[data-theme="dark"] .metal-card h3, html[data-theme="dark"] .newsletter-benefit strong, html[data-theme="dark"] .newsletter-card-header h3, html[data-theme="dark"] .newsletter-copy h2, html[data-theme="dark"] .newsletter-security strong, html[data-theme="dark"] .owner-content h2, html[data-theme="dark"] .passport-heading h2, html[data-theme="dark"] .qr-content h2, html[data-theme="dark"] .qr-flow-note span, html[data-theme="dark"] .qr-points div, html[data-theme="dark"] .section-heading h2, html[data-theme="dark"] .story-content h2, html[data-theme="dark"] .ugl-about-feature strong, html[data-theme="dark"] .ugl-about-intro, html[data-theme="dark"] .ugl-about-title, html[data-theme="dark"] .ugl-auth-content h2, html[data-theme="dark"] .ugl-auth-core span, html[data-theme="dark"] .ugl-auth-feature strong, html[data-theme="dark"] .ugl-auth-hero-content h1, html[data-theme="dark"] .ugl-auth-trust-item strong, html[data-theme="dark"] .ugl-bottom-item span, html[data-theme="dark"] .ugl-brand-name-v2, html[data-theme="dark"] .ugl-card-content h3, html[data-theme="dark"] .ugl-card-title, html[data-theme="dark"] .ugl-contact-hero-content h1, html[data-theme="dark"] .ugl-contact-info h2, html[data-theme="dark"] .ugl-contact-trust span, html[data-theme="dark"] .ugl-form-group span, html[data-theme="dark"] .ugl-form-header h2, html[data-theme="dark"] .ugl-form-label, html[data-theme="dark"] .ugl-form-security strong, html[data-theme="dark"] .ugl-id-card strong, html[data-theme="dark"] .ugl-info-content h3, html[data-theme="dark"] .ugl-info-content p, html[data-theme="dark"] .ugl-live-header h2, html[data-theme="dark"] .ugl-new-auth-heading h2, html[data-theme="dark"] .ugl-new-auth-top-left span, html[data-theme="dark"] .ugl-new-database-content strong, html[data-theme="dark"] .ugl-new-help-content h2, html[data-theme="dark"] .ugl-new-input-label, html[data-theme="dark"] .ugl-purity-badge strong, html[data-theme="dark"] .ugl-qr-bottom strong, html[data-theme="dark"] .ugl-rate-table strong, html[data-theme="dark"] .ugl-reference-header h3, html[data-theme="dark"] .ugl-result-empty-inner h3, html[data-theme="dark"] .ugl-secure-verification-heading h2, html[data-theme="dark"] .ugl-security-card-content h3, html[data-theme="dark"] .ugl-security-content strong, html[data-theme="dark"] .ugl-sell, html[data-theme="dark"] .ugl-showcase-content h2, html[data-theme="dark"] .ugl-silver-bottom span, html[data-theme="dark"] .ugl-silver-center h3, html[data-theme="dark"] .ugl-table-title h3, html[data-theme="dark"] .ugl-trust-title, html[data-theme="dark"] .ugl-verification-header h2, html[data-theme="dark"] .ugl-verification-step h3, html[data-theme="dark"] .ugl-whatsapp-content h3, html[data-theme="dark"] .ugl-xcontent h1, html[data-theme="dark"] .ugl-xfeature strong, html[data-theme="dark"] .uglc-heading h2, html[data-theme="dark"] .uglc-product-info h3, html[data-theme="dark"] .verification-header h1, html[data-theme="dark"] .verification-trust-item strong, html[data-theme="dark"] .why-content h3, html[data-theme="dark"] .why-heading h2, html[data-theme="dark"] .why-item h3 { color: var(--ugl-d-text); } html[data-theme="dark"] #liveRateMessage, html[data-theme="dark"] .activity-content span, html[data-theme="dark"] .activity-time span, html[data-theme="dark"] .auth-content p, html[data-theme="dark"] .calculator-description, html[data-theme="dark"] .certificate-content p, html[data-theme="dark"] .contact-item span, html[data-theme="dark"] .contact-link, html[data-theme="dark"] .cta-content p, html[data-theme="dark"] .detail-item span, html[data-theme="dark"] .developer-phone, html[data-theme="dark"] .developer-whatsapp, html[data-theme="dark"] .footer-badges span, html[data-theme="dark"] .footer-bottom p, html[data-theme="dark"] .footer-brand span, html[data-theme="dark"] .footer-brand-text span, html[data-theme="dark"] .footer-column a, html[data-theme="dark"] .footer-description, html[data-theme="dark"] .footer-security span, html[data-theme="dark"] .foundation-card p, html[data-theme="dark"] .hero-content p, html[data-theme="dark"] .hero-info-item small, html[data-theme="dark"] .meta-card span, html[data-theme="dark"] .metal-card p, html[data-theme="dark"] .newsletter-benefit small, html[data-theme="dark"] .newsletter-bottom-item span, html[data-theme="dark"] .newsletter-card-header p, html[data-theme="dark"] .newsletter-description, html[data-theme="dark"] .newsletter-security span, html[data-theme="dark"] .no-product-image span, html[data-theme="dark"] .owner-content p, html[data-theme="dark"] .owner-intro, html[data-theme="dark"] .product-visual-label, html[data-theme="dark"] .qr-content p, html[data-theme="dark"] .qr-display small, html[data-theme="dark"] .qr-status, html[data-theme="dark"] .report-content p, html[data-theme="dark"] .section-heading p, html[data-theme="dark"] .security-info-content p, html[data-theme="dark"] .stat-card span, html[data-theme="dark"] .status-content p, html[data-theme="dark"] .status-content span, html[data-theme="dark"] .status-content strong, html[data-theme="dark"] .story-content p, html[data-theme="dark"] .story-highlight span, html[data-theme="dark"] .support-content p, html[data-theme="dark"] .ugl-about-feature span, html[data-theme="dark"] .ugl-about-text, html[data-theme="dark"] .ugl-auth-hero-content p, html[data-theme="dark"] .ugl-auth-main-text, html[data-theme="dark"] .ugl-auth-sub-text, html[data-theme="dark"] .ugl-auth-trust-item small, html[data-theme="dark"] .ugl-brand-tagline-v2, html[data-theme="dark"] .ugl-buy, html[data-theme="dark"] .ugl-calculator-trust span, html[data-theme="dark"] .ugl-card-content p, html[data-theme="dark"] .ugl-contact-hero-content p, html[data-theme="dark"] .ugl-contact-intro, html[data-theme="dark"] .ugl-form-header p, html[data-theme="dark"] .ugl-form-label span, html[data-theme="dark"] .ugl-form-security span, html[data-theme="dark"] .ugl-hero-scroll, html[data-theme="dark"] .ugl-info-content small, html[data-theme="dark"] .ugl-live-header p, html[data-theme="dark"] .ugl-live-rate-help, html[data-theme="dark"] .ugl-market-note span, html[data-theme="dark"] .ugl-message-footer span, html[data-theme="dark"] .ugl-new-auth-heading p, html[data-theme="dark"] .ugl-new-database-content span, html[data-theme="dark"] .ugl-new-help-content p, html[data-theme="dark"] .ugl-new-input-help, html[data-theme="dark"] .ugl-price-label, html[data-theme="dark"] .ugl-process-trust span, html[data-theme="dark"] .ugl-qr-status, html[data-theme="dark"] .ugl-rate-table td, html[data-theme="dark"] .ugl-reference-item span, html[data-theme="dark"] .ugl-result-empty-inner p, html[data-theme="dark"] .ugl-secure-verification-heading p, html[data-theme="dark"] .ugl-security-card-content p, html[data-theme="dark"] .ugl-showcase-content p, html[data-theme="dark"] .ugl-system-status span, html[data-theme="dark"] .ugl-trust-description, html[data-theme="dark"] .ugl-verification-header p, html[data-theme="dark"] .ugl-verification-step p, html[data-theme="dark"] .ugl-whatsapp-content small, html[data-theme="dark"] .ugl-xcontent p, html[data-theme="dark"] .ugl-xcounter span, html[data-theme="dark"] .ugl-xfeature small, html[data-theme="dark"] .ugl-xmeta, html[data-theme="dark"] .uglc-heading p, html[data-theme="dark"] .uglc-product-info p, html[data-theme="dark"] .verification-card-footer span, html[data-theme="dark"] .verification-header p, html[data-theme="dark"] .verification-trust-item small, html[data-theme="dark"] .verify-brand-text span, html[data-theme="dark"] .verify-footer p, html[data-theme="dark"] .visual-caption, html[data-theme="dark"] .why-content p, html[data-theme="dark"] .why-heading p, html[data-theme="dark"] .why-item p, html[data-theme="dark"] .why-trust-content span { color: var(--ugl-d-text-2); } html[data-theme="dark"] .card-live-status, html[data-theme="dark"] .security-lock, html[data-theme="dark"] .status-badge, html[data-theme="dark"] .status-content h2, html[data-theme="dark"] .verify-nav-status span { color: #5CCB9C; } html[data-theme="dark"] .report-content span { color: #E88480; } /* live-rates table */ html[data-theme="dark"] .ugl-rate-table td { color: var(--ugl-d-text-2); } html[data-theme="dark"] .ugl-rate-table td strong, html[data-theme="dark"] .ugl-rate-table td b, html[data-theme="dark"] .ugl-sell { color: var(--ugl-d-text); } html[data-theme="dark"] .ugl-buy { color: var(--ugl-d-text-2); } /* navbar links: soft grey, gold on hover / active */ html[data-theme="dark"] .ugl-menu-link-v2, html[data-theme="dark"] .ugl-menu-link-v2 .ugl-menu-text-v2 { color: var(--ugl-d-text-2); } html[data-theme="dark"] .ugl-menu-link-v2:hover, html[data-theme="dark"] .ugl-menu-link-v2:hover .ugl-menu-text-v2, html[data-theme="dark"] .ugl-menu-link-v2:focus-visible .ugl-menu-text-v2, html[data-theme="dark"] .ugl-menu-active-v2, html[data-theme="dark"] .ugl-menu-active-v2 .ugl-menu-text-v2 { color: var(--ugl-d-gold-2); } html[data-theme="dark"] .ugl-menu-active-v2 { background: rgba(214, 181, 106, 0.10); border-color: var(--ugl-d-border-2); } /* secondary buttons keep a visible hover */ html[data-theme="dark"] :is(.action-secondary, .action-share, .outline-btn, .ugl-xbtn-secondary, .ugl-auth-secondary, .ugl-btn, .verify-back):hover { border-color: var(--ugl-d-gold); color: var(--ugl-d-gold-2); } /* ========================================================= 12. HIGHER-SPECIFICITY / !important ORIGINALS ========================================================= */ html[data-theme="dark"] .ugl-header-v2, html[data-theme="dark"] .ugl-header-v2.ugl-header-scrolled-v2 { background: rgba(14, 15, 17, 0.94) !important; } html[data-theme="dark"] .premium-footer .footer-social .social-box { background: radial-gradient(circle at 30% 25%, #2C2E34 0%, #1E2025 60%, #18191D 100%); border-color: var(--ugl-d-border-2); } html[data-theme="dark"] .uglc-product-center div { background: radial-gradient(circle at 50% 40%, #2A2C32 0%, #1B1C20 70%); } html[data-theme="dark"] .metal-bottom { border-color: var(--ugl-d-border); } /* live-rates table: the light theme uses !important here */ html[data-theme="dark"] .ugl-rate-table tbody td:first-child strong, html[data-theme="dark"] .silver-group .ugl-rate-table tbody td:first-child strong { color: var(--ugl-d-text) !important; } html[data-theme="dark"] .silver-group .ugl-sell { color: var(--ugl-d-text) !important; text-shadow: none; } html[data-theme="dark"] .silver-group .ugl-buy { color: var(--ugl-d-text-2) !important; } html[data-theme="dark"] .silver-group .ugl-rate-table tbody td:nth-child(2) { color: #C9CDD2 !important; } html[data-theme="dark"] .ugl-rate-table tbody td { color: var(--ugl-d-text-2); } /* product card image disc (light theme uses !important) */ html[data-theme="dark"] .uglc-product-center > div { background: radial-gradient(circle at 50% 40%, #2A2C32 0%, #1B1C20 70%) !important; } /* ========================================================= 13. MOBILE / PSEUDO-ELEMENT LEFTOVERS ========================================================= */ html[data-theme="dark"] .ugl-menu-toggle-v2 { background: var(--ugl-d-surface-2); border-color: var(--ugl-d-border-2); } html[data-theme="dark"] .verification-trust-item { background: rgba(29, 31, 36, 0.85); border-color: var(--ugl-d-border); } /* cream fade at the bottom of the showcase photo */ html[data-theme="dark"] .ugl-showcase-overlay::after { background: linear-gradient(to top, rgba(14, 15, 17, 0.9), rgba(14, 15, 17, 0)); } /* large white light-sweep on the calculator hero */ html[data-theme="dark"] .calculator-hero::before { opacity: 0.12; } /* ========================================================= 14. VERIFY PAGE (verify_product.html) ========================================================= */ /* the verify page paints a gradient image on */ html[data-theme="dark"] body, html[data-theme="dark"] body.verify-page-loaded { background: var(--ugl-d-bg); } html[data-theme="dark"] :is( .qr-auth-section, .support-section, .security-certificate, .security-information ) { background: linear-gradient(145deg, rgba(32, 34, 40, 0.96) 0%, rgba(23, 24, 28, 0.96) 100%); border-color: var(--ugl-d-border); box-shadow: var(--ugl-d-shadow-sm); } html[data-theme="dark"] :is( .verified-icon-ring, .security-lock, .certificate-icon, .certificate-mark, .support-icon, .verified-icon-wrapper ) { background: radial-gradient(circle at 30% 25%, #2C2E34 0%, #1E2025 60%, #18191D 100%); border-color: var(--ugl-d-border-2); } html[data-theme="dark"] .report-section .report-button, html[data-theme="dark"] .support-section .support-button { background: radial-gradient(circle at 30% 25%, #2C2E34 0%, #1E2025 60%, #18191D 100%); border-color: var(--ugl-d-border-2); } html[data-theme="dark"] .report-section .report-button { color: #E88480; } /*

itself has a light background that shows in gaps between sections */ html[data-theme="dark"] main { background: var(--ugl-d-bg); } /* style.css sets body { background: #F7F5EF !important } */ html[data-theme="dark"] body { background: var(--ugl-d-bg) !important; } /* footer follow note */ html[data-theme="dark"] .premium-footer .footer-follow-x1 { color: var(--ugl-d-text-2); } html[data-theme="dark"] .premium-footer .footer-follow-x1 strong { color: var(--ugl-d-text); } html[data-theme="dark"] .premium-footer .footer-follow-x1 i { color: var(--ugl-d-gold-2); } /* About: big round UGL logo */ html[data-theme="dark"] .ugl-medal-coin { box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 8px rgba(214, 181, 106, .12), 0 0 45px rgba(214, 181, 106, .28); } /* Contact form result line + field errors */ html[data-theme="dark"] .ugl-form-status.is-success { background: rgba(47, 133, 77, .14); border-color: rgba(88, 190, 122, .35); border-left-color: #4CC27A; color: #BFEACD; } html[data-theme="dark"] .ugl-form-status.is-success .ugl-form-status-icon { color: #4CC27A; } html[data-theme="dark"] .ugl-form-status.is-error { background: rgba(194, 59, 59, .14); border-color: rgba(235, 110, 110, .35); border-left-color: #E86A6A; color: #F5C6C6; } html[data-theme="dark"] .ugl-form-status.is-error .ugl-form-status-icon, html[data-theme="dark"] .ugl-field-error { color: #F08A8A; } html[data-theme="dark"] .ugl-form-group.has-error :is(.ugl-input-box, .ugl-textarea-box) { border-color: #E86A6A; background: rgba(194, 59, 59, .10); }