/*
* US Energy Data Platform — shared styles
* Aesthetic: IFP-inspired — Lora serif headings, charcoal darks, white background
* Load in every topic page :
*
*
*/
* { box-sizing: border-box; }
body {
font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
margin: 0;
padding: 0;
background: #fff;
color: #373737;
line-height: 1.6;
}
/* ── Site header ── */
.site-header {
background: #373737;
padding: 0 60px;
position: relative;
z-index: 200;
}
.site-header-content {
max-width: 1440px;
margin: 0 auto;
display: flex;
align-items: stretch;
height: 64px;
}
.site-title {
color: #fff;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.site-title-text {
display: flex;
flex-direction: column;
line-height: 1;
}
.site-title-name {
font-family: 'DM Sans', sans-serif;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
color: #fff;
}
.site-title-sub {
font-family: 'DM Sans', sans-serif;
font-size: 9px;
font-weight: 300;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-top: 4px;
}
/* ── Nav ── */
.site-nav {
display: flex;
align-items: stretch;
margin-left: auto;
}
/* Direct-child links only — not dropdown items */
.site-nav > a {
color: rgba(255,255,255,0.82);
text-decoration: none;
font-family: 'DM Sans', sans-serif;
font-size: 15px;
font-weight: 300;
display: flex;
align-items: center;
padding: 0 18px;
border-bottom: 2px solid transparent;
transition: color 0.16s;
white-space: nowrap;
}
.site-nav > a:hover { color: #fff; border-bottom-color: #1B55A5; }
.site-nav > a.active {
color: #fff;
font-weight: 500;
border-bottom: 2px solid #1B55A5;
}
/* ── Topics dropdown ── */
.nav-topics-wrap {
position: relative;
display: flex;
align-items: stretch;
}
.nav-topics-btn {
/* full reset */
appearance: none; -webkit-appearance: none;
margin: 0; padding: 0 18px;
background: none; border: none; border-bottom: 2px solid transparent;
outline: none; cursor: pointer;
/* layout */
display: flex; align-items: center; gap: 6px;
height: 100%;
/* type */
font-family: 'DM Sans', sans-serif;
font-size: 15px; font-weight: 300;
color: rgba(255,255,255,0.82);
white-space: nowrap;
transition: color 0.16s;
}
.nav-topics-btn:hover,
.nav-topics-btn.open { color: #fff; border-bottom-color: #1B55A5; }
.nav-topics-btn.active {
color: #fff; font-weight: 500;
border-bottom: 2px solid #1B55A5;
}
.nav-topics-btn svg { transition: transform 0.15s; opacity: 0.5; flex-shrink: 0; }
.nav-topics-btn.open svg { transform: rotate(180deg); }
.nav-topics-dropdown {
display: none;
position: absolute;
top: 100%; left: 0;
background: #2c2c2c;
border: 1px solid rgba(255,255,255,0.08);
border-top: none;
min-width: 210px;
z-index: 300;
padding: 6px 0;
}
.nav-topics-dropdown.open { display: block; }
.nav-topics-dropdown a {
display: block;
padding: 10px 20px;
color: rgba(255,255,255,0.65);
font-family: 'DM Sans', sans-serif;
font-size: 14px; font-weight: 300;
text-decoration: none;
transition: color 0.12s, background 0.12s;
white-space: nowrap;
}
.nav-topics-dropdown a:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.05); }
.nav-topics-dropdown a.active { color: rgba(255,255,255,0.9); font-weight: 500; border-bottom: 1px solid #1B55A5; }
/* ── Nav search ── */
.nav-search-wrap {
display: flex;
align-items: center;
padding: 0 0 0 12px;
position: relative;
}
.nav-search-input {
width: 160px;
padding: 7px 12px 7px 32px;
font-size: 13px;
font-family: 'DM Sans', sans-serif;
font-weight: 300;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.2);
color: #fff;
outline: none;
transition: border-color 0.15s, width 0.2s;
}
.nav-search-input::placeholder { color: rgba(255,255,255,0.35); }
.nav-search-input:focus { border-bottom-color: rgba(255,255,255,0.5); width: 200px; }
.nav-search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: rgba(255,255,255,0.3);
pointer-events: none;
}
.nav-search-results {
display: none;
position: absolute;
top: calc(100% + 4px);
right: 4px;
width: 340px;
background: #fff;
border: 1px solid #e0e0e0;
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
max-height: 400px;
overflow-y: auto;
z-index: 300;
}
.nav-search-results.open { display: block; }
.nav-search-item {
display: block;
padding: 10px 16px;
text-decoration: none;
border-bottom: 1px solid #f2f2f2;
transition: background 0.1s;
}
.nav-search-item:last-child { border-bottom: none; }
.nav-search-item:hover { background: #f5f5f5; }
.nav-search-item-title {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 500;
color: #373737;
margin-bottom: 2px;
}
.nav-search-item-meta {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
color: #999;
}
.nav-search-no-results {
padding: 14px;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #aaa;
}
/* ── Page header ── */
.page-header {
background: #f5f5f5;
padding: 80px 60px 72px;
border-bottom: 1px solid #e8e8e8;
}
.page-header-inner {
max-width: 1000px;
margin: 0 auto;
}
.topic-label {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1B55A5;
margin: 0 0 20px 0;
}
.page-title {
font-family: 'Lora', Georgia, serif;
font-size: 40px;
font-weight: 400;
color: #1a1a1a;
margin: 0 0 24px 0;
line-height: 1.15;
}
.page-intro {
font-family: 'DM Sans', sans-serif;
font-size: 17px;
font-weight: 300;
color: #555;
line-height: 1.75;
margin: 0 0 28px 0;
max-width: 760px;
}
.page-meta {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #bbb;
border-top: 1px solid #eee;
padding-top: 18px;
display: flex;
gap: 24px;
flex-wrap: wrap;
}
/* ── Article body ── */
.article-body {
max-width: 1060px;
margin: 0 auto;
padding: 64px 60px 100px;
}
/* ── Key finding callout ── */
.key-finding {
margin: 20px 0 0;
background: rgba(55,55,55,0.06);
border-left: 3px solid #1B55A5;
padding: 14px 18px;
max-width: 760px;
}
.key-finding p {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: #555;
line-height: 1.6;
margin: 0;
}
.key-finding strong { color: #373737; }
/* ── Chart sections ── */
.chart-section {
border-top: 1px solid rgba(55,55,55,0.12);
margin-top: 64px;
padding-top: 56px;
}
.chart-section:first-child {
border-top: none;
margin-top: 0;
}
.section-text {
max-width: 760px;
margin: 0 0 28px;
}
.section-heading {
font-family: 'Lora', Georgia, serif;
font-size: 24px;
font-weight: 400;
color: #373737;
margin: 0 0 12px 0;
line-height: 1.3;
}
.section-body {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
font-weight: 300;
color: #555;
line-height: 1.75;
margin: 0 0 16px 0;
}
.section-body:last-child { margin-bottom: 0; }
/* ── Chart embed ── */
.chart-embed {
background: #fff;
border: 1px solid rgba(55,55,55,0.1);
overflow: hidden;
max-width: 960px;
}
.chart-embed iframe {
width: 100%;
border: none;
display: block;
}
.chart-embed-footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 8px 16px;
border-top: 1px solid #f0f0f0;
background: #fafafa;
}
.chart-embed-footer a {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: #999;
text-decoration: none;
}
.chart-embed-footer a:hover { color: #373737; }
/* ── Footer ── */
.footer {
background: #373737;
border-top: 1px solid rgba(255,255,255,0.12);
padding: 56px 60px;
margin-top: 0;
}
.footer-content {
max-width: 1440px;
margin: 0 auto;
}
.footer-nav {
display: flex;
gap: 64px;
margin-bottom: 48px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-nav-col-label {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-bottom: 14px;
font-family: 'DM Sans', sans-serif;
}
.footer-nav-col a {
display: block;
font-size: 14px;
font-weight: 300;
color: rgba(255,255,255,0.55);
text-decoration: none;
margin-bottom: 10px;
font-family: 'DM Sans', sans-serif;
transition: color 0.15s;
}
.footer-nav-col a:hover { color: #fff; }
.footer-legal {
text-align: center;
}
.footer-legal p {
margin: 8px 0;
font-size: 14px;
font-weight: 300;
color: rgba(255,255,255,0.4);
}
.footer-content a {
color: rgba(255,255,255,0.82);
text-decoration: underline;
text-underline-offset: 3px;
}
.footer-content a:hover { color: #fff; }
/* ── Page layout with sidebar ToC ── */
.page-layout {
max-width: 1300px;
margin: 0 auto;
padding: 64px 60px 100px 16px;
display: flex;
gap: 80px;
align-items: flex-start;
}
.page-layout .article-body {
flex: 1;
min-width: 0;
max-width: none;
margin: 0;
padding: 0;
}
/* ── Table of contents sidebar ── */
.toc-sidebar {
width: 240px;
flex-shrink: 0;
position: sticky;
top: 88px;
max-height: calc(100vh - 100px);
overflow-y: auto;
scrollbar-width: none;
}
.toc-sidebar::-webkit-scrollbar { display: none; }
.toc-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding-bottom: 12px;
border-bottom: 1px solid #e8e8e8;
margin-bottom: 16px;
user-select: none;
}
.toc-title {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #aaa;
}
.toc-toggle {
color: #ccc;
flex-shrink: 0;
transition: transform 0.2s;
}
.toc-sidebar.collapsed .toc-toggle { transform: rotate(180deg); }
.toc-list {
list-style: none;
margin: 0;
padding: 0;
}
.toc-sidebar.collapsed .toc-list { display: none; }
.toc-list li { margin-bottom: 1px; }
.toc-list a {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
font-weight: 300;
color: #999;
text-decoration: none;
display: block;
padding: 5px 8px 5px 10px;
border-left: 2px solid transparent;
line-height: 1.35;
transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.toc-list a:hover { color: #373737; }
.toc-list a.active {
color: #1B55A5;
border-left-color: #1B55A5;
background: rgba(255, 151, 98, 0.06);
font-weight: 400;
}
.chart-section { scroll-margin-top: 80px; }
/* ── Responsive ── */
@media (max-width: 1100px) {
.page-layout { gap: 48px; }
.toc-sidebar { width: 200px; }
}
@media (max-width: 960px) {
.site-header { padding: 0 24px; }
.page-header { padding: 60px 24px 56px; }
.article-body { padding: 0 24px 80px; }
.footer { padding: 48px 24px; }
.page-layout { flex-direction: column; padding: 0 24px 80px; }
.toc-sidebar { display: none; }
.page-layout .article-body { padding: 0; }
}
@media (max-width: 768px) {
.page-title { font-size: 30px; }
.page-intro { font-size: 16px; }
.site-nav { display: none; }
.section-heading { font-size: 20px; }
}