/* FunBoard groups: a full-screen panel over the feed. Same dark palette as the app (Solana purple/green, FunBoard amber). */ html.fbg-open, html.fbg-open body { overflow: hidden; } #fbg { position: fixed; inset: 0; z-index: 500; display: none; background: #0a0a0a; color: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-text-size-adjust: 100%; } #fbg.on { display: block; } #fbg *, .fbg-modal, .fbg-modal *, .fbg-toasts, .fbg-toasts * { box-sizing: border-box; } #fbg h1, #fbg h2, #fbg h3, #fbg p, .fbg-modal h2, .fbg-modal h3, .fbg-modal p { margin: 0; } /* Modals and toasts are mounted on , outside #fbg, so they need their own text colour and font. */ .fbg-modal, .fbg-toasts { color: #fff; font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-text-size-adjust: 100%; } .fbg-wrap { max-width: 720px; margin: 0 auto; padding: 14px 14px 90px; min-height: 100%; } .fbg-top { display: flex; align-items: center; gap: 10px; padding: 4px 0 14px; border-bottom: 1px solid #1e1e1e; margin-bottom: 14px; } .fbg-top h1 { font-size: 20px; font-weight: 800; flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.2; } .fbg-back { flex: none; width: 38px; height: 38px; border-radius: 999px; border: 1px solid #1e1e1e; background: #141414; color: #eeeeee; font: inherit; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .fbg-back:hover { border-color: #9945ff; } .fbg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid #2a2a2a; background: #1a1a1a; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; } .fbg-btn:hover { border-color: #9945ff; } .fbg-btn:disabled { opacity: 0.5; cursor: not-allowed; } .fbg-btn:focus-visible, .fbg-back:focus-visible, .fbg-tab:focus-visible, .fbg-act:focus-visible, .fbg-input:focus-visible, .fbg-card:focus-visible { outline: 2px solid #00ff88; outline-offset: 2px; } .fbg-btn.primary { background: #ffb020; border-color: #ffb020; color: #000; font-weight: 800; } .fbg-btn.primary:hover { opacity: 0.92; border-color: #ffb020; } .fbg-btn.danger { border-color: rgba(255, 85, 85, 0.45); color: #ff8a8a; } .fbg-btn.danger:hover { background: rgba(255, 85, 85, 0.12); border-color: #ff5555; } .fbg-btn.sm { min-height: 28px; padding: 3px 10px; font-size: 12px; } .fbg-btn.wide { width: 100%; min-height: 44px; border-radius: 14px; } .fbg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .fbg-tab { flex: none; padding: 8px 16px; border-radius: 999px; border: 1px solid #1e1e1e; background: #141414; color: #aaaaaa; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .fbg-tab.on { background: linear-gradient(180deg, #ffd064, #ffb020); color: #0a0a0a; border-color: transparent; } .fbg-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .fbg-input, .fbg-textarea { width: 100%; min-width: 0; padding: 0 12px; border-radius: 12px; border: 1px solid #1e1e1e; background: #141414; color: #fff; font: inherit; font-size: 14px; outline: none; } .fbg-input { height: 42px; } .fbg-row .fbg-input { width: auto; flex: 1 1 180px; } .fbg-textarea { padding: 10px 12px; min-height: 84px; resize: vertical; line-height: 1.45; } .fbg-input:focus, .fbg-textarea:focus { border-color: #9945ff; } .fbg-label { display: block; font-size: 12px; font-weight: 700; color: #aaaaaa; margin: 12px 0 6px; } .fbg-hint { font-size: 12px; color: #888888; line-height: 1.45; margin-top: 6px; } .fbg-err { color: #ff8a8a; background: rgba(255, 85, 85, 0.08); border: 1px solid rgba(255, 85, 85, 0.25); border-radius: 10px; padding: 8px 10px; font-size: 12px; margin-top: 10px; line-height: 1.4; } .fbg-card { display: block; width: 100%; text-align: left; background: #141414; border: 1px solid #1e1e1e; border-radius: 18px; padding: 14px; margin-bottom: 10px; color: inherit; font: inherit; } .fbg-card.click { cursor: pointer; } .fbg-card.click:hover { border-color: rgba(192, 74, 142, 0.5); } .fbg-card h3 { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; } .fbg-card p { font-size: 13px; color: #aaaaaa; line-height: 1.45; margin-top: 6px; overflow-wrap: anywhere; } .fbg-meta { font-size: 12px; color: #888888; margin-top: 8px; } .fbg-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .fbg-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #1e1e1e; color: #aaaaaa; } .fbg-badge.purple { background: rgba(192, 74, 142, 0.2); color: #e9a8cf; } .fbg-badge.green { background: rgba(61, 245, 165, 0.14); color: #00ff88; } .fbg-badge.amber { background: rgba(227, 176, 75, 0.16); color: #ffb020; } .fbg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .fbg-empty { text-align: center; color: #888888; padding: 34px 12px; font-size: 14px; line-height: 1.5; } .fbg-empty b { display: block; color: #eeeeee; font-size: 16px; margin-bottom: 4px; } .fbg-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .fbg-desc { font-size: 14px; color: #aaaaaa; line-height: 1.5; margin: 0 0 12px; overflow-wrap: anywhere; white-space: pre-wrap; } .fbg-composer { background: #141414; border: 1px solid #1e1e1e; border-radius: 18px; padding: 12px; margin-bottom: 14px; } .fbg-composer .fbg-textarea { min-height: 64px; border: 0; background: transparent; padding: 4px; } .fbg-composer-foot { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-top: 6px; } .fbg-count { font-size: 11px; color: #666666; } .fbg-preview { position: relative; display: inline-block; margin: 6px 0; } .fbg-preview img { display: block; max-width: 100%; max-height: 160px; border-radius: 12px; border: 1px solid #1e1e1e; } .fbg-preview button { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, 0.75); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; } .fbg-post { background: #141414; border: 1px solid #1e1e1e; border-radius: 18px; padding: 14px; margin-bottom: 10px; } .fbg-post-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .fbg-author { font-weight: 800; font-size: 14px; overflow-wrap: anywhere; } .fbg-time { font-size: 11px; color: #666666; } .fbg-text { font-size: 14px; line-height: 1.5; margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; } .fbg-img { display: block; max-width: 100%; max-height: 380px; border-radius: 14px; margin-top: 10px; border: 1px solid #1e1e1e; } .fbg-postbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .fbg-act { border: 1px solid transparent; background: transparent; color: #888888; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 10px; border-radius: 999px; } .fbg-act:hover { background: #1a1a1a; color: #fff; } .fbg-act.on { color: #ff6b9d; } .fbg-act.del { margin-left: auto; color: #ff8a8a; } .fbg-comments { margin-top: 8px; border-top: 1px solid #1e1e1e; padding-top: 6px; } .fbg-comment { padding: 8px 0; border-bottom: 1px solid #1a1a1a; } .fbg-comment:last-of-type { border-bottom: 0; } .fbg-comment .fbg-text { margin-top: 2px; font-size: 13px; } .fbg-comment .fbg-postbar { margin-top: 2px; } .fbg-more { display: block; margin: 8px auto 0; } .fbg-member { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 0; border-bottom: 1px solid #1e1e1e; } .fbg-member:last-child { border-bottom: 0; } .fbg-member .who { flex: 1 1 150px; min-width: 0; } .fbg-member .name { font-weight: 800; font-size: 14px; overflow-wrap: anywhere; } .fbg-member .wal { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: #666666; overflow-wrap: anywhere; } .fbg-modal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 12px; } .fbg-modal-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); } .fbg-modal-card { position: relative; width: 100%; max-width: 440px; max-height: 94vh; overflow-y: auto; background: #141414; border: 1px solid #2a2a2a; border-radius: 22px; padding: 20px 18px; } .fbg-modal-card h2 { font-size: 18px; font-weight: 800; margin-bottom: 10px; } .fbg-modal-card p.lead { font-size: 14px; color: #aaaaaa; line-height: 1.5; margin-bottom: 10px; overflow-wrap: anywhere; } .fbg-modal-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; } .fbg-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: #eeeeee; margin-top: 12px; line-height: 1.4; } .fbg-check input { margin-top: 2px; } .fbg-choice { display: flex; gap: 8px; } .fbg-choice label { flex: 1; border: 1px solid #1e1e1e; background: #0f0f0f; border-radius: 14px; padding: 10px; cursor: pointer; font-size: 13px; line-height: 1.35; } .fbg-choice label b { display: block; font-size: 14px; margin-bottom: 2px; } .fbg-choice input { position: absolute; opacity: 0; pointer-events: none; } .fbg-choice label.on { border-color: #9945ff; background: rgba(192, 74, 142, 0.1); } .fbg-choice label:focus-within { outline: 2px solid #00ff88; outline-offset: 2px; } .fbg-fee { background: #0a0a0a; border: 1px solid #1e1e1e; border-radius: 16px; padding: 12px; margin: 12px 0; text-align: center; } .fbg-fee b { display: block; font-size: 24px; color: #ffb020; font-weight: 800; } .fbg-fee span { font-size: 12px; color: #888888; } .fbg-qr { width: 168px; height: 168px; margin: 10px auto; background: #fff; border-radius: 14px; padding: 8px; } .fbg-qr svg { width: 100%; height: 100%; display: block; } .fbg-or { text-align: center; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #666666; margin: 8px 0; } .fbg-status { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: #cccccc; margin: 8px 0; text-align: center; } .fbg-mono { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: #00ff88; overflow-wrap: anywhere; } .fbg-copy { display: flex; gap: 8px; align-items: center; } .fbg-copy .fbg-input { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 12px; } .fbg-spin { flex: none; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.15); border-top-color: #ffb020; border-radius: 50%; animation: fbgspin 0.8s linear infinite; } @keyframes fbgspin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .fbg-spin { animation-duration: 2.4s; } } .fbg-toasts { position: fixed; left: 0; right: 0; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 700; pointer-events: none; padding: 0 14px; } .fbg-toast { background: #1f2a22; border: 1px solid #00ff88; color: #d7ffe9; padding: 10px 14px; border-radius: 12px; font-size: 13px; max-width: 100%; } .fbg-toast.bad { background: #2a1a1a; border-color: #ff5555; color: #ffd0d0; } @media (max-width: 420px) { .fbg-wrap { padding: 12px 12px 90px; } .fbg-choice { flex-direction: column; } } /* ---- unread badges and the Activity tab ---- */ .fbg-badge.pink { background: rgba(255, 90, 122, 0.18); color: #ff8fa8; } .fbg-count-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: #ff5a7a; color: #fff; font-size: 11px; font-weight: 800; } .fbg-tab.on .fbg-count-dot { background: #000; color: #00ff88; } .fbg-note { padding: 12px 14px; } .fbg-note.unread { border-color: rgba(255, 90, 122, 0.45); background: #1a1418; } .fbg-note-text { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } /* the badge on the site's own Groups button (sidebar) and phone bar; both live outside #fbg */ .fbg-navdot { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 8px; border-radius: 999px; background: #ff5a7a; color: #fff; font: 800 11px/1 system-ui, sans-serif; box-sizing: border-box; pointer-events: none; } button[aria-label="groups"] { position: relative; } .fbg-navdot.mob { position: absolute; top: 2px; left: 55%; margin: 0; } /* photo expiry */ .fbg-countdown { font-size: 11px; color: #888888; margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .fbg-countdown.soon { color: #ffb020; } .fbg-expired { margin-top: 10px; padding: 22px 12px; border: 1px dashed #2a2a2a; border-radius: 14px; background: #141414; color: #666666; font-size: 12px; text-align: center; } .fbg-comment .fbg-expired { padding: 12px; } .fbg-notice { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: rgba(227, 176, 75, 0.08); border: 1px solid rgba(227, 176, 75, 0.25); color: #ffb020; font-size: 12px; line-height: 1.4; } .fbg-hint a { color: #00ff88; }