/* ============================================
EDGAR FOUNDATION - PREMIUM DESIGN SYSTEM v2
Stunning. Warm. Inspiring.
============================================ */
:root {
--primary: #0A6847;
--primary-light: #15803d;
--primary-dark: #064e33;
--primary-rgb: 10, 104, 71;
--accent: #F2A900;
--accent-light: #fbbf24;
--accent-dark: #d97706;
--accent-rgb: 242, 169, 0;
--secondary: #1e3a5f;
--dark: #0f172a;
--dark-light: #1e293b;
--text: #334155;
--text-light: #64748b;
--text-lighter: #94a3b8;
--bg: #ffffff;
--bg-light: #f8fafc;
--bg-alt: #f1f5f9;
--bg-warm: #fefcf3;
--border: #e2e8f0;
--success: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--info: #3b82f6;
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 22px;
--radius-xl: 32px;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);
--shadow: 0 8px 30px rgba(0, 0, 0, .08);
--shadow-lg: 0 15px 50px rgba(0, 0, 0, .12);
--shadow-xl: 0 25px 80px rgba(0, 0, 0, .18);
--shadow-glow: 0 0 40px rgba(var(--primary-rgb), .15);
--shadow-accent-glow: 0 0 40px rgba(var(--accent-rgb), .2);
--transition: .35s cubic-bezier(.4, 0, .2, 1);
--transition-bounce: .5s cubic-bezier(.68, -.55, .27, 1.55);
--font: 'Inter', system-ui, sans-serif;
--font-heading: 'Playfair Display', Georgia, serif;
}
/* RESET */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0
}
html {
scroll-behavior: smooth;
font-size: 16px
}
body {
font-family: var(--font);
color: var(--text);
line-height: 1.7;
background: var(--bg);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
img {
max-width: 100%;
height: auto;
display: block
}
a {
color: var(--primary);
text-decoration: none;
transition: var(--transition)
}
a:hover {
color: var(--primary-light)
}
ul {
list-style: none
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
color: var(--dark);
line-height: 1.25;
font-weight: 700
}
h1 {
font-size: clamp(2.4rem, 5vw, 3.8rem)
}
h2 {
font-size: clamp(1.9rem, 4vw, 3rem)
}
h3 {
font-size: clamp(1.3rem, 3vw, 1.8rem)
}
p {
margin-bottom: 1rem
}
/* CONTAINER */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 2rem
}
/* ============================================
BUTTONS - PREMIUM STYLE
============================================ */
.btn {
display: inline-flex;
align-items: center;
gap: .6rem;
padding: .85rem 2rem;
border-radius: 50px;
font-family: var(--font);
font-weight: 600;
font-size: .95rem;
border: 2px solid transparent;
cursor: pointer;
transition: var(--transition);
text-align: center;
justify-content: center;
position: relative;
overflow: hidden;
letter-spacing: .02em
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
transition: .6s
}
.btn:hover::before {
left: 100%
}
.btn:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg)
}
.btn:active {
transform: translateY(-1px)
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: #fff;
border-color: transparent;
box-shadow: 0 4px 15px rgba(var(--primary-rgb), .3)
}
.btn-primary:hover {
box-shadow: 0 8px 25px rgba(var(--primary-rgb), .4);
color: #fff
}
.btn-accent {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
color: var(--dark);
border-color: transparent;
box-shadow: 0 4px 15px rgba(var(--accent-rgb), .3)
}
.btn-accent:hover {
box-shadow: 0 8px 25px rgba(var(--accent-rgb), .4);
color: var(--dark)
}
.btn-outline {
background: transparent;
color: var(--primary);
border-color: var(--primary)
}
.btn-outline:hover {
background: var(--primary);
color: #fff;
border-color: var(--primary)
}
.btn-outline-light {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, .4)
}
.btn-outline-light:hover {
background: #fff;
color: var(--primary);
border-color: #fff
}
.btn-white {
background: #fff;
color: var(--primary);
border-color: #fff;
box-shadow: var(--shadow)
}
.btn-white:hover {
background: var(--bg-light);
box-shadow: var(--shadow-lg)
}
.btn-sm {
padding: .55rem 1.4rem;
font-size: .85rem
}
.btn-lg {
padding: 1.1rem 2.8rem;
font-size: 1.05rem
}
/* ============================================
TOP BAR - SLEEK
============================================ */
.top-bar {
background: linear-gradient(90deg, var(--dark), var(--dark-light));
color: rgba(255, 255, 255, .8);
font-size: .82rem;
padding: .6rem 0;
border-bottom: 1px solid rgba(255, 255, 255, .06)
}
.top-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: .5rem
}
.top-bar-left {
display: flex;
gap: 1.5rem;
align-items: center
}
.top-bar-left a {
color: rgba(255, 255, 255, .75);
font-size: .82rem;
transition: var(--transition)
}
.top-bar-left a:hover {
color: var(--accent)
}
.top-bar-left i {
margin-right: .4rem;
color: var(--accent)
}
.top-bar-right .social-links {
display: flex;
gap: .5rem
}
.top-bar-right .social-links a {
color: rgba(255, 255, 255, .6);
font-size: .78rem;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .12);
transition: var(--transition)
}
.top-bar-right .social-links a:hover {
background: var(--accent);
color: var(--dark);
border-color: var(--accent);
transform: translateY(-2px)
}
/* ============================================
NAVIGATION - GLASSMORPHISM
============================================ */
.main-nav {
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: sticky;
top: 0;
z-index: 1000;
transition: var(--transition);
border-bottom: 1px solid rgba(0, 0, 0, .04)
}
.main-nav.scrolled {
box-shadow: 0 4px 30px rgba(0, 0, 0, .08);
background: rgba(255, 255, 255, .97)
}
.main-nav .container {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: .5rem;
padding-bottom: .5rem;
gap: .5rem
}
.nav-logo {
display: flex;
align-items: center;
gap: .6rem;
text-decoration: none;
flex-shrink: 0;
min-width: 0
}
.logo-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.3rem;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(var(--primary-rgb), .25);
transition: var(--transition)
}
.nav-logo:hover .logo-icon {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(var(--primary-rgb), .35)
}
.logo-text strong {
display: block;
color: var(--dark);
font-size: 1.05rem;
font-family: var(--font-heading);
line-height: 1.2;
white-space: nowrap
}
.logo-text small {
color: var(--text-light);
font-size: .65rem;
letter-spacing: .5px;
text-transform: uppercase;
white-space: nowrap
}
.nav-menu {
display: flex;
align-items: center;
gap: .5rem
}
.nav-links {
display: flex;
gap: .15rem;
align-items: center
}
.nav-links li a {
padding: .45rem .7rem;
color: var(--text);
font-weight: 500;
font-size: .88rem;
border-radius: 50px;
transition: var(--transition);
position: relative;
white-space: nowrap
}
.nav-links li a:hover,
.nav-links li a.active {
color: var(--primary);
background: rgba(var(--primary-rgb), .06)
}
.nav-links li a.active::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background: var(--primary);
border-radius: 50%
}
.has-dropdown {
position: relative
}
.has-dropdown .fa-chevron-down {
font-size: .6rem;
margin-left: 2px;
transition: var(--transition)
}
.has-dropdown:hover .fa-chevron-down {
transform: rotate(180deg)
}
.dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 230px;
background: rgba(255, 255, 255, .98);
backdrop-filter: blur(20px);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: .5rem;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition);
z-index: 100;
border: 1px solid rgba(0, 0, 0, .06)
}
.has-dropdown:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0)
}
.dropdown li a {
display: block;
padding: .6rem 1rem;
font-size: .88rem;
border-radius: var(--radius-sm)
}
.dropdown li a:hover {
background: rgba(var(--primary-rgb), .06)
}
.nav-actions {
display: flex;
gap: .5rem;
margin-left: .5rem
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: .5rem;
z-index: 1002
}
.nav-toggle span {
width: 24px;
height: 2.5px;
background: var(--dark);
border-radius: 2px;
transition: var(--transition);
transform-origin: center
}
/* Hamburger to X animation */
.nav-toggle.active span:nth-child(1) {
transform: translateY(7.5px) rotate(45deg)
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
transform: scaleX(0)
}
.nav-toggle.active span:nth-child(3) {
transform: translateY(-7.5px) rotate(-45deg)
}
/* Mobile nav overlay */
.nav-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .5);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: var(--transition);
backdrop-filter: blur(2px)
}
.nav-overlay.active {
opacity: 1;
visibility: visible
}
/* ============================================
HERO - FULLSCREEN IMAGE + OVERLAY
============================================ */
.hero {
position: relative;
min-height: min(88vh, 750px);
display: flex;
align-items: center;
overflow: hidden
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0
}
.hero-bg img {
width: 100%;
height: 100%;
object-fit: cover
}
.hero-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(10, 15, 30, .82) 0%, rgba(10, 104, 71, .65) 50%, rgba(30, 58, 95, .75) 100%)
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,');
z-index: 1;
pointer-events: none
}
.hero-content {
position: relative;
z-index: 2;
max-width: 640px;
flex: 1;
min-width: 0
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: .6rem;
background: rgba(255, 255, 255, .08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, .12);
color: #fff;
padding: .55rem 1.3rem;
border-radius: 50px;
font-size: .82rem;
font-weight: 500;
margin-bottom: 1.5rem;
animation: fadeInUp .8s ease
}
.hero-badge i {
color: var(--accent)
}
.hero h1 {
color: #fff;
margin-bottom: 1.2rem;
font-weight: 800;
animation: fadeInUp .8s ease .1s both;
letter-spacing: -.02em
}
.hero h1 span {
color: var(--accent);
display: inline;
position: relative
}
.hero h1 span::after {
content: '';
position: absolute;
bottom: 2px;
left: 0;
right: 0;
height: 4px;
background: var(--accent);
border-radius: 2px;
opacity: .4
}
.hero p {
color: rgba(255, 255, 255, .88);
font-size: 1.05rem;
line-height: 1.75;
margin-bottom: 2rem;
max-width: 560px;
animation: fadeInUp .8s ease .2s both
}
.hero-buttons {
display: flex;
gap: .75rem;
flex-wrap: wrap;
margin-bottom: 2rem;
animation: fadeInUp .8s ease .3s both
}
.hero-stats {
display: flex;
gap: 2.5rem;
flex-wrap: wrap;
animation: fadeInUp .8s ease .4s both;
padding: 1.5rem 2rem;
background: rgba(255, 255, 255, .06);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: var(--radius-lg)
}
.hero-stat {
text-align: center
}
.hero-stat .number {
display: block;
font-size: 2.2rem;
font-weight: 800;
color: var(--accent);
font-family: var(--font-heading);
line-height: 1
}
.hero-stat .label {
color: rgba(255, 255, 255, .7);
font-size: .82rem;
margin-top: .2rem
}
.hero-media {
position: relative;
z-index: 2;
animation: fadeInRight .8s ease .3s both
}
.hero-video-card {
background: rgba(255, 255, 255, .08);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: var(--radius-lg);
padding: 1.25rem;
width: 360px;
max-width: 100%;
box-shadow: 0 20px 50px rgba(0, 0, 0, .2)
}
.hero-video-thumb {
position: relative;
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 16/9;
background: var(--dark);
cursor: pointer
}
.hero-video-thumb img {
width: 100%;
height: 100%;
object-fit: cover
}
.play-btn {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .3);
transition: var(--transition)
}
.play-btn:hover {
background: rgba(0, 0, 0, .5)
}
.play-btn i {
font-size: 3.5rem;
color: #fff;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .3))
}
.hero .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem
}
.hero-floating {
position: absolute;
border-radius: 50%;
animation: float 8s ease-in-out infinite;
z-index: 1
}
.hero-floating:nth-child(1) {
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(var(--accent-rgb), .15), transparent);
top: -100px;
right: -100px;
animation-delay: 0s
}
.hero-floating:nth-child(2) {
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(var(--primary-rgb), .2), transparent);
bottom: -60px;
left: -60px;
animation-delay: 3s
}
.hero-floating:nth-child(3) {
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(var(--accent-rgb), .1), transparent);
bottom: 20%;
right: 25%;
animation-delay: 5s
}
@keyframes float {
0%,
100% {
transform: translateY(0) scale(1)
}
50% {
transform: translateY(-25px) scale(1.08)
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px)
}
to {
opacity: 1;
transform: translateX(0)
}
}
/* ============================================
SECTIONS - WITH DEPTH
============================================ */
.section {
padding: 6rem 0
}
.section-alt {
background: var(--bg-light)
}
.section-warm {
background: var(--bg-warm)
}
.section-dark {
background: linear-gradient(135deg, var(--dark), var(--secondary));
color: #fff
}
.section-dark h2,
.section-dark h3,
.section-dark h4 {
color: #fff
}
.section-dark p {
color: rgba(255, 255, 255, .8)
}
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 4rem
}
.section-header .overline {
display: inline-flex;
align-items: center;
gap: .5rem;
text-transform: uppercase;
font-size: .78rem;
font-weight: 700;
letter-spacing: 2.5px;
color: var(--primary);
margin-bottom: .75rem;
padding: .4rem 1rem;
background: rgba(var(--primary-rgb), .06);
border-radius: 50px
}
.section-header .overline i {
font-size: .5rem
}
.section-header h2 {
margin-bottom: 1rem
}
.section-header p {
color: var(--text-light);
font-size: 1.08rem
}
/* ============================================
CARDS - PREMIUM WITH HOVER EFFECTS
============================================ */
.card {
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
border: 1px solid rgba(0, 0, 0, .04);
height: 100%;
position: relative
}
.card::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, rgba(var(--primary-rgb), .03), transparent);
opacity: 0;
transition: var(--transition);
z-index: 0
}
.card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg)
}
.card:hover::before {
opacity: 1
}
.card-img {
height: 230px;
overflow: hidden;
position: relative
}
.card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition) .1s
}
.card:hover .card-img img {
transform: scale(1.08)
}
.card-body {
padding: 1.5rem;
position: relative;
z-index: 1
}
.card-body h3 {
font-size: 1.15rem;
margin-bottom: .75rem
}
.card-body p {
color: var(--text-light);
font-size: .92rem;
margin-bottom: 1rem
}
.card-tag {
display: inline-block;
background: rgba(var(--primary-rgb), .08);
color: var(--primary);
padding: .3rem .85rem;
border-radius: 50px;
font-size: .75rem;
font-weight: 600;
margin-bottom: .75rem;
letter-spacing: .3px
}
.card-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1
}
/* PROGRAM CARDS */
.program-card {
text-align: center;
padding: 2.5rem 2rem;
border: 1px solid rgba(0, 0, 0, .04);
border-radius: var(--radius-lg);
background: #fff;
transition: var(--transition);
position: relative;
overflow: hidden
}
.program-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--accent));
transform: scaleX(0);
transition: var(--transition);
transform-origin: left
}
.program-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg)
}
.program-card:hover::before {
transform: scaleX(1)
}
.program-card .icon {
width: 85px;
height: 85px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, rgba(var(--primary-rgb), .1), rgba(var(--primary-rgb), .04));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--primary);
transition: var(--transition-bounce)
}
.program-card:hover .icon {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: #fff;
transform: scale(1.12) rotate(5deg);
box-shadow: 0 8px 25px rgba(var(--primary-rgb), .3)
}
.program-card h3 {
margin-bottom: .75rem;
font-size: 1.1rem
}
.program-card p {
color: var(--text-light);
font-size: .9rem;
margin-bottom: 1.5rem
}
/* GRID */
.grid {
display: grid;
gap: 2rem
}
.grid-2 {
grid-template-columns: repeat(2, 1fr)
}
.grid-3 {
grid-template-columns: repeat(3, 1fr)
}
.grid-4 {
grid-template-columns: repeat(4, 1fr)
}
/* ============================================
IMPACT STATS - ANIMATED GRADIENT
============================================ */
.impact-section {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 40%, var(--primary-light) 100%);
padding: 5rem 0;
position: relative;
overflow: hidden
}
.impact-section::before {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,')
}
.impact-section::after {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(var(--accent-rgb), .15), transparent);
border-radius: 50%;
pointer-events: none
}
.stat-card {
text-align: center;
padding: 2.5rem 1.5rem;
position: relative;
z-index: 1
}
.stat-card .icon {
font-size: 2.5rem;
color: var(--accent);
margin-bottom: 1rem;
filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), .3))
}
.stat-card .value {
font-size: 3rem;
font-weight: 800;
color: #fff;
font-family: var(--font-heading);
line-height: 1;
text-shadow: 0 2px 10px rgba(0, 0, 0, .15)
}
.stat-card .label {
color: rgba(255, 255, 255, .75);
font-size: .92rem;
margin-top: .6rem;
font-weight: 500
}
/* ============================================
TEAM - ELEGANT
============================================ */
.team-card {
text-align: center;
padding: 2.5rem 2rem;
background: #fff;
border-radius: var(--radius-lg);
border: 1px solid rgba(0, 0, 0, .04);
transition: var(--transition);
position: relative;
overflow: hidden
}
.team-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--accent));
transform: scaleX(0);
transition: var(--transition);
transform-origin: center
}
.team-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg)
}
.team-card:hover::after {
transform: scaleX(1)
}
.team-card .avatar {
width: 130px;
height: 130px;
margin: 0 auto 1.5rem;
border-radius: 50%;
overflow: hidden;
padding: 4px;
background: linear-gradient(135deg, var(--primary), var(--accent));
box-shadow: 0 8px 25px rgba(var(--primary-rgb), .2)
}
.team-card .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 3px solid #fff
}
.team-card .avatar-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 2.2rem;
font-weight: 700;
font-family: var(--font-heading);
border: 3px solid #fff
}
.team-card h3 {
font-size: 1.15rem;
margin-bottom: .3rem
}
.team-card .role {
color: var(--primary);
font-weight: 600;
font-size: .88rem;
margin-bottom: 1rem
}
.team-card p {
font-size: .88rem;
color: var(--text-light);
line-height: 1.6
}
.team-card .social {
display: flex;
justify-content: center;
gap: .5rem;
margin-top: 1.25rem
}
.team-card .social a {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--border);
color: var(--text-light);
transition: var(--transition);
font-size: .85rem
}
.team-card .social a:hover {
background: var(--primary);
color: #fff;
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(var(--primary-rgb), .25)
}
/* ============================================
CAMPAIGNS / FUNDRAISE - EMOTIONAL
============================================ */
.campaign-card {
overflow: hidden
}
.campaign-progress {
margin: 1rem 0
}
.progress-bar {
height: 10px;
background: var(--bg-alt);
border-radius: 50px;
overflow: hidden;
position: relative
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--accent));
border-radius: 50px;
transition: width 2s cubic-bezier(.4, 0, .2, 1);
position: relative
}
.progress-fill::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: #fff;
border: 3px solid var(--accent);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(var(--accent-rgb), .3)
}
.progress-info {
display: flex;
justify-content: space-between;
margin-top: .6rem;
font-size: .82rem;
color: var(--text-light)
}
.progress-info strong {
color: var(--primary);
font-size: .9rem
}
/* ============================================
DONATE SECTION - WARM & INVITING
============================================ */
.donate-hero {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 40%, var(--primary-light) 100%);
padding: 5rem 0 6rem;
text-align: center;
color: #fff;
position: relative;
overflow: hidden
}
.donate-hero::before {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,')
}
.donate-hero::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 80px;
background: #fff;
clip-path: ellipse(55% 100% at 50% 100%)
}
.donate-amounts {
display: flex;
gap: .75rem;
flex-wrap: wrap;
justify-content: center;
margin: 2rem 0
}
.donate-amount {
padding: .85rem 2.2rem;
border: 2px solid rgba(255, 255, 255, .25);
border-radius: 50px;
color: #fff;
background: rgba(255, 255, 255, .08);
backdrop-filter: blur(5px);
cursor: pointer;
font-size: 1.1rem;
font-weight: 700;
transition: var(--transition);
font-family: var(--font);
position: relative;
overflow: hidden
}
.donate-amount::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
opacity: 0;
transition: var(--transition)
}
.donate-amount:hover,
.donate-amount.active {
border-color: var(--accent);
transform: translateY(-3px);
box-shadow: var(--shadow-accent-glow)
}
.donate-amount.active::before,
.donate-amount:hover::before {
opacity: 1
}
.donate-amount span {
position: relative;
z-index: 1
}
.donate-form-card {
background: #fff;
border-radius: var(--radius-xl);
padding: 3rem;
max-width: 620px;
margin: 2rem auto 0;
box-shadow: var(--shadow-xl);
color: var(--text);
position: relative;
z-index: 2;
border: 1px solid rgba(0, 0, 0, .04)
}
.donate-form-card h3 {
color: var(--dark);
margin-bottom: 1.5rem;
font-size: 1.4rem
}
/* ============================================
FORMS - POLISHED
============================================ */
.form-group {
margin-bottom: 1.25rem
}
.form-group label {
display: block;
font-weight: 600;
font-size: .88rem;
margin-bottom: .4rem;
color: var(--dark)
}
.form-control {
width: 100%;
padding: .85rem 1.1rem;
border: 2px solid var(--border);
border-radius: var(--radius);
font-size: .95rem;
font-family: var(--font);
transition: var(--transition);
background: #fff;
color: var(--text)
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .1)
}
textarea.form-control {
min-height: 120px;
resize: vertical
}
select.form-control {
appearance: none;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 20px;
padding-right: 40px
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem
}
.form-check {
display: flex;
align-items: center;
gap: .5rem;
font-size: .9rem
}
.form-check input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--primary)
}
/* ============================================
CTA SECTION - INSPIRING
============================================ */
.cta-section {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
padding: 6rem 0;
text-align: center;
position: relative;
overflow: hidden
}
.cta-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(var(--accent-rgb), .15), transparent);
border-radius: 50%
}
.cta-section::after {
content: '';
position: absolute;
bottom: -50%;
left: -20%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255, 255, 255, .05), transparent);
border-radius: 50%
}
.cta-section h2 {
color: #fff;
margin-bottom: 1rem;
position: relative;
z-index: 1
}
.cta-section p {
color: rgba(255, 255, 255, .88);
font-size: 1.15rem;
max-width: 600px;
margin: 0 auto 2.5rem;
position: relative;
z-index: 1
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
position: relative;
z-index: 1
}
/* ============================================
PAGE HEADER - PREMIUM
============================================ */
.page-header {
background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 60%, var(--primary-dark) 100%);
padding: 5rem 0 4rem;
text-align: center;
position: relative;
overflow: hidden
}
.page-header::before {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,')
}
.page-header::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 60px;
background: #fff;
clip-path: ellipse(55% 100% at 50% 100%)
}
.page-header h1 {
color: #fff;
margin-bottom: .5rem;
position: relative;
z-index: 1
}
.page-header p {
color: rgba(255, 255, 255, .78);
position: relative;
z-index: 1;
font-size: 1.1rem
}
.breadcrumb {
display: flex;
justify-content: center;
gap: .5rem;
margin-top: 1rem;
font-size: .85rem;
color: rgba(255, 255, 255, .5);
position: relative;
z-index: 1
}
.breadcrumb a {
color: rgba(255, 255, 255, .75)
}
.breadcrumb a:hover {
color: var(--accent)
}
/* GALLERY */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.25rem
}
.gallery-item {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4/3;
cursor: pointer;
box-shadow: var(--shadow-sm)
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition) .1s
}
.gallery-item:hover img {
transform: scale(1.08)
}
.gallery-item .overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, transparent 60%);
opacity: 0;
transition: var(--transition);
display: flex;
align-items: flex-end;
padding: 1.5rem
}
.gallery-item:hover .overlay {
opacity: 1
}
.gallery-item .overlay h4 {
color: #fff;
font-size: 1rem
}
/* BLOG */
.blog-card .card-meta {
display: flex;
gap: 1rem;
font-size: .82rem;
color: var(--text-light);
margin-bottom: .75rem
}
.blog-card .card-meta i {
margin-right: .3rem;
color: var(--primary)
}
/* EVENT */
.event-card {
display: flex;
gap: 1.5rem;
padding: 1.5rem;
background: #fff;
border-radius: var(--radius-lg);
border: 1px solid rgba(0, 0, 0, .04);
transition: var(--transition);
box-shadow: var(--shadow-sm)
}
.event-card:hover {
box-shadow: var(--shadow);
transform: translateY(-4px)
}
.event-date-badge {
flex-shrink: 0;
width: 85px;
text-align: center;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: var(--radius);
padding: 1.2rem .5rem;
color: #fff;
box-shadow: 0 4px 12px rgba(var(--primary-rgb), .25)
}
.event-date-badge .month {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: 1.5px;
opacity: .8;
display: block
}
.event-date-badge .day {
font-size: 2.2rem;
font-weight: 800;
line-height: 1;
display: block
}
.event-date-badge .year {
font-size: .7rem;
opacity: .7;
display: block
}
.event-info h3 {
font-size: 1.1rem;
margin-bottom: .5rem
}
.event-info p {
font-size: .9rem;
color: var(--text-light)
}
.event-meta {
display: flex;
gap: 1.5rem;
margin-top: .75rem;
font-size: .82rem;
color: var(--text-light)
}
.event-meta i {
margin-right: .3rem;
color: var(--primary)
}
/* VIDEO */
.video-section {
padding: 6rem 0;
background: var(--bg-light)
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg)
}
.video-wrapper iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none
}
/* ============================================
FOOTER - PREMIUM DARK
============================================ */
.site-footer {
background: linear-gradient(180deg, var(--dark) 0%, #070d1a 100%);
color: rgba(255, 255, 255, .75);
position: relative;
margin-top: 0
}
.footer-wave {
color: var(--dark);
margin-bottom: -2px
}
.footer-wave svg {
display: block;
width: 100%;
height: 70px
}
.footer-main {
padding: 4rem 0 2.5rem
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
gap: 2.5rem
}
.footer-logo {
display: flex;
align-items: center;
gap: .75rem;
margin-bottom: 1.25rem
}
.footer-logo .logo-icon {
width: 44px;
height: 44px;
font-size: 1rem
}
.footer-logo .logo-text strong {
color: #fff
}
.footer-logo .logo-text small {
color: rgba(255, 255, 255, .5)
}
.footer-about p {
font-size: .9rem;
line-height: 1.7
}
.reg-number {
color: var(--accent);
font-size: .85rem;
font-weight: 500
}
.footer-social {
display: flex;
gap: .6rem;
margin-top: 1.25rem
}
.footer-social a {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .6);
transition: var(--transition)
}
.footer-social a:hover {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: #fff;
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(var(--primary-rgb), .3)
}
.footer-col h4 {
color: #fff;
font-family: var(--font);
font-size: 1rem;
font-weight: 700;
margin-bottom: 1.25rem;
position: relative;
padding-bottom: .75rem
}
.footer-col h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-light));
border-radius: 2px
}
.footer-col ul li {
margin-bottom: .5rem
}
.footer-col ul li a {
color: rgba(255, 255, 255, .6);
font-size: .9rem;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: .4rem
}
.footer-col ul li a::before {
content: '';
width: 0;
height: 2px;
background: var(--accent);
transition: var(--transition);
border-radius: 1px
}
.footer-col ul li a:hover {
color: var(--accent);
padding-left: 0
}
.footer-col ul li a:hover::before {
width: 12px
}
.contact-list li {
display: flex;
gap: .75rem;
margin-bottom: .75rem;
font-size: .88rem
}
.contact-list li i {
color: var(--accent);
margin-top: 3px;
width: 16px
}
.contact-list li a {
color: rgba(255, 255, 255, .65)
}
.contact-list li a:hover {
color: var(--accent)
}
.newsletter-form {
margin-top: .75rem
}
.newsletter-input-group {
display: flex;
border-radius: 50px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .12);
background: rgba(255, 255, 255, .05)
}
.newsletter-input-group input {
flex: 1;
padding: .7rem 1rem;
border: none;
background: transparent;
color: #fff;
font-size: .88rem;
font-family: var(--font)
}
.newsletter-input-group input::placeholder {
color: rgba(255, 255, 255, .35)
}
.newsletter-input-group button {
padding: 0 1.2rem;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: #fff;
border: none;
cursor: pointer;
transition: var(--transition);
border-radius: 0 50px 50px 0
}
.newsletter-input-group button:hover {
background: var(--accent)
}
.newsletter-msg {
display: block;
margin-top: .4rem;
font-size: .8rem
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .06);
padding: 1.5rem 0;
text-align: center;
font-size: .84rem
}
.footer-bottom p {
margin-bottom: .2rem;
color: rgba(255, 255, 255, .4)
}
/* BACK TO TOP */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: #fff;
border: none;
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(20px);
transition: var(--transition);
z-index: 998;
box-shadow: 0 4px 15px rgba(var(--primary-rgb), .3)
}
.back-to-top.visible {
opacity: 1;
transform: translateY(0)
}
.back-to-top:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(var(--primary-rgb), .4)
}
/* ============================================
CHAT WIDGET - PREMIUM
============================================ */
.chat-widget {
position: fixed;
bottom: 2rem;
left: 2rem;
z-index: 999
}
.chat-toggle {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: #fff;
border: none;
cursor: pointer;
font-size: 1.4rem;
box-shadow: 0 6px 25px rgba(var(--primary-rgb), .35);
transition: var(--transition);
position: relative
}
.chat-toggle:hover {
transform: scale(1.08);
box-shadow: 0 8px 30px rgba(var(--primary-rgb), .45)
}
.chat-badge {
position: absolute;
top: -2px;
right: -2px;
width: 20px;
height: 20px;
background: var(--danger);
color: #fff;
font-size: .7rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700
}
.chat-box {
position: absolute;
bottom: 70px;
left: 0;
width: 370px;
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
overflow: hidden;
display: none;
animation: slideUp .3s ease;
border: 1px solid rgba(0, 0, 0, .06)
}
.chat-box.active {
display: block
}
.chat-header {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: #fff;
padding: 1.15rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: center
}
.chat-header-info {
display: flex;
align-items: center;
gap: .75rem
}
.chat-avatar {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, .2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center
}
.chat-header strong {
font-size: .95rem
}
.chat-header small {
display: block;
font-size: .75rem;
opacity: .8
}
.chat-close {
background: none;
border: none;
color: #fff;
font-size: 1.1rem;
cursor: pointer;
opacity: .8
}
.chat-close:hover {
opacity: 1
}
.chat-messages {
height: 280px;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
gap: .75rem
}
.chat-message {
max-width: 85%;
padding: .75rem 1rem;
border-radius: var(--radius);
font-size: .88rem;
line-height: 1.5
}
.chat-message.bot {
background: var(--bg-alt);
align-self: flex-start;
border-bottom-left-radius: 4px
}
.chat-message.user {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: #fff;
align-self: flex-end;
border-bottom-right-radius: 4px
}
.chat-message small {
display: block;
margin-top: .3rem;
font-size: .72rem;
opacity: .6
}
.chat-quick-actions {
padding: .5rem 1rem;
display: flex;
gap: .4rem;
flex-wrap: wrap;
border-top: 1px solid var(--border)
}
.chat-quick-actions button {
padding: .35rem .75rem;
border: 1px solid var(--border);
border-radius: 50px;
background: #fff;
font-size: .78rem;
cursor: pointer;
transition: var(--transition);
font-family: var(--font)
}
.chat-quick-actions button:hover {
background: var(--primary);
color: #fff;
border-color: var(--primary)
}
.chat-input-form {
display: flex;
border-top: 1px solid var(--border);
padding: .5rem
}
.chat-input-form input {
flex: 1;
padding: .6rem .75rem;
border: none;
font-size: .9rem;
font-family: var(--font)
}
.chat-input-form input:focus {
outline: none
}
.chat-input-form button {
padding: 0 1rem;
background: none;
border: none;
color: var(--primary);
font-size: 1.1rem;
cursor: pointer
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
/* ALERTS */
.alert {
padding: 1rem 1.5rem;
border-radius: var(--radius);
margin-bottom: 1.5rem;
font-size: .92rem;
display: flex;
align-items: center;
gap: .75rem
}
.alert-success {
background: #ecfdf5;
color: #065f46;
border: 1px solid #a7f3d0
}
.alert-danger {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca
}
.alert-warning {
background: #fffbeb;
color: #92400e;
border: 1px solid #fde68a
}
.alert-info {
background: #eff6ff;
color: #1e40af;
border: 1px solid #bfdbfe
}
/* PAGINATION */
.pagination {
display: flex;
justify-content: center;
gap: .4rem;
margin-top: 3rem
}
.pagination a,
.pagination span {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--border);
color: var(--text);
font-weight: 500;
transition: var(--transition)
}
.pagination a:hover,
.pagination .current {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: #fff;
border-color: var(--primary);
box-shadow: 0 4px 12px rgba(var(--primary-rgb), .25)
}
/* MODAL */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .65);
backdrop-filter: blur(6px);
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
padding: 1rem
}
.modal-overlay.active {
display: flex
}
.modal {
background: #fff;
border-radius: var(--radius-lg);
max-width: 600px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: slideUp .3s ease
}
.modal-header {
padding: 1.5rem;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center
}
.modal-header h3 {
margin: 0
}
.modal-close {
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: var(--text-light);
padding: .5rem
}
.modal-body {
padding: 1.5rem
}
.modal-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--border);
display: flex;
gap: .75rem;
justify-content: flex-end
}
/* ============================================
THANK YOU PAGE - CELEBRATION
============================================ */
.thank-you-hero {
min-height: 75vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, var(--bg-warm), var(--bg-light));
position: relative;
overflow: hidden
}
.thank-you-hero::before {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,')
}
.confetti-icon {
width: 120px;
height: 120px;
margin: 0 auto 2rem;
background: linear-gradient(135deg, var(--success), #34d399);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 15px 40px rgba(16, 185, 129, .3);
animation: bounceIn .8s cubic-bezier(.68, -.55, .27, 1.55)
}
.confetti-icon i {
font-size: 3.5rem;
color: #fff
}
@keyframes bounceIn {
0% {
transform: scale(0);
opacity: 0
}
60% {
transform: scale(1.15)
}
100% {
transform: scale(1);
opacity: 1
}
}
/* ============================================
LEGAL PAGES
============================================ */
.legal-content {
max-width: 800px;
margin: 0 auto;
padding: 2rem 0
}
.legal-content h2 {
font-size: 1.5rem;
margin: 2rem 0 1rem;
padding-bottom: .5rem;
border-bottom: 2px solid var(--border)
}
.legal-content h3 {
font-size: 1.2rem;
margin: 1.5rem 0 .75rem;
color: var(--primary)
}
.legal-content p,
.legal-content li {
line-height: 1.8;
color: var(--text)
}
.legal-content ul {
padding-left: 1.5rem;
margin-bottom: 1.5rem
}
.legal-content ul li {
margin-bottom: .5rem;
position: relative;
padding-left: .5rem
}
.legal-content ul li::before {
content: '•';
position: absolute;
left: -.5rem;
color: var(--primary);
font-weight: 700
}
/* ============================================
RESPONSIVE - COMPREHENSIVE
============================================ */
/* LARGE TABLETS & SMALL DESKTOPS */
/* LARGE TABLETS / SMALL LAPTOPS */
@media(max-width:1200px) {
.container {
padding: 0 1.5rem
}
.logo-text small {
display: none
}
.nav-links li a {
padding: .4rem .55rem;
font-size: .85rem
}
.nav-actions .btn {
padding: .45rem 1rem;
font-size: .82rem
}
}
@media(max-width:1024px) {
.grid-4 {
grid-template-columns: repeat(2, 1fr)
}
.hero {
min-height: auto;
padding: 4rem 0 3rem
}
.hero .container {
flex-direction: column;
text-align: center;
gap: 2rem
}
.hero-content {
max-width: 100%
}
.hero p {
margin-left: auto;
margin-right: auto
}
.hero-buttons {
justify-content: center
}
.hero-stats {
justify-content: center
}
.hero-media {
margin-top: 1rem
}
.hero-video-card {
width: 100%;
max-width: 400px;
margin: 0 auto
}
.footer-grid {
grid-template-columns: repeat(2, 1fr)
}
.impact-section .grid-4 {
grid-template-columns: repeat(2, 1fr)
}
.cta-section {
padding: 4.5rem 0
}
.team-card .avatar {
width: 110px;
height: 110px
}
.donate-hero {
padding: 7rem 0 4rem
}
.two-col-layout {
grid-template-columns: 1fr !important;
gap: 2rem !important
}
}
/* TABLETS & MOBILE LANDSCAPE */
@media(max-width:768px) {
.container {
padding: 0 1.25rem
}
/* Top bar */
.top-bar {
font-size: .78rem;
padding: .4rem 0
}
.top-bar-left {
display: none
}
.top-bar-right {
width: 100%;
justify-content: center
}
/* Mobile Navigation */
.nav-toggle {
display: flex
}
.nav-menu {
position: fixed;
top: 0;
right: -100%;
width: 85%;
max-width: 400px;
height: 100vh;
background: #fff;
flex-direction: column;
align-items: stretch;
padding: 5rem 2rem 2rem;
box-shadow: var(--shadow-xl);
transition: var(--transition);
z-index: 1001;
overflow-y: auto
}
.nav-menu.active {
right: 0
}
.nav-links {
flex-direction: column
}
.nav-links li a {
padding: .75rem 0;
display: block;
font-size: 1rem;
border-radius: 0
}
.nav-actions {
flex-direction: column;
margin-left: 0;
margin-top: 1rem
}
.nav-actions .btn {
width: 100%
}
.dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
padding-left: 1rem;
display: none;
backdrop-filter: none;
background: var(--bg-light)
}
.has-dropdown.open .dropdown {
display: block
}
/* Grids */
.grid-2,
.grid-3 {
grid-template-columns: 1fr
}
.grid-4 {
grid-template-columns: repeat(2, 1fr);
gap: 1rem
}
/* Forms */
.form-row {
grid-template-columns: 1fr
}
/* Sections */
.section {
padding: 4rem 0
}
.section-header {
margin-bottom: 2.5rem
}
.section-header h2 {
font-size: 1.8rem
}
.section-header p {
font-size: .95rem
}
/* Hero */
.hero {
min-height: auto;
padding: 4rem 0 3rem
}
.hero h1 {
font-size: 2rem
}
.hero p {
font-size: 1rem
}
.hero-buttons {
flex-direction: column;
align-items: center;
gap: .75rem
}
.hero-buttons .btn {
width: 100%;
max-width: 300px
}
.hero-video-card {
width: 100%
}
.hero-stats {
padding: 1rem 1.25rem;
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center
}
.hero-stat .number {
font-size: 1.8rem
}
.hero-floating {
display: none
}
/* Event cards */
.event-card {
flex-direction: column
}
.event-date-badge {
width: 100%;
padding: 1rem;
display: flex;
align-items: center;
gap: .75rem;
justify-content: center
}
.event-date-badge .day {
font-size: 1.5rem
}
.event-meta {
flex-direction: column;
gap: .5rem
}
/* Team */
.team-card .avatar {
width: 100px;
height: 100px
}
/* Campaign */
.campaign-progress .progress-info {
flex-direction: column;
gap: .3rem
}
/* Chat Widget */
.chat-widget {
left: 1rem;
bottom: 1rem
}
.chat-toggle {
width: 52px;
height: 52px;
font-size: 1.2rem
}
.chat-box {
width: calc(100vw - 2rem);
left: -1rem;
bottom: 62px
}
/* Footer */
.footer-grid {
grid-template-columns: 1fr;
gap: 2rem
}
.footer-main {
padding: 3rem 0 2rem
}
.footer-social {
justify-content: flex-start
}
.footer-bottom p {
font-size: .78rem
}
.footer-bottom a {
display: inline-block;
margin: .2rem .3rem !important;
font-size: .78rem
}
/* Back to top */
.back-to-top {
width: 42px;
height: 42px;
bottom: 1rem;
right: 1rem;
font-size: .9rem
}
/* Page Header */
.page-header {
padding: 5rem 0 3rem
}
.page-header h1 {
font-size: 1.8rem
}
/* Donate Page */
.donate-hero {
padding: 6rem 0 3.5rem
}
.donate-hero h1 {
font-size: 1.8rem !important
}
.donate-hero p {
font-size: .95rem !important
}
.donate-amounts {
gap: .5rem
}
.donate-amount {
padding: .7rem 1.2rem;
font-size: .88rem
}
.donate-form-card {
padding: 2rem 1.5rem;
margin: 0 auto;
border-radius: var(--radius-lg)
}
.currency-btn {
padding: .4rem .75rem !important;
font-size: .78rem !important
}
.donation-type-btn {
font-size: .82rem !important;
padding: .6rem .75rem !important
}
/* Thank You Page */
.thank-you-hero {
padding: 6rem 0 4rem;
min-height: auto
}
.confetti-icon {
width: 70px;
height: 70px
}
.confetti-icon i {
font-size: 1.6rem
}
/* Impact */
.impact-section {
padding: 3.5rem 0
}
.stat-card {
padding: 1.5rem 1rem
}
.stat-card .value {
font-size: 2.2rem
}
/* CTA */
.cta-section {
padding: 4rem 0
}
.cta-section p {
font-size: 1rem
}
.cta-buttons {
flex-direction: column;
align-items: center;
gap: .75rem
}
.cta-buttons .btn {
width: 100%;
max-width: 300px
}
/* Gallery */
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
gap: .75rem
}
/* Legal Content */
.legal-content {
padding: 1.5rem;
border-radius: var(--radius)
}
.legal-content h2 {
font-size: 1.15rem
}
/* Pagination */
.pagination {
gap: .3rem
}
.pagination a,
.pagination span {
width: 36px;
height: 36px;
font-size: .85rem
}
/* Modal */
.modal {
max-width: calc(100vw - 2rem);
margin: 1rem
}
/* About two-column */
.about-grid,
.two-col-layout {
grid-template-columns: 1fr !important
}
/* Cards */
.card-img {
height: 180px
}
.card-body {
padding: 1.25rem
}
/* Program cards */
.program-card {
padding: 2rem 1.5rem
}
.program-card .icon {
width: 70px;
height: 70px;
font-size: 1.6rem
}
/* Blog cards */
.blog-card .card-meta {
flex-wrap: wrap;
gap: .5rem
}
/* Trust badges */
.trust-badges {
gap: 1rem;
padding: 1.25rem;
margin-top: 2rem
}
.trust-badge i {
font-size: 1.4rem
}
.trust-badge span {
font-size: .72rem
}
/* Video */
.video-section {
padding: 3.5rem 0
}
/* Alerts */
.alert {
font-size: .85rem;
padding: .75rem 1rem
}
}
/* MOBILE PORTRAIT */
@media(max-width:480px) {
.container {
padding: 0 1rem
}
h1 {
font-size: 1.7rem
}
h2 {
font-size: 1.5rem
}
h3 {
font-size: 1.15rem
}
.hero {
padding: 4rem 0 3rem
}
.hero h1 {
font-size: 1.6rem
}
.hero-badge {
font-size: .72rem;
padding: .4rem 1rem
}
.hero-stats {
gap: 1rem;
flex-direction: column;
padding: 1rem
}
.hero-stat .number {
font-size: 1.5rem
}
.hero-stat .label {
font-size: .75rem
}
.section {
padding: 3rem 0
}
.section-header {
margin-bottom: 2rem
}
.section-header .overline {
font-size: .7rem;
letter-spacing: 1.5px;
padding: .3rem .8rem
}
/* Grids collapse to single column */
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
gap: 1rem
}
/* Buttons */
.btn {
padding: .75rem 1.5rem;
font-size: .88rem
}
.btn-lg {
padding: .85rem 1.8rem;
font-size: .95rem
}
.btn-sm {
padding: .5rem 1rem;
font-size: .82rem
}
/* Donate */
.donate-hero {
padding: 5rem 0 3rem
}
.donate-hero h1 {
font-size: 1.5rem !important
}
.donate-amounts {
gap: .4rem
}
.donate-amount {
padding: .6rem 1rem;
font-size: .82rem
}
.donate-form-card {
padding: 1.5rem 1rem
}
.donate-form-card h3 {
font-size: 1.1rem
}
.trust-badges {
flex-direction: column;
gap: .75rem;
padding: 1rem;
align-items: center
}
.trust-badge {
display: flex;
align-items: center;
gap: .5rem
}
.trust-badge i {
font-size: 1.2rem;
margin-bottom: 0
}
/* Thank You */
.thank-you-hero {
padding: 5rem 0 3rem
}
.thank-you-hero h1 {
font-size: 1.5rem !important
}
/* Impact */
.stat-card .value {
font-size: 1.8rem
}
.stat-card .icon {
font-size: 2rem
}
/* Page Header */
.page-header {
padding: 4rem 0 2.5rem
}
.page-header h1 {
font-size: 1.5rem
}
.page-header p {
font-size: .92rem
}
.breadcrumb {
font-size: .78rem
}
/* Legal */
.legal-content {
padding: 1.25rem;
border-radius: var(--radius-sm)
}
.legal-content h2 {
font-size: 1.05rem;
margin: 1.5rem 0 .75rem
}
.legal-content h3 {
font-size: .95rem
}
.legal-content p,
.legal-content li {
font-size: .9rem
}
/* Cards */
.card-img {
height: 160px
}
.program-card {
padding: 1.5rem 1.25rem
}
.program-card .icon {
width: 60px;
height: 60px;
font-size: 1.4rem;
margin-bottom: 1rem
}
.program-card h3 {
font-size: 1rem
}
.program-card p {
font-size: .85rem
}
.team-card {
padding: 2rem 1.5rem
}
.team-card .avatar {
width: 90px;
height: 90px
}
.team-card h3 {
font-size: 1rem
}
.team-card .role {
font-size: .82rem
}
/* Footer */
.footer-main {
padding: 2.5rem 0 1.5rem
}
.footer-col h4 {
font-size: .92rem;
margin-bottom: 1rem
}
.footer-social a {
width: 34px;
height: 34px
}
.newsletter-input-group {
flex-direction: column;
border-radius: var(--radius)
}
.newsletter-input-group input {
border-radius: var(--radius) var(--radius) 0 0;
text-align: center
}
.newsletter-input-group button {
border-radius: 0 0 var(--radius) var(--radius);
padding: .7rem
}
/* CTA */
.cta-section {
padding: 3rem 0
}
.cta-section h2 {
font-size: 1.5rem
}
.cta-section p {
font-size: .9rem
}
/* Gallery */
.gallery-grid {
grid-template-columns: 1fr;
gap: .75rem
}
.gallery-item {
aspect-ratio: 16/10
}
/* Chat */
.chat-widget {
left: .75rem;
bottom: .75rem
}
.chat-toggle {
width: 48px;
height: 48px;
font-size: 1.1rem
}
.chat-box {
width: calc(100vw - 1.5rem);
left: -.75rem;
bottom: 56px
}
.chat-messages {
height: 220px
}
/* Modal */
.modal-header {
padding: 1rem
}
.modal-body {
padding: 1rem
}
.modal-footer {
padding: .75rem 1rem;
flex-wrap: wrap
}
/* Reduce animations on mobile for performance */
.hero-floating {
display: none
}
.card:hover {
transform: translateY(-4px)
}
.program-card:hover {
transform: translateY(-5px)
}
.team-card:hover {
transform: translateY(-4px)
}
/* Forms */
.form-control {
padding: .75rem .9rem;
font-size: .9rem
}
.form-group label {
font-size: .82rem
}
/* Video */
.video-section {
padding: 3rem 0
}
/* Two-column layout */
.two-col-layout {
grid-template-columns: 1fr !important;
gap: 2rem !important
}
}
/* VERY SMALL SCREENS */
@media(max-width:360px) {
.container {
padding: 0 .75rem
}
h1 {
font-size: 1.5rem
}
.hero {
padding: 3.5rem 0 2.5rem
}
.hero h1 {
font-size: 1.4rem
}
.hero p {
font-size: .88rem
}
.hero-badge {
font-size: .68rem
}
.btn {
padding: .65rem 1.2rem;
font-size: .82rem;
gap: .4rem
}
.donate-amount {
padding: .5rem .75rem;
font-size: .78rem
}
.donate-form-card {
padding: 1.25rem .75rem
}
.section {
padding: 2.5rem 0
}
.stat-card .value {
font-size: 1.5rem
}
.footer-col h4 {
font-size: .85rem
}
.page-header {
padding: 3.5rem 0 2rem
}
.page-header h1 {
font-size: 1.3rem
}
.legal-content {
padding: 1rem .75rem
}
}
/* LOADING SPINNER */
.spinner {
width: 44px;
height: 44px;
border: 4px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin .8s linear infinite;
margin: 2rem auto
}
@keyframes spin {
to {
transform: rotate(360deg)
}
}
/* ANIMATE ON SCROLL */
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity .6s ease, transform .6s ease
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0)
}
/* UTILITY */
.text-center {
text-align: center
}
.text-primary {
color: var(--primary)
}
.text-accent {
color: var(--accent)
}
.text-light {
color: var(--text-light)
}
.mt-1 {
margin-top: .5rem
}
.mt-2 {
margin-top: 1rem
}
.mt-3 {
margin-top: 1.5rem
}
.mt-4 {
margin-top: 2.5rem
}
.mb-1 {
margin-bottom: .5rem
}
.mb-2 {
margin-bottom: 1rem
}
.mb-3 {
margin-bottom: 1.5rem
}
.mb-4 {
margin-bottom: 2.5rem
}
.gap-1 {
gap: .5rem
}
.gap-2 {
gap: 1rem
}
.gap-3 {
gap: 1.5rem
}
.flex {
display: flex
}
.flex-center {
display: flex;
align-items: center;
justify-content: center
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center
}
.w-100 {
width: 100%
}
/* TRUST BADGES */
.trust-badges {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 3rem;
padding: 2rem;
background: rgba(255, 255, 255, .05);
backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, .08)
}
.trust-badge {
text-align: center;
color: #fff
}
.trust-badge i {
font-size: 1.8rem;
color: var(--accent);
margin-bottom: .5rem;
display: block
}
.trust-badge span {
font-size: .82rem;
opacity: .8
}
/* ============================================
DONATE PAGE - PREMIUM
============================================ */
.donate-hero {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 40%, #1e3a5f 100%);
padding: 8rem 0 5rem;
text-align: center;
color: #fff;
position: relative;
overflow: hidden
}
.donate-hero::before {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,');
pointer-events: none
}
.donate-hero::after {
content: '';
position: absolute;
top: -30%;
right: -15%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(var(--accent-rgb), .12), transparent);
border-radius: 50%;
pointer-events: none
}
.donate-amounts {
display: flex;
gap: .75rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 1.5rem
}
.donate-amount {
padding: .85rem 1.8rem;
border-radius: 50px;
border: 2px solid rgba(255, 255, 255, .2);
background: rgba(255, 255, 255, .06);
color: #fff;
cursor: pointer;
font-family: var(--font);
font-weight: 700;
font-size: 1rem;
transition: var(--transition);
backdrop-filter: blur(10px)
}
.donate-amount:hover {
border-color: var(--accent);
background: rgba(255, 255, 255, .12)
}
.donate-amount.active {
background: var(--accent);
border-color: var(--accent);
color: var(--dark);
box-shadow: 0 4px 15px rgba(var(--accent-rgb), .4);
transform: scale(1.05)
}
.donate-form-card {
max-width: 700px;
margin: 0 auto;
background: #fff;
border-radius: var(--radius-lg);
padding: 3rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
border: 1px solid rgba(0, 0, 0, .04);
position: relative;
z-index: 2
}
.form-check {
display: flex;
align-items: flex-start;
gap: .6rem
}
.form-check input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--primary);
flex-shrink: 0
}
.form-check label {
font-size: .88rem;
color: var(--text-light);
line-height: 1.5
}
.form-check label a {
color: var(--primary);
font-weight: 600
}
/* ============================================
THANK YOU PAGE - CELEBRATION
============================================ */
.thank-you-hero {
padding: 8rem 0 5rem;
position: relative;
background: linear-gradient(180deg, rgba(var(--primary-rgb), .03) 0%, #fff 100%);
min-height: 80vh;
display: flex;
align-items: center
}
.confetti-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--primary), #10b981);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #fff;
animation: bounceIn .8s ease;
box-shadow: 0 8px 30px rgba(var(--primary-rgb), .25)
}
@keyframes bounceIn {
0% {
transform: scale(0);
opacity: 0
}
60% {
transform: scale(1.15)
}
100% {
transform: scale(1);
opacity: 1
}
}
/* ============================================
PAGE HEADER - FOR ALL PAGES
============================================ */
.page-header {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 40%, #1e3a5f 100%);
padding: 8rem 0 4rem;
text-align: center;
color: #fff;
position: relative;
overflow: hidden
}
.page-header::before {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,');
pointer-events: none
}
.page-header h1 {
color: #fff;
margin-bottom: .75rem;
font-size: clamp(2rem, 5vw, 3rem);
position: relative
}
.page-header p {
color: rgba(255, 255, 255, .8);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
position: relative
}
.breadcrumb {
margin-top: 1.5rem;
font-size: .88rem;
color: rgba(255, 255, 255, .5);
position: relative
}
.breadcrumb a {
color: rgba(255, 255, 255, .7);
transition: var(--transition)
}
.breadcrumb a:hover {
color: var(--accent)
}
.breadcrumb span {
margin: 0 .5rem
}
/* ============================================
LEGAL CONTENT - POLICIES
============================================ */
.legal-content {
max-width: 800px;
margin: 0 auto;
background: #fff;
border-radius: var(--radius-lg);
padding: 3rem;
box-shadow: var(--shadow-sm);
border: 1px solid rgba(0, 0, 0, .04)
}
.legal-content h2 {
font-size: 1.3rem;
margin: 2.5rem 0 1rem;
padding-bottom: .5rem;
border-bottom: 2px solid rgba(var(--primary-rgb), .1);
color: var(--dark)
}
.legal-content h2:first-of-type {
margin-top: 1.5rem
}
.legal-content h3 {
font-size: 1.05rem;
margin: 1.5rem 0 .75rem;
color: var(--primary)
}
.legal-content p {
color: var(--text);
margin-bottom: 1rem;
line-height: 1.8
}
.legal-content ul {
margin: 0 0 1rem 1.5rem;
padding: 0
}
.legal-content li {
color: var(--text);
margin-bottom: .5rem;
line-height: 1.7
}
.legal-content a {
color: var(--primary);
font-weight: 600
}
.legal-content a:hover {
text-decoration: underline
}
/* ============================================
DONATE PAGE - PREMIUM STYLED
============================================ */
.donate-hero {
background: linear-gradient(135deg, var(--dark) 0%, var(--secondary) 50%, var(--primary-dark) 100%);
padding: 8rem 0 5rem;
text-align: center;
position: relative;
overflow: hidden;
color: #fff
}
.donate-hero::before {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml,')
}
.donate-hero::after {
content: '';
position: absolute;
top: -40%;
right: -15%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(var(--accent-rgb), .12), transparent);
border-radius: 50%;
pointer-events: none;
animation: float 8s ease-in-out infinite
}
.donate-hero h1 {
color: #fff;
position: relative;
z-index: 2
}
.donate-hero p {
color: rgba(255, 255, 255, .88);
position: relative;
z-index: 2
}
/* Donation Amount Buttons */
.donate-amounts {
display: flex;
flex-wrap: wrap;
gap: .75rem;
justify-content: center;
margin-bottom: 2rem;
position: relative;
z-index: 2
}
.donate-amount {
padding: .85rem 1.8rem;
border: 2px solid rgba(255, 255, 255, .18);
border-radius: 50px;
background: rgba(255, 255, 255, .06);
backdrop-filter: blur(10px);
color: #fff;
cursor: pointer;
font-family: var(--font);
font-weight: 600;
font-size: .95rem;
transition: all .3s cubic-bezier(.4, 0, .2, 1);
position: relative;
overflow: hidden
}
.donate-amount::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(var(--primary-rgb), .3), rgba(var(--accent-rgb), .2));
opacity: 0;
transition: opacity .3s ease;
border-radius: inherit
}
.donate-amount:hover {
border-color: rgba(var(--accent-rgb), .5);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, .2)
}
.donate-amount:hover::before {
opacity: 1
}
.donate-amount.active {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-color: var(--primary);
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 30px rgba(var(--primary-rgb), .4)
}
.donate-amount.active::before {
opacity: 0
}
.donate-amount span {
position: relative;
z-index: 1
}
/* Currency Buttons */
.currency-btn {
padding: .5rem 1rem;
border: 2px solid var(--border);
border-radius: 50px;
background: #fff;
color: var(--text);
cursor: pointer;
font-size: .82rem;
font-family: var(--font);
font-weight: 500;
transition: all .25s ease
}
.currency-btn:hover {
border-color: rgba(var(--primary-rgb), .3);
color: var(--primary);
background: rgba(var(--primary-rgb), .03);
transform: translateY(-1px)
}
.currency-btn.active {
background: rgba(var(--primary-rgb), .08);
border-color: var(--primary);
color: var(--primary);
font-weight: 600;
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .08)
}
/* Currency buttons inside hero (dark bg) */
.donate-hero .currency-btn {
border-color: rgba(255, 255, 255, .18);
background: rgba(255, 255, 255, .06);
backdrop-filter: blur(8px);
color: rgba(255, 255, 255, .85)
}
.donate-hero .currency-btn:hover {
background: rgba(255, 255, 255, .14);
border-color: rgba(var(--accent-rgb), .4);
color: #fff
}
.donate-hero .currency-btn.active {
background: rgba(var(--accent-rgb), .18);
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 0 20px rgba(var(--accent-rgb), .15)
}
/* Trust Badges */
.trust-badges {
display: flex;
flex-wrap: wrap;
gap: .75rem;
justify-content: center;
margin-top: 2rem;
position: relative;
z-index: 2
}
.trust-badge {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .45rem .85rem;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 50px;
font-size: .78rem;
color: rgba(255, 255, 255, .7);
backdrop-filter: blur(8px);
transition: all .25s ease
}
.trust-badge:hover {
background: rgba(255, 255, 255, .12);
color: #fff;
transform: translateY(-2px)
}
.trust-badge i {
color: var(--accent);
font-size: .72rem
}
/* Donation Form Card */
.donate-form-card {
background: #fff;
border-radius: var(--radius-xl);
padding: 3rem;
max-width: 700px;
margin: 0 auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .04);
border: 1px solid rgba(0, 0, 0, .03);
position: relative;
overflow: hidden
}
.donate-form-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
background-size: 200% 100%;
animation: gradientBorder 4s ease infinite
}
/* Donation Type Toggle */
.donation-type-btn {
flex: 1;
padding: .75rem 1rem;
border: none;
border-radius: 50px;
background: transparent;
cursor: pointer;
font-family: var(--font);
font-weight: 600;
font-size: .9rem;
color: var(--text-light);
transition: all .3s cubic-bezier(.4, 0, .2, 1);
display: flex;
align-items: center;
justify-content: center;
gap: .5rem
}
.donation-type-btn:hover {
color: var(--primary);
background: rgba(var(--primary-rgb), .04)
}
.donation-type-btn.active {
background: var(--primary);
color: #fff;
box-shadow: 0 4px 15px rgba(var(--primary-rgb), .25)
}
/* Payment Methods */
.payment-methods {
display: flex;
flex-direction: column;
gap: .75rem;
margin-bottom: 2rem
}
.payment-method {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
border: 2px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: all .25s ease;
position: relative
}
.payment-method:hover {
border-color: rgba(var(--primary-rgb), .3);
background: rgba(var(--primary-rgb), .02);
transform: translateX(4px)
}
.payment-method.active {
border-color: var(--primary);
background: rgba(var(--primary-rgb), .04);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .08)
}
.payment-method input[type=radio] {
display: none
}
.pm-icon {
width: 42px;
height: 42px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.1rem;
flex-shrink: 0
}
.pm-info {
flex: 1
}
.pm-info strong {
display: block;
font-size: .92rem;
color: var(--dark)
}
.pm-info small {
color: var(--text-light);
font-size: .78rem
}
.pm-badge {
font-size: .72rem;
padding: .25rem .65rem;
border-radius: 50px;
background: var(--bg-alt);
color: var(--text-light);
font-weight: 600;
white-space: nowrap
}
.payment-method.active .pm-badge {
background: rgba(var(--primary-rgb), .1);
color: var(--primary)
}
.payment-method::after {
content: "";
position: absolute;
right: 1rem;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid var(--border);
transition: .2s
}
.payment-method.active::after {
border-color: var(--primary);
background: var(--primary);
box-shadow: inset 0 0 0 3px #fff
}
/* ============================================
DONATE PAGE - ENHANCED
============================================ */
/* Supported Payment Icons Strip */
.donate-pay-icons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .6rem;
margin: 1.5rem 0;
position: relative;
z-index: 2
}
.pay-icon-item {
display: flex;
flex-direction: column;
align-items: center;
gap: .25rem;
padding: .5rem .8rem;
background: rgba(255, 255, 255, .08);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: var(--radius-sm);
transition: all .25s ease;
min-width: 60px
}
.pay-icon-item:hover {
background: rgba(255, 255, 255, .16);
transform: translateY(-2px);
border-color: rgba(var(--accent-rgb), .4)
}
.pay-icon-item i {
font-size: 1.2rem;
color: var(--accent)
}
.pay-icon-item span {
font-size: .65rem;
color: rgba(255, 255, 255, .7);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px
}
/* Donation Type Toggle */
.donate-type-toggle {
display: flex;
gap: 0;
margin-bottom: 2rem;
background: var(--bg-alt);
border-radius: 50px;
padding: 4px;
border: 1px solid var(--border)
}
/* Recurring Frequency Grid */
.recurring-options {
margin-bottom: 2rem;
animation: fadeInUp .4s ease
}
.frequency-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .6rem;
margin-bottom: 1rem
}
.freq-option {
cursor: pointer
}
.freq-option input {
display: none
}
.freq-card {
text-align: center;
padding: .8rem .5rem;
border: 2px solid var(--border);
border-radius: var(--radius);
transition: all .25s ease;
position: relative;
background: #fff
}
.freq-card:hover {
border-color: rgba(var(--primary-rgb), .3);
background: rgba(var(--primary-rgb), .02)
}
.freq-card.active {
border-color: var(--primary);
background: rgba(var(--primary-rgb), .05);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .1)
}
.freq-card i {
display: block;
font-size: 1.1rem;
color: var(--primary);
margin-bottom: .3rem
}
.freq-card strong {
display: block;
font-size: .85rem;
color: var(--dark)
}
.freq-card small {
display: block;
font-size: .72rem;
color: var(--text-light);
margin-top: .15rem
}
.freq-popular {
position: absolute;
top: -8px;
right: -4px;
font-size: .6rem;
padding: .15rem .4rem;
background: var(--accent);
color: var(--dark);
border-radius: 50px;
font-weight: 700;
white-space: nowrap
}
.autopay-note {
padding: .75rem 1rem;
background: rgba(var(--primary-rgb), .04);
border: 1px solid rgba(var(--primary-rgb), .1);
border-radius: var(--radius-sm);
font-size: .8rem;
color: var(--text-light);
line-height: 1.5;
display: flex;
gap: .5rem;
align-items: flex-start
}
.autopay-note i {
color: var(--primary);
font-size: .85rem;
margin-top: 2px;
flex-shrink: 0
}
/* Currency Selector inside form */
.currency-selector {
display: flex;
gap: .4rem;
flex-wrap: wrap
}
/* Donate Summary */
.donate-summary {
background: linear-gradient(135deg, rgba(var(--primary-rgb), .04), rgba(var(--primary-rgb), .02));
border: 1px solid rgba(var(--primary-rgb), .1);
border-radius: var(--radius);
padding: 1.5rem;
margin-bottom: 2rem
}
.summary-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: .75rem;
color: var(--text-light)
}
.summary-row strong {
color: var(--dark);
font-size: 1.1rem
}
.summary-total {
padding-top: .75rem;
border-top: 1px dashed var(--border);
margin-bottom: 0
}
/* Payment method supported icons */
.pm-supported-icons {
display: flex;
gap: .4rem;
margin-top: .35rem
}
.pm-supported-icons i {
font-size: .85rem;
color: var(--text-lighter);
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-alt);
border-radius: 4px;
transition: .2s
}
.payment-method.active .pm-supported-icons i {
color: var(--primary);
background: rgba(var(--primary-rgb), .08)
}
/* Auto-Pay tag on gateway cards */
.pm-autopay-tag {
display: inline-flex;
align-items: center;
gap: .25rem;
font-size: .65rem;
padding: .15rem .5rem;
background: linear-gradient(135deg, rgba(var(--primary-rgb), .1), rgba(var(--accent-rgb), .1));
color: var(--primary);
border-radius: 50px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .3px;
vertical-align: middle;
margin-left: .3rem
}
.pm-autopay-tag i {
font-size: .55rem
}
/* Autopay unavailable warning note */
.autopay-gateway-note {
display: flex;
align-items: flex-start;
gap: .5rem;
padding: .75rem 1rem;
background: rgba(255, 152, 0, .06);
border: 1px solid rgba(255, 152, 0, .15);
border-radius: var(--radius-sm);
font-size: .8rem;
color: var(--text-light);
margin-top: .75rem;
line-height: 1.5
}
.autopay-gateway-note i {
color: #f59e0b;
font-size: .9rem;
margin-top: 2px;
flex-shrink: 0
}
/* Inline Card Payment (Stripe Elements) */
.inline-card-section {
border: 2px solid rgba(var(--primary-rgb), .15);
border-radius: var(--radius-lg);
overflow: hidden;
background: #fff
}
.inline-card-header {
display: flex;
align-items: center;
gap: .5rem;
padding: .75rem 1.25rem;
background: linear-gradient(135deg, rgba(var(--primary-rgb), .06), rgba(var(--primary-rgb), .02));
border-bottom: 1px solid rgba(var(--primary-rgb), .08);
font-size: .9rem;
font-weight: 600;
color: var(--dark)
}
.inline-card-brands {
margin-left: auto;
display: flex;
gap: .4rem;
font-size: 1.2rem;
color: var(--text-lighter)
}
.inline-card-fields {
padding: 1.25rem
}
.inline-card-fields .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem
}
.inline-card-fields .form-group {
margin-bottom: .75rem
}
.inline-card-fields label {
display: block;
font-size: .8rem;
font-weight: 600;
color: var(--text-light);
margin-bottom: .4rem;
text-transform: uppercase;
letter-spacing: .5px
}
.stripe-element-field {
padding: .85rem 1rem;
border: 2px solid var(--border);
border-radius: var(--radius);
background: #fff;
transition: all .25s ease;
min-height: 44px
}
.stripe-element-field:hover {
border-color: rgba(var(--primary-rgb), .3)
}
.stripe-element-field.StripeElement--focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .1)
}
.stripe-element-field.StripeElement--invalid {
border-color: #ef4444;
box-shadow: 0 0 0 4px rgba(239, 68, 68, .08)
}
.stripe-error {
display: flex;
align-items: center;
gap: .5rem;
padding: .65rem 1.25rem;
background: rgba(239, 68, 68, .05);
border-top: 1px solid rgba(239, 68, 68, .1);
color: #ef4444;
font-size: .82rem;
font-weight: 500
}
.stripe-error i {
font-size: .85rem;
flex-shrink: 0
}
.inline-card-footer {
padding: .65rem 1.25rem;
background: var(--bg-alt);
font-size: .75rem;
color: var(--text-light);
line-height: 1.5;
display: flex;
gap: .4rem;
align-items: flex-start;
border-top: 1px solid rgba(0, 0, 0, .04)
}
.inline-card-footer i {
color: var(--primary);
margin-top: 2px;
flex-shrink: 0
}
/* Responsive Donate */
@media (max-width: 768px) {
.donate-pay-icons {
gap: .4rem
}
.pay-icon-item {
padding: .4rem .6rem;
min-width: 52px
}
.pay-icon-item i {
font-size: 1rem
}
.pay-icon-item span {
font-size: .58rem
}
.frequency-grid {
grid-template-columns: repeat(2, 1fr)
}
.donate-type-toggle {
flex-direction: column;
border-radius: var(--radius)
}
.donation-type-btn {
border-radius: var(--radius-sm)
}
}
@media (max-width: 480px) {
.donate-pay-icons {
gap: .3rem
}
.pay-icon-item {
padding: .3rem .5rem;
min-width: 46px
}
.frequency-grid {
grid-template-columns: repeat(2, 1fr);
gap: .5rem
}
.donate-summary {
padding: 1rem
}
}
/* ============================================
NATURE-THEMED DECORATIVE ELEMENTS
============================================ */
/* Floating leaf particles */
.ef-leaf-particle {
position: fixed;
pointer-events: none;
z-index: 9998;
opacity: 0;
font-size: 1.2rem;
animation: leafFall linear forwards
}
@keyframes leafFall {
0% {
opacity: 0;
transform: translateY(-20px) rotate(0deg) scale(.6)
}
10% {
opacity: .7
}
100% {
opacity: 0;
transform: translateY(100vh) rotate(360deg) scale(.3)
}
}
/* Tree Growth Animation for sections */
.ef-tree-grow {
position: relative
}
.ef-tree-grow::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 0;
background: linear-gradient(to top, var(--primary), rgba(var(--primary-rgb), .1));
transition: height 1.2s cubic-bezier(.4, 0, .2, 1);
pointer-events: none;
z-index: 0
}
.ef-tree-grow.ef-visible::after {
height: 100%
}
/* Organic section divider shapes */
.section-nature-divider {
position: relative;
overflow: hidden
}
.section-nature-divider::before {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 80px;
background: var(--bg);
clip-path: polygon(0 0, 100% 0, 100% 30%, 85% 65%, 70% 40%, 55% 75%, 40% 50%, 25% 80%, 10% 55%, 0 100%);
z-index: 1
}
/* Growing leaves decoration */
.ef-leaf-decor {
position: absolute;
width: 30px;
height: 30px;
opacity: 0;
transition: all 1s cubic-bezier(.4, 0, .2, 1);
pointer-events: none;
z-index: 0
}
.ef-leaf-decor::before {
content: '🌿';
font-size: 1.5rem;
filter: hue-rotate(-10deg) saturate(1.2)
}
.ef-visible .ef-leaf-decor {
opacity: .15
}
/* Enhanced program card nature hover */
.program-card {
position: relative;
overflow: hidden
}
.program-card::after {
content: '';
position: absolute;
bottom: -80px;
right: -80px;
width: 160px;
height: 160px;
background: radial-gradient(circle, rgba(var(--primary-rgb), .06), transparent);
border-radius: 50%;
transition: all .5s cubic-bezier(.4, 0, .2, 1);
pointer-events: none
}
.program-card:hover::after {
bottom: -40px;
right: -40px;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(var(--primary-rgb), .12), transparent)
}
/* Section green accent line */
.section-header h2 {
position: relative;
display: inline-block
}
.section-header h2::after {
content: '';
display: block;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--accent));
border-radius: 2px;
margin: .75rem auto 0;
transition: width .8s cubic-bezier(.4, 0, .2, 1) .2s
}
.ef-visible .section-header h2::after,
.section-header.ef-visible h2::after {
width: 60px
}
/* Nature-inspired stat card enhancements */
.impact-section .stat-card {
position: relative;
transition: transform .4s ease
}
.impact-section .stat-card:hover {
transform: translateY(-8px)
}
.impact-section .stat-card::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50);
width: 40px;
height: 3px;
background: var(--accent);
border-radius: 2px;
opacity: 0;
transition: all .4s ease
}
.impact-section .stat-card:hover::before {
opacity: 1;
width: 60px
}
/* About section image nature frame */
.two-col-layout img {
transition: transform .6s cubic-bezier(.4, 0, .2, 1), box-shadow .4s ease
}
.two-col-layout img:hover {
transform: scale(1.02);
box-shadow: 0 20px 60px rgba(var(--primary-rgb), .15) !important
}
/* Enhanced CTA with leaf decoration */
.cta-section {
position: relative
}
.cta-section .container::before {
content: '🌱';
position: absolute;
top: 20%;
left: 8%;
font-size: 2.5rem;
opacity: .08;
animation: float 6s ease-in-out infinite;
pointer-events: none
}
.cta-section .container::after {
content: '🌿';
position: absolute;
bottom: 15%;
right: 10%;
font-size: 3rem;
opacity: .08;
animation: float 7s ease-in-out infinite 2s;
pointer-events: none
}
/* Smooth section transitions */
.section {
position: relative
}
.section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), .08), transparent)
}
.section-alt::before {
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), .12), transparent)
}
/* Video section enhancements */
.video-section .video-wrapper {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, .12)
}
.video-section .video-wrapper::before {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: inherit;
z-index: -1
}
/* Form select dropdown styling */
.form-control,
select.form-control {
appearance: none;
-webkit-appearance: none;
background-color: #fff;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
padding: .75rem 1rem;
font-size: .92rem;
font-family: var(--font);
color: var(--text);
transition: all .25s ease;
width: 100%
}
.form-control:focus,
select.form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .08);
outline: none
}
select.form-control {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 16px;
padding-right: 2.5rem;
cursor: pointer
}
/* Phone Payment Mobile Fix */
@media(max-width:600px) {
.pm-badge {
display: none
}
.pm-icon {
width: 36px;
height: 36px;
font-size: .95rem
}
.payment-method {
padding: .85rem 1rem
}
.trust-badges {
gap: .4rem
}
.trust-badge {
padding: .35rem .6rem;
font-size: .72rem
}
.donate-form-card {
padding: 1.5rem 1.25rem;
border-radius: var(--radius-lg)
}
}
/* ============================================
SCROLL ANIMATIONS & MICRO-INTERACTIONS
============================================ */
/* Page Load Transition */
body {
animation: pageLoad .6s ease-out;
}
@keyframes pageLoad {
from {
opacity: 0
}
to {
opacity: 1
}
}
/* Scroll-Triggered Animations */
.ef-animate {
opacity: 0;
transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1);
will-change: opacity, transform
}
.ef-animate.ef-visible {
opacity: 1;
transform: none !important
}
/* Animation Variants */
.ef-fade-up {
transform: translateY(40px)
}
.ef-fade-down {
transform: translateY(-40px)
}
.ef-fade-left {
transform: translateX(50px)
}
.ef-fade-right {
transform: translateX(-50px)
}
.ef-scale {
transform: scale(.85)
}
.ef-scale-up {
transform: scale(.9) translateY(20px)
}
.ef-rotate {
transform: rotate(-3deg) scale(.95)
}
.ef-flip {
transform: perspective(600px) rotateX(15deg);
transform-origin: bottom
}
/* Stagger Delays for Grid Items */
.ef-delay-1 {
transition-delay: .1s !important
}
.ef-delay-2 {
transition-delay: .2s !important
}
.ef-delay-3 {
transition-delay: .3s !important
}
.ef-delay-4 {
transition-delay: .4s !important
}
.ef-delay-5 {
transition-delay: .5s !important
}
.ef-delay-6 {
transition-delay: .6s !important
}
/* Card & Element Hover Effects */
.ef-hover-lift {
transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s ease
}
.ef-hover-lift:hover {
transform: translateY(-8px);
box-shadow: 0 16px 50px rgba(0, 0, 0, .12)
}
.ef-hover-glow:hover {
box-shadow: 0 0 30px rgba(var(--primary-rgb), .2), 0 10px 40px rgba(0, 0, 0, .08)
}
.ef-hover-scale {
transition: transform .3s ease
}
.ef-hover-scale:hover {
transform: scale(1.03)
}
/* Text Reveal Animation */
.ef-text-reveal {
overflow: hidden;
display: inline-block
}
.ef-text-reveal span {
display: inline-block;
transform: translateY(100%);
transition: transform .6s cubic-bezier(.25, .46, .45, .94)
}
.ef-text-reveal.ef-visible span {
transform: translateY(0)
}
/* Shimmer Effect on Section Headers */
.section-header h2 {
background: linear-gradient(90deg, var(--dark) 40%, var(--primary) 50%, var(--dark) 60%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmerText 3s ease-in-out infinite
}
@keyframes shimmerText {
0%,
100% {
background-position: 200% 0
}
50% {
background-position: -200% 0
}
}
/* Floating Decorative Shapes */
.ef-float-shape {
position: absolute;
border-radius: 50%;
opacity: .06;
pointer-events: none;
animation: efFloat 8s ease-in-out infinite
}
@keyframes efFloat {
0%,
100% {
transform: translateY(0) rotate(0deg)
}
33% {
transform: translateY(-20px) rotate(120deg)
}
66% {
transform: translateY(10px) rotate(240deg)
}
}
/* Section Divider with Animated Dots */
.ef-section-divider {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
margin: 2rem 0;
opacity: .4
}
.ef-section-divider span {
width: 6px;
height: 6px;
background: var(--primary);
border-radius: 50%;
animation: dividerPulse 2s ease-in-out infinite
}
.ef-section-divider span:nth-child(2) {
animation-delay: .3s;
width: 8px;
height: 8px
}
.ef-section-divider span:nth-child(3) {
animation-delay: .6s
}
@keyframes dividerPulse {
0%,
100% {
opacity: .3;
transform: scale(1)
}
50% {
opacity: 1;
transform: scale(1.4)
}
}
/* Gradient Border Animation */
.ef-gradient-border {
position: relative;
border: none !important
}
.ef-gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, var(--primary), var(--accent), var(--primary));
background-size: 200% 200%;
animation: gradientBorder 4s ease infinite;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none
}
@keyframes gradientBorder {
0%,
100% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
}
/* Parallax Utility */
.ef-parallax {
will-change: transform;
transition: transform .1s linear
}
/* Smooth Count-Up for Stats */
.ef-count-up {
display: inline-block;
font-variant-numeric: tabular-nums
}
/* Pulsing CTA Button */
.ef-pulse-cta {
animation: ctaPulse 2.5s ease-in-out infinite
}
@keyframes ctaPulse {
0%,
100% {
box-shadow: 0 4px 15px rgba(var(--primary-rgb), .3)
}
50% {
box-shadow: 0 4px 30px rgba(var(--primary-rgb), .5), 0 0 60px rgba(var(--primary-rgb), .15)
}
}
/* Typewriter cursor for hero text */
.ef-typewriter::after {
content: '|';
animation: blink 1s step-end infinite;
color: var(--accent);
font-weight: 300
}
@keyframes blink {
0%,
50% {
opacity: 1
}
51%,
100% {
opacity: 0
}
}
/* Image Reveal on Scroll */
.ef-img-reveal {
overflow: hidden;
position: relative
}
.ef-img-reveal::after {
content: '';
position: absolute;
inset: 0;
background: var(--primary);
transform-origin: right;
transition: transform .8s cubic-bezier(.77, 0, .175, 1)
}
.ef-img-reveal.ef-visible::after {
transform: scaleX(0)
}
/* Ripple Effect on Click */
.ef-ripple {
position: relative;
overflow: hidden
}
.ef-ripple-wave {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, .35);
transform: scale(0);
animation: efRipple .6s ease-out;
pointer-events: none
}
@keyframes efRipple {
to {
transform: scale(4);
opacity: 0
}
}
/* Underline reveal on links */
.ef-underline-reveal {
position: relative;
display: inline-block
}
.ef-underline-reveal::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--primary);
transition: width .4s cubic-bezier(.4, 0, .2, 1)
}
.ef-underline-reveal:hover::after {
width: 100%
}
/* Smooth Section Enter */
section {
position: relative
}
/* Back to Top Animation */
.back-to-top {
animation: backToTopBounce 2s ease-in-out infinite
}
@keyframes backToTopBounce {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-5px)
}
}
/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
.ef-animate,
.ef-animate.ef-visible {
transition: none !important;
animation: none !important;
opacity: 1 !important;
transform: none !important
}
.section-header h2 {
animation: none;
-webkit-text-fill-color: var(--dark);
background: none
}
.ef-float-shape,
.ef-section-divider span {
animation: none
}
body {
animation: none
}
}