/* =================================================================
SAMATULYA — ARTICLE PAGE STYLES
articles.css
HOW TO USE FOR A NEW ARTICLE:
1. Add
...
...
================================================================= */
/* -----------------------------------------------------------------
PAGE WRAPPER
----------------------------------------------------------------- */
.article-page {
padding: 20px 0 60px;
}
/* -----------------------------------------------------------------
BREADCRUMB NAV
Usage:
Articles
/
Article Title
----------------------------------------------------------------- */
.article-breadcrumb {
font-size: 13px;
color: #888;
margin-bottom: 24px;
}
.article-breadcrumb a {
color: #996600;
text-decoration: none;
font-weight: 500;
}
.article-breadcrumb a:hover {
text-decoration: underline;
}
.article-breadcrumb span {
margin: 0 4px;
}
/* -----------------------------------------------------------------
HERO BANNER
Usage:
Category • Author
Title
Subtitle
----------------------------------------------------------------- */
.article-hero {
position: relative;
border-radius: 8px;
overflow: hidden;
margin-bottom: 40px;
border-bottom: 5px solid #996600;
}
.article-hero img {
width: 100%;
height: 340px;
object-fit: cover;
display: block;
}
.article-hero-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 28px 32px;
background: linear-gradient(transparent, rgba(36, 62, 86, 0.88));
color: white;
}
.article-category {
font-size: 12px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #ffcc00;
margin: 0 0 8px;
}
.article-hero-overlay h1 {
font-size: 32px;
font-weight: 700;
margin: 0 0 8px;
line-height: 1.2;
}
.article-subtitle {
font-size: 15px;
font-weight: 400;
opacity: 0.85;
margin: 0;
}
/* -----------------------------------------------------------------
ARTICLE BODY
Centered, readable column — wraps all blocks.
Usage: ...
----------------------------------------------------------------- */
.article-body {
max-width: 780px;
margin: 0 auto;
}
/* -----------------------------------------------------------------
ARTICLE SECTION
Usage:
Section Heading
Body text...
----------------------------------------------------------------- */
.article-section {
margin-bottom: 40px;
}
.article-section h2 {
font-size: 24px;
font-weight: 700;
color: #243e56;
margin-bottom: 16px;
border-left: 4px solid #996600;
padding-left: 14px;
}
.article-section p {
font-size: 15px;
line-height: 1.85;
color: #444;
margin-bottom: 14px;
}
/* -----------------------------------------------------------------
INTRO NOTE (italic lead-in above a list of items)
Usage: ...
----------------------------------------------------------------- */
.article-intro-note {
font-size: 14px;
color: #777;
font-style: italic;
border-left: 3px solid #ddd;
padding-left: 14px;
margin-bottom: 28px;
}
/* -----------------------------------------------------------------
PULL QUOTE / BLOCKQUOTE
Usage:
Sanskrit / main line
Transliteration English meaning
Modifier .article-quote--closing — centred, top+bottom border,
used as the closing flourish of the article.
----------------------------------------------------------------- */
.article-quote {
background: #f9f3e8;
border-left: 4px solid #996600;
padding: 20px 24px;
border-radius: 0 6px 6px 0;
margin: 24px 0;
font-size: 15px;
line-height: 1.9;
color: #443322;
}
.article-quote__primary {
font-size: 18px;
font-weight: 600;
color: #243e56;
display: block;
margin-bottom: 6px;
}
/* legacy alias kept for backward compatibility */
.article-quote .sanskrit {
font-size: 18px;
font-weight: 600;
color: #243e56;
display: block;
margin-bottom: 6px;
}
.article-quote--closing {
text-align: center;
border-left: none;
border-top: 3px solid #996600;
border-bottom: 3px solid #996600;
border-radius: 6px;
font-size: 17px;
padding: 28px 24px;
margin-top: 32px;
}
/* -----------------------------------------------------------------
HORIZONTAL DIVIDER (thin warm-toned rule between sections)
Usage:
Verse 1
Original script text
Transliteration
Meaning
In simple terms: ...
----------------------------------------------------------------- */
.verse-block {
background: #fafafa;
border: 1px solid #e8e0d4;
border-radius: 8px;
padding: 28px 28px 20px;
margin-bottom: 28px;
}
/* Small pill label — "Verse 1", "Shloka 3", etc. */
.verse-label {
display: inline-block;
background: #243e56;
color: #ffcc00;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
/* legacy alias */
.verse-number {
display: inline-block;
background: #243e56;
color: #ffcc00;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.verse-original,
.verse-sanskrit {
font-size: 16px;
line-height: 2;
color: #243e56;
font-weight: 500;
margin-bottom: 10px;
}
.verse-roman {
font-size: 13px;
line-height: 2;
color: #666;
margin-bottom: 18px;
padding-left: 12px;
border-left: 2px solid #ddd;
}
.verse-meaning {
background: white;
border-radius: 6px;
padding: 18px 20px;
border: 1px solid #efe8dd;
}
.verse-meaning h4 {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #996600;
margin: 0 0 12px;
}
.verse-meaning ul {
margin: 0 0 14px;
padding-left: 20px;
}
.verse-meaning ul li {
font-size: 14px;
line-height: 1.75;
color: #444;
margin-bottom: 6px;
}
.verse-explanation {
font-size: 14px;
line-height: 1.8;
color: #555;
background: #f4f0e8;
border-radius: 4px;
padding: 14px 16px;
margin: 0;
}
/* -----------------------------------------------------------------
INSIGHT CARDS GRID
Use for a 2-column grid of key takeaway cards at the end
of a section (e.g. "Core Teachings", "Key Concepts").
Usage:
🧠
Card Title
Card body text.
...
----------------------------------------------------------------- */
.insight-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 24px;
}
.insight-card {
background: white;
border: 1px solid #e8e0d4;
border-top: 3px solid #996600;
border-radius: 8px;
padding: 22px 20px;
}
.insight-icon {
font-size: 28px;
margin-bottom: 10px;
}
.insight-card h3 {
font-size: 15px;
font-weight: 700;
color: #243e56;
margin: 0 0 8px;
}
.insight-card p {
font-size: 13px;
line-height: 1.7;
color: #666;
margin: 0;
}
/* legacy aliases — used in nirvana-shatakam.html */
.teaching-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 24px;
}
.teaching-card {
background: white;
border: 1px solid #e8e0d4;
border-top: 3px solid #996600;
border-radius: 8px;
padding: 22px 20px;
}
.teaching-icon {
font-size: 28px;
margin-bottom: 10px;
}
.teaching-card h3 {
font-size: 15px;
font-weight: 700;
color: #243e56;
margin: 0 0 8px;
}
.teaching-card p {
font-size: 13px;
line-height: 1.7;
color: #666;
margin: 0;
}
/* =================================================================
RESPONSIVE
================================================================= */
@media (max-width: 768px) {
.article-hero img {
height: 220px;
}
.article-hero-overlay h1 {
font-size: 22px;
}
.insight-grid,
.teaching-grid {
grid-template-columns: 1fr;
}
.verse-block {
padding: 18px 16px 14px;
}
}
