Files
sow-nodebb-theme/____live-copy.css
T
2026-04-21 08:38:51 +02:00

2239 lines
66 KiB
CSS

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Jost:wght@400;500;600;700&display=swap");
/* =========================================================
WESTGATE CORE PALETTE
========================================================= */
:root {
--wg-bg: #0f0d12;
--wg-panel: #141219;
--wg-panel-2: #110f15;
--wg-panel-3: #1a161d;
--wg-border: #2a252d;
--wg-border-soft: rgba(194, 163, 90, 0.1);
--wg-border-mid: rgba(194, 163, 90, 0.18);
--wg-gold: #c2a35a;
--wg-gold-soft: #a8893f;
--wg-text: #e6e0d6;
--wg-text-soft: #b9b2a6;
--wg-text-muted: #9a9086;
--wg-plum-hover: #2b232d;
--wg-chip: #231b17;
}
/* =========================================================
WESTGATE TYPOGRAPHY
========================================================= */
:root {
--wg-font-ui: "Jost", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--wg-font-display: "Cinzel", Georgia, "Times New Roman", serif;
--wg-font-display-plain: "Cinzel", Georgia, "Times New Roman", serif;
--wg-font-reading: "Jost", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
body {
font-family: var(--wg-font-ui);
}
h1,
h2,
h3,
h4,
h5 {
font-family: var(--wg-font-display);
}
/* =========================================================
TOOLTIPS
========================================================= */
.tooltip {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
opacity: 1 !important;
}
.tooltip-inner,
[role="tooltip"] .tooltip-inner {
background: #221c24 !important;
color: var(--wg-text) !important;
border: 1px solid rgba(194, 163, 90, 0.65) !important;
border-radius: 6px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 4px 12px rgba(0, 0, 0, 0.35) !important;
padding: 0.35rem 0.55rem !important;
font-size: 0.95rem;
}
.tooltip .tooltip-arrow,
[role="tooltip"] .tooltip-arrow {
display: none !important;
}
/* =========================================================
HIDE OLD BRAND / DUPLICATE PAGE TITLE
========================================================= */
.navbar-brand,
[component="brand"],
.brand-container {
display: none !important;
}
.page-title,
h1.page-title {
display: none !important;
}
/* only hide generic h1 on NodeBB page-title contexts, not post content */
body > main h1:not(.topic-title):not([component="post/header"]) {
display: none !important;
}
/* =========================================================
CUSTOM MASTHEAD
========================================================= */
.westgate-masthead-link {
display: flex;
justify-content: center;
align-items: center;
width: auto !important;
max-width: 100%;
margin: 0.55rem auto 0.2rem;
padding: 0;
text-decoration: none !important;
position: relative;
z-index: 20;
}
.westgate-masthead {
display: flex;
align-items: center;
justify-content: center;
gap: 0.85rem;
width: fit-content;
min-width: 360px;
max-width: min(520px, calc(100vw - 8rem));
margin: 0;
padding: 0.55rem 1.25rem 0.5rem;
text-align: left;
white-space: nowrap;
border: 1px solid var(--wg-border-soft);
border-bottom-color: var(--wg-border-mid);
border-radius: 6px;
background: linear-gradient(to bottom, rgba(20, 18, 25, 0.76), rgba(16, 14, 20, 0.9));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.02),
0 8px 18px rgba(0, 0, 0, 0.18);
}
.westgate-masthead::after {
content: "";
position: absolute;
left: 50%;
top: calc(100% + 8px);
transform: translateX(-50%);
width: min(560px, 58vw);
height: 1px;
background: linear-gradient(to right, transparent, rgba(194, 163, 90, 0.18), transparent);
}
.westgate-masthead__icon {
width: 48px;
height: 48px;
object-fit: contain;
flex: 0 0 auto;
display: block;
filter: drop-shadow(0 0 6px rgba(194, 163, 90, 0.16));
}
.westgate-masthead__text {
display: flex;
flex-direction: column;
line-height: 1;
min-width: 0;
}
.westgate-masthead__title {
color: var(--wg-text);
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.015em;
}
.westgate-masthead__subtitle {
color: var(--wg-gold);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
margin-top: 0.2rem;
}
.westgate-masthead-link:hover .westgate-masthead {
border-color: var(--wg-border-mid);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.025),
0 10px 22px rgba(0, 0, 0, 0.22);
}
.westgate-masthead-link:hover .westgate-masthead__title {
color: #efe7da;
}
.westgate-masthead-link:hover .westgate-masthead__subtitle {
color: #e0c878;
}
/* =========================================================
GLOBAL BUTTONS / BARS
========================================================= */
.btn {
background: transparent;
border: 1px solid transparent;
color: var(--wg-text-soft);
}
.btn:hover {
background: #241e26;
border-color: var(--wg-gold);
color: var(--wg-text);
}
.btn-primary,
.category-tools .btn-primary,
.topic-list-header .btn-primary,
.quick-reply .btn-primary,
button[component="topic/quickreply/button"] {
background: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%) !important;
border: 1px solid #a8893f !important;
color: #f0e6d8 !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 2px 8px rgba(0, 0, 0, 0.22);
}
.btn-primary:hover,
.category-tools .btn-primary:hover,
.topic-list-header .btn-primary:hover,
.quick-reply .btn-primary:hover,
button[component="topic/quickreply/button"]:hover {
background: linear-gradient(to bottom, #6a5720 0%, #53431a 100%) !important;
border-color: var(--wg-gold) !important;
color: #fff4dd !important;
}
.topic-list-header,
.category-tools,
.btn-toolbar,
.topic-main-buttons .card,
.topic-main-buttons .card-header,
.topic-main-buttons nav,
.topic-main-buttons {
background: linear-gradient(to bottom, #19151c 0%, #15121a 100%) !important;
border: 1px solid #2f2832 !important;
border-radius: 8px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.03),
inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
/* =========================================================
CATEGORY PAGE / TOPIC LIST LEDGER
========================================================= */
.category-header,
.page-header {
position: relative;
}
.category-header::after,
.page-header::after {
content: "";
display: block;
margin-top: 0.7rem;
height: 1px;
background: linear-gradient(to right, transparent, rgba(194, 163, 90, 0.26), transparent);
}
.category-header h1,
.page-header h1,
body.page-category .category-title {
color: var(--wg-text) !important;
font-weight: 600;
letter-spacing: 0.015em;
}
.category-description,
.category-header .description,
.page-header .description {
color: #9f968c !important;
font-size: 0.95rem;
}
ul[component="category"] {
position: relative;
list-style: none;
margin: 0;
padding: 0.85rem;
background: linear-gradient(to bottom, var(--wg-panel) 0%, var(--wg-panel-2) 100%) !important;
border: 1px solid var(--wg-border) !important;
border-radius: 10px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.025),
inset 0 0 0 1px rgba(194, 163, 90, 0.03),
0 10px 30px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
ul[component="category"]::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 3.25rem;
width: 1px;
background: rgba(194, 163, 90, 0.05);
pointer-events: none;
}
li[component="category/topic"] {
position: relative;
padding: 1rem 0.85rem !important;
margin-bottom: 0.35rem;
border-radius: 6px;
background: transparent !important;
border-bottom: 1px solid rgba(194, 163, 90, 0.08) !important;
transition:
background 0.18s ease,
box-shadow 0.18s ease;
}
li[component="category/topic"]:nth-child(even) {
background: rgba(255, 255, 255, 0.012) !important;
}
li[component="category/topic"]:hover {
background: linear-gradient(to right, rgba(194, 163, 90, 0.075), rgba(194, 163, 90, 0.025) 28%, transparent 100%) !important;
box-shadow:
inset 2px 0 0 rgba(194, 163, 90, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
li[component="category/topic"] h3[component="topic/header"],
li[component="category/topic"] .title,
li[component="category/topic"] .topic-title {
color: var(--wg-text) !important;
font-weight: 600;
letter-spacing: 0.02em;
font-size: 1.05rem;
}
li[component="category/topic"] h3[component="topic/header"] a,
li[component="category/topic"] .title a,
li[component="category/topic"] .topic-title a {
color: inherit !important;
text-decoration: none;
}
li[component="category/topic"]:hover h3[component="topic/header"] a,
li[component="category/topic"]:hover .title a,
li[component="category/topic"]:hover .topic-title a {
color: #f0e6d8 !important;
}
li[component="category/topic"] .timeago.badge,
li[component="category/topic"] a.timeago.badge,
li[component="category/topic"] a.timeago,
li[component="category/topic"] .badge {
background: var(--wg-chip) !important;
color: #d8c28a !important;
border: 1px solid rgba(194, 163, 90, 0.2) !important;
border-radius: 999px;
text-decoration: none !important;
}
li[component="category/topic"] .tag,
li[component="category/topic"] .tag-item {
background: rgba(106, 38, 38, 0.18) !important;
color: #d8b1b1 !important;
border: 1px solid rgba(170, 70, 70, 0.24) !important;
border-radius: 999px;
}
li[component="category/topic"] .meta.stats {
font-variant-numeric: tabular-nums;
opacity: 0.95;
}
li[component="category/topic"] .meta.stats > div {
background: rgba(255, 255, 255, 0.015) !important;
border: 1px solid rgba(194, 163, 90, 0.08) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
border-radius: 2px !important;
}
li[component="category/topic"] .meta.stats .fs-5,
li[component="category/topic"] .meta.stats .ff-secondary {
color: var(--wg-text) !important;
}
li[component="category/topic"] .meta.stats .text-xs,
li[component="category/topic"] .meta.stats .text-muted {
color: var(--wg-text-muted) !important;
}
li[component="category/topic"] .avatar {
box-shadow: 0 0 0 1px rgba(194, 163, 90, 0.25);
}
li[component="category/topic"] [component="topic/teaser"] {
opacity: 0.9;
}
li[component="category/topic"] [component="topic/teaser"] .lastpost {
border-left-color: rgba(194, 163, 90, 0.45) !important;
}
li[component="category/topic"] [component="topic/teaser"] .permalink,
li[component="category/topic"] [component="topic/teaser"] .post-content {
color: #a79c90 !important;
}
li[component="category/topic"]:hover [component="topic/teaser"] {
opacity: 1;
}
li[component="category/topic"]:hover [component="topic/teaser"] .permalink,
li[component="category/topic"]:hover [component="topic/teaser"] .post-content {
color: #c2b6a8 !important;
}
/* empty state */
.alert-info {
background: linear-gradient(to bottom, rgba(71, 18, 24, 0.72), rgba(48, 12, 18, 0.78)) !important;
border: 1px solid rgba(153, 58, 58, 0.45) !important;
color: #ddb8b8 !important;
border-radius: 8px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.025),
0 4px 12px rgba(0, 0, 0, 0.18);
}
.alert-info strong,
.alert-info b {
color: #e8cccc !important;
}
/* =========================================================
TOPIC / POST VIEW
========================================================= */
h1[component="post/header"],
h1[component="post/header"] .topic-title {
color: var(--wg-text) !important;
letter-spacing: 0.015em;
font-weight: 650;
}
.topic-info .badge,
.topic-info a.badge {
background: var(--wg-chip) !important;
color: #d8c28a !important;
border: 1px solid rgba(194, 163, 90, 0.2) !important;
border-radius: 999px;
text-decoration: none !important;
}
a[component="topic/category"] {
background: rgba(89, 179, 208, 0.18) !important;
color: #b9e3ee !important;
border-color: rgba(89, 179, 208, 0.35) !important;
}
ul[component="topic"].posts {
position: relative;
padding-top: 0.5rem !important;
}
ul[component="topic"].posts::before {
content: "";
position: absolute;
top: 1.5rem;
bottom: 2rem;
left: 22px;
width: 1px;
background: linear-gradient(to bottom, rgba(194, 163, 90, 0.14), rgba(194, 163, 90, 0.05));
pointer-events: none;
}
li[component="post"] {
position: relative;
padding-bottom: 1.25rem;
}
li[component="post"] .post-container {
background: linear-gradient(to bottom, rgba(20, 18, 25, 0.92), rgba(16, 14, 20, 0.96)) !important;
border: 1px solid rgba(194, 163, 90, 0.12);
border-radius: 10px;
padding: 0.9rem 1rem 0.7rem;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.025),
inset 0 0 0 1px rgba(194, 163, 90, 0.02),
0 8px 22px rgba(0, 0, 0, 0.22);
}
li[component="post"].topic-owner-post .post-container {
border-left: 2px solid rgba(194, 163, 90, 0.35);
}
li[component="post"].self-post .post-container {
border-left: 2px solid rgba(89, 179, 208, 0.22);
}
li[component="post"] .post-container:hover {
background: linear-gradient(to bottom, rgba(24, 21, 30, 0.96), rgba(18, 16, 22, 0.98)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.03),
inset 2px 0 0 rgba(194, 163, 90, 0.28),
0 10px 24px rgba(0, 0, 0, 0.28);
}
li[component="post"] .avatar {
box-shadow: 0 0 0 1px rgba(194, 163, 90, 0.22);
}
li[component="post"] .bg-body.rounded-circle {
background: var(--wg-panel) !important;
box-shadow:
0 0 0 2px var(--wg-panel),
0 0 0 3px rgba(194, 163, 90, 0.1) !important;
}
li[component="post"] .post-header {
margin-bottom: 0.25rem;
}
li[component="post"] .post-header a[data-username] {
color: #d8c28a !important;
font-weight: 650;
text-decoration: none;
}
li[component="post"] .post-header a[data-username]:hover {
color: #e0c878 !important;
}
li[component="post"] .post-header .text-muted,
li[component="post"] .post-header .timeago {
color: #9e9489 !important;
}
li[component="post"] .post-index {
color: #7f776d !important;
font-weight: 600;
}
li[component="post"] .content {
color: var(--wg-text);
line-height: 1.65;
font-size: 1rem;
margin-top: 0.35rem;
}
li[component="post"] .content h1,
li[component="post"] .content h2,
li[component="post"] .content h3,
li[component="post"] .content h4 {
color: #e8ded0;
letter-spacing: 0.01em;
}
li[component="post"] .content a {
color: #d8c28a;
}
li[component="post"] .content a:hover {
color: #e0c878;
text-decoration: underline;
}
li[component="post"] .content ul,
li[component="post"] .content ol {
padding-left: 1.4rem;
}
li[component="post"] .content blockquote {
background: rgba(35, 27, 23, 0.45);
border-left: 3px solid rgba(194, 163, 90, 0.35);
border-radius: 6px;
padding: 0.75rem 0.9rem;
color: #d9cec0;
}
li[component="post"] .content code {
background: #1b171d;
color: #e0c878;
padding: 0.12rem 0.35rem;
border-radius: 4px;
}
li[component="post"] .content pre {
background: #151219 !important;
border: 1px solid var(--wg-border) !important;
border-radius: 8px;
}
li[component="post"] .post-footer {
border-bottom-color: rgba(194, 163, 90, 0.08) !important;
margin-top: 0.35rem;
}
li[component="post"] [component="post/actions"] .btn,
li[component="post"] .post-tools .btn,
li[component="post"] .votes .btn {
color: var(--wg-text-soft);
}
li[component="post"] [component="post/actions"] .btn:hover,
li[component="post"] .post-tools .btn:hover,
li[component="post"] .votes .btn:hover {
background: #241e26;
color: var(--wg-text);
border-color: var(--wg-gold);
}
a[component="post/vote-count"] {
background: var(--wg-chip) !important;
color: #d8c28a !important;
border: 1px solid rgba(194, 163, 90, 0.18) !important;
border-radius: 999px;
}
a[component="post/vote-count"][data-votes^="-"] {
color: #d7a8a8 !important;
border-color: rgba(170, 70, 70, 0.26) !important;
background: rgba(106, 38, 38, 0.16) !important;
}
.pagination-block .scroller-thumb-icon {
background: var(--wg-gold) !important;
opacity: 0.85;
}
.pagination-block .thumb-text,
.pagination-block .thumb-timestamp,
.pagination-block .timeago {
color: #a79c90 !important;
}
.pagination-block .pagetop,
.pagination-block .pagebottom {
color: var(--wg-text-soft) !important;
}
.pagination-block .pagetop:hover,
.pagination-block .pagebottom:hover {
color: var(--wg-text) !important;
background: #241e26;
}
.quick-reply textarea,
textarea[component="topic/quickreply/text"] {
background: linear-gradient(to bottom, var(--wg-panel), var(--wg-panel-2)) !important;
border: 1px solid var(--wg-border) !important;
color: var(--wg-text) !important;
border-radius: 8px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.025),
0 4px 12px rgba(0, 0, 0, 0.15);
}
.quick-reply textarea::placeholder,
textarea[component="topic/quickreply/text"]::placeholder {
color: #8f877d !important;
}
/* =========================================================
WESTGATE SIDEBARS + HOMEPAGE FINAL
Clean replacement for all previous homepage/sidebar fixes
========================================================= */
/* -----------------------------
SIDEBARS
----------------------------- */
.layout-container > nav[component="sidebar/left"],
.layout-container > nav[component="sidebar/right"],
.offcanvas {
background: #121015 !important;
padding-top: 0.5rem;
}
.layout-container > nav[component="sidebar/left"] {
border-right: 1px solid var(--wg-border) !important;
border-left: 0 !important;
box-shadow: inset -1px 0 0 rgba(194, 163, 90, 0.12) !important;
}
.layout-container > nav[component="sidebar/right"] {
border-left: 1px solid var(--wg-border) !important;
border-right: 0 !important;
box-shadow: inset 1px 0 0 rgba(194, 163, 90, 0.12) !important;
}
.layout-container > nav[component="sidebar/left"] .nav-link,
.layout-container > nav[component="sidebar/right"] .nav-link,
.offcanvas .nav-link {
margin-bottom: 0.35rem;
background: var(--wg-panel-3) !important;
border: 1px solid var(--wg-border) !important;
border-radius: 8px;
color: var(--wg-text-soft) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.03),
inset 0 -1px 0 rgba(0, 0, 0, 0.4);
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.layout-container > nav[component="sidebar/left"] .nav-link:hover,
.layout-container > nav[component="sidebar/right"] .nav-link:hover,
.offcanvas .nav-link:hover {
background: var(--wg-plum-hover) !important;
color: #f0e6d8 !important;
border-color: var(--wg-gold) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.35),
0 0 8px rgba(194, 163, 90, 0.18);
}
.layout-container > nav[component="sidebar/left"] .nav-link.active,
.layout-container > nav[component="sidebar/right"] .nav-link.active,
.layout-container > nav[component="sidebar/left"] .nav-link[aria-current="page"],
.layout-container > nav[component="sidebar/right"] .nav-link[aria-current="page"],
.offcanvas .nav-link.active,
.offcanvas .nav-link[aria-current="page"] {
background: #2a2215 !important;
color: #e0c878 !important;
border-color: var(--wg-gold) !important;
}
.layout-container > nav[component="sidebar/left"] i,
.layout-container > nav[component="sidebar/right"] i,
.offcanvas i {
color: var(--wg-gold) !important;
}
.layout-container > nav[component="sidebar/left"] .nav-link:hover i,
.layout-container > nav[component="sidebar/right"] .nav-link:hover i,
.offcanvas .nav-link:hover i {
color: #e0c878 !important;
}
/* -----------------------------
HOMEPAGE CATEGORY INDEX
one shared rail only
----------------------------- */
ul.categories-list {
position: relative;
padding-left: 1rem;
}
/* shared outer rail */
ul.categories-list::before {
content: "";
position: absolute;
top: 1.15rem;
bottom: 1.15rem;
left: 3.05rem;
width: 1px;
background: linear-gradient(to bottom, rgba(194, 163, 90, 0.16), rgba(194, 163, 90, 0.05));
pointer-events: none;
z-index: 0;
}
li[component="categories/category"] {
position: relative;
margin: 0 0 0.55rem 0.9rem !important;
padding: 1rem 1rem 0.95rem !important;
border-radius: 8px;
overflow: visible;
z-index: 1;
border: 1px solid rgba(194, 163, 90, 0.1) !important;
background: linear-gradient(to right, rgba(36, 18, 30, 0.18), rgba(20, 18, 25, 0.82) 18%, rgba(16, 14, 20, 0.92) 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.02),
inset 0 0 28px rgba(88, 26, 52, 0.08),
0 8px 20px rgba(0, 0, 0, 0.14);
transition:
background 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease;
}
/* short branch from shared rail into card */
li[component="categories/category"]::before {
content: "";
position: absolute;
left: -0.9rem;
top: 1.62rem;
width: 0.9rem;
height: 1px;
background: linear-gradient(to right, rgba(194, 163, 90, 0.16), rgba(194, 163, 90, 0.08));
pointer-events: none;
}
/* absolutely kill any old per-card rail logic */
li[component="categories/category"]::after {
content: none !important;
}
li[component="categories/category"]:hover {
border-color: rgba(194, 163, 90, 0.18) !important;
background: linear-gradient(to right, rgba(60, 24, 44, 0.24), rgba(24, 21, 30, 0.92) 18%, rgba(18, 16, 22, 0.98) 100%) !important;
box-shadow:
inset 1px 0 0 rgba(194, 163, 90, 0.18),
inset 0 0 34px rgba(110, 32, 64, 0.11),
0 10px 24px rgba(0, 0, 0, 0.22);
}
li[component="categories/category"] .icon {
box-shadow: 0 0 0 1px rgba(194, 163, 90, 0.18);
border-radius: 6px !important;
}
li[component="categories/category"] h2.title {
position: relative;
color: var(--wg-text) !important;
font-weight: 600;
letter-spacing: 0.015em;
padding-bottom: 0.2rem;
}
li[component="categories/category"] h2.title::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.45rem;
height: 1px;
background: linear-gradient(to right, rgba(194, 163, 90, 0.12), rgba(194, 163, 90, 0.05), transparent 92%);
pointer-events: none;
}
ul.category-children {
margin-top: 0.45rem !important;
padding-top: 0.35rem;
border-top: 1px solid rgba(194, 163, 90, 0.08);
}
.category-children-item > div {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.18rem 0.5rem;
background: rgba(44, 22, 34, 0.28);
border: 1px solid rgba(194, 163, 90, 0.1);
border-radius: 999px;
transition:
background 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease;
}
.category-children-item > div:hover {
background: rgba(70, 30, 48, 0.38);
border-color: rgba(194, 163, 90, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.category-children-item a {
color: #d8c28a !important;
text-decoration: none !important;
font-weight: 600;
}
.category-children-item a:hover {
color: #e0c878 !important;
}
.category-children-item i.fa-caret-right {
color: #a8893f !important;
}
li[component="categories/category"] .meta.stats > div {
background: rgba(255, 255, 255, 0.015) !important;
border: 1px solid rgba(194, 163, 90, 0.08) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
border-radius: 2px !important;
}
li[component="categories/category"] .meta.stats .fs-5,
li[component="categories/category"] .meta.stats .ff-secondary {
color: var(--wg-text) !important;
}
li[component="categories/category"] .meta.stats .text-xs,
li[component="categories/category"] .meta.stats .text-muted,
li[component="categories/category"] .teaser,
li[component="categories/category"] .post-content {
color: var(--wg-text-muted) !important;
}
li[component="categories/category"] .lastpost {
border-left-color: rgba(194, 163, 90, 0.35) !important;
}
li[component="categories/category"] .teaser .avatar {
box-shadow: 0 0 0 1px rgba(194, 163, 90, 0.18);
}
li[component="categories/category"][data-cid="9"] {
border-left: 2px solid rgba(124, 175, 194, 0.45) !important;
}
li[component="categories/category"][data-cid="10"] {
border-left: 2px solid rgba(134, 193, 185, 0.45) !important;
}
li[component="categories/category"][data-cid="15"] {
border-left: 2px solid rgba(134, 193, 185, 0.45) !important;
}
li[component="categories/category"][data-cid="6"] {
border-left: 2px solid rgba(186, 139, 175, 0.45) !important;
}
li[component="categories/category"][data-cid="7"] {
border-left: 2px solid rgba(161, 181, 108, 0.45) !important;
}
li[component="categories/category"][data-cid="8"] {
border-left: 2px solid rgba(247, 202, 136, 0.45) !important;
}
li[component="categories/category"][data-cid="20"] {
border-left: 2px solid rgba(124, 175, 194, 0.45) !important;
}
li[component="categories/category"][data-cid="21"] {
border-left: 2px solid rgba(171, 70, 66, 0.45) !important;
}
/* WESTGATE masthead widget + home board sizing */
[data-widget-area="header"]:has(.westgate-masthead-link) {
display: flex;
justify-content: center;
margin: 0.2rem 0 0.35rem;
}
.westgate-masthead-link {
flex: 0 1 auto;
}
body.template-categories #content > .row {
justify-content: center;
}
body.template-categories #content > .row > div:first-child {
flex: 0 1 1320px;
max-width: 1320px;
}
body.template-categories ul.categories-list {
width: 100%;
max-width: 1280px;
margin-inline: auto;
}
@media (max-width: 767.98px) {
[data-widget-area="header"]:has(.westgate-masthead-link) {
margin-top: 0;
}
.westgate-masthead {
min-width: 0;
width: calc(100vw - 1.5rem);
max-width: calc(100vw - 1.5rem);
}
}
/* WESTGATE homepage ledger rail repair */
body.template-categories ul.categories-list {
padding-left: 0 !important;
}
body.template-categories ul.categories-list::before {
content: none !important;
}
body.template-categories li[component="categories/category"] {
isolation: isolate;
overflow: hidden;
margin: 0 0 0.65rem 0 !important;
padding: 1rem 1rem 0.95rem !important;
border-left: 1px solid rgba(194, 163, 90, 0.1) !important;
}
body.template-categories li[component="categories/category"] > * {
position: relative;
z-index: 1;
}
body.template-categories li[component="categories/category"]::before {
content: "" !important;
position: absolute;
top: 0;
bottom: 0;
left: 3.25rem;
width: 1px;
background: linear-gradient(
to bottom,
transparent 0,
rgba(194, 163, 90, 0.14) 1rem,
rgba(194, 163, 90, 0.08) calc(100% - 1rem),
transparent 100%
);
pointer-events: none;
z-index: 0;
}
body.template-categories li[component="categories/category"]::after {
content: "" !important;
position: absolute;
top: 2.25rem;
left: 3.25rem;
width: 2.35rem;
height: 1px;
background: linear-gradient(to right, rgba(194, 163, 90, 0.22), rgba(194, 163, 90, 0.08), transparent);
pointer-events: none;
z-index: 0;
}
body.template-categories li[component="categories/category"] .icon {
position: relative;
z-index: 2;
box-shadow:
0 0 0 6px rgba(18, 16, 22, 0.96),
0 0 0 7px rgba(194, 163, 90, 0.16) !important;
}
body.template-categories li[component="categories/category"] h2.title::after {
left: 0;
right: 0;
bottom: -0.5rem;
background: linear-gradient(to right, rgba(194, 163, 90, 0.16), rgba(194, 163, 90, 0.06) 55%, transparent 94%) !important;
}
body.template-categories ul.category-children {
border-top: 0 !important;
padding-top: 0.55rem !important;
margin-top: 0.45rem !important;
}
body.template-categories li[component="categories/category"] .meta.stats > div {
border-color: rgba(194, 163, 90, 0.09) !important;
}
/* WESTGATE velvet gradient unification */
:root {
--wg-velvet-panel: linear-gradient(
100deg,
rgba(42, 18, 34, 0.42) 0%,
rgba(25, 22, 31, 0.94) 22%,
rgba(18, 16, 23, 0.98) 58%,
rgba(14, 13, 18, 0.96) 100%
);
--wg-velvet-panel-hover: linear-gradient(
100deg,
rgba(58, 24, 48, 0.52) 0%,
rgba(30, 25, 38, 0.98) 24%,
rgba(20, 18, 27, 1) 62%,
rgba(15, 14, 20, 0.98) 100%
);
--wg-velvet-border: rgba(194, 163, 90, 0.13);
--wg-velvet-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), inset 0 0 34px rgba(96, 32, 68, 0.1), 0 10px 26px rgba(0, 0, 0, 0.22);
}
.westgate-masthead,
.topic-list-header,
.category-tools,
.topic-main-buttons,
.topic-main-buttons .card,
.topic-main-buttons .card-header,
.topic-main-buttons nav,
body.template-categories li[component="categories/category"],
li[component="category/topic"],
li[component="post"] .post-container,
.quick-reply textarea,
textarea[component="topic/quickreply/text"] {
background: var(--wg-velvet-panel) !important;
border-color: var(--wg-velvet-border) !important;
box-shadow: var(--wg-velvet-shadow) !important;
}
.westgate-masthead:hover,
body.template-categories li[component="categories/category"]:hover,
li[component="category/topic"]:hover,
li[component="post"] .post-container:hover {
background: var(--wg-velvet-panel-hover) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
inset 0 0 38px rgba(120, 36, 84, 0.13),
0 12px 30px rgba(0, 0, 0, 0.28) !important;
}
body.template-categories li[component="categories/category"] {
border-left: 1px solid var(--wg-velvet-border) !important;
}
body.template-categories li[component="categories/category"]::before {
left: 3.25rem;
background: linear-gradient(
to bottom,
transparent 0,
rgba(194, 163, 90, 0.16) 0.95rem,
rgba(194, 163, 90, 0.07) calc(100% - 0.95rem),
transparent 100%
) !important;
}
body.template-categories li[component="categories/category"]::after {
content: none !important;
}
body.template-categories li[component="categories/category"] h2.title::after {
left: 0;
right: 0;
bottom: -0.48rem;
opacity: 0.65;
background: linear-gradient(to right, rgba(194, 163, 90, 0.13), rgba(194, 163, 90, 0.045) 58%, transparent 94%) !important;
}
body.template-categories ul.category-children {
border-top: 0 !important;
}
li[component="category/topic"] .meta.stats > div,
body.template-categories li[component="categories/category"] .meta.stats > div {
background: rgba(255, 255, 255, 0.018) !important;
border-color: rgba(194, 163, 90, 0.085) !important;
}
li[component="post"].topic-owner-post .post-container,
li[component="post"].self-post .post-container {
border-left-color: rgba(194, 163, 90, 0.24) !important;
}
/* WESTGATE topic list full velvet panel */
body.template-category ul[component="category"] {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
body.template-category ul[component="category"]::before {
content: none !important;
}
body.template-category li[component="category/topic"] {
overflow: hidden;
isolation: isolate;
margin-bottom: 0.65rem !important;
padding: 1rem !important;
border: 1px solid var(--wg-velvet-border) !important;
border-radius: 8px !important;
background: var(--wg-velvet-panel) !important;
box-shadow: var(--wg-velvet-shadow) !important;
}
body.template-category li[component="category/topic"]:nth-child(even) {
background: var(--wg-velvet-panel) !important;
}
body.template-category li[component="category/topic"]:hover {
background: var(--wg-velvet-panel-hover) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.035),
inset 0 0 38px rgba(120, 36, 84, 0.13),
0 12px 30px rgba(0, 0, 0, 0.28) !important;
}
body.template-category li[component="category/topic"] > div {
background: transparent !important;
}
body.template-category li[component="category/topic"] .meta.stats > div {
background: rgba(255, 255, 255, 0.018) !important;
border: 1px solid rgba(194, 163, 90, 0.085) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}
body.template-category li[component="category/topic"] [component="topic/teaser"] .lastpost {
background: transparent !important;
}
/* WESTGATE header order and category identity panel */
body.template-category #content,
body.template-topic #content {
display: flex;
flex-direction: column;
}
body.template-category #content > [data-widget-area="header"],
body.template-topic #content > [data-widget-area="header"] {
order: -30;
display: flex;
justify-content: center;
margin: 0.1rem 0 0.75rem;
}
body.template-category #content > .breadcrumb,
body.template-topic #content > .breadcrumb {
order: -20;
width: min(100%, 1280px);
margin-inline: auto;
padding: 0.35rem 0.65rem;
border: 1px solid rgba(194, 163, 90, 0.08);
border-radius: 6px;
background: linear-gradient(90deg, rgba(18, 16, 23, 0.42), rgba(23, 20, 29, 0.24), transparent 82%);
}
body.template-category #content > .category-header {
order: -10;
}
body.template-category .category-header {
width: min(100%, 1280px);
margin-inline: auto;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"icon title stats"
"icon desc desc";
align-items: center;
gap: 0.45rem 1rem !important;
padding: 0.9rem 1rem !important;
border: 1px solid var(--wg-velvet-border);
border-radius: 8px;
background: var(--wg-velvet-panel) !important;
box-shadow: var(--wg-velvet-shadow) !important;
}
body.template-category .category-header::after {
content: none !important;
}
body.template-category .category-header > .d-flex:first-child {
display: contents !important;
}
body.template-category .category-header .icon {
grid-area: icon;
width: 46px !important;
height: 46px !important;
font-size: 23px !important;
box-shadow:
0 0 0 5px rgba(18, 16, 22, 0.96),
0 0 0 6px rgba(194, 163, 90, 0.14) !important;
}
body.template-category .category-header > .d-flex:first-child > .d-flex {
display: contents !important;
}
body.template-category .category-header h1 {
grid-area: title;
margin: 0 !important;
font-size: 1.45rem !important;
line-height: 1.15;
}
body.template-category .category-header h1 + .d-flex {
grid-area: stats;
justify-content: flex-end;
gap: 0.4rem !important;
}
body.template-category .category-header .badge {
background: rgba(255, 255, 255, 0.018) !important;
border-color: rgba(194, 163, 90, 0.12) !important;
color: var(--wg-text-soft) !important;
border-radius: 5px;
}
body.template-category .category-header .description {
grid-area: desc;
width: auto !important;
margin: 0 !important;
color: var(--wg-text-muted) !important;
}
body.template-category .category-header .description p {
margin: 0 !important;
}
body.template-category #content > .row.flex-fill,
body.template-topic #content > .flex-fill {
order: 0;
}
@media (max-width: 767.98px) {
body.template-category .category-header {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"icon title"
"icon stats"
"desc desc";
}
body.template-category .category-header h1 + .d-flex {
justify-content: flex-start;
}
}
/* WESTGATE typography */
.westgate-masthead__title,
.category-header h1,
h1[component="post/header"] .topic-title,
li[component="categories/category"] h2.title,
li[component="category/topic"] h3[component="topic/header"],
li[component="category/topic"] .topic-title,
.page-header h1,
.category-title {
font-family: var(--wg-font-display) !important;
font-weight: 600 !important;
letter-spacing: 0.036em !important;
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.9),
0 0 10px rgba(104, 32, 76, 0.18);
}
.westgate-masthead__title {
font-size: 1.08rem;
letter-spacing: 0.042em !important;
}
.westgate-masthead__subtitle,
.breadcrumb,
.badge,
.btn,
.topic-list-header,
.category-tools,
.topic-main-buttons,
.meta.stats,
.timeago,
.category-children-item a,
.dropdown-menu,
.form-control,
.nav-link,
.pagination,
.composer {
font-family: var(--wg-font-ui) !important;
}
.westgate-masthead__subtitle {
letter-spacing: 0.24em;
font-weight: 600;
}
li[component="post"] .content,
li[component="post"] .content p,
li[component="post"] .content li,
li[component="post"] .content blockquote,
.composer .preview,
.topic-text,
.post-content {
font-family: var(--wg-font-reading) !important;
font-size: 1.02rem;
line-height: 1.68;
letter-spacing: 0.005em;
}
li[component="post"] .content h1,
li[component="post"] .content h2,
li[component="post"] .content h3,
li[component="post"] .content h4 {
font-family: var(--wg-font-display-plain) !important;
font-weight: 600;
letter-spacing: 0.03em;
}
.category-header .description,
li[component="categories/category"] .teaser,
li[component="category/topic"] [component="topic/teaser"] .post-content {
font-family: var(--wg-font-reading) !important;
font-size: 0.98rem;
line-height: 1.45;
}
li[component="post"] .post-header,
li[component="post"] .post-footer,
li[component="post"] [component="post/actions"],
li[component="post"] .votes,
[component="topic/labels"],
[component="topic/stats"] {
font-family: var(--wg-font-ui) !important;
}
::selection {
background: rgba(194, 163, 90, 0.32);
color: #fff4dd;
}
/* WESTGATE account settings readability */
body.template-account-settings .account,
body.template-account-settings .account-content {
color: var(--wg-text-soft) !important;
}
body.template-account-settings .account-content > .position-sticky {
background: linear-gradient(100deg, rgba(42, 18, 34, 0.92), rgba(18, 16, 23, 0.98)) !important;
border: 1px solid rgba(194, 163, 90, 0.14);
border-radius: 8px;
box-shadow: var(--wg-velvet-shadow, 0 10px 26px rgba(0, 0, 0, 0.22));
color: var(--wg-text) !important;
padding: 0.55rem 0.7rem;
z-index: 5;
}
body.template-account-settings .account-content h3,
body.template-account-settings .account-content h6,
body.template-account-settings .account-content .fw-bold,
body.template-account-settings .account-content .fw-semibold {
color: var(--wg-text) !important;
}
body.template-account-settings .account-content label,
body.template-account-settings .account-content .form-label,
body.template-account-settings .account-content .form-check-label,
body.template-account-settings .account-content .table,
body.template-account-settings .account-content .table th,
body.template-account-settings .account-content .table td {
color: var(--wg-text-soft) !important;
}
body.template-account-settings .account-content .form-text,
body.template-account-settings .account-content .text-muted,
body.template-account-settings .account-content .text-secondary,
body.template-account-settings .account-content small {
color: var(--wg-text-muted) !important;
}
body.template-account-settings .account-content hr,
body.template-account-settings .account-content .table > :not(caption) > * > * {
border-color: rgba(194, 163, 90, 0.14) !important;
}
body.template-account-settings .account-content .form-control,
body.template-account-settings .account-content .form-select {
background-color: rgba(255, 255, 255, 0.025) !important;
border-color: rgba(194, 163, 90, 0.18) !important;
color: var(--wg-text) !important;
}
body.template-account-settings .account-content .form-control:focus,
body.template-account-settings .account-content .form-select:focus {
background-color: rgba(255, 255, 255, 0.04) !important;
border-color: rgba(194, 163, 90, 0.42) !important;
box-shadow: 0 0 0 0.18rem rgba(194, 163, 90, 0.12) !important;
color: var(--wg-text) !important;
}
body.template-account-settings .account-content .form-control::placeholder {
color: rgba(185, 178, 166, 0.62) !important;
}
body.template-account-settings .account-content .form-check-input {
background-color: rgba(255, 255, 255, 0.035) !important;
border-color: rgba(194, 163, 90, 0.38) !important;
}
body.template-account-settings .account-content .form-check-input:checked {
background-color: var(--wg-gold-soft) !important;
border-color: var(--wg-gold) !important;
}
body.template-account-settings [component="notification/table"] {
--bs-table-bg: transparent;
--bs-table-color: var(--wg-text-soft);
--bs-table-border-color: rgba(194, 163, 90, 0.12);
color: var(--wg-text-soft) !important;
}
body.template-account-settings [component="notification/setting"] label {
color: #cfc6b8 !important;
}
body.template-account-settings [component="notification/setting"]:hover {
background: rgba(194, 163, 90, 0.045) !important;
}
body.template-account-settings [component="notification/table"] .text-primary {
color: var(--wg-gold) !important;
}
body.template-account-settings [component="notification/table"] .text-secondary {
color: #7f8b96 !important;
}
body.template-account-settings .account .btn-ghost {
color: var(--wg-text-soft) !important;
}
body.template-account-settings .account .btn-ghost span,
body.template-account-settings .account .btn-ghost .text-xs {
color: var(--wg-text-muted) !important;
}
body.template-account-settings .account .btn-ghost:hover,
body.template-account-settings .account .btn-ghost:focus,
body.template-account-settings .account .btn-ghost.active {
background: rgba(194, 163, 90, 0.11) !important;
border-color: rgba(194, 163, 90, 0.22) !important;
color: var(--wg-text) !important;
}
/* WESTGATE account pages widget cleanup */
body[class*="template-account-"] .account > [data-widget-area="header"] {
display: none !important;
}
/* WESTGATE masthead scale and rhythm */
.westgate-masthead-link {
margin: 0.35rem auto 0.45rem !important;
}
.westgate-masthead {
gap: 1rem !important;
min-width: min(420px, calc(100vw - 2rem)) !important;
max-width: min(640px, calc(100vw - 7rem)) !important;
padding: 0.72rem 1.55rem 0.66rem !important;
}
.westgate-masthead::after {
top: calc(100% + 7px) !important;
width: min(620px, 62vw) !important;
}
.westgate-masthead__icon {
width: 54px !important;
height: 54px !important;
}
.westgate-masthead__title {
font-size: 1.28rem !important;
}
.westgate-masthead__subtitle {
font-size: 0.74rem !important;
margin-top: 0.23rem !important;
}
body.template-categories #content > [data-widget-area="header"],
body.template-category #content > [data-widget-area="header"],
body.template-topic #content > [data-widget-area="header"] {
margin-bottom: 0.45rem !important;
}
@media (max-width: 767.98px) {
.westgate-masthead {
width: min(100%, calc(100vw - 2rem)) !important;
min-width: 0 !important;
max-width: calc(100vw - 2rem) !important;
padding: 0.58rem 0.9rem 0.54rem !important;
}
.westgate-masthead__icon {
width: 44px !important;
height: 44px !important;
}
.westgate-masthead__title {
font-size: 1rem !important;
}
.westgate-masthead__subtitle {
font-size: 0.64rem !important;
}
}
/* WESTGATE masthead actual width adjustment */
.westgate-masthead {
width: min(760px, calc(100vw - 7rem)) !important;
max-width: min(760px, calc(100vw - 7rem)) !important;
min-width: 0 !important;
justify-content: center !important;
padding: 0.82rem 1.7rem 0.76rem !important;
}
.westgate-masthead__icon {
width: 58px !important;
height: 58px !important;
}
.westgate-masthead__title {
font-size: 1.38rem !important;
}
.westgate-masthead__subtitle {
font-size: 0.78rem !important;
}
.westgate-masthead-link {
margin-bottom: 0.25rem !important;
}
.westgate-masthead::after {
width: min(720px, 66vw) !important;
}
@media (max-width: 767.98px) {
.westgate-masthead {
width: min(100%, calc(100vw - 2rem)) !important;
max-width: calc(100vw - 2rem) !important;
padding: 0.62rem 0.9rem 0.58rem !important;
}
}
/* WESTGATE masthead content-width alignment */
body.template-categories [data-widget-area="header"]:has(.westgate-masthead-link),
body.template-category #content > [data-widget-area="header"]:has(.westgate-masthead-link),
body.template-topic #content > [data-widget-area="header"]:has(.westgate-masthead-link) {
width: min(100%, 1280px) !important;
max-width: 1280px !important;
margin-inline: auto !important;
}
body.template-categories .westgate-masthead-link,
body.template-category .westgate-masthead-link,
body.template-topic .westgate-masthead-link {
width: 100% !important;
max-width: 100% !important;
}
body.template-categories .westgate-masthead,
body.template-category .westgate-masthead,
body.template-topic .westgate-masthead {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
justify-content: center !important;
}
body.template-categories .westgate-masthead::after,
body.template-category .westgate-masthead::after,
body.template-topic .westgate-masthead::after {
width: min(100%, 1180px) !important;
}
@media (max-width: 767.98px) {
body.template-categories [data-widget-area="header"]:has(.westgate-masthead-link),
body.template-category #content > [data-widget-area="header"]:has(.westgate-masthead-link),
body.template-topic #content > [data-widget-area="header"]:has(.westgate-masthead-link) {
width: calc(100vw - 1.5rem) !important;
max-width: calc(100vw - 1.5rem) !important;
}
}
/* WESTGATE header widget lane */
body:not([class*="template-account-"]) #content > [data-widget-area="header"] {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.75rem !important;
width: min(100%, 1280px) !important;
max-width: 1280px !important;
margin: 0.1rem auto 0.85rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > script,
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > style {
display: none !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link {
order: -20 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > :not(.westgate-masthead-link):not(script):not(style) {
order: 10 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 0.9rem 1rem !important;
background: var(--wg-velvet-panel) !important;
border: 1px solid var(--wg-velvet-border) !important;
border-radius: 8px !important;
box-shadow: var(--wg-velvet-shadow) !important;
color: var(--wg-text-soft) !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > :not(.westgate-masthead-link):not(script):not(style):hover {
background: var(--wg-velvet-panel-hover) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics-list {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)) !important;
gap: 0.75rem !important;
margin: 0 !important;
padding: 0 !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics {
min-width: 0 !important;
padding: 0.65rem 0.75rem !important;
background: rgba(255, 255, 255, 0.018) !important;
border: 1px solid rgba(194, 163, 90, 0.09) !important;
border-radius: 6px !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics hr {
display: none !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .topic-title,
body:not([class*="template-account-"]) #content > [data-widget-area="header"] a:not(.westgate-masthead-link) {
color: var(--wg-text) !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .text-muted,
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .btn-link {
color: var(--wg-text-muted) !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .westgate-masthead {
width: 100% !important;
max-width: 100% !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .westgate-masthead::after {
content: none !important;
}
@media (max-width: 767.98px) {
body:not([class*="template-account-"]) #content > [data-widget-area="header"] {
width: calc(100vw - 1.5rem) !important;
max-width: calc(100vw - 1.5rem) !important;
gap: 0.55rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > :not(.westgate-masthead-link):not(script):not(style) {
padding: 0.75rem !important;
}
}
/* WESTGATE header lane separator and tighter rhythm */
body:not([class*="template-account-"]) #content > [data-widget-area="header"] {
gap: 0.45rem !important;
margin: 0.1rem auto 0.6rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link {
position: relative !important;
padding-bottom: 0.42rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
bottom: 0 !important;
transform: translateX(-50%) !important;
width: min(760px, 72%) !important;
height: 1px !important;
background: linear-gradient(
to right,
transparent,
rgba(194, 163, 90, 0.18) 18%,
rgba(224, 200, 120, 0.46) 50%,
rgba(194, 163, 90, 0.18) 82%,
transparent
) !important;
box-shadow: 0 0 10px rgba(194, 163, 90, 0.1) !important;
pointer-events: none !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > :not(.westgate-masthead-link):not(script):not(style) {
margin-top: 0 !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics-list {
gap: 0.6rem !important;
}
@media (max-width: 767.98px) {
body:not([class*="template-account-"]) #content > [data-widget-area="header"] {
gap: 0.35rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link {
padding-bottom: 0.34rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link::after {
width: min(92%, 560px) !important;
}
}
/* WESTGATE widget panels and sidebar repair */
body:not([class*="template-account-"]) #content > [data-widget-area="header"] {
gap: 0.68rem !important;
margin-bottom: 0.85rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link {
padding-bottom: 0.58rem !important;
}
body.template-categories #content > .row.flex-fill:has(> [data-widget-area="sidebar"]:not(.hidden)) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) !important;
gap: 0.9rem !important;
align-items: start !important;
width: min(100%, 1280px) !important;
max-width: 1280px !important;
margin-inline: auto !important;
}
body.template-categories #content > .row.flex-fill:has(> [data-widget-area="sidebar"]:not(.hidden)) > div:first-child,
body.template-categories #content > .row.flex-fill:has(> [data-widget-area="sidebar"]:not(.hidden)) > [data-widget-area="sidebar"] {
float: none !important;
flex: none !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.template-categories #content > .row.flex-fill:has(> [data-widget-area="sidebar"]:not(.hidden)) ul.categories-list {
max-width: none !important;
}
body.template-categories #content > [data-widget-area="sidebar"],
body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] {
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
}
body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] {
position: sticky !important;
top: 1rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="footer"] {
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
width: min(100%, 1280px) !important;
max-width: 1280px !important;
margin: 0.9rem auto 1.2rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="footer"]:empty,
body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"].hidden {
display: none !important;
}
body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] > :not(script):not(style),
body:not([class*="template-account-"]) #content > [data-widget-area="footer"] > :not(script):not(style) {
width: 100% !important;
box-sizing: border-box !important;
padding: 0.9rem 1rem !important;
background: var(--wg-velvet-panel) !important;
border: 1px solid var(--wg-velvet-border) !important;
border-radius: 8px !important;
box-shadow: var(--wg-velvet-shadow) !important;
color: var(--wg-text-soft) !important;
}
body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] > :not(script):not(style):hover,
body:not([class*="template-account-"]) #content > [data-widget-area="footer"] > :not(script):not(style):hover {
background: var(--wg-velvet-panel-hover) !important;
border-color: rgba(194, 163, 90, 0.2) !important;
}
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .widget-topics-list,
body:not([class*="template-account-"]) [data-widget-area="footer"] .widget-topics-list {
display: flex !important;
flex-direction: column !important;
gap: 0.6rem !important;
margin: 0 !important;
padding: 0 !important;
}
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .widget-topics,
body:not([class*="template-account-"]) [data-widget-area="footer"] .widget-topics,
body:not([class*="template-account-"]) [data-widget-area="footer"] .btn-ghost {
min-width: 0 !important;
padding: 0.65rem 0.75rem !important;
background: rgba(255, 255, 255, 0.018) !important;
border: 1px solid rgba(194, 163, 90, 0.09) !important;
border-radius: 6px !important;
color: var(--wg-text-soft) !important;
}
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .widget-topics hr,
body:not([class*="template-account-"]) [data-widget-area="footer"] .widget-topics hr {
display: none !important;
}
body:not([class*="template-account-"]) [data-widget-area="sidebar"] a,
body:not([class*="template-account-"]) [data-widget-area="footer"] a {
color: var(--wg-text) !important;
}
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .text-muted,
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .btn-link,
body:not([class*="template-account-"]) [data-widget-area="footer"] .text-muted,
body:not([class*="template-account-"]) [data-widget-area="footer"] .btn-link {
color: var(--wg-text-muted) !important;
}
@media (max-width: 1199.98px) {
body.template-categories #content > .row.flex-fill:has(> [data-widget-area="sidebar"]:not(.hidden)) {
grid-template-columns: minmax(0, 1fr) !important;
}
body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] {
position: static !important;
}
}
/* WESTGATE calmer widget internals */
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > :not(.westgate-masthead-link):not(script):not(style),
body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] > :not(script):not(style),
body:not([class*="template-account-"]) #content > [data-widget-area="footer"] > :not(script):not(style) {
padding: 0.85rem !important;
}
body:not([class*="template-account-"]) [data-widget-area="header"] .widget-topics-list,
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .widget-topics-list,
body:not([class*="template-account-"]) [data-widget-area="footer"] .widget-topics-list {
gap: 0 !important;
}
body:not([class*="template-account-"]) [data-widget-area="header"] .widget-topics,
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .widget-topics,
body:not([class*="template-account-"]) [data-widget-area="footer"] .widget-topics {
padding: 0.75rem 0.15rem !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body:not([class*="template-account-"]) [data-widget-area="header"] .widget-topics + .widget-topics,
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .widget-topics + .widget-topics,
body:not([class*="template-account-"]) [data-widget-area="footer"] .widget-topics + .widget-topics {
border-top: 1px solid rgba(194, 163, 90, 0.1) !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics-list {
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)) !important;
gap: 0.85rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics {
padding: 0.35rem 0 !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics + .widget-topics {
border-top: 0 !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics:not(:first-child) {
border-left: 1px solid rgba(194, 163, 90, 0.1) !important;
padding-left: 0.85rem !important;
}
body:not([class*="template-account-"]) [data-widget-area="footer"] .btn-ghost {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
body:not([class*="template-account-"]) [data-widget-area="footer"] .btn-ghost + .btn-ghost {
border-left: 1px solid rgba(194, 163, 90, 0.1) !important;
}
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .topic-title,
body:not([class*="template-account-"]) [data-widget-area="footer"] .topic-title,
body:not([class*="template-account-"]) [data-widget-area="header"] .topic-title {
font-size: 0.98rem !important;
line-height: 1.35 !important;
}
@media (max-width: 767.98px) {
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics-list {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics:not(:first-child) {
border-left: 0 !important;
border-top: 1px solid rgba(194, 163, 90, 0.1) !important;
padding-left: 0 !important;
}
}
/* WESTGATE header widget flat rows and separator breathing */
body:not([class*="template-account-"]) #content > [data-widget-area="header"] {
gap: 0.9rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link {
padding-bottom: 1.05rem !important;
margin-bottom: 0.15rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link::after {
bottom: 0.42rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics-list {
gap: 0 !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] li.widget-topics,
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics.d-flex,
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics {
padding: 0.35rem 0.9rem !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] li.widget-topics + li.widget-topics,
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics + .widget-topics {
border-left: 1px solid rgba(194, 163, 90, 0.12) !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics > div,
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics .d-flex {
border-color: transparent !important;
box-shadow: none !important;
}
@media (max-width: 767.98px) {
body:not([class*="template-account-"]) #content > [data-widget-area="header"] {
gap: 0.7rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link {
padding-bottom: 0.82rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] > .westgate-masthead-link::after {
bottom: 0.32rem !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="header"] li.widget-topics + li.widget-topics,
body:not([class*="template-account-"]) #content > [data-widget-area="header"] .widget-topics + .widget-topics {
border-left: 0 !important;
border-top: 1px solid rgba(194, 163, 90, 0.1) !important;
}
}
/* WESTGATE compact sidebar user widgets */
body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] > .row {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
margin: 0 !important;
padding: 0.35rem 0 !important;
}
body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0.62rem 0.15rem !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--wg-text-soft) !important;
}
body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost + .btn-ghost {
border-top: 1px solid rgba(194, 163, 90, 0.1) !important;
}
body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost:hover,
body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost:focus {
background: rgba(255, 255, 255, 0.018) !important;
color: var(--wg-text) !important;
}
body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost .avatar {
--avatar-size: 36px !important;
width: 36px !important;
height: 36px !important;
font-size: 1rem !important;
}
body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost img.avatar {
object-fit: cover !important;
}
body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost .fw-semibold {
color: var(--wg-text) !important;
font-size: 0.95rem !important;
line-height: 1.15 !important;
}
body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] .btn-ghost .text-xs {
color: var(--wg-text-muted) !important;
line-height: 1.2 !important;
}
body:not([class*="template-account-"]) #content > .row.flex-fill > [data-widget-area="sidebar"] > :not(script):not(style) {
overflow: hidden !important;
}
/* WESTGATE widget alignment final pass */
body:not([class*="template-account-"]) #content,
body:not([class*="template-account-"]) #content > .row.flex-fill,
body:not([class*="template-account-"]) #content > [data-widget-area="footer"] {
box-sizing: border-box !important;
}
body.template-categories #content > .row.flex-fill:has(> [data-widget-area="sidebar"]:not(.hidden)),
body:not([class*="template-account-"]) #content > [data-widget-area="footer"] {
width: 100% !important;
max-width: 1280px !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="footer"] {
align-self: center !important;
margin: 0.75rem auto 1.1rem !important;
padding-inline: 0 !important;
overflow: hidden !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="footer"] > .row {
--bs-gutter-x: 0 !important;
--bs-gutter-y: 0 !important;
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important;
gap: 0.55rem !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0.35rem 0 !important;
}
body:not([class*="template-account-"]) #content > [data-widget-area="footer"] > .row > * {
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0.62rem 0.7rem !important;
}
body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] {
gap: 0.7rem !important;
}
body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] > :not(script):not(style) {
margin: 0 !important;
max-width: 100% !important;
}
body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] .search-widget .row {
--bs-gutter-x: 0 !important;
--bs-gutter-y: 0 !important;
margin: 0 !important;
}
body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] .search-widget .row > *,
body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] .search-widget .col-12 {
padding-inline: 0 !important;
}
body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] .forum-stats {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 0.45rem !important;
margin: 0 !important;
}
body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] .forum-stats > .d-flex {
display: contents !important;
}
body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] .stats-card {
min-width: 0 !important;
}
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .text-body,
body:not([class*="template-account-"]) [data-widget-area="footer"] .text-body,
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .text-reset,
body:not([class*="template-account-"]) [data-widget-area="footer"] .text-reset,
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .text-secondary,
body:not([class*="template-account-"]) [data-widget-area="footer"] .text-secondary {
color: var(--wg-text-soft) !important;
}
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .stats,
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .fw-semibold,
body:not([class*="template-account-"]) [data-widget-area="footer"] .fw-semibold,
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .topic-title,
body:not([class*="template-account-"]) [data-widget-area="footer"] .topic-title {
color: var(--wg-text) !important;
}
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .fa,
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .fa-fw,
body:not([class*="template-account-"]) [data-widget-area="footer"] .fa,
body:not([class*="template-account-"]) [data-widget-area="footer"] .fa-fw {
color: var(--wg-text-muted) !important;
}
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .input-group,
body:not([class*="template-account-"]) [data-widget-area="sidebar"] .form-control {
min-width: 0 !important;
}
@media (max-width: 575.98px) {
body.template-categories #content > .row.flex-fill > [data-widget-area="sidebar"] .forum-stats {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* ===========================================================
Widget Overrides
===========================================================
*/
.wg-category-note {
margin: 10px 0 16px 0;
padding: 10px 14px;
border-left: 3px solid #c2a35a;
background: rgba(20, 18, 25, 0.6);
border-radius: 6px;
font-size: 16px;
color: #b9b2a6;
}