/* Theme.css - Central color theme control for the project */ /* Define CSS custom properties (variables) for easy theme management */ /* Attractive Blue themed color scheme */ :root { /* Primary colors - Deep Blue */ --primary-color: #1d4ed8; /* Deep blue - main brand color */ --primary-hover: #1e40af; /* Darker blue for hover states */ /* Secondary colors - Vibrant Blue */ --secondary-color: #3b82f6; /* Vibrant blue - secondary elements */ --secondary-hover: #2563eb; /* Darker blue for hover */ /* Background colors - Dark theme */ --bg-color: #000000; /* Black background */ --bg-secondary: #1a1a1a; /* Dark gray background for sections */ --bg-dark: #000000; /* Black background for headers/footers */ /* Text colors */ --text-color: #ffffff; /* White text */ --text-light: #cccccc; /* Light gray text */ --text-white: #ffffff; /* White text */ /* Accent colors - Blue variants */ --accent-color: #3b82f6; /* Blue for success/positive */ --accent-warning: #3b82f6; /* Blue for warnings */ --accent-danger: #1d4ed8; /* Dark blue for errors/danger */ /* Border colors */ --border-color: #e5e7eb; /* Light border */ --border-dark: #d1d5db; /* Darker border */ /* Link colors */ --link-color: var(--primary-color); --link-hover: var(--primary-hover); --link-visited: #1e3a8a; /* Dark blue for visited links */ /* Gradient colors */ --gradient-primary: linear-gradient(135deg, #1d4ed8, #3b82f6); --gradient-secondary: linear-gradient(135deg, #3b82f6, #2563eb); --gradient-bg: linear-gradient(135deg, #1a1a1a, #000000); } /* Optional: Dark theme variant */ /* To use dark theme, add 'data-theme="dark"' to the tag */ /* Example: */ [data-theme="dark"] { --bg-color: #1a1a2e; /* Dark background */ --bg-secondary: #16213e; /* Darker for sections */ --bg-dark: #0f0f23; /* Very dark for headers/footers */ --text-color: #ffffff; /* White text */ --text-light: #b0b0b0; /* Light gray text */ --text-white: #1a1a2e; /* Dark text for contrast */ --border-color: #333333; /* Dark border */ --border-dark: #555555; /* Lighter dark border */ } /* How to use these variables in your CSS: - Use var(--variable-name) in your stylesheets - Example: background-color: var(--primary-color); - Example: color: var(--text-color); To change the theme: 1. Edit the values above in :root 2. For dark theme, add data-theme="dark" to 3. Create additional theme variants by adding more [data-theme="name"] blocks */ /* Utility classes for quick theme application */ .theme-primary { color: var(--primary-color); } .theme-secondary { color: var(--secondary-color); } .theme-bg { background-color: var(--bg-color); } .theme-bg-secondary { background-color: var(--bg-secondary); } .theme-text { color: var(--text-color); } .theme-text-light { color: var(--text-light); } /* Headings and labels in red */ h1, h2, h3, h4, h5, h6, .custom-heading, .card-title, .accordion-title, .ts-inner h3 { color: var(--primary-color) !important; } /* Logo in red */ .desktoplogo, .mobilelogo { color: var(--primary-color) !important; } /* Logo styles */ .desktoplogo { font-size: 24px; font-weight: bold; color: var(--secondary-color); text-decoration: none; } .mobilelogo { font-size: 20px; font-weight: bold; color: var(--secondary-color); text-decoration: none; } /* Override key Bootstrap and custom classes to apply theme */ body { background-color: var(--bg-color) !important; color: var(--text-color) !important; } .navbar { background: transparent !important; } .btn-primary { background: var(--gradient-primary) !important; border: none !important; color: var(--text-white) !important; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important; transition: all 0.3s ease !important; } .btn-primary:hover { background: var(--gradient-secondary) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important; } .btn-secondary { background: var(--gradient-secondary) !important; border: none !important; color: var(--text-white) !important; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important; transition: all 0.3s ease !important; } .btn-secondary:hover { background: var(--gradient-primary) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important; } .custom-heading { color: var(--primary-color) !important; -webkit-text-fill-color: var(--primary-color) !important; background: none !important; font-weight: bold !important; } .upper-gradient-bar { background: var(--gradient-primary) !important; } /* --- UPDATED CARD STYLES --- */ .card { /* Background set to transparent */ background-color: transparent !important; border: 1px solid rgba(59, 130, 246, 0.2) !important; /* Blue Gradient Shadow */ box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4), 0 10px 30px rgba(37, 99, 235, 0.3) !important; transition: all 0.3s ease !important; backdrop-filter: blur(0px); } .card:hover { transform: translateY(-5px) !important; /* Enhanced Blue Shadow on Hover */ box-shadow: 0 10px 25px rgba(59, 130, 246, 0.5), 0 15px 40px rgba(37, 99, 235, 0.4) !important; } /* --- UPDATED EVALUATION CARD STYLES --- */ .evaluation-card { /* Background set to transparent */ background: transparent !important; border: 1px solid rgba(59, 130, 246, 0.2) !important; border-radius: 15px !important; /* Blue Gradient Shadow */ box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4), 0 20px 40px rgba(37, 99, 235, 0.3) !important; transition: all 0.3s ease !important; backdrop-filter: blur(0px); } .evaluation-card:hover { transform: translateY(-8px) !important; /* Enhanced Blue Shadow on Hover */ box-shadow: 0 15px 40px rgba(59, 130, 246, 0.5), 0 25px 50px rgba(37, 99, 235, 0.4) !important; } .text-muted { color: var(--text-light) !important; } h1, h2, h3, h4, h5, h6 { color: var(--text-color) !important; } a { color: var(--link-color) !important; } a:hover { color: var(--link-hover) !important; } a:visited { color: var(--link-visited) !important; } /* Additional attractive effects */ .chip-item { background: var(--gradient-primary) !important; color: var(--text-white) !important; border-radius: 20px !important; padding: 5px 15px !important; margin: 5px !important; display: inline-block !important; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2) !important; } .custom-how-it-work { background: var(--gradient-bg) !important; border-radius: 20px !important; padding: 40px !important; box-shadow: 0 15px 35px rgba(59, 130, 246, 0.1) !important; } /* Animated background for sections */ .p-80 { background: var(--gradient-bg) !important; position: relative !important; } /* Tint the star background to blue using the PNG as a mask so the stars appear blue */ /* .start-anim { background-color: #1d4ed8 !important; background-image: none !important; -webkit-mask-image: url('/static/media/Stars.030e006e.png') !important; -webkit-mask-repeat: repeat !important; -webkit-mask-size: cover !important; mask-image: url('/static/media/Stars.030e006e.png') !important; mask-repeat: repeat !important; mask-size: cover !important; } */ .p-80::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,') repeat; pointer-events: none; z-index: 0; } .p-80 > * { position: relative; z-index: 1; } /* Navigation number styling */ .menu a span { color: var(--secondary-color) !important; font-weight: bold !important; } .cmb-item span { color: var(--secondary-color) !important; font-weight: bold !important; } /* Section backgrounds for dark theme */ .how-it-work, .ouradvantage, .pricetable, .benifit-section, .getstart-section, .certificates, .traders-section, .accordion-section, .customer-support, .footer { background: transparent !important; } /* --- UPDATED LANDING PAGE STYLES --- */ /* Home page (landing-page) headings and text in white */ .landing-page { /* Background set to transparent to show video/images */ background: transparent !important; } .landing-page h1, .landing-page h2, .landing-page h3, .landing-page h4, .landing-page h5, .landing-page h6, .landing-page .custom-heading { color: var(--text-white) !important; -webkit-text-fill-color: var(--text-white) !important; background: none !important; } /* Enforce white text for hero/section buttons */ .buttons a, .buttons .btn-primary, .buttons .btn-secondary, .btn-primary, .btn-secondary { color: #ffffff !important; text-decoration: none !important; } /* Make the "How It Work" box fully transparent and remove visual chrome */ .how-it-work, .custom-how-it-work, .hiw-inner, .p-80 { background: transparent !important; box-shadow: none !important; border: none !important; } /* FAQ Accordion Styles */ .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } #faq .accordion-item.active .accordion-icon { transform: rotate(45deg); color: var(--accent-red); } #faq .accordion-item.active .accordion-content { max-height: 500px; transition: max-height 0.4s ease-in-out; }