/* ============================================================
SHARED.CSS — Nav + Footer styles for every page
Requires in :
Requires CSS variables in :root:
--navy: #0a1628; --navy-mid: #12213d; --navy-light: #1a2f52;
--gold: #c9a84c; --gold-light: #e2c97e; --white: #ffffff;
--text-light: #8a9ab5;
============================================================ */
/* ── NAV ── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 60px;
background: rgba(10, 22, 40, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(201,168,76,0.15);
transition: all 0.3s;
overflow: visible;
}
.nav-logo {
display: flex;
flex-direction: column;
line-height: 1;
}
.nav-logo .name {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 500;
letter-spacing: 3px;
color: #ffffff;
text-transform: uppercase;
}
.nav-logo .title {
font-size: 9px;
letter-spacing: 4px;
color: #c9a84c;
text-transform: uppercase;
margin-top: 4px;
}
.nav-links {
display: flex;
gap: 36px;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.75);
text-decoration: none;
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover { color: #c9a84c; }
.nav-cta {
background: transparent;
border: 1px solid #c9a84c;
color: #c9a84c;
padding: 10px 28px;
font-size: 9px;
letter-spacing: 3px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.nav-cta:hover {
background: #c9a84c;
color: #0a1628;
}
/* ── NAV CTA GROUP (Contact Cindy + Sign In side by side) ── */
.nav-cta-group {
display: flex;
align-items: stretch; /* both buttons stretch to same height */
gap: 12px;
}
.nav-cta-group .nav-cta {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* ── SIGN IN / DASHBOARD WRAPPER ── */
.nav-signin-wrapper {
position: relative;
display: flex;
}
.nav-signin-btn {
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
}
/* Dashboard dropdown (desktop) */
.nav-dashboard-dropdown {
display: none;
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 220px;
background: #ffffff;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
border-top: 3px solid #c9a84c;
z-index: 999;
flex-direction: column;
}
.nav-dashboard-dropdown.active {
display: flex;
}
.nav-dashboard-dropdown a {
display: block;
padding: 14px 24px;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: #1a2f52;
text-decoration: none;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
border-bottom: 1px solid rgba(26,47,82,0.07);
transition: color 0.2s, background 0.2s, padding-left 0.2s;
}
.nav-dashboard-dropdown a:last-child {
border-bottom: none;
}
.nav-dashboard-dropdown a:hover {
color: #c9a84c;
background: rgba(201,168,76,0.04);
padding-left: 30px;
}
/* ── MEGA MENU ── */
.nav-mega-item { position: relative; }
.nav-mega-item > a { cursor: pointer; user-select: none; }
.mega-menu {
position: absolute;
top: calc(100% + 22px);
left: 50%;
transform: translateX(-50%);
width: 760px;
background: white;
color: #1a2f52;
display: none;
z-index: 999;
box-shadow: 0 8px 40px rgba(0,0,0,0.22);
border-top: 3px solid #c9a84c;
}
.mega-menu.active { display: flex; }
.mega-menu-left {
background: #12213d;
color: white;
padding: 36px 32px;
min-width: 190px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.mega-menu-left h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 26px;
font-weight: 300;
letter-spacing: 3px;
text-transform: uppercase;
color: white;
margin-bottom: 12px;
}
.mega-menu-left p {
font-size: 13px;
line-height: 1.8;
color: rgba(255,255,255,0.7);
margin-bottom: 24px;
letter-spacing: 0.3px;
}
.mega-explore-btn {
display: inline-block;
border: 1px solid #c9a84c;
color: #c9a84c;
padding: 13px 28px;
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
transition: all 0.3s;
align-self: flex-start;
}
.mega-explore-btn:hover {
background: #c9a84c;
color: #0a1628;
}
.mega-menu-cols { display: flex; flex: 1; }
.mega-menu-col {
flex: 1;
padding: 24px 32px 24px 28px;
border-right: 1px solid rgba(26,47,82,0.1);
min-width: 0;
}
.mega-menu-col:last-child { border-right: none; }
.mega-menu-col a {
display: block;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #1a2f52;
text-decoration: none;
font-weight: 500;
padding: 10px 0;
border-bottom: 1px solid rgba(26,47,82,0.07);
transition: color 0.2s, transform 0.2s;
white-space: nowrap;
}
.mega-menu-col a:last-child { border-bottom: none; }
.mega-menu-col a:hover { color: #c9a84c; transform: translateX(6px); }
.mega-menu-list {
flex: 1;
padding: 24px 32px;
}
.mega-menu-list a {
display: block;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #1a2f52;
text-decoration: none;
font-weight: 500;
padding: 13px 0;
border-bottom: 1px solid rgba(26,47,82,0.07);
transition: color 0.2s, transform 0.2s;
white-space: nowrap;
}
.mega-menu-list a:last-child { border-bottom: none; }
.mega-menu-list a:hover { color: #c9a84c; transform: translateX(6px); }
/* overlay removed - closing handled via document click */
/* ── MOBILE NAV ── */
.mobile-menu-btn {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
flex-direction: column;
gap: 5px;
z-index: 201;
}
.mobile-menu-btn span {
display: block;
width: 24px;
height: 2px;
background: #ffffff;
transition: all 0.3s;
}
.mobile-nav {
display: none;
position: fixed;
inset: 0;
background: #0a1628;
z-index: 300;
overflow-y: auto;
flex-direction: column;
}
.mobile-nav.open { display: flex; }
.mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 24px;
border-bottom: 1px solid rgba(201,168,76,0.15);
}
.mobile-nav-close {
background: none;
border: none;
color: #ffffff;
font-size: 26px;
cursor: pointer;
line-height: 1;
padding: 4px 8px;
}
.mobile-nav-links {
list-style: none;
padding: 0;
}
.mobile-nav-links > li {
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mobile-nav-links > li > a,
.mobile-nav-links > li > button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20px 28px;
color: rgba(255,255,255,0.85);
text-decoration: none;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: color 0.2s;
}
.mobile-nav-links > li > a:hover,
.mobile-nav-links > li > button:hover { color: #c9a84c; }
.mobile-nav-links > li > button .chevron {
font-size: 14px;
transition: transform 0.3s;
color: #c9a84c;
}
.mobile-nav-links > li > button.expanded .chevron {
transform: rotate(180deg);
}
.mobile-sub {
display: none;
flex-direction: column;
background: #12213d;
}
.mobile-sub.open { display: flex; }
.mobile-sub-header {
background: #12213d;
padding: 28px 28px 24px;
border-top: 3px solid #c9a84c;
}
.mobile-sub-header h4 {
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
font-weight: 300;
letter-spacing: 3px;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 10px;
}
.mobile-sub-header p {
font-size: 12px;
line-height: 1.8;
color: rgba(255,255,255,0.65);
margin-bottom: 20px;
}
.mobile-sub-explore {
display: inline-block;
border: 1px solid #c9a84c;
color: #c9a84c;
padding: 10px 22px;
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
}
.mobile-sub-links { background: #f8f7f4; }
.mobile-sub-links a {
display: block;
padding: 16px 28px;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: #1a2f52;
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid rgba(26,47,82,0.08);
transition: color 0.2s, padding-left 0.2s;
}
.mobile-sub-links a:last-child { border-bottom: none; }
.mobile-sub-links a:hover { color: #c9a84c; padding-left: 36px; }
.mobile-nav-cta { margin: 24px 28px; }
.mobile-nav-cta a {
display: block;
text-align: center;
background: transparent;
border: 1px solid #c9a84c;
color: #c9a84c;
padding: 14px 28px;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
transition: all 0.3s;
}
.mobile-nav-cta a:hover {
background: #c9a84c;
color: #0a1628;
}
/* Mobile Sign In button — filled gold style to differentiate from Contact Cindy */
.mobile-nav-signin a {
background: #c9a84c;
color: #0a1628;
border-color: #c9a84c;
}
.mobile-nav-signin a:hover {
background: #e2c97e;
border-color: #e2c97e;
color: #0a1628;
}
/* Mobile dashboard links (visible when signed in) */
.mobile-dashboard-links {
margin: 0 28px 24px;
border: 1px solid rgba(201,168,76,0.2);
border-radius: 0;
}
.mobile-dashboard-links a {
display: block;
padding: 14px 24px;
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.8);
text-decoration: none;
font-weight: 500;
font-family: 'Montserrat', sans-serif;
border-bottom: 1px solid rgba(255,255,255,0.07);
transition: color 0.2s, padding-left 0.2s;
}
.mobile-dashboard-links a:last-child {
border-bottom: none;
}
.mobile-dashboard-links a:hover {
color: #c9a84c;
padding-left: 32px;
}
/* ── AREAS FLYOUT MEGA MENU ── */
/* Menu width is auto so it grows naturally with its flex children */
.areas-flyout-menu {
width: auto;
}
/* Navy sidebar — wide enough for description text */
.areas-flyout-menu .mega-menu-left {
width: 310px;
min-width: 310px;
max-width: 310px;
padding: 28px 28px;
}
/* Primary column: 5 general area group buttons */
.areas-primary-col {
width: 210px;
min-width: 210px;
border-right: 1px solid rgba(26,47,82,0.1);
display: flex;
flex-direction: column;
padding: 8px 0;
}
.area-group-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 13px 22px;
font-size: 10.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #1a2f52;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
background: none;
border: none;
border-bottom: 1px solid rgba(26,47,82,0.07);
cursor: pointer;
text-align: left;
transition: color 0.2s, background 0.2s;
}
.area-group-btn:last-child { border-bottom: none; }
.area-group-btn:hover,
.area-group-btn.active {
color: #c9a84c;
background: rgba(201,168,76,0.06);
}
.area-arrow {
font-size: 15px;
color: #c9a84c;
flex-shrink: 0;
transition: transform 0.2s;
margin-left: 8px;
}
.area-group-btn.active .area-arrow {
transform: rotate(90deg);
}
/* Container that holds all flyout panels — hidden by JS until a group is clicked */
.areas-flyout-container {
display: none;
background: #ffffff;
}
.areas-flyout-container.visible {
display: flex;
}
/* Individual flyout panel — hidden until active */
.areas-flyout {
display: none;
}
.areas-flyout.active {
display: flex;
}
/* Each column within a flyout panel — fixed width so menu only grows by exact column increments */
.areas-flyout-col {
width: 190px;
flex: 0 0 190px;
padding: 12px 22px;
border-right: 1px solid rgba(26,47,82,0.07);
display: flex;
flex-direction: column;
background: #ffffff;
}
.areas-flyout-col:last-child { border-right: none; }
.areas-flyout-col a {
display: block;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #1a2f52;
text-decoration: none;
font-weight: 500;
padding: 10px 0;
border-bottom: 1px solid rgba(26,47,82,0.07);
transition: color 0.2s, transform 0.2s;
white-space: nowrap;
}
.areas-flyout-col a:last-child { border-bottom: none; }
.areas-flyout-col a:hover { color: #c9a84c; transform: translateX(6px); }
/* "See All X Areas" link — gold, sits at top of each flyout column */
.areas-flyout-col a.see-all-areas {
color: #c9a84c;
font-weight: 700;
font-size: 10px;
letter-spacing: 2px;
border-bottom: 1px solid rgba(201,168,76,0.25);
padding-bottom: 13px;
margin-bottom: 2px;
}
.areas-flyout-col a.see-all-areas:hover {
color: #e2c97e;
transform: translateX(6px);
}
/* ── MOBILE AREA GROUPS (nested accordion inside Areas) ── */
.mob-area-groups { padding: 0; }
.mob-area-group { border-bottom: 1px solid rgba(26,47,82,0.1); }
.mob-area-group:last-child { border-bottom: none; }
.mob-area-group-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 14px 28px;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: #1a2f52;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
background: #f8f7f4;
border: none;
cursor: pointer;
text-align: left;
transition: color 0.2s, background 0.2s;
}
.mob-area-group-btn:hover,
.mob-area-group-btn.expanded {
color: #c9a84c;
background: #f0ede6;
}
.mob-area-group-btn .chevron {
font-size: 12px;
transition: transform 0.3s;
color: #c9a84c;
}
.mob-area-group-btn.expanded .chevron { transform: rotate(180deg); }
.mob-area-group-sub { display: none; background: #eae8e2; }
.mob-area-group-sub.open { display: block; }
.mob-area-group-sub a {
display: block;
padding: 13px 42px;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: #1a2f52;
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid rgba(26,47,82,0.06);
transition: color 0.2s, padding-left 0.2s;
}
.mob-area-group-sub a:last-child { border-bottom: none; }
.mob-area-group-sub a:hover { color: #c9a84c; padding-left: 50px; }
.mob-area-group-sub a.mob-see-all {
color: #c9a84c;
font-weight: 700;
border-bottom: 1px solid rgba(201,168,76,0.2);
}
/* ── BREADCRUMB (inside .page-hero) — reset nav{} styles & pin just below the fixed nav ── */
.page-hero .breadcrumb,
.page-hero > .breadcrumb {
/* reset all properties inherited from the generic nav{} rule */
position: absolute;
background: none !important;
backdrop-filter: none !important;
border-bottom: none !important;
padding: 0 !important;
justify-content: flex-start;
transition: none;
overflow: visible;
/* positioning */
top: 90px;
left: 60px;
right: auto;
z-index: 3;
margin-bottom: 0 !important;
}
/* Breadcrumb link / separator / current-page colours */
.page-hero .breadcrumb a,
.page-hero > .breadcrumb a {
font-size: 9px;
letter-spacing: 3px;
text-transform: uppercase;
color: #c9a84c;
text-decoration: none;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
transition: opacity 0.2s;
}
.page-hero .breadcrumb a:hover,
.page-hero > .breadcrumb a:hover { opacity: 0.7; }
.page-hero .breadcrumb span,
.page-hero > .breadcrumb span {
font-size: 9px;
color: rgba(255,255,255,0.35);
letter-spacing: 2px;
}
.page-hero .breadcrumb .current,
.page-hero > .breadcrumb .current {
font-size: 9px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
font-weight: 500;
font-family: 'Montserrat', sans-serif;
}
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
nav { padding: 18px 24px; }
.nav-links { display: none; }
.nav-cta { display: none; }
.nav-cta-group { display: none; }
.mobile-menu-btn { display: flex; }
.mega-menu { display: none !important; }
.mega-overlay { display: none !important; }
.page-hero .breadcrumb,
.page-hero > .breadcrumb {
top: 82px;
left: 24px;
right: auto;
transform: none;
white-space: nowrap;
justify-content: flex-start;
}
}