/* ============================================================================ XLN STREAM — DESIGN SYSTEM Location: /public_html/assets/xln-system.css Version: 1.0.0 Scope: the timeline reskin. Post card, ledger line, sidebar panels, live strip, states. This does NOT own layout — /profile/assets/styles.css still owns .app, .main, .content-grid and .stack. COLLISION SAFETY Every class is prefixed `xs-`. The timeline also loads profile/styles.css, which already defines .card, .post, .avatar, .identity, .spinner and .group-icon. Prefixing lets old and new coexist for the whole migration. SEMANTIC RULES Gold FILLED = the user's own primary action Gold INK = value that already exists (earnings, balance, ledger) Purple = value being sent. One filled purple per screen. Green = settled fact. Confirms, never invites. Live (red) = happening right now. Never on a control. Neutral = attention. Free actions carry no accent at all. THEMING data-theme="dark" | "light" on . No component hardcodes a color; --xs-tint-* is the hinge that flips white-alpha overlays to ink-alpha. ============================================================================ */ /* --------------------------------------------------------------------------- 1. TOKENS --------------------------------------------------------------------------- */ /* Always-dark surfaces. Identical in both themes by design, so a dark media block on a light page reads as one deliberate concept, not an un-themed leak. */ :root { --xs-deep-a: #1E1832; --xs-deep-b: #0B0A11; --xs-deep-ink: #F4F1FA; --xs-deep-ink-2: #C4BCD2; --xs-deep-line: rgba(255,255,255,.13); --xs-deep-tint: rgba(255,255,255,.06); --xs-live: #E7563F; --xs-r-sm: 8px; --xs-r-md: 12px; --xs-r-lg: 18px; --xs-r-pill: 999px; } /* --------------------------------------------------------------------------- SURFACE TOKEN FALLBACK — do not remove --------------------------------------------------------------------------- Every surface token below was originally defined ONLY inside [data-theme="dark"] and [data-theme="light"]. Any page that loads this stylesheet without stamping a data-theme attribute on therefore resolved all of them to nothing: .xs-card { background: var(--xs-panel); } -> transparent .xs-post text -> inherited near-white /timeline sets data-theme="light" explicitly, so it looked fine. /profile never sets it, so its post cards rendered as transparent boxes with near-white text over a light theme canvas — invisible. A colour must never have its only definition inside a [data-theme] or media block. These bare :root values are the light palette repeated as a default. Both [data-theme] blocks below are more specific, so an explicit theme still wins in either direction and /timeline is completely unaffected. --------------------------------------------------------------------------- */ :root { --xs-page: #F2F1F7; --xs-page-2: #E9E7F1; --xs-panel: rgba(255,255,255,.94); --xs-panel-solid: #FFFFFF; --xs-panel-2: #F5F4F9; --xs-line: rgba(18,14,31,.10); --xs-line-strong: rgba(18,14,31,.19); --xs-text: #191624; --xs-text-2: #514A61; --xs-text-3: #6E6680; --xs-tint-1: rgba(18,14,31,.035); --xs-tint-2: rgba(18,14,31,.055); --xs-tint-3: rgba(18,14,31,.09); --xs-inset: rgba(255,255,255,.9); --xs-gold: #7E5A0C; --xs-gold-2: #D3A53A; --xs-gold-soft: rgba(211,165,58,.18); --xs-gold-ink: #17110A; --xs-purple: #5B3FC4; --xs-purple-2: #7C5DE0; --xs-purple-soft: rgba(91,63,196,.10); --xs-purple-ink: #FFFFFF; --xs-green: #07714F; --xs-green-soft: rgba(7,113,79,.10); --xs-shadow: 0 18px 46px rgba(55,45,80,.08), 0 2px 8px rgba(55,45,80,.04); --xs-shadow-hover: 0 26px 70px rgba(55,45,80,.13), 0 4px 14px rgba(55,45,80,.06); --xs-glow-purple: 0 10px 24px rgba(91,63,196,.16); } [data-theme="dark"] { --xs-page: #06060A; --xs-page-2: #0A0910; --xs-panel: rgba(17,16,25,.86); --xs-panel-solid: #111019; --xs-panel-2: #171522; --xs-line: rgba(255,255,255,.075); --xs-line-strong: rgba(255,255,255,.145); --xs-text: #F2F0F8; --xs-text-2: #B7B1C4; --xs-text-3: #8D8699; --xs-tint-1: rgba(255,255,255,.028); --xs-tint-2: rgba(255,255,255,.06); --xs-tint-3: rgba(255,255,255,.10); --xs-inset: rgba(255,255,255,.035); --xs-gold: #F3C65F; --xs-gold-2: #9F742A; --xs-gold-soft: rgba(243,198,95,.12); --xs-gold-ink: #0B0910; --xs-purple: #9B7DF0; --xs-purple-2: #7557D4; --xs-purple-soft: rgba(155,125,240,.14); --xs-purple-ink: #FFFFFF; --xs-green: #2CE0A2; --xs-green-soft: rgba(44,224,162,.11); --xs-shadow: 0 20px 60px rgba(0,0,0,.28), 0 2px 10px rgba(0,0,0,.18); --xs-shadow-hover: 0 28px 84px rgba(0,0,0,.38), 0 4px 18px rgba(0,0,0,.22); --xs-glow-purple: 0 10px 26px rgba(117,87,212,.22); } [data-theme="light"] { --xs-page: #F2F1F7; --xs-page-2: #E9E7F1; --xs-panel: rgba(255,255,255,.94); --xs-panel-solid: #FFFFFF; --xs-panel-2: #F5F4F9; --xs-line: rgba(18,14,31,.10); --xs-line-strong: rgba(18,14,31,.19); --xs-text: #191624; --xs-text-2: #514A61; --xs-text-3: #6E6680; --xs-tint-1: rgba(18,14,31,.035); --xs-tint-2: rgba(18,14,31,.055); --xs-tint-3: rgba(18,14,31,.09); --xs-inset: rgba(255,255,255,.9); /* Gold splits by role: #F3C65F fails contrast as type on white, so ink weight darkens while edges and fills keep the brand hue. */ --xs-gold: #7E5A0C; --xs-gold-2: #D3A53A; --xs-gold-soft: rgba(211,165,58,.18); --xs-gold-ink: #17110A; --xs-purple: #5B3FC4; --xs-purple-2: #7C5DE0; --xs-purple-soft: rgba(91,63,196,.10); --xs-purple-ink: #FFFFFF; --xs-green: #07714F; --xs-green-soft: rgba(7,113,79,.10); --xs-shadow: 0 18px 46px rgba(55,45,80,.08), 0 2px 8px rgba(55,45,80,.04); --xs-shadow-hover: 0 26px 70px rgba(55,45,80,.13), 0 4px 14px rgba(55,45,80,.06); --xs-glow-purple: 0 10px 24px rgba(91,63,196,.16); } /* --------------------------------------------------------------------------- 2. PAGE BASE Applied via .xs-page on , so nothing leaks onto other pages that happen to load this file. --------------------------------------------------------------------------- */ .xs-page { color: var(--xs-text); transition: color .3s ease; } .xs-page h1, .xs-page h2, .xs-page h3 { color: var(--xs-text); } .xs-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } .xs-display { font-family: "Space Grotesk", Inter, sans-serif; letter-spacing: -.03em; } .xs-page-title { font-family: "Space Grotesk", Inter, sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--xs-text); margin: 0; } .xs-page-sub { color: var(--xs-text-2); margin: 8px 0 0; font-size: 14px; } /* --------------------------------------------------------------------------- 3. THEME TOGGLE --------------------------------------------------------------------------- */ .xs-theme-toggle { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--xs-line); border-radius: 50%; color: var(--xs-text-2); background: var(--xs-panel-2); cursor: pointer; transition: color .16s ease, border-color .16s ease; } .xs-theme-toggle:hover { color: var(--xs-text); border-color: var(--xs-line-strong); } .xs-theme-toggle svg { width: 17px; height: 17px; } [data-theme="dark"] .xs-icon-sun { display: block; } [data-theme="dark"] .xs-icon-moon { display: none; } [data-theme="light"] .xs-icon-sun { display: none; } [data-theme="light"] .xs-icon-moon { display: block; } /* --------------------------------------------------------------------------- 4. CARD --------------------------------------------------------------------------- */ .xs-card { position: relative; overflow: hidden; border: 1px solid var(--xs-line); border-radius: var(--xs-r-lg); background: var(--xs-panel); box-shadow: var(--xs-shadow); backdrop-filter: blur(16px); } .xs-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px var(--xs-inset); } /* --------------------------------------------------------------------------- 5. AVATAR + IDENTITY --------------------------------------------------------------------------- */ .xs-avatar { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--xs-line); border-radius: 50%; color: var(--xs-text-2); background: linear-gradient(135deg, var(--xs-purple-soft), var(--xs-gold-soft)), var(--xs-panel-2); font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; } .xs-avatar img { width: 100%; height: 100%; object-fit: cover; } .xs-avatar--sm { width: 34px; height: 34px; font-size: 13px; } .xs-avatar--xs { width: 30px; height: 30px; font-size: 12px; } .xs-avatar--verified { box-shadow: 0 0 0 2px var(--xs-panel-solid), 0 0 0 4px var(--xs-green); } .xs-identity { display: flex; gap: 12px; align-items: flex-start; } .xs-identity-copy { flex: 1; min-width: 0; } .xs-identity-top { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } .xs-identity-name { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 14.5px; color: var(--xs-text); text-decoration: none; } .xs-identity-name:hover { text-decoration: underline; } .xs-badge { padding: 3px 7px; border-radius: var(--xs-r-pill); color: var(--xs-text-2); background: var(--xs-panel-2); font-size: 10px; } .xs-identity-role { margin-top: 3px; color: var(--xs-text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xs-identity-time { color: var(--xs-text-3); font-size: 11.5px; white-space: nowrap; } /* --------------------------------------------------------------------------- 6. ORIGIN RIBBON Where a post came from. Independent of medium — a community post can also be a video. Context is never a value color. --------------------------------------------------------------------------- */ .xs-origin { display: flex; align-items: center; gap: 9px; padding: 10px 20px; border-bottom: 1px solid var(--xs-line); background: var(--xs-tint-1); color: var(--xs-text-2); font-size: 11.5px; } .xs-origin > svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--xs-text-3); } .xs-origin a, .xs-origin strong { color: var(--xs-text); font-weight: 600; text-decoration: none; } .xs-origin a:hover { text-decoration: underline; } .xs-origin-spacer { flex: 1; } .xs-origin-glyph { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 5px; display: grid; place-items: center; overflow: hidden; font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 9px; color: var(--xs-gold-ink); background: linear-gradient(135deg, #FFE39A, #E2A93C); } /* --------------------------------------------------------------------------- 7. POST Conviction weight: absence is quiet, presence is visible. No zeros printed. --------------------------------------------------------------------------- */ .xs-post { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .xs-post:hover { transform: translateY(-2px); border-color: var(--xs-line-strong); box-shadow: var(--xs-shadow-hover); } .xs-post + .xs-post { margin-top: 16px; } .xs-post-body { padding: 20px 20px 15px; } .xs-post-text { margin: 13px 0 0; color: var(--xs-text); font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: break-word; } .xs-actions { display: flex; align-items: center; gap: 3px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--xs-line); } .xs-actions-spacer { flex: 1; } /* Free actions carry no accent. A liked heart fills with ink, never gold. */ .xs-react { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--xs-r-sm); color: var(--xs-text-2); background: transparent; cursor: pointer; font-size: 12px; font-family: inherit; transition: color .16s ease, background .16s ease; } .xs-react:hover { color: var(--xs-text); background: var(--xs-panel-2); } .xs-react svg { width: 16px; height: 16px; } .xs-react[data-active="1"] { color: var(--xs-text); } .xs-react[data-active="1"] svg { fill: currentColor; } .xs-react[disabled] { opacity: .45; cursor: not-allowed; } .xs-count { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; } /* Paid action. Quiet outline by default; filled only where the work already carries support, so one screen never shows six loud CTAs. */ .xs-support { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: var(--xs-r-md); cursor: pointer; font-weight: 700; font-size: 12px; font-family: inherit; color: var(--xs-purple); background: transparent; border: 1px solid color-mix(in srgb, var(--xs-purple) 42%, transparent); transition: background .16s ease, color .16s ease, border-color .16s ease; } .xs-support:hover { background: var(--xs-purple-soft); border-color: var(--xs-purple); } .xs-support .xs-amt { opacity: .9; font: 600 11.5px "JetBrains Mono", ui-monospace, monospace; } .xs-post[data-support="backed"] .xs-support { color: var(--xs-purple-ink); border-color: transparent; background: linear-gradient(135deg, var(--xs-purple), var(--xs-purple-2)); box-shadow: var(--xs-glow-purple); } .xs-post[data-support="backed"] .xs-support:hover { filter: brightness(1.07); } .xs-support[data-done="1"] { color: var(--xs-green); background: transparent; border-color: currentColor; box-shadow: none; } .xs-support[disabled] { opacity: .5; cursor: not-allowed; } /* Restriction notice, driven by can_interact / interaction_reason */ .xs-restricted { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border: 1px solid var(--xs-line); border-radius: var(--xs-r-sm); background: var(--xs-tint-1); color: var(--xs-text-2); font-size: 12px; } .xs-restricted svg { width: 14px; height: 14px; flex: 0 0 auto; } /* Post menu (own posts only) */ .xs-menu-wrap { position: relative; flex: 0 0 auto; } .xs-menu-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--xs-r-sm); background: none; color: var(--xs-text-3); cursor: pointer; transition: color .16s ease, background .16s ease; } .xs-menu-btn:hover { color: var(--xs-text); background: var(--xs-panel-2); } .xs-menu { position: absolute; right: 0; top: 34px; z-index: 20; display: none; min-width: 150px; overflow: hidden; border: 1px solid var(--xs-line); border-radius: var(--xs-r-md); background: var(--xs-panel-solid); box-shadow: var(--xs-shadow); } .xs-menu[data-open="true"] { display: block; } .xs-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 13px; border: 0; background: none; cursor: pointer; color: var(--xs-text); font-size: 13px; font-family: inherit; text-align: left; } .xs-menu button:hover { background: var(--xs-panel-2); } .xs-menu button.is-danger { color: var(--xs-live); } .xs-menu svg { width: 15px; height: 15px; } /* --------------------------------------------------------------------------- 8. LEDGER LINE + RECORD PANEL The signature. Plain language on the surface, machine truth on demand. --------------------------------------------------------------------------- */ .xs-ledger { width: 100%; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 11px 20px; border: 0; border-top: 1px solid var(--xs-line); color: var(--xs-text-2); background: var(--xs-tint-1); cursor: pointer; text-align: left; font: 500 11.5px "JetBrains Mono", ui-monospace, monospace; transition: color .16s ease, background .16s ease; } .xs-ledger:hover { color: var(--xs-text); background: var(--xs-panel-2); } .xs-ledger-sep { opacity: .45; } .xs-ledger-earned { color: var(--xs-gold); font-weight: 600; } .xs-ledger-chev { margin-left: auto; transition: transform .18s ease; flex: 0 0 auto; } .xs-ledger[aria-expanded="true"] .xs-ledger-chev { transform: rotate(180deg); } .xs-record { display: none; padding: 16px 20px 18px; border-top: 1px solid var(--xs-line); background: var(--xs-panel-2); } .xs-record[data-open="true"] { display: block; } .xs-record-grid { display: grid; grid-template-columns: 116px minmax(0,1fr); gap: 8px 14px; font: 500 11.5px "JetBrains Mono", ui-monospace, monospace; } .xs-record-key { color: var(--xs-text-3); } .xs-record-val { color: var(--xs-text-2); word-break: break-word; } .xs-record-val a { color: var(--xs-gold); text-decoration: none; border-bottom: 1px solid currentColor; } .xs-record-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: Inter, sans-serif; font-size: 12px; color: var(--xs-text-2); } .xs-record-note svg { width: 14px; height: 14px; color: var(--xs-green); flex: 0 0 auto; } /* --------------------------------------------------------------------------- 9. MEDIA BLOCKS — all on the always-dark surface --------------------------------------------------------------------------- */ .xs-media { position: relative; margin-top: 16px; overflow: hidden; border: 1px solid var(--xs-deep-line); border-radius: 14px; color: var(--xs-deep-ink); background: linear-gradient(155deg, var(--xs-deep-a), var(--xs-deep-b)); } /* Image — portrait and landscape both have to survive here. This was `object-fit: cover` with a 620px cap. A landscape image was unaffected, because its natural height never reached the cap. Any PORTRAIT image did reach it: the box got clamped to 620px, the intrinsic aspect no longer matched, and `cover` center-cropped it — head and feet sliced off, which is what every vertical photo looked like in the feed. `contain` scales the image to fit the clamped box instead of cropping, so the whole picture is always visible and the .xs-media gradient above shows through as the letterbox. Landscape behaviour is unchanged. NOTE: posts/assets/feed-fix.css already expressed exactly this intent, but it targets `.post-media img` — a class this renderer no longer emits for images (it emits .xs-media--image). That rule has never applied to the feed. Change THIS rule, not that one. */ .xs-media--image { line-height: 0; } .xs-media--image img { width: 100%; height: auto; max-height: 620px; /* fallback where min() is unsupported */ max-height: min(620px, 78dvh); /* and never eat a short viewport whole */ object-fit: contain; display: block; } /* Video */ .xs-media--video { line-height: 0; } .xs-media--video video { width: 100%; max-height: 620px; display: block; background: #000; } /* Audio */ .xs-media--audio { display: flex; align-items: center; gap: 14px; padding: 15px 16px; background: linear-gradient(135deg, var(--xs-deep-a), var(--xs-deep-b) 78%); } .xs-audio-play { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: var(--xs-gold-ink); background: linear-gradient(135deg, #FFE099, #F3C65F); } .xs-audio-play svg { width: 16px; height: 16px; } .xs-audio-body { flex: 1; min-width: 0; } .xs-audio-title { font-size: 13px; font-weight: 600; color: var(--xs-deep-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xs-wave { display: flex; align-items: center; gap: 2px; height: 30px; margin-top: 7px; } .xs-wave i { flex: 1; border-radius: 2px; background: rgba(255,255,255,.22); transition: background .2s ease; } .xs-wave i.is-played { background: #F3C65F; } .xs-audio-time { flex: 0 0 auto; color: var(--xs-deep-ink-2); font: 500 11.5px "JetBrains Mono", ui-monospace, monospace; } /* Document — a record card, not an embedded viewer. Rendering PDF.js per post in a feed is expensive and nobody reads a deck inside a timeline. */ .xs-media--doc { display: flex; gap: 15px; align-items: center; padding: 15px 16px; background: linear-gradient(135deg, var(--xs-deep-a), var(--xs-deep-b) 78%); } .xs-doc-page { position: relative; width: 56px; flex: 0 0 auto; aspect-ratio: 3 / 4; border-radius: 5px 11px 5px 5px; overflow: hidden; background: linear-gradient(170deg, #F7F5FB, #CFC8DE); box-shadow: 0 8px 20px rgba(0,0,0,.35); } .xs-doc-page::before { content: ""; position: absolute; right: 0; top: 0; border-width: 0 13px 13px 0; border-style: solid; border-color: transparent rgba(10,9,16,.28) transparent transparent; } .xs-doc-page::after { content: ""; position: absolute; left: 8px; right: 8px; top: 15px; height: 28px; background: linear-gradient(rgba(30,24,50,.32) 2px, transparent 2px) 0 0 / 100% 7px; } .xs-doc-body { flex: 1; min-width: 0; } .xs-doc-name { font-size: 13px; font-weight: 600; color: var(--xs-deep-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xs-doc-meta { margin-top: 3px; color: var(--xs-deep-ink-2); font: 500 11.5px "JetBrains Mono", ui-monospace, monospace; } .xs-doc-open { flex: 0 0 auto; min-height: 34px; padding: 0 13px; display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 9px; color: var(--xs-deep-ink); background: var(--xs-deep-tint); cursor: pointer; font-size: 12px; font-weight: 700; text-decoration: none; } .xs-doc-open:hover { border-color: rgba(255,255,255,.42); } /* --------------------------------------------------------------------------- 10. LIVE STRIP (Chat Exchange) Liveness is fenced to this component. --------------------------------------------------------------------------- */ .xs-live-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--xs-live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xs-live) 22%, transparent); animation: xs-live-pulse 1.8s ease-in-out infinite; } @keyframes xs-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } .xs-live-strip { margin-bottom: 16px; } .xs-live-head { display: flex; align-items: center; gap: 9px; padding: 14px 17px; border-bottom: 1px solid var(--xs-line); } .xs-live-head strong { font-family: "Space Grotesk", Inter, sans-serif; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--xs-text); } .xs-live-rail { display: flex; gap: 12px; overflow-x: auto; padding: 14px 17px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .xs-live-rail::-webkit-scrollbar { display: none; } .xs-live-card { flex: 0 0 236px; overflow: hidden; cursor: pointer; border: 1px solid var(--xs-line); border-radius: var(--xs-r-md); background: var(--xs-panel-2); transition: border-color .16s ease, transform .16s ease; } .xs-live-card:hover { border-color: var(--xs-line-strong); transform: translateY(-2px); } .xs-live-cover { position: relative; height: 82px; overflow: hidden; background: radial-gradient(circle at 30% 40%, rgba(231,86,63,.4), transparent 46%), linear-gradient(140deg, var(--xs-deep-a), var(--xs-deep-b)); } .xs-live-cover img { width: 100%; height: 100%; object-fit: cover; } .xs-live-mark { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Space Grotesk", Inter, sans-serif; font-weight: 800; font-size: 26px; color: rgba(255,255,255,.12); letter-spacing: .05em; } .xs-live-tag { position: absolute; left: 9px; top: 9px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 5px; background: var(--xs-live); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .xs-live-tag i { width: 4px; height: 4px; border-radius: 50%; background: #fff; } .xs-live-meta { padding: 11px 12px; } .xs-live-title { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 600; font-size: 12.5px; color: var(--xs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xs-live-sub { margin-top: 3px; color: var(--xs-text-2); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --------------------------------------------------------------------------- 11. SIDEBAR PANELS --------------------------------------------------------------------------- */ .xs-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 17px; border-bottom: 1px solid var(--xs-line); } .xs-panel-title { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 13px; color: var(--xs-text); margin: 0; } .xs-panel-link { color: var(--xs-purple); font-size: 11.5px; font-weight: 600; cursor: pointer; text-decoration: none; background: none; border: 0; font-family: inherit; padding: 0; } .xs-panel-link:hover { text-decoration: underline; } .xs-icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--xs-r-sm); background: none; color: var(--xs-text-3); cursor: pointer; transition: color .16s ease, background .16s ease; } .xs-icon-btn:hover { color: var(--xs-text); background: var(--xs-panel-2); } .xs-panel-foot { padding: 11px; text-align: center; border-top: 1px solid var(--xs-line); background: var(--xs-tint-1); } /* Hub */ .xs-hub { padding: 18px; } .xs-hub-top { display: flex; align-items: center; gap: 12px; } .xs-hub-name { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 15px; color: var(--xs-text); text-decoration: none; display: block; } .xs-hub-name:hover { color: var(--xs-gold); } .xs-hub-handle { color: var(--xs-text-3); font: 500 11.5px "JetBrains Mono", ui-monospace, monospace; } .xs-hub-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--xs-line); } .xs-hub-stat { padding: 9px 6px; border-radius: var(--xs-r-md); text-align: center; background: var(--xs-panel-2); color: inherit; text-decoration: none; } a.xs-hub-stat:hover { background: var(--xs-tint-2); } .xs-hub-stat b { display: block; color: var(--xs-text); font: 600 15px "JetBrains Mono", ui-monospace, monospace; } .xs-hub-stat span { display: block; margin-top: 3px; color: var(--xs-text-3); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; } .xs-hub-label { margin-top: 15px; font-size: 10px; font-weight: 700; color: var(--xs-text-3); text-transform: uppercase; letter-spacing: .1em; } .xs-hub-faces { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; } .xs-balance-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--xs-line); } .xs-balance-row > span:first-child { color: var(--xs-text-2); font-size: 11.5px; } .xs-balance { color: var(--xs-gold); font: 600 12px "JetBrains Mono", ui-monospace, monospace; } /* Search */ .xs-search-box { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 12px; border: 1px solid var(--xs-line); border-radius: var(--xs-r-md); color: var(--xs-text-3); background: var(--xs-tint-1); transition: border-color .16s ease, background .16s ease; } .xs-search-box:focus-within { border-color: color-mix(in srgb, var(--xs-purple) 50%, transparent); background: var(--xs-panel-2); } .xs-search-box input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; font-size: 13.5px; color: var(--xs-text); font-family: inherit; } .xs-search-box input::placeholder { color: var(--xs-text-3); } .xs-results { margin-top: 8px; overflow: hidden; border: 1px solid var(--xs-line); border-radius: var(--xs-r-md); max-height: 320px; overflow-y: auto; background: var(--xs-panel-solid); } .xs-results-sec { padding: 6px 12px; font-size: 9.5px; font-weight: 700; color: var(--xs-text-3); text-transform: uppercase; letter-spacing: .1em; background: var(--xs-panel-2); border-bottom: 1px solid var(--xs-line); } .xs-result { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--xs-line); cursor: pointer; color: inherit; text-decoration: none; } .xs-result:last-child { border-bottom: 0; } .xs-result:hover { background: var(--xs-panel-2); } .xs-result-name { display: block; font-size: 13px; font-weight: 600; color: var(--xs-text); line-height: 1.3; } .xs-result-sub { display: block; font-size: 11.5px; color: var(--xs-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .xs-results-empty { padding: 14px; text-align: center; font-size: 13px; color: var(--xs-text-3); } /* Creator row — signals, never vanity zeros */ .xs-person { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--xs-line); } .xs-person:last-child { border-bottom: 0; } .xs-person-link { display: flex; gap: 11px; align-items: center; flex: 1; min-width: 0; text-decoration: none; } .xs-person-copy { flex: 1; min-width: 0; } .xs-person-name { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 13px; color: var(--xs-text); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xs-person-link:hover .xs-person-name { text-decoration: underline; } .xs-person-signal { margin-top: 2px; overflow: hidden; color: var(--xs-text-2); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; } .xs-follow { flex: 0 0 auto; min-height: 31px; padding: 0 12px; border: 1px solid var(--xs-line-strong); border-radius: var(--xs-r-sm); color: var(--xs-text-2); background: transparent; cursor: pointer; font-size: 11.5px; font-weight: 700; font-family: inherit; transition: color .16s ease, background .16s ease, border-color .16s ease; } .xs-follow:hover { color: var(--xs-text); background: var(--xs-panel-2); } .xs-follow[data-following="1"] { color: var(--xs-green); border-color: color-mix(in srgb, var(--xs-green) 45%, transparent); } .xs-follow[disabled] { opacity: .55; cursor: wait; } /* Group row */ .xs-group { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--xs-line); text-decoration: none; color: inherit; } .xs-group:last-child { border-bottom: 0; } .xs-group:hover { background: var(--xs-panel-2); } .xs-group-icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; font-family: "Space Grotesk", Inter, sans-serif; } .xs-group-icon img { width: 100%; height: 100%; object-fit: cover; } .xs-group-copy { flex: 1; min-width: 0; } /* display:block is load-bearing: these are spans inside a blockified flex child, so without it the name and meta run together on one line. */ .xs-group-name { display: block; font-family: "Space Grotesk", Inter, sans-serif; font-weight: 600; font-size: 13px; color: var(--xs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xs-group-meta { display: block; margin-top: 2px; color: var(--xs-text-2); font-size: 11px; text-transform: capitalize; } .xs-group-meta { margin-top: 2px; color: var(--xs-text-2); font-size: 11px; } .xs-role { flex: 0 0 auto; padding: 3px 7px; border-radius: 5px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .xs-role--owner { color: var(--xs-gold); background: var(--xs-gold-soft); } .xs-role--admin { color: var(--xs-purple); background: var(--xs-purple-soft); } .xs-role--mod { color: var(--xs-text-2); background: var(--xs-panel-2); } /* Onboarding banner */ .xs-onboard { padding: 14px 16px; background: linear-gradient(135deg, var(--xs-gold-soft), var(--xs-purple-soft)); border-bottom: 1px solid var(--xs-line); } .xs-onboard-title { margin: 0; font-family: "Space Grotesk", Inter, sans-serif; font-size: 13.5px; font-weight: 700; color: var(--xs-text); } .xs-onboard-sub { margin: 4px 0 10px; font-size: 12px; color: var(--xs-text-2); line-height: 1.5; } .xs-progress { display: flex; align-items: center; gap: 10px; } .xs-progress-bar { flex: 1; height: 6px; border-radius: var(--xs-r-pill); background: var(--xs-tint-3); overflow: hidden; } .xs-progress-fill { height: 100%; border-radius: inherit; width: 0; background: linear-gradient(90deg, var(--xs-gold-2), #F3C65F); transition: width .4s cubic-bezier(.16,1,.3,1); } .xs-progress-text { font: 700 11px "JetBrains Mono", ui-monospace, monospace; color: var(--xs-gold); } .xs-progress-text.is-done { color: var(--xs-green); } /* --------------------------------------------------------------------------- 12. STATES — empty, loading, error Emptiness is an invitation, not an apology. --------------------------------------------------------------------------- */ .xs-empty { padding: 46px 26px; text-align: center; } .xs-empty-mark { font-size: 34px; line-height: 1; margin-bottom: 12px; } .xs-empty-title { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 16px; color: var(--xs-text); } .xs-empty-body { font-size: 13.5px; color: var(--xs-text-2); margin: 8px auto 0; max-width: 44ch; line-height: 1.6; } .xs-empty-note { margin-top: 14px; font-size: 12.5px; color: var(--xs-text-3); } .xs-loading { padding: 34px 20px; display: grid; gap: 12px; justify-items: center; } .xs-spinner { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--xs-tint-3); border-top-color: var(--xs-purple); animation: xs-spin .7s linear infinite; } @keyframes xs-spin { to { transform: rotate(360deg); } } .xs-loading p { color: var(--xs-text-3); font-size: 12.5px; margin: 0; } .xs-error { margin: 14px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--xs-live) 35%, transparent); border-radius: var(--xs-r-md); background: color-mix(in srgb, var(--xs-live) 8%, transparent); color: var(--xs-text); font-size: 13px; } .xs-load-more { width: 100%; margin-top: 16px; padding: 12px; border: 1px solid var(--xs-line); border-radius: var(--xs-r-md); background: var(--xs-tint-1); color: var(--xs-text-2); cursor: pointer; font-weight: 600; font-size: 13px; font-family: inherit; transition: color .16s ease, background .16s ease, border-color .16s ease; } .xs-load-more:hover { color: var(--xs-text); background: var(--xs-panel-2); border-color: var(--xs-line-strong); } .xs-load-more[disabled] { opacity: .55; cursor: wait; } /* --------------------------------------------------------------------------- 13. RESPONSIVE --------------------------------------------------------------------------- */ @media (max-width: 640px) { .xs-post-body { padding: 16px 15px 12px; } .xs-ledger { padding: 10px 15px; font-size: 11px; } .xs-record { padding: 14px 15px 16px; } .xs-record-grid { grid-template-columns: 96px minmax(0,1fr); } .xs-actions { flex-wrap: wrap; } .xs-support { width: 100%; justify-content: center; margin-top: 8px; } .xs-actions-spacer { display: none; } .xs-media--doc { flex-wrap: wrap; } .xs-page-title { font-size: 23px; } } @media (prefers-reduced-motion: reduce) { .xs-page *, .xs-page *::before, .xs-page *::after { transition: none !important; animation: none !important; } } .xs-page :focus-visible { outline: 2px solid var(--xs-purple); outline-offset: 2px; } /* ============================================================================ XLN STREAM — CHROME Append to /public_html/timeline/assets/xln-system.css Version bump to 1.1.0 Topbar, lens switcher, hero and filter chips from the approved prototype. Same token system - nothing new to theme. ============================================================================ */ /* --------------------------------------------------------------------------- 14. TOPBAR --------------------------------------------------------------------------- */ .xs-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; min-height: 64px; margin: -8px 0 20px; padding: 10px 0; background: color-mix(in srgb, var(--xs-page) 82%, transparent); backdrop-filter: blur(20px) saturate(150%); } .xs-topsearch { position: relative; flex: 1; max-width: 640px; } .xs-topsearch > .iconify { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--xs-text-3); pointer-events: none; } .xs-topsearch input { width: 100%; height: 42px; padding: 0 16px 0 42px; color: var(--xs-text); border: 1px solid var(--xs-line); border-radius: var(--xs-r-pill); outline: 0; background: var(--xs-panel); font-family: inherit; font-size: 14px; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; } .xs-topsearch input::placeholder { color: var(--xs-text-3); } .xs-topsearch input:focus { border-color: color-mix(in srgb, var(--xs-purple) 55%, var(--xs-line)); box-shadow: 0 0 0 4px var(--xs-purple-soft); } .xs-topsearch .xs-results { position: absolute; left: 0; right: 0; top: 48px; z-index: 60; margin: 0; box-shadow: var(--xs-shadow); } .xs-topbar-spacer { flex: 1; } /* Lens switcher. Cosmetic until users.user_type exists - it reframes the page rather than filtering it. */ .xs-lens { display: inline-flex; gap: 3px; padding: 4px; flex: 0 0 auto; border: 1px solid var(--xs-line); border-radius: var(--xs-r-pill); background: var(--xs-panel-2); } .xs-lens button { border: 0; border-radius: var(--xs-r-pill); padding: 8px 14px; color: var(--xs-text-2); background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit; transition: color .16s ease, background .16s ease; white-space: nowrap; } .xs-lens button:hover { color: var(--xs-text); } .xs-lens button[aria-pressed="true"] { color: var(--xs-text); background: var(--xs-panel-solid); box-shadow: 0 4px 16px rgba(0,0,0,.12); } /* --------------------------------------------------------------------------- 15. HERO Always-dark surface in both themes, so it reads as one deliberate band. --------------------------------------------------------------------------- */ .xs-hero { position: relative; overflow: hidden; margin-bottom: 18px; padding: 28px; border: 1px solid var(--xs-deep-line); border-radius: 22px; color: var(--xs-deep-ink); background: radial-gradient(circle at 78% 22%, rgba(243,198,95,.22), transparent 26%), radial-gradient(circle at 18% 16%, rgba(155,125,240,.30), transparent 32%), linear-gradient(135deg, var(--xs-deep-a), var(--xs-deep-b)); box-shadow: 0 28px 90px rgba(0,0,0,.32); } .xs-hero::before { content: ""; position: absolute; width: 340px; height: 340px; right: -96px; top: -116px; border-radius: 44%; border: 1px solid rgba(243,198,95,.24); transform: rotate(22deg); box-shadow: 0 0 0 26px rgba(243,198,95,.025), 0 0 0 58px rgba(155,125,240,.025); pointer-events: none; } .xs-hero > * { position: relative; z-index: 2; } .xs-hero-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border: 1px solid rgba(243,198,95,.22); border-radius: var(--xs-r-pill); color: #FFE3A0; background: rgba(243,198,95,.09); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; } .xs-hero-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #2CE0A2; box-shadow: 0 0 0 5px rgba(44,224,162,.09); } .xs-hero h2 { max-width: 720px; margin: 16px 0 0; font-family: "Space Grotesk", Inter, sans-serif; font-size: clamp(24px, 3.4vw, 38px); font-weight: 700; line-height: 1.06; letter-spacing: -.04em; color: var(--xs-deep-ink); } .xs-hero p { max-width: 660px; margin: 12px 0 0; color: var(--xs-deep-ink-2); font-size: 14.5px; line-height: 1.6; } .xs-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .xs-hero-collapse { position: absolute; z-index: 3; top: 16px; right: 16px; padding: 6px 11px; border: 1px solid var(--xs-deep-line); border-radius: var(--xs-r-pill); color: var(--xs-deep-ink-2); background: var(--xs-deep-tint); cursor: pointer; font-size: 11px; font-weight: 600; font-family: inherit; } .xs-hero-collapse:hover { color: var(--xs-deep-ink); } /* Compact: what a returning creator sees. */ .xs-hero[data-state="compact"] { padding: 15px 20px; } .xs-hero[data-state="compact"]::before, .xs-hero[data-state="compact"] .xs-hero-kicker, .xs-hero[data-state="compact"] p, .xs-hero[data-state="compact"] .xs-btn-secondary { display: none; } .xs-hero[data-state="compact"] h2 { margin: 0; font-size: 16px; letter-spacing: -.02em; max-width: 46ch; } .xs-hero[data-state="compact"] .xs-hero-actions { margin-top: 12px; } /* --------------------------------------------------------------------------- 16. BUTTONS Gold FILLED = the user's own primary action. Gold INK stays for value. --------------------------------------------------------------------------- */ .xs-btn-primary { min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--xs-r-md); color: var(--xs-gold-ink); background: linear-gradient(135deg, #FFE099, #F3C65F); cursor: pointer; font-weight: 700; font-size: 13px; font-family: inherit; box-shadow: 0 10px 26px rgba(243,198,95,.18); transition: filter .16s ease, transform .14s ease; } .xs-btn-primary:hover { filter: brightness(1.05); } .xs-btn-primary:active { transform: scale(.985); } .xs-btn-secondary { min-height: 40px; padding: 0 16px; border-radius: var(--xs-r-md); cursor: pointer; font-weight: 700; font-size: 13px; font-family: inherit; color: var(--xs-deep-ink); border: 1px solid var(--xs-deep-line); background: var(--xs-deep-tint); } .xs-btn-secondary:hover { border-color: rgba(255,255,255,.28); } /* --------------------------------------------------------------------------- 17. FILTER CHIPS Filters the posts already on screen by medium and origin - no request. --------------------------------------------------------------------------- */ .xs-filters { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 0 0 16px; scrollbar-width: none; } .xs-filters::-webkit-scrollbar { display: none; } .xs-chip { flex: 0 0 auto; border: 1px solid var(--xs-line); border-radius: var(--xs-r-pill); padding: 8px 13px; color: var(--xs-text-2); background: var(--xs-panel); cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit; white-space: nowrap; transition: color .16s ease, background .16s ease, border-color .16s ease; } .xs-chip:hover { color: var(--xs-text); border-color: var(--xs-line-strong); } .xs-chip[aria-pressed="true"] { color: var(--xs-purple); border-color: color-mix(in srgb, var(--xs-purple) 34%, transparent); background: var(--xs-purple-soft); } .xs-post[hidden] { display: none !important; } .xs-filter-empty { padding: 34px 22px; text-align: center; color: var(--xs-text-2); font-size: 13.5px; } /* --------------------------------------------------------------------------- 18. CHROME RESPONSIVE --------------------------------------------------------------------------- */ @media (max-width: 900px) { .xs-topbar { flex-wrap: wrap; } .xs-topsearch { order: 3; max-width: none; flex: 1 0 100%; } } @media (max-width: 640px) { .xs-hero { padding: 22px; } .xs-hero-collapse { top: 12px; right: 12px; } .xs-hero-actions { flex-direction: column; } .xs-btn-primary, .xs-btn-secondary { width: 100%; } .xs-lens button { padding: 8px 10px; } } /* --------------------------------------------------------------------------- 19. FIXES — inline spans inside blockified flex children These are spans, so without display:block the name and meta run together. --------------------------------------------------------------------------- */ .xs-group-name, .xs-group-meta, .xs-result-name, .xs-result-sub, .xs-person-name, .xs-person-signal { display: block; } .xs-group-meta { text-transform: capitalize; } /* Investor knowledge graph + live recommendation signals */ .xs-person-active{display:inline-flex;align-items:center;gap:5px;color:var(--xs-positive,#10d994);font:600 10px/1.3 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.04em}.xs-person-active i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(16,217,148,.14)} .xs-investor-graph{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(380px,1.2fr);gap:24px;margin:0 0 22px;padding:28px;border:1px solid rgba(249,201,76,.28);border-radius:22px;background:radial-gradient(circle at 78% 35%,rgba(155,125,240,.16),transparent 42%),linear-gradient(135deg,rgba(12,14,25,.98),rgba(8,9,15,.96));color:#f4f4f7;overflow:hidden}.xs-investor-graph[hidden]{display:none}.xig-copy h2{font:700 clamp(28px,4vw,46px)/1.02 'Space Grotesk',sans-serif;letter-spacing:-.04em;margin:18px 0 12px}.xig-copy p{color:#a9a9b6;line-height:1.65}.xig-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}.xig-metrics span{padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#9696a4;font-size:11px}.xig-metrics strong{display:block;color:#f9c94c;font:700 20px 'JetBrains Mono',monospace}.xig-map svg{width:100%;height:auto}.xig-links path{fill:none;stroke:#9b7df0;stroke-width:2;stroke-dasharray:7 9;opacity:.65;animation:xig-flow 12s linear infinite}.xig-node circle{fill:#111522;stroke:#f9c94c;stroke-width:1.5}.xig-node text{fill:#fff;text-anchor:middle;font:600 14px 'Space Grotesk',sans-serif}.xig-node .xig-small{fill:#8f92a3;font:500 10px 'JetBrains Mono',monospace}@keyframes xig-flow{to{stroke-dashoffset:-120}}@media(max-width:800px){.xs-investor-graph{grid-template-columns:1fr;padding:20px}.xig-map{order:-1}.xig-metrics{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){.xig-links path{animation:none}}