/* ============================================================ DIASPORA WEALTH ACADEMY — ARTICLE TEMPLATE STYLES (v1.0) ============================================================ Locked template stylesheet for ALL articles. Every article on the site uses these classes. Load order in : 1. dwa-tokens.css 2. dwa-components.css 3. dwa-article.css ← this file ============================================================ */ /* ────────────────────────────────────────────────────────── ARTICLE HERO (editorial-style, white background) ────────────────────────────────────────────────────────── */ .article-hero { background: var(--dwa-white); padding: var(--dwa-space-16) 0 var(--dwa-space-10); border-bottom: 1px solid var(--dwa-border-soft); } .article-hero__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--dwa-space-5); } .article-hero__eyebrow { display: inline-block; font-family: var(--dwa-font-body); font-size: var(--dwa-text-xs); font-weight: 700; letter-spacing: var(--dwa-tracking-wider); text-transform: uppercase; color: var(--dwa-gold); margin-bottom: var(--dwa-space-5); } .article-hero__title { font-family: var(--dwa-font-display); font-weight: 400; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.15; color: var(--dwa-navy); margin: 0 0 var(--dwa-space-6); letter-spacing: -0.01em; } .article-hero__title em { font-style: italic; color: var(--dwa-navy); } .article-hero__standfirst { font-family: var(--dwa-font-display); font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.5; color: var(--dwa-gray); margin: 0 0 var(--dwa-space-8); max-width: 640px; } .article-hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dwa-space-3); font-family: var(--dwa-font-body); font-size: var(--dwa-text-sm); color: var(--dwa-gray); margin-bottom: var(--dwa-space-5); } .article-hero__meta strong { color: var(--dwa-navy); font-weight: 600; } .article-hero__meta-dot { color: var(--dwa-gold); font-weight: 700; } .article-hero__disclosure { font-family: var(--dwa-font-body); font-style: italic; font-size: var(--dwa-text-sm); color: var(--dwa-gray); padding: var(--dwa-space-4) 0 0; border-top: 1px solid var(--dwa-border-soft); } .article-hero__disclosure a { color: var(--dwa-navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--dwa-gold); text-underline-offset: 3px; } .article-hero__disclosure a:hover { color: var(--dwa-gold); } /* ────────────────────────────────────────────────────────── HERO IMAGE (between hero and body) ────────────────────────────────────────────────────────── */ .article-hero-image { background: var(--dwa-white); padding: 0 0 var(--dwa-space-10); } .article-hero-image__inner { max-width: 900px; margin: 0 auto; padding: 0 var(--dwa-space-5); } .article-hero-image img { width: 100%; height: auto; border-radius: var(--dwa-radius); display: block; } .article-hero-image__caption { font-family: var(--dwa-font-body); font-style: italic; font-size: var(--dwa-text-sm); color: var(--dwa-gray); margin-top: var(--dwa-space-3); text-align: center; } /* ────────────────────────────────────────────────────────── ARTICLE BODY (Fraunces for long-form reading) ────────────────────────────────────────────────────────── */ .article-body-wrap { background: var(--dwa-white); padding: var(--dwa-space-6) 0 var(--dwa-space-16); } .article-body { max-width: 680px; margin: 0 auto; padding: 0 var(--dwa-space-5); font-family: var(--dwa-font-display); font-weight: 400; font-size: 1.125rem; line-height: 1.75; color: var(--dwa-charcoal); } .article-body > p { margin: 0 0 var(--dwa-space-6); } .article-body > p em { font-style: italic; color: var(--dwa-navy); } .article-body strong { color: var(--dwa-navy); font-weight: 600; } .article-body a { color: var(--dwa-navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--dwa-gold); text-underline-offset: 3px; } .article-body a:hover { color: var(--dwa-gold); } /* Drop cap on first paragraph */ .article-body > p:first-child::first-letter { font-family: var(--dwa-font-display); font-weight: 600; font-size: 4.5rem; line-height: 1; color: var(--dwa-navy); float: left; padding: 0.5rem var(--dwa-space-3) 0 0; margin-top: 0.15rem; } /* Headings within article body */ .article-body h2 { font-family: var(--dwa-font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.25; color: var(--dwa-navy); margin: var(--dwa-space-12) 0 var(--dwa-space-4); letter-spacing: -0.01em; } .article-body h2:first-child { margin-top: 0; } .article-body h3 { font-family: var(--dwa-font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.3; color: var(--dwa-navy); margin: var(--dwa-space-8) 0 var(--dwa-space-3); } /* Section ornament — three centered dots between major sections */ .article-body .section-ornament { text-align: center; margin: var(--dwa-space-10) 0; color: var(--dwa-gold); font-family: var(--dwa-font-display); font-size: 1.5rem; letter-spacing: 0.5em; user-select: none; } /* Pull quote — large editorial style with rules */ .article-body .pull-quote { font-family: var(--dwa-font-display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.85rem); line-height: 1.4; color: var(--dwa-navy); text-align: center; margin: var(--dwa-space-12) 0; padding: var(--dwa-space-8) var(--dwa-space-5); border-top: 1px solid var(--dwa-border-medium); border-bottom: 1px solid var(--dwa-border-medium); position: relative; } .article-body .pull-quote::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--dwa-gold); } /* Lists within article body */ .article-body ol, .article-body ul { margin: var(--dwa-space-5) 0 var(--dwa-space-6) 0; padding-left: var(--dwa-space-8); } .article-body ol li, .article-body ul li { margin-bottom: var(--dwa-space-3); line-height: 1.65; padding-left: var(--dwa-space-2); } .article-body ol li::marker { color: var(--dwa-gold); font-weight: 600; } .article-body ul li::marker { color: var(--dwa-gold); } /* ────────────────────────────────────────────────────────── SHARE COMPONENT ────────────────────────────────────────────────────────── */ .share-box { max-width: 680px; margin: var(--dwa-space-12) auto 0; padding: var(--dwa-space-8) var(--dwa-space-5); text-align: center; border-top: 1px solid var(--dwa-border-soft); } .share-box__label { font-family: var(--dwa-font-body); font-size: var(--dwa-text-sm); font-weight: 600; letter-spacing: var(--dwa-tracking-wide); text-transform: uppercase; color: var(--dwa-navy); margin-bottom: var(--dwa-space-2); } .share-box__sub { font-family: var(--dwa-font-display); font-style: italic; font-size: var(--dwa-text-sm); color: var(--dwa-gray); margin-bottom: var(--dwa-space-6); } .share-buttons { display: flex; gap: var(--dwa-space-3); justify-content: center; flex-wrap: wrap; } .share-btn { display: inline-flex; align-items: center; gap: var(--dwa-space-2); padding: var(--dwa-space-3) var(--dwa-space-5); background: var(--dwa-white); border: 1px solid var(--dwa-border); border-radius: var(--dwa-radius); color: var(--dwa-navy); font-size: var(--dwa-text-sm); font-weight: 600; text-decoration: none; transition: var(--dwa-transition); cursor: pointer; font-family: var(--dwa-font-body); } .share-btn:hover { border-color: var(--dwa-gold); transform: translateY(-1px); box-shadow: var(--dwa-shadow-sm); } .share-btn svg { width: 18px; height: 18px; } .share-btn--whatsapp:hover svg { fill: #25D366; } .share-btn--facebook:hover svg { fill: #1877F2; } .share-btn--copy.copied { background: var(--dwa-gold-pale); border-color: var(--dwa-gold); } /* ────────────────────────────────────────────────────────── AUTHOR BIO ────────────────────────────────────────────────────────── */ .author-bio { max-width: 680px; margin: var(--dwa-space-10) auto 0; padding: var(--dwa-space-8) var(--dwa-space-5); display: flex; gap: var(--dwa-space-6); align-items: flex-start; border-top: 1px solid var(--dwa-border-soft); } .author-bio__avatar { flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--dwa-radius-circle); background: var(--dwa-navy); display: flex; align-items: center; justify-content: center; color: var(--dwa-gold); font-family: var(--dwa-font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; } .author-bio__content { flex: 1; } .author-bio__label { font-family: var(--dwa-font-body); font-size: var(--dwa-text-xs); font-weight: 700; letter-spacing: var(--dwa-tracking-wider); text-transform: uppercase; color: var(--dwa-gold); margin: 0 0 var(--dwa-space-1); } .author-bio__name { font-family: var(--dwa-font-display); font-weight: 600; font-size: var(--dwa-text-lg); color: var(--dwa-navy); margin: 0 0 var(--dwa-space-2); } .author-bio__text { font-family: var(--dwa-font-body); font-size: var(--dwa-text-sm); line-height: 1.6; color: var(--dwa-gray); margin: 0; } @media (max-width: 540px) { .author-bio { flex-direction: column; gap: var(--dwa-space-4); align-items: flex-start; } } /* ────────────────────────────────────────────────────────── ARTICLE LEAD MAGNET (lighter than landing-page version) ────────────────────────────────────────────────────────── */ .article-leadmagnet { background: var(--dwa-cream); padding: var(--dwa-space-12) 0; border-top: 1px solid var(--dwa-border-soft); border-bottom: 1px solid var(--dwa-border-soft); } .article-leadmagnet__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--dwa-space-5); text-align: center; } .article-leadmagnet__eyebrow { display: inline-block; font-family: var(--dwa-font-body); font-size: var(--dwa-text-xs); font-weight: 700; letter-spacing: var(--dwa-tracking-wider); text-transform: uppercase; color: var(--dwa-gold); margin-bottom: var(--dwa-space-4); } .article-leadmagnet__title { font-family: var(--dwa-font-display); font-weight: 400; font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height: 1.2; color: var(--dwa-navy); margin: 0 0 var(--dwa-space-4); } .article-leadmagnet__title em { font-style: italic; } .article-leadmagnet__body { font-family: var(--dwa-font-display); font-size: 1.1rem; line-height: 1.7; color: var(--dwa-charcoal); margin: 0 auto var(--dwa-space-8); max-width: 560px; } .article-leadmagnet__finepright { font-family: var(--dwa-font-body); font-style: italic; font-size: var(--dwa-text-xs); color: var(--dwa-gray); margin-top: var(--dwa-space-4); } /* ────────────────────────────────────────────────────────── RELATED READING ────────────────────────────────────────────────────────── */ .article-related { background: var(--dwa-white); padding: var(--dwa-space-16) 0; } .article-related__inner { max-width: 900px; margin: 0 auto; padding: 0 var(--dwa-space-5); } .article-related__header { text-align: center; margin-bottom: var(--dwa-space-10); } .article-related__eyebrow { display: inline-block; font-family: var(--dwa-font-body); font-size: var(--dwa-text-xs); font-weight: 700; letter-spacing: var(--dwa-tracking-wider); text-transform: uppercase; color: var(--dwa-gold); margin-bottom: var(--dwa-space-3); } .article-related__title { font-family: var(--dwa-font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--dwa-navy); margin: 0; } /* ────────────────────────────────────────────────────────── EDUCATIONAL DISCLAIMER (article footer) ────────────────────────────────────────────────────────── */ .article-disclaimer { background: var(--dwa-gray-light); padding: var(--dwa-space-8) 0; } .article-disclaimer__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--dwa-space-5); font-family: var(--dwa-font-body); font-size: var(--dwa-text-sm); line-height: 1.6; color: var(--dwa-gray); } .article-disclaimer__inner strong { color: var(--dwa-navy); font-weight: 600; }