/* =================================================== AshwikaRaj.com — Custom CSS Design: Bootstrap 5 + Dual Theme (Blue / Green) Theme switching via [data-theme="green"] on =================================================== */ /* ══════════════════════════════════════════════════════ BLUE THEME (default) ══════════════════════════════════════════════════════ */ :root { /* Brand colours */ --primary: #0D4D92; --primary-light: #1a6bc4; --primary-dark: #0a3a6e; --primary-rgb: 13, 77, 146; /* Accent (kept same in both themes) */ --orange: #E67E22; --orange-dark: #d35400; /* Neutrals */ --bg: #ffffff; --gray-light: #F8F9FA; --gray: #6c757d; --dark: #0f172a; --text: #1e293b; --transition: all 0.3s ease; /* Component-specific */ --hero-gradient: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%); --impact-gradient: linear-gradient(135deg, var(--primary-dark), var(--primary)); --volunteer-gradient: linear-gradient(135deg, var(--primary-dark), var(--primary)); --aarambh-gradient: linear-gradient(135deg, #0a3a6e 0%, #1a5a2e 100%); --page-hero-gradient: linear-gradient(135deg, var(--primary-dark), var(--primary)); --footer-bg: #0a1628; --navbar-scrolled-bg: rgba(13, 77, 146, 0.97); --timeline-gradient: linear-gradient(to bottom, var(--primary), var(--orange)); --timeline-dot-shadow: var(--primary); --timeline-year-color: var(--primary); --journey-border: var(--primary); --card-hover-border: var(--primary); --kyc-hover-bg: #f0f7ff; --kyc-hover-border: var(--primary); --roadmap-active-bg: #f0f7ff; --roadmap-active-border: var(--primary); --form-focus-border: var(--primary); --form-focus-shadow: rgba(13, 77, 146, 0.12); --btn-blue-bg: var(--primary); --btn-blue-bg-hover: var(--primary-dark); --btn-blue-shadow: rgba(13, 77, 146, 0.4); /* Theme toggle display */ --theme-icon-blue: block; --theme-icon-green: none; } /* ══════════════════════════════════════════════════════ GREEN THEME override ══════════════════════════════════════════════════════ */ [data-theme="green"] { --primary: #2E7D32; --primary-light: #43a047; --primary-dark: #1b5e20; --primary-rgb: 46, 125, 50; /* Component overrides */ --hero-gradient: linear-gradient(135deg, #1b5e20 0%, #2E7D32 50%, #43a047 100%); --impact-gradient: linear-gradient(135deg, #1b5e20, #2E7D32); --volunteer-gradient: linear-gradient(135deg, #1b5e20, #2E7D32); --aarambh-gradient: linear-gradient(135deg, #1b5e20 0%, #0a3a6e 100%); --page-hero-gradient: linear-gradient(135deg, #1b5e20, #2E7D32); --footer-bg: #0d1f0e; --navbar-scrolled-bg: rgba(27, 94, 32, 0.97); --timeline-gradient: linear-gradient(to bottom, #2E7D32, var(--orange)); --timeline-dot-shadow: #2E7D32; --timeline-year-color: #2E7D32; --journey-border: #2E7D32; --card-hover-border: #2E7D32; --kyc-hover-bg: #f0fff0; --kyc-hover-border: #2E7D32; --roadmap-active-bg: #f0fff0; --roadmap-active-border: #2E7D32; --form-focus-border: #2E7D32; --form-focus-shadow: rgba(46, 125, 50, 0.15); --btn-blue-bg: #2E7D32; --btn-blue-bg-hover: #1b5e20; --btn-blue-shadow: rgba(46, 125, 50, 0.4); } /* ══════════════════════════════════════════════════════ BASE ══════════════════════════════════════════════════════ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--bg); line-height: 1.7; transition: background 0.3s ease, color 0.3s ease; } h1, h2, h3, h4, h5, h6, .fw-700, .navbar-brand span { font-family: 'Poppins', sans-serif; font-weight: 700; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } /* ══════════════════════════════════════════════════════ UTILITY COLOUR CLASSES ══════════════════════════════════════════════════════ */ .text-accent { color: var(--orange) !important; } .text-blue { color: var(--primary) !important; } .text-green { color: var(--primary) !important; } .bg-accent { background-color: var(--orange) !important; } .bg-blue { background-color: var(--primary) !important; } /* ══════════════════════════════════════════════════════ NAVBAR ══════════════════════════════════════════════════════ */ #mainNavbar { background: transparent; transition: var(--transition); padding: 1rem 0; } #mainNavbar.scrolled { background: var(--navbar-scrolled-bg) !important; backdrop-filter: blur(12px); padding: 0.6rem 0; box-shadow: 0 4px 30px rgba(0,0,0,0.15); } #mainNavbar .nav-link { font-weight: 500; font-size: 0.9rem; padding: 0.5rem 0.75rem; color: rgba(255,255,255,0.85); transition: var(--transition); position: relative; } #mainNavbar .nav-link:hover, #mainNavbar .nav-link.active { color: #fff; } #mainNavbar .nav-link.active::after { content: ''; position: absolute; bottom: 0; left: 0.75rem; right: 0.75rem; height: 2px; background: var(--orange); border-radius: 2px; } /* ── THEME TOGGLE BUTTON ── */ .theme-toggle-btn { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); backdrop-filter: blur(6px); font-size: 1rem; padding: 0; position: relative; overflow: hidden; } .theme-toggle-btn:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.6); transform: rotate(20deg); } /* Icon logic — JS adds .green-active class to html */ .icon-blue { display: block; } .icon-green { display: none; } [data-theme="green"] .icon-blue { display: none; } [data-theme="green"] .icon-green { display: block; } /* ══════════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════════ */ .btn-accent { background: var(--orange); color: #fff; border: none; font-weight: 600; transition: var(--transition); } .btn-accent:hover { background: var(--orange-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(230,126,34,0.4); } .btn-outline-accent { border: 2px solid var(--orange); color: var(--orange); font-weight: 600; transition: var(--transition); } .btn-outline-accent:hover { background: var(--orange); color: #fff; } .btn-blue { background: var(--btn-blue-bg); color: #fff; border: none; font-weight: 600; transition: var(--transition); } .btn-blue:hover { background: var(--btn-blue-bg-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 15px var(--btn-blue-shadow); } /* ══════════════════════════════════════════════════════ HERO SECTION ══════════════════════════════════════════════════════ */ .hero-section { min-height: 100vh; background: var(--hero-gradient); display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 80px; transition: background 0.4s ease; } .hero-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.08)'/%3E%3C/svg%3E"); } .hero-section::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 80px; background: var(--bg); clip-path: ellipse(60% 100% at 50% 100%); } .hero-badge { display: inline-block; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 0.35rem 1rem; border-radius: 50px; font-size: 0.8rem; font-weight: 500; backdrop-filter: blur(8px); margin-bottom: 1.5rem; animation: fadeInDown 0.8s ease; } .hero-title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; color: #fff; line-height: 1.15; animation: fadeInUp 0.9s ease 0.1s both; } .hero-title .highlight { color: var(--orange); } .hero-subtitle { font-size: 1.1rem; color: rgba(255,255,255,0.8); max-width: 550px; animation: fadeInUp 0.9s ease 0.2s both; } .hero-cta { animation: fadeInUp 0.9s ease 0.3s both; } .hero-visual { animation: fadeInRight 1s ease 0.4s both; } .hero-card { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(12px); border-radius: 16px; padding: 1.5rem; color: #fff; transition: var(--transition); } .hero-card:hover { background: rgba(255,255,255,0.15); transform: translateY(-3px); } .hero-stat-number { font-size: 2rem; font-weight: 800; color: var(--orange); font-family: 'Poppins', sans-serif; } /* ══════════════════════════════════════════════════════ SECTION STYLES ══════════════════════════════════════════════════════ */ .section-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.5rem; } .section-title { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; color: var(--dark); line-height: 1.2; } .section-title .accent { color: var(--orange); } .section-title .blue { color: var(--primary); } /* ══════════════════════════════════════════════════════ CARDS ══════════════════════════════════════════════════════ */ .card-hover { transition: var(--transition); border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.1); border-color: var(--card-hover-border); } .icon-box { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; } /* ══════════════════════════════════════════════════════ IMPACT COUNTERS ══════════════════════════════════════════════════════ */ .impact-section { background: var(--impact-gradient); color: #fff; padding: 5rem 0; position: relative; overflow: hidden; transition: background 0.4s ease; } .impact-section::before { content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: rgba(255,255,255,0.04); border-radius: 50%; } .impact-number { font-size: 3.5rem; font-weight: 800; font-family: 'Poppins', sans-serif; color: var(--orange); line-height: 1; } .impact-label { font-size: 0.9rem; color: rgba(255,255,255,0.75); font-weight: 500; margin-top: 0.25rem; } /* ══════════════════════════════════════════════════════ TIMELINE ══════════════════════════════════════════════════════ */ .timeline { position: relative; padding-left: 2rem; } .timeline::before { content: ''; position: absolute; left: 0.55rem; top: 0; bottom: 0; width: 2px; background: var(--timeline-gradient); border-radius: 2px; } .timeline-item { position: relative; padding-bottom: 2.5rem; } .timeline-item::before { content: ''; position: absolute; left: -1.5rem; top: 0.4rem; width: 14px; height: 14px; background: var(--orange); border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--timeline-dot-shadow); } .timeline-year { font-size: 0.75rem; font-weight: 700; color: var(--timeline-year-color); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.25rem; } /* ══════════════════════════════════════════════════════ BLOG CARDS ══════════════════════════════════════════════════════ */ .blog-card { border: none; border-radius: 16px; overflow: hidden; transition: var(--transition); box-shadow: 0 2px 15px rgba(0,0,0,0.06); } .blog-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.12); } .blog-category-badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 50px; } /* ══════════════════════════════════════════════════════ AARAMBH HERO ══════════════════════════════════════════════════════ */ .aarambh-hero { background: var(--aarambh-gradient); color: #fff; padding: 7rem 0 5rem; position: relative; overflow: hidden; transition: background 0.4s ease; } .aarambh-hero::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 60px; background: #fff; clip-path: ellipse(60% 100% at 50% 100%); } .module-card { border: none; border-radius: 16px; padding: 1.75rem; background: #fff; box-shadow: 0 2px 20px rgba(0,0,0,0.06); transition: var(--transition); height: 100%; } .module-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.12); } /* ══════════════════════════════════════════════════════ ROADMAP ══════════════════════════════════════════════════════ */ .roadmap-card { border: 2px solid transparent; border-radius: 16px; padding: 1.5rem; transition: var(--transition); cursor: pointer; } .roadmap-card.active, .roadmap-card:hover { border-color: var(--roadmap-active-border); background: var(--roadmap-active-bg); } /* ══════════════════════════════════════════════════════ FORM STYLES ══════════════════════════════════════════════════════ */ .form-label { color: var(--text); } .form-control, .form-select { border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.9rem; transition: var(--transition); } .form-control:focus, .form-select:focus { border-color: var(--form-focus-border); box-shadow: 0 0 0 3px var(--form-focus-shadow); } /* ══════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════ */ .footer-section { background: var(--footer-bg); transition: background 0.4s ease; } .footer-heading { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 1rem; } .footer-links li { margin-bottom: 0.5rem; } .footer-links a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 0.875rem; transition: var(--transition); } .footer-links a:hover { color: var(--orange); } .text-muted-light { color: rgba(255,255,255,0.55) !important; } .social-link { width: 36px; height: 36px; background: rgba(255,255,255,0.08); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); text-decoration: none; transition: var(--transition); font-size: 1rem; } .social-link:hover { background: var(--orange); color: #fff; transform: translateY(-2px); } .footer-divider { border-color: rgba(255,255,255,0.08); } /* ══════════════════════════════════════════════════════ PAGE HEROES (inner pages) ══════════════════════════════════════════════════════ */ .page-hero { background: var(--page-hero-gradient); padding: 8rem 0 5rem; color: #fff; transition: background 0.4s ease; } /* ══════════════════════════════════════════════════════ VALUE CARDS ══════════════════════════════════════════════════════ */ .value-card { border: none; border-radius: 16px; padding: 2rem; text-align: center; transition: var(--transition); box-shadow: 0 2px 20px rgba(0,0,0,0.05); } .value-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); } .value-icon { font-size: 2.5rem; margin-bottom: 1rem; } /* ══════════════════════════════════════════════════════ JOURNEY LOG ══════════════════════════════════════════════════════ */ .journey-card { border: none; border-left: 4px solid var(--journey-border); border-radius: 0 16px 16px 0; padding: 1.5rem; background: #fff; box-shadow: 0 2px 15px rgba(0,0,0,0.05); transition: var(--transition); margin-bottom: 1.5rem; } .journey-card:hover { border-left-color: var(--orange); transform: translateX(4px); } /* ══════════════════════════════════════════════════════ LEARN CATEGORIES ══════════════════════════════════════════════════════ */ .learn-card { border: none; border-radius: 16px; padding: 2rem 1.5rem; text-align: center; background: #fff; box-shadow: 0 2px 20px rgba(0,0,0,0.05); transition: var(--transition); cursor: pointer; text-decoration: none; color: inherit; display: block; } .learn-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); color: inherit; } .learn-icon { font-size: 2.5rem; margin-bottom: 1rem; } /* ══════════════════════════════════════════════════════ KYC CARDS ══════════════════════════════════════════════════════ */ .kyc-card { border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 1.5rem; transition: var(--transition); } .kyc-card:hover { border-color: var(--kyc-hover-border); background: var(--kyc-hover-bg); transform: translateY(-3px); } /* ══════════════════════════════════════════════════════ VOLUNTEER / CTA SECTION ══════════════════════════════════════════════════════ */ .volunteer-section { background: var(--volunteer-gradient); color: #fff; transition: background 0.4s ease; } .volunteer-section label, .volunteer-section h5 { color: var(--dark) !important; } /* ══════════════════════════════════════════════════════ ANIMATIONS ══════════════════════════════════════════════════════ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .animate-in.visible { opacity: 1; transform: translateY(0); } /* ══════════════════════════════════════════════════════ THEME TRANSITION FLASH OVERLAY ══════════════════════════════════════════════════════ */ .theme-flash { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; } .theme-flash.active { opacity: 0.08; } /* Blue flash = blue overlay, green flash = green overlay */ :root .theme-flash { background: var(--primary); } [data-theme="green"] .theme-flash { background: #2E7D32; } /* ══════════════════════════════════════════════════════ MISC ══════════════════════════════════════════════════════ */ .bg-section { background: #f8fafc; } .contact-section { background: var(--gray-light); } .section-divider { height: 1px; background: linear-gradient(to right, transparent, #e2e8f0, transparent); } .highlight-bar { width: 50px; height: 4px; background: var(--orange); border-radius: 4px; margin-bottom: 1rem; } /* ══════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════ */ @media (max-width: 991.98px) { #mainNavbar .navbar-collapse { background: rgba(13, 27, 48, 0.98); /* Deep brand dark blue */ backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius: 16px; margin-top: 10px; padding: 1.5rem; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); } [data-theme="green"] #mainNavbar .navbar-collapse { background: rgba(13, 31, 14, 0.98); /* Deep brand dark green */ border-color: rgba(255, 255, 255, 0.1); } #mainNavbar.scrolled .navbar-collapse { background: rgba(13, 27, 48, 0.98); } #mainNavbar .navbar-nav { gap: 0.5rem; } #mainNavbar .nav-link { font-size: 1.05rem; padding: 0.75rem 1.25rem !important; border-radius: 10px; transition: all 0.2s ease; border-left: 3px solid transparent; } #mainNavbar .nav-link:hover, #mainNavbar .nav-link.active { background: rgba(255, 255, 255, 0.08); border-left-color: var(--orange); padding-left: 1.5rem !important; } #mainNavbar .nav-link.active::after { display: none; /* Hide desktop underline on mobile */ } #mainNavbar .btn-accent { width: 100%; margin-top: 0.5rem; padding: 0.75rem !important; text-align: center; } } @media (max-width: 768px) { .hero-title { font-size: 2.2rem; } .impact-number { font-size: 2.5rem; } .section-title { font-size: 1.6rem; } }