:root { --trc-black: #090d0c; --trc-green-950: #081813; --trc-green-900: #0d251d; --trc-green-800: #143528; --trc-green-700: #1d4a37; --trc-brass: #c7a15d; --trc-brass-dark: #a67832; --trc-paper: #f7f0df; --trc-paper-2: #fffaf0; --trc-ink: #241b12; --trc-muted: #706757; --trc-line: #d9c9aa; --trc-red: #b23a2f; --trc-blue: #2d72b8; color-scheme: dark; } /* v3.2.0-beta-10 — All bare selectors below are scoped to .trc-community-body (set on the by buddypress/index.php and page-community.php) so this CSS file is safe to load on any page without affecting the TRC theme chrome. */ .trc-community-body, .trc-community-body * { box-sizing: border-box; } .trc-community-body { scroll-behavior: smooth; margin: 0; min-height: 100vh; color: var(--trc-ink); background: radial-gradient(circle at 18% 0%, rgba(45, 93, 69, 0.5), transparent 32rem), linear-gradient(180deg, #07100f 0%, #10291f 42%, #0a1512 100%); font-family: Georgia, "Times New Roman", serif; } .trc-community-body::before { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px); background-size: 42px 42px; content: ""; } .trc-community-body a { color: inherit; text-decoration: none; } .trc-community-body button, .trc-community-body input, .trc-community-body select, .trc-community-body textarea { font: inherit; } .trc-community-body img { display: block; max-width: 100%; } .tc-shell { min-height: 100vh; } .tc-topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 530px minmax(220px, 1fr) auto; align-items: center; gap: 22px; min-height: 88px; padding: 10px 24px; border-bottom: 1px solid rgba(199, 161, 93, 0.5); background: linear-gradient(180deg, rgba(9, 13, 12, 0.98), rgba(10, 18, 16, 0.96)), #090d0c; color: #f8ecd2; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34); } .tc-topbar > * { min-width: 0; } .tc-brand { display: grid; grid-template-columns: 126px 1fr; gap: 18px; align-items: center; } .tc-brand img { width: 126px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4)); } .tc-brand-title { margin: 0; font-size: clamp(1.55rem, 2.5vw, 2.05rem); line-height: 0.94; letter-spacing: 0.01em; font-variant: small-caps; } .tc-brand-subtitle { display: block; margin-top: 6px; color: #f0d99f; font-size: 1.05rem; font-style: italic; font-variant: normal; } .tc-search { display: grid; grid-template-columns: 1fr 42px; align-items: center; min-height: 46px; border: 1px solid rgba(199, 161, 93, 0.42); border-radius: 10px; background: rgba(255, 250, 240, 0.055); overflow: hidden; } .tc-search input { width: 100%; min-width: 0; border: 0; padding: 0 16px; background: transparent; color: #fff9ed; outline: 0; } .tc-search input::placeholder { color: rgba(255, 249, 237, 0.62); } .tc-search button { border: 0; background: transparent; color: #e6c98a; cursor: pointer; font-size: 1.25rem; } .tc-top-actions { display: flex; align-items: center; gap: 18px; min-width: 0; max-width: 100%; } .tc-top-link { display: grid; justify-items: center; gap: 4px; color: #f5ead4; font: 700 0.78rem/1.1 Arial, Helvetica, sans-serif; } .tc-top-link span:first-child { color: #e9c987; font-size: 1.36rem; line-height: 1; } .tc-profile-chip { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 10px; min-width: 146px; } .tc-profile-chip img, .tc-avatar { border: 2px solid rgba(199, 161, 93, 0.76); border-radius: 999px; } .tc-profile-chip strong { display: block; color: #fff9ed; font: 800 0.92rem/1.15 Arial, Helvetica, sans-serif; } .tc-profile-chip small { color: #dcc48d; font: 600 0.78rem/1.15 Arial, Helvetica, sans-serif; } .tc-app { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 18px; padding: 10px 14px 24px; } .tc-sidebar { position: sticky; top: 100px; align-self: start; display: grid; gap: 16px; max-height: calc(100vh - 114px); overflow: auto; padding: 12px 10px; color: #fff8e8; } .tc-sidebar-title { margin: 8px 0 6px; color: #e9d49a; font: 800 0.76rem/1 Arial, Helvetica, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; } .tc-side-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .tc-side-link { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; min-height: 38px; padding: 6px 10px; border: 1px solid transparent; border-radius: 7px; color: #fffdf4; font: 700 0.92rem/1.15 Arial, Helvetica, sans-serif; } .tc-side-link:hover, .tc-side-link.is-active { border-color: rgba(199, 161, 93, 0.24); background: linear-gradient(90deg, rgba(55, 118, 80, 0.55), rgba(255, 255, 255, 0.06)); } .tc-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 22px; padding: 0 8px; border-radius: 999px; background: linear-gradient(180deg, #c39145, #8e5d21); color: #fff8e8; font: 800 0.78rem/1 Arial, Helvetica, sans-serif; } .tc-premium { border: 1px solid rgba(199, 161, 93, 0.35); border-radius: 8px; padding: 15px; background: rgba(10, 34, 25, 0.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); } .tc-premium h3 { margin: 0 0 10px; color: #f1d892; font-size: 0.98rem; text-transform: uppercase; } .tc-premium p { margin: 0 0 14px; color: #f8ecd2; font-size: 0.88rem; line-height: 1.45; } .tc-main { min-width: 0; } .tc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 386px; gap: 8px; } .tc-panel { border: 1px solid var(--trc-line); border-radius: 8px; background: radial-gradient(circle at 100% 0%, rgba(199, 161, 93, 0.08), transparent 22rem), linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(245, 238, 220, 0.98)); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18); } .tc-panel-pad { padding: 18px; } .tc-page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-bottom: 12px; } .tc-page-head h1, .tc-section-title, .tc-card-title { margin: 0; color: #1f1810; font-variant: small-caps; letter-spacing: 0.01em; } .tc-page-head h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; } .tc-page-head p { margin: 8px 0 0; color: var(--trc-muted); } .tc-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--trc-brass-dark); border-radius: 5px; background: linear-gradient(180deg, #b8843a, #956224); color: #fff7e8; cursor: pointer; font: 800 0.78rem/1 Arial, Helvetica, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; } .tc-button--light { border-color: #cdbb9b; background: rgba(255, 255, 255, 0.72); color: #241b12; } .tc-button--green { border-color: #1e583c; background: linear-gradient(180deg, #245f42, #143728); } .tc-button--danger { border-color: #8f2f26; background: linear-gradient(180deg, #c24a3f, #8f2f26); } .tc-welcome { position: relative; overflow: hidden; min-height: 124px; margin: 0 0 8px; border: 1px solid #c9a76d; border-radius: 8px; background: #e7cfa6; } .tc-welcome::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(239, 211, 164, 1) 0%, rgba(239, 211, 164, 0.92) 48%, rgba(239, 211, 164, 0.12) 80%), url("../img/train-banner-right.png") right center / auto 100% no-repeat; content: ""; } .tc-welcome-inner { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: center; min-height: 124px; padding: 16px 30px; } .tc-welcome-badge { width: 160px; filter: drop-shadow(0 10px 12px rgba(67, 38, 12, 0.35)); } .tc-welcome h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; font-variant: small-caps; } .tc-welcome p { margin: 8px 0 0; font: 600 0.95rem/1.3 Arial, Helvetica, sans-serif; } .tc-composer { display: grid; grid-template-columns: 74px 1fr; gap: 16px; padding: 14px; } .tc-composer img { width: 60px; height: 60px; } .tc-input { min-height: 56px; width: 100%; border: 1px solid var(--trc-line); border-radius: 8px; padding: 0 18px; background: rgba(255, 255, 255, 0.66); color: var(--trc-ink); outline: 0; } .tc-composer-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ded0b7; } .tc-composer-actions button, .tc-tab { border: 0; border-radius: 5px; background: transparent; cursor: pointer; color: #251d14; font: 800 0.84rem/1 Arial, Helvetica, sans-serif; } .tc-composer-actions button { display: inline-flex; justify-content: center; gap: 8px; padding: 8px 6px; } .tc-tabs { display: flex; gap: 10px; align-items: center; margin: 10px 0; overflow-x: auto; } .tc-tab { white-space: nowrap; padding: 11px 16px; } .tc-tab.is-active { background: linear-gradient(180deg, #214d39, #112f24); color: #fff8e8; } .tc-feed { display: grid; gap: 8px; } .tc-post { padding: 16px; } .tc-post-head { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; } .tc-post-head img { width: 48px; height: 48px; } .tc-post-head strong, .tc-link-green { color: #07552b; } .tc-meta { color: var(--trc-muted); font: 700 0.78rem/1.25 Arial, Helvetica, sans-serif; } .tc-post-body { display: grid; grid-template-columns: minmax(180px, 238px) minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 10px; } .tc-post-body img { width: 100%; aspect-ratio: 1.5 / 1; object-fit: cover; border-radius: 5px; } .tc-post-body h2 { margin: 0 0 8px; font-size: 1.35rem; } .tc-post-body p { margin: 0 0 6px; font: 500 0.95rem/1.45 Arial, Helvetica, sans-serif; } .tc-reactions { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; color: var(--trc-muted); font: 700 0.8rem/1 Arial, Helvetica, sans-serif; } .tc-right-rail { display: grid; align-self: start; gap: 8px; } .tc-widget { padding: 16px; } .tc-widget-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 10px; } .tc-widget-head h2 { margin: 0; font-size: 1.08rem; } .tc-widget-head a { color: #07552b; font: 800 0.78rem/1 Arial, Helvetica, sans-serif; } .tc-event { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid #dfd2bd; } .tc-date { display: grid; place-items: center; height: 58px; border: 1px solid var(--trc-line); border-radius: 6px; background: rgba(255, 255, 255, 0.52); text-align: center; } .tc-date small { color: var(--trc-red); font: 800 0.7rem/1 Arial, Helvetica, sans-serif; } .tc-date strong { font: 800 1.5rem/1 Georgia, "Times New Roman", serif; } .tc-mini-list { display: grid; gap: 8px; } .tc-mini-item { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; } .tc-mini-item img { width: 56px; height: 42px; border-radius: 5px; object-fit: cover; } .tc-face-row, .tc-badge-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .tc-face-row img { width: 36px; height: 36px; } .tc-badge-row img { width: 52px; height: 52px; object-fit: contain; } .tc-profile-hero { overflow: hidden; } .tc-profile-cover { min-height: 190px; background: linear-gradient(90deg, rgba(239, 211, 164, 0.96), rgba(239, 211, 164, 0.42)), url("../img/train-banner-right.png") right center / cover no-repeat; } .tc-profile-summary { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; gap: 18px; align-items: end; margin-top: -50px; padding: 0 22px 22px; } .tc-profile-summary .tc-avatar { width: 112px; height: 112px; border-width: 4px; } .tc-profile-summary h1 { margin: 0; font-size: 2.4rem; line-height: 1; } .tc-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; } .tc-stat { padding: 14px; text-align: center; } .tc-stat strong { display: block; font-size: 1.45rem; } .tc-stat span { color: var(--trc-muted); font: 800 0.74rem/1 Arial, Helvetica, sans-serif; text-transform: uppercase; } .tc-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 10px; } .tc-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .tc-card { overflow: hidden; } .tc-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .tc-card-body { padding: 12px; } .tc-card-body h3 { margin: 0 0 6px; font-size: 1rem; } .tc-kv { display: grid; gap: 8px; margin: 0; } .tc-kv div { display: grid; grid-template-columns: 128px 1fr; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #e1d4bd; } .tc-kv dt { color: var(--trc-muted); font: 800 0.75rem/1 Arial, Helvetica, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; } .tc-kv dd { margin: 0; } .tc-filterbar { display: grid; grid-template-columns: 1fr repeat(3, minmax(130px, 170px)) auto; gap: 10px; margin-bottom: 10px; } .tc-filterbar input, .tc-filterbar select, .tc-form textarea, .tc-form input, .tc-form select { min-height: 42px; width: 100%; border: 1px solid var(--trc-line); border-radius: 6px; background: rgba(255, 255, 255, 0.72); color: var(--trc-ink); padding: 0 12px; outline: 0; } .tc-form textarea { min-height: 116px; padding-top: 10px; resize: vertical; } .tc-request-list { display: grid; gap: 10px; } .tc-request { display: grid; grid-template-columns: 176px minmax(0, 1fr) 150px; gap: 16px; padding: 14px; } .tc-request > img { width: 100%; aspect-ratio: 1.25 / 1; object-fit: cover; border-radius: 5px; } .tc-status { display: inline-flex; align-items: center; justify-content: center; width: max-content; min-height: 25px; padding: 0 10px; border-radius: 999px; background: #f6e7bd; color: #7a4f14; font: 900 0.68rem/1 Arial, Helvetica, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; } .tc-status--green { background: #dfead3; color: #1e5b35; } .tc-status--red { background: #f1d2cc; color: #8f2f26; } .tc-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 10px; } .tc-gallery-main { width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; object-fit: cover; } .tc-thumb-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; } .tc-thumb-row img { aspect-ratio: 4 / 3; border-radius: 5px; object-fit: cover; } .tc-price { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 12px 0; } .tc-price strong { color: #1e583c; font-size: 2rem; } .tc-timeline { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .tc-timeline li { position: relative; padding-left: 22px; } .tc-timeline li::before { position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 999px; background: var(--trc-brass); content: ""; } .tc-market-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .tc-copy { color: var(--trc-muted); font: 500 0.95rem/1.5 Arial, Helvetica, sans-serif; } .tc-copy strong { color: var(--trc-ink); } @media (max-width: 1180px) { .tc-topbar { grid-template-columns: 1fr; } .tc-top-actions { overflow-x: auto; padding-bottom: 4px; } .tc-layout, .tc-two-col, .tc-detail-layout { grid-template-columns: 1fr; } .tc-right-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .tc-app { grid-template-columns: 1fr; padding: 8px; } .tc-sidebar { position: static; max-height: none; } .tc-side-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tc-welcome-inner, .tc-profile-summary { grid-template-columns: 1fr; } .tc-card-grid, .tc-market-grid, .tc-stat-grid, .tc-right-rail { grid-template-columns: repeat(2, 1fr); } .tc-filterbar, .tc-request { grid-template-columns: 1fr; } } @media (max-width: 620px) { .tc-topbar { padding: 10px; overflow: hidden; } .tc-brand { grid-template-columns: 86px 1fr; } .tc-brand img { width: 86px; } .tc-brand-title { font-size: 1.45rem; } .tc-brand-subtitle { font-size: 0.86rem; } .tc-top-actions { width: 100%; gap: 16px; overflow-x: auto; } .tc-profile-chip { grid-template-columns: 42px; min-width: 42px; } .tc-profile-chip span { display: none; } .tc-side-list, .tc-composer, .tc-composer-actions, .tc-post-body, .tc-card-grid, .tc-market-grid, .tc-stat-grid, .tc-right-rail, .tc-thumb-row { grid-template-columns: 1fr; } .tc-page-head { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════ v3.2.0-beta-10 — Style overrides for the EMBEDDED BuddyBoss activity post-form inside .tc-composer--live. The form ships with BuddyBoss's own classes (.bp-feedback, #whats-new-form, .activity-update-form, etc.). We restyle the most-visible bits to match the dark dashboard. ═══════════════════════════════════════════════════════════════════ */ .tc-composer--live { padding: 1rem 1.25rem 1.25rem; } .tc-composer--live .tc-composer-inner { width: 100%; } /* The post-form headline / avatar row */ .trc-community-body #whats-new-form, .trc-community-body .activity-update-form, .trc-community-body form[id^="whats-new"] { background: transparent; border: none; padding: 0; margin: 0; } /* The textarea / contenteditable composer field */ .trc-community-body #whats-new, .trc-community-body .bp-suggestions-mention, .trc-community-body textarea#whats-new, .trc-community-body .activity-update-form textarea { width: 100%; min-height: 60px; padding: .85rem 1rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(199, 161, 93, 0.25); border-radius: 8px; color: var(--trc-paper, #f7f0df); font-family: Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.5; outline: none; transition: border-color .15s, background .15s; } .trc-community-body #whats-new:focus, .trc-community-body .activity-update-form textarea:focus { border-color: var(--trc-brass, #c7a15d); background: rgba(255, 255, 255, 0.06); } .trc-community-body #whats-new::placeholder, .trc-community-body .activity-update-form textarea::placeholder { color: rgba(247, 240, 223, 0.4); } /* The Post / Submit button */ .trc-community-body #aw-whats-new-submit, .trc-community-body .activity-update-form button[type="submit"], .trc-community-body #whats-new-form #aw-whats-new-submit { background: var(--trc-brass, #c7a15d); color: var(--trc-black, #090d0c); border: 1px solid var(--trc-brass-dark, #a67832); padding: .7rem 1.5rem; font-family: Georgia, serif; font-size: .85rem; font-weight: 700; letter-spacing: .04em; border-radius: 6px; cursor: pointer; transition: background .15s; } .trc-community-body #aw-whats-new-submit:hover, .trc-community-body .activity-update-form button[type="submit"]:hover { background: var(--trc-paper, #f7f0df); } /* Action toolbar — Photo / Video / Poll / Group buttons */ .trc-community-body .post-elements-buttons-item, .trc-community-body .whats-new-toolbar a, .trc-community-body #whats-new-toolbar { color: rgba(247, 240, 223, 0.7); } .trc-community-body .post-elements-buttons-item:hover, .trc-community-body .whats-new-toolbar a:hover { color: var(--trc-brass, #c7a15d); } /* Privacy selector / group selector dropdowns */ .trc-community-body #whats-new-post-in, .trc-community-body #whats-new-post-object, .trc-community-body select.bp-select-box { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(199, 161, 93, 0.25); color: var(--trc-paper, #f7f0df); padding: .35rem .55rem; border-radius: 4px; font-family: Georgia, serif; font-size: .85rem; } /* User avatar in post form — make sure it gets the .tc-avatar treatment */ .trc-community-body #whats-new-avatar img, .trc-community-body .activity-update-form .avatar { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--trc-brass, #c7a15d); background: rgba(255, 255, 255, 0.05); } /* Hide BuddyBoss's own avatar wrapper if it conflicts */ .trc-community-body .tc-composer--live .bp-avatar-wrap { margin-right: .85rem; } /* Error/success messages from BuddyBoss AJAX */ .trc-community-body .bp-feedback { background: rgba(199, 161, 93, 0.1); border: 1px solid var(--trc-brass, #c7a15d); color: var(--trc-paper, #f7f0df); padding: .75rem 1rem; border-radius: 6px; margin-top: .85rem; font-size: .9rem; } .trc-community-body .bp-feedback.error, .trc-community-body .bp-feedback.bp-messages.error { background: rgba(178, 58, 47, 0.15); border-color: var(--trc-red, #b23a2f); }