Unify website section canvas

website/style.css

@@ -17,8 +17,8 @@
     --success: #22c55e;
     --glass: rgba(30, 41, 59, 0.4);
     --glass-border: rgba(255, 255, 255, 0.05);
-    --section-tint: rgba(255, 255, 255, 0.02);
-    --section-tint-strong: rgba(15, 23, 42, 0.4);
+    --section-tint: transparent;
+    --section-tint-strong: rgba(15, 23, 42, 0.28);
     --card-surface: rgba(30, 41, 59, 0.45);
     --card-border: rgba(255, 255, 255, 0.08);
     color-scheme: dark;
@@ -107,7 +107,10 @@ body {
     height: 100%;
     z-index: -1;
     overflow: hidden;
-    background: radial-gradient(circle at 50% 50%, #1e1b4b 0%, #0f172a 100%);
+    background:
+        radial-gradient(circle at 18% 10%, rgba(99, 102, 241, 0.18), transparent 34rem),
+        radial-gradient(circle at 78% 68%, rgba(168, 85, 247, 0.12), transparent 38rem),
+        linear-gradient(180deg, #0f172a 0%, #111827 45%, #0f172a 100%);
 }
 
 .blob {
@@ -117,8 +120,8 @@ body {
     background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
     filter: blur(80px);
     border-radius: 50%;
-    opacity: 0.5;
-    animation: move 25s infinite alternate ease-in-out;
+    opacity: 0.22;
+    animation: move 40s infinite alternate ease-in-out;
 }
 
 .blob-1 { top: -100px; left: -100px; animation-delay: 0s; }
@@ -318,19 +321,22 @@ html.theme-light {
     --text-muted: #475569;
     --glass: rgba(255, 255, 255, 0.7);
     --glass-border: rgba(15, 23, 42, 0.08);
-    --section-tint: rgba(15, 23, 42, 0.025);
-    --section-tint-strong: rgba(15, 23, 42, 0.05);
+    --section-tint: transparent;
+    --section-tint-strong: rgba(226, 232, 240, 0.5);
     --card-surface: rgba(255, 255, 255, 0.75);
     --card-border: rgba(15, 23, 42, 0.08);
     color-scheme: light;
 }
 
 html.theme-light .bg-blobs {
-    background: radial-gradient(circle at 50% 50%, #e0e7ff 0%, #f1f5f9 100%);
+    background:
+        radial-gradient(circle at 16% 10%, rgba(99, 102, 241, 0.16), transparent 34rem),
+        radial-gradient(circle at 78% 68%, rgba(168, 85, 247, 0.1), transparent 38rem),
+        linear-gradient(180deg, #f8fafc 0%, #eef2ff 46%, #f8fafc 100%);
 }
 
 html.theme-light .blob {
-    opacity: 0.35;
+    opacity: 0.16;
 }
 
 html.theme-light .feature-card,
@@ -394,7 +400,7 @@ html.theme-light .btn-firefox-secondary img {
 }
 
 html.theme-light .comparison-section {
-    background: rgba(15, 23, 42, 0.02);
+    background: transparent;
 }
 
 html.theme-light .comparison-table-wrapper {
@@ -2453,7 +2459,7 @@ input:checked + .mock-slider:before {
 /* --- Footer --- */
 footer {
     padding: 4rem 0;
-    border-top: 1px solid var(--glass-border);
+    border-top: 0;
     text-align: center;
     color: var(--text-muted);
 }
@@ -2778,8 +2784,8 @@ html:not(.lang-de) [lang="de"] {
 .compat-section {
     padding: 0.5rem 0 2.5rem 0;
     text-align: center;
-    background: var(--section-tint);
-    border-bottom: 1px solid var(--glass-border);
+    background: transparent;
+    border-bottom: 0;
 }
 
 .compat-mascot {
@@ -3005,7 +3011,7 @@ html.theme-light .compat-logo img.compat-logo-disneyplus-mark {
 .use-cases-section {
     padding: 6rem 0;
     position: relative;
-    border-bottom: 1px solid var(--glass-border);
+    border-bottom: 0;
 }
 
 .use-cases-grid {
@@ -3145,8 +3151,19 @@ html.theme-light .compat-logo img.compat-logo-disneyplus-mark {
 /* --- Comparison Section --- */
 .comparison-section {
     padding: 6rem 0;
-    background: rgba(255, 255, 255, 0.01);
-    border-bottom: 1px solid var(--glass-border);
+    background: transparent;
+    border-bottom: 0;
+}
+
+#self-hosting,
+#faq,
+#faq + section,
+footer {
+    background: var(--section-tint-strong);
+}
+
+#self-hosting {
+    border-top: 1px solid var(--glass-border);
 }
 
 .comparison-table-wrapper {
@@ -5275,4 +5292,3 @@ html.theme-light .mobile-demo-close:hover {
         contain-intrinsic-block-size: auto 700px;
     }
 }
-

website/template.html

@@ -1197,7 +1197,7 @@
     </section>
 
     <!-- Self Hosters Paradise Section -->
-    <section id="self-hosting" class="lazy-section" style="background: var(--section-tint-strong); border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);">
+    <section id="self-hosting" class="lazy-section">
         <div class="container">
             <h2 style="font-size: 2.5rem; text-align: center; margin-bottom: 1rem;">
                 <span>{{SELF_TITLE}}</span>
@@ -1324,7 +1324,7 @@
         </div>
     </section>
 
-    <section id="faq" class="lazy-section" style="border-top: 1px solid var(--glass-border);">
+    <section id="faq" class="lazy-section">
         <div class="container">
             <img src="{{ASSET_PATH}}assets/KoalaQuestions-1x.webp" srcset="{{ASSET_PATH}}assets/KoalaQuestions-1x.webp 250w, {{ASSET_PATH}}assets/KoalaQuestions.webp 355w" sizes="(max-width: 768px) calc(100vw - 2rem), 250px" alt="A cute koala holding a question mark wondering about KoalaSync" class="features-questions-mascot" width="250" height="211" loading="lazy" fetchpriority="low" data-reveal>
             <h2 data-reveal style="font-size: 2.2rem; text-align: center; margin-bottom: 1rem;">
@@ -1377,7 +1377,7 @@
         </div>
     </section>
 
-    <section style="text-align: center; border-top: 1px solid var(--glass-border); padding: 6rem 0 2rem 0;">
+    <section style="text-align: center; padding: 6rem 0 2rem 0;">
         <div class="container">
             <h2 data-reveal style="font-size: 2.2rem; margin-bottom: 1rem;">
                 <span>{{BOTTOM_TITLE}}</span>