/* =============================================================
SUPERHERO SCHOOL — Unified Stylesheet
Covers: home, partner detail, project partners list,
transnational meetings, and any future page.
Fonts (add to ):
============================================================= */
/* ─────────────────────────────────────────
0. RESET & TOKENS
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--green: #88bf36;
--green-dark: #5e8a20;
--cyan: #1ab6d9;
--cyan-dark: #0e87a3;
--darkblue: #0a3040;
--darkblue2: #0d3a50;
--white: #fff;
--light: #f4fbf0;
}
body { font-family: 'Nunito', sans-serif !important; background: var(--white)!important;color: #333 !important;}
#topper{ z-index: 99999;}
.hero img{ width:350px; }
/* ─────────────────────────────────────────
1. TOPBAR (logo left · login right)
───────────────────────────────────────── */
.topbar {
background: var(--darkblue);
padding: 10px 32px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 300;
}
.topbar-logo img {
height: 36px;
filter: brightness(0) invert(1);
opacity: .9;
display: block;
}
.topbar-right {
display: flex;
align-items: center;
gap: 12px;
}
.topbar-login {
background: var(--green);
color: white;
font-family: 'Nunito', sans-serif;
font-size: 13px;
font-weight: 700;
padding: 8px 22px;
border-radius: 8px;
text-decoration: none;
letter-spacing: .3px;
transition: background .2s;
white-space: nowrap;
}
.topbar-login:hover { background: var(--green-dark); }
/* ─────────────────────────────────────────
2. HAMBURGER BUTTON (mobile only)
───────────────────────────────────────── */
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 38px; height: 38px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
border-radius: 8px;
cursor: pointer;
padding: 8px;
}
.hamburger--white {
background: var(--darkblue);
border: 1px solid var(--darkblue);
}
.hamburger span {
display: block;
height: 2px;
background: white;
border-radius: 2px;
transition: transform .25s, opacity .2s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ─────────────────────────────────────────
3. MAIN NAV (level 1)
───────────────────────────────────────── */
.main-nav ,.main-nav_ONLYROOT {
background: var(--darkblue);
border-top: 1px solid rgba(255,255,255,.07);
position: relative;
z-index: 200;
}
.main-nav-inner {
display: flex;
flex-wrap: wrap;
padding: 0 24px;
width: 100%;
}
.nav-item { position: relative; }
.nav-link {
color: rgba(255,255,255,.8);
font-size: 13px;
font-weight: 600;
text-decoration: none;
padding: 12px 14px;
border-bottom: 3px solid transparent;
transition: color .2s, border-color .2s, background .2s;
white-space: nowrap;
display: block;
}
.nav-link:hover { color: white; }
.nav-link.active { color: var(--green); border-bottom-color: var(--green); }
.nav-item:hover > .nav-link { color: white; background: rgba(255,255,255,.06); }
/* ─────────────────────────────────────────
4. DROPDOWN (level 1 panel)
───────────────────────────────────────── */
.sections-nav .dropdown {
position: absolute;
top: 100%; left: 0;
min-width: 220px;
background: var(--darkblue2);
border: 1px solid rgba(255,255,255,.1);
border-top: 2px solid var(--green);
border-radius: 0 0 10px 10px;
padding: 6px 0;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
pointer-events: none;
z-index: 500;
}
.nav-item:hover > .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.sections-nav .dropdown > a {
display: block;
color: rgba(255,255,255,.8);
font-size: 12px;
font-weight: 600;
padding: 10px 18px;
text-decoration: none;
border-left: 3px solid transparent;
transition: background .15s, color .15s;
}
.sections-nav .dropdown > a:hover {
background: rgba(136,191,54,.12);
color: var(--green);
border-left-color: var(--green);
}
/* ─────────────────────────────────────────
5. SUBMENU (level 2 — flies right)
───────────────────────────────────────── */
.sections-nav .dropdown .nav-item--sub { position: relative; }
.sections-nav .dropdown .nav-item--sub > a.sub-trigger {
display: flex;
justify-content: space-between;
align-items: center;
color: rgba(255,255,255,.8);
font-size: 12px;
font-weight: 600;
padding: 10px 18px;
text-decoration: none;
border-left: 3px solid transparent;
transition: background .15s, color .15s;
}
.sections-nav .dropdown .nav-item--sub:hover > a.sub-trigger {
background: rgba(26,182,217,.12);
color: var(--cyan);
border-left-color: var(--cyan);
}
.sub-arrow { font-size: 10px; opacity: .6; margin-left: 8px; flex-shrink: 0; }
.sections-nav .dropdown--sub {
position: absolute;
top: -7px; left: 100%;
min-width: 200px;
background: var(--darkblue2);
border: 1px solid rgba(255,255,255,.1);
border-top: 2px solid var(--cyan);
border-radius: 0 10px 10px 10px;
padding: 6px 0;
color: rgba(255,255,255,.8);
opacity: 0;
visibility: hidden;
transform: translateX(-6px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
pointer-events: none;
z-index: 600;
}
.sections-nav .dropdown .nav-item--sub:hover > .dropdown--sub {
opacity: 1;
visibility: visible;
transform: translateX(0);
pointer-events: auto;
}
.dropdown--sub a {
display: block;
color: rgba(255,255,255,.8);
font-size: 12px;
font-weight: 600;
padding: 10px 18px;
text-decoration: none;
border-left: 3px solid transparent;
transition: background .15s, color .15s;
}
.dropdown--sub a:hover {
background: rgba(26,182,217,.12);
color: var(--cyan);
border-left-color: var(--cyan);
}
/* ─────────────────────────────────────────
5b. WHITE NAV THEME
Usage: add class nav--white to both
and