/* CreatorSpaces — shared design system Fonts: Anton (display), Inter (body/UI), Poppins (wordmark) via Google Fonts (loaded in ) */ :root { --bg: #0A0A0F; --surface: #111118; --surface-2: #16161F; --border: #242433; --border-2: #34343F; --green: #C9F500; /* brand + Creator path */ --cyan: #15D1DD; /* Brand path */ --pink: #FA1D60; /* action / CTA accent */ --live: #FF2D55; /* LIVE badge only */ --tx: #F4F4F6; --muted: #9090A8; --dim: #5A5A70; --font-display: 'Anton', sans-serif; --font-body: 'Inter', sans-serif; --font-word: 'Poppins', sans-serif; --r-sm: 10px; --r-card: 16px; --maxw: 1120px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--tx); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .section { padding: 64px 0; } .center { text-align: center; } /* Typography */ .display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .95; letter-spacing: .5px; } h1.display { font-size: clamp(40px, 9vw, 76px); } h2.display { font-size: clamp(30px, 5.5vw, 48px); } .g { color: var(--green); } .c { color: var(--cyan); } .m { color: var(--pink); } .eyebrow { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--dim); font-weight: 600; } .lead { color: var(--muted); font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; max-width: 560px; } .lead b { color: var(--tx); font-weight: 600; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 16px; letter-spacing: .5px; text-transform: uppercase; padding: 15px 26px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--pink); color: #2b0a1a; box-shadow: 0 0 26px rgba(250,29,96,.28); } .btn-primary:hover { box-shadow: 0 0 36px rgba(250,29,96,.42); } .btn-ghost { background: transparent; color: var(--tx); border-color: var(--border-2); } .btn-ghost:hover { border-color: var(--green); color: var(--green); } .btn .arw { font-size: 18px; } /* Badges */ .badge-partner { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tx); background: var(--surface); border: 1px solid var(--border); padding: 8px 14px; border-radius: 999px; } .badge-partner b { font-weight: 600; } .badge-partner .chk { color: var(--green); } .badge-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #fff; background: rgba(255,45,85,.12); border: 1px solid var(--live); padding: 7px 14px; border-radius: 999px; box-shadow: 0 0 18px rgba(255,45,85,.28); } .badge-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: pulse 1.4s infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* Nav */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(10,10,15,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; } .brand img { width: 34px; height: 39px; } .wordmark { font-family: var(--font-word); font-weight: 700; font-size: 20px; letter-spacing: -.6px; line-height: 1; } .wordmark .sub { display: block; font-family: var(--font-body); font-size: 8px; letter-spacing: 2.4px; color: var(--dim); margin-top: 3px; font-weight: 500; } .nav .btn { padding: 11px 18px; font-size: 14px; } /* Stats */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 20px 14px; text-align: center; } .stat .num { font-family: var(--font-display); font-size: clamp(26px, 4vw, 34px); color: var(--green); line-height: 1; } .stat .lab { font-size: 11px; letter-spacing: .5px; color: var(--muted); margin-top: 8px; text-transform: uppercase; } /* Cards grid */ .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 24px; } .card .ic { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; } .card h3 { font-family: var(--font-display); font-weight: 400; font-size: 21px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; } .card p { color: var(--muted); font-size: 14px; } .card.accent-green .ic, .card.accent-green h3 { color: var(--green); } .card.accent-cyan .ic, .card.accent-cyan h3 { color: var(--cyan); } .card.accent-pink .ic, .card.accent-pink h3 { color: var(--pink); } /* Path cards (fork) */ .path { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 20px; transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease; } .path:hover { transform: translateY(-2px); } .path .ic { width: 56px; height: 56px; flex: none; border-radius: 50%; border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; font-size: 26px; } .path .txt { flex: 1; } .path h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; text-transform: uppercase; } .path p { color: var(--muted); font-size: 13px; margin-top: 3px; } .path .arw { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; font-size: 20px; } .path.brand:hover { border-color: var(--cyan); box-shadow: 0 0 24px rgba(21,209,221,.16); } .path.brand .ic, .path.brand h3 .hl, .path.brand .arw { color: var(--cyan); } .path.creator:hover { border-color: var(--green); box-shadow: 0 0 24px rgba(201,245,0,.14); } .path.creator .ic, .path.creator h3 .hl, .path.creator .arw { color: var(--green); } /* Steps */ .step { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--border); } .step:first-child { border-top: none; } .step .n { font-family: var(--font-display); font-size: 20px; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--green); } .step:nth-child(2) .n { color: var(--cyan); } .step:nth-child(3) .n { color: var(--pink); } .step h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; } .step p { color: var(--muted); font-size: 15px; } /* FAQ */ .faq details { border-top: 1px solid var(--border); padding: 18px 0; } .faq details:last-child { border-bottom: 1px solid var(--border); } .faq summary { font-weight: 600; font-size: 16px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary .plus { color: var(--green); font-size: 20px; transition: transform .2s ease; } .faq details[open] summary .plus { transform: rotate(45deg); } .faq p { color: var(--muted); font-size: 15px; margin-top: 12px; max-width: 640px; } /* CTA band */ .cta-band { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 48px 28px; text-align: center; } .cta-band .lead { margin: 14px auto 26px; } /* Form */ .hidden { display: none; } .form { text-align: left; display: flex; flex-direction: column; gap: 16px; } .form .field { display: flex; flex-direction: column; gap: 6px; } .form label { font-size: 13px; font-weight: 600; color: var(--muted); } .form input, .form textarea { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 12px 14px; color: var(--tx); font-family: var(--font-body); font-size: 15px; } .form input:focus, .form textarea:focus { outline: none; border-color: var(--cyan); } .form textarea { resize: vertical; } /* Footer */ .footer { border-top: 1px solid var(--border); padding: 40px 0; } .footer-inner { display: flex; flex-direction: column; gap: 20px; } .footer .slogan { font-family: var(--font-display); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; } .footer .meta { color: var(--dim); font-size: 13px; line-height: 1.7; } .footer .meta a:hover { color: var(--green); } /* Hero live-frame decoration (desktop) */ .hero { position: relative; padding: 56px 0 40px; } .hero .eyebrow { margin-bottom: 16px; } .hero .lead { margin: 16px 0 26px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; } .hero-frame { display: none; } /* Responsive */ @media (min-width: 720px) { .section { padding: 84px 0; } .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; } } @media (min-width: 960px) { .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; } .hero-frame { display: block; position: relative; justify-self: end; width: 260px; height: 460px; border: 1px solid rgba(21,209,221,.3); border-radius: 30px; background: var(--surface); box-shadow: 0 0 50px rgba(21,209,221,.08); overflow: hidden; } .hero-frame .fmark { position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); opacity: .5; width: 120px; } .hero-frame .flive { position: absolute; top: 16px; left: 16px; font-size: 10px; font-weight: 700; color: #fff; background: var(--live); padding: 3px 8px; border-radius: 6px; letter-spacing: .5px; } .hero-frame .fview { position: absolute; top: 18px; left: 66px; font-size: 10px; color: var(--tx); } .hero-frame .frail { position: absolute; right: 14px; bottom: 20px; display: flex; flex-direction: column; gap: 18px; font-size: 20px; } .hero-frame .frail .heart { color: var(--live); } }