Aquileo | O Brasil é a nossa Energia | Petrobras

Link de exemplo

Página inicial Petrobras

no content

Sugestões de busca

Mais pesquisados

Preço dos combustíveis

Pré-Sal

Time Petrobras

`; const searchElement = fragmentElement.querySelector( '.search-dropzone .fragment_8425', ); configuration.menuColor === 'linear' && searchElement?.classList.add('dark-mode'); const firstLevelItems = fragmentElement.querySelectorAll( '.submenuItens .portlet-body ul.level-1 > li', ); const submenuDefault = fragmentElement.querySelector('.subMenu'); const submenuActiveContainer = fragmentElement.querySelector('.submenu-active'); const sublinksContainer = fragmentElement.querySelector( '.submenu-active .sublinks-container', ); const sideBarContainer = fragmentElement.querySelector( '.submenu-active .side-bar', ); const submenusContainer = fragmentElement.querySelector( '.submenu-active .submenus', ); const sideBarMenusContainer = fragmentElement.querySelector( '.side-bar .menus-container', ); const hasSubMenu = (element) => !(element.querySelector('ul') === null); /*Creates headers and cards sections*/ const numberOfFirstLevelSections = Array.from(firstLevelItems).filter((item) => hasSubMenu(item), ).length; const secondLevelItems = fragmentElement.querySelectorAll( '.submenuItens .portlet-body ul.level-2 > li', ); const numberOfSecondLevelSections = Array.from(secondLevelItems).filter( (item) => hasSubMenu(item), ).length; const headerContainer = fragmentElement.querySelector( '.submenus .header-container', ); const headerTitleLevelOne = resources.querySelector('.header-title.level-1'); const headerTitleLevelTwo = resources.querySelector('.header-title.level-2'); const resourcesCardsContainer = resources.querySelector('.cards-container'); const closeIcon = resources.querySelector('.close-icon'); for (let i = 1; i { const sublinksFirstColumn = fragmentElement.querySelector( '.submenu-active .sublinks-container .first-column', ); const sublinksSecondColumn = fragmentElement.querySelector( '.submenu-active .sublinks-container .second-column', ); const sublinksThirdColumn = fragmentElement.querySelector( '.submenu-active .sublinks-container .third-column', ); [sublinksFirstColumn, sublinksSecondColumn, sublinksThirdColumn].forEach( (container) => { for (let child of container.children) { child.remove(); } }, ); }; const clearAllContainers = () => { const sideBarMenusContainer = fragmentElement.querySelector( '.submenu-active .menus-container', ); for (let child of sideBarMenusContainer.children) { child.remove(); } clearSublinksColumns(); }; const showSubmenuActive = () => { submenuActiveContainer.classList.add('visible'); submenuActiveContainer.classList.remove('hidden'); isShowingSubmenuActive = true; activeSection.addEventListener('keydown', (e) => { if (e.key === 'Tab' && !e.shiftKey && isShowingSubmenuActive) { e.preventDefault(); const firstSecondLevelItem = fragmentElement.querySelector( '.submenu-active .side-bar ul li', ); firstSecondLevelItem.focus(); firstSecondLevelItem.addEventListener('keydown', (e) => { if (e.shiftKey && e.key === 'Tab') { e.preventDefault(); activeSection.focus(); } }); } }); /*Changing colors of submenu default on show submenu active*/ if (configuration.menuColor === 'linear') { submenuDefault.classList.replace('linear', 'color'); searchElement && searchElement.classList.toggle('dark-mode'); } }; const hideSubmenuActive = () => { // [accessibility] Indicates that the previous first level menu has been hidden const previousExpandedFirstLevelMenu = fragmentElement.querySelector( '.submenuItens ul.level-1 li.section[aria-expanded="true"]', ); previousExpandedFirstLevelMenu?.setAttribute('aria-expanded', 'false'); // [accessibility] Indicates that the previous second level menu has been hidden const previousExpandedSecondLevelMenu = fragmentElement.querySelector( '.menus-container ul li[aria-expanded="true"]', ); previousExpandedSecondLevelMenu?.setAttribute('aria-expanded', 'false'); const activeIcon = activeSection?.querySelector('.menu-dropdown-icon'); activeIcon?.classList.remove('dropdown-open'); submenuActiveContainer.classList.remove('visible'); submenuActiveContainer.classList.add('hidden'); isShowingSubmenuActive = false; /*Changing colors of submenu default on hide submenu active*/ if (configuration.menuColor === 'linear') { submenuDefault.classList.replace('color', 'linear'); searchElement && searchElement.classList.toggle('dark-mode'); } }; const showLinksHideCards = () => { activeCardContainer?.classList.add('hidden'); sublinksContainer.classList.remove('hidden'); }; const showCardsHideLinks = () => { activeCardContainer?.classList.remove('hidden'); sublinksContainer.classList.add('hidden'); }; const setUpSecondLevelMenus = (firstLevelItem) => { clearAllContainers(); showCardsHideLinks(); // [accessibility] Indicates that the previous first level menu has been hidden const previousExpandedFirstLevelMenu = fragmentElement.querySelector( '.submenuItens ul.level-1 li.section[aria-expanded="true"]', ); previousExpandedFirstLevelMenu?.setAttribute('aria-expanded', 'false'); // [accessibility] Indicates that the previous second level menu has been hidden const previousExpandedSecondLevelMenu = fragmentElement.querySelector( '.menus-container ul li[aria-expanded="true"]', ); previousExpandedSecondLevelMenu?.setAttribute('aria-expanded', 'false'); /*This prevents the active submenu from being displayed while the page loads*/ submenuActiveContainer.classList.remove('display-none'); previousSection = activeSection; activeSection = firstLevelItem; const previousIcon = previousSection?.querySelector('.menu-dropdown-icon'); previousIcon?.classList.remove('dropdown-open'); const activeIcon = activeSection?.querySelector('.menu-dropdown-icon'); activeIcon?.classList.add('dropdown-open'); if (isShowingSubmenuActive) { if (activeSection === previousSection) { hideSubmenuActive(); activeIcon?.classList.remove('dropdown-open'); } else { firstLevelItem.setAttribute('aria-expanded', 'true'); } } else { showSubmenuActive(); firstLevelItem.setAttribute('aria-expanded', 'true'); } // displays the editable title for the clicked menu item previousTitle = activeTitle; previousTitle?.classList.add('hidden'); const index = firstLevelItem.getAttribute('index'); const titleToShow = fragmentElement.querySelector( `.submenus .header-container .header-title.level-1.item-${index}`, ); titleToShow.classList.remove('hidden'); activeTitle = titleToShow; // displays editable cards for the clicked menu item previousCardContainer = activeCardContainer; previousCardContainer?.classList.add('hidden'); const cardContainerToShow = fragmentElement.querySelector( `.submenus .cards-container.item-${index}`, ); cardContainerToShow.classList.remove('hidden'); activeCardContainer = cardContainerToShow; // Set sidebar title const sectionTitle = fragmentElement.querySelector('.side-bar-title'); sectionTitle.textContent = firstLevelItem.firstChild.textContent; // Gets the second level menus from the clicked item const secondLevelMenus = firstLevelItem.querySelector('ul.level-2'); sideBarMenusContainer.appendChild(secondLevelMenus?.cloneNode(true)); // Get all second level items from the clicked item const secondLevelMenuItems = sideBarMenusContainer.querySelectorAll('ul.level-2 > li'); // Style the sections and add click event to configure the third level of menus secondLevelMenuItems.forEach((secondLevelItem, i) => { secondLevelItem.classList.add('button-md-bold'); if (hasSubMenu(secondLevelItem)) { secondLevelItem.classList.add('section', 'submenu-item-section'); secondLevelItem.setAttribute('aria-expanded', 'false'); const sectionRightIcon = resources.querySelector('.section-right-icon'); secondLevelItem.appendChild(sectionRightIcon.cloneNode(true)); secondLevelItem.addEventListener('click', () => setUpThirdLevelMenus(secondLevelItem, i + 1), ); // for tab navigation secondLevelItem.addEventListener('keypress', (event) => { event.preventDefault(); if (event.key === 'Enter') { if (sublinksContainer.classList.contains('hidden')) { setUpThirdLevelMenus(secondLevelItem); } else { showCardsHideLinks(); } } }); secondLevelItem.addEventListener('keydown', (e) => { // tab navagation (move focus) sidebar into links container (third level links) if ( e.key === 'Tab' && !e.shiftKey && !sublinksContainer.classList.contains('hidden') ) { e.preventDefault(); const firstLink = sublinksContainer.querySelector('a'); const allLinks = sublinksContainer.querySelectorAll('a'); const lastLink = allLinks[allLinks.length - 1]; firstLink?.focus(); firstLink?.addEventListener('keydown', (e) => { // focus go back to menus sidebar if (e.shiftKey && e.key === 'Tab') { e.preventDefault(); secondLevelItem.focus(); showCardsHideLinks(); } }); lastLink?.addEventListener('keydown', (e) => { // focus go to close icon if (e.key === 'Tab' && !e.shiftKey) { e.preventDefault(); fragmentElement .querySelector('.submenu-active .header-container .close-icon') ?.focus(); } }); } }); // [accessibility] const menuName = secondLevelItem.firstChild.textContent; const accessibilityText = document.createElement('span'); accessibilityText.textContent = themeDisplay.getLanguageId() === 'en_US' ? `show submenu "${menuName}"` : `mostrar submenu "${menuName}"`; accessibilityText.classList.add('visually-hidden'); secondLevelItem.appendChild(accessibilityText); } else { secondLevelItem.classList.add('link', 'submenu-item-link'); secondLevelItem.addEventListener( 'keypress', (e) => e.key === 'Enter' && secondLevelItem.querySelector('a')?.click(), ); secondLevelItem.setAttribute('tabindex', '0'); secondLevelItem.querySelector('a')?.setAttribute('tabindex', '-1'); const childLinkTag = secondLevelItem.querySelector('a'); childLinkTag && childLinkTag.classList.add('submenu-item-link'); } }); // [accessibility | tab navigation] const lastSecondLevelItem = secondLevelMenuItems[secondLevelItems.length - 1]; lastSecondLevelItem.addEventListener('keydown', (e) => { if (e.key === 'Tab' && !e.shiftKey) { e.preventDefault(); if (sublinksContainer.classList.contains('hidden')) { // moves focus to highlights cards on tab const firstHighlightCard = fragmentElement.querySelector( '.submenu-active .cards-container:not(.hidden) .first-card', ); firstHighlightCard?.focus(); // moves focus back to menus on shift+tab firstHighlightCard?.addEventListener('keydown', (e) => { if (e.shiftKey && e.key === 'Tab') { e.preventDefault(); lastSecondLevelItem.focus(); showCardsHideLinks(); } }); } else { // moves focus to sublinks (third level links) const firstLink = sublinksContainer.querySelector('a'); firstLink?.focus(); firstLink?.addEventListener('keydown', (e) => { // moves focus back to menus on shift+tab if (e.shiftKey && e.key === 'Tab') { e.preventDefault(); lastSecondLevelItem.focus(); } }); } } }); }; const setUpThirdLevelMenus = (secondLevelItem) => { clearSublinksColumns(); showLinksHideCards(); const previousExpandedSecondLevelMenu = fragmentElement.querySelector( '.menus-container ul li[aria-expanded="true"]', ); previousExpandedSecondLevelMenu?.setAttribute('aria-expanded', 'false'); secondLevelItem.setAttribute('aria-expanded', 'true'); // Gets the third level menus from the clicked item const thirdLevelMenus = secondLevelItem.querySelector('ul.level-3'); // Remove elements after level 5 const elementsToRemove = thirdLevelMenus.querySelectorAll('ul.level-6'); elementsToRemove.forEach((element) => element.remove()); // Get all third level items from the clicked item const thirdLevelItems = secondLevelItem.querySelectorAll('ul.level-3 li'); // displays the editable title for the clicked menu item previousTitle = activeTitle; previousTitle?.classList.add('hidden'); const index = secondLevelItem.getAttribute('index'); const titleToShow = fragmentElement.querySelector( `.submenus .header-container .header-title.level-2.item-${index}`, ); titleToShow.classList.remove('hidden'); activeTitle = titleToShow; const mountFirstLinkColumn = () => { const firstColumn = fragmentElement.querySelector( '.sublinks-container .first-column', ); firstColumn.appendChild(thirdLevelMenus.cloneNode(true)); firstColumn.style.display = 'block'; /*Show the 1..5 itens in first column*/ const menuItems = firstColumn.querySelectorAll('li a'); menuItems.forEach((item, index) => { if (index { const secondColumn = fragmentElement.querySelector( '.sublinks-container .second-column', ); secondColumn.appendChild(thirdLevelMenus.cloneNode(true)); secondColumn.style.display = 'block'; /*Show the 6..10 itens in second column*/ const menuItems = secondColumn.querySelectorAll('li a'); menuItems.forEach((item, index) => { if (index >= 5 && index { const thirdColumn = fragmentElement.querySelector( '.sublinks-container .third-column', ); thirdColumn.appendChild(thirdLevelMenus.cloneNode(true)); thirdColumn.style.display = 'block'; /*Show the 10..15 itens in third column*/ const menuItems = thirdColumn.querySelectorAll('li a'); menuItems.forEach((item, index) => { if (index >= 10 && index 15) { const buttonArrow = resources.querySelector('.button-arrow-icon'); const parentSection = secondLevelItem.firstElementChild; if (parentSection !== null && parentSection.tagName === 'A') { const button = menuItems[14].firstChild; button.classList.add('button', 'button-sm-bold'); button.textContent = 'Ver mais ' + parentSection.textContent; button.href = parentSection.href; button.appendChild(buttonArrow.cloneNode(true)); } } }; /* Mount link columns based on number of items */ if (thirdLevelItems.length 5 && thirdLevelItems.length 10) { // Three columns mountFirstLinkColumn(); mountSecondLinkColumn(); mountThirdLinkColumn(); } }; const setUpFirstLevelSection = (firstLevelItem) => { firstLevelItem.classList.add('section', 'submenu-item-section'); firstLevelItem.setAttribute('tabindex', '0'); firstLevelItem.setAttribute('aria-expanded', 'false'); const sectionContainer = document.createElement('div'); const dropdownIcon = resources.querySelector('.menu-dropdown-icon'); const itemLabel = firstLevelItem.firstChild; sectionContainer.appendChild(itemLabel.cloneNode(true)); sectionContainer.appendChild(dropdownIcon.cloneNode(true)); sectionContainer.classList.add('first-level-container'); firstLevelItem.replaceChild(sectionContainer, itemLabel); firstLevelItem.addEventListener('click', () => setUpSecondLevelMenus(firstLevelItem), ); firstLevelItem.addEventListener('keypress', (event) => { event.preventDefault(); // for tab navigation if (event.key === 'Enter') { setUpSecondLevelMenus(firstLevelItem); sideBarContainer.click(); } }); // [accessibility] const menuName = itemLabel.textContent; const accessibilityText = document.createElement('span'); accessibilityText.textContent = themeDisplay.getLanguageId() === 'en_US' ? `show submenu "${menuName}"` : `mostrar submenu "${menuName}"`; accessibilityText.classList.add('visually-hidden'); firstLevelItem.appendChild(accessibilityText); }; // Mark first level sections and add dropdown icon // Add click event listener that configures the second level firstLevelItems.forEach((firstLevelItem) => { if (hasSubMenu(firstLevelItem)) { setUpFirstLevelSection(firstLevelItem); } else { firstLevelItem.classList.add('link'); const childLinkTag = firstLevelItem.querySelector('a'); childLinkTag && childLinkTag.classList.add('submenu-item-link'); } }); /* Close icon eventListener */ const sectionHeaderCloseIcon = fragmentElement.querySelector( '.submenu-active .header-container .close-icon', ); if (typeof enhanceCloseIcon === 'function') { enhanceCloseIcon(sectionHeaderCloseIcon, { labelPt: 'Fechar submenu', labelEn: 'Close submenu', }); } sectionHeaderCloseIcon.addEventListener('click', hideSubmenuActive); sectionHeaderCloseIcon.addEventListener('keydown', (e) => { // tab navigation e.preventDefault(); if (e.key === 'Tab' && !e.shiftKey) { // only tab activeSection && activeSection.focus(); } else if (e.key === 'Tab' && e.shiftKey) { // shift + tab if (sublinksContainer.classList.contains('hidden')) { // is showing highlights cards const secondHighlightCard = fragmentElement.querySelector( '.submenu-active .cards-container:not(.hidden) .second-card', ); secondHighlightCard?.focus(); // back to second card } else { // is showing links const allLinks = sublinksContainer.querySelectorAll('a'); const lastLink = allLinks[allLinks.length - 1]; lastLink?.focus(); // back to last link } } else if (e.key === 'Enter') { e.preventDefault(); activeSection && activeSection.focus(); hideSubmenuActive(); } }); submenuActiveContainer.addEventListener('animationend', (e) => { if (e.animationName === 'hide-menu-transition') { submenuActiveContainer.classList.add('display-none'); } }); const searchDropzoneContainer = fragmentElement.querySelector('.search-dropzone'); searchDropzoneContainer.classList.add('only-icon'); // indexing the first level sections const firstLevelSections = fragmentElement.querySelectorAll( '.submenuItens .portlet-body ul.level-1 > li.section', ); firstLevelSections.forEach((section, i) => section.setAttribute('index', `${i + 1}`), ); // indexing all second level sections let secondlevelIndexCount = 1; const secondLevelSections = fragmentElement.querySelectorAll( '.submenuItens .portlet-body ul.level-2 > li', ); secondLevelSections.forEach((item) => { if (hasSubMenu(item)) { item.setAttribute('index', `${secondlevelIndexCount}`); item.setAttribute('tabindex', '0'); secondlevelIndexCount++; } }); window.addEventListener('load', function () { const searchFragment = fragmentElement.querySelector( '.search-dropzone .fragment_8425', ); const searchContainer = fragmentElement.querySelector( '.search-dropzone .fragment_8425 .container', ); const searchIcon = fragmentElement.querySelector( '.search-dropzone .fragment_8425 .search-icon', ); const itens = fragmentElement.querySelector('.submenuItens'); const searchInput = fragmentElement.querySelector( '.search-dropzone .fragment_8425 .petro-search-container .input-group input', ); searchContainer && searchContainer.addEventListener('click', () => searchInput.focus()); const searchFocusCallback = () => { itens.classList.add('hideMenuItems'); searchDropzoneContainer.classList.replace( 'search-inactive', 'search-active', ); searchInput.placeholder = themeDisplay.getLanguageId() === 'en_US' ? 'What are you looking for?' : 'O que você está procurando?'; searchDropzoneContainer.classList.remove('only-icon'); searchInput.focus(); searchIcon.style.pointerEvents = 'none'; }; if (searchIcon) { searchIcon.addEventListener('click', searchFocusCallback); searchIcon.addEventListener('keypress', (event) => { if (event.key === 'Enter') { searchIcon.click(); } }); } if (searchInput) { searchInput.addEventListener( 'keyup', (event) => { event.stopPropagation(); event.preventDefault(); if (event.key === 'Tab' && event.shiftKey) { firstLevelItems[firstLevelItems.length - 1].focus(); console.log('shift+tab', firstLevelItems[firstLevelItems.length - 1]); } }, false, ); } const searchBlurCallback = (event) => { if (!searchContainer.contains(event.relatedTarget)) { itens.classList.remove('hideMenuItems'); searchDropzoneContainer.classList.replace( 'search-active', 'search-inactive', ); searchInput.placeholder = themeDisplay.getLanguageId() === 'en_US' ? 'Search' : 'Buscar'; searchDropzoneContainer.classList.add('only-icon'); searchElement?.classList.add('only-icon'); searchIcon.style.pointerEvents = 'all'; } }; searchInput?.addEventListener('blur', searchBlurCallback); searchFragment && searchFragment.addEventListener('blur', searchBlurCallback); /*Clicking on the sandwich menu opens 'Navegue nas Seções'*/ const tabletSandwichMenu = fragmentElement.querySelector( '.tablet-sandwich-menu', ); const sectionsNavScreen = document.querySelector('.fragment_88197'); if (tabletSandwichMenu && sectionsNavScreen) { tabletSandwichMenu.addEventListener('click', () => { sectionsNavScreen.style.display = 'flex'; document.body.style.overflowY = 'hidden'; const firstFocusable = sectionsNavScreen.querySelector( 'a[href], [role="button"], button, [tabindex]:not([tabindex="-1"])' ); firstFocusable && firstFocusable.focus(); }); } }); //For tab navigation const logoSvg = fragmentElement.querySelector('svg.logoImage'); const logoLink = fragmentElement.querySelector('a.logo'); logoSvg.addEventListener('keypress', (event) => { if (event.key === 'Enter') { logoLink && logoLink.click(); } }); const secondHighlightCards = fragmentElement.querySelectorAll( '.submenu-active .cards-container .second-card', ); secondHighlightCards.forEach((secondHighlightCard) => { secondHighlightCard.addEventListener('keydown', (e) => { if (e.key === 'Tab' && !e.shiftKey) { e.preventDefault(); const headerContainer = fragmentElement.querySelector( '.submenu-active .header-container .close-icon', ); headerContainer.focus(); } }); }); //API Config const parameterizeString = (string) => { return string .toLowerCase() .normalize('NFD') .replace(/\p{Mn}/gu, '') .replace(/[^a-zA-Z0-9\s]/g, '') .replaceAll(' ', '_'); }; const addSectionNamesProp = () => { firstLevelItems.forEach((firstLevelItem) => { if (hasSubMenu(firstLevelItem)) { const index = firstLevelItem.getAttribute('index'); const cardContainerToShow = fragmentElement.querySelector( `.submenus .cards-container.item-${index}`, ); cardContainerToShow.setAttribute( 'section-name', parameterizeString(firstLevelItem.firstChild.textContent.trim()), ); const titleToShow = fragmentElement.querySelector( `.submenus .header-container .header-title.level-1.item-${index}`, ); titleToShow.setAttribute( 'section-name', parameterizeString(firstLevelItem.firstChild.textContent.trim()), ); const secondLevelMenuItems = firstLevelItem.querySelectorAll('ul.level-2 > li'); secondLevelMenuItems.forEach((secondLevelItem) => { if (hasSubMenu(secondLevelItem)) { const index = secondLevelItem.getAttribute('index'); const titleToShow = fragmentElement.querySelector( `.submenus .header-container .header-title.level-2.item-${index}`, ); titleToShow.setAttribute( 'section-name', parameterizeString(secondLevelItem.firstChild.textContent.trim()), ); } }); } }); }; const getApiSectionData = (apiResponse) => { const items = apiResponse.items; const sectionsData = items.map((sectionData) => ({ id: sectionData.id, childSections: JSON.parse(sectionData.childSections), firstCardDescription: sectionData.firstCardDescription, firstCardImage: JSON.parse(sectionData.firstCardImage)[0], firstCardImageAlt: sectionData.firstCardImageAlt, firstCardLink: sectionData.firstCardLink, firstCardTitle: sectionData.firstCardTitle, headerTitle: sectionData.headerTitle, secondCardDescription: sectionData.secondCardDescription, secondCardImage: JSON.parse(sectionData.secondCardImage)[0], secondCardImageAlt: sectionData.secondCardImageAlt, secondCardLink: sectionData.secondCardLink, secondCardTitle: sectionData.secondCardTitle, sectionName: sectionData.sectionName, })); return sectionsData; }; const populateSectionsData = (data) => { const storedData = getApiSectionData(data); storedData.forEach((storedSection) => { /*Cards section title*/ const headerTitle = fragmentElement.querySelector( `.header-title[section-name=${storedSection.sectionName}]`, ); headerTitle && (headerTitle.textContent = storedSection.headerTitle); const cardsContainer = fragmentElement.querySelector( `.cards-container[section-name=${storedSection.sectionName}]`, ); if (cardsContainer) { const firstCardDescription = cardsContainer.querySelector( '.first-card .description', ); const secondCardDescription = cardsContainer.querySelector( '.second-card .description', ); const firstCardPicture = cardsContainer.querySelector( '.first-card picture', ); const firstCardImg = cardsContainer.querySelector('.first-card img'); const secondCardPicture = cardsContainer.querySelector( '.second-card picture', ); const secondCardImg = cardsContainer.querySelector('.second-card img'); const firstCardLink = cardsContainer.querySelector('.first-card a'); const secondCardLink = cardsContainer.querySelector('.second-card a'); const firstCardTitle = cardsContainer.querySelector( '.first-card .card-title', ); const secondCardTitle = cardsContainer.querySelector( '.second-card .card-title', ); firstCardDescription.textContent = storedSection.firstCardDescription; secondCardDescription.textContent = storedSection.secondCardDescription; firstCardPicture.querySelector('source').srcset = `/o/adaptive-media/image/${storedSection.firstCardImage.id}/${adaptativeMediaMobileResolutionName}/image`; firstCardImg.src = `/o/adaptive-media/image/${storedSection.firstCardImage.id}/${adaptativeMediaDesktopResolutionName}/image`; secondCardPicture.querySelector('source').srcset = `/o/adaptive-media/image/${storedSection.secondCardImage.id}/${adaptativeMediaMobileResolutionName}/image`; secondCardImg.src = `/o/adaptive-media/image/${storedSection.secondCardImage.id}/${adaptativeMediaDesktopResolutionName}/image`; firstCardImg.alt = storedSection.firstCardImageAlt; secondCardImg.alt = storedSection.secondCardImageAlt; firstCardLink.href = storedSection.firstCardLink; secondCardLink.href = storedSection.secondCardLink; firstCardTitle.textContent = storedSection.firstCardTitle; secondCardTitle.textContent = storedSection.secondCardTitle; } /*Child sections titles*/ storedSection.childSections.forEach((childSection) => { const headerTitle = fragmentElement.querySelector( `.header-title[section-name=${childSection.childSectionName}]`, ); headerTitle && (headerTitle.textContent = childSection.childSectionValue); }); }); }; async function loadSubmenuData() { fetch(`/o/c/destaquesubmenus/scopes/${themeDisplay.getScopeGroupId()}`, { method: 'GET', headers: { accept: 'application/json', 'Accept-Language': 'en-US', 'x-csrf-token': Liferay.authToken, }, }) .then((response) => { if (response.status === 200) { return response.json(); } else { throw new Error('Erro interno. Por favor tente mais tarde.'); } }) .then((data) => { populateSectionsData(data); }) .catch((error) => { console.error('Erro ao buscar dados dos menus:', error); }); } addSectionNamesProp(); loadSubmenuData(); /*Adjust linar variation whithout site name*/ if (configuration.showSiteName) { submenuDefault.classList.add('with-site-name'); } window.addEventListener('load', () => { if (!editMode) { const cards = fragmentElement.querySelectorAll('.card'); cards.forEach((card) => { const cardLink = card.querySelector('a'); const cardTitle = card.querySelector('.card-title'); cardLink.textContent = cardTitle.textContent; // For GTM cardLink.classList.add('not-edit-mode', 'submenu-card-link'); // For GTM cardLink.classList.add('hidden'); card.addEventListener('keypress', (event) => { event.key === 'Enter' && cardLink.click(); }); }); } }); /* Sticky menu */ const stickyMenu = fragmentElement.querySelector('.fragment_87558'); if (stickyMenu && !editMode) { const placeholder = document.createElement('div'); placeholder.className = 'fragment_87558-placeholder'; stickyMenu.parentNode.insertBefore(placeholder, stickyMenu); let initialTop = 0; let menuHeight = 0; const getFixedTopOffset = () => { const adminBar = document.querySelector('.control-menu'); if (!adminBar || !document.body.classList.contains('has-control-menu')) { return 0; } return adminBar.offsetHeight + 24; }; const updateMenuCssVars = () => { const fixedTop = getFixedTopOffset(); const currentHeight = stickyMenu.classList.contains('compact') ? 54 : 104; document.documentElement.style.setProperty( '--submenu-fixed-top', `${fixedTop}px` ); document.documentElement.style.setProperty( '--submenu-current-height', `${currentHeight}px` ); }; const updateStickyMetrics = () => { const wasFixed = stickyMenu.classList.contains('is-fixed'); stickyMenu.classList.remove('is-fixed'); stickyMenu.style.top = ''; stickyMenu.style.left = ''; stickyMenu.style.width = ''; placeholder.classList.remove('active'); placeholder.style.height = ''; const rect = stickyMenu.getBoundingClientRect(); initialTop = rect.top + window.scrollY; menuHeight = stickyMenu.offsetHeight; placeholder.style.height = `${menuHeight}px`; if (wasFixed) { placeholder.classList.add('active'); } updateMenuCssVars(); }; const handleCompactMenu = () => { if (window.scrollY > 80) { stickyMenu.classList.add('compact'); if (configuration.menuColor === 'linear') { searchElement && searchElement.classList.remove('dark-mode'); } } else { stickyMenu.classList.remove('compact'); if (configuration.menuColor === 'linear') { searchElement && searchElement.classList.add('dark-mode'); } } updateMenuCssVars(); }; const handleStickyMenu = () => { const fixedTop = getFixedTopOffset(); if (window.scrollY >= initialTop - fixedTop) { const rect = placeholder.getBoundingClientRect(); stickyMenu.classList.add('is-fixed'); stickyMenu.style.top = `${fixedTop}px`; stickyMenu.style.left = `${rect.left}px`; stickyMenu.style.width = `${rect.width}px`; placeholder.classList.add('active'); } else { stickyMenu.classList.remove('is-fixed'); stickyMenu.style.top = ''; stickyMenu.style.left = ''; stickyMenu.style.width = ''; placeholder.classList.remove('active'); } handleCompactMenu(); updateMenuCssVars(); }; const syncStickyMenu = () => { requestAnimationFrame(() => { updateStickyMetrics(); handleStickyMenu(); }); }; window.addEventListener('load', syncStickyMenu); window.addEventListener('resize', syncStickyMenu); window.addEventListener('scroll', handleStickyMenu); const observerTargets = [ document.body, document.querySelector('.control-menu'), document.querySelector('.product-menu') ].filter(Boolean); const stickyObserver = new MutationObserver(() => { syncStickyMenu(); setTimeout(syncStickyMenu, 120); setTimeout(syncStickyMenu, 260); setTimeout(syncStickyMenu, 420); }); observerTargets.forEach((target) => { stickyObserver.observe(target, { attributes: true, attributeFilter: ['class', 'style'] }); }); const productMenuToggler = document.querySelector( '.product-menu-toggle, .control-menu-nav-item .icon-monospaced, [aria-label="Open Product Menu"]' ); productMenuToggler?.addEventListener('click', () => { syncStickyMenu(); setTimeout(syncStickyMenu, 120); setTimeout(syncStickyMenu, 260); setTimeout(syncStickyMenu, 420); }); };

Jogadoras que marcaram a história

Conheça a história inspiradora de 6 jogadoras da seleção brasileira que são verdadeiras referências no futebol feminino e influenciam atletas há décadas.

Destaques

Vista aérea noturna do CENPES, centro de pesquisa da Petrobras, com destaque para o edifício circular iluminado e demais blocos do complexo.

Inovação que cresce junto com quem inova

Seleções públicas do Programa Petrobras Socioambiental

Mulher sorridente sentada à mesa em ambiente corporativo, com notebook, celular e bloco de anotações à sua frente.

Seleção Petrobras de Jornalismo

Link

Homem falando ao telefone público em uma rua, diante de um mural coberto por cartazes políticos, em cena ambientada em contexto histórico brasileiro.

7 filmes brasileiros indicados e premiados internacionalmente

Guia completo sobre Transição Energética

Atleta de arco e flecha com uniforme do Time Petrobras em pose de celebração, segurando seu equipamento esportivo sobre fundo amarelo e verde.

Time Petrobras: juntos pelo esporte brasileiro

Link

Vista aérea noturna do CENPES, centro de pesquisa da Petrobras, com destaque para o edifício circular iluminado e demais blocos do complexo.

Inovação que cresce junto com quem inova

Link

Colaboradora da Petrobras produzindo Petróleo em plataforma FPSO.

Descubra a Petrobras

Do combustível ao plástico: você sabe tudo que vem do petróleo?

Descubra como os derivados do petróleo estão presentes no seu dia a dia — de combustíveis a produtos como roupas, embalagens e cosméticos — e entenda como eles são produzidos.

Button Label

Fileira de turbinas eólicas em silhueta ao pôr do sol com texto "A importância das energias renováveis".

Descubra a Petrobras

Energia solar, eólica e muito mais: conheça as renováveis

A energia renovável é gerada a partir de fontes naturais que se renovam continuamente. No Brasil, 84% de toda energia elétrica já vem dessas fontes.

Botão de ação

Vista aérea da Fábrica de Fertilizantes Nitrogenados da Petrobras (FAFEN-SE), com estruturas industriais, tanques e prédios administrativos cercados por área verde.

Descubra a Petrobras

Fertilizantes e transição energética: um elo estratégico

Descubra como a produção de fertilizantes integra energia, agricultura e segurança alimentar no Brasil.

quiSaiba mais sobre o projeto

Notícias e curiosidades

Casal de dançarinos com trajes típicos coloridos se apresentando no São João de Caruaru, com bandeirinhas e balões decorativos ao fundo.

Descubra cinco curiosidades sobre as festas de São João

Mão com luva segurando uma proveta contendo combustível amarelo, em ambiente de laboratório com iluminação desfocada ao fundo.

Junho inicia com desconto nos preços de diesel

Duas operadoras com macacões laranja da Petrobras monitoram painéis de controle com múltiplos monitores exibindo diagramas de processo em sala de controle de refinaria.

Diversidade, Equidade e Inclusão: energia que move o mundo é para todos

Profissional de laboratório usando luvas azuis analisa uma amostra de combustível em frasco de vidro, em ambiente de pesquisa e desenvolvimento.

Entenda como se forma o preço dos combustíveis

Três aerogeradores brancos sobre vegetação verde sob céu azul, representando a geração de energia eólica na transição energética

Qual a diferença entre a transição energética justa e transição energética?

Duas operadoras com macacões laranja da Petrobras monitoram painéis de controle com múltiplos monitores exibindo diagramas de processo em sala de controle de refinaria.

Diversidade, Equidade e Inclusão: energia que move o mundo é para todos

Transição Energética Justa

Operação de abastecimento entre embarcações no mar, com mangueiras conectadas para transferência de combustível e estruturas navais visíveis no convés.

Bunker VLS B24: qualidade e sustentabilidade para os mares

Combustível marítimo com 24% de biodiesel de alta qualidade, atende aos critérios da ANP e exigências da Diretiva Europeia de Energia Renovável.

Link de exemplo

Trabalhador com equipamentos de proteção segura um frasco com líquido amarelado em uma refinaria da Petrobras, com estruturas industriais ao fundo.

Diesel R: A nova geração de combustíveis

Mais sustentável, o Diesel R atende aos motores mais exigentes sem exigir mudanças na logística ou no armazenamento.

Link de exemplo

Avião comercial em pátio de aeroporto ao entardecer, com outro aeronave decolando ao fundo sob céu alaranjado.

SAF Petrobras: impulsionando o futuro da aviação

O SAF Petrobras combina querosene de aviação convencional com uma fração renovável obtida a partir de matérias-primas sustentáveis.

Link de exemplo

Foto aérea de uma autoestrada em meio a uma floresta, representando os produtos asfálticos da Petrobras.

Cap Pro: mais sustentabilidade para os caminhos do Brasil

O CAP Pro é um cimento asfáltico com material reciclável que reduz em até 65% as emissões estimadas na instalação e melhora as condições de trabalho.

Link de exemplo

Acesse também

Jovem trabalhador da Petrobras em destaque, usando uniforme laranja, capacete branco e óculos de proteção, com uma plataforma de petróleo ao fundo sob céu azul.

Concursos

Vista panorâmica de um mar azul profundo sob um céu claro com sol brilhante e nuvens esparsas.

Margem Equatorial

Vista aérea de um complexo de vias elevadas com carros em movimento, formando um cruzamento urbano.

Produtos

Close-up de uma mão segurando um bico de abastecimento verde inserido no tanque de um veículo branco.

Preços dos Combustíveis

Utilize nossa busca para encontrar o que procura

no content

Sugestões de busca

Mais pesquisados

Preço dos combustíveis

Pré-Sal

Time Petrobras

no content

Sugestões de busca

Mais pesquisados

Preço dos combustíveis

Pré-Sal

Time Petrobras

Idioma:

Selecione um idioma:

Português Inglês

Acessibilidade

Alto-Contraste

Desligado

Ligado

Alto-Contraste

Texto Grande

Desligado

Ligado

Texto Grande

Escolha um Canal:

Portal da Transparência

Transparência

Portal da Transparência

Investidor Petrobras

Investidor Petrobras

Investidor Petrobras

Nossa Energia

Nossa Energia