/* Clipsy — landing page. Same palette as the app, turned up. */ @font-face { font-family: "SM Display"; src: url("/fonts/Poppins-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "SM Serif"; src: url("/fonts/PlayfairDisplay-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } :root { --bg: #0b0d0f; --card: #14171b; --line: #23282e; --line-2: #2f353d; --text: #eef1f4; --mut: #97a1ab; --acc: #ff6d3d; --acc-2: #ff9d3d; --acc-3: #ff3d7f; --r: 16px; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace; --sans: system-ui, "Segoe UI", -apple-system, sans-serif; --display: "SM Display", var(--sans); --serif: "SM Serif", Georgia, serif; --shell: min(1180px, 100% - 44px); } * { box-sizing: border-box; margin: 0; padding: 0; } html { color-scheme: dark; scroll-behavior: smooth; } /* ============================ LIGHT MODE ============================ The page is dark by default. When is set (by the toggle in the nav, or from the visitor's system preference on first load) we re-theme everything: base palette, the white gradient-clipped headings, the subtle dark surface tints, and the glowing backdrop (dialled down to a soft pastel wash so it doesn't blow out on a light background). */ :root[data-theme="light"] { color-scheme: light; --bg: #faf9f7; --card: #ffffff; --line: #e9e5df; --line-2: #dbd5cc; --text: #17191c; --mut: #6b7178; } /* headings use gradient-clipped text — swap the light gradient for a dark one */ :root[data-theme="light"] h1, :root[data-theme="light"] .section h2, :root[data-theme="light"] .final h2 { background: linear-gradient(180deg, #17191c 34%, #59636e); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-theme="light"] .lede { color: #464d55; } :root[data-theme="light"] .lede b, :root[data-theme="light"] .stat span, :root[data-theme="light"] .step p, :root[data-theme="light"] .feat p, :root[data-theme="light"] .local-copy p { color: #565d64; } /* the backdrop: calm pastel glows, faint grid, no harsh grain */ :root[data-theme="light"] .aurora { opacity: .2; } :root[data-theme="light"] .glow-ring { opacity: .3; } :root[data-theme="light"] .grid { background-image: linear-gradient(rgba(20,22,26,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20,22,26,.045) 1px, transparent 1px); } :root[data-theme="light"] .grain { opacity: .05; } /* subtle surfaces that were white-on-dark become dark-on-light */ :root[data-theme="light"] #nav::before { background: rgba(250,249,247,.82); } :root[data-theme="light"] .eyebrow, :root[data-theme="light"] .stack li { background: rgba(20,22,26,.03); } :root[data-theme="light"] .step { background: linear-gradient(180deg, rgba(20,22,26,.028), rgba(20,22,26,.006)); } :root[data-theme="light"] .stat { background: rgba(20,22,26,.025); } :root[data-theme="light"] .ghost-btn:hover { background: rgba(20,22,26,.04); } :root[data-theme="light"] .final .fine code { background: rgba(20,22,26,.05); color: #565d64; } :root[data-theme="light"] .local-card { background: radial-gradient(90% 140% at 0% 0%, rgba(255,109,61,.1), transparent 58%), linear-gradient(180deg, rgba(20,22,26,.028), rgba(20,22,26,.006)); } /* the floating chips sit on the light page — flip them light (the badge stays dark: it's on the phone screen) */ :root[data-theme="light"] .chip { background: rgba(255,255,255,.94); color: #3d444b; box-shadow: 0 16px 40px -18px rgba(0,0,0,.25); } :root[data-theme="light"] ::selection { background: rgba(255,109,61,.22); } /* the theme toggle button */ .theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; margin-left: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(127,127,127,.06); color: var(--mut); cursor: pointer; transition: color .2s, border-color .2s, background .2s; } .theme-toggle:hover { color: var(--text); border-color: #7c8894; } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: block; } :root[data-theme="light"] .theme-toggle .sun { display: block; } :root[data-theme="light"] .theme-toggle .moon { display: none; } body { background: var(--bg); color: var(--text); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ::selection { background: rgba(255,109,61,.32); } .skip-link { position: fixed; top: 10px; left: 14px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: var(--deep-panel, #1c1c1b); color: #fff; font-size: 13px; transform: translateY(-160%); transition: transform .2s ease; } .skip-link:focus { transform: translateY(0); } /* ---------------- animated backdrop ---------------- */ .bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* The texture is an underlay, never a screen on top of the page content. */ #main-content, footer { position: relative; z-index: 1; } .aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .45; will-change: transform; } .a1 { width: 820px; height: 820px; top: -300px; left: -180px; background: radial-gradient(circle at 40% 40%, #ff6d3d 0%, rgba(255,109,61,.55) 34%, transparent 66%); opacity: .6; animation: drift1 26s ease-in-out infinite; } .a2 { width: 700px; height: 700px; top: -220px; right: -200px; background: radial-gradient(circle at 55% 45%, #ff3d7f 0%, rgba(255,61,127,.5) 34%, transparent 66%); opacity: .42; animation: drift2 32s ease-in-out infinite; } .a3 { width: 760px; height: 760px; top: 40vh; left: 30%; background: radial-gradient(circle at 50% 50%, #2f7bff 0%, rgba(47,123,255,.45) 36%, transparent 66%); opacity: .26; animation: drift3 38s ease-in-out infinite; } @keyframes drift1 { 50% { transform: translate3d(140px, 90px, 0) scale(1.12); } } @keyframes drift2 { 50% { transform: translate3d(-120px, 130px, 0) scale(1.16); } } @keyframes drift3 { 50% { transform: translate3d(-180px, -80px, 0) scale(.88); } } .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(ellipse 100% 62% at 50% 12%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 100% 62% at 50% 12%, #000 20%, transparent 78%); } .grain { position: absolute; inset: -200%; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 700ms steps(2) infinite; pointer-events: none; } @keyframes grain { 0% { transform: translate(0, 0); } 50% { transform: translate(-2%, 1.5%); } 100% { transform: translate(1%, -1%); } } /* ---------------- nav ---------------- */ #nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 26px; width: var(--shell); margin: 0 auto; padding: 16px 0; transition: padding .25s ease; } #nav::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); background: rgba(11,13,15,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; opacity: 0; transition: opacity .3s ease, border-color .3s ease; z-index: -1; } #nav.stuck::before { opacity: 1; border-bottom-color: var(--line); } #nav.stuck { padding: 11px 0; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -.01em; font-size: 15.5px; } .brand svg { color: var(--acc); } .brand b { font-weight: 800; } .brand.sm { font-size: 13.5px; } .nav-links { display: flex; gap: 24px; margin-left: auto; font-size: 14px; color: var(--mut); } .nav-links a { position: relative; transition: color .2s; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 1px; background: var(--acc); transition: right .28s ease; } .nav-links a:hover { color: var(--text); } .nav-links a:hover::after { right: 0; } /* ---------------- buttons ---------------- */ .cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 999px; background: linear-gradient(135deg, var(--acc-2), var(--acc) 46%, var(--acc-3)); background-size: 200% 200%; color: #1a0a03; font-weight: 700; font-size: 15px; letter-spacing: -.01em; box-shadow: 0 10px 34px -10px rgba(255,109,61,.75), inset 0 1px 0 rgba(255,255,255,.32); transition: transform .22s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s, background-position .5s; white-space: nowrap; } .cta:hover { transform: translateY(-2px) scale(1.022); background-position: 100% 0; box-shadow: 0 18px 46px -12px rgba(255,109,61,.9), inset 0 1px 0 rgba(255,255,255,.4); } .cta:active { transform: translateY(0) scale(.99); } .cta svg { transition: transform .25s ease; } .cta:hover svg { transform: translateX(3px); } .cta::after { /* shine sweep */ content: ""; position: absolute; top: 0; bottom: 0; width: 42%; left: -60%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); } .cta:hover::after { animation: sweep .7s ease; } @keyframes sweep { to { left: 130%; } } .cta.sm { padding: 9px 17px; font-size: 13.5px; margin-left: 4px; } .cta.lg { padding: 15px 30px; font-size: 16.5px; } .cta.xl { padding: 17px 38px; font-size: 17.5px; } .ghost-btn { display: inline-flex; align-items: center; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--mut); font-size: 15px; font-weight: 500; transition: color .2s, border-color .2s, background .2s; } .ghost-btn:hover { color: var(--text); border-color: #4a525c; background: rgba(255,255,255,.03); } /* ---------------- hero ---------------- */ .hero { position: relative; width: var(--shell); margin: 0 auto; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; padding: 76px 0 110px; min-height: min(88vh, 820px); } .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.025); font-size: 12.5px; color: var(--mut); letter-spacing: .01em; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #4cc38a; box-shadow: 0 0 0 0 rgba(76,195,138,.6); animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 70%, 100% { box-shadow: 0 0 0 8px rgba(76,195,138,0); } } h1 { margin: 24px 0 22px; font-family: var(--display); font-size: clamp(32px, 4.5vw, 58px); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; background: linear-gradient(180deg, #fff 30%, #b9c2cc); -webkit-background-clip: text; background-clip: text; color: transparent; } h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; background: linear-gradient(100deg, var(--acc-2), var(--acc) 40%, var(--acc-3)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; } .lede { max-width: 54ch; color: #b7c0c9; font-size: 17px; line-height: 1.62; } .lede b { color: var(--text); font-weight: 600; } .hero-cta { display: flex; align-items: center; gap: 14px; margin: 32px 0 30px; flex-wrap: wrap; } .stack { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; font-size: 12px; color: var(--mut); letter-spacing: .07em; text-transform: uppercase; } .stack li { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02); } /* ---------------- the phone ---------------- */ .hero-stage { position: relative; display: grid; place-items: center; perspective: 1200px; } .glow-ring { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: conic-gradient(from 0deg, var(--acc), var(--acc-3), #2f7bff, var(--acc)); filter: blur(78px); opacity: .38; animation: spin 18s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .phone { position: relative; width: min(300px, 74vw); aspect-ratio: 9/16; border-radius: 34px; padding: 9px; background: linear-gradient(160deg, #33393f, #14171b 42%, #0c0e10); box-shadow: 0 60px 110px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.16); transform: rotateY(-13deg) rotateX(5deg) rotateZ(-1.5deg); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.3,1); animation: float 7s ease-in-out infinite; } @keyframes float { 50% { translate: 0 -14px; } } .phone-notch { position: absolute; top: 15px; left: 50%; translate: -50% 0; width: 66px; height: 5px; border-radius: 3px; background: #05070a; } .phone-screen { position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: #05070a; } /* the video behind the crop — two real recordings, cut every two seconds */ .scene { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 8%, #35404d 0%, #1b2029 46%, #0a0d11 100%); } .reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* 16:9 source, cropped to the 9:16 frame */ object-position: 50% 40%; opacity: 0; transition: opacity .1s linear; } .reel.on { opacity: 1; } .scan { position: absolute; left: 0; right: 0; height: 34%; background: linear-gradient(180deg, transparent, rgba(255,109,61,.10), transparent); animation: scan 4.5s ease-in-out infinite; } @keyframes scan { 0%,100% { top: -34%; } 50% { top: 100%; } } .vignette { position: absolute; inset: 0; background: radial-gradient(120% 78% at 50% 40%, transparent 42%, rgba(0,0,0,.62)); } .badge { position: absolute; top: 34px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(10,12,15,.72); border: 1px solid rgba(255,109,61,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11px; color: #ffd9c9; letter-spacing: .01em; } .badge svg { color: var(--acc); } .badge b { color: #fff; } /* burned-in captions */ .cap { position: absolute; left: 10px; right: 10px; bottom: 62px; text-align: center; font-family: var(--display); font-size: 21px; line-height: 1.16; font-weight: 800; letter-spacing: -.015em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 #000, 0 0 14px rgba(0,0,0,.75); min-height: 2.4em; display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap; gap: 0 .3em; } .cap i { font-style: normal; transition: color .12s, transform .12s; } .cap i.on { color: var(--acc-2); transform: translateY(-1px) scale(1.04); display: inline-block; } .phone-tl { position: absolute; left: 14px; right: 14px; bottom: 22px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; } .phone-tl i { display: block; height: 100%; background: var(--acc); animation: fill 8s linear infinite; } @keyframes fill { from { width: 0; } to { width: 100%; } } .chip { position: absolute; z-index: 3; padding: 8px 14px; border-radius: 999px; background: rgba(20,23,27,.82); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; color: #d5dbe1; white-space: nowrap; box-shadow: 0 16px 40px -16px rgba(0,0,0,.9); } .chip-1 { top: 16%; right: -6px; animation: float 7s ease-in-out infinite .6s; } .chip-2 { bottom: 17%; left: -14px; animation: float 7s ease-in-out infinite 1.4s; } .scroll-hint { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; width: 22px; height: 34px; border: 1px solid var(--line-2); border-radius: 999px; display: grid; place-items: start center; padding-top: 6px; } .scroll-hint span { width: 3px; height: 7px; border-radius: 2px; background: var(--acc); animation: wheel 1.8s ease-in-out infinite; } @keyframes wheel { 50% { transform: translateY(11px); opacity: .2; } } /* ---------------- marquee ---------------- */ .marquee { position: relative; border-block: 1px solid var(--line); overflow: hidden; padding: 15px 0 16px; display: grid; gap: 9px; background: linear-gradient(90deg, rgba(255,109,61,.10), rgba(255,61,127,.09), rgba(47,123,255,.09), rgba(255,157,61,.10), rgba(255,109,61,.10)); background-size: 320% 100%; animation: hueflow 16s linear infinite; mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent); } @keyframes hueflow { to { background-position: -320% 0; } } .marquee::after { /* a light sweep travelling across the strip */ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.09) 50%, transparent 62%); background-size: 260% 100%; animation: hueflow 7s linear infinite; } .marquee-track { display: flex; align-items: center; gap: 30px; width: max-content; animation: slide 34s linear infinite; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; } .marquee-track span { /* colour flows through the words */ background: linear-gradient(90deg, #ffb066, #ff6d3d, #ff3d7f, #8fb0ff, #ffb066); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hueflow 9s linear infinite; } .marquee-track i { font-style: normal; color: var(--acc); font-size: 9px; animation: twinkle 3.4s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { color: var(--acc); opacity: .5; transform: scale(1); } 50% { color: var(--acc-3); opacity: 1; transform: scale(1.35); } } .marquee-track.rev { animation: slide-rev 44s linear infinite; font-size: 11px; opacity: .72; } .marquee-track.rev span { animation-duration: 13s; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes slide-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* ---------------- sections ---------------- */ .section { width: var(--shell); margin: 0 auto; padding: 110px 0 0; } .section-head { max-width: 720px; margin-bottom: 46px; } .kicker { display: inline-block; margin-bottom: 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); } .section h2 { font-family: var(--display); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -.032em; font-weight: 800; background: linear-gradient(180deg, #fff 46%, #cfd6de); -webkit-background-clip: text; background-clip: text; color: transparent; } /* steps */ .steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .step { position: relative; padding: 30px 26px 32px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); transition: border-color .3s, transform .3s; } .step:hover { border-color: var(--line-2); transform: translateY(-3px); } .step::before { content: ""; position: absolute; left: 26px; right: 26px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--acc), transparent); opacity: 0; transition: opacity .35s; } .step:hover::before { opacity: .9; } .num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--acc); display: block; margin-bottom: 16px; } .step h3 { font-size: 19px; font-weight: 650; letter-spacing: -.02em; margin-bottom: 9px; } .step p { color: var(--mut); font-size: 14.5px; } /* features */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .feat { position: relative; overflow: hidden; padding: 26px 24px 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); transition: border-color .3s, transform .3s; } .feat:hover { border-color: var(--line-2); transform: translateY(-3px); } .spot::before { /* cursor spotlight */ content: ""; position: absolute; inset: 0; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(255,109,61,.15), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; } .feat:hover::before { opacity: 1; } .ficon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; font-size: 20px; margin-bottom: 16px; background: rgba(255,109,61,.1); border: 1px solid rgba(255,109,61,.24); } .feat h3 { font-size: 17px; font-weight: 650; letter-spacing: -.02em; margin-bottom: 8px; } .feat p { color: var(--mut); font-size: 14px; } /* local card */ .local-card { display: grid; grid-template-columns: 1.25fr .75fr; gap: 46px; align-items: center; padding: 46px 44px; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(90% 140% at 0% 0%, rgba(255,109,61,.12), transparent 58%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.008)); } .local-copy h2 { margin-bottom: 16px; } .local-copy p { color: var(--mut); max-width: 52ch; margin-bottom: 26px; } .stats { display: grid; gap: 16px; } .stat { display: flex; align-items: baseline; gap: 14px; padding: 16px 20px; border-radius: 13px; border: 1px solid var(--line); background: rgba(8,10,12,.55); } .stat b { font-family: var(--display); font-size: 30px; letter-spacing: -.03em; min-width: 84px; background: linear-gradient(120deg, var(--acc-2), var(--acc-3)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat span { color: var(--mut); font-size: 13.5px; line-height: 1.35; } /* pricing: three tall editorial tickets, not interchangeable SaaS cards */ .pricing-section { position: relative; } .pricing-lede { max-width: 690px; margin: 16px auto 0; color: var(--mut); font-size: 16px; line-height: 1.65; text-align: center; } .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 44px; align-items: stretch; } .price-card { position: relative; overflow: hidden; min-height: 510px; display: flex; flex-direction: column; padding: 30px 28px 26px; border: 1px solid var(--line-2); border-radius: 20px; background: linear-gradient(135deg, rgba(255,255,255,.045), transparent 32%), var(--card); transition: transform .25s ease, border-color .25s ease; } .price-card:hover { transform: translateY(-5px); border-color: #56606a; } .price-card.featured { border-color: rgba(255,109,61,.72); background: radial-gradient(90% 55% at 50% 0%, rgba(255,109,61,.18), transparent 70%), var(--card); box-shadow: 0 30px 80px -46px rgba(255,109,61,.7); } .price-card.business { background: linear-gradient(145deg, rgba(47,123,255,.12), transparent 48%), var(--card); } .price-index { position: absolute; right: 22px; top: 17px; font: 800 58px/1 var(--display); color: rgba(151,161,171,.11); letter-spacing: -.08em; } .price-ribbon { position: absolute; top: 18px; right: -34px; rotate: 36deg; width: 145px; padding: 6px 0; text-align: center; background: var(--acc); color: #190b05; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .price-name { color: var(--acc); font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 14px; } .price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; } .price b { font-family: var(--display); font-size: clamp(42px, 5vw, 62px); line-height: .95; letter-spacing: -.055em; } .price span { color: var(--mut); font-size: 13px; } .price.custom b { font-size: clamp(34px, 4vw, 48px); } .price-volume { min-height: 58px; color: var(--mut); font-size: 14px; line-height: 1.45; padding-bottom: 22px; border-bottom: 1px solid var(--line); } .price-volume strong { color: var(--text); font-size: 20px; } .price-card ul { list-style: none; display: grid; gap: 11px; margin: 22px 0 28px; color: var(--mut); font-size: 13.5px; } .price-card li { display: flex; gap: 9px; line-height: 1.45; } .price-card li::before { content: "✦"; color: var(--acc); font-size: 10px; padding-top: 3px; } .price-cta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; font-weight: 750; font-size: 13.5px; transition: background .2s, border-color .2s; } .price-cta:hover { border-color: var(--acc); background: rgba(255,109,61,.08); } .price-cta.primary { background: var(--acc); border-color: var(--acc); color: #190b05; } .price-cta.primary:hover { background: #ff835c; } .price-cta.disabled { opacity: .45; cursor: not-allowed; } .topup-note { width: fit-content; max-width: 100%; margin: 24px auto 0; padding: 10px 16px; border: 1px dashed var(--line-2); border-radius: 999px; color: var(--mut); font-size: 13px; text-align: center; } :root[data-theme="light"] .price-card { background: linear-gradient(145deg, rgba(20,22,26,.025), transparent 45%), #fff; } :root[data-theme="light"] .price-card.featured { background: radial-gradient(90% 55% at 50% 0%, rgba(255,109,61,.12), transparent 70%), #fff; } /* final CTA */ .final { width: var(--shell); margin: 130px auto 0; text-align: center; padding: 84px 24px 92px; border-top: 1px solid var(--line); position: relative; } .final::before { content: ""; position: absolute; top: -1px; left: 50%; translate: -50% 0; width: min(560px, 80%); height: 1px; background: linear-gradient(90deg, transparent, var(--acc), transparent); } .final h2 { font-family: var(--display); font-size: clamp(30px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; margin-bottom: 16px; background: linear-gradient(180deg, #fff 44%, #ccd4dc); -webkit-background-clip: text; background-clip: text; color: transparent; } .final > p { color: var(--mut); font-size: 16.5px; margin-bottom: 34px; } .final .fine { font-size: 13px; margin: 22px 0 0; color: #6d7680; } .final .fine code { font-family: var(--mono); font-size: 12px; background: rgba(255,255,255,.05); padding: 2px 7px; border-radius: 6px; color: #9aa4ae; } .site-footer { width: var(--shell); margin: 0 auto; padding: 56px 0 34px; display: grid; grid-template-columns: minmax(220px, 1.2fr) 2fr; gap: 54px 9vw; border-top: 1px solid var(--line); color: var(--mut); font-size: 13px; } .site-footer .brand-mark { flex: 0 0 22px; width: 22px; height: 22px; } .footer-lead p { max-width: 30ch; margin: 14px 0 18px; } .footer-start { color: var(--text); font-weight: 700; } .footer-start span { display: inline-block; transition: transform .2s ease; } .footer-start:hover span { transform: translateX(4px); } .footer-nav { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 28px; } .footer-nav div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .footer-nav h2 { margin-bottom: 5px; color: var(--text); font: 800 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; } .footer-nav a { transition: color .18s ease; } .footer-nav a:hover { color: var(--text); } .footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 11.5px; } /* ---------------- scroll reveal ---------------- */ .reveal { opacity: 0; transform: translateY(22px); } .reveal.in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); } .reveal.d1.in { transition-delay: .09s; } .reveal.d2.in { transition-delay: .18s; } .reveal.d3.in { transition-delay: .27s; } .reveal.d4.in { transition-delay: .36s; } /* ---------------- responsive ---------------- */ @media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 54px; padding: 48px 0 90px; text-align: center; } .hero-copy { display: flex; flex-direction: column; align-items: center; } .hero-cta, .stack { justify-content: center; } .lede { margin-inline: auto; } .phone { transform: none; } .chip-1 { right: -10px; } .chip-2 { left: -10px; } .scroll-hint { display: none; } .steps, .feature-grid { grid-template-columns: 1fr 1fr; } .pricing-grid { grid-template-columns: 1fr; max-width: 650px; margin-inline: auto; } .price-card { min-height: auto; } .local-card { grid-template-columns: 1fr; padding: 34px 28px; gap: 32px; } } @media (max-width: 640px) { :root { --shell: min(1180px, 100% - 30px); } .nav-links { display: none; } .cta.sm { margin-left: auto; } .steps, .feature-grid { grid-template-columns: 1fr; } .price-card { padding: 26px 22px 22px; } .topup-note { border-radius: 14px; } .section { padding-top: 78px; } .final { padding: 62px 8px 70px; margin-top: 92px; } .chip { display: none; } .site-footer { grid-template-columns: 1fr; gap: 38px; text-align: left; } .footer-nav { grid-template-columns: 1fr 1fr; row-gap: 34px; } .footer-bottom { flex-direction: column; gap: 5px; } } /* Reduced motion drops the disorienting stuff — parallax, bobbing, flicker, the fly-in reveals — but the page still has a pulse: the ticker keeps scrolling, the colours keep flowing and the captions keep playing. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .phone, .chip-1, .chip-2 { animation: none; } .aurora { animation-duration: 60s; } /* still drifting, just calmer */ .grain { animation: none; opacity: .1; } .scan { animation: none; top: 0; opacity: .45; } .reveal { opacity: 1; transform: none; transition: none; } } /* ================= MOBILE PERFORMANCE ================= Phones (especially low-end) can't composite big animated blurs, a 5x-viewport animated noise filter, and backdrop-filters every scroll frame — that's what makes scrolling feel stuck. We keep the LOOK (the colour glows, the phone, the captions) but stop the continuous RE-rasterisation: a blur that holds still is nearly free; a blur that animates re-renders every frame. */ @media (max-width: 980px) { .grain { display: none; } /* animated SVG noise at 5x viewport — gone */ .a3 { display: none; } .aurora { animation: none; filter: blur(60px); } /* keep the glow, stop the drift */ .glow-ring { animation: none; } /* stop the spin (still a static halo) */ } @media (max-width: 640px) { /* one calm, static glow is plenty on a phone */ .aurora { animation: none; filter: blur(42px); opacity: .38; } .a2 { display: none; } .glow-ring { animation: none; filter: blur(52px); opacity: .26; } /* backdrop-filter re-blurs on every scroll frame as content moves behind it — the single biggest scroll killer. Swap for solid fills. */ #nav::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11,13,15,.94); } #nav.stuck::before { opacity: 1; } .badge, .chip { -webkit-backdrop-filter: none; backdrop-filter: none; } /* stop everything that perpetually re-paints */ .phone, .chip-1, .chip-2 { animation: none; } .scan { animation: none; top: 0; opacity: .3; } .scroll-hint span, .eyebrow .dot { animation: none; } /* marquee: keep the scroll (it's the page's pulse) but drop the per-word gradient animation + hue-flow that are surprisingly expensive */ .marquee { animation: none; background: rgba(255,109,61,.06); } .marquee::after { display: none; } .marquee-track span { animation: none; background-position: 0 0; } .marquee-track i { animation: none; } .marquee-track.rev span { animation: none; } } /* ============================ EDITORIAL HERO ============================ The landing hero is a calm center wrapped by an endless stream of clips. The rail is intentionally larger than the viewport: cropping is part of the composition, not an overflow bug. */ :root[data-theme="light"] { --canvas: #f1efe9; --canvas-soft: #f7f5f0; --ink: #171715; --ink-soft: #35332f; --muted: #77736b; --line-editorial: rgba(23, 23, 21, .13); --surface-editorial: #fffefa; --clipsy-orange: #ff4f2f; --clipsy-orange-dark: #d93b20; --signal-yellow: #f3e86d; --deep-panel: #1c1c1b; } body { background: var(--canvas, #f1efe9); color: var(--ink, #171715); } .bg { z-index: 0; background: var(--canvas, #f1efe9); } .bg .aurora { display: none; } .bg .grid { opacity: 1; background-image: radial-gradient(rgba(23, 23, 21, .11) .8px, transparent .8px); background-size: 16px 16px; mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.78) 52%, transparent 92%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.78) 52%, transparent 92%); } .bg .grain { opacity: .035; } .announcement { position: relative; z-index: 60; min-height: 34px; display: flex; justify-content: center; align-items: center; gap: 9px; padding: 8px 18px; background: var(--deep-panel, #1c1c1b); color: rgba(255,255,255,.84); font-size: 12px; line-height: 1.2; letter-spacing: .01em; } .announcement a { color: var(--clipsy-orange, #ff4f2f); font-weight: 700; } .announcement a:hover { color: #ff826b; } #nav { position: sticky; top: 10px; z-index: 55; width: min(100% - 34px, 1360px); height: 50px; /* Leave a deliberate breathing gap before the hero starts. */ margin: 14px auto 24px; padding: 0; gap: 20px; } #nav::before { display: block; content: ""; position: absolute; z-index: -1; inset: -12px calc(50% - 50vw) -22px; pointer-events: none; opacity: 0; background: linear-gradient( 180deg, rgba(241,239,233,.98) 0%, rgba(241,239,233,.88) 52%, rgba(241,239,233,0) 100% ); border-bottom: 1px solid rgba(23,23,21,.08); border-radius: 0 0 50% 50% / 0 0 28px 28px; filter: blur(1px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .25s ease; } #nav.stuck::before { opacity: 1; } #nav .brand { height: 50px; padding: 0 16px; gap: 9px; border-radius: 10px; background: var(--deep-panel, #1c1c1b); color: #fff; box-shadow: 5px 6px 0 rgba(23,23,21,.12), 0 11px 24px rgba(23,23,21,.13), inset 0 1px 0 rgba(255,255,255,.1); transition: transform .25s ease, box-shadow .25s ease; } #nav .brand:hover { transform: translateY(-1px); } #nav.stuck .brand { box-shadow: 5px 7px 0 rgba(23,23,21,.16), 0 15px 28px rgba(23,23,21,.18), inset 0 1px 0 rgba(255,255,255,.1); } #nav .brand svg { color: #fff; } #nav .brand-mark { flex: 0 0 26px; width: 26px; height: 26px; } #nav .nav-links { margin-left: 4px; gap: 21px; color: #5f5a52; } #nav .nav-links a:hover { color: var(--ink, #171715); } #nav .nav-links a::after { background: var(--clipsy-orange, #ff4f2f); } .nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .sign-in { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid rgba(23,23,21,.2); border-radius: 9px; background: rgba(255,255,255,.18); color: #3f3b35; font-size: 13px; font-weight: 650; transition: transform .2s ease, background .2s ease, border-color .2s ease; } .sign-in:hover { transform: translateY(-1px); background: rgba(255,255,255,.5); border-color: rgba(23,23,21,.38); } #nav .cta.sm { height: 40px; margin-left: 0; padding: 0 17px; border-radius: 9px; background: var(--clipsy-orange, #ff4f2f); color: #fff; box-shadow: 0 10px 24px rgba(217,59,32,.22); } a:focus-visible, button:focus-visible { outline: 3px solid rgba(255,79,47,.6); outline-offset: 4px; } .hero { position: relative; isolation: isolate; width: 100%; max-width: none; min-height: min(760px, calc(100vh - 76px)); margin: 0; padding: 48px 18px 82px; display: block; overflow: hidden; } .hero-copy { position: relative; z-index: 12; width: min(900px, calc(100% - 40px)); min-height: 515px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -80px -150px; pointer-events: none; background: radial-gradient(ellipse at center, rgba(241,239,233,.99) 0%, rgba(241,239,233,.96) 42%, rgba(241,239,233,.72) 63%, transparent 79%); } .hero .eyebrow { border-color: var(--line-editorial, rgba(23,23,21,.13)); background: rgba(255,255,255,.34); color: var(--muted, #77736b); text-transform: uppercase; letter-spacing: .09em; font-size: 10px; font-weight: 650; } .hero .eyebrow .dot { background: var(--clipsy-orange, #ff4f2f); } .hero h1 { max-width: none; margin: 23px 0 22px; font-family: var(--serif, Georgia, serif); font-size: clamp(50px, 5.8vw, 88px); line-height: .92; letter-spacing: -.065em; font-weight: 400; background: none; color: var(--ink, #171715); -webkit-text-fill-color: currentColor; } @media (min-width: 761px) { .hero h1 { white-space: nowrap; } } .hero h1 em { font-family: inherit; font-style: normal; color: var(--clipsy-orange, #ff4f2f); background: none; -webkit-text-fill-color: currentColor; } .hero .lede { max-width: 54ch; color: var(--ink-soft, #35332f); font-size: 16px; line-height: 1.55; } .hero-cta { margin: 29px 0 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .hero .cta.lg { min-height: 54px; padding: 0 25px; border-radius: 11px; background: var(--clipsy-orange, #ff4f2f); color: #fff; box-shadow: 0 16px 35px rgba(217,59,32,.25), inset 0 1px 0 rgba(255,255,255,.25); } .hero .cta.lg:hover { background: var(--clipsy-orange-dark, #d93b20); } .hero-input-hint { color: var(--muted, #77736b); font-size: 12px; } .platform-row { display: flex; gap: 14px; color: var(--muted, #77736b); font-size: 11px; letter-spacing: .02em; } .hero-rails { position: absolute; z-index: 4; inset: -110px 0 -100px; display: flex; justify-content: space-between; pointer-events: none; } .media-rail { position: relative; width: clamp(190px, 23vw, 318px); height: 1100px; overflow: hidden; mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 87%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 87%, transparent 100%); } .rail-left { transform: rotate(-8deg) translateX(-62px); transform-origin: 50% 50%; } .rail-right { transform: rotate(8deg) translateX(62px); transform-origin: 50% 50%; } .rail-track { display: flex; flex-direction: column; gap: 19px; will-change: transform; } .rail-left .rail-track { animation: clipsy-rail-up 36s linear infinite; } .rail-right .rail-track { animation: clipsy-rail-down 39s linear infinite; transform: translateY(-50%); } @keyframes clipsy-rail-up { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes clipsy-rail-down { from { transform: translateY(-50%); } to { transform: translateY(0); } } .media-card { position: relative; pointer-events: auto; flex: 0 0 auto; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid rgba(23,23,21,.22); border-radius: 17px; background: #272522; box-shadow: 0 24px 48px rgba(23,23,21,.18), 0 2px 0 rgba(255,255,255,.22) inset; transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease; } .media-card::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent 25%, transparent 54%, rgba(0,0,0,.75) 100%); } .media-card img, .media-card video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.3,1), filter .35s ease; } .media-card video { cursor: pointer; } .media-card.is-previewing { transform: scale(1.035); box-shadow: 0 30px 58px rgba(23,23,21,.3), 0 0 0 2px var(--clipsy-orange, #ff4f2f); } .media-card.is-previewing img, .media-card.is-previewing video { transform: scale(1.045); filter: saturate(1.08); } .card-type, .card-time, .output-badge, .output-meta, .source-caption, .caption { position: absolute; z-index: 3; } .card-type, .card-time, .output-badge { top: 12px; padding: 5px 8px; border-radius: 999px; background: rgba(23,23,21,.72); color: #fff; font-size: 9px; line-height: 1; letter-spacing: .04em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .card-type { left: 12px; } .card-time { right: 12px; color: rgba(255,255,255,.78); } .source-caption { right: 13px; bottom: 18px; left: 13px; color: #fff; font-size: clamp(14px, 1.5vw, 20px); line-height: 1.04; letter-spacing: -.035em; font-family: var(--serif, Georgia, serif); } .output-badge { left: 12px; color: #ffe6d8; border: 1px solid rgba(255,79,47,.52); } .output-meta { right: 12px; bottom: 13px; color: rgba(255,255,255,.78); font-size: 9px; letter-spacing: .04em; } .caption { left: 13px; right: 13px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); } .caption.large { bottom: 43px; font-family: var(--display, sans-serif); font-size: clamp(20px, 2.5vw, 32px); line-height: .88; font-weight: 800; letter-spacing: -.07em; text-transform: uppercase; } .caption.large em { color: #ff8d71; font-family: var(--serif, Georgia, serif); font-weight: 400; text-transform: none; } .caption.lower { bottom: 40px; font-size: 13px; line-height: 1.15; font-weight: 650; } .caption.karaoke { bottom: 45px; text-align: center; font-family: var(--display, sans-serif); font-size: 17px; font-weight: 800; text-transform: uppercase; } .caption.karaoke i { color: var(--clipsy-orange, #ff4f2f); font-style: normal; } .caption.highlight { bottom: 55px; text-align: center; font-family: var(--display, sans-serif); font-size: 20px; font-weight: 800; letter-spacing: -.05em; color: var(--signal-yellow, #f3e86d); } .hero .scroll-hint { display: none; } /* Give the sections beneath the hero the same paper-like continuity. */ .marquee { background: rgba(255,255,255,.22); border-color: var(--line-editorial, rgba(23,23,21,.13)); } .section { position: relative; } .section h2, .final h2 { color: var(--ink, #171715); } .kicker { color: var(--clipsy-orange, #ff4f2f); } .step, .feat, .price-card, .local-card { background: rgba(255,255,255,.42); border-color: var(--line-editorial, rgba(23,23,21,.13)); } .step:hover, .feat:hover, .price-card:hover { border-color: rgba(255,79,47,.45); } .final { background: var(--deep-panel, #1c1c1b); } /* The landing page is the light editorial surface. These explicit pricing tokens prevent the legacy dark-mode rules above from lowering contrast. */ .pricing-section .price-card { color: var(--ink, #171715); background: rgba(255,255,255,.88); border-color: var(--line-editorial, rgba(23,23,21,.13)); box-shadow: 0 18px 42px rgba(23,23,21,.06); } .pricing-section .price-card.featured { color: var(--ink, #171715); background: radial-gradient(90% 55% at 50% 0%, rgba(255,79,47,.14), transparent 70%), rgba(255,255,255,.94); border-color: rgba(255,79,47,.72); box-shadow: 0 24px 58px rgba(217,59,32,.16); } .pricing-section .price-card.business { color: var(--ink, #171715); background: linear-gradient(145deg, rgba(47,123,255,.08), transparent 48%), rgba(255,255,255,.88); } .pricing-section .price-card .price b, .pricing-section .price-card .price-volume strong { color: var(--ink, #171715); } .pricing-section .price-card .price span, .pricing-section .price-card .price-volume, .pricing-section .price-card ul { color: var(--muted, #77736b); } .pricing-section .price-card .price-volume { border-bottom-color: var(--line-editorial, rgba(23,23,21,.13)); } .pricing-section .price-cta { color: var(--ink, #171715); border-color: rgba(23,23,21,.2); background: rgba(255,255,255,.34); } .pricing-section .price-cta.primary { color: #1c1c1b; background: var(--clipsy-orange, #ff4f2f); border-color: var(--clipsy-orange, #ff4f2f); } .pricing-section .price-cta.disabled { color: var(--muted, #77736b); } .pricing-section .topup-note { color: var(--muted, #77736b); border-color: rgba(23,23,21,.55); } /* The final CTA is the one intentional dark panel on the light page. Keep its type light instead of inheriting the light-surface heading gradient. */ :root[data-theme="light"] .final h2 { background: linear-gradient(180deg, #fff 42%, #c9d0d7); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .final > p { color: rgba(255,255,255,.72); } .final .fine { color: rgba(255,255,255,.48); } @media (max-width: 1100px) { .hero-rails { inset-inline: -30px; } .rail-left { transform: rotate(-8deg) translateX(-94px); } .rail-right { transform: rotate(8deg) translateX(94px); } .media-rail { width: clamp(170px, 22vw, 250px); } .hero-copy { width: min(600px, 100%); } } @media (max-width: 760px) { #nav { width: calc(100% - 24px); top: 8px; margin-top: 10px; } #nav::before { inset: -12px calc(50% - 50vw) -20px; border-radius: 0 0 50% 50% / 0 0 22px 22px; } #nav .nav-links { display: none; } #nav .brand { padding-inline: 14px; } .sign-in { display: none; } #nav .cta.sm { padding-inline: 14px; } .hero { min-height: 760px; padding-top: 58px; } .hero-copy { min-height: 620px; } .hero-copy::before { inset: -80px -20px; background: radial-gradient(ellipse at center, rgba(241,239,233,.99) 0%, rgba(241,239,233,.94) 58%, transparent 82%); } .hero h1 { font-size: clamp(48px, 14vw, 72px); } .hero .lede { max-width: 39ch; font-size: 15px; } .hero-rails { inset: 10px -85px -30px; opacity: .83; } .media-rail { width: 145px; height: 850px; } .rail-left { transform: rotate(-6deg) translateX(-16px); } .rail-right { transform: rotate(6deg) translateX(16px); } .rail-track { gap: 12px; } .media-card { border-radius: 13px; } .card-type, .card-time, .output-badge, .output-meta { font-size: 8px; } .source-caption { font-size: 15px; } .caption.large { font-size: 23px; } .caption.karaoke { font-size: 13px; } .platform-row { font-size: 10px; gap: 9px; } .hero .scroll-hint { display: none; } } @media (prefers-reduced-motion: reduce) { .rail-left .rail-track, .rail-right .rail-track { animation: none; transform: none; } .media-card, .media-card img, .media-card video { transition: none; } }