1import{r as v,n as d,c as b,w,L as x,x as m,e as u}from"./main-DdEGjCiE.js";import{e as p}from"./query-D1pSaKds.js";import{i as z}from"./is-mobile-D5iCr1X9.js";import{S as k}from"./slot-WngKKW0W.js";const I=`@charset "UTF-8"; 2/*------------------------------------*\\ 3 #RESET 4\\*------------------------------------*/ 5/** 6 * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ 7 */ 8*, 9::slotted(*), 10*:before, 11*:after { 12 box-sizing: border-box; 13} 14 15:host *, 16:host *::before, 17:host *::after { 18 box-sizing: inherit; 19} 20 21[hidden] { 22 display: none !important; 23} 24 25/* ------------------------------------*\\ 26 #TYPOGRAPHY PLACEHOLDERS 27\\*------------------------------------ */ 28.leaf-c-promo--brand ::slotted([slot=content]), .leaf-c-promo--simple ::slotted([slot=content]), .leaf-c-promo--image ::slotted([slot=content]) { 29 font-family: var(--leaf-typography-body-default-font-family); 30 font-size: var(--leaf-typography-body-default-font-size); 31 font-weight: var(--leaf-typography-body-default-font-weight); 32 line-height: var(--leaf-typography-body-default-line-height); 33 -webkit-text-decoration: var(--leaf-typography-body-default-text-decoration); 34 text-decoration: var(--leaf-typography-body-default-text-decoration); 35 text-transform: var(--leaf-typography-body-default-text-transform); 36} 37 38.leaf-c-promo--brand ::slotted([slot=meta]), .leaf-c-promo--simple ::slotted([slot=meta]), .leaf-c-promo--image ::slotted([slot=meta]) { 39 font-family: var(--leaf-typography-body-small-font-family); 40 font-size: var(--leaf-typography-body-small-font-size); 41 font-weight: var(--leaf-typography-body-small-font-weight); 42 line-height: var(--leaf-typography-body-small-line-height); 43 -webkit-text-decoration: var(--leaf-typography-body-small-text-decoration); 44 text-decoration: var(--leaf-typography-body-small-text-decoration); 45 text-transform: var(--leaf-typography-body-small-text-transform); 46} 47 48:host([variant=brand]), .leaf-c-promo--logo { 49 left: 50%; 50 margin-left: -50dvw; 51 margin-right: -50dvw; 52 position: relative; 53 right: 50%; 54 width: 100dvw; 55} 56 57.leaf-c-promo--brand .promo-content-container { 58 box-sizing: border-box; 59 margin-left: auto; 60 margin-right: auto; 61 padding-left: 1rem; 62 padding-right: 1rem; 63 width: 100%; 64} 65@media (min-width: 35rem) { 66 .leaf-c-promo--brand .promo-content-container { 67 max-width: 540px; 68 } 69} 70@media (min-width: 48rem) { 71 .leaf-c-promo--brand .promo-content-container { 72 max-width: 720px; 73 } 74} 75@media (min-width: 60rem) { 76 .leaf-c-promo--brand .promo-content-container { 77 max-width: 960px; 78 } 79} 80@media (min-width: 75rem) { 81 .leaf-c-promo--brand .promo-content-container { 82 max-width: 1140px; 83 } 84} 85@media (min-width: 87.5rem) { 86 .leaf-c-promo--brand .promo-content-container { 87 max-width: 1320px; 88 } 89} 90 91/* 92 Hiding class, making content visible only to screen readers but not visually ("sr" meaning "screen-reader") 93 Is the hidden content read by a screen reader? - Yes 94 Will the hidden element affect the document layout? - No 95 Will the hidden elementâs box model be rendered? - No 96 Does the element detect clicks or focus? - Yes 97 https://css-tricks.com/comparing-various-ways-to-hide-things-in-css/#method-5-the-visually-hidden-class 98*/ 99/* 100======= 101Animations 102======= 103*/ 104@keyframes fadeIn { 105 100% { 106 opacity: 1; 107 } 108} 109@keyframes slideIn { 110 100% { 111 transform: translateX(0); 112 } 113} 114@keyframes slideInFwd { 115 100% { 116 width: 272px; 117 height: 272px; 118 } 119} 120@keyframes slideOutRight { 121 100% { 122 width: 272px; 123 height: 272px; 124 } 125} 126@keyframes slideUp { 127 100% { 128 transform: translateY(0); 129 } 130} 131@media (min-width: 481px) { 132 @keyframes slideInFwd { 133 100% { 134 width: 417px; 135 height: 417px; 136 } 137 } 138 @keyframes slideOutRight { 139 100% { 140 width: 417px; 141 height: 417px; 142 } 143 } 144} 145@media (min-width: 48rem) { 146 @keyframes slideInFwd { 147 100% { 148 width: 330px; 149 height: 330px; 150 } 151 } 152 @keyframes slideOutRight { 153 100% { 154 width: 330px; 155 height: 330px; 156 transform: translateX(calc(100vw - 45px)); 157 } 158 } 159} 160@media (min-width: 60rem) { 161 @keyframes slideInFwd { 162 100% { 163 width: 460px; 164 height: 460px; 165 } 166 } 167 @keyframes slideOutRight { 168 100% { 169 width: 460px; 170 height: 460px; 171 transform: translateX(calc(100vw - 45px)); 172 } 173 } 174} 175@media (min-width: 75rem) { 176 @keyframes slideInFwd { 177 100% { 178 width: 592px; 179 height: 591px; 180 } 181 } 182 @keyframes slideOutRight { 183 100% { 184 width: 592px; 185 height: 591px; 186 transform: translateX(calc(100vw - 45px)); 187 } 188 } 189} 190@media (min-width: 87.5rem) { 191 @keyframes slideOutRight { 192 100% { 193 width: 592px; 194 height: 591px; 195 transform: translateX(calc(100vw - 120px)); 196 } 197 } 198} 199@media (min-width: 2200px) { 200 @keyframes slideOutRight { 201 100% { 202 width: 592px; 203 height: 591px; 204 transform: translateX(calc(100vw - 592px)); 205 } 206 } 207} 208span.ripple { 209 position: absolute; 210 border-radius: 50%; 211 transform: scale(0); 212 animation: ripple 600ms linear; 213 background-color: var(--ripple-bg-color); 214} 215 216@keyframes ripple { 217 to { 218 transform: scale(4); 219 opacity: 1; 220 } 221} 222:host { 223 --leafdcws-evernorth-logo-width-sm: 272px; 224 --leafdcws-evernorth-logo-width-md: 430px; 225 --leafdcws-cigna-healthcare-logo-width-sm: 256px; 226 --leafdcws-cigna-healthcare-logo-width-md: 283px; 227} 228 229:host([variant=brand]) { 230 display: block; 231 overflow: hidden; 232} 233 234::slotted([slot=heading]) { 235 margin-block: 0 !important; 236} 237 238::slotted(:last-child) { 239 padding: 0 !important; 240} 241 242.leaf-c-promo--brand { 243 --image-size: 272px; 244 --promo-color-primary: var(--leaf-color-bg-brand-strong); 245 --promo-color-secondary: var(--tcg-color-bg-accent-1); 246 --promo-color-heading: var(--leaf-color-content-knockout); 247 --promo-color-content: var(--leaf-color-content-knockout); 248 display: block; 249 /* 250 ======= 251 Mobile Styles 252 ======= 253 */ 254 /* 255 ======= 256 Desktop Styles 257 ======= 258 */ 259} 260.leaf-c-promo--brand.leaf-c-promo--hypermint { 261 --promo-color-primary: var(--tcg-color-bg-accent-1); 262 --promo-color-secondary: var(--leaf-color-bg-brand-strong); 263 --promo-color-heading: var(--leaf-color-content-brand-strong); 264 --promo-color-content: var(--leaf-color-content-default); 265}
266.leaf-c-promo--brand.leaf-c-promo--navy { 267 --promo-color-primary: var(--leaf-color-bg-brand-xstrong); 268 --promo-color-secondary: var(--tcg-color-bg-accent-3); 269} 270.leaf-c-promo--brand .promo-content-container { 271 position: relative; 272 width: 100%; 273 z-index: var(--leafdcws-z-index-100); 274} 275.leaf-c-promo--brand .promo-content { 276 padding: var(--leaf-spacing-32) 0; 277} 278.leaf-c-promo--brand .promo-decoration-secondary { 279 background: var(--promo-color-secondary); 280 border-radius: var(--leaf-border-radius-round); 281 position: absolute; 282 top: 0; 283 width: var(--image-size); 284 height: var(--image-size); 285 transform: translateX(90vw); 286} 287.leaf-c-promo--brand .promo-decoration-image { 288 height: var(--image-size); 289 width: 100%; 290 background: var(--promo-color-primary); 291 border-top-right-radius: 294px; 292 border-bottom-right-radius: 294px; 293 max-width: 90vw; 294 position: absolute; 295 top: 0; 296 left: 0; 297} 298@media (max-width: 47.999rem) { 299 .leaf-c-promo--brand .promo-decoration-image { 300 border-top: var(--leaf-border-width-default) solid var(--promo-color-primary); 301 top: -1px; 302 } 303} 304.leaf-c-promo--brand ::slotted([slot=heading]), 305.leaf-c-promo--brand ::slotted([slot=meta]), 306.leaf-c-promo--brand ::slotted([slot=content]) { 307 color: var(--promo-color-content); 308 display: block; 309 padding-bottom: var(--leaf-spacing-16); 310} 311.leaf-c-promo--brand ::slotted([slot=heading]) { 312 color: var(--promo-color-heading); 313 font-family: var(--leaf-typography-title-default-font-family) !important; 314 font-size: var(--leaf-typography-title-default-font-size) !important; 315 font-weight: var(--leaf-typography-title-default-font-weight) !important; 316 line-height: var(--leaf-typography-title-default-line-height) !important; 317 -webkit-text-decoration: var(--leaf-typography-title-default-text-decoration) !important; 318 text-decoration: var(--leaf-typography-title-default-text-decoration) !important; 319 text-transform: var(--leaf-typography-title-default-text-transform) !important; 320} 321@media (min-width: 48rem) { 322 .leaf-c-promo--brand ::slotted([slot=heading]) { 323 font-family: var(--leaf-typography-headline-small-mobile-font-family) !important; 324 font-size: var(--leaf-typography-headline-small-mobile-font-size) !important; 325 font-weight: var(--leaf-typography-headline-small-mobile-font-weight) !important; 326 line-height: var(--leaf-typography-headline-small-mobile-line-height) !important; 327 -webkit-text-decoration: var(--leaf-typography-headline-small-mobile-text-decoration) !important; 328 text-decoration: var(--leaf-typography-headline-small-mobile-text-decoration) !important; 329 text-transform: var(--leaf-typography-headline-small-mobile-text-transform) !important; 330 } 331} 332@media (min-width: 60rem) { 333 .leaf-c-promo--brand ::slotted([slot=heading]) { 334 font-family: var(--leaf-typography-headline-default-font-family) !important; 335 font-size: var(--leaf-typography-headline-default-font-size) !important; 336 font-weight: var(--leaf-typography-headline-default-font-weight) !important; 337 line-height: var(--leaf-typography-headline-default-line-height) !important; 338 -webkit-text-decoration: var(--leaf-typography-headline-default-text-decoration) !important; 339 text-decoration: var(--leaf-typography-headline-default-text-decoration) !important; 340 text-transform: var(--leaf-typography-headline-default-text-transform) !important; 341 } 342} 343.leaf-c-promo--brand ::slotted([slot=cta]) { 344 display: block; 345} 346.leaf-c-promo--brand ::slotted(img) { 347 position: absolute; 348 right: 0; 349 top: 0; 350 height: var(--image-size); 351 width: var(--image-size); 352 border-radius: var(--leaf-border-radius-round); 353} 354@media (max-width: 47.999rem) { 355 .leaf-c-promo--brand ::slotted(img) { 356 top: -1px; 357 } 358} 359@media (max-width: 47.999rem) { 360 .leaf-c-promo--brand .decoration-container { 361 display: flex; 362 height: var(--image-size); 363 position: relative; 364 } 365 .leaf-c-promo--brand .promo-content-container { 366 background: var(--promo-color-primary); 367 min-width: 100%; 368 } 369} 370@media (min-width: 400px) { 371 .leaf-c-promo--brand .promo-decoration-image { 372 max-width: 85vw; 373 } 374 .leaf-c-promo--brand .promo-decoration-secondary { 375 transform: translateX(85vw); 376 } 377} 378@media (min-width: 500px) { 379 .leaf-c-promo--brand { 380 --image-size: 417px; 381 } 382} 383@media (min-width: 620px) { 384 .leaf-c-promo--brand .promo-decoration-image { 385 max-width: 75vw; 386 } 387 .leaf-c-promo--brand .promo-decoration-secondary { 388 transform: translateX(75vw); 389 } 390} 391@media (min-width: 700px) { 392 .leaf-c-promo--brand .promo-decoration-image { 393 max-width: 65vw; 394 } 395 .leaf-c-promo--brand .promo-decoration-secondary { 396 transform: translateX(65vw); 397 } 398} 399@media (min-width: 48rem) { 400 .leaf-c-promo--brand { 401 --image-size: 330px; 402 display: flex; 403 padding-top: 330px; 404 position: relative; 405 } 406 .leaf-c-promo--brand .promo-content-container { 407 left: 50%; 408 opacity: 0; 409 position: absolute; 410 top: 50%; 411 transform: translate(-50%, -50%); 412 } 413 .leaf-c-promo--brand .promo-content-container.active { 414 animation: fadeIn 0.4s forwards; 415 animation-delay: 0.6s; 416 } 417 .leaf-c-promo--brand .promo-content { 418 max-width: 46vw; 419 padding-bottom: var(--leaf-spacing-48); 420 padding-top: var(--leaf-spacing-48); 421 padding-right: var(--leaf-spacing-32); 422 } 423 .leaf-c-promo--brand .decoration-container { 424 height: unset; 425 } 426 .leaf-c-promo--brand .promo-decoration-image { 427 transform: translateX(-100vw); 428 max-width: initial; 429 width: calc(100% - 45px); 430 } 431 .leaf-c-promo--brand .promo-decoration-secondary { 432 height: 1px; 433 max-width: initial; 434 transform: translateX(calc(50vw - 165px)); 435 width: 1px; 436 } 437 .leaf-c-promo--brand .promo-decoration-secondary.active { 438 animation: slideInFwd 0.5s forwards, slideOutRight 0.5s forwards 1.01s; 439 } 440 .leaf-c-promo--brand .promo-decoration-image.active { 441 animation: slideIn 0.6s forwards; 442 } 443} 444@media (min-width: 60rem) { 445 .leaf-c-promo--brand { 446 --image-size: 460px; 447 padding-top: var(--image-size); 448 } 449 .leaf-c-promo--brand .promo-content { 450 max-width: 46.5vw; 451 } 452 .leaf-c-promo--brand .promo-decoration-secondary { 453 transform: translateX(calc(50vw - 230px)); 454 } 455} 456@media (min-width: 75rem) { 457 .leaf-c-promo--brand { 458 --image-size: 588px; 459 padding-top: 591px; 460 } 461 .leaf-c-promo--brand .promo-content { 462 max-width: 43.5vw; 463 } 464 .leaf-c-promo--brand .promo-decoration-secondary { 465 transform: translateX(calc(50vw - 296px)); 466 } 467} 468@media (min-width: 87.5rem) { 469 .leaf-c-promo--brand .promo-content { 470 max-width: 45.5vw; 471 } 472 .leaf-c-promo--brand .promo-decoration-image { 473 width: calc(100% - 120px); 474 } 475} 476@media (min-width: 1600px) { 477 .leaf-c-promo--brand .promo-content { 478 max-width: 46vw; 479 } 480} 481@media (min-width: 1800px) { 482 .leaf-c-promo--brand .promo-content { 483 max-width: calc(46vw + 1%); 484 } 485} 486@media (min-width: 2200px) { 487 .leaf-c-promo--brand .promo-content { 488 max-width: 26vw; 489 } 490 .leaf-c-promo--brand .promo-decoration-image { 491 width: calc(100% - 592px); 492 } 493} 494 495.leaf-c-promo--simple { 496 height: 100%; 497} 498.leaf-c-promo--simple .promo-content-container { 499 align-items: center; 500 background-color: var(--leaf-color-bg-subtle); 501 border-radius: var(--leaf-border-radius-large); 502 color: var(--leaf-color-content-default); 503 display: flex; 504 height: 100%; 505 padding: var(--leaf-spacing-32); 506} 507.leaf-c-promo--simple ::slotted([slot=heading]), 508.leaf-c-promo--simple ::slotted([slot=content]) { 509 display: block; 510 padding-bottom: var(--leaf-spacing-16); 511} 512.leaf-c-promo--simple ::slotted([slot=heading]) { 513 color: var(--leaf-color-content-brand-strong); 514 font-family: var(--leaf-typography-title-default-font-family) !important; 515 font-size: var(--leaf-typography-title-default-font-size) !important;
516 font-weight: var(--leaf-typography-title-default-font-weight) !important; 517 line-height: var(--leaf-typography-title-default-line-height) !important; 518 -webkit-text-decoration: var(--leaf-typography-title-default-text-decoration) !important; 519 text-decoration: var(--leaf-typography-title-default-text-decoration) !important; 520 text-transform: var(--leaf-typography-title-default-text-transform) !important; 521} 522@media (max-width: 60rem) { 523 .leaf-c-promo--simple.leaf-c-promo--small .promo-content-container { 524 padding: var(--leaf-spacing-24); 525 } 526 .leaf-c-promo--simple.leaf-c-promo--small ::slotted([slot=heading]) { 527 font-family: var(--leaf-typography-title-small-font-family) !important; 528 font-size: var(--leaf-typography-title-small-font-size) !important; 529 font-weight: var(--leaf-typography-title-small-font-weight) !important; 530 line-height: var(--leaf-typography-title-small-line-height) !important; 531 -webkit-text-decoration: var(--leaf-typography-title-small-text-decoration) !important; 532 text-decoration: var(--leaf-typography-title-small-text-decoration) !important; 533 text-transform: var(--leaf-typography-title-small-text-transform) !important; 534 } 535} 536@media (min-width: 48rem) { 537 .leaf-c-promo--simple:not(.leaf-c-promo--small) .promo-content-container { 538 padding: var(--leaf-spacing-48); 539 } 540} 541@media (min-width: 48rem) { 542 .leaf-c-promo--simple:not(.leaf-c-promo--small) ::slotted([slot=heading]) { 543 font-family: var(--leaf-typography-title-large-font-family) !important; 544 font-size: var(--leaf-typography-title-large-font-size) !important; 545 font-weight: var(--leaf-typography-title-large-font-weight) !important; 546 line-height: var(--leaf-typography-title-large-line-height) !important; 547 -webkit-text-decoration: var(--leaf-typography-title-large-text-decoration) !important; 548 text-decoration: var(--leaf-typography-title-large-text-decoration) !important; 549 text-transform: var(--leaf-typography-title-large-text-transform) !important; 550 } 551} 552 553.leaf-c-promo--icon { 554 --gap-size: var(--leaf-spacing-16); 555 --negative-margin: var(--leaf-spacing-48); 556 --icon-size: 80px; 557 display: flex; 558 flex-direction: column; 559} 560.leaf-c-promo--icon .promo-content-container { 561 margin-top: calc(0px - var(--negative-margin)); 562 padding-top: calc(var(--negative-margin) + var(--gap-size)); 563} 564.leaf-c-promo--icon.leaf-c-promo--small .promo-content-container { 565 height: auto; 566 padding-top: calc(var(--negative-margin) + var(--gap-size)); 567} 568@media (min-width: 48rem) { 569 .leaf-c-promo--icon:not(.leaf-c-promo--small) { 570 flex-direction: row; 571 --gap-size: var(--leaf-spacing-32); 572 --negative-margin: var(--leaf-spacing-64); 573 } 574 .leaf-c-promo--icon:not(.leaf-c-promo--small) .promo-content-container { 575 margin-left: calc(0px - var(--negative-margin)); 576 padding-left: calc(var(--negative-margin) + var(--gap-size)); 577 margin-top: 0; 578 } 579} 580.leaf-c-promo--icon .promo-content-container { 581 order: 2; 582 width: 100%; 583} 584.leaf-c-promo--icon .decoration-container { 585 align-self: center; 586 order: 1; 587 z-index: var(--leafdcws-z-index-100); 588} 589.leaf-c-promo--icon .promo-decoration-image { 590 background-color: var(--tcg-color-bg-accent-1); 591 border-radius: var(--leaf-border-radius-round); 592 line-height: 0; 593 padding: var(--leaf-spacing-32); 594 width: -moz-fit-content; 595 width: fit-content; 596} 597.leaf-c-promo--icon ::slotted([slot=icon]) { 598 --icon-height: var(--icon-size); 599 --icon-width: var(--icon-size); 600 --icon-fill: var(--leaf-color-content-brand-strong); 601} 602 603.leaf-c-promo--logo .promo-content-container { 604 border-radius: 0; 605 justify-content: center; 606} 607.leaf-c-promo--logo .promo-content { 608 align-items: center; 609 display: flex; 610 flex-direction: column; 611} 612.leaf-c-promo--logo ::slotted([slot=logo]) { 613 --icon-height: auto; 614 --icon-width: 100%; 615 margin-bottom: var(--leaf-spacing-32); 616} 617@media (min-width: 35rem) { 618 .leaf-c-promo--logo ::slotted([slot=logo]) { 619 --icon-width: var(--leafdcws-evernorth-logo-width-sm); 620 } 621} 622@media (min-width: 48rem) { 623 .leaf-c-promo--logo ::slotted([slot=logo]) { 624 --icon-width: var(--leafdcws-evernorth-logo-width-md); 625 } 626} 627.leaf-c-promo--logo ::slotted([slot=logo][set=logos][name^=cigna-]) { 628 --icon-width: 100%; 629} 630@media (min-width: 35rem) { 631 .leaf-c-promo--logo ::slotted([slot=logo][set=logos][name^=cigna-]) { 632 --icon-width: var(--leafdcws-cigna-healthcare-logo-width-sm); 633 } 634} 635@media (min-width: 48rem) { 636 .leaf-c-promo--logo ::slotted([slot=logo][set=logos][name^=cigna-]) { 637 --icon-width: var(--leafdcws-cigna-healthcare-logo-width-md); 638 } 639} 640.leaf-c-promo--logo.leaf-c-promo--hypermint .promo-content-container { 641 background: var(--tcg-color-bg-accent-1); 642} 643.leaf-c-promo--logo.leaf-c-promo--blue .promo-content-container { 644 background: var(--leaf-color-bg-brand-strong); 645}
646.leaf-c-promo--logo.leaf-c-promo--navy .promo-content-container { 647 background: var(--leaf-color-bg-brand-xstrong); 648} 649 650.leaf-c-promo--image { 651 display: flex; 652 background-color: var(--leaf-color-bg-subtle); 653 border-radius: var(--leaf-border-radius-large); 654 color: var(--leaf-color-content-default); 655} 656@media (max-width: 60rem) { 657 .leaf-c-promo--image { 658 flex-direction: column; 659 } 660} 661.leaf-c-promo--image ::slotted([slot=heading]), 662.leaf-c-promo--image ::slotted([slot=content]) { 663 display: block; 664 padding-bottom: var(--leaf-spacing-16); 665} 666.leaf-c-promo--image ::slotted([slot=heading]) { 667 color: var(--leaf-color-content-brand-strong); 668 font-family: var(--leaf-typography-title-default-font-family) !important; 669 font-size: var(--leaf-typography-title-default-font-size) !important; 670 font-weight: var(--leaf-typography-title-default-font-weight) !important; 671 line-height: var(--leaf-typography-title-default-line-height) !important; 672 -webkit-text-decoration: var(--leaf-typography-title-default-text-decoration) !important; 673 text-decoration: var(--leaf-typography-title-default-text-decoration) !important; 674 text-transform: var(--leaf-typography-title-default-text-transform) !important; 675} 676@media (min-width: 60rem) { 677 .leaf-c-promo--image ::slotted([slot=heading]) { 678 font-family: var(--leaf-typography-title-large-font-family) !important; 679 font-size: var(--leaf-typography-title-large-font-size) !important; 680 font-weight: var(--leaf-typography-title-large-font-weight) !important; 681 line-height: var(--leaf-typography-title-large-line-height) !important; 682 -webkit-text-decoration: var(--leaf-typography-title-large-text-decoration) !important; 683 text-decoration: var(--leaf-typography-title-large-text-decoration) !important; 684 text-transform: var(--leaf-typography-title-large-text-transform) !important; 685 } 686} 687.leaf-c-promo--image .promo-content-container { 688 order: 2; 689 padding: var(--leaf-spacing-32); 690} 691@media (min-width: 60rem) { 692 .leaf-c-promo--image .promo-content-container { 693 padding: var(--leaf-spacing-48); 694 } 695} 696.leaf-c-promo--image .promo-content-container, 697.leaf-c-promo--image .decoration-container { 698 flex-basis: 50%; 699} 700.leaf-c-promo--image .decoration-container { 701 order: 1; 702 width: 100%; 703} 704.leaf-c-promo--image .promo-decoration-image { 705 border-radius: var(--leaf-border-radius-large) var(--leaf-border-radius-large) 0 0; 706 overflow: hidden; 707} 708.leaf-c-promo--image .promo-decoration-image ::slotted([slot=decoration]) { 709 width: 100%; 710} 711@media (min-width: 60rem) { 712 .leaf-c-promo--image:not(.leaf-c-promo--small) .promo-decoration-image { 713 background-size: cover; 714 background-position: center; 715 border-radius: var(--leaf-border-radius-large) 0 0 var(--leaf-border-radius-large); 716 height: 100%; 717 } 718 .leaf-c-promo--image:not(.leaf-c-promo--small) .promo-decoration-image ::slotted([slot=image]) { 719 display: none !important; 720 } 721} 722.leaf-c-promo--image.leaf-c-promo--small { 723 flex-direction: column; 724} 725.leaf-c-promo--image.leaf-c-promo--small .promo-content-container, .leaf-c-promo--image.leaf-c-promo--medium .promo-content-container { 726 padding: var(--leaf-spacing-32); 727} 728.leaf-c-promo--image.leaf-c-promo--small ::slotted([slot=heading]), .leaf-c-promo--image.leaf-c-promo--medium ::slotted([slot=heading]) { 729 font-family: var(--leaf-typography-title-default-font-family) !important; 730 font-size: var(--leaf-typography-title-default-font-size) !important; 731 font-weight: var(--leaf-typography-title-default-font-weight) !important; 732 line-height: var(--leaf-typography-title-default-line-height) !important; 733 -webkit-text-decoration: var(--leaf-typography-title-default-text-decoration) !important; 734 text-decoration: var(--leaf-typography-title-default-text-decoration) !important; 735 text-transform: var(--leaf-typography-title-default-text-transform) !important; 736} 737.leaf-c-promo--image.leaf-c-promo--large { 738 min-height: 350px; 739} 740.leaf-c-promo--image.leaf-c-promo--large .promo-content-container { 741 align-items: center; 742 display: flex; 743} 744 745.leaf-c-promo--inverted:not(.leaf-c-promo--simple) { 746 background-color: var(--leaf-color-bg-brand-xstrong); 747} 748.leaf-c-promo--inverted.leaf-c-promo--simple .promo-content-container { 749 background-color: var(--leaf-color-bg-brand-xstrong); 750} 751.leaf-c-promo--inverted ::slotted([slot=heading]), 752.leaf-c-promo--inverted ::slotted([slot=meta]), 753.leaf-c-promo--inverted ::slotted([slot=content]) { 754 color: var(--leaf-color-content-knockout); 755}`;var C=Object.defineProperty,P=Object.getOwnPropertyDescriptor,r=(c,n,a,t)=>{for(var o=t>1?void 0:t?P(n,a):n,i=c.length-1,l;i>=0;i--)(l=c[i])&&(o=(t?l(n,a,o):l(o))||o);return t&&o&&C(n,a,o),o};const y=class extends x{constructor(){super(...arguments),this.slotController=new k(this),this.variant="simple",this.size="default",this.color="blue",this.inverted=!1,this.getIcon=()=>{var n;const a=(n=this.shadowRoot)==null?void 0:n.querySelector('slot[name="icon"]');this.icon=a?.assignedNodes()[0]},this.setImage=()=>{var n;if(!z("lg")&&this.variant==="image"&&this.slottedImage){const a=this.slottedImage.assignedNodes()[0],t=a.nodeName==="PICTURE"?a.querySelector("img"):a,o=t.getAttribute("aria-label"),i=l=>{var s,f,g;let h=`background-image: url(${l});`;this.imagePosition&&(h+=`background-position: ${this.imagePosition};`),(s=this.promoDecorationImage)==null||s.setAttribute("style",h),o&&((f=this.promoDecorationImage)==null||f.setAttribute("role","img"),(g=this.promoDecorationImage)==null||g.setAttribute("aria-label",`${o}`))};t.complete?i(t.currentSrc):t.onload=function(){i(t.currentSrc)}}else(n=this.promoDecorationImage)==null||n.removeAttribute("style")}}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",()=>{this.setImage()})}async updated(n){super.updated(n),this.variant==="brand"&&new IntersectionObserver(async t=>{var o;t[0].isIntersecting===!0&&((o=this.promoDecorationSecondary)==null||o.classList.add("active"),setTimeout(()=>{var i,l;(i=this.promoDecorationImage)==null||i.classList.add("active"),(l=this.promoContentContainer)==null||l.classList.add("active")},900))},{threshold:[0]}).observe(this.renderRoot.host)}updateImagePosition(){this.setImage()}render(){const n={"leaf-c-promo":!0,"leaf-c-promo--simple":this.variant==="simple","leaf-c-promo--image":this.variant==="image","leaf-c-promo--brand":this.variant==="brand","leaf-c-promo--small":this.size==="small","leaf-c-promo--medium":this.size==="medium","leaf-c-promo--large":this.size==="large","leaf-c-promo--inverted":this.inverted,"leaf-c-promo--icon":this.icon!==void 0,"leaf-c-promo--logo":this.slotController.hasNamedSlot("logo"),"leaf-c-promo--blue":this.color==="blue","leaf-c-promo--nav
755y":this.color==="navy","leaf-c-promo--hypermint":this.color==="hypermint"};return m` 756 <div class=${u(n)}> 757 <div class="promo-content-container"> 758 <div class="promo-content"> 759 ${this.variant==="simple"&&this.slotController.hasNamedSlot("logo")?m`<slot name="logo"></slot> <slot name="cta"></slot>`:m` 760 <slot name="meta"></slot> 761 <slot name="heading"></slot> 762 <slot name="content"></slot> 763 <slot name="cta"></slot> 764 `} 765 </div> 766 </div> 767 <div class="decoration-container"> 768 <div class="promo-decoration-secondary"></div> 769 <div class="promo-decoration-image"> 770 ${this.variant==="simple"?m`<slot name="icon" @slotchange=${this.getIcon}></slot>`:m`<slot name="image" @slotchange=${this.setImage}></slot>`} 771 </div> 772 </div> 773 </div> 774 `}};y.styles=v(I);let e=y;r([d()],e.prototype,"variant",2);r([d()],e.prototype,"size",2);r([d()],e.prototype,"color",2);r([d({type:Boolean,reflect:!0})],e.prototype,"inverted",2);r([d({attribute:"image-position"})],e.prototype,"imagePosition",2);r([b()],e.prototype,"icon",2);r([p('slot[name="image"]')],e.prototype,"slottedImage",2);r([p(".promo-decoration-image")],e.prototype,"promoDecorationImage",2);r([p(".promo-decoration-secondary")],e.prototype,"promoDecorationSecondary",2);r([p(".promo-content-container")],e.prototype,"promoContentContainer",2);r([w(["imagePosition"])],e.prototype,"updateImagePosition",1);customElements.define("tcg-promo",e);export{e as TCGPromo}; 775//# sourceMappingURL=promo-xgOuCKm4.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.