/* Poker Copilot Community Forum — visual style. * Goals: warm, inviting, fast to scan. Light surface, PCP green accent, generous whitespace. */ :root { --pcp-green: #1d612e; --pcp-green-dark: #14421f; --pcp-green-darker: #0d2218; --pcp-green-tint: rgba(29, 97, 46, 0.08); --forum-bg: #f6f8f6; --forum-card-bg: #ffffff; --forum-card-border: #e5e7eb; --forum-card-border-hover: #c7d2c9; --forum-text: #1f2933; --forum-text-muted: #6b7280; --forum-text-soft: #9ca3af; --forum-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); --forum-shadow-hover: 0 6px 16px rgba(15, 23, 42, 0.08); --avatar-0: #1d612e; --avatar-1: #2563eb; --avatar-2: #b91c5c; --avatar-3: #d97706; --avatar-4: #0891b2; --avatar-5: #7c3aed; --avatar-6: #ca8a04; --avatar-7: #059669; } .page-forum { background: var(--forum-bg) !important; color: var(--forum-text) !important; font-feature-settings: "kern" 1, "liga" 1; } /* Narrow only the forum *content* container (a direct child of ), NOT the shared site header/footer containers. Narrowing the masthead container squeezed the navbar and pushed the trailing items (Facebook + language) off the right edge of the bar. */ .page-forum > .container { max-width: 880px; } .page-forum h1, .page-forum h2, .page-forum h3, .page-forum h4, .page-forum h5, .page-forum .display-4 { color: var(--forum-text) !important; letter-spacing: -0.01em; } .page-forum h1.display-4 { font-size: 2.25rem; font-weight: 700; margin-bottom: 0.25rem; } .page-forum .text-muted { color: var(--forum-text-muted) !important; } /* Green links apply to forum content only. Scoping to the content container keeps the shared navbar links white-on-navy (green-on-navy was unreadable) and the footer links untouched. */ .page-forum > .container a { color: var(--pcp-green) !important; text-decoration: none; } .page-forum > .container a:hover { color: var(--pcp-green-dark) !important; text-decoration: underline; } /* Breadcrumb — softer */ .page-forum nav.forum-breadcrumb, .page-forum nav.mb-3 { color: var(--forum-text-soft); font-size: 0.875rem; margin-bottom: 1rem; } .page-forum nav.forum-breadcrumb a, .page-forum nav.mb-3 a { color: var(--forum-text-muted) !important; font-weight: 500; } .page-forum nav.forum-breadcrumb a:hover { color: var(--pcp-green) !important; text-decoration: none; } .page-forum nav.forum-breadcrumb .breadcrumb-sep { color: var(--forum-text-soft); margin: 0 0.5rem; } /* ---------- Hero (forum landing intro) ---------- */ .forum-hero { background: linear-gradient(135deg, var(--pcp-green) 0%, var(--pcp-green-dark) 100%); color: #fff; border-radius: 12px; padding: 2rem 2.25rem; margin-bottom: 2rem; box-shadow: 0 8px 24px rgba(29, 97, 46, 0.2); } .forum-hero h1 { color: #fff !important; font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; letter-spacing: -0.01em; } .forum-hero p { margin: 0; opacity: 0.92; font-size: 1rem; line-height: 1.55; } .forum-hero .forum-hero-meta { margin-top: 0.75rem; font-size: 0.875rem; opacity: 0.82; } .forum-hero .forum-hero-meta a { color: #fff !important; text-decoration: underline; } /* ---------- Section heading + section actions ---------- */ .forum-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 0.75rem; } .forum-section-header h2 { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--forum-text-muted) !important; text-transform: uppercase; letter-spacing: 0.04em; } /* ---------- Card-style list rows (forums and threads) ---------- */ .page-forum .forum-suggestion-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; text-decoration: none !important; color: inherit; background: var(--forum-card-bg); border: 1px solid var(--forum-card-border); border-radius: 10px; box-shadow: var(--forum-shadow); margin-bottom: 0.6rem; transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .page-forum .forum-suggestion-card:hover { box-shadow: var(--forum-shadow-hover); border-color: var(--forum-card-border-hover); transform: translateY(-1px); text-decoration: none !important; color: inherit; } .page-forum .forum-suggestion-metric { min-width: 64px; padding: 0.4rem 0.25rem; text-align: center; background: var(--pcp-green-tint); border-radius: 8px; } .page-forum .forum-suggestion-metric strong { display: block; font-weight: 700; color: var(--pcp-green-dark); font-size: 1.1rem; line-height: 1.1; } .page-forum .forum-suggestion-metric .forum-metric-label { display: block; font-size: 0.7rem; font-weight: 600; color: var(--forum-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.15rem; } .page-forum .forum-suggestion-content { flex: 1; min-width: 0; } .page-forum .forum-suggestion-title { font-size: 1.075rem; font-weight: 600; color: var(--forum-text) !important; margin: 0 0 0.2rem; line-height: 1.25; } .page-forum .forum-suggestion-card:hover .forum-suggestion-title { color: var(--pcp-green) !important; } .page-forum .forum-suggestion-meta { font-size: 0.85rem; color: var(--forum-text-muted); margin: 0; line-height: 1.4; } .page-forum .forum-suggestion-meta strong { color: var(--forum-text); font-weight: 600; } .page-forum .forum-suggestion-meta .forum-avatar { margin-right: 0.4rem; vertical-align: -8px; } /* ---------- Avatars (initial badge, deterministic colour) ---------- */ .forum-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--avatar-0); color: #fff; font-weight: 700; font-size: 0.95rem; line-height: 1; flex-shrink: 0; user-select: none; text-transform: uppercase; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08); } .forum-avatar.size-sm { width: 28px; height: 28px; font-size: 0.78rem; } .forum-avatar.size-lg { width: 48px; height: 48px; font-size: 1.15rem; } /* SVG-image variant (selected avatar). border-radius wraps the SVG, no padding/box-shadow. */ .forum-avatar.forum-avatar-image { background: transparent; box-shadow: none; object-fit: cover; object-position: center; overflow: hidden; } /* Avatar picker grid on /forum/preferences */ .forum-avatar-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.6rem 0.5rem; margin: 0 0 0.25rem; } .forum-avatar-choice { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.55rem 0.25rem 0.45rem; border: 1.5px solid var(--forum-card-border); border-radius: 10px; cursor: pointer; text-align: center; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; background: #fff; } .forum-avatar-choice:hover { border-color: var(--pcp-green); transform: translateY(-1px); } .forum-avatar-choice.is-selected, .forum-avatar-choice:has(input:checked) { border-color: var(--pcp-green); box-shadow: 0 0 0 3px var(--pcp-green-tint); } .forum-avatar-choice input[type=radio] { position: absolute; opacity: 0; pointer-events: none; } .forum-avatar-choice .forum-avatar { width: 44px; height: 44px; font-size: 1.1rem; } .forum-avatar-choice .forum-avatar-label { font-size: 0.72rem; color: var(--forum-text-muted); line-height: 1.15; } .forum-avatar-c0 { background: var(--avatar-0); } .forum-avatar-c1 { background: var(--avatar-1); } .forum-avatar-c2 { background: var(--avatar-2); } .forum-avatar-c3 { background: var(--avatar-3); } .forum-avatar-c4 { background: var(--avatar-4); } .forum-avatar-c5 { background: var(--avatar-5); } .forum-avatar-c6 { background: var(--avatar-6); } .forum-avatar-c7 { background: var(--avatar-7); } /* ---------- Admin badge (next to author name on posts) ---------- */ .forum-admin-badge { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.5rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; background: var(--pcp-green); border-radius: 999px; vertical-align: middle; } /* ---------- Lock badge (locked forums / closed threads) ---------- */ .forum-lock-badge { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.4rem; padding: 0.1rem 0.55rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--forum-text-soft); background: #eceef0; border: 1px solid var(--forum-card-border); border-radius: 999px; vertical-align: middle; white-space: nowrap; } .forum-lock-icon { flex-shrink: 0; } /* In the forum/thread title rows the badge sits next to a big heading — nudge it up to centre. */ .page-forum h1 .forum-lock-badge, .page-forum h4 .forum-lock-badge { position: relative; top: -0.12em; } /* ---------- Locked-thread notice (replaces the reply box) ---------- */ .page-forum .forum-locked-notice { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; padding: 0.85rem 1.1rem; background: var(--forum-card-bg); border: 1px solid var(--forum-card-border); border-radius: 10px; color: var(--forum-text-soft); font-size: 0.95rem; } .page-forum .forum-locked-notice .forum-lock-icon { color: var(--forum-text-soft); } /* ---------- Post cards (thread view) ---------- */ .page-forum .forum-post { display: flex; gap: 1rem; background: var(--forum-card-bg); border: 1px solid var(--forum-card-border); border-radius: 10px; padding: 1.1rem 1.25rem; box-shadow: var(--forum-shadow); margin-bottom: 0.75rem; } .page-forum .forum-post.is-removed { background: #f9fafb; color: var(--forum-text-soft); font-style: italic; } .page-forum .forum-post .forum-post-body { flex: 1; min-width: 0; } .page-forum .forum-post .forum-post-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.9rem; } .page-forum .forum-post .forum-post-author { font-weight: 600; color: var(--forum-text); } .page-forum .forum-post .forum-post-time { color: var(--forum-text-soft); font-size: 0.85rem; } .page-forum .forum-post-edit-link { color: var(--forum-text-muted) !important; text-decoration: none; } .page-forum .forum-post-edit-link:hover { color: var(--pcp-green) !important; text-decoration: underline; } .page-forum .forum-post .forum-post-content { color: var(--forum-text); line-height: 1.6; font-size: 1rem; } .page-forum .forum-post .forum-post-content p:last-child { margin-bottom: 0; } .page-forum .forum-post .forum-post-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 0.5rem 0; } .page-forum .forum-post .forum-post-content a { text-decoration: underline; } /* ---------- Buttons ---------- */ .page-forum .btn-primary, .page-forum .forum-btn-add { background: var(--pcp-green) !important; border-color: var(--pcp-green) !important; color: #fff !important; font-weight: 600; padding: 0.5rem 1.25rem; border-radius: 8px; box-shadow: 0 1px 2px rgba(29, 97, 46, 0.25); transition: background 0.15s ease, transform 0.1s ease; } .page-forum .btn-primary:hover, .page-forum .forum-btn-add:hover { background: var(--pcp-green-dark) !important; border-color: var(--pcp-green-dark) !important; transform: translateY(-1px); } .page-forum .btn-secondary { background: #fff !important; border-color: var(--forum-card-border) !important; color: var(--forum-text) !important; font-weight: 600; border-radius: 8px; } .page-forum .btn-secondary:hover { background: var(--pcp-green-tint) !important; border-color: var(--pcp-green) !important; color: var(--pcp-green-dark) !important; } /* Anchor-styled buttons () must keep their own text colour. The forum content link rule above (.page-forum > .container a) has higher specificity than the plain .btn rules, so it was painting button labels green — invisible on the green .btn-primary/.forum-btn-add background, and wrong on .btn-secondary. These selectors add the `a` element + `.container` to outrank it. */ .page-forum > .container a.btn-primary, .page-forum > .container a.forum-btn-add { color: #fff !important; } .page-forum > .container a.btn-primary:hover, .page-forum > .container a.forum-btn-add:hover { color: #fff !important; } .page-forum > .container a.btn-secondary { color: var(--forum-text) !important; } .page-forum > .container a.btn-secondary:hover { color: var(--pcp-green-dark) !important; } /* ---------- Empty state ---------- */ .forum-empty { background: var(--forum-card-bg); border: 1px dashed var(--forum-card-border); border-radius: 12px; padding: 2.5rem 1.5rem; text-align: center; margin: 1.25rem 0; } .forum-empty .forum-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--pcp-green-tint); color: var(--pcp-green-dark); font-size: 1.6rem; margin-bottom: 0.75rem; } .forum-empty h3 { margin: 0 0 0.4rem; font-size: 1.1rem; font-weight: 600; } .forum-empty p { color: var(--forum-text-muted); margin-bottom: 1rem; } /* ---------- Form panels ---------- */ .forum-panel { background: var(--forum-card-bg); border: 1px solid var(--forum-card-border); border-radius: 12px; padding: 1.5rem; box-shadow: var(--forum-shadow); margin-bottom: 1.25rem; } .forum-panel h5 { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; } .page-forum .form-control { background: #fff; border: 1px solid #d1d5db; color: var(--forum-text); border-radius: 8px; padding: 0.55rem 0.75rem; } .page-forum .form-control:focus { border-color: var(--pcp-green); box-shadow: 0 0 0 3px rgba(29, 97, 46, 0.15); } .page-forum .form-label { font-weight: 600; font-size: 0.9rem; color: var(--forum-text); } /* ---------- Inline alerts ---------- */ .page-forum .alert-success { background: rgba(29, 97, 46, 0.08); border-color: rgba(29, 97, 46, 0.2); color: var(--pcp-green-dark); border-radius: 8px; } .page-forum .alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; border-radius: 8px; } .page-forum .alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; border-radius: 8px; } /* ---------- Pager ---------- */ .forum-pager { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 1.5rem 0 0.5rem; font-size: 0.9rem; } .forum-pager a, .forum-pager span.forum-pager-current, .forum-pager span.forum-pager-disabled { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.6rem; border-radius: 8px; border: 1px solid var(--forum-card-border); background: #fff; color: var(--forum-text) !important; font-weight: 600; text-decoration: none !important; } .forum-pager a:hover { border-color: var(--pcp-green); color: var(--pcp-green-dark) !important; background: var(--pcp-green-tint); } .forum-pager .forum-pager-current { background: var(--pcp-green); color: #fff !important; border-color: var(--pcp-green); } .forum-pager .forum-pager-disabled { opacity: 0.45; cursor: not-allowed; } .forum-pager .forum-pager-info { color: var(--forum-text-muted); border: none; background: transparent; font-weight: 400; min-width: 0; } /* ---------- Responsive ---------- */ @media (max-width: 575px) { .forum-hero { padding: 1.5rem 1.25rem; } .forum-hero h1 { font-size: 1.35rem; } .page-forum .forum-suggestion-card { padding: 0.85rem 1rem; gap: 0.75rem; } .page-forum .forum-suggestion-metric { min-width: 52px; } .page-forum .forum-post { padding: 1rem; } .page-forum .forum-post .forum-avatar { display: none; } }