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 @@