. First row is the visual header row. */
.prose table,
.prose .wp-block-table table {
width: 100%;
border-collapse: collapse;
font-family: var(--sans);
font-size: 13.5px;
line-height: 1.5;
margin: 0;
border: none !important;
outline: none !important;
}
.prose .wp-block-table {
border: none !important;
margin: 0 0 1.8em;
overflow-x: auto;
display: block;
}
.prose table tr,
.prose table td,
.prose table th {
border: none !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
border-left: none !important;
outline: none !important;
}
/* First row = header (no in WP DOM) */
.prose table tbody tr:first-child td {
padding: 10px 15px !important;
font-size: 10.5px !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--ink-3) !important;
background: var(--surface) !important;
border-top: 1px solid var(--border-md) !important;
border-bottom: 1.5px solid var(--border-md) !important;
vertical-align: middle !important;
line-height: 1.4 !important;
}
/* Body rows — horizontal hairline only */
.prose table tbody tr {
border-bottom: 1px solid var(--border) !important;
transition: background 0.08s;
}
.prose table tbody tr:last-child { border-bottom: none !important; }
.prose table tbody tr:hover { background: #fafaf9; }
/* Body cells */
.prose table tbody tr:not(:first-child) td {
padding: 13px 15px !important;
vertical-align: top !important;
color: var(--ink-2) !important;
line-height: 1.55 !important;
}
.prose table tbody tr:not(:first-child) td:first-child { color: var(--ink) !important; }
.prose table tbody td strong { font-weight: 600 !important; color: var(--ink) !important; }
/* WP block table overrides */
.prose .wp-block-table tr,
.prose .wp-block-table th,
.prose .wp-block-table td { border: none !important; }
.prose .wp-block-table tbody tr { border-bottom: 1px solid var(--border) !important; }
.prose .wp-block-table tbody tr:last-child { border-bottom: none !important; }
/* Caption */
.prose caption, .prose .wp-element-caption { font-size: 12.5px; color: var(--ink-4); font-style: italic; text-align: left; margin-bottom: 10px; caption-side: top; line-height: 1.5; }
/* ═══ FAQ ════════════════════════════════════════════════════ */
.faq-wrap { margin: 2em 0 1.8em; border-top: 1px solid var(--border); padding-top: 2em; }
.faq-h { font-family: var(--serif); font-weight: 600; font-size: 27px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 20px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); text-align: left; transition: color 0.12s; }
.faq-q:hover { color: var(--ink-2); }
.faq-icon { width: 20px; height: 20px; border-radius: 50%; flex: none; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--ink-3); transition: transform 0.22s, background 0.15s; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.faq-a { font-family: var(--sans); font-size: 15px; line-height: 1.72; color: var(--ink-3); max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), padding 0.3s; }
.faq-item.open .faq-a { max-height: 500px; padding-bottom: 18px; }
/* ═══ LIGHTBOX ═══════════════════════════════════════════════ */
.lbox { position: fixed; inset: 0; z-index: 900; background: rgba(30,28,26,0.88); display: flex; align-items: center; justify-content: center; padding: 28px; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.lbox.open { opacity: 1; pointer-events: all; }
.lbox-inner { position: relative; max-width: 880px; width: 100%; }
.lbox-close { position: absolute; top: -40px; right: 0; color: rgba(255,255,255,0.65); font-size: 26px; line-height: 1; background: none; border: none; cursor: pointer; padding: 4px 8px; transition: color 0.15s; }
.lbox-close:hover { color: #fff; }
.lbox-img { width: 100%; border-radius: var(--r); display: block; max-height: 80vh; object-fit: contain; }
.lbox-cap { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,0.4); text-align: center; font-style: italic; font-family: var(--sans); }
/* ═══ TOAST ══════════════════════════════════════════════════ */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--ink); color: #fff; font-size: 13px; font-family: var(--sans); padding: 10px 20px; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.2); opacity: 0; pointer-events: none; transition: opacity 0.22s, transform 0.22s; z-index: 2000; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ═══ FOOTER ═════════════════════════════════════════════════ */
footer {
background: #1e1e1c;
color: rgba(255,255,255,0.38);
padding: 48px 40px 40px;
text-align: center;
}
.bcn-popup__label {margin:7px !important;}
.footer-social { max-width: var(--wrap); margin: 0 auto 32px; display: flex; align-items: center; gap: 0; }
.footer-social-line { flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.footer-social-icons { display: flex; align-items: center; gap: 24px; padding: 0 32px; }
.footer-social-icons a { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.45); transition: color 0.15s; }
.footer-social-icons a:hover { color: rgba(255,255,255,0.85); }
.footer-logo { font-family: var(--serif); font-size: 22px; font-weight: 600; color: rgba(255,255,255,0.72); letter-spacing: -0.015em; display: block; margin-bottom: 10px; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.3); margin-bottom: 18px; line-height: 1.5; }
.footer-legal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; }
.footer-legal a { font-size: 12.5px; color: rgba(255,255,255,0.42); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.18); transition: color 0.12s; padding: 0 16px; }
.footer-legal a:hover { color: rgba(255,255,255,0.78); }
.footer-legal-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.2); flex: none; }
/* ═══ RESPONSIVE ═════════════════════════════════════════════ */
@media (max-width: 1100px) {
.page-outer { grid-template-columns: 220px 1fr 60px; }
}
@media (max-width: 900px) {
.nav-links, .nav-right { display: none; }
.nav-ham { display: flex; }
.page-outer { display: block; padding: 0 24px; }
.left-col { display: none; }
.article-col { padding: 40px 0 64px; }
.right-col { display: none; }
.mobile-toc-bar { display: block; }
body { padding-bottom: 65px; }
.related-outer { padding: 0 24px; }
.related-grid { grid-template-columns: repeat(2, 1fr); }
footer { padding: 36px 20px 32px; }
.footer-social-icons { gap: 18px; padding: 0 20px; }
.contrib-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
.wrap { padding: 0 20px; }
.hero h1 { font-size: 28px; }
.art-h1 { font-size: 30px; }
.art-deck { font-size: 17px; }
.hero-controls { flex-direction: column; align-items: stretch; }
.search-wrap { max-width: 100%; }
.related-grid { grid-template-columns: 1fr; }
.related-outer { padding: 0 20px; }
footer { padding: 28px 16px 28px; }
.footer-social-icons { gap: 14px; padding: 0 12px; }
.footer-legal { gap: 0; }
.footer-legal a { padding: 4px 10px; }
.nl-inner { flex-direction: column; }
.nl-form { flex-direction: column; }
.nl-btn { width: 100%; }
.contrib-stats { grid-template-columns: 1fr 1fr; }
}
/* RAJ */
.static-page-outer {
max-width: 1160px !important;
margin: 0 auto !important;
padding: 52px 24px 100px !important;
}
/* ── AJAX filter skeleton loaders ───────────────────────────── */
@keyframes skel-shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.skel {
background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%);
background-size: 800px 100%;
animation: skel-shimmer 1.4s infinite linear;
border-radius: var(--r);
}
.skel-thumb { height: 180px; width: 100%; margin-bottom: 12px; }
.skel-num { height: 28px; width: 60px; border-radius: 20px; flex: none; }
.skel-body { flex: 1; }
.skel-line { height: 14px; margin-bottom: 10px; }
.skel-line.w40 { width: 40%; }
.skel-line.w60 { width: 60%; }
.skel-line.w70 { width: 70%; }
.skel-line.w80 { width: 80%; }
.blog-card.is-skeleton { pointer-events: none; }
.issue-row.is-skeleton { pointer-events: none; display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); }
/* Pagination list reset so the matches the old layout */
.pagination-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* ── BC Newsletter: account dropdown ───────────────────────────────
Paste into global.css. Uses !important only where theme link/nav
rules are known to collide with the dropdown's block layout.
─────────────────────────────────────────────────────────────────── */
/* Wrapper */
.bcn-acct-nav {
position: relative;
display: inline-flex;
align-items: center;
}
/* Trigger: icon + "My Account" + chevron */
.bcn-acct-nav__trigger {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 6px 10px 6px 8px;
border: 1px solid #e4e1db;
border-radius: 6px;
background: #fff;
color: #1d1d1b;
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
line-height: 1;
transition: background .15s, border-color .15s;
}
.bcn-acct-nav__trigger:hover {
background: #f2f0ec;
border-color: #ccc9c2;
color: #1d1d1b;
}
.bcn-acct-nav__label { font-size: 13px; }
.bcn-acct-nav__icon { flex: none; }
.bcn-acct-nav__chevron { flex: none; color: #76756f; transition: transform .2s; }
.bcn-acct-nav:hover .bcn-acct-nav__chevron { transform: rotate(180deg); }
/* Dropdown panel */
.bcn-acct-nav__dropdown {
display: block; /* explicit block so items stack naturally */
position: absolute;
top: calc(100% + 8px);
right: 0;
left: auto;
z-index: 99999;
min-width: 210px;
width: max-content;
background: #fff;
border: 1px solid #e4e1db;
border-radius: 10px;
box-shadow: 0 8px 28px rgba(29,29,27,.14);
padding: 4px 0;
opacity: 0;
pointer-events: none;
transform: translateY(-6px) scale(.98);
transform-origin: top right;
transition: opacity .18s, transform .18s;
}
.bcn-acct-nav:hover .bcn-acct-nav__dropdown,
.bcn-acct-nav:focus-within .bcn-acct-nav__dropdown {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
/* Bridge to prevent gap flicker when mouse moves from trigger → panel */
.bcn-acct-nav__dropdown::before {
content: '';
position: absolute;
top: -10px; left: 0; right: 0;
height: 10px;
}
/* User info row (avatar + name/email) */
.bcn-acct-nav__user {
display: flex !important;
align-items: center;
gap: 10px;
padding: 12px 14px 10px;
border-bottom: 1px solid #e4e1db;
margin-bottom: 4px;
}
.bcn-acct-nav__avatar {
flex: none;
display: flex !important;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #1d1d1b;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
}
.bcn-acct-nav__user-info { min-width: 0; overflow: hidden; }
.bcn-acct-nav__name {
display: block;
font-size: 13px;
font-weight: 600;
color: #1d1d1b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bcn-acct-nav__email {
display: block;
font-size: 11.5px;
color: #76756f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 1px;
}
/* ── THE KEY FIX ───────────────────────────────────────────────────
The theme's global `a { display: inline }` or nav link rules
collapse all anchor items onto one line. Force each item to be
a full-width flex row so they stack vertically.
──────────────────────────────────────────────────────────────────── */
.bcn-acct-nav__item {
display: flex !important;
align-items: center;
gap: 9px;
width: 100%;
box-sizing: border-box;
padding: 9px 14px;
font-size: 13.5px;
font-weight: 400;
color: #1d1d1b !important;
text-decoration: none !important;
background: transparent;
white-space: nowrap;
transition: background .12s;
}
.bcn-acct-nav__item:hover {
background: #f2f0ec;
color: #1d1d1b !important;
}
.bcn-acct-nav__item svg { flex: none; color: #76756f; }
/* Divider */
.bcn-acct-nav__divider {
display: block;
height: 1px;
background: #e4e1db;
margin: 4px 0;
}
/* Log out — red tint */
.bcn-acct-nav__item--logout { color: #b3261e !important; }
.bcn-acct-nav__item--logout:hover { background: #fdecea; }
.bcn-acct-nav__item--logout svg { color: #b3261e; }
.bcn-hero {
--ink: #1a1d1f;
--muted: #6b7280;
--border: #e2e2df;
--accent: #14532d;
--ring: rgba(20, 83, 45, 0.18);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
max-width: 480px;
}
.bcn-hero__form {
display: flex;
align-items: center;
background: #fff;
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px 4px 4px 20px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bcn-hero__form:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--ring);
}
.bcn-hero__input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-size: 15px;
color: var(--ink);
padding: 10px 8px;
}
.bcn-hero__input::placeholder {
color: #9ca3af;
}
.bcn-hero__btn {
flex-shrink: 0;
border: none;
border-radius: 999px;
background: #16181a;
color: #fff;
font-size: 14px;
font-weight: 500;
padding: 11px 20px;
cursor: pointer;
transition: background 0.15s ease, transform 0.05s ease;
}
.bcn-hero__btn:hover { background: #2b2e31; }
.bcn-hero__btn:active { transform: scale(0.97); }
.bcn-hero__message {
display: none;
align-items: center;
gap: 8px;
margin-top: 14px;
padding-left: 20px;
font-size: 14px;
color: var(--accent);
}
.bcn-hero__message.is-success { display: flex; }
@media (max-width: 420px) {
.bcn-hero__form {
flex-wrap: wrap;
border-radius: 16px;
padding: 6px;
}
.bcn-hero__input { width: 100%; padding: 10px 12px; }
.bcn-hero__btn { width: 100%; }
} |