/* ==========================================================================
HEADER + MAIN NAVIGATION + MEGA MENU — standalone stylesheet
Extracted from the FIU-IND compliance site build.
DEPENDENCIES — this file assumes the following are already defined
elsewhere on the page (either paste them above this file, or keep
them in your main stylesheet):
1. CSS variables (:root) — colors, fonts:
--ink, --blue, --blue-dark, --red, --red-dark,
--surface, --surface-alt, --muted, --border,
--font-display, --font-body
2. Button classes used by the nav CTAs:
.btn-primary-custom, .btn-primary-custom:hover,
.btn-outline-custom, .btn-outline-custom:hover,
.btn-sm-custom
3. Google Fonts + Bootstrap 5 loaded in :
The dependency blocks (1) and (2) are included below, commented out,
for convenience — uncomment and paste at the top of your stylesheet
if you don't already have them.
========================================================================== */
/*
:root {
--ink: #0B0F14;
--blue: #1D4ED8;
--blue-dark: #1B3FB0;
--red: #DC2626;
--red-dark: #B91C1C;
--surface: #FFFFFF;
--surface-alt: #F5F7FA;
--muted: #56606B;
--border: #E4E8EC;
--font-display: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.btn-primary-custom {
background: linear-gradient(135deg, #FF5F5F 0%, #E63946 55%, #C81E3A 100%);
color: #fff;
border: 1px solid #C81E3A;
padding: 12px 26px;
border-radius: 6px;
font-weight: 600;
font-size: 0.95rem;
transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary-custom:hover {
filter: brightness(0.92);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(200, 30, 58, 0.32);
}
.btn-outline-custom {
background: transparent;
color: var(--red);
border: 1px solid var(--red);
padding: 10px 22px;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
display: inline-block;
transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn-outline-custom:hover {
background: var(--red);
color: #fff;
transform: translateY(-2px);
}
.btn-sm-custom { padding: 8px 18px; font-size: 0.85rem; }
*/
/* ==========================================================================
MAIN SITE HEADER (header.php) — top-bar + main navigation
========================================================================== */
/* --- Top bar --- */
:root {
--ink: #0b0f14;
--blue: #1d4ed8;
--blue-dark: #1b3fb0;
--red: #dc2626;
--red-dark: #b91c1c;
--surface: #ffffff;
--surface-alt: #f5f7fa;
--muted: #56606b;
--border: #e4e8ec;
--font-display: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
--bs-body-bg: var(--surface);
--bs-body-color: var(--muted);
--bs-body-font-family: var(--font-body);
--bs-link-color: var(--blue);
--bs-link-hover-color: var(--blue-dark);
--bs-border-color: var(--border);
--bs-primary: var(--red);
--bs-primary-rgb: 220, 38, 38;
/* Measured at runtime by fiu-scripts.js so sticky bars stack without gaps/overlap;
these are just sane fallbacks before JS runs. */
--nav-h: 80px;
--subnav-h: 52px;
}
a{
text-decoration: none !important;
}
body{
font-family: var(--font-body) !important;
}
.top-bar {
background: #eaf1fe;
/* background: linear-gradient(135deg, #ff5f5f 0%, #e63946 55%, #c81e3a 100%); */
color: #B7C0CC;
font-size: 0.8rem;
padding: 5px 3rem;
}
.top-bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 8px 16px;
flex-wrap: wrap;
}
.top-bar-contact {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.top-bar-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #000000;
transition: color 0.2s ease;
font-weight: 600;
}
.top-bar-link:hover {
color: #ff0000;
}
.top-bar-icon {
font-size: 0.85rem;
opacity: 0.85;
}
.top-bar-pages {
display: flex;
align-items: center;
gap: 18px;
}
.top-bar-pages a {
color: #000000;
position: relative;
transition: color 0.2s ease;
font-weight: 600;
}
.top-bar-pages a:hover {
color: #ff0000;
}
@media (max-width: 700px) {
.top-bar-inner { justify-content: center; text-align: center; }
/* .top-bar-contact, .top-bar-pages { justify-content: center; } */
}
/* --- Main navigation --- */
.main-nav {
position: sticky;
top: 0;
z-index: 1000;
background: #fff;
border-bottom: 1px solid var(--border);
padding: 0 3rem;
}
.main-nav-inner {
display: flex;
align-items: center;
gap: 32px;
padding: 14px 16px;
}
.main-nav-logo {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.2rem;
color: var(--ink);
white-space: nowrap;
transition: opacity 0.2s ease;
}
.main-nav-logo:hover {
opacity: 0.8;
}
.main-nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 32px;
height: 32px;
background: transparent;
border: none;
cursor: pointer;
margin-left: auto;
}
.main-nav-toggle span {
display: block;
height: 2px;
background: var(--ink);
border-radius: 2px;
}
.main-nav-menu {
display: flex;
align-items: center;
gap: 28px;
margin-left: auto;
flex-wrap: wrap;
}
.main-nav-links {
list-style: none;
display: flex;
align-items: center;
gap: 26px;
margin: 0;
padding: 0;
}
.main-nav-links a {
position: relative;
font-size: 0.98rem;
font-weight: 600;
color: var(--ink);
padding: 4px 0;
transition: color 0.2s ease;
font-family: var(--font-body);
}
.main-nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0%;
height: 2px;
background: var(--red);
transition: width 0.2s ease;
}
.main-nav-links a:hover {
color: var(--red);
}
.main-nav-links a:hover::after {
width: 100%;
}
.main-nav-ctas {
display: flex;
align-items: center;
gap: 10px;
}
.main-nav-btn {
padding: 9px 18px;
font-size: 0.86rem;
}
.main-nav-logo img{
width: 150px;
}
@media (max-width: 1240px) {
.main-nav-logo img{
width: 95px;
}
.consulting{
transform: none !important;
}
.mega-menu{
transform: none !important;
}
.main-nav-inner { flex-wrap: wrap; }
.main-nav-toggle { display: flex; }
.main-nav-menu {
display: none;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 18px;
margin: 14px 0 4px;
order: 3;
}
.main-nav-menu.open {
display: block;
max-height: calc(85vh - 90px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-right: 4px;
}
.main-nav-links {
flex-direction: column;
align-items: flex-start;
gap: 4px;
width: 100%;
margin-bottom: 2%;
}
.main-nav-links a { display: block; padding: 8px 0; }
.main-nav-ctas {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.section-subnav{
/* top: 0% !important; */
}
.main-nav-btn { text-align: center; }
.top-bar-pages{
display: none;
}
}
/* --- Mega menu (Service 1 / Service 2) --- */
.has-mega i{
font-size: 14px;
}
.has-mega {
position: relative;
display: flex;
align-items: center;
}
/* Top-level caret button (Service 1 / Service 2) */
.mega-caret {
display: none;
align-items: center;
justify-content: center;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 50%;
width: 30px;
height: 30px;
margin-left: 6px;
cursor: pointer;
position: relative;
transition: background 0.2s ease, border-color 0.2s ease;
}
.mega-caret::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-right: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
transform: translate(-50%, -65%) rotate(45deg);
transition: transform 0.25s ease, border-color 0.2s ease;
}
.has-mega.mega-open .mega-caret {
background: #FDEBEC;
border-color: var(--red);
}
.has-mega.mega-open .mega-caret::before {
border-color: var(--red);
transform: translate(-50%, -35%) rotate(225deg);
}
/* --- Desktop panel (anchored dropdown, not full-width) --- */
.mega-menu {
position: absolute;
top: calc(100% + 16px);
left: 100%;
transform: translateX(-35%) !important;
width: 1080px;
max-width: min(1080px, calc(100vw - 32px));
background: #fff;
border: 1px solid var(--border);
border: 1px solid #ffdcdc;
border-radius: 8px;
box-shadow: 0 24px 48px rgba(11, 15, 20, 0.16);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
z-index: 1100;
}
.mega-menu.align-right {
/* left: -400%; */
right: 0;
}
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu,
.has-mega.mega-open .mega-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.consulting{
transform: translateX(-55%) !important;
}
.mega-menu-inner {
padding: 32px 36px;
display: flex;
gap: 48px;
}
/* Left column — plain text category list */
.mega-col.mega-categories {
flex: 0 0 350px;
display: flex;
flex-direction: column;
gap: 4px;
background: var(--surface-alt);
margin: -32px 0 -32px -36px;
padding: 32px 20px 32px 36px;
border-top-left-radius: 13px;
border-bottom-left-radius: 13px;
}
.mega-cat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
text-align: left;
background: transparent;
border: none;
border-radius: 6px;
padding: 10px 12px;
font-size: 0.96rem;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.mega-cat:hover,
.mega-cat.active {
background: linear-gradient(135deg, #FF5F5F 0%, #E63946 55%, #C81E3A 100%);
color: #fff;
box-shadow: 0 8px 20px rgba(200, 30, 58, 0.32);
transform: translateX(2px);
}
.mega-cat-arrow {
flex-shrink: 0;
position: relative;
width: 7px;
height: 7px;
}
.mega-cat-arrow::before {
content: "";
position: absolute;
inset: 0;
border-right: 2px solid var(--muted);
border-bottom: 2px solid var(--muted);
transform: rotate(-45deg);
transition: border-color 0.2s ease;
}
.mega-cat:hover .mega-cat-arrow::before,
.mega-cat.active .mega-cat-arrow::before {
border-color: #fff;
}
/* Right column — heading + two-column plain link list */
.mega-col.mega-services {
flex: 1;
/* padding-left: 40px; */
min-width: 0;
}
.mega-active-heading {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.3rem;
color: var(--red);
margin-bottom: 22px;
}
.mega-panel {
display: none;
list-style: none;
margin: 0;
padding: 0;
column-count: 2;
column-gap: 40px;
}
.mega-panel.active {
display: block;
}
.mega-panel li {
break-inside: avoid;
margin-bottom: 15px;
}
.mega-panel a {
display: inline-block;
font-size: 0.95rem;
font-weight: 500;
color: var(--ink);
padding: 1px 0;
transition: color 0.2s ease;
}
.mega-panel a:hover {
color: var(--red);
}
.mobile-menu{
display: none;
}
/* ==========================================================================
MOBILE MEGA MENU
========================================================================== */
@media (max-width: 1240px) {
.main-nav{
/* position: static; */
}
.has-mega {
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
}
.has-mega i{
display: none;
}
.mega-caret {
display: flex;
}
.mega-menu {
position: static;
display: none;
width: 100%;
background: var(--surface-alt);
border-top: none;
border-radius: 10px;
box-shadow: none;
margin-top: 10px;
opacity: 1;
visibility: visible;
transform: none !important;
}
.has-mega.mega-open .mega-menu {
display: block;
}
.mega-menu-inner {
max-width: none;
padding: 16px;
display: block;
}
.mega-col.mega-categories {
width: 100%;
gap: 2px;
background: transparent;
margin: 0;
padding: 0;
border-radius: 0;
}
.mega-cat {
width: 100%;
background: #fff;
border: 1px solid var(--border);
border-left: 3px solid transparent;
border-radius: 8px;
padding: 13px 14px;
font-size: 0.9rem;
margin-bottom: 6px;
}
.mega-cat:hover,
.mega-cat.active {
background: linear-gradient(135deg, #FF5F5F 0%, #E63946 55%, #C81E3A 100%);
color: #fff;
border-color: #C81E3A;
border-left-color: #C81E3A;
box-shadow: 0 8px 20px rgba(200, 30, 58, 0.28);
}
.mega-cat:hover .mega-cat-arrow::before,
.mega-cat.active .mega-cat-arrow::before {
border-color: #fff;
}
.mega-cat-arrow {
transform: rotate(45deg);
transition: transform 0.2s ease;
}
.mega-cat-arrow::before {
transform: rotate(-45deg);
}
.mega-cat.active .mega-cat-arrow {
transform: rotate(225deg);
}
.mega-col.mega-services {
border-left: none;
padding-left: 0;
}
.mega-active-heading {
display: none;
}
.mega-panel {
column-count: 1;
padding: 4px 0 10px 16px;
margin: 0 0 6px 8px;
border-left: 2px solid var(--red);
}
.mega-panel a {
display: block;
padding: 9px 10px;
font-size: 0.88rem;
background: #fff;
border-radius: 6px;
margin-bottom: 4px;
}
.mobile-menu{
display: block;
}
}
@media (max-width: 360px) {
.top-bar, .main-nav {
padding: 0;
}
.top-bar-contact a p1{
font-size: 0;
}
}
@media (max-width:1393px) {
.main-nav{
padding: 0;
}
}
.btn-primary-custom {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.92rem;
color: #ffffff;
background: linear-gradient(135deg, #ff5f5f 0%, #e63946 55%, #c81e3a 100%);
border: 1px solid #c81e3a;
border-radius: 6px;
transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.btn-primary-custom:hover {
filter: brightness(0.92);
box-shadow: 0 8px 20px rgba(200, 30, 58, 0.32);
transform: translateY(-2px);
color: #ffffff;
}
.btn-outline-custom {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.92rem;
color: #fff;
background: #25d366;
border: 1px solid #18bb54;
border-radius: 6px;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-outline-custom i{
font-size: 1.2rem;
}
.btn-outline-custom:hover {
background: var(--red);
color: #ffffff;
transform: translateY(-2px);
}