:root {
--bg: #f4f0ee;
--surface: rgba(255, 255, 255, 0.82);
--surface-strong: #ffffff;
--text: #131313;
--muted: #75717d;
--line: rgba(19, 19, 19, 0.08);
--shadow: 0 22px 50px rgba(17, 12, 28, 0.12);
--radius: 22px;
--radius-sm: 14px;
--header-bg: rgba(16, 16, 18, 0.96);
--accent: #65a454;
--accent-2: #cabf5d;
--accent-3: #d7a848;
--accent-4: #bd625e;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
min-width: 320px;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--text);
background:
radial-gradient(circle at top left, rgba(255, 219, 180, 0.45), transparent 28%),
radial-gradient(circle at top right, rgba(157, 205, 171, 0.35), transparent 24%),
linear-gradient(180deg, #f6f4f2 0%, #f4f0ee 100%);
}
a {
color: inherit;
text-decoration: none;
}
button,
input {
font: inherit;
} .page-shell {
width: min(1200px, calc(100% - 48px));
margin: 0 auto;
padding: 34px 0 56px;
}
.tag-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 28px;
}
.tag-row .tag {
display: inline-flex;
align-items: center;
padding: 10px 16px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.01em;
color: #fff;
box-shadow: var(--shadow);
background: #a3a3a3;
}
.tag-row .tag:nth-child(1) {
background: #791a1a;
}
.tag-row .tag-row-menu {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.tag-row .tag-row-menu > li > a {
display: inline-flex;
align-items: center;
padding: 10px 16px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.01em;
color: #fff;
box-shadow: var(--shadow);
background: #a3a3a3;
}
.tag-row .tag-row-menu > li:first-child > a {
background: #791a1a;
} .wp-block-columns {
gap: 28px !important;
align-items: start !important;
}
.wp-block-column {
min-width: 0;
} .content-grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(280px, 1fr);
gap: 28px;
align-items: start;
}
@media (max-width: 1024px) {
.page-shell {
width: min(100% - 32px, 1200px);
}
.content-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.page-shell {
padding-top: 22px;
}
.content-grid {
grid-template-columns: 1fr;
}
} .wp-block-bwelitribe-hero,
.wp-block-bwelitribe-news-grid,
.wp-block-bwelitribe-tag-row,
.wp-block-bwelitribe-sidebar-embeds {
margin-bottom: 1.5rem;
} .wp-block-bwelitribe-hero .hero-card {
position: relative;
min-height: 460px;
overflow: hidden;
border-radius: 26px;
background-position: center;
background-size: cover;
box-shadow: var(--shadow);
}
.wp-block-bwelitribe-hero .hero-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.65) 100%);
}
.wp-block-bwelitribe-hero .hero-top,
.wp-block-bwelitribe-hero .hero-bottom {
position: absolute;
z-index: 1;
}
.wp-block-bwelitribe-hero .hero-top {
top: 24px;
left: 24px;
}
.wp-block-bwelitribe-hero .hero-label {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 14px;
color: #fff;
font-size: 0.95rem;
font-weight: 800;
background: rgba(14, 14, 16, 0.4);
backdrop-filter: blur(8px);
}
.wp-block-bwelitribe-hero .hero-bottom {
right: 24px;
bottom: 24px;
left: 24px;
color: #fff;
}
.wp-block-bwelitribe-hero .hero-title {
margin: 0 0 12px;
max-width: 82%;
font-size: clamp(1.9rem, 2.5vw, 2.8rem);
line-height: 1.04;
font-weight: 900;
letter-spacing: -0.04em;
}
.wp-block-bwelitribe-hero .meta-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.wp-block-bwelitribe-hero .meta-pill {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.84rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
} .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .post-layout {
grid-template-columns: minmax(0, 5fr) minmax(280px, 1fr);
}
.post-main {
min-width: 0;
}
.single-post-article {
background: transparent;
}
.post-content-wrap {
line-height: 1.7;
}
.post-content-wrap > :first-child {
margin-top: 0;
}
.post-tags-section {
margin-top: 1.5rem;
padding-right: 1rem;
padding-left: 1rem;
}
.post-tags-title {
margin: 0 0 0.75rem;
font-size: 2rem;
font-weight: 900;
letter-spacing: -0.05em;
}
.post-tags-wrap {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.post-tag-pill {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
background: #f0f0f0;
color: var(--text);
font-size: 0.84rem;
font-weight: 600;
}
.post-tags-divider {
height: 1px;
margin-top: 2rem;
margin-bottom: 24px;
background: #e9e9e9;
}
.post-related-section {
margin-top: 0;
}
.post-related-title {
margin: 0 0 1rem;
font-size: 2rem;
font-weight: 900;
letter-spacing: -0.05em;
}
.post-related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.post-related-card {
margin: 0;
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: var(--radius);
background: #181818;
box-shadow: var(--shadow);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.post-related-card:hover {
transform: translateY(-4px);
box-shadow: 0 28px 60px rgba(17, 12, 28, 0.16);
}
.post-related-grid .news-card-link {
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
}
.post-related-grid .news-image {
position: absolute;
inset: 0;
background-position: center;
background-size: cover;
transform: scale(1.01);
}
.post-related-grid .news-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.88) 100%);
}
.post-related-body {
position: absolute;
right: 16px;
bottom: 16px;
left: 16px;
z-index: 1;
color: #fff;
}
.post-related-card-title {
margin: 0 0 10px;
font-size: 1rem;
line-height: 1.14;
font-weight: 900;
letter-spacing: -0.03em;
}
.post-related-meta {
font-size: 0.84rem;
color: rgba(255, 255, 255, 0.78);
}
.post-related-grid .card-badge {
display: inline-block;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
font-size: 0.84rem;
font-weight: 800;
color: #fff;
background: rgba(208, 131, 39, 0.92);
}
.post-related-grid .card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
font-size: 0.84rem;
}
.post-sidebar {
display: grid;
gap: 1rem;
align-self: start;
}
.archive-layout {
grid-template-columns: minmax(0, 5fr) minmax(280px, 1fr);
}
.archive-main {
min-width: 0;
}
.archive-head {
margin: 0 0 1rem;
}
.archive-page-title {
margin: 0;
font-size: clamp(2rem, 2.3vw, 2.5rem);
font-weight: 900;
letter-spacing: -0.05em;
}
.archive-news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 18px;
}
.archive-news-grid .news-card {
position: relative;
overflow: hidden;
aspect-ratio: 9 / 16;
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: var(--radius);
background: #181818;
box-shadow: var(--shadow);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.archive-news-grid .news-card:hover {
transform: translateY(-4px);
box-shadow: 0 28px 60px rgba(17, 12, 28, 0.16);
}
.archive-news-grid .news-card-link {
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
}
.archive-news-grid .news-image {
position: absolute;
inset: 0;
background-position: center;
background-size: cover;
transform: scale(1.01);
}
.archive-news-grid .news-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.88) 100%);
}
.archive-news-grid .news-body {
position: absolute;
right: 16px;
bottom: 16px;
left: 16px;
z-index: 1;
color: #fff;
}
.archive-news-grid .card-badge {
display: inline-block;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
font-size: 0.84rem;
font-weight: 800;
color: #fff;
background: rgba(208, 131, 39, 0.92);
}
.archive-news-grid .card-title {
margin: 0 0 10px;
font-size: 1.1rem;
line-height: 1.14;
font-weight: 900;
letter-spacing: -0.03em;
}
.archive-news-grid .card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
font-size: 0.84rem;
color: rgba(255, 255, 255, 0.78);
}
.archive-more-wrap {
margin-top: 1.25rem;
}
.archive-more-wrap .page-btn {
min-width: 240px;
height: 42px;
padding: 0 20px;
border: 0;
border-radius: 999px;
color: #fff;
background: #7a1218;
cursor: pointer;
}
.archive-sidebar {
display: grid;
gap: 1rem;
align-self: start;
}
.page-layout {
grid-template-columns: minmax(0, 5fr) minmax(280px, 1fr);
}
.page-main {
min-width: 0;
}
.page-article {
background: transparent;
}
.page-head {
margin: 0 0 1rem;
}
.page-title {
margin: 0;
}
.page-content-wrap {
line-height: 1.7;
}
.page-content-wrap > :first-child {
margin-top: 0;
}
.page-sidebar {
display: grid;
gap: 1rem;
align-self: start;
}
.widget-card {
padding: 1rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface-strong);
box-shadow: var(--shadow);
}
.widget-card.widget-card--no-padding {
padding: 0;
}
.widget-title {
margin: 0 0 0.75rem;
font-size: 1.2rem;
letter-spacing: -0.02em;
}
.widget-card ul {
margin: 0;
padding-left: 1rem;
}
.widget-card li + li {
margin-top: 0.5rem;
}
.widget-recent-posts .widget-title {
margin-bottom: 0.75rem;
font-size: 2rem;
font-weight: 900;
letter-spacing: -0.05em;
}
.widget-recent-list {
display: grid;
gap: 12px;
}
.widget-recent-item {
margin: 0;
}
.widget-recent-link {
display: grid;
grid-template-columns: 74px 1fr;
gap: 10px;
align-items: center;
}
.widget-recent-thumb {
display: block;
width: 74px;
height: 74px;
border-radius: 14px;
object-fit: cover;
}
.widget-recent-title {
margin: 0 0 4px;
font-size: .9rem;
line-height: 1.2;
letter-spacing: -0.02em;
}
.widget-recent-meta {
font-size: 0.84rem;
color: #777;
}
.widget-artist-cta {
padding: 30px 22px;
border-radius: var(--radius);
background: var(--cta-bg, #131418);
color: var(--cta-text, #ffffff);
}
.widget-artist-cta-title {
margin: 0 0 16px;
font-size: 2rem;
font-weight: 900;
line-height: normal;
letter-spacing: -0.05em;
color: var(--cta-text, #ffffff);
}
.widget-artist-cta-text {
margin: 0 0 18px;
font-size: 1.05rem;
line-height: 1.45;
color: var(--cta-text, #ffffff);
opacity: 0.9;
}
.widget-artist-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 20px;
border-radius: 999px;
background: var(--cta-btn-bg, #8a161c);
color: var(--cta-btn-text, #ffffff);
font-weight: 700;
}
.widget-spotify-embed {
overflow: hidden;
}
.widget-spotify-embed .widget-title {
margin-bottom: 0.75rem;
}
.widget-spotify-frame {
display: block;
width: 100%;
border: 0;
border-radius: 18px;
}
@media (max-width: 1024px) {
.post-layout {
grid-template-columns: 1fr;
}
.post-related-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.archive-layout {
grid-template-columns: 1fr;
}
.archive-news-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.wp-block-bwelitribe-hero .hero-card {
min-height: 320px;
}
.wp-block-bwelitribe-hero .hero-title {
max-width: 100%;
font-size: 1.95rem;
}
.post-related-grid {
grid-template-columns: 1fr;
}
.archive-news-grid {
grid-template-columns: 1fr;
}
}