@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); :root { --primary: #D4511A; /* Deep Saffron */ --primary-glow: rgba(212, 81, 26, 0.2); --secondary: #C8960C; /* Antique Gold */ --accent: #8B0000; /* Sacred Maroon */ --text-light: #1A1A1A; /* Main dark text */ --text-dim: #555555; /* Muted grey text */ --bg-dark: #FDF8F3; /* Warm white background */ --bg-card: #FFFFFF; /* Pure white cards */ --glass: rgba(255, 255, 255, 0.85); --glass-border: rgba(212, 81, 26, 0.15); --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; } body { background-color: var(--bg-dark); color: var(--text-light); font-family: 'Inter', sans-serif; line-height: 1.6; overflow-x: hidden; } h1, h2, h3, h4 { font-family: 'Inter', sans-serif; font-weight: 700; } /* Glassmorphism Utility */ .glass { background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); } /* Typography Helpers */ .gradient-text { background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Layout */ .container { max-width: 1240px; margin: 0 auto; padding: 0 2.5rem; width: 100%; } .section-padding { padding: 90px 0; } /* Fixed header offset for all inner pages */ body > section:first-of-type, body > div:first-of-type { padding-top: 0; } .page-top-offset { margin-top: 88px; } /* ── Premium Donate Button ── */ .btn-premium { padding: 13px 32px; border-radius: 50px; border: none; background: linear-gradient(135deg, #E8561E 0%, #C8390A 50%, #8B0000 100%); color: #FFFFFF !important; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.5px; cursor: pointer; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; display: inline-block; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(212, 81, 26, 0.35), 0 0 0 0 rgba(212, 81, 26, 0); -webkit-text-fill-color: #FFFFFF; } /* Shimmer sweep on hover */ .btn-premium::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient( 120deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100% ); transition: left 0.55s ease; pointer-events: none; } .btn-premium:hover::before { left: 160%; } .btn-premium:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 25px rgba(212, 81, 26, 0.5), 0 0 0 4px rgba(212, 81, 26, 0.15); color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; } .btn-premium:active { transform: translateY(-1px) scale(1.01); } /* Pulsing glow ring — only on the header Donate button */ header .btn-premium { animation: donatePulse 2.5s ease-in-out infinite; font-size: 0.9rem; padding: 11px 26px; } @keyframes donatePulse { 0% { box-shadow: 0 4px 15px rgba(212,81,26,0.35), 0 0 0 0 rgba(212,81,26,0.4); } 60% { box-shadow: 0 4px 15px rgba(212,81,26,0.35), 0 0 0 8px rgba(212,81,26,0); } 100% { box-shadow: 0 4px 15px rgba(212,81,26,0.35), 0 0 0 0 rgba(212,81,26,0); } } header .btn-premium:hover { animation: none; transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 28px rgba(212, 81, 26, 0.55), 0 0 0 5px rgba(212, 81, 26, 0.12); } .btn-outline { padding: 12px 30px; border-radius: 50px; border: 1px solid var(--primary); background: transparent; color: var(--primary); font-weight: 600; cursor: pointer; transition: var(--transition); text-decoration: none; } .btn-outline:hover { background: var(--primary); color: white; } /* Header */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1.5rem 0; transition: var(--transition); } header.scrolled { background: rgba(253, 248, 243, 0.96); backdrop-filter: blur(20px); padding: 1rem 0; border-bottom: 1px solid var(--glass-border); box-shadow: 0 2px 20px rgba(0,0,0,0.08); } .nav-container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.8rem; font-weight: 800; color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 10px; } .nav-links { display: flex; gap: 30px; align-items: center; } .nav-links a { text-decoration: none; color: #333333; font-weight: 600; transition: var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--primary); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 1s ease forwards; } /* Light Theme Form Inputs */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="file"], textarea, select { color: #1A1A1A !important; background: #FFFFFF !important; border-color: rgba(212, 81, 26, 0.25) !important; } /* Section background alternation */ section:nth-child(even) { background: #FFF5EE; } /* Card hover lift for light mode */ .glass:hover { box-shadow: 0 8px 30px rgba(212, 81, 26, 0.12); } /* ═══════════════════════════════════════ RESPONSIVE — TABLET (≤ 1100px) ═══════════════════════════════════════ */ @media (max-width: 1100px) { .container { padding: 0 2rem; } .section-padding { padding: 70px 0; } } /* ═══════════════════════════════════════ RESPONSIVE — TABLET (≤ 900px) ═══════════════════════════════════════ */ @media (max-width: 900px) { .container { padding: 0 1.5rem; } .section-padding { padding: 60px 0; } header { background: rgba(253, 248, 243, 0.98) !important; backdrop-filter: blur(16px); border-bottom: 1px solid var(--glass-border); box-shadow: 0 2px 12px rgba(0,0,0,0.07); } .btn-premium, .btn-outline { font-size: 0.9rem; padding: 11px 22px; } /* Section top offset for fixed header */ .section-padding:first-of-type { padding-top: 80px; } } /* ═══════════════════════════════════════ RESPONSIVE — MOBILE (≤ 480px) ═══════════════════════════════════════ */ @media (max-width: 480px) { .container { padding: 0 1rem; } .section-padding { padding: 50px 0; } h2 { font-size: clamp(1.5rem, 6vw, 2.2rem); } h3 { font-size: clamp(1.2rem, 5vw, 1.6rem); } .glass { border-radius: 14px; } .btn-premium, .btn-outline { padding: 10px 20px; font-size: 0.85rem; } /* ID Card on success page */ .id-card { width: 100% !important; min-height: auto !important; } } @keyframes spin { 100% { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; text-shadow: 0 2px 10px rgba(212, 81, 26, 0.2); } 50% { opacity: 0.7; transform: scale(0.98); text-shadow: 0 2px 20px rgba(212, 81, 26, 0.6); } }