diff --git a/style.css b/style.css index e69de29..1c0dd6a 100644 --- a/style.css +++ b/style.css @@ -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; + } +} \ No newline at end of file