/* ==========================================================================
BONGODARSHAN — Vintage Newspaper Theme
--------------------------------------------------------------------------
A single-edge burned, hand-held broadsheet aesthetic.
Overrides Bootstrap defaults; loaded AFTER Bootstrap in .
========================================================================== */
:root {
--ink: #1f150a;
--ink-soft: #3a2a18;
--ink-faded: #5a4530;
--paper: #f1e6c8;
--paper-dark: #e3d3ab;
--paper-darker: #c9b487;
--edge-char: #3b1a08;
--edge-ember: #7a2a0a;
--accent-red: #7a1608;
--accent-gold: #a8832c;
--rule-color: #2a1f14;
--serif-body: 'Cormorant Garamond', 'Tiro Bangla', 'Noto Serif Bengali', 'Mina', 'Old Standard TT', Georgia, serif;
--serif-head: 'IM Fell English', 'Noto Serif Bengali', 'Tiro Bangla', 'Old Standard TT', Georgia, serif;
--serif-display: 'IM Fell DW Pica', 'IM Fell English', 'Noto Serif Bengali', 'Tiro Bangla', 'Old Standard TT', Georgia, serif;
--blackletter: 'UnifrakturCook', 'Noto Serif Bengali', 'Tiro Bangla', 'IM Fell English', serif;
--bengali-body: 'Tiro Bangla', 'Noto Serif Bengali', 'Mina', 'Hind Siliguri', serif;
}
/* Explicit Bengali script coverage: any element with lang="bn" gets the
Bengali vintage stack so authors can tag individual paragraphs. */
[lang="bn"], [lang="bn-BD"], [lang="bn-IN"],
.bn, .bengali {
font-family: var(--bengali-body);
}
/* ---------- base ---------------------------------------------------------- */
html,
body {
background: #2b1d0f;
/* dark wood desk behind the paper */
color: var(--ink);
font-family: var(--serif-body);
font-size: 18px;
line-height: 1.65;
-webkit-font-smoothing: auto;
text-rendering: optimizeLegibility;
}
body::before {
/* Soft wood grain under the paper */
content: "";
position: fixed;
inset: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(70, 40, 15, .55), transparent 60%),
radial-gradient(ellipse at 80% 70%, rgba(40, 20, 5, .65), transparent 60%),
repeating-linear-gradient(92deg, rgba(0, 0, 0, .04) 0 2px, transparent 2px 6px),
#2b1d0f;
z-index: -2;
pointer-events: none;
}
/* ---------- the paper sheet ---------------------------------------------- */
.content-wrapper,
main.vn-container,
body > .container-fluid.px-0,
body > .container-fluid.p-0,
body > .container-fluid.p-0 > .row.g-0 {
position: relative;
max-width: 1180px;
margin: 24px auto 40px;
background: var(--paper);
/* Aged paper: fiber noise + vignette */
background-image:
radial-gradient(ellipse at 50% 0%, rgba(200, 170, 110, .25), transparent 60%),
radial-gradient(ellipse at 50% 100%, rgba(120, 80, 30, .35), transparent 55%),
radial-gradient(ellipse at 0% 40%, rgba(120, 80, 30, .25), transparent 50%),
url("data:image/svg+xml;utf8,");
background-size: auto, auto, auto, 600px 600px;
box-shadow:
0 0 0 1px rgba(60, 30, 10, .25),
0 2px 0 rgba(60, 30, 10, .18),
0 30px 60px rgba(0, 0, 0, .55),
inset 0 0 140px rgba(120, 70, 20, .28);
padding: 18px 44px 0;
/* Burned right edge via SVG mask (turbulence displacement) */
-webkit-mask-image:
url("data:image/svg+xml;utf8,");
mask-image:
url("data:image/svg+xml;utf8,");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* Char gradient on top of the burned edge */
.content-wrapper::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 120px;
pointer-events: none;
background:
linear-gradient(270deg,
rgba(20, 5, 0, .85) 0%,
rgba(60, 22, 6, .55) 22%,
rgba(122, 42, 10, .22) 45%,
rgba(122, 42, 10, .06) 70%,
transparent 100%);
z-index: 3;
mix-blend-mode: multiply;
}
/* Ember glow just inside the char line (subtle) */
.content-wrapper::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg,
rgba(255, 120, 30, .0) 0%,
rgba(255, 120, 30, .25) 30%,
rgba(255, 90, 20, .35) 55%,
rgba(255, 120, 30, .15) 85%,
rgba(255, 120, 30, .0) 100%);
filter: blur(1.4px);
z-index: 4;
pointer-events: none;
}
/* Scattered coffee stains — body-level pseudo elements */
body::after {
content: "";
position: fixed;
pointer-events: none;
inset: 0;
background:
radial-gradient(circle at 12% 18%, rgba(92, 52, 10, .12) 0 24px, transparent 26px),
radial-gradient(circle at 84% 72%, rgba(92, 52, 10, .10) 0 38px, transparent 40px),
radial-gradient(circle at 65% 12%, rgba(60, 30, 5, .09) 0 14px, transparent 16px);
mix-blend-mode: multiply;
z-index: -1;
}
/* ---------- typography ---------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: var(--serif-display);
color: var(--ink);
font-weight: 700;
letter-spacing: .01em;
text-shadow: 0 0 .5px rgba(25, 10, 0, .35);
}
h1,
.h1 {
font-size: 2.7rem;
line-height: 1.08;
}
h2,
.h2 {
font-size: 2.0rem;
line-height: 1.15;
}
h3,
.h3 {
font-size: 1.55rem;
}
a {
color: var(--accent-red);
text-decoration: none;
border-bottom: 1px dashed rgba(122, 22, 8, .35);
}
a:hover {
color: var(--edge-ember);
border-bottom-style: solid;
}
p {
margin-bottom: 1.1em;
hyphens: auto;
}
blockquote {
border-left: 4px double var(--ink);
padding: 6px 18px;
margin: 18px 10px;
font-style: italic;
color: var(--ink-soft);
background: rgba(200, 170, 110, .18);
}
hr,
.vn-rule {
border: 0;
height: 10px;
background-image:
linear-gradient(var(--ink), var(--ink)),
linear-gradient(var(--ink), var(--ink));
background-size: 100% 1px, 100% 1px;
background-position: 0 2px, 0 8px;
background-repeat: no-repeat;
margin: 18px 0;
}
/* ---------- masthead (the navbar becomes a nameplate) -------------------- */
header.sticky-header {
position: static !important;
z-index: auto;
}
.navbar.navbar-dark.bg-dark {
background: transparent !important;
border-top: 3px double var(--ink);
border-bottom: 1px solid var(--ink);
padding: 4px 0 2px !important;
box-shadow: none !important;
}
.navbar .navbar-brand,
.navbar .navbar-brand .site-title {
font-family: var(--blackletter) !important;
font-size: 2.6rem !important;
color: var(--ink) !important;
text-shadow: 1px 1px 0 rgba(80, 40, 10, .2);
letter-spacing: .02em;
}
.navbar .nav-link {
font-family: var(--serif-head) !important;
font-size: 1.05rem !important;
color: var(--ink) !important;
text-transform: uppercase;
letter-spacing: .12em;
border-bottom: 1px solid transparent;
padding: 8px 14px !important;
}
.navbar .nav-link.active,
.navbar .nav-link:hover {
color: var(--accent-red) !important;
border-bottom-color: var(--accent-red);
}
.navbar-toggler {
border-color: var(--ink) !important;
border-radius: 0;
}
.navbar-toggler-icon {
filter: invert(1) brightness(0);
}
.navbar .btn,
.vn-btn {
background: transparent;
color: var(--ink);
border: 2px solid var(--ink);
border-radius: 0;
font-family: var(--serif-head);
text-transform: uppercase;
letter-spacing: .1em;
padding: 6px 14px;
box-shadow: 2px 2px 0 rgba(40, 20, 5, .5);
transition: transform .05s ease, box-shadow .05s ease;
}
.navbar .btn:hover,
.vn-btn:hover {
background: var(--ink);
color: var(--paper);
}
.navbar .btn:active,
.vn-btn:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.navbar .btn.btn-primary {
background: var(--ink);
color: var(--paper);
}
/* Masthead extras — dateline row injected via nameplate wrapper */
.navbar .container {
display: flex;
flex-direction: column;
align-items: stretch;
position: relative;
}
.navbar .navbar-brand {
justify-content: center;
margin: 6px auto 2px;
}
.navbar .navbar-brand img {
display: inline-block;
}
/* logo shown separately in masthead */
.navbar .container::before {
content: "VOL. I • EST. 2024 • " attr(data-edition) " EDITION • PRICE: ONE ANNA";
display: block;
text-align: center;
font-family: var(--serif-body);
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .32em;
color: var(--ink-soft);
padding: 4px 0 2px;
border-bottom: 1px solid var(--ink);
}
.navbar .container::after {
content: "";
display: block;
height: 10px;
background:
linear-gradient(var(--ink), var(--ink)),
linear-gradient(var(--ink), var(--ink));
background-size: 100% 2px, 100% 1px;
background-position: 0 0, 0 6px;
background-repeat: no-repeat;
margin-top: 4px;
}
/* ---------- ticker ribbon ------------------------------------------------- */
.news-ticker-container {
background: var(--paper-dark) !important;
border-top: 1px solid var(--ink);
border-bottom: 2px solid var(--ink);
font-family: var(--serif-body);
position: relative;
}
.news-ticker-container::before {
content: "LATEST";
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
background: var(--accent-red);
color: var(--paper);
font-family: var(--serif-head);
font-weight: 700;
font-size: .8rem;
letter-spacing: .22em;
padding: 4px 10px;
border: 2px solid var(--ink);
box-shadow: 2px 2px 0 rgba(40, 20, 5, .4);
z-index: 2;
}
.news-ticker {
padding-left: 90px;
}
.news-ticker-item a {
color: var(--ink) !important;
font-family: var(--serif-body);
border-bottom: none !important;
}
.news-ticker-item i {
color: var(--accent-red) !important;
}
.current-time {
background: var(--paper) !important;
color: var(--ink) !important;
border-color: var(--ink) !important;
font-family: var(--serif-body) !important;
box-shadow: 2px 2px 0 rgba(40, 20, 5, .4) !important;
}
/* ---------- breaking news label in other pages --------------------------- */
.breaking-news {
background: var(--paper-dark) !important;
border-top: 1px solid var(--ink);
border-bottom: 2px solid var(--ink);
padding: 6px 0;
}
.breaking-news-label {
background: var(--accent-red);
color: var(--paper);
font-family: var(--serif-head);
font-weight: 700;
padding: 4px 12px;
border: 2px solid var(--ink);
margin-right: 14px;
text-transform: uppercase;
letter-spacing: .15em;
box-shadow: 2px 2px 0 rgba(40, 20, 5, .4);
}
/* ---------- cards & sections --------------------------------------------- */
.card,
.list-group,
.list-group-item {
background: transparent !important;
border-radius: 0 !important;
border-color: var(--ink) !important;
color: var(--ink);
}
.list-group-item-action:active,
.list-group-item-action.active {
background: rgba(122, 22, 8, .12) !important;
color: #7A1608 !important;
border-color: #7A1608 !important;
}
.list-group-item-action:active .badge,
.list-group-item-action.active .badge {
background: #7A1608 !important;
}
.card {
border: 1px solid var(--ink) !important;
box-shadow: 3px 3px 0 rgba(40, 20, 5, .35) !important;
background: rgba(241, 230, 200, .6) !important;
}
.card-header {
background: var(--ink) !important;
color: var(--paper) !important;
border-radius: 0 !important;
border-bottom: 3px double var(--paper) !important;
font-family: var(--serif-head);
text-transform: uppercase;
letter-spacing: .12em;
text-align: center;
}
.card-header h5,
.card-header .h5 {
color: var(--paper) !important;
}
.section-header h1,
.section-header h2 {
border-top: 3px double var(--ink);
border-bottom: 3px double var(--ink);
padding: 10px 0;
margin: 14px 0 18px;
text-align: center;
text-transform: uppercase;
letter-spacing: .06em;
}
/* ---------- article view -------------------------------------------------- */
article header h1 {
font-family: var(--serif-display);
font-size: 3.2rem;
line-height: 1.04;
text-align: center;
border-top: 5px double var(--ink);
border-bottom: 3px double var(--ink);
padding: 18px 0 14px;
margin: 8px 0 10px;
text-transform: uppercase;
letter-spacing: .02em;
}
article header .text-muted {
text-align: center;
font-family: var(--serif-body);
color: var(--ink-soft) !important;
font-style: italic;
font-size: 1rem;
border-bottom: 1px solid var(--ink);
padding-bottom: 8px;
margin-bottom: 18px;
}
article header .text-muted span {
margin: 0 10px;
}
.vn-article-body,
.news-content {
font-family: var(--serif-body);
font-size: 1.12rem;
line-height: 1.72;
color: var(--ink);
text-align: justify;
hyphens: auto;
column-count: 1;
column-gap: 30px;
column-rule: 1px solid rgba(40, 20, 5, .4);
}
@media (min-width: 900px) {
.vn-article-body,
.news-content {
column-count: 2;
}
}
.vn-article-body p:first-of-type::first-letter,
.news-content p:first-of-type::first-letter {
font-family: var(--blackletter);
float: left;
font-size: 5.2rem;
line-height: .82;
padding: 6px 8px 0 0;
color: var(--accent-red);
text-shadow: 2px 2px 0 rgba(60, 20, 5, .3);
}
.news-content img,
.vn-article-body img {
max-width: 100%;
height: auto;
filter: grayscale(.55) sepia(.45) contrast(1.05) brightness(.96);
border: 1px solid var(--ink);
padding: 6px;
background: var(--paper-dark);
box-shadow: 3px 3px 0 rgba(40, 20, 5, .4);
margin: 10px 0;
}
.news-image {
filter: grayscale(.55) sepia(.45) contrast(1.05) brightness(.96);
border: 1px solid var(--ink);
padding: 6px;
background: var(--paper-dark);
box-shadow: 3px 3px 0 rgba(40, 20, 5, .4);
}
/* Halftone overlay on images */
.news-content img::after {
content: "";
}
/* Figure captions */
figure,
.card-img-top {
filter: grayscale(.5) sepia(.45) contrast(1.05);
border: 1px solid var(--ink);
background: var(--paper-dark);
padding: 4px;
}
/* ---------- cards / listings (homepage + listing pages) ------------------ */
.news-card {
position: relative;
background: transparent !important;
border: 1px solid var(--ink) !important;
box-shadow: 3px 3px 0 rgba(40, 20, 5, .35) !important;
}
.news-card .card-title a {
color: var(--ink);
font-family: var(--serif-display);
}
.news-card .card-title a:hover {
color: var(--accent-red);
}
.news-card .badge.bg-primary,
.badge.bg-primary {
background: var(--ink) !important;
color: var(--paper) !important;
border-radius: 0;
font-family: var(--serif-head);
letter-spacing: .1em;
text-transform: uppercase;
padding: 4px 8px;
border: 1px solid var(--ink);
}
.badge.bg-secondary {
background: var(--ink-soft) !important;
border-radius: 0;
}
.badge.bg-info {
background: var(--accent-gold) !important;
color: var(--ink) !important;
border-radius: 0;
}
.badge.bg-success {
background: #3d5a2a !important;
border-radius: 0;
}
.badge.bg-warning {
background: #9a6b1a !important;
color: var(--paper) !important;
border-radius: 0;
}
.badge.bg-danger {
background: var(--accent-red) !important;
border-radius: 0;
}
/* ---------- buttons ------------------------------------------------------- */
.btn,
button.btn,
input[type=submit].btn {
border-radius: 0 !important;
font-family: var(--serif-head);
text-transform: uppercase;
letter-spacing: .12em;
border: 2px solid var(--ink) !important;
box-shadow: 3px 3px 0 rgba(40, 20, 5, .5);
transition: transform .05s, box-shadow .05s;
}
.btn:hover {
filter: brightness(.97);
}
.btn:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.btn-primary {
background: var(--ink) !important;
color: var(--paper) !important;
}
.btn-outline-primary {
background: transparent !important;
color: var(--ink) !important;
border-color: var(--ink) !important;
}
.btn-outline-primary:hover {
background: var(--ink) !important;
color: var(--paper) !important;
}
.btn-danger {
background: var(--accent-red) !important;
color: var(--paper) !important;
}
.btn-success {
background: #3d5a2a !important;
color: var(--paper) !important;
}
.btn-secondary {
background: var(--ink-soft) !important;
color: var(--paper) !important;
}
.btn-light {
background: var(--paper-dark) !important;
color: var(--ink) !important;
}
.btn-outline-light {
color: var(--ink) !important;
border-color: var(--ink) !important;
}
.btn-outline-light:hover {
background: var(--ink) !important;
color: var(--paper) !important;
}
/* ---------- forms --------------------------------------------------------- */
.form-control,
.form-select,
textarea.form-control,
input.form-control {
background: rgba(255, 250, 230, .55) !important;
border: 0 !important;
border-bottom: 2px dashed var(--ink) !important;
border-radius: 0 !important;
color: var(--ink) !important;
font-family: 'Courier New', 'IM Fell English', monospace;
box-shadow: none !important;
padding: 8px 6px !important;
}
.form-control:focus,
.form-select:focus {
outline: none;
border-bottom-color: var(--accent-red) !important;
background: rgba(255, 250, 230, .9) !important;
}
.form-label {
font-family: var(--serif-head);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--ink);
font-size: .9rem;
}
.input-group-text {
background: var(--ink) !important;
color: var(--paper) !important;
border-radius: 0 !important;
border-color: var(--ink) !important;
}
/* ---------- alerts -------------------------------------------------------- */
.alert {
border-radius: 0 !important;
border: 2px solid var(--ink) !important;
font-family: var(--serif-body);
box-shadow: 3px 3px 0 rgba(40, 20, 5, .4);
}
.alert-success {
background: rgba(61, 90, 42, .12) !important;
color: var(--ink) !important;
}
.alert-danger {
background: rgba(122, 22, 8, .12) !important;
color: var(--accent-red) !important;
border-color: var(--accent-red) !important;
}
.alert-info {
background: rgba(168, 131, 44, .14) !important;
color: var(--ink) !important;
}
.alert-warning {
background: rgba(154, 107, 26, .16) !important;
color: var(--ink) !important;
}
/* ---------- tables -------------------------------------------------------- */
.table {
border: 2px solid var(--ink);
background: rgba(255, 250, 230, .25);
color: var(--ink);
}
.table th,
.table td {
border: 1px solid var(--ink) !important;
padding: 8px 10px;
}
.table thead th {
background: var(--ink) !important;
color: var(--paper) !important;
font-family: var(--serif-head);
text-transform: uppercase;
letter-spacing: .1em;
}
.table-striped>tbody>tr:nth-of-type(odd)>*,
.table-hover>tbody>tr:hover>* {
--bs-table-accent-bg: rgba(200, 170, 110, .2) !important;
color: var(--ink) !important;
}
/* ---------- pagination ---------------------------------------------------- */
.pagination {
--bs-pagination-border-radius: 0;
gap: 6px;
}
.page-link {
background: transparent !important;
color: var(--ink) !important;
border: 1px solid var(--ink) !important;
border-radius: 0 !important;
font-family: var(--serif-head);
box-shadow: 2px 2px 0 rgba(40, 20, 5, .4);
}
.page-item.active .page-link {
background: var(--ink) !important;
color: var(--paper) !important;
}
/* ---------- footer -------------------------------------------------------- */
footer {
background: transparent !important;
color: var(--ink) !important;
border-top: 3px double var(--ink);
margin-top: 30px;
position: relative;
padding-top: 24px;
}
footer h5,
footer h6,
footer .text-white,
footer .text-white-50 {
color: var(--ink) !important;
}
footer a {
color: var(--accent-red) !important;
border-bottom: 1px dashed rgba(122, 22, 8, .35);
}
footer a:hover {
color: var(--edge-ember) !important;
}
footer .text-white-50 {
color: var(--ink-soft) !important;
}
footer hr.my-4 {
background: var(--ink) !important;
opacity: 1;
}
/* Torn paper edge at very bottom of the wrapper */
.content-wrapper::before,
.content-wrapper>footer::after {
pointer-events: none;
}
/* ---------- comment section ---------------------------------------------- */
#comments .card {
border: 1px solid var(--ink) !important;
background: rgba(255, 250, 230, .35) !important;
box-shadow: 3px 3px 0 rgba(40, 20, 5, .3) !important;
}
#comments .card-header {
background: var(--ink) !important;
color: var(--paper) !important;
}
#comments .card-subtitle {
color: var(--ink) !important;
}
/* ---------- admin area ---------------------------------------------------- */
.sidebar {
background: var(--paper-dark) !important;
border-right: 2px solid var(--ink);
}
.sidebar .nav-link {
color: var(--ink) !important;
font-family: var(--serif-head);
text-transform: uppercase;
letter-spacing: .08em;
border-radius: 0 !important;
border-bottom: 1px dashed rgba(40, 20, 5, .3);
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
background: var(--ink) !important;
color: var(--paper) !important;
}
.navbar.navbar-dark.bg-primary {
background: var(--ink) !important;
border: 0 !important;
}
.navbar.navbar-dark.bg-primary .navbar-brand,
.navbar.navbar-dark.bg-primary .nav-link {
color: var(--paper) !important;
font-family: var(--serif-head);
}
.card-dashboard {
background: var(--paper-dark) !important;
color: var(--ink) !important;
border: 1px solid var(--ink) !important;
box-shadow: 3px 3px 0 rgba(40, 20, 5, .5) !important;
}
.card-dashboard.bg-primary,
.card-dashboard.bg-success,
.card-dashboard.bg-warning,
.card-dashboard.bg-info {
color: var(--paper) !important;
}
.card-dashboard.bg-primary {
background: var(--ink) !important;
}
.card-dashboard.bg-success {
background: #3d5a2a !important;
}
.card-dashboard.bg-warning {
background: #9a6b1a !important;
}
.card-dashboard.bg-info {
background: var(--accent-gold) !important;
color: var(--ink) !important;
}
/* ---------- back-to-top button ------------------------------------------- */
#back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 52px;
height: 52px;
border-radius: 0 !important;
background: var(--ink) !important;
color: var(--paper) !important;
border: 2px solid var(--paper) !important;
box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 rgba(0, 0, 0, .5) !important;
display: none;
z-index: 1030;
font-size: 1.4rem;
}
#back-to-top.show {
display: flex;
align-items: center;
justify-content: center;
}
/* ---------- utilities ---------------------------------------------------- */
.vn-masthead {
font-family: var(--blackletter);
font-weight: 700;
}
.vn-serif-head {
font-family: var(--serif-head);
}
.vn-serif-body {
font-family: var(--serif-body);
}
.text-muted {
color: var(--ink-soft) !important;
}
/* ---------- Re-skinned Bootstrap utility classes ------------------------- *
Map Bootstrap's bright-blue bg-primary to our dark-brown ink so the site
stays monochrome. KEEP text-white actually white — it's used inside all
intentionally dark regions (admin navbar, dashboard cards, card headers,
footer). Overriding it to dark is what caused dark-on-dark invisibility. */
.bg-primary {
background: var(--ink) !important;
color: var(--paper) !important;
}
.bg-dark {
background: var(--ink) !important;
color: var(--paper) !important;
}
.bg-primary *,
.bg-dark * {
color: var(--paper);
}
.text-white,
.text-white * {
color: var(--paper) !important;
}
.text-white-50 {
color: rgba(241, 230, 200, 0.72) !important;
}
/* Force all headings inside dark regions to be paper-colored */
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary .h1, .bg-primary .h2, .bg-primary .h3,
.bg-primary .h4, .bg-primary .h5, .bg-primary .h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark .h1, .bg-dark .h2, .bg-dark .h3,
.bg-dark .h4, .bg-dark .h5, .bg-dark .h6 {
color: var(--paper) !important;
}
/* Dashboard stat cards: every descendant takes paper color */
.card-dashboard.bg-primary,
.card-dashboard.bg-success,
.card-dashboard.bg-warning,
.card-dashboard.bg-info,
.card-dashboard.bg-danger,
.card-dashboard.bg-dark {
color: var(--paper) !important;
}
.card-dashboard.bg-primary *, .card-dashboard.bg-success *,
.card-dashboard.bg-warning *, .card-dashboard.bg-info *,
.card-dashboard.bg-danger *, .card-dashboard.bg-dark * {
color: var(--paper) !important;
}
.shadow,
.shadow-sm,
.shadow-lg {
box-shadow: 3px 3px 0 rgba(40, 20, 5, .4) !important;
}
/* Stamp overlay helper */
.vn-stamp {
display: inline-block;
border: 3px double var(--accent-red);
color: var(--accent-red);
font-family: var(--serif-head);
text-transform: uppercase;
letter-spacing: .15em;
padding: 4px 10px;
transform: rotate(-4deg);
opacity: .85;
}
/* ---------- small screens ------------------------------------------------ */
@media (max-width: 767px) {
.content-wrapper,
main.vn-container {
margin: 0;
padding: 10px 18px 0;
/* Disable the burned-edge mask on small screens — the turbulence
clip crops the right side too aggressively on narrow viewports. */
-webkit-mask-image: none;
mask-image: none;
box-shadow:
0 0 0 1px rgba(60, 30, 10, .25),
0 8px 20px rgba(0, 0, 0, .45),
inset 0 0 80px rgba(120, 70, 20, .22);
}
.content-wrapper::after,
.content-wrapper::before {
display: none;
}
.navbar .navbar-brand,
.navbar .navbar-brand .site-title {
font-size: 1.9rem !important;
}
article header h1 {
font-size: 2.1rem;
}
.news-content,
.vn-article-body {
column-count: 1;
}
}
/* ---------- print --------------------------------------------------------- */
@media print {
body {
background: #fff;
}
.content-wrapper {
box-shadow: none;
background: #fff;
-webkit-mask-image: none;
mask-image: none;
}
.content-wrapper::before,
.content-wrapper::after,
body::before,
body::after {
display: none;
}
.navbar,
.sidebar,
#back-to-top,
footer form,
.pagination {
display: none !important;
}
}
/* ============================================================ *
* SHIP-IT PATCH — Ship-it polish pass
* ============================================================ */
/* ---------- Disable drop cap for Bengali content -----------
* Bengali script uses combining marks and conjunct clusters; applying
* CSS ::first-letter to a Bengali paragraph picks either a stray vowel
* mark or half a conjunct and renders it in UnifrakturCook — visually
* broken. Disable the drop cap when the article or ancestor is Bengali.
*/
[lang="bn"] .vn-article-body p:first-of-type::first-letter,
.bn .vn-article-body p:first-of-type::first-letter,
.bengali .vn-article-body p:first-of-type::first-letter,
.vn-article-body[lang="bn"] p:first-of-type::first-letter,
[lang="bn"] .news-content p:first-of-type::first-letter,
[lang="bn"] article p:first-of-type::first-letter {
float: none !important;
font-size: inherit !important;
line-height: inherit !important;
padding: 0 !important;
margin: 0 !important;
color: inherit !important;
font-family: inherit !important;
background: none !important;
}
/* ---------- Figcaption styling ----------
* Italic, smaller, centered, with a small rule above — classic newspaper
* photo caption treatment.
*/
figure {
margin: 1.5rem auto;
max-width: 100%;
text-align: center;
}
figure img {
display: block;
margin: 0 auto;
max-width: 100%;
box-shadow: 3px 3px 0 rgba(40, 20, 5, .35);
border: 1px solid var(--ink);
padding: 4px;
background: var(--paper-dark);
}
figcaption,
figure figcaption {
display: block;
margin-top: .5rem;
padding-top: .5rem;
border-top: 1px solid var(--ink-faded);
font-family: var(--serif-body);
font-style: italic;
font-size: .9rem;
color: var(--ink-soft);
line-height: 1.4;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
/* ---------- Column rule between homepage story cards ----------
* Real broadsheets have thin vertical rules separating columns. We can't
* do this on the Bootstrap row-of-cards directly (gutters interfere), so
* we fake it with a right-border on every non-last card in the row.
*/
@media (min-width: 768px) {
.news-card-column {
position: relative;
}
.news-card-column:not(:last-child)::after {
content: '';
position: absolute;
top: 8%;
right: -0.5rem;
bottom: 8%;
width: 1px;
background: repeating-linear-gradient(
to bottom,
var(--ink-faded) 0,
var(--ink-faded) 4px,
transparent 4px,
transparent 7px
);
pointer-events: none;
}
}
/* ---------- "-30-" end-of-story marker ----------
* In old US newspaper tradition, -30- at the end of a story meant "end
* of copy". Apply via a CSS generated content rule to the last paragraph
* of any article body.
*/
.vn-article-body::after,
.news-content::after,
article .post-body::after {
content: '— 30 —';
display: block;
text-align: center;
font-family: var(--serif-head);
font-size: 1.1rem;
letter-spacing: .3em;
color: var(--ink-faded);
margin: 2.5rem auto 1rem;
padding-top: 1rem;
border-top: 3px double var(--ink-faded);
max-width: 120px;
}
/* ---------- Halftone dot overlay for images ----------
* Real vintage newspaper photos are printed as halftone dot patterns.
* Apply a subtle SVG pattern over images in article bodies. Combine with
* the existing sepia+grayscale filter for the full effect.
*/
.vn-article-body img,
.news-content img,
article .post-body img,
.post-featured-image img {
filter: grayscale(.45) sepia(.35) contrast(1.05);
position: relative;
}
.vn-article-body figure,
.news-content figure {
position: relative;
}
.vn-article-body figure::before,
.news-content figure::before {
content: '';
position: absolute;
inset: 4px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 3px 3px;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 2;
opacity: .55;
}
/* ---------- Login / error page vintage theming ---------- */
.vintage-auth-page {
min-height: 100vh;
background:
radial-gradient(ellipse at center, transparent 0%, rgba(40, 20, 5, .35) 100%),
var(--paper);
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
font-family: var(--serif-body);
color: var(--ink);
}
.vintage-auth-card {
max-width: 460px;
width: 100%;
background: var(--paper);
border: 2px solid var(--ink);
padding: 40px 36px;
position: relative;
box-shadow:
4px 4px 0 rgba(40, 20, 5, .5),
inset 0 0 60px rgba(80, 40, 10, .1);
}
.vintage-auth-card::before {
content: '';
position: absolute;
top: 6px; left: 6px; right: 6px; bottom: 6px;
border: 1px solid var(--ink-faded);
pointer-events: none;
}
.vintage-auth-masthead {
font-family: var(--blackletter);
font-size: 2.2rem;
text-align: center;
color: var(--ink);
border-top: 3px double var(--ink);
border-bottom: 3px double var(--ink);
padding: 10px 0;
margin-bottom: 24px;
text-shadow: 1px 1px 0 rgba(80, 40, 10, .25);
}
.vintage-auth-title {
font-family: var(--serif-head);
font-size: 1.3rem;
text-align: center;
text-transform: uppercase;
letter-spacing: .15em;
margin: 0 0 20px;
color: var(--ink-soft);
}
.vintage-auth-card .form-label {
font-family: var(--serif-head);
text-transform: uppercase;
letter-spacing: .12em;
font-size: .85rem;
font-weight: 700;
color: var(--ink);
margin-bottom: .25rem;
}
.vintage-auth-card .form-control {
background: #fffaf0;
border: 1px solid var(--ink);
border-radius: 0;
font-family: var(--serif-body);
padding: 10px 12px;
box-shadow: inset 2px 2px 0 rgba(40, 20, 5, .08);
}
.vintage-auth-card .form-control:focus {
outline: 2px solid var(--accent-gold);
border-color: var(--ink);
box-shadow: inset 2px 2px 0 rgba(40, 20, 5, .12);
}
.vintage-auth-card .btn-primary,
.vintage-auth-card .btn-vintage {
display: block;
width: 100%;
background: var(--ink);
color: var(--paper);
border: 2px solid var(--ink);
border-radius: 0;
font-family: var(--serif-head);
text-transform: uppercase;
letter-spacing: .15em;
padding: 12px;
font-weight: 700;
box-shadow: 3px 3px 0 rgba(40, 20, 5, .5);
transition: transform .08s, box-shadow .08s;
}
.vintage-auth-card .btn-primary:hover,
.vintage-auth-card .btn-vintage:hover {
background: var(--accent-red);
border-color: var(--accent-red);
}
.vintage-auth-card .btn-primary:active {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 rgba(40, 20, 5, .5);
}
.vintage-auth-links {
text-align: center;
margin-top: 20px;
font-size: .9rem;
font-family: var(--serif-body);
}
.vintage-auth-links a {
color: var(--accent-red);
text-decoration: underline;
text-underline-offset: 2px;
}
.vintage-auth-alert {
border: 1px solid var(--accent-red);
background: rgba(122, 22, 8, .08);
color: var(--accent-red);
padding: 10px 14px;
font-family: var(--serif-body);
margin-bottom: 16px;
font-style: italic;
}
/* Error page big number */
.vintage-error-number {
font-family: var(--blackletter);
font-size: 8rem;
line-height: 1;
text-align: center;
color: var(--accent-red);
text-shadow: 4px 4px 0 rgba(40, 20, 5, .3);
margin: 0;
}
.vintage-error-stamp {
display: inline-block;
border: 3px solid var(--accent-red);
color: var(--accent-red);
padding: 6px 18px;
font-family: var(--serif-head);
text-transform: uppercase;
letter-spacing: .25em;
font-weight: 700;
transform: rotate(-4deg);
margin: 16px 0;
background: rgba(122, 22, 8, .05);
}
/* ==========================================================================
ADMIN PANEL PAPER SHEET
--------------------------------------------------------------------------
The public site uses the burned-edge broadsheet effect, but admin pages
need a simpler, full-width paper background. The admin layout is:
========================================================================== */
/* Cancel the centered-broadsheet sheet for admin pages */
body.admin-page > .container-fluid.p-0,
body > .container-fluid.p-0 {
max-width: none !important;
margin: 0 !important;
background: transparent !important;
-webkit-mask-image: none !important;
mask-image: none !important;
box-shadow: none !important;
padding: 0 !important;
}
body > .container-fluid.p-0::before,
body > .container-fluid.p-0::after {
display: none !important;
}
/* Give admin main content area the aged-paper background instead */
.main-content {
background: var(--paper) !important;
background-image:
radial-gradient(ellipse at 50% 0%, rgba(200, 170, 110, .20), transparent 60%),
radial-gradient(ellipse at 50% 100%, rgba(120, 80, 30, .22), transparent 55%),
url("data:image/svg+xml;utf8,");
background-size: auto, auto, 600px 600px;
color: var(--ink) !important;
min-height: 100vh;
padding: 24px 32px !important;
box-shadow: inset 4px 0 12px rgba(40, 20, 5, .15);
}
/* Sidebar in admin — darker aged paper */
.sidebar {
background: var(--paper-dark) !important;
background-image:
linear-gradient(180deg, rgba(60, 30, 10, .08), transparent 30%),
url("data:image/svg+xml;utf8,");
background-size: auto, 400px 400px;
border-right: 1px solid var(--ink-faded);
color: var(--ink) !important;
box-shadow: 2px 0 6px rgba(40, 20, 5, .2);
}
.sidebar .nav-link {
color: var(--ink) !important;
font-family: var(--serif-head);
text-transform: uppercase;
font-size: .85rem;
letter-spacing: .08em;
font-weight: 600;
padding: 10px 18px !important;
margin: 3px 10px !important;
border-radius: 0 !important;
border-left: 3px solid transparent;
}
.sidebar .nav-link:hover {
background: rgba(40, 20, 5, .08) !important;
color: var(--accent-red) !important;
border-left-color: var(--accent-red);
}
.sidebar .nav-link.active {
background: var(--ink) !important;
color: var(--paper) !important;
border-left-color: var(--accent-gold);
}
.sidebar .nav-link i {
color: inherit !important;
}
/* Admin page headings — make sure they're readable, with a subtle hue */
.main-content h1,
.main-content h2,
.main-content .h2,
.main-content .h1 {
color: var(--ink) !important;
font-family: var(--serif-display) !important;
border-bottom: 3px double var(--ink-faded);
padding-bottom: 10px;
margin-bottom: 20px;
letter-spacing: .02em;
}
/* Admin cards — aged vellum, not white */
.main-content .card {
background: #fffaf0 !important;
border: 1px solid var(--ink-faded) !important;
border-radius: 0 !important;
box-shadow: 3px 3px 0 rgba(40, 20, 5, .25) !important;
}
.main-content .card-header {
background: var(--paper-dark) !important;
border-bottom: 1px solid var(--ink-faded) !important;
color: var(--ink) !important;
font-family: var(--serif-head);
text-transform: uppercase;
letter-spacing: .08em;
}
.main-content .card-header h5,
.main-content .card-header .h5 {
color: var(--ink) !important;
}
/* Admin tables */
.main-content .table {
background: transparent;
color: var(--ink);
font-family: var(--serif-body);
}
.main-content .table th {
font-family: var(--serif-head);
text-transform: uppercase;
letter-spacing: .08em;
font-size: .85rem;
background: var(--paper-dark);
color: var(--ink);
border-color: var(--ink-faded);
}
.main-content .table td {
border-color: rgba(60, 30, 10, .15);
color: var(--ink);
vertical-align: middle;
}
.main-content .table-hover tbody tr:hover {
background: rgba(60, 30, 10, .05);
}
/* Admin form inputs — typewriter-ready */
.main-content .form-control,
.main-content .form-select {
background: #fffaf0 !important;
border: 1px solid var(--ink-faded) !important;
border-radius: 0 !important;
color: var(--ink) !important;
font-family: Georgia, serif;
}
.main-content .form-control:focus,
.main-content .form-select:focus {
outline: 2px solid var(--accent-gold);
border-color: var(--ink) !important;
box-shadow: none !important;
}
.main-content .form-label {
font-family: var(--serif-head);
text-transform: uppercase;
font-size: .85rem;
letter-spacing: .1em;
color: var(--ink);
font-weight: 700;
}
/* Admin alerts — vintage warning stamps */
.main-content .alert {
border-radius: 0 !important;
border-width: 2px;
font-family: var(--serif-body);
}
.main-content .alert-success {
background: #e8f0d8 !important;
border-color: #4a7c2a !important;
color: #2a4a10 !important;
}
.main-content .alert-danger {
background: #f5e0dc !important;
border-color: var(--accent-red) !important;
color: var(--accent-red) !important;
}
.main-content .alert-info {
background: #e3d3ab !important;
border-color: var(--ink-faded) !important;
color: var(--ink) !important;
}
.main-content .alert-warning {
background: #f5ecc8 !important;
border-color: #a8832c !important;
color: #5a3d10 !important;
}
/* Buttons inside admin */
.main-content .btn {
border-radius: 0 !important;
font-family: var(--serif-head);
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 700;
}
.main-content .btn-primary,
.main-content .btn-dark {
background: var(--ink) !important;
border: 2px solid var(--ink) !important;
color: var(--paper) !important;
box-shadow: 3px 3px 0 rgba(40, 20, 5, .4);
}
.main-content .btn-primary:hover,
.main-content .btn-dark:hover {
background: var(--accent-red) !important;
border-color: var(--accent-red) !important;
}
.main-content .btn-primary:active,
.main-content .btn-dark:active {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 rgba(40, 20, 5, .4);
}
.main-content .btn-outline-primary,
.main-content .btn-outline-secondary,
.main-content .btn-outline-dark {
background: transparent;
border: 2px solid var(--ink) !important;
color: var(--ink) !important;
}
.main-content .btn-outline-primary:hover,
.main-content .btn-outline-secondary:hover,
.main-content .btn-outline-dark:hover {
background: var(--ink) !important;
color: var(--paper) !important;
}
/* Modals in admin — the outer Add/Edit Post modal, not Summernote dialogs */
.modal-content {
background: var(--paper) !important;
border: 2px solid var(--ink) !important;
border-radius: 0 !important;
box-shadow: 8px 8px 0 rgba(40, 20, 5, .5) !important;
color: var(--ink);
}
.modal-header {
background: var(--paper-dark) !important;
border-bottom: 1px solid var(--ink-faded) !important;
color: var(--ink);
}
.modal-title {
font-family: var(--serif-display) !important;
color: var(--ink) !important;
font-weight: 700;
letter-spacing: .04em;
}
.modal-body {
background: var(--paper) !important;
color: var(--ink);
}
.modal-footer {
background: var(--paper-dark) !important;
border-top: 1px solid var(--ink-faded) !important;
}
/* Admin top navbar — paper color to match */
body > .navbar.navbar-dark.bg-dark {
background: var(--ink) !important;
border-bottom: 3px double var(--accent-gold);
}
body > .navbar.navbar-dark.bg-dark .navbar-brand,
body > .navbar.navbar-dark.bg-dark .nav-link {
color: var(--paper) !important;
font-family: var(--serif-head);
letter-spacing: .06em;
}
body > .navbar.navbar-dark.bg-dark .navbar-brand {
font-family: var(--blackletter);
font-size: 1.6rem;
}