Analytics consent banner redesign: compact corner card with title, privacy link and equal-weight Accept/Decline; v2.33.0

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "siteforge",
-  "version": "2.32.4",
+  "version": "2.33.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "siteforge",
-      "version": "2.32.4",
+      "version": "2.33.0",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.1135.0",
         "@dnd-kit/core": "^6.3.1",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "2.32.4",
+  "version": "2.33.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.css

@@ -6705,48 +6705,61 @@ a.study-track-card:hover {
 
 .consent-banner {
   position: fixed;
-  left: 1rem;
+  left: 1.25rem;
-  right: 1rem;
+  bottom: 1.25rem;
-  bottom: 1rem;
+  width: min(380px, calc(100vw - 2.5rem));
   z-index: 220;
-  background: rgba(10, 10, 8, 0.96);
+  background: rgba(14, 14, 11, 0.97);
-  border: 1px solid rgba(201, 168, 76, 0.45);
+  border: 1px solid rgba(201, 168, 76, 0.4);
-  border-radius: 12px;
+  border-radius: 14px;
-  padding: 0.9rem 1rem;
+  padding: 1.1rem 1.2rem 1.15rem;
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
+  font-family: var(--brand-font-body);
 }
 
-.consent-banner p {
+.consent-banner p { margin: 0; }
-  margin: 0;
+
-  color: var(--brand-warm-white);
+.consent-title {
-  font-family: var(--brand-font-body);
+  font-family: var(--brand-font-heading);
-  font-size: 0.92rem;
+  font-size: 1.15rem;
+  color: #e8d9b5;
+  margin-bottom: 0.4rem !important;
 }
 
+.consent-text {
+  color: var(--brand-muted);
+  font-size: 0.88rem;
+  line-height: 1.5;
+}
+
+.consent-more { margin-top: 0.4rem !important; font-size: 0.82rem; }
+.consent-more a { color: var(--brand-gold); text-underline-offset: 3px; }
+
 .consent-actions {
-  margin-top: 0.75rem;
+  margin-top: 0.9rem;
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 0.6rem;
 }
 
-.consent-actions .btn-primary,
+/* Equal weight on both choices: same size, same shape, only the fill differs */
-.consent-actions .btn-secondary {
+.consent-btn {
-  font-size: 1rem;
+  font-family: var(--brand-font-body);
-  padding: 0.75rem 1.4rem;
+  font-size: 0.92rem;
-  min-width: 140px;
+  font-weight: 600;
-  justify-content: center;
+  letter-spacing: 0.04em;
+  padding: 0.65rem 1rem;
+  border-radius: 999px;
+  border: 1px solid var(--brand-gold);
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
 }
+.consent-btn--accept { background: var(--brand-gold); color: var(--brand-black); }
+.consent-btn--decline { background: transparent; color: var(--brand-gold); }
+.consent-btn:hover { background: rgba(201, 168, 76, 0.85); color: var(--brand-black); }
 
-.consent-actions .btn-secondary {
+@media (max-width: 520px) {
-  color: var(--brand-gold);
+  .consent-banner { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; padding: 1rem; }
-  border-color: rgba(201, 168, 76, 0.55);
-  background: transparent;
-}
-
-.consent-actions .btn-secondary:hover {
-  color: var(--brand-black);
-  background: var(--brand-gold);
-  border-color: var(--brand-gold);
 }
 
 .admin-form {

src/App.tsx

@@ -395,10 +395,12 @@ function AnalyticsConsentBanner({ content }: { content: SiteContent }) {
 
   return (
     <div className="consent-banner" role="region" aria-label="Analytics consent">
-      <p>{content.cookieBannerText || 'We use optional analytics cookies to measure visits and location trends for site improvement.'}</p>
+      <p className="consent-title"><span aria-hidden="true">🍪</span> Help us improve the site</p>
+      <p className="consent-text">{content.cookieBannerText || 'We use optional analytics cookies to measure visits and location trends for site improvement.'}</p>
+      <p className="consent-more"><Link to="/privacy">Privacy policy</Link></p>
       <div className="consent-actions">
-        <button type="button" className="btn-primary" onClick={accept}>Accept</button>
+        <button type="button" className="consent-btn consent-btn--decline" onClick={decline}>Decline</button>
-        <button type="button" className="btn-secondary" onClick={decline}>Decline</button>
+        <button type="button" className="consent-btn consent-btn--accept" onClick={accept}>Accept</button>
       </div>
     </div>
   )