/*
(UNIVERSITY TYPEFACE) PRIMARY TYPEFACE:
- Montserrat
- Nunito Sans
- Calluna
- Barlow Condensed
- font-family: "Montserrat", sans-serif;
- font-family: "Nunito Sans", sans-serif;
-
*/
/* Marshall Colors:
The vibrant and distinctive Marshall green (PMS 354) plays a crucial role in establishing a clear and powerful
image that helps to define the brand identity of Marshall University. Our signature color palette, consisting
of Marshall green (PMS 354), black, and white, serves as a powerful differentiator for our brand. When used
appropriately and consistently, this color palette adds an additional layer of distinction.
The signature colors can be utilized extensively, both for large areas of color and as accent colors
throughout our brand materials.
Primary Palette:
- Green: #4fae4f (This will change for web purposes)
- Black: #27251f
- White: #ffffff
Our supporting palette complements our primary palette of Marshall green, black, and white. primary
palette of Marshall green black and white by providing additional range to the brand experience. When
using one of the colors, remember that Marshall green (PMS 354) should always be the dominant color in
every piece.
Secondary Palette:
- Dark Green: #145f1f
- Warm Green: #c5e2c2
- Charcoal: #333132
- Gray: #a2aaad
*/
/* Top Level Nav targeting specific nav items */
.request-info a {
cursor: pointer !important;
background: #fff !important;
color: #000 !important;
margin-left: 10px !important;
padding: 15px 10px !important;
border-radius: 5px !important;
/* font-weight: 700 !important; */
}
@media (max-width:991px) {
.request-info a {
background: initial !important;
color: initial !important;
margin-left: initial !important;
padding: initial !important;
border-radius: initial !important;
font-weight: initial !important;
}
}
/* ────────────────────────────────────────────────────────────
Side Mobile Navigation (Offcanvas – LEFT)
──────────────────────────────────────────────────────────── */
/* Panel */
.mobile-offcanvas.offcanvas-start{
width: 320px;
background:#27251f; /* single source of truth */
color:#fff;
box-shadow:4px 0 16px rgba(0,0,0,.18);
}
@media (min-width:400px){
.mobile-offcanvas.offcanvas-start{ width:360px; }
}
.mobile-offcanvas .offcanvas-header{
border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-offcanvas .btn-close{
filter: invert(1); /* white close icon */
}
.mobile-offcanvas .logo{ height:auto; }
/* Keep menus vertical */
.mobile-offcanvas .navbar-nav{ flex-direction:column !important; }
.mobile-offcanvas .nav{ gap:.25rem; }
/* Links */
.mobile-offcanvas .nav .menu-item > a,
.mobile-offcanvas .nav-link{
display:block;
color:#fff !important;
padding:.625rem .25rem;
text-decoration:none;
}
.mobile-offcanvas .nav .menu-item > a:hover{ color:#a5ffb0 !important; }
/* Utility menu (top green bar links inserted into drawer) */
.mobile-offcanvas .utility-menu{
border-bottom:1px solid rgba(255,255,255,.08);
padding-bottom:.5rem;
margin-bottom:1rem !important;
}
.utility-menu > li > a{ padding:.35rem 0; }
/* Main menu spacing */
.main-offcanvas-menu > li > a{
padding:.5rem 0;
font-weight:600;
}
/* Submenus inside the drawer (simple list look) */
.main-offcanvas-menu .sub-menu{
padding-left:.75rem;
border-left:1px solid rgba(0,0,0,.075);
margin:.25rem 0 .5rem;
}
/* Request info row & generic link padding overrides */
.mobile-offcanvas .nav-link,
.mobile-offcanvas .request-info{ padding:15px 5px !important; }
.mobile-offcanvas .request-info a{ padding:0 !important; }
/* Dropdown panel base (within offcanvas) */
.mobile-offcanvas .dropdown-menu{
column-count: initial;
width:100%;
padding:5px;
border-radius:5px;
}
.mobile-offcanvas .dropdown-menu li:last-child{ border-bottom:none !important; }
/* ── Smooth Toggle for the offcanvas MAIN menu (.mm-main) ── */
/* collapsed by default — hide bar completely */
.offcanvas .mm-main > li.menu-item-has-children > .dropdown-menu{
display:block; /* keep in flow for height animation */
overflow:hidden;
max-height:0;
padding:0 !important;
margin:0;
border:0;
border-top-right-radius: 5px !important;
border-top-left-radius: 5px !important;
background:#000;
box-shadow:none;
transition:max-height .28s ease, padding .2s ease;
will-change:max-height;
}
.offcanvas .mm-main > li.menu-item-has-children > .dropdown-menu .nav-link {
padding: 1rem 1rem !important;
}
/* optional: restore some padding when open (uncomment if desired) */
/*
.offcanvas .mm-main > li.menu-item-has-children.is-open > .dropdown-menu{
padding:10px 0 !important;
}
*/
/* arrow position + rotation */
.mobile-offcanvas #menu-main .menu-item{
position:relative;
border-bottom:1px solid #4fae4f;
}
.mobile-offcanvas #menu-main .arrow{
position:absolute !important;
top:10px;
right:0;
border-radius: 3px;
padding: 5px 10px;
background: #4fae4f;
transition: 0.3s;
}
.mobile-offcanvas #menu-main .arrow:hover {
background: #145f1f;
transition: 0.3s;
cursor: pointer;
}
.offcanvas .mm-main li.is-open > .arrow i{
transform:rotate(180deg);
transition:transform .2s ease;
}
.rotate-180{ transform:rotate(180deg); transition-duration:.3s; }
/* ── Search inside offcanvas ── */
.mobile-offcanvas .search-form input[type="search"],
.mobile-offcanvas .wp-block-search__input{ width:100%; }
.mm-search .site-search input { width: 85%; }
.mm-search .ais-results{ width:100% !important; }
/* ── Header small bits ── */
.menu-toggle{ line-height:1; padding:.425rem .75rem; }
.menu-toggle .fas{ font-size:1.1rem; }
/* ── Responsive header tweaks (outside the drawer) ── */
@media (max-width:991px){
.nav-container{ background:#4fae4f; }
.top-nav{ display:none; }
}
/* (Optional) legacy keyframe animations kept as-is */
@keyframes mymove{
0%{ top:-15px; } 50%{ top:0; } 51%{ transform:rotate(0deg);} 100%{ transform:rotate(-45deg); top:0; }
}
@keyframes mymove2{
0%{ top:15px; } 50%{ top:0; } 51%{ transform:rotate(0deg);} 100%{ transform:rotate(45deg); top:0; }
}
@keyframes mymove3{ 99%{ width:35px; } 100%{ width:0; } }
@keyframes mymove4{
0%{ transform:rotate(-45deg); top:0; } 50%{ transform:rotate(0); } 51%{ top:0; } 100%{ top:-10px; }
}
@keyframes mymove5{
0%{ transform:rotate(45deg); top:0; } 50%{ transform:rotate(0); } 51%{ top:0; } 100%{ top:10px; }
}
@keyframes mymove6{ 0%{ width:0; } 99%{ width:0; } 100%{ width:35px; } }
/* END */
/* Global */
body {
font-family: "Nunito Sans", sans-serif;
}
/* Research Faculty */
.research-faculty h1,
.rf-directory h2,
.rf-directory .modal-header h5 {
color: #4fae4f;
font-weight: 800;
}
.rf-filters .form-label,
.rf-directory .card-title a {
color: #4fae4f !important;
font-weight: 800;
}
.rf-directory a,
.rf-single a {
color: #4fae4f;
}
.rf-return {
position: absolute;
right: 0;
}
.rf-directory button,
.rf-return {
color: #fff !important;
background: #4fae4f;
border: #4fae4f;
}
.rf-directory .btn-close i {
position: relative;
top: -3px;
}
.rf-return:hover,
.rf-directory button:hover {
background: #006839;
}
/* Card ribbon */
.rf-card { position: relative; }
.rf-info-ribbon {
position: absolute; top: .5rem; right: .5rem;
padding: .35rem .6rem; font-weight: 600; line-height: 1;
border-radius: .4rem; box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.rf-bio-accordion .accordion-button:not(.collapsed) {
background: #4fae4f !important;
}
/*
body h1, body h2 {
color: #4fae4f;
font-weight: 800;
margin-bottom: 25px;
}
8?
p, ul, li, a, article, address {
font-size: 1.2rem;
font-weight: 500;
line-height: 1.6;
}
.content {
min-height: calc(100vh - 200px); w
position: relative;
}
/* Active Page */
.current-menu-item a,
.current_page_item a {
font-weight: 600 !important;
text-decoration: underline;
color: #4fae4f !important;
}
/* Back to top navigation */
.back-to-top {
position: fixed;
bottom: 40px;
right: 30px;
display: none;
background-color: #4fae4f;
color: white;
padding: 12px 18px;
border-radius: 50%;
font-size: 20px;
text-align: center;
text-decoration: none;
z-index: 999;
transition: opacity 0.3s ease-in-out;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
transition: 0.3s;
}
.back-to-top:hover {
background-color: #006839;
color: #fff;
transition: 0.3s;
}
/* Header */
.top-links {
float: right;
position: relative;
top: 9px;
}
.top-links .current_page_item a {
color: #fff !important;
}
.top-links ul {
padding-left: 0;
}
.top-links ul li {
display: inline-block;
text-transform: uppercase;
font-family: "Nunito Sans", sans-serif;
}
.top-links ul li a {
font-size: 16px;
font-weight: 600;
}
.top-nav {
min-height: 55px;
background-color: #00B140;
color: #fff;
}
.top-nav a {
color: #fff;
margin-right: 15px;
text-decoration: none;
letter-spacing: 0.8px;
}
.header-socials {
float: right;
position: relative;
top: -4px;
margin-left: 15px;
}
.header-socials a {
font-size: 1.6rem;
margin-right: 12px;
transition: 0.3s;
}
.header-socials a:hover {
color: #fff !important;
transition: 0.3s;
}
.header-search {
width: 75%;
}
.header-search .search-field {
padding-left: 40px;
}
.contact-info {
position: relative;
}
.contact-info .contact-block {
position: absolute;
right: 0;
}
.contact-info-header {
margin-top: 5px;
}
.nav-container {
position: absolute;
width: 100%;
z-index: 10;
}
.navbar {
/*box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);*/
background: transparent;
}
.navbar .arrow {
display: none;
}
@media (max-width:991px) {
.navbar .arrow {
display: block;
}
}
/*
.navbar .navbar-toggler,
.navbar .fa-bars:before {
color: #4fae4f;
}
*/
.main-menu li {
color: #fff;
text-transform: uppercase;
font-family: "Nunito Sans", sans-serif;
}
.main-menu li a {
margin-right: 5px;
font-weight: 500;
letter-spacing: 1.2px;
font-size: 16px;
color: #FFFFFF;
}
.main-menu li a:hover {
color: #00B140;
}
.logo {
width: 18rem;
top: -5px;
position: relative;
}
/* Desktop View Dropdown Menu (2nd Tier Child Pages) */
.dropdown-menu {
background-color: #000;
column-count: 3;
column-gap: 40px;
border-radius: 0 !important;
width: 40rem;
padding: 25px 10px;
}
.dropdown-menu li a {
text-transform: capitalize;
}
/* Keep the parent tab highlighted while submenu is open/hovered */
@media (min-width: 768px) {
/* highlight on hover/focus AND while the submenu itself is hovered */
.main-menu > li > a {
border-radius: .6rem .6rem 0 0;
}
.main-menu > li:hover > a {
border-radius: .6rem .6rem 0 0;
}
.main-menu > li:hover > a,
.main-menu > li:focus-within > a,
.main-menu > li:has(> .dropdown-menu:hover) > a {
background: #0b0b0b;
color: #fff !important;
position: relative;
z-index: 12; /* above the panel */
}
/* bridge any 1–8px gap so hover never flickers */
.main-menu > li { position: relative; }
.main-menu > li > a::after {
content: "";
position: absolute;
bottom: -8px;
height: 8px; /* adjust to your gap */
background: #0b0b0b; /* same as panel */
opacity: 0; pointer-events: none;
}
.main-menu > li:hover > a::after,
.main-menu > li:has(> .dropdown-menu:hover) > a::after {
opacity: 1;
}
/* make the panel butt up to the tab */
.navbar .dropdown { position: static; }
.navbar .dropdown-menu {
margin-top: 0; /* no gap above panel */
background: #0b0b0b;
}
}
/* Homepage */
.homepage-slider {
position: relative;
overflow: hidden;
margin-bottom: 15px !important;
}
.slider-slide {
background-size: cover;
background-position: center;
min-height: 55vh !important;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
color: white;
box-sizing: border-box;
box-shadow: inset 0 0 0 2000px rgba(41, 41, 41, 0.5) !important;
}
.slide-content {
padding: 2rem;
border-radius: 10px;
max-width: 800px;
margin-top: 80px;
}
.slide-header {
margin-bottom: 15px;
font-weight: 800;
font-size: 3rem;
line-height: 1.2;
}
.slide-button {
margin-top: 1rem;
display: inline-block;
padding: 0.50rem 1.0rem;
background-color: #fff;
color: #000;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: 0.3s;
}
.slide-button:hover {
background-color: #fff;
color: #fff;
}
.homepage-slider {
min-height: 55vh; /* or your expected height */
}
.homepage-slider {
visibility: hidden;
opacity: 0;
transition: opacity 0.5s ease;
}
.homepage-slider.slick-initialized {
visibility: visible;
opacity: 1;
}
/* Homepage Content */
.homepage-content {
margin: 3rem 0;
}
.slick-prev, .slick-next {
color: #fff !important;
font-size: 2rem;
z-index: 10;
}
.slick-prev {
left: -35px;
}
.slick-next {
right: -35px;
}
/* Homepage Flexible Content Fields */
.wf-kicker {
color: #39B54A;
font-size: 1.4rem;
}
.wf-title {
font-weight: 800 !important;
}
.wf-media { padding-right: 45px; }
.wf-btn-primary,
.wf-btn-secondary {
background: #39B54A;
color: #fff;
transition: 0.3s;
margin-right: 35px;
font-size: 1.2rem;
padding: 10px 35px;
}
.wf-btn-primary:hover,
.wf-btn-secondary:hover {
background: #006839;
color: #fff;
transition: 0.3s;
}
/* Header & Footer Search Styles */
.footer-search {
max-width: 300px;
margin: 1rem 0;
}
.search-input-wrapper {
display: flex;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
background-color: #fff;
}
.search-field {
flex-grow: 1;
padding: 0.5rem 0.75rem;
border: none;
font-size: 1rem;
}
.search-field:focus {
outline: none;
}
.search-submit {
background-color: #f1f1f1;
border: none;
padding: 0 0.75rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: #333;
}
.search-submit i {
pointer-events: none;
}
/* Homepage News, Stories & Events page */
/* ---------- Section + Heading ---------- */
.news-events {
padding: 56px 0;
background: #fff;
}
.news-events .news-events-grid {
max-width: 1140px;
}
.news-events h2 {
font-weight: 800;
font-size: clamp(28px, 3.2vw, 36px);
line-height: 1.1;
margin: 0 0 28px;
}
/* Optional small kicker line above the H2 (add CHECK OUT OUR before your H2 if you want) */
.news-events .kicker {
display: block;
text-align: center;
font-size: 13px;
letter-spacing: .12em;
font-weight: 700;
color: var(--brand-green, #0a8f4c);
text-transform: uppercase;
margin-bottom: 6px;
}
/* ---------- Cards ---------- */
.news-events .card {
text-align: left; /* override 'text-center' */
border: 1px solid #eceff1;
border-radius: 18px;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
overflow: hidden; /* keeps image radius clean */
transition: transform .18s ease, box-shadow .18s ease;
}
.news-events .card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
/* Image: consistent aspect + rounded top corners */
.news-events .card-img-top {
display: block;
width: 100%;
height: 200px; /* adjust to taste */
object-fit: cover;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
/* Body spacing */
.news-events .card-body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
}
/* Title link in brand green */
.news-events .card-title {
margin: 0 0 8px;
font-size: 18px;
line-height: 1.25;
font-weight: 800;
}
.news-events .card-title a {
color: var(--brand-green, #4fae4f);
text-decoration: none;
border-bottom: 2px solid transparent;
}
.news-events .card-title a:hover,
.news-events .card-title a:focus {
border-bottom-color: currentColor;
}
/* Excerpt */
.news-events .card-text {
color: #5f6b76;
font-size: 14px;
line-height: 1.5;
}
/* Hide/soften extras to match the mock */
.news-events .btn.btn-primary {
display: none; /* screenshot doesn’t show a button */
}
.news-events .card-footer {
display: none; /* hide published line to match mock */
border-top: 0;
background: transparent;
}
/* ---------- Grid spacing ---------- */
.news-events .row {
row-gap: 24px;
}
/* ---------- "More Stories…" link (optional) ---------- */
/* If you add a link like:
More Stories, News & Events →
it’ll match the mock style.
*/
.news-events .more-link {
text-align: center;
margin-top: 14px;
}
.news-events .more-link a {
display: inline-block;
font-weight: 700;
font-size: 14px;
color: #2b333a;
text-decoration: none;
}
.news-events .more-link a:hover {
color: var(--brand-green, #0a8f4c);
}
.news-events .short-title {
color: #4fae4f;
}
.news-media .read-more a {
color: #333;
text-decoration: none;
}
/* ---------- Responsive tweak ---------- */
@media (max-width: 767.98px) {
.news-events .card-img-top { height: 180px; }
}
/* Subpages & Blog Pages */
.breadcrumb-item a {
color: #423932;
text-decoration: none;
transition: 0.3s;
}
.breadcrumb-item a:hover {
color: #4fae4f;
transition: 0.3s;
}
.breadcrumb-wrapper .active {
font-weight: 600;
}
.sub-header,
.sub-ph {
position: relative;
min-height: 625px;
background-size: cover !important;
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
box-shadow: inset 0 0 0 2000px rgba(41, 41, 41, 0.5) !important;
top: -15px;
}
.sub-header .sub-title,
.sub-ph .sub-title {
color: #fff;
font-weight: 700;
font-size: 2.5rem;
margin: 0;
position: absolute;
bottom: 15px;
text-shadow: 2px 2px 2px #333;
letter-spacing: 0;
}
.sub-ph {
/*background: url('/wp-content/themes/bulldog/assets/images/JCESOM-8.jpg');*/
background-position: 50% 25% !important;
}
/* Tweak colors here */
:root { --brand-green: #39B54A; --sidebar-fg: #1f2937; --sidebar-muted: #6b7280; }
.section-nav { font-size: 0.95rem; }
.section-nav__level--2 { margin: 0; padding: 0; }
.section-nav__item { margin: .25rem 0; }
/* Level 2 links */
.section-nav__link--l2 {
display: block;
padding: .25rem 0;
color: var(--sidebar-fg);
text-decoration: none;
font-weight: 700;
}
.section-nav__item--l2.is-active > .section-nav__link--l2 {
color: var(--brand-green);
position: relative;
}
.section-nav__item--l2.is-active > .section-nav__link--l2::before {
content: "";
position: absolute;
left: -12px; top: 50%; transform: translateY(-50%);
width: 4px; height: 1.2em; background: var(--brand-green); border-radius: 2px;
}
/* Level 3 list visible only under active L2 */
.section-nav__level--3 { margin: .25rem 0 .5rem 0; padding-left: 0; }
.section-nav__link--l3 {
display: block;
padding: .15rem 0 .15rem 0.75rem;
color: #27251f !important;
text-decoration: none;
font-weight: 600;
font-size: .92em;
}
.section-nav__item--l3.is-current > .section-nav__link--l3 { color: var(--brand-green) !important; }
.section-nav__link--l3:hover { color: var(--brand-green); }
/* Optional: subdued non-active L2 when a child list is open */
.section-nav__item--l2:not(.is-active) .section-nav__link--l2 { color: var(--sidebar-fg); }
.section-nav__item--l2:not(.is-active) .section-nav__level--3 { display: none; }
/* Small screens spacing */
@media (max-width: 575.98px) {
.section-nav { margin-bottom: 1rem; }
}
.subpage-content a,
.subpage-content h1 {
color: var(--brand-green);
}
.subpage-content h1,
.subpage-content h2,
.subpage-content h3 {
font-weight: 800;
}
.subpage-content h2,
.subpage-content h3 {
margin: 25px 0;
}
/* BEGIN Subpage Flexible Page Sections ---------------- */
/* Section Header (Eyebrow + Title) */
.section-header .eyebrow {
letter-spacing: .08em; /* matches your screenshot vibe */
font-weight: 700;
font-size: 1.4rem;
}
.letter-spacing-lg { letter-spacing: .08em; } /* utility if you don't already have it */
/* Optional defaults if no color picked */
.section-header .eyebrow:not([style]) {
color: var(--bs-success, #28a745);
}
.media-desc-list h3 {
margin-top: 0;
}
/* END Subpage Flexible Page Sections ---------------- */
/* Scale the title nicely; tweak as desired or rely on Bootstrap display classes */
.section-header__title {
font-size: clamp(1.75rem, 2.2vw + 1rem, 2.5rem);
line-height: 1.15;
}
/* Subpage Sidebar */
.page-fullwidth .content-col { flex: 0 0 100%; max-width: 100%; }
.page-fullwidth .sidebar-col { display: none !important; }
/* Sidebar extras */
.sidebar-col .card + .card { margin-top: 1rem; }
.sidebar-subpages a { text-decoration: none; }
.sidebar-subpages a:hover { text-decoration: underline; }
.sidebar-col .card { border-radius: .5rem; }
.sidebar-col .sidebar-block + .sidebar-block { margin-top: 1rem; }
.sidebar-col .sidebar-richtext p { margin-bottom: .5rem; }
.object-fit-cover { object-fit: cover; }
.sidebar-nav .sidebar-nav-link{
display:block;
padding-left:.75rem;
position:relative;
text-decoration:none;
}
.sidebar-nav .sidebar-nav-link.is-active{
color:#009a44;
font-weight:700;
}
.sidebar-nav .sidebar-nav-link.is-active::before{
content:"";
position:absolute;
left:0; top:.35rem;
width:3px; height:18px; border-radius:2px;
background:#009a44;
}
.sidebar-nav-children .sidebar-nav-link{ padding-left:.5rem; }
/* Footer Styles */
footer {
background-color: #000;
}
footer a {
color: #fff;
transition: 0.3s;
}
footer .list-unstyled a {
color: #fff !important;
}
footer a:hover {
color: #4fae4f;
transition: 0.3s;
}
footer .contact-info {
color: #fff;
}
footer .contact-info a {
font-size: initial !important;
}
footer .ctas-col a {
transition: 0.3s;
}
footer .ctas-col a:hover {
background: #006839;
transition: 0.3s;
}
.footer-logo {
width: 10rem;
}
.footer-wrap-up {
background-color: #4fae4f;
}
.footer-socials a {
font-size: 2rem;
}
.copy a {
font-size: initial !important;
color: #fff;
transition: 0.3s;
}
.copy a:hover {
color: #fff;
transition: 0.3s;
}
/* Blog Post */
.blog-post h2 {
margin-bottom: 15px !important;
}
.blog-post h2 a {
color: #00B140;
font-weight: 800;
font-size: 1.5rem;
transition: 0.3s;
}
.blog-post h2 a:hover {
color: #00B140 !important;
transition: 0.3s;
}
.blog-read-more {
background: #00B140 !important;
border: none !important;
transition: 0.3s;
}
.blog-read-more:hover {
background: #fff !important;
transition: 0.3s;
}
.back-to-blog {
padding-left: 0 !important;
}
.search-results h2 a {
color: #00B140;
font-weight: 800;
font-size: 1.5rem;
}
.kw-search {
width: 475px;
float: right;
}
.kw-search i {
float: right;
margin-right: 10px;
margin-top: -27px;
position: relative;
z-index: 2;
color: #000000;
}
.page-numbers {
border: none !important;
}
.page-numbers li {
display: inline-block;
}
.page-numbers,
.pagination {
margin-top: 20px;
text-align: center;
}
.page-numbers ul,
.pagination ul {
width: 100%;
}
.page-numbers,
.pagination .page-numbers {
padding: 8px 12px;
margin: 2px;
border: 1px solid #ddd;
text-decoration: none;
color: #00B140;
}
.page-numbers a,
.pagination .page-numbers a {
transition: 0.3s;
}
.page-numbers a:hover,
.pagination .page-numbers a:hover {
color: #fff;
background: #006839;
transition: 0.3s;
}
.page-numbers.current,
.pagination .page-numbers.current {
background: #00B140;
color: #fff;
border-color: #00B140;
}
.archv-post {
border-bottom: 1px solid #e4e4e4;
margin: 50px 0;
}
.results-search .col-md-6 {
position: relative;
}
.results-search #number-of-results {
position: absolute;
bottom: 0;
}
#number-of-results {
font-weight: 600;
}
.kw-search {
width: 475px;
float: right;
}
.kw-search i {
float: right;
margin-right: 10px;
margin-top: -27px;
position: relative;
z-index: 2;
color: #000000;
}
form .filter,
form .clear {
border-radius: 25px;
background: none;
}
.search-dates .date {
display: inline-block;
}
.search-filter {
margin-right: 35px;
}
.search-filter .btn {
background: transparent;
color: #212529;
border: 2px solid #212529;
transition: 0.3s;
}
.search-filter .btn:hover {
background: #00B140;
color: #fff;
transition: 0.3s;
}
.archv-post .excerpt {
font-weight: 600;
font-size: 1rem;
}
.archv-post img {
border-radius: 10px;
float: right;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
opacity: 1;
}
/* Flexible Content Fields */
.media-text-split .content > :last-child { margin-bottom: 0; }
.media-frame iframe, .media-frame video { display:block; width:100%; height:100%; }
.media-text-split .content > :last-child { margin-bottom: 0; }
/* Keep paragraphs tight and image covering its area */
.cta-feature .content > :last-child { margin-bottom: 0; }
.object-fit-cover { object-fit: cover; }
.cta-feature .content > :last-child { margin-bottom: 0; }
.object-fit-cover { object-fit: cover; }
.accordion-header { margin: 0 !important; }
.accordion-button {
color: #00B140 !important;
font-size: 1.2rem;
font-weight: 700;
}
.accordion-media { width: 28px; height: 28px; display:inline-flex; align-items:center; justify-content:center; }
.accordion-media.accordion-logo { object-fit: contain; }
.accordion-media.fa-solid, .accordion-media.fa-regular, .accordion-media.fa-light, .accordion-media.fa-brands {
font-size: 1.25rem; line-height: 1;
}
.contact-page {
margin-top: 15%;
}
.contact-page h1 {
font-weight: 800 !important;
}
.contact-page .fas,
.contact-page i {
color: #fff;
}
.contact-page a {
color: #00B140;
}
/* Blog Sidebar */
.single-feat-img img {
width: 100% !important;
height: auto !important;
margin: 15px 0;
border-radius: 5px;
}
.sidebar {
min-height: 500px;
border-radius: 5px;
}
.sidebar,
.sidebar a {
color: #fff;
transition: 0.3s;
}
.sidebar a:hover {
color: #fff;
transition: 0.3s;
}
.pagination {
text-align: center;
}
.pagination ul {
padding-left: 0;
list-style: none;
display: inline-flex;
gap: 0.5rem;
}
.pagination li a,
.pagination li span {
display: block;
padding: 0.5rem 0.75rem;
border: 1px solid #ccc;
border-radius: 4px;
color: #007bff;
text-decoration: none;
}
.pagination li .current {
background-color: #007bff;
color: #fff;
border-color: #007bff;
}
/* Homepage Flexible Content Fields */
/* Homepage Hero Video */
/* HERO VIDEO */
.hero-video {
position: relative;
min-height: var(--hero-min-h, 85vh);
color: var(--hero-text, #fff);3
overflow: clip;
top: -14px;
}
.hero-video__media,
.hero-video__overlay {
position: absolute; inset: 0;
}
.wysi-band {
position: relative;
top: -14px;
}
.hero-video__bg {
width: 100%; height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
/* darken overlay for legibility (strength via CSS var) */
.hero-video__overlay {
background: var(--hero-overlay, rgba(0,0,0,.3));
}
/* centered content */
.hero-video__content {
position: relative;
z-index: 2;
min-height: inherit;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 6vh; padding-bottom: 6vh;
}
.hero-video .btn-outline-light {
border-width: 2px;
box-shadow: 0 2px 10px rgba(0,0,0,.15);
border-radius: 10px;
font-size: 1.6rem;
font-weight: 700;
}
/* Mobile tweaks */
@media (max-width: 575.98px) {
.hero-video__content { padding-top: 10vh; padding-bottom: 10vh; }
.hero-video .btn { width: 100%; max-width: 280px; }
}
/* Two-Column Rich Band (WYSIWYG + color pickers) */
.wysi-band {
background: var(--band-bg, #39B54A);
color: var(--band-fg, #fff);
}
.wysi-band h1, .wysi-band h2, .wysi-band h3,
.wysi-band h4, .wysi-band h5, .wysi-band h6 {
color: var(--band-fg, #fff);
margin: 0 0 .35em;
font-weight: 800;
line-height: 1.15;
}
.wysi-band p { margin-bottom: .6rem; }
.wysi-band a {
color: var(--band-fg, #fff);
text-decoration: none;
font-weight: 600;
font-size: 1.2rem;
}
.wysi-band a:hover {
text-decoration: underline;
}
.wysi-band__right ul {
list-style: none;
margin: 0;
padding: 0;
}
.wysi-band__right li + li { margin-top: .35rem; }
.wysi-band__right a::after {
content: " \2192"; /* → */
transform: translateX(0);
transition: transform .18s ease;
}
.wysi-band__right a:hover::after,
.wysi-band__right a:focus::after { transform: translateX(2px); }
@media (max-width: 767.98px) {
.wysi-band { padding-top: 1.25rem; padding-bottom: 1.25rem; }
}
/* Full-bleed image hero */
.image-hero {
position: relative;
min-height: var(--hero-min-h, 62vh);
color: var(--hero-text, #fff);
overflow: clip;
}
.image-hero__bg,
.image-hero__overlay { position: absolute; inset: 0; }
.image-hero__bg {
background-size: cover;
background-repeat: no-repeat;
background-position: var(--hero-bg-pos, center center);
transform: translateZ(0); /* helps rendering */
background-position: 50% 5%;
}
.image-hero__overlay { background: var(--hero-overlay, rgba(0,0,0,.32)); }
.image-hero__content {
position: relative;
z-index: 1;
min-height: inherit;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 6vh; padding-bottom: 6vh;
text-align: center;
}
/* WYSIWYG defaults inside the hero */
.image-hero__wysi { max-width: 900px; margin-inline: auto; }
.image-hero__wysi .kicker,
.image-hero__wysi small {
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 700;
opacity: .95;
}
.image-hero__wysi h1, .image-hero__wysi h2 {
color: var(--hero-text, #fff);
margin: .25rem 0 .75rem;
font-weight: 800;
line-height: 1.1;
font-size: clamp(28px, 5vw, 48px);
}
.image-hero__wysi p:first-child { font-size: 2rem; }
.image-hero__wysi p:nth-child(2) { font-size: 3rem; }
.image-hero__wysi p { color: var(--hero-text, #fff); margin-bottom: .6rem; }
.image-hero .btn-outline-light { border-width: 2px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
@media (max-width: 575.98px) {
.image-hero__content { padding-top: 10vh; padding-bottom: 10vh; }
.image-hero .btn { width: 100%; max-width: 280px; }
}
/* Media Queries */
@media (max-width: 1080px) {
.header-search {
width: 80%;
}
.sub-header .sub-title, .sub-ph .sub-title {
font-size: 2rem;
}
}
@media (min-width: 768px) {
.container {
max-width: 1200px;
}
.logo-sm {
display: block;
}
.logo-lg {
display: none;
}
}
@media (max-width:991px) {
.home-header-image {
min-height: 425px;
}
.sub-header .sub-title, .sub-ph .sub-title {
font-size: 1rem;
top: 70%;
left: 0;
right: 0;
}
.sub-header, .sub-ph {
min-height: 350px;
}
.slide-content {
margin-top: 0;
padding: 0;
}
.slide-content .slide-header {
font-size: 1.8rem;
}
.slide-content p,
.slide-content .slide-button {
font-size: 1rem;
}
.homepage-content {
margin-top: 1rem;
}
}
@media (max-width:845px) {
.logo {
width: 15rem;
}
}
@media (max-width: 767px) {
h1, h2 {
font-size: 1.5rem;
}
#navbarCollapse {
margin-top: 25px;
}
.contact-block {
text-align: center;
position: initial !important;
right: initial;
}
.contact-info-header {
margin-bottom: 10px;
}
.contact-page {
margin-top: 15px;
text-align: center;
}
.logo-sm {
display: block !important;
}
.logo-lg {
display: none !important;
}
.menu-sm {
display: block !important;
}
.nav-top {
display: none;
}
#menu-main-menu-1 {
margin-top: 20px !important;
}
.main-menu li {
border-bottom: 1px solid #e4e4e4;
}
.main-menu li:last-child {
border-bottom: none;
}
.main-menu li a {
text-transform: uppercase;
font-weight: 600;
background-color: initial;
color: initial !important;
margin: initial;
padding: 10px 15px !important;
width: initial;
text-align: center;
position: relative;
top: initial !important;
}
.main-menu li a:hover {
background-color: #00B140;
color: #fff !important;
transition: 0.3s;
}
.home-header-image {
min-height: 225px;
background-position: center center !important;
}
.footer-brand img {
width: 15rem !important;
margin-bottom: 25px;
}
.featured-links .btn {
margin-right: 15px !important;
}
.kw-search {
float: left;
}
.kw-search,
.issue-select select,
.initiative-select select {
width: 100% !important;
}
#posts-container {
margin-top: 65px !important;
}
}
@media (max-width:575px) {
.archv-post img {
margin-top: 15px;
float: left;
}
}
@media (max-width: 540px) {
.logo-sm {
width: 15rem;
}
.home-header-image {
min-height: 125px;
background-position: center center !important;
}
}
@media (max-width: 370px) {
.logo-sm {
width: 12rem;
}
}
@media (max-width: 345px) {
.logo {
width: 10rem;
}
.header-search {
width: 100%;
}
.header-socials {
float: initial !important;
text-align: center;
}
}
/* Departments & Programs */
.dept-alpha .dept-letter { color:#6c757d; text-decoration:none; }
.dept-alpha .dept-letter.active { color:#198754; font-weight:700; }
.dept-letter-head { font-weight:700; }
.dept-results a { text-decoration: underline; }
/* ---------- theme tokens ---------- */
:root {
--brand-green: #39B54A;
--ink: #222; /* primary text */
--muted: #6c757d; /* breadcrumb/labels */
--ui: #E7E8EA; /* light gray UI */
}
/* ---------- wrapper ---------- */
.dept-search { color: var(--ink); }
.dept-search .text-muted { color: var(--muted) !important; }
/* ---------- labels & fields ---------- */
.dept-search label {
display: block;
margin-bottom: .25rem;
font-weight: 600;
color: var(--muted);
font-size: .95rem;
}
.dept-search .form-control,
.dept-search .form-select {
border: 1px solid var(--ui);
border-radius: 5px;
background: #fff;
box-shadow: none;
transition: border-color .2s ease, box-shadow .2s ease;
height: calc(2.25rem + 2px);
padding: .375rem .75rem;
}
.dept-search .form-control::placeholder { color: #9aa1a8; }
.dept-search .form-control:focus,
.dept-search .form-select:focus {
border-color: var(--brand-green);
box-shadow: 0 0 0 .18rem rgba(57,181,74,.15);
}
/* ---------- buttons ---------- */
.dept-search #dept-search-submit.btn {
background: var(--brand-green);
border-color: var(--brand-green);
color: #fff;
font-weight: 700;
border-radius: 5px;
padding: .55rem 1.25rem;
}
.dept-search #dept-search-submit.btn:hover { filter: brightness(.95); color:#fff; }
.dept-search #dept-search-reset.btn {
background: var(--brand-green);
border-color: var(--brand-green);
color: #fff;
border-radius: 5px;
padding: .55rem 1.25rem;
font-weight: 600;
}
.dept-submit-btn {
text-align:center;
margin-top: 35px;
}
/* space between form rows on small screens */
@media (max-width: 767.98px) {
#dept-search-form > .col-12,
#dept-search-form > [class*="col-"] { margin-bottom: .5rem; }
}
/* ---------- A–Z glossary ---------- */
.dept-alpha {
text-align: center;
flex-wrap: wrap;
gap: 1rem 1.1rem;
align-items: center;
margin-top: 1.25rem;
letter-spacing: .18em;
font-size: 25px !important;
margin-top: 25px;
}
.dept-alpha .dept-letter {
border: 0;
background: transparent;
color: #2f2f2f;
opacity: .85;
font-weight: 600;
text-decoration: none;
padding: 0;
}
.dept-alpha .dept-letter:hover { color: var(--brand-green); opacity: 1; }
.dept-alpha .dept-letter.active {
color: var(--brand-green);
position: relative;
}
.dept-alpha .dept-letter.active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 2px; background: var(--brand-green);
}
.dept-alpha .dept-letter[aria-disabled="true"] { opacity: .35; pointer-events: none; }
/* ---------- results list ---------- */
.dept-results { margin-top: .75rem; }
.dept-results .row { row-gap: 2rem; }
.dept-letter-head {
background: #EFEFEF;
color: #2a2f33;
font-weight: 800;
border-radius: 6px;
padding: .65rem 1rem;
display: inline-block;
margin: 1rem 0 .75rem;
width: 100% !important;
}
.dept-results p { margin: 0 0 .5rem; }
.dept-results a {
color: var(--brand-green);
text-decoration: underline;
text-underline-offset: 2px;
}
.dept-results a:hover { opacity: .85; }
/* Optional: nested items (e.g., “Divisions”) if present */
.dept-results .is-nested { padding-left: 1rem; border-left: 2px solid var(--ui); margin-left: .25rem; }
/* ---------- tiny breadcrumb nudge (if needed above the search) ---------- */
.breadcrumb-wrapper { font-size: .85rem; margin-bottom: .5rem; }
.breadcrumb .breadcrumb-item a { color: var(--muted); }
.breadcrumb .breadcrumb-item.active { font-weight: 700; color: var(--ink); }
.social-sharing-buttons img {
width: initial !important;
height: initial !important;
}
/* Prefer WOFF2/WOFF if you can generate them; fall back to TTF/OTF */
@font-face{
font-family: "No Debate";
src:
url("/assets/fonts/No_Debate.ttf") format("truetype"),
url("/assets/fonts/No_Debate.otf") format("opentype");
}
@font-face{
font-family: "Bison Bold";
src:
url("/assets/fonts/BISON-BOLD.TTF") format("truetype"),
url("/assets/fonts/BISON-BOLD.TTF") format("opentype");
}
.hero-video__title .main {
font-family: "Bison Bold";
font-size: 7rem;
font-weight: 600;
margin-right: 12px;
}
.hero-video__title {
margin-bottom: 35px;
}
.hero-video__title .main,
.hero-video__title .accent {
text-shadow: 2px 2px 2px #333;
}
.hero-video__title .accent {
font-family: "No Debate";
font-size: clamp(36px, 6vw, 120px);
line-height: 1.05;
}
/* Nav Mega Menu */
:root {
--brand-green: #39B54A;
--panel-bg: #101010;
--panel-fg: #ffffff;
--panel-fg-dim: rgba(255,255,255,.9);
}
/* header / navbar */
.site-header { z-index: 1050; }
.main-navbar {
background: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.0));
backdrop-filter: blur(2px);
padding-top: 20px;
}
.main-navbar .navbar-toggler {
border-color: rgba(255,255,255,.35);
}
.main-navbar .navbar-toggler-icon {
background-image: none;
width: 1.5rem; height: 1.5rem; position: relative;
}
.main-navbar .navbar-toggler-icon::before,
.main-navbar .navbar-toggler-icon::after {
content:""; position:absolute; left:0; right:0; height:2px; background:#fff;
}
.main-navbar .navbar-toggler-icon::before { top: 6px; }
.main-navbar .navbar-toggler-icon::after { bottom: 6px; }
.navbar-nav .nav-link {
color: #fff; text-transform: uppercase; letter-spacing: .04em;
padding: 1rem 1rem;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus { color: #fff; text-decoration: none; }
/* full-width mega panel (dropdown for depth 0) */
.navbar .dropdown-menu.mega-panel {
left: 0; right: 0; top: 100%;
width: 100%;
margin-top: 0;
padding: 2rem;
background: var(--panel-bg);
border: 0; border-radius: .5rem;
color: var(--panel-fg);
}
/* grid layout of columns */
@media (min-width: 992px) {
.navbar .dropdown-menu.mega-panel {
display: grid;
grid-template-columns: repeat(3, minmax(240px, 1fr)); /* 3 cols desktop */
gap: 2.5rem;
}
}
@media (min-width: 1400px) {
.navbar .dropdown-menu.mega-panel {
grid-template-columns: repeat(4, minmax(240px, 1fr)); /* upscale to 4 on xl */
}
}
/* each depth-1 LI is a column */
.mega-col > .mega-title {
display: block;
color: var(--panel-fg);
font-weight: 800;
text-transform: uppercase;
letter-spacing: .03em;
margin: 0 0 .75rem 0;
text-decoration: none;
}
.dropdown-menu a { color: #fff !important; }
.dropdown-menu a:hover { color: var(--brand-green) !important; }
.mega-col > .mega-title:hover { text-decoration: none; color: var(--brand-green); }
/* green underline like Marshall */
.mega-col > .mega-title::after {
content:"";
display:block;
height: 2px;
width: 100%;
margin-top: .6rem;
background: linear-gradient(90deg, var(--brand-green), rgba(255,255,255,.2));
}
/* inner list links */
.mega-list .dropdown-item {
color: var(--panel-fg-dim);
padding: .5rem 0;
white-space: normal;
}
.mega-list .dropdown-item:hover,
.mega-list .dropdown-item:focus {
color: #fff;
text-decoration: underline;
background: transparent;
}
/* keep the active tab visually connected while hovering the panel */
@media (min-width: 992px) {
.navbar .nav-item.dropdown:hover > .nav-link,
.navbar .nav-item.dropdown:focus-within > .nav-link {
color: #fff;
}
/* open on hover/focus without JS class toggling */
.navbar .nav-item.dropdown:hover > .dropdown-menu.mega-panel,
.navbar .nav-item.dropdown:focus-within > .dropdown-menu.mega-panel {
display: grid;
}
}
/* default dropdown hidden except when Bootstrap shows it (mobile) or our hover rule (desktop) */
.navbar .dropdown-menu.mega-panel { display: none; }
.mobile-menu { display: none; }
/* mobile: dropdown becomes stacked list inside collapse */
@media (max-width: 991.98px) {
.site-header { display: none; }
.mobile-menu { display: block; }
.navbar .dropdown-menu.mega-panel {
position: static;
display: none; /* was: block */
padding: 1rem 0 0;
background: transparent;
color: inherit;
border-radius: 0;
}
/*.navbar .dropdown-menu.mega-panel.show { display: block; }*/
.mega-col { padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.1); }
.mega-col:first-child { border-top: 0; }
.mega-col > .mega-title::after { background: rgba(255,255,255,.2); }
.mega-list .dropdown-item { padding: .35rem 0; }
}
/* <992px: make mega panels behave like accordions with Bootstrap Collapse */
@media (max-width: 991.98px) {
.navbar .dropdown-menu.mega-panel {
position: static;
/* no display property here; Collapse will handle it */
padding: .75rem 0 0;
background: transparent;
color: inherit;
border-radius: 0;
}
}
/* Optional: rotate a caret when a section is open (if your top link shows one) */
@media (max-width: 991.98px) {
.navbar .nav-item.dropdown > .nav-link.dropdown-toggle::after {
content: "▾";
margin-left: .5rem;
transition: transform .2s ease;
}
.navbar .nav-item.dropdown > .nav-link[aria-expanded="true"]::after {
transform: rotate(180deg);
}
}
/* accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
.navbar * { transition: none !important; }
}
/* 1) Constrain the mega panel to the same width as the navbar .container */
.navbar .container { position: relative; } /* positioning context */
.navbar .navbar-nav > li.dropdown { position: static; } /* so the menu can span container */
.navbar .dropdown-menu.mega-panel {
position: absolute; /* anchor to the .container above */
left: 0;
right: 0; /* now it’s flush with the container edges */
top: 91%;
width: auto; /* no full-viewport stretching */
margin-top: 0;
border-radius: 0 0 .5rem .5rem; /* optional: only round the bottom like Marshall */
z-index: 1000;
}
/* Optional: give the panel the same horizontal padding as .container on lg+ */
@media (min-width: 992px) {
.navbar .dropdown-menu.mega-panel {
padding-left: calc(var(--bs-gutter-x, 1.5rem));
padding-right: calc(var(--bs-gutter-x, 1.5rem));
}
}
/* 2) Keep the parent tab black while hovering anywhere in its panel */
@media (min-width: 992px) {
/* when the dropdown (or anything inside it) is hovered/focused, style the parent link */
.navbar .nav-item.dropdown:hover > .nav-link,
.navbar .nav-item.dropdown:focus-within > .nav-link {
background: var(--panel-bg);
color: #fff;
border-radius: .5rem .5rem 0 0; /* connects visually with the panel */
}
/* ensure the panel is visible on hover/focus */
.navbar .nav-item.dropdown:hover > .dropdown-menu.mega-panel,
.navbar .nav-item.dropdown:focus-within > .dropdown-menu.mega-panel {
display: grid;
}
}
/* (nice-to-have) remove any tiny seam between tab and panel on hi-dpi screens */
.navbar .nav-item.dropdown > .nav-link { margin-bottom: -1px; }
/* Fix green underline positioning under mega titles */
.mega-col > .mega-title {
position: relative; /* give ::after a positioning context */
display: inline-block; /* prevents full-width underline float glitches */
padding-bottom: 0.4rem; /* ensures spacing between text and underline */
}
.mega-col > .mega-title::after {
position: absolute;
left: 0;
bottom: 0; /* move underline to bottom edge of title */
height: 2px;
width: 100%;
content: "";
background: linear-gradient(90deg, var(--brand-green), rgba(255,255,255,.2));
}
@media (max-width:991px) {
.mobile-menu .dropdown-menu {
column-count: initial;
column-gap: initial;
width: initial;
background: #27251f;
padding: 0 !important;
}
.mobile-menu .navbar-collapse {
background: #00B140;
}
.navbar-nav .nav-link,
.mobile-menu .dropdown-menu a {
color: #fff !important;
text-decoration: none;
}
.mobile-menu .menu-item {
position: relative;
}
.mobile-menu .arrow {
position: absolute;
float: right;
right: 20px;
top: 10px;
z-index: 99999;
}
.mobile-menu .fa-bars {
color: #fff;
}
}
:root { --brand-green: #39B54A; }
.btn-brand-green {
background-color: var(--brand-green);
border-color: var(--brand-green);
color: #fff;
}
.btn-brand-green:hover,
.btn-brand-green:focus {
filter: brightness(0.92);
color: #fff;
}
/* keep thumbs small & consistent */
.facility-thumb { aspect-ratio: 3 / 2; } /* tweak to 4/3 if preferred */
.facility-thumb img { object-fit: cover; }
.location a {
color: var(--brand-green);
}
.btn-brand-green {
color: #fff !important;
}
/* Keep logos tidy next to titles */
.accordion-logo { height: 28px; width: auto; }
.accordion-title { line-height: 1.2; }
/* Optional: flush variant look without borders between items */
.accordion-section .accordion .accordion-item {
border: 1px solid #e9ecef;
border-bottom: none;
}
.acoordion-section .accordion { box-shadow: 0 10px 30px rgba(0, 0, 0, .08) !important; }
.accordion-section .accordion .accordion-item:last-child {
border: 1px solid #e9ecef;
}
.btn-success {
color: #fff !important;
}
.card-grid-item { transition: transform .2s ease; }
.card-grid-item {
transition: transform .25s ease, box-shadow .25s ease;
box-shadow: 0 0 0 rgba(0,0,0,0); /* no shadow by default */
}
.card-grid-item:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0,0,0,0.25);
transition: transform .25s ease, box-shadow .25s ease;
}
.card-grid-overlay { background: linear-gradient(180deg, rgba(0,0,0,.0) 40%, rgba(0,0,0,.55) 100%); pointer-events:none; }
.card-grid-title {
letter-spacing:.04em; text-transform:uppercase; font-size:.85rem;
background: rgba(0,0,0,.35); backdrop-filter: blur(2px);
}
.landing-card-grid-3 h1,
.landing-card-grid-3 h2,
.landing-card-grid-3 h3 {
color: #fff;
text-align: center;
}
.landing-card-grid-3 .container-fluid { padding: 0 45px; }
/* Landing Subpage — card grid spacing & overlay */
.landing-card-grid-3 .card-grid-item { transition: transform .2s ease; }
.landing-card-grid-3 .card-grid-item:hover { transform: translateY(-2px); }
.landing-card-grid-3 .card-grid-overlay {
background: linear-gradient(180deg, rgba(0,0,0,.0) 40%, rgba(0,0,0,.55) 100%);
pointer-events: none;
}
.landing-card-grid-3 .card-grid-title {
letter-spacing: .04em;
text-transform: uppercase;
font-size: .9rem;
background: rgba(0,0,0,.35);
backdrop-filter: blur(2px);
}
.landing-rich-text .rich-text-content :is(h1,h2,h3){ margin-top:.5rem }
.landing-rich-text .rich-text-content p{ margin-bottom:2rem }
@media (max-width:1262px) {
.landing-rich-text {
padding: 15px !important;
}
}
.landing-image-text-split .text-content p {
margin-bottom: 1rem;
}
.landing-image-text-split img {
transition: transform .3s ease, box-shadow .3s ease;
}
.landing-image-text-split img:hover {
transform: scale(1.02);
box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}
/* Residencies/Fellowships Program Grid */
.rfpg-card { border-radius: 5px; overflow: hidden; background: #fff; }
.rfpg-media { position: relative; background: #f5f7f8; }
.rfpg-thumb { display:block; aspect-ratio: 16/9; object-fit: cover; }
.rfpg-frame {
position:absolute; inset:12px;
border-radius: 16px; border:2px solid rgba(0,0,0,0.06);
pointer-events:none; transition: border-color .2s ease, transform .2s ease;
}
.rfpg-card:hover .rfpg-frame { border-color: rgba(25,135,84,.35); transform: scale(1.01); }
.rfpg-title { letter-spacing: .03em; }
.rfpg-grid .btn-link { font-weight: 600; }
/* ─────────── Residencies & Fellowships Program Grid ─────────── */
.rfpg-card {
border-radius: 12px;
overflow: hidden;
background: #fff;
transition: transform .2s ease, box-shadow .2s ease;
}
.rfpg-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}
.rfpg-media {
position: relative;
background: #f8f9fa;
}
.rfpg-thumb {
display: block;
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.rfpg-frame {
position: absolute;
inset: 10px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.06);
pointer-events: none;
transition: border-color .25s ease;
}
.rfpg-card:hover .rfpg-frame {
border-color: rgba(25,135,84,0.35); /* Bootstrap primary greenish */
}
.rfpg-title {
font-size: 1rem;
letter-spacing: 0.03em;
}
.rfpg-grid .btn-link {
font-weight: 600;
color: var(--bs-primary);
}
.rfpg-grid .btn-link:hover {
text-decoration: underline;
}
/* ─────────── Hover to Black Effect for RF Program Cards ─────────── */
.rfpg-card {
position: relative;
overflow: hidden;
background: #fff;
color: #212529;
transition: all 0.3s ease;
}
.rfpg-card .card-body {
transition: color 0.3s ease;
}
.rfpg-media {
position: relative;
background: #f8f9fa;
overflow: hidden;
}
.rfpg-thumb {
display: block;
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
transition: transform 0.5s ease;
}
.rfpg-frame {
position: absolute;
inset: 10px;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.06);
pointer-events: none;
transition: border-color 0.3s ease, opacity 0.3s ease;
}
/* 🟩 Hover behavior */
.rfpg-card:hover {
background-color: #000;
color: #fff;
transform: translateY(-4px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}
.rfpg-card:hover .rfpg-thumb {
transform: scale(1.05);
filter: brightness(0.6);
}
.rfpg-card:hover .card-body {
color: #fff;
}
.rfpg-card:hover .rfpg-title {
color: #fff;
}
.rfpg-card:hover .rfpg-frame {
border-color: rgba(0, 255, 0, 0.4); /* subtle green glow */
opacity: 1;
}
/* Buttons on hover */
.rfpg-card:hover .btn-outline-primary {
color: #fff;
border-color: #fff;
}
.rfpg-card:hover .btn-outline-primary:hover {
background: #fff;
color: #000;
}
.rfpg-card:hover .btn-link {
color: #00ff80;
text-decoration: underline;
}
/* Keep smooth scaling & spacing */
.rfpg-card .card-body {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.rfpg-card:hover .rfpg-frame {
border-color: #00b140; /* Marshall green */
}
.rfpg-card:hover .btn-link {
color: #00b140;
}
.rfpg-title a {
color: inherit;
text-decoration: none;
transition: color .3s ease;
}
.rfpg-card:hover .rfpg-title a {
color: #fff;
}
.rfpg-card .btn-outline-primary {
color: #00b140;
border-color: #00b140;
}
.rfpg-title a {
color: inherit;
text-decoration: none;
transition: color .3s ease;
}
.rfpg-card:hover .rfpg-title a {
color: #fff;
}
.rfpg-grid .btn-link {
font-weight: 600;
color: #27251f;
}
.rfpg-grid .btn-link:hover {
text-decoration: underline;
}
.rfpg-grid .modal-title {
color: #00b140;
font-weight: 800;
}
.rfpg-grid .modal-footer .btn-full-page {
background: transparent;
border: 1px solid #00b140;
}
.rfpg-grid .modal-footer .btn-full-page:hover {
background: #00b140;
}
:root { --brand-green:#009a44; }
/* Make the jump nav stick in the sidebar */
.sticky-jump-nav {
position: sticky;
top: 1rem; /* adjust to sit below your fixed header */
}
/* Links & active highlight */
.jump-link {
text-decoration: none;
color: #212529;
border-left: 3px solid transparent;
padding-left: .5rem;
transition: color .15s, border-color .15s;
}
.jump-link:hover { color: var(--brand-green); }
.jump-link.is-active {
color: var(--brand-green);
border-left-color: var(--brand-green);
font-weight: 600;
}
/* Headings themselves pick up per-section scroll margin if set */
.section-jump-anchor { scroll-margin-top: 10px !important; } /* default if you want */
:root { --brand-green:#009a44; }
.sticky-jump-nav { position: sticky; top: 1rem; } /* adjust for your header */
.jump-nav .nav-link {
position: relative;
color: #212529;
border-left: 3px solid transparent;
padding-left: .5rem;
text-decoration: none;
transition: color .15s, border-color .15s;
}
.jump-nav .nav-link:hover { color: var(--brand-green); }
.jump-nav .nav-link.active {
color: var(--brand-green);
border-left-color: var(--brand-green);
font-weight: 600;
}
/* Helpful default if you didn’t set per-section scroll-margin-top */
/*.section-jump-anchor { scroll-margin-top: 80px; } /* match your offset */*/
:root { --spy-offset: 120px; } /* match your sticky header height (or BS offset) */
.section-jump-anchor { scroll-margin-top: var(--spy-offset); }
/* enforce a safe gap after each jump heading */
.section-jump-anchor + * {
margin-top: max(1rem, calc(var(--spy-offset) + 8px));
}
.section-header-jump {
border-top: 1px solid rgba(0,0,0,.125);
}
/* Text w/ Wrapped Image */
.twimg-figure{
/* float creates the wrap; width via custom property */
float: none; /* default mobile */
width: min(var(--twimg-w, 300px), 45%);
max-width: 100%;
margin: 0 0 1rem 0;
shape-outside: inset(0 round 12px); /* nicer wrap on rounded corners */
}
.twimg-img{ display:block; width:100%; height:auto; }
.twimg-caption{ line-height:1.2; }
/* Desktop floats + margins */
@media (min-width: 768px){
.twimg-float-start{ float: left; margin: 0 1.25rem 1rem 0; }
.twimg-float-end { float: right; margin: 0 0 1rem 1.25rem; }
}
/* If the image should never exceed ~40% of line length */
@media (min-width: 992px){
.twimg-figure{ width: min(var(--twimg-w, 300px), 40%); }
}
/* Make sure long images don't crush small paragraphs */
.twimg-body p:last-child{ margin-bottom: 0; }
.twimg-circle .twimg-img{ border-radius: 999px; }
.twimg-circle{ shape-outside: circle(50%); }
.bd-spacer { height: var(--sp-h, 24px); }
.jump-nav .nav-link.is-active{
color:#009a44;
border-left-color:#009a44;
font-weight:600;
}
/* Pseudo heading above links that start a group */
/*
.jump-nav .nav-link[data-group]::before{
content: attr(data-group);
display: block;
margin: .75rem 0 .25rem;
color: #6c757d;
text-transform: uppercase;
font-size: .75rem;
letter-spacing: .02em;
font-weight: 600;
position: absolute;
}
*/
/* Optional: thin rule between groups (except when the title is the very first item) */
.jump-nav .nav-link[data-group]:not(:first-child)::after{
content: "";
display: block;
height: 1px;
background: rgba(0,0,0,.08);
margin: .5rem 0 .5rem;
}
/* Your existing active styling works unchanged */
.jump-nav .nav-link.active{
color:#009a44;
border-left:3px solid #009a44;
font-weight:600;
padding-left:.5rem;
}
.jump-pg-title {
color: #39B54A !important;
}
/* Band backgrounds */
.gcb-band { position: relative; }
.gcb-green { background:#0FA24B; /* brand green */ color:#fff; }
.gcb-dark { background:#111; color:#fff; }
.gcb-light { background:#f5f7f8; }
/* Heading inside band */
.gcb-heading { color:#fff; font-weight:800; letter-spacing:.5px; }
/* Card */
.gcb-card {
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,.12);
transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.gcb-card:hover {
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(0,0,0,.18);
}
/* Media frame accent (thin green inner stroke like screenshot) */
.gcb-media { position:relative; }
.gcb-media-frame {
position:absolute; inset:10px;
border:3px solid rgba(7,128,56,.65);
border-radius:8px;
pointer-events:none;
}
/* Body */
.gcb-body { padding:20px 22px 22px; }
.gcb-title { margin:0; color:#111; }
.gcb-teaser { color:#444; }
.gcb-cta { font-weight:700; color:#0FA24B; }
/* Hover = dark card (like the last tile in screenshot) */
.gcb-card:hover .gcb-body,
.gcb-card:hover { background:#111; color:#fff; }
.gcb-card:hover .gcb-title { color:#fff; }
.gcb-card:hover .gcb-teaser { color:#e6e6e6; }
.gcb-card:hover .gcb-cta { color:#9CF0B8; } /* bright green on dark */
/* Make text readable on green band */
.gcb-green .gcb-heading { color:#fff; }
/* wrapper backgrounds */
.spcg-wrap { position: relative; }
.spcg-green { background: #129d4a; } /* match your green */
.spcg-light { background: #f7f9fb; }
.spcg-dark { background: #111; }
.spcg-wrap .card { border: 0; border-radius: 16px; }
/* image area */
.spcg-media { border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.spcg-img { width: 100%; height: 100%; object-fit: cover; border-top-left-radius: 16px; border-top-right-radius: 16px; }
.spcg-ph { width:100%; height:100%; background: #e9ecef; border-top-left-radius:16px; border-top-right-radius:16px; }
/* make sure the media box clips the overlay and shares the radius */
.spcg-media {
position: relative; /* .ratio already is, but safe */
overflow: hidden; /* keep the border inside */
border-radius: 12px; /* whatever you want the outer radius to be */
}
/* the green inner border */
.spcg-border {
position: absolute;
inset: 10px 12px 1px 14px;
box-sizing: border-box;
border: 3px solid rgba(57, 181, 74, .6);
border-radius: calc(12px - 3px);
pointer-events: none;
left: 0;
right: 0;
top: 7px;
bottom: 0px;
width: 95%;
margin: 0 auto;
height: 90%;
}
@media (max-width: 991px) {
.spcg-border {
top: 12px;
}
}
@media (max-width: 767px) {
.spcg-border {
top: 7px;
}
}
@media (max-width: 575px) {
.spcg-border {
top: 10px;
}
}
/* title/excerpt/link */
.spcg-title { letter-spacing:.02em; }
.spcg-excerpt { color:#5b6b66; }
/* hover to darken like the sample’s last card */
.spcg-card::after{
content:""; position:absolute; inset:0; background:transparent; transition:background .2s ease;
border-radius:16px;
}/* --- fix stacking + hover --- */
.spcg-card { background:#fff; border-radius:16px; transition:background .2s ease, transform .2s ease; }
.spcg-card .card-body { position: relative; z-index: 2; } /* bring text above overlays */
.spcg-media { position: relative; overflow: hidden; border-top-left-radius:16px; border-top-right-radius:16px; }
/* darken the IMAGE only on hover */
.spcg-media::after{
content:"";
position:absolute; inset:0;
background:transparent;
transition: background .2s ease;
border-top-left-radius:16px; border-top-right-radius:16px;
z-index:1; /* sits above img, below the border & text */
}
.spcg-card:hover .spcg-media::after{ background: rgba(0,0,0,.55); }
/* optional: also darken the card body background like your black tile */
.spcg-card:hover { background:#0f0f0f; transform: translateY(-2px); }
/* keep the frame + text visible on hover */
.spcg-card:hover .spcg-border{ border-color: rgba(255,255,255,.55); }
.spcg-card:hover .spcg-title,
.spcg-card:hover .spcg-excerpt,
.spcg-card:hover .spcg-link { color:#fff !important; }
.spcg-link { color: #4fae4f; }
/* make sure the stretched link remains clickable above everything */
.spcg-card .stretched-link{ z-index:3; color: #4fae4f; }
.section-simple-heading {
/* opinionated but easy to tweak */
letter-spacing: .2px;
}
/* Optional: keep icons tight and rows tidy */
.section-button-group .btn i { line-height: 1; vertical-align: -2px; }
.section-button-group .button-grid-two { max-width: 520px; } /* if you want a tighter block when left/center aligned */
.bd-slider { margin: 1rem 0; }
.bd-slider .bd-slider__slide img { width:100%; height:auto; display:block; border-radius:.5rem; }
/* Sizing shells – tune for your layout */
.bd-slider--sm { max-width: 420px; }
.bd-slider--md { max-width: 640px; }
.bd-slider--lg { max-width: 860px; }
.bd-slider--xl { max-width: 1140px; }
.bd-slider--full { width: 100%; }
/* Slider Aspect Ratio */
.ratio-16x9 .bd-slider__slide { position:relative; }
.ratio-16x9 .bd-slider__slide::before { content:""; display:block; padding-top:56.25%; }
.ratio-16x9 .bd-slider__slide > * { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Modal Blocks */
.section-modal .btn { white-space: normal; }
.section-modal .modal-body > *:first-child { margin-top: 0; }
.section-modal .modal-body > *:last-child { margin-bottom: 0; }
/* Theme green button used by Content Modal */
.btn-theme {
background-color:#4fae4f;
border-color:#4fae4f;
color:#fff;
}
.btn-theme:hover,
.btn-theme:focus {
background-color:#419e41; /* a shade darker */
border-color:#3a8f3a;
color:#fff;
}
.modal .modal-dialog { max-width: 600px; }
.modal .modal-dialog.modal-lg { max-width: 800px; } /* tune as desired */
.modal .modal-dialog.modal-xl { max-width: 1140px; }
.btn .bdm-fa {
display:inline-block;
font-size:1em; /* inherit button size */
line-height:1;
vertical-align:-0.125em;
}
.btn .bdm-fa + .bdm-label { margin-left:.5rem; } /* icon left */
.btn .bdm-label + .bdm-fa { margin-left:.5rem; } /* icon right */
.section-modal-title { color: #4fae4f; font-weight: 800; font-size: 1.8rem; }
/* ===== Tabs skin (section-tabs) ===== */
.flex-tabs {
/* whole block shadow */
background: #fff;
border-radius: 10px;
/*box-shadow: 0 10px 30px rgba(0,0,0,.08);*/
}
/* Tabs bar */
.flex-tabs .nav-tabs {
border-bottom: 1px solid #e6e9ef;
}
/* Tab buttons */
.flex-tabs .nav-tabs .nav-link {
color: #4fae4f; /* brand green */
font-weight: 700; /* bolder titles */
padding: .6rem 1rem;
border: 1px solid transparent; /* allow active state to align with panel */
border-top-left-radius: .5rem;
border-top-right-radius: .5rem;
background: transparent;
}
/* hover/focus for accessibility */
.flex-tabs .nav-tabs .nav-link:hover,
.flex-tabs .nav-tabs .nav-link:focus {
color: #3e9a3e;
}
/* Active tab: make its bottom border blend into the content panel */
.flex-tabs .nav-tabs .nav-link.active {
color: #4fae4f;
background: #fff;
border-color: #e6e9ef #e6e9ef #fff; /* bottom is white so it merges with panel */
}
/* Content panel */
.flex-tabs .tab-content {
border: 1px solid #e6e9ef;
border-top: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 1.25rem;
box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
/* Optional: space the whole block from neighbors */
.flex-tabs.my-3 { margin: 1.25rem 0; }
/* (Optional) little tweak if you use the filter bar above the tabs */
.flex-tabs .bc-tabset-filter .nav .nav-link {
padding: .25rem .65rem;
font-weight: 600;
}
/* Video card shadow + rounding */
.video-frame{
border-radius: 12px;
overflow: hidden; /* rounds the iframe corners */
box-shadow: 0 4px 12px rgba(0,0,0,.12);
border: 1px solid #e4e4e4;
transition: box-shadow .2s ease, transform .2s ease;
}
/* Make sure the embedded player fills the frame */
.video-frame iframe,
.video-frame video{
width: 100%;
height: 100%;
display: block;
}
/* Subtle lift on hover */
.video-item:hover .video-frame,
.video-card:hover .video-frame{
box-shadow: 0 10px 28px rgba(0,0,0,.18);
transform: translateY(-2px);
}
/* Accessible focus state for keyboard users */
.video-card:focus-within .video-frame{
outline: 2px solid #1e7e34; /* or your brand green */
outline-offset: 2px;
}
/* Profile grid skins (adapt these to match your card grid themes) */
.pmg-wrap { --pmg-title-mb: 1.25rem; }
.pmg-green { background: #eaf7ec; }
.pmg-light { background: #f8f9fa; }
.pmg-dark { background: #111; color: #fff; }
.pmg-title { margin-bottom: var(--pmg-title-mb); }
/* Cards */
.profile-card .profile-media { cursor: pointer; }
.profile-card .profile-media img { border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
.profile-card .pmg-avatar { object-fit: cover; }
/* Make card heights consistent without awkward stretching */
.profile-card { border-radius: .5rem; overflow: hidden; }
.profile-idc-section .ratio-3x4 { aspect-ratio: 3/4; }
.profile-idc-section .profile-desc p { margin-bottom: .5rem; }
.profile-idc-section .profile-body ul { margin-bottom: 1rem; }
.profile-idc { border-bottom: 1px solid #e4e4e4 }
.profile-grid-trio img, .profile-idc img { position: relative; }