198 lines
3.5 KiB
SCSS
198 lines
3.5 KiB
SCSS
@use '../../styles/variables' as *;
|
|
@use '../../styles/mixins' as *;
|
|
|
|
.donate {
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
// Banner
|
|
.donate-banner {
|
|
position: relative;
|
|
margin-bottom: $spacing-3xl;
|
|
}
|
|
|
|
.donate-banner-overlay {
|
|
background: $mixed-gradient;
|
|
padding: $spacing-3xl $spacing-lg;
|
|
text-align: center;
|
|
}
|
|
|
|
.donate-banner-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.donate-flower-hero {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 0 auto $spacing-md;
|
|
opacity: 0.7;
|
|
animation: float 4s ease-in-out infinite;
|
|
}
|
|
|
|
.donate-banner h2 {
|
|
color: var(--color-white);
|
|
font-size: 2.4rem;
|
|
margin-bottom: $spacing-md;
|
|
}
|
|
|
|
.donate-subtitle {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
font-size: 1.1rem;
|
|
max-width: 550px;
|
|
margin: 0 auto;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
// Tiers
|
|
.donate-tiers {
|
|
text-align: center;
|
|
margin-bottom: $spacing-3xl;
|
|
|
|
h3 {
|
|
font-size: 1.8rem;
|
|
margin-bottom: $spacing-xl;
|
|
}
|
|
}
|
|
|
|
.tiers-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: $spacing-lg;
|
|
margin-bottom: $spacing-xl;
|
|
}
|
|
|
|
.tier-card {
|
|
@include card-style;
|
|
padding: $spacing-xl;
|
|
text-align: center;
|
|
background: var(--color-white);
|
|
border-top: 4px solid var(--color-accent);
|
|
|
|
.tier-icon {
|
|
font-size: 2rem;
|
|
margin-bottom: $spacing-sm;
|
|
}
|
|
|
|
.tier-amount {
|
|
font-size: 2.8rem;
|
|
font-weight: 700;
|
|
color: var(--color-accent);
|
|
line-height: 1;
|
|
}
|
|
|
|
.tier-period {
|
|
font-size: 0.85rem;
|
|
color: var(--color-medium);
|
|
margin-bottom: $spacing-md;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.2rem;
|
|
color: var(--color-primary);
|
|
margin-bottom: $spacing-md;
|
|
}
|
|
|
|
.tier-benefits {
|
|
list-style: none;
|
|
text-align: left;
|
|
margin-bottom: $spacing-lg;
|
|
|
|
li {
|
|
padding: $spacing-xs 0;
|
|
font-size: 0.9rem;
|
|
color: var(--color-dark);
|
|
border-bottom: 1px solid var(--color-light);
|
|
|
|
&::before {
|
|
content: '✓ ';
|
|
color: $success-green;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-tier {
|
|
@include button-style($accent-orange, $neutral-white, $accent-orange-dark);
|
|
display: inline-block;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
// One-time
|
|
.donate-one-time {
|
|
text-align: center;
|
|
padding: $spacing-2xl $spacing-lg;
|
|
background: var(--color-primary);
|
|
border-radius: $radius-xl;
|
|
margin-bottom: $spacing-3xl;
|
|
|
|
.donate-flower-divider {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 0 auto $spacing-md;
|
|
|
|
img {
|
|
width: 100%;
|
|
filter: brightness(1.2);
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
color: var(--color-white);
|
|
font-size: 1.6rem;
|
|
margin-bottom: $spacing-sm;
|
|
}
|
|
|
|
.section-intro {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: $spacing-lg;
|
|
}
|
|
|
|
.btn-lg {
|
|
@include button-style($accent-orange, $neutral-white, $accent-orange-dark);
|
|
font-size: 1.2rem;
|
|
padding: $spacing-md $spacing-2xl;
|
|
}
|
|
}
|
|
|
|
// Why
|
|
.donate-why {
|
|
padding-bottom: $spacing-xl;
|
|
}
|
|
|
|
.why-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: $spacing-lg;
|
|
|
|
.why-item {
|
|
text-align: center;
|
|
padding: $spacing-lg;
|
|
|
|
.why-icon {
|
|
display: block;
|
|
font-size: 2.5rem;
|
|
margin-bottom: $spacing-sm;
|
|
}
|
|
|
|
strong {
|
|
display: block;
|
|
color: var(--color-primary);
|
|
margin-bottom: $spacing-xs;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
p {
|
|
font-size: 0.9rem;
|
|
color: var(--color-medium);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: #{$bp-md - 1px}) {
|
|
.donate-banner h2 { font-size: 1.8rem; }
|
|
.tiers-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; }
|
|
}
|