diff --git a/index.html b/index.html
index dc756c2..42ad93c 100644
--- a/index.html
+++ b/index.html
@@ -70,7 +70,7 @@
-
+
@@ -118,18 +118,18 @@
}
:root {
- --primary: #3b82f6;
- --primary-hover: #2563eb;
- --secondary: #6b7280;
- --secondary-hover: #4b5563;
- --success: #10b981;
- --warning: #f59e0b;
- --background: #ffffff;
- --surface: #f8fafc;
- --border: #e5e7eb;
- --text: #111827;
- --text-muted: #6b7280;
- --shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+ --primary: #4A5F7A;
+ --primary-hover: #3d4f63;
+ --secondary: #8B9EB0;
+ --secondary-hover: #748594;
+ --success: #6B8E9F;
+ --warning: #9FA8B0;
+ --background: #F8F9FA;
+ --surface: #FFFFFF;
+ --border: #D8DEE4;
+ --text: #2C3E50;
+ --text-muted: #6C7A89;
+ --shadow: 0 4px 12px rgba(74, 95, 122, 0.08);
}
body {
@@ -137,7 +137,7 @@
"Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: var(--text);
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ background: linear-gradient(135deg, #E8EEF2 0%, #D4DCE3 100%);
min-height: 100vh;
}
@@ -150,41 +150,40 @@
.hero {
text-align: center;
padding: 4rem 0;
- color: white;
+ color: var(--text);
}
.hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1rem;
- background: linear-gradient(45deg, #fff, #f0f9ff);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
+ color: var(--primary);
}
.hero p {
font-size: 1.25rem;
- opacity: 0.9;
+ color: var(--text-muted);
margin-bottom: 2rem;
}
.badge {
display: inline-block;
- background: rgba(255, 255, 255, 0.2);
+ background: var(--surface);
padding: 0.5rem 1rem;
border-radius: 2rem;
margin: 0 0.5rem;
- backdrop-filter: blur(10px);
- border: 1px solid rgba(255, 255, 255, 0.3);
+ border: 1px solid var(--border);
+ color: var(--text-muted);
+ font-size: 0.875rem;
}
.content {
- background: var(--background);
- border-radius: 2rem;
+ background: var(--surface);
+ border-radius: 1rem;
margin-top: 2rem;
box-shadow: var(--shadow);
overflow: hidden;
+ border: 1px solid var(--border);
}
.section {
@@ -214,42 +213,43 @@
}
.demo-box {
- background: var(--surface);
+ background: var(--background);
border: 2px dashed var(--border);
- border-radius: 1rem;
+ border-radius: 0.75rem;
padding: 3rem;
text-align: center;
margin: 2rem 0;
}
.demo-box h3 {
- color: var(--secondary);
+ color: var(--text);
margin-bottom: 1rem;
}
.code-block {
- background: #1f2937;
- color: #f9fafb;
+ background: #2C3E50;
+ color: #E8EEF2;
padding: 1.5rem;
- border-radius: 0.75rem;
+ border-radius: 0.5rem;
overflow-x: auto;
margin: 1rem 0;
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
font-size: 0.875rem;
line-height: 1.5;
+ border: 1px solid var(--primary);
}
.code-block .comment {
- color: #6b7280;
+ color: #8B9EB0;
}
.code-block .tag {
- color: #8b5cf6;
+ color: #6B8E9F;
}
.code-block .attr {
- color: #06b6d4;
+ color: #9FA8B0;
}
.code-block .string {
- color: #10b981;
+ color: #A8C5D1;
}
.grid {
@@ -262,8 +262,14 @@
.card {
background: var(--surface);
padding: 2rem;
- border-radius: 1rem;
+ border-radius: 0.75rem;
border: 1px solid var(--border);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ }
+
+ .card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 16px rgba(74, 95, 122, 0.12);
}
.card h3 {
@@ -290,46 +296,55 @@
}
.highlight-box {
- background: linear-gradient(135deg, var(--warning), #f59e0b);
+ background: var(--primary);
color: white;
padding: 2rem;
- border-radius: 1rem;
+ border-radius: 0.75rem;
margin: 2rem 0;
text-align: center;
+ border: 1px solid var(--primary-hover);
}
.highlight-box h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
+ color: white;
+ }
+
+ .highlight-box p {
+ color: rgba(255, 255, 255, 0.9);
}
.btn {
display: inline-block;
- padding: 1rem 2rem;
+ padding: 0.875rem 1.75rem;
background: var(--primary);
color: white;
text-decoration: none;
border: none;
border-radius: 0.5rem;
- font-weight: 600;
+ font-weight: 500;
transition: all 0.2s ease;
margin: 0.5rem;
cursor: pointer;
- font-size: 1rem;
+ font-size: 0.9375rem;
}
.btn:hover {
background: var(--primary-hover);
- transform: translateY(-2px);
- box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(74, 95, 122, 0.2);
}
.btn-secondary {
- background: var(--secondary);
+ background: var(--surface);
+ color: var(--text);
+ border: 1px solid var(--border);
}
.btn-secondary:hover {
- background: var(--secondary-hover);
+ background: var(--background);
+ border-color: var(--primary);
}
.btn-success {
@@ -337,12 +352,12 @@
}
.btn-warning {
- background: var(--warning);
+ background: var(--secondary);
}
.demo-controls {
- background: #fef3c7;
- border: 1px solid var(--warning);
+ background: var(--surface);
+ border: 1px solid var(--border);
border-radius: 0.75rem;
padding: 1.5rem;
margin: 2rem 0;
@@ -350,20 +365,21 @@
.demo-controls h4 {
margin: 0 0 1rem 0;
- color: #92400e;
+ color: var(--text);
}
.demo-controls p {
font-size: 0.875rem;
margin: 0.5rem 0;
- color: #92400e;
+ color: var(--text-muted);
}
.feature-comparison {
background: var(--surface);
- border-radius: 1rem;
+ border-radius: 0.75rem;
padding: 2rem;
margin: 2rem 0;
+ border: 1px solid var(--border);
}
.feature-comparison table {
@@ -382,11 +398,11 @@
.feature-comparison th {
background: var(--primary);
color: white;
- font-weight: 600;
+ font-weight: 500;
}
.feature-comparison tr:hover {
- background: rgba(59, 130, 246, 0.05);
+ background: rgba(74, 95, 122, 0.03);
}
.footer {
@@ -394,7 +410,7 @@
padding: 2rem;
color: var(--text-muted);
border-top: 1px solid var(--border);
- background: var(--surface);
+ background: var(--background);
}
@media (max-width: 768px) {
@@ -1434,7 +1450,7 @@
🚀 Ready to collect feedback?
Documentation🚀 Ready to collect feedback?
•
Report Issues🚀 Ready to collect feedback?
•
MIT License🚀 Ready to collect feedback?
•
Samlet Norge
style="
width: 100%;
padding: 0.75rem;
- border: 2px solid var(--success);
+ border: 2px solid var(--primary);
border-radius: 0.5rem;
font-size: 1rem;
"
@@ -1514,7 +1530,7 @@
style="
width: 100%;
padding: 0.75rem;
- border: 2px solid var(--success);
+ border: 2px solid var(--primary);
border-radius: 0.5rem;
font-size: 1rem;
resize: vertical;
@@ -1529,7 +1545,7 @@
style="
width: 100%;
padding: 0.75rem;
- border: 2px solid var(--success);
+ border: 2px solid var(--primary);
border-radius: 0.5rem;
font-size: 1rem;
"
@@ -1539,13 +1555,13 @@