pt
en
es
Destaque de Conteúdo
An error occurred while processing the template.
The following has evaluated to null or missing:
==> corDoCard [in template "400373534#400373580#602245928" at line 431, column 64]
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: ${corDoCard} [in template "400373534#400373580#602245928" at line 431, column 62]
----
1<#--
2 Name: Highlights Contents template
3 File Path: assets/klabin-online/highlights-contents/template.ftl
4-->
5
6<#assign prefix = "kol" />
7<#assign modalContainer = "" />
8<#assign image404 = "https://via.placeholder.com/500x500?text=404" />
9<#assign dlAppService = serviceLocator.findService("com.liferay.document.library.kernel.service.DLAppService")>
10
11<#function isExternal url>
12 <#return !url?contains(themeDisplay.getPortalURL()) && ( url?starts_with("http://") || url?starts_with("https://") ) />
13</#function>
14
15<#function isUrl url>
16 <#return url?has_content />
17</#function>
18
19<#function getRootElement curEntry>
20 <#assign assetRenderer = curEntry.getAssetRenderer() />
21 <#assign article = assetRenderer.getArticle() />
22 <#assign document = saxReaderUtil.read(article.getContent()) />
23 <#return { "root": document.getRootElement(), "article": article } />
24</#function>
25
26<#function getSingleNode name root>
27 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='${name}']/dynamic-content[@language-id='${locale}']") />
28 <#if !xPathSelector??>
29 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='${name}']") />
30 </#if>
31 <#return xPathSelector.selectSingleNode( root ) />
32</#function>
33
34<#function getNodes name root>
35 <#assign xPathSelector = saxReaderUtil.createXPath("dynamic-element[@name='${name}']") />
36 <#return xPathSelector.selectNodes( root ) />
37</#function>
38
39<#macro getUrlImageDestaque imageString>
40 <#attempt>
41 <#assign fileJson = jsonFactoryUtil.createJSONObject(imageString) />
42 <#assign fileEntryId = getterUtil.getInteger(fileJson.get('fileEntryId')) />
43 <#assign fileEntry = dlAppService.getFileEntry(fileEntryId) />
44 <#assign adaptive = "/o/adaptive-media/image/${fileEntryId}/Thumbnail-300x300/${fileJson.get('title')}">
45 <#assign urlImage = themeDisplay.getPortalURL() + "/documents/" + fileEntry.groupId + "/" + fileEntry.uuid + "?t=" + .now?string["HHmmssSSS"]?string />
46 <#recover>
47 <#assign adaptive = image404 />
48 <#assign urlImage = image404 />
49 <#assign fileEntryId = "" />
50 </#recover>
51 <picture data-fileentryid="${fileEntryId}">
52 <source srcset="${adaptive!image404}" />
53 <img class="${prefix}-highlights-contents__imagem-destaque" data-fileentryid="${fileEntryId}" src="${urlImage!image404}" />
54 </picture>
55</#macro>
56
57<#macro getUrlImage imageString>
58 <#attempt>
59 <#assign fileJson = jsonFactoryUtil.createJSONObject(imageString) />
60 <#assign fileEntryId = getterUtil.getInteger(fileJson.get('fileEntryId')) />
61 <#assign fileEntry = dlAppService.getFileEntry(fileEntryId) />
62 <#assign adaptive = "/o/adaptive-media/image/${fileEntryId}/Thumbnail-300x300/${fileJson.get('title')}">
63 <#assign urlImage = themeDisplay.getPortalURL() + "/documents/" + fileEntry.groupId + "/" + fileEntry.uuid + "?t=" + .now?string["HHmmssSSS"]?string />
64 <#recover>
65 <#assign adaptive = image404 />
66 <#assign urlImage = image404 />
67 <#assign fileEntryId = "" />
68 </#recover>
69 <picture data-fileentryid="${fileEntryId}">
70 <source srcset="${adaptive!image404}" />
71 <img class="${prefix}-social-env-responsability__image p-0" data-fileentryid="${fileEntryId}" src="${urlImage!image404}" />
72 </picture>
73</#macro>
74
75<style>
76.${prefix}-highlights-contents__container {
77 width: 100%;
78 height: 27rem;
79 margin: 0 0 32px 0;
80 display: flex;
81 flex-direction: column;
82 align-items: center;
83}
84.${prefix}-highlights-contents__title {
85 font-family: Raleway;
86 font-style: normal;
87 font-weight: bold;
88 font-size: 16px;
89 line-height: 16px;
90 text-transform: uppercase;
91 color: #8B9F37;
92 margin: 0 0 24px 0;
93}
94.${prefix}-highlights-contents__card {
95 width: 100%;
96 height: 100%;
97 max-height: 23.6875rem;
98 display: flex;
99 flex-direction: row;
100}
101.${prefix}-highlights-contents__container-imagem {
102 width: 50%;
103 height: 100%;
104}
105.${prefix}-highlights-contents__imagem-destaque {
106 width: 100%;
107 height: 100%;
108 object-fit: cover;
109 object-position: center;
110}
111.${prefix}-highlights-contents__container-content {
112 flex: 1;
113 height: 100%;
114 display: flex;
115 flex-direction: column;
116 align-items: flex-start;
117 justify-content: center;
118}
119.${prefix}-highlights-contents__adornment-drop {
120 position: absolute;
121 right: 20px;
122 top: 13%;
123}
124.${prefix}-highlights-contents__adornment-drop-line {
125 position: absolute;
126 bottom: 13px;
127 left: 193px;
128 z-index: 1;
129}
130.${prefix}-highlights-contents__card-info-content {
131 display: flex;
132 flex-direction: column;
133 padding: 40px 54px 40px 54px !important;
134}
135.${prefix}-highlights-contents__card-title {
136 font-family: Raleway;
137 font-style: normal;
138 font-weight: 600;
139 font-size: 24px !important;
140 line-height: 22px;
141 color: #3E3E3E;
142 margin-bottom: 23px;
143}
144.${prefix}-highlights-contents__card-subtitle {
145 font-family: Raleway;
146 font-style: normal;
147 font-weight: 700 !important;
148 font-size: 14px !important;
149 line-height: 160%;
150 color: #3E3E3E;
151 margin: 0 !important;
152}
153.${prefix}-highlights-contents__card-description {
154 font-family: Raleway;
155 font-style: normal;
156 font-weight: 400 !important;
157 font-size: 14px !important;
158 line-height: 160%;
159 color: #3E3E3E;
160 margin: 0 !important;
161}
162.${prefix}-highlights-contents__container-actions {
163 display: flex;
164 flex-direction: row;
165 position: absolute;
166 bottom: 31px;
167 right: 48px;
168 z-index: 10;
169}
170.${prefix}-highlights-contents__action {
171 display: flex;
172 flex-direction: row;
173 align-items: center;
174 justify-content: flex-end;
175}
176.${prefix}-highlights-contents__action-left {
177 margin-left: 32px;
178}
179.${prefix}-highlights-contents__action-title {
180 margin: 0 10px 0 0;
181 font-family: Raleway;
182 font-style: normal;
183 font-weight: bold !important;
184 font-size: 16px !important;
185 line-height: 160%;
186 color: #009039;
187 text-transform: lowercase;
188}
189.${prefix}-highlights-contents-lightbox__buttons {
190 position: absolute;
191 bottom: 15px;
192 width: 100%;
193}
194.${prefix}-highlights-contents__action:hover {
195 text-decoration: none;
196 cursor: pointer !important;
197}
198@media (max-width: 1079px) {
199 .${prefix}-highlights-contents__container {
200 height: 31rem;
201 }
202 .${prefix}-highlights-contents__card {
203 max-height: 28.6875rem;
204 }
205 .${prefix}-highlights-contents__container-imagem {
206 width: 46%;
207 }
208 .${prefix}-highlights-contents__adornment-drop-line {
209 bottom: 0;
210 left: 72px;
211 }
212 .${prefix}-highlights-contents__container-actions {
213 bottom: 18px;
214 }
215}
216@media (max-width: 841px) {
217 .${prefix}-highlights-contents__container {
218 height: 38rem;
219 }
220 .${prefix}-highlights-contents__card {
221 max-height: 870px;
222 flex-direction: column;
223 }
224 .${prefix}-highlights-contents__container-imagem {
225 width: 100%;
226 height: 258px;
227 }
228 .${prefix}-highlights-contents__adornment-drop {
229 display: none;
230 }
231 .${prefix}-highlights-contents__adornment-drop-line {
232 display: none;
233 }
234 .${prefix}-highlights-contents__container-content {
235 justify-content: flex-start;
236 }
237 .${prefix}-highlights-contents__card-info-content {
238 padding: 40px 21px 24px 21px !important;
239 }
240 .${prefix}-highlights-contents__container-actions {
241 bottom: 18px;
242 right: 21px;
243 }
244}
245@media (max-width: 573px) {
246 .${prefix}-highlights-contents__container {
247 height: 43rem;
248 }
249}
250@media (max-width: 400px) {
251 .${prefix}-highlights-contents__container {
252 height: 51rem;
253 }
254 .${prefix}-highlights-contents__container-actions {
255 flex-direction: column;
256 }
257 .${prefix}-highlights-contents__action-left {
258 margin: 16px 0 0 0;
259 }
260}
261</style>
262
263<div class="${prefix}-highlights-contents">
264 <#if entries?has_content>
265 <#list entries as entry>
266 <#assign element = getRootElement(entry) />
267 <#assign tituloDestaques = getSingleNode("tituloDestaques", element.root).getStringValue()?trim />
268 <#assign tituloCard = getSingleNode("tituloCard", element.root).getStringValue()?trim />
269 <#assign subtitulo = getSingleNode("subtitulo", element.root).getStringValue()?trim />
270 <#assign textoDescritivo = getSingleNode("textoDescritivo", element.root).getStringValue()?trim />
271 <#assign imagemDestaque = getSingleNode("imagemDestaque", element.root).getStringValue()?trim />
272 <#assign link = getSingleNode("link", element.root).getStringValue()?trim />
273 <#assign corDoCard = getSingleNode("corDoCard", element.root).getStringValue()?trim />
274 <#assign nodes = getNodes("attach_images", element.root) />
275
276 <div class="${prefix}-highlights-contents__container">
277 <h6 class="${prefix}-highlights-contents__title">${tituloDestaques}</h6>
278 <div class="${prefix}-highlights-contents__card" style="background-color: ${corDoCard}">
279 <div class="${prefix}-highlights-contents__container-imagem">
280 <@getUrlImageDestaque imagemDestaque />
281 </div>
282 <div class="${prefix}-highlights-contents__container-content">
283 <svg class="${prefix}-highlights-contents__adornment-drop" width="45" height="42" viewBox="0 0 45 42" fill="none" xmlns="http://www.w3.org/2000/svg"> <path id="adornment-drop" d="M0.134116 37.4527C0.134116 37.4527 3.15121 8.95447 15.7825 2.89927C28.4139 -3.15592 40.521 6.27006 43.6743 13.9117C46.8277 21.5532 44.4553 34.8806 34.0097 39.869C23.5641 44.8574 0.134116 37.4527 0.134116 37.4527Z" fill="#EEBF62"/> </svg>
284 <div class="${prefix}-highlights-contents__card-info-content">
285 <h6 class="${prefix}-highlights-contents__card-title">${tituloCard}</h6>
286 <p class="${prefix}-highlights-contents__card-subtitle">${subtitulo}</p>
287 <p class="${prefix}-highlights-contents__card-description">${textoDescritivo}</p>
288 </div>
289 <div class="${prefix}-highlights-contents__container-actions">
290 <#if nodes?has_content>
291 <a class="${prefix}-highlights-contents__action" onclick="openModal(event, '${entry?index}', '.instance__${entry?index}', '${tituloCard}')" style="cursor: pointer">
292 <p class="${prefix}-highlights-contents__action-title">Galeria de fotos</p>
293 <svg width="43" height="28" viewBox="0 0 43 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="29.7984" cy="13.798" rx="13.2017" ry="13.254" fill="white"/> <path d="M36.5186 15.7836C36.5652 14.1463 35.3366 14.0728 34.4572 13.6387C31.9957 12.4236 29.5245 11.228 27.0788 9.98186C26.5528 9.71128 26.0824 9.34338 25.6925 8.89752C25.2234 8.35564 24.7461 8.0812 24.2113 8.64306C23.6508 9.23197 24.0616 9.76984 24.56 10.1499C25.6702 10.9966 26.8146 11.7981 28.114 12.7405C26.1813 12.7117 24.3288 12.6301 22.4786 12.667C17.4341 12.7677 12.3911 12.9546 7.34637 13.0291C5.64053 13.0193 3.93645 12.9175 2.2415 12.7241C1.46087 12.6509 0.698164 12.4721 0.450034 13.4806C0.264506 14.2345 0.863848 14.7361 2.11003 14.7731C5.30733 14.868 8.50676 14.9727 11.7045 14.9511C15.4967 14.9254 19.2882 14.7781 23.0795 14.6695C24.1849 14.5941 25.2943 14.6033 26.3982 14.6971C25.6364 15.4717 24.6172 15.484 23.6887 15.7306C23.3389 15.8235 22.9007 15.8088 22.6601 16.022C22.5454 16.1526 22.4588 16.3054 22.4056 16.471C22.3524 16.6367 22.3338 16.8115 22.3508 16.9847C22.4054 17.1143 22.4915 17.2281 22.6014 17.3155C22.7112 17.4029 22.8412 17.4611 22.9794 17.4848C23.4214 17.4831 23.8608 17.4169 24.2838 17.2883C27.7616 16.4496 31.2264 15.5651 34.8665 16.13C35.3859 16.2106 35.9641 15.9091 36.5186 15.7836Z" fill="#009039"/> </svg>
294 </a>
295 </#if>
296 <#if isUrl(link)>
297 <a ${isUrl(link)?string('href="${link}"', '')} ${isExternal(link)?string('target="_blank"', '')} class="${prefix}-highlights-contents__action ${prefix}-highlights-contents__action-left">
298 <p class="${prefix}-highlights-contents__action-title">saiba mais</p>
299 <svg width="43" height="28" viewBox="0 0 43 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="29.7984" cy="13.798" rx="13.2017" ry="13.254" fill="white"/> <path d="M36.5186 15.7836C36.5652 14.1463 35.3366 14.0728 34.4572 13.6387C31.9957 12.4236 29.5245 11.228 27.0788 9.98186C26.5528 9.71128 26.0824 9.34338 25.6925 8.89752C25.2234 8.35564 24.7461 8.0812 24.2113 8.64306C23.6508 9.23197 24.0616 9.76984 24.56 10.1499C25.6702 10.9966 26.8146 11.7981 28.114 12.7405C26.1813 12.7117 24.3288 12.6301 22.4786 12.667C17.4341 12.7677 12.3911 12.9546 7.34637 13.0291C5.64053 13.0193 3.93645 12.9175 2.2415 12.7241C1.46087 12.6509 0.698164 12.4721 0.450034 13.4806C0.264506 14.2345 0.863848 14.7361 2.11003 14.7731C5.30733 14.868 8.50676 14.9727 11.7045 14.9511C15.4967 14.9254 19.2882 14.7781 23.0795 14.6695C24.1849 14.5941 25.2943 14.6033 26.3982 14.6971C25.6364 15.4717 24.6172 15.484 23.6887 15.7306C23.3389 15.8235 22.9007 15.8088 22.6601 16.022C22.5454 16.1526 22.4588 16.3054 22.4056 16.471C22.3524 16.6367 22.3338 16.8115 22.3508 16.9847C22.4054 17.1143 22.4915 17.2281 22.6014 17.3155C22.7112 17.4029 22.8412 17.4611 22.9794 17.4848C23.4214 17.4831 23.8608 17.4169 24.2838 17.2883C27.7616 16.4496 31.2264 15.5651 34.8665 16.13C35.3859 16.2106 35.9641 15.9091 36.5186 15.7836Z" fill="#009039"/> </svg>
300 </a>
301 </#if>
302 </div>
303 <svg class="${prefix}-highlights-contents__adornment-drop-line" width="580" height="228" viewBox="0 0 580 228" fill="none" xmlns="http://www.w3.org/2000/svg"> <path id="adornment-drop-line" d="M578.972 467.773C578.972 467.773 227.773 582.926 89.7694 466.341C-48.2345 349.757 -1.34858 157.502 71.8773 80.0119C145.103 2.52176 314.426 -40.0209 428.326 56.4909C542.226 153.003 578.972 467.773 578.972 467.773Z" stroke="#E5AD7F"/> <path id="adornment-drop-line" d="M578.972 467.773C578.972 467.773 227.773 582.926 89.7694 466.341C-48.2345 349.757 -1.34858 157.502 71.8773 80.0119C145.103 2.52176 314.426 -40.0209 428.326 56.4909C542.226 153.003 578.972 467.773 578.972 467.773Z" stroke="#E5AD7F"/> </svg>
304 </div>
305 </div>
306 </div>
307 <#assign modalContainer>
308 ${modalContainer}
309 <div class="${prefix}-collection-slick-instance__${entry?index} d-none">
310 <#list nodes as nodeItem>
311 <div class="${prefix}-collection-slick-item">
312 <#assign imageFile = nodeItem.selectSingleNode("dynamic-content[@language-id='${locale}']") />
313 <#if !imageFile??>
314 <#assign imageFile = nodeItem.selectSingleNode("dynamic-content") />
315 </#if>
316 <div class="d-flex m-2 ml-0 align-items-center" >
317 <svg width="24" height="28" viewBox="0 0 24 28" fill="none" xmlns="http://www.w3.org/2000/svg">
318 <path d="M19.6364 0C17.235 0 15.2727 1.9881 15.2727 4.42105C15.2727 4.9991 15.3784 5.56033 15.5795 6.06746L7.28409 10.7303C6.50899 10.0188 5.48638 9.57895 4.36364 9.57895C1.96229 9.57895 0 11.567 0 14C0 16.4329 1.96229 18.4211 4.36364 18.4211C5.49082 18.4211 6.51929 17.9862 7.29545 17.2697L15.5909 21.9325C15.3864 22.4433 15.2727 22.9958 15.2727 23.5789C15.2727 26.0119 17.235 28 19.6364 28C22.0377 28 24 26.0119 24 23.5789C24 21.146 22.0377 19.1579 19.6364 19.1579C18.3289 19.1579 17.1536 19.748 16.3523 20.6776L8.20455 16.0954C8.53825 15.4713 8.72727 14.7566 8.72727 14C8.72727 13.2397 8.54132 12.5309 8.20455 11.9046L16.3523 7.32237C17.1536 8.253 18.3281 8.8421 19.6364 8.8421C22.0377 8.8421 24 6.85399 24 4.42105C24 1.9881 22.0377 0 19.6364 0ZM19.6364 1.47368C21.2516 1.47368 22.5455 2.78454 22.5455 4.42105C22.5455 6.05758 21.2516 7.36842 19.6364 7.36842C18.0211 7.36842 16.7273 6.05758 16.7273 4.42105C16.7273 2.78454 18.0211 1.47368 19.6364 1.47368ZM4.36364 11.0526C5.97888 11.0526 7.27273 12.3635 7.27273 14C7.27273 15.6365 5.97888 16.9474 4.36364 16.9474C2.7484 16.9474 1.45455 15.6365 1.45455 14C1.45455 12.3635 2.7484 11.0526 4.36364 11.0526ZM19.6364 20.6316C21.2516 20.6316 22.5455 21.9424 22.5455 23.5789C22.5455 25.2154 21.2516 26.5263 19.6364 26.5263C18.0211 26.5263 16.7273 25.2154 16.7273 23.5789C16.7273 21.9424 18.0211 20.6316 19.6364 20.6316Z" fill="#009039"/>
319 </svg>
320 </div>
321 <@getUrlImage imageFile.getStringValue()?trim />
322 </div>
323 </#list>
324 </div>
325 </#assign>
326 </#list>
327 </#if>
328</div>
329
330<div id="modal" class="${prefix}-media-lightbox" style="z-index: 998;">
331 <div class="${prefix}-media-lightbox__dialog">
332 <div class="${prefix}-media-lightbox__content">
333 <div class="d-flex justify-content-between pt-2 pr-4">
334 <h5 class="${prefix}-social-env-responsability__modal-category" style="font-size: 1.25rem;"></h5>
335 <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal()">
336 <span aria-hidden="true">
337 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
338 <path d="M1.65234 2.24316L17.7686 18.3645" stroke="#009039" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
339 <path d="M17.7676 2.24316L1.65137 18.3645" stroke="#009039" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
340 </svg>
341 </span>
342 </button>
343 </div>
344 ${modalContainer}
345 <div class="d-flex justify-content-between pr-6 pl-3 ${prefix}-highlights-contents-lightbox__buttons">
346 <a class="modal-arrow-prev">
347 <svg width="58" height="49" viewBox="0 0 58 49" fill="none" xmlns="http://www.w3.org/2000/svg">
348 <circle r="17.5" transform="matrix(-1 0 0 1 18.09 23.5)" fill="#009039" />
349 <path d="M9.18107 26.1214C9.11942 23.9595 10.748 23.8625 11.9137 23.2893C15.1766 21.685 18.4524 20.1063 21.6944 18.461C22.3917 18.1037 23.0151 17.618 23.5321 17.0293C24.1538 16.3138 24.7866 15.9515 25.4955 16.6933C26.2385 17.4709 25.6939 18.1811 25.0333 18.6829C23.5615 19.8008 22.0446 20.8591 20.3221 22.1034C22.884 22.0654 25.3397 21.9576 27.7923 22.0063C34.4792 22.1393 41.1642 22.3861 47.8513 22.4844C50.1126 22.4715 52.3715 22.3371 54.6183 22.0817C55.6531 21.9851 56.6641 21.7489 56.993 23.0805C57.2389 24.076 56.4445 24.7382 54.7925 24.7871C50.5543 24.9125 46.3132 25.0507 42.0743 25.0221C37.0474 24.9882 32.0215 24.7937 26.9957 24.6503C25.5305 24.5508 24.0599 24.563 22.5966 24.6868C23.6064 25.7095 24.9574 25.7258 26.1882 26.0514C26.6519 26.174 27.2327 26.1547 27.5518 26.4362C27.7037 26.6085 27.8186 26.8103 27.8891 27.029C27.9596 27.2477 27.9843 27.4786 27.9617 27.7072C27.8894 27.8784 27.7752 28.0286 27.6296 28.144C27.4839 28.2594 27.3116 28.3363 27.1285 28.3676C26.5426 28.3653 25.9601 28.2779 25.3993 28.1081C20.7893 27.0007 16.1963 25.8329 11.3711 26.5787C10.6827 26.6851 9.91622 26.287 9.18107 26.1214Z" fill="white"/>
350 </svg>
351 </a>
352 <a class="modal-arrow-next">
353 <svg width="57" height="49" viewBox="0 0 57 49" fill="none" xmlns="http://www.w3.org/2000/svg">
354 <circle cx="39.5" cy="23.5" r="17.5" fill="#009039"/>
355 <path d="M48.4086 26.1214C48.4703 23.9595 46.8417 23.8625 45.676 23.2893C42.4132 21.685 39.1373 20.1063 35.8953 18.461C35.1981 18.1037 34.5746 17.618 34.0576 17.0293C33.4359 16.3138 32.8032 15.9515 32.0942 16.6933C31.3512 17.4709 31.8958 18.1811 32.5564 18.6829C34.0282 19.8008 35.5452 20.8591 37.2676 22.1034C34.7057 22.0654 32.25 21.9576 29.7974 22.0063C23.1105 22.1393 16.4256 22.3861 9.73838 22.4844C7.47715 22.4715 5.21825 22.3371 2.97146 22.0817C1.93667 21.9851 0.925632 21.7489 0.596715 23.0805C0.350782 24.076 1.14526 24.7382 2.79718 24.7871C7.03546 24.9125 11.2766 25.0507 15.5155 25.0221C20.5423 24.9882 25.5682 24.7937 30.594 24.6503C32.0592 24.5508 33.5298 24.563 34.9931 24.6868C33.9833 25.7095 32.6323 25.7258 31.4015 26.0514C30.9378 26.174 30.357 26.1547 30.0379 26.4362C29.886 26.6085 29.7712 26.8103 29.7006 27.029C29.6301 27.2477 29.6054 27.4786 29.6281 27.7072C29.7003 27.8784 29.8146 28.0286 29.9602 28.144C30.1058 28.2594 30.2781 28.3363 30.4612 28.3676C31.0471 28.3653 31.6296 28.2779 32.1904 28.1081C36.8004 27.0007 41.3934 25.8329 46.2186 26.5787C46.907 26.6851 47.6735 26.287 48.4086 26.1214Z" fill="white"/>
356 </svg>
357 </a>
358 </div>
359 </div>
360 </div>
361</div>
362
363<script>
364 $(document).ready(function () {
365 openModal = function (e, index, instance_container_position, naming) {
366 e = e || window.event;
367 e.preventDefault();
368 $('#modal').show();
369 $('body').addClass('overflow-hidden');
370 $('.${prefix}-social-env-responsability__modal-category').text(naming);
371
372 var slickElement = $('.${prefix}-collection-slick-instance__' + index);
373 slickElement.not('.slick-initialized').slick({
374 dots: false,
375 arrows: true,
376 cssEase: 'linear',
377 initialSlide: 0,
378 infinite: true,
379 speed: 300,
380 slidesToShow: 1,
381 slidesToScroll: 1,
382 autoplay: false,
383 prevArrow: $('.modal-arrow-prev'),
384 nextArrow: $('.modal-arrow-next'),
385 });
386
387 $('.${prefix}-collection-slick-instance__' + index).removeClass('d-none');
388 }
389
390 closeModal = function (e) {
391 e = e || window.event;
392 e.preventDefault();
393 $('#modal').hide();
394 $('body').removeClass('overflow-hidden');
395 $('.popover').popover('hide');
396 $('.slick-initialized').addClass('d-none');
397 var slickElement = $('.slick-initialized');
398 slickElement.slick('unslick');
399
400 }
401
402 lightenDarkenColor = function (col, amt) {
403 var usePound = false;
404 if (col[0] == "#") {
405 col = col.slice(1);
406 usePound = true;
407 }
408 var num = parseInt(col,16);
409 var r = (num >> 16) + amt;
410 if (r > 255) r = 255;
411 else if (r < 0) r = 0;
412 var b = ((num >> 8) & 0x00FF) + amt;
413 if (b > 255) b = 255;
414 else if (b < 0) b = 0;
415 var g = (num & 0x0000FF) + amt;
416 if (g > 255) g = 255;
417 else if (g < 0) g = 0;
418 return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
419 }
420
421 $('.${prefix}-media-lightbox').on('click', function (e) {
422 if ($('.${prefix}-media-lightbox__dialog').has($(e.target)).length > 0) {
423 e.preventDefault();
424 } else {
425 closeModal(e);
426 }
427 })
428
429 window.shave('.${prefix}-highlights-contents__card-description', 300);
430
431 $('#adornment-drop').attr('fill',lightenDarkenColor('${corDoCard}', -22));
432 $('#adornment-drop-line').attr('stroke',lightenDarkenColor('${corDoCard}', -25));
433 });
434</script>