/** * Structural Pages Menu * * Layout padrão: horizontal (análogo ao .microsite-nav). * Override .sidebar: vertical com submenus em flyout lateral. */ /* Wrapper do bloco --------------------------------------------------------- */ .block-structural-pages-menu { padding: 0 !important; } /* Itens: âncora para sub-menus absolutos ----------------------------------- */ .structural-pages-menu .structural-pages-menu__item { position: relative; } /* Lista de nível 1: horizontal --------------------------------------------- */ .structural-pages-menu .structural-pages-menu__list--level-1 { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; } .structural-pages-menu .structural-pages-menu__item--level-1:not(:last-child) { margin-inline-end: 36px; } /* Links de nível 1 --------------------------------------------------------- */ .structural-pages-menu .structural-pages-menu__item--level-1 > .structural-pages-menu__link { position: relative; display: inline-flex; align-items: center; padding-block: 12px; text-decoration: none; color: hsl(201, 15%, 5%); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; white-space: nowrap; } /* Underline animado no hover (padrão Olivero/microsite-nav) */ .structural-pages-menu .structural-pages-menu__item--level-1 > .structural-pages-menu__link::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; content: ""; transition: opacity 0.2s, transform 0.2s; transform: translateY(5px); opacity: 0; border-top: solid 2px currentColor; } .structural-pages-menu .structural-pages-menu__item--level-1 > .structural-pages-menu__link:hover::after, .structural-pages-menu .structural-pages-menu__item--level-1 > .structural-pages-menu__link.is-active::after { transform: translateY(0); opacity: 0.8; } .structural-pages-menu .structural-pages-menu__item--level-1 > .structural-pages-menu__link.is-active, .structural-pages-menu .structural-pages-menu__item--level-1.menu-item--active-trail > .structural-pages-menu__link { color: hsl(202, 79%, 50%); } /* Indicador de subitem (chevron) ------------------------------------------- */ .structural-pages-menu .structural-pages-menu__item--has-children > .structural-pages-menu__link::before { content: " \203A"; order: 1; margin-inline-start: 4px; font-family: monospace; font-size: 1.2em; font-weight: bold; line-height: 0.8; opacity: 0.4; transition: opacity 0.2s; } .structural-pages-menu .structural-pages-menu__item--has-children:hover > .structural-pages-menu__link::before { opacity: 1; } /* Sub-menus: dropdown abaixo (contexto horizontal) ------------------------- */ .structural-pages-menu .sub-menu { position: absolute; top: 100%; left: 0; visibility: hidden; opacity: 0; min-width: 200px; background-color: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 999; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; transform: translateY(6px); pointer-events: none; border-top: 2px solid hsl(202, 79%, 50%); list-style: none; padding: 4px 0; margin: 0; } .structural-pages-menu .structural-pages-menu__item:hover > .sub-menu, .structural-pages-menu .structural-pages-menu__item:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0s; } /* Links dentro dos sub-menus ----------------------------------------------- */ .structural-pages-menu .sub-menu > li > a { display: block; padding: 8px 16px; font-size: 14px; color: hsl(201, 15%, 5%); text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .structural-pages-menu .sub-menu > li > a:hover { background-color: hsl(202, 79%, 95%); color: hsl(202, 79%, 35%); } .structural-pages-menu .sub-menu .menu-item--active-trail > a, .structural-pages-menu .sub-menu .is-active { color: hsl(202, 79%, 50%); font-weight: 600; } /* Override: sidebar -------------------------------------------------------- */ /* * Quando o menu está numa sidebar, volta ao layout vertical com * submenus em flyout lateral (comportamento original). */ .sidebar .structural-pages-menu { padding: 30px; background-color: #f3f3f3; border-radius: 10px; width: 100%; } .sidebar [id^="block-structuralpagesmenublock"] { padding: 0 !important; background: transparent !important; } /* Lista de nível 1: vertical na sidebar */ .sidebar .structural-pages-menu .structural-pages-menu__list--level-1 { display: block; } .sidebar .structural-pages-menu .structural-pages-menu__item--level-1:not(:last-child) { margin-inline-end: 0; } /* Links de nível 1 na sidebar */ .sidebar .structural-pages-menu .structural-pages-menu__item--level-1 > .structural-pages-menu__link { display: block; padding-block: 6px; font-size: 14px; color: #333333; } .sidebar .structural-pages-menu .structural-pages-menu__item--level-1 > .structural-pages-menu__link::after { display: none; } /* Sub-menus: flyout à direita na sidebar */ .sidebar .structural-pages-menu .sub-menu { top: 0; left: 100%; transform: translateY(10px); border-top: none; border-left: 2px solid var(--notech-theme-color, #db162f); min-width: 260px; padding: 0; } .sidebar .structural-pages-menu .structural-pages-menu__item:hover > .sub-menu, .sidebar .structural-pages-menu .structural-pages-menu__item:focus-within > .sub-menu { transform: translateY(0); padding: 5px 30px; } /* Links dos sub-menus na sidebar */ .sidebar .structural-pages-menu .sub-menu > li > a { border-bottom: 1px solid #f2f2f2; background-color: transparent; } .sidebar .structural-pages-menu .sub-menu > li:last-child > a { border-bottom: none; } .sidebar .structural-pages-menu .sub-menu > li > a:hover { color: var(--notech-theme-color, #db162f); background-color: #fcfcfc; padding-left: 25px; } .sidebar .structural-pages-menu .sub-menu .menu-item--active-trail > a, .sidebar .structural-pages-menu .sub-menu .is-active { color: var(--notech-theme-color, #db162f); }