:root { --primary-pink: #ff69b4; /* HotPink - softer than DeepPink */ --vibrant-pink: #ff85b2; --light-pink: #fff0f5; /* LavenderBlush */ --accent-gold: #ffd700; --bg-bright: #fffafa; /* Snow */ --text-main: #444; --glass-bg: rgba(255, 255, 255, 0.9); --glass-border: rgba(255, 105, 180, 0.3); } body.bg-wealth { background: linear-gradient(135deg, #ffb6c1, #ffc0cb, #fff0f5); background-attachment: fixed; color: var(--text-main); font-family: 'Noto Sans SC', 'Inter', -apple-system, sans-serif; min-height: 100vh; -webkit-font-smoothing: antialiased; } /* Glassmorphism Effects */ .glass-nav { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px); border-bottom: 2px solid var(--primary-pink); } .glass-card { background: var(--glass-bg); backdrop-filter: blur(15px); border: 3px solid var(--primary-pink) !important; border-radius: 24px !important; box-shadow: 0 10px 30px rgba(255, 105, 180, 0.15) !important; } .icon-circle.bg-gold { background: linear-gradient(135deg, var(--primary-pink), var(--vibrant-pink)); box-shadow: 0 0 15px rgba(255, 105, 180, 0.3); color: white !important; } .icon-circle.bg-success { background: linear-gradient(135deg, #00c853, #b2ff59); } /* Navbar & Brand */ .logo-wrapper { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; overflow: hidden; border: 2px solid var(--primary-pink); box-shadow: 0 0 10px rgba(255, 105, 180, 0.2); } .brand-text { font-size: 1.4rem; background: linear-gradient(135deg, var(--primary-pink) 0%, #ff1493 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900 !important; } .text-glow { text-shadow: 0 0 10px rgba(255, 105, 180, 0.1); } /* Animations */ @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotating { animation: rotating 15s linear infinite; } /* Carousel */ #mainCarousel { border: 3px solid var(--primary-pink); } .hero-img { height: 220px; object-fit: cover; filter: brightness(0.95); } .carousel-overlay { background: linear-gradient(to top, rgba(255, 105, 180, 0.3), transparent); } .carousel-caption h2 { font-size: 2.2rem !important; text-shadow: 1px 1px 3px rgba(0,0,0,0.2); color: white !important; } .slogan-text { color: white !important; font-weight: 700; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); } /* Inputs & Outputs */ .glass-input { background: #fff !important; border: 2px solid var(--primary-pink) !important; color: var(--primary-pink) !important; border-radius: 12px !important; transition: all 0.3s ease; font-weight: 700 !important; font-size: 1.1rem !important; } .glass-input::placeholder { color: #ffb6c1 !important; font-weight: 500; text-shadow: 1px 1px 2px rgba(255, 105, 180, 0.2); opacity: 0.8; } .glass-input:focus { background: #fff !important; border-color: #ff1493 !important; box-shadow: 0 0 0 4px rgba(255, 105, 180, 0.2) !important; transform: scale(1.01); } .form-label { color: var(--primary-pink) !important; font-weight: 800 !important; font-size: 1rem; margin-bottom: 0.5rem; } .result-container-dark { background: #fff; border: 3px solid var(--primary-pink); color: var(--primary-pink); font-family: 'Noto Sans SC', sans-serif; white-space: pre-wrap; line-height: 1.8; font-size: 1.1rem; font-weight: 700; box-shadow: inset 0 2px 8px rgba(255, 105, 180, 0.1); } /* Buttons */ .btn-gold { background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%); border: none; color: white !important; border-radius: 15px; box-shadow: 0 6px 15px rgba(255, 105, 180, 0.3); transition: all 0.3s ease; font-size: 1.2rem; } .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 105, 180, 0.4); filter: brightness(1.05); } .btn-gold-outline { border: 2px solid var(--primary-pink); color: var(--primary-pink); border-radius: 12px; transition: all 0.2s; font-weight: 800; } .btn-gold-outline:hover { background: var(--primary-pink); color: #fff; } .btn-outline-light { border: 2px solid var(--primary-pink); color: var(--primary-pink); background: white; } .btn-outline-light:hover { background: #fff5f8; color: var(--primary-pink); border-color: #ff1493; } .text-light-muted { color: var(--primary-pink); opacity: 0.8; font-weight: 600; } /* Footer & Logo */ .footer { border-top: 4px solid var(--primary-pink); color: var(--primary-pink) !important; background: #fff !important; } .footer-logo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-pink); } /* Instructions Section */ .instruction-card { background: #fff5f8; border-left: 5px solid var(--primary-pink); border-radius: 12px; } .instruction-step { display: flex; align-items: center; margin-bottom: 1rem; } .step-number { width: 28px; height: 28px; background: var(--primary-pink); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 900; margin-right: 12px; flex-shrink: 0; } /* Responsive */ @media (max-width: 768px) { .hero-img { height: 160px; } .carousel-caption h2 { font-size: 1.5rem !important; } } .logo-img { width: 100%; height: 100%; object-fit: cover; display: block; } .marked-label { font-weight: 900 !important; font-size: 1.1rem !important; color: #ff1493 !important; } hr { border-top: 2px solid var(--primary-pink) !important; opacity: 0.2 !important; } #real-time-clock { color: var(--primary-pink) !important; }