Initial commit: static Zeppo website with Dockerfile and Gitea CI
Some checks failed
Build and Publish Docker Image / build-and-push (push) Failing after 2m5s
Some checks failed
Build and Publish Docker Image / build-and-push (push) Failing after 2m5s
This commit is contained in:
Stephen Tafoya
225
style.css
Normal file
225
style.css
Normal file
@@ -0,0 +1,225 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
|
||||
|
||||
:root {
|
||||
--bg: #0f0f14;
|
||||
--card: #1a1a24;
|
||||
--accent: #f5a623;
|
||||
--accent-dim: #b87d1a;
|
||||
--text: #e8e8ee;
|
||||
--muted: #8888a0;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 4rem 1rem 2rem;
|
||||
background: linear-gradient(180deg, #1c1c2e 0%, var(--bg) 100%);
|
||||
border-bottom: 1px solid #2a2a3a;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.04em;
|
||||
background: linear-gradient(135deg, var(--accent), #ff6b6b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--muted);
|
||||
margin-top: 0.5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding: 5rem 1rem;
|
||||
background: radial-gradient(ellipse at center, #1c1c2e 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
font-size: 3rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.glow {
|
||||
background: linear-gradient(135deg, var(--accent), #ff6b6b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: 0 0 40px rgba(245, 166, 35, 0.3);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
color: var(--muted);
|
||||
margin-top: 1rem;
|
||||
max-width: 36rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
section {
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
padding: 4rem 1.5rem;
|
||||
}
|
||||
|
||||
section h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card);
|
||||
border: 1px solid #2a2a3a;
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
transition: transform 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--accent-dim);
|
||||
}
|
||||
|
||||
.card .emoji {
|
||||
font-size: 2.5rem;
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.testimonials {
|
||||
background: linear-gradient(135deg, #151520, #1a1a24);
|
||||
border-radius: 1.5rem;
|
||||
margin-block: 2rem;
|
||||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.testimonials h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
background: var(--card);
|
||||
border: 1px solid #2a2a3a;
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.testimonial p {
|
||||
font-style: italic;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.testimonial cite {
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat {
|
||||
background: var(--card);
|
||||
border: 1px solid #2a2a3a;
|
||||
border-radius: 1rem;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.stat .number {
|
||||
display: block;
|
||||
font-size: 3rem;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, var(--accent), #ff6b6b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.stat .label {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.conclusion {
|
||||
text-align: center;
|
||||
max-width: 48rem;
|
||||
}
|
||||
|
||||
.conclusion p {
|
||||
font-size: 1.15rem;
|
||||
color: var(--muted);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.final {
|
||||
font-size: 1.5rem !important;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, var(--accent), #ff6b6b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-top: 1.5rem !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
border-top: 1px solid #2a2a3a;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
h1 { font-size: 3rem; }
|
||||
.hero h2 { font-size: 2rem; }
|
||||
section { padding: 2.5rem 1rem; }
|
||||
}
|
||||
Reference in New Issue
Block a user