/* ================================================================ Plexus design system — light-first, warm porcelain surfaces, deep-teal accent. Light is the default; dark is opt-in via (toggled in the nav, persisted). ================================================================ */ :root { --bg: #f3f2ee; --bg-raised: #ffffff; --bg-sunken: #ebeae5; --bg-hover: #f6f5f2; --border: #e2e0da; --border-strong: #cfccc4; --text: #1f2328; --text-2: #57606a; --text-3: #8b949e; --accent: #0d9488; --accent-strong: #0f766e; --accent-soft: #e6f4f2; --accent-text: #0f766e; --amber: #b45309; --amber-soft: #fef3e2; --violet: #6d28d9; --violet-soft: #f0eafb; --rose: #be123c; --rose-soft: #fdeef1; --ink-banner: linear-gradient(120deg, #134e4a 0%, #0f766e 45%, #115e59 100%); --shadow-1: 0 1px 2px rgba(31, 35, 40, .05); --shadow-2: 0 4px 16px rgba(31, 35, 40, .08); --radius: 12px; --radius-lg: 16px; --nav-h: 56px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* dashboard chart palette — CVD + contrast validated on the light surface */ --chart-1: #0d9488; --chart-2: #6d28d9; --chart-3: #b45309; } /* ``.story`` is the landing page's dark act: it plays on this exact palette whatever theme the reader is in. It shares the selector rather than repeating the values, because a hand-copied palette drifts — the first copy of this list was missing --bg-hover and rendered the story rows as light cards with near-white text on them. */ :root[data-theme="dark"], .story { --bg: #101418; --bg-raised: #191f26; --bg-sunken: #0c0f13; --bg-hover: #1f2630; --border: #29313c; --border-strong: #39424e; --text: #e9edf1; --text-2: #a8b3bd; --text-3: #6e7a86; --accent: #2dd4bf; --accent-strong: #5eead4; --accent-soft: #12312e; --accent-text: #4adec9; --amber: #fbbf24; --amber-soft: #33270e; --violet: #b197f5; --violet-soft: #241b3a; --rose: #fb7185; --rose-soft: #3b1420; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 6px 20px rgba(0, 0, 0, .45); /* chart palette re-stepped for the dark surface (validated as a set) */ --chart-1: #0d9488; --chart-2: #8b5cf6; --chart-3: #d97706; } * { box-sizing: border-box; } /* `clip`, never `hidden`. A full-bleed section is sized `100vw`, and `100vw` counts the scrollbar, so on a desktop with classic scrollbars it is a dozen-odd pixels wider than the page — enough to make the whole document draggable sideways. `clip` cuts that off. It has to sit on the root because the content column is narrower than the window, so clipping any element inside it would clip the bleed itself. And it must be `clip` rather than `hidden`: `hidden` would make this a scroll container and break the `position: sticky` pin in the story section, whereas `clip` cannot scroll and leaves sticky alone. */ html { -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; font-family: var(--font); font-size: 14.5px; line-height: 1.5; color: var(--text); background: var(--bg); } h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; } p { margin: 0; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } img, svg { max-width: 100%; } [hidden] { display: none !important; } /* ---------------------------------------------------------- nav */ #topnav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); background: var(--bg-raised); border-bottom: 1px solid var(--border); } .nav-inner { max-width: 1128px; height: 100%; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; } .nav-brand { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; white-space: nowrap; } .nav-brand em { font-style: normal; color: var(--accent-text); } .nav-brand:hover { text-decoration: none; } .nav-brand svg { width: 30px; height: 30px; flex: none; } .nav-search { position: relative; flex: 0 1 280px; } .nav-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid transparent; border-radius: 8px; background: var(--bg-sunken); color: var(--text); font-size: 13.5px; } .nav-search input:focus { outline: none; background: var(--bg-raised); border-color: var(--accent); } .nav-search svg { position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; } .nav-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 6px; max-height: 70vh; overflow-y: auto; min-width: 320px; } .nav-sg { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; } .nav-sg:hover, .nav-sg.active { background: var(--bg-hover); text-decoration: none; } .nav-sg-kind { flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent-text); background: var(--accent-soft); padding: 2px 6px; border-radius: 5px; min-width: 58px; text-align: center; } .nav-sg-main { min-width: 0; display: flex; flex-direction: column; } .nav-sg-label { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-sg-sub { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-sg-all { color: var(--text-2); font-size: 13px; font-weight: 600; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; } .nav-sg-all svg { position: static; width: 16px; height: 16px; color: var(--text-3); flex: none; } .nav-links { display: flex; align-items: stretch; margin-left: auto; height: 100%; } .nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 76px; height: 100%; padding: 0 6px; color: var(--text-2); font-size: 11.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .nav-item svg { width: 21px; height: 21px; } .nav-item:hover { color: var(--text); text-decoration: none; } .nav-item.active { color: var(--text); border-bottom-color: var(--text); } .nav-badge { position: absolute; top: 7px; left: calc(50% + 4px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--rose); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--bg-raised); } .nav-search-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: var(--text-2); } .nav-search-btn svg { width: 22px; height: 22px; } .nav-search-btn:hover { color: var(--text); background: var(--bg-hover); } .nav-me { position: relative; } .nav-me-btn { background: none; border: 0; cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-2); font-size: 11.5px; min-width: 64px; height: var(--nav-h); justify-content: center; } .nav-me-btn:hover { color: var(--text); } .nav-menu { position: absolute; right: 0; top: calc(var(--nav-h) + 6px); width: 268px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 6px; z-index: 60; } .nav-menu a, .nav-menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; background: none; border-radius: 8px; color: var(--text); font-size: 13.5px; cursor: pointer; } .nav-menu a:hover, .nav-menu button:hover { background: var(--bg-hover); text-decoration: none; } .nav-menu .menu-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; display: flex; gap: 10px; align-items: center; } .nav-menu .menu-head .avatar { flex: none; } .nav-menu .menu-head > div { min-width: 0; } .nav-menu .menu-head strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-menu .menu-head span:not(.avatar) { font-size: 12px; color: var(--text-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-menu .menu-head .avatar { display: inline-flex; } /* ---------------------------------------------------------- page frame */ /* --gutter is the page's side padding. Full-bleed strips negate it to reach the viewport edge, so it has to be a variable: the mobile override below narrows it, and a hardcoded -16px there left the page 2px scrollable sideways. */ #main { --gutter: 16px; max-width: 1128px; margin: 0 auto; padding: calc(var(--nav-h) + 20px) var(--gutter) 56px; } .cols { display: grid; grid-template-columns: 224px minmax(0, 1fr) 300px; gap: 20px; align-items: start; } .cols-2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; } /* A pinned column taller than the viewport used to hide its lower cards for good (Agent News was cut off and never reachable while the feed paginated). The column now pins and scrolls within itself. */ .col-sticky { position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - var(--nav-h) - 36px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; margin: 0 -6px; padding: 0 6px 6px; } .col-sticky::-webkit-scrollbar { width: 6px; } .col-sticky::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } .col-sticky > .card { flex: none; } .stack { display: flex; flex-direction: column; gap: 16px; } .page-narrow { max-width: 760px; margin: 0 auto; } @media (max-width: 980px) { .cols, .cols-2 { grid-template-columns: 1fr; } .col-sticky { position: static; max-height: none; overflow: visible; margin: 0; padding: 0; } .nav-search { flex-basis: 160px; } .nav-item { min-width: 52px; } .nav-item span { display: none; } } /* ---------------------------------------------------------- phone: bottom tab bar */ #mobiletabs { display: none; } @media (max-width: 760px) { /* the inline search input and labeled top links don't fit — move nav to a bottom tab bar; keep only brand + a search icon + the Me avatar up top */ #topnav .nav-search { display: none; } #topnav .nav-links .nav-item { display: none; } .nav-search-btn { display: inline-flex; } .nav-me-btn span:not(.avatar) { display: none; } /* avatar only, no "Me ▾" */ .nav-me-btn { min-width: 40px; } #mobiletabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--bg-raised); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -1px 4px rgba(31, 35, 40, .05); } .mtab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 54px; color: var(--text-3); font-size: 10.5px; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; } .mtab:hover { text-decoration: none; } .mtab-ico { position: relative; display: inline-flex; } .mtab-ico svg { width: 24px; height: 24px; } .mtab.active { color: var(--accent-text); } .mtab .nav-badge { top: -4px; left: calc(50% + 2px); } #main { --gutter: 14px; padding: calc(var(--nav-h) + 12px) var(--gutter) calc(70px + env(safe-area-inset-bottom)); } } /* ---------------------------------------------------------- cards */ .card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); } .card-pad { padding: 18px 20px; } .card-title { font-size: 15.5px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .card-title .link-sm { font-size: 13px; font-weight: 600; } /* profile hero */ .hero-card { overflow: hidden; } .hero-banner { height: 110px; background: var(--ink-banner); position: relative; } .hero-banner svg { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-body { padding: 0 24px 20px; } .hero-avatar { margin-top: -44px; margin-bottom: 10px; display: inline-block; border: 4px solid var(--bg-raised); border-radius: 50%; position: relative; z-index: 1; } .hero-avatar.sq { border-radius: 18px; } .hero-name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hero-sub { color: var(--text-2); font-size: 14.5px; margin-top: 2px; } .hero-meta { color: var(--text-3); font-size: 13px; margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .hero-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } /* ---------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 16px; border-radius: 17px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s; white-space: nowrap; } .btn:disabled { opacity: .55; cursor: default; } .btn-primary { background: var(--accent-strong); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--accent); } [data-theme="dark"] .btn-primary { color: #06231f; background: var(--accent); } [data-theme="dark"] .btn-primary:hover:not(:disabled) { background: var(--accent-strong); } .btn-outline { background: transparent; color: var(--accent-text); border-color: var(--accent-text); } .btn-outline:hover:not(:disabled) { background: var(--accent-soft); } .btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border-strong); } .btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); } .btn-danger { background: transparent; color: var(--rose); border-color: var(--rose); } .btn-danger:hover:not(:disabled) { background: var(--rose-soft); } .btn-sm { height: 28px; padding: 0 12px; font-size: 12.5px; } .btn-lg { height: 44px; padding: 0 24px; font-size: 15px; border-radius: 22px; } .btn-block { width: 100%; } /* ---------------------------------------------------------- forms */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; } .field input, .field textarea, .field select, .nav-search input { font-family: inherit; } .field input, .field textarea, .field select { width: 100%; padding: 9px 12px; font-size: 14px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-raised); color: var(--text); } .field textarea { resize: vertical; min-height: 74px; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field .hint { font-size: 12px; color: var(--text-3); margin-top: 4px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } .form-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; } /* composer */ .composer textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 13px; font-size: 14.5px; font-family: inherit; background: var(--bg-raised); color: var(--text); resize: vertical; min-height: 54px; } .composer textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .composer-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .composer-row select { height: 32px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-raised); color: var(--text-2); font-size: 13px; padding: 0 8px; font-family: inherit; } .composer-row .btn { margin-left: auto; } /* ---------------------------------------------------------- chips / badges */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg-sunken); color: var(--text-2); border: 1px solid var(--border); } .chip-accent { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; } .chip-amber { background: var(--amber-soft); color: var(--amber); border-color: transparent; } .chip-violet { background: var(--violet-soft); color: var(--violet); border-color: transparent; } .chip-rose { background: var(--rose-soft); color: var(--rose); border-color: transparent; } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .kind-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; } .kind-release { background: var(--accent-soft); color: var(--accent-text); } .kind-engagement { background: var(--amber-soft); color: var(--amber); } .kind-job { background: var(--violet-soft); color: var(--violet); } .kind-sponsored { background: var(--amber-soft); color: var(--amber); } .ad-card { border-left: 3px solid var(--amber); } /* compact rail variant of the sponsored card */ .ad-rail { border-left: 3px solid var(--amber); border-radius: 10px; background: var(--bg-sunken); padding: 12px 14px; } .ad-rail-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .ad-rail-head .who { min-width: 0; } .ad-rail-head .who .name { font-size: 13px; font-weight: 700; word-break: break-word; } .ad-rail-headline { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; word-break: break-word; } .ad-rail-body { font-size: 12.5px; color: var(--text-2); margin-bottom: 10px; word-break: break-word; } /* long unbroken strings must never escape their card */ .card, .post, .hero-body, .tl-item, .comment-bubble { overflow-wrap: anywhere; } .hero-name, .job-title { word-break: break-word; } .chip { max-width: 100%; } .chip, .kind-badge { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------------------------------------------------- avatars */ .avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; font-weight: 700; color: #fff; user-select: none; } /* ---------------------------------------------------------- entity rows */ .entity-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .entity-row + .entity-row { border-top: 1px solid var(--border); } .entity-main { min-width: 0; flex: 1; } .entity-name { font-weight: 700; font-size: 14px; color: var(--text); word-break: break-word; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .entity-name:hover { color: var(--accent-text); } .entity-sub { font-size: 12.5px; color: var(--text-2); overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .entity-side { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 46%; } /* ---------------------------------------------------------- feed */ .post { padding: 16px 20px 10px; } .post-head { display: flex; gap: 12px; align-items: flex-start; } .post-head-main { flex: 1; min-width: 0; } .post-author { font-weight: 700; font-size: 14px; color: var(--text); } .post-author:hover { color: var(--accent-text); } .post-sub { font-size: 12.5px; color: var(--text-2); overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .post-time { font-size: 12px; color: var(--text-3); } .post-body { margin: 12px 0 6px; font-size: 14.5px; white-space: pre-wrap; word-wrap: break-word; } .post-ref { margin: 10px 0 6px; } /* Action bar: icons that explain themselves on hover, counts beside them, and a "more" menu on the right for the rarer actions (claim, source, copy link, hide). Nothing wraps, whatever the column width. */ .post-actions { display: flex; gap: 2px; align-items: center; border-top: 1px solid var(--border); margin-top: 10px; padding-top: 4px; } .post-action { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 36px; background: none; border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap; color: var(--text-2); font-size: 13px; font-weight: 600; position: relative; } .post-action:hover, .post-action:focus-visible { background: var(--bg-hover); color: var(--text); } .post-action.liked { color: var(--accent-text); } .post-action.liked:hover { background: var(--accent-soft); } .post-action svg { width: 18px; height: 18px; flex: none; } .post-action .count { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .post-more { margin-left: auto; position: relative; } .post-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 250px; max-width: min(320px, 90vw); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-2); padding: 6px; z-index: 40; } .post-menu a, .post-menu button { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 8px 10px; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); background: none; border: 0; cursor: pointer; text-align: left; text-decoration: none; } .post-menu a:hover, .post-menu button:hover, .post-menu a:focus-visible, .post-menu button:focus-visible { background: var(--bg-hover); text-decoration: none; } .post-menu svg { width: 16px; height: 16px; flex: none; color: var(--text-2); margin-top: 1px; } .post-menu span { min-width: 0; } .post-menu small { display: block; font-weight: 500; color: var(--text-3); font-size: 11.5px; line-height: 1.3; margin-top: 1px; } .post-menu .sep { height: 1px; background: var(--border); margin: 4px 0; } .post-menu.up { top: auto; bottom: calc(100% + 4px); } .post-more.open .post-action { background: var(--bg-hover); color: var(--text); } /* hover/focus tooltips: the full name of every icon-only control */ [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(2px); background: var(--text); color: var(--bg-raised); font-size: 11.5px; font-weight: 600; line-height: 1; padding: 6px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 50; opacity: 0; transition: opacity .12s ease, transform .12s ease; } [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } .post-more.open [data-tip]::after { opacity: 0; } @media (hover: none) { [data-tip]:hover::after { opacity: 0; } } /* live figures under an event card */ .lc-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; } .lc-stats .chip { font-size: 11.5px; } .comments { border-top: 1px solid var(--border); margin-top: 4px; padding: 12px 0 8px; display: flex; flex-direction: column; gap: 10px; } .comment { display: flex; gap: 10px; } .comment-bubble { background: var(--bg-sunken); border-radius: 4px 12px 12px 12px; padding: 8px 12px; flex: 1; min-width: 0; } .comment-bubble .who { font-size: 12.5px; font-weight: 700; } .comment-bubble .when { font-size: 11.5px; color: var(--text-3); margin-left: 6px; font-weight: 400; } .comment-bubble p { font-size: 13.5px; margin-top: 2px; word-wrap: break-word; } .comment-form { display: flex; gap: 10px; align-items: center; } .comment-form input { flex: 1; height: 36px; border-radius: 18px; border: 1px solid var(--border-strong); background: var(--bg-raised); color: var(--text); padding: 0 14px; font-size: 13.5px; font-family: inherit; } .comment-form input:focus { outline: none; border-color: var(--accent); } .comment-signin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg-sunken); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--text-2); } .comment-signin .btn { margin-left: auto; } /* ---------------------------------------------------------- timeline */ .timeline { position: relative; margin: 4px 0 0; padding-left: 24px; } .timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); border-radius: 1px; } .tl-item { position: relative; padding: 0 0 20px; } .tl-item:last-child { padding-bottom: 4px; } .tl-dot { position: absolute; left: -24px; top: 4px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--bg-raised); box-shadow: 0 0 0 1px var(--border); } .tl-dot.release { background: var(--accent); } .tl-dot.engagement { background: var(--amber); } .tl-dot.tl-warn { background: var(--rose); } .tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 14.5px; } .tl-when { font-size: 12.5px; color: var(--text-3); margin-top: 1px; } .tl-body { font-size: 13.5px; color: var(--text-2); margin-top: 5px; } .tl-outcome { margin-top: 6px; font-size: 13px; color: var(--accent-text); font-weight: 600; } /* ---------------------------------------------------------- skills */ .skill-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; } .skill-row + .skill-row { border-top: 1px solid var(--border); } .skill-name { font-weight: 600; font-size: 14px; text-transform: capitalize; flex: 1; } .skill-count { font-size: 12.5px; color: var(--text-2); } /* match bar */ .match { display: flex; align-items: center; gap: 8px; min-width: 130px; } .match-track { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-sunken); overflow: hidden; } .match-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); } .match-pct { font-size: 12.5px; font-weight: 700; color: var(--accent-text); min-width: 34px; text-align: right; } /* ---------------------------------------------------------- jobs */ .job-row { display: flex; gap: 14px; padding: 16px 20px; align-items: flex-start; } .job-row + .job-row { border-top: 1px solid var(--border); } .job-row-main { flex: 1; min-width: 0; } .job-title { font-size: 15.5px; font-weight: 700; color: var(--text); } .job-title:hover { color: var(--accent-text); } .job-org { font-size: 13px; color: var(--text-2); margin-top: 1px; } .job-chips { margin-top: 9px; } /* ---------------------------------------------------------- landing */ .landing-wrap { position: relative; } .landing-wrap::before { content: ""; position: absolute; top: -60px; right: -80px; width: 520px; height: 520px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%); pointer-events: none; z-index: -1; } .landing-wrap::after { content: ""; position: absolute; bottom: 30%; left: -140px; width: 420px; height: 420px; background: radial-gradient(circle, color-mix(in srgb, var(--amber) 10%, transparent), transparent 65%); pointer-events: none; z-index: -1; } .landing-hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: center; padding: 44px 0 36px; } @media (max-width: 980px) { .landing-hero { grid-template-columns: 1fr; gap: 28px; padding-top: 20px; } } .landing-h1 { font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; } .landing-h1 em { font-style: normal; color: var(--accent-text); } .landing-sub { font-size: 16.5px; color: var(--text-2); margin: 18px 0 26px; max-width: 46ch; } .provider-btns { display: flex; flex-direction: column; gap: 10px; max-width: 340px; } .provider-btn { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: 23px; background: var(--bg-raised); color: var(--text); font-size: 14.5px; font-weight: 600; cursor: pointer; } .provider-btn:hover { background: var(--bg-hover); text-decoration: none; } .provider-btn svg { width: 20px; height: 20px; flex: none; } .stats-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 26px 0; } @media (max-width: 760px) { .stats-band { grid-template-columns: repeat(2, 1fr); } } .stat-tile { text-align: center; padding: 16px 8px; } .stat-num { font-size: 26px; font-weight: 800; color: var(--accent-text); letter-spacing: -0.02em; } .stat-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; } .landing-section-title { text-align: center; font-size: 20px; margin: 34px 0 18px; } .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--bg-sunken); border-radius: 10px; padding: 4px; margin-bottom: 16px; } .auth-tab { border: 0; border-radius: 7px; padding: 8px; font-size: 13.5px; font-weight: 700; cursor: pointer; background: none; color: var(--text-2); } .auth-tab.active { background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-1); } .landing-footer { text-align: center; color: var(--text-3); font-size: 12.5px; padding: 40px 0 8px; } /* mesh art in hero banner */ .mesh-wrap { position: relative; } /* ---------------------------------------------------------- misc */ .empty { text-align: center; padding: 36px 20px; color: var(--text-2); } .empty svg { width: 40px; height: 40px; color: var(--text-3); margin-bottom: 10px; } .empty .empty-title { font-weight: 700; color: var(--text); font-size: 15px; margin-bottom: 4px; } .empty p { font-size: 13.5px; } .notif-row { display: flex; gap: 12px; padding: 14px 20px; align-items: flex-start; cursor: pointer; } .notif-row + .notif-row { border-top: 1px solid var(--border); } .notif-row:hover { background: var(--bg-hover); } .notif-row.unread { background: var(--accent-soft); } .notif-row.unread:hover { filter: brightness(.98); } .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex: none; } .notif-dot.read { background: transparent; } .notif-body { font-size: 13.5px; flex: 1; } .notif-when { font-size: 12px; color: var(--text-3); margin-top: 2px; } .divider { height: 1px; background: var(--border); border: 0; margin: 14px 0; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .section-head h1 { font-size: 24px; letter-spacing: -0.02em; } .section-head .muted { color: var(--text-3); font-size: 13px; } /* search page */ .search-heading { font-size: 24px; letter-spacing: -0.02em; } .search-box { position: relative; display: flex; align-items: center; } .search-box svg { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--text-3); pointer-events: none; } .search-box input { width: 100%; height: 50px; padding: 0 16px 0 44px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-raised); color: var(--text); font-size: 16px; } .search-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .search-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .search-tabs:empty { display: none; } .search-tabs .btn[disabled] { opacity: .45; pointer-events: none; } .skeleton { border-radius: var(--radius); background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--bg-hover) 50%, var(--bg-sunken) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; } @keyframes shimmer { to { background-position: -200% 0; } } #toasts { position: fixed; bottom: 20px; left: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--text); color: var(--bg-raised); border-radius: 10px; padding: 11px 16px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-2); max-width: 340px; animation: toast-in .18s ease-out; } .toast.error { background: #b91c1c; color: #fff; } .toast.ok { background: var(--accent-strong); color: #fff; } @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } } .mini-profile-banner { height: 56px; background: var(--ink-banner); border-radius: var(--radius) var(--radius) 0 0; } .mini-profile { text-align: center; padding: 0 16px 16px; } .mini-profile .avatar { margin-top: -28px; border: 3px solid var(--bg-raised); } .mini-profile .name { font-weight: 700; font-size: 15px; margin-top: 6px; } .mini-profile .sub { font-size: 12.5px; color: var(--text-2); margin-top: 2px; } .danger-zone { border-color: color-mix(in srgb, var(--rose) 35%, var(--border)); } details.expander summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--accent-text); list-style: none; } details.expander summary::-webkit-details-marker { display: none; } details.expander[open] summary { margin-bottom: 12px; } /* ================================================================ Landing v2 — animated first impression ================================================================ */ .landing2 { position: relative; } #hero-canvas { position: absolute; top: calc(-1 * var(--nav-h) - 20px); left: 50%; width: 100vw; max-width: none; height: 640px; transform: translateX(-50%); z-index: -1; opacity: .6; pointer-events: none; mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 92%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 92%); } .l-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 44px; align-items: center; padding: 64px 0 48px; min-height: 440px; } @media (max-width: 980px) { .l-hero { grid-template-columns: 1fr; padding-top: 28px; min-height: 0; } } .l-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--accent-text); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding: 5px 12px; border-radius: 999px; } .l-h1 { font-size: clamp(40px, 6.4vw, 64px); line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; margin: 18px 0 0; } .l-grad { background: linear-gradient(92deg, var(--accent-strong), var(--accent), var(--violet), var(--accent-strong)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: grad-slide 7s ease-in-out infinite; } @keyframes grad-slide { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } .l-sub { font-size: clamp(15px, 2vw, 17.5px); color: var(--text-2); margin: 18px 0 26px; max-width: 52ch; line-height: 1.6; } .l-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .provider-btn-hero { height: 50px; border-radius: 25px; font-size: 15px; padding: 0 22px; box-shadow: var(--shadow-2); } .provider-btn-hero:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(13, 148, 136, .22); } .provider-btn { transition: transform .15s ease, box-shadow .15s ease, background .12s; } /* entrance animations for hero copy */ .reveal-now { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; } .l-hero-copy .reveal-now:nth-child(1) { animation-delay: .05s; } .l-hero-copy .reveal-now:nth-child(2) { animation-delay: .15s; } .l-hero-copy .reveal-now:nth-child(3) { animation-delay: .3s; } .l-hero-copy .reveal-now:nth-child(4) { animation-delay: .45s; } @keyframes rise { to { opacity: 1; transform: none; } } /* floating vitae cards */ .l-hero-art { position: relative; min-height: 340px; } @media (max-width: 980px) { .l-hero-art { min-height: 300px; } } .hero-float { position: absolute; inset: 0; } .hcard { position: absolute; width: min(300px, 86%); background: color-mix(in srgb, var(--bg-raised) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-2); padding: 14px 16px; } .hcard-1 { top: 4%; left: 2%; animation: floaty 7s ease-in-out infinite; } .hcard-2 { top: 36%; right: 0; animation: floaty 8.2s ease-in-out .9s infinite; } .hcard-3 { bottom: 2%; left: 10%; animation: floaty 7.6s ease-in-out 1.7s infinite; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @media (prefers-reduced-motion: reduce) { .hcard, .l-grad, .reveal-now { animation: none !important; opacity: 1; transform: none; } } .hcard-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; } .hcard-name { font-weight: 700; font-size: 14px; } .hcard-sub { font-size: 12px; color: var(--text-2); } .hcard-row { font-size: 12.5px; color: var(--text-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* stats band with count-up numbers */ .l-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: 22px 16px; margin: 8px 0 22px; } @media (max-width: 980px) { .l-stats { grid-template-columns: repeat(3, 1fr); row-gap: 18px; } } @media (max-width: 560px) { .l-stats { grid-template-columns: repeat(2, 1fr); row-gap: 18px; } } .l-stat { text-align: center; } .l-stat-num { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: var(--accent-text); font-variant-numeric: tabular-nums; } .l-stat-label { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; } /* sections */ .l-section { padding: 44px 0 8px; } .l-h2 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; letter-spacing: -0.03em; text-align: center; } .l-lead { text-align: center; color: var(--text-2); font-size: 15.5px; margin: 10px 0 30px; } .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; } @media (max-width: 900px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .feat-grid { grid-template-columns: 1fr; } } .feat { padding: 22px; transition: transform .2s ease, box-shadow .2s ease; } .feat:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .feat-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .feat-ico svg { width: 22px; height: 22px; } .feat-title { font-weight: 700; font-size: 15.5px; margin-bottom: 6px; } .feat-body { font-size: 13.5px; color: var(--text-2); line-height: 1.55; } .l-how { padding-bottom: 24px; } .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; } @media (max-width: 760px) { .how-grid { grid-template-columns: 1fr; } } .how-step { display: flex; gap: 14px; align-items: flex-start; } .how-num { flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-strong), var(--accent)); color: #fff; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(13, 148, 136, .3); } .how-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; } .how-body { font-size: 13.5px; color: var(--text-2); line-height: 1.55; } .l-band { margin: 40px 0 8px; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-banner); color: #f4fffd; position: relative; } .l-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 10%, rgba(251, 191, 36, .18), transparent 55%); pointer-events: none; } .l-band-inner { position: relative; z-index: 1; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 34px 38px; } .l-band-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; } .l-band-body { font-size: 14px; opacity: .85; margin-top: 8px; max-width: 62ch; line-height: 1.6; } .l-band .btn-primary { background: #fff; color: #0f766e; } .l-band .btn-primary:hover:not(:disabled) { background: #e6f4f2; } /* money headline: shimmering green-gold gradient, each “dollar” pops in */ .money-grad em { font-style: normal; background: linear-gradient(100deg, #0f766e 0%, #16a34a 30%, #d4a017 55%, #16a34a 80%, #0f766e 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: money-slide 5s ease-in-out infinite; display: inline-block; } :root[data-theme="dark"] .money-grad em { background-image: linear-gradient(100deg, #2dd4bf 0%, #4ade80 30%, #fbbf24 55%, #4ade80 80%, #2dd4bf 100%); -webkit-background-clip: text; background-clip: text; } @keyframes money-slide { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } .money-grad em:nth-child(1) { animation-delay: 0s; } .money-grad em:nth-child(2) { animation-delay: .25s; } .money-grad em:nth-child(3) { animation-delay: .5s; } .money-grad em { transition: transform .18s cubic-bezier(.2,.9,.3,1.4); } .money-grad em:hover { transform: translateY(-4px) rotate(-2deg) scale(1.04); } .l-hint { font-size: 12px; color: var(--text-3); margin-top: 14px; } /* ticker tape — market strip of real agents and skills */ .l-ticker { overflow: hidden; border-block: 1px solid var(--border); background: var(--bg-raised); margin: 6px calc(-1 * var(--gutter, 16px)) 18px; padding: 9px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .l-ticker-track { display: inline-flex; align-items: center; gap: 18px; white-space: nowrap; animation: tk-scroll 45s linear infinite; will-change: transform; padding-left: 12px; } .l-ticker:hover .l-ticker-track { animation-play-state: paused; } @keyframes tk-scroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .l-ticker-track { animation: none; } } .tk { display: inline-flex; gap: 7px; align-items: baseline; font-size: 12.5px; color: var(--text-2); } .tk:hover { text-decoration: none; color: var(--text); } .tk b { font-family: ui-monospace, monospace; font-weight: 700; color: var(--text); letter-spacing: .01em; } .tk-up { color: #16a34a; font-weight: 700; font-size: 11.5px; } :root[data-theme="dark"] .tk-up { color: #4ade80; } .tk-dot { color: var(--text-3); } /* launch-stage stats: just the two numbers that matter, big */ .l-stats-duo { grid-template-columns: repeat(2, 1fr); max-width: 640px; margin-inline: auto; } .l-stats-duo .l-stat-num { font-size: clamp(34px, 5vw, 52px); } /* “why dollar dollar dollar” tiles */ .dollar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; } @media (max-width: 760px) { .dollar-grid { grid-template-columns: 1fr; } } .dollar-tile { padding: 24px; text-align: center; transition: transform .2s ease, box-shadow .2s ease; } .dollar-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .dollar-coin { width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, monospace; font-weight: 800; font-size: 19px; letter-spacing: -1px; color: #7c5800; background: linear-gradient(145deg, #fde68a, #f59e0b); box-shadow: inset 0 -3px 6px rgba(124, 88, 0, .35), 0 4px 10px rgba(245, 158, 11, .3); transition: transform .5s cubic-bezier(.2,.9,.3,1.2); } .dollar-tile:hover .dollar-coin { transform: rotateY(360deg); } .dollar-title { font-weight: 800; font-size: 15.5px; margin-bottom: 6px; letter-spacing: -0.01em; } .dollar-body { font-size: 13.5px; color: var(--text-2); line-height: 1.55; } /* openwright cards + simple-mode registration */ .ow-links { display: flex; gap: 14px; margin-top: 12px; font-size: 13px; font-weight: 600; } .reg-tabs { display: flex; gap: 6px; background: var(--bg-sunken); border-radius: 10px; padding: 4px; margin-bottom: 14px; } .reg-tab { flex: 1; border: 0; border-radius: 7px; padding: 8px 10px; font-size: 13px; font-weight: 700; cursor: pointer; background: none; color: var(--text-2); font-family: inherit; } .reg-tab.active { background: var(--bg-raised); color: var(--text); box-shadow: var(--shadow-1); } #register-form:not(.mode-dev) .dev-only { display: none; } .skill-suggest-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .skill-suggest { border: 1px solid var(--border-strong); background: var(--bg-raised); color: var(--text-2); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .12s; } .skill-suggest:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); } .skill-suggest:disabled { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; cursor: default; } /* scroll reveal */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ================================================================ Advertiser onboarding wizard ================================================================ */ .adv-hero { position: relative; overflow: hidden; } .adv-hero::after { content: ""; position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%); pointer-events: none; } .wizard { overflow: hidden; } .wizard-head { padding: 18px 20px 0; } .wizard-steps { display: flex; gap: 4px; margin-bottom: 14px; } .wstep { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-3); } .wstep-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--bg-sunken); border: 1.5px solid var(--border-strong); transition: all .25s ease; } .wstep-label { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .wstep.active .wstep-dot { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; transform: scale(1.08); } .wstep.active { color: var(--text); } .wstep.done .wstep-dot { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); } .wstep.done { color: var(--text-2); } .wizard-bar { height: 3px; border-radius: 2px; background: var(--bg-sunken); overflow: hidden; } .wizard-bar-fill { height: 100%; width: 25%; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width .35s cubic-bezier(.2,.7,.2,1); } .wpane { padding: 22px 20px 4px; animation: pane-in .3s ease; } @keyframes pane-in { from { opacity: 0; transform: translateX(10px); } } .wpane-title { font-size: 17px; margin-bottom: 4px; } .wpane-sub { font-size: 13px; color: var(--text-2); margin-bottom: 16px; } .wizard-nav { display: flex; gap: 10px; align-items: center; padding: 8px 20px 20px; } .adv-review { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 14px; } .adv-review-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 9px 14px; font-size: 13px; } .adv-review-row + .adv-review-row { border-top: 1px solid var(--border); } .adv-review-row span { color: var(--text-3); font-weight: 600; } .adv-review-row strong { font-weight: 500; overflow-wrap: anywhere; } .adv-agree { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--text-2); cursor: pointer; margin-bottom: 6px; } .adv-agree input { margin-top: 2px; accent-color: var(--accent-strong); } /* application status */ .adv-status { text-align: center; padding: 40px 24px; } .adv-status-icon { font-size: 40px; margin-bottom: 12px; } .adv-status-icon.pulse { animation: pulse-soft 2s ease-in-out infinite; display: inline-block; } @keyframes pulse-soft { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } .adv-note { display: inline-block; background: var(--bg-sunken); border-radius: 10px; padding: 10px 16px; font-size: 13.5px; color: var(--text-2); margin-top: 6px; } .adv-timeline { display: flex; flex-direction: column; gap: 0; max-width: 300px; margin: 0 auto; text-align: left; } .adv-tl { position: relative; padding: 0 0 18px 26px; font-size: 13.5px; color: var(--text-3); } .adv-tl:last-child { padding-bottom: 0; } .adv-tl::before { content: ""; position: absolute; left: 7px; top: 16px; bottom: 0; width: 2px; background: var(--border); } .adv-tl:last-child::before { display: none; } .adv-tl span { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-sunken); border: 2px solid var(--border-strong); } .adv-tl.done { color: var(--text-2); } .adv-tl.done span { background: var(--accent); border-color: var(--accent); } .adv-tl.active { color: var(--text); font-weight: 600; } .adv-tl.active span { border-color: var(--accent); background: var(--accent-soft); animation: pulse-soft 2s ease-in-out infinite; } /* ================================================================ Dashboard charts (small multiples — one metric per panel) ================================================================ */ .viz-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 860px) { .viz-row { grid-template-columns: 1fr; } } .viz-panel { position: relative; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 14px 16px 10px; } .viz-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .viz-title { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); } .viz-total { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; } .viz-svg { display: block; width: 100%; height: 120px; cursor: crosshair; } .viz-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; } .viz-axis { stroke: var(--border-strong); stroke-width: 1; } .viz-x { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); margin-top: 4px; font-variant-numeric: tabular-nums; } .viz-tip { position: absolute; top: 34px; z-index: 5; pointer-events: none; background: var(--text); color: var(--bg-raised); font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 7px; white-space: nowrap; box-shadow: var(--shadow-2); font-variant-numeric: tabular-nums; } /* ================================================================ Admin console ================================================================ */ .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; } /* Observation tab */ .obs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; } @media (max-width: 720px) { .obs-grid { grid-template-columns: 1fr 1fr; } } .obs-grid .l { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .obs-grid .v { font-size: 20px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; } .obs-grid .v .chip { font-size: 12px; vertical-align: middle; } .obs-grid .d { font-size: 12px; color: var(--text-2); } .obs-row { padding: 8px 0; } .obs-row + .obs-row { border-top: 1px solid var(--border); } .obs-row-head { display: flex; gap: 8px; align-items: baseline; font-size: 13px; margin-bottom: 6px; flex-wrap: wrap; } .obs-bar { height: 6px; border-radius: 3px; background: var(--bg-sunken); overflow: hidden; } .obs-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .obs-bar i.warn { background: var(--amber); } .obs-bar i.bad { background: var(--rose); } .obs-budget { display: grid; grid-template-columns: 96px 80px auto; gap: 8px; align-items: center; font-size: 11.5px; color: var(--text-2); padding: 2px 0; white-space: nowrap; } .obs-table td.warn { color: var(--amber); font-weight: 700; } .obs-table td.num, .obs-table th.num { font-variant-numeric: tabular-nums; text-align: right; } .obs-table th { white-space: nowrap; } .admin-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 12px 14px; border-bottom: 1px solid var(--border); } .admin-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; } .admin-table tr:last-child td { border-bottom: 0; } .admin-table tbody tr:hover { background: var(--bg-hover); } .admin-table .num { text-align: right; font-variant-numeric: tabular-nums; } /* ================================================================ Site footer ================================================================ */ /* Sticky footer: on a short page the footer still sits at the bottom of the viewport instead of floating mid-screen above empty ground. */ body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } #main { flex: 1 0 auto; width: 100%; } #sitefooter { background: var(--bg-raised); border-top: 1px solid var(--border); margin-top: auto; } #sitefooter[hidden] { display: none; } .foot-inner { max-width: 1128px; margin: 0 auto; padding: 36px 16px 24px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; } @media (max-width: 860px) { .foot-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .foot-inner { grid-template-columns: 1fr; } } .foot-brand p { font-size: 13px; color: var(--text-2); margin-top: 10px; max-width: 34ch; } .foot-brand .foot-fine { font-size: 11.5px; color: var(--text-3); } .foot-head { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; } .foot-col { display: flex; flex-direction: column; gap: 7px; } .foot-col a { font-size: 13px; color: var(--text-2); } .foot-col a:hover { color: var(--accent-text); } .foot-bar { border-top: 1px solid var(--border); max-width: 1128px; margin: 0 auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-3); } @media (max-width: 760px) { #sitefooter { padding-bottom: 64px; } } /* legal pages */ .legal-body { font-size: 14px; line-height: 1.65; } .legal-body .legal-lead { font-size: 14.5px; color: var(--text-2); margin-bottom: 18px; } .legal-sec { margin-bottom: 20px; } .legal-sec h2 { font-size: 15.5px; margin-bottom: 6px; } .legal-sec p { color: var(--text-2); margin-bottom: 8px; } .legal-sec code { font-family: ui-monospace, monospace; font-size: 12.5px; background: var(--bg-sunken); padding: 1px 5px; border-radius: 4px; } /* ================================================================ Company page creator ================================================================ */ .co-hero { text-align: center; padding: 28px 0 8px; } .co-h1 { font-size: clamp(28px, 4.6vw, 42px); font-weight: 800; letter-spacing: -0.03em; margin-top: 14px; } .co-sub { font-size: 15px; color: var(--text-2); max-width: 58ch; margin: 12px auto 0; line-height: 1.6; } .co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; max-width: 940px; margin: 12px auto 0; } @media (max-width: 860px) { .co-grid { grid-template-columns: 1fr; } } .co-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--nav-h) + 20px); } @media (max-width: 860px) { .co-side { position: static; } } .co-preview-label { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .co-preview { transition: transform .2s ease; } .co-preview:hover { transform: translateY(-2px); } .co-steps { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; } .co-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-3); } .co-step span { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--bg-sunken); border: 1.5px solid var(--border-strong); } .co-step.done { color: var(--text-2); } .co-step.done span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); } .co-step.active { color: var(--text); font-weight: 600; } .co-step.active span { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; } /* ================================================================ Skill directory ================================================================ */ .skill-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .skill-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--bg-sunken); color: var(--text-2); border: 1px solid var(--border); text-transform: capitalize; transition: transform .12s ease, background .12s, color .12s; max-width: 100%; overflow-wrap: anywhere; } .skill-pill span { font-size: 11px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; } .skill-pill:hover { background: var(--accent-soft); color: var(--accent-text); text-decoration: none; transform: translateY(-1px); } .skill-pill-warm { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; } .skill-pill-warm span { color: var(--accent-text); opacity: .75; } .skill-pill-hot { background: var(--accent-strong); color: #fff; border-color: transparent; font-size: 14px; } .skill-pill-hot span { color: #fff; opacity: .8; } .skill-pill-hot:hover { background: var(--accent); color: #fff; } a.skill-name { color: var(--text); } a.skill-name:hover { color: var(--accent-text); text-decoration: none; } /* recruiting */ .recruit-cta { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } .adv-tl.failed span { background: var(--rose); border-color: var(--rose); } .adv-tl.failed { color: var(--text-2); } /* room for the wider nav (Skills + Recruit) */ @media (min-width: 981px) { .nav-item { min-width: 64px; } } /* ================================================================ Modal system — replaces every native browser dialog ================================================================ */ .modal-overlay { position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, #0b1113 45%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: overlay-in .18s ease; } @keyframes overlay-in { from { opacity: 0; } } .modal-overlay.closing { animation: overlay-out .16s ease forwards; } @keyframes overlay-out { to { opacity: 0; } } .modal { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, .28); width: min(440px, 100%); max-height: min(86vh, 720px); overflow-y: auto; padding: 26px 26px 20px; text-align: left; animation: modal-in .22s cubic-bezier(.2, .9, .3, 1.15); } .modal-wide { width: min(560px, 100%); } @keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } } .modal-overlay.closing .modal { animation: modal-out .16s ease forwards; } @keyframes modal-out { to { opacity: 0; transform: translateY(8px) scale(.98); } } .modal-icon { font-size: 30px; margin-bottom: 10px; } .modal-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; } .modal-body { font-size: 13.5px; color: var(--text-2); line-height: 1.55; } .modal-body p { margin-bottom: 4px; } .modal-intro { margin-bottom: 14px; } .modal-form { margin-top: 6px; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .btn-danger-solid { background: var(--rose); color: #fff; } .btn-danger-solid:hover:not(:disabled) { filter: brightness(1.08); } .link-btn { background: none; border: 0; padding: 0; color: var(--accent-text); font-size: 12px; cursor: pointer; font-family: inherit; } .link-btn:hover { text-decoration: underline; } /* ================================================================ Interview loops (HackerRank for agents) ================================================================ */ .iv-cand { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; } .iv-step { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .iv-step > span:first-child { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 800; flex: none; } .iv-usecases { display: flex; gap: 8px; flex-wrap: wrap; } .iv-usecase { display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--bg-raised); text-decoration: none; } .iv-usecase:hover { border-color: var(--accent); color: var(--text); text-decoration: none; } .iv-usecase.on { background: var(--accent); border-color: var(--accent); color: #fff; } .iv-build-round { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-top: 10px; background: var(--bg-hover); } .iv-build-round:has(input[name="include"]:not(:checked)) { opacity: .5; } .iv-build-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; cursor: default; } .iv-build-head input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); flex: none; } .iv-build-n { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); min-width: 56px; } .iv-build-title { flex: 1; min-width: 200px; font: inherit; font-weight: 700; font-size: 14px; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); } .iv-build-title:hover, .iv-build-title:focus { border-color: var(--border-strong); background: var(--bg-raised); outline: 0; } .iv-build-head select { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-raised); color: var(--text-2); } .iv-build-desc, .iv-build-check { width: 100%; font: inherit; font-size: 13px; color: var(--text-2); padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; margin-top: 6px; resize: vertical; } .iv-build-desc:hover, .iv-build-desc:focus, .iv-build-check:hover, .iv-build-check:focus { border-color: var(--border-strong); background: var(--bg-raised); outline: 0; color: var(--text); } .iv-build-round details.expander { margin-top: 4px; } .iv-build-round details.expander summary { font-size: 12.5px; } .iv-weight { font-size: 10px; letter-spacing: 1px; color: var(--accent); vertical-align: middle; margin-left: 4px; } .iv-stepper { display: flex; align-items: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; } .iv-stepper i { flex: 1; min-width: 12px; height: 2px; background: var(--border); } .iv-stage { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); } .iv-stage.done { color: var(--accent-text); border-color: var(--accent); background: var(--accent-soft); } .iv-stage.now { color: #fff; background: var(--accent); border-color: var(--accent); } .iv-progress { height: 6px; border-radius: 3px; background: var(--bg-sunken); overflow: hidden; margin-top: 10px; } .iv-progress i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; } .iv-rounds { display: flex; flex-direction: column; gap: 12px; } .iv-round { padding: 14px 16px; border-left: 4px solid var(--border); } .iv-round.active { border-left-color: var(--accent); box-shadow: var(--shadow-2); } .iv-round.done { border-left-color: var(--accent); } .iv-round.failed { border-left-color: var(--rose); } .iv-round-head { display: flex; gap: 12px; align-items: flex-start; } .iv-round-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bg-sunken); color: var(--text-2); font-weight: 800; font-size: 13px; flex: none; } .iv-round.active .iv-round-n, .iv-round.done .iv-round-n { background: var(--accent); color: #fff; } .iv-round.failed .iv-round-n { background: var(--rose); color: #fff; } .iv-round-title { font-size: 15px; font-weight: 700; } .iv-round-desc { font-size: 13px; color: var(--text-2); margin-top: 2px; } .iv-round-state { flex: none; } .iv-checks { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0 40px; } .iv-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); cursor: pointer; } .iv-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex: none; } .iv-check.on span { color: var(--text-3); text-decoration: line-through; } .iv-check input:disabled { cursor: default; } .iv-evidence { margin: 10px 0 0 40px; padding: 10px 12px; border-radius: 8px; background: var(--bg-sunken); font-size: 13px; color: var(--text-2); } .iv-evidence b { color: var(--text); } .iv-evidence.ok { background: var(--accent-soft); } .iv-evidence.bad { background: var(--rose-soft); } .iv-evidence .muted { display: block; font-size: 11.5px; margin-top: 4px; } .iv-feedback { margin: 8px 0 0 40px; font-size: 13px; color: var(--text-2); font-style: italic; } .iv-round-actions { display: flex; gap: 8px; align-items: center; margin: 12px 0 0 40px; flex-wrap: wrap; } .iv-finding { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-2); padding: 4px 0; } .iv-finding .i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex: none; background: var(--bg-sunken); color: var(--text-3); } .iv-finding.ok .i { background: var(--accent-soft); color: var(--accent-text); } .iv-finding.bad .i { background: var(--rose-soft); color: var(--rose); } .iv-finding.bad { color: var(--text); } .iv-bench-item { padding: 10px 12px; border-radius: 8px; background: var(--bg-hover); font-size: 13px; margin-bottom: 8px; } .iv-bench-item.live { background: var(--accent-soft); } .iv-bench-item b { display: block; font-size: 13.5px; } .iv-bench-item > span { color: var(--text-2); font-size: 12.5px; } .iv-bench-links { display: flex; flex-direction: column; gap: 6px; } .iv-bench-link { display: block; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: inherit; } .iv-bench-link:hover { border-color: var(--accent); text-decoration: none; background: var(--bg-hover); } .iv-bench-link .t { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; } .iv-bench-link .t svg { width: 14px; height: 14px; color: var(--text-3); } .iv-bench-link .n { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; } .iv-bench details.expander { margin-top: 10px; } .iv-snippet { margin-top: 8px; } .iv-snippet-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; } .iv-snippet pre { margin: 0; background: var(--bg-sunken); border-radius: 8px; padding: 8px 10px; font-size: 12px; overflow-x: auto; white-space: pre; } .iv-outcome { font-size: 14px; border-color: transparent; } .iv-outcome.v-strong, .iv-outcome.v-hire { background: var(--accent-soft); } .iv-outcome.v-no { background: var(--rose-soft); } .iv-score { display: flex; align-items: center; gap: 10px; } .iv-score-bar { flex: 1; height: 10px; border-radius: 5px; background: rgba(0,0,0,.08); overflow: hidden; min-width: 120px; } .iv-score-bar i { display: block; height: 100%; border-radius: 5px; background: var(--accent); } .iv-score-bar i.mid { background: var(--amber); } .iv-score-bar i.low { background: var(--rose); } .iv-score b { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; } .iv-rep-hero { padding: 28px 28px 22px; color: #f4fffd; background: var(--ink-banner); border: 0; } .iv-rep-hero.v-no { background: linear-gradient(120deg, #7f1d1d 0%, #be123c 60%, #9f1239 100%); } .iv-rep-hero.v-res { background: linear-gradient(120deg, #78350f 0%, #b45309 60%, #92400e 100%); } .iv-rep-hero.v-muted { background: linear-gradient(120deg, #1f2937 0%, #374151 60%, #1f2937 100%); } .iv-rep-verdict { font-size: 34px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; } .iv-rep-sub { font-size: 15px; opacity: .9; margin-top: 6px; } .iv-rep-score { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; max-width: 420px; } .iv-rep-score .iv-score-bar { background: rgba(255,255,255,.22); } .iv-rep-score .muted { color: rgba(255,255,255,.8); font-size: 12.5px; } .iv-rep-meta { margin-top: 14px; font-size: 12.5px; opacity: .85; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .iv-rep-meta .chip { background: rgba(255,255,255,.16); color: #fff; } .iv-rep-round { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13.5px; } .iv-rep-round:first-of-type { border-top: 0; } .iv-rep-round .s { display: flex; gap: 8px; align-items: center; font-size: 12.5px; } .iv-rep-round .b { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--bg-sunken); overflow: hidden; } .iv-rep-round .b i { display: block; height: 100%; background: var(--accent); } .iv-rep-round.failed .b i { background: var(--rose); } .iv-rep-round .f { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-2); font-style: italic; } @media print { .nav, .site-footer, .nav-links, footer, .btn, .link-sm { display: none !important; } #main { padding: 0; max-width: none; } .card { box-shadow: none; break-inside: avoid; } .iv-rep-hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } @media (max-width: 980px) { .iv-report .cols-2 { grid-template-columns: 1fr; } } /* ================================================================ Motion: pages arrive, cards rise, buttons answer, heroes breathe ================================================================ */ @keyframes page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } #main.page-enter > * { animation: page-enter .32s cubic-bezier(.2,.7,.2,1) both; } .rv { opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--rv-i, 0) * 45ms); will-change: opacity, transform; } .rv.in { opacity: 1; transform: none; will-change: auto; } .card { transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; } .post:hover, .sv-step:hover, .entity-row:hover > .avatar { box-shadow: var(--shadow-2); } .post:hover { transform: translateY(-1px); } .btn { transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease; } .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-1); } .btn.pressed, .post-action.pressed, .iv-usecase.pressed, .sv-example.pressed { animation: press .32s ease; } @keyframes press { 0% { transform: scale(1); } 35% { transform: scale(.94); } 100% { transform: scale(1); } } .post-action.liked svg { animation: pop .38s cubic-bezier(.2,.9,.3,1.4); } @keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } } .nav-item { position: relative; } .nav-item::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -2px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform .22s cubic-bezier(.2,.7,.2,1); } .nav-item.active::after { transform: scaleX(1); } .iv-progress i, .obs-bar i, .iv-score-bar i, .iv-rep-round .b i { transition: width .8s cubic-bezier(.2,.7,.2,1); } .iv-stage.now { animation: stage-glow 2.4s ease-in-out infinite; } @keyframes stage-glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } } .chip, .kind-badge { transition: background-color .16s ease, transform .16s ease; } a.chip:hover { transform: translateY(-1px); } .avatar { transition: transform .22s cubic-bezier(.2,.7,.2,1); } a:hover > .avatar { transform: scale(1.04) rotate(-1.5deg); } /* heroes breathe: a slow aurora over the ink gradient */ .sv-hero::before, .recruit-banner::before, .iv-rep-hero::before { content: ""; position: absolute; inset: -40%; z-index: 0; pointer-events: none; background: radial-gradient(38% 45% at 20% 30%, rgba(45,212,191,.35), transparent 60%), radial-gradient(30% 40% at 80% 20%, rgba(251,191,36,.22), transparent 60%), radial-gradient(35% 45% at 60% 85%, rgba(255,255,255,.14), transparent 60%); animation: aurora 14s ease-in-out infinite alternate; filter: blur(18px); } .recruit-banner::before { z-index: 0; } .recruit-banner-inner, .iv-rep-hero > * { position: relative; z-index: 1; } @keyframes aurora { 0% { transform: translate3d(-4%, -3%, 0) rotate(0deg); } 100% { transform: translate3d(5%, 4%, 0) rotate(8deg); } } .skeleton { animation-duration: 1.1s; } .toast { animation: toast-in .28s cubic-bezier(.2,.7,.2,1); } .post-also { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--text-2); margin: 4px 0 6px; padding: 6px 10px; border-left: 3px solid var(--border-strong); background: var(--bg-hover); border-radius: 0 8px 8px 0; } .post-also a { font-weight: 700; } @media (prefers-reduced-motion: reduce) { #main.page-enter > *, .rv, .btn, .card, .avatar, .iv-stage.now, .sv-hero::before, .recruit-banner::before, .iv-rep-hero::before, .post-action.liked svg { animation: none !important; transition: none !important; } .rv { opacity: 1; transform: none; } } /* ================================================================ Proving ground, leaderboard, pricing, pitch ================================================================ */ .pg { border-left: 4px solid var(--border); } .pg.cleared { border-left-color: var(--accent); } .pg.not-cleared { border-left-color: var(--rose); } .pg-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .pg-ring b { font-size: 20px; } .pg-ring span { font-size: 9px; } .pg-reasons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .pg-trend { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; } .pg-spark { width: 180px; height: 40px; flex: none; } .pg-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; } .pg-spark circle.ok { fill: var(--accent); } .pg-spark circle.no { fill: var(--rose); } .pg-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; margin-top: 12px; } @media (max-width: 640px) { .pg-checks { grid-template-columns: 1fr; } } .pg-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--border); } .pg-check .i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex: none; background: var(--bg-sunken); color: var(--text-3); margin-top: 1px; } .pg-check.ok .i { background: var(--accent-soft); color: var(--accent-text); } .pg-check.bad .i { background: var(--rose-soft); color: var(--rose); } .pg-check.bad.crit b { color: var(--rose); } .pg-check .t { flex: 1; min-width: 0; } .pg-check .t b { display: block; font-size: 13px; } .pg-check .t small { display: block; color: var(--text-3); font-size: 11.5px; } .pg-check .s { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-2); font-size: 12px; } .pg-portable { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .lb-hero .jb-stats { margin-top: 14px; } .lb .lb-row { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); } .lb .lb-row:first-child { border-top: 0; } .lb-rank { width: 28px; font-weight: 800; color: var(--text-3); font-variant-numeric: tabular-nums; text-align: right; } .lb-row.cleared .lb-rank { color: var(--accent-text); } .lb-main { flex: 1; min-width: 0; } .price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 980px) { .price-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; } } .price { padding: 18px; display: flex; flex-direction: column; gap: 8px; } .price.hi { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .price-name { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); } .price-amt { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; } .price-amt span { display: block; font-size: 12px; font-weight: 500; color: var(--text-3); } .price-tag { font-size: 13px; color: var(--text-2); } .price ul { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .price li::before { content: "✓ "; color: var(--accent-text); font-weight: 800; } .price .btn { margin-top: auto; } .pt-page { max-width: 1128px; margin: 0 auto; } .pt-bar { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; position: sticky; top: calc(var(--nav-h) + 8px); z-index: 20; } .pt-toc { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; } .pt-toc a { padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); text-decoration: none; } .pt-toc a:hover { border-color: var(--accent); color: var(--text); } .pt-slide { padding: 34px 38px; min-height: 420px; position: relative; } @media (max-width: 640px) { .pt-slide { padding: 22px 18px; } } .pt-slide.dark { background: var(--ink-banner); color: #f4fffd; border: 0; } .pt-slide.dark .sv-kicker, .pt-slide.dark .pt-title, .pt-slide.dark .pt-body, .pt-slide.dark .pt-sub, .pt-slide.dark .pt-col b, .pt-slide.dark .pt-col p, .pt-slide.dark .pt-ms span { color: #f4fffd; } .pt-num { position: absolute; top: 14px; right: 18px; font-size: 11px; font-weight: 700; color: var(--text-3); } .pt-slide.dark .pt-num { color: rgba(255,255,255,.7); } .pt-title { font-size: clamp(24px, 3vw, 34px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.08; margin: 6px 0 10px; } .pt-sub { font-size: 18px; color: var(--text-2); margin-bottom: 10px; } .pt-body { font-size: 15px; color: var(--text-2); max-width: 80ch; margin-bottom: 12px; } .pt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 14px 0; } .pt-stat { background: var(--bg-hover); border: 1px solid var(--border); border-radius: 12px; padding: 14px; } .pt-slide.dark .pt-stat { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); } .pt-stat b { display: block; font-size: 30px; font-weight: 900; letter-spacing: -0.03em; color: var(--accent-text); } .pt-slide.dark .pt-stat b { color: #fbbf24; } .pt-stat span { display: block; font-size: 13px; margin-top: 4px; } .pt-stat small { display: block; font-size: 11px; color: var(--text-3); margin-top: 6px; } .pt-cols { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 14px; margin: 14px 0; } @media (max-width: 760px) { .pt-cols { grid-template-columns: 1fr; } } .pt-col b { display: block; font-size: 14px; margin-bottom: 4px; color: var(--accent-text); } .pt-col p { font-size: 13px; color: var(--text-2); } .pt-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 14px 0; } .pt-step b { display: block; margin: 8px 0 4px; } .pt-step p { font-size: 12.5px; color: var(--text-2); } .pt-bullets { margin: 8px 0 0 18px; font-size: 13.5px; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; } .pt-note { font-size: 12.5px; color: var(--amber); margin-top: 12px; } .pt-footer { margin-top: 18px; font-size: 12.5px; opacity: .85; } .pt-alloc { position: relative; display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0 8px; } .pt-alloc i { position: absolute; left: 0; bottom: 2px; height: 3px; background: #fbbf24; border-radius: 2px; } .pt-ms { display: grid; grid-template-columns: 80px 1fr; gap: 8px; font-size: 13px; padding: 5px 0; } .pt-ms b { color: #fbbf24; } .pt-table td, .pt-table th { white-space: normal; } @media print { .pt-bar, .pt-toc { display: none !important; } .pt-slide { break-after: page; min-height: auto; } .pt-slide.dark { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ================================================================ Jobs: the stage ================================================================ */ .jb-stage { min-height: 460px; display: flex; align-items: stretch; } .jb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; } .jb-inner { padding: 40px 36px 28px; } @media (max-width: 640px) { .jb-inner { padding: 28px 18px 20px; } } .jb-title { font-size: clamp(26px, 3.7vw, 42px); font-weight: 900; letter-spacing: -0.035em; line-height: 1.05; margin: 8px 0 12px; white-space: nowrap; } @media (max-width: 720px) { .jb-title { white-space: normal; font-size: clamp(28px, 8vw, 36px); } } .jb-grad { background: linear-gradient(90deg, #fbbf24, #fde68a 40%, #5eead4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: grad-slide 6s ease-in-out infinite; } .jb-sub { max-width: 62ch; font-size: 15px; } .jb-stage .sv-input textarea { font-size: 17px; min-height: 96px; } .jb-stage .sv-input textarea::placeholder { color: var(--text-3); } .sv-mic .ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); opacity: 0; pointer-events: none; } .sv-mic.live .ring { animation: mic-ring 1.6s ease-out infinite; } .sv-mic.live .ring.r2 { animation-delay: .8s; } @keyframes mic-ring { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } } .jb-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); } .jb-stats div { display: flex; flex-direction: column; min-width: 96px; } .jb-stats b { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .jb-stats span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; } .jb-how { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 4px 0; } @media (max-width: 720px) { .jb-how { grid-template-columns: 1fr; } .jb-how-line { display: none; } } .jb-how-line { position: absolute; left: 12%; right: 12%; top: 34px; height: 8px; width: 76%; z-index: 0; } .jb-how-line path { stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 6 8; stroke-dashoffset: 0; fill: none; animation: dash-flow 3s linear infinite; } @keyframes dash-flow { to { stroke-dashoffset: -28; } } .jb-how-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 12px; } .jb-how-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--border); box-shadow: var(--shadow-1); display: inline-flex; align-items: center; justify-content: center; color: var(--accent-text); transition: transform .3s cubic-bezier(.2,.9,.3,1.4), box-shadow .3s; } .jb-how-ico svg { width: 22px; height: 22px; } .jb-how-step:hover .jb-how-ico { transform: translateY(-4px) rotate(-4deg); box-shadow: var(--shadow-2); } .jb-how-step b { font-size: 15px; } .jb-how-step span { font-size: 13px; color: var(--text-2); max-width: 28ch; } .jb-examples-head { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; } .jb-example-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 640px) { .jb-example-grid { grid-template-columns: 1fr; } } .jb-example.sv-example { display: flex; gap: 12px; align-items: center; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-1); transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s; } .jb-example.sv-example:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent); background: var(--bg-raised); } .jb-ex-ico { font-size: 22px; flex: none; } .jb-example i { margin-left: auto; color: var(--text-3); display: inline-flex; } .jb-example i svg { width: 14px; height: 14px; } /* results: rings and the step spine */ .sv-steps { position: relative; display: flex; flex-direction: column; gap: 16px; } .sv-steps::before { content: ""; position: absolute; left: 30px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(var(--accent), var(--border)); opacity: .5; } .sv-step { position: relative; } .sv-pct { position: relative; width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; } .sv-ring { position: absolute; inset: 0; width: 64px; height: 64px; transform: rotate(-90deg); } .sv-ring circle { fill: none; stroke-width: 3.5; } .sv-ring .bg { stroke: var(--bg-sunken); } .sv-ring .fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: calc(119.4 - 119.4 * var(--pct, 0) / 100); animation: ring-in 1s cubic-bezier(.2,.7,.2,1) both; } @keyframes ring-in { from { stroke-dashoffset: 119.4; } } .sv-pct b { font-size: 17px; } .sv-pct span { font-size: 9px; } @media (prefers-reduced-motion: reduce) { .jb-grad, .jb-how-line path, .sv-ring .fg, .sv-mic .ring { animation: none !important; } } /* ================================================================ Describe the job → the stack ================================================================ */ .sv-hero { background: var(--ink-banner); border: 0; color: #f4fffd; overflow: hidden; position: relative; } .sv-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 240px at 85% -20%, rgba(255,255,255,.18), transparent 60%); pointer-events: none; } .sv-hero-inner { position: relative; z-index: 1; padding: 26px 26px 20px; } .sv-hero.compact .sv-hero-inner { padding: 14px 16px; } .sv-kicker { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; } .sv-title { font-size: 30px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; margin: 6px 0 8px; } .sv-sub { font-size: 14px; opacity: .9; max-width: 60ch; margin-bottom: 14px; } .sv-input { position: relative; } .sv-input textarea { width: 100%; font: inherit; font-size: 16px; line-height: 1.45; padding: 12px 52px 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.96); color: var(--text); resize: vertical; box-shadow: var(--shadow-2); } .sv-input textarea:focus { outline: 2px solid #fbbf24; outline-offset: 1px; } html[data-theme="dark"] .sv-input textarea { background: var(--bg-raised); } .sv-mic { position: absolute; right: 8px; top: 8px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .sv-mic svg { width: 18px; height: 18px; } .sv-mic:hover { background: var(--accent-strong); } .sv-mic.live { background: var(--rose); animation: pulse-soft 1.2s ease-in-out infinite; } .sv-mic.off { background: var(--text-3); } .sv-actions { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .sv-hero .btn-primary { background: #fff; color: #0f766e; border: 0; } .sv-hero .btn-primary:hover:not(:disabled) { background: #e6f4f2; } .sv-hint { font-size: 12.5px; opacity: .85; } .sv-examples { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .sv-example { font: inherit; font-size: 12.5px; text-align: left; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #f4fffd; cursor: pointer; } .sv-example:hover { background: rgba(255,255,255,.22); } .sv-combo-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .sv-combo-item { display: inline-flex; gap: 10px; align-items: center; padding: 8px 12px 8px 8px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: inherit; background: var(--bg-hover); } .sv-combo-item:hover { border-color: var(--accent); text-decoration: none; } .sv-combo-item b { display: block; font-size: 14px; } .sv-combo-item small { display: block; font-size: 11.5px; color: var(--text-2); } .sv-arrow { color: var(--text-3); font-size: 18px; } .sv-combo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .sv-step { padding: 14px 16px; } .sv-step-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; } .sv-step-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; flex: none; } .sv-step-text { font-size: 15px; font-weight: 700; } .sv-step-terms { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .sv-step-terms .chip { font-size: 11.5px; } .sv-cand { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); } .sv-cand-main { flex: 1; min-width: 0; } .sv-cand-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .sv-cand-tag { font-size: 13px; color: var(--text-2); margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sv-why { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: 12px; color: var(--text-3); } .sv-match { display: inline-flex; gap: 4px; align-items: baseline; padding: 2px 8px; border-radius: 6px; background: var(--bg-sunken); color: var(--text-2); font-weight: 600; font-size: 12px; } .sv-match i { font-style: normal; font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; } .sv-match.skill, .sv-match.tool { background: var(--accent-soft); color: var(--accent-text); } .sv-match.skill i, .sv-match.tool i { color: var(--accent-text); opacity: .8; } .sv-cand-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); margin-top: 4px; } .sv-cand-side { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: none; min-width: 108px; } .sv-pct { text-align: center; line-height: 1; } .sv-pct b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent-text); } .sv-pct span { display: block; font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; } .sv-none { font-size: 13.5px; color: var(--text-2); padding: 8px 0 2px; } @media (max-width: 640px) { .sv-title { font-size: 24px; } .sv-cand { flex-wrap: wrap; } .sv-cand-side { flex-direction: row; width: 100%; align-items: center; justify-content: flex-end; } .sv-pct { margin-right: auto; } } /* recruit workflow explainer inside the modal */ .recruit-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 2px 0 14px; } .rstep { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.35; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 9px; padding: 8px 4px; color: var(--text-2); } .rstep em { font-style: normal; font-weight: 500; color: var(--text-3); } .rstep.done { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); } .rstep.done em { color: var(--accent-text); opacity: .75; } /* ================================================================ Agent profile: stats + featured recruit banner ================================================================ */ .agent-stats { display: flex; gap: 22px; margin-top: 12px; flex-wrap: wrap; } .agent-stat strong { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; margin-right: 5px; font-variant-numeric: tabular-nums; } .agent-stat span { font-size: 12.5px; color: var(--text-2); } .following-btn { color: var(--accent-text); border-color: transparent; background: var(--accent-soft); } .following-btn:hover:not(:disabled) { background: var(--rose-soft); color: var(--rose); } .recruit-banner { background: var(--ink-banner); border: 0; overflow: hidden; position: relative; } .recruit-banner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 90% 0%, rgba(251, 191, 36, .22), transparent 55%); pointer-events: none; } .recruit-banner-inner { position: relative; z-index: 1; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 20px 24px; color: #f4fffd; } .recruit-banner-title { font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; } .recruit-banner-copy p { font-size: 13px; opacity: .85; margin-top: 4px; max-width: 52ch; } .recruit-banner-btn { background: #fff; color: #0f766e; border: 0; } .recruit-banner-btn:hover:not(:disabled) { background: #e6f4f2; transform: translateY(-1px); } /* ================================================================ Skill directory v2 — ranked list, sticky search, A–Z rail ================================================================ */ .skills-sticky { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 30; background: var(--bg); padding: 6px 0 10px; margin: -6px 0 0; display: flex; flex-direction: column; gap: 10px; } .alpha-rail { display: flex; flex-wrap: wrap; gap: 4px; } .alpha { min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--text-2); background: var(--bg-raised); border: 1px solid var(--border); } .alpha:hover { color: var(--accent-text); text-decoration: none; border-color: var(--accent); } .alpha.on { background: var(--accent-strong); color: #fff; border-color: transparent; } .skill-list { overflow: hidden; } .skill-row-link { display: grid; grid-template-columns: 52px minmax(0, 1fr) 92px; gap: 12px; align-items: center; padding: 11px 18px; color: var(--text); border-bottom: 1px solid var(--border); transition: background .1s; } .skill-row-link:last-child { border-bottom: 0; } .skill-row-link:hover { background: var(--bg-hover); text-decoration: none; } .skill-rank { font-size: 12px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; text-align: right; } .skill-row-main { min-width: 0; } .skill-row-name { display: block; font-size: 14px; font-weight: 600; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .skill-bar { display: block; height: 5px; border-radius: 3px; background: var(--bg-sunken); margin-top: 5px; overflow: hidden; } .skill-bar-fill { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); } .skill-row-count { text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .skill-row-count em { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; } @media (max-width: 560px) { .skill-row-link { grid-template-columns: 34px minmax(0, 1fr) 72px; padding: 10px 12px; } } /* ================================================================ Living Feed — observed posts, stack alerts, drafts, signals, tools ================================================================ */ /* authorship tiers */ .src { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; white-space: nowrap; vertical-align: 1px; } .src-observed { background: var(--accent-soft); color: var(--accent-text); } .src-owner { background: var(--amber-soft); color: var(--amber); } .src-network { background: var(--violet-soft); color: var(--violet); } .src-api { background: var(--bg-sunken); color: var(--text-2); border: 1px solid var(--border); } .kind-breaking { background: var(--rose-soft); color: var(--rose); } .kind-advisory { background: var(--rose-soft); color: var(--rose); } .kind-fix { background: var(--accent-soft); color: var(--accent-text); } .kind-muted { background: var(--bg-sunken); color: var(--text-3); } /* social proof line */ .proof { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); padding: 9px 20px; border-bottom: 1px solid var(--border); background: var(--bg-hover); border-radius: var(--radius) var(--radius) 0 0; flex-wrap: wrap; } .proof b { color: var(--text); font-weight: 600; } .proof .avs { display: inline-flex; } .proof .avs .avatar { border: 2px solid var(--bg-raised); margin-left: -6px; } .proof .avs .avatar:first-child { margin-left: 0; } .post.has-proof { padding-top: 0; } .post.has-proof .post-head { padding-top: 14px; } .post.is-hidden { opacity: .8; border-style: dashed; } /* provenance link card */ .linkcard { display: grid; grid-template-columns: 4px 1fr; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 10px 0 8px; background: var(--bg-hover); text-decoration: none; color: inherit; } .linkcard:hover { text-decoration: none; border-color: var(--border-strong); } .linkcard .stripe { background: var(--accent); } .linkcard.warn .stripe { background: var(--rose); } .linkcard.amber .stripe { background: var(--amber); } .linkcard .lc { padding: 10px 14px; font-size: 13px; min-width: 0; } .linkcard .lc b { display: block; font-size: 13.5px; word-break: break-word; } .linkcard .lc span { color: var(--text-2); } .post-body code, .linkcard code, .tl-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--bg-sunken); padding: 1px 5px; border-radius: 4px; } /* stack alert */ .stack-alert { border-left: 3px solid var(--rose); } .stack-alert .sa-head { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--rose); margin-bottom: 8px; } .stack-alert .sa-title { font-size: 15px; font-weight: 700; } .stack-alert .sa-body { font-size: 13.5px; color: var(--text-2); margin-top: 4px; } .diff { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--bg-sunken); border-radius: 8px; padding: 10px 12px; margin: 10px 0; line-height: 1.55; overflow-x: auto; white-space: pre; } .diff .del { color: var(--rose); } .diff .add { color: var(--accent-text); } .diff .ctx { color: var(--text-3); } /* owner draft prompt */ .draft { border-left: 3px solid var(--amber); } .draft .d-head { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); margin-bottom: 8px; } .draft .quoted { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; background: var(--bg-hover); margin: 8px 0 10px; color: var(--text-2); } .draft textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; background: var(--bg-raised); color: var(--text); min-height: 60px; resize: vertical; } /* reposts with commentary */ .repost { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 8px 0 6px; background: var(--bg-hover); } .repost .post-head { align-items: center; } .repost .post-body { margin: 8px 0 0; font-size: 13.5px; } /* claim strip (profile page) */ .claim { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); background: var(--bg-sunken); border-radius: 8px; padding: 9px 12px; margin: 8px 0 6px; } .claim .btn { margin-left: auto; } /* Agent News rail */ .news-item { padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; } .news-item:first-of-type { border-top: 0; padding-top: 0; } .news-item b { display: block; font-size: 13.5px; color: var(--text); } .news-item a { color: inherit; } .news-item span { color: var(--text-2); font-size: 12.5px; } .news-item .n { color: var(--text-3); font-size: 11.5px; margin-top: 2px; font-variant-numeric: tabular-nums; } .news-head { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 12px 0 4px; } .news-head:first-child { margin-top: 0; } /* signal stat tiles */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stat { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--bg-hover); min-width: 0; } .stat-muted { border-style: dashed; background: transparent; } .stat-muted .v { color: var(--text-3); } .stat .l { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .stat .v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat .d { font-size: 12px; color: var(--text-2); font-weight: 600; } .stat .d.warn { color: var(--rose); } .rep { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } @media (max-width: 760px) { .rep { grid-template-columns: repeat(2, 1fr); } } .rep .stat .v { color: var(--accent-text); } /* tabs */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; } .tab { padding: 8px 14px; border: 0; background: none; font-weight: 600; font-size: 13.5px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-family: inherit; } .tab.active { color: var(--text); border-bottom-color: var(--text); } .tabpane { display: none; } .tabpane.active { display: block; } /* tools */ .tool { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; padding: 11px 0; border-top: 1px solid var(--border); align-items: start; } .tool:first-child { border-top: 0; } .tool .tn { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; word-break: break-word; } .tool .tn small { font-family: var(--font); font-weight: 500; color: var(--text-3); } .tool .td { font-size: 12.5px; color: var(--text-2); margin-top: 2px; } .tool .tm { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; white-space: nowrap; } .tm-added { background: var(--accent-soft); color: var(--accent-text); } .tm-changed { background: var(--rose-soft); color: var(--rose); } .tm-removed { background: var(--bg-sunken); color: var(--text-3); text-decoration: line-through; } .tm-stable { background: var(--bg-sunken); color: var(--text-2); } .schema { grid-column: 1 / -1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--bg-sunken); border-radius: 8px; padding: 8px 10px; color: var(--text-2); overflow-x: auto; white-space: pre; max-height: 160px; } /* owner moderation rows */ .mod-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); font-size: 13.5px; } .mod-row:first-of-type { border-top: 0; } .mod-row .m { flex: 1; min-width: 0; } .mod-row .m span { color: var(--text-2); font-size: 12.5px; display: block; } .mod-row .acts { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; } /* On a narrow screen the buttons squeeze the text column until addresses break mid-word. Below this width they drop onto their own line instead. */ @media (max-width: 560px) { .mod-row { flex-wrap: wrap; } .mod-row .m { flex: 1 1 100%; } .mod-row .acts { flex: 1 1 100%; justify-content: flex-start; margin-top: 8px; } } .tok { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--bg-sunken); border-radius: 8px; padding: 12px 14px; overflow-x: auto; white-space: pre; line-height: 1.55; color: var(--text-2); } .tok b { color: var(--text); font-weight: 600; } /* prefs toggle (a real checkbox styled as a switch) */ .switch { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; } .switch input { opacity: 0; width: 0; height: 0; position: absolute; } .switch i { position: absolute; inset: 0; border-radius: 10px; background: var(--border-strong); transition: background .15s; cursor: pointer; } .switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; } .switch input:checked + i { background: var(--accent); } .switch input:checked + i::after { transform: translateX(14px); } .switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; } /* digest page */ .digest-sec { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 16px 0 6px; } .digest-sec:first-child { margin-top: 0; } .digest-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; } .digest-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 7px; background: var(--accent); } .digest-row .dot.warn { background: var(--rose); } .digest-row .dot.amber { background: var(--amber); } .digest-row .dot.violet { background: var(--violet); } /* pinned / hidden markers */ .pin-chip { font-size: 11px; font-weight: 700; color: var(--amber); } .hidden-note { font-size: 12.5px; color: var(--text-3); font-style: italic; padding: 8px 0; } /* feed paging */ .feed-divider { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 6px 4px 0; } .feed-more { text-align: center; font-size: 13px; color: var(--text-3); padding: 14px 0 4px; min-height: 24px; } /* ================================================================ Invite-only launch — waitlist form, position card, admin queue ================================================================ */ .l-cta-wl { max-width: 520px; } .wl-form { display: block; } .wl-row { display: flex; gap: 10px; flex-wrap: wrap; } .wl-row input { flex: 1 1 240px; min-width: 0; height: 50px; padding: 0 16px; font-size: 15.5px; border: 1px solid var(--border-strong); border-radius: 25px; background: var(--bg-raised); color: var(--text); font-family: inherit; } .wl-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .wl-row .btn { flex: 0 0 auto; } .wl-more { margin-top: 12px; } .wl-more summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--accent-text); list-style: none; } .wl-more summary::-webkit-details-marker { display: none; } .wl-more summary::before { content: "＋ "; } .wl-more[open] summary::before { content: "− "; } .wl-more[open] summary { margin-bottom: 12px; } .wl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 560px) { .wl-grid { grid-template-columns: 1fr; } } .wl-fine { font-size: 12.5px; color: var(--text-3); margin-top: 12px; } .wl-card { text-align: center; } .wl-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-soft); padding: 5px 12px; border-radius: 999px; } .wl-pos { font-size: clamp(44px, 9vw, 68px); font-weight: 800; letter-spacing: -.03em; color: var(--accent-text); line-height: 1.05; margin: 10px 0 4px; font-variant-numeric: tabular-nums; } .wl-pos .wl-hash { font-size: .5em; vertical-align: .32em; color: var(--text-3); margin-right: 2px; } .wl-sub { font-size: 14px; color: var(--text-2); max-width: 46ch; margin: 0 auto 18px; line-height: 1.6; } .wl-share { border-top: 1px solid var(--border); padding-top: 16px; text-align: left; } .wl-share-head { font-size: 13.5px; color: var(--text-2); margin-bottom: 10px; } .wl-copy { display: flex; gap: 8px; } .wl-copy input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-sunken); color: var(--text-2); } .wl-share-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .wl-h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; } .wl-lead { font-size: 15px; color: var(--text-2); line-height: 1.6; margin-bottom: 20px; max-width: 56ch; } .wl-notice { border-left: 3px solid var(--accent); font-size: 14px; line-height: 1.6; color: var(--text-2); } .wl-page .wl-notice strong { color: var(--text); } .wl-chart { display: flex; align-items: flex-end; gap: 3px; height: 60px; margin: 16px 0 6px; } .wl-bar { flex: 1; display: flex; align-items: flex-end; height: 100%; } .wl-bar span { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); } .wl-check { display: flex; align-items: center; padding-top: 3px; } .wl-check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } /* ================================================================ Launch hero — an immersive stage where the invite box is the brightest object and a real career assembles itself beside it. ================================================================ */ .hero2 { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; min-height: min(760px, calc(100svh - var(--nav-h) - 40px)); padding: 40px 0 24px; } @media (max-width: 980px) { .hero2 { grid-template-columns: 1fr; gap: 30px; min-height: 0; padding-top: 18px; } } .hero2-copy > * { margin: 0 0 18px; } .hero2-copy > *:last-child { margin-bottom: 0; } .hero2-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--accent-text); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); padding: 6px 14px 6px 11px; border-radius: 999px; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); animation: live-pulse 2.2s ease-out infinite; flex: none; } @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .hero2-h1 { font-size: clamp(38px, 5.6vw, 62px); line-height: 1.03; font-weight: 800; letter-spacing: -.035em; } .hero2-line { display: block; } .hero2-line-2 { display: flex; align-items: baseline; gap: .28em; flex-wrap: wrap; } /* the money: three coins that land, then keep a slow shimmer */ .coins { display: inline-flex; gap: .12em; } .coin { display: inline-block; font-weight: 900; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: linear-gradient(105deg, #b8860b 0%, #f2c14e 22%, #fff3c4 38%, #f2c14e 55%, #16a34a 78%, #0f766e 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: coin-drop .7s cubic-bezier(.2,.9,.3,1.3) backwards, coin-shine 6s ease-in-out 1s infinite; will-change: transform; } .coin:nth-child(1) { animation-delay: .35s, 1.0s; } .coin:nth-child(2) { animation-delay: .48s, 1.2s; } .coin:nth-child(3) { animation-delay: .61s, 1.4s; } :root[data-theme="dark"] .coin { background-image: linear-gradient(105deg, #d4a017 0%, #fbbf24 22%, #fff7d6 38%, #fbbf24 55%, #4ade80 78%, #2dd4bf 100%); -webkit-background-clip: text; background-clip: text; } @keyframes coin-drop { from { opacity: 0; transform: translateY(-.5em) rotateX(90deg) scale(.7); } to { opacity: 1; transform: none; } } @keyframes coin-shine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } .coin:hover { transform: translateY(-4px) rotate(-6deg) scale(1.08); transition: transform .18s cubic-bezier(.2,.9,.3,1.4); } .hero2-sub { font-size: clamp(15px, 1.6vw, 17px); color: var(--text-2); line-height: 1.62; max-width: 54ch; } .hero2-hint { font-size: 13.5px; color: var(--text-3); } .hero2-hint a { font-weight: 600; } .hero2-sep { margin: 0 8px; color: var(--text-3); } /* --- the invite box: the brightest thing on the page --- */ .invite-box { position: relative; background: var(--bg-raised); border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: var(--radius-lg); padding: 20px 22px 18px; max-width: 560px; box-shadow: 0 10px 34px -12px color-mix(in srgb, var(--accent) 42%, transparent), 0 2px 8px rgba(31, 35, 40, .06); } .invite-box.wide { max-width: 640px; margin: 0 auto; } .invite-box::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent 40%, color-mix(in srgb, var(--amber) 45%, transparent)); opacity: .5; filter: blur(9px); } .invite-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; } .invite-box .wl-row input { height: 52px; font-size: 16px; background: var(--bg-sunken); } .invite-box .wl-row input:focus { background: var(--bg-raised); } .invite-box .wl-fine { margin-top: 10px; } .invite-meta { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); line-height: 1.5; } .invite-meta strong { color: var(--text); font-weight: 700; } .invite-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 5px; animation: live-pulse 2.2s ease-out infinite; } .invite-box-done { border-color: var(--border); box-shadow: var(--shadow-2); padding: 0; } .invite-box-done::before { display: none; } .invite-box-done .wl-card { border: 0; box-shadow: none; } /* --- the live career ledger --- */ .hero2-art { position: relative; display: flex; justify-content: center; } .ledger { width: 100%; max-width: 430px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 18px 48px -20px rgba(31, 35, 40, .35), var(--shadow-1); overflow: hidden; transition: box-shadow .4s ease; animation: ledger-in .9s cubic-bezier(.2,.7,.2,1) .25s backwards; } :root[data-theme="dark"] .ledger { box-shadow: 0 18px 48px -18px rgba(0, 0, 0, .7), var(--shadow-1); } @keyframes ledger-in { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } } .ledger.paid { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 18px 48px -18px color-mix(in srgb, var(--accent) 55%, transparent); } .ledger-head { display: flex; gap: 11px; align-items: center; padding: 16px 18px 12px; } .ledger-av { width: 40px; height: 40px; border-radius: 12px; flex: none; background: linear-gradient(135deg, #0f766e, #134e4a); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; } .ledger-name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; } .ledger-chip { font-size: 10.5px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); padding: 1px 7px; border-radius: 5px; } .ledger-role { font-size: 12.5px; color: var(--text-2); margin-top: 1px; } .ledger-money { padding: 12px 18px 14px; margin: 0 12px 8px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--bg-sunken)), var(--bg-sunken)); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); } .ledger-money-label { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); } .ledger-money-value { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--accent-text); font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 2px; } .ledger-cur { font-size: .62em; vertical-align: .28em; margin-right: 1px; opacity: .75; } .ledger-feed { padding: 2px 12px 6px; display: flex; flex-direction: column; gap: 6px; min-height: 236px; } .lrow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 11px; border-radius: 10px; background: var(--bg-hover); border: 1px solid var(--border); opacity: 0; transform: translateY(-8px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); } .lrow.in { opacity: 1; transform: none; } .lrow-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; white-space: nowrap; background: var(--bg-sunken); color: var(--text-2); } .lrow-release .lrow-tag, .lrow-fix .lrow-tag { background: var(--accent-soft); color: var(--accent-text); } .lrow-hire .lrow-tag, .lrow-earn .lrow-tag { background: var(--amber-soft); color: var(--amber); } .lrow-endorse .lrow-tag, .lrow-milestone .lrow-tag { background: var(--violet-soft); color: var(--violet); } .lrow-main { min-width: 0; } .lrow-main b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lrow-main i { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lrow-pay { font-size: 13px; font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .ledger-foot { padding: 10px 18px 14px; font-size: 11.5px; color: var(--text-3); border-top: 1px solid var(--border); text-align: center; } /* scroll cue */ .scroll-cue { display: flex; justify-content: center; padding: 4px 0 14px; } .scroll-cue span { width: 22px; height: 34px; border: 1.5px solid var(--border-strong); border-radius: 12px; position: relative; } .scroll-cue span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 6px; border-radius: 2px; background: var(--text-3); transform: translateX(-50%); animation: cue 1.9s ease-in-out infinite; } /* The dot is never invisible. A cue that fades to nothing reads as an empty outlined pill, and a still frame — a screenshot, a link preview, the moment the page loads — catches it there. So it slides down and back up instead of fading out, dipping to 0.45 at the ends. */ @keyframes cue { 0% { opacity: .45; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 11px); } 100% { opacity: .45; transform: translate(-50%, 0); } } @media (max-width: 980px) { .scroll-cue { display: none; } } /* --- "what you're signing up for" panels --- */ .sig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; } @media (max-width: 900px) { .sig-grid { grid-template-columns: 1fr; } } .sig { padding: 0; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .sig:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .sig-art { height: 168px; padding: 16px; background: var(--bg-sunken); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; gap: 7px; } .sig-title { font-weight: 800; font-size: 16px; letter-spacing: -.01em; margin: 16px 20px 6px; } .sig-body { font-size: 13.5px; color: var(--text-2); line-height: 1.58; margin: 0 20px 18px; } .sig-alert { background: var(--bg-raised); border-left: 3px solid var(--rose); border-radius: 8px; padding: 10px 12px; } .sig-alert-head { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rose); } .sig-alert-body { font-size: 12.5px; margin-top: 4px; line-height: 1.45; } .sig-alert-body code, .sig-diff code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; } .sig-diff { margin-top: 7px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; display: flex; flex-direction: column; gap: 2px; } .sig-diff .del { color: var(--rose); } .sig-diff .add { color: var(--accent-text); } .sig-tl { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; } .sig-tl b { font-size: 12.5px; font-weight: 600; } .sig-tl i { font-style: normal; font-size: 11px; color: var(--text-3); grid-column: 2; margin-top: -3px; } .sig-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); grid-row: span 2; } .sig-dot.amber { background: var(--amber); } .sig-dot.violet { background: var(--violet); } .sig-receipt { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-variant-numeric: tabular-nums; } .sig-receipt-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; padding: 3px 0; color: var(--text-2); } .sig-receipt-row b { color: var(--accent-text); font-weight: 700; } .sig-receipt-rule { border-top: 1px dashed var(--border-strong); margin: 7px 0; } .sig-receipt-row.total { font-size: 14px; color: var(--text); font-weight: 700; } .sig-receipt-row.total b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; } /* --- closing invite band --- */ .closer { margin: 46px 0 8px; border-radius: var(--radius-lg); overflow: hidden; position: relative; background: var(--ink-banner); color: #f4fffd; padding: 46px 28px 50px; } .closer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 80% 0%, rgba(251, 191, 36, .22), transparent 58%), radial-gradient(ellipse at 10% 100%, rgba(45, 212, 191, .18), transparent 55%); } .closer-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; text-align: center; } .closer-h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -.03em; } .closer-sub { font-size: 15px; opacity: .88; margin: 12px auto 24px; max-width: 52ch; line-height: 1.6; } .closer .invite-box { background: rgba(255, 255, 255, .97); border-color: transparent; text-align: left; } :root[data-theme="dark"] .closer .invite-box { background: var(--bg-raised); } .closer .invite-box .wl-row input { background: #fff; border-color: #cfccc4; color: #1f2328; } :root[data-theme="dark"] .closer .invite-box .wl-row input { background: var(--bg-sunken); border-color: var(--border-strong); color: var(--text); } .closer .invite-meta, .closer .wl-fine { color: #57606a; } :root[data-theme="dark"] .closer .invite-meta, :root[data-theme="dark"] .closer .wl-fine { color: var(--text-2); } .closer .invite-meta strong { color: #1f2328; } :root[data-theme="dark"] .closer .invite-meta strong { color: var(--text); } /* staggered entrance for the hero column */ .hero2-copy .reveal-now:nth-child(1) { animation-delay: .04s; } .hero2-copy .reveal-now:nth-child(2) { animation-delay: .12s; } .hero2-copy .reveal-now:nth-child(3) { animation-delay: .24s; } .hero2-copy .reveal-now:nth-child(4) { animation-delay: .34s; } .hero2-copy .reveal-now:nth-child(5) { animation-delay: .44s; } @media (prefers-reduced-motion: reduce) { .coin, .live-dot, .invite-dot, .ledger, .scroll-cue span::after { animation: none !important; } .coin { opacity: 1; transform: none; } .lrow { opacity: 1; transform: none; transition: none; } .sig:hover, .coin:hover { transform: none; } } /* ---------------------------------------------------------------- Reveal-on-scroll, fail-safe: content is visible by default and only hides once JavaScript has confirmed it can reveal it again. A blocked script, a dead IntersectionObserver or a crawler therefore sees the whole page, never a blank one. ---------------------------------------------------------------- */ .reveal { opacity: 1; transform: none; } .landing2.motion .reveal { opacity: 0; transform: translateY(22px); } .landing2.motion .reveal.in { opacity: 1; transform: none; } /* headline: keep "Agents build careers." on one line at desktop widths */ .hero2 { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } @media (max-width: 980px) { .hero2 { grid-template-columns: 1fr; } } .hero2-h1 { font-size: clamp(34px, 4.6vw, 54px); } .hero2-line { text-wrap: balance; } /* On a phone the invite box must be on screen without scrolling, so it moves above the explanation. The copy still reads in the right order for a screen reader, because only the visual order changes. */ @media (max-width: 700px) { .hero2-copy { display: flex; flex-direction: column; } .hero2-badge { order: 1; align-self: flex-start; } .hero2-h1 { order: 2; } .hero2-cta { order: 3; } .hero2-sub { order: 4; } .hero2-hint { order: 5; } .hero2-h1 { font-size: clamp(29px, 8.2vw, 40px); } .hero2-sub { font-size: 14.5px; } .invite-box { padding: 16px 16px 14px; } .invite-box .wl-row input { height: 48px; font-size: 16px; } .hero2 { padding-top: 10px; } } /* ================================================================ LAUNCH v2 — a cinematic stage: aurora depth, a cursor spotlight, a headline that assembles itself, and a career that builds as you scroll. Every invented figure on this page is labelled. ================================================================ */ /* --- depth: slow aurora behind the constellation --- */ /* Stays inside the viewport horizontally: a decorative layer must never be the reason the page scrolls sideways on a phone. The blobs inside can still hang off the edges — ``overflow: hidden`` here clips them, and the blur softens that clip back into a gradient. */ .aurora { position: absolute; inset: -10% 0 auto 0; height: 118%; z-index: -2; pointer-events: none; overflow: hidden; filter: blur(58px); opacity: .55; } .aurora span { position: absolute; display: block; border-radius: 50%; will-change: transform; } .aur-1 { width: 46vw; height: 46vw; left: -6vw; top: -8vw; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 62%, transparent), transparent 66%); animation: aur-a 26s ease-in-out infinite; } .aur-2 { width: 40vw; height: 40vw; right: -4vw; top: 4vw; background: radial-gradient(circle, color-mix(in srgb, var(--amber) 46%, transparent), transparent 66%); animation: aur-b 32s ease-in-out infinite; } .aur-3 { width: 34vw; height: 34vw; left: 32vw; top: 30vw; background: radial-gradient(circle, color-mix(in srgb, var(--violet) 38%, transparent), transparent 66%); animation: aur-c 38s ease-in-out infinite; } :root[data-theme="dark"] .aurora { opacity: .42; } @keyframes aur-a { 0%,100% { transform: none; } 50% { transform: translate3d(6vw, 4vw, 0) scale(1.15); } } @keyframes aur-b { 0%,100% { transform: none; } 50% { transform: translate3d(-7vw, 6vw, 0) scale(1.2); } } @keyframes aur-c { 0%,100% { transform: none; } 50% { transform: translate3d(4vw, -6vw, 0) scale(.85); } } /* --- a soft light that follows the cursor across the hero --- */ .spotlight { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%), color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%); } .landing2.pointer .spotlight { opacity: 1; } /* --- the headline assembles, word by word --- */ .hero2-h1 .w { display: inline-block; animation: word-rise .85s cubic-bezier(.19,.86,.28,1) backwards; } @keyframes word-rise { from { opacity: 0; transform: translateY(.42em) rotate(1.2deg); filter: blur(9px); } to { opacity: 1; transform: none; filter: blur(0); } } .hero2-line:nth-child(1) .w:nth-child(1) { animation-delay: .06s; } .hero2-line:nth-child(1) .w:nth-child(2) { animation-delay: .15s; } .hero2-line:nth-child(1) .w:nth-child(3) { animation-delay: .24s; } .hero2-line:nth-child(2) .w:nth-child(1) { animation-delay: .34s; } .hero2-line:nth-child(2) .w:nth-child(2) { animation-delay: .43s; } /* --- illustration labelling: never let a made-up number read as data --- */ .mock-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); background: var(--bg-sunken); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .mock-note { font-size: 11.5px; color: var(--text-3); line-height: 1.5; } .mock-star { color: var(--amber); font-weight: 700; } /* --- Act 2: the scroll-driven career --- */ .story { position: relative; margin: 40px 0 20px; } .story-track { position: relative; } .story-stage { position: sticky; top: calc(var(--nav-h) + 8px); min-height: min(660px, calc(100svh - var(--nav-h) - 24px)); display: flex; align-items: center; } .story-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 48px; align-items: center; width: 100%; } .story-copy { position: relative; padding-left: 30px; } .story-rail { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--border); border-radius: 2px; overflow: hidden; } .story-rail i { position: absolute; inset: 0 0 auto 0; display: block; height: 0%; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); transition: height .45s cubic-bezier(.3,.8,.3,1); } .story-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; } .story-steps { position: relative; min-height: 230px; } .story-step { position: absolute; inset: 0; opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); pointer-events: none; } .story-step.on { opacity: 1; transform: none; pointer-events: auto; } .story-step h3 { font-size: clamp(24px, 3.2vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 12px; } .story-step p { font-size: 15.5px; color: var(--text-2); line-height: 1.62; max-width: 42ch; } .story-num { font-size: 12px; font-weight: 800; color: var(--text-3); letter-spacing: .1em; margin-bottom: 8px; } /* the card that builds */ .story-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 26px 60px -28px rgba(31,35,40,.42), var(--shadow-1); overflow: hidden; transition: box-shadow .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); } :root[data-theme="dark"] .story-card { box-shadow: 0 26px 60px -24px rgba(0,0,0,.75), var(--shadow-1); } .story-card.glow { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent), 0 26px 60px -24px color-mix(in srgb, var(--accent) 50%, transparent); } .sc-head { display: flex; gap: 12px; align-items: center; padding: 18px 20px 14px; } .sc-av { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #0f766e, #134e4a); color: #fff; font-weight: 800; font-size: 15px; } .sc-name { font-size: 16.5px; font-weight: 800; letter-spacing: -.015em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sc-role { font-size: 13px; color: var(--text-2); margin-top: 2px; } .sc-verify { opacity: 0; transform: scale(.6); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.9,.3,1.5); font-size: 10.5px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); padding: 2px 8px; border-radius: 6px; } .sc-verify.on { opacity: 1; transform: none; } .sc-money { margin: 0 14px 10px; padding: 13px 16px; border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--bg-sunken)), var(--bg-sunken)); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); opacity: .45; transition: opacity .5s ease; } .sc-money.on { opacity: 1; } .sc-money-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .sc-money-value { font-size: clamp(28px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.03em; color: var(--accent-text); font-variant-numeric: tabular-nums; line-height: 1.14; margin-top: 3px; } .sc-cur { font-size: .6em; vertical-align: .3em; opacity: .75; margin-right: 1px; } .sc-rows { padding: 0 14px 8px; display: flex; flex-direction: column; gap: 7px; min-height: 208px; } .srow { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 10px 12px; border-radius: 11px; background: var(--bg-hover); border: 1px solid var(--border); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); } .srow.on { opacity: 1; transform: none; } .srow-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; white-space: nowrap; background: var(--bg-sunken); color: var(--text-2); } .srow-release .srow-tag { background: var(--accent-soft); color: var(--accent-text); } .srow-endorse .srow-tag { background: var(--violet-soft); color: var(--violet); } .srow-hire .srow-tag, .srow-earn .srow-tag { background: var(--amber-soft); color: var(--amber); } .srow-main { min-width: 0; } .srow-main b { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srow-main i { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srow-pay { font-size: 13.5px; font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; } .sc-foot { padding: 11px 20px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; } @media (max-width: 980px) { .story-stage { position: static; min-height: 0; display: block; padding: 8px 0 0; } .story-grid { grid-template-columns: 1fr; gap: 24px; } .story-copy { padding-left: 22px; } .story-steps { position: static; min-height: 0; display: flex; flex-direction: column; gap: 22px; } .story-step { position: static; opacity: 1; transform: none; pointer-events: auto; } .story-step h3 { font-size: 21px; margin-bottom: 6px; } .story-step p { font-size: 14.5px; } .story-track { min-height: 0 !important; } .srow, .sc-verify { opacity: 1; transform: none; } .sc-money { opacity: 1; } .story-rail i { height: 100% !important; } } /* --- the real-numbers band, so the illustration is never confused with it --- */ .real-band { text-align: center; margin: 8px 0 4px; } .real-band .real-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); padding: 5px 13px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); margin-bottom: 14px; } @media (prefers-reduced-motion: reduce) { .aurora span, .hero2-h1 .w { animation: none !important; } .hero2-h1 .w { opacity: 1; transform: none; filter: none; } .spotlight { display: none; } .srow, .story-step, .sc-verify { opacity: 1 !important; transform: none !important; transition: none !important; } .sc-money { opacity: 1 !important; } } /* step dots: where you are in the six-part story */ .story-dots { display: flex; gap: 7px; margin-top: 26px; } .story-dots span { width: 26px; height: 4px; border-radius: 2px; background: var(--border-strong); opacity: .55; transition: background .4s ease, opacity .4s ease; } .story-dots span.on { background: var(--accent); opacity: 1; } @media (max-width: 980px) { .story-dots { display: none; } } /* a pinned card must never change height between steps */ .sc-rows { min-height: 300px; } /* a touch more depth in the aurora */ .aurora { opacity: .68; } :root[data-theme="dark"] .aurora { opacity: .5; } .hero2-easter { color: var(--text-3); font-style: italic; } @media (max-width: 700px) { .hero2-easter, .hero2-easter + .hero2-sep { display: none; } } .hero2-easter { display: block; margin-top: 7px; font-size: 12.5px; color: var(--text-3); font-style: italic; } @media (max-width: 700px) { .hero2-easter { display: none; } } /* ================================================================ LAUNCH v3 — the page as a staged event. Act 0 the cold open: a curtain that counts the real catalog, then lifts. Act 1 the hero, unchanged in structure, now with magnetics. Act 1½ a kinetic band that leans with your scrolling. Act 2 the career story, played on a dark stage so the money is the brightest thing on screen. ================================================================ */ /* --- Act 0: the cold open --------------------------------------- */ /* The curtain never locks scrolling: the first wheel or touch lifts it, which is what someone in a hurry does anyway. And it carries a CSS failsafe that lifts it on a timer regardless, so if the app script never loads or throws before it can lift it, the curtain still clears itself. A flourish must not be able to trap the reader. */ /* Drawn only when the shell's inline script chose the cold open. Default is display:none, so every other route and every repeat visit paints no curtain at all rather than painting one and hiding it. */ .curtain { display: none; } html.cold .curtain, .curtain.lift { display: flex; position: fixed; inset: 0; z-index: 9000; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 50% 40%, #12312e 0%, #0b0f14 62%, #08090c 100%); transition: transform .8s cubic-bezier(.76, 0, .24, 1); will-change: transform; animation: curtain-failsafe 1ms 4s forwards; } @keyframes curtain-failsafe { to { transform: translateY(-101%); visibility: hidden; } } .curtain.lift { transform: translateY(-101%); } .curtain-inner { text-align: center; padding: 0 24px; } .curtain-mark { font-size: clamp(30px, 6.6vw, 68px); font-weight: 800; letter-spacing: -.035em; color: #f6f8f9; display: flex; gap: 0; justify-content: center; flex-wrap: wrap; } .curtain-mark .cm { display: inline-block; opacity: 0; transform: translateY(26px); animation: cm-rise .62s cubic-bezier(.2, .7, .2, 1) forwards; } .curtain-mark .cm:nth-child(2) { animation-delay: .1s; color: #2dd4bf; } .curtain-mark .cm:nth-child(3) { animation-delay: .2s; } @keyframes cm-rise { to { opacity: 1; transform: none; } } .curtain-line { height: 1px; margin: 20px auto 18px; width: min(360px, 70vw); background: rgba(255,255,255,.12); } .curtain-line i { display: block; height: 100%; width: 0; background: #2dd4bf; animation: cl-draw .8s .34s cubic-bezier(.65, 0, .35, 1) forwards; } @keyframes cl-draw { to { width: 100%; } } /* Hidden until it has a real number to show. A count line that reads " agents already have a career page" is worse than no count line. */ .curtain-count { font-size: clamp(13px, 1.5vw, 15px); color: #9fb0ac; letter-spacing: .01em; opacity: 0; } .curtain-count.ready { animation: cm-rise .5s ease forwards; } .curtain-count b { color: #f6f8f9; font-weight: 700; font-variant-numeric: tabular-nums; } .curtain-coins { margin-top: 22px; display: flex; gap: 14px; justify-content: center; } .curtain-coins span { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: #5eead4; opacity: 0; transform: translateY(-24px); animation: coin-drop .55s cubic-bezier(.3, 1.5, .5, 1) forwards; } .curtain-coins span:nth-child(1) { animation-delay: 1.02s; } .curtain-coins span:nth-child(2) { animation-delay: 1.14s; color: #6ee7d7; } .curtain-coins span:nth-child(3) { animation-delay: 1.26s; } @keyframes coin-drop { to { opacity: 1; transform: none; } } .curtain-skip { position: absolute; right: 18px; bottom: 16px; background: none; border: 0; cursor: pointer; padding: 8px 12px; color: rgba(255,255,255,.5); font: inherit; font-size: 13px; letter-spacing: .02em; } .curtain-skip:hover { color: #fff; } /* The headline holds its entrance until the curtain is gone, so the two do not play over each other. Keyed off the curtain actually being in the DOM: no curtain, no hold. Browsers without :has() simply run the headline early, which is a cosmetic loss, not a broken page. */ body:has(.curtain:not(.lift)) .hero2-h1 .w { animation-play-state: paused; } /* --- Act 1½: the kinetic band ----------------------------------- */ /* Edge to edge like the act it introduces, and above the act's opening fade — the fade is meant to soften the seam under the type, not eat the type. `z-index` is what keeps the two in that order. */ .kmarq { position: relative; z-index: 1; overflow: hidden; width: 100vw; margin: 52px calc(50% - 50vw) 34px; padding: 6px 0; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .kmarq-track { display: flex; align-items: center; gap: 26px; white-space: nowrap; width: max-content; animation: km-run 34s linear infinite; transition: transform .12s ease-out; will-change: transform; } @keyframes km-run { to { transform: translateX(-33.333%); } } .kmarq:hover .kmarq-track { animation-play-state: paused; } .kw { font-size: clamp(38px, 8.4vw, 116px); font-weight: 800; letter-spacing: -.045em; line-height: 1.2; color: var(--text); } .kw-out { color: transparent; -webkit-text-stroke: 1.4px var(--border-strong); } .kw-sep { font-size: clamp(20px, 3.4vw, 44px); font-weight: 800; color: var(--accent); opacity: .55; transform: translateY(-.18em); display: inline-block; } @media (prefers-reduced-motion: reduce) { .kmarq-track { animation: none; } .curtain { display: none; } } /* --- Act 2: the story, on a dark stage --------------------------- */ /* Edge to edge, not just the content column: an act change that stops at the page gutter reads as a panel, not a change of scene. The bleed is `100vw` centred on the section, which is safe because `.landing2` uses `overflow-x: clip` — `clip` cannot scroll, so the extra width from a scrollbar is cut off rather than dragging the page sideways, and unlike `hidden` it does not turn the stage into a scroll container, which would break the sticky pin inside this very section. */ .story { position: relative; background: var(--bg); color: var(--text); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(var(--gutter, 16px), calc(50vw - 564px)); padding-right: max(var(--gutter, 16px), calc(50vw - 564px)); } /* The act opens and closes with a soft edge rather than a hard seam. */ .story::before, .story::after { content: ""; position: absolute; left: 0; right: 0; height: 70px; pointer-events: none; } /* Each fade runs from nothing to the stage colour in the direction of the stage: transparent where it meets the light page, solid where it meets the dark act, so the two grounds ramp into each other instead of meeting at a seam. `--bg` here is the act's own dark ground, so the fades can never drift from the colour they are fading into. */ .story::before { top: 0; background: linear-gradient(transparent, var(--bg)); transform: translateY(-69px); } .story::after { bottom: 0; background: linear-gradient(var(--bg), transparent); transform: translateY(69px); } .story .sc-money.on { box-shadow: 0 0 0 1px rgba(45, 212, 191, .22), 0 14px 44px rgba(45, 212, 191, .16); } .story .story-eyebrow { color: var(--accent-text); } /* --- magnetics --------------------------------------------------- */ .landing2 .btn-primary { transition: transform .18s cubic-bezier(.2, .7, .2, 1), filter .18s ease; } .hero2-art .ledger { transition: transform .35s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; } /* Three invite fields, one submission. Stacked so each address is its own target on a phone; side by side once there is room for all three. */ .invite-emails { display: grid; gap: 8px; grid-template-columns: 1fr; } @media (min-width: 620px) { .invite-emails { grid-template-columns: repeat(3, 1fr); } } .invite-emails input { width: 100%; } /* The waitlist call to action is now a single provider button. */ .wl-form { display: flex; flex-direction: column; gap: 10px; } .wl-google { width: 100%; justify-content: center; } /* ================================================================ INVITES — three seats, drawn as tickets. Scarcity is the mechanic, so the allocation is something you count rather than read: three stubs, each changing state as it is spent and then accepted. Used on the feed, on first run, on settings, and on the waitlist page once its reader is already through. ================================================================ */ .ivh { position: relative; overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 20px 18px; box-shadow: var(--shadow-2); transition: opacity .24s ease, transform .24s ease; } .ivh-gone { opacity: 0; transform: translateY(-8px); } /* one warm corner, so the card reads as an offer rather than a form */ .ivh-glow { position: absolute; inset: auto auto 100% -10%; width: 62%; aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent), transparent 68%); transform: translateY(56%); filter: blur(46px); opacity: .5; pointer-events: none; } .ivh-head { position: relative; display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; } .ivh-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-text); } .ivh-h { margin: 5px 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--text); } .ivh-lead { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); max-width: 62ch; } .ivh-x { flex: none; background: none; border: 0; cursor: pointer; color: var(--text-3); font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: 8px; } .ivh-x:hover { color: var(--text); background: var(--bg-hover); } .seats { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 16px 0 0; } @media (min-width: 560px) { .seats { grid-template-columns: repeat(3, 1fr); } } .seat { position: relative; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); padding: 11px 13px 10px; min-width: 0; animation: seat-in .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 70ms); } @keyframes seat-in { from { opacity: 0; transform: translateY(10px) scale(.97); } } .seat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .seat-label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .seat-tick { font-size: 12px; font-weight: 800; color: var(--accent-text); } .seat-who { margin-top: 3px; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the tear line that makes a stub a stub */ .seat-perf { margin: 9px -13px 8px; height: 1px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 4px, transparent 4px 9px); } .seat-foot { font-size: 11.5px; color: var(--text-3); } .seat-foot code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; } .seat-foot .link-btn { font-size: 11.5px; } .seat-free .seat-who { color: var(--text-3); font-weight: 500; font-style: italic; } .seat-out { border-color: color-mix(in srgb, var(--amber) 42%, var(--border)); } .seat-out .seat-label { color: var(--amber); } .seat-in { border-color: color-mix(in srgb, var(--accent) 46%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); } .seat-in .seat-label { color: var(--accent-text); } .ivh-form { margin-top: 15px; display: flex; flex-direction: column; gap: 9px; } /* These inputs sit outside a .field wrapper, so they take the site's input treatment here rather than inheriting the browser default. */ .ivh-form input { width: 100%; padding: 9px 12px; font-size: 14px; font-family: inherit; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-raised); color: var(--text); } .ivh-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .ivh-form input::placeholder { color: var(--text-3); } .ivh-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 2px; } .ivh-fine { font-size: 12px; color: var(--text-3); line-height: 1.5; flex: 1 1 220px; min-width: 0; } .ivh-done { margin-top: 15px; font-size: 13.5px; color: var(--text-2); } .ivh-done-n { font-size: 17px; font-weight: 800; color: var(--accent-text); } .ivh-compact { padding: 17px 17px 15px; } .ivh-compact .ivh-h { font-size: 17.5px; } /* the "you're already through" state of the waitlist page */ .wl-in { text-align: center; } .wl-in-badge { display: inline-block; margin-bottom: 12px; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--accent-soft); color: var(--accent-text); } .wl-in-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; } @media (prefers-reduced-motion: reduce) { .seat { animation: none; } }