Update general graphics

MeMMa137 · MeMMa137 · commit 21a26cb83117 · 2026-01-06T17:30:29.000+01:00
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -354,6 +354,29 @@ h1, h2, h3, h4, h5, h6 {
   padding: 14px 24px;
 }
 
+/* Button size/shape utilities */
+.btn--xl {
+  font-size: 20px;
+  padding: 14px 22px;
+}
+.btn--pill {
+  border-radius: 999px;
+}
+
+/* Subtle animated glow for call-to-action buttons */
+@keyframes btn-glow-pulse {
+  0%, 100% {
+    box-shadow: 0 6px 14px var(--shadow), 0 0 0 0 rgba(210, 127, 70, 0.0);
+    transform: translateY(0);
+  }
+  50% {
+    box-shadow: 0 10px 22px var(--shadow), 0 0 18px 2px rgba(210, 127, 70, 0.35);
+  }
+}
+.btn--glow {
+  animation: btn-glow-pulse 2.4s ease-in-out infinite;
+}
+
 /* Flash messages */
 .flash {
   padding: 12px 16px;
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -8,7 +8,7 @@
     <meta name="csrf-token" content="<%= form_authenticity_token %>">
     <link rel="icon" type="image/png" href="https://files.slack.com/files-pri/T09V59WQY1E-F0A6UD211JS/animal.png?pub_secret=3e17f8e9df">
     <link rel="shortcut icon" type="image/png" href="https://files.slack.com/files-pri/T09V59WQY1E-F0A6UD211JS/animal.png?pub_secret=3e17f8e9df">
-    <link rel="stylesheet" href="/stylesheets/application.css?v=6">
+    <link rel="stylesheet" href="/stylesheets/application.css?v=8">
     <script defer src="/javascripts/application.js?v=2"></script>
   </head>
   <body data-page="<%= content_for?(:page) ? yield(:page) : '' %>">
diff --git a/app/views/pages/shop.html.erb b/app/views/pages/shop.html.erb
@@ -6,7 +6,9 @@
 <main class="container">
   <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
     <h1 class="page-title" style="margin: 0;">Shop</h1>
-    <a href="/purchases" class="btn btn--secondary">Recent Purchases</a>
+    <a href="/purchases" class="btn btn--accent btn--accent-gradient btn--xl btn--pill btn--glow" style="display:inline-flex;align-items:center;gap:10px;">
+      <span>Recent Purchases</span>
+    </a>
   </div>
 
   <div class="shop-layout">
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
@@ -395,6 +395,47 @@ a.project-row:hover {
    font-size: 18px;
    padding: 14px 24px;
 }
+/* Button size/shape utilities */
+.btn--xl {
+   font-size: 18px;
+   padding: 12px 20px;
+}
+.btn--pill {
+   border-radius: 999px;
+}
+
+/* Subtle animated glow for call-to-action buttons */
+@keyframes btn-glow-pulse {
+  0%, 100% {
+    box-shadow: 0 6px 14px var(--shadow), 0 0 0 0 rgba(210, 127, 70, 0.0);
+    transform: translateY(0);
+  }
+  50% {
+    box-shadow: 0 10px 22px var(--shadow), 0 0 18px 2px rgba(210, 127, 70, 0.35);
+  }
+}
+.btn--glow {
+  animation: btn-glow-pulse 2.4s ease-in-out infinite;
+}
+
+/* Animated accent gradient for CTA button */
+@keyframes accent-gradient-shift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+.btn--accent-gradient {
+  background: linear-gradient(90deg, #d27f46, #e05a2a, #d27f46);
+  background-size: 200% 200%;
+  color: var(--white);
+  border: 0;
+  animation: accent-gradient-shift 6s ease infinite;
+}
+.btn--accent-gradient:hover:not(:disabled) {
+  filter: brightness(1.02);
+  transform: translateY(-1px) scale(1.02);
+  box-shadow: 0 10px 22px var(--shadow);
+}
 
 /* Flash messages */
 .flash {
@@ -911,6 +952,12 @@ a.project-row:hover {
   overflow: hidden;
 }
 
+/* FAQ Page - custom background */
+[data-page="faq"] {
+  background: var(--bg) url('https://files.slack.com/files-pri/T09V59WQY1E-F0A71GFN7N2/untitled_artwork.png?pub_secret=e6e1934613') no-repeat center center fixed;
+  background-size: cover;
+}
+
 .signin-page {
   position: relative;
   width: 100%;
