Add Insights blog section with two founding articles
- Create articles/ directory with hub index page (newest-first card grid) - Add Article 1: "Why We Built HOA LedgerIQ" (March 16, 2026, founder story) - Add Article 2: "5 Financial Blind Spots Putting Your HOA at Risk" (April 1, 2026, use case) - Both articles include screenshot carousel, article CTA, prev/next nav, and full SEO meta - Add blog/article CSS to styles.css (hub hero, card grid, article prose, showcase, CTA) - Add "Insights" nav link to index.html, reserve-study-software.html, investment-management.html - Add "Insights" to footer Pages column on all pages (index.html gets a Pages column added) - Add articles/ pages to sitemap.xml with appropriate priorities and lastmod dates Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
318
styles.css
318
styles.css
@@ -1298,3 +1298,321 @@ body {
|
||||
.calc-wrapper { padding: 24px 20px; }
|
||||
.strategy-card { padding: 24px; }
|
||||
}
|
||||
|
||||
/* ======================================================
|
||||
INSIGHTS / BLOG
|
||||
====================================================== */
|
||||
|
||||
/* ── Active nav link ─────────────────────────────────── */
|
||||
.nav-active {
|
||||
color: var(--blue) !important;
|
||||
}
|
||||
|
||||
/* ── Insights Hub Hero ───────────────────────────────── */
|
||||
.insights-hub-hero {
|
||||
background: var(--gray-900);
|
||||
padding: 5rem 0 3.5rem;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.insights-hub-hero h1 {
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.025em;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.insights-hub-hero p {
|
||||
font-size: 1.05rem;
|
||||
color: var(--gray-400);
|
||||
max-width: 580px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.insights-grid-section { padding: 4rem 0 5rem; }
|
||||
|
||||
/* ── Article Cards Grid ──────────────────────────────── */
|
||||
.article-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.75rem;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background: var(--gray-800);
|
||||
border: 1px solid rgba(255,255,255,0.07);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.9rem;
|
||||
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.article-card:hover {
|
||||
border-color: rgba(37,99,235,0.45);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.article-card-tag {
|
||||
display: inline-block;
|
||||
background: rgba(79,70,229,0.15);
|
||||
color: var(--blue);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.25rem 0.7rem;
|
||||
border-radius: 100px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.article-card-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 1.35;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.article-card-excerpt {
|
||||
font-size: 0.93rem;
|
||||
color: var(--gray-400);
|
||||
line-height: 1.7;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.article-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
font-size: 0.78rem;
|
||||
color: var(--gray-400);
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.article-card-meta-dot {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
background: var(--gray-600);
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.article-card-read-more {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
color: var(--blue);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: gap 0.2s;
|
||||
}
|
||||
.article-card-read-more:hover { gap: 0.6rem; }
|
||||
|
||||
/* ── Article Page Header ─────────────────────────────── */
|
||||
.article-header {
|
||||
background: var(--gray-900);
|
||||
padding: 4.5rem 0 3rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.article-header .container { max-width: 800px; }
|
||||
|
||||
.article-breadcrumb { padding-bottom: 1.5rem; }
|
||||
.article-breadcrumb a {
|
||||
color: var(--gray-400);
|
||||
font-size: 0.85rem;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.article-breadcrumb a:hover { color: var(--blue); }
|
||||
|
||||
.article-tag {
|
||||
display: inline-block;
|
||||
background: rgba(79,70,229,0.15);
|
||||
color: var(--blue);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.25rem 0.7rem;
|
||||
border-radius: 100px;
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: clamp(1.65rem, 4vw, 2.6rem);
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.article-subtitle {
|
||||
font-size: 1.05rem;
|
||||
color: var(--gray-400);
|
||||
line-height: 1.7;
|
||||
max-width: 640px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--gray-400);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.article-meta-author { font-weight: 600; color: var(--gray-200); }
|
||||
.article-meta-separator {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
background: var(--gray-600);
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Article Prose Body ──────────────────────────────── */
|
||||
.article-body-section { padding: 3.5rem 0; }
|
||||
.article-body-section .container { max-width: 800px; }
|
||||
|
||||
.article-prose { max-width: 720px; margin: 0 auto; }
|
||||
|
||||
.article-prose p {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.85;
|
||||
color: var(--gray-200);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.article-prose h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin: 2.75rem 0 1rem;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
.article-prose h3 {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin: 2rem 0 0.75rem;
|
||||
}
|
||||
.article-prose ul {
|
||||
margin: 0 0 1.5rem 0;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.article-prose li {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.8;
|
||||
color: var(--gray-200);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.article-prose blockquote {
|
||||
border-left: 3px solid var(--blue);
|
||||
padding: 0.75rem 1.5rem;
|
||||
margin: 2rem 0;
|
||||
background: rgba(37,99,235,0.07);
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
.article-prose blockquote p {
|
||||
font-size: 1.05rem;
|
||||
font-style: italic;
|
||||
color: var(--gray-100);
|
||||
margin: 0;
|
||||
}
|
||||
.article-prose strong { color: #fff; font-weight: 600; }
|
||||
.article-prose em { color: var(--gray-100); }
|
||||
|
||||
.article-prose .highlight-box {
|
||||
background: rgba(37,99,235,0.06);
|
||||
border: 1px solid rgba(37,99,235,0.2);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.25rem 1.5rem;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.article-prose .highlight-box p { margin: 0; font-size: 0.98rem; }
|
||||
|
||||
/* ── Article Screenshot Showcase ─────────────────────── */
|
||||
.article-showcase {
|
||||
background: var(--gray-800);
|
||||
border-top: 1px solid rgba(255,255,255,0.06);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
padding: 4rem 0;
|
||||
}
|
||||
.article-showcase-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.article-showcase-header h2 {
|
||||
font-size: 1.65rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.article-showcase-header p {
|
||||
color: var(--gray-400);
|
||||
font-size: 0.95rem;
|
||||
max-width: 540px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ── Article CTA ─────────────────────────────────────── */
|
||||
.article-cta {
|
||||
background: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(79,70,229,0.08) 100%);
|
||||
border-top: 1px solid rgba(37,99,235,0.18);
|
||||
border-bottom: 1px solid rgba(37,99,235,0.18);
|
||||
padding: 4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
.article-cta h2 {
|
||||
font-size: 1.65rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.article-cta p {
|
||||
color: var(--gray-400);
|
||||
font-size: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
max-width: 480px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.article-cta-note {
|
||||
font-size: 0.8rem;
|
||||
color: var(--gray-600);
|
||||
margin-top: 1.1rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ── Responsive ──────────────────────────────────────── */
|
||||
@media (max-width: 768px) {
|
||||
.article-grid { grid-template-columns: 1fr; }
|
||||
|
||||
.insights-hub-hero { padding: 3rem 0 2.25rem; }
|
||||
.insights-hub-hero h1 { font-size: 1.75rem; }
|
||||
|
||||
.article-header { padding: 3rem 0 2rem; }
|
||||
.article-title { font-size: 1.6rem; }
|
||||
|
||||
.article-prose { padding: 0; }
|
||||
.article-prose h2 { font-size: 1.3rem; margin-top: 2rem; }
|
||||
.article-prose p, .article-prose li { font-size: 1rem; }
|
||||
|
||||
.article-meta { gap: 0.5rem; }
|
||||
|
||||
.article-showcase { padding: 2.5rem 0; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user