/* ================================================================ common.css — Unified Design System Merged from page stylesheet A (inner pages) & B (home/hero) ================================================================ */ /* ── Google Fonts (add to your if not already imported) ── ─────────────────────────────────────────────────────────────── */ /* ── 1. Design Tokens ─────────────────────────────────────────── */ :root { --navy: #0A2A4A; --teal: #006B6B; --teal-lt: #007E7E; --teal-pale: #D6F0F0; --gold: #9A6E10; --off: #F2F6FA; --muted: #3E566A; --bd: #B8CCDC; } /* ── 2. Global Reset ──────────────────────────────────────────── */ *, *::before, *::after { border-radius: 0 !important; } body { font-family: 'STIX Two Text', Georgia, serif; background: var(--off); color: #0E2030; } h1, h2, h3, h4, h5 { font-family: 'STIX Two Text', serif; } .font-sans { font-family: 'Source Sans 3', sans-serif; } /* ── 3. Background Utilities ──────────────────────────────────── */ .bg-navy { background-color: var(--navy) !important; } .bg-teal { background-color: var(--teal) !important; } .bg-gold { background-color: var(--gold) !important; } .bg-off { background-color: var(--off) !important; } .bg-teal-pale { background-color: var(--teal-pale) !important; } /* ── 4. Text Color Utilities ──────────────────────────────────── */ .text-navy { color: var(--navy) !important; } .text-teal { color: var(--teal) !important; } .text-gold { color: var(--gold) !important; } .text-muted-custom{ color: var(--muted) !important; } .text-slate { color: #9DBDD4; } .text-light-blue { color: #6A9AB5; } .text-dim { color: #4A7A9A; } .text-mono { font-family: 'Courier New', monospace; } /* ── 5. Border Utilities ──────────────────────────────────────── */ .border-teal { border-color: var(--teal) !important; } .border-bd { border-color: var(--bd) !important; } .border-top-teal { border-top: 3px solid var(--teal) !important; } .border-top-gold { border-top: 3px solid var(--gold) !important; } .border-top-navy { border-top: 3px solid var(--navy) !important; } /* ── 6. Section Badge ─────────────────────────────────────────── */ .badge-section { font-family: 'Source Sans 3', sans-serif; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; } .badge-section::before { content: ''; display: block; width: 20px; height: 2px; background: currentColor; flex-shrink: 0; } /* ── 7. Hero Sections ─────────────────────────────────────────── */ /* Home / full hero (class: #hero) */ #hero { background: linear-gradient(135deg, #0D3354 0%, #0A2A4A 60%, #0B3A3A 100%); } .hero-eyebrow { font-family: 'Source Sans 3', sans-serif; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: #D4A840; display: flex; align-items: center; gap: 10px; } .hero-eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: #D4A840; } /* Inner-page / shorter hero (id: #page-hero) */ #page-hero { background: linear-gradient(135deg, #0D3354 0%, #0A2A4A 60%, #0B3A3A 100%); } .breadcrumb-custom { font-family: 'Source Sans 3', sans-serif; font-size: 14px; color: #6A9AB5; } .breadcrumb-custom a { color: #9DBDD4; text-decoration: none; } .breadcrumb-custom a:hover { color: #fff; } .breadcrumb-custom .sep { margin: 0 8px; opacity: .4; } /* Journal cover image */ .journal-cover-img { width: 210px; height: 297px; object-fit: cover; object-position: top; display: block; box-shadow: 0 10px 44px rgba(0,0,0,.65), 0 2px 10px rgba(0,0,0,.35); } /* ── 8. News Bar ──────────────────────────────────────────────── */ .news-bar { background: #E0F4F4; border-top: 2px solid #90CECE; border-bottom: 2px solid #90CECE; } .news-label { font-family: 'Source Sans 3', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--teal); color: #fff; padding: 11px 18px; white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; } .news-date { font-family: 'Source Sans 3', sans-serif; font-size: 13px; font-weight: 700; color: var(--teal); padding: 11px 16px; white-space: nowrap; flex-shrink: 0; border-right: 1px solid #90CECE; display: flex; align-items: center; } .news-text { font-family: 'Source Sans 3', sans-serif; font-size: 15px; font-weight: 600; color: var(--navy); padding: 11px 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; display: flex; align-items: center; } .news-text:hover { color: var(--teal); text-decoration: underline; } /* ── 9. Navigation Bar ────────────────────────────────────────── */ .journal-nav a { font-family: 'Source Sans 3', sans-serif; font-size: 15px; font-weight: 600; color: var(--navy); padding: 9px 17px; border-left: 1px solid var(--bd); text-decoration: none; display: inline-block; } .journal-nav a:first-child { border-left: none; } .journal-nav a:hover, .journal-nav a.active { background: var(--off); color: var(--teal); } .journal-nav .btn-submit { background: var(--teal); color: #fff; margin-left: 14px; border-left: none !important; } .journal-nav .btn-submit:hover { background: var(--teal-lt); } /* ── 10. Sidebar Sticky Nav ───────────────────────────────────── */ .sidebar-nav { position: sticky; top: 24px; } .sidebar-nav .nav-link { font-family: 'Source Sans 3', sans-serif; font-size: 15px; font-weight: 600; color: var(--muted); padding: 10px 16px; border-left: 2px solid var(--bd); text-decoration: none; display: block; transition: color .15s, border-color .15s, background .15s; } .sidebar-nav .nav-link:hover { color: var(--teal); border-left-color: var(--teal); background: #EAF5F5; } .sidebar-nav .nav-link.active { color: var(--teal); border-left-color: var(--teal); background: var(--teal-pale); font-weight: 700; } .content-section { scroll-margin-top: 24px; } /* ── 11. Prose / Article Typography ──────────────────────────── */ .prose p { font-size: 17px; line-height: 1.85; color: #1A3040; margin-bottom: 1.2rem; } .prose h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-top: 2rem; margin-bottom: .75rem; } .prose strong { color: var(--navy); } .pull-quote { border-left: 3px solid var(--teal); background: var(--teal-pale); font-family: 'STIX Two Text', serif; font-style: italic; font-size: 17px; line-height: 1.8; color: var(--navy); } /* ── 12. Stat Block ───────────────────────────────────────────── */ .stat-val { font-family: 'STIX Two Text', serif; font-size: 36px; font-weight: 700; color: var(--teal); line-height: 1; } .stat-lbl { font-family: 'Source Sans 3', sans-serif; font-size: 13px; color: var(--muted); margin-top: 4px; } /* ── 13. Table ────────────────────────────────────────────────── */ .tpm-table { width: 100%; border-collapse: collapse; font-family: 'Source Sans 3', sans-serif; font-size: 15px; } .tpm-table thead th { background: var(--navy); color: #fff; padding: 10px 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; border: none; } .tpm-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--bd); color: #1A3040; vertical-align: top; } .tpm-table tbody tr:hover td { background: #EAF5F5; } .tpm-table tbody tr:last-child td { border-bottom: none; } /* ── 14. Buttons ──────────────────────────────────────────────── */ .btn-teal { background: var(--teal); color: #fff; font-family: 'Source Sans 3', sans-serif; font-weight: 700; letter-spacing: .05em; border: none; } .btn-teal:hover { background: var(--teal-lt); color: #fff; } .btn-gold { background: var(--gold); color: #fff; font-family: 'Source Sans 3', sans-serif; font-weight: 700; letter-spacing: .05em; border: none; } .btn-gold:hover { background: #7A5508; color: #fff; } .btn-outline-navy { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); font-family: 'Source Sans 3', sans-serif; font-weight: 700; } .btn-outline-navy:hover { background: var(--navy); color: #fff; } .btn-outline-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.42); font-family: 'Source Sans 3', sans-serif; } .btn-outline-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); color: #fff; } /* ── 15. Links ────────────────────────────────────────────────── */ .link-teal { color: var(--teal); font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 15px; border-bottom: 1.5px solid var(--teal); text-decoration: none; } .link-teal:hover { color: var(--teal-lt); } /* ── 16. List ─────────────────────────────────────────────────── */ .inv-list { list-style: none; padding: 0; margin: 0; } .inv-list li { font-family: 'Source Sans 3', sans-serif; font-size: 16px; padding: 5px 0; } .inv-list li::before { content: '▪'; color: var(--teal); margin-right: 8px; } /* ── 17. Icon Box ─────────────────────────────────────────────── */ .info-icon { width: 38px; height: 38px; background: var(--teal-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── 18. Footer ───────────────────────────────────────────────── */ footer { background: var(--navy); color: #7AAABF; } footer a { color: #6A9AB5; text-decoration: none; } footer a:hover { color: #fff; } footer h5 { font-family: 'Source Sans 3', sans-serif; font-size: 13px; letter-spacing: .13em; text-transform: uppercase; color: #fff; } footer ul { list-style: none; padding-left: 0; } footer ul li { margin-bottom: 10px; } /* ── Markdown── */ .prose table { width: 100%; border-collapse: collapse; font-family: 'Source Sans 3', sans-serif; font-size: 15px; margin-bottom: 1.2rem; } .prose table thead th { background: var(--navy); color: #fff; padding: 10px 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; } .prose table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--bd); color: #1A3040; vertical-align: top; } .prose table tbody tr:hover td { background: #EAF5F5; } .prose table tbody tr:last-child td { border-bottom: none; } .prose blockquote { border-left: 3px solid var(--teal); background: var(--teal-pale); font-family: 'STIX Two Text', serif; font-style: italic; font-size: 17px; line-height: 1.8; color: var(--navy); padding: 1rem 1.25rem; margin: 1.5rem 0; } .prose blockquote p { margin-bottom: 0; } .prose ul { list-style: none; padding: 0; margin-bottom: 1.2rem; } .prose ul li { font-family: 'Source Sans 3', sans-serif; font-size: 16px; padding: 5px 0; } .prose ul li::before { content: '▪'; color: var(--teal); margin-right: 8px; } .prose ol { padding-left: 1.5rem; margin-bottom: 1.2rem; } .prose ol li { font-family: 'Source Sans 3', sans-serif; font-size: 16px; padding: 3px 0; color: #1A3040; } .prose h2 { font-size: 26px; font-weight: 700; color: var(--navy); margin-bottom: 1rem; } .prose h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-top: 1.5rem; margin-bottom: .75rem; } .prose a { color: var(--teal); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--teal); } .prose a:hover { color: var(--teal-lt); } .prose code { font-family: 'Courier New', monospace; font-size: 14px; background: var(--teal-pale); color: var(--navy); padding: 1px 6px; } .prose hr { border: none; border-top: 1px solid var(--bd); margin: 2rem 0; } /* ── Global Loading Overlay ───────────────────────────────────── */ #tpm-loading { display: none; position: fixed; inset: 0; background: rgba(10, 42, 74, 0.45); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(2px); } #tpm-loading-card { background: #fff; padding: 24px 32px; display: flex; align-items: center; gap: 14px; border-top: 3px solid var(--teal); box-shadow: 0 8px 32px rgba(10, 42, 74, 0.18); } #tpm-loading-card span { font-family: 'Source Sans 3', sans-serif; font-size: 15px; font-weight: 600; color: var(--navy); white-space: nowrap; } @keyframes tpm-spin { to { transform: rotate(360deg); } } #tpm-loading-spinner { animation: tpm-spin 0.8s linear infinite; flex-shrink: 0; } /* ── Mobile Nav Patch ─────────────────────────────────────────── */ @media (max-width: 991px) { .journal-nav a { border-left: none !important; border-top: 1px solid var(--bd); padding: 11px 16px; display: block; width: 100%; } .journal-nav .btn-submit { margin-left: 0; margin-top: 8px; text-align: center; } }