/** * @file * MEGAMENU - deltas on top of `pt_base/megamenu-base`. * * The shared base (components/_shared/megamenu-base.css) is loaded first as a * library dependency declared in megamenu.component.yml; this file holds * ONLY the deltas, so it relies on source order to win over the base. */ /* The mobile bar is the closed state below the desktop breakpoint, the way the strip is above it â€” so it gets the same treatment: black rail, white glyphs, where the base ships a white bar with black ones. The hamburger rule has to be nested here: the base sets it as `.megamenu__topbar .megamenu__hamburger-line` (0,2,0), and a bare .megamenu__hamburger-line would lose to it whatever the source order. */ .megamenu__topbar { background-color: #000; /* The base gives this button a white 60x60 plate; the desktop trigger has `background: none` and only the glyphs. Match it, so the control reads the same at both breakpoints. `background` (not background-color) because the base sets both. */ .megamenu__hamburger { background: none; } .megamenu__hamburger-line { background: #fff; } .megamenu__logo-link { top: 0px; left: 0; transform: scale(0.8); } .main-logo { width: 60px; height: 60px; top: 10px; position: relative; img { width: 60px; height: 60px; } } } .megamenu__logo-link img { height: auto; width: 100%; margin: 20px 0rem; } @media (min-width: 576px) { .megamenu__logo-link img { width: 90px; } .megamenu__left-top-inner img { width: 200px; } } /* Research/PhD icon colour. .megamenu__left-research listed the PhD courses OF THE CURRENT AREA, so every item carries the same brand colour - there is no per-position (physics/math/neuroscience) mapping like the main-site megamenu. The colour is `--site-accent`, set on per site context from the area term's "Accent color" field (taxonomy `area` -> f_shrd_accent_color), see interfase_site_context Hooks\Preprocess\Html. The #ffc300 fallback only applies outside Drupal (Storybook) or on an area term with no colour set. !important is required: the base sheet targets `.megamenu__left-research a:nth-child(N) svg` (0,2,3), which outranks the `a svg` selector used here (0,1,3). */ .megamenu__left-research a svg { rect { fill: var(--site-accent, #ffc300) !important; } path { stroke: var(--site-accent, #ffc300) !important; } } .megamenu__left-research img, .megamenu__left-il img { height: 100px; } header .sissa-links { > div { display: flex; flex-direction: row; gap: 50px; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #666666; padding-top: 2rem; img { width: 50px; } } .icon-arrow { width: 18px; height: 16px; } } @media (min-width: 1024px) and (min-height: 640px) { header .sissa-links { > div { padding-bottom: 2rem; padding-top: 1rem; } } } .sissa-back-link { .icon-arrow { position: relative; left: 9px; top: 3px; } a { display: flex; flex-direction: row; gap: 12px; align-items: center; text-decoration: none; transition: 0.2s ease; &:hover { opacity: 0.8; } span:first-child { color: #b0ad9f; text-transform: uppercase; } span:last-child { color: #fff; text-transform: uppercase; display: flex; flex-direction: row; .icon-container { height: auto; width: auto; position: relative; top: -5px; left: 11px; } svg { width: 14px; } } } } @media (min-width: 1024px) and (min-height: 640px) { /* The desktop strip is the CLOSED state of the megamenu â€” the base hides it the moment the overlay opens (.megamenu--overlay-open .megamenu__strip). So these are the colours of the rail the visitor sees at rest: a black column with white glyphs, where the base ships a white one with black glyphs. Kept from the ILAS variant of the old area megamenu, which is the only place this treatment existed. Both inner rules have to be nested inside .megamenu__strip: the base sets them at that same depth (0,2,0), and a bare .megamenu__hamburger-line here would lose to it whatever the source order. */ .megamenu__strip { background-color: #000; .megamenu__logo-link { left: 25px; } .megamenu__logo-link img { height: 90px; } .megamenu__hamburger-line { background: #fff; } .megamenu__strip-menu-label { color: #fff; } } .sissa-links, .sissa-links span, .sissanet span, .sissanet { font-size: 12px; } header .sissanet { img:last-child { margin-left: 0; width: 20px; } } .sissa-links { margin-top: 10px; border-top: 1px solid #666666; img.icon-arrow { width: 14px; height: 13px; position: relative; left: 11px; top: 2px; } } .sissa-back-link { border-top: 0px solid #666666; border-bottom: 0px solid #666666; padding-top: 12px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0vh; img { height: 48px; } img.icon-arrow { left: 10px; } } .megamenu__left-research .section-title, .megamenu__left-il .section-title { padding: 10px 0 0px 0; } .megamenu__logo-link img { margin: 0px 0rem 9px 0rem; height: 100px; } .megamenu__left-research { display: grid; gap: 7px 20px; grid-template-columns: 1fr 1fr; grid-template-rows: 15px; .section-title { grid-column: 1 / span 2; margin-bottom: 0; } } .megamenu__left-research img, .megamenu__left-il img { height: 82px; } .megamenu__left-research a, .megamenu__left-il a { margin-bottom: 0px; } .sissa-links { } } @media (min-width: 1200px) { .megamenu__left-research { gap: 18px 20px; } } @media (min-width: 1400px) and (min-height: 768px) { .megamenu__strip { .megamenu__logo-link img { width: 90px; height: 90px; } } .megamenu__logo-link img { height: auto; width: 100%; } .megamenu__left-research img, .megamenu__left-il img { height: 98px; } .sissa-back-link { padding-top: 20px; img { height: 46px; } } .sissa-links, .sissa-links span, .sissanet span, .sissanet { font-size: 14px; } .megamenu__logo-link img { margin: 0px 0rem 16px 0rem; } .megamenu__left-research { gap: 14px 20px; grid-template-rows: 41px auto; } } /* Fallback identity badges (used when no logo asset/media exists for the current site context: colour comes from the per-context --site-accent). */ .megamenu__acronym-badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--site-accent, #f9b233); color: #000; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; flex-shrink: 0; } .megamenu__acronym-badge--large { width: 72px; height: 72px; font-size: 1.6rem; } .megamenu__area-name { display: block; margin-top: 0.5rem; color: #fff; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; } .megamenu__phd-item { display: flex; align-items: flex-start; gap: 0.5rem; text-decoration: none; } .megamenu__phd-item .megamenu__phd-name { color: #fff; font-size: 0.8rem; line-height: 1.2; padding-top: 0.25rem; }