Update style.css

This commit is contained in:
2026-06-21 02:18:20 +00:00
parent 39938f6731
commit 6bfa37f727
+343 -175
View File
@@ -1,3 +1,19 @@
:root {
--bg: #05060b;
--bg-soft: #0a0d16;
--panel: rgba(14, 18, 30, 0.82);
--panel-strong: rgba(18, 15, 30, 0.94);
--border: rgba(159, 96, 255, 0.24);
--border-bright: rgba(159, 96, 255, 0.55);
--text: #f4f1ff;
--muted: #bcb3d8;
--purple: #a46cff;
--purple-2: #7c3cff;
--green: #61ffb1;
--blue: #4aa3ff;
--orange: #ff7a3d;
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@@ -8,12 +24,27 @@ html {
body { body {
margin: 0; margin: 0;
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #0d0b14; background:
color: #f4f1ff; radial-gradient(circle at top left, rgba(124, 60, 255, 0.22), transparent 28rem),
radial-gradient(circle at 80% 20%, rgba(74, 163, 255, 0.09), transparent 24rem),
linear-gradient(180deg, #05060b 0%, #080713 45%, #05060b 100%);
color: var(--text);
line-height: 1.6; line-height: 1.6;
} }
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(164, 108, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(164, 108, 255, 0.035) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: linear-gradient(to bottom, black, transparent 75%);
}
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
@@ -23,284 +54,421 @@ img {
max-width: 100%; max-width: 100%;
} }
.hero { .site-header {
min-height: 100vh; position: sticky;
padding: 32px; top: 0;
background: z-index: 50;
radial-gradient(circle at top left, rgba(139, 92, 246, 0.38), transparent 32%), height: 76px;
radial-gradient(circle at bottom right, rgba(64, 255, 180, 0.12), transparent 35%), padding: 0 42px;
#0d0b14;
}
.nav {
max-width: 1280px;
margin: 0 auto;
display: flex; display: flex;
justify-content: space-between;
gap: 24px;
align-items: center; align-items: center;
gap: 32px;
border-bottom: 1px solid rgba(159, 96, 255, 0.16);
background: rgba(5, 6, 11, 0.82);
backdrop-filter: blur(18px);
} }
.logo { .brand {
display: flex;
align-items: center;
gap: 14px;
margin-right: auto;
font-weight: 900; font-weight: 900;
font-size: 1.5rem; letter-spacing: 0.12em;
letter-spacing: 0.04em; text-transform: uppercase;
color: #b783ff;
} }
.nav-links { .brand img {
width: 42px;
height: 42px;
object-fit: contain;
}
.site-header nav {
display: flex; display: flex;
gap: 22px; gap: 26px;
color: #d8d0ee; font-size: 0.78rem;
font-weight: 600; font-weight: 800;
flex-wrap: wrap; text-transform: uppercase;
letter-spacing: 0.08em;
color: #ded6ff;
} }
.nav-links a:hover { .site-header nav a:hover {
color: #8effc1; color: var(--green);
} }
.hero-grid { .nav-button {
max-width: 1280px; border: 1px solid var(--border-bright);
margin: 110px auto 0; padding: 10px 16px;
border-radius: 8px;
color: #eee7ff;
font-size: 0.8rem;
font-weight: 800;
text-transform: uppercase;
}
.hero {
max-width: 1320px;
margin: 0 auto;
min-height: calc(100vh - 76px);
padding: 82px 42px 36px;
display: grid; display: grid;
grid-template-columns: 0.95fr 1.05fr; grid-template-columns: 0.9fr 1.1fr;
gap: 42px; gap: 48px;
align-items: center; align-items: center;
} }
.hero-content {
max-width: 720px;
}
.eyebrow { .eyebrow {
color: #8effc1; color: var(--green);
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.22em;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 0.82rem;
font-weight: 800;
} }
h1 { .hero h1,
font-size: clamp(2.6rem, 6vw, 5.2rem); .section h2,
.split-section h2,
.skills h2 {
margin: 0;
line-height: 0.98; line-height: 0.98;
margin: 16px 0; letter-spacing: -0.05em;
} }
.subtext { .hero h1 {
color: #cfc7e8; font-size: clamp(3rem, 6vw, 5.8rem);
font-size: 1.15rem; max-width: 720px;
} }
.buttons { .hero h1 span {
margin-top: 34px; color: var(--purple);
text-shadow: 0 0 28px rgba(164, 108, 255, 0.4);
}
.hero-copy p:not(.eyebrow) {
color: #d4cdec;
max-width: 660px;
font-size: 1.05rem;
}
.actions {
display: flex; display: flex;
gap: 16px; gap: 16px;
margin-top: 32px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.btn { .button {
padding: 14px 22px; border-radius: 9px;
border-radius: 999px; padding: 14px 20px;
font-weight: 800; font-weight: 900;
font-size: 0.86rem;
text-transform: uppercase;
letter-spacing: 0.04em;
} }
.primary { .primary {
background: #8b5cf6; background: linear-gradient(135deg, var(--purple), var(--purple-2));
color: white; box-shadow: 0 0 30px rgba(164, 108, 255, 0.25);
box-shadow: 0 0 24px rgba(139, 92, 246, 0.35);
} }
.secondary { .secondary {
border: 1px solid #8b5cf6; border: 1px solid var(--border-bright);
color: #d9ccff; background: rgba(255, 255, 255, 0.02);
} }
.hero-image, .hero-art {
.feature-image, position: relative;
.screenshot-card { display: flex;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35); justify-content: center;
} }
.hero-image img, .hero-art img {
.feature-image img, max-height: 620px;
.screenshot-card img { object-fit: contain;
display: block; filter: drop-shadow(0 0 42px rgba(164, 108, 255, 0.35));
width: 100%;
} }
.hero-image { .hero-art::after {
border: 1px solid #302747; content: "";
border-radius: 22px; position: absolute;
overflow: hidden; inset: 10%;
background: #171321; border-radius: 50%;
background: rgba(164, 108, 255, 0.12);
filter: blur(90px);
z-index: -1;
} }
.stats { .stats {
max-width: 1180px; max-width: 1240px;
margin: -58px auto 60px; margin: 0 auto 18px;
padding: 0 42px;
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(5, 1fr);
gap: 16px; gap: 0;
padding: 0 32px; border: 1px solid var(--border);
position: relative; border-radius: 18px;
z-index: 2; background: rgba(12, 15, 27, 0.82);
overflow: hidden;
} }
.stats div { .stats div {
background: rgba(23, 19, 33, 0.94);
border: 1px solid #302747;
border-radius: 18px;
padding: 24px; padding: 24px;
text-align: center; border-right: 1px solid rgba(159, 96, 255, 0.16);
}
.stats div:last-child {
border-right: none;
}
.stats strong {
display: block;
font-size: 2rem;
color: var(--text);
} }
.stats span { .stats span {
display: block; color: var(--muted);
font-size: 2rem;
font-weight: 900;
color: #8effc1;
}
.stats p {
margin: 4px 0 0;
color: #cfc7e8;
} }
.split-section,
.section { .section {
max-width: 1180px; max-width: 1240px;
margin: 0 auto; margin: 0 auto;
padding: 80px 32px; padding: 72px 42px;
} }
.section-heading { .split-section {
max-width: 860px;
margin-bottom: 32px;
}
.section h2 {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.05;
margin: 10px 0 16px;
}
.section p {
color: #cfc7e8;
}
.intro {
padding-top: 40px;
}
.dark {
max-width: none;
padding-left: calc((100% - 1180px) / 2 + 32px);
padding-right: calc((100% - 1180px) / 2 + 32px);
background: #120f1b;
}
.feature-image {
border: 1px solid #302747;
border-radius: 22px;
overflow: hidden;
background: #171321;
}
.feature-image.wide {
max-width: 100%;
}
.screenshot-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: 1.45fr 0.9fr;
gap: 24px; gap: 24px;
} }
.screenshot-card { .panel,
background: #171321; .card,
border: 1px solid #302747; .feature-card,
border-radius: 20px; .challenge-grid div {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005)),
var(--panel);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
}
.panel {
padding: 28px;
}
.panel h2,
.section h2,
.skills h2 {
font-size: clamp(2.2rem, 4vw, 4rem);
}
.panel p,
.section > p,
.card p,
.feature-card p,
.challenge-grid p,
.panel li {
color: var(--muted);
}
.panel img {
margin-top: 22px;
border-radius: 14px;
border: 1px solid rgba(159, 96, 255, 0.2);
}
.about ul {
list-style: none;
padding: 0;
margin: 28px 0 0;
}
.about li {
margin: 14px 0;
padding-left: 30px;
position: relative;
}
.about li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--green);
}
.section > p {
max-width: 820px;
margin-bottom: 28px;
}
.card-grid {
display: grid;
gap: 22px;
}
.card-grid.two {
grid-template-columns: repeat(2, 1fr);
}
.card {
overflow: hidden; overflow: hidden;
} }
.screenshot-card div { .card img {
width: 100%;
height: 265px;
object-fit: cover;
object-position: top;
border-bottom: 1px solid rgba(159, 96, 255, 0.18);
}
.card h3 {
color: var(--purple);
font-size: 1.45rem;
padding: 22px 24px 0;
margin: 0;
}
.card p {
padding: 8px 24px 24px;
margin: 0;
}
.feature-card {
overflow: hidden;
}
.feature-card img {
width: 100%;
display: block;
}
.feature-card div {
padding: 28px;
}
.feature-card h3 {
color: var(--purple);
font-size: 1.6rem;
margin: 0 0 8px;
}
.challenge-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 26px;
}
.challenge-grid div {
padding: 22px; padding: 22px;
} }
.screenshot-card h3 { .challenge-grid h3 {
margin: 0 0 8px; color: var(--green);
color: #b783ff; margin-top: 0;
font-size: 1.3rem;
}
.screenshot-card p {
margin: 0;
color: #cfc7e8;
} }
.skills { .skills {
max-width: 1240px;
margin: 0 auto;
padding: 72px 42px 92px;
text-align: center; text-align: center;
} }
.skills-grid { .skills-list {
margin-top: 28px; margin-top: 28px;
display: flex; display: flex;
flex-wrap: wrap;
justify-content: center; justify-content: center;
flex-wrap: wrap;
gap: 12px; gap: 12px;
} }
.skills-grid span { .skills-list span {
border: 1px solid #302747; border: 1px solid var(--border);
background: #171321; color: #ded6ff;
color: #d9ccff; background: rgba(18, 15, 30, 0.8);
padding: 10px 14px; padding: 10px 16px;
border-radius: 999px; border-radius: 999px;
font-weight: 700; font-weight: 800;
font-size: 0.9rem;
} }
footer { footer {
padding: 36px; border-top: 1px solid rgba(159, 96, 255, 0.16);
padding: 34px 42px;
text-align: center; text-align: center;
color: #8f86a8; color: var(--muted);
border-top: 1px solid #211a31;
} }
@media (max-width: 950px) { footer span {
.hero-grid, color: var(--purple);
.screenshot-grid { font-weight: 900;
}
footer p {
margin: 6px 0 0;
}
@media (max-width: 1050px) {
.site-header {
position: static;
height: auto;
padding: 22px;
flex-wrap: wrap;
}
.site-header nav {
order: 3;
width: 100%;
flex-wrap: wrap;
}
.hero,
.split-section,
.card-grid.two,
.challenge-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.hero-grid {
margin-top: 80px;
}
.stats { .stats {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
margin-top: 40px; }
.stats div {
border-bottom: 1px solid rgba(159, 96, 255, 0.16);
} }
} }
@media (max-width: 650px) { @media (max-width: 650px) {
.hero, .hero,
.section { .split-section,
.section,
.skills {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
.nav {
align-items: flex-start;
flex-direction: column;
}
.stats { .stats {
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 0 20px; padding: 0 20px;
border: none;
background: transparent;
gap: 12px;
} }
.dark { .stats div {
padding-left: 20px; border: 1px solid var(--border);
padding-right: 20px; border-radius: 14px;
background: var(--panel);
}
.card img {
height: 210px;
} }
} }