/* =====================================================================
KEVIN D. JONES — BEPCO Core Stylesheet
Paste into: Appearance → Customize → Additional CSS
Theme: highway / libre-2 (same as wired-for-purpose.com).
This is the PORTABLE BEPCO design system — palette, type, spine,
header/nav, classification banner, footer, nav-active, search —
shared with wired-for-purpose so the two sites read as siblings.
Portfolio-specific page styling is layered ON TOP of this later.
PREREQ: load fonts via Appearance → Fonts:
Libre Baskerville · IBM Plex Sans · IBM Plex Mono
Banner: inject the banner HTML via WPCode (Site Wide Footer),
same mechanism as wired-for-purpose. See separate HTML file.
=====================================================================
NOTE ON EXISTING CSS: if kevin-d-jones.com already has custom CSS in
the Additional CSS box, paste this ABOVE or BELOW it deliberately —
check for conflicts first (esp. any image/quote rules).
*/
/* ---------- 1. PALETTE (Operational era, 1958) ------------------- */
:root{
--amber:#C8860A; /* primary accent */
--olive:#4A5240; /* secondary accent + spine */
--olive-mid:#636B56; /* mid tone */
--sage:#8C9678; /* light field / muted */
--manila:#C8B98A; /* document ground (accents/strip) */
--manila-lt:#EEE8D8; /* page ground */
--near-black:#1E201A; /* type + dark surfaces */
--rust:#8B3A0F; /* warning / hover pop */
--amber-dk:#8B4A08; /* darker amber for button hover */
--rule:#D8CFB4; /* warm hairline */
}
/* ---------- 2. GLOBAL GROUND + TYPE ------------------------------ */
body{
background:var(--manila-lt) !important;
color:var(--near-black);
font-family:'Libre Baskerville', Georgia, serif;
font-size:17px;
line-height:1.8;
}
.site-content,
#content{ background:var(--manila-lt); }
/* signature: the persistent OLIVE spine — fixed to the viewport's
left edge, above all theme layers, never clipped by containers. */
body::before{
content:"";
position:fixed !important;
top:0; left:0; bottom:0;
width:8px;
background:var(--olive);
z-index:2147483647; /* max — sits above header, admin bar shift below */
pointer-events:none;
}
.admin-bar body::before{ top:32px; }
@media screen and (max-width:782px){ .admin-bar body::before{ top:46px; } }
h1,h2,h3,h4,h5,h6{
font-family:'Libre Baskerville', Georgia, serif;
color:var(--near-black);
line-height:1.25;
letter-spacing:-0.01em;
}
a{ color:var(--olive); text-decoration-color:var(--amber); text-underline-offset:2px; }
a:hover{ color:var(--rust); }
/* ---------- 3. HEADER — LIGHT BEPCO NAV ------------------------- */
/* Remove the theme's reserved gap above the header so it sits flush
on ALL pages. (Content spacing on inner pages is handled separately
below via #content padding, so this won't jam the post title.) */
#page,
.site{ margin-top:0 !important; padding-top:0 !important; }
body{ margin-top:0 !important; }
/* Light parchment nav bar, full-bleed background, content centered. */
.site-header{
background:#EEE8D8 !important; /* FULLY opaque — no content bleed-through */
border-bottom:1px solid rgba(30,32,26,0.12) !important;
width:100vw !important;
max-width:100vw !important;
position:relative !important; /* relative (NOT sticky) — scrolls with page */
left:auto !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
box-sizing:border-box;
padding:0 max(28px, calc((100vw - 1120px) / 2)) !important;
min-height:56px;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:nowrap;
margin-bottom:0 !important;
z-index:10;
}
/* neutralize theme backgrounds on inner header containers */
.site-header .site-branding,
.site-header .nav-wrapper,
.site-header .main-navigation,
.site-header .menu-primary-container{
background:transparent !important;
}
/* collapse any theme margin/padding on the header's inner containers
that adds height BELOW the nav row (the real source of the gap that
appears inside #masthead above the intro). */
.site-header .site-branding,
.site-header .nav-wrapper,
.site-header .main-navigation,
.site-header .menu-primary-container,
.site-header .menu,
.site-header #primary-menu{
margin-top:0 !important;
margin-bottom:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
.site-header .site-branding{ display:flex; align-items:center; }
/* the site title is a — kill its default paragraph margins that
inflate the header height and create the gap. */
.site-header .site-branding .site-title,
.site-header p.site-title{
margin:0 !important;
padding:0 !important;
line-height:1.1 !important;
}
/* logo — amber serif, BEPCO-style */
.site-branding .site-title{ margin:0; }
.site-title a{
font-family:'Libre Baskerville', serif !important;
color:var(--amber) !important;
font-size:18px;
font-weight:700;
letter-spacing:0.05em;
}
.site-title a:hover{ color:var(--rust) !important; }
/* nav links — mono, uppercase, with vertical dividers (ledger look) */
.main-navigation .menu{ display:flex; align-items:center; }
.main-navigation .menu > li{ margin:0; }
.main-navigation .menu > li > a{
font-family:'IBM Plex Mono', monospace;
font-size:11px;
letter-spacing:0.16em;
text-transform:uppercase;
color:rgba(30,32,26,0.55);
padding:0 16px;
height:56px;
display:flex;
align-items:center;
border-right:1px solid rgba(30,32,26,0.09);
position:relative;
/* the amber ::after rule below IS the underline — kill the browser's
default one, which otherwise shows as a black line on hover once
the text darkens */
text-decoration:none !important;
/* colour/background ease in at 0.2s — slightly ahead of the 0.3s
underline below, so the two changes stagger rather than move as
one block (this is the BEPCO nav feel). */
transition:color 0.2s cubic-bezier(0.22,0.61,0.36,1),
background 0.2s cubic-bezier(0.22,0.61,0.36,1);
}
/* the amber rule that DRAWS itself left-to-right beneath the label.
scaleX(0) at rest + transform-origin:left is what makes it wipe in
from the left rather than fade or grow from the centre. */
.main-navigation .menu > li > a::after{
content:'';
position:absolute;
left:16px; right:16px;
bottom:14px;
height:1px;
background:var(--amber);
transform:scaleX(0);
transform-origin:left;
transition:transform 0.3s cubic-bezier(0.22,0.61,0.36,1);
pointer-events:none;
}
.main-navigation .menu > li:first-child > a{
border-left:1px solid rgba(30,32,26,0.09);
}
.main-navigation .menu > li > a:hover{
color:var(--near-black);
background:rgba(30,32,26,0.04);
}
.main-navigation .menu > li > a:hover::after{
transform:scaleX(1);
}
/* ACTIVE (current page) — persistent, and distinct from hover.
WordPress marks the exact page with .current-menu-item and the
section parent with .current-menu-ancestor / -parent, so the nav
shows both "which section" and "which page". */
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current_page_item > a,
.main-navigation .menu > li.current-menu-ancestor > a,
.main-navigation .menu > li.current-menu-parent > a{
color:var(--amber);
background:rgba(200,134,10,0.06);
}
.main-navigation .menu > li.current-menu-item > a::after,
.main-navigation .menu > li.current_page_item > a::after,
.main-navigation .menu > li.current-menu-ancestor > a::after,
.main-navigation .menu > li.current-menu-parent > a::after{
transform:scaleX(1);
background:var(--amber);
}
/* the search item in the menu */
.main-navigation .astm-search-menu > a{ border-right:none; }
.main-navigation .search-icon-path,
.main-navigation .search-icon{ fill:rgba(30,32,26,0.5); }
.main-navigation .menu-toggle{
color:var(--near-black);
background:transparent;
border:1px solid rgba(30,32,26,0.2);
}
/* ---------- V1 GRAMMAR: CLASSIFICATION BANNER ------------------- */
/* Injected via WPCode at "Site Wide Footer" (this theme does NOT fire
wp_body_open, so Site Wide Body renders nothing). Because it's placed
at the bottom of the DOM, we pin it to the TOP with position:fixed. */
.kdj-banner{
position:fixed;
top:0;
left:0;
right:0;
width:100%;
z-index:9998;
box-sizing:border-box;
display:flex;
align-items:center;
gap:18px;
padding:6px max(28px, calc((100vw - 1120px) / 2));
background:rgba(30,32,26,0.06);
border-bottom:1px solid rgba(30,32,26,0.10);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
/* when logged in, sit below the WP admin bar */
.admin-bar .kdj-banner{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .kdj-banner{ top:46px; } }
/* Push the HEADER (and thus everything below it) down by the banner's
height so the header sits BELOW the fixed banner, not under it.
Banner ≈ 30px tall. We offset the site wrapper, not the body, so the
parchment ground still fills behind the banner cleanly. */
.site-header{ margin-top:30px !important; }
/* remove any stray body padding from earlier approach */
body{ padding-top:0 !important; }
/* Restore breathing room between header and content on INNER pages
(posts, pages, blog index). The homepage stays flush; everything
else gets a clean top gap so the eyebrow/title isn't jammed under
the header. */
body:not(.home) #content.site-content{ padding-top:48px !important; }
.kdj-banner .cb-item{
font-family:'IBM Plex Mono', monospace;
font-size:9px;
letter-spacing:0.22em;
text-transform:uppercase;
color:rgba(30,32,26,0.42);
white-space:nowrap;
}
.kdj-banner .cb-dot{
display:block; /* a bare span is inline and would ignore w/h */
width:3px; height:3px;
min-width:3px; min-height:3px;
border-radius:50%;
background:rgba(30,32,26,0.20);
flex-shrink:0;
flex-grow:0;
}
.kdj-banner .cb-right{
margin-left:auto;
display:flex;
align-items:center;
gap:12px; /* spacing between status, dot, and readout */
font-family:'IBM Plex Mono', monospace;
font-size:9px;
letter-spacing:0.16em;
text-transform:uppercase;
color:rgba(200,134,10,0.65);
white-space:nowrap;
}
/* "System Nominal" sits in the right cluster but reads as a label */
.kdj-banner .cb-status{
color:rgba(200,134,10,0.65);
}
/* the separator dot inside the amber cluster picks up amber, not the
dark tone used by the left-hand dots */
.kdj-banner .cb-right .cb-dot{
display:block;
width:3px; height:3px;
min-width:3px; min-height:3px;
border-radius:50%;
background:rgba(200,134,10,0.55);
flex-shrink:0;
flex-grow:0;
}
/* the live frequency readout: lock digit widths so the number doesn't
jitter sideways as it walks */
.kdj-banner #kdj-freq{
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;
display:inline-block;
min-width:3.4em;
text-align:right;
}
@media (max-width:640px){
.kdj-banner{ gap:10px; padding:5px 18px; }
.kdj-banner .cb-item:nth-child(n+3){ display:none; }
}
/* ---------- 5. ARTICLE BODY (.entry-content) -------------------- */
/* Let the theme center the column; just set a comfortable reading
measure and center it within whatever container the theme provides. */
.entry-content,
.entry-header{
max-width:42rem;
margin-left:auto;
margin-right:auto;
}
.entry-content{ font-size:17px; }
.entry-content p{ margin:0 0 1.4em; }
/* in-post section headings → IBM Plex Mono */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6{
font-family:'IBM Plex Mono', monospace;
color:var(--olive);
letter-spacing:0;
}
.entry-content h2{
font-size:22px;
font-weight:500;
margin:1.9em 0 0.6em;
padding-bottom:0.35em;
border-bottom:1px solid var(--rule);
}
.entry-content h3,
.entry-content h4{
font-size:14px;
font-weight:500;
letter-spacing:0.04em;
text-transform:uppercase;
color:var(--olive-mid);
margin:1.7em 0 0.5em;
}
/* quote appearance only — width controlled by Part A */
.entry-content blockquote,
.entry-content .wp-block-quote{
border-left:3px solid var(--amber);
background:#E4DCC4;
padding:0.8em 1.2em;
font-style:italic;
color:var(--near-black);
}
/* ---------- 6. FOOTERS, NAV, WIDGETS --------------------------- */
.entry-footer,
.post-navigation{
margin-top:2.5em;
padding-top:1.4em;
border-top:1px solid var(--rule);
font-family:'IBM Plex Mono',monospace;
font-size:12px;
}
.post-navigation .nav-links a{ font-family:'Libre Baskerville',serif; font-size:15px; }
.widget-title{
font-family:'IBM Plex Sans Condensed',sans-serif;
font-size:13px;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--olive-mid);
border-bottom:1px solid var(--rule);
padding-bottom:8px;
margin-bottom:12px;
}
.widget a{ color:var(--olive); }
.widget a:hover{ color:var(--rust); }
/* Themes tag cloud → mono chips */
.tagcloud a,
.wp-block-tag-cloud a{
font-family:'IBM Plex Mono',monospace !important;
font-size:11px !important;
letter-spacing:0.03em;
border:1px solid var(--rule);
padding:3px 8px;
margin:0 4px 6px 0;
display:inline-block;
color:var(--olive-mid) !important;
}
.tagcloud a:hover,
.wp-block-tag-cloud a:hover{ border-color:var(--amber); color:var(--near-black) !important; }
/* ---------- 7. SITE FOOTER + V1 ISSUED COLOPHON ---------------- */
/* FULL-BLEED footer to match the header, content held to same column */
.site-footer{
background:var(--near-black);
color:var(--sage);
font-family:'IBM Plex Mono',monospace;
font-size:11px;
letter-spacing:0.05em;
border-top:3px solid var(--amber);
width:100vw !important;
max-width:100vw !important;
position:relative;
left:50%;
margin-left:-50vw !important;
margin-right:-50vw !important;
box-sizing:border-box;
padding:28px max(28px, calc((100vw - 1120px) / 2)) !important;
}
.site-footer a{ color:var(--amber); }
.site-info{ color:var(--olive-mid); text-align:center; }
/* V1 GRAMMAR: issued colophon appended to the footer */
.site-info::after{
content:"Kevin D. Jones, Ph.D.\A Richmond VA";
white-space:pre;
display:block;
margin-top:8px;
color:var(--sage);
letter-spacing:0.12em;
text-transform:uppercase;
font-size:9.5px;
text-align:center;
line-height:1.8;
}
/* ================================================================
PREV / NEXT POST NAVIGATION — archive .pagination-nav style
================================================================ */
.post-navigation{
margin-top:2.5em;
padding-top:1.6em;
border-top:1px solid var(--rule);
}
.post-navigation .nav-links{
display:flex;
justify-content:space-between;
gap:24px;
}
.post-navigation .nav-previous,
.post-navigation .nav-next{ max-width:48%; }
.post-navigation .nav-next{ text-align:right; margin-left:auto; }
/* the small "Previous Post" / "Next Post" label — mono uppercase */
.post-navigation .meta-nav{
display:block;
font-family:'IBM Plex Mono', monospace;
font-size:10px;
letter-spacing:0.16em;
text-transform:uppercase;
color:rgba(30,32,26,0.5);
margin-bottom:6px;
}
.post-navigation .nav-previous .meta-nav::before{ content:"\2190 "; } /* ← */
.post-navigation .nav-next .meta-nav::after{ content:" \2192"; } /* → */
/* the post title link — boxed like an activated button */
.post-navigation .nav-links a{
font-family:'Libre Baskerville', Georgia, serif !important;
font-size:16px;
color:var(--near-black) !important;
text-decoration:none;
display:inline-block;
border:1px solid rgba(200,134,10,0.55);
background:rgba(200,134,10,0.05);
padding:12px 18px;
transition:all 0.2s ease;
}
.post-navigation .nav-next .nav-links a{ text-align:right; }
.post-navigation .nav-links a:hover{
color:var(--amber) !important;
border-color:var(--amber);
background:rgba(200,134,10,0.12);
}
.post-navigation .nav-links a:hover .meta-nav{ color:var(--amber); }
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current_page_item > a,
.main-navigation .menu > li.current-menu-parent > a{
color:var(--amber) !important;
background:rgba(200,134,10,0.07);
box-shadow:inset 0 -2px 0 var(--amber);
}
/* ================================================================
NAV SEARCH (Ivory Search) — BEPCO institutional styling
Icon in the nav, revealing a squared mono search field.
================================================================ */
/* the search icon in the nav — match nav link color, amber on hover */
.main-navigation .astm-search-menu > a{
display:flex;
align-items:center;
height:56px;
padding:0 4px 0 12px;
border-right:none !important;
}
.main-navigation .search-icon-path{ fill:rgba(30,32,26,0.55) !important; transition:fill 0.2s ease; }
.main-navigation .astm-search-menu > a:hover .search-icon-path{ fill:var(--amber) !important; }
/* the revealed search form — light, restrained, archive-style box.
IMPORTANT: don't force display here, or the plugin can't hide it. */
.astm-search-menu .is-search-form{
background:#FCFAF4 !important;
border:1px solid rgba(30,32,26,0.18) !important;
border-bottom:1px solid rgba(30,32,26,0.18) !important; /* kill the plugin's black underline */
border-radius:0 !important;
padding:5px !important;
box-shadow:0 6px 18px rgba(30,32,26,0.10) !important;
align-items:center;
gap:0;
}
/* when the plugin opens the search, lay it out as a flex row */
.astm-search-menu.astm-search-open .is-search-form,
.astm-search-menu .is-search-form.is-form-open,
.astm-search-menu a[aria-expanded="true"] + .is-search-form{
display:flex !important;
}
/* the input — mono, light, amber caret */
.astm-search-menu .is-search-input{
background:#FEFDFA !important;
border:1px solid rgba(30,32,26,0.12) !important;
border-bottom:1px solid rgba(30,32,26,0.12) !important; /* override plugin underline */
border-radius:0 !important;
box-shadow:none !important;
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
letter-spacing:0.10em !important;
text-transform:uppercase;
color:var(--near-black) !important;
padding:9px 12px !important;
caret-color:var(--amber);
min-width:200px;
}
.astm-search-menu .is-search-input:focus{
outline:none !important;
border-color:var(--amber) !important;
box-shadow:none !important;
}
.astm-search-menu .is-search-input::placeholder{
color:rgba(30,32,26,0.38);
font-style:normal;
letter-spacing:0.10em;
text-transform:uppercase;
}
/* the submit button — bordered box, amber icon, archive hover */
.astm-search-menu .is-search-submit{
background:transparent !important;
border:1px solid rgba(30,32,26,0.15) !important;
border-radius:0 !important;
padding:7px 11px !important;
cursor:pointer;
transition:all 0.2s ease;
}
.astm-search-menu .is-search-submit:hover{
background:rgba(200,134,10,0.06) !important;
border-color:var(--amber) !important;
}
.astm-search-menu .is-search-submit svg path{ fill:rgba(30,32,26,0.5) !important; transition:fill 0.2s ease; }
.astm-search-menu .is-search-submit:hover svg path{ fill:var(--amber) !important; }
/* ================================================================
PORTFOLIO — BIO PAGE + NAV SUBMENUS + DOWNLOAD BUTTONS
================================================================ */
/* ---- voice-bio: quotable bio copy block ---- */
.entry-content .voice-bio{
font-family:'Libre Baskerville', Georgia, serif !important;
font-size:15px !important;
line-height:1.75 !important;
font-style:italic;
color:#2A2620;
background:#F7F2E7;
border-left:3px solid var(--amber);
border-radius:2px;
padding:22px 26px;
margin:1.4em 0;
position:relative;
}
.entry-content .voice-bio strong{ font-weight:700; font-style:normal; color:var(--near-black); }
/* the copy button injected by the WPCode snippet */
.bio-copy-btn{
position:absolute;
bottom:16px; right:18px;
font-family:'IBM Plex Mono', monospace;
font-size:9px;
letter-spacing:0.12em;
text-transform:uppercase;
color:rgba(30,32,26,0.55);
background:transparent;
border:1px solid rgba(30,32,26,0.2);
border-radius:0;
padding:5px 10px;
cursor:pointer;
transition:all 0.18s ease;
z-index:2;
}
.bio-copy-btn:hover{ color:var(--amber); border-color:var(--amber); background:rgba(200,134,10,0.05); }
.bio-copy-btn.copied{ color:var(--olive); border-color:var(--olive); }
/* room for the button in the bottom-right, and normal top padding */
.entry-content .voice-bio{ padding:22px 26px 48px; }
/* ---- DOWNLOAD BUTTONS → BEPCO archive-button style ---- */
/* ---- NAV SUBMENUS (History / Portfolio dropdowns) ---- */
.main-navigation .menu li.menu-item-has-children{ position:relative; }
/* suppress the theme's own default dropdown arrow / caret glyphs.
NOTE: this deliberately targets ::before only. The ::after on parent
items is used by the drawing amber underline — killing it here is
what previously stopped History/Portfolio from animating. */
.main-navigation .menu li.menu-item-has-children > a::before,
.main-navigation .dropdown-toggle,
.main-navigation .menu-item-has-children > .dropdown-toggle{
content:none !important;
display:none !important;
}
/* re-assert the drawing underline on parent items, at a specificity
that beats the suppressor above.
NOTE: the anchor MUST be position:relative here — its parent
li.menu-item-has-children is position:relative for the dropdown, so
otherwise this ::after resolves against the LI and the rule lands
above the text instead of beneath it. */
.main-navigation .menu li.menu-item-has-children > a{
position:relative !important;
}
.main-navigation .menu li.menu-item-has-children > a::after{
content:'' !important;
display:block !important;
position:absolute !important;
left:16px; right:16px;
top:auto !important;
bottom:14px !important;
height:1px;
background:var(--amber);
transform:scaleX(0);
transform-origin:left;
transition:transform 0.3s cubic-bezier(0.22,0.61,0.36,1);
pointer-events:none;
}
.main-navigation .menu li.menu-item-has-children > a:hover::after{
transform:scaleX(1);
}
/* remove the extra right padding the theme reserves for the arrow so
parent items align exactly like plain items.
position:relative is essential — li.menu-item-has-children is itself
position:relative (for the dropdown), so without this the underline's
::after would resolve against the LI box and sit above the text. */
.main-navigation .menu li.menu-item-has-children > a{
padding-right:16px !important;
position:relative !important;
}
/* the real culprit (confirmed via inspector): the theme adds
margin-right:.875em to parent
s to reserve arrow space. */
.main-navigation ul > li.menu-item-has-children,
.main-navigation ul > li.page_item_has_children,
.main-navigation .menu li.menu-item-has-children{
margin-right:0 !important;
}
/* collapse any toggle/arrow element that still reserves layout width */
.main-navigation .menu li.menu-item-has-children .dropdown-toggle,
.main-navigation .menu li.menu-item-has-children > a > .toggle,
.main-navigation .menu li.menu-item-has-children > .toggle,
.main-navigation .menu li.menu-item-has-children > button{
display:none !important;
width:0 !important;
margin:0 !important;
padding:0 !important;
}
/* hide submenus by default; reveal on hover (desktop) */
.main-navigation .menu .sub-menu{
display:none;
position:absolute;
top:100%;
left:0;
min-width:200px;
background:var(--manila-lt);
border:1px solid rgba(30,32,26,0.15);
box-shadow:0 8px 24px rgba(30,32,26,0.15);
padding:4px 0;
margin:0;
list-style:none;
z-index:100;
}
/* tight submenu items — kill the theme's vertical margins that spread
them apart (theme applies margin to .main-navigation li broadly). */
.main-navigation ul.sub-menu > li,
.main-navigation .menu .sub-menu li,
.main-navigation li .sub-menu li{
width:100% !important;
margin:0 !important;
padding:0 !important;
display:block !important;
float:none !important;
}
@media (min-width:783px){
.main-navigation .menu li.menu-item-has-children:hover > .sub-menu{
display:block;
}
}
.main-navigation .menu .sub-menu li{ width:100%; margin:0 !important; }
.main-navigation .menu .sub-menu li > a{
display:block !important;
height:auto !important;
margin:0 !important;
padding:11px 18px !important;
font-family:'IBM Plex Mono', monospace !important;
font-size:11px !important;
letter-spacing:0.10em;
text-transform:uppercase;
color:rgba(30,32,26,0.65) !important;
border:none !important;
border-bottom:1px solid rgba(30,32,26,0.07) !important;
white-space:nowrap;
}
.main-navigation .menu .sub-menu li:last-child > a{ border-bottom:none !important; }
.main-navigation .menu .sub-menu li > a:hover{
color:var(--amber) !important;
background:rgba(200,134,10,0.06) !important;
}
/* ================================================================
DOWNLOAD TABLE → ARCHIVE RECORD LIST
The bio downloads table (Asset | Year | Download) styled as a
dense archive record list: serif asset name, mono year, amber
Download affordance, hairline rows, amber hover-spine.
================================================================ */
.entry-content .wp-block-table{ margin:1.6em 0; }
.entry-content .wp-block-table table,
.entry-content .wp-block-table.has-fixed-layout table{
border-collapse:collapse;
width:100%;
border:none;
table-layout:auto;
}
.entry-content .wp-block-table td{
border:none !important;
border-bottom:1px solid rgba(30,32,26,0.10) !important;
padding:16px 12px 16px 0 !important;
vertical-align:middle;
background:transparent !important;
}
/* each ROW is a record — amber hover-spine + slide */
.entry-content .wp-block-table tr{
position:relative;
transition:background 0.2s ease;
}
.entry-content .wp-block-table tbody tr:hover td{
background:rgba(200,134,10,0.04) !important;
}
/* col 1 — asset name: serif title */
.entry-content .wp-block-table td:first-child{
font-family:'Libre Baskerville', Georgia, serif !important;
font-size:16px;
font-weight:700;
color:var(--near-black);
width:auto;
padding-left:20px !important;
position:relative;
}
/* era-diamond marker on the first cell */
.entry-content .wp-block-table td:first-child::before{
content:"";
position:absolute;
left:0; top:50%;
transform:translateY(-50%) rotate(45deg);
width:6px; height:6px;
background:var(--amber);
}
/* col 2 — year: mono date-stamp */
.entry-content .wp-block-table td:nth-child(2){
font-family:'IBM Plex Mono', monospace !important;
font-size:11px;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--amber);
white-space:nowrap;
width:120px;
}
/* col 3 — the Download link: amber archive affordance */
.entry-content .wp-block-table td:last-child{
text-align:right;
width:130px;
}
.entry-content .wp-block-table td:last-child a,
.entry-content .wp-block-table td a.pretty-link{
font-family:'IBM Plex Mono', monospace !important;
font-size:10px !important;
letter-spacing:0.14em !important;
text-transform:uppercase !important;
color:var(--amber) !important;
text-decoration:none !important;
border:1px solid rgba(200,134,10,0.5) !important;
padding:8px 16px !important;
display:inline-block;
transition:all 0.18s ease;
}
.entry-content .wp-block-table td:last-child a:hover,
.entry-content .wp-block-table td a.pretty-link:hover{
background:rgba(200,134,10,0.12) !important;
border-color:var(--amber) !important;
}
/* ================================================================
COOL TIMELINE PRO → BEPCO OPERATIONAL SKIN
Maps the plugin's teal/maroon timeline (Education page) to the
Operational palette: olive connector line, soot/amber icon badges,
manila content cards with amber spine, serif titles, mono dates.
Plugin uses heavy inline !important CSS, so overrides match its
specificity + !important.
================================================================ */
/* --- the vertical connector line --- */
.cool-timeline.white-timeline:before,
.cool-timeline.white-timeline.one-sided:before,
.cool-timeline .ctl_center_line_filling,
.cool-timeline:not(.light-timeline) .center-line.BeforeViewPort:before,
.cool-timeline:not(.light-timeline) .center-line.AfterViewPort:after{
background:var(--olive) !important;
background-color:var(--olive) !important;
background-image:none !important;
}
/* --- the start/end caps on the line --- */
.cool-timeline.white-timeline .cool_timeline_start,
.cool-timeline.white-timeline .cool_timeline_end,
.cool-timeline .cool_timeline_start.innerViewPort,
.cool-timeline .cool_timeline_end.innerViewPort{
background:var(--olive) !important;
background-color:var(--olive) !important;
background-image:none !important;
}
/* --- the icon badges (circular medallions) — PER PAGE ---
Education → rust (Virginia Tech); Experience → sage. */
.cool-timeline .timeline-post .timeline-icon,
.cool-timeline.white-timeline .timeline-icon,
.cool-timeline .timeline-icon.icon-larger,
.cool-timeline .timeline-icon[class*="iconbg-"]{
color:var(--manila-lt) !important;
box-shadow:0 0 0 4px var(--manila-lt) !important; /* ring against page */
}
/* Education medallions → rust */
#timeline-education .timeline-icon,
#timeline-education .timeline-icon.icon-larger,
#timeline-education .timeline-icon[class*="iconbg-"],
#timeline-education .timeline-post.innerViewPort .timeline-icon{
background:var(--rust) !important;
border-color:var(--rust) !important;
}
/* Experience medallions → field olive */
#timeline-experience .timeline-icon,
#timeline-experience .timeline-icon.icon-larger,
#timeline-experience .timeline-icon[class*="iconbg-"],
#timeline-experience .timeline-post.innerViewPort .timeline-icon{
background:var(--olive) !important;
border-color:var(--olive) !important;
}
.cool-timeline .timeline-icon i,
.cool-timeline .timeline-icon svg,
.cool-timeline .timeline-icon [class*="fa-"]{
color:var(--manila-lt) !important;
}
/* --- content cards (the boxed entries) ---
Guaranteed override via the container ID #timeline-education (an ID
selector beats the plugin's class chains). */
#timeline-education .timeline-content,
#timeline-education .timeline-content.design-5-content,
.cool-timeline .timeline-content,
.cool-timeline .timeline-content.design-5-content{
background:#F4EEDF !important;
background-color:#F4EEDF !important;
border:1px solid rgba(30,32,26,0.16) !important;
border-radius:2px !important;
box-shadow:0 2px 8px rgba(30,32,26,0.06) !important;
}
#timeline-education .timeline-content:after,
.cool-timeline .timeline-content:after{
border-right-color:#F4EEDF !important;
border-left-color:#F4EEDF !important;
}
/* kill the inline white background on the "Bradley Fellow" link */
#timeline-education .timeline-content .content-details a[style*="background"],
.cool-timeline .timeline-content .content-details a[style*="background"]{
background:transparent !important;
background-color:transparent !important;
}
/* --- TWO-TONE CARD: soot title header + cream details body --- */
/* title block — SOOT (near-black) header strip, parchment text.
This is the DEFAULT (Education uses it). */
#timeline-education .timeline-content h2.content-title,
.cool-timeline .timeline-content h2.content-title,
#timeline-education .timeline-content .content-title,
.cool-timeline .timeline-content .content-title{
background:var(--near-black) !important;
color:var(--manila-lt) !important;
margin:-1px -1px 0 -1px !important; /* bleed to card edges */
padding:16px 20px !important;
border-radius:2px 2px 0 0 !important;
}
/* Experience → CONTROL ROOM BLUE (Contemporary era #1F3243) header */
#timeline-experience .timeline-content h2.content-title,
#timeline-experience .timeline-content .content-title{
background:#1F3243 !important;
color:var(--manila-lt) !important;
}
#timeline-experience .timeline-content h2.content-title a{
color:var(--manila-lt) !important;
}
#timeline-education .timeline-content h2.content-title a,
.cool-timeline .timeline-content h2.content-title a{
color:var(--manila-lt) !important;
}
/* details block — cream body with tighter padding */
#timeline-education .timeline-content .ctl_info,
.cool-timeline .timeline-content .ctl_info{
background:#F4EEDF !important;
padding:12px 16px !important;
margin:0 !important;
}
/* inner content-details: no extra padding (parent .ctl_info handles it) */
#timeline-education .timeline-content .content-details,
.cool-timeline .timeline-content .content-details{
background:transparent !important;
padding:0 !important;
margin:0 !important;
}
/* remove the card's own padding so the two bands fill it edge-to-edge */
#timeline-education .timeline-content,
.cool-timeline .timeline-content.design-5-content{
padding:0 !important;
overflow:hidden;
}
/* --- content title (degree name) → serif --- */
.cool-timeline .timeline-post .timeline-content h2.content-title,
.cool-timeline .timeline-post .timeline-content h2.content-title-2,
.cool-timeline .timeline-post .timeline-content h2.content-title-simple,
.cool-timeline.compact .timeline-post .timeline-content h2.compact-content-title,
.cool-timeline .timeline-post .timeline-content .content-title a{
font-family:'Libre Baskerville', Georgia, serif !important;
color:var(--near-black) !important;
font-weight:700 !important;
}
/* --- the date labels → mono amber date-stamp --- */
.cool-timeline .timeline-post .timeline-meta .meta-details,
.cool-timeline .timeline-year span,
.cool-timeline .timeline-post .timeline-content .story-date.clt-meta-date,
.cool-timeline.compact .timeline-post .timeline-content .clt-compact-date{
font-family:'IBM Plex Mono', monospace !important;
color:var(--amber) !important;
letter-spacing:0.08em !important;
text-transform:uppercase !important;
}
/* --- the year separator badges --- */
.cool-timeline .timeline-year,
.cool-timeline .timeline-year.innerViewPort{
background:var(--near-black) !important;
}
.cool-timeline .timeline-year span{ color:var(--amber) !important; }
/* --- body / details text --- */
.cool-timeline .timeline-post .timeline-content .content-details,
.cool-timeline .timeline-post .timeline-content .content-details p{
font-family:'Libre Baskerville', Georgia, serif !important;
color:rgba(30,32,26,0.75) !important;
}
/* breathing room between the degree title and the body details */
.cool-timeline .timeline-post .timeline-content .content-details{
margin-top:14px !important;
}
/* separate the thesis/dissertation link (in ) from the university
text above it — the plugin only uses
so add top spacing. */
.cool-timeline .timeline-post .timeline-content .content-details em{
display:inline-block;
margin-top:12px;
}
/* also space the trailing "Fellow" link from the thesis line */
.cool-timeline .timeline-post .timeline-content .content-details em + br + a{
display:inline-block;
margin-top:8px;
}
/* links inside details (thesis titles etc.) → amber */
.cool-timeline .timeline-post .timeline-content .content-details a{
color:var(--amber) !important;
}
/* ================================================================
PRESENTATIONS PAGE (page-id-23) → ARCHIVE CATALOG
Restyles the year-grouped talk list into a dense archive index:
catalog-control year nav, mono year bands, record rows with amber
era-diamonds and hover-spine. Scoped to .page-id-23.
================================================================ */
/* --- YEAR NAV (two paragraph blocks, one per decade) ---
Linked years = amber buttons; placeholder years (bare text like
2025, 2021, 2012) = muted inline text. */
.page-id-23 .entry-content > .wp-block-group:first-of-type p.wp-block-paragraph:has(a[href^="#20"]),
.page-id-248 .entry-content p.wp-block-paragraph.has-black-color:has(a[href^="#20"]){
display:flex !important;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:8px;
margin:0 auto 6px !important;
line-height:1;
color:rgba(30,32,26,0.32) !important; /* placeholder grey for plain (unlinked) years */
font-family:'IBM Plex Mono', monospace !important;
font-size:13px !important;
letter-spacing:0.08em;
}
/* Publications nav rows carry the theme's has-black-color class, which
forces plain-year text to black. Neutralize it so unlinked years read
as the muted grey placeholder (linked years keep their amber via the
more-specific a[href] rule below). */
.page-id-248 .entry-content p.wp-block-paragraph.has-black-color:has(a[href^="#20"]){
color:rgba(30,32,26,0.32) !important;
}
/* linked years → amber buttons */
.page-id-23 p.wp-block-paragraph a[href^="#20"],
.page-id-248 p.wp-block-paragraph a[href^="#20"]{
font-family:'IBM Plex Mono', monospace !important;
font-size:13px !important;
letter-spacing:0.08em;
color:var(--amber) !important;
text-decoration:none !important;
border:1px solid rgba(200,134,10,0.5) !important;
background:rgba(200,134,10,0.06) !important;
padding:10px 16px !important;
transition:all 0.18s ease;
}
.page-id-23 p.wp-block-paragraph a[href^="#20"]:hover,
.page-id-248 p.wp-block-paragraph a[href^="#20"]:hover{
background:rgba(200,134,10,0.16) !important;
border-color:var(--amber) !important;
}
/* kill the theme's link underline / border-bottom so the border box
is uniform on all four sides */
.page-id-23 p.wp-block-paragraph a[href^="#20"],
.page-id-23 p.wp-block-paragraph a[href^="#20"]:hover,
.page-id-248 p.wp-block-paragraph a[href^="#20"],
.page-id-248 p.wp-block-paragraph a[href^="#20"]:hover{
text-decoration:none !important;
border-bottom:1px solid rgba(200,134,10,0.5) !important;
box-shadow:none !important;
background-image:none !important;
}
.page-id-23 p.wp-block-paragraph a[href^="#20"]:hover,
.page-id-248 p.wp-block-paragraph a[href^="#20"]:hover{
border-bottom-color:var(--amber) !important;
}
/* --- ALTERNATING YEAR GROUP BACKGROUNDS ---
Each year is a