From fd8a2ca23c4c2c8344b7062865409f629602b6b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 9 Nov 2025 05:05:34 +0100
Subject: [PATCH] fix: smooth color transitions across header, content, and
 footer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Unified background colors for smoother visual flow:

Changes:
- Header background: bg-darker → bg-dark (matches body)
- Footer background: bg-darker → bg-dark (matches body)
- Body background: bg-darker → bg-dark (consistent base color)
- Removed redundant main content background override

This creates a cohesive color scheme where:
- Body, header, and footer all use bg-dark (HSL 0, 0%, 17.5%)
- Cards and panels use bg-lighter (HSL 0, 0%, 22%) for subtle contrast
- Rose borders on header/footer provide visual separation
- No more jarring black-to-gray transitions

The result is a smooth, unified dark theme with the Pivoine rose
accent colors providing visual interest and hierarchy.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 asciinema/theme/custom.css | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/asciinema/theme/custom.css b/asciinema/theme/custom.css
index ce9838f..88cbd90 100644
--- a/asciinema/theme/custom.css
+++ b/asciinema/theme/custom.css
@@ -35,18 +35,11 @@
 
 /* Global Styling */
 body {
-  background-color: var(--pivoine-bg-darker) !important;
+  background-color: var(--pivoine-bg-dark) !important;
   color: var(--pivoine-text-primary) !important;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
 }
 
-/* Main content area with better contrast */
-main,
-.main-content {
-  background-color: var(--pivoine-bg-dark) !important;
-  min-height: 100vh;
-}
-
 /* Headings with accent color */
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
@@ -68,14 +61,14 @@ header,
 .header,
 nav,
 .navbar {
-  background-color: var(--pivoine-bg-darker) !important;
+  background-color: var(--pivoine-bg-dark) !important;
   border-bottom: 2px solid var(--pivoine-rose) !important;
 }
 
 /* Override Bootstrap navbar-dark and bg-dark */
 .navbar-dark,
 .bg-dark {
-  background-color: var(--pivoine-bg-darker) !important;
+  background-color: var(--pivoine-bg-dark) !important;
 }
 
 .navbar,
@@ -334,7 +327,7 @@ tr:hover {
 
 /* Footer */
 footer {
-  background-color: var(--pivoine-bg-darker) !important;
+  background-color: var(--pivoine-bg-dark) !important;
   border-top: 2px solid var(--pivoine-rose) !important;
   color: var(--pivoine-text-secondary) !important;
   padding: 24px 0 !important;