/**
* Bariklabs BBlog — shared stylesheet
* Used across every blog-facing template (home, category, single post,
* author archive). Loaded once via document->addStyle() from each
* controller, so this file is the single design-system source of truth
* for hero, cards, sidebar widgets, pagination, and the article layout.
*
* Corner style toggle (set from Settings > Blog Homepage):
* default -> chamfer (angled) corners everywhere
* .bblog-page.radius-mode -> plain rounded corners instead, sized by
* --card-radius / --btn-radius below
*/
/* home.twig only outputs from {{ header }} onward — there's no we
control to drop a Google Fonts into, so the font is pulled in
here instead via @import (must stay the first rule in this file). */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root {
--bg-0: #100e0b;
--white-bg: #faf8f4;
--white-card: #ffffff;
--white-border: #e8e3d8;
--ink-blog: #f4f0e8;
--ink-blog-dark: #241f18;
--ink-blog-muted: #b7ad9d;
--ink-blog-muted-dark: #8a8175;
--maroon: #8b1a1a;
--maroon-rgb: 139, 26, 26;
--maroon-dark: #6e1414;
--maroon-bright: #a83232;
--maroon-tint: #e6b3b3;
--chamfer-lg: 16px;
--chamfer-sm: 10px;
--card-radius: 16px;
--btn-radius: 10px;
}
.bblog-page, .bblog-page * {
box-sizing: border-box;
}
.bblog-page {
-webkit-font-smoothing: antialiased;
}
.bblog-page {
background: var(--white-bg);
color: var(--ink-blog-dark);
font-family: 'Inter', Helvetica, Arial, sans-serif;
}
.bblog-page a {
color: inherit;
text-decoration: none;
}
.bblog-page h1, .bblog-page h2, .bblog-page h3 {
font-family: 'Oswald', sans-serif;
margin: 0;
}
/* ================= Hero ================= */
.hero {
position: relative;
overflow: hidden;
min-height: 660px;
display: flex;
flex-direction: column;
padding: 0 0 150px;
}
.hero-bg {
position: absolute;
inset: 0;
background-image: url('https://images.unsplash.com/photo-1622021142947-da7dedc7c39a?q=80&w=3132&auto=format&fit=crop');
background-size: cover;
background-position: center;
filter: brightness(.5) contrast(1.05) saturate(.92);
transform: scale(1.02);
}
.hero-scrim {
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(16, 14, 11, .95) 0%, rgba(16, 14, 11, .82) 32%, rgba(16, 14, 11, .48) 58%, rgba(16, 14, 11, .18) 100%), linear-gradient(0deg, rgba(16, 14, 11, .55) 0%, rgba(16, 14, 11, 0) 30%);
}
.hero-grid {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0px, transparent 1px, transparent 42px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0px, transparent 1px, transparent 42px);
mix-blend-mode: overlay;
opacity: .5;
}
/* ---- header / brand ---- */
.site-header {
position: relative;
z-index: 3;
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 26px 24px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.brand {
display: flex;
align-items: center;
gap: 12px;
}
.brand-mark {
width: 34px;
height: 34px;
flex: none;
background: var(--maroon);
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.brand-mark span {
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 13px;
color: #fff;
}
.brand-word {
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 19px;
color: var(--ink-blog);
}
.site-nav {
display: flex;
align-items: center;
gap: 30px;
}
.site-nav a {
font-size: 14px;
font-weight: 500;
color: var(--ink-blog-muted);
transition: color .2s ease;
}
.site-nav a:hover {
color: var(--ink-blog);
}
.site-nav a.active {
color: var(--maroon-tint);
}
.site-nav .trade-link {
color: var(--ink-blog);
border: 1px solid rgba(255, 255, 255, .3);
padding: 8px 16px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%, 0 calc(100% - 7px));
transition: border-color .2s ease, color .2s ease;
}
.site-nav .trade-link:hover {
border-color: var(--maroon-tint);
color: var(--maroon-tint);
}
@media (max-width:700px) {
.site-nav a:not(.trade-link) {
display: none;
}
}
/* ---- hero content ---- */
.hero-inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1180px;
margin: 56px auto 0;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: start;
color: var(--ink-blog);
}
.hero-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--maroon-tint);
margin: 0 0 22px;
}
.hero-kicker::before {
content: '';
width: 22px;
height: 2px;
background: var(--maroon-tint);
}
.hero-title {
font-weight: 700;
font-size: clamp(34px, 5vw, 58px);
line-height: 1.08;
letter-spacing: -.005em;
margin: 0 0 26px;
max-width: 15ch;
}
.hero-title span {
display: block;
clip-path: inset(0 100% 0 0);
animation: reveal-line .85s cubic-bezier(.22, .9, .32, 1) forwards;
}
.hero-title span:nth-child(1) {
animation-delay: .05s
}
.hero-title span:nth-child(2) {
animation-delay: .28s
}
.hero-title span.accent {
color: var(--maroon-tint);
}
@keyframes reveal-line {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
.hero-sub {
font-size: 16.5px;
line-height: 1.65;
color: var(--ink-blog-muted);
max-width: 46ch;
margin: 0 0 34px;
opacity: 0;
animation: rise .7s ease forwards;
animation-delay: .6s;
}
.hero-actions {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
opacity: 0;
animation: rise .7s ease forwards;
animation-delay: .75s;
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--maroon);
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 15px;
padding: 15px 26px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer-lg)), calc(100% - var(--chamfer-lg)) 100%, 0 100%);
transition: background-color .25s ease, transform .25s ease;
box-shadow: none;
}
.btn-primary:hover {
background: var(--maroon-bright);
transform: translateY(-2px);
}
.btn-primary:focus-visible {
outline: 2px solid var(--ink-blog);
outline-offset: 3px;
}
.btn-primary svg {
width: 15px;
height: 15px;
flex: none;
}
.hero-meta {
font-size: 13px;
color: var(--ink-blog-muted);
border-left: 1px solid rgba(255, 255, 255, .25);
padding-left: 18px;
}
.hero-badges {
display: flex;
flex-direction: column;
gap: 14px;
opacity: 0;
animation: rise .7s ease forwards;
animation-delay: .9s;
}
.badge {
display: flex;
flex-direction: column;
justify-content: center;
width: 168px;
padding: 18px 20px;
clip-path: polygon(0 0, 100% 0, 100% 100%, var(--chamfer-lg) 100%, 0 calc(100% - var(--chamfer-lg)));
}
.badge-stat {
background: var(--maroon);
color: #fff;
}
.badge-num {
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 26px;
line-height: 1;
}
.badge-label {
font-size: 12.5px;
margin-top: 4px;
color: rgba(255, 255, 255, .82);
}
.badge-cta {
background: rgba(16, 14, 11, .55);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, .22);
color: var(--ink-blog);
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
transition: border-color .25s ease, transform .25s ease;
}
.badge-cta:hover {
border-color: var(--maroon-tint);
transform: translateY(-2px);
}
.badge-cta svg {
width: 15px;
height: 15px;
color: var(--ink-blog-muted);
flex: none;
}
/* ================= Featured strip (overlaps hero) ================= */
.featured-section {
background: var(--white-bg);
padding: 0 0 72px;
}
.featured-row {
position: relative;
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
margin-top: -96px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
z-index: 3;
opacity: 0;
animation: rise .8s ease forwards;
animation-delay: 1.05s;
}
.post-card {
background: var(--white-card);
border: 1px solid var(--white-border);
box-shadow: 0 26px 48px rgba(20, 14, 8, .16);
clip-path: polygon(0 0, 100% 0, 100% 100%, var(--chamfer-lg) 100%, 0 calc(100% - var(--chamfer-lg)));
transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.post-card:hover {
border-color: var(--maroon);
transform: translateY(-4px);
box-shadow: 0 30px 56px rgba(20, 14, 8, .2);
}
.post-media {
position: relative;
overflow: hidden;
aspect-ratio: 16/10;
}
.post-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(.3) contrast(1.1) brightness(.86);
transition: transform .6s cubic-bezier(.22, .9, .32, 1), filter .4s ease;
}
.post-card:hover .post-media img {
transform: scale(1.06);
filter: grayscale(.1) contrast(1.1) brightness(.9);
}
.post-media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16, 14, 11, 0) 55%, rgba(16, 14, 11, .85) 100%);
}
.post-tag {
position: absolute;
top: 14px;
left: 14px;
background: var(--maroon);
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 12px;
padding: 5px 12px;
z-index: 2;
}
.post-date {
position: absolute;
left: 16px;
bottom: 14px;
font-size: 12.5px;
color: rgba(255, 255, 255, .85);
z-index: 2;
}
.post-body {
padding: 18px 18px 22px;
}
.post-title {
font-family: 'Oswald', sans-serif;
font-size: 16.5px;
line-height: 1.4;
font-weight: 600;
}
.post-title a {
background-image: linear-gradient(var(--maroon), var(--maroon));
background-size: 0% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size .3s ease;
}
.post-title a:hover {
background-size: 100% 1px;
}
/* ================= Category page (grid + sidebar) ================= */
.blog-content {
padding: 8px 0 90px;
}
.category-wrap {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 28px;
}
.card {
background: var(--white-card);
border: 1px solid var(--white-border);
clip-path: polygon(0 0, 100% 0, 100% 100%, var(--chamfer-lg) 100%, 0 calc(100% - var(--chamfer-lg)));
transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.widget:hover, .video-widget:hover {
box-shadow: 0 18px 36px rgba(20, 14, 8, .1);
transform: translateY(-3px);
border-color: #ded7c8;
}
.section-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 16px;
padding: 20px 20px 0;
}
.section-title .dot {
width: 12px;
height: 12px;
background: var(--maroon);
flex: none;
transition: transform .3s ease;
clip-path: polygon(0 0, 100% 0, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
.section-title h2, .section-title h3 {
font-size: 15px;
font-weight: 600;
}
.widget:hover .section-title .dot {
transform: scale(1.2) rotate(90deg);
}
.main {
padding: 24px;
}
.main .section-title {
padding: 0;
margin-bottom: 20px;
}
.main .section-title .dot {
width: 14px;
height: 14px;
}
.main .section-title h1 {
font-size: 21px;
font-weight: 700;
}
/* ---- author header (used on the author archive page) ---- */
.author-header {
display: flex;
align-items: center;
gap: 22px;
padding: 24px;
margin-bottom: 24px;
}
.author-avatar {
width: 88px;
height: 88px;
flex: none;
object-fit: cover;
background: #e5e1d6;
clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer-sm));
}
.bblog-page.radius-mode .author-avatar {
clip-path: none;
border-radius: var(--card-radius);
}
.author-role {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 12.5px;
color: var(--maroon);
margin: 2px 0 10px;
}
.author-role::before {
content: '';
width: 16px;
height: 2px;
background: var(--maroon);
}
.author-name {
font-size: 22px;
font-weight: 700;
}
.author-bio {
font-size: 13.5px;
line-height: 1.6;
color: var(--ink-blog-muted-dark);
max-width: 56ch;
margin: 0 0 12px;
}
.author-stats {
display: flex;
gap: 18px;
font-size: 12.5px;
color: var(--ink-blog-muted-dark);
}
.author-stats strong {
color: var(--ink-blog-dark);
font-family: 'Oswald', sans-serif;
}
@media (max-width:560px) {
.author-header {
flex-direction: column;
align-items: flex-start;
text-align: left;
}
}
/* Column count is driven by the admin "Grid Columns" setting via the
--grid-cols custom property (set inline per-template). Switching to
"list" layout (bblog_default_layout) adds the "list-layout" class,
which is the single parameter that flips this to 1-per-row. */
.posts-grid {
display: grid;
grid-template-columns: repeat(var(--grid-cols, 2), 1fr);
gap: 24px;
}
.posts-grid.list-layout {
display: flex;
flex-direction: column;
gap: 22px;
}
.posts-grid.list-layout article {
display: grid;
grid-template-columns: 280px 1fr;
gap: 22px;
align-items: stretch;
}
.posts-grid.list-layout .art-thumb {
height: 100%;
}
.posts-grid.list-layout .art-thumb img {
aspect-ratio: auto;
height: 100%;
min-height: 170px;
}
.posts-grid.list-layout .art-body {
display: flex;
flex-direction: column;
}
.posts-grid.list-layout .art-excerpt {
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.posts-grid.list-layout .read-more {
margin-top: auto;
align-self: flex-start;
}
@media (max-width:640px) {
.posts-grid.list-layout article {
grid-template-columns: 1fr;
}
.posts-grid.list-layout .art-thumb img {
aspect-ratio: 16/9;
min-height: 0;
}
}
.bblog-page article {
transition: transform .35s cubic-bezier(.22, .9, .32, 1);
}
.bblog-page article:hover {
transform: translateY(-6px);
}
.art-thumb {
position: relative;
overflow: hidden;
clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer-sm));
}
.art-thumb img {
display: block;
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
background: #e5e1d6;
filter: grayscale(.3) contrast(1.08) brightness(.92);
transition: transform .55s cubic-bezier(.22, .9, .32, 1), filter .4s ease;
}
.art-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16, 14, 11, 0) 55%, rgba(16, 14, 11, .4) 100%);
opacity: 0;
transition: opacity .35s ease;
}
.bblog-page article:hover .art-thumb img {
transform: scale(1.08);
filter: grayscale(.12) contrast(1.08) brightness(.96);
}
.bblog-page article:hover .art-thumb::after {
opacity: 1;
}
.art-cat {
position: absolute;
bottom: 10px;
right: 10px;
background: var(--maroon);
color: #fff;
font-size: 11px;
font-weight: 700;
font-family: 'Oswald', sans-serif;
padding: 4px 10px;
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.bblog-page article:hover .art-cat {
transform: translateY(-4px);
}
.art-meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--ink-blog-muted-dark);
margin: 12px 0 8px;
}
.art-meta .author {
font-weight: 600;
color: var(--ink-blog-dark);
}
.art-meta .stats {
margin-left: auto;
display: flex;
gap: 10px;
}
.art-meta .stats a:hover {
color: var(--maroon);
}
.art-meta>span, .art-meta .stats>span, .art-meta .stats>a {
display: inline-flex;
align-items: center;
gap: 4px;
}
.meta-icon {
width: 13px;
height: 13px;
flex: none;
opacity: .75;
}
.art-title {
font-family: 'Oswald', sans-serif;
font-size: 16px;
line-height: 1.35;
margin: 0 0 8px;
font-weight: 600;
}
.art-title a {
position: relative;
display: inline-block;
transition: color .25s ease;
}
.art-title a::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: var(--maroon);
transition: width .3s ease;
}
.art-title a:hover {
color: var(--maroon);
}
.art-title a:hover::after {
width: 100%;
}
.art-excerpt {
font-size: 13px;
line-height: 1.55;
color: var(--ink-blog-muted-dark);
margin: 0 0 14px;
}
.read-more {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--maroon);
color: #fff;
font-size: 12px;
font-weight: 700;
font-family: 'Oswald', sans-serif;
padding: 9px 16px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.read-more:hover {
background: var(--maroon-bright);
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(var(--maroon-rgb), .32);
}
.read-more .arrow {
display: inline-block;
transition: transform .25s ease;
}
.read-more:hover .arrow {
transform: translateX(4px);
}
/* .read-more is an , and .bblog-page a{color:inherit} (class+tag) is
more specific than the bare .read-more class above, so it was quietly
winning and turning the button text back to the ink color. This wins
the tie-break back. */
.art-body .read-more {
color: #fff;
}
/* ---- sidebar ---- */
.sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
.widget {
padding: 20px;
}
.categories-list {
display: flex;
flex-direction: column;
}
.cat-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid var(--white-border);
transition: padding-left .25s ease;
}
.cat-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.cat-item:first-child {
padding-top: 0;
}
.cat-item:hover {
padding-left: 6px;
}
.cat-arrow {
color: var(--ink-blog-muted-dark);
font-size: 15px;
flex: none;
transition: transform .25s ease, color .25s ease;
}
.cat-item:hover .cat-arrow {
color: var(--maroon);
transform: translateX(2px);
}
.cat-name {
font-size: 14.5px;
font-weight: 500;
color: var(--ink-blog-dark);
transition: color .25s ease;
}
.cat-item:hover .cat-name {
color: var(--maroon);
}
.cat-count {
margin-left: auto;
background: var(--white-bg);
border: 1px solid var(--white-border);
color: var(--ink-blog-muted-dark);
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 12px;
min-width: 26px;
text-align: center;
padding: 3px 8px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 4px 100%, 0 calc(100% - 4px));
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.cat-item:hover .cat-count {
background: var(--maroon);
border-color: var(--maroon);
color: #fff;
}
.popular-list {
display: flex;
flex-direction: column;
gap: 22px;
}
.popular-item {
display: flex;
gap: 16px;
align-items: center;
}
.popular-thumb-wrap {
position: relative;
flex: none;
}
.popular-thumb {
display: block;
width: 104px;
height: 92px;
overflow: hidden;
clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer-sm));
}
.popular-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #e5e1d6;
filter: grayscale(.3) contrast(1.08) brightness(.92);
transition: transform .5s cubic-bezier(.22, .9, .32, 1);
}
.popular-item:hover .popular-thumb img {
transform: scale(1.14);
}
.rank {
position: absolute;
top: -12px;
left: -12px;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--maroon);
color: #fff;
font-size: 14px;
font-weight: 700;
font-family: 'Oswald', sans-serif;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 3px var(--white-card);
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.popular-item:hover .rank {
transform: scale(1.15) rotate(-8deg);
}
.popular-body {
display: flex;
flex-direction: column;
gap: 6px;
}
.popular-title {
font-family: 'Oswald', sans-serif;
font-size: 15.5px;
font-weight: 600;
line-height: 1.35;
transition: color .25s ease, transform .25s ease;
}
.popular-item:hover .popular-title {
color: var(--maroon);
transform: translateX(4px);
}
.popular-date {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--ink-blog-muted-dark);
}
.tips-list {
display: flex;
flex-direction: column;
border-left: 2px solid var(--white-border);
margin-left: 25px;
}
.tips-item {
position: relative;
padding: 0 0 26px 24px;
display: block;
}
.tips-item .tdot {
position: absolute;
left: -6px;
top: 6px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #ddd6c7;
transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.tips-item:hover .tdot {
background: var(--maroon);
transform: scale(1.3);
box-shadow: 0 0 0 5px rgba(var(--maroon-rgb), .14);
}
.tips-date {
display: block;
font-size: 13px;
color: var(--ink-blog-muted-dark);
margin-bottom: 6px;
}
.tips-item-title {
display: block;
font-family: 'Oswald', sans-serif;
font-size: 16.5px;
font-weight: 600;
line-height: 1.35;
transition: color .25s ease, transform .25s ease;
}
.tips-item:hover .tips-item-title {
color: var(--maroon);
transform: translateX(5px);
}
.subscribe-row {
display: flex;
align-items: center;
gap: 12px;
}
.subscribe-row img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex: none;
background: #e5e1d6;
transition: transform .3s ease, box-shadow .3s ease;
}
.subscribe-row:hover img {
transform: scale(1.1);
box-shadow: 0 0 0 5px rgba(var(--maroon-rgb), .14);
}
.subscribe-name {
font-size: 13px;
font-weight: 700;
font-family: 'Oswald', sans-serif;
}
.yt-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--maroon);
color: #fff;
font-size: 11px;
font-weight: 700;
font-family: 'Oswald', sans-serif;
padding: 4px 10px;
width: fit-content;
clip-path: polygon(0 0, 100% 0, 100% 100%, 6px 100%, 0 calc(100% - 6px));
transition: transform .25s ease;
}
.yt-badge span {
opacity: .85;
font-weight: 500;
}
.subscribe-row:hover .yt-badge {
transform: translateX(4px);
}
.video-thumb {
position: relative;
overflow: hidden;
clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer-sm));
}
.video-thumb img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
background: #e5e1d6;
filter: grayscale(.3) contrast(1.08) brightness(.9);
transition: transform .55s cubic-bezier(.22, .9, .32, 1);
}
.video-widget:hover .video-thumb img {
transform: scale(1.1);
}
.play-icon {
position: absolute;
top: 50%;
left: 50%;
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(16, 14, 11, .55);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translate(-50%, -50%) scale(.6);
transition: opacity .3s ease, transform .3s ease;
backdrop-filter: blur(2px);
}
.play-icon::after {
content: '';
border-style: solid;
border-width: 9px 0 9px 15px;
border-color: transparent transparent transparent #fff;
margin-left: 3px;
}
.video-widget:hover .play-icon {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.video-widget a {
display: block;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
padding: 14px;
transition: color .25s ease, padding-left .25s ease;
}
.video-widget a:hover {
padding-left: 18px;
color: var(--maroon);
}
.video-widget .vdate {
display: block;
font-size: 11px;
color: var(--ink-blog-muted-dark);
font-weight: 400;
margin-bottom: 4px;
}
/* ================= Shape mode ================= */
/* Add "radius-mode" to the .bblog-page wrapper to turn off the chamfer
clip-paths and switch to plain rounded corners instead — driven by the
"Corner style" setting. Corner amount is controlled separately for
cards/media vs buttons via the --card-radius / --btn-radius variables. */
.bblog-page.radius-mode .brand-mark, .bblog-page.radius-mode .badge, .bblog-page.radius-mode .post-card, .bblog-page.radius-mode .card, .bblog-page.radius-mode .section-title .dot, .bblog-page.radius-mode .art-thumb, .bblog-page.radius-mode .popular-thumb, .bblog-page.radius-mode .video-thumb {
clip-path: none;
border-radius: var(--card-radius);
}
.bblog-page.radius-mode .site-nav .trade-link, .bblog-page.radius-mode .btn-primary, .bblog-page.radius-mode .read-more, .bblog-page.radius-mode .yt-badge, .bblog-page.radius-mode .cat-count {
clip-path: none;
border-radius: var(--btn-radius);
}
/* --card-radius presets */
.bblog-page.card-radius-none {
--card-radius: 0;
}
.bblog-page.card-radius-sm {
--card-radius: 6px;
}
.bblog-page.card-radius-md {
--card-radius: 16px;
}
.bblog-page.card-radius-lg {
--card-radius: 28px;
}
/* --btn-radius presets */
.bblog-page.btn-radius-none {
--btn-radius: 0;
}
.bblog-page.btn-radius-sm {
--btn-radius: 6px;
}
.bblog-page.btn-radius-md {
--btn-radius: 10px;
}
.bblog-page.btn-radius-full {
--btn-radius: 999px;
}
@media (max-width:900px) {
.hero {
min-height: auto;
}
.hero-inner {
grid-template-columns: 1fr;
}
.hero-badges {
flex-direction: row;
}
.badge {
width: auto;
flex: 1;
}
.featured-row {
grid-template-columns: 1fr;
margin-top: -64px;
}
.category-wrap {
grid-template-columns: 1fr;
}
.posts-grid {
grid-template-columns: 1fr;
}
}
/* ---- lightweight page header, used on inner pages instead of the hero ---- */
.page-header {
background: var(--bg-0);
}
.page-header .site-header {
border-bottom-color: rgba(255, 255, 255, .14);
}
/* ================= Article page ================= */
.article-page {
padding: 0 0 90px;
}
.article-wrap {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 240px 1fr;
gap: 32px;
align-items: start;
transition: grid-template-columns .3s ease;
}
.article-wrap.toc-collapsed {
grid-template-columns: 1fr;
}
/* ---- left sidebar: table of contents ---- */
.toc-sidebar {
position: sticky;
top: 24px;
z-index: 999999;
}
.toc-toggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
background: var(--white-card);
border: 1px solid var(--white-border);
padding: 13px 16px;
cursor: pointer;
text-align: left;
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 12.5px;
color: var(--ink-blog-dark);
clip-path: polygon(0 0, 100% 0, 100% 100%, var(--chamfer-sm) 100%, 0 calc(100% - var(--chamfer-sm)));
transition: border-color .2s ease;
}
.bblog-page.radius-mode .toc-toggle {
clip-path: none;
border-radius: var(--card-radius);
}
.toc-toggle:hover {
border-color: var(--maroon);
}
.toc-toggle-icon {
width: 15px;
height: 15px;
flex: none;
color: var(--maroon);
}
.toc-toggle-label {
flex: 1;
}
.toc-toggle-chevron {
width: 13px;
height: 13px;
flex: none;
transition: transform .25s ease;
}
.toc-sidebar.collapsed .toc-toggle-chevron {
transform: rotate(-90deg);
}
.toc-sidebar-body {
display: flex;
flex-direction: column;
gap: 20px;
max-height: 3000px;
opacity: 1;
overflow: hidden;
margin-top: 20px;
transition: max-height .35s ease, opacity .25s ease, margin-top .3s ease;
}
.toc-sidebar.collapsed .toc-sidebar-body {
max-height: 0;
opacity: 0;
margin-top: 0;
}
.toc-card {
padding: 20px;
}
.toc-card .section-title {
padding: 0;
margin-bottom: 14px;
}
.toc-list {
display: flex;
flex-direction: column;
}
.toc-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0 9px 14px;
margin-left: -14px;
border-left: 2px solid var(--white-border);
font-size: 13px;
line-height: 1.4;
color: var(--ink-blog-muted-dark);
transition: color .2s ease, border-color .2s ease, padding-left .2s ease;
}
.toc-item:hover {
padding-left: 18px;
}
.toc-item:hover, .toc-item.active {
color: var(--maroon);
border-left-color: var(--maroon);
}
.toc-num {
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 10.5px;
color: var(--ink-blog-muted-dark);
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid var(--white-border);
background: var(--white-card);
display: inline-flex;
align-items: center;
justify-content: center;
transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.toc-item:hover .toc-num, .toc-item.active .toc-num {
color: #fff;
background: var(--maroon);
border-color: var(--maroon);
transform: scale(1.08);
}
.toc-subitem {
padding-left: 30px;
font-size: 12px;
color: var(--ink-blog-muted-dark);
}
.toc-subitem:hover {
padding-left: 34px;
}
/* ---- featured image: wider than the text column, pulled up over the
page header so it reads as the dominant element on the page ---- */
.article-featured {
position: relative;
overflow: hidden;
margin-top: -64px;
z-index: 3;
box-shadow: 0 26px 48px rgba(20, 14, 8, .18);
clip-path: polygon(0 0, 100% 0, 100% 100%, var(--chamfer-lg) 100%, 0 calc(100% - var(--chamfer-lg)));
}
.bblog-page.radius-mode .article-featured {
clip-path: none;
border-radius: var(--card-radius);
}
.article-featured img {
width: 100%;
height: auto;
display: block;
}
.article-featured::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(16, 14, 11, 0) 60%, rgba(16, 14, 11, .55) 100%);
}
.article-featured .post-tag {
position: absolute;
top: 18px;
left: 18px;
background: var(--maroon);
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 12.5px;
padding: 6px 14px;
z-index: 2;
}
.article-featured .post-date {
position: absolute;
left: 20px;
bottom: 16px;
font-size: 13px;
color: rgba(255, 255, 255, .85);
z-index: 2;
}
@media (max-width:640px) {
.article-featured {
margin-top: -40px;
}
}
/* When a breadcrumb sits right before the article, the image should
start cleanly below it instead of pulling up over it (that overlap
trick only works when the header is the element directly above). */
.bblog-breadcrumb+.article-page .article-featured {
margin-top: 24px;
}
@media (max-width:640px) {
.bblog-breadcrumb+.article-page .article-featured {
margin-top: 16px;
}
}
/* ---- header + body text, deliberately narrower than the image above ---- */
.article-head {
max-width: 720px;
padding-top: 30px;
}
.article-title {
font-size: clamp(26px, 3.4vw, 38px);
line-height: 1.18;
font-weight: 700;
margin: 0 0 16px;
}
.article-lead {
font-size: 16px;
line-height: 1.65;
color: var(--ink-blog-muted-dark);
margin: 0 0 6px;
}
.article-body {
max-width: 720px;
padding-top: 8px;
font-size: 15px;
line-height: 1.75;
color: var(--ink-blog-dark);
}
.article-body h3 {
font-family: 'Oswald', sans-serif;
font-size: 21px;
font-weight: 600;
color: var(--ink-blog-dark);
margin: 38px 0 14px;
scroll-margin-top: 24px;
}
.article-body h4 {
font-family: 'Oswald', sans-serif;
font-size: 17px;
font-weight: 600;
color: var(--ink-blog-dark);
margin: 28px 0 12px;
scroll-margin-top: 24px;
}
.article-body p {
margin: 0 0 18px;
}
.article-body p:last-child {
margin-bottom: 0;
}
.article-body img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.bblog-img-caption {
font-size: 12.5px;
font-style: italic;
color: var(--ink-blog-muted-dark);
text-align: center;
margin: 8px 0 22px;
}
/* ---- tags ---- */
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 720px;
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid var(--white-border);
}
.tag-pill {
display: inline-flex;
align-items: center;
gap: 2px;
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 12.5px;
letter-spacing: .01em;
color: var(--ink-blog-dark);
background: var(--white-card);
border: 1px solid var(--white-border);
padding: 8px 15px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%, 0 calc(100% - 7px));
transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.bblog-page.radius-mode .tag-pill {
clip-path: none;
border-radius: var(--btn-radius);
}
.tag-hash {
color: var(--maroon);
transition: color .22s ease;
}
.tag-pill:hover {
background: var(--maroon);
border-color: var(--maroon);
color: #fff;
transform: translateY(-3px) rotate(-1deg);
}
.tag-pill:hover .tag-hash {
color: #fff;
}
/* ---- related articles / related products: Owl Carousel ----
Owl Carousel builds its own .owl-nav and .owl-dots controls; these
rules only restyle them to match the chamfer/maroon theme. */
.related-section {
max-width: 960px;
margin-top: 56px;
overflow-x: hidden;
}
.related-section .section-title {
padding: 0;
margin-bottom: 20px;
}
.related-section .section-title h2 {
font-size: 19px;
font-weight: 700;
}
.related-articles-carousel .art-excerpt, .related-articles-carousel .read-more {
display: none;
}
.related-articles-carousel .owl-item article {
padding: 2px;
}
.related-products {
max-width: 960px;
margin-top: 56px;
overflow-x: hidden;
}
.related-products .section-title {
padding: 0;
margin-bottom: 20px;
}
.related-products .section-title h2 {
font-size: 19px;
font-weight: 700;
}
.related-products-carousel .owl-item {
padding: 2px;
}
.product-card {
background: var(--white-card);
border: 1px solid var(--white-border);
clip-path: polygon(0 0, 100% 0, 100% 100%, var(--chamfer-sm) 100%, 0 calc(100% - var(--chamfer-sm)));
transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.bblog-page.radius-mode .product-card {
clip-path: none;
border-radius: var(--card-radius);
}
.product-card:hover {
border-color: var(--maroon);
transform: translateY(-4px);
box-shadow: 0 16px 32px rgba(20, 14, 8, .14);
}
.product-media {
position: relative;
overflow: hidden;
aspect-ratio: 1/1;
}
.product-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #e5e1d6;
transition: transform .5s ease;
}
.product-card:hover .product-media img {
transform: scale(1.06);
}
.product-body {
padding: 12px 14px 16px;
}
.product-name {
font-family: 'Oswald', sans-serif;
font-size: 13.5px;
font-weight: 600;
line-height: 1.3;
margin: 0 0 6px;
}
.product-price {
font-family: 'Oswald', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--maroon);
}
.owl-carousel .owl-nav {
position: absolute;
top: -52px;
right: 0;
display: flex;
gap: 8px;
}
.related-section .owl-nav, .related-products .owl-nav {
top: -46px;
}
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
width: 34px;
height: 34px;
margin: 0 !important;
padding: 0 !important;
background: var(--white-card) !important;
border: 1px solid var(--white-border) !important;
color: var(--ink-blog-dark) !important;
font-size: 0 !important;
clip-path: polygon(0 0, 100% 0, 100% 100%, 6px 100%, 0 calc(100% - 6px));
display: flex;
align-items: center;
justify-content: center;
transition: background-color .2s ease, border-color .2s ease;
}
.bblog-page.radius-mode .owl-carousel .owl-nav button.owl-prev, .bblog-page.radius-mode .owl-carousel .owl-nav button.owl-next {
clip-path: none;
border-radius: var(--btn-radius);
}
.owl-carousel .owl-nav button.owl-prev::after, .owl-carousel .owl-nav button.owl-next::after {
content: '';
width: 8px;
height: 8px;
border: solid var(--ink-blog-dark);
border-width: 0 2px 2px 0;
}
.owl-carousel .owl-nav button.owl-prev::after {
transform: rotate(135deg);
margin-left: 3px;
}
.owl-carousel .owl-nav button.owl-next::after {
transform: rotate(-45deg);
margin-right: 3px;
}
.owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel .owl-nav button.owl-next:hover {
background: var(--maroon) !important;
border-color: var(--maroon) !important;
}
.owl-carousel .owl-nav button.owl-prev:hover::after, .owl-carousel .owl-nav button.owl-next:hover::after {
border-color: #fff;
}
.owl-carousel .owl-nav button.disabled {
opacity: .35;
cursor: default;
}
.owl-carousel .owl-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 18px;
}
.owl-carousel .owl-dots .owl-dot span {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--white-border);
transition: background-color .2s ease, transform .2s ease;
}
.owl-carousel .owl-dots .owl-dot.active span {
background: var(--maroon);
transform: scale(1.25);
}
/* ---- comments ---- */
.comments-section {
max-width: 720px;
margin-top: 56px;
}
.comments-section .section-title {
padding: 0;
margin-bottom: 20px;
}
.comments-section .section-title h2 {
font-size: 19px;
font-weight: 700;
}
.comments-count {
font-weight: 400;
color: var(--ink-blog-muted-dark);
}
.comment-notice {
background: #f0f7f0;
color: #2e7d32;
border: 1px solid #c8e6c9;
padding: 12px 16px;
font-size: 13.5px;
margin-bottom: 20px;
}
.comment-form {
display: flex;
gap: 14px;
margin-bottom: 36px;
}
.comment-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
flex: none;
background: #e5e1d6;
display: none;
}
.comment-form-body {
flex: 1;
}
.comment-guest-fields {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.comment-guest-fields input {
flex: 1;
min-width: 0;
border: 1px solid var(--white-border);
background: var(--white-bg);
font-family: 'Inter', sans-serif;
font-size: 13.5px;
padding: 10px 14px;
color: var(--ink-blog-dark);
}
.comment-guest-fields input:focus {
outline: none;
border-color: var(--maroon);
}
@media (max-width:480px) {
.comment-guest-fields {
flex-direction: column;
}
}
.comment-form textarea {
width: 100%;
min-height: 74px;
resize: vertical;
border: 1px solid var(--white-border);
background: var(--white-bg);
font-family: 'Inter', sans-serif;
font-size: 13.5px;
padding: 12px 14px;
color: var(--ink-blog-dark);
}
.comment-form textarea:focus {
outline: none;
border-color: var(--maroon);
}
.comment-form .btn-primary {
margin-top: 10px;
padding: 11px 20px;
font-size: 13px;
}
.comment-subscribe-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
font-size: 12.5px;
color: var(--ink-blog-muted-dark);
cursor: pointer;
}
.comment-subscribe-row input {
margin: 0;
}
.comment-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.comment {
display: flex;
gap: 14px;
scroll-margin-top: 24px;
}
.comment-body {
flex: 1;
min-width: 0;
}
.comment-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 4px;
}
.comment-author {
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 13.5px;
color: var(--ink-blog-dark);
}
.comment-date {
font-size: 12px;
color: var(--ink-blog-muted-dark);
}
.comment-text {
font-size: 13.5px;
line-height: 1.6;
color: var(--ink-blog-dark);
margin: 0 0 8px;
}
.comment-reply-link {
font-family: 'Oswald', sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--maroon);
transition: padding-left .2s ease;
}
.comment-reply-link:hover {
padding-left: 4px;
}
.comment-replies {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 16px;
padding-left: 20px;
border-left: 2px solid var(--white-border);
}
/* ---- sidebar search ---- */
.search-widget {
padding: 18px;
}
.search-form {
position: relative;
}
.search-input {
width: 100%;
border: 1px solid var(--white-border);
background: var(--white-bg);
font-family: 'Inter', sans-serif;
font-size: 13.5px;
color: var(--ink-blog-dark);
padding: 11px 46px 11px 14px;
clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer-sm));
transition: border-color .2s ease;
}
.bblog-page.radius-mode .search-input {
clip-path: none;
border-radius: var(--btn-radius);
}
.search-input:focus {
outline: none;
border-color: var(--maroon);
}
.search-input::placeholder {
color: var(--ink-blog-muted-dark);
}
.search-btn {
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
width: 36px;
background: var(--maroon);
border: none;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 6px 100%, 0 calc(100% - 6px));
transition: background-color .2s ease;
}
.bblog-page.radius-mode .search-btn {
clip-path: none;
border-radius: var(--btn-radius);
}
.search-btn:hover {
background: var(--maroon-dark);
}
.search-btn svg {
width: 15px;
height: 15px;
}
/* ---- sidebar newsletter / subscribe ---- */
.newsletter-widget {
padding: 20px;
}
/* .section-title's own padding (20px 20px 0) is meant for a card with no
padding of its own (e.g. .popular-list's parent); the newsletter widget
already sets padding:20px above, so without this override the heading
gets it twice and the title wraps - match .toc-card's override instead. */
.newsletter-widget .section-title {
padding: 0;
margin-bottom: 14px;
}
.newsletter-note {
font-size: 12.5px;
line-height: 1.55;
color: var(--ink-blog-muted-dark);
margin: -4px 0 14px;
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.newsletter-input {
width: 100%;
border: 1px solid var(--white-border);
background: var(--white-bg);
font-family: 'Inter', sans-serif;
font-size: 13.5px;
color: var(--ink-blog-dark);
padding: 11px 14px;
clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer-sm));
transition: border-color .2s ease;
}
.bblog-page.radius-mode .newsletter-input {
clip-path: none;
border-radius: var(--btn-radius);
}
.newsletter-input:focus {
outline: none;
border-color: var(--maroon);
}
.newsletter-input::placeholder {
color: var(--ink-blog-muted-dark);
}
.newsletter-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--maroon);
border: none;
color: #fff;
cursor: pointer;
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 13px;
padding: 11px 16px;
width: 100%;
clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
transition: background-color .2s ease, transform .2s ease;
}
.bblog-page.radius-mode .newsletter-btn {
clip-path: none;
border-radius: var(--btn-radius);
}
.newsletter-btn:hover {
background: var(--maroon-dark);
transform: translateY(-2px);
}
.newsletter-btn svg {
width: 14px;
height: 14px;
flex: none;
}
.newsletter-status {
font-size: 12px;
margin-top: 2px;
display: none;
}
.newsletter-status.success {
color: #3f7a3f;
display: block;
}
.newsletter-status.error {
color: var(--maroon);
display: block;
}
.newsletter-status.subscribed {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
color: var(--ink-blog-muted-dark);
}
.newsletter-unsubscribe-btn {
background: none;
border: none;
padding: 0;
color: var(--maroon);
font-size: 12px;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
.newsletter-unsubscribe-btn:hover {
color: var(--maroon-dark);
}
.newsletter-unsubscribe-btn:disabled {
opacity: 0.5;
cursor: default;
}
/* ---- pagination ---- */
.pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid var(--white-border);
}
.page-btn {
min-width: 38px;
height: 38px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--ink-blog-dark);
background: var(--white-card);
border: 1px solid var(--white-border);
text-decoration: none;
clip-path: polygon(0 0, 100% 0, 100% 100%, 6px 100%, 0 calc(100% - 6px));
transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.bblog-page.radius-mode .page-btn {
clip-path: none;
border-radius: var(--btn-radius);
}
.page-btn:hover {
border-color: var(--maroon);
color: var(--maroon);
}
.page-btn.active {
background: var(--maroon);
border-color: var(--maroon);
color: #fff;
cursor: default;
}
.page-btn.is-disabled {
opacity: .35;
pointer-events: none;
}
.page-ellipsis {
color: var(--ink-blog-muted-dark);
font-family: 'Oswald', sans-serif;
font-size: 13px;
padding: 0 2px;
}
@media (max-width:900px) {
.article-wrap {
grid-template-columns: 1fr;
}
.toc-sidebar {
position: static;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-title span, .hero-sub, .hero-actions, .hero-badges, .featured-row {
animation: none !important;
opacity: 1;
clip-path: none;
transform: none;
}
.bblog-page * {
transition: none !important;
}
}