:root{ --gx-bg:#07070A; --gx-bg2:#0F0E13; --gx-surface:#0F0E13; --gx-surface-2:#191720; --gx-surface-3:#23202B; --gx-border:#2A2632; --gx-text:#F8F6FB; --gx-text-2:#BDB6C7; --gx-text-3:#8A8395; --gx-text-4:#6E6778; --gx-brand-pink:#FF2F92; --gx-brand-violet:#8D5BFF; --gx-brand-blue:#3B82F6; --gx-accent:#FF2F92; --gx-accent-2:#FF5CB4; --gx-purple:#8D5BFF; --gx-purple-2:#A58BFF; --gx-danger:#E5484D; --gx-warning:#F59E0B; --gx-warning-text:#FBBF24; --gx-success:#22C55E; --gx-info:#3B9BFF; --gx-warning-tint:rgba(245,158,11,.12); --gx-warning-border:rgba(245,158,11,.35); --gx-success-tint:rgba(34,197,94,.13); --gx-danger-tint:rgba(229,72,77,.14); --gx-on-accent:#ffffff; /* Brand gradient (pink→violet→blue) — the new GossipX signature, reserved for primary CTAs, the compose FAB, active nav and brand moments. */ --gx-grad:linear-gradient(135deg,var(--gx-brand-pink) 0%,var(--gx-brand-violet) 55%,var(--gx-brand-blue) 100%); --gx-pink-tint:rgba(255,47,146,.12); --gx-purple-tint:rgba(141,91,255,.14); --gx-shadow:0 20px 54px rgba(0,0,0,.42); --gx-shadow-soft:0 9px 28px rgba(0,0,0,.22); --gx-radius-xs:10px; --gx-radius-sm:14px; --gx-radius-md:18px; --gx-radius-lg:24px; --gx-gutter:18px; --gx-control:44px; --gx-header:56px; --gx-nav:72px; color-scheme:dark; } /* Light theme — opt-in via . Dark stays the default (bare :root above) so nothing changes for users who never toggle. The brand pink/purple are deepened here so accent TEXT and buttons keep AA contrast on white; the accent stays unmistakably GossipX. */ :root[data-theme="light"]{ --gx-bg:#F7F7FA; --gx-bg2:#F0EFF4; --gx-surface:#FFFFFF; --gx-surface-2:#F0EFF4; --gx-surface-3:#E8E6ED; --gx-border:#E4E2E9; --gx-text:#15131D; --gx-text-2:#5F596B; --gx-text-3:#888294; --gx-text-4:#6F687C; --gx-brand-pink:#FF2F92; --gx-brand-violet:#8D5BFF; --gx-brand-blue:#3B82F6; --gx-accent:#C81765; --gx-accent-2:#D91E78; --gx-purple:#6D32D9; --gx-purple-2:#7A43DF; --gx-danger:#C93B40; --gx-warning:#9A5B00; --gx-warning-text:#7A4700; --gx-success:#087A45; --gx-info:#087FCA; --gx-warning-tint:rgba(154,91,0,.09); --gx-warning-border:rgba(154,91,0,.28); --gx-success-tint:rgba(8,122,69,.10); --gx-danger-tint:rgba(201,59,64,.10); --gx-on-accent:#ffffff; --gx-grad:linear-gradient(135deg,var(--gx-brand-pink) 0%,var(--gx-brand-violet) 55%,var(--gx-brand-blue) 100%); --gx-pink-tint:rgba(225,29,116,.08); --gx-purple-tint:rgba(124,58,237,.09); --gx-shadow:0 12px 40px rgba(23,20,31,.10); --gx-shadow-soft:0 7px 24px rgba(40,32,82,.045); color-scheme:light; } :root[data-theme="light"], :root[data-theme="light"] body { background:radial-gradient(circle at 100% -8%, rgba(124,58,237,.05), transparent 16%),radial-gradient(circle at 0% 108%, rgba(225,29,116,.04), transparent 15%),var(--gx-bg); } /* The frosted sticky header + bottom nav are hard-coded near-black elsewhere (deliberate for dark). Re-frost them white for light so the top of the feed and the tab bar aren't dark bands on a white app. */ :root[data-theme="light"] .sticky-header { background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.55)); border-bottom-color:var(--gx-border); } :root[data-theme="light"] .tab-bar { background:rgba(255,255,255,.9); } /* One-shot crossfade when the user flips the theme. The class is added then removed in JS (~300ms), so this transition never applies during normal interaction and can't make scrolling/taps feel laggy. JS also skips it when prefers-reduced-motion is set, so it never fights the accessibility guard. */ :root.theme-anim, :root.theme-anim * { transition:background-color .26s ease, color .26s ease, border-color .26s ease, box-shadow .26s ease, fill .26s ease, stroke .26s ease !important; } * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html, body { height:100%; height:100dvh; font-family:'Plus Jakarta Sans',sans-serif; background:radial-gradient(circle at 100% -8%, rgba(141,91,255,.06), transparent 16%),radial-gradient(circle at 0% 108%, rgba(255,47,146,.045), transparent 15%),var(--gx-bg); color:var(--gx-text); } body { display:flex; align-items:center; justify-content:center; overflow-x:hidden; } ::-webkit-scrollbar { width:0; height:0; } /* Accessibility: keyboard focus, skip link, touch targets, reduced motion */ *:focus-visible { outline:3px solid var(--gx-accent); outline-offset:2px; } .skip-link { position:absolute; top:-40px; left:8px; background:var(--gx-accent); color:var(--gx-on-accent); padding:10px 16px; border-radius:8px; z-index:10000; font-weight:600; font-size:14px; text-decoration:none; transition:top .2s ease; } .skip-link:focus { top:8px; } .tab-item, .desktop-nav-item { min-height:44px; min-width:44px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } } @keyframes gxpop { 0%{transform:scale(1)} 40%{transform:scale(1.2)} 100%{transform:scale(1)} } @keyframes gxslide { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} } @keyframes gxtoast { from{transform:translate(-50%,16px);opacity:0} to{transform:translate(-50%,0);opacity:1} } @keyframes gxfade { from{opacity:0} to{opacity:1} } @keyframes heartBurst { 0%{transform:scale(0);opacity:1} 50%{transform:scale(1.4);opacity:1} 100%{transform:scale(1);opacity:0} } /* Pin the app shell to the real VISIBLE viewport. - Browser (default): height:100dvh tracks the dynamic viewport, so when the browser's address/toolbar auto-hides the app grows to fill — no dead space under the tab bar. - Standalone/fullscreen PWA: 100dvh can compute shorter than the screen on some iOS/Android builds, so there we fall back to the bulletproof inset:0. viewport-fit=cover + the safe-area paddings keep headers off the notch. */ #app-root { position:fixed; top:0; left:0; right:0; height:100dvh; background:transparent; overflow:hidden; padding-top:env(safe-area-inset-top); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); } @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) { #app-root { inset:0; height:auto; } } /* Boot hero — the crawlable/first-paint content inside #app-root, shown until the app renders over it. Kept simple and on-brand. */ .boot-hero { max-width:560px; margin:0 auto; padding:48px 24px 40px; text-align:center; } .boot-hero__brand { font-weight:800; font-size:30px; letter-spacing:-1px; color:var(--gx-text); } .boot-hero__brand::after { content:''; } .boot-hero__title { font-size:30px; line-height:1.15; letter-spacing:-0.8px; color:var(--gx-text); margin-top:14px; font-weight:800; } .boot-hero__lede { font-size:16px; line-height:1.55; color:var(--gx-text-2); margin-top:16px; } .boot-hero__loop { font-size:14px; line-height:1.6; color:var(--gx-text-3); margin-top:14px; } .boot-hero__loop strong { color:var(--gx-text); } .boot-hero__nav { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:22px; } .boot-hero__nav a { font-size:14px; font-weight:600; color:var(--gx-accent); text-decoration:none; } .boot-hero__what { margin-top:28px; text-align:left; display:inline-block; } .boot-hero__what h2 { font-size:13px; letter-spacing:0.4px; text-transform:uppercase; color:var(--gx-text-3); font-weight:700; } .boot-hero__what ul { list-style:none; margin-top:10px; } .boot-hero__what li { font-size:14.5px; line-height:1.9; color:var(--gx-text-2); } .boot-hero__what strong { color:var(--gx-text); } .boot-hero__spinner { margin:30px auto 0; width:26px; height:26px; } .boot-hero__spinner span { display:block; width:26px; height:26px; border-radius:999px; border:3px solid var(--gx-border); border-top-color:var(--gx-accent); animation:gxspin 0.8s linear infinite; } @keyframes gxspin { to { transform:rotate(360deg); } } .app-shell { width:100%; height:100%; display:block; } .desktop-nav { display:none; } .desktop-right { display:none; } .desktop-main { width:100%; height:100%; position:relative; } @media (min-width: 1024px) { #app-root { background:var(--gx-bg2); } .app-shell { display:grid; grid-template-columns:1fr minmax(auto,600px) 1fr; } .desktop-nav { display:flex; flex-direction:column; width:280px; justify-self:end; height:100%; padding:20px 16px 24px; border-right:1px solid var(--gx-border); } .desktop-main { width:100%; border-left:1px solid var(--gx-border); border-right:1px solid var(--gx-border); background:var(--gx-surface-2); } .tab-bar { display:none !important; } /* Logo + search/notification icons already live in the side columns on desktop - showing them again above the feed duplicates navigation. !important because .sticky-header-row's display:flex is defined later in the sheet and would otherwise win the cascade at equal specificity. */ .feed-topbar { display:none !important; } } @media (min-width: 1280px) { .desktop-right { display:flex; flex-direction:column; width:360px; justify-self:start; height:100%; padding:20px 24px 24px; overflow-y:auto; gap:20px; } } .desktop-logo { font-weight:700; font-size:28px; letter-spacing:-0.5px; color:var(--gx-text); margin-bottom:28px; padding-left:12px; } .desktop-logo span { color:var(--gx-accent); } .desktop-nav-items { display:flex; flex-direction:column; gap:4px; } .desktop-nav-item { display:flex; align-items:center; gap:16px; padding:12px; border-radius:999px; cursor:pointer; transition:background .15s; } .desktop-nav-item:hover { background:var(--gx-surface-2); } .desktop-nav-item.active { font-weight:700; } .desktop-nav-item svg { width:26px; height:26px; flex-shrink:0; } .desktop-nav-item span { font-size:19px; color:var(--gx-text); } .desktop-spill-btn { background:var(--gx-accent); color:var(--gx-on-accent); border:none; border-radius:999px; padding:16px 24px; font-weight:700; font-size:17px; cursor:pointer; margin:16px 0; font-family:inherit; width:100%; } .desktop-spill-btn:hover { filter:brightness(.9); } .desktop-user { display:flex; align-items:center; gap:12px; padding:12px; border-radius:999px; cursor:pointer; margin-top:auto; } .desktop-user:hover { background:var(--gx-surface-2); } .desktop-user-avatar { width:40px; height:40px; border-radius:999px; background:var(--gx-surface-2); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; } .desktop-search { display:flex; align-items:center; gap:10px; background:var(--gx-surface-2); border-radius:999px; padding:12px 16px; cursor:pointer; } .desktop-search span { color:var(--gx-text-3); font-size:15px; } .desktop-widget { background:var(--gx-surface-2); border-radius:16px; padding:16px; border:1px solid var(--gx-border); } .desktop-widget-title { font-weight:700; font-size:18px; color:var(--gx-text); margin-bottom:12px; } .desktop-widget-item { padding:12px 0; border-bottom:1px solid var(--gx-border); cursor:pointer; } .desktop-widget-item:last-child { border-bottom:none; } .screen { height:100%; display:flex; flex-direction:column; position:relative; } .page-content { flex:1; overflow:auto; -webkit-overflow-scrolling:touch; } .gx-btn { cursor:pointer; background:var(--gx-grad); border-radius:14px; padding:16px; text-align:center; font-weight:600; font-size:16px; color:var(--gx-on-accent); border:none; width:100%; font-family:inherit; box-shadow:0 12px 26px rgba(255,47,146,.26); } .gx-btn:disabled { background:var(--gx-border); color:var(--gx-text-3); cursor:not-allowed; box-shadow:none; } .gx-btn-pink { background:var(--gx-grad); } .gx-input { border:1px solid var(--gx-border); border-radius:14px; padding:14px 16px; font-family:inherit; font-weight:600; font-size:18px; color:var(--gx-text); width:100%; outline:none; background:var(--gx-surface); } .gx-input::placeholder { color:var(--gx-text-3); font-weight:400; } .tag-pill { cursor:pointer; border-radius:999px; padding:9px 15px; font-weight:600; font-size:13.5px; white-space:nowrap; } .tag-pill-sel { background:var(--gx-accent); border:1px solid var(--gx-accent); color:var(--gx-on-accent); } .tag-pill-unsel { background:var(--gx-surface); border:1px solid var(--gx-border); color:var(--gx-text-2); } /* Text-first flat post rows: no floating cards, thin dividers, max readable measure, circle name is the loudest meta element. */ .post-card { background:var(--gx-surface); border:none; border-bottom:1px solid var(--gx-border); border-radius:0; padding:14px 16px 10px; margin-bottom:0; position:relative; /* Let the browser skip rendering off-screen cards — cheaper feed renders and smoother scrolling on long feeds. The intrinsic size reserves space so the scrollbar stays stable. */ content-visibility:auto; contain-intrinsic-size:auto 240px; } .post-card:active { background:var(--gx-surface-2); } /* "Your Pulse" — the user's communities as quick-switch chips under the feed tabs, so home answers "what's happening" across the places you belong to. */ .pulse-row { display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:10px 16px 2px; scrollbar-width:none; } .pulse-row::-webkit-scrollbar { display:none; } .pulse-chip { flex-shrink:0; display:inline-flex; align-items:center; gap:5px; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:600; color:var(--gx-text-2); background:var(--gx-surface-2); border:1px solid rgba(20,20,31,.05); cursor:pointer; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; } .pulse-chip:active { transform:scale(.96); background:var(--gx-surface-2); } .pulse-chip--add { color:var(--gx-accent); background:var(--gx-surface); border-color:rgba(225,29,107,.25); } /* Trust layer — GossipX's visual signature: a status rail + status pill so you read reliability before you read the claim. */ .post-card--railed::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--rail); border-radius:16px 0 0 16px; } .post-status-row { display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap; } .status-pill { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:0.4px; padding:4px 9px; border-radius:999px; line-height:1; } .type-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--gx-text-3); background:var(--gx-surface-2); padding:4px 9px; border-radius:999px; line-height:1; } .action-btn.iknow { color:var(--gx-accent); font-weight:600; } .action-btn.iknow span { color:var(--gx-accent); } .action-btn.iknow-active, .action-btn.iknow-active span { color:var(--gx-success); } /* status timeline on the detail screen */ .status-timeline { list-style:none; margin:0; padding:0; } .status-timeline li { display:flex; gap:10px; padding:7px 0; font-size:13px; color:var(--gx-text-2); } .status-timeline .st-dot { flex-shrink:0; } .status-timeline .st-when { color:var(--gx-text-3); font-size:12px; margin-left:auto; white-space:nowrap; } .post-header { display:flex; align-items:flex-start; gap:10px; } .post-avatar { width:38px; height:38px; border-radius:999px; background:var(--gx-surface-2); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; } .post-name { font-weight:600; font-size:14.5px; color:var(--gx-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .post-circle { font-weight:600; font-size:14.5px; color:var(--gx-text); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .post-handle { font-size:12.5px; color:var(--gx-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .post-text { margin-top:8px; font-size:15.5px; line-height:1.55; color:var(--gx-text); word-break:break-word; max-width:62ch; } .post-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; } /* Attribution chip for auto-ingested local news (link + source only). Makes the origin unmistakable so a headline never reads as first-hand gossip. */ .news-source { display:inline-flex; align-items:center; gap:7px; margin-top:10px; max-width:100%; padding:7px 12px; border:1px solid var(--gx-border); border-radius:999px; background:var(--gx-surface-2); text-decoration:none; font-size:12.5px; font-weight:600; color:var(--gx-text-2); } .news-source__name { color:var(--gx-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .news-source__read { color:var(--gx-accent); font-weight:700; margin-left:2px; flex-shrink:0; } .news-source:active { transform:scale(.98); background:var(--gx-surface-3); } .post-tag { cursor:pointer; background:var(--gx-surface-2); border-radius:999px; padding:3px 11px; font-size:11.5px; font-weight:600; color:var(--gx-text-2); } .post-actions { display:flex; align-items:center; gap:2px; margin-top:8px; padding-top:2px; border-top:none; } .action-btn { cursor:pointer; display:flex; align-items:center; gap:5px; padding:8px 10px; border-radius:999px; min-height:36px; } .action-btn:active { background:var(--gx-surface-2); } .action-btn span { font-size:12.5px; font-weight:500; color:var(--gx-text-2); } .action-btn svg { width:18px; height:18px; } .action-btn.liked svg path { fill:var(--gx-accent); stroke:var(--gx-accent); } .action-btn.liked span { color:var(--gx-accent); } .action-btn.saved svg path { fill:var(--gx-accent); stroke:var(--gx-accent); } .action-btn.reposted svg path { fill:var(--gx-accent); stroke:var(--gx-accent); } /* Circle type + role labels - the only coloured badges allowed on a post */ .circle-chip { display:inline-flex; align-items:center; gap:3px; border-radius:999px; padding:2px 8px; font-size:10px; font-weight:700; letter-spacing:0.3px; flex-shrink:0; } .circle-chip.verified { background:var(--gx-pink-tint); color:var(--gx-accent); } .circle-chip.private { background:var(--gx-surface-2); color:var(--gx-text-3); } .circle-chip.public { background:var(--gx-surface-2); color:var(--gx-text-3); } .circle-chip.mod { background:var(--gx-accent); color:var(--gx-on-accent); } .circle-chip.pending { background:var(--gx-warning-tint); color:var(--gx-warning); } /* Segmented feed tabs */ .feed-tabs { display:flex; background:var(--gx-surface); border-bottom:1px solid var(--gx-border); } .feed-tab { flex:1; text-align:center; padding:13px 4px 11px; font-size:14px; font-weight:600; color:var(--gx-text-3); cursor:pointer; border-bottom:2.5px solid transparent; min-height:44px; } .feed-tab.active { color:var(--gx-text); border-bottom-color:var(--gx-accent); } /* Compact "Spill something..." strip below the tabs */ .composer-strip { display:flex; align-items:center; gap:11px; padding:12px 16px; background:var(--gx-surface); border-bottom:1px solid var(--gx-border); cursor:pointer; } .composer-strip .hint { flex:1; font-size:14.5px; color:var(--gx-text-3); } .composer-strip .go { background:var(--gx-grad); color:var(--gx-on-accent); border-radius:999px; padding:7px 16px; font-size:13px; font-weight:700; } /* Circle suggestion cards */ .suggestion-card { background:var(--gx-surface); border:1px solid var(--gx-border); border-radius:14px; padding:14px; margin-bottom:10px; } /* Graceful attachment failure */ .img-fallback { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:var(--gx-surface-2); border-radius:12px; margin-top:10px; padding:26px 12px; color:var(--gx-text-3); font-size:12.5px; cursor:pointer; } /* Section headers on list screens */ .section-title { padding:18px 16px 8px; font-weight:700; font-size:15px; color:var(--gx-text); } /* Bottom sheet (post "more" menu) */ .sheet-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.35); z-index:2000; animation:gxfade .15s ease both; } .sheet { position:absolute; left:0; right:0; bottom:0; z-index:2001; background:var(--gx-surface); border-radius:18px 18px 0 0; padding:10px 18px calc(20px + env(safe-area-inset-bottom, 8px)); animation:gxslide .2s ease both; } .sheet-row { display:flex; align-items:center; gap:12px; padding:14px 4px; font-size:15px; font-weight:600; color:var(--gx-text); cursor:pointer; border-bottom:1px solid var(--gx-surface-2); min-height:44px; } .sheet-row.danger { color:var(--gx-danger); } .whats-new-sheet { display:flex; flex-direction:column; max-height:calc(100dvh - 24px); overflow:hidden; padding:0; } .whats-new-header { flex:0 0 auto; text-align:center; padding:16px 18px 14px; border-bottom:1px solid var(--gx-border); } .whats-new-list { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 18px; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; } .whats-new-footer { flex:0 0 auto; padding:12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--gx-border); background:var(--gx-surface); } @media (min-width:1024px) { .sheet { left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-50%); width:360px; border-radius:18px; animation:gxfade .15s ease both; } .whats-new-sheet { width:min(440px, calc(100vw - 32px)); max-height:min(760px, calc(100dvh - 48px)); } } /* padding-bottom hugs the gesture bar: honour the real safe-area inset (minus a small trim, since the nav background already reaches the screen edge) rather than stacking an extra 14px base on top of it — that base was what made the band under the labels read as dead space on Android. Floor of 10px so devices with no inset still have a comfortable tap zone. */ .tab-bar { flex-shrink:0; background:var(--gx-surface); border-top:1px solid var(--gx-border); padding:5px 16px max(6px, calc(env(safe-area-inset-bottom, 12px) - 28px)); display:flex; align-items:flex-end; justify-content:space-between; } .tab-item { cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; padding:2px 6px; color:var(--gx-text-3); transition:color .2s; position:relative; } .tab-item.active { color:var(--gx-text); } .tab-item svg { width:23px; height:23px; } .tab-spill { transform:translateY(-4px); } .tab-spill .spill-btn { width:50px; height:44px; border-radius:14px; background:var(--gx-grad); display:flex; align-items:center; justify-content:center; } .tab-spill span { font-size:10px; font-weight:600; color:var(--gx-accent); margin-top:4px; } .notif-badge { position:absolute; top:-2px; right:0; width:16px; height:16px; border-radius:999px; background:var(--gx-accent); color:var(--gx-on-accent); font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; } .sticky-header { position:sticky; top:0; z-index:10; background:var(--gx-surface); border-bottom:1px solid var(--gx-border); padding:22px 18px 14px; } .sticky-header-row { display:flex; align-items:center; justify-content:space-between; } .logo { font-weight:700; font-size:23px; letter-spacing:-0.5px; color:var(--gx-text); } .logo span { color:var(--gx-accent); } .back-btn { cursor:pointer; width:36px; height:36px; border-radius:999px; background:var(--gx-surface-2); display:flex; align-items:center; justify-content:center; } .toast { position:absolute; bottom:96px; left:50%; transform:translateX(-50%); z-index:80; background:var(--gx-accent); color:var(--gx-on-accent); border-radius:999px; padding:11px 20px; font-weight:500; font-size:14px; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,0.2); animation:gxtoast .3s ease both; } .buzzing-card { flex:0 0 auto; width:210px; background:var(--gx-surface); border:1px solid var(--gx-border); border-radius:16px; padding:14px; cursor:pointer; } .topic-tile { cursor:pointer; background:var(--gx-surface); border:1px solid var(--gx-border); border-radius:16px; padding:16px 14px; } .community-card { cursor:pointer; background:var(--gx-surface); border:1px solid var(--gx-border); border-radius:16px; padding:14px; } .comment-bubble { background:var(--gx-surface-2); border-radius:4px 14px 14px 14px; padding:10px 12px; } .loading { display:flex; align-items:center; justify-content:center; height:100%; color:var(--gx-text-3); font-size:14px; } .verified-badge { display:inline-flex; width:15px; height:15px; align-items:center; justify-content:center; background:var(--gx-accent); color:var(--gx-on-accent); border-radius:999px; font-size:9px; font-weight:700; } .empty-state { text-align:center; padding:56px 24px; color:var(--gx-text-3); display:flex; flex-direction:column; align-items:center; } .empty-state .emoji { font-size:30px; width:68px; height:68px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:var(--gx-surface-2); border:1px solid var(--gx-border); box-shadow:0 10px 34px -14px rgba(0,0,0,0.55); margin-bottom:15px; } .empty-state p { margin-top:6px; font-size:14px; line-height:1.5; max-width:34ch; } .empty-state p:first-of-type { color:var(--gx-text-2); font-weight:600; font-size:15.5px; letter-spacing:-0.01em; } .ring-progress { position:relative; width:30px; height:30px; } .ring-bg { position:absolute; inset:0; border-radius:999px; } .ring-inner { position:absolute; inset:5px; border-radius:999px; background:var(--gx-surface); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:600; color:var(--gx-text-2); } /* desktop layout is rendered inside #app-root by the SPA shell */ /* Story styles */ .stories-bar { display:flex; gap:14px; overflow-x:auto; padding:14px 18px; background:var(--gx-surface); border-bottom:1px solid var(--gx-border); } .story-circle { cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; } .story-ring { width:62px; height:62px; border-radius:999px; padding:3px; background:linear-gradient(45deg, var(--gx-accent), var(--gx-warning), var(--gx-purple)); } .story-ring-viewed { background:var(--gx-border); } .story-avatar { width:56px; height:56px; border-radius:999px; background:var(--gx-surface-2); display:flex; align-items:center; justify-content:center; font-size:26px; border:3px solid var(--gx-on-accent); } .story-name { font-size:11px; font-weight:600; color:var(--gx-text-2); max-width:62px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Story viewer */ .story-viewer { position:fixed; inset:0; z-index:100; background:var(--gx-accent); display:flex; flex-direction:column; } .story-progress-bar { height:3px; background:rgba(255,255,255,0.2); border-radius:999px; overflow:hidden; margin:8px 4px; } .story-progress-fill { height:100%; background:var(--gx-surface); width:0; transition:width 0.1s linear; } .story-content { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center; } .story-text { font-size:28px; font-weight:700; color:var(--gx-on-accent); line-height:1.3; text-wrap:pretty; } .story-emoji { font-size:48px; margin-top:16px; } .story-nav { position:absolute; top:0; bottom:0; width:50%; } .story-nav-left { left:0; } .story-nav-right { right:0; } /* Search */ .search-input-wrap { display:flex; align-items:center; gap:9px; background:var(--gx-surface-2); border-radius:12px; padding:11px 13px; } .search-result-user { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--gx-border); cursor:pointer; } .search-result-post { padding:12px 18px; border-bottom:1px solid var(--gx-border); cursor:pointer; } /* Grid */ .explore-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; } .grid-item { aspect-ratio:1; background:var(--gx-surface-2); position:relative; overflow:hidden; cursor:pointer; } .grid-item img { width:100%; height:100%; object-fit:cover; } .grid-overlay { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(to top, rgba(0,0,0,0.55), transparent); display:flex; align-items:flex-end; justify-content:flex-start; gap:10px; color:var(--gx-on-accent); font-size:11.5px; font-weight:600; padding:16px 6px 5px; } /* Messages */ .conversation-item { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--gx-border); cursor:pointer; } .conversation-item.unread { background:var(--gx-pink-tint); } .chat-bubble { max-width:75%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.4; } .chat-bubble-sent { background:var(--gx-accent); color:var(--gx-on-accent); border-radius:16px 16px 4px 16px; align-self:flex-end; } .chat-bubble-received { background:var(--gx-surface-2); color:var(--gx-text); border-radius:16px 16px 16px 4px; align-self:flex-start; } .chat-time { font-size:10px; color:var(--gx-text-3); margin-top:4px; text-align:right; } /* Notifications */ .notif-item { display:flex; align-items:flex-start; gap:12px; padding:14px 18px; border-bottom:1px solid var(--gx-border); cursor:pointer; } .notif-item.unread { background:var(--gx-pink-tint); } .notif-actor { width:40px; height:40px; border-radius:999px; background:var(--gx-surface-2); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; } /* Poll */ .poll-option { cursor:pointer; background:var(--gx-surface-2); border-radius:10px; padding:10px 14px; margin-bottom:8px; position:relative; overflow:hidden; } .poll-bar { position:absolute; left:0; top:0; bottom:0; background:var(--gx-pink-tint); border-radius:10px; transition:width .3s ease; z-index:0; } .poll-option-content { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; } .poll-option-text { font-weight:600; font-size:14px; color:var(--gx-text); } .poll-option-pct { font-size:13px; font-weight:600; color:var(--gx-accent); } .poll-voted { border:1px solid var(--gx-accent); } .poll-total { font-size:12px; color:var(--gx-text-3); margin-top:6px; } /* Image in post */ .post-image { width:100%; border-radius:12px; margin-top:12px; display:block; } .post-image-grid { display:grid; gap:4px; margin-top:12px; border-radius:12px; overflow:hidden; } .post-image-grid-2 { grid-template-columns:1fr 1fr; } .post-image-grid-3 { grid-template-columns:1fr 1fr 1fr; } .post-image-grid img { width:100%; aspect-ratio:1; object-fit:cover; } /* Profile image grid */ .profile-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; } .profile-grid-item { aspect-ratio:1; background:var(--gx-surface-2); position:relative; overflow:hidden; cursor:pointer; } .profile-grid-item img { width:100%; height:100%; object-fit:cover; } /* Heart animation for double tap */ .heart-anim { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:80px; pointer-events:none; animation:heartBurst .6s ease forwards; z-index:50; } .hidden { display:none !important; } /* ==================== GHOST MODE ==================== */ /* App-wide treatment while Ghost Mode is on: the nav goes dark so the whole app feels like it's in a different mode, not just a toggle somewhere. */ body.ghost-on .tab-bar { background:var(--gx-bg2); border-top-color:var(--gx-border); } body.ghost-on .tab-item { color:var(--gx-text-4); } body.ghost-on .tab-item.active { color:var(--gx-on-accent); } body.ghost-on .tab-item.tab-spill span { color:var(--gx-purple-2); } body.ghost-on .spill-btn { background:var(--gx-purple); box-shadow:0 0 16px rgba(124,58,237,0.5); } @media (min-width:1024px) { body.ghost-on .desktop-spill-btn { background:var(--gx-purple); } } /* Always-visible floating pill so you never forget you're invisible. */ .ghost-pill { position:absolute; right:14px; bottom:calc(84px + env(safe-area-inset-bottom, 0px)); z-index:70; display:flex; align-items:center; gap:6px; background:var(--gx-bg2); color:var(--gx-on-accent); font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,0.35); cursor:pointer; animation:gxfade .3s ease both; transition:opacity .18s ease, transform .18s ease; } /* Slides out of the way while the content behind it is scrolling. */ .ghost-pill.pill-dim { opacity:0; transform:translateY(14px); pointer-events:none; } .ghost-pill span { font-size:14px; } @media (min-width:1024px) { .ghost-pill { right:calc(50% - 300px); bottom:24px; } } /* Full-screen moment when entering/leaving Ghost Mode. */ .ghost-anim { position:absolute; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; background:radial-gradient(circle at 50% 40%, var(--gx-surface-3), var(--gx-bg2)); color:var(--gx-on-accent); animation:ghostIn .35s ease both; } .ghost-anim.out { animation:ghostOut .4s ease both; } .ghost-anim-emoji { font-size:76px; animation:ghostFloat 1.4s ease-in-out infinite; } .ghost-anim-title { font-weight:800; font-size:24px; letter-spacing:-0.4px; margin-top:8px; } .ghost-anim-sub { font-size:14px; color:var(--gx-text-3); max-width:260px; } @keyframes ghostIn { from{opacity:0; transform:scale(1.04)} to{opacity:1; transform:scale(1)} } @keyframes ghostOut { from{opacity:1} to{opacity:0} } @keyframes ghostFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } /* ---- Skeleton loaders (feed placeholder) ---- */ .sk-line { background:var(--gx-surface-2); border-radius:7px; position:relative; overflow:hidden; } .sk-line::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent); animation:skShimmer 1.3s infinite; } @keyframes skShimmer { 100% { transform:translateX(100%); } } @media (prefers-reduced-motion: reduce) { .sk-line::after { animation:none; } } /* ---- Pull-to-refresh spinner ---- */ #ptr-spinner { position:fixed; top:0; left:50%; z-index:9000; width:34px; height:34px; border-radius:999px; background:var(--gx-surface); box-shadow:0 3px 12px rgba(0,0,0,0.14); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateX(-50%) translateY(-60px); transition:opacity .2s, transform .25s ease; pointer-events:none; } #ptr-spinner .ptr-ring { width:18px; height:18px; border-radius:999px; border:2.5px solid var(--gx-border); border-top-color:var(--gx-accent); } #ptr-spinner.spinning .ptr-ring { animation:ptrSpin .7s linear infinite; } @keyframes ptrSpin { to { transform:rotate(360deg); } } /* ---- Button variants (design system) ---- */ .gx-btn-ghost { background:transparent; color:var(--gx-text); border:1px solid var(--gx-border); box-shadow:none; } .gx-btn-ghost:active { background:var(--gx-surface-2); } .gx-btn-danger { background:var(--gx-danger); color:var(--gx-on-accent); } .gx-btn-danger:active { filter:brightness(.88); } .gx-btn-sm { width:auto; padding:9px 16px; font-size:14px; border-radius:10px; } /* Slightly darker muted text for small secondary labels (WCAG AA) */ .post-handle, .empty-state p { color:var(--gx-text-3); } /* ============================================================ PREMIUM ELEVATION PASS — depth, tactility, refined light. Layered on top so it wins the cascade without touching markup. ============================================================ */ /* Crisper rendering + a warmer paper base */ body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } #app-root { background:var(--gx-surface-2); } /* Tactile press — the single biggest "native/premium" tell. Everything you can touch dips slightly and springs back. */ .gx-btn, .gx-btn-pink, .tag-pill, .action-btn, .back-btn, .composer-strip, .composer-strip .go, .buzzing-card, .topic-tile, .community-card, .suggestion-card, .conversation-item, .search-result-user, .notif-item, .tab-item, .tab-spill .spill-btn, .sheet-row, .circle-chip { transition: transform .13s cubic-bezier(.2,.8,.3,1), background-color .16s ease, box-shadow .22s ease, border-color .16s ease, color .16s ease; -webkit-tap-highlight-color: transparent; } .gx-btn:active:not(:disabled), .gx-btn-pink:active:not(:disabled), .tag-pill:active, .composer-strip .go:active, .tab-spill .spill-btn:active { transform: scale(.955); } .buzzing-card:active, .topic-tile:active, .community-card:active, .suggestion-card:active, .conversation-item:active, .search-result-user:active, .notif-item:active, .composer-strip:active { transform: scale(.99); } .tab-item:active { transform: scale(.9); } /* Elevation: floating cards trade the flat 1px border for a soft, layered shadow + hairline — they lift off the page. */ .buzzing-card, .topic-tile, .community-card, .suggestion-card { border:1px solid rgba(20,20,31,0.055); box-shadow: 0 1px 2px rgba(20,20,31,0.04), 0 6px 20px -10px rgba(20,20,31,0.10); } /* Primary buttons: dimensional black + a richer pink with a colored glow. */ .gx-btn { letter-spacing:-0.01em; box-shadow: 0 1px 2px rgba(20,20,31,0.10), inset 0 1px 0 rgba(255,255,255,0.06); } .gx-btn-pink { background:var(--gx-grad); box-shadow: 0 3px 12px -2px rgba(225,29,107,0.42), inset 0 1px 0 rgba(255,255,255,0.18); } .gx-btn-pink:active:not(:disabled) { box-shadow: 0 1px 5px -1px rgba(225,29,107,0.5); } /* The Spill FAB + composer "go" pill: gradient + glow, unmistakably the CTA. */ .composer-strip .go, .tab-spill .spill-btn { background:var(--gx-grad) !important; box-shadow: 0 4px 14px -3px rgba(225,29,107,0.5); } /* Inputs: a soft brand focus ring instead of a hard outline. */ .gx-input:focus, .search-input-wrap:focus-within { border-color:var(--gx-accent); box-shadow:0 0 0 3px rgba(225,29,107,0.12); } .search-input-wrap { transition:box-shadow .2s ease, border-color .2s ease; border:1px solid transparent; } /* Bottom nav + sheets: lifted with soft shadows. */ .tab-bar { border-top:1px solid rgba(20,20,31,0.05); box-shadow: 0 -10px 28px -18px rgba(20,20,31,0.18); } .sheet { border-radius:22px 22px 0 0 !important; box-shadow: 0 -10px 48px -10px rgba(20,20,31,0.26) !important; } .toast { box-shadow:0 10px 30px -6px rgba(20,20,31,0.35); } /* Chat: sent bubble gets the brand gradient + a soft glow. */ .chat-bubble-sent { background:var(--gx-grad) !important; box-shadow:0 2px 8px -3px rgba(225,29,107,0.4); } /* Avatars: a whisper-thin inner ring adds depth on flat backgrounds. */ .post-avatar, .story-avatar { box-shadow: inset 0 0 0 1px rgba(20,20,31,0.05); } /* Rows: refined press wash. */ .post-card:active { background:var(--gx-surface-2); } .conversation-item:active, .search-result-user:active, .notif-item:active, .sheet-row:active { background:var(--gx-surface-2); } /* Feed tabs: the active pink underline animates in. */ .feed-tab { transition:color .2s ease; } .feed-tab.active { border-bottom-width:3px; } /* Section shadows on the sticky feed header for subtle separation on scroll */ .sticky-header { box-shadow: 0 1px 0 rgba(20,20,31,0.04); } @media (prefers-reduced-motion: reduce) { .gx-btn:active, .gx-btn-pink:active, .tag-pill:active, .composer-strip .go:active, .tab-spill .spill-btn:active, .buzzing-card:active, .topic-tile:active, .community-card:active, .suggestion-card:active, .conversation-item:active, .search-result-user:active, .notif-item:active, .composer-strip:active, .tab-item:active { transform:none; } } /* ============================================================ RICH EDITORIAL THEME — content floats on a warm canvas, confident type, real depth. (Rich & tactile + Editorial) ============================================================ */ /* Warm paper canvas that content lifts off of */ #app-root, .screen, .page-content { background:var(--gx-surface-2); } @media (min-width:1024px){ #app-root { background:var(--gx-surface-2); } } /* The top chrome stays crisp white so the feed reads as cards below it */ .sticky-header, .feed-tabs, .composer-strip { background:var(--gx-surface); } /* FEED POSTS become floating cards — the single biggest premium shift */ .post-card { background:var(--gx-surface); border:1px solid rgba(20,20,31,0.05); border-bottom:1px solid rgba(20,20,31,0.05); border-radius:20px; margin:12px 12px 0; padding:16px 16px 12px; box-shadow:0 1px 2px rgba(20,20,31,0.04), 0 12px 34px -16px rgba(20,20,31,0.16); } .post-card:active { background:var(--gx-surface); transform:scale(.992); box-shadow:0 1px 2px rgba(20,20,31,0.05), 0 6px 18px -12px rgba(20,20,31,0.16); } .post-image-grid { border-radius:14px; overflow:hidden; } /* List rows across the app also lift into cards — cohesive "everything floats" */ .conversation-item, .search-result-user, .search-result-post, .notif-item, .circle-row { background:var(--gx-surface); border-bottom:none !important; border-radius:16px; margin:10px 12px 0; border:1px solid rgba(20,20,31,0.05); box-shadow:0 10px 26px -16px rgba(20,20,31,0.12); } .conversation-item.unread { background:var(--gx-pink-tint); } /* Circle list rows float like everything else */ .circle-row { display:flex; align-items:center; gap:12px; padding:13px 15px; cursor:pointer; } .circle-row:active { background:var(--gx-surface-2); transform:scale(.992); } /* On the warm canvas, section wrappers shouldn't paint their own borders */ .circle-list { border:none !important; } /* Received chat bubbles turn white so they float on the warm chat canvas */ .chat-bubble-received { background:var(--gx-surface); box-shadow:0 1px 2px rgba(20,20,31,0.05), 0 8px 20px -14px rgba(20,20,31,0.14); } /* EDITORIAL TYPE — bigger, tighter, more confident */ .logo { font-size:26px; letter-spacing:-1.1px; } .post-name, .post-circle { font-size:15px; letter-spacing:-0.01em; } .post-text { font-size:16px; line-height:1.55; color:var(--gx-text); letter-spacing:-0.002em; } .feed-tab { font-size:14.5px; letter-spacing:-0.01em; } /* Section headers that sit on the canvas get a touch more presence */ .empty-state p { font-size:14.5px; } /* Softer dividers inside cards (comments, etc.) */ .comment-bubble { background:var(--gx-surface-2); } /* ==================== PREMIUM REDESIGN — STAGE 2 ==================== */ /* Logo: bold wordmark, gradient "X", 4-point sparkle (matches the brand board) */ .gx-logo, .logo, .desktop-logo { position:relative; display:inline-block; font-weight:800; letter-spacing:-0.045em; padding-right:.6em; } .gx-logo > span, .logo > span, .desktop-logo > span { background:linear-gradient(135deg, var(--gx-accent-2), var(--gx-accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .gx-logo::after, .logo::after, .desktop-logo::after { content:'✦'; position:absolute; top:-0.04em; right:-0.04em; font-size:0.4em; line-height:1; color:var(--gx-accent-2); -webkit-text-fill-color:var(--gx-accent-2); text-shadow:0 0 12px rgba(255,92,180,.65); } /* Status pill: refined tinted chip with a glowing CSS dot (no emoji) */ .status-pill { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:5px 11px; border-radius:999px; line-height:1; } .status-pill .dot { width:6px; height:6px; border-radius:999px; background:var(--sc, currentColor); box-shadow:0 0 8px var(--sc, currentColor); flex-shrink:0; } /* Glass post cards: rounded, separated, gradient surface + depth */ .post-card { background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.012)), var(--gx-surface); border:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); border-radius:22px; margin:12px 14px 0; padding:16px 16px 12px; box-shadow:0 16px 38px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); overflow:hidden; } .post-card:active { background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)), var(--gx-surface-2); } .post-card--railed::before { border-radius:0; } /* Frosted-glass sticky header + bottom nav */ .sticky-header { background:linear-gradient(180deg, rgba(8,8,14,.94), rgba(8,8,14,.5)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); position:sticky; top:0; z-index:20; } .tab-bar { background:rgba(9,9,14,.9); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } .tab-spill .spill-btn { box-shadow:0 14px 26px rgba(255,47,146,.32); } /* Identity switcher — Real (pink) / Ghost (ultraviolet) cards (matches board) */ .id-card { display:flex; align-items:center; gap:13px; padding:14px; border-radius:18px; background:var(--ict); border:1.5px solid transparent; cursor:pointer; margin-bottom:10px; transition:border-color .15s, transform .1s; } .id-card:active { transform:scale(.99); } .id-card--active { border-color:var(--ic); } .id-card__avatar { width:46px; height:46px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:24px; background:rgba(255,255,255,.05); border:2px solid var(--ic); flex-shrink:0; box-shadow:0 0 20px -4px var(--ic); overflow:hidden; } .id-card__body { flex:1; min-width:0; } .id-card__title { font-weight:800; font-size:16px; color:var(--gx-text); display:flex; align-items:center; gap:8px; } .id-card__badge { font-size:9px; font-weight:800; letter-spacing:.06em; color:var(--gx-on-accent); background:var(--ic); padding:3px 7px; border-radius:999px; } .id-card__sub { font-size:12.5px; color:var(--gx-text-3); margin-top:2px; line-height:1.35; } .id-card__handle { font-size:12.5px; font-weight:700; color:var(--ic); margin-top:3px; } .id-card__check { width:24px; height:24px; border-radius:999px; border:2px solid var(--ic); color:var(--gx-on-accent); background:var(--ic); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex-shrink:0; } .id-card:not(.id-card--active) .id-card__check { background:transparent; color:transparent; border-color:var(--gx-border); } .ghost-hero { width:96px; height:96px; margin:0 auto; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:52px; background:radial-gradient(circle at 50% 40%, rgba(141,91,255,.35), rgba(141,91,255,.06) 70%); border:2px solid rgba(141,91,255,.5); box-shadow:0 0 40px -6px rgba(141,91,255,.6); } /* Settings row icons — tidy rounded-square badge instead of a bare emoji */ .opt-ico { width:38px; height:38px; flex-shrink:0; border-radius:11px; background:var(--gx-surface-2); border:1px solid var(--gx-border); display:inline-flex; align-items:center; justify-content:center; font-size:18px; } /* Moment scroll-to highlight */ @keyframes gxMsgGlow { 0%{background:var(--gx-accent-tint,rgba(255,47,146,.18));} 100%{background:transparent;} } .msg-glow { animation:gxMsgGlow 1.6s ease; border-radius:14px; } /* ============================================================ GOSSIPX LIGHT POLISH — reference-board direction A quiet lavender canvas, crisp white surfaces and selective gradient energy. Kept theme-scoped so the user-selectable dark mode still works. ============================================================ */ :root[data-theme="light"] { --gx-bg:#F7F7FA; --gx-bg2:#F0EFF4; --gx-surface:#FFFFFF; --gx-surface-2:#F0EFF4; --gx-surface-3:#E8E6ED; --gx-border:#E4E2E9; --gx-text:#15131D; --gx-text-2:#5F596B; --gx-text-3:#888294; --gx-text-4:#6F687C; --gx-brand-pink:#FF2F92; --gx-brand-violet:#8D5BFF; --gx-brand-blue:#3B82F6; --gx-accent:#C81765; --gx-accent-2:#D91E78; --gx-purple:#6D32D9; --gx-purple-2:#7A43DF; --gx-grad:linear-gradient(135deg,var(--gx-brand-pink) 0%,var(--gx-brand-violet) 55%,var(--gx-brand-blue) 100%); --gx-pink-tint:rgba(255,47,146,.08); --gx-purple-tint:rgba(141,91,255,.09); --gx-shadow:0 12px 40px rgba(23,20,31,.10); } :root[data-theme="light"], :root[data-theme="light"] body { background:radial-gradient(circle at 10% 0%,rgba(240,0,168,.035),transparent 22%),radial-gradient(circle at 92% 8%,rgba(54,93,255,.04),transparent 22%),var(--gx-bg); } :root[data-theme="light"] #app-root, :root[data-theme="light"] .screen, :root[data-theme="light"] .page-content { background:var(--gx-bg); } :root[data-theme="light"] .desktop-main { background:var(--gx-bg); } :root[data-theme="light"] .sticky-header { background:rgba(255,255,255,.94); border-bottom:1px solid var(--gx-border); box-shadow:0 4px 22px rgba(37,31,70,.045); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } :root[data-theme="light"] .feed-tabs { background:var(--gx-surface); border-bottom:1px solid var(--gx-border); } :root[data-theme="light"] .feed-tab { color:var(--gx-text-3); padding-top:14px; } :root[data-theme="light"] .feed-tab.active { color:var(--gx-purple); border-image:var(--gx-grad) 1; } :root[data-theme="light"] .composer-strip { margin:12px 14px 4px; padding:10px 12px; border:1px solid var(--gx-border); border-radius:16px; background:var(--gx-surface); box-shadow:0 8px 26px rgba(41,34,80,.045); } :root[data-theme="light"] .composer-strip .go { min-width:68px; text-align:center; padding:9px 16px; } :root[data-theme="light"] .post-card { background:var(--gx-surface); border:1px solid var(--gx-border); border-radius:18px; margin:12px 14px 0; box-shadow:0 10px 32px rgba(40,32,82,.055); backdrop-filter:none; -webkit-backdrop-filter:none; } :root[data-theme="light"] .post-card:active { background:var(--gx-surface-2); box-shadow:0 5px 18px rgba(40,32,82,.05); } :root[data-theme="light"] .post-card--railed::before { width:3px; border-radius:18px 0 0 18px; } :root[data-theme="light"] .post-text { color:var(--gx-text); line-height:1.5; } :root[data-theme="light"] .tag-pill { background:var(--gx-surface-2); border:1px solid var(--gx-border); color:var(--gx-text-4); } :root[data-theme="light"] .action-btn { color:var(--gx-text-3); } :root[data-theme="light"] .tab-bar { background:rgba(255,255,255,.96); border-top:1px solid var(--gx-border); padding:5px 18px max(6px, calc(env(safe-area-inset-bottom, 12px) - 28px)); box-shadow:0 -12px 34px rgba(40,32,82,.065); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } :root[data-theme="light"] .tab-item { color:var(--gx-text-3); gap:4px; } :root[data-theme="light"] .tab-item.active { color:var(--gx-purple); } :root[data-theme="light"] .tab-item svg { width:24px; height:24px; } :root[data-theme="light"] .tab-spill .spill-btn { width:54px; height:50px; border-radius:999px; box-shadow:0 11px 24px rgba(122,44,255,.27),0 5px 12px rgba(240,0,168,.18); } :root[data-theme="light"] .gx-btn, :root[data-theme="light"] .gx-btn-pink { border-radius:12px; min-height:48px; font-weight:700; box-shadow:0 10px 24px rgba(122,44,255,.16),0 4px 10px rgba(240,0,168,.10); } :root[data-theme="light"] .gx-input, :root[data-theme="light"] .search-input-wrap { background:var(--gx-surface); border:1px solid var(--gx-border); border-radius:12px; box-shadow:0 4px 16px rgba(40,32,82,.025); } :root[data-theme="light"] .conversation-item, :root[data-theme="light"] .search-result-user, :root[data-theme="light"] .search-result-post, :root[data-theme="light"] .notif-item, :root[data-theme="light"] .circle-row { background:var(--gx-surface); border:1px solid var(--gx-border) !important; border-radius:16px; margin:10px 14px 0; box-shadow:0 8px 26px rgba(40,32,82,.045); } :root[data-theme="light"] .conversation-item { padding:14px 15px; } :root[data-theme="light"] .conversation-item.unread { background:linear-gradient(100deg,var(--gx-pink-tint),var(--gx-purple-tint)),var(--gx-surface); } :root[data-theme="light"] .chat-bubble-received { background:var(--gx-surface); border:1px solid var(--gx-border); box-shadow:0 7px 20px rgba(40,32,82,.045); } :root[data-theme="light"] .chat-bubble-sent { box-shadow:0 9px 22px rgba(122,44,255,.20) !important; } :root[data-theme="light"] .sheet { background:var(--gx-surface); border:1px solid var(--gx-border); } :root[data-theme="light"] .sheet-backdrop { background:rgba(18,16,36,.38); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } :root[data-theme="light"] .id-card { box-shadow:0 8px 24px rgba(40,32,82,.045); } :root[data-theme="light"] .ghost-hero { background:radial-gradient(circle at 45% 36%,rgba(255,255,255,.95),rgba(122,44,255,.14) 48%,rgba(240,0,168,.08)); border-color:rgba(122,44,255,.22); box-shadow:0 16px 42px rgba(122,44,255,.15); } :root[data-theme="light"] .desktop-nav { background:rgba(255,255,255,.72); border-right-color:var(--gx-border); } :root[data-theme="light"] .desktop-nav-item { border-radius:14px; } :root[data-theme="light"] .desktop-nav-item:hover { background:var(--gx-surface-2); } :root[data-theme="light"] .desktop-nav-item.active { color:var(--gx-purple); background:linear-gradient(100deg,rgba(240,0,168,.07),rgba(122,44,255,.08)); } :root[data-theme="light"] .desktop-spill-btn { background:var(--gx-grad); box-shadow:0 12px 26px rgba(122,44,255,.18); } :root[data-theme="light"] .desktop-widget { background:var(--gx-surface); border:1px solid var(--gx-border); box-shadow:0 10px 30px rgba(40,32,82,.04); } @media (max-width:600px) { :root[data-theme="light"] .post-card { margin:10px 10px 0; border-radius:16px; padding:15px 14px 11px; } :root[data-theme="light"] .composer-strip { margin:10px 10px 2px; } :root[data-theme="light"] .conversation-item, :root[data-theme="light"] .search-result-user, :root[data-theme="light"] .search-result-post, :root[data-theme="light"] .notif-item, :root[data-theme="light"] .circle-row { margin-left:10px; margin-right:10px; } } /* Logo theme swap — approved artwork is black-text (for light); the recolored variant is light-text (for dark). Default app theme is dark, so show the dark variant unless the user opted into light. */ .gx-brand-light { display:none; } .gx-brand-dark { display:block; } :root[data-theme="light"] .gx-brand-light { display:block; } :root[data-theme="light"] .gx-brand-dark { display:none; } /* ============================================================ AUTH / ONBOARDING — approved GossipX light-first direction. Uses the same token system in dark mode; no auth-only palette. ============================================================ */ .gx-auth-screen { background:var(--gx-bg); padding:clamp(32px,8vh,76px) 24px max(28px,env(safe-area-inset-bottom)); box-sizing:border-box; } .gx-auth-landing { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; animation:gxslide .45s ease both; } .gx-auth-logo { display:flex; align-items:center; justify-content:center; width:100%; } /* NOTE: no `display` here — the .gx-brand-light/.gx-brand-dark theme-swap rules above own visibility. Setting display:block here forced BOTH variants on (double logo) since it came later with equal specificity. */ .gx-brand-full { max-width:min(78vw,280px); } /* ============================================================ PREMIUM SYSTEM — COMPLETE LIGHT + DARK PARITY Authoritative token-based component layer. Earlier declarations remain as safe fallbacks; these rules intentionally unify geometry in both themes. ============================================================ */ :root{ --gx-canvas-glow-1:rgba(255,47,146,.055);--gx-canvas-glow-2:rgba(59,155,255,.05); --gx-card-border:#2A2632;--gx-card-shadow:0 12px 34px rgba(0,0,0,.30); --gx-card-shadow-hover:0 16px 42px rgba(0,0,0,.38);--gx-chrome:rgba(13,13,16,.91); --gx-overlay:rgba(0,0,0,.64);--gx-control:#191720; --gx-radius-xs:10px;--gx-radius-sm:12px;--gx-radius-md:16px;--gx-radius-lg:20px;--gx-radius-xl:24px; } :root[data-theme="light"]{ --gx-canvas-glow-1:rgba(255,47,146,.035);--gx-canvas-glow-2:rgba(59,130,246,.045); --gx-card-border:#E4E2E9;--gx-card-shadow:0 10px 32px rgba(40,32,82,.055); --gx-card-shadow-hover:0 14px 38px rgba(40,32,82,.09);--gx-chrome:rgba(255,255,255,.94); --gx-overlay:rgba(18,16,36,.40);--gx-control:#F0EFF4; } html,body{background:radial-gradient(circle at 8% -5%,var(--gx-canvas-glow-1),transparent 24%),radial-gradient(circle at 95% 5%,var(--gx-canvas-glow-2),transparent 25%),var(--gx-bg)} #app-root,.gx-screen,.gx-screen>.page-content{background:transparent} .gx-screen{height:100%;min-height:0;overflow:hidden} .gx-screen>.page-content{min-height:0;scrollbar-gutter:stable;overscroll-behavior-y:contain} .app-shell,.desktop-main{min-height:0;overflow:hidden} /* Shared chrome */ .sticky-header{background:var(--gx-chrome);border-bottom:1px solid var(--gx-border);box-shadow:0 5px 22px rgba(0,0,0,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .feed-tabs{background:var(--gx-chrome);border-bottom:1px solid var(--gx-border)} .feed-tab{color:var(--gx-text-3);font-weight:650;min-height:44px;transition:color .18s,border-color .18s} .feed-tab.active{color:var(--gx-purple);border-bottom-color:var(--gx-purple)} .tab-bar{background:var(--gx-chrome);border-top:1px solid var(--gx-border);padding:7px 18px max(8px,env(safe-area-inset-bottom));box-shadow:0 -12px 34px rgba(0,0,0,.10);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .tab-item{color:var(--gx-text-3);gap:3px;border-radius:var(--gx-radius-sm);transition:color .18s,background .18s,transform .12s} .tab-item.active{color:var(--gx-purple)} .tab-item svg{width:23px;height:23px}.tab-spill{transform:translateY(-3px)} .tab-spill .spill-btn{width:54px;height:50px;border-radius:999px;background:var(--gx-grad)!important;box-shadow:0 12px 27px rgba(141,91,255,.28)} /* Buttons, fields and selection controls */ .gx-btn,.gx-btn-pink,.desktop-spill-btn{min-height:48px;border-radius:var(--gx-radius-sm);background:var(--gx-grad);color:var(--gx-on-accent);font-weight:750;box-shadow:0 10px 25px rgba(141,91,255,.18);transition:transform .12s,filter .15s,box-shadow .15s} .gx-btn:hover:not(:disabled),.desktop-spill-btn:hover{filter:brightness(1.04);box-shadow:0 14px 30px rgba(141,91,255,.24)} .gx-btn:active:not(:disabled),.desktop-spill-btn:active{transform:scale(.985)} .gx-btn:disabled{background:var(--gx-surface-3);color:var(--gx-text-4);box-shadow:none;opacity:.78} .gx-input,.search-input-wrap,.desktop-search{background:var(--gx-surface);border:1px solid var(--gx-border);border-radius:var(--gx-radius-sm);box-shadow:0 4px 16px rgba(0,0,0,.035);color:var(--gx-text)} .gx-input:focus,.search-input-wrap:focus-within{border-color:var(--gx-purple);box-shadow:0 0 0 3px var(--gx-purple-tint)} .tag-pill,.pulse-chip,.type-chip,.circle-chip{border:1px solid var(--gx-border);background:var(--gx-control);color:var(--gx-text-2)} .tag-pill-sel{background:var(--gx-grad);border-color:transparent;color:var(--gx-on-accent);box-shadow:0 7px 18px rgba(141,91,255,.16)} /* Feed, detail and discovery surfaces */ .composer-strip{margin:12px 14px 4px;padding:10px 12px;background:var(--gx-surface);border:1px solid var(--gx-card-border);border-radius:var(--gx-radius-md);box-shadow:var(--gx-card-shadow)} .composer-strip .go{min-width:68px;text-align:center;padding:9px 16px;background:var(--gx-grad)!important} .post-card{background:var(--gx-surface);border:1px solid var(--gx-card-border);border-radius:var(--gx-radius-lg);margin:12px 14px 0;padding:16px 16px 12px;box-shadow:var(--gx-card-shadow);backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden} .post-card:active{background:var(--gx-surface-2);box-shadow:var(--gx-card-shadow-hover);transform:scale(.995)} .post-card--railed::before{width:3px;border-radius:var(--gx-radius-lg) 0 0 var(--gx-radius-lg)} .post-text{font-size:15.5px;line-height:1.55;letter-spacing:-.005em}.post-name,.post-circle{font-weight:750} .post-actions{margin-top:10px;padding-top:5px;border-top:1px solid color-mix(in srgb,var(--gx-border) 70%,transparent)} .action-btn{min-width:44px;min-height:40px;justify-content:center;color:var(--gx-text-3);transition:background .15s,transform .1s} .action-btn:hover{background:var(--gx-control)} .news-source,.poll-option,.comment-bubble,.suggestion-card,.community-card,.buzzing-card,.topic-tile{border-color:var(--gx-card-border);background:var(--gx-surface);border-radius:var(--gx-radius-md);box-shadow:var(--gx-card-shadow)} .empty-state{padding:clamp(42px,10vh,88px) 24px}.empty-state .emoji{filter:drop-shadow(0 10px 20px var(--gx-purple-tint))} /* Lists: Explore, Circles, notifications, follows and messages */ .conversation-item,.search-result-user,.search-result-post,.notif-item,.circle-row{background:var(--gx-surface);border:1px solid var(--gx-card-border)!important;border-radius:var(--gx-radius-md);margin:10px 14px 0;box-shadow:var(--gx-card-shadow);transition:transform .12s,background .15s} .conversation-item:hover,.search-result-user:hover,.search-result-post:hover,.notif-item:hover,.circle-row:hover{background:var(--gx-surface-2)} .conversation-item.unread{background:linear-gradient(105deg,var(--gx-pink-tint),var(--gx-purple-tint)),var(--gx-surface)} .section-title{font-size:13px;letter-spacing:.055em;text-transform:uppercase;color:var(--gx-text-3);font-weight:800} /* Composer, profile and settings */ [data-screen="compose"] .desktop-main,[data-screen="editProfile"] .desktop-main,[data-screen="newCommunity"] .desktop-main,[data-screen="uploadReceipt"] .desktop-main{background:var(--gx-bg)} [data-screen="compose"] textarea,[data-screen="chat"] textarea{color:var(--gx-text)} [data-screen="profile"] .page-content>div:first-child,[data-screen="user"] .page-content>div:first-child{box-shadow:0 12px 32px rgba(0,0,0,.08)} .profile-grid{gap:6px;padding:6px}.profile-grid-item{border-radius:var(--gx-radius-sm)} .opt-ico{background:var(--gx-control);border-color:var(--gx-border);border-radius:var(--gx-radius-sm)} /* Chat */ .chat-bubble-received{background:var(--gx-surface);border:1px solid var(--gx-card-border);box-shadow:var(--gx-card-shadow);border-radius:17px 17px 17px 5px} .chat-bubble-sent{background:var(--gx-grad)!important;color:var(--gx-on-accent);border-radius:17px 17px 5px 17px;box-shadow:0 9px 23px rgba(141,91,255,.22)!important} [data-screen="chat"] .page-content{background:radial-gradient(circle at 10% 20%,var(--gx-purple-tint),transparent 26%),var(--gx-bg)} /* Sheets and transient UI */ .sheet-backdrop{position:fixed;background:var(--gx-overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .sheet{position:fixed;background:var(--gx-surface);border:1px solid var(--gx-card-border);border-radius:var(--gx-radius-xl) var(--gx-radius-xl) 0 0!important;max-height:calc(100dvh - max(18px,env(safe-area-inset-top)));overflow:auto;overscroll-behavior:contain;box-shadow:0 -18px 60px rgba(0,0,0,.28)!important} .sheet-row{min-height:50px;border-bottom-color:var(--gx-border)} .toast{background:var(--gx-text);color:var(--gx-bg);border:1px solid var(--gx-border);border-radius:999px;box-shadow:var(--gx-shadow)} .whats-new-sheet{overflow:hidden}.whats-new-list{overflow-y:auto} /* Authentication/onboarding geometry remains identical across both themes */ .gx-auth-screen{background:radial-gradient(circle at 50% 16%,var(--gx-purple-tint),transparent 28%),var(--gx-bg)} .gx-auth-form-wrap{max-width:420px}.gx-auth-field{background:var(--gx-surface);border-color:var(--gx-card-border);box-shadow:var(--gx-shadow-soft)} .gx-auth-back{background:var(--gx-surface);box-shadow:var(--gx-shadow-soft)} .gx-auth-actions .gx-btn{min-height:50px}.gx-auth-form-wrap h1{letter-spacing:-.7px} .gx-link-action{min-width:44px;min-height:44px;padding:8px 7px;border:0;background:transparent;color:var(--gx-text-3);font-family:inherit;font-size:13px;font-weight:700;line-height:1;cursor:pointer;border-radius:10px} .gx-link-action:hover,.gx-link-action:focus-visible{background:var(--gx-control);outline:none}.gx-link-action--accent{color:var(--gx-accent)} .gx-top-action{position:relative;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer;border-radius:12px} .gx-top-action:hover,.gx-top-action:focus-visible{background:var(--gx-control);outline:none} /* Desktop frame */ @media(min-width:1024px){ .app-shell{grid-template-columns:1fr minmax(520px,600px) 1fr} .desktop-nav{background:color-mix(in srgb,var(--gx-surface) 84%,transparent);border-right-color:var(--gx-border)} .desktop-main{background:var(--gx-bg);border-color:var(--gx-border)} .desktop-nav-item{border-radius:var(--gx-radius-md)}.desktop-nav-item:hover{background:var(--gx-control)} .desktop-nav-item.active{background:linear-gradient(100deg,var(--gx-pink-tint),var(--gx-purple-tint));color:var(--gx-purple)} .desktop-widget{background:var(--gx-surface);border-color:var(--gx-card-border);border-radius:var(--gx-radius-lg);box-shadow:var(--gx-card-shadow)} .sheet{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));border-radius:var(--gx-radius-xl)!important;max-height:min(760px,calc(100dvh - 48px))} } /* Mobile and compact-height safety */ @media(max-width:600px){ .post-card{margin:10px 10px 0;border-radius:var(--gx-radius-md);padding:15px 14px 11px} .composer-strip{margin:10px 10px 2px} .conversation-item,.search-result-user,.search-result-post,.notif-item,.circle-row{margin-left:10px;margin-right:10px} .sticky-header{padding-left:14px!important;padding-right:14px!important} } @media(max-height:620px){.gx-auth-screen{padding-top:30px}.sheet{max-height:calc(100dvh - 12px)}.empty-state{padding-top:30px;padding-bottom:30px}} @media(prefers-reduced-motion:reduce){.post-card,.conversation-item,.gx-btn,.tab-item{transition:none!important}} /* Touch/accessibility close-out: compact visuals keep a 44px hit box. */ .action-btn,.back-btn{min-width:44px;min-height:44px} [data-screen="compose"] [role="button"],[data-screen="chat"] [role="button"],[data-screen="profile"] [role="button"],[data-screen="settings"] [role="button"],[data-screen="notifications"] [role="button"],[data-screen="messages"] [role="button"]{min-height:44px} [data-screen="compose"] [aria-label="Add photo or video"],[data-screen="compose"] [aria-label="Add hashtag"],[data-screen="compose"] [aria-label="Add poll"]{min-width:44px;display:inline-flex;align-items:center;justify-content:center} .gx-auth-link,.gx-auth-switch,.gx-auth-forgot{min-height:44px} .gx-auth-kicker { margin-top:18px; max-width:330px; color:var(--gx-text); font-size:21px; line-height:1.25; letter-spacing:-.35px; font-weight:800; } .gx-auth-copy { margin-top:12px; max-width:340px; color:var(--gx-text-3); font-size:14px; line-height:1.55; } .gx-auth-actions { width:100%; max-width:410px; margin:0 auto; display:flex; flex-direction:column; gap:10px; animation:gxslide .55s ease both; } .gx-auth-link, .gx-auth-switch, .gx-auth-forgot { appearance:none; border:0; background:transparent; color:var(--gx-text-3); font:600 13px/1.4 inherit; cursor:pointer; text-align:center; padding:9px; } .gx-auth-link:hover, .gx-auth-switch:hover, .gx-auth-forgot:hover { color:var(--gx-accent); } .gx-auth-switch b { color:var(--gx-accent); } .gx-auth-legal { margin-top:5px; color:var(--gx-text-4); font-size:11.5px; line-height:1.5; text-align:center; } .gx-auth-legal a, .gx-auth-consent a { color:var(--gx-accent); text-decoration:none; font-weight:700; } .gx-auth-form-screen { overflow:auto; display:block; } .gx-auth-form-wrap { width:100%; max-width:430px; min-height:100%; margin:0 auto; display:flex; flex-direction:column; justify-content:center; padding:18px 0 30px; animation:gxslide .4s ease both; } .gx-auth-small-logo { display:flex; justify-content:center; margin-bottom:22px; } .gx-auth-form-wrap h1 { color:var(--gx-text); font-size:29px; line-height:1.14; letter-spacing:-.55px; text-align:center; font-weight:800; } .gx-auth-form-wrap > p { color:var(--gx-text-3); font-size:14px; line-height:1.55; text-align:center; margin:9px auto 22px; max-width:350px; } .gx-auth-back { position:absolute; z-index:3; top:max(18px,env(safe-area-inset-top)); left:18px; width:42px; height:42px; border-radius:999px; border:1px solid var(--gx-border); color:var(--gx-text); background:var(--gx-surface); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--gx-shadow-soft); } .gx-auth-label { margin:12px 2px 6px; color:var(--gx-text-2); font-size:12px; font-weight:800; letter-spacing:.01em; } .gx-auth-label span { color:var(--gx-text-4); font-weight:600; } .gx-auth-field { min-height:52px; display:flex; align-items:center; overflow:hidden; border:1px solid var(--gx-border); border-radius:13px; background:var(--gx-surface); transition:border-color .15s,box-shadow .15s; } .gx-auth-field:focus-within { border-color:var(--gx-purple); box-shadow:0 0 0 3px var(--gx-purple-tint); } .gx-auth-field .gx-input { border:0 !important; box-shadow:none !important; background:transparent !important; border-radius:0 !important; min-width:0; width:100%; padding:14px 15px; color:var(--gx-text); font-size:15px; } .gx-auth-handle > span { padding-left:15px; color:var(--gx-text-3); font-size:18px; font-weight:700; } .gx-auth-handle .gx-input { padding-left:5px; } .gx-auth-password button { flex-shrink:0; border:0; background:transparent; color:var(--gx-purple); font:700 12px/1 inherit; padding:14px; cursor:pointer; } .gx-auth-forgot { align-self:flex-end; color:var(--gx-purple); padding:10px 2px 5px; } .gx-auth-consent { margin-top:14px; display:flex; align-items:flex-start; gap:10px; color:var(--gx-text-3); font-size:12.5px; line-height:1.5; cursor:pointer; } .gx-auth-consent input { width:20px; height:20px; flex:0 0 20px; margin-top:1px; accent-color:var(--gx-purple); } .gx-auth-consent b { color:var(--gx-text); } .gx-auth-submit { margin-top:20px; background:var(--gx-grad) !important; border:0; } .gx-honeypot { position:absolute !important; left:-9999px !important; top:0 !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; } .gx-auth-step { color:var(--gx-accent); font-size:11px; font-weight:800; letter-spacing:.08em; text-align:center; margin-bottom:9px; } .gx-auth-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin:5px 0 4px; } .gx-auth-tags .tag-pill { appearance:none; cursor:pointer; } .gx-auth-interests { justify-content:center; } .gx-auth-centered { justify-content:center; } :root[data-theme="light"] .gx-auth-field, :root[data-theme="light"] .gx-auth-back { box-shadow:var(--gx-shadow-soft); } @media (max-height:720px) { .gx-auth-screen { padding-top:42px; } .gx-auth-form-wrap { justify-content:flex-start; padding-top:34px; } .gx-auth-small-logo { margin-bottom:14px; } .gx-auth-form-wrap > p { margin-bottom:14px; } } /* Offline state: fixed, low-noise and safe-area aware. */ .gx-offline-banner{ position:fixed;z-index:10000;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%); padding:7px 12px;border-radius:999px;background:var(--gx-surface-2);color:var(--gx-text-2); border:1px solid var(--gx-border);box-shadow:var(--gx-shadow-soft);font-size:12px;font-weight:700;white-space:nowrap; } /* Production pass 2026-08-30n — post media composer / Android share-target */ .gx-compose-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:4px 18px 10px;background:var(--gx-surface)} .gx-compose-media-item{position:relative;aspect-ratio:1.15/1;overflow:hidden;border-radius:14px;background:var(--gx-surface-2);border:1px solid var(--gx-border)} .gx-compose-media-item img,.gx-compose-media-item video{display:block;width:100%;height:100%;object-fit:cover} .gx-compose-media-item button{position:absolute;right:7px;top:7px;width:30px;height:30px;border:0;border-radius:999px;background:color-mix(in srgb,var(--gx-text) 72%,transparent);color:var(--gx-bg);font:700 20px/1 system-ui;display:grid;place-items:center;cursor:pointer} .gx-compose-media-kind{position:absolute;left:7px;bottom:7px;padding:4px 7px;border-radius:999px;background:color-mix(in srgb,var(--gx-text) 72%,transparent);color:var(--gx-bg);font-size:10px;font-weight:800;letter-spacing:.06em} .gx-compose-media-uploading{margin:0 18px 10px;padding:9px 11px;border-radius:12px;background:var(--gx-surface-2);border:1px solid var(--gx-border);color:var(--gx-text-3);font-size:12px;font-weight:600} @media(max-width:420px){.gx-compose-media-grid{grid-template-columns:1fr 1fr}} /* ============================================================ CHAT CONVENIENCE PATCH — one-thumb composer + premium actions ============================================================ */ .gx-icon { display:block; flex:none; } .gx-chat-header { flex-shrink:0; padding:11px 12px; background:var(--gx-surface); border-bottom:1px solid var(--gx-border); } .gx-chat-header-row { min-height:46px; display:flex; align-items:center; gap:9px; } .gx-chat-person { min-width:0; flex:1; display:flex; align-items:center; gap:10px; cursor:pointer; border-radius:14px; } .gx-chat-person-copy { min-width:0; } .gx-chat-person-copy > strong { display:block; font-size:15.5px; line-height:1.25; color:var(--gx-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gx-chat-header-actions { display:flex; align-items:center; gap:5px; flex:none; } .gx-icon-btn { width:38px; height:38px; border:1px solid var(--gx-border); border-radius:13px; background:var(--gx-surface-2); color:var(--gx-text-2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font:inherit; transition:transform .14s ease, background .14s ease, color .14s ease, border-color .14s ease; } .gx-icon-btn:active { transform:scale(.92); } .gx-icon-btn:hover { color:var(--gx-text); border-color:var(--gx-text-4); } .gx-icon-btn.ghost { background:transparent; border-color:transparent; } .gx-chat-searchbar { display:flex; align-items:center; gap:6px; min-height:46px; } .gx-chat-search-field { min-width:0; flex:1; height:40px; display:flex; align-items:center; gap:8px; padding:0 11px; border:1px solid var(--gx-border); background:var(--gx-surface-2); border-radius:13px; color:var(--gx-text-3); } .gx-chat-search-field:focus-within { border-color:var(--gx-accent); box-shadow:0 0 0 3px var(--gx-pink-tint); } .gx-chat-search-field input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--gx-text); font:inherit; font-size:13.5px; } .gx-chat-search-field input::placeholder { color:var(--gx-text-4); } .gx-chat-search-field span { flex:none; font-size:10.5px; color:var(--gx-text-4); white-space:nowrap; } .gx-message-more { width:28px; height:28px; padding:0; border:0; border-radius:999px; background:transparent; color:var(--gx-text-4); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none; opacity:.7; transition:opacity .14s ease, background .14s ease, color .14s ease; } .gx-message-more:hover, .gx-message-more:focus-visible { opacity:1; color:var(--gx-text-2); background:var(--gx-surface-3); } .gx-chat-scrollbtn { position:fixed; right:16px; bottom:calc(88px + env(safe-area-inset-bottom, 6px)); z-index:55; width:40px; height:40px; border-radius:999px; border:1px solid var(--gx-border); background:var(--gx-surface); color:var(--gx-text-2); box-shadow:var(--gx-shadow-soft); align-items:center; justify-content:center; cursor:pointer; } .gx-chat-composer { flex-shrink:0; padding:8px 12px calc(12px + env(safe-area-inset-bottom, 6px)); border-top:1px solid var(--gx-border); background:var(--gx-surface); } .gx-composer-row { display:flex; align-items:flex-end; gap:7px; } .gx-composer-add, .gx-composer-primary { width:42px; height:42px; flex:none; border:0; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font:inherit; transition:transform .14s ease, box-shadow .14s ease, background .14s ease; } .gx-composer-add { background:var(--gx-surface-2); color:var(--gx-text-2); border:1px solid var(--gx-border); } .gx-composer-primary { background:var(--gx-surface-2); color:var(--gx-text-2); border:1px solid var(--gx-border); } .gx-composer-primary.send-ready { background:var(--gx-grad); color:var(--gx-on-accent); border-color:transparent; box-shadow:0 5px 18px -8px var(--gx-accent); } .gx-composer-add:active, .gx-composer-primary:active { transform:scale(.91); } .gx-composer-field { flex:1; min-width:0; min-height:42px; display:flex; align-items:center; background:var(--gx-surface-2); border:1px solid var(--gx-border); border-radius:16px; padding:0 12px; transition:border-color .15s ease, box-shadow .15s ease; } .gx-composer-field:focus-within { border-color:var(--gx-accent); box-shadow:0 0 0 3px var(--gx-pink-tint); } .gx-composer-field textarea { display:block; width:100%; min-height:40px; max-height:108px; resize:none; overflow-y:auto; border:0; outline:0; padding:10px 0 9px; background:transparent; color:var(--gx-text); font:inherit; font-size:14px; line-height:1.45; } .gx-composer-field textarea::placeholder { color:var(--gx-text-4); } .gx-quick-replies { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:0 0 8px 49px; } .gx-quick-replies button { flex:none; border:1px solid var(--gx-border); background:var(--gx-surface-2); color:var(--gx-text-2); border-radius:999px; padding:7px 11px; font:600 11.5px/1.1 'Plus Jakarta Sans',sans-serif; cursor:pointer; } .gx-quick-replies button:active { transform:scale(.96); } .gx-reply-banner { display:flex; align-items:center; gap:9px; margin:0 0 8px 49px; padding:8px 8px 8px 10px; border-radius:13px; border:1px solid var(--gx-border); background:var(--gx-surface-2); } .gx-reply-icon { width:30px; height:30px; flex:none; border-radius:10px; background:var(--gx-pink-tint); color:var(--gx-accent); display:flex; align-items:center; justify-content:center; } .gx-reply-banner > div { min-width:0; flex:1; } .gx-reply-banner strong { display:block; color:var(--gx-accent); font-size:11px; line-height:1.2; } .gx-reply-banner span:not(.gx-reply-icon) { display:block; margin-top:2px; color:var(--gx-text-3); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gx-voice-recording { min-height:46px; display:flex; align-items:center; gap:12px; justify-content:space-between; } .gx-record-status { display:flex; align-items:center; gap:9px; min-width:0; } .gx-record-status > div { display:flex; flex-direction:column; gap:1px; } .gx-record-status strong { color:var(--gx-text); font-size:13px; } .gx-record-status span { color:var(--gx-text-3); font-size:11px; } .gx-record-dot { width:10px; height:10px; border-radius:999px; background:var(--gx-accent); animation:gxpop 1s ease infinite; } .gx-record-actions { display:flex; align-items:center; gap:7px; } .gx-record-cancel, .gx-record-send { min-height:38px; padding:0 13px; border-radius:12px; border:1px solid var(--gx-border); font:700 12px/1 'Plus Jakarta Sans',sans-serif; cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .gx-record-cancel { background:var(--gx-surface-2); color:var(--gx-text-2); } .gx-record-send { background:var(--gx-grad); color:var(--gx-on-accent); border-color:transparent; } /* Premium action sheets replace emoji-heavy / plain dropdown menus. */ .gx-menu-backdrop { backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); } .sheet.gx-action-sheet { padding:8px 12px calc(14px + env(safe-area-inset-bottom, 8px)); border:1px solid var(--gx-border); background:var(--gx-surface); } .gx-sheet-handle { width:38px; height:4px; border-radius:999px; background:var(--gx-border); margin:1px auto 12px; } .gx-action-head { display:flex; align-items:flex-start; gap:12px; padding:0 4px 12px; } .gx-action-head > div { flex:1; min-width:0; } .gx-action-head strong { display:block; color:var(--gx-text); font-size:17px; letter-spacing:-.02em; } .gx-action-head small { display:block; color:var(--gx-text-3); margin-top:3px; font-size:11.5px; line-height:1.4; } .gx-reaction-dock { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; padding:2px 0 12px; } .gx-reaction-btn { min-width:0; aspect-ratio:1.15; border:1px solid var(--gx-border); border-radius:15px; background:var(--gx-surface-2); font-size:24px; cursor:pointer; transition:transform .13s ease, border-color .13s ease; } .gx-reaction-btn:active { transform:scale(.9); border-color:var(--gx-accent); } .gx-action-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; padding:0 0 11px; } .gx-action-tile { min-width:0; border:1px solid var(--gx-border); background:var(--gx-surface-2); color:var(--gx-text-2); border-radius:15px; padding:10px 5px 8px; display:flex; flex-direction:column; align-items:center; gap:6px; font:700 10.5px/1.2 'Plus Jakarta Sans',sans-serif; cursor:pointer; } .gx-action-tile:active { transform:scale(.96); } .gx-action-icon { width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:var(--gx-accent); background:var(--gx-pink-tint); } .gx-action-list { overflow:hidden; border:1px solid var(--gx-border); border-radius:16px; background:var(--gx-surface-2); } .gx-action-row { min-height:54px; display:flex; align-items:center; gap:11px; padding:9px 11px; border-bottom:1px solid var(--gx-border); color:var(--gx-text); cursor:pointer; } .gx-action-row:last-child { border-bottom:0; } .gx-action-row:active { background:var(--gx-surface-3); } .gx-action-row.danger, .gx-action-row.danger strong { color:var(--gx-danger); } .gx-action-leading { width:36px; height:36px; flex:none; border-radius:12px; background:var(--gx-surface); color:var(--gx-text-2); display:flex; align-items:center; justify-content:center; border:1px solid var(--gx-border); } .gx-action-leading.brand { color:var(--gx-accent); background:var(--gx-pink-tint); border-color:transparent; } .gx-action-copy { min-width:0; flex:1; } .gx-action-copy strong { display:block; font-size:13px; color:var(--gx-text); line-height:1.3; } .gx-action-copy small { display:block; margin-top:2px; color:var(--gx-text-3); font-size:10.5px; line-height:1.35; } .gx-action-chevron { color:var(--gx-text-4); display:flex; } .gx-action-empty { padding:20px 12px; text-align:center; color:var(--gx-text-3); font-size:12px; } .gx-forward-list { max-height:min(52vh,420px); overflow:auto; } .gx-chat-menu-person { display:flex; align-items:center; gap:11px; padding:2px 5px 13px; } .gx-chat-menu-person > div { min-width:0; } .gx-chat-menu-person strong { display:block; color:var(--gx-text); font-size:15px; } .gx-chat-menu-person small { display:block; color:var(--gx-text-3); font-size:11px; margin-top:2px; } .gx-attach-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .gx-attach-card { min-height:120px; text-align:left; border:1px solid var(--gx-border); background:var(--gx-surface-2); border-radius:18px; padding:14px; color:var(--gx-text); font:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; } .gx-attach-card:active { transform:scale(.98); } .gx-attach-card strong { margin-top:12px; font-size:13px; } .gx-attach-card small { margin-top:3px; color:var(--gx-text-3); font-size:10.5px; line-height:1.3; } .gx-attach-icon { width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; } .gx-attach-icon.brand { background:var(--gx-pink-tint); color:var(--gx-accent); } .gx-attach-icon.purple { background:var(--gx-purple-tint); color:var(--gx-purple); } @media (min-width:700px) { .sheet.gx-action-sheet { width:min(390px,calc(100vw - 32px)); max-height:min(78dvh,680px); } .gx-chat-menu-sheet, .gx-attach-sheet { width:min(360px,calc(100vw - 32px)) !important; } } @media (max-width:390px) { .gx-chat-header-actions { gap:2px; } .gx-icon-btn { width:36px; height:36px; border-radius:12px; } .gx-chat-person { gap:7px; } .gx-action-grid { grid-template-columns:repeat(4,1fr); } .gx-quick-replies { padding-left:0; } .gx-reply-banner { margin-left:0; } } @media (prefers-reduced-motion: reduce) { .gx-icon-btn, .gx-composer-add, .gx-composer-primary, .gx-reaction-btn, .gx-action-tile, .gx-attach-card, .gx-quick-replies button { transition:none !important; } } .gx-new-chat-btn { min-height:38px; display:inline-flex; align-items:center; gap:7px; padding:0 12px; border:0; border-radius:13px; background:var(--gx-grad); color:var(--gx-on-accent); box-shadow:0 5px 18px -9px var(--gx-accent); font:700 12px/1 'Plus Jakarta Sans',sans-serif; cursor:pointer; } .gx-new-chat-btn:active { transform:scale(.96); } @media (max-width:360px) { .gx-new-chat-btn span { display:none; } .gx-new-chat-btn { width:38px; padding:0; justify-content:center; } } /* ============================================================ FEED + POST INTERACTION PREMIUM PATCH v1 — 20260830q Cleaner post hierarchy, one-thumb actions, quick comments, premium sheets. ============================================================ */ .gx-post-premium { touch-action:pan-y; user-select:none; -webkit-user-select:none; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .gx-post-premium .gx-post-text, .gx-post-premium .gx-poll, .gx-post-premium .post-tags { user-select:text; -webkit-user-select:text; } .gx-post-premium.gx-post-held { transform:scale(.988); box-shadow:0 10px 26px -20px var(--gx-text-4); } .gx-post-pinned { display:inline-flex; align-items:center; gap:5px; color:var(--gx-text-3); font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin-bottom:7px; } .gx-post-header { align-items:center; } .gx-post-avatar { overflow:hidden; cursor:pointer; border:1px solid var(--gx-border); box-shadow:none; } .gx-post-avatar--ghost { box-shadow:0 0 0 2px var(--gx-surface),0 0 0 3px var(--gx-purple); } .gx-post-author { flex:1; min-width:0; } .gx-post-author-line { display:flex; align-items:center; gap:5px; min-width:0; flex-wrap:wrap; } .gx-post-author-line .post-name { cursor:pointer; } .gx-post-meta { display:flex; align-items:center; gap:5px; margin-top:1px; } .gx-meta-sep { color:var(--gx-text-4); } .gx-ghost-dot { width:5px; height:5px; border-radius:999px; background:var(--gx-purple); flex:none; } .gx-post-identity { display:inline-flex; align-items:center; height:18px; border-radius:999px; padding:0 6px; font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .gx-post-identity--ghost { color:var(--gx-purple); background:var(--gx-purple-tint); } .gx-post-head-actions { display:flex; align-items:center; gap:3px; margin-left:auto; } .gx-post-head-btn { width:34px; height:34px; border:0; border-radius:11px; background:transparent; color:var(--gx-text-4); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .13s ease,color .13s ease,transform .13s ease; } .gx-post-head-btn:active { transform:scale(.9); background:var(--gx-surface-2); } .gx-post-head-btn.saved { color:var(--gx-purple); background:var(--gx-purple-tint); } .gx-post-head-btn.saved .gx-icon path { fill:currentColor; } .gx-post-text { cursor:pointer; text-wrap:pretty; } .gx-post-actions { display:flex; align-items:center; gap:2px; margin-top:9px; padding-top:4px; } .gx-post-action { min-width:0; min-height:38px; border:0; background:transparent; color:var(--gx-text-3); border-radius:12px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; gap:5px; font:700 11px/1 'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:background .13s ease,color .13s ease,transform .13s ease; } .gx-post-action:active { transform:scale(.93); background:var(--gx-surface-2); } .gx-post-action span { white-space:nowrap; } .gx-post-action.liked { color:var(--gx-accent); background:var(--gx-pink-tint); } .gx-post-action.liked .gx-icon path { fill:currentColor; } .gx-post-action.reposted { color:var(--gx-purple); background:var(--gx-purple-tint); } .gx-post-action--know { color:var(--gx-text-3); } .gx-post-action--share { margin-left:auto; } .gx-buzz-burst { pointer-events:none; position:absolute; z-index:8; left:50%; top:50%; transform:translate(-50%,-50%) scale(.4); width:76px; height:76px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:var(--gx-on-accent); background:var(--gx-grad); opacity:0; box-shadow:var(--gx-shadow-soft); } .gx-post-premium.gx-buzzed .gx-buzz-burst { animation:gxFeedBuzz .62s ease both; } @keyframes gxFeedBuzz { 0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-8deg)} 25%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(4deg)} 65%{opacity:1;transform:translate(-50%,-50%) scale(.98)} 100%{opacity:0;transform:translate(-50%,-50%) scale(.88)} } /* A type changes the card's whisper, not the whole visual system. */ .gx-post-kind--confess { --gx-kind:var(--gx-purple); } .gx-post-kind--ask, .gx-post-kind--find { --gx-kind:var(--gx-info); } .gx-post-kind--alert { --gx-kind:var(--gx-danger); } .gx-post-kind--notice, .gx-post-kind--event { --gx-kind:var(--gx-warning); } .gx-post-kind--poll { --gx-kind:var(--gx-purple); } .gx-post-kind--confess .post-avatar, .gx-post-author--ghost .post-avatar { border-color:color-mix(in srgb,var(--gx-purple) 32%,var(--gx-border)); } .type-chip[class*="gx-type-"] { border:1px solid transparent; } .gx-type-confess,.gx-type-poll { color:var(--gx-purple); background:var(--gx-purple-tint); } .gx-type-ask,.gx-type-find,.gx-type-brand { color:var(--gx-info); background:color-mix(in srgb,var(--gx-info) 10%,transparent); } .gx-type-alert,.gx-type-danger { color:var(--gx-danger); background:var(--gx-danger-tint); } .gx-type-notice,.gx-type-event,.gx-type-review { color:var(--gx-warning-text); background:var(--gx-warning-tint); } .status-pill { background:color-mix(in srgb,var(--sc) 11%,transparent); border:1px solid color-mix(in srgb,var(--sc) 28%,transparent); } /* Media behaves like one visual object and carries the double-tap-to-Buzz gesture. */ .gx-post-media { position:relative; overflow:hidden; border-radius:16px; margin-top:11px; background:var(--gx-surface-2); } .gx-post-media .post-image { margin-top:0; border-radius:0; } .gx-post-media--single .post-image { max-height:520px; object-fit:cover; } .gx-post-media.post-image-grid { margin-top:11px; border-radius:16px; } .gx-media-more { position:absolute; right:10px; bottom:10px; min-width:38px; height:30px; padding:0 9px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:var(--gx-text); color:var(--gx-surface); font-size:11px; font-weight:800; box-shadow:var(--gx-shadow-soft); } .gx-news-source { border:1px solid var(--gx-border); border-radius:13px; background:var(--gx-surface-2); padding:9px 10px; } .gx-news-source__icon { display:flex; color:var(--gx-text-3); } /* Polls are real controls, not divs pretending to be controls. */ .gx-poll { display:grid; gap:7px; margin-top:12px; } .gx-poll .poll-option { appearance:none; -webkit-appearance:none; width:100%; margin:0; min-height:46px; border:1px solid var(--gx-border); border-radius:13px; padding:0 13px; background:var(--gx-surface-2); color:var(--gx-text); text-align:left; font:inherit; position:relative; overflow:hidden; cursor:pointer; } .gx-poll .poll-option:active { transform:scale(.993); } .gx-poll .poll-bar { background:linear-gradient(90deg,var(--gx-pink-tint),var(--gx-purple-tint)); border-radius:0; } .gx-poll .poll-voted { border-color:var(--gx-purple); box-shadow:inset 0 0 0 1px var(--gx-purple-tint); } .gx-poll .poll-option-content { min-height:44px; } .gx-poll .poll-option-text { display:flex; align-items:center; gap:7px; } .gx-poll-check { width:18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; flex:none; color:var(--gx-on-accent); background:var(--gx-grad); font-size:10px; } .gx-poll .poll-total { margin:1px 2px 0; } /* Muted-post row. */ .gx-muted-post { padding:12px 14px; display:flex; align-items:center; gap:10px; justify-content:space-between; } .gx-muted-post__copy { min-width:0; display:flex; align-items:center; gap:8px; color:var(--gx-text-3); font-size:12px; } .gx-muted-post__copy > span:first-child { display:flex; } .gx-text-action { border:0; background:transparent; color:var(--gx-accent); font:800 12px/1 'Plus Jakarta Sans',sans-serif; cursor:pointer; padding:9px; } /* Post menu shares the premium chat action language instead of plain rows/dropdowns. */ .gx-post-menu-sheet .gx-post-action-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .gx-sheet-section-label { margin:14px 4px 7px; color:var(--gx-text-4); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .gx-report-list { max-height:min(57dvh,480px); overflow:auto; } .gx-report-sheet .gx-action-row { min-height:50px; } /* Quick replies without losing feed position. */ .gx-comments-sheet { padding-bottom:calc(10px + env(safe-area-inset-bottom,8px)) !important; } .gx-quick-comments-list { max-height:min(42dvh,360px); overflow:auto; border:1px solid var(--gx-border); border-radius:16px; background:var(--gx-surface-2); } .gx-quick-comment-row { display:flex; align-items:flex-start; gap:9px; padding:10px; border-bottom:1px solid var(--gx-border); } .gx-quick-comment-row:last-child { border-bottom:0; } .gx-quick-comment-body { min-width:0; flex:1; } .gx-quick-comment-body > div { display:flex; align-items:center; gap:6px; min-width:0; } .gx-quick-comment-body strong { max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--gx-text); } .gx-quick-comment-body span { color:var(--gx-text-4); font-size:9.5px; } .gx-quick-comment-body p { margin-top:3px; color:var(--gx-text-2); font-size:12px; line-height:1.45; overflow-wrap:anywhere; } .gx-comments-view-all { width:100%; min-height:39px; margin-top:7px; border:0; background:transparent; color:var(--gx-accent); display:flex; align-items:center; justify-content:center; gap:5px; font:800 11.5px/1 'Plus Jakarta Sans',sans-serif; cursor:pointer; } .gx-quick-comment-compose { display:flex; align-items:flex-end; gap:7px; margin-top:9px; } .gx-quick-comment-avatar { flex:none; padding-bottom:4px; } .gx-quick-comment-compose textarea { flex:1; min-width:0; min-height:42px; max-height:104px; resize:none; overflow-y:auto; border:1px solid var(--gx-border); border-radius:15px; outline:0; padding:10px 12px; background:var(--gx-surface-2); color:var(--gx-text); font:500 13px/1.42 'Plus Jakarta Sans',sans-serif; } .gx-quick-comment-compose textarea:focus { border-color:var(--gx-accent); box-shadow:0 0 0 3px var(--gx-pink-tint); } .gx-quick-comment-compose textarea::placeholder { color:var(--gx-text-4); } .gx-quick-comment-compose > button { width:42px; height:42px; flex:none; border:1px solid var(--gx-border); border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--gx-surface-2); color:var(--gx-text-4); cursor:pointer; transition:.13s ease; } .gx-quick-comment-compose > button.is-ready { background:var(--gx-grad); color:var(--gx-on-accent); border-color:transparent; box-shadow:0 5px 18px -9px var(--gx-accent); } .gx-quick-comment-compose > button:disabled { opacity:.55; cursor:default; } /* Share sheet: four clear destinations, no browser-looking select/menu. */ .gx-share-grid { grid-template-columns:1fr 1fr; } .gx-share-sheet .gx-attach-card { min-height:112px; } @media (max-width:430px) { .gx-post-action { padding:0 6px; gap:4px; } .gx-post-action span { font-size:10px; } } @media (max-width:360px) { .gx-post-action span { display:none; } .gx-post-action { min-width:38px; } .gx-post-action--share { margin-left:auto; } } @media (min-width:700px) { .gx-comments-sheet { width:min(460px,calc(100vw - 32px)) !important; } .gx-share-sheet,.gx-post-menu-sheet,.gx-report-sheet { width:min(410px,calc(100vw - 32px)) !important; } } @media (prefers-reduced-motion: reduce) { .gx-post-premium,.gx-post-action,.gx-post-head-btn { transition:none !important; } .gx-post-premium.gx-buzzed .gx-buzz-burst { animation:none !important; opacity:0; } } .type-chip .gx-icon { flex:none; } /* Stability update: new content never forces a live feed rebuild. */ .gx-new-posts-pill{ position:fixed; z-index:1200; top:calc(76px + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); border:1px solid var(--gx-border); border-radius:999px; padding:9px 14px; background:var(--gx-surface); color:var(--gx-text); box-shadow:var(--gx-shadow); font:700 12.5px/1.2 system-ui,sans-serif; cursor:pointer; animation:gxslide .18s ease both; } .gx-new-posts-pill:active{transform:translateX(-50%) scale(.97)} .gx-msg-ticks{display:inline-flex;align-items:center;vertical-align:middle} /* ==================== Nearby Plans V1 ==================== */ .gx-nearby-mode{display:flex;gap:6px;margin:8px 0 10px;padding:4px;background:var(--gx-surface-2);border:1px solid var(--gx-border);border-radius:13px;} .gx-nearby-mode button{flex:1;min-height:36px;border:0;border-radius:10px;background:transparent;color:var(--gx-text-3);font:700 12.5px/1 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer;} .gx-nearby-mode button.is-active{background:var(--gx-surface);color:var(--gx-text);box-shadow:var(--gx-shadow-soft);} .gx-plan-composer-strip{background:linear-gradient(90deg,var(--gx-purple-tint),var(--gx-pink-tint));} .gx-plan-mini-icon{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--gx-grad);color:var(--gx-on-accent);font-size:21px;font-weight:400;flex:none;} .gx-nearby-plans{padding:0 12px 28px;background:var(--gx-surface-2);} .gx-plan-hero{display:flex;align-items:flex-end;gap:14px;justify-content:space-between;padding:18px 4px 13px;} .gx-plan-kicker{font-size:9.5px;font-weight:900;letter-spacing:.12em;color:var(--gx-purple);} .gx-plan-hero__title{font-size:20px;font-weight:800;letter-spacing:-.35px;color:var(--gx-text);margin-top:4px;} .gx-plan-hero__sub{max-width:430px;margin-top:4px;color:var(--gx-text-3);font-size:12.5px;line-height:1.45;} .gx-plan-create{border:0;border-radius:13px;min-height:40px;padding:0 13px;display:flex;align-items:center;gap:6px;background:var(--gx-grad);color:var(--gx-on-accent);font:800 11.5px/1 'Plus Jakarta Sans',system-ui;cursor:pointer;box-shadow:var(--gx-shadow-soft);white-space:nowrap;} .gx-plan-create span:first-child{font-size:18px;font-weight:400;} .gx-plan-filters{display:flex;gap:7px;overflow-x:auto;padding:0 2px 12px;scrollbar-width:none;} .gx-plan-filters::-webkit-scrollbar{display:none;} .gx-plan-filter{border:1px solid var(--gx-border);border-radius:999px;min-height:34px;padding:0 11px;display:flex;align-items:center;gap:5px;background:var(--gx-surface);color:var(--gx-text-3);font:700 11px/1 'Plus Jakarta Sans',system-ui;white-space:nowrap;cursor:pointer;} .gx-plan-filter.is-active{border-color:color-mix(in srgb,var(--gx-purple) 40%,var(--gx-border));background:var(--gx-purple-tint);color:var(--gx-purple);} .gx-plan-list{display:grid;gap:10px;} .gx-plan-card{position:relative;border:1px solid var(--gx-border);border-radius:18px;padding:14px;background:var(--gx-surface);box-shadow:var(--gx-shadow-soft);cursor:pointer;transition:transform .12s ease,border-color .12s ease;outline:none;} .gx-plan-card:active{transform:scale(.994);} .gx-plan-card:focus-visible{border-color:var(--gx-purple);box-shadow:0 0 0 3px var(--gx-purple-tint);} .gx-plan-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px;} .gx-plan-cat{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 9px;background:var(--gx-purple-tint);color:var(--gx-purple);font-size:10.5px;font-weight:850;letter-spacing:.02em;} .gx-plan-time{color:var(--gx-text-3);font-size:10.5px;font-weight:700;} .gx-plan-card__title{margin-top:10px;color:var(--gx-text);font-size:17px;line-height:1.28;font-weight:800;letter-spacing:-.22px;} .gx-plan-card__where{margin-top:7px;display:flex;align-items:center;gap:6px;color:var(--gx-text-3);font-size:11.5px;line-height:1.3;} .gx-plan-card__where svg{flex:none;} .gx-plan-card__desc{margin-top:8px;color:var(--gx-text-2);font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .gx-plan-stats{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px;} .gx-plan-stats span{border-radius:8px;padding:5px 7px;background:var(--gx-surface-2);color:var(--gx-text-3);font-size:10.5px;font-weight:650;} .gx-plan-stats strong{color:var(--gx-text);} .gx-plan-stats .is-need{background:var(--gx-pink-tint);color:var(--gx-accent);font-weight:800;} .gx-plan-stats .is-full{background:var(--gx-surface-2);color:var(--gx-text-4);font-weight:800;} .gx-plan-card__foot{display:flex;align-items:center;gap:9px;justify-content:space-between;margin-top:12px;padding-top:11px;border-top:1px solid var(--gx-border);} .gx-plan-trust{display:flex;align-items:center;gap:5px;min-width:0;color:var(--gx-text-3);font-size:10px;font-weight:650;} .gx-plan-verified{width:18px;height:18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--gx-success);color:var(--gx-on-accent);font-size:10px;font-weight:900;} .gx-plan-join{border:0;border-radius:10px;min-height:36px;padding:0 12px;background:var(--gx-grad);color:var(--gx-on-accent);font:800 10.5px/1 'Plus Jakarta Sans',system-ui;cursor:pointer;white-space:nowrap;} .gx-plan-join.is-muted{background:var(--gx-surface-2);color:var(--gx-text-3);} .gx-plan-boundary{display:flex;gap:10px;align-items:flex-start;margin-top:13px;border:1px solid var(--gx-border);border-radius:14px;padding:11px;background:var(--gx-surface);color:var(--gx-text-3);} .gx-plan-boundary>span{font-size:18px;} .gx-plan-boundary strong{display:block;color:var(--gx-text-2);font-size:11.5px;} .gx-plan-boundary div>span{display:block;margin-top:2px;font-size:10.5px;line-height:1.42;} .gx-plan-create-screen{background:var(--gx-surface-2);padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));} .gx-plan-create-head,.gx-plan-detail-head{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;padding:11px 14px;background:color-mix(in srgb,var(--gx-surface) 94%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--gx-border);} .gx-plan-create-head{grid-template-columns:44px 1fr;} .gx-plan-create-head__title{font-size:16px;font-weight:800;color:var(--gx-text);} .gx-plan-create-head__sub{font-size:10.5px;color:var(--gx-text-3);margin-top:1px;} .gx-plan-form{padding:16px;display:grid;gap:15px;} .gx-plan-label{display:block;margin:0 0 7px;color:var(--gx-text-3);font-size:10px;font-weight:850;letter-spacing:.08em;} .gx-plan-label span{font-weight:650;color:var(--gx-text-4);} .gx-plan-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;} .gx-plan-category{min-height:65px;border:1px solid var(--gx-border);border-radius:13px;background:var(--gx-surface);color:var(--gx-text-3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font:750 10px/1 'Plus Jakarta Sans',system-ui;cursor:pointer;} .gx-plan-category span{font-size:21px;} .gx-plan-category.is-active{border-color:var(--gx-purple);background:var(--gx-purple-tint);color:var(--gx-purple);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gx-purple) 10%,transparent);} .gx-plan-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .gx-plan-money{position:relative;display:flex;align-items:center;} .gx-plan-money>span{position:absolute;left:13px;z-index:1;color:var(--gx-text-3);font-weight:800;} .gx-plan-money input{padding-left:29px;} .gx-plan-inline-choices,.gx-plan-circle-choices{display:flex;gap:7px;flex-wrap:wrap;} .gx-plan-choice{min-height:35px;border:1px solid var(--gx-border);border-radius:999px;padding:0 11px;background:var(--gx-surface);color:var(--gx-text-3);font:700 10.5px/1 'Plus Jakarta Sans',system-ui;cursor:pointer;} .gx-plan-choice.is-active{border-color:var(--gx-purple);background:var(--gx-purple-tint);color:var(--gx-purple);} .gx-plan-visibility{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .gx-plan-visibility-card{min-height:78px;border:1px solid var(--gx-border);border-radius:14px;padding:10px;display:grid;grid-template-columns:28px 1fr 20px;gap:8px;align-items:center;text-align:left;background:var(--gx-surface);color:var(--gx-text);cursor:pointer;} .gx-plan-visibility-card.is-active{border-color:var(--gx-purple);background:var(--gx-purple-tint);} .gx-plan-visibility-icon{font-size:19px;text-align:center;} .gx-plan-visibility-card strong{display:block;font-size:11.5px;} .gx-plan-visibility-card small{display:block;margin-top:2px;color:var(--gx-text-3);font-size:9.5px;line-height:1.3;font-weight:550;} .gx-plan-visibility-card i{width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--gx-purple);color:var(--gx-on-accent);font-size:9px;font-style:normal;font-weight:900;} .gx-plan-note{border:1px dashed var(--gx-border);border-radius:12px;padding:10px;color:var(--gx-text-3);font-size:11px;} .gx-plan-safety-card{display:flex;gap:10px;align-items:flex-start;border:1px solid color-mix(in srgb,var(--gx-success) 28%,var(--gx-border));border-radius:14px;padding:12px;background:color-mix(in srgb,var(--gx-success) 7%,var(--gx-surface));} .gx-plan-safety-card>span{width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--gx-success);color:var(--gx-on-accent);font-size:11px;font-weight:900;flex:none;} .gx-plan-safety-card strong{display:block;color:var(--gx-text);font-size:11.5px;} .gx-plan-safety-card small{display:block;color:var(--gx-text-3);font-size:10px;line-height:1.42;margin-top:2px;} .gx-plan-submit{margin-top:2px;} .gx-plan-v1-note{text-align:center;color:var(--gx-text-4);font-size:9.5px;line-height:1.4;padding:0 8px;} .gx-plan-detail{background:var(--gx-surface-2);padding-bottom:calc(94px + env(safe-area-inset-bottom,0px));} .gx-plan-detail-head strong{text-align:center;font-size:15px;color:var(--gx-text);} .gx-plan-detail-menu{border:0;background:transparent;color:var(--gx-danger);font-size:9.5px;font-weight:800;cursor:pointer;white-space:nowrap;} .gx-plan-detail-hero{padding:24px 18px 19px;background:radial-gradient(circle at 86% 12%,var(--gx-purple-tint),transparent 36%),var(--gx-surface);border-bottom:1px solid var(--gx-border);text-align:center;} .gx-plan-detail-icon{width:62px;height:62px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;background:linear-gradient(145deg,var(--gx-purple-tint),var(--gx-pink-tint));font-size:31px;border:1px solid var(--gx-border);} .gx-plan-detail-hero h1{margin:11px auto 0;max-width:520px;color:var(--gx-text);font-size:24px;line-height:1.15;letter-spacing:-.55px;} .gx-plan-detail-time{margin-top:8px;color:var(--gx-purple);font-size:12px;font-weight:800;} .gx-plan-detail-hero .gx-plan-card__where{justify-content:center;font-size:11.5px;} .gx-plan-detail-hero p{max-width:520px;margin:10px auto 0;color:var(--gx-text-2);font-size:12.5px;line-height:1.5;} .gx-plan-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gx-border);border-bottom:1px solid var(--gx-border);} .gx-plan-detail-grid>div{padding:13px 8px;text-align:center;background:var(--gx-surface);} .gx-plan-detail-grid strong{display:block;color:var(--gx-text);font-size:17px;} .gx-plan-detail-grid span{display:block;margin-top:2px;color:var(--gx-text-4);font-size:9.5px;} .gx-plan-section{margin:12px 12px 0;border:1px solid var(--gx-border);border-radius:16px;background:var(--gx-surface);padding:13px;} .gx-plan-section-title{margin:0 2px 9px;color:var(--gx-text-3);font-size:9.5px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;} .gx-plan-host-card{display:flex;align-items:center;gap:10px;} .gx-plan-host-card>div:nth-child(2){min-width:0;flex:1;} .gx-plan-host-card strong{display:block;color:var(--gx-text);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .gx-plan-host-card span{display:block;color:var(--gx-text-3);font-size:10.5px;margin-top:2px;} .gx-plan-host-shield{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:var(--gx-purple-tint);color:var(--gx-purple);font-size:20px;font-weight:900;} .gx-plan-privacy-note{margin-top:8px;color:var(--gx-text-4);font-size:9.5px;line-height:1.4;} .gx-plan-people{display:grid;gap:1px;background:var(--gx-border);border-radius:13px;overflow:hidden;} .gx-plan-person{display:flex;align-items:center;gap:9px;padding:10px;background:var(--gx-surface-2);} .gx-plan-person__body{min-width:0;flex:1;} .gx-plan-person__body strong{display:block;color:var(--gx-text);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .gx-plan-person__body span,.gx-plan-person__body small{display:block;color:var(--gx-text-3);font-size:9.5px;margin-top:1px;} .gx-plan-person__actions{display:flex;gap:5px;} .gx-plan-person__actions button,.gx-plan-confirm{border:0;border-radius:8px;min-height:31px;padding:0 8px;background:var(--gx-grad);color:var(--gx-on-accent);font:800 9.5px/1 'Plus Jakarta Sans',system-ui;cursor:pointer;} .gx-plan-person__actions button.is-muted,.gx-plan-confirm.is-done{background:var(--gx-surface);color:var(--gx-text-3);border:1px solid var(--gx-border);} .gx-plan-checkin{width:100%;min-height:45px;border:1px solid var(--gx-purple);border-radius:12px;background:var(--gx-purple-tint);color:var(--gx-purple);font:850 12px/1 'Plus Jakarta Sans',system-ui;cursor:pointer;} .gx-plan-checkin.is-done{border-color:color-mix(in srgb,var(--gx-success) 40%,var(--gx-border));background:color-mix(in srgb,var(--gx-success) 8%,var(--gx-surface));color:var(--gx-success);} .gx-plan-detail-cta{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--gx-surface) 94%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--gx-border);} .gx-meet-gate{text-align:center;} .gx-meet-gate-icon{width:58px;height:58px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;background:linear-gradient(145deg,var(--gx-purple-tint),var(--gx-pink-tint));color:var(--gx-purple);font-size:25px;font-weight:900;border:1px solid var(--gx-border);} .gx-meet-gate h2{margin:0;color:var(--gx-text);font-size:20px;} .gx-meet-gate>p{margin:5px 0 14px;color:var(--gx-text-3);font-size:12px;line-height:1.45;} .gx-meet-gate-card{display:flex;gap:10px;text-align:left;align-items:flex-start;border:1px solid var(--gx-border);border-radius:14px;padding:11px;background:var(--gx-surface-2);margin-bottom:12px;} .gx-meet-gate-card>span{font-size:20px;} .gx-meet-gate-card strong{display:block;color:var(--gx-text);font-size:11.5px;} .gx-meet-gate-card small{display:block;margin-top:2px;color:var(--gx-text-3);font-size:10px;line-height:1.42;} .gx-admin-meet-card{background:var(--gx-surface);border:1px solid var(--gx-border);border-radius:14px;padding:13px;margin-bottom:10px;} .gx-admin-meet-note{margin-top:9px;padding:8px;border-radius:9px;background:var(--gx-warning-tint);color:var(--gx-warning-text);font-size:10px;line-height:1.4;} .gx-plan-admin-approve,.gx-plan-admin-reject{border:0;border-radius:9px;min-height:34px;padding:0 10px;font:800 10.5px/1 'Plus Jakarta Sans',system-ui;cursor:pointer;} .gx-plan-admin-approve{background:color-mix(in srgb,var(--gx-success) 12%,var(--gx-surface));color:var(--gx-success);border:1px solid color-mix(in srgb,var(--gx-success) 30%,var(--gx-border));} .gx-plan-admin-reject{background:var(--gx-danger-tint);color:var(--gx-danger);border:1px solid color-mix(in srgb,var(--gx-danger) 30%,var(--gx-border));} @media(max-width:430px){ .gx-plan-category-grid{grid-template-columns:repeat(4,minmax(0,1fr));} .gx-plan-category{min-height:61px;padding:4px;} .gx-plan-category span{font-size:19px;} .gx-plan-field-grid{grid-template-columns:1fr;} .gx-plan-visibility{grid-template-columns:1fr;} .gx-plan-hero{align-items:flex-start;flex-direction:column;} .gx-plan-create{align-self:stretch;justify-content:center;} .gx-plan-trust .gx-meta-sep,.gx-plan-trust .gx-meta-sep+span{display:none;} } @media(min-width:700px){ .gx-nearby-plans{padding-left:18px;padding-right:18px;} .gx-plan-list{grid-template-columns:repeat(2,minmax(0,1fr));} .gx-plan-form,.gx-plan-detail>section,.gx-plan-detail-hero>p{max-width:720px;margin-left:auto;margin-right:auto;} .gx-plan-detail-grid{max-width:720px;margin:0 auto;border-left:1px solid var(--gx-border);border-right:1px solid var(--gx-border);} .gx-plan-detail-cta{left:50%;right:auto;width:min(720px,100vw);transform:translateX(-50%);} } @media(prefers-reduced-motion:reduce){.gx-plan-card,.gx-nearby-mode button{transition:none!important;}} /* Nearby Plans V1.1 — direct safety reporting without exposing the hidden host. */ .gx-plan-detail-cta{display:flex;flex-direction:column;gap:9px} .gx-plan-report{appearance:none;border:0;background:transparent;color:var(--gx-text-3);display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:7px 12px;border-radius:12px;font:700 12px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer} .gx-plan-report:hover{background:var(--gx-surface-2);color:var(--gx-text-2)} .gx-plan-report:focus-visible{outline:2px solid var(--gx-accent);outline-offset:2px} .gx-plan-report:active{transform:scale(.98)} /* ============================================================ FEED INTELLIGENCE + COMPOSER SIMPLIFICATION — 20260830y Seen-aware ranking, developing-story cues, clearer Spill choices. ============================================================ */ .gx-type-developing{color:var(--gx-info);background:color-mix(in srgb,var(--gx-info) 10%,var(--gx-surface));border-color:color-mix(in srgb,var(--gx-info) 22%,var(--gx-border))!important} /* Trust "Weigh in" action: neutral like its siblings until you act, then it turns green (confirmed) or red (disputed) so the colour actually means something. */ .gx-post-action--know{color:var(--gx-text-3);background:transparent;border:0} .gx-post-action--know.gx-know--confirm{color:var(--gx-success);background:color-mix(in srgb,var(--gx-success) 12%,transparent)} .gx-post-action--know.gx-know--dispute{color:var(--gx-danger);background:color-mix(in srgb,var(--gx-danger) 12%,transparent)} .gx-explore-post-row:active{background:var(--gx-surface-3)!important} .gx-compose-type-chip{cursor:pointer;flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:8px 13px;border-radius:999px;font-size:12.5px;font-weight:700;border:1px solid var(--gx-border);background:var(--gx-surface-2);color:var(--gx-text-2);transition:transform .13s ease,border-color .13s ease,background .13s ease,color .13s ease} .gx-compose-type-chip:active{transform:scale(.95)} .gx-compose-type-chip.is-active{border-color:transparent;background:var(--gx-grad);color:var(--gx-on-accent);box-shadow:var(--gx-shadow-soft)} .gx-compose-more-types{margin:8px 18px 4px;padding:9px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;border:1px solid var(--gx-border);border-radius:15px;background:var(--gx-surface-2)} .gx-compose-more-types button{min-width:0;border:1px solid var(--gx-border);border-radius:12px;background:var(--gx-surface);color:var(--gx-text);padding:9px 10px;text-align:left;display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:1px;cursor:pointer;font:inherit} .gx-compose-more-types button>span{grid-row:1/3;font-size:18px;align-self:center} .gx-compose-more-types button strong{font-size:12px;line-height:1.25} .gx-compose-more-types button small{font-size:9.5px;line-height:1.3;color:var(--gx-text-3)} .gx-compose-more-types button.is-active{border-color:var(--gx-accent);background:var(--gx-pink-tint)} .gx-compose-tool{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gx-text-3);font-weight:800;font-size:18px} .gx-compose-tool:active{background:var(--gx-surface-2);transform:scale(.94)} @media(max-width:390px){.gx-compose-type-chip{padding:7px 11px;font-size:11.5px}.gx-compose-more-types{margin-left:12px;margin-right:12px}} @media(prefers-reduced-motion:reduce){.gx-compose-type-chip,.gx-compose-tool{transition:none!important}} /* ==================== UX COHERENCE PASS — 2026-08-31 ==================== */ /* Bottom navigation: four destinations + one unmistakable create action. */ .gx-tab-bar{padding-left:10px;padding-right:10px;align-items:flex-end} .gx-tab-bar .tab-item{flex:1;min-width:0;padding:4px 2px 2px;gap:3px} .gx-tab-icon-shell{position:relative;width:38px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:inherit;transition:background .16s,color .16s,transform .12s} .gx-tab-label{font-size:10px;font-weight:650;letter-spacing:.005em;color:inherit;white-space:nowrap} .gx-tab-bar .tab-item.active .gx-tab-icon-shell{background:var(--gx-purple-tint);color:var(--gx-purple)} .gx-tab-create{transform:translateY(-5px)!important} .gx-tab-create-btn{width:52px;height:46px;border-radius:17px;background:var(--gx-grad);color:var(--gx-on-accent);display:flex;align-items:center;justify-content:center;box-shadow:0 11px 26px rgba(141,91,255,.28)} .gx-tab-create .gx-tab-label{color:var(--gx-purple);font-weight:750} .gx-tab-unread{position:absolute;top:-4px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--gx-accent);color:var(--gx-on-accent);font-size:9px;font-weight:800;align-items:center;justify-content:center;border:2px solid var(--gx-surface)} body.ghost-on .gx-tab-create-btn{background:linear-gradient(135deg,var(--gx-purple-2),var(--gx-purple));box-shadow:0 11px 26px rgba(141,91,255,.34)} /* One trust/safety language everywhere: neutral surface, semantic icon. */ .status-pill{color:var(--gx-text-2)!important;background:var(--gx-surface-2);border:1px solid var(--gx-border);padding:5px 10px;letter-spacing:.01em;text-transform:none;font-size:11px;font-weight:700;box-shadow:none} .gx-status-icon{display:flex;align-items:center;justify-content:center;color:var(--sc);width:14px;height:14px} .gx-status-icon .gx-icon{width:13px;height:13px} .status-timeline .st-dot{width:22px;height:22px;border-radius:999px;background:var(--gx-surface-2);border:1px solid var(--gx-border);display:flex;align-items:center;justify-content:center} .gx-status-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .gx-status-control{border:1px solid var(--gx-border);background:var(--gx-surface-2);color:var(--gx-text-2);border-radius:999px;min-height:36px;padding:8px 12px;display:inline-flex;align-items:center;gap:6px;font:650 12.5px/1 inherit;cursor:pointer} .gx-status-control--success{color:var(--gx-success);background:var(--gx-success-tint)} .gx-status-control--danger{color:var(--gx-danger);background:var(--gx-danger-tint)} .gx-status-control:active{transform:scale(.97)} .circle-chip{gap:4px;text-transform:none;letter-spacing:.01em;font-weight:700} .circle-chip .gx-icon{width:11px;height:11px} /* Safety actions should never look like leftover text links. */ .gx-report-action,.gx-inline-action{appearance:none;border:1px solid var(--gx-border);background:var(--gx-surface-2);color:var(--gx-text-2);border-radius:999px;min-height:34px;padding:7px 11px;display:inline-flex;align-items:center;gap:6px;font:650 12px/1 inherit;cursor:pointer} .gx-report-action{color:var(--gx-danger)} .gx-report-action--compact{min-height:28px;padding:5px 8px;font-size:11px;border-color:transparent;background:transparent;color:var(--gx-text-3)} .gx-inline-action--danger{color:var(--gx-danger)} .gx-report-action:active,.gx-inline-action:active{transform:scale(.97);background:var(--gx-surface-3)} .gx-safety-action-wrap{display:flex;justify-content:center;margin-top:12px} .gx-detail-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px} .gx-profile-safety-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px} .gx-profile-primary{appearance:none;border:0;flex:1;min-height:40px;border-radius:12px;padding:9px 12px;background:var(--gx-grad);color:var(--gx-on-accent);display:flex;align-items:center;justify-content:center;gap:7px;font:700 13px/1 inherit;cursor:pointer} .gx-profile-primary--secondary,.gx-profile-primary.is-following{background:var(--gx-surface-2);color:var(--gx-text);border:1px solid var(--gx-border)} .gx-search-message-hint{display:inline-flex;align-items:center;gap:5px;color:var(--gx-text-3);font-size:12px} /* Top-level Messages now behaves like Home/Explore, not a drill-down screen. */ .gx-top-level-header{flex-shrink:0;padding:18px 18px 12px;background:var(--gx-surface);border-bottom:1px solid var(--gx-border);display:flex;align-items:center;justify-content:space-between;gap:12px} .gx-top-level-header>div{display:flex;flex-direction:column;gap:2px}.gx-top-level-header strong{font-size:22px;letter-spacing:-.45px;color:var(--gx-text)}.gx-top-level-header small{font-size:12px;color:var(--gx-text-3)} .gx-messages-page{padding-bottom:12px} /* Friendly, content-first Explore. */ .gx-explore-page{background:var(--gx-bg)!important;padding-bottom:0} .gx-explore-hero{position:sticky;top:0;z-index:8;padding:18px 16px 12px;background:var(--gx-chrome);border-bottom:1px solid var(--gx-border);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} .gx-explore-hero__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.gx-explore-hero h1{margin:0;color:var(--gx-text);font-size:25px;line-height:1.05;letter-spacing:-.6px}.gx-explore-hero p{margin:5px 0 0;color:var(--gx-text-3);font-size:12.5px;line-height:1.4} .gx-icon-button{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--gx-border);background:var(--gx-surface);color:var(--gx-text-2);cursor:pointer} .gx-explore-search{width:100%;min-height:46px;margin-top:14px;padding:0 13px;display:flex;align-items:center;gap:9px;border:1px solid var(--gx-border);border-radius:14px;background:var(--gx-surface);color:var(--gx-text-3);font:500 13.5px/1 inherit;text-align:left;cursor:pointer;box-shadow:var(--gx-shadow-soft)} .gx-explore-jumps{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:12px -2px 0;padding:0 2px}.gx-explore-jumps::-webkit-scrollbar{display:none} .gx-explore-jump{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:7px 10px;border:1px solid var(--gx-border);border-radius:999px;background:var(--gx-surface-2);color:var(--gx-text-2);font:650 11.5px/1 inherit;cursor:pointer} .gx-explore-section{margin-top:10px;background:var(--gx-surface);border-top:1px solid var(--gx-border);border-bottom:1px solid var(--gx-border)}.gx-explore-section--flush{margin-top:0;border-top:0} .gx-explore-section-head{padding:15px 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--gx-text-2)}.gx-explore-section-head>div{display:flex;flex-direction:column;gap:2px}.gx-explore-section-head strong{font-size:15px;color:var(--gx-text)}.gx-explore-section-head small{font-size:11.5px;color:var(--gx-text-3);font-weight:500} .gx-text-button{appearance:none;border:0;background:transparent;color:var(--gx-purple);font:700 12px/1 inherit;cursor:pointer;padding:8px} .gx-explore-feature-scroll{display:flex;gap:10px;overflow-x:auto;padding:2px 16px 16px;scroll-snap-type:x proximity;scrollbar-width:none}.gx-explore-feature-scroll::-webkit-scrollbar{display:none} .gx-explore-feature{flex:0 0 min(78vw,300px);min-height:150px;scroll-snap-align:start;text-align:left;padding:14px;border:1px solid var(--gx-border);border-radius:16px;background:linear-gradient(145deg,var(--gx-surface),var(--gx-surface-2));color:var(--gx-text);display:flex;flex-direction:column;gap:8px;cursor:pointer;box-shadow:var(--gx-shadow-soft)} .gx-explore-feature--buzz{border-top:2px solid var(--gx-accent)}.gx-explore-feature--developing{border-top:2px solid var(--gx-info)}.gx-explore-feature--confess{border-top:2px solid var(--gx-purple)} .gx-explore-feature__eyebrow{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;color:var(--gx-text-3);text-transform:uppercase;letter-spacing:.055em}.gx-explore-feature strong{font-size:15px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.gx-explore-feature__meta{margin-top:auto;color:var(--gx-text-3);font-size:11.5px} .gx-explore-list{border-top:1px solid var(--gx-border)}.gx-explore-row{width:100%;min-height:66px;padding:11px 16px;border:0;border-bottom:1px solid var(--gx-border);background:var(--gx-surface);display:flex;align-items:center;gap:10px;text-align:left;color:var(--gx-text);cursor:pointer}.gx-explore-row:last-child{border-bottom:0}.gx-explore-row__icon{width:32px;height:32px;border-radius:10px;background:var(--gx-surface-2);color:var(--gx-purple);display:flex;align-items:center;justify-content:center;flex:0 0 auto}.gx-explore-row__copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}.gx-explore-row__copy strong{font-size:13.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gx-explore-row__copy small{font-size:11px;color:var(--gx-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gx-explore-row__arrow{color:var(--gx-text-4);display:flex} .gx-headline-list{display:grid;gap:0;border-top:1px solid var(--gx-border)}.gx-headline-card{display:flex;align-items:stretch;border-bottom:1px solid var(--gx-border);background:var(--gx-surface)}.gx-headline-card:last-child{border-bottom:0}.gx-headline-card__main{flex:1;min-width:0;padding:12px 12px 12px 16px;border:0;background:transparent;text-align:left;display:flex;flex-direction:column;gap:5px;color:var(--gx-text);cursor:pointer}.gx-headline-card__source{display:flex;align-items:center;gap:5px;color:var(--gx-text-3);font-size:10.5px;font-weight:700}.gx-headline-card__main strong{font-size:13.5px;line-height:1.4}.gx-headline-card__main small{font-size:10.5px;color:var(--gx-text-4)}.gx-headline-card__open{width:46px;display:flex;align-items:center;justify-content:center;color:var(--gx-purple);border-left:1px solid var(--gx-border);text-decoration:none} .gx-explore-circle-scroll{display:flex;gap:10px;overflow-x:auto;padding:2px 16px 16px;scrollbar-width:none}.gx-explore-circle-scroll::-webkit-scrollbar{display:none}.gx-explore-circle-card{flex:0 0 178px;min-height:142px;padding:13px;border:1px solid var(--gx-border);border-radius:16px;background:var(--gx-surface-2);text-align:left;color:var(--gx-text);display:flex;flex-direction:column;align-items:flex-start;gap:6px;cursor:pointer}.gx-explore-circle-card__avatar{width:36px;height:36px;border-radius:11px;background:var(--gx-surface);display:flex;align-items:center;justify-content:center;font-size:18px}.gx-explore-circle-card strong{font-size:13.5px;line-height:1.25;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gx-explore-circle-card small{font-size:10.5px;color:var(--gx-text-3);line-height:1.35}.gx-explore-circle-card__type{margin-top:auto} .gx-topic-cloud{display:flex;flex-wrap:wrap;gap:8px;padding:2px 16px 16px}.gx-topic-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--gx-border);background:var(--gx-surface-2);color:var(--gx-text-2);border-radius:999px;padding:8px 11px;font:650 12px/1 inherit;cursor:pointer}.gx-topic-chip small{color:var(--gx-text-4);font-size:10px} .gx-explore-people{border-top:1px solid var(--gx-border)}.gx-explore-person{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--gx-border)}.gx-explore-person:last-child{border-bottom:0}.gx-explore-person__main{flex:1;min-width:0;border:0;background:transparent;color:var(--gx-text);display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}.gx-explore-person__main>span:last-child{min-width:0;display:flex;flex-direction:column;gap:2px}.gx-explore-person__main strong{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gx-explore-person__main small{font-size:11px;color:var(--gx-text-3)}.gx-mini-follow{border:1px solid var(--gx-purple);background:transparent;color:var(--gx-purple);border-radius:999px;min-height:32px;padding:6px 11px;font:700 11.5px/1 inherit;cursor:pointer} .gx-explore-lab{padding:0}.gx-explore-lab>button{width:100%;border:0;background:transparent;color:var(--gx-text);padding:14px 16px;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer}.gx-explore-lab__icon{width:36px;height:36px;border-radius:12px;background:var(--gx-purple-tint);color:var(--gx-purple);display:flex;align-items:center;justify-content:center}.gx-explore-lab button>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:3px}.gx-explore-lab strong{font-size:13.5px}.gx-explore-lab small{font-size:11px;color:var(--gx-text-3)}.gx-explore-bottom-space{height:18px}.gx-friendly-empty{padding:14px 16px 18px;color:var(--gx-text-3);font-size:12.5px}.gx-muted-copy{color:var(--gx-text-3);font-size:12px} @media(min-width:1024px){.gx-explore-feature{flex-basis:280px}.gx-explore-page{padding-bottom:24px}.gx-explore-hero{position:relative}.gx-explore-circle-card{flex-basis:190px}} @media(prefers-reduced-motion:reduce){.gx-tab-icon-shell,.gx-tab-create-btn,.gx-explore-feature,.gx-report-action,.gx-inline-action,.gx-status-control{transition:none!important}} /* BRANDED INTERACTION DIALOGS — replace native browser prompt/confirm UI */ .gx-dialog-sheet{padding:18px 18px calc(18px + env(safe-area-inset-bottom));max-width:520px;left:50%;transform:translateX(-50%);border-radius:24px 24px 0 0} .gx-dialog-head{display:flex;align-items:flex-start;gap:13px;padding:4px 2px 16px;color:var(--gx-text)} .gx-dialog-head strong{display:block;font-size:17px;line-height:1.25;letter-spacing:-.01em} .gx-dialog-head p{margin:6px 0 0;color:var(--gx-text-2);font-size:13px;line-height:1.45} .gx-dialog-icon{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:14px;background:var(--gx-surface-2);color:var(--gx-accent);border:1px solid var(--gx-border)} .gx-dialog-head--danger .gx-dialog-icon{color:var(--gx-danger);background:var(--gx-danger-tint)} .gx-dialog-head--warning .gx-dialog-icon{color:var(--gx-warning);background:var(--gx-warning-tint)} .gx-dialog-input{width:100%;min-height:48px;border:1px solid var(--gx-border);background:var(--gx-surface-2);color:var(--gx-text);border-radius:15px;padding:12px 14px;font:inherit;outline:none;box-sizing:border-box} .gx-dialog-input:focus{border-color:var(--gx-accent);box-shadow:0 0 0 3px var(--gx-pink-tint)} .gx-dialog-input--area{resize:vertical;min-height:112px;line-height:1.45} .gx-dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px} .gx-dialog-actions button{min-height:46px;border-radius:14px;border:1px solid var(--gx-border);font:700 14px/1 system-ui;cursor:pointer} .gx-dialog-cancel{background:var(--gx-surface-2);color:var(--gx-text-2)} .gx-dialog-confirm{border-color:transparent!important;background:var(--gx-grad);color:var(--gx-on-accent)} .gx-dialog-confirm--danger{background:var(--gx-danger)!important} .gx-dialog-confirm--warning{background:var(--gx-warning-tint)!important;color:var(--gx-warning-text)!important;border-color:var(--gx-warning-border)!important} @media(min-width:700px){.gx-dialog-sheet{bottom:24px;border-radius:24px}} /* ============================================================ Instagram-style floating icon-only bottom nav (mobile) ============================================================ */ .gx-bottom-nav.tab-bar{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(9px + env(safe-area-inset-bottom,8px)); width:auto; max-width:calc(100vw - 18px); padding:8px 10px; gap:2px; border-radius:999px; background:rgba(18,18,24,.72); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4); border:1px solid rgba(255,255,255,.09); box-shadow:0 12px 34px rgba(0,0,0,.5); align-items:center; justify-content:center; z-index:1000; } :root[data-theme="light"] .gx-bottom-nav.tab-bar{ background:rgba(255,255,255,.8); border-color:rgba(20,20,31,.08); box-shadow:0 12px 34px rgba(40,32,82,.16); } .gx-bottom-nav .tab-item{ min-width:52px; min-height:44px; padding:0; margin:0; border-radius:999px; display:flex; align-items:center; justify-content:center; color:var(--gx-text-3); transition:color .18s ease, background .18s ease, transform .12s ease; } .gx-bottom-nav .tab-item.active{ color:var(--gx-text); background:rgba(255,255,255,.13); } :root[data-theme="light"] .gx-bottom-nav .tab-item.active{ background:rgba(20,20,31,.07); } .gx-bottom-nav .tab-item:active{ transform:scale(.9); } .gx-bottom-nav .gx-nav-icon-wrap{ position:relative; display:flex; align-items:center; justify-content:center; } /* List screens clear the floating pill so content never hides under it */ [data-screen="feed"] .page-content, [data-screen="explore"] .page-content, [data-screen="messages"] .page-content, [data-screen="profile"] .page-content, [data-screen="communities"] .page-content{ padding-bottom:calc(82px + env(safe-area-inset-bottom,8px)); } /* ============================================================ DAILY UTILITY + PLANS V2 — 20260831g GossipX stays intent/context-first rather than photo-first. ============================================================ */ .gx-nearby-utility{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:10px 12px;background:var(--gx-surface);border-bottom:1px solid var(--gx-border)} .gx-nearby-utility button{appearance:none;border:1px solid var(--gx-border);border-radius:13px;background:var(--gx-surface-2);min-height:70px;padding:8px 5px;color:var(--gx-text);font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center} .gx-nearby-utility button:active{transform:scale(.985)} .gx-nearby-utility button span{font-size:19px;line-height:1.1}.gx-nearby-utility button strong{font-size:11px}.gx-nearby-utility button small{font-size:8.5px;line-height:1.2;color:var(--gx-text-4);font-weight:600} .gx-compose-context-note{margin:0 18px 10px;padding:9px 11px;border:1px dashed var(--gx-border);border-radius:11px;background:var(--gx-surface-2);color:var(--gx-text-3);font-size:10.5px;line-height:1.4} .gx-plan-context{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:9px 11px;border:1px solid var(--gx-border);border-radius:12px;background:var(--gx-surface);color:var(--gx-text-3);font-size:10.5px}.gx-plan-context strong{color:var(--gx-text)}.gx-plan-context button{border:0;background:transparent;color:var(--gx-purple);font:800 10px/1 inherit;cursor:pointer;white-space:nowrap} .gx-ride-find{margin:0 0 12px;padding:13px;border:1px solid color-mix(in srgb,var(--gx-purple) 22%,var(--gx-border));border-radius:15px;background:linear-gradient(145deg,var(--gx-purple-tint),var(--gx-surface));}.gx-ride-find>div:first-child strong{display:block;color:var(--gx-text);font-size:12.5px}.gx-ride-find>div:first-child span{display:block;margin-top:2px;color:var(--gx-text-3);font-size:10.5px}.gx-ride-find__row{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:10px}.gx-ride-find__row .gx-btn{width:auto;padding:0 14px}.gx-ride-find small{display:block;margin-top:7px;color:var(--gx-text-4);font-size:9px;line-height:1.35} .gx-plan-chat{display:grid;gap:8px;max-height:280px;overflow:auto;padding:2px}.gx-plan-chat__msg{max-width:86%;border-radius:12px;padding:8px 10px;background:var(--gx-surface-2);color:var(--gx-text-2);font-size:11px;line-height:1.4}.gx-plan-chat__msg.is-me{margin-left:auto;background:var(--gx-purple-tint);color:var(--gx-text)}.gx-plan-chat__msg strong{display:block;font-size:9px;color:var(--gx-text-4);margin-bottom:2px}.gx-plan-chat-compose{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:9px}.gx-plan-chat-compose button{width:auto;padding:0 14px} .gx-ride-note{display:grid;gap:7px}.gx-ride-note>div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--gx-border);font-size:10.5px}.gx-ride-note>div:last-child{border-bottom:0}.gx-ride-note span{color:var(--gx-text-3)}.gx-ride-note strong{color:var(--gx-text);text-align:right} @media(max-width:390px){.gx-nearby-utility button small{display:none}.gx-nearby-utility button{min-height:56px}.gx-ride-find__row{grid-template-columns:1fr}.gx-ride-find__row .gx-btn{min-height:42px}} .gx-ride-detail{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}.gx-ride-detail>div{min-width:0}.gx-ride-detail strong{display:block;color:var(--gx-text);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gx-ride-detail span{display:block;margin-top:2px;color:var(--gx-text-4);font-size:9.5px}.gx-ride-detail b{color:var(--gx-purple);font-size:18px} .gx-plan-chat__composer{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:9px}.gx-plan-chat__composer .gx-btn{width:auto;padding:0 14px} .gx-compose-nearby-badge{margin:10px 18px 0;padding:9px 11px;border-radius:12px;background:var(--gx-purple-tint);border:1px solid color-mix(in srgb,var(--gx-purple) 22%,var(--gx-border));color:var(--gx-text-2);font-size:11px}.gx-compose-nearby-badge strong{color:var(--gx-purple)}.gx-compose-nearby-badge span{display:block;margin-top:2px;color:var(--gx-text-4);font-size:9px} .gx-post-area{color:var(--gx-purple);font-weight:650} /* ============================================================ INSTAGRAM-ADAPTED FEED LANGUAGE — 20260831m Edge-to-edge, de-boxed, quiet. Reads premium/global, not "local". ============================================================ */ :root:not([data-theme="light"]){ --gx-hair:rgba(255,255,255,.07); } :root[data-theme="light"]{ --gx-hair:rgba(20,20,31,.08); } /* De-box the post card: full-width, single hairline divider, no rail/box/shadow */ .post-card.gx-post-premium{ margin:0 !important; border:0 !important; border-radius:0 !important; border-bottom:1px solid var(--gx-hair) !important; background:var(--gx-bg) !important; box-shadow:none !important; padding:16px 16px 13px !important; } :root[data-theme="light"] .post-card.gx-post-premium{ border:1px solid var(--gx-premium-border)!important; background:var(--gx-elevated)!important; box-shadow:var(--gx-premium-shadow)!important; } :root:not([data-theme="light"]) .post-card.gx-post-premium{box-shadow:var(--gx-premium-shadow)!important} .post-card.gx-post-premium:active{ background:var(--gx-surface) !important; transform:none !important; box-shadow:none !important; } .post-card--railed::before{ display:none !important; } /* Quiet trust/type signals — flat coloured icon + text, no pill/border/background */ .post-status-row{ gap:12px; margin-bottom:9px; } .status-pill{ background:transparent !important; border:0 !important; padding:0 !important; font-size:12px; font-weight:600; letter-spacing:0; color:var(--sc, var(--gx-text-3)); } .type-chip{ background:transparent !important; border:0 !important; padding:0 !important; font-size:12px; font-weight:600; color:var(--gx-text-3); } .status-pill .gx-icon, .type-chip .gx-icon{ width:14px; height:14px; } /* Icon-first action row (Instagram): larger icons, generous gaps, no verb labels */ .gx-post-actions{ gap:22px !important; margin-top:13px !important; padding-top:0 !important; } .gx-post-action{ min-height:32px !important; padding:0 !important; gap:6px; color:var(--gx-text) !important; } .gx-post-action .gx-icon{ width:24px; height:24px; } .gx-post-action.liked{ color:var(--gx-accent) !important; background:transparent !important; } .gx-post-action.reposted{ color:var(--gx-purple) !important; background:transparent !important; } .gx-post-spacer{ flex:1; } /* The trust "Weigh in" stays a slim pill on the right, so it never reads as chrome */ .gx-post-action.gx-post-action--know{ min-height:32px !important; border:1px solid var(--gx-border); border-radius:999px; padding:6px 13px !important; font-size:12.5px; } .gx-post-action--know .gx-icon{ width:16px; height:16px; } .gx-post-action--know.gx-know--confirm, .gx-post-action--know.gx-know--dispute{ border-color:transparent; } .gx-post-action--share{ margin-left:0 !important; } /* Instagram-style "12 Buzzes" summary + "View replies" under the actions */ .gx-post-likes{ margin:12px 1px 0; font-size:13.5px; color:var(--gx-text); } .gx-post-likes b{ font-weight:700; } .gx-post-replies{ margin:4px 1px 0; font-size:13px; color:var(--gx-text-3); cursor:pointer; } /* Feed chrome tuned to the de-boxed Instagram language (composer, chips, tags) */ .composer-strip{ background:var(--gx-bg) !important; border-bottom:1px solid var(--gx-hair) !important; } .composer-strip .hint{ font-size:15px; } .pulse-chip{ border-color:var(--gx-hair) !important; font-weight:600; } .pulse-chip--add{ background:transparent !important; } .post-tags{ gap:14px; margin-top:8px; } .post-tag{ background:transparent !important; border:0 !important; padding:0 !important; color:var(--gx-purple) !important; font-weight:600; font-size:14px; } .gx-post-avatar{width:44px!important;height:44px!important}.post-name[role="button"]{display:inline-flex;align-items:center;min-height:44px} .gx-post-head-btn{width:44px!important;height:44px!important}.gx-post-action{min-width:44px!important;min-height:44px!important} .post-tag[role="button"]{display:inline-flex;align-items:center;min-width:44px;min-height:44px} /* Premium loading: softer, theme-aware skeleton shimmer (was a harsh 0.65 white flash) */ .sk-line::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent) !important; } :root[data-theme="light"] .sk-line::after{ background:linear-gradient(90deg,transparent,rgba(20,20,31,.05),transparent) !important; } /* ============================================================ ACTIVE-NOW STORIES ROW + PILL TABS — 20260901b Premium "circles & people active now" strip + segmented tabs. ============================================================ */ .gx-stories{ display:flex; gap:15px; overflow-x:auto; padding:12px 16px 14px; background:var(--gx-bg); scrollbar-width:none; -webkit-overflow-scrolling:touch; } .gx-stories::-webkit-scrollbar{ display:none; } .gx-story{ flex:0 0 auto; width:66px; text-align:center; cursor:pointer; } .gx-story-ring{ width:62px; height:62px; border-radius:50%; padding:2.5px; background:conic-gradient(from 210deg, var(--gx-accent), var(--gx-purple), var(--gx-info), var(--gx-accent)); display:flex; align-items:center; justify-content:center; position:relative; margin:0 auto; transition:transform .12s ease; } .gx-story-ring.off{ background:var(--gx-surface-3); } .gx-story:active .gx-story-ring{ transform:scale(.93); } .gx-story-av{ width:100%; height:100%; border-radius:50%; overflow:hidden; background:var(--gx-surface-2); display:flex; align-items:center; justify-content:center; font-size:25px; border:2.5px solid var(--gx-bg); } .gx-story-plus{ background:var(--gx-grad); color:#fff; } .gx-story-icon{ color:var(--gx-text-2); } .gx-story-dot{ position:absolute; right:3px; bottom:3px; width:13px; height:13px; border-radius:50%; background:var(--gx-success); border:2.5px solid var(--gx-bg); } .gx-story-live{ position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); font-size:8px; font-weight:800; letter-spacing:.04em; background:var(--gx-accent); color:#fff; padding:2px 6px; border-radius:6px; border:2px solid var(--gx-bg); } .gx-story-nm{ margin-top:7px; font-size:11px; color:var(--gx-text-2); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Segmented pill tabs (For You / Nearby / My Circles) */ .feed-tabs{ margin:0 !important; padding:2px 0 12px !important; border-bottom:0 !important; background:var(--gx-bg) !important; gap:8px; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; } .feed-tabs::-webkit-scrollbar{ display:none; } .feed-tab{ flex:0 0 auto !important; padding:9px 17px !important; border-radius:999px; background:var(--gx-surface-2); color:var(--gx-text-3); font-weight:700; font-size:13.5px; border-bottom:0 !important; min-height:0 !important; transition:background .14s ease,color .14s ease; } .feed-tab.active{ background:var(--gx-text) !important; color:var(--gx-bg) !important; border-bottom:0 !important; } /* ============================================================ PROFILE — cover banner, centered avatar, stats, action pills — 20260901 ============================================================ */ .gx-profile-head{ background:var(--gx-bg); } .gx-profile-cover{ height:132px; position:relative; } .gx-profile-cover-actions{ position:absolute; top:12px; right:14px; display:flex; gap:8px; } .gx-profile-iconbtn{ width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.30); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; position:relative; } .gx-profile-iconbtn .gx-icon{ width:19px; height:19px; } .gx-profile-iconbtn-badge{ position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--gx-accent); color:#fff; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid var(--gx-bg); } .gx-profile-body{ background:var(--gx-bg); padding:0 18px 16px; text-align:center; margin-top:-46px; position:relative; } .gx-profile-avatar{ width:92px; height:92px; border-radius:50%; overflow:hidden; margin:0 auto 10px; border:4px solid var(--gx-bg); background:var(--gx-surface-2); display:flex; align-items:center; justify-content:center; font-size:44px; box-shadow:0 8px 26px -8px rgba(0,0,0,.55); } .gx-profile-name{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--gx-text); line-height:1.15; } .gx-profile-ghost{ font-size:11px; font-weight:800; background:var(--gx-purple); color:#fff; padding:3px 9px; border-radius:999px; vertical-align:middle; white-space:nowrap; } .gx-profile-handle{ font-size:13.5px; color:var(--gx-text-3); margin-top:3px; } .gx-profile-bio{ font-size:14px; line-height:1.5; color:var(--gx-text-2); margin:10px auto 0; max-width:320px; } .gx-profile-stats{ display:flex; justify-content:center; margin:16px auto 0; max-width:340px; } .gx-profile-stats > div{ flex:1; cursor:pointer; padding:4px 0; } .gx-profile-stats > div + div{ border-left:1px solid var(--gx-hair); } .gx-profile-stats b{ display:block; font-size:18px; font-weight:800; color:var(--gx-text); } .gx-profile-stats span{ display:block; font-size:12px; color:var(--gx-text-3); margin-top:2px; } .gx-profile-actions{ display:flex; gap:8px; margin-top:16px; } .gx-profile-btn{ flex:1; cursor:pointer; padding:10px 0; border-radius:999px; text-align:center; font-weight:700; font-size:13.5px; background:var(--gx-surface-2); color:var(--gx-text); border:1px solid var(--gx-border); transition:transform .12s ease; } .gx-profile-btn:active{ transform:scale(.97); } .gx-profile-btn--primary{ background:var(--gx-text); color:var(--gx-bg); border-color:transparent; } .gx-identity-card{ margin-top:14px; border:1.5px solid var(--gx-border); border-radius:16px; padding:13px; text-align:left; } /* ============================================================ PHOTO-FIRST CARDS — reference-matched (overrides the flat de-box) — 20260901 Rounded 22px cards, card surface, soft shadow, prominent rounded media. ============================================================ */ .post-card.gx-post-premium{ margin:14px 14px 0 !important; border:0 !important; border-bottom:0 !important; border-radius:22px !important; background:var(--gx-surface) !important; box-shadow:0 12px 30px -16px rgba(0,0,0,.62) !important; padding:16px !important; overflow:hidden; } :root[data-theme="light"] .post-card.gx-post-premium{ box-shadow:0 10px 26px -16px rgba(40,32,82,.20) !important; border:1px solid var(--gx-hair) !important; } .post-card.gx-post-premium:active{ background:var(--gx-surface-2) !important; transform:scale(.995); } .post-card--railed::before{ display:none !important; } /* Prominent, rounded media (photo-first) */ .gx-post-media, .gx-post-media--single, .post-image-grid, .gx-post-premium .post-image{ border-radius:16px !important; overflow:hidden; } .gx-post-media, .gx-post-media--single, .post-image-grid{ margin-top:12px; } .gx-post-premium .post-image, .gx-post-media--single img, .gx-post-media--single video{ width:100%; display:block; } /* Content area under posts should sit on the app bg so cards read as cards */ [data-screen="feed"] .page-content, [data-screen="profile"] .page-content, [data-screen="explore"] .page-content, [data-screen="communities"] .page-content{ background:var(--gx-bg); } /* ============================================================ PHOTO-FIRST MEDIA CARD (reference overlay) — 20260901 ============================================================ */ .gx-post-photo{ padding:0 !important; } .gx-photo-media{ position:relative; } .gx-post-photo .gx-post-media, .gx-post-photo .gx-post-media--single, .gx-post-photo .post-image-grid{ margin:0 !important; border-radius:0 !important; } .gx-post-photo .gx-post-media--single{ aspect-ratio:4/5; max-height:520px; overflow:hidden; } .gx-post-photo .gx-post-media--single img, .gx-post-photo .gx-post-media--single video, .gx-post-photo .post-image{ width:100%; height:100%; display:block; object-fit:cover; border-radius:0 !important; } .gx-photo-top{ position:absolute; top:12px; left:12px; right:12px; display:flex; align-items:center; gap:8px; z-index:2; } .gx-photo-author{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.30); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-radius:999px; padding:5px 13px 5px 5px; cursor:pointer; max-width:max-content; } .gx-photo-av{ width:30px; height:30px; border-radius:50%; overflow:hidden; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:16px; background:rgba(255,255,255,.14); } .gx-photo-av img{ width:100%; height:100%; object-fit:cover; } .gx-photo-names{ min-width:0; display:flex; align-items:baseline; gap:5px; color:#fff; overflow:hidden; } .gx-photo-names b{ font-size:13.5px; font-weight:700; white-space:nowrap; } .gx-photo-circle{ font-size:11px; color:rgba(255,255,255,.82); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gx-photo-btn{ width:34px; height:34px; border-radius:50%; border:0; background:rgba(0,0,0,.30); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto; cursor:pointer; margin-left:auto; } .gx-photo-scrim{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:18px; padding:38px 15px 15px; background:linear-gradient(0deg, rgba(0,0,0,.74), transparent); z-index:2; } .gx-photo-act{ border:0; background:transparent; color:#fff; display:inline-flex; align-items:center; gap:6px; font:700 13px/1 'Plus Jakarta Sans',sans-serif; cursor:pointer; } .gx-photo-act .gx-icon{ width:23px; height:23px; } .gx-photo-act.liked{ color:var(--gx-accent); } .gx-photo-act.liked .gx-icon path{ fill:currentColor; } .gx-photo-act--save{ margin-left:0; } .gx-photo-act--save.saved .gx-icon path{ fill:currentColor; } .gx-photo-sp{ flex:1; } .gx-photo-body{ padding:13px 16px 15px; } .gx-photo-trust{ margin-bottom:7px; } .gx-trust-inline{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--sc, var(--gx-text-3)); } .gx-trust-dot{ width:6px; height:6px; border-radius:50%; background:var(--sc, currentColor); flex:0 0 auto; } .gx-trust-dev{ color:var(--gx-info); } .gx-photo-cap{ font-size:14.5px; line-height:1.5; color:var(--gx-text); } .gx-photo-weigh{ margin-top:12px; } /* Profile cover photo (blurred cover from cover_url or avatar; gradient fallback) */ .gx-profile-cover{ overflow:hidden; } .gx-profile-cover--photo{ position:relative; background:var(--gx-surface-2); } .gx-profile-cover--photo::before{ content:''; position:absolute; inset:-24px; background-image:var(--cover); background-size:cover; background-position:center; filter:blur(18px) brightness(.62); } .gx-profile-cover--photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.42)); } .gx-profile-cover .gx-profile-cover-actions{ z-index:3; } /* ============================================================ ELEMENT-AUDIT FIXES — feed — 20260902 ============================================================ */ /* Header search/msg/bell → rounded icon buttons (match profile + reference) */ .gx-top-action{ min-width:40px !important; min-height:40px !important; width:40px; height:40px; border-radius:50% !important; background:var(--gx-surface-2); } /* Action row was overflowing — "Weigh in" got clipped */ .gx-post-actions{ gap:14px !important; } .gx-post-action.gx-post-action--know{ padding:6px 11px !important; } /* Unify text-card trust to the photo-card dot style (was a clock chip) */ .post-status-row .status-pill .gx-status-icon{ display:none !important; } .post-status-row .status-pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sc, currentColor); flex:0 0 auto; display:inline-block; } /* ============================================================ ACCESSIBLE INTERACTION GEOMETRY — 20260902a Preserve the premium visual size while guaranteeing a 44px touch target. ============================================================ */ button,[role="button"],[role="radio"],[role="tab"]{min-width:44px!important;min-height:44px!important} input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),textarea,select{min-height:44px!important} .gx-top-action{min-width:44px!important;min-height:44px!important;width:44px;height:44px} .feed-tab{min-height:44px!important} /* ============================================================ ELEMENT-AUDIT FIXES — Explore + composer chrome — 20260902 ============================================================ */ /* Explore refresh (and similar) icon buttons → circle, matching the feed header buttons */ .gx-icon-button{ border-radius:50% !important; background:var(--gx-surface-2) !important; border-color:var(--gx-hair) !important; } /* Composer entry strip: clean single hairline, no heavy box, blends with the feed */ .composer-strip{ background:var(--gx-bg) !important; border:0 !important; border-bottom:1px solid var(--gx-hair) !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important; } /* "Now on GossipX" cards: drop the loud coloured top-rail, match the card system */ .buzzing-card{ border:1px solid var(--gx-hair) !important; border-radius:18px !important; } .buzzing-card::before, .gx-explore-buzz::before{ display:none !important; } /* ============================================================ LOOPLY-ADAPTED DESIGN SYSTEM — 20260904a Clean & airy in light, premium dark in dark. One continuous editorial feed surface (no floaty boxes), refined type scale, dot-based trust, quiet action row. This block is authored LAST so it supersedes the earlier de-box / photo-first passes. ============================================================ */ /* ---- 1. Continuous editorial feed: kill the floaty rounded boxes. Every card is one flush surface separated by a single hairline. --- */ .post-card.gx-post-premium{ margin:0 !important; border:0 !important; border-radius:0 !important; border-bottom:1px solid var(--gx-hair) !important; background:var(--gx-surface) !important; box-shadow:none !important; padding:18px 18px 13px !important; overflow:visible; } :root[data-theme="light"] .post-card.gx-post-premium{ border:0 !important; border-bottom:1px solid var(--gx-hair) !important; box-shadow:none !important; background:var(--gx-surface) !important; } .post-card.gx-post-premium:active{ background:var(--gx-surface-2) !important; transform:none !important; } /* the feed reads as one panel: header + tabs share the card surface */ .sticky-header{ background:var(--gx-surface) !important; } .feed-tabs{ background:var(--gx-surface) !important; } .gx-stories{ background:var(--gx-surface) !important; } .composer-strip{ background:var(--gx-surface) !important; border-bottom-color:var(--gx-hair) !important; } /* ---- 2. Photo card: full-bleed hero media inside the flush card ---- */ .gx-post-photo{ padding:0 !important; } .gx-post-photo .gx-photo-body{ padding:14px 18px 15px !important; } .gx-post-photo .gx-photo-media{ border-radius:0 !important; } /* ---- 3. Type scale — bigger, calmer, tighter tracking ---- */ .gx-post-premium .post-text, .gx-post-premium .gx-post-text{ font-size:15.5px !important; line-height:1.56 !important; letter-spacing:-0.003em; color:var(--gx-text) !important; margin-top:9px !important; } .gx-post-header{ align-items:center; } .post-name{ font-size:15px !important; font-weight:700 !important; letter-spacing:-0.012em; color:var(--gx-text) !important; } .post-circle{ font-size:14.5px; font-weight:600; color:var(--gx-text-2) !important; } .post-handle.gx-post-meta, .gx-post-meta{ font-size:12.5px !important; color:var(--gx-text-3) !important; margin-top:2px !important; } .gx-post-avatar{ width:42px !important; height:42px !important; } /* ---- 4. Trust: quiet coloured dot + label (source-of-truth spec) ---- */ .post-status-row{ gap:12px !important; margin-bottom:10px !important; } .post-status-row .status-pill{ background:transparent !important; border:0 !important; padding:0 !important; font-size:12px !important; font-weight:700 !important; letter-spacing:0.005em !important; text-transform:none !important; box-shadow:none !important; gap:7px !important; color:var(--sc, var(--gx-text-3)) !important; } .post-status-row .status-pill .gx-status-icon{ display:none !important; } .post-status-row .status-pill::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--sc, currentColor); flex:0 0 auto; display:inline-block; box-shadow:0 0 0 4px color-mix(in srgb, var(--sc) 16%, transparent); } /* ---- 5. Action row: quiet, evenly weighted; Weigh-in as a clean pill ---- */ .gx-post-actions{ gap:18px !important; margin-top:14px !important; padding-top:0 !important; } .gx-post-action{ color:var(--gx-text-2) !important; } .gx-post-action .gx-icon{ width:22px !important; height:22px !important; } .gx-post-action.liked{ color:var(--gx-accent) !important; } .gx-post-action.liked .gx-icon path{ fill:currentColor; } .gx-post-action.reposted{ color:var(--gx-success) !important; } .gx-post-action.gx-post-action--know{ border:1px solid var(--gx-border) !important; border-radius:999px !important; padding:7px 15px !important; font-size:12.5px !important; font-weight:700 !important; color:var(--gx-text) !important; background:transparent !important; } .gx-post-action--know.gx-know--confirm{ color:var(--gx-success) !important; border-color:color-mix(in srgb,var(--gx-success) 45%,transparent) !important; background:var(--gx-success-tint) !important; } .gx-post-action--know.gx-know--dispute{ color:var(--gx-danger) !important; border-color:color-mix(in srgb,var(--gx-danger) 45%,transparent) !important; background:var(--gx-danger-tint) !important; } /* ---- 6. Engagement summary lines ---- */ .gx-post-likes{ margin:13px 1px 0 !important; font-size:13.5px !important; color:var(--gx-text) !important; } .gx-post-likes b{ font-weight:800; } .gx-post-replies{ margin:5px 1px 0 !important; font-size:13px !important; color:var(--gx-text-3) !important; } /* ---- 7. Tags: quiet accent links ---- */ .post-tags{ gap:14px !important; margin-top:10px !important; } .post-tag{ background:transparent !important; border:0 !important; padding:0 !important; color:var(--gx-purple) !important; font-weight:600 !important; font-size:14px !important; } /* ---- 8. News source chip: refined ---- */ .news-source.gx-news-source{ border-radius:14px !important; padding:9px 13px !important; background:var(--gx-surface-2) !important; border:1px solid var(--gx-hair) !important; } /* ---- 9. Segmented tabs: airy, high-contrast active pill ---- */ .feed-tabs{ padding:4px 0 12px !important; gap:9px !important; } .feed-tab{ flex:0 0 auto !important; padding:9px 18px !important; border-radius:999px !important; background:var(--gx-surface-2) !important; color:var(--gx-text-3) !important; font-weight:700 !important; font-size:13.5px !important; border-bottom:0 !important; } .feed-tab.active{ background:var(--gx-text) !important; color:var(--gx-bg) !important; border-image:none !important; } /* ---- 10. Header icon buttons: soft circles ---- */ .gx-icon-button, .gx-top-action{ width:42px !important; height:42px !important; border-radius:50% !important; background:var(--gx-surface-2) !important; border:1px solid var(--gx-hair) !important; color:var(--gx-text-2) !important; } /* ---- 11. Profile refinements: airy cover, accent primary action ---- */ .gx-profile-cover{ height:124px !important; } .gx-profile-avatar{ box-shadow:0 10px 30px -10px rgba(0,0,0,.5); } .gx-profile-name{ font-size:22px !important; font-weight:800 !important; letter-spacing:-0.02em; } .gx-profile-stats{ margin-top:18px !important; } .gx-profile-stats b{ font-size:19px !important; font-weight:800 !important; } .gx-profile-btn{ font-size:13.5px !important; padding:11px 0 !important; } .gx-profile-btn--primary{ background:var(--gx-accent) !important; color:var(--gx-on-accent) !important; border-color:transparent !important; } .gx-identity-card{ border-radius:18px !important; padding:14px !important; } /* ---- 12. Center-action bottom nav (Looply-style raised pink compose) ---- */ .tab-bar.gx-bottom-nav{ align-items:center !important; overflow:visible; } .tab-item.tab-compose{ position:relative; } .tab-item.tab-compose .gx-nav-fab{ display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; background:var(--gx-grad); color:#fff; box-shadow:0 14px 28px -8px color-mix(in srgb,var(--gx-accent) 62%,transparent); transform:translateY(-14px); transition:transform .14s ease, box-shadow .14s ease; } .tab-item.tab-compose:active .gx-nav-fab{ transform:translateY(-14px) scale(.92); } .tab-item.tab-compose .gx-nav-fab .gx-icon{ width:26px !important; height:26px !important; color:#fff !important; } /* Active nav slot → pink (Looply), in both themes */ .tab-item.active, :root[data-theme="light"] .tab-item.active{ color:var(--gx-accent) !important; } /* ---- 13. Author line stays on one line (fix community-name wrap) ---- */ .gx-post-author-line{ flex-wrap:nowrap !important; } .gx-post-author-line .post-name{ flex:0 1 auto; min-width:0; } .gx-post-author-line .post-circle{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .gx-post-author-line .gx-meta-sep{ flex:0 0 auto; color:var(--gx-text-3); } .gx-post-author-line .post-circle, .gx-post-author-line .gx-meta-sep{ display:inline-flex !important; align-items:center; align-self:center; } /* ============================================================ GOSSIPX PREMIUM SOCIAL SYSTEM — 20260906a Authoritative shared geometry for Light and Dark. Adapted from the supplied direction: airy editorial rhythm, contained media, tactile controls and a floating mobile dock. Product data and Real/Ghost trust semantics stay GossipX-native. ============================================================ */ :root{ --gx-hair:#2A2632; --gx-canvas:#07070A; --gx-elevated:#0F0E13; --gx-elevated-2:#191720; --gx-premium-border:#2A2632; --gx-premium-shadow:0 16px 44px rgba(0,0,0,.30); --gx-premium-shadow-soft:0 8px 26px rgba(0,0,0,.20); --gx-premium-ring:0 0 0 4px rgba(255,47,146,.13); --gx-premium-radius:22px; --gx-premium-radius-sm:16px; --gx-premium-chrome:rgba(15,14,19,.92); } :root[data-theme="light"]{ --gx-hair:#E4E2E9; --gx-canvas:#F7F7FA; --gx-elevated:#ffffff; --gx-elevated-2:#F0EFF4; --gx-premium-border:#E4E2E9; --gx-premium-shadow:0 16px 44px rgba(32,26,62,.075); --gx-premium-shadow-soft:0 8px 26px rgba(32,26,62,.055); --gx-premium-ring:0 0 0 4px rgba(225,29,116,.10); --gx-premium-chrome:rgba(255,255,255,.94); } /* App canvas and typography */ html,body,#app-root,.desktop-main,.screen{background:var(--gx-canvas)} .screen{isolation:isolate;overflow:hidden} .page-content{background:var(--gx-canvas);scroll-padding-bottom:100px} .screen strong,.screen b{letter-spacing:-.012em} .section-title{padding:22px 18px 9px;font-size:12px;letter-spacing:.09em;color:var(--gx-text-3)} .gx-muted-copy{line-height:1.55} /* Shared page chrome */ .sticky-header,.gx-top-level-header,.gx-chat-header,.gx-settings-header,.gx-page-header,.gx-detail-header{ background:var(--gx-premium-chrome)!important; border-color:var(--gx-hair)!important; -webkit-backdrop-filter:blur(22px) saturate(1.35); backdrop-filter:blur(22px) saturate(1.35); box-shadow:0 1px 0 var(--gx-hair)!important; } .gx-top-action,.gx-icon-button,.back-btn,.gx-profile-iconbtn{ min-width:44px!important;min-height:44px!important;width:44px!important;height:44px!important; border:1px solid var(--gx-premium-border)!important;border-radius:999px!important; background:var(--gx-elevated-2)!important;color:var(--gx-text-2)!important; box-shadow:none!important;transition:transform .14s ease,background .16s ease,color .16s ease!important; } .gx-top-action:active,.gx-icon-button:active,.back-btn:active,.gx-profile-iconbtn:active{transform:scale(.92)} .gx-btn,.gx-btn-pink,.desktop-spill-btn,.gx-new-chat-btn{ border:0!important;border-radius:999px!important;background:var(--gx-grad)!important; color:#fff!important;box-shadow:0 12px 28px -12px color-mix(in srgb,var(--gx-accent) 70%,transparent)!important; font-weight:750!important;letter-spacing:-.01em; } .gx-input,.search-input-wrap,.gx-explore-search,.gx-chat-search-field,.gx-composer-field{ background:var(--gx-elevated)!important;border:1px solid var(--gx-premium-border)!important; border-radius:15px!important;box-shadow:none!important; } .gx-input:focus,.search-input-wrap:focus-within,.gx-chat-search-field:focus-within,.gx-composer-field:focus-within{ border-color:var(--gx-accent)!important;box-shadow:var(--gx-premium-ring)!important; } /* Floating mobile navigation */ .gx-bottom-nav.tab-bar{ left:50%!important;right:auto!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important; width:min(356px,calc(100vw - 24px))!important;max-width:none!important;min-height:66px; padding:7px 9px!important;gap:2px!important;border-radius:24px!important; background:var(--gx-premium-chrome)!important;border:1px solid var(--gx-premium-border)!important; box-shadow:0 18px 48px rgba(0,0,0,.30)!important; -webkit-backdrop-filter:blur(26px) saturate(1.45)!important;backdrop-filter:blur(26px) saturate(1.45)!important; } :root[data-theme="light"] .gx-bottom-nav.tab-bar{box-shadow:0 18px 48px rgba(46,38,84,.16)!important} .gx-bottom-nav .tab-item{ flex:1!important;min-width:48px!important;min-height:50px!important;border-radius:17px!important; background:transparent!important;color:var(--gx-text-3)!important; } .gx-bottom-nav .tab-item.active{color:var(--gx-accent)!important;background:var(--gx-pink-tint)!important} .gx-bottom-nav .tab-compose{overflow:visible} .gx-bottom-nav .tab-compose .gx-nav-fab{ width:60px!important;height:60px!important;transform:translateY(-12px)!important; border:4px solid var(--gx-canvas);box-shadow:0 16px 30px -10px color-mix(in srgb,var(--gx-purple) 70%,transparent)!important; } .gx-bottom-nav .tab-compose:active .gx-nav-fab{transform:translateY(-12px) scale(.92)!important} [data-screen="feed"] .page-content,[data-screen="explore"] .page-content,[data-screen="messages"] .page-content,[data-screen="profile"] .page-content,[data-screen="communities"] .page-content{padding-bottom:96px!important} /* Feed header, filters and active row */ .gx-feed-header{padding:12px 16px 0!important;border-bottom:0!important;box-shadow:none!important} .gx-feed-header .feed-topbar{padding-bottom:10px!important} .gx-feed-header .feed-tabs,.gx-profile-screen>.page-content>.feed-tabs{ margin:0 -16px!important;padding:3px 16px 13px!important;gap:8px!important; background:transparent!important;border:0!important;scroll-padding-inline:16px; } .feed-tab{ min-height:42px!important;padding:10px 17px!important;border:1px solid transparent!important; border-radius:999px!important;background:var(--gx-elevated-2)!important; color:var(--gx-text-3)!important;font-size:13px!important;font-weight:700!important; } .feed-tab.active{background:var(--gx-text)!important;color:var(--gx-canvas)!important;border-color:var(--gx-text)!important} .gx-stories{ gap:13px!important;padding:12px 16px 7px!important;background:var(--gx-canvas)!important; border:0!important; } .gx-story{width:60px!important}.gx-story-ring{width:55px!important;height:55px!important;padding:2px!important} .gx-story-av{border-color:var(--gx-canvas)!important;font-size:22px!important}.gx-story-nm{font-size:10.5px!important;margin-top:6px!important} .composer-strip{ margin:12px 12px 4px!important;padding:10px 10px 10px 12px!important; min-height:62px;border:1px solid var(--gx-premium-border)!important;border-radius:19px!important; background:var(--gx-elevated)!important;box-shadow:var(--gx-premium-shadow-soft)!important; } .composer-strip .hint{font-size:14px!important}.composer-strip .go{min-width:68px;padding:10px 16px!important;border-radius:999px!important} /* Post cards: quiet container, text first, media allowed to lead when present */ .post-card.gx-post-premium{ margin:12px 12px 0!important;padding:16px!important;overflow:hidden!important; border:1px solid var(--gx-premium-border)!important;border-radius:var(--gx-premium-radius)!important; background:var(--gx-elevated)!important;box-shadow:var(--gx-premium-shadow)!important; } .post-card.gx-post-premium:active{background:var(--gx-elevated-2)!important;transform:scale(.995)!important} .post-card--railed::before{display:none!important} .gx-post-avatar{width:42px!important;height:42px!important;background:var(--gx-elevated-2)!important} .post-name{font-size:14.5px!important;font-weight:750!important}.post-circle{font-size:14px!important;font-weight:650!important} .gx-post-premium .post-text,.gx-post-premium .gx-post-text{font-size:15px!important;line-height:1.58!important;margin-top:11px!important} .post-status-row{margin-bottom:9px!important;gap:10px!important} .post-status-row .status-pill{ min-height:24px!important;padding:4px 8px!important;border:0!important;border-radius:999px!important; background:color-mix(in srgb,var(--sc) 10%,transparent)!important;font-size:10.5px!important; } .post-status-row .status-pill::before{width:6px;height:6px;box-shadow:none} .gx-post-actions{gap:10px!important;margin-top:14px!important;padding-top:11px!important;border-top:1px solid var(--gx-hair)!important} .gx-post-action{min-width:42px!important;min-height:40px!important;padding:6px!important;color:var(--gx-text-2)!important} .gx-post-action .gx-icon{width:21px!important;height:21px!important} .gx-post-action.gx-post-action--know{margin-left:auto!important;padding:7px 12px!important;background:var(--gx-elevated-2)!important;border-color:var(--gx-premium-border)!important} .gx-post-likes{margin-top:10px!important}.gx-post-replies{margin-top:5px!important} .post-tags{gap:8px!important}.post-tag{min-height:34px!important;padding:7px 10px!important;border:0!important;border-radius:999px!important;background:var(--gx-purple-tint)!important;color:var(--gx-purple)!important;font-size:12px!important} /* Photo cards use an inset rounded canvas, matching the supplied direction. */ .gx-post-photo{padding:8px!important} .gx-post-photo .gx-photo-media{margin:0!important;border-radius:18px!important;overflow:hidden} .gx-post-photo .gx-post-media,.gx-post-photo .gx-post-media--single,.gx-post-photo .post-image-grid{margin:0!important;border-radius:18px!important} .gx-post-photo .gx-photo-body{padding:14px 8px 9px!important} .gx-post-photo .gx-post-media--single{aspect-ratio:4/4.6;max-height:560px} .gx-photo-top{top:12px;left:12px;right:12px}.gx-photo-author,.gx-photo-btn{background:rgba(12,12,18,.48)!important;backdrop-filter:blur(12px)} .gx-photo-scrim{border-radius:0 0 18px 18px;padding:44px 15px 14px} .gx-post-media,.gx-post-media--single,.post-image-grid,.gx-post-premium .post-image{border-radius:16px!important} /* Explore is a stack of purposeful surfaces, not one long unstructured page. */ .gx-explore-page{background:var(--gx-canvas)!important} .gx-explore-hero{padding:18px 16px 14px!important;background:var(--gx-premium-chrome)!important;border-color:var(--gx-hair)!important} .gx-explore-hero h1{font-size:28px!important;letter-spacing:-.85px!important}.gx-explore-hero p{font-size:13px!important} .gx-explore-search{min-height:50px!important;margin-top:15px!important;border-radius:17px!important;box-shadow:var(--gx-premium-shadow-soft)!important} .gx-explore-jump,.gx-topic-chip{background:var(--gx-elevated)!important;border-color:var(--gx-premium-border)!important;min-height:38px!important} .gx-explore-section{ margin:12px 12px 0!important;border:1px solid var(--gx-premium-border)!important;border-radius:var(--gx-premium-radius)!important; background:var(--gx-elevated)!important;box-shadow:var(--gx-premium-shadow-soft)!important;overflow:hidden; } .gx-explore-section--flush{margin-top:12px!important;border-top:1px solid var(--gx-premium-border)!important} .gx-explore-section-head{padding:17px 16px 12px!important}.gx-explore-section-head strong{font-size:16px!important} .gx-explore-feature{border:1px solid var(--gx-premium-border)!important;border-radius:18px!important;background:linear-gradient(145deg,var(--gx-elevated-2),var(--gx-elevated))!important;box-shadow:none!important} .gx-explore-feature--buzz{background:linear-gradient(145deg,var(--gx-pink-tint),var(--gx-elevated))!important} .gx-explore-feature--developing{background:linear-gradient(145deg,color-mix(in srgb,var(--gx-info) 9%,transparent),var(--gx-elevated))!important} .gx-explore-row,.gx-headline-card,.gx-explore-person{background:var(--gx-elevated)!important;border-color:var(--gx-hair)!important} .gx-explore-circle-card{border-color:var(--gx-premium-border)!important;border-radius:18px!important;background:var(--gx-elevated-2)!important} /* Lists, inbox, notifications and circles */ .gx-top-level-header{padding:19px 18px 15px!important}.gx-top-level-header strong{font-size:25px!important} .gx-messages-page,.gx-settings-page{background:var(--gx-canvas)!important} .conversation-item,.search-result-user,.search-result-post,.notif-item,.circle-row,.suggestion-card{ margin:10px 12px 0!important;padding:14px!important;border:1px solid var(--gx-premium-border)!important; border-radius:18px!important;background:var(--gx-elevated)!important;box-shadow:var(--gx-premium-shadow-soft)!important; } .conversation-item.unread,.notif-item.unread{background:linear-gradient(105deg,var(--gx-pink-tint),var(--gx-elevated))!important} .notif-actor,.opt-ico{background:var(--gx-elevated-2)!important;border:1px solid var(--gx-premium-border)!important} /* Profile */ .gx-profile-head{background:var(--gx-canvas)!important;padding-bottom:8px} .gx-profile-cover{height:154px!important;border-radius:0 0 30px 30px;overflow:hidden} .gx-profile-cover:not(.gx-profile-cover--photo)::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 18% 25%,rgba(255,255,255,.26),transparent 25%),linear-gradient(120deg,transparent,rgba(255,255,255,.10));pointer-events:none} .gx-profile-body{ margin:-52px 12px 0!important;padding:0 18px 18px!important;border:1px solid var(--gx-premium-border); border-radius:28px!important;background:var(--gx-elevated)!important;box-shadow:var(--gx-premium-shadow)!important; } .gx-profile-avatar{width:96px!important;height:96px!important;border:5px solid var(--gx-elevated)!important;box-shadow:0 12px 30px rgba(0,0,0,.22)!important} .gx-profile-name{font-size:23px!important}.gx-profile-stats{padding:13px 0 2px;border-top:1px solid var(--gx-hair);border-bottom:1px solid var(--gx-hair)} .gx-profile-stats>div+div{border-left:1px solid var(--gx-hair)!important} .gx-profile-btn{min-height:44px!important;border-radius:14px!important;background:var(--gx-elevated-2)!important;border-color:var(--gx-premium-border)!important} .gx-profile-btn--primary{background:var(--gx-grad)!important;color:#fff!important;box-shadow:0 10px 24px -13px var(--gx-accent)} .gx-identity-card{border-radius:18px!important;background:var(--gx-elevated-2)!important} .gx-profile-screen>.page-content>.feed-tabs{margin:5px 0 0!important;padding:10px 12px!important} .gx-profile-screen>.page-content>div:last-child{background:var(--gx-canvas)!important} /* Composer and detail */ .gx-compose-page,.gx-detail-page{background:var(--gx-canvas)!important} .gx-compose-header{padding:13px 16px!important;background:var(--gx-premium-chrome)!important;border-color:var(--gx-hair)!important;backdrop-filter:blur(20px)} .gx-compose-meta{margin:12px 12px 0;padding:12px!important;border:1px solid var(--gx-premium-border);border-radius:18px;background:var(--gx-elevated)!important;box-shadow:var(--gx-premium-shadow-soft)} .gx-compose-body{margin:10px 12px 0;padding:15px!important;border:1px solid var(--gx-premium-border);border-radius:20px;background:var(--gx-elevated)!important;min-height:180px!important} .gx-compose-body textarea{font-size:16px!important;line-height:1.6!important} .gx-compose-type-chip{background:var(--gx-elevated)!important;border-color:var(--gx-premium-border)!important;min-height:40px!important} .gx-compose-type-chip.is-active{background:var(--gx-grad)!important;color:#fff!important;border-color:transparent!important} .gx-compose-more-types,.gx-compose-media-item{border-color:var(--gx-premium-border)!important;background:var(--gx-elevated)!important;border-radius:18px!important} .gx-compose-context-note{border-style:solid!important;border-color:var(--gx-premium-border)!important;background:var(--gx-elevated-2)!important} .gx-compose-footer{background:var(--gx-premium-chrome)!important;border-color:var(--gx-hair)!important;backdrop-filter:blur(20px)} .gx-compose-tool{width:44px!important;height:44px!important;border-radius:14px!important;background:var(--gx-elevated-2)!important;border:1px solid var(--gx-premium-border)} .gx-detail-page{padding-bottom:12px}.gx-detail-header{padding:13px 16px!important} .gx-detail-card{margin:12px;padding:18px!important;border:1px solid var(--gx-premium-border);border-radius:22px;background:var(--gx-elevated)!important;box-shadow:var(--gx-premium-shadow-soft)} .gx-detail-composer{padding:9px 12px calc(12px + env(safe-area-inset-bottom,0px))!important;background:var(--gx-premium-chrome)!important;backdrop-filter:blur(20px)} .comment-bubble{background:var(--gx-elevated-2)!important;border:1px solid var(--gx-premium-border)!important;border-radius:5px 16px 16px 16px!important;box-shadow:none!important} /* Authentication, settings and utilities */ .gx-auth-screen{background:radial-gradient(circle at 50% 17%,var(--gx-purple-tint),transparent 30%),var(--gx-canvas)!important} .gx-auth-form-wrap{max-width:430px!important}.gx-auth-form-wrap h1{font-size:30px!important;letter-spacing:-1px!important} .gx-auth-field{min-height:55px!important;border-color:var(--gx-premium-border)!important;border-radius:16px!important;background:var(--gx-elevated)!important;box-shadow:var(--gx-premium-shadow-soft)!important} .gx-auth-field:focus-within{border-color:var(--gx-accent)!important;box-shadow:var(--gx-premium-ring)!important} .gx-auth-submit{min-height:52px!important}.gx-auth-back{background:var(--gx-elevated)!important;border-color:var(--gx-premium-border)!important} .gx-settings-header{padding:14px 16px!important}.gx-settings-page{padding:18px 12px 36px!important} .gx-settings-list{gap:10px!important} .gx-settings-list>[style*="background:var(--gx-surface)"],.gx-settings-list>a{ border-color:var(--gx-premium-border)!important;border-radius:18px!important;background:var(--gx-elevated)!important; box-shadow:var(--gx-premium-shadow-soft)!important;padding:14px!important; } .empty-state .emoji{width:76px;height:76px;background:linear-gradient(145deg,var(--gx-pink-tint),var(--gx-purple-tint));border-color:var(--gx-premium-border);box-shadow:var(--gx-premium-shadow-soft)} /* Chat, sheets, dialogs and system states */ [data-screen="chat"] .page-content{background:radial-gradient(circle at 8% 12%,var(--gx-purple-tint),transparent 26%),var(--gx-canvas)!important} .chat-bubble{padding:11px 14px!important;line-height:1.5!important} .chat-bubble-received{background:var(--gx-elevated)!important;border-color:var(--gx-premium-border)!important;box-shadow:var(--gx-premium-shadow-soft)!important} .chat-bubble-sent{box-shadow:0 12px 26px -13px var(--gx-purple)!important} .gx-chat-composer{background:var(--gx-premium-chrome)!important;border-color:var(--gx-hair)!important;backdrop-filter:blur(20px)} .gx-composer-add,.gx-composer-primary{border-radius:14px!important;background:var(--gx-elevated-2)!important;border-color:var(--gx-premium-border)!important} .gx-composer-primary.send-ready{background:var(--gx-grad)!important;color:#fff!important} .sheet-backdrop{background:rgba(5,5,10,.58)!important;backdrop-filter:blur(8px)!important} .sheet{border-color:var(--gx-premium-border)!important;border-radius:28px 28px 0 0!important;background:var(--gx-elevated)!important;box-shadow:0 -24px 70px rgba(0,0,0,.36)!important} .sheet-row{border-color:var(--gx-hair)!important}.gx-sheet-handle{background:var(--gx-text-4)!important} .gx-dialog-icon{border-color:var(--gx-premium-border)!important;background:var(--gx-elevated-2)!important} .toast{background:var(--gx-text)!important;color:var(--gx-canvas)!important;box-shadow:var(--gx-premium-shadow)!important} /* Responsive guardrails */ @media(max-width:380px){ .gx-bottom-nav.tab-bar{width:calc(100vw - 16px)!important}.gx-bottom-nav .tab-item{min-width:44px!important} .gx-post-actions{gap:4px!important}.gx-post-action.gx-post-action--know{padding-inline:9px!important} .gx-profile-actions{display:grid;grid-template-columns:1.2fr 1fr}.gx-profile-actions .gx-profile-btn:last-child{grid-column:1/-1} } @media(min-width:700px) and (max-width:1023px){ .desktop-main{max-width:680px;margin:0 auto;border-inline:1px solid var(--gx-hair)} .gx-bottom-nav.tab-bar{width:390px!important} } @media(min-width:1024px){ .desktop-main{background:var(--gx-canvas)!important} .desktop-nav{background:var(--gx-elevated)!important;border-color:var(--gx-hair)!important} .desktop-nav-item{border-radius:16px!important}.desktop-nav-item.active{background:var(--gx-pink-tint)!important;color:var(--gx-accent)!important} .desktop-widget,.desktop-search{background:var(--gx-elevated)!important;border-color:var(--gx-premium-border)!important;border-radius:20px!important;box-shadow:var(--gx-premium-shadow-soft)!important} .post-card.gx-post-premium{margin-inline:16px!important}.gx-explore-section{margin-inline:16px!important} .gx-detail-card{max-width:560px;margin:16px auto}.gx-compose-meta,.gx-compose-body{margin-inline:18px} .sheet{border-radius:28px!important} } @media(prefers-reduced-motion:reduce){ .gx-top-action,.gx-icon-button,.back-btn,.gx-bottom-nav .tab-item,.gx-nav-fab,.post-card{transition:none!important} } /* ============================================================ LOOPLY REBUILD — Batch 1: shared system + Feed — 20260908a Implements "GossipX Looply Rebuild.dc.html" (screen 01 + shared). Light-anchored via tokens (dark adapts). Flush feed (no boxed cards), split bottom nav (pill + detached gradient FAB), deep-pink accent, editorial type. Authored LAST — supersedes the earlier card/de-box blocks. ============================================================ */ /* ---- Split bottom nav: white pill + detached gradient FAB ---- */ .gx-bottom-nav.tab-bar{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; gap:10px !important; width:calc(100vw - 32px) !important; max-width:520px !important; display:flex !important; align-items:center !important; justify-content:center !important; } .gx-nav-pill{ flex:1 1 auto; min-width:0; height:62px; background:var(--gx-surface); border:1px solid var(--gx-hair); border-radius:999px; box-shadow:0 8px 24px -10px rgba(28,28,34,.18); display:flex; align-items:center; justify-content:space-around; padding:0 8px; box-sizing:border-box; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); } :root:not([data-theme="light"]) .gx-nav-pill{ background:rgba(18,18,24,.82); box-shadow:0 10px 30px rgba(0,0,0,.5); } .gx-nav-pill .tab-item{ min-width:0 !important; background:transparent !important; color:var(--gx-text-3) !important; } .gx-nav-pill .tab-item.active{ color:var(--gx-text) !important; background:transparent !important; } .gx-nav-pill .tab-item svg{ width:23px !important; height:23px !important; } .tab-item.tab-compose{ flex:0 0 auto !important; min-width:62px !important; padding:0 !important; } .tab-item.tab-compose .gx-nav-fab{ width:62px; height:62px; border-radius:50%; background:var(--gx-grad); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px -8px color-mix(in srgb,var(--gx-accent) 55%,transparent); transform:none !important; } .tab-item.tab-compose .gx-nav-fab .gx-icon{ width:24px !important; height:24px !important; color:#fff !important; } .tab-item.tab-compose:active .gx-nav-fab{ transform:scale(.93) !important; } /* ---- Feed: flush articles on the white canvas (no boxed cards) ---- */ .gx-feed-screen .page-content, .gx-feed-page{ background:var(--gx-surface) !important; } .post-card.gx-post-premium{ margin:0 0 22px !important; padding:0 20px !important; background:transparent !important; border:0 !important; border-bottom:0 !important; border-radius:0 !important; box-shadow:none !important; } .post-card.gx-post-premium:active{ background:transparent !important; } /* photo posts keep a contained, rounded hero within the 20px gutter */ .gx-post-photo{ padding:0 20px !important; } .gx-post-photo .gx-photo-media{ border-radius:18px !important; overflow:hidden; } /* ---- Feed typography (measured from the artboard) ---- */ .gx-post-premium .post-text, .gx-post-premium .gx-post-text{ font-size:14.5px !important; line-height:1.5 !important; letter-spacing:-.004em !important; color:var(--gx-text-2) !important; margin-top:11px !important; } .gx-post-premium .post-name{ font-size:15px !important; font-weight:700 !important; letter-spacing:-.012em !important; color:var(--gx-text) !important; } .gx-post-premium .post-circle{ font-size:11.5px !important; font-weight:500 !important; color:var(--gx-text-3) !important; } .gx-post-premium .post-handle, .gx-post-premium .gx-post-meta{ font-size:11.5px !important; color:var(--gx-text-3) !important; } .gx-post-premium .gx-post-avatar{ width:42px !important; height:42px !important; } /* ---- Hashtags → info blue, inline ---- */ .gx-post-premium .post-tags{ gap:6px !important; margin-top:8px !important; } .gx-post-premium .post-tag{ background:transparent !important; border:0 !important; padding:0 6px 0 0 !important; color:var(--gx-info) !important; font-weight:500 !important; font-size:13px !important; } /* ---- Trust → tinted pill with dot (Confirmed green, etc.) ---- */ .post-status-row .status-pill{ display:inline-flex !important; align-items:center !important; gap:6px !important; padding:4px 10px !important; border-radius:999px !important; background:color-mix(in srgb, var(--sc) 12%, transparent) !important; border:0 !important; box-shadow:none !important; font-size:11.5px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; color:color-mix(in srgb, var(--sc) 72%, var(--gx-text)) !important; } .post-status-row .status-pill .gx-status-icon{ display:none !important; } .post-status-row .status-pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sc, currentColor); flex:0 0 auto; display:inline-block; box-shadow:none !important; } /* ---- Composer strip: dark "Spill" button, pill ---- */ .composer-strip{ background:var(--gx-surface) !important; border:1px solid var(--gx-hair) !important; border-radius:999px !important; margin:0 20px 18px !important; padding:9px 10px 9px 12px !important; box-shadow:none !important; } .composer-strip .go{ background:var(--gx-text) !important; color:var(--gx-bg) !important; border-radius:999px !important; padding:0 16px !important; height:32px !important; display:inline-flex !important; align-items:center !important; font-size:12.5px !important; font-weight:700 !important; } /* ---- Segmented tabs: dark active pill (artboard) ---- */ .gx-feed-header .feed-tabs, .feed-tabs{ background:var(--gx-surface) !important; } .feed-tab{ background:transparent !important; color:var(--gx-text-3) !important; font-weight:500 !important; padding:7px 12px !important; } .feed-tab.active{ background:var(--gx-text) !important; color:var(--gx-bg) !important; font-weight:650 !important; border-radius:999px !important; padding:7px 16px !important; } /* ---- Stories row: 56px, accent ring, on the white canvas ---- */ .gx-stories{ background:var(--gx-surface) !important; padding:0 20px 14px !important; gap:14px !important; } .gx-story-ring{ width:56px !important; height:56px !important; padding:2.5px !important; background:var(--gx-accent) !important; } .gx-story-ring.off{ background:var(--gx-hair) !important; } /* ---- Batch 1: engagement row (design look, all actions kept) ---- */ .gx-post-premium .gx-post-actions{ display:flex !important; align-items:center !important; gap:9px !important; margin-top:11px !important; padding-top:0 !important; } .gx-buzz-pill{ display:inline-flex !important; align-items:center !important; gap:5px !important; min-height:0 !important; padding:5px 11px !important; border-radius:999px !important; background:var(--gx-surface-2) !important; color:var(--gx-text-2) !important; font-size:12.5px !important; font-weight:650 !important; border:0 !important; } .gx-buzz-pill .gx-icon{ width:15px !important; height:15px !important; } .gx-buzz-pill.liked{ background:color-mix(in srgb,var(--gx-accent) 13%,transparent) !important; color:var(--gx-accent) !important; } .gx-buzz-pill.liked .gx-icon path{ fill:currentColor; } .gx-replies-btn{ display:inline-flex !important; align-items:center !important; gap:6px !important; min-height:0 !important; padding:0 !important; background:transparent !important; color:var(--gx-text-2) !important; font-size:13px !important; font-weight:500 !important; } .gx-replies-btn .gx-icon{ width:18px !important; height:18px !important; } .gx-post-premium .gx-post-spacer{ flex:1 1 auto !important; } .gx-post-actions .gx-post-action:not(.gx-buzz-pill):not(.gx-replies-btn):not(.gx-post-action--know){ color:var(--gx-text) !important; background:transparent !important; padding:0 !important; min-height:0 !important; } .gx-post-actions .gx-post-action:not(.gx-buzz-pill):not(.gx-replies-btn):not(.gx-post-action--know) .gx-icon{ width:19px !important; height:19px !important; } .gx-post-action--save.saved .gx-icon path{ fill:currentColor; } .gx-post-action.reposted{ color:var(--gx-success) !important; } /* Weigh-in pill stays, compact */ .gx-post-action.gx-post-action--know{ min-height:0 !important; padding:6px 12px !important; font-size:12.5px !important; font-weight:700 !important; border:1px solid var(--gx-border) !important; border-radius:999px !important; background:transparent !important; color:var(--gx-text) !important; } .gx-post-action--know.gx-know--confirm{ color:var(--gx-success) !important; border-color:color-mix(in srgb,var(--gx-success) 45%,transparent) !important; background:var(--gx-success-tint) !important; } .gx-post-action--know.gx-know--dispute{ color:var(--gx-danger) !important; border-color:color-mix(in srgb,var(--gx-danger) 45%,transparent) !important; background:var(--gx-danger-tint) !important; } /* ============================================================ LOOPLY REBUILD — Batch 2: Explore (flush, white canvas) — 20260908a Matches screen 02 artboard: white page, flush sections (no boxed cards), editorial heads. Feature/headline/circle cards keep their own tints/borders. Authored LAST — supersedes the premium-card block. ============================================================ */ .gx-explore-page{ background:var(--gx-surface) !important; } .gx-explore-hero{ background:var(--gx-surface) !important; border-bottom:1px solid var(--gx-hair) !important; } .gx-explore-hero h1{ font-size:24px !important; font-weight:800 !important; letter-spacing:-.03em !important; } .gx-explore-section{ margin:0 !important; margin-top:20px !important; border:0 !important; border-top:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; } .gx-explore-section--flush{ margin-top:16px !important; border-top:0 !important; } .gx-explore-section-head{ padding:0 20px 12px !important; } .gx-explore-section-head strong{ font-size:15.5px !important; font-weight:800 !important; letter-spacing:-.02em !important; } .gx-explore-section-head small{ font-size:11.5px !important; } /* section inner rows/scrollers already carry 20px padding via base; ensure it */ .gx-explore-feature-scroll, .gx-explore-list, .gx-explore-circle-scroll, .gx-explore-topics, .gx-explore-people{ padding-left:20px !important; padding-right:20px !important; } /* filter/jump pills: "Now" active dark, rest outline (artboard) */ .gx-explore-jumps{ padding:12px 20px 4px !important; gap:6px !important; } .gx-explore-jump{ border:1px solid var(--gx-hair) !important; border-radius:999px !important; padding:7px 13px !important; font-size:12.5px !important; font-weight:600 !important; color:var(--gx-text) !important; background:transparent !important; } .gx-explore-jump:first-child{ background:var(--gx-text) !important; color:var(--gx-bg) !important; border-color:transparent !important; } /* search pill on white */ .gx-explore-search{ border:1px solid var(--gx-hair) !important; background:transparent !important; border-radius:999px !important; } /* ============================================================ LOOPLY REBUILD — Batch 2: Messages + Chat — 20260908a Screens 05/06. Flush white lists, flat chat bubbles (received surface-2, sent solid accent), per artboard. ============================================================ */ /* Messages list: flush white */ .gx-messages-page{ background:var(--gx-surface) !important; } /* Chat: flush header + flat bubbles */ .gx-chat-header{ background:var(--gx-surface) !important; border-bottom:1px solid var(--gx-hair) !important; } .chat-bubble{ max-width:78% !important; padding:11px 14px !important; font-size:14px !important; line-height:1.45 !important; } .chat-bubble-received{ background:var(--gx-surface-2) !important; border:0 !important; box-shadow:none !important; color:var(--gx-text-2) !important; border-radius:18px 18px 18px 6px !important; } :root[data-theme="light"] .chat-bubble-received{ background:#F4F4F7 !important; border:0 !important; box-shadow:none !important; } .chat-bubble-sent{ background:var(--gx-accent) !important; background-image:none !important; color:#fff !important; border-radius:18px 18px 6px 18px !important; box-shadow:none !important; } :root[data-theme="light"] .chat-bubble-sent{ box-shadow:none !important; } .gx-chat-composer{ background:var(--gx-surface) !important; border-top:1px solid var(--gx-hair) !important; backdrop-filter:none !important; } /* ============================================================ LOOPLY REBUILD — Batch 3–5: broad flush pass — 20260908a Every screen onto the design's flush canvas (surface, not the grey premium canvas), headers to surface+hairline. Component cards (stats box, identity card, compose fields) keep their own treatment. Authored LAST. Per-screen markup fidelity (Profile no-cover layout, Post, Compose) is a follow-up after live review. ============================================================ */ .gx-compose-page, .gx-detail-page, .gx-profile-page, .gx-settings-page, .gx-messages-page, .gx-follow-list-screen .page-content, .gx-user-profile-screen .page-content, .gx-profile-head{ background:var(--gx-surface) !important; } .gx-compose-header, .gx-settings-header, .gx-page-header, .gx-detail-header, .gx-top-level-header{ background:var(--gx-surface) !important; border-color:var(--gx-hair) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* compose fields sit flush on white (design), not on grey elevated cards */ .gx-compose-meta, .gx-compose-body{ background:transparent !important; border:0 !important; box-shadow:none !important; } .gx-compose-body{ border-top:1px solid var(--gx-hair) !important; border-radius:0 !important; } /* settings list items keep readable separation on white */ .gx-settings-page{ padding-top:12px !important; } /* ============================================================ GOSSIPX VISION RECONCILIATION — 20260911a The corrected audit is authoritative: author-first hierarchy, restrained surfaces, purposeful accent, shared Light/Dark geometry. ============================================================ */ /* Trust follows identity instead of competing with it. */ .gx-post-premium .gx-post-header + .post-status-row{ margin:9px 0 0 !important; } .gx-post-premium .post-status-row + .gx-post-text{ margin-top:9px !important; } /* “Weigh in” is the stable action. A user stance is secondary state. */ .gx-post-action--know .gx-know-state{ display:inline-flex; align-items:center; margin-left:2px; font-size:10px; font-weight:650; color:currentColor; opacity:.78; } .gx-post-action--know .gx-know-state::before{ content:'·'; margin-right:4px; } /* Circles: discovery leads; code entry is a clearly explained secondary path. */ .gx-communities-page{ background:var(--gx-surface) !important; } .gx-communities-header{ background:var(--gx-surface) !important; border-bottom:1px solid var(--gx-hair) !important; } .gx-circle-invite{ margin:0 20px 18px; padding:14px; border:1px solid var(--gx-hair); border-radius:16px; background:var(--gx-surface-2); } .gx-circle-invite > label{ display:block; margin-bottom:9px; color:var(--gx-text); font-size:13px; font-weight:750; } .gx-circle-invite__controls{ display:flex; align-items:stretch; gap:8px; } .gx-circle-invite__controls .gx-input{ min-width:0; min-height:44px; padding:10px 13px; font-size:14px; font-weight:550; text-transform:uppercase; } .gx-circle-invite__controls .gx-btn{ width:auto; min-width:70px; min-height:44px; flex:0 0 auto; padding:10px 17px; font-size:13px; } .gx-circle-invite > small{ display:block; margin-top:9px; color:var(--gx-text-3); font-size:11px; line-height:1.45; } /* Profile posts use the same full-width rhythm as Feed—no nested-card gutter. */ .gx-profile-posts{ background:var(--gx-surface); padding-bottom:24px; } .gx-profile-posts > .post-card.gx-post-premium{ width:100%; margin-left:0 !important; margin-right:0 !important; } /* Interaction size stays accessible without adding visual weight. */ .gx-post-actions .gx-post-action, .gx-post-actions .gx-buzz-pill, .gx-post-actions .gx-replies-btn, .gx-text-button, .gx-circle-invite button{ min-height:44px !important; } .gx-post-actions .gx-post-action:not(.gx-buzz-pill):not(.gx-replies-btn):not(.gx-post-action--know){ min-height:44px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } .gx-btn.gx-btn-secondary, .gx-btn.gx-btn-ghost{ background:transparent !important; background-image:none !important; color:var(--gx-text-2) !important; border:1px solid var(--gx-border) !important; box-shadow:none !important; } .gx-btn.gx-btn-secondary{background:var(--gx-surface-2) !important;color:var(--gx-text) !important} .gx-btn.gx-btn-ghost{border-color:transparent !important} .gx-btn.gx-btn-danger{ background:var(--gx-danger) !important; background-image:none !important; color:#fff !important; } :where(button,[role="button"],a,input,textarea,select):focus-visible{ outline:3px solid color-mix(in srgb,var(--gx-accent) 45%,transparent) !important; outline-offset:2px !important; } /* Bottom sheets remain usable with long copy, small screens and keyboards. */ .sheet{ max-height:calc(100dvh - max(16px,env(safe-area-inset-top))) !important; overscroll-behavior:contain; scrollbar-gutter:stable; } @media(max-width:430px){ .gx-post-action--know .gx-know-state{display:none} .gx-circle-invite{margin-left:20px;margin-right:20px} } @media(max-width:370px){ .gx-post-actions{gap:6px !important} .gx-post-action.gx-post-action--know{padding-left:9px !important;padding-right:9px !important} .gx-circle-invite__controls{flex-direction:column} .gx-circle-invite__controls .gx-btn{width:100%} } @media(min-width:1024px){ .gx-bottom-nav.tab-bar{display:none !important} } /* ============================================================ UX FRIENDLINESS PASS — 20260912b Familiar navigation, progressive disclosure and readable type. ============================================================ */ @media(max-width:1023px){ .gx-bottom-nav.tab-bar{ width:min(430px,calc(100vw - 20px)) !important; min-height:72px !important; padding:0 !important; bottom:calc(8px + env(safe-area-inset-bottom,0px)) !important; background:transparent !important; border:0 !important; box-shadow:none !important; } .gx-nav-pill{ width:100%; height:72px; padding:5px 7px; border-radius:24px; background:color-mix(in srgb,var(--gx-surface) 92%,transparent); border:1px solid var(--gx-hair); box-shadow:0 12px 32px rgba(0,0,0,.18); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; -webkit-backdrop-filter:blur(22px) saturate(1.25); backdrop-filter:blur(22px) saturate(1.25); } :root:not([data-theme="light"]) .gx-nav-pill{ background:rgba(18,18,24,.94); } .gx-nav-pill .tab-item, .gx-nav-pill .tab-item.tab-compose{ min-width:0 !important; min-height:60px !important; padding:5px 2px 4px !important; border-radius:17px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important; color:var(--gx-text-3) !important; background:transparent !important; } .gx-nav-pill .tab-item.active{ color:var(--gx-accent) !important; background:var(--gx-pink-tint) !important; } .gx-nav-pill .gx-tab-label{ display:block !important; max-width:100%; overflow:hidden; text-overflow:ellipsis; font-size:9.5px !important; line-height:1.1; font-weight:700; } .gx-nav-pill .tab-item svg{ width:21px !important; height:21px !important; } .gx-nav-pill .tab-compose .gx-nav-fab{ width:40px !important; height:40px !important; border:0 !important; border-radius:14px !important; transform:none !important; background:var(--gx-grad) !important; box-shadow:0 8px 18px -8px color-mix(in srgb,var(--gx-accent) 65%,transparent) !important; } .gx-nav-pill .tab-compose .gx-tab-label{color:var(--gx-accent) !important} .gx-nav-pill .tab-compose:active .gx-nav-fab{transform:scale(.92) !important} /* Keep the feed decisive: secondary distribution tools live in More. */ .gx-post-premium:not(.gx-post-photo) .gx-post-action.reposted, .gx-post-premium:not(.gx-post-photo) .gx-post-action:not(.gx-buzz-pill):not(.gx-replies-btn):not(.gx-post-action--know):not(.reposted){ display:none !important; } .gx-post-premium .gx-post-actions{ gap:10px !important; min-height:48px; } .gx-post-premium .gx-post-spacer{display:block;flex:1 1 auto !important} .gx-post-premium .gx-buzz-pill, .gx-post-premium .gx-replies-btn, .gx-post-premium .gx-post-action--know{ font-size:13px !important; } .gx-post-premium .post-text, .gx-post-premium .gx-post-text{ font-size:15.5px !important; line-height:1.56 !important; } .gx-post-premium .post-name{font-size:15.5px !important} .gx-post-premium .post-circle, .gx-post-premium .post-handle, .gx-post-premium .gx-post-meta{font-size:12px !important} /* Header icons already expose these actions; avoid repeating them in Profile. */ .gx-profile-screen .gx-profile-actions .gx-profile-btn:not(:first-child){display:none !important} .gx-profile-screen .gx-profile-actions{display:block !important} .gx-profile-screen .gx-profile-actions .gx-profile-btn:first-child{width:100%} /* Suggested hashtags are useful after writing, not before it. */ .gx-compose-suggestions{display:none !important} } @media(max-width:370px){ .gx-nav-pill .gx-tab-label{font-size:9px !important} .gx-post-premium .gx-post-actions{gap:5px !important} .gx-post-premium .gx-post-action--know{padding-inline:8px !important} } /* ============================================================ CONSUMER SOCIAL SYSTEM — 20260912c This is the single release layer for shared geometry and state. New screen work belongs here; older experiment blocks above are compatibility-only. ============================================================ */ :root{ --gx-status-community:#8A8395; --gx-status-unconfirmed:#F59E0B; --gx-status-reports:#3B82F6; --gx-status-confirmed:#22C55E; --gx-status-disputed:#EF4444; --gx-status-resolved:#14B8A6; --gx-font-xs:11.5px; --gx-font-sm:13px; --gx-font-md:15px; --gx-font-lg:18px; --gx-font-xl:24px; } :root[data-theme="light"]{ --gx-status-community:#6F687C; --gx-status-unconfirmed:#9A5B00; --gx-status-reports:#1D4ED8; --gx-status-confirmed:#087A45; --gx-status-disputed:#C93B40; --gx-status-resolved:#0F766E; } .gx-panel{ background:var(--gx-surface); border:1px solid var(--gx-border); border-radius:var(--gx-radius-md); } .gx-row{ display:flex; align-items:center; min-height:56px; gap:12px; padding:11px 16px; color:var(--gx-text); background:var(--gx-surface); border-bottom:1px solid var(--gx-border); } .gx-row:last-child{border-bottom:0} .gx-row__body{min-width:0;flex:1} .gx-row__title{font-size:var(--gx-font-md);font-weight:700;letter-spacing:-.015em} .gx-row__meta{margin-top:3px;color:var(--gx-text-3);font-size:var(--gx-font-xs);line-height:1.4} .gx-section-label{ padding:22px var(--gx-gutter) 8px; color:var(--gx-text-3); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } .gx-page-title{font-size:var(--gx-font-xl);font-weight:800;letter-spacing:-.04em;line-height:1.15} .gx-page-subtitle{margin-top:4px;color:var(--gx-text-3);font-size:var(--gx-font-sm);line-height:1.45} .gx-state-chip{ display:inline-flex; align-items:center; min-height:28px; gap:6px; padding:5px 10px; border-radius:999px; font-size:11.5px; font-weight:750; color:var(--gx-text-2); background:var(--gx-surface-2); } .gx-state-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor} .gx-brand-lockup{display:inline-flex;align-items:center;min-height:30px;flex:0 0 auto} .gx-brand-lockup .gx-brand-img{max-width:132px;object-fit:contain} .gx-welcome-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 2px 16px} .gx-auth-landing--social{min-height:auto;flex:0 0 auto;justify-content:flex-start;padding-top:4px} .gx-auth-landing--social .gx-auth-logo{transform:scale(.88);transform-origin:center} .gx-auth-landing--social .gx-auth-kicker{margin-top:6px;font-size:23px} .gx-welcome-live{width:100%;max-width:410px;margin:22px auto 0} .gx-welcome-live__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .gx-welcome-live__head>div{display:flex;align-items:center;gap:8px;color:var(--gx-text);font-size:13px} .gx-welcome-live__head button{min-height:44px;padding:0;border:0;background:transparent;color:var(--gx-accent);font:700 12px/1 inherit;cursor:pointer} .gx-live-dot{width:8px;height:8px;border-radius:50%;background:var(--gx-status-reports);box-shadow:0 0 0 5px color-mix(in srgb,var(--gx-status-reports) 12%,transparent)} .gx-welcome-post{margin-top:9px;padding:14px 15px;text-align:left;background:var(--gx-surface);border:1px solid var(--gx-border);border-radius:var(--gx-radius-md);cursor:pointer} .gx-welcome-post:active{background:var(--gx-surface-2);transform:scale(.993)} .gx-welcome-post__meta{display:flex;align-items:center;gap:7px;min-width:0;color:var(--gx-text-3);font-size:10.5px;white-space:nowrap;overflow:hidden} .gx-welcome-post__meta>span:first-child{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;color:var(--welcome-status);font-weight:800} .gx-welcome-post__meta>span:first-child::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor} .gx-welcome-post__meta>span:last-child{overflow:hidden;text-overflow:ellipsis} .gx-welcome-post__text{margin-top:9px;color:var(--gx-text);font-size:14px;font-weight:650;line-height:1.48;letter-spacing:-.012em} .gx-welcome-post__foot{display:flex;gap:17px;margin-top:11px;color:var(--gx-text-3);font-size:11.5px;font-weight:650} .gx-welcome-post__foot span{display:inline-flex;align-items:center;gap:5px} .gx-welcome-empty{display:flex;align-items:center;gap:12px;padding:16px;text-align:left;background:var(--gx-surface);border:1px solid var(--gx-border);border-radius:var(--gx-radius-md);color:var(--gx-text-2)} .gx-welcome-empty>span{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--gx-surface-2);color:var(--gx-info)} .gx-welcome-empty strong,.gx-welcome-empty small{display:block}.gx-welcome-empty small{margin-top:3px;color:var(--gx-text-3);font-size:11.5px} .gx-auth-welcome{padding-top:clamp(22px,5vh,48px)} .gx-auth-welcome .gx-auth-actions{flex:0 0 auto;padding-top:12px} .gx-icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:var(--gx-control); height:var(--gx-control); min-width:var(--gx-control); min-height:var(--gx-control); padding:0; border:0; border-radius:50%; color:var(--gx-text-2); background:transparent; } .gx-icon-btn:active{background:var(--gx-surface-2);transform:scale(.94)} .gx-btn{min-height:44px} /* Current credibility is intentionally quiet in the feed. The full sequence is available as chronological history on post detail. */ .gx-credibility{ --status-color:var(--gx-status-community); display:flex; align-items:center; gap:8px; width:max-content; max-width:100%; margin:9px 0 2px; } .gx-credibility--unconfirmed{--status-color:var(--gx-status-unconfirmed)} .gx-credibility--reports_coming{--status-color:var(--gx-status-reports)} .gx-credibility--confirmed{--status-color:var(--gx-status-confirmed)} .gx-credibility--disputed{--status-color:var(--gx-status-disputed)} .gx-credibility--resolved{--status-color:var(--gx-status-resolved)} .gx-credibility__current{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--status-color);font-size:11.5px;font-weight:800} .gx-credibility__current svg{flex:0 0 auto} .gx-credibility__updated{display:inline-flex;align-items:center;gap:4px;color:var(--gx-status-reports);font-size:10px;font-weight:800} .gx-status-history{margin-top:14px;padding:16px 0;border-top:1px solid var(--gx-border)} .gx-status-history__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .gx-status-history__head h3{margin:0;color:var(--gx-text);font-size:14px} .gx-status-history__head p{margin:3px 0 0;color:var(--gx-text-3);font-size:11.5px;line-height:1.4} .gx-status-history__head>span{color:var(--gx-text-3);font-size:10.5px;font-weight:700;white-space:nowrap} .gx-status-history__list{margin:12px 0 0;padding:0;list-style:none} .gx-status-history__list li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding-bottom:12px} .gx-status-history__list li::before{content:'';position:absolute;left:14px;top:24px;bottom:-2px;width:1px;background:var(--gx-border)} .gx-status-history__list li:last-child::before{display:none} .gx-status-history__dot{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid color-mix(in srgb,var(--event-color) 30%,var(--gx-border));border-radius:50%;color:var(--event-color);background:var(--gx-surface)} .gx-status-history__label{color:var(--gx-text);font-size:12.5px;font-weight:750} .gx-status-history__note{margin-top:2px;color:var(--gx-text-2);font-size:11.5px;line-height:1.4} .gx-status-history__time{margin-top:3px;color:var(--gx-text-3);font-size:10.5px} /* Verify is neutral until the person chooses a stance. */ .gx-post-action.gx-post-action--verify{ min-height:44px!important; padding:7px 12px!important; border:1px solid var(--gx-border)!important; border-radius:999px!important; color:var(--gx-text-2)!important; background:var(--gx-surface)!important; } .gx-post-action--verify.gx-verify--confirm{ color:var(--gx-status-confirmed)!important; border-color:color-mix(in srgb,var(--gx-status-confirmed) 42%,var(--gx-border))!important; background:color-mix(in srgb,var(--gx-status-confirmed) 9%,var(--gx-surface))!important; } .gx-post-action--verify.gx-verify--dispute{ color:var(--gx-status-disputed)!important; border-color:color-mix(in srgb,var(--gx-status-disputed) 42%,var(--gx-border))!important; background:color-mix(in srgb,var(--gx-status-disputed) 9%,var(--gx-surface))!important; } .gx-verify-state{display:none} .gx-verify-sheet{display:flex;flex-direction:column;overflow:hidden;padding-bottom:max(12px,env(safe-area-inset-bottom))} .gx-verify-sheet__head{position:sticky;top:0;z-index:2;flex:0 0 auto;background:var(--gx-surface)} .gx-verify-sheet__list{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:8px} .gx-verify-current{ display:flex;align-items:center;gap:8px;margin:0 16px 10px;padding:10px 12px; border:1px solid var(--gx-border);border-radius:12px;color:var(--gx-text-2); background:var(--gx-surface-2);font-size:12px; } .gx-verify-current[data-choice="confirm"]{color:var(--gx-status-confirmed)} .gx-verify-current[data-choice="dispute"]{color:var(--gx-status-disputed)} .gx-verify-choice{ width:100%;border:0!important;border-bottom:1px solid var(--gx-border)!important; border-radius:0!important;text-align:left;font:inherit;cursor:pointer; } .gx-verify-choice.is-selected{background:var(--gx-surface-2)!important} .gx-verify-choice--confirm{color:var(--gx-status-confirmed)!important} .gx-verify-choice--dispute{color:var(--gx-status-disputed)!important} .gx-verify-withdraw{ display:flex;align-items:center;justify-content:center;gap:7px;width:calc(100% - 32px); min-height:44px;margin:12px 16px 2px;border:1px solid var(--gx-border);border-radius:12px; color:var(--gx-text-2);background:transparent;font:700 12px/1 inherit;cursor:pointer; } /* Home: compact chrome, three canonical destinations, content first. */ .gx-feed-header{padding:6px var(--gx-gutter) 0!important;background:color-mix(in srgb,var(--gx-surface) 96%,transparent)!important} .gx-feed-header .feed-topbar{min-height:50px;padding-bottom:4px!important} .gx-feed-header .feed-tabs{ display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important; margin:0 calc(var(--gx-gutter) * -1)!important;padding:0 var(--gx-gutter)!important; gap:0!important;border-bottom:1px solid var(--gx-border)!important; } .gx-feed-header .feed-tab{ position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important; min-height:44px!important;padding:0 5px!important;border:0!important;border-radius:0!important; color:var(--gx-text-3)!important;background:transparent!important;font-size:12.5px!important;font-weight:700!important; } .gx-feed-header .feed-tab.active{color:var(--gx-text)!important} .gx-feed-header .feed-tab.active::after{content:'';position:absolute;left:16%;right:16%;bottom:-1px;height:2px;border-radius:2px;background:var(--gx-grad)} .gx-feed-screen .gx-stories{padding:10px var(--gx-gutter) 4px!important;gap:12px!important;background:var(--gx-surface)!important} .gx-feed-screen .gx-story{width:52px!important} .gx-feed-screen .gx-story-ring{width:46px!important;height:46px!important} .gx-feed-screen .gx-story-nm{margin-top:4px!important;font-size:9.5px!important} .gx-feed-screen .composer-strip{min-height:56px!important;margin:8px var(--gx-gutter) 6px!important;border-radius:16px!important;box-shadow:none!important} .gx-feed-screen .gx-nearby-utility{display:flex!important;gap:8px!important;overflow-x:auto!important;padding:4px var(--gx-gutter) 8px!important;scrollbar-width:none} .gx-feed-screen .gx-nearby-utility::-webkit-scrollbar{display:none} .gx-feed-screen .gx-nearby-utility button{flex:0 0 auto!important;min-width:118px!important;padding:10px 11px!important;border-radius:13px!important;background:var(--gx-surface-2)!important;box-shadow:none!important} .gx-feed-screen .gx-nearby-utility button small{display:none!important} /* Circles read as living communities rather than directory records. */ .gx-communities-page .section-title{padding:22px var(--gx-gutter) 9px!important;color:var(--gx-text-3)!important;font-size:11px!important;font-weight:800!important;letter-spacing:.08em;text-transform:uppercase} .gx-communities-page .circle-list{display:grid;gap:9px;padding:0 var(--gx-gutter);background:transparent!important} .gx-circle-card{ min-height:74px!important; padding:13px 14px!important; border:1px solid var(--gx-border)!important; border-radius:16px!important; background:var(--gx-surface)!important; box-shadow:none!important; } .gx-circle-card:active{background:var(--gx-surface-2)!important;transform:scale(.995)} .gx-circle-card>div:first-child{box-shadow:0 0 0 5px var(--gx-surface-2)!important} .gx-circle-card[data-circle-type="verified"]>div:first-child{box-shadow:0 0 0 5px color-mix(in srgb,var(--gx-status-reports) 10%,var(--gx-surface))!important} .gx-circle-card[data-circle-type="private"]>div:first-child{box-shadow:0 0 0 5px color-mix(in srgb,var(--gx-purple) 10%,var(--gx-surface))!important} .gx-circle-card--suggested{margin:0 0 10px!important} .gx-circle-meta{margin-top:3px;color:var(--gx-text-3);font-size:11.5px;line-height:1.35} .gx-circle-topics{display:flex;gap:5px;margin-top:7px} .gx-circle-topics span{padding:4px 7px;border-radius:999px;color:var(--gx-text-2);background:var(--gx-surface-2);font-size:9.5px;font-weight:700;text-transform:capitalize} /* Composer: identity, destination and content are the three visible decisions. */ .gx-compose-header{min-height:56px!important;padding:6px var(--gx-gutter)!important} .gx-compose-header #compose-publish{min-height:38px!important} .gx-compose-header #compose-publish:disabled{opacity:.42!important;cursor:not-allowed;box-shadow:none!important} .gx-compose-meta{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;padding:12px var(--gx-gutter) 5px!important} .gx-compose-meta>div[role="button"]{min-width:0!important;min-height:48px!important;padding:8px 10px!important;border:1px solid var(--gx-border)!important;border-radius:13px!important;background:var(--gx-surface-2)!important;overflow:hidden} .gx-compose-meta>div[role="button"]>span:not(.gx-compose-decision-label){overflow:hidden;text-overflow:ellipsis} .gx-compose-decision-label{display:block!important;color:var(--gx-text-3)!important;font-size:9px!important;font-weight:800!important;letter-spacing:.07em!important;text-transform:uppercase!important} .gx-compose-content-label{display:flex;align-items:baseline;gap:7px;padding:13px var(--gx-gutter) 0;color:var(--gx-text)} .gx-compose-content-label strong{font-size:13px}.gx-compose-content-label span{color:var(--gx-text-3);font-size:11px} .gx-compose-primary-types{scrollbar-width:none}.gx-compose-primary-types::-webkit-scrollbar{display:none} .gx-compose-body textarea{font-size:18px!important;line-height:1.55!important} .gx-compose-footer{z-index:8;box-shadow:0 -8px 22px color-mix(in srgb,var(--gx-bg) 60%,transparent)} @media(max-width:370px){.gx-compose-meta{grid-template-columns:1fr!important}} /* Feed hierarchy: context, content, credibility, then primary engagement. */ .gx-post-premium .gx-post-context{margin:8px 0 0!important} .gx-post-premium .gx-post-context .type-chip{ min-height:22px!important; padding:2px 0!important; border:0!important; color:var(--gx-text-3)!important; background:transparent!important; font-size:10.5px!important; font-weight:750!important; } .gx-post-premium .gx-post-context .type-chip+.type-chip{margin-left:10px} .gx-post-premium:not(.gx-post-photo) .gx-post-text{ max-width:64ch; margin-top:10px!important; color:var(--gx-text)!important; font-size:16px!important; font-weight:500!important; line-height:1.58!important; letter-spacing:-.012em; } .gx-post-premium .gx-post-actions .gx-post-action:not(.gx-buzz-pill):not(.gx-replies-btn):not(.gx-post-action--know){display:none!important} .gx-post-premium .gx-post-actions .gx-post-action{min-width:44px!important;min-height:44px!important} .gx-post-premium .post-tags .post-tag,.gx-post-premium .gx-post-tags .tag-pill{display:inline-flex;align-items:center;min-height:44px!important} .gx-post-photo .gx-photo-scrim .gx-photo-act:nth-of-type(3), .gx-post-photo .gx-photo-act--save{display:none!important} .gx-post-premium .gx-credibility{margin-top:12px} /* Shared secondary screens: familiar rows and restrained depth. */ .gx-top-level-header,.gx-page-header,.gx-settings-header,.gx-detail-header{min-height:56px!important;padding:6px var(--gx-gutter)!important} .gx-top-level-header>div>strong{font-size:20px!important;letter-spacing:-.03em} .gx-top-level-header>div>small{color:var(--gx-text-3)!important} .gx-messages-page{padding:8px var(--gx-gutter) 104px!important;background:var(--gx-bg)!important} .conversation-item{min-height:74px!important;padding:11px 12px!important;border:0!important;border-bottom:1px solid var(--gx-border)!important;background:var(--gx-surface)!important} .conversation-item:first-child{border-radius:16px 16px 0 0!important} .conversation-item:last-child{border-bottom:0!important;border-radius:0 0 16px 16px!important} .notif-item{min-height:68px!important;padding:12px var(--gx-gutter)!important;border-color:var(--gx-border)!important;background:var(--gx-surface)!important} .notif-item.unread{background:color-mix(in srgb,var(--gx-status-reports) 6%,var(--gx-surface))!important} .search-input-wrap{min-height:46px!important;border:1px solid var(--gx-border)!important;border-radius:14px!important;background:var(--gx-surface-2)!important} .search-result-user,.search-result-post{min-height:64px!important;padding:10px var(--gx-gutter)!important;border-color:var(--gx-border)!important;background:var(--gx-surface)!important} .gx-profile-head,.gx-profile-body{background:var(--gx-surface)!important} .gx-profile-cover:not(.gx-profile-cover--photo){box-shadow:inset 0 -1px 0 var(--gx-border)!important} .gx-profile-screen .feed-tabs{border-top:1px solid var(--gx-border)!important;border-bottom:1px solid var(--gx-border)!important} .gx-settings-page{padding:10px var(--gx-gutter) 36px!important;background:var(--gx-bg)!important} .gx-settings-list{gap:0!important} .gx-settings-section{margin:0!important;padding:24px 4px 9px!important;color:var(--gx-text-3)!important;font-size:10.5px!important;font-weight:800!important;letter-spacing:.09em!important;text-transform:uppercase} .gx-settings-list>:is(div,a):not(.gx-settings-section){margin:0!important;border-radius:0!important;border-color:var(--gx-border)!important;border-bottom:0!important;background:var(--gx-surface)!important} .gx-settings-list>.gx-settings-section+:is(div,a){border-radius:15px 15px 0 0!important} .gx-settings-list>:is(div,a):not(.gx-settings-section):has(+.gx-settings-section){border-bottom:1px solid var(--gx-border)!important;border-radius:0 0 15px 15px!important} .gx-settings-list>:is(div,a):not(.gx-settings-section):last-of-type{border-bottom:1px solid var(--gx-border)!important;border-radius:0 0 15px 15px!important} .gx-settings-list>.gx-settings-section:first-of-type{padding-top:14px!important} .gx-settings-list>:first-child:not(.gx-settings-section){border-radius:15px 15px 0 0!important} .empty-state{min-height:220px;padding:38px 24px!important;color:var(--gx-text-3)!important;background:transparent!important} .empty-state .emoji{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:var(--gx-surface-2);font-size:24px!important} .gx-offline-banner{min-height:34px;padding:8px var(--gx-gutter)!important;color:var(--gx-text-2)!important;background:var(--gx-surface-2)!important;border-bottom:1px solid var(--gx-border)!important;font-size:11.5px!important;font-weight:700!important;text-align:center} :root:not([data-theme="light"]) .sheet{background:var(--gx-surface)!important;box-shadow:0 -22px 60px rgba(0,0,0,.62)!important} body.gx-sheet-open{overflow:hidden!important;touch-action:none} body.gx-sheet-open .sheet{touch-action:pan-y} .sheet.gx-action-sheet{display:flex;flex-direction:column;overflow:hidden!important} .sheet.gx-action-sheet>.gx-action-list:last-child,.sheet.gx-action-sheet>.gx-action-grid+.gx-action-list{min-height:0;overflow-y:auto;overscroll-behavior:contain} .sheet .gx-action-head{position:sticky;top:0;z-index:3;background:var(--gx-surface)} .sheet-backdrop{overscroll-behavior:none} .gx-auth-error{display:flex;align-items:flex-start;gap:8px;margin:4px 0 10px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--gx-status-disputed) 35%,var(--gx-border));border-radius:12px;color:var(--gx-status-disputed);background:color-mix(in srgb,var(--gx-status-disputed) 7%,var(--gx-surface));font-size:12px;line-height:1.4} .gx-auth-error svg{flex:0 0 auto;margin-top:1px} :root:not([data-theme="light"]) .gx-profile-cover:not(.gx-profile-cover--photo){background:var(--gx-surface-2)!important} body.ghost-on .gx-profile-cover:not(.gx-profile-cover--photo){background:linear-gradient(135deg,#281650,#47248A 56%,#1C3B78)!important} @media(max-width:430px){:root{--gx-gutter:16px}} @media(prefers-reduced-motion:reduce){ .gx-icon-btn,.gx-row,.gx-state-chip{transition:none!important} }