/* ============================================================ DREAM ACHIEVER – Vibrant Redesign Light / Dark mode with CSS custom properties. Theme is toggled via data-theme="dark" on . ============================================================ */ /* ==================== LIGHT-MODE PALETTE ==================== */ :root { /* Vibrant palette */ --primary-color: #7C3AED; --primary-hover: #6D28D9; --primary-glow: rgba(124, 58, 237, 0.35); --secondary-color: #64748B; --accent-color: #F59E0B; --accent-hover: #D97706; --accent-glow: rgba(245, 158, 11, 0.35); --dark-color: #1E1B4B; --light-color: #F5F3FF; --text-color: #1E293B; --text-light: #ffffff; --text-muted: #94A3B8; --success-color: #10B981; --danger-color: #EF4444; --border-radius: 10px; --font-family: 'Poppins', sans-serif; /* Surface & border tokens */ --bg-body: #ffffff; --bg-card: #ffffff; --bg-card-alt: var(--light-color); --border-color: #E2E8F0; --border-color-hover: var(--primary-color); --shadow-sm: 0 2px 8px rgba(30, 27, 75, 0.06); --shadow-md: 0 8px 30px rgba(30, 27, 75, 0.10); --shadow-lg: 0 16px 48px rgba(30, 27, 75, 0.14); --shadow-glow: 0 0 20px var(--primary-glow); /* Navbar */ --navbar-bg: var(--dark-color); --navbar-text: rgba(255,255,255,0.88); /* Footer */ --footer-bg: var(--dark-color); --footer-text: rgba(255,255,255,0.75); /* Form tokens */ --input-bg: #ffffff; --input-border: #CBD5E1; --input-focus-border: var(--primary-color); --input-focus-shadow: 0 0 0 3px var(--primary-glow); } /* ==================== DARK-MODE PALETTE ==================== */ [data-theme="dark"] { --primary-color: #A78BFA; --primary-hover: #8B5CF6; --primary-glow: rgba(167, 139, 250, 0.30); --secondary-color: #94A3B8; --accent-color: #FBBF24; --accent-hover: #F59E0B; --accent-glow: rgba(251, 191, 36, 0.30); --dark-color: #0F0D23; --light-color: #1E1B4B; --text-color: #E2E8F0; --text-light: #F8FAFC; --text-muted: #64748B; --success-color: #34D399; --danger-color: #F87171; --bg-body: #0B0A1A; --bg-card: #161432; --bg-card-alt: #1E1B4B; --border-color: rgba(167, 139, 250, 0.18); --border-color-hover: var(--accent-color); --shadow-sm: 0 2px 8px rgba(0,0,0,0.25); --shadow-md: 0 8px 30px rgba(0,0,0,0.35); --shadow-lg: 0 16px 48px rgba(0,0,0,0.45); --shadow-glow: 0 0 24px var(--primary-glow); --navbar-bg: #0F0D23; --navbar-text: rgba(255,255,255,0.9); --footer-bg: #0F0D23; --footer-text: rgba(255,255,255,0.7); --input-bg: #1E1B4B; --input-border: rgba(167,139,250,0.25); --input-focus-border: var(--accent-color); --input-focus-shadow: 0 0 0 3px var(--accent-glow); } /* ---------- RESETS & BASE ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-family); color: var(--text-color); background-color: var(--bg-body); overflow-x: hidden; transition: background-color 0.4s ease, color 0.4s ease; } a { text-decoration: none; color: var(--primary-color); transition: color 0.3s ease; } a:hover { color: var(--accent-color); } img { max-width: 100%; height: auto; } /* ---------- THEME TOGGLE BUTTON ---------- */ .dap-theme-toggle { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: var(--accent-color); font-size: 1.15rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .dap-theme-toggle:hover { background: var(--accent-color); color: var(--dark-color); border-color: var(--accent-color); transform: rotate(20deg) scale(1.1); box-shadow: 0 0 16px var(--accent-glow); } .dap-theme-toggle .bi-sun-fill { display: none; } .dap-theme-toggle .bi-moon-stars-fill { display: inline-block; } [data-theme="dark"] .dap-theme-toggle .bi-sun-fill { display: inline-block; } [data-theme="dark"] .dap-theme-toggle .bi-moon-stars-fill { display: none; } /* ---------- UTILITY CLASSES ---------- */ .dap-section { padding: 80px 0; } .dap-section-light { background-color: var(--bg-card-alt); } .dap-section-dark { background-color: var(--dark-color); color: var(--text-light); } .dap-section-title { font-size: 2.2rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-color); } [data-theme="dark"] .dap-section-title { color: var(--text-light); } .dap-section-subtitle { font-size: 1.1rem; color: var(--secondary-color); margin-bottom: 2.5rem; } .dap-accent-bar { width: 60px; height: 4px; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); border-radius: 2px; margin-bottom: 1rem; } .dap-accent-bar-center { margin-left: auto; margin-right: auto; } /* ---------- BUTTONS ---------- */ .dap-btn-primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); color: var(--text-light); border: 2px solid transparent; border-radius: var(--border-radius); padding: 12px 32px; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; position: relative; overflow: hidden; } .dap-btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)); opacity: 0; transition: opacity 0.3s ease; } .dap-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--primary-glow); color: var(--text-light); border-color: var(--primary-color); } .dap-btn-primary:hover::before { opacity: 1; } .dap-btn-primary:active { transform: translateY(0); } .dap-btn-accent { background: linear-gradient(135deg, var(--accent-color), var(--accent-hover)); color: #1a1a2e; border: 2px solid transparent; border-radius: var(--border-radius); padding: 10px 28px; font-weight: 600; font-size: 0.95rem; transition: all 0.3s ease; } .dap-btn-accent:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--accent-glow); color: #1a1a2e; border-color: var(--accent-color); } .dap-btn-accent:active { transform: translateY(0); } .dap-btn-outline { background-color: transparent; color: var(--text-light); border: 2px solid rgba(255,255,255,0.5); border-radius: var(--border-radius); padding: 12px 32px; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; } .dap-btn-outline:hover { background-color: var(--text-light); color: var(--dark-color); border-color: var(--text-light); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255,255,255,0.15); } .dap-btn-outline:active { transform: translateY(0); } /* ---------- NAVBAR ---------- */ .dap-navbar { background-color: var(--navbar-bg); padding: 14px 0; box-shadow: 0 2px 24px rgba(0, 0, 0, 0.2); transition: all 0.4s ease; border-bottom: 1px solid rgba(255,255,255,0.06); } .dap-brand { font-size: 1.5rem; font-weight: 700; color: var(--text-light) !important; letter-spacing: 0.5px; } .dap-brand i { color: var(--accent-color); transition: transform 0.3s ease; } .dap-brand:hover i { transform: rotate(15deg) scale(1.15); } .dap-navbar .nav-link { color: var(--navbar-text) !important; font-weight: 500; font-size: 0.95rem; padding: 8px 16px !important; border-radius: var(--border-radius); transition: all 0.3s ease; position: relative; border: 2px solid transparent; } .dap-navbar .nav-link:hover { color: var(--accent-color) !important; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); } .dap-navbar .nav-link.active { color: var(--accent-color) !important; } .dap-navbar .nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 16px; right: 16px; height: 3px; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); border-radius: 2px; } /* ---------- HERO SECTION ---------- */ .dap-hero { background: linear-gradient(135deg, #1E1B4B 0%, #312E81 40%, #7C3AED 100%); min-height: 92vh; display: flex; align-items: center; position: relative; overflow: hidden; } [data-theme="dark"] .dap-hero { background: linear-gradient(135deg, #0B0A1A 0%, #1E1B4B 40%, #4C1D95 100%); } .dap-hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, transparent 70%); border-radius: 50%; animation: pulse-glow 6s ease-in-out infinite; } .dap-hero::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%); border-radius: 50%; animation: pulse-glow 8s ease-in-out infinite reverse; } @keyframes pulse-glow { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } } .dap-hero-content { position: relative; z-index: 2; } .dap-hero h1 { font-size: 3.5rem; font-weight: 800; color: var(--text-light); line-height: 1.15; margin-bottom: 1.2rem; } .dap-hero h1 span { background: linear-gradient(135deg, var(--accent-color), #FB923C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .dap-hero p { font-size: 1.2rem; color: rgba(255, 255, 255, 0.82); max-width: 540px; margin-bottom: 2rem; line-height: 1.7; } .dap-hero-stats { display: flex; gap: 40px; margin-top: 3rem; } .dap-hero-stat { padding: 16px 20px; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s ease; } .dap-hero-stat:hover { background: rgba(255,255,255,0.12); border-color: var(--accent-color); transform: translateY(-3px); } .dap-hero-stat h3 { font-size: 2rem; font-weight: 700; background: linear-gradient(135deg, var(--accent-color), #FB923C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0; } .dap-hero-stat p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 0; } .dap-hero-image { position: relative; z-index: 2; text-align: center; } .dap-hero-image .hero-icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 360px; margin: 0 auto; } .hero-icon-card { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; padding: 24px 16px; text-align: center; transition: all 0.3s ease; } .hero-icon-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.14); border-color: var(--accent-color); box-shadow: 0 12px 32px rgba(0,0,0,0.2); } .hero-icon-card i { font-size: 2rem; color: var(--accent-color); margin-bottom: 8px; display: block; transition: transform 0.3s ease; } .hero-icon-card:hover i { transform: scale(1.15); } .hero-icon-card span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); font-weight: 500; } /* ---------- PRODUCTS SECTION ---------- */ .dap-product-card { background: var(--bg-card); border: 2px solid var(--border-color); border-radius: 16px; padding: 40px 24px; text-align: center; transition: all 0.3s ease; height: 100%; } .dap-product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary-color); } [data-theme="dark"] .dap-product-card:hover { box-shadow: var(--shadow-glow); } .dap-product-icon { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; transition: transform 0.3s ease; } .dap-product-card:hover .dap-product-icon { transform: scale(1.1) rotate(5deg); } .dap-product-icon i { font-size: 2rem; color: var(--text-light); } .dap-product-card h5 { font-weight: 600; color: var(--text-color); margin-bottom: 10px; } [data-theme="dark"] .dap-product-card h5 { color: var(--text-light); } .dap-product-card p { font-size: 0.9rem; color: var(--secondary-color); margin-bottom: 0; } /* ---------- WHY JOIN US SECTION ---------- */ .dap-benefit-card { background: var(--bg-card); border-radius: 16px; padding: 36px 28px; border-left: 4px solid var(--accent-color); border-top: 1px solid var(--border-color); border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.3s ease; height: 100%; } .dap-benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-left-color: var(--primary-color); border-color: var(--primary-color); border-left-width: 4px; } [data-theme="dark"] .dap-benefit-card:hover { box-shadow: var(--shadow-glow); } .dap-benefit-card .benefit-icon { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(245,158,11,0.12)); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: all 0.3s ease; border: 1px solid var(--border-color); } [data-theme="dark"] .dap-benefit-card .benefit-icon { background: linear-gradient(135deg, rgba(167,139,250,0.15), rgba(251,191,36,0.12)); } .dap-benefit-card:hover .benefit-icon { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); border-color: transparent; } .dap-benefit-card .benefit-icon i { font-size: 1.5rem; color: var(--primary-color); transition: color 0.3s ease; } .dap-benefit-card:hover .benefit-icon i { color: #fff; } .dap-benefit-card h5 { font-weight: 600; color: var(--text-color); margin-bottom: 10px; } [data-theme="dark"] .dap-benefit-card h5 { color: var(--text-light); } .dap-benefit-card p { font-size: 0.92rem; color: var(--secondary-color); margin-bottom: 0; line-height: 1.6; } /* ---------- CTA BANNER ---------- */ .dap-cta-banner { background: linear-gradient(135deg, var(--primary-color) 0%, #312E81 50%, var(--dark-color) 100%); padding: 80px 0; text-align: center; position: relative; overflow: hidden; } .dap-cta-banner::before { content: ''; position: absolute; top: -60%; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(245,158,11,0.12) 0%, transparent 70%); border-radius: 50%; } .dap-cta-banner h2 { font-size: 2.4rem; font-weight: 700; color: var(--text-light); margin-bottom: 1rem; position: relative; } .dap-cta-banner p { font-size: 1.1rem; color: rgba(255, 255, 255, 0.8); max-width: 600px; margin: 0 auto 2rem; position: relative; } /* ---------- PAGE HEADER / BREADCRUMB ---------- */ .dap-page-header { background: linear-gradient(135deg, #1E1B4B 0%, #312E81 60%, #7C3AED 100%); padding: 70px 0 60px; text-align: center; position: relative; overflow: hidden; } [data-theme="dark"] .dap-page-header { background: linear-gradient(135deg, #0B0A1A 0%, #1E1B4B 60%, #4C1D95 100%); } .dap-page-header::before { content: ''; position: absolute; top: -50%; right: -30%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 70%); border-radius: 50%; } .dap-page-header h1 { font-size: 2.5rem; font-weight: 700; color: var(--text-light); position: relative; z-index: 2; } .dap-page-header .breadcrumb { justify-content: center; position: relative; z-index: 2; } .dap-page-header .breadcrumb-item a { color: rgba(255, 255, 255, 0.7); transition: color 0.3s ease; } .dap-page-header .breadcrumb-item a:hover { color: var(--accent-color); } .dap-page-header .breadcrumb-item.active { color: var(--accent-color); } .dap-page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.5); } /* ---------- ABOUT PAGE ---------- */ .dap-about-content h3 { font-weight: 700; color: var(--text-color); margin-bottom: 1rem; } [data-theme="dark"] .dap-about-content h3 { color: var(--text-light); } .dap-about-content p { color: var(--secondary-color); line-height: 1.8; margin-bottom: 1rem; } .dap-vision-card { background: var(--bg-card); border-radius: 16px; padding: 40px 30px; box-shadow: var(--shadow-sm); text-align: center; height: 100%; transition: all 0.3s ease; border: 2px solid var(--border-color); } .dap-vision-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--primary-color); } [data-theme="dark"] .dap-vision-card:hover { box-shadow: var(--shadow-glow); } .dap-vision-card .vision-icon { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; transition: transform 0.3s ease; } .dap-vision-card:hover .vision-icon { transform: scale(1.08); } .dap-vision-card .vision-icon i { font-size: 2rem; color: var(--text-light); } .dap-vision-card h5 { font-weight: 600; color: var(--text-color); margin-bottom: 10px; } [data-theme="dark"] .dap-vision-card h5 { color: var(--text-light); } .dap-vision-card p { font-size: 0.92rem; color: var(--secondary-color); line-height: 1.6; margin-bottom: 0; } .dap-value-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; padding: 16px; border-radius: 12px; border: 1px solid transparent; transition: all 0.3s ease; } .dap-value-item:hover { background: var(--bg-card-alt); border-color: var(--border-color); transform: translateX(6px); } [data-theme="dark"] .dap-value-item:hover { border-color: var(--primary-color); background: rgba(167,139,250,0.06); } .dap-value-item .value-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 12px; background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(245,158,11,0.1)); display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); transition: all 0.3s ease; } [data-theme="dark"] .dap-value-item .value-icon { background: linear-gradient(135deg, rgba(167,139,250,0.15), rgba(251,191,36,0.1)); } .dap-value-item:hover .value-icon { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); border-color: transparent; } .dap-value-item .value-icon i { font-size: 1.3rem; color: var(--primary-color); transition: color 0.3s ease; } .dap-value-item:hover .value-icon i { color: #fff; } .dap-value-item h6 { font-weight: 600; color: var(--text-color); margin-bottom: 4px; } [data-theme="dark"] .dap-value-item h6 { color: var(--text-light); } .dap-value-item p { font-size: 0.9rem; color: var(--secondary-color); margin-bottom: 0; } /* ---------- CONTACT PAGE ---------- */ .dap-contact-form { background: var(--bg-card); border-radius: 16px; padding: 40px; box-shadow: var(--shadow-sm); border: 2px solid var(--border-color); transition: border-color 0.3s ease; } .dap-contact-form:hover { border-color: var(--primary-color); } .dap-contact-form h4 { color: var(--text-color) !important; } [data-theme="dark"] .dap-contact-form h4 { color: var(--text-light) !important; } .dap-contact-form .form-control, .dap-contact-form .form-select { background-color: var(--input-bg); border: 2px solid var(--input-border); border-radius: var(--border-radius); padding: 12px 16px; font-size: 0.95rem; color: var(--text-color); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .dap-contact-form .form-control:hover, .dap-contact-form .form-select:hover { border-color: var(--secondary-color); } .dap-contact-form .form-control:focus, .dap-contact-form .form-select:focus { border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); background-color: var(--input-bg); color: var(--text-color); } .dap-contact-form label { font-weight: 500; font-size: 0.9rem; color: var(--text-color); margin-bottom: 6px; } [data-theme="dark"] .dap-contact-form label { color: var(--text-light); } .dap-contact-info-card { background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%); border-radius: 16px; padding: 40px; color: var(--text-light); height: 100%; border: 2px solid rgba(124,58,237,0.2); transition: border-color 0.3s ease; } .dap-contact-info-card:hover { border-color: var(--accent-color); } .dap-contact-info-card h4 { font-weight: 700; margin-bottom: 0.5rem; } .dap-contact-info-card p { color: rgba(255, 255, 255, 0.7); margin-bottom: 2rem; } .dap-contact-info-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; padding: 12px; border-radius: 12px; transition: all 0.3s ease; border: 1px solid transparent; } .dap-contact-info-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); } .dap-contact-info-item .info-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s ease; } .dap-contact-info-item:hover .info-icon { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); border-color: transparent; } .dap-contact-info-item .info-icon i { font-size: 1.2rem; color: var(--accent-color); transition: color 0.3s ease; } .dap-contact-info-item:hover .info-icon i { color: #fff; } .dap-contact-info-item h6 { font-weight: 600; margin-bottom: 4px; color: var(--text-light); } .dap-contact-info-item p, .dap-contact-info-item a { color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; margin-bottom: 0; } .dap-contact-info-item a:hover { color: var(--accent-color); } /* ---------- AUTH PAGE ---------- */ .dap-auth-wrapper { min-height: calc(100vh - 76px); display: flex; align-items: center; background: linear-gradient(135deg, #1E1B4B 0%, #312E81 50%, #7C3AED 100%); padding: 60px 0; } [data-theme="dark"] .dap-auth-wrapper { background: linear-gradient(135deg, #0B0A1A 0%, #1E1B4B 50%, #4C1D95 100%); } .dap-auth-card { background: var(--bg-card); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); max-width: 550px; width: 100%; margin: 0 auto; border: 2px solid var(--border-color); } .dap-auth-header { background: linear-gradient(135deg, #1E1B4B, #312E81); padding: 30px; text-align: center; border-bottom: 2px solid rgba(124,58,237,0.3); } .dap-auth-header h3 { color: var(--text-light); font-weight: 700; margin-bottom: 4px; } .dap-auth-header p { color: rgba(255, 255, 255, 0.6); margin-bottom: 0; font-size: 0.9rem; } .dap-auth-body { padding: 36px; } /* Auth Tabs */ .dap-auth-tabs { border-bottom: 2px solid var(--border-color); margin-bottom: 28px; } .dap-auth-tabs .nav-link { color: var(--secondary-color); font-weight: 600; font-size: 1rem; padding: 12px 24px; border: none; border-bottom: 3px solid transparent; border-radius: 0; transition: all 0.3s ease; } .dap-auth-tabs .nav-link.active { color: var(--primary-color); border-bottom-color: var(--primary-color); background: transparent; } .dap-auth-tabs .nav-link:hover:not(.active) { color: var(--text-color); border-bottom-color: var(--secondary-color); } [data-theme="dark"] .dap-auth-tabs .nav-link:hover:not(.active) { color: var(--text-light); } .dap-auth-body .form-control, .dap-auth-body .form-select { background-color: var(--input-bg); border: 2px solid var(--input-border); border-radius: var(--border-radius); padding: 11px 16px; font-size: 0.93rem; color: var(--text-color); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .dap-auth-body .form-control:hover, .dap-auth-body .form-select:hover { border-color: var(--secondary-color); } .dap-auth-body .form-control:focus, .dap-auth-body .form-select:focus { border-color: var(--input-focus-border); box-shadow: var(--input-focus-shadow); background-color: var(--input-bg); color: var(--text-color); } .dap-auth-body .form-label { font-weight: 500; font-size: 0.88rem; color: var(--text-color); margin-bottom: 5px; } [data-theme="dark"] .dap-auth-body .form-label { color: var(--text-light); } .dap-auth-body .form-check-input { border: 2px solid var(--input-border); transition: all 0.3s ease; } .dap-auth-body .form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); } .dap-auth-body .form-check-input:focus { box-shadow: var(--input-focus-shadow); } .dap-auth-body .form-text { font-size: 0.8rem; color: var(--text-muted); } .dap-auth-body .input-group-text { background-color: var(--bg-card-alt); border: 2px solid var(--input-border); color: var(--secondary-color); border-right: none; transition: all 0.3s ease; } .dap-auth-body .input-group:focus-within .input-group-text { border-color: var(--input-focus-border); color: var(--primary-color); } .dap-auth-body .input-group .btn-outline-secondary { border: 2px solid var(--input-border); color: var(--secondary-color); border-left: none; transition: all 0.3s ease; } .dap-auth-body .input-group:focus-within .btn-outline-secondary { border-color: var(--input-focus-border); color: var(--primary-color); } .dap-auth-body .input-group .btn-outline-secondary:hover { background: var(--bg-card-alt); color: var(--primary-color); } .dap-auth-body a { color: var(--primary-color); transition: color 0.3s ease; } .dap-auth-body a:hover { color: var(--accent-color); } .dap-placement-group { display: flex; gap: 20px; } .dap-placement-group .form-check { display: flex; align-items: center; gap: 10px; background: var(--bg-card-alt); padding: 12px 20px; border-radius: var(--border-radius); cursor: pointer; transition: all 0.3s ease; border: 2px solid var(--border-color); flex: 1; margin: 0; } .dap-placement-group .form-check .form-check-input { position: relative; float: none; margin: 0; width: 20px; height: 20px; min-width: 20px; border: 2px solid var(--input-border); background-color: var(--input-bg); appearance: none; -webkit-appearance: none; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; flex-shrink: 0; } .dap-placement-group .form-check .form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); background-image: none; box-shadow: inset 0 0 0 3px var(--bg-card); } .dap-placement-group .form-check .form-check-input:focus { box-shadow: 0 0 0 3px var(--primary-glow); border-color: var(--primary-color); } .dap-placement-group .form-check:hover { border-color: var(--secondary-color); } .dap-placement-group .form-check:has(.form-check-input:checked) { border-color: var(--primary-color); background: rgba(124, 58, 237, 0.08); box-shadow: 0 0 0 3px var(--primary-glow); } [data-theme="dark"] .dap-placement-group .form-check:has(.form-check-input:checked) { background: rgba(167, 139, 250, 0.1); } .dap-placement-group .form-check-label { font-weight: 500; cursor: pointer; margin-bottom: 0; color: var(--text-color); } [data-theme="dark"] .dap-placement-group .form-check-label { color: var(--text-light); } /* ---------- FOOTER ---------- */ .dap-footer { background-color: var(--footer-bg); color: var(--footer-text); padding: 60px 0 30px; border-top: 2px solid rgba(124,58,237,0.15); } .footer-brand { font-size: 1.3rem; font-weight: 700; color: var(--text-light); margin-bottom: 16px; } .footer-brand i { color: var(--accent-color); } .footer-desc { font-size: 0.9rem; line-height: 1.7; color: rgba(255, 255, 255, 0.6); margin-bottom: 20px; } .footer-social { display: flex; gap: 12px; } .footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); font-size: 1rem; transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.1); } .footer-social a:hover { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); color: #fff; border-color: transparent; transform: translateY(-4px) scale(1.1); box-shadow: 0 6px 20px var(--primary-glow); } .footer-heading { font-weight: 600; color: var(--text-light); margin-bottom: 20px; font-size: 1rem; position: relative; padding-bottom: 10px; } .footer-heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 3px; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); border-radius: 2px; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; transition: all 0.3s ease; padding-left: 0; border-bottom: 1px solid transparent; } .footer-links a:hover { color: var(--accent-color); padding-left: 8px; border-bottom-color: var(--accent-color); } .footer-contact li { display: flex; align-items: flex-start; color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; } .footer-contact li i { color: var(--accent-color); margin-top: 3px; } .footer-divider { border-color: rgba(124,58,237,0.15); margin: 40px 0 20px; } .footer-copyright { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); } .footer-bottom-links { list-style: none; display: flex; gap: 20px; padding: 0; justify-content: flex-end; } .footer-bottom-links a { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); transition: color 0.3s ease; } .footer-bottom-links a:hover { color: var(--accent-color); } /* ---------- MAP PLACEHOLDER ---------- */ [data-theme="dark"] .dap-section-light .text-center i.bi-map, [data-theme="dark"] .dap-section-light .text-center p { color: var(--secondary-color) !important; } /* ---------- BACK TO TOP BUTTON ---------- */ .dap-back-to-top { position: fixed; bottom: 30px; right: 30px; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); color: var(--text-light); border: none; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px var(--primary-glow); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; z-index: 999; } .dap-back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .dap-back-to-top:hover { transform: translateY(-4px) scale(1.1); box-shadow: 0 8px 28px var(--accent-glow); } /* ---------- GLOBAL DARK-MODE OVERRIDES ---------- */ [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .text-danger { color: var(--danger-color) !important; } [data-theme="dark"] .form-text { color: var(--text-muted) !important; } [data-theme="dark"] .form-check-label { color: var(--text-color); } /* Map placeholder in dark mode */ [data-theme="dark"] div[style*="background: #dee2e6"] { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; } /* ---------- SELECTION HIGHLIGHT ---------- */ ::selection { background: var(--primary-color); color: #fff; } /* ---------- SCROLLBAR ---------- */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg-body); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary-color), var(--accent-color)); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-hover); } /* ---------- ANIMATIONS ---------- */ .dap-animate { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .dap-animate.dap-visible { opacity: 1; transform: translateY(0); } .dap-animate-delay-1 { transition-delay: 0.1s; } .dap-animate-delay-2 { transition-delay: 0.2s; } .dap-animate-delay-3 { transition-delay: 0.3s; } .dap-animate-delay-4 { transition-delay: 0.4s; } .dap-animate-delay-5 { transition-delay: 0.5s; } .dap-animate-delay-6 { transition-delay: 0.6s; } /* ---------- PASSWORD TOGGLE ---------- */ .dap-password-wrapper { position: relative; } .dap-password-toggle { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); background: none; border: none; color: var(--secondary-color); cursor: pointer; padding: 0; font-size: 1.1rem; } .dap-password-toggle:hover { color: var(--primary-color); } /* ---------- RESPONSIVE ---------- */ @media (max-width: 991.98px) { .dap-hero h1 { font-size: 2.5rem; } .dap-section { padding: 60px 0; } .dap-hero-stats { gap: 24px; } .dap-hero-image { margin-top: 40px; } .dap-auth-body { padding: 28px; } } @media (max-width: 767.98px) { .dap-hero { min-height: auto; padding: 80px 0 60px; } .dap-hero h1 { font-size: 2rem; } .dap-hero-stats { flex-wrap: wrap; gap: 16px; } .dap-section-title { font-size: 1.75rem; } .hero-icon-grid { grid-template-columns: repeat(2, 1fr) !important; max-width: 260px !important; } .dap-contact-form { padding: 28px 20px; } .dap-contact-info-card { padding: 28px 20px; } .dap-auth-body { padding: 24px 20px; } .dap-auth-header { padding: 24px 20px; } .dap-placement-group { flex-direction: column; gap: 10px; } .footer-bottom-links { justify-content: center; margin-top: 10px; } .dap-cta-banner h2 { font-size: 1.8rem; } .dap-page-header h1 { font-size: 2rem; } .dap-theme-toggle { width: 38px; height: 38px; font-size: 1rem; } } @media (max-width: 575.98px) { .dap-hero h1 { font-size: 1.75rem; } .dap-hero p { font-size: 1rem; } .dap-btn-primary, .dap-btn-outline { padding: 10px 24px; font-size: 0.9rem; } .dap-btn-accent { padding: 9px 20px; font-size: 0.88rem; } .dap-hero-stats { gap: 10px; } .dap-hero-stat { padding: 12px 14px; flex: 1; min-width: 0; } .dap-hero-stat h3 { font-size: 1.5rem; } .dap-hero-stat p { font-size: 0.78rem; } .dap-section { padding: 50px 0; } .dap-section-title { font-size: 1.5rem; } .dap-section-subtitle { font-size: 0.95rem; margin-bottom: 1.8rem; } .dap-product-card { padding: 28px 18px; } .dap-benefit-card { padding: 24px 18px; } .dap-vision-card { padding: 28px 20px; } .dap-cta-banner { padding: 50px 0; } .dap-cta-banner h2 { font-size: 1.5rem; } .dap-cta-banner p { font-size: 0.95rem; } .dap-page-header { padding: 50px 0 40px; } .dap-page-header h1 { font-size: 1.75rem; } .dap-value-item { padding: 12px 10px; } .dap-auth-card { border-radius: 14px; } .dap-auth-tabs .nav-link { padding: 10px 16px; font-size: 0.9rem; } .dap-footer { padding: 40px 0 20px; } .footer-bottom-links { flex-wrap: wrap; gap: 12px; } } @media (max-width: 399.98px) { .container { padding-left: 12px; padding-right: 12px; } .dap-brand { font-size: 1.15rem; } .dap-hero { padding: 60px 0 40px; } .dap-hero h1 { font-size: 1.45rem; line-height: 1.25; } .dap-hero p { font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.4rem; } .dap-hero-content .d-flex { flex-direction: column; gap: 10px !important; } .dap-hero-content .d-flex .btn { width: 100%; text-align: center; } .dap-hero-stats { flex-direction: column; gap: 8px; margin-top: 2rem; } .dap-hero-stat { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .dap-hero-stat h3 { font-size: 1.4rem; margin-bottom: 0; } .dap-hero-stat p { font-size: 0.8rem; margin-bottom: 0; } .dap-section { padding: 40px 0; } .dap-section-title { font-size: 1.3rem; } .dap-section-subtitle { font-size: 0.88rem; margin-bottom: 1.5rem; } .dap-product-card { padding: 24px 14px; } .dap-product-icon { width: 64px; height: 64px; } .dap-product-icon i { font-size: 1.6rem; } .dap-product-card h5, .dap-benefit-card h5, .dap-vision-card h5 { font-size: 1rem; } .dap-product-card p, .dap-benefit-card p, .dap-vision-card p { font-size: 0.84rem; } .dap-benefit-card { padding: 20px 14px; } .dap-benefit-card .benefit-icon { width: 46px; height: 46px; } .dap-benefit-card .benefit-icon i { font-size: 1.2rem; } .dap-vision-card { padding: 24px 16px; } .dap-vision-card .vision-icon { width: 64px; height: 64px; } .dap-vision-card .vision-icon i { font-size: 1.6rem; } .dap-value-item { gap: 12px; padding: 10px 8px; } .dap-value-item .value-icon { width: 40px; height: 40px; min-width: 40px; } .dap-value-item .value-icon i { font-size: 1.1rem; } .dap-value-item h6 { font-size: 0.9rem; } .dap-value-item p { font-size: 0.82rem; } .dap-cta-banner { padding: 40px 0; } .dap-cta-banner h2 { font-size: 1.25rem; } .dap-cta-banner p { font-size: 0.88rem; } .dap-cta-banner .btn { width: 100%; padding: 12px 20px !important; } .dap-page-header { padding: 40px 0 30px; } .dap-page-header h1 { font-size: 1.5rem; } .dap-contact-form { padding: 20px 14px; } .dap-contact-info-card { padding: 20px 14px; } .dap-contact-info-item { gap: 12px; padding: 10px 8px; } .dap-contact-info-item .info-icon { width: 40px; height: 40px; min-width: 40px; } .dap-contact-info-item .info-icon i { font-size: 1rem; } .dap-contact-info-item h6 { font-size: 0.88rem; } .dap-contact-info-item p, .dap-contact-info-item a { font-size: 0.84rem; } .dap-auth-card { border-radius: 12px; margin: 0 4px; } .dap-auth-header { padding: 20px 14px; } .dap-auth-header h3 { font-size: 1.15rem; } .dap-auth-header p { font-size: 0.8rem; } .dap-auth-body { padding: 20px 14px; } .dap-auth-tabs .nav-link { padding: 8px 12px; font-size: 0.85rem; } .dap-auth-body .form-control, .dap-auth-body .form-select { padding: 9px 12px; font-size: 0.88rem; } .dap-auth-body .form-label { font-size: 0.82rem; } .dap-auth-body .btn { padding: 10px 16px !important; font-size: 0.9rem; } .dap-footer { padding: 30px 0 16px; } .footer-brand { font-size: 1.1rem; } .footer-desc { font-size: 0.82rem; } .footer-heading { font-size: 0.92rem; margin-bottom: 14px; } .footer-links a { font-size: 0.82rem; } .footer-social a { width: 36px; height: 36px; font-size: 0.9rem; } .footer-bottom-links { flex-direction: column; align-items: center; gap: 6px; } .footer-bottom-links a { font-size: 0.78rem; } .footer-copyright { font-size: 0.78rem; } .dap-back-to-top { width: 40px; height: 40px; font-size: 1.2rem; bottom: 16px; right: 16px; } .dap-theme-toggle { width: 34px; height: 34px; font-size: 0.9rem; } .dap-accent-bar { width: 45px; height: 3px; } } /* ---------- EXTRA-SMALL (≤ 359px, e.g. 310-359px viewports) ---------- */ @media (max-width: 359.98px) { .dap-navbar .container { padding-left: 10px; padding-right: 10px; } .dap-brand { font-size: 0.95rem; } .dap-brand i { margin-right: 4px !important; font-size: 0.85rem; } .dap-theme-toggle { width: 30px; height: 30px; font-size: 0.8rem; } .navbar-toggler { padding: 4px 6px; font-size: 0.9rem; } .dap-hero h1 { font-size: 1.25rem; } .dap-hero p { font-size: 0.85rem; } .dap-section-title { font-size: 1.15rem; } .dap-auth-tabs .nav-link { padding: 7px 8px; font-size: 0.8rem; } .dap-auth-body .form-control, .dap-auth-body .form-select { padding: 8px 10px; font-size: 0.84rem; } .dap-page-header h1 { font-size: 1.3rem; } .dap-cta-banner h2 { font-size: 1.1rem; } footer .container { padding-left: 10px; padding-right: 10px; } }