Dark mode - app colors
This commit is contained in:
52
index.html
52
index.html
@@ -17,10 +17,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--primary: #4F46E5;
|
--primary: #C4A06A;
|
||||||
--primary-dark: #4338ca;
|
--primary-dark: #a88656;
|
||||||
--secondary: #10B981;
|
--secondary: #E86A4A;
|
||||||
--dark: #111827;
|
--secondary-dark: #c45535;
|
||||||
|
--dark: #18191c;
|
||||||
--light: #F9FAFB;
|
--light: #F9FAFB;
|
||||||
--gray: #6B7280;
|
--gray: #6B7280;
|
||||||
}
|
}
|
||||||
@@ -28,8 +29,8 @@
|
|||||||
body {
|
body {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: var(--dark);
|
color: #e5e7eb;
|
||||||
background: var(--light);
|
background: #18191c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@@ -41,8 +42,14 @@
|
|||||||
/* Header */
|
/* Header */
|
||||||
header {
|
header {
|
||||||
padding: 1.5rem 0;
|
padding: 1.5rem 0;
|
||||||
background: white;
|
background: #282a2e;
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-text {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #e5e7eb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-content {
|
.header-content {
|
||||||
@@ -69,7 +76,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
nav a {
|
nav a {
|
||||||
color: var(--gray);
|
color: #b9bbbe;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
transition: color 0.2s;
|
transition: color 0.2s;
|
||||||
@@ -83,7 +90,7 @@
|
|||||||
.hero {
|
.hero {
|
||||||
padding: 6rem 0;
|
padding: 6rem 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #C4A06A 0%, #E86A4A 100%);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -111,12 +118,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background: var(--secondary);
|
background: #E86A4A;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:hover {
|
.btn-primary:hover {
|
||||||
background: #059669;
|
background: #c45535;
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -135,7 +142,18 @@
|
|||||||
/* Features */
|
/* Features */
|
||||||
.features {
|
.features {
|
||||||
padding: 5rem 0;
|
padding: 5rem 0;
|
||||||
background: white;
|
background: #18191c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background: #282a2e;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card p {
|
||||||
|
color: #b9bbbe;
|
||||||
}
|
}
|
||||||
|
|
||||||
.features h2 {
|
.features h2 {
|
||||||
@@ -178,12 +196,14 @@
|
|||||||
/* About */
|
/* About */
|
||||||
.about {
|
.about {
|
||||||
padding: 5rem 0;
|
padding: 5rem 0;
|
||||||
|
background: #282a2e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about h2 {
|
.about h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 2.25rem;
|
font-size: 2.25rem;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
|
color: #e5e7eb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-content {
|
.about-content {
|
||||||
@@ -192,6 +212,12 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.about p {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: #b9bbbe;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.about p {
|
.about p {
|
||||||
font-size: 1.125rem;
|
font-size: 1.125rem;
|
||||||
color: var(--gray);
|
color: var(--gray);
|
||||||
|
|||||||
Reference in New Issue
Block a user