/**
* Spark + Stone — Article Design System
* Based on: bramblett-capital-gain-ordinary-income.html
* Usage:
* Drop at end of , before any page-specific overrides.
* Always pair with nav.js + footer.js at bottom of .
*
* Fonts required (add to ):
*
*/
/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Design Tokens ──────────────────────────────────────────── */
:root {
/* Backgrounds */
--a-bg: #f7f5f0;
--a-bg-secondary: #efece4;
--a-bg-card: #ffffff;
--a-bg-highlight: #f0ebe0;
--a-bg-input: #e8e4d8;
/* Text */
--a-text: #2a2e25;
--a-text-2: #5a5f52;
--a-text-muted: #8a8e80;
/* Accents */
--a-sage: #7A8C6E;
--a-sage-dark: #556350;
--a-sage-light: #9aac8e;
--a-coral: #C97B5A;
--a-coral-light: #d99a7e;
--a-gold: #e8d5a0;
--a-gold-dim: #c4b484;
--a-cap-green: #7a9c6e;
--a-ord-red: #c97b5a;
--a-neutral-blue: #6e8a9c;
/* Borders */
--a-border: #d9d4c7;
/* Header background (per-article override via inline style or subclass) */
--a-header-bg: #788A6C;
}
/* ── Base ───────────────────────────────────────────────────── */
body {
background: var(--a-bg);
color: var(--a-text);
font-family: 'DM Sans', 'Poppins', sans-serif;
font-weight: 400;
line-height: 1.75;
font-size: 17px;
-webkit-font-smoothing: antialiased;
}
a { color: var(--a-sage-dark); text-decoration: none; }
a:hover { color: var(--a-coral); text-decoration: underline; }
/* ── Article Header ─────────────────────────────────────────── */
.article-header {
position: relative;
padding: 80px 24px 60px;
background: var(--a-header-bg, #788A6C);
border-bottom: 1px solid var(--a-border);
overflow: hidden;
}
.article-header::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 500px 300px at 15% 85%, rgba(255,255,255,0.08) 0%, transparent 70%),
radial-gradient(ellipse 400px 350px at 85% 15%, rgba(255,255,255,0.05) 0%, transparent 70%);
pointer-events: none;
}
.header-inner {
max-width: 780px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.brand-tag {
font-size: 11px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--a-gold);
margin-bottom: 28px;
}
.brand-tag span { color: var(--a-coral-light); }
.article-header h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(28px, 4.5vw, 42px);
font-weight: 700;
line-height: 1.22;
color: #fdfcf8;
margin-bottom: 24px;
letter-spacing: -0.4px;
}
.subtitle {
font-size: 17px;
color: rgba(253,252,248,0.8);
line-height: 1.7;
max-width: 640px;
font-weight: 300;
}
.meta-line {
margin-top: 32px;
font-size: 13px;
color: rgba(253,252,248,0.6);
font-weight: 500;
}
.meta-line .dot {
display: inline-block;
width: 4px; height: 4px;
background: var(--a-sage);
border-radius: 50%;
margin: 0 12px;
vertical-align: middle;
}
/* ── Article Body ───────────────────────────────────────────── */
.article-body {
max-width: 780px;
margin: 0 auto;
padding: 56px 24px 80px;
}
.article-body h2 {
font-family: 'Playfair Display', serif;
font-size: 26px;
font-weight: 600;
color: var(--a-text);
margin: 56px 0 20px;
letter-spacing: -0.3px;
}
.article-body h2:first-of-type { margin-top: 0; }
.article-body h3 {
font-family: 'DM Sans', sans-serif;
font-size: 18px;
font-weight: 600;
color: var(--a-gold-dim);
margin: 32px 0 12px;
}
.article-body p {
margin-bottom: 20px;
color: var(--a-text-2);
}
.article-body strong { color: var(--a-text); font-weight: 600; }
.section-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--a-coral);
margin-bottom: 12px;
margin-top: 60px;
}
/* ── Pull Quote ─────────────────────────────────────────────── */
.pullquote {
border-left: 3px solid var(--a-coral);
padding: 24px 28px;
margin: 36px 0;
background: var(--a-bg-card);
border-radius: 0 8px 8px 0;
}
.pullquote p {
font-family: 'Playfair Display', serif;
font-size: 20px;
line-height: 1.55;
color: var(--a-text);
margin: 0;
}
/* ── Highlight / Callout Box ────────────────────────────────── */
.highlight-box {
background: var(--a-bg-card);
border: 1px solid var(--a-border);
border-radius: 10px;
padding: 28px;
margin: 36px 0;
}
.highlight-box .box-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--a-sage);
margin-bottom: 16px;
}
/* ── Two-Column Compare ─────────────────────────────────────── */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 36px 0;
}
@media (max-width: 600px) { .two-col { grid-template-columns: 1fr; } }
.col-card {
background: var(--a-bg-card);
border: 1px solid var(--a-border);
border-radius: 10px;
padding: 24px;
border-top: 3px solid var(--a-cap-green);
}
.col-card.ord { border-top-color: var(--a-ord-red); }
.col-card .col-title {
font-family: 'Playfair Display', serif;
font-size: 18px;
font-weight: 600;
margin-bottom: 14px;
}
.col-card .col-title.cap { color: var(--a-cap-green); }
.col-card .col-title.ord { color: var(--a-ord-red); }
.col-card ul { list-style: none; padding: 0; }
.col-card li {
position: relative;
padding-left: 18px;
margin-bottom: 10px;
color: var(--a-text-2);
font-size: 15px;
line-height: 1.55;
}
.col-card li::before {
content: '';
position: absolute;
left: 0; top: 9px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--a-text-muted);
}
/* ── Comparison Table ───────────────────────────────────────── */
.comp-table-wrap {
margin: 40px 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.comp-table {
width: 100%;
min-width: 580px;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
}
.comp-table thead th {
background: var(--a-bg-highlight);
color: var(--a-gold-dim);
font-weight: 600;
font-size: 12px;
letter-spacing: 1.2px;
text-transform: uppercase;
padding: 14px 16px;
text-align: left;
border-bottom: 2px solid var(--a-sage-dark);
}
.comp-table thead th:first-child { border-radius: 8px 0 0 0; }
.comp-table thead th:last-child { border-radius: 0 8px 0 0; }
.comp-table tbody td {
padding: 14px 16px;
border-bottom: 1px solid var(--a-border);
color: var(--a-text-2);
vertical-align: top;
line-height: 1.55;
}
.comp-table tbody tr:last-child td { border-bottom: none; }
.comp-table tbody td:first-child {
font-weight: 600;
color: var(--a-text);
white-space: nowrap;
font-size: 13px;
}
.comp-table .cell-cap { color: var(--a-cap-green); font-weight: 600; }
.comp-table .cell-ord { color: var(--a-ord-red); font-weight: 600; }
.comp-table .cell-mixed { color: var(--a-neutral-blue); font-weight: 600; }
/* ── Takeaways ──────────────────────────────────────────────── */
.takeaways {
background: var(--a-bg-secondary);
border: 1px solid #c8d2b8;
border-radius: 12px;
padding: 36px 32px 28px;
margin: 52px 0 24px;
}
.takeaways .box-label {
font-family: 'Playfair Display', serif;
font-size: 20px;
font-weight: 600;
color: var(--a-gold-dim);
margin-bottom: 24px;
}
.takeaway-item {
display: flex;
gap: 16px;
margin-bottom: 20px;
align-items: flex-start;
}
.takeaway-num {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 6px;
background: #f5e9c8;
color: #2a2e25;
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.takeaway-text { color: var(--a-text-2); line-height: 1.6; font-size: 16px; }
.takeaway-text strong { color: var(--a-text); }
/* ── CTA Block ──────────────────────────────────────────────── */
.cta-block {
text-align: center;
margin-top: 56px;
padding: 36px 28px;
background: var(--a-bg-secondary);
border: 1px solid var(--a-border);
border-radius: 10px;
}
.cta-block p { font-size: 15px; color: var(--a-text-muted); margin-bottom: 8px; }
.cta-block .cta-name {
font-family: 'Playfair Display', serif;
font-size: 20px;
color: var(--a-gold-dim);
font-weight: 600;
margin-bottom: 6px;
}
.cta-block .cta-sub { font-size: 14px; color: var(--a-text-muted); }
.cta-block .cta-link {
display: inline-block;
margin-top: 20px;
padding: 11px 28px;
background: #4a5940;
color: #fdfcf8;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
border-radius: 4px;
text-decoration: none;
transition: background 0.2s;
}
.cta-block .cta-link:hover { background: #a07830; text-decoration: none; }
/* ── Article Footer / Disclaimer ───────────────────────────── */
.article-footer {
max-width: 780px;
margin: 0 auto;
padding: 0 24px 60px;
}
.disclaimer {
border-top: 1px solid var(--a-border);
padding-top: 24px;
font-size: 13px;
color: var(--a-text-muted);
line-height: 1.7;
}
/* ── Key Stat / Data Card ───────────────────────────────────── */
.stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
margin: 36px 0;
}
.stat-card {
background: var(--a-bg-card);
border: 1px solid var(--a-border);
border-radius: 10px;
padding: 20px;
text-align: center;
}
.stat-num {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 600;
color: var(--a-sage-dark);
line-height: 1;
margin-bottom: 6px;
}
.stat-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--a-text-muted);
margin-bottom: 6px;
}
.stat-desc {
font-size: 13px;
color: var(--a-text-2);
line-height: 1.55;
}
/* ── Warning / Alert Box ────────────────────────────────────── */
.alert-box {
background: rgba(201,123,90,0.07);
border: 1px solid rgba(201,123,90,0.3);
border-left: 3px solid var(--a-coral);
border-radius: 0 8px 8px 0;
padding: 20px 24px;
margin: 32px 0;
}
.alert-box .alert-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--a-coral);
margin-bottom: 8px;
}
.alert-box p { font-size: 14px; color: var(--a-text-2); margin: 0; }
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
.article-header { padding: 56px 20px 44px; }
.article-body { padding: 40px 20px 60px; }
.highlight-box,
.takeaways { padding: 24px 20px; }
.pullquote { padding: 20px 22px; }
.stat-row { grid-template-columns: 1fr 1fr; }
}
/* ── Dark Mode Overrides (article system) ───────────────────── */
body.dark-mode {
--a-bg: #191e16;
--a-bg-secondary: #232a1e;
--a-bg-card: #2a3224;
--a-bg-highlight: #333d2c;
--a-text: #edf0ea;
--a-text-2: #c4d4bc;
--a-text-muted: #8a9577;
--a-border: #4a5940;
--a-gold-dim: #e8d5a0;
}
body.dark-mode .pullquote { background: var(--a-bg-card); }
body.dark-mode .highlight-box { background: var(--a-bg-card); }
body.dark-mode .comp-table thead th { background: var(--a-bg-highlight); }
body.dark-mode .comp-table tbody td { border-bottom-color: var(--a-border); }
body.dark-mode .col-card { background: var(--a-bg-card); border-color: var(--a-border); }
body.dark-mode .flow-node { background: var(--a-bg-card); border-color: var(--a-border); }
body.dark-mode .takeaways { background: var(--a-bg-secondary); border-color: var(--a-border); }
body.dark-mode .cta-block { background: var(--a-bg-secondary); border-color: var(--a-border); }
body.dark-mode .stat-card { background: var(--a-bg-card); border-color: var(--a-border); }
body.dark-mode a:not([style]) { color: var(--a-gold-dim); }