first pass - kryz inspired

src/app/donate/donate.component.scss

@@ -0,0 +1,197 @@
+@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; }
+}