/* ══════════════════════════════════════════════════════════════════════ Community Forum — ForumModule styles ══════════════════════════════════════════════════════════════════════ */ /* ── Forum brand blue — single source of truth ───────────────────────── Scoped to the forum mount roots so it never collides with the app's global --ne-primary (#1a73e8, a different blue). Every forum blue below reads these via var(--forum-*, ); the hex fallback keeps portaled sheets (compose / type-picker are appended to , outside the root) rendering the exact same colour. Retint the whole forum from here. */ #forum-root, #forum-tab-root { --forum-primary: #1e40af; /* blue-800 — dominant brand blue */ --forum-primary-active: #1d4ed8; /* blue-700 — active/voted/submit */ --forum-primary-accent: #2563eb; /* blue-600 — chip borders/accents */ --forum-primary-deep: #1e3a8a; /* blue-900 — pressed state */ --forum-accent: #3b82f6; /* blue-500 — focus/hint/spinner */ --forum-accent-soft: #93c5fd; /* blue-300 — light borders */ } /* ── Feed container ─────────────────────────────────────────────────── */ .forum-feed { position: relative; background: #F2F2F7; min-height: 100%; padding: 0 0 80px; } /* ── Toolbar (dropdown + farm chip row) ─────────────────────────────── */ .forum-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px; } .forum-toolbar__spacer { flex: 1; } .forum-toolbar-compose-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 20px; border: none; background: var(--forum-primary, #1e40af); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s, transform 0.1s; } .forum-toolbar-compose-btn:active { transform: scale(0.96); background: var(--forum-primary-deep, #1e3a8a); } /* ── Category chip row ──────────────────────────────────────────────── */ .forum-chip-row { display: flex; align-items: center; gap: 4px; padding: 0 16px; background: #F2F2F7; overflow: visible; } .forum-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: 1px solid rgba(0,0,0,0.08); border-radius: 20px; background: #fff; color: #374151; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.10); transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; flex-shrink: 0; } .forum-chip--active { background: #EBF3FF; border-color: var(--forum-primary-accent, #2563eb); color: var(--forum-primary-accent, #2563eb); font-weight: 600; box-shadow: none; } .forum-chip__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 100px; font-size: 12px; font-weight: 600; background: #E5E7EB; color: #6B7280; } .forum-chip--active .forum-chip__badge { background: var(--forum-primary-accent, #2563eb); color: #fff; } .forum-chip-row__spacer { flex: 1; } .forum-sort-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid rgba(0,0,0,0.08); border-radius: 20px; background: #fff; color: #374151; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.10); transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; flex-shrink: 0; } .forum-sort-chip--active { background: var(--forum-primary-accent, #2563eb); border-color: var(--forum-primary-accent, #2563eb); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(37,99,235,0.30); } .forum-sort-chip:not(.forum-sort-chip--active):hover { background: #F9FAFB; box-shadow: 0 1px 6px rgba(0,0,0,0.13); } /* ── Filter dropdown button + popup ────────────────────────────────── */ .forum-filter-dd { position: relative; flex-shrink: 0; } .forum-chip--filter { gap: 4px; } .forum-filter-dd__menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 160px; background: #fff; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.16); z-index: 400; padding: 6px; display: flex; flex-direction: column; gap: 2px; } .forum-filter-dd__item { display: flex; align-items: center; width: 100%; padding: 10px 14px; border: none; background: transparent; text-align: left; font-size: 14px; font-weight: 500; color: #1e293b; cursor: pointer; border-radius: 10px; transition: background 0.1s; gap: 8px; } .forum-filter-dd__item:hover { background: #f1f5f9; } .forum-filter-dd__item--active { background: #EBF3FF; color: var(--forum-primary-accent, #2563eb); font-weight: 600; } .forum-posts { padding-top: 10px; } .forum-farm-chip-row { padding: 0 16px 8px; } /* ── Filter dropdown ────────────────────────────────────────────────── */ .forum-filter-dropdown { position: relative; } .forum-filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--forum-primary, #1e40af); background: var(--forum-primary, #1e40af); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .forum-filter-btn__arrow { transition: transform 0.2s ease; flex-shrink: 0; } .forum-filter-btn--open .forum-filter-btn__arrow { transform: rotate(180deg); } .forum-filter-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 160px; background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.14); z-index: 400; padding: 6px; display: flex; flex-direction: column; gap: 2px; } .forum-filter-menu__item { display: block; width: 100%; padding: 10px 14px; border: none; background: transparent; text-align: left; font-size: 14px; color: #1e293b; cursor: pointer; border-radius: 10px; font-weight: 500; transition: background 0.1s; } .forum-filter-menu__item:hover { background: #f1f5f9; } .forum-filter-menu__item--active { background: #dbeafe; color: var(--forum-primary, #1e40af); font-weight: 700; } /* ── Tab bar (legacy, kept for compatibility) ───────────────────────── */ .forum-tabs { display: flex; gap: 6px; padding: 12px 16px 8px; overflow-x: auto; scrollbar-width: none; } .forum-tabs::-webkit-scrollbar { display: none; } .forum-tab { flex-shrink: 0; padding: 6px 14px; border-radius: 20px; border: 1.5px solid #d1d5db; background: #fff; color: #64748b; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; } .forum-tab--active, .forum-tab:hover { background: var(--forum-primary, #1e40af); border-color: var(--forum-primary, #1e40af); color: #fff; } /* ── Farm filter chip ───────────────────────────────────────────────── */ .forum-farm-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 16px 8px; padding: 5px 10px; background: #dbeafe; border-radius: 20px; font-size: 13px; color: var(--forum-primary, #1e40af); } .forum-farm-chip__clear { background: none; border: none; cursor: pointer; color: var(--forum-primary, #1e40af); font-size: 14px; line-height: 1; padding: 0; } /* ── Post card ──────────────────────────────────────────────────────── */ .forum-card { margin: 0 12px 10px; padding: 14px 16px 12px; background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.04); cursor: pointer; transition: box-shadow 0.15s, transform 0.1s; border: 1px solid rgba(0,0,0,.05); } .forum-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); } .forum-card:active { transform: scale(0.99); } .forum-card--detail { cursor: default; } .forum-card--detail:active { transform: none; } .forum-card__header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .forum-card__rating-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 12px; font-size: 13px; font-weight: 700; border-width: 1px; border-style: solid; flex-shrink: 0; } .forum-card__rating-pill.green { background: #e6f4ea; color: #137333; border-color: #ceead6; } .forum-card__rating-pill.orange { background: #fef7e0; color: #b06000; border-color: #fde68a; } .forum-card__rating-pill.red { background: #fce8e6; color: #c5221f; border-color: #f9ab9d; } .forum-card__rating-pill.grey { background: #f0f4f9; color: #5f6368; border-color: #dadce0; } /* Meta row — badge + farm */ .forum-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .forum-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: 0.02em; } .forum-badge--review { background: #fff8e1; color: #b45309; } .forum-badge--question { background: #e0f2fe; color: #0369a1; } .forum-badge--free { background: #f0fdf4; color: #15803d; } .forum-badge--topic-visas { background: #ede9fe; color: #6d28d9; } .forum-badge--topic-housemate { background: #fce7f3; color: #9d174d; } .forum-badge--topic-money { background: #ecfdf5; color: #065f46; } .forum-badge--topic-general { background: #f0f9ff; color: #0c4a6e; } .forum-farm-label { font-size: 12px; font-weight: 600; color: #6b7280; display: flex; align-items: center; gap: 3px; } /* Star rating */ .forum-card__rating { font-size: 14px; color: #f59e0b; margin-bottom: 6px; letter-spacing: 1px; } .forum-card__rating--lg { font-size: 18px; margin-bottom: 10px; } /* Body */ .forum-card__body { font-size: 14px; line-height: 1.55; color: #1e293b; margin: 0 0 12px; word-break: break-word; } .forum-card__body--full { font-size: 15px; margin-bottom: 14px; } /* Crop tags (culture info) */ .forum-crop-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; margin-top: 6px; } .forum-crop-tag { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 1; } .forum-crop-tag--operator { background: #eff6ff; color: var(--forum-primary, #1e40af); border-color: #bfdbfe; } .forum-crop-more { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 5px 8px; background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; border-radius: 12px; font-size: 11px; font-weight: 700; line-height: 1; } /* Footer */ .forum-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid #f1f5f9; } .forum-card__author-time { font-size: 12px; color: #94a3b8; display: flex; align-items: center; gap: 5px; min-width: 0; } /* Tappable author name → opens the public mini-profile (ProfileModule). */ .forum-author-link { color: var(--forum-primary-active, #1d4ed8); cursor: pointer; font-weight: inherit; } .forum-author-link:hover { text-decoration: underline; } .forum-card__author-dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; } .forum-card__time { color: #94a3b8; } .forum-card__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .forum-card__replies { font-size: 12px; color: #94a3b8; font-weight: 500; } /* Telegram-style Comment Bar at bottom of card */ .forum-card__comment-bar { display: flex; align-items: center; gap: 10px; background: #f8fafc; border-radius: 12px; padding: 10px 14px; margin-top: 12px; border: 1px solid #f1f5f9; transition: background 0.15s, border-color 0.15s; } .forum-card__comment-bar:hover { background: #f1f5f9; border-color: #e2e8f0; } .forum-card__comment-avatars { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #dbeafe; color: var(--forum-primary, #1e40af); font-size: 13px; flex-shrink: 0; } .forum-card__comment-text { font-size: 13px; font-weight: 600; color: var(--forum-primary, #1e40af); flex: 1; } .forum-card__comment-arrow { color: #94a3b8; transition: transform 0.15s; } .forum-card__comment-bar:hover .forum-card__comment-arrow { transform: translateX(3px); color: var(--forum-primary, #1e40af); } /* ── Buttons ────────────────────────────────────────────────────────── */ .forum-btn-like, .forum-btn-report { padding: 5px 10px; border-radius: 20px; border: 1.5px solid #e5e7eb; background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 3px; } .forum-btn-like--sm { padding: 3px 8px; font-size: 11px; border: none; background: transparent; color: #94a3b8; } .forum-btn-like--sm:hover { color: #e11d48; } .forum-btn-like--active { background: #fff1f2; border-color: #fda4af; color: #e11d48; } /* Active state for small like button in replies */ .forum-btn-like--sm.forum-btn-like--active { background: transparent; border: none; color: #e11d48; } .forum-btn-report { padding: 5px 11px; color: #ef4444; border: 1.5px solid #e5e7eb; background: #fff; } .forum-btn-report:hover { border-color: #fca5a5; background: #fff5f5; } .forum-btn-report--done { opacity: 0.4; } .forum-btn-like:disabled, .forum-btn-report:disabled { opacity: 0.5; cursor: default; } /* ── FAB (create post) ──────────────────────────────────────────────── */ .forum-fab { position: fixed; bottom: 80px; right: 20px; width: 52px; height: 52px; border-radius: 50%; background: var(--forum-primary-accent, #2563eb); color: #fff; font-size: 22px; border: none; box-shadow: 0 4px 14px rgba(37,99,235,.42); cursor: pointer; z-index: 100; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, box-shadow 0.15s; } .forum-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(37,99,235,.5); } .forum-fab:active { transform: scale(0.95); } /* ── Compose type picker menu (legacy floating — kept for fallback) ─── */ .forum-compose-type-menu { position: fixed; bottom: 140px; right: 16px; background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.14); z-index: 200; padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 190px; } .forum-compose-type-menu button { padding: 10px 14px; border: none; background: transparent; text-align: left; font-size: 14px; cursor: pointer; border-radius: 8px; transition: background 0.1s; } .forum-compose-type-menu button:hover { background: #f1f5f9; } /* ── Type picker bottom sheet ───────────────────────────────────────── */ /* ── TypePickerSheet overlay ─────────────────────────────────────────── */ .forum-type-picker-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 500; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn 0.18s ease-out; } /* Mobile: bottom sheet */ .forum-type-picker-sheet { width: 100%; max-width: 480px; background: #fff; border-radius: 24px 24px 0 0; padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 24px); box-sizing: border-box; animation: slideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; gap: 6px; box-shadow: 0 -8px 40px rgba(15,23,42,.12); } /* Desktop: centered dialog */ @media (min-width: 600px) { .forum-type-picker-overlay { align-items: center; } .forum-type-picker-sheet { max-width: 400px; border-radius: 24px; padding: 24px 20px 20px; animation: scaleIn 0.22s cubic-bezier(0.22, 1, 0.36, 1); margin-bottom: 0; } .forum-type-picker__handle { display: none; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .forum-type-picker__handle { width: 40px; height: 4px; background: #e2e8f0; border-radius: 2px; margin: 4px auto 14px; flex-shrink: 0; } .forum-type-picker__title { font-size: 18px; font-weight: 700; color: #0f172a; margin: 0 0 12px 4px; letter-spacing: -0.3px; } .forum-type-picker__options { display: flex; flex-direction: column; gap: 8px; } .forum-type-picker__btn { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 0 12px; padding: 12px 14px 12px 12px; border: 1px solid rgba(15,23,42,.06); border-radius: 16px; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.06), 0 0 0 0 transparent; cursor: pointer; text-align: left; transition: box-shadow 0.18s, background 0.15s, transform 0.12s; width: 100%; } .forum-type-picker__btn:hover { box-shadow: 0 4px 16px rgba(15,23,42,.10); background: #fafbff; border-color: rgba(15,23,42,.08); } .forum-type-picker__btn:active { transform: scale(0.98); box-shadow: 0 1px 4px rgba(15,23,42,.06); } /* per-type accent colours — pastel, not saturated */ .forum-type-picker__btn[data-compose-type="free"] { --tp-bg: #fef9ee; } .forum-type-picker__btn[data-compose-type="tip"] { --tp-bg: #f0fdf5; } .forum-type-picker__btn[data-compose-type="question"] { --tp-bg: #fff5f5; } .forum-type-picker__btn[data-compose-type="review"] { --tp-bg: #fefce8; } .forum-type-picker__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--tp-bg, #f8fafc); box-shadow: inset 0 0 0 1px rgba(15,23,42,.05); display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; flex-shrink: 0; } .forum-type-picker__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .forum-type-picker__label { font-size: 15px; font-weight: 600; color: #1e293b; } .forum-type-picker__hint { font-size: 12px; color: #94a3b8; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .forum-type-picker__arrow { font-size: 18px; color: #cbd5e1; flex-shrink: 0; } .forum-type-picker__cancel { margin-top: 4px; width: 100%; padding: 13px; border: none; border-radius: 14px; background: #f1f5f9; font-size: 14px; font-weight: 600; color: #64748b; cursor: pointer; transition: background 0.15s; } .forum-type-picker__cancel:hover { background: #e2e8f0; } /* ── Compose overlay ────────────────────────────────────────────────── */ .forum-compose-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 300; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn 0.18s ease-out; } .forum-compose-sheet { width: 100%; max-width: 480px; background: #fff; border-radius: 24px 24px 0 0; padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 16px); max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; box-shadow: 0 -8px 40px rgba(15,23,42,.12); animation: slideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1); } @media (min-width: 600px) { .forum-compose-overlay { align-items: center; } .forum-compose-sheet { max-width: 440px; border-radius: 24px; max-height: 90vh; animation: scaleIn 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .forum-compose__handle { display: none; } } /* handle */ .forum-compose__handle { width: 40px; height: 4px; background: #e2e8f0; border-radius: 2px; margin: 10px auto 0; flex-shrink: 0; } /* header: icon + title + close */ .forum-compose__header { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid rgba(15,23,42,.06); } .forum-compose__header-icon { font-size: 26px; line-height: 1; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #f8fafc; } .forum-compose-sheet--free .forum-compose__header-icon { background: #fef9ee; } .forum-compose-sheet--tip .forum-compose__header-icon { background: #f0fdf5; } .forum-compose-sheet--question .forum-compose__header-icon { background: #fff5f5; } .forum-compose-sheet--review .forum-compose__header-icon { background: #fefce8; } .forum-compose__title { font-size: 17px; font-weight: 700; color: #0f172a; margin: 0; flex: 1; letter-spacing: -0.3px; } .forum-compose__close { width: 32px; height: 32px; border-radius: 50%; border: none; background: #f1f5f9; color: #64748b; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; } .forum-compose__close:hover { background: #e2e8f0; } .forum-compose__close .material-symbols-outlined { font-size: 18px; } /* fields area */ .forum-compose__fields { padding: 16px 16px 4px; display: flex; flex-direction: column; gap: 10px; } .forum-compose__farm, .forum-compose__custom-farm, .forum-compose__topic, .forum-compose__post-title { width: 100%; padding: 11px 14px; border: 1px solid rgba(15,23,42,.1); border-radius: 12px; font-size: 14px; background: #f8fafc; color: #1e293b; box-shadow: 0 1px 3px rgba(15,23,42,.05); transition: border-color 0.15s, box-shadow 0.15s; appearance: auto; box-sizing: border-box; margin: 0; } .forum-compose__farm:focus, .forum-compose__custom-farm:focus, .forum-compose__topic:focus, .forum-compose__post-title:focus { outline: none; border-color: var(--forum-accent-soft, #93c5fd); box-shadow: 0 0 0 3px rgba(147,197,253,.25); background: #fff; } /* Farm row: select + custom name input side by side */ .forum-compose__farm-row { display: flex; gap: 8px; align-items: center; } .forum-compose__farm-row .forum-compose__farm { flex: 1; width: auto; min-width: 0; } .forum-compose__farm-row .forum-compose__custom-farm { flex: 0 0 38%; width: auto; min-width: 0; } /* rating stars */ .forum-compose__rating { display: flex; gap: 4px; align-items: center; padding: 6px 2px; } .forum-star { font-size: 32px; background: none; border: none; cursor: pointer; color: #d1d5db; padding: 2px; line-height: 1; transition: color 0.12s, transform 0.1s; } .forum-star:hover, .forum-star--active { color: #f59e0b; } .forum-star:hover { transform: scale(1.15); } /* body textarea */ .forum-compose__body { width: 100%; min-height: 110px; padding: 11px 14px; border: 1px solid rgba(15,23,42,.1); border-radius: 12px; font-size: 14px; line-height: 1.55; resize: none; box-sizing: border-box; background: #f8fafc; color: #1e293b; font-family: inherit; box-shadow: 0 1px 3px rgba(15,23,42,.05); transition: border-color 0.15s, box-shadow 0.15s; } .forum-compose__body:focus { outline: none; border-color: var(--forum-accent-soft, #93c5fd); box-shadow: 0 0 0 3px rgba(147,197,253,.25); background: #fff; } .forum-compose__error { color: #dc2626; font-size: 13px; font-weight: 500; background: #fef2f2; border-radius: 8px; padding: 8px 12px; } .forum-compose__swv-hint { display: flex; align-items: flex-start; gap: 8px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--forum-primary, #1e40af); line-height: 1.4; } .forum-compose__swv-hint span { flex: 1; } .forum-compose__swv-hint-btns { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 8px; } .forum-compose__swv-hint-btn { display: block; width: 100%; padding: 7px 0; background: var(--forum-primary-active, #1d4ed8); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; } .forum-compose__swv-hint-btn:hover { background: var(--forum-primary, #1e40af); } .forum-compose__swv-hint-btn--secondary { background: #fff; color: var(--forum-primary-active, #1d4ed8); border: 1.5px solid var(--forum-primary-active, #1d4ed8); } .forum-compose__swv-hint-btn--secondary:hover { background: #eff6ff; } .forum-compose__swv-hint { flex-wrap: wrap; } /* actions — stacked: Submit on top, Cancel below */ .forum-compose__actions { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 4px; } .forum-compose__submit { width: 100%; padding: 13px; border-radius: 14px; border: none; background: var(--forum-primary, #1e40af); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: 0.1px; transition: background 0.15s, transform 0.1s, box-shadow 0.15s; box-shadow: 0 2px 10px rgba(30,64,175,.3); } .forum-compose__submit:hover { background: #1d3a9e; box-shadow: 0 4px 16px rgba(30,64,175,.4); } .forum-compose__submit:active { transform: scale(0.98); } .forum-compose__submit:disabled { background: var(--forum-accent-soft, #93c5fd); box-shadow: none; cursor: not-allowed; } .forum-compose__cancel { width: 100%; padding: 12px; border-radius: 14px; border: none; background: transparent; color: #64748b; font-size: 14px; font-weight: 600; cursor: pointer; transition: color 0.15s, background 0.15s; } .forum-compose__cancel:hover { background: #f1f5f9; color: #475569; } /* ── Post detail ────────────────────────────────────────────────────── */ .forum-detail { display: flex; flex-direction: column; padding-bottom: 80px; } .forum-detail__topbar { padding: 4px 8px 0; } .forum-back-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--forum-primary, #1e40af); font-size: 14px; font-weight: 600; cursor: pointer; padding: 10px 8px; } .forum-replies-header { font-size: 12px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 16px 4px; } .forum-replies { display: flex; flex-direction: column; gap: 0; padding: 0 12px; } .forum-replies-empty { text-align: center; padding: 24px 16px; color: #94a3b8; font-size: 13px; } .forum-reply { padding: 14px 16px; background: #fff; border-radius: 16px; margin-bottom: 10px; display: flex; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.05); } .forum-reply__avatar-container { flex-shrink: 0; } .forum-reply__avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; } .forum-reply__content { flex: 1; min-width: 0; } .forum-reply__header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; } .forum-reply__author { font-size: 12px; font-weight: 700; color: #475569; display: flex; align-items: center; gap: 5px; } .forum-reply__author-badge { display: inline-flex; align-items: center; padding: 2px 6px; background: #dcfce7; color: #166534; border-radius: 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } .forum-reply__time { font-size: 11px; color: #94a3b8; } .forum-reply__body { font-size: 14px; color: #1e293b; line-height: 1.5; margin: 0; word-break: break-word; } /* Reply compose bar */ .forum-reply-compose { position: fixed; bottom: 60px; /* above nav bar */ left: 0; width: 100%; background: #fff; border-top: 1px solid #e5e7eb; padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px); display: flex; gap: 8px; box-sizing: border-box; z-index: 90; box-shadow: 0 -2px 12px rgba(0,0,0,.06); } .forum-reply-textarea { flex: 1; padding: 9px 14px; border: 1.5px solid #e5e7eb; border-radius: 20px; font-size: 14px; font-family: inherit; resize: none; min-height: 40px; max-height: 120px; box-sizing: border-box; line-height: 1.4; } .forum-reply-textarea:focus { outline: none; border-color: var(--forum-primary, #1e40af); } .forum-reply-submit-btn { padding: 0 18px; height: 40px; border: none; border-radius: 20px; background: var(--forum-primary, #1e40af); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background 0.15s, transform 0.1s; flex-shrink: 0; } .forum-reply-submit-btn:active { transform: scale(0.96); } /* ── Forum FAB (compose button fixed bottom-right) ──────────────────── */ .wiki-forum-fab-row { position: fixed; right: 16px; bottom: 80px; z-index: 200; } /* ── Forum FAB portal (extended pill, fixed bottom-right) ───────────── */ .wiki-forum-fab-fixed { position: fixed; right: 16px; bottom: 80px; z-index: 200; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #3390ec; color: #fff; box-shadow: 0 4px 12px rgba(51,144,236,.40); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; } .wiki-forum-fab-fixed:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(51,144,236,.50); } .wiki-forum-fab-fixed:active { transform: scale(0.94); } .wiki-forum-fab-fixed .material-symbols-outlined { font-size: 22px; } /* Desktop (≥1024px): bottom nav is hidden and the [side nav + content] block is centred as one 1220px unit (see neural-expressive.css). Pin the FAB 16px inside the centred content column's right edge so it never floats in the gray margin. Content right edge = (50vw − 390px) + 1000px = 50vw + 610px, so the inset from the viewport's right edge is 100vw − (50vw + 610) + 16 = 50vw − 594px. max() keeps it at 16px once the viewport is narrower than the column. */ @media (min-width: 1024px) { .wiki-forum-fab-fixed { right: max(16px, calc(50vw - 594px)); bottom: 24px; } } .wiki-forum-fab-label { font-size: 13px; font-weight: 600; white-space: nowrap; } /* ── Read More Button ───────────────────────────────────────────────── */ .forum-read-more-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 16px; margin-top: 8px; border: none; background: transparent; color: #15803d; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 20px; transition: background 0.15s, transform 0.1s; } .forum-read-more-btn:hover { background: #f0fdf4; } .forum-read-more-btn:active { transform: scale(0.97); } .forum-read-more-btn--reply { margin-top: 6px; font-size: 13px; padding: 5px 14px; } /* Actions row: [Read more] → [Translate] */ .forum-body-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .forum-body-actions .forum-read-more-btn, .forum-body-actions .forum-translate-btn { margin-top: 0; } .forum-body-actions .forum-read-more-btn { margin-left: auto; padding: 0; color: #9CA3AF; font-size: 12px; font-weight: 500; border-radius: 0; transition: color 0.15s; } .forum-body-actions .forum-read-more-btn:hover { background: transparent; color: #6366f1; text-decoration: underline; transform: none; } /* Translate post body → user's language */ .forum-translate-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; margin-top: 4px; border: none; background: transparent; color: #9CA3AF; font-size: 12px; font-weight: 500; cursor: pointer; transition: color 0.15s; } .forum-translate-btn:hover { color: #6366f1; text-decoration: underline; } .forum-translate-btn:disabled { opacity: 0.6; cursor: default; } /* ── Formatted Text Styles ──────────────────────────────────────────── */ .forum-body-text { white-space: normal; word-break: break-word; line-height: 1.6; text-align: left; } .forum-body-link { color: #15803d; text-decoration: none; font-weight: 600; border-bottom: 1.5px solid #86efac; transition: border-color 0.15s, color 0.15s; } .forum-body-link:hover { color: #166534; border-bottom-color: #4ade80; } /* ── Loading & empty states ─────────────────────────────────────────── */ .forum-loading { text-align: center; padding: 20px; color: #9ca3af; font-size: 24px; } .forum-end { text-align: center; padding: 20px; color: #9ca3af; font-size: 13px; } /* ── Notification list ──────────────────────────────────────────────── */ .forum-notif-list { list-style: none; padding: 0 12px; margin: 0; } .forum-notif-item { padding: 12px 0; border-bottom: 1px solid #f1f5f9; } .forum-notif-item--unread { background: #eff6ff; border-radius: 8px; padding: 12px; margin-bottom: 6px; } .forum-notif-reply { font-size: 12px; color: #6b7280; } .forum-notif-body { font-size: 14px; color: #374151; margin: 4px 0 0; } .forum-notif-empty { text-align: center; padding: 40px 20px; color: #9ca3af; } /* ── Farm filter picker ─────────────────────────────────────────────── */ .forum-farm-filter-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 300; display: flex; align-items: flex-end; } .forum-farm-filter-sheet { width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 16px; max-height: 70vh; display: flex; flex-direction: column; } .forum-farm-filter__search { padding: 10px 12px; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 14px; margin-bottom: 10px; width: 100%; box-sizing: border-box; } .forum-farm-filter__list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; } .forum-farm-filter__item { padding: 12px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: background 0.1s; } .forum-farm-filter__item:hover { background: #f1f5f9; } /* ── Notification unread badge ──────────────────────────────────────── */ .forum-badge-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 0 5px; margin-left: 4px; vertical-align: middle; } /* Review Sub-Ratings Badges (Housing, Management, Work, Duration) */ .forum-card__sub-ratings { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .forum-card__badge-sub { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #f1f5f9; border-radius: 12px; font-size: 12px; font-weight: 600; color: #475569; } .forum-card__badge-sub--duration { background: #eff6ff; color: var(--forum-primary, #1e40af); } .forum-card__badge-sub--job { background: #fff7ed; color: #c2410c; } .forum-card__badge-sub--amenity { background: #f0fdf4; color: #15803d; } /* Detail view structured sections for badges */ .forum-detail__sections { display: flex; flex-direction: column; gap: 14px; margin: 10px 0 16px; background: #f8fafc; padding: 14px; border-radius: 16px; border: 1px solid #e2e8f0; } .forum-detail__section { display: flex; flex-direction: column; gap: 8px; } .forum-detail__section-title { font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; } .forum-detail__section .forum-card__sub-ratings { margin-bottom: 0; } /* ══════════════════════════════════════════════════════════════════════ Reference redesign — feed card + post detail (post_detail_tip_6) ══════════════════════════════════════════════════════════════════════ */ /* ── Toolbar: filter + sort + compose, single row on mobile ─────────── */ .forum-toolbar { flex-wrap: nowrap; gap: 6px; padding: 12px 12px 8px; } .forum-toolbar__spacer { flex: 1 1 0; min-width: 0; } .forum-filter-btn { padding: 7px 11px; flex-shrink: 0; } .forum-toolbar-compose-btn { flex-shrink: 0; padding: 7px 11px; font-size: 12px; gap: 4px; } .forum-toolbar-search-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: none; background: none; color: #374151; cursor: pointer; padding: 0; } .forum-toolbar-search-btn:hover { background: #F3F4F6; } .forum-search-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #F9FAFB; border-bottom: 1px solid #E5E7EB; color: #9CA3AF; } .forum-search-input { flex: 1; border: none; background: transparent; font-size: 14px; color: #111827; outline: none; min-width: 0; } .forum-search-input::placeholder { color: #9CA3AF; } .forum-search-clear { display: inline-flex; align-items: center; border: none; background: none; padding: 2px; color: #9CA3AF; cursor: pointer; } .forum-search-empty { text-align: center; color: #9CA3AF; font-size: 14px; padding: 32px 0; } /* ── Sort pills (New / Popular) ─────────────────────────────────────── */ .forum-sort { display: flex; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 20px; overflow: hidden; flex-shrink: 0; } .forum-sort-btn { display: inline-flex; align-items: center; gap: 3px; padding: 7px 12px; background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 600; color: #9ca3af; white-space: nowrap; transition: background 0.15s, color 0.15s; } .forum-sort-btn--active { background: #166534; color: #fff; } /* Sort icons: hidden by default so the toolbar fits one row on narrow phones; shown only on wider screens where there's room. */ .forum-sort-btn__icon { display: none; margin-right: 4px; } @media (min-width: 414px) { .forum-sort-btn__icon { display: inline; } } /* ── Kind badge (uppercase rounded-rect) ────────────────────────────── */ .forum-badge { font-size: 11px; font-weight: 700; letter-spacing: 0; padding: 3px 10px; border-radius: 8px; text-transform: none; white-space: nowrap; flex-shrink: 0; line-height: 1.5; } .forum-badge--review { background: #DCFCE7; color: #166534; } .forum-badge--tip { background: #FEF3C7; color: #92400E; } .forum-badge--question { background: #FEE2E2; color: #991B1B; } .forum-badge--free { background: #DBEAFE; color: var(--forum-primary, #1e40af); } /* ── Feed card (PostCard) ───────────────────────────────────────────── */ .forum-pcard__farm { font-size: 13px; font-weight: 700; color: #111827; letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; } .forum-rating-badge { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; } .forum-rating-badge.green { background: #DCFCE7; color: #166534; } .forum-rating-badge.orange { background: #FEF9C3; color: #854D0E; } .forum-rating-badge.red { background: #FEE2E2; color: #991B1B; } .forum-rating-badge.grey { background: #F3F4F6; color: #9CA3AF; } .forum-pcard__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; } .forum-tag { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 12px; white-space: nowrap; line-height: 1.2; } .forum-tag--crop { background: #DCFCE7; color: #166534; } .forum-tag--agency { background: #FEF3C7; color: #92400E; } .forum-tag--extra { background: #F3F4F6; color: #6B7280; } .forum-pcard__preview { font-size: 14px; line-height: 1.55; color: #6B7280; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; word-break: break-word; } /* ── Feed card v2: social layout (avatar · author · time · badge → title → preview → stats), matching the reference mock ────────────────────── */ .forum-pcard__top { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; } .forum-pcard__avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; } .forum-pcard__byline { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1; font-size: 13px; color: #111827; font-weight: 600; } .forum-pcard__byline .forum-author-link { color: #111827; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .forum-pcard__byline-sep { color: #D1D5DB; flex-shrink: 0; font-weight: 400; } .forum-pcard__time { color: #9CA3AF; white-space: nowrap; flex-shrink: 0; font-weight: 400; } .forum-pcard__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.32; color: #111827; letter-spacing: -0.2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .forum-pcard__stars { display: flex; align-items: center; gap: 6px; margin: -1px 0 8px; } .forum-pcard__stars-icons { color: #F59E0B; font-size: 13px; letter-spacing: 1.5px; } .forum-pcard__stars-num { font-size: 12px; font-weight: 700; color: #92400E; } .forum-pcard__actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .forum-stat { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; font-size: 13px; font-weight: 600; color: #4B5563; cursor: pointer; } .forum-stat__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .forum-stat__icon svg { display: block; } .forum-stat--like:hover { color: #EF4444; } .forum-stat--like.forum-stat--active { color: #EF4444; } .forum-pcard__actions-grow { flex: 1; } /* Report button — circle border matching like button */ .forum-pcard__actions .forum-btn-report { border: none; background: none; padding: 2px; color: #9CA3AF; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; } .forum-pcard__actions .forum-btn-report svg { display: block; } .forum-pcard__actions .forum-btn-report:hover { color: #EF4444; border-color: #EF4444; background: none; } /* Translate button inside actions row — no top margin (row handles spacing). */ .forum-pcard__actions .forum-translate-btn { margin-top: 0; } /* Comment CTA pill below the actions row. */ .forum-pcard .forum-reply-hint { margin-top: 8px; } .forum-card__author-dot--real { background: #22C55E; } /* Feed-card actions: bordered pill buttons (like / flag) */ .forum-btn-like--bare { border: 1.5px solid #E5E7EB; background: #fff; color: #9CA3AF; padding: 5px 12px; border-radius: 20px; font-size: 13px; } .forum-btn-like--bare:hover { color: #EF4444; background: #fff; border-color: #FCA5A5; } .forum-btn-like--bare.forum-btn-like--active { background: #FFF1F2; border-color: #FDA4AF; color: #EF4444; font-weight: 700; } .forum-reply-hint { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; background: #F9FAFB; border: 1px solid #F3F4F6; margin-top: 12px; transition: background 0.15s, border-color 0.15s; cursor: pointer; } .forum-pcard:hover .forum-reply-hint { background: #F3F4F6; } .forum-reply-hint__icon { font-size: 15px; color: #D1D5DB; } .forum-reply-hint__text { font-size: 13px; color: #9CA3AF; flex: 1; } .forum-reply-hint__arrow { color: #D1D5DB; font-size: 14px; } .forum-reply-hint__count { min-width: 20px; height: 20px; border-radius: 10px; background: #E5E7EB; color: #9CA3AF; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } .forum-reply-hint__count--active { background: var(--forum-accent, #3b82f6); color: #fff; } /* When there ARE replies — make it pop */ .forum-reply-hint--has-replies { background: #EFF6FF; border-color: #BFDBFE; } .forum-reply-hint--has-replies .forum-reply-hint__icon { color: var(--forum-accent, #3b82f6); } .forum-reply-hint--has-replies .forum-reply-hint__text { color: var(--forum-primary-active, #1d4ed8); font-weight: 600; } .forum-reply-hint--has-replies .forum-reply-hint__arrow { color: var(--forum-accent, #3b82f6); } /* ── Report Modal ───────────────────────────────────────────────────── */ .forum-report-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 2000; display: flex; align-items: flex-end; justify-content: center; animation: forumOverlayIn 0.2s ease; } @keyframes forumOverlayIn { from { opacity: 0; } to { opacity: 1; } } .forum-report-sheet { width: 100%; max-width: 480px; background: #fff; border-radius: 20px 20px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)); animation: forumSheetUp 0.28s cubic-bezier(.34,1.56,.64,1); } @keyframes forumSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .forum-report-sheet__handle { width: 36px; height: 4px; border-radius: 2px; background: #e2e8f0; margin: 0 auto 16px; } .forum-report-sheet__title { font-size: 16px; font-weight: 700; color: #1e293b; margin-bottom: 4px; } .forum-report-sheet__sub { font-size: 13px; color: #94a3b8; margin-bottom: 16px; } .forum-report-reasons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .forum-report-reason-btn { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid #e2e8f0; background: #f8fafc; font-size: 14px; font-weight: 500; color: #1e293b; cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s; } .forum-report-reason-btn.selected { border-color: var(--forum-accent, #3b82f6); background: #eff6ff; color: var(--forum-primary-active, #1d4ed8); font-weight: 600; } .forum-report-textarea { width: 100%; min-height: 80px; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; font-size: 14px; color: #1e293b; resize: none; outline: none; box-sizing: border-box; font-family: inherit; margin-bottom: 14px; transition: border-color 0.15s; } .forum-report-textarea:focus { border-color: var(--forum-accent, #3b82f6); } .forum-report-actions { display: flex; gap: 10px; } .forum-report-cancel { flex: 1; padding: 12px; border-radius: 12px; border: 1.5px solid #e2e8f0; background: #f8fafc; font-size: 14px; font-weight: 600; color: #64748b; cursor: pointer; } .forum-report-submit { flex: 2; padding: 12px; border-radius: 12px; border: none; background: #dc2626; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; transition: background 0.15s, transform 0.1s; } .forum-report-submit:active { transform: scale(0.97); background: #b91c1c; } .forum-report-submit:disabled { background: #fca5a5; cursor: not-allowed; } .forum-report-spinner { width: 44px; height: 44px; border: 4px solid #e2e8f0; border-top-color: var(--forum-accent, #3b82f6); border-radius: 50%; margin: 0 auto; animation: forumSpin 0.8s linear infinite; } @keyframes forumSpin { to { transform: rotate(360deg); } } /* ── Detail: nav label ──────────────────────────────────────────────── */ .forum-detail__topbar { display: flex; align-items: center; gap: 8px; } .forum-detail__nav-label { font-size: 13px; font-weight: 600; color: #9CA3AF; } /* ── Detail card ────────────────────────────────────────────────────── */ .forum-detail-card { padding: 0; overflow: hidden; } .forum-detail-card__hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; margin: 0; border-bottom: 1.5px solid transparent; } .forum-detail-card--review .forum-detail-card__hdr { background: #FFFBEB; border-bottom-color: #FDE68A; } .forum-detail-card--tip .forum-detail-card__hdr { background: #F0FDF4; border-bottom-color: #BBF7D0; } .forum-detail-card--question .forum-detail-card__hdr { background: #FEF2F2; border-bottom-color: #FECACA; } .forum-detail-card--free .forum-detail-card__hdr { background: #EFF6FF; border-bottom-color: #BFDBFE; } .forum-pop-chip { display: inline-flex; align-items: center; gap: 4px; background: #FEF3C7; color: #92400E; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 20px; flex-shrink: 0; } .forum-detail-card__user { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #F3F4F6; } .forum-detail-card__user-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .forum-detail-card__avatar { width: 38px; height: 38px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; text-transform: uppercase; } .forum-detail-card__name { font-weight: 700; font-size: 14px; color: #111827; } .forum-detail-card__time { font-size: 12px; color: #9CA3AF; margin-top: 2px; } .forum-detail-card__verified { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9CA3AF; flex-shrink: 0; } .forum-verified-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; display: inline-block; } .forum-detail-card .forum-detail__sections { margin: 12px 16px 0; } .forum-detail-card .forum-card__body--full { padding: 14px 16px; margin: 0; } /* ── Price / plan chips ─────────────────────────────────────────────── */ .forum-price-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 4px; } .forum-pchip { padding: 6px 12px; border-radius: 12px; background: #fff; border: 1.5px solid #D1FAE5; text-align: center; } .forum-pchip__plan { font-weight: 700; color: #166534; font-size: 13px; } .forum-pchip__price { color: #6B7280; font-size: 11px; margin-top: 1px; } /* ── Link / referral CTA box ────────────────────────────────────────── */ .forum-link-box { margin: 12px 16px; padding: 13px 16px; border-radius: 14px; background: linear-gradient(135deg, #DCFCE7, #F0FDF4); border: 1.5px solid #BBF7D0; display: flex; align-items: center; gap: 12px; text-decoration: none; transition: box-shadow 0.15s; } .forum-link-box:hover { box-shadow: 0 3px 12px rgba(22,101,52,.15); } .forum-link-box__icon { width: 38px; height: 38px; background: #166534; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .forum-link-box__txt { display: flex; flex-direction: column; min-width: 0; } .forum-link-box__title { font-size: 13px; font-weight: 700; color: #166534; } .forum-link-box__sub { font-size: 11px; color: #16a34a; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .forum-link-box__arrow { margin-left: auto; font-size: 16px; color: #166534; } /* ── Share row ──────────────────────────────────────────────────────── */ .forum-detail-card__share { display: flex; gap: 8px; padding: 14px 16px; } .forum-share-btn { flex: 1; padding: 8px; border-radius: 10px; border: 1.5px solid #E5E7EB; background: #fff; font-size: 12px; font-weight: 600; color: #374151; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; } .forum-share-btn:hover { border-color: #166534; color: #166534; background: #F0FDF4; } .forum-share-btn--report:hover { border-color: #EF4444; color: #EF4444; background: #FEF2F2; } .forum-detail-card .forum-card__footer { padding: 11px 16px; margin: 0; background: #FAFAFA; border-top: 1px solid #F3F4F6; } /* ── Replies header + card ──────────────────────────────────────────── */ .forum-replies-hdr { display: flex; align-items: center; gap: 8px; padding: 16px 16px 10px; } .forum-replies-hdr__icon { font-size: 18px; } .forum-replies-hdr__title { font-size: 15px; font-weight: 700; color: #111827; margin: 0; } .forum-replies-hdr__count { font-size: 13px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: #F3F4F6; color: #6B7280; } .forum-replies-card { margin: 0 12px 16px; background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.03); overflow: hidden; } .forum-replies-list .forum-reply { margin: 0; border-radius: 0; box-shadow: none; border: none; border-bottom: 1px solid #F4F4F5; } .forum-replies-list .forum-reply:last-child { border-bottom: none; } .forum-replies-list:empty + .forum-compose-inline { border-top: none; } .forum-reply__like { margin-top: 6px; } /* ── Inline compose (inside replies card) ───────────────────────────── */ .forum-compose-inline { display: flex; gap: 10px; align-items: flex-end; padding: 12px 14px; border-top: 1.5px solid #F3F4F6; background: #FAFAFA; } .forum-compose-inline__avatar { width: 32px; height: 32px; font-size: 13px; background: #9CA3AF; flex-shrink: 0; } .forum-compose-inline .forum-reply-textarea { background: #fff; min-height: 38px; border-radius: 12px; } .forum-compose-inline .forum-reply-submit-btn { background: #D1D5DB; height: auto; padding: 9px 16px; border-radius: 12px; transition: background 0.15s; } .forum-compose-inline .forum-reply-submit-btn.forum-reply-submit-btn--active { background: #22C55E; } .forum-compose-inline .forum-reply-submit-btn.forum-reply-submit-btn--active:hover { background: #16A34A; } /* ════════════════════════════════════════════════════════════════════ Question detail (Q&A layout) — reference: post_detail_question_5.html Used for 'free' posts; renders via PostDetailView._renderQuestionDetail. ════════════════════════════════════════════════════════════════════ */ .qd-root { gap: 0; } /* Question card */ .qd-card { background: #fff; border-radius: 20px; border: 1.5px solid #E5E7EB; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.05); margin: 8px 12px 0; } .qd-card-hdr { padding: 13px 18px; background: #EFF6FF; border-bottom: 1.5px solid #BFDBFE; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .qd-badge { font-size: 11px; font-weight: 800; letter-spacing: .4px; background: #DBEAFE; color: var(--forum-primary, #1e40af); padding: 3px 9px; border-radius: 6px; text-transform: uppercase; } .qd-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; } .qd-chip--open { background: #FEF3C7; color: #92400E; } .qd-chip--solved { background: #DCFCE7; color: #166534; } .qd-user-row { padding: 13px 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #F3F4F6; } .qd-user-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .qd-avatar { width: 38px; height: 38px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .qd-username { font-weight: 700; font-size: 14px; color: #111827; } .qd-user-meta { font-size: 12px; color: #9CA3AF; margin-top: 2px; } .qd-user-status { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #9CA3AF; flex-shrink: 0; } .qd-qbody { padding: 16px 18px; margin: 0; } .qd-qbody .forum-body-text { font-size: 15px; line-height: 1.7; color: #1F2937; font-weight: 500; } .qd-tags { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 18px 16px; } .qd-tag { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 12px; background: #EFF6FF; color: var(--forum-primary, #1e40af); } .qd-card-footer { padding: 11px 18px; border-top: 1px solid #F3F4F6; background: #FAFAFA; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .qd-footer-meta { font-size: 12px; color: #9CA3AF; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qd-footer-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .qd-like { display: flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; color: #9CA3AF; font-size: 14px; padding: 6px 10px; border-radius: 20px; transition: all .15s; font-family: inherit; } .qd-like:hover { background: #FEE2E2; color: #EF4444; } .qd-like--liked { color: #EF4444; background: #FFF1F2; } .qd-cmt { display: flex; align-items: center; gap: 5px; color: #9CA3AF; font-size: 14px; } .qd-flag { background: none; border: none; cursor: pointer; font-size: 15px; padding: 4px; line-height: 1; opacity: .85; transition: opacity .15s, transform .1s; } .qd-flag:hover { opacity: 1; transform: scale(1.05); } /* Answers */ .qd-ans-wrap { margin: 20px 12px 0; } .qd-ans-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .qd-ans-hdr h3 { font-size: 15px; font-weight: 700; color: #111827; margin: 0; } .qd-cnt-chip { font-size: 13px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: #F3F4F6; color: #6B7280; } .qd-sort { margin-left: auto; display: flex; gap: 6px; } .qd-sort-opt { padding: 6px 12px; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 600; color: #6B7280; background: #fff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 1px 4px rgba(0,0,0,0.08); transition: all .15s; font-family: inherit; white-space: nowrap; } .qd-sort-opt--on { background: var(--forum-primary-active, #1d4ed8); color: #fff; border-color: var(--forum-primary-active, #1d4ed8); box-shadow: 0 2px 8px rgba(29,78,216,0.25); } .qd-ans-list { background: #fff; border-radius: 16px; border: 1.5px solid #E5E7EB; overflow: hidden; } /* Best answer card (pinned, highlighted green) */ .qd-best-card { background: #fff; border-radius: 16px; border: 2px solid #BBF7D0; overflow: hidden; margin-bottom: 14px; box-shadow: 0 2px 12px rgba(22,101,52,.08); } .qd-best-banner { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: #F0FDF4; border-bottom: 1px solid #DCFCE7; font-size: 12px; font-weight: 700; color: #166534; } .qd-best-card .qd-ans { border-bottom: none; } /* Pinned sponsor comment (Lebara) — first item in every answers block */ .qd-ad { background: linear-gradient(135deg, #F0FDF4, #DCFCE7); border: 1.5px solid #BBF7D0; border-radius: 16px; padding: 11px 13px; margin-bottom: 14px; } /* Sponsor ad pinned in the forum feed — align with post cards (.forum-card has margin: 0 12px) */ .forum-feed-ad { margin: 0 12px 10px; } .forum-feed-ad .qd-ad { margin-bottom: 0; } .qd-ad__head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; } .qd-ad__logo { width: 30px; height: 30px; border-radius: 8px; background: #166534; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .qd-ad__id { display: flex; align-items: center; gap: 7px; } .qd-ad__disc { margin-left: auto; display: flex; flex-direction: column; align-items: center; padding: 5px 12px; border-radius: 12px; background: #166534; text-align: center; flex-shrink: 0; } .qd-ad__disc b { font-size: 14px; font-weight: 800; color: #fff; line-height: 1.1; } .qd-ad__disc span { font-size: 10px; color: #BBF7D0; margin-top: 1px; white-space: nowrap; } .qd-ad__name { font-weight: 800; font-size: 14px; color: #14532D; } .qd-ad__badge { font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: #BBF7D0; color: #166534; } .qd-ad__text { font-size: 12.5px; line-height: 1.4; color: #14532D; margin-bottom: 9px; } .qd-ad__chips { display: flex; flex-wrap: nowrap; gap: 5px; margin-bottom: 9px; } .qd-ad__chip { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 5px 4px; border-radius: 12px; background: #fff; border: 1.5px solid #BBF7D0; text-align: center; } .qd-ad__chip b { font-size: 12px; font-weight: 700; color: #166534; line-height: 1.1; white-space: nowrap; } .qd-ad__chip span { font-size: 10px; color: #16a34a; margin-top: 1px; white-space: nowrap; } .qd-ad__cta { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 13px; background: #166534; text-decoration: none; transition: filter .15s; } .qd-ad__cta:hover { filter: brightness(1.08); } .qd-ad__cta-icon { width: 31px; height: 31px; border-radius: 9px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .qd-ad__cta-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; } .qd-ad__cta-title { font-size: 13px; font-weight: 700; color: #fff; } .qd-ad__cta-sub { font-size: 11px; color: #BBF7D0; margin-top: 1px; } .qd-ad__cta-arrow { color: #BBF7D0; font-size: 18px; flex-shrink: 0; } /* Author-only "mark best" toggle on each answer */ .qd-best-btn { background: none; border: none; cursor: pointer; color: #9CA3AF; font-size: 12px; font-weight: 600; padding: 0; font-family: inherit; } .qd-best-btn:hover { color: #166534; } .qd-best-btn--on { color: #166534; } .qd-ans { display: flex; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #F9FAFB; } .qd-ans:last-child { border-bottom: none; } .qd-avatar-sm { width: 32px; height: 32px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; } .qd-ans-body { flex: 1; min-width: 0; } .qd-ans-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; } .qd-ans-user { font-weight: 700; font-size: 13px; color: #111827; } .qd-author-chip { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: #DBEAFE; color: var(--forum-primary, #1e40af); } .qd-ans-time { font-size: 12px; color: #9CA3AF; margin-left: auto; } .qd-ans-body .forum-reply__body { font-size: 13.5px; color: #374151; line-height: 1.6; } .qd-ans-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; } .qd-vote { display: flex; align-items: center; gap: 5px; background: #F3F4F6; border: none; cursor: pointer; color: #6B7280; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 16px; transition: all .15s; font-family: inherit; } .qd-vote:hover { background: #E0E7FF; color: var(--forum-primary-active, #1d4ed8); } .qd-vote--voted { background: #DBEAFE; color: var(--forum-primary-active, #1d4ed8); } .qd-reply-link { background: none; border: none; cursor: pointer; color: #9CA3AF; font-size: 12px; font-weight: 600; padding: 0; font-family: inherit; } .qd-reply-link:hover { color: var(--forum-primary-active, #1d4ed8); } .qd-empty { padding: 22px 16px; text-align: center; color: #9CA3AF; font-size: 13px; } /* Answer input */ .qd-input-card { margin-top: 20px; background: #fff; border-radius: 16px; border: 1px solid rgb(236,236,239); display: flex; gap: 10px; align-items: center; padding: 14px; } .qd-ta { flex: 1; height: 32px; padding: 0 12px; border: none; background: #F3F4F6; border-radius: 999px; resize: none; font-size: 13px; color: #374151; line-height: 32px; overflow: hidden; font-family: inherit; transition: none; } .qd-ta:focus { outline: none; } .qd-send { padding: 0; background: none; border: none; color: #9CA3AF; font-weight: 500; font-size: 13px; cursor: default; font-family: inherit; transition: color .15s; white-space: nowrap; display: flex; align-items: center; gap: 4px; } .qd-send.forum-reply-submit-btn--active { color: var(--forum-primary-active, #1d4ed8); cursor: pointer; } .qd-send.forum-reply-submit-btn--active:hover { color: var(--forum-primary, #1e40af); } /* ── Compose modal polish (aligned with the Q&A reference) ──────────── */ .forum-compose__farm:focus, .forum-compose__custom-farm:focus, .forum-compose__topic:focus, .forum-compose__post-title:focus, .forum-compose__body:focus { outline: none; border-color: var(--forum-primary-active, #1d4ed8); box-shadow: 0 0 0 3px rgba(29,78,216,.12); } .forum-compose__submit { background: var(--forum-primary-active, #1d4ed8); } .forum-compose__submit:hover { background: var(--forum-primary, #1e40af); } .forum-compose__submit:disabled { background: #D1D5DB; cursor: default; } /* ── Farm profile link card (shown at bottom of post cards/detail) ─── */ .forum-farm-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 12px 10px; background: #ffffff; border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.07); cursor: pointer; user-select: none; } .forum-farm-link:active { opacity: 0.78; transform: scale(0.985); } .forum-farm-link__emoji { font-size: 22px; flex-shrink: 0; } .forum-farm-link__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .forum-farm-link__name { font-size: 13px; font-weight: 700; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .forum-farm-link__meta { font-size: 11.5px; color: #6B7280; } .forum-farm-link__arrow { font-size: 20px; color: #9CA3AF; flex-shrink: 0; }