/* ========================================================================== clik-home.css — Clik Work home/landing reskin -------------------------------------------------------------------------- Design source of truth: Test html/clikwork-home-final.html Token VALUES are lifted verbatim from that mockup. Selectors are namespaced under `.cw-home` and `cw-` prefixes ONLY to avoid collisions with the shell's generic .card/.nav/.user/.search/footer rules in styles.css and the module CSS — no color, spacing, or font value is re-derived. Fonts are the vendored, self-hosted Selawik faces declared in theme.css (/vendor/selawik/*.woff2, font-src 'self'). No CDN. ========================================================================== */ /* ---- Tokens (verbatim from the mockup, scoped to the home) --------------- */ .cw-home { --brand: #5B5FC7; --brand-dark: #4F52B2; --brand-tint: #EEEDFE; --ink: #262433; --muted: #5b5870; --faint: #8a8896; --line: #E9E7F2; --paper: #fff; /* Inherit the one canonical, system-first stack (theme.css --font-base) so the home renders the OS-native font — San Francisco on macOS, matching the mockup — instead of the vendored Selawik. */ --font: var(--font-base); font-family: var(--font); color: var(--ink); background: #fff; } .cw-home *, .cw-home *::before, .cw-home *::after { box-sizing: border-box; } .cw-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; } .cw-sec-lab { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px 2px; } /* ===== TOP NAV ===== */ .cw-nav { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); height: 66px; display: flex; align-items: center; padding: 0 28px; gap: 16px; } .cw-logo { display: flex; align-items: center; gap: 10px; font-size: 19px; cursor: pointer; } .cw-logo .cw-sq { width: 30px; height: 30px; border-radius: 8px; background: var(--brand); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; } .cw-logo span { font-weight: 400; } .cw-logo b { font-weight: 700; } .cw-spacer { flex: 1; } .cw-navitem { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); padding: 9px 13px; border-radius: 9px; cursor: pointer; white-space: nowrap; background: none; border: 0; } .cw-navitem:hover { background: #f6f5fc; color: var(--ink); } .cw-navitem svg { color: var(--brand); } .cw-divider { width: 1px; height: 26px; background: var(--line); margin: 0 4px; } .cw-askai { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); cursor: pointer; padding: 9px 11px; border-radius: 9px; background: none; border: 0; } .cw-askai:hover { background: #f6f5fc; } .cw-user { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 5px; cursor: pointer; background: #fff; } .cw-user .cw-av { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .cw-user .cw-nm { font-size: 13.5px; font-weight: 500; } .cw-iconbtn { position: relative; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--brand); cursor: pointer; transition: background .15s; background: none; border: 0; } .cw-iconbtn:hover { background: #f6f5fc; } .cw-iconbtn .cw-badge { position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #E5484D; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; } .cw-iconbtn .cw-tip { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); background: #262433; color: #fff; font-size: 11.5px; font-weight: 500; padding: 4px 9px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .15s; z-index: 40; } .cw-iconbtn:hover .cw-tip { opacity: 1; } /* ===== HERO (pure white, Apple black text) ===== */ .cw-hero { position: relative; background: #fff; padding: 84px 24px 72px; text-align: center; } .cw-hero .cw-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; } .cw-hero .cw-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #86868b; margin-bottom: 18px; } .cw-hero h1 { font-size: clamp(40px, 6vw, 48px); font-weight: 700; letter-spacing: -.03em; line-height: 1.03; color: #1d1d1f; } /* Prototype-matched recruitment headline + sub sizes (supersedes the +15% rule). */ .cw-hero h1.cw-loggedout-only { font-size: clamp(33px, 4.8vw, 54px); line-height: 1.06; letter-spacing: -.02em; } .cw-hero p { font-size: 19px; color: #6e6e73; max-width: 60em; margin: 18px auto 0; line-height: 1.45; } .cw-hero p.cw-loggedout-only { font-size: clamp(16px, 1.9vw, 19px); max-width: 740px; } .cw-search-wrap { position: relative; max-width: 600px; margin: 34px auto 0; text-align: left; } .cw-search { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: 16px; padding: 14px 14px 14px 22px; box-shadow: 0 10px 34px -12px rgba(0,0,0,.20), 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .2s; } .cw-search:hover, .cw-search:focus-within { box-shadow: 0 16px 44px -14px rgba(0,0,0,.26), 0 1px 2px rgba(0,0,0,.05); } .cw-search > svg { color: #86868b; flex: 0 0 auto; } .cw-search .cw-search-input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 16px; color: var(--ink); } .cw-search .cw-search-input::placeholder { color: #86868b; } .cw-search .cw-search-input::-webkit-search-cancel-button { -webkit-appearance: none; } .cw-search .cw-aibtn { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: #fff; background: var(--brand); padding: 10px 15px; border-radius: 11px; flex: 0 0 auto; border: 0; cursor: pointer; } .cw-search .cw-aibtn:hover { background: var(--brand-dark); } /* Federated search dropdown */ .cw-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.06); max-height: min(62vh, 520px); overflow-y: auto; padding: 6px; } .cw-sr-group-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); padding: 12px 12px 6px; } .cw-sr-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: 10px; cursor: pointer; text-align: left; } .cw-sr-row:hover, .cw-sr-row.is-active { background: #f6f5fc; } .cw-sr-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; } .cw-sr-ic svg { width: 17px; height: 17px; } .cw-sr-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cw-sr-title { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cw-sr-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cw-sr-more { margin-left: auto; flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--brand); } /* Ask-AI row (always first) */ .cw-sr-row.cw-sr-ai .cw-sr-ic { background: var(--brand); color: #fff; } .cw-sr-row.cw-sr-ai .cw-sr-title { color: var(--brand-dark); } .cw-sr-state { padding: 14px 12px; font-size: 13.5px; color: var(--muted); } .cw-sr-sep { height: 1px; background: var(--line); margin: 6px 8px; } @media (max-width: 640px) { .cw-search-results { max-height: 70vh; } } .cw-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .cw-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .cw-block { padding: 46px 0; } /* ===== MICROSOFT-STYLE ILLUSTRATED CARDS ===== */ .cw-door { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: .22s; cursor: pointer; display: flex; flex-direction: column; text-align: left; } .cw-door:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -32px rgba(91,95,199,.6); border-color: #dcd9ee; } .cw-door .cw-art { position: relative; height: 152px; overflow: hidden; } .cw-door .cw-art .cw-blob { position: absolute; border-radius: 50%; filter: blur(26px); opacity: .9; } .cw-door .cw-art .cw-ribbon { position: absolute; width: 150%; height: 62px; border-radius: 40px; background: rgba(255,255,255,.28); transform: rotate(-18deg); left: -25%; top: 46px; filter: blur(2px); } .cw-door .cw-art .cw-chip { position: absolute; left: 20px; bottom: -22px; width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: var(--brand-dark); box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); } .cw-art1 { background: linear-gradient(135deg, #6E5BE0, #8E86F0 48%, #5AA1F0); } .cw-art1 .cw-b1 { width: 160px; height: 160px; background: #E59BD8; top: -40px; right: -20px; } .cw-art2 { background: linear-gradient(135deg, #7466E2, #5AA1F0 52%, #2BC4A8); } .cw-art2 .cw-b1 { width: 150px; height: 150px; background: #8E86F0; top: -30px; left: -20px; } .cw-art3 { background: linear-gradient(135deg, #6E5BE0, #37B596 56%, #15A06B); } .cw-art3 .cw-b1 { width: 150px; height: 150px; background: #C9E58B; bottom: -50px; right: -10px; } .cw-door .cw-body { padding: 34px 24px 26px; flex: 1; display: flex; flex-direction: column; } .cw-door h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; } .cw-door p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-bottom: 16px; } .cw-door .cw-tag { align-self: flex-start; margin-top: auto; font-size: 11.5px; font-weight: 600; color: var(--brand-dark); background: var(--brand-tint); border-radius: 999px; padding: 4px 11px; } /* work surface + tool cards */ .cw-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; transition: .2s; cursor: pointer; text-align: left; } .cw-card:hover { box-shadow: 0 18px 40px -30px rgba(91,95,199,.5); } .cw-card .cw-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .cw-card h4 { font-size: 15.5px; font-weight: 600; margin-bottom: 5px; } .cw-card p { font-size: 13px; color: var(--muted); line-height: 1.5; min-height: 34px; } .cw-card .cw-stat { margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--brand); } .cw-card.cw-muted .cw-stat { color: var(--faint); } .cw-card.cw-fill { background: var(--brand); border-color: var(--brand); color: #fff; } .cw-card.cw-fill .cw-ic { background: rgba(255,255,255,.16); color: #fff; } .cw-card.cw-fill h4 { color: #fff; } .cw-card.cw-fill p { color: rgba(255,255,255,.82); } .cw-card.cw-fill .cw-stat { color: #fff; } .cw-card.cw-todo { cursor: default; } .cw-card .cw-todo-pill { display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 600; color: var(--faint); background: #f4f3fa; border-radius: 999px; padding: 3px 9px; } /* collapsible work tools */ .cw-tools-head { display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 18px 20px; background: #faf9fe; border: 1px solid var(--line); border-radius: 16px; } .cw-tools-head .cw-t { font-size: 16px; font-weight: 600; } .cw-tools-head .cw-s { font-size: 13px; color: var(--faint); } .cw-tools-head .cw-count { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--brand); background: var(--brand-tint); border-radius: 999px; padding: 4px 11px; } .cw-tools-head .cw-chev { transition: transform .25s; color: var(--muted); } .cw-tools-body { margin-top: 22px; overflow: hidden; transition: max-height .35s ease, opacity .25s, margin .25s; } .cw-tools.cw-collapsed .cw-tools-body { max-height: 0; opacity: 0; margin-top: 0; } .cw-tools.cw-collapsed .cw-tools-head .cw-chev { transform: rotate(-90deg); } .cw-grp { margin-bottom: 26px; } .cw-footer { border-top: 1px solid var(--line); margin-top: 30px; padding: 30px 0 50px; } .cw-footer .cw-row { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; } .cw-footer .cw-brand { font-size: 14px; color: var(--muted); } .cw-footer .cw-powered { display: block; margin-top: 3px; font-size: 12px; color: var(--faint); } .cw-footer .cw-links { display: flex; gap: 22px; font-size: 13.5px; color: var(--muted); } .cw-footer .cw-links a { cursor: pointer; } .cw-footer .cw-links a:hover { color: var(--ink); } @media (max-width: 900px) { .cw-grid4 { grid-template-columns: repeat(2, 1fr); } .cw-grid3 { grid-template-columns: 1fr; } .cw-navitem .cw-lbl { display: none; } } @media (max-width: 560px) { .cw-grid4 { grid-template-columns: 1fr; } } /* ===== PROSPECT STORY SECTIONS (#what-is / #onboarding / #earnings) ===== Calm, editorial long-form on the logged-out landing. Pure white, brand tokens, single --font. Anchor targets smooth-scroll from the cards/nav. */ .cw-story { padding: 64px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; } .cw-story-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; } .cw-story-h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); max-width: 820px; } .cw-story-intro { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 800px; margin-top: 16px; } .cw-story-close { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 800px; margin-top: 26px; } /* Section 1 — three supporting blocks */ .cw-story-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; } .cw-sblock { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: #fff; } .cw-sblock-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .cw-sblock h3 { font-size: 15.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; } .cw-sblock p { font-size: 13.5px; line-height: 1.55; color: var(--muted); } /* Section 2 — numbered steps */ .cw-steps { list-style: none; margin: 32px 0 0; padding: 0; max-width: 860px; display: grid; gap: 2px; } .cw-steps li { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); } .cw-steps li:last-child { border-bottom: 0; } .cw-step-n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; } .cw-step-t { font-size: 15px; line-height: 1.55; color: var(--muted); } .cw-step-t b { color: var(--ink); font-weight: 600; } /* Section 3 — four points + illustrative figures */ .cw-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 34px; max-width: 900px; } .cw-point h3 { font-size: 15.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .cw-point p { font-size: 14px; line-height: 1.55; color: var(--muted); } /* Inline brand-tint tag pill (reused from the cards) */ .cw-tag { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--brand-dark); background: var(--brand-tint); border-radius: 999px; padding: 3px 10px; } /* Illustrative / placeholder markers — easy to find ("Illustrative") + replace */ .cw-illustrative, .cw-illustrative-flag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); background: #f4f3fa; border: 1px dashed #cfcbdf; border-radius: 6px; padding: 1px 7px; } .cw-statrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; padding: 16px 18px; border: 1px dashed var(--line); border-radius: 14px; background: #faf9fe; } .cw-stat-pill { font-size: 13.5px; font-weight: 600; color: var(--brand-dark); background: var(--brand-tint); border-radius: 999px; padding: 5px 13px; } .cw-story-cta { color: var(--brand); font-weight: 600; cursor: pointer; text-decoration: none; } .cw-story-cta:hover { color: var(--brand-dark); text-decoration: underline; } /* ===== Apply form ("Work with us" section) ===== */ .cw-form-wrap { margin-top: 44px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: #faf9fe; max-width: 760px; scroll-margin-top: 90px; } .cw-form-title { font-size: 19px; font-weight: 700; color: var(--ink); } .cw-form-sub { font-size: 14px; color: var(--muted); margin: 6px 0 22px; } .cw-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cw-field { display: flex; flex-direction: column; gap: 6px; } .cw-field-full { grid-column: 1 / -1; } .cw-field label { font-size: 12.5px; font-weight: 600; color: var(--muted); } .cw-opt { font-weight: 400; color: var(--faint); } .cw-field input, .cw-field textarea { font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; } .cw-field input:focus, .cw-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(91,95,199,.14); } .cw-field textarea { resize: vertical; min-height: 74px; } .cw-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; } .cw-form-note { font-size: 12.5px; line-height: 1.5; color: var(--muted); flex: 1 1 240px; } .cw-form-note b { color: var(--ink); font-weight: 600; } /* Brand-filled apply button (used by the form submit) */ .cw-apply-btn { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: #fff; background: var(--brand); border: 0; border-radius: 12px; padding: 12px 22px; cursor: pointer; text-decoration: none; transition: background .15s ease; } .cw-apply-btn:hover { background: var(--brand-dark); } @media (max-width: 640px) { .cw-form { grid-template-columns: 1fr; } } /* Why-join — six benefit blocks (reuses .cw-story-blocks / .cw-sblock) */ .cw-why-grid { grid-template-columns: repeat(3, 1fr); } /* FAQ — native
accordion (no JS, keyboard-accessible) */ .cw-faqs { max-width: 820px; margin-top: 30px; } .cw-faq { border-bottom: 1px solid var(--line); } .cw-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; font-size: 16px; font-weight: 600; color: var(--ink); } .cw-faq summary::-webkit-details-marker { display: none; } .cw-faq summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg); transition: transform .2s ease; margin-right: 4px; } .cw-faq[open] summary::after { transform: rotate(-135deg); } .cw-faq summary:hover { color: var(--brand); } .cw-faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; } .cw-faq-a { padding: 0 2px 18px; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 760px; } @media (max-width: 900px) { .cw-story-blocks { grid-template-columns: 1fr; } .cw-why-grid { grid-template-columns: 1fr; } .cw-points { grid-template-columns: 1fr; } } /* ===== Section life: abstract art, scroll-reveal, timeline, chart ===== White background kept; motion is CSS + a tiny IntersectionObserver. All animation is gated on body.cw-anim (added by JS) so content is fully visible if JS doesn't run, and disabled under prefers-reduced-motion. */ /* Abstract floating gradient blobs (decorative, behind the content) */ .cw-has-art { position: relative; overflow: hidden; } .cw-has-art > .cw-wrap { position: relative; z-index: 1; } .cw-art-blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; } /* Brand-only palette — soft purple/lilac/blue. No green or peach washes. */ .cw-blob-a { width: 320px; height: 320px; background: radial-gradient(circle, #8E86F0, transparent 70%); top: -90px; right: -60px; } .cw-blob-b { width: 260px; height: 260px; background: radial-gradient(circle, #C7D2FE, transparent 70%); bottom: -110px; left: -70px; } .cw-blob-c { width: 300px; height: 300px; background: radial-gradient(circle, #8E86F0, transparent 70%); top: -80px; left: -70px; opacity: .42; } .cw-blob-d { width: 280px; height: 280px; background: radial-gradient(circle, #C7D2FE, transparent 70%); bottom: -120px; right: -80px; } .cw-blob-e { width: 300px; height: 300px; background: radial-gradient(circle, #8E86F0, transparent 70%); top: -90px; right: -70px; opacity: .42; } .cw-blob-f { width: 260px; height: 260px; background: radial-gradient(circle, #C7D2FE, transparent 70%); bottom: -110px; left: -60px; opacity: .42; } body.cw-anim .cw-art-blob { animation: cwFloat 16s ease-in-out infinite; } body.cw-anim .cw-blob-b, body.cw-anim .cw-blob-d, body.cw-anim .cw-blob-f { animation-duration: 21s; animation-direction: reverse; } @keyframes cwFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(26px, -22px) scale(1.12); } } /* Scroll-reveal entrance (JS tags items with .cw-reveal, adds .is-in in view) */ body.cw-anim .cw-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } body.cw-anim .cw-reveal.is-in { opacity: 1; transform: none; } /* Stagger the items inside each grid/list */ body.cw-anim .cw-story-blocks .cw-reveal:nth-child(2), body.cw-anim .cw-points .cw-reveal:nth-child(2) { transition-delay: .08s; } body.cw-anim .cw-story-blocks .cw-reveal:nth-child(3), body.cw-anim .cw-points .cw-reveal:nth-child(3) { transition-delay: .16s; } body.cw-anim .cw-story-blocks .cw-reveal:nth-child(4), body.cw-anim .cw-points .cw-reveal:nth-child(4) { transition-delay: .24s; } body.cw-anim .cw-story-blocks .cw-reveal:nth-child(5) { transition-delay: .32s; } body.cw-anim .cw-story-blocks .cw-reveal:nth-child(6) { transition-delay: .40s; } body.cw-anim .cw-timeline .cw-reveal:nth-child(2) { transition-delay: .07s; } body.cw-anim .cw-timeline .cw-reveal:nth-child(3) { transition-delay: .14s; } body.cw-anim .cw-timeline .cw-reveal:nth-child(4) { transition-delay: .21s; } body.cw-anim .cw-timeline .cw-reveal:nth-child(5) { transition-delay: .28s; } body.cw-anim .cw-timeline .cw-reveal:nth-child(6) { transition-delay: .35s; } body.cw-anim .cw-timeline .cw-reveal:nth-child(7) { transition-delay: .42s; } /* Onboarding → animated icon timeline (was a plain numbered list) */ .cw-timeline { position: relative; max-width: 760px; } .cw-timeline .cw-step { display: flex; align-items: flex-start; gap: 18px; padding: 0 0 26px; border: 0; position: relative; } .cw-timeline .cw-step:last-child { padding-bottom: 0; } /* connector line through the nodes */ .cw-timeline .cw-step::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: -4px; width: 2px; background: linear-gradient(var(--brand), var(--brand-tint)); z-index: 0; } .cw-timeline .cw-step:last-child::before { display: none; } .cw-step-node { position: relative; z-index: 1; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #8E86F0); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 22px -8px rgba(91,95,199,.6); } .cw-step-node svg { width: 21px; height: 21px; } .cw-step-num { position: absolute; top: -5px; right: -5px; width: 19px; height: 19px; border-radius: 50%; background: #fff; color: var(--brand-dark); border: 1px solid var(--line); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; } .cw-timeline .cw-step-t { padding-top: 11px; } body.cw-anim .cw-step-node { transition: transform .25s ease, box-shadow .25s ease; } body.cw-anim .cw-timeline .cw-step:hover .cw-step-node { transform: scale(1.08); box-shadow: 0 14px 28px -8px rgba(91,95,199,.7); } /* Per-step entrance choreography: the connector draws down, the icon springs in, the number badge pops, and a soft ring keeps pulsing (desynced). */ body.cw-anim .cw-timeline .cw-step::before { transform: scaleY(0); transform-origin: top; transition: transform .55s ease .12s; } body.cw-anim .cw-timeline .cw-step.is-in::before { transform: scaleY(1); } body.cw-anim .cw-timeline .cw-step .cw-step-node svg { transform: scale(0) rotate(-30deg); opacity: 0; } body.cw-anim .cw-timeline .cw-step.is-in .cw-step-node svg { animation: cwIconPop .5s cubic-bezier(.34,1.56,.64,1) .15s forwards; } @keyframes cwIconPop { to { transform: scale(1) rotate(0); opacity: 1; } } body.cw-anim .cw-timeline .cw-step .cw-step-num { transform: scale(0); } body.cw-anim .cw-timeline .cw-step.is-in .cw-step-num { animation: cwNumPop .42s cubic-bezier(.34,1.56,.64,1) .32s forwards; } @keyframes cwNumPop { to { transform: scale(1); } } .cw-step-node::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; pointer-events: none; } body.cw-anim .cw-timeline .cw-step.is-in .cw-step-node::after { animation: cwRing 2.8s ease-out infinite; } body.cw-anim .cw-timeline .cw-step:nth-child(2).is-in .cw-step-node::after { animation-delay: .4s; } body.cw-anim .cw-timeline .cw-step:nth-child(3).is-in .cw-step-node::after { animation-delay: .8s; } body.cw-anim .cw-timeline .cw-step:nth-child(4).is-in .cw-step-node::after { animation-delay: 1.2s; } body.cw-anim .cw-timeline .cw-step:nth-child(5).is-in .cw-step-node::after { animation-delay: 1.6s; } body.cw-anim .cw-timeline .cw-step:nth-child(6).is-in .cw-step-node::after { animation-delay: 2s; } body.cw-anim .cw-timeline .cw-step:nth-child(7).is-in .cw-step-node::after { animation-delay: 2.4s; } @keyframes cwRing { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(1.7); opacity: 0; } } /* Earnings → animated rising chart */ .cw-chart-art { position: relative; margin: 30px 0 4px; height: 120px; } .cw-chart-svg { width: 100%; height: 100%; display: block; overflow: visible; } .cw-chart-line { stroke-dasharray: 620; stroke-dashoffset: 620; } .cw-chart-area { opacity: 0; } /* True-circle endpoint dot, positioned at the line's end (top-right). It's a CSS element, so it stays perfectly round regardless of the SVG's stretch. */ .cw-chart-end { position: absolute; top: 12px; right: 0; width: 12px; height: 12px; border-radius: 50%; background: #5B5FC7; box-shadow: 0 0 0 4px rgba(91,95,199,.16); transform: translate(50%, -50%); opacity: 0; } body.cw-anim .cw-chart-art.is-in .cw-chart-line { animation: cwDraw 1.6s cubic-bezier(.4,0,.2,1) forwards; } body.cw-anim .cw-chart-art.is-in .cw-chart-area { animation: cwFade 1.1s ease .7s forwards; } body.cw-anim .cw-chart-art.is-in .cw-chart-end { animation: cwFade .4s ease 1.5s forwards, cwDotPulse 2.4s ease-in-out 1.9s infinite; } @keyframes cwDraw { to { stroke-dashoffset: 0; } } @keyframes cwFade { to { opacity: 1; } } @keyframes cwDotPulse { 0%,100% { box-shadow: 0 0 0 4px rgba(91,95,199,.16); } 50% { box-shadow: 0 0 0 9px rgba(91,95,199,.05); } } /* Why-join → card hover lift */ body.cw-anim .cw-why-grid .cw-sblock { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } body.cw-anim .cw-why-grid .cw-sblock:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(91,95,199,.55); border-color: #dcd9ee; } /* ===== Hero accent + prospect CTAs (ported from the prelogin prototype) ===== */ .cw-accent { color: var(--brand, #5B5FC7); } .cw-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 34px 0 4px; } .cw-btn { display: inline-flex; align-items: center; gap: 9px; border-radius: 11px; padding: 11px 20px; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; } .cw-btn-primary { background: var(--brand); color: #fff; box-shadow: 0 10px 24px -8px rgba(91,95,199,.55); } .cw-btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); } .cw-btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); } .cw-btn-ghost:hover { border-color: var(--brand); color: var(--brand); } .cw-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ===== HOW IT WORKS — animated RM pipeline (ported from prelogin prototype) ===== Light dotted connector revealed with a clip-path wipe (keeps the dots crisp, unlike scaleX); subtle travelling spark + a gentle payout-node pulse. Reveal is driven by initJourney() in clik-home.js adding .in to #cw-rail. */ .cw-journey { max-width: 1080px; margin: 0 auto; padding: 0 28px; } /* Tighten the gap between the prospect CTAs and the pipeline below (logged-out only — leave the authenticated hero spacing untouched). */ body:not(.is-authenticated) .cw-hero { padding-bottom: 40px; } .cw-journey-block { padding-top: 20px; } .cw-rail { position: relative; display: flex; } /* Light dotted connector (desktop horizontal). Offset 29px = centre of a 58px dot. */ .cw-rail::before { content: ""; position: absolute; top: 29px; left: 10%; right: 10%; height: 0; border-top: 1.5px dotted #cfd2ea; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.4,0,.2,1) .15s; } .cw-rail.in::before { clip-path: inset(0 0 0 0); } /* Subtle travelling "lead" spark */ .cw-spark { position: absolute; top: 29px; left: 10%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(91,95,199,.12), 0 0 10px 1px rgba(91,95,199,.4); opacity: 0; } .cw-rail.in .cw-spark { animation: cwSparkTravel 5.5s cubic-bezier(.55,.1,.3,1) infinite 1.2s; } @keyframes cwSparkTravel { 0% { left: 10%; opacity: 0; transform: scale(.5); } 10% { opacity: .9; transform: scale(1); } 88% { opacity: .9; transform: scale(1); } 100% { left: 90%; opacity: 0; transform: scale(.5); } } .cw-node { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.3,.5,1); } .cw-rail.in .cw-node { opacity: 1; transform: none; } .cw-rail.in .cw-node:nth-child(2) { transition-delay: .10s; } .cw-rail.in .cw-node:nth-child(3) { transition-delay: .20s; } .cw-rail.in .cw-node:nth-child(4) { transition-delay: .30s; } .cw-rail.in .cw-node:nth-child(5) { transition-delay: .40s; } .cw-rail.in .cw-node:nth-child(6) { transition-delay: .50s; } .cw-dot { position: relative; z-index: 2; width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 1.5px solid #ececf4; display: flex; align-items: center; justify-content: center; color: var(--brand); margin-bottom: 16px; box-shadow: 0 4px 12px -9px rgba(91,95,199,.45); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .cw-dot svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .cw-dot svg text { stroke: none; } .cw-node:hover .cw-dot { transform: translateY(-3px); border-color: #d6d9f1; box-shadow: 0 12px 22px -12px rgba(91,95,199,.5); } .cw-node.cw-payout .cw-dot { background: var(--brand); border-color: var(--brand); color: #fff; } .cw-rail.in .cw-node.cw-payout .cw-dot { animation: cwPayoutPulse 3s ease-in-out 1.8s infinite; } @keyframes cwPayoutPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(91,95,199,.35); } 50% { box-shadow: 0 0 0 10px rgba(91,95,199,0); } } .cw-node h3 { font-size: 15.5px; font-weight: 600; margin: 0 0 7px; color: var(--ink); } .cw-node p { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 0; max-width: 185px; } .cw-node-body { display: flex; flex-direction: column; align-items: inherit; } .cw-pico { font-size: 11px; letter-spacing: .1em; font-weight: 700; color: var(--brand); text-transform: uppercase; margin-bottom: 9px; opacity: .85; } /* Responsive: vertical timeline ≤880px, single-column CTAs ≤560px */ @media (max-width: 880px) { .cw-rail { flex-direction: column; } /* Offset 41px = centre of the icon once nudged down to sit on the title line. */ .cw-rail::before { top: 41px; bottom: 41px; left: 29px; right: auto; width: 0; height: auto; border-top: none; border-left: 1.5px dotted #cfd2ea; clip-path: inset(0 0 100% 0); } .cw-rail.in::before { clip-path: inset(0 0 0 0); } .cw-spark { display: none; } .cw-node { flex-direction: row; align-items: flex-start; text-align: left; gap: 18px; padding: 0 0 26px; } /* Drop the icon ~12px so its centre lines up with the step title (the "Step N" eyebrow sits above), not with the eyebrow. */ .cw-dot { margin-bottom: 0; margin-top: 12px; flex: 0 0 auto; } .cw-node-body { flex: 1; align-items: flex-start; padding-top: 2px; } .cw-pico { white-space: nowrap; } .cw-node p { max-width: none; } } @media (max-width: 560px) { .cw-cta-row { flex-direction: column; } .cw-btn { justify-content: center; } } @media (prefers-reduced-motion: reduce) { body.cw-anim .cw-reveal { opacity: 1 !important; transform: none !important; transition: none; } body.cw-anim .cw-art-blob, body.cw-anim .cw-chart-art.is-in .cw-chart-line, body.cw-anim .cw-chart-art.is-in .cw-chart-area, body.cw-anim .cw-chart-art.is-in .cw-chart-end { animation: none; } .cw-chart-line { stroke-dashoffset: 0; } .cw-chart-area, .cw-chart-end { opacity: 1; } body.cw-anim .cw-timeline .cw-step::before { transform: scaleY(1); transition: none; } body.cw-anim .cw-timeline .cw-step .cw-step-node svg, body.cw-anim .cw-timeline .cw-step .cw-step-num { transform: none; opacity: 1; animation: none; } body.cw-anim .cw-timeline .cw-step.is-in .cw-step-node::after { animation: none; } .cw-rail::before { clip-path: inset(0 0 0 0) !important; transition: none !important; } .cw-rail .cw-node { opacity: 1 !important; transform: none !important; transition: none !important; } .cw-rail .cw-spark { display: none; } .cw-rail.in .cw-node.cw-payout .cw-dot { animation: none !important; } } /* ========================================================================== Shell integration — wire the reskinned home into the existing SPA. ========================================================================== */ /* ---- Sticky top nav. The
wrapper owns the sticky so the bar stays pinned across page scroll (the inner .cw-nav paints it). */ .cw-nav-host { position: sticky; top: 0; z-index: 30; display: block; } .cw-home .cw-nav { position: static; } /* The reskinned home is a pure-white surface (design source of truth). The mockup's frosted nav read white because it sat on a white ; here the global lilac canvas (theme.css html::before) sits behind, so make the nav opaque white rather than let the purple show through its .92 translucency. */ .cw-home .cw-nav { background: #fff; } /* The page canvas is now pure white at the source (theme.css --bg-canvas) with a backstop in module-shell.css, so the home no longer needs its own white under-layer. Keep a positioning context for the home's stacking. */ #appShell > #clikHome { position: relative; } /* Rounded, clipped Get-started card art. The card is a