/* =============================================
TRUREVIEW - stylesheet.css - www.trureview.ca
============================================= */
/* -- WATERMARK -- */
html body, body#phpbb {
background-position: -520px 160px !important;
background-size: 1250px auto !important;
background-attachment: fixed !important;
}
/* -- FORUM BOXES -- */
.forabg {
margin-bottom: 20px !important;
border-radius: 7px !important;
overflow: hidden !important;
box-shadow: 0 4px 16px rgba(100,0,30,0.13) !important;
border: 1px solid #c8a0b8 !important;
width: 100% !important;
}
.forabg .inner, .forumbg .inner { padding: 0 !important; width: 100% !important; }
ul.topiclist { width: 100% !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
ul.topiclist.forums { width: 100% !important; }
.row-item { display: flex !important; width: 100% !important; align-items: center !important; }
.row-item dt { flex: 1 !important; min-width: 0 !important; }
.row-item dd.topics { width: 90px !important; flex-shrink: 0 !important; text-align: center !important; }
.row-item dd.posts { width: 90px !important; flex-shrink: 0 !important; text-align: center !important; }
.row-item dd.lastpost { width: 220px !important; flex-shrink: 0 !important; }
/* -- HIDE TOP FORUM BAR -- */
.forabg ul.topiclist:not(.forums) li.header { display: none !important; }
/* -- HIDE ICONS -- */
span.forum-icon-wrap,
span.forum-icon-wrap.forum-read,
span.forum-icon-wrap.forum-unread,
span.subforum-icon-wrap { display: none !important; }
/* -- MAIN CATEGORY ROWS -- */
.forabg .topiclist.forums > li.row.forum_read_subforum {
background: linear-gradient(135deg,#3a0018 0%,#6a0828 40%,#900a38 100%) !important;
border-bottom: 2px solid #c01848 !important;
border-left: none !important;
}
.forabg .topiclist.forums > li.row.forum_read_subforum a.forumtitle {
color: #fff !important;
font-size: 15px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
font-family: "Raleway", sans-serif !important;
}
.forabg .topiclist.forums > li.row.forum_read_subforum a.forumtitle:hover { color: #ffd0e0 !important; text-decoration: none !important; }
.forabg .topiclist.forums > li.row.forum_read_subforum .forum-desc-text { color: rgba(255,210,230,0.75) !important; }
.forabg .topiclist.forums > li.row.forum_read_subforum .forum-count { color: #fff !important; }
.forabg .topiclist.forums > li.row.forum_read_subforum dd dfn { color: rgba(255,210,230,0.6) !important; }
.forabg .topiclist.forums > li.row.forum_read_subforum .no-posts-yet,
.forabg .topiclist.forums > li.row.forum_read_subforum .lastpost-subject,
.forabg .topiclist.forums > li.row.forum_read_subforum .lastpost-time,
.forabg .topiclist.forums > li.row.forum_read_subforum .lastpost-author { color: rgba(255,210,230,0.8) !important; }
/* -- SUBFORUM ROWS -- */
.forabg .topiclist.forums > li.row.forum_read,
.forabg .topiclist.forums > li.row.forum_unread {
background: #fff !important;
border-bottom: 1px solid #f0e0ea !important;
border-left: 4px solid #e8c0d0 !important;
}
.forabg .topiclist.forums > li.row.forum_read a.forumtitle,
.forabg .topiclist.forums > li.row.forum_unread a.forumtitle {
color: #8a0a30 !important;
font-size: 13.5px !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.forabg .topiclist.forums > li.row.forum_read:hover,
.forabg .topiclist.forums > li.row.forum_unread:hover { background: #fff8fb !important; border-left-color: #c01848 !important; }
.forabg .forums .row-item { padding: 14px 18px !important; min-height: 60px !important; }
/* -- FONT -- */
body, .forabg, a.forumtitle, .forum-desc-text, .subforum-title, a.subforum-title,
.forum-count, .lastpost-subject, .lastpost-time, .lastpost-author, .no-posts-yet {
font-family: "Raleway", Arial, sans-serif !important;
-webkit-font-smoothing: antialiased !important;
}
body { font-size: 14px !important; }
a.forumtitle { font-size: 14px !important; font-weight: 700 !important; }
/* -- MISC HIDES -- */
.jumpbox, #jumpbox, .jump-box { display: none !important; }
.returnlink, p.returnlink, a.returnlink { display: none !important; }
p.gensmall, .gensmall { display: none !important; }
/* Only hide icons inside action bar buttons that have text labels */
.action-bar a.button i.fa-search { display: none !important; }
.headerspace, form.headerspace { display: none !important; }
.linkage, div.linkage { display: none !important; }
/* -- PAGE WIDTH -- */
#tr-page-wrap { max-width: 1480px !important; padding: 10px 4px !important; }
/* -- STAT BLOCKS -- */
.stat-block { background: rgba(255,255,255,0.96) !important; border: 1px solid #e8c0d0 !important; border-radius: 5px !important; margin-bottom: 10px !important; overflow: hidden !important; }
.stat-block h3 { background: linear-gradient(135deg,#3a0018 0%,#6a0828 100%) !important; color: #fff !important; font-family: "Raleway", sans-serif !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 1px !important; text-transform: uppercase !important; padding: 8px 14px !important; margin: 0 !important; border-bottom: 2px solid #c01848 !important; }
.stat-block h3 a { color: #fff !important; }
.stat-block p { padding: 10px 14px !important; font-size: 12.5px !important; color: #4a2030 !important; line-height: 1.8 !important; }
/* -- LOGO SPIN -- */
#tr-logo img {
height: 140px !important;
width: auto !important;
-webkit-animation: coin-spin 12s ease-in-out infinite !important;
animation: coin-spin 12s ease-in-out infinite !important;
}
@-webkit-keyframes coin-spin {
0%,15% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
30% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
45%,100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
}
@keyframes coin-spin {
0%,15% { transform: rotateY(0deg); }
30% { transform: rotateY(180deg); }
45%,100% { transform: rotateY(360deg); }
}
/* -- HEADER RIGHT -- */
#tr-header-right {
text-align: right !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 6px !important;
background: rgba(0,0,0,0.25) !important;
border-radius: 8px !important;
padding: 10px 16px !important;
}
#tr-header-tagline { font-family: "Raleway", sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: #ffb0cc !important; border-bottom: 1px solid rgba(255,150,190,0.3) !important; padding-bottom: 6px !important; margin-bottom: 2px !important; }
#tr-header-welcome { font-family: "Raleway", sans-serif !important; font-size: 15px !important; font-weight: 600 !important; color: #fff !important; margin-bottom: 4px !important; }
#tr-header-welcome strong { color: #fff !important; font-weight: 800 !important; font-size: 16px !important; }
#tr-header-links { display: flex !important; gap: 8px !important; align-items: center !important; }
.tr-hdr-btn { background: rgba(255,255,255,0.12) !important; border: 1px solid rgba(255,255,255,0.25) !important; color: #fff !important; padding: 5px 16px !important; border-radius: 20px !important; font-family: "Raleway", sans-serif !important; font-weight: 700 !important; font-size: 12px !important; text-decoration: none !important; }
.tr-hdr-btn:hover { background: rgba(255,255,255,0.22) !important; color: #fff !important; text-decoration: none !important; }
.tr-hdr-btn-primary { background: #fff !important; color: #c01848 !important; border: 2px solid #fff !important; padding: 5px 18px !important; border-radius: 20px !important; font-family: "Raleway", sans-serif !important; font-weight: 800 !important; font-size: 12px !important; text-decoration: none !important; }
.tr-hdr-btn-primary:hover { background: #fce8f0 !important; color: #8a0a30 !important; text-decoration: none !important; }
#tr-header-domain { font-size: 10px !important; color: rgba(255,200,220,0.4) !important; letter-spacing: 2px !important; font-weight: 600 !important; border-top: 1px solid rgba(255,150,190,0.2) !important; padding-top: 5px !important; }
/* -- NAVBAR ROW 1 -- */
#tr-navbar-inner { flex-wrap: nowrap !important; overflow: visible !important; }
#tr-navbar-inner a { font-size: 10.5px !important; padding: 10px 8px !important; white-space: nowrap !important; border-right: none !important; }
#tr-navbar-inner a:hover { background: rgba(255,48,112,0.85) !important; }
#tr-navbar-inner a:visited { color: rgba(255,215,230,0.92) !important; }
/* -- NAVBAR ROW 2 -- */
#tr-navbar-inner2 { background: rgba(0,0,0,0.15) !important; border-top: 1px solid rgba(255,100,150,0.15) !important; }
#tr-navbar-inner2 a { border-right: none !important; padding: 6px 14px !important; font-size: 11px !important; color: rgba(255,200,220,0.8) !important; }
#tr-navbar-inner2 a:hover { background: rgba(255,48,112,0.85) !important; color: #fff !important; }
#tr-navbar-inner2 a:visited { color: rgba(255,200,220,0.8) !important; }
#tr-navbar-inner2 .tr-post-btn { background: #fff !important; color: #c01848 !important; border-radius: 20px !important; padding: 4px 16px !important; margin: 4px 8px !important; font-size: 11px !important; font-weight: 800 !important; }
#tr-navbar-inner2 .tr-post-btn:hover { background: #fce8f0 !important; color: #8a0a30 !important; }
/* -- DIRECTORY BAR & BUTTONS -- */
#tr-directory-bar {
background: #0e0006 !important;
padding: 14px 20px !important;
text-align: center !important;
border-bottom: 2px solid #c01848 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 10px !important;
}
/* MAIN BUTTON - HOVER BUG FIXED: removed font-size/letter-spacing/padding from :hover */
#tr-directory-btn {
display: inline-block !important;
font-family: "Raleway", sans-serif !important;
font-size: 22px !important;
font-weight: 900 !important;
letter-spacing: 5px !important;
text-transform: uppercase !important;
padding: 14px 80px !important;
border-radius: 4px !important;
text-decoration: none !important;
border: 1px solid rgba(255,180,210,0.3) !important;
color: #fff !important;
background: linear-gradient(135deg,#8a0a30 0%,#c01848 40%,#e02060 60%,#c01848 80%,#8a0a30 100%) !important;
box-shadow: 0 4px 30px rgba(192,24,72,0.5) !important;
}
#tr-directory-btn:hover {
background: linear-gradient(135deg,#a01038 0%,#e02060 40%,#ff4080 60%,#e02060 80%,#a01038 100%) !important;
color: #fff !important;
text-decoration: none !important;
}
#tr-directory-btn::before { content: "\2726 " !important; color: rgba(255,200,220,0.7) !important; }
#tr-directory-btn::after { content: " \2726" !important; color: rgba(255,200,220,0.7) !important; }
/* INDEPENDENT DIRECTORY BUTTON - smaller pill below main button */
#tr-indep-btn {
display: inline-block !important;
font-family: "Raleway", sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 6px 28px !important;
border-radius: 20px !important;
text-decoration: none !important;
border: 1px solid rgba(255,100,150,0.35) !important;
color: rgba(255,200,220,0.85) !important;
background: rgba(255,255,255,0.05) !important;
}
#tr-indep-btn:hover {
background: rgba(192,24,72,0.3) !important;
color: #fff !important;
text-decoration: none !important;
border-color: rgba(255,100,150,0.7) !important;
}
/* -- PROMO BAR (top - contests, centered + eye-catching) -- */
@keyframes tr-promo-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(192,24,72,0); } 50% { box-shadow: 0 0 18px 2px rgba(192,24,72,0.22); } }
@keyframes tr-og-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); } 50% { box-shadow: 0 0 18px 2px rgba(212,175,55,0.18); } }
#tr-promo-bar { background: linear-gradient(135deg,#0e0006 0%,#170009 50%,#0e0006 100%) !important; border-top: 1px solid rgba(255,100,150,0.15) !important; border-bottom: 2px solid rgba(255,100,150,0.25) !important; padding: 14px 20px !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 16px !important; width: 100% !important; flex-wrap: wrap !important; }
.tr-promo-card { display: flex !important; align-items: center !important; gap: 14px !important; padding: 14px 28px !important; border-radius: 8px !important; text-decoration: none !important; transition: all 0.25s !important; position: relative !important; overflow: hidden !important; min-width: 280px !important; max-width: 460px !important; flex: 1 !important; }
.tr-promo-contest { background: linear-gradient(135deg,#2a0010 0%,#1a0008 100%) !important; border: 1px solid rgba(224,32,96,0.4) !important; animation: tr-promo-pulse 3s ease-in-out infinite !important; }
.tr-promo-og { background: linear-gradient(135deg,#1e1000 0%,#120800 100%) !important; border: 1px solid rgba(212,175,55,0.4) !important; animation: tr-og-pulse 3s ease-in-out 1.5s infinite !important; }
.tr-promo-card:hover { transform: translateY(-2px) !important; text-decoration: none !important; }
.tr-promo-contest:hover { background: linear-gradient(135deg,#380014 0%,#220009 100%) !important; border-color: rgba(224,32,96,0.7) !important; }
.tr-promo-og:hover { background: linear-gradient(135deg,#2a1800 0%,#1a0e00 100%) !important; border-color: rgba(212,175,55,0.7) !important; }
.tr-promo-card-icon { font-size: 28px !important; flex-shrink: 0 !important; line-height: 1 !important; position: relative !important; z-index: 1 !important; }
.tr-promo-card-body { flex: 1 !important; position: relative !important; z-index: 1 !important; }
.tr-promo-card-tag { font-family: "Raleway", sans-serif !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; margin-bottom: 3px !important; }
.tr-promo-contest .tr-promo-card-tag { color: rgba(255,100,150,0.7) !important; }
.tr-promo-og .tr-promo-card-tag { color: rgba(212,175,55,0.7) !important; }
.tr-promo-card-title { font-family: "Raleway", sans-serif !important; font-size: 15px !important; font-weight: 900 !important; margin-bottom: 2px !important; letter-spacing: 0.3px !important; }
.tr-promo-contest .tr-promo-card-title { color: #ffb0d0 !important; }
.tr-promo-og .tr-promo-card-title { color: #ffd060 !important; }
.tr-promo-card-sub { font-family: "Raleway", sans-serif !important; font-size: 11px !important; color: rgba(255,200,220,0.5) !important; line-height: 1.4 !important; }
.tr-promo-card-arrow { font-size: 22px !important; flex-shrink: 0 !important; position: relative !important; z-index: 1 !important; }
.tr-promo-contest .tr-promo-card-arrow { color: rgba(224,32,96,0.5) !important; }
.tr-promo-og .tr-promo-card-arrow { color: rgba(212,175,55,0.5) !important; }
.tr-promo-card:hover .tr-promo-card-arrow { color: #fff !important; }
.tr-promo-card-divider { width: 1px !important; height: 50px !important; background: rgba(255,100,150,0.15) !important; flex-shrink: 0 !important; align-self: center !important; }
/* Non-clickable promo card (OG 500) */
.tr-promo-no-link { cursor: default !important; }
.tr-promo-no-link:hover { transform: none !important; background: inherit !important; border-color: inherit !important; box-shadow: inherit !important; }
.tr-bottom-og.tr-promo-no-link:hover { transform: none !important; border-color: rgba(212,175,55,0.35) !important; box-shadow: 0 4px 30px rgba(212,175,55,0.08) !important; }
.tr-promo-og.tr-promo-no-link:hover { background: linear-gradient(135deg,#1e1000 0%,#120800 100%) !important; border-color: rgba(212,175,55,0.4) !important; }
/* -- WE CAN HELP STRIP (bottom) -- */
#tr-help-strip { background: linear-gradient(135deg,#1a0008 0%,#2a0012 50%,#1a0008 100%) !important; border-top: 1px solid rgba(255,100,150,0.2) !important; border-bottom: 1px solid rgba(255,100,150,0.2) !important; padding: 14px 24px !important; width: 100% !important; }
#tr-help-strip-inner { max-width: 1380px !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; flex-wrap: wrap !important; }
#tr-help-strip-text { font-family: "Raleway", sans-serif !important; font-size: 13px !important; color: rgba(255,200,220,0.8) !important; display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
#tr-help-strip-text strong { color: #fff !important; font-weight: 900 !important; }
#tr-help-strip-text em { color: #ff8090 !important; font-style: normal !important; font-weight: 900 !important; font-size: 14px !important; }
#tr-help-strip-text span { color: rgba(255,180,210,0.5) !important; font-size: 12px !important; }
#tr-help-strip-btn { display: inline-block !important; background: linear-gradient(135deg,#8a0a30,#c01848) !important; color: #fff !important; font-family: "Raleway", sans-serif !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; padding: 9px 28px !important; border-radius: 4px !important; text-decoration: none !important; border: 1px solid rgba(255,150,190,0.3) !important; white-space: nowrap !important; flex-shrink: 0 !important; }
#tr-help-strip-btn:hover { background: linear-gradient(135deg,#a01038,#e02060) !important; color: #fff !important; text-decoration: none !important; }
/* -- BOTTOM PROMO CARDS (contests, centered) -- */
#tr-bottom-promo { display: flex !important; justify-content: center !important; align-items: stretch !important; gap: 14px !important; padding: 16px 20px !important; background: linear-gradient(135deg,#0a0004 0%,#120006 50%,#0a0004 100%) !important; border-top: 2px solid rgba(255,100,150,0.2) !important; flex-wrap: wrap !important; width: 100% !important; }
.tr-bottom-promo-card { display: flex !important; align-items: flex-start !important; gap: 14px !important; padding: 16px 20px !important; text-decoration: none !important; position: relative !important; overflow: hidden !important; transition: all 0.25s !important; border-radius: 8px !important; max-width: 520px !important; flex: 1 !important; min-width: 240px !important; }
.tr-bottom-contest { background: linear-gradient(135deg,#2a0010 0%,#1a0008 100%) !important; border: 1px solid rgba(224,32,96,0.35) !important; box-shadow: 0 4px 30px rgba(192,24,72,0.12) !important; }
.tr-bottom-og { background: linear-gradient(135deg,#1e1000 0%,#120800 100%) !important; border: 1px solid rgba(212,175,55,0.35) !important; box-shadow: 0 4px 30px rgba(212,175,55,0.08) !important; }
.tr-bottom-promo-card:hover { transform: translateY(-2px) !important; text-decoration: none !important; }
.tr-bottom-contest:hover { border-color: rgba(224,32,96,0.65) !important; box-shadow: 0 8px 40px rgba(192,24,72,0.22) !important; }
.tr-bottom-og:hover { border-color: rgba(212,175,55,0.65) !important; box-shadow: 0 8px 40px rgba(212,175,55,0.16) !important; }
.tr-bottom-promo-glow { position: absolute !important; top: -60px !important; left: -60px !important; width: 200px !important; height: 200px !important; border-radius: 50% !important; pointer-events: none !important; opacity: 0.08 !important; }
.tr-bottom-contest .tr-bottom-promo-glow { background: radial-gradient(circle,#e02060,transparent) !important; }
.tr-bottom-og .tr-bottom-promo-glow { background: radial-gradient(circle,#d4af37,transparent) !important; }
.tr-bottom-promo-icon { font-size: 28px !important; flex-shrink: 0 !important; line-height: 1 !important; position: relative !important; z-index: 1 !important; margin-top: 2px !important; }
.tr-bottom-promo-content { flex: 1 !important; position: relative !important; z-index: 1 !important; }
.tr-bottom-promo-tag { font-family: "Raleway", sans-serif !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: 2px !important; text-transform: uppercase !important; margin-bottom: 4px !important; }
.tr-bottom-contest .tr-bottom-promo-tag { color: rgba(255,100,150,0.65) !important; }
.tr-bottom-og .tr-bottom-promo-tag { color: rgba(212,175,55,0.65) !important; }
.tr-bottom-promo-title { font-family: "Raleway", sans-serif !important; font-size: 15px !important; font-weight: 900 !important; margin-bottom: 6px !important; }
.tr-bottom-contest .tr-bottom-promo-title { color: #ffb0d0 !important; }
.tr-bottom-og .tr-bottom-promo-title { color: #ffd060 !important; }
.tr-bottom-promo-desc { font-family: "Raleway", sans-serif !important; font-size: 11.5px !important; color: rgba(255,200,220,0.6) !important; line-height: 1.65 !important; margin-bottom: 10px !important; }
.tr-bottom-promo-desc strong { color: #fff !important; }
.tr-bottom-promo-cta { display: inline-block !important; font-family: "Raleway", sans-serif !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 1px !important; padding: 6px 16px !important; border-radius: 20px !important; text-transform: uppercase !important; }
.tr-bottom-contest .tr-bottom-promo-cta { background: rgba(192,24,72,0.2) !important; border: 1px solid rgba(192,24,72,0.4) !important; color: #ffb0d0 !important; }
.tr-bottom-og .tr-bottom-promo-cta { background: rgba(212,175,55,0.15) !important; border: 1px solid rgba(212,175,55,0.35) !important; color: #ffd060 !important; }
.tr-bottom-promo-card:hover .tr-bottom-promo-cta { filter: brightness(1.2) !important; }
/* Mobile promos */
@media (max-width: 768px) {
#tr-bottom-promo { gap: 14px !important; padding: 20px 14px !important; }
.tr-bottom-promo-card { padding: 20px 18px !important; }
.tr-bottom-promo-title { font-size: 16px !important; }
.tr-bottom-promo-icon { font-size: 30px !important; }
#tr-help-strip-inner { justify-content: center !important; text-align: center !important; }
#tr-promo-bar { gap: 10px !important; padding: 10px 12px !important; }
.tr-promo-card { min-width: 100% !important; padding: 12px 16px !important; }
.tr-promo-card-divider { display: none !important; }
}
/* -- INDUSTRY PROMO STRIP -- */
#tr-industry-strip { background: linear-gradient(135deg,#120006 0%,#1e000c 50%,#120006 100%) !important; border-bottom: 1px solid rgba(255,100,150,0.25) !important; padding: 10px 20px !important; text-align: center !important; width: 100% !important; }
#tr-industry-strip-inner { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; flex-wrap: wrap !important; max-width: 1380px !important; margin: 0 auto !important; }
#tr-industry-strip-text { font-family: "Raleway", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; color: rgba(255,200,220,0.85) !important; letter-spacing: 0.3px !important; }
#tr-industry-strip-text strong { color: #fff !important; font-weight: 900 !important; }
#tr-industry-strip-text em { color: #ff8090 !important; font-style: normal !important; font-weight: 900 !important; }
#tr-industry-strip-btn { display: inline-block !important; background: linear-gradient(135deg,#8a0a30,#c01848) !important; color: #fff !important; font-family: "Raleway", sans-serif !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 2px !important; text-transform: uppercase !important; padding: 7px 22px !important; border-radius: 20px !important; text-decoration: none !important; border: 1px solid rgba(255,150,190,0.3) !important; box-shadow: 0 2px 14px rgba(192,24,72,0.35) !important; white-space: nowrap !important; }
#tr-industry-strip-btn:hover { background: linear-gradient(135deg,#a01038,#e02060) !important; color: #fff !important; text-decoration: none !important; }
/* -- TICKER -- */
#tr-breadcrumb { overflow: hidden !important; background: #1a0008 !important; border-top: 1px solid rgba(255,48,112,0.4) !important; border-bottom: 1px solid rgba(255,48,112,0.4) !important; height: 32px !important; line-height: 32px !important; }
#tr-breadcrumb .navbar { display: none !important; }
#tr-breadcrumb::after {
content: "TORONTO ESCORTS * MONTREAL ESCORTS * VANCOUVER ESCORTS * OTTAWA ESCORTS * CANADA\'S #1 ADULT REVIEW FORUM * POST A REVIEW TODAY * 100% ANONYMOUS * NEW REVIEWS ADDED DAILY * JOIN FREE" !important;
display: inline-block !important;
color: #ff6090 !important;
font-family: "Raleway", sans-serif !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
white-space: nowrap !important;
-webkit-animation: tr-ticker 60s linear infinite !important;
animation: tr-ticker 60s linear infinite !important;
}
@-webkit-keyframes tr-ticker { 0% { -webkit-transform: translateX(100vw); } 100% { -webkit-transform: translateX(-100%); } }
@keyframes tr-ticker { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } }
/* -- WELCOME BANNER -- */
#tr-welcome-banner { background: linear-gradient(135deg,#3a0018 0%,#1a0008 100%) !important; border: 1px solid rgba(255,100,150,0.3) !important; border-radius: 6px !important; padding: 12px 20px !important; margin-bottom: 14px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; flex-wrap: wrap !important; box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important; }
#tr-welcome-banner-text h2 { font-family: "Raleway", sans-serif !important; font-size: 16px !important; font-weight: 800 !important; color: #fff !important; margin: 0 0 4px 0 !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important; }
#tr-welcome-banner-text p { font-family: "Raleway", sans-serif !important; font-size: 12px !important; color: rgba(255,220,235,0.85) !important; margin: 0 !important; line-height: 1.5 !important; }
#tr-welcome-banner-btns { display: flex !important; gap: 8px !important; align-items: center !important; flex-shrink: 0 !important; }
.tr-wb-join { background: #c01848 !important; color: #fff !important; font-family: "Raleway", sans-serif !important; font-weight: 800 !important; font-size: 13px !important; padding: 8px 20px !important; border-radius: 20px !important; text-decoration: none !important; border: 2px solid #e02060 !important; white-space: nowrap !important; }
.tr-wb-join:hover { background: #e02060 !important; color: #fff !important; text-decoration: none !important; }
.tr-wb-login { background: rgba(255,255,255,0.15) !important; color: #fff !important; font-family: "Raleway", sans-serif !important; font-weight: 700 !important; font-size: 13px !important; padding: 8px 18px !important; border-radius: 20px !important; text-decoration: none !important; border: 1px solid rgba(255,255,255,0.4) !important; white-space: nowrap !important; }
.tr-wb-login:hover { border-color: rgba(255,100,150,0.6) !important; color: #fff !important; text-decoration: none !important; }
/* -- SIDEBAR -- */
#tr-sidebar {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
position: -webkit-sticky !important;
position: sticky !important;
top: 10px !important;
width: 210px !important;
min-width: 210px !important;
}
.sb-space {
background: rgba(255,248,251,0.9) !important;
border: 1px dashed #e8c0d0 !important;
border-radius: 4px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
font-size: 10px !important;
color: #c0a0b4 !important;
width: 210px !important;
min-width: 210px !important;
box-sizing: border-box !important;
}
.sb-600 { height: 600px !important; min-height: 600px !important; display: flex !important; }
.sb-300 { height: 300px !important; min-height: 300px !important; display: flex !important; }
.sb-250 { height: 250px !important; min-height: 250px !important; display: flex !important; }
.sb-90 { height: 90px !important; min-height: 90px !important; display: flex !important; }
.sb-box { background: rgba(255,255,255,0.95) !important; border: 1px solid #e8c0d0 !important; border-radius: 4px !important; overflow: hidden !important; width: 210px !important; }
.sb-head { background: linear-gradient(135deg,#8a0a30 0%,#c01848 100%) !important; color: #fff !important; font-family: "Raleway", sans-serif !important; font-weight: 800 !important; font-size: 11px !important; padding: 6px 10px !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; }
.sb-body { padding: 6px 8px !important; }
.sb-body a { display: block !important; padding: 4px 2px !important; border-bottom: 1px dotted #f0d8e4 !important; font-size: 11px !important; color: #c0306a !important; text-decoration: none !important; }
.sb-body a:last-child { border-bottom: none !important; }
.sb-body a:hover { color: #f03070 !important; }
/* -- FOOTER -- */
#page-footer { background: #120006 !important; border-top: 3px solid #c01848 !important; }
#tr-footer-sponsors { background: #1a000c !important; border-bottom: 1px solid rgba(255,100,150,0.15) !important; padding: 14px 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 16px !important; flex-wrap: wrap !important; }
.tr-footer-sponsor-slot { width: 300px !important; height: 90px !important; background: rgba(255,255,255,0.03) !important; border: 1px dashed rgba(255,100,150,0.25) !important; border-radius: 4px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; color: rgba(255,150,190,0.35) !important; font-family: "Raleway", sans-serif !important; letter-spacing: 1px !important; }
#tr-footer-main { background: linear-gradient(135deg,#1a0008 0%,#2a0012 50%,#1a0008 100%) !important; padding: 30px 20px 20px !important; text-align: center !important; }
#tr-footer-logo-wrap { margin-bottom: 16px !important; }
#tr-footer-logo-wrap img { height: 80px !important; width: auto !important; opacity: 0.92 !important; }
#tr-footer-tagline { font-family: "Raleway", sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: rgba(255,150,190,0.5) !important; margin-bottom: 16px !important; }
#tr-footer-links { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 14px !important; }
#tr-footer-links a { color: rgba(255,210,230,0.8) !important; font-family: "Raleway", sans-serif !important; font-weight: 600 !important; font-size: 12px !important; padding: 5px 12px !important; text-decoration: none !important; border: 1px solid rgba(255,100,150,0.25) !important; border-radius: 20px !important; }
#tr-footer-links a:hover { color: #fff !important; background: rgba(255,48,112,0.25) !important; text-decoration: none !important; }
#tr-footer-contact { font-family: "Raleway", sans-serif !important; font-size: 12px !important; color: rgba(255,180,210,0.6) !important; margin-bottom: 10px !important; }
#tr-footer-contact a { color: #ffb0d0 !important; font-weight: 700 !important; }
#tr-footer-copy { font-size: 10px !important; color: rgba(255,200,220,0.3) !important; font-family: "Raleway", sans-serif !important; line-height: 1.6 !important; }
/* -- SUBFORUM PAGE -- */
.permissions { background: rgba(255,255,255,0.95) !important; border: 1px solid #e8c0d0 !important; border-radius: 5px !important; overflow: hidden !important; }
.permissions h3 { background: linear-gradient(135deg,#3a0018 0%,#6a0828 100%) !important; color: #fff !important; font-family: "Raleway", sans-serif !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 1px !important; text-transform: uppercase !important; padding: 8px 14px !important; margin: 0 !important; }
.permissions p { padding: 8px 14px !important; font-size: 12px !important; color: #4a2030 !important; line-height: 1.9 !important; }
/* -- HAMBURGER BUTTON -- */
#tr-hamburger {
display: none !important;
flex-direction: column !important;
gap: 5px !important;
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,100,150,0.3) !important;
border-radius: 4px !important;
cursor: pointer !important;
padding: 7px 10px !important;
margin: 4px 8px !important;
}
#tr-hamburger span {
display: block !important;
width: 20px !important;
height: 2px !important;
background: #fff !important;
border-radius: 2px !important;
transition: all 0.2s !important;
}
/* -- MOBILE OVERLAY -- */
#tr-mobile-overlay {
display: none;
position: fixed !important;
inset: 0 !important;
background: rgba(0,0,0,0.6) !important;
z-index: 9998 !important;
}
#tr-mobile-overlay.open {
display: block !important;
}
/* -- MOBILE SLIDE OUT MENU -- */
#tr-mobile-menu {
display: block;
position: fixed !important;
top: 0 !important;
left: -300px !important;
width: 280px !important;
height: 100vh !important;
background: linear-gradient(180deg,#1a0008 0%,#120005 100%) !important;
border-right: 2px solid #c01848 !important;
z-index: 9999 !important;
transition: left 0.3s ease !important;
overflow-y: auto !important;
}
#tr-mobile-menu.open {
left: 0 !important;
}
#tr-mobile-menu-inner {
padding: 0 0 30px 0 !important;
}
#tr-mobile-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 14px 16px !important;
border-bottom: 1px solid rgba(255,100,150,0.2) !important;
background: rgba(0,0,0,0.2) !important;
}
#tr-mobile-header img {
height: 40px !important;
width: auto !important;
}
#tr-mobile-close {
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,100,150,0.2) !important;
border-radius: 4px !important;
color: rgba(255,200,220,0.8) !important;
font-size: 16px !important;
cursor: pointer !important;
padding: 4px 10px !important;
line-height: 1 !important;
}
#tr-mobile-user {
padding: 10px 16px !important;
font-size: 12px !important;
color: rgba(255,180,210,0.7) !important;
font-family: "Raleway", sans-serif !important;
border-bottom: 1px solid rgba(255,100,150,0.15) !important;
background: rgba(192,24,72,0.08) !important;
}
#tr-mobile-user strong {
color: #fff !important;
font-weight: 800 !important;
}
.tr-mobile-divider {
padding: 8px 16px 4px !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: rgba(255,100,150,0.5) !important;
font-family: "Raleway", sans-serif !important;
margin-top: 4px !important;
}
#tr-mobile-menu-inner a {
display: block !important;
padding: 11px 20px !important;
color: rgba(255,210,230,0.85) !important;
font-family: "Raleway", sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(255,100,150,0.07) !important;
transition: background 0.15s !important;
}
#tr-mobile-menu-inner a:hover {
background: rgba(192,24,72,0.15) !important;
color: #fff !important;
}
a.tr-mobile-logout {
color: rgba(255,150,150,0.8) !important;
margin-top: 4px !important;
}
a.tr-mobile-join {
background: #c01848 !important;
color: #fff !important;
margin: 10px 16px !important;
border-radius: 4px !important;
text-align: center !important;
font-weight: 800 !important;
border-bottom: none !important;
}
/* -- WELCOME BANNER BUTTON FIXES -- */
#tr-welcome-banner-btns a.tr-wb-join {
background: #c01848 !important;
color: #fff !important;
border: 2px solid #e02060 !important;
padding: 8px 20px !important;
border-radius: 20px !important;
font-weight: 800 !important;
font-size: 13px !important;
text-decoration: none !important;
}
#tr-welcome-banner-btns a.tr-wb-login {
background: rgba(255,255,255,0.15) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.4) !important;
padding: 8px 18px !important;
border-radius: 20px !important;
font-weight: 700 !important;
font-size: 13px !important;
text-decoration: none !important;
}
/* -- LOGOUT BUTTON IN NAVBAR -- */
#tr-navbar-inner2 a.tr-logout-btn {
background: rgba(255,255,255,0.08) !important;
color: rgba(255,200,220,0.8) !important;
border: 1px solid rgba(255,100,150,0.3) !important;
border-radius: 20px !important;
padding: 4px 14px !important;
font-size: 11px !important;
font-weight: 700 !important;
margin: 4px 6px !important;
}
#tr-navbar-inner2 a.tr-logout-btn:hover {
background: rgba(255,48,112,0.2) !important;
color: #fff !important;
}
/* -- ADVERTISE BUTTON IN NAVBAR -- */
#tr-navbar-inner2 a.tr-advertise-btn {
color: #ffb0d0 !important;
font-weight: 800 !important;
border-left: 1px solid rgba(255,100,150,0.2) !important;
padding-left: 14px !important;
}
#tr-navbar-inner2 a.tr-advertise-btn:hover {
color: #fff !important;
background: rgba(192,24,72,0.2) !important;
}
/* -- SPONSOR PLACEHOLDER CTA -- */
.sponsor-cta {
font-size: 9px !important;
color: rgba(192,24,72,0.5) !important;
font-weight: 700 !important;
font-family: "Raleway", sans-serif !important;
display: block !important;
}
/* -- MOBILE PORTRAIT (<=768px wide) -- */
@media (max-width: 768px) {
#tr-header-inner { padding: 8px 12px !important; }
#tr-logo img { height: 60px !important; }
#tr-header-right { display: none !important; }
#tr-welcome-banner { display: flex !important; }
#tr-navbar-inner { flex-wrap: nowrap !important; overflow: hidden !important; }
#tr-navbar-inner a { display: none !important; }
#tr-hamburger { display: flex !important; }
#tr-directory-btn { font-size: 14px !important; letter-spacing: 2px !important; padding: 10px 20px !important; width: 92% !important; display: block !important; margin: 0 auto !important; text-align: center !important; }
#tr-directory-btn:hover { font-size: 14px !important; letter-spacing: 2px !important; padding: 10px 20px !important; }
#tr-indep-btn { font-size: 11px !important; padding: 5px 18px !important; }
#tr-sidebar { display: none !important; }
.row-item dd.lastpost { display: none !important; }
#tr-page-wrap { padding: 6px !important; grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
.forabg .row-item dd.topics { display: none !important; }
.forabg .row-item dd.posts { display: none !important; }
}
@media screen and (max-width: 768px) {
div#tr-navbar div#tr-navbar-inner a { display: none !important; visibility: hidden !important; }
div#tr-navbar div#tr-navbar-inner { overflow: hidden !important; }
button#tr-hamburger { display: flex !important; visibility: visible !important; }
}
/* ============================================================
FORUM & POST PAGES - Clean White Theme
============================================================ */
/* Page background */
#page-body { background: #f8f6f7 !important; padding: 16px !important; }
#page-content { background: #f8f6f7 !important; }
/* Reset phpBB default backgrounds */
.forumbg, .forabg, .topiclist, .panel, .post,
.postbody, .row1, .row2, .bg1, .bg2,
table.tablebg, .tablebg { background: transparent !important; }
/* ============================================================
HIDE ONLY THE MYSTERY ICON BUTTONS
Keep search box visible
============================================================ */
.action-bar a.button-icon-only { display: none !important; }
.action-bar .button-search-end { display: none !important; }
dl.postprofile dd.profile-contact,
dl.postprofile .dropdown-container { display: none !important; }
/* ============================================================
ACTION BAR - contains NEW TOPIC + search box
============================================================ */
.action-bar {
background: #fff !important;
border: 1px solid #e4dde0 !important;
border-radius: 8px !important;
padding: 10px 16px !important;
margin-bottom: 12px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: wrap !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.action-bar a.button {
background: #1a0008 !important;
color: #fff !important;
border: none !important;
border-radius: 5px !important;
font-family: Raleway, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
padding: 9px 22px !important;
text-decoration: none !important;
white-space: nowrap !important;
}
.action-bar a.button:hover { background: #c01848 !important; }
/* Search box */
.action-bar .search-box { display: flex !important; align-items: center !important; gap: 4px !important; }
.action-bar .search-box input,
.action-bar input.inputbox,
.action-bar input[type=search],
.action-bar input[type=text] {
background: #f8f6f7 !important;
border: 1px solid #ddd !important;
border-radius: 5px !important;
color: #333 !important;
padding: 7px 12px !important;
font-size: 13px !important;
font-family: Raleway, sans-serif !important;
min-width: 180px !important;
display: block !important;
}
/* Search submit button - keep visible and clean */
.action-bar .search-box button,
.action-bar .button-search {
background: #1a0008 !important;
color: #fff !important;
border: none !important;
border-radius: 5px !important;
padding: 7px 12px !important;
font-size: 11px !important;
font-family: Raleway, sans-serif !important;
font-weight: 700 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
}
.action-bar .button-search:hover { background: #c01848 !important; }
.action-bar a:not(.button):not(.button-search) {
color: #888 !important;
font-size: 12px !important;
font-family: Raleway, sans-serif !important;
text-decoration: none !important;
}
.action-bar a:not(.button):hover { color: #c01848 !important; }
.action-bar span, .action-bar p {
color: #888 !important;
font-size: 12px !important;
font-family: Raleway, sans-serif !important;
}
.action-bar.bar-top, .action-bar.bar-bottom {
background: #fff !important;
border: 1px solid #e4dde0 !important;
border-radius: 8px !important;
padding: 10px 16px !important;
margin-bottom: 14px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
/* ============================================================
TOPIC LIST
============================================================ */
.topiclist.header { background: transparent !important; border: none !important; margin-bottom: 4px !important; }
.topiclist.header li { background: transparent !important; border: none !important; padding: 2px 16px !important; }
.topiclist.header li span, .topiclist.header li a {
color: #bbb !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
font-family: Raleway, sans-serif !important;
text-decoration: none !important;
}
.topiclist li.row {
background: #fff !important;
border: 1px solid #e8e0e4 !important;
border-radius: 7px !important;
margin-bottom: 8px !important;
padding: 14px 20px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
transition: border-color 0.12s !important;
}
.topiclist li.row:hover { border-color: #c01848 !important; box-shadow: 0 2px 8px rgba(192,24,72,0.08) !important; }
.topiclist li.row.sticky { border-left: 4px solid #c01848 !important; }
.topiclist li.row.announce { border-left: 4px solid #c8a000 !important; }
.topiclist .topic-title a {
color: #111 !important;
font-family: Raleway, sans-serif !important;
font-size: 15px !important;
font-weight: 800 !important;
text-decoration: none !important;
line-height: 1.45 !important;
}
.topiclist .topic-title a:hover { color: #c01848 !important; }
.topiclist .topic-poster,
.topiclist .topic-poster * { color: #999 !important; font-size: 12px !important; font-family: Raleway, sans-serif !important; }
.topiclist .topic-poster a { color: #777 !important; font-weight: 700 !important; text-decoration: none !important; }
.topiclist .topic-poster a:hover { color: #c01848 !important; }
.topiclist .posts { color: #222 !important; font-size: 15px !important; font-weight: 800 !important; font-family: Raleway, sans-serif !important; }
.topiclist .views { color: #999 !important; font-size: 13px !important; font-family: Raleway, sans-serif !important; }
.topiclist .lastpost, .topiclist .lastpost * { color: #888 !important; font-size: 12px !important; font-family: Raleway, sans-serif !important; }
.topiclist .lastpost a { color: #444 !important; font-weight: 700 !important; text-decoration: none !important; }
.topiclist .lastpost a:hover { color: #c01848 !important; }
.topiclist .topic-icon i.icon-red { color: #c01848 !important; }
.topiclist .topic-icon i.icon-gray { color: #ddd !important; }
.pagination a, .pagination span { color: #555 !important; font-size: 12px !important; font-family: Raleway, sans-serif !important; }
.pagination strong { color: #c01848 !important; font-weight: 800 !important; }
.pagination a:hover { color: #c01848 !important; }
/* ============================================================
POST VIEW
============================================================ */
h2.topic-title {
font-family: Raleway, sans-serif !important;
font-size: 21px !important;
font-weight: 900 !important;
color: #111 !important;
margin-bottom: 16px !important;
padding-bottom: 12px !important;
border-bottom: 2px solid #ede0e4 !important;
line-height: 1.35 !important;
}
h2.topic-title a { color: #111 !important; text-decoration: none !important; }
h2.topic-title a:hover { color: #c01848 !important; }
/* Topic tools links */
.topic-tools a { color: #777 !important; font-size: 12px !important; font-family: Raleway, sans-serif !important; font-weight: 600 !important; text-decoration: none !important; }
.topic-tools a:hover { color: #c01848 !important; text-decoration: underline !important; }
.topic-tools i { display: none !important; }
div.post {
background: #fff !important;
border: 1px solid #e8e0e4 !important;
border-radius: 8px !important;
margin-bottom: 16px !important;
overflow: hidden !important;
box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
}
div.post:hover { border-color: #ccc !important; }
div.post > div.inner { padding: 0 !important; display: flex !important; }
/* User panel */
dl.postprofile {
background: #faf8f9 !important;
border-right: 1px solid #ede5e8 !important;
padding: 20px 14px !important;
width: 165px !important;
min-width: 165px !important;
max-width: 165px !important;
flex-shrink: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
box-sizing: border-box !important;
}
dl.postprofile dt {
width: 100% !important;
padding: 0 0 12px 0 !important;
margin: 0 0 12px 0 !important;
border-bottom: 1px solid #ede5e8 !important;
}
dl.postprofile dt a,
dl.postprofile dt strong {
color: #1a0008 !important;
font-family: Raleway, sans-serif !important;
font-size: 15px !important;
font-weight: 900 !important;
text-decoration: none !important;
word-break: break-word !important;
display: block !important;
line-height: 1.3 !important;
}
dl.postprofile dt a:hover { color: #c01848 !important; }
dl.postprofile dd.profile-rank {
background: #fffbea !important;
border: 1px solid #e8d060 !important;
border-radius: 20px !important;
color: #6a5000 !important;
font-size: 10px !important;
font-weight: 800 !important;
font-family: Raleway, sans-serif !important;
padding: 4px 10px !important;
margin: 0 0 10px 0 !important;
text-align: center !important;
line-height: 1.4 !important;
display: inline-block !important;
}
dl.postprofile dd {
color: #999 !important;
font-size: 11px !important;
font-family: Raleway, sans-serif !important;
margin: 3px 0 !important;
width: 100% !important;
text-align: center !important;
}
dl.postprofile dd strong {
color: #666 !important;
font-size: 10px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
font-family: Raleway, sans-serif !important;
}
/* Post body */
div.postbody {
flex: 1 !important;
padding: 20px 26px !important;
min-width: 0 !important;
background: #fff !important;
}
div.postbody h3 { display: none !important; }
div.postbody h3.first {
display: block !important;
font-family: Raleway, sans-serif !important;
font-size: 15px !important;
font-weight: 800 !important;
color: #333 !important;
margin-bottom: 8px !important;
}
div.postbody h3.first a { color: #333 !important; text-decoration: none !important; }
p.author {
color: #bbb !important;
font-size: 12px !important;
font-family: Raleway, sans-serif !important;
margin-bottom: 18px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid #f0eaec !important;
display: flex !important;
align-items: center !important;
gap: 5px !important;
flex-wrap: wrap !important;
}
p.author a { color: #555 !important; text-decoration: none !important; font-weight: 700 !important; font-family: Raleway, sans-serif !important; }
p.author a:hover { color: #c01848 !important; }
p.author strong { color: #333 !important; font-weight: 800 !important; }
p.author time { color: #bbb !important; }
p.author i { display: none !important; }
div.content {
color: #222 !important;
font-family: Raleway, sans-serif !important;
font-size: 14.5px !important;
line-height: 1.95 !important;
word-wrap: break-word !important;
white-space: normal !important;
}
div.content strong, div.content b { color: #111 !important; font-weight: 800 !important; }
div.content a { color: #c01848 !important; }
div.content a:hover { color: #8a0a30 !important; text-decoration: underline !important; }
ul.post-buttons { margin-bottom: 12px !important; display: flex !important; gap: 6px !important; list-style: none !important; padding: 0 !important; }
ul.post-buttons a { background: #f5f2f3 !important; border: 1px solid #e4dde0 !important; border-radius: 4px !important; padding: 5px 11px !important; color: #666 !important; font-size: 11px !important; font-family: Raleway, sans-serif !important; font-weight: 700 !important; text-decoration: none !important; }
ul.post-buttons a:hover { background: #1a0008 !important; color: #fff !important; border-color: #1a0008 !important; }
div.notice { color: #bbb !important; font-size: 11px !important; font-style: italic !important; font-family: Raleway, sans-serif !important; margin-top: 14px !important; padding-top: 10px !important; border-top: 1px solid #f5f0f2 !important; }
div.back2top { text-align: right !important; padding: 8px 14px 6px !important; border-top: 1px solid #f5f0f2 !important; background: #faf8f9 !important; }
div.back2top a, div.back2top i { color: #ddd !important; font-size: 12px !important; text-decoration: none !important; }
div.back2top a:hover, div.back2top a:hover i { color: #c01848 !important; }
/* ============================================================
SUBFORUM LIST, PANELS, MISC
============================================================ */
.forabg { background: transparent !important; border: none !important; margin-bottom: 12px !important; }
.forabg .topiclist li.row { background: #fff !important; border: 1px solid #e8e0e4 !important; border-radius: 7px !important; margin-bottom: 8px !important; padding: 14px 20px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; }
.forabg .forums dt a { color: #111 !important; font-weight: 800 !important; font-size: 15px !important; font-family: Raleway, sans-serif !important; text-decoration: none !important; }
.forabg .forums dt a:hover { color: #c01848 !important; }
.forabg .forums dd.desc { color: #888 !important; font-size: 12px !important; font-family: Raleway, sans-serif !important; }
.forabg .lastpost, .forabg .lastpost * { color: #888 !important; font-size: 12px !important; font-family: Raleway, sans-serif !important; }
.forabg .lastpost a { color: #444 !important; font-weight: 700 !important; }
.panel { background: #fff !important; border: 1px solid #e8e0e4 !important; border-radius: 7px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; }
.panel .inner { padding: 16px !important; background: #fff !important; }
.linkage { display: none !important; }
.quick-reply textarea { background: #fff !important; border: 1px solid #ddd !important; border-radius: 5px !important; color: #222 !important; font-family: Raleway, sans-serif !important; font-size: 13px !important; padding: 10px !important; width: 100% !important; }
/* Mobile */
@media (max-width: 600px) {
div.post > div.inner { flex-direction: column !important; }
dl.postprofile { max-width: 100% !important; width: 100% !important; min-width: 0 !important; border-right: none !important; border-bottom: 1px solid #ede5e8 !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 12px 16px !important; }
dl.postprofile dt { margin-bottom: 0 !important; padding: 0 !important; border-bottom: none !important; }
}
/* Hide bottom stats, online list, who is online boxes */
.stat-block,
.online-list,
div.stat-block { display: none !important; }
/* Fix login welcome banner stretch */
#tr-welcome-banner { box-sizing: border-box !important; width: 100% !important; overflow: hidden !important; }
#tr-welcome-banner-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; flex-wrap: wrap !important; max-width: 1380px !important; margin: 0 auto !important; padding: 12px 20px !important; }
#tr-welcome-banner-text { flex: 1 !important; min-width: 0 !important; }
#tr-welcome-banner-btns { display: flex !important; gap: 10px !important; align-items: center !important; flex-shrink: 0 !important; }
#tr-welcome-banner-btns a { white-space: nowrap !important; }
#tr-welcome-banner form { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; }
#tr-welcome-banner input[type=text],
#tr-welcome-banner input[type=password] { width: auto !important; max-width: 140px !important; min-width: 80px !important; padding: 6px 10px !important; font-size: 12px !important; border-radius: 4px !important; }
#tr-welcome-banner input[type=submit],
#tr-welcome-banner button[type=submit] { white-space: nowrap !important; padding: 6px 14px !important; font-size: 12px !important; }
.login-form, #loginform { max-width: 480px !important; margin: 20px auto !important; }
/* ============================================================
BUTTONS AND SEARCH - complete fix
============================================================ */
/* NEW TOPIC / POST REPLY buttons */
.action-bar a.button {
background: #c01848 !important;
color: #fff !important;
border: none !important;
border-radius: 6px !important;
font-family: Raleway, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
padding: 8px 20px !important;
text-decoration: none !important;
white-space: nowrap !important;
display: inline-block !important;
line-height: 1.4 !important;
}
.action-bar a.button:hover { background: #8a0a30 !important; }
.action-bar a.button i,
.action-bar a.button span { color: #fff !important; font-size: 12px !important; font-weight: 800 !important; }
.action-bar a.button .sr-only { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; }
/* Hide mystery icon-only buttons */
.action-bar a.button-icon-only { display: none !important; }
/* SEARCH BOX - force inline-flex on the fieldset/form container */
.action-bar .search-box { display: block !important; }
.action-bar .search-box form,
#topic-search,
#forum-search { display: inline-flex !important; align-items: stretch !important; border: 1px solid #ddd !important; border-radius: 6px !important; overflow: hidden !important; background: #fff !important; height: 34px !important; }
/* Search input */
.action-bar .search-box input.inputbox,
.action-bar .search-box input[type=search],
#topic-search input,
#forum-search input {
background: #fff !important;
border: none !important;
outline: none !important;
padding: 0 12px !important;
font-size: 12px !important;
font-family: Raleway, sans-serif !important;
color: #333 !important;
width: 160px !important;
height: 34px !important;
flex: 1 !important;
box-shadow: none !important;
}
/* Search SUBMIT button - always visible, always readable */
.action-bar .search-box button.button-search,
.action-bar .search-box button[type=submit],
#topic-search button,
#forum-search button {
background: #1a0008 !important;
color: #fff !important;
border: none !important;
border-left: 1px solid #ddd !important;
padding: 0 14px !important;
height: 34px !important;
min-width: 60px !important;
cursor: pointer !important;
font-size: 11px !important;
font-weight: 700 !important;
font-family: Raleway, sans-serif !important;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.action-bar .search-box button.button-search:hover,
#topic-search button:hover { background: #c01848 !important; }
/* Show the sr-only text inside the search button */
.action-bar .search-box button .sr-only,
#topic-search button .sr-only,
#forum-search button .sr-only {
position: static !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
clip: auto !important;
white-space: nowrap !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #fff !important;
}
/* Hide the icon, show text only */
.action-bar .search-box button i,
#topic-search button i,
#forum-search button i { display: none !important; }
/* Hide the advanced search cog button */
.action-bar .search-box a.button-search-end,
#topic-search a.button-search-end { display: none !important; }
/* QUOTE / EDIT / REPORT post buttons */
ul.post-buttons { list-style: none !important; padding: 0 !important; margin: 0 0 12px 0 !important; display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
ul.post-buttons li { list-style: none !important; }
ul.post-buttons li a {
background: #f0eaec !important;
border: 1px solid #d8ccd2 !important;
border-radius: 6px !important;
padding: 5px 12px !important;
color: #555 !important;
font-size: 11px !important;
font-family: Raleway, sans-serif !important;
font-weight: 700 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
white-space: nowrap !important;
line-height: 1.4 !important;
}
ul.post-buttons li a:hover { background: #c01848 !important; color: #fff !important; border-color: #c01848 !important; }
ul.post-buttons li a i { font-size: 10px !important; color: inherit !important; display: inline !important; }
ul.post-buttons li a .sr-only {
position: static !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
clip: auto !important;
white-space: nowrap !important;
font-size: 11px !important;
color: inherit !important;
}
/* ============================================================
UI FIXES FROM REVIEW - search, buttons, mystery boxes
============================================================ */
/* Hide mystery red box above POST REPLY */
.action-bar > a.button-icon-only,
.action-bar > span:empty,
.action-bar > div:empty { display: none !important; }
/* The specific unidentified red rectangle */
/* removed - too broad */
/* Search box - connected input and button */
.search-box fieldset,
form#topic-search fieldset,
form#forum-search fieldset {
display: inline-flex !important;
align-items: stretch !important;
border: 1.5px solid #c01848 !important;
border-radius: 5px !important;
overflow: hidden !important;
background: #fff !important;
padding: 0 !important;
margin: 0 !important;
height: 34px !important;
}
.search-box input[type=search],
.search-box input.inputbox,
form#topic-search input,
form#forum-search input {
border: none !important;
outline: none !important;
padding: 0 12px !important;
font-size: 12px !important;
font-family: Raleway, sans-serif !important;
color: #333 !important;
background: #fff !important;
width: 150px !important;
height: 34px !important;
box-shadow: none !important;
}
.search-box button[type=submit],
form#topic-search button,
form#forum-search button {
background: #c01848 !important;
color: #fff !important;
border: none !important;
border-left: 1px solid #c01848 !important;
padding: 0 14px !important;
font-size: 11px !important;
font-weight: 800 !important;
font-family: Raleway, sans-serif !important;
cursor: pointer !important;
white-space: nowrap !important;
height: 34px !important;
letter-spacing: 0.5px !important;
}
.search-box button[type=submit]:hover,
form#topic-search button:hover { background: #8a0a30 !important; }
/* Make sr-only text in search button visible */
.search-box button .sr-only,
form#topic-search button .sr-only {
position: static !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
clip: auto !important;
font-size: 11px !important;
color: #fff !important;
}
.search-box button i,
form#topic-search button i { display: none !important; }
/* Hide the advanced search cog */
a.button-search-end { display: none !important; }
/* Empty box next to Quote - hide it */
/* removed - too broad */
/* Report button - red tint */
ul.post-buttons li a[href*="report"] {
border-color: #c01848 !important;
color: #c01848 !important;
background: rgba(192,24,72,0.05) !important;
}
ul.post-buttons li a[href*="report"]:hover {
background: #c01848 !important;
color: #fff !important;
}
/* Quote button - neutral */
ul.post-buttons li a[href*="quote"] {
border-color: #aaa !important;
color: #555 !important;
background: #f5f5f5 !important;
}
ul.post-buttons li a[href*="quote"]:hover {
background: #1a0008 !important;
color: #fff !important;
border-color: #1a0008 !important;
}
/* Post cards - more prominent border */
div.post {
border: 1.5px solid #d0c4c8 !important;
border-radius: 8px !important;
margin-bottom: 14px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
}
div.post:hover { border-color: #c01848 !important; }
/* ============================================================
EXACT SELECTOR FIXES - from DevTools inspection
============================================================ */
/* Mystery red box - Topic tools dropdown */
/* Topic tools - hide only the span trigger, not anchor buttons */
span.button-secondary { display: none !important; }
span.dropdown-trigger.dropdown-select { display: none !important; }
/* Empty box next to Quote - responsive menu link */
a.js-responsive-menu-link,
a.responsive-menu-link { display: none !important; }
/* Any remaining empty anchor boxes in post buttons */
/* removed - too broad */
/* removed - too broad */
/* The quickmod dropdown container */
#quickmod,
.quickmod { display: none !important; }
/* ============================================================
TARGETED HIDE - only specific elements confirmed by DevTools
============================================================ */
/* Topic tools span - the red box */
span.button-secondary { display: none !important; }
span.dropdown-trigger.dropdown-select { display: none !important; }
/* Responsive menu link - empty box next to quote */
a.js-responsive-menu-link { display: none !important; }
a.responsive-menu-link { display: none !important; }
/* quickmod */
#quickmod { display: none !important; }
/* Make sure post-buttons li items are visible */
ul.post-buttons li { display: inline-block !important; }
ul.post-buttons li a { display: inline-flex !important; }
/* Hide responsive-menu hidden li - the mystery standalone box */
li.responsive-menu { display: none !important; }
li.responsive-menu.hidden { display: none !important; }
/* Hide the icon/box symbol inside Report and Quote buttons but keep the text */
ul.post-buttons li a i,
ul.post-buttons li a .icon { display: none !important; }
/* ============================================================
HIDE DISPLAY/SORT BOX AND RETURN TO LINK
============================================================ */
/* Hide the Display / Sort by / Direction / Go box */
.display-options,
form .display-options,
.action-bar form:not(#topic-search):not(#forum-search),
.action-bar.bar-bottom form { display: none !important; }
/* Hide Return to forum link at bottom */
.jumpbox,
#jumpbox,
.jumpbox-return,
dl.jumpbox { display: none !important; }
/* ============================================================
MOBILE FIXES - targeted only
============================================================ */
@media (max-width: 768px) {
/* ── USER PANEL on mobile - show username + rank + posts ── */
div.post > div.inner { flex-direction: column !important; }
dl.postprofile {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
border-right: none !important;
border-bottom: 1px solid #ede5e8 !important;
background: #faf8f9 !important;
padding: 12px 16px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: nowrap !important;
box-sizing: border-box !important;
text-align: left !important;
}
/* Username */
dl.postprofile dt {
padding: 0 !important;
margin: 0 !important;
border-bottom: none !important;
width: auto !important;
flex-shrink: 0 !important;
}
dl.postprofile dt a,
dl.postprofile dt strong {
font-size: 14px !important;
font-weight: 900 !important;
display: inline !important;
color: #1a0008 !important;
}
/* Stack rank and posts vertically next to username */
dl.postprofile dd {
margin: 0 !important;
text-align: left !important;
font-size: 11px !important;
}
dl.postprofile dd.profile-rank {
font-size: 9px !important;
padding: 2px 8px !important;
margin: 0 0 3px 0 !important;
display: inline-block !important;
}
dl.postprofile dd.profile-posts { display: block !important; color: #888 !important; font-size: 10px !important; }
dl.postprofile dd.profile-joined { display: block !important; color: #aaa !important; font-size: 10px !important; }
/* ── HEADER LOGIN/REGISTER - simplified ── */
#tr-header-right {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 6px !important;
}
/* Hide the welcome text and URL on mobile */
#tr-welcome-text,
#tr-header-right p,
#tr-header-right .tr-site-url { display: none !important; }
/* Login button - simple outline */
#tr-header-right a.tr-login-btn,
#tr-header-right a[href*=login] {
background: transparent !important;
border: 1px solid rgba(255,255,255,0.5) !important;
color: #fff !important;
padding: 5px 14px !important;
border-radius: 4px !important;
font-size: 12px !important;
font-weight: 700 !important;
text-decoration: none !important;
font-family: Raleway, sans-serif !important;
}
/* Register button - solid crimson */
#tr-header-right a.tr-register-btn,
#tr-header-right a[href*=register] {
background: #c01848 !important;
border: 1px solid #c01848 !important;
color: #fff !important;
padding: 5px 14px !important;
border-radius: 4px !important;
font-size: 12px !important;
font-weight: 700 !important;
text-decoration: none !important;
font-family: Raleway, sans-serif !important;
}
/* Hide large welcome/guest block text */
#tr-header-right h3,
#tr-header-right .tr-welcome-greeting { font-size: 13px !important; }
}
/* Mobile login button in navbar */
#tr-mobile-login-btn { display: none !important; }
@media (max-width: 600px) {
/* Hide Canada #1 tagline on mobile */
#tr-header-tagline { display: none !important; }
/* Mobile login button - shows in navbar */
#tr-mobile-login-btn {
display: inline-block !important;
margin-left: auto !important;
flex-shrink: 0 !important;
background: #c01848 !important;
color: #fff !important;
border: none !important;
border-radius: 4px !important;
padding: 5px 14px !important;
font-size: 11px !important;
font-weight: 800 !important;
font-family: Raleway, sans-serif !important;
text-decoration: none !important;
white-space: nowrap !important;
letter-spacing: 0.5px !important;
}
}
/* ============================================================
FORUM INDEX - let forumlist_body.html styles win
Just add mobile overrides
============================================================ */
/* Remove our generic forabg overrides that fight the template */
.forabg .topiclist li.row { display: block !important; }
/* ============================================================
MOBILE - forum index
============================================================ */
@media (max-width: 768px) {
/* Stack the row - forum name full width, then stats below */
.forabg .forums .row .row-item {
flex-wrap: wrap !important;
padding: 10px 12px !important;
}
/* Forum name takes full width */
.forabg .forums .row dt {
width: 100% !important;
flex: none !important;
margin-bottom: 6px !important;
}
/* Hide threads and messages count on mobile */
.forabg .forums .row dd.topics,
.forabg .forums .row dd.posts { display: none !important; }
/* Last post - full width strip on mobile */
.forabg .forums .row dd.lastpost {
width: 100% !important;
border-left: none !important;
border-top: 1px solid #f0e0ea !important;
padding: 6px 0 0 0 !important;
text-align: left !important;
}
/* Subforum rows - compact on mobile */
.forabg .forums .subforum-row .row-item {
padding: 6px 12px 6px 18px !important;
}
.forabg .forums .subforum-row dd.topics,
.forabg .forums .subforum-row dd.posts,
.forabg .forums .subforum-row dd.lastpost { display: none !important; }
/* Header row - hide stats labels on mobile */
.forabg .header dd.topics,
.forabg .header dd.posts,
.forabg .header dd.lastpost { display: none !important; }
/* Forum title smaller on mobile */
a.forumtitle { font-size: 13px !important; }
.forum-desc-text { font-size: 11px !important; }
}
/* Forum index last post - force white overriding inline styles */
.lastpost-author { color: #555 !important; }
.lastpost-author a,
.lastpost-author a.username-coloured,
.lastpost-author a[style] {
color: #333 !important;
font-weight: 700 !important;
}
.lastpost-author a:hover { color: #c01848 !important; }
.lastpost-time { color: #aaa !important; }
.lastpost-subject { color: #c01848 !important; }
.lastpost-subject:hover { color: #8a0a30 !important; }
/* Forum index - smaller row height */
.forabg .forums .row .row-item { padding: 8px 14px !important; }
.forabg .forums .subforum-row .row-item { padding: 5px 14px 5px 22px !important; }
.forabg .header .row-item { padding: 7px 16px !important; }
.forum-icon-wrap { width: 28px !important; height: 28px !important; font-size: 13px !important; }
.forum-count { font-size: 16px !important; }
.forum-desc-text { display: none !important; }
/* Parent forum rows (main category forums with subforums) - crimson styling */
.forabg ul.topiclist.forums li.row.forum_unread_subforum,
.forabg ul.topiclist.forums li.row.forum_read_subforum,
.forabg .forums li.row.forum_unread_subforum,
.forabg .forums li.row.forum_read_subforum {
background: linear-gradient(135deg,#3a0018 0%,#6a0828 40%,#900a38 100%) !important;
border-bottom: 3px solid #c01848 !important;
border-left: none !important;
}
.forabg li.row.forum_unread_subforum:hover,
.forabg li.row.forum_read_subforum:hover {
background: linear-gradient(135deg,#4a0820 0%,#7a1030 40%,#a00a40 100%) !important;
}
/* White text on crimson background */
.forabg li.row.forum_unread_subforum a.forumtitle,
.forabg li.row.forum_read_subforum a.forumtitle {
color: #fff !important;
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
}
.forabg li.row.forum_unread_subforum a.forumtitle:hover,
.forabg li.row.forum_read_subforum a.forumtitle:hover { color: #ffd0e0 !important; }
.forabg li.row.forum_unread_subforum .forum-desc-text,
.forabg li.row.forum_read_subforum .forum-desc-text {
color: rgba(255,210,230,0.75) !important;
display: block !important;
}
.forabg li.row.forum_unread_subforum .forum-count,
.forabg li.row.forum_read_subforum .forum-count { color: #fff !important; }
.forabg li.row.forum_unread_subforum dd dfn,
.forabg li.row.forum_read_subforum dd dfn { color: rgba(255,210,230,0.6) !important; }
.forabg li.row.forum_unread_subforum .forum-icon-wrap,
.forabg li.row.forum_read_subforum .forum-icon-wrap {
background: rgba(255,255,255,0.15) !important;
color: #fff !important;
box-shadow: none !important;
}
.forabg li.row.forum_unread_subforum .lastpost-subject,
.forabg li.row.forum_read_subforum .lastpost-subject { color: #ffd0e0 !important; }
.forabg li.row.forum_unread_subforum .lastpost-time,
.forabg li.row.forum_read_subforum .lastpost-time { color: rgba(255,210,230,0.6) !important; }
.forabg li.row.forum_unread_subforum .lastpost-author,
.forabg li.row.forum_read_subforum .lastpost-author { color: rgba(255,210,230,0.8) !important; }
.forabg li.row.forum_unread_subforum .lastpost-author a,
.forabg li.row.forum_read_subforum .lastpost-author a { color: #fff !important; }
.forabg li.row.forum_unread_subforum .lastpost-avatar,
.forabg li.row.forum_read_subforum .lastpost-avatar {
background: rgba(255,255,255,0.2) !important;
}
.forabg li.row.forum_unread_subforum .forum-new-badge,
.forabg li.row.forum_read_subforum .forum-new-badge {
background: rgba(255,255,255,0.25) !important;
color: #fff !important;
}
/* Also restore description text for normal rows */
.forum-desc-text { display: block !important; }
/* Hide timestamps and mark forums read on index */
.index-page-footer,
p.gensmall,
.gensmall,
#page-body > p,
p[class=gensmall] { display: none !important; }
/* Hide mark forums read link */
a[href*="mark_read"],
a[href*="mark_forums_read"],
.action-bar a[href*="mark"] { display: none !important; }
/* ============================================================
UCP - User Control Panel complete redesign
============================================================ */
/* UCP title */
h2.ucp-title {
font-family: Raleway, sans-serif !important;
font-size: 22px !important;
font-weight: 900 !important;
color: #1a0008 !important;
margin-bottom: 16px !important;
padding-bottom: 12px !important;
border-bottom: 2px solid #e8e0e4 !important;
}
/* Tabs */
#tabs { margin-bottom: 0 !important; border-bottom: 2px solid #c01848 !important; }
#tabs ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 2px !important; }
#tabs li { display: inline-block !important; }
#tabs li a {
display: block !important;
padding: 8px 16px !important;
font-family: Raleway, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #666 !important;
text-decoration: none !important;
background: #f0eaec !important;
border-radius: 5px 5px 0 0 !important;
border: 1px solid #e0d4d8 !important;
border-bottom: none !important;
}
#tabs li a:hover { background: #fff !important; color: #c01848 !important; }
#tabs li.activetab a {
background: #c01848 !important;
color: #fff !important;
border-color: #c01848 !important;
}
/* Main UCP panel */
.panel.bg3 { background: #fff !important; border: 1px solid #e8e0e4 !important; border-radius: 0 8px 8px 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; }
.panel.bg3 > .inner { padding: 0 !important; display: flex !important; }
/* Left nav menu */
#cp-menu {
width: 200px !important;
min-width: 200px !important;
flex-shrink: 0 !important;
background: #faf8f9 !important;
border-right: 1px solid #e8e0e4 !important;
padding: 16px 0 !important;
border-radius: 0 0 0 8px !important;
}
#cp-menu .navigation { padding: 0 !important; }
#cp-menu ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#cp-menu ul li a {
display: block !important;
padding: 9px 18px !important;
font-family: Raleway, sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #555 !important;
text-decoration: none !important;
border-left: 3px solid transparent !important;
transition: all 0.12s !important;
}
#cp-menu ul li a:hover {
background: #fff0f4 !important;
color: #c01848 !important;
border-left-color: #c01848 !important;
}
#cp-menu ul li.active-subsection a {
background: #fff0f4 !important;
color: #c01848 !important;
border-left-color: #c01848 !important;
font-weight: 800 !important;
}
/* Main content area */
#cp-main {
flex: 1 !important;
padding: 20px 24px !important;
min-width: 0 !important;
}
#cp-main h2 {
font-family: Raleway, sans-serif !important;
font-size: 18px !important;
font-weight: 900 !important;
color: #1a0008 !important;
margin: 0 0 16px 0 !important;
padding-bottom: 10px !important;
border-bottom: 2px solid #f0e0e8 !important;
}
#cp-main h3 {
font-family: Raleway, sans-serif !important;
font-size: 13px !important;
font-weight: 800 !important;
color: #888 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin: 16px 0 10px 0 !important;
}
#cp-main .panel {
background: #faf8f9 !important;
border: 1px solid #f0eaec !important;
border-radius: 6px !important;
margin-bottom: 14px !important;
}
#cp-main .panel .inner { padding: 16px !important; }
#cp-main p {
font-family: Raleway, sans-serif !important;
font-size: 13px !important;
color: #555 !important;
line-height: 1.7 !important;
margin-bottom: 12px !important;
}
/* Activity dl list */
#cp-main dl.details { margin: 0 !important; }
#cp-main dl.details dt {
font-family: Raleway, sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
color: #999 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
padding: 8px 0 4px 0 !important;
border-top: 1px solid #f0eaec !important;
float: left !important;
clear: left !important;
width: 140px !important;
}
#cp-main dl.details dd {
font-family: Raleway, sans-serif !important;
font-size: 13px !important;
color: #333 !important;
padding: 8px 0 4px 140px !important;
border-top: 1px solid #f0eaec !important;
line-height: 1.5 !important;
}
#cp-main dl.details dd:first-of-type,
#cp-main dl.details dt:first-of-type { border-top: none !important; }
#cp-main dl.details a { color: #c01848 !important; font-weight: 600 !important; text-decoration: none !important; }
#cp-main dl.details a:hover { text-decoration: underline !important; }
/* PM inbox styling */
#cp-main .post,
#cp-main table.table1 {
width: 100% !important;
border-collapse: collapse !important;
font-family: Raleway, sans-serif !important;
}
#cp-main table.table1 th {
background: #faf8f9 !important;
color: #888 !important;
font-size: 10px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
padding: 8px 12px !important;
border-bottom: 2px solid #e8e0e4 !important;
font-family: Raleway, sans-serif !important;
}
#cp-main table.table1 td {
padding: 10px 12px !important;
border-bottom: 1px solid #f5f0f2 !important;
font-size: 13px !important;
color: #333 !important;
font-family: Raleway, sans-serif !important;
vertical-align: middle !important;
}
#cp-main table.table1 tr:hover td { background: #fff8fb !important; }
#cp-main table.table1 a { color: #c01848 !important; font-weight: 600 !important; text-decoration: none !important; }
#cp-main table.table1 a:hover { text-decoration: underline !important; }
/* Mobile UCP */
@media (max-width: 600px) {
.panel.bg3 > .inner { flex-direction: column !important; }
#cp-menu { width: 100% !important; min-width: 0 !important; border-right: none !important; border-bottom: 1px solid #e8e0e4 !important; padding: 8px 0 !important; }
#cp-menu ul { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; padding: 8px !important; }
#cp-menu ul li a { padding: 6px 12px !important; border-left: none !important; border-radius: 4px !important; border: 1px solid #e0d4d8 !important; font-size: 11px !important; }
#cp-menu ul li.active-subsection a { background: #c01848 !important; color: #fff !important; border-color: #c01848 !important; }
#cp-main { padding: 14px !important; }
#cp-main dl.details dt { float: none !important; width: 100% !important; padding: 8px 0 2px 0 !important; }
#cp-main dl.details dd { padding: 0 0 8px 0 !important; }
}
/* ============================================================
MEMBER PROFILE PAGE (memberlist.php?mode=viewprofile)
============================================================ */
/* Profile page wrapper */
.profile-page .panel,
#page-body .panel.profile {
background: #fff !important;
border: 1px solid #e8e0e4 !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
overflow: hidden !important;
margin-bottom: 16px !important;
}
/* Profile header strip */
.profile-page h2,
#page-body h2.memberlist-title,
#page-body .memberlist h2 {
font-family: Raleway, sans-serif !important;
font-size: 22px !important;
font-weight: 900 !important;
color: #1a0008 !important;
margin-bottom: 16px !important;
padding-bottom: 12px !important;
border-bottom: 2px solid #e8e0e4 !important;
}
/* Profile info table */
.profile-page table,
#page-body table.table1 {
width: 100% !important;
border-collapse: collapse !important;
font-family: Raleway, sans-serif !important;
}
.profile-page table th,
#page-body table.table1 th {
background: linear-gradient(135deg,#3a0018,#6a0828) !important;
color: #fff !important;
font-family: Raleway, sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
padding: 10px 16px !important;
}
.profile-page table td,
#page-body table.table1 td {
padding: 10px 16px !important;
border-bottom: 1px solid #f5f0f2 !important;
font-size: 13px !important;
color: #333 !important;
font-family: Raleway, sans-serif !important;
vertical-align: top !important;
}
.profile-page table tr:hover td,
#page-body table.table1 tr:hover td { background: #fff8fb !important; }
.profile-page table td:first-child,
#page-body table.table1 td:first-child {
font-weight: 700 !important;
color: #888 !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
width: 160px !important;
background: #faf8f9 !important;
}
/* Profile username display */
#page-body .profile-username,
#page-body h2 .username-coloured {
font-family: Raleway, sans-serif !important;
font-size: 22px !important;
font-weight: 900 !important;
}
/* Profile rank badge */
#page-body .profile-rank {
background: #fffbea !important;
border: 1px solid #e8d060 !important;
border-radius: 20px !important;
color: #6a5000 !important;
font-size: 11px !important;
font-weight: 800 !important;
padding: 4px 12px !important;
display: inline-block !important;
font-family: Raleway, sans-serif !important;
margin-bottom: 8px !important;
}
/* Profile posts count */
#page-body .profile-posts a {
color: #c01848 !important;
font-weight: 700 !important;
text-decoration: none !important;
}
#page-body .profile-posts a:hover { text-decoration: underline !important; }
/* Profile avatar area */
.profile-avatar-img img,
#page-body .avatar img {
border-radius: 8px !important;
border: 2px solid #e8e0e4 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
/* Usergroups page - hide open groups from normal members */
#cp-main .group-open .group-join { display: none !important; }
/* ============================================================
FIX EMPTY BOX ICONS THROUGHOUT SITE
============================================================ */
/* Hide broken icon boxes in topic list */
.topiclist .topic-icon { display: none !important; }
/* Hide new post indicator boxes next to thread titles */
.topiclist .topic-title a.unread::before,
.topiclist dt i.fa { display: none !important; }
/* Hide icon boxes in breadcrumb/navbar that show as squares */
#nav-main i.fa,
#nav-breadcrumbs i.fa,
ul.linklist i.fa { display: none !important; }
/* Hide the mini post icon boxes in post author line */
p.author i.fa,
p.author i.icon { display: none !important; }
/* Hide icon boxes in post buttons that are just squares */
ul.post-buttons li a i.fa { display: none !important; }
/* Hide icon boxes in UCP tabs and nav */
#tabs i.fa,
#cp-menu i.fa { display: none !important; }
/* Fix groups page - close advertiser groups visually */
/* Hide join option for advertiser groups */
.group-details .group-membership { display: none !important; }
/* ============================================================
MEMBER PROFILE PAGE - targeted fix using actual phpBB classes
============================================================ */
/* Profile wrapper */
#page-body > .panel {
background: #fff !important;
border: 1px solid #e8e0e4 !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
overflow: hidden !important;
}
/* Profile title */
#page-body h2 {
font-family: Raleway, sans-serif !important;
font-size: 20px !important;
font-weight: 900 !important;
color: #1a0008 !important;
margin-bottom: 14px !important;
padding-bottom: 10px !important;
border-bottom: 2px solid #e8e0e4 !important;
}
/* Profile info dl */
.profile dl.details dt {
font-family: Raleway, sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
color: #999 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
width: 150px !important;
float: left !important;
clear: left !important;
padding: 8px 0 !important;
border-top: 1px solid #f5f0f2 !important;
}
.profile dl.details dd {
font-family: Raleway, sans-serif !important;
font-size: 13px !important;
color: #333 !important;
padding: 8px 0 8px 150px !important;
border-top: 1px solid #f5f0f2 !important;
line-height: 1.5 !important;
}
.profile dl.details dt:first-of-type,
.profile dl.details dd:first-of-type { border-top: none !important; }
.profile dl.details a { color: #c01848 !important; font-weight: 600 !important; text-decoration: none !important; }
.profile dl.details a:hover { text-decoration: underline !important; }
/* Profile section headers */
.profile h3 {
font-family: Raleway, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
color: #fff !important;
background: linear-gradient(135deg,#3a0018,#6a0828) !important;
padding: 8px 16px !important;
margin: 16px -16px 12px -16px !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
}
/* Profile rank badge */
.profile .profile-rank {
background: #fffbea !important;
border: 1px solid #e8d060 !important;
border-radius: 20px !important;
color: #6a5000 !important;
font-size: 11px !important;
font-weight: 800 !important;
padding: 3px 12px !important;
display: inline-block !important;
font-family: Raleway, sans-serif !important;
}
/* Profile username */
.profile .username-coloured,
.profile .username {
font-family: Raleway, sans-serif !important;
font-size: 18px !important;
font-weight: 900 !important;
}
/* Avatar */
.profile .avatar img {
border-radius: 8px !important;
border: 2px solid #e8e0e4 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
max-width: 120px !important;
}
/* ============================================================
HIDE ALL BROKEN FA ICON BOXES SITEWIDE
============================================================ */
i.fa,
i.icon,
.icon,
span.icon,
i[class*="fa-"],
i[class*="icon-"] {
display: none !important;
}
/* But keep icons we actually want visible */
.forum-icon-wrap i.fa,
.subforum-icon-wrap i.fa,
.lastpost-avatar i.fa,
.cat-folder-icon i.fa {
display: inline-block !important;
}
/* ============================================================
ICON FIX - hide broken FA boxes sitewide
============================================================ */
i.fa, i.icon, .icon, span.icon, i[class*="fa-"], i[class*="icon-"] { display: none !important; }
.forum-icon-wrap i.fa, .subforum-icon-wrap i.fa, .lastpost-avatar i.fa, .cat-folder-icon i.fa { display: inline-block !important; }
/* ============================================================
PROFILE PAGE h3 section headers
============================================================ */
#page-body h3 {
font-family: Raleway, sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
color: #fff !important;
background: linear-gradient(135deg, #3a0018, #6a0828) !important;
padding: 9px 20px !important;
margin: 16px 0 0 0 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
border: none !important;
}
/* ============================================================
MOBILE TOPIC LIST FIX
The global .row-item { display:flex } is overriding mobile.
Fix: on mobile, make viewforum topic rows display as blocks
using screen width meta approach via forumbg-specific rules
============================================================ */
@media only screen and (max-width: 768px) {
/* Hide mark read */
a[href*="mark_read"], a[href*="mark_forums_read"] { display: none !important; }
/* Forum index subforum boxes - compact */
.forum-desc-text { display: none !important; }
.forabg .forums .row .row-item { flex-wrap: wrap !important; padding: 8px 12px !important; }
.forabg .forums .row dd.topics,
.forabg .forums .row dd.posts { display: none !important; }
.forabg .forums .row dd.lastpost {
width: 100% !important;
flex-basis: 100% !important;
border-left: none !important;
border-top: 1px solid rgba(200,160,180,0.3) !important;
padding: 4px 0 0 0 !important;
}
.forabg .header dd { display: none !important; }
/* Viewforum topic rows - override flex with wrap */
.forumbg .topiclist li.row dl {
display: flex !important;
flex-wrap: wrap !important;
padding: 10px 12px !important;
gap: 4px 0 !important;
align-items: flex-start !important;
}
/* Title takes full width */
.forumbg .topiclist li.row dl dt {
width: 100% !important;
flex: none !important;
order: 1 !important;
}
/* Replies + Views inline */
.forumbg .topiclist li.row dl dd.posts {
order: 2 !important;
width: auto !important;
flex: none !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #333 !important;
margin-right: 10px !important;
}
.forumbg .topiclist li.row dl dd.views {
order: 3 !important;
width: auto !important;
flex: none !important;
font-size: 12px !important;
color: #aaa !important;
}
/* Last post full width below */
.forumbg .topiclist li.row dl dd.lastpost {
order: 4 !important;
width: 100% !important;
flex-basis: 100% !important;
border-top: 1px solid #f0eaec !important;
padding-top: 5px !important;
margin-top: 4px !important;
font-size: 11px !important;
}
.forumbg .topiclist .lastpost a { font-size: 12px !important; font-weight: 700 !important; }
/* Topic title */
.topiclist .topic-title a {
font-size: 13px !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0 !important;
word-break: break-word !important;
line-height: 1.4 !important;
white-space: normal !important;
}
.topiclist .topic-poster { font-size: 11px !important; color: #aaa !important; text-transform: none !important; }
/* Search bar */
.action-bar { flex-wrap: wrap !important; gap: 6px !important; }
.action-bar .search-box {
display: flex !important;
width: 100% !important;
border: 1px solid #ddd !important;
border-radius: 5px !important;
overflow: hidden !important;
background: #fff !important;
}
.action-bar .search-box input[type=text],
.action-bar .search-box input[type=search] {
flex: 1 !important;
min-width: 0 !important;
border: none !important;
padding: 8px 10px !important;
font-size: 13px !important;
width: auto !important;
background: #fff !important;
}
.action-bar .search-box input[type=submit],
.action-bar .search-box button {
flex-shrink: 0 !important;
width: auto !important;
background: #c01848 !important;
color: #fff !important;
border: none !important;
padding: 0 14px !important;
font-size: 12px !important;
font-weight: 700 !important;
}
/* General */
#page-body { padding: 6px !important; }
.stat-block { display: none !important; }
div.content { font-size: 13px !important; line-height: 1.8 !important; }
h2.topic-title { font-size: 16px !important; }
}
/* Hide navbar search on mobile - covered by directory button */
@media only screen and (max-width: 768px) {
#tr-navbar-search { display: none !important; }
}
/* ============================================================
MOBILE IMPROVEMENTS - forum index stats + topic last post
============================================================ */
@media only screen and (max-width: 768px) {
/* Forum index subforum rows - show threads/messages */
.forabg .forums .row dd.topics,
.forabg .forums .row dd.posts {
display: inline-block !important;
width: auto !important;
flex: none !important;
text-align: center !important;
min-width: 60px !important;
margin-right: 8px !important;
}
/* Forum index lastpost - show on mobile */
.forabg .forums .row dd.lastpost {
display: block !important;
font-size: 11px !important;
}
.forabg .forums .row dd.lastpost .lastpost-inner { display: flex !important; align-items: center !important; gap: 6px !important; }
.forabg .forums .row dd.lastpost .lastpost-subject { font-size: 11px !important; max-width: 200px !important; }
.forabg .forums .row dd.lastpost .lastpost-time { font-size: 10px !important; }
.forabg .forums .row dd.lastpost .lastpost-author { font-size: 11px !important; }
/* Viewforum - show last post info properly */
.forumbg .topiclist li.row dl dd.lastpost .lastpost,
.forumbg .topiclist li.row dl dd.lastpost span { display: block !important; }
.forumbg .topiclist li.row dl dd.lastpost a { color: #c01848 !important; font-weight: 700 !important; font-size: 12px !important; }
/* Viewforum - tighter card look */
.forumbg .topiclist li.row { border-radius: 6px !important; margin-bottom: 6px !important; }
.forumbg .topiclist li.row dl { padding: 10px 12px !important; }
.topiclist .topic-title a { font-size: 14px !important; color: #c01848 !important; }
.topiclist .topic-poster { margin-top: 2px !important; margin-bottom: 4px !important; }
.forumbg .topiclist li.row dl dd.posts { font-size: 13px !important; font-weight: 800 !important; }
/* Hide navbar search on mobile */
#tr-navbar-search { display: none !important; }
}
/* ============================================================
MOBILE - viewforum topic list cleanup
============================================================ */
@media only screen and (max-width: 768px) {
/* Hide the Replies/Views/Last post header row */
.forumbg .topiclist.header { display: none !important; }
/* Each topic card */
.forumbg .topiclist li.row {
border-radius: 6px !important;
margin-bottom: 8px !important;
padding: 0 !important;
}
/* Make the dl a clean block */
.forumbg .topiclist li.row dl.row-item {
display: block !important;
padding: 12px 14px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Title area - full width */
.forumbg .topiclist li.row dl.row-item dt {
display: block !important;
width: 100% !important;
margin-bottom: 6px !important;
}
/* Hide all dd columns first */
.forumbg .topiclist li.row dl.row-item dd {
display: none !important;
}
/* Stats row - replies and views inline */
.forumbg .topiclist li.row dl.row-item dd.posts,
.forumbg .topiclist li.row dl.row-item dd.views {
display: inline-block !important;
width: auto !important;
margin-right: 14px !important;
font-size: 12px !important;
color: #666 !important;
vertical-align: middle !important;
}
.forumbg .topiclist li.row dl.row-item dd.posts {
font-weight: 700 !important;
color: #333 !important;
}
/* Last post - show as slim line below stats */
.forumbg .topiclist li.row dl.row-item dd.lastpost {
display: block !important;
width: 100% !important;
border-top: 1px solid #f0eaec !important;
margin-top: 8px !important;
padding-top: 6px !important;
font-size: 11px !important;
color: #aaa !important;
}
.forumbg .topiclist li.row dl.row-item dd.lastpost a {
color: #c01848 !important;
font-weight: 700 !important;
font-size: 12px !important;
}
}
/* Hide topic/replies/views header bar on mobile completely */
@media only screen and (max-width: 768px) {
.forumbg .topiclist li.header,
.forumbg ul.topiclist.header,
.topiclist.header { display: none !important; }
}
/* Show last post subject title on mobile forum index */
@media only screen and (max-width: 768px) {
.forabg .forums .row dd.lastpost .lastpost-subject {
display: block !important;
font-size: 12px !important;
font-weight: 700 !important;
color: #c01848 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 280px !important;
margin-bottom: 2px !important;
}
.forabg .forums .row dd.lastpost .lastpost-inner {
display: block !important;
}
.forabg li.row.forum_unread_subforum .lastpost-subject,
.forabg li.row.forum_read_subforum .lastpost-subject {
color: #ffd0e0 !important;
}
}
/* Fix mobile forum index boxes - compact, hide avatar, fix sizing */
@media only screen and (max-width: 768px) {
.forabg .forums .row dd.lastpost .lastpost-avatar { display: none !important; }
.forabg .forums .row dd.lastpost .lastpost-inner { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.forabg .forums .row dd.lastpost .lastpost-time { font-size: 11px !important; color: #aaa !important; }
.forabg .forums .row dd.lastpost .lastpost-author { font-size: 12px !important; font-weight: 700 !important; }
.forabg .forums .row .row-item { padding: 10px 12px !important; min-height: 0 !important; }
}
/* Fix horizontal overflow on mobile */
@media only screen and (max-width: 768px) {
html, body { overflow-x: hidden !important; max-width: 100% !important; }
#wrap, #page-body, #tr-page-wrap, #tr-main-col { overflow-x: hidden !important; max-width: 100% !important; }
/* Members page table overflow */
.forumbg-table, .forumbg-table .inner, table.memberlist, table.table1 {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
display: block !important;
table-layout: fixed !important;
}
table.memberlist td, table.memberlist th,
table.table1 td, table.table1 th {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 120px !important;
}
/* Hide the location/website/social column on mobile - useless and causes overflow */
table.memberlist th.info,
table.memberlist td.info { display: none !important; }
/* Forum page title overflow */
h2.forum-title, #page-body h2 {
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
}
/* Post title bar - white text so it reads on crimson background */
div.postbody h3.first { color: #fff !important; }
div.postbody h3.first a { color: #fff !important; }
div.postbody h3.first a:hover { color: #ffd0e0 !important; }
/* Quote box styling */
blockquote {
background: #fff0f5 !important;
border-left: 4px solid #c01848 !important;
border: 1px solid #e8c0d0 !important;
border-left: 4px solid #c01848 !important;
border-radius: 4px !important;
padding: 10px 14px !important;
margin: 10px 0 !important;
color: #5a2040 !important;
font-size: 12.5px !important;
font-family: 'Source Sans 3', sans-serif !important;
position: relative !important;
}
blockquote .quotetitle {
background: linear-gradient(135deg, #8a0a30 0%, #c01848 100%) !important;
color: #fff !important;
font-family: 'Raleway', sans-serif !important;
font-weight: 700 !important;
font-size: 11px !important;
letter-spacing: 0.5px !important;
padding: 4px 10px !important;
margin: -10px -14px 8px -14px !important;
border-radius: 3px 3px 0 0 !important;
display: block !important;
}
blockquote .quotetitle a {
color: #ffd0e0 !important;
text-decoration: none !important;
}
blockquote .quotetitle a:hover {
color: #fff !important;
text-decoration: underline !important;
}
blockquote .quotecontent {
color: #5a2040 !important;
line-height: 1.6 !important;
}
/* Mobile post editor text wrap fix */
@media(max-width:768px) {
#message-box, .inputbox, textarea#message,
textarea.inputbox, div.write-post textarea,
#postform textarea, .post-form textarea {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
white-space: pre-wrap !important;
overflow-x: hidden !important;
resize: vertical !important;
}
.postform, #postform, .post-form {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
}
/* ================================================
TRUREVIEW UPDATES - FONT, LAYOUT & DISPLAY FIXES
================================================ */
/* FONT UPGRADE - Replace Source Sans 3 with Inter */
body {
font-family: 'Inter', 'Raleway', Verdana, sans-serif !important;
font-weight: 400 !important;
font-size: 13.5px !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
/* Make all body text sharper and more readable */
.postbody .content,
.post .content,
#page-body,
.forabg,
.forumbg,
.inner {
font-family: 'Inter', Verdana, sans-serif !important;
font-weight: 400 !important;
letter-spacing: -0.01em !important;
}
/* Numbers look sharp in Inter */
.posts, .topics, .pagination,
dl.postprofile dd.profile-posts,
.stat-block {
font-family: 'Inter', Verdana, sans-serif !important;
font-variant-numeric: tabular-nums !important;
}
/* Bold headings */
h1, h2, h3, h4, h5, h6,
.forumtitle, .topictitle,
div.postbody h3.first,
div.postbody h3.first a {
font-family: 'Inter', 'Raleway', sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
}
/* HIDE JOINED DATE everywhere */
dl.postprofile dd.profile-joined { display: none !important; }
.profile-joined { display: none !important; }
dt.profile-joined { display: none !important; }
.memberlist .joined { display: none !important; }
td.joined { display: none !important; }
.profile-page .joined { display: none !important; }
#page-body dl dt.profile-joined,
#page-body dl dd.profile-joined { display: none !important; }
/* HIDE EMAIL on profile pages */
.profile-email { display: none !important; }
dd.profile-email { display: none !important; }
dt.profile-email { display: none !important; }
.email { display: none !important; }
a[href^="mailto"] { display: none !important; }
/* PROMO CARDS - Smaller size */
#tr-bottom-promo {
display: flex !important;
gap: 10px !important;
padding: 8px 12px !important;
}
.tr-bottom-promo-card {
padding: 10px 14px !important;
min-height: 0 !important;
}
.tr-bottom-promo-icon {
font-size: 18px !important;
}
.tr-bottom-promo-title {
font-size: 13px !important;
font-weight: 700 !important;
}
.tr-bottom-promo-desc {
font-size: 11px !important;
line-height: 1.4 !important;
}
.tr-bottom-promo-tag {
font-size: 9px !important;
padding: 2px 6px !important;
}
.tr-bottom-promo-cta {
font-size: 10px !important;
margin-top: 4px !important;
}
/* HIDE QUOTES in search results */
.search-result blockquote,
.search blockquote,
#page-body .search-results blockquote {
display: none !important;
}
/* PROFILE PAGE - cleaner look */
.profile-page .panel,
#page-body .panel.profile {
background: rgba(255,255,255,0.97) !important;
border: 1px solid var(--pink-border) !important;
border-radius: 6px !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
#page-body dl dt {
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 11.5px !important;
color: #8a0a30 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
#page-body dl dd {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
color: #2a1520 !important;
}
/* MEMBER PROFILE - hide registration date */
.profile-reg-date { display: none !important; }
dt[for="reg_date"] { display: none !important; }
/* ================================================
MEMBER LIST - Professional Redesign
================================================ */
/* Member list table container */
#memberlist_search { display: none !important; }
.memberlist th {
background: linear-gradient(135deg, #8a0a30 0%, #c01848 100%) !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
font-size: 10px !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
padding: 10px 14px !important;
border: none !important;
white-space: nowrap !important;
}
.memberlist th a {
color: #fff !important;
text-decoration: none !important;
font-weight: 700 !important;
}
.memberlist th a:hover {
color: #ffd0e0 !important;
text-decoration: none !important;
}
/* Member rows */
.memberlist tr.bg1,
.memberlist tr.bg2 {
border-bottom: 1px solid #f0e0e8 !important;
transition: background 0.1s !important;
}
.memberlist tr.bg1 {
background: rgba(255,255,255,0.97) !important;
}
.memberlist tr.bg2 {
background: rgba(252,232,240,0.4) !important;
}
.memberlist tr.bg1:hover,
.memberlist tr.bg2:hover {
background: rgba(192,24,72,0.06) !important;
}
/* Member list cells */
.memberlist td {
padding: 10px 14px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
color: #2a1520 !important;
border: none !important;
vertical-align: middle !important;
}
/* Username column */
.memberlist td:first-child {
font-weight: 600 !important;
min-width: 200px !important;
}
/* Rank badge styling */
.memberlist .rank-img {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 11px !important;
color: #8a0a30 !important;
font-weight: 600 !important;
letter-spacing: 0.3px !important;
}
/* Posts count */
.memberlist td.posts {
font-weight: 700 !important;
color: #c01848 !important;
font-size: 13px !important;
text-align: center !important;
font-variant-numeric: tabular-nums !important;
}
/* Username links */
.memberlist td a {
color: #c01848 !important;
font-weight: 700 !important;
text-decoration: none !important;
font-size: 13.5px !important;
}
.memberlist td a:hover {
color: #8a0a30 !important;
text-decoration: underline !important;
}
/* Member list wrapper */
.forumbg-table {
border-radius: 6px !important;
overflow: hidden !important;
box-shadow: 0 2px 12px rgba(138,10,48,0.08) !important;
border: 1px solid #e8c0d0 !important;
margin-bottom: 16px !important;
}
/* Page title */
h2.solo {
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
font-size: 18px !important;
color: #8a0a30 !important;
letter-spacing: -0.02em !important;
margin-bottom: 12px !important;
}
/* Member count / pagination bar */
.action-bar {
background: rgba(255,255,255,0.9) !important;
border: 1px solid #e8c0d0 !important;
border-radius: 4px !important;
padding: 8px 14px !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
color: #6a3050 !important;
margin-bottom: 10px !important;
}
/* Alpha sort links */
.member-search {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
}
.member-search a {
color: #c01848 !important;
font-weight: 600 !important;
padding: 2px 4px !important;
border-radius: 3px !important;
text-decoration: none !important;
}
.member-search a:hover {
background: rgba(192,24,72,0.1) !important;
color: #8a0a30 !important;
}
/* ================================================
MEMBER PROFILE PAGE - Full Redesign
================================================ */
.tr-profile-card { margin-bottom: 12px !important; }
.tr-profile-inner {
display: flex !important;
align-items: flex-start !important;
gap: 20px !important;
padding: 20px !important;
}
.tr-profile-avatar img {
width: 80px !important;
height: 80px !important;
border-radius: 50% !important;
border: 3px solid #c01848 !important;
object-fit: cover !important;
}
.tr-profile-info { flex: 1 !important; }
.tr-profile-username {
font-family: 'Inter', sans-serif !important;
font-size: 22px !important;
font-weight: 800 !important;
color: #1a0008 !important;
margin-bottom: 6px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: wrap !important;
}
.tr-profile-edit-btn {
font-size: 11px !important;
font-weight: 600 !important;
color: #fff !important;
background: #c01848 !important;
padding: 4px 12px !important;
border-radius: 20px !important;
text-decoration: none !important;
letter-spacing: 0.3px !important;
}
.tr-profile-edit-btn:hover {
background: #8a0a30 !important;
color: #fff !important;
text-decoration: none !important;
}
.tr-profile-rank {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #c01848 !important;
margin-bottom: 8px !important;
letter-spacing: 0.3px !important;
}
.tr-profile-detail {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
color: #4a2030 !important;
margin-bottom: 4px !important;
}
.tr-profile-label {
font-weight: 700 !important;
color: #8a0a30 !important;
margin-right: 6px !important;
text-transform: uppercase !important;
font-size: 10px !important;
letter-spacing: 0.8px !important;
}
/* Stats card */
.tr-profile-stats-card { margin-bottom: 12px !important; }
.tr-profile-section-title {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
color: #fff !important;
background: linear-gradient(135deg, #8a0a30 0%, #c01848 100%) !important;
padding: 8px 14px !important;
margin: -14px -14px 14px -14px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
border-radius: 4px 4px 0 0 !important;
}
.tr-profile-stats-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
gap: 16px !important;
padding: 4px 0 !important;
}
.tr-stat-item {
background: rgba(255,248,251,0.8) !important;
border: 1px solid #e8c0d0 !important;
border-radius: 6px !important;
padding: 12px 14px !important;
}
.tr-stat-label {
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
color: #8a0a30 !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
margin-bottom: 4px !important;
}
.tr-stat-value {
font-family: 'Inter', sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #1a0008 !important;
font-variant-numeric: tabular-nums !important;
}
.tr-stat-sub {
font-size: 11px !important;
font-weight: 400 !important;
color: #a07088 !important;
margin-top: 2px !important;
}
.tr-stat-link {
font-size: 12px !important;
font-weight: 600 !important;
color: #c01848 !important;
text-decoration: none !important;
display: block !important;
}
.tr-stat-link:hover {
color: #8a0a30 !important;
text-decoration: underline !important;
}
.tr-profile-pm-btn {
display: inline-block !important;
background: linear-gradient(135deg, #8a0a30 0%, #c01848 100%) !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 6px 14px !important;
border-radius: 4px !important;
text-decoration: none !important;
letter-spacing: 0.3px !important;
}
.tr-profile-pm-btn:hover {
background: linear-gradient(135deg, #a01038 0%, #e02060 100%) !important;
color: #fff !important;
text-decoration: none !important;
}
/* Hide joined date on profile page */
.tr-profile-stats-grid .joined { display: none !important; }
/* Signature card */
.tr-profile-sig { margin-bottom: 12px !important; }
/* Hide all admin/mod links from public profile view */
/* These are hidden via template but add CSS safety net */
.memberlist-title {
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
font-size: 18px !important;
color: #8a0a30 !important;
letter-spacing: -0.02em !important;
margin-bottom: 14px !important;
}
@media(max-width:600px) {
.tr-profile-inner { flex-direction: column !important; }
.tr-profile-stats-grid { grid-template-columns: 1fr !important; }
.tr-profile-username { font-size: 18px !important; }
}
/* ================================================
MOBILE PROMO CARDS - Compact fix
================================================ */
@media(max-width:600px) {
#tr-bottom-promo {
flex-direction: column !important;
padding: 8px !important;
gap: 8px !important;
margin: 0 !important;
}
.tr-bottom-promo-card {
flex-direction: row !important;
padding: 10px 12px !important;
gap: 10px !important;
border-radius: 6px !important;
min-height: 0 !important;
}
.tr-bottom-promo-icon {
font-size: 22px !important;
flex-shrink: 0 !important;
align-self: center !important;
}
.tr-bottom-promo-content {
flex: 1 !important;
}
.tr-bottom-promo-tag {
font-size: 8px !important;
letter-spacing: 0.5px !important;
margin-bottom: 3px !important;
}
.tr-bottom-promo-title {
font-size: 13px !important;
font-weight: 800 !important;
margin-bottom: 3px !important;
}
.tr-bottom-promo-desc {
display: none !important;
}
.tr-bottom-promo-cta {
font-size: 10px !important;
padding: 4px 10px !important;
}
.tr-bottom-promo-glow {
display: none !important;
}
/* Fix mobile logo */
#tr-logo img {
height: 50px !important;
width: auto !important;
}
}
/* ================================================
PROMO CARDS - Smaller on desktop too
================================================ */
#tr-bottom-promo {
padding: 8px 12px !important;
gap: 10px !important;
}
.tr-bottom-promo-card {
padding: 10px 14px !important;
gap: 10px !important;
border-radius: 6px !important;
}
.tr-bottom-promo-icon {
font-size: 20px !important;
}
.tr-bottom-promo-tag {
font-size: 8px !important;
padding: 2px 8px !important;
margin-bottom: 3px !important;
}
.tr-bottom-promo-title {
font-size: 13px !important;
font-weight: 800 !important;
margin-bottom: 3px !important;
}
.tr-bottom-promo-desc {
font-size: 11px !important;
line-height: 1.4 !important;
opacity: 0.85 !important;
}
.tr-bottom-promo-cta {
font-size: 10px !important;
padding: 4px 10px !important;
margin-top: 5px !important;
}
.tr-bottom-promo-glow {
display: none !important;
}
/* ================================================
PROMO CARDS - Revert desktop, keep mobile small
================================================ */
/* Undo the desktop changes we just made */
#tr-bottom-promo {
padding: 20px !important;
gap: 14px !important;
}
.tr-bottom-promo-card {
padding: 18px 22px !important;
gap: 14px !important;
border-radius: 8px !important;
}
.tr-bottom-promo-icon { font-size: 30px !important; }
.tr-bottom-promo-tag { font-size: 9px !important; padding: 3px 10px !important; margin-bottom: 6px !important; }
.tr-bottom-promo-title { font-size: 16px !important; margin-bottom: 3px !important; }
.tr-bottom-promo-desc { font-size: 11px !important; line-height: 1.6 !important; opacity: 1 !important; }
.tr-bottom-promo-cta { font-size: 10px !important; margin-top: 8px !important; }
/* Mobile only - compact cards */
@media(max-width:600px) {
#tr-bottom-promo {
flex-direction: column !important;
padding: 8px !important;
gap: 8px !important;
}
.tr-bottom-promo-card {
flex-direction: row !important;
padding: 10px 12px !important;
gap: 10px !important;
border-radius: 6px !important;
align-items: center !important;
}
.tr-bottom-promo-icon { font-size: 22px !important; flex-shrink: 0 !important; }
.tr-bottom-promo-tag { font-size: 8px !important; margin-bottom: 2px !important; }
.tr-bottom-promo-title { font-size: 12px !important; margin-bottom: 2px !important; }
.tr-bottom-promo-desc { display: none !important; }
.tr-bottom-promo-cta { font-size: 9px !important; padding: 3px 8px !important; margin-top: 4px !important; }
.tr-bottom-promo-glow { display: none !important; }
}
/* ================================================
INDUSTRY SERVICES STRIP - Desktop only
================================================ */
#tr-services-strip {
background: linear-gradient(135deg, #120006 0%, #1e000c 50%, #120006 100%);
border-bottom: 1px solid rgba(255,100,150,0.25);
padding: 10px 20px;
width: 100%;
position: relative;
overflow: hidden;
}
#tr-services-strip::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(192,24,72,0.02) 20px, rgba(192,24,72,0.02) 21px);
pointer-events: none;
}
#tr-services-strip-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
position: relative;
z-index: 1;
max-width: 1380px;
margin: 0 auto;
}
#tr-services-strip-text {
font-size: 13px;
font-weight: 600;
color: rgba(255,200,220,0.85);
font-family: 'Inter', sans-serif;
letter-spacing: 0.2px;
}
#tr-services-strip-text strong {
color: #fff;
font-weight: 800;
}
#tr-services-strip-text em {
color: #ff8090;
font-style: normal;
font-weight: 900;
}
#tr-services-strip-btn {
display: inline-block;
background: linear-gradient(135deg, #8a0a30, #c01848);
color: #fff !important;
font-size: 11px;
font-weight: 800;
font-family: 'Inter', sans-serif;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 8px 22px;
border-radius: 20px;
text-decoration: none !important;
border: 1px solid rgba(255,150,190,0.3);
box-shadow: 0 2px 16px rgba(192,24,72,0.35);
white-space: nowrap;
transition: all 0.2s;
}
#tr-services-strip-btn:hover {
background: linear-gradient(135deg, #a01038, #e02060) !important;
color: #fff !important;
text-decoration: none !important;
}
/* Hide on mobile */
@media(max-width:600px) {
#tr-services-strip { display: none !important; }
}
/* ================================================
PARENT FORUM BARS - Crimson background, white text
================================================ */
/* Crimson background on locked parent forum rows */
dl.row-item.forum_unread_locked,
dl.row-item.forum_read_locked {
background: linear-gradient(135deg, #8a0a30 0%, #c01848 100%) !important;
border-radius: 4px !important;
}
/* Force ALL text inside to white - removed wildcard to prevent conflicts */
dl.row-item.forum_unread_locked,
dl.row-item.forum_read_locked {
color: #ffffff !important;
}
/* Soften description text slightly */
dl.row-item.forum_unread_locked .forum-desc-text,
dl.row-item.forum_read_locked .forum-desc-text {
color: rgba(255, 220, 235, 0.8) !important;
font-weight: 400 !important;
}
/* NEW badge - white bg, crimson text */
dl.row-item.forum_unread_locked .forum-new-badge,
dl.row-item.forum_read_locked .forum-new-badge {
background: #ffffff !important;
color: #c01848 !important;
font-weight: 800 !important;
}
/* Hover on title */
dl.row-item.forum_unread_locked a.forumtitle:hover,
dl.row-item.forum_read_locked a.forumtitle:hover {
color: #ffd0e0 !important;
}
/* ================================================
LOCKED PARENT FORUMS - Match subforum styling exactly
================================================ */
.forabg ul.topiclist.forums li.row.forum_unread_locked,
.forabg ul.topiclist.forums li.row.forum_read_locked,
.forabg .forums li.row.forum_unread_locked,
.forabg .forums li.row.forum_read_locked {
background: linear-gradient(135deg,#3a0018 0%,#6a0828 40%,#900a38 100%) !important;
border-bottom: 3px solid #c01848 !important;
border-left: none !important;
}
.forabg li.row.forum_unread_locked:hover,
.forabg li.row.forum_read_locked:hover {
background: linear-gradient(135deg,#4a0820 0%,#7a1030 40%,#a00a40 100%) !important;
}
.forabg li.row.forum_unread_locked a.forumtitle,
.forabg li.row.forum_read_locked a.forumtitle {
color: #fff !important;
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
}
.forabg li.row.forum_unread_locked a.forumtitle:hover,
.forabg li.row.forum_read_locked a.forumtitle:hover { color: #ffd0e0 !important; }
.forabg li.row.forum_unread_locked .forum-desc-text,
.forabg li.row.forum_read_locked .forum-desc-text {
color: rgba(255,210,230,0.75) !important;
display: block !important;
}
.forabg li.row.forum_unread_locked .forum-count,
.forabg li.row.forum_read_locked .forum-count { color: #fff !important; }
.forabg li.row.forum_unread_locked dd dfn,
.forabg li.row.forum_read_locked dd dfn { color: rgba(255,210,230,0.6) !important; }
.forabg li.row.forum_unread_locked .forum-icon-wrap,
.forabg li.row.forum_read_locked .forum-icon-wrap {
background: rgba(255,255,255,0.15) !important;
color: #fff !important;
box-shadow: none !important;
}
.forabg li.row.forum_unread_locked .lastpost-subject,
.forabg li.row.forum_read_locked .lastpost-subject { color: #ffd0e0 !important; }
.forabg li.row.forum_unread_locked .lastpost-time,
.forabg li.row.forum_read_locked .lastpost-time { color: rgba(255,210,230,0.6) !important; }
.forabg li.row.forum_unread_locked .lastpost-author,
.forabg li.row.forum_read_locked .lastpost-author { color: rgba(255,210,230,0.8) !important; }
.forabg li.row.forum_unread_locked .lastpost-author a,
.forabg li.row.forum_read_locked .lastpost-author a { color: #fff !important; }
.forabg li.row.forum_unread_locked .lastpost-avatar,
.forabg li.row.forum_read_locked .lastpost-avatar {
background: rgba(255,255,255,0.2) !important;
}
.forabg li.row.forum_unread_locked .forum-new-badge,
.forabg li.row.forum_read_locked .forum-new-badge {
background: rgba(255,255,255,0.25) !important;
color: #fff !important;
}
/* ================================================
SUBFORUM ROWS under locked parents - crimson text
================================================ */
li.row.subforum-row a.forumtitle,
li.row.subforum-row a,
.forabg li.row.subforum-row a.forumtitle,
.forabg li.row.subforum-row a {
color: #c01848 !important;
font-weight: 700 !important;
}
li.row.subforum-row a.forumtitle:hover,
.forabg li.row.subforum-row a.forumtitle:hover {
color: #8a0a30 !important;
}
/* ================================================
HIDE NEW TOPIC BUTTON IN PARENT FORUMS
================================================ */
/* Hide new topic button when viewing parent forum pages */
.forum-specific-19 .btn-post-new,
.forum-specific-5 .btn-post-new,
.forum-specific-3 .btn-post-new,
.forum-specific-9 .btn-post-new,
.forum-specific-14 .btn-post-new,
.forum-specific-26 .btn-post-new,
.forum-specific-79 .btn-post-new {
display: none !important;
}
/* ================================================
MEMBER LIST - Hide posts column, name only
================================================ */
.memberlist th.posts,
.memberlist td.posts,
.memberlist th:nth-child(2),
.memberlist td:nth-child(2) {
display: none !important;
}
.memberlist th.info,
.memberlist td.info {
display: none !important;
}
/* ===== END OF PRE-REDESIGN STYLESHEET ===== */
/* ===== BEGIN TRUREVIEW EDITORIAL DARK -- PHASE 0 ===== */
/* ===============================================================
TRUREVIEW DESIGN TOKENS -- Editorial Dark
Append this block to the END of stylesheet.css.
All rules are scoped under .tru-dark to avoid colliding with legacy
crimson variables still referenced elsewhere.
To activate: add class="tru-dark" to the tag in
overall_header.html. Remove the class to roll back.
=============================================================== */
.tru-dark {
--bg: #0a0a0b;
--paper: #0d0d0e;
--paper-2: #111113;
--paper-3: #151518;
--line: #1f1f23;
--line-2: #2a2a30;
--line-3: #3a3a42;
--ink: #e8e5dd;
--ink-2: #b0aca0;
--ink-3: #7a766c;
--ink-4: #4f4c45;
--gold: #c9a961;
--gold-2: #e0c17c;
--gold-3: #8a7340;
--gold-wash: rgba(201,169,97,0.07);
--red: #b8423d;
--green: #6b8e5a;
--f-serif: 'Playfair Display', Georgia, serif;
--f-sans: 'Raleway', 'Inter', system-ui, sans-serif;
--f-marg: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
--f-mono: 'Cormorant Garamond', Georgia, serif;
background: var(--bg);
color: var(--ink);
font-family: var(--f-sans);
font-size: 13px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
letter-spacing: 0.005em;
/* Subtle grid paper texture */
background-image:
linear-gradient(to right, rgba(201,169,97,0.015) 1px, transparent 1px),
linear-gradient(to bottom, rgba(201,169,97,0.015) 1px, transparent 1px);
background-size: 40px 40px;
}
/* Reset under namespace */
.tru-dark *, .tru-dark *::before, .tru-dark *::after { box-sizing: border-box; }
.tru-dark a { color: inherit; text-decoration: none; }
.tru-dark ::selection { background: var(--gold); color: #000; }
/* Utility helpers used throughout the component CSS */
.tru-dark .mono { font-family: var(--f-marg); font-style: italic; letter-spacing: 0.01em; }
.tru-dark .serif { font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.01em; }
.tru-dark .tnum { font-variant-numeric: tabular-nums; }
.tru-dark .hair { border: 0; border-top: 1px solid var(--line); margin: 0; }
.tru-dark .hair-2 { border: 0; border-top: 1px solid var(--line-2); margin: 0; }
/* Google Fonts required -- add to the in overall_header.html:
Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500
Raleway:wght@400;500;600;700
Inter:wght@400;500;600
Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500
*/
/* ===============================================================
TRUREVIEW COMPONENTS -- Editorial Dark
Append this block AFTER trureview-tokens.css in stylesheet.css.
Every selector is scoped under .tru-dark -- safe to drop in.
WHERE-comments below each block name the phpBB template file the
rules primarily target. See TRANSLATION_MAP.md for full detail.
=============================================================== */
/* ===============================================================
TRUREVIEW -- Editorial Dark
Denser, smaller, more "worked on". Black + warm champagne gold.
Editorial serif headlines, tight monospace marginalia, hairline
rules, numbered sections, indexed lists, grid paper bg textures.
=============================================================== */
.tru-dark *, .tru-dark *::before, .tru-dark *::after { box-sizing: border-box; }
.tru-dark a { color: inherit; text-decoration: none; }
.tru-dark ::selection { background: var(--gold); color: #000; }
/* Utility */
.tru-dark .mono { font-family: var(--f-marg); font-style: italic; letter-spacing: 0.01em; text-transform: none; }
.tru-dark .serif { font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.01em; }
.tru-dark .eyebrow {
font-family: var(--f-marg); font-size: 14px;
letter-spacing: 0.02em; font-style: italic;
color: var(--gold); font-weight: 500;
}
.tru-dark .tnum { font-variant-numeric: tabular-nums; }
.tru-dark .hair { border: 0; border-top: 1px solid var(--line); margin: 0; }
.tru-dark .hair-2 { border: 0; border-top: 1px solid var(--line-2); margin: 0; }
/* Wrap */
.tru-dark .wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.tru-dark .wrap-narrow { max-width: 980px; margin: 0 auto; padding: 0 28px; }
/* --- TOP BAR --- */
.tru-dark .topbar {
position: sticky; top: 0; z-index: 50;
background: rgba(10,10,11,0.88);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.tru-dark .topbar-inner {
display: grid; grid-template-columns: auto 1fr auto;
gap: 32px; align-items: center;
padding: 14px 28px;
max-width: 1280px; margin: 0 auto;
}
.tru-dark .logo {
display: flex; align-items: baseline; gap: 10px;
font-family: var(--f-serif); font-size: 22px;
letter-spacing: -0.015em;
color: var(--ink);
}
.tru-dark .logo .dot {
width: 5px; height: 5px; background: var(--gold);
border-radius: 50%; display: inline-block;
transform: translateY(-6px);
}
.tru-dark .logo small {
font-family: var(--f-mono); font-size: 9px;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--ink-3); margin-left: 2px;
}
.tru-dark .nav-links {
display: flex; gap: 2px; align-items: center;
}
.tru-dark .nav-links a {
padding: 8px 14px; font-size: 12px;
color: var(--ink-2); letter-spacing: 0.02em;
border-radius: 2px;
display: flex; align-items: center; gap: 8px;
}
.tru-dark .nav-links a:hover { color: var(--gold); }
.tru-dark .nav-links a.active {
color: var(--gold);
background: var(--gold-wash);
}
.tru-dark .nav-links .num {
font-family: var(--f-mono); font-size: 9px;
color: var(--ink-4); letter-spacing: 0.1em;
}
.tru-dark .topbar-right {
display: flex; gap: 8px; align-items: center;
}
/* --- BUTTONS --- */
.tru-dark .btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px; font-family: var(--f-sans);
font-size: 11px; font-weight: 500;
letter-spacing: 0.1em; text-transform: uppercase;
border: 1px solid var(--line-2); color: var(--ink);
background: transparent; cursor: pointer;
transition: all .12s; border-radius: 2px;
}
.tru-dark .btn:hover { border-color: var(--gold); color: var(--gold); }
.tru-dark .btn-primary {
background: var(--gold); color: #18120a;
border-color: var(--gold); font-weight: 600;
}
.tru-dark .btn-primary:hover { background: var(--gold-2); border-color: var(--gold-2); color: #18120a; }
.tru-dark .btn-ghost { border-color: transparent; color: var(--ink-2); }
.tru-dark .btn-ghost:hover { color: var(--gold); border-color: transparent; background: var(--gold-wash); }
.tru-dark .btn-sm { padding: 6px 10px; font-size: 10px; }
.tru-dark .btn-xs { padding: 4px 8px; font-size: 9px; }
/* --- SUB BAR: search + city --- */
.tru-dark .subbar {
border-bottom: 1px solid var(--line);
background: var(--paper);
}
.tru-dark .subbar-inner {
max-width: 1280px; margin: 0 auto;
padding: 0 28px; display: flex; align-items: center; gap: 0;
overflow-x: auto;
}
.tru-dark .subbar-label {
font-family: var(--f-mono); font-size: 9px;
color: var(--ink-4); letter-spacing: 0.2em;
text-transform: uppercase; padding-right: 16px;
border-right: 1px solid var(--line);
margin-right: 8px;
padding-top: 14px; padding-bottom: 14px;
}
.tru-dark .city-tab {
padding: 14px 14px; font-size: 11px;
color: var(--ink-3); letter-spacing: 0.02em;
cursor: pointer; white-space: nowrap;
border-bottom: 1px solid transparent;
display: flex; align-items: center; gap: 8px;
}
.tru-dark .city-tab .code {
font-family: var(--f-mono); font-size: 9px;
color: var(--ink-4); letter-spacing: 0.1em;
}
.tru-dark .city-tab.active {
color: var(--gold);
border-bottom-color: var(--gold);
}
.tru-dark .city-tab:hover { color: var(--ink); }
/* --- SITE FRAME with marginalia --- */
.tru-dark .stage {
display: grid;
grid-template-columns: 44px 1fr 44px;
position: relative;
}
.tru-dark .margin {
border-right: 1px solid var(--line);
font-family: var(--f-mono); font-size: 9px;
color: var(--ink-4); letter-spacing: 0.15em;
writing-mode: vertical-rl;
padding: 16px 0;
display: flex; justify-content: center;
position: sticky; top: 64px; align-self: start;
}
.tru-dark .margin.right {
border-right: none; border-left: 1px solid var(--line);
}
/* --- MASTHEAD (replaces age gate hero) --- */
.tru-dark .masthead {
border-bottom: 1px solid var(--line);
background:
linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%),
radial-gradient(ellipse at 20% 0%, rgba(201,169,97,0.08), transparent 50%);
position: relative;
}
.tru-dark .masthead-inner {
max-width: 1280px; margin: 0 auto;
padding: 22px 28px;
display: grid; grid-template-columns: 1fr auto; gap: 24px;
align-items: end;
}
.tru-dark .masthead .title {
font-family: var(--f-serif); font-size: 52px;
line-height: 1; letter-spacing: -0.03em;
font-weight: 400; margin: 0;
}
.tru-dark .masthead .title em {
font-style: italic; color: var(--gold);
}
.tru-dark .masthead .kicker {
display: flex; align-items: center; gap: 12px;
font-family: var(--f-mono); font-size: 10px;
color: var(--ink-3); letter-spacing: 0.15em;
text-transform: uppercase; margin-bottom: 10px;
}
.tru-dark .masthead .kicker .rule {
flex-shrink: 0; width: 40px; height: 1px; background: var(--gold-3);
}
.tru-dark .masthead .tagline {
margin-top: 10px; color: var(--ink-2);
font-size: 13px; max-width: 480px;
font-family: var(--f-serif); font-style: italic;
}
.tru-dark .masthead .right-stats {
display: grid; grid-template-columns: repeat(3, auto); gap: 24px;
font-family: var(--f-mono); font-size: 10px;
text-align: right; color: var(--ink-3);
letter-spacing: 0.12em; text-transform: uppercase;
}
.tru-dark .masthead .right-stats .n {
font-family: var(--f-serif); font-size: 22px;
color: var(--gold); display: block; margin-bottom: 2px;
letter-spacing: -0.02em;
}
/* --- SECTION --- */
.tru-dark .section {
padding: 28px 0;
border-bottom: 1px solid var(--line);
}
.tru-dark .section-h {
display: grid; grid-template-columns: auto 1fr auto;
gap: 16px; align-items: baseline;
margin-bottom: 16px;
}
.tru-dark .section-h .idx {
font-family: var(--f-mono); font-size: 10px;
color: var(--gold-3); letter-spacing: 0.2em;
text-transform: uppercase;
}
.tru-dark .section-h h2 {
font-family: var(--f-serif); font-size: 22px;
font-weight: 400; letter-spacing: -0.015em;
margin: 0; color: var(--ink);
}
.tru-dark .section-h h2 em {
font-style: italic; color: var(--gold);
}
.tru-dark .section-h .more {
font-family: var(--f-mono); font-size: 10px;
color: var(--ink-3); letter-spacing: 0.15em;
text-transform: uppercase;
}
.tru-dark .section-h .more:hover { color: var(--gold); }
/* --- CARDS --- */
.tru-dark .card {
background: var(--paper);
border: 1px solid var(--line);
padding: 16px;
}
.tru-dark .card-gold {
background: linear-gradient(180deg, var(--gold-wash), transparent 70%);
border: 1px solid var(--gold-3);
}
/* --- FORUM BOARD LIST (compact, editorial) --- */
.tru-dark .board-group {
margin-bottom: 18px;
border: 1px solid var(--line);
background: var(--paper);
}
.tru-dark .board-head {
display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center; gap: 16px;
padding: 14px 16px;
border-bottom: 1px solid var(--line);
background: var(--paper-2);
}
.tru-dark .board-head .idx {
font-family: var(--f-mono); font-size: 10px;
color: var(--gold); letter-spacing: 0.15em;
text-align: center;
border: 1px solid var(--gold-3); padding: 4px 6px;
}
.tru-dark .board-head .title {
font-family: var(--f-serif); font-size: 17px;
letter-spacing: -0.01em; color: var(--ink);
margin-bottom: 2px;
}
.tru-dark .board-head .desc {
font-size: 11px; color: var(--ink-3);
}
.tru-dark .board-head .count {
font-family: var(--f-mono); font-size: 10px;
color: var(--ink-3); letter-spacing: 0.1em;
text-align: right;
}
.tru-dark .board-head .count strong { color: var(--gold); font-weight: 500; }
.tru-dark .board-row {
display: grid;
grid-template-columns: 56px 1fr 70px 70px 200px;
gap: 16px; align-items: center;
padding: 10px 16px;
border-bottom: 1px solid var(--line);
font-size: 12px;
transition: background .1s;
}
.tru-dark .board-row:last-child { border-bottom: 0; }
.tru-dark .board-row:hover { background: var(--paper-2); }
.tru-dark .board-row.sub { padding-left: 28px; }
.tru-dark .board-row .icon {
font-family: var(--f-mono); font-size: 10px;
color: var(--ink-4); text-align: center;
letter-spacing: 0.1em;
}
.tru-dark .board-row.sub .icon { color: var(--gold-3); }
.tru-dark .board-row .main .t {
color: var(--ink); font-size: 13px;
margin-bottom: 2px;
}
.tru-dark .board-row .main .d { color: var(--ink-3); font-size: 11px; }
.tru-dark .board-row .num {
font-family: var(--f-mono); color: var(--ink-2);
font-size: 11px; text-align: center;
letter-spacing: 0.05em;
}
.tru-dark .board-row .latest { font-size: 11px; color: var(--ink-3); line-height: 1.45; }
.tru-dark .board-row .latest .t {
color: var(--ink-2); margin-bottom: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 190px;
}
.tru-dark .board-row .latest .m { color: var(--ink-4); font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.05em; }
.tru-dark .board-row .latest .m .u { color: var(--gold); }
/* Table header row */
.tru-dark .board-row.head {
background: transparent; padding: 8px 16px;
border-bottom: 1px solid var(--line-2);
font-family: var(--f-mono); font-size: 9px;
color: var(--ink-4); letter-spacing: 0.2em;
text-transform: uppercase;
}
.tru-dark .board-row.head:hover { background: transparent; }
/* --- THREAD LIST --- */
.tru-dark .thread-table {
border: 1px solid var(--line);
background: var(--paper);
}
.tru-dark .thread-row {
display: grid;
grid-template-columns: 28px 1fr 60px 60px 130px;
gap: 14px; align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
font-size: 12px;
}
.tru-dark .thread-row:last-child { border-bottom: 0; }
.tru-dark .thread-row:hover { background: var(--paper-2); }
.tru-dark .thread-row .tag {
font-family: var(--f-mono); font-size: 10px;
color: var(--gold); text-align: center;
}
.tru-dark .thread-row .title {
color: var(--ink); font-size: 13px;
font-family: var(--f-serif); letter-spacing: -0.005em;
}
.tru-dark .thread-row .byline {
display: flex; gap: 8px; align-items: center;
font-size: 10px; color: var(--ink-3);
font-family: var(--f-mono); letter-spacing: 0.05em;
margin-top: 2px;
}
.tru-dark .thread-row .byline .u { color: var(--gold); }
.tru-dark .thread-row .n {
font-family: var(--f-mono); color: var(--ink-2);
font-size: 11px; text-align: center;
}
.tru-dark .thread-row .last {
font-family: var(--f-mono); font-size: 9px;
color: var(--ink-3); letter-spacing: 0.05em;
text-align: right;
}
.tru-dark .thread-row .last .u { color: var(--gold); }
.tru-dark .thread-row.pinned { background: var(--gold-wash); }
.tru-dark .thread-row.pinned .title::before {
content: '\2690 '; color: var(--gold); font-size: 11px;
}
.tru-dark .thread-row.hot .title::after {
content: ' . HOT'; color: var(--red);
font-family: var(--f-mono); font-size: 9px;
letter-spacing: 0.1em; font-style: normal;
}
/* --- THREAD / POST --- */
.tru-dark .post {
display: grid; grid-template-columns: 170px 1fr;
border: 1px solid var(--line); background: var(--paper);
margin-bottom: 12px;
}
.tru-dark .post .side {
padding: 18px 14px; border-right: 1px solid var(--line);
background: var(--paper-2); text-align: center;
}
.tru-dark .post .side .av {
width: 64px; height: 64px; margin: 0 auto 10px;
border: 1px solid var(--gold-3);
color: var(--gold); background: var(--paper);
display: grid; place-items: center;
font-family: var(--f-serif); font-size: 22px;
letter-spacing: -0.02em;
}
.tru-dark .post .side .av.founder {
background: linear-gradient(135deg, var(--gold), var(--gold-2));
color: #18120a;
}
.tru-dark .post .side .uname {
font-family: var(--f-serif); font-size: 14px;
color: var(--gold); margin-bottom: 4px;
letter-spacing: -0.005em;
}
.tru-dark .post .side .role {
font-family: var(--f-mono); font-size: 9px;
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 10px;
}
.tru-dark .post .side .stats {
font-family: var(--f-mono); font-size: 10px;
color: var(--ink-3); line-height: 1.6;
text-align: left; padding-top: 10px;
border-top: 1px solid var(--line);
}
.tru-dark .post .side .stats b { color: var(--ink-2); font-weight: 500; }
.tru-dark .post .body { padding: 20px 24px; }
.tru-dark .post .body .hd {
display: flex; justify-content: space-between; align-items: baseline;
font-family: var(--f-mono); font-size: 10px;
color: var(--ink-3); letter-spacing: 0.1em;
text-transform: uppercase;
padding-bottom: 12px; margin-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.tru-dark .post .body .hd .num { color: var(--gold); }
.tru-dark .post .body p {
color: var(--ink); line-height: 1.7; margin: 0 0 12px;
font-size: 13.5px;
}
.tru-dark .post .body p:first-letter { }
/* Rating panel inside post */
.tru-dark .rate-panel {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0; margin: 0 0 18px;
border: 1px solid var(--gold-3);
background: var(--gold-wash);
}
.tru-dark .rate-panel .cell {
padding: 12px 14px;
border-right: 1px solid var(--gold-3);
}
.tru-dark .rate-panel .cell:last-child { border-right: 0; }
.tru-dark .rate-panel .k {
font-family: var(--f-mono); font-size: 9px;
color: var(--gold-3); letter-spacing: 0.15em;
text-transform: uppercase; margin-bottom: 6px;
}
.tru-dark .rate-panel .v {
font-family: var(--f-serif); font-size: 15px;
color: var(--ink); letter-spacing: -0.01em;
}
.tru-dark .rate-panel .stars { color: var(--gold); font-size: 13px; letter-spacing: 0.15em; }
/* Pull quote */
.tru-dark .pullquote {
border-left: 2px solid var(--gold);
padding: 6px 0 6px 18px; margin: 16px 0;
font-family: var(--f-serif); font-style: italic;
font-size: 17px; color: var(--ink-2);
line-height: 1.45; letter-spacing: -0.01em;
}
/* --- DIRECTORY CARD (AGENCIES) --- */
.tru-dark .agency-card {
display: grid;
grid-template-columns: 120px 1fr auto;
gap: 20px; padding: 16px; align-items: center;
background: var(--paper); border: 1px solid var(--line);
transition: border-color .15s, background .15s;
}
.tru-dark .agency-card:hover {
border-color: var(--gold-3);
background: var(--paper-2);
}
.tru-dark .agency-card.featured {
border-color: var(--gold-3);
background: linear-gradient(180deg, var(--gold-wash), transparent 60%);
}
.tru-dark .agency-card .logo {
height: 72px; border: 1px solid var(--line-2);
background: var(--paper-2);
display: grid; place-items: center;
color: var(--ink-3); font-family: var(--f-serif);
font-size: 22px; letter-spacing: -0.02em;
}
.tru-dark .agency-card .name {
font-family: var(--f-serif); font-size: 18px;
letter-spacing: -0.01em; margin-bottom: 4px;
}
.tru-dark .agency-card .name .feat {
font-family: var(--f-mono); font-size: 9px;
color: var(--gold); letter-spacing: 0.15em;
background: var(--gold-wash); padding: 2px 6px;
border: 1px solid var(--gold-3); margin-left: 8px;
vertical-align: middle; text-transform: uppercase;
}
.tru-dark .agency-card .meta {
font-family: var(--f-mono); font-size: 10px;
color: var(--ink-3); letter-spacing: 0.08em;
margin-bottom: 8px; display: flex; gap: 12px;
}
.tru-dark .agency-card .meta .dot { color: var(--gold-3); }
.tru-dark .agency-card .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tru-dark .agency-card .tag {
font-size: 10px; letter-spacing: 0.1em;
text-transform: uppercase; padding: 3px 7px;
border: 1px solid var(--line-2); color: var(--ink-3);
}
.tru-dark .agency-card .rating {
text-align: right;
font-family: var(--f-serif); font-size: 24px;
color: var(--gold); line-height: 1;
}
.tru-dark .agency-card .rating small {
display: block; font-family: var(--f-mono);
font-size: 9px; color: var(--ink-3);
letter-spacing: 0.1em; margin-top: 4px;
text-transform: uppercase; font-weight: 400;
}
/* --- INDEPENDENT GIRL CARD (photo-forward) --- */
.tru-dark .indie-card {
background: var(--paper); border: 1px solid var(--line);
overflow: hidden; position: relative;
transition: transform .15s, border-color .15s;
}
.tru-dark .indie-card:hover {
border-color: var(--gold-3);
transform: translateY(-2px);
}
.tru-dark .indie-card .photo {
aspect-ratio: 3/4; position: relative;
background: var(--paper-2);
background-image:
linear-gradient(135deg, transparent 0 48%, rgba(201,169,97,0.04) 48% 52%, transparent 52% 100%);
background-size: 10px 10px;
}
.tru-dark .indie-card .photo .overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9));
padding: 14px; display: flex;
flex-direction: column; justify-content: space-between;
}
.tru-dark .indie-card .photo .tag-top {
align-self: flex-start;
font-family: var(--f-mono); font-size: 9px;
color: var(--gold); letter-spacing: 0.15em;
padding: 3px 7px; background: rgba(0,0,0,0.6);
border: 1px solid var(--gold-3);
}
.tru-dark .indie-card .photo .foot {
color: var(--ink);
}
.tru-dark .indie-card .photo .foot .nm {
font-family: var(--f-serif); font-size: 24px;
letter-spacing: -0.02em; line-height: 1;
}
.tru-dark .indie-card .photo .foot .sub {
font-family: var(--f-mono); font-size: 9px;
color: var(--gold); letter-spacing: 0.15em;
text-transform: uppercase; margin-top: 6px;
}
.tru-dark .indie-card .body {
padding: 12px 14px; border-top: 1px solid var(--line);
}
.tru-dark .indie-card .body .line {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--f-mono); font-size: 10px;
color: var(--ink-3); letter-spacing: 0.08em;
margin-bottom: 8px;
}
.tru-dark .indie-card .body .line .r { color: var(--gold); }
.tru-dark .indie-card .body .line .av { color: var(--green); }
.tru-dark .indie-card .body .line .av.off { color: var(--ink-4); }
/* --- SIDEBAR --- */
.tru-dark .sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 100px; align-self: start; }
.tru-dark .sidebar h4 {
font-family: var(--f-mono); font-size: 10px;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--gold); margin: 0 0 12px;
padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.tru-dark .kv-list { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 11px; }
.tru-dark .kv-list .k {
color: var(--ink-3); font-family: var(--f-mono);
font-size: 9px; letter-spacing: 0.1em;
text-transform: uppercase;
}
.tru-dark .kv-list .v { color: var(--ink); text-align: right; }
/* --- AD SLOTS --- */
.tru-dark .ad {
background: var(--paper);
border: 1px dashed var(--line-3);
color: var(--ink-4);
font-family: var(--f-mono); font-size: 9px;
letter-spacing: 0.2em; text-transform: uppercase;
display: flex; align-items: center; justify-content: center;
text-align: center;
}
/* --- BADGES --- */
.tru-dark .chip {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--f-mono); font-size: 9px;
letter-spacing: 0.15em; text-transform: uppercase;
padding: 3px 7px; border: 1px solid var(--line-2);
color: var(--ink-2); background: var(--paper-2);
}
.tru-dark .chip-gold {
border-color: var(--gold); color: var(--gold);
background: var(--gold-wash);
}
.tru-dark .chip-founder {
background: linear-gradient(135deg, var(--gold), var(--gold-2));
color: #18120a; border: 0; font-weight: 600;
}
.tru-dark .chip-live {
color: var(--green); border-color: var(--green);
}
.tru-dark .chip-live::before {
content: ''; width: 5px; height: 5px;
background: var(--green); border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: 0.4; } }
/* --- FIELDS --- */
.tru-dark .field { margin-bottom: 14px; }
.tru-dark .field label {
display: block; font-family: var(--f-mono); font-size: 9px;
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 6px;
}
.tru-dark .field input, .tru-dark .field textarea, .tru-dark .field select {
width: 100%; background: var(--bg);
border: 1px solid var(--line-2);
color: var(--ink); padding: 10px 12px;
font-family: var(--f-sans); font-size: 13px;
}
.tru-dark .field input:focus, .tru-dark .field textarea:focus {
outline: none; border-color: var(--gold);
box-shadow: inset 0 0 0 1px var(--gold);
}
/* --- PRICE CARDS --- */
.tru-dark .price-card {
background: var(--paper); border: 1px solid var(--line);
padding: 24px; position: relative;
}
.tru-dark .price-card.feat {
border-color: var(--gold-3);
background: linear-gradient(180deg, var(--gold-wash), var(--paper));
}
.tru-dark .price-card .tier {
font-family: var(--f-mono); font-size: 10px;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--gold);
}
.tru-dark .price-card .price {
font-family: var(--f-serif); font-size: 46px;
color: var(--ink); margin: 12px 0 4px; line-height: 1;
letter-spacing: -0.02em;
}
.tru-dark .price-card .price small {
font-size: 13px; color: var(--ink-3);
font-family: var(--f-sans);
}
.tru-dark .price-card ul {
list-style: none; padding: 0; margin: 20px 0 0;
font-family: var(--f-mono); font-size: 11px;
letter-spacing: 0.02em;
}
.tru-dark .price-card ul li {
padding: 8px 0; border-top: 1px solid var(--line);
color: var(--ink-2); display: flex; gap: 10px; align-items: baseline;
}
.tru-dark .price-card ul li::before {
content: '--'; color: var(--gold); font-size: 11px;
}
/* --- FOOTER --- */
.tru-dark .footer {
border-top: 1px solid var(--gold-3);
padding: 40px 28px 24px;
background: var(--paper);
}
.tru-dark .footer-inner { max-width: 1280px; margin: 0 auto; }
.tru-dark .footer-top {
display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 36px;
margin-bottom: 32px;
}
.tru-dark .footer .brand .tag {
color: var(--ink-3); font-size: 12px;
margin-top: 14px; max-width: 280px;
font-family: var(--f-serif); font-style: italic;
}
.tru-dark .footer h5 {
font-family: var(--f-mono); font-size: 9px;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--gold); margin: 0 0 12px;
}
.tru-dark .footer ul { list-style: none; padding: 0; margin: 0; }
.tru-dark .footer ul li {
margin-bottom: 8px; font-size: 12px;
color: var(--ink-2);
}
.tru-dark .footer ul li:hover { color: var(--gold); }
.tru-dark .footer-bottom {
border-top: 1px solid var(--line); padding-top: 16px;
display: flex; justify-content: space-between;
font-family: var(--f-mono); font-size: 9px;
color: var(--ink-4); letter-spacing: 0.15em;
text-transform: uppercase;
}
/* --- STAT BLOCK (metrics) --- */
.tru-dark .stat-row {
display: grid; grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--line);
background: var(--paper);
}
.tru-dark .stat-row .stat {
padding: 18px 20px; border-right: 1px solid var(--line);
}
.tru-dark .stat-row .stat:last-child { border-right: 0; }
.tru-dark .stat-row .stat .k {
font-family: var(--f-mono); font-size: 9px;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 8px;
}
.tru-dark .stat-row .stat .v {
font-family: var(--f-serif); font-size: 32px;
color: var(--gold); letter-spacing: -0.02em; line-height: 1;
}
.tru-dark .stat-row .stat .d {
font-size: 10px; color: var(--ink-3); margin-top: 6px;
}
/* Pagination */
.tru-dark .pager {
display: flex; gap: 4px; align-items: center;
font-family: var(--f-mono);
}
.tru-dark .pager .p {
padding: 6px 10px; font-size: 11px;
border: 1px solid var(--line-2); color: var(--ink-2);
letter-spacing: 0.05em;
}
.tru-dark .pager .p.active {
background: var(--gold); color: #18120a; border-color: var(--gold);
}
.tru-dark .pager .p:hover { border-color: var(--gold); color: var(--gold); }
.tru-dark .pager .p.active:hover { color: #18120a; }
/* --- MOBILE --- */
@media (max-width: 820px) {
.tru-dark { font-size: 13px; }
.tru-dark .stage { grid-template-columns: 1fr; }
.tru-dark .margin { display: none; }
.tru-dark .topbar-inner { grid-template-columns: auto auto; gap: 12px; padding: 12px 16px; }
.tru-dark .nav-links { display: none; }
.tru-dark .wrap, .tru-dark .wrap-narrow { padding: 0 16px; }
.tru-dark .masthead-inner { grid-template-columns: 1fr; padding: 18px 16px; }
.tru-dark .masthead .title { font-size: 32px; }
.tru-dark .masthead .right-stats { grid-template-columns: repeat(3, 1fr); text-align: left; gap: 12px; margin-top: 14px; }
.tru-dark .subbar-inner { padding: 0 16px; }
.tru-dark .board-row { grid-template-columns: 36px 1fr auto; gap: 10px; padding: 10px 12px; }
.tru-dark .board-row .num, .tru-dark .board-row .latest { display: none; }
.tru-dark .board-row.head { display: none; }
.tru-dark .board-head { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 12px; }
.tru-dark .thread-row { grid-template-columns: 1fr auto; gap: 10px; padding: 10px 12px; }
.tru-dark .thread-row .tag, .tru-dark .thread-row .n:first-of-type, .tru-dark .thread-row .last { display: none; }
.tru-dark .post { grid-template-columns: 1fr; }
.tru-dark .post .side {
display: flex; gap: 12px; align-items: center; text-align: left;
padding: 12px; border-right: 0; border-bottom: 1px solid var(--line);
}
.tru-dark .post .side .av { width: 44px; height: 44px; font-size: 18px; margin: 0; }
.tru-dark .post .side .stats { display: none; }
.tru-dark .post .body { padding: 16px; }
.tru-dark .rate-panel { grid-template-columns: repeat(2, 1fr); }
.tru-dark .rate-panel .cell:nth-child(2) { border-right: 0; }
.tru-dark .rate-panel .cell { border-bottom: 1px solid var(--gold-3); }
.tru-dark .rate-panel .cell:nth-last-child(-n+2) { border-bottom: 0; }
.tru-dark .agency-card { grid-template-columns: 60px 1fr; gap: 14px; padding: 12px; }
.tru-dark .agency-card .rating { grid-column: 2; text-align: left; font-size: 18px; }
.tru-dark .agency-card .logo { height: 60px; font-size: 16px; }
.tru-dark .stat-row { grid-template-columns: repeat(2, 1fr); }
.tru-dark .stat-row .stat { border-bottom: 1px solid var(--line); }
.tru-dark .stat-row .stat:nth-child(odd) { border-right: 1px solid var(--line); }
.tru-dark .stat-row .stat:nth-child(2n) { border-right: 0; }
.tru-dark .footer-top { grid-template-columns: 1fr 1fr; gap: 24px; }
}
/* ===============================================================
PATCH BLOCK -- classes referenced in docs but missing from main
component CSS. Added 2026-04 so Claude Code does not have to
append a second chunk.
=============================================================== */
.tru-dark .forum-grid { display: grid; grid-template-columns: 1fr 280px; gap: 28px; }
@media (max-width: 820px) { .tru-dark .forum-grid { grid-template-columns: 1fr; } }
.tru-dark .gold-text { color: var(--gold); }
.tru-dark .tagline-italic {
font-family: var(--f-marg); font-style: italic;
text-transform: none; letter-spacing: 0;
}
.tru-dark .kicker {
font-family: var(--f-marg); font-style: italic;
color: var(--gold); font-size: 13px;
letter-spacing: 0.08em; text-transform: uppercase;
}
.tru-dark .sub {
color: var(--ink-3); font-family: var(--f-marg);
font-style: italic; font-size: 13px;
}
.tru-dark .sub-link {
color: var(--ink-3); font-size: 12px;
display: inline-block; margin-top: 10px;
}
.tru-dark .sub-link:hover { color: var(--gold); }
.tru-dark .og-bar {
height: 4px; background: var(--paper-3);
overflow: hidden; margin: 8px 0;
}
.tru-dark .og-bar i { display: block; height: 100%; background: var(--gold); }
.tru-dark .og-count {
font-family: var(--f-marg); font-style: italic;
font-size: 13px; color: var(--ink-3);
display: flex; justify-content: space-between;
}
.tru-dark .auth-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 24px; max-width: 980px; margin: 40px auto;
padding: 0 28px;
}
.tru-dark .auth-card, .tru-dark .auth-promo { padding: 32px; }
.tru-dark .field label.inline { display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px) { .tru-dark .auth-grid { grid-template-columns: 1fr; } }
/* =============================================================
REVIEW PANEL -- rendered output of [review] BBCode.
Also duplicated in REVIEW_TEMPLATE.md section 3 for reference.
=============================================================== */
.tru-dark .review-panel {
background: var(--paper);
border: 1px solid var(--line-2);
border-top: 2px solid var(--gold);
padding: 24px 28px;
margin: 0 0 28px;
}
.tru-dark .review-panel-head { margin-bottom: 18px; }
.tru-dark .review-panel-head .kicker {
font-family: var(--f-marg); font-style: italic;
color: var(--gold); font-size: 13px;
letter-spacing: 0.08em; text-transform: uppercase;
}
.tru-dark .review-panel-head h2 {
font-family: var(--f-serif); font-size: 32px;
color: var(--ink); margin: 4px 0 2px;
letter-spacing: -0.02em;
}
.tru-dark .review-panel-head .sub {
font-family: var(--f-marg); font-style: italic;
color: var(--ink-3); font-size: 14px;
}
.tru-dark .review-ratings {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 14px; padding: 16px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.tru-dark .review-ratings .r { display: flex; flex-direction: column; gap: 4px; }
.tru-dark .review-ratings .k {
font-family: var(--f-marg); font-style: italic;
color: var(--ink-3); font-size: 12px;
letter-spacing: 0.05em; text-transform: uppercase;
}
.tru-dark .review-ratings .v {
font-family: var(--f-serif); font-size: 28px;
color: var(--ink); line-height: 1;
}
.tru-dark .review-ratings .bar {
height: 2px; background: var(--line-2); position: relative;
}
.tru-dark .review-ratings .bar i {
position: absolute; inset: 0 auto 0 0;
background: var(--gold); display: block;
}
.tru-dark .review-overall {
display: flex; align-items: baseline;
gap: 14px; padding: 16px 0 8px;
}
.tru-dark .review-overall .label {
font-family: var(--f-marg); font-style: italic;
color: var(--ink-3); letter-spacing: 0.05em;
text-transform: uppercase; font-size: 12px;
}
.tru-dark .review-overall .stars {
color: var(--gold); font-size: 18px; letter-spacing: 0.1em;
}
.tru-dark .review-overall .n {
font-family: var(--f-serif); font-size: 20px; color: var(--ink);
}
.tru-dark .review-pullquote {
font-family: var(--f-serif); font-style: italic;
font-size: 22px; line-height: 1.35;
color: var(--ink); margin: 8px 0 0;
padding-left: 20px; border-left: 2px solid var(--gold);
max-width: 780px;
}
@media (max-width: 720px) {
.tru-dark .review-ratings { grid-template-columns: repeat(2, 1fr); }
.tru-dark .review-pullquote { font-size: 18px; }
}
/* ===== END TRUREVIEW EDITORIAL DARK -- PHASE 0 ===== */
/* ===== BEGIN TRUREVIEW EDITORIAL DARK -- PHASE 1 ===== */
/* --- shared logo wrapper (header + footer) --- */
.tru-dark .logo-mark {
display: inline-block;
text-decoration: none;
color: inherit;
line-height: 0;
}
.tru-dark .logo-mark:hover { opacity: 0.85; }
/* === MOBILE TOPBAR (PHASE 1 mobile layer 1: topbar) === */
.tru-dark .mobile-menu { display: none; }
@media (max-width: 768px) {
.tru-dark .topbar-inner {
grid-template-columns: auto auto;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
}
.tru-dark .topbar-inner .logo-mark img {
height: 56px !important;
}
.tru-dark .nav-links {
display: none;
}
.tru-dark .topbar-right {
display: none;
}
.tru-dark .mobile-menu {
display: block;
position: relative;
}
.tru-dark .mobile-menu summary {
list-style: none;
cursor: pointer;
font-size: 28px;
line-height: 1;
color: var(--ink);
padding: 8px 12px;
border: 1px solid var(--ink-3);
border-radius: 4px;
user-select: none;
}
.tru-dark .mobile-menu summary::-webkit-details-marker { display: none; }
.tru-dark .mobile-menu[open] summary {
border-color: var(--gold);
color: var(--gold);
}
.tru-dark .mobile-nav {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--paper-2);
border: 1px solid var(--ink-3);
border-radius: 6px;
padding: 8px 0;
min-width: 280px;
z-index: 100;
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.tru-dark .mobile-nav-divider {
display: block;
height: 1px;
background: var(--ink-3);
margin: 4px 0;
}
.tru-dark .mobile-nav-cta {
text-align: center;
font-family: var(--f-sans) !important;
font-size: 13px !important;
border-bottom: none !important;
}
.tru-dark .mobile-nav-cta-primary {
color: var(--gold) !important;
font-weight: 600;
}
.tru-dark .mobile-nav a {
display: flex;
align-items: baseline;
gap: 12px;
padding: 12px 20px;
color: var(--ink);
text-decoration: none;
font-family: var(--f-sans);
font-size: 14px;
border-bottom: 1px solid var(--ink-3);
}
.tru-dark .mobile-nav a:last-child { border-bottom: none; }
.tru-dark .mobile-nav a:hover { background: var(--paper-3); color: var(--gold); }
.tru-dark .mobile-nav .num {
color: var(--gold);
font-family: var(--f-serif);
font-size: 12px;
min-width: 24px;
}
.tru-dark .topbar-right .btn-sm {
padding: 6px 12px;
font-size: 12px;
}
/* --- Footer: stack 5-col grid to 1-col --- */
.tru-dark .footer-top {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.tru-dark .footer { padding: 32px 20px !important; }
.tru-dark .footer-top .brand { text-align: left; }
/* --- Card grids: collapse all multi-col grids to single column --- */
.tru-dark main div[style*="grid-template-columns: repeat(2, 1fr)"],
.tru-dark main div[style*="grid-template-columns: repeat(3, 1fr)"],
.tru-dark main div[style*="grid-template-columns: repeat(4, 1fr)"],
.tru-dark main div[style*="grid-template-columns: repeat(5, 1fr)"] {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
/* --- Indie directory 3-col card grid --- */
.tru-dark main div[style*="grid-template-columns: repeat(3, 1fr); gap: 18px;"] {
grid-template-columns: 1fr !important;
}
/* --- Main wrap padding tighter on phone --- */
.tru-dark main.wrap,
.tru-dark main.wrap-narrow {
padding: 20px 16px !important;
}
/* --- Hero/masthead typography scale --- */
.tru-dark .masthead .title { font-size: 40px !important; }
.tru-dark .masthead .tagline { font-size: 16px !important; }
.tru-dark .masthead { padding: 32px 20px !important; }
/* --- Card padding on phone --- */
.tru-dark .card { padding: 18px !important; }
/* --- Subbar: horizontal scroll with edge fade indicator --- */
.tru-dark .subbar {
position: relative;
}
.tru-dark .subbar-inner {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
padding: 10px 16px !important;
gap: 6px !important;
}
.tru-dark .subbar::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 100%;
background: linear-gradient(to right, transparent, var(--paper) 70%);
pointer-events: none;
z-index: 2;
}
.tru-dark .city-tab {
padding: 8px 12px !important;
font-size: 13px !important;
flex-shrink: 0;
}
.tru-dark .subbar-label {
font-size: 11px !important;
flex-shrink: 0;
}
}
/* === END MOBILE TOPBAR === */
/* ===== END TRUREVIEW EDITORIAL DARK -- PHASE 1 ===== */
/* ===== BEGIN TRUREVIEW EDITORIAL DARK -- PHASE 2 ===== */
/* Forum chrome (overall_header.html replacement). All rules namespaced
under .tru-dark. Append-only. Phase 0/1 already provides .topbar,
.topbar-inner, .nav-links, .btn, .btn-primary, .btn-ghost, .btn-sm,
.subbar, .subbar-inner, .subbar-label, and .logo-mark. Phase 2 adds
what does not exist yet, restyles the breadcrumb dark, restyles the
mobile slide-out drawer dark, and hides the orphan crimson elements
that overall_footer.html still renders until Session 2. */
/* --- Topbar additions --- */
.tru-dark .topbar-right .user-handle {
font-family: var(--f-mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.02em;
padding: 6px 10px;
border: 1px solid var(--line-2);
border-radius: 2px;
white-space: nowrap;
}
.tru-dark .topbar-hamburger {
display: none;
background: transparent;
border: 1px solid var(--line-2);
border-radius: 2px;
padding: 0;
cursor: pointer;
width: 36px;
height: 36px;
flex-direction: column;
gap: 3px;
align-items: center;
justify-content: center;
}
.tru-dark .topbar-hamburger span {
display: block;
width: 16px;
height: 1px;
background: var(--ink-2);
}
.tru-dark .topbar-hamburger:hover { border-color: var(--gold); }
.tru-dark .topbar-hamburger:hover span { background: var(--gold); }
/* --- Subbar Quick Links (Drift #1) --- */
.tru-dark .quick-link {
padding: 14px 14px;
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.02em;
white-space: nowrap;
border-bottom: 1px solid transparent;
display: flex;
align-items: center;
text-decoration: none;
}
.tru-dark .quick-link:hover {
color: var(--gold);
border-bottom-color: var(--gold);
}
/* --- Breadcrumb (phpBB INCLUDE navbar_header.html) dark restyle --- */
.tru-dark #tr-breadcrumb {
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.tru-dark #tr-breadcrumb .navbar {
background: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
.tru-dark #tr-breadcrumb .navbar .inner {
background: transparent !important;
border: none !important;
max-width: 1280px !important;
margin: 0 auto !important;
padding: 8px 28px !important;
}
.tru-dark #tr-breadcrumb ul#nav-main { display: none !important; }
.tru-dark #tr-breadcrumb ul#nav-breadcrumbs {
background: transparent !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
font-family: var(--f-sans) !important;
font-size: 11px !important;
color: var(--ink-3) !important;
letter-spacing: 0.02em !important;
}
.tru-dark #tr-breadcrumb ul#nav-breadcrumbs li { display: inline-flex; align-items: center; }
.tru-dark #tr-breadcrumb ul#nav-breadcrumbs .crumb a {
color: var(--ink-2) !important;
text-decoration: none !important;
padding: 0 6px;
}
.tru-dark #tr-breadcrumb ul#nav-breadcrumbs .crumb a:hover { color: var(--gold) !important; }
.tru-dark #tr-breadcrumb ul#nav-breadcrumbs .icon { color: var(--ink-4) !important; margin-right: 4px !important; }
/* --- Single-column page wrapper (replaces inline 2-col grid) --- */
.tru-dark #tr-page-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 24px 28px;
display: block;
}
.tru-dark #tr-main-col {
width: 100%;
min-width: 0;
}
/* --- Hide orphan elements still rendered by overall_footer.html.
Session 2 deletes them at the source. --- */
.tru-dark #tr-sidebar { display: none !important; }
.tru-dark #tr-help-strip { display: none !important; }
.tru-dark #tr-promo-bar { display: none !important; }
/* --- Page footer transitional dark wash (full rebuild in Session 2) --- */
.tru-dark #page-footer {
background: var(--bg) !important;
color: var(--ink-3) !important;
border-top: 1px solid var(--line) !important;
padding: 24px 28px !important;
margin-top: 0 !important;
font-family: var(--f-sans) !important;
font-size: 11px !important;
}
.tru-dark #page-footer a { color: var(--ink-2) !important; }
.tru-dark #page-footer a:hover { color: var(--gold) !important; }
.tru-dark #tr-footer-sponsors { display: none !important; }
.tru-dark #tr-footer-logo-wrap img { filter: none !important; max-height: 32px; opacity: 0.6; }
/* --- Mobile slide-out drawer dark restyle --- */
.tru-dark #tr-mobile-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(2px);
z-index: 90;
}
.tru-dark #tr-mobile-overlay.open { display: block; }
.tru-dark #tr-mobile-menu {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 320px;
max-width: 88vw;
background: var(--paper);
border-left: 1px solid var(--line);
z-index: 100;
overflow-y: auto;
font-family: var(--f-sans);
}
.tru-dark #tr-mobile-menu.open { display: block; }
.tru-dark #tr-mobile-menu-inner { padding: 20px 24px 40px; }
.tru-dark #tr-mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
}
.tru-dark #tr-mobile-header img { height: 40px; width: auto; display: block; }
.tru-dark #tr-mobile-close {
background: transparent;
border: 1px solid var(--line-2);
color: var(--ink-2);
width: 32px;
height: 32px;
font-size: 18px;
line-height: 1;
border-radius: 2px;
cursor: pointer;
}
.tru-dark #tr-mobile-close:hover { color: var(--gold); border-color: var(--gold); }
.tru-dark #tr-mobile-user {
font-family: var(--f-mono);
font-size: 11px;
color: var(--ink-2);
padding: 8px 0;
margin-bottom: 8px;
}
.tru-dark .tr-mobile-divider {
font-family: var(--f-mono);
font-size: 9px;
color: var(--ink-4);
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 16px 0 6px;
border-bottom: 1px solid var(--line);
margin-bottom: 4px;
}
.tru-dark #tr-mobile-menu a {
display: block;
padding: 8px 0;
font-size: 13px;
color: var(--ink) !important;
text-decoration: none;
}
.tru-dark #tr-mobile-menu a:hover { color: var(--gold) !important; }
.tru-dark .tr-mobile-post,
.tru-dark .tr-mobile-join {
color: var(--gold) !important;
font-weight: 600;
}
.tru-dark .tr-mobile-logout { color: var(--ink-3) !important; }
/* --- Mobile breakpoints --- */
@media (max-width: 960px) {
.tru-dark .topbar-right .user-handle { display: none; }
.tru-dark .topbar-right .btn-ghost { display: none; }
.tru-dark .topbar-hamburger { display: inline-flex; }
.tru-dark .subbar { display: none; }
.tru-dark #tr-page-wrap { padding: 16px; }
.tru-dark #tr-breadcrumb .navbar .inner { padding: 6px 16px !important; }
}
@media (max-width: 600px) {
.tru-dark .topbar-inner .logo-mark img { height: 44px !important; }
.tru-dark .topbar-right .btn-primary { padding: 6px 8px; font-size: 9px; }
.tru-dark #tr-page-wrap { padding: 12px; }
}
/* ===== END TRUREVIEW EDITORIAL DARK -- PHASE 2 ===== */
/* ===== PHASE 2 PATCH 1 -- Override legacy ticker + horizontal overflow ===== */
/* The legacy crimson rules (pre-line 3183) hijack #tr-breadcrumb to render
an animated "TORONTO ESCORTS * MONTREAL ESCORTS..." ticker via a ::after
pseudo-element, hide the actual phpBB breadcrumb, and use translateX(100vw)
which contributes to horizontal page overflow. Override here so the real
breadcrumb shows in editorial dark, the ticker disappears, and the page
no longer scrolls sideways. */
.tru-dark #tr-breadcrumb {
overflow: visible !important;
background: var(--paper) !important;
border-top: none !important;
border-bottom: 1px solid var(--line) !important;
height: auto !important;
line-height: normal !important;
}
.tru-dark #tr-breadcrumb::after {
content: none !important;
display: none !important;
animation: none !important;
}
.tru-dark #tr-breadcrumb .navbar {
display: block !important;
}
/* Defensive horizontal overflow guard. */
body.tru-dark {
overflow-x: hidden !important;
}
.tru-dark .topbar,
.tru-dark .subbar,
.tru-dark #tr-breadcrumb {
max-width: 100vw;
}
/* Hide the @username chip below 1100px so the topbar does not cramp before
the mobile breakpoint at 960px. Username remains accessible in the hamburger drawer. */
@media (max-width: 1100px) {
.tru-dark .topbar-right .user-handle { display: none !important; }
}
/* Ensure the @username chip content (phpBB may wrap admin/founder names in
a colored ) inherits the chip's typography instead of fighting it. */
.tru-dark .user-handle a,
.tru-dark .user-handle span {
color: inherit !important;
text-decoration: none !important;
font-weight: inherit !important;
}
/* ===== END PHASE 2 PATCH 1 ===== */
/* ===== PHASE 2 PATCH 2 -- Logo size, sticky kill, username styling ===== */
/* The Phase 1 static pages constrain the logo to 96px via an inline
style="height:96px" on the ![]()
. The forum chrome doesn't have
that inline style, so the desktop logo was rendering at its
native ~110px, eating horizontal space and clipping the gold
POST REVIEW / Register button off the right edge. Constrain it
via CSS so the forum matches the static pages.
Also: Phase 0 sets position:sticky on .topbar; Ali wants the
topbar to scroll away with the page, not stay pinned.
Also: brighten the @username chip so it reads clearly against
the dark topbar. Drop the subtle border in favor of gold text. */
/* Constrain desktop logo to 96px to match static pages. */
.tru-dark .topbar-inner .logo-mark img {
height: 96px;
width: auto;
display: block;
}
/* Topbar scrolls with page instead of sticking to top. */
.tru-dark .topbar {
position: static !important;
top: auto !important;
}
/* @username chip: gold, no border, clearly readable. */
.tru-dark .topbar-right .user-handle {
font-family: var(--f-mono);
font-size: 12px;
color: var(--gold);
letter-spacing: 0.04em;
padding: 6px 10px;
border: none;
background: transparent;
white-space: nowrap;
}
/* ===== END PHASE 2 PATCH 2 ===== */
/* ===== BEGIN TRUREVIEW EDITORIAL DARK -- PHASE 2 SESSION 2 ===== */
/* The editorial 5-column footer markup matches directory.html and the
other Phase 1 static pages exactly. The CSS for .footer, .footer-inner,
.footer-top, .brand, .chip, .footer-bottom, .tagline-italic etc. is
already in the Phase 1 area of this stylesheet -- nothing new needed
for the visual styling.
The ONLY new rule is to neutralize Phase 2 Patch 1's transitional
#page-footer dark wash, since the new