diff --git a/scene_gamification.html b/scene_gamification.html
index 1387eff..a4de983 100644
--- a/scene_gamification.html
+++ b/scene_gamification.html
@@ -14,6 +14,7 @@
--primary-light: #818cf8;
--primary-dark: #4f46e5;
--secondary: #f472b6;
+ --secondary-light: #f9a8d4;
--accent: #34d399;
--accent-warn: #fbbf24;
--accent-danger: #f87171;
@@ -113,7 +114,6 @@
position: sticky;
top: 0;
z-index: 100;
- border-radius: 0 0 var(--radius-lg) var(--radius-lg);
margin-bottom: var(--space-6);
}
diff --git a/scene_swipe.html b/scene_swipe.html
index a5e7409..12c0cfc 100644
--- a/scene_swipe.html
+++ b/scene_swipe.html
@@ -80,6 +80,70 @@
h1, h2, h3, h4 { font-family: 'Outfit', sans-serif; }
+ /* Buttons */
+ .btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-2);
+ padding: var(--space-4) var(--space-8);
+ border-radius: var(--radius-full);
+ font-size: 1rem;
+ font-weight: 600;
+ font-family: 'Outfit', sans-serif;
+ cursor: pointer;
+ border: none;
+ transition: all var(--transition-base);
+ min-height: 56px;
+ min-width: 160px;
+ }
+
+ .btn-primary {
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+ color: white;
+ box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+ }
+
+ .btn-primary:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 25px rgba(99, 102, 241, 0.5);
+ }
+
+ .btn-primary:active {
+ transform: translateY(0);
+ }
+
+ .btn-secondary {
+ background: var(--bg-card);
+ color: var(--text-primary);
+ box-shadow: var(--shadow-sm);
+ }
+
+ .btn-secondary:hover {
+ background: var(--bg-secondary);
+ }
+
+ .btn-ghost {
+ background: transparent;
+ color: var(--text-secondary);
+ min-width: auto;
+ padding: var(--space-3) var(--space-4);
+ }
+
+ .btn-icon {
+ width: 56px;
+ height: 56px;
+ padding: 0;
+ border-radius: var(--radius-lg);
+ }
+
+ .btn svg {
+ width: 20px;
+ height: 20px;
+ stroke: currentColor;
+ fill: none;
+ }
+
/* Header */
.header {
display: flex;
diff --git a/scene_visualization.html b/scene_visualization.html
index b1a0f1e..d7a64cf 100644
--- a/scene_visualization.html
+++ b/scene_visualization.html
@@ -96,6 +96,70 @@
font-weight: 600;
}
+ /* Buttons */
+ .btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-2);
+ padding: var(--space-4) var(--space-8);
+ border-radius: var(--radius-full);
+ font-size: 1rem;
+ font-weight: 600;
+ font-family: 'Outfit', sans-serif;
+ cursor: pointer;
+ border: none;
+ transition: all var(--transition-base);
+ min-height: 56px;
+ min-width: 160px;
+ }
+
+ .btn-primary {
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+ color: white;
+ box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+ }
+
+ .btn-primary:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 25px rgba(99, 102, 241, 0.5);
+ }
+
+ .btn-primary:active {
+ transform: translateY(0);
+ }
+
+ .btn-secondary {
+ background: var(--bg-card);
+ color: var(--text-primary);
+ box-shadow: var(--shadow-sm);
+ }
+
+ .btn-secondary:hover {
+ background: var(--bg-secondary);
+ }
+
+ .btn-ghost {
+ background: transparent;
+ color: var(--text-secondary);
+ min-width: auto;
+ padding: var(--space-3) var(--space-4);
+ }
+
+ .btn-icon {
+ width: 56px;
+ height: 56px;
+ padding: 0;
+ border-radius: var(--radius-lg);
+ }
+
+ .btn svg {
+ width: 20px;
+ height: 20px;
+ stroke: currentColor;
+ fill: none;
+ }
+
.app {
max-width: 720px;
margin: 0 auto;
@@ -106,18 +170,55 @@
.header {
display: flex;
align-items: center;
- gap: var(--space-4);
- margin-bottom: var(--space-8);
- padding-top: var(--space-2);
+ justify-content: space-between;
+ padding: var(--space-4) var(--space-6);
+ background: var(--bg-card);
+ box-shadow: var(--shadow-sm);
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ }
+
+ .header-left {
+ display: flex;
+ align-items: center;
+ gap: var(--space-3);
+ }
+
+ .header-logo {
+ width: 40px;
+ height: 40px;
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+ border-radius: var(--radius-md);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .header-logo svg {
+ width: 24px;
+ height: 24px;
+ fill: white;
+ }
+
+ .header-title {
+ font-family: 'Outfit', sans-serif;
+ font-size: 1.25rem;
+ font-weight: 600;
+ }
+
+ .header-right {
+ display: flex;
+ align-items: center;
+ gap: var(--space-3);
}
.back-btn {
width: 40px;
height: 40px;
- border-radius: var(--radius-sm);
- border: 1px solid var(--bg-secondary);
- background: var(--bg-card);
- color: var(--text-secondary);
+ border-radius: var(--radius-md);
+ background: var(--bg-secondary);
+ border: none;
display: flex;
align-items: center;
justify-content: center;
@@ -127,21 +228,14 @@
}
.back-btn:hover {
- border-color: var(--primary-light);
- color: var(--primary);
- background: var(--bg-card);
+ background: var(--primary-light);
+ color: white;
}
.back-btn svg {
width: 20px;
height: 20px;
- }
-
- .header-title {
- font-family: 'Outfit', sans-serif;
- font-size: 1.375rem;
- font-weight: 600;
- letter-spacing: -0.3px;
+ stroke: currentColor;
}
/* Comparison Banner */
@@ -715,13 +809,21 @@