Update style.css

2026-06-21 00:40:26 +00:00
parent 466a56fd23
commit b1e90132ee
1 changed files with 200 additions and 0 deletions
@@ -0,0 +1,200 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #0d0b14;
+  color: #f4f1ff;
+  line-height: 1.6;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.hero {
+  min-height: 100vh;
+  padding: 32px;
+  background:
+    radial-gradient(circle at top left, rgba(138, 43, 226, 0.35), transparent 35%),
+    radial-gradient(circle at bottom right, rgba(64, 255, 180, 0.12), transparent 35%),
+    #0d0b14;
+}
+
+nav {
+  max-width: 1180px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  font-weight: 800;
+  font-size: 1.4rem;
+  letter-spacing: 0.04em;
+  color: #b783ff;
+}
+
+.nav-links {
+  display: flex;
+  gap: 24px;
+  color: #cfc7e8;
+}
+
+.hero-content {
+  max-width: 900px;
+  margin: 150px auto 0;
+  text-align: center;
+}
+
+.eyebrow {
+  color: #8effc1;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  font-size: 0.85rem;
+  font-weight: 700;
+}
+
+h1 {
+  font-size: clamp(2.5rem, 7vw, 5.5rem);
+  line-height: 1;
+  margin: 16px 0;
+}
+
+.subtext {
+  max-width: 760px;
+  margin: 0 auto;
+  color: #cfc7e8;
+  font-size: 1.15rem;
+}
+
+.buttons {
+  margin-top: 36px;
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.btn {
+  padding: 14px 22px;
+  border-radius: 999px;
+  font-weight: 700;
+}
+
+.primary {
+  background: #8b5cf6;
+  color: white;
+}
+
+.secondary {
+  border: 1px solid #8b5cf6;
+  color: #d9ccff;
+}
+
+.stats {
+  max-width: 1180px;
+  margin: -60px auto 80px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  padding: 0 32px;
+}
+
+.stats div {
+  background: #171321;
+  border: 1px solid #302747;
+  border-radius: 18px;
+  padding: 24px;
+  text-align: center;
+}
+
+.stats span {
+  display: block;
+  font-size: 2rem;
+  font-weight: 900;
+  color: #8effc1;
+}
+
+.stats p {
+  margin: 4px 0 0;
+  color: #cfc7e8;
+}
+
+.section {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 80px 32px;
+}
+
+.section h2 {
+  font-size: 2.4rem;
+  margin-bottom: 16px;
+}
+
+.section > p {
+  color: #cfc7e8;
+  max-width: 820px;
+}
+
+.dark {
+  max-width: none;
+  padding-left: calc((100% - 1180px) / 2 + 32px);
+  padding-right: calc((100% - 1180px) / 2 + 32px);
+  background: #120f1b;
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 18px;
+  margin-top: 32px;
+}
+
+.card {
+  background: #171321;
+  border: 1px solid #302747;
+  border-radius: 18px;
+  padding: 24px;
+}
+
+.card h3 {
+  margin-top: 0;
+  color: #b783ff;
+}
+
+.card p {
+  color: #cfc7e8;
+}
+
+footer {
+  padding: 36px;
+  text-align: center;
+  color: #8f86a8;
+  border-top: 1px solid #211a31;
+}
+
+@media (max-width: 800px) {
+  nav {
+    flex-direction: column;
+    gap: 18px;
+  }
+
+  .nav-links {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .stats,
+  .cards {
+    grid-template-columns: 1fr;
+  }
+
+  .hero-content {
+    margin-top: 100px;
+  }
+}