/* Commit: 71 */ :root { --primary: #00d4ff; --secondary: #7b2cbf; --bg-dark: #0a0a1a; --glass: rgba(255, 255, 255, 0.05); } * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background: var(--bg-dark); font-family: 'Segoe UI', system-ui, sans-serif; color: #fff; overflow-x: hidden; } /* Configuration - Edit these values */ :root { --owner-email: "YOUR_EMAIL@gmail.com"; /* Replace with your email */ } .bg-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; } .bg-animation::before { content: ''; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: radial-gradient(circle at 20% 80%, rgba(123, 44, 191, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(0, 212, 255, 0.15) 0%, transparent 50%); animation: rotate 30s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .stars { position: absolute; width: 100%; height: 100%; background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent), radial-gradient(1px 1px at 90px 40px, #fff, transparent), radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.6), transparent), radial-gradient(1px 1px at 160px 120px, #fff, transparent), radial-gradient(2px 2px at 200px 150px, rgba(255,255,255,0.7), transparent); background-size: 250px 200px; animation: twinkle 4s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* Navigation */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; background: rgba(10, 10, 26, 0.8); backdrop-filter: blur(10px); } .nav-brand { font-size: 20px; font-weight: 700; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .nav-links { display: flex; gap: 5px; } .nav-btn { padding: 10px 20px; background: transparent; border: none; color: rgba(255, 255, 255, 0.7); font-size: 14px; cursor: pointer; border-radius: 8px; transition: all 0.3s; } .nav-btn:hover, .nav-btn.active { background: rgba(255, 255, 255, 0.1); color: #fff; } .main { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px 40px; } .card { background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: 50px 40px; max-width: 700px; width: 100%; text-align: center; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5); } /* Pages */ .page { display: none; } .page.active { display: block; } .gear-icon { font-size: 60px; animation: spin 4s linear infinite; display: inline-block; margin-bottom: 20px; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .badge { display: inline-block; background: linear-gradient(135deg, var(--primary), var(--secondary)); padding: 8px 20px; border-radius: 50px; font-size: 14px; font-weight: 600; letter-spacing: 1px; margin-bottom: 25px; text-transform: uppercase; } h1 { font-size: 42px; margin-bottom: 15px; background: linear-gradient(135deg, #fff, var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .message { font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, 0.8); margin-bottom: 30px; } .countdown { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; } .time-box { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 15px 20px; min-width: 80px; } .time-box .number { font-size: 32px; font-weight: 700; color: var(--primary); } .time-box .label { font-size: 12px; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; margin-top: 5px; } .progress-container { margin-bottom: 30px; } .progress-label { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; color: rgba(255, 255, 255, 0.7); } .progress-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 10px; width: 73%; transition: width 1s ease; } /* Contact Page */ .contact-info { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; text-align: left; } .contact-item { display: flex; align-items: center; gap: 15px; padding: 15px 20px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); } .contact-item .icon { font-size: 24px; } .contact-item .label { font-size: 12px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; } .contact-item .value { font-size: 16px; color: #fff; } /* Form Styles */ .form-group { margin-bottom: 20px; text-align: left; } .form-group label { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.7); margin-bottom: 8px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 14px 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; color: #fff; font-size: 16px; font-family: inherit; transition: all 0.3s; } .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.4); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 20px rgba(0, 212, 255, 0.2); } .form-group textarea { min-height: 120px; resize: vertical; } .form-group select option { background: var(--bg-dark); color: #fff; } .btn { padding: 14px 35px; border: none; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; width: 100%; } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4); } .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* Success Message */ .success-message { display: none; padding: 20px; background: rgba(0, 255, 136, 0.1); border: 1px solid rgba(0, 255, 136, 0.3); border-radius: 12px; color: #00ff88; margin-top: 20px; } .success-message.show { display: block; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Social Links */ .social { display: flex; justify-content: center; gap: 15px; margin-top: 25px; } .social a { width: 45px; height: 45px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-size: 20px; text-decoration: none; transition: all 0.3s; } .social a:hover { background: var(--primary); transform: translateY(-3px); } .footer { margin-top: 30px; font-size: 14px; color: rgba(255, 255, 255, 0.5); } /* Email Setup Notice */ .email-notice { background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); border-radius: 12px; padding: 15px 20px; margin-bottom: 25px; text-align: left; } .email-notice .title { color: #ffc107; font-weight: 600; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; } .email-notice .text { font-size: 14px; color: rgba(255, 255, 255, 0.7); } .email-notice code { background: rgba(0, 0, 0, 0.3); padding: 2px 6px; border-radius: 4px; font-family: monospace; } /* About Section */ .about-content { text-align: left; } .about-content h3 { color: var(--primary); margin: 20px 0 10px; font-size: 18px; } .about-content p { color: rgba(255, 255, 255, 0.8); line-height: 1.7; margin-bottom: 15px; } .about-content ul { list-style: none; padding: 0; } .about-content li { padding: 8px 0; color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; gap: 10px; } .about-content li::before { content: '✓'; color: var(--primary); } @media (max-width: 600px) { .card { padding: 35px 25px; } h1 { font-size: 28px; } .countdown { gap: 10px; } .time-box { padding: 10px 12px; min-width: 60px; } .time-box .number { font-size: 24px; } .nav { padding: 10px 15px; } .nav-btn { padding: 8px 12px; font-size: 12px; } }
⚙️
🚧 Under Maintenance

We'll Be Right Back!

We're currently working on something amazing. Our team is making improvements to give you the best experience. Thank you for your patience.

00
Days
00
Hours
00
Minutes
00
Seconds
Maintenance Progress 73%
© 2025 Shraddhakamal. All rights reserved.
📧
Get In Touch

Contact Us

Have questions? Send us a message and we'll get back to you as soon as possible.

✅ Message sent successfully! We'll get back to you soon.
📍
Location
Your Location Here
📧
Email
Shraddhakamal.com@gmail.com
ℹ️
About Us

About Shraddhakamal

Welcome to Shraddhakamal! We are dedicated to providing exceptional services and maintaining the highest standards in everything we do.

What We Do

We specialize in delivering quality solutions tailored to meet your needs. Our team is committed to excellence and continuous improvement.

Our Values

  • Customer Satisfaction First
  • Continuous Innovation
  • Transparent Communication
  • Quality Assurance

Currently

We're in the process of upgrading our systems to serve you better. The maintenance is expected to be completed shortly. Thank you for your patience and understanding!

© 2025 Shraddhakamal. All rights reserved.