1<#--
2 ******************************************************
3 NÃO MARCAR O FAZER O CACHE DESSE TEMPLATE
4
5-->
6<#assign JournalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")> 7<#assign AssetCategoryLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService")> 8<#assign DLFileEntryLocalService = serviceLocator.findService("com.liferay.document.library.kernel.service.DLFileEntryLocalService")> 9<#assign assetVocabularyLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyLocalService")> 10<#assign assetCategoryPropService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService") > 11
12
13<#assign configuracaoDoSite = ContedoWeb39781032/>
14<#assign idAnoRelatorioAtual = "Numrico76181287" />
15<#assign idPDFDoCapitulo = "Text10278510" />
16<#assign idListaDeCapitulos = "ContedoWeb56785525" />
17<#assign idTituloDoCapitulo = "CampoDeTexto95765508" />
18<#assign idAudioDoCapitulo = "FazerUpload81724858" />
19<#assign idIntroducaoDoCapitulo = "RichText29335371" />
20<#assign idTempoLeituraDoCapitulo = "Numrico04166449" />
21<#assign idHtmlIframeAudioCapitulo = "CampoDeTexto63067023" />
22
23<#assign idListaDeTopicos = "GrupoDeCampos96478728" />
24<#assign idTituloDoTopico = "CampoDeTexto62607908" />
25<#assign idConteudoDoTopico = "RichText88969570" />
26<#assign idImagemLarguraDaPagina = "SeleoMltipla15674461" />
27
28<#function randomNumber salt>
29 <#local str= .now?long />
30 <#assign str = (str * salt)/3 />
31 <#return str[(str?string?length-5)..]/>
32</#function>
33
34<#function getCategoriesNamesAndIds assetVocabularyLocalService vocabularyName>
35 <#assign categoryList = [] >
36 <#attempt>
37 <#assign groupId = themeDisplay.getLayout().getGroupId() >
38 <#assign vocabulary = assetVocabularyLocalService.fetchGroupVocabulary(groupId, vocabularyName) >
39
40 <#list vocabulary.getCategories() as cat>
41
42 <#assign categoryId = cat.getCategoryId() >
43 <#assign catPropOrder = assetCategoryPropService.getCategoryProperty(categoryId,"ordem") >
44 <#assign catPropColor = assetCategoryPropService.getCategoryProperty(categoryId,"cor") >
45
46 <#if catPropOrder?has_content >
47 <#assign catPropOrderValue = catPropOrder.getValue()>
48 <#else>
49 <#assign catPropOrderValue = 999999>
50 </#if>
51
52 <#if catPropColor?has_content >
53 <#assign catPropColorValue = catPropColor.getValue()>
54 <#else>
55 <#assign catPropOrderValue = 000000>
56 </#if>
57
58 <#assign categoryList += [{"title": cat.getTitle(locale), "id": categoryId, "order": catPropOrderValue, "color": catPropColorValue }]> 59
60 </#list>
61
62 <#return categoryList>
63 <#recover >
64 <#return [{"title": "not found", "id" : -1, "order" : -1, "color": 000000 }] > 65 </#attempt>
66</#function>
67
68<#assign categoriesList = getCategoriesNamesAndIds(assetVocabularyLocalService, "Dimensão")>
69
70<#function recuperarUnicoNo name root>
71 <#assign result = "There is no value found for field name '${name}'." /> 72 <#attempt>
73 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='${name}']/dynamic-content[@language-id='${locale}']") /> 74 <#if (xPathSelector.selectSingleNode(root)??)>
75 <#assign singleNode = xPathSelector.selectSingleNode( root ) />
76 <#assign result = singleNode.getStringValue()?trim />
77 <#else>
78 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='${name}']") /> 79 <#if (xPathSelector.selectSingleNode(root)??)>
80 <#assign singleNode = xPathSelector.selectSingleNode( root ) />
81 <#assign result = singleNode.getStringValue()?trim />
82 </#if>
83 </#if>
84 <#recover>
85 <#assign result = "There was an error while getting the value for field name '${name}'." /> 86 </#attempt>
87 <#return result />
88</#function>
89
90
91<#function recuperarListaDeNos name root>
92 <#attempt>
93 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='${name}']/dynamic-content[@language-id='${locale}']") /> 94 <#return xPathSelector.selectNodes( root ) />
95 <#recover>
96 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='${name}']") /> 97 <#return xPathSelector.selectNodes( root ) />
98 </#attempt>
99</#function>
100
101
102<#function recuperarDescricaoCategoria root>
103 <#attempt>
104 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-content[@language-id='${locale}']") /> 105 <#return xPathSelector.selectSingleNode( root ).getStringValue()?trim />
106 <#recover>
107 <#return "" />
108 </#attempt>
109</#function>
110
111<#function criarAncora text>
112 <#attempt>
113 <#assign anchor = text?lower_case />
114 <#assign anchor = anchor?replace('[^a-zA-Zs0-9]', ' ', 'r') /> 115 <#assign anchor = anchor?trim />
116 <#assign anchor = anchor?replace('[ ]{1,}', '-', 'r') /> 117 <#return anchor />
118 <#recover>
119 <#return "" />
120 </#attempt>
121</#function>
122
123<#function removerCartactersEspeciais text>
124 <#attempt>
125 <#assign anchor = text?lower_case />
126 <#assign anchor = anchor?replace('[^a-zA-Zs0-9]', ' ', 'r') /> 127 <#assign anchor = anchor?trim />
128 <#assign anchor = anchor?replace('[ ]{1,}', '', 'r') /> 129 <#return anchor />
130 <#recover>
131 <#return "" />
132 </#attempt>
133</#function>
134
135<#function extrairNomeCapituloDaUrl url>
136 <#attempt>
137 <#assign indiceInicialNomeCapitulo = url?last_index_of("/") /> 138 <#if indiceInicialNomeCapitulo gt -1 && indiceInicialNomeCapitulo +1 < url?length >
139 <#assign indiceInicialNomeCapitulo = indiceInicialNomeCapitulo +1 />
140 <#else>
141 <#return "" />
142 </#if>
143
144 <#assign indiceFinalNomeCapitulo = url?last_index_of("#") /> 145 <#if indiceFinalNomeCapitulo == -1 >
146 <#assign indiceFinalNomeCapitulo = url?length -1 />
147 </#if>
148
149 <#assign urlLength = url?length />
150
151 <#if indiceInicialNomeCapitulo gt -1 && indiceInicialNomeCapitulo lt urlLength
152 && indiceFinalNomeCapitulo gt -1 && indiceFinalNomeCapitulo lt urlLength
153 && indiceInicialNomeCapitulo lt indiceFinalNomeCapitulo >
154 <#return url[indiceInicialNomeCapitulo..indiceFinalNomeCapitulo] />
155 <#else>
156 <#return "" />
157 </#if>
158 <#recover>
159 <#return "" />
160 </#attempt>
161</#function>
162
163<#function procurarIndiceCapitulo listaDeCapitulos nomeCapituloAProcurar>
164 <#attempt>
165 <#if !nomeCapituloAProcurar?? || !nomeCapituloAProcurar?has_content >
166 <#return -1 />
167 </#if>
168 <#assign indice = 0 />
169 <#list listaDeCapitulos as capitulo>
170 <#assign json = jsonFactoryUtil.createJSONObject(capitulo.getStringValue()) />
171 <#assign artigoDoCapitulo = JournalArticleLocalService.getLatestArticle(json.classPK?number) />
172 <#if artigoDoCapitulo?? && artigoDoCapitulo?has_content && nomeCapituloAProcurar?contains(artigoDoCapitulo.getUrlTitle()) >
173 <#return indice />
174 </#if>
175 <#assign indice = indice + 1 />
176 </#list>
177
178 <#return -1 />
179 <#recover>
180 <#return -1 />
181 </#attempt>
182</#function>
183
184
185<#function linkParaProximoCapitulo indiceCapituloAtual listaDeCapitulos nextOrPrevious>
186 <#attempt>
187 <#assign quantidadeCapitulos = listaDeCapitulos?size />
188 <#assign linkProximoCapitulo = "" />
189 <#assign indiceProximoCapitulo = indiceCapituloAtual + nextOrPrevious/>
190 <#if indiceProximoCapitulo lt quantidadeCapitulos >
191 <#if listaDeCapitulos[indiceProximoCapitulo]??>
192 <#assign proximoCapitulo=listaDeCapitulos[indiceProximoCapitulo] />
193 <#assign proximoCapituloJson=jsonFactoryUtil.createJSONObject(proximoCapitulo.getStringValue()?trim) />
194 <#if proximoCapituloJson?? >
195 <#assign proximoartigoDoCapitulo=JournalArticleLocalService.getLatestArticle(proximoCapituloJson.classPK?number) />
196 <#assign proximocapituloElementoRaiz=proximoartigoDoCapitulo.getDocument().getRootElement() />
197 <#assign nomeProximoCapitulo=recuperarUnicoNo(idTituloDoCapitulo, proximocapituloElementoRaiz) />
198 <#assign linkProximoCapitulo = proximoartigoDoCapitulo.getUrlTitle() />
199 <#return linkProximoCapitulo />
200 </#if>
201 </#if>
202 </#if>
203 <#return "" />
204 <#recover>
205 <#return "" />
206 </#attempt>
207</#function>
208
209<#function recuperarArtigoDoCapitulo noContendoStringDoJsonDoArtigo>
210 <#attempt>
211 <#if !noContendoStringDoJsonDoArtigo?? || !noContendoStringDoJsonDoArtigo?has_content >
212 <#return "" />
213 </#if>
214
215 <#assign capituloJson = jsonFactoryUtil.createJSONObject(noContendoStringDoJsonDoArtigo.getStringValue()?trim) />
216 <#if !capituloJson?? || !capituloJson?has_content || !capituloJson.classPK??>
217 <#return "" />
218 </#if>
219
220 <#return JournalArticleLocalService.getLatestArticle(capituloJson.classPK?number) />
221 <#recover>
222 <#return "" />
223 </#attempt>
224</#function>
225
226
227<#function recuperarTituloDoCapitulo artigoDoCapitulo>
228 <#attempt>
229 <#assign capituloElementoRaiz=artigoDoCapitulo.getDocument().getRootElement() />
230 <#return artigoDoCapitulo.getTitle(locale, true) />
231 <#recover>
232 <#return "" />
233 </#attempt>
234</#function>
235
236
237<#function recuperarTitulUrloDoCapitulo artigoDoCapitulo>
238 <#attempt>
239 <#return artigoDoCapitulo.getUrlTitle() />
240 <#recover>
241 <#return "" />
242 </#attempt>
243</#function>
244
245<#function criarLinkParaCapitulo urlProximoCapitulo >
246 <#return themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL + "/w/" + urlProximoCapitulo />
247</#function>
248
249
250<#function scapeUrl urlToScape>
251 <#attempt>
252 <#setting url_escaping_charset='ISO-8859-1'>
253 <#return urlToScape?url />
254 <#recover>
255 <#return urlToScape />
256 </#attempt>
257</#function>
258
259
260<#if !configuracaoDoSite??>
261 <#stop>
262</#if>
263
264<#assign urlAtual = themeDisplay.getURLCurrent() />
265<#assign nomeCapituloAProcurar = extrairNomeCapituloDaUrl(urlAtual) />
266<#assign configuracaoDoSiteJson = jsonFactoryUtil.createJSONObject(configuracaoDoSite.getData()) />
267<#assign relatorioDeSustentabilidadeArticle = JournalArticleLocalService.getLatestArticle(configuracaoDoSiteJson.classPK?number) />
268<#assign relatorioDeSustentabilidadeRootElement = relatorioDeSustentabilidadeArticle.getDocument().getRootElement() />
269
270<#assign anoRelatorio = recuperarUnicoNo(idAnoRelatorioAtual, relatorioDeSustentabilidadeRootElement) />
271
272<#assign listaDeCapitulos = recuperarListaDeNos(idListaDeCapitulos, relatorioDeSustentabilidadeRootElement) />
273<#assign indiceCapitulo = procurarIndiceCapitulo(listaDeCapitulos, nomeCapituloAProcurar) />
274
275<#assign exibindoNaPaginaDeSustentabilidade = false />
276<#if indiceCapitulo == -1 >
277 <#assign indiceCapitulo = 0 />
278 <#assign exibindoNaPaginaDeSustentabilidade = true />
279</#if>
280
281<#assign quantidadeCapitulos = listaDeCapitulos?size />
282<#if quantidadeCapitulos == 0>
283 <#stop>
284</#if>
285
286
287<#assign baseDoTituloDoRelatorioCampo = GrupoDeCampos57986529.CampoDeTexto89239188 />
288
289<#assign grupoDeCamposCapitulo = GrupoDeCampos92731415 />
290<#assign mudarTamanhoFonteCampo = grupoDeCamposCapitulo.CampoDeTexto24226641 />
291<#assign compartilheEsteCapituloCampo = grupoDeCamposCapitulo.CampoDeTexto68879852 />
292<#assign listaDeCapitulosCampo = grupoDeCamposCapitulo.CampoDeTexto79167725 />
293<#assign sumarioCapituloCampo = grupoDeCamposCapitulo.CampoDeTexto89962235 />
294<#assign marcadorVisaoGeralCampo = grupoDeCamposCapitulo.CampoDeTexto69356254 />
295<#assign proximoCapituloCampo = grupoDeCamposCapitulo.CampoDeTexto37438842 />
296<#assign anteriorCapituloCampo = grupoDeCamposCapitulo.Campo10410570 />
297<#assign rotuloArquivoDeAudioCampo = grupoDeCamposCapitulo.CampoDeTexto42598118 />
298<#assign bannerDoPdfRodapeCapitulo = grupoDeCamposCapitulo.CampoDeTexto72845330 />
299<#assign botaoDoBannerDoPdfRodapeCapitulo = grupoDeCamposCapitulo.CampoDeTexto27359954 />
300<#assign imagemBannerBaixarCapituloEmPDFCampo = grupoDeCamposCapitulo.FazerUpload13551009 />
301<#assign imagemBannerBaixarCapituloEmPDFMobileCampo = grupoDeCamposCapitulo.FazerUpload83208128 />
302
303<#assign tempoDeLeituraDoCapituloSingularCampo = grupoDeCamposCapitulo.CampoDeTexto52097979 />
304<#assign tempoDeLeituraDoCapituloPluralCampo = grupoDeCamposCapitulo.CampoDeTexto71563078 />
305
306<#assign tituloDaUrlProximoCapitulo = linkParaProximoCapitulo(indiceCapitulo, listaDeCapitulos, 1) />
307<#assign tituloDaUrlCapituloAnterior = linkParaProximoCapitulo(indiceCapitulo, listaDeCapitulos, -1) />
308
309
310<#assign textoMudarTamanhoFonte = mudarTamanhoFonteCampo.getData() />
311<#assign textoCompartilheEsteCapitulo = compartilheEsteCapituloCampo.getData() />
312<#assign textoListaDeCapitulos = listaDeCapitulosCampo.getData() />
313<#assign textoNesteCapitulo = sumarioCapituloCampo.getData() />
314<#assign textoContagemCapitulos = marcadorVisaoGeralCampo.getData() />
315<#assign textoProximoCapitulo = proximoCapituloCampo.getData() />
316<#assign textoCapituloAnterior = anteriorCapituloCampo.getData() />
317<#assign textoOucaEsteCapitulo = rotuloArquivoDeAudioCampo.getData()/>
318<#assign textoBaixarRelatorioCompleto = bannerDoPdfRodapeCapitulo.getData() />
319<#assign textoDoBotaoDoBannerDoPdfRodapeCapitulo = botaoDoBannerDoPdfRodapeCapitulo.getData() />
320<#assign textoBaseDoTituloDoRelatorio = baseDoTituloDoRelatorioCampo.getData() />
321<#assign imagemBannerBaixarCapituloEmPDFUrl = imagemBannerBaixarCapituloEmPDFCampo.getData() />
322<#assign imagemBannerBaixarCapituloEmPDFMobile = imagemBannerBaixarCapituloEmPDFMobileCampo.getData() />
323
324
325
326<#assign prefixoCSS="sust-cap" />
327<#assign mobileScreenSize = 680 />
328
329
330<#assign capitulo = listaDeCapitulos[indiceCapitulo] />
331<#assign capituloJson = jsonFactoryUtil.createJSONObject(capitulo.getStringValue()?trim) />
332<#assign artigoDoCapitulo = JournalArticleLocalService.getLatestArticle(capituloJson.classPK?number) />
333<#assign capituloElementoRaiz = artigoDoCapitulo.getDocument().getRootElement() />
334<#assign tituloDoCapitulo = artigoDoCapitulo.getTitle(locale, true) />
335<#assign tituloDoCapituloAtual = artigoDoCapitulo.getTitle(locale, true) />
336<#assign tempoDeLeitura = recuperarUnicoNo(idTempoLeituraDoCapitulo, capituloElementoRaiz) />
337<#assign tempoDeLeitura = tempoDeLeitura?number />
338<#assign urlDoCapituloAtual = recuperarTitulUrloDoCapitulo(artigoDoCapitulo) />
339<#assign introducaoCapitulo = recuperarUnicoNo(idIntroducaoDoCapitulo, capituloElementoRaiz) />
340<#assign htmlIframeAudioCapitulo = recuperarUnicoNo(idHtmlIframeAudioCapitulo, capituloElementoRaiz) />
341
342<#assign listaCategorias = AssetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", artigoDoCapitulo.resourcePrimKey?number) /> 343<#assign categoriaParaDoCapituloAtual = ""/>
344<#if listaCategorias?size gt 0 >
345 <#assign category = listaCategorias[0] />
346 <#assign categoriaParaDoCapituloAtual = category.getTitle(locale) />
347</#if>
348
349<#assign textoTempoDeLeituraDoCapitulo = "" />
350<#if tempoDeLeitura gt 1>
351 <#assign textoTempoDeLeituraDoCapitulo = tempoDeLeituraDoCapituloPluralCampo.getData() />
352<#else>
353 <#assign textoTempoDeLeituraDoCapitulo = tempoDeLeituraDoCapituloSingularCampo.getData() />
354</#if>
355
356
357<#assign grupoRodape = GrupoDeCampos21745416 />
358
359<#assign urlSocialTwitter = "" />
360<#if (grupoRodape.CampoDeTexto24543650.getData())??>
361 <#assign urlSocialTwitter = GrupoDeCampos21745416.CampoDeTexto24543650.getData() />
362</#if>
363
364<#assign urlSocialFacebook = "" />
365<#if (grupoRodape.CampoDeTexto34035380.getData())??>
366 <#assign urlSocialFacebook = GrupoDeCampos21745416.CampoDeTexto34035380.getData() />
367</#if>
368
369<#assign urlSocialInstagram = "" />
370<#if (grupoRodape.CampoDeTexto44234009.getData())??>
371 <#assign urlSocialInstagram = GrupoDeCampos21745416.CampoDeTexto44234009.getData() />
372</#if>
373
374<#assign urlSocialLinkedin = "" />
375<#if (grupoRodape.CampoDeTexto02456134.getData())??>
376 <#assign urlSocialLinkedin = GrupoDeCampos21745416.CampoDeTexto02456134.getData() />
377</#if>
378
379<#assign urlSocialLinkedin = "" />
380<#if (grupoRodape.CampoDeTexto25223389.getData())??>
381 <#assign urlSocialLinkedin = GrupoDeCampos21745416.CampoDeTexto25223389.getData() />
382</#if>
383
384
385<#assign xSeletorCaminho = saxReaderUtil.createXPath("dynamic-element[@name='${idListaDeTopicos}' ]") /> 386<#assign listaDeTopicos = xSeletorCaminho.selectNodes(capituloElementoRaiz) />
387
388
389<#assign capitulosPorCategoria = {} /> 390<#assign capitulosSemCategoria = [] />
391<#assign ordemDaCategoria = {} /> 392<#assign ultimaOrdem = 0/>
393
394<#--assign subjectsOrder = { 395"Estratégia" : 1,
396"Governança": 2,
397"Ambiental" : 3,
398"Social": 4,
399"Documentos": 5,
400
401"Strategy" : 1,
402"Governance": 2,
403"Environmental": 3,
404"Social": 4,
405"Documents": 5
406}-->
407
408
409<#list listaDeCapitulos as capitulo>
410 <#if capitulo?? >
411 <#assign capituloArtigo = recuperarArtigoDoCapitulo(capitulo)/>
412 <#if capituloArtigo?? >
413 <#assign listaCategorias = AssetCategoryLocalService.getCategories("com.liferay.journal.model.JournalArticle", capituloArtigo.resourcePrimKey?number) /> 414 <#if listaCategorias?size gt 0>
415 <#assign categoria = listaCategorias[0]/>
416 <#if categoria??>
417 <#assign categoriaTitulo = categoria.getTitle(locale) />
418 <#list listaCategorias as capitulosCat>
419 <#list categoriesList as categories>
420 <#if capitulosCat.getTitle(locale) = categories.title >
421 <#assign
422 order = categories.order
423 color = categories.color
424 >
425 </#if>
426 </#list >
427
428 <#-- p>Name: ${capitulosCat.getTitle(locale)} - order: ${order} - color:${color} </p --> 429
430 </#list>
431 <#if categoriaTitulo??>
432 <#if capitulosPorCategoria[categoriaTitulo]??>
433 <#assign capitulosNaCategoria = capitulosPorCategoria[categoriaTitulo] />
434 <#assign capitulosNaCategoria += [capituloArtigo] />
435 <#assign capitulosPorCategoria = capitulosPorCategoria + {categoriaTitulo: capitulosNaCategoria} /> 436 <#else>
437 <#assign capitulosNaCategoria = [capituloArtigo] />
438 <#assign capitulosPorCategoria = capitulosPorCategoria + {categoriaTitulo: capitulosNaCategoria}> 439 <#-- assign ordem = subjectsOrder[categoriaTitulo] -->
440 <#assign ordem = order>
441 <#if !ordem??>
442 <#assign ordem = ultimaOrdem/>
443 <#assign ultimaOrdem = ultimaOrdem + 1/>
444 </#if>
445
446 <#--attempt>
447 <#assign property = AssetCategoryPropertyLocalServiceImpl.getCategoryProperty(categoria.getCategoryId(), "ordem") />
448
449 <#if property?? && property?has_content>
450 <#assign ordem = property.value />
451 <#if ordem?? && ordem?has_content && ordem?number>
452 <#assign ordem = ordem.number />
453 <#if ultimaOrdem lt ordem || ultimaOrdem == ordem>
454 <#assign ultimaOrdem = ordem + 1/>
455 </#if>
456 <#else>
457 <#assign ordem = ultimaOrdem/>
458 <#assign ultimaOrdem = ultimaOrdem + 1/>
459 </#if>
460 </#if>
461 <h1>categoriaTitulo: ${categoriaTitulo}</h1> 462
463 <#recover>
464 <#assign ordem = ultimaOrdem/>
465 <#assign ultimaOrdem = ultimaOrdem + 1/>
466 <h1>categoriaTitulo excecao: ${categoriaTitulo}</h1> 467 </#attempt-->
468 <#assign ordemDaCategoria += {ordem: categoriaTitulo}/> 469 </#if>
470 </#if>
471 </#if>
472 <#else>
473 <#assign capitulosSemCategoria += [capituloArtigo] />
474 </#if>
475 </#if>
476 </#if>
477</#list>
478
479<#assign assetCategoryPropService = serviceLocator.findService("com.liferay.asset.category.property.service.AssetCategoryPropertyLocalService") /> 480
481<#assign listaTodosCapitulosPorCategoria = [] />
482<#assign listaTodosCapitulosPorCategoria += capitulosSemCategoria />
483
484
485<#list ordemDaCategoria?keys?sort as ordem>
486 <#assign categoria = ordemDaCategoria[ordem] />
487 <#assign listaTodosCapitulosPorCategoria += capitulosPorCategoria[categoria] />
488</#list>
489
490<#assign indice = 0/>
491<#assign indiceCapituloNaCategoria = -1 />
492<#list listaTodosCapitulosPorCategoria as capitulo>
493 <#if capitulo?? && capitulo.getUrlTitle() == nomeCapituloAProcurar >
494 <#assign indiceCapituloNaCategoria = indice />
495 <#else>
496 <#assign indice = indice + 1 />
497 </#if>
498</#list>
499
500<#assign tituloDaUrlProximoCapitulo = "" />
501<#if indiceCapituloNaCategoria != -1 && (indiceCapituloNaCategoria +1) lt listaTodosCapitulosPorCategoria?size>
502 <#assign tituloDaUrlProximoCapitulo = listaTodosCapitulosPorCategoria[indiceCapituloNaCategoria + 1].getUrlTitle() />
503</#if>
504
505<#assign listaDeClasseParEsconderCabecalho = "" />
506<#if exibindoNaPaginaDeSustentabilidade >
507 <#assign listaDeClasseParEsconderCabecalho = "hidden" />
508</#if>
509
510
511
512<#assign nomeDaCategoriaParaCSS = removerCartactersEspeciais(categoriaParaDoCapituloAtual) />
513
514
515
516
517<section class="${prefixoCSS}"> 518 <div class="header ${listaDeClasseParEsconderCabecalho}" id="${prefixoCSS}-header"> 519
520 <div class="modal-overlay"></div>
521 <div class="company-info">
522 <div class="logo">
523 <#assign urlHome = themeDisplay.getPortalURL() + themeDisplay.getPathFriendlyURLPublic() + layout.getGroup().friendlyURL />
524 <a href=${urlHome}> 525 <svg width="100" height="20" viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg">
526 <path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.72412H19.5378V0H0V4.72412Z" fill="#FDC82F"/>
527 <path fill-rule="evenodd" clip-rule="evenodd" d="M40.4905 14.3353H34.4496L36.5176 7.16764H42.3953L41.9055 8.79665H38.368L38.0959 9.82835H41.0891L40.5993 11.5117H37.6061L37.2796 12.652H40.9259L40.4905 14.3353ZM0 19.4395H19.5378V7.05904H0V19.4395ZM31.0209 12.0547C30.9121 12.0547 30.7488 12.0547 30.64 12.0547H29.4427L28.7896 14.281H26.395L28.4631 7.11334H31.0209H31.9461C34.0142 7.11334 34.7217 8.03644 34.3407 9.55685C33.9598 11.023 32.8713 11.9461 31.0209 12.0547ZM31.0209 8.79665H30.3679L29.9325 10.3714H31.0209C31.5107 10.3714 31.9461 10.0999 32.1094 9.55685C32.2727 8.90525 31.5652 8.79665 31.0209 8.79665ZM88.0015 11.8918H88.7634V9.28535L88.0559 10.5343L87.294 11.8375H88.0015V11.8918ZM88.0015 7.38484L88.1648 7.16764H90.5594L91.1036 14.3353H88.7634V13.4122H88.0015H86.3688L85.8246 14.3353H83.6477H83.4844L83.6477 14.1181L88.0015 7.38484ZM99.9745 9.23105C100.138 7.98214 99.5391 6.95044 97.5255 6.95044C95.7295 6.95044 94.1513 7.71064 93.7159 9.23105C92.8996 11.9461 97.3078 11.2402 96.9813 12.3262C96.8724 12.652 96.437 12.8692 95.8384 12.8692C95.6207 12.8692 95.3486 12.8149 95.2397 12.7063C95.0765 12.5977 94.9676 12.3805 95.022 12.1633H92.7363C92.4098 13.4665 93.3349 14.5525 95.2397 14.5525C97.199 14.5525 98.8316 13.738 99.3214 12.0547C100.083 9.44825 95.7295 10.0999 96.0561 9.01385C96.1105 8.74235 96.3826 8.57945 96.9268 8.57945C97.1445 8.57945 97.3622 8.63375 97.4711 8.68805C97.6343 8.79665 97.6888 8.95955 97.6888 9.17675H99.9745V9.23105ZM83.6477 9.28535C83.6477 9.23105 83.7021 9.17675 83.7021 9.12245C83.8654 8.57945 83.8654 8.14504 83.6477 7.81924C83.3212 7.33054 82.5592 7.05904 81.0898 7.05904H80.2735H77.6612L75.6476 14.3353H77.9877L78.6952 11.8375H79.4027C79.8381 11.8375 80.1102 11.8918 80.2735 12.0004C80.5456 12.1633 80.4912 12.5434 80.3279 13.0864C80.3279 13.1407 80.3279 13.195 80.2735 13.195C80.1102 13.738 80.0558 14.1724 80.0558 14.3353H80.2735H82.4504L82.5048 14.1181C82.2327 14.1181 82.3416 13.7923 82.6137 12.8692C83.049 11.4031 82.6137 11.2402 81.9606 10.9687C82.8858 10.6972 83.43 10.0999 83.6477 9.28535ZM80.3279 10.2085C80.9266 10.1542 81.3075 9.99125 81.4164 9.50255C81.5796 9.01385 81.1987 8.74235 80.6544 8.74235H80.2735H79.566L79.1306 10.1542H80.0558C80.1646 10.2085 80.2191 10.2085 80.3279 10.2085ZM71.3482 14.281C72.9809 14.1724 74.1782 13.6294 74.6135 12.109C74.8312 11.2945 74.6135 10.6429 73.906 10.48C74.4503 10.2085 75.1033 9.66545 75.2666 8.90525C75.6476 7.49344 74.5047 7.11334 72.872 7.11334H71.3482H69.389L67.3209 14.281H70.8584C71.0216 14.3353 71.1849 14.3353 71.3482 14.281ZM71.3482 8.79665H72.1101C72.5999 8.79665 73.0897 8.79665 72.9264 9.39395C72.8176 9.82835 72.3822 9.99125 71.9468 9.99125H71.3482H70.9672L71.3482 8.79665ZM71.3482 11.2945C72.1101 11.2945 72.6543 11.3488 72.4366 11.9461C72.2734 12.4891 71.8924 12.5977 71.3482 12.5977C71.2937 12.5977 71.2937 12.5977 71.2393 12.5977H70.2053L70.5863 11.2945H71.3482ZM62.9126 12.652C63.6201 12.3805 64.0555 11.6203 64.3276 10.6972C64.5998 9.71975 64.4909 8.68805 63.4569 8.68805C63.2392 8.68805 63.0759 8.74235 62.9126 8.79665C62.1507 9.06815 61.7153 9.93695 61.4977 10.6972C61.2255 11.6203 61.1711 12.7606 62.314 12.7606C62.5317 12.7606 62.7494 12.7063 62.9126 12.652ZM62.9126 7.05904C63.2392 7.00474 63.6201 6.95044 64.0011 6.95044C66.559 6.95044 67.2665 8.79665 66.7222 10.6972C66.1236 12.7063 64.6542 14.0095 62.9126 14.3896C62.5861 14.4439 62.2052 14.4982 61.8242 14.4982C59.5929 14.4982 58.45 13.0864 59.1575 10.6429C59.7017 8.74235 61.1167 7.43914 62.9126 7.05904ZM54.586 13.195C54.586 13.1407 54.586 13.1407 54.6404 13.0864C54.8037 12.5434 54.8581 12.1633 54.586 12.0004C54.4227 11.8918 54.1506 11.8375 53.7152 11.8375H53.0077L52.3002 14.3353H50.1777H49.9056L50.1777 13.4122L51.9737 7.16764H54.586H55.4023C57.7969 7.16764 58.3956 7.81924 58.0146 9.23105C57.7425 10.0456 57.1983 10.7515 56.3275 10.9687C56.9806 11.2402 57.416 11.4574 56.9806 12.8692C56.7085 13.7923 56.5996 14.1181 56.8717 14.1181L56.8173 14.3353H54.6404H54.4227C54.3683 14.1724 54.4771 13.738 54.586 13.195ZM54.586 10.2085C55.1846 10.1542 55.5656 9.99125 55.6744 9.50255C55.8377 9.01385 55.4567 8.74235 54.9125 8.74235H54.5316H53.8785L53.4431 10.1542H54.3683C54.4771 10.2085 54.5316 10.2085 54.586 10.2085ZM50.2322 8.09074L50.5043 7.16764H50.2322H43.8647L43.3205 9.06815H45.443L43.9191 14.3896H46.2593L47.7831 9.06815H49.9056L50.2322 8.09074Z" fill="#008542"/>
528 <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5378 7.05903V4.72412H0V7.05903H3.75517L1.6871 14.281H5.93208C7.78245 14.281 8.10898 13.8466 8.48994 13.5208C8.97975 13.0864 9.25186 12.109 9.03417 11.4031C8.8709 10.9143 8.43552 10.6428 8.3811 10.5885C8.97975 10.317 9.30628 9.71974 9.36071 9.66544C9.5784 9.23104 9.74166 8.41654 9.19744 7.76494C8.76206 7.22193 7.89129 7.05903 7.29264 7.05903H11.8642L9.79609 14.281H11.9186L12.6805 11.566H13.8778C14.7486 11.566 14.6941 12.109 14.6941 12.3262L14.7486 14.3353H16.7078C16.7078 14.3353 16.5989 12.109 16.5989 11.8918C16.5989 11.2945 16.1635 11.0773 15.837 11.0773C16.4901 10.9143 17.0343 10.317 17.252 9.99125C17.5241 9.55684 17.6874 8.90524 17.4697 8.25364C17.0887 7.27623 16.1635 7.11333 15.5105 7.11333H19.5378V7.05903ZM13.4424 8.52514H14.9662C15.6737 8.52514 15.7282 9.01384 15.7282 9.17674C15.7282 9.50254 15.4561 10.1541 14.5309 10.1541H12.9526C13.007 10.1541 13.4424 8.57944 13.4424 8.52514ZM4.68035 11.2402H6.09534C6.80284 11.2402 6.80284 11.4031 6.91168 11.566C7.02053 11.7289 6.96611 12.0547 6.91168 12.1633C6.80284 12.3262 6.69399 12.7606 5.82323 12.7606H4.19055C4.19055 12.7606 4.62593 11.2402 4.68035 11.2402ZM5.44227 8.52514H7.07495C7.40149 8.52514 7.6736 8.74234 7.6736 9.06814C7.6736 9.50254 7.29264 9.82834 6.80284 9.82834H5.06131L5.44227 8.52514Z" fill="white"/>
529 </svg>
530 </a>
531 </div>
532
533 <div class="separator"></div>
534
535 <div class="report-title">
536 <span>${textoBaseDoTituloDoRelatorio}</span> 537 </div>
538 </div>
539
540 <div class="buttons">
541
542 <div class="search-icon">
543 <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
544 <path d="M21.0002 20.0494L15.5702 14.5394C16.8252 13.0628 17.513 11.1873 17.5102 9.24939C17.5167 7.36751 16.8804 5.53981 15.7067 4.06883C14.5329
545 2.59784 12.8921 1.57176 11.0557 1.16043C9.2193 0.749093 7.29749 0.977169 5.60839 1.8069C3.91929 2.63663 2.56415 4.01826 1.76729 5.72311C0.97043
546 7.42796 0.779624 9.35382 1.22644 11.1819C1.67326 13.01 2.73093 14.6307 4.22437 15.7757C5.71781 16.9208 7.55746 17.5215 9.43886 17.4786C11.3203 17.4356
547 13.1306 16.7514 14.5702 15.5394L20.0002 21.0394L21.0002 20.0494ZM9.2802 16.0494C7.93133 16.0494 6.61274 15.6494 5.4912 14.9C4.36966 14.1506 3.49552
548 13.0855 2.97933 11.8393C2.46314 10.5931 2.32808 9.22183 2.59124 7.89888C2.85439 6.57593 3.50393 5.36071 4.45772 4.40692C5.41152 3.45312 6.62673
549 2.80358 7.94968 2.54043C9.27263 2.27728 10.6439 2.41234 11.8901 2.92852C13.1363 3.44471 14.2014 4.31885 14.9508 5.4404C15.7002 6.56194 16.1002 7.88051
550 16.1002 9.22938C16.1015 10.1272 15.9258 11.0164 15.5831 11.8462C15.2405 12.676 14.7376 13.4301 14.1033 14.0654C13.4689 14.7007 12.7155 15.2047 11.8862
551 15.5485C11.0569 15.8924 10.168 16.0694 9.27019 16.0694L9.2802 16.0494Z" fill="black"/>
552 </svg>
553 </div>
554
555 <div class="language">
556 <div class="language-pt current-language" id="${prefixoCSS}-language-pt"> 557 <span>PT</span>
558 </div>
559 <div class="language-en" id="${prefixoCSS}-language-en"> 560 <span>EN</span>
561 </div>
562 </div>
563
564 <div class="libras-icon">
565 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
566 <path d="M17.6693 9.47928C17.7795 9.47928 17.8897 9.15976 18 8.41419L17.8897 8.52071C18 7.77515 17.6693 7.1361 17.6693 7.1361V7.02959H17.4487C17.3385 7.02959 17.3385 7.13608 17.3385 7.2426C17.3385 7.2426 17.6692 7.77515 17.559 8.41419C17.4487 9.05324 17.3385 9.37278 17.3385 9.37278C17.3385 9.47929 17.3385 9.58579 17.4487 9.58579C17.559 9.58579 17.6693 9.58579 17.6693 9.47928Z" fill="black"/>
567 <path d="M16.677 9.37278C16.7872 9.37278 16.8975 9.37278 16.8975 9.26626L16.7872 9.26628C16.8975 9.26625 17.0077 8.94671 17.0077 8.20119C17.0077 7.45563 16.677 6.81657 16.677 6.81657H16.4565C16.3462 6.81657 16.3462 6.9231 16.3462 7.0296C16.3462 7.0296 16.677 7.56213 16.677 8.20119C16.677 8.84023 16.5667 9.15978 16.5667 9.15978C16.5667 9.26627 16.5667 9.37278 16.677 9.37278Z" fill="black"/>
568 <path d="M15.3993 10.9057C15.6177 10.3752 15.916 9.65055 16.1257 8.84023L16.1257 8.94673C16.4564 7.66863 15.7949 7.02957 15.7949 7.02957C14.762 6.60193 14.2722 6.07893 13.962 5.74775C13.8087 5.58402 13.6993 5.46718 13.5898 5.43194C13.4796 5.32543 13.1488 5.32542 12.8181 5.32542C12.7078 5.32542 12.5975 5.35205 12.4873 5.37868C12.377 5.40531 12.2668 5.43194 12.1565 5.43194C11.7155 5.43194 9.95146 6.17751 9.17968 6.60354C8.4079 7.02958 7.19512 7.3491 7.19512 7.3491L6.97462 7.45562C6.84292 7.49802 6.65878 7.50665 6.47788 7.51513C6.20447 7.52795 5.93845 7.54042 5.87209 7.66862C5.76185 7.98814 6.20282 8.20118 6.42334 8.30769C6.4574 8.30769 6.502 8.31786 6.56363 8.33191C6.70145 8.36334 6.92446 8.41419 7.30537 8.41419C7.44974 8.41419 7.59412 8.3939 7.75683 8.37103C7.9669 8.34151 8.20753 8.30769 8.51818 8.30769H8.73865C10.0617 8.30769 9.40019 9.58578 8.95918 10.3313C8.51817 11.1834 5.87209 14.4852 5.65159 14.6982C5.54134 14.9112 5.54132 15.1242 5.76184 15.3372C5.87207 15.4437 5.98234 15.5503 6.09259 15.5503C6.20283 15.5503 6.31311 15.4438 6.42337 15.3372C6.66368 15.1825 7.83515 14.0157 8.66929 13.1849C8.98326 12.8722 9.24943 12.6071 9.40018 12.4615C9.48443 12.4208 9.55258 12.3801 9.61078 12.3454C9.70494 12.2892 9.77308 12.2485 9.84121 12.2485C10.0617 12.2485 10.0618 12.4615 9.9515 12.781C9.82233 13.0306 9.23927 14.3033 8.75619 15.3577C8.41452 16.1035 8.12286 16.7401 8.07719 16.8284C7.96692 17.0414 8.18743 17.3609 8.29768 17.4674C8.40794 17.5739 8.51817 17.5739 8.62843 17.5739C8.8489 17.5739 8.95919 17.5739 9.06943 17.3609C9.51046 16.5089 11.054 13.8461 11.3848 13.4201C11.4269 13.3794 11.4529 13.3387 11.4751 13.304C11.5111 13.2478 11.5371 13.2071 11.6053 13.2071C11.7155 13.2071 11.7155 13.3136 11.7155 13.5265C11.7155 13.666 11.6315 14.3534 11.5368 15.1281C11.4146 16.1282 11.2745 17.2738 11.2745 17.5739C11.2745 18 11.6053 18 11.7155 18H11.8258C11.9361 18 12.1566 17.8935 12.2668 17.3609C12.3087 17.1585 12.3825 16.6946 12.4699 16.1445C12.6126 15.2472 12.7916 14.1209 12.9283 13.5266C13.0386 13.1006 13.1488 12.9941 13.2591 12.9941C13.3693 12.9941 13.5899 13.2071 13.5899 13.4201C13.5899 13.7396 13.8104 15.9763 13.9206 16.5089C14.0309 16.8284 14.1411 16.9349 14.3616 16.9349C14.5821 16.9349 14.8027 16.8284 14.8027 16.6154C14.9129 16.2959 14.9129 15.3376 14.9129 13.9533C14.8026 12.5686 14.9129 12.0355 15.1334 11.6095C15.1738 11.4535 15.2732 11.212 15.3993 10.9057Z" fill="black"/>
569 <path d="M2.5645 8.30769C2.5645 8.73373 2.78501 9.90532 3.22603 11.1834L3.22606 11.3965C3.77732 12.6746 4.65934 12.7811 4.65934 12.7811C4.99009 12.6746 5.32084 12.6746 5.65159 12.6746H6.20287C7.30511 11.2903 7.96659 10.3319 8.18729 10.0121L8.29772 9.90532L8.62847 9.26626C8.07722 9.37278 7.74647 9.37278 7.41572 9.37278C6.7542 9.37278 6.42342 9.26629 6.20291 9.15978C6.17769 9.13541 6.12362 9.0999 6.05259 9.05324C5.81309 8.89593 5.38069 8.61191 5.21062 8.20119C5.10037 7.98816 5.21061 7.66865 5.32087 7.34913C5.65163 6.71007 6.31314 6.71006 6.75415 6.71006H6.97465L7.19519 6.60356C7.52585 6.60356 8.07688 6.39064 8.62799 6.1777C8.54601 5.3065 8.70837 3.0806 8.79677 1.86513C8.82725 1.44602 8.849 1.14702 8.849 1.06509C8.849 0.745572 8.62849 0.532544 8.40797 0.532544H8.29768C8.07719 0.532544 7.85669 0.639052 7.85669 0.958589C7.85669 1.13288 7.65985 2.06777 7.46303 3.00263C7.29902 3.78159 7.13502 4.56052 7.0849 4.8994C6.97464 5.21892 6.86441 5.32544 6.75415 5.32544C6.6439 5.32544 6.42341 5.11241 6.42341 4.8994C6.38314 4.70492 6.28407 4.08432 6.16913 3.36439C5.96934 2.11291 5.72162 0.561265 5.65162 0.426045C5.54136 0.213017 5.32086 0 5.10034 0C4.87985 0 4.54909 0.213007 4.54909 0.532544C4.65935 1.49111 4.87984 4.47337 4.87984 5.00591C4.87984 5.21887 4.87984 5.32544 4.76959 5.32544C4.65935 5.32544 4.54907 5.21895 4.43881 5.11243C4.21831 4.89941 2.67478 1.91715 2.45428 1.49112C2.34402 1.27812 2.23376 1.27812 2.12351 1.27812C2.01326 1.27812 1.903 1.38462 1.903 1.38462C1.903 1.38462 1.46199 1.38461 1.79275 2.13018C2.01364 2.55698 3.11585 4.68664 3.44653 5.64497C3.55678 6.1775 3.5568 6.28401 3.33628 6.28401C3.22604 6.28401 3.00553 6.17752 2.89528 6.07102C2.80394 5.98278 2.50451 5.63869 2.15371 5.23558C1.65763 4.6655 1.0588 3.97737 0.800466 3.72781C0.690224 3.5148 0.579948 3.51479 0.469684 3.51479C0.138934 3.51479 -0.08158 3.83433 0.0286845 4.04734C0.138927 4.36688 0.690191 5.21894 1.46196 6.28401C2.23373 7.34911 2.45424 7.88166 2.5645 8.30769Z" fill="black"/>
570 <path d="M3.88757 13.6331C3.9978 13.6331 4.10806 13.6331 4.10806 13.5266L3.99781 13.5266C3.99781 13.4201 3.99781 13.3136 3.88756 13.3136C3.88756 13.3136 3.33628 13.1006 2.89528 12.5681C2.56452 12.0355 2.45428 11.716 2.45428 11.716C2.45428 11.6095 2.34403 11.6095 2.23378 11.6095C2.12353 11.6095 2.1235 11.716 2.1235 11.8225C2.1235 11.8225 2.23373 12.142 2.67475 12.7811C3.11577 13.4201 3.77728 13.6331 3.77728 13.6331H3.88757Z" fill="black"/>
571 <path d="M3.00553 14.0592C3.00553 14.0592 3.11578 14.0592 3.11578 13.9527L3.22606 13.8462C3.22606 13.7397 3.22604 13.6332 3.11578 13.6332C3.11578 13.6332 2.56451 13.3136 2.23375 12.7811C1.79274 12.2486 1.79275 11.929 1.79275 11.929C1.79275 11.929 1.68248 11.8225 1.57221 11.8225C1.57221 11.8225 1.46196 11.929 1.46196 12.0355C1.46196 12.142 1.46196 12.4616 1.90296 13.1006C2.23372 13.7397 2.89528 14.0592 2.89528 14.0592H3.00553Z" fill="black"/>
572 </svg>
573 </div>
574
575 <div class="center-items">
576 <div class="font-size">
577 <div class="button">
578 <span>Aa</span>
579 </div>
580 <div class="font-size-area collapse">
581 <div class="font-size-options">
582 <span class="triangle"></span>
583 <div class="title">
584 <span>${textoMudarTamanhoFonte}</span> 585 </div>
586 <div class="font-size-links">
587 <div class="small-font-button">
588 <label for="small-font" class="small-font">Aa</label>
589 <input type="radio" id="${prefixoCSS}-small-font" name="size-font" value="0"> 590 </div>
591 <div class="medium-font-button">
592 <label for="medium-font" class="medium-font">Aa</label>
593 <input type="radio" id="${prefixoCSS}-medium-font" name="size-font" value="1" checked=""> 594 </div>
595 <div class="large-font-button">
596 <label for="large-font" class="large-font">Aa</label>
597 <input type="radio" id="${prefixoCSS}-large-font" name="size-font" value="2"> 598 </div>
599 </div>
600 </div>
601 </div>
602 </div>
603
604 <div class="social-network">
605 <div class="button" id="${prefixoCSS}-social-network-button"> 606 <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
607 <path d="M17.0008 13.0056C16.5147 13.0059 16.0359 13.1244 15.6058 13.3508C15.1756 13.5772 14.8069 13.9048 14.5314 14.3053L5.93371 10.6263C6.02704 10.2183 6.02704 9.79455 5.93371 9.3866L14.5314 5.69757C14.9389 6.2886 15.5448 6.7139 16.2391 6.8962C16.9335 7.0785 17.6701 7.00571 18.3154 6.69106C18.9606 6.37641 19.4716 5.84076 19.7555 5.18143C20.0394 4.52209 20.0774 3.78279 19.8625 3.09782C19.6477 2.41286 19.1944 1.82765 18.5848 1.44852C17.9752 1.06938 17.2499 0.921465 16.5405 1.03163C15.8312 1.14179 15.1848 1.50272 14.719 2.04888C14.2531 2.59503 13.9985 3.29016 14.0016 4.00801C13.9996 4.21671 14.0231 4.42487 14.0716 4.62785L5.47384 8.30688C5.11194 7.7784 4.59037 7.37965 3.98547 7.16902C3.38058 6.9584 2.72413 6.94696 2.11227 7.13638C1.5004 7.3258 0.965247 7.70612 0.585157 8.22167C0.205068 8.73722 0 9.36092 0 10.0014C0 10.642 0.205068 11.2656 0.585157 11.7812C0.965247 12.2968 1.5004 12.6771 2.11227 12.8665C2.72413 13.0559 3.38058 13.0445 3.98547 12.8338C4.59037 12.6232 5.11194 12.2245 5.47384 11.696L14.0716 15.385C14.0231 15.588 13.9996 15.7962 14.0016 16.0048C14.0016 16.598 14.1775 17.1779 14.507 17.6711C14.8366 18.1643 15.305 18.5488 15.853 18.7758C16.4011 19.0028 17.0041 19.0621 17.5859 18.9464C18.1677 18.8307 18.7021 18.5451 19.1216 18.1256C19.541 17.7062 19.8266 17.1718 19.9424 16.59C20.0581 16.0082 19.9987 15.4051 19.7717 14.8571C19.5447 14.3091 19.1603 13.8407 18.6671 13.5111C18.1739 13.1816 17.594 13.0056 17.0008 13.0056Z" fill="#2F2F2F"></path>
608 </svg>
609 </div>
610 <div class="social-options-area collapse">
611 <div class="social-options">
612 <span class="triangle"></span>
613 <div class="title">
614 <span>${textoCompartilheEsteCapitulo}</span> 615 </div>
616 <div class="social-links">
617
618 <#setting url_escaping_charset='ISO-8859-1'>
619 <#assign urlParaCompartilharCapitulo = criarLinkParaCapitulo(urlDoCapituloAtual) />
620
621 <div class="twitter">
622 <#assign urlTwitter = "https://twitter.com/intent/tweet?url=" + urlParaCompartilharCapitulo + "&text=" + tituloDoCapituloAtual />
623 <#assign urlTwitter = urlTwitter />
624 <a href="${urlTwitter}" target="_blank"> 625 <svg width="12px" height="10px" viewBox="0 0 12 10" xmlns="http://www.w3.org/2000/svg">
626 <path d="M10.7789 2.4974C11.2485 2.14515 11.6712 1.72245 12 1.2293C11.5773 1.41717 11.0841 1.55807 10.591 1.60503C11.1076 1.29975 11.4834 0.830081 11.6712 0.242997C11.2016 0.524797 10.6614 0.736148 10.1213 0.853564C9.65166 0.360414 9.01761 0.0786133 8.31311 0.0786133C6.95108 0.0786133 5.84736 1.18233 5.84736 2.54437C5.84736 2.73223 5.87084 2.9201 5.91781 3.10797C3.87476 2.99055 2.04305 2.00425 0.821918 0.524797C0.610568 0.877048 0.493151 1.29975 0.493151 1.76942C0.493151 2.61482 0.915851 3.36628 1.59687 3.81247C1.19765 3.78899 0.798434 3.69505 0.469667 3.50718V3.53067C0.469667 4.72832 1.31507 5.71462 2.44227 5.94945C2.2544 5.99642 2.01957 6.04339 1.80822 6.04339C1.64384 6.04339 1.50294 6.01991 1.33855 5.99642C1.64384 6.98272 2.55969 7.68722 3.63992 7.71071C2.79452 8.36824 1.73777 8.76746 0.587084 8.76746C0.375734 8.76746 0.187867 8.74398 0 8.72049C1.08023 9.42499 2.37182 9.82421 3.78082 9.82421C8.31311 9.82421 10.7789 6.09036 10.7789 2.82617C10.7789 2.70875 10.7789 2.61482 10.7789 2.4974Z" fill="#008542"></path>
627 </svg>
628 </a>
629 </div>
630 <div class="facebook">
631 <#assign facebookUrl = "https://www.facebook.com/sharer/sharer.php?u=" + urlParaCompartilharCapitulo />
632 <#assign facebookUrl = facebookUrl />
633 <a href="${facebookUrl}" target="_blank"> 634 <svg width="7px" height="12px" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg">
635 <path d="M1.80469 12H4.00781V6.63281H5.71875L6 4.5H4.00781V3.02344C4.00781 2.69531 4.05469 2.4375 4.19531 2.27344C4.33594 2.08594 4.64062 1.99219 5.0625 1.99219H6.1875V0.09375C5.76562 0.046875 5.20312 0 4.54688 0C3.70312 0 3.04688 0.257812 2.55469 0.75C2.03906 1.24219 1.80469 1.92188 1.80469 2.8125V4.5H0V6.63281H1.80469V12Z" fill="#008542"></path>
636 </svg>
637 </a>
638 </div>
639 <div class="linkedin">
640
641 <#assign linkedinUrl = "https://www.linkedin.com/shareArticle?mini=true&url=" + urlParaCompartilharCapitulo + "&title=" + tituloDoCapituloAtual />
642 <#assign linkedinUrl = linkedinUrl />
643 <a href="${linkedinUrl}" target="_blank"> 644 <svg width="12px" height="12px" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
645 <path d="M11.1429 0H0.830357C0.375 0 0 0.401786 0 0.883929V11.1429C0 11.625 0.375 12 0.830357 12H11.1429C11.5982 12 12 11.625 12 11.1429V0.883929C12 0.401786 11.5982 0 11.1429 0ZM3.61607 10.2857H1.84821V4.58036H3.61607V10.2857ZM2.73214 3.77679C2.14286 3.77679 1.6875 3.32143 1.6875 2.75893C1.6875 2.19643 2.14286 1.71429 2.73214 1.71429C3.29464 1.71429 3.75 2.19643 3.75 2.75893C3.75 3.32143 3.29464 3.77679 2.73214 3.77679ZM10.2857 10.2857H8.49107V7.5C8.49107 6.85714 8.49107 6 7.58036 6C6.64286 6 6.50893 6.72321 6.50893 7.47321V10.2857H4.74107V4.58036H6.42857V5.35714H6.45536C6.69643 4.90179 7.28571 4.41964 8.14286 4.41964C9.9375 4.41964 10.2857 5.625 10.2857 7.15179V10.2857Z" fill="#008542"/>
646 </svg>
647 </a>
648 </div>
649 </div>
650 </div>
651 </div>
652 </div>
653
654 <div class="blue-filter-button" id="${prefixoCSS}-blue-filter-button"> 655 <svg id="blue-filter-icon" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
656 <path fill-rule="evenodd" clip-rule="evenodd" d="M17.07 2.92785C15.4338 1.29215 13.2811 0.274385 10.9786 0.0479801C8.67612 -0.178425 6.36638 0.400541 4.44292 1.68622C2.51946 2.97189 1.1013 4.88473 0.430087 7.09881C-0.241124 9.31288 -0.123854 11.6912 0.761904 13.8285C1.64766 15.9658 3.2471 17.7299 5.28771 18.8201C7.32831 19.9103 9.68382 20.2593 11.9529 19.8074C14.2219 19.3556 16.2641 18.1311 17.7314 16.3423C19.1988 14.5536 20.0005 12.3114 20 9.99785C20.0036 8.68417 19.7464 7.38284 19.2435 6.16924C18.7405 4.95565 18.0018 3.85391 17.07 2.92785ZM10 18.8278C8.25359 18.8278 6.5464 18.31 5.09432 17.3397C3.64223 16.3695 2.51047 14.9904 1.84215 13.3769C1.17383 11.7635 0.998955 9.98805 1.33966 8.2752C1.68037 6.56235 2.52135 4.98899 3.75624 3.7541C4.99114 2.5192 6.56451 1.67822 8.27736 1.33752C9.99021 0.996808 11.7656 1.17167 13.3791 1.84C14.9926 2.50832 16.3716 3.64008 17.3419 5.09216C18.3121 6.54425 18.83 8.25144 18.83 9.99785C18.8274 12.3389 17.8962 14.5833 16.2408 16.2387C14.5855 17.894 12.3411 18.8252 10 18.8278ZM5.12001 9.99804C5.12001 9.84156 5.05785 9.6915 4.9472 9.58085C4.83655 9.4702 4.68649 9.40804 4.53001 9.40804H3.36001C3.27677 9.39714 3.19215 9.40412 3.11183 9.42853C3.0315 9.45294 2.95731 9.4942 2.89421 9.54958C2.8311 9.60495 2.78056 9.67315 2.74592 9.74963C2.71129 9.8261 2.69336 9.90909 2.69336 9.99304C2.69336 10.077 2.71129 10.16 2.74592 10.2365C2.78056 10.3129 2.8311 10.3811 2.89421 10.4365C2.95731 10.4919 3.0315 10.5331 3.11183 10.5576C3.19215 10.582 3.27677 10.5889 3.36001 10.578H4.53001C4.68477 10.5781 4.83334 10.5173 4.94371 10.4088C5.05407 10.3003 5.11738 10.1528 5.12001 9.99804ZM5.61938 12.2658C5.6805 12.3126 5.7317 12.3711 5.76997 12.4379C5.83985 12.5714 5.85599 12.7266 5.81508 12.8716C5.77417 13.0167 5.67932 13.1405 5.54997 13.2179L4.54997 13.8079C4.48461 13.8661 4.40712 13.909 4.32312 13.9336C4.23912 13.9581 4.1507 13.9636 4.06428 13.9498C3.97787 13.936 3.89562 13.9031 3.82349 13.8535C3.75136 13.8039 3.69116 13.7389 3.64725 13.6632C3.60334 13.5875 3.57683 13.503 3.56963 13.4158C3.56242 13.3286 3.57471 13.2409 3.60561 13.159C3.6365 13.0771 3.68521 13.0031 3.74823 12.9424C3.81125 12.8816 3.887 12.8357 3.96997 12.8079L4.96997 12.2279C5.03612 12.1885 5.10944 12.1627 5.18567 12.1519C5.2619 12.1411 5.33952 12.1457 5.41399 12.1652C5.48845 12.1848 5.55826 12.2189 5.61938 12.2658ZM7.56003 14.2279C7.49388 14.1885 7.42056 14.1627 7.34433 14.1519C7.2681 14.1411 7.19049 14.1457 7.11603 14.1652C7.04157 14.1848 6.97174 14.2189 6.91062 14.2658C6.8495 14.3126 6.7983 14.3711 6.76003 14.4379L6.17003 15.4379C6.1268 15.5668 6.1294 15.7066 6.17739 15.8338C6.22537 15.961 6.31579 16.0677 6.43338 16.1359C6.55097 16.2041 6.6885 16.2296 6.82273 16.2081C6.95695 16.1866 7.07963 16.1194 7.17003 16.0179L7.75003 15.0179C7.82562 14.8869 7.84806 14.732 7.8127 14.585C7.77735 14.438 7.68689 14.3101 7.56003 14.2279ZM9.58296 15.0507C9.6936 14.9401 9.84367 14.8779 10.0001 14.8779C10.1516 14.8777 10.2973 14.9357 10.4071 15.04C10.5169 15.1442 10.5824 15.2867 10.5901 15.4379V16.6379C10.5901 16.7944 10.528 16.9444 10.4173 17.0551C10.3067 17.1657 10.1566 17.2279 10.0001 17.2279C9.84367 17.2279 9.6936 17.1657 9.58296 17.0551C9.47231 16.9444 9.41015 16.7944 9.41015 16.6379V15.4679C9.41015 15.3114 9.47231 15.1614 9.58296 15.0507ZM10.0001 5.11803C10.1558 5.11546 10.3044 5.05247 10.4145 4.94238C10.5246 4.83229 10.5876 4.6837 10.5901 4.52803V3.35803C10.5901 3.20155 10.528 3.05149 10.4173 2.94084C10.3067 2.83019 10.1566 2.76803 10.0001 2.76803C9.84367 2.76803 9.6936 2.83019 9.58296 2.94084C9.47231 3.05149 9.41015 3.20155 9.41015 3.35803V4.52803C9.41273 4.6837 9.4757 4.83229 9.5858 4.94238C9.69589 5.05247 9.84447 5.11546 10.0001 5.11803ZM6.90405 5.7376C6.84346 5.68503 6.79444 5.62048 6.76007 5.54801L6.18007 4.55801C6.13219 4.42834 6.13137 4.28597 6.17773 4.15576C6.22409 4.02554 6.3147 3.91573 6.43374 3.84549C6.55279 3.77525 6.69272 3.74904 6.82911 3.77143C6.96551 3.79382 7.08972 3.86339 7.18007 3.968L7.76007 4.968C7.80591 5.03382 7.83761 5.10843 7.85315 5.18712C7.86869 5.26581 7.86774 5.34687 7.85036 5.42517C7.83297 5.50348 7.79954 5.57732 7.75216 5.64205C7.70479 5.70677 7.64452 5.76097 7.57513 5.80121C7.50575 5.84145 7.42878 5.86686 7.34907 5.87584C7.26937 5.88482 7.18867 5.87718 7.11207 5.85338C7.03548 5.82958 6.96464 5.79016 6.90405 5.7376ZM5.56002 6.75804L4.56002 6.16805C4.42577 6.09118 4.26669 6.07011 4.11706 6.10939C3.96743 6.14867 3.83921 6.24515 3.76002 6.37804C3.68351 6.51502 3.66369 6.6765 3.70481 6.82791C3.74594 6.97932 3.84473 7.1086 3.98002 7.18804L4.98002 7.76804C5.11263 7.84628 5.27089 7.86864 5.41998 7.83019C5.56907 7.79175 5.69678 7.69565 5.77502 7.56304C5.85326 7.43043 5.87561 7.27218 5.83717 7.12309C5.79872 6.97399 5.70264 6.84628 5.57003 6.76804L5.56002 6.75804ZM11.7601 6.72803C12.3011 6.43758 12.906 6.28637 13.5201 6.28803V6.26803C14.0804 6.27497 14.6318 6.40873 15.1331 6.65928C15.6343 6.90983 16.0722 7.27066 16.414 7.71468C16.7558 8.1587 16.9926 8.67438 17.1066 9.22301C17.2206 9.77163 17.2088 10.339 17.0722 10.8824C16.9356 11.4258 16.6776 11.9312 16.3177 12.3607C15.9578 12.7902 15.5053 13.1326 14.9941 13.3621C14.4829 13.5917 13.9264 13.7025 13.3663 13.6862C12.8062 13.6699 12.257 13.5269 11.7601 13.268C11.1948 13.571 10.5607 13.7222 9.91961 13.707C9.2785 13.6918 8.65227 13.5106 8.10203 13.1813C7.55179 12.8519 7.09633 12.3855 6.78009 11.8276C6.46384 11.2697 6.2976 10.6393 6.2976 9.99803C6.2976 9.35673 6.46384 8.72639 6.78009 8.16849C7.09633 7.6106 7.55179 7.1442 8.10203 6.81481C8.65227 6.48542 9.2785 6.30428 9.91961 6.28908C10.5607 6.27387 11.1948 6.42511 11.7601 6.72803ZM10.0001 12.538C10.2442 12.5373 10.4869 12.5002 10.7201 12.428C10.1267 11.7557 9.79928 10.8898 9.79928 9.99303C9.79928 9.09629 10.1267 8.2304 10.7201 7.55803C10.4864 7.48923 10.2437 7.45552 10.0001 7.45803C9.32644 7.45803 8.68038 7.72564 8.20404 8.20198C7.72769 8.67832 7.46009 9.32438 7.46009 9.99803C7.46009 10.6717 7.72769 11.3177 8.20404 11.7941C8.68038 12.2704 9.32644 12.538 10.0001 12.538Z" fill="#2F2F2F"></path>
657 </svg>
658 </div>
659
660 <div class="chapters-list-mobile-button" id="${prefixoCSS}-chapters-list-mobile-button"> 661 <svg width="16" height="12" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg">
662 <line y1="1" x2="16" y2="1" stroke="#008542" stroke-width="2"/>
663 <line y1="6" x2="16" y2="6" stroke="#008542" stroke-width="2"/>
664 <line y1="11" x2="16" y2="11" stroke="#008542" stroke-width="2"/>
665 </svg>
666 </div>
667
668 <div class="close-mobile-button">
669 <span>
670 <svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
671 <rect x="15" y="1.41431" width="18" height="2" transform="rotate(135 15 1.41431)" fill="#B4B4B4"/>
672 <rect x="13.5857" y="14.1421" width="18" height="2" transform="rotate(-135 13.5857 14.1421)" fill="#B4B4B4"/>
673 </svg>
674 </span>
675 </div>
676 </div>
677
678 <div class="chapters-list-button">
679 <div class="text">
680 <span>${textoListaDeCapitulos}</span> 681 </div>
682 <svg width="16px" height="12px" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg">
683 <line y1="1" x2="16" y2="1" stroke="#008542" stroke-width="2"/>
684 <line y1="6" x2="16" y2="6" stroke="#008542" stroke-width="2"/>
685 <line y1="11" x2="16" y2="11" stroke="#008542" stroke-width="2"/>
686 </svg>
687 </div>
688 </div>
689
690 <span id="search-box-rectangle"></span>
691 <div class="search-container">
692 <input type="text" class="search_input" id="search-field" value="" placeholder="Pesquise por palavra ou frase">
693 <svg id="search-button" width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
694 <path d="M21.0002 20.0494L15.5702 14.5394C16.8252 13.0628 17.513 11.1873 17.5102 9.24939C17.5167 7.36751 16.8804 5.53981 15.7067 4.06883C14.5329 2.59784 12.8921 1.57176 11.0557 1.16043C9.2193 0.749093 7.29749 0.977169 5.60839 1.8069C3.91929 2.63663 2.56415 4.01826 1.76729 5.72311C0.97043 7.42796 0.779624 9.35382 1.22644 11.1819C1.67326 13.01 2.73093 14.6307 4.22437 15.7757C5.71781 16.9208 7.55746 17.5215 9.43886 17.4786C11.3203 17.4356 13.1306 16.7514 14.5702 15.5394L20.0002 21.0394L21.0002 20.0494ZM9.2802 16.0494C7.93133 16.0494 6.61274 15.6494 5.4912 14.9C4.36966 14.1506 3.49552 13.0855 2.97933 11.8393C2.46314 10.5931 2.32808 9.22183 2.59124 7.89888C2.85439 6.57593 3.50393 5.36071 4.45772 4.40692C5.41152 3.45312 6.62673 2.80358 7.94968 2.54043C9.27263 2.27728 10.6439 2.41234 11.8901 2.92852C13.1363 3.44471 14.2014 4.31885 14.9508 5.4404C15.7002 6.56194 16.1002 7.88051 16.1002 9.22938C16.1015 10.1272 15.9258 11.0164 15.5831 11.8462C15.2405 12.676 14.7376 13.4301 14.1033 14.0654C13.4689 14.7007 12.7155 15.2047 11.8862 15.5485C11.0569 15.8924 10.168 16.0694 9.27019 16.0694L9.2802 16.0494Z" fill="#9E9E9E"/>
695 </svg>
696 <svg id="clean-search-button" width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
697 <rect x="10" y="1.00015" width="12.7279" height="1.41421" transform="rotate(135 10 1.00015)" fill="#B4B4B4"/>
698 <rect x="9" y="10" width="12.7279" height="1.41421" transform="rotate(-135 9 10)" fill="#B4B4B4"/>
699 </svg>
700 <label for="search-field">Faça sua busca no campo acima</label>
701 <div class="search-results-container">
702 </div>
703 </div>
704
705 </div>
706</section>
707
708
709<section class="${prefixoCSS}"> 710 <div id="${prefixoCSS}-content" class="portlet-layout row"> 711 <div class="summary col-lg-4 col-sm-3">
712 <div class="summary-area">
713 <#assign exibirTituloNesteCapitulo = false />
714 <#if listaDeTopicos?size gt 0>
715 <#assign topic = listaDeTopicos[0] />
716 <#if listaDeTopicos?size == 1>
717 <#assign tituloDoTopico = recuperarUnicoNo(idTituloDoTopico , topic) />
718 <#if tituloDoTopico?? && tituloDoTopico?has_content>
719 <#assign exibirTituloNesteCapitulo = true />
720 </#if>
721 <#else>
722 <#assign exibirTituloNesteCapitulo = true />
723 </#if>
724 </#if>
725 <#if exibirTituloNesteCapitulo>
726 <div class="title">
727 <h3>${textoNesteCapitulo}</h3> 728 </div>
729 <div class="list">
730 <#assign baseParaLigacaoDeAncora = criarLinkParaCapitulo(urlDoCapituloAtual) />
731 <#list listaDeTopicos as topic>
732 <#assign tituloDoTopico = recuperarUnicoNo(idTituloDoTopico , topic) />
733 <#if tituloDoTopico??>
734 <#assign ancora = criarAncora(tituloDoTopico) />
735 <#else >
736 <#assign ancora = "!" />
737 </#if>
738 <#assign ancora = "#" + ancora />
739 <div class="item">
740 <h4><a href="${ancora}">${tituloDoTopico}</a></h4> 741 </div>
742 </#list>
743 </div>
744 <#else>
745 <div class="title" style="display: none">
746 </div>
747 <div class="list" style="display: none">
748 </div>
749 </#if>
750 <#if tituloDaUrlProximoCapitulo?length !=0>
751 <div class="next-chapter">
752 <div>
753 <#assign ligacao = criarLinkParaCapitulo(tituloDaUrlProximoCapitulo)/>
754 <a href="${ligacao}"> 755 <span>${textoProximoCapitulo}</span> 756 <svg width="20px" height="18px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
757 <path fill="#008542" d="M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z" />
758 </svg>
759 </a>
760 </div>
761 </div>
762 </#if>
763 <#if tituloDaUrlCapituloAnterior?length !=0>
764 <div class="next-chapter">
765 <div>
766 <#assign ligacao = criarLinkParaCapitulo(tituloDaUrlCapituloAnterior)/>
767 <a href="${ligacao}"> 768 <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
769 <path d="M0.292892 8.70711C-0.0976315 8.31658 -0.0976315 7.68342 0.292892 7.29289L6.65685 0.928932C7.04738 0.538408 7.68054 0.538408 8.07107 0.928932C8.46159 1.31946 8.46159 1.95262 8.07107 2.34315L2.41421 8L8.07107 13.6569C8.46159 14.0474 8.46159 14.6805 8.07107 15.0711C7.68054 15.4616 7.04738 15.4616 6.65685 15.0711L0.292892 8.70711ZM17 9H1V7H17V9Z" fill="#008542"/>
770 </svg>
771 <span>${textoCapituloAnterior}</span> 772 </a>
773 </div>
774 </div>
775 </#if>
776 </div>
777 </div>
778 <div class="chapter col-lg-8 col-sm-9">
779 <div class="header">
780 <div class="tag-reading">
781 <div class="tag ${nomeDaCategoriaParaCSS}"> 782 <#assign categoriaParaOCapitulo = "" />
783 <#if categoriaParaDoCapituloAtual?length gt 0>
784 <#assign categoriaParaOCapitulo = categoriaParaDoCapituloAtual />
785 <#else>
786 <#assign categoriaParaOCapitulo = textoContagemCapitulos />
787 </#if>
788 <h3>${categoriaParaOCapitulo}</h3> 789 </div>
790 <div class="separator"></div>
791 <div class="reading">
792 <span>${tempoDeLeitura} ${textoTempoDeLeituraDoCapitulo}</span> 793 </div>
794 </div>
795 <div class="title">
796 <span>${tituloDoCapituloAtual}</span> 797 </div>
798 </div>
799
800 <#attempt>
801 <#if htmlIframeAudioCapitulo?? && htmlIframeAudioCapitulo?has_content >
802 ${htmlIframeAudioCapitulo} 803 </#if>
804 <#recover>
805 </#attempt>
806
807 <#if !introducaoCapitulo?has_content && !exibirTituloNesteCapitulo >
808 <div class="introduction" style="padding:0; ">
809 <#else>
810 <#if !introducaoCapitulo?has_content && exibirTituloNesteCapitulo >
811 <div class="introduction" style="padding:0; ">
812 <#else>
813 <div class="introduction">
814 </#if>
815 </#if>
816 ${introducaoCapitulo} 817 </div>
818
819 <#if !exibirTituloNesteCapitulo >
820 <div class="topics" style="padding:0; ">
821 <#else>
822 <div class="topics">
823 </#if>
824 <#list listaDeTopicos as topico>
825 <#assign tituloDoTopico = recuperarUnicoNo(idTituloDoTopico, topico) />
826 <#if !tituloDoTopico?? || !tituloDoTopico?has_content>
827 <#assign tituloDoTopico = ""/>
828 </#if>
829 <#assign topicoConteudo = recuperarUnicoNo(idConteudoDoTopico, topico) />
830 <#if !topicoConteudo?? || !topicoConteudo?has_content>
831 <#assign topicoConteudo = ""/>
832 </#if>
833 <#assign imagemLarguraPagina = recuperarUnicoNo(idImagemLarguraDaPagina, topico) />
834 <#assign classeImagemLarguraPagina = "" />
835 <#if imagemLarguraPagina?? && imagemLarguraPagina?length gt 0>
836 <#assign classeImagemLarguraPagina = "img-full-width" />
837 </#if>
838 <#assign ancora = criarAncora(tituloDoTopico) />
839 <#if !exibirTituloNesteCapitulo>
840 <div class="topic ${classeImagemLarguraPagina}" style="padding:0; "> 841 <h2 class="title" id="${ancora}" style="padding:0; ">${tituloDoTopico}</h2> 842 <div class="content">${topicoConteudo}</div> 843 </div>
844 <#else>
845 <div class="topic ${classeImagemLarguraPagina}"> 846 <h2 class="title" id="${ancora}">${tituloDoTopico}</h2> 847 <div class="content">${topicoConteudo}</div> 848 </div>
849 </#if>
850 </#list>
851 </div>
852 <#attempt>
853 <#assign pdfLink = recuperarUnicoNo(idPDFDoCapitulo, capituloElementoRaiz) />
854 <#if !pdfLink??>
855 <#assign pdfLink = "" />
856 </#if>
857 <#recover>
858 <#assign pdfLink = "" />
859 </#attempt>
860
861 <#if pdfLink?length gt 0 >
862 <div class="read-full-report">
863 <div class="read-full-report-area">
864 <div class="title">
865 <span>${textoBaixarRelatorioCompleto}</span> 866 </div>
867 <div class="link">
868 <div>
869 <a href="${pdfLink}" target="_self"> 870 <span>${textoDoBotaoDoBannerDoPdfRodapeCapitulo}</span> 871 <svg width="15px" height="14px" viewBox="0 0 15 14" xmlns="http://www.w3.org/2000/svg">
872 <path d="M8.24998 0.25L10.7197 2.71975L5.46973 7.96975L6.53023 9.03025L11.7802 3.78025L14.25 6.25V0.25H8.24998Z" fill="white"></path>
873 <path d="M12.75 12.25H2.25V1.75H7.5L6 0.25H2.25C1.42275 0.25 0.75 0.92275 0.75 1.75V12.25C0.75 13.0773 1.42275 13.75 2.25 13.75H12.75C13.5773 13.75 14.25 13.0773 14.25 12.25V8.5L12.75 7V12.25Z" fill="white"></path>
874 </svg>
875 </a>
876 </div>
877 </div>
878 </div>
879 </div>
880 </#if>
881 <div class="footer" id="${prefixoCSS}-footer"> 882 <hr class="separator" />
883
884 <div class="bottom" >
885
886 <#if tituloDaUrlCapituloAnterior?length !=0>
887 <div class="next-chapter">
888 <#assign proximoCapituloLInk = criarLinkParaCapitulo(tituloDaUrlCapituloAnterior)/>
889 <a href="${proximoCapituloLInk}"> 890 <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
891 <path d="M0.292892 8.70711C-0.0976315 8.31658 -0.0976315 7.68342 0.292892 7.29289L6.65685 0.928932C7.04738 0.538408 7.68054 0.538408 8.07107 0.928932C8.46159 1.31946 8.46159 1.95262 8.07107 2.34315L2.41421 8L8.07107 13.6569C8.46159 14.0474 8.46159 14.6805 8.07107 15.0711C7.68054 15.4616 7.04738 15.4616 6.65685 15.0711L0.292892 8.70711ZM17 9H1V7H17V9Z" fill="#008542"/>
892 </svg>
893 <span>${textoCapituloAnterior}</span> 894 </a>
895 </div>
896 </#if>
897
898 <#if tituloDaUrlProximoCapitulo?length !=0>
899 <div class="next-chapter">
900 <#assign proximoCapituloLInk = criarLinkParaCapitulo(tituloDaUrlProximoCapitulo)/>
901 <a href="${proximoCapituloLInk}"> 902 <span> ${textoProximoCapitulo} </span> 903 <svg width="20px" height="18px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
904 <path fill="#008542" d="M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"></path>
905 </svg>
906 </a>
907 </div>
908 </#if>
909
910 <div class="chapters-list-button">
911 <div class="title">
912 <span>${textoListaDeCapitulos}</span> 913 </div>
914 <svg width="16px" height="12px" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg">
915 <line y1="1" x2="16" y2="1" stroke="#008542" stroke-width="2"/>
916 <line y1="6" x2="16" y2="6" stroke="#008542" stroke-width="2"/>
917 <line y1="11" x2="16" y2="11" stroke="#008542" stroke-width="2"/>
918 </svg>
919 </div>
920 </div>
921 </div>
922 </div>
923 </div>
924</section>
925
926<section class="${prefixoCSS}"> 927 <div class="chapters-list-menu collapse" id="${prefixoCSS}-chapters-list-menu"> 928 <div class="header">
929 <div class="title">
930 <span>${textoBaseDoTituloDoRelatorio} ${anoRelatorio}</span> 931 </div>
932 <div class="close">
933 <a href="#!"><span>x</span></a>
934 </div>
935 </div>
936 <nav class="menu-items">
937 <div class="no-category">
938 <#list capitulosSemCategoria as artigoDoCapitulo>
939 <#assign tituloDoCapituo = recuperarTituloDoCapitulo(artigoDoCapitulo) />
940 <#if !tituloDoCapituo?? || !tituloDoCapituo?has_content>
941 <#assign tituloDoCapituo = "" />
942 </#if>
943 <#assign urlDoCapitulo = recuperarTitulUrloDoCapitulo(artigoDoCapitulo) />
944 <#if !urlDoCapitulo?? || !urlDoCapitulo?has_content>
945 <#assign urlDoCapitulo = "" />
946 </#if>
947 <#assign link = criarLinkParaCapitulo(urlDoCapitulo)/>
948 <#if !link?? || !link?has_content>
949 <#assign link = "#!" />
950 </#if>
951 <#if tituloDoCapituo = tituloDoCapituloAtual>
952 <a class="actual-chapter" href="${link}" target="_self">${tituloDoCapituo}</a> 953 <#else>
954 <a href="${link}" target="_self">${tituloDoCapituo}</a> 955 </#if>
956 </#list>
957 </div>
958
959 <div class="categories">
960 <#list ordemDaCategoria?keys?sort as ordem>
961 <#assign categoria = ordemDaCategoria[ordem] />
962 <div class="category">
963 <#assign nomeDaCategoriaParaCSS = removerCartactersEspeciais(categoria) />
964 <div class="title category-${nomeDaCategoriaParaCSS}"> 965 <h2><span>${categoria}</span></h2> 966 </div>
967 <div class="links">
968 <#assign capitulosNaCategoria = capitulosPorCategoria[categoria] />
969 <#list capitulosNaCategoria as artigoDoCapitulo>
970 <#assign tituloDoCapituo = recuperarTituloDoCapitulo(artigoDoCapitulo)/>
971 <#if !tituloDoCapituo?? || !tituloDoCapituo?has_content>
972 <#assign tituloDoCapituo = "" />
973 </#if>
974 <#assign url = recuperarTitulUrloDoCapitulo(artigoDoCapitulo)/>
975 <#if !url?? || !url?has_content>
976 <#assign url = "" />
977 </#if>
978 <#assign link = criarLinkParaCapitulo(url)/>
979 <#if !link?? || !link?has_content>
980 <#assign link = "#!" />
981 </#if>
982
983 <#if tituloDoCapituo = tituloDoCapituloAtual>
984 <a class="actual-chapter" href="${link}" target="_self">${tituloDoCapituo}</a> 985 <#else>
986 <a href="${link}" target="_self">${tituloDoCapituo}</a> 987 </#if>
988 </#list>
989 </div>
990 </div>
991 </#list>
992 </div>
993 </nav>
994 </div>
995</section>
996
997
998<section class="${prefixoCSS}"> 999 <div id="${prefixoCSS}-mobile-summary"> 1000
1001 <#assign esconderBotao = "" />
1002 <#if exibindoNaPaginaDeSustentabilidade >
1003 <#assign esconderBotao = "hidden"/>
1004 </#if>
1005
1006 <div class="in-this-chapter-button ${esconderBotao}"> 1007 <span>${textoNesteCapitulo}</span> 1008 <svg width="17px" height="12px" viewBox="0 0 17 12" xmlns="http://www.w3.org/2000/svg">
1009 <line x1="0.5" y1="1" x2="2.5" y2="1" stroke="#008542" stroke-width="2"/>
1010 <line x1="0.5" y1="6" x2="2.5" y2="6" stroke="#008542" stroke-width="2"/>
1011 <line x1="0.5" y1="11" x2="2.5" y2="11" stroke="#008542" stroke-width="2"/>
1012 <line x1="4.5" y1="1" x2="16.5" y2="1" stroke="#008542" stroke-width="2"/>
1013 <line x1="4.5" y1="6" x2="16.5" y2="6" stroke="#008542" stroke-width="2"/>
1014 <line x1="4.5" y1="11" x2="16.5" y2="11" stroke="#008542" stroke-width="2"/>
1015 </svg>
1016 </div>
1017
1018 <div class="summary-area hidden">
1019 <div class="close-button">
1020 <svg width="15px" height="15px" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
1021 <rect x="15" y="1.41418" width="18" height="2" transform="rotate(135 15 1.41418)" fill="#B4B4B4"/>
1022 <rect x="13.5857" y="14.1422" width="18" height="2" transform="rotate(-135 13.5857 14.1422)" fill="#B4B4B4"/>
1023 </svg>
1024 </div>
1025
1026 <div class="summary-content">
1027 <div class="header">
1028 <#assign nomeDaCategoriaParaCSS = removerCartactersEspeciais(categoriaParaDoCapituloAtual) />
1029 <div class="category category-${nomeDaCategoriaParaCSS}"> 1030 <span>${categoriaParaDoCapituloAtual}</span> 1031 </div>
1032 <div class="title">
1033 <span>${tituloDoCapituloAtual}</span> 1034 </div>
1035 </div>
1036 <div class="list">
1037 <#assign baseDaAncora = criarLinkParaCapitulo(urlDoCapituloAtual) />
1038 <#list listaDeTopicos as topico>
1039 <#assign tituloDoTopico = recuperarUnicoNo(idTituloDoTopico , topico) />
1040 <#if !tituloDoTopico?? || !tituloDoTopico?has_content>
1041 <#assign tituloDoTopico = "" />
1042 </#if>
1043 <#assign ancora = criarAncora(tituloDoTopico) />
1044 <#if !ancora?? || !ancora?has_content>
1045 <#assign ancora = "" />
1046 </#if>
1047 <#assign ancora = baseDaAncora + "#" + ancora />
1048 <#if !ancora?? || !ancora?has_content>
1049 <#assign ancora = "#!" />
1050 </#if>
1051 <div class="item">
1052 <a href="${ancora}" target="_self"><span>${tituloDoTopico}</span></a> 1053 </div>
1054 </#list>
1055 </div>
1056
1057 <#if tituloDaUrlCapituloAnterior?length !=0>
1058 <div class="next-chapter">
1059 <div>
1060 <#assign linkToBack = criarLinkParaCapitulo(tituloDaUrlCapituloAnterior)/>
1061 <#if !linkToBack?? || !link?has_content>
1062 <#assign linkToBack = "#!" />
1063 </#if>
1064 <a href="${linkToBack}"> 1065 <span>${textoCapituloAnterior}</span> 1066 <svg width="20px" height="18px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
1067 <path fill="#008542" d="M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z" />
1068 </svg>
1069 </a>
1070 </div>
1071 </div>
1072 </#if>
1073
1074 <#if tituloDaUrlProximoCapitulo?length !=0>
1075 <div class="next-chapter">
1076 <div>
1077 <#assign link = criarLinkParaCapitulo(tituloDaUrlProximoCapitulo)/>
1078 <#if !link?? || !link?has_content>
1079 <#assign link = "#!" />
1080 </#if>
1081 <a href="${link}"> 1082 <span>${textoProximoCapitulo}</span> 1083 <svg width="20px" height="18px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
1084 <path fill="#008542" d="M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z" />
1085 </svg>
1086 </a>
1087 </div>
1088 </div>
1089 </#if>
1090 </div>
1091 </div>
1092 </div>
1093</section>
1094
1095
1096<#list categoriesList as categories >
1097
1098 <#assign categoriesCss = removerCartactersEspeciais(categories.title) >
1099
1100 <style>
1101
1102 #${prefixoCSS}-content .chapter .header .tag-reading .${categoriesCss} { 1103 background: #${categories.color}; 1104 padding: 6px 16px;
1105 border-radius: 4px;
1106 }
1107
1108 #${prefixoCSS}-content .chapter .header .tag-reading .${categoriesCss} h3 { 1109 color: white !important;
1110 }
1111
1112
1113 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category .title.category-${categoriesCss} h2 span, 1114 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category .title.category-${categoriesCss} h2 span{ 1115 background: #${categories.color} !important; 1116 }
1117
1118 #${prefixoCSS}-mobile-summary .summary-area .summary-content .header .category.category-${categoriesCss} span { 1119 color: #${categories.color} !important; 1120 }
1121
1122
1123 </style>
1124
1125
1126</#list>
1127
1128
1129
1130
1131
1132
1133<style>
1134
1135 /* Funcionalidade de sobreposição de texto */
1136
1137 #${prefixoCSS}-content .chapter .introduction cite { 1138 vertical-align: super !important;
1139 font-size: 0.7em;
1140 }
1141
1142 #${prefixoCSS}-content .chapter .topics cite { 1143 vertical-align: super !important;
1144 font-size: 0.7em;
1145 }
1146
1147 /* SEARCH */
1148
1149 .${prefixoCSS} #${prefixoCSS}-header .search-icon svg { 1150 height: 17px;
1151 margin-right: 16px;
1152 cursor: pointer;
1153 }
1154
1155
1156 .${prefixoCSS} #${prefixoCSS}-header #search-box-rectangle { 1157 position: absolute;
1158 width: 7.48px;
1159 height: 7.48px;
1160 right: 630px;
1161 top: 68px;
1162 background: #FFFFFF;
1163 z-index: 9;
1164 transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);
1165
1166 display: none;
1167
1168 }
1169
1170 .${prefixoCSS} #${prefixoCSS}-header #search-box-rectangle.active { 1171 display: block;
1172 }
1173
1174
1175 .${prefixoCSS} .modal-overlay { 1176 position: absolute;
1177 top: -20vh;
1178 left: -10vw;
1179 width: 110vw;
1180 height: 130vh;
1181 z-index: 1;
1182 /*background: #0000008a;*/
1183 display: none;
1184 }
1185
1186 .${prefixoCSS} .modal-overlay.active { 1187 display: block;
1188 }
1189
1190 .${prefixoCSS} #${prefixoCSS}-header .search-container { 1191 display: none;
1192
1193 position: absolute;
1194 width: 352px;
1195 min-height: 185px;
1196 max-height: 398px;
1197 right: 420px;
1198 top: 72px;
1199 background: #FFFFFF;
1200 border: 1px solid #E8E8E8;
1201 border-radius: 8px;
1202 padding-bottom: 10px;
1203 z-index: 10;
1204 overflow-x: hidden;
1205 overflow-y: auto;
1206
1207 }
1208
1209 .${prefixoCSS} #${prefixoCSS}-header .search-container.active { 1210 display: block;
1211 }
1212
1213 .${prefixoCSS} #${prefixoCSS}-header .search-container.results{ 1214 height: 398px;
1215
1216 }
1217 .${prefixoCSS} #${prefixoCSS}-header .search-container input { 1218 width: 301px;
1219 height: 48px;
1220 background: #FFFFFF;
1221
1222 border: 1px solid #D4D4D4;
1223 border-radius: 4px;
1224 margin: 24px;
1225 padding-left: 44px;
1226 padding-right: 24px;
1227 }
1228
1229 .${prefixoCSS} #${prefixoCSS}-header .search-container #search-button { 1230 position: absolute;
1231 top: 40px;
1232 left: 38px;
1233 height: 16px;
1234 width: 16px;
1235 }
1236
1237 .${prefixoCSS} #${prefixoCSS}-header .search-container #search-button:active { 1238 opacity: 0.8;
1239 transform: scale(0.97);
1240 }
1241
1242
1243 .${prefixoCSS} #${prefixoCSS}-header .search-container #clean-search-button { 1244 position: absolute;
1245 top: 35px;
1246 right: 32px;
1247 height: 10px;
1248 min-height: 10px;
1249 }
1250
1251 .${prefixoCSS} #${prefixoCSS}-header .search-container #clean-search-button:active{ 1252 opacity: 0.8;
1253 transform: scale(0.97);
1254 }
1255
1256
1257 .${prefixoCSS} #${prefixoCSS}-header .search-container input::placeholder { 1258 /* Chrome, Firefox, Opera, Safari 10.1+ */
1259 color: black;
1260 opacity: 1; /* Firefox */
1261 }
1262
1263 .${prefixoCSS} #${prefixoCSS}-header .search-container input:-ms-input-placeholder { /* Internet Explorer 10-11 */ 1264 color: black;
1265 }
1266
1267
1268 .${prefixoCSS} #${prefixoCSS}-header .search-container input::-ms-input-placeholder { 1269 /* Microsoft Edge */
1270 color: black;
1271 }
1272
1273 .${prefixoCSS} #${prefixoCSS}-header .search-container label { 1274 display: block;
1275 font-family: var(--font-family-base);
1276 font-style: normal;
1277 font-weight: 700;
1278 font-size: 12px;
1279 line-height: 16px;
1280
1281 color: #008542;
1282 margin-top: 17px;
1283 margin-left: auto;
1284 width: 100%;
1285 text-align: center;
1286 }
1287
1288
1289 .fragment_5587.cap { 1290 position: fixed;
1291 right: 410px;
1292 z-index: 100;
1293 }
1294
1295 @media screen and (min-width: 950px) and (max-width: 1200px) { 1296
1297 .${prefixoCSS} #${prefixoCSS}-header #search-box-rectangle { 1298 right: 54%;
1299 }
1300
1301 }
1302
1303 @media screen and (max-width: 949px) { 1304
1305 .${prefixoCSS} #${prefixoCSS}-header #search-box-rectangle { 1306 left: 430px;
1307 }
1308
1309 .${prefixoCSS} #${prefixoCSS}-header .search-container { 1310 left: 320px;
1311 }
1312
1313
1314 .fragment_5587.cap { 1315 left: 325px;
1316 }
1317
1318 }
1319
1320
1321 @media screen and (max-width: ${mobileScreenSize}px) { 1322
1323 .${prefixoCSS} #${prefixoCSS}-header #search-box-rectangle { 1324 left: 310px;
1325 }
1326
1327 .${prefixoCSS} #${prefixoCSS}-header .search-container { 1328 left: 210px;
1329 }
1330
1331
1332 .fragment_5587.cap { 1333 left: 215px;
1334 }
1335
1336 }
1337
1338
1339
1340 @media screen and (max-width: 590px) { 1341
1342
1343 .${prefixoCSS} #${prefixoCSS}-header #search-box-rectangle { 1344 display: none !important;
1345 }
1346
1347 .${prefixoCSS} #${prefixoCSS}-header .search-container { 1348 left: 10px;
1349 }
1350
1351
1352 .fragment_5587.cap { 1353 left: 15px;
1354 }
1355
1356 }
1357
1358
1359 /* GLOBAL */
1360
1361 .blue-filter-rodape:before { 1362 pointer-events: none;
1363 content: '';
1364 position: fixed;
1365 left: 0;
1366 top: 0;
1367 right: 0;
1368 bottom: 0;
1369 background: rgb(255, 255, 191);
1370 mix-blend-mode: multiply;
1371 opacity: 0.4;
1372 z-index: 1000001;
1373 }
1374
1375 .${prefixoCSS} { 1376 margin: 0;
1377 padding: 0;
1378 min-width: 320px;
1379 font-family: 'Petrobras Sans', Sans-serif;
1380 }
1381
1382 .${prefixoCSS} svg { 1383 width: 20px;
1384 min-width: 18px;
1385
1386 height: 18px;
1387 min-height: 18px;
1388 }
1389
1390 .${prefixoCSS} .separator { 1391 width: 0px;
1392 height: inherit;
1393 border: 1px solid #D4D4D4;
1394 margin: initial;
1395 border-top: unset;
1396 }
1397
1398 .${prefixoCSS} .blue-filter-header:before { 1399 pointer-events: none;
1400 content: '';
1401 position: fixed;
1402 left: 0;
1403 top: 0;
1404 right: 0;
1405 bottom: calc(100% - 60px);
1406 background: rgb(255, 255, 191);
1407 mix-blend-mode: multiply;
1408 opacity: 0.3;
1409 }
1410
1411 .${prefixoCSS} .blue-filter-header-social-network:before { 1412 pointer-events: none;
1413 content: '';
1414 position: fixed;
1415 left: 0;
1416 top: 0;
1417 right: 0;
1418 bottom: 0;
1419 background: rgb(255, 255, 191);
1420 mix-blend-mode: multiply;
1421 opacity: 0.3;
1422 }
1423
1424 .${prefixoCSS} .blue-filter-header-font-size:before { 1425 pointer-events: none;
1426 content: '';
1427 position: fixed;
1428 left: 0;
1429 top: 0;
1430 right: 0;
1431 bottom: 0;
1432 background: rgb(255, 255, 191);
1433 mix-blend-mode: multiply;
1434 opacity: 0.3;
1435 }
1436
1437 .${prefixoCSS} .blue-filter-content:before { 1438 pointer-events: none;
1439 content: '';
1440 position: fixed;
1441 left: 0;
1442 top: 0;
1443 right: 0;
1444 bottom: 0;
1445 background: rgb(255, 255, 191);
1446 mix-blend-mode: multiply;
1447 opacity: 0.1;
1448 }
1449
1450 .${prefixoCSS} .blue-filter-footer:before { 1451 pointer-events: none;
1452 content: '';
1453 position: fixed;
1454 left: 0;
1455 top: 0;
1456 right: 0;
1457 bottom: 0;
1458 background: rgb(255, 255, 191);
1459 mix-blend-mode: multiply;
1460 opacity: 0.1;
1461 }
1462
1463 .${prefixoCSS} .blue-filter-mobile-summary:before { 1464 pointer-events: none;
1465 content: '';
1466 position: fixed;
1467 left: 0;
1468 top: 0;
1469 right: 0;
1470 bottom: 0;
1471 background: rgb(255, 255, 191);
1472 mix-blend-mode: multiply;
1473 opacity: 0.3;
1474 }
1475
1476 .${prefixoCSS} .blue-filter-header-social-network:before { 1477 pointer-events: none;
1478 content: '';
1479 position: absolute;
1480 left: 0;
1481 top: 0;
1482 right: 0;
1483 bottom: calc(100% - 102 px);
1484 background: rgb(255, 255, 191);
1485 mix-blend-mode: multiply;
1486 opacity: 0.3;
1487 }
1488
1489 .${prefixoCSS} .blue-filter-chapter-list:before { 1490 pointer-events: none;
1491 content: '';
1492 position: fixed;
1493 left: calc(100% - 462px);
1494 top: 0;
1495 right: 0;
1496 bottom: 0;
1497 background: rgb(255, 255, 191);
1498 mix-blend-mode: multiply;
1499 opacity: 0.3;
1500 }
1501
1502 /* HEADER */
1503
1504
1505 #${prefixoCSS}-header { 1506 display: flex;
1507 flex-direction: row;
1508 height: 60px;
1509 align-items: center;
1510 justify-content: space-between;
1511
1512 padding: 0px 75px 0px 64px;
1513 margin: 0;
1514 min-width: 100vw;
1515 min-height: 60px;
1516 background-color: #FFFFFF;
1517 box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
1518 position: fixed;
1519
1520 top: 0;
1521 right: 0px;
1522 left: 0;
1523 z-index: 99;
1524 }
1525
1526
1527 .${prefixoCSS} .header-logged-desktop { 1528 z-index: 99 !important;
1529 }
1530
1531 .${prefixoCSS} .header-logged-mobile { 1532 top: 32px !important;
1533 z-index: 10 !important;
1534 }
1535
1536 .${prefixoCSS} .blue-filter-header-desktop-logged:before{ 1537 bottom: bottom: calc(100% - 115px);
1538 }
1539
1540
1541 .${prefixoCSS} .menu-list-logged-mobile { 1542 top: 110px !important;
1543 }
1544
1545
1546 #${prefixoCSS}-header .triangle { 1547 background: #FFFFFF;
1548 border-width: 1px;
1549 border-color: #E8E8E8;
1550 border-style: solid;
1551 border-right: #FFFFFF;
1552 border-top: #FFFFFF;
1553 transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);
1554 display: inline-block;
1555 position: absolute;
1556 width: 8px;
1557 height: 8px;
1558 top: -4px;
1559 }
1560
1561 #${prefixoCSS} .hidden, #${prefixoCSS}-header .hidden, #${prefixoCSS}-mobile-summary .hidden, #${prefixoCSS}-header.hidden, #${prefixoCSS}-header .hidden { 1562 display: none !important;
1563 }
1564
1565 #${prefixoCSS}-header .active-button svg { 1566 fill: #008542;
1567 }
1568
1569 #${prefixoCSS}-header .active-button span { 1570 color: #008542;
1571 }
1572
1573 #${prefixoCSS}-header .active-button svg path { 1574 fill: #008542;
1575 stroke: #008542;
1576 }
1577
1578 #${prefixoCSS}-header .company-info { 1579 display: flex;
1580 align-items: center;
1581 height: 30px;
1582 gap: 32px;
1583 margin-right: 40px;
1584 }
1585
1586 #${prefixoCSS}-header .company-info .logo svg { 1587 width: 144px;
1588 height: 28px;
1589 }
1590
1591 #${prefixoCSS}-header .company-info .report-title { 1592 width: auto;
1593 }
1594
1595 #${prefixoCSS}-header .company-info .report-title span { 1596 font-style: normal;
1597 font-weight: 400;
1598 font-size: 16px;
1599 line-height: 21px;
1600 color: #2F2F2F;
1601 }
1602
1603 #${prefixoCSS}-header .buttons { 1604 display: flex;
1605 align-items: center;
1606 gap: 40px;
1607 }
1608
1609 #${prefixoCSS}-header .buttons .language { 1610 display: flex;
1611 align-items: center;
1612 justify-content: space-around;
1613 width: 64px;
1614 height: 26px;
1615
1616 font-style: normal;
1617 font-weight: 400;
1618 font-size: 12px;
1619 line-height: 16px;
1620
1621 background-color: #F5F5F5;
1622 border-radius: 4px;
1623 padding: 8px 4px 8px 4px;
1624 }
1625
1626 .${prefixoCSS} .header .buttons .libras-icon { 1627 cursor: pointer;
1628 }
1629
1630
1631 #${prefixoCSS}-header .buttons .language div { 1632 width: 28px;
1633 display: flex;
1634 justify-content: center;
1635 cursor: pointer;
1636 }
1637
1638 #${prefixoCSS}-header .buttons .language span { 1639 font-size: 12px;
1640 font-style: normal;
1641 font-weight: 400;
1642 }
1643
1644 #${prefixoCSS}-header .buttons .language .current-language{ 1645 background: #FFF;
1646 }
1647
1648 #${prefixoCSS}-header .buttons .language .current-language span { 1649 color: #008542;
1650 font-weight: 700;
1651 }
1652
1653 #${prefixoCSS}-header .buttons .center-items { 1654 display: flex;
1655 gap: 24px;
1656 }
1657
1658 #${prefixoCSS}-header .buttons .center-items .font-size { 1659 position: relative;
1660 max-height: 24px;
1661 }
1662
1663 #${prefixoCSS}-header .buttons .center-items .font-size .button { 1664 cursor: pointer;
1665 position: relative;
1666 }
1667
1668 #${prefixoCSS}-header .buttons .center-items .font-size .button span { 1669 position: relative;
1670 }
1671
1672 #${prefixoCSS}-header .buttons .center-items .font-size .font-size-area { 1673 position: absolute;
1674 top: 38px;
1675 left: -90px;
1676 background: #FFFFFF;
1677 border: 1px solid #E8E8E8;
1678 box-sizing: border-box;
1679 border-radius: 8px;
1680 transition-property: opacity;
1681 transition-duration: 0.5s;
1682 min-width: 198px;
1683 }
1684
1685 #${prefixoCSS}-header .buttons .center-items .font-size .font-size-area .font-size-options { 1686 display: flex;
1687 flex-direction: column;
1688 align-items: center;
1689 }
1690
1691 #${prefixoCSS}-header .buttons .center-items .font-size .font-size-area .font-size-options .title { 1692 padding-top: 12px;
1693 font-style: normal;
1694 font-weight: 700;
1695 font-size: 12px;
1696 line-height: 16px;
1697 color: #008542;
1698 width: 100%;
1699 text-align: center;
1700 }
1701
1702 #${prefixoCSS}-header .buttons .font-size .font-size-area .font-size-options .font-size-links { 1703 display: flex;
1704 align-items: center;
1705 justify-content: center;
1706 gap: 32px;
1707 margin: 16px;
1708 }
1709
1710 #${prefixoCSS}-header .buttons .font-size .font-size-area .font-size-options .font-size-links div { 1711 display: flex;
1712 flex-direction: column;
1713 justify-content: flex-start;
1714 align-items: center;
1715 gap: 10px;
1716 }
1717
1718 #${prefixoCSS}-header .buttons .font-size .font-size-area .font-size-options .font-size-links label { 1719 line-height: 20px;
1720 margin: 0px;
1721 }
1722
1723 #${prefixoCSS}-header .buttons .font-size .font-size-area .font-size-options .font-size-links .small-font { 1724 font-size: 20px;
1725 }
1726
1727 #${prefixoCSS}-header .buttons .font-size .font-size-area .font-size-options .font-size-links .medium-font { 1728 font-size: 24px;
1729 }
1730
1731 #${prefixoCSS}-header .buttons .font-size .font-size-area .font-size-options .font-size-links .large-font { 1732 font-size: 32px;
1733 }
1734
1735 #${prefixoCSS}-header .buttons .social-network .button { 1736 cursor: pointer;
1737 }
1738
1739 #${prefixoCSS}-header .buttons .social-network { 1740 position: relative;
1741 max-height: 24px;
1742 }
1743
1744 #${prefixoCSS}-header .buttons .social-network .social-options-area { 1745 position: absolute;
1746 background: #FFFFFF;
1747 border: 1px solid #E8E8E8;
1748 box-sizing: border-box;
1749 border-radius: 8px;
1750 top: 38px;
1751 left: -102px;
1752 transition-property: opacity;
1753 transition-duration: 0.5s;
1754 }
1755
1756 #${prefixoCSS}-header .buttons .social-network .social-options { 1757 display: flex;
1758 flex-direction: column;
1759 align-items: center;
1760 }
1761
1762 #${prefixoCSS}-header .buttons .social-network .social-options .title { 1763 text-align: center;
1764 font-style: normal;
1765 font-weight: 700;
1766 font-size: 12px;
1767 line-height: 16px;
1768 color: #008542;
1769 margin-top: 12px;
1770 }
1771
1772 #${prefixoCSS}-header .buttons .social-network .social-options .social-links { 1773 display: flex;
1774 justify-content: space-around;
1775 gap: 16px;
1776 margin: 16px 24px 24px 24px;
1777 }
1778
1779 #${prefixoCSS}-header .buttons .social-network .social-options .social-links div { 1780 background: #F1F1F1;
1781 width: 32px;
1782 height: 32px;
1783 border-radius: 50%;
1784 display: flex;
1785 justify-content: center;
1786 align-items: center;
1787 cursor: pointer;
1788 }
1789
1790 #${prefixoCSS}-header .buttons .social-network .social-options .social-links a { 1791 display: flex;
1792 align-items: center;
1793 }
1794
1795 #${prefixoCSS}-header .buttons .social-network .social-options .social-links svg { 1796 width: 12px;
1797 height: 12px;
1798 min-width: initial;
1799 min-height: initial;
1800 }
1801
1802
1803
1804 #${prefixoCSS}-header .buttons .blue-filter-button { 1805 cursor: pointer;
1806 }
1807
1808 #${prefixoCSS}-header .buttons .chapters-list-mobile-button { 1809 display: none;
1810 cursor: pointer;
1811 }
1812
1813 #${prefixoCSS}-header .buttons .close-mobile-button { 1814 display: none;
1815 cursor: pointer;
1816 }
1817
1818 #${prefixoCSS}-header .chapters-list-button { 1819 display: flex;
1820 align-items: center;
1821 gap: 16px;
1822 cursor: pointer;
1823 }
1824
1825 #${prefixoCSS}-header .chapters-list-button .text { 1826 font-style: normal;
1827 font-weight: 700;
1828 font-size: 14px;
1829 line-height: 28px;
1830 text-transform: uppercase;
1831 color: #008542;
1832 }
1833
1834
1835 /* CONTENT */
1836
1837 .${prefixoCSS} .content {} 1838
1839 .${prefixoCSS} .content p, span, li { 1840 margin: 0 !important;
1841 }
1842
1843 #${prefixoCSS}-content { 1844 width: 100%;
1845 }
1846
1847 #${prefixoCSS}-content img, picture { 1848 max-width: 100%;
1849 max-height: 100%;
1850 object-fit: contain;
1851 }
1852
1853 #${prefixoCSS}-content .img-full-width img { 1854 margin-left: calc(-100vw + 100% + 70px);
1855 width: 100vw !important;
1856 height: 100% !important;
1857 max-width: 100vw;
1858 }
1859
1860 #${prefixoCSS}-content .summary { 1861 min-width: 237px;
1862 text-align: right;
1863 }
1864
1865
1866
1867 <#if !exibindoNaPaginaDeSustentabilidade >
1868 #${prefixoCSS}-content .summary .summary-area { 1869 position: sticky;
1870 z-index: 10;
1871
1872 <#assign exibirTituloNesteCapitulo = true />
1873 <#if exibirTituloNesteCapitulo >
1874 top: 180px;
1875 </#if>
1876 }
1877
1878 body { 1879 overflow-x: initial;
1880 }
1881 </#if>
1882
1883 <#if !exibindoNaPaginaDeSustentabilidade >
1884 #${prefixoCSS}-content { 1885 padding-top: 110px;
1886 }
1887 </#if>
1888
1889 #${prefixoCSS}-content .summary .summary-area .item * { 1890 margin-bottom: 0;
1891 }
1892
1893 #${prefixoCSS}-content .summary .active-summary-item { 1894 background: #F1F1F1;
1895 border-radius: 4px;
1896 padding-right: 16px;
1897 margin-right: -16px;
1898 padding-left: 16px;
1899 padding-bottom: 6px;
1900 padding-top: 4px;
1901 }
1902
1903 #${prefixoCSS}-content .summary .title h3 { 1904 font-style: normal;
1905 font-weight: 800;
1906 font-size: 16px;
1907 line-height: 21px;
1908 text-transform: uppercase;
1909 color: #008542;
1910 }
1911
1912 #${prefixoCSS}-content .summary .list { 1913 display: flex;
1914 flex-direction: column;
1915 gap: 12px;
1916 padding: 18px 0px 64px 0;
1917 }
1918
1919 #${prefixoCSS}-content .summary .list .item { 1920 line-height: 18px;
1921 }
1922
1923 #${prefixoCSS}-content .summary .list .item a { 1924 color: #2F2F2F;
1925 font-style: normal;
1926 font-weight: 400;
1927 font-size: 14px;
1928 text-decoration: none;
1929 }
1930
1931 #${prefixoCSS}-content .summary .list .selected { 1932 background: #F1F1F1;
1933 border-radius: 4px;
1934 }
1935
1936 #${prefixoCSS}-content .summary .next-chapter { 1937 display: flex;
1938 justify-content: flex-end;
1939 margin: 25px 0;
1940 }
1941
1942 #${prefixoCSS}-content .summary .next-chapter div { 1943 border: 1px solid rgba(0, 133, 66, 0.5);
1944 box-sizing: border-box;
1945 border-radius: 36px;
1946 padding: 8px 24px;
1947 }
1948
1949 #${prefixoCSS}-content .summary .next-chapter a { 1950 display: flex;
1951 flex-direction: row;
1952 align-items: center;
1953 justify-content: flex-end;
1954 gap: 12px;
1955 text-decoration: none;
1956 }
1957
1958 #${prefixoCSS}-content .summary .next-chapter a span { 1959 color: #008542;
1960 text-transform: uppercase;
1961 font-style: normal;
1962 font-weight: 700;
1963 font-size: 14px;
1964 line-height: 28px;
1965 white-space: nowrap;
1966 }
1967
1968 #${prefixoCSS}-content .chapter .header { 1969 padding: 0px 40px 0px 75px;
1970 }
1971
1972 #${prefixoCSS}-content .remove-right-padding{ 1973 padding-right: 0;
1974 }
1975
1976 #${prefixoCSS}-content .chapter .header .tag-reading { 1977 display: flex;
1978 align-items: center;
1979 gap: 16px;
1980 height: 21px;
1981 }
1982
1983 #${prefixoCSS}-content .chapter .header .tag-reading .reading { 1984 display: flex;
1985 align-items: center;
1986 }
1987
1988 #${prefixoCSS}-content .chapter .header .tag-reading .reading span { 1989 font-style: normal;
1990 font-weight: 400;
1991 font-size: 14px;
1992 line-height: 18px;
1993 color: #2F2F2F;
1994 }
1995
1996 #${prefixoCSS}-content .chapter .header .tag-reading .tag h3 { 1997 font-style: normal;
1998 font-weight: 800;
1999 font-size: 16px;
2000 line-height: 21px;
2001 text-transform: uppercase;
2002 color: #2F2F2F;
2003 }
2004
2005 #${prefixoCSS}-content .chapter .header .title { 2006 margin-top: 16px;
2007 }
2008
2009 #${prefixoCSS}-content .chapter .header .title span { 2010 color: #FFFFFF;
2011 font-style: normal;
2012 font-weight: 800;
2013 font-size: 48px;
2014 line-height: 63px;
2015 text-transform: uppercase;
2016 color: #008542;
2017 }
2018
2019 #${prefixoCSS}-content .chapter .listening { 2020 display: flex;
2021 align-items: center;
2022 justify-content: space-between;
2023 padding: 36px 40px 0px 75px;
2024 gap: 30x;
2025 }
2026
2027 #${prefixoCSS}-content .chapter .listening .title{ 2028 font-style: normal;
2029 font-weight: 400;
2030 font-size: 14px;
2031 line-height: 18px;
2032 color: #2F2F2F;
2033 }
2034
2035 #${prefixoCSS}-content 2036 .chapter
2037 .listening
2038 .audio { 2039 display: flex;
2040 flex-direction: row;
2041 width: calc(100% - 150px);
2042 }
2043
2044 #${prefixoCSS}-content 2045 .chapter
2046 .listening
2047 .audio
2048 .player { 2049 display: flex;
2050 flex-direction: row;
2051 align-items: center;
2052 gap: 16px;
2053
2054 width: 100%;
2055 height: 100%;
2056 margin: auto;
2057
2058 background: #F1F1F1;
2059 border: 1px solid #D4D4D4;
2060 border-radius: 4px;
2061
2062 padding: 12px 32px 12px 16px;
2063 }
2064
2065 #${prefixoCSS}-content 2066 .chapter
2067 .listening
2068 .audio
2069 .player span { 2070 white-space: nowrap;
2071 margin-right: 8px;
2072 }
2073
2074
2075 #${prefixoCSS}-content 2076 .chapter
2077 .listening
2078 .audio
2079 .player
2080 .timeline{ 2081 display: flex;
2082 align-items: center;
2083 width: 100%;
2084 }
2085
2086 #${prefixoCSS}-content 2087 .chapter
2088 .listening
2089 .audio
2090 .player
2091 .slider { 2092 -webkit-appearance: none;
2093 width: 100%;
2094 height: 2px;
2095 background: #d3d3d3;
2096 outline: none;
2097 opacity: 0.7;
2098 -webkit-transition: .2s;
2099 transition: opacity .2s;
2100 }
2101
2102 #${prefixoCSS}-content 2103 .chapter
2104 .listening
2105 .audio
2106 .player
2107 .slider:hover { 2108 opacity: 1;
2109 }
2110
2111 #${prefixoCSS}-content 2112 .chapter
2113 .listening
2114 .audio
2115 .player
2116 .slider::-webkit-slider-thumb { 2117 -webkit-appearance: none;
2118 appearance: none;
2119 width: 12px;
2120 height: 12px;
2121 border-radius: 6px;
2122 background: #008542;
2123 cursor: pointer;
2124 }
2125
2126 #${prefixoCSS}-content 2127 .chapter
2128 .listening
2129 .audio
2130 .player
2131 .slider::-moz-range-thumb { 2132 width: 12px;
2133 height: 12px;
2134 border-radius: 6px;
2135 background: #008542;
2136 cursor: pointer;
2137 }
2138
2139 #${prefixoCSS}-content 2140 .chapter
2141 .listening
2142 .audio
2143 .controls
2144 .toggle-play.play { 2145 cursor: pointer;
2146 position: relative;
2147 left: 0;
2148 height: 0;
2149 width: 0;
2150 border: 7px solid #0000;
2151 border-left: 13px solid #008542;
2152 }
2153
2154 #${prefixoCSS}-content 2155 .chapter
2156 .listening
2157 .audio-player
2158 .controls
2159 .toggle-play.play:hover { 2160 transform: scale(1.1);
2161 }
2162
2163 #${prefixoCSS}-content 2164 .chapter
2165 .listening
2166 .audio
2167 .controls .toggle-play.pause { 2168 height: 15px;
2169 width: 20px;
2170 cursor: pointer;
2171 position: relative;
2172 }
2173
2174 #${prefixoCSS}-content 2175 .chapter
2176 .listening
2177 .audio .controls .toggle-play.pause:before { 2178 position: absolute;
2179 top: 0;
2180 left: 0px;
2181 background: #008542;
2182 content: "";
2183 height: 15px;
2184 width: 3px;
2185 }
2186
2187 #${prefixoCSS}-content 2188 .chapter
2189 .listening
2190 .audio .controls .toggle-play.pause:after { 2191 position: absolute;
2192 top: 0;
2193 right: 8px;
2194 background: #008542;
2195 content: "";
2196 height: 15px;
2197 width: 3px;
2198 }
2199
2200 #${prefixoCSS}-content 2201 .chapter
2202 .listening
2203 .audio .controls .toggle-play.pause:hover { 2204 transform: scale(1.1);
2205 }
2206
2207
2208
2209
2210
2211
2212
2213
2214
2215
2216
2217
2218
2219
2220
2221
2222
2223
2224
2225
2226
2227
2228
2229 /* Controles de audio.*/
2230
2231 #${prefixoCSS}-content .chapter .listening audio { 2232 width: 80%;
2233 height: 30px;
2234 top: 389px;
2235 background: #F1F1F1;
2236 border: 1px solid #D4D4D4;
2237 box-sizing: border-box;
2238 border-radius: 4px;
2239 }
2240 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls { 2241 width: inherit;
2242 height: inherit;
2243 position: relative;
2244 direction: ltr;
2245 display: flex;
2246 flex-direction: column;
2247 justify-content: flex-end;
2248 align-items: center;
2249 }
2250 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-enclosure { 2251 width: 100%;
2252 max-width: 800px;
2253 height: 30px;
2254 flex-shrink: 0;
2255 bottom: 0;
2256 text-indent: 0;
2257 padding: 0;
2258 box-sizing: border-box;
2259 #border-radius: 1px;
2260 #display: none;
2261 }
2262 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-panel { 2263 display: flex;
2264 flex-direction: row;
2265 align-items: center;
2266 /* We use flex-start here to ensure that the play button is visible even
2267 * if we are too small to show all controls.
2268 */
2269 justify-content: flex-start;
2270 -webkit-user-select: none;
2271 position: relative;
2272 width: 100%;
2273 z-index: 0;
2274 overflow: hidden;
2275 text-align: right;
2276 bottom: auto;
2277 height: 30px;
2278 background-color: rgba(241, 241, 241, 0.8);
2279 border-radius: 1px;
2280 /* The duration is also specified in MediaControlElements.cpp and LayoutTests/media/media-controls.js */
2281 transition: opacity 0.3s;
2282 }
2283
2284 #${prefixoCSS}-content .chapter .listening audio:-webkit-full-page-media { 2285 max-height: 100%;
2286 max-width: 100%;
2287 }
2288 #${prefixoCSS}-content .chapter .listening audio:-webkit-full-page-media::-webkit-media-controls-panel { 2289 bottom: 0px;
2290 }
2291 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-mute-button { 2292 -webkit-appearance: media-mute-button;
2293 display: none;
2294 #display: flex;
2295 #flex: none;
2296 #border: none;
2297 #box-sizing: border-box;
2298 #width: 35px;
2299 #height: 30px;
2300 #line-height: 30px;
2301 #margin: 0 6px 0 0;
2302 #padding: 0;
2303 #background-color: initial;
2304 #color: green;
2305 }
2306 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-overlay-enclosure { 2307 display: none;
2308 }
2309 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-play-button { 2310 #-webkit-appearance: media-play-button;
2311 display: flex;
2312 flex: none;
2313 border: none;
2314 box-sizing: border-box;
2315 width: 15px;
2316 height: 15px;
2317 line-height: 20px;
2318 #margin-left: 9px;
2319 #margin-right: 9px;
2320 padding: 0;
2321 background-color: initial;
2322 #background-color: violet;
2323 #filter: invert(100%);
2324 #filter: invert(100%) ;
2325 #font-size: 30px;
2326 #background-image: linear-gradient(#c0c0c0, #c0c0c0)
2327 #icon: none;
2328 color:pink;
2329
2330 }
2331 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-timeline-container { 2332 -webkit-appearance: media-controls-background;
2333 display: flex;
2334 flex-direction: row;
2335 align-items: center;
2336 justify-content: flex-end;
2337 flex: 1 1;
2338 -webkit-user-select: none;
2339 height: 16px;
2340 min-width: 0;
2341
2342 }
2343 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-current-time-display, 2344 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-time-remaining-display { 2345 -webkit-appearance: media-current-time-display;
2346 -webkit-user-select: none;
2347 flex: none;
2348 display: flex;
2349 border: none;
2350 cursor: default;
2351 height: 30px;
2352 margin: 0 9px 0 0;
2353 padding: 0;
2354 line-height: 30px;
2355 font-size: 13px;
2356 font-weight: bold;
2357 font-style: normal;
2358 color: black;
2359 letter-spacing: normal;
2360 word-spacing: normal;
2361 text-transform: none;
2362 text-indent: 0;
2363 text-shadow: none;
2364 text-decoration: none;
2365 }
2366 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-timeline { 2367 -webkit-appearance: media-slider;
2368 display: flex;
2369 flex: 1 1 auto;
2370 height: 8px;
2371 margin: 0 15px 0 0;
2372 padding: 0;
2373 background-color: orange;
2374 filter: invert(100%);
2375 min-width: 25px;
2376 border: initial;
2377 #background-image: linear-gradient(#c0c0c0, #c0c0c0);
2378 }
2379 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-volume-slider { 2380 -webkit-appearance: media-volume-slider;
2381 display: none;
2382 /* The 1.9 value was empirically chosen to match old-flexbox behaviour
2383 * and be aesthetically pleasing.
2384 */
2385 #flex: 1 1.9 auto;
2386 #height: 8px;
2387 #max-width: 70px;
2388 #margin: 0 15px 0 0;
2389 #padding: 0;
2390 #background-color: transparent;
2391 #min-width: 15px;
2392 #border: initial;
2393 #color: red;
2394 }
2395 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules.
2396 https://code.google.com/p/chromium/issues/detail?id=112508
2397 https://bugs.webkit.org/show_bug.cgi?id=62218
2398 */
2399 #${prefixoCSS}-content .chapter .listening input[type="range" i]::-webkit-media-slider-container { 2400 display: flex;
2401 align-items: center;
2402 flex-direction: row; /* This property is updated by C++ code. */
2403 box-sizing: border-box;
2404 height: 100%;
2405 width: 100%;
2406 border: 1px solid rgba(11, 95, 255, 0.35);
2407 border-radius: 1px;
2408 background-color: transparent; /* Background drawing is managed by C++ code to draw ranges. */
2409 color:lightblue;
2410 }
2411 /* The negative right margin causes the track to overflow its container. */
2412 #${prefixoCSS}-content .chapter .listening input[type="range" i]::-webkit-media-slider-container > div { 2413 margin-right: -14px;
2414 }
2415 #${prefixoCSS}-content .chapter .listening input[type="range" i]::-webkit-media-slider-thumb { 2416 margin-left: -7px;
2417 margin-right: -7px;
2418 }
2419 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-fullscreen-button { 2420 -webkit-appearance: media-enter-fullscreen-button;
2421 display: flex;
2422 flex: none;
2423 border: none;
2424 box-sizing: border-box;
2425 width: 30px;
2426 height: 30px;
2427 line-height: 30px;
2428 margin-left: -5px;
2429 margin-right: 9px;
2430 padding: 0;
2431 background-color: initial;
2432 color: inherit;
2433 }
2434 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-toggle-closed-captions-button { 2435 display: none;
2436 }
2437 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-fullscreen-volume-slider { 2438 display: none;
2439 }
2440 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-fullscreen-volume-min-button { 2441 display: none;
2442 }
2443 #${prefixoCSS}-content .chapter .listening audio::-webkit-media-controls-fullscreen-volume-max-button { 2444 display: none;
2445 }
2446
2447
2448
2449
2450
2451
2452
2453
2454
2455
2456
2457
2458
2459
2460
2461
2462
2463
2464 #${prefixoCSS}-content .chapter .introduction { 2465 padding: 0px 40px 64px 75px;
2466 font-size: 18px;
2467 }
2468
2469 #${prefixoCSS}-content .chapter .introduction>p, .introduction>li, .introduction>ul, .introduction>span, .introduction>div { 2470 margin: 0 !important;
2471 padding: 0 !important;
2472 }
2473
2474 ${prefixoCSS}-content .chapter .introduction * { 2475 margin: 0;
2476 }
2477
2478 #${prefixoCSS}-content .chapter .topics { 2479 font-size: 18px;
2480 padding: 0px 40px 0px 75px;
2481 }
2482
2483 #${prefixoCSS}-content .chapter .topics .topic { 2484 padding-bottom: 64px;
2485 }
2486
2487 #${prefixoCSS}-content .chapter .topics .topic .title { 2488 margin: initial;
2489 padding-bottom: 40px;
2490 font-style: normal;
2491 font-weight: 700;
2492 font-size: 32px;
2493 line-height: 42px;
2494 }
2495
2496 #${prefixoCSS}-content .chapter .topics .topic .content div, p, h1, h2, h3, h4, h5, h6, span { 2497 margin: initial;
2498 }
2499
2500 #${prefixoCSS}-content .chapter .read-full-report { 2501 padding: 0px 40px 64px 75px;
2502 }
2503
2504 #${prefixoCSS}-content .chapter .read-full-report-area { 2505 background-image: url(${imagemBannerBaixarCapituloEmPDFUrl}); 2506 background-size: cover;
2507 background-repeat: no-repeat;
2508 height: 250px;
2509 width: 100%;
2510 display: flex;
2511 flex-direction: column;
2512 align-items: center;
2513 justify-content: center;
2514 gap: 24px;
2515 border-radius: 4px;
2516 }
2517
2518 #${prefixoCSS}-content .chapter .read-full-report .title { 2519 font-style: normal;
2520 font-weight: 700;
2521 font-size: 32px;
2522 line-height: 120%;
2523 color: #FFFFFF;
2524 text-align: center;
2525 }
2526
2527 #${prefixoCSS}-content .chapter .read-full-report .link { 2528 }
2529
2530 #${prefixoCSS}-content .chapter .read-full-report .link div { 2531 display: flex;
2532 flex-direction: row;
2533 align-items: center;
2534 padding: 8px 24px;
2535 border: 1px solid rgba(255, 255, 255, 0.5);
2536 box-sizing: border-box;
2537 border-radius: 36px;
2538 }
2539
2540 #${prefixoCSS}-content .chapter .read-full-report .link a { 2541 display: flex;
2542 align-items: center;
2543 gap: 18px;
2544 font-style: normal;
2545 font-weight: 700;
2546 font-size: 14px;
2547 line-height: 28px;
2548 text-transform: uppercase;
2549 color: #FFFFFF;
2550 }
2551
2552 #${prefixoCSS}-content .chapter .read-full-report .link a svg { 2553 width: 14px;
2554 height: 14px;
2555 }
2556
2557 /* FOOTER */
2558
2559 .${prefixoCSS} .footer {} 2560
2561 #${prefixoCSS}-footer { 2562 display: flex;
2563 flex-direction: column;
2564 justify-content: space-between;
2565 padding: 0px 40px 75px 75px;
2566 }
2567
2568 #${prefixoCSS}-footer .bottom .next-chapter a { 2569 text-decoration: none;
2570 }
2571
2572 #${prefixoCSS}-footer span { 2573 text-transform: uppercase;
2574 color: #008542;
2575 font-style: normal;
2576 font-weight: 700;
2577 font-size: 14px;
2578 line-height: 150%;
2579 }
2580
2581 #${prefixoCSS}-footer .separator { 2582 width: 100%;
2583 margin-bottom: 33px;
2584 }
2585
2586 #${prefixoCSS}-footer .bottom { 2587 display: flex;
2588 flex-direction: row;
2589 align-items: center;
2590 justify-content: space-between;
2591 }
2592
2593 #${prefixoCSS}-footer .bottom .next-chapter span { 2594 margin-right: 16px;
2595 }
2596
2597 #${prefixoCSS}-footer .chapters-list-button { 2598 display: flex;
2599 align-items: center;
2600 gap: 16px;
2601 cursor: pointer;
2602 }
2603
2604 /* MENU DE CAPITULOS */
2605
2606 #${prefixoCSS}-chapters-list-menu { 2607 transition: 250ms;
2608 width: 462px;
2609 position: fixed;
2610 height: 100vh;
2611 z-index: 1000000;
2612 top: 0px;
2613 right: 0px;
2614 background: #FFFFFF;
2615 padding: 64px 50px 64px 50px;
2616 overflow-y: scroll;
2617 }
2618
2619 #${prefixoCSS}-chapters-list-menu::-webkit-scrollbar{ 2620 /* visibility: hidden;
2621 width: 0px;
2622 background: transparent;*/
2623 }
2624
2625 #${prefixoCSS}-chapters-list-menu::-moz-scrollbar { 2626 display: none;
2627 }
2628
2629 #${prefixoCSS}-chapters-list-menu a { 2630 font-style: normal;
2631 font-weight: 700;
2632 font-size: 20px;
2633 line-height: 26px;
2634 color: #2F2F2F;
2635 }
2636
2637 #${prefixoCSS}-chapters-list-menu .header { 2638 display: flex;
2639 align-items: flex-start;
2640 justify-content: space-between;
2641 margin-bottom: 40px;
2642 }
2643
2644 #${prefixoCSS}-chapters-list-menu .header .title { 2645 font-style: normal;
2646 font-weight: 800;
2647 font-size: 24px;
2648 line-height: 32px;
2649 color: #2F2F2F;
2650 }
2651
2652 #${prefixoCSS}-chapters-list-menu .header .title span { 2653 color: #2F2F2F;
2654 text-transform: uppercase;
2655 }
2656
2657 #${prefixoCSS}-chapters-list-menu .header .close { 2658 }
2659
2660 #${prefixoCSS}-chapters-list-menu .header .close a { 2661 text-transform: uppercase;
2662 color: #B4B4B4;
2663 text-decoration: none;
2664 }
2665
2666 #${prefixoCSS}-chapters-list-menu .menu-items { 2667 display: flex;
2668 flex-direction: column;
2669 gap: 64px;
2670 }
2671
2672 #${prefixoCSS}-chapters-list-menu .menu-items .no-category { 2673 display: flex;
2674 flex-direction: column;
2675 gap: 24px;
2676 }
2677
2678 #${prefixoCSS}-chapters-list-menu .menu-items .no-category a.actual-chapter { 2679 text-decoration: underline !important;
2680 }
2681
2682 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category { 2683 display: flex;
2684 flex-direction: column;
2685 gap: 30px;
2686 margin-bottom: 64px;
2687 }
2688
2689 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category .title { 2690 display: inline-block;
2691 text-transform: uppercase;
2692 }
2693
2694 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category .title h2 { 2695 color: #FFFFFF;
2696 margin: initial;
2697 }
2698
2699
2700 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category .title span { 2701 background: #00B2A9;
2702 border-radius: 4px;
2703 padding: 6px 16px;
2704 font-weight: 800;
2705 font-size: 16px;
2706 line-height: 21px;
2707 }
2708
2709 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category .links { 2710 display: flex;
2711 flex-direction: column;
2712 gap: 24px;
2713 }
2714
2715 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category .links a.actual-chapter { 2716 text-decoration: underline !important;
2717 }
2718
2719 /*
2720 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category .title.category-documentos h2 span, 2721 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category .title.category-documents h2 span{ 2722 background: #9E9E9E;
2723 }
2724
2725 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category .title.category-social h2 span{ 2726 background: #ED8B00;
2727 }
2728
2729 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category .title.category-ambiental h2 span, 2730 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category .title.category-environmental h2 span{ 2731 background: #008542;
2732 }
2733
2734 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category .title.category-governana h2 span, 2735 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category .title.category-governance h2 span{ 2736 background: #006298;
2737 }
2738
2739*/
2740 /* MENU NESTE CAPITULO MOBILE */
2741
2742
2743 #${prefixoCSS}-mobile-summary {} 2744 }
2745
2746
2747
2748
2749 #${prefixoCSS}-mobile-summary .active-summary-item { 2750 background: #F1F1F1;
2751 border-radius: 4px;
2752 padding-right: 16px;
2753 margin-right: -16px;
2754 padding-left: 16px;
2755 margin-left: -16px;
2756 padding-top: 4px;
2757 padding-bottom: 6px;
2758 }
2759
2760 #${prefixoCSS}-mobile-summary .in-this-chapter-button { 2761 display: none;
2762 }
2763
2764 #${prefixoCSS}-mobile-summary .in-this-chapter-button span { 2765 font-style: normal;
2766 font-weight: 700;
2767 font-size: 14px;
2768 line-height: 28px;
2769 text-transform: uppercase;
2770 color: #008542;
2771 }
2772
2773 #${prefixoCSS}-mobile-summary .in-this-chapter-button svg { 2774 width: 10px;
2775 height: 12px;
2776 }
2777
2778 #${prefixoCSS}-mobile-summary .summary-area { 2779 display: flex;
2780 flex-direction: column;
2781 align-items: flex-end;
2782 gap: 56px;
2783 height: 100%;
2784 padding-right: 16px;
2785 position: fixed;
2786 z-index: 10000000;
2787 top: 0px;
2788 background: #FFFFFF;
2789 width: 100vw;
2790 }
2791
2792 #${prefixoCSS}-mobile-summary .summary-area .close-button { 2793 margin-top: 16px;
2794 margin-right: 16px;
2795 }
2796
2797 #${prefixoCSS}-mobile-summary .summary-area .summary-content { 2798 margin: initial;
2799 padding: 0 41px 86px 41px;
2800 }
2801
2802 #${prefixoCSS}-mobile-summary .summary-area .summary-content .header { 2803 display: flex;
2804 flex-direction: column;
2805 gap: 16px;
2806 }
2807
2808 #${prefixoCSS}-mobile-summary .summary-area .summary-content .header .category { 2809 font-style: normal;
2810 font-weight: 800;
2811 font-size: 14px;
2812 line-height: 18px;
2813 text-transform: uppercase;
2814 }
2815
2816 #${prefixoCSS}-mobile-summary .summary-area .summary-content .header .title { 2817 font-style: normal;
2818 font-weight: 800;
2819 font-size: 18px;
2820 line-height: 24px;
2821 text-transform: uppercase;
2822 color: #2F2F2F;
2823 max-width: 237px;
2824 }
2825
2826 #${prefixoCSS}-mobile-summary .summary-area .summary-content .list { 2827 display: flex;
2828 flex-direction: column;
2829 gap: 24px;
2830 margin: 28px 0px 55px 0;
2831 }
2832
2833 #${prefixoCSS}-mobile-summary .summary-area .summary-content .list .item { 2834 line-height: 18px;
2835 }
2836
2837 #${prefixoCSS}-mobile-summary .summary-area .summary-content .list .item a { 2838 color: #2F2F2F;
2839 font-style: normal;
2840 font-weight: 400;
2841 font-size: 14px;
2842 text-decoration: none;
2843 line-height: 18px;
2844 }
2845
2846 #${prefixoCSS}-mobile-summary .summary-area .summary-content .next-chapter { 2847 display: flex;
2848 justify-content: flex-start;
2849 }
2850
2851 #${prefixoCSS}-mobile-summary .summary-area .summary-content .next-chapter div { 2852 border: 1px solid rgba(0, 133, 66, 0.5);
2853 box-sizing: border-box;
2854 border-radius: 36px;
2855 padding: 8px 24px;
2856 }
2857
2858 #${prefixoCSS}-mobile-summary .summary-area .summary-content .next-chapter a { 2859 display: flex;
2860 flex-direction: row;
2861 align-items: center;
2862 gap: 16px;
2863 text-decoration: none;
2864 }
2865
2866 #${prefixoCSS}-mobile-summary .summary-area .summary-content .next-chapter a span { 2867 color: #008542;
2868 text-transform: uppercase;
2869 font-style: normal;
2870 font-weight: 700;
2871 font-size: 14px;
2872 line-height: 28px;
2873 white-space: nowrap;
2874 }
2875
2876 #${prefixoCSS}-mobile-summary .summary-area .summary-content .header .category span { 2877 color: #00B2A9;
2878 }
2879
2880 #${prefixoCSS}-mobile-summary .summary-area .summary-content .header .category.category-documentos span { 2881 color: #9E9E9E;
2882 }
2883
2884 #${prefixoCSS}-mobile-summary .summary-area .summary-content .header .category.category-social span { 2885 color: #ED8B00;
2886 }
2887
2888 #${prefixoCSS}-mobile-summary .summary-area .summary-content .header .category.category-ambiental span { 2889 color: #008542;
2890 }
2891
2892 #${prefixoCSS}-mobile-summary .summary-area .summary-content .header .category.category-governana span { 2893 color: #006298;
2894 }
2895
2896 @media screen and (max-width: ${mobileScreenSize}px) { 2897 /* GLOBAL */
2898
2899 .${prefixoCSS} .blue-filter-chapter-list:before { 2900 left: calc(100% - 426px);
2901 }
2902
2903 /* HEADER */
2904
2905 #${prefixoCSS}-header { 2906 justify-content: space-between;
2907 padding: 0 16px;
2908 margin: 0;
2909 }
2910
2911 #${prefixoCSS}-header .company-info { 2912 display: flex;
2913 justify-content: space-between;
2914 width: 100%;
2915 min-width: initial;
2916 }
2917
2918 #${prefixoCSS}-header .company-info .logo svg { 2919 width: 100px;
2920 height: 20px;
2921 }
2922
2923 #${prefixoCSS}-header .company-info .separator { 2924 display: none;
2925 }
2926
2927 #${prefixoCSS}-header .company-info .report-title { 2928 display: none;
2929 }
2930
2931 #${prefixoCSS}-header .buttons { 2932 display: flex;
2933 justify-content: space-between;
2934 width: initial;
2935 height: 20px;
2936 }
2937
2938 #${prefixoCSS}-header .buttons .language { 2939 display: none;
2940 }
2941
2942 #${prefixoCSS}-header .buttons .center-items .font-size .font-size-area { 2943 left: 50%;
2944 transform: translate(-50%, 0);
2945 min-width: 296px;
2946 }
2947
2948 #${prefixoCSS}-header .buttons .center-items .font-size .font-size-area .font-size-options { 2949 justify-content: space-between;
2950 }
2951
2952 #${prefixoCSS}-header .buttons .font-size .font-size-area .font-size-options .font-size-links { 2953 justify-content: space-around;
2954 gap: 64px;
2955 padding: 16px 36px 26px 36px;
2956 margin: initial;
2957 }
2958
2959 #${prefixoCSS}-header .buttons .chapters-list-mobile-button svg line { 2960 stroke: #000;
2961 }
2962
2963 #${prefixoCSS}-header .buttons .chapters-list-mobile-button { 2964 display: initial;
2965 }
2966
2967 #${prefixoCSS}-header .chapters-list-button { 2968 display: none;
2969 }
2970
2971 /* CONTENT */
2972 #${prefixoCSS}-content { 2973 padding: unset;
2974 margin-top: unset;
2975 margin-left: 0;
2976 <#if !exibindoNaPaginaDeSustentabilidade >
2977 padding-top: 110px;
2978 </#if>
2979 padding-right: 16px;
2980 }
2981
2982 #${prefixoCSS}-content .chapter .introduction { 2983 font-size: 16px;
2984 }
2985
2986
2987
2988 #${prefixoCSS}-content .chapter .introduction p { 2989 margin: 0 !important;
2990 }
2991
2992 #${prefixoCSS}-content .summary { 2993 display: none;
2994 }
2995
2996 #${prefixoCSS}-content .chapter .header{ 2997 padding: 0;
2998 }
2999
3000 #${prefixoCSS}-content .chapter .header .tag-reading .tag h3 { 3001 font-size: 14px;
3002 line-height: 18px;
3003 }
3004
3005 #${prefixoCSS}-content .chapter .header .title { 3006 width: 100%;
3007 }
3008
3009 #${prefixoCSS}-content .chapter .listening { 3010 display: flex;
3011 flex-direction: column;
3012 align-items: flex-start;
3013 padding: 32px 0px 0px 0px;
3014 gap: 16px;
3015 width: 100%;
3016 }
3017
3018 #${prefixoCSS}-content .chapter .listening .audio { 3019 display: flex;
3020 flex-direction: row;
3021 width: initial;
3022 }
3023
3024 #${prefixoCSS}-content .chapter .header .title span { 3025 font-size: 32px;
3026 line-height: 42px;
3027 }
3028
3029 #${prefixoCSS}-content .chapter .read-full-report { 3030 border-radius: 4px;
3031 padding: 0px 0px 64px 0px;
3032 }
3033
3034 #${prefixoCSS}-content .chapter .read-full-report .title { 3035 margin: 0px 56px 0px 56px;
3036 text-align: center;
3037 line-height: 100%;
3038 }
3039
3040 #${prefixoCSS}-content .chapter .read-full-report .title span{ 3041 font-size: 24px;
3042 }
3043
3044 #${prefixoCSS}-content .chapter .read-full-report .link a { 3045 font-size: 12px;
3046 }
3047
3048 #${prefixoCSS}-content .chapter .introduction { 3049 padding: 0px 0px 48px 0px;
3050 }
3051
3052 #${prefixoCSS}-content .chapter .topics { 3053 padding: 0px 0px 0px 0px;
3054 }
3055
3056
3057 #${prefixoCSS}-content .img-full-width img { 3058 margin-left: calc(-100vw + 100% + 16px);
3059 }
3060
3061 #${prefixoCSS}-content .chapter .topics .topic h2 { 3062 margin-bottom: 24px;
3063 }
3064
3065 #${prefixoCSS}-content .chapter .topics .topic { 3066 padding-bottom: 48px;
3067 font-size: 16px;
3068 }
3069
3070 #${prefixoCSS}-content .chapter .topics .topic .title { 3071 font-size: 24px;
3072 }
3073
3074 #${prefixoCSS}-content .chapter .read-full-report-area { 3075 background-image: url(${imagemBannerBaixarCapituloEmPDFMobile}); 3076 background-size: cover;
3077 background-repeat: no-repeat;
3078 height: 200px;
3079 width: 100%;
3080 display: flex;
3081 flex-direction: column;
3082 align-items: center;
3083 justify-content: center;
3084 gap: 24px;
3085 padding-top: 12px;
3086 padding-bottom: 24px;
3087 border-radius: 8px;
3088 }
3089
3090
3091 /* FOOTER */
3092
3093 #${prefixoCSS}-footer { 3094 margin-bottom: 43px;
3095 padding: 0 0px 0 0px;
3096 }
3097
3098 #${prefixoCSS}-footer .bottom { 3099 justify-content: space-between;
3100 }
3101
3102 #${prefixoCSS}-footer .bottom .next-chapter svg { 3103 min-width: 20px;
3104 min-height: 18px;
3105 }
3106
3107 #${prefixoCSS}-footer .bottom .next-chapter { 3108 width: 117px;
3109 }
3110
3111 #${prefixoCSS}-footer .bottom .next-chapter a { 3112 display: flex;
3113 align-items: center;
3114 text-decoration: none;
3115 }
3116
3117 #${prefixoCSS}-footer .chapters-list-button { 3118 width: 115px;
3119 }
3120
3121 /* MENU DE CAPITULOS VERSAO DESKTOP*/
3122
3123 #${prefixoCSS}-chapters-list-menu { 3124 width: initial;
3125 position: fixed;
3126 z-index: initial;
3127 height: 100%;
3128 top: 59px;
3129 background: #FFFFFF;
3130 padding: 36px 16px 16px 16px;
3131 overflow-y: scroll;
3132 z-index:100;
3133 }
3134
3135 #${prefixoCSS}-chapters-list-menu .header .close { 3136 display: none;
3137 }
3138
3139 #${prefixoCSS}-chapters-list-menu .menu-items { 3140 gap: 48px;
3141 }
3142
3143 #${prefixoCSS}-chapters-list-menu .menu-items .categories .category { 3144 gap: 24px;
3145 margin-bottom: 48px;
3146 }
3147
3148 /* MENU DE CAPITULOS VERSAO MOBILE*/
3149 #${prefixoCSS}-header .buttons .close-mobile-button { 3150 display: none;
3151 }
3152
3153 /*NESTE CAPITULO MOBILE*/
3154 #${prefixoCSS}-mobile-summary .in-this-chapter-button { 3155 display: flex;
3156 flex-direction: row;
3157 justify-content: center;
3158 align-items: center;
3159 padding: 10px 36px;
3160 position: fixed;
3161 width: 287px;
3162 height: 48px;
3163 bottom: 16px;
3164 gap: 20px;
3165 background: #FFFFFF;
3166 box-shadow: 0px 15px 30px rgb(0 0 0 / 25%);
3167 border-radius: 8px;
3168 left: 50%;
3169 transform: translate(-50%, 0);
3170 }
3171 }
3172
3173 @media screen and (min-width: ${mobileScreenSize+1}px) and (max-width: 993px) { 3174 #${prefixoCSS}-content .summary { 3175 display: none;
3176 }
3177 }
3178
3179 @media screen and (max-width: 320px) { 3180 font-size: 30px;
3181 }
3182</style>
3183
3184<script>
3185
3186
3187 AUI().ready(function() { 3188 class Header
3189 { 3190 constructor() { 3191 this._rootElement = document.querySelector("#${prefixoCSS}-header"); 3192 this._logo = this._rootElement.querySelector(".logo"); 3193 this._separator = this._rootElement.querySelector(".separator"); 3194 this._reportTitle = this._rootElement.querySelector(".report-title"); 3195
3196 this._buttonContainer = this._rootElement.querySelector(".buttons"); 3197
3198 this._languageContainer = this._buttonContainer.querySelector(".language"); 3199 this._ptLanguageButton = this._languageContainer.querySelector(".language-pt"); 3200 this._enLanguageButton = this._languageContainer.querySelector(".language-en"); 3201
3202
3203 this._fontSizeContainer = this._buttonContainer.querySelector(".font-size"); 3204 this._fontSizeButton = this._fontSizeContainer.querySelector(".button"); 3205 this._fontSizeAreaContainer = this._fontSizeContainer.querySelector(".font-size-area"); 3206 this._fontSizeOptionsContainer = this._fontSizeAreaContainer.querySelector(".font-size-options"); 3207
3208 this._smallFontSizeButton = this._fontSizeOptionsContainer.querySelector(".small-font-button"); 3209 this._smallFontSizeInput = this._fontSizeOptionsContainer.querySelector("#${prefixoCSS}-small-font"); 3210
3211 this._mediumFontSizeButton = this._fontSizeOptionsContainer.querySelector(".medium-font-button"); 3212 this._mediumFontSizeInput = this._fontSizeOptionsContainer.querySelector("#${prefixoCSS}-medium-font"); 3213
3214 this._largeFontSizeButton = this._fontSizeOptionsContainer.querySelector(".large-font-button"); 3215 this._largeFontSizeInput = this._fontSizeOptionsContainer.querySelector("#${prefixoCSS}-large-font"); 3216
3217 this._socialNetworkContainer = this._buttonContainer.querySelector(".social-network"); 3218 this._socialNetworkButton = this._socialNetworkContainer.querySelector(".button"); 3219 this._socialAreaContainer = this._socialNetworkContainer.querySelector(".social-options-area"); 3220 this._socialOptionsContainer = this._socialAreaContainer.querySelector(".social-options"); 3221 this._socialLinksContainer = this._socialOptionsContainer.querySelector(".social-links"); 3222 this._twitterButton = this._socialLinksContainer.querySelector(".twitter"); 3223 this._facebookButton = this._socialLinksContainer.querySelector(".facebook"); 3224 this._instagramButton = this._socialLinksContainer.querySelector(".instagram"); 3225 this._linkedinButton = this._socialLinksContainer.querySelector(".linkedin"); 3226
3227 this._blueFilterButton = this._rootElement.querySelector(".blue-filter-button"); 3228
3229 this._chaptersListMobileButton = this._rootElement.querySelector(".chapters-list-mobile-button"); 3230 this._chaptersListButton = this._rootElement.querySelector(".chapters-list-button"); 3231
3232 this._closeMobileButton = this._rootElement.querySelector(".close-mobile-button"); 3233 }
3234
3235 get root() { 3236 return this._rootElement;
3237 }
3238
3239 get logo() { 3240 return this._logo;
3241 }
3242
3243 get buttonsRoot() { 3244 return this._buttonContainer;
3245 }
3246
3247 get smallFontSizeButton() { 3248 return this._smallFontSizeButton;
3249 }
3250
3251 get smallFontSizeInput() { 3252 return this._smallFontSizeInput;
3253 }
3254
3255 get mediumFontSizeButton() { 3256 return this._mediumFontSizeButton;
3257 }
3258
3259 get mediumFontSizeInput() { 3260 return this._mediumFontSizeInput;
3261 }
3262
3263 get largeFontSizeButton() { 3264 return this._largeFontSizeButton;
3265 }
3266
3267 get largeFontSizeInput() { 3268 return this._largeFontSizeInput;
3269 }
3270
3271 get languageRoot(){ 3272 return this._languageContainer;
3273 }
3274
3275 get ptLanguageButton() { 3276 return this._ptLanguageButton;
3277 }
3278 get enLanguageButton() { 3279 return this._enLanguageButton;
3280 }
3281
3282 get fontSizeRoot(){ 3283 return this._fontSizeContainer;
3284 }
3285
3286 get fontSizeAreaRoot(){ 3287 return this._fontSizeAreaContainer;
3288 }
3289
3290 get socialNetworkRoot(){ 3291 return this._socialNetworkContainer;
3292 }
3293
3294 get socialOptionsAreaRoot(){ 3295 return this._socialAreaContainer;
3296 }
3297
3298 get fontSizeButton() { 3299 return this._fontSizeButton;
3300 }
3301
3302 get socialNetworkButton() { 3303 return this._socialNetworkButton;
3304 }
3305
3306 get blueFilterButton() { 3307 return this._blueFilterButton;
3308 }
3309
3310 get chaptersListButton() { 3311 return this._chaptersListButton;
3312 }
3313
3314 get chaptersListMobileButton () { 3315 return this._chaptersListMobileButton;
3316 }
3317
3318 get closeMobileButton() { 3319 return this._closeMobileButton;
3320 }
3321
3322 get fontSizeOptionsRoot() { 3323 return this._fontSizeOptionsContainer;
3324 }
3325 }
3326
3327 class Content
3328 { 3329 constructor() { 3330 this._rootElement = document.querySelector("#${prefixoCSS}-content"); 3331 this._summaryContainer = this._rootElement.querySelector(".summary"); 3332 this._summaryListContainer = this._summaryContainer.querySelector(".list"); 3333 this._chapterContainer = this._rootElement.querySelector(".chapter"); 3334 this._chapterHeader = this._chapterContainer.querySelector(".header"); 3335 this._chapterListening = this._chapterContainer.querySelector(".listening"); 3336 this._chapterIntroduction = this._chapterContainer.querySelector(".introduction"); 3337 this._chapterTopicsContainer = this._chapterContainer.querySelector(".topics"); 3338 }
3339
3340 get topicList()
3341 { 3342 return this._chapterTopicsContainer.getElementsByClassName("topic"); 3343 }
3344
3345 topicTitle(topic) { 3346 return topic.querySelector(".title"); 3347 }
3348
3349 topicContent(topic) { 3350 return topic.querySelector(".content"); 3351 }
3352
3353 get chapterIntroduction() { 3354 return this._chapterIntroduction;
3355 }
3356
3357 get root() { 3358 return this._rootElement;
3359 }
3360
3361 get summaryListContainer() { 3362 return this.this._summaryListContainer;
3363 }
3364
3365 get chapterListeningRoot() { 3366 return this._chapterListening;
3367 }
3368
3369 get chapterRoot() { 3370 return this._chapterContainer;
3371 }
3372 }
3373
3374 class Footer
3375 { 3376 constructor()
3377 { 3378 this._rootElement = document.querySelector("#${prefixoCSS}-footer"); 3379 this._nextChapterButton = this._rootElement.querySelector(".next-chapter"); 3380 this._chaptersListButton = this._rootElement.querySelector(".chapters-list-button"); 3381 }
3382
3383 get root() { 3384 return this._rootElement;
3385 }
3386
3387 get chaptersListButton() { 3388 return this._chaptersListButton;
3389 }
3390 }
3391
3392 class MobileSummary
3393 { 3394 constructor()
3395 { 3396 this._rootElement = document.querySelector("#${prefixoCSS}-mobile-summary"); 3397 this._inThisChapterButton = this._rootElement.querySelector(".in-this-chapter-button"); 3398 this._summaryAreaContainer = this._rootElement.querySelector(".summary-area"); 3399 this._closeButton = this._summaryAreaContainer.querySelector(".close-button"); 3400 this._summaryContentContainer = this._summaryAreaContainer.querySelector(".summary-content"); 3401 this._summaryHeader = this._summaryContentContainer.querySelector(".header"); 3402 this._summaryList = this._summaryContentContainer.querySelector(".list"); 3403 this._nextChapterButton = this._summaryContentContainer.querySelector(".next-chapter"); 3404 }
3405
3406 get root() { 3407 return this._rootElement;
3408 }
3409
3410 get inThisChapterButton() { 3411 return this._inThisChapterButton;
3412 }
3413
3414 get closeButton() { 3415 return this._closeButton;
3416 }
3417
3418 get summaryAreaRoot() { 3419 return this._summaryAreaContainer;
3420 }
3421
3422 itemList() { 3423 return this._summaryContentContainer.getElementsByClassName("item"); 3424 }
3425 }
3426
3427 class DesktopSummary
3428 { 3429 constructor(content){ 3430 this._rootElement = content._summaryContainer;
3431 this._summaryListContainer = content._summaryListContainer;
3432 }
3433
3434 get root() { 3435 return this._rootElement;
3436 }
3437
3438 itemList() { 3439 return this._summaryListContainer.getElementsByClassName("item"); 3440 }
3441 }
3442
3443 class ChaptersListMenu
3444 { 3445 constructor()
3446 { 3447 this._rootElement = document.querySelector("#${prefixoCSS}-chapters-list-menu"); 3448 this._headerContainer = this._rootElement.querySelector(".header"); 3449 this._closeButton = this._headerContainer.querySelector(".close"); 3450 }
3451
3452 get root() { 3453 return this._rootElement;
3454 }
3455
3456 get closeButton() { 3457 return this._closeButton;
3458 }
3459 }
3460
3461 class BaseControl
3462 { 3463 constructor(){ 3464 this._header = new Header();
3465 this._content = new Content();
3466 this._footer = new Footer();
3467 this._mobileSummary = new MobileSummary();
3468 this._desktopSummary = new DesktopSummary(this._content);
3469 this._chaptersListMenu = new ChaptersListMenu();
3470 }
3471
3472 get header(){ 3473 return self._header;
3474 }
3475
3476 get footer() { 3477 return this._footer;
3478 }
3479
3480 get content() { 3481 return this._content;
3482 }
3483
3484 get chaptersListMenu() { 3485 return this._chaptersListMenu;
3486 }
3487
3488 get desktopSummary() { 3489 return this._desktopSummary;
3490 }
3491
3492 get mobileSummary() { 3493 return this._mobileSummary;
3494 }
3495
3496 get mobileModeEnabled() { 3497 return window.innerWidth <= ${mobileScreenSize}; 3498 }
3499 }
3500
3501
3502 class FontSizeHandler
3503 { 3504 constructor(header, content, controller) { 3505
3506 this.header = header;
3507 this.content = content;
3508 this.controller = controller;
3509
3510 this.changeFontSize = this.changeFontSize.bind(this);
3511 this.defineFontSizeOnEvent = this.defineFontSizeOnEvent.bind(this);
3512
3513 window.addEventListener('resize', this.defineFontSizeOnEvent); 3514 window.addEventListener('load', this.defineFontSizeOnEvent); 3515
3516 const a = this.header.smallFontSizeButton;
3517 const smallFontClickHandler = e => { 3518 this.changeFontSize(this.header.smallFontSizeInput.value);
3519
3520 this.header.mediumFontSizeInput.checked = false
3521 this.header.largeFontSizeInput.checked = false
3522 this.header.smallFontSizeInput.checked = true;
3523 };
3524
3525 this.header.smallFontSizeButton.addEventListener("click", smallFontClickHandler); 3526
3527 const mediumFontClickHandler = (e) => { 3528 this.header.smallFontSizeInput.checked = false;
3529 this.header.largeFontSizeInput.checked = false
3530 this.header.mediumFontSizeInput.checked = true;
3531
3532 this.changeFontSize(this.header.mediumFontSizeInput.value);
3533 };
3534 this.header.mediumFontSizeButton.addEventListener("click", mediumFontClickHandler); 3535
3536 const largeFontSizeClickHandler = e => { 3537 this.changeFontSize(this.header.largeFontSizeInput.value);
3538
3539 this.header.smallFontSizeInput.checked = false
3540 this.header.mediumFontSizeInput.checked = false
3541 this.header.largeFontSizeInput.checked = true;
3542 };
3543 this.header.largeFontSizeButton.addEventListener("click", largeFontSizeClickHandler); 3544 }
3545
3546 changeFontSize(fontSizeIndex)
3547 { 3548 const tagNames = ["p", "li", "span", "h1", "h2", "h3", "h4", "h5", "h6", "input", "label"];
3549
3550 let elements = [];
3551
3552 for(let i = 0; i <tagNames.length; ++i){ 3553 const tags = this.content.chapterIntroduction.getElementsByTagName(tagNames[i]);
3554 elements = elements.concat(Array.from(tags));
3555 }
3556
3557 const topics = this.content.topicList;
3558
3559 for(let i = 0; i < topics.length; ++i) { 3560 const topic = topics[i];
3561 const topicTitle = this.content.topicTitle(topic);
3562 const topicContent = this.content.topicContent(topic);
3563
3564 for(let i = 0; i <tagNames.length; ++i){ 3565 elements = elements.concat(Array.from(topicContent.getElementsByTagName(tagNames[i])));
3566 }
3567 elements.push(topicTitle);
3568 }
3569
3570 let fontSizes = [];
3571 let topicSizes = [];
3572 if (this.controller.mobileModeEnabled) { 3573 fontSizes = ['12px', '16px', '20px'];
3574 topicSizes = ['22px', '24px', '30px'];
3575 } else { 3576 fontSizes = ['16px', '18px', '24px'];
3577 topicSizes = ['22px', '32px', '32px'];
3578 }
3579
3580 elements.forEach( element => { 3581 if (element.classList.contains('title')) { 3582 element.style.fontSize = topicSizes[fontSizeIndex];
3583 } else { 3584 element.style.fontSize = fontSizes[fontSizeIndex];
3585 }
3586 });
3587 }
3588
3589 clickEventHandler(e)
3590 { 3591 if (e.target != this.header.fontSizeRoot && !this.header.fontSizeRoot.contains(e.target)) { 3592 this.header.fontSizeAreaRoot.classList.add("collapse"); 3593 this.header.fontSizeButton.classList.remove("active-button"); 3594 }
3595
3596 // Relacionado ao span de alteração de texto
3597 if (this.header.fontSizeButton.contains(e.target) || this.header.fontSizeAreaRoot.contains(e.target)) { 3598 this.header.fontSizeAreaRoot.classList.toggle("collapse"); 3599 this.header.fontSizeButton.classList.toggle("active-button"); 3600 }
3601 }
3602
3603 defineFontSizeOnEvent(e){ 3604 if (this.header.smallFontSizeInput.checked) { 3605 this.changeFontSize(this.header.smallFontSizeInput.value);
3606 }
3607
3608 if (this.header.mediumFontSizeInput.checked) { 3609 this.changeFontSize(this.header.mediumFontSizeInput.value);
3610 }
3611
3612 if (this.header.largeFontSizeInput.checked) { 3613 this.changeFontSize(this.header.largeFontSizeInput.value);
3614 }
3615 }
3616 };
3617
3618 class BlueLightFilterHandler
3619 { 3620 constructor(header, content, footer, mobileSummary, chaptersListMenu) { 3621 this.header = header;
3622 this.content = content;
3623 this.footer = footer;
3624 this.mobileSummary = mobileSummary;
3625 this.chaptersListMenu = chaptersListMenu;
3626 }
3627
3628 clickEventHandler(e)
3629 { 3630 if (e.target == this.header.blueFilterButton || this.header.blueFilterButton.contains(e.target)) { 3631
3632 const rodapeElemento = document.querySelector(".petrobras-rodape"); 3633 if (rodapeElemento) { 3634 rodapeElemento.classList.toggle("blue-filter-rodape"); 3635 }
3636
3637 this.header.blueFilterButton.classList.toggle("active-button"); 3638
3639 if (Liferay.ThemeDisplay.isSignedIn()) { 3640 if (this.mobileModeEnabled) { 3641 this._header.root.classList.remove("blue-filter-header-desktop-logged"); 3642 this._header.root.classList.add("blue-filter-header-mobile-logged"); 3643 } else{ 3644 this._header.root.classList.add("blue-filter-header-desktop-logged"); 3645 this._header.root.classList.remove("blue-filter-header-mobile-logged"); 3646
3647 }
3648 }
3649 }
3650
3651 }
3652 };
3653
3654 class SocialNetworkHandler
3655 { 3656 constructor(header, content, controlManager) { 3657 this.header = header;
3658 this.content = content;
3659 this.controlManager = controlManager;
3660
3661 this.hideDesktopShareContent = this.hideDesktopShareContent.bind(this);
3662 this.removeActiveButtonClassAfterSharing = this.removeActiveButtonClassAfterSharing.bind(this);
3663
3664 window.addEventListener('click', this.removeActiveButtonClassAfterSharing); 3665
3666 this.mobileShare = async () => { 3667
3668 try { 3669 const shareData = { 3670 title: document.title,
3671 text: '',
3672 url: window.location.href
3673 };
3674 await navigator.share(shareData);
3675 this.header.socialNetworkButton.classList.toggle("active-button"); 3676 } catch(err) { 3677
3678 }
3679 };
3680 }
3681
3682 removeActiveButtonClassAfterSharing() { 3683 if (this.header.socialNetworkButton.classList.contains("active-button") && this.controlManager.mobileModeEnabled) { 3684 this.header.socialNetworkButton.classList.remove("active-button") 3685 }
3686 }
3687
3688 clickEventHandler(e, mobileMode)
3689 { 3690 if (mobileMode) { 3691 this.header.socialOptionsAreaRoot.classList.add("collapse"); 3692 if (this.header.socialNetworkButton.contains(e.target)) { 3693 this.header.socialNetworkButton.classList.toggle("active-button"); 3694 this.mobileShare();
3695 }
3696 } else { 3697 // Relacionado ao rede social
3698 if (e.target != this.header.socialNetworkRoot && !this.header.socialNetworkRoot.contains(e.target)) { 3699 this.header.socialOptionsAreaRoot.classList.add("collapse"); 3700 this.header.socialOptionsAreaRoot.classList.remove("active-button"); 3701 }
3702
3703 if (this.header.socialNetworkButton.contains(e.target) || this.header.socialOptionsAreaRoot.contains(e.target)) { 3704 this.header.socialOptionsAreaRoot.classList.toggle("collapse"); 3705 this.header.socialNetworkButton.classList.toggle("active-button"); 3706 }
3707 }
3708
3709 if (!this.header.socialNetworkButton.contains(e.target)) { 3710 this.header.socialNetworkButton.classList.remove("active-button"); 3711 }
3712 }
3713
3714 hideDesktopShareContent()
3715 { 3716 this.header.socialOptionsAreaRoot.classList.add("collapse"); 3717 }
3718 };
3719
3720 class LanguageOptionHandler
3721 { 3722 constructor(header) { 3723 this.header = header;
3724 }
3725
3726 clickEventHandler(e)
3727 { 3728 if (this.header.ptLanguageButton.contains(e.target) || this.header.enLanguageButton.contains(e.target)) { 3729 this.header.ptLanguageButton.classList.toggle("current-language"); 3730 this.header.enLanguageButton.classList.toggle("current-language"); 3731 }
3732 }
3733 };
3734
3735 class ChapterListMenuHandler
3736 { 3737 constructor(header, footer, chaptersListMenu) { 3738 this.header = header;
3739 this.footer = footer;
3740 this.chaptersListMenu = chaptersListMenu;
3741
3742 this.changeChaptersListMenuVisibility = this.changeChaptersListMenuVisibility.bind(this);
3743 this.onlyShowCloseAndLanguageButtonOnHeader = this.onlyShowCloseAndLanguageButtonOnHeader.bind(this);
3744 this.restoreMobileButtonsVisibility = this.restoreMobileButtonsVisibility.bind(this);
3745 this.restoreDesktopButtonsVisibility = this.restoreDesktopButtonsVisibility.bind(this);
3746
3747 this.header.chaptersListButton.addEventListener("click", this.changeChaptersListMenuVisibility); 3748 this.header.chaptersListMobileButton.addEventListener("click", this.changeChaptersListMenuVisibility); 3749 this.header.closeMobileButton.addEventListener("click", this.changeChaptersListMenuVisibility); 3750 this.footer.chaptersListButton.addEventListener("click", this.changeChaptersListMenuVisibility); 3751 this.chaptersListMenu.closeButton.addEventListener("click", this.changeChaptersListMenuVisibility); 3752
3753 this.header.closeMobileButton.addEventListener("click", this.restoreMobileButtonsVisibility); 3754 this.header.chaptersListMobileButton.addEventListener("click", this.onlyShowCloseAndLanguageButtonOnHeader); 3755 }
3756
3757 changeChaptersListMenuVisibility(e) { 3758 this.chaptersListMenu.root.classList.toggle("collapse"); 3759
3760 <#if exibindoNaPaginaDeSustentabilidade>
3761 const onHomePage = true;
3762 <#else>
3763 const onHomePage = false;
3764 </#if>
3765
3766 if (onHomePage) { 3767 this.header.root.classList.add("hidden"); 3768 }
3769 };
3770
3771 clickEventHandler(e) { 3772 if (!this.chaptersListMenu.root.contains(e.target)
3773 && (e.target != this.header.chaptersListButton && !this.header.chaptersListButton.contains(e.target))
3774 && (e.target != this.header.chaptersListMobileButton && !this.header.chaptersListMobileButton.contains(e.target))
3775 && (e.target != this.footer.chaptersListButton && !this.footer.chaptersListButton.contains(e.target))
3776 ) { 3777
3778 // this.chaptersListMenu.root.classList.add("collapse"); 3779 }
3780 };
3781
3782 onlyShowCloseAndLanguageButtonOnHeader()
3783 { 3784 this.header.fontSizeRoot.classList.add("hidden"); 3785 this.header.socialNetworkRoot.classList.add("hidden"); 3786 this.header.blueFilterButton.classList.add("hidden"); 3787 this.header.chaptersListMobileButton.classList.add("hidden"); 3788 this.header.languageRoot.style.display = "flex";
3789 this.header.languageRoot.classList.remove("hidden"); 3790 this.header.closeMobileButton.style.display = "inline-block";
3791 this.header.closeMobileButton.classList.remove("hidden"); 3792 }
3793
3794 restoreMobileButtonsVisibility()
3795 { 3796 this.header.fontSizeRoot.classList.remove("hidden"); 3797 this.header.socialNetworkRoot.classList.remove("hidden"); 3798 this.header.blueFilterButton.classList.remove("hidden"); 3799 this.header.chaptersListMobileButton.classList.remove("hidden"); 3800 this.header.languageRoot.classList.add("hidden"); 3801 this.header.closeMobileButton.style.removeProperty('display'); 3802 this.header.closeMobileButton.classList.add("hidden"); 3803 }
3804
3805 restoreDesktopButtonsVisibility()
3806 { 3807 this.header.fontSizeRoot.classList.remove("hidden"); 3808 this.header.socialNetworkRoot.classList.remove("hidden"); 3809 this.header.blueFilterButton.classList.remove("hidden"); 3810 this.header.chaptersListMobileButton.classList.remove("hidden"); 3811 this.header.languageRoot.classList.remove("hidden"); 3812 this.header.closeMobileButton.style.removeProperty('display'); 3813 this.header.closeMobileButton.classList.add("hidden"); 3814 }
3815 };
3816
3817 class MobileChapterSummaryHandler
3818 { 3819 constructor(mobileSummary, controller) { 3820
3821 this.mobileSummary = mobileSummary;
3822 this.controller = controller;
3823 this.changeMobileSummaryContentVisibility = this.changeMobileSummaryContentVisibility.bind(this);
3824 this.hideMobileSummaryContent = this.hideMobileSummaryContent.bind(this);
3825 this.changeSummaryVisibility = this.changeSummaryVisibility.bind(this);
3826
3827 this.mobileSummary.inThisChapterButton.addEventListener("click", this.changeMobileSummaryContentVisibility); 3828 this.mobileSummary.closeButton.addEventListener("click", this.changeMobileSummaryContentVisibility); 3829
3830 window.addEventListener('resize', this.changeSummaryVisibility); 3831 window.addEventListener('load', this.changeSummaryVisibility); 3832 }
3833
3834 changeMobileSummaryContentVisibility() { 3835 this.mobileSummary.summaryAreaRoot.classList.toggle("hidden"); 3836 }
3837
3838 hideMobileSummaryContent() { 3839 this.mobileSummary.summaryAreaRoot.classList.add("hidden"); 3840 }
3841
3842 changeSummaryVisibility(e) { 3843 <#if exibindoNaPaginaDeSustentabilidade>
3844 const onHomePage = true;
3845 <#else>
3846 const onHomePage = false;
3847 </#if>
3848 if (this.controller.mobileModeEnabled) { 3849 if (onHomePage){ 3850 this.mobileSummary.inThisChapterButton.classList.add('hidden'); 3851 }else{ 3852 this.mobileSummary.inThisChapterButton.classList.remove('hidden'); 3853 }
3854 }
3855 }
3856 };
3857
3858
3859 class HeaderButtonsControl extends BaseControl
3860 { 3861 constructor() { 3862 super();
3863
3864 this.fontSizeHandler = new FontSizeHandler(this._header, this._content, this);
3865 this.blueLightFilterHandler = new BlueLightFilterHandler(this._header, this._content, this._footer, this._mobileSummary, this._chaptersListMenu);
3866 this.socialNetworkHandler = new SocialNetworkHandler(this._header, this._content, this);
3867 this.languageOptionHandler = new LanguageOptionHandler(this._header);
3868 this.chapterListMenuHandler = new ChapterListMenuHandler(this._header, this._footer, this._chaptersListMenu);
3869 this.mobileChapterSummaryHandler = new MobileChapterSummaryHandler(this._mobileSummary, this);
3870
3871 this.clickEventHandler = this.clickEventHandler.bind(this);
3872 this.windowSizeEventHandler = this.windowSizeEventHandler.bind(this);
3873 this.showMenuHeaderOnHomeInMobileMode = this.showMenuHeaderOnHomeInMobileMode.bind(this);
3874 this.hideMenuHeaderOnHomeInMobileMode = this.hideMenuHeaderOnHomeInMobileMode.bind(this);
3875 this.selectAnchorOnVerticalScroll = this.selectAnchorOnVerticalScroll.bind(this);
3876
3877 window.addEventListener('resize', this.windowSizeEventHandler); 3878 window.addEventListener('load', this.windowSizeEventHandler); 3879
3880 document.addEventListener("click", this.clickEventHandler, false); 3881
3882 document.addEventListener('scroll', this.selectAnchorOnVerticalScroll); 3883
3884 this.windowSizeEventHandler();
3885 }
3886
3887 selectAnchorOnVerticalScroll(e) { 3888 if (Liferay.ThemeDisplay.isSignedIn()) { 3889 if (this.mobileModeEnabled) { 3890 } else { 3891 if (window.pageYOffset > 60){ 3892 this._header.root.style = "position: fixed; top: 0; z-index: 100 !important;";
3893
3894 } else{ 3895 this._header.root.style = "position: relative; top: 0px;";
3896 }
3897 }
3898 }
3899 }
3900
3901 showMenuHeaderOnHomeInMobileMode(mobileModeEnabled) { 3902 <#if exibindoNaPaginaDeSustentabilidade>
3903 const onHomePage = true;
3904 <#else>
3905 const onHomePage = false;
3906 </#if>
3907 if (this.mobileModeEnabled && onHomePage) { 3908 this._header.root.classList.remove('hidden'); 3909 }
3910 }
3911
3912 hideMenuHeaderOnHomeInMobileMode(mobileModeEnabled) { 3913 <#if exibindoNaPaginaDeSustentabilidade>
3914 const onHomePage = true;
3915 <#else>
3916 const onHomePage = false;
3917 </#if>
3918 if (!this.mobileModeEnabled && onHomePage) { 3919 this._header.root.classList.add('hidden'); 3920 }
3921 }
3922
3923 clickEventHandler(e) { 3924 this.languageOptionHandler.clickEventHandler(e);
3925 this.fontSizeHandler.clickEventHandler(e);
3926 this.blueLightFilterHandler.clickEventHandler(e);
3927 this.socialNetworkHandler.clickEventHandler(e, this.mobileModeEnabled);
3928 this.chapterListMenuHandler.clickEventHandler(e);
3929 }
3930
3931 windowSizeEventHandler(e) { 3932
3933 if (this.mobileModeEnabled) { 3934 if (!this._chaptersListMenu.root.classList.contains("collapse")){ 3935 this.chapterListMenuHandler.onlyShowCloseAndLanguageButtonOnHeader();
3936 this.showMenuHeaderOnHomeInMobileMode();
3937 }
3938 this.socialNetworkHandler.hideDesktopShareContent();
3939
3940 this._footer.chaptersListButton.addEventListener("click", this.chapterListMenuHandler.onlyShowCloseAndLanguageButtonOnHeader); 3941 this._footer.chaptersListButton.addEventListener('click', this.showMenuHeaderOnHomeInMobileMode); 3942 }
3943 else { 3944 this._header.languageRoot.classList.remove("hidden"); 3945 this.chapterListMenuHandler.restoreDesktopButtonsVisibility();
3946 this.footer.chaptersListButton.removeEventListener("click", this.chapterListMenuHandler.onlyShowCloseAndLanguageButtonOnHeader); 3947 this.mobileChapterSummaryHandler.hideMobileSummaryContent();
3948 this._footer.chaptersListButton.removeEventListener('click', this.showMenuHeaderOnHomeInMobileMode); 3949 this.hideMenuHeaderOnHomeInMobileMode();
3950 }
3951
3952 if (Liferay.ThemeDisplay.isSignedIn()) { 3953 if (this.mobileModeEnabled) { 3954 this._header.root.classList.remove("header-logged-desktop"); 3955 this._header.root.classList.add("header-logged-mobile"); 3956 this._header.root.style.removeProperty('top'); 3957
3958 this._chaptersListMenu.root.style = "top : 110px";
3959 this._mobileSummary.summaryAreaRoot.style = "top: 60px";
3960 } else { 3961 this._header.root.classList.remove("header-logged-mobile"); 3962 this._header.root.classList.add("header-logged-desktop"); 3963 this._header.root.style = "top: 60px";
3964
3965 this._chaptersListMenu.root.style.removeProperty('top'); 3966 this._mobileSummary.summaryAreaRoot.style.removeProperty('top'); 3967
3968 }
3969 }
3970 }
3971 };
3972
3973 class SummaryListControl extends BaseControl
3974 { 3975 constructor(){ 3976 super();
3977
3978 this.anchorClickEvent = this.anchorClickEvent.bind(this);
3979 this.selectAnchorOnVerticalScroll = this.selectAnchorOnVerticalScroll.bind(this);
3980 this.closeMobileSummary = this.closeMobileSummary.bind(this);
3981 this.addAnchorClickEventHandler();
3982 this.clickedAnchor = null;
3983
3984 <#if exibindoNaPaginaDeSustentabilidade >
3985 if (!this.mobileModeEnabled) { 3986 const items = this._desktopSummary.itemList();
3987 let item = null;
3988 if (items.length == 1) { 3989 item = items[0];
3990 }else{ 3991 if (items.length > 1) { 3992 item = items[1];
3993 }
3994 }
3995
3996 if (item) { 3997 const aElement = item.querySelector("a"); 3998 if (aElement){ 3999 aElement.classList.add("active-summary-item"); 4000 }
4001 }
4002 }
4003 <#else>
4004 document.addEventListener('scroll', this.selectAnchorOnVerticalScroll); 4005 </#if>
4006
4007 this.mobileItemList = this._mobileSummary.itemList();
4008 this.desktopItemList = this._desktopSummary.itemList();
4009 }
4010
4011 selectAnchorOnVerticalScroll(e)
4012 { 4013 if (this.clickedAnchor){ 4014 this.clickedAnchor = null;
4015 return;
4016 }
4017
4018 let currentAnchor = '';
4019 const topics = this._content.topicList;
4020 for (let i = 0; i < topics.length; ++i) { 4021 const topic = topics[i];
4022 const topicTop = topic.offsetTop;
4023 const topicHeight = topic.clientHeight;
4024 if (window.pageYOffset >= topicTop - topicHeight/2) { 4025 const topicTitle = this._content.topicTitle(topic);
4026 currentAnchor = topicTitle.getAttribute("id"); 4027 }
4028 }
4029
4030 const a = document.documentElement.scrollHeight;
4031 if (currentAnchor.length == 0 && topics.length != 0) { 4032 let topicTitle = null;
4033 if (topics[0].offsetTop <= window.pageYOffset) { 4034 topicTitle = this._content.topicTitle(topics[0]);
4035 } else { 4036 if (topics.length > 1){ 4037 const lastTopic = topics[topics.length -1];
4038 if (lastTopic.offsetTop <= window.pageYOffset) { 4039 topicTitle = this._content.topicTitle(topics[topics.length -2]);
4040 }
4041 }
4042 }
4043 if (topicTitle !== null){ 4044 currentAnchor = topicTitle.getAttribute("id"); 4045 }
4046 }
4047
4048 const itemList = Array.from(this._desktopSummary.itemList()).concat(Array.from(this._mobileSummary.itemList()));
4049
4050 for (let i = 0; i < itemList.length; ++i) { 4051 const item = itemList[i];
4052 const aElement = item.querySelector("a"); 4053
4054 const href = aElement.href;
4055 const anchor = href.substring(href.indexOf("#") + 1); 4056
4057 if (currentAnchor == anchor) { 4058 aElement.classList.add("active-summary-item"); 4059 }else { 4060 aElement.classList.remove("active-summary-item"); 4061 }
4062 }
4063 }
4064
4065 anchorClickEvent(e) { 4066 const syncStatusInList = (e, firstList, secondList) => { 4067
4068 this.clickedAnchor = null;
4069 let clickedAElement = null;
4070 for (let i = 0; i < firstList.length; ++i) { 4071 const item = firstList[i];
4072 const aElement = item.querySelector("a"); 4073 if (item == e.target || item.contains(e.target)) { 4074 this.clickedAnchor = aElement;
4075 aElement.classList.add("active-summary-item"); 4076 clickedAElement = aElement;
4077 } else { 4078 aElement.classList.remove("active-summary-item"); 4079 }
4080 }
4081
4082 for (let i = 0; i < secondList.length; ++i) { 4083 const item = secondList[i];
4084 const aElement = item.querySelector("a"); 4085 if (clickedAElement && clickedAElement.href == aElement.href) { 4086 aElement.classList.add("active-summary-item"); 4087 }else { 4088 aElement.classList.remove("active-summary-item"); 4089 }
4090 }
4091 };
4092
4093 if (this.mobileModeEnabled) { 4094 syncStatusInList(e, this._mobileSummary.itemList(), this._desktopSummary.itemList());
4095 } else { 4096 syncStatusInList(e, this._desktopSummary.itemList(), this._mobileSummary.itemList());
4097 }
4098
4099
4100
4101 <#if !exibindoNaPaginaDeSustentabilidade >
4102 window.setTimeout( () => { 4103
4104 let diffScroll = 70;
4105
4106 if (Liferay.ThemeDisplay.isSignedIn()) { 4107 diffScroll = 150;
4108 }
4109 if (this.fnBrowserDetect() == "firefox") { 4110 diffScroll = 100;
4111 if (Liferay.ThemeDisplay.isSignedIn()) { 4112 diffScroll = 150;
4113 }
4114 }
4115 window.focus();
4116 window.scrollTo(window.scrollX, window.pageYOffset - diffScroll);
4117 this.closeMobileSummary();
4118 }, 0);
4119 <#else>
4120 const exibindoNaPaginaDeSustentabilidade = true;
4121 </#if>
4122 }
4123
4124 fnBrowserDetect() { 4125 let userAgent = navigator.userAgent;
4126 let browserName = "";
4127 if (userAgent.match(/chrome|chromium|crios/i)) { 4128 browserName = "chrome";
4129 } else if (userAgent.match(/firefox|fxios/i)) { 4130 browserName = "firefox";
4131 } else if (userAgent.match(/safari/i)) { 4132 browserName = "safari";
4133 } else if (userAgent.match(/opr\//i)) { 4134 browserName = "opera";
4135 } else if (userAgent.match(/edg/i)) { 4136 browserName = "edge";
4137 } else { 4138 browserName="No browser detection";
4139 }
4140 return browserName;
4141 }
4142
4143 closeMobileSummary()
4144 { 4145 this.mobileSummary.summaryAreaRoot.classList.add("hidden"); 4146 }
4147
4148 addAnchorClickEventHandler()
4149 { 4150 const mobileItemList = Array.from(this._mobileSummary.itemList());
4151 const itemList = Array.from(this._desktopSummary.itemList()).concat(mobileItemList);
4152
4153 for (let i = 0; i < itemList.length; ++i) { 4154 const item = itemList[i];
4155 item.addEventListener('click', this.anchorClickEvent); 4156 }
4157
4158 for (let i = 0; i < mobileItemList.length; ++i) { 4159 const item = itemList[i];
4160 item.addEventListener('click', this.closeMobileSummary); 4161 }
4162 }
4163 };
4164
4165 class ContentControl extends BaseControl
4166 { 4167 constructor() { 4168 super();
4169
4170 this.windowSizeEventHandler = this.windowSizeEventHandler.bind(this);
4171
4172 window.addEventListener('resize', this.windowSizeEventHandler); 4173 window.addEventListener('load', this.windowSizeEventHandler); 4174
4175 this.windowSizeEventHandler();
4176 }
4177
4178 windowSizeEventHandler(e) { 4179 if (this.mobileModeEnabled) { 4180 this._content.chapterRoot.classList.add("remove-right-padding"); 4181 }
4182 else { 4183 this._content.chapterRoot.classList.remove("remove-right-padding"); 4184 }
4185 }
4186 };
4187
4188 const headerButtonsControl = new HeaderButtonsControl();
4189
4190 new SummaryListControl();
4191
4192 new ContentControl();
4193
4194 });
4195
4196
4197 // Script para Busca
4198
4199 <#assign searchIcon = "searchIcon_cap_" + randomNumber(100) />
4200 <#assign searchContainer = "searchContainer_cap_" + randomNumber(100) />
4201 <#assign modalOverlay = "modalOverlay_cap_" + randomNumber(100) />
4202 <#assign searchBoxRectangle = "searchBoxRectangle_cap_" + randomNumber(100) />
4203 <#assign searchInput = "searchInput_cap_" + randomNumber(100) />
4204 <#assign cleanSearchButton = "cleanSearchButton_cap_" + randomNumber(100) />
4205
4206 const ${searchIcon} = document.querySelector('.${prefixoCSS} #${prefixoCSS}-header .buttons .search-icon'); 4207 const ${searchContainer} = document.querySelector('.${prefixoCSS} #${prefixoCSS}-header .search-container'); 4208 const ${modalOverlay} = document.querySelector('.${prefixoCSS} .modal-overlay'); 4209 const ${searchBoxRectangle} = document.querySelector('.${prefixoCSS} #${prefixoCSS}-header #search-box-rectangle'); 4210 const ${searchInput} = document.querySelector('.${prefixoCSS} #${prefixoCSS}-header .search-container input'); 4211 const ${cleanSearchButton} = document.querySelector('.${prefixoCSS} #${prefixoCSS}-header .search-container #clean-search-button'); 4212
4213 <#assign resultsContainer = "resultsContainer_cap_" + randomNumber(100) />
4214 let ${resultsContainer} = ""; 4215
4216
4217 <#assign showContainerBox = "showContainerBox_cap_" + randomNumber(100) />
4218 const ${showContainerBox} = () => { 4219 ${modalOverlay}.classList.add('active'); 4220 ${searchContainer}.classList.add('active'); 4221 ${searchBoxRectangle}.classList.add('active'); 4222 }
4223
4224 <#assign hideContainerBox = "hideContainerBox_cap_" + randomNumber(100) />
4225 const ${hideContainerBox} = () => { 4226 ${modalOverlay}.classList.remove('active'); 4227 ${searchContainer}.classList.remove('active'); 4228 ${searchBoxRectangle}.classList.remove('active'); 4229 ${searchContainer}.classList.remove('results'); 4230 ${resultsContainer}.classList.remove('active'); 4231 ${searchInput}.value = ""; 4232 }
4233
4234
4235
4236 AUI().ready(function() { 4237 let searchBarInput = document.querySelector(".search_input"); 4238 const siteSearchUrl = document.querySelector(".site-search-url").value; 4239 ${resultsContainer} = document.querySelector(".fragment_5587"); 4240 ${resultsContainer}.classList.add('cap'); 4241
4242 const mountSearchUrl = () => { 4243
4244 const searchParams = new URLSearchParams(""); 4245 const urlParams = new URLSearchParams(window.location.search);
4246
4247
4248 searchParams.set("q", urlParams.get("q")); 4249
4250 const baseUrl = themeDisplay.getLayoutURL();
4251
4252
4253 searchParams.append("type", "com.liferay.journal.model.JournalArticle"); 4254
4255 return searchParams;
4256 };
4257
4258 const configureUrlToExecuteSearch = (event) => { 4259 var url = siteSearchUrl;
4260 if (themeDisplay.getLanguageId() == "en_US") { 4261 url = "/en" + url.replace("busca", "search"); 4262 }
4263
4264 const searchParams = mountSearchUrl();
4265
4266 searchParams.set("q", searchBarInput.value); 4267 searchParams.delete("start"); 4268
4269 window.location.href = url + "?" + searchParams.toString();
4270 };
4271
4272 if(searchBarInput){ 4273 const keyEventHandler = (event) => { 4274 if (event.isComposing || event.keyCode !== 13) { 4275 return;
4276 }
4277
4278 event.preventDefault();
4279
4280 configureUrlToExecuteSearch(event);
4281 };
4282
4283 searchBarInput.addEventListener("keyup", (event) => { 4284 keyEventHandler(event);
4285 });
4286
4287 searchBarInput.addEventListener("keydown", (event) => { 4288 keyEventHandler(event);
4289 });
4290 }
4291
4292 const urlParams = new URLSearchParams(window.location.search);
4293 const myParam = urlParams.get('q'); 4294 if (myParam) { 4295 ${searchContainer}.classList.add('results'); 4296 ${resultsContainer}.classList.add('active'); 4297 ${showContainerBox}(); 4298 searchBarInput.value = myParam;
4299 }
4300
4301 });
4302
4303
4304
4305 ${searchIcon}.addEventListener('click', () => { 4306 ${showContainerBox}(); 4307 })
4308
4309 ${modalOverlay}.addEventListener('click', () => { 4310 ${hideContainerBox}(); 4311 })
4312
4313 ${cleanSearchButton}.addEventListener('click', () => { 4314 ${searchContainer}.classList.remove('results'); 4315 ${resultsContainer}.classList.remove('active'); 4316 ${searchInput}.value = ""; 4317 })
4318
4319
4320
4321 // Vlibras **********************************
4322 AUI().ready(function () { 4323 let buttonVLibras = document.querySelector('[vw-access-button]') 4324
4325 let acessibilityButton = document.querySelector('.${prefixoCSS} .header .buttons .libras-icon') 4326
4327 acessibilityButton.addEventListener('click', () => { 4328 buttonVLibras.click()
4329 //statusSignLanguage()
4330 })
4331 });
4332
4333 // ********************************
4334
4335</script>
