/* ============================================================================ ChatScale — design system ---------------------------------------------------------------------------- Light on Tailwind's slate ramp. The brand gradient comes straight off the logo mark and is spent in three places only. Four rules keep this from drifting back into the generic dark-neon look: 1. The gradient is a SURFACE, never text and never a border. It appears on the logo, the primary button, and the pay ladder. Nowhere else. 2. One typeface. Plus Jakarta Sans carries display, body and the numeric readouts; weight, size and tabular figures do all the hierarchy work. No second family, no mono, no italic accent, no serif. 3. No decorative eyebrows. Labels are sentence-case Plus Jakarta, not letterspaced uppercase mono, and sections are not numbered in the margin. 4. Contrast rhythm comes from full-bleed slate-950 blocks between light sections — not from glows, blurred aurora or gradient borders. ========================================================================== */ /* ---------- tokens ---------- */ :root { /* paper */ --paper: #ffffff; --paper-2: #faf9fd; /* the homepage's page ground */ --paper-3: #f3f1f9; /* ink */ --ink: #0b0421; /* the homepage's ink */ --ink-2: #4a4363; /* body copy on the homepage */ --muted: #565273; --muted-2: #9a94b4; /* rules */ --line: #eae7f2; --line-2: #ddd8ea; /* dark blocks */ --dark: #0b0421; --dark-2: #0f172a; /* slate-900 */ --dark-3: #1e293b; /* slate-800 */ --on-dark: #f1f5f9; --on-dark-2:#94a3b8; /* brand — the logo mark is the only coloured thing on the page. Its mint-to-pink sweep reads as a mark at 26px; stretched across buttons and bars it just looked like a rainbow. Every control is slate instead, which is both more premium and higher contrast than a hue could be. Colour is reserved for meaning: green for live, emerald for pass, rose for fail. */ --brand: #0f172a; /* slate-900 */ --brand-2: #334155; /* slate-700 */ --brand-3: #020617; /* slate-950 */ --brand-tint: var(--paper-3); --brand-ring: rgba(2, 6, 23, .14); --brand-glow: rgba(2, 6, 23, .45); /* Solid faces. Depth comes from a 1px inner top highlight and layered shadows — never from a blended fill. This stylesheet contains no blended fills at all, and it should stay that way. */ --brand-face: var(--brand); --brand-face-hi: #1e293b; /* slate-800 */ /* The mark's own mint, sampled off logo.png (its sweep runs #22ffcd -> #29deff -> #5340fb). Used at full strength and sparingly — the nav CTA and the answers-page category markers. */ --brand-mark: #22ffcd; /* interface accent — links, focus, labels */ --accent: #0b0421; --ok: #047857; /* emerald-700 */ --bad: #be123c; /* rose-700 */ --warn: #b45309; /* amber-700 */ /* type */ --f: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* metrics */ --gutter: clamp(18px, 4vw, 44px); --maxw: 1280px; --maxw-text: 68ch; --r: 14px; --r-sm: 10px; --section-y: clamp(64px, 9vw, 128px); --ease: cubic-bezier(.22, 1, .36, 1); /* elevation — the homepage's: a tight contact shadow plus one wide, lifted one, tinted with the page ink, never black and never a plain blur */ --sh-sm: 0 1px 2px rgba(11, 4, 33, .04); --sh: 0 1px 2px rgba(11, 4, 33, .03), 0 12px 32px -18px rgba(11, 4, 33, .22); --sh-lg: 0 1px 2px rgba(15, 23, 42, .06), 0 18px 40px -22px rgba(15, 23, 42, .30); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* `clip`, not `hidden`: hidden on would make it a scroll container and break the sticky nav. clip stops the viewport drifting sideways when a wide child (the chat screenshots) overflows its own scroller. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f); font-size: 18px; line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } [hidden] { display: none !important; } ::selection { background: #c7d2fe; color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------- typography ---------- */ h1, h2, h3, h4, h5 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; color: var(--ink); } .d1 { font-size: clamp(2.75rem, 6.5vw, 5.25rem); line-height: 1.02; letter-spacing: -0.042em; } .d2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.038em; } .d3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.18; letter-spacing: -0.03em; } .lead { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.6; color: var(--muted); max-width: 58ch; margin: 0; font-weight: 400; text-wrap: pretty; } p { margin: 0 0 1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } strong, b { font-weight: 700; color: var(--ink); } /* the only label style — sentence case, no letterspacing, no mono */ .label { display: inline-block; font-size: 1rem; font-weight: 600; color: var(--accent); margin-bottom: 14px; letter-spacing: -0.008em; } .muted { color: var(--muted); } .dim { color: var(--muted-2); } /* ---------- layout ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } section { position: relative; } .sec { padding-block: var(--section-y); scroll-margin-top: 88px; } .sec-tint { background: var(--paper-2); } .sec-line { border-top: 1px solid var(--line); } /* full-bleed dark block — the contrast rhythm of the page */ .sec-dark { background: var(--dark); color: var(--on-dark); } .sec-dark h1, .sec-dark h2, .sec-dark h3, .sec-dark h4 { color: #fff; } .sec-dark .lead, .sec-dark p { color: var(--on-dark-2); } .sec-dark strong { color: #fff; } .sec-dark .label { color: #cbd5e1; } .sec-head { max-width: 62ch; margin-bottom: clamp(34px, 4.5vw, 58px); } .sec-head .lead { margin-top: 18px; } /* editorial two-column: heading holds the left, content runs right */ .split-2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 76px); align-items: start; } .split-2 > .sticky { position: sticky; top: 104px; } @media (max-width: 880px) { .split-2 { grid-template-columns: 1fr; gap: 32px; } .split-2 > .sticky { position: static; } } /* ---------- buttons ---------------------------------------------------------- Depth comes from four stacked cues, the way a real UI kit does it: a faint vertical face shade, a 1px inner top highlight, a tight contact shadow, and a wide tinted glow. Hover lifts the whole stack rather than just swapping a colour. */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border: 1px solid transparent; border-radius: 999px; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.012em; line-height: 1.25; cursor: pointer; white-space: nowrap; transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .22s var(--ease), opacity .18s; } .btn:active { transform: translateY(0) scale(.99); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; box-shadow: none; } /* default face — a .btn with no variant is the dark heavyweight, never blank */ .btn, .btn-dark { background: var(--brand); color: #fff; border-color: #020617; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(2, 6, 23, .22), 0 10px 24px -12px rgba(2, 6, 23, .55); } .btn:hover, .btn-dark:hover { background: var(--brand-face-hi); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 4px rgba(2, 6, 23, .22), 0 16px 32px -14px rgba(2, 6, 23, .6); } /* primary — the brand hue */ /* the same face as the nav's Apply button: slate, a 1px inner highlight and nothing else. No outer shadow, no glow. */ .btn-primary { background: var(--brand-face); color: #f8fafc; border-color: var(--brand-face); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10); } .btn-primary:hover { background: var(--brand-face-hi); border-color: var(--brand-face-hi); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17); } /* On a dark block the primary inverts to white — a slate button on slate is invisible, and white is the strongest call to action a dark section has. */ .sec-dark .btn-primary, .cta.sec-dark .btn-primary { background: #ffffff; color: #020617; border-color: #ffffff; box-shadow: none; } .sec-dark .btn-primary:hover { background: #e2e8f0; border-color: #e2e8f0; transform: translateY(-2px); box-shadow: none; } /* ghost — white card on light, translucent on dark */ /* the homepage's outline control: paper face, hairline, lilac tint on hover */ .btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line-2); box-shadow: none; } .btn-ghost:hover { background: #f2eefb; border-color: #cabfe4; transform: translateY(-1px); } .sec-dark .btn-ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } .sec-dark .btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .32); } .btn-sm { padding: 8px 15px; font-size: 0.9375rem; gap: 6px; } .btn-lg { padding: 15px 30px; font-size: 1.125rem; } .btn-block { width: 100%; } /* quiet text link */ .tlink { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.012em; color: var(--brand); transition: gap .2s var(--ease), color .2s; } .tlink { border-bottom: 1.5px solid var(--line-2); padding-bottom: 2px; } .tlink:hover { gap: 11px; border-bottom-color: var(--ink); } .sec-dark .tlink { color: #fff; border-bottom-color: rgba(255,255,255,.3); } .sec-dark .tlink:hover { border-bottom-color: #fff; } /* ---------- nav ---------- The floating bar lives in assets/nav.css and every page loads it; the old sticky .nav bar that used to be here is gone. ---------- */ /* ---------- footer (same sheet as the homepage; the source of truth for the rules is the .ft block in index.html — keep the two in step) ---------- */ .ft { position: relative; z-index: 5; overflow: hidden; /* Neutral tints. These were violet-cast greys, which is the same mistake the ground made: a hue that has been muted toward grey reads as dirty rather than as quiet. Colour is spent at full strength on the wordmark, the live dot and the halftone — nowhere else. */ --ft-ink: #f4f4f7; /* headings */ --ft-body: #a9a8b6; /* links, description */ --ft-dim: #8a8996; /* legal small print */ --ft-line: rgba(255,255,255,.10); --ft-hot: #5eead4; /* the mark's mint, for interaction only */ /* A near-neutral ink, with only a whisper of violet left in it (10,9,15) so it stays related to the page without carrying a purple cast. Two earlier grounds failed here for the same reason. #0a0320 was a muted violet and read as a dead patch; ramping into it from the light section above was worse, because blending any saturated hue toward a near-white ground runs it through desaturated midtones — the muddy band you get is unavoidable in sRGB, whatever the hue. So there is no ramp: the sheet meets the light section on a crisp edge, and the only softening is the 1px inner highlight along its lip. No outer shadow either — a black shadow spreading onto a near-white ground is precisely the grey smudge this is replacing. */ background: #0a090f; color: var(--ft-body); /* the card-to-page arrival comes from the seam rules in the walkthrough block; only the hairline is the footer's own */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11); padding: clamp(34px, 3.6vw, 46px) 24px clamp(22px, 2.4vw, 26px); } /* the hero's three stops — mint, hot pink, violet — at low alpha, so the footer is lit by the same palette as the top of the page instead of being a flat black rectangle. Strongest at the top, where it takes over from the ramp above. */ .ft::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 50% at 16% 0%, rgba(139, 92, 246, .13) 0%, transparent 70%), radial-gradient(52% 46% at 87% 6%, rgba(232, 71, 177, .08) 0%, transparent 72%), radial-gradient(60% 55% at 52% 104%, rgba(94, 234, 212, .07) 0%, transparent 72%); } .ft__wrap { position: relative; max-width: 1240px; margin-inline: auto; } /* logo.png sampled into a 30-column halftone — dot area tracks the mark's coverage. Texture, not a second logo. */ /* The halftone is the logo mark — ascending bars, sampled from logo.png into a 30-column dot field. It used to be bled off the bottom-right corner and masked at the edges, so what actually reached the page was an unrecognisable fragment of dots; the mark only reads as a mark when you can see all of it. So: shown whole, no mask, sitting inside .ft__wrap rather than the full-bleed footer so its right edge lines up with the link columns and the legal bar. Opacity is up, because a complete mark can carry more presence than a cropped smudge could. */ .ft__dots { position: absolute; right: 0; bottom: 0; width: clamp(104px, 12vw, 142px); height: auto; /* The gradient is userSpaceOnUse for a reason. SVG's default is objectBoundingBox, and because `fill` is inherited by every , that resolved the whole mint-to-pink sweep inside each individual ~9px dot — which averages to the stop in the middle. The result was 334 dots all painted the same flat violet, which is what made the mark look muddy and lifeless. Mapped across the viewBox instead, the sweep runs along the bars the way it does in the logo: mint at the low end, pink at the top. */ fill: url(#ftDotSweep); opacity: .42; pointer-events: none; user-select: none; } /* Narrow: the columns stack, so the mark would land on top of them. Park it against the legal bar, where the stacked layout leaves a gap. */ @media (max-width: 700px) { .ft__dots { width: 84px; opacity: .26; } } .ft__top { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; } @media (min-width: 1024px) { .ft__top { flex-direction: row; align-items: flex-start; } } .ft__brand { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 13px; } .ft__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .ft__logo img { height: 30px; width: 30px; display: block; } .ft__logo h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--ft-ink); } .ft__desc { margin: 0; max-width: 38ch; font-size: 16px; line-height: 1.65; color: var(--ft-body); } /* The page opens on "Chat to get rich." and now closes on it, carrying the mark's own mint-to-pink sweep. The brand column was 131px shorter than the link columns beside it, which left a hole in the left half of the sheet; this fills it with the one line the page is actually about rather than with filler. */ .ft__tag { margin: -2px 0 0; font-size: clamp(27px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; /* background-clip:text only paints inside the box, and at this line height the box ends above the g's descender, which came out cut. The padding gives the gradient somewhere to paint the tail; the negative margin hands that height straight back so nothing below moves. */ padding-bottom: .18em; margin-bottom: -.18em; background: linear-gradient(100deg, #5eead4 0%, #a78bfa 48%, #e847b1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* The footer's call to action, replacing the "Start your application" card that used to run across the top of it. That card cost ~190px of height to collect an address the applicant retypes on the Fillout form anyway — its only other job was to navigate here. A button does that in one line. */ .ft__cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; background: var(--ft-ink); color: #0a090f; font-size: 16px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(244,244,247,.5); transition: background-color .16s, transform .16s cubic-bezier(.22,1,.36,1); } /* The face stays put. The glow behind it is the hover signal now, and a pill that also turns mint is a second cue competing with it - the exact colour-swap this was meant to replace. It also disagreed with the hero CTA, which only brightens. Same action, one behaviour. */ .ft__cta:hover { background: #fff; transform: translateY(-1px); } /* ── CTA glow ──────────────────────────────────────────────────────────── Technique from the flame/rainbow buttons on 21st.dev: a blurred gradient layer sitting behind the control, not painted onto it. That distinction is the whole design decision. styles.css records that the mint-to-pink sweep was already tried ON buttons and rejected - "stretched across buttons and bars it just looked like a rainbow", which is exactly what the rainbow-button component does. So the face stays white: it is the highest-contrast thing a dark section can offer, and that note is right. The sweep only appears as diffuse light BEHIND the pill, where it reads as the logo's colour spilling rather than as a coloured control. It idles at low opacity so the button is never dead, wakes on hover, and the gradient drifts so the light moves rather than just brightening. The drift is the part a plain colour swap cannot do. */ /* The glow lives on a WRAPPER, not on the button. It has to: the button lifts on hover with translateY, any transform makes an element its own stacking context, and a z-index:-1 pseudo inside one paints on top of its parent's background instead of behind it. The face stayed white at rest and turned pink the moment you hovered. The wrapper never transforms, so the halo stays behind the pill in both states. */ .glow-wrap { position: relative; display: inline-flex; border-radius: 999px; } .glow-wrap::before { content: ''; position: absolute; z-index: -1; inset: -3px; border-radius: inherit; /* The mark's real sweep, sampled off logo.png: mint -> cyan -> indigo. nav.css records that the "mint-to-pink" wording in styles.css is wrong about the hue, and the map arcs use that wrong pair. A halo whose whole job is to read as the logo spilling has to use the logo's colours. */ background: linear-gradient(90deg, #22ffcd, #29deff, #5340fb, #29deff, #22ffcd); background-size: 200% 100%; filter: blur(11px); opacity: .34; transition: opacity .28s ease, filter .28s ease; /* The halo is always lit; only the motion waits for interaction. Most of this page's traffic is paid social - the acquisition script tags telegram, instagram and tiktok - so it is mostly touch, where hover never fires. A hover-only glow would not exist for the people we paid to get here. Perpetual drift is the part that reads cheap, not the light, so it idles paused and runs as the reward for reaching for it. */ animation: glowDrift 6s linear infinite; animation-play-state: paused; } .glow-wrap:hover::before, .glow-wrap:focus-within::before { opacity: .72; filter: blur(15px); animation-play-state: running; } /* No hover to reward on touch, so the resting state carries more of it */ @media (hover: none) { .glow-wrap::before { opacity: .5; } } @keyframes glowDrift { from { background-position: 0% 50%; } to { background-position: 200% 50%; } } /* the halo is decoration; without motion it holds a steady state instead */ @media (prefers-reduced-motion: reduce) { .glow-wrap::before { animation: none; transition: none; } } .ft__cta svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.4; fill: none; } @media (prefers-reduced-motion: reduce) { .ft__cta { transition: none; } } .ft__cols { display: grid; width: 100%; gap: 28px; } @media (min-width: 768px) { .ft__cols { grid-template-columns: repeat(2, 1fr); } } /* the right slot is the halftone's; reserving it here is what lets the mark sit at full size without a longer link ever reaching it */ @media (min-width: 1024px) { .ft__cols { gap: 64px; padding-right: 168px; } } .ft__cols h3 { margin: 0 0 11px; font-size: 16px; font-weight: 700; color: var(--ft-ink); } .ft__cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .ft__cols a { font-size: 16px; font-weight: 500; color: var(--ft-body); text-decoration: none; transition: color .16s; } .ft__cols a:hover { color: var(--ft-hot); } .ft__bar { margin-top: 16px; padding: 16px 0 0; border-top: 1px solid var(--ft-line); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 500; color: var(--ft-dim); } @media (min-width: 768px) { .ft__bar { flex-direction: row; align-items: center; } } .ft__bar p { margin: 0; order: 2; } @media (min-width: 1024px) { .ft__bar p { order: 1; } } .ft__bar ul { list-style: none; margin: 0; padding: 0; order: 1; display: flex; gap: 18px; flex-wrap: wrap; } @media (min-width: 768px) { .ft__bar ul { order: 2; } } .ft__bar a { color: inherit; text-decoration: none; transition: color .16s; } .ft__bar a:hover { color: var(--ft-hot); } /* ---------- footer seam ---------- The footer is a sheet that arrives over the section above it, on the same one-number system the homepage runs for .walk and .ft: --seam goes 0 → 1 as the footer's top edge travels from the bottom of the viewport to a quarter of the way up, and three crisp things ride on it — the sheet starts inset from both sides with deeper corners and lands full bleed at the resting radius, a short strip of the brand gradient crosses the top edge once and leaves, and the copy settles up a beat after the ground. No fades. This lived only in the homepage's inline