:root { --bg: #050505; --text: #e9f0ea; --muted: #EFF1F3; --accent: #1EFF00; /* unified brand green */ --accent-2: #1EFF00; --purple: var(--accent); --glow-x: 50; /* centered */ --glow-y: 58; /* slightly below center */ } /* ========================================== Light Theme (white) overrides Apply by setting data-theme="light" on ========================================== */ [data-theme="light"] { --bg: #EFF1F3; --text: #0f1720; --muted: #475569; --accent: #18B800; /* brand green */ --accent-2: #18B800; --purple: var(--accent); } [data-theme="light"] body::after { background: none; } [data-theme="light"] .hero::before { background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 60%), radial-gradient(120vmax 70vmax at var(--gx, 0%) var(--gy1, 42%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%), radial-gradient(100vmax 60vmax at calc(var(--gx, 0%) + 38%) var(--gy2, 58%), color-mix(in srgb, var(--accent) 8%, transparent), transparent 62%); } [data-theme="light"] .hero::after { background: radial-gradient(46vmax 34vmax at var(--b1x, 18%) var(--b1y, 48%), color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%), radial-gradient(40vmax 30vmax at var(--b2x, 56%) var(--b2y, 62%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 64%), radial-gradient(52vmax 40vmax at var(--b3x, 84%) var(--b3y, 46%), color-mix(in srgb, var(--accent) 10%, transparent), transparent 66%); filter: blur(24px) saturate(140%); opacity: .85; } [data-theme="light"] .btn { border-color: rgba(0, 0, 0, .12) } [data-theme="light"] .btn.ghost:hover { border-color: rgba(0, 0, 0, .22) } [data-theme="light"] .btn.solid { color: #052e13 } [data-theme="light"] .and-more-word.and { color: #111827 } [data-theme="light"] .ua { background: none } [data-theme="light"] .ua-col.bad h3 { color: #1f2937 } [data-theme="light"] .ua-step.bad { background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .02)); color: #374151; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 0, 0, .08) } [data-theme="light"] .ua-step.good { background: linear-gradient(180deg, rgba(24, 184, 0, .25), rgba(24, 184, 0, .15)); color: #052e13; box-shadow: inset 0 0 0 2px rgba(24, 184, 0, .45), 0 10px 22px rgba(24, 184, 0, .18) } [data-theme="light"] .ua-col.good::before { background: radial-gradient(circle at 50% 8%, rgba(24, 184, 0, .28), rgba(24, 184, 0, .14) 34%, rgba(255, 255, 255, 0) 66%) } [data-theme="light"] .billing-toggle { background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .02)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12) } [data-theme="light"] .toggle { background: rgba(0, 0, 0, .06); border: 1px solid rgba(0, 0, 0, .14) } [data-theme="light"] .toggle .knob { background: radial-gradient(circle at 30% 30%, #ffffff, #18B800 68%); box-shadow: 0 0 0 2px rgba(24, 184, 0, .35), 0 0 14px rgba(24, 184, 0, .25) } [data-theme="light"] .price-card { background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .02)); border: 1px solid rgba(0, 0, 0, .12); box-shadow: 0 8px 18px rgba(0, 0, 0, .08) } [data-theme="light"] .price .currency { color: #065f46 } [data-theme="light"] .price.custom .value { color: #0f1720 } [data-theme="light"] .cta.outline-purple { color: #052e13; border-color: rgba(24, 184, 0, .35) } [data-theme="light"] .cta.outline-purple:hover { box-shadow: 0 0 0 2px rgba(24, 184, 0, .35), 0 0 18px rgba(24, 184, 0, .18) } [data-theme="light"] .cta.solid-green { color: #052e13 } [data-theme="light"] .price-card.featured { background: linear-gradient(180deg, rgba(24, 184, 0, .25), rgba(24, 184, 0, .15)); border: 1px solid rgba(24, 184, 0, .45); box-shadow: inset 0 0 0 1px rgba(24, 184, 0, .28), 0 14px 28px rgba(24, 184, 0, .18) } [data-theme="light"] .contact { background: none } [data-theme="light"] .contact::before { background: none; filter: none } [data-theme="light"] .ua-left::before { background: none; filter: none } [data-theme="light"] .ua-col.good::before { background: none; filter: none } [data-theme="light"] .ua-col.bad::before { background: none; filter: none } [data-theme="light"] .contact-headline { color: #0f1720 } [data-theme="light"] .contact::before { background: radial-gradient(circle 44vmax at 94% 72%, rgba(24, 184, 0, .18), rgba(255, 255, 255, 0) 60%) } [data-theme="light"] .contact-points li { color: #374151 } [data-theme="light"] .contact-card { background: linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .02)); border: 1px solid rgba(0, 0, 0, .12); box-shadow: 0 10px 22px rgba(0, 0, 0, .1) } [data-theme="light"] .form-row input, [data-theme="light"] .form-row textarea { background: rgba(0, 0, 0, .02); border-color: rgba(0, 0, 0, .12) } [data-theme="light"] .form-row input:focus, [data-theme="light"] .form-row textarea:focus { border-color: rgba(24, 184, 0, .45); box-shadow: 0 0 0 2px rgba(24, 184, 0, .35), 0 0 18px rgba(24, 184, 0, .2); background: rgba(0, 0, 0, .02) } [data-theme="light"] .footer-logo { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .2)) } [data-theme="light"] .company-info { color: #4b5563 } [data-theme="light"] .footer-nav a { color: #1f2937 } [data-theme="light"] .footer-nav a:hover { color: #111827; text-shadow: 0 0 10px rgba(24, 184, 0, .18) } [data-theme="light"] .social-icon { background: #ffffff; border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 4px 12px rgba(0, 0, 0, .08) } [data-theme="light"] .social-icon img { filter: none } [data-theme="light"] .social-icon:hover { background: linear-gradient(180deg, rgba(24, 184, 0, .18), rgba(24, 184, 0, .12)); box-shadow: 0 0 0 2px rgba(24, 184, 0, .35), 0 0 18px rgba(24, 184, 0, .18) } [data-theme="light"] .footer-legal a { color: #1f2937 } [data-theme="light"] .footer-legal a:hover { color: #111827; text-shadow: 0 0 10px rgba(24, 184, 0, .18) } [data-theme="light"] .footer-legal .sep { color: #9ca3af } [data-theme="light"] .legal-title { color: #0f1720 } [data-theme="light"] .legal h3 { color: #1f2937 } [data-theme="light"] .legal p, [data-theme="light"] .legal li { color: #374151 } * { box-sizing: border-box } html, body { height: 100% } body { margin: 0; font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color: var(--text); background: var(--bg); overflow-x: hidden; } /* Moving green glow only behind the hero section */ .hero::before { content: ""; pointer-events: none; } .hero::after { content: ""; pointer-events: none; } @keyframes heroWave { 0% { --gx: 0%; --gy1: 38%; --gy2: 62%; } 100% { --gx: 100%; --gy1: 46%; --gy2: 54%; } } @keyframes lavaMove { 0% { --b1x: 16%; --b1y: 50%; --b2x: 58%; --b2y: 60%; --b3x: 86%; --b3y: 44%; } 50% { --b1x: 24%; --b1y: 54%; --b2x: 52%; --b2y: 66%; --b3x: 78%; --b3y: 50%; } 100% { --b1x: 30%; --b1y: 46%; --b2x: 44%; --b2y: 58%; --b3x: 70%; --b3y: 54%; } } /* removed vignette to keep circle-only glow */ /* Subtle vignette */ body::after { content: ""; position: fixed; inset: 0; z-index: 0; background: radial-gradient(circle at 60% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .35) 100%); pointer-events: none; } .site-header { position: relative; z-index: 1; } .nav { max-width: 1280px; margin: 0 auto; padding: 20px clamp(16px, 3vw, 32px); display: flex; align-items: center; gap: 24px; justify-content: space-between; } .brand { display: flex; align-items: center } .brand .logo { height: clamp(28px, 5.2vw, 44px); width: auto; display: block } .menu { display: flex; gap: 22px; align-items: center } .menu a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14px } .menu a:hover { color: var(--text) } .actions { display: flex; gap: 10px } .btn { font-family: inherit; font-size: 14px; padding: 8px 14px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: var(--text) } .btn.solid { background: linear-gradient(180deg, var(--accent), var(--accent-2)); border: none; color: #0b2b10; font-weight: 700 } .btn.ghost:hover { border-color: rgba(255, 255, 255, .35) } .hero { position: relative; isolation: isolate; max-width: 1440px; margin: 0 auto 120px; padding: clamp(48px, 10vh, 120px) clamp(16px, 3vw, 32px) 0; min-height: 72vh; display: grid; align-items: start; grid-template-columns: 1fr; justify-items: start; } .hero-copy { z-index: 2; margin-top: 0; padding-left: 0; max-width: min(900px, 100%); justify-self: start; text-align: left; } .hero h1 { font-family: "Bebas Neue", sans-serif; font-size: clamp(48px, 7.4vw, 116px); line-height: .93; margin: 0 0 16px; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0, 0, 0, .06), 0 10px 22px rgba(0, 0, 0, .28); } [data-theme="light"] .hero h1 { text-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 8px 18px rgba(0, 0, 0, .18) } .hero .accent { color: var(--accent) } .hero .accent-purple { color: var(--purple) } .subhead { color: var(--muted); font-size: clamp(14px, 1.5vw, 20px); margin: 10px 0 0 } /* Hero waitlist card (glass) */ .waitlist-wrap { margin: 24px auto 0; max-width: 680px; padding: 22px 20px; border-radius: 20px; position: relative; left: auto; transform: none; top: auto; z-index: 3; justify-self: center; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .08)); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 22px 60px rgba(0, 0, 0, .55); backdrop-filter: blur(12px) saturate(150%); } .waitlist-wrap::before { content: ""; position: absolute; inset: -10px; border-radius: 24px; pointer-events: none; background: radial-gradient(60% 60% at var(--glow-x, 50%) var(--glow-y, 58%), rgba(255, 255, 255, .22), rgba(0, 0, 0, 0) 70%); filter: blur(18px); opacity: .9 } .waitlist-title { font-family: "Bebas Neue", sans-serif; letter-spacing: 1px; margin: 0 0 6px; font-size: clamp(26px, 4.4vw, 40px); text-align: center } .waitlist-sub { color: var(--muted); margin: 0 0 14px; text-align: center; font-size: clamp(13px, 1.4vw, 16px) } [data-theme="light"] .waitlist-sub { color: #0f1720 } .waitlist-wrap .waitlist-card { margin-left: auto; margin-right: auto; } .waitlist-card { margin: 18px auto 0; display: flex; gap: 12px; align-items: center; width: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 8px; box-shadow: 0 12px 26px rgba(0, 0, 0, .35); position: relative; } .waitlist-card::before { content: ""; position: absolute; inset: -6px; border-radius: 20px; pointer-events: none; background: radial-gradient(60% 60% at var(--glow-x, 50%) var(--glow-y, 58%), rgba(30, 255, 0, .25), rgba(0, 0, 0, 0) 70%); filter: blur(16px); opacity: .85; } .waitlist-card input { flex: 1 1 auto; min-width: 0; color: var(--text); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; height: 56px; padding: 0 24px; font-size: 18px; outline: none; transition: box-shadow .2s ease, border-color .2s ease, background .2s ease; } .waitlist-card input::placeholder { color: #c7cfc9 } .waitlist-card input:focus { border-color: rgba(30, 255, 0, .55); box-shadow: 0 0 0 2px rgba(30, 255, 0, .5), 0 0 22px rgba(30, 255, 0, .28); background: rgba(255, 255, 255, .08) } .waitlist-card .cta { flex: 0 0 auto; width: auto; white-space: nowrap; border-radius: 999px; height: 56px; padding: 0 22px; font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #D9FF66, #C7F955); color: #0b2b10; border: none; } .waitlist-card .cta:hover { filter: saturate(115%) } @media (max-width: 520px) { .waitlist-card { flex-direction: column; align-items: stretch } .waitlist-card .cta { width: 100% } } /* Tighter, cleaner mobile layout for the waitlist module */ @media (max-width: 540px) { .waitlist-wrap { padding: 16px 14px; border-radius: 16px; margin: 18px 0 0; box-shadow: 0 12px 30px rgba(0, 0, 0, .4) } .waitlist-wrap::before { opacity: .55; filter: blur(12px) } .waitlist-title { margin-bottom: 4px } .waitlist-sub { margin: 0 0 10px; line-height: 1.45 } .waitlist-card { gap: 8px; padding: 6px; border-radius: 14px; box-shadow: 0 10px 22px rgba(0, 0, 0, .35) } .waitlist-card::before { opacity: .6; filter: blur(12px) } .waitlist-card input { height: 48px; padding: 0 16px; font-size: 16px } .waitlist-card .cta { height: 48px; font-size: 16px; padding: 0 18px } } @media (max-width: 360px) { .waitlist-card input, .waitlist-card .cta { height: 44px } } @media (max-width: 980px) { .waitlist-wrap { position: static; left: auto; transform: none; top: auto; margin: 26px 0 0 } } [data-theme="light"] .waitlist-card { background: linear-gradient(180deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, .42)); border: 1px solid rgba(0, 0, 0, .10); box-shadow: 0 12px 24px rgba(0, 0, 0, .12); } [data-theme="light"] .waitlist-card::before { background: radial-gradient(60% 60% at var(--glow-x, 50%) var(--glow-y, 58%), rgba(24, 184, 0, .22), rgba(0, 0, 0, 0) 70%) } [data-theme="light"] .waitlist-card input { background: rgba(0, 0, 0, .02); border-color: rgba(0, 0, 0, .12); color: #0f1720 } [data-theme="light"] .waitlist-card input:focus { border-color: rgba(24, 184, 0, .45); box-shadow: 0 0 0 2px rgba(24, 184, 0, .35), 0 0 18px rgba(24, 184, 0, .2) } [data-theme="light"] .waitlist-wrap { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .38)); border: 1px solid rgba(0, 0, 0, .10); box-shadow: 0 18px 36px rgba(0, 0, 0, .14); backdrop-filter: blur(18px) saturate(160%) } [data-theme="light"] .waitlist-wrap::before { background: radial-gradient(60% 60% at var(--glow-x, 50%) var(--glow-y, 58%), rgba(255, 255, 255, .16), rgba(0, 0, 0, 0) 70%); opacity: .9; filter: blur(16px) } [data-theme="light"] .waitlist-card .cta { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #052e13; box-shadow: 0 8px 18px rgba(24, 184, 0, .24) } [data-theme="light"] .waitlist-card input::placeholder { color: #6b7280 } .hero-hashtag { position: absolute; right: -4vw; bottom: -6vh; width: min(44vw, 720px); height: auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .6)); will-change: transform; } .icons { position: absolute; inset: 0; z-index: 1; pointer-events: none } .icon { position: absolute; width: clamp(64px, 8vw, 132px); height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); will-change: transform; pointer-events: auto } /* Composition closer to reference */ .icon.tiktok { left: 29%; top: 65%; --base-rot: -18deg } .icon.youtube { left: 15%; top: 80%; --base-rot: 8deg } .icon.instagram { left: 37%; top: 81%; --base-rot: 10deg } .icon.facebook { left: 21%; top: 60%; --base-rot: -6deg } .icon.x { left: 41%; top: 52%; --base-rot: 14deg } .icon.pinterest { left: 47%; top: 66%; --base-rot: -8deg } .icon.linkedin { left: 53%; top: 73%; --base-rot: 6deg } .icon.tumblr { left: 54%; top: 45%; --base-rot: -6deg } /* Different icon sizes (larger) */ .icon.tiktok { width: clamp(86px, 9vw, 140px) } .icon.instagram { width: clamp(78px, 8.4vw, 130px) } .icon.youtube { width: clamp(74px, 8vw, 124px) } .icon.facebook { width: clamp(70px, 7.4vw, 118px) } .icon.x { width: clamp(66px, 7vw, 114px) } .icon.pinterest { width: clamp(68px, 7.2vw, 116px) } .icon.linkedin { width: clamp(62px, 6.8vw, 110px) } .icon.tumblr { width: clamp(58px, 6.2vw, 104px) } /* Responsive */ @media (max-width: 980px) { .hero { grid-template-columns: 1fr; min-height: 70vh } .hero-hashtag { position: relative; right: auto; bottom: auto; margin-top: 30px; justify-self: end; width: min(68vw, 620px) } .icons { position: absolute } } @media (max-width: 640px) { .menu { display: none } .actions .ghost { display: none } .hero { margin-top: 10px } } /* Transforms handled in JS; keep filter transitions only */ .parallax { transition: filter .18s ease } /* Hover reaction */ .icon:hover { filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .55)) saturate(120%) } .hero-hashtag:hover { transform: translate3d(0, -4px, 0) scale(1.06) rotateZ(.6deg); filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .55)) saturate(120%); } /* Features section */ .features { position: relative; z-index: 1; margin: 0 auto; padding: 50px clamp(16px, 3vw, 32px) 100px } .features-inner { max-width: 1320px; margin: 0 auto } .features h2 { font-family: "Bebas Neue", sans-serif; font-size: clamp(32px, 5.4vw, 66px); letter-spacing: 1px; margin: 0 0 34px; text-align: center; opacity: 0; transform: translateY(18px); transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease } .features h2 .accent { color: var(--accent) } .features h2.is-visible { opacity: 1; transform: translateY(0) } .feature-grid { display: grid; grid-template-columns: repeat(2, minmax(440px, 1fr)); gap: 4px 28px; align-items: start } .feature-card { position: relative; background: transparent; border: none; border-radius: 0; padding: 12px 6px; box-shadow: none; transform: translateY(28px) scale(.98); opacity: 0; transition: transform .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0s), opacity .7s ease var(--reveal-delay, 0s) } .feature-card.is-visible { transform: translateY(0) scale(1); opacity: 1 } .feature-icon-wrap { width: 100%; max-width: 420px; margin: 6px auto 12px; position: relative; background: linear-gradient(180deg, rgba(30, 255, 0, .28), rgba(30, 255, 0, .18)); border: 1px solid rgba(30, 255, 0, .55); border-radius: 22px; padding: 16px; box-shadow: inset 0 0 0 1px rgba(30, 255, 0, .35), 0 14px 34px rgba(30, 255, 0, .35); display: flex; align-items: center; justify-content: center; min-height: 220px } .feature-icon-wrap::before { content: ""; position: absolute; inset: -6px; border-radius: 24px; pointer-events: none; background: radial-gradient(60% 60% at 50% 0%, rgba(30, 255, 0, .35), rgba(0, 0, 0, 0) 70%); filter: blur(16px); opacity: .85 } .feature-card.purple .feature-icon-wrap { border-color: rgba(30, 255, 0, .55) } .feature-icon-wrap:hover { transform: translateY(-2px); transition: transform .18s ease } .feature-icon { width: clamp(192px, 20vw, 360px); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); border-radius: 22px } @media (prefers-reduced-motion: no-preference) { .feature-icon-wrap:hover { filter: saturate(115%) } } [data-theme="light"] .feature-icon-wrap { background: linear-gradient(180deg, rgba(24, 184, 0, .25), rgba(24, 184, 0, .15)); border-color: rgba(24, 184, 0, .45); box-shadow: inset 0 0 0 1px rgba(24, 184, 0, .28), 0 10px 22px rgba(24, 184, 0, .18) } [data-theme="light"] .feature-icon-wrap::before { opacity: .9 } .feature-card h3 { color: var(--accent); font-family: "Bebas Neue", sans-serif; font-size: clamp(28px, 3.8vw, 48px); letter-spacing: .5px; margin: 0 0 6px; text-align: center } .feature-sub { color: var(--muted); font-size: clamp(13px, 1.2vw, 16px); text-align: center; margin: 0 auto 24px; max-width: 400px } .feature-list { list-style: none; padding: 0; margin: 10px auto 0; display: grid; gap: 14px; max-width: 420px } .feature-list li { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; align-items: start } .feature-list li::before { content: "✦"; color: var(--accent); font-size: 18px; line-height: 1; margin-top: 0; grid-column: 1; grid-row: 1; align-self: center; transform: translate(2px, -6px) } .feature-list li.task-create::before { content: ""; width: 34px; height: 34px; background: url('Images/taskcreateicon.png') center/contain no-repeat; filter: none; grid-row: 1; align-self: center; transform: translate(0px, -7px) } .feature-list li.icon-calendar::before { content: ""; width: 34px; height: 34px; background: url('Images/calendaricon.png') center/contain no-repeat; grid-row: 1; align-self: center; transform: translate(0px, -7px) } .feature-list li.icon-content-creation::before { content: ""; width: 34px; height: 34px; background: url('Images/contentcreationicon.png') center/contain no-repeat; grid-row: 1; align-self: center; transform: translate(0px, -7px) } .feature-list li.icon-multi::before { content: ""; width: 34px; height: 34px; background: url('Images/multiaccounting icon.png') center/contain no-repeat; grid-row: 1; align-self: center; transform: translate(0px, -7px) } .feature-list li.icon-proxy::before { content: ""; width: 34px; height: 34px; background: url('Images/proxyicon.png') center/contain no-repeat; grid-row: 1; align-self: center; transform: translate(0px, -7px) } .feature-list li.icon-ai-content::before { content: ""; width: 34px; height: 34px; background: url('Images/aicontent creation.png') center/contain no-repeat; grid-row: 1; align-self: center; transform: translate(0px, -7px) } .feature-list li.icon-ai-assistant::before { content: ""; width: 34px; height: 34px; background: url('Images/airibiticon.png') center/contain no-repeat; grid-row: 1; align-self: center; transform: translate(0px, -7px) } .feature-list li.icon-adv-analytics::before { content: ""; width: 34px; height: 34px; background: url('Images/advancedanalyticsicon.png') center/contain no-repeat; grid-row: 1; align-self: center; transform: translate(0px, -7px) } .feature-list li.icon-trends::before { content: ""; width: 34px; height: 34px; background: url('Images/hopontrendsicon.png') center/contain no-repeat; grid-row: 1; align-self: center; transform: translate(0px, -7px) } .feature-list p { color: var(--muted); font-size: clamp(13px, 1.3vw, 16px); line-height: 1.55; margin: 2px 0 0; max-width: 420px; grid-column: 2 } .feature-callout { color: var(--text); font-weight: 800; font-size: clamp(16px, 1.6vw, 20px); grid-column: 2 } /* Purple variant for AI and Measure sections */ .feature-card.purple h3 { color: var(--purple) } .feature-card.purple .feature-callout { color: var(--text) } .feature-card.purple .feature-list li::before { color: var(--accent) } /* If purple image assets are not present, tint existing icons to purple */ .feature-card.purple .feature-icon { filter: none } /* Checkerboard diagonal layout: alternate high/low by column with progressive drop */ .feature-card:nth-child(1) { margin-top: 0; left: 0 } .feature-card:nth-child(2) { margin-top: 0; left: 0 } .feature-card:nth-child(3) { margin-top: 0; left: 0 } .feature-card:nth-child(4) { margin-top: 0; left: 0 } @media (max-width: 1080px) { .feature-grid { grid-template-columns: repeat(2, minmax(420px, 1fr)); gap: 40px 80px } } @media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; justify-items: center; gap: 16px 0 } .features { padding-bottom: 80px } .feature-card { left: 0; margin-top: 0; width: 100%; max-width: 520px } .feature-list, .feature-list p { max-width: 100% } } /* AND / MORE section */ .and-more { position: relative; z-index: 1; padding: 120px 16px 160px; overflow: hidden } .and-more::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: none; filter: none; } .and-more-inner { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 54px } .and-more-word { font-family: "Bebas Neue", sans-serif; line-height: .86; letter-spacing: 3px; text-align: center; opacity: 0; transform: translateY(24px); transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease } .and-more-word.and { color: #f4f7f4; font-size: clamp(54px, 8vw, 140px); transform: translateY(24px) translateZ(0) } .and-more-word.more { color: var(--accent); font-size: clamp(80px, 10vw, 180px); margin-top: -44px } .and-more-word.is-visible { opacity: 1; transform: translateY(0) } /* Unfair Advantages layout */ .ua { position: relative; z-index: 2; padding: 40px clamp(16px, 3vw, 32px) 220px; --ua-card-width: 520px; --ua-card-height: 128px; --ua-connector-h: 44px; background: linear-gradient(180deg, rgba(0, 0, 0, .0) 0%, rgba(0, 0, 0, .35) 100%) } .ua-inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px } .ua-left { position: relative; z-index: 0; opacity: 0; transform: translateY(18px); transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease; overflow: visible } .ua-left::before { content: ""; position: absolute; left: -10%; top: -16%; width: min(70vmin, 720px); height: min(70vmin, 720px); pointer-events: none; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 36% 30%, rgba(30, 255, 0, .42) 0%, rgba(30, 255, 0, .18) 36%, rgba(0, 0, 0, 0) 66%); filter: blur(26px) saturate(130%); } .ua-right { opacity: 0; transform: translateY(24px); transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease; margin-top: 120px } .ua-left.is-visible, .ua-right.is-visible { opacity: 1; transform: translateY(0) } .ua h2 { font-family: "Bebas Neue", sans-serif; font-size: clamp(34px, 5.4vw, 66px); margin: 0 0 14px } .ua-unfair { color: var(--accent) } .ua p { color: var(--muted); font-size: clamp(14px, 1.4vw, 18px); line-height: 1.55; max-width: 560px } .ua-mark { background: rgba(30, 255, 0, .24); color: #ffffff; padding: .12em .5em; border-radius: 8px; box-shadow: 0 0 0 1px rgba(30, 255, 0, .35) inset, 0 0 14px rgba(30, 255, 0, .18) } [data-theme="light"] .ua-mark { background: rgba(24, 184, 0, .16); color: #0b2b10; box-shadow: 0 0 0 1px rgba(24, 184, 0, .28) inset, 0 0 12px rgba(24, 184, 0, .12) } .ua-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 44px } .ua-col { display: flex; flex-direction: column; align-items: center } .ua-col h3 { font-family: "Bebas Neue", sans-serif; margin: 0 0 18px; font-size: clamp(26px, 3.2vw, 40px); text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px } .emoji-img { width: 1.3em; height: 1.3em; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)) } .ua-col.bad h3 { color: #e9f0ea } .ua-col.good h3 { color: var(--accent) } .ua-step { position: relative; width: min(var(--ua-card-width), 100%); padding: 26px 28px; border-radius: 22px; font-size: 16px; line-height: 1.5; min-height: var(--ua-card-height); display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: 0 12px 24px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(16px); transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .6s ease } .ua-step.bad { background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04)); color: #d6dbd7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 12px 24px rgba(0, 0, 0, .35) } .ua-step.good { background: linear-gradient(180deg, rgba(30, 255, 0, .28), rgba(30, 255, 0, .18)); color: #f1f6f2; box-shadow: inset 0 0 0 2px rgba(30, 255, 0, .55), 0 12px 26px rgba(30, 255, 0, .35) } .ua-col.good .ua-step { text-align: center; font-weight: 600 } .ua-step.is-visible { opacity: 1; transform: translateY(0) } /* Connectors between steps */ .ua-connector { height: 24px; width: 3px; margin: 0 auto; border-radius: 2px; background: rgba(255, 255, 255, .18); opacity: .9; transform-origin: top; transform: scaleY(0); transition: transform .5s ease } .ua-connector.good { background: linear-gradient(180deg, rgba(30, 255, 0, 1), rgba(30, 255, 0, .25)) } .ua-connector.bad { background: rgba(255, 255, 255, .22) } .ua-connector.is-visible { transform: scaleY(1) } /* Green glow column background */ .ua-col.good { position: relative; overflow: visible } .ua-col.good::before { content: ""; position: absolute; left: -36px; right: -36px; top: -14px; height: min(64vmin, 520px); z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(circle at 50% 8%, rgba(30, 255, 0, .62), rgba(30, 255, 0, .28) 34%, rgba(0, 0, 0, 0) 66%); filter: blur(22px) saturate(130%); opacity: .95; } /* Subtle shadow behind WITHOUT US column */ .ua-col.bad { position: relative; overflow: visible } .ua-col.bad::before { content: ""; position: absolute; left: -28px; right: -28px; top: -10px; height: min(56vmin, 460px); z-index: -1; pointer-events: none; border-radius: 50%/40%; background: radial-gradient(circle at 50% 10%, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 60%); filter: blur(18px); opacity: .8; } /* Emoji rendering like iOS */ .ua-col h3 .emoji { display: inline-block; transform: translateY(2px); font-size: 1.05em; -webkit-font-smoothing: antialiased } @media (max-width: 980px) { .ua-inner { grid-template-columns: 1fr; gap: 34px } .ua-columns { grid-template-columns: 1fr; gap: 22px } .ua-right { margin-top: 24px } } /* Pricing */ .pricing { position: relative; z-index: 3; padding: 20px clamp(16px, 3vw, 32px) 120px; opacity: 0; transform: translateY(24px); transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease } .pricing.sticky { position: sticky; top: 0; } .pricing.is-sticky { opacity: 1; transform: translateY(0) } .pricing-inner { max-width: 1440px; margin: 0 auto } .pricing-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 34px; opacity: 0; transform: translateY(18px); transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease } .pricing-head.is-visible { opacity: 1; transform: translateY(0) } .pricing h2 { font-family: "Bebas Neue", sans-serif; font-size: clamp(32px, 5.2vw, 60px); margin: 0; color: var(--accent) } .billing-toggle { display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03)); padding: 8px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) } .billing-label { color: var(--muted); font-size: 14px } .discount-badge { color: var(--accent); font-weight: 800; font-size: 12px; padding: 2px 6px; border-radius: 8px; background: rgba(30, 255, 0, .12); box-shadow: inset 0 0 0 1px rgba(30, 255, 0, .35) } .toggle { position: relative; width: 60px; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); cursor: pointer; outline: none } .toggle .knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff, #c5ffc7 68%); box-shadow: 0 0 0 2px rgba(30, 255, 0, .45), 0 0 18px rgba(30, 255, 0, .35); transition: left .25s ease } .toggle[aria-checked="true"] .knob { left: 31px } .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 24px } .price-card { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; padding: 24px; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); --lift-y: 0px; --reveal-offset: 24px; transform: translateY(calc(var(--lift-y) + var(--reveal-offset))); opacity: 0; transition: transform .6s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0s), opacity .6s ease var(--reveal-delay, 0s) } .price-card.is-visible { --reveal-offset: 0px; opacity: 1 } .price-card .price-head .plan { font-family: "Bebas Neue", sans-serif; font-size: clamp(26px, 3.2vw, 40px); margin: 0 } .price-card .price-head .tag { color: var(--muted); margin: 6px 0 0; font-size: 14px } .price { display: flex; align-items: flex-end; gap: 6px; margin: 18px 0 12px } .price .currency { color: #cfe4d2 } .price .value { font-family: "Bebas Neue", sans-serif; font-size: clamp(42px, 6vw, 72px); line-height: .9; color: var(--accent) } .price .period { color: var(--muted); margin-bottom: 6px } .price.custom .value { color: #f2f5f3 } .benefits { list-style: none; padding: 0; margin: 14px 0 20px; display: grid; gap: 10px } .benefits li { color: var(--text); opacity: .9 } .cta-wrap { margin-top: auto } .cta { width: 100%; display: inline-block; text-align: center; text-decoration: none; font-family: inherit; font-weight: 800; letter-spacing: .2px; padding: 12px 16px; border-radius: 14px; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; border: 1px solid transparent } .cta:active { transform: translateY(1px) } .cta.outline-purple { background: transparent; color: #d1fae5; border-color: rgba(30, 255, 0, .45) } .cta.outline-purple:hover { box-shadow: 0 0 0 2px rgba(30, 255, 0, .55), 0 0 22px rgba(30, 255, 0, .28) } .cta.solid-green { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #062b11; border: none } .cta.solid-green.glow { box-shadow: 0 0 0 2px rgba(30, 255, 0, .65), 0 0 34px rgba(30, 255, 0, .45) } .cta.solid-green:hover { filter: saturate(120%); box-shadow: 0 0 0 2px rgba(30, 255, 0, .75), 0 0 44px rgba(30, 255, 0, .55) } /* Featured Advanced card */ .price-card.featured { background: linear-gradient(180deg, rgba(30, 255, 0, .28), rgba(30, 255, 0, .18)); border: 1px solid rgba(30, 255, 0, .55); box-shadow: inset 0 0 0 1px rgba(30, 255, 0, .35), 0 18px 38px rgba(30, 255, 0, .35); --lift-y: -10px } .price-card.featured .price .value { color: var(--accent) } .price-card .featured-glow { position: absolute; inset: -6px; pointer-events: none; border-radius: 24px; background: radial-gradient(60% 60% at 50% 0%, rgba(30, 255, 0, .35), rgba(0, 0, 0, 0) 70%); filter: blur(16px); opacity: .85 } /* Interactions */ .price-card { transition: transform .2s ease, box-shadow .2s ease } .price-card:hover { transform: translateY(-4px) } .price-card.featured:hover { box-shadow: inset 0 0 0 1px rgba(30, 255, 0, .45), 0 24px 56px rgba(30, 255, 0, .45); --lift-y: -14px } /* Staggered reveal delays */ .pricing-grid .price-card:nth-child(1) { --reveal-delay: .0s } .pricing-grid .price-card:nth-child(2) { --reveal-delay: .08s } .pricing-grid .price-card:nth-child(3) { --reveal-delay: .16s } @media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; gap: 16px } .pricing-head { flex-direction: column; align-items: flex-start } .price-card.featured { --lift-y: 0px } .price-card.featured:hover { --lift-y: -4px } } /* Contact */ .contact { position: relative; z-index: 2; padding: 60px clamp(16px, 3vw, 32px) 140px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 100%) } .contact-head { max-width: 1280px; margin: 0 auto 14px; display: flex; flex-direction: column; align-items: center; justify-content: center } .contact-head[data-animate] { opacity: 0; transform: translateY(18px); transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease } .contact-head.is-visible { opacity: 1; transform: translateY(0) } .contact-headline { font-family: "Bebas Neue", sans-serif; font-size: clamp(28px, 4.8vw, 54px); letter-spacing: 2px; color: #fff; text-align: center; margin: 0 } .contact-subheadline { display: none } .contact-green { color: var(--accent) } /* Global purple accent utility */ .accent-purple { color: var(--accent) } .contact::before { content: ""; position: absolute; inset: -10vmax; z-index: -1; pointer-events: none; background: radial-gradient(circle 38vmax at 94% 72%, rgba(30, 255, 0, .22), rgba(0, 0, 0, 0) 58%); filter: blur(18px) saturate(130%) } .contact-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center } .contact-left { justify-self: center; opacity: 0; transform: translateY(18px); transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease } .contact-right { opacity: 0; transform: translateY(22px); transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s ease } .contact-left.is-visible, .contact-right.is-visible { opacity: 1; transform: translateY(0) } .contact-avatar { width: min(58vw, 380px); height: auto; display: block; margin-top: -18px; filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .55)) } .contact-points { list-style: none; padding: 16px 0 0; margin: 8px 0 0; display: grid; gap: 10px; max-width: 560px } .contact-points li { color: #ffffff; font-size: clamp(14px, 1.6vw, 18px); line-height: 1.6 } .contact-points li strong { font-weight: 800 } [data-theme="light"] .contact-points li strong { color: var(--text) } /* Theme-aware contact titles: white in dark, black in light */ .contact-title { color: #ffffff } [data-theme="light"] .contact-title { color: #0f1720 } .contact-card { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; padding: 26px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); position: relative } .contact-card::before { content: ""; position: absolute; inset: -8px; border-radius: 24px; pointer-events: none; background: radial-gradient(60% 60% at var(--glow-x, 50%) var(--glow-y, 58%), rgba(30, 255, 0, .25), rgba(0, 0, 0, 0) 70%); filter: blur(16px); opacity: .9 } .contact h2 { font-family: "Bebas Neue", sans-serif; margin: 0 0 14px; font-size: clamp(32px, 5.2vw, 60px); letter-spacing: 1px } .glow-human { color: #fff; text-shadow: 0 0 12px rgba(30, 255, 0, .65), 0 0 32px rgba(30, 255, 0, .35) } .contact-form { display: grid; gap: 14px } .form-row { display: grid; gap: 8px } .form-row label { color: var(--muted); font-size: 14px } .form-row input, .form-row textarea { width: 100%; color: var(--text); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 12px 14px; outline: none; transition: box-shadow .2s ease, border-color .2s ease, background .2s ease; } .form-row textarea { resize: vertical; min-height: 140px } .form-row input:focus, .form-row textarea:focus { border-color: rgba(30, 255, 0, .55); box-shadow: 0 0 0 2px rgba(30, 255, 0, .5), 0 0 22px rgba(30, 255, 0, .28); background: rgba(255, 255, 255, .06) } .form-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap } .contact-btn { font-family: inherit; font-weight: 800; letter-spacing: .2px; padding: 12px 16px; border-radius: 14px; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; border: 1px solid transparent } .contact-btn:active { transform: translateY(1px) } .contact-btn.primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #062b11; border: none; box-shadow: 0 0 0 2px rgba(30, 255, 0, .65), 0 0 34px rgba(30, 255, 0, .45) } .contact-btn.primary:hover { filter: saturate(120%); box-shadow: 0 0 0 2px rgba(30, 255, 0, .75), 0 0 44px rgba(30, 255, 0, .55) } .contact-btn.outline { background: transparent; color: #d1fae5; border-color: rgba(30, 255, 0, .45); box-shadow: 0 0 0 1px rgba(30, 255, 0, .35) } .contact-btn.outline:hover { box-shadow: 0 0 0 2px rgba(30, 255, 0, .55), 0 0 22px rgba(30, 255, 0, .25) } @media (max-width: 980px) { .contact-inner { grid-template-columns: 1fr; gap: 28px } .contact-left { order: 2 } .contact-right { order: 1 } .contact-avatar { width: min(72vw, 340px); margin-top: -8px } .contact-head { margin-bottom: 6px } } /* ========================================== Creator landing (for-creators.html) ========================================== */ .creator-landing .creator-hero { position: relative; z-index: 1; max-width: 960px; margin: 0 auto 80px; padding: clamp(48px, 12vw, 120px) clamp(16px, 4vw, 48px) 64px; display: flex; justify-content: center; } .creator-landing .creator-hero-inner { width: 100%; max-width: 620px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; } .creator-landing .creator-hero h1 { margin: 0; font-size: clamp(52px, 8vw, 112px); } .creator-landing .hero-lede { margin: 0; color: var(--muted); font-size: clamp(16px, 1.8vw, 20px); line-height: 1.6; max-width: 560px; } .creator-landing .creator-form-card { width: 100%; padding: 28px clamp(20px, 4vw, 36px) 32px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 44px rgba(0, 0, 0, .48); backdrop-filter: blur(18px) saturate(150%); display: flex; flex-direction: column; gap: 18px; text-align: left; } .creator-landing .creator-form-title { margin: 0; font-family: "Bebas Neue", sans-serif; font-size: clamp(28px, 4.6vw, 46px); letter-spacing: 1px; text-align: center; } .creator-landing .creator-form-sub { margin: 0; color: var(--muted); font-size: clamp(14px, 1.6vw, 18px); text-align: center; } .creator-landing .creator-form { display: grid; gap: 16px; } .creator-landing .creator-form .form-label { font-size: 14px; font-weight: 700; letter-spacing: .3px; color: var(--text); } .creator-landing .creator-form .form-field { display: flex; flex-direction: column; gap: 6px; } .creator-landing .creator-form label { font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: .2px; } .creator-landing .creator-form input, .creator-landing .creator-form textarea { font-family: inherit; font-size: 15px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: var(--text); outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .creator-landing .creator-form textarea { resize: vertical; min-height: 120px; } .creator-network-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .creator-network-option { position: relative; display: inline-flex; align-items: center; justify-content: center; } .creator-network-option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .creator-network-option span { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: .2px; transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; min-width: 120px; } .creator-network-option input:focus-visible+span { border-color: rgba(30, 255, 0, .65); box-shadow: 0 0 0 3px rgba(30, 255, 0, .45); } .creator-network-option input:checked+span { border-color: rgba(30, 255, 0, .65); background: linear-gradient(180deg, rgba(30, 255, 0, .32), rgba(30, 255, 0, .18)); color: inherit; box-shadow: 0 8px 22px rgba(30, 255, 0, .32); } .creator-other-field { margin-top: 12px; } .creator-other-field label { color: var(--text); } .creator-landing .creator-form input:focus, .creator-landing .creator-form textarea:focus { border-color: rgba(30, 255, 0, .55); box-shadow: 0 0 0 2px rgba(30, 255, 0, .45), 0 0 18px rgba(30, 255, 0, .28); background: rgba(255, 255, 255, .12); } .creator-landing .full-width { width: 100% } .creator-landing .creator-simple { position: relative; z-index: 1; padding: 80px clamp(16px, 4vw, 48px) 120px; } .creator-landing .creator-simple-inner { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 34px; text-align: center; } .creator-landing .creator-simple-inner h2 { margin: 0; font-family: "Bebas Neue", sans-serif; font-size: clamp(34px, 5vw, 60px); letter-spacing: 1px; } .creator-landing .creator-simple-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .creator-landing .creator-simple-card { background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .18); border-radius: 20px; padding: 26px clamp(18px, 3vw, 28px); text-align: left; box-shadow: 0 12px 32px rgba(0, 0, 0, .38); display: flex; flex-direction: column; gap: 16px; } .creator-landing .creator-simple-card h3 { margin: 0; font-family: "Bebas Neue", sans-serif; font-size: clamp(22px, 3vw, 32px); letter-spacing: .6px; } .creator-landing .creator-list, .creator-landing .creator-steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; color: var(--muted); font-size: 15px; line-height: 1.6; } .creator-landing .creator-steps { list-style: decimal; } .creator-landing .creator-list { list-style: disc; } .creator-projects { position: relative; z-index: 1; padding: 80px clamp(16px, 4vw, 48px) 120px; } .creator-projects-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; } .creator-projects-head { text-align: center; display: flex; flex-direction: column; gap: 12px; } .creator-projects-head h2 { margin: 0; font-family: "Bebas Neue", sans-serif; font-size: clamp(34px, 5vw, 60px); letter-spacing: 1px; } .creator-projects-sub { margin: 0; color: var(--muted); font-size: clamp(14px, 1.5vw, 18px); line-height: 1.6; } .creator-projects-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .creator-project-card { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .18); border-radius: 22px; overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); display: flex; flex-direction: column; min-height: 100%; } .creator-project-image { width: 100%; height: 200px; object-fit: cover; display: block; } .creator-project-body { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 26px; flex: 1; } .creator-project-body h3 { margin: 0; font-family: "Bebas Neue", sans-serif; font-size: clamp(24px, 3.4vw, 36px); letter-spacing: .6px; } .creator-project-desc { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } .creator-project-list { margin: 0; padding-left: 18px; display: grid; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.6; } .creator-project-actions { margin-top: auto; } .creator-projects-more { display: flex; justify-content: center; } .creator-projects-more .cta { width: auto; min-width: 200px; } @media (max-width: 880px) { .creator-landing .creator-hero { margin-bottom: 48px; } .creator-landing .creator-simple-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .creator-landing .creator-hero-inner { gap: 24px; } .creator-landing .creator-form-card { padding: 22px 18px 26px; } } [data-theme="light"] .creator-landing .creator-form-card { background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .58)); border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 14px 28px rgba(0, 0, 0, .12); } [data-theme="light"] .creator-landing .creator-form label { color: #1f2937; } [data-theme="light"] .creator-landing .creator-form input, [data-theme="light"] .creator-landing .creator-form textarea { background: rgba(0, 0, 0, .03); border-color: rgba(0, 0, 0, .12); color: #0f1720; } [data-theme="light"] .creator-landing .creator-form input:focus, [data-theme="light"] .creator-landing .creator-form textarea:focus { border-color: rgba(24, 184, 0, .45); box-shadow: 0 0 0 2px rgba(24, 184, 0, .35), 0 0 18px rgba(24, 184, 0, .2); background: rgba(24, 184, 0, .06); } [data-theme="light"] .creator-project-card { background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .66)); border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 12px 28px rgba(0, 0, 0, .12); } [data-theme="light"] .creator-project-desc, [data-theme="light"] .creator-project-list { color: #374151; } [data-theme="light"] .creator-project-list { list-style: disc; } [data-theme="light"] .creator-network-option span { border-color: rgba(0, 0, 0, .1); background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .72)); color: #1f2937; } [data-theme="light"] .creator-network-option input:checked+span { border-color: rgba(24, 184, 0, .55); background: linear-gradient(180deg, rgba(24, 184, 0, .3), rgba(24, 184, 0, .16)); color: #062b11; box-shadow: 0 8px 22px rgba(24, 184, 0, .18); } /* ========================================== UGC Projects page ========================================== */ .ugc-page main { padding: 0 clamp(18px, 4vw, 48px) 140px; } .ugc-page .ugc-hero { position: relative; z-index: 1; max-width: 1060px; margin: 40px auto 80px; padding: clamp(42px, 9vw, 96px) clamp(20px, 4.5vw, 56px); border-radius: 28px; text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); backdrop-filter: blur(18px) saturate(150%); } .ugc-page .ugc-hero h1 { margin: 0 0 18px; font-family: "Bebas Neue", sans-serif; font-size: clamp(52px, 8vw, 108px); letter-spacing: 1px; } .ugc-page .ugc-hero-lede { margin: 0 auto 14px; color: var(--muted); font-size: clamp(16px, 1.8vw, 20px); line-height: 1.65; max-width: 720px; } .ugc-page .ugc-hero-meta { margin: 0 auto; color: #c7cfc9; font-size: clamp(14px, 1.6vw, 18px); line-height: 1.55; max-width: 820px; } [data-theme="light"] .ugc-page .ugc-hero { background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .62)); border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 14px 32px rgba(0, 0, 0, .12); } [data-theme="light"] .ugc-page .ugc-hero-meta { color: #475569; } .ugc-page .ugc-projects-list { max-width: 1120px; margin: 0 auto; display: grid; gap: 26px; } .ugc-page .ugc-submit-promo { max-width: 960px; margin: 72px auto 0; } .ugc-submit-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(18px, 3vw, 28px); padding: clamp(26px, 4vw, 40px); border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 14px 36px rgba(0, 0, 0, .48); } .ugc-submit-copy { flex: 1 1 360px; display: grid; gap: 10px; } .ugc-submit-copy h2 { margin: 0; font-family: "Bebas Neue", sans-serif; font-size: clamp(34px, 5vw, 58px); letter-spacing: .6px; } .ugc-submit-copy p { margin: 0; color: var(--muted); font-size: clamp(14px, 1.6vw, 18px); line-height: 1.6; max-width: 520px; } .ugc-submit-card .cta { flex: 0 0 auto; min-width: 200px; } .ugc-page .ugc-card { position: relative; display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: clamp(18px, 4vw, 34px); align-items: center; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .18); border-radius: 28px; padding: clamp(22px, 4vw, 36px); box-shadow: 0 16px 40px rgba(0, 0, 0, .48); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .ugc-page .ugc-card:hover { transform: translateY(-3px); border-color: rgba(30, 255, 0, .32); box-shadow: 0 22px 52px rgba(30, 255, 0, .32); } .ugc-page .ugc-card:focus-within { border-color: rgba(30, 255, 0, .45); box-shadow: 0 0 0 2px rgba(30, 255, 0, .45), 0 24px 60px rgba(30, 255, 0, .32); } .ugc-page .ugc-card-media { width: 100%; max-width: 320px; aspect-ratio: 16/9; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, .5); } .ugc-page .ugc-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ugc-page .ugc-card-overview { display: flex; flex-direction: column; gap: 16px; } .ugc-page .ugc-card-topline { display: flex; flex-direction: column; gap: 12px; } .ugc-page .ugc-card-overview h2 { margin: 0; font-family: "Bebas Neue", sans-serif; font-size: clamp(34px, 4.8vw, 60px); letter-spacing: .6px; } .ugc-page .ugc-card-pills { display: flex; flex-wrap: wrap; gap: 10px; } .ugc-page .ugc-card-actions { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; } .ugc-page .ugc-card-actions .cta { flex: 0 0 auto; } .ugc-page .ugc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .18); color: #dce4de; font-size: 13px; font-weight: 700; letter-spacing: .2px; text-transform: uppercase; } .ugc-page .ugc-card-description { margin: 0; color: var(--muted); font-size: clamp(14px, 1.6vw, 18px); line-height: 1.65; } .ugc-page .ugc-card-highlights { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: #dce4de; font-size: 14px; line-height: 1.5; } .ugc-page .ugc-card-highlights li { list-style: disc; } .ugc-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: clamp(20px, 6vw, 60px); background: rgba(0, 0, 0, .78); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .ugc-modal[hidden] { display: none; } .ugc-modal.is-visible { opacity: 1; pointer-events: auto; } .ugc-modal-backdrop { position: absolute; inset: 0; } .ugc-modal-dialog { position: relative; z-index: 1; width: min(1040px, 100%); max-height: 90vh; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .22); border-radius: 32px; box-shadow: 0 32px 80px rgba(0, 0, 0, .65); overflow: hidden; transform: translateY(24px) scale(.98); transition: transform .28s cubic-bezier(.16, .67, .29, .99); } .ugc-modal.is-visible .ugc-modal-dialog { transform: translateY(0) scale(1); } .ugc-modal-close { position: absolute; top: 18px; right: 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #f2f6f3; cursor: pointer; transition: transform .18s ease, box-shadow .2s ease, background .2s ease; } .ugc-modal-close:hover { transform: translateY(-1px); background: linear-gradient(180deg, rgba(30, 255, 0, .26), rgba(30, 255, 0, .16)); box-shadow: 0 0 0 1px rgba(30, 255, 0, .45), 0 0 22px rgba(30, 255, 0, .28); color: #04270f; } .ugc-modal-close:focus-visible { outline: 2px solid rgba(30, 255, 0, .65); outline-offset: 3px; } .ugc-modal-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: clamp(28px, 4vw, 40px); display: grid; gap: 34px; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; scrollbar-width: none; -ms-overflow-style: none; } .ugc-modal-content::-webkit-scrollbar { display: none; } .ugc-modal-top { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: center; } .ugc-modal-top.simple { grid-template-columns: 1fr; } .ugc-modal-top.simple .ugc-modal-summary { align-items: flex-start; } .ugc-modal-media { border-radius: 24px; overflow: hidden; box-shadow: 0 16px 36px rgba(0, 0, 0, .55); } .ugc-modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ugc-modal-summary { display: flex; flex-direction: column; gap: 16px; } .ugc-modal-summary h2 { margin: 0; font-family: "Bebas Neue", sans-serif; font-size: clamp(38px, 5.2vw, 68px); letter-spacing: .7px; } .ugc-modal-body { display: grid; gap: 28px; } .ugc-page .ugc-card-content h3 { margin: 0 0 12px; font-family: "Bebas Neue", sans-serif; font-size: clamp(24px, 3.6vw, 40px); letter-spacing: .5px; } .ugc-page .ugc-steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; color: #dfe6e1; font-size: 15px; line-height: 1.6; } .ugc-page .ugc-submission-form { display: grid; gap: 16px; padding: 24px clamp(18px, 3.8vw, 28px) 28px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); } .ugc-page .ugc-form-footnote { margin: 0; color: #c7cfc9; font-size: 13px; line-height: 1.6; } .ugc-page .ugc-submission-form .cta { justify-self: stretch; } [data-theme="light"] .ugc-page .ugc-card { background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .62)); border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 12px 28px rgba(0, 0, 0, .12); } [data-theme="light"] .ugc-page .ugc-card:hover { border-color: rgba(24, 184, 0, .32); box-shadow: 0 20px 48px rgba(24, 184, 0, .18); } [data-theme="light"] .ugc-page .ugc-card-description { color: #475569; } [data-theme="light"] .ugc-page .ugc-card-highlights { color: #1f2937; } [data-theme="light"] .ugc-page .ugc-pill { background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .76)); border: 1px solid rgba(0, 0, 0, .08); color: #0f1720; } [data-theme="light"] .ugc-page .ugc-form-footnote { color: #475569; } [data-theme="light"] .ugc-page .ugc-submission-form { background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .74)); border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); } [data-theme="light"] .ugc-submit-card { background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .72)); border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 12px 28px rgba(0, 0, 0, .12); } [data-theme="light"] .ugc-submit-copy p { color: #475569; } [data-theme="light"] .ugc-modal-dialog { background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78)); border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 32px 80px rgba(0, 0, 0, .22); } [data-theme="light"] .ugc-modal-close { border-color: rgba(0, 0, 0, .1); background: rgba(24, 184, 0, .12); color: #04270f; } [data-theme="light"] .ugc-modal-close:hover { background: linear-gradient(180deg, rgba(24, 184, 0, .32), rgba(24, 184, 0, .18)); color: #04270f; } @media (max-width: 1024px) { .ugc-modal-top { grid-template-columns: 1fr; } .ugc-modal-summary { align-items: flex-start; } } @media (max-width: 720px) { .ugc-page main { padding-bottom: 100px; } .ugc-page .ugc-hero { margin: 28px auto 48px; padding: 32px 18px 40px; } .ugc-page .ugc-card { grid-template-columns: 1fr; text-align: left; border-radius: 22px; } .ugc-page .ugc-submit-promo { margin: 48px auto 0; } .ugc-submit-card { flex-direction: column; align-items: flex-start; } .ugc-submit-card .cta { width: 100%; } .ugc-page .ugc-submission-form { padding: 20px 16px 24px; } .ugc-page .ugc-card-pills { justify-content: flex-start; } .ugc-modal { padding: 18px; } .ugc-modal-dialog { max-height: calc(100vh - 24px); border-radius: 22px; } .ugc-modal-content { padding: 22px 16px 28px; } .ugc-modal-close { top: 14px; right: 14px; } } @media (max-width: 480px) { .ugc-page .ugc-card-media { aspect-ratio: 16 / 10; } .ugc-page .ugc-card-actions { flex-direction: column; } .ugc-modal-summary h2 { font-size: 48px; } } body.ugc-modal-open { overflow: hidden; } /* Footer */ .site-footer { position: relative; z-index: 2; background: transparent } .footer-inner { max-width: 1280px; margin: 0 auto; padding: 40px clamp(16px, 3vw, 32px) 60px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: start } .footer-col .footer-heading { margin: 0 0 12px; font-family: "Bebas Neue", sans-serif; font-size: clamp(20px, 2.8vw, 28px); color: var(--accent); letter-spacing: 1px } /* Left */ .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px } .footer-logo { height: 38px; width: auto; display: block; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)) } .footer-tagline { margin: 8px 0 10px; color: var(--accent); font-weight: 800 } .company-info { color: #c7cfc9 } .company-info a { color: var(--accent); text-decoration: none } .company-info a:hover { filter: saturate(120%); text-shadow: 0 0 8px rgba(30, 255, 0, .45) } /* Center */ .footer-nav { display: grid; gap: 8px } .footer-nav a { color: #eef3ee; text-decoration: none; opacity: .9; transition: color .15s ease, text-shadow .2s ease } .footer-nav a:hover { color: #ffffff; text-shadow: 0 0 10px rgba(30, 255, 0, .3) } /* Right */ .social-list { display: flex; gap: 12px; flex-wrap: wrap } .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); transition: transform .15s ease, box-shadow .2s ease, background .2s ease } .social-icon img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)) } .social-icon:hover { transform: translateY(-2px); background: linear-gradient(180deg, rgba(30, 255, 0, .28), rgba(30, 255, 0, .18)); box-shadow: 0 0 0 2px rgba(30, 255, 0, .65), 0 0 24px rgba(30, 255, 0, .45) } .social-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(30, 255, 0, .75), 0 0 26px rgba(30, 255, 0, .55) } @media (max-width: 980px) { .footer-inner { grid-template-columns: 1fr; gap: 22px } } .footer-legal { grid-column: auto; margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap } .footer-legal a { color: #e8efe9; text-decoration: none; font-size: 16px; font-weight: 600; opacity: .95; transition: color .15s ease, text-shadow .2s ease } .footer-legal a:hover { color: #ffffff; text-shadow: 0 0 12px rgba(30, 255, 0, .35) } .footer-legal .sep { color: #5a5f5b } /* Legal pages */ .legal-body { background: var(--bg); color: var(--text); margin: 0; font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif } .legal { position: relative; z-index: 1; padding: 40px clamp(16px, 3vw, 32px) 100px } .legal-inner { max-width: 920px; margin: 0 auto } .legal-title { font-family: "Bebas Neue", sans-serif; font-size: clamp(42px, 7vw, 80px); margin: 0 0 6px; letter-spacing: 1px; color: #fff } .legal-meta { color: var(--muted); margin: 0 0 18px; font-size: 14px } .legal h2 { margin: 28px 0 10px; font-size: 22px; color: var(--accent) } .legal h3 { margin: 16px 0 8px; font-size: 18px; color: #dcdcdc } .legal p, .legal li { color: #dfe6e1; line-height: 1.65 } .legal a { color: var(--accent); text-decoration: none } .legal a:hover { text-shadow: 0 0 10px rgba(30, 255, 0, .3) }