Spaces:
Running
Running
| /* Reset & Base */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| /* Colors - Orange/Navy Theme */ | |
| --background: #F6F6F8; | |
| --foreground: #333333; | |
| --surface: #ffffff; | |
| --muted: #E8E8E8; | |
| --muted-foreground: #86868B; | |
| --primary: #FF9D00; | |
| --primary-hover: #FFB333; | |
| --primary-soft: rgba(255, 157, 0, 0.1); | |
| --navy: #2E4787; | |
| --navy-soft: rgba(46, 71, 135, 0.1); | |
| --accent-green: #3DDE99; | |
| --accent-green-soft: rgba(61, 222, 153, 0.1); | |
| --border: #E0E0E0; | |
| --yellow: #FFC261; | |
| --yellow-soft: rgba(255, 194, 97, 0.1); | |
| /* Spacing */ | |
| --container-max: 1200px; | |
| --section-padding: 5rem 2rem; | |
| /* Shadows */ | |
| --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.05); | |
| --shadow-soft-lg: 0 4px 16px rgba(0, 0, 0, 0.08); | |
| --shadow-primary: 0 6px 20px rgba(255, 157, 0, 0.3); | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| background: var(--background); | |
| color: var(--foreground); | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| position: relative; | |
| min-height: 70vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| background: linear-gradient(to bottom, var(--background), var(--muted)); | |
| } | |
| .hero-video { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| opacity: 0.4; | |
| } | |
| .hero-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to bottom, | |
| rgba(250, 250, 250, 0.8), | |
| rgba(250, 250, 250, 0.6), | |
| rgba(250, 250, 250, 0.9)); | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 10; | |
| text-align: center; | |
| padding: 6rem 2rem; | |
| max-width: 900px; | |
| } | |
| .hero h1 { | |
| font-size: clamp(2.5rem, 8vw, 4.5rem); | |
| font-weight: 700; | |
| margin-bottom: 1.5rem; | |
| color: var(--foreground); | |
| } | |
| .hero-subtitle { | |
| font-size: clamp(1.25rem, 3vw, 1.75rem); | |
| font-weight: 500; | |
| color: var(--muted-foreground); | |
| margin-bottom: 1rem; | |
| } | |
| .hero-description { | |
| font-size: clamp(1rem, 2vw, 1.125rem); | |
| color: var(--muted-foreground); | |
| max-width: 42rem; | |
| margin: 0 auto 2.5rem; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| justify-content: center; | |
| margin-top: 2rem; | |
| } | |
| /* Container */ | |
| .container { | |
| max-width: var(--container-max); | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| /* Section */ | |
| .section { | |
| padding: var(--section-padding); | |
| } | |
| .section-muted { | |
| background: rgba(232, 232, 232, 0.3); | |
| } | |
| .section-title { | |
| font-size: clamp(1.875rem, 4vw, 2.5rem); | |
| font-weight: 600; | |
| margin-bottom: 1.5rem; | |
| color: var(--foreground); | |
| } | |
| .section-description { | |
| font-size: 1.125rem; | |
| color: var(--muted-foreground); | |
| max-width: 48rem; | |
| margin-bottom: 4rem; | |
| } | |
| /* Subsection */ | |
| .subsection { | |
| margin-bottom: 5rem; | |
| } | |
| .image-title-wrapper { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: 3rem; | |
| } | |
| .section-image { | |
| height: 5rem; | |
| width: auto; | |
| max-width: 200px; | |
| } | |
| .section-image-lg { | |
| height: 7rem; | |
| max-width: 280px; | |
| } | |
| @media (min-width: 768px) { | |
| .section-image { | |
| height: 7rem; | |
| max-width: 280px; | |
| } | |
| .section-image-lg { | |
| height: 10rem; | |
| max-width: 400px; | |
| } | |
| } | |
| /* Grid */ | |
| .grid-2 { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .grid-3 { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| @media (min-width: 768px) { | |
| .grid-2 { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .grid-3 { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| } | |
| .build-grid { | |
| max-width: 56rem; | |
| margin: 0 auto; | |
| } | |
| .pricing-grid { | |
| max-width: 80rem; | |
| margin: 0 auto; | |
| } | |
| /* Cards */ | |
| .card { | |
| background: white; | |
| border-radius: 1.5rem; | |
| padding: 2rem; | |
| box-shadow: var(--shadow-soft-lg); | |
| transition: all 0.2s ease; | |
| } | |
| .card:hover { | |
| box-shadow: var(--shadow-soft-lg); | |
| } | |
| .card-flex { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .card-title { | |
| font-size: 1.25rem; | |
| font-weight: 500; | |
| margin-bottom: 1.5rem; | |
| color: var(--foreground); | |
| } | |
| .card-text { | |
| color: var(--muted-foreground); | |
| margin-bottom: 1.5rem; | |
| flex-grow: 1; | |
| } | |
| .card-text-small { | |
| color: var(--muted-foreground); | |
| font-size: 0.875rem; | |
| margin-bottom: 1rem; | |
| } | |
| /* Badges */ | |
| .badge { | |
| display: inline-block; | |
| padding: 0.375rem 0.75rem; | |
| border-radius: 1rem; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: 1.5rem; | |
| } | |
| .badge-primary { | |
| background: var(--primary-soft); | |
| color: var(--primary); | |
| } | |
| .badge-success { | |
| background: var(--accent-green-soft); | |
| color: var(--accent-green); | |
| } | |
| .badge-muted { | |
| background: var(--yellow-soft); | |
| color: var(--yellow); | |
| } | |
| /* Buttons */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| padding: 0.75rem 1.5rem; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| border-radius: 0.5rem; | |
| text-decoration: none; | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| border: 2px solid transparent; | |
| } | |
| .btn-primary { | |
| background: transparent; | |
| color: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| .btn-primary:hover { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| color: var(--muted-foreground); | |
| border-color: var(--muted-foreground); | |
| } | |
| .btn-outline:hover { | |
| border-color: var(--primary); | |
| color: var(--primary); | |
| } | |
| .btn-full { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .icon { | |
| width: 1rem; | |
| height: 1rem; | |
| } | |
| .mb-4 { | |
| margin-bottom: 1rem; | |
| } | |
| .mt-auto { | |
| margin-top: auto; | |
| } | |
| /* Link Tertiary (like a link but bigger) */ | |
| .link-tertiary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: var(--primary); | |
| font-size: 1rem; | |
| font-weight: 500; | |
| text-decoration: none; | |
| transition: all 0.2s ease; | |
| } | |
| .link-tertiary:hover { | |
| text-decoration: underline; | |
| } | |
| .link-centered { | |
| justify-content: center; | |
| width: 100%; | |
| margin-top: auto; | |
| } | |
| /* Video Wrapper */ | |
| .video-wrapper { | |
| aspect-ratio: 16 / 9; | |
| border-radius: 1.25rem; | |
| overflow: hidden; | |
| margin-bottom: 1.5rem; | |
| box-shadow: var(--shadow-soft); | |
| } | |
| .video-wrapper iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| /* GIF Wrapper */ | |
| .gif-wrapper { | |
| aspect-ratio: 16 / 9; | |
| border-radius: 1.25rem; | |
| overflow: hidden; | |
| margin-bottom: 1.5rem; | |
| box-shadow: var(--shadow-soft); | |
| } | |
| .gif-wrapper img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| /* Dashboard Image Wrapper */ | |
| .dashboard-image-wrapper { | |
| border-radius: 1.25rem; | |
| overflow: hidden; | |
| margin-bottom: 1rem; | |
| box-shadow: var(--shadow-soft); | |
| } | |
| .dashboard-image-wrapper img { | |
| width: 100%; | |
| height: auto; | |
| } | |
| /* Placeholder */ | |
| .placeholder { | |
| aspect-ratio: 16 / 9; | |
| border-radius: 1.25rem; | |
| background: var(--muted); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| color: var(--muted-foreground); | |
| margin-bottom: 1.5rem; | |
| padding: 1rem; | |
| box-shadow: var(--shadow-soft); | |
| } | |
| /* Beta Link Text */ | |
| .beta-link-text { | |
| text-align: center; | |
| font-size: 0.875rem; | |
| color: var(--muted-foreground); | |
| margin-top: 1.5rem; | |
| } | |
| .beta-link-text a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| } | |
| .beta-link-text a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Accordion */ | |
| .accordion { | |
| width: 100%; | |
| flex-grow: 1; | |
| } | |
| .accordion-trigger { | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| padding: 0.75rem 0; | |
| list-style: none; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .accordion-trigger::-webkit-details-marker { | |
| display: none; | |
| } | |
| .accordion-trigger::after { | |
| content: '+'; | |
| font-size: 1.25rem; | |
| transition: transform 0.2s ease; | |
| } | |
| details[open] .accordion-trigger::after { | |
| content: '−'; | |
| } | |
| .accordion-content { | |
| padding: 1rem 0; | |
| font-size: 0.875rem; | |
| color: var(--muted-foreground); | |
| } | |
| .accordion-content ol { | |
| list-style-position: inside; | |
| margin-bottom: 1rem; | |
| } | |
| .accordion-content li { | |
| margin-bottom: 0.5rem; | |
| } | |
| .accordion-content code { | |
| background: var(--muted); | |
| padding: 0.125rem 0.25rem; | |
| border-radius: 0.25rem; | |
| font-size: 0.75rem; | |
| } | |
| /* QR Code */ | |
| .qr-code-wrapper { | |
| display: flex; | |
| justify-content: center; | |
| padding: 0.5rem 0; | |
| margin-bottom: 1rem; | |
| } | |
| .qr-code { | |
| width: 8rem; | |
| height: 8rem; | |
| } | |
| /* Discord CTA */ | |
| .discord-cta { | |
| margin-top: 4rem; | |
| padding: 2.5rem; | |
| background: transparent; | |
| border-radius: 1.5rem; | |
| border: 1px solid var(--border); | |
| text-align: center; | |
| } | |
| .discord-cta h3 { | |
| font-size: clamp(1.5rem, 3vw, 2rem); | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| } | |
| .discord-cta p { | |
| font-size: 1.125rem; | |
| color: var(--muted-foreground); | |
| max-width: 42rem; | |
| margin: 0 auto 2rem; | |
| } | |
| /* Pricing */ | |
| .pricing-card { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .pricing-header { | |
| margin-bottom: 2rem; | |
| } | |
| .pricing-title { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| margin-bottom: 0.75rem; | |
| } | |
| .pricing-price { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: var(--foreground); | |
| } | |
| /* Feature List */ | |
| .feature-list { | |
| list-style: none; | |
| margin-bottom: 2rem; | |
| flex-grow: 1; | |
| } | |
| .feature-list li { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 0.75rem; | |
| margin-bottom: 0.75rem; | |
| color: var(--muted-foreground); | |
| } | |
| .check-icon { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| margin-top: 0.125rem; | |
| flex-shrink: 0; | |
| stroke: var(--accent-green); | |
| } | |
| /* LINKS */ | |
| a { | |
| color: var(--primary); | |
| } | |
| /* Documentation Button */ | |
| .doc-button { | |
| position: fixed; | |
| bottom: 1.5rem; | |
| right: 1.5rem; | |
| z-index: 50; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| background: var(--primary); | |
| color: white; | |
| padding: 0.75rem 1rem; | |
| border-radius: 9999px; | |
| text-decoration: none; | |
| box-shadow: var(--shadow-soft-lg); | |
| transition: all 0.3s ease; | |
| overflow: hidden; | |
| } | |
| .doc-button:hover { | |
| box-shadow: 0 6px 20px rgba(59, 176, 209, 0.4); | |
| padding-right: 1.5rem; | |
| } | |
| .doc-icon { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| } | |
| .doc-text { | |
| max-width: 0; | |
| opacity: 0; | |
| white-space: nowrap; | |
| transition: all 0.3s ease; | |
| } | |
| .doc-button:hover .doc-text { | |
| max-width: 200px; | |
| opacity: 1; | |
| } | |
| /* Footer */ | |
| .footer { | |
| background: var(--background); | |
| border-top: 1px solid var(--border); | |
| padding: 3rem 0; | |
| } | |
| .footer-content-centered { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 0.75rem; | |
| text-align: center; | |
| } | |
| .footer-content-centered p { | |
| color: var(--muted-foreground); | |
| } | |
| .footer-content-centered a { | |
| color: var(--primary); | |
| font-weight: 500; | |
| text-decoration: none; | |
| transition: text-decoration 0.2s ease; | |
| } | |
| .footer-content-centered a:hover { | |
| text-decoration: underline; | |
| } | |
| .footer-credits { | |
| font-size: 0.875rem; | |
| } | |
| /* Smooth Scrolling */ | |
| html { | |
| scroll-behavior: smooth; | |
| } |