Página inicial Nossa Energia
Nossa Energia
Faça uma busca:
Mais pesquisados
Preço dos combustíveis
Pré-Sal
Time Petrobras
Um erro ocorreu enquanto processava o modelo.
The following has evaluated to null or missing:
==> highlightsDates [in template "20099#20135#11049244" at line 756, column 24]
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #list highlightsDates as hDate [in template "20099#20135#11049244" at line 756, column 17]
----
1<#--
2Widget templates can be used to modify the look of a
3specific application.
4
5Please use the right panel to quickly add commonly used variables.
6Autocomplete is also available and can be invoked by typing "${".
7-->
8
9<#assign codGlobalSite = 20135 />
10
11<#if codGlobalSite != themeDisplay.getScopeGroupId() >
12
13<#-- Conteúdo Web -> Templates: Funções gerais -->
14<#include "${templatesPath}/1975398" />
15
16<#-- Conteúdo Web -> Templates: Busca pelas imagens do tipo de noticia -->
17<#include "${templatesPath}/18598756" />
18
19<#assign POST_TYPES_CATEGORIES = getPostTypeImages()!default([]) />
20
21<#-- Nome das midias adaptativas de imagem para desktop e mobile -->
22<#assign adaptativeMediaDesktopResolutionName = "Preview-1000x0" />
23<#assign adaptativeMediaMobileResolutionName = "Thumbnail-300x300" />
24
25
26<#-- Liferay Services -->
27<#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
28<#assign fileEntryService = staticUtil["com.liferay.document.library.kernel.service.DLFileEntryLocalServiceUtil"] />
29<#assign layoutLocalService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutLocalService")>
30<#assign assetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService") />
31<#assign assetVocabularyService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyService") />
32<#assign assetCategoryPropService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService") />
33<#assign layout = layoutLocalService.getLayout(themeDisplay.getPlid())>
34<#assign vocabularies = assetVocabularyService.getGroupVocabularies(groupId) />
35
36<#assign ourEnergyVocabulary = findVocabulary("Nossa Energia", vocabularies)/>
37<#assign typeOfNewsVocabulary = findVocabulary("Tipo de Notícia", vocabularies )/>
38<#assign typeOfNewsVocabularyId = 10720340 />
39
40<#function extractPublishDate journalArticle>
41 <#assign lastPublishDate = journalArticle.getModifiedDate()>
42 <#if journalArticle.getLastPublishDate()??>
43 <#assign lastPublishDate = journalArticle.getLastPublishDate()>
44 <#else>
45 <#assign lastPublishDate = journalArticle.getModifiedDate()>
46 </#if>
47 <#return lastPublishDate />
48</#function>
49
50<#function normalizeRichText richText>
51 <#return richText
52 ?replace('&[a-z]+;', ' ', 'r') <#-- Remove entidades HTML -->
53 ?replace('<[^>]+>', '', 'r') <#-- Remove tags HTML -->
54 ?replace('[\n\r]+', ' ', 'r') <#-- Normaliza quebras de linha -->
55 ?replace('[“”‘’]', '"', 'r') <#-- Escapa espas curvas -->
56 ?replace('\\\\', '\\\\', 'r') <#-- Escapa barras invertidas -->
57 ?trim <#-- Remove espaços no ínicio/fim -->
58 ?json_string <#-- Escapa o rstante da string para um JSON válido -->
59 >
60</#function>
61
62<#assign contentNumber = randomNumber(4586) />
63
64<#assign folderId = "18598813"/>
65
66<#assign category = "" />
67<#assign categoryName = "" >
68<#if locale?lower_case == 'pt_br'>
69 <#assign categoryName = "Todos" >
70<#else>
71 <#assign categoryName = "All" >
72</#if>
73
74<#if request.getParameter("category")?? && request.getParameter("category")?has_content>
75 <#assign categoryId = request.getParameter("category")?number>
76 <#if categoryId?? && categoryId?has_content>
77 <#assign category = assetCategoryLocalService.getCategory(categoryId) />
78 <#assign categoryName = category.getTitle(locale) />
79 </#if>
80</#if>
81
82<#if categoryId?? && categoryId?has_content>
83 <#attempt>
84 <#assign categoryDates = restClient.get("/headless-admin-taxonomy/v1.0/taxonomy-categories/${categoryId}")>
85 <#recover>
86 <#assign categoryDates = { "name": "", "description": "<p></p>", "parentTaxonomyVocabulary" : {"name": ""}}>
87 </#attempt>
88<#else>
89 <#assign categoryDates = { "name": "", "description": "<p></p>", "parentTaxonomyVocabulary" : {"name": ""}}>
90</#if>
91
92
93<#assign categoryPage = getFirstCategoryOfVocabularyInPage(layout, ourEnergyVocabulary) />
94<#if categoryPage?? && categoryPage?has_content>
95 <#assign categoryName = categoryPage.getTitle(locale) />
96 <#assign categoryId = categoryPage.getCategoryId() />
97 <#assign category = categoryPage />
98 <script>
99 if (!window.location.search.includes('category') && !document.body.classList.contains("has-edit-mode-menu")) {
100 // Redirecionar para uma nova URL
101 const urlPage = new URL(window.location.href);
102 urlPage.searchParams.set('sort', "createDate-");
103 urlPage.searchParams.set('category', "${categoryId}");
104 window.location.href = urlPage.toString();
105 }
106 </script>
107</#if>
108
109<#if categoryDates?? && categoryDates.parentTaxonomyVocabulary?? && (categoryDates.parentTaxonomyVocabulary.name!"")="Nossa Energia">
110 <#attempt>
111 <#assign ourEnergyStyles = [] />
112 <#assign shadowColorCategory = "" />
113 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor da Sombra")??)>
114 <#assign categoryShadowColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor da Sombra") />
115 <#assign shadowColorCategory = categoryShadowColorByService.value />
116 </#if>
117
118 <#assign backgroundColorCategory = "" />
119 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor de Fundo")??)>
120 <#assign categoryBackgroundColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor de Fundo") />
121 <#assign backgroundColorCategory = categoryBackgroundColorByService.value />
122 </#if>
123
124 <#assign textColorCategory = "" />
125 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto")??)>
126 <#assign categoryTextColorByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto") />
127 <#assign textColorCategory = categoryTextColorByService.value />
128 </#if>
129
130 <#assign textColorHighContrastCategory = "" />
131 <#if (assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto em Alto Contraste")??)>
132 <#assign categoryTextColorHighContrastByService = assetCategoryPropService.fetchCategoryProperty(category.getCategoryId(),"Cor do Texto em Alto Contraste") />
133 <#assign textColorHighContrastCategory = categoryTextColorHighContrastByService.value />
134 </#if>
135
136 <#assign ourEnergyStyles = [{"titleLocale": category.getTitle(locale),"shadowColor": shadowColorCategory, "backgroundColor": backgroundColorCategory, "textColor": textColorCategory, "textColorHighContrast": textColorHighContrastCategory}] />
137
138 <#recover>
139 <#assign ourEnergyStyles = [{"titleLocale": "Nenhum", "shadowColor": "000", "backgroundColor": "000", "textColor": "FFF", "textColorHighContrast": "FFF"}] />
140
141 </#attempt>
142</#if>
143
144
145<#-- Root Css -> Para poder instanciar dois elementos e não dar confusão no JS -->
146<#assign rootCss = "results-list-category-container_" + randomNumber(4586) />
147
148<#-- Função para obter a primeira categoria associonada a um Vocabulário o qual está associado a um Jornal Article -->
149<#function getFirstCategoryOfVocabulary journalArticle vocabulary >
150 <#attempt>
151 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", journalArticle.getClassPK()) />
152
153 <#list categories as category>
154 <#if vocabulary.getVocabularyId() == category.getVocabularyId()>
155 <#return category.getTitle(locale)>
156 </#if>
157 </#list>
158
159 <#return "">
160
161 <#recover>
162 <#return "" />
163 </#attempt>
164
165</#function>
166
167<#function getFirstCategoryOfVocabularyInPage layout vocabulary >
168 <#attempt>
169 <#assign categories = assetCategoryLocalService.getCategories("com.liferay.portal.kernel.model.Layout", layout.getPlid()) />
170
171 <#list categories as category>
172 <#if vocabulary.getVocabularyId() == category.getVocabularyId()>
173 <#return category>
174 </#if>
175 </#list>
176
177 <#return "">
178
179 <#recover>
180 <#return "" />
181 </#attempt>
182
183</#function>
184
185
186<#assign countCategoriesDates = 0 />
187<#assign categoriesRestInfo = [] />
188
189<#function getCategoriesDates >
190
191 <#attempt>
192 <#assign countCategoriesDates = countCategoriesDates + 1 />
193
194 <#assign journalArticle = journalArticleLocalService.getLatestArticle(entries[0].getClassPK()) />
195 <#assign ddmStructure = journalArticle.getDDMStructure() />
196 <#assign highlightsRestDates = restClient.get("/headless-delivery/v1.0/content-structures/10700214/structured-contents?fields=contentFields%2CfriendlyUrlPath%2Cid%2Ckey%2CtaxonomyCategoryBriefs%2Ctitle&page=${countCategoriesDates}&pageSize=10&search=%3CtaxonomyCategoryName%3E${categoryName}%3C%2FtaxonomyCategoryName%3E&sort=priority%3Adesc%2CdateCreated%3Adesc") />
197
198 <#list highlightsRestDates.items as item>
199 <#list item.taxonomyCategoryBriefs as category>
200 <#if category.taxonomyCategoryId == categoryId>
201 <#assign categoriesRestInfo += [item] >
202 </#if>
203 </#list>
204 <#if categoriesRestInfo?size gte 3>
205 <#return categoriesRestInfo />
206 </#if>
207
208 </#list>
209
210 <#if categoriesRestInfo?size lt 3>
211 <#call getCategoriesDates() />
212 <#else>
213 <#return categoriesRestInfo />
214 </#if>
215
216 <#recover>
217 <#return categoriesRestInfo />
218 </#attempt>
219
220</#function>
221
222
223<#if categoryId?? && categoryId?has_content>
224 <#attempt>
225 <#assign categoryDates = restClient.get("/headless-admin-taxonomy/v1.0/taxonomy-categories/${categoryId}")>
226 <#recover>
227 <#assign categoryDates = { "name": "", "description": "<p></p>", "parentTaxonomyVocabulary" : {"name": ""}}>
228 </#attempt>
229</#if>
230
231<#function getCategoriesImages >
232 <#attempt>
233 <#-- Image Banner -->
234 <#assign categoryImageDates = restClient.get("/headless-delivery/v1.0/document-folders/${folderId}/documents?search=${categoryName}&sort=dateCreated%3Adesc")>
235 <#if categoryImageDates?? && categoryImageDates?has_content && categoryImageDates.items?? && (categoryImageDates.items!?size > 0)>
236 <#assign categoriesImagesInfo = categoryImageDates.items[0] />
237 <#else>
238 <#assign categoriesImagesInfo = { "contentUrl": "", "id": "0" } />
239 </#if>
240
241 <#return categoriesImagesInfo />
242
243 <#recover>
244 <#assign categoriesImagesInfo = { "contentUrl": "", "id": "0" } >
245 <#return categoriesImagesInfo />
246 </#attempt>
247
248</#function>
249
250
251
252<#if categoryDates.parentTaxonomyVocabulary.name="Nossa Energia">
253
254 <#assign highlightsDates = getCategoriesDates() />
255 <#assign categoryImage = getCategoriesImages() />
256
257</#if>
258
259<#-- Função para obter os dados de um card no Web Content (Journal Article) -->
260<#function getDataForCard entry >
261 <#attempt>
262 <#assign journalArticle = journalArticleLocalService.getLatestArticle(entry.getClassPK()) />
263 <#assign ddmStructure = journalArticle.getDDMStructure() />
264 <#assign fieldList = getFieldListByStructure(ddmStructure) />
265 <#assign xmlArticle = journalArticle.getDocument().getRootElement() />
266
267 <#-- Tentando pegar Imagem -->
268 <#assign mediasGroup = getNodes(getIdFromFieldName(fieldList, "Mídia de destaque da notícia"), xmlArticle) />
269 <#assign media = "" />
270 <#list mediasGroup as mediaGroup >
271 <#assign media = getMediaInfo(fieldList, mediaGroup, "Imagem Destaque", fileEntryService) />
272
273 <#assign fileDataRequest = restClient.get("/headless-delivery/v1.0/documents/${media.fileEntryId}") />
274
275 <#assign urlAdaptativeMediaDesktop = ""/>
276 <#assign urlAdaptativeMediaMobile = ""/>
277 <#if media.url?? && media.url?has_content >
278 <#assign dataAdaptativeMedia = fileDataRequest.adaptedImages />
279 <#list dataAdaptativeMedia as data>
280 <#if data.resolutionName == adaptativeMediaDesktopResolutionName>
281 <#assign urlAdaptativeMediaDesktop = data.contentUrl/>
282 </#if>
283 <#if data.resolutionName == adaptativeMediaMobileResolutionName>
284 <#assign urlAdaptativeMediaMobile = data.contentUrl/>
285 </#if>
286 </#list>
287 </#if>
288
289 <#assign media = {"imageSrc": media.url, "imageAlt": media.alt, "imageFileEntryId": media.fileEntryId, "urlAdaptativeMedia": {"desktop": urlAdaptativeMediaDesktop, "mobile": urlAdaptativeMediaMobile}} />
290
291 <#-- Se não tiver imagem, tentar pegar vídeo -->
292 <#if !media.imageSrc?? || !media.imageSrc?has_content>
293 <#assign youtubeID = getFieldValue(fieldList, mediaGroup, "ID do vídeo do YouTube do vídeo de destaque") />
294 <#if youtubeID?? && youtubeID?has_content>
295 <#assign media = {"videoYotubeID": youtubeID} />
296 <#else>
297 <#-- Tentar pegar vídeo Interno -->
298 <#assign internalVideo = getMediaInfo(fieldList, mediaGroup, "Fazer upload de um vídeo de destaque", fileEntryService) />
299 <#if internalVideo?? && internalVideo?has_content>
300 <#assign media = {"internalVideo": internalVideo} />
301 </#if>
302 </#if>
303 </#if>
304 </#list>
305
306 <#assign headlineTitle = entry.getTitle() />
307
308 <#assign createDate = journalArticle.getCreateDate() />
309
310 <#assign lastPublishDate = extractPublishDate(journalArticle) />
311
312 <#assign summary = getFieldValue(fieldList, xmlArticle, "Resumo da notícia") />
313
314 <#assign title = getFieldValue(fieldList, xmlArticle, "Título de destaque da notícia") />
315
316 <#assign timeRead = getFieldValue(fieldList, xmlArticle, "Tempo de Leitura") />
317
318 <#assign typeOfNews = getFirstCategoryOfVocabulary(entry, typeOfNewsVocabulary) />
319
320 <#assign ourEnergy = getFirstCategoryOfVocabulary(entry, ourEnergyVocabulary) />
321
322 <#if themeDisplay.getPortalURL()?contains("webserver")>
323 <#assign urlNews = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + journalArticle.getUrlTitle()>
324 <#else>
325 <#assign urlNews = themeDisplay.getPortalURL() + "/w/" + journalArticle.getUrlTitle()>
326 </#if>
327
328 <#if !urlNews?has_content >
329 <#assign urlNews = "" >
330 </#if>
331
332 <#assign cardData = {
333 "headlineTitle": headlineTitle,
334 "createDate": createDate,
335 "lastPublishDate": lastPublishDate,
336 "media": media,
337 "title": title,
338 "summary": summary,
339 "timeRead": timeRead,
340 "typeOfNews": typeOfNews,
341 "ourEnergy": ourEnergy,
342 "urlNews": urlNews
343 }/>
344
345 <#return cardData>
346
347 <#recover>
348 <#return {"media": "", "title": "", "timeRead": "", "typeOfNews": "", "ourEnergy": "", "urlNews": ""} />
349 </#attempt>
350
351 <#-- cardData -> image: url, alt
352 title
353 timeRead
354 ourEnergyCategory
355 typeOfNews
356 urlNews
357 -->
358</#function>
359
360<#macro renderCard cardData>
361 <#-- cardData -> image: url, alt
362 title
363 timeRead
364 ourEnergyCategory
365 typeOfNews
366 urlNews
367 -->
368 <div class="card-news-container">
369 <div class="overlay-card-highlight"> </div>
370
371 <a class="card-category-link card-link" href="${cardData.urlNews}" style="display: none;"> ${cardData.title} </a>
372
373 <div class="card-news-thumb">
374 <#assign noImage = "" />
375 <#if cardData.media?? && cardData.media?has_content>
376 <#if cardData.media.imageSrc?? && cardData.media.imageSrc?has_content>
377 <#assign imageSrcDesktop = cardData.media.imageSrc />
378 <#assign imageSrcmobile = cardData.media.imageSrc />
379 <#if cardData.media.urlAdaptativeMedia?? && cardData.media.urlAdaptativeMedia?has_content>
380 <#assign imageSrcDesktop = cardData.media.urlAdaptativeMedia.desktop />
381 <#assign imageSrcMobile = cardData.media.urlAdaptativeMedia.mobile />
382 </#if>
383
384 <picture >
385 <source media="(max-width:767px)" srcset="${imageSrcMobile}">
386 <img class="card-news-image" loading="lazy" src="${imageSrcDesktop}" alt="${cardData.media.imageAlt}"/>
387 </picture>
388
389 <#else>
390 <#if cardData.media.videoYotubeID?? && cardData.media.videoYotubeID?has_content>
391 <picture >
392 <source media="(max-width:767px)" srcset="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/mqdefault.jpg">
393 <img class="card-news-image" loading="lazy" src="https://img.youtube.com/vi/${cardData.media.videoYotubeID}/maxresdefault.jpg" alt="YouTube Thumbnail"/>
394 </picture>
395 <#else>
396 <#if (cardData.media.internalVideo?? && cardData.media.internalVideo.url?has_content) >
397 <video class="card-news-image">
398 <source src="${cardData.media.internalVideo.url}">
399 Your browser does not support the video tag.
400 </video>
401 <#else>
402 <#assign noImage = "no-image" />
403 </#if>
404 </#if>
405 </#if>
406 </#if>
407 </div>
408
409 <div class="card-news-category-container ${noImage}">
410 <div data-category="${categoryName}" class="card-news-category paragraph-micro-regular"> ${cardData.ourEnergy} </div>
411 </div>
412
413 <div class="card-news-text-content ${noImage}">
414 <div class="card-news-title h4"> ${cardData.title} </div>
415
416 <div class="card-news-info">
417 <div class="card-news-type">
418 <#if getPostTypeImageUrl(POST_TYPES_CATEGORIES, (cardData.typeOfNews)!default(""))?? >
419 <#assign postTypeIconUrl = getPostTypeImageUrl(POST_TYPES_CATEGORIES, (cardData.typeOfNews)!default("")) />
420 <img src="${postTypeIconUrl}" alt="post type icon" loading="lazy" />
421 <div class="card-news-type-text paragraph-micro-regular">${cardData.typeOfNews}</div>
422 <#else/>
423 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
424 <path d="M6.25 7.5H13.75M6.25 10H13.75M6.25 12.5H13.75M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75Z" stroke="#959595" stroke-linecap="round" stroke-linejoin="round"/>
425 </svg>
426 <div class="card-news-type-text paragraph-micro-regular">${cardData.typeOfNews}</div>
427 </#if>
428 </div>
429
430 <#if cardData.timeRead?? && cardData.timeRead?has_content>
431 <div class="card-news-time-read">
432 <svg class="card-news-icon-time-read" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
433 <path d="M10.5 5.625C10.5 5.34886 10.2761 5.125 10 5.125C9.72386 5.125 9.5 5.34886 9.5 5.625H10.5ZM10 10H9.5C9.5 10.2761 9.72386 10.5 10 10.5V10ZM14.375 10.5C14.6511 10.5 14.875 10.2761 14.875 10C14.875 9.72386 14.6511 9.5 14.375 9.5V10.5ZM17 10C17 13.866 13.866 17 10 17V18C14.4183 18 18 14.4183 18 10H17ZM10 17C6.13401 17 3 13.866 3 10H2C2 14.4183 5.58172 18 10 18V17ZM3 10C3 6.13401 6.13401 3 10 3V2C5.58172 2 2 5.58172 2 10H3ZM10 3C13.866 3 17 6.13401 17 10H18C18 5.58172 14.4183 2 10 2V3ZM9.5 5.625V10H10.5V5.625H9.5ZM10 10.5H14.375V9.5H10V10.5Z" fill="#959595"/>
434 </svg>
435 <div class="card-news-time-read-text paragraph-micro-regular">${cardData.timeRead} min</div>
436 </div>
437 </#if>
438 </div>
439 </div>
440 </div>
441
442</#macro>
443
444<#macro renderFilters >
445 <div class="order-filter-container">
446
447 <div class="order-container" >
448 <span class="paragraph-sm-regular">
449 <#if locale?lower_case == 'pt_br'>
450 Ordenar por:
451 <#else>
452 Order by:
453 </#if>
454 </span>
455 <select name="order" id="select-order">
456
457 <option class="paragraph-sm-regular" value="">
458 <#if locale?lower_case == 'pt_br'>
459 Padrão
460 <#else>
461 Default
462 </#if>
463 </option>
464 <option class="paragraph-sm-regular" value="createDate-">
465 <#if locale?lower_case == 'pt_br'>
466 Mais recentes
467 <#else>
468 Recents
469 </#if>
470 </option>
471 <option class="paragraph-sm-regular" value="createDate%2B">
472 <#if locale?lower_case == 'pt_br'>
473 Mais antigos
474 <#else>
475 Olders
476 </#if>
477 </option>
478 </select>
479 </div>
480
481 <div class="filter-container">
482 <span class="paragraph-sm-regular">
483 <#if locale?lower_case == 'pt_br'>
484 Filtrar por:
485 <#else>
486 Filter by:
487 </#if>
488 </span>
489
490 <select name="filter" id="select-filter">
491 <option class="paragraph-sm-regular" value="0">
492 <#if locale?lower_case == 'pt_br'>
493 Todos
494 <#else>
495 All
496 </#if>
497 </option>
498 </select>
499 </div>
500
501 </div>
502
503</#macro>
504
505<#if entries?has_content && (categoryDates.name != "" || categoryId?? && categoryId?has_content)>
506
507 <div class="${rootCss}">
508
509 <#if categoryDates.parentTaxonomyVocabulary.name == "Nossa Energia">
510
511 <#-- Names Fields -->
512 <#assign newsTitle = "Título de destaque da notícia" />
513 <#assign readTime = "Tempo de Leitura" />
514 <#assign highlightMedia = "Mídia de destaque da notícia" />
515 <#assign highlightImage = "Imagem Destaque" />
516
517 <#-- Type of News Dates -->
518 <#attempt>
519 <#assign typeOfNewsRestDates = restClient.get("/headless-admin-taxonomy/v1.0/taxonomy-vocabularies/${typeOfNewsVocabulary.getVocabularyId()}/taxonomy-categories?sort=dateCreated")>
520 <#assign typeOfNewsDates = typeOfNewsRestDates.items >
521 <#recover>
522 <#assign typeOfNewsDates = []>
523 </#attempt>
524
525 <div class="category-top-border"></div>
526 <div class="dates-category-container">
527 <div class="breakpoint">
528 <#assign categoryWithImage = "" >
529 <#if categoryImage.contentUrl != "">
530 <#assign categoryWithImage = "with-image" >
531 </#if>
532 <div class="category-top-session col-1-12 md-col-1-8 sm-col-1-4 ${categoryWithImage}">
533 <div class="text-container">
534
535 <div class="results-category-title fragment_85017">
536 <div class="petro-title">
537 <h2 id="title" class="h2" >
538 ${categoryDates.name}
539 </h2>
540 <div class="yellow-bar bar-h2"></div>
541 </div>
542 </div>
543
544 <div class="category-description paragraph-md-regular">
545 ${categoryDates.description}
546 </div>
547
548 </div>
549 <#if categoryImage.contentUrl != "" >
550 <div class="category-banner" >
551 <picture >
552 <source media="(max-width:767px)" srcset="/o/adaptive-media/image/${categoryImage.id}/${adaptativeMediaMobileResolutionName}/image">
553 <img
554 src="/o/adaptive-media/image/${categoryImage.id}/${adaptativeMediaDesktopResolutionName}/image"
555 alt="Image ${categoryDates.name}" loading="lazy">
556 </picture>
557 </div>
558 </#if>
559 </div>
560 </div>
561
562 <#assign highlightUrls = [] />
563 <#assign highlightFileIds = [] />
564
565 <div class="cards-highlights-container col-1-12 md-col-1-8 sm-col-1-4">
566 <#list highlightsDates as cardHighlight>
567
568 <#assign newsTitleDate = "" />
569 <#assign readTimeDate = "" />
570 <#assign highlightImageUrl = "" />
571 <#assign highlightImageFileEntryId = "" />
572 <#assign highlightImageDescription = "" />
573 <#assign highlightTypeNews = "" />
574
575 <#list cardHighlight.contentFields as contentField>
576
577 <#if contentField.label == newsTitle>
578 <#assign newsTitleDate = contentField.contentFieldValue.data />
579 </#if>
580 <#if contentField.label == readTime>
581 <#assign readTimeDate = contentField.contentFieldValue.data />
582 </#if>
583 <#if contentField.label == highlightMedia>
584 <#list contentField.nestedContentFields as nestedContent>
585 <#if nestedContent.label == highlightImage && nestedContent.contentFieldValue.image?? >
586 <#assign highlightImageUrl = nestedContent.contentFieldValue.image.contentUrl />
587 <#assign highlightImageFileEntryId = nestedContent.contentFieldValue.image.id />
588 <#assign highlightImageDescription = nestedContent.contentFieldValue.image.description />
589 </#if>
590 </#list>
591 </#if>
592
593 </#list>
594
595 <#list cardHighlight.taxonomyCategoryBriefs as categories >
596
597 <#list typeOfNewsDates as types >
598 <#if categories.taxonomyCategoryId?number == types.id?number >
599 <#assign highlightTypeNews = categories.taxonomyCategoryName />
600 <#break>
601 </#if>
602 </#list>
603 </#list>
604
605 <div class="card-category-highlight-container">
606 <#assign newsJournalArticleFriendlyUrl = "/">
607 <#if themeDisplay.getPortalURL()?contains("webserver")>
608 <#assign newsJournalArticleFriendlyUrl = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + cardHighlight.friendlyUrlPath>
609 <#else>
610 <#assign newsJournalArticleFriendlyUrl = themeDisplay.getPortalURL() + "/w/" + cardHighlight.friendlyUrlPath>
611 </#if>
612 <a class="card-category-link cards-category-highlights-link" href="${newsJournalArticleFriendlyUrl}">
613 <span style="display: none;"> ${newsTitleDate} </span>
614 </a>
615
616 <#if highlightImageUrl?has_content && highlightImageUrl != "" >
617 <picture >
618 <source media="(max-width:767px)" srcset="/o/adaptive-media/image/${highlightImageFileEntryId}/${adaptativeMediaMobileResolutionName}/image">
619 <img
620 class="card-news-image" src="/o/adaptive-media/image/${highlightImageFileEntryId}/${adaptativeMediaDesktopResolutionName}/image"
621 alt="${highlightImageDescription}" loading="lazy"
622 >
623 </picture>
624 <#else>
625 <div class="no-image"></div>
626 </#if>
627
628 <div class="card-news-category-container ">
629 <div data-category="${categoryDates.name}" class="card-news-category paragraph-micro-regular">
630 ${categoryDates.name}
631 </div>
632 </div>
633 <div class="card-news-text-content ">
634 <div class="card-news-title h4">
635 ${newsTitleDate}
636 </div>
637 <div class="card-news-info">
638 <div class="card-news-type">
639 <#if getPostTypeImageUrl(POST_TYPES_CATEGORIES, highlightTypeNews)?? >
640 <#assign postTypeIconUrl = getPostTypeImageUrl(POST_TYPES_CATEGORIES, highlightTypeNews) />
641 <img src="${postTypeIconUrl}" alt="post type icon" loading="lazy" />
642 <div class="card-news-type-text paragraph-micro-regular">${highlightTypeNews}</div>
643 <#else/>
644 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
645 <path d="M6.25 7.5H13.75M6.25 10H13.75M6.25 12.5H13.75M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75Z" stroke="#959595" stroke-linecap="round" stroke-linejoin="round"/>
646 </svg>
647 <div class="card-news-type-text paragraph-micro-regular">${highlightTypeNews}</div>
648 </#if>
649 </div>
650 <div class="card-news-time-read">
651 <svg class="card-news-icon-time-read" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
652 <path d="M10.5 5.625C10.5 5.34886 10.2761 5.125 10 5.125C9.72386 5.125 9.5 5.34886 9.5 5.625H10.5ZM10 10H9.5C9.5 10.2761 9.72386 10.5 10 10.5V10ZM14.375 10.5C14.6511 10.5 14.875 10.2761 14.875 10C14.875 9.72386 14.6511 9.5 14.375 9.5V10.5ZM17 10C17 13.866 13.866 17 10 17V18C14.4183 18 18 14.4183 18 10H17ZM10 17C6.13401 17 3 13.866 3 10H2C2 14.4183 5.58172 18 10 18V17ZM3 10C3 6.13401 6.13401 3 10 3V2C5.58172 2 2 5.58172 2 10H3ZM10 3C13.866 3 17 6.13401 17 10H18C18 5.58172 14.4183 2 10 2V3ZM9.5 5.625V10H10.5V5.625H9.5ZM10 10.5H14.375V9.5H10V10.5Z"
653 fill="#959595">
654 </path>
655 </svg>
656 <div class="card-news-time-read-text paragraph-micro-regular">
657 ${readTimeDate} min
658 </div>
659 </div>
660 </div>
661 </div>
662 </div>
663 </#list>
664
665
666 </div>
667
668
669 </div>
670 </#if>
671
672
673 <#if categoryDates.parentTaxonomyVocabulary.name != "Nossa Energia">
674
675 <div class="results-category-title tags-title ">
676 <div class="breakpoint">
677 <div class="tags-title-container col-1-12 md-col-1-8 sm-col-1-4">
678 <div class="title-section fragment_85017">
679 <div class="petro-title">
680 <h2 id="title" class="h2" >
681 ${categoryDates.name}
682 </h2>
683 <div class="yellow-bar bar-h2"></div>
684 </div>
685 </div>
686
687 <div class="filters-section">
688 <span class="quantify-results-text paragraph-sm-regular">
689 <#if searchContainer.getTotal() != 0>
690
691 <#-- <#if locale?lower_case == "pt_br"> -->
692 Foram encontrados<span class="quantify-results-text-number paragraph-sm-bold"> ${searchContainer.getTotal()}</span> conteúdos
693
694 <#-- <#else>
695 Found<span class="quantify-results-text-number paragraph-sm-bold"> ${searchContainer.getTotal()}</span> contents
696 </#if> -->
697 </#if>
698 </span>
699
700 <@renderFilters />
701 </div>
702 </div>
703 </div>
704 </div>
705
706 </#if>
707
708 <div class="card-news-list-breakpoint breakpoint">
709
710 <#if categoryDates.parentTaxonomyVocabulary.name="Nossa Energia">
711 <div class="title-filter-container col-1-12 md-col-1-8 sm-col-1-4">
712
713 <div class="results-category-title fragment_85017">
714 <div class="petro-title">
715 <h3 id="title" class="h3" >
716 <#if locale?lower_case == 'pt_br'>
717 Saiba mais
718 <#else>
719 Know more:
720 </#if>
721 </h3>
722 <div class="yellow-bar bar-h3"></div>
723
724 </div>
725 </div>
726
727 <@renderFilters />
728
729 </div>
730
731 </#if>
732
733 <div class="card-news-list col-1-12 md-col-1-8 sm-col-1-4">
734
735 <#if searchContainer.getTotal() == 0>
736 <span class="quantify-results-text paragraph-sm-regular">
737 <#if locale?lower_case == "pt_br">
738 Poxa! Sua busca não encontrou nenhum resultado
739 <#else>
740 Wow! Your search did not return any results
741 </#if>
742 </span>
743 </#if>
744
745 <#-- Renderiza os card e insere dados estruturados "Carrossel" - ItemList -->
746 <#assign itemList = [] />
747 <#-- image: url, alt
748 title
749 timeRead
750 ourEnergyCategory
751 typeOfNews
752 urlNews -->
753
754 <#-- Lista de ids dos cards de destaque -->
755 <#assign highlightIds = [] />
756 <#list highlightsDates as hDate>
757 <#assign highlightIds = highlightIds + [hDate.id?string] />
758 </#list>
759 <#if entries?has_content >
760 <#list entries as entry>
761 <#assign cardData = getDataForCard(entry) />
762 <#-- Não renderiza novamente os cards que já estão no destaques do topo -->
763 <#if !highlightIds?seq_contains(entry.getClassPK()?string)>
764 <@renderCard cardData/>
765 </#if>
766
767 <#assign structuredDataImgUrl = ""/>
768 <#assign datePublished = cardData.createDate?string('yyyy-MM-ddHH:mm:ss-03:00')/>
769 <#assign datePublishedISOFormat = datePublished?substring(0, 10) + "T" + datePublished?substring(10)/>
770 <#assign dateModified = cardData.lastPublishDate?string('yyyy-MM-ddHH:mm:ss-03:00')/>
771 <#assign dateModifiedISOFormat = dateModified?substring(0, 10) + "T" + dateModified?substring(10)/>
772
773 <#if cardData.media?has_content && cardData.media.imageSrc?has_content>
774 <#assign structuredDataImgUrl = "${themeDisplay.getPortalURL()}" + "${cardData.media.imageSrc}"/>
775 </#if>
776
777 <#assign itemList = itemList + [{
778 "@type": "ListItem",
779 "position": entry_index + 1,
780 "item": {
781 "@type": "Article",
782 "headline": "${normalizeRichText(cardData.headlineTitle)}",
783 "alternativeHeadline": "${normalizeRichText(cardData.title)}",
784 "image": "${structuredDataImgUrl}",
785 "author": {
786 "@type": "Organization",
787 "name": "Petrobras",
788 "url": "${themeDisplay.getPortalURL()}/autor"
789 },
790 "publisher": {
791 "@type": "Organization",
792 "name": "Petrobras",
793 "logo": {
794 "@type": "ImageObject",
795 "url": "https://petrobras.com.br/documents/d/f3a44542-113e-11ee-be56-0242ac120002/logo-petrobras-png"
796 }
797 },
798 "datePublished": "${datePublishedISOFormat}",
799 "dateModified": "${dateModifiedISOFormat}",
800 "mainEntityOfPage": "${cardData.urlNews}",
801 "description": "${normalizeRichText(cardData.summary)}"
802 }
803 }] />
804 </#list>
805
806 <#-- add to head -->
807 <@liferay_util["html-top"]>
808 <script type="application/ld+json">
809 {
810 "@context": "https://schema.org",
811 "@type": "ItemList",
812 "name": "${categoryDates.name}",
813 "numberOfItems": ${entries?size!0},
814 "itemListElement": [
815 <#list itemList as item>
816 ${jsonFactoryUtil.looseSerializeDeep(item)}<#sep>,</#sep>
817 </#list>
818 ]
819 }
820 </script>
821 </@>
822 </#if>
823 </div>
824 </div>
825 </div>
826</#if>
827
828<#if ourEnergyStyles?? >
829 <#list ourEnergyStyles as ourEnergyStyle>
830 <style>
831 .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] {
832 <#if ourEnergyStyle.backgroundColor?? && ourEnergyStyle.backgroundColor?has_content>
833 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 0%, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 100%), #${ourEnergyStyle.backgroundColor} !important;
834 </#if>
835 box-shadow: 0px 2px 6px 0px #${ourEnergyStyle.shadowColor} !important;
836 color: #${ourEnergyStyle.textColor} !important;
837 }
838
839 body.high-contrast-active .${rootCss} [data-category="${ourEnergyStyle.titleLocale}"] {
840 <#if ourEnergyStyle.backgroundColor?? && ourEnergyStyle.backgroundColor?has_content>
841 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(55, 55, 55, 1)) 0%, var(--background-surface-opacity-light-level-07, rgba(55, 55, 55, 1)) 100%), #${ourEnergyStyle.backgroundColor} !important;
842 </#if>
843 color: #${ourEnergyStyle.textColorHighContrast} !important;
844 }
845
846 </style>
847 </#list>
848</#if>
849
850<#-- #########################################################################
851 JSON-LD: ImageObject para todas as imagens renderizadas neste template
852 ######################################################################### -->
853
854<#-- Helper: monta o objeto com url/width/height/encodingFormat a partir do fileEntryId -->
855<#function getImageSchemaFromFileEntryId fileEntryId name description>
856 <#local imgName = normalizeRichText(name!"")>
857 <#local imgDesc = normalizeRichText(description!"")>
858
859 <#attempt>
860 <#local doc = restClient.get("/headless-delivery/v1.0/documents/${fileEntryId}") />
861 <#local mimeType = (doc.mimeType!"")?has_content?then(doc.mimeType, "image/jpeg")>
862
863 <#-- tenta pegar a AM desktop (ex.: Preview-1000x0) com width/height -->
864 <#local amUrl = ""/>
865 <#local amWidth = ""/>
866 <#local amHeight = ""/>
867 <#if doc.adaptedImages?? && doc.adaptedImages?has_content>
868 <#list doc.adaptedImages as ai>
869 <#if ai.resolutionName == adaptativeMediaDesktopResolutionName>
870 <#local amUrl = ai.contentUrl!"">
871 <#local amWidth = (ai.width!"")?string>
872 <#local amHeight = (ai.height!"")?string>
873 </#if>
874 </#list>
875 <#-- fallback: pega a primeira AM caso não ache a desktop -->
876 <#if !amUrl?has_content && doc.adaptedImages?size gt 0>
877 <#local first = doc.adaptedImages[0]>
878 <#local amUrl = first.contentUrl!"">
879 <#local amWidth = (first.width!"")?string>
880 <#local amHeight = (first.height!"")?string>
881 </#if>
882 </#if>
883
884 <#-- fallback final: usa o contentUrl "original" -->
885 <#if !amUrl?has_content && doc.contentUrl??>
886 <#local amUrl = doc.contentUrl!"">
887 </#if>
888
889 <#return {
890 "name": imgName,
891 "description": imgDesc,
892 "url": amUrl,
893 "contentUrl": amUrl,
894 "width": amWidth,
895 "height": amHeight,
896 "encodingFormat": mimeType
897 } />
898
899 <#recover>
900 <#return {} />
901 </#attempt>
902</#function>
903
904<#-- Coleta todas as imagens: banner da categoria, destaques e cards da lista -->
905<#assign imageSchemaList = [] />
906<#assign seenIds = {} />
907<#assign seenUrls = {} />
908
909<#-- Função que tenta inserir e SEMPRE retorna imageSchemaList/seenIds/seenUrls atualizados -->
910<#function pushUnique imgObj fileEntryId imageSchemaList seenIds seenUrls>
911 <#-- retorno imediato se não tem conteúdo -->
912 <#if !imgObj?has_content || !imgObj.contentUrl?has_content>
913 <#return {"imageSchemaList": imageSchemaList, "seenIds": seenIds, "seenUrls": seenUrls} />
914 </#if>
915
916 <#local idKey = (fileEntryId!"")?string />
917 <#local urlKey = (imgObj.contentUrl!"")?string />
918 <#local shouldAdd = false />
919
920 <#if idKey?has_content>
921 <#if !(seenIds[idKey]??)>
922 <#local shouldAdd = true />
923 </#if>
924 <#else>
925 <#if !(seenUrls[urlKey]??)>
926 <#local shouldAdd = true />
927 </#if>
928 </#if>
929
930 <#if shouldAdd>
931 <#local imageSchemaList = imageSchemaList + [imgObj] />
932 <#if idKey?has_content>
933 <#local seenIds = seenIds + { (idKey): true } />
934 </#if>
935 <#local seenUrls = seenUrls + { (urlKey): true } />
936 </#if>
937
938 <#return {"imageSchemaList": imageSchemaList, "seenIds": seenIds, "seenUrls": seenUrls} />
939</#function>
940
941<#-- 1) Banner -->
942<#if categoryImage?? && categoryImage.id?has_content && categoryImage.id?string != "0">
943 <#assign bannerSchema = getImageSchemaFromFileEntryId(
944 categoryImage.id?string, categoryDates.name!"", categoryDates.description!""
945 ) />
946 <#assign res = pushUnique(bannerSchema, categoryImage.id?string, imageSchemaList, seenIds, seenUrls) />
947 <#assign imageSchemaList = res.imageSchemaList />
948 <#assign seenIds = res.seenIds />
949 <#assign seenUrls = res.seenUrls />
950</#if>
951
952<#-- 2) Destaques -->
953<#if highlightsDates?? && highlightsDates?has_content>
954 <#list highlightsDates as cardHighlight>
955 <#assign hlFileEntryId = "" />
956 <#assign hlDesc = "" />
957 <#assign hlTitle = "" />
958 <#list cardHighlight.contentFields as cf>
959 <#if cf.label == "Título de destaque da notícia" && cf.contentFieldValue?has_content>
960 <#assign hlTitle = cf.contentFieldValue.data!"">
961 </#if>
962 <#if cf.label == "Mídia de destaque da notícia" && cf.nestedContentFields?has_content>
963 <#list cf.nestedContentFields as nested>
964 <#if nested.label == "Imagem Destaque" && nested.contentFieldValue.image??>
965 <#assign hlFileEntryId = nested.contentFieldValue.image.id!"" />
966 <#assign hlDesc = nested.contentFieldValue.image.description!"" />
967 </#if>
968 </#list>
969 </#if>
970 </#list>
971 <#if hlFileEntryId?has_content>
972 <#assign hlSchema = getImageSchemaFromFileEntryId(hlFileEntryId, hlTitle, hlDesc) />
973 <#assign res = pushUnique(hlSchema, hlFileEntryId, imageSchemaList, seenIds, seenUrls) />
974 <#assign imageSchemaList = res.imageSchemaList />
975 <#assign seenIds = res.seenIds />
976 <#assign seenUrls = res.seenUrls />
977 </#if>
978 </#list>
979</#if>
980
981<#-- 3) Lista de cards -->
982<#if entries?has_content>
983 <#list entries as e>
984 <#assign cd = getDataForCard(e) />
985 <#if cd?has_content && cd.media?has_content && cd.media.imageFileEntryId?? && cd.media.imageFileEntryId?has_content>
986 <#assign feId = cd.media.imageFileEntryId?string />
987 <#assign cardSchema = getImageSchemaFromFileEntryId(feId, cd.title!"", cd.media.imageAlt!"") />
988 <#assign res = pushUnique(cardSchema, feId, imageSchemaList, seenIds, seenUrls) />
989 <#assign imageSchemaList = res.imageSchemaList />
990 <#assign seenIds = res.seenIds />
991 <#assign seenUrls = res.seenUrls />
992 </#if>
993 </#list>
994</#if>
995
996<#-- Injeta um <script type="application/ld+json"> por imagem -->
997<@liferay_util["html-top"]>
998 <#if imageSchemaList?has_content>
999 <script type="application/ld+json">
1000 [
1001 <#list imageSchemaList as img>
1002 {
1003 "@context": "https://schema.org",
1004 "@type": "ImageObject",
1005 "name": "${img.name!"\"\""}" ,
1006 "description": "${img.description!"\"\""}",
1007 "url": "${themeDisplay.getPortalURL()}${img.url!img.contentUrl}",
1008 "contentUrl": "${themeDisplay.getPortalURL()}${img.contentUrl}",
1009 <#if img.width?has_content>"width": ${img.width},</#if>
1010 <#if img.height?has_content>"height": ${img.height},</#if>
1011 "encodingFormat": "${img.encodingFormat!"image/jpeg"}",
1012 "author": { "@type": "Organization", "name": "Petrobras" }
1013 }<#if img_has_next>,</#if>
1014 </#list>
1015 ]
1016 </script>
1017 </#if>
1018</@>
1019
1020<style>
1021
1022 /* BANNER CATEGORIES AND HIGHLIGHTS SESSION */
1023 .category-top-border {
1024 width: 100%;
1025 height: 16px;
1026
1027 /* Gradient Verde Claro */
1028 background: linear-gradient(270deg, #C4D600 0%, #F1C115 68%);
1029
1030 }
1031
1032 body.high-contrast-active .category-top-border {
1033 background: linear-gradient(270deg, var(--color-neutral-600) 0%, var(--color-neutral-800) 68%);
1034 }
1035
1036 .${rootCss} .dates-category-container .category-top-session {
1037 display: flex;
1038 width: 100%;
1039 justify-content: space-between;
1040 padding: var(--space-xl) 0;
1041 }
1042
1043 .${rootCss} .dates-category-container .category-top-session .text-container {
1044 width: 100%;
1045 }
1046
1047
1048 .${rootCss} .dates-category-container .category-top-session .text-container .petro-title {
1049 flex-shrink: 0;
1050 }
1051
1052 .${rootCss} .petro-title {
1053 font-family: var(--font-family-base);
1054 font-style: normal;
1055 font-weight: 700;
1056 color: #373737;
1057 font-size: 22px;
1058 }
1059
1060 .${rootCss} .petro-title h3 {
1061 font-size: var(--font-size-lg);
1062 }
1063
1064 .${rootCss} .text-container {
1065 display: flex;
1066 justify-content: space-between;
1067 align-items: center;
1068 gap: var(--space-lg);
1069 }
1070
1071 .${rootCss} .dates-category-container .category-top-session.with-image .text-container {
1072 flex-direction: column;
1073 align-items: flex-start;
1074 max-width: 100%;
1075 }
1076
1077 body.high-contrast-active .${rootCss} .text-container {
1078 color: var(--text-primary-default, #FFF) !important;
1079 }
1080
1081 .${rootCss} .text-container .category-title {
1082 width: 480px;
1083 flex-shrink: 0;
1084 }
1085
1086 .${rootCss} .text-container .category-description {
1087 padding-top: var(--space-xs);
1088 max-width: 70%;
1089 }
1090
1091 .${rootCss} .category-banner {
1092 width: 455px;
1093 height: 256px;
1094 flex-shrink: 0;
1095 }
1096
1097 .${rootCss} .category-banner img {
1098 width: 100%;
1099 height: 100%;
1100 object-fit: cover;
1101 }
1102
1103
1104 .${rootCss} .cards-highlights-container {
1105 display: flex;
1106 justify-content: space-between;
1107 height: 420px;
1108 width: 100%;
1109 max-width: 1440px;
1110 margin: var(--space-lg) auto var(--space-xl);
1111 gap: var(--space-md);
1112 overflow-x: auto;
1113
1114 scrollbar-color: #008542 #E7E9EF;
1115 scrollbar-width: auto;
1116 }
1117
1118 body.high-contrast-active .${rootCss} .cards-highlights-container {
1119 scrollbar-color: var(--color-neutral-600) var(--color-neutral-800);
1120 }
1121
1122 .${rootCss} .cards-highlights-container::-webkit-scrollbar {
1123 background: #fff;
1124 width: 15px;
1125 height: 15px;
1126 }
1127
1128 .${rootCss} .card-category-highlight-container {
1129 width: 410px;
1130 height: 370px;
1131 display: flex;
1132 flex-direction: column;
1133 flex-shrink: 0;
1134 border-radius: var(--border-radius-lg);
1135 border: var(--border-width-hairline) solid var(--border-card-default, #EEE);
1136 background: var(--background-surface-level-01, #FFF);
1137 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12);
1138 overflow: hidden;
1139 scroll-snap-align: start;
1140 cursor: pointer;
1141 transition: border 300ms ease-in-out;
1142 text-decoration: none;
1143 position: relative;
1144 }
1145
1146
1147 .${rootCss} .card-category-highlight-container:hover {
1148 border: var(--border-width-hairline) solid rgb(0, 133, 66);
1149 }
1150
1151
1152 body.high-contrast-active .${rootCss} .card-category-highlight-container {
1153 border: var(--border-width-hairline) solid var(--border-card-default, #525252);
1154 background: var(--background-surface-level-01, #010101);
1155 }
1156
1157
1158 body.high-contrast-active .${rootCss} .card-category-highlight-container:hover {
1159 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8);
1160 }
1161
1162
1163 body.high-contrast-active .${rootCss} .card-category-highlight-container * {
1164 color: var(--text-primary-default, #FFF) !important;
1165 }
1166
1167 .${rootCss} .cards-highlights-container .card-category-highlight-container .card-category-link {
1168 position: absolute;
1169 top: 0;
1170 width: 100%;
1171 height: 100%;
1172 z-index: 1;
1173 }
1174
1175 .${rootCss} .card-category-highlight-container .card-news-image {
1176 position: relative;
1177 width: 100%;
1178 }
1179
1180 .${rootCss} .card-category-highlight-container .no-image {
1181 height: 50px;
1182 }
1183
1184 .${rootCss} .card-category-highlight-container .card-news-image {
1185 width: 100%;
1186 height: 168px;
1187 object-fit: cover;
1188 }
1189
1190 .${rootCss} .card-category-highlight-container .card-news-category-container {
1191 position: relative;
1192 }
1193
1194 .${rootCss} .card-category-highlight-container .card-news-category-container .card-news-category {
1195 display: flex;
1196 justify-content: center;
1197 align-items: center;
1198 padding: var(--space-micro) var(--space-xs);
1199 position: absolute;
1200 z-index: 2;
1201 left: var(--space-md);
1202 top: -13px;
1203 border-radius: var(--border-radius-pill);
1204
1205 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10);
1206 line-height: var(--line-height-lg, 144%);
1207 color: var(--default-sup-green-water, #006B65);
1208 white-space: nowrap;
1209 }
1210
1211 .${rootCss} .card-category-highlight-container .card-news-text-content {
1212 display: flex;
1213 padding: var(--space-lg, 32px) var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px);
1214 flex-direction: column;
1215 justify-content: space-between;
1216 align-items: flex-start;
1217 flex: 1 0 0;
1218 align-self: stretch;
1219 }
1220
1221 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-title {
1222 display: -webkit-box;
1223 -webkit-box-orient: vertical;
1224 -webkit-line-clamp: 4;
1225 align-self: stretch;
1226 overflow: hidden;
1227 color: var(--text-primary-default, #373737);
1228 text-overflow: ellipsis;
1229 margin: 0;
1230 }
1231
1232 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info {
1233 display: flex;
1234 align-items: center;
1235 align-content: center;
1236 gap: var(--space-sm, 16px);
1237 align-self: stretch;
1238 flex-wrap: wrap;
1239 }
1240
1241 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type,
1242 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read {
1243 display: flex;
1244 align-items: center;
1245 gap: var(--space-xxs, 8px);
1246 }
1247
1248 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text,
1249 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text {
1250 color: var(--text-tertiary-default, #959595);
1251 line-height: var(--line-height-lg, 144%);
1252 }
1253
1254 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type,
1255 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read {
1256 display: flex;
1257 align-items: center;
1258 gap: var(--space-xxs, 8px);
1259 }
1260
1261 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text,
1262 .${rootCss} .card-category-highlight-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text {
1263 color: var(--text-tertiary-default, #959595);
1264 line-height: var(--line-height-lg, 144%);
1265 }
1266
1267 /* END BANNER CATEGORIES AND HIGHLIGHTS SESSION */
1268
1269
1270
1271 .${rootCss} .results-category-title.tags-title {
1272 background: var(--color-neutral-300);
1273 padding: var(--space-xl) 0;
1274
1275 }
1276
1277
1278 .${rootCss} .results-category-title.tags-title .filters-section {
1279 display: flex;
1280 justify-content: space-between;
1281 width: 100%;
1282 }
1283
1284 .${rootCss} .results-category-title.tags-title .filters-section .quantify-results-text {
1285 padding-top: var(--space-xs);
1286 padding-right: var(--space-xs);
1287 }
1288
1289
1290
1291 .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h2,
1292 .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h3 {
1293 background-color: var(--text-secondary-accent, #FDC82F);
1294 }
1295
1296 .${rootCss} .title-filter-container {
1297 display: flex;
1298 justify-content: space-between;
1299 height: 68px;
1300 }
1301
1302 /* Order and Filter */
1303 .${rootCss} .order-filter-container {
1304 display: flex;
1305 }
1306
1307 .${rootCss} .filter-container,
1308 .${rootCss} .order-container {
1309 display: none;
1310 flex-shrink: 0;
1311 align-items: center;
1312 height: 45px;
1313 gap: var(--spacing-space-xxs, 8px);
1314 margin-right: var(--space-lg);
1315 }
1316
1317 .${rootCss} .filter-container.active,
1318 .${rootCss} .order-container.active {
1319 display: flex;
1320 }
1321
1322 body.high-contrast-active .${rootCss} .filter-container,
1323 body.high-contrast-active .${rootCss} .order-container {
1324 color: var(--color-neutral-200);
1325 }
1326
1327 .${rootCss} .filter-container #select-filter,
1328 .${rootCss} .order-container #select-order {
1329 display: flex;
1330 padding: var(--spacing-space-xxs, 8px) var(--spacing-space-xl, 40px) var(--spacing-space-xxs, 8px) var(--spacing-space-sm, 16px);
1331 align-items: center;
1332 gap: var(--spacing-space-md, 24px);
1333 align-self: stretch;
1334 border-radius: var(--border-radius-lg, 16px);
1335 border: 1px solid var(--border-color-light);
1336 appearance: none;
1337 -webkit-appearance: none;
1338 -moz-appearance: none;
1339 background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMTMgNkw4IDExTDMgNiIgc3Ryb2tlPSIjNTI1MjUyIiBzdHJva2Utd2lkdGg9IjAuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+);
1340 background-repeat: no-repeat;
1341 background-position: 95%;
1342 transition: transform 0.3s ease-in-out;
1343 color: #373737;
1344 font-weight: 400;
1345 font-size: 14px;
1346 }
1347
1348 .${rootCss} .paragraph-sm-regular {
1349 font-size: var(--font-size-xxxs);
1350 line-height: var(--line-height-sm);
1351 font-weight: var(--font-weight-regular);
1352 color: #525252;
1353 }
1354
1355 /* Quando o select está aberto */
1356 .order-container.open #select-order {
1357 background-image: url("data:image/svg+xml;base64,PHN2ZyB3d2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMTMgMTBMOCA1TDMgMTAiIHN0cm9rZT0iIzUyNTI1MiIgc3Ryb2tlLXdpZHRoPSIwLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg==");
1358 }
1359
1360 .order-container.open #select-filter {
1361 background-image: url("data:image/svg+xml;base64,PHN2ZyB3d2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMTMgMTBMOCA1TDMgMTAiIHN0cm9rZT0iIzUyNTI1MiIgc3Ryb2tlLXdpZHRoPSIwLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg==");
1362 }
1363
1364
1365 body.high-contrast-active .${rootCss} .filter-container #select-filter option,
1366 body.high-contrast-active .${rootCss} .order-container #select-order option {
1367 background-color: var(--color-neutral-200);
1368 }
1369
1370 /* renderCard */
1371 .${rootCss} .card-news-list {
1372 display: none;
1373 flex-wrap: wrap;
1374 gap: var(--space-lg);
1375 width: 100%;
1376 justify-content: flex-start;
1377 padding-top: var(--space-lg)
1378 }
1379
1380 .${rootCss} .card-news-list.active {
1381 display: flex;
1382 }
1383
1384 .${rootCss} .card-news-container {
1385 width: 300px;
1386 height: 370px;
1387 display: flex;
1388 flex-direction: column;
1389 flex-shrink: 0;
1390 align-items: flex-start;
1391 border-radius: var(--border-radius-lg);
1392 border: var(--border-width-hairline) solid var(--border-card-default, #EEE);
1393 background: var(--background-surface-level-01, #FFF);
1394 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12);
1395 overflow: hidden;
1396 scroll-snap-align: start;
1397 cursor: pointer;
1398 transition: border 300ms ease-in-out;
1399 text-decoration: none;
1400 position: relative;
1401 }
1402
1403 body.high-contrast-active .${rootCss} .card-news-container {
1404 border: var(--border-width-hairline) solid var(--border-card-default, #525252);
1405 background: var(--background-surface-level-01, #010101);
1406 }
1407
1408 .${rootCss} .card-news-container:hover {
1409 border: var(--border-width-hairline) solid rgb(0, 133, 66);
1410 }
1411
1412 body.high-contrast-active .${rootCss} .card-news-container:hover {
1413 border: var(--border-width-hairline) solid var(--border-card-default, #E4F7E8);
1414 }
1415
1416 .${rootCss} .card-news-container .card-category-link {
1417 position: absolute;
1418 top: 0;
1419 width: 100%;
1420 height: 100%;
1421 z-index: 3;
1422 }
1423
1424 .${rootCss} .card-news-container .card-news-thumb {
1425 position: relative;
1426 width: 100%;
1427 pointer-events: none;
1428 }
1429
1430 .${rootCss} .card-news-container .card-news-image {
1431 width: 100%;
1432 height: 168px;
1433 object-fit: cover;
1434
1435 pointer-events: none;
1436 }
1437
1438 .${rootCss} .card-news-container .card-news-category-container {
1439 position: relative;
1440 }
1441
1442 .${rootCss} .card-category-highlight-container .card-news-category-container .card-news-category,
1443 .${rootCss} .card-news-container .card-news-category-container .card-news-category {
1444 display: flex;
1445 justify-content: center;
1446 align-items: center;
1447 padding: var(--space-micro) var(--space-xs);
1448 position: absolute;
1449 z-index: 2;
1450 left: var(--space-md);
1451 top: -13px;
1452 border-radius: var(--border-radius-pill);
1453 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 0%, var(--background-surface-opacity-light-level-07, rgba(255, 255, 255, 0.96)) 100%), var(--default-sup-green-water, #006B65);
1454 box-shadow: 0px 2px 6px 0px rgba(0, 178, 169, 0.10);
1455 line-height: var(--line-height-lg, 144%);
1456 color: var(--default-sup-green-water, #006B65);
1457 white-space: nowrap;
1458
1459 pointer-events: none;
1460 }
1461
1462 body.high-contrast-active .${rootCss} .card-news-container .card-news-category-container .card-news-category {
1463 background: linear-gradient(0deg, var(--background-surface-opacity-light-level-07, #373737) 0%, var(--background-surface-opacity-light-level-07, #373737) 100%), var(--default-sup-green-water, #99E0DD);
1464 color: var(--default-sup-green-water, #99E0DD);
1465 }
1466
1467 .${rootCss} .card-news-container .card-news-category-container.no-image .card-news-category {
1468 position: relative;
1469 top: 0;
1470 left: 0;
1471 margin-left: var(--space-md);
1472 margin-top: var(--space-md);
1473 }
1474
1475 .${rootCss} .card-news-container .card-news-text-content {
1476 display: flex;
1477 padding: var(--space-lg, 32px) var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px);
1478 flex-direction: column;
1479 justify-content: space-between;
1480 align-items: flex-start;
1481 flex: 1 0 0;
1482 align-self: stretch;
1483 z-index: 1;
1484
1485 pointer-events: none;
1486 }
1487
1488 .${rootCss} .card-news-container .card-news-text-content.no-image {
1489 padding-top: var(--space-sm);
1490 }
1491
1492 .${rootCss} .card-news-container .card-news-text-content .card-news-title {
1493 display: -webkit-box;
1494 -webkit-box-orient: vertical;
1495 -webkit-line-clamp: 4;
1496 align-self: stretch;
1497 overflow: hidden;
1498 color: var(--text-primary-default, #373737);
1499 text-overflow: ellipsis;
1500 margin: 0;
1501 }
1502
1503 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-title {
1504 color: var(--text-primary-default, #FFF);
1505 }
1506
1507 .${rootCss} .card-news-container .card-news-text-content .card-news-info {
1508 display: flex;
1509 align-items: center;
1510 align-content: center;
1511 gap: var(--space-sm, 16px);
1512 align-self: stretch;
1513 flex-wrap: wrap;
1514 }
1515
1516 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type,
1517 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read {
1518 display: flex;
1519 align-items: center;
1520 gap: var(--space-xxs, 8px);
1521 }
1522
1523
1524 body.high-contrast-active .${rootCss} .results-category-title .petro-title {
1525 color: var(--text-primary-default, #FFF) !important;
1526 }
1527
1528 body.high-contrast-active .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h2,
1529 body.high-contrast-active .${rootCss} .fragment_85017 .petro-title .yellow-bar.bar-h3 {
1530 background-color: var(--text-secondary-accent, #FFEEB3);
1531 }
1532
1533 .${rootCss} .card-news-list .card-news-container .overlay-card-highlight {
1534 display: none;
1535 }
1536
1537 .${rootCss} .card-news-list .card-news-container .graphism-card-highlight {
1538 display: none;
1539 }
1540
1541
1542 /* Card Highlights */
1543 .${rootCss} .card-news-list .card-news-container.card-highlights {
1544 width: 632px;
1545 height: 360px;
1546 justify-content: flex-end;
1547 }
1548
1549 .${rootCss} .card-news-list .card-news-container.card-highlights .overlay-card-highlight {
1550 display: block;
1551 position: absolute;
1552 top: 0;
1553 left: 0;
1554 width: 100%;
1555 height: 100%;
1556 background: linear-gradient(190deg, rgba(13, 19, 16, 0.00) 27.69%, rgba(13, 19, 16, 0.94) 63.29%);
1557 z-index: 1;
1558 opacity: 0.8;
1559
1560 pointer-events: none;
1561 }
1562
1563 .${rootCss} .card-news-list .card-news-container.card-highlights .graphism-card-highlight {
1564 display: block;
1565 position: absolute;
1566 bottom: 0;
1567 left: 0;
1568 z-index: 1;
1569
1570 pointer-events: none;
1571 }
1572
1573 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-title {
1574 color: var(--text-primary-default, #FFF);
1575 }
1576
1577 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-image {
1578 width: 632px;
1579 height: 360px;
1580 position: absolute;
1581 top: 0;
1582 left: 0;
1583
1584 pointer-events: none;
1585 }
1586
1587 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-thumb {
1588 height: 100%;
1589 }
1590
1591
1592 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-category {
1593 display: none;
1594 }
1595
1596 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-text-content {
1597 width: 632px;
1598 position: relative;
1599 height: 200px;
1600 flex-grow: revert;
1601 bottom: 30px;
1602 }
1603
1604 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-text-content .card-news-info {
1605 position: absolute;
1606 top: -1px;
1607 }
1608 /* *** End Card Highlights *** */
1609
1610 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type path {
1611 stroke: #D7D7D7;
1612 }
1613
1614 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text,
1615 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text {
1616 color: var(--text-tertiary-default, #959595);
1617 line-height: var(--line-height-lg, 144%);
1618 }
1619
1620 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-type .card-news-type-text,
1621 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-time-read-text {
1622 color: var(--text-tertiary-default, #EEE);
1623 }
1624
1625 .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-icon-time-read {
1626 transform: translateY(-0.5px);
1627 }
1628
1629 body.high-contrast-active .${rootCss} .card-news-container .card-news-text-content .card-news-info .card-news-time-read .card-news-icon-time-read path {
1630 fill: #D7D7D7;
1631 }
1632
1633
1634
1635 .${rootCss} .quantify-results-text-number {
1636 color: var(--border-color-accent);
1637 }
1638
1639
1640 /* Liferay Pagination */
1641 .pagination-bar {
1642 justify-content: center;
1643 }
1644
1645 .pagination-bar .pagination-items-per-page {
1646 display: none !important;
1647 }
1648
1649 .pagination-bar .pagination-results {
1650 display: none !important;
1651 }
1652
1653 .pagination-bar .pagination {
1654 width: 100%;
1655 display: flex;
1656 justify-content: center;
1657 margin-top: var(--space-xl);
1658 }
1659
1660 .pagination-bar .page-item {
1661 display: none !important;
1662 outline: none;
1663 display: flex;
1664 flex-direction: column;
1665 align-items: center;
1666 justify-content: center;
1667 width: var(--size-lg);
1668 height: var(--size-lg);
1669 border-radius: var(--border-radius-pill, 100px);
1670 color: var(--text-tertiary-default, #959595);
1671 background: transparent;
1672 border: var(--border-width-hairline) solid transparent;
1673 transition: background 300ms ease-in-out, border-color 300ms ease-in-out;
1674 }
1675
1676 .pagination-bar .page-item.active .page-link {
1677 background: transparent;
1678 }
1679
1680 .pagination-bar .page-item .page-link:hover{
1681 background: transparent;
1682 }
1683
1684 .pagination-bar .page-item:hover{
1685 border-color: var(--border-color-accent);
1686 background: transparent;
1687 }
1688
1689 .pagination-bar .page-item.round-border {
1690 border-radius: var(--radius-pill, 100px);
1691 border: 1px solid var(--border-color-accent);
1692 }
1693
1694 .pagination-bar .page-item.disabled.round-border {
1695 border: 1px solid var(--text-tertiary-default, #959595);
1696
1697 }
1698
1699 .pagination-bar .page-item.show-item {
1700 display: flex !important;
1701 }
1702
1703 .pagination-bar .page-item.disabled span span svg {
1704 stroke: #525252;
1705 }
1706
1707 .pagination-bar .page-item span span svg {
1708 stroke: var(--border-color-accent);
1709 }
1710
1711 .pagination-bar .page-item.disabled {
1712 pointer-events: none;
1713 }
1714
1715 .pagination-bar .page-item.disabled:hover{
1716 background: transparent;
1717 }
1718
1719 .pagination-bar .page-item.active {
1720 background: var(--background-surface-level-02, #F8F8F8);
1721 box-shadow: 0px 12px 60px -10px rgba(145, 147, 149, 0.12);
1722 border: var(--border-width-hairline) solid #F8F8F8;
1723 pointer-events: none;
1724 }
1725
1726
1727 .pagination-bar .page-item.active * {
1728 color: var(--border-color-accent);
1729 font-weight: 700;
1730 }
1731
1732 body.high-contrast-active .pagination-bar .page-item span span svg {
1733 stroke: var(--tertiary-default, #EEE) !important;
1734 }
1735
1736 body.high-contrast-active .pagination-bar * {
1737 color: var(--tertiary-default, #EEE) !important;
1738
1739 }
1740
1741 body.high-contrast-active .pagination-bar .page-item.round-border {
1742 border-color: var(--tertiary-default, #EEE) !important;
1743 }
1744
1745 body.high-contrast-active .pagination-bar .page-item.active {
1746 color: var(--tertiary-default, #EEE) !important;
1747 border: none;
1748 }
1749
1750 body.high-contrast-active .pagination-bar .page-item.active {
1751 background: var(--surface-level-02, #373737) !important;
1752 }
1753
1754 body.high-contrast-active .pagination-bar .page-item:hover{
1755 border-color: var(--tertiary-default, #EEE);
1756 }
1757
1758
1759 @media screen and (max-width: 1440px) {
1760
1761 .${rootCss} .cards-highlights-container {
1762 padding: 0 var(--space-big);
1763 }
1764 }
1765
1766 @media screen and (max-width: 1024px) {
1767 .${rootCss} .dates-category-container .category-top-session {
1768 display: grid;
1769 grid-template-areas:
1770 "banner"
1771 "text";
1772 grid-template-columns: 100%;
1773 }
1774
1775 .${rootCss} .text-container {
1776 grid-area: text;
1777 width: 100%;
1778 max-width: 100%;
1779 }
1780
1781 .${rootCss} .category-banner {
1782 grid-area: banner;
1783 margin: 0 auto var(--space-lg);
1784 }
1785
1786 }
1787
1788
1789
1790 @media screen and (max-width: 766px) {
1791 .${rootCss} .dates-category-container .category-top-session {
1792 padding: 0;
1793 }
1794
1795
1796 .${rootCss} .category-banner {
1797 height: 205px;
1798 width: 100%;
1799
1800 }
1801
1802 .${rootCss} .category-banner img {
1803 position: absolute;
1804 width: 100vw;
1805 left: 0;
1806 height: 205px;
1807 }
1808
1809 .${rootCss} .category-top-session .text-container {
1810 margin: var(--space-md) 0;
1811 flex-direction: column;
1812 align-items: flex-start;
1813 }
1814
1815 .${rootCss} .text-container .category-description {
1816 max-width: 100%;
1817 }
1818
1819 .${rootCss} .dates-category-container .category-top-session.with-image .text-container {
1820 max-width: 100%;
1821 }
1822
1823 .${rootCss} .cards-highlights-container {
1824 padding: 0 var(--space-lg);
1825 }
1826
1827 .${rootCss} .cards-highlights-container .card-category-highlight-container {
1828 width: 312px;
1829 }
1830
1831
1832 .${rootCss} .results-category-title.tags-title .filters-section {
1833 flex-direction: column;
1834 gap: var(--space-lg);
1835 }
1836
1837 .${rootCss} .title-filter-container {
1838 flex-direction: column;
1839 gap: var(--space-lg);
1840 height: fit-content;
1841 margin-bottom: 22px;
1842 }
1843
1844
1845 .${rootCss} .filter-container.active,
1846 .${rootCss} .order-container.active {
1847 flex-direction: column;
1848 align-items: flex-start;
1849 }
1850
1851 .${rootCss} .filter-container.active #select-filter,
1852 .${rootCss} .order-container.active #select-order {
1853 align-self: flex-start;
1854 }
1855
1856
1857 .${rootCss} .card-news-list .card-news-container.card-highlights {
1858 width: 100%;
1859 }
1860
1861
1862 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-text-content {
1863 width: 100%;
1864 }
1865
1866
1867 .${rootCss} .card-news-list .card-news-container.card-highlights .card-news-image {
1868 width: 100%;
1869 }
1870
1871 .${rootCss} .results-category-title {
1872 height: 62px;
1873 }
1874
1875 .${rootCss} .filter-container,
1876 .${rootCss} .order-container {
1877 margin-right: var(--space-sm);
1878 }
1879 }
1880
1881</style>
1882
1883<script>
1884 AUI().ready(function () {
1885
1886 const editMode = document.body.classList.contains('has-edit-mode-menu');
1887 const cardsList = document.querySelector('.${rootCss} .card-news-list');
1888
1889
1890 if (!editMode) {
1891 const cardsHighlightsListLinks = document.querySelectorAll('.${rootCss} .cards-highlights-container .card-category-highlight-container .cards-category-highlights-link');
1892 const cards = cardsList.querySelectorAll('.card-news-container');
1893
1894 /*cards.forEach((card, index) => {
1895 let cardLink = card.querySelector('a');
1896 cardsHighlightsListLinks.forEach((cardHighligh) => {
1897 //let cardLinkHref = cardLink.href.toString();
1898 if (cardLink.href.includes(cardHighligh.href)) {
1899 card.remove();
1900 }
1901 })
1902 })*/
1903
1904 const cardsToRemove = [];
1905
1906 cards.forEach((card) => {
1907 let cardLink = card.querySelector('a');
1908 if (!cardLink) return;
1909
1910 cardsHighlightsListLinks.forEach((cardHighlight) => {
1911 if (cardHighlight.href && cardLink.href.includes(cardHighlight.href)) {
1912 cardsToRemove.push(card);
1913 }
1914 });
1915 });
1916
1917 cardsToRemove.forEach((card) => card.remove());
1918
1919
1920
1921 const firstImage = cardsList.querySelector('.card-news-container img');
1922 const firstContent = cardsList.querySelector('.card-news-container');
1923 const firstContentWithImage = null;
1924
1925
1926 if (firstImage) {
1927 // Card Highlight - List
1928 const firstContentWithImage = firstImage.parentElement.parentElement.parentElement;
1929
1930 if (firstContentWithImage) {
1931 let cloneElementWithImage = firstContentWithImage.cloneNode(true);
1932 const divSvg = document.createElement("div");
1933 divSvg.innerHTML = `<svg
1934 class="graphism-card-highlight" width="632" height="226" viewBox="0 0 632 226" fill="none" xmlns="http://www.w3.org/2000/svg">
1935 <g style="mix-blend-mode:multiply" opacity="0.5">
1936 <path d="M632 226L16 226C7.16345 226 0 218.837 0 210V0L516.247 42.7231C527.012 43.6139 536.601 49.8754 541.745 59.3732L632 226Z" fill="#00552A"/>
1937 </g>
1938 </svg>`;
1939 cloneElementWithImage.insertBefore(divSvg, cloneElementWithImage.firstChild);
1940 cloneElementWithImage.classList.add('card-highlights');
1941 cardsList.insertBefore(cloneElementWithImage, firstContent);
1942 firstContentWithImage.remove();
1943 }
1944 }
1945 }
1946
1947 cardsList.classList.add('active');
1948
1949 const url = new URL(window.location.href);
1950 const searchParams = url.searchParams;
1951
1952 // Order and Filters - Combos
1953 const orderContainer = document.querySelector('.${rootCss} .order-container');
1954 const filterContainer = document.querySelector('.${rootCss} .filter-container');
1955 const orderCombo = orderContainer.querySelector('#select-order');
1956 const filterCombo = filterContainer.querySelector('#select-filter');
1957
1958 // Order Functions
1959 const setOrder = (orderBy) => {
1960
1961 //const url = new URL(window.location.href);
1962 //const searchParams = url.searchParams;
1963
1964 searchParams.set('sort', orderBy);
1965 url.search = searchParams.toString();
1966 let newUrl = url.toString();
1967
1968 newUrl.includes("sort=createDate%25") && (newUrl = url.toString().replace("sort=createDate%25", "sort=createDate%"));
1969 window.location.href = newUrl;
1970 }
1971
1972 // Filter Functions
1973 const setFilter = (filterBy) => {
1974 if (+filterBy === 0 ) {
1975 searchParams.delete('categoryTypeNews')
1976 } else {
1977 searchParams.set('categoryTypeNews', filterBy);
1978 }
1979
1980 url.search = searchParams.toString();
1981 let newUrl = url.toString();
1982
1983 window.location.href = newUrl;
1984 }
1985
1986 const renderTypeOptions = (options) => {
1987 let actualFilter = searchParams.get('categoryTypeNews');
1988 options.forEach(typeItem => {
1989 let optionItem = document.createElement('option');
1990 optionItem.classList.add('paragraph-sm-regular');
1991 optionItem.setAttribute("value", typeItem.id);
1992
1993 if (+typeItem.id == +actualFilter) {
1994 optionItem.setAttribute('selected', '');
1995 }
1996
1997 let optionItemName = document.createTextNode(typeItem.name);
1998 optionItem.appendChild(optionItemName);
1999
2000 filterCombo.appendChild(optionItem);
2001 })
2002 }
2003
2004
2005 async function getTypeNews(vocabularyId) {
2006 try {
2007 const restResponse = await fetch(`/o/headless-admin-taxonomy/v1.0/taxonomy-vocabularies/${typeOfNewsVocabularyId}/taxonomy-categories?fields=id%2Cname`, {
2008 headers: {
2009 "x-csrf-token": Liferay.authToken,
2010 'accept': 'application/json'
2011 },
2012 method: "GET",
2013 });
2014
2015
2016 const eventData = await restResponse.json();
2017
2018 renderTypeOptions(eventData.items);
2019
2020 } catch (error) {
2021 console.error("Error connecting to vocabularies API:", error);
2022 }
2023 }
2024
2025 async function getRenderData() {
2026 await getTypeNews();
2027 }
2028
2029 getRenderData();
2030
2031 const orderComboOptions = orderCombo.querySelectorAll('option');
2032 const filterComboOptions = filterCombo.querySelectorAll('option');
2033
2034
2035 orderComboOptions.forEach((item) => {
2036
2037 let actualSort = searchParams.get('sort') ? searchParams.get('sort').replace(/\+/g, '%2B') : '';
2038 if (item.value === actualSort) {
2039 item.setAttribute('selected', '');
2040 }
2041
2042 })
2043
2044 orderCombo.addEventListener('change', (item) => {
2045 setOrder(item.target.value);
2046 })
2047
2048 filterCombo.addEventListener('change', (item) => {
2049 setFilter(item.target.value);
2050 })
2051
2052
2053
2054 orderContainer.classList.add('active');
2055 filterContainer.classList.add('active');
2056
2057 // *******************************************
2058 const cards = cardsList.querySelectorAll('.card-news-container');
2059
2060 if (cards.length == 0) {
2061 let noItemMsg = document.createElement('p');
2062 let msg = document.createTextNode('Nenhum resultado encontrado para o filtro selecionado além do(s) card(s) em destaque!');
2063 noItemMsg.classList.add('paragraph-sm-regular');
2064
2065 noItemMsg.appendChild(msg);
2066
2067 cardsList.appendChild(noItemMsg);
2068 }
2069
2070 // Liferay Pagination Edits:
2071 const paginationItens = document.querySelectorAll('.pagination-bar .pagination .page-item');
2072
2073 if (paginationItens.length > 0) {
2074 paginationItens[0].querySelector('span span').innerHTML=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2075 <path d="M13.5 8H2.5M2.5 8L7 3.5M2.5 8L7 12.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
2076 </svg>`;
2077
2078 paginationItens[0].classList.add('round-border');
2079
2080 paginationItens[(paginationItens.length - 1)].querySelector('span span').innerHTML=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2081 <path d="M2.5 8H13.5M13.5 8L9 3.5M13.5 8L9 12.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
2082 </svg>`;
2083
2084 paginationItens[(paginationItens.length - 1)].classList.add('round-border');
2085
2086
2087 paginationItens.forEach(item => {
2088 item.classList.add('show-item');
2089 });
2090
2091 }
2092 });
2093
2094
2095AUI().ready(() => {
2096 function setLinks${contentNumber}() {
2097
2098 const allCards = document.querySelectorAll(".${rootCss} .card-news-container");
2099 allCards.forEach((card) => {
2100 card.addEventListener('click', (event) => {
2101 card.querySelector('a').click();
2102 });
2103 })
2104
2105 document.querySelector('.${rootCss} .card-news-list').classList.add('active');
2106
2107 }
2108
2109 setLinks${contentNumber}()
2110});
2111
2112//Dropdown Select-order e Select-filter
2113 AUI().ready(function() {
2114 function setupDropdown(selectId, containerClass) {
2115 const select = document.getElementById(selectId);
2116 const container = document.querySelector("." + containerClass);
2117
2118 if (!select || !container) return;
2119
2120 let isDropdownOpen = false;
2121
2122 select.addEventListener("click", function () {
2123 isDropdownOpen = !isDropdownOpen;
2124 container.classList.toggle("open", isDropdownOpen);
2125
2126 select.style.backgroundImage = isDropdownOpen
2127 ? "url('data:image/svg+xml;base64,PHN2ZyB3d2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMTMgMTBMOCA1TDMgMTAiIHN0cm9rZT0iIzUyNTI1MiIgc3Ryb2tlLXdpZHRoPSIwLjc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg==')" // Para cima quando abre
2128 : "url('data:image/svg+xml;base64,PHN2ZyB3d2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMTMgNkw4IDExTDMgNiIgc3Ryb2tlPSIjNTI1MjUyIiBzdHJva2Utd2lkdGg9IjAuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+')"; // Para baixo quando fecha
2129 });
2130
2131 document.addEventListener("click", function (event) {
2132 if (!select.contains(event.target) && !container.contains(event.target)) {
2133 isDropdownOpen = false;
2134 container.classList.remove("open");
2135
2136 select.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB3d2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNMTMgNkw4IDExTDMgNiIgc3Ryb2tlPSIjNTI1MjUyIiBzdHJva2Utd2lkdGg9IjAuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+')";
2137 }
2138 });
2139 }
2140
2141 setupDropdown("select-order", "order-container");
2142 setupDropdown("select-filter", "filter-container");
2143});
2144
2145if (!document.body.classList.contains('has-edit-mode-menu')) {
2146 const url = new URL(window.location.href);
2147 const sp = url.searchParams;
2148
2149 if (sp.get('delta') !== '20') {
2150 sp.set('delta', '20');
2151 // start=1 garante que a listagem começa da primeira página com o novo delta
2152 sp.set('start', '1');
2153 // aplica sem criar histórico extra
2154 window.location.replace(url.toString());
2155 }
2156}
2157
2158</script>
2159
2160
2161</#if>
Faça uma busca:
Mais pesquisados
Preço dos combustíveis
Pré-Sal
Time Petrobras
Escolha um Canal:
Navegue nas Seções:
Acessibilidade
Idioma:
Selecione um idioma: