commit abcc4f5dc9f688dd8f47fca3c28988c70487e4e0
Author: Faster Marketplace <marketplace@fasterhq.com>
Date:   Tue Jan 20 18:11:44 2026 +0000

    Publish page: buy-coffee - assets/css/buy-coffee.css

diff --git a/assets/css/buy-coffee.css b/assets/css/buy-coffee.css
new file mode 100644
index 0000000..f0ffbdf
--- /dev/null
+++ b/assets/css/buy-coffee.css
@@ -0,0 +1,265 @@
+.profile-section {
+  --yellow: #FFDD00;
+  --bg: #FFFDF7;
+  --text: #1A1A2E;
+  --text-muted: #6B7280;
+  --card-bg: #FFFFFF;
+
+  min-height: 50vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 2rem;
+  background: linear-gradient(180deg, var(--yellow) 0%, var(--bg) 100%);
+  font-family: 'Nunito', sans-serif;
+}
+
+.profile-card {
+  text-align: center;
+  max-width: 500px;
+  animation: fadeIn 0.6s ease-out;
+}
+
+.avatar {
+  width: 120px;
+  height: 120px;
+  background: var(--card-bg);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3.5rem;
+  margin: 0 auto 1.5rem;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
+  border: 4px solid var(--card-bg);
+}
+
+.profile-card h1 {
+  font-size: 2.2rem;
+  font-weight: 800;
+  margin-bottom: 1rem;
+  color: var(--text);
+}
+
+.bio {
+  font-size: 1.1rem;
+  color: var(--text-muted);
+  line-height: 1.7;
+  margin-bottom: 1.5rem;
+}
+
+.social-links {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.social-link {
+  color: var(--text);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.9rem;
+  padding: 0.5rem 1rem;
+  border-radius: 20px;
+  background: rgba(255, 221, 0, 0.3);
+  transition: all 0.3s ease;
+}
+
+.social-link:hover {
+  background: var(--yellow);
+  transform: translateY(-2px);
+}
+
+/* ============================
+   Section 2: Donation
+   ============================ */
+
+.donation-section {
+  --yellow: #FFDD00;
+  --yellow-dark: #E5C700;
+  --bg: #FFFDF7;
+  --text: #1A1A2E;
+  --text-muted: #6B7280;
+  --card-bg: #FFFFFF;
+  --border: #E5E7EB;
+
+  min-height: 50vh;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 2rem;
+  background-color: var(--bg);
+  font-family: 'Nunito', sans-serif;
+}
+
+.donation-card {
+  background: var(--card-bg);
+  border-radius: 20px;
+  padding: 2.5rem;
+  width: 100%;
+  max-width: 400px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--border);
+  animation: slideUp 0.6s ease-out;
+}
+
+.donation-card h2 {
+  font-size: 1.5rem;
+  font-weight: 800;
+  text-align: center;
+  margin-bottom: 1.5rem;
+  color: var(--text);
+}
+
+.amount-selector {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+.amount-btn {
+  width: 60px;
+  height: 60px;
+  border-radius: 12px;
+  border: 2px solid var(--border);
+  background: var(--bg);
+  font-family: 'Nunito', sans-serif;
+  font-size: 1.3rem;
+  font-weight: 800;
+  color: var(--text);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.amount-btn:hover {
+  border-color: var(--yellow);
+  transform: scale(1.05);
+}
+
+.amount-btn.active {
+  background: var(--yellow);
+  border-color: var(--yellow);
+  transform: scale(1.05);
+}
+
+.amount-text {
+  text-align: center;
+  font-size: 1.1rem;
+  color: var(--text-muted);
+  margin-bottom: 1.5rem;
+}
+
+.total {
+  font-weight: 800;
+  color: var(--text);
+}
+
+.name-input,
+.message-input {
+  width: 100%;
+  padding: 1rem;
+  border: 2px solid var(--border);
+  border-radius: 12px;
+  font-family: 'Nunito', sans-serif;
+  font-size: 1rem;
+  margin-bottom: 1rem;
+  transition: border-color 0.3s ease;
+  background: var(--bg);
+}
+
+.name-input:focus,
+.message-input:focus {
+  outline: none;
+  border-color: var(--yellow);
+}
+
+.message-input {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.donate-btn {
+  width: 100%;
+  padding: 1rem;
+  background: var(--yellow);
+  border: none;
+  border-radius: 12px;
+  font-family: 'Nunito', sans-serif;
+  font-size: 1.1rem;
+  font-weight: 800;
+  color: var(--text);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.donate-btn:hover {
+  background: var(--yellow-dark);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(255, 221, 0, 0.4);
+}
+
+.btn-icon {
+  font-size: 1.2rem;
+}
+
+.secure-text {
+  text-align: center;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin-top: 1rem;
+}
+
+/* ============================
+   Animations
+   ============================ */
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ============================
+   Responsive
+   ============================ */
+
+@media (max-width: 500px) {
+  .profile-section {
+    padding: 3rem 1.5rem;
+  }
+
+  .profile-card h1 {
+    font-size: 1.8rem;
+  }
+
+  .donation-card {
+    padding: 2rem 1.5rem;
+  }
+
+  .social-links {
+    flex-wrap: wrap;
+  }
+}
\ No newline at end of file