/* =========================================================
iCore Digital — header.css
Add this to the page's , before this stylesheet:
========================================================= */
:root {
--ic-bg: #050415;
--ic-white: #ffffff;
--ic-line: rgba(255, 255, 255, 0.14);
--ic-hover-bg: #14122b;
--ic-font: "Poppins", "Segoe UI", sans-serif;
--ic-header-h: 80px;
}
/* ===================== HEADER SHELL ===================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
height: var(--ic-header-h);
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--ic-bg);
padding: 20px 70px;
border-bottom: 1px solid var(--ic-line);
}
/* ===================== LOGO ===================== */
.logo {
display: flex;
align-items: center;
}
.logo a {
display: flex;
align-items: center;
}
.logo img {
width: 150px;
display: block;
}
/* ===================== MAIN MENU ===================== */
.main-menu {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
}
.nav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
cursor: pointer;
font-family: var(--ic-font);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
text-decoration: none;
color: var(--ic-white);
padding: 8px 0;
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0%;
height: 2px;
background: var(--ic-white);
transition: width 0.2s ease;
}
.nav-link:hover::after,
.nav-link:focus-visible::after {
width: 100%;
}
/* ===================== TRAINING DROPDOWN ===================== */
.dropdown {
position: relative;
}
.dropdown-toggle .caret {
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform 0.15s ease;
}
.dropdown.open .caret,
.dropdown:hover .caret {
transform: rotate(225deg) translateY(2px);
}
.dropdown-menu {
position: absolute;
/* Flush against the button — no gap for the mouse to fall through
between here and the toggle above. Visual spacing comes from
transparent padding-top below, which is still part of this
element's hoverable box, so the hover state never drops while
the cursor crosses it. */
top: 100%;
left: 0;
padding-top: 14px;
display: none;
z-index: 50;
}
.dropdown.open .dropdown-menu,
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
display: block;
}
.dropdown-menu-inner {
display: flex;
flex-direction: column;
width: 210px;
background-color: #0A0920;
border: 1px solid var(--ic-line);
border-radius: 8px;
padding: 10px;
}
.dropdown-menu-inner a {
display: block;
color: var(--ic-white);
font-family: var(--ic-font);
font-size: 13.5px;
text-decoration: none;
padding: 10px 12px;
border-radius: 6px;
}
.dropdown-menu-inner a:hover,
.dropdown-menu-inner a:focus-visible {
background-color: var(--ic-hover-bg);
}
/* ===================== CTA ===================== */
.header-cta {
background-color: #000;
border: 2px solid var(--ic-white);
color: var(--ic-white) !important;
font-family: var(--ic-font);
font-weight: 600;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 0.5px;
padding: 10px 18px;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
.header-cta:hover,
.header-cta:focus-visible {
background-color: var(--ic-white);
color: #000 !important;
}
/* ===================== MOBILE MENU TOGGLE ===================== */
.menu-toggle {
display: none;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: "";
display: block;
width: 24px;
height: 2px;
background: var(--ic-white);
position: relative;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.hamburger::before { position: absolute; top: -8px; }
.hamburger::after { position: absolute; top: 8px; }
.menu-toggle.is-active .hamburger { background: transparent; }
.menu-toggle.is-active .hamburger::before { transform: translateY(8px) rotate(45deg); }
.menu-toggle.is-active .hamburger::after { transform: translateY(-8px) rotate(-45deg); }
/* ===================== MOBILE LAYOUT ===================== */
@media (max-width: 768px) {
/* Re-declared explicitly: if the header still doesn't stick once this
is live, an ancestor wrapper likely has overflow (auto/hidden/scroll)
or a transform on it — either one silently breaks position:sticky
on a descendant, and it has to be fixed on that ancestor, not here. */
.site-header {
position: sticky;
top: 0;
height: auto;
padding: 16px 28px;
}
.main-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex: none;
flex-direction: column;
align-items: flex-start;
gap: 4px;
background: var(--ic-bg);
border-bottom: 1px solid var(--ic-line);
padding: 16px 32px 24px;
}
.main-menu.open { display: flex; }
.nav-link {
width: 100%;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid var(--ic-line);
}
.dropdown { width: 100%; border-bottom: 1px solid var(--ic-line); }
.dropdown .nav-link { border-bottom: none; }
/* On touch, the dropdown behaves as an inline accordion, not a floating panel */
.dropdown-menu {
position: static;
display: none;
padding: 0;
}
.dropdown:hover .dropdown-menu { display: none; }
.dropdown.open .dropdown-menu,
.dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu-inner {
width: 100%;
border: none;
border-radius: 0;
padding: 0 0 8px 14px;
}
.dropdown-menu-inner a { padding: 10px 0; }
/* Sits between the logo and the hamburger in the header row —
nav is display:none when closed, so the header's three visible
children (logo, CTA, toggle) space themselves out naturally. */
.header-cta {
padding: 8px 14px;
font-size: 12px;
}
.menu-toggle { display: flex; }
}