Spaces:
Running
Running
| /* COLOR SYSTEM */ | |
| :root { | |
| --color-primary: #3bb0d1; | |
| --color-secondary-pink: #ff6170; | |
| --color-secondary-green: #3dde99; | |
| --color-secondary-deepblue: #243b53; /* custom deep blue for text */ | |
| --color-secondary-yellow: #ffc261; | |
| --color-bg: #f8fafc; | |
| --color-bg-elevated: #ffffff; | |
| --color-border: #e2e8f0; | |
| --color-text: #1f2933; | |
| --color-text-soft: #6b7b93; | |
| --radius-lg: 18px; | |
| --shadow-soft: 0 14px 35px rgba(15, 23, 42, 0.12); | |
| } | |
| /* GLOBAL RESET */ | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: "Asap", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", | |
| sans-serif; | |
| font-size: 17px; | |
| line-height: 1.6; | |
| background: var(--color-bg); | |
| color: var(--color-text); | |
| } | |
| /* TYPOGRAPHY */ | |
| .heading-1 { | |
| font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; | |
| font-weight: 400; | |
| font-size: 50px; | |
| letter-spacing: -0.03em; | |
| margin: 0 0 0.4em; | |
| } | |
| .heading-2 { | |
| font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; | |
| font-weight: 400; | |
| font-size: 35px; | |
| letter-spacing: -0.02em; | |
| margin: 0 0 0.4em; | |
| } | |
| .heading-3 { | |
| font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; | |
| font-weight: 400; | |
| font-size: 30px; | |
| letter-spacing: -0.01em; | |
| margin: 0 0 0.4em; | |
| } | |
| .heading-4 { | |
| font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; | |
| font-weight: 400; | |
| font-size: 25px; | |
| margin: 0 0 0.4em; | |
| } | |
| .heading-5 { | |
| font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; | |
| font-weight: 400; | |
| font-size: 20px; | |
| margin: 0 0 0.4em; | |
| } | |
| .title-1 { | |
| font-family: "Asap", system-ui, sans-serif; | |
| font-size: 22px; | |
| } | |
| .title-2 { | |
| font-family: "Asap", system-ui, sans-serif; | |
| font-size: 20px; | |
| } | |
| .body { | |
| font-family: "Asap", system-ui, sans-serif; | |
| font-size: 17px; | |
| color: var(--color-text-soft); | |
| margin: 0 0 1em; | |
| } | |
| .body-bold { | |
| font-weight: 700; | |
| } | |
| .caption { | |
| font-family: "Asap", system-ui, sans-serif; | |
| font-size: 13px; | |
| color: var(--color-text-soft); | |
| } | |
| /* LAYOUT HELPERS */ | |
| .container { | |
| width: 100%; | |
| max-width: 1120px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| .section { | |
| padding: 72px 0; | |
| } | |
| .section-intro { | |
| max-width: 640px; | |
| } | |
| /* GRID */ | |
| .grid-4 { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 24px; | |
| margin-top: 32px; | |
| } | |
| .grid-2 { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 24px; | |
| margin-top: 32px; | |
| } | |
| /* HERO */ | |
| .hero { | |
| position: relative; | |
| min-height: 70vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| border-bottom-left-radius: 0px; | |
| border-bottom-right-radius: 0px; | |
| } | |
| .hero-video { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .hero-overlay { | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient( | |
| circle at top, | |
| rgba(255, 255, 255, 0.9), | |
| rgba(255, 255, 255, 0.4) | |
| ), | |
| linear-gradient(to bottom, rgba(36, 59, 83, 0.5), rgba(36, 59, 83, 0.85)); | |
| mix-blend-mode: multiply; | |
| } | |
| .hero-content { | |
| position: relative; | |
| text-align: left; | |
| color: #ffffff; | |
| padding: 80px 20px 96px; | |
| } | |
| .hero-subtitle { | |
| font-family: "Asap", system-ui, sans-serif; | |
| font-size: 20px; | |
| margin: 0 0 0.6em; | |
| color: #e5f4fb; | |
| } | |
| .hero .body { | |
| color: #e0ecf7; | |
| max-width: 620px; | |
| } | |
| .hero-actions { | |
| margin-top: 24px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| /* BUTTONS */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 11px 20px; | |
| border-radius: 999px; | |
| border: 1px solid transparent; | |
| font-family: "Asap", system-ui, sans-serif; | |
| font-size: 14px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| cursor: pointer; | |
| transition: transform 0.08s ease-out, box-shadow 0.12s ease-out, | |
| background-color 0.12s ease-out, border-color 0.12s ease-out; | |
| white-space: nowrap; | |
| } | |
| .btn-primary { | |
| background-color: var(--color-primary); | |
| color: #0b1f2a; | |
| box-shadow: 0 10px 25px rgba(59, 176, 209, 0.45); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 16px 35px rgba(59, 176, 209, 0.5); | |
| } | |
| .btn-secondary { | |
| background-color: #ffffff; | |
| border-color: var(--color-border); | |
| color: var(--color-secondary-deepblue); | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--color-primary); | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| border-color: rgba(255, 255, 255, 0.7); | |
| color: #ffffff; | |
| } | |
| .btn-ghost:hover { | |
| background: rgba(15, 23, 42, 0.18); | |
| } | |
| .full-width { | |
| width: 100%; | |
| } | |
| /* CARDS */ | |
| .card { | |
| background-color: var(--color-bg-elevated); | |
| border-radius: var(--radius-lg); | |
| padding: 24px 22px 26px; | |
| border: 1px solid var(--color-border); | |
| box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; /* aligne tout le contenu à gauche */ | |
| justify-content: flex-start; /* place tout le contenu en haut */ | |
| text-align: left; /* garantit un alignement texte à gauche */ | |
| } | |
| .card > *:last-child { | |
| margin-top: auto; /* pousse le bouton vers le bas */ | |
| } | |
| .card-pricing { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card-pricing::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| background: radial-gradient( | |
| circle at top left, | |
| rgba(59, 176, 209, 0.18), | |
| transparent 55% | |
| ), | |
| radial-gradient( | |
| circle at bottom right, | |
| rgba(255, 194, 97, 0.22), | |
| transparent 60% | |
| ); | |
| opacity: 0.8; | |
| pointer-events: none; | |
| } | |
| .card-pricing > * { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .card h3 { | |
| margin-bottom: 12px; /* espace régulier entre le titre et le texte */ | |
| } | |
| /* Discord CTA Section */ | |
| .discord-cta-section { | |
| margin-top: 4rem; | |
| text-align: center; | |
| } | |
| .discord-cta-container { | |
| background: linear-gradient(to bottom right, rgba(59, 176, 209, 0.1), rgba(61, 222, 153, 0.1)); | |
| border-radius: 0px; | |
| width: 100%; | |
| padding: 3rem; | |
| border: 1px solid var(--color-border); | |
| } | |
| .discord-cta-description { | |
| font-size: 1.125rem; | |
| margin-bottom: 2rem; | |
| color: rgba(36, 59, 83, 0.8); | |
| max-width: 42rem; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .discord-icon { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| } | |
| /* PRICING */ | |
| .pricing-header { | |
| margin-bottom: 18px; | |
| } | |
| .price { | |
| font-family: "Segoe UI", system-ui, sans-serif; | |
| font-size: 32px; | |
| font-weight: 400; | |
| color: var(--color-secondary-deepblue); | |
| margin: 8px 0 0; | |
| } | |
| .feature-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0 0 24px; | |
| font-size: 15px; | |
| color: var(--color-text-soft); | |
| } | |
| .feature-list li { | |
| position: relative; | |
| padding-left: 20px; | |
| margin-bottom: 6px; | |
| } | |
| .feature-list li::before { | |
| content: "•"; | |
| position: absolute; | |
| left: 5px; | |
| top: 0; | |
| color: var(--color-secondary-green); | |
| } | |
| /* BADGES */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 4px 10px; | |
| border-radius: 999px; | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .badge-lite { | |
| background-color: rgba(255, 194, 97, 0.16); | |
| color: #8b5a00; | |
| } | |
| .badge-wireless { | |
| background-color: rgba(61, 222, 153, 0.16); | |
| color: #03553a; | |
| } | |
| /* BUY SECTION */ | |
| .section-buy { | |
| background: radial-gradient( | |
| circle at top left, | |
| rgba(59, 176, 209, 0.08), | |
| transparent 60% | |
| ), | |
| radial-gradient( | |
| circle at bottom right, | |
| rgba(255, 97, 112, 0.06), | |
| transparent 60% | |
| ); | |
| } | |
| /* FOOTER */ | |
| .footer { | |
| padding: 32px 0 40px; | |
| border-top: 1px solid var(--color-border); | |
| background-color: #ffffff; | |
| } | |
| .footer-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .footer a { | |
| color: var(--color-primary); | |
| text-decoration: none; | |
| } | |
| .footer a:hover { | |
| text-decoration: underline; | |
| } | |
| /* LINKS */ | |
| a { | |
| color: var(--color-primary); | |
| } | |
| /* RESPONSIVE */ | |
| @media (max-width: 1024px) { | |
| .grid-4 { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .hero { | |
| border-radius: 0 0 24px 24px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .heading-1 { | |
| font-size: 38px; | |
| } | |
| .heading-2 { | |
| font-size: 32px; | |
| } | |
| .grid-4, | |
| .grid-2 { | |
| grid-template-columns: 1fr; | |
| } | |
| .hero { | |
| min-height: 70vh; | |
| } | |
| .hero-content { | |
| padding-top: 64px; | |
| padding-bottom: 72px; | |
| } | |
| .hero-actions { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| } | |