epilogue/eplg-cloud
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: epilogue:f72dac2732136af582fcc6b1839517b883b83f9a
Branches Tags
epilogue:main
epilogue:dev
..
compare: epilogue:71de77da58fa2c28f2b63305ec592a1d4fd89532
Branches Tags
epilogue:dev
epilogue:main

No commits in common. "f72dac2732136af582fcc6b1839517b883b83f9a" and "71de77da58fa2c28f2b63305ec592a1d4fd89532" have entirely different histories.
f72dac2732 ... 71de77da58

1 changed files with 52 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

119
style.css
View file

@ -1,12 +1,12 @@
:root { :root {
--dark-bg: #000000; --dark-bg: #121212;
--dark-surface: #000000; --dark-surface: #1e1e1e;
--dark-border: #1a1a1a; --dark-border: #2a2a2a;
--dark-accent: #1a1a1a; --dark-accent: #3a3a3a;
--text-primary: #ffffff; --text-primary: #ffffff;
--text-secondary: #808080; --text-secondary: #b3b3b3;
--accent-color: #ffffff; --accent-color: #6d5acd;
--accent-light: #ffffff; --accent-light: #8b7ce0;
} }
* { * {
@ -31,11 +31,11 @@ body {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-image: background-image:
linear-gradient(to right, var(--dark-border) 1px, transparent 1px), linear-gradient(to right, var(--dark-border) 1px, transparent 1px),
linear-gradient(to bottom, var(--dark-border) 1px, transparent 1px); linear-gradient(to bottom, var(--dark-border) 1px, transparent 1px);
background-size: 30px 30px; background-size: 30px 30px;
opacity: 0.1; opacity: 0.2;
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
} }
@ -66,7 +66,7 @@ nav {
} }
.logo span { .logo span {
color: var(--text-primary); color: var(--accent-color);
} }
.nav-links { .nav-links {
@ -78,9 +78,7 @@ nav {
color: var(--text-secondary); color: var(--text-secondary);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
transition: all 0.3s ease; transition: color 0.2s ease;
transform: translateY(0);
display: inline-block;
} }
.nav-links a:hover { .nav-links a:hover {
@ -98,10 +96,10 @@ nav {
font-weight: 800; font-weight: 800;
letter-spacing: -1.5px; letter-spacing: -1.5px;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
color: var(--text-primary); background: linear-gradient(90deg, var(--text-primary), var(--accent-light));
background: none; -webkit-background-clip: text;
-webkit-background-clip: unset; background-clip: text;
background-clip: unset; color: transparent;
} }
.hero p { .hero p {
@ -125,41 +123,31 @@ nav {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
border-radius: 0; border-radius: 8px;
transition: background-color 0.3s ease; transition: all 0.2s ease;
position: relative;
border: none;
} }
.button-primary { .button-primary {
background-color: var(--text-primary); background-color: var(--accent-color);
color: var(--dark-bg); color: white;
box-shadow: 0 4px 0 rgba(128, 128, 128, 1); border: none;
} }
.button-primary:hover { .button-primary:hover {
background-color: var(--text-secondary); background-color: var(--accent-light);
} transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(109, 90, 205, 0.2);
.button-primary:active {
background-color: var(--text-secondary);
} }
.button-secondary { .button-secondary {
background-color: #333333; background-color: transparent;
color: var(--text-primary); color: var(--text-primary);
border: none; border: 1px solid var(--dark-border);
box-shadow: 0 4px 0 rgba(128, 128, 128, 0.5);
} }
.button-secondary:hover { .button-secondary:hover {
background-color: #1a1a1a; border-color: var(--text-secondary);
color: var(--text-primary); transform: translateY(-2px);
}
.button-secondary:active {
background-color: #1a1a1a;
color: var(--text-primary);
} }
.features { .features {
@ -184,12 +172,13 @@ nav {
.feature-card { .feature-card {
background-color: var(--dark-surface); background-color: var(--dark-surface);
border: 1px solid var(--dark-border); border: 1px solid var(--dark-border);
border-radius: 12px;
padding: 2rem; padding: 2rem;
transition: transform 0.3s ease, border-color 0.3s ease; transition: transform 0.3s ease, border-color 0.3s ease;
transform: translateY(0);
} }
.feature-card:hover { .feature-card:hover {
transform: translateY(-5px);
border-color: var(--dark-accent); border-color: var(--dark-accent);
} }
@ -228,28 +217,29 @@ nav {
gap: 2.5rem; gap: 2.5rem;
} }
.pricing-grid > div:nth-child(4) { .pricing-grid>div:nth-child(4) {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.pricing-card { .pricing-card {
background-color: var(--dark-surface); background-color: var(--dark-surface);
border: 1px solid var(--dark-border); border: 1px solid var(--dark-border);
border-radius: 12px;
padding: 2.5rem; padding: 2.5rem;
text-align: center; text-align: center;
transition: transform 0.3s ease, border-color 0.3s ease; transition: transform 0.3s ease, border-color 0.3s ease;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 600px; min-height: 600px;
transform: translateY(0);
} }
.pricing-card:hover { .pricing-card:hover {
transform: translateY(-5px);
border-color: var(--dark-accent); border-color: var(--dark-accent);
} }
.pricing-card.featured { .pricing-card.featured {
border-color: var(--text-primary); border-color: var(--accent-color);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@ -259,8 +249,8 @@ nav {
position: absolute; position: absolute;
top: 1rem; top: 1rem;
right: -2rem; right: -2rem;
background-color: var(--text-primary); background-color: var(--accent-color);
color: var(--dark-bg); color: white;
padding: 0.25rem 2rem; padding: 0.25rem 2rem;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
@ -310,12 +300,12 @@ nav {
.pricing-features li::before { .pricing-features li::before {
content: "✓"; content: "✓";
color: var(--text-primary); color: var(--accent-color);
margin-right: 0.5rem; margin-right: 0.5rem;
font-weight: bold; font-weight: bold;
} }
.pricing-grid > div:last-child { .pricing-grid>div:last-child {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -325,7 +315,7 @@ nav {
position: relative; position: relative;
} }
.pricing-grid > div:last-child h3 { .pricing-grid>div:last-child h3 {
position: absolute; position: absolute;
top: 2rem; top: 2rem;
left: 2rem; left: 2rem;
@ -334,14 +324,14 @@ nav {
text-align: center; text-align: center;
} }
.pricing-grid > div:last-child .price { .pricing-grid>div:last-child .price {
min-height: auto; min-height: auto;
margin: 0; margin: 0;
flex: 0 0 200px; flex: 0 0 200px;
margin-top: 4rem; margin-top: 4rem;
} }
.pricing-grid > div:last-child .pricing-features { .pricing-grid>div:last-child .pricing-features {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 0.75rem; gap: 0.75rem;
@ -350,7 +340,7 @@ nav {
margin-top: 4rem; margin-top: 4rem;
} }
.pricing-grid > div:last-child .button { .pricing-grid>div:last-child .button {
flex: 0 0 auto; flex: 0 0 auto;
margin: 0; margin: 0;
margin-top: 4rem; margin-top: 4rem;
@ -418,20 +408,15 @@ footer {
.stat-item { .stat-item {
background-color: var(--dark-surface); background-color: var(--dark-surface);
border: 1px solid var(--dark-border); border: 1px solid var(--dark-border);
border-radius: 12px;
padding: 1.5rem; padding: 1.5rem;
text-align: center; text-align: center;
transition: transform 0.3s ease, border-color 0.3s ease;
transform: translateY(0);
}
.stat-item:hover {
border-color: var(--dark-accent);
} }
.stat-number { .stat-number {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--accent-color);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -444,19 +429,19 @@ footer {
.hero h1 { .hero h1 {
font-size: 3rem; font-size: 3rem;
} }
.cta-buttons { .cta-buttons {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
} }
.button { .button {
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
text-align: center; text-align: center;
} }
.nav-links { .nav-links {
display: none; display: none;
} }
@ -470,23 +455,23 @@ footer {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.pricing-grid > div:last-child { .pricing-grid>div:last-child {
flex-direction: column; flex-direction: column;
min-height: 600px; min-height: 600px;
} }
.pricing-grid > div:last-child h3 { .pricing-grid>div:last-child h3 {
position: static; position: static;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.pricing-grid > div:last-child .price, .pricing-grid>div:last-child .price,
.pricing-grid > div:last-child .pricing-features, .pricing-grid>div:last-child .pricing-features,
.pricing-grid > div:last-child .button { .pricing-grid>div:last-child .button {
margin-top: 0; margin-top: 0;
} }
.pricing-grid > div:last-child .pricing-features { .pricing-grid>div:last-child .pricing-features {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }